/* ==================================================================
   Doç. Dr. Melike Gedar — final site
   Düzen ve tipografi: OPS 2 · Renk: OPS 1 (maviye çekilmiş)
   ================================================================== */
:root{
  --bg:#FFFFFF;
  --surf:#F3F6F7;
  --ink:#131A1E;
  --ink2:#5B666D;
  /* Aksan: mavi sürümden alındı (melike-gedar-web-mavi). --deep ve
     --lite kasıtlı olarak değişmedi — onlar hero/footer zemini, aksan
     değil. */
  --acc:#1E4E8C;
  --acc-dk:#173A6B;
  --deep:#0F212A;
  --lite:#7FA9BC;
  --edge:rgba(19,26,30,.12);
  --edge-md:rgba(19,26,30,.22);
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --max:1240px;
  --gut:clamp(1.25rem,4vw,3.5rem);
  --pa:#E1E9EC;--pb:#BFCDD3;--pc:#8D9CA4;
  --phi-hi:rgba(255,255,255,.45);--phi-lo:rgba(10,30,40,.42);
  --hh:74px;              /* sabit (scroll sonrası) header yüksekliği */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Sayfanın en altında, footer bittikten sonra beyaz bir şerit kalıyordu:
   iOS Safari belgenin dışında kalan alanı (adres çubuğunun arkası ve
   lastik-bant bölgesi) kök elemanın arka plan rengiyle boyuyor, o da
   varsayılan olarak beyazdı. Kök footer'ın rengine alındı — footer
   sayfanın son öğesi olduğu için alt uç artık kesintisiz görünüyor.
   Bu yalnızca BOYAMA: hiçbir elemanın ölçüsüne dokunmuyor, dokuz ekran
   boyutunda önce/sonra ölçülüp yüksekliklerin birebir aynı kaldığı
   doğrulandı. */
html{background:var(--deep);
     /* Lastik-bant (overscroll bounce) tamamen kapatılıyor: sayfanın
        başında/sonunda çekince belge dışına taşma olmuyor, dolayısıyla
        kök rengi de hiç görünmüyor. Arka plan rengi yine de duruyor —
        overscroll-behavior'ı desteklemeyen tarayıcılarda ve adres
        çubuğunun arkasındaki alan için gereken o. */
     overscroll-behavior-y:none}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:18px;width:100%}
/* Tipografi/boşluk ölçeği rem ve clamp() tabanlı; mobilde 18px kök çoğu
   clamp()'ı minimum (rem) ucuna sabitlediği için her şey gereğinden
   büyük görünüyordu. Kök font-size'ı küçük ekranlarda kademeli düşürmek
   tüm ölçeği (başlıklar, boşluklar, ikonlar) orantılı olarak normalize eder. */
/* --hh, header'ın scroll sonrası (.top.solid) GERÇEK yüksekliğine eşit
   olmak zorunda: bölümlerin snap hizası (scroll-margin-top) bundan
   geliyor. Büyük bir değer, snap noktasını header'ın altına değil
   yukarısına koyar ve bir önceki bölümün alt ucu header'ın altında
   şerit olarak görünür. Aşağıdaki değerler her kırılma noktasında
   tarayıcıda ölçüldü (73.8 / 63.7 / 58.9 / 55.2). */
@media (max-width:640px){html{font-size:15.5px}:root{--hh:64px}}
@media (max-width:560px){:root{--hh:59px}}
@media (max-width:380px){html{font-size:14.5px}:root{--hh:55px}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.75;
     font-weight:400;-webkit-font-smoothing:antialiased;width:100%}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);width:100%}
/* line-height açıkça yazılıyor: 'normal' yazı tipine göre değişiyor ve
   Hakkımda'daki fotoğrafın hizası bu yüksekliğe bağlı. 1.75, mevcut
   render ile birebir aynı değeri veriyor (19.6875px). */
.lab{display:block;font-size:.625rem;line-height:1.75;letter-spacing:.26em;
     text-transform:uppercase;color:var(--acc)}

/* ---------- Görsel yer tutucu ---------- */
.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::after{content:"";position:absolute;inset:0;background-image:var(--grain);
           opacity:.12;mix-blend-mode:overlay;pointer-events:none}
/* Editörden bir fotoğraf yüklendiğinde yer tutucunun degradesinin üstünü
   kaplar; yüklenmediğinde <img> hiç basılmaz ve degrade görünür. */
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

/* ---------- Üst menü ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease}
.top .in{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
         padding-top:1.35rem;padding-bottom:1.35rem;transition:padding .3s ease}
.brand{display:inline-flex;align-items:center;gap:.7em;
       font-family:var(--serif);font-size:1.275rem;font-weight:400;letter-spacing:.01em;color:#fff;line-height:1.2}
/* Amblem metin bloğuyla aynı optik yükseklikte: genişlik em cinsinden
   verildiği için marka font-size'ı değiştiğinde (mobil, footer) kendi
   kendine ölçekleniyor. flex:none olmazsa dar ekranda eziliyor. */
.brand .mk{flex:none;width:3.18em;height:auto;display:block}
.brand .bt{display:block}
/* em tabanlı: marka font-size'ı değiştiğinde alt satır da onunla
   birlikte ölçekleniyor. */
.brand em{display:block;font-style:normal;font-family:var(--sans);font-size:.375em;letter-spacing:.26em;
          text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:.3em}
nav.menu{display:flex;align-items:center;gap:1.6rem;font-size:.875rem;letter-spacing:.14em;
         text-transform:uppercase;color:rgba(255,255,255,.78)}
