/* ============================================================================
   FONT — Montserrat, kendi sunucumuzdan. Tek dosya, degisken wght ekseni.
   Yedek font metrikleri olculdu: Montserrat, Arial'dan %9.8 daha genis.
   Bu dort deger birlikte degistirilmeden dokunulmaz, yoksa font gec gelince
   paragraflar satir degistirip sayfayi kaydirir.
   ========================================================================== */
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/montserrat.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Montserrat Fallback";
  src:local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust:109.8%;
  ascent-override:88.2%;
  descent-override:22.9%;
  line-gap-override:0%;
}

/* ============================================================================
   DESIGN TOKENS
   Dantora brand ramp translated to the Duzey Goz blue/teal identity.
   The hue relationships of the original green ramp are preserved 1:1.
   ========================================================================== */
:root{
  --white:#ffffff; --black:#000000;

  /* Duzey Goz marka renkleri */
  --brand-500:#012662;   --brand-900:#011b45;   /* lacivert: ana eksen */
  --ice-200:#6ed2f2;     --ice-400:#3fbde6;     /* camgobegi: dekor ve ikincil */
  --mint-50:#f4f8fc;     --mint-100:#e8eef7;    /* lacivert kirli notralar */
  --orange:#ff5401;      --orange-700:#d94400;  /* vurgu: az ve yerinde */
  --danger:#c62828;                             /* islevsel: form hatasi */

  --background:var(--white);
  --foreground:#12233f;
  /* The page background is WHITE; the mint is a PANEL colour painted by each
     full-bleed section, which is why the Why Dantora band reads white. */
  --surface-section:var(--mint-50);
  --surface-section-deep:var(--mint-100);

  --accent:var(--brand-500);
  --action-primary:var(--brand-500);
  --action-primary-border:var(--brand-900);
  --action-primary-foreground:var(--white);
  --action-secondary:var(--ice-200);
  --action-secondary-border:var(--ice-400);
  --action-secondary-foreground:var(--brand-500);

  --surface-glass:rgba(255,255,255,0.8);
  --surface-glass-bar:rgba(255,255,255,0.72);  /* kaydirinca beliren tam genislik serit */
  --surface-glass-subtle:rgba(255,255,255,0.5);
  --surface-glass-strong:rgba(255,255,255,0.9);
  --border-subtle:rgba(1,38,98,0.14);
  /* Ikincil metin tonlari. Alfa degerleri OLCULEREK secildi (28.09.2026): eskiden
     muted 0.42 (beyazda 2,55:1) ve subtle 0.55 (3,67:1) idi, ikisi de WCAG AA'nin
     4,5:1 esigini gecmiyordu — CLAUDE.md 5 kontrasti "tartismaya kapali" diyor ve
     11 + 3 gercek metin ogesi kaliyordu (hastalik dizini sira numaralari, yorum
     karti tarihleri, sayaclar, onay satirlari, adim metinleri...).
     Yeni degerler beyazda 4,86:1 ve 5,90:1; sitenin acik zeminlerinde (#f4f8fc,
     #e8eef7) de 4,5'in ustunde kaliyorlar. Hedef ton CLAUDE.md 5'teki ikincil
     metin rengi --text-muted (#5a6b85, 5,42:1). Aralarindaki fark korundu:
     muted hala subtle'dan acik. */
  --foreground-muted:rgba(18,35,63,0.64);
  --foreground-subtle:rgba(18,35,63,0.70);

  /* Google puan rozetinin yuksekligi. Hero'daki hastalik cipleriyle ayni boyda
     olsun diye olculmustu; cipler kaldirildi, deger rozetin olcusu olarak kaldi. */
  --pill-h:1.94rem;
  --corner-mark:4px; --corner-panel:8px; --corner-card:24px;
  --corner-section:48px; --corner-chip:37px; --corner-action:46px;
  --glass-blur:10px;
  --duration-fast:150ms; --duration-normal:250ms;
  --ease-entrance:cubic-bezier(0.2,0,0,1);
  --leading-display:1.1;
  --leading-body:1.2;
}

/* ---- root font-size ladder --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
@media (min-width:1024px){html{font-size:1.111111vw}} /* 16 * 100 / 1440 */
/* ===== YAZI OLCEGI (baslangic) ===== */
/* Uretir: python _tools/yazi-olcek.py (elle duzenlenmez). Font boyutlari bu token'larla
   yazilir: font-size:var(--f13). Masaustunde ozgun degerler; telefon ve tablette
   (<=1023 px) buyutulmus degerler. Hedef kitle goz hastalari (13.09.2026, "Belirgin" + bir kademe).
   Bosluk ve genislikler rem'de kaldigi icin yerlesim degismez.
      10 px -> 14 px
      11 px -> 14 px
      12 px -> 16 px
      13 px -> 16 px
    13.6 px -> 16 px
      14 px -> 18 px
      15 px -> 18 px
      16 px -> 19 px
      17 px -> 20 px
      18 px -> 22 px
      20 px -> 24 px
      22 px -> 26 px
      24 px -> 27 px
      26 px -> 29 px
      28 px -> 31 px
      30 px -> 34 px
      32 px -> 36 px
      36 px -> 40 px
      40 px -> 45 px
      44 px -> 49 px
      48 px -> 54 px */
:root{--f10:0.625rem;--f11:0.6875rem;--f12:0.75rem;--f13:0.8125rem;--f13-6:0.85rem;--f14:0.875rem;--f15:0.9375rem;--f16:1rem;--f17:1.0625rem;--f18:1.125rem;--f20:1.25rem;--f22:1.375rem;--f24:1.5rem;--f26:1.625rem;--f28:1.75rem;--f30:1.875rem;--f32:2rem;--f36:2.25rem;--f40:2.5rem;--f44:2.75rem;--f48:3rem;}
@media (max-width:1023px){:root{--f10:0.875rem;--f11:0.875rem;--f12:1rem;--f13:1rem;--f13-6:1rem;--f14:1.125rem;--f15:1.125rem;--f16:1.1875rem;--f17:1.25rem;--f18:1.375rem;--f20:1.5rem;--f22:1.625rem;--f24:1.6875rem;--f26:1.8125rem;--f28:1.9375rem;--f30:2.125rem;--f32:2.25rem;--f36:2.5rem;--f40:2.8125rem;--f44:3.0625rem;--f48:3.375rem;}}
/* ===== YAZI OLCEGI (bitis) ===== */

body{
  margin:0;background:var(--background);min-height:100vh;overflow-x:hidden;
  color:var(--foreground);
  font-family:"Montserrat","Montserrat Fallback",Arial,sans-serif;
  font-weight:400;line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}

/* ---- cap-height trimming ----------------------------------------------- */
h1,h2,h3,h4,h5,h6,p,li,dd,dt,label,figcaption,button,a{
  text-box:trim-both cap alphabetic;
}
.text-trim{text-box:trim-both cap alphabetic}

h1,h2,h3,h4,p,dl,dd,dt,figure,ul,form{margin:0;padding:0}
ul{list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none}
svg{display:block}

/* ---- shared type -------------------------------------------------------- */
.eyebrow{font-size:var(--f14);font-weight:500;text-transform:uppercase;color:var(--accent);line-height:var(--leading-body)}
.display{font-size:var(--f36);font-weight:400;line-height:var(--leading-display)}
.lead{font-size:var(--f13-6);font-weight:400;line-height:var(--leading-body)}
@media (min-width:768px){.display{font-size:var(--f48)}}
@media (min-width:1024px){.display{font-size:var(--f36)}}

.reveal-hold{opacity:0}

/* ---- anlasmali kurumlar seridi -----------------------------------------
   Referanstaki ust uste binen halka duzeni, ama daire yerine hap cip:
   "Allianz" ve "Acibadem Sigorta" yazi logolari daireye sigmiyor. */
.kurumlar{
  display:flex;align-items:center;gap:0.875rem;flex-wrap:wrap;
  align-self:flex-start;
}
/* Dort daire yan yana, referanstaki gibi hafif bindirmeli. Logo dairenin
   ortasinda ve kenarda bosluk birakiyor; bindirme o boslugu yiyor, logoyu
   degil. Daire yeterince buyuk olmazsa yazi logolari okunmaz oluyor. */
.kurumlar__logolar{display:flex;align-items:center}
.kurumlar__cip{
  display:grid;place-items:center;flex:none;
  width:3.5rem;height:3.5rem;   /* logolar ve "+21" ayni boyda (kullanici istegi) */
  border-radius:999px;background:var(--white);
  border:1px solid var(--border-subtle);
  box-shadow:0 2px 6px rgba(1,38,98,0.08);
  transition:transform var(--duration-normal) var(--ease-entrance);
}
.kurumlar__cip + .kurumlar__cip{margin-left:-0.625rem}
/* soldaki daire ustte kalsin */
.kurumlar__cip:nth-child(1){z-index:4}
.kurumlar__cip:nth-child(2){z-index:3}
.kurumlar__cip:nth-child(3){z-index:2}
.kurumlar__cip:nth-child(4){z-index:1}
.kurumlar__cip img{max-width:78%;max-height:54%;width:auto;height:auto;display:block}
.kurumlar__daha{
  background:var(--accent);border-color:var(--accent);color:var(--white);
  font-size:var(--f15);font-weight:600;
}
.kurumlar__metin{font-size:var(--f13);font-weight:500;color:var(--foreground-subtle)}
.kurumlar:hover .kurumlar__cip{transform:translate3d(0,-2px,0)}
.kurumlar:hover .kurumlar__metin{color:var(--accent)}
.w-break{flex:0 0 100%;height:0}

/* Turuncu vurgu, kural geregi az ve yerinde: odak halkasi, hero'daki kil cizgi,
   About istatistiklerinin sol kenari. Ekranin %5'ini gecmez. */
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:2px}

/* ---- the pill ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:3rem;padding-inline:2rem;border-radius:var(--corner-action);
  border:1px solid transparent;font-size:var(--f16);font-weight:400;line-height:var(--leading-body);
  white-space:nowrap;cursor:pointer;
  transition:background-color var(--duration-normal) var(--ease-entrance),
             border-color var(--duration-normal) var(--ease-entrance),
             color var(--duration-normal) var(--ease-entrance);
}
.btn--primary{background:var(--action-primary);border-color:var(--action-primary-border);color:var(--action-primary-foreground)}
.btn--primary:hover{background:var(--action-primary-border)}
.btn--secondary{background:var(--action-secondary);border-color:var(--action-secondary-border);color:var(--action-secondary-foreground)}
.btn--secondary:hover{background:var(--action-secondary-border)}
.btn--w180{width:11.25rem;padding-inline:1.25rem}
.btn--w240{width:15rem;padding-inline:1.25rem}
.btn--arrow{height:3.375rem;gap:0.625rem;padding:0 0.125rem 0 2rem;justify-content:space-between}
.btn__disc{
  width:3rem;height:3rem;flex:none;border-radius:999px;
  background:var(--action-secondary);color:var(--brand-500);
  display:grid;place-items:center;
}
.btn__disc svg{width:16px;height:16px}

/* ---- header ------------------------------------------------------------- */
/* ---- CTA afisi ------------------------------------------------------------
   Tam genislikte, sagli sollu yasli: bolum dolgusunun disinda duruyor.
   Genis ve dar surumler farkli oranda oldugu icin aspect-ratio kirilma
   noktasina gore veriliyor; tek bir deger yazilsa kaynak degistiginde
   yerlesim kayardi.                                                       */
.cta-afis{position:relative;display:block;background:var(--mint-50)}
.cta-afis__gorsel{display:block}
.cta-afis__gorsel:focus-visible{outline:2px solid var(--orange);outline-offset:-4px}
/* Uc surum, her birinin kendi orani (CLS olmasin): telefonda 2:1 (dar surum 390 px'te 80 px'e
   iniyordu, okunmuyordu), 768-1279 dar 1000x210, 1280 ustu genis 9.5:1 (daha dar ekranda
   100px altina inip okunmaz hale geliyordu). */
.cta-afis img{display:block;width:100%;height:auto;aspect-ratio:2/1}
@media (min-width:768px){.cta-afis img{aspect-ratio:1000/210}}
@media (min-width:1280px){.cta-afis img{aspect-ratio:2000/210}}
/* Randevu Al: 768 px ustunde afisin sag ust kosesinde (gorselde bos goz alani);
   telefonda afis 80 px'e iniyor, 44 px'lik dugme ustune binince yarisini
   kapatirdi: orada afisin altinda, saga yasli. */
.cta-afis__randevu{
  display:flex;width:max-content;justify-content:space-between;gap:0.75rem;
  height:2.75rem;margin:0.75rem 1.25rem 0.75rem auto;padding:0 0.1875rem 0 1.25rem;font-size:var(--f14);
}
.cta-afis__randevu .btn__disc{width:2.25rem;height:2.25rem}
@media (min-width:768px){
  .cta-afis__randevu{position:absolute;top:0.75rem;right:1.25rem;margin:0;
    box-shadow:0 8px 24px rgba(1,38,98,.08)}
}
@media (min-width:1024px){.cta-afis__randevu{top:1rem;right:2.5rem}}

/* ---- mobil alt eylem cubugu ----------------------------------------------
   Cam serit dili: buzlu beyaz zemin, ust kil cizgi. Yalnizca 1024 altinda.
   Footer'a gelince asagi cekiliyor; orada zaten form ve telefon var.     */
.altbar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--surface-glass-bar);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  border-top:1px solid var(--border-subtle);
  box-shadow:0 -8px 24px rgba(1,38,98,.06);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transition:transform 320ms var(--ease-entrance), opacity 300ms var(--ease-entrance);
}
@media (min-width:1024px){.altbar{display:none}}

/* Ucuncu taraf pencereleri alt cubugun USTUNDE dursun, uzerine binmesin (kullanici istegi
   28.09.2026). JivoChat ve CookieYes kendi kaplarini `bottom:0` ile sabitliyor; telefonda
   WhatsApp / Ara / Randevu cubugunun uzerine geliyorlardi.
   Tutamaklar: JivoChat'in sinif adlari surumden surume degisen karisik adlar (`wrap__hVG9k`),
   degismeyen ikisi var: kokteki `jdiv.notranslate` (Google Translate'i engellemek icin
   koyuyorlar) ve telefondaki baslaticinin `__jivoMobileButton` sinifi. CookieYes `cky-`
   onekli sinif kullaniyor: `.cky-consent-container` bant, `.cky-btn-revisit-wrapper`
   kosedeki yeniden ac dugmesi.

   `__jivoMobileButton` 29.09.2026'da eklendi: kural yalniz `.notranslate`'e bakiyordu, ama
   JivoChat **telefonda ayri bir baslatici** koyuyor (85x85, `bottom:0; right:0`) ve o
   `.notranslate` tasimiyor. Canli sitede olculdu: dugme 727-812 px arasinda, yani alt
   cubugun "Randevu" dugmesinin tam uzerinde duruyordu (kullanici bildirdi).

   `!important` gerekli: ikisi de yuksek ozgullukte kendi stilini yaziyor.
   Olcu footer'in alt dolgusuyla ayni (yukaridaki `.site-footer` kurali): 4.5rem + safe-area. */
@media (max-width:1023px){
  jdiv.notranslate,
  jdiv.__jivoMobileButton,
  #jivo-iframe-container,
  .cky-consent-container,
  .cky-btn-revisit-wrapper{
    bottom:calc(4.5rem + env(safe-area-inset-bottom,0px)) !important;
  }
}

/* JivoChat'in IFRAME yolu. Widget iki bicimde cizilebiliyor: satir ici <jdiv>'ler (z-index
   2147483647) ya da #jivo-iframe-container. Ikincisinin z-index'i **auto** ve bottom'u 0:
   oyle cizilirse dugme alt cubugun (z-index 55) ALTINDA kaliyor, yani hic gorunmuyor.
   Chromium satir ici yolu kullaniyor, bu yuzden yerelde hep gorunuyordu; kullanici iPhone
   15 / iOS Safari'de gormedigini bildirdi (29.09.2026). Kap bos oldugunda (0x0) kural
   hicbir sey degistirmiyor, yani satir ici yolda zararsiz. */
#jivo-iframe-container{ z-index:2147483000 !important; }
.altbar.is-gizli{transform:translate3d(0,100%,0);opacity:0;pointer-events:none}
.altbar__oge{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0.25rem;min-height:3.75rem;padding:0.5rem 0.25rem;
  text-decoration:none;color:var(--brand-500);
  font-size:var(--f10);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.altbar__oge:focus-visible{outline:2px solid var(--orange);outline-offset:-3px}
.altbar__ikon{
  width:1.875rem;height:1.875rem;border-radius:999px;
  display:grid;place-items:center;
  background:var(--white);border:1px solid var(--border-subtle);
  color:var(--brand-500);
}
.altbar__ikon svg{width:1rem;height:1rem}
/* Randevu: WhatsApp ve Ara ile ayni acik gorunum (kullanici istegi 12.09.2026). */
/* "Ara": cercevenin etrafinda donen camgobegi parlama (kullanici istegi). Halka, dairenin
   3px disinda duran konik gecis; maske yalniz dis halkayi birakir. Yalniz transform
   animasyonu (CLAUDE.md 3.2), CSS ile; hareket azaltmada durur, sabit hale kalir. */
.altbar__oge--ara .altbar__ikon{position:relative;box-shadow:0 0 10px 1px rgba(110,210,242,.5)}
.altbar__oge--ara .altbar__ikon::before{
  content:"";position:absolute;inset:-3px;border-radius:999px;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(110,210,242,0) 0deg,rgba(110,210,242,0) 180deg,
    rgba(110,210,242,.9) 280deg,#fff 320deg,rgba(110,210,242,.9) 345deg,rgba(110,210,242,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  animation:ara-don 2.2s linear infinite;
}
@keyframes ara-don{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.altbar__oge--ara .altbar__ikon::before{animation:none}}
/* Cubuk sayfa sonunu ortmesin. */
/* Cubugun yeri gövdenin dolgusuyla degil, footer'in kendi dolgusuyla ayrilir: gövdede
   ayrilinca sayfanin en altinda footer'in laciverti biter, acik renkli bir serit kalirdi
   (cubuk cam oldugu icin footer'a gelince gorunuyordu — kullanici 20.09.2026). */
@media (max-width:1023px){
  .site-footer{padding-bottom:calc(2rem + 4.5rem + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.altbar{transition-duration:1ms}}

/* ---- ust serit ------------------------------------------------------------
   Ana menunun ustunde ince, sabit bir bant: adres, telefon, arama, dil.
   Yuksekligi 2.75rem (44px) = kural 8'in dokunma hedefi alt siniri.
   Header ve mobil menu konumlari bu yukseklige gore kaydirildi.          */
/* ---- ust seritteki arama paneli ----------------------------------------
   Kendi dizini var: sayfanin DOM'undan kuruluyor, icerik degisince dizin de
   degisiyor. Panel seridin altina aciliyor, sayfa yerlesimini itmiyor.    */
.tsearch{
  position:absolute;top:100%;left:0;right:0;
  background:var(--white);color:var(--text);
  border-bottom:1px solid var(--border-subtle);
  box-shadow:0 8px 24px rgba(1,38,98,.08);
}
.tsearch[hidden]{display:none}
.tsearch__kutu{
  display:flex;align-items:center;gap:0.75rem;
  padding:0.75rem 1.25rem;max-width:48rem;margin-inline:auto;
}
@media (min-width:768px){.tsearch__kutu{padding-inline:2.5rem}}
.tsearch__ikon{width:1.125rem;height:1.125rem;flex:none;color:var(--accent)}
.tsearch__girdi{
  flex:1;min-width:0;font:inherit;font-size:var(--f16);color:var(--foreground);
  border:0;background:none;outline:none;padding:0.5rem 0;
}
.tsearch__girdi::placeholder{color:var(--foreground-muted)}
/* type="search" kendi temizle carpisini koyuyor; bizim kapat dugmemizle
   yan yana iki carpi cikiyordu. */
.tsearch__girdi::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.tsearch__kapat{
  flex:none;width:2rem;height:2rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--mint-100);color:var(--brand-500);font-size:var(--f18);line-height:1;
  display:grid;place-items:center;
}
.tsearch__kapat:hover{background:var(--accent);color:var(--white)}
.tsearch__kapat:focus-visible,.tsearch__girdi:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.tsearch__liste{
  list-style:none;margin:0 auto;padding:0 0 0.5rem;max-width:48rem;
  max-height:min(60vh,26rem);overflow-y:auto;
}
.tsearch__liste a{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:0.625rem 1.25rem;text-decoration:none;color:var(--brand-500);
  font-size:var(--f15);
}
@media (min-width:768px){.tsearch__liste a{padding-inline:2.5rem}}
.tsearch__liste a:hover,.tsearch__liste li.is-active a{background:var(--mint-50)}
.tsearch__liste a:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.tsearch__kat{font-size:var(--f12);color:var(--foreground-subtle);flex:none}
.tsearch__bos{
  max-width:48rem;margin:0 auto;padding:0.25rem 1.25rem 1rem;
  font-size:var(--f14);color:var(--foreground-subtle);
}
@media (min-width:768px){.tsearch__bos{padding-inline:2.5rem}}

:root{--serit-h:2.75rem}
/* Serit ince: 36px. Ama dokunma hedefi kural 8'e gore 44px olmali, o yuzden
   incelme yalnizca genis VE fare kullanilan ekranlarda. Dokunmatikte ve dar
   ekranda 44px kaliyor. Header ile mobil menu konumu ayni degiskene bagli,
   ayrisamazlar. */
@media (min-width:768px) and (pointer:fine){:root{--serit-h:2.25rem}}
/* Telefon ve tablet: ust serit daha yuksek, numara ve arama ikonu buyuk (kullanici istegi
   13.09.2026; hedef kitle goz hastalari, bkz. CLAUDE.md 6 yazi olcegi). Header ve mobil
   menu konumu ayni degiskene bagli, birlikte kayar. */
@media (max-width:1023px){:root{--serit-h:3.25rem}}
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:51;
  background:var(--brand-900);color:rgba(255,255,255,0.82);
  font-size:var(--f13);line-height:1.2;
  transition:transform 380ms var(--ease-entrance), opacity 300ms var(--ease-entrance);
}
.topbar__ic{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:var(--serit-h);padding-inline:1.25rem;
}
@media (min-width:768px){.topbar__ic{padding-inline:2.5rem}}
.topbar__sag{display:flex;align-items:center;gap:0.25rem}
.topbar__oge{
  display:inline-flex;align-items:center;gap:0.5rem;
  min-height:var(--serit-h);padding-inline:0.5rem;
  color:inherit;text-decoration:none;
  transition:color var(--duration-fast) var(--ease-entrance);
}
.topbar__oge svg{width:0.9375rem;height:0.9375rem;flex:none;color:var(--ice-200)}
/* Slogan tiklanmaz; yalnizca hover'da renk aliyor. */
.topbar__slogan{margin-inline-start:-0.5rem;min-width:0;cursor:default;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color var(--duration-fast) var(--ease-entrance)}
.topbar__slogan:hover{color:var(--ice-200)}
/* Mobilde slogan yok; sag grup saga yaslaniyor. */
.topbar__sag{margin-inline-start:auto}
/* Ikon tek basina 27px kaliyordu; kural 8 dokunma hedefi icin 44px. */
.topbar__ara{min-width:var(--serit-h);justify-content:center;padding-inline:0}
/* Numara asla kirilmamali: dar ekranda iki satira dusup seridi
   yukseltiyor ve adresi gereksiz kirpiyordu. */
.topbar__tel{font-weight:600;color:var(--white);font-variant-numeric:tabular-nums;white-space:nowrap}
.topbar__dil{
  font-weight:600;letter-spacing:.06em;color:var(--white);
  border-inline-start:1px solid rgba(255,255,255,0.18);
  margin-inline-start:0.25rem;padding-inline-start:0.875rem;
}
.topbar a.topbar__oge:hover{color:var(--ice-200)}
.topbar a.topbar__oge:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.topbar.is-gizli{transform:translate3d(0,-100%,0);opacity:0;pointer-events:none}
@media (max-width:760px){
  .topbar__slogan{display:none}
  .topbar__oge{gap:0.375rem;padding-inline:0.375rem}
  .topbar__dil{padding-inline-start:0.625rem}
  /* Slogan gizli oldugu icin sag grup tek basina kaliyordu ve hepsi saga
     yaslaniyordu. Grup tam genislige aciliyor, telefon en sola gidiyor;
     otomatik marj arama ile TR'yi sag kenarda tutuyor. */
  .topbar__sag{margin-inline-start:0;width:100%}
  .topbar__tel{margin-inline-end:auto;margin-inline-start:-0.375rem}
}
@media (max-width:1023px){
  .topbar__oge svg{width:1.25rem;height:1.25rem}
  .topbar__ara svg{width:1.375rem;height:1.375rem}
  .topbar__tel{font-size:var(--f16)}
}
/* 320 px'lik telefonda 19 px numara + arama + TR satira sigmiyor; bir kademe kucuk. */
@media (max-width:359px){.topbar__tel{font-size:var(--f15)}}
@media (prefers-reduced-motion:reduce){.topbar{transition-duration:1ms}}

.site-header{
  position:fixed;top:calc(var(--serit-h) + 1rem);left:0;right:0;z-index:50;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding-inline:1.25rem;pointer-events:none;
  transition:transform 380ms var(--ease-entrance);
}
/* Serit acilirken header birkac piksel yukari oturur; serit daha derli toplu
   dursun diye. Cocuklarin kendi transform'lariyla cakismaz, ust uste biner. */
.site-header.is-stuck{transform:translate3d(0,-0.25rem,0)}
/* Acilista yok. Sayfa kaydirilinca beliren tam genislik buzlu serit.
   Sadece opacity animasyonlaniyor; yerlesim hesabi tetiklenmiyor. */
.site-header::before{
  content:"";position:absolute;top:-1rem;right:0;bottom:-1rem;left:0;
  background:var(--surface-glass-bar);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  border-bottom:1px solid var(--border-subtle);
  box-shadow:0 8px 24px rgba(1,38,98,0.06);
  opacity:0;pointer-events:none;
  /* Yukaridan yumusakca iner. scaleX ile yatay acilma denendi: serit acilirken
     alt kil cizgisi iki kenardan kisa kaliyor ve dikis belli oluyordu. */
  transform:translate3d(0,-10px,0);
  transition:opacity 320ms var(--ease-entrance), transform 380ms var(--ease-entrance);
  transition-delay:90ms;              /* geri donerken: once paneller camini geri alsin */
}
.site-header.is-stuck::before{
  opacity:1;transform:translate3d(0,0,0);
  transition-delay:0ms;               /* acilirken: hemen basla */
}
/* ::before konumlandirilmis oldugu icin, konumlandirilmamis kardeslerinin
   USTUNE boyanir; logoyu ve menuyu de bulaniklastiriyordu. Cocuklari
   konumlandirip seridin onune aliyoruz. */
.site-header > *{position:relative;z-index:1}

/* Serit belirdikten sonra panellerin kendi cami kalkiyor. Ust uste iki cam
   katmani birakmak, panellerin arkasinda camurlu gri bir kutu birakiyordu.
   DIKKAT: "none" degil "blur(0px)". "none" ara deger uretmeyen bir degisim,
   cam bir anda sonuyor ve gecis tik diye kopuyor. blur(0px) yumusak iner. */
.site-header.is-stuck .hpanel{
  background:rgba(255,255,255,0);
  -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);
  transition-delay:90ms;              /* acilirken: once serit gelsin, sonra cam sonsun */
}

/* Sayfanin en ustundeki 1px sensor. Goruse girip cikmasi seridi tetikliyor,
   boylece scroll dinleyicisine ve kare basina rect okumaya gerek kalmiyor. */
@media (prefers-reduced-motion:reduce){
  .site-header,.site-header::before,.hpanel{
    transition-duration:1ms !important;transition-delay:0ms !important;
  }
  .site-header.is-stuck{transform:none}
  .site-header::before{transform:none}
}

#scroll-sentinel{
  position:absolute;top:0;left:0;width:1px;height:2.5rem;
  pointer-events:none;visibility:hidden;
}
@media (min-width:768px){.site-header{padding-inline:2.5rem}}
.hpanel{
  pointer-events:auto;background:var(--surface-glass);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  border-radius:var(--corner-panel);
  transition:background-color 300ms var(--ease-entrance),
             -webkit-backdrop-filter 300ms var(--ease-entrance),
             backdrop-filter 300ms var(--ease-entrance);
  transition-delay:0ms;               /* geri donerken: cam hemen geri gelsin */
}
.brand{display:flex;align-items:center;justify-content:center;height:3.375rem;padding:0 0.875rem}
@media (min-width:1024px){.brand{width:9.3125rem}}
/* Yukseklik sabit, genislik en-boy oraniyla gelir. width/height nitelikleri
   HTML'de duruyor, boylece gorsel gec yuklense de yer kaymaz. */
.brand__logo{height:2.125rem;width:auto;display:block}
/* Telefon ve tablette logo buyuk (kullanici istegi 13.09.2026): 34 -> 44 px. Menu dugmesi
   ayni panel yuksekliginde kalsin diye ikisi de 3.875rem; --kust da buna gore (altsayfa.css). */
