/* ==========================================================================
   AURORA TASARIM SİSTEMİ — Token Katmanı (Faz 23.0)
   --------------------------------------------------------------------------
   Tüm yüzeylerde (admin SPA + public sayfalar) paylaşılan TEK token kaynağı.
   Yükleme sırası: tokens.css → style.css / public.css / inline <style> →
   en SON tenant theme.css (--primary/--logo-url/--bg-url override eder).

   KURALLAR:
   • Token'lar white-label giriş noktalarını (--primary, --primary-rgb,
     --logo-url, --bg-url) ALIAS'lar — ASLA yeniden tanımlamaz.
   • Mevcut --surface/--text/--border vb. korunur; yeni semantik alias'lar
     onlara var() ile bağlanır. CSS custom property'leri use-time'da çözüldüğü
     için bu, yükleme sırasından bağımsız çalışır ve light/dark'a otomatik uyar
     → Faz 23.0 görsel olarak PİKSEL-AYNI kalır (saf additive).
   ========================================================================== */

:root {
  /* ---- Nötr primitif skala (Slate) — sabit hex'ler buraya süpürülecek ---- */
  --slate-50:#f8fafc;  --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a; --slate-950:#020617;

  /* ---- Aurora marka türevleri (theme.css'in verdiği --primary üzerine) ---- */
  /* color-mix desteklemeyen eski WebView'lar ilk (fallback) değerde kalır. */
  --aurora-1: rgb(var(--primary-rgb));
  --aurora-2: #8b5cf6;
  --aurora-2: color-mix(in srgb, rgb(var(--primary-rgb)) 55%, #8b5cf6);
  --aurora-3: #06b6d4;
  --aurora-3: color-mix(in srgb, rgb(var(--primary-rgb)) 55%, #06b6d4);
  --aurora-gradient: linear-gradient(135deg, var(--aurora-1), var(--aurora-2) 52%, var(--aurora-3));
  --aurora-soft: linear-gradient(135deg,
                 rgba(var(--primary-rgb), .16), rgba(var(--primary-rgb), .04) 60%, transparent);
  --aurora-glow: 0 8px 30px -8px rgba(var(--primary-rgb), .45);

  /* ---- Semantik yüzey / metin / sınır alias (mevcut değişkenlere bağlı) ---- */
  --surface-1: var(--surface);
  --surface-2: var(--surface-hover);
  --surface-3: var(--background);
  --text-1: var(--text);
  --text-2: var(--text-muted);
  --text-3: var(--text-muted);
  --text-3: color-mix(in srgb, var(--text-muted) 72%, transparent);
  --border-1: var(--border);
  --border-2: var(--border-hover);

  /* ---- Spacing skalası (4px taban) ---- */
  --space-0:0;      --space-1:.25rem; --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem; --space-7:2rem;   --space-8:2.5rem; --space-9:3rem;
  --space-10:4rem;  --space-11:5rem;  --space-12:6rem;

  /* ---- Akışkan tip skalası ---- */
  --text-xs:   clamp(.72rem, .69rem + .12vw, .78rem);
  --text-sm:   clamp(.82rem, .79rem + .15vw, .9rem);
  --text-base: clamp(.95rem, .92rem + .2vw,  1rem);
  --text-lg:   clamp(1.05rem, 1rem + .3vw,   1.2rem);
  --text-xl:   clamp(1.2rem, 1.1rem + .5vw,  1.45rem);
  --text-2xl:  clamp(1.45rem, 1.25rem + .9vw, 1.9rem);
  --text-3xl:  clamp(1.8rem, 1.45rem + 1.5vw, 2.6rem);
  --text-4xl:  clamp(2.2rem, 1.7rem + 2.4vw,  3.4rem);
  --leading-tight:1.15; --leading-snug:1.3; --leading-normal:1.5; --leading-relaxed:1.7;
  --weight-normal:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extra:800;

  /* ---- Radii (mevcut --radius-sm/md/lg korunur, ekler) ---- */
  --radius-xs:6px;
  --radius-full:999px;

  /* ---- Elevation (koyu tema) — --elev-3, mevcut --shadow ile birebir aynı ---- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(0,0,0,.30);
  --elev-2: 0 4px 14px -4px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.30);
  --elev-3: 0 20px 40px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.10);
  --elev-4: 0 32px 70px -12px rgba(0,0,0,.60), 0 2px 8px rgba(0,0,0,.40);

  /* ---- Motion ---- */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; --dur-slower:520ms;
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-inout: cubic-bezier(.65,.05,.36,1);

  /* ---- Z-index skalası (mevcut inline z-index:1000 modal'larla uyumlu) ---- */
  --z-base:1; --z-raised:10; --z-nav:100; --z-drawer:900;
  --z-modal:1000; --z-toast:1100; --z-popover:1200; --z-max:9990;

  /* ---- Glass ---- */
  --glass-bg: rgba(15,22,42,.72);
  --glass-border: rgba(255,255,255,.10);
  --glass-blur: 16px;
  --glass-saturate: 160%;

  /* ---- Safe-area (PWA / notch) ---- */
  --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);
}

/* Açık tema: elevation + glass yeniden ayarlanır (semantik alias'lar otomatik uyar).
   --elev-3 burada da mevcut light-theme --shadow ile birebir aynı. */
body.light-theme {
  --elev-1: 0 1px 2px rgba(15,23,42,.06);
  --elev-2: 0 4px 14px -4px rgba(15,23,42,.10), 0 1px 2px rgba(15,23,42,.05);
  --elev-3: 0 20px 40px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.02);
  --elev-4: 0 32px 70px -12px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.08);
  --glass-bg: rgba(255,255,255,.82);
  --glass-border: rgba(15,23,42,.08);
}

