/* ==================================================================
   OPS 1 — STİL KILAVUZU
   Bu belge kendi kurallarıyla yazılmıştır: burada gördüğünüz her
   düğme, başlık ve çizgi, tarif ettiği değerlerin kendisidir.
   Tek kaynak §10'daki jeton bloğudur.
   ================================================================== */
:root{
  /* --- Yüzeyler --- */
  --bg:#FCFAF7;          /* sayfa zemini */
  --surf:#F2EDE6;        /* ikincil yüzey: panel, alıntı, hekim bandı */
  --field:#1E1913;       /* koyu bant: randevu bloğu, açılır menü */

  /* --- Mürekkep --- */
  --ink:#1E1913;         /* birincil metin */
  --ink2:#6E655A;        /* ikincil metin */
  --on-dark:#FCFAF7;     /* koyu zemin üstü metin */
  --on-dark-2:rgba(252,250,247,.62);

  /* --- Vurgu ---
     2026-09: terrakota (#A0512E) yerine daha yumuşak, daha az "burnt orange"
     hissi veren toz gülü (dusty rose-brown/mauve). Kullanıcının önerdiği
     #9B716D biraz koyultuldu (L -0.05) — aksi halde açık zemin üstünde
     4.5:1'in altında kalıyordu; bu projede kontrast pazarlık konusu değil. */
  --acc:#8E6561;         /* toz gülü — açık zeminde */
  --acc-dk:#805B58;      /* birincil düğme hover */
  --acc-pr:#73524E;      /* birincil düğme basılı */
  --acc-lt:#AC8D8A;      /* koyu zemin üstünde vurgu */
  --danger:#9B2C1E;      /* hata / uyarı */

  /* --- Çizgi --- */
  --edge:rgba(30,25,19,.14);      /* kılcal çizgi */
  --edge-md:rgba(30,25,19,.28);   /* girdi çerçevesi */
  --edge-st:rgba(30,25,19,.55);   /* ikincil düğme çerçevesi */

  /* --- Fotoğraf tonlaması --- */
  --pa:#E3DACD; --pb:#C2B4A2; --pc:#8C7B68;
  --phi-hi:rgba(255,248,238,.55); --phi-lo:rgba(74,45,28,.36);

  /* --- Ölçü --- */
  --max:1440px;
  --gut:clamp(20px,4vw,64px);
  --col-gap:24px;
  --read:68ch;
  --radius:0px;
  --motion:150ms cubic-bezier(.2,0,0,1);

  /* --- Boşluk merdiveni (8 tabanlı) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* --- Aileler ---
     2026-09 (11): kullanıcı isteğiyle sitenin TAMAMI TEK bir yazı tipi
     ailesine — Century Gothic'e — çekildi. Kit (mky6ggw) kontrol edildi:
     "century-gothic" ailesi kitte GERÇEKTEN yüklü, 400 (Regular) ve 700
     (Bold) ağırlıkları var (normal+italic); Türkçe karakterler (İ ı Ş ş
     Ğ ğ Ç ç Ö ö Ü ü) gerçek fontla ayrı bir canlı testte doğrulandı.
     Ara/geçiş ağırlık yok — 300/500/600 gibi bir değer istenirse tarayıcı
     yapay kalınlaştırma YAPMADAN en yakın gerçek dosyaya (400 veya 700)
     yuvarlıyor; sistemdeki tüm başlık/gövde sınıfları bu yüzden yalnızca
     400 ve 700 kullanacak şekilde güncellendi (aşağıda .t-displayxl vb.).
     Önceki çok-aileli sistem (IvyPresto Display başlıkta, Helvetica LT
     Pro gövdede, Aktiv Grotesk kategori/bağlantılarda) tamamen kaldırıldı
     — geriye dönük uyumluluk için token ADLARI (--sans/--mono/--display/
     --serif/--sig/--grotesk) korundu ama hepsi ARTIK AYNI aileyi
     gösteriyor, böylece bu adları kullanan onlarca CSS kuralı tek tek
     değiştirilmeden otomatik olarak Century Gothic'e geçti. Google Fonts
     zaten kaldırılmıştı; tek yazı tipi kaynağı Adobe Fonts/Typekit kiti. */
  --sans:"century-gothic","Century Gothic",Futura,"Trebuchet MS",Arial,sans-serif;
  --mono:var(--sans);
  --display:var(--sans);
  --serif:var(--sans);
  --sig:var(--sans);
  --grotesk:var(--sans);
}
*{box-sizing:border-box;margin:0;padding:0}
/* overflow-anchor:none — Base.astro'daki script, sabit başlığa yer açmak için
   sayfa yüklenir yüklenmez gövdeye padding-top ekliyor (0 → ~96-130px'lik
   gerçek bir düzen kayması). Tarayıcının "scroll anchoring" özelliği bu
   kaymayı telafi etmek için sayfayı OTOMATİK olarak aynı miktarda aşağı
   kaydırıyordu — sonuç: sayfa scrollY=0 yerine ~110px kaydırılmış açılıyor,
   bu da üstteki bilgi şeridinin (telefon/randevu) daha ilk açılışta
   'kaydırılmış' sanılıp kapanmasına yol açıyordu. Anchoring kapatılınca
   padding-top gövdeye eklenir, sayfa scrollY=0'da kalır. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-anchor:none}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ---------- Belge iskeleti ---------- */
.top{padding:var(--s9) 0 var(--s7);border-bottom:1px solid var(--ink)}
.doc-lab{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.doc-h1{font-family:var(--display);font-weight:300;font-size:clamp(34px,4.8vw,64px);
        line-height:1.18;letter-spacing:0;margin-top:var(--s5)}
.doc-lede{font-size:19px;line-height:1.7;color:var(--ink2);max-width:60ch;margin-top:var(--s5)}
.doc-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin-top:var(--s7);
          padding-top:var(--s5);border-top:1px solid var(--edge)}
.doc-meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
.doc-meta dd{font-size:15px;margin-top:var(--s2)}
@media (max-width:820px){.doc-meta{grid-template-columns:repeat(2,1fr)}}

section.sec{background:var(--bg);padding:var(--s9) 0 var(--s7);border-bottom:1px solid var(--edge)}
.sec-h{display:flex;align-items:baseline;gap:var(--s4);padding-bottom:var(--s4);
       border-bottom:1px solid var(--edge-st);margin-bottom:var(--s6)}
.sec-h em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--acc)}
.sec-h h2{font-family:var(--display);font-weight:400;font-size:24px;
          letter-spacing:0;line-height:1.3}
.why{font-size:16px;line-height:1.75;color:var(--ink2);max-width:var(--read);margin-bottom:var(--s6)}
.why b{color:var(--ink);font-weight:600}
h3.sub{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
       color:var(--ink2);padding-bottom:var(--s2);border-bottom:1px solid var(--edge);margin:var(--s7) 0 var(--s5)}
h3.sub:first-of-type{margin-top:0}

/* ---------- Tablo ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
        color:var(--ink2);text-align:left;padding:0 var(--s4) var(--s2) 0;border-bottom:1px solid var(--ink);white-space:nowrap}
.tbl td{padding:var(--s3) var(--s4) var(--s3) 0;border-bottom:1px solid var(--edge);vertical-align:top}
.tbl td.mono,.tbl td code{font-family:var(--mono);font-size:12px;color:var(--ink2);white-space:nowrap}
.tbl td b{font-weight:600}
.scrollx{overflow-x:auto}

/* ---------- Renk ---------- */
.sw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--edge)}
.sw-grid > div{border-right:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.sw-grid > div:nth-child(4n){border-right:0}
.sw{height:120px}
.sw-m{padding:var(--s4)}
.sw-m b{display:block;font-weight:600;font-size:14px}
.sw-m code{display:block;font-family:var(--mono);font-size:12px;color:var(--ink2);margin-top:var(--s1)}
.sw-m span{display:block;font-size:13px;line-height:1.55;color:var(--ink2);margin-top:var(--s2)}
@media (max-width:900px){.sw-grid{grid-template-columns:repeat(2,1fr)}.sw-grid > div{border-right:1px solid var(--edge)}}

/* ---------- Tipografi örnekleri ---------- */
.spec{display:grid;grid-template-columns:210px minmax(0,1fr);gap:var(--s6);
      padding:var(--s5) 0;border-bottom:1px solid var(--edge);align-items:baseline}
.spec:first-of-type{border-top:1px solid var(--ink)}
.spec .k b{display:block;font-weight:600;font-size:14px}
.spec .k code{display:block;font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--ink2);margin-top:var(--s2)}
.spec .k i{display:block;font-style:normal;font-size:13px;line-height:1.55;color:var(--ink2);margin-top:var(--s2)}
@media (max-width:820px){.spec{grid-template-columns:1fr;gap:var(--s3)}}

/* 2026-09 (10): kullanıcının verdiği 3 kademeli başlık sistemi —
   açılış (t-displayxl) ve bölüm (t-h1) başlıkları IvyPresto Display
   LIGHT (kitte gerçekten yüklü: weight 300, gerçek dosyaya karşılık
   geliyor, yapay incelik değil); tedavi kategorileri (.tcol h3, aşağıda)
   IvyPresto Display REGULAR (400). */
/* 2026-09 (11): Century Gothic'te Light(300) yok — Regular(400) kullanılıyor
   (kullanıcının açık isteği de zaten buydu). Satır yüksekliği sıkılaştırıldı
   (1.1-1.15), harf aralığı hafif negatif (-0.02em, geometrik sans'ın büyük
   puntoda fazla açık durmasını dengeliyor) — ama tek satıra ZORLAMA yok,
   gerektiğinde doğal satır kırılmasına izin veriliyor (bkz. clamp aralığı,
   sıkıştırma yapılmadı). */
