/* =============================================================================
   Biosmyrna — Tasarım Token'ları
   Kaynak: docs/design/DESIGN_TOKENS_V1.md  (🔒 tek doğruluk kaynağı: Faz 3)

   🔴 KURAL C1 — Bileşenler HAM değer kullanmaz, ROL token'ı kullanır.
      Doğru:  color: var(--text);
      Yanlış: color: var(--ink-900);

   🔴 KURAL C2 — Her renk ÖNCE açık temada tanımlanır; koyu tema üzerine yazar.
      Yalnızca koyu tema bloğunda tanımlanan bir renk, açık temada tanımsız kalır.

   🔴 KURAL — Bu dosyada olmayan bir değer tasarımda veya kodda kullanılmaz.
      Yeni değer gerekiyorsa önce Faz 3 dosyasına eklenir, sonra buraya.
      Token isimleri Faz 5–11 boyunca DEĞİŞMEZ.

   🔴 130vh / 70vh gibi değerler burada YOKTUR — onlar düzen davranışıdır,
      token değildir (DESIGN_TOKENS_V1 §9). Bkz. styles/pages.css
   ============================================================================= */

:root {

	/* ─────────────────────────────────────────────────────────────────────────
	   1.1 · HAM RENKLER — AÇIK TEMA
	   ───────────────────────────────────────────────────────────────────────── */

	/* Birincil — orman yeşili */
	--primary-50:   #EFF6F2;
	--primary-100:  #D6EADF;
	--primary-300:  #7CC49B;
	--primary-500:  #129350;
	--primary-600:  #0A7C40;
	--primary-700:  #076633;   /* 🔒 ana marka rengi — logo amblem halkasından ölçüldü */
	--primary-800:  #054A27;
	--primary-900:  #04331B;

	/* Vurgu — zeytin */
	--accent-50:    #F3F7E8;
	--accent-200:   #C9DBA0;
	--accent-400:   #8CB02B;
	--accent-500:   #799B22;
	--accent-700:   #4C640C;
	--accent-800:   #3F580A;

	/* Nötrler — hafif yeşile kırık gri */
	--white:        #FFFFFF;
	--ink-50:       #F7F9F8;
	--ink-100:      #EFF2F0;
	--ink-200:      #DCE2DE;
	--ink-300:      #BBC4BE;
	--ink-400:      #8A968F;
	--ink-500:      #65726B;
	--ink-700:      #3C4842;
	--ink-800:      #26312C;
	--ink-900:      #18211D;
	--ink-950:      #0E1512;

	/* Malzeme tonu */
	--parchment:      #EFEFE4;
	--parchment-line: #DBDDBD;

	/* Durum renkleri */
	--error:   #A32218;
	--warn:    #A15C07;
	--info:    #0E5A66;
	--success: #076633;

	/* ─────────────────────────────────────────────────────────────────────────
	   1.3 · ROL TOKEN'LARI — 🔴 bileşenler YALNIZCA bunları kullanır
	   ───────────────────────────────────────────────────────────────────────── */

	--surface:                 var(--white);
	--surface-alt:             var(--ink-50);
	--surface-raised:          var(--white);
	--surface-warm:            var(--parchment);
	--surface-warm-line:       var(--parchment-line);
	--band:                    var(--primary-900);

	--text:                    var(--ink-900);
	--text-secondary:          var(--ink-700);
	--text-muted:              var(--ink-500);
	--heading:                 var(--ink-900);
	--heading-brand:           var(--primary-700);

	--link:                    var(--primary-700);
	--link-hover:              var(--primary-800);

	--action-primary-bg:       var(--primary-700);
	--action-primary-text:     var(--white);
	--action-primary-hover:    var(--primary-800);
	--action-secondary-border: var(--primary-700);
	--action-secondary-text:   var(--primary-700);
	--action-soft-bg:          var(--primary-50);   /* "brand-soft" — rozet ve seçili çip zemini */

	--accent:                  var(--accent-500);
	--border:                  var(--ink-400);
	--divider:                 var(--ink-200);
	/* 🔴 C5 / COLOR_SYSTEM §7.3 K4 — koyu temada kart ile zemin arasındaki fark
	   yalnızca 1,12:1'dir; kenarlık ZORUNLUDUR ve GÖRÜNÜR olmalıdır.
	   Açık temada dekoratif ayırıcı yeterlidir; koyu temada güçlü kenarlığa geçer. */
	--card-border:             var(--ink-200);
	--focus-ring:              var(--primary-600);

	--status-error:            var(--error);
	--status-warn:             var(--warn);
	--status-info:             var(--info);

	/* Koyu bant — 🔴 HER İKİ TEMADA DA KOYU KALIR (COMPONENT_LIBRARY §11) */
	--band-text:               var(--ink-100);
	--band-heading:            var(--white);
	--band-accent:             var(--accent-400);   /* accent-500 bu zeminde 4,37:1 — kullanılmaz */
	--band-border:             var(--primary-300);

	/* Gölge rengi siyah değil, en koyu nötrden türetilir (LAYOUT_SYSTEM §6) */
	--shadow-color: 14, 21, 18;   /* ink-950 RGB */

	/* ─────────────────────────────────────────────────────────────────────────
	   2 · TİPOGRAFİ
	   ───────────────────────────────────────────────────────────────────────── */

	--font-serif:    'Lora', Georgia, 'Times New Roman', serif;
	--font-sans:     'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-serif-ar: 'Noto Naskh Arabic', 'Lora', Georgia, serif;
	--font-sans-ar:  'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;

	/* Aktif aileler — Arapçada aşağıda değiştirilir */
	--font-heading: var(--font-serif);
	--font-body:    var(--font-sans);

	/* Temel ölçek — MOBİL değerler (mobil önce; ≥768px'de büyür) */
	--text-display:  36px;
	--text-h1:       30px;
	--text-h2:       26px;
	--text-h3:       22px;
	--text-h4:       19px;
	--text-body-lg:  18px;
	--text-body:     17px;   /* 🔴 gövde 17px'in altına inmez — mobilde de aynı */
	--text-body-sm:  15px;
	--text-caption:  13px;
	--text-overline: 12px;
	--text-data:     15px;

	/* Editoryal ölçek — yalnızca anlatı bölümlerinde */
	--text-hero:     44px;
	--text-section:  34px;
	--text-lead:     19px;
	--text-quote:    22px;

	/* Satır yükseklikleri */
	--lh-display:  1.10;
	--lh-h1:       1.15;
	--lh-h2:       1.20;
	--lh-h3:       1.25;
	--lh-h4:       1.35;
	--lh-body-lg:  1.65;
	--lh-body:     1.65;
	--lh-body-sm:  1.55;
	--lh-caption:  1.45;
	--lh-overline: 1.40;
	--lh-data:     1.50;

	/* Harf aralıkları */
	--ls-display:  -0.01em;
	--ls-h1:       -0.01em;
	--ls-overline:  0.08em;

	/* ─────────────────────────────────────────────────────────────────────────
	   3 · BOŞLUK — 4px tabanlı
	   ───────────────────────────────────────────────────────────────────────── */

	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  24px;
	--space-6:  32px;
	--space-7:  48px;
	--space-8:  64px;    /* bölüm arası — mobil */
	--space-9:  96px;    /* bölüm arası — masaüstü */
	--space-10: 128px;   /* ana bölüm ayrımı */

	/* Bölüm ritmi — mobilde space-8, masaüstünde space-9 */
	--section-rhythm: var(--space-8);

	/* ─────────────────────────────────────────────────────────────────────────
	   4 · KAPSAYICI VE IZGARA
	   ───────────────────────────────────────────────────────────────────────── */

	--container-max:  1280px;   /* varsayılan içerik */
	--container-wide: 1440px;   /* yolculuk, katalog */
	--container-text: 720px;    /* okuma sütunu, kapanış bloğu */

	--gutter: 16px;             /* mobil; tablet 24px, masaüstü 32px */

	--grid-columns: 12;

	/* ─────────────────────────────────────────────────────────────────────────
	   6 · YARIÇAP · KENARLIK · YÜKSEKLİK
	   ───────────────────────────────────────────────────────────────────────── */

	--radius-sm:   4px;    /* rozet, etiket */
	--radius-form: 6px;    /* form alanı, seçim çipi (COMPONENT_LIBRARY §7) */
	--radius-md:   8px;    /* kart, buton */
	--radius-lg:   16px;   /* büyük yüzey */
	--radius-full: 999px;  /* yalnızca durum noktası ve avatar */

	--border-width:        1px;
	--border-width-strong: 2px;
	--focus-width:         2px;
	--focus-offset:        2px;

	/* elev-0 gölgesizdir — kenarlıkla kurulur. Sistem çizgi önceliklidir. */
	--elev-1: 0 1px 3px rgba(var(--shadow-color), 0.09);
	--elev-2: 0 4px 12px rgba(var(--shadow-color), 0.12);
	--elev-3: 0 12px 32px rgba(var(--shadow-color), 0.18);

	/* ─────────────────────────────────────────────────────────────────────────
	   7 · HAREKET — 🔴 reduced-motion'da tüm süreler 0
	   ───────────────────────────────────────────────────────────────────────── */

	--motion-fast:     150ms;   /* hover, odak, düğme */
	--motion-base:     200ms;   /* katman, menü, header */
	--motion-slow:     250ms;   /* bölüm geçişi */
	--motion-reveal:   250ms;   /* kaydırmada belirme */
	--motion-stagger:  60ms;    /* grup içi gecikme */
	--motion-ease:     cubic-bezier(0.4, 0, 0.2, 1);
	--motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	/* ─────────────────────────────────────────────────────────────────────────
	   8 · BİLEŞEN ÖLÇÜLERİ
	   ───────────────────────────────────────────────────────────────────────── */

	--touch-min:        44px;   /* 🔴 mobilde zorunlu */
	--button-sm:        40px;
	--button-md:        48px;
	--button-lg:        56px;
	--input-height:     48px;
	--header-height:    60px;   /* mobil; masaüstünde 72px */
	--logo-min-lockup:  160px;
	--logo-min-emblem:  48px;
}