/* Hareket azaltma tercihi: tüm geçiş süreleri ~anında */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:0.01ms; --dur-base:0.01ms; --dur-slow:0.01ms; --dur-slower:0.01ms;
    --motion-fast:0.01ms; --motion-base:0.01ms; --motion-screen:0.01ms; --dur-press:0.01ms;
  }
}

/* ==========================================================================
   AURORA 2.0 — Token Katmanı (Faz 26) — saf additive, white-label korunur
   Marka türevi her değer rgb(var(--primary-rgb)) üzerinden color-mix ile
   hesaplanır → tenant --primary'yi değiştirince ramp/gradyan/odak halkası/
   gölge otomatik uyar. color-mix desteklemeyen eski WebView ilk (sabit) değerde kalır.
   ========================================================================== */
:root {
  /* ---- Primary 10-adım ramp (sabit mavi fallback → color-mix override) ---- */
  --primary-50:#eff6ff;  --primary-50: color-mix(in srgb, rgb(var(--primary-rgb)) 8%,  #fff);
  --primary-100:#dbeafe; --primary-100:color-mix(in srgb, rgb(var(--primary-rgb)) 16%, #fff);
  --primary-200:#bfdbfe; --primary-200:color-mix(in srgb, rgb(var(--primary-rgb)) 30%, #fff);
  --primary-300:#93c5fd; --primary-300:color-mix(in srgb, rgb(var(--primary-rgb)) 50%, #fff);
  --primary-400:#60a5fa; --primary-400:color-mix(in srgb, rgb(var(--primary-rgb)) 74%, #fff);
  --primary-500:#3b82f6; --primary-500:rgb(var(--primary-rgb));
  --primary-600:#2563eb; --primary-600:color-mix(in srgb, rgb(var(--primary-rgb)) 88%, #000);
  --primary-700:#1d4ed8; --primary-700:color-mix(in srgb, rgb(var(--primary-rgb)) 74%, #000);
  --primary-800:#1e40af; --primary-800:color-mix(in srgb, rgb(var(--primary-rgb)) 60%, #000);
  --primary-900:#1e3a8a; --primary-900:color-mix(in srgb, rgb(var(--primary-rgb)) 48%, #000);
  --primary-950:#172554; --primary-950:color-mix(in srgb, rgb(var(--primary-rgb)) 34%, #000);

  /* ---- Premium aksan (cyan) — yalnız üyelik/öne-çıkan; gövde metni DEĞİL ---- */
  --accent:#06b6d4;
  --accent-soft: rgba(6,182,212,.14);

  /* ---- Semantik 3-adım: -bg (dolgu) / -fg (ikon+metin) / -border ----
     Taban (:root) = KOYU tema için açık -fg; body.light-theme aşağıda koyulaştırır. */
  --success:#10b981; --success-bg:rgba(16,185,129,.14); --success-fg:#34d399; --success-border:rgba(16,185,129,.32);
  --warning:#f59e0b; --warning-bg:rgba(245,158,11,.16); --warning-fg:#fbbf24; --warning-border:rgba(245,158,11,.34);
  --danger:#ef4444;  --danger-bg:rgba(239,68,68,.14);   --danger-fg:#f87171;  --danger-border:rgba(239,68,68,.34);
  --info:#0ea5e9;    --info-bg:rgba(14,165,233,.14);    --info-fg:#38bdf8;    --info-border:rgba(14,165,233,.32);

  /* ---- Odak halkası (a11y / :focus-visible) — çift katman ---- */
  --focus-ring: var(--primary-400);
  --focus-halo: rgba(var(--primary-rgb), .32);

  /* ---- Pasif (disabled) durum ---- */
  --disabled-opacity:.55;

  /* ---- Anlamlı boşluk takımı (gruplama: sıkı içeride / gevşek arada) ---- */
  --gap-tight: var(--space-2);   --gap: var(--space-4);
  --gap-loose: var(--space-6);   --gap-section: var(--space-9);

  /* ---- Marka-tonlu kart gölgesi (iki katman, asla #000) ---- */
  --elev-card: 0 1px 2px rgba(var(--primary-rgb),.05), 0 10px 28px -10px rgba(var(--primary-rgb),.30);

  /* ---- Aurora mesh arka plan (hero / boş durum / splash) ---- */
  --aurora-mesh:
    radial-gradient(120% 80% at 12% 8%,  rgba(var(--primary-rgb),.18), transparent 60%),
    radial-gradient(90% 70% at 92% 12%,  rgba(6,182,212,.14),          transparent 55%),
    radial-gradient(140% 100% at 50% 110%, rgba(139,92,246,.10),        transparent 60%);

  /* ---- Motion alias + M3 easing katmanı (Faz 30, Brief v2) ---- */
  --ease-standard: var(--ease-out);
  --dur-press: 120ms;
  --motion-fast: 150ms; --motion-base: 250ms; --motion-screen: 350ms;
  --ease-emphasized: cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized-decel: cubic-bezier(.05, .7, .1, 1);   /* giren öğeler */
  --ease-emphasized-accel: cubic-bezier(.3, 0, .8, .15);   /* çıkan öğeler */

  /* ---- Kırılma noktaları (referans; @media içinde kullanılamaz) ----
     sm 480px · md 768px · lg 1024px · xl 1280px */
  --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;
}