nav.menu a:hover,nav.menu a.on{color:#fff}
nav.menu .sep{opacity:.35}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:.4rem}
.burger i{width:22px;height:1.5px;background:#fff;display:block;transition:background .3s}
.top.solid{background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom-color:var(--edge)}
.top.solid .in{padding-top:.9rem;padding-bottom:.9rem}
.top.solid .brand{color:var(--acc)}
.top.solid .brand em{color:var(--ink2)}
.top.solid nav.menu{color:var(--ink2)}
.top.solid nav.menu a:hover,.top.solid nav.menu a.on{color:var(--ink)}
.top.solid .burger i{background:var(--ink)}

/* ---------- Açılış ---------- */
.hero{position:relative;min-height:clamp(560px,86vh,860px);display:flex;flex-direction:column;
      justify-content:flex-end;color:#fff;background-color:#0C1B33}
.hero .ph{position:absolute;inset:0}
/* Arka plan videosu .ph'nin (editörden yüklenebilen hero görseli /
   degrade yer tutucu) üstünde, perdenin altında. object-fit:cover ile
   16:9 video her en-boy oranında ekranı doldurur, kenarlardan taşan
   kısım kırpılır. */
/* saturate: klipteki sahneler çok farklı renklerde (mavi göz, nötr gri
   cihaz, sıcak ten). Doygunluk kısılmadan mavi yıkama sıcak karelerde
   kayboluyor, soğuk karelerde fazla baskın çıkıyordu; kısılınca perdenin
   mavisi her karede aynı tonu veriyor. */
.hero .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
                z-index:1;pointer-events:none;filter:saturate(.45)}
.hero .veil{position:absolute;inset:0;z-index:1;
  /* Perde, arka plan hareketli videoya geçtikten sonra koyulaştırıldı:
     eski değerlerde orta bant (.24) durağan bir fotoğraf için yeterliydi,
     ama sürekli değişen kareler başlığın altından geçince metin bazı
     karelerde okunaksız kalıyordu. */
  /* Perde iki katman: altta aksanın (--acc #1E4E8C) koyusuna çekilmiş
     lacivert degrade — okunurluğu bu sağlıyor; üstünde ince bir aksan
     yıkaması, videonun gri-nötr karelerini sitenin mavisine boyuyor.
     Önceki değerler (rgba(9,22,29)) yeşile çalan bir koyuydu ve mavi
     aksanın yanında soğuk/uyumsuz duruyordu. */
  background:linear-gradient(180deg,rgba(30,78,140,.34) 0%,rgba(30,78,140,.28) 42%,rgba(30,78,140,.36) 100%),
             linear-gradient(180deg,rgba(9,21,42,.64) 0%,rgba(9,21,42,.46) 42%,rgba(9,21,42,.76) 100%)}
.hero .in{position:relative;z-index:2;margin-top:auto;margin-bottom:auto;
          padding-bottom:clamp(3rem,7vw,5.5rem);
          padding-top:calc(clamp(3rem,7vw,5.5rem) + var(--hh))}
.hero .rule{width:56px;height:1px;background:rgba(255,255,255,.62);margin-bottom:1.75rem}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.14;
         letter-spacing:-.015em;max-width:19ch}
.hero p{font-size:1rem;line-height:1.95;color:rgba(255,255,255,.82);margin-top:1.35rem;max-width:46ch}
.btn{display:inline-block;padding:.95rem 2rem;font-size:.6875rem;letter-spacing:.22em;
     text-transform:uppercase;transition:background .25s ease,color .25s ease,border-color .25s ease}
/* Sitenin zemini ağırlıkla açık; koyu olan tek yer hero. Bu yüzden
   .btn-line varsayılan olarak KOYU, beyaz varyant hero'ya özel. Tersi
   denendiğinde açık zemine eklenen her yeni buton beyaz üstüne beyaz
   çıkıp görünmez oluyordu. */
.btn-line{border:1px solid var(--edge-md);color:var(--ink);margin-top:2rem}
.btn-line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero .btn-line{border-color:rgba(255,255,255,.55);color:#fff}
.hero .btn-line:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-fill{background:var(--acc);color:#fff}
.btn-fill:hover{background:var(--acc-dk)}
.hero .bar{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.2)}
.hero .bar .in{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;padding-top:1rem;padding-bottom:1rem;
               font-size:.5625rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.72)}

/* ---------- Bölüm ortakları ---------- */
section{padding:clamp(3.5rem,8vw,7rem) 0}
.sec-h{text-align:center;margin-bottom:clamp(2.25rem,5vw,3.5rem)}
/* Bölüm başlıkları düz siyah yerine aksanın koyusu: metinle aynı tonda
   olunca sayfada hiyerarşi kurmuyorlardı. */
.sec-h h2{color:var(--acc-dk);font-family:var(--serif);font-weight:400;font-size:clamp(1.625rem,3.2vw,2.5rem);
          letter-spacing:-.015em;line-height:1.2}
.sec-h .sub{display:block;font-size:.625rem;letter-spacing:.26em;text-transform:uppercase;
            color:var(--ink2);margin-top:.7rem}

/* Hareket azaltma tercihi: video durur, yerinde poster kalır. Sistem
   ayarını açan kullanıcı için arka planda sürekli oynayan bir video
   rahatsız edici — ve bazı kullanıcılar için baş dönmesi sebebi. */
@media (prefers-reduced-motion:reduce){
  .hero .hero-vid{display:none}
  .hero .ph{background:var(--deep) url("../hero-poster.jpg") center/cover no-repeat}
  .hero .ph::before{display:none}
}

/* Ana sayfanın ilk bölümünde header'daki marka bloğu (amblem + ad +
   altyazı) tamamen gizleniyor: hero arka planında logo zaten büyük
   olarak duruyor, aynı şeyin header'da ikinci kez tekrarlanmasına
   gerek yok. Aşağı kaydırılıp header katılaşınca ve bütün alt
   sayfalarda normal şekilde görünüyor.

   display:none yerine visibility: marka bloğu header'ın yüksekliğini
   belirleyen en uzun öğe; kaldırılsaydı header kısalır ve katılaşma
   anında menü ile logo yerinden zıplardı. visibility yeri koruyor,
   ayrıca gizliyken bağlantı tıklanamıyor ve ekran okuyucuya
   okunmuyor — görünmez bir tıklama hedefi kalmıyor. */
body:not(.sub):not(.js-fly) .top:not(.solid) .brand{visibility:hidden;opacity:0}
body:not(.sub):not(.js-fly) .brand{transition:opacity .22s ease}

/* Logo uçuşu (JS varsa): header'daki marka, açılıştaki amblem uçup
   yerine oturana kadar (body.docked) gizli. Oturduğu anda amblem
   kesintisiz yerinde, yanındaki ad ve altyazı kısa bir geçişle
   beliriyor. Uçan kopya header'ın üstünde (z-index), tıklamayı
   engellemiyor. */
.mk-fly{display:none}
.js-fly .mk-fly{display:block;position:fixed;left:0;top:0;z-index:55;height:auto;
  transform-origin:0 0;pointer-events:none;will-change:transform}
.js-fly .hero .lk-mark{visibility:hidden}
body.js-fly:not(.docked) .top .brand{visibility:hidden}
body.js-fly.docked .top .brand .bt{animation:mgBrandIn .32s ease both}
@keyframes mgBrandIn{from{opacity:0;transform:translateX(-.4em)}to{opacity:1;transform:none}}
/* Ana sayfanın ilk bölümünde menü ortada; logo header'a oturduğu anda
   (body.docked) normal yerine, sağa kayıyor. Kayma miktarını JS ölçüp
   --nav-shift olarak veriyor. Yalnız masaüstü: mobilde menü hamburgerde. */
@media (min-width:961px){
  body.js-fly .top nav.menu{transition:transform .5s cubic-bezier(.22,.7,.2,1)}
  body.js-fly:not(.docked) .top nav.menu{transform:translateX(var(--nav-shift,0px))}
}
@media (prefers-reduced-motion:reduce){
  body.js-fly.docked .top .brand .bt{animation:none}
  body.js-fly .top nav.menu{transition:none}
}

