/* ===== D-MIND · Bileşen stilleri =====
   Bu dosyada SABİT RENK YOKTUR. Tüm renk, gölge, gradyan ve tipografi
   değerleri `styles/themes/dark-default.css` içinde `[data-theme="..."]`
   altında tanımlanır ve buradan yalnızca `var(--...)` ile tüketilir.
   Yeni bir tema eklerken bu dosyaya dokunulmaz.

   NOT: Aşağıdaki `@import` kuralı, CSS spesifikasyonu gereği dosyadaki ilk
   kural olmak ZORUNDADIR (yorumlar sayılmaz). Üstüne başka bir kural eklenirse
   font sessizce yüklenmez. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800&display=swap');

/* ---------- Temadan bağımsız değerler ----------
   Ölçü, yarıçap ve katman sırası temaya göre değişmez; bu yüzden `:root`
   altında kalırlar. Renkler burada TANIMLANMAZ. */
:root {
  /* Düzen */
  --maxw: 1240px;
  --pad: clamp(20px, 4vw, 56px);

  /* Köşe yarıçapları */
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 6px;
  --radius-round: 50%;

  /* Katman sırası (z-index) */
  --z-header: 40;
  --z-float: 50;
  --z-drawer: 60;
  --z-scrim: 65;
  --z-aside: 70;
  --z-modal: 80;
  --z-toast: 90;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* `clip` instead of `hidden`: it stops stray horizontal overflow without turning
   html into a scroll container, which would break the sticky site header. */
html { overflow-x: clip; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* Admin-managed content can be arbitrarily long (URLs, e-postalar, tek parça
   başlıklar) — never let it push the page wider than the viewport. */
img, svg, video, iframe { max-width: 100%; }

/* Form controls default to an intrinsic min-width (~20ch), which overflows any
   grid track narrower than that. Let them shrink with their column instead. */
input, select, textarea { min-width: 0; max-width: 100%; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }
::selection { background: var(--color-accent-selection); }
*:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

img { border-radius: var(--radius-sm); }
h1, h2, h3, h4 { font-family: var(--font-heading); }

/* Buton ve form alanları da başlık yığınını kullanıyor (mevcut davranış). */
button { border-radius: var(--radius-md); font-family: var(--font-heading); }
input, select, textarea { border-radius: var(--radius-md); font-family: var(--font-heading); }

/* ---------- Layout helpers ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.rule { height: 2px; background: var(--color-border); }
.eyebrow { display: block; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 24px; }
.section { padding: clamp(48px, 6vw, 96px) 0; }

.grid { display: grid; gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }

/* ---------- Numbered editorial rows (ana sayfa adımları / hizmetler) ----------
   These live in CSS rather than inline styles so the columns can collapse at the
   breakpoints below — inline grids squeeze the text to one word per line. */
.num-row { display: grid; border-top: 2px solid var(--color-border); }
.num-row .idx { font-weight: 800; font-size: 15px; color: var(--color-accent); margin: 0; }
.num-row.steps { grid-template-columns: minmax(56px, 120px) minmax(0, 360px) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 64px); align-items: baseline; padding: 28px 0; }
.num-row.svc { grid-template-columns: minmax(56px, 120px) minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 64px); align-items: start; padding: 36px 0; }