@media (max-width:1023px){
  .brand{height:3.875rem;padding-inline:1rem}
  .brand__logo{height:2.75rem}
  /* .hpanel.burger: temel .burger kurali stil sayfasinda asagida, ayni ozgullukte eziyordu. */
  .hpanel.burger{width:3.875rem;height:3.875rem}
  /* Hero header'in altindan baslar: serit 3.25rem + 1rem + panel 3.875rem = 8.125rem;
     medya 1rem ust marjla oturur. 7rem'de video panelin 2 px altina giriyordu. */
  #hero{padding-top:8rem}
}

.site-nav{display:none}
@media (min-width:1024px){
  .site-nav{
    display:flex;align-items:center;justify-content:center;
    height:3.375rem;width:auto;padding-inline:2rem;
  }
  .site-nav ul{display:flex;align-items:center;gap:1.75rem}
  .site-nav a{font-size:var(--f15);font-weight:400;white-space:nowrap;
    transition:color var(--duration-fast) var(--ease-entrance)}
  .site-nav a:hover{color:var(--accent)}
}
.header-cta{display:none}
@media (min-width:1024px){
  /* Panellerle ayni yukseklikte kalir ki header satiri hizali dursun; yazi ve
     ok diski kuculur, boylece butonun gorsel agirligi menuyle dengelenir. */
  .header-cta{
    display:inline-flex;will-change:transform,opacity;
    font-size:var(--f16);gap:0.5rem;padding:0 0.1875rem 0 1.75rem;
  }
  .header-cta .btn__disc{width:2.5rem;height:2.5rem}
  .header-cta .btn__disc svg{width:14px;height:14px}
}

.burger{width:3.375rem;height:3.375rem;display:grid;place-items:center;cursor:pointer}
@media (min-width:1024px){.burger{display:none}}
.burger__bars{position:relative;width:1.25rem;height:0.75rem}
.burger__bars span{
  position:absolute;left:0;width:100%;height:1px;background:var(--foreground);
  transition:transform var(--duration-normal) var(--ease-entrance),opacity var(--duration-normal) var(--ease-entrance);
}
.burger__bars span:nth-child(1){top:0}
.burger__bars span:nth-child(2){top:50%}
.burger__bars span:nth-child(3){top:100%}
.burger[aria-expanded="true"] .burger__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-menu{
  /* Header'in altindan acilir. top:1rem iken panel burger'in ustune biniyor,
     menuyu kapatacak dugme gorunmez oluyordu. 1rem ust bosluk + 3.375rem panel
     + 1rem ara = 5.375rem. */
  /* Tam yukseklik, sag kenara yasli panel. */
  position:fixed;top:0;right:0;bottom:0;z-index:61;
  width:min(23rem,100vw - 3.25rem);
  display:flex;flex-direction:column;
  /* Panel kirpmiyor: kapat dugmesi sol kenarin disinda duruyor.
     Kaydirma ic katmanda. */
  overflow:visible;
  background:var(--surface-section);
  border-radius:var(--corner-card) 0 0 var(--corner-card);
  /* Ust sirada kapat dugmesi ve Randevu Al yan yana (1.25rem = kapat'in top'u). */
  padding:1.25rem 1rem 1.5rem;
  box-shadow:-12px 0 32px rgba(1,38,98,.14);
  transform-origin:100% 50%;opacity:0;pointer-events:none;
  will-change:transform,opacity;
}
/* Arkadaki bulanik perde. Panelin JS'ten gelen transform'u onu kapsayici
   blok yapardi, o yuzden ayri bir kardes oge. */
.mm__perde{
  position:fixed;inset:0;z-index:60;
  background:rgba(1,27,69,.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
}
.mm__perde[hidden]{display:none}
.mm__perde.is-open{pointer-events:auto}
@media (min-width:1024px){.mm__perde{display:none}}
/* Kapat dugmesi panelin sol kenarinda, yarisi disarida. */
.mm__kapat{
  position:absolute;top:1.25rem;left:-1.375rem;
  width:2.75rem;height:2.75rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--orange);color:var(--white);
  display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(1,38,98,.2);
}
.mm__kapat svg{width:1.125rem;height:1.125rem}
.mm__ic{
  flex:1;min-height:0;display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
}
.mm__kapat:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}
.mm__marka{margin-top:auto;padding-top:1.5rem;display:flex;justify-content:center}
.mm__marka img{width:9rem;height:auto;display:block}
.mobile-menu.is-open{pointer-events:auto}
@media (min-width:1024px){.mobile-menu{display:none}}
/* ---- mobil menu: ikonlu izgara -------------------------------------------
   Ucer sutun, her hucrede daire icinde ikon ve altinda etiket. En altta
   genis telefon dugmesi. Acilma/kapanma JS'i degismedi.                   */
.mobile-menu .mm__grid{
  list-style:none;margin:0 0 1.25rem;padding:0;flex:none;
  /* minmax(0,1fr): "1fr" en uzun etikete gore genisliyor, 360 px'te
     "DOKTORLARIMIZ" ucuncu sutunu 108 px'e cikarip menuyu 16 px tasiriyordu. */
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.375rem;
}
/* "> li > a": yalniz kutucuklar. Alt kirilim listelerindeki baglantilar da
   izgaranin icinde; genis secici onlari da 5.5rem'lik kutucuga ceviriyordu. */
.mobile-menu .mm__grid > li > a{
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  padding:0.875rem 0.25rem;border-radius:var(--corner-panel);
  text-align:center;text-decoration:none;color:var(--brand-500);
  min-height:5.5rem;justify-content:center;
  transition:background-color var(--duration-fast) var(--ease-entrance);
}
.mobile-menu .mm__grid > li > a:hover{background:var(--mint-100)}
.mobile-menu .mm__grid > li > a:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.mm__ikon{
  width:2.75rem;height:2.75rem;flex:none;border-radius:999px;
  background:var(--white);border:1px solid var(--border-subtle);
  display:grid;place-items:center;color:var(--brand-500);
}
.mm__ikon svg{width:1.25rem;height:1.25rem}
.mm__ad{
  font-size:var(--f11);font-weight:600;line-height:1.25;
  letter-spacing:.02em;text-transform:uppercase;
}
/* Dar telefonda (410 px ve alti; 390/393 px'lik iPhone'lar dahil) uc sutun en
   uzun etikete ("DOKTORLARIMIZ") yetmiyordu: panel genisler (kapat dugmesinin
   tasan yarisi icin 2rem pay kalir), kutucugun yan dolgusu kalkar, etiket bir
   tik kuculur. */
@media (max-width:410px){
  .mobile-menu{width:calc(100vw - 2rem)}
  .mm__ad{font-size:var(--f10);letter-spacing:0}
}
/* Iki sutun, her genislikte (yazi olcegi, 13.09.2026): etiketler telefon ve tablette 13 px'e
   buyuyunce "DOKTORLARIMIZ" 115 px tutuyor. Panel 390 px'e kadar ekran kadar, ustunde sabit
   368 px; uc sutunda kutucuk 95-108 px kaliyor, etiket her genislikte tasiyordu (olculdu
   320-1000 px). Iki sutunda kutucuk ~160 px, dokunma hedefi de buyur; menu dikeyde ekrana
   sigar. Menu 1024 px ustunde zaten gizli. Tek kalan son kutucuk (Iletisim; alt listesi yok,
   JS'in ekledigi li.mm__alt'lar hep kendi kutucugunun arkasina girdigi icin daima son oge)
   tam satira yayilir. */
.mobile-menu .mm__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.mobile-menu .mm__grid > li > a{padding-inline:0.5rem}
.mobile-menu .mm__grid > li:last-child:nth-child(odd of :not(.mm__alt)){grid-column:1 / -1}
/* Telefon dugmesi: lacivert zemin, turuncu ikon dairesi. */
.mm__tel{
  display:flex;align-items:center;justify-content:center;gap:0.75rem;
  padding:0.875rem 1rem;border-radius:var(--corner-panel);
  background:var(--accent);color:var(--white);text-decoration:none;
  min-height:3.5rem;
}
.mm__tel:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.mm__tel-ikon{
  width:2.25rem;height:2.25rem;flex:none;border-radius:999px;
  background:var(--orange);color:var(--white);display:grid;place-items:center;
}
.mm__tel-ikon svg{width:1.125rem;height:1.125rem}
.mm__tel-no{font-size:var(--f18);font-weight:400;font-variant-numeric:tabular-nums}
.mm__tel-no b{font-weight:700}

/* ---- mobil menu: Randevu Al ve alt kirilimlar ---------------------------
   Randevu Al kapat dugmesiyle ayni satirda; soldaki 1rem pay, kapat
   dugmesinin panele tasan yarisi icin. Alt kirilimli kutucuga dokununca
   altinda tam genislik liste acilir (main.js mobilAltMenu). "dense"
   yerlesim listeyi kutucugun satirinin hemen altina koyar, izgaranin geri
   kalani yerinde kalir. Acilma yalniz opacity + transform (CLAUDE.md 3.2). */
.mm__randevu{
  flex:none;align-self:stretch;justify-content:space-between;
  height:2.75rem;margin:0 0 1rem 1rem;padding:0 0.1875rem 0 1.25rem;font-size:var(--f14);
}
.mm__randevu .btn__disc{width:2.25rem;height:2.25rem}
.mobile-menu .mm__grid{grid-auto-flow:row dense}
/* Alt kirilimli kutucuk: ikon dairesinin sag altinda kucuk ok rozeti (etiketin
   yaninda uzun adlarda tek basina alt satira dusuyordu); acikken ters doner. */
.mobile-menu .mm__grid a.is-acilir .mm__ikon{position:relative}
.mobile-menu .mm__grid a.is-acilir .mm__ikon::after{
  content:"";position:absolute;right:-0.3125rem;bottom:-0.1875rem;
  width:1.125rem;height:1.125rem;border-radius:999px;border:2px solid var(--surface-section);
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 4.75 6 7.25l2.5-2.5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
  transition:transform var(--duration-fast) var(--ease-entrance);
}
.mobile-menu .mm__grid a[aria-expanded="true"]{background:var(--mint-100)}
.mobile-menu .mm__grid a[aria-expanded="true"] .mm__ikon::after{transform:rotate(180deg)}
.mm__alt{
  grid-column:1 / -1;
  background:var(--white);border:1px solid var(--border-subtle);
  border-radius:var(--corner-panel);padding:0.5rem 0.625rem 0.625rem;
  animation:mm-alt-ac var(--duration-normal) var(--ease-entrance);
}
.mm__alt[hidden]{display:none}
@keyframes mm-alt-ac{from{opacity:0;transform:translate3d(0,-0.375rem,0)}}
.mm__alt-ust{
  display:flex;align-items:center;justify-content:space-between;gap:0.5rem;
  padding:0 0.375rem;margin-bottom:0.25rem;border-bottom:1px solid var(--border-subtle);
}
.mm__alt-bas{font-size:var(--f11);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.mm__alt-tumu{
  display:inline-flex;align-items:center;gap:0.25rem;min-height:2.75rem;
  font-size:var(--f12);font-weight:600;color:var(--accent);
  text-decoration:underline;text-decoration-color:var(--border-subtle);text-underline-offset:3px;
}
.mm__alt-liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 0.375rem;
}
.mm__alt-liste--tek{grid-template-columns:minmax(0,1fr)}
.mm__alt-liste a{
  display:flex;align-items:center;min-height:2.75rem;padding:0.25rem 0.375rem;
  border-radius:var(--corner-panel);
  font-size:var(--f13);line-height:1.3;color:var(--brand-500);text-decoration:none;
}
.mm__alt-liste a:hover{background:var(--mint-100)}
.mm__alt a:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){
  .mm__alt{animation:none}
  .mobile-menu .mm__grid a.is-acilir .mm__ikon::after{transition:none}
}

/* ============================================================================
   SECTION SHELLS  (mobile-first; the 1440 artboard is reconstructed at >=1024)
   ========================================================================== */
.section{position:relative;padding:7rem 1.25rem 3rem}
@media (min-width:768px){.section{padding-inline:2.5rem}}

/* ---- hero --------------------------------------------------------------- */
#hero{
  background:var(--surface-section);
  border-radius:0 0 var(--corner-section) var(--corner-section);
  overflow:hidden;
  display:flex;flex-direction:column;gap:2rem;
  min-height:100vh;min-height:100lvh;
}
.hero__copy{display:flex;flex-direction:column;gap:1.5rem;z-index:10}
.hero__copy h1{font-size:var(--f28);font-weight:400;line-height:var(--leading-display)}
@media (min-width:768px){.hero__copy h1{font-size:var(--f32)}}
/* Google puan rozeti — cip diliyle birebir ayni hap: ayni yukseklik, ayni punto,
   ayni kose, ayni kenarlik, ayni buzlu cam. Tek satir; iki satirli hali cip
   boyuna sigmiyordu. Dikey dolgu yerine sabit yukseklik, cunku ici metin degil
   logo ve yildiz tasiyor. */
/* Iki satir (yildiz + sayac) sabit hap boyunda sikisiyordu; yukseklik en az olcu olarak
   kaliyor, dikey dolgu ekleniyor. Telefonda yazi buyuk oldugu icin dolgu da fazla
   (kullanici istegi 20.09.2026: "ustten ve alttan cok yakin, mobilde daha belirgin"). */
.rating{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:0.625rem;
  min-height:var(--pill-h);padding:0.4375rem 1rem;
  border-radius:var(--corner-chip);
  border:1px solid var(--border-subtle);
  background:var(--surface-glass-subtle);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
}
.rating__g{width:0.875rem;height:0.875rem;flex:none}
.rating__g svg{width:100%;height:100%}
.rating__sep{width:1px;height:1.25rem;background:var(--border-subtle);flex:none}
.rating__body{display:flex;flex-direction:column;gap:0.125rem}
.rating__top{display:flex;align-items:center;gap:0.4375rem}
.rating__stars{width:3.78rem;height:0.7rem;flex:none}   /* 108:20 orani korunur */
.rating__score{font-size:var(--f13);font-weight:700;color:var(--brand-500);line-height:1;white-space:nowrap}
.rating__count{font-size:var(--f11);color:var(--foreground-subtle);line-height:1;white-space:nowrap}
@media (max-width:1023px){.rating{padding:0.625rem 1.125rem;gap:0.75rem}
  .rating__body{gap:0.3125rem}}
/* Iki satirli ama yine de cip yuksekliginde: dikey dolgu yok, icerik ortalanir.
   Sayac ve puan hicbir ekranda sarmiyor, o yuzden ayri bir dar ekran kurali
   gerekmiyor. */
/* ---- hero arka plan videosu ----------------------------------------------
   Iframe 16:9; kutu ise her ekranda baska oranda. Kapsayici sorgu birimleriyle
   (cqw/cqh) videoyu kutuyu tam ortulecek sekilde buyutuyoruz: object-fit:cover
   davranisinin iframe karsiligi.                                            */
.hero__media{position:relative;height:40lvh;width:100%;overflow:hidden}
.hero__video{position:absolute;inset:0;container-type:size;
  /* Oynatici acilirken kapak karesinin uzerine yumusak gecer; mobilde bu bekleme
     oynaticinin kontrol katmani sonene kadar surer (main.js). Yalniz opacity. */
  opacity:0;transition:opacity 600ms var(--ease-entrance)}
.hero__video.is-acik{opacity:1}
/* Video yuklenene kadar (ve mobilde kontroller sonene kadar) gorunen kare. */
/* Kapak kirpilirken sag kenar yerinde kalir: fotograf tuvalin sagina sifir oturuyor
   (kullanici istegi 20.09.2026), kirpma soldaki bulanik dolgudan yenir. */
.hero__kapak{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:right center}
@media (prefers-reduced-motion:reduce){.hero__video{transition:none}}
.hero__video iframe{
  position:absolute;top:50%;left:50%;
  border:0;pointer-events:none;
  width:100%;height:100%;                                  /* yedek */
  width:max(100cqw, calc(100cqh * 16 / 9));
  height:max(100cqh, calc(100cqw * 9 / 16));
  /* 1.3 kat buyutme: oynaticinin kendi arayuzu (ust baslik seridi, alt kontrol
     cubugu, kose rozetleri) cerceve disina tasinir. controls=0 hepsini
     kaldirmiyor. */
  transform:translate(-50%,-50%) scale(1.3);
}
/* Acik renk pece: soldan saga zeminle kaynasir, ust ve altta koyulasir ki
   header ve randevu cubugu temiz bir yuzeyin uzerinde dursun. */
.hero__veil{
  position:absolute;inset:0;pointer-events:none;
  /* Govdeyi kaplayan yikama geri geldi (kullanici istegi 12.09.2026: videonun
     ilk konuldugu gunku perde): video zemin dokusu gibi geride durur, uzerindeki
     metin ve form temiz bir yuzeye oturur. Kenar gecisleri de duruyor; kenarlar
     perdesiz birakilirsa blok keskin bir dikdortgen sinir olarak goruluyor.
     Alt uc 2px tasiriliyor: blok yuksekligi kesirli oldugunda perdesiz
     kalan tek piksel sirasi cizgi gibi cikiyordu.                       */
  inset:0 0 -2px 0;
  background:
    /* 1) ust ve alt kenar: header ve randevu cubugunun oturdugu uclar */
    linear-gradient(180deg,
      var(--surface-section) 0%,
      rgba(244,248,252,0) 15%,
      rgba(244,248,252,0) 84%,
      var(--surface-section) 99%),
    /* 2) sol kenar zeminle kaynasir, sagda govdeyi kaplayan yikama surer */
    linear-gradient(90deg,
      var(--surface-section) 0%,
      var(--surface-section) 9%,
      rgba(244,248,252,.76) 34%,
      rgba(244,248,252,.64) 100%);
}
.hero__rule{height:1px;background:var(--border-subtle);width:100%}
/* ---- mobilde hero: video en uste --------------------------------------
   DOM sirasi kopya > cizgi > form > medya. Dar ekranda medya order ile
   basa aliniyor; masaustunde medya zaten mutlak konumlu, etkilenmiyor.
   Gri kil cizgi mobilde kaldiriliyor (istek).                           */
@media (max-width:1023px){
  /* Blok bolum dolgusunun icinde kaliyordu: kenarlari ekrana degmedigi
     icin etrafinda dikdortgen bir sinir goruluyordu. Dolguyu negatif
     marjla iptal edip tam genislige ve en uste dayaniyor; #hero'nun
     overflow'u tasan kismi kirpiyor. */
  .hero__media{
    order:-1;
    /* Ust marj yok: bolumun 7rem'lik ust dolgusu duruyor, video header'in
       bittigi yerden basliyor. Yanlar tam genislik. */
    margin:1rem -1.25rem 0;width:auto;
    height:clamp(14rem,38lvh,22rem);
    background:var(--surface-section);
  }
  .hero__rule{display:none}
  /* Perde mobilde de var (kullanici istegi 12.09.2026): masaustundeki sol kenar
     gecisi burada yok (blok tam genislikte), yalniz ust ve alt uclar zemine erir;
     ustune ince bir yikama geliyor ki video header'in altinda sert durmasin. */
  .hero__veil{
    display:block;
    background:
      linear-gradient(180deg,
        var(--surface-section) 0%,
        rgba(244,248,252,0) 18%,
        rgba(244,248,252,0) 82%,
        var(--surface-section) 100%),
      linear-gradient(0deg, rgba(244,248,252,.74), rgba(244,248,252,.74));
  }
  /* Oynaticinin kendi arayuzu (ust baslik seridi, alt "More videos" cubugu ve
     YouTube rozeti) telefonda 1.3 katta cerceve icinde kaliyordu; dar kutuda
     daha cok buyutup disari tasiyoruz. */
  .hero__video iframe{transform:translate(-50%,-50%) scale(1.6)}
}
/* Tablette bolum dolgusu 2.5rem, negatif marj da ona esitleniyor. */
@media (min-width:768px) and (max-width:1023px){
  .hero__media{margin-inline:-2.5rem}
}

/* ---- Hizli Randevu cubugu ------------------------------------------------
   Arama cubugu mantigi: alanlarin kendi kutusu yok, aralarinda kil cizgi var,
   hepsi tek bir buzlu hapin icinde durur. */
.quick{display:flex;flex-direction:column;gap:0.875rem}
.quick__form{display:flex;flex-direction:column;gap:1rem}
/* Gonderimden sonra JS form.hidden = true yapiyor, ama sinif secicisi
   tarayicinin [hidden]{display:none} kuralindan guclu oldugu icin form
   ekranda kaliyordu; tesekkur mesaji formun altina ekleniyordu. */
.quick__form[hidden]{display:none}
.quick__title{
  display:flex;align-items:center;gap:0.625rem;
  font-size:var(--f13);font-weight:600;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--accent);
}
.quick__title::before{content:"";width:3.125rem;height:2px;background:var(--orange);flex:none}
.quick__bar{
  display:flex;align-items:stretch;gap:1rem;
  padding:0.875rem;
  border-radius:var(--corner-card);
  border:1px solid var(--border-subtle);
  background:var(--surface-glass-strong);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  box-shadow:0 8px 24px rgba(1,38,98,0.06);
}
.quick__field{
  display:flex;flex-direction:column;justify-content:center;gap:0.25rem;
  flex:1 1 0;min-width:0;position:relative;
  padding:0.375rem 0.75rem;border-radius:var(--corner-panel);
  cursor:text;
  transition:background-color var(--duration-fast) var(--ease-entrance);
}
.quick__field:hover{background:rgba(1,38,98,0.035)}
.quick__field:focus-within{background:rgba(1,38,98,0.05)}
.quick__label{
  font-size:var(--f11);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.quick__field input,.quick__field select{
  font:inherit;font-size:var(--f14);font-weight:400;color:var(--foreground);
  border:none;background:transparent;padding:0;width:100%;min-width:0;outline:none;
}
.quick__field input::placeholder{color:var(--foreground-muted)}
.quick__field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:1rem}
.quick__field--select{position:relative}
.quick__field--select::after{
  content:"";position:absolute;right:0.75rem;bottom:0.9375rem;
  width:0.4375rem;height:0.4375rem;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg);pointer-events:none;
}
.quick__sep{width:1px;background:var(--border-subtle);flex:none;align-self:stretch;margin-block:0.25rem}
/* Uzun hekim adi ("Op. Dr. Atilla KİLİTÇİOĞLU") dar alana sigmiyordu. */
.quick__field--doktor{flex-grow:1.4}
.quick__field--rahatsizlik{flex-grow:1.15}
.quick__field--mail{flex-grow:1.05}

.quick__req{color:var(--orange);margin-left:0.125rem}
.quick__telrow{display:flex;align-items:baseline;gap:0.25rem;min-width:0}
.quick__prefix{
  font-size:var(--f14);font-weight:600;color:var(--foreground);flex:none;
  font-variant-numeric:tabular-nums;
}
.quick__telrow input{font-variant-numeric:tabular-nums;letter-spacing:0.01em}

/* ---- alt satir: onay kutusu ve hata mesaji ---- */
.quick__foot{
  display:flex;align-items:center;gap:1rem 1.25rem;flex-wrap:wrap;
  padding-inline:0.375rem;
}
.quick__consent{
  display:inline-flex;align-items:center;gap:0.5rem;cursor:pointer;
  font-size:var(--f13);color:var(--foreground-subtle);
}
.quick__consent input{position:absolute;opacity:0;width:1px;height:1px}

/* Dokunma hedefi (CLAUDE.md 8: en az 44x44). Telefon ve tablette randevu formunun iki
   kontrolu esigin altindaydi (28.09.2026'da 390 px'te olculdu): acilir listenin secenekleri
   151x22, gizlilik onayi satiri 292x18. Ikisi de randevu yolunda; yanlis secenege dokunmak
   sessizce yanlis hekim/rahatsizlik gonderiyor. Yalniz <=1023 px'te buyutuluyor, masaustu
   yerlesimi (yan formun "ekrana tam sigsin" olcusu, CLAUDE.md 1) degismesin diye.
   Acilir liste zaten max-height:15rem + overflow-y:auto, uzayan secenekler tasmiyor. */
@media (max-width:1023px){
  .qsel__btn{min-height:2.75rem;padding-block:0.5rem}
  .quick__consent{min-height:2.75rem;padding-block:0.5rem}
  /* Listenin secenekleri de: 318x29 idi. Listenin kendisi max-height:15rem + overflow-y:auto,
     uzayan secenekler tasmiyor, yalniz daha az sayida gorunuyor. */
  .qsel__opt{min-height:2.75rem;display:flex;align-items:center}
}
.quick__box{
  width:1.125rem;height:1.125rem;flex:none;border-radius:0.25rem;
  border:1px solid var(--border-subtle);background:var(--white);
  display:grid;place-items:center;color:var(--white);
  transition:background-color var(--duration-fast) var(--ease-entrance),
             border-color var(--duration-fast) var(--ease-entrance);
}
.quick__box svg{width:0.75rem;height:0.75rem;opacity:0;transition:opacity var(--duration-fast) var(--ease-entrance)}
.quick__consent input:checked + .quick__box{background:var(--accent);border-color:var(--accent)}
.quick__consent input:checked + .quick__box svg{opacity:1}
.quick__consent input:focus-visible + .quick__box{outline:2px solid var(--orange);outline-offset:2px}
.quick__consent a{text-decoration:underline}
.quick__error{color:var(--danger);font-size:var(--f13);font-weight:500}
.quick__field.is-error{
  background:rgba(198,40,40,0.06);
  box-shadow:inset 0 0 0 1px rgba(198,40,40,0.35);
}
.quick__consent.is-error{color:var(--danger)}
.quick__consent.is-error .quick__box{border-color:var(--danger)}

/* ---- gonderildi paneli ---- */
.quick__done{
  display:flex;align-items:center;gap:1rem;
  padding:1.25rem 1.5rem;
  border-radius:var(--corner-card);
  border:1px solid var(--border-subtle);
  background:var(--surface-glass-strong);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  box-shadow:0 8px 24px rgba(1,38,98,0.06);
}
.quick__done[hidden]{display:none}
.quick__done-mark{
  width:2.5rem;height:2.5rem;flex:none;border-radius:999px;
  background:var(--accent);color:var(--ice-200);display:grid;place-items:center;
}
.quick__done-mark svg{width:1.125rem;height:1.125rem}
.quick__done-body{display:flex;flex-direction:column;gap:0.375rem}
.quick__done-title{font-size:var(--f16);font-weight:600;color:var(--brand-500)}
.quick__done-text{font-size:var(--f14);color:var(--foreground-subtle)}
.quick__done-text a{color:var(--accent);font-weight:600;text-decoration:underline}