/* =====================================================================
   Açılış — banner düzeni (2026)
   Hekimin banner'ı parçalarına ayrılıp yeniden kuruldu: solda açık
   zeminde logo kilidi, sağda ameliyat fotoğrafı. Banner'ı tek görsel
   olarak koymak yerine böyle kurulmasının nedeni: yazılar gerçek metin
   (seçilebilir, Google okuyor), her ekranda net, mobilde yeniden
   diziliyor.

   Kilit içindeki ölçüler banner'daki oranlardan alındı ve kilidin kendi
   genişliğine bağlı (cqw = kilit genişliğinin %1'i): kilit küçülünce
   yazılar da aynı oranda küçülüyor, banner'daki denge bozulmuyor.
   ===================================================================== */
.hero.hero-split{background:#fff;color:var(--ink);justify-content:center}
.hero-split .hero-photo{position:absolute;top:0;right:0;bottom:0;width:52%;z-index:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 34%);
          mask-image:linear-gradient(to right,transparent 0,#000 34%)}
.hero-split .hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Menü fotoğrafın üst kısmına denk geliyor; üstte hafif beyaz perde
   yazıları okunur tutuyor. */
.hero-split .hero-photo::after{content:"";position:absolute;left:0;right:0;top:0;
  height:calc(var(--hh) + 3rem);pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.88) 0%,rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 100%)}
.hero-split .in{position:relative;z-index:2;margin-top:auto;margin-bottom:auto;
  padding-top:calc(var(--hh) + clamp(1.5rem,4vw,3rem));padding-bottom:clamp(2rem,5vw,3.5rem)}