/* =============================================================================
   KIRILMA NOKTALARI
   bp-sm 480 · bp-md 768 · bp-lg 1024 · bp-xl 1280 · bp-2xl 1536
   🔴 Yeni kırılma noktası üretilmez.
   ============================================================================= */

@media (min-width: 768px) {
	:root {
		--gutter: 24px;

		--text-display:  56px;
		--text-h1:       44px;
		--text-h2:       34px;
		--text-h3:       26px;
		--text-h4:       21px;
		--text-body-lg:  19px;
		--text-body:     17px;
		--text-body-sm:  15px;

		--text-hero:     44px;   /* tam boy 1024px'te açılır */
		--text-section:  44px;
		--text-lead:     21px;
		--text-quote:    24px;

		--header-height: 72px;
		--section-rhythm: var(--space-9);
	}
}

@media (min-width: 1024px) {
	:root {
		--gutter: 32px;

		--text-hero:     72px;
		--text-section:  54px;
		--text-lead:     24px;
		--text-quote:    28px;
	}
}

@media (min-width: 1280px) {
	:root {
		--text-hero:     96px;
		--text-section:  68px;
	}
}

/* =============================================================================
   ARAPÇA DÜZELTMESİ — TYPOGRAPHY §6
   Punto ×1,08 · satır yüksekliği 1,85–1,95 · harf aralığı DEĞİŞTİRİLMEZ
   (Arapça bitişik yazılır; harf aralığı vermek kelimeyi bozar.)
   ============================================================================= */