/* ---- kendi acilir menumuz ---- */
.quick__field select.is-enhanced{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.qsel{position:relative;display:flex}
.qsel__btn{
  display:flex;align-items:center;justify-content:space-between;gap:0.5rem;
  width:100%;padding:0;cursor:pointer;text-align:left;
  font:inherit;font-size:var(--f14);color:var(--foreground);
}
.qsel__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* min-width:0 sart: esnek kutuda deger en fazla icerigi kadar daraliyordu, uc nokta hic
   devreye girmiyor, uzun secim (tasinan sayfalarda sayfa basligi) kutunun disina tasiyordu. */
.qsel__btn::after{
  content:"";flex:none;width:0.4375rem;height:0.4375rem;margin-right:0.125rem;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--duration-fast) var(--ease-entrance);
}
.qsel__btn[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
.qsel__list{
  position:absolute;left:-0.75rem;z-index:30;
  min-width:calc(100% + 1.5rem);width:max-content;max-width:20rem;
  max-height:15rem;overflow-y:auto;
  margin:0;padding:0.375rem;list-style:none;
  border-radius:var(--corner-panel);border:1px solid var(--border-subtle);
  background:rgba(255,255,255,0.94);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  box-shadow:0 12px 32px rgba(1,38,98,0.14);
}
.qsel__list[hidden]{display:none}
.qsel__list--down{top:calc(100% + 0.5rem)}
.qsel__list--up{bottom:calc(100% + 0.5rem)}
.qsel__opt{
  padding:0.5rem 0.75rem;border-radius:0.375rem;cursor:pointer;
  font-size:var(--f14);color:var(--foreground);white-space:nowrap;
}
.qsel__opt:hover,.qsel__opt.is-active{background:var(--cyan-100,#e8f8fe)}
.qsel__opt[aria-selected="true"]{background:var(--accent);color:var(--white);font-weight:600}
.quick__submit{
  flex:none;align-self:center;
  height:3rem;font-size:var(--f16);gap:0.5rem;padding:0 0.1875rem 0 1.5rem;
}
.quick__submit .btn__disc{width:2.625rem;height:2.625rem;transition:transform var(--duration-fast) var(--ease-entrance)}
.quick__submit .btn__disc svg{width:14px;height:14px}
.quick__submit:hover .btn__disc{transform:translate3d(2px,-2px,0)}
.hero__actions{position:relative;z-index:10;display:flex;flex-wrap:wrap;gap:0.625rem}

@media (min-width:1024px){
  #hero{display:block;height:100lvh;padding:0}
  .hero__copy{position:absolute;top:35.55%;left:2.5rem;width:44.75rem;gap:1.5rem}
  .hero__copy h1{font-size:var(--f44)}
  .hero__media{position:absolute;top:0;bottom:0;left:22.5625rem;width:71.25rem;height:auto}
  /* z-index sart: sahne canvas'i DOM'da bundan sonra geliyor ve konumlandirilmis
     oldugu icin uzerine boyaniyordu; cizgi sagda kaybolmus gorunuyordu. */
  .hero__rule{position:absolute;top:72%;left:2.5625rem;right:2.5rem;width:auto;z-index:10}
  .quick{position:absolute;left:2.5rem;right:2.5rem;bottom:2.5rem;z-index:10}
}

/* ---- neden Düzey Göz ---------------------------------------------------- */
#why{
  background:var(--white);overflow:hidden;
  min-height:100vh;min-height:100lvh;
  display:flex;align-items:center;justify-content:center;
}
.why__copy{
  position:relative;z-index:2;
  width:min(100% - 2.5rem,44.75rem);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:3rem;text-align:center;
}
.why__copy h2{max-width:39.25rem}
.why__copy .lead{max-width:27.625rem}
/* Butonlar hicbir genislikte alt alta dusmemeli. Sabit 11.25rem yerine
   ayni degeri esnek TABAN olarak veriyoruz: genis ekranda 180px kaliyor,
   dar ekranda sigacak kadar daraliyor. Kirilma noktasina gerek yok. */
/* width:100% sart: kapsayici sutun yerlesiminde icerigi kadar genisleyip
   ebeveynini tasiyordu (320px'te 370px), o yuzden butonlar hic daralmiyordu. */
.why__actions{
  display:flex;flex-wrap:nowrap;gap:0.625rem;justify-content:center;
  width:100%;
}
.why__actions .btn{
  flex:0 1 11.25rem;min-width:0;
  padding-inline:0.5rem;white-space:nowrap;
}
/* 350 px altinda iki dugme yan yana ("Doktorlarimiz" 18 px'te 5 px tasiyordu, yazi olcegi 13.09.2026). */
@media (max-width:349px){.why__actions .btn{font-size:var(--f13)}}

/* Hakkimizda'dan tasinan veri seridi ve metin. Ortalanmis kompozisyonda
   hucreler sola dayali durur; turuncu kenar cizgisi korunuyor. */
.neden__veriler{
  display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2rem;
  width:100%;text-align:left;
}
.neden__veriler .stat{
  display:flex;flex-direction:column-reverse;gap:0.375rem;
  border-left:2px solid var(--orange);padding-left:1rem;
}
.neden__veriler dd{
  font-size:var(--f24);font-weight:400;line-height:1.05;
  color:var(--brand-500);font-variant-numeric:tabular-nums;
}
.neden__veriler dt{font-size:var(--f13);font-weight:400;color:var(--foreground-subtle)}
.neden__metin{
  font-size:var(--f13-6);font-weight:400;line-height:1.5;
  max-width:44rem;
}
@media (min-width:1024px){
  #why{height:100lvh}
  .why__copy{width:min(100% - 5rem,60rem);gap:2.25rem}
  .neden__veriler{grid-template-columns:repeat(4,1fr);gap:0 1.5rem}
  .neden__veriler dd{font-size:var(--f28)}

}

@media (max-width:1023px){
  /* Yatay cubuk dar ekranda sigmaz: alanlar alt alta, kil cizgiler yataya doner. */
  .quick__bar{flex-direction:column;gap:0;padding:0.5rem}
  .quick__field{padding:0.75rem}
  .quick__sep{width:auto;height:1px;align-self:stretch;margin:0 0.75rem}
  .quick__submit{align-self:stretch;margin-top:0.75rem;justify-content:space-between}
  .quick__done{flex-direction:column;align-items:flex-start}
  .quick__field--doktor,.quick__field--rahatsizlik,.quick__field--mail{flex-grow:1}
}

.trail{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.trail__card{
  position:absolute;top:0;left:0;
  width:13.5rem;height:17rem;border-radius:var(--corner-card);overflow:hidden;
  will-change:transform,opacity;
}
.trail__card img{width:100%;height:100%;object-fit:cover}

/* ---- göz hastalıkları dizini --------------------------------------------
   20 baslik. Duz liste yerine canli arama + bolume gore suzme: bu sayfaya
   gelen kisi genelde kafasindaki sikayetle geliyor, once onu bulsun.
   Kartlar gercek <a> oldugu icin JS kapaliyken de tam liste durur;
   arama kutusu ve cipleri JS ekler.                                        */
#goz-hastaliklari{background:var(--white)}
.dis__head{display:flex;flex-direction:column;gap:1rem;max-width:44rem;margin-bottom:2.5rem}
.dis__tools{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}

.dis__ara{
  display:flex;align-items:center;gap:0.75rem;
  width:min(100%,26rem);
  padding:0.75rem 1.25rem;
  border-radius:var(--corner-chip);
  border:1px solid var(--border-subtle);
  background:var(--white);
  transition:border-color var(--duration-fast) var(--ease-entrance);
}
/* Odak halkasi: kutu icindeki input `outline:none` yaziyor ve sitenin genel
   `:focus-visible` kuralini ozgullukle eziyor; kenar rengi tek basina yeterli degil
   (CLAUDE.md 8 gorunur halka istiyor ve "sadece renkle anlam tasinmaz" diyor).
   Klavyeyle gezildiginde bu kutu sitedeki TEK isaretsiz duraktı (28.09.2026, dokuz
   sayfada Tab ile olculdu). Kardes bilesen .ktp-ara__kutu ile ayni kalip. */
.dis__ara:focus-within{border-color:var(--accent);outline:2px solid var(--orange);outline-offset:3px}
.dis__ara svg{width:1rem;height:1rem;flex:none;color:var(--accent)}
.dis__ara input{
  font:inherit;font-size:var(--f15);color:var(--foreground);
  border:none;background:transparent;outline:none;width:100%;min-width:0;
}
.dis__ara input::placeholder{color:var(--foreground-muted)}

.dis__cipler{display:flex;flex-wrap:wrap;gap:0.5rem}
.dis__cip{
  padding:0.5rem 0.875rem;border-radius:var(--corner-chip);
  border:1px solid var(--border-subtle);background:var(--white);
  font-size:var(--f13);font-weight:500;color:var(--foreground-subtle);
  cursor:pointer;white-space:nowrap;
  transition:background-color var(--duration-fast) var(--ease-entrance),
             color var(--duration-fast) var(--ease-entrance),
             border-color var(--duration-fast) var(--ease-entrance);
}
.dis__cip:hover{border-color:var(--accent);color:var(--accent)}
.dis__cip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--white)}

.dis__sayac{font-size:var(--f13);color:var(--foreground-subtle)}
.dis__sayac b{color:var(--accent);font-weight:600}

.dis__grid{
  display:grid;gap:0.625rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
}
/* Dar ekranda 20 baslik tek sutunda cok uzun bir liste oluyordu; ikiser
   ikiser diziliyor. Sutun ~170px'e dustugu icin sira numarasi gizleniyor,
   ok ve dolgular kuculuyor: baslik iki satira sigsin. */
/* Ozgulluk: bu blok stil sayfasinda .dis__card / .dis__no / .dis__ok
   tanimlarindan ONCE geliyor, ayni ozgullukte kalirsa eziliyor. */
@media (max-width:620px){
  .dis__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5rem}
  .dis__grid .dis__card{padding:0.875rem 0.75rem;gap:0.5rem}
  .dis__grid .dis__no{display:none}
  .dis__grid .dis__ad{font-size:var(--f13);line-height:1.25}
  /* Ok, ~164px'lik sutunun beste birini yiyordu ve adlar dort satira
     cikiyordu. Iki sutun modunda gizleniyor; kartin kenarligi ve
     dokunma geri bildirimi baglanti oldugunu zaten gosteriyor. */
  .dis__grid .dis__ok{display:none}
}
.dis__item[hidden]{display:none}
.dis__card{
  display:flex;align-items:center;gap:0.875rem;height:100%;
  padding:1.125rem 1.25rem;
  border-radius:var(--corner-card);
  border:1px solid var(--border-subtle);
  background:var(--white);
  transition:background-color var(--duration-normal) var(--ease-entrance),
             border-color var(--duration-normal) var(--ease-entrance),
             color var(--duration-normal) var(--ease-entrance);
}
.dis__no{
  font-size:var(--f13);font-weight:600;flex:none;
  color:var(--foreground-muted);font-variant-numeric:tabular-nums;
  transition:color var(--duration-normal) var(--ease-entrance);
}
.dis__ad{font-size:var(--f15);font-weight:500;line-height:1.3;flex:1}
.dis__ok{
  width:1.75rem;height:1.75rem;flex:none;border-radius:999px;
  border:1px solid var(--border-subtle);
  display:grid;place-items:center;
  transition:background-color var(--duration-normal) var(--ease-entrance),
             border-color var(--duration-normal) var(--ease-entrance),
             transform var(--duration-normal) var(--ease-entrance);
}
.dis__ok svg{width:0.625rem;height:0.625rem}

.dis__card:hover{background:var(--accent);border-color:var(--accent);color:var(--white)}
.dis__card:hover .dis__no{color:var(--ice-200)}
.dis__card:hover .dis__ok{
  background:var(--ice-200);border-color:var(--ice-200);color:var(--brand-500);
  transform:translate3d(2px,-2px,0);
}

.dis__bos{
  margin-top:1.5rem;font-size:var(--f15);color:var(--foreground-subtle);
}
.dis__bos[hidden]{display:none}
.dis__bos a{color:var(--accent);font-weight:600;text-decoration:underline}

@media (min-width:1024px){
  .dis__head{margin-bottom:3rem}
  .dis__tools{
    flex-direction:row;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:1rem;margin-bottom:2rem;
  }
  .dis__ara{width:20rem;order:-1}
}

/* ---- services: Ileri Tetkikler -------------------------------------------
   Duz akista bir bolum. Sabitleme ve kaydirmaya bagli yatay hareket
   kaldirildi (kullanici istegi, CLAUDE.md 3.1). Masaustunde kartlar yatay
   bir rayda durur, ray elle kaydirilir: iki ok (main.js servisRayi),
   dokunmatik yuzey, shift+tekerlek. Mobil ve tablette kartlar alt alta.
   Alt dolgu Hakkimizda'nin koseleri kadar uzun: o bolum koseleriyle bunun
   ustune biner.                                                          */
.services__panel{
  position:relative;
  background:var(--surface-section);
  border-radius:var(--corner-section) var(--corner-section) 0 0;
  padding-bottom:calc(3rem + var(--corner-section));
}
.services__head{padding:7rem 1.25rem 2rem;display:flex;flex-direction:column;gap:1.5rem}
.services__track{display:grid;grid-template-columns:1fr;gap:0.75rem;padding-inline:1.25rem}
@media (max-width:1023px){.services__track .card{width:auto;max-width:none;height:auto;min-height:20rem}}
@media (min-width:768px){
  .services__head{padding-inline:2.5rem}
  .services__track{grid-template-columns:1fr 1fr;padding-inline:2.5rem}
}
.svc-nav{display:none}
.svc-nav__btn{width:3rem;height:3rem}
.svc-nav__btn[aria-disabled="true"]{opacity:.4;cursor:default}
.svc-nav__btn[aria-disabled="true"]:hover{
  background:var(--surface-glass-bar);color:var(--brand-500);border-color:var(--border-subtle)}
.svc-nav__btn[aria-disabled="true"]:active{transform:none}

@media (min-width:1024px){
  .services__panel{padding-bottom:calc(5rem + var(--corner-section))}
  .services__head{
    display:grid;grid-template-columns:49.5rem 20.75rem;justify-content:space-between;
    grid-template-areas:"baslik ust" "baslik aciklama" "baslik ok";
    grid-template-rows:auto auto 1fr;gap:1rem 2rem;
    margin-inline:2.5rem;padding:8rem 0 3rem;
  }
  .svc-heading{grid-area:baslik}
  .svc-eyebrow{grid-area:ust}
  .svc-desc{grid-area:aciklama}
  .svc-nav:not([hidden]){grid-area:ok;align-self:end;display:flex;justify-content:flex-end;gap:0.625rem}
  /* Ray solda basliga hizali, sagda ekran kenarina kadar uzanir (kullanici
     istegi); sondaki kart icin izde 2.5rem pay birakilir, sona gelince son kart
     basligin sag kenariyla hizalanir. */
  .services__rail{
    margin-left:2.5rem;margin-right:0;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;
  }
  /* JS varsa oklar var, kaydirma cubugu gizlenir; JS yoksa cubuk kalir. */
  .services__rail.is-elle{scrollbar-width:none}
  .services__rail.is-elle::-webkit-scrollbar{display:none}
  /* Fareyle surukleme sirasinda yakalama ve yumusak kaydirma kapali (main.js). */
  .services__rail.is-surukleniyor{scroll-snap-type:none;scroll-behavior:auto;user-select:none}
  .services__rail.is-surukleniyor,.services__rail.is-surukleniyor *{cursor:grabbing}
  .services__track{display:flex;gap:0.625rem;width:max-content;padding:0 2.5rem 0 0}
  .services__track .card{height:27rem;min-height:0;scroll-snap-align:start}
  /* Ray tasani kirpar; odak halkasi kartin icine cizilir. */
  .services__track .card:focus-visible{outline-offset:-3px}
}
@media (prefers-reduced-motion:reduce){.services__rail{scroll-behavior:auto}}

.card{
  position:relative;flex:none;height:100%;
  border-radius:var(--corner-card);overflow:hidden;padding:2rem;
  display:flex;flex-direction:column;justify-content:space-between;
  width:78vw;max-width:22rem;
}
.card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Perde iki ucta da duruyor: ustte sira numarasi, altta panel kapaliyken
   beyaz baslik icin. */
.card--photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,.30) 0%, rgba(0,0,0,.04) 40%,
    rgba(0,0,0,.10) 62%, rgba(0,0,0,.52) 100%);
  transition:opacity var(--duration-normal) var(--ease-entrance);
}
.card__index,.card__body{position:relative;z-index:1}
.card__index{font-size:var(--f20);font-weight:400;line-height:var(--leading-body)}
.card__body{display:flex;flex-direction:column;gap:1.5rem}
.card__title{font-size:var(--f24);font-weight:400;line-height:var(--leading-display)}
.card__desc{font-size:var(--f12);font-weight:400;line-height:1.45;max-width:22rem}
.card--lime{background:var(--action-secondary);border:1px solid var(--action-secondary-border);color:var(--brand-500)}
.card--brand{background:var(--accent);color:var(--white)}
/* Liste karti: satirlar ayri ayri tiklanir, aralarinda kil cizgi var.
   Camgobegi zeminde soluk kalmasin diye ayrac laciverdin dusuk opakligi. */
.card__list li{border-top:1px solid rgba(1,38,98,0.22)}
.card__list a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0.875rem 0;font-size:var(--f15);font-weight:500;
  transition:opacity var(--duration-fast) var(--ease-entrance),
             transform var(--duration-fast) var(--ease-entrance);
}
.card__list a:hover{opacity:0.7;transform:translate3d(3px,0,0)}
.card__list svg{width:13px;height:13px;flex:none}

/* Kartin tamami baglanti; halka gorsel isaret. */
a.card{text-decoration:none}
a.card .ring72{
  transition:background-color var(--duration-normal) var(--ease-entrance),
             border-color var(--duration-normal) var(--ease-entrance),
             color var(--duration-normal) var(--ease-entrance),
             transform var(--duration-normal) var(--ease-entrance);
}
a.card:hover .ring72,a.card:focus-visible .ring72{
  background:var(--ice-200);border-color:var(--ice-200);color:var(--brand-500);
  transform:translate3d(3px,-3px,0);
}
/* ---- fotograf kartinin alt paneli ----------------------------------------
   Varsayilan halde panel seffaf: yalnizca beyaz baslik gorunuyor, fotograf
   acikta kaliyor. Uzerine gelince (ya da klavyeyle odaklanilinca) buzlu
   beyaz zemin ve aciklama beliriyor, yazi laciverde donuyor.

   DIKKAT: backdrop-filter'da "none" degil "blur(0px)". "none" ara deger
   uretmiyor, cam tik diye kopuyor.
   Panele kendi alt kose yaricapi veriliyor: backdrop-filter kendi
   katmanini olusturuyor ve kartin border-radius kirpmasindan kacabiliyor,
   panelin koseli alt koseleri kartin disina tasiyordu.                    */
.card--photo{color:var(--white)}
.card--photo .card__body{
  position:relative;z-index:1;
  margin:0 -2rem -2rem;padding:1.5rem 2rem 1.75rem;
  border-radius:0 0 var(--corner-card) var(--corner-card);
  background:rgba(255,255,255,0);
  -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);
  border-top:1px solid rgba(255,255,255,0);
  gap:0.75rem;
  transition:background-color var(--duration-normal) var(--ease-entrance),
             backdrop-filter var(--duration-normal) var(--ease-entrance),
             -webkit-backdrop-filter var(--duration-normal) var(--ease-entrance),
             border-color var(--duration-normal) var(--ease-entrance);
}
.card--photo .card__title{
  color:var(--white);text-shadow:0 1px 14px rgba(0,0,0,.55);
  transition:color var(--duration-normal) var(--ease-entrance),
             text-shadow var(--duration-normal) var(--ease-entrance);
}
/* Aciklama 2-3 cumlelik ozet (eski "Incele" ve ok halkasi kaldirildi,
   kullanici istegi); kirpilmaz, tamami gorunur. Hep 6 satirlik yer ayrilir:
   masaustunde (24rem kart) ozetler 3-6 satir, kisa olanlarda baslik asagida
   kalip kartlar asimetrik duruyordu. */
.card--photo .card__desc{color:rgba(18,35,63,0.78);font-size:var(--f13);line-height:1.55;max-width:none;
  min-height:calc(6 * 1.55em)}
.card--photo .card__desc,.card--photo .card__discover{
  opacity:0;transition:opacity var(--duration-normal) var(--ease-entrance);
}
.card--photo .card__discover{margin-top:0.5rem}
.card--photo .card__discover span{color:var(--brand-500);font-weight:500}
.card--photo .ring72{border-color:rgba(1,38,98,0.28);color:var(--brand-500)}

/* Acilma: fare varsa hover ve klavye odagi; dokunmatikte hep acik. */
@media (hover:hover){
  a.card--photo:hover .card__body,
  a.card--photo:focus-visible .card__body{
    background:var(--surface-glass-strong);
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
    border-top-color:rgba(255,255,255,0.6);
  }
  a.card--photo:hover .card__title,
  a.card--photo:focus-visible .card__title{color:var(--brand-500);text-shadow:none}
  a.card--photo:hover .card__desc,a.card--photo:focus-visible .card__desc,
  a.card--photo:hover .card__discover,a.card--photo:focus-visible .card__discover{opacity:1}
  a.card--photo:hover::after,a.card--photo:focus-visible::after{opacity:0.35}
}
/* Dokunmatikte hover yok: panel ve metin hep acik kalmali, yoksa kartin
   ne oldugu anlasilmaz. */
@media (hover:none){
  .card--photo .card__body{
    background:var(--surface-glass-strong);
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
    border-top-color:rgba(255,255,255,0.6);
  }
  .card--photo .card__title{color:var(--brand-500);text-shadow:none}
  .card--photo .card__desc,.card--photo .card__discover{opacity:1}
}
/* Telefon ve tablet: panel dokunmatikte hep acik oldugu ve yazi olcegiyle buyudugu icin
   fotografin uzerini kapatiyordu, geriye ince bir serit kaliyordu. Kart burada akisa doner:
   ustte fotografin tamami (4:3), altinda panel; ikisi de tam gorunur (kullanici istegi
   20.09.2026: "en azindan gorselin yarisi gozuksun, icerigi de okunsun"). */
@media (max-width:1023px){
  .services__track .card--photo{display:block;padding:0;min-height:0;background:var(--white)}
  .services__track .card--photo .card__img{position:static;height:auto;aspect-ratio:4/3}
  /* Perde yalniz fotografin uzerinde: panel kendi zemininde kalir. */
  .services__track .card--photo::after{inset:0 0 auto;aspect-ratio:4/3;
    background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.08) 48%,rgba(0,0,0,0) 100%)}
  .services__track .card--photo .card__index{position:absolute;top:1.125rem;left:1.25rem;
    color:var(--white);text-shadow:0 1px 10px rgba(0,0,0,.55)}
  .services__track .card--photo .card__body{margin:0;padding:1.25rem 1.25rem 1.5rem;
    background:var(--white);-webkit-backdrop-filter:none;backdrop-filter:none;border-top:0;
    border-radius:0 0 var(--corner-card) var(--corner-card)}
  /* Masaustunde kartlari esitleyen 6 satirlik yer telefonda gereksiz bosluk birakiyor. */
  .services__track .card--photo .card__desc{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .card--photo .card__body,.card--photo .card__title,
  .card--photo .card__desc,.card--photo .card__discover,
  .card--photo::after{transition-duration:1ms}
}
a.card--photo:hover .ring72,a.card--photo:focus-visible .ring72{
  background:var(--accent);border-color:var(--accent);color:var(--white);
}
.card__discover{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.card__discover span{font-size:var(--f16);font-weight:400}
.ring72{
  width:72px;height:72px;flex:none;border-radius:999px;
  border:1px solid currentColor;display:grid;place-items:center;
}
.ring72 svg{width:16px;height:16px}

/* Masaustu kart olculeri (kullanici istegi: "biraz kucult"; eskisi 27.94 / 35.06 x 32rem). */
@media (min-width:1024px){
  .card{width:24rem;max-width:none}
  .card--lime{width:30rem}
}

/* ---- about: yuvarlak koseleriyle Ileri Tetkikler'in ustune biner ---------- */
#about{
  position:relative;z-index:10;margin-top:calc(-1 * var(--corner-section));
  background:var(--surface-section-deep);
  border-radius:var(--corner-section) var(--corner-section) 0 0;
  overflow:hidden;
  padding:7rem 1.25rem 3rem;
}
@media (min-width:768px){#about{padding-inline:2.5rem}}
/* ---- Excimer Lazer blogu ------------------------------------------------
   Kendi paneli yok; bolumun zemini uzerinde durur. Tamamen statik: JS yok. */
.excimer{display:flex;flex-direction:column;gap:2rem;margin-bottom:3rem}
.excimer__foto{
  position:relative;flex:none;
  /* Dar ekranda tum genisligi kaplayip 700px'e ciriyordu; kendi en-boy
     oraninda ve makul bir genislikte tutuluyor. */
  width:100%;max-width:20rem;aspect-ratio:3/4;
  border-radius:var(--corner-card);overflow:hidden;
  background:var(--white);
}
.excimer__foto img{width:100%;height:100%;object-fit:cover;display:block}
.excimer__foto figcaption{
  position:absolute;left:1rem;right:1rem;bottom:1rem;
  display:flex;flex-direction:column;gap:0.375rem;
  padding:0.75rem 1rem;border-radius:var(--corner-panel);
  background:var(--surface-glass);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
}
.excimer__unvan{
  font-size:var(--f11);font-weight:600;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--accent);
}
.excimer__isim{font-size:var(--f15);font-weight:600;color:var(--brand-500)}

.excimer__icerik{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.excimer__baslik{font-size:var(--f24);font-weight:400;line-height:var(--leading-display);color:var(--brand-500)}
.excimer__metin{font-size:var(--f13);font-weight:400;line-height:1.6;color:var(--foreground-subtle)}
.excimer__liste{display:grid;grid-template-columns:1fr;gap:0.625rem 2rem;width:100%}
.excimer__liste li{
  display:flex;align-items:center;gap:0.625rem;
  font-size:var(--f14);font-weight:500;color:var(--foreground);
}
.excimer__liste svg{width:0.8125rem;height:0.8125rem;flex:none;color:var(--accent)}
.excimer__cta{margin-top:0.5rem}
.muted{color:var(--foreground-muted)}

@media (min-width:1024px){
  #about{height:36.25rem;padding:0}
  .excimer{
    position:absolute;top:2.5rem;left:2.5rem;width:85rem;height:31.25rem;margin:0;
    flex-direction:row;align-items:stretch;gap:4rem;
  }
  .excimer__foto{width:27rem;max-width:none;aspect-ratio:auto}
  .excimer__foto figcaption{left:1.25rem;right:1.25rem;bottom:1.25rem}
  .excimer__icerik{flex:1;justify-content:center;gap:1.5rem}
  .excimer__baslik{font-size:var(--f32);max-width:40rem}
  /* Metin olcusu okunabilirlik icin dar tutulur (~75 karakter); genisligi
     listeyi uc sutuna yayarak dengeliyoruz, paragrafi uzatarak degil. */
  .excimer__metin{font-size:var(--f14);max-width:36rem}
  .excimer__liste{grid-template-columns:repeat(3,1fr);gap:0.875rem 1.5rem;max-width:50rem}
  .excimer__liste li{font-size:var(--f15)}
}

/* ---- team --------------------------------------------------------------- */
#team{
  position:relative;z-index:1;
  height:100lvh;overflow:hidden;
  background:var(--surface-section-deep);
  padding-top:6%;
}
.team__box{height:86%;display:flex;flex-direction:column}
.team__rail{
  flex:1;min-height:0;
  display:flex;gap:0.625rem;
  overflow-x:auto;overflow-y:hidden;
  scroll-behavior:auto;touch-action:pan-y;
  padding-inline:1.25rem;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
}
.team__rail::-webkit-scrollbar{display:none}
.team__rail.is-dragging{cursor:grabbing}
.team__rail img{pointer-events:none}
@media (min-width:768px){.team__rail{padding-inline:2.5rem}}
@media (min-width:1024px){.team__rail{padding-inline:2.5rem}}

.tcard{
  position:relative;flex:none;height:100%;
  width:70vw;max-width:20.75rem;
  border-radius:var(--corner-card);overflow:hidden;
}
.tcard--intro{
  background:var(--accent);color:var(--white);padding:2rem;
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  max-width:27.9375rem;width:82vw;
}
/* Tanitim kartinin etiketi bolum baslliklariyla ayni olcude. Buyuk harf ve
   harf araligi kaldirildi: 2.25rem'de "DOKTORLARIMIZ" tek kelime oldugu icin
   sarmiyor, kartin disina tasiyordu. */
.tcard--intro .eyebrow{
  color:var(--white);
  font-size:var(--f24);font-weight:400;
  text-transform:none;letter-spacing:normal;
  line-height:var(--leading-display);
}
.tcard--intro h2{font-size:var(--f24);font-weight:400;line-height:var(--leading-display);color:var(--ice-200)}
.tcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tcard__plate{
  position:absolute;left:2rem;right:2rem;bottom:2rem;height:4rem;
  border-radius:var(--corner-panel);
  background:var(--surface-glass);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.75rem;
}
.tcard__plate .name{font-size:var(--f16);font-weight:500}
.tcard__plate .role{font-size:var(--f14);font-weight:400;color:var(--foreground-subtle)}
.tcard--tail{
  background:var(--action-secondary);border:1px solid var(--action-secondary-border);
  color:var(--brand-500);padding:2rem;
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
}
.tcard--tail p{font-size:var(--f32);font-weight:400;line-height:var(--leading-display)}
/* Hekim kartinin tamami profil sayfasina baglanir (kullanici istegi; profili
   olmayan hekim Doktorlarimiz sayfasina). Ray suruklenince tiklama sayilmaz
   (main.js). Ray tasani kirptigi icin odak halkasi kartin icine cizilir. */
