/* ---- tokens.css ---- */
/*
  Tio Medikal — Tasarım Token Sistemi
  ===================================
  Birincil renk, kaynak/logo.jpeg dosyasından piksel örneklemesiyle çıkarıldı
  (bkz. proje notları). En sık geçen dolgu pikseli #008E8F — RAL 5018
  (Türkisblau) ailesine karşılık gelir. Bu HAM değer sadece büyük/dekoratif
  kullanım için güvenlidir (~4:1 kontrast); metin/buton gibi küçük ölçekli
  kullanımlar için WCAG AA'yı (4.5:1) geçen koyulaştırılmış bir "interactive"
  türevi (--color-primary) hesaplanarak üretildi. Tüm kontrast oranları
  aşağıda satır içi yorumlarla belgelendi (WCAG 2.1 AA eşiği: normal metin
  4.5:1, büyük metin/UI bileşeni 3:1).

  Mimari: primitive (ham, moddan bağımsız) → semantic (açık/koyu mod'a göre
  değişen, gerçekte kullanılan) token'lar. base.css SADECE semantic
  token'ları semantik HTML etiketlerine uygular — utility class yok.
*/

:root {
  /* ============ PRIMITIVE: Marka turkuazı (logodan örneklendi) ============ */
  --teal-raw: #008e8f;      /* logo.jpeg örneklemesi — dolgu pikseli, RAL 5018 */
  --teal-700: #007a7a;      /* interactive/light — üzerinde beyaz metin 5.17:1 */
  --teal-800: #005b5c;      /* interactive hover/light — 7.92:1 */
  --teal-300: #08a6a7;      /* interactive/dark — koyu lacivert zemin üzerinde 5.89:1 */
  --teal-200: #09ccce;      /* interactive hover/dark */
  --teal-tint-light: #edfafa;
  --teal-tint-dark: #1c4a4a;

  /* ============ PRIMITIVE: Koyu lacivert (metin + zemin ikili rolü) ======= */
  --navy-900: #0e1a25;      /* açık modda metin (17.81:1 beyaz üzerinde) · koyu modda zemin */
  --navy-800: #162939;      /* koyu modda kart/yüzey zemini */
  --navy-700: #1f3a51;      /* koyu modda kenarlık */

  /* ============ PRIMITIVE: Nötr gri skalası — 9 kademe =================== */
  --gray-100: #f6f8f8;
  --gray-200: #ebeef0;
  --gray-300: #d6dee0;
  --gray-400: #b6c4c8;
  --gray-500: #91a5ac;
  --gray-600: #6b868e;
  --gray-700: #51656c;      /* açık modda ikincil metin — 6.13:1 beyaz üzerinde */
  --gray-800: #38464a;
  --gray-900: #191f21;

  /* ============ PRIMITIVE: Durum renkleri (başarı/uyarı/hata) ============ */
  --success-700: #1b7a4b;   /* açık mod — 5.34:1 beyaz üzerinde */
  --success-300: #34d399;   /* koyu mod — 9.16:1 lacivert üzerinde */
  --warning-800: #8a5a00;   /* açık mod — 5.93:1 beyaz üzerinde */
  --warning-300: #fbbf24;   /* koyu mod — 10.55:1 lacivert üzerinde */
  --danger-700: #b3261e;    /* açık mod — 6.54:1 beyaz üzerinde */
  --danger-300: #f87171;    /* koyu mod — 6.36:1 lacivert üzerinde */

  /* Marka rozetleri — turkuaz dışındaki iki alt marka için ayrı, sabit vurgu */
  --gold-accent: #a8791a;   /* sertifika mührü / TIOPLAS+ vurgusu */
  --blue-accent: #1e4d7b;   /* TIOMEDIKAL vurgusu */

  /* ================= SEMANTIC — açık mod (varsayılan) ===================== */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: var(--gray-100);
  --color-surface-sunken: var(--gray-200);
  /* Eksik görsel yer tutucusu bilinçli olarak nötr gri skalasından AYRI —
     sıcak/kremimsi bir ton, "veri eksik ama alarm değil" hissi verir (bkz.
     components.css#.media-placeholder). Metin kontrastı: 5.49:1 (açık),
     8.56:1 (koyu) — ikisi de WCAG AA'yı (4.5:1) geçer. */
  --color-placeholder-bg: #f7f2e7;
  --color-placeholder-border: #a89972;

  --color-text: var(--navy-900);
  --color-text-muted: var(--gray-700);
  --color-border: var(--gray-300);
  --color-border-strong: var(--gray-500);

  --color-primary: var(--teal-700);
  --color-primary-hover: var(--teal-800);
  --color-primary-tint: var(--teal-tint-light);
  --color-primary-contrast: #ffffff;   /* birincil zemin üzerindeki metin */
  --color-brand: var(--teal-raw);      /* logo/dekoratif — sadece büyük/kalın kullanım */

  --color-success: var(--success-700);
  --color-warning: var(--warning-800);
  --color-danger: var(--danger-700);
  --color-focus: #ff8a00;              /* her iki modda da yeterli kontrast */

  --shadow-color: 16 32 45;            /* navy tonlu gölge — rgb() bileşenleri */
  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.10);
  --shadow-md: 0 8px 24px rgb(var(--shadow-color) / 0.14);

  color-scheme: light;
}

