/* =========================================================
   TASARIM 5 — "ALTIN PRESTİJ"
   DentaNoya Ağız ve Diş Sağlığı Polikliniği
   Uzm. Dt. A. Işıl Şenocak · İzmir / Bornova Ortodontist
   Tasarım 1'in petrol yeşili korundu; altın ve krem tonları logodan alındı.
   Tedavi (hizmetler) bölümü, daha dikkat çekici olması için koyu zemindedir.
   ========================================================= */

:root{
  --altin:#C79A3C;
  --altin-acik:#E7C583;
  --altin-koyu:#A87C24;
  --petrol:#0E4E4A;
  --petrol-koyu:#0A3835;
  --petrol-acik:#166B65;
  --fildisi:#FDFBF7;
  --krem:#F5EFE3;
  --krem-2:#EFE6D6;
  --metin:#22302E;
  --soluk:#5F6E6B;
  --cizgi:#E4D8C3;
  --golge:0 24px 60px rgba(14,78,74,.14);
  --kapsa:1220px;
  --gecis:.35s cubic-bezier(.22,.61,.36,1);
  --baslik:"Cormorant Garamond",Georgia,serif;
  --govde:"Jost",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:120px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fildisi);color:var(--metin);
  font-family:var(--govde);font-size:17px;line-height:1.75;font-weight:300;
  overflow-x:hidden;
}
img,svg,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--baslik);font-weight:500;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.45em}

.kapsa{width:min(100% - 44px,var(--kapsa));margin-inline:auto}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--petrol);color:#fff;padding:12px 20px}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--altin);outline-offset:3px}

/* ---------- Butonlar ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:15px 30px;border:1px solid transparent;border-radius:2px;cursor:pointer;
  font-family:var(--govde);font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  transition:var(--gecis);text-align:center;
}
.btn--altin{background:var(--altin);color:#231A08;border-color:var(--altin)}
.btn--altin:hover{background:var(--altin-koyu);border-color:var(--altin-koyu);color:#fff;transform:translateY(-2px)}
.btn--cizgi{border-color:currentColor;background:transparent}
.btn--cizgi:hover{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.btn--koyu{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.btn--koyu:hover{background:var(--petrol-koyu)}

.etiket{
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--altin-koyu);
  font-weight:500;margin:0 0 14px;display:flex;align-items:center;gap:12px;
}
.etiket::before{content:"";width:34px;height:1px;background:var(--altin)}

/* ---------- Üst şerit ---------- */
.ust-serit{background:var(--petrol-koyu);color:#CFE0DE;font-size:13.5px;letter-spacing:.02em}
.ust-serit__ic{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:42px;flex-wrap:wrap}
.ust-serit__tel{color:var(--altin-acik);font-weight:500;letter-spacing:.08em}
.ust-serit__tel:hover{color:#fff}

/* ---------- Header ---------- */
.ust{position:sticky;top:0;z-index:90;background:rgba(253,251,247,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--cizgi);transition:var(--gecis)}
.ust.kucuk{box-shadow:0 10px 30px rgba(14,78,74,.09)}
.ust__ic{display:flex;align-items:center;gap:22px;min-height:88px}
.ust.kucuk .ust__ic{min-height:70px}

.marka{display:flex;align-items:center;gap:13px;color:var(--altin-koyu);flex-shrink:0}
.marka__ikon{width:42px;height:44px;color:var(--altin)}
.marka__yazi{display:flex;flex-direction:column;line-height:1.16}
.marka__yazi strong{font-family:var(--baslik);font-size:27px;font-weight:600;letter-spacing:.01em;color:var(--petrol)}
.marka__yazi b{font-family:var(--govde);font-weight:400;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--soluk)}
.marka__yazi em{font-style:normal;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--altin-koyu);font-weight:500;margin-top:2px}

.menu{display:flex;gap:24px;margin-left:auto;font-size:14.5px;letter-spacing:.03em;align-items:center}
.menu a{position:relative;padding:6px 0;color:var(--metin);white-space:nowrap}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--altin);transition:var(--gecis)}
.menu a:hover::after,.menu a.aktif::after{width:100%}
.menu a.aktif{color:var(--altin-koyu)}
.menu__cta{display:none}

.ust__cta{padding:12px 22px;font-size:11.5px;letter-spacing:.1em}
.menu-btn{display:none;width:44px;height:44px;background:none;border:1px solid var(--cizgi);border-radius:2px;cursor:pointer;padding:11px 10px;gap:5px;flex-direction:column;justify-content:center}
.menu-btn span{display:block;height:1.5px;background:var(--petrol);transition:var(--gecis)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- Açılır alt menü ---------- */
.menu-grup{position:relative;display:flex;align-items:center;gap:4px}
.menu-grup__ok{
  width:18px;height:18px;padding:0;border:0;background:none;cursor:pointer;flex-shrink:0;
  position:relative;color:var(--metin);
}
.menu-grup__ok::after{
  content:"";position:absolute;left:4px;top:4px;width:6px;height:6px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg);transition:var(--gecis);
}
.menu-grup__ok[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:3px}
.menu-alt{
  position:absolute;top:100%;left:-18px;min-width:290px;background:var(--fildisi);
  border:1px solid var(--cizgi);box-shadow:0 20px 50px rgba(14,78,74,.14);
  padding:10px 0;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:97;
}
.menu-grup:hover .menu-alt,.menu-grup:focus-within .menu-alt,.menu-grup.acik .menu-alt{
  opacity:1;visibility:visible;transform:none;
}
.menu-alt a{display:block;padding:9px 22px;font-size:14.5px;white-space:nowrap;color:var(--metin)}
.menu-alt a::after{display:none}
.menu-alt a:hover{background:var(--krem);color:var(--altin-koyu)}
.menu-alt a b{font-weight:500;color:var(--altin-koyu)}

/* iki kolonlu geniş alt menü */
.menu-alt--genis{display:grid;grid-template-columns:1fr 1fr;min-width:560px;padding:18px 0;gap:0 8px}
.menu-alt__kolon{padding:0 8px}
.menu-alt__kolon + .menu-alt__kolon{border-left:1px solid var(--cizgi)}
.menu-alt__bas{margin:0 0 6px;padding:0 14px}
.menu-alt__bas a{
  padding:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--altin-koyu);font-weight:500;
}
.menu-alt__bas a:hover{background:transparent;color:var(--petrol)}
.menu-alt--genis a{padding:8px 14px;font-size:14px}

/* ---------- İz (breadcrumb) ---------- */
.iz{background:var(--krem);border-bottom:1px solid var(--cizgi);font-size:13px;padding:13px 0}
.iz a,.iz span{color:var(--soluk)}
.iz a:hover{color:var(--altin-koyu)}
.iz a::after{content:"›";margin:0 9px;color:var(--cizgi)}
.iz span{color:var(--petrol);font-weight:500}

/* ---------- Hub kart ızgaraları ---------- */
.hub{background:var(--fildisi)}
.hub .bolum-bas{margin-bottom:48px}
.hub h1{font-size:clamp(2.1rem,3.8vw,3.2rem);color:var(--petrol)}
.kart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 26px}
.kart-t{margin:0}
.kart-t__bag{display:block;height:100%}
.kart-t figure{margin:0 0 18px;overflow:hidden}
.kart-t img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.72) sepia(.08);transition:var(--gecis)}
.kart-t__bag:hover img{filter:saturate(.95);transform:scale(1.03)}
.kart-t h3{font-size:21px;color:var(--petrol);margin-bottom:.4em;line-height:1.25}
.kart-t__bag:hover h3{color:var(--altin-koyu)}
.kart-t p{font-size:14.5px;color:var(--soluk);margin-bottom:.9em;line-height:1.6}
.kart-t__ok{
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--altin-koyu);
  font-weight:500;border-bottom:1px solid var(--altin);padding-bottom:3px;
}