/* ---------- Paired form fields ---------- */
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* ---------- Tab strips (blog kategorileri / yasal sayfalar) ---------- */
.tabs { display: flex; gap: 2px; flex-wrap: wrap; background: var(--color-border); border: 2px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.tabs > * { flex: 1 1 auto; min-width: 150px; border: 0; font-weight: 600; font-size: 12.5px; letter-spacing: 0.07em; text-transform: uppercase; padding: 14px 18px; text-align: left; cursor: pointer; }

/* ---------- Buttons ----------
   NOT: `.btn-gold-outline` sınıf adı renk bazlıdır ve amaç bazlı isimlendirmeye
   uymaz; yeniden adlandırmak HTML'e dokunmayı gerektireceği için Faz 2'de
   bilinçli olarak korundu. Taşıdığı renkler artık `--color-accent`'ten gelir. */
.btn {
  display: inline-block; border: 0; cursor: pointer;
  font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 15px 24px; text-align: center; line-height: 1.1;
}
.btn-primary { background: var(--color-primary); color: var(--color-primary-text); }
.btn-primary:hover { background: var(--color-primary-hover); color: var(--color-primary-text); }
/* İkincil butonun sağında yön oku — her iki temada da geçerli.
   inline-flex, ok ile etiketi aynı hizada tutar. */
.btn-outline {
  background: transparent; color: var(--color-text); border: 2px solid var(--color-text); padding: 13px 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-outline::after { content: "\2192"; font-size: 13px; line-height: 1; }
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-gold-outline { background: transparent; color: var(--color-accent); border: 2px solid var(--color-accent); padding: 13px 20px; }
.btn-gold-outline:hover { background: var(--color-primary); color: var(--color-primary-text); }
.btn-sm { font-size: 12.5px; padding: 12px 18px; }
.btn[disabled] { cursor: not-allowed; }

/* ---------- Public header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-navbar-bg); backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--color-border);
}
.site-header .bar { display: flex; align-items: center; gap: clamp(10px, 1.8vw, 32px); height: 76px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; white-space: nowrap; min-width: 0; }
.brand img { width: 40px; height: 40px; object-fit: cover; display: block; flex: 0 0 auto; }
/* A long admin-set SiteName would otherwise push the CTA and burger off-screen. */
.brand span { font-weight: 800; letter-spacing: 0.14em; font-size: 16px; color: var(--color-navbar-brand); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.main-nav { display: flex; gap: clamp(10px, 1.5vw, 28px); align-items: center; min-width: 0; }
.main-nav a { position: relative; font-size: clamp(11.5px, 1.15vw, 13.5px); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; white-space: nowrap; color: var(--color-navbar-text); padding: 6px 0; }
.main-nav a.active, .main-nav a:hover { color: var(--color-navbar-text-active); }
/* Aktif menü öğesinin altında vurgu çizgisi — her iki temada da geçerli. */
.main-nav a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--color-navbar-text-active);
}
.nav-toggle { display: none; background: var(--color-surface); border: 2px solid var(--color-border); color: var(--color-text); padding: 10px 12px; cursor: pointer; }
.cart-btn { border: 2px solid var(--color-border); background: transparent; color: var(--color-text); font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; padding: 10px 13px; cursor: pointer; flex: 0 0 auto; }
.cart-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
/* "Randevu Al" — sağında yön oku, her iki temada da. */
.header-cta { border: 0; background: var(--color-primary); color: var(--color-primary-text); font-weight: 600; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; padding: 13px clamp(12px, 1.4vw, 20px); cursor: pointer; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
.header-cta::after { content: "\2192"; font-size: 13px; line-height: 1; }
.header-cta:hover { background: var(--color-primary-hover); }

/* ---------- Ziyaretçi tema değiştirici ----------
   Yapı temadan bağımsızdır; çip renkleri satır içi --chip-a / --chip-b ile tema
   kaydından gelir. HANGİ çipin etkin olduğunu her tema kendi dosyasında bildirir
   (yeni tema eklerken o iki satır da eklenmelidir) — böylece etkin durum ilk
   boyamada doğrudur ve JS beklenmez. */
.theme-switch-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.theme-switch {
  display: inline-flex; align-items: center;
  background: transparent; border: 2px solid var(--color-border);
  border-radius: 999px; padding: 5px 7px; cursor: pointer; line-height: 0;
}
.theme-switch:hover { border-color: var(--color-accent); }
.theme-chips { display: inline-flex; align-items: center; gap: 5px; }
.theme-chip {
  width: 16px; height: 16px; border-radius: var(--radius-round); display: block;
  /* Yarısı zemin, yarısı vurgu rengi: tema tek bakışta ayırt edilir. */
  background: linear-gradient(135deg, var(--chip-a) 0 50%, var(--chip-b) 50% 100%);
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.45);
  opacity: 0.45; transform: scale(0.86);
}

/* İpucu: yalnızca geçilecek temanın adı. */
.theme-switch-tip {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 45;
  background: var(--color-surface); color: var(--color-text);
  border: 2px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 6px 10px; font-size: 12px; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.theme-switch-wrap:hover .theme-switch-tip,
.theme-switch-wrap:focus-within .theme-switch-tip { opacity: 1; visibility: visible; }

/* Mobil menü satırı */
.mobile-theme-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

/* ---------- Tema geçişi ----------
   `theme-anim` sınıfını theme-switcher.js ilk iki frame'den SONRA ekler; açılışta
   renklerin yanıp sönmesi böylece engellenir.
   :where() ile özgüllük sıfırlanıyor, aksi hâlde bu kural bileşenlerin kendi
   geçişlerini (ör. .admin-aside transform) ezerdi. */
:where(html.theme-anim) :where(*) {
  transition: background-color 200ms ease, color 200ms ease,
              border-color 200ms ease, fill 200ms ease, stroke 200ms ease;
}
@media (prefers-reduced-motion: reduce) {
  :where(html.theme-anim) :where(*) { transition: none; }
}

/* ---------- Hero & type ----------
   `--gradient-hero` varsayılanı `none`'dır; koyu temada görsel etkisi yoktur.
   İleriki temalar hero'ya gradyan vermek için yalnızca tema dosyasını değiştirir. */
/* İki sütunlu hero: solda metin, sağda görsel panel. Yatay dolgu `.container`
   ile aynı; üst dolgu kısadır ki panel header'ın hemen altından başlasın.
   Alt dolgu, istatistik kartının panele taşabilmesi için yer bırakır. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(24px, 3vw, 44px) var(--pad) clamp(120px, 10vw, 160px);

  /* ---- HERO'YA ÖZEL RENK TOKEN'LARI ----
     Hero'nun GÖRÜNEN her parçası buradaki bir token'dan beslenir; böylece panel
     üzerinden yapılan renk değişikliği hero'nun tamamına uygulanır, yalnızca
     bir köşesine değil.
     Varsayılanları site genelindeki token'lara BAĞLIDIR: hiçbiri ezilmediğinde
     hero bugünkü haliyle görünür. Ezildiklerinde ise yalnızca hero değişir —
     site geri kalanı site genelindeki token'ları kullanmaya devam eder.
     Değer farkı olan temalar kendi dosyasında yalnızca ilgili token'ı yeniden
     bağlar (ör. gold-light → --hero-heading-accent). */
  --hero-bg: var(--gradient-hero);
  --hero-heading: var(--color-heading);
  --hero-heading-accent: var(--color-accent);
  --hero-text: var(--color-text-muted);
  --hero-eyebrow: var(--color-accent);
  --hero-button: var(--color-primary);
  --hero-button-text: var(--color-primary-text);
  --hero-outline: var(--color-text);
  /* Başlık altındaki dekor noktası. Ayrı token: her tema bunu kendi PARLAK altın
     tonuna bağlar ve bu ton başlık vurgusundan farklıdır. Panelde slot olarak
     açılmaz — 10 px'lik dekoratif bir nokta için ayrı bir alan gereksiz. */
  --hero-heading-dot: var(--hero-heading-accent);

  position: relative;
}
/* Hero zemini EKRAN KENARINA kadar uzanır. `.hero` aynı zamanda `.container`
   olduğu için kendi kutusu maksimum genişlikle sınırlıdır; zemin doğrudan ona
   verilseydi geniş ekranlarda iki yanda sayfa zemininden şeritler kalırdı
   (ölçüldü). Bu yüzden zemin, kapsayıcının dışına taşan bir katmana basılır.
   Varsayılanda `--hero-bg` gradyan tanımsız olduğu için `none`'dır → hiçbir şey
   çizilmez ve bugünkü görünüm birebir korunur. */
.hero::before {
  content: "";
  position: absolute;
  /* z-index: -1 DEĞİL: negatif değer katmanı gövdenin zemininin ARKASINA atıyor
     ve hiç görünmüyordu (ölçüldü). Katman 0'da kalır, içerik 1'e çıkarılır. */
  z-index: 0;
  top: 0;
  bottom: 0;
  /* Tam genişlik zemin. --pad BİLEREK eklenmez: mutlak konumlu öğenin kapsayıcı
     bloğu .hero'nun PADDING KUTUSU'dur, yani zaten dolgunun dışından başlar.
     Ayrıca --maxw border-box genişliğidir (box-sizing: border-box), dolgu onun
     İÇİNDEDİR. --pad eklenince dolgu iki kez sayılıyor ve zemin her iki yandan
     ekranı aşıyordu — sayfa 1920'de 56 px, 1200'de 48 px yatay kayıyordu
     (ölçüldü; html{overflow-x:clip} programatik kaymayı durdurmuyor).
     Akıştaki kardeşlerde (ör. .hero-visual margin'i) --pad DOĞRUdur: onlar
     içerik kutusunun içindedir ve dolguyu da aşmaları gerekir. */
  left: calc(-1 * max(0px, (100vw - var(--maxw)) / 2));
  right: calc(-1 * max(0px, (100vw - var(--maxw)) / 2));
  background: var(--hero-bg);
}
.hero h1 { font-weight: 800; font-size: clamp(40px, 6.4vw, 86px); line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 32px; color: var(--hero-heading); }
.hero h1 .gold { color: var(--hero-heading-accent); display: block; }

/* Hero içindeki ortak sınıflar hero token'larına bağlanır. Seçiciler (0,2,0)
   olduğu için site genelindeki (0,1,0) kurallarını ezerler; app.css tema
   dosyalarından SONRA yüklendiği için eşit özgüllükteki tema kurallarını da
   ezerler. Yalnızca RENK bildirilir — kenarlık kalınlığı, dolgu, zemin gibi
   temaya ait diğer özellikler olduğu gibi kalır. */
.hero .lead { color: var(--hero-text); }
.hero .eyebrow { color: var(--hero-eyebrow); }
.hero .btn-primary { background: var(--hero-button); color: var(--hero-button-text); }
.hero .btn-outline { color: var(--hero-outline); border-color: var(--hero-outline); }

.lead { font-size: 18px; line-height: 1.62; color: var(--color-text-muted); max-width: 56ch; margin: 0 0 36px; }
.page-title { font-weight: 800; font-size: clamp(34px, 5vw, 64px); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 32px; color: var(--color-heading); }
.h2 { font-weight: 800; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.22; letter-spacing: -0.015em; margin: 0 0 20px; color: var(--color-heading); }
.stat-num { font-weight: 800; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.1; color: var(--color-accent); margin: 0 0 12px; }
.stat-label { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-subtle); margin: 0; line-height: 1.5; }

/* ===========================================================================
   HERO KOMPOZİSYONU — tema-nötr DÜZEN
   ---------------------------------------------------------------------------
   Solda metin, sağda ekran kenarına yaslanan panel; panelin sol kenarı organik
   S-kavis (SVG clipPath, objectBoundingBox birimleriyle ölçeklenir).
   Burada YALNIZCA geometri vardır; renkler ve görsel aşağıdaki token'lardan
   gelir ve her tema kendi dosyasında tanımlar:
     --hero-panel-bg      panelin zemini
     --hero-brain-image   panel görseli (url(...) ya da none)
     --hero-accent        nokta/kıvılcım/slogan/rozet vurgusu
     --stat-chip-bg / --stat-chip-fg / --stat-underline-color
   Panelsiz bir tema isterse: `.hero-visual { display:none }` + `.hero
   { grid-template-columns: minmax(0,1fr) }` yazması yeterlidir.
   CLS'i önlemek için panele ve istatistik kartına min-height verilir.
   =========================================================================== */

/* İçerik, hero zemin katmanının (.hero::before) ÜSTÜNDE kalır. */
.hero-copy { min-width: 0; align-self: center; position: relative; z-index: 1; }

.hero-visual {
  display: block;
  position: relative;
  z-index: 1;
  min-height: 470px;
  /* Panel sağda ekran kenarına yaslanır: container'ın sağdaki boşluğu kadar taşar.
     html { overflow-x: clip } zaten yatay kaymayı engelliyor. */
  margin-right: calc(-1 * (var(--pad) + max(0px, (100vw - var(--maxw)) / 2)));
  /* Panel yukarıda hero'nun üst dolgusunu yiyerek header'a DEĞER. */
  margin-top: calc(-1 * clamp(24px, 3vw, 44px));
  /* Panel, metin sütununun bittiği yerin ALTINA uzanır. İstatistik kartı da bu
     uzantının üzerine oturur; böylece kart yalnızca panele taşar, hero'nun
     butonlarını hiç örtmez. */
  margin-bottom: calc(-1 * clamp(56px, 5vw, 80px));
}