/* Koyu mod iki bağımsız sinyalden gelebilir: sistem tercihi (prefers-color-scheme)
   VEYA header'daki manuel açık/koyu anahtarı (data-theme, bkz. assets/js/theme-toggle.js).
   Manuel seçim HER ZAMAN sistemi ezer — bu yüzden media query ":not([data-theme="light"])"
   ile korunur (kullanıcı sistem koyuyken elle açığı seçtiyse media query devre dışı
   kalır) ve [data-theme="dark"] kuralı sistem AÇIK olsa bile koyuyu zorlar. Token
   değerleri kasıtlı olarak iki blokta AYNI — bu dosya önişlemcisiz düz CSS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--navy-900);
    --color-surface: var(--navy-800);
    --color-surface-alt: var(--navy-800);
    --color-surface-sunken: var(--navy-700);
    --color-placeholder-bg: #2b2418;
    --color-placeholder-border: #6b5f42;

    --color-text: var(--gray-100);
    --color-text-muted: var(--gray-400);
    --color-border: var(--navy-700);
    --color-border-strong: var(--gray-600);

    --color-primary: var(--teal-300);
    --color-primary-hover: var(--teal-200);
    --color-primary-tint: var(--teal-tint-dark);
    --color-primary-contrast: var(--navy-900);
    --color-brand: var(--teal-300);

    --color-success: var(--success-300);
    --color-warning: var(--warning-300);
    --color-danger: var(--danger-300);

    --shadow-color: 0 0 0;
    --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.45);
    --shadow-md: 0 8px 24px rgb(var(--shadow-color) / 0.55);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: var(--navy-900);
  --color-surface: var(--navy-800);
  --color-surface-alt: var(--navy-800);
  --color-surface-sunken: var(--navy-700);
  --color-placeholder-bg: #2b2418;
  --color-placeholder-border: #6b5f42;

  --color-text: var(--gray-100);
  --color-text-muted: var(--gray-400);
  --color-border: var(--navy-700);
  --color-border-strong: var(--gray-600);

  --color-primary: var(--teal-300);
  --color-primary-hover: var(--teal-200);
  --color-primary-tint: var(--teal-tint-dark);
  --color-primary-contrast: var(--navy-900);
  --color-brand: var(--teal-300);

  --color-success: var(--success-300);
  --color-warning: var(--warning-300);
  --color-danger: var(--danger-300);

  --shadow-color: 0 0 0;
  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.45);
  --shadow-md: 0 8px 24px rgb(var(--shadow-color) / 0.55);

  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root {
  /* ================= TİPOGRAFİ — akışkan, 6 kademe ========================
     Taban: gövde metni (--fs-body) HİÇBİR ekranda 16px (1rem) altına inmez —
     clamp() alt sınırı tam olarak 1rem'dir. Küçük/ikincil metin (--fs-caption)
     gövde metni SAYILMADIĞI için bu kısıtın dışındadır (rozet, tarih, dipnot). */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Roboto Mono", Consolas, monospace;

  --fs-caption: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);   /* ~13–14px */
  --fs-body:    clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);        /* 16–17px — ASLA 16px altına inmez */
  --fs-h4:      clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);     /* ~19–22px */
  --fs-h3:      clamp(1.375rem, 1.2rem + 1vw, 1.75rem);         /* ~22–28px */
  --fs-h2:      clamp(1.75rem, 1.45rem + 1.8vw, 2.375rem);      /* ~28–38px */
  --fs-h1:      clamp(2.25rem, 1.7rem + 3.2vw, 3.5rem);         /* ~36–56px */

  --lh-tight: 1.15;
  --lh-normal: 1.6;
  --measure: 70ch;              /* satır uzunluğu: 65–75 karakter aralığının ortası */
  --tracking-label: 0.08em;
  --tracking-plate: 0.02em;

  /* ================= BOŞLUK ÖLÇEĞİ — 4px taban ============================ */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */

  /* ================= DÜZEN / KENARLIK / GEÇİŞ ============================= */
  --content-max: 78rem;
  --content-narrow: 46rem;
  /* Header'ın SABİT yüksekliği — kaydırınca "incelme" efekti bu değeri asla
     değiştirmez (sadece iç öğeler transform: scale ile küçülür), bu yüzden
     mega menü paneli de aynı token'ı `top` için kullanarak senkron kalır. */
  --header-block-size: 4.5rem;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --border-w: 1px;

  --transition-fast: 150ms ease;
  --transition-base: 240ms ease;
  /* Yerleşik ease-out UI hareketi için fazla zayıf — kart kalkışı gibi
     transform geçişleri bu güçlü eğriyi kullanır. */
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);

  --z-header: 100;
  --z-skip-link: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}

/* ============================================================================
   GERİYE DÖNÜK UYUMLULUK — layout.css / components.css / pages.css bu eski
   isimlerle yazıldı (bkz. önceki oturum). Yeniden adlandırma bu dosyaların
   kapsamı dışında olduğundan, eski adlar burada yeni semantic token'lara
   köprüleniyor. Yeni kod DOĞRUDAN yukarıdaki semantic adları kullanmalı;
   aşağıdaki blok yalnızca mevcut dosyaları kırmamak içindir.
   ========================================================================= */
:root {
  --color-ink: var(--color-text);
  --color-ink-soft: var(--color-text-muted);
  --color-plate: var(--navy-900);          /* footer/plaka her modda sabit koyu şerit */
  --color-plate-text: var(--gray-100);
  --color-plate-line: rgb(231 235 231 / 0.22);
  --color-primary-dark: var(--color-primary-hover);
  --color-accent: var(--gold-accent);

  --brand-tioset: var(--color-primary);
  --brand-tioset-tint: var(--color-primary-tint);
  --brand-tiomedikal: var(--blue-accent);
  --brand-tiomedikal-tint: var(--gray-200);
  --brand-tioplas: var(--gold-accent);
  --brand-tioplas-tint: #f5ecd8;

  /* eski numaralı ölçek → yeni semantic tipografi (bkz. yorum: rol eşleşmesi) */
  --fs-100: var(--fs-caption);
  --fs-200: var(--fs-body);
  --fs-300: var(--fs-body);
  --fs-400: var(--fs-h4);
  --fs-500: var(--fs-h3);
  --fs-700: var(--fs-h2);
}

/* ---- base.css ---- */
/*
  base.css — token'lar doğrudan semantik etiketlere uygulanır.
  Amaç: h1–h6, p, a, table, form elemanları vb. HİÇBİR class eklenmeden
  doğru görünmeli. Utility class yok; bileşene özgü varyasyonlar
  components.css'te, ama temel görünüm her zaman burada, etikette kurulu.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* ---------- Başlıklar ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text);
  font-weight: 800;
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin-block-end: var(--space-4);
}

h1 {
  font-size: var(--fs-h1);
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
  font-weight: 700;
}

h5 {
  font-size: var(--fs-body);
  font-weight: 700;
}

h6 {
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}

/* ---------- Gövde metni ---------- */

p,
li,
dd {
  max-inline-size: var(--measure);
}

p {
  margin-block-end: var(--space-4);
}