a.tcard{display:block;color:inherit;text-decoration:none}
a.tcard:focus-visible{outline-offset:-3px}
a.tcard .tcard__plate{transition:background-color var(--duration-fast) var(--ease-entrance)}
a.tcard:hover .tcard__plate{background:var(--surface-glass-strong)}
a.tcard:hover .tcard__plate .name{color:var(--accent)}
/* Tanitim kartinin alti: baslik + "Uzman doktorlarimiz" (Doktorlarimiz sayfasi). */
.tcard__alt{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.tcard__tumu{
  display:inline-flex;align-items:center;gap:0.625rem;min-height:2.75rem;padding:0 1.25rem;
  border-radius:999px;background:var(--white);color:var(--accent);
  font-size:var(--f14);font-weight:600;text-decoration:none;
  transition:background-color var(--duration-fast) var(--ease-entrance),
             color var(--duration-fast) var(--ease-entrance);
}
.tcard__tumu svg{width:0.75rem;height:0.75rem;flex:none}
.tcard__tumu:hover{background:var(--ice-200)}
/* ---- mobilde Doktorlarimiz: duz dikey liste ---------------------------- */
@media (max-width:1023px){
  section#team{height:auto;overflow:visible;padding:5rem 0 3rem}
  .team__box{height:auto;display:block}
  .team__rail{
    display:grid;grid-template-columns:1fr;gap:1rem;
    overflow:visible;cursor:default;touch-action:auto;
  }
  .team__bar{display:none}

  /* Hekim kartlari alt alta; gorsel orani 864x1152 = 3:4. */
  .team__rail .tcard{width:auto;max-width:none;height:auto;aspect-ratio:3/4}

  /* Tanitim karti: lacivert kutu degil, duz baslik blogu.
     DIKKAT: bu blok .tcard kuralindan SONRA gelmeli, ayni ozgullukte;
     once yazilinca 3:4 orani tanitim blogunu da 447px'e cikariyordu. */
  .team__rail .tcard--intro,
  .team__rail .tcard--tail{aspect-ratio:auto;height:auto}
  .team__rail .tcard--intro{
    background:none;color:inherit;padding:0 0 0.5rem;
    width:auto;max-width:none;
    border-radius:0;gap:0.5rem;justify-content:flex-start;
    /* .tcard'dan gelen overflow:hidden etiketin ust noktalarini kesiyordu
       (Turkce buyuk harfte "İ"nin noktasi). Kart olmadigi icin kirpmaya
       gerek yok. */
    overflow:visible;
  }
  .team__rail .tcard--intro .eyebrow{
    color:var(--accent);font-size:var(--f14);font-weight:500;
    text-transform:uppercase;letter-spacing:0.06em;
    /* flex:none sart: esnek sutunda kutu 16.8px yerine 10px'e daraliyor
       ve satir kutusu icerigi tasiyordu. */
    flex:none;line-height:1.4;
  }
  .team__rail .tcard--intro h2{color:var(--brand-500);font-size:var(--f28)}
  /* Tanitim burada acik zeminde duz baslik: dugme lacivert. */
  .team__rail .tcard__tumu{background:var(--accent);color:var(--white)}
  .team__rail .tcard__tumu:hover{background:var(--brand-900)}
}
/* Tablette uc hekim tek satirda (2 sutunda son kart tek basina kaliyordu). */
@media (min-width:768px) and (max-width:1023px){
  .team__rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .team__rail .tcard--intro{grid-column:1 / -1}
  /* Kart daraldi (~230 px): masaustundeki sikisik plaka; sabit 4rem'lik plakada ad
     ve unvan tasiyordu. */
  .tcard__plate{
    left:0.625rem;right:0.625rem;bottom:0.625rem;
    height:auto;padding:0.625rem 0.5rem;gap:0.25rem;text-align:center;
  }
  .tcard__plate .name{font-size:var(--f13);line-height:1.3}
  .tcard__plate .role{font-size:var(--f11);line-height:1.3}
}

.team__bar{position:relative;height:2px;background:var(--border-subtle);margin:1.5rem 1.25rem 0}
@media (min-width:768px){.team__bar{margin-inline:2.5rem}}
.team__bar span{
  position:absolute;inset:0;background:var(--accent);
  transform-origin:left;transform:scaleX(0.654);
}
@media (min-width:1024px){
  /* Dort hekim kartinin dordu de tek bakista gorunur. Sabit genislik yerine
     esnek: kartlar kalan yeri esit paylasiyor. Sabit olcude, kaydirma
     cubugunun ayirdigi 15px yuzunden sonuncusu 11px disarida kaliyordu. */
  .tcard{flex:1 1 0;width:auto;min-width:0;max-width:none}
  .tcard--intro{flex:none;width:20.75rem;max-width:none}
  /* Kart daraldi; portreler cok dar bir seride sikismasin diye ray alcaltilip
     dikeyde ortalandi. */
  /* Sticky kalkinca alttaki bosluk gorunur oldu: onceden bir sonraki bolum
     ortuyordu. Ray yukseltilip dikeyde dengelendi. */
  #team{padding-top:9%}
  .team__box{height:82%}
  /* Plaka artik icerige gore buyuyor: sabit 4rem yukseklikte iki satirlik
     hekim adi disari tasiyordu. */
  .tcard__plate{
    left:0.75rem;right:0.75rem;bottom:0.75rem;
    height:auto;padding:0.625rem 0.5rem;gap:0.375rem;
  }
  .tcard__plate .name{font-size:var(--f13)}
  .tcard__plate .role{font-size:var(--f11)}
  .tcard--intro .eyebrow{font-size:var(--f36)}
}

/* ---- tedavi süreci ------------------------------------------------------
   Doktorlarimiz'in hemen ardindan, normal akista gelir. Ustune binen panel
   gorunumu istenmedigi icin ne z-index ne de ust kose yaricapi var.        */
#tedavi-sureci{
  position:relative;
  background:var(--white);
}
.adim__head{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  margin-bottom:2.5rem;
}
.adim__liste{
  position:relative;
  display:grid;gap:2rem 1.25rem;list-style:none;margin:0;padding:0;
  grid-template-columns:1fr;
}
/* Adimlari birbirine baglayan cizgi. Kartlarin arkasinda duruyor, sadece
   aralardan gorunuyor; boylece tek bir sozde-elemanla "adim adim" hissi
   veriyor, ayrica isaretci koymaya gerek kalmiyor. */
.adim__liste::before{display:none}
.adim__oge{
  position:relative;display:flex;flex-direction:column;gap:0.875rem;
  transition:transform var(--duration-normal) var(--ease-entrance),
             opacity var(--duration-normal) var(--ease-entrance);
}
.adim__gorsel{position:relative;margin:0;border-radius:var(--corner-card);overflow:hidden}
.adim__gorsel img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform 400ms var(--ease-entrance);
}
/* Numara rozeti: gorselin sag ust kosesinde, referanstaki gibi turuncu.
   Dort kucuk daire, turuncu butcesini zorlamiyor. */
/* Kartin dogrudan cocugu; <figure> icinde degil. Figure'de fotograf
   yakinlasmasi icin overflow:hidden var ve rozetin ustunu kirpiyordu. */
.adim__no{
  position:absolute;top:-0.75rem;right:-0.75rem;z-index:2;
  width:3rem;height:3rem;border-radius:50%;
  /* Yapiskan menu seridiyle ayni buzlu cam: %72 beyaz + arka plan bulaniklastirma.
     Kenarlik yok; ayrimi cam katmani ve yumusak lacivert golge sagliyor. */
  background:var(--surface-glass-bar);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  color:var(--brand-500);
  display:grid;place-items:center;
  font-size:var(--f16);font-weight:700;font-variant-numeric:tabular-nums;
  box-shadow:0 4px 14px rgba(1,38,98,0.14);
}
.adim__baslik{font-size:var(--f18);font-weight:600;line-height:1.25;color:var(--brand-500)}
.adim__metin{font-size:var(--f13-6);font-weight:400;line-height:1.55;color:var(--foreground-subtle)}

/* ---- etkilesim ----------------------------------------------------------
   Bir adima gelindiginde o adim one cikiyor, digerleri geri cekiliyor.
   Tamami CSS; sadece transform ve opacity animasyonlaniyor.
   Klavyeyle gezenler icin :focus-within de ayni davraniyor.               */
.adim__liste:hover .adim__oge,
.adim__liste:focus-within .adim__oge{opacity:0.45}
.adim__liste .adim__oge:hover,
.adim__liste .adim__oge:focus-within{opacity:1;transform:translate3d(0,-6px,0)}
.adim__oge:hover .adim__gorsel img,
.adim__oge:focus-within .adim__gorsel img{transform:scale(1.06)}
.adim__oge:hover .adim__no,
.adim__oge:focus-within .adim__no{transform:scale(1.12)}
.adim__no{transition:transform var(--duration-normal) var(--ease-entrance)}

@media (prefers-reduced-motion:reduce){
  .adim__liste:hover .adim__oge,
  .adim__liste:focus-within .adim__oge{opacity:1}
  .adim__liste::before{transform:scaleX(1);transition:none}
  .adim__oge,.adim__gorsel img,.adim__no{transition:none}
  .adim__liste .adim__oge:hover,
  .adim__liste .adim__oge:focus-within{transform:none}
  .adim__oge:hover .adim__gorsel img{transform:none}
}

@media (min-width:768px){
  .adim__liste{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .adim__head{margin-bottom:3.5rem}
  .adim__liste{grid-template-columns:repeat(4,1fr);gap:1.25rem}
  .adim__baslik{font-size:var(--f20)}
  /* Rozetlerin hizasindan gecen kesik cizgi. Gorseller uzerini ortuyor,
     yalnizca kartlarin arasindaki bosluklarda gorunuyor. */
  .adim__liste::before{
    display:block;content:"";position:absolute;z-index:0;
    top:0.625rem;left:8%;right:8%;height:2px;
    background:repeating-linear-gradient(
      90deg, var(--border-subtle) 0 6px, transparent 6px 12px);
    /* Ilk adim girdiginde soldan saga cizilir. Sure, dort adimlik
       kademelenmeyle (0/300/600/900ms + yay) ayni ritimde. */
    transform:scaleX(0);transform-origin:left;
    transition:transform 2200ms var(--ease-entrance) 150ms;
  }
  .adim__liste:has(.adim__oge.is-enter)::before{transform:scaleX(1)}
  .adim__oge{z-index:1}
}

/* ---- göz kapağı estetiği ------------------------------------------------
   Kaynaktaki blok genis turuncu zeminliydi; palet kurali geregi lacivert
   panele cevrildi. Turuncu yalnizca etiketin yanindaki kisa cizgide.
   Dekor: camgobegi isilti + fotograftaki kesikli cizgileri yansitan
   noktali halkalar. Hepsi statik CSS, JS yok.                              */
.estetik-bolum{background:var(--white)}
.estetik{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:2rem;
  background:var(--brand-500);color:var(--white);
  border-radius:var(--corner-card);
  padding:2rem;
}
.estetik__glow{
  position:absolute;right:-12%;top:-25%;width:34rem;height:34rem;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(110,210,242,0.28) 0%, rgba(110,210,242,0) 62%);
}
.estetik__halka{
  position:absolute;border-radius:50%;pointer-events:none;
  border:2px dotted rgba(110,210,242,0.38);
}
.estetik__halka--1{width:11rem;height:11rem;left:-4rem;bottom:-4rem}
.estetik__halka--2{width:5.5rem;height:5.5rem;left:8rem;bottom:2rem;border-color:rgba(110,210,242,0.22)}
.estetik__icerik{position:relative;display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.estetik__etiket{
  display:flex;align-items:center;gap:0.625rem;color:var(--ice-200);
}
.estetik__etiket::before{content:"";flex:none;width:1.75rem;height:2px;background:var(--orange)}
.estetik__baslik{font-size:var(--f28);font-weight:400;line-height:var(--leading-display)}
.estetik__metin{font-size:var(--f13-6);font-weight:400;line-height:1.6;color:rgba(255,255,255,0.82);max-width:36rem}
.estetik__liste{display:flex;flex-wrap:wrap;gap:0.625rem 1.5rem}
.estetik__liste li{
  display:flex;align-items:center;gap:0.5rem;
  font-size:var(--f14);font-weight:500;
}
.estetik__liste svg{width:0.8125rem;height:0.8125rem;flex:none;color:var(--ice-200)}
.estetik__aksiyon{display:flex;flex-wrap:wrap;gap:0.625rem;margin-top:0.5rem}
.estetik__wa{border-color:rgba(255,255,255,0.45);color:var(--white)}
.estetik__wa:hover{background:rgba(255,255,255,0.12)}
.estetik__foto{
  position:relative;margin:0;align-self:center;
  width:100%;max-width:20rem;
  border-radius:var(--corner-card);overflow:hidden;
}
.estetik__foto img{width:100%;height:auto;display:block}

@media (min-width:1024px){
  .estetik{
    flex-direction:row;align-items:center;gap:4rem;
    padding:3.5rem 4rem;
  }
  .estetik__icerik{flex:1;gap:1.5rem}
  .estetik__baslik{font-size:var(--f36)}
  .estetik__metin{font-size:var(--f15)}
  .estetik__foto{
    flex:none;width:24rem;max-width:none;align-self:stretch;
  }
  .estetik__foto img{height:100%;object-fit:cover}
}

/* ---- Google yorumlari -----------------------------------------------------
   Veri dinamik; buraya sahte yorum yazilmadi. Iskelet kartlar veri
   gelene kadar duruyor, sonra sablondan basilan kartlarla degisiyor.   */
.yorum__head{display:flex;flex-direction:column;gap:1rem;max-width:44rem;margin-bottom:1.5rem}

.yorum__ozet{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:2rem;
}
.yorum__puan{display:flex;align-items:baseline;gap:0.75rem;flex-wrap:wrap}
.yorum__sayi{font-size:var(--f40);font-weight:700;line-height:1;color:var(--brand-500);
  font-variant-numeric:tabular-nums}
.yorum__yildizlar{display:inline-flex;gap:0.125rem;align-self:center}
.yorum__yildizlar svg{width:1rem;height:1rem;color:var(--orange)}
.yorum__adet{font-size:var(--f15);color:var(--foreground-subtle)}
.yorum__adet b{color:var(--brand-500);font-weight:600;font-variant-numeric:tabular-nums}
.yorum__link{
  display:inline-flex;align-items:center;gap:0.625rem;
  font-size:var(--f15);font-weight:600;color:var(--brand-500);text-decoration:none;
}
.yorum__ok{
  width:2rem;height:2rem;flex:none;border-radius:999px;
  border:1px solid var(--border-subtle);display:grid;place-items:center;
  transition:background-color var(--duration-fast) var(--ease-entrance),
             border-color var(--duration-fast) var(--ease-entrance),
             color var(--duration-fast) var(--ease-entrance);
}
.yorum__ok svg{width:0.625rem;height:0.625rem}
.yorum__link:hover .yorum__ok{background:var(--accent);border-color:var(--accent);color:var(--white)}
.yorum__link:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}

/* Mobilde alt alta; genis ekranda ikiden uce cikiyor. Yatay kaydirma yok. */
.yorum__liste{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:700px){.yorum__liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.yorum__liste{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* [hidden] ozniteligi tek basina yetmiyor: asagidaki .ycard kurali display veriyor ve
   dusuk ozgullukteki [hidden]{display:none} eziliyor. Yorum verisi gelmediginde (uc 204
   donuyor, ornegin gunluk kota dolmus) main.js iskeleti "hidden" yapiyor ama kutular
   ekranda kaliyordu: ziyaretci uc bos gri kutu goruyordu (29.09.2026, kullanici bildirdi). */
.ycard[hidden]{display:none}
.ycard{
  display:flex;flex-direction:column;gap:0.75rem;
  padding:1.5rem;border-radius:var(--corner-card);
  border:1px solid var(--border-subtle);background:var(--white);
}
.ycard__ust{display:flex;align-items:center;gap:0.75rem}
.ycard__avatar{
  width:2.5rem;height:2.5rem;flex:none;border-radius:999px;
  background:var(--mint-100);color:var(--brand-500);
  display:grid;place-items:center;overflow:hidden;
  font-size:var(--f15);font-weight:600;
}
.ycard__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ycard__kim{display:flex;flex-direction:column;gap:0.125rem;min-width:0}
.ycard__ad{font-size:var(--f15);font-weight:600;color:var(--brand-500);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ycard__tarih{font-size:var(--f13);color:var(--foreground-muted)}
.ycard__yildiz{display:inline-flex;gap:0.125rem}
.ycard__yildiz svg{width:0.875rem;height:0.875rem;color:var(--orange)}
.ycard__yildiz svg.-bos{color:var(--border-subtle)}
/* Uzun yorumlar karti sismesin: gorunurde bes satir, tamami DOM'da. */
.ycard__metin{
  margin:0;font-size:var(--f15);line-height:1.6;color:rgba(18,35,63,0.78);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}

/* Veri gelene kadar duran notr bloklar. Hareket yok (kural 3). */
.ycard--iskelet{gap:0.875rem}
.ycard--iskelet span{display:block;border-radius:4px;background:var(--mint-100)}
.ycard--iskelet span:nth-child(1){height:2.5rem;width:60%;border-radius:999px}
.ycard--iskelet span:nth-child(2){height:0.875rem;width:35%}
.ycard--iskelet span:nth-child(3){height:5rem}

/* ---- blog: yazi kartlari -------------------------------------------------
   Ustte 16:9 kapak gorseli, altinda tarih, baslik ve ozet.
   Hicbir yerinde JS yok, kapaliyken de calisan duz bir baglanti listesi.
   Hover'da yalnizca transform ve renk degisiyor.                           */
.blog__head{display:flex;flex-direction:column;gap:1rem;max-width:44rem;margin-bottom:2.5rem}

.blog__grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:700px){.blog__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.blog__grid{grid-template-columns:repeat(4,1fr)}}
/* Dort yazi 4 ya da 2 sutuna tam boluniyor; auto-fill kullansak
   ara genisliklerde tek basina kalan bir kart olusuyordu. */

.blog__kart{display:flex}
.blog__bag{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;width:100%;
  border:1px solid var(--border-subtle);border-radius:var(--corner-card);
  background:var(--white);text-decoration:none;color:inherit;
  transition:transform var(--duration-normal) var(--ease-entrance),
             border-color var(--duration-normal) var(--ease-entrance),
             box-shadow var(--duration-normal) var(--ease-entrance);
}
.blog__bag:hover{
  transform:translateY(-4px);border-color:var(--brand-500);
  box-shadow:0 8px 24px rgba(1,38,98,.08);
}
.blog__bag:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* Gorsel kartin ust kenarina dayaniyor; kartin overflow'u kosesini kirpiyor.
   width/height ve aspect-ratio birlikte: gec yuklenince hicbir sey oynamiyor. */
.blog__gorsel{display:block;background:var(--mint-100);overflow:hidden}
.blog__gorsel img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  transition:transform var(--duration-normal) var(--ease-entrance);
}
.blog__bag:hover .blog__gorsel img{transform:scale(1.04)}

.blog__govde{
  flex:1;display:flex;flex-direction:column;gap:0.625rem;
  padding:1.25rem 1.375rem 1.5rem;
}
.blog__tarih{font-size:var(--f13);color:var(--foreground-muted)}
.blog__baslik{
  margin:0;font-size:var(--f18);font-weight:600;line-height:1.35;
  color:var(--brand-500);
}
/* Ozet yazinin ilk cumlesi. Metne dokunmuyoruz, yalnizca gorunurde
   uc satira kirpiyoruz; tamami DOM'da kaliyor. */
.blog__ozet{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;margin:0;
  font-size:var(--f14);line-height:1.6;color:var(--foreground-subtle);
}
.blog__devam{
  margin-top:auto;padding-top:0.75rem;
  display:inline-flex;align-items:center;gap:0.625rem;
  font-size:var(--f14);font-weight:600;color:var(--brand-500);
}
.blog__ok{
  width:2rem;height:2rem;flex:none;border-radius:999px;
  border:1px solid var(--border-subtle);color:var(--brand-500);
  display:grid;place-items:center;
  transition:background-color var(--duration-normal) var(--ease-entrance),
             border-color var(--duration-normal) var(--ease-entrance),
             color var(--duration-normal) var(--ease-entrance),
             transform var(--duration-normal) var(--ease-entrance);
}
.blog__ok svg{width:0.625rem;height:0.625rem}
.blog__bag:hover .blog__ok{
  background:var(--ice-200);border-color:var(--ice-200);color:var(--brand-500);
  transform:translateX(3px);
}

/* Sayfada zaten bir ikincil (turuncu) buton var; kural 5 ikinciye izin
   vermiyor. Bu yuzden duz baglanti, turuncu yalnizca alt cizgide. */
.blog__tumu{margin-top:2rem}
.blog__tumu a{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:var(--f15);font-weight:600;color:var(--brand-500);
  text-decoration:none;padding-bottom:3px;
  border-bottom:2px solid transparent;
  transition:border-color var(--duration-fast) var(--ease-entrance);
}
.blog__tumu a:hover{border-bottom-color:var(--orange)}
.blog__tumu a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

@media (max-width:760px){
  .blog__govde{padding:1.125rem 1.25rem 1.375rem}
}
@media (prefers-reduced-motion:reduce){
  .blog__bag:hover{transform:none}
  .blog__bag:hover .blog__ok{transform:none}
  .blog__bag:hover .blog__gorsel img{transform:none}
}

/* ---- videolar: 3B ic bukey karusel --------------------------------------
   Referans tasarim tam sayfa bir sahneydi (fixed, body overflow:hidden).
   Burada akista duran normal bir bolum; sadece karusel mekanigi alindi.
   Tum donusumler transform, dongu oturunca duruyor.                        */
#videolar{
  position:relative;
  background:var(--surface-section);
  overflow:hidden;
}
.vid__head{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  margin-bottom:1.5rem;
}

/* Sahne: perspektif kabi ve surukleme yuzeyi */
.vid__sahne{
  position:relative;
  height:clamp(13rem,28vh,21rem);   /* JS gelince kart yuksekligine gore yeniden kuruluyor */
  perspective:1300px;perspective-origin:50% 50%;
  display:grid;place-items:center;
  cursor:grab;touch-action:pan-y;user-select:none;
  outline:none;
}
.vid__sahne.-suruk{cursor:grabbing}
.vid__sahne:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:8px}

/* Yayi yere baglayan yumusak golge */
.vid__zemin{
  position:absolute;left:50%;top:76%;width:60%;height:22%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%, rgba(1,38,98,.16), rgba(1,38,98,0) 70%);
  filter:blur(6px);
}
/* Arkadaki dev sira numarasi */
.vid__hayalet{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:var(--hayaletY,14rem);font-weight:400;line-height:.8;
  color:rgba(1,38,98,.09);letter-spacing:-.04em;
  pointer-events:none;user-select:none;font-variant-numeric:tabular-nums;
}

.vid__ring{
  position:relative;width:0;height:0;transform-style:preserve-3d;
  transform:translateZ(var(--itme,0px)) rotateY(var(--don,0deg));
}
.vkart{
  position:absolute;width:var(--kg,300px);height:var(--ky,186px);
  left:calc(var(--kg,300px) / -2);top:calc(var(--ky,186px) / -2);
  transform:rotateY(var(--a)) translateZ(calc(var(--yc,900px) * -1));
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
}
.vkart__ic{
  position:absolute;inset:0;border-radius:var(--corner-card);overflow:hidden;
  background:var(--brand-900);
  box-shadow:0 22px 50px -18px rgba(1,38,98,.42), 0 6px 16px -8px rgba(1,38,98,.32);
  transition:transform var(--duration-normal) var(--ease-entrance),
             box-shadow var(--duration-normal) var(--ease-entrance);
  will-change:transform;
}
/* Arka yarim hic cizilmiyor. backface-visibility tek basina yetmiyor:
   preserve-3d kabinda arkaya bakan kartlar aynalanmis olarak painting'e
   giriyor ve perspektif buyutmesiyle onu kapatiyor. */
.vkart.-arka{visibility:hidden}
.vkart__ic{opacity:.82;transition:opacity var(--duration-normal) var(--ease-entrance),
             box-shadow var(--duration-normal) var(--ease-entrance)}
.vkart.-on .vkart__ic{opacity:1;box-shadow:0 34px 76px -20px rgba(1,38,98,.5), 0 8px 22px -8px rgba(1,38,98,.4)}
.vkart__ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vkart__perde{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(1,20,45,.86) 0%, rgba(1,20,45,.30) 34%, rgba(1,20,45,0) 62%);
}
.vkart__no{
  position:absolute;top:0.75rem;left:0.875rem;z-index:2;
  font-size:var(--f11);font-weight:600;letter-spacing:.12em;
  color:rgba(255,255,255,.92);font-variant-numeric:tabular-nums;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.vkart__alt{position:absolute;left:0.875rem;right:0.875rem;bottom:0.75rem;z-index:2}
.vkart__baslik{
  margin:0;font-size:var(--f13);font-weight:600;line-height:1.25;
  color:var(--white);text-shadow:0 1px 10px rgba(0,0,0,.4);
}
/* Oynat dugmesi: on karta gelince buyuyor */
.vkart__oynat{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:2;
  width:3rem;height:3rem;border-radius:999px;
  background:var(--surface-glass-bar);color:var(--brand-500);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  display:grid;place-items:center;pointer-events:none;
  box-shadow:0 4px 14px rgba(1,38,98,.2);
  transition:transform var(--duration-normal) var(--ease-entrance);
}
.vkart__oynat svg{width:1rem;height:1rem;margin-left:2px}
.vkart.-on .vkart__oynat{transform:translate(-50%,-50%) scale(1.14)}
.vkart iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}

/* JS kapaliyken karusel yerine duz baglanti listesi */
.vid__duz{list-style:none;margin:0 auto;padding:0;max-width:42rem;display:grid;gap:0.5rem}
.vid__duz a{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:0.875rem 1.125rem;border:1px solid var(--border-subtle);border-radius:8px;
  background:var(--white);color:var(--brand-500);text-decoration:none;font-weight:600;
}
.vid__duz a:hover{border-color:var(--accent)}
.vid__duz span{font-weight:400;font-size:var(--f13);color:var(--foreground-subtle);flex:none}

/* ---- alt bilgi cubugu ---- */
.vid__dock{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
  margin-top:1.5rem;
}
.vid__sayac{font-variant-numeric:tabular-nums;font-size:var(--f13);color:var(--foreground-subtle)}
.vid__sayac b{font-size:var(--f28);font-weight:400;color:var(--brand-500)}
.vid__sayac i{font-style:normal}
.vid__orta{display:flex;flex-direction:column;align-items:center;gap:0.625rem;text-align:center;min-width:0}
.vid__baslik{
  margin:0;font-size:var(--f18);font-weight:600;line-height:1.25;color:var(--brand-500);
  max-width:34rem;
}
.vid__etiket{font-size:var(--f13);color:var(--foreground-subtle)}
.vid__noktalar{display:flex;align-items:center;gap:0.4375rem}
.vid__noktalar button{
  width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:var(--border-subtle);
  transition:width var(--duration-normal) var(--ease-entrance),
             background-color var(--duration-normal) var(--ease-entrance);
}
.vid__noktalar button.-on{width:24px;background:var(--orange)}
.vid__nav{display:flex;align-items:center;gap:0.625rem}
.vid__btn{
  width:2.75rem;height:2.75rem;border-radius:999px;
  border:1px solid var(--border-subtle);background:var(--surface-glass-bar);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  color:var(--brand-500);font-size:var(--f18);line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:background-color var(--duration-fast) var(--ease-entrance),
             color var(--duration-fast) var(--ease-entrance),
             transform var(--duration-fast) var(--ease-entrance);
}
.vid__btn:hover{background:var(--accent);color:var(--white);border-color:var(--accent)}
.vid__btn:active{transform:scale(.94)}

@media (max-width:760px){
  /* Dev sira numarasi dar ekranda kartlarin arkasindan tasip leke gibi
     duruyor; kuculuyor ve soluyor. */
  .vid__dock{gap:0.625rem}
  .vid__sayac i{display:none}
  .vid__sayac b{font-size:var(--f22)}
  .vid__baslik{font-size:var(--f15)}
}
@media (max-width:420px){
  .vid__noktalar{display:none}
}
@media (prefers-reduced-motion:reduce){
  .vkart__ic,.vkart__oynat,.vid__noktalar button{transition:none}
}

/* ---- footer -------------------------------------------------------------
   Lacivert kapanis: solda cagri ve iletisim, sagda hero'daki Hizli Randevu
   formunun aynisi. Form ayni siniflari kullaniyor, JS iki ornekte de
   calisiyor; buradaki fark yalnizca yerlesim ve renk.                      */
.site-footer{
  background:var(--brand-900);color:var(--white);
  border-radius:var(--corner-section) var(--corner-section) 0 0;
  padding:5rem 1.25rem 2rem;
  display:flex;flex-direction:column;gap:4rem;
}
@media (min-width:768px){.site-footer{padding-inline:2.5rem}}
.site-footer .eyebrow{color:var(--ice-200)}
.site-footer .display{color:var(--white)}
.site-footer a{color:inherit;text-decoration:none}

.footer__ust{display:grid;gap:3rem}
/* Form kart oldugu icin ust hizada duruyor; sol bolge onu gecebilir. */
/* Kart sol bolgenin boyuna uzuyor; alanlar kartin icine dagiliyor.
   align-self:start birakilinca kartin altinda buyuk bir bosluk kaliyordu. */
/* Sag sutun: ustte baslik blogu, altinda form karti. */
.footer__sag{display:flex;flex-direction:column;gap:1.75rem}
.footer__giris{display:flex;flex-direction:column;gap:1rem}
.footer__sag .quick--footer{flex:none}
/* Ust bant uc sutun: cagri | adres | form. Ortadaki sutun, onceki iki
   sutunlu duzende cagri ile form arasinda kalan olu boslugu dolduruyor. */
@media (min-width:1024px){
  .footer__ust{grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:4rem}
}
.footer__cagri{display:flex;flex-direction:column;gap:2.5rem}
@media (min-width:1024px){.footer__cagri .footer__marka{margin-top:auto}}
/* Dar ekranda logo footer'in en ustune aliniyor; masaustunde sol sutunun
   altinda kaliyor (onaylanan tasarim). */
@media (max-width:1023px){.footer__cagri .footer__marka{order:-1}}
.footer__lead{max-width:34ch}
/* Telefon ve Adres her genislikte yan yana. Dar ekranda sutun ~165px
   kaliyor; telefon 1.75rem'de tasiyordu, punto kuculuyor. */