/* 2026-09 (12): kullanıcı ilk ölçeği ("52-64px") gördükten sonra
   Century Gothic'in geniş/geometrik karakterinde çok iri durduğunu
   söyledi ("hayvan gibi olmuşlar") — ana başlıklar bir kademe küçültüldü. */
.t-displayxl{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,44px);line-height:1.15;letter-spacing:-0.02em;color:var(--acc)}
.t-display{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.6vw,34px);line-height:1.18;letter-spacing:-0.02em;color:var(--acc)}
.t-h1{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,44px);line-height:1.15;letter-spacing:-0.02em;color:var(--acc)}
.t-h2{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.3;letter-spacing:0;color:var(--acc)}
.t-h3{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.32;letter-spacing:0;color:var(--acc)}
.t-h4{font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.4}
.t-lede{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.7;color:var(--ink2)}
.t-body{font-family:var(--serif);font-weight:400;font-size:16px;line-height:1.6}
@media (min-width:640px){.t-body{font-size:19px}}
.t-body-s{font-family:var(--serif);font-weight:400;font-size:15px;line-height:1.7;color:var(--ink2)}
.t-small{font-weight:400;font-size:13px;line-height:1.6;color:var(--ink2)}
.t-label{font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.t-nav{font-weight:400;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.t-sig{font-family:var(--sig);font-style:italic;font-size:24px}

/* ---------- Düğmeler ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);
     font-weight:700;letter-spacing:.09em;text-transform:uppercase;border:1px solid transparent;
     border-radius:var(--radius);cursor:pointer;white-space:nowrap;text-decoration:none;
     transition:background var(--motion),color var(--motion),border-color var(--motion)}
.btn-l{min-height:52px;padding:0 28px;font-size:13px}
.btn-m{min-height:44px;padding:0 22px;font-size:12px}
.btn-s{min-height:36px;padding:0 16px;font-size:11px;letter-spacing:.14em}
.btn-primary{background:var(--acc);color:var(--on-dark)}
.btn-primary:hover{background:var(--acc-dk)}
.btn-primary:active{background:var(--acc-pr)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--edge-st)}
.btn-secondary:hover{background:var(--surf);border-color:var(--ink)}
.btn-outline{background:transparent;color:var(--acc);border-color:var(--acc)}
.btn-outline:hover{background:var(--acc);color:var(--on-dark)}
.btn-inverse{background:var(--bg);color:var(--field)}
.btn-inverse:hover{background:#fff}
.btn-quiet{background:transparent;color:var(--ink2);padding-left:0;padding-right:0}
.btn-quiet:hover{color:var(--ink)}
.btn[disabled],.btn.is-disabled{opacity:.42;pointer-events:none}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.on-dark{background:var(--field);padding:var(--s5);margin-top:var(--s4)}
.state{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s5)}
.state > div{border:1px solid var(--edge);padding:var(--s4)}
.state p{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:var(--s3)}
@media (max-width:820px){.state{grid-template-columns:repeat(2,1fr)}}

/* ---------- Bağlantı ---------- */
a.inline{color:var(--ink);text-decoration:underline;text-decoration-color:var(--edge-md);
         text-underline-offset:4px;transition:text-decoration-color var(--motion)}
a.inline:hover{text-decoration-color:var(--ink)}
a.standalone{color:var(--acc);text-decoration:none;font-weight:600;font-size:15px}
a.standalone:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Form ---------- */
.field{max-width:420px}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
             text-transform:uppercase;color:var(--ink2);margin-bottom:var(--s2)}
.field input,.field textarea{width:100%;min-height:52px;background:var(--bg);color:var(--ink);
       border:1px solid var(--edge-md);border-radius:var(--radius);padding:14px 16px;
       font-family:var(--sans);font-size:16px;line-height:1.5;transition:border-color var(--motion)}
.field textarea{min-height:120px;resize:vertical}
.field input:hover,.field textarea:hover{border-color:var(--edge-st)}
.field .help{font-size:13px;color:var(--ink2);margin-top:var(--s2)}
.field.err input{border-color:var(--danger)}
.field .err-msg{font-size:13px;color:var(--danger);margin-top:var(--s2)}

/* ---------- Bileşen örnekleri ---------- */
.demo{border:1px solid var(--edge);margin-top:var(--s4)}
.demo-cap{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
          color:var(--ink2);margin-top:var(--s3)}
.c-util{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;
        padding:10px 24px;border-bottom:1px solid var(--edge);font-size:12px;color:var(--ink2)}
.c-util b{color:var(--ink);font-weight:700}
.c-mast{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);flex-wrap:wrap;padding:18px 24px}
.c-logo{font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:.04em;line-height:1.22}
.c-logo em{display:block;font-style:normal;font-weight:400;font-size:9px;letter-spacing:.2em;color:var(--ink2);margin-top:3px}
.c-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:11px;letter-spacing:.04em;
       text-transform:uppercase;color:var(--ink2)}
.c-nav .on{color:var(--ink);font-weight:700}
.c-drop{background:var(--field);color:var(--on-dark);padding:16px 20px;display:grid;gap:8px;max-width:220px}
.c-drop span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.c-drop span:first-child{color:var(--acc-lt);font-weight:700}
.c-idx{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);padding:var(--s5) 24px}
.c-idx .n{font-family:var(--mono);font-size:11px;color:var(--acc)}
.c-idx b{display:block;font-family:var(--display);font-weight:600;font-size:21px;
         letter-spacing:0;margin:6px 0 14px}
.c-idx u{display:block;text-decoration:none;font-size:15px;color:var(--ink2);padding:8px 0;border-top:1px solid var(--edge)}
@media (max-width:820px){.c-idx{grid-template-columns:1fr}}
.c-cta{background:var(--field);color:var(--on-dark);display:flex;flex-wrap:wrap;gap:var(--s5);
       align-items:center;justify-content:space-between;padding:var(--s6) 24px}
.c-cta b{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:0}
.c-cta p{font-size:14px;color:var(--on-dark-2);margin-top:4px}
.c-quote{background:var(--surf);padding:var(--s7) 24px;text-align:center}
.c-quote p{font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.005em;max-width:34ch;margin:0 auto}
.c-quote cite{display:block;font-style:normal;font-family:var(--mono);font-size:10px;
              letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-top:var(--s5)}

/* ---------- Fotoğraf ---------- */
.ph{position:relative;overflow:hidden;background:var(--pb)}
.ph::before{content:"";position:absolute;inset:0;
  background:radial-gradient(115% 85% at 22% 12%,var(--phi-hi) 0%,transparent 58%),
             radial-gradient(95% 85% at 82% 92%,var(--phi-lo) 0%,transparent 62%),
             linear-gradient(158deg,var(--pa) 0%,var(--pb) 52%,var(--pc) 100%)}
.ph span{position:absolute;left:0;bottom:0;z-index:2;padding:8px 12px;font-family:var(--mono);
         font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(15,14,13,.4)}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);align-items:start}
