/* =====================================================================
   Artı Estetik — style.css (ortak katman)
   Sıra: fontlar → token'lar → taban (kaydırma çubuğu dahil) → düzen → ortak bileşenler
   (ikon + paylaşılan hizmet ikonu .svc-ico, buton, bağlantı, hale, header, açılır menü, dil anahtarı,
   mobil menü paneli, mobil alt çubuk, footer, WhatsApp düğmesi). Bölüm/sayfa bileşenleri: pages.css · hareket: motion.css
   ===================================================================== */

/* ---------- 1. Fontlar (yerel, design_library → /assets/fonts/) ---------- */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/nunito-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/nunito-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Token'lar (arayuzcu_arayuz.md + animatronik_animasyon.md) ---------- */
:root {
  color-scheme: light;

  --c-primary: #002F73;
  --c-primary-hover: #0A3E8C;
  --c-primary-pressed: #00245A;
  --c-accent: #3975D0;
  --c-accent-soft: #E3ECFA;
  --c-accent-soft-2: #D9E5F8;
  --c-bg: #F5F8FC;
  --c-bg-ice: #ECF2FA;
  --c-surface: #FFFFFF;
  --c-surface-float: rgba(255, 255, 255, .94); /* tur 5: .82 → .94 */
  --c-ink: #0C1F3A;
  --c-ink-2: #46576F;
  --c-line: #E2E9F3;
  --c-line-strong: #7F8FA6;
  --c-logo-gray: #8B8B8B;
  --c-silver: #C8D0DB;
  --c-band-light: #1F5BB5;
  --c-on-dark: #FFFFFF;
  --c-on-dark-2: rgba(255, 255, 255, .82);
  --c-error: #B42318;
  --c-success: #1E7A4C;
  --c-focus: #3975D0;
  --c-focus-on-dark: #FFFFFF;
  --c-star: #F5A623;
  --c-star-edge: #B86E00;
  --c-star-empty: #D5DDE8;
  --c-hero-top: #EEF4FC;
  --c-hero-mid: #E4EEFA;
  --c-hero-bottom: #E9F1FB;
  --c-sv-top: #E0EDF5;
  --c-sv-bottom: #E8F3FC;
  --c-bridge-mid: #E5EFF8;      /* tur 5: puan bölümü köprü gradyanının orta durağı (G6) */
  --c-stat-line: #C5D4E8;       /* tur 5: hero istatistik satırının opak saç çizgisi */
  --c-scroll-thumb: #4F7FC8;    /* tur 5: kaydırma çubuğu */
  --c-scroll-thumb-hover: #3975D0;
  --c-scroll-thumb-active: #2C5FAE;
  --c-scroll-track: transparent;

  --shadow-1: 0 1px 2px rgba(12, 31, 58, .05), 0 6px 16px -4px rgba(0, 47, 115, .07), 0 18px 36px -12px rgba(0, 47, 115, .09);
  --shadow-hover: 0 2px 4px rgba(12, 31, 58, .05), 0 10px 24px -8px rgba(0, 47, 115, .11), 0 24px 44px -18px rgba(0, 47, 115, .12);
  --shadow-2: 0 2px 6px rgba(12, 31, 58, .06), 0 14px 28px -8px rgba(0, 47, 115, .14), 0 36px 72px -20px rgba(0, 47, 115, .20);
  --shadow-header: 0 1px 0 #E2E9F3, 0 10px 28px -14px rgba(0, 47, 115, .20);
  --shadow-btn: 0 1px 2px rgba(12, 31, 58, .14), 0 8px 18px -6px rgba(0, 47, 115, .40), inset 0 1px 0 rgba(255, 255, 255, .16);
  --shadow-btn-pressed: 0 1px 2px rgba(12, 31, 58, .16), inset 0 1px 0 rgba(255, 255, 255, .10);
  --shadow-btn-light: 0 1px 2px rgba(12, 31, 58, .30), 0 10px 24px -8px rgba(12, 31, 58, .55);
  --hi-inset: inset 0 1px 0 rgba(255, 255, 255, .9);

  --z-ambient: 1;
  --z-grain: 2;
  --z-visual: 3;
  --z-content: 4;
  --z-bar: 40;
  --z-fab: 45;
  --z-header: 50;
  --z-dropdown: 60;
  --z-toast: 80;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(4rem, 2.5rem + 5vw, 7.5rem);
  --section-y-sm: clamp(3rem, 2rem + 3vw, 4.5rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --grid-gap: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  --container: 1160px;
  --container-wide: 1280px;
  --container-header: 1360px;
  --measure: 65ch;
  --header-h: 64px;
  --hero-curve: clamp(28px, 5vw, 72px);
  --trust-overlap: clamp(20px, 3vw, 44px);
  --float-reserve: 0px;

  --font-head: "Nunito", ui-rounded, system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  --fs-display-sm: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.875rem;
  --fs-button: 1rem;
  --fs-stat: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-score: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  --fs-trust-title: clamp(1.5rem, 1.2rem + 1vw, 2rem); /* tur 5: puan bölümü başlığı */
  --fs-monogram: 3rem;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-draw: cubic-bezier(.65, 0, .35, 1);
  --ease-pop: cubic-bezier(.34, 1.3, .64, 1);
  --ease-drift: cubic-bezier(.45, 0, .55, 1);
  --d-fast: 160ms;
  --d-base: 240ms;
  --d-slow: 640ms;
  --d-card: 220ms;
  --rv-step: 70ms;
  --tm: 1; /* süre çarpanı; düşük performans profilinde .7 */
}
[data-perf="low"] { --tm: .7; }
@media (min-width: 768px) { :root { --header-h: 72px; } }
@media (min-width: 1200px) { :root { --header-h: 80px; } }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { :root { --header-h: 60px; } }

/* Yüzen öğeler (alt çubuk / WhatsApp düğmesi) için footer alt rezervi — her sayfada, JS'siz de aynı (Arayüzcü tur 4) */
html.has-bar { --float-reserve: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { html.has-bar { --float-reserve: 96px; } }

/* ---------- 3. Taban ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* Kaydırma çubuğu (tur 5): gizlenmez; ince, marka mavisi tutamaç, saydam iz. Kaydırma kabı oluşturmaz → sticky etkilenmez */
  scrollbar-width: thin;
  scrollbar-color: var(--c-scroll-thumb) var(--c-scroll-track);
  scrollbar-gutter: stable;
}
/* scrollbar-width miras alınmaz: iç kaydırmalı öğeler tek tek (renk kökten miras) */
.menu-panel, .fallback__text, textarea { scrollbar-width: thin; }
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background-color: var(--c-scroll-thumb); border: 1px solid transparent; background-clip: padding-box; border-radius: 999px; min-height: 40px; }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--c-scroll-thumb-hover); }
  ::-webkit-scrollbar-thumb:active { background-color: var(--c-scroll-thumb-active); }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  ::-webkit-scrollbar-corner { background: transparent; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 767px) {
  html { scroll-padding-bottom: var(--float-reserve); }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[hidden] { display: none !important; }
img, svg, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); color: var(--c-ink); text-wrap: balance; }
h1 { font-size: var(--fs-display-sm); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }
h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
p, ul, ol, dl, dd, figure, address { margin: 0; }
p { text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
address { font-style: normal; }
a { color: var(--c-primary); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button, summary, label, input { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
::selection { background: #E3ECFA; color: #0C1F3A; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
/* overflow-x: clip kaydırma kabı oluşturmaz → ScrollVideo sahnesinin sticky'si bozulmaz. Asla hidden/auto yapılmaz. */
main { display: block; overflow-x: clip; }
@supports not (overflow: clip) { html { overflow-x: hidden; } }
a[href^="tel:"], [data-fact="telefon"] { white-space: nowrap; }

/* ---------- 4. Düzen ve yardımcılar ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container-wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.bg-base { background: var(--c-bg); }
.bg-ice { background: var(--c-bg-ice); }
.bg-white { background: var(--c-surface); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -120px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: var(--r-pill); background: var(--c-primary); color: #fff;
  font-weight: 600; text-decoration: none; box-shadow: var(--shadow-2);
}
.skip-link:focus { top: 12px; }
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }
.js .no-js-only { display: none !important; }
.no-js .js-only { display: none !important; }
.h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); font-weight: 500; line-height: 1.6; color: var(--c-ink-2); }
.lead--ink { color: var(--c-ink); }
.prose > * + * { margin-top: 1em; }
.h2-arc {
  display: block; width: 40px; height: 8px; margin-top: 14px; overflow: visible;
  fill: none; stroke: var(--c-accent); stroke-opacity: .35; stroke-width: 1.75; stroke-linecap: round;
}
.blob { display: block; width: 100%; height: auto; overflow: visible; }
.deco-arc { fill: none; stroke-width: 1.75; stroke-linecap: round; overflow: visible; }

/* İkon (Tabler, tek set; <svg class="i"><use href="/assets/icons.svg#ad"/></svg>) */
.i { width: 20px; height: 20px; flex: none; stroke-width: 1.75; }

/* Proje sahibinin 8 hizmet ikonu — sitenin her yerinde tek paylaşılan bileşen (tur 5).
   <span class="svc-ico svc-ico--<ad>" aria-hidden="true"></span>; vektör (SVG) CSS mask, renk = bağlamın color'u.
   Boyut tek değişkenden (--svc-s); bağlam kuralları bileşenlerin yanında.
   Tur 8: 256² PNG alfa maskesi 20–44 px'te küçültülünce bulanıklaşıyordu → SVG maske (her boyutta keskin).
   ≤24 px kullanımlar `svc-ico--fine` taşır: aynı yolun 4 birim konturla kalınlaştırılmış SVG'si (-sm.svg) — eski üçlü maske hilesinin yerine. */
.svc-ico {
  --svc-s: 28px;
  display: block; flex: none; width: var(--svc-s); height: var(--svc-s);
  background-color: currentColor;
  -webkit-mask-image: var(--ico); mask-image: var(--ico);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: color 160ms var(--ease-soft);
}
.svc-ico--implant { --ico: url("/assets/icons-services/implant.svg"); --ico-sm: url("/assets/icons-services/implant-sm.svg"); }
.svc-ico--tooth-extraction { --ico: url("/assets/icons-services/tooth-extraction.svg"); --ico-sm: url("/assets/icons-services/tooth-extraction-sm.svg"); }
.svc-ico--tooth-filling { --ico: url("/assets/icons-services/tooth-filling.svg"); --ico-sm: url("/assets/icons-services/tooth-filling-sm.svg"); }
.svc-ico--tooth-whitening { --ico: url("/assets/icons-services/tooth-whitening.svg"); --ico-sm: url("/assets/icons-services/tooth-whitening-sm.svg"); }
.svc-ico--root-canal { --ico: url("/assets/icons-services/root-canal.svg"); --ico-sm: url("/assets/icons-services/root-canal-sm.svg"); }
.svc-ico--denture { --ico: url("/assets/icons-services/denture.svg"); --ico-sm: url("/assets/icons-services/denture-sm.svg"); }
.svc-ico--pediatric-dentistry { --ico: url("/assets/icons-services/pediatric-dentistry.svg"); --ico-sm: url("/assets/icons-services/pediatric-dentistry-sm.svg"); }
.svc-ico--braces { --ico: url("/assets/icons-services/braces.svg"); --ico-sm: url("/assets/icons-services/braces-sm.svg"); }
.svc-ico--fine { -webkit-mask-image: var(--ico-sm); mask-image: var(--ico-sm); } /* ≤24 px: kalınlaştırılmış vektör varyantı */
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .svc-ico { background: var(--ico) center / contain no-repeat; } /* maskesiz tarayıcı: siyah ikon, kabul edilen bozulma */
}

/* Hale (ikon zemini) */
.halo {
  display: grid; place-items: center; flex: none;
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: #E3ECFA; color: var(--c-primary);
}
.halo .i { width: 28px; height: 28px; }
.halo--48 { width: 48px; height: 48px; }
.halo--48 .i { width: 24px; height: 24px; }
.halo--40 { width: 40px; height: 40px; border-radius: 50%; }
.halo--40 .i { width: 20px; height: 20px; }
.halo--64 { width: 64px; height: 64px; }
.halo--64 .i { width: 30px; height: 30px; }
.halo--72 { width: 72px; height: 72px; }
.halo--72 .i { width: 32px; height: 32px; }

/* ---------- 5. Butonlar ve bağlantılar ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 52px; padding: 0 26px;
  border: 0; border-radius: var(--r-pill);
  font: 600 var(--fs-button)/1 var(--font-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--ease-soft), border-color 160ms var(--ease-soft), transform 200ms var(--ease-soft);
}
.btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-soft);
}
.btn .i { width: 20px; height: 20px; }
.btn--lg { height: 56px; font-size: 1.0625rem; }
.btn--icon-end { padding: 0 8px 0 28px; }
.btn__icon {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  transition: transform 240ms var(--ease-out);
}
.btn--primary { background: var(--c-primary); color: #fff; box-shadow: var(--shadow-btn); }
.btn--primary::after { box-shadow: 0 2px 4px rgba(12, 31, 58, .14), 0 14px 26px -8px rgba(0, 47, 115, .46); }
.btn--primary:focus-visible { background: var(--c-primary-hover); }
.btn--primary:active { background: var(--c-primary-pressed); box-shadow: var(--shadow-btn-pressed); }
.btn--light { background: #fff; color: var(--c-primary); box-shadow: var(--shadow-btn-light); }
.btn--light .btn__icon { background: #E3ECFA; }
.btn--light::after { box-shadow: 0 2px 4px rgba(12, 31, 58, .32), 0 16px 30px -8px rgba(12, 31, 58, .62); }
.btn--light:focus-visible { outline-color: var(--c-focus-on-dark); background: #E3ECFA; }
.btn--secondary {
  height: 48px; padding: 0 22px;
  background: #fff; color: var(--c-primary); border: 1.5px solid var(--c-primary);
}
.btn--secondary::after { box-shadow: var(--shadow-1); }
.btn--secondary:focus-visible { background: #E3ECFA; }
.btn--secondary:active { background: #D6E3F7; }
.btn:focus-visible::after { opacity: 1; }
.btn:active::after { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--c-primary-hover); }
  .btn--light:hover, .btn--secondary:hover { background: #E3ECFA; }
  .btn--secondary:active { background: #D6E3F7; }
  .btn:hover::after { opacity: 1; }
  .btn:active::after { opacity: 0; }
}

.text-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--c-primary); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  text-decoration-color: rgba(0, 47, 115, .35);
  border-radius: var(--r-sm);
  transition: text-decoration-color 160ms var(--ease-soft);
}
.text-link .i { width: 18px; height: 18px; flex: none; align-self: center; transition: transform 200ms var(--ease-out); }
.text-link:focus-visible { text-decoration-color: var(--c-primary); }
@media (hover: hover) and (pointer: fine) {
  .text-link:hover { text-decoration-color: var(--c-primary); }
}
.ln {
  color: var(--c-primary);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(0, 47, 115, .35);
  border-radius: 4px;
  transition: text-decoration-color 160ms var(--ease-soft);
}
.ln:focus-visible { text-decoration-thickness: 2px; text-decoration-color: var(--c-primary); }
@media (hover: hover) and (pointer: fine) {
  .ln:hover { text-decoration-thickness: 2px; text-decoration-color: var(--c-primary); }
}

/* Tüm kart tıklanır: tek odak durağı */
.stretched { color: inherit; text-decoration: none; }
.stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }

/* ---------- 6. Header (G-1) ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h); }
.site-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--c-surface-float);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--shadow-header);
  opacity: 0; transition: opacity 220ms var(--ease-soft);
}
/* Mobil panel açıkken header her zaman kaydırılmış görünümünde (panel opak bir satıra asılır) */
.site-header.is-scrolled::before, .site-header.is-menu-open::before { opacity: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before { background: #fff; }
}
/* Mobil / dokunmatik / <1200 (menü-açık dahil): .96, blur yok (Mobilci G-1) */
@media (hover: none), (pointer: coarse), (max-width: 1199px) {
  .site-header::before {
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (hover: none), (pointer: coarse) { .site-header::before { transition-duration: 160ms; } }
.no-js .site-header::before {
  opacity: 1; background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

.header__row { position: relative; height: 100%; display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; }
.brand {
  display: flex; align-items: center; gap: 14px;
  flex: 0 1 auto; min-width: 0; padding-block: 10px;
  color: var(--c-ink); text-decoration: none; border-radius: var(--r-sm);
}
.brand__logo { width: auto; height: 40px; flex: none; }
.brand__text { display: flex; flex-direction: column; min-width: 0; text-wrap: balance; }
.brand__l1 { font: 800 18px/1.1 var(--font-head); color: var(--c-ink); transition: color 160ms var(--ease-soft); }
.brand__l2 { display: none; margin-top: 3px; font: 500 13px/1.3 var(--font-body); color: var(--c-ink-2); }
@media (hover: hover) and (pointer: fine) { .brand:hover .brand__l1 { color: var(--c-primary); } }
@media (max-width: 399px) { .header__row { gap: 8px; } }
@media (max-width: 359px) { .brand__l1 { font-size: 17px; } }
@media (max-width: 340px) {
  .site-header .brand__text {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (min-width: 768px) {
  .header__row { gap: 24px; }
  .brand { gap: 16px; padding-block: 12px; }
  .brand__logo { height: 48px; }
  .brand__l1 { font-size: 20px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { .brand__logo { height: 40px; width: auto; } }
@media (min-width: 1280px) { .header__row { gap: 20px; } }
@media (min-width: 1440px) {
  .header__row.container-wide { width: min(100% - 2 * var(--gutter), var(--container-header)); }
  .brand__l2 { display: block; }
}

.primary-nav { display: none; }
.primary-nav__list { display: flex; align-items: center; gap: 4px; }
.primary-nav__item { position: relative; }
.primary-nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 10px;
  border: 0; background: none; border-radius: var(--r-sm);
  font: 600 15px/1 var(--font-body); color: var(--c-ink); text-decoration: none; white-space: nowrap;
  transition: color 160ms var(--ease-soft);
}
.primary-nav__link::after {
  content: ""; position: absolute; left: 10px; bottom: 6px;
  width: 18px; height: 2px; border-radius: 2px; background: var(--c-accent);
  opacity: 0; transform: scaleX(.4); transform-origin: left;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.primary-nav__link[aria-current="page"]::after,
.primary-nav__link[data-active]::after { opacity: 1; transform: none; }
.primary-nav__trigger .i { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.primary-nav__trigger[aria-expanded="true"] .i { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .primary-nav__link:hover { color: var(--c-primary); }
  .primary-nav__link:hover::after { opacity: .6; transform: none; }
  .primary-nav__link[aria-current="page"]:hover::after,
  .primary-nav__link[data-active]:hover::after { opacity: 1; }
}
@media (min-width: 1280px) { .primary-nav { display: block; margin-left: auto; } }
@media (min-width: 1440px) {
  .primary-nav__link { padding: 0 12px; font-size: 16px; }
  .primary-nav__link::after { left: 12px; }
}

/* G-2 Açılır menü (disclosure) */
.dropdown {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: var(--z-dropdown);
  width: 560px; padding: 12px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); transform-origin: top left;
}
.dropdown__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.dropdown__item, .dropdown__all {
  display: flex; align-items: center; gap: 12px;
  border-radius: var(--r-md); color: var(--c-ink); text-decoration: none;
  transition: background-color 160ms var(--ease-soft);
}
.dropdown__item { min-height: 52px; padding: 10px 12px; font: 600 15px/1.3 var(--font-body); }
.dropdown__item[aria-current="page"] { background: var(--c-bg); color: var(--c-primary); }
/* tur 5: 36 px hale (12 px köşe) + sahibin ikonu 22 px (.svc-ico--fine) */
.dropdown__halo {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 12px; background: #E3ECFA; color: var(--c-primary);
}
.dropdown__halo .svc-ico { --svc-s: 22px; }
.dropdown__foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--c-line); }
.dropdown__all { min-height: 44px; padding: 8px 12px; gap: 8px; font: 600 15px/1.3 var(--font-body); color: var(--c-primary); }
.dropdown__all .i { width: 18px; height: 18px; }
/* tur 8 (4.5): Ekibimiz açılır menüsü — aynı bileşen; tek sütun, ikon yerine mevcut hale içinde hekim monogramı */
.dropdown--team { width: 340px; }
.dropdown__grid--single { grid-template-columns: 1fr; }
.dropdown__halo--mono { font: 700 13px/1 var(--font-head); letter-spacing: .02em; }
@media (hover: hover) and (pointer: fine) {
  .dropdown__item:hover, .dropdown__all:hover { background: var(--c-bg); }
}

/* G-3 Dil anahtarı — her genişlikte header'da, mobil panelin dışında (proje sahibi kararı) */
.lang {
  display: inline-flex; align-items: center; flex: none;
  padding: 4px; border: 1px solid var(--c-line); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .7);
}
.lang__opt {
  position: relative;
  display: inline-grid; place-items: center;
  min-width: 44px; height: 40px; padding: 0 10px;
  border-radius: var(--r-pill);
  font: 600 14px/1 var(--font-body); color: var(--c-ink); text-decoration: none;
  transition: background-color 160ms var(--ease-soft);
}
.lang__opt::before { content: ""; position: absolute; inset: -2px 0; } /* 40 px parça → ≥44 px dokunma hedefi */
.lang__opt[aria-current="true"] { background: var(--c-primary); color: #fff; }
.lang__sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (hover: hover) and (pointer: fine) { .lang__opt:not([aria-current="true"]):hover { background: #E3ECFA; } }
@media (hover: none), (pointer: coarse) { .lang__opt:not([aria-current="true"]):active { background: #E3ECFA; } }
@media (max-width: 1279px) { .lang { margin-left: auto; } }
@media (max-width: 399px) {
  .lang__opt { min-width: 40px; }
  .lang__opt::before { inset: -2px; }
}
@media (min-width: 768px) {
  .lang__opt { height: 36px; }
  .lang__opt::before { inset: -4px 0; }
}
@media (min-width: 1200px) and (pointer: coarse) { .lang__opt { height: 44px; } }

/* Header CTA yuvası (sabit genişlik → kayma yok) */
.header-cta-slot { display: none; min-width: 180px; justify-content: flex-end; }
html[lang="en"] .header-cta-slot { min-width: 260px; }
@media (min-width: 768px) { .header-cta-slot { display: flex; } }

.menu-toggle {
  position: relative;
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; padding: 0; margin-right: -6px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-ink);
}
.menu-toggle .i { grid-area: 1 / 1; width: 24px; height: 24px; }
.menu-toggle__close { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { opacity: 1; }
.no-js .menu-toggle { display: none; }
@media (min-width: 1280px) { .menu-toggle { display: none; } }
@media (hover: none), (pointer: coarse) { .menu-toggle:active { background: #E3ECFA; } }

/* JS kapalıyken <1280 gezinme: sarmalanan satır (Mobilci G-1 Çözüm 5; tur 4 eşiği 1280) */
@media (max-width: 1279px) {
  .no-js .site-header { position: relative; height: auto; }
  .no-js .header__row { flex-wrap: wrap; height: auto; row-gap: 0; padding-block: 4px 8px; }
  .no-js .primary-nav { display: block; order: 10; width: 100%; }
  .no-js .primary-nav__list { flex-wrap: wrap; gap: 0 4px; }
  .no-js .primary-nav__link { padding: 0 10px; }
}

/* ---------- 7. Mobil menü — header altında kompakt panel (G-4, <1280; modal değil) ---------- */
.menu-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-dropdown);
  width: min(360px, 100%);
  max-height: calc(100vh - var(--header-h) - 24px);
  max-height: calc(100svh - var(--header-h) - 24px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  transform-origin: top right;
}
@media (max-width: 767px) {
  .menu-panel {
    max-height: calc(100vh - var(--header-h) - var(--float-reserve));
    max-height: calc(100svh - var(--header-h) - var(--float-reserve));
  }
}
@media (max-width: 479px) { .menu-panel { width: 100%; } }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { .menu-panel { top: calc(100% + 4px); } }
@media (min-width: 1280px) { .menu-panel { display: none !important; } }
.menu-panel__list { margin: 0; padding: 0; list-style: none; }
.menu-panel__list > li + li { border-top: 1px solid var(--c-line); }
.menu-panel__link {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px; padding: 0 12px;
  border: 0; border-radius: var(--r-md); background: none; text-align: left;
  font: 600 17px/1.3 var(--font-body); color: var(--c-ink); text-decoration: none;
  transition: background-color 160ms var(--ease-soft), color 160ms var(--ease-soft);
}
.menu-panel__link[aria-current="page"], .menu-panel__link[data-active] { color: var(--c-primary); }
.menu-panel__link[aria-current="page"]::before, .menu-panel__link[data-active]::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 20px; margin-top: -10px;
  border-radius: 2px; background: var(--c-accent);
}
.menu-panel__link .i { width: 20px; height: 20px; color: var(--c-primary); transition: transform 200ms var(--ease-out); }
.menu-panel__link[aria-expanded="true"] .i { transform: rotate(180deg); }
.menu-panel__sub { margin: 0; padding: 0 0 8px; list-style: none; }
.menu-panel__sublink {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px 0 16px;
  border-radius: var(--r-md);
  font: 600 15px/1.3 var(--font-body); color: var(--c-ink); text-decoration: none;
  transition: background-color 160ms var(--ease-soft);
}
.menu-panel__sublink .i { width: 20px; height: 20px; color: var(--c-primary); }
/* tur 5: halesiz sahibin ikonu 22 px (.svc-ico--fine), primary */
.menu-panel__sublink .svc-ico { --svc-s: 22px; color: var(--c-primary); }
.menu-panel__sublink .nav-mono { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 8px; background: #E3ECFA; color: var(--c-primary); font: 700 10px/1 var(--font-head); letter-spacing: .02em; } /* tur 8 (4.5): hekim monogramı */
.menu-panel__sublink--all, .menu-panel__sublink[aria-current="page"] { color: var(--c-primary); }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { .menu-panel__link { min-height: 44px; } }
@media (hover: hover) and (pointer: fine) {
  .menu-panel__link:hover, .menu-panel__sublink:hover { background: var(--c-bg); }
}
@media (hover: none), (pointer: coarse) {
  .menu-panel__link:active, .menu-panel__sublink:active { background: #E3ECFA; }
}

/* ---------- 8. Mobil alt çubuk (G-5; <768): Ara | WhatsApp | Randevu — randevu sayfalarında Ara | WhatsApp ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; margin-inline: auto;
  width: min(480px, calc(100% - 24px));
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: var(--z-bar);
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 6px;
  padding: 6px; border-radius: var(--r-pill);
  background: var(--c-surface-float);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .mobile-bar { background: #fff; } }
@media (hover: none), (pointer: coarse) {
  .mobile-bar { background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (min-width: 768px) { .mobile-bar { display: none; } }
.mobile-bar__item {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 48px; padding: 0 12px; border-radius: var(--r-pill);
  background: #E3ECFA; color: var(--c-ink);
  font: 600 14px/1 var(--font-body); text-decoration: none; white-space: nowrap;
}
.mobile-bar__item .i { color: var(--c-primary); }
.mobile-bar__cta {
  height: 48px; min-width: 0; padding: 0 12px; gap: 6px;
  font: 600 15px/1.15 var(--font-body); white-space: normal; text-align: left; text-wrap: balance;
}
.mobile-bar__cta .i { width: 18px; height: 18px; }
.mobile-bar a:active { transform: translateY(1px); }
/* İki öğeli varyantlar: randevu sayfaları (gate'siz) ve JS kapalıyken (randevu öğesi gizli) — etiketler her genişlikte görünür */
.mobile-bar--no-cta, .no-js .mobile-bar { grid-template-columns: 1fr 1fr; }
.mobile-bar--no-cta .mobile-bar__item, .no-js .mobile-bar__item { padding: 0 14px; gap: 8px; }
.no-js .mobile-bar__cta { display: none; }
/* Dar ekran sığma kademeleri (Mobilci K1; yalnız üç öğeli varyant) */
@media (max-width: 379px) {
  .js .mobile-bar:not(.mobile-bar--no-cta) .mobile-bar__wa { width: 48px; padding: 0; }
  .js .mobile-bar:not(.mobile-bar--no-cta) .mobile-bar__wa .mobile-bar__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (max-width: 339px) {
  .js .mobile-bar:not(.mobile-bar--no-cta) .mobile-bar__call { width: 48px; padding: 0; }
  .js .mobile-bar:not(.mobile-bar--no-cta) .mobile-bar__call .mobile-bar__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .js .mobile-bar__cta { padding: 0 10px; gap: 6px; font-size: 14px; }
}

/* Randevu sayfaları: metin alanı odaktayken (klavye açık) çubuk / dokunmatik WhatsApp hapı gizlenir — JS gerekmez (Mobilci K4) */
@media (max-width: 767px) {
  html:has(.form-panel :is(input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]), textarea:not([readonly])):focus) .mobile-bar--no-cta { display: none; }
}
@media (min-width: 768px) and (pointer: coarse) {
  html:has(.form-panel :is(input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]), textarea:not([readonly])):focus) .wa-fab { visibility: hidden; }
}

/* ---------- 9. Footer (G-6) ---------- */
.site-footer {
  position: relative;
  padding: 40px 0 calc(24px + var(--float-reserve));
  background: radial-gradient(60rem 12rem at 50% 0%, rgba(227, 236, 250, .9), rgba(227, 236, 250, 0) 70%), #fff;
  border-top: 1px solid var(--c-line);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  font-size: var(--fs-small); line-height: 1.55; color: var(--c-ink-2);
}
.footer__grid { display: grid; gap: 24px; }
.f-id { display: flex; align-items: center; gap: 12px; }
.f-id__logo { width: auto; height: 56px; margin: 0; flex: none; }
.f-id__name { font: 700 16px/1.3 var(--font-head); color: var(--c-ink); }
.f-id__tagline { margin-top: 12px; }
.f-id__addr { margin-top: 8px; overflow-wrap: anywhere; }
.f-title { font: 700 15px/1.3 var(--font-head); color: var(--c-ink); letter-spacing: 0; }
.f-dl { margin-top: 8px; }
.f-dl > div { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; min-height: 44px; }
.f-dl dt { font-weight: 600; }
.f-dl dd { color: var(--c-ink); overflow-wrap: anywhere; }
.f-link { display: inline-flex; align-items: center; min-height: 44px; }
.f-copy { margin-top: 4px; }
.site-footer .text-link { font-size: var(--fs-small); }
@media (min-width: 768px) {
  .site-footer { padding: 48px 0 calc(32px + var(--float-reserve)); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 48px; }
  .f-col--legal { grid-column: 1 / -1; }
  .f-id { flex-direction: column; align-items: flex-start; gap: 14px; }
  .f-dl > div { min-height: 36px; }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr .8fr; gap: 48px; }
  .f-col--legal { grid-column: auto; }
}

/* ---------- 10. WhatsApp düğmesi (G-7; yalnızca ≥768, her sayfada; <768'de WhatsApp alt çubukta)
   Tur 5: ilk boyamada görünür ve sabit — giriş animasyonu, gecikme, scroll'a bağlı gizleme yok ---------- */
.wa-fab { display: none; }
@media (min-width: 768px) {
  .wa-fab {
    position: fixed; z-index: var(--z-fab);
    right: max(24px, calc(16px + env(safe-area-inset-right))); bottom: calc(24px + env(safe-area-inset-bottom));
    display: inline-flex; align-items: center; gap: 12px;
    height: 56px; padding: 0 22px 0 8px;
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-pill);
    box-shadow: var(--shadow-2); color: var(--c-ink); text-decoration: none;
    transition: transform 200ms var(--ease-out), scale 90ms var(--ease-out), border-color 160ms var(--ease-soft);
  }
}
.wa-fab__icon {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-accent-soft); color: var(--c-primary);
  transition: background-color 160ms var(--ease-soft);
}
.wa-fab__icon .i { width: 22px; height: 22px; stroke-width: 1.75; }
.wa-fab__label { font: 600 16px/1 var(--font-body); white-space: nowrap; color: var(--c-ink); }