p:last-child {
  margin-block-end: 0;
}

ul,
ol,
dl {
  margin-block-end: var(--space-4);
}

ul:last-child,
ol:last-child,
dl:last-child {
  margin-block-end: 0;
}

small {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

strong,
b {
  font-weight: 700;
}

/* ---------- Bağlantılar ---------- */

a {
  color: var(--color-primary);
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-hover);
}

/* ---------- Alıntı / ayraç ---------- */

blockquote {
  padding-inline-start: var(--space-5);
  border-inline-start: 3px solid var(--color-primary);
  color: var(--color-text-muted);
  font-size: var(--fs-h4);
  font-style: italic;
  max-inline-size: var(--measure);
}

hr {
  border: none;
  border-block-start: var(--border-w) solid var(--color-border);
  margin-block: var(--space-6);
}

/* ---------- Kod ---------- */

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-alt);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
}

pre {
  font-family: var(--font-mono);
  background: var(--color-surface-alt);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
}

pre code {
  background: none;
  border: none;
  padding: 0;
}

/* ---------- Tablolar ---------- */

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-body);
}

th,
td {
  text-align: start;
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--border-w) solid var(--color-border);
  vertical-align: top;
}

th {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

caption {
  text-align: start;
  font-weight: 700;
  margin-block-end: var(--space-3);
}

/* ---------- Medya ---------- */

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- Form elemanları ---------- */

label {
  font-weight: 600;
  color: var(--color-text);
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

input,
textarea,
select {
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--color-primary);
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* ---------- Seçim rengi ---------- */

::selection {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

/* ---------- Erişilebilirlik ---------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: -3rem;
  z-index: var(--z-skip-link);
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--transition-fast);
}

.skip-link:focus-visible {
  top: var(--space-3);
}

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

ul[class],
ol[class] {
  list-style: none;
  padding-inline-start: 0;
}

/* ---------- Hareket azaltma tercihi ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- layout.css ---- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--narrow {
  max-width: var(--content-narrow);
}

/* ---------- Site Header ---------- */

.header-scroll-sentinel {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inline-size: 1px;
  block-size: 1px;
  pointer-events: none;
  opacity: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-block-end: var(--border-w) solid transparent;
  /* Yükseklik HER ZAMAN sabit (--header-block-size) — "incelme" efekti sadece
     iç öğelerin transform: scale ile küçülmesiyle sağlanır (compositor-only,
     layout'u tetiklemez), bu yüzden kaydırma sırasında CLS oluşmaz. */
  block-size: var(--header-block-size);
  transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  border-block-end-color: var(--color-border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  block-size: 100%;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--fs-400);
  color: var(--color-ink);
  text-decoration: none;
  transform-origin: left center;
  transition: transform var(--transition-base);
}

.site-header.is-scrolled .site-header__brand {
  transform: scale(0.9);
}

[dir="rtl"] .site-header__brand {
  transform-origin: right center;
}

.site-header__brand svg {
  block-size: 2rem;
  inline-size: auto;
}

/* Gerçek logo artık şeffaf (assets/img/logo/tio-medikal-logo.png) — açık
   modda header zemini zaten beyaz olduğu için ek zemine gerek yok. */
.site-header__brand img {
  block-size: 3.25rem;
  inline-size: auto;
}

/* Logodaki "MEDİKAL" yazısı ve daire çevre çizgileri koyu renkte — koyu
   modda header zemini koyulaşınca bunlar neredeyse görünmez olur. Sadece
   koyu modda logoya açık bir "kart" zemini veriyoruz (açık modda dokunmuyoruz,
   orada zaten doğal şeffaflık en iyi sonucu veriyor). İki sinyal: sistem
   tercihi VEYA manuel anahtar (bkz. tokens.css#data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header__brand img {
    background: #ffffff;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    box-sizing: content-box;
  }
}

:root[data-theme="dark"] .site-header__brand img {
  background: #ffffff;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  box-sizing: content-box;
}

.primary-nav {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Dil değiştirici dar ekranlarda header'ı taşırıyordu (logo + 4 dil + tema
   anahtarı + CTA + hamburger 375px'e sığmıyordu) — mobilde header'dan
   kaldırılıp mobil menü panelinin içine taşındı (bkz. .mobile-nav__lang),
   masaüstünde (64rem+) yerine geri döner. */
.header-actions .lang-switch {
  display: none;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-w) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

@media (min-width: 64rem) {
  .site-header__bar {
    align-items: center;
  }

  .primary-nav {
    display: block;
  }

  .primary-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  .primary-nav a {
    text-decoration: none;
    color: var(--color-ink);
    font-weight: 600;
    font-size: var(--fs-200);
  }

  .primary-nav a:hover {
    color: var(--color-primary);
  }

  .primary-nav__list > li {
    position: relative;
  }

  .primary-nav a[aria-current="page"],
  .primary-nav a.is-active-section {
    color: var(--color-primary);
    font-weight: 700;
  }

  .nav-toggle {
    display: none;
  }

  .header-actions .lang-switch {
    display: block;
  }

  /* ---------- Mega menü (Ürünler) — masaüstü ---------- */

  .primary-nav__item.nav-mega {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .primary-nav__trigger-link {
    text-decoration: none;
    color: var(--color-ink);
    font-weight: 600;
    font-size: var(--fs-200);
  }

  .primary-nav__trigger-link:hover {
    color: var(--color-primary);
  }

  .primary-nav__trigger-link[aria-current="page"],
  .primary-nav__trigger-link.is-active-section {
    color: var(--color-primary);
    font-weight: 700;
  }

  .primary-nav__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    color: var(--color-ink-soft);
  }

  .primary-nav__trigger:hover {
    color: var(--color-primary);
  }
}

.nav-mega__chevron {
  transition: transform var(--transition-fast);
}

.primary-nav__trigger[aria-expanded="true"] .nav-mega__chevron,
.mobile-nav__trigger[aria-expanded="true"] .nav-mega__chevron {
  transform: rotate(180deg);
}

.nav-mega__panel {
  position: fixed;
  inset-inline: 0;
  top: var(--header-block-size);
  background: var(--color-surface);
  border-block-end: var(--border-w) solid var(--color-border);
  box-shadow: var(--shadow-md);
  z-index: var(--z-header);
}

.nav-mega__panel[hidden] {
  display: none;
}

.nav-mega__grid {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-6) var(--space-4);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(14rem, 0.9fr);
  gap: var(--space-6);
}

.nav-mega__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-mega__group-title {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-primary);
  margin-block-end: var(--space-2);
}

.nav-mega__cat {
  font-weight: 700;
  margin-block-start: var(--space-3);
}

.nav-mega__cat:first-of-type {
  margin-block-start: 0;
}

.nav-mega__cat a {
  color: var(--color-ink);
  text-decoration: none;
}

.nav-mega__cat a:hover {
  color: var(--color-primary);
}

.nav-mega__group ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block-start: var(--space-1);
}