.footer__bilgi{display:grid;gap:2rem 1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
/* Bu blok stil sayfasinda .footer__tel'den ONCE geliyor; ayni ozgullukte
   kalirsa eziliyor. Secicilere .site-footer ekleniyor.
   Puntolar olculdu: "0212 422 48 48" 360px'te 18px'e, 390px ve ustunde
   20px'e siginca sutuna tam oturuyor. E-posta 21 karakter, dar sutuna
   sigmiyor: "@" sonrasinda <wbr> var, oradan iki satira iner; anywhere yalniz
   son care (kelime ortasindan bolunmesin, 13.09.2026). */
@media (max-width:619px){
  .site-footer .footer__tel{font-size:clamp(1.125rem,5vw,1.25rem);white-space:nowrap}
  .site-footer .footer__kanal a,.site-footer .footer__adres{font-size:var(--f13)}
  .site-footer .footer__kanal a{overflow-wrap:anywhere}
  .site-footer .footer__wa{gap:0.375rem}
}
@media (min-width:1024px){.footer__bilgi{padding-top:0.5rem}}
/* Aralik sart: .footer__tel 1.75rem ve kendi satir yuksekligiyle
   altindaki kanal listesinin ustune biniyordu. */
.footer__kanallar,.footer__iletisim{display:flex;flex-direction:column;gap:0.5rem}
.footer__kanallar .footer__tel{margin-top:0;line-height:1.2}
.footer__lead{font-size:var(--f15);line-height:1.6;color:rgba(255,255,255,.72);max-width:34ch}
.footer__tel{
  font-size:var(--f28);font-weight:600;letter-spacing:-.01em;
  align-self:flex-start;padding-bottom:2px;
  border-bottom:2px solid transparent;
  transition:border-color var(--duration-fast) var(--ease-entrance);
}
.footer__tel:hover{border-bottom-color:var(--orange)}
.footer__kanal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.375rem}
.footer__kanal a{
  font-size:var(--f15);color:rgba(255,255,255,.72);
  transition:color var(--duration-fast) var(--ease-entrance);
}
.footer__kanal a:hover{color:var(--ice-200)}

/* ---- alt bilgi sutunlari ---- */
/* Dar ekranda iki sutun. DOM sirasi Kurumsal, Hizmetlerimiz, Kutuphane,
   Tetkikler; 1024 altinda order ile kisa sutunlar ust siraya, 16 satirlik
   Hizmetlerimiz alt siraya aliniyor. Boylece ust sirada bosluk kalmiyor.
   min-width:0 sart: uzun basliklar tasmak yerine alt satira iniyor. */
.footer__sutunlar{display:grid;gap:2rem 1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.footer__sutun{min-width:0}
.footer__sutun a{overflow-wrap:break-word}
@media (max-width:1023px){
  .footer__sutun:nth-child(1){order:1}
  .footer__sutun:nth-child(4){order:2}
  .footer__sutun:nth-child(2){order:3}
  .footer__sutun:nth-child(3){order:4}
}
/* Dar bolgede dort sutun: Hizmetlerimiz tek sutuna iniyor ve 16 satiriyla
   sol tarafi formun boyuna cikariyor. */
@media (min-width:1024px){
  .footer__sutunlar{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
}
/* Ozgulluk: asagidaki .footer__sutun ul{display:flex} ayni ozgullukte ve
   daha altta; ezmemesi icin sutun kabini de secime katiyoruz. */
/* 560-1023 arasi iki alt sutun; 1024 ustunde tek sutun kaliyor ve
   16 satiriyla sol bolgeyi formun boyuna tasiyor. */
@media (min-width:768px) and (max-width:1023px){
  .footer__sutunlar .footer__sutun--genis ul{
    display:block;columns:2;column-gap:1.5rem;
  }
  .footer__sutunlar .footer__sutun--genis li{
    break-inside:avoid;margin-bottom:0.625rem;
  }
}
.footer__sutunbas{
  margin:0 0 1rem;font-size:var(--f13);font-weight:600;letter-spacing:.08em;
  color:var(--ice-200);
}
.footer__sutun ul,.footer__sosyal{list-style:none;margin:0;padding:0}
.footer__sutun ul{display:flex;flex-direction:column;gap:0.625rem}
/* Telefonda yazi buyudu (yazi olcegi, 13.09.2026): iki satira dusen baglanti bir sonrakine
   yapisik gorunuyordu. Ogeler arasi bosluk, satir araligindan belirgin sekilde buyuk. */
@media (max-width:1023px){.footer__sutun ul{gap:0.9375rem}.footer__sutun a{line-height:1.3}}
.footer__sutun a{
  font-size:var(--f15);color:rgba(255,255,255,.78);
  border-bottom:1px solid transparent;
  transition:color var(--duration-fast) var(--ease-entrance),
             border-color var(--duration-fast) var(--ease-entrance);
}
.footer__sutun a:hover{color:var(--white);border-bottom-color:var(--orange)}

.footer__adres{font-style:normal;font-size:var(--f15);line-height:1.7;color:rgba(255,255,255,.78)}
.footer__sosyal{display:flex;gap:0.625rem;margin-top:1.25rem}
.footer__sosyal a{
  width:2.75rem;height:2.75rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  display:grid;place-items:center;
  transition:background-color var(--duration-fast) var(--ease-entrance),
             border-color var(--duration-fast) var(--ease-entrance),
             color var(--duration-fast) var(--ease-entrance);
}
.footer__sosyal svg{width:1.125rem;height:1.125rem}
.footer__sosyal a:hover{background:var(--ice-200);border-color:var(--ice-200);color:var(--brand-900)}

.footer__wa{display:inline-flex;align-items:center;gap:0.5rem}
.footer__wa svg{width:1.125rem;height:1.125rem;flex:none}

/* ---- yasal satir ---- */
.footer__alt{
  border-top:1px solid rgba(255,255,255,.16);padding-top:2rem;
  display:flex;flex-direction:column;gap:1.25rem;
}
.footer__marka{display:flex}
/* width/height oranla birlikte yaziliyor: SVG gec gelse de yer oynamiyor. */
.footer__logo{width:16rem;height:auto;display:block}
@media (max-width:760px){.footer__logo{width:11rem}}
.footer__yasal{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;justify-content:space-between}
.footer__yasal ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1.25rem}
.footer__yasal a{
  font-size:var(--f13);color:rgba(255,255,255,.62);
  border-bottom:1px solid transparent;
  transition:color var(--duration-fast) var(--ease-entrance),
             border-color var(--duration-fast) var(--ease-entrance);
}
.footer__yasal a:hover{color:var(--white);border-bottom-color:var(--orange)}
/* Ajans satiri: yasal baglantilarla telif arasinda, ayni tonda. Sirali kutu
   `justify-content:space-between` ile dagiliyor, ortada duruyor. */
.footer__ajans,
.footer__hak{font-size:var(--f13);color:rgba(255,255,255,.62)}
.site-footer a:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}

/* Footer goruse girince sticky menu yukari cekiliyor: alt bilgide zaten
   form, telefon ve butun baglantilar var, serit ekrani kapatiyordu.
   Temel kuraldaki transform gecisi korunuyor, opacity ekleniyor. */
.site-header{
  transition:transform 380ms var(--ease-entrance), opacity 300ms var(--ease-entrance);
}
.site-header.is-gizli{transform:translate3d(0,-140%,0);opacity:0;pointer-events:none}

/* ---- footer'daki form: lacivert zeminde, dikey yerlesim ----------------
   Hero'daki yatay cubuk burada iki sutuna dagiliyor; ayni isaretleme,
   yalnizca yerlesim ve renk degisiyor.                                    */
.quick--footer{
  /* Hero'daki .quick masaustunde position:absolute; footer ornegini
     akisa geri aliyoruz, yoksa hero kutusuna gore konumlaniyor. */
  position:static;inset:auto;z-index:auto;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--corner-card);
  padding:1.75rem;
}
/* Alanlar alt alta, tek sutun. */
.quick--footer .quick__bar{
  display:grid;gap:1.25rem;grid-template-columns:1fr;
  background:none;border:0;border-radius:0;padding:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.quick--footer .quick__sep{display:none}
.quick--footer .quick__field{padding:0;min-width:0}
.quick--footer .quick__label{color:rgba(255,255,255,.72)}
.quick--footer .quick__req{color:var(--orange)}
/* checkbox disarida: width:100% onay kutusunu satir boyu sisiriyordu */
.quick--footer input:not([type="checkbox"]),
.quick--footer .qsel__btn{
  color:var(--white);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--corner-panel);
  padding:0.75rem 0.875rem;width:100%;
}
.quick--footer input:not([type="checkbox"])::placeholder{color:rgba(255,255,255,.40)}
.quick--footer input:not([type="checkbox"]):focus,
.quick--footer .qsel__btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.quick--footer .quick__prefix{color:rgba(255,255,255,.72)}
.quick--footer .quick__telrow{position:relative;display:flex;align-items:center;gap:0.375rem}
.quick--footer .qsel__value{color:var(--white)}
.quick--footer .quick__gonder{
  display:flex;flex-direction:column;gap:1rem;align-items:stretch;
  margin-top:0.25rem;
}
/* Temel kuralda align-self:center var, esnek sutunda dugmeyi ortalayip
   alanlarin hizasindan kaydiriyordu. Hucreyi doldurunca sag sutun da
   soldaki gibi uc esit blok oluyor. */
.quick--footer .quick__submit{align-self:stretch;width:100%}
.quick--footer .quick__foot{margin-top:0;padding-inline:0}
.quick--footer .quick__consent{color:rgba(255,255,255,.72)}
.quick--footer .quick__consent a{color:var(--white);text-decoration:underline}
.quick--footer .quick__box{border-color:rgba(255,255,255,.35)}
.quick--footer .quick__done{color:var(--white)}
.quick--footer .quick__done-text a{color:var(--ice-200)}

/* Hero, perde kalkana kadar gorunmez durur. ":not(.is-in)" sart: giris
   animasyonu bitince motor satir ici stilleri siliyor, bu kural kayitsiz
   kalsaydi oge o anda yeniden yok oluyordu. */
[data-hero]:not(.is-in){opacity:0}
.trail__card{opacity:0}

/* ===== ALT SAYFALAR (baslangic) ===== */
/* KAP GENISLIKLERI REM ILE YAZILIR, PX DEGIL. Kok yazi 1024px ustunde 1.111vw
   (1440'ta 16px, 1920'de 21.3px); anasayfa 1440 tasarimini her ekrana orantili
   olcekliyor. 1200px sabit kap, 1920'de buyuyen yaziyi sikistiriyordu.
   75rem = 1440'ta 1200px. */

/* Alt sayfalarin ortak olculeri. Header sabit: ust serit + 1rem bosluk +
   3.375rem panel. Sayfa basi bunun altindan basliyor. */
:root{
  --kust:calc(var(--serit-h) + 4.375rem);
  /* Ikincil metin. --foreground-subtle beyaz uzerinde 3.6:1'de kaliyor,
     kucuk puntoda AA'yi gecmiyor; CLAUDE.md 5'teki --text-muted degeri
     beyazda 5.4:1, camgobegi panelde 5.0:1. Alt sayfalarda bu kullanilir. */
  --k-muted:#5a6b85;
}
/* Telefon ve tablette header paneli 3.875rem (logo buyudu, 13.09.2026): sayfa basi onun altindan. */
@media (max-width:1023px){:root{--kust:calc(var(--serit-h) + 4.875rem)}}
/* Header'daki "Randevu Al": oktan genis takvim simgesi, 14px'te okunmuyordu. .site-header
   tiklamayi kapatiyor (pointer-events:none), paneller .hpanel ile geri aciyor; dugme .hpanel
   olmadigi icin fareyle hic tiklanamiyordu. */
.header-cta{pointer-events:auto}
/* Kullanici istegiyle kucultuldu: panellerden alcak, satirda dikey ortali. */
@media (min-width:1024px){
  .header-cta{height:2.875rem;padding:0 0.1875rem 0 1.375rem;font-size:var(--f14);align-self:center}
  .header-cta .btn__disc{width:2.25rem;height:2.25rem}
  .header-cta .btn__disc svg{width:1rem;height:1rem}

  /* Parilti (kullanici istegi: mobil alt cubuktaki "Ara" dugmesiyle ayni): cercevede donen
     camgobegi isik. Dugme hap bicimli; halkayi dondurmek dugmeyi de dondururdu. Bunun yerine
     dugmenin icinde, arkada donen genis bir kare konik gecis (::before) var; 2px iceride duran
     lacivert yuzey (::after) onu ortuyor, yalniz kenardaki ince serit gorunur. Dugme tasani
     kirpar (odak halkasi kirpilmaz). Yalniz transform animasyonu (CLAUDE.md 3.2), CSS ile;
     hareket azaltmada durur. Kare, dondukce hap koselerini ortecek buyuklukte (%130). */
  .header-cta{position:relative;isolation:isolate;overflow:hidden;border:0;
    box-shadow:0 0 14px 1px rgba(110,210,242,.5)}
  .header-cta::before{content:"";position:absolute;z-index:-2;left:50%;top:50%;
    width:130%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
    background:conic-gradient(from 0deg,rgba(110,210,242,0) 0deg,rgba(110,210,242,0) 180deg,
      rgba(110,210,242,.9) 280deg,#fff 320deg,rgba(110,210,242,.9) 345deg,rgba(110,210,242,0) 360deg);
    animation:cta-don 2.6s linear infinite}
  .header-cta::after{content:"";position:absolute;z-index:-1;inset:2px;border-radius:inherit;
    background:var(--action-primary);pointer-events:none;
    transition:background-color var(--duration-fast) var(--ease-entrance)}
  .header-cta:hover::after{background:var(--action-primary-border)}
}
@keyframes cta-don{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){
  .header-cta::before{animation:none}
}

/* ===================== MEGA MENÜ (mega-*) =====================
   Masaustu menude Kurumsal, Goz Hastaliklari, Doktorlarimiz, Saglik Kutuphanesi icin panel
   (main.js megaMenu kurar). Panel menu kutusunun (.site-nav) icinde ve onunla ayni genislikte
   (kullanici istegi); sol tanitim alani kaldirildi. Menunun kendi kurallari (.site-nav ul/a)
   panelin icine de isliyor; asagida panel icin geri aliniyor. Gecis yalniz opacity + transform. */
@media (min-width:1024px){
  .site-nav ul{gap:1.375rem}
  .site-nav li.nav-mega{display:flex;align-items:center;gap:0.125rem}
  .nav-ok{display:inline-grid;place-items:center;width:1.125rem;height:1.5rem;padding:0;border:0;
    border-radius:0.25rem;background:none;color:var(--k-muted);cursor:pointer}
  .nav-ok::before{content:"";width:0.375rem;height:0.375rem;border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;transform:translateY(-0.125rem) rotate(45deg);
    transition:transform var(--duration-fast) var(--ease-entrance)}
  .nav-ok[aria-expanded="true"]{color:var(--accent)}
  .nav-ok[aria-expanded="true"]::before{transform:translateY(0.125rem) rotate(225deg)}
  .nav-ok:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

  .site-nav > .mega{position:absolute;z-index:2;top:calc(100% + 0.75rem);left:0;right:0;
    max-height:calc(100vh - var(--serit-h) - 6rem);overflow:auto;display:flex;flex-direction:column;
    pointer-events:auto;background:var(--white);border-radius:var(--corner-card);
    box-shadow:0 8px 24px rgba(1,38,98,.08),0 0 0 1px var(--border-subtle);
    opacity:0;visibility:hidden;transform:translate3d(0,-0.5rem,0);
    transition:opacity var(--duration-normal) var(--ease-entrance),
               transform var(--duration-normal) var(--ease-entrance),visibility 0s linear var(--duration-normal)}
  .site-nav > .mega.is-open{opacity:1;visibility:visible;transform:none;
    transition:opacity var(--duration-normal) var(--ease-entrance),transform var(--duration-normal) var(--ease-entrance)}
  .site-nav .mega a{font-size:inherit;white-space:normal}
  /* Sabit (is-stuck) durumda buzlu serit header'in 1rem altina uzaniyor; panel seridin
     ustune binmesin, altinda 0.75rem bosluk kalsin. */
  .site-header.is-stuck .site-nav > .mega{top:calc(100% + 1.75rem);max-height:calc(100vh - var(--serit-h) - 7rem)}

  .mega__ic{display:flex;flex-direction:column;gap:1rem;padding:1.25rem 1.5rem}
  .mega__ara{display:flex;align-items:center;gap:0.75rem;height:2.625rem;padding:0 1rem;
    background:var(--surface-section);border:1px solid var(--border-subtle);border-radius:var(--corner-panel)}
  .mega__ara:focus-within{outline:2px solid var(--orange);outline-offset:2px}
  .mega__ara svg{flex:none;width:1rem;height:1rem;color:var(--brand-500)}
  .mega__ara input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;
    font:inherit;font-size:var(--f13);color:var(--foreground)}
  .mega__ust{display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .mega__bas{font-size:var(--f15);font-weight:600;color:var(--accent)}
  .site-nav .mega .mega__tumu{font-size:var(--f13);font-weight:600;color:var(--accent)}
  .mega__tumu:hover{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:4px}
  .site-nav .mega__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.625rem;
    list-style:none;padding:0;margin:0}
  .site-nav .mega__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mega__grid li{display:flex}
  .mega__oge{flex:1;display:flex;align-items:center;gap:0.75rem;min-width:0;min-height:3.75rem;
    padding:0.625rem 0.75rem;background:var(--white);border:1px solid var(--border-subtle);
    border-radius:var(--corner-panel);color:inherit;
    transition:border-color var(--duration-fast) var(--ease-entrance)}
  .mega__oge:hover{border-color:var(--accent)}
  .mega__oge:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
  .mega__oge::after{content:"›";flex:none;margin-left:auto;font-size:var(--f16);line-height:1;color:var(--k-muted)}
  .mega__oge--duz{min-height:2.75rem}
  .mega__gorsel{flex:none;width:2.5rem;height:2.5rem;border-radius:0.5rem;object-fit:cover;background:var(--mint-100)}
  .mega__simge{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:0.5rem;
    background:var(--mint-100);color:var(--brand-500)}
  .mega__simge svg{width:1.125rem;height:1.125rem}
  .mega__metin{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.3125rem}
  .mega__ad{font-size:var(--f13);font-weight:600;line-height:1.3;color:var(--accent)}
  .mega__alt{font-size:var(--f11);line-height:1.35;color:var(--k-muted)}
  .mega__serit{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:0.875rem 1.5rem;background:var(--surface-section);border-top:1px solid var(--border-subtle)}
  .mega__serit-bas{margin-bottom:0.5rem;font-size:var(--f14);font-weight:600;color:var(--accent)}
  .mega__serit p:not(.mega__serit-bas){font-size:var(--f12);color:var(--k-muted)}
  .site-nav .mega .btn.mega__randevu{flex:none;height:2.5rem;padding-inline:1.25rem;font-size:var(--f13);
    white-space:nowrap;color:var(--action-primary-foreground)}
}
@media (prefers-reduced-motion:reduce){
  .site-nav > .mega,.site-nav > .mega.is-open{transition:none;transform:none}
  .nav-ok::before{transition:none}
}

/* Sayfa ici baglantilar sabit header'in altina girmesin. */
#hakkimizda,#alanlar,#ilkeler,#belgeler,#hekimler,
#misyon,#vizyon,#degerler,#hizmet,#gorusme,#devami{scroll-margin-top:calc(var(--kust) + 1rem)}

/* Ustteki etiket (eyebrow) ile baslik arasi 1rem: 0.5rem'de text-box kirpmasiyla
   ikisi birbirine yapisik duruyordu. */
.kbaslik{font-size:var(--f28);font-weight:400;line-height:1.12;color:var(--accent);
  max-width:22ch;margin:1rem 0 1.5rem}
@media (min-width:768px){.kbaslik{font-size:var(--f36)}}

/* ---- kirinti (breadcrumb) ---------------------------------------------- */
.kirinti ol{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;list-style:none;
  font-size:var(--f13);color:var(--k-muted)}
.kirinti li+li::before{content:"/";margin-right:0.5rem;color:var(--border-subtle)}
.kirinti a{color:var(--k-muted)}
.kirinti a:hover{color:var(--accent);text-decoration:underline;
  text-decoration-color:var(--orange);text-underline-offset:3px}
.kirinti [aria-current]{color:var(--accent)}

/* Tarayicinin ol icin verdigi 40px sol boslugu. Site sifirlamasi yalnizca
   ul'yi kapsiyor; bu listeler basligin 40px saginda basliyordu. */
.kirinti ol,.kalan__grid,.kilke__deger,.stur__grid,.kys-akis,.kys-std__kart ol{padding-inline-start:0}

/* ---- sayfa basi -------------------------------------------------------- */
.kbas{
  position:relative;background:var(--surface-section);
  border-radius:0 0 var(--corner-section) var(--corner-section);
  padding:calc(var(--kust) + 1.5rem) 1.25rem 2.5rem;
}
@media (min-width:768px){.kbas{padding-inline:2.5rem}}
@media (min-width:1024px){
  .kbas{padding-block:calc(var(--kust) + 2.5rem) 4rem}
}
.kbas__grid{max-width:75rem;margin-inline:auto;display:grid;gap:2rem}
@media (min-width:1024px){
  .kbas__grid{grid-template-columns:minmax(0,1fr) minmax(0,24rem);
    align-items:center;gap:3.5rem}
}
/* Kirinti, baslik ve giris arasi text-box kirpmasiyla sikisik duruyordu; 1.25rem. */
.kbas__h1{font-size:var(--f36);font-weight:400;line-height:1.1;color:var(--accent);
  margin:1.25rem 0 1.25rem}
@media (min-width:768px){.kbas__h1{font-size:var(--f48)}}
.kbas__lead{font-size:var(--f17);line-height:1.7;color:var(--foreground);max-width:46ch}
.kbas__lead a{color:var(--accent);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--ice-400);text-underline-offset:4px}
.kbas__lead a:hover{text-decoration-color:var(--orange)}

.kbas__cip{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.5rem}
/* text-box kirpmasi li kutusunu cap yuksekligine indiriyor; hap tasmasin
   diye li'yi flex yapiyoruz, boyunu cocugundan alsin. */
.kbas__cip li{display:flex}
.kbas__cip a{
  display:inline-flex;align-items:center;min-height:2.375rem;padding:0 1rem;
  border-radius:var(--corner-chip);background:var(--white);
  border:1px solid var(--border-subtle);
  font-size:var(--f14);color:var(--accent);
  transition:background-color var(--duration-fast) var(--ease-entrance),
             border-color var(--duration-fast) var(--ease-entrance);
}
.kbas__cip a:hover{background:var(--accent);border-color:var(--accent);color:var(--white)}

.kbas__veri{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 1.5rem;margin-top:2rem;max-width:30rem}
@media (min-width:768px){.kbas__veri{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kbas__veri div{border-top:2px solid var(--orange);padding-top:0.625rem}
.kbas__veri dt{font-size:var(--f11);line-height:1.35;letter-spacing:.06em;
  text-transform:uppercase;color:var(--k-muted);order:2;margin-top:0.25rem}
.kbas__veri div{display:flex;flex-direction:column}
.kbas__veri dd{font-size:var(--f24);font-weight:600;color:var(--accent);order:1}

/* Foto seridi: dekor. Uc kare hafif kaydirilmis duruyor, sadece transform
   kullaniliyor (kural 3.2). Dar ekranda yan yana tek satir. */
.kbas__foto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.5rem}
.kbas__foto img{width:100%;height:100%;object-fit:cover;border-radius:var(--corner-panel);
  aspect-ratio:3/4;display:block}
@media (min-width:1024px){
  .kbas__foto{gap:0.75rem}
  .kbas__foto img:nth-child(1){transform:translateY(1.5rem)}
  .kbas__foto img:nth-child(3){transform:translateY(-1.5rem)}
}

/* ---- hakkimizda -------------------------------------------------------- */
.kabout{padding-top:3.5rem}
.kabout__ic{max-width:75rem;margin-inline:auto;display:grid;gap:2rem}
@media (min-width:1024px){
  .kabout__ic{grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:4rem;align-items:start}
}
.kabout__metin p{font-size:var(--f16);line-height:1.65;color:var(--foreground);
  max-width:68ch;margin-bottom:1rem}
.kabout__eylem{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:1.5rem}

.kabout__gorsel{position:relative;border-radius:var(--corner-card);overflow:hidden}
.kabout__gorsel img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover}
.kabout__gorsel figcaption{
  position:absolute;left:1rem;right:1rem;bottom:1rem;padding:0.875rem 1rem;
  border-radius:var(--corner-panel);background:var(--surface-glass-strong);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  display:flex;flex-direction:column;gap:0.25rem;
}
.kabout__yer{font-size:var(--f13);line-height:1.4;color:var(--k-muted)}
.kabout__ilce{font-size:var(--f15);font-weight:600;color:var(--accent)}

/* ---- calisma alanlari --------------------------------------------------- */
.kalan{padding-top:3.5rem}
.kalan__bas,.kalan__grid,.kalan__tum{max-width:75rem;margin-inline:auto}
.kalan__grid{display:grid;gap:1rem;margin-top:1.5rem;list-style:none}
@media (min-width:600px){.kalan__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.kalan__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kalan__kart{
  background:var(--surface-section);border-radius:var(--corner-card);
  padding:1.5rem 1.5rem 1.75rem;
}
.kalan__no{display:block;font-size:var(--f32);font-weight:700;line-height:1;color:var(--orange)}
.kalan__kart h3{font-size:var(--f20);font-weight:600;color:var(--accent);margin:0.75rem 0 0.875rem}
.kalan__kart ul{display:flex;flex-direction:column;gap:0.5rem}
.kalan__kart li a{
  display:block;font-size:var(--f15);line-height:1.45;color:var(--foreground);
  padding-block:0.25rem;
}
.kalan__kart li a:hover{color:var(--accent);text-decoration:underline;
  text-decoration-color:var(--orange);text-underline-offset:3px}
.kalan__tum{margin-top:1.5rem;font-size:var(--f15)}
.kalan__tum a{color:var(--accent);text-decoration:underline;
  text-decoration-color:var(--border-subtle);text-underline-offset:4px}
.kalan__tum a:hover{text-decoration-color:var(--orange)}

/* ---- ilkeler: lacivert bant --------------------------------------------- */
.kilke{
  background:var(--brand-500);color:var(--white);
  border-radius:var(--corner-section);
  margin:3.5rem 1.25rem 0;padding:3.5rem 1.5rem;
}
@media (min-width:768px){.kilke{margin-inline:2.5rem;padding:5rem 3rem}}
@media (min-width:1024px){.kilke{margin-inline:auto;max-width:75rem}}
.kilke__ic{max-width:65rem;margin-inline:auto}
.kilke__etiket{color:var(--ice-200)}
.kilke__ikili{display:grid;gap:1rem;margin-top:1.5rem}
@media (min-width:768px){.kilke__ikili{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}}
.kilke__kart{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--corner-card);padding:1.75rem;
}
.kilke__kart h2{font-size:var(--f22);font-weight:600;margin-bottom:0.875rem}
.kilke__kart h2::after{content:"";display:block;width:2.5rem;height:2px;
  background:var(--ice-200);margin-top:0.625rem}
.kilke__kart p{font-size:var(--f15);line-height:1.65;color:rgba(255,255,255,.82);
  margin-bottom:0.75rem;max-width:60ch}
.kilke__kart p:last-child{margin-bottom:0}

/* Lacivert banttan kendi sayfasina giden baglanti. Turuncu lacivert uzerinde
   3:1'i gecmiyor, o yuzden yazi beyaz, alt cizgi camgobegi. */
.kilke__bag{
  /* block seviyesinde flex: inline olsaydi text-box kirpmasi satir kutusunu
     daraltip baglantiyi ust satirin uzerine bindiriyordu. */
  display:flex;width:fit-content;align-items:center;gap:0.5rem;margin-top:1rem;
  font-size:var(--f15);font-weight:600;color:var(--white);
  text-decoration:underline;text-decoration-color:var(--ice-200);
  text-underline-offset:4px;
}
.kilke__bag::after{content:"";width:0.4375rem;height:0.4375rem;
  border-right:2px solid var(--ice-200);border-top:2px solid var(--ice-200);
  transform:rotate(45deg)}
.kilke__bag:hover{text-decoration-thickness:2px}

.kilke__deger-bas{font-size:var(--f28);font-weight:400;margin-top:3rem}
.kilke__deger-giris{font-size:var(--f15);line-height:1.6;color:rgba(255,255,255,.72);
  margin-top:0.5rem;max-width:60ch}