/* Açık tema: marka-tonlu kart gölgesi + semantik -fg koyulaştırma (AA için) */
body.light-theme {
  --elev-card: 0 1px 2px rgba(15,23,42,.06), 0 10px 28px -12px rgba(var(--primary-rgb),.22);
  --success-fg:#059669; --warning-fg:#b45309; --danger-fg:#dc2626; --info-fg:#0284c7;
  --focus-ring: var(--primary-600);
}

/* Şeffaflık azaltma tercihi: cam (glass) efektleri katı yüzeye düşer */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: var(--surface-1); --glass-blur: 0px; --glass-saturate: 100%; }
}

/* ==========================================================================
   SİNEMATİK AURORA — Sıfırdan Redesign Katmanı (Faz 41.0)
   Saf ADDITIVE: yukarıdaki hiçbir token silinmez/değiştirilmez. Yeni display
   tipografi + çok-tonlu "Aurora Spectrum" palet + sinematik foto-scrim.
   ========================================================================== */
:root {
  /* ---- Display tipografi (yalnız hero başlık / marka wordmark / büyük metrik) ---- */
  --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --text-display: clamp(2.8rem, 2rem + 4vw, 5.5rem);

  /* ---- AURORA SPECTRUM — renk paleti güçlendirme ----
     Tek-tonlu primary ramp'in üzerine üç ikincil ton: hepsi rgb(var(--primary-rgb))
     üzerinden color-mix ile türetilir → tenant --primary değişince otomatik uyum
     sağlar (white-label asla bozulmaz). VIP/sadakat/öne-çıkan rozetlerde kullanılır. */
  --spectrum-gold:   color-mix(in srgb, rgb(var(--primary-rgb)) 28%, #d4af37 72%);
  --spectrum-violet: color-mix(in srgb, rgb(var(--primary-rgb)) 45%, #7c3aed 55%);
  --spectrum-rose:   color-mix(in srgb, rgb(var(--primary-rgb)) 30%, #e11d8f 70%);

  --spectrum-gold-fg:    color-mix(in srgb, var(--spectrum-gold) 85%, #000 15%);
  --spectrum-gold-bg:    color-mix(in srgb, var(--spectrum-gold) 16%, transparent);
  --spectrum-gold-border:color-mix(in srgb, var(--spectrum-gold) 38%, transparent);

  --spectrum-violet-fg:    color-mix(in srgb, var(--spectrum-violet) 88%, #000 12%);
  --spectrum-violet-bg:    color-mix(in srgb, var(--spectrum-violet) 16%, transparent);
  --spectrum-violet-border:color-mix(in srgb, var(--spectrum-violet) 38%, transparent);

  --spectrum-rose-fg:    color-mix(in srgb, var(--spectrum-rose) 88%, #000 12%);
  --spectrum-rose-bg:    color-mix(in srgb, var(--spectrum-rose) 16%, transparent);
  --spectrum-rose-border:color-mix(in srgb, var(--spectrum-rose) 38%, transparent);

  /* ---- Sadakat kademe üçlüsü (bronz/gümüş/altın) — Faz 41.7 renk paleti tamamlama ----
     Gümüş bilinçli olarak nötr/metalik kalır (kademe karşıtlığı için); bronz ve altın
     marka rengiyle harmanlanır (white-label uyumlu). */
  --spectrum-bronze:   color-mix(in srgb, rgb(var(--primary-rgb)) 22%, #b45309 78%);
  --spectrum-silver:   color-mix(in srgb, rgb(var(--primary-rgb)) 14%, #94a3b8 86%);
  --spectrum-bronze-fg:    color-mix(in srgb, var(--spectrum-bronze) 85%, #000 15%);
  --spectrum-bronze-bg:    color-mix(in srgb, var(--spectrum-bronze) 16%, transparent);
  --spectrum-bronze-border:color-mix(in srgb, var(--spectrum-bronze) 38%, transparent);
  --spectrum-silver-fg:    color-mix(in srgb, var(--spectrum-silver) 80%, #000 20%);
  --spectrum-silver-bg:    color-mix(in srgb, var(--spectrum-silver) 18%, transparent);
  --spectrum-silver-border:color-mix(in srgb, var(--spectrum-silver) 40%, transparent);

  /* ---- Sinematik foto-scrim (okunabilirlik karartması) ---- */
  --cinematic-scrim: linear-gradient(180deg,
    rgba(8,11,17,0) 0%, rgba(8,11,17,.35) 55%, rgba(8,11,17,.88) 100%);
  --cinematic-scrim-light: linear-gradient(180deg,
    rgba(15,23,42,0) 0%, rgba(15,23,42,.22) 55%, rgba(15,23,42,.72) 100%);
}

body.light-theme {
  --spectrum-gold-fg: color-mix(in srgb, var(--spectrum-gold) 70%, #000 30%);
  --spectrum-violet-fg: color-mix(in srgb, var(--spectrum-violet) 72%, #000 28%);
  --spectrum-rose-fg: color-mix(in srgb, var(--spectrum-rose) 70%, #000 30%);
  --spectrum-bronze-fg: color-mix(in srgb, var(--spectrum-bronze) 75%, #000 25%);
  --spectrum-silver-fg: color-mix(in srgb, var(--spectrum-silver) 55%, #000 45%);
}