.nav-mega__group ul a {
  display: block;
  padding-block: var(--space-1);
  color: var(--color-ink-soft);
  font-size: var(--fs-200);
  text-decoration: none;
}

.nav-mega__group ul a:hover,
.nav-mega__group ul a:focus-visible {
  color: var(--color-primary);
}

.nav-mega__promo {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}

.nav-mega__promo-title {
  font-weight: 700;
  font-size: var(--fs-300);
}

/* Mobil açılır menü */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) + 10);
  background: var(--color-surface);
  overflow-y: auto;
  padding: var(--space-5);
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav__close {
  margin-inline-start: auto;
  display: block;
  padding: var(--space-2);
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
}

.mobile-nav__list a {
  display: block;
  padding-block: var(--space-3);
  border-block-end: var(--border-w) solid var(--color-border);
  text-decoration: none;
  color: var(--color-ink);
  font-weight: 600;
}

/* Dil değiştirici — masaüstünde header'da, mobilde bu panelde (bkz.
   .header-actions .lang-switch). */
.mobile-nav__lang {
  margin-block-start: var(--space-5);
}

.mobile-nav__lang-list {
  display: flex;
  gap: var(--space-2);
}

.mobile-nav__lang-list a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: var(--border-w) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-ink-soft);
  font-weight: 700;
  font-size: var(--fs-100);
}

.mobile-nav__lang-list a[aria-current="true"] {
  background: var(--color-primary-tint);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---------- Mega menü (Ürünler) — mobil akordeon ---------- */
/* Masaüstüyle AYNI işaretleme (bkz. scripts/build.mjs#buildMegaMenuItem) —
   sadece konumlama static'e döner ve düz yığılmış listeye dönüşür. */

.mobile-nav__item.nav-mega {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.mobile-nav__trigger-link {
  flex: 1;
  min-inline-size: 0;
}

.mobile-nav__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  color: var(--color-ink-soft);
}

.nav-mega__panel--mobile {
  position: static;
  inset: auto;
  flex-basis: 100%;
  background: none;
  border: 0;
  box-shadow: none;
  z-index: auto;
}

.nav-mega__grid--mobile {
  max-width: none;
  margin-inline: 0;
  padding: 0 0 var(--space-4);
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

/* .mobile-nav__list a, alt ürün bağlantılarını da eşleştirir (genel kural) —
   sadece girinti/kalınlığı geçersiz kılmak yeterli, satır/renk/dolgu aynı
   kalsın diye devralınıyor (bkz. yukarıdaki .mobile-nav__list a). */
.nav-mega__group ul a {
  padding-inline-start: var(--space-5);
  font-weight: 400;
}

/* .btn'in kendi görünümünü .mobile-nav__list a'nın genel link stilinden
   (daha yüksek özgüllük) korumak için gereken en küçük geçersiz kılma seti. */
.mobile-nav .nav-mega__promo .btn {
  display: inline-flex;
  border-block-end-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---------- Ana içerik ---------- */

main {
  display: block;
}

.section {
  padding-block: var(--space-7);
}

.section--alt {
  background: var(--color-surface-alt);
}

.section__head {
  max-width: var(--content-narrow);
  margin-block-end: var(--space-6);
}

/* ---------- Grid yardımcıları ---------- */

.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--2 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 40rem) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56rem) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.product-layout {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 56rem) {
  .product-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------- Sayfa gövdesi ızgara varyantları (yeniden kullanılabilir) ---------- */
/* .container'ın üzerine kurulan, sayfa şablonlarının paylaştığı 3 varyant:
   içerik+kenar çubuğu, tam genişlik tek sütun, dar metin sütunu. CSS Grid'in
   grid-template-columns sırası `direction`'a göre otomatik ters döner, bu
   yüzden dir="rtl" (AR) sayfalarda .layout--sidebar ekstra kod olmadan doğru
   yönde akar. */

.layout {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 56rem) {
  .layout--sidebar {
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    align-items: start;
  }
}

.layout--full {
  grid-template-columns: minmax(0, 1fr);
}

.layout--narrow {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--content-narrow);
  margin-inline: auto;
}

/* ---------- Site Footer ---------- */

.site-footer {
  /* Footer her zaman koyu lacivert bir şerittir — tema (açık/koyu mod) ile
     değişmez, bu yüzden theme-reactive --color-ink değil sabit --color-plate
     kullanılır (spec-plate ile aynı görsel dil). */
  background: var(--color-plate);
  color: var(--color-plate-text);
  padding-block: var(--space-8) var(--space-6);
}

.site-footer a {
  color: var(--color-plate-text);
}

.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin-block-end: var(--space-7);
}

@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Sosyal medya bloğu — sadece assets/i18n/iletisim.json'da gerçek (null
   olmayan) bir hesap URL'si varsa build.mjs tarafından basılır (bkz.
   scripts/build.mjs#buildSocialBlock); tüm sütunları kaplayan ayrı bir satır. */
.footer-social-block {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-block-start: var(--space-5);
  border-block-start: var(--border-w) solid rgba(255, 255, 255, 0.15);
}

.footer-social-block .footer-col__title {
  margin-block-end: 0;
}

.footer-social {
  display: flex;
  gap: var(--space-3);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-plate-text);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.footer-social a:hover {
  background: var(--color-plate-text);
  color: var(--color-plate);
}

.footer-brand {
  font-size: var(--fs-400);
  margin-block-end: var(--space-3);
}

.footer-col__title {
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: rgba(255, 255, 255, 0.6);
  margin-block-end: var(--space-3);
}

