/* ═══════════════════════════════════════════════════════════
   BİZİM DİŞ · Tasarım Sistemi v3
   Token tabanlı · WCAG AA · 3 breakpoint (640 / 900 / 1200)
   ═══════════════════════════════════════════════════════════ */

:root{
  /* — Renk —
     Tek renk ailesi: lacivertten açık maviye uzanan bir merdiven.
     İkinci bir aksan rengi YOK; vurgu tonla yapılır, renkle değil.
     Nötrler de bu maviye doğru eğimli — gri asla saf gri değil. */
  --lacivert-derin:#04142F;   /* en koyu · footer, koyu panel */
  --lacivert-koyu:#08265A;
  --lacivert:#0E3C86;         /* başlık ve logo mavisi */
  --mavi:#1A5FD0;             /* dolgu / ikon / grafik */
  --mavi-metin:#1550B4;       /* metin & link · beyazda 7.4:1 */
  --mavi-koyu:#12439A;        /* birincil buton */
  --mavi-parlak:#5B9BF5;      /* koyu zeminde vurgu */
  --mavi-sis:#E5EEFC;         /* açık dolgu */
  --mavi-buz:#F6FAFE;         /* en açık zemin */

  /* — Yüzey merdiveni —
     Sayfanın zemini saf beyaz DEĞİL: hafif mavi bir kâğıt.
     Saf beyaz yalnızca kartlara ayrıldı; böylece kartlar zeminden
     ayrılıp öne çıkıyor. Her yer beyaz olunca hiçbir şey öne
     çıkmıyor, göze de çiğ geliyordu. */
  --beyaz:#FFFFFF;            /* SADECE kart yüzeyi */
  --zemin-sicak:#F1F5FC;      /* sayfa zemini */
  --zemin:#E6EEFA;            /* koyu bant — bölüm ayrımı */

  --metin:#0B1729;
  --metin-soft:#44536B;
  /* Zemin artık saf beyaz değil (#F1F5FC): eski #64748F o zeminde
     AA'nın altına düşüyordu. Koyulaştırıldı. */
  --metin-hafif:#586A88;      /* mavi kâğıtta 5.1:1 */
  --cizgi:#DFE8F5;            /* dekoratif ayraç */
  --cizgi-kontrol:#8494AC;    /* input/buton kenarı · 3.05:1 */

  /* — Tipografi — */
  --serif:'Fraunces',Georgia,serif;
  --sans:'Montserrat',system-ui,-apple-system,sans-serif;
  --f-xs:.8125rem;
  --f-sm:.875rem;
  --f-md:1rem;
  --f-lg:1.125rem;
  --f-xl:clamp(1.25rem,1.05rem + .8vw,1.5rem);
  --f-2xl:clamp(1.5rem,1.15rem + 1.5vw,2.125rem);
  --f-3xl:clamp(2rem,1.3rem + 3vw,3.5rem);
  --f-4xl:clamp(2.5rem,1.6rem + 4.4vw,4.25rem);
  --f-5xl:clamp(2.75rem,1.9rem + 5.4vw,5.25rem);   /* sahne başlıkları */

  /* — Cam yüzeyler —
     Yalnızca fotoğraf/koyu zemin üzerinde kullanılır; düz beyaz
     üstünde cam etkisi görünmez, orada normal kart kalır. */
  --cam-zemin:rgba(255,255,255,.10);
  --cam-zemin-acik:rgba(255,255,255,.74);
  --cam-kenar:rgba(255,255,255,.22);
  --cam-kenar-acik:rgba(4,25,60,.08);
  --cam-bulanik:blur(18px) saturate(1.25);

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

  /* — Yuvarlama — */
  --r-s:8px; --r-m:16px; --r-l:24px; --r-xl:32px;

  /* — Gölge — */
  --g-s:0 1px 3px rgba(4,25,60,.07);
  --g-m:0 6px 24px rgba(4,25,60,.09);
  --g-l:0 18px 48px rgba(4,25,60,.13);

  --kenar:1200px;
  --nav-h:82px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-size:var(--f-md);
  line-height:1.65;
  color:var(--metin);
  background:var(--zemin-sicak);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
/* SVG güvenlik ağı: boyut/renk verilmemiş bir ikon asla dev siyah şekle dönüşmesin */
svg{display:block;width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:var(--f-4xl);line-height:1.05;letter-spacing:-.035em}
h2{font-size:var(--f-3xl);line-height:1.1}
h3{font-size:var(--f-xl);line-height:1.3}
em{font-style:italic;color:var(--mavi-metin);font-weight:500}

.sarmal{max-width:var(--kenar);margin:0 auto;padding:0 var(--s5)}
.sarmal.dar{max-width:820px}
.orta{text-align:center;margin-top:var(--s6)}

/* — Erişilebilirlik — */
.atla{
  position:absolute;left:var(--s4);top:-100px;z-index:999;
  background:var(--lacivert);color:#fff;padding:var(--s3) var(--s5);
  border-radius:0 0 var(--r-s) var(--r-s);font-weight:700;
  transition:top .18s;
}
.atla:focus{top:0}
/* Ekranda görünmez, ekran okuyucuda okunur */
.gizli-metin{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--mavi-metin);
  outline-offset:2px;
  border-radius:4px;
}
[id]{scroll-margin-top:calc(var(--nav-h) + var(--s5))}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{scroll-behavior:auto}
}

/* ═══════════ ÜST ŞERİT ═══════════ */
.ust{background:var(--lacivert-derin);color:#B9C7DB;font-size:var(--f-xs);padding:var(--s2) 0}
.ust-ic{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);flex-wrap:wrap}
.ust-sol{display:flex;gap:var(--s5);flex-wrap:wrap}
.ust-oge{display:flex;align-items:center;gap:var(--s2)}
.ust-oge svg{width:14px;height:14px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;opacity:.7}
.ust-tel{color:#fff;font-weight:700;letter-spacing:.2px}
.ust-tel:hover{color:var(--mavi)}
@media (max-width:900px){.ust{display:none}}

/* ═══════════ NAV ═══════════ */
.navk{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--cizgi);
}
.navk.kaydi{box-shadow:var(--g-m)}
.nav{display:flex;align-items:center;gap:var(--s5);height:var(--nav-h)}

/* ── Ana sayfa: başlık açılış sahnesinin üzerine biner ──
   Üst şerit ve nav akıştan çıkar, böylece kaydırma sahnesi
   gerçekten tam ekran açılır. Nav sahne boyunca saydam kalır;
   sahne bitince beyaz zemine döner (.kaydi). */
