/* ---- Hekimlerimiz: sayfa scope'lu stiller (hk-) ---- */

/* =================== HERO =================== */
.hk-hero{
  position:relative; overflow:hidden;
  padding:clamp(40px,6vw,72px) 0 clamp(56px,7vw,88px);
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(70,198,255,.16), transparent 55%),
    radial-gradient(90% 80% at 8% 0%, rgba(43,134,255,.14), transparent 60%),
    linear-gradient(180deg,#fff 0%, var(--paper) 100%);
}
.hk-hero-bg{ position:absolute; inset:0; pointer-events:none; }
.hk-hero-bg .hk-gridbg{
  position:absolute; inset:-2px;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 80% at 60% 0%,#000,transparent 72%);
          mask-image:radial-gradient(120% 80% at 60% 0%,#000,transparent 72%);
  opacity:.6;
}
.hk-hero-bg .hk-glow{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; }
.hk-hero-bg .g1{ width:420px;height:420px; top:-120px;right:-60px; background:radial-gradient(circle,var(--cyan),transparent 70%); }
.hk-hero-bg .g2{ width:380px;height:380px; bottom:-160px;left:-80px;  background:radial-gradient(circle,var(--brand-bright),transparent 70%); }

.hk-hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px);
  align-items:center;
}
.hk-hero-copy{ max-width:620px; }
.hk-badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 15px; border-radius:999px;
  background:rgba(12,92,224,.08); border:1px solid rgba(12,92,224,.16);
  color:var(--brand); font-weight:600; font-size:.82rem; letter-spacing:.01em;
}
.hk-badge svg{ width:16px;height:16px; }
.hk-hero h1{
  margin:20px 0 0; font-family:var(--display); font-weight:700;
  font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.06; letter-spacing:-.02em;
}
.hk-hero h1 em{ font-style:normal; color:var(--brand); position:relative; white-space:nowrap; }
.hk-hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.32em;
  background:linear-gradient(90deg,var(--cyan),var(--brand-bright)); opacity:.22; border-radius:4px; z-index:-1;
}
.hk-hero .lead{ margin-top:20px; font-size:clamp(1rem,1.4vw,1.12rem); color:var(--muted); max-width:560px; }
.hk-hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hk-hero-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:26px;
  color:var(--muted); font-size:.86rem; font-weight:500;
}
.hk-hero-meta b{ color:var(--ink); }
.hk-hero-meta .sep{ width:5px;height:5px;border-radius:50%;background:var(--line-strong); }

/* hero giriş animasyonu (style.css .hero .stl ile aynı dil, hk scope'unda) */
.hk-hero .stl{ opacity:0; transform:translateY(22px); animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) forwards; }
.hk-hero .stl.d1{ animation-delay:.05s; } .hk-hero .stl.d2{ animation-delay:.18s; }
.hk-hero .stl.d3{ animation-delay:.31s; } .hk-hero .stl.d4{ animation-delay:.44s; } .hk-hero .stl.d5{ animation-delay:.57s; }
.no-js .hk-hero .stl{ opacity:1 !important; transform:none !important; animation:none !important; }