.footer-grid ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-grid a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
}

.footer-grid a:hover {
  text-decoration: underline;
}

.footer-legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  padding-block-start: var(--space-5);
  border-block-start: var(--border-w) solid rgba(255, 255, 255, 0.15);
  font-size: var(--fs-100);
  color: rgba(255, 255, 255, 0.7);
}

/* ---- components.css ---- */
/* ---------- Butonlar ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--fs-200);
  text-decoration: none;
  border: var(--border-w) solid transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn svg {
  block-size: 1.1em;
  inline-size: 1.1em;
  flex-shrink: 0;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.btn--primary:hover {
  background: var(--color-primary-dark);
}

.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--secondary:hover {
  background: var(--color-primary-tint);
}

.btn--ghost {
  color: var(--color-ink);
}

/* "Teklif İste" ailesi (header CTA, hero, ürün sayfası, form gönder) — marka
   turkuazının iki tonu arasında hareketli bir gradyan, sadece hover/basılı
   durumda "kayar" (bkz. animate skill: sık görülen bir CTA'da sürekli döngü
   yerine yalnızca etkileşimle tetiklenen hareket). Renkler --color-primary /
   --color-primary-hover'dan geldiği için açık/koyu mod kontrastı token
   sisteminden otomatik miras alınır, ayrı bir koyu mod bloğu gerekmez. */
.btn--quote.btn--primary {
  position: relative;
  background-color: var(--color-primary);
  background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 50%, var(--color-primary) 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14) inset, 0 2px 10px rgb(var(--shadow-color) / 0.25);
  transition: background-position 450ms var(--ease-out-strong), transform 180ms var(--ease-out-strong), box-shadow 180ms var(--ease-out-strong);
}

@media (hover: hover) and (pointer: fine) {
  .btn--quote.btn--primary:hover {
    background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 50%, var(--color-primary) 100%);
    background-position: 100% 0%;
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.22) inset, 0 8px 22px rgb(var(--shadow-color) / 0.38);
  }
}

.btn--quote.btn--primary:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 100ms;
}

@media (prefers-reduced-motion: reduce) {
  .btn--quote.btn--primary {
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  .btn--quote.btn--primary:hover,
  .btn--quote.btn--primary:active {
    transform: none;
  }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---------- Breadcrumb ---------- */

.breadcrumb {
  padding-block: var(--space-3);
  font-size: var(--fs-100);
  color: var(--color-ink-soft);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding-inline-start: 0;
}

.breadcrumb a {
  color: var(--color-ink-soft);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-inline-start: var(--space-2);
  color: var(--color-border-strong);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-ink);
  font-weight: 600;
}

/* ---------- Rozetler ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge--tioset {
  background: var(--brand-tioset-tint);
  color: var(--brand-tioset);
}

.badge--tiomedikal {
  background: var(--brand-tiomedikal-tint);
  color: var(--brand-tiomedikal);
}

.badge--tioplas {
  background: var(--brand-tioplas-tint);
  color: var(--brand-tioplas);
}

.badge--outline {
  background: transparent;
  border: var(--border-w) solid var(--color-border-strong);
  color: var(--color-ink-soft);
  text-transform: none;
  font-weight: 600;
}

.badge--warning {
  background: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface));
  color: var(--color-warning);
}

.badge--danger {
  background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));
  color: var(--color-danger);
}

/* ---------- Kartlar ---------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Kart başlıkları bazı sayfalarda h2, bazılarında (h2 zaten üstte kullanıldığında)
   h3 olarak basılır — hangi düzey uygunsa o kullanılır (bkz. scripts/scaffold.mjs),
   ama görsel boyut kart bağlamında HER ZAMAN aynı kalmalı; büyüklüğü etiketten
   değil bu kuraldan alsın. */
.card h2,
.card h3 {
  font-size: var(--fs-h3);
  margin-block-end: 0;
}

.card-link {
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast),
    transform 200ms var(--ease-out-strong);
}

.card-link:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

/* Kalkış efekti sadece gerçek imleçli cihazlarda — dokunmatikte tap sahte
   hover tetikler ve kart "asılı" kalır. */
@media (hover: hover) and (pointer: fine) {
  .card-link:hover {
    transform: translateY(-2px);
  }

  .card-link:active {
    transform: translateY(0);
  }
}

/* Token süreleri global olarak sıfırlansa da transform'un kendi 200ms'i var —
   azaltılmış harekette konum değişikliği tamamen kapatılır, gölge/kenar
   geçişleri (renk temelli) kalır. */
@media (prefers-reduced-motion: reduce) {
  .card-link:hover,
  .card-link:active {
    transform: none;
  }
}

.card__media {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.card__teaser {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-primary);
}

/* ---------- Tablolar (teknik şartname / set içeriği) ---------- */

.spec-table {
  width: 100%;
  font-size: var(--fs-200);
}

.spec-table caption {
  text-align: start;
  font-weight: 700;
  margin-block-end: var(--space-3);
}

.spec-table th,
.spec-table td {
  text-align: start;
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--border-w) solid var(--color-border);
  vertical-align: top;
}

.spec-table thead th {
  background: var(--color-surface-alt);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-ink-soft);
}

.spec-table tbody tr:hover {
  background: var(--color-surface-alt);
}

.table-scroll {
  overflow-x: auto;
}

/* Katalogdan doğrulanacak alan — kısa "[DOĞRULANACAK]" rozeti yerine artık
   /iletisim/'e giden bir bağlantı ("Güncel bilgi için iletişime geçin").
   Tam cümle taşıdığı için eski rozet/pill görünümü yerine sade bir link
   stiline geçildi; `data-field` özniteliği rapor/eksik-veri.md üretimi için
   korunuyor (bkz. build.mjs#writeReports), sadece görünüm değişti. */
.data-pending {
  color: var(--color-primary);
  text-decoration: underline;
  font-style: italic;
  font-size: var(--fs-100);
}

@media (hover: hover) and (pointer: fine) {
  .data-pending:hover {
    color: var(--color-primary-hover);
  }
}

/* ---------- Formlar ---------- */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
}

