/* ═══════════════════════════════════════════════════════════════════════════
   TURKSECURE — TASARIM SİSTEMİ · TOKEN KATMANI  (tokens.css)  ·  v4 "Daylight"
   ───────────────────────────────────────────────────────────────────────────
   VARSAYILAN TEMA: açık (beyaz) zemin + KIRMIZI imza aksan — mevcut siteyi
   (kırmızı marka) esas alır, dağınık mavi/mor tonlarını tek kırmızıda birler.
   İki katman: PRIMITIVE → SEMANTIC.  Tema = yalnız ~20 semantic değişkeni
   override etmek.  [data-theme="deep"] koyu varyant (tema seçici için) hazır.
   Font: Archivo (display) + Inter (body) + JetBrains Mono (mono) — Türkçe-güvenli.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ─────────────────────────────  1 · PRIMITIVE  ───────────────────────────── */
:root {
  /* Nötr skala — beyaz → siyah (açık tema odaklı) */
  --n-0:#ffffff;  --n-25:#fbfbfd; --n-50:#f6f7f9;  --n-100:#eef0f4;
  --n-150:#e5e8ee; --n-200:#d8dce4; --n-300:#bcc2ce; --n-400:#949bab;
  --n-500:#6c7382; --n-600:#4c5361; --n-700:#363c49; --n-800:#232833;
  --n-900:#161a22; --n-950:#0d1017; --n-1000:#05070b;

  /* İMZA AKSAN — marka kırmızısı (HUE tabanlı, kullanıcı --accent-h ile değiştirir) */
  --accent-h:353; --accent-s:74%;
  --accent:         hsl(var(--accent-h) var(--accent-s) 48%);
  --accent-bright:  hsl(var(--accent-h) var(--accent-s) 55%);
  --accent-deep:    hsl(var(--accent-h) var(--accent-s) 40%);
  --accent-dim:     hsl(var(--accent-h) 60% 88%);
  --accent-faint:   hsl(var(--accent-h) 78% 96%);
  --accent-glow:    hsl(var(--accent-h) var(--accent-s) 48% / .22);
  --accent-ink:     #ffffff;                 /* aksan üstü metin (kırmızıda beyaz) */
  --accent2-h:14;                            /* ikincil ton (sıcak turuncu-kırmızı) */
  --accent2:        hsl(var(--accent2-h) 88% 55%);

  /* Marka gradyanı — buton, vurgu, hero */
  --brand-gradient:  linear-gradient(115deg, var(--accent) 0%, var(--accent2) 100%);
  --brand-gradient-2:linear-gradient(115deg, hsl(var(--accent-h) 74% 52%), hsl(330 78% 52%));

  /* Durum renkleri (açık tema tonları) */
  --success:#1a9d5a; --success-dim:#e5f6ec; --success-ink:#05341f;
  --warning:#c98211; --warning-dim:#fbf1dd; --warning-ink:#3d2905;
  --danger:#d92d3c;  --danger-dim:#fce9eb;  --danger-ink:#3d060c;
  --info:#2563eb;    --info-dim:#e6eefc;    --info-ink:#0a1f45;

  /* Rol/rank paleti (RoleRegistry ile eşleşir — açık zeminde okunur tonlar) */
  --rank-admin:#d92d3c; --rank-moderator:#1a9d5a; --rank-kernel_dev:#7c3aed;
  --rank-sec_team:#e07a13; --rank-vip:#db2f8f; --rank-user:#2563eb;
  --rank-guest:#6c7382;

  /* Kategori rozet renkleri (mevcut çok-renkli kategori pilleri) */
  --cat-1:#2563eb; --cat-2:#1a9d5a; --cat-3:#7c3aed; --cat-4:#e07a13; --cat-5:#0d9488; --cat-6:#db2f8f;

  /* Boşluk skalası — 4px taban.
     1-9 sabittir (bileşen içi ritim her ekranda aynı olmalı).
     10-12 BÖLÜM arası boşluklardır ve akışkandır: mobilde 120px'lik boşluk
     ekranın üçte birini yiyordu. */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px;
  --space-10: clamp(40px, 31.5px + 2.25vw, 64px);
  --space-11: clamp(48px, 33.9px + 3.76vw, 88px);
  --space-12: clamp(64px, 44.3px + 5.26vw, 120px);

  /* ── EVRENSEL LAYOUT KURALLARI (tek kaynak) ──
     Kırılım noktaları — CSS değişkeni medya sorgusunda çalışmaz, bu yüzden
     burada BELGELENİR ve her yerde AYNI değerler kullanılır. Kural: mobil
     öncelikli, yani stiller önce küçük ekrana yazılır, `min-width` ile büyür.
        sm  480px   büyük telefon
        md  768px   tablet / iki kolona geçiş
        lg 1024px   küçük dizüstü / üç kolon
        xl 1280px   geniş masaüstü
     Sitede BAŞKA kırılım noktası kullanılmaz (eski view'larda 600/800/900/
     1100/1150 karışıktı). */
  --container-max:1200px;
  --container-wide:1400px;
  --container-narrow:760px;
  /* Kenar boşluğu: mobilde 16px (anayasa madde 10), masaüstünde 24px */
  --gutter: clamp(16px, 1.2vw + 12px, 24px);

  /* Dokunma hedefi alt sınırı — her tıklanabilir öğe bunu sağlamalı */
  --tap-min:44px;

  /* iPhone çentik/ev çubuğu güvenli alanları */
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);
  --safe-right:env(safe-area-inset-right, 0px);

  /* Sabit header yüksekliği — içerik üst boşluğu ve scroll-offset bundan türer */
  --header-h:68px;

  /* Radius — keskin/kararlı (profesyonel-teknik); iç içe geçişte tutarlı nesting.
     Her seviye bir öncekinin ~1.6 katı; "her şey pill" hissi yok. */
  --radius-xs:3px; --radius-sm:5px; --radius-md:8px; --radius-lg:12px;
  --radius-xl:16px; --radius-2xl:22px; --radius-pill:999px;

  /* Tipografi — TAM 3 aile */
  --font-display:'Archivo','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',ui-monospace,'Cascadia Code',monospace;

  /* AKIŞKAN ÖLÇEK — 375px (mobil) → 1440px (masaüstü) arasında clamp ile büyür.
     Mobil öncelikli kural: gövde metni (xs/sm/base) SABİT kalır; yalnız başlık
     boyutları ölçeklenir. Sabit px kullanıldığında 60px'lik hero başlığı 390px
     ekranda taşıyordu — medya sorgusuyla tek tek küçültmek yerine tek kaynak. */
  --text-xs:12px;  --lh-xs:1.5;
  --text-sm:13px;  --lh-sm:1.55;
  --text-base:15px;--lh-base:1.62;
  --text-md:   clamp(16px, 15.6px + 0.09vw, 17px); --lh-md:1.5;
  --text-lg:   clamp(19px, 18.3px + 0.19vw, 21px); --lh-lg:1.34;
  --text-xl:   clamp(23px, 21.6px + 0.38vw, 27px); --lh-xl:1.2;
  --text-2xl:  clamp(27px, 24.2px + 0.75vw, 35px); --lh-2xl:1.12;
  --text-3xl:  clamp(31px, 25.7px + 1.41vw, 46px); --lh-3xl:1.05;
  --text-4xl:  clamp(36px, 27.5px + 2.25vw, 60px); --lh-4xl:1.0;
  --text-5xl:  clamp(40px, 25.9px + 3.76vw, 80px); --lh-5xl:0.96;

  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800; --fw-heavy:900;
  --tracking-tight:-0.025em; --tracking-snug:-0.012em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-caps:0.14em;

  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-elastic:cubic-bezier(.34,1.4,.5,1);
  --duration-fast:130ms; --duration-base:230ms; --duration-slow:480ms;

  --z-base:1; --z-sticky:100; --z-drawer:200; --z-dropdown:300; --z-modal:400; --z-toast:500;
}