.acilis-var .ust{
  position:absolute;left:0;right:0;top:0;z-index:60;
  background:transparent;
}
.acilis-var .navk{
  position:fixed;left:0;right:0;z-index:100;
  background:transparent;backdrop-filter:none;
  border-bottom-color:transparent;box-shadow:none;
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.acilis-var .navk.kaydi{
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom-color:var(--cizgi);box-shadow:var(--g-m);
}

/* Saydam haldeki okunabilirlik */
.acilis-var .navk:not(.kaydi) .logo-yz strong{color:#fff}
.acilis-var .navk:not(.kaydi) .logo-yz small{color:#A9C6F2}
.acilis-var .navk:not(.kaydi) .menu a{color:#E6EEF8}
.acilis-var .navk:not(.kaydi) .menu a:hover{color:#fff;background:rgba(255,255,255,.14)}
.acilis-var .navk:not(.kaydi) .btn-ara{color:#fff;border-color:rgba(255,255,255,.35)}
.acilis-var .navk:not(.kaydi) .btn-ara:hover{background:rgba(255,255,255,.14)}
.acilis-var .navk:not(.kaydi) .mob-cizgi,
.acilis-var .navk:not(.kaydi) .mob-cizgi::before,
.acilis-var .navk:not(.kaydi) .mob-cizgi::after{background:#fff}

.logo{display:flex;align-items:center;gap:var(--s3);flex-shrink:0}
/* Kliniğin gerçek amblemi: gümüş kalkan + diş + aile figürleri.
   Yazı görselin parçası değil — HTML metni olarak durur ki koyu
   zeminde beyaza dönebilsin. */
.logo-ikon{height:52px;width:auto;flex-shrink:0;display:block}
.logo-yz strong{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:700;color:var(--lacivert);line-height:1.05}
.logo-yz small{display:block;font-size:.55rem;letter-spacing:.18em;color:var(--metin-hafif);font-weight:600;text-transform:uppercase;margin-top:3px}

.menu{display:flex;align-items:center;gap:var(--s1);margin-left:auto}
.menu a{
  display:block;padding:var(--s3) var(--s4);border-radius:var(--r-s);
  font-size:var(--f-sm);font-weight:600;transition:color .15s,background .15s;
}
.menu a:hover{color:var(--lacivert);background:var(--zemin)}
/* Bulunulan sayfa: kalıp ekmek kırıntısında vardı, menüye uygulanmamıştı */
.menu a[aria-current="page"]{color:var(--lacivert);font-weight:700;position:relative}
.menu a[aria-current="page"]::after{
  content:'';position:absolute;left:var(--s4);right:var(--s4);bottom:4px;
  height:2px;background:var(--mavi);border-radius:2px;
}
.mob-menu a[aria-current="page"]{color:var(--mavi-metin)}

.neyl{display:flex;align-items:center;gap:var(--s2);flex-shrink:0}
.btn-ara{
  display:none;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s4);border:1.5px solid var(--cizgi-kontrol);border-radius:100px;
  font-size:var(--f-sm);font-weight:700;color:var(--lacivert);transition:.16s;
}
.btn-ara svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.btn-ara:hover{border-color:var(--lacivert);background:var(--zemin)}
.btn-rnd{
  display:inline-block;background:var(--mavi-koyu);color:#fff;
  padding:var(--s3) var(--s5);border-radius:100px;
  font-size:var(--f-sm);font-weight:700;
  box-shadow:0 6px 18px rgba(18,67,154,.28);transition:.18s;
}
.btn-rnd:hover{background:#0E3878;transform:translateY(-1px)}

/* hamburger */
.mob{display:none;width:46px;height:46px;place-items:center;border:1.5px solid var(--cizgi-kontrol);border-radius:var(--r-s)}
.mob-cizgi,.mob-cizgi::before,.mob-cizgi::after{
  display:block;width:20px;height:2px;background:var(--metin);border-radius:2px;transition:.22s;
}
.mob-cizgi{position:relative}
.mob-cizgi::before,.mob-cizgi::after{content:'';position:absolute;left:0}
.mob-cizgi::before{top:-6px}
.mob-cizgi::after{top:6px}
.mob[aria-expanded="true"] .mob-cizgi{background:transparent}
.mob[aria-expanded="true"] .mob-cizgi::before{top:0;transform:rotate(45deg)}
.mob[aria-expanded="true"] .mob-cizgi::after{top:0;transform:rotate(-45deg)}

/* mobil menü çekmecesi */
.mob-menu{
  position:fixed;inset:var(--nav-h) 0 0;z-index:99;
  background:var(--beyaz);padding:var(--s6) var(--s5);
  overflow-y:auto;animation:cekmece .22s ease;
}
.mob-menu[hidden]{display:none}
@keyframes cekmece{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mob-menu nav{display:flex;flex-direction:column;gap:var(--s2);max-width:520px;margin:0 auto}
.mob-menu a{
  padding:var(--s4) var(--s3);border-bottom:1px solid var(--cizgi);
  font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--lacivert-derin);
}
.mob-menu .mob-cta{
  margin-top:var(--s5);border:0;background:var(--mavi-koyu);color:#fff;
  border-radius:100px;text-align:center;font-family:var(--sans);font-size:var(--f-md);
}
.mob-menu .mob-tel{border:0;text-align:center;color:var(--lacivert);font-family:var(--sans);font-size:var(--f-lg)}

@media (max-width:1200px){
  .menu{display:none}
  .mob{display:grid}
  .btn-ara{display:inline-flex}
  .nav{height:74px}
  :root{--nav-h:74px}
}
@media (max-width:640px){
  /* 390px'te başlık şeridi 416px'e taşıyor, hamburger ekran dışında
     kalıyordu. "Randevu Al" burada kaldırıldı — alttaki sabit çubuk
     zaten aynı işi yapıyor ve parmağa daha yakın. */
  .btn-rnd{display:none}
  /* Metin display:none ile gizlenirse bağlantının erişilebilir ADI da
     kayboluyor (ekran okuyucu boş bağlantı okur). Görsel olarak gizle,
     ağaçta bırak. */
  .btn-ara span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .btn-ara{padding:var(--s3);width:46px;justify-content:center}
  .logo-yz small{display:none}
  .logo-ikon{height:40px}
  .logo-yz strong{font-size:1.1rem}
  .nav{gap:var(--s3)}
}

/* ═══════════════════════════════════════════════════════════
   AÇILIŞ · KARŞILAMA
   Sayfanın işi ilk ekranda başlar: kim olduğumuz, kime bakıyoruz,
   randevu nasıl alınır. Koyu bir sahne yerine açık bir zemin —
   kliniğin kapısını aralamak gibi, kapatmak gibi değil.
   Tek renk ailesi kullanıldığı için derinlik tonla kurulur.
   ═══════════════════════════════════════════════════════════ */
.giris{
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,var(--mavi-buz) 0%,var(--mavi-sis) 46%,var(--zemin-sicak) 100%);
  padding:clamp(var(--s7),5vw,var(--s9)) 0 0;
}
.giris-fon{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.giris-fon::before,.giris-fon::after{content:'';position:absolute;border-radius:50%}
.giris-fon::before{
  top:-24%;right:-12%;width:54vw;height:54vw;max-width:780px;max-height:780px;
  background:radial-gradient(circle,rgba(26,95,208,.17),transparent 66%);
}
.giris-fon::after{
  bottom:-32%;left:-16%;width:46vw;height:46vw;max-width:640px;max-height:640px;
  background:radial-gradient(circle,rgba(14,60,134,.11),transparent 68%);
}

.giris-ic{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(var(--s6),4vw,var(--s9));align-items:center;
  padding-bottom:clamp(var(--s7),5vw,var(--s9));
}
/* Üst satır: rozet değil, önüne çizgi çekilmiş bir künye */
.giris-ust{
  display:flex;align-items:center;gap:var(--s3);
  font-size:var(--f-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mavi-metin);margin-bottom:var(--s5);
}
.giris-ust::before{content:'';width:34px;height:2px;background:var(--mavi);flex:none}

/* Satır aralığı .98 İngilizce'de çalışıyor, Türkçe'de çalışmıyor:
   ğ/ş/ç kuyrukları alt satırın harflerine giriyordu. Fraunces'in
   çıkıntıları yüksek — 1.06 en sıkı güvenli değer. */
.giris h1{
  color:var(--lacivert-derin);font-size:var(--f-5xl);
  line-height:1.06;letter-spacing:-.035em;margin-bottom:var(--s5);
}
.giris h1 em{color:var(--mavi-metin);font-style:italic;margin-right:.09em}
.giris-alt{font-size:var(--f-lg);line-height:1.7;color:var(--metin-soft);max-width:52ch;margin-bottom:var(--s6)}
.giris-alt strong{color:var(--lacivert-derin);font-weight:700}
.giris-btn{display:flex;gap:var(--s3);flex-wrap:wrap}

/* Güven satırı — iddia değil, doğrulanabilir olgular */
.giris-guven{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--cizgi);
}
.giris-guven li{
  display:flex;align-items:center;gap:var(--s3);
  font-size:var(--f-sm);font-weight:600;color:var(--metin-soft);
}
.giris-guven li::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--mavi);flex:none;
}

/* ── Sağ sütun: anatomik çizim ──
   Stok fotoğraf yerine kliniğin kendi konusu. Ders kitabı kesiti
   gibi ince mavi çizgiler; sayfa açılınca sırayla çizilir.
   Etiketler dekor değil, tedavi sayfalarına giden bağlantı. */
.diz{position:relative;color:var(--mavi)}
/* Kabuktaki genel `svg{stroke:currentColor}` güvenlik ağı burada
   kapatılır: dolgulu şekillere de kontur bindirip hâleyi daire,
   kemik bloğunu kutu gibi gösteriyordu. Kontur yalnızca çizgi
   olması gereken yollara elle verilir. */
.diz svg{width:100%;height:auto;display:block;overflow:visible;fill:none;stroke:none}
.diz svg *{stroke:none}

.diz-mine{stroke:var(--mavi-metin) !important;stroke-width:2.4}
.diz-dentin{stroke:var(--mavi) !important;stroke-width:1.4;opacity:.5}
.diz-et-cizgi{stroke:var(--mavi-metin) !important;stroke-width:1.8;opacity:.75}
.diz-pulpa{fill:var(--mavi);opacity:0;animation:diz-bel .9s ease 1.1s forwards}
.diz-kemik{color:var(--mavi);opacity:0;animation:diz-bel 1.1s ease .9s forwards}
/* Desen <defs> içinde durduğu için .diz-kemik altında değil —
   kendi sınıfıyla hedeflenmesi gerekiyor, yoksa svg'nin
   fill:none'ı deseni görünmez yapıyor. */
.diz .kd{fill:var(--mavi);opacity:.24}
.diz-et{color:var(--mavi);opacity:0;animation:diz-bel 1s ease .7s forwards}
.diz-hale{color:var(--mavi);opacity:0;animation:diz-bel 1.4s ease .2s forwards}

/* Kalem darbesi: yol uzunluğu 1'e normalize edildi, dashoffset 1→0 */
.diz-ciz{
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:diz-kalem 1.6s cubic-bezier(.55,0,.25,1) var(--sira,0s) forwards;
}
@keyframes diz-kalem{to{stroke-dashoffset:0}}
@keyframes diz-bel{to{opacity:1}}

/* Etiketler */
.diz-etiket{opacity:0;animation:diz-bel .5s ease var(--sira,0s) forwards}
.diz-etiket a{cursor:pointer}
.diz-cizgi{stroke:var(--cizgi-kontrol) !important;stroke-width:1.4;stroke-dasharray:3 5}
.diz-nokta{fill:var(--mavi);stroke:var(--beyaz) !important;stroke-width:3}
.diz-etiket text{
  font-family:var(--sans);font-size:25px;font-weight:700;
  fill:var(--lacivert-derin);stroke:none;
  transition:fill .18s;
}
.diz-etiket .diz-alt{font-size:19px;font-weight:600;fill:var(--metin-hafif)}
.diz-etiket a:hover text,
.diz-etiket a:focus-visible text{fill:var(--mavi-metin)}
.diz-etiket a:hover .diz-alt{fill:var(--mavi)}
.diz-etiket a:hover .diz-cizgi{stroke:var(--mavi) !important;stroke-dasharray:none}
.diz-etiket a:hover .diz-nokta{r:6}
.diz-nokta{transition:r .18s}

.diz-not{
  margin-top:var(--s4);text-align:center;
  font-size:var(--f-xs);color:var(--metin-hafif);
}

/* Çizimin dar ekrandaki karşılığı — geniş ekranda SVG etiketleri
   görevi üstlendiği için tamamen kapalı. display:none olduğu için
   sekme sırasında da yok; iki kopya aynı anda gezinilmiyor. */
.diz-liste{display:none;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s6)}
.diz-liste a{
  display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"nokta bas" ". alt";
  column-gap:.6rem;align-items:center;
  min-height:58px;padding:.75rem .9rem;
  border:1px solid var(--cizgi);border-radius:var(--r-m);
  background:var(--beyaz);transition:.18s;
  box-shadow:0 1px 2px rgba(4,20,47,.04),0 4px 12px rgba(4,20,47,.04);
}
.diz-liste-nokta{
  grid-area:nokta;width:9px;height:9px;border-radius:50%;
  background:var(--mavi);box-shadow:0 0 0 3px var(--mavi-sis);
}
.diz-liste strong{
  grid-area:bas;font-size:var(--f-sm);font-weight:700;
  color:var(--lacivert-derin);line-height:1.25;
}
.diz-liste a > span:last-child{
  grid-area:alt;font-size:var(--f-xs);color:var(--metin-hafif);
  line-height:1.35;margin-top:.1rem;
}
.diz-liste a:active{border-color:var(--mavi);background:var(--mavi-buz)}
@media (hover:hover){
  .diz-liste a:hover{border-color:var(--mavi);transform:translateY(-2px);box-shadow:var(--g-m)}
}

/* Hareket kapalıysa çizim olduğu gibi durur — hiçbir şey gizlenmez */
@media (prefers-reduced-motion:reduce){
  .diz-ciz{stroke-dashoffset:0;animation:none}
  .diz-pulpa,.diz-kemik,.diz-et,.diz-etiket,.diz-hale{opacity:1;animation:none}
}

/* ── Yaşam evreleri ──
   Süs değil, gerçek bir giriş kapısı: her kart o yaş aralığının
   tedavi kümesine götürür. Numaralama yok, çünkü sıra değil çağ. */
.evre{position:relative;z-index:1;padding:var(--s6) 0 var(--s8)}
.evre-liste{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.evre-liste li{display:flex}
.evre-liste a{
  display:flex;flex-direction:column;width:100%;
  padding:var(--s6) var(--s5);
  background:rgba(255,255,255,.7);
  border:1px solid var(--cizgi);border-radius:var(--r-l);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.evre-yas{
  display:block;font-size:var(--f-xs);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mavi-metin);margin-bottom:var(--s2);
  transition:color .2s;
}
.evre-liste strong{
  display:block;font-family:var(--serif);font-size:var(--f-xl);font-weight:600;
  color:var(--lacivert-derin);line-height:1.15;transition:color .2s;
}
.evre-liste p{font-size:var(--f-sm);color:var(--metin-hafif);margin-top:var(--s2);flex:1}
.evre-ok{
  display:inline-flex;align-items:center;gap:6px;margin-top:var(--s5);
  font-size:var(--f-sm);font-weight:700;color:var(--mavi-metin);
  opacity:0;transform:translateX(-6px);transition:opacity .22s,transform .22s;
}
.evre-ok svg{width:15px;height:15px;stroke-width:2.2}
.evre-liste a:hover .evre-ok,.evre-liste a:focus-visible .evre-ok{opacity:1;transform:none}
.evre-liste a:hover strong{color:var(--mavi-metin)}

.yer-rozeti{
  display:inline-flex;align-items:center;gap:var(--s2);
  background:var(--beyaz);border:1px solid var(--cizgi);
  padding:var(--s2) var(--s4);border-radius:100px;
  font-size:var(--f-xs);font-weight:700;color:var(--metin-soft);
  box-shadow:var(--g-s);margin-bottom:var(--s5);
}
.yer-rozeti svg{width:14px;height:14px;fill:none;stroke:var(--mavi-metin);stroke-width:1.9}
.hero h1{color:var(--lacivert-derin);margin-bottom:var(--s5)}
.hero-alt{font-size:var(--f-lg);line-height:1.7;color:var(--metin-soft);max-width:56ch;margin-bottom:var(--s6)}
.hero-alt strong{color:var(--lacivert-derin);font-weight:700}
.hero-btn{display:flex;gap:var(--s3);flex-wrap:wrap}

.btn-b{
  display:inline-flex;align-items:center;gap:var(--s2);
  background:var(--mavi-koyu);color:#fff;
  padding:var(--s4) var(--s6);border-radius:100px;
  font-weight:700;font-size:var(--f-md);
  box-shadow:0 10px 28px rgba(18,67,154,.3);transition:.2s;
}
.btn-b:hover{background:#0E3878;transform:translateY(-2px);box-shadow:0 16px 36px rgba(18,67,154,.38)}
.btn-i{
  display:inline-flex;align-items:center;gap:var(--s2);
  background:var(--beyaz);border:1.5px solid var(--cizgi-kontrol);color:var(--metin);
  padding:var(--s4) var(--s5);border-radius:100px;font-weight:600;font-size:var(--f-md);transition:.2s;
}
.btn-i:hover{border-color:var(--lacivert);color:var(--lacivert);transform:translateY(-2px)}
.btn-i svg,.btn-b svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}

.hero-gorsel{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--g-l)}
.hero-gorsel img{width:100%;aspect-ratio:16/10;object-fit:cover}

/* güven şeridi — açılış sahnesinin hemen altında */
/* Zemin şeffaf: beyaz kartlar mavi kâğıdın üstünde dursun */
.istat-bolum{border-bottom:1px solid var(--cizgi);padding:var(--s7) 0}
.istat{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.istat > div{
  display:flex;flex-direction:column;text-align:center;
  padding:var(--s6) var(--s4);
  background:var(--beyaz);border:1px solid var(--cizgi);border-radius:var(--r-l);
}
.istat dt{font-size:var(--f-xs);color:var(--metin-hafif);font-weight:600;order:2;margin-top:var(--s2)}
.istat dd{
  font-family:var(--serif);font-size:clamp(2rem,3.2vw,2.75rem);font-weight:600;
  color:var(--lacivert);line-height:1;order:1;font-variant-numeric:tabular-nums;
  transition:color .2s;
}
.istat dd span{color:var(--mavi-metin);font-size:.55em;vertical-align:top}
/* "25+ / Yıllık yönetim deneyimi" yanlış okunuyordu ve kaynakta
   olmayan bir "+" ekliyordu. Artık birim rakamın yanında. */
.istat dd .birim{font-family:var(--sans);font-size:.34em;font-weight:700;margin-left:.28em;vertical-align:baseline}
.istat > div:hover dd{color:var(--mavi-metin)}

/* ═══════════════════════════════════════════════
   AÇILIŞ · kaydırmaya bağlı kare dizisi
   Kamera scroll ile sürülür: sayfa aşağı indikçe
   klinik içinde ilerleriz. Kareler canvas'a çizilir,
   DOM'da tek bir <canvas> vardır.

   TEMEL KURAL: canvas dekoratiftir. Başlık, metin ve
   çağrılar gerçek HTML'dir; JS çalışmasa, kareler hiç
   yüklenmese, hareket kapalı olsa da sayfa eksiksiz
   okunur (.acilis-duz düzeni devreye girer).
   ═══════════════════════════════════════════════ */
.acilis{position:relative;background:var(--lacivert-derin)}
/* Sahne artık sayfanın tepesi değil, ortasındaki sinematik ara bant.
   Yapışkan başlığın altına oturur, onun üstüne binmez. */
.acilis-sabit{
  position:sticky;top:var(--nav-h);
  height:calc(100svh - var(--nav-h));overflow:hidden;
}

/* Canvas ve ilk kare üst üste: kareler yüklenene dek
   yedek görsel durur, boş siyah ekran asla görünmez. */
.acilis-tuval,.acilis-yedek{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.acilis-tuval{opacity:0;transition:opacity .5s ease;z-index:1}
.acilis-tuval.hazir{opacity:1}

/* Perde artık yazıyı taşımıyor — o işi cam panel yapıyor.
   Geriye yalnızca iki uçta ince bir koyulaştırma kaldı:
   üstte saydam nav'ın, altta ilerleme şeridinin okunması için.
   Ortadaki alan açık kalır, klinik olduğu gibi görünür. */
.acilis-perde{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:var(--perde,1);transition:opacity .55s ease;
  background:
    linear-gradient(180deg,rgba(4,25,60,.66) 0%,rgba(4,25,60,.30) 14%,rgba(4,25,60,.02) 34%,rgba(4,25,60,.04) 60%,rgba(4,25,60,.46) 100%);
}

/* ── Metin katmanları ──
   Her katman kendi kaydırma aralığında belirir.
   Hepsi aynı noktada durur: kamera hareket eder, yazı değil. */
.acilis-icerik{position:absolute;inset:0;z-index:3;display:grid;align-items:center}
.acilis-kat{
  grid-area:1/1;
  opacity:0;transform:translateY(22px);
  transition:opacity .45s ease,transform .45s ease;
  will-change:opacity,transform;pointer-events:none;
}
.acilis-kat.gor{opacity:1;transform:none;pointer-events:auto}
/* pointer-events:none fareyi keser ama SEKMEYİ kesmez: görünmeyen
   katmandaki "Randevu talebi oluştur" düğmesi tab sırasında odağı
   yutup sayfayı 6000px aşağı fırlatıyordu. visibility bunu da keser. */
.acilis-kat:not(.gor){visibility:hidden}

/* Sol metin + sağ kart sütunu */
.acilis-duzen{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s7);align-items:center}

/* ── Açık cam panel ──
   Yazı koyu zemine değil, buzlu beyaz bir yüzeye oturur.
   Böylece klinik görüntüsü kararmadan arkada durur ve
   metin kontrastı zemine değil panele bağlı olur. */
.acilis-kat-ic{
  max-width:680px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r-xl);
  padding:clamp(var(--s6),3.4vw,var(--s8));
  box-shadow:0 26px 64px rgba(4,25,60,.22);
}
.acilis-kat-ic h1,.acilis-kat-ic h2{color:var(--lacivert-derin);font-size:var(--f-4xl);margin-bottom:var(--s4)}
.acilis-kat-ic h2{font-size:var(--f-3xl)}
/* İtalik serif, ardından gelen düz harfe yaslanıyor — nefes payı */
.acilis-kat-ic em{color:var(--mavi-metin);font-style:italic;margin-right:.09em}
.acilis-kat-ic p{font-size:var(--f-lg);color:var(--metin-soft);line-height:1.62}
.acilis-kat-ic p strong{color:var(--lacivert-derin);font-weight:700}
.acilis-btn{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}

/* ── Sağ sütun: kaydırmayla dolan yaşam evresi kartları ──
   Görünürlükleri doğrudan --i'den türer; her kartın kendi eşiği
   vardır, sahne ilerledikçe sırayla belirirler. JS gerekmez. */
/* Kartlar sayfa açılışında sırayla girer (data-gir), sonra
   kaydırma boyunca hafifçe süzülür. Görünürlüğü --i'ye bağlamak
   sayfa tepesinde hepsini gizliyordu — giriş ayrı, kayma ayrı. */
.acilis-kartlar{display:grid;gap:var(--s3);width:280px}
.acilis-kart{
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-m);
  padding:var(--s4) var(--s5);
  box-shadow:0 12px 32px rgba(4,25,60,.14);
}
.acilis-kart strong{
  display:block;font-family:var(--serif);font-size:var(--f-lg);
  font-weight:600;color:var(--lacivert-derin);line-height:1.2;
}
.acilis-kart span{display:block;font-size:var(--f-xs);color:var(--metin-hafif);margin-top:2px}
/* Giriş bittikten sonra kaydırmaya bağlı süzülme devralır.
   Seçici iki sınıf derinliğinde: sahne katmanındaki
   [data-gir].gorundu{transform:none} kuralı CSS'te daha sonra
   geldiği için eşit özgüllükte onu ezemezdi. */
.acilis-kartlar .acilis-kart.gorundu{transform:translateY(calc((.5 - var(--i,0)) * 34px))}

/* ── Alt şerit: ilerleme + kaydırma daveti ── */
/* .sarmal ile birlikte kullanılır — yan boşluğu ezmemek için
   yalnızca padding-bottom yazılır, shorthand kullanılmaz. */
.acilis-serit{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding-bottom:clamp(var(--s5),4vh,var(--s7));color:#fff;
}
.acilis-kaydir{display:flex;align-items:center;gap:var(--s3);font-size:var(--f-sm);color:#B7C8E2}
.acilis-kaydir svg{width:1.1em;height:1.1em;animation:inip-cik 2.2s ease-in-out infinite}
@keyframes inip-cik{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(5px);opacity:1}}
.acilis-serit.bitti .acilis-kaydir{opacity:0;transition:opacity .4s ease}

.acilis-cubuk{flex:1;max-width:280px;height:2px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.acilis-cubuk span{display:block;height:100%;width:0;background:var(--mavi);transition:width .1s linear}

/* Yükleme göstergesi — kareler inerken tek satır, sessiz */
.acilis-yuk{
  position:absolute;right:var(--s5);bottom:calc(clamp(var(--s5),4vh,var(--s7)) + var(--s6));
  z-index:4;font-size:var(--f-xs);color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;transition:opacity .4s ease;
}
.acilis-yuk[hidden]{display:none}

/* ── Düz sürüm ──
   JS yok · hareket kapalı · yavaş bağlantı · veri tasarrufu.
   Aynı DOM, farklı düzen: katmanlar üst üste binmeyi bırakıp
   alt alta akar. Başlık tek kalır, hiçbir metin çoğaltılmaz. */
.acilis.duz,
:root:not(.js) .acilis{height:auto !important}

.acilis.duz .acilis-sabit,
:root:not(.js) .acilis .acilis-sabit{position:static;height:auto;overflow:visible;min-height:100svh}

.acilis.duz .acilis-tuval,
.acilis.duz .acilis-serit,
:root:not(.js) .acilis .acilis-tuval,
:root:not(.js) .acilis .acilis-serit{display:none}

.acilis.duz .acilis-icerik,
:root:not(.js) .acilis .acilis-icerik{position:relative;display:block;padding:var(--s9) 0}

.acilis.duz .acilis-kat,
:root:not(.js) .acilis .acilis-kat{
  opacity:1;transform:none;pointer-events:auto;
  margin-bottom:var(--s8);
}
/* Düz sürümde --i hiç yayınlanmaz; kartlar eşik hesabına
   takılıp görünmez kalmasın diye burada açılır. */
.acilis.duz .acilis-kart,
:root:not(.js) .acilis .acilis-kart{opacity:1;transform:none}
.acilis.duz .acilis-duzen,
:root:not(.js) .acilis .acilis-duzen{grid-template-columns:1fr;gap:var(--s6)}
.acilis.duz .acilis-kartlar,
:root:not(.js) .acilis .acilis-kartlar{width:100%;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.acilis.duz .acilis-kat:last-child,
:root:not(.js) .acilis .acilis-kat:last-child{margin-bottom:0}

@media (prefers-reduced-motion:reduce){
  .acilis{height:auto !important}
  .acilis .acilis-sabit{position:static;height:auto;overflow:visible;min-height:100svh}
  .acilis .acilis-tuval,.acilis .acilis-serit{display:none}
  .acilis .acilis-icerik{position:relative;display:block;padding:var(--s9) 0}
  .acilis .acilis-kat{opacity:1;transform:none;pointer-events:auto;margin-bottom:var(--s8)}
  .acilis .acilis-kat:last-child{margin-bottom:0}
  .acilis .acilis-kart{opacity:1;transform:none}
  .acilis .acilis-duzen{grid-template-columns:1fr;gap:var(--s6)}
  .acilis .acilis-kartlar{width:100%;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}

@media (max-width:900px){
  .acilis-kat-ic h1,.acilis-kat-ic h2{font-size:var(--f-3xl)}
  /* Kart sütunu kaldırılır: dar ekranda metnin yanında yer yok,
     alt alta koymak da sahneyi ikiye böler. */
  .acilis-duzen{grid-template-columns:1fr}
  .acilis-kartlar{display:none}
  .acilis-kat-ic{max-width:none;padding:var(--s6) var(--s5)}
}
@media (max-width:640px){
  .acilis-serit{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .acilis-cubuk{max-width:none;width:100%}
  .acilis-btn .btn-b,.acilis-btn .btn-i{width:100%;justify-content:center}
}

/* ═══════════════════════════════════════════════
   SAHNE KATMANI
   JS her bölüme --i (0→1) yazar; buradaki kurallar
   o tek sayıdan parallax, kayma ve derinlik türetir.
   Yalnızca transform/opacity — yerleşim hesabı yok.
   ═══════════════════════════════════════════════ */
/* --i tipli tanımlanır: tipsiz bırakılınca tarayıcı onu transform
   içinde salt metin sayar ve değer değişse de yeniden boyamaz.
   Kartların kaydırmaya bağlı süzülmesi buna bağlı. */
@property --i {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
[data-sahne]{--i:0}

/* ── Eleman girişi ── */
[data-gir]{
  opacity:0;transform:translateY(26px) scale(.985);
  transition:
    opacity .62s cubic-bezier(.22,1,.36,1) var(--gec,0ms),
    transform .62s cubic-bezier(.22,1,.36,1) var(--gec,0ms);
}
[data-gir].gorundu{opacity:1;transform:none}

/* ── Parallax ──
   --i .5'te nötr; uçlarda ±--p/2 kadar kayar.
   Kapsayıcıda overflow:hidden olmalı, yoksa kenar açılır. */
.kayan{transform:translate3d(0,calc((.5 - var(--i)) * var(--p,90px)),0);will-change:transform}
.kayan-yavas{--p:56px}
.kayan-hizli{--p:130px}

/* ── Cam yüzey ── */
.cam{
  background:var(--cam-zemin);
  backdrop-filter:var(--cam-bulanik);
  -webkit-backdrop-filter:var(--cam-bulanik);
  border:1px solid var(--cam-kenar);
  border-radius:var(--r-l);
}
.cam-acik{
  background:var(--cam-zemin-acik);
  border-color:var(--cam-kenar-acik);
  color:var(--metin);
}

/* ── Sabit sol + akan sağ ──
   Sol sütun ekranda kalır, sağdaki kartlar akar.
   900px altında desen dikeye döner: mobilde yapışık
   sütun ekranın yarısını yer, bu yüzden kapatılır. */
.yan{
  display:grid;grid-template-columns:minmax(280px,.82fr) 1.18fr;
  gap:var(--s8);align-items:start;
}
.yan-sol{position:sticky;top:calc(var(--nav-h) + var(--s5));align-self:start}
.yan-sol h2{font-size:var(--f-5xl);line-height:1.02;letter-spacing:-.03em;margin-bottom:var(--s5)}
.yan-sol > p{font-size:var(--f-lg);color:var(--metin-soft);max-width:42ch}
.yan-sag{display:grid;gap:var(--s5);min-width:0}

/* Sol sütundaki ilerleme çizgisi — bölümün ne kadarı geçildi */
.yan-cizgi{margin-top:var(--s6);height:2px;background:var(--cizgi);border-radius:2px;overflow:hidden}
/* --oran verilmişse (tedavi sayacı) onu, yoksa bölüm ilerlemesini
   kullanır. Böylece sayaç ile çubuk aynı gerçeği gösterir. */
.yan-cizgi::after{
  content:'';display:block;height:100%;border-radius:2px;background:var(--mavi);
  transform:scaleX(var(--oran,var(--i)));transform-origin:left;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}

@media (max-width:900px){
  .yan{grid-template-columns:1fr;gap:var(--s6)}
  .yan-sol{position:static}
  .yan-sol h2{font-size:var(--f-3xl)}
  .yan-cizgi{display:none}
}

/* Hareket kapalıysa sahne katmanı tümüyle susar. */
@media (prefers-reduced-motion:reduce){
  [data-gir]{opacity:1;transform:none;transition:none}
  .kayan{transform:none}
  .yan-sol{position:static}
}

/* ── İmleç ışığı ──
   Kart üzerinde imlecin bulunduğu noktada yumuşak bir mavi hâle.
   Konumu JS --mx/--my olarak yazar; efekt yalnızca hover'da açılır,
   dokunmatik cihazda hiç görünmez. */
.isik{position:relative;overflow:hidden}
.isik::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(26,95,208,.13),transparent 62%);
}
@media (hover:hover){
  .isik:hover::after{opacity:1}
}
.isik > *{position:relative}

/* ═══════════════════════════════════════════════════════════
   ETKİLEŞİM KANONU
   Sitedeki her kart aynı üç şeyi yapar: kenarı maviye döner,
   bir tık yükselir, gölgesi derinleşir. Bölüm başına farklı bir
   efekt uydurmak karmaşa yaratır — kullanıcı neyin tıklanabilir
   olduğunu bir kez öğrensin, her yerde geçerli olsun.

   Dokunmatik cihazda hover yok: `hover:hover` dışında kart
   parmağın altında takılı kalırdı.
   ═══════════════════════════════════════════════════════════ */
.evre-liste a,
.istat > div,
.panel-izgara li,
.rnd-bilgi li,
.alt-iletisim li,
.mega-grup a,
.icdk ol a{
  transition:border-color .22s ease,background-color .22s ease,color .2s ease,
             box-shadow .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
}

/* ── Duruştaki gölge ──
   Zemin artık hafif mavi bir kâğıt; beyaz kartlar bunun üstünde
   yüzmeli. Gölgesiz kart, tonu zeminle karışınca yassı duruyordu. */
.ted,.hek,.yazi,.surec li,.kat-kart,.ilet-kart,
.istat > div,.evre-liste a,.sss,.rnd-kart{
  box-shadow:0 1px 2px rgba(4,20,47,.04),0 6px 16px rgba(4,20,47,.05);
}

@media (hover:hover){
  .evre-liste a:hover,
  .istat > div:hover{
    border-color:var(--mavi);background:var(--beyaz);
    box-shadow:var(--g-m);transform:translateY(-4px);
  }
  /* Koyu panel üzerindeki kartlar: aynı hareket, ters yüzey */
  .panel-izgara li:hover{
    background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.42);
    transform:translateY(-3px);
  }
  .rnd-bilgi li:hover{transform:translateX(4px)}
  .rnd-bilgi li:hover .rikon{background:var(--mavi);color:#fff}
  .icdk ol a:hover{background:var(--mavi-sis)}
}

/* Klavye kullanıcısı da aynı geri bildirimi görür */
.evre-liste a:focus-visible,
.istat > div:focus-visible{border-color:var(--mavi);box-shadow:var(--g-m)}

/* Hareket kapalıysa renk değişir, kart yerinden oynamaz */
@media (prefers-reduced-motion:reduce){
  .evre-liste a:hover,.istat > div:hover,.panel-izgara li:hover,
  .rnd-bilgi li:hover,.ted:hover,.hek:hover,.surec li:hover,
  .kat-kart:hover,.ilet-kart:hover,.yazi:hover,
  .ic-diger-izgara a:hover{transform:none}
}

.rikon{transition:background .2s,color .2s}

/* ═══════════════════════════════════════════════════════════
   AÇIK / KAPALI ROZETİ
   Çalışma saati artık ölü künye değil, canlı bir durum.
   ═══════════════════════════════════════════════════════════ */
.durum-rozet{
  display:inline-flex;align-items:center;gap:7px;
  padding:3px 11px;border-radius:100px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  font-weight:700;color:#fff;
}
.durum-rozet i{width:7px;height:7px;border-radius:50%;background:#F0A868;flex:none}
.durum-rozet.acik i{background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.22)}

/* Mobil: üst şerit gizli, bu satır sabit çubuğun hemen üstünde durur */
.mobil-durum{display:none}
@media (max-width:900px){
  .mobil-durum{
    display:flex;align-items:center;justify-content:center;gap:8px;
    position:fixed;left:0;right:0;z-index:89;
    bottom:calc(64px + env(safe-area-inset-bottom, 0px));
    padding:7px var(--s5);
    background:var(--lacivert-derin);color:#fff;
    font-size:var(--f-xs);font-weight:600;text-align:center;
    border-top:1px solid rgba(255,255,255,.10);
  }
  .mobil-durum i{width:7px;height:7px;border-radius:50%;background:#F0A868;flex:none}
  .mobil-durum.acik i{background:#4ADE80}
  .mobil-durum strong{color:#A9C6F2;text-decoration:underline}
  /* Çubuk + durum satırı kadar yer aç */
  body{padding-bottom:calc(64px + 30px + env(safe-area-inset-bottom, 0px))}
  .dok{bottom:calc(64px + 30px + env(safe-area-inset-bottom, 0px) + 14px)}
  .asis{bottom:calc(64px + 30px + env(safe-area-inset-bottom, 0px) + 78px)}
}

/* ═══════════════════════════════════════════════════════════
   RANDEVU FORMU · sunucuya gönderim
   Talep artık diske yazılıyor; WhatsApp ikinci ve isteğe bağlı
   adım. Hata mesajları alanın kendi düğümünde duruyor.
   ═══════════════════════════════════════════════════════════ */
.rnd-gonder{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%}
.rnd-gonder svg{width:1.15em;height:1.15em}
.rnd-gonder[disabled]{opacity:.6;cursor:progress}

.alan-hata{
  margin-top:var(--s2);font-size:var(--f-xs);font-weight:600;
  color:#B3261E;display:flex;align-items:center;gap:6px;
}
.alan-hata::before{content:'!';display:grid;place-items:center;flex:none;
  width:15px;height:15px;border-radius:50%;background:#B3261E;color:#fff;font-size:10px;font-weight:800}
.alan-hata[hidden]{display:none}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#B3261E !important}

/* Bal küpü: ekranda yok, ekran okuyucuda da yok, botta var */
.bal-kupu{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* "ya da" ayracı — WhatsApp ikinci yol olduğunu söyler */
.rnd-ayrac{
  display:flex;align-items:center;gap:var(--s4);
  margin:var(--s5) 0 var(--s4);color:var(--metin-hafif);font-size:var(--f-xs);font-weight:600;
}
.rnd-ayrac::before,.rnd-ayrac::after{content:'';flex:1;height:1px;background:var(--cizgi)}
.rnd-wa{width:100%;justify-content:center}
.rnd-wa svg{fill:currentColor;stroke:none;width:17px;height:17px}

/* Gönderim sonrası: form yerini bu panele bırakır */
.rnd-tamam{
  background:var(--beyaz);border:1px solid var(--mavi);border-radius:var(--r-xl);
  padding:var(--s8) var(--s6);text-align:center;
  box-shadow:0 1px 2px rgba(4,20,47,.04),0 6px 16px rgba(4,20,47,.05);
}
.rnd-tamam[hidden]{display:none}
.rnd-tamam:focus{outline:none}
.rnd-tik{
  display:grid;place-items:center;width:56px;height:56px;margin:0 auto var(--s5);
  border-radius:50%;background:var(--mavi-sis);
  animation:tik-bel .45s cubic-bezier(.22,1,.36,1);
}
.rnd-tik svg{width:26px;height:26px;fill:none;stroke:var(--mavi-koyu);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes tik-bel{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.rnd-tamam h3{color:var(--lacivert-derin);margin-bottom:var(--s3)}
.rnd-tamam p{font-size:var(--f-sm);color:var(--metin-soft);margin-bottom:var(--s6);max-width:44ch;margin-inline:auto}
@media (prefers-reduced-motion:reduce){.rnd-tik{animation:none}}

/* İletişim sayfası: harita altındaki gerçek yol tarifi bağlantıları */
.harita-yol{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5);justify-content:center}
.harita-yol svg{width:17px;height:17px;stroke-width:1.9}

/* Tedavi kartı başlığı artık detay sayfasına bağlı */
.ted h3 a{color:inherit;transition:color .2s}
.ted:hover h3 a{color:var(--mavi-metin)}

/* ═══════════ BÖLÜM ORTAK ═══════════ */
.bolum{padding:var(--s9) 0}
.bolum-alt{background:var(--zemin)}
.bas{
  display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s7);
  align-items:end;margin-bottom:var(--s7);
}
.bas-tek{grid-template-columns:1fr;text-align:center;justify-items:center}
.etiket{
  display:inline-block;font-size:var(--f-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--mavi-metin);margin-bottom:var(--s3);
}
.etiket-acik{color:#7FD9DD}
.bas h2{color:var(--lacivert-derin)}
.bas-yan{font-size:var(--f-md);color:var(--metin-soft);line-height:1.72;max-width:52ch}

/* ═══════════════════════════════════════════════════════════
   YAPIŞKAN SOL SÜTUN · ilerleme
   Sağda dokuz kart akarken sol sütun ekranda duruyor. Boş
   durursa kaydırma uzun ve ödülsüz hissettiriyor; burada
   nerede olunduğunu söyleyen bir sayaç var.
   ═══════════════════════════════════════════════════════════ */
.yan-ilerleme{margin-top:var(--s7)}
.yan-sayi{
  display:flex;align-items:baseline;gap:var(--s2);
  font-family:var(--serif);color:var(--metin-hafif);
  font-variant-numeric:tabular-nums;margin-bottom:var(--s3);
}
.yan-sayi strong{font-size:2.6rem;font-weight:600;color:var(--mavi-metin);line-height:1}
.yan-sayi span{font-size:var(--f-lg)}
.yan-simdiki{
  margin-top:var(--s3);font-size:var(--f-sm);font-weight:700;
  color:var(--lacivert-derin);min-height:1.4em;
}
.yan-btn{margin-top:var(--s6)}
.yan-btn svg{transition:transform .2s}
.yan-btn:hover svg{transform:translateX(3px)}

/* Bölümün zemini: düz beyaz yerine hafif mavi bir alan ve
   sol tarafta -boşluğun olduğu yerde- soluk bir nokta dokusu.
   Doku hero'daki kemik kesitinin aynısı; sayfa kendi
   diline sadık kalıyor. */
/* DİKKAT: buraya `overflow:hidden` YAZMA.
   Yapışkan sol sütunu kırıyor — kartların yarısında serbest
   kalıp aşağı kayıyor, solda boşluk bırakıyordu. Zemin
   katmanları zaten taşmıyor, kırpmaya gerek yok. */
#tedaviler,#surec{
  position:relative;
  background:
    radial-gradient(ellipse 60% 55% at 14% 22%,rgba(26,95,208,.09),transparent 62%),
    radial-gradient(ellipse 50% 50% at 92% 82%,rgba(14,60,134,.07),transparent 60%),
    linear-gradient(180deg,var(--zemin-sicak),var(--mavi-buz) 45%,var(--zemin-sicak));
}
#tedaviler::before,#surec::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,rgba(26,95,208,.22) 1.15px,transparent 1.15px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 46% 44% at 16% 46%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 46% 44% at 16% 46%,#000,transparent 72%);
}
#tedaviler > .sarmal,#surec > .sarmal{position:relative;z-index:1}
@media (max-width:900px){
  /* Dar ekranda sol sütun yapışmıyor; doku da gereksiz */
  #tedaviler::before,#surec::before{display:none}
}

/* ═══════════ TEDAVİLER ═══════════ */
.ted-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s5)}
.ted{
  display:grid;grid-template-rows:auto auto 1fr auto;
  background:var(--beyaz);border:1px solid var(--cizgi);border-radius:var(--r-l);
  padding:var(--s6) var(--s5);min-height:290px;transition:transform .24s,box-shadow .24s,border-color .24s;
}
.bolum-alt .ted{background:var(--beyaz)}
.ted:hover{transform:translateY(-4px);box-shadow:var(--g-l);border-color:var(--mavi)}
.ted-ikon{
  width:52px;height:52px;border-radius:var(--r-m);
  background:var(--mavi-sis);color:var(--mavi-koyu);
  display:grid;place-items:center;margin-bottom:var(--s4);transition:.24s;
}
.ted:hover .ted-ikon{background:var(--mavi);color:#fff}
/* İkonlar artık daha ayrıntılı (vida yivi, braket, ışıltı);
   26px'te detay kayboluyordu. Kontur da inceldi. */
.ted-ikon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ted h3{color:var(--lacivert-derin);margin-bottom:var(--s2)}
.ted p{font-size:var(--f-sm);color:var(--metin-soft);line-height:1.65}
.ted-alt{
  display:flex;gap:var(--s4);align-items:center;
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--cizgi);
  font-size:var(--f-xs);color:var(--metin-hafif);font-weight:600;
}
.ted-alt span{display:flex;align-items:center;gap:var(--s1)}
.ted-alt svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}

/* ═══════════ ŞİKÂYET BULUCU ═══════════ */
.bulucu{
  display:grid;grid-template-columns:.85fr 1.15fr;
  background:var(--lacivert-derin);border-radius:var(--r-xl);overflow:hidden;
}
.bulucu-gorsel{position:relative;min-height:100%}
.bulucu-gorsel img{width:100%;height:100%;object-fit:cover;min-height:340px}
.bulucu-gorsel::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(4,25,60,.9));
}
.bulucu-ic{padding:var(--s8) var(--s7);color:#fff}
.bulucu-ic h2{color:#fff;margin-bottom:var(--s3)}
.bulucu-ic h2 em{color:#8FB8F5}
.bulucu-ic > p{color:#B7C8E2;font-size:var(--f-md);line-height:1.7;margin-bottom:var(--s6);max-width:48ch}
.sik-izgara{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.sik{
  display:flex;align-items:center;gap:var(--s3);width:100%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-m);padding:var(--s4);
  font-size:var(--f-sm);font-weight:600;color:#fff;text-align:left;transition:.18s;
}
.sik:hover{background:var(--mavi);border-color:var(--mavi);transform:translateX(3px)}
.sik svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.sik i{margin-left:auto;font-style:normal;opacity:.5}

/* ═══════════ ÜÇ KONUDA NETTİZ ═══════════ */
.net-izgara{display:grid;grid-template-columns:.95fr 1.05fr;gap:var(--s8);align-items:center}
.net-gorsel{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--g-l)}
.net-gorsel img{width:100%;aspect-ratio:4/3;object-fit:cover}
.net-rozet{
  position:absolute;left:var(--s5);bottom:var(--s5);
  display:flex;align-items:center;gap:var(--s3);
  background:var(--cam-zemin-acik);
  backdrop-filter:var(--cam-bulanik);-webkit-backdrop-filter:var(--cam-bulanik);
  border:1px solid var(--cam-kenar-acik);
  border-radius:var(--r-m);padding:var(--s4);box-shadow:var(--g-m);
}
.net-rozet svg{width:26px;height:26px;flex-shrink:0;fill:none;stroke:var(--mavi-koyu);stroke-width:2}
.net-rozet strong{display:block;font-size:var(--f-sm);color:var(--lacivert-derin)}
.net-rozet span{font-size:var(--f-xs);color:var(--metin-hafif)}
.net-liste{display:grid;gap:var(--s5);margin-top:var(--s5)}
.net-liste li{padding-left:var(--s5);border-left:2px solid var(--mavi)}
.net-liste h3{color:var(--lacivert-derin);margin-bottom:var(--s2)}
.net-liste p{font-size:var(--f-sm);color:var(--metin-soft);line-height:1.7}

/* ═══════════ KOYU PANEL (hazırlık bölümü) ═══════════ */
.panel{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center;
  background:linear-gradient(125deg,var(--lacivert-derin),var(--lacivert) 75%);
  border-radius:var(--r-xl);padding:var(--s8) var(--s7);color:#fff;
  position:relative;overflow:hidden;
}
.panel::before{
  content:'';position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,95,208,.24),transparent 68%);
}
.panel-ic{position:relative}
.panel h2{color:#fff;margin-bottom:var(--s4)}
.panel h2 em{color:#7FD9DD}
.panel p{color:#B7C8E2;font-size:var(--f-sm);line-height:1.72}
.panel-izgara{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);position:relative}
.panel-izgara li{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-m);padding:var(--s4);
}
.panel-izgara li.cam{backdrop-filter:var(--cam-bulanik);-webkit-backdrop-filter:var(--cam-bulanik)}
.panel-izgara strong{display:block;font-size:var(--f-sm);font-weight:700;margin-bottom:var(--s1)}
.panel-izgara span{font-size:var(--f-xs);color:#A9BDD8;line-height:1.5}

/* ═══════════ SÜREÇ ═══════════ */
.surec{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);counter-reset:adim}
.surec li{
  background:var(--beyaz);border:1px solid var(--cizgi);border-radius:var(--r-l);
  padding:var(--s6) var(--s5);position:relative;counter-increment:adim;transition:.24s;
}
.surec li::before{
  content:counter(adim,decimal-leading-zero);
  display:block;font-family:var(--serif);font-size:2.6rem;font-weight:600;
  color:var(--mavi-sis);line-height:1;margin-bottom:var(--s3);transition:color .24s;
}
.surec li:hover{transform:translateY(-4px);box-shadow:var(--g-m);border-color:var(--mavi)}
.surec li:hover::before{color:var(--mavi)}
.surec h3{color:var(--lacivert-derin);margin-bottom:var(--s2)}
.surec p{font-size:var(--f-sm);color:var(--metin-soft);line-height:1.65}

/* ── Kaydırmaya duyarlı adımlar ──
   Adımlar gerçek bir sıra taşıdığı için sayfa indikçe sırayla
   canlanırlar; fareyi beklemezler. Her <li> kendi eşiğini
   --bas ile taşır, --etkin o eşiğin etrafında 0'dan 1'e keskin
   biçimde geçer. Hover bunu ezmez, üstüne biner. */
@property --etkin{syntax:'<number>';inherits:false;initial-value:0}

.surec li{--etkin:clamp(0,(var(--i,0) - var(--bas,2)) * 16,1)}
.surec li::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1.5px solid var(--mavi);
  background:linear-gradient(104deg,var(--mavi-sis),transparent 62%);
  opacity:var(--etkin);transition:opacity .3s ease;
}
.surec li::before{
  color:color-mix(in srgb,var(--mavi-sis),var(--mavi) calc(var(--etkin) * 100%));
}
/* Metin sahte kenarın altında kalmasın */
.surec li h3,.surec li p{position:relative;z-index:1}

/* ── Sahne düzeninde süreç: dört sütun yerine dikey hat ──
   Sıra numarası sola çıkar, adımlar alt alta okunur. */
.yan-sag.surec{grid-template-columns:1fr;gap:var(--s4)}
.yan-sag.surec li{
  display:grid;grid-template-columns:auto 1fr;column-gap:var(--s5);
  align-items:start;padding:var(--s5) var(--s6);
}
/* Numara iki satır boyunca solda kalır; başlık ve metin sağ kolonda
   alt alta akar. Aksi hâlde paragraf ilk kolonu genişletip
   başlığı sağa itiyor. */
.yan-sag.surec li::before{grid-row:1 / span 2;margin-bottom:0;font-size:2.2rem}
.yan-sag.surec li h3,
.yan-sag.surec li p{grid-column:2}
.yan-sag.surec li:hover{transform:translateX(4px)}

/* Sahne düzeninde tedavi kartları: sağ sütun dar olduğu için iki kolon */
.yan-sag.ted-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){
  .yan-sag.ted-izgara{grid-template-columns:1fr}
  .yan-sag.surec li{grid-template-columns:1fr;gap:var(--s2)}
}

/* Parallax payı: görsel kabından biraz taşar ki kayarken kenar açılmasın */
.bulucu-gorsel{overflow:hidden}
.bulucu-gorsel img{height:calc(100% + 80px);min-height:420px}

/* ═══════════ HEKİMLER ═══════════ */
/* Kartlar geniş değil: iki hekim varken tam genişliğe yayılan
   kart, kadro küçük olduğunu vurguluyordu. Sabit ölçü daha iyi. */
.hek-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,320px));gap:var(--s6);justify-content:center}
.hek{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--beyaz);border:1px solid var(--cizgi);border-radius:var(--r-l);
  transition:.24s;
}
.hek:hover{transform:translateY(-4px);box-shadow:var(--g-l);border-color:var(--mavi)}
.hek-foto{position:relative;background:var(--mavi-sis);aspect-ratio:4/5;overflow:hidden}
.hek-foto img{
  width:100%;height:100%;object-fit:cover;object-position:50% 12%;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.hek:hover .hek-foto img{transform:scale(1.04)}
/* Fotoğrafın altına doğru hafif mavi bir perde: portrelerin
   arka planı krem, kartın altı beyaz — geçiş sert kalıyordu. */
.hek-foto::after{
  content:'';position:absolute;inset:auto 0 0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(4,20,47,.16));
}
.hek-bas{
  width:100%;height:100%;display:grid;place-items:center;
  font-family:var(--serif);font-size:3rem;font-weight:600;color:#fff;
  background:linear-gradient(145deg,var(--lacivert),var(--mavi));
}
.hek-alt{padding:var(--s5)}
.hek h3{color:var(--lacivert-derin);margin-bottom:2px;font-size:var(--f-lg)}
.hek-unvan{font-size:var(--f-xs);color:var(--mavi-metin);font-weight:700;margin-bottom:var(--s4)}
.hek-etiketler{display:flex;flex-wrap:wrap;gap:var(--s1)}
.hetiket{font-size:var(--f-xs);background:var(--zemin);color:var(--lacivert);padding:var(--s1) var(--s3);border-radius:100px;font-weight:600;transition:background .2s,color .2s}
.hek:hover .hetiket{background:var(--mavi-sis);color:var(--mavi-metin)}
.hek-not{
  margin-top:var(--s6);font-size:var(--f-sm);color:var(--metin-hafif);
  text-align:center;
}