.form-field label {
  font-weight: 600;
  font-size: var(--fs-200);
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: var(--space-3);
  border: var(--border-w) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.form-field input:invalid[aria-invalid="true"],
.form-field select:invalid[aria-invalid="true"],
.form-field textarea:invalid[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.form-field__error {
  color: var(--color-danger);
  font-size: var(--fs-100);
}

.form-field__hint {
  color: var(--color-ink-soft);
  font-size: var(--fs-100);
}

/* Netlify Forms honeypot — ekran okuyucudan ve görsel olarak gizli, bot'a görünür */
.form-honeypot {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Checkbox alanları (KVKK onay vb.) ---------- */

.form-field--checkbox label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-weight: 400;
  font-size: var(--fs-100);
  color: var(--color-ink-soft);
}

.form-field--checkbox input[type="checkbox"] {
  flex-shrink: 0;
  margin-block-start: 0.2em;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  accent-color: var(--color-primary);
}

.form-field--checkbox a {
  color: var(--color-primary);
}

/* ---------- Form durum bölgeleri (aria-live) ---------- */
/* Boşken display:none — JS textContent'i doldurduğunda :empty eşleşmesi
   biter ve normal akışa döner; aria-live bölgesi DOM'dan hiç kaldırılmıyor
   (ekran okuyucular için var olmaya devam eder), sadece boşken görsel yer kaplamıyor. */

.form-status {
  font-size: var(--fs-200);
  font-weight: 600;
  margin-block-end: var(--space-4);
}

.form-status:empty {
  display: none;
  margin: 0;
}

.form-status--error {
  color: var(--color-danger);
}

.form-status--success {
  color: var(--color-success);
  font-size: var(--fs-300);
  padding: var(--space-4) var(--space-5);
  /* %8 — %12'de açık modda 4.53:1 (AA eşiğine 0.03 payla, render motoruna göre
     eşiğin altına düşme riski taşıyordu). %8 açık modda 4.78:1, koyu modda
     6.57:1 — ölçülüp doğrulandı (bkz. denetim raporu). */
  background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface));
  border-radius: var(--radius-md);
}

/* ---------- İki adımlı lead-form bileşeni (teklif/numune/katalog) ---------- */
/* bkz. scripts/scaffold.mjs#leadFormFields + assets/js/lead-form.js. Adım 2,
   Adım 1 geçerli olunca JS ile [hidden] kaldırılıp bir sonraki karede
   .is-visible eklenir (çift rAF) — bu yüzden geçiş [hidden] durumuna değil
   .is-visible sınıfına bağlı; aksi halde display:none → block sıçraması
   animasyonu görünmez kılardı. */

.lead-form__step--2 {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  padding-block-start: var(--space-5);
  margin-block-start: var(--space-2);
  border-block-start: var(--border-w) dashed var(--color-border);
}

.lead-form__step--2.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.lead-form__step2-hint {
  color: var(--color-ink-soft);
  font-size: var(--fs-100);
  margin-block-end: var(--space-4);
}

.lead-form__whatsapp-alt {
  margin-block-start: var(--space-3);
  font-size: var(--fs-100);
}

.lead-form__whatsapp-alt a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  text-decoration: none;
  font-weight: 600;
  color: var(--color-success);
}

.lead-form__whatsapp-alt a:hover {
  text-decoration: underline;
}

.lead-form__availability {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: var(--border-w) solid var(--color-border);
  color: var(--color-ink-soft);
  font-size: var(--fs-100);
}

.lead-form__availability::before {
  content: "";
  flex-shrink: 0;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 999px;
  background: var(--color-success);
}

/* ---------- Uyarı / bilgi kutuları ---------- */

.notice {
  padding: var(--space-4) var(--space-5);
  border-inline-start: 4px solid var(--color-primary);
  background: var(--color-primary-tint);
  border-radius: var(--radius-sm);
}

.notice--warning {
  border-inline-start-color: var(--color-warning);
  background: #fff3d6;
}

/* ---------- Dil seçici ---------- */

.lang-switch {
  position: relative;
}

.lang-switch__list {
  display: flex;
  gap: var(--space-2);
}

.lang-switch__list a {
  text-decoration: none;
  font-size: var(--fs-100);
  font-weight: 700;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
}

.lang-switch__list a[aria-current="true"] {
  background: var(--color-primary-tint);
  color: var(--color-primary);
}

/* ---------- Açık/koyu mod anahtarı ---------- */
/* JS (assets/js/theme-toggle.js) sadece <html> üzerindeki data-theme
   niteliğini değiştirir; hangi ikonun görüneceğini bu CSS, tokens.css'teki
   AYNI iki sinyalle (sistem tercihi + manuel anahtar) belirler — JS ikon
   durumunu ayrıca hesaplamaz, tek doğruluk kaynağı burada. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: var(--border-w) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  background: transparent;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover {
    background: var(--color-surface-alt);
  }
}

.theme-toggle__icon {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.theme-toggle__icon--moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon--sun {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle__icon--moon {
    display: block;
  }
}

:root[data-theme="dark"] .theme-toggle__icon--sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--moon {
  display: block;
}

/* ---------- Hero ---------- */

.hero {
  padding-block: var(--space-8);
  background: var(--color-surface-alt);
  border-block-end: var(--border-w) solid var(--color-border);
}

.hero__eyebrow {
  color: var(--color-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--fs-200);
  font-family: var(--font-mono);
}

.hero__lede {
  font-size: var(--fs-400);
  color: var(--color-ink-soft);
  max-width: var(--content-narrow);
  margin-block-start: var(--space-4);
}

/* ---------- Ana sayfa: header + hero kesintisiz gradyan akışı ---------- */
/* Kullanıcı talimatıyla (2026-08-15) eklendi. Sadece ana sayfada (body[data-page="home"])
   ve sadece koyu modda aktif — diğer sayfalarda ve açık modda .hero/.site-header
   hiç değişmez. Header (sabit 4.5rem) ve hero'nun ALTINDA, TEK bir sanal gradyan
   şeridinin farklı dilimlerini gösterdikleri için (background-position-y ile
   header-yüksekliği kadar kaydırma) görsel olarak kesintisiz akar — iki ayrı
   tekrar eden gradyan değil. Sanal toplam yükseklik (--gradient-flow-height)
   tasarım tahminidir; hero bundan uzun olursa son durak rengi (background-color
   fallback) devam eder, sert bir kesim/tekrar dikişi oluşmaz. */