.kilke__deger{display:grid;gap:1.5rem 2rem;margin-top:2rem;counter-reset:d;list-style:none}
@media (min-width:600px){.kilke__deger{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.kilke__deger{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kilke__deger li{counter-increment:d;padding-top:1rem;border-top:1px solid rgba(255,255,255,.18)}
.kilke__deger li::before{
  content:"0" counter(d);display:block;font-size:var(--f13);font-weight:600;
  letter-spacing:.08em;color:var(--ice-200);margin-bottom:0.5rem;
}
.kilke__deger :is(h2,h3){font-size:var(--f17);font-weight:600;margin-bottom:0.625rem}
.kilke__deger p{font-size:var(--f15);line-height:1.6;color:rgba(255,255,255,.78)}

/* ---- belgeler + saglik turizmi ------------------------------------------ */
.kbelge{padding-top:3.5rem}
.kbelge__ic{max-width:75rem;margin-inline:auto;display:grid;gap:2rem}
@media (min-width:1024px){
  .kbelge__ic{grid-template-columns:minmax(0,1fr) minmax(0,23rem);gap:3rem;align-items:start}
}
.kbelge__liste{margin-top:0.5rem}
.kbelge__liste li{border-top:1px solid var(--border-subtle)}
.kbelge__liste li:last-child{border-bottom:1px solid var(--border-subtle)}
.kbelge__liste a{
  display:flex;flex-direction:column;gap:0.25rem;padding:1rem 2rem 1rem 0;
  position:relative;
  transition:padding-left var(--duration-normal) var(--ease-entrance);
}
.kbelge__liste a::after{
  content:"";position:absolute;right:0.5rem;top:50%;width:0.5rem;height:0.5rem;
  border-right:2px solid var(--orange);border-top:2px solid var(--orange);
  transform:translateY(-50%) rotate(45deg);
}
.kbelge__ad{font-size:var(--f17);font-weight:600;color:var(--accent)}
.kbelge__not{font-size:var(--f14);line-height:1.45;color:var(--k-muted)}
.kbelge__liste a:hover .kbelge__ad{text-decoration:underline;
  text-decoration-color:var(--orange);text-underline-offset:4px}

.kturizm{background:#eaf8fe;border-radius:var(--corner-card);padding:1.75rem}
@media (min-width:768px){.kturizm{padding:2.25rem}}
.kturizm__bas{font-size:var(--f22);font-weight:600;color:var(--accent);margin:0.5rem 0 0.875rem}
.kturizm__giris,.kturizm__not{font-size:var(--f15);line-height:1.6;color:var(--foreground)}
.kturizm__liste{margin:1rem 0;display:flex;flex-direction:column;gap:0.625rem}
.kturizm__liste li{position:relative;padding-left:1.25rem;font-size:var(--f15);
  line-height:1.5;color:var(--foreground)}
.kturizm__liste li::before{content:"";position:absolute;left:0;top:0.125rem;
  width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--accent)}
.kturizm__not{color:var(--k-muted);margin-bottom:1.25rem}

/* ---- hekimler ----------------------------------------------------------- */
.khekim{padding-top:3.5rem;padding-bottom:4rem}
.khekim__bas,.khekim__grid{max-width:75rem;margin-inline:auto}
/* Uc hekim: flex + ortalama (eksik son satir ortada kalir, CLAUDE.md 1). Kart olculeri
   eskisiyle ayni: telefonda yarim, tablette ucte bir, masaustunde dortte bir genislik;
   masaustunde uc kart ortalanir, portreler buyumez. */
.khekim__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1.5rem}
.khekim__kart{position:relative;border-radius:var(--corner-card);overflow:hidden;
  flex:0 0 calc((100% - 1rem) / 2)}
@media (min-width:768px){.khekim__kart{flex-basis:calc((100% - 2rem) / 3)}}
@media (min-width:1024px){
  .khekim__grid{gap:1.25rem}
  .khekim__kart{flex-basis:calc((100% - 3.75rem) / 4)}
}
.khekim__kart img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover}
.khekim__plaka{
  position:absolute;left:0.625rem;right:0.625rem;bottom:0.625rem;
  padding:0.75rem 0.625rem;border-radius:var(--corner-panel);
  background:var(--surface-glass-strong);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  display:flex;flex-direction:column;align-items:center;gap:0.125rem;text-align:center;
}
@media (min-width:1024px){.khekim__plaka{left:1rem;right:1rem;bottom:1rem}}
.khekim__ad{font-size:var(--f14);font-weight:600;color:var(--accent);line-height:1.3}
.khekim__unvan{font-size:var(--f12);color:var(--k-muted);line-height:1.3}
/* Kartin tamami hekimin profil sayfasina baglanir (kullanici istegi). */
.khekim__bag{display:block;color:inherit;text-decoration:none}
.khekim__bag:focus-visible{outline-offset:-3px}
.khekim__bag:hover .khekim__ad{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}

/* ---- header: bulundugumuz sayfa ----------------------------------------- */
.site-nav .is-current{color:var(--accent);font-weight:600;position:relative}
.site-nav .is-current::after{content:"";position:absolute;left:0;right:0;bottom:-0.5rem;
  height:2px;background:var(--orange);border-radius:2px}
.mm__grid a[aria-current]{outline:2px solid var(--orange);outline-offset:-2px}

/* ========================================================================
   MISYONUMUZ  (/misyonumuz/)
   ===================================================================== */
/* Yalnizca basligin durdugu sayfa basi: foto sutunu yok, metin tek sutun. */
.kbas--sade{padding-bottom:2rem}
@media (min-width:1024px){.kbas--sade{padding-block:calc(var(--kust) + 2.5rem) 3rem}}
.kbas--sade .kbas__grid{grid-template-columns:minmax(0,1fr)}

/* Misyon cumlesi lacivert bantta durur; sayfanin tek vurgusu odur. */
.msoz{
  background:var(--brand-500);color:var(--white);
  border-radius:var(--corner-section);
  margin:2.5rem 1.25rem 0;padding:3rem 1.5rem;
}
@media (min-width:768px){.msoz{margin-inline:2.5rem;padding:4.5rem 3rem}}
@media (min-width:1024px){.msoz{margin-inline:auto;max-width:75rem}}
.msoz__ic{max-width:52rem;margin-inline:auto}
.msoz__cumle{font-size:var(--f26);font-weight:400;line-height:1.25;
  text-wrap:balance;max-width:24ch}
@media (min-width:768px){.msoz__cumle{font-size:var(--f40)}}
/* Uzun cumle: ayni bantta ama bir kademe kucuk, satir sayisi kontrolden cikmasin. */
.msoz__cumle--uzun{max-width:30ch}
@media (min-width:768px){.msoz__cumle--uzun{font-size:var(--f32)}}
.msoz__cumle::after{content:"";display:block;width:3.5rem;height:2px;
  background:var(--ice-200);margin-top:1.5rem}
.msoz__metin{margin-top:1.75rem;display:grid;gap:1rem;max-width:64ch}
.msoz__metin p{font-size:var(--f16);line-height:1.7;color:rgba(255,255,255,.82)}
@media (min-width:768px){.msoz__metin{margin-top:2.5rem}.msoz__metin p{font-size:var(--f17)}}

/* Devami: kardes sayfalara giden uc kart. */
.mdevam{padding-top:3.5rem;padding-bottom:4rem}
.mdevam__ic{max-width:75rem;margin-inline:auto}
.mdevam__grid{display:grid;gap:1rem;list-style:none}
@media (min-width:600px){.mdevam__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mdevam__grid li{display:flex}
.mdevam__grid a{
  flex:1;display:flex;flex-direction:column;gap:0.375rem;
  background:var(--surface-section);border-radius:var(--corner-card);
  padding:1.5rem 2.5rem 1.5rem 1.5rem;position:relative;
  transition:background-color var(--duration-normal) var(--ease-entrance);
}
.mdevam__grid a::after{
  content:"";position:absolute;right:1.25rem;top:1.75rem;width:0.5rem;height:0.5rem;
  border-right:2px solid var(--orange);border-top:2px solid var(--orange);
  transform:rotate(45deg);
}
.mdevam__grid a:hover{background:var(--surface-section-deep)}
.mdevam__ad{font-size:var(--f18);font-weight:600;color:var(--accent)}
.mdevam__not{font-size:var(--f14);line-height:1.45;color:var(--k-muted)}
.mdevam__eylem{margin-top:2rem}

/* Deger listesi lacivert bandin icinde: bantta ust bosluk metin blogununkiyle ayni. */
.msoz__deger{margin-top:1.75rem}
@media (min-width:768px){.msoz__deger{margin-top:2.5rem}}

/* ========================================================================
   SAGLIK TURIZMI  (/saglik-turizmi/)
   ===================================================================== */
.stur{padding-top:3.5rem}
.stur__ic{max-width:75rem;margin-inline:auto}
.stur__grid{display:grid;gap:1rem;margin-top:1.5rem;list-style:none}
@media (min-width:600px){.stur__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.stur__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stur__kart{
  background:var(--surface-section);border-radius:var(--corner-card);
  padding:1.5rem;display:flex;flex-direction:column;gap:0.75rem;
}
.stur__no{font-size:var(--f32);font-weight:700;line-height:1;color:var(--orange)}
.stur__kart p{font-size:var(--f16);line-height:1.55;color:var(--foreground)}

/* Lacivert banttaki iki eylem. Camgobegi zemin uzerinde yazi lacivert kalir. */
.stur__eylem{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:2rem}

/* ========================================================================
   ANLASMALI KURUMLAR  (/anlasmali-oldugumuz-kurumlar/)
   ===================================================================== */
#sigorta,#kurum,#soru{scroll-margin-top:calc(var(--kust) + 1rem)}
.kkurum{padding-top:3.5rem}
.kkurum--ikinci{padding-top:2.5rem}
.kkurum__ic{max-width:75rem;margin-inline:auto}
/* Grid degil flex: eksik kalan son satir ortalansin, izgara simetrik dursun
   (19 kurum 6'li sirada 3 satir + 1 kaliyor). Kart genisligi sutun sayisindan
   hesaplaniyor, boylece eksik satirdaki kartlar da ayni boyda kaliyor. */
.kkurum__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:0.75rem;
  margin-top:1.5rem;list-style:none;--sutun:2}
@media (min-width:600px){.kkurum__grid{--sutun:3}}
@media (min-width:900px){.kkurum__grid{--sutun:4}}
@media (min-width:1200px){.kkurum__grid{--sutun:6}}
.kkurum__grid > li{flex:0 0 calc((100% - (var(--sutun) - 1) * 0.75rem) / var(--sutun) - 0.1px)}

/* Iki sayilik veri seridi dort sutunluk olcuye yayilmasin. Cift sinif:
   Kurumsal'daki medya sorgulu .kbas__veri kuralini siradan bagimsiz yensin. */
.kbas__veri.kbas__veri--iki{grid-template-columns:repeat(2,minmax(0,11rem))}
/* Logolar beyaz zeminli, saydam degil; kart da beyaz olmali ki kenar belli olmasin. */
.kkurum__kart{
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  background:var(--white);border:1px solid var(--border-subtle);
  border-radius:var(--corner-card);padding:0.875rem 0.75rem 1rem;text-align:center;
}
.kkurum__kart img{width:100%;max-width:10rem;height:auto;aspect-ratio:2/1;display:block}
.kkurum__kart span{font-size:var(--f13);line-height:1.35;color:var(--foreground)}

/* ========================================================================
   KALITE YONETIM SISTEMI  (/kalite-yonetim-sistemi/)
   ===================================================================== */
#isleyis,#standartlar,#gostergeler,#komiteler,#olay-bildirimi,#denetimler{
  scroll-margin-top:calc(var(--kust) + 1rem)}
/* Dort sayi, uzun etiketler: 30rem'lik olcude uc satira kiriliyordu. */
.kbas__veri.kbas__veri--genis{max-width:46rem}

.kys{padding-top:3.5rem;padding-bottom:0}
.kys__ic{max-width:75rem;margin-inline:auto}
.kys__giris,.kys__metin p{font-size:var(--f16);line-height:1.65;color:var(--foreground);max-width:68ch}
.kys__metin p{margin-bottom:1rem}
.kys__ikili{display:grid;gap:2rem}
@media (min-width:1024px){
  .kys__ikili{grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:4rem;align-items:start}
}
.kys__not{margin-top:1.5rem;font-size:var(--f15);line-height:1.6;color:var(--k-muted);max-width:68ch}

/* Yontemler: dort kisaltma, buyuk lacivert harf + acilimi. */
.kys-yontem{background:var(--surface-section);border-radius:var(--corner-card);padding:1.75rem}
.kys-yontem h3{font-size:var(--f18);font-weight:600;color:var(--accent);margin-bottom:1.25rem}
.kys-yontem dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1rem}
.kys-yontem dl > div{display:flex;flex-direction:column;gap:0.375rem}
.kys-yontem dt{font-size:var(--f28);font-weight:700;line-height:1;color:var(--accent)}
.kys-yontem dd{font-size:var(--f13);line-height:1.45;color:var(--k-muted)}

/* Standartlar: bes kart. Flex + ortali son satir, izgara simetrik kalsin
   (3+2, 2+2+1 durumlarinda eksik satir ortada). */
.kys-std{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1.5rem;--sutun:1}
@media (min-width:600px){.kys-std{--sutun:2}}
@media (min-width:900px){.kys-std{--sutun:3}}
@media (min-width:1200px){.kys-std{--sutun:5}}
.kys-std > *{flex:0 0 calc((100% - (var(--sutun) - 1) * 1rem) / var(--sutun) - 0.1px)}
/* -0.1px: kartlarin toplami tam kap genisligine denk gelince yuvarlama
   son karti alt satira itiyordu (1440px'te 5 kart 4+1 oluyordu). */
.kys-std__kart{background:var(--surface-section);border-radius:var(--corner-card);padding:1.5rem}
.kys-std__kart h3{font-size:var(--f17);font-weight:600;line-height:1.3;color:var(--accent)}
.kys-std__adet{font-size:var(--f13);color:var(--k-muted);margin:0.375rem 0 1rem;
  padding-bottom:0.875rem;border-bottom:1px solid var(--border-subtle)}
.kys-std__kart ol{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:0.625rem}
.kys-std__kart li{counter-increment:s;display:flex;gap:0.625rem;
  font-size:var(--f15);line-height:1.45;color:var(--foreground)}
/* Kucuk sira numarasi lacivert: turuncu 12px'te 3.2:1 ile AA'yi gecmiyor. */
.kys-std__kart li::before{content:counter(s,decimal-leading-zero);flex:none;
  font-size:var(--f12);font-weight:700;line-height:1.9;color:var(--accent)}

/* Gosterge akisi: dort adim; masaustunde yatay zaman cizgisi. */
.kys-akis{list-style:none;display:grid;gap:1.5rem;margin-top:1.75rem}
@media (min-width:600px){.kys-akis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.kys-akis{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}}
.kys-akis li{position:relative;padding-top:1.25rem;border-top:2px solid var(--border-subtle)}
.kys-akis li::before{content:"";position:absolute;left:0;top:-6px;width:10px;height:10px;
  border-radius:50%;background:var(--orange)}
.kys-akis__zaman{display:block;font-size:var(--f13);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--k-muted)}
.kys-akis h3{font-size:var(--f18);font-weight:600;color:var(--accent);margin:0.5rem 0}
.kys-akis p{font-size:var(--f15);line-height:1.6;color:var(--foreground)}

/* Komiteler: lacivert bant. Konsey ustte tam genislik, komiteler ve ekipler
   altta yan yana; bir-yedi-dort ogeli uc esit sutun bos gorunuyordu. */
.kys-bant .kys-bant__ic{max-width:65rem}
.kys-bant__bas{font-size:var(--f24);font-weight:400;line-height:1.25;margin-top:1rem;max-width:30ch}
@media (min-width:768px){.kys-bant__bas{font-size:var(--f32)}}
.kys-bant__giris{font-size:var(--f16);line-height:1.65;color:rgba(255,255,255,.82);
  margin-top:1rem;max-width:64ch}
.kys-bant__grid{display:grid;gap:1rem;margin-top:2rem}
@media (min-width:768px){
  .kys-bant__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
  .kys-bant__grid > :first-child{grid-column:1 / -1}
}
.kys-bant__grid > div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--corner-card);padding:1.5rem}
.kys-bant__grid h3{font-size:var(--f18);font-weight:600;margin-bottom:0.875rem}
.kys-bant__grid h3::after{content:"";display:block;width:2rem;height:2px;
  background:var(--ice-200);margin-top:0.5rem}
.kys-bant__grid ul{list-style:none;display:flex;flex-direction:column;gap:0.875rem}
.kys-bant__grid li{font-size:var(--f15);line-height:1.5;color:rgba(255,255,255,.85)}

/* Olay bildirimi: Saglik Turizmi'nin numarali kartlari, dort adim.
   Uclu sirada 3+1 kaliyordu; masaustunde dortlu, tablette 2x2. */
.stur__grid.kys-olay{margin-top:1.75rem}
@media (min-width:1024px){.stur__grid.kys-olay{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stur__kart h3{font-size:var(--f18);font-weight:600;color:var(--accent)}

/* Denetimler: iki kart yan yana. */
.kys-denetim{display:grid;gap:1rem;margin-top:1.75rem}
@media (min-width:900px){.kys-denetim{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}}
.kys-kart{background:var(--surface-section);border-radius:var(--corner-card);padding:1.75rem}
.kys-kart h3{font-size:var(--f20);font-weight:600;color:var(--accent)}
.kys-kart .kturizm__liste{margin-bottom:0;gap:0.875rem}

/* ========================================================================
   ORGANIZASYON SEMASI  (/organizasyon-semasi/)
   Sayfa yalnizca PDF'i gosteriyor. Kutu A4 dikey oraninda; ustte PDF
   goruntuleyicinin arac cubugu icin kucuk pay var.
   ===================================================================== */
#sema{scroll-margin-top:calc(var(--kust) + 1rem)}
.osema{padding-top:2.5rem;padding-bottom:4rem}
.osema__ic{max-width:56rem;margin-inline:auto}
.osema__pdf{display:block;width:100%;aspect-ratio:595 / 880;overflow:hidden;
  border:1px solid var(--border-subtle);border-radius:var(--corner-card);
  background:var(--surface-section)}
.osema__yedek{padding:2rem;font-size:var(--f16);line-height:1.6;color:var(--foreground)}
.osema__yedek a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.osema__eylem{margin-top:1.25rem;display:flex;justify-content:center}
/* Ekranda gorunmeyen; ekran okuyucu ve baslik sirasi icin duran metin. */
.gizli{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ========================================================================
   DUZ METIN SAYFALARI  (/hasta-haklari/ ve sonra gelecek politika metinleri)
   Tasarim yok: tek, okunur metin sutunu. Satir uzunlugu 68ch (CLAUDE.md 6).
   ===================================================================== */
.duzmetin{padding-top:3rem;padding-bottom:4rem}
.duzmetin__ic{max-width:75rem;margin-inline:auto}
.duzmetin__ic > *{max-width:68ch}
.duzmetin h2{font-size:var(--f22);font-weight:600;line-height:1.3;color:var(--accent);
  margin:2.5rem 0 1rem}
.duzmetin h2:first-child{margin-top:0}
.duzmetin h3{font-size:var(--f18);font-weight:600;line-height:1.35;color:var(--accent);
  margin:1.75rem 0 0.75rem}
/* Paragraf araligi 1.5rem: sitenin text-box kirpmasi satir araligini yariya indiriyor,
   1rem'de paragraf boslugu satir boslugundan ayirt edilmiyordu. */
.duzmetin p{font-size:var(--f16);line-height:1.7;color:var(--foreground);margin-bottom:1.5rem}
.duzmetin ul,.duzmetin ol{margin:0 0 1.5rem;padding-inline-start:0;
  display:flex;flex-direction:column;gap:0.875rem}
.duzmetin ul{list-style:none}
.duzmetin li{position:relative;font-size:var(--f16);line-height:1.7;color:var(--foreground)}
.duzmetin ul > li{padding-left:1.25rem}
.duzmetin ul > li::before{content:"";position:absolute;left:0;top:0.25rem;
  width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--accent)}
.duzmetin ol{list-style:none;counter-reset:m}
.duzmetin ol > li{counter-increment:m;padding-left:2rem}
.duzmetin ol > li::before{content:counter(m) ".";position:absolute;left:0;
  font-weight:600;color:var(--accent)}
.duzmetin a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.duzmetin a:hover{text-decoration-color:var(--orange)}
/* Harfli liste: kanun maddesi bentleri a), b), c)... Gizlilik metninde bir madde
   "(e) ve (f) bentleri" diye bu harflere atif yapiyor. */
.duzmetin ol.harfli > li::before{content:counter(m, lower-alpha) ")"}
.duzmetin__tarih{font-size:var(--f14);color:var(--k-muted)}
/* ---- canlidan tasinan sayfalar (tasinan.py): govde kelimesi kelimesine canlidaki gibi;
   gorsel, tablo, alt basliklar ve video baglantisi icin temel bicim. Duzenleme sonra. ---- */
.tasinan h4,.tasinan h5,.tasinan h6{font-size:var(--f16);font-weight:600;line-height:1.4;color:var(--accent);
  margin:1.5rem 0 0.5rem}
.tasinan img{display:block;max-width:100%;height:auto;border-radius:var(--corner-card);margin:0 0 1.5rem}
.tasinan p > img{margin-bottom:0}
/* Yazar seridindeki ve hekim yorumundaki kucuk portreler govde gorseli degil: genel kural
   onlari da yakalayip kose yaricapli, boyu uzamis birer dikdortgene ceviriyordu (kullanici
   20.09.2026: "bu gorseli yuvarlak yap"). Kendi olculerine ve daireye donuyorlar. */
.tasinan .hz-yazar__foto,.tasinan .hz-yorum__foto{width:2.75rem;height:2.75rem;border-radius:50%;
  object-fit:cover;margin:0}
.tasinan video{display:block;max-width:100%;height:auto;border-radius:var(--corner-card);margin:0 0 1.5rem;
  background:var(--brand-900)}
.tasinan table{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:var(--f15);line-height:1.5}
.tasinan th,.tasinan td{padding:0.625rem 0.75rem;border:1px solid var(--border-subtle);text-align:left;
  vertical-align:top;color:var(--foreground)}
.tasinan th{background:var(--surface-section);font-weight:600;color:var(--accent)}
.tasinan blockquote{margin:0 0 1.5rem;padding:0.75rem 1.25rem;border-left:3px solid var(--cyan);
  background:var(--surface-section);border-radius:0 var(--corner-panel) var(--corner-panel) 0}
.tasinan strong{font-weight:600}
/* Gomulu YouTube (kullanici istegi, CLAUDE.md 1 istisnasi): 16:9, olcu sabit, CLS yok. */
.tasinan__video{margin:0 0 1.5rem;max-width:min(100%,var(--hz-olcu))}
.tasinan__video iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;
  border-radius:var(--corner-card);background:var(--brand-900)}
.tasinan .kbas__lead{display:none}
/* Tasinan sayfalar Katarakt kalibinda (hz-*): yazar seridi yok, yalniz tarih seridi; icerik
   ogeleri sutun olcusunde (--hz-olcu) biter. */
.hz-tarih{display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;max-width:var(--hz-olcu);margin:0 0 1.5rem;
  padding:0.75rem 1rem;background:var(--surface-section);border-radius:var(--corner-panel)}
.hz-tarih div{display:flex;flex-direction:column;gap:0.25rem}
.hz-tarih dt{font-size:var(--f11);color:var(--k-muted)}
.hz-tarih dd{margin:0;font-size:var(--f13);font-weight:600;color:var(--accent)}
.hz-icerik.tasinan img,.hz-icerik.tasinan video,.hz-icerik.tasinan table,.hz-icerik.tasinan blockquote,
.hz-icerik.tasinan h3,.hz-icerik.tasinan h4,.hz-icerik.tasinan .hz-bolum > h2{max-width:min(100%,var(--hz-olcu))}
.hz-icerik.tasinan table{display:block;overflow-x:auto}

/* ========================================================================
   HIZMET SAYFASI KALIBI  (/katarakt/ ve sonra gelecek tedavi sayfalari)
   Ustte gorsel zeminli acik baslik; altta solda yapiskan yan sutun (ustte
   icindekiler, altta genis randevu formu, yari yariya), sagda yazar seridi,
   Genel Bakis kutusu, bolumler, tablo ve SSS; en altta tam genislikte Diger
   Tedavilerimiz, doktorlar ve Saglik Kutuphanesi.
   Punto anasayfanin metin olcusune yakin: 1440'ta govde 14px (1920'de 18.7px).
   ===================================================================== */
#genel-bakis,#belirtiler,#nedenler,#turleri,#tedavi,#mercekler,#iyilesme,#ucret,#sss,
#diger-tedaviler,#doktorlar,#ilgili,#randevu{scroll-margin-top:calc(var(--kust) + 1rem)}

/* ---- baslik: gorsel zeminde, onunde acik bir perde ----
   Gorsel sagda net gorunur; perde soldan saga acilir, yazi perdenin uzerinde.
   Dar ekranda gorsel ustte serit, yazi altta. */
.hz-bas{padding:calc(var(--kust) + 1rem) 1.25rem 0}
@media (min-width:768px){.hz-bas{padding-inline:2.5rem}}
.hz-bas__panel{position:relative;max-width:75rem;margin-inline:auto;overflow:hidden;
  border-radius:var(--corner-section);background:var(--surface-section)}
.hz-bas__arka{display:block;width:100%;height:auto;aspect-ratio:860 / 560;object-fit:cover}
.hz-bas__metin{position:relative;padding:1.75rem 1.5rem 2rem}
@media (min-width:900px){
  .hz-bas__panel{min-height:22rem;display:flex;align-items:center}
  .hz-bas__arka{position:absolute;top:0;right:0;width:68%;height:100%;aspect-ratio:auto;
    object-position:50% 50%}
  .hz-bas__panel::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,var(--surface-section) 0%,var(--surface-section) 33%,
      rgba(244,248,252,.9) 42%,rgba(244,248,252,.4) 58%,rgba(244,248,252,0) 76%)}
  .hz-bas__metin{z-index:2;padding:3rem;max-width:34rem}
}
.hz-bas__h1{font-size:var(--f36);font-weight:400;line-height:1.1;color:var(--accent);margin:1.25rem 0 1.125rem}
@media (min-width:768px){.hz-bas__h1{font-size:var(--f44)}}
.hz-bas__lead{font-size:var(--f15);line-height:1.6;color:var(--foreground);max-width:38ch}
/* Paylasim/guncelleme tarihi banner'in icinde, dugmelerin hemen ustunde (kullanici istegi
   12.09.2026; once yazar seridindeydi). */
.hz-bas__tarih{display:flex;flex-wrap:wrap;gap:0.25rem 1.25rem;margin:1.25rem 0 0;
  font-size:var(--f12);color:var(--k-muted)}
.hz-bas__tarih time{font-weight:600;color:var(--accent)}
.hz-bas__tarih .hz-bas__tarih-et::after{content:":"}
.hz-bas__eylem{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1.5rem;margin-top:1.5rem}
/* Dar ekranda tek satir: solda telefon, sagda randevu dugmesi. Dugme DOM'da once gelir,
   sekme sirasi dugme > telefon kalir. 360 px'e sigsin diye dugme ve telefon biraz kuculur. */
@media (max-width:899.98px){
  .hz-bas__eylem{flex-direction:row-reverse;flex-wrap:nowrap;justify-content:space-between;gap:0.75rem}
  .hz-bas__eylem .btn{padding-inline:1.125rem;font-size:var(--f15)}
  .hz-bas__tel{font-size:var(--f15);white-space:nowrap}
}
.hz-bas__tel{font-size:var(--f16);font-weight:600;color:var(--accent);text-decoration:underline;
  text-decoration-color:var(--ice-400);text-underline-offset:5px}

/* ---- iki sutun ----
   Dar ekranda .hz-yan ve yarilari "display:contents": icindekiler en uste, form icerigin altina.
   Genis ekranda yan sutun icerik boyunca uzar ve iki esit yariya (.hz-yan__yari) bolunur; her
   kutu yalniz kendi yarisinda yapiskandir. Sayfanin ilk yarisinda icindekiler, ikinci yarisinda
   form ekranda kalir; gecis normal kaydirmayla olur. JS yok, scroll dinleyicisi yok, kaydirma
   ele gecirilmez (CLAUDE.md 3.1, 3.3). Sutunda overflow yok: acilir listeler kirpilmadan tasar. */
.hz-duzen{padding:2.5rem 1.25rem 0}
@media (min-width:768px){.hz-duzen{padding-inline:2.5rem}}
.hz-duzen__ic{max-width:75rem;margin-inline:auto;display:grid;gap:2rem;
  grid-template-areas:"toc" "icerik" "form"}
.hz-yan,.hz-yan__yari{display:contents}
.hz-toc{grid-area:toc}
.quick--yan{grid-area:form}
.hz-icerik{grid-area:icerik;min-width:0}
@media (min-width:1024px){
  /* Yan sutun sagda, metin solda (kullanici istegi, 12.09.2026). Dar ekranda sira degismedi:
     icindekiler, icerik, form. */
  .hz-duzen__ic{grid-template-columns:minmax(0,1fr) 21rem;grid-template-areas:"icerik yan";gap:3rem}
  .hz-yan{display:flex;flex-direction:column;grid-area:yan;z-index:5}
  .hz-yan__yari{display:block;flex:1 1 0}
  .hz-yan__yari + .hz-yan__yari{padding-top:0.75rem}
  /* Kaydirmada header'in buzlu seridi --kust'tan ~0,7rem uzun; kutular seridin altinda
     ~1,5rem nefes payiyla durur. */
  .hz-yan .hz-toc,.hz-yan .quick--yan{grid-area:auto;position:sticky;top:calc(var(--kust) + 2.25rem)}
  .hz-toc{max-height:calc(100vh - var(--kust) - 3rem);overflow-y:auto;scrollbar-width:thin}
}

