/* Katman sırası: sonra gelen katman öncekini ezer. Her CSS dosyası tamamen bir katmanın içinde olmalı. */
@layer reset, tokens, base, components, site, admin, utilities;

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer tokens {
  /*
   * Tema anahtarı: renkli token'lar tek satırda iki değer taşır:
   *   --x: var(--theme-l, AÇIK) var(--theme-d, KOYU);
   * Açık temada --theme-l geçersizdir (yedek değer = AÇIK kullanılır), --theme-d boştur.
   * Koyu temada tersi. Böylece koyu değerler tek yerde durur; kopya blok yoktur.
   * Admin ya da başka bir kapsam token'ı yeniden tanımlarken aynı kalıbı kullanmalıdır.
   */
  :root {
    --theme-l: initial;
    --theme-d: ;
    color-scheme: light;
  }
  :root[data-theme="dark"] {
    --theme-l: ;
    --theme-d: initial;
    color-scheme: dark;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --theme-l: ;
      --theme-d: initial;
      color-scheme: dark;
    }
  }

  :root {
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    /* Renkler: açık / koyu (Faz 5 — "Mevcut kimlik, olgunlaştırılmış" taslağı) */
    --bg: var(--theme-l, #FFF5EF) var(--theme-d, #14172A);
    --bg-2: var(--theme-l, #FCE9DE) var(--theme-d, #1B1F36);
    --surface: var(--theme-l, #FFFFFF) var(--theme-d, #1E2239);
    --surface-2: var(--theme-l, #FFF9F5) var(--theme-d, #1B1F36);
    --border: var(--theme-l, #F0DCD0) var(--theme-d, #2C3150);
    --border-strong: var(--theme-l, #E6CDBF) var(--theme-d, #3A4063);
    --text: var(--theme-l, #1B1F3B) var(--theme-d, #F4F1EE);
    --text-muted: var(--theme-l, #4B4F6B) var(--theme-d, #C6C5D6);
    --text-faint: var(--theme-l, #6E6F86) var(--theme-d, #9D9EB6);
    --primary: var(--theme-l, #C93F19) var(--theme-d, #FF7A4D);
    --primary-hover: var(--theme-l, #A9330F) var(--theme-d, #FF946E);
    --on-primary: var(--theme-l, #FFFFFF) var(--theme-d, #1B1F3B);
    --primary-soft: var(--theme-l, #FDE3D7) var(--theme-d, #3A2630);
    --primary-text: var(--theme-l, #B23812) var(--theme-d, #FF8E66);
    --input-border: var(--theme-l, #8F7666) var(--theme-d, #737BA8);
    --accent: #FFC233;
    --accent-hover: var(--theme-l, #F2B01A) var(--theme-d, #FFD15F);
    --on-accent: #1B1F3B;
    --accent-soft: var(--theme-l, #FFF0C7) var(--theme-d, #3A3322);
    --navy: var(--theme-l, #1B1F3B) var(--theme-d, #0F1121);
    --on-navy: var(--theme-l, #FFFFFF) var(--theme-d, #F2F3F8);
    --navy-muted: var(--theme-l, #C9CBDA) var(--theme-d, #9DA2BE);
    --info: var(--theme-l, #2353C0) var(--theme-d, #8DB0FF);
    --info-soft: var(--theme-l, #E4ECFC) var(--theme-d, #1F2D55);
    --success: var(--theme-l, #2E7A1E) var(--theme-d, #7BD66A);
    --success-soft: var(--theme-l, #E3F3DC) var(--theme-d, #1F3A25);
    --warning-text: var(--theme-l, #7A5400) var(--theme-d, #F2C25B);
    --warning-soft: var(--theme-l, #FFEFC4) var(--theme-d, #3A3322);
    /* Hata kırmızısı şikayet bordosundan ayrıdır; formlarda her zaman ikon + metinle birlikte kullanılır */
    --danger: var(--theme-l, #D11A1A) var(--theme-d, #FF6B6B);
    --danger-soft: var(--theme-l, #FDE7E4) var(--theme-d, #3F1E1E);
    --focus: var(--theme-l, #2353C0) var(--theme-d, #8DB0FF);
    /* Mobil tarayıcı çubuğu (meta theme-color); tema düğmesi bunu okur */
    --theme-color: var(--theme-l, #C93F19) var(--theme-d, #14172A);

    /* İçerik türleri: metin rengi her iki temada zemin, yüzey ve -soft üzerinde AA (≥ 4.5:1) */
    --type-review: var(--theme-l, #0D7468) var(--theme-d, #4FD1C0);
    --type-review-soft: var(--theme-l, #DDF3EF) var(--theme-d, #173A3C);
    --type-complaint: var(--theme-l, #A3123E) var(--theme-d, #FF8AAE);
    --type-complaint-soft: var(--theme-l, #FBE4EB) var(--theme-d, #43213A);
    --type-question: var(--theme-l, #2353C0) var(--theme-d, #8DB0FF);
    --type-question-soft: var(--theme-l, #E4ECFC) var(--theme-d, #1F2D55);
    --type-guide: var(--theme-l, #7A5400) var(--theme-d, #F2C25B);
    --type-guide-soft: var(--theme-l, #FFEFC4) var(--theme-d, #3A3322);
    --type-article: var(--theme-l, #6B3FB0) var(--theme-d, #C7A6FF);
    --type-article-soft: var(--theme-l, #EFE7FA) var(--theme-d, #2E2452);

    /* Şikayet durumları: Çözüldü yeşil, Bekliyor hardal, Kurum yanıtladı mavi, olumsuz kırmızı */
    --status-ok: var(--success);
    --status-ok-soft: var(--success-soft);
    --status-wait: var(--warning-text);
    --status-wait-soft: var(--warning-soft);
    --status-ans: var(--info);
    --status-ans-soft: var(--info-soft);
    --status-bad: var(--danger);
    --status-bad-soft: var(--danger-soft);
    --status-neutral: var(--text-faint);
    --status-neutral-soft: var(--bg-2);

    /* Resmi kurum yanıtı kutusu */
    --official: var(--theme-l, #F2F4FA) var(--theme-d, #232947);
    --official-line: var(--theme-l, #C9CFE6) var(--theme-d, #3D4675);

    /* Alt bilgi (lacivert) */
    --foot-bg: var(--theme-l, #1B1F3B) var(--theme-d, #0F1121);
    --foot-text: #E9E8F0;
    --foot-muted: var(--theme-l, #A9ABC2) var(--theme-d, #9D9EB6);
    --foot-line: rgba(255, 255, 255, .12);

    /* Puan */
    --star: var(--theme-l, #E9A100) var(--theme-d, #FFC233);
    --star-off: var(--border-strong);
    --star-half: var(--accent-soft);
    --rating-bar: var(--accent);

    /* Logo/QR gibi üçüncü taraf görseller her temada beyaz zemin ister */
    --logo-bg: #FFFFFF;
    --on-logo-bg: #565B76;

    /* Avatar */
    --avatar-bg: var(--bg-2);
    --on-avatar: var(--text-muted);

    /* Karşılama alanı (hero): açıkta marka bloğu, koyuda sakin mürdüm */
    --hero-bg: var(--theme-l, #C93F19) var(--theme-d, #3B2230);
    --hero-text: #FFFFFF;
    --hero-sub: var(--theme-l, #FFE6DA) var(--theme-d, #F2CFC2);
    --hero-border: transparent;
    --hero-tint: color-mix(in srgb, #000000 16%, transparent);

    /* Temaya göre göster/gizle (display değeri) */
    --show-light: var(--theme-l, block) var(--theme-d, none);
    --show-dark: var(--theme-l, none) var(--theme-d, block);

    /* Gölgeler ve örtü: gölge neredeyse yok; çizgi ağırlıklı */
    --shadow: var(--theme-l, 0 1px 2px rgba(27, 31, 59, .06), 0 8px 24px -12px rgba(27, 31, 59, .16)) var(--theme-d, 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5));
    --shadow-lg: 0 18px 40px -12px rgba(27, 31, 59, .35);
    --shadow-xl: 0 30px 80px rgba(11, 13, 23, .35);
    --backdrop: rgba(11, 13, 23, .55);

    /* Tip ölçeği (ön yüzde 13 px altı yok) */
    --fs-xs: .8125rem;   /* 13 */
    --fs-sm: .875rem;    /* 14 */
    --fs-ui: .9375rem;   /* 15: düğme, menü, etiket */
    --fs-base: 1rem;     /* 16 */
    --fs-md: 1.0625rem;  /* 17 */
    --fs-lg: 1.125rem;   /* 18 */
    --fs-xl: 1.25rem;    /* 20 */
    --fs-2xl: 1.3125rem; /* 21 */
    --fs-3xl: 1.5rem;    /* 24 */
    --fs-4xl: 1.75rem;   /* 28 */
    --fs-5xl: 2rem;      /* 32 */
    --fs-h4: 1.0625rem;  /* 17: liste/kart başlığı */
    --fs-h3: 1.25rem;    /* 20: panel başlığı */
    --fs-h2: 1.625rem;   /* 26: bölüm başlığı (mobil 22) */
    --fs-title: 2.5rem;  /* 40: sayfa başlığı (mobil 28) */
    --fs-h1: 2.5rem;     /* 40: sayfa başlığı (mobil 28) */
    --fs-display: 3.125rem; /* 50: ana sayfa karşılama (mobil 31) */
    --fs-lead: 1.125rem; /* 18 (mobil 16) */
    --fs-brand-m: .90625rem; /* 14.5: mobil logo yazısı */
    --fs-brand-s: .84375rem; /* 13.5: 380 px altı logo yazısı */
    --fs-jumbo: 4.5rem;
    --lh-tight: 1.1;
    --lh-snug: 1.3;
    --lh-base: 1.55;

    /* Boşluk: 4 px ızgara; -0-5/-1-5/-2-5/-3-5 ara basamakları bu fazda görünümü korumak için var */
    --space-0-5: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-3-5: 14px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Köşe */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* Kontroller (admin bunları .admin-body üzerinde küçültür) */
    --control-h: 48px;
    --control-h-sm: 40px;
    --control-py: var(--space-2-5);
    --control-px: var(--space-3-5);
    --control-fs: var(--fs-base);
    --control-border-w: 1.5px;
    --control-radius: var(--radius-sm);
    --btn-h: 44px;
    --btn-h-sm: 36px;
    --btn-px: var(--space-5);
    --btn-px-sm: var(--space-4);
    --btn-fs: var(--fs-ui);
    --btn-fs-sm: var(--fs-sm);
    --btn-radius: var(--radius-pill);
    --field-gap: var(--space-1-5);
    --label-fs: var(--fs-ui);
    --help-fs: var(--fs-sm);
    --check-size: 20px;

    /* Tablo */
    --table-fs: var(--fs-ui);
    --table-head-fs: var(--fs-xs);
    --table-py: var(--space-3);
    --table-px: var(--space-3-5);
    --row-hover: var(--surface-2);

    /* Kart / panel */
    --panel-p: var(--space-5);

    /* Rozet */
    --badge-fs: var(--fs-xs);
    --badge-py: var(--space-1);
    --badge-px: var(--space-2-5);

    /* Yerleşim */
    --container: 1200px;
    --gutter: 32px;
    --header-h: 68px;
    --side-w: 340px;
  }
  @media (max-width: 1080px) {
    :root { --side-w: 300px; }
  }
  @media (max-width: 760px) {
    :root {
      --gutter: 16px;
      --header-h: 60px;
      --fs-display: 1.9375rem; /* 31 */
      --fs-h1: 1.75rem;        /* 28 */
      --fs-title: 1.75rem;
      --fs-h2: 1.375rem;       /* 22 */
      --fs-lead: 1rem;
    }
  }
}