body[data-page="home"] {
  --gradient-flow-height: 44rem;
  --gradient-main: linear-gradient(180deg, #000000 0%, #05080f 20%, #032f3a 40%, #0891b2 70%, #22d3ee 100%);
  --gradient-noise: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='0.4'/%3E%3C/svg%3E");
  --gradient-grid: repeating-linear-gradient(rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 60px);
  --gradient-diagonal: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 40px);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body[data-page="home"] .site-header:not(.is-scrolled) {
    background-image: var(--gradient-diagonal), var(--gradient-grid), var(--gradient-noise), var(--gradient-main);
    background-size: 40px 40px, 40px 40px, 60px 60px, 60px 60px, 150px 150px, 100% var(--gradient-flow-height);
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat;
    background-color: #000000;
    border-block-end-color: transparent;
  }

  html:not([data-theme="light"]) body[data-page="home"] .hero--gradient {
    background-image: var(--gradient-diagonal), var(--gradient-grid), var(--gradient-noise), var(--gradient-main);
    background-size: 40px 40px, 40px 40px, 60px 60px, 60px 60px, 150px 150px, 100% var(--gradient-flow-height);
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 calc(-1 * var(--header-block-size));
    background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat;
    background-color: #032f3a;
    border-block-end-color: transparent;
  }
}

html[data-theme="dark"] body[data-page="home"] .site-header:not(.is-scrolled) {
  background-image: var(--gradient-diagonal), var(--gradient-grid), var(--gradient-noise), var(--gradient-main);
  background-size: 40px 40px, 40px 40px, 60px 60px, 60px 60px, 150px 150px, 100% var(--gradient-flow-height);
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat;
  background-color: #000000;
  border-block-end-color: transparent;
}

html[data-theme="dark"] body[data-page="home"] .hero--gradient {
  background-image: var(--gradient-diagonal), var(--gradient-grid), var(--gradient-noise), var(--gradient-main);
  background-size: 40px 40px, 40px 40px, 60px 60px, 60px 60px, 150px 150px, 100% var(--gradient-flow-height);
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 calc(-1 * var(--header-block-size));
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat;
  background-color: #032f3a;
  border-block-end-color: transparent;
}

/* Metin koruma paneli: gradyanın parlak/camgöbeği ucuna denk gelme ihtimaline
   karşı (beyaz metin #22d3ee üzerinde 1.81:1 — WCAG AA'yı açıkça ihlal eder).
   %55 siyah panel en kötü durumda bile 7.3:1 garanti eder (hesaplandı). Sadece
   gradyan aktifken görünür kılınır — diğer tüm durumlarda şeffaf/no-op. */
body[data-page="home"] .hero__scrim {
  border-radius: var(--radius-lg);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body[data-page="home"] .hero__scrim {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: var(--space-6);
  }
}

html[data-theme="dark"] body[data-page="home"] .hero__scrim {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: var(--space-6);
}

/* .site-header.is-scrolled normalde %94 opak + blur (frosted-glass) — bu
   %6'lık saydamlık düz koyu zeminlerde görünmez ama kaydırınca sticky
   header'ın arkasında parlak gradyan kalınca hafifçe sızıp camgöbeği
   yansıması oluşturuyordu. Bu iki bağlamda TAM opak zemine zorlanır. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body[data-page="home"] .site-header.is-scrolled {
    background: var(--color-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

html[data-theme="dark"] body[data-page="home"] .site-header.is-scrolled {
  background: var(--color-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------- İmza öğesi: teknik plaka şeridi ---------- */
/* Temiz oda sınıf etiketleri / ekipman plakaları / sterilizasyon parti
   kodlarından ilham alır — kurumsal gerçekleri damgalı bir plaka gibi sunar. */

.spec-plate {
  background: var(--color-plate);
  color: var(--color-plate-text);
}

.spec-plate__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) {
  .spec-plate__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.spec-plate__item {
  padding: var(--space-5) var(--space-4);
  border-block-start: 1px solid var(--color-plate-line);
  border-inline-start: 1px solid var(--color-plate-line);
}

.spec-plate__item:nth-child(-n + 2) {
  border-block-start: none;
}

@media (min-width: 48rem) {
  .spec-plate__item:nth-child(-n + 2) {
    border-block-start: 1px solid var(--color-plate-line);
  }
  .spec-plate__item:nth-child(4n + 1) {
    border-inline-start: none;
  }
}

.spec-plate__item:nth-child(2n + 1) {
  border-inline-start: none;
}

@media (min-width: 48rem) {
  .spec-plate__item:nth-child(2n + 1) {
    border-inline-start: 1px solid var(--color-plate-line);
  }
}

.spec-plate__value {
  font-family: var(--font-mono);
  font-size: var(--fs-500);
  font-weight: 700;
  letter-spacing: var(--tracking-plate);
}

.spec-plate__label {
  display: block;
  margin-block-start: var(--space-1);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: rgba(231, 235, 231, 0.65);
}

/* Ürün/kategori sayfalarında dar plaka şeridi */
.spec-plate--slim .spec-plate__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 40rem) {
  .spec-plate--slim .spec-plate__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.spec-plate--slim .spec-plate__value {
  font-size: var(--fs-300);
}

/* ---------- İmza öğesi: sertifika mührü ---------- */

.seal {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.seal__mark {
  flex-shrink: 0;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  color: var(--color-accent);
}

.seal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.seal__name {
  font-weight: 700;
}

.seal__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--color-ink-soft);
}

/* ---------- Görsel yer tutucu (placeholder) ---------- */

.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--color-placeholder-bg);
  border: 1px dashed var(--color-placeholder-border);
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  font-size: var(--fs-100);
  text-align: center;
  padding: var(--space-4);
}

/* ---- pages.css ---- */
/* ---------- Ana sayfa ---------- */

.brand-pillars {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 56rem) {
  .brand-pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.brand-pillar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: var(--border-w) solid var(--color-border);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.brand-pillar:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.brand-pillar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-start: var(--space-2);
  font-weight: 700;
  font-size: var(--fs-caption);
}