/* clipPath tanımını taşıyan sıfır boyutlu SVG akışı etkilemesin. */
.hero-clip-def { position: absolute; width: 0; height: 0; overflow: hidden; }

.hero-panel {
  position: absolute;
  inset: 0;
  min-height: 470px;
  background: var(--hero-panel-bg);
  clip-path: url(#dm-hero-curve);
  overflow: hidden;
}

/* Beyin görseli — <img> DEĞİL arka plan: gizlenen temada hiç indirilmesin diye.
   aspect-ratio, görsel yüklenmeden de yer ayırır → CLS oluşmaz. */
/* Kutunun oranı YÜKLENEN görselden gelir (--hero-brain-image-aspect); yoksa
   yerleşik beyin görselinin oranı kullanılır. Böylece panelden başka bir görsel
   yüklendiğinde kutu ona uyar: görsel ne ezilir ne de etrafında boşluk kalır. */
.hero-brain {
  position: absolute;
  top: 46%;
  left: 54%;
  transform: translate(-50%, -50%);
  display: block;
  width: min(86%, 460px);
  aspect-ratio: var(--hero-brain-image-aspect, 900 / 819);
  background-image: var(--hero-brain-image);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Nokta ızgarası (4 sütun x 5 satır) */
.hero-dotgrid {
  position: absolute;
  top: 40px;
  right: clamp(24px, 4vw, 64px);
  width: 58px;
  height: 72px;
  background-image: radial-gradient(circle, var(--hero-accent) 1.6px, transparent 1.7px);
  background-size: 14px 14px;
  background-position: 1px 1px;
  opacity: 0.75;
}

/* Serbest noktalar — nokta ızgarasıyla aynı sağ şeride hizalanır. */
.hero-spark { position: absolute; border-radius: var(--radius-round); background: var(--hero-accent); }
.hero-spark-a { width: 7px; height: 7px; top: 26%; right: 13%; opacity: 0.85; }
.hero-spark-b { width: 5px; height: 5px; top: 47%; right: 6%;  opacity: 0.6; }
.hero-spark-c { width: 9px; height: 9px; top: 66%; right: 17%; opacity: 0.45; }

/* El yazısı slogan */
.hero-script {
  position: absolute;
  /* Kavisin en içeri girdiği yerin sağından başlar ki panelden taşmasın. */
  left: clamp(96px, 20%, 168px);
  right: clamp(24px, 6%, 56px);
  /* İstatistik kartının bindiği alt şeridin ÜSTÜNDE kalır. */
  bottom: clamp(84px, 15%, 140px);
  margin: 0;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.18;
  color: var(--hero-accent);
  transform: rotate(-2.5deg);
  transform-origin: left bottom;
}
.hero-script span { display: block; }
.hero-script span + span { margin-left: clamp(12px, 3%, 28px); }

/* Hero ile istatistik bandı arasındaki eski çizgi bu düzende gereksiz. */
.hero-rule { display: none; }

/* ===========================================================================
   HERO VARYANTI: "mirror" — Aynalı (Sol Panel)
   ---------------------------------------------------------------------------
   Aynı işaretleme, aynalanmış düzen: panel SOLDA ekran kenarına yaslanır,
   metin sağa geçer. Yalnızca geometri değişir; renkler classic ile aynı
   token'lardan gelir, dolayısıyla panelden ayrı ayrı renklendirilebilir.
   Görsel ters dönmesin diye transform DEĞİL, aynalanmış ayrı bir clipPath
   kullanılır (Home.razor: #dm-hero-curve-mirror).
   =========================================================================== */

/* Sütun genişlikleri de aynalanır: geniş sütun metin sütunudur. */
.hero[data-hero="mirror"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); }
.hero[data-hero="mirror"] .hero-visual { order: 1; }
.hero[data-hero="mirror"] .hero-copy { order: 2; }

/* Taşma sağ değil SOL kenara. */
.hero[data-hero="mirror"] .hero-visual {
  margin-right: 0;
  margin-left: calc(-1 * (var(--pad) + max(0px, (100vw - var(--maxw)) / 2)));
}
.hero[data-hero="mirror"] .hero-panel { clip-path: url(#dm-hero-curve-mirror); }

/* Panel içi öğeler de karşı kenara geçer. */
.hero[data-hero="mirror"] .hero-dotgrid { right: auto; left: clamp(24px, 4vw, 64px); }
.hero[data-hero="mirror"] .hero-spark-a { right: auto; left: 13%; }
.hero[data-hero="mirror"] .hero-spark-b { right: auto; left: 6%; }
.hero[data-hero="mirror"] .hero-spark-c { right: auto; left: 17%; }
.hero[data-hero="mirror"] .hero-brain { left: 46%; }
.hero[data-hero="mirror"] .hero-script {
  left: auto;
  right: clamp(96px, 20%, 168px);
  text-align: right;
  transform: rotate(2.5deg);
  transform-origin: right bottom;
}
.hero[data-hero="mirror"] .hero-script span + span { margin-left: 0; margin-right: clamp(12px, 3%, 28px); }

/* NOT: Carousel kontrolleri BİLEREK her varyantta solda kalır. Slayta göre yer
   değiştirselerdi her geçişte zıplar, klavye kullanıcısı da onları kaybederdi. */


/* ===========================================================================
   HERO VARYANTI: "honeycomb" — Petek Süreç
   ---------------------------------------------------------------------------
   Sol sütun klasik varyantla aynı (ortak içerik, ortak token'lar). Sağ panel
   aynı organik S-kavisi kullanır; içinde merkezde logo, çevresinde 6 altıgenlik
   süreç halkası vardır.
   Kurallar .hero[data-hero="honeycomb"] kapsamındadır: diğer varyantlar
   etkilenmez. Burada TEK BİR renk yoktur; hepsi --hero-* token'larından gelir ve
   her tema kendi dosyasında bu token'ların varsayılanını verir. Bu sayede varyant
   tema-bağımsızdır (hem koyu hem açık temada çalışır) ve panelden ezilebilir.
   =========================================================================== */

.hero[data-hero="honeycomb"] {
  /* Altıgenin kenar uzunluğu — duyarlı kırılımlar YALNIZCA bunu değiştirir,
     halkanın geometrisi (yüzde bazlı konumlar) olduğu gibi kalır. */
  /* Komşu altıgenlerin merkezleri arası mesafe halka yarıçapına eşittir (60°).
     Çakışmaması için altıgen genişliği yarıçapın ~%80'ini geçmemeli. */
  /* Düz kenarlı altıgende bu değer GENİŞLİKTİR (yükseklik = genişlik / 1,1547). */
  --hex-size: 205px;

  /* Altıgen çerçevesinin dikey degrade uçları. Slot değişkeni DEĞİL: çerçevenin
     hacim hissi için iki sabit ton gerekiyor, panelden ayarlanan altın tonu
     (--hero-hex-accent) ikon ve rozet halkasında kullanılmaya devam ediyor. */
  --hero-hex-border-light: #E8C97F;
  --hero-hex-border-dark: #B8862F;

  /* Halka yarıçapı PİKSEL cinsinden ve altıgen boyutuna bağlı: komşu altıgenlerin
     merkezleri arası mesafe yarıçapa eşit olduğu için katsayı hem altıgenler arası
     boşluğu hem de halkanın İÇİNDE merkez bloğa kalan yeri belirler.

     Boş iç yarıçap = yarıçap - altıgen yüksekliği/2 - rozet çapı/2.
     Merkez blok altıgenle ölçeklenir ama punto tabanları (16 px / 9,5 px) yüzünden
     tam oranlı küçülemez; bu yüzden altıgen küçüldükçe katsayı KADEMELİ artırılır.
     Ölçüm: 1,14 sabitken 04 rozeti ile sloganın 2. satırı arasında yalnızca
     1,5 px kalıyordu (1200 px). */
  --hc-radius: calc(var(--hex-size) * 1.16);
}

/* Petek paneline birazcık daha geniş sütun verilir: halka ne kadar geniş olursa
   altıgenler de o kadar büyüyebilir. Fazla genişletmek sol sütunu sıkıştırıp
   başlığı fazladan satıra bölüyor ve butonları alt alta itiyordu — bu oran
   ikisinin dengesi. */
.hero[data-hero="honeycomb"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
}

/* Panelin kendisi klasikle aynı teknikte; yüksekliği halkayı sığdıracak kadar. */
/* Halkanın dikey kapladığı alan (2 x yarıçap + altıgen yüksekliği) artı alttaki
   slogan şeridi bu yüksekliği gerektiriyor; daha kısa panelde altıgenler
   birbirine ve slogana giriyordu. CLS için de yer ayırır. */
.hero[data-hero="honeycomb"] .hero-visual,
.hero[data-hero="honeycomb"] .hero-panel {
  min-height: 860px;
}

/* Halka sahnesi. Panelin kavisli SOL kenarından ve alttaki slogan şeridinden
   içeri çekilir; halkanın yüzde bazlı geometrisi bu kutuya göre hesaplanır,
   böylece altıgenler kavisin dışına taşmaz. */
.hero[data-hero="honeycomb"] .hc-stage {
  position: absolute;
  /* Paylar halkanın MERKEZİNİ konumlandırır (yarıçap artık piksel bazlı, kutu
     boyutuna bağlı değil). Merkez, halkanın panel kenarlarına ve kavise
     değmeyeceği aralıkta olmalı; alt pay slogan şeridini boş bırakır. */
  inset: 5% 5% 24% 20%;
}

/* El yazısı slogan bu varyantta halkanın ALTINDAKİ şeride oturur; klasik
   varyanttaki konum burada altıgenlerle çakışıyordu.
   `bottom` istatistik kartının binme payını da hesaba katar: kart
   (.stats-band margin-top negatif) panelin altını 37-48 px örtüyor ve slogan
   tam oraya denk geliyordu (ölçüldü). Klasik varyantta panelin o bölgesi boş
   olduğu için sorun görünmüyordu. */
.hero[data-hero="honeycomb"] .hero-script {
  left: clamp(56px, 13%, 116px);
  right: clamp(16px, 4%, 40px);
  /* Panelin hero içeriğinin altına taşan payı kadar + boşluk. Kartın gerçekte
     örttüğü bant bu kadardır (ölçüldü: 37-48 px); tam `clamp(80,9vw,120)`
     kullanmak sloganı gereksiz yükseltip halkayla çakıştırıyordu. */
  bottom: calc(clamp(56px, 5vw, 80px) + 4px);
  max-width: none;
}

/* ---------- Merkez: logo + marka ---------- */
.hero[data-hero="honeycomb"] .hc-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  /* Halkanın İÇİNE sığmalı: yarıçap eksi yarım altıgen. Daha genişse marka
     metni altıgenlerin altına girer. */
  /* Halkanın İÇİNE sığmalı. Boş iç yarıçap = yarıçap - yarım altıgen yüksekliği
     = --hex-size x 0,707 (sabit oran). Bu yüzden merkez blok da --hex-size ile
     ÖLÇEKLENİR; sabit bir genişlikte bırakılırsa halka küçüldüğünde altıgenlerin
     altına giriyordu (ölçüldü: 1200-1500 arası 02/03/05/06 ile çakışma). */
  width: calc(var(--hex-size) * 1.05);
  text-align: center;
}

/* Logo + çevresindeki yörünge aynı kutuda; yörünge logodan biraz taşar. */
.hero[data-hero="honeycomb"] .hc-logo-wrap {
  position: relative;
  display: block;
  /* Ekran genişliğine değil ALTIGENE bağlı: halka ile birlikte ölçeklenir. */
  width: calc(var(--hex-size) * 0.74);
  margin: 0 auto 9px;
}
.hero[data-hero="honeycomb"] .hc-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 152%;
  height: 152%;
  overflow: visible;
  pointer-events: none;
}

/* Halkanın altıgen siluetine girip çıktığı noktalardaki küçük altın işaretler. */
.hero[data-hero="honeycomb"] .hc-ring-dot {
  position: absolute;
  z-index: 1;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: var(--radius-round);
  background: var(--hero-hex-accent);
}

/* Saat yönü okları. Üçgen CSS ile çizilir; SVG'de basılsalardı sahne kutusunun
   kare olmaması yüzünden ezilirlerdi (eski hâlde öyleydi). */
.hero[data-hero="honeycomb"] .hc-arrow {
  position: absolute;
  z-index: 1;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  background: var(--hero-hex-accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: rotate(var(--hc-arrow-rot, 0deg));
}

.hero[data-hero="honeycomb"] .hc-center img {
  position: relative;
  width: 100%;
  /* Yüklenen logo kare olmayabilir: yükseklik oranı korunarak hesaplanır. */
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-round);
  display: block;
}
.hero[data-hero="honeycomb"] .hc-brand {
  margin: 0 0 6px;
  font-family: var(--font-heading), var(--font-body);
  font-weight: 700;
  font-size: max(16px, calc(var(--hex-size) * 0.105));
  letter-spacing: 0.2em;
  color: var(--hero-hex-accent);
}
.hero[data-hero="honeycomb"] .hc-tagline {
  margin: 0;
  font-size: max(9.5px, calc(var(--hex-size) * 0.055));
  line-height: 1.45;
  letter-spacing: 0.01em;
  /* Krem/açık gri — eski altın büyük harfli stil kaldırıldı. */
  color: var(--hero-hex-fill);
  opacity: 0.82;
}

/* ---------- Halka çizgisi ve oklar ---------- */
/* Halka: 1px kenarlıklı daire, sahnenin merkezine oturur. */
.hero[data-hero="honeycomb"] .hc-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--hc-radius) * 2);
  height: calc(var(--hc-radius) * 2);
  transform: translate(-50%, -50%);
  border: 1px solid var(--hero-ring);
  border-radius: var(--radius-round);
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}