/* ═══════════ BLOG ═══════════ */
.blog-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s5);align-items:stretch}
.yazi{
  display:grid;grid-template-rows:auto 1fr;
  background:var(--beyaz);border:1px solid var(--cizgi);border-radius:var(--r-l);
  overflow:hidden;transition:.24s;
}
.yazi:hover{transform:translateY(-4px);box-shadow:var(--g-l);border-color:var(--mavi)}
.yazi-gorsel-bag{display:block;aspect-ratio:3/2;background:var(--mavi-sis);overflow:hidden}
.yazi-gorsel{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.yazi:hover .yazi-gorsel{transform:scale(1.04)}
.yazi-gorsel-bos{aspect-ratio:3/2;background:linear-gradient(140deg,var(--mavi-sis),var(--zemin))}
.yazi-govde{display:grid;grid-template-rows:auto 1fr auto;padding:var(--s5);gap:var(--s3)}
.yazi-kat{font-size:var(--f-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mavi-metin)}
.yazi h3{
  font-size:var(--f-lg);line-height:1.38;color:var(--lacivert-derin);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.yazi-meta{
  display:flex;gap:var(--s4);font-size:var(--f-xs);color:var(--metin-hafif);
  padding-top:var(--s3);border-top:1px solid var(--cizgi);
}

/* ═══════════ SSS ═══════════ */
.sss-liste{display:grid;gap:var(--s2)}
.sss{background:var(--beyaz);border:1px solid var(--cizgi);border-radius:var(--r-m);overflow:hidden;transition:border-color .2s}
.sss[open]{border-color:var(--mavi)}
.sss summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s5);cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:var(--f-lg);font-weight:600;color:var(--lacivert-derin);
}
.sss summary::-webkit-details-marker{display:none}
.sss summary:hover{background:var(--zemin)}
.sss-art{
  width:28px;height:28px;flex-shrink:0;border-radius:50%;
  background:var(--zemin);color:var(--lacivert);display:grid;place-items:center;transition:.24s;
}
.sss[open] .sss-art{background:var(--mavi);color:#fff;transform:rotate(45deg)}
.sss-art svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6}
.sss-govde{padding:0 var(--s5) var(--s5);font-size:var(--f-md);color:var(--metin-soft);line-height:1.75;max-width:64ch}