/* ---- icindekiler ---- */
.hz-toc{background:var(--surface-section);border-radius:var(--corner-card);padding:1rem 0.875rem 0.875rem}
.hz-toc__bas{font-size:var(--f12);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);margin:0 0 0.5rem 0.625rem}
.hz-toc ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.hz-toc li{display:flex}
.hz-toc a{flex:1;display:flex;align-items:center;min-height:2rem;padding:0.25rem 0.625rem;
  border-left:2px solid transparent;border-radius:0 var(--corner-panel) var(--corner-panel) 0;
  font-size:var(--f13);line-height:1.35;color:var(--foreground);
  transition:background-color var(--duration-fast) var(--ease-entrance),
             border-color var(--duration-fast) var(--ease-entrance)}
.hz-toc a:hover{background:var(--white);color:var(--accent);border-left-color:var(--orange)}
@media (pointer:coarse){.hz-toc a{min-height:2.75rem}}

/* ---- yan form: anasayfadaki formun tum alanlari, iki sutunlu sikisik duzen ---- */
.quick--yan{position:static;inset:auto;z-index:auto;background:var(--white);
  border:1px solid var(--border-subtle);border-radius:var(--corner-card);padding:1rem 1.125rem 1.125rem}
.quick--yan .quick__title{font-size:var(--f12)}
.quick--yan .quick__bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.625rem;
  background:none;border:0;border-radius:0;padding:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.quick--yan .quick__sep{display:none}
.quick--yan .quick__field{padding:0;min-width:0;gap:0.3125rem}
.quick--yan .quick__field--mail,.quick--yan .quick__gonder{grid-column:1 / -1}
.quick--yan .quick__field:hover,.quick--yan .quick__field:focus-within{background:none}
.quick--yan .quick__label{font-size:var(--f10)}
.quick--yan input[type="text"],.quick--yan input[type="tel"],.quick--yan input[type="email"],
.quick--yan .qsel__btn{background:var(--surface-section);border:1px solid var(--border-subtle);
  border-radius:var(--corner-panel);padding:0.5625rem 0.625rem;width:100%;font-size:var(--f13)}
.quick--yan input:not([type="checkbox"]):focus,.quick--yan .qsel__btn:focus-visible{
  outline:2px solid var(--orange);outline-offset:2px}
.quick--yan .quick__telrow{position:relative;display:flex;align-items:center;gap:0.3125rem}
.quick--yan .quick__prefix{font-size:var(--f13)}
.quick--yan .quick__gonder{display:flex;flex-direction:column;gap:0.625rem;align-items:stretch;
  margin-top:0.25rem}
.quick--yan .quick__submit{align-self:stretch;width:100%;height:2.75rem}
/* Telefonda uzun etiket ("Randevu talebi gonder", hekim profili) satira sigmiyor, dugmenin disina
   tasip 320 px'te sayfayi genisletiyordu (yazi olcegi, 13.09.2026): etiket iki satira inebilir,
   dugme yuksekligi en az 2.75rem kalir, ok diski yerinde durur. */
@media (max-width:1023px){.quick--yan .quick__submit{white-space:normal;height:auto;min-height:2.75rem;
  line-height:1.2;text-align:left;padding-block:0.3125rem}}
.quick--yan .quick__foot{margin-top:0;padding-inline:0}
.quick--yan .quick__consent{font-size:var(--f11);color:var(--k-muted)}
.quick--yan .quick__consent a{color:var(--accent);text-decoration:underline}
/* Yan sutundaki yapiskan form (genis ekran): tek sutun, boyu ekranin boyuna gore (kullanici
   istegi: "ekrana tam sigsin"). Kutu yapistigi yerden ekranin altina 1,5rem kalana dek uzanir,
   en fazla 34rem; alanlar kutuya esit dagilir, bosluklar ve kutu yukseklikleri vh ile esner.
   Site genislige gore olceklendigi icin (rem = 1.111vw) cok genis ve alcak pencerede (en/boy
   2,3'ten buyuk) tek sutun sigmaz; orada iki sutunlu sikisik duzen kalir. Acilir liste asagida
   yer yoksa yukari acilir (qsel). Iletisim ve hekim formlari etkilenmez. */
@media (min-width:1024px) and (max-aspect-ratio:23/10){
  .hz-yan .quick--yan{display:flex;flex-direction:column;
    height:min(calc(100vh - var(--kust) - 3.75rem), 34rem);
    padding:clamp(0.875rem,2.2vh,1.375rem) 1.375rem}
  .hz-yan .quick--yan .quick__title{margin-bottom:clamp(0.375rem,1.6vh,1rem)}
  .hz-yan .quick--yan .quick__form{flex:1;min-height:0}
  .hz-yan .quick--yan .quick__bar{flex:1;grid-template-columns:minmax(0,1fr);
    align-content:space-between;gap:clamp(0.375rem,1.1vh,0.875rem)}
  .hz-yan .quick--yan .quick__field{gap:clamp(0.25rem,0.6vh,0.4375rem)}
  .hz-yan .quick--yan .quick__label{font-size:var(--f11)}
  .hz-yan .quick--yan input[type="text"],.hz-yan .quick--yan input[type="tel"],
  .hz-yan .quick--yan input[type="email"],.hz-yan .quick--yan .qsel__btn{
    padding:clamp(0.4375rem,1.1vh,0.6875rem) 0.875rem;font-size:var(--f14)}
  .hz-yan .quick--yan .quick__prefix{font-size:var(--f14)}
  .hz-yan .quick--yan .quick__gonder{margin-top:clamp(0.125rem,0.8vh,0.5rem);gap:clamp(0.5rem,1.2vh,0.875rem)}
  .hz-yan .quick--yan .quick__submit{height:clamp(2.5rem,5.5vh,3rem)}
}

/* ---- icerik sutunu: duz metin kurallarini kullanir (.duzmetin), punto kucuk ---- */
.hz-icerik.duzmetin{padding:0}
.hz-icerik p,.hz-icerik li{font-size:var(--f14);line-height:1.75}
/* Icerik sutununun tek olcusu: yazar karti, Genel Bakis, metin, gorsel, tablo ve SSS sagda ayni
   cizgide biter. Kullanici istegiyle (12.09.2026) sutunun tamami: sag kenar ustteki gorselli
   basligin (hz-bas) sag kenariyla hizali. Onceki 45rem (14 px govdede 68ch) CLAUDE.md 6'nin
   satir uzunlugu kuraliydi; hizmet sayfalarinda kayitli istisna. */
.hz-icerik{--hz-olcu:100%}
.hz-icerik p,.hz-icerik ul,.hz-icerik ol{max-width:var(--hz-olcu)}
.hz-icerik h2{font-size:var(--f22);line-height:1.25}
@media (min-width:768px){.hz-icerik h2{font-size:var(--f24)}}
.hz-bolum{margin-top:2.75rem}

/* ---- yazar seridi: foto, ad, unvan, kisa ozgecmis ----
   Kutu degil, altinda tek sac teli cizgi olan ince satir (kullanici istegi 12.09.2026:
   "daha ince kibar"). Tarihler burada degil, banner'da (.hz-bas__tarih). */
.hz-yazar{max-width:var(--hz-olcu);display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0.25rem 0.875rem;align-items:center;margin:0 0 1.75rem;padding:0 0 1.125rem;
  border-bottom:1px solid var(--border-subtle)}
.hz-yazar__foto{width:2.75rem;height:2.75rem;border-radius:50%;object-fit:cover;object-position:50% 18%}
.hz-yazar__kim{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.125rem 0.5rem;min-width:0}
.hz-yazar__etiket{font-size:var(--f10);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--k-muted)}
.hz-yazar__ad{font-size:var(--f14);font-weight:600;color:var(--accent)}
.hz-yazar__unvan{font-size:var(--f12);color:var(--k-muted)}
/* Ad ile unvan arasinda ince ayrac; dar ekranda unvan alt satira duserse nokta gizlenir. */
.hz-yazar__unvan::before{content:"·";margin-right:0.5rem;color:var(--k-muted);opacity:.6}
.hz-yazar .hz-yazar__ozet{grid-column:2;margin:0.25rem 0 0;font-size:var(--f13);line-height:1.6;
  color:var(--k-muted);max-width:62ch}
@media (max-width:767.98px){
  /* Foto ozgecmisin ortasina degil, adin hizasina otursun. */
  .hz-yazar{align-items:start}
  .hz-yazar__foto{align-self:start}
  .hz-yazar__unvan{flex-basis:100%}
  .hz-yazar__unvan::before{display:none}
  .hz-yazar .hz-yazar__ozet{grid-column:1 / -1;margin-top:0.75rem}
}

/* ---- Genel Bakis: baslik yok, "Genel Bakis:" iki noktali satir ici etiket ---- */
.hz-genel{max-width:var(--hz-olcu);margin:0 0 1.75rem;padding:1.125rem 1.375rem;
  background:var(--surface-section);border:1px solid var(--border-subtle);border-radius:var(--corner-card)}
.hz-icerik .hz-genel p{margin:0;font-size:var(--f15);line-height:1.75;color:var(--foreground)}
.hz-genel strong{font-weight:600;color:var(--accent)}

/* ---- gorsel ve kisa bilgiler ---- */
.hz-gorsel{margin:0 0 1.5rem;max-width:var(--hz-olcu)}
.hz-gorsel img{display:block;width:100%;height:auto;border-radius:var(--corner-card);
  border:1px solid var(--border-subtle)}
.hz-gorsel figcaption{margin-top:0.625rem;font-size:var(--f12);line-height:1.45;color:var(--k-muted)}
/* Alti bilgi: 2x3 ya da 3x2, her satir dolu. */
.hz-ozet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.875rem 1.25rem;
  margin:0 0 1.5rem;padding:1.125rem 1.375rem;max-width:var(--hz-olcu);
  background:var(--surface-section);border-radius:var(--corner-card)}
@media (min-width:600px){.hz-ozet{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hz-ozet div{display:flex;flex-direction:column;gap:0.3125rem}
.hz-ozet dt{font-size:var(--f11);letter-spacing:.06em;text-transform:uppercase;color:var(--k-muted)}
.hz-ozet dd{margin:0;font-size:var(--f14);font-weight:600;line-height:1.35;color:var(--accent)}

/* ---- tablo: dar ekranda kendi icinde yatay kayar, sayfa kaymaz ---- */
/* ---- hekim yorumu (canlidaki tirnakli alinti + ad + unvan; kullanici istegi) ----
   Camgobegi sol serit, buyuk tirnak isareti, altta hekimin karesi ve unvani. */
.hz-yorum{max-width:var(--hz-olcu);margin:0 0 1.75rem;padding:1.25rem 1.5rem;
  background:var(--surface-section);border-left:3px solid var(--cyan);
  border-radius:0 var(--corner-card) var(--corner-card) 0}
.hz-yorum__soz{position:relative;margin:0 0 1rem;padding-left:2rem;
  font-size:var(--f16);line-height:1.65;color:var(--accent);max-width:none}
.hz-yorum__soz::before{content:"“";position:absolute;left:0;top:-0.5rem;
  font-size:var(--f40);line-height:1;color:var(--cyan)}
.hz-yorum__kim{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap}
.hz-yorum__foto{width:2.75rem;height:2.75rem;flex:none;border-radius:999px;object-fit:cover}
.hz-yorum__ad{font-size:var(--f14);font-weight:600;color:var(--accent)}
.hz-yorum__unvan{font-size:var(--f12);color:var(--k-muted);flex-basis:100%;padding-left:3.5rem}
@media (max-width:520px){.hz-yorum__unvan{flex-basis:auto;padding-left:0}}
.hz-tablo{max-width:var(--hz-olcu);margin:0 0 1.5rem;overflow-x:auto;
  border:1px solid var(--border-subtle);border-radius:var(--corner-card)}
.hz-tablo table{width:100%;border-collapse:collapse;font-size:var(--f13);line-height:1.55}
.hz-tablo caption{caption-side:top;text-align:left;padding:0.875rem 1rem 0.625rem;
  font-size:var(--f13);font-weight:600;color:var(--accent)}
.hz-tablo th,.hz-tablo td{padding:0.625rem 1rem;text-align:left;vertical-align:top;
  border-top:1px solid var(--border-subtle)}
.hz-tablo thead th{background:var(--surface-section);font-size:var(--f11);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--k-muted)}
.hz-tablo tbody th{font-weight:600;color:var(--accent);white-space:nowrap}
.hz-tablo tbody tr:nth-child(even){background:rgba(244,248,252,.6)}

/* ---- SSS: <details>, JS yok ----
   Acilip kapanirken kutunun yuksekligi kayar (main.js sssAkordiyon). CLAUDE.md 3.2'nin kayitli
   istisnasi (bkz. bolum 3): yalniz tiklamada, 300 ms. JS yoksa ya da hareket azaltma seciliyse
   <details> aninda acilir. Kapanirken ok ve zemin hemen geri doner (.-kapaniyor). */
.hz-sss{display:flex;flex-direction:column;gap:0.625rem;max-width:var(--hz-olcu)}
.hz-sss__oge{border:1px solid var(--border-subtle);border-radius:var(--corner-panel);
  background:var(--white);transition:background-color var(--duration-normal) var(--ease-entrance)}
.hz-sss__oge[open]{background:var(--surface-section)}
.hz-sss__oge summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;min-height:2.75rem;padding:0.8125rem 1.125rem;
  font-size:var(--f15);font-weight:600;line-height:1.4;color:var(--accent)}
.hz-sss__oge summary::-webkit-details-marker{display:none}
.hz-sss__oge summary::after{content:"";flex:none;width:0.5rem;height:0.5rem;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform var(--duration-normal) var(--ease-entrance)}
.hz-sss__oge[open] summary::after{transform:rotate(225deg)}
.hz-sss__cevap{padding:0 1.125rem 1.125rem}
.hz-sss__cevap > :last-child{margin-bottom:0}
.hz-sss__oge.-kapaniyor{background:var(--white)}
.hz-sss__oge.-kapaniyor summary::after{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){
  .hz-sss__oge summary::after{transition:none}
}

/* ---- alt bolumler (diger tedaviler, doktorlar, kutuphane): baslik punto kucuk ---- */
.hz-duzen ~ .section .kbaslik{font-size:var(--f26)}
@media (min-width:768px){.hz-duzen ~ .section .kbaslik{font-size:var(--f30)}}
/* Tek satirlik uzun baslik ("Duzey Goz Tip Merkezi Doktorlari"). */
.kbaslik.kbaslik--tek{max-width:none}

/* ---- diger tedavilerimiz: 18 baglanti, 2 / 3 / 6 sutun, her satir dolu ---- */
.hz-diger{padding-top:3.5rem}
.hz-diger__ic{max-width:75rem;margin-inline:auto}
.hz-diger__liste{list-style:none;padding:0;margin:0;display:grid;gap:0.75rem;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.hz-diger__liste{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.hz-diger__liste{grid-template-columns:repeat(6,minmax(0,1fr))}}
.hz-diger__liste li{display:flex}
.hz-diger__liste a{flex:1;display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
  min-height:3.25rem;padding:0.75rem 1rem;border-radius:var(--corner-panel);
  background:var(--surface-section);font-size:var(--f13);line-height:1.35;color:var(--accent);
  transition:background-color var(--duration-fast) var(--ease-entrance),
             color var(--duration-fast) var(--ease-entrance)}
.hz-diger__liste a::after{content:"";flex:none;width:0.4375rem;height:0.4375rem;
  border-right:2px solid var(--orange);border-top:2px solid var(--orange);transform:rotate(45deg)}
.hz-diger__liste a:hover{background:var(--accent);color:var(--white)}

/* ---- Saglik Kutuphanesi: ilgili yazilar, anasayfadaki kartlar; uc kart, uc sutun ---- */
.hz-ilgili{padding-top:0.5rem;padding-bottom:4rem}
.hz-ilgili__ic{max-width:75rem;margin-inline:auto}
.hz-ilgili .blog__tumu{text-align:center}
.hz-ilgili .blog__grid{grid-template-columns:1fr}
@media (min-width:768px){.hz-ilgili .blog__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ===================== DOKTORLARIMIZ (drl-*) =====================
   Liste: suzgec (calisma alani cipleri; JS'siz calismadigi icin hidden gelir, main.js acar)
   + sayac + kart izgarasi. Dort hekim: masaustu 4, tablet 2, mobil 1 sutun. Suzgecte kalan
   kartlar ortalanir (flex-wrap + center, CLAUDE.md 1). "Randevu al" footer formuna gider,
   hekimi secili getirir (main.js doktorListesi). */
.drl{padding-top:2.5rem;padding-bottom:4rem}
.drl__ic{max-width:75rem;margin-inline:auto}
.drl__arac[hidden],.drl__kart[hidden]{display:none}
.drl__arac{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1.25rem;padding:0.875rem 1rem;
  background:var(--surface-section);border:1px solid var(--border-subtle);border-radius:var(--corner-card)}
.drl__arac-bas{font-size:var(--f12);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.drl__cipler{display:flex;flex-wrap:wrap;gap:0.5rem}
.drl__cip{display:inline-flex;align-items:center;min-height:2.375rem;padding:0 1rem;
  border-radius:var(--corner-chip);background:var(--white);border:1px solid var(--border-subtle);
  font:inherit;font-size:var(--f14);color:var(--accent);cursor:pointer;
  transition:background-color var(--duration-fast) var(--ease-entrance),
             border-color var(--duration-fast) var(--ease-entrance),color var(--duration-fast) var(--ease-entrance)}
.drl__cip:hover{border-color:var(--accent)}
.drl__cip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--white)}
.drl__sayi{margin:1.5rem 0 1rem;font-size:var(--f14);color:var(--k-muted)}
.drl__sayi strong{font-weight:600;color:var(--accent)}

.drl__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem;list-style:none;padding:0;margin:0}
.drl__kart{flex:0 1 100%;max-width:24rem;display:flex;flex-direction:column;overflow:hidden;
  background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--corner-card);
  transition:border-color var(--duration-normal) var(--ease-entrance)}
.drl__kart:hover{border-color:var(--accent)}
@media (min-width:600px){.drl__kart{flex-basis:calc((100% - 1.25rem) / 2 - 0.1px);max-width:none}}
@media (min-width:1024px){.drl__kart{flex-basis:calc((100% - 3 * 1.25rem) / 4 - 0.1px)}}
.drl__foto{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--surface-section)}
.drl__govde{flex:1;display:flex;flex-direction:column;gap:0.875rem;padding:1.125rem 1.125rem 1.25rem}
.drl__ad{font-size:var(--f16);font-weight:600;line-height:1.3;color:var(--accent)}
.drl__unvan{align-self:flex-start;display:inline-flex;align-items:center;min-height:1.625rem;padding:0 0.625rem;
  border-radius:var(--corner-chip);background:var(--surface-section);font-size:var(--f12);font-weight:600;color:var(--accent)}
.drl__okul{font-size:var(--f13);line-height:1.45;color:var(--k-muted)}
.drl__alan{display:flex;flex-wrap:wrap;gap:0.375rem;list-style:none;padding:0;margin:0}
.drl__alan li{display:flex;align-items:center;min-height:1.5rem;padding:0 0.5rem;
  border:1px solid var(--border-subtle);border-radius:var(--corner-chip);font-size:var(--f11);color:var(--foreground)}
.drl__alt{margin-top:auto;padding-top:1rem;border-top:1px solid var(--border-subtle)}
.btn.drl__randevu{width:100%;height:2.5rem;font-size:var(--f14)}
@media (pointer:coarse){
  .drl__cip{min-height:2.75rem}
  .btn.drl__randevu{height:2.75rem}
}

/* "Randevu al" footer formuna kaydirir; form sabit header'in altinda kalmasin. */
#quick-form-alt{scroll-margin-top:calc(var(--kust) + 2.25rem)}

/* Kartin adi karti butunuyle hekimin profil sayfasina baglar (gerilen baglanti);
   "Randevu al" ustte kalir ve ayri calisir. */
.drl__kart{position:relative}
.drl__bag{color:inherit}
.drl__bag::after{content:"";position:absolute;inset:0;z-index:1}
.drl__bag:hover{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:4px}
.drl__alt{position:relative;z-index:2}

/* ===================== HEKİM PROFİLİ (hk-*) =====================
   Adres yayindakiyle ayni: /doktorlarimiz/op-dr-.../. Govde _tools/hekim.py'deki veriden
   uretilir. Solda fotograf ve yapiskan icindekiler; sagda ad, kolay randevu (rahatsizlik
   secerek; tarih/saat yok), hakkinda, calisma alanlari, egitim ve deneyim; altta diger hekimler.
   Dar ekranda icindekiler gizlenir, fotograf kucuk. */
.hk{padding:calc(var(--kust) + 1.5rem) 1.25rem 1rem}
@media (min-width:768px){.hk{padding-inline:2.5rem}}
@media (min-width:1024px){.hk{padding-top:calc(var(--kust) + 2.25rem)}}
.hk__ic{max-width:75rem;margin-inline:auto}
.hk__duzen{display:grid;gap:1.5rem;margin-top:1.5rem}
@media (min-width:1024px){.hk__duzen{grid-template-columns:17rem minmax(0,1fr);gap:3rem}}
.hk-yan{display:flex;flex-direction:column;gap:1.25rem;min-width:0}
.hk-yan__foto{display:block;width:9rem;height:auto;aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--corner-card);background:var(--surface-section)}
@media (max-width:1023.98px){.hk-yan .hz-toc{display:none}}
@media (min-width:1024px){
  .hk-yan__foto{width:100%}
  .hk-yan .hz-toc{position:sticky;top:calc(var(--kust) + 2.25rem)}
}

.hk-icerik{min-width:0;display:flex;flex-direction:column;gap:3rem}
.hk-kim{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.hk-kim__ad{font-size:var(--f32);font-weight:400;line-height:1.15;color:var(--accent)}
@media (min-width:768px){.hk-kim__ad{font-size:var(--f40)}}
.hk-kim__yer{font-size:var(--f13);font-weight:600;color:var(--accent)}
.hk-kim__giris{max-width:45rem;font-size:var(--f15);line-height:1.75;color:var(--foreground)}

/* ---- kolay randevu: yan formun (quick--yan) alanlari + rahatsizlik kutulari ---- */
.hk-randevu{padding:1.375rem 1.5rem 1.5rem;box-shadow:0 8px 24px rgba(1,38,98,.08)}
.hk-randevu__not{margin:1rem 0 1.5rem;font-size:var(--f13);line-height:1.6;color:var(--k-muted)}
.hk-secim{min-width:0;margin:0 0 1.5rem;padding:0;border:0}
.hk-secim legend{margin-bottom:0.75rem;padding:0}
.hk-secim__liste{display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem}
.hk-secim__oge{position:relative;display:flex;flex:0 1 calc((100% - 0.5rem) / 2 - 0.1px)}
@media (min-width:768px){.hk-secim__oge{flex-basis:calc((100% - 3 * 0.5rem) / 4 - 0.1px)}}
.hk-secim__oge input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.hk-secim__oge span{flex:1;display:flex;align-items:center;justify-content:center;min-height:3rem;
  padding:0.5rem 0.625rem;border:1px solid var(--border-subtle);border-radius:var(--corner-panel);
  background:var(--white);font-size:var(--f13);line-height:1.3;text-align:center;color:var(--accent);
  transition:background-color var(--duration-fast) var(--ease-entrance),
             border-color var(--duration-fast) var(--ease-entrance),color var(--duration-fast) var(--ease-entrance)}
.hk-secim__oge:hover span{border-color:var(--accent)}
.hk-secim__oge input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--white);font-weight:600}
.hk-secim__oge input:focus-visible + span{outline:2px solid var(--orange);outline-offset:2px}
.hk-randevu__adim{display:block;margin-bottom:0.75rem}
@media (min-width:768px){
  .hk-randevu .quick__bar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hk-randevu .quick__field--mail{grid-column:auto}
}

/* ---- bolumler ---- */
.hk-bolum{scroll-margin-top:calc(var(--kust) + 2.25rem)}
#randevu.hk-randevu{scroll-margin-top:calc(var(--kust) + 2.25rem)}
.hk-bolum > h2{margin-bottom:1.5rem;font-size:var(--f22);font-weight:600;line-height:1.25;color:var(--accent)}
.hk-bolum > p{max-width:45rem;font-size:var(--f15);line-height:1.75;color:var(--foreground)}
.hk-bolum > p + p{margin-top:0.875rem}

.hk-alan{display:grid;gap:1rem}
@media (min-width:768px){.hk-alan{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hk-alan__kutu{padding:1.25rem 1.25rem 1.375rem;background:var(--surface-section);
  border:1px solid var(--border-subtle);border-radius:var(--corner-card)}
.hk-alan__bas{margin-bottom:1rem;font-size:var(--f12);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent)}
.hk-alan__liste{display:flex;flex-wrap:wrap;gap:0.5rem;list-style:none;padding:0;margin:0}
.hk-alan__liste li{display:flex}
.hk-alan__liste a,.hk-alan__liste span{display:inline-flex;align-items:center;min-height:2.25rem;
  padding:0 0.875rem;background:var(--white);border:1px solid var(--border-subtle);
  border-radius:var(--corner-chip);font-size:var(--f13);line-height:1.3;color:var(--accent)}
/* Baglanti olan madde yalniz renkle ayrismasin (CLAUDE.md 8): sonunda ok. */
.hk-alan__liste a::after{content:"›";margin-left:0.5rem;font-weight:600}
.hk-alan__liste a:hover{border-color:var(--accent)}

.hk-zaman{display:grid;gap:1.5rem;list-style:none;padding:0;margin:0}
@media (min-width:768px){.hk-zaman{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}}
.hk-zaman li{position:relative;display:flex;flex-direction:column;gap:0.625rem;
  padding-top:1.375rem;border-top:2px solid var(--border-subtle)}
.hk-zaman li::before{content:"";position:absolute;top:calc(-0.375rem - 1px);left:0;width:0.75rem;height:0.75rem;
  border-radius:50%;background:var(--white);border:2px solid var(--accent)}
.hk-zaman li:first-child::before{background:var(--orange);border-color:var(--orange)}
.hk-zaman__tarih{font-size:var(--f12);font-weight:600;letter-spacing:.04em;color:var(--accent)}
.hk-zaman__yer{font-size:var(--f15);font-weight:600;line-height:1.35;color:var(--foreground)}
.hk-zaman__not{font-size:var(--f13);line-height:1.5;color:var(--k-muted)}

/* Yayinlar ve sunumlar (hekim.py -> akademik): baslikli gruplar, numarali liste. Kunyeler uzun,
   kirilabilsin; ol girintisi elle verilir (site sifirlamasi yalniz ul'yi kapsiyor). */
.hk-yayin{display:grid;gap:1.75rem;max-width:45rem}
.hk-yayin__bas{margin-bottom:0.75rem;font-size:var(--f12);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent)}
.hk-yayin__liste{display:grid;gap:0.625rem;margin:0;padding-inline-start:1.5rem}
.hk-yayin__liste li{padding-left:0.25rem;font-size:var(--f14);line-height:1.6;color:var(--foreground);
  overflow-wrap:break-word}
.hk-yayin__liste li::marker{font-weight:600;color:var(--k-muted)}

/* ===================== SAĞLIK KÜTÜPHANESİ (ktp-*) =====================
   Liste sayfasi /saglik-kutuphanesi/. Ust bant Mayo Clinic "Diseases & Conditions"
   duzeninde, bizim renklerle: lacivert gecisli panel, solda baslik + arama, sagda Turk
   alfabesiyle 7x4 harf izgarasi. Panel header'in altindan baslar (lacivert "Iletisim"
   dugmesi lacivert zemine karismasin). Altta 3 sutunlu kartlar ve sayfalama (main.js). */
/* Bant tam genislik, kosesiz (Mayo gibi); icerik yine 75rem sutunda, alttaki kartlarla hizali:
   yan dolgu = (genislik - 75rem) / 2, en az sayfa kenar boslugu. */