html[lang="ar"] {
	--font-heading: var(--font-serif-ar);
	--font-body:    var(--font-sans-ar);

	--text-body:     18px;
	--text-body-lg:  20px;
	--text-body-sm:  16px;
	--text-caption:  14px;
	--text-overline: 13px;

	--lh-body:      1.90;
	--lh-body-lg:   1.90;
	--lh-body-sm:   1.85;
	--lh-caption:   1.85;
	--ls-overline:  0;      /* 🔴 Arapçada harf aralığı verilmez */
	--ls-display:   0;
	--ls-h1:        0;

	--lh-display:   1.35;
	--lh-h1:        1.40;
	--lh-h2:        1.40;
	--lh-h3:        1.45;
	--lh-h4:        1.55;
}

@media (min-width: 1280px) {
	html[lang="ar"] {
		--text-hero:    84px;   /* Latin 96px yerine — AD V2 §20 R8 */
		--text-section: 60px;
	}
}

/* =============================================================================
   KOYU TEMA
   T1 · varsayılan cihaz tercihidir   T2 · elle değiştirilebilir, hatırlanır
   C4 · koyu temada gölge yok — yükseklik yüzey açıklığıyla kurulur
   C5 · koyu temada kart kenarlığı zorunlu (kontrast 1,12:1)
   ============================================================================= */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--d-bg:           #0E1512;
		--d-surface:      #16211C;
		--d-surface-2:    #1E2B25;
		--d-band:         #04331B;
		--d-divider:      #2C3B33;
		--d-border:       #62796B;
		--d-text:         #EAEFEB;
		--d-text-2:       #B3C2B8;
		--d-text-3:       #8DA096;
		--d-link:         #7CC49B;
		--d-accent:       #8CB02B;
		--d-accent-hover: #A6C947;
		--d-error:        #F0938B;
		--d-warn:         #E8B461;
		--d-info:         #7FCBD8;

		--surface:                 var(--d-bg);
		--surface-alt:             var(--d-surface);
		--surface-raised:          var(--d-surface-2);
		--surface-warm:            var(--d-surface);
		--surface-warm-line:       var(--d-divider);
		--band:                    var(--d-band);

		--text:                    var(--d-text);
		--text-secondary:          var(--d-text-2);
		--text-muted:              var(--d-text-3);
		--heading:                 var(--d-text);
		--heading-brand:           var(--d-text);

		--link:                    var(--d-link);
		--link-hover:              var(--d-accent-hover);

		--action-primary-bg:       var(--d-accent);
		--action-primary-text:     var(--d-bg);
		--action-primary-hover:    var(--d-accent-hover);
		--action-secondary-border: var(--d-link);
		--action-secondary-text:   var(--d-link);
		--action-soft-bg:          var(--d-surface-2);

		--accent:                  var(--d-accent);
		--border:                  var(--d-border);
		--divider:                 var(--d-divider);
		--card-border:             var(--d-border);
		--focus-ring:              var(--d-accent);

		--status-error:            var(--d-error);
		--status-warn:             var(--d-warn);
		--status-info:             var(--d-info);

		/* Koyu temada gölge çalışmaz — kapatılır (C4) */
		--elev-1: none;
		--elev-2: none;
		--elev-3: none;
	}
}