.yazi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--cizgi)}
.kart-y{margin:0;border-bottom:1px solid var(--cizgi);border-right:1px solid var(--cizgi)}
.kart-y:nth-child(2n){border-right:0}
.kart-y__bag{display:block;padding:30px 32px 32px}
.kart-y:nth-child(2n+1) .kart-y__bag{padding-left:0}
.kart-y__bag:hover{background:var(--krem)}
.kart-y__tarih{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--altin-koyu);margin:0 0 10px}
.kart-y h2{font-size:22px;color:var(--petrol);line-height:1.3;margin-bottom:.5em}
.kart-y__bag:hover h2{color:var(--altin-koyu)}
.kart-y p{font-size:15px;color:var(--soluk);margin-bottom:1em}
.hub-alt{margin:44px 0 0;font-size:15.5px;color:var(--soluk)}
.hub-alt a{color:var(--altin-koyu);border-bottom:1px solid currentColor}

/* ---------- Yazı / tedavi detay sayfası ---------- */
.yazi{background:var(--fildisi)}
.yazi__ic{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start}
.yazi__govde h1{font-size:clamp(2rem,3.6vw,2.9rem);color:var(--petrol);margin-bottom:.5em}
.yazi__govde h4{font-family:var(--govde);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--altin-koyu);font-weight:500;margin:32px 0 12px}
.yazi__govde p,.yazi__govde li{color:var(--soluk);font-size:16.5px}
.yazi__govde strong{color:var(--metin);font-weight:500}
.yazi__govde figure{margin:0 0 28px}
.yazi__govde figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
/* 4:3 orandaki anatomik cizim/render gorselleri kirpilmadan gosterilir (bkz. .orto-panel) */
/* Görselin tamamı görünsün: oran dayatmıyoruz, dosya kendi oranıyla basılır.
   Böylece hangi görsel konursa konsun hiçbir kenarından kırpılmaz. */