.ph-grid > .wide{grid-column:1/-1}
@media (max-width:820px){.ph-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- Boşluk göstergesi ---------- */
.space{display:grid;gap:var(--s2)}
.space div{background:var(--surf);border-left:2px solid var(--acc);display:flex;align-items:center;
           padding-left:12px;font-family:var(--mono);font-size:11px;color:var(--ink2)}

/* ---------- Kod ---------- */
pre{background:var(--field);color:#E8E2D8;padding:var(--s5);overflow-x:auto;
    font-family:var(--mono);font-size:12px;line-height:1.85}
pre .c{color:#9A8F80}
pre .v{color:var(--acc-lt)}

/* ---------- Yasaklar ---------- */
.bans{border-top:1px solid var(--ink);max-width:var(--read)}
.ban{display:grid;grid-template-columns:24px 1fr;gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--edge)}
.ban i{font-style:normal;color:var(--danger);font-size:15px}
.ban b{display:block;font-weight:600;font-size:15px}
.ban span{display:block;font-size:14px;line-height:1.6;color:var(--ink2);margin-top:2px}

footer.end{padding:var(--s7) 0 var(--s9);color:var(--ink2);font-size:14px;max-width:var(--read)}
@media print{body{background:#fff}section.sec{break-inside:avoid}pre{background:#f2ede6;color:#1e1913}}

/* ==================================================================
   Üretim sitesi bileşenleri — OPS1 token'ları üzerine, stil kılavuzunun
   yalnızca dokümantasyon için var olan sınıflarına (.doc-*, .sw-*,
   .spec, .tbl, .bans…) dokunmadan eklenmiştir.
   ================================================================== */

/* ---------- Sabit başlık: iki kat → tek kat ----------
   Sayfa kaydırılırken pratik bilgi şeridi kapanır, kaydırma durunca geri
   açılır. Yükseklik grid-template-rows 1fr↔0fr ile geçirilir; böylece şerit
   mobilde iki satıra sardığında da doğru yükseklikten kapanır. */
/* Başlık akıştan çıkarıldı. sticky olsaydı boyu değiştikçe belge yerleşimi
   kayar, tarayıcının scroll çıpalaması scrollY'yi düzeltir, bu da yeni bir
   scroll olayı doğurur ve başlık iki yükseklik arasında sonsuz salınırdı.
   fixed + gövdeye açılmış hâlin yüksekliği kadar dolgu: içerik hiç oynamaz. */
header{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--bg);
       --util-motion:80ms linear}
header.measuring,header.measuring .util{transition:none}
/* 2026-09: şerit kapanma/açılma geçişi hızlandırıldı. Öncesinde
   var(--motion) (150ms cubic-bezier) + 60ms gecikme kullanılıyordu —
   toplamda 210ms'lik, S-eğrili (yavaş başlayıp yavaş biten) bir hareket,
   sayfa kaydırırken sürekli tekrarlandığı için ağır/"sıkıcı" hissettiriyordu.
   Kaydırma sırasında tekrar eden bu tür küçük UI geçişleri için sabit,
   paylaşılan --motion yerine kendi kısa süresi (--util-motion, header
   üzerinde tanımlı) var: gecikme kaldırıldı, süre kısaltıldı, eğri
   linear'a çekildi — artık neredeyse anlık ama yine de aniden kesilmiyor. */
header .util{display:grid;grid-template-rows:1fr;
             transition:grid-template-rows var(--util-motion)}
header .util > .wrap{width:100%;overflow:hidden;min-height:0}
/* Dikey dolgu da kapanmalı: grid öğesinin asgari boyuna dolgu dahildir,
   min-height:0 onu kaldırmaz — bırakılırsa iz 20px'te takılı kalır ve
   şeridin içindeki düğmenin üst kenarı görünmeye devam eder. */
header .util .in{transition:padding-top var(--util-motion),
                            padding-bottom var(--util-motion)}
header.is-compact .util{grid-template-rows:0fr;border-bottom-width:0}
header.is-compact .util .in{padding-top:0;padding-bottom:0}
@media (prefers-reduced-motion:reduce){
  header .util,header .util .in{transition:none}}
/* Sabit başlık çapa bağlantılarının hedefini örtmesin — sabit bir piksel
   yerine gerçek başlık yüksekliği kullanılır: Base.astro'daki script,
   başlığın "daralmış" (is-compact) hâlini ölçüp bunu --header-h'e yazar.
   Çapa navigasyonundan sonra başlık her zaman daralmış durumda olacağı
   için ölçüm o hâle göre yapılır; böylece hangi kırılım noktasında,
   hangi başlık boyutunda olursak olalım hedef bölüm başlığı tam başlığın
   altında hizalanır, ne bir önceki bölümün kuyruğu görünür ne de fazladan
   boşluk kalır. */
section[id]{scroll-margin-top:var(--header-h,96px)}

/* ---------- Üst bant ---------- */
.util{border-bottom:1px solid var(--edge)}
.util .in{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
          flex-wrap:wrap;padding:10px var(--gut);font-size:12px;color:var(--ink2)}
.util b{color:var(--ink);font-weight:700}
.util-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.util-call{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.util-call svg{width:14px;height:14px;flex:none}
.util-call-label{font-family:var(--sans);font-weight:400;font-size:12px;color:var(--ink2)}

/* 2026-09 (13): mobilde bu şerit artık scroll'da kaybolmuyor (masaüstünde
   hâlâ .is-compact ile daralıyor — bkz. header .js), sitenin accent
   renginde, adres yok (dar ekranda yer kaplıyordu), telefon numarası
   köşeli (radius:0) çerçeveli bir "chip" — kullanıcının referans
   gösterdiği siteye benziyor ama sistemin köşeli/gölgesiz diline uygun
   şekilde YUVARLATILMADI. Safari'nin telefon numaralarını kendiliğinden
   mavi/altı çizili link yapması ayrı olarak <meta name="format-detection">
   ile kapatıldı (bkz. Base.astro) — asıl "rezalet" görünüm buydu. */
@media (max-width:920px){
  header.is-compact .util{grid-template-rows:1fr}
  header.is-compact .util .in{padding-top:10px;padding-bottom:10px}
  .util{background:var(--acc);border-bottom-color:var(--acc)}
  .util .in{color:var(--on-dark);justify-content:center}
  .util-addr{display:none}
  .util-cta{width:100%;justify-content:center}
  .util-call{border:1px solid var(--on-dark-2);padding:9px 18px;color:var(--on-dark)}
  .util-call b{color:var(--on-dark)}
  .util-call-label{color:var(--on-dark-2)}
  .util .btn-secondary{display:none}
}

/* ---------- Künye + menü ---------- */
.mast{border-bottom:1px solid var(--edge-st)}
.mast .in{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);
          flex-wrap:wrap;padding:18px var(--gut)}
.brand{font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:.04em;line-height:1.22;
       color:var(--acc);text-decoration:none;display:inline-flex;align-items:center;gap:10px}
/* 2026-09: kullanıcının verdiği marka işareti (hedef/güneş simgesi,
   toz-gülü tonunda -- bkz. public/assets/img/logos/marka.png) isim/
   unvanın SOLUNA eklendi. object-fit:contain + flex:0 0 auto: metin
   sütunu satır sarınca (dar ekran/uzun unvan) simge asla sıkışıp
   deforme olmasın. */
.brand-mark{display:block;width:34px;height:34px;object-fit:contain;flex:0 0 auto}
.brand em{display:block;font-style:normal;font-weight:400;font-size:9px;letter-spacing:.2em;
          color:var(--ink2);margin-top:3px}
nav.menu{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;
         letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}
nav.menu a{color:var(--ink2);text-decoration:none}
nav.menu a:hover,nav.menu a.on{color:var(--ink)}
nav.menu a.on{font-weight:700}
nav.menu .sep{opacity:.35}

/* ---------- Geniş masaüstü: künye/menü büyütme ----------
   920px'in üstünde tek satır menüye geçildikten sonra, künye şeridi büyük
   ekranlarda (1280px+) hâlâ küçük kalıyordu. Logo, dolgu ve menü kademeli
   olarak büyür; içerik genişliği --max ile zaten sınırlı olduğundan bu
   yalnızca başlığın kendi oranını büyütür, düzeni bozmaz. */
@media (min-width:1280px){
  .mast .in{padding:24px var(--gut)}
  .brand{font-size:19px}
  .brand-mark{width:38px;height:38px}
  .brand em{font-size:10px;margin-top:4px}
  nav.menu{font-size:14px;gap:16px}
}
@media (min-width:1680px){
  .mast .in{padding:28px var(--gut)}
  .brand{font-size:21px}
  .brand-mark{width:42px;height:42px}
  nav.menu{font-size:15px;gap:20px}
}

/* ---------- Mobil menü (burger) ---------- */
.m-menu{display:none}
.m-menu summary{list-style:none;display:grid;gap:4px;cursor:pointer;
        padding:13px 0;width:44px;justify-items:end}
.m-menu summary::-webkit-details-marker{display:none}
.m-menu summary i{display:block;width:18px;height:1.5px;background:var(--ink);
        transition:transform var(--motion)}
.m-menu summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.m-menu[open] summary{position:fixed;top:18px;right:var(--gut);height:33px;
        align-content:center;padding:0;z-index:2}
.m-menu[open] summary i{background:var(--on-dark)}
.m-menu[open] summary i:first-child{transform:translateY(2.75px) rotate(45deg)}
.m-menu[open] summary i:last-child{transform:translateY(-2.75px) rotate(-45deg)}
.m-screen{position:fixed;inset:0;z-index:1;background:var(--field);color:var(--on-dark);
          overflow-y:auto;overscroll-behavior:contain;
          display:flex;flex-direction:column;padding:0 var(--gut) var(--s7)}
/* Üst satır künye bandının birebir ölçüsü (18px dolgu) — menü açılınca
   marka ve X, kapalıyken durdukları yerde kalır, hiçbir şey zıplamaz. */
.m-top{padding:18px 0;border-bottom:1px solid rgba(252,250,247,.18)}
.m-brand{display:block;font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:.04em;line-height:1.22;
         color:var(--on-dark)}
.m-brand em{display:block;font-style:normal;font-weight:400;font-size:9px;letter-spacing:.2em;
            color:var(--on-dark-2);margin-top:3px}
.m-panel{display:grid;align-content:center;flex:1;padding:var(--s7) 0}
.m-panel a{display:block;padding:var(--s4) 0;font-family:var(--sans);font-weight:700;font-size:24px;line-height:1.2;
           letter-spacing:0;text-transform:uppercase;
           color:var(--on-dark);text-decoration:none}
.m-panel a.on{color:var(--acc-lt)}
.m-foot{display:grid;gap:var(--s2);padding-top:var(--s5);
        border-top:1px solid rgba(252,250,247,.18);font-size:14px;color:var(--on-dark-2)}
.m-foot a{color:var(--on-dark);text-decoration:none;font-weight:700}
@media (max-width:920px){
  .mast{position:relative}
  .mast .in{flex-wrap:nowrap}
  nav.menu{display:none}
  .m-menu{display:block}
}

/* ---------- Hero ---------- */
.hero{background:var(--bg);padding:var(--s9) 0 var(--s7);border-bottom:1px solid var(--edge)}
.hero .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:var(--s8);align-items:start}
.hero .ph{aspect-ratio:3/4}
.hero .t-lede{margin-top:var(--s5);max-width:46ch}
.hero .btn{margin-top:var(--s6)}
@media (max-width:960px){.hero .grid{grid-template-columns:1fr}.hero .ph{aspect-ratio:16/9;order:-1}}

/* ---------- Hekim bandı ---------- */
.about-band{background:var(--surf);padding:var(--s8) 0}
.about-band .grid{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,1fr);gap:var(--s8);align-items:start}
.about-band .ph{aspect-ratio:4/5}
.cv2{margin-top:var(--s6);display:grid;gap:0}
.cv2 div{display:grid;grid-template-columns:120px 1fr;gap:var(--s4);padding:var(--s3) 0;
         border-top:1px solid var(--edge);font-size:14px}