/* ────────────────────────  2 · SEMANTIC · [light] (VARSAYILAN)  ────────────
   Bileşenler YALNIZCA buna dokunur.  :root = varsayılan (açık beyaz+kırmızı). */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --color-bg:              #f5f5f3;   /* hafif sıcak kağıt beyazı — steril soğuk gri değil */
  --color-bg-gradient:     none;
  --color-surface:         #ffffff;
  --color-surface-raised:  #ffffff;
  --color-surface-overlay: #ffffff;
  --color-surface-sunken:  #f3f3f0;
  --color-surface-hover:   #f7f6f3;
  --color-glass:           hsl(0 0% 100% / .78);

  --color-border:          var(--n-150);
  --color-border-strong:   var(--n-200);
  --color-border-accent:   var(--accent-dim);
  --color-hairline:        rgba(255,255,255,.7);

  --color-text-primary:    #14161d;
  --color-text-secondary:  #4c5361;
  --color-text-muted:      #868da0;
  --color-text-inverse:    #ffffff;
  --color-text-link:       var(--accent-deep);

  --color-accent:          var(--accent);
  --color-accent-hover:    var(--accent-deep);
  --color-accent-contrast: var(--accent-ink);
  --color-accent-soft:     var(--accent-faint);

  --color-danger:var(--danger);   --color-danger-soft:var(--danger-dim);
  --color-success:var(--success); --color-success-soft:var(--success-dim);
  --color-warning:var(--warning); --color-warning-soft:var(--warning-dim);
  --color-info:var(--info);       --color-info-soft:var(--info-dim);

  /* Elevation — açık tema: yumuşak, temiz gölgeler (glow değil) */
  --elev-0:none;
  --elev-1:0 1px 2px rgba(16,20,30,.06);
  --elev-2:0 2px 8px rgba(16,20,30,.07), 0 1px 2px rgba(16,20,30,.05);
  --elev-3:0 10px 28px rgba(16,20,30,.10), 0 2px 6px rgba(16,20,30,.06);
  --elev-4:0 24px 60px rgba(16,20,30,.16), 0 6px 16px rgba(16,20,30,.08);
  --glow-accent:0 6px 18px var(--accent-glow);
  --focus-ring:0 0 0 3px var(--accent-glow);

  --grain:none;   /* açık temada grain yok — temiz yüzey */
}