.lockup{container-type:inline-size;width:min(calc(50vw - 3rem),780px);display:flex;flex-direction:column;
  align-items:center;text-align:center;color:#2D343B}
/* Banner'da yazı satırları kilidin ortasında değil, amblemin kuyruğu
   sola taştığı için ~%6,5 sağda ortalanıyor; padding-left bunu veriyor. */
.lockup>.lk-spec,.lockup>.lk-sub,.lockup>.lk-rule,.lockup>.lk-slogan,.lockup>.btn{margin-left:13%}
.lk-pre{align-self:flex-start;margin-left:28.4%;font-family:var(--sans);font-weight:500;
  font-size:max(3.6cqw,13px);line-height:1;letter-spacing:.005em;margin-bottom:-.15em}
.lk-row{display:block;width:100%;height:auto}
.hero .lk-spec{max-width:none;color:#2D343B;font-family:var(--sans);font-weight:400;font-size:max(4.6cqw,16px);line-height:1.15;
  letter-spacing:.035em;margin-top:2.1cqw}
.hero .lk-sub{max-width:none;font-family:var(--sans);font-weight:400;font-size:max(2.55cqw,11.5px);line-height:1.3;
  letter-spacing:.09em;margin-top:.9cqw;color:#3C4249}
.lk-rule{display:block;width:16.4cqw;height:1px;background:#8FB4CE;margin-top:4.2cqw}
.lk-slogan{display:block;width:52cqw;height:auto;margin-top:2.6cqw}
.hero-split .lockup .btn-line{margin-top:4cqw;border-color:var(--acc);color:var(--acc)}
.hero-split .lockup .btn-line:hover{background:var(--acc);color:#fff;border-color:var(--acc)}

.hero-split .bar{border-top:1px solid var(--edge);background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-split .bar .in{color:var(--ink2)}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Hero artık açık renk: header ilk bölümdeyken menü yazıları ve
   hamburger koyu olmalı. Mobil açılır menü koyu zeminli kaldığı için
   menü rengi yalnız masaüstünde değişiyor. */
@media (min-width:961px){
  body:not(.sub) .top:not(.solid) nav.menu{color:var(--ink2)}
  body:not(.sub) .top:not(.solid) nav.menu a:hover,
  body:not(.sub) .top:not(.solid) nav.menu a.on{color:var(--ink)}
}
body:not(.sub) .top:not(.solid) .burger i{background:var(--ink)}
body:not(.sub).nav-open .top:not(.solid) .burger i{background:#fff}

/* Tablet ve telefon: fotoğraf üstte, kilit altında. */
@media (max-width:860px){
  .hero.hero-split{justify-content:flex-start}
  .hero-split .hero-photo{position:relative;width:100%;height:46vh;height:46svh;flex:none;
    -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
  .hero-split .hero-photo img{object-position:50% 22%!important}
  .hero-split .in{margin-top:-2.5rem;padding-top:0;min-height:0!important;
    flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
  .lockup{width:min(100%,560px);margin:0 auto}
}

/* Mobil menü açıkken uçan amblem menünün üstünde kalmasın. */
body.nav-open .mk-fly{visibility:hidden!important}

/* ---------- Hakkımda ---------- */
.about{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(2rem,5vw,4.5rem);
       align-items:center}
/* Fotoğraf, sağ sütundaki başlıkla aynı çizgiden başlasın: dikey
   ortalama yerine üstten hizalanıyor ve "HAKKIMDA" etiketi kadar
   aşağı itiliyor (etiketin satır yüksekliği + h2'nin üst boşluğu).
   Yalnızca iki sütunlu düzende; tek sütuna düşünce fotoğraf zaten
   metnin üstünde, orada pay boşluk yaratırdı. */
@media (min-width:961px){
  .about{align-items:start}
  .about .ph{margin-top:calc(.625rem * 1.75 + .85rem)}
}
.about .ph{aspect-ratio:4/5}
.about h2{color:var(--acc-dk);font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.9vw,2.125rem);
          letter-spacing:-.015em;line-height:1.22;margin-top:.85rem}
.about p{font-size:.9375rem;line-height:2.05;color:var(--ink2);margin-top:1.15rem;max-width:56ch}
.cv{margin-top:1.85rem;border-top:1px solid var(--edge);max-width:56ch}
.cv div{display:flex;justify-content:space-between;gap:1.5rem;padding:.62rem 0;
        border-bottom:1px solid var(--edge);font-size:.875rem;color:var(--ink2)}
.cv div em{font-style:normal;font-size:.6875rem;letter-spacing:.14em;color:var(--acc);flex-shrink:0}
.sig{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--ink);margin-top:1.5rem}

/* ---------- Tedaviler (alt alta) ---------- */
.tedaviler{background:var(--surf)}

/* ---------- Tedaviler: sol tanıtım metni + sağda kaydırılabilir kartlar ---------- */
.ted-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.55fr);
          gap:clamp(2rem,4vw,3.5rem);align-items:center}
.ted-intro,.ted-carousel-wrap{min-width:0}
.ted-carousel-wrap{overflow:hidden}
.ted-intro h2{color:var(--acc-dk);font-family:var(--serif);font-weight:400;font-size:clamp(1.375rem,2.4vw,1.875rem);
              line-height:1.28;letter-spacing:-.01em;margin-top:.85rem}
.ted-intro p{font-size:.9375rem;line-height:1.95;color:var(--ink2);margin-top:1.1rem}
.ted-intro .btn{margin-top:1.75rem}
.ted-progress{position:relative;height:2px;background:var(--edge-md);border-radius:2px;
              margin-bottom:1.5rem;overflow:hidden}
.ted-progress span{position:absolute;top:0;left:0;height:100%;background:var(--acc);
                    border-radius:2px;width:25%}
/* İmleçle sürüklenebilir olduğunun tek işareti bu: fare kullanıcısı
   şeridi yakalayıp çekebileceğini başka türlü anlamıyor. Dokunmatikte
   imleç zaten görünmüyor, parmakla kaydırma da native çalışıyor. */
.ted-carousel{display:flex;gap:1.15rem;overflow-x:auto;scroll-snap-type:x proximity;
              padding-bottom:.35rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;
              cursor:grab}
.ted-carousel.cekiliyor{cursor:grabbing;scroll-snap-type:none;user-select:none;
                        scroll-behavior:auto}
/* Sürüklerken görselin kendi "resmi sürükle" davranışı devreye girip
   çekmeyi bölüyordu. */
.ted-carousel img{-webkit-user-drag:none;user-select:none}
.ted-carousel::-webkit-scrollbar{display:none}
.ted-card{flex:0 0 clamp(150px,20vw,210px);scroll-snap-align:start;display:flex;
          flex-direction:column}
.ted-card .ph{aspect-ratio:4/3;border-radius:4px}
.ted-card b{display:block;font-family:var(--serif);font-weight:500;font-size:.9375rem;
            margin-top:.85rem;letter-spacing:-.005em}
.ted-card small{display:block;font-size:.75rem;line-height:1.55;color:var(--ink2);
                 margin-top:.3rem}
.stack{border-top:1px solid var(--edge)}
.stack a{display:grid;grid-template-columns:96px 2.75rem minmax(0,1fr) minmax(0,.85fr) 1.5rem;
         gap:clamp(1rem,2.6vw,2.25rem);align-items:center;padding:1.25rem 0;
         border-bottom:1px solid var(--edge);transition:background .25s ease,padding .25s ease}
.stack a:hover{background:rgba(31,90,115,.05);padding-left:.9rem;padding-right:.9rem}
.stack .ph{aspect-ratio:1}
.stack .n{font-size:.6875rem;letter-spacing:.2em;color:var(--acc)}
.stack b{font-family:var(--serif);font-weight:500;font-size:clamp(1.125rem,1.9vw,1.4375rem);letter-spacing:-.01em}
.stack .d{font-size:.875rem;line-height:1.7;color:var(--ink2);text-align:right}
.stack .go{text-align:right;color:var(--acc);font-size:1rem;opacity:0;transition:opacity .25s ease}
.stack a:hover .go{opacity:1}

/* ---------- Sık sorulan sorular ---------- */
.faq{border-top:1px solid var(--edge)}
.faq details{border-bottom:1px solid var(--edge)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
             padding:1.15rem 0;cursor:pointer;list-style:none;font-family:var(--serif);
             font-size:1.0625rem;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{font-style:normal;color:var(--acc);font-size:1.25rem;line-height:1;flex-shrink:0;
               transition:transform .25s ease}
.faq details[open] summary i{transform:rotate(45deg)}
.faq p{font-size:.9375rem;line-height:1.95;color:var(--ink2);padding:0 0 1.35rem;max-width:64ch}

/* ---------- İletişim ---------- */
.iletisim{background:var(--surf)}
.ile-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.ile-grid .ph{aspect-ratio:4/3}
.ile-list{margin-top:1.5rem;border-top:1px solid var(--edge)}
.ile-list div{padding:1rem 0;border-bottom:1px solid var(--edge)}
.ile-list b{display:block;font-family:var(--serif);font-weight:500;font-size:1.0625rem}
.ile-list span{display:block;font-size:.875rem;color:var(--ink2);margin-top:.2rem;line-height:1.7}
.ile-grid h2{color:var(--acc-dk);font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.9vw,2.125rem);
             letter-spacing:-.015em;margin-top:.85rem}

/* ---------- Randevu formu ---------- */
.randevu-form{background:var(--bg);border:1px solid var(--edge);border-radius:4px;
               padding:clamp(1.5rem,3vw,2.25rem)}
.randevu-form .f-row{margin-bottom:1.15rem}
.randevu-form .f-row:last-of-type{margin-bottom:1.5rem}
.randevu-form label{display:block;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
                     color:var(--ink2);margin-bottom:.5rem}
.randevu-form input,.randevu-form textarea{width:100%;border:1px solid var(--edge-md);border-radius:3px;
    background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:.9375rem;
    padding:.75rem .9rem;transition:border-color .2s ease}
.randevu-form input:focus,.randevu-form textarea:focus{outline:none;border-color:var(--acc)}
.randevu-form textarea{resize:vertical;min-height:5rem}
.randevu-form button{width:100%;border:0;cursor:pointer}
.randevu-form .f-msg{margin-top:1rem;font-size:.8125rem;min-height:1.2em}
.randevu-form .f-msg.ok{color:var(--acc)}
.randevu-form .f-msg.err{color:#B23A3A}

/* ---------- Künye (sade tek satır) ---------- */
/* Footer'ın dikey payı geniş ekranda 3.5vw ile büyüyordu; içeriği tek
   satırlık bir künye olduğu için özellikle Hasta Rehberi gibi ferah
   sayfalarda kalın bir koyu bant gibi duruyordu. Pay daraltıldı —
   yalnızca footer'ın kendi dolgusu, bölüm yükseklikleri etkilenmiyor. */
footer{background:var(--deep);color:rgba(255,255,255,.66);padding:clamp(1.5rem,2.2vw,2rem) 0}
footer .fb{display:inline-flex;align-items:center;gap:.7em;
           font-family:var(--serif);font-size:1.0625rem;line-height:1.3;
           /* Burada color:#fff yazıyordu ama isim metnine hiç ulaşmıyordu:
              isim bir <span> ve ".f-end span" kuralı onu rgba(255,255,255,.4)
              yapıyor. Dolayısıyla yalnızca currentColor ile boyanan amblem
              beyaz kalıyor, yazı gri duruyordu — kilidin içinde amblem tek
              başına parlıyordu. Tek bir ton veriliyor, amblem de onu
              currentColor ile alıyor. */
           color:rgba(255,255,255,.4)}
footer .fb .mk{flex:none;width:3.18em;height:auto;display:block}
footer .fb .bt{display:block}
footer .fb em{display:block;font-style:normal;font-family:var(--sans);font-size:.4em;letter-spacing:.26em;
              text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:.4em}
.f-end{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
       font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.f-end a{color:rgba(255,255,255,.66)}
.f-end a:hover{color:#fff}
.f-end span{color:rgba(255,255,255,.4)}

/* ---------- Sabit WhatsApp düğmesi ---------- */
.wa{position:fixed;right:16px;bottom:16px;z-index:60;width:56px;height:56px;
    display:flex;align-items:center;justify-content:center;border-radius:50%;
    transition:transform .2s ease}
.wa:hover{transform:scale(1.05)}
.wa svg{width:100%;height:100%}
@media (min-width:768px){.wa{width:64px;height:64px;right:28px;bottom:28px}}

@media (max-width:960px){
  .about,.ile-grid,.ted-grid{grid-template-columns:1fr}
  .ted-card{flex-basis:150px}
  .burger{display:flex;position:relative;z-index:56}
  .stack a{grid-template-columns:72px 1fr;gap:1rem;padding:1rem 0}
  .stack .n,.stack .go{display:none}
  .stack .d{text-align:left;grid-column:2;margin-top:.15rem}

  /* ---------- Mobil menü: tam ekran overlay ---------- */
  nav.menu{
    position:fixed;inset:0;
    height:100vh;height:100dvh;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:1.85rem;
    background:var(--deep);
    font-size:1.125rem;letter-spacing:.1em;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s;
    z-index:55;
  }
  nav.menu a{color:rgba(255,255,255,.82);padding:.35rem 0}
  nav.menu a:hover,nav.menu a.on{color:#fff}
  nav.menu .sep{display:none}
  body.nav-open nav.menu{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
    transition:opacity .3s ease,transform .3s ease;
  }
  body.nav-open{overflow:hidden}
  body.nav-open .burger i{background:#fff}
  .burger{transition:transform .25s ease}
  .burger i{transition:transform .25s ease,opacity .2s ease}
  .burger.active i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .burger.active i:nth-child(2){opacity:0}
  .burger.active i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

  /* ---------- Footer mobilde daha derli toplu ----------
     Dar ekranda .f-end sarmalanıyor ve marka ile telif satırı sola
     yaslı, aralarında geniş bir boşlukla alt alta düşüyordu; sağ altta
     duran WhatsApp düğmesiyle birlikte denge sağa kayıyordu. Mobilde
     ortalanıp aralık kapatılıyor ve araya ince bir ayraç konuyor. */
  .f-end{flex-direction:column;justify-content:center;text-align:center;gap:.9rem}
  .f-end > div{width:100%}
  .f-end > div + div{border-top:1px solid rgba(255,255,255,.1);padding-top:.9rem}
  footer .fb{justify-content:center}
  footer{padding:1.5rem 0}
  footer .fb{font-size:.85rem}
  footer .fb em{font-size:.44em;margin-top:.33em}
  /* Telif satırı marka adıyla neredeyse aynı ağırlıkta çıkıyordu;
     ikincil bilgi olarak geriye çekiliyor. */
  .f-end{gap:.75rem;font-size:.625rem}
}
@media (max-width:560px){
  /* Dar ekranda amblem + iki satır metin yan yana sığmıyordu; marka
     bloğunu küçültüyoruz (amblem em tabanlı olduğu için birlikte
     küçülüyor) ki isim tek satırda kalsın. */
  /* Header %96 opaktı; snap noktasında arkasında kalan bir önceki
     bölüm hafifçe sızıyordu. Mobilde tam opak. */
  .top.solid{background:#fff}
  .brand{font-size:.95rem;gap:.55em}
  /* Dar ekranda marka metni küçüldüğü için amblem de küçülüyordu ve
     kilit içinde orantısız kalıyordu; mobilde metne göre daha büyük
     bir oran veriliyor. */
  .brand .mk{width:3.78em}
  .brand em{font-size:.5em;letter-spacing:.14em;white-space:nowrap}

  /* Özgeçmiş özeti: satır "space-between" ile dizildiği için tek satırlık
     metinler sağa yapışıyor, alt satıra taşanlar ise satır ortasından
     başlıyordu — liste bir sağa bir ortaya kayıyor gibi görünüyordu.
     Dar ekranda yıl sütunu sabit genişlikte, metin hep aynı x'ten
     başlayıp sola hizalı akıyor. */
  .cv div{gap:.9rem}
  .cv div em{width:5.6rem}
  .cv div span{flex:1;text-align:left}
  .hero{min-height:auto;padding-top:0}
  nav.menu{gap:1.5rem;font-size:1rem}
  /* Mobilde hero'nun altındaki adres/telefon/saat şeridi kaldırıldı —
     aynı bilgi zaten aşağıdaki İletişim bölümünde var, burada sadece
     kalabalık yaratıyordu. Şerit kalkınca kendi üst çizgisi (border-top)
     de gitmiş oluyor, gradient hero'nun en altına kadar kesintisiz iner. */
  .hero .bar{display:none}
}
@media print{.top,.wa{display:none}}

/* Çerez bildirim şeridi. position:fixed — bölüm yüksekliklerine
   dokunmuyor, snap/ölçü düzenini bozmuyor. */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:1rem;
  align-items:center;justify-content:center;flex-wrap:wrap;
  padding:.85rem clamp(1rem,4vw,2rem);background:rgba(15,33,42,.96);
  color:rgba(255,255,255,.82);backdrop-filter:saturate(1.4) blur(6px);
  box-shadow:0 -6px 24px rgba(0,0,0,.18);
  transform:translateY(110%);transition:transform .26s ease}
.ck.on{transform:translateY(0)}
.ck p{margin:0;font-size:.82rem;line-height:1.5;max-width:64ch}
.ck a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.ck button{flex:none;border:0;border-radius:999px;cursor:pointer;
  padding:.5rem 1.35rem;font:inherit;font-size:.82rem;font-weight:500;
  background:var(--acc);color:#fff}
.ck button:hover{background:var(--acc-dk)}
@media (max-width:560px){
  .ck{gap:.65rem;padding:.8rem 1rem 1rem;text-align:center}
  .ck p{font-size:.78rem}
  .ck button{width:100%}
}
footer .fl{color:rgba(255,255,255,.55);text-decoration:none}
footer .fl:hover{color:#fff;text-decoration:underline}

/* Tıklanabilir iletişim satırları. Satırın tamamı bağlantı; renk
   değişmesin diye miras alıyor, hover'da accent'e dönüyor. */
.ile-list a.ci{display:block;color:inherit;text-decoration:none}
.ile-list a.ci b{transition:color .15s ease}
.ile-list a.ci:hover b,.ile-list a.ci:focus-visible b{color:var(--acc)}
.ile-list a.ci:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}
/* Açıklaması olmayan iletişim satırı boş satır bırakmasın. */
.ile-list span:empty{display:none}

/* ---------- Hakkımda: uzun metin + "daha fazla göster" ----------
   <details> kullanıldı: JS kapalıyken de açılıyor, içerik gizli değil
   katlanmış olduğu için arama motoru görüyor, klavyeyle erişilebilir.
   Varsayılan üçgen işareti kaldırılıp kendi ok'umuz konuldu. */
.about .ab-lead{font-size:1.0625rem;color:var(--ink);margin-bottom:1rem}
.about .ab-more{margin:.35rem 0 1.6rem}
.about .ab-more>summary{display:inline-flex;align-items:center;gap:.5em;
  cursor:pointer;list-style:none;color:var(--acc);font-size:.9375rem;
  font-weight:500;padding:.35rem 0}
.about .ab-more>summary::-webkit-details-marker{display:none}
.about .ab-more>summary::after{content:"";width:.5em;height:.5em;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-.1em,-.1em);transition:transform .2s ease}
.about .ab-more[open]>summary::after{transform:rotate(-135deg) translate(-.1em,-.1em)}
.about .ab-more>summary:hover{color:var(--acc-dk)}
.about .ab-more .s-close,.about .ab-more[open] .s-open{display:none}
.about .ab-more[open] .s-close{display:inline}
.about .ab-more h3{font-family:var(--serif);font-weight:500;font-size:1.0625rem;
  color:var(--acc-dk);margin:1.9rem 0 .55rem;letter-spacing:-.005em}
.about .ab-more p{margin:0 0 .8rem}
.about .ab-links{display:flex;flex-direction:column;gap:.45rem;margin:.95rem 0 .2rem}
.about .ab-links a{display:inline-flex;align-items:center;gap:.45em;
  align-self:flex-start;color:var(--acc);text-decoration:none;font-size:.9375rem}
.about .ab-links a::after{content:"→";transition:transform .18s ease}
.about .ab-links a:hover{color:var(--acc-dk)}
.about .ab-links a:hover::after{transform:translateX(.22em)}

/* Akademik alt sayfada içerik henüz yoksa */
.ak-bos{max-width:60ch;color:var(--ink2);line-height:1.8}

/* Sosyal medya simgeleri — menünün sonunda, markaların kendi resmî
   logolarıyla (renkleri sabit, menü rengine boyanmıyor). Yükseklik header'ın en uzun öğesi olan marka bloğunu geçmiyor, yani
   header yüksekliği (--hh) değişmiyor. */
nav.menu .soc{display:inline-flex;align-items:center;gap:.6rem}
nav.menu .soc a{display:inline-flex;width:30px;height:30px;transition:transform .18s ease,filter .18s ease}
nav.menu .soc a:hover,nav.menu .soc a:focus-visible{transform:scale(1.08);filter:drop-shadow(0 2px 5px rgba(0,0,0,.18))}
nav.menu .soc svg{width:100%;height:100%;display:block}
@media (max-width:960px){
  nav.menu .soc{margin-top:.8rem;gap:1rem}
  nav.menu .soc a{width:40px;height:40px}
}
/* Simgeler eklenince menü genişledi; masaüstünde marka ile menü tek
   satıra sığmazsa ikisi de alt satıra kayıp header'ı uzatıyordu (bu da
   --hh ile bölüm hizalamasını bozardı). Öğeler sarmalanmıyor, aralıklar
   biraz daraltıldı; dar masaüstünde yazı ve aralık bir kademe küçülüyor. */
@media (min-width:961px){
  .top .brand{flex:none}
  .top .brand .bt span,.top .brand em{white-space:nowrap}
  nav.menu{gap:1.05rem;flex-wrap:nowrap}
  nav.menu a,nav.menu .sep,nav.menu .soc{flex:none;white-space:nowrap}
}
@media (min-width:961px) and (max-width:1200px){
  nav.menu{gap:.85rem;font-size:.78rem;letter-spacing:.1em}
  nav.menu .soc{gap:.45rem}
  nav.menu .soc a{width:27px;height:27px}
}
/* En dar masaüstü bandında ayraç noktaları kalkıyor. Marka boyutuna
   dokunulmuyor: header yüksekliği --hh'e eşit kalmalı. */
@media (min-width:961px) and (max-width:1090px){
  nav.menu .sep{display:none}
  nav.menu{gap:.9rem}
}
@media (min-width:961px) and (max-width:1010px){
  nav.menu{gap:.7rem;letter-spacing:.06em}
}


/* ---------- Erişilebilirlik ---------- */
:is(a,button,summary):focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---------- Alt sayfa üst menüsü: hero-sub açık zemin üzerinde olduğu için
   header baştan itibaren 'solid' görünümde başlar (şeffaf+beyaz yazı hatası önlenir) ---------- */
body.sub .top{background:rgba(255,255,255,.96);backdrop-filter:blur(8px)}
body.sub .top{border-bottom-color:var(--edge)}
body.sub .brand{color:var(--acc)}
body.sub .brand em{color:var(--ink2)}
body.sub nav.menu{color:var(--ink2)}
body.sub nav.menu a:hover,body.sub nav.menu a.on{color:var(--ink)}
body.sub .burger i{background:var(--ink)}
body.sub.nav-open .burger i{background:#fff}

/* ---------- Alt sayfa: kısa hero ---------- */
.hero-sub{background:var(--surf);padding:clamp(7rem,14vw,10rem) 0 clamp(3rem,6vw,4.5rem)}
.crumb{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.crumb a{color:var(--ink2)}
.crumb a:hover{color:var(--acc)}
.crumb .sep{opacity:.5;margin:0 .4em}
.hero-sub h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.75rem,3.6vw,2.75rem);
             letter-spacing:-.015em;line-height:1.16;margin-top:.9rem;max-width:24ch}
.hero-sub .lede{font-size:.9375rem;line-height:1.9;color:var(--ink2);margin-top:1.1rem;max-width:52ch}

/* ---------- Alt sayfa: içerik gövdesi ---------- */
.content{padding:clamp(3.5rem,8vw,6rem) 0}
.content .grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
                gap:clamp(2rem,5vw,4rem);align-items:start}
.content .grid2 .ph{aspect-ratio:16/9}
/* Hakkımda'daki portre görsel: masaüstünde dikey (4/5), ama mobilde tek
   sütuna düşünce aynı oran görseli neredeyse tüm ekranı kaplayan bir
   bloğa çeviriyordu ("gerisi aşağıda kalmış" hissi) — mobilde diğer alt
   sayfalarla aynı kısa (16/9) orana düşürüldü. */
.content .grid2 .ph-portrait{aspect-ratio:4/5}
@media (max-width:768px){
  .content .grid2 .ph-portrait{aspect-ratio:16/9}

  /* Mobilde üst boşluk (header'ın altındaki alan) gereğinden fazlaydı —
     hero-sub ve content bölümlerinin üst padding'i mevcuda göre ~%15
     azaltıldı (alt padding aynı kalıyor). */
  .hero-sub{padding-top:clamp(5.95rem,11.9vw,8.5rem)}
  .content{padding-top:clamp(2.975rem,6.8vw,5.1rem)}
}
.prose{max-width:60ch}

/* ---------- Özgeçmiş ---------- */
.cv-block{margin-top:clamp(2.5rem,5vw,4rem)}
.cv-sec{margin-top:1.75rem}
.cv-sec h3{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);
           margin-bottom:.35rem}
.cv-sec .cv div{align-items:baseline}
.cv-sec .cv div em{min-width:6.5rem}
.cv-more{margin-top:1.75rem}
.cv-page .cv-sec:first-child{margin-top:0}
/* .cv varsayılanı okunabilirlik için 56ch ile sınırlı; özgeçmiş sayfası
   bir liste, satırlar sayfanın tamamını kullanmalı. */
.cv-page .cv{max-width:none}
.cv-page .cv div{gap:clamp(1.5rem,5vw,4rem)}
.cv-page .cv div span{flex:1}
.cv-page .cv div em{flex:0 0 8rem}
/* Uzun künyeler iki sütunda daha okunur: geniş ekranda bölümleri yan yana. */
@media (min-width:1100px){
  .cv-page{column-gap:clamp(2.5rem,5vw,4.5rem)}
  .cv-page .cv-sec{break-inside:avoid}
}
@media (max-width:560px){
  .cv-sec .cv div{flex-direction:column;gap:.15rem}
  .cv-sec .cv div em{min-width:0}
}
.prose h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,2.2vw,1.625rem);
          letter-spacing:-.01em;margin-top:2.25rem;margin-bottom:.75rem}
.prose h2:first-child{margin-top:0}
.prose p{font-size:.9375rem;line-height:2.05;color:var(--ink2);margin-top:.9rem}
.prose p:first-child{margin-top:0}
.prose ul{margin-top:.9rem;padding-left:1.15rem;color:var(--ink2);font-size:.9375rem;line-height:1.9}
.prose li{margin-top:.45rem}
.prose a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--ink)}
.prose .disclaimer{font-size:.8125rem;color:var(--ink2);margin-top:2rem;font-style:italic}

/* ---------- İlgili / bağlantılı liste ---------- */
.related{border-top:1px solid var(--edge);margin-top:clamp(2.5rem,5vw,4rem);
         padding-top:clamp(2.25rem,5vw,3.5rem)}
.related h3{font-family:var(--serif);font-weight:400;font-size:1.0625rem;margin-bottom:1rem}
.stack.mini a{display:grid;grid-template-columns:2.75rem minmax(0,1fr) 1.5rem;
              gap:1.25rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--edge);
              border-top:none;transition:background .25s ease,padding .25s ease}
.stack.mini{border-top:1px solid var(--edge)}
.stack.mini a:hover{background:rgba(31,90,115,.05);padding-left:.75rem}
.stack.mini .n{font-size:.6875rem;letter-spacing:.2em;color:var(--acc)}
.stack.mini b{font-family:var(--serif);font-weight:500;font-size:1.0625rem;letter-spacing:-.005em}
.stack.mini .go{text-align:right;color:var(--acc);opacity:0;transition:opacity .25s ease}
.stack.mini a:hover .go{opacity:1}
.stack.mini .tt{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.stack.mini.no-thumb .tt{grid-column:1/3}
.stack.mini .tt small{font-size:.75rem;line-height:1.5;color:var(--ink2);font-weight:400;letter-spacing:0}

/* ---------- Yazılar: makale kartı ---------- */
.art-stack{border-top:1px solid var(--edge)}
.art-stack a{display:grid;grid-template-columns:96px minmax(0,1fr) auto 1.5rem;
             gap:clamp(1rem,2.6vw,2.25rem);align-items:center;padding:1.35rem 0;
             border-bottom:1px solid var(--edge);transition:background .25s ease,padding .25s ease}
.art-stack a:hover{background:rgba(31,90,115,.05);padding-left:.9rem;padding-right:.9rem}
.art-stack .ph{aspect-ratio:1}
.art-stack b{font-family:var(--serif);font-weight:500;font-size:clamp(1.0625rem,1.7vw,1.25rem);
             letter-spacing:-.008em;display:block}
.art-stack .tag{font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);
                display:block;margin-bottom:.4rem}
.art-stack .dt{font-size:.75rem;color:var(--ink2);white-space:nowrap}
.art-stack .go{text-align:right;color:var(--acc);font-size:1rem;opacity:0;transition:opacity .25s ease}
.art-stack a:hover .go{opacity:1}
.soon{border-top:1px solid var(--edge);padding:2.5rem 0;text-align:center;color:var(--ink2);
      font-size:.875rem}

/* ---------- 404 ---------- */
.err{min-height:52vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
     text-align:center;padding:clamp(7rem,14vw,10rem) 0 clamp(4rem,8vw,6rem)}
.err .code{font-family:var(--serif);font-size:clamp(3rem,8vw,5.5rem);color:var(--acc);line-height:1}
.err h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);margin-top:1rem}
.err p{color:var(--ink2);margin-top:.75rem;max-width:40ch}
.err .btn-fill{margin-top:2rem}