.cv2 div:last-child{border-bottom:1px solid var(--edge)}
.cv2 em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink2)}
@media (max-width:960px){.about-band .grid{grid-template-columns:1fr}.cv2 div{grid-template-columns:96px 1fr}}

/* 2026-09 (15): Üyelik satırı düz metin yerine kurum logoları gösterir
   (bkz. CvList.ts / site.json doctor.cv[].logos). Grayscale + opasite ile
   sitenin sakin paletine uydurulur, hover'da tam renge döner. */
.cv-logo-row{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--s4)}
.cv-logo-row .cv-logo-box{flex:1 1 0;min-width:0;height:34px;display:flex;align-items:center;justify-content:center}
.cv-logo-row img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
                  filter:grayscale(1);opacity:.55;transition:opacity var(--motion),filter var(--motion)}
.cv-logo-row img:hover{filter:grayscale(0);opacity:1}
@media (max-width:960px){
  .cv-logo-row{gap:var(--s2)}
  .cv-logo-row .cv-logo-box{height:26px}
}
@media (prefers-reduced-motion:reduce){.cv-logo-row img{transition:none}}

/* Ana sayfadaki kısaltılmış CV önizlemesinin altındaki "tam sayfaya git"
   bağlantısı — tcol-arrow'daki hover kaymasıyla aynı dil. */
.link-more{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s6);
           font-family:var(--sans);font-weight:700;font-size:14px;color:var(--acc);
           text-decoration:none;transition:gap var(--motion)}
.link-more:hover{gap:var(--s3)}
@media (prefers-reduced-motion:reduce){.link-more{transition:none}}

/* ---------- Tedavi dizini (kılavuz §07 .c-idx) ----------
   Sekiz başlık 4×2'ye tam oturur; artan boş hücre kalmaz. Hücreler flex
   sütun olduğu için açıklama satırı margin-top:auto ile aynı satırdaki
   diğerleriyle aynı hizada oturur — başlık iki satıra kırılsa bile. */
.idx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--s6)}
.idx a{display:flex;flex-direction:column;text-decoration:none;
       padding:var(--s5) 0 var(--s6);border-top:1px solid var(--edge)}
.idx .n{font-family:var(--mono);font-size:11px;color:var(--acc)}
.idx b{display:block;font-family:var(--display);font-weight:600;font-size:21px;
       line-height:1.28;letter-spacing:0;color:var(--ink);
       margin:6px 0 var(--s5);transition:color var(--motion)}