/* ---------- Altıgen halkası ---------- */
.hero[data-hero="honeycomb"] .hc-hexes {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
}
.hero[data-hero="honeycomb"] .hc-hex {
  position: absolute;
  /* Konum (left/top yüzdesi) satır içi stille gelir; buradaki transform onu
     kendi merkezine oturtur. */
  transform: translate(-50%, -50%);
  width: var(--hex-size);
  /* DÜZ KENAR YUKARI (flat-top): tepede köşe değil kenar durur.
     Bu yönde düzgün altıgenin oranı genişlik/yükseklik = 1,1547'dir. */
  aspect-ratio: 1.1547 / 1;
  /* Gölge box-shadow ile verilemez: clip-path kutunun dışını kırptığı için
     gölge hiç görünmez. drop-shadow filtresi kırpılmış SİLUETİ takip eder. */
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.30));
}

/* Dış katman: DİKEY altın degrade (üstü açık, altı koyu) — düz altına göre
   hacim hissi verir. İç katman 2px içeride krem dolgu. */
.hero[data-hero="honeycomb"] .hc-hex-shape {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(180deg, var(--hero-hex-border-light), var(--hero-hex-border-dark));
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  transition: transform 200ms ease;
}
.hero[data-hero="honeycomb"] .hc-hex-inner {
  position: absolute;
  inset: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* Altıgen büyütüldüğü için dolgu da artırıldı: 4-5 satır açıklama kırpılmadan
     sığsın. Yan dolgu, altıgenin daralan üst/alt kenarlarını hesaba katar. */
  padding: 13% 17%;
  text-align: center;
  /* Çok hafif dikey degrade — üstü bir tık açık; düz krem yerine derinlik. */
  background: var(--hero-hex-fill);
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--hero-hex-fill) 94%, white),
      var(--hero-hex-fill));
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.hero[data-hero="honeycomb"] .hc-hex-inner svg {
  width: calc(var(--hex-size) * 0.146);
  height: calc(var(--hex-size) * 0.146);
  color: var(--hero-hex-accent);
  flex: 0 0 auto;
}
.hero[data-hero="honeycomb"] .hc-hex-title {
  margin: 0;
  /* Tema başlık fontu, büyük harf, harf aralıklı. NOT: bu temanın başlık fontu
     Archivo'dur (sans); temada serif bir aile tanımlı değil. */
  font-family: var(--font-heading), var(--font-body);
  font-weight: 600;
  /* Punto EKRAN genişliğine değil ALTIGENE bağlıdır. vw kullanılırken altıgen
     bir kademe küçüldüğünde (178 -> 158) yazı aynı oranda küçülmüyor ve
     açıklama altıgenden taşıyordu (ölçüldü: 1280 px). */
  font-size: max(10.5px, calc(var(--hex-size) * 0.066));
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
  /* Türkçe uzun kelimeler harf harf BÖLÜNMESİN. */
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  /* Altıgenin içi HER TEMADA krem; bu yüzden metin rengi temanın genel başlık
     rengine bağlanamaz (koyu temada beyaz olur ve krem üzerinde kaybolur —
     ölçüldü). Varyantın kendi token'ı kullanılır. */
  color: var(--hero-hex-title);
}
/* "SÜRDÜRÜLEBİLİRLİK" gibi uzun başlıklar bir kademe küçülerek tek satırda kalır. */
.hero[data-hero="honeycomb"] .hc-hex-title[data-long="true"] {
  font-size: max(9.5px, calc(var(--hex-size) * 0.056));
  letter-spacing: 0.02em;
}
.hero[data-hero="honeycomb"] .hc-hex-desc {
  margin: 0;
  font-size: max(9px, calc(var(--hex-size) * 0.054));
  line-height: 1.35;
  /* Krem dolgu üzerinde AA: #58616F / #FFFDF6 = 5,9:1. Başlıkla aynı gerekçeyle
     temanın gövde metni token'ına bağlanmaz. */
  color: var(--hero-hex-text);
  /* Metin KIRPILMAZ: line-clamp / text-overflow yok, açıklama tam görünür.
     Altıgen ve dolgu bunu sığdıracak boyutta. */
}