/* ──────────────────────────  3 · SEMANTIC · [deep] (alternatif)  ───────────
   Tema seçici için koyu varyant.  Yalnız semantic override — bileşen dallanmaz. */
:root[data-theme="deep"] {
  color-scheme: dark;
  --color-bg:#0a0b10; --color-bg-gradient:radial-gradient(1000px 700px at 82% -8%, hsl(var(--accent-h) 70% 22% / .28), transparent 58%), linear-gradient(180deg,#08090d,#0a0b10 45%);
  --color-surface:#101218; --color-surface-raised:#151822; --color-surface-overlay:#1a1d29;
  --color-surface-sunken:#0b0c11; --color-surface-hover:#1b1f2b; --color-glass:hsl(230 20% 10% / .6);
  --color-border:rgba(200,205,225,.10); --color-border-strong:rgba(200,205,225,.18);
  --color-border-accent:var(--accent-dim); --color-hairline:rgba(255,255,255,.05);
  --color-text-primary:#eef0f6; --color-text-secondary:#aab0c0; --color-text-muted:#6c7385;
  --color-text-inverse:#0a0b10; --color-text-link:var(--accent-bright);
  --color-accent:var(--accent-bright); --color-accent-hover:hsl(var(--accent-h) 82% 62%);
  --color-accent-contrast:#ffffff; --color-accent-soft:hsl(var(--accent-h) 60% 16%);
  --color-danger:#ff5d6c; --color-danger-soft:#311016; --color-success:#3ddc97; --color-success-soft:#0d2c22;
  --color-warning:#f5c451; --color-warning-soft:#2f2408; --color-info:#5aa9ff; --color-info-soft:#0a223f;
  --elev-1:0 1px 2px rgba(0,0,0,.6); --elev-2:0 6px 20px rgba(0,0,0,.5);
  --elev-3:0 16px 40px rgba(0,0,0,.6); --elev-4:0 32px 80px rgba(0,0,0,.7);
  --glow-accent:0 8px 26px var(--accent-glow); --focus-ring:0 0 0 3px var(--accent-glow);
  --grain:none;
}

/* Kullanıcının seçtiği aksan tonu — <html data-accent="..."> (12 ton). Varsayılan: red */
:root[data-accent="red"]    {--accent-h:353;--accent2-h:14;}  :root[data-accent="crimson"]{--accent-h:346;--accent2-h:6;}
:root[data-accent="rose"]   {--accent-h:335;--accent2-h:354;} :root[data-accent="orange"] {--accent-h:22;--accent2-h:38;}
:root[data-accent="amber"]  {--accent-h:38;--accent2-h:20;}   :root[data-accent="emerald"]{--accent-h:152;--accent2-h:170;}
:root[data-accent="teal"]   {--accent-h:176;--accent2-h:196;} :root[data-accent="blue"]   {--accent-h:218;--accent2-h:200;}
:root[data-accent="indigo"] {--accent-h:245;--accent2-h:225;} :root[data-accent="violet"] {--accent-h:262;--accent2-h:290;}
:root[data-accent="fuchsia"]{--accent-h:300;--accent2-h:330;} :root[data-accent="slate"]  {--accent-h:220;--accent-s:16%;--accent2-h:220;}