/* ═══════════ RANDEVU ═══════════ */
.rnd-izgara{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s8);align-items:start}
.rnd-izgara h2{color:var(--lacivert-derin)}
.rnd-giris{font-size:var(--f-md);color:var(--metin-soft);line-height:1.72;margin-top:var(--s3)}
.rnd-bilgi{display:grid;gap:var(--s4);margin-top:var(--s6)}
.rnd-bilgi li{display:flex;gap:var(--s4);align-items:flex-start}
.rikon{
  width:46px;height:46px;flex-shrink:0;border-radius:var(--r-m);
  background:var(--beyaz);border:1px solid var(--cizgi);color:var(--lacivert);
  display:grid;place-items:center;box-shadow:var(--g-s);
}
.rikon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9}
.rnd-bilgi strong{display:block;font-size:var(--f-md);color:var(--lacivert-derin);font-weight:700}
.rnd-bilgi strong a:hover{color:var(--mavi-metin)}
.rnd-bilgi span span,.rnd-bilgi li > span:last-child{font-size:var(--f-sm);color:var(--metin-soft);line-height:1.55}

.rnd-kart{
  background:var(--beyaz);border:1px solid var(--cizgi);border-radius:var(--r-xl);
  padding:var(--s7) var(--s6);box-shadow:var(--g-l);
}
.rnd-kart h3{font-size:var(--f-2xl);color:var(--lacivert-derin);margin-bottom:var(--s2)}
.rnd-alt{font-size:var(--f-sm);color:var(--metin-hafif);margin-bottom:var(--s5)}
.alan-grup{display:grid;gap:var(--s2);margin-bottom:var(--s4)}
.alan-grup label{font-size:var(--f-sm);font-weight:600;color:var(--metin)}
.alan-grup input,.alan-grup select,.alan-grup textarea{
  width:100%;padding:var(--s4);border:1.5px solid var(--cizgi-kontrol);
  border-radius:var(--r-m);background:var(--beyaz);transition:border-color .16s;
}
.alan-grup input:focus,.alan-grup select:focus,.alan-grup textarea:focus{
  outline:3px solid var(--mavi-metin);outline-offset:1px;border-color:var(--lacivert);
}
.alan-grup input[aria-invalid="true"]{border-color:#D42A2A}
.onay{display:flex;gap:var(--s3);align-items:flex-start;margin:var(--s5) 0;font-size:var(--f-xs);color:var(--metin-soft);line-height:1.6}
.onay input{width:20px;height:20px;flex-shrink:0;margin-top:2px;accent-color:var(--mavi-koyu)}
.onay a{color:var(--mavi-metin);text-decoration:underline}
.onay strong{color:var(--metin);font-weight:700}
/* İki açık rıza yan yana durunca aradaki boşluk iki katına çıkıyordu. */
.onay + .alan-hata + .onay{margin-top:calc(var(--s5) * -1 + var(--s3))}
/* Rıza vermek istemeyene gerçek bir çıkış yolu: rızanın "özgür irade"
   olabilmesi için formun tek kanal olmadığını görmesi gerekiyor. */
.onay-kacis{
  margin:calc(var(--s5) * -1 + var(--s2)) 0 var(--s5);
  padding:var(--s3) var(--s4);border-radius:var(--r-m);
  background:var(--mavi-buz);border:1px dashed var(--cizgi);
  font-size:var(--f-xs);color:var(--metin-hafif);line-height:1.6;
}
.onay-kacis a{color:var(--mavi-metin);font-weight:700;white-space:nowrap}
.rnd-gonder{
  width:100%;background:var(--mavi-koyu);color:#fff;
  padding:var(--s4);border-radius:100px;font-weight:700;font-size:var(--f-md);
  box-shadow:0 10px 26px rgba(18,67,154,.28);transition:.18s;
}
.rnd-gonder:hover{background:#0E3878;transform:translateY(-2px)}
.rnd-not{font-size:var(--f-xs);color:var(--metin-hafif);text-align:center;margin-top:var(--s4);line-height:1.55}
.rnd-not.hata{color:#B91C1C;font-weight:600}
.rnd-not.basari{color:#0A7377;font-weight:600}

/* ═══════════ FOOTER ═══════════ */
.alt{background:var(--lacivert-derin);color:#8FA3BF;padding:var(--s9) 0 var(--s6);font-size:var(--f-sm)}
.alt-izgara{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--s7);margin-bottom:var(--s7)}
.alt h4{color:#fff;font-family:var(--serif);font-size:var(--f-md);font-weight:600;margin-bottom:var(--s4)}
.alt ul{display:grid;gap:var(--s3)}
.alt a:hover{color:var(--mavi)}
.alt-logo{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.alt-logo .logo-ikon{height:46px}
.alt-logo strong{color:#fff;font-family:var(--serif);font-size:var(--f-lg);font-weight:700}
.alt-ack{line-height:1.75;max-width:42ch}
.alt-iletisim li{line-height:1.6}
.uyari{
  background:rgba(255,255,255,.04);border-left:3px solid var(--mavi);
  padding:var(--s4) var(--s5);border-radius:0 var(--r-s) var(--r-s) 0;
  font-size:var(--f-xs);line-height:1.7;margin-bottom:var(--s6);color:#93A8C4;max-width:88ch;
}
.alt-son{
  border-top:1px solid rgba(255,255,255,.1);padding-top:var(--s5);
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:var(--f-xs);
}

/* ═══════════ MOBİL ALT ÇUBUK ═══════════ */
.mobil-bar{display:none}
@media (max-width:900px){
  .mobil-bar{
    display:grid;grid-template-columns:repeat(3,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:var(--beyaz);border-top:1px solid var(--cizgi);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -4px 20px rgba(4,25,60,.1);
  }
  .mobil-bar a{
    min-height:58px;display:grid;place-items:center;gap:2px;
    font-size:var(--f-xs);font-weight:700;color:var(--metin-soft);
  }
  .mobil-bar svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9}
  .mobil-bar .bar-cta{color:var(--mavi-koyu)}
  body{padding-bottom:64px}
}

/* ═══════════════════════════════════════════════════════════
   MEGA MENÜ
   Dokuz tedavi düz bir listede aranmaz. Menü, hastanın kafasındaki
   soruyla (ne oldu?) kliniğin diliyle (hangi branş?) arasındaki
   çeviriyi yapar: solda dert, sağda tedavi.
   ═══════════════════════════════════════════════════════════ */
.menu-mega{position:static}
.menu-ac{
  display:flex;align-items:center;gap:6px;
  padding:var(--s3) var(--s4);border-radius:var(--r-s);
  font-size:var(--f-sm);font-weight:600;transition:color .15s,background .15s;
}
.menu-ac svg{width:13px;height:13px;stroke-width:2.6;transition:transform .22s}
.menu-ac[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu-ac:hover,.menu-ac[aria-expanded="true"]{color:var(--lacivert);background:var(--zemin)}

.mega{
  position:absolute;left:0;right:0;top:100%;z-index:99;
  background:var(--beyaz);border-top:1px solid var(--cizgi);
  box-shadow:0 26px 52px rgba(4,20,47,.15);
  animation:mega-ac .2s cubic-bezier(.22,1,.36,1);
}
.mega[hidden]{display:none}
@keyframes mega-ac{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mega-ic{
  display:grid;grid-template-columns:280px 1fr;gap:var(--s7);
  max-width:var(--kenar);margin:0 auto;padding:var(--s7) var(--s5);
}
/* Sol tanıtım kutusu ayrı bir yüzey: menü tek düz beyaz alanken
   her şey aynı ağırlıkta duruyor, göze soluk geliyordu. */
.mega-sol{
  background:var(--mavi-buz);border:1px solid var(--cizgi);
  border-radius:var(--r-l);padding:var(--s6);
}
.mega-sol h3{font-size:var(--f-xl);color:var(--lacivert-derin);margin-bottom:var(--s3)}
.mega-sol p{font-size:var(--f-sm);color:var(--metin-soft);line-height:1.6;margin-bottom:var(--s5)}
.mega-tum{
  display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap;
  font-size:var(--f-sm);font-weight:700;color:var(--mavi-metin);
}
.mega-tum svg{width:15px;height:15px;stroke-width:2.2;transition:transform .2s}
.mega-tum:hover svg{transform:translateX(3px)}

.mega-sag{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
/* Kategori başlığı gri değil lacivert: menünün iskeleti görünsün */
.mega-grup h4{
  font-family:var(--sans);font-size:var(--f-xs);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--lacivert);
  padding-bottom:var(--s3);margin-bottom:var(--s3);border-bottom:2px solid var(--mavi-sis);
}
.mega-grup a{
  display:flex;align-items:center;gap:var(--s2);
  padding:8px var(--s3);margin-left:calc(-1 * var(--s3));
  border-radius:var(--r-s);font-size:var(--f-sm);font-weight:600;
  color:var(--metin);transition:color .15s,background .15s,padding-left .15s;
}
.mega-grup a::before{
  content:'';width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--cizgi-kontrol);transition:background .15s,transform .15s;
}
.mega-grup a:hover{color:var(--mavi-metin);background:var(--mavi-sis)}
.mega-grup a:hover::before{background:var(--mavi);transform:scale(1.5)}

/* ═══════════════════════════════════════════════════════════
   TEDAVİLER SAYFASI · kategori blokları
   ═══════════════════════════════════════════════════════════ */
.kat{scroll-margin-top:calc(var(--nav-h) + var(--s6))}
.kat + .kat{margin-top:var(--s9)}
.kat-bas{display:flex;align-items:baseline;gap:var(--s4);margin-bottom:var(--s6);flex-wrap:wrap}
.kat-bas h2{font-size:var(--f-2xl);color:var(--lacivert-derin)}
.kat-bas p{font-size:var(--f-md);color:var(--metin-hafif);max-width:52ch}
/* Sabit üç sütun: `auto-fill` kullanınca tek kartlı kategorilerde
   kart tüm satıra yayılıp yarım kalmış gibi duruyordu. Sabit ızgarada
   tek kart üçte bir yer kaplar — bilinçli bir boşluk olarak okunur. */
.kat-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.kat-ilgili{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s4);
  margin-top:var(--s5);font-size:var(--f-sm);
}
.kat-ilgili > span{color:var(--metin-hafif);font-weight:600}
.kat-ilgili a{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px var(--s4);border:1px solid var(--cizgi);border-radius:100px;
  background:var(--beyaz);font-weight:700;color:var(--mavi-metin);
  transition:border-color .18s,background .18s;
}
.kat-ilgili a:hover{border-color:var(--mavi);background:var(--mavi-sis)}
.kat-ilgili svg{width:14px;height:14px;stroke-width:2.2}
@media (max-width:1000px){.kat-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.kat-izgara{grid-template-columns:1fr}}
.kat-kart{
  display:flex;flex-direction:column;gap:var(--s3);
  background:var(--beyaz);border:1px solid var(--cizgi);border-radius:var(--r-l);
  padding:var(--s6);height:100%;transition:border-color .2s,box-shadow .25s,transform .25s;
}
.kat-kart:hover{border-color:var(--mavi);box-shadow:var(--g-m);transform:translateY(-3px)}
.kat-kart h3{color:var(--lacivert-derin)}
.kat-kart p{font-size:var(--f-sm);color:var(--metin-soft);line-height:1.6;flex:1}
.kat-kart .evre-ok{opacity:1;transform:none;margin-top:0}

/* ═══════════════════════════════════════════════════════════
   İÇİNDEKİLER · tedavi detay sayfalarında sol yapışkan sütun
   Uzun bir metin, okuyanın nerede olduğunu bilmediği bir metindir.
   ═══════════════════════════════════════════════════════════ */
.icdk{position:sticky;top:calc(var(--nav-h) + var(--s5));align-self:start}
.icdk > strong{
  display:block;font-family:var(--sans);font-size:var(--f-xs);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--metin-hafif);margin-bottom:var(--s3);
}
.icdk ol{border-left:2px solid var(--cizgi)}
/* Yalnızca listedeki bağlantılar — `.icdk a` yazıldığında kutunun
   altındaki birincil düğmeyi de eziyordu (0,1,1 > 0,1,0). */
.icdk ol a{
  display:block;padding:7px var(--s4);margin-left:-2px;
  border-left:2px solid transparent;
  font-size:var(--f-sm);line-height:1.45;color:var(--metin-soft);
  transition:color .18s,border-color .18s;
}
.icdk ol a:hover{color:var(--mavi-metin)}
.icdk ol a.etkin{color:var(--mavi-metin);font-weight:700;border-left-color:var(--mavi)}
.icdk-cta{
  margin-top:var(--s5);padding:var(--s5);border-radius:var(--r-m);
  background:var(--mavi-sis);border:1px solid var(--cizgi);
}
.icdk-cta strong{display:block;font-family:var(--serif);font-size:var(--f-lg);color:var(--lacivert-derin);margin-bottom:var(--s2)}
.icdk-cta p{font-size:var(--f-sm);color:var(--metin-soft);margin-bottom:var(--s4)}

/* Bu tedaviyi yürüten hekim — "aynı hekim baştan sona" vaadinin
   tedavi sayfasındaki karşılığı. Kadro iki kişi olduğu için bu
   doğrulanabilir bir vaat; sayfa onu doğrulanamaz bırakıyordu. */
.ted-hekim-kutu{
  margin-top:var(--s6);padding:var(--s5);
  background:var(--beyaz);border:1px solid var(--cizgi);border-radius:var(--r-m);
}
.ted-hekim-bas{
  font-size:var(--f-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--metin-hafif);margin-bottom:var(--s4);
}
.ted-hekim-liste{display:grid;gap:var(--s4)}
.ted-hekim{display:flex;align-items:center;gap:var(--s3)}
.ted-hekim img{
  width:48px;height:60px;border-radius:var(--r-s);object-fit:cover;
  object-position:50% 12%;flex:none;background:var(--mavi-sis);
}
.ted-hekim strong{display:block;font-size:var(--f-sm);font-weight:700;color:var(--lacivert-derin);line-height:1.3}
.ted-hekim span span{display:block;font-size:var(--f-xs);color:var(--mavi-metin);font-weight:600}
.ted-hekim-not{
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--cizgi);
  font-size:var(--f-xs);color:var(--metin-hafif);
}
@media (max-width:900px){
  .ted-hekim-kutu{order:2}
  /* Dar ekranda yan yana: iki hekim varsa dikey yığın çok yer yiyor */
  .ted-hekim-liste{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}

/* ═══════════════════════════════════════════════════════════
   İÇ SAYFA · tedavi detayı
   Uzun metnin işi okunmaktır. Ölçü 66 karakter, satır aralığı
   geniş, başlıklar arasında gerçek nefes payı var.
   ═══════════════════════════════════════════════════════════ */
.ekmek{background:var(--mavi-buz);border-bottom:1px solid var(--cizgi);padding:var(--s3) 0}
.ekmek ol{display:flex;flex-wrap:wrap;gap:var(--s2);font-size:var(--f-xs);color:var(--metin-hafif)}
.ekmek a{color:var(--mavi-metin);font-weight:600}
.ekmek a:hover{text-decoration:underline}
.ekmek li + li::before{content:'›';margin-right:var(--s2);color:var(--cizgi-kontrol)}
.ekmek [aria-current]{font-weight:600;color:var(--metin-soft)}

.ic-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,var(--mavi-sis) 0%,var(--mavi-buz) 55%,var(--zemin-sicak) 100%);
  padding:clamp(var(--s7),5vw,var(--s9)) 0;
}
.ic-hero::before{
  content:'';position:absolute;top:-26%;right:-8%;width:46vw;height:46vw;max-width:620px;max-height:620px;
  border-radius:50%;background:radial-gradient(circle,rgba(26,95,208,.14),transparent 68%);pointer-events:none;
}
.ic-hero-ic{position:relative;max-width:780px}
/* Görselli başlık alanı: metin solda, fotoğraf sağda */
.ic-hero-duzen{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s8);align-items:center}
.ic-hero-foto{
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 22px 54px rgba(4,20,47,.18);background:var(--mavi-sis);
}
.ic-hero-foto img{width:100%;aspect-ratio:4/3.1;object-fit:cover;display:block}
@media (max-width:900px){
  .ic-hero-duzen{grid-template-columns:1fr;gap:var(--s6)}
  .ic-hero-foto{order:-1}
  .ic-hero-foto img{aspect-ratio:16/9}
}
.ic-hero h1{color:var(--lacivert-derin);font-size:var(--f-3xl);margin-bottom:var(--s5)}
.ic-ozet{font-size:var(--f-lg);line-height:1.7;color:var(--metin-soft)}
.ic-etiket{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.ic-etiket span,.ic-etiket a{
  display:inline-flex;align-items:center;gap:var(--s2);
  background:rgba(255,255,255,.86);border:1px solid var(--cizgi);
  padding:var(--s2) var(--s4);border-radius:100px;
  font-size:var(--f-xs);font-weight:700;color:var(--metin-soft);
}
.ic-etiket a{color:var(--mavi-metin);transition:border-color .18s,background .18s}
.ic-etiket a:hover{border-color:var(--mavi);background:#fff}
.ic-etiket svg{width:15px;height:15px;stroke:var(--mavi-metin);stroke-width:2}
.ic-hero .giris-btn{margin-top:var(--s6)}

.ic-duzen{display:grid;grid-template-columns:264px minmax(0,1fr);gap:clamp(var(--s6),4vw,var(--s9));align-items:start}
.ic-govde{max-width:68ch}
.ic-govde h2{
  font-size:var(--f-2xl);color:var(--lacivert-derin);
  margin-top:var(--s8);margin-bottom:var(--s4);
  scroll-margin-top:calc(var(--nav-h) + var(--s5));
}
.ic-govde h2:first-child{margin-top:0}
.ic-govde p{font-size:var(--f-md);line-height:1.8;color:var(--metin-soft)}
.ic-govde p + p{margin-top:var(--s4)}
.ic-liste{margin-top:var(--s5);display:grid;gap:var(--s3)}
.ic-liste li{
  position:relative;padding-left:var(--s6);
  font-size:var(--f-md);line-height:1.7;color:var(--metin-soft);
}
.ic-liste li::before{
  content:'';position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--mavi-sis);border:2px solid var(--mavi);
}

/* Hatırlatmalar — metnin içinde değil, yanında duran bir not */
.ic-ipucu{
  margin-top:var(--s8);padding:var(--s6);
  background:var(--mavi-buz);border:1px solid var(--cizgi);
  border-left:3px solid var(--mavi);border-radius:var(--r-m);
}
.ic-ipucu h2{font-size:var(--f-xl);margin-top:0;margin-bottom:var(--s4)}
.ic-ipucu ul{display:grid;gap:var(--s3)}
.ic-ipucu li{position:relative;padding-left:var(--s6);font-size:var(--f-sm);line-height:1.65;color:var(--metin-soft)}
.ic-ipucu li::before{
  content:'';position:absolute;left:2px;top:.5em;width:12px;height:7px;
  border-left:2px solid var(--mavi);border-bottom:2px solid var(--mavi);
  transform:rotate(-45deg);
}

.ic-sss{margin-top:var(--s8)}
.ic-sss > h2{margin-top:0}

/* Klinik künyesi — hakkımızda sayfasının yan sütunu */
.ic-bilgi{display:grid;gap:var(--s2);margin-bottom:var(--s5)}
.ic-bilgi > div{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s2) 0;border-bottom:1px solid var(--cizgi)}
.ic-bilgi dt{font-size:var(--f-sm);color:var(--metin-hafif)}
.ic-bilgi dd{font-size:var(--f-sm);font-weight:700;color:var(--lacivert-derin);font-variant-numeric:tabular-nums}

/* İletişim kartları + harita */
.ilet-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s5)}
.ilet-kart{
  background:var(--beyaz);border:1px solid var(--cizgi);border-radius:var(--r-l);
  padding:var(--s6);transition:border-color .2s,box-shadow .25s,transform .25s;
}
.ilet-kart:hover{border-color:var(--mavi);box-shadow:var(--g-m);transform:translateY(-3px)}
.ilet-ikon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--mavi-sis);margin-bottom:var(--s4)}
.ilet-ikon svg{width:22px;height:22px;stroke:var(--mavi-metin);stroke-width:1.9}
.ilet-kart h3{font-size:var(--f-lg);color:var(--lacivert-derin);margin-bottom:var(--s2)}
.ilet-kart p{font-size:var(--f-sm);line-height:1.7;color:var(--metin-soft)}
.ilet-kart a{color:var(--mavi-metin);font-weight:700}
.ilet-kart a:hover{text-decoration:underline}
.harita{margin-top:var(--s7);border-radius:var(--r-l);overflow:hidden;border:1px solid var(--cizgi);box-shadow:var(--g-m)}
.harita iframe{display:block;width:100%;height:clamp(300px,42vh,460px);border:0}