.idx a:hover b{color:var(--acc-dk)}
.idx .d{display:block;margin-top:auto;font-size:14px;line-height:1.6;color:var(--ink2)}
@media (max-width:1000px){.idx{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.idx{grid-template-columns:1fr}}

/* ---------- Tedaviler (ana sayfa) — editöryel 3 sütunlu dizin ----------
   2026-09: sekiz düz kartlık .idx yerine, ana sayfaya özel, üç klinik
   başlık altında gruplanmış "basılı dizin/lüks klinik broşürü" düzeni.
   Sistemin kendi iki katmanlı çizgi dili yeniden kullanılıyor: sütun
   başlığının altındaki çizgi --edge-st (header/footer/sec-h ile aynı,
   daha belirgin katman), satır aralarındaki çizgiler --edge (daha ince,
   ikincil katman). Sıra numarası .t-label / nav.menu ile aynı Helvetica
   ailesini kullanır — ayrı bir "mono" yok.
   2026-09 (guide hizalaması): sütun başlığı (ör. "ŞAŞILIK") başta Helvetica
   ile kurulmuştu ("sistemin geri kalanıyla aynı ses" gerekçesiyle) ama bu,
   OPS1-stil-kilavuzu.html'nin kendi §02/§07'de belgelediği kuralla çelişiyordu:
   .t-h3 (Source Serif 4, 600, 21px) tam olarak "tedavi dizini sütunu, kart
   başlığı" için tanımlanmış — yani bu düzeydeki gruplama başlıkları site
   genelinde (t-h1/t-h2 gibi) SERİF ailede olmalı, gövde/etiket/numara katmanı
   Helvetica'da kalmalı. Aşağıdaki kural artık --display kullanıyor; versal
   (uppercase) + kalın vurgu kullanıcının açık isteği olduğu için korundu,
   yalnızca aile guide'e göre düzeltildi.
   2026-09 (revize, sonradan geri alındı — bkz. aşağıda "guide hizalaması"):
   bölüm bir ara 100svh içinde dikey olarak ortalanıyordu; canlıda bunun
   sayfanın geri kalanından kopuk, ortada asılı bir boşluk bıraktığı
   görülünce bu ortalama TAMAMEN kaldırıldı, bölüm diğer .sec'lerle aynı
   üstten-başlayan düzene döndü. Sütun aralığı daraltıldı (96px → 64px,
   sütunlar daha geniş görünüyor);
   satır yüksekliği artırıldı; tedavi metni artık --ink2 yerine --ink'in
   %78 opaklıklı hali — kategori başlığından (tam --ink) ayrışan ama
   eskisinden belirgin ölçüde daha koyu, "ılık koyu gri" bir ara ton
   (kontrast ~8.4:1, WCAG eşiğinin oldukça üstünde). Randevu bandı artık
   bu bölümün İÇİNDE değil — kendi ayrı <CtaBand> section'ı olarak
   Tedaviler'den sonra, İletişim'den önce, bir geçiş şeridi olarak duruyor
   (bkz. index.astro) — snap noktası değil, bölümün 100svh'ini kesmiyor.
   2026-09 (guide hizalaması, devam): kenar çerçevesi kaldırıldı — içerik
   dolgusu az olduğunda (ör. 3. sütun daha kısa) çerçeve, içi kısmen boş bir
   "kutu" gibi okunuyordu; bu da guide'in "kutu ve gölge yoktur" ilkesiyle
   ve kullanıcının "bu kenardaki borderlar gitsin" talimatıyla çelişiyordu.
   İç boşluk (padding) aynı kalıyor, yalnızca görünür çizgi kaldırıldı.
   2026-09 (editöryel bölünmüş düzen): bölüm artık tek bir merkezi .wrap
   yerine SOL (metin+dizin, ~%58) / SAĞ (büyük dikey görsel, ~%42) olarak
   ikiye bölünmüş. Sol taraf, sitenin geri kalanıyla aynı sol hizaya
   (bkz. --gut/--max formülü aşağıda) oturuyor; sağ taraf kasıtlı olarak
   .wrap'in dışında — ekranın SAĞ kenarına kadar taşıyor ("bleed"), böylece
   görsel küçük/dekoratif değil, bölümün kendisi kadar güçlü bir kompozisyon
   öğesi gibi okunuyor. Görsel guide'in KENDİ belgelediği ".ph" (fotoğraf
   yer tutucu) bileşeni yeniden kullanılarak kuruluyor — yeni bir görsel dil
   icat edilmedi. Dört durum üst üste (opacity ile) duruyor: nötr/varsayılan
   + üç kategori; index.astro'daki küçük script, hangi .tcol'un üzerine
   gelindiğini (data-group) okuyup ilgili .timg-XX'i aktif hâle getiriyor.
   Gerçek klinik fotoğrafı gelene kadar dört ayrı ton kullanılıyor — sistem
   sıcak/nötr paletinin (--acc ailesi dahil) dışına hiç çıkmıyor. */
.tedaviler-intro{margin-bottom:var(--s7)}
/* 2026-09 (7): IvyPresto artık --display üzerinden TÜM sitede geçerli
   (bkz. guide) — ayrı font-family/font-weight override'ına gerek kalmadı.
   Üst etiket ("Tedaviler") kaldırıldığı için margin-top de kaldırıldı. */
.tedaviler-intro .t-h1{max-width:46ch}
/* 2026-09 (düzeltme, devam): görsel önce ekranın SAĞ kenarına kadar
   taşıyordu ("bleed") — kullanıcı bunun yerine, işaretlenmiş bir ekran
   görüntüsüyle, görselin sağ kenarının üst menüdeki (navbar) içerikle
   AYNI noktada bitmesini istedi. .wrap zaten tüm site genelinde bu hizayı
   (max-width:var(--max), ortalanmış, var(--gut) iç boşluk) sağlıyor — navbar
   da dahil. Bölüm artık kendi özel sol-hiza formülü/"bleed" yerine, diğer
   her .sec gibi düz bir .wrap içine alınıyor (bkz. index.astro); görselin
   sağ kenarı otomatik olarak navbar'ınkiyle aynı noktada bitiyor. Bu aynı
   zamanda önceki 100vw kaynaklı yatay taşma sorununu da kökten çözüyor —
   artık ne özel bir sol-hiza calc()'ı ne de overflow-x:hidden'a gerek var. */
/* 2026-09 (2): metin sütunu üç kategoriyle sıkışıyordu ("Kontakt Lens
   Uygulamaları" gibi bağlantılar dar sütunda rahatsız duruyordu) —
   oran %58/%42'den %60/%40'a, aradaki boşluk da s8(64px)'ten s7(48px)'e
   çekildi. */
.tedaviler-split{display:grid;grid-template-columns:minmax(0,60%) minmax(0,40%);
                 column-gap:var(--s7);align-items:stretch}
.tedaviler-left{min-width:0}
/* 2026-09 (düzeltme, devam): min(72vh,820px) da hâlâ "kocaman" kaldı —
   geniş ekranlarda sağ sütunun genişliği büyüdükçe bu sabit yükseklik
   görseli kare/kareye yakın, metin bloğuna göre orantısız bir kutuya
   çeviriyordu. Kullanıcı: "sitenin normal content gösterme kuralına göre
   yap" — sitedeki NORMAL içerik görselleri (.content .ph, .about-band .ph
   vb.) vh'ye değil, sabit bir aspect-ratio'ya göre boyutlanıyor; yükseklik
   yalnızca genişliğin bir türevi. Hero/Hekim bandının ekranı GERÇEKTEN
   dolduran özel min(...vh,...px) davranışı yalnızca o iki bölüme özgü bir
   istisna (bkz. yukarıdaki "Ana sayfa: her bölüm 100vh..." notu), genel
   kural değil. Tedaviler'in görseli About bandıyla AYNI oranı
   (4/5, dikey) kullanıyor — yeni bir oran icat edilmedi, sistemde zaten
   var olan bir değer yeniden kullanıldı. */
/* 2026-09 (2): liste sıkılaştırılınca (bkz. .tcol a padding) sol içerik
   kısaldı; görsel eski 4/5 oranında kalsaydı içerikten belirgin biçimde
   uzun kalıp bölümü gereksiz uzatırdı. 9/10'a çekilerek liste ile aynı
   ritimde kısaldı — dikey/portre karakterini (döner kategori görseli)
   kaybetmeden. */
/* 2026-09 (3): kutu yalnızca gradyan yer tutucuyken sol kenarlık (border-left)
   sütunlar arasında ince bir ayraç görevi görüyordu; gerçek fotoğraflar
   eklenince aynı çizgi artık fotoğrafın üzerinde koyu/siyah bir çizgi gibi
   kesişip dikkat dağıtıyordu — kaldırıldı, sütunlar arasındaki boşluk
   (column-gap) zaten yeterli ayrımı sağlıyor. */
/* 2026-09 (4): kullanıcı — görsel kutusu sol listenin (7 konu satırı)
   sonuna, "Yetişkin göz sağlığı" satırına kadar uzasın dedi. Sabit
   aspect-ratio (9/10) + .tedaviler-split'teki align-items:start, görsel
   kutusunun kendi genişliğine göre bağımsız bir yükseklik almasına yol
   açıyordu — liste uzadıkça (5. konu eklendiğinde) görsel artık listeyi
   takip etmiyordu. aspect-ratio kaldırıldı, align-items:stretch (yukarı)
   ile görsel artık her zaman sol sütunun TAM yüksekliğini alıyor —
   .timg-stack zaten inset:0 olduğu için otomatik doluyor. */
.tedaviler-right{position:relative}
.timg-stack{position:absolute;inset:0}
/* .ph, guide'in §Fotoğraf bölümünde belgelenen yer tutucu bileşeni —
   burada altı kez (nötr + beş konu), üst üste ve konumlandırılmış olarak
   kullanılıyor. 2026-09: üç sütun/kategoriden beş konu etiketine (bkz.
   .topic-tags) geçişte de aynı hover-ile-çapraz-geçiş mantığı korundu,
   yalnızca kategori sayısı üçten beşe çıktı. */
.tedaviler-right .ph{position:absolute;inset:0;opacity:0;
                     transform:scale(1.015);
                     transition:opacity .45s ease,transform .45s ease}
.tedaviler-right .ph.is-active{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .tedaviler-right .ph{transition:none;transform:none}
}
/* Altı ton — hepsi --pa/--pb/--pc üzerinden .ph'nin kendi degrade
   formülünü kullanıyor, yalnızca renk sıcaklığı değişiyor. */
.timg-default{--pa:#E3DACD;--pb:#C2B4A2;--pc:#8C7B68}
.timg-cocuk-goz-sagligi{--pa:#EAD9D2;--pb:#CBAFA6;--pc:#8E655F}
.timg-sasilik{--pa:#E7DCCB;--pb:#C7B39F;--pc:#8E7358}
.timg-goz-tembelligi{--pa:#DFDCD2;--pb:#B9B2A2;--pc:#736A5A}
.timg-cift-gorme{--pa:#E3DED0;--pb:#C4B8A0;--pc:#867356}
.timg-miyopi{--pa:#DDE0D9;--pb:#B7BDAD;--pc:#707863}

/* ---------- Uzmanlık alanları: tıklanabilir konu listesi ----------
   2026-09: pill/etiket görünümünden (yalnızca hover, tıklanamaz) eski
   TreatmentColumns'takiyle (.tcol a) AYNI liste diline dönüldü — her
   satır artık ilgili tedavi sayfasına giden gerçek bir bağlantı; hover/
   focus'ta sağdaki görsel yine çapraz geçiş yapıyor (bkz.
   native/browser/tedaviler.ts). Ok ikonu ve satır çizgileri .tcol ile
   birebir aynı — yeni bir görsel dil icat edilmedi. */
.topic-list{list-style:none;margin:var(--s5) 0 0;padding:0}
.topic-list li{border-top:1px solid rgba(30,25,19,.07)}
.topic-list li:first-child{border-top:1px solid var(--edge-st)}
.topic-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
              padding:var(--s5) 0;text-decoration:none;font-family:var(--grotesk);
              font-size:16px;color:var(--ink);opacity:.78;
              transition:color .3s ease,opacity .3s ease,transform .3s ease}
@media (min-width:640px){.topic-list a{font-size:19px}}
.topic-list a:hover,.topic-list a:focus-visible{color:var(--acc-dk);opacity:1;
                                                 transform:translateX(4px);outline:none}
.topic-list .tcol-arrow{opacity:0;transform:translateX(-4px);color:var(--acc);
                        transition:opacity .3s ease,transform .3s ease}
.topic-list a:hover .tcol-arrow,.topic-list a:focus-visible .tcol-arrow{opacity:1;transform:translateX(0)}
@media (prefers-reduced-motion:reduce){
  .topic-list a,.topic-list .tcol-arrow{transition:none}
  .topic-list a:hover{transform:none}
}
/* 2026-09 (3): üç sütunun satır çizgileri artık ortak bir subgrid'e
   bağlı — bir kategoride bir bağlantı ("Kontakt Lens Uygulamaları" gibi)
   iki satıra kırılırsa o SIRA'nın yüksekliği üç sütunda da birlikte
   büyür, çizgiler kaymaz. --tcol-max-items (en uzun kategorinin öğe
   sayısı) TreatmentColumns.ts'ten geliyor; head + o kadar satır kadar
   sıra tanımlanıyor. ≤960px'te (2 veya 1 sütun) subgrid'e gerek yok —
   kategoriler zaten yan yana değil, normal akışa dönülüyor. */
.tcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
       grid-template-rows:auto repeat(var(--tcol-max-items),auto);
       column-gap:var(--s6)}
.tcol{display:grid;grid-template-rows:subgrid;
      grid-row:1 / span calc(var(--tcol-max-items) + 1)}
.tcol-head{grid-row:1}
/* 2026-09 (8): "01/02/03" sıra numarası kullanıcı isteğiyle kaldırıldı
   (.tcol-n artık kullanılmıyor); kategori başlığının ağırlığı da
   700'den 400'e (Aktiv Grotesk Regular) indirildi — kullanıcı bunu
   çok "ağır" buldu, kitte 500/600 yok, yalnızca 400/700 var.
   min-height:2.6em — artık subgrid de aynı sırayı üç sütunda eşitliyor,
   ama tek satırlık başlıklarda dahi bir taban yükseklik korusun diye
   kalıyor (bkz. yukarıdaki tarihçe). em birimi clamp() ile büyüyüp
   küçülen font-size'a otomatik uyuyor.
   2026-09 (4): font-family Aktiv Grotesk'e çekildi (bkz. guide'in
   --grotesk tanımı) — ağırlık/versal/harf aralığı aynı kaldı. */
/* 2026-09 (10): kullanıcı isteğiyle Aktiv Grotesk yerine IvyPresto
   Display Regular'a döndü (400, kitte gerçekten yüklü) — versal
   (uppercase) kaldırıldı, gerçek başlık verisi artık cümle içi yazım
   ("Çocuk göz sağlığı" — bkz. TreatmentColumns.ts), harf aralığı normal. */
.tcol h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,1.9vw,28px);
         line-height:1.25;min-height:2.4em;color:var(--ink);
         margin:10px 0 var(--s5)}
.tcol ul{list-style:none;display:contents}
/* 2026-09 (3): çizgi hiyerarşisi — hepsi eşit ağırlıkta olunca bölüm bir
   tabloya benziyordu. Başlığın altındaki TEK ayraç (ilk öğenin kendi
   border-top'u — bkz. eski not) artık belirgin (--edge-st); öğeler arası
   çizgiler --edge'in YARISI kadar soluk, bağlantı listesini "veri satırı"
   değil sürekli bir akış gibi gösteriyor. */
.tcol li{border-top:1px solid rgba(30,25,19,.07)}
.tcol li:first-child{border-top:1px solid var(--edge-st)}
/* 2026-09 (11): 16px mobil / 19px masaüstü — .t-body ile aynı "gövde ve
   tedavi bağlantıları" ölçek kademesi (kullanıcının Century Gothic
   spesifikasyonu). */
.tcol a{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
        padding:var(--s5) 0;text-decoration:none;font-family:var(--grotesk);
        font-size:16px;color:var(--ink);opacity:.78;
        transition:color .3s ease,opacity .3s ease,transform .3s ease}
@media (min-width:640px){.tcol a{font-size:19px}}
.tcol a:hover{color:var(--acc-dk);opacity:1;transform:translateX(4px)}
.tcol-arrow{opacity:0;transform:translateX(-4px);color:var(--acc);
            transition:opacity .3s ease,transform .3s ease}
.tcol a:hover .tcol-arrow{opacity:1;transform:translateX(0)}
@media (max-width:960px){
  .tcols{grid-template-rows:none}
  .tcol{grid-template-rows:none;grid-row:auto}
}
@media (prefers-reduced-motion:reduce){
  .tcol a,.tcol-arrow{transition:none}
  .tcol a:hover{transform:none}
}
/* Tablet: 3. kategori tam genişlikte alta iner, ilk iki yan yana kalır. */
@media (min-width:641px) and (max-width:960px){
  .tcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tcol:nth-child(3){grid-column:1/-1}
}
@media (max-width:640px){
  .tcols{grid-template-columns:1fr}
}
/* ≤960px: sağdaki büyük görsel + bölünmüş düzen tamamen kapanıyor — dar
   ekranda "%58/%42" oranı sütunları sıkıştırıp okunaksız kılar, hover
   etkileşiminin de dokunmatikte bir karşılığı yok. Sol taraf artık zaten
   normal .wrap içinde olduğu için (bkz. yukarısı) ayrı bir padding kuralına
   gerek yok — .wrap'in kendi var(--gut) iç boşluğu tek sütunda da geçerli. */
@media (max-width:960px){
  .tedaviler-split{display:block}
  .tedaviler-right{display:none}
}

/* ---------- İstatistik bandı ---------- */
.stat-band{background:var(--surf);text-align:center}
.stat-band .in{padding:var(--s7) var(--gut)}
.stat-band p{font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.005em;
             max-width:34ch;margin:0 auto}
.stat-band span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
                 text-transform:uppercase;color:var(--acc);margin-top:var(--s5)}

/* ---------- Randevu bandı ---------- */
.cta-band{background:var(--field);color:var(--on-dark)}
.cta-band .in{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center;
              justify-content:space-between;padding:var(--s6) var(--gut)}
.cta-band b{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:0}
.cta-band p{font-size:14px;color:var(--on-dark-2);margin-top:4px}

/* Admin panelinden gerçek bir fotoğraf yüklendiğinde .ph yerine geçen
   <img> — .hero .ph / .about-band .ph gibi context kuralları aynen
   uygulanır (aspect-ratio, boyut); burada yalnızca <img>'a özgü
   varsayılanlar (satır-içi/intrinsik boyut) kapatılıyor. */
img.ph{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- İletişim ---------- */
.contact{background:var(--bg);padding:var(--s8) 0}
.contact .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:var(--s8);align-items:start}
.contact dl{display:grid;gap:var(--s5);margin-top:var(--s6)}
.contact dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
.contact dd{font-size:16px;margin-top:6px}
@media (max-width:860px){.contact .grid{grid-template-columns:1fr}}

.contact-form{display:grid;gap:var(--s5)}
.contact-form .field{max-width:none}
.contact-form .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink2)}
.contact-form .field-hint{font-size:13px;color:var(--ink2);margin:calc(var(--s5) * -1) 0 0}
.contact-form button{justify-self:start}
.contact-form-status{font-size:14px;margin:0}
.contact-form-status[hidden]{display:none}
.contact-form-status.ok{color:var(--acc-dk)}
.contact-form-status.err{color:var(--danger)}