:root[data-theme="dark"] {
	--d-bg:           #0E1512;
	--d-surface:      #16211C;
	--d-surface-2:    #1E2B25;
	--d-band:         #04331B;
	--d-divider:      #2C3B33;
	--d-border:       #62796B;
	--d-text:         #EAEFEB;
	--d-text-2:       #B3C2B8;
	--d-text-3:       #8DA096;
	--d-link:         #7CC49B;
	--d-accent:       #8CB02B;
	--d-accent-hover: #A6C947;
	--d-error:        #F0938B;
	--d-warn:         #E8B461;
	--d-info:         #7FCBD8;

	--surface:                 var(--d-bg);
	--surface-alt:             var(--d-surface);
	--surface-raised:          var(--d-surface-2);
	--surface-warm:            var(--d-surface);
	--surface-warm-line:       var(--d-divider);
	--band:                    var(--d-band);

	--text:                    var(--d-text);
	--text-secondary:          var(--d-text-2);
	--text-muted:              var(--d-text-3);
	--heading:                 var(--d-text);
	--heading-brand:           var(--d-text);

	--link:                    var(--d-link);
	--link-hover:              var(--d-accent-hover);

	--action-primary-bg:       var(--d-accent);
	--action-primary-text:     var(--d-bg);
	--action-primary-hover:    var(--d-accent-hover);
	--action-secondary-border: var(--d-link);
	--action-secondary-text:   var(--d-link);
	--action-soft-bg:          var(--d-surface-2);

	--accent:                  var(--d-accent);
	--border:                  var(--d-border);
	--divider:                 var(--d-divider);
	--card-border:             var(--d-border);
	--focus-ring:              var(--d-accent);

	--status-error:            var(--d-error);
	--status-warn:             var(--d-warn);
	--status-info:             var(--d-info);

	--elev-1: none;
	--elev-2: none;
	--elev-3: none;
}

/* =============================================================================
   HAREKETİ AZALT — E10 / M-1
   🔴 prefers-reduced-motion açıkken TÜM süreler 0. İçerik eksiksiz görünür.
   ============================================================================= */

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

/* =============================================================================
   YAZDIRMA — T8: yazdırma her zaman açık tema üzerinden yapılır
   ============================================================================= */

@media print {
	:root, :root[data-theme="dark"] {
		--surface: #FFFFFF;
		--surface-alt: #FFFFFF;
		--surface-raised: #FFFFFF;
		--surface-warm: #FFFFFF;
		--text: #18211D;
		--text-secondary: #3C4842;
		--text-muted: #65726B;
		--heading: #18211D;
		--heading-brand: #076633;
		--link: #076633;
		--border: #8A968F;
		--divider: #DCE2DE;
		--card-border: #DCE2DE;
		--elev-1: none;
		--elev-2: none;
		--elev-3: none;
	}
}