/* Harita kapağı: iframe basılana kadar DOM'a girmiyor, o yüzden
   kapağın kendisi iframe ile aynı yüksekliği tutmak zorunda —
   yoksa tıklama anında sayfa zıplıyor. */
.harita-kapak{
  display:grid;place-items:center;height:clamp(300px,42vh,460px);
  padding:var(--s6);text-align:center;
  background:
    radial-gradient(circle at 30% 20%,rgba(91,155,245,.16),transparent 55%),
    linear-gradient(150deg,var(--mavi-sis),var(--zemin));
}
.harita-ic{max-width:34rem;display:grid;gap:var(--s3);justify-items:center}
.harita-kapak svg{
  width:34px;height:34px;fill:none;stroke:var(--mavi);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.harita-kapak strong{
  font-family:var(--serif);font-size:var(--f-lg);color:var(--lacivert-derin);line-height:1.35;
}
.harita-kapak p{font-size:var(--f-sm);color:var(--metin-hafif);line-height:1.65}
.harita-kapak button{margin-top:var(--s2)}

/* Diğer tedaviler */
.ic-diger{background:var(--zemin);border-top:1px solid var(--cizgi)}
.ic-diger-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s4)}
.ic-diger-izgara a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  background:var(--beyaz);border:1px solid var(--cizgi);border-radius:var(--r-m);
  padding:var(--s4) var(--s5);font-size:var(--f-sm);font-weight:700;color:var(--lacivert-derin);
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.ic-diger-izgara a:hover{border-color:var(--mavi);transform:translateY(-2px);box-shadow:var(--g-m)}
.ic-diger-izgara svg{width:15px;height:15px;stroke:var(--mavi-metin);stroke-width:2.2;flex:none}