/* ---------- Sticky footer: footer her sayfada daima altta ---------- */
/* 2026-09: hasta rehberi sayfalarındaki randevu bandı kaldırılınca
   (bkz. entry.ts/hastaRehberi.ts) içerik viewport'tan kısa kalan
   sayfalarda footer, sayfanın gerçek altı yerine içeriğin hemen
   ardında (görsel olarak "ortalarda") kalmaya başladı. header
   position:fixed olduğu için normal akışta değil (etkilenmiyor);
   WhatsAppButton de position:fixed. Geriye kalan tek akış: body'nin
   doğrudan çocukları olan <section>'lar + footer. body'yi flex
   sütununa çevirip footer'a margin-top:auto vermek klasik "sticky
   footer" çözümü: içerik kısaysa boş alanı footer'ın ÜSTÜ yutar
   (footer viewport altına yapışır), içerik uzunsa (ör. ana sayfa,
   zaten min-height:100vh'lik bölümleriyle her zaman viewport'tan uzun)
   hiçbir görsel fark yaratmaz — bu yüzden .page-home dahil TÜM
   sayfalarda güvenle uygulanabilir. */
body{display:flex;flex-direction:column;min-height:100vh}
footer.site{margin-top:auto}

/* ---------- Footer ---------- */
/* 2026-09: tek satırlık, sade bir bara indirgendi (marka bandı solda,
   Site Haritası + telif hakkı sağda) — referans: drgokayweb sitesindeki
   footer. Önceki iki sütunlu ızgara (marka + "Bağlantılar" kısayol
   listesi) kaldırıldı; kısayollar artık dağınık bir footer listesi yerine
   kendi sayfası olan Site Haritası'nda (site-haritasi.astro) topluca
   duruyor. */
footer.site{border-top:1px solid var(--edge-st)}
footer.site .f-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);
                    flex-wrap:wrap;padding:var(--s6) 0}
footer.site .fb{font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:.04em}
footer.site .fb em{display:block;font-style:normal;font-weight:400;font-size:9px;letter-spacing:.2em;
                    color:var(--ink2);margin-top:6px}
footer.site .f-links{display:flex;align-items:center;gap:var(--s4);font-size:13px;color:var(--ink2)}
footer.site .f-links a{color:var(--ink2);text-decoration:none}
footer.site .f-links a:hover{color:var(--acc)}
@media (max-width:560px){footer.site .f-row{flex-direction:column;align-items:flex-start;gap:var(--s4)}}

/* ---------- WhatsApp — yüzen sohbet düğmesi ---------- */
/* Referans görseldeki gibi tüm sayfalarda sağ altta sabit duruyor
   (Base.astro'da Footer'dan hemen sonra render ediliyor). Numara
   contact.phoneTel'den (sitede zaten görünen randevu telefonu)
   türetiliyor — ayrı bir WhatsApp işletme numarası GİRİLMEDİ, mevcut
   numara WhatsApp'ta aktif değilse contact.phoneTel güncellenmeli. */
/* 2026-09 (9): kullanıcının referans gösterdiği gokaygunay.com'daki
   düğmeyle birebir aynı: daire CSS'te değil SVG'nin kendi <circle>'ında
   (bkz. WhatsAppButton.ts) — buton tamamen şeffaf/gölgesiz, yalnızca
   hover'da hafif büyüyor (%5) ve klavye odağında yeşil bir halka
   alıyor. Mobilde 56px/16px, ≥640px'te 64px/28px (referanstaki
   h-14/h-16 + bottom-4/right-4 → bottom-7/right-7 ölçüleriyle aynı). */
.wa-btn{position:fixed;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;
        display:flex;align-items:center;justify-content:center;
        z-index:80;transition:transform var(--motion)}
.wa-btn:hover{transform:scale(1.05)}
.wa-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(37,211,102,.4)}
.wa-btn svg{width:100%;height:100%;display:block}
@media (min-width:640px){.wa-btn{right:28px;bottom:28px;width:64px;height:64px}}

/* ---------- Alt sayfa: kısa hero ---------- */
/* 2026-09: anasayfa bölümlerinin (.page-home .hero vb.) mobilde üst dolgusu
   56px'e indirilmişti (sabit başlığın kendi body padding-top'uyla
   üst üste binmesin diye) ama bu düzeltme yalnızca o dört ana sayfa
   bölümüne yapılmıştı — Hakkımda/Hasta Rehberi/Tedavi/Site Haritası gibi
   TÜM diğer sayfaların ortak kısa hero'su olan .hero-sub gözden kaçmıştı.
   Sonuç: mobilde bu sayfalar başlığın altında GEREKSİZ ~96px'lik boş bir
   alanla açılıyordu ("sayfa üstü boşluk"), bu da altındaki görseli
   ekrandan taşırıp ilk açılışta yalnızca yarısının görünmesine yol
   açıyordu. Aynı 56px değeriyle hizalandı. */
.hero-sub{padding:var(--s9) 0 var(--s6);border-bottom:1px solid var(--edge)}
@media (max-width:960px){.hero-sub{padding-top:56px}}
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.crumb a{color:var(--ink2);text-decoration:none}
.crumb a:hover{color:var(--acc)}
.crumb .sep{opacity:.5;margin:0 .5em}
.hero-sub h1{margin-top:var(--s5);max-width:26ch}
.hero-sub .t-lede{margin-top:var(--s5);max-width:52ch}

/* ---------- Alt sayfa: içerik ---------- */
.content{padding:var(--s8) 0}
.content .grid2{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,1fr);gap:var(--s8);align-items:start}
/* 2026-09 (18): kullanıcı geri bildirimi (Hakkımda sayfası ekran
   görüntüsü) — "buradaki image textboxun sonuna kadar uzamak zorunda
   değil". Sorun: img.ph{height:100%} (üstte, hero/about-band/
   tedaviler-right gibi KENDİ sabit yükseklikli sarmalayıcısı olan
   bağlamlar için tasarlanmıştı) burada da miras alınıyordu --
   align-items:start olsa bile açık height:100%, satırın (metin
   sütununun boyu -- artık CV listesi + Muayene ve Tedavi Yaklaşımı
   metniyle çok uzamış durumda) yüksekliğine zorla uzuyordu, gerçek
   fotoğraf da object-fit:cover ile o dev kutuyu doldurmak için aşırı
   yakınlaştırılıp doktorun yüzü kutunun en altına itiliyordu. height:auto
   ile aspect-ratio (4/3, hakkımda'da satır-içi stille 3/4'e
   override ediliyor) yeniden TEK belirleyici hale geliyor -- görsel
   kendi oranında kalıyor, metin sütunu ondan uzun olursa (align-items:
   start sayesinde) altında sadece boşluk kalıyor, görsel gerilmiyor. */