@media (max-width:960px){
  .content .grid2{grid-template-columns:1fr}
  .art-stack a{grid-template-columns:64px minmax(0,1fr) auto;column-gap:1rem}
  .art-stack .go{display:none}
}
@media (max-width:560px){
  .art-stack a{grid-template-columns:1fr;row-gap:.35rem}
  .art-stack .ph{display:none}
  .art-stack .dt{order:-1}
}

/* Aydınlatma metni / çerez politikası sayfası. */
.legal{max-width:70ch}
.legal h2{font-size:1.05rem;letter-spacing:.01em;color:var(--acc-dk);
  margin:2.1rem 0 .6rem}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 .85rem;line-height:1.75;font-size:.95rem}
.legal mark.todo{background:#FFF3C4;color:#6B4E00;padding:0 .25em;
  border-radius:3px;font-style:normal}

/* ---------- Serbest içerik blokları (editörden eklenen) ---------- */
.blocks{margin-top:clamp(2.25rem,4vw,3.25rem);display:flex;flex-direction:column;
  gap:clamp(1.5rem,3vw,2.25rem)}
.blocks .blk-txt{max-width:70ch}
.blocks .blk-txt h3{font-family:var(--serif);font-weight:500;font-size:1.0625rem;
  color:var(--acc-dk);margin:0 0 .55rem}