@media (max-width:900px){
  .ic-duzen{grid-template-columns:1fr;gap:var(--s6)}
  .ic-govde{max-width:none}
}

/* ═══════════════════════════════════════════════════════════
   YÜZEN İSKELE · WhatsApp + asistan
   WhatsApp düğmesi kendi marka yeşilinde kalır: o bir renk seçimi
   değil, tanınan bir işaret. Sitenin geri kalanı tek mavi ailesidir.
   ═══════════════════════════════════════════════════════════ */
.dok{
  position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:120;
  display:flex;flex-direction:column;gap:var(--s3);align-items:flex-end;
}
.dok-btn{
  position:relative;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  box-shadow:0 12px 30px rgba(4,20,47,.30);
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s;
}
.dok-btn svg{width:27px;height:27px;stroke:none;fill:currentColor}
.dok-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 18px 40px rgba(4,20,47,.36)}
.dok-wa{background:#25D366}
.dok-as{background:var(--mavi-koyu)}
.dok-as svg{fill:none;stroke:currentColor;stroke-width:1.9}
/* İlk gelişte asistanı bir kez nabız gibi hatırlatır, sonra susar */
.dok-as::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--mavi);opacity:0;
}
.dok-as.cagir::after{animation:nabiz 2.2s ease-out 3}
@keyframes nabiz{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.38)}}
.dok-ipucu{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
  white-space:nowrap;background:var(--lacivert-derin);color:#fff;
  padding:7px var(--s4);border-radius:100px;font-size:var(--f-xs);font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.dok-btn:hover .dok-ipucu{opacity:1}
@media (max-width:900px){
  /* Alt çubukta zaten bir WhatsApp düğmesi var; yüzen ikinci kopya
     hem tekrar hem de hero'daki çağrı düğmelerinin üstüne biniyordu.
     Mobilde iskele yalnızca asistanı taşır. */
  .dok-wa{display:none}
  .dok{bottom:calc(64px + env(safe-area-inset-bottom, 0px) + 14px)}
  .dok-btn{width:50px;height:50px}
  .dok-btn svg{width:24px;height:24px}
  .dok-ipucu{display:none}
  /* Çentikli/çubuklu ekranlarda alt çubuk içeriği yiyordu */
  .mobil-bar{padding-bottom:env(safe-area-inset-bottom, 0px)}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px))}
  .asis{bottom:calc(64px + env(safe-area-inset-bottom, 0px) + 78px)}
}