.content .ph{aspect-ratio:4/3;height:auto}
.prose{max-width:var(--read);font-family:var(--serif)}
.prose ul{margin-top:var(--s5);padding-left:1.15rem;color:var(--ink2);font-size:15px;line-height:1.75}
.prose li{margin-top:var(--s3)}
@media (max-width:860px){.content .grid2{grid-template-columns:1fr}}

/* ---------- Hakkımda: Muayene ve Tedavi Yaklaşımı bölümü ---------- */
/* 2026-09 (düzeltme): ilk sürüm bunu tıklanınca açılan bir <details>
   paneline koymuştu; kullanıcı metnin sayfada doğrudan (tıklama
   gerekmeden) görünmesini istedi -- toggle kaldırıldı, düz bir blok.
   .article sınıfını miras alıyor -- h3.t-h3/p.t-body boşlukları
   entry.ts'teki makale gövdesiyle AYNI (bkz. yukarıdaki .article
   kuralları), yeni bir spacing sistemi icat edilmedi. */
.approach-block{margin-top:var(--s7)}

.related{border-top:1px solid var(--edge);margin-top:var(--s8);padding-top:var(--s7)}
.related h3.sub{margin-top:0}

/* ---------- Hasta Rehberi: kart grid + arama + "Daha Fazla Göster" ----------
   2026-09 (redesign v3): v1 (öne çıkan + liste) ve v2 (kompakt liste +
   Devamını Göster <details>) geride kaldı — kullanıcı somut bir referans
   site gösterdi (arama kutulu, kart grid'li, "Daha Fazla Göster" pill
   butonlu bir rehber sayfası) ve "bunu bizim design dilimizde yap" dedi.
   Kategori gruplaması tamamen kalktı, TEK düz grid oldu. Referansın
   yuvarlak köşe/gölge/pill buton gibi TOKEN'LARI kopyalanmadı — kartlar
   sistemin --surf zemin + hairline --edge çerçevesiyle (kutu/gölge yok
   ilkesi: dolgu her zaman dolu olduğu için burada çerçeve "boş kutu"
   gibi okunmuyor, .related tarihindeki sorun bu değil), buton sivri
   köşeli .btn bileşeniyle kuruldu. Arama + sayfalama artık gerçek bir
   JS gerektiriyor (bkz. native/browser/hastaRehberi.ts): kartlarda
   data-search özniteliği var, script başlık+özet içinde arıyor. */
.rehber-hero{display:flex;justify-content:space-between;align-items:flex-end;
             gap:var(--s6);flex-wrap:wrap}
.rehber-hero > div:first-child{min-width:0;flex:1 1 420px}
.rehber-search{flex:0 0 auto;width:280px;max-width:100%}
.rehber-search input{width:100%;min-height:44px;background:var(--bg);color:var(--ink);
       border:1px solid var(--edge-md);border-radius:var(--radius);padding:0 16px;
       font-family:var(--sans);font-size:14px;transition:border-color var(--motion)}
.rehber-search input:hover,.rehber-search input:focus-visible{border-color:var(--edge-st)}
.rehber-search input::placeholder{color:var(--ink2)}
@media (max-width:720px){.rehber-search{width:100%}}

.rehber-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
/* 2026-09 (19): kullanıcı geri bildirimi — "hasta rehberi başlığı
   kutulara çok yakın" (anasayfadaki #hasta-rehberi-ozet bölümü).
   hasta-rehberi.html'deki (listeleme sayfası) .rehber-grid ayrı bir
   <section class="content"> içinde olduğu için üstünde zaten doğal
   bir boşluk var; anasayfada ise h2 ile .rehber-grid AYNI section
   içinde bitişik iki kardeş — aralarında hiç boşluk kuralı yoktu.
   .tedaviler-intro'daki h2→.topic-list geçişiyle aynı örüntü
   (bkz. .topic-list{margin:var(--s5) 0 0}), yalnızca burada kartlar
   daha büyük/yoğun bir blok olduğu için var(--s6) kullanıldı. */
#hasta-rehberi-ozet h2 + .rehber-grid{margin-top:var(--s6)}
.rehber-card{display:flex;flex-direction:column;background:var(--surf);
             border:1px solid var(--edge);padding:var(--s6);text-decoration:none;
             transition:border-color var(--motion)}
/* .rehber-card{display:flex} yukarıdaki kural, tarayıcının [hidden] için
   varsayılan display:none kuralını EZER (ikisi de aynı özgüllükte, yazar
   sayfası UA sayfasını kazanır) — script'in card.hidden=true ataması
   görsel olarak hiçbir şey yapmaz, sadece özniteliği ekler. Kartı GERÇEKTEN
   kaldırmak için display:none'ı burada açıkça geri yazmak gerekiyor. */
.rehber-card[hidden]{display:none}
.rehber-card:hover{border-color:var(--edge-st)}
.rehber-card b{display:block;font-family:var(--grotesk);font-weight:700;font-size:18px;
               line-height:1.35;color:var(--acc);margin-bottom:var(--s4);
               transition:color var(--motion)}
.rehber-card:hover b{color:var(--acc-dk)}
.rehber-card .d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
                 overflow:hidden;font-size:14px;line-height:1.6;color:var(--ink2)}
@media (max-width:960px){.rehber-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rehber-grid{grid-template-columns:1fr}}

/* 2026-09: ana sayfadaki Hasta Rehberi özeti (id="hasta-rehberi-ozet")
   artık 6 yazı listeliyor (site.json homepage.hastaRehberi.items) ama
   mobilde 3'ü yeterli — 4-6. kartlar mobil/tablette gizli, .rehber-grid
   zaten 961px'te 3 sütuna geçtiği için masaüstünde hepsi (2×3) görünür.
   Yalnızca bu bölüme özel: tam liste sayfasındaki (hasta-rehberi.html)
   .rehber-card'lar (arama/sayfalama [hidden] ile ayrı yönetiliyor)
   etkilenmesin diye #hasta-rehberi-ozet ile kapsam daraltıldı. */
#hasta-rehberi-ozet .rehber-card:nth-child(n+4){display:none}
@media (min-width:961px){
  #hasta-rehberi-ozet .rehber-card:nth-child(n+4){display:flex}
}

.rehber-empty{margin-top:var(--s7);text-align:center;color:var(--ink2);font-size:15px}
.rehber-more{margin-top:var(--s7);text-align:center}
/* .btn{display:inline-flex} aynı [hidden] çakışmasına düşüyor — bkz.
   .rehber-card[hidden] notu. */
.rehber-more-btn[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .rehber-search input,.rehber-card,.rehber-card b{transition:none}
}

/* ---------- Tedavi / hasta rehberi makale gövdesi ---------- */
/* .prose zaten .t-body/.t-h3 tipografisini miras alıyor (OPS1 kılavuzu);
   burada sadece ARDIŞIK paragraf/başlıkların arasına dikey boşluk
   ekliyoruz — tek bir madde/paragraf .prose içinde zaten doğru
   görünüyordu, ama "sections" (birden çok alt başlık + kendi
   paragrafları) render edilince aralarında hiç boşluk yoktu. */
.article p.t-body{margin-top:var(--s5)}
.article p.t-body:first-child{margin-top:0}
/* 2026-09: ":first-child" burada YANLIŞ boşluğu sıfırlıyordu — h3.t-h3
   her zaman kendi .section-row'unun ilk (ve tek) çocuğu olduğu için bu
   kural sadece gerçekten İLK bölüm başlığında değil, HER bölüm
   başlığında devreye giriyor, --s8'lik ayırıcı boşluğu tamamen iptal
   ediyordu. Sonuç: hangi başlığın hangi paragrafa ait olduğu belirsiz
   hale geliyordu (peş peşe gelen tüm başlık+paragraf blokları bitişik
   görünüyordu). Kaldırıldı — h3.t-h3 artık her zaman --s8 boşlukla
   başlıyor, ilk bölümde lede paragrafının hemen altında biraz fazladan
   boşluk olması (varsa) kabul edilebilir bir bedel. */
.article h3.t-h3{margin-top:var(--s8)}

/* Tedavi/hasta rehberi sayfası — okuma sütunu sayfanın ORTASINA
   yaslanıyor. Öncesinde .prose (68ch) .wrap içinde flush-left
   duruyordu ve geniş ekranlarda sağda büyük bir boşluk bırakıyordu;
   .article-col bu sütunu (Crumb+H1+lede'den SSS/ilgili-içerik/
   kaynaklara kadar HER ŞEYİ) tek, ortalanmış bir blok olarak ele
   alıyor. Metin kendi içinde sola hizalı kalıyor — ortalanan satır
   satır metin değil, bloğun kendisi. */
.article-col{max-width:820px;margin:0 auto}
.article-photo{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin-top:var(--s7)}

/* Sık Sorulan Sorular — sadece tedavi sayfalarında (guide'larda yok) */
.faq{border-top:1px solid var(--edge-st);margin-top:var(--s8);padding-top:var(--s7)}
.faq-item{border-top:1px solid var(--edge);padding:var(--s6) 0}
.faq-item:first-child{border-top:none;padding-top:0}
.faq-item .q{font-family:var(--grotesk);font-weight:700;font-size:16px;color:var(--ink)}
.faq-item .a{margin-top:var(--s3);font-family:var(--serif);font-size:15px;line-height:1.7;color:var(--ink2)}

/* İlgili tedavi/rehber kartları — ana .idx (4 sütun) çok sıkışık kalıyordu
   bu bağlamda; 2 sütuna genişletilmiş bir varyant. */
.idx-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.idx-2{grid-template-columns:1fr}}