.blocks .blk-txt p{margin:0;line-height:1.8}
.blocks figure{margin:0}
.blocks .blk-img .ph{aspect-ratio:3/2;border-radius:3px;overflow:hidden;
  background:var(--bg-alt,#EEF2F5)}
.blocks .blk-img .ph img{width:100%;height:100%;object-fit:cover;display:block}
.blocks figcaption{margin-top:.6rem;font-size:.8125rem;color:var(--ink2);line-height:1.6}

/* ---------- Ana sayfa: tam ekran bolumler ----------
   Yalnizca ana sayfada gecerli (body'de .sub sinifi yoksa) — alt sayfalar
   normal akista kalir.

   SNAP KALDIRILDI. Bir donem burada dikey yapisma vardi (once proximity,
   sonra mandatory, en son JS ile yumusatilmis bir surum); hepsi kaldirildi,
   sayfa normal kayiyor. Bolum YUKSEKLIKLERI kasitli olarak aynen korundu —
   duzen bu olculere gore oturmus durumda. Kaldirmadan once ve sonra dokuz
   ekran boyutunda olculup birebir ayni olduklari dogrulandi.

   Yukseklik icin 100lvh: large viewport height, yani adres cubugu
   tamamen gizliyken ki EN BUYUK gorunur alan. Bu bir alt sinir: bolum
   icerigi uzunsa daha da uzar. dvh denenmisti ve olmadi: dvh o an
   GORUNEN alana esit (cubuk haric), bolum tam o kadar olunca sayfa
   cubugun altinda devam ediyor ve orada bir sonraki bolumden serit
   gorunuyordu. Desteklenmeyen tarayicilarda vh. */


body:not(.sub) .hero,
body:not(.sub) #hakkimda,
body:not(.sub) #tedaviler,
body:not(.sub) #sorular,
body:not(.sub) #iletisim{
  /* Denenen +1px/+2px üst üste bindirme gerçek cihazdaki çizgiyi çözmedi
     (o çizgi muhtemelen alt piksel yuvarlaması değil, subpage header'ının
     kendi border-bottom'uydu) — pay 0'a çekildi, bölümler tekrar tam
     100vh/100lvh. */
  min-height:100vh;min-height:100lvh;
}

/* Hero, sabit header'ın arkasına giriyor. Bir zamanlar bunu telafi etmek
   için hero'ya header yüksekliği kadar EKSTRA yükseklik veriliyordu; ama
   o telafi ilk ekranı bir viewport'tan uzun yapıyor ve sayfanın tamamı
   tek ekranda görünmüyordu. Metin artık görünen alanın ortasına
   hizalandığı (bkz. base1.css, --hh paylı padding) için ekstra yüksekliğe
   gerek yok: hero da diğer bölümler gibi en az 100lvh. */

/* Header sabit (position:fixed) konumlandığı için snap noktası tam
   viewport tepesine değil, header'ın altına denk gelmeli — aksi halde
   bölüm başlığı header'ın arkasında kalır. Header'ın gerçek yüksekliği
   kırılma noktalarına göre değiştiği için ölçü --hh değişkeninden
   geliyor (bkz. base1.css). */
body:not(.sub) #hakkimda,
body:not(.sub) #tedaviler,
body:not(.sub) #sorular,
body:not(.sub) #iletisim,
body:not(.sub) footer{
  scroll-margin-top:var(--hh);
}

body:not(.sub) #hakkimda,
body:not(.sub) #tedaviler,
body:not(.sub) #sorular,
body:not(.sub) #iletisim{
  display:flex;flex-direction:column;justify-content:center;
}
body:not(.sub) #tedaviler{background:var(--surf)}
body:not(.sub) #iletisim{background:var(--surf)}