/* Üst kenarda koyu dairesel numara rozeti, ince altın halkalı.
   translate(-50%,-50%) rozetin YARISINI altıgenin dışına taşırır. */
.hero[data-hero="honeycomb"] .hc-hex-no {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: max(28px, calc(var(--hex-size) * 0.185));
  height: max(28px, calc(var(--hex-size) * 0.185));
  border-radius: var(--radius-round);
  background: var(--hero-badge-bg);
  border: 1.5px solid var(--hero-hex-accent);
  color: var(--hero-hex-border-light);
  font-size: max(10.5px, calc(var(--hex-size) * 0.063));
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover: hafif yükselme. */
.hero[data-hero="honeycomb"] .hc-hex:hover .hc-hex-shape {
  transform: translateY(-4px);
}

/* ---------- Duyarlılık ----------
   Halkanın geometrisi yüzde bazlı olduğu için dar ekranda yalnızca --hex-size
   küçülür; düzen değişmez. Basamaklar AZALAN sırada olmalı — aksi hâlde altıgen
   1439'da büyüyüp 1440'ta küçülüyordu. */
/* 205 px altıgen ancak ~1600 px ve üzerinde panele sığıyor; altında kademe iner. */
@media (max-width: 1599px) {
  .hero[data-hero="honeycomb"] {
    --hex-size: 178px;
    --hc-radius: calc(var(--hex-size) * 1.19);
  }
}
@media (max-width: 1339px) {
  .hero[data-hero="honeycomb"] {
    --hex-size: 158px;
    --hc-radius: calc(var(--hex-size) * 1.22);
  }
}

/* 769-1199: panel içeriğin ALTINA iner, petek 2 sütunlu ızgaraya döner,
   logo en üste geçer. Halka çizgisi bu düzende anlamsızlaşır, gizlenir. */
@media (max-width: 1199px) {
  .hero[data-hero="honeycomb"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero[data-hero="honeycomb"] .hero-visual {
    margin-left: 0;
    min-height: 0;
  }
  .hero[data-hero="honeycomb"] .hero-panel {
    position: relative;
    min-height: 0;
    padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 40px);
    /* Yığılmış düzende de istatistik kartı panelin altını örter; alt dolgu
       binme payı kadar büyütülür ki kartın altında içerik kalmasın. */
    padding-bottom: calc(clamp(80px, 9vw, 120px) + 28px);
  }
  /* Izgara düzeninde halka geometrisi anlamsızlaşır: çizgi, noktalar ve oklar gizlenir. */
  .hero[data-hero="honeycomb"] .hc-ring,
  .hero[data-hero="honeycomb"] .hc-ring-dot,
  .hero[data-hero="honeycomb"] .hc-arrow { display: none; }
  .hero[data-hero="honeycomb"] .hc-stage {
    position: static;
    inset: auto;
  }
  .hero[data-hero="honeycomb"] .hc-center {
    position: static;
    transform: none;
    width: auto;
    margin: 0 auto clamp(24px, 3vw, 36px);
  }
  .hero[data-hero="honeycomb"] .hc-hexes {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 44px) clamp(16px, 3vw, 32px);
    justify-items: center;
  }
  .hero[data-hero="honeycomb"] .hc-hex {
    position: relative;
    left: auto !important;
    top: auto !important;
    transform: none;
    width: min(100%, 210px);
  }
  /* Bu düzende kart genişliği --hex-size'dan bağımsızdır (210 px sabit), bu yüzden
     ona oranlanan puntolar da sabitlenir. */
  .hero[data-hero="honeycomb"] .hc-hex-inner svg { width: 26px; height: 26px; }
  .hero[data-hero="honeycomb"] .hc-hex-title { font-size: 12.5px; }
  .hero[data-hero="honeycomb"] .hc-hex-title[data-long="true"] { font-size: 11px; }
  .hero[data-hero="honeycomb"] .hc-hex-desc { font-size: 11px; }
  .hero[data-hero="honeycomb"] .hc-hex-no {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }
  .hero[data-hero="honeycomb"] .hero-script {
    position: static;
    margin: clamp(24px, 3vw, 36px) 0 0;
    bottom: auto;
    transform: none;
  }
}

