/**
 * Tasarım token'ları — ONAYLI TAKİPÇİHİZMET TASARIMINDAN.
 *
 * Kaynak: onaylı tasarım (`4-TASARIM/_base.css`). Değerler tahmin
 * edilmedi, kaynaktan çıkarıldı.
 *
 * Koyu tema varsayılandır. Açık tema `[data-theme="light"]` ile gelir ve
 * değerleri yine onaylı kaynaktan alınmıştır.
 *
 * Bileşenler HİÇBİR yerde ham renk/ölçü yazmaz; her değer buradan gelir.
 * Tek istisna platform marka renkleri — onlar dış markalara ait sabitler
 * ve bileşenden CSS değişkeni olarak geçirilir.
 */

:root {
  /* ── Marka ─────────────────────────────────────────────────────────────
     --brand onaylı değer, değiştirilmedi. --brand-d yalnız hover/link-hover
     için kullanılıyor; erişilebilirlik için bir tık aydınlatıldı. */
  --brand: #22b573;
  --brand-d: #1ea56a;   /* düğme/link hover; 4,24→4,83 AA */
  --brand-l: rgba(34, 181, 115, 0.14);
  --green-deep: #0f2a22;
  --green-soft: #cfe9dd;
  /* Görsel/koyu yüzey üzerindeki metin ve yardımcı tonlar — onaylı
     tasarımın kendi değerleri. */
  --on-image: #ffffff;
  --on-image-2: #9fc7b4;
  --topbar-icon: #7ed3b2;
  --hero-bg: #0f1a16;
  --promo-line: #1f4a3b;

  /* ── Yüzey ve çizgi ─────────────────────────────────────────────────── */
  --bg: #131519;
  --card: #1b1e24;
  --card-2: #22262e;
  --line: #2a2f38;

  /* ── Metin ──────────────────────────────────────────────────────────── */
  --ink: #f1f3f5;
  --ink-2: #cfd5dc;
  --mute: #98a2ad;

  /**
   * Dolgulu marka yeşili üzerindeki metin/ikon rengi.
   *
   * Onaylı tasarımda burada beyaz var; ölçüldüğünde #22B573 üzerinde beyaz
   * 2.70:1 veriyor — AA sınırı 4.5, ikon için bile 3.0. Marka rengini
   * DEĞİŞTİRMEK yerine yalnızca ön plan rengi erişilebilir hâle getirildi.
   *
   * Seçilen değer onaylı paletin kendi koyu yeşili: #0F2A22 → 5.75:1.
   * Aynı seçim `mark.svg` içinde de var — logo glifleri zaten bu renkte.
   */
  --on-brand: #0f2a22;

  /* ── Anlamsal ───────────────────────────────────────────────────────── */
  --red: #ff5a5f;
  --org: #ff9a57;
  --gold: #f5c451;
  --yel: #221e12;
  --yel-b: #4a3f1e;
  --ok: #1db954;
  /* Kırmızı dolgu üzerindeki yazı — beyaz AA'yı geçmiyor. */
  --on-danger: #2a0d0e;

  --badge-org-bg: #3a2416;
  --badge-red-bg: #3a1a1c;
  --badge-gry-bg: #262b33;
  --badge-gry-ink: #b0b8c2;

  /* ── Tipografi ─────────────────────────────────────────────────────────
     Artboard (`_base.css`): Outfit + Source Sans 3.
     Sevk edilen tema Poppins kullanıyor — çelişki raporlandı; referans
     olarak gönderilen ekran artboard olduğu için Outfit esas alındı. */
  --font-head: 'Outfit', 'Trebuchet MS', Arial, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', monospace;

  /* Gövde 15px / 1.45 — onaylı `_base.css`. */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  /* Satın alma panelindeki büyük fiyat — onaylı hizmet sayfasının değeri. */
  --fs-price: 30px;
  --fs-4xl: 40px;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.45;
  --lh-loose: 1.7;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --ls-tight: -0.01em;
  --ls-tighter: -0.02em;
  --ls-caps: 0.06em;
  --ls-wide: 0.14em;

  /* ── Boşluk ─────────────────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 14px;
  --sp-7: 16px;
  --sp-8: 18px;
  --sp-9: 20px;
  --sp-10: 22px;
  --sp-11: 26px;
  --sp-12: 28px;
  --sp-14: 36px;
  --sp-16: 44px;

  /** Bölüm boşluğu — onaylı artboard'da her bölüm `margin-top:36px`. */
  --sp-section: 36px;
  --sp-gutter: 16px;

  /* ── Yarıçap ────────────────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-card: 14px;
  --r-hero: 16px;
  --r-pill: 999px;

  /* ── Gölge ──────────────────────────────────────────────────────────── */
  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --sh-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --sh-lg: 0 30px 60px rgba(0, 0, 0, 0.35);

  /* ── Katman ─────────────────────────────────────────────────────────── */
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ── Hareket ────────────────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Kapsayıcı ─────────────────────────────────────────────────────────
     Onaylı `.wrap` 1240px sabit; sevk edilen tema onu
     `min(1240px, 100% - 32px)` yaparak duyarlı hâle getirmiş. Dar ekranda
     yatay taşmayı önlemek için duyarlı hâli alındı. */
  --w-page: min(1240px, 100% - 32px);
  --w-prose: 68ch;

  /* Dokunma hedefi alt sınırı — erişilebilirlik gereği. */
  --tap: 44px;

  --focus-ring: 0 0 0 3px rgba(34, 181, 115, 0.4);

  color-scheme: dark;
}

/**
 * Açık tema — onaylı `thz-tema.css` içindeki `html[data-theme="light"]`
 * bloğundan alındı. Varsayılan değil; ileride tema anahtarı eklenirse hazır.
 */
:root[data-theme='light'] {
  --bg: #f4f5f6;
  --card: #ffffff;
  --card-2: #f7f8f9;
  --line: #e3e7eb;
  --ink: #1b1f24;
  --ink-2: #2b333b;
  --mute: #5f6b76;
  --brand: #0b7a55;
  --brand-d: #075c40;
  --brand-l: #e6f4ee;
  --on-brand: #ffffff;
  --red: #d62828;
  --org: #e8590c;
  --gold: #b8860b;
  --yel: #fff8e6;
  --yel-b: #f3e2ae;
  --on-danger: #ffffff;
  color-scheme: light;
}

/* ── Temel sıfırlama ───────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  /* Yatay taşma sıfır olmalı — mobilde en sık görülen hata. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  text-wrap: balance;
}

p {
  margin: 0;
}

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

/**
 * SVG'ye `height: auto` VERİLMEZ.
 *
 * Açık `width`/`height` özniteliği olan ikon SVG'leri, esnek kapsayıcıda
 * `height:auto` ile birlikte 0×0'a çöküyordu. `flex-shrink: 0` da gerekli:
 * ikon, yanındaki uzun etiket yüzünden ezilmemeli.
 */
svg {
  display: block;
  max-width: 100%;
  flex-shrink: 0;
}

a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  color: var(--brand-d);
}

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

/* Görünür odak — klavye kullanıcısı nerede olduğunu bilmeli. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Ekran okuyucuya görünür, gözle görünmez. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Klavyeyle gelince görünür olan atlama bağlantısı. */
.skip-link {
  position: absolute;
  left: var(--sp-7);
  top: -100px;
  z-index: var(--z-toast);
  padding: var(--sp-4) var(--sp-7);
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--r-md);
  font-weight: var(--fw-bold);
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus {
  top: var(--sp-7);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}