.ktp{padding-top:calc(var(--kust) + 0.5rem)}
.ktp__panel{position:relative;overflow:hidden;
  padding:2rem max(1.25rem, calc((100% - 75rem) / 2)) 2.75rem;color:var(--white);
  background:radial-gradient(42rem 24rem at 92% 118%,rgba(110,210,242,.24),transparent 64%),
             linear-gradient(115deg,#0b3f95 0%,var(--brand-500) 52%,var(--brand-900) 100%)}
@media (min-width:768px){.ktp__panel{padding-inline:max(2.5rem, calc((100% - 75rem) / 2))}}
@media (min-width:1024px){.ktp__panel{padding-block:2.25rem 3.25rem}}
.ktp .kirinti ol,.ktp .kirinti a{color:rgba(255,255,255,.78)}
.ktp .kirinti li+li::before{color:rgba(255,255,255,.4)}
.ktp .kirinti a:hover,.ktp .kirinti [aria-current]{color:var(--white)}
.ktp__izgara{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;margin-top:2rem}
/* Tek kolon minmax(0,1fr): kolon icerigin en genis ogesine gore buyumesin. Telefonda buyuyen
   yazi (yazi olcegi, 13.09.2026) "Hastalik ara" dugmesini genisletip arama kutusunu 360 px'te
   ekran disina itiyordu; girdi zaten min-width:0 ile daralir. */
@media (min-width:1024px){.ktp__izgara{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:4rem;align-items:center;margin-top:2.5rem}}
.ktp__h1{font-size:var(--f30);font-weight:600;line-height:1.15;color:var(--white)}
@media (min-width:768px){.ktp__h1{font-size:var(--f36)}}
.ktp__lead{margin-top:1.375rem;max-width:44ch;font-size:var(--f15);line-height:1.65;color:rgba(255,255,255,.88)}
.ktp-ara[hidden],.ktp__sag[hidden]{display:none}
.ktp-ara{margin-top:2rem;max-width:32rem}
.ktp-ara__etiket{display:block;margin-bottom:0.75rem;font-size:var(--f13);font-weight:600;color:var(--white)}
.ktp-ara__kutu{display:flex;align-items:center;gap:0.75rem;height:2.875rem;padding:0 1.125rem;
  border-radius:999px;background:var(--white);box-shadow:0 8px 24px rgba(1,38,98,.08)}
.ktp-ara__kutu:focus-within{outline:2px solid var(--orange);outline-offset:3px}
.ktp-ara__kutu svg{flex:none;width:1.125rem;height:1.125rem;color:var(--brand-500)}
.ktp-ara__kutu input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;
  font:inherit;font-size:var(--f14);color:var(--foreground)}
.ktp-ara__kutu input::placeholder{color:rgba(18,35,63,.55)}
.ktp__h2{margin-bottom:1.125rem;font-size:var(--f18);font-weight:600;line-height:1.3;color:var(--white)}
@media (min-width:768px){.ktp__h2{font-size:var(--f22)}}
.ktp-harfler{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0.375rem;
  max-width:25rem;list-style:none;padding:0;margin:0}
@media (min-width:768px){.ktp-harfler{gap:0.625rem}}
.ktp-harfler li{display:flex;justify-content:center}
.ktp-harf{width:100%;max-width:2.75rem;aspect-ratio:1;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.1);font:inherit;font-size:var(--f13);font-weight:600;color:var(--white);
  transition:background-color var(--duration-fast) var(--ease-entrance),color var(--duration-fast) var(--ease-entrance)}
.ktp-harf:hover:not(:disabled){background:rgba(255,255,255,.22)}
.ktp-harf[aria-pressed="true"],.ktp-harf[aria-pressed="true"]:hover{background:var(--ice-200);color:var(--brand-500)}
.ktp-harf:disabled{cursor:default;background:rgba(255,255,255,.05);color:rgba(255,255,255,.35)}
.ktp-harf:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ---- liste ---- */
.ktp-liste{padding-top:2.5rem;padding-bottom:4rem;scroll-margin-top:calc(var(--kust) + 1rem)}
.ktp-liste__ic{max-width:75rem;margin-inline:auto}
.ktp-liste__ust{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:0.75rem;min-height:2.5rem;margin-bottom:1.25rem}
.ktp-liste__sayi{font-size:var(--f14);color:var(--k-muted)}
.ktp-liste__sayi:focus{outline:none}
.ktp-liste__sayi strong{font-weight:600;color:var(--accent)}
.ktp-liste__temizle{display:inline-flex;align-items:center;min-height:2.5rem;padding:0 1rem;cursor:pointer;
  border:1px solid var(--border-subtle);border-radius:var(--corner-chip);background:var(--white);
  font:inherit;font-size:var(--f13);font-weight:600;color:var(--accent)}
.ktp-liste__temizle[hidden]{display:none}
.ktp-liste__temizle:hover{border-color:var(--accent)}
.ktp-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem}
.ktp-grid .blog__kart{flex:0 1 100%;max-width:26rem}
@media (min-width:640px){.ktp-grid .blog__kart{flex-basis:calc((100% - 1.25rem) / 2 - 0.1px);max-width:none}}
@media (min-width:1024px){.ktp-grid .blog__kart{flex-basis:calc((100% - 2 * 1.25rem) / 3 - 0.1px)}}
.ktp-grid .blog__kart[hidden]{display:none}
/* Anasayfa kartindaki tarih ve ozet tonlari beyazda AA'yi gecmiyor; burada --k-muted. */
/* Kutuphane karti tonu **her yerde**: anasayfada ve hizmet/yazi sayfalarinin "Ilgili
   Icerikler" seridinde de ayni kart kullaniliyordu ve orada --foreground-muted (beyazda
   2.55:1) / --foreground-subtle (3.67:1) ile kaliyordu — CLAUDE.md 5'e gore ikincil metin
   AA gecmeli. --k-muted beyazda 5.4:1. (CLAUDE.md 0'da "anasayfada duruyor" diye kayitli
   olan acik buydu.) */
.blog__tarih,.blog__ozet{color:var(--k-muted)}
.ktp-grid .blog__govde{gap:0.875rem}
.ktp-grid .blog__tarih{font-size:var(--f12)}
.ktp-grid .blog__baslik{font-size:var(--f16)}
.ktp-grid .blog__ozet{font-size:var(--f13)}
/* Kartta kategori ve tarih tek satir. */
.blog__meta{display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0.625rem}
.blog__kat{font-size:var(--f11);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.blog__kat::after{content:"·";margin-left:0.625rem;color:var(--k-muted)}

/* ---- kategoriler: Göz Hastalıkları başta (Doktorlarımız süzgeciyle aynı görünüm) ---- */
.ktp-kat-bar[hidden]{display:none}
.ktp-kat-bar{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1.25rem;margin-bottom:1.5rem;
  padding:0.875rem 1rem;background:var(--surface-section);border:1px solid var(--border-subtle);
  border-radius:var(--corner-card)}
.ktp-kat-bar__bas{font-size:var(--f12);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.ktp-katlar{display:flex;flex-wrap:wrap;gap:0.5rem}
.ktp-kat{display:inline-flex;align-items:center;gap:0.5rem;min-height:2.375rem;padding:0 0.625rem 0 1rem;
  cursor:pointer;border:1px solid var(--border-subtle);border-radius:var(--corner-chip);background:var(--white);
  font:inherit;font-size:var(--f13);color:var(--accent);
  transition:background-color var(--duration-fast) var(--ease-entrance),
             border-color var(--duration-fast) var(--ease-entrance),color var(--duration-fast) var(--ease-entrance)}
.ktp-kat:hover{border-color:var(--accent)}
.ktp-kat[aria-pressed="true"],.ktp-kat[aria-pressed="true"]:hover{background:var(--accent);border-color:var(--accent);color:var(--white)}
.ktp-kat:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.ktp-kat__sayi{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 0.375rem;
  border-radius:999px;background:var(--mint-100);font-size:var(--f11);font-weight:600;color:var(--accent)}
.ktp-kat[aria-pressed="true"] .ktp-kat__sayi{background:rgba(255,255,255,.18);color:var(--white)}
@media (pointer:coarse){.ktp-kat{min-height:2.75rem}}
.ktp-liste .kbaslik,.ktp-dizin .kbaslik{margin-bottom:1.5rem}

/* ---- göz hastalıkları dizini: kütüphane sayfasının altında 20 başlık (12.09.2026) ----
   Konu cipleri bolumu yerinde suzer (main.js > hastalikDizini()); sira numarasi CSS sayacindan
   gelir, suzulunce 01'den yeniden sayar. Cipler JS yoksa gizli, basliklar gorunur. */
.ktp-dizin{padding-top:1rem}
.ktp-dizin__ust{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:0.75rem 1.25rem;margin-bottom:1.5rem}
.ktp-dizin__cipler{display:flex;flex-wrap:wrap;gap:0.5rem}
.ktp-dizin__cipler[hidden]{display:none}
.ktp-cip{display:inline-flex;align-items:center;gap:0.5rem;min-height:2.375rem;padding:0 0.625rem 0 1rem;
  cursor:pointer;border:1px solid var(--border-subtle);border-radius:var(--corner-chip);background:var(--white);
  font:inherit;font-size:var(--f13);color:var(--accent);
  transition:background-color var(--duration-fast) var(--ease-entrance),
             border-color var(--duration-fast) var(--ease-entrance),color var(--duration-fast) var(--ease-entrance)}
.ktp-cip:hover{border-color:var(--accent)}
.ktp-cip[aria-pressed="true"],.ktp-cip[aria-pressed="true"]:hover{background:var(--accent);border-color:var(--accent);color:var(--white)}
.ktp-cip:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.ktp-cip__sayi{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 0.375rem;
  border-radius:999px;background:var(--mint-100);font-size:var(--f11);font-weight:600;color:var(--accent)}
.ktp-cip[aria-pressed="true"] .ktp-cip__sayi{background:rgba(255,255,255,.18);color:var(--white)}
@media (pointer:coarse){.ktp-cip{min-height:2.75rem}}
.ktp-dizin__sayi{font-size:var(--f13);color:var(--accent);margin-left:auto}
.ktp-dizin__liste{list-style:none;margin:0;padding-inline-start:0;counter-reset:dizin;
  display:grid;gap:0.75rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.ktp-dizin__oge{display:flex;counter-increment:dizin}
.ktp-dizin__oge[hidden]{display:none}
.ktp-dizin__oge a{flex:1;display:flex;align-items:center;gap:0.75rem;min-height:4.25rem;
  padding:0.875rem 0.875rem 0.875rem 1rem;background:var(--white);text-decoration:none;
  border:1px solid var(--border-subtle);border-radius:var(--corner-card);
  color:var(--accent);font-size:var(--f15);line-height:1.3;
  transition:border-color var(--duration-fast) var(--ease-entrance),
             box-shadow var(--duration-fast) var(--ease-entrance)}
.ktp-dizin__oge a::before{content:counter(dizin,decimal-leading-zero);flex:none;
  font-size:var(--f13);font-weight:600;color:var(--brand-300,var(--accent));opacity:.55}
.ktp-dizin__oge a:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(1,38,98,.08)}
.ktp-dizin__oge a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.ktp-dizin__ad{flex:1}
.ktp-dizin__ok{flex:none;width:1.75rem;height:1.75rem;border-radius:999px;display:grid;place-items:center;
  border:1px solid var(--border-subtle);color:var(--accent)}
.ktp-dizin__ok svg{width:0.75rem;height:0.75rem}
.ktp-dizin__oge a:hover .ktp-dizin__ok{background:var(--accent);border-color:var(--accent);color:var(--white)}
.ktp-dizin__tumu{display:flex;justify-content:center;margin-top:2rem}

/* ---- Göz Hastalıkları (/goz-hastaliklari/): kütüphane kartlarıyla aynı 3'lü ızgara ---- */
/* Gorseli olmayan kart (yayindaki gorsel yapay zeka uretimi, CLAUDE.md 9): sade yer tutucu. */
.blog__gorsel--bos{display:grid;place-items:center;aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--mint-100),var(--surface-section))}
.blog__gorsel--bos svg{width:3rem;height:3rem;color:var(--brand-500);opacity:.35}
/* Aramada "Hastalik ara" dugmesi, kutunun icinde sagda. */
.ktp-ara--dugmeli .ktp-ara__kutu{padding-right:0.3125rem}
.ktp-ara__dugme{flex:none;height:2.25rem;padding:0 1.125rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--brand-500);font:inherit;font-size:var(--f13);font-weight:600;color:var(--white);
  transition:background-color var(--duration-fast) var(--ease-entrance)}
.ktp-ara__dugme:hover{background:var(--brand-900)}
.ktp-ara__dugme:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* Alttaki Saglik Kutuphanesi kategori seridi. */
.ktp-detay__alt{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1.25rem;margin-top:2.5rem;
  padding:0.875rem 1rem;background:var(--surface-section);border:1px solid var(--border-subtle);
  border-radius:var(--corner-card)}
.ktp-detay__katlar{display:flex;flex-wrap:wrap;gap:0.5rem;list-style:none;padding:0;margin:0}
.ktp-detay__katlar li{display:flex}
.ktp-detay__tumu{margin-left:auto;display:inline-flex;align-items:center;min-height:2.375rem;
  font-size:var(--f13);font-weight:600;color:var(--accent);text-decoration:underline;
  text-decoration-color:var(--ice-400);text-underline-offset:4px}
.ktp-detay__tumu:hover{text-decoration-color:var(--orange)}
.ktp-liste__bos{padding:3rem 1rem;text-align:center;font-size:var(--f15);color:var(--k-muted)}
.ktp-liste__bos[hidden]{display:none}
.ktp-sayfa{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0.5rem;margin-top:2.75rem}
.ktp-sayfa[hidden]{display:none}
.ktp-sayfa__liste{display:flex;flex-wrap:wrap;gap:0.5rem;list-style:none;padding:0;margin:0}
.ktp-sayfa__liste li{display:flex}
.ktp-sayfa__dugme{min-width:2.75rem;height:2.75rem;padding:0 0.875rem;cursor:pointer;
  border:1px solid var(--border-subtle);border-radius:999px;background:var(--white);
  font:inherit;font-size:var(--f14);font-weight:600;color:var(--accent);
  transition:background-color var(--duration-fast) var(--ease-entrance),
             border-color var(--duration-fast) var(--ease-entrance),color var(--duration-fast) var(--ease-entrance)}
.ktp-sayfa__dugme:hover:not(:disabled){border-color:var(--accent)}
.ktp-sayfa__dugme[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--white)}
.ktp-sayfa__dugme:disabled{cursor:default;opacity:.4}
.ktp-sayfa__dugme:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.ktp-sayfa__bosluk{display:flex;align-items:center;padding:0 0.25rem;color:var(--k-muted)}

/* ===================== İLETİŞİM (ilt-*) =====================
   Kanal kartları (4'lü: telefon, WhatsApp, e-posta, adres), form + harita (harita tıklayınca
   yüklenir, CLAUDE.md 1), İstanbul Havalimanı'ndan ulaşım (2x2 kart). */
.ilt__ic{max-width:75rem;margin-inline:auto}
.ilt-kanal{padding-top:2.5rem;padding-bottom:1rem}
.ilt-kanal__grid{display:grid;gap:1rem;list-style:none;padding:0;margin:0}
@media (min-width:640px){.ilt-kanal__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.ilt-kanal__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ilt-kart{display:flex;flex-direction:column;align-items:flex-start;gap:0.875rem;padding:1.5rem;
  background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--corner-card)}
.ilt-kart__ikon{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;
  background:var(--mint-100);color:var(--brand-500)}
.ilt-kart__ikon svg{width:1.125rem;height:1.125rem}
.ilt-kart__bas{font-size:var(--f12);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--k-muted)}
.ilt-kart__deger{font-size:var(--f17);font-weight:600;line-height:1.4;color:var(--accent);
  font-style:normal;overflow-wrap:anywhere}
.ilt-kart__deger--adres{font-size:var(--f14);line-height:1.55}
.ilt-kart__eylem{margin-top:auto;display:inline-flex;align-items:center;min-height:2.5rem;
  font-size:var(--f13);font-weight:600;color:var(--accent);text-decoration:underline;
  text-decoration-color:var(--ice-400);text-underline-offset:4px}
.ilt-kart__eylem:hover{text-decoration-color:var(--orange)}

/* ---- form + harita ---- */
.ilt-form{padding-top:2.5rem;padding-bottom:1rem}
.ilt-form .kbaslik,.ilt-ulasim .kbaslik{margin-bottom:1.5rem}
.ilt-form__grid{display:grid;gap:1.25rem}
@media (min-width:1024px){.ilt-form__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* Yan formun Katarakt'taki grid-area:form kurali burada tanimsiz alan aciyordu; iptal. */
.quick--yan.ilt-form__kart{padding:1.5rem;grid-area:auto}
.quick--yan .quick__field--mesaj{grid-column:1 / -1}
.quick--yan textarea{width:100%;min-height:7.5rem;resize:vertical;padding:0.625rem;
  background:var(--surface-section);border:1px solid var(--border-subtle);border-radius:var(--corner-panel);
  font:inherit;font-size:var(--f13);line-height:1.55;color:var(--foreground)}
.quick--yan textarea:focus{outline:2px solid var(--orange);outline-offset:2px}
.ilt-harita{display:flex;flex-direction:column;overflow:hidden;background:var(--white);
  border:1px solid var(--border-subtle);border-radius:var(--corner-card)}
.ilt-harita__alan{position:relative;flex:1;min-height:18rem;display:grid;place-items:center;
  background-color:var(--mint-50);
  background-image:linear-gradient(var(--mint-100) 1px,transparent 1px),
                   linear-gradient(90deg,var(--mint-100) 1px,transparent 1px);
  background-size:2rem 2rem}
.ilt-harita__isaret{position:absolute;top:calc(50% - 4.5rem);left:calc(50% - 1rem);width:2rem;height:2rem;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--orange)}
.ilt-harita__isaret::after{content:"";position:absolute;inset:0.625rem;border-radius:50%;background:var(--white)}
.ilt-harita__yukle[hidden]{display:none}
.ilt-harita__alan iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ilt-harita__alan.is-yuklendi .ilt-harita__isaret{display:none}
.ilt-harita__bilgi{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:0.5rem 1.25rem;padding:1.125rem 1.25rem;border-top:1px solid var(--border-subtle)}
.ilt-harita__adres{font-style:normal;font-size:var(--f14);line-height:1.55;color:var(--foreground)}
.ilt-harita__ac{display:inline-flex;align-items:center;min-height:2.5rem;font-size:var(--f13);font-weight:600;
  color:var(--accent);text-decoration:underline;text-decoration-color:var(--ice-400);text-underline-offset:4px}
.ilt-harita__ac:hover{text-decoration-color:var(--orange)}
.ilt-harita__not{flex-basis:100%;font-size:var(--f12);color:var(--k-muted)}

/* ---- ulaşım: dört rota, 2x2 ---- */
.ilt-ulasim{padding-top:2.5rem;padding-bottom:4rem;scroll-margin-top:calc(var(--kust) + 1rem)}
/* Sitedeki tum randevu dugmelerinin hedefi (iletisim/#randevu-formu): header'in altinda durur. */
#randevu-formu{scroll-margin-top:calc(var(--kust) + 1rem)}
.ilt-ulasim__giris{max-width:60ch;margin-bottom:1.75rem;font-size:var(--f15);line-height:1.7;color:var(--foreground)}
.ilt-rota{display:grid;gap:1rem;list-style:none;padding:0;margin:0}
@media (min-width:768px){.ilt-rota{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ilt-rota__kart{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background:var(--surface-section);
  border:1px solid var(--border-subtle);border-radius:var(--corner-card)}
.ilt-rota__ust{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.75rem}
.ilt-rota__bas{font-size:var(--f17);font-weight:600;line-height:1.3;color:var(--accent)}
.ilt-rota__etiket{display:inline-flex;align-items:center;min-height:1.5rem;padding:0 0.625rem;
  border-radius:var(--corner-chip);background:var(--white);border:1px solid var(--border-subtle);
  font-size:var(--f11);font-weight:600;color:var(--accent)}
.ilt-rota__adim{display:flex;flex-direction:column;gap:0.75rem;list-style:none;padding:0;margin:0;counter-reset:adim}
.ilt-rota__adim li{display:flex;gap:0.75rem;font-size:var(--f14);line-height:1.55;color:var(--foreground);
  counter-increment:adim}
.ilt-rota__adim li::before{content:counter(adim);flex:none;display:grid;place-items:center;width:1.5rem;
  height:1.5rem;border-radius:50%;background:var(--brand-500);font-size:var(--f11);font-weight:600;color:var(--white)}
.ilt-rota__kart > p{font-size:var(--f14);line-height:1.6;color:var(--foreground)}

/* Duz metin sutununda bolunmeyen uzun kelime (e-posta adresi, bitisik yazilmis URL) 360 px'te
   yatay tasiyordu (EN Privacy Policy, Personal Data Protection): yalniz sigmayan kelime bolunur. */
.duzmetin{overflow-wrap:break-word}

/* ---- Ingilizce surum (13.09.2026) ----
   Institutions We Have Agreements With: canlidaki logo listesi (kare gorseller), esit kutucuklar,
   eksik son satir ortalanir (CLAUDE.md 1). Hekim profili: canli metnin ustunde kare fotograf. */
.en-kurum{list-style:none;margin:0;padding-inline-start:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.en-kurum li{width:9rem;background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--corner-card);
  padding:0.75rem;display:grid;place-items:center}
.en-kurum img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.en-hekim__foto{width:12rem;height:12rem;border-radius:var(--corner-card);object-fit:cover;margin:0 0 1.5rem}

/* Duz metin icindeki dugme: .duzmetin a (lacivert, alti cizili) dugmenin beyaz yazisini eziyordu
   (EN hekim profili "Book an appointment" yazisiz gorunuyordu). */
.duzmetin a.btn{text-decoration:none}
.duzmetin a.btn--primary{color:var(--action-primary-foreground)}
/* Metin sutunundaki yan form (EN Contact Us): iki acilir liste yan yana sigmiyor, etiketler kirpiliyordu. */
.duzmetin .quick--yan .quick__bar{grid-template-columns:minmax(0,1fr)}

/* Randevu formundaki bal kupu: ekranda hic gorunmez, klavyeyle de gezilmez.
   display:none degil — bazi botlar gizli alanlari atliyor; ekran disina alinir. */
.quick__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* "İçeriğe geç": klavyeyle gezenin ilk durağı (CLAUDE.md 8). Odaklanmadan görünmez ama
   display:none değil — gizlenirse sekme sırasına hiç girmez. */
.skip-link{position:absolute;left:0.5rem;top:-4rem;z-index:1000;
  padding:0.625rem 1rem;border-radius:8px;
  background:var(--navy);color:#fff;text-decoration:none;font-weight:600;
  transition:top 150ms cubic-bezier(.2,0,0,1)}
.skip-link:focus-visible{top:0.5rem}

/* ===================== 404 (hata-*) =====================
   Adres bulunamadiginda gosterilir. Tek sutun, ortalanmis; ziyaretcinin oradan
   cikabilmesi icin uc yol: arama kutusu, anasayfa dugmesi ve bolum baglantilari.
   Arama kutusu listedeki (ktp-ara) kutunun ayni bicimi — ayni is, ayni gorunum.
   Turuncu yalnizca odak halkasinda ve etikette (CLAUDE.md 5: %5 kurali).
   ======================================================== */
.hata{padding:calc(var(--kust) + 2rem) 1.25rem 4rem;background:var(--surface-section);
  border-radius:0 0 var(--corner-section) var(--corner-section)}
@media (min-width:768px){.hata{padding-top:calc(var(--kust) + 4rem);padding-bottom:8rem}}

.hata__ic{max-width:42rem;margin:0 auto;text-align:center}

.hata__etiket{margin:0 0 0.75rem;color:var(--orange);letter-spacing:.16em}
.hata__h1{margin:0;color:var(--brand-500)}
.hata__lead{margin:1rem auto 0;max-width:34rem;color:var(--k-muted)}

/* Arama: kutu ve dugme tek hap icinde, listedeki arama gibi. */
.hata__ara{margin:2.25rem 0 0}
.hata__ara-etiket{display:block;margin-bottom:0.625rem;
  font-size:var(--f13);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--k-muted)}
.hata__kutu{display:flex;align-items:center;gap:0.75rem;
  height:3.25rem;padding:0 0.375rem 0 1.125rem;
  border-radius:999px;background:var(--white);box-shadow:0 8px 24px rgba(1,38,98,.08)}
/* Halka yalniz klavyeyle gezerken: fareyle tiklayinca turuncu cikmasin (CLAUDE.md 5). */
.hata__kutu:has(:focus-visible){outline:2px solid var(--orange);outline-offset:3px}
.hata__kutu svg{flex:none;width:1.125rem;height:1.125rem;color:var(--brand-500)}
.hata__kutu input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;
  font:inherit;font-size:var(--f15);color:var(--foreground)}
.hata__kutu input::placeholder{color:var(--k-muted)}
/* Dokunma hedefi 44 px (CLAUDE.md 8). */
.hata__dugme{flex:none;min-height:2.75rem;padding:0 1.375rem;border:0;border-radius:999px;
  cursor:pointer;background:var(--brand-500);color:var(--white);
  font:inherit;font-size:var(--f14);font-weight:600;
  transition:background 150ms cubic-bezier(.2,0,0,1)}
.hata__dugme:hover{background:var(--brand-900)}

.hata__eylem{margin:2rem 0 0}
.hata__eylem .btn{min-height:2.75rem}

.hata__bag{margin:3rem 0 0;padding-top:2rem;border-top:1px solid var(--border-subtle)}
.hata__bag-bas{margin:0 0 1rem;
  font-size:var(--f13);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--k-muted)}
.hata__bag ul{display:flex;flex-wrap:wrap;justify-content:center;gap:0.625rem;
  margin:0;padding:0;list-style:none}
/* li de flex olmali: icindeki baglanti inline-flex, satir yuksekligi 21 px kaliyor ve
   44 px'lik cipler tasip birbirinin uzerine biniyordu (telefonda 3 satira dusunce). */
.hata__bag li{display:flex}
.hata__bag a{display:inline-flex;align-items:center;min-height:2.75rem;
  padding:0 1.125rem;border-radius:999px;
  border:1px solid var(--border-subtle);background:var(--white);
  font-size:var(--f14);font-weight:500;color:var(--brand-500);text-decoration:none;
  transition:border-color 150ms cubic-bezier(.2,0,0,1)}
.hata__bag a:hover{border-color:var(--brand-500)}

/* Telefonda arama dugmesi alt satira iner: 320 px'te yan yana sigmiyor. */
@media (max-width:480px){
  .hata__kutu{flex-wrap:wrap;height:auto;padding:0.75rem;border-radius:var(--corner-card)}
  .hata__kutu input{width:100%;height:2.5rem}
  .hata__dugme{width:100%}
}

/* ===================== GOOGLE YORUMLARI (ycard ekleri) =====================
   Yorumdaki ad, yorumun Google'daki kaynagina baglanir (Google'in atif sarti).
   Temel `a{color:inherit;text-decoration:none}` rengi zaten devraliyor; burada
   yalniz hover alti cizgisi var (CLAUDE.md 5: baglantida hover alti cizgisi). */
.ycard__ad a:hover{text-decoration:underline;text-decoration-color:var(--orange);
  text-underline-offset:2px}

/* Yorumlar yatay rayda (kullanici istegi 28.09.2026): kartlar alt alta degil yan yana,
   oklarla / surukleyerek / kaydirarak gezilir. Davranis Ileri Tetkikler rayiyla ortak
   (main.js -> yatayRay), sinif adlari da ayni: .is-elle, .is-surukleniyor.
   Buradaki kurallar main.css'teki .yorum__liste izgarasini eziyor; o blok elle tutulan
   bolumde, bu blok dosyanin sonunda uretiliyor ve kaynak sirasiyla kazaniyor. */
.yorum__liste{
  display:flex;gap:1rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* Odak halkasi ve kart golgesi ust/alt kenarda kirpilmasin. */
  padding-block:0.25rem;
}
@media (min-width:700px){.yorum__liste{gap:1.25rem}}
.yorum__liste > .ycard{
  flex:0 0 auto;scroll-snap-align:start;
  width:min(21rem,80vw);
}
/* Ok dugmeleri varken kaydirma cubugu gereksiz; suruklerken snap kapanir. */
.yorum__liste.is-elle{scrollbar-width:none}
.yorum__liste.is-elle::-webkit-scrollbar{display:none}
.yorum__liste.is-surukleniyor{scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.yorum__liste.is-surukleniyor,.yorum__liste.is-surukleniyor *{cursor:grabbing}
@media (prefers-reduced-motion:reduce){.yorum__liste{scroll-behavior:auto}}

/* Oklar ozet satirinin sagina, Google baglantisinin yanina oturur. Ucuncu oge geldigi
   icin space-between artik dogru dagitmiyor: baglanti auto pay ile saga itiliyor. */
.yorum__ozet{justify-content:flex-start}
.yorum__link{margin-inline-start:auto}
.yorum-nav:not([hidden]){display:flex;gap:0.625rem}

/* "Devamını oku": yorum bes satirda kirpiliyor, sigmayan kartta main.js bu baglantiyi
   acar ve yorumun Google Haritalar'daki tamamina gonderir. Kartin altina yapisir ki
   raydaki kartlarda ayni hizada dursun. */
.ycard__devam{
  margin-block-start:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:0.375rem;min-height:2.75rem;
  font-size:var(--f14);font-weight:600;color:var(--brand-500);
}
.ycard__devam::after{content:"›";font-size:var(--f16);line-height:1}
.ycard__devam:hover{text-decoration:underline;text-decoration-color:var(--orange);
  text-underline-offset:2px}
.ycard__devam:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
/* ===== ALT SAYFALAR (bitis) ===== */