.brand-pillar__link svg {
  inline-size: 1em;
  block-size: 1em;
  transition: transform var(--transition-fast);
}

.brand-pillar:hover .brand-pillar__link svg {
  transform: translateX(3px);
}

[dir="rtl"] .brand-pillar:hover .brand-pillar__link svg {
  transform: translateX(-3px);
}

.stat-row {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: center;
}

@media (min-width: 48rem) {
  .stat-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat-row dt {
  font-size: var(--fs-100);
  color: var(--color-ink-soft);
  order: 2;
}

.stat-row dd {
  font-size: var(--fs-700);
  font-weight: 800;
  color: var(--color-primary);
  order: 1;
}

/* ---------- Belgeler / sertifikalar ---------- */

.cert-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 40rem) {
  .cert-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .cert-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cert-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.cert-card__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  border-block-end: var(--border-w) solid var(--color-border);
  background: var(--color-surface-sunken);
  cursor: zoom-in;
  position: relative;
}

.cert-card__trigger img {
  width: 100%;
  aspect-ratio: 1 / 1.3;
  object-fit: cover;
  display: block;
}

.cert-card__zoom-hint {
  position: absolute;
  inset-inline-end: var(--space-3);
  inset-block-end: var(--space-3);
  background: rgb(var(--shadow-color) / 0.72);
  color: #fff;
  font-size: var(--fs-caption);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.cert-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

.cert-card__name {
  margin: 0;
}

/* Belge künyesi — tanım listesi: alan/değer, sıfır yorum */
.cert-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-body);
}

.cert-meta dt {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  padding-block: var(--space-1) 0;
}

.cert-meta dd {
  padding-block: var(--space-1) 0;
}

.cert-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block-start: var(--space-2);
  border-block-start: var(--border-w) solid var(--color-border);
}

/* ---------- Sertifika lightbox (native <dialog>) ---------- */

.cert-lightbox {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: min(90vw, 42rem);
  max-height: 90vh;
  background: var(--color-surface);
  color: var(--color-text);
}

.cert-lightbox::backdrop {
  background: rgb(var(--shadow-color) / 0.6);
}

.cert-lightbox__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-block-end: var(--border-w) solid var(--color-border);
}

.cert-lightbox__body {
  padding: var(--space-5);
  overflow: auto;
  max-height: calc(90vh - 4.5rem);
}

.cert-lightbox__body img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.cert-lightbox__close {
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}

/* ---------- Üretim altyapısı ---------- */

.infra-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 48rem) {
  .infra-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.infra-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.infra-card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--color-surface-sunken);
  border-block-end: var(--border-w) solid var(--color-border);
}

.infra-card__body {
  padding: var(--space-5);
}

/* ---------- Ürün kategori listesi ---------- */

.product-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 40rem) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Ürün detay ---------- */

.product-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

/* Gerçek, lazy-load edilen görsel galerisi (steril set şablonu) */
.product-gallery__item {
  margin: 0;
}

.product-gallery__item--main {
  grid-column: 1 / -1;
}

.product-gallery__item img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

/* Çok varyantlı ürün sayfaları (kaseler/kılıflar/ekipmanlar vb.) — tek bir
   "ana görsel" kavramı yok, her varyant eşit ağırlıkta kendi etiketiyle. */
.product-gallery--variants {
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.product-gallery--variants .product-gallery__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.product-gallery--variants .product-gallery__item img {
  aspect-ratio: 1 / 1;
}

.product-gallery--variants figcaption {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  text-align: center;
}

.product-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.product-sku {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  color: var(--color-ink-soft);
}

/* ---------- Haberler ---------- */

.news-list {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 48rem) {
  .news-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.news-card__date {
  font-size: var(--fs-100);
  color: var(--color-ink-soft);
}

.news-card--pending {
  opacity: 0.6;
}

/* ---------- Üretim süreci — gerçek sıra, numaralandırma anlamlı ---------- */

.process-steps {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  counter-reset: process-step;
}

@media (min-width: 56rem) {
  .process-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.process-steps li {
  counter-increment: process-step;
  max-inline-size: none;
}

.process-steps__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--color-primary);
  margin-block-end: var(--space-2);
}

.process-steps__num::before {
  content: counter(process-step, decimal-leading-zero);
}

/* İki paralel üretim hattı (Cerrahi Önlük / Cerrahi Örtü) — resmi MDR teknik
   dosyasındaki akış şemasıyla birebir, her hat kendi dikey adım listesi. */
.process-flow {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 56rem) {
  .process-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.process-flow__track {
  padding-inline-start: var(--space-6);
  border-inline-start: 2px solid var(--color-border);
}

.process-flow__track h3 {
  margin-block-end: var(--space-4);
}

.process-steps--column {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (min-width: 56rem) {
  .process-steps--column {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.process-steps--column li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.process-steps--column .process-steps__num {
  font-size: var(--fs-body);
  margin-block-end: 0;
  flex: none;
}

/* ---------- Tanıtım videosu ---------- */

.video-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-sunken);
}

.video-card img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.video-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: color-mix(in srgb, black 20%, transparent);
  cursor: pointer;
}

.video-card__play svg {
  inline-size: 4.5rem;
  block-size: 4.5rem;
  color: white;
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / 0.35));
  transition: transform 200ms var(--ease-out-strong);
}

@media (hover: hover) and (pointer: fine) {
  .video-card__play:hover svg {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-card__play:hover svg {
    transform: none;
  }
}

/* ---------- Pazar etiketleri (temsili örnek liste) ---------- */

.market-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

/* ---------- İletişim ---------- */

.contact-layout {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 56rem) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

.contact-map {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Katalog indirme ---------- */

.catalog-download {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 56rem) {
  .catalog-download {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.catalog-download img {
  border-radius: var(--radius-lg);
  border: var(--border-w) solid var(--color-border);
}

/* ---------- İhracat sayfası SSS ---------- */

.faq-item {
  padding-block: var(--space-4);
  border-block-end: var(--border-w) solid var(--color-border);
}

.faq-item:last-of-type {
  border-block-end: none;
}

.faq-item h3 {
  font-size: var(--fs-300);
  margin-block-end: var(--space-2);
}

.faq-item p {
  color: var(--color-ink-soft);
}