/* <=768: altıgen yerine DİKEY adım kartı listesi (01..06 sırayla). */
@media (max-width: 768px) {
  .hero[data-hero="honeycomb"] .hc-hexes {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .hero[data-hero="honeycomb"] .hc-hex {
    width: 100%;
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 42px;   /* rozet için yer */
  }
  .hero[data-hero="honeycomb"] .hc-hex-shape {
    position: relative;
    inset: auto;
    width: 100%;
    /* Kart düzeninde altıgen kırpma okunabilirliği bozar: düz kart. */
    clip-path: none;
    border-radius: var(--radius-lg);
    padding: 2px;
  }
  /* Kart düzeninde ikon solda, BAŞLIK kendi satırında, açıklama altında.
     Satır (flex) düzeninde başlık ile açıklama aynı satırı paylaşıp
     "SÜRDÜRÜLEBİLİRLİK" gibi uzun kelimeler harf harf kırılıyordu. */
  .hero[data-hero="honeycomb"] .hc-hex-inner {
    position: static;
    inset: auto;
    clip-path: none;
    border-radius: calc(var(--radius-lg) - 2px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    text-align: left;
    gap: 4px 12px;
    padding: 14px 16px;
  }
  .hero[data-hero="honeycomb"] .hc-hex-inner svg {
    grid-column: 1;
    grid-row: 1;
    margin-top: 1px;
  }
  .hero[data-hero="honeycomb"] .hc-hex-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    /* Kart genişliğinde kelime ortasından kırmaya gerek yok. */
    overflow-wrap: normal;
  }
  .hero[data-hero="honeycomb"] .hc-hex-desc {
    grid-column: 2;
    grid-row: 2;
    -webkit-line-clamp: initial;
    font-size: 12px;
  }
  /* Rozet kartın soluna, dikey ortalı. */
  .hero[data-hero="honeycomb"] .hc-hex-no {
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    width: 30px;
    height: 30px;
    font-size: 11px;
  }
}

/* Hareket azaltma tercihi: yükselme animasyonu yok. */
@media (prefers-reduced-motion: reduce) {
  .hero[data-hero="honeycomb"] .hc-hex-shape { transition: none; }
  .hero[data-hero="honeycomb"] .hc-hex:hover .hc-hex-shape { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero[data-hero="mirror"] .hero-script { transform: none; }
}

/* ===========================================================================
   HERO CAROUSEL (HERO-EK Faz 4)
   Bu blok YALNIZCA .hero-carousel sarmalayıcısı basıldığında etkilidir; "single"
   kipinde sarmalayıcı hiç render edilmez, dolayısıyla hiçbir kural uygulanmaz.
   =========================================================================== */

/* overflow-x: clip ŞART. "slide" geçişinde bekleyen slaytlar translateX(3%) ile
   sağda park eder; kırpılmazsa sayfanın kaydırma genişliğini büyütür ve yatay
   kaydırma çubuğu oluşur (ölçüldü: 1920'de 58 px, 1024'te 31 px taşma).
   `hidden` DEĞİL `clip`: hidden, overflow-y'yi de auto'ya çevirip dikey bir
   kaydırma kabı yaratırdı. `clip` desteklenmeyen tarayıcıda tek belirti eski
   %3'lük taşmadır — düzen bozulmaz. */
.hero-carousel { position: relative; overflow-x: clip; }

/* Kontroller için hero'ya AYRI bir bant açılır. Bu ek dolgu olmadan kontroller
   ya CTA butonlarının ya da istatistik kartının üstüne biniyor (ikisi de ölçüldü);
   sol alt köşede üçüne birden yetecek yer yok.
   Yalnızca kontroller GERÇEKTEN görünürken uygulanır. Sarmalayıcı, temalar farklı
   varyant seçtiğinde tekli kipte de basılabiliyor; koşul [data-mode="carousel"]
   olmasaydı o durumda da 64 px eklenir ve istatistik kartı aşağı kayardı. */
.hero-carousel[data-mode="carousel"] .hero { padding-bottom: calc(clamp(120px, 10vw, 160px) + 64px); }

/* Tüm slaytlar AYNI grid hücresine yığılır. Kap yüksekliği kendiliğinden en
   yüksek slayta eşitlenir → JS ile yükseklik ölçmeye gerek kalmaz ve slayt
   değişiminde içerik kaymaz (CLS 0). */
.hero-track { display: grid; }
.hero-track > .hero-slide { grid-area: 1 / 1; min-width: 0; }

/* Görünmeyen slayt yer kaplamaya DEVAM eder (display:none değil) ama ne görünür
   ne de tıklanabilir. visibility, içindeki odaklanabilir öğeleri de sekme
   sırasından çıkarır; tabindex="-1" bunu ayrıca garanti eder. */
.hero-slide {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease, transform 500ms ease, visibility 0s linear 500ms;
}

/* Görünen slayt: kabın data-current değeri hangi indekse eşitse o slayt açılır.
   Tek öznitelikten türetildiği için JS'in tutması gereken durum da tek.
   [data-hero-ready] şartı, JS KAPALIYKEN bu kuralın devreye girmemesini sağlar —
   o durumda görünürlüğü App.razor'ın bastığı tema kuralı belirler. */
.hero-carousel[data-hero-ready][data-current="0"] .hero-slide[data-index="0"],
.hero-carousel[data-hero-ready][data-current="1"] .hero-slide[data-index="1"],
.hero-carousel[data-hero-ready][data-current="2"] .hero-slide[data-index="2"],
.hero-carousel[data-hero-ready][data-current="3"] .hero-slide[data-index="3"],
.hero-carousel[data-hero-ready][data-current="4"] .hero-slide[data-index="4"],
.hero-carousel[data-hero-ready][data-current="5"] .hero-slide[data-index="5"] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: opacity 500ms ease, transform 500ms ease, visibility 0s;
}

/* "slide" geçişi: pasif slaytlar yanda bekler. Yalnızca transform/opacity
   canlandırılır — düzen (layout) hiç yeniden hesaplanmaz. */
.hero-carousel[data-transition="slide"] .hero-slide { transform: translateX(3%); }

/* "fade" geçişinde konum değişmez, yalnızca opaklık. */
.hero-carousel[data-transition="fade"] .hero-slide { transform: none; }

/* ---------- Kontroller ---------- */

.hero-carousel-controls {
  position: absolute;
  z-index: 3;
  left: var(--pad);
  /* İstatistik kartı hero'nun ÜSTÜNE biner (.stats-band margin-top negatif) ve
     z-index:3 ile kontrollerin önünde durur. Kontroller bu binme payının da
     üstüne alınır, yoksa kartın altında kalıp tıklanamaz olurlar (ölçüldü:
     1440'ta 48 px, 1024'te 49 px, 390'da 30 px örtüşme).
     Binme payı .stats-band'deki clamp'in mutlak değeridir; 16 px de boşluk. */
  bottom: calc(clamp(80px, 9vw, 120px) + 16px);
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-cbtn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* Kenarlık --color-border DEĞİL: ölçüldüğünde çevresine karşı 1,25:1 kalıyordu,
     WCAG 2.1 SC 1.4.11 (metin olmayan kontrast) ise 3:1 ister. Buton sınırı
     görülemezse kontrolün nerede olduğu anlaşılmaz. */
  border: 2px solid var(--color-text-muted);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: var(--radius-round);
  cursor: pointer;
}
.hero-cbtn:hover { border-color: var(--hero-accent); color: var(--color-text); }
.hero-cbtn:focus-visible { outline: 2px solid var(--hero-accent); outline-offset: 2px; }
.hero-cbtn svg { width: 18px; height: 18px; }

/* Oynat/durdur: aynı butonda iki ikon; duruma göre biri gizlenir. */
.hero-cbtn-play .icon-play { display: none; }
.hero-carousel[data-playing="false"] .hero-cbtn-play .icon-pause { display: none; }
.hero-carousel[data-playing="false"] .hero-cbtn-play .icon-play { display: block; }

.hero-dots { display: flex; align-items: center; margin: 0 2px; }

/* Dokunma hedefi 24x24 (WCAG 2.2 SC 2.5.8); görünen nokta yine 9 px.
   Nokta ::after ile çizilir, buton kendisi şeffaf ve büyük kalır — görünüm
   değişmeden hedef alanı 9x9'dan 24x24'e çıkar. */
.hero-dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hero-dot::after {
  content: "";
  width: 9px;
  height: 9px;
  border: 2px solid var(--color-text-muted);
  border-radius: var(--radius-round);
  box-sizing: border-box;
}
.hero-dot[aria-current="true"]::after { background: var(--hero-accent); border-color: var(--hero-accent); }
.hero-dot:focus-visible { outline: 2px solid var(--hero-accent); outline-offset: -2px; }

/* Kontroller yalnızca JS hazırken VE gerçekten carousel kipindeyken görünür;
   ölü ya da anlamsız kontrol gösterilmez. */
.hero-carousel:not([data-hero-ready]) .hero-carousel-controls,
.hero-carousel[data-mode="single"] .hero-carousel-controls { display: none; }

/* Dar ekranda hero çok uzar (panel içeriğin altına iner). Mutlak konumlu
   kontroller o zaman hero'nun EN ALTINA, ekranın çok aşağısına düşüyordu
   (ölçüldü: 1024'te y≈1774) ve kullanıcı onları bulamıyordu.
   Bu genişliklerde kontroller akışa alınır: slaytların hemen altında, ortalanmış.
   Alt boşluk, istatistik kartının yukarı binme payı kadardır ki kart onları örtmesin.
   NOT: Bu blok, yukarıdaki temel kuralın ARDINDAN gelmek zorunda — aynı
   özgüllükte olduğu için sırayla kazanıyor. */
@media (max-width: 1199px) {
  .hero-carousel-controls {
    position: static;
    justify-content: center;
    margin: clamp(14px, 2.5vw, 24px) 0 calc(clamp(80px, 9vw, 120px) + 16px);
    padding: 0 var(--pad);
  }
  /* Kontroller artık hero'nun İÇİNDE olmadığı için ek dolguya gerek yok. */
  .hero-carousel[data-mode="carousel"] .hero { padding-bottom: clamp(120px, 10vw, 160px); }
}

/* Hareket azaltma tercihi: geçiş animasyonu yok, değişim ANINDA olur.
   Otomatik dönüş de JS tarafında hiç başlatılmaz.
   Seçiciler, görünür slayt kuralıyla (0,5,0) AYNI özgüllükte yazılmıştır ve
   ondan sonra geldikleri için kazanırlar — bu yüzden !important gerekmez. */
@media (prefers-reduced-motion: reduce) {
  .hero-carousel .hero-slide,
  .hero-carousel[data-hero-ready][data-current] .hero-slide[data-index] {
    transition: none;
    transform: none;
  }
}

/* ---------- İstatistik kartı — hero'nun altında, panele hafifçe taşar ----------
   Negatif üst boşluk hero'nun alt dolgusundan büyük olduğu için kart panelin
   üzerine ~50px biner. */
.stats-band {
  position: relative;
  z-index: 3;
  margin-top: clamp(-120px, -9vw, -80px);
  padding: 0 var(--pad) clamp(40px, 5vw, 64px);
}
.stats-band .grid-4 {
  background: var(--color-surface);
  border-radius: 28px;
  box-shadow: 0 20px 50px var(--color-shadow), 0 2px 6px var(--color-shadow);
  padding: clamp(26px, 3vw, 40px) clamp(22px, 3vw, 42px);
  gap: clamp(22px, 2.4vw, 36px);
  min-height: 172px;   /* CLS önleme */
  align-items: start;
}
.stats-band .stat-item { display: grid; justify-items: start; gap: 9px; }
.stat-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
  background: var(--stat-chip-bg);
  color: var(--stat-chip-fg);
  margin-bottom: 2px;
}
.stat-chip svg { width: 21px; height: 21px; }
.stats-band .stat-num { margin: 0; color: var(--color-heading); font-size: clamp(28px, 2.9vw, 42px); }
.stat-underline { display: block; width: 34px; height: 3px; border-radius: 2px; background: var(--stat-underline-color); }
.stats-band .stat-label { margin: 0; color: var(--color-text-muted); }