/* Snap tam oturduğunda ekranın en üstünde bir önceki bölümden 1px'lik ince
   bir şerit kalabiliyor: scroll pozisyonu alt piksel (ör. .5px) hassasiyetle
   durduğu için önceki bölümün son piksel satırı görünür kalıyor. Bölümün
   yüksekliğini büyütmek bunu çözmüyor (kutu sınırı yine aynı yerde). Onun
   yerine her bölüme, KENDİ zemin rengiyle 2px yukarı taşan bir box-shadow
   veriliyor: yerleşimi hiç etkilemez, ama bölüm DOM'da bir öncekinden sonra
   geldiği için o 2px'i üzerine boyar ve şerit kaybolur. */
body:not(.sub) #hakkimda{box-shadow:0 -2px 0 0 var(--bg)}
body:not(.sub) #tedaviler{box-shadow:0 -2px 0 0 var(--surf)}
body:not(.sub) #sorular{box-shadow:0 -2px 0 0 var(--bg)}
body:not(.sub) #iletisim{box-shadow:0 -2px 0 0 var(--surf)}
body:not(.sub) footer{box-shadow:0 -2px 0 0 var(--deep)}

/* Alt sayfalarda mobil tam ekran menü açıkken aktif/hover link okunur kalsın
   (body.sub'ın masaüstü koyu-metin kuralı, koyu overlay zemininde görünmez olurdu) */