/* ---- Hero görseli: gerçek hekim fotoğraflarından kolaj ---- */
.hk-hero-visual{ position:relative; display:grid; place-items:center; min-height:clamp(300px,36vw,440px); }
.hk-kolaj{
  position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.8vw,20px); width:min(400px,86%);
}
.hk-kolaj-av{
  position:relative; aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:4px solid #fff; background:linear-gradient(160deg,#eaf1fd,#dbe7fb);
  box-shadow:0 16px 36px rgba(12,92,224,.16);
  animation:hkfloat 7s ease-in-out infinite;
}
.hk-kolaj-av img{ width:100%; height:100%; object-fit:cover; display:block; }
/* offset'ler margin ile (transform animasyon tarafından kullanılıyor) */
.hk-kolaj-av:nth-child(1){ animation-delay:.1s; }
.hk-kolaj-av:nth-child(2){ margin-top:16px; animation-delay:.9s; }
.hk-kolaj-av:nth-child(3){ animation-delay:1.7s; }
.hk-kolaj-av:nth-child(4){ margin-top:-8px; animation-delay:2.4s; }
.hk-kolaj-av:nth-child(5){ margin-top:10px; animation-delay:.5s; }
.hk-kolaj-av:nth-child(6){ animation-delay:1.3s; }
.hk-kolaj-av:nth-child(7){ margin-top:-6px; animation-delay:2s; }
.hk-kolaj-av:nth-child(8){ margin-top:12px; animation-delay:2.8s; }
.hk-kolaj-chip{
  display:inline-flex; align-items:center; gap:10px; align-self:center; justify-self:center;
  padding:10px 16px 10px 11px; border-radius:16px;
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow-md); white-space:nowrap;
}
.hk-kolaj-chip .ci{ display:grid; place-items:center; width:34px;height:34px; border-radius:11px; background:linear-gradient(140deg,var(--brand-bright),var(--brand)); color:#fff; flex:0 0 auto; }
.hk-kolaj-chip .ci svg{ width:19px;height:19px; }
.hk-kolaj-chip .ct{ display:flex; flex-direction:column; line-height:1.2; }
.hk-kolaj-chip b{ font-family:var(--display); font-weight:700; font-size:1rem; color:var(--navy-deep); }
.hk-kolaj-chip small{ color:var(--muted); font-size:.74rem; font-weight:500; }

/* =================== FİLTRE + LİSTE =================== */
.hk-filtre{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.hk-chip{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:10px 16px; border-radius:999px; background:var(--white); border:1px solid var(--line);
  color:var(--ink); font-weight:600; font-size:.88rem; font-family:var(--sans); box-shadow:var(--shadow-sm);
  transition:border-color .2s, color .2s, background .2s, transform .2s;
}
.hk-chip:hover{ transform:translateY(-2px); border-color:var(--brand); color:var(--brand); }
.hk-chip small{
  font-size:.72rem; font-weight:700; color:var(--brand);
  background:rgba(12,92,224,.08); border-radius:999px; padding:.18em .6em; min-width:1.9em; text-align:center;
}
.hk-chip.active{ background:linear-gradient(135deg,var(--brand),var(--brand-bright)); border-color:transparent; color:#fff; box-shadow:var(--glow); }
.hk-chip.active small{ background:rgba(255,255,255,.2); color:#fff; }
.hk-sonuc{ margin:14px 0 0; color:var(--muted); font-size:.86rem; font-weight:500; }

.hk-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:18px; }
.hk-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:transform .3s, box-shadow .3s;
}
.hk-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.hk-foto{ position:relative; aspect-ratio:1/1; background:linear-gradient(160deg,#eaf1fd,#f6f9ff); overflow:hidden; }
.hk-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
/* fotoğrafsız hekim: açık zemin + daire baş harf avatarı (ana sayfa .doc .av dili) */
.hk-av{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(160deg,#f2f7fe,#e2ecfc);
}
.hk-av > span{
  width:clamp(80px,8vw,100px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-weight:600; font-size:clamp(1.7rem,2.4vw,2.1rem); letter-spacing:.02em; color:#fff;
  position:relative;
}
.hk-av > span::after{ content:""; position:absolute; inset:-7px; border-radius:50%; border:1.5px dashed rgba(12,92,224,.3); }
.hk-card:nth-child(4n+1) .hk-av > span{ background:linear-gradient(135deg,#0c5ce0,#46c6ff); }
.hk-card:nth-child(4n+2) .hk-av > span{ background:linear-gradient(135deg,#1746b8,#2b86ff); }
.hk-card:nth-child(4n+3) .hk-av > span{ background:linear-gradient(135deg,#0a2050,#0c5ce0); }
.hk-card:nth-child(4n)   .hk-av > span{ background:linear-gradient(135deg,#1f6fef,#46c6ff); }
.hk-bilgi{ padding:16px 14px 18px; text-align:center; }
.hk-unvan{ display:block; color:var(--brand); font-size:.76rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.hk-bilgi h3{ font-family:var(--display); font-weight:600; font-size:1.06rem; color:var(--navy-deep); margin:3px 0 2px; }
.hk-brans{ display:block; color:var(--muted); font-size:.84rem; font-weight:500; }
.hk-subeler{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:12px; }
.hk-subeler span{ font-size:.72rem; color:var(--muted); background:var(--paper); border:1px solid var(--line); padding:.28em .7em; border-radius:999px; }

/* filtre geçişinde yumuşak giriş */
.hk-grid.flash .hk-card:not([hidden]){ animation:hkin .35s ease both; }
.hk-bos{ margin:36px 0 12px; text-align:center; color:var(--muted); font-weight:500; }

/* =================== KAPANIŞ CTA =================== */
.hk-final{
  position:relative; overflow:hidden; color:#fff;
  margin-bottom:calc(-1 * clamp(40px,6vw,90px));
  background:
    radial-gradient(circle 520px at 50% 100%, rgba(43,134,255,.16), transparent 65%),
    linear-gradient(180deg, transparent 48%, var(--navy-deep) 100%),
    radial-gradient(120% 140% at 100% 0%, var(--brand) 0%, var(--navy) 45%, var(--navy-deep) 100%);
  padding:clamp(56px,8vw,92px) 0;
}
.hk-final::after{ content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:42px 42px; -webkit-mask-image:radial-gradient(80% 120% at 80% 0%,#000,transparent 70%); mask-image:radial-gradient(80% 120% at 80% 0%,#000,transparent 70%); }
.hk-final .wrap{ position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; }
.hk-final h2{ font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1.12; max-width:560px; color:#fff; }
.hk-final p{ color:rgba(255,255,255,.78); margin-top:12px; max-width:520px; }
.hk-final-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.hk-final .btn-light{ background:#fff; color:var(--brand); }
.hk-final .btn-light:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.25); }
.hk-final .btn-outline{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4); }
.hk-final .btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

@keyframes hkfloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes hkin{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

@media (max-width:1020px){
  .hk-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:960px){
  .hk-hero-inner{ grid-template-columns:1fr; }
  .hk-hero-copy{ max-width:none; }
  .hk-hero-visual{ order:-1; min-height:0; margin-top:6px; }
  .hk-kolaj{ width:min(360px,92%); }
}
@media (max-width:760px){
  .hk-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .hk-bilgi{ padding:13px 10px 15px; }
  .hk-bilgi h3{ font-size:.98rem; }
  .hk-final .wrap{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  .hk-kolaj-av{ animation:none !important; }
  .hk-hero .stl{ opacity:1 !important; transform:none !important; animation:none !important; }
  .hk-grid.flash .hk-card:not([hidden]){ animation:none !important; }
}