/* ---------- Hero düzeni: duyarlılık ---------- */

/* Tablet ve altı: panel içeriğin altına iner, kavis sadeleşir, kart 2x2 olur. */
@media (max-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(88px, 12vw, 118px); }
  .stats-band { margin-top: clamp(-100px, -11vw, -70px); }
  .hero-visual {
    min-height: 340px;
    margin-top: 12px;
    margin-right: calc(-1 * var(--pad));
    margin-bottom: calc(-1 * clamp(40px, 6vw, 64px));
  }
  /* Kavis sadeleşir: tek sütunda S-eğrisi metni kırpacak kadar yer bulamıyor. */
  .hero-panel { min-height: 360px; clip-path: none; border-radius: 28px 0 0 28px; }
  /* Aynalı varyantta panel sola yaslandığı için yuvarlatma da karşı köşelere geçer. */
  .hero[data-hero="mirror"] .hero-panel { border-radius: 0 28px 28px 0; }
  /* Panel alçalıp genişlediği için görsel ve slogan YAN YANA konumlanır. */
  .hero-brain { top: 46%; left: 68%; width: min(48%, 268px); }
  .hero-script { left: clamp(70px, 12%, 112px); right: auto; max-width: 44%; bottom: clamp(84px, 22%, 120px); }
  .stats-band .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Telefon: tek sütun, butonlar tam genişlik, görsel küçülür. */
@media (max-width: 480px) {
  .hero { padding-bottom: clamp(72px, 18vw, 96px); }
  .hero-visual { margin-bottom: calc(-1 * clamp(28px, 8vw, 44px)); }
  .stats-band { margin-top: clamp(-90px, -20vw, -60px); }
  .hero-copy .btn { flex: 1 1 100%; width: 100%; justify-content: center; text-align: center; }
  .hero-visual, .hero-panel { min-height: 330px; }
  /* Telefonda yan yana yer yok: görsel üstte ortalanır, slogan altına iner. */
  .hero-brain { top: 36%; left: 54%; width: min(56%, 186px); }
  .hero-dotgrid { top: 22px; right: 20px; transform: scale(0.8); transform-origin: top right; }
  .hero-script { font-size: 20px; left: clamp(64px, 20%, 96px); right: clamp(16px, 5%, 40px); max-width: none; bottom: clamp(56px, 17%, 84px); }
  .stats-band .grid-4 { grid-template-columns: minmax(0, 1fr) !important; border-radius: 22px; }
}

/* Hareket azaltma tercihi: dekoratif dönüşü sıfırla. */
@media (prefers-reduced-motion: reduce) {
  .hero-script { transform: none; }
}

/* ---------- Cards / tiles ---------- */
.tiles { display: grid; gap: 2px; background: var(--color-border); border: 2px solid var(--color-border); }
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { background: var(--color-surface); padding: 32px 28px 36px; color: var(--color-text); }
.tile:hover { background: var(--color-surface-hover); }
.tile .num { font-weight: 800; font-size: 13px; letter-spacing: 0.08em; color: var(--color-accent); margin: 0 0 20px; }
.tile h3 { font-weight: 600; font-size: 19px; line-height: 1.3; margin: 0 0 12px; }
.tile p { font-size: 14.5px; line-height: 1.62; color: var(--color-text-muted-2); margin: 0; }

.post-card { display: block; color: var(--color-text); border-top: 2px solid var(--color-border); padding-top: 24px; }
.post-card:hover { border-color: var(--color-accent); color: var(--color-text); }
.post-meta { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 14px; }
.post-card h3 { font-weight: 600; font-size: 20px; line-height: 1.3; margin: 0 0 12px; }
.post-card p { font-size: 14.5px; line-height: 1.62; color: var(--color-text-muted-2); margin: 0 0 16px; }

/* ---------- Forms ---------- */
label.field-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-subtle); }
.input {
  background: var(--color-surface); border: 2px solid var(--color-border); color: var(--color-text);
  font-size: 15px; padding: 14px 16px; width: 100%; box-sizing: border-box;
}
.input:focus { border-color: var(--color-accent); outline: none; }
textarea.input { resize: vertical; }

/* ---------- Footer ---------- */
.site-footer { border-top: 2px solid var(--color-border); background: var(--color-footer-bg); }
.site-footer .cols { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: clamp(24px, 4vw, 56px); }
.foot-h { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 16px; }
.foot-links { display: grid; gap: 10px; }
.foot-links a { font-size: 14.5px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.foot-links a:hover { color: var(--color-accent); }
.foot-bottom { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.foot-bottom p { font-size: 12.5px; letter-spacing: 0.04em; color: var(--color-text-faint); margin: 0; }
.foot-bottom a { font-size: 12.5px; color: var(--color-text-subtle); }

/* ---------- Cart drawer ---------- */
.drawer-overlay { position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--color-overlay); display: flex; justify-content: flex-end; }
.drawer { width: min(420px, 100%); background: var(--color-surface); border-left: 2px solid var(--color-border); padding: 28px; display: flex; flex-direction: column; gap: 20px; }

/* ---------- WhatsApp float ----------
   Yeşil, WhatsApp'ın kurumsal rengidir ve her temada sabit kalır. */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-float); width: 54px; height: 54px; border-radius: var(--radius-round); background: var(--color-whatsapp); color: var(--color-whatsapp-text); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px var(--color-shadow); font-weight: 700; font-size: 22px; }
.wa-float:hover { color: var(--color-whatsapp-text); filter: brightness(1.08); }