/* Kaynaklar + yasal uyarı — tedavi/rehber sayfalarının altında
   2026-09: .sources bloğu artık gerçekten dolduruluyor (bkz. entry.ts) --
   liste öğeleri için sade, madde işaretsiz bir görünüm eklendi. */
.sources{margin-top:var(--s7);font-size:13px;color:var(--ink2)}
.sources a{color:var(--ink2)}
.sources ul{list-style:none;padding:0;margin-top:var(--s3)}
.sources li{margin-top:var(--s2)}
.disclaimer{margin-top:var(--s7);font-size:13px;color:var(--ink2)}

/* ---------- Yer tutucu boş sayfa ---------- */
.soon{border-top:1px solid var(--edge);padding:var(--s7) 0;text-align:center;color:var(--ink2);font-size:15px}

/* ---------- Ana sayfa: her bölüm 100vh + geleneksel scroll-snap ----------
   2026-09 (geri alındı): bir önceki commit min-height/scroll-snap'i
   tamamen kaldırmıştı ("her bölüm içeriği kadar yer kaplasın"), ama
   kullanıcı bunu istemedi — tam tersi: "her sayfa 100vh olmalı ve
   geleneksel sticky olmalı" (yani "Apple tarzı" üst üste binen
   position:sticky DEĞİL — bkz. aşağıdaki "geleneksel scroll-snap" notu —
   klasik, kaydırma bir bölüme "yapışıp" oturan scroll-snap). Açık ve
   kesin bir talimat olduğu için dört ana sayfa bölümü de (Hero, Hekim
   bandı, Tedaviler, İletişim) yeniden EKRANI DOLDURACAK şekilde
   (min-height:100vh/100svh) ayarlandı; içerik ekrandan kısa kaldığında
   altta doğal bir boşluk kalması artık kabul edilen bir durum, bilinçli
   bir tercih. Hero ve Hekim bandının görselleri de yeniden ekranı
   GERÇEKTEN dolduracak şekilde büyütülüyor (aşağıdaki media query) —
   Tedaviler'in kendi görseli ise about-band ile aynı aspect-ratio:4/5
   oranını (kullanıcının ayrı bir talimatıyla sabitlenmişti) koruyor,
   yalnızca bölümün KENDİSİ artık 100vh. */
.page-home .hero,
.page-home .about-band,
.page-home .sec,
.page-home .contact{
  min-height:100vh;
  min-height:100svh;
  padding-top:var(--s9);
  padding-bottom:var(--s9);
}
/* 2026-09 (14): Bölümlerin üst dolgusu (var(--s9), 96px) sabit başlık için
   gövdeye zaten eklenen padding-top'un (header.ts ölçümü) ÜZERİNE
   biniyordu — mobilde header + bu dolgu üst üste toplanınca içerik gereğinden
   fazla aşağıda kalıyordu. Dört ana sayfa bölümünün de (Hero, Hekim bandı,
   Tedaviler, İletişim) üst dolgusu mobilde küçültüldü (stil kılavuzunun
   kendi notu: "--s9 · bölümler arası, mobilde 56px"); alt dolgu ve
   min-height:100vh kasıtlı olarak dokunulmadı. */
@media (max-width:960px){
  .page-home .hero,
  .page-home .about-band,
  .page-home .sec,
  .page-home .contact{
    padding-top:56px;
  }
}
@media (min-width:961px){
  /* Hero/Hekim bandı görselleri sabit bir en-boy oranı yerine, bölümün
     büyük kısmını kaplayan sabit bir yükseklik alır — böylece 100vh
     gerçek bir tasarım kararı gibi okunur, boş bir zorlama gibi değil.
     Yer tutucu (placeholder) olduğu için düz bir degrade; gerçek fotoğraf
     gelince aynı kutuya object-fit:cover ile oturur. */
  /* 2026-09 (16): sabit yükseklik viewport'tan DÜŞÜLMEDEN hesaplandığı için
     (sabit başlığın kapladığı alan ve bölümün kendi üst/alt dolgusu hiç
     çıkarılmıyordu) laptop yüksekliklerinde görsel ekranın altından taşıp
     ilk ekranda "kesiliyormuş" gibi görünüyordu. Üçüncü bir calc() terimi
     eklendi: viewport - sabit başlık - bölümün üst/alt dolgusu (var(--s9)
     x2) — görsel hâlâ ekranı olabildiğince dolduruyor, yalnızca gerçekte
     sığandan fazlasını istemiyor. */
  .page-home .hero .ph{aspect-ratio:auto;
    height:min(76vh,860px,calc(100svh - var(--header-h-full,140px) - (var(--s9) * 2)))}
  .page-home .about-band .ph{aspect-ratio:auto;
    height:min(66vh,760px,calc(100svh - var(--header-h-full,140px) - (var(--s9) * 2)))}
}

/* ---------- Ana sayfa: geleneksel scroll-snap ----------
   "Apple tarzı" kart yığını (position:sticky ile bölümlerin üst üste
   binmesi) istenmedi — yerine geleneksel tam-ekran bölüm kaydırması:
   kaydırma bir bölüm sınırına yaklaşınca oraya yerleşir, aynı anda
   ekranda yalnızca bir bölüm odakta olur. scroll-snap-align:start +
   section[id]'nin zaten var olan scroll-margin-top'u (sabit üst bandın
   yüksekliği kadar) birlikte çalışıyor — böylece her bölümün başlığı,
   çapa bağlantısında olduğu gibi tam başlığın altında hizalanarak durur.
   2026-09: "proximity" kullanılıyordu — ama bu, kaydırma bir sınıra
   YETERİNCE yaklaşmadığında hiç yerleşmeyebiliyor, kullanıcı kaydırmayı
   bıraktığında bir önceki bölümden birkaç piksellik bir "dilim" üstte
   görünür kalıyordu (bölüm "tam oturmuyordu"). "mandatory"ye geçildi:
   kaydırma HER durduğunda mutlaka en yakın sınıra tam hizalanır — piksel
   kalıntısı kalmaz. scroll-snap-stop:always EKLENMEDİ (bilerek): o,
   kaydırmayı ADIM ADIM her bölümde zorla durdurur; bölümler ekrandan
   (~100vh) uzun olduğu için KISA bir kaydırma hareketiyle bir sonraki
   bölüme hiç ULAŞAMAMA, sürekli geri "zıplama" sorununa yol açıyordu
   (özellikle İletişim→footer geçişinde). Salt "mandatory", ADIM ADIM
   durmaya zorlamadan, kaydırma bittiğinde en yakın sınıra tam oturmayı
   garantiliyor. Yalnızca ana sayfada — :has() ile html'e kadar kapsam
   daraltılıyor, diğer sayfalar hiç etkilenmiyor. */
html:has(body.page-home){scroll-snap-type:y mandatory}
/* 2026-09 (17): kullanıcı geri bildirimi — "sticky mobilde biraz fazla
   sert çalışıyor". "mandatory" masaüstünde net bir davranış (kaydırma
   HER durduğunda en yakın sınıra tam oturur) ama dokunmatik/momentum
   kaydırmada mobilde bunu "sert" hissettiriyor: kullanıcı bölümün
   ortasında bırakmak istese bile en yakın sınıra zorla çekiliyor.
   Yalnızca mobilde (aynı --s9 dolgu kırılımıyla, max-width:960px)
   "proximity"ye yumuşatıldı: yalnızca kaydırma bir sınıra YETERİNCE
   yaklaştığında oraya yerleşir, ortada bırakılırsa serbest kalır.
   Masaüstündeki "geleneksel sticky" talebi (mandatory) dokunulmadan
   korunuyor. */
@media (max-width:960px){
  html:has(body.page-home){scroll-snap-type:y proximity}
}
.page-home .hero,
.page-home .about-band,
.page-home .sec,
.page-home .contact{
  scroll-snap-align:start;
}
/* Hero'nun kendi scroll-margin-top'u: Hero'nun id'si yok, o yüzden diğer
   bölümlerin kullandığı section[id]{scroll-margin-top:var(--header-h)}
   kuralı ona uygulanmıyor. Gövdeye sabit başlık için eklenen padding-top,
   Hero'yu belgede gerçekte AÇIK/expanded başlık yüksekliği kadar aşağıda
   konumlandırıyor; scroll-snap-align:start bu gerçek konumu "durak
   noktası" sayıp sayfa ilk açıldığında kaydırmayı oraya "yerleştirebilir"
   (sayfa scrollY=0 yerine kaydırılmış açılır). Çözüm: Hero'nun durak
   noktasını AÇIK başlık yüksekliği kadar (--header-h-full, Base.astro'da
   ölçülüyor) yukarı çekiyoruz — durak noktası gerçek sıfıra denk düşüyor. */
.page-home .hero{scroll-margin-top:var(--header-h-full,140px)}
/* Footer'a snap noktası: olmadan kaydırma İletişim'den footer'a geçerken
   sürekli İletişim'in başına geri "zıplıyor" gibi hissettirir (footer'a
   hiç ait bir durak yoktu). Footer kısa olduğu için scroll-margin-top
   gerekmiyor. */
.page-home footer.site{scroll-snap-align:start}

/* ---------- 404 ---------- */
.err{min-height:48vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
     text-align:center;padding:var(--s9) 0 var(--s7)}
.err .code{font-family:var(--display);font-weight:400;font-size:clamp(40px,5.2vw,72px);
           letter-spacing:0;color:var(--acc);line-height:1}
.err h1{margin-top:var(--s5)}
.err p{color:var(--ink2);margin-top:var(--s4);max-width:40ch}
.err .btn{margin-top:var(--s6)}