@media (max-width:960px){
  body.sub nav.menu a:hover,
  body.sub nav.menu a.on{color:#fff}
}

@media (max-width:560px){
  body:not(.sub) .hero{min-height:100vh;min-height:100lvh}
  body:not(.sub) .hero{justify-content:flex-start}
  body:not(.sub) .hero .in{
    margin-top:0;margin-bottom:0;
    min-height:100vh;min-height:100svh;
    display:flex;flex-direction:column;justify-content:center;
  }
}

/* ---------- Telefonda güvenlik payı ----------
   Gerçek cihazda (iOS Safari) 100lvh beklenen değeri vermiyor: bölüm
   adres çubuğunun arkasına kadar uzamıyor, çubuğun arkasında bir sonraki
   bölüm kalıyor. Bunun görünen kanıtı, Safari'nin alt çubuğu arkasındaki
   içeriğin rengine boyaması — koyu hero'nun üstündeyken çubuk BEYAZ
   çıkıyordu, yani arkasındaki beyaz bölümdü.

   Hangi tarayıcının hangi birimi nasıl çözdüğüne güvenmek yerine sabit
   bir pay veriliyor: bölüm, görünür alandan bir tarayıcı çubuğu boyu
   daha uzun. Pay ekranın ALTINDA kaldığı için görünmüyor; tek etkisi
   bölümler arası kaydırma mesafesinin bir miktar artması. */
@media (max-width:560px){
  body:not(.sub) .hero,
  body:not(.sub) #hakkimda,
  body:not(.sub) #tedaviler,
  body:not(.sub) #sorular,
  body:not(.sub) #iletisim{
    min-height:calc(100vh + 96px);
    min-height:calc(100lvh + 96px);
  }
}