/* ===================== ADMIN ===================== */
.admin-body { background: var(--color-bg-alt); }
.admin-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; background: var(--color-bg-alt); }
.admin-aside { border-right: 2px solid var(--color-border); background: var(--color-surface-alt); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-brand { padding: 22px; border-bottom: 2px solid var(--color-border); display: flex; align-items: center; gap: 12px; }
.admin-brand img { width: 38px; height: 38px; object-fit: cover; }
.admin-nav { display: flex; flex-direction: column; padding: 14px 0; flex: 1; }
.admin-nav button { border: 0; border-left: 3px solid transparent; background: transparent; color: var(--color-text-muted); font-weight: 600; font-size: 13.5px; letter-spacing: 0.04em; padding: 13px 20px; text-align: left; cursor: pointer; }
.admin-nav button:hover { color: var(--color-text); }
.admin-nav button.active { border-left-color: var(--color-accent); background: var(--color-surface); color: var(--color-accent); }
.admin-foot { border-top: 2px solid var(--color-border); padding: 18px 20px; }

.admin-main { min-width: 0; }
.admin-header { border-bottom: 2px solid var(--color-border); background: var(--color-surface-alt); padding: 0 clamp(20px, 3vw, 36px); min-height: 74px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.admin-header h1 { font-weight: 800; font-size: 18px; letter-spacing: 0.02em; margin: 0; margin-right: auto; color: var(--color-heading); }
.pill { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 12px; border: 2px solid var(--color-accent); color: var(--color-accent); }
.pill.off { border-color: var(--color-text-subtle); color: var(--color-text-subtle); }
.admin-page { padding: clamp(24px, 3vw, 40px); }
.admin-burger { display: none; background: var(--color-surface); border: 2px solid var(--color-border); color: var(--color-text); padding: 9px 12px; cursor: pointer; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--color-border); border: 2px solid var(--color-border); }
.kpi { background: var(--color-surface-alt); padding: 24px; }
.kpi .label { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-subtle); margin: 0 0 14px; }
.kpi .value { font-weight: 800; font-size: 34px; line-height: 1; color: var(--color-accent); margin: 0 0 10px; }
.kpi .note { font-size: 12.5px; color: var(--color-text-subtle); margin: 0; }

.panel { background: var(--color-surface-alt); border: 2px solid var(--color-border); }
.panel-pad { background: var(--color-surface-alt); padding: 26px; }
.panel-title { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 20px; }

.tbl-wrap { border: 2px solid var(--color-border); background: var(--color-surface-alt); overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; min-width: 820px; }
table.tbl thead tr { background: var(--color-surface); }
table.tbl th { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-subtle); padding: 14px 18px; border-bottom: 2px solid var(--color-border); text-align: left; }
table.tbl td { padding: 16px 18px; border-bottom: 2px solid var(--color-border-soft); font-size: 14px; color: var(--color-text-muted); vertical-align: middle; }
table.tbl td.strong { font-size: 14.5px; font-weight: 500; color: var(--color-text); }
.tag { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 9px; border: 2px solid var(--color-accent); color: var(--color-accent); white-space: nowrap; }
.tag.off { border-color: var(--color-text-subtle); color: var(--color-text-subtle); }
.row-actions { display: flex; gap: 8px; }
.mini-btn { border: 2px solid var(--color-border); background: transparent; color: var(--color-accent); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 11px; cursor: pointer; }
.mini-btn:hover { border-color: var(--color-accent); }
.mini-btn.muted { color: var(--color-text-muted-2); }
.mini-btn.muted:hover { color: var(--color-text); border-color: var(--color-text-subtle); }

.admin-input { background: var(--color-surface-alt); border: 2px solid var(--color-border); color: var(--color-text); font-size: 14.5px; padding: 12px 14px; width: 100%; box-sizing: border-box; }
.admin-input:focus { border-color: var(--color-accent); outline: none; }
/* Geçersiz değer taşıyan alan. aria-invalid ile birlikte kullanılır. */
.admin-input.invalid, .admin-input.invalid:focus { border-color: var(--color-danger); }
.filters { display: flex; gap: 14px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }

/* Görsel olarak gizli ama ekran okuyucuya açık etiket. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Renk seçici. Tarayıcının varsayılan kenarlığı panelin diline uydurulur.
   Klavye ile odaklanabilir olduğu için odak halkası açıkça tanımlanır. */
.color-input { width: 48px; height: 38px; padding: 3px; border: 2px solid var(--color-border); background: var(--color-surface-alt); cursor: pointer; flex: 0 0 auto; }
.color-input:hover { border-color: var(--color-accent); }
.color-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.color-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-input::-webkit-color-swatch { border: none; }
.color-input::-moz-color-swatch { border: none; }

.toggle { width: 56px; height: 28px; border: 2px solid var(--color-border); background: var(--color-bg-alt); padding: 0; cursor: pointer; display: flex; align-items: center; }
.toggle.on { border-color: var(--color-primary); background: var(--color-primary); justify-content: flex-end; }
.toggle.off { justify-content: flex-start; }
.toggle .knob { width: 20px; height: 20px; margin: 0 2px; display: block; background: var(--color-text-faint); }
.toggle.on .knob { background: var(--color-primary-text); }

.check { width: 22px; height: 22px; border: 2px solid var(--color-border); background: transparent; cursor: pointer; padding: 0; }
.check.on { border-color: var(--color-primary); background: var(--color-primary); }

/* ---------- Modal + toast ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-overlay-strong); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal { width: min(440px, 100%); background: var(--color-surface-alt); border: 2px solid var(--color-border); padding: 28px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: var(--z-toast); background: var(--color-surface); border: 2px solid var(--color-accent); color: var(--color-text); padding: 14px 22px; font-size: 14px; box-shadow: 0 12px 30px var(--color-shadow); }

.dashed { border: 2px dashed var(--color-border); background: var(--color-bg-alt); }
.login-wrap { min-height: 100vh; background: var(--color-bg-alt); display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: min(420px, 100%); border: 2px solid var(--color-border); background: var(--color-surface-alt); padding: 32px; display: grid; gap: 18px; }

/* ===================== RESPONSIVE ===================== */

/* Tablet: three-up grids go two-up rather than straight to a single tall stack,
   and the header hands over to the burger while there is still room — the menu
   is admin-managed, so the item count is unbounded and the links collide well
   before the old 900px cut-off. */
@media (max-width: 1024px) {
  .grid-3, .tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .num-row.steps { grid-template-columns: minmax(44px, 80px) minmax(0, 1fr); }
  .num-row.steps > :nth-child(3) { grid-column: 2; }

  /* Tema anahtarı bu genişlikte mobil menü satırına devrediyor; başlıkta çift
     kontrol kalmasın. */
  .main-nav, .cart-btn, .theme-switch-wrap { display: none; }
  .nav-toggle { display: inline-block; }
  .site-header .bar { gap: 12px; }
  .mobile-nav { display: grid; gap: 2px; background: var(--color-border); border-top: 2px solid var(--color-border); max-height: calc(100vh - 76px); overflow-y: auto; }
  .mobile-nav a, .mobile-nav button { background: var(--color-surface); border: 0; width: 100%; text-align: left; padding: 15px var(--pad); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--color-navbar-text); cursor: pointer; }
  .mobile-nav a.active { color: var(--color-navbar-text-active); }
  .mobile-nav button { color: var(--color-accent); }
}

@media (max-width: 900px) {
  .site-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 860px) {
  .grid-2, .tiles-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 640px) {
  .grid-3, .tiles-3 { grid-template-columns: minmax(0, 1fr) !important; }
  .num-row.steps, .num-row.svc { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .num-row.steps > :nth-child(3) { grid-column: auto; }
  .num-row.svc { padding: 28px 0; }
}

@media (max-width: 1180px) {
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .admin-aside {
    position: fixed; z-index: var(--z-aside); width: 280px; left: 0; top: 0;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .admin-aside.open { transform: translateX(0); }
  .admin-burger { display: inline-block; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--color-overlay-soft); }
}

@media (max-width: 560px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .header-cta { padding: 12px 14px; }
  .grid-4 { grid-template-columns: minmax(0, 1fr) !important; }
  .field-pair { grid-template-columns: minmax(0, 1fr); }
  .site-footer .cols { grid-template-columns: minmax(0, 1fr) !important; }
  .tabs > * { min-width: 100%; text-align: center; }
  .drawer { padding: 22px 18px; }
  .tile { padding: 26px 22px 30px; }
}

/* Small phones: the header still has to fit brand + CTA + burger on one line. */
@media (max-width: 420px) {
  .brand img { width: 34px; height: 34px; }
  .brand span { font-size: 14px; letter-spacing: 0.08em; }
  .header-cta { padding: 11px 12px; font-size: 11.5px; }
  .nav-toggle { padding: 9px 11px; }
  .btn { padding: 14px 18px; font-size: 13px; }
  .wa-float { right: 14px; bottom: 14px; width: 48px; height: 48px; font-size: 20px; }
}