.yazi__govde figure.gorsel-tam img,
.orto-panel figure.gorsel-tam img,
.satir-ic figure.gorsel-tam img{aspect-ratio:auto;height:auto;object-fit:contain;background:#fff}
.yazi__govde .detay-gorsel{float:right;width:min(320px,42%);margin:6px 0 22px 32px}
.yazi__govde .detay-gorsel img{aspect-ratio:4/3}
.yazi__govde .ipucu{border-left:2px solid var(--altin);padding:16px 22px;background:var(--krem);font-size:15.5px;color:var(--petrol-acik);margin-top:26px}
.yazi__tarih{font-size:13px;letter-spacing:.06em;color:var(--soluk);margin-bottom:1.6em}
.yazi__ozet{font-family:var(--baslik);font-size:21px;line-height:1.55;color:var(--petrol);border-left:2px solid var(--altin);padding-left:22px;margin-bottom:1.6em}
.yazi__cta{margin-top:36px;padding-top:26px;border-top:1px solid var(--cizgi);font-size:16px}
.yazi__cta a{color:var(--altin-koyu);border-bottom:1px solid currentColor}
.yazi__uyari{font-size:13.5px;color:var(--soluk);background:var(--krem);padding:16px 20px;margin-top:22px}

.yazi__yan{position:sticky;top:130px;display:grid;gap:26px}
.yan-kutu{background:var(--petrol);color:#C6DAD7;padding:28px 26px}
.yan-kutu__bas{font-family:var(--baslik);font-size:23px;color:#fff;margin:0 0 .5em;line-height:1.25}
.yan-kutu p{font-size:14.5px;color:#A9C6C2;margin:0 0 1.2em;line-height:1.6}
.yan-kutu .btn{width:100%;padding:13px 18px;font-size:12px}
.yan-kutu__tel{display:block;text-align:center;margin-top:12px;font-family:var(--baslik);font-size:21px;color:var(--altin-acik)}
.yan-kutu__tel:hover{color:#fff}
.yan-liste{border-top:1px solid var(--cizgi);padding-top:22px}
.yan-liste__bas{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--altin-koyu);font-weight:500;margin:0 0 12px}
.yan-liste a{display:block;padding:9px 0;font-size:14.5px;color:var(--soluk);border-bottom:1px solid var(--cizgi)}
.yan-liste a:last-child{border-bottom:0}
.yan-liste a:hover{color:var(--altin-koyu);padding-left:6px}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--petrol);color:#EAF3F1;overflow:hidden;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:auto -10% -35% 42%;height:75%;
  background:radial-gradient(circle at 50% 50%,rgba(199,154,60,.30),transparent 62%);z-index:-1;
}
.hero__ic{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;padding:92px 0 96px}
.hero__metin .etiket{color:var(--altin-acik)}
.hero__metin .etiket::before{background:var(--altin-acik)}
.hero h1{font-size:clamp(2.8rem,5.4vw,4.5rem);color:#fff;font-weight:400;margin-bottom:.35em}
.hero h1 em{font-style:italic;color:var(--altin-acik)}
.hero__ozet{font-size:18px;color:#C6DAD7;max-width:58ch;font-weight:300}
.hero__ozet strong{color:#fff;font-weight:400}
.hero__butonlar{display:flex;flex-wrap:wrap;gap:14px;margin:32px 0 30px}
.hero__butonlar .btn--cizgi{color:#EAF3F1}
.hero__butonlar .btn--cizgi:hover{background:#fff;color:var(--petrol);border-color:#fff}
.hero__rozet{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13.5px;letter-spacing:.06em;color:#A9C6C2;text-transform:uppercase}
.hero__rozet li{display:flex;align-items:center;gap:9px;margin:0}
.hero__rozet li::before{content:"";width:6px;height:6px;background:var(--altin);transform:rotate(45deg)}

.hero__gorsel{position:relative;margin:0}
.hero__gorsel::before{content:"";position:absolute;inset:26px -26px -26px 26px;border:1px solid rgba(199,154,60,.6)}
.hero__gorsel img{position:relative;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 22%}
.hero__gorsel figcaption{
  position:absolute;left:-24px;bottom:26px;background:var(--fildisi);color:var(--petrol);
  padding:15px 26px;font-family:var(--baslik);font-size:22px;font-weight:600;box-shadow:var(--golge);
}
.hero__gorsel figcaption span{display:block;font-family:var(--govde);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--altin-koyu);font-weight:500}

/* ---------- Kayan bant ---------- */
.akan{background:var(--altin);color:#231A08;overflow:hidden;padding:15px 0;white-space:nowrap}
.akan__ic{display:inline-flex;align-items:center;gap:26px;animation:kay 46s linear infinite;font-family:var(--baslik);font-size:25px;font-weight:500;letter-spacing:.01em}
.akan__ic i{color:#6B4E11;font-style:normal;font-size:11px}
@keyframes kay{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Güven şeridi ---------- */
.guven{background:var(--krem);border-bottom:1px solid var(--cizgi)}
.guven__ic{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0}
.guven__ic>div{padding:44px 32px;border-right:1px solid var(--cizgi)}
.guven__ic>div:first-child{padding-left:0}
.guven__ic>div:last-child{border-right:0;padding-right:0}
.guven h2{font-size:20px;color:var(--petrol);margin-bottom:.5em}
.guven p{font-size:15px;color:var(--soluk);margin:0}

/* ---------- Bölüm başlıkları ---------- */
.bolum-bas{max-width:800px;margin:0 0 56px}
.bolum-bas h2{font-size:clamp(2.1rem,3.6vw,3.1rem);color:var(--petrol)}
.bolum-bas__ozet{color:var(--soluk);font-size:17px;margin:0}
.bolum-bas__ozet a{color:var(--altin-koyu);border-bottom:1px solid currentColor}
.bolum-bas--acik h2{color:#fff}
.bolum-bas--acik .bolum-bas__ozet{color:#B7CFCC}
.bolum-bas--acik .bolum-bas__ozet strong{color:#fff;font-weight:400}
.bolum-bas--acik .etiket{color:var(--altin-acik)}
.bolum-bas--acik .etiket::before{background:var(--altin-acik)}

section{padding:96px 0}
.hero,.guven{padding:0}

/* ---------- Hakkımızda ---------- */
.hakkimizda{background:var(--fildisi)}
.hakkimizda__ic{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
.hakkimizda__gorsel{margin:0;position:sticky;top:130px}
.hakkimizda__gorsel::after{content:"";position:absolute;inset:20px -20px -20px 20px;border:1px solid var(--altin);z-index:0}
.hakkimizda__gorsel img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 20%}
.hakkimizda__gorsel figcaption{
  position:absolute;left:-20px;bottom:-8px;z-index:2;background:var(--fildisi);color:var(--petrol);
  padding:14px 24px;font-family:var(--baslik);font-size:21px;font-weight:600;box-shadow:var(--golge);
}
.hakkimizda__gorsel figcaption span{
  display:block;font-family:var(--govde);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--altin-koyu);font-weight:500;
}
.hakkimizda h2{font-size:clamp(2.1rem,3.6vw,3.1rem);color:var(--petrol);margin-bottom:.3em}
.hakkimizda .buyuk{font-family:var(--baslik);font-size:24px;font-style:italic;color:var(--petrol-acik);line-height:1.5;border-left:2px solid var(--altin);padding-left:24px;margin-bottom:1.4em}
.hakkimizda p{color:var(--soluk)}
.hakkimizda strong{color:var(--metin);font-weight:500}

.kunye{margin:34px 0;padding:26px 0;border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);display:grid;gap:14px}
.kunye>div{display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:baseline}
.kunye dt{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--altin-koyu);font-weight:500}
.kunye dd{margin:0;font-size:15.5px;color:var(--soluk)}

/* ---------- Hizmet listesi (vurgulu · koyu zemin) ---------- */
.hizmetler{background:var(--petrol);color:#C6DAD7}
.hizmetler .bolum-bas h2{color:#fff}
.hizmetler .bolum-bas__ozet{color:#A9C6C2}
.hizmetler .bolum-bas__ozet a{color:var(--altin-acik)}
.hizmetler .etiket{color:var(--altin-acik)}
.hizmetler .etiket::before{background:var(--altin-acik)}

.hizmet-liste{list-style:none;padding:0;margin:44px 0 0;border-top:1px solid rgba(255,255,255,.16)}
.hizmet-liste>li{margin:0;border-bottom:1px solid rgba(255,255,255,.16)}
.hizmet-satir{
  display:grid;grid-template-columns:84px minmax(0,1fr) minmax(0,.8fr);gap:22px;align-items:baseline;
  padding:28px 0;transition:var(--gecis);position:relative;cursor:pointer;
}
.hizmet-satir:hover{padding-left:16px}
.hizmet-satir .no{font-family:var(--baslik);font-size:17px;color:var(--altin);letter-spacing:.14em;font-weight:600}
.hizmet-satir .ad{font-family:var(--baslik);font-size:clamp(1.4rem,2.5vw,2.1rem);font-weight:400;line-height:1.15;color:#fff}
.hizmet-satir:hover .ad{color:var(--altin-acik)}
.hizmet-satir .ad b{display:block;font-family:var(--govde);font-size:13px;font-weight:300;letter-spacing:.06em;color:#9BBBB7;margin-top:7px;text-transform:none}
.hizmet-satir .not{font-size:14.5px;color:#9BBBB7;text-align:right}
.hizmet-satir:hover .not{color:var(--altin-acik)}
.hizmet-satir--one{background:linear-gradient(90deg,rgba(199,154,60,.22),transparent 64%);padding-left:18px}
.hizmet-satir--one:hover{padding-left:30px}
.hizmet-satir--one .ad{font-size:clamp(1.6rem,3vw,2.5rem)}
.hizmet-satir--one::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--altin)}

.satir-ic{display:grid;grid-template-columns:280px 1fr;gap:26px;padding:0 0 30px;align-items:start}
.satir-ic figure{margin:0}
.satir-ic img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid rgba(199,154,60,.35)}
.satir-ic p{font-size:15.5px;color:#A9C6C2;margin-bottom:.8em}
.ok-bag{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--altin-acik);font-weight:500;border-bottom:1px solid var(--altin)}
.ok-bag:hover{color:#fff;border-color:#fff}

.hizmet-ek{list-style:none;padding:0;margin:38px 0 0;display:flex;flex-wrap:wrap;gap:12px}
.hizmet-ek li{margin:0}
.hizmet-ek a{
  display:inline-block;padding:10px 20px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.04);
  font-size:14px;color:#C6DAD7;transition:var(--gecis);border-radius:2px;
}
.hizmet-ek a:hover{border-color:var(--altin);color:var(--altin-acik);background:rgba(199,154,60,.12)}

/* imleç takipli önizleme */
.onizleme{
  position:fixed;top:0;left:0;width:290px;height:360px;pointer-events:none;z-index:70;
  opacity:0;transform:scale(.94);transition:opacity .3s ease;
  box-shadow:0 30px 70px rgba(10,56,53,.35);
}
.onizleme.gorun{opacity:1}
.onizleme img{width:100%;height:100%;object-fit:cover}

/* ---------- Ortodonti (genişletilmiş) ---------- */
.orto{background:var(--petrol-koyu);color:#D8E7E5}
.orto-duzen{display:grid;grid-template-columns:300px 1fr;gap:46px;align-items:start}
.orto-yan{position:sticky;top:130px}
.orto-sekme{display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(255,255,255,.16)}
.orto-sekme button{
  appearance:none;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.16);
  color:#B7CFCC;font-family:var(--govde);font-size:15px;font-weight:300;letter-spacing:.02em;
  text-align:left;padding:15px 34px 15px 0;cursor:pointer;position:relative;transition:var(--gecis);
}
.orto-sekme button::after{
  content:"";position:absolute;right:6px;top:50%;width:7px;height:7px;margin-top:-4px;
  border-right:1px solid var(--altin);border-bottom:1px solid var(--altin);
  transform:rotate(-45deg);opacity:0;transition:var(--gecis);
}
.orto-sekme button:hover{color:#fff;padding-left:8px}
.orto-sekme button.aktif{color:var(--altin-acik);font-weight:400}
.orto-sekme button.aktif::after{opacity:1}

/* sekme sütununun altındaki bilgi kartı — boş alanı doldurur */
.orto-kart{margin-top:30px;padding:26px 24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.orto-kart__bas{font-family:var(--baslik);font-size:21px;color:#fff;margin:0 0 .5em;line-height:1.25}
.orto-kart p{font-size:14.5px;color:#A9C6C2;margin:0 0 1.2em;line-height:1.65}
.orto-kart .btn{width:100%;padding:13px 18px;font-size:12px}
.orto-kart__tel{
  display:block;text-align:center;margin-top:12px;font-family:var(--baslik);font-size:21px;
  color:var(--altin-acik);letter-spacing:.02em;
}
.orto-kart__tel:hover{color:#fff}

.orto-panel article{max-width:82ch}
.orto-panel figure{margin:0 0 30px}
.orto-panel figure img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(199,154,60,.35)}
.orto-panel h3{font-size:clamp(1.6rem,2.8vw,2.3rem);color:#fff;font-weight:400;margin-bottom:.5em}
.orto-panel h4{font-family:var(--govde);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--altin);font-weight:500;margin:28px 0 12px}
.orto-panel p{color:#B9D0CD;font-size:16.5px}
.orto-panel ul{color:#B9D0CD}
.orto-panel strong{color:#fff;font-weight:500}
.orto-panel .ipucu{border-left:2px solid var(--altin);padding:16px 22px;background:rgba(255,255,255,.05);font-size:15.5px;color:#CBDEDB;margin-top:26px}
.orto-panel article{animation:ac .45s ease both}
@keyframes ac{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.orto-alt{margin:56px 0 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.16);color:#B9D0CD;font-size:16px}
.orto-alt a{color:var(--altin-acik);border-bottom:1px solid currentColor}

/* ---------- Detay akordeon ---------- */
.detaylar{background:var(--fildisi)}
.akordeon{border-top:1px solid var(--cizgi)}
.akordeon details{border-bottom:1px solid var(--cizgi)}
.akordeon summary{
  list-style:none;cursor:pointer;padding:26px 60px 26px 0;position:relative;
  display:flex;align-items:center;transition:var(--gecis);
}
.akordeon summary::-webkit-details-marker{display:none}
.akordeon summary h3{margin:0;font-size:clamp(1.25rem,2.1vw,1.65rem);color:var(--petrol);font-weight:500}
.akordeon summary:hover h3{color:var(--altin-koyu)}
.akordeon summary::after{
  content:"";position:absolute;right:8px;top:50%;width:16px;height:16px;margin-top:-8px;
  background:
    linear-gradient(var(--altin),var(--altin)) center/16px 1.5px no-repeat,
    linear-gradient(var(--altin),var(--altin)) center/1.5px 16px no-repeat;
  transition:var(--gecis);
}
.akordeon details[open] summary::after{transform:rotate(135deg)}
.akordeon__ic{padding:0 0 40px}
.akordeon__ic p{color:var(--soluk);font-size:16.5px;max-width:78ch}
.akordeon__ic h4{font-family:var(--govde);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--altin-koyu);font-weight:500;margin:26px 0 12px}
.akordeon__ic ul,.akordeon__ic ol{color:var(--soluk);max-width:72ch}
.akordeon__ic strong{color:var(--metin);font-weight:500}
.akordeon__ic .ipucu{border-left:2px solid var(--altin);padding:16px 22px;background:var(--krem);font-size:15.5px;color:var(--petrol-acik);margin-top:26px}
.detay-gorsel{float:right;width:min(340px,40%);margin:6px 0 22px 32px}
.detay-gorsel img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--cizgi)}
.detay-gorsel figcaption{font-size:11.5px;line-height:1.45;color:var(--soluk);margin-top:7px}
.akordeon details[open] .akordeon__ic{animation:ac .45s ease both}

.akordeon--ince summary{padding:20px 60px 20px 0}
.akordeon--ince summary h3{font-size:19px;font-family:var(--govde);font-weight:400}
.akordeon--ince .akordeon__ic{padding-bottom:26px}
.akordeon--ince .akordeon__ic p{font-size:16px;margin:0}

/* ---------- Galeri ---------- */
.galeri{background:var(--krem-2);padding-bottom:60px}
/* ---------- Vaka (önce / sonra + zorunlu bilgilendirme) ---------- */
.vaka{display:grid;grid-template-columns:minmax(0,620px) minmax(0,1fr);gap:40px;align-items:start;margin-bottom:56px}
.vaka:last-of-type{margin-bottom:0}

/* önce/sonra sürgülü karşılaştırma */
.karsilastir{
  position:relative;overflow:hidden;background:var(--petrol);
  aspect-ratio:4/3;cursor:ew-resize;user-select:none;touch-action:pan-y;
}
.karsilastir img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;pointer-events:none;
}
.karsilastir__ust{clip-path:inset(0 50% 0 0)}
.karsilastir__tutac{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--altin);
  transform:translateX(-1px);cursor:ew-resize;z-index:3;
}
.karsilastir__tutac::after{
  content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;
  border:2px solid var(--altin);border-radius:50%;background:rgba(14,78,74,.55);backdrop-filter:blur(3px);
  background-image:
    linear-gradient(var(--altin),var(--altin)),
    linear-gradient(var(--altin),var(--altin));
  background-size:2px 12px,2px 12px;background-position:calc(50% - 5px) 50%,calc(50% + 5px) 50%;
  background-repeat:no-repeat;
}
.karsilastir__tutac:focus-visible{outline:none}
.karsilastir__tutac:focus-visible::after{box-shadow:0 0 0 4px rgba(199,154,60,.45)}
.karsilastir__etiket{
  position:absolute;top:14px;z-index:2;background:rgba(10,56,53,.78);color:#fff;backdrop-filter:blur(3px);
  padding:6px 14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
}
.karsilastir__etiket--sol{left:14px}
.karsilastir__etiket--sag{right:14px}
.karsilastir__not{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--altin-koyu);margin:12px 0 0;font-weight:500}

.vaka__ici{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.vaka__ici figure{margin:0}
.vaka__ici img{width:100%;aspect-ratio:16/10;object-fit:cover}
.vaka__ici figcaption{
  margin-top:9px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soluk);
}

.vaka__ozet{margin:0 0 26px;display:grid;gap:16px}
.vaka__ozet>div{display:grid;gap:5px}
.vaka__ozet dt{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--altin-koyu);font-weight:500}
.vaka__ozet dd{margin:0;font-family:var(--baslik);font-size:20px;line-height:1.4;color:var(--petrol)}

.vaka__notlar{
  list-style:none;padding:22px 0 0;margin:0;border-top:1px solid var(--cizgi);
  font-size:13.5px;line-height:1.65;color:var(--soluk);
}
.vaka__notlar li{position:relative;padding-left:22px;margin-bottom:.7em}
.vaka__notlar li:last-child{margin-bottom:0}
.vaka__notlar li::before{
  content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;
  background:var(--altin);transform:rotate(45deg);
}
.vaka__notlar b,.vaka__notlar strong{color:var(--petrol);font-weight:500}
.vaka__ozet dd time{font-family:var(--govde);font-size:16px;color:var(--soluk)}

/* vaka kayıt ızgarası — ortodonti detay sayfalarında (fotoğraf + röntgen) */
.orto-vaka{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:22px 20px;margin:0 0 30px;align-items:start;clear:both;
}
.orto-vaka figure{margin:0}
.orto-vaka img{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--cizgi)}
.orto-vaka figcaption{
  margin-top:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soluk);line-height:1.5;
}
.orto-vaka__not{font-size:12.5px;color:var(--soluk);margin:-18px 0 30px}

/* vaka görseli büyütme katmanı */
.orto-vaka img,.vaka__ici img,.klinik-galeri img{cursor:zoom-in}
.buyut{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(8,32,30,.94);padding:44px 20px;opacity:0;transition:opacity .22s ease;
}
.buyut[hidden]{display:none}
.buyut.gorun{opacity:1}
.buyut__ic{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%}
.buyut__ic img{
  display:block;max-width:92vw;max-height:80vh;width:auto;height:auto;
  background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.buyut__ic figcaption{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--altin-acik);text-align:center;max-width:60ch;
}
.buyut__kapat,.buyut__ok{
  position:absolute;border:0;background:rgba(255,255,255,.1);color:#fff;
  width:46px;height:46px;cursor:pointer;transition:var(--gecis);
}
.buyut__kapat:hover,.buyut__ok:hover{background:var(--altin);color:var(--petrol)}
.buyut__kapat{top:18px;right:18px}
.buyut__kapat::before,.buyut__kapat::after{
  content:"";position:absolute;left:13px;top:22px;width:20px;height:1.5px;background:currentColor;
}
.buyut__kapat::before{transform:rotate(45deg)}
.buyut__kapat::after{transform:rotate(-45deg)}
.buyut__ok{top:50%;transform:translateY(-50%)}
.buyut__ok--geri{left:14px}
.buyut__ok--ileri{right:14px}
.buyut__ok::before{
  content:"";position:absolute;top:16px;width:11px;height:11px;
  border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
}
.buyut__ok--geri::before{left:18px;transform:rotate(45deg)}
.buyut__ok--ileri::before{left:15px;transform:rotate(-135deg)}
.buyut--tek .buyut__ok{display:none}
@media (max-width:640px){
  .buyut{padding:58px 12px}
  .buyut__ok{width:40px;height:40px}
  .buyut__ic img{max-height:68vh}
}
@media (prefers-reduced-motion:reduce){ .buyut{transition:none} }

/* ---------- Klinik videoları ---------- */
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 22px}
.video-grid figure{margin:0}
.video-grid video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--petrol);display:block}
.video-grid figcaption{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--cizgi);
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--altin-koyu);font-weight:500;
}

/* ---------- Metin sayfası (KVKK vb.) ---------- */
.metin-sayfa{background:var(--fildisi)}
.metin-sayfa h1{font-size:clamp(2rem,3.6vw,3rem);color:var(--petrol)}
.metin-govde{max-width:78ch}
.metin-govde h2{font-size:clamp(1.2rem,2vw,1.5rem);color:var(--petrol);margin:2em 0 .6em}
.metin-govde h2:first-child{margin-top:0}
.metin-govde p,.metin-govde li{color:var(--soluk);font-size:16.5px}
.metin-govde strong{color:var(--metin);font-weight:500}
.metin-govde a{color:var(--altin-koyu);border-bottom:1px solid currentColor}
.metin-not{border-left:2px solid var(--altin);background:var(--krem);padding:20px 24px;margin-top:36px}
.metin-not p{margin:0;font-size:15.5px}

/* ---------- KVKK bilgilendirme şeridi ---------- */
.kvkk-serit{
  position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--petrol-koyu);color:#C6DAD7;
  box-shadow:0 -12px 40px rgba(10,56,53,.3);transform:translateY(100%);transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.kvkk-serit.gorun{transform:none}
.kvkk-serit__ic{display:flex;align-items:center;gap:26px;padding:18px 0;flex-wrap:wrap}
.kvkk-serit p{margin:0;font-size:14.5px;flex:1;min-width:280px;line-height:1.6}
.kvkk-serit strong{color:#fff;font-weight:500}
.kvkk-serit a{color:var(--altin-acik);border-bottom:1px solid currentColor}
.kvkk-serit .btn{flex-shrink:0;padding:12px 26px;font-size:12.5px}

/* ---------- Footer sosyal ---------- */
.alt__sosyal{
  display:inline-flex;align-items:center;gap:9px;margin-top:6px;padding:8px 16px 8px 12px;
  border:1px solid rgba(255,255,255,.22);color:#D8E7E5;font-size:13.5px;transition:var(--gecis);
}
.alt__sosyal:hover{border-color:var(--altin);color:var(--altin-acik)}
.oncesonra figcaption{
  position:absolute;left:0;top:0;background:var(--petrol);color:#fff;padding:8px 18px;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
}
/* ---------- 3B tarama görüntüleyici ---------- */
.tarama{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;margin:0 0 10px}
.tarama__gorsel{position:relative;background:var(--petrol);overflow:hidden}
.tarama__gorsel img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* tarama yazılımı ekran kaydı: beyaz zeminli görsel kırpılmadan gösterilir */
.tarama__gorsel--kayit{background:#fff;border:1px solid var(--cizgi)}
.tarama__gorsel--kayit img{aspect-ratio:auto;height:auto;object-fit:contain}
.tarama__sol{min-width:0}
.tarama__not{font-size:12.5px;color:var(--soluk);margin:12px 0 0;line-height:1.5}
.tarama__metin h3{font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--petrol);margin-bottom:.4em}
.tarama__metin p{color:var(--soluk);font-size:16px}
.tarama__metin ul{color:var(--soluk);font-size:15.5px;margin:0}
.tarama__metin strong{color:var(--metin);font-weight:500}

/* bölüm içi ara başlık */
.galeri-ara{
  font-family:var(--govde);font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--altin-koyu);margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--cizgi);
}
.galeri .tarama + .galeri-ara,.galeri .vaka + .galeri-ara{margin-top:46px}

/* klinik kareleri — editoryal ızgara */
.klinik-galeri{display:grid;grid-template-columns:repeat(6,1fr);gap:24px 22px}
.klinik-galeri figure{margin:0;grid-column:span 2}
.klinik-galeri .kg-genis{grid-column:span 3}
.klinik-galeri figure{position:relative;overflow:hidden}
.klinik-galeri img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:var(--gecis);
  /* stok fotoğraflar farklı kliniklerden ve farklı ışıkta çekildiği için
     ortak bir renk düzeltmesi uygulanır — set gibi görünmelerini sağlar */
  filter:saturate(.62) contrast(1.04) brightness(1.02) sepia(.12);
}
.klinik-galeri .kg-genis img{aspect-ratio:16/10}
.klinik-galeri figure:hover img{filter:saturate(.9) contrast(1.02) brightness(1.02) sepia(.04);transform:scale(1.02)}
.klinik-galeri figcaption{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--cizgi);
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--altin-koyu);font-weight:500;
}

/* ---------- Süreç ---------- */
.surec{background:var(--petrol-koyu);color:#D8E7E5}
.adimlar{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.adimlar li{margin:0;padding:0 26px;border-left:1px solid rgba(255,255,255,.14)}
.adimlar li:first-child{padding-left:0;border-left:0}
.adimlar li:last-child{padding-right:0}
.adimlar span{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:20px;
  border:1px solid var(--altin);color:var(--altin);font-family:var(--baslik);font-size:22px;border-radius:50%;
}
.adimlar h3{font-size:19px;color:#fff;font-weight:400}
.adimlar p{font-size:15px;color:#A9C6C2;margin:0}

/* ---------- Ücretsiz ön görüşme ---------- */
.on-gorusme{background:var(--krem);border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi)}
.on-gorusme__ic{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.on-gorusme h2{font-size:clamp(2rem,3.4vw,2.9rem);color:var(--petrol)}
.on-gorusme p{color:var(--soluk)}
.og-liste{list-style:none;padding:0;margin:0}
.og-liste li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--soluk);margin-bottom:.6em}
.og-liste li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:11px;background:var(--altin);transform:rotate(45deg)}
.og-kutu{background:#fff;border:1px solid var(--cizgi);padding:38px 34px;box-shadow:var(--golge);display:grid;gap:14px}
.og-kutu h3{font-size:27px;color:var(--petrol);margin:0}
.og-kutu p{font-size:15px;color:var(--soluk);margin:0 0 6px}
.og-form-bag{font-size:13px;letter-spacing:.06em;color:var(--altin-koyu);margin-top:4px}
.og-form-bag:hover{color:var(--petrol)}

/* ---------- Yorumlar ---------- */
.yorumlar{background:var(--fildisi)}
.yorum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.yorum-grid blockquote{
  margin:0;background:var(--krem);border:1px solid var(--cizgi);padding:34px 30px;position:relative;
  /* Sutun flex + cite'a margin-top:auto -> metin kisa olsa da isim/tarih
     satiri her zaman kartin en altina yaslanir, kartlar arasinda hizalanir. */
  display:flex;flex-direction:column
}
.yorum-grid blockquote::before{
  content:"\201C";position:absolute;top:6px;left:22px;font-family:var(--baslik);
  font-size:80px;color:var(--altin);opacity:.35;line-height:1;
}
.yorum-grid p{font-size:16px;color:var(--soluk);font-style:italic;position:relative;margin-bottom:1em}
.yorum-grid cite{font-style:normal;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--altin-koyu);margin-top:auto;padding-top:6px}
.yorum-cta{text-align:center;margin:38px 0 0}
.yorum-yildiz{display:block;margin:0 0 14px;font-size:15px;letter-spacing:.18em;color:var(--altin);line-height:1}
.yorum-yildiz i{font-style:normal;color:var(--cizgi)}
.yorum-ozet{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 0}
.yorum-ozet .yorum-yildiz{margin:0}
.yorum-ozet__metin{font-size:14.5px;color:var(--soluk)}
.yorum-ozet__metin strong{color:var(--petrol);font-weight:600}
.yorum-tarih{text-transform:none;letter-spacing:.02em;color:var(--soluk)}
.gizli-metin{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Bilgi merkezi ---------- */
.blog{background:var(--krem)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--cizgi)}
.blog-grid article{padding:34px 32px;border-bottom:1px solid var(--cizgi);border-right:1px solid var(--cizgi);transition:var(--gecis)}
.blog-grid article:nth-child(3n){border-right:0;padding-right:0}
.blog-grid article:nth-child(3n+1){padding-left:0}
.blog-grid article:hover{background:rgba(255,255,255,.6)}
.blog-grid h3{font-size:21px;color:var(--petrol);line-height:1.3}
.blog-grid p{font-size:15.5px;color:var(--soluk)}
.blog-grid details summary{
  cursor:pointer;list-style:none;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--altin-koyu);font-weight:500;display:inline-flex;align-items:center;gap:8px;
}
.blog-grid details summary::-webkit-details-marker{display:none}
.blog-grid details summary::after{content:"→";transition:var(--gecis)}
.blog-grid details[open] summary::after{transform:rotate(90deg)}
.blog-grid details p{margin-top:16px;font-size:15px}

/* ---------- SSS ---------- */
.sss{background:var(--petrol)}
.sss .akordeon{border-top-color:rgba(255,255,255,.16)}
.sss .akordeon details{border-bottom-color:rgba(255,255,255,.16)}
.sss .akordeon summary h3{color:#fff}
.sss .akordeon summary:hover h3{color:var(--altin-acik)}
.sss .akordeon__ic p{color:#B9D0CD}
.sss .akordeon__ic a{color:var(--altin-acik);border-bottom:1px solid currentColor}

/* ---------- Bölge ---------- */
.bolge{background:var(--krem-2);padding:70px 0}
.bolge h2{font-size:clamp(1.7rem,2.8vw,2.3rem);color:var(--petrol);max-width:26ch}
.bolge p{color:var(--soluk);max-width:92ch;font-size:16px}
.bolge strong{color:var(--petrol);font-weight:500}

/* ---------- İletişim ---------- */
.iletisim{background:var(--fildisi)}
.iletisim__ic{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.iletisim h2{font-size:clamp(2rem,3.3vw,2.8rem);color:var(--petrol)}
.iletisim__liste{list-style:none;padding:0;margin:0 0 38px;border-top:1px solid var(--cizgi)}
.iletisim__liste li{
  display:grid;grid-template-columns:150px 1fr;gap:18px;padding:15px 0;
  border-bottom:1px solid var(--cizgi);margin:0;font-size:15.5px;color:var(--soluk);
}
.iletisim__liste span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--altin-koyu);font-weight:500}
.iletisim__liste a:hover{color:var(--petrol);text-decoration:underline}

.form{display:grid;gap:16px}
.form__satir{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:grid;gap:7px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--soluk);font-weight:500}
.form input,.form select,.form textarea{
  font-family:var(--govde);font-size:16px;font-weight:300;padding:13px 15px;
  border:1px solid var(--cizgi);background:#fff;color:var(--metin);border-radius:2px;
  text-transform:none;letter-spacing:normal;transition:var(--gecis);width:100%;
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--altin);outline:none}
.form textarea{resize:vertical}
.form .onay{grid-template-columns:auto 1fr;display:grid;align-items:start;gap:11px;text-transform:none;letter-spacing:normal;font-size:13.5px;line-height:1.5}
.form .onay input{width:17px;height:17px;margin-top:3px;accent-color:var(--altin-koyu)}
.form__not{font-size:14px;margin:0;color:var(--petrol);letter-spacing:normal;text-transform:none}
.form__not.hata{color:#B0342C}

.iletisim__harita{position:sticky;top:130px}
.iletisim__harita iframe{width:100%;height:660px;border:1px solid var(--cizgi);filter:grayscale(.25)}

/* ---------- Footer ---------- */
.alt{background:var(--petrol-koyu);color:#A9C6C2;padding:70px 0 0;font-size:15px}
.alt__ic{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;padding-bottom:50px}
.alt__marka .marka__ikon{width:46px;height:48px;color:var(--altin);margin-bottom:16px}
.alt__marka p{margin:0 0 10px;color:#D8E7E5;line-height:1.5}
.alt__marka strong{font-family:var(--baslik);font-size:24px;color:#fff;font-weight:600}
.alt__marka em{font-style:normal;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--altin)}
.alt__ozet{font-size:14.5px;color:#8FB2AE;max-width:40ch}
.alt__kolon h2{font-size:13px;font-family:var(--govde);letter-spacing:.18em;text-transform:uppercase;color:var(--altin);font-weight:500;margin-bottom:18px}
.alt__kolon a{display:block;padding:5px 0;color:#A9C6C2;transition:var(--gecis)}
.alt__kolon a:hover{color:#fff;padding-left:6px}
.alt__kolon p{margin:0 0 12px;line-height:1.65}
.alt__telif{border-top:1px solid rgba(255,255,255,.12);padding:22px 0 30px;display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;font-size:13px}
.alt__telif p{margin:0}
.alt__uyari{max-width:62ch;color:#7DA09C}

/* ---------- Yüzen butonlar ---------- */
.yuzen{
  position:fixed;right:20px;bottom:20px;z-index:80;display:grid;gap:12px;justify-items:end;
  transition:bottom .35s cubic-bezier(.22,.61,.36,1);
}
/* KVKK şeridi açıkken yüzen butonlar şeridin üstüne çıkar,
   yoksa en alttaki "Yol tarifi" butonu şeridin altında kalıyor.
   --kvkk-yukseklik değerini script.js şeridin gerçek yüksekliğiyle günceller. */
.kvkk-acik .yuzen{bottom:calc(var(--kvkk-yukseklik,84px) + 20px)}
.yuzen a{
  height:56px;min-width:56px;border-radius:28px;display:inline-grid;grid-auto-flow:column;
  align-items:center;justify-content:center;gap:0;padding:0;color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.25);transition:var(--gecis);overflow:hidden;
}
.yuzen a span{
  max-width:0;opacity:0;white-space:nowrap;font-size:13.5px;font-weight:500;letter-spacing:.06em;
  transition:max-width .35s cubic-bezier(.22,.61,.36,1),opacity .25s ease,margin .35s ease;
}
.yuzen a:hover,.yuzen a:focus-visible{padding:0 22px 0 16px}
.yuzen a:hover span,.yuzen a:focus-visible span{max-width:140px;opacity:1;margin-left:10px}
.yuzen__wp{background:#25D366}
.yuzen__tel{background:var(--petrol)}
.yuzen__yol{background:var(--altin-koyu)}
.yuzen a:hover{transform:translateY(-3px)}

/* ---------- Görünüm animasyonu ---------- */
.gorunur{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
.gorunur.ic{opacity:1;transform:none}

/* =========================================================
   DUYARLI
   ========================================================= */
@media (max-width:1180px){
  .menu{gap:18px;font-size:14px}
  .ust__cta{display:none}
}

@media (max-width:1080px){
  .hero__ic{grid-template-columns:1fr;gap:52px;padding:64px 0 72px}
  .hero__gorsel{max-width:460px}
  .hakkimizda__ic{grid-template-columns:1fr;gap:46px}
  .hakkimizda__gorsel{position:static;max-width:520px}
  .guven__ic{grid-template-columns:1fr 1fr}
  .guven__ic>div{border-bottom:1px solid var(--cizgi);padding:32px 26px}
  .guven__ic>div:nth-child(2n){border-right:0;padding-right:0}
  .guven__ic>div:nth-child(2n+1){padding-left:0}
  .kart-grid{grid-template-columns:1fr 1fr;gap:28px 22px}
  .yazi__ic{grid-template-columns:1fr;gap:44px}
  .yazi__yan{position:static;grid-template-columns:1fr 1fr;align-items:start}
  .yazi__govde .detay-gorsel{float:none;width:100%;margin:0 0 22px}
  .orto-duzen{grid-template-columns:1fr;gap:34px}
  .orto-yan{position:static}
  .orto-sekme{flex-direction:row;flex-wrap:wrap;gap:8px;border-top:0}
  .orto-sekme button{border:1px solid rgba(255,255,255,.24);padding:10px 18px;border-radius:2px;font-size:14px}
  .orto-sekme button::after{display:none}
  .orto-sekme button:hover{padding-left:18px}
  .orto-sekme button.aktif{background:var(--altin);border-color:var(--altin);color:#231A08}
  .orto-kart{width:100%;margin-top:18px;display:grid;gap:0 20px;grid-template-columns:1fr auto;align-items:center}
  .orto-kart__bas{grid-column:1/-1}
  .orto-kart p{grid-column:1;margin:0}
  .orto-kart .btn{width:auto;grid-column:2}
  .orto-kart__tel{grid-column:2;margin-top:8px}
  .adimlar{grid-template-columns:1fr 1fr 1fr;gap:32px 0}
  .blog-grid,.yorum-grid{grid-template-columns:1fr 1fr}
  .blog-grid article:nth-child(3n){border-right:1px solid var(--cizgi);padding-right:32px}
  .blog-grid article:nth-child(3n+1){padding-left:32px}
  .blog-grid article:nth-child(2n){border-right:0;padding-right:0}
  .blog-grid article:nth-child(2n+1){padding-left:0}
  .on-gorusme__ic{grid-template-columns:1fr;gap:38px}
  .iletisim__ic{grid-template-columns:1fr;gap:44px}
  .iletisim__harita{position:static}
  .iletisim__harita iframe{height:420px}
  .alt__ic{grid-template-columns:1fr 1fr}
  .onizleme{display:none}
}

@media (max-width:880px){
  /* ÖNEMLİ: backdrop-filter, içindeki position:fixed öğeler için kapsayıcı blok oluşturur.
     Mobil menünün ekranı kaplayabilmesi için header'da kapatılıyor. */
  .ust{backdrop-filter:none;background:var(--fildisi)}
  .ust__ic{min-height:68px;gap:12px}
  .ust.kucuk .ust__ic{min-height:60px}

  .menu{
    position:fixed;inset:0;background:var(--fildisi);flex-direction:column;
    justify-content:flex-start;align-items:stretch;gap:0;
    padding:calc(68px + 22px) 24px calc(28px + env(safe-area-inset-bottom));
    font-size:20px;transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.61,.36,1);
    z-index:95;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .menu.acik{transform:none}
  .menu a{
    font-family:var(--baslik);font-size:21px;padding:15px 0;width:100%;
    border-bottom:1px solid var(--cizgi);color:var(--metin);
  }
  .menu a::after{display:none}
  .menu a.aktif{color:var(--altin-koyu)}
  .menu__cta{
    display:flex;align-items:center;justify-content:center;margin-top:24px;
    background:var(--altin);color:#231A08 !important;border-bottom:0 !important;
    font-family:var(--govde) !important;font-size:13px !important;font-weight:500;
    letter-spacing:.12em;text-transform:uppercase;padding:16px 20px !important;border-radius:2px;
  }
  .menu-btn{display:flex;position:relative;z-index:96;margin-left:auto;flex-shrink:0}

  /* mobilde açılır menü: satır içi katlanır liste */
  .menu-grup{
    display:flex;flex-wrap:wrap;align-items:center;position:static;width:100%;
    border-bottom:1px solid var(--cizgi);
  }
  /* .menu a{width:100%} kuralını ez — yoksa ok butonu alt satıra düşer */
  .menu-grup>a{flex:1 1 auto;width:auto !important;min-width:0;border-bottom:0 !important}
  .menu-grup__ok{
    position:static;flex:0 0 44px;width:44px;height:auto;align-self:stretch;
    color:var(--altin-koyu);display:flex;align-items:center;justify-content:center;
  }
  .menu-grup__ok::after{
    position:static;width:9px;height:9px;border-width:1.6px;margin-top:-4px;
  }
  .menu-grup__ok[aria-expanded="true"]::after{margin-top:4px}
  .menu-alt{
    flex:0 0 100%;order:3;position:static;min-width:0;border:0;box-shadow:none;
    background:transparent;padding:0 0 14px;opacity:1;visibility:visible;transform:none;
    display:none;
  }
  .menu-grup.acik .menu-alt{display:block}
  .menu-alt a{
    padding:11px 0 11px 18px;font-family:var(--govde);font-size:15px;
    border-left:2px solid var(--cizgi);color:var(--soluk);
  }
  .menu-alt a:hover{background:transparent;color:var(--altin-koyu)}
  /* mobilde iki kolon tek kolona düşer */
  .menu-alt--genis{display:block;min-width:0;padding:0 0 14px;gap:0}
  .menu-alt__kolon{padding:0}
  .menu-alt__kolon + .menu-alt__kolon{border-left:0;margin-top:14px}
  .menu-alt__bas{margin:0 0 4px;padding:0}
  .menu-alt__bas a{
    display:block;padding:6px 0 6px 18px;border-left:2px solid var(--altin);
    font-size:10.5px;letter-spacing:.18em;
  }
  .menu-alt--genis a{padding:11px 0 11px 18px;font-size:15px}

  .ust-serit{font-size:12.5px}
  .ust-serit__ic{justify-content:space-between;gap:10px;min-height:36px}
  .ust-serit__saat{display:none}
  .tarama{grid-template-columns:1fr;gap:26px}
  .vaka{grid-template-columns:1fr;gap:30px}
  .vaka__gorsel{max-width:620px}
  .video-grid{grid-template-columns:1fr 1fr;max-width:620px}
  .klinik-galeri{grid-template-columns:1fr 1fr}
  .klinik-galeri figure,.klinik-galeri .kg-genis{grid-column:span 1}
  .klinik-galeri .kg-genis img{aspect-ratio:4/3}
  .hizmet-satir{grid-template-columns:56px 1fr;gap:6px 14px}
  .hizmet-satir .not{grid-column:2;text-align:left}
  .satir-ic{grid-template-columns:1fr;gap:18px}
  .satir-ic figure{max-width:400px}
  .adimlar{grid-template-columns:1fr;gap:28px}
  .adimlar li{border-left:0;padding:0}
  .detay-gorsel{float:none;width:100%;margin:0 0 22px}
}

@media (max-width:620px){
  body{font-size:16px;padding-bottom:74px}
  section{padding:56px 0}
  .kapsa{width:min(100% - 30px,var(--kapsa))}

  /* --- üst şerit: tek satır, taşma yok --- */
  .ust-serit__ic{justify-content:center;font-size:12px;min-height:34px;gap:12px}
  .ust-serit__adres{display:none}
  .ust-serit__tel{letter-spacing:.06em}

  /* --- logo: kompakt --- */
  .marka{gap:9px;min-width:0}
  .marka__ikon{width:32px;height:34px;flex-shrink:0}
  .marka__yazi{min-width:0}
  .marka__yazi strong{font-size:20px;line-height:1.05}
  .marka__yazi b{font-size:8px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .marka__yazi em{font-size:9px;letter-spacing:.08em}
  .menu{padding-top:calc(60px + 20px);font-size:19px}
  .menu a{font-size:19px;padding:13px 0}

  .hero__ic{padding:48px 0 56px;gap:40px}
  .hero h1{font-size:clamp(2.1rem,8.5vw,2.9rem)}
  .hero__ozet{font-size:16.5px}
  .hero__butonlar{gap:10px;margin:26px 0 24px}
  .hero__butonlar .btn{width:100%}
  .hero__rozet{gap:8px 18px;font-size:12px}
  .guven__ic{grid-template-columns:1fr}
  .guven__ic>div{border-right:0;padding:26px 0}
  .blog-grid,.yorum-grid,.form__satir,.alt__ic,.klinik-galeri{grid-template-columns:1fr}
  .video-grid{grid-template-columns:1fr;max-width:420px}
  .kvkk-serit__ic{gap:14px;padding:16px 0}
  .kvkk-serit p{font-size:13.5px}
  .kvkk-serit .btn{width:100%}
  .blog-grid article,.blog-grid article:nth-child(3n),.blog-grid article:nth-child(2n),.blog-grid article:nth-child(2n+1){border-right:0;padding:26px 0}
  .kunye>div,.iletisim__liste li{grid-template-columns:1fr;gap:4px}
  .hero__gorsel figcaption{left:0;bottom:14px;padding:12px 18px;font-size:19px}
  .hakkimizda__gorsel figcaption{left:0;bottom:0;padding:12px 18px;font-size:18px}
  .hero__gorsel::before{inset:16px -16px -16px 16px}
  .btn{padding:14px 22px;font-size:12.5px}
  /* --- mobilde taşmaları önle --- */
  .karsilastir{aspect-ratio:1/1}
  .vaka__ici{grid-template-columns:1fr;gap:14px}
  .vaka__metin{min-width:0}
  .orto-sekme button{font-size:13px;padding:9px 14px}
  .orto-panel h3{font-size:1.45rem}
  .iletisim__harita iframe{height:320px}
  .akordeon summary{padding-right:44px}
  .akordeon summary h3{font-size:1.1rem}
  .galeri-ara{font-size:11px;letter-spacing:.18em}
  table,pre{max-width:100%;overflow-x:auto;display:block}
  /* mobilde yüzen butonlar zarif bir alt çubuğa dönüşür */
  .yuzen{
    left:0;right:0;bottom:0;top:auto;display:grid;grid-template-columns:repeat(3,1fr);
    gap:0;justify-items:stretch;
    background:rgba(253,251,247,.94);backdrop-filter:blur(14px);
    border-top:1px solid var(--cizgi);box-shadow:0 -6px 24px rgba(14,78,74,.07);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .yuzen a{
    height:auto;min-width:0;border-radius:14px;box-shadow:none;background:transparent !important;
    grid-auto-flow:row;justify-items:center;gap:5px;padding:8px 4px 7px !important;
    color:var(--soluk);position:relative;
  }
  .yuzen a::before{
    content:"";position:absolute;left:50%;top:1px;width:34px;height:34px;margin-left:-17px;
    border-radius:50%;transition:var(--gecis);
  }
  .yuzen__wp::before{background:rgba(37,211,102,.14)}
  .yuzen__tel::before{background:rgba(14,78,74,.10)}
  .yuzen__yol::before{background:rgba(199,154,60,.16)}
  .yuzen a svg{width:20px;height:20px;position:relative;z-index:1}
  .yuzen__wp svg{color:#1FA855}
  .yuzen__tel svg{color:var(--petrol)}
  .yuzen__yol svg{color:var(--altin-koyu)}
  .yuzen a span{
    max-width:none;opacity:1;margin:0 !important;font-size:10px;font-weight:500;
    letter-spacing:.1em;text-transform:uppercase;color:var(--soluk);position:relative;z-index:1;
  }
  .yuzen a:hover{transform:none}
  .yuzen a:active::before{transform:scale(1.12)}
  .yuzen a:active span{color:var(--petrol)}
  /* mobilde şerit alt çubuğun üstünde durur; butonlar yerinde kalır */
  .kvkk-serit{bottom:calc(74px + env(safe-area-inset-bottom))}
  .kvkk-acik .yuzen{bottom:0}
  .akan__ic{font-size:19px}
  .og-kutu{padding:28px 22px}
  .hizmet-satir--one{padding-left:14px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .gorunur{opacity:1;transform:none}
  .akan__ic{animation:none}
}

@media print{
  .ust,.ust-serit,.yuzen,.akan,.onizleme,.iletisim__harita,.menu-btn,.hero__butonlar{display:none}
  body{background:#fff;color:#000}
  .akordeon details{display:block}
  .orto-panel article[hidden]{display:block !important}
}

/* ---------- Yeni vaka blokları ----------
   Ortodonti detay sayfaları .yazi (açık fildişi zemin) içinde üretiliyor,
   bu yüzden .vaka__ozet / .vaka__notlar varsayılan renkleriyle doğru görünür. */

/* Ortodonti yazı sayfasındaki vaka blokları — galerideki bileşenlerin aynısı.
   Solda görseller, sağda açıklama. Yazı sayfasının gövde sütunu ~816px
   (yanında 320px kenar çubuğu var), bu yüzden metin sütununu dar tutup
   kalan genişliği görsellere veriyoruz — görseller olabildiğince büyük kalsın. */
.vaka--yazi{grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:26px}
.vaka--yazi .vaka__ici{margin-top:0;gap:14px}
.vaka--yazi .vaka__ozet{margin-top:0}
.vaka--yazi .vaka__ozet dd{font-size:18px}
.vaka--yazi .vaka__notlar{font-size:12.5px}
@media (max-width:900px){
  .vaka--yazi{grid-template-columns:1fr;gap:26px}
}
/* .orto-vaka__not eski ızgara için negatif üst boşlukla yazılmıştı (-18px).
   Burada ızgaranın hemen altında durduğu için metni son görsel satırının
   üzerine çekiyor ve üst üste binmeye yol açıyordu. */
.vaka--yazi .orto-vaka__not{margin:16px 0 0}

/* Kırpmayan vaka ızgarası. Galerinin .vaka__ici kuralı görselleri 16:10'a
   kırpar; bu vakaların görselleri dikey ya da "üstte öncesi / altta sonrası"
   biçiminde kurgulu olduğu için kırpma karşılaştırmayı bozuyor. */
.vaka__ici--tam img{
  aspect-ratio:auto;height:auto;object-fit:contain;
  background:#fff;border:1px solid var(--cizgi)
}

/* Sürüklemeli karşılaştırma kullanmayan vaka: ikili ızgara tek başına duruyor,
   slider'ın altında kalmadığı için üst boşluğa gerek yok. */
.vaka--sabit .vaka__ici{margin-top:0}
/* Üst çene okluzal kareleri 16:10 kutuya kırpılıyor. Varsayılan ortadan kırpma
   çenenin ön tarafındaki dişleri kesiyordu; kırpmayı alta kaydırıyoruz. */
.vaka--sabit .vaka__ici img{object-position:center top}

/* Eşit yükseklik. Öncesi/sonrası kareleri farklı en-boy oranındaysa (ör. vaka 4:
   1650x991 ve 1297x984) aynı sütun genişliğinde farklı yükseklikte görünürler.
   İkisine ortak bir kutu oranı verip görselleri kutuyu dolduracak kadar
   ölçekliyoruz: boşluk/beyaz bant kalmıyor, taşan kenarlar kırpılıyor
   (geniş karede yanlardan ~%5, dar karede üst-alttan ~%6). object-position,
   üstteki --sabit kuralını ezmek için aynı özgüllükte yazıldı. */
.vaka--sabit .vaka__ici--esit img{
  aspect-ratio:3/2;object-fit:cover;object-position:center
}

/* İki görselli vaka ızgarası: kartlar gereğinden fazla yayılmasın */
.orto-vaka--ikili{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:760px}
.vaka__ozet--satir{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:22px}

/* ---------- Yorum şeridi (yatay kaydırma) ----------
   Dosyanın SONUNDA duruyor: yukarıdaki medya sorguları .yorum-grid için
   grid-template-columns tanımlıyor, buradaki flex onları geçersiz kılsın. */
.yorum-serit-sar{position:relative}
.yorum-grid--serit{
  display:flex;gap:26px;
  /* overflow-y ACIKCA hidden: CSS'te tek eksene auto verilince diger eksen
     "visible" olmaktan cikip auto'ya donusuyor ve istenmeyen bir dikey
     scrollbar cikiyor. */
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding:0;
  -webkit-overflow-scrolling:touch;
  /* Scrollbar gorunmez; kaydirma parmakla, oklarla ve klavyeyle yapilir. */
  scrollbar-width:none;-ms-overflow-style:none;
}
.yorum-grid--serit::-webkit-scrollbar{width:0;height:0;display:none}
.yorum-grid--serit>blockquote{flex:0 0 clamp(272px,31%,352px);scroll-snap-align:start}
.yorum-grid--serit:focus-visible{outline:2px solid var(--altin);outline-offset:4px}

.yorum-ok{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;padding:0;
  border:1px solid var(--cizgi);background:var(--fildisi);color:var(--petrol);
  font-family:var(--baslik);font-size:30px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 14px rgba(14,78,74,.14);
  transition:background .2s,color .2s,border-color .2s
}
.yorum-ok:hover{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.yorum-ok[hidden]{display:none}
.yorum-ok--geri{left:-14px}
.yorum-ok--ileri{right:-14px}

@media (max-width:900px){
  .yorum-ok{display:none}
}
@media (max-width:700px){
  .yorum-grid--serit>blockquote{flex-basis:min(84%,340px)}
}