/* ═══════════════════════════════════════════════════════════
   ASİSTAN PANELİ
   Sohbet penceresi teşhis koymaz; yönlendirir. Tıbbi soru gelirse
   hekime bağlar. Tasarımı da bunu söyler: sakin, dar, iddiasız.
   ═══════════════════════════════════════════════════════════ */
.asis{
  position:fixed;z-index:121;
  right:clamp(14px,2vw,26px);bottom:calc(clamp(14px,2vw,26px) + 68px);
  width:min(384px,calc(100vw - 28px));
  height:min(568px,calc(100dvh - 150px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--beyaz);border:1px solid var(--cizgi);border-radius:var(--r-l);
  box-shadow:0 30px 70px rgba(4,20,47,.30);
  animation:asis-ac .26s cubic-bezier(.22,1,.36,1);
}
.asis[hidden]{display:none}
@keyframes asis-ac{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:900px){.asis{bottom:calc(64px + 78px)}}

.asis-ust{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s5);
  background:linear-gradient(135deg,var(--lacivert) 0%,var(--lacivert-koyu) 100%);color:#fff;
}
.asis-ust img{width:34px;height:auto;flex:none}
.asis-ust strong{display:block;font-family:var(--serif);font-size:var(--f-md);font-weight:600;line-height:1.2}
.asis-ust span{display:block;font-size:var(--f-xs);color:#A9C6F2;margin-top:1px}
.asis-kapat{margin-left:auto;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:#fff;transition:background .18s}
.asis-kapat:hover{background:rgba(255,255,255,.16)}
.asis-kapat svg{width:16px;height:16px;stroke-width:2.4}

.asis-akis{flex:1;overflow-y:auto;padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);background:var(--mavi-buz)}
.asis-mesaj{max-width:86%;font-size:var(--f-sm);line-height:1.6;padding:var(--s3) var(--s4);border-radius:var(--r-m)}
.asis-mesaj p + p{margin-top:var(--s3)}
.asis-mesaj a{color:var(--mavi-metin);font-weight:700;text-decoration:underline}
.asis-bot{align-self:flex-start;background:var(--beyaz);border:1px solid var(--cizgi);border-bottom-left-radius:6px;color:var(--metin)}
.asis-ben{align-self:flex-end;background:var(--mavi-koyu);color:#fff;border-bottom-right-radius:6px}
.asis-yaziyor{align-self:flex-start;display:flex;gap:5px;padding:var(--s4)}
.asis-yaziyor i{width:7px;height:7px;border-radius:50%;background:var(--cizgi-kontrol);animation:zipla 1.1s ease-in-out infinite}
.asis-yaziyor i:nth-child(2){animation-delay:.15s}
.asis-yaziyor i:nth-child(3){animation-delay:.3s}
@keyframes zipla{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}

.asis-oner{display:flex;flex-wrap:wrap;gap:var(--s2);padding:0 var(--s5) var(--s4);background:var(--mavi-buz)}
.asis-oner button{
  padding:7px var(--s4);border:1px solid var(--cizgi);border-radius:100px;
  background:var(--beyaz);font-size:var(--f-xs);font-weight:600;color:var(--mavi-metin);
  transition:border-color .16s,background .16s;
}
.asis-oner button:hover{border-color:var(--mavi);background:var(--mavi-sis)}

.asis-alt{display:flex;gap:var(--s2);padding:var(--s4);border-top:1px solid var(--cizgi);background:var(--beyaz)}
.asis-alt input{
  flex:1;padding:var(--s3) var(--s4);border:1.5px solid var(--cizgi);
  border-radius:100px;font-size:var(--f-sm);background:var(--mavi-buz);
}
/* iOS 16px altındaki alana odaklanınca sayfayı otomatik zoomluyor.
   Mobilde giriş 16px olmalı — aksi hâlde panel her dokunuşta zıplıyor. */
@media (max-width:900px){
  .asis-alt input{font-size:16px}
}
.asis-alt input:focus{outline:none;border-color:var(--mavi);background:#fff}
.asis-gonder{width:42px;height:42px;flex:none;border-radius:50%;background:var(--mavi-koyu);color:#fff;display:grid;place-items:center;transition:background .18s}
.asis-gonder:hover{background:var(--lacivert)}
.asis-gonder svg{width:18px;height:18px;stroke-width:2}
.asis-uyari{
  padding:0 var(--s5) var(--s3);font-size:10.5px;line-height:1.45;
  color:var(--metin-hafif);text-align:center;background:var(--beyaz);
}

/* ═══════════ DUYARLI (3 kırılım) ═══════════ */
@media (max-width:1200px){
  .giris-ic{gap:var(--s7)}
  .mega-sag{grid-template-columns:repeat(2,1fr)}
  .alt-izgara{grid-template-columns:1.4fr 1fr 1fr;gap:var(--s6)}
  .alt-izgara > div:last-child{grid-column:span 3}
  /* Menü kapandığı yerde mega menü de kapanır; mobil çekmece devralır */
  .menu-mega,.mega{display:none}
}
@media (max-width:900px){
  .bolum{padding:var(--s8) 0}
  .giris{padding-top:var(--s6)}
  /* Dar ekranda SVG etiketleri düşer, yerini gerçek HTML kartlar alır:
     19px'lik SVG metni burada okunmaz hale geliyordu. Kartlar aynı
     dört tedavi sayfasına gider, dokunma alanı parmak boyudur. */
  .diz-etiket,.diz-not{display:none}
  .diz svg{width:62%;margin:0 auto}
  .diz-liste{display:grid}
  .evre-liste{grid-template-columns:repeat(2,1fr)}
  .evre-liste li:nth-child(3)::before{display:none}
  /* İçindekiler dar ekranda yapışmaz — ekranın yarısını yerdi.
     CTA kutusu gizlenmiyor, sıranın SONUNA taşınıyor: konuyu
     WhatsApp mesajına taşıyan tek çağrı, tam da WhatsApp'ın
     yerlisi olduğu cihazda kayboluyordu. */
  .icdk{position:static;display:flex;flex-direction:column}
  .icdk > strong{order:1}
  .icdk ol{order:2}
  .icdk-cta{order:3;margin-top:var(--s6)}
  .giris-ic,.bas,.net-izgara,.rnd-izgara,.bulucu,.panel{grid-template-columns:1fr}
  .bas{gap:var(--s4);margin-bottom:var(--s6)}
  .bas-yan{max-width:none}
  .net-izgara{gap:var(--s6)}
  .surec{grid-template-columns:1fr 1fr}
  .panel{padding:var(--s7) var(--s5)}
  .bulucu-ic{padding:var(--s7) var(--s5)}
  .istat{grid-template-columns:repeat(2,1fr)}
  .istat > div:nth-child(3)::before{display:none}
  .alt-izgara{grid-template-columns:1fr 1fr}
  .alt-izgara > div:last-child{grid-column:auto}
}
@media (max-width:640px){
  :root{--s9:64px;--s8:48px}
  .sarmal{padding:0 var(--s5)}
  .sik-izgara,.panel-izgara,.surec{grid-template-columns:1fr}
  .giris-btn,.acilis-btn{flex-direction:column;align-items:stretch}
  .giris-btn a,.acilis-btn a{justify-content:center}
  .evre-liste{grid-template-columns:1fr}
  .evre-liste li + li::before{inset:0 auto auto 0;width:100%;height:1px;top:0}
  .evre-liste a{padding:var(--s5)}
  .diz svg{width:88%}
  .kat-bas{gap:var(--s2)}
  .alt-izgara{grid-template-columns:1fr}
  .alt-son{flex-direction:column;gap:var(--s2)}
  .rnd-kart{padding:var(--s5) var(--s4)}
  .yazi h3{-webkit-line-clamp:4}
}

/* ═══════════ PROTOTİP NOTU ═══════════ */
.proto{background:#FEF3C7;border-bottom:1px solid #FCD34D;color:#78350F;padding:var(--s2) 0;font-size:var(--f-xs);text-align:center;font-weight:600}