/* ═══════════════════════════════════════════════════════════════════════════
   OKI Marketplace — Dinamik Tema Sistemi
   ───────────────────────────────────────────────────────────────────────────
   14 tema, merkezi kaynak. Tüm CSS değişkenleri + alias'lar burada tanımlı.
   Static HTML sayfaları <link rel="stylesheet" href="/oki-themes.css"> ile yükler.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─ LAYOUT & TİPOGRAFİ (tema-bağımsız, tüm temalar için sabit) ────────────── */
:root {
  --nav-h: 62px;
  --sidebar-w: 270px;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --max-w: 1440px;
  --pad-x: 52px;

  /* Tema-bağımsız aksan renkler (tüm temalar tarafından kullanılabilir) */
  --teal: #00C9B1;
  --teal-lo: rgba(0, 201, 177, 0.1);
  --teal-border: rgba(0, 201, 177, 0.25);
  --blue: #4B9EF5;
  --blue-lo: rgba(75, 158, 245, 0.1);
  --blue-border: rgba(75, 158, 245, 0.25);
  --red: #F87171;
  --red-lo: rgba(248, 113, 113, 0.1);
}

/* ════════════════════════════════════════════════════════════════════════════
   TEMALAR — Her tema için: renk değişkenleri + canonical isimleri + alias'lar
   ════════════════════════════════════════════════════════════════════════════ */

/* ─ GALAKSI (Varsayılan — mor) ─────────────────────────────────────────────── */
:root,
[data-theme="galaksi"] {
  --bg: #0D0B14;
  --bg2: #13101E;
  --bg3: #1A1628;
  --surface: #221D32;
  --accent: #8B5CF6;
  --accent2: #A78BFA;
  --accent-lo: rgba(139, 92, 246, 0.12);
  --accent-border: rgba(139, 92, 246, 0.3);
  --text: #F0EEFF;
  --text-60: rgba(240, 238, 255, 0.6);
  --text-30: rgba(240, 238, 255, 0.3);
  --text-8: rgba(240, 238, 255, 0.08);
  --text-4: rgba(240, 238, 255, 0.04);
  --slate: #8B7EC8;
  --slate-dim: #3D3568;
  --border: rgba(139, 92, 246, 0.13);
  --green: #34D399;
  --green-lo: rgba(52, 211, 153, 0.1);
  --green-border: rgba(52, 211, 153, 0.2);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
  --shadow-accent: 0 0 40px rgba(139, 92, 246, 0.2);
  --card-hover: rgba(139, 92, 246, 0.06);
  --nav-blur: rgba(13, 11, 20, 0.94);
  --hero-glow: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(139, 92, 246, 0.1), transparent 70%);
  --btn-text: #FFFFFF;
  --chip-active-bg: #8B5CF6;
  --chip-active-text: #FFFFFF;
  --scrollbar-track: #13101E;
  --scrollbar-thumb: #3D3568;
  color-scheme: dark;

  /* Alias'lar — geriye dönük uyumluluk */
  --white: var(--text);
  --white-60: var(--text-60);
  --white-30: var(--text-30);
  --white-8: var(--text-8);
  --white-4: var(--text-4);
  --w: var(--text);
  --w60: var(--text-60);
  --w30: var(--text-30);
  --w8: var(--text-8);
  --w4: var(--text-4);
  --amber: var(--accent);
  --amber-lo: var(--accent-lo);
  --amber-border: var(--accent-border);
}

/* ─ OBSIDIAN (Derin siyah + sarı amber) ─────────────────────────────────────── */
[data-theme="obsidian"] {
  --bg: #07070F;
  --bg2: #0D0D1C;
  --bg3: #13132A;
  --surface: #181830;
  --accent: #F5A623;
  --accent2: #FFB740;
  --accent-lo: rgba(245, 166, 35, 0.12);
  --accent-border: rgba(245, 166, 35, 0.28);
  --text: #F4F3EF;
  --text-60: rgba(244, 243, 239, 0.6);
  --text-30: rgba(244, 243, 239, 0.3);
  --text-8: rgba(244, 243, 239, 0.08);
  --text-4: rgba(244, 243, 239, 0.04);
  --slate: #8B9EC4;
  --slate-dim: #3D4B6E;
  --border: rgba(139, 158, 196, 0.13);
  --green: #2ECC71;
  --green-lo: rgba(46, 204, 113, 0.1);
  --green-border: rgba(46, 204, 113, 0.2);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 0 32px rgba(245, 166, 35, 0.15);
  --card-hover: rgba(245, 166, 35, 0.04);
  --nav-blur: rgba(7, 7, 15, 0.92);
  --hero-glow: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(245, 166, 35, 0.07), transparent 70%);
  --btn-text: #07070F;
  --chip-active-bg: #F5A623;
  --chip-active-text: #07070F;
  --scrollbar-track: #0D0D1C;
  --scrollbar-thumb: #3D4B6E;
  color-scheme: dark;

  --white: var(--text);
  --white-60: var(--text-60);
  --white-30: var(--text-30);
  --white-8: var(--text-8);
  --white-4: var(--text-4);
  --w: var(--text);
  --w60: var(--text-60);
  --w30: var(--text-30);
  --w8: var(--text-8);
  --w4: var(--text-4);
  --amber: var(--accent);
  --amber-lo: var(--accent-lo);
  --amber-border: var(--accent-border);
}

/* ─ ARCTIC (Buz beyazı + mavi) ──────────────────────────────────────────────── */
[data-theme="arctic"] {
  --bg: #F0F4F8;
  --bg2: #FFFFFF;
  --bg3: #E8EEF5;
  --surface: #F8FAFC;
  --accent: #0A6EFF;
  --accent2: #3D8EFF;
  --accent-lo: rgba(10, 110, 255, 0.08);
  --accent-border: rgba(10, 110, 255, 0.2);
  --text: #0D1117;
  --text-60: rgba(13, 17, 23, 0.6);
  --text-30: rgba(13, 17, 23, 0.3);
  --text-8: rgba(13, 17, 23, 0.08);
  --text-4: rgba(13, 17, 23, 0.04);
  --slate: #4A6080;
  --slate-dim: #8AA0C0;
  --border: rgba(10, 30, 80, 0.1);
  --green: #00A868;
  --green-lo: rgba(0, 168, 104, 0.08);
  --green-border: rgba(0, 168, 104, 0.2);
  --shadow: 0 4px 24px rgba(10, 30, 80, 0.08);
  --shadow-accent: 0 0 32px rgba(10, 110, 255, 0.12);
  --card-hover: rgba(10, 110, 255, 0.04);
  --nav-blur: rgba(240, 244, 248, 0.96);
  --hero-glow: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(10, 110, 255, 0.06), transparent 70%);
  --btn-text: #FFFFFF;
  --chip-active-bg: #0A6EFF;
  --chip-active-text: #FFFFFF;
  --scrollbar-track: #E8EEF5;
  --scrollbar-thumb: #8AA0C0;
  color-scheme: light;

  --white: var(--text);
  --white-60: var(--text-60);
  --white-30: var(--text-30);
  --white-8: var(--text-8);
  --white-4: var(--text-4);
  --w: var(--text);
  --w60: var(--text-60);
  --w30: var(--text-30);
  --w8: var(--text-8);
  --w4: var(--text-4);
  --amber: var(--accent);
  --amber-lo: var(--accent-lo);
  --amber-border: var(--accent-border);
}

/* ─ EMBER (Koyu kahve + altın) ─────────────────────────────────────────────── */
[data-theme="ember"] {
  --bg: #0F0A07;
  --bg2: #180F09;
  --bg3: #211408;
  --surface: #2A1A0A;
  --accent: #E8943A;
  --accent2: #F0A850;
  --accent-lo: rgba(232, 148, 58, 0.12);
  --accent-border: rgba(232, 148, 58, 0.3);
  --text: #F5EDE0;
  --text-60: rgba(245, 237, 224, 0.6);
  --text-30: rgba(245, 237, 224, 0.3);
  --text-8: rgba(245, 237, 224, 0.08);
  --text-4: rgba(245, 237, 224, 0.04);
  --slate: #B09070;
  --slate-dim: #604030;
  --border: rgba(180, 130, 80, 0.12);
  --green: #5CC87A;
  --green-lo: rgba(92, 200, 122, 0.1);
  --green-border: rgba(92, 200, 122, 0.2);
  --shadow: 0 4px 28px rgba(0, 0, 0, 0.7);
  --shadow-accent: 0 0 40px rgba(232, 148, 58, 0.2);
  --card-hover: rgba(232, 148, 58, 0.05);
  --nav-blur: rgba(15, 10, 7, 0.94);
  --hero-glow: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(232, 148, 58, 0.1), transparent 70%);
  --btn-text: #0F0A07;
  --chip-active-bg: #E8943A;
  --chip-active-text: #0F0A07;
  --scrollbar-track: #180F09;
  --scrollbar-thumb: #604030;
  color-scheme: dark;

  --white: var(--text);
  --white-60: var(--text-60);
  --white-30: var(--text-30);
  --white-8: var(--text-8);
  --white-4: var(--text-4);
  --w: var(--text);
  --w60: var(--text-60);
  --w30: var(--text-30);
  --w8: var(--text-8);
  --w4: var(--text-4);
  --amber: var(--accent);
  --amber-lo: var(--accent-lo);
  --amber-border: var(--accent-border);
}

/* ─ VOID (Tam siyah + neon yeşil) ─────────────────────────────────────────── */
[data-theme="void"] {
  --bg: #000000;
  --bg2: #080808;
  --bg3: #0F0F0F;
  --surface: #141414;
  --accent: #00FF88;
  --accent2: #00CC6A;
  --accent-lo: rgba(0, 255, 136, 0.08);
  --accent-border: rgba(0, 255, 136, 0.25);
  --text: #E8FFE8;
  --text-60: rgba(232, 255, 232, 0.6);
  --text-30: rgba(232, 255, 232, 0.3);
  --text-8: rgba(232, 255, 232, 0.08);
  --text-4: rgba(232, 255, 232, 0.04);
  --slate: #40A060;
  --slate-dim: #1A4030;
  --border: rgba(0, 255, 136, 0.1);
  --green: #00FF88;
  --green-lo: rgba(0, 255, 136, 0.08);
  --green-border: rgba(0, 255, 136, 0.2);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.9);
  --shadow-accent: 0 0 40px rgba(0, 255, 136, 0.2);
  --card-hover: rgba(0, 255, 136, 0.04);
  --nav-blur: rgba(0, 0, 0, 0.96);
  --hero-glow: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(0, 255, 136, 0.08), transparent 70%);
  --btn-text: #000000;
  --chip-active-bg: #00FF88;
  --chip-active-text: #000000;
  --scrollbar-track: #080808;
  --scrollbar-thumb: #1A4030;
  color-scheme: dark;

  --white: var(--text);
  --white-60: var(--text-60);
  --white-30: var(--text-30);
  --white-8: var(--text-8);
  --white-4: var(--text-4);
  --w: var(--text);
  --w60: var(--text-60);
  --w30: var(--text-30);
  --w8: var(--text-8);
  --w4: var(--text-4);
  --amber: var(--accent);
  --amber-lo: var(--accent-lo);
  --amber-border: var(--accent-border);
}

/* ─ SAKURA (Beyaz + rose pembe) ────────────────────────────────────────────── */
[data-theme="sakura"] {
  --bg: #FFF8F9;
  --bg2: #FFFFFF;
  --bg3: #FFF0F3;
  --surface: #FFF5F7;
  --accent: #E11D65;
  --accent2: #F43F8A;
  --accent-lo: rgba(225, 29, 101, 0.08);
  --accent-border: rgba(225, 29, 101, 0.2);
  --text: #1A0A10;
  --text-60: rgba(26, 10, 16, 0.6);
  --text-30: rgba(26, 10, 16, 0.3);
  --text-8: rgba(26, 10, 16, 0.08);
  --text-4: rgba(26, 10, 16, 0.04);
  --slate: #8C4060;
  --slate-dim: #D4A0B0;
  --border: rgba(225, 29, 101, 0.1);
  --green: #059669;
  --green-lo: rgba(5, 150, 105, 0.08);
  --green-border: rgba(5, 150, 105, 0.2);
  --shadow: 0 4px 24px rgba(225, 29, 101, 0.06);
  --shadow-accent: 0 0 32px rgba(225, 29, 101, 0.12);
  --card-hover: rgba(225, 29, 101, 0.04);
  --nav-blur: rgba(255, 248, 249, 0.96);
  --hero-glow: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(225, 29, 101, 0.06), transparent 70%);
  --btn-text: #FFFFFF;
  --chip-active-bg: #E11D65;
  --chip-active-text: #FFFFFF;
  --scrollbar-track: #FFF0F3;
  --scrollbar-thumb: #D4A0B0;
  color-scheme: light;

  --white: var(--text);
  --white-60: var(--text-60);
  --white-30: var(--text-30);
  --white-8: var(--text-8);
  --white-4: var(--text-4);
  --w: var(--text);
  --w60: var(--text-60);
  --w30: var(--text-30);
  --w8: var(--text-8);
  --w4: var(--text-4);
  --amber: var(--accent);
  --amber-lo: var(--accent-lo);
  --amber-border: var(--accent-border);
}

/* ─ SLATE (Koyu gri + cyan) ────────────────────────────────────────────────── */
[data-theme="slate"] {
  --bg: #0A0E14;
  --bg2: #101620;
  --bg3: #161E2C;
  --surface: #1C2638;
  --accent: #06B6D4;
  --accent2: #22D3EE;
  --accent-lo: rgba(6, 182, 212, 0.1);
  --accent-border: rgba(6, 182, 212, 0.28);
  --text: #E8F4F8;
  --text-60: rgba(232, 244, 248, 0.6);
  --text-30: rgba(232, 244, 248, 0.3);
  --text-8: rgba(232, 244, 248, 0.08);
  --text-4: rgba(232, 244, 248, 0.04);
  --slate: #64A0B4;
  --slate-dim: #1E4060;
  --border: rgba(6, 182, 212, 0.12);
  --green: #10B981;
  --green-lo: rgba(16, 185, 129, 0.1);
  --green-border: rgba(16, 185, 129, 0.2);
  --shadow: 0 4px 28px rgba(0, 0, 0, 0.7);
  --shadow-accent: 0 0 40px rgba(6, 182, 212, 0.18);
  --card-hover: rgba(6, 182, 212, 0.05);
  --nav-blur: rgba(10, 14, 20, 0.94);
  --hero-glow: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(6, 182, 212, 0.08), transparent 70%);
  --btn-text: #0A0E14;
  --chip-active-bg: #06B6D4;
  --chip-active-text: #0A0E14;
  --scrollbar-track: #101620;
  --scrollbar-thumb: #1E4060;
  color-scheme: dark;

  --white: var(--text);
  --white-60: var(--text-60);
  --white-30: var(--text-30);
  --white-8: var(--text-8);
  --white-4: var(--text-4);
  --w: var(--text);
  --w60: var(--text-60);
  --w30: var(--text-30);
  --w8: var(--text-8);
  --w4: var(--text-4);
  --amber: var(--accent);
  --amber-lo: var(--accent-lo);
  --amber-border: var(--accent-border);
}

/* ─ SAND (Krem/bej + toprak) ───────────────────────────────────────────────── */
[data-theme="sand"] {
  --bg: #F9F5EE;
  --bg2: #FFFFFF;
  --bg3: #F3EDE0;
  --surface: #FBF8F2;
  --accent: #92510A;
  --accent2: #B36810;
  --accent-lo: rgba(146, 81, 10, 0.08);
  --accent-border: rgba(146, 81, 10, 0.22);
  --text: #1C1008;
  --text-60: rgba(28, 16, 8, 0.6);
  --text-30: rgba(28, 16, 8, 0.3);
  --text-8: rgba(28, 16, 8, 0.08);
  --text-4: rgba(28, 16, 8, 0.04);
  --slate: #7A5C3A;
  --slate-dim: #C4A882;
  --border: rgba(146, 81, 10, 0.1);
  --green: #3D7A2A;
  --green-lo: rgba(61, 122, 42, 0.08);
  --green-border: rgba(61, 122, 42, 0.2);
  --shadow: 0 4px 20px rgba(146, 81, 10, 0.08);
  --shadow-accent: 0 0 32px rgba(146, 81, 10, 0.1);
  --card-hover: rgba(146, 81, 10, 0.04);
  --nav-blur: rgba(249, 245, 238, 0.96);
  --hero-glow: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(146, 81, 10, 0.05), transparent 70%);
  --btn-text: #FFFFFF;
  --chip-active-bg: #92510A;
  --chip-active-text: #FFFFFF;
  --scrollbar-track: #F3EDE0;
  --scrollbar-thumb: #C4A882;
  color-scheme: light;

  --white: var(--text);
  --white-60: var(--text-60);
  --white-30: var(--text-30);
  --white-8: var(--text-8);
  --white-4: var(--text-4);
  --w: var(--text);
  --w60: var(--text-60);
  --w30: var(--text-30);
  --w8: var(--text-8);
  --w4: var(--text-4);
  --amber: var(--accent);
  --amber-lo: var(--accent-lo);
  --amber-border: var(--accent-border);
}

/* ─ SARI-LACIVERT (Fenerbahçe — sarı #FFED00 + lacivert #002749) ──────────── */
[data-theme="sari-lacivert"] {
  --bg: #001A30;
  --bg2: #002749;
  --bg3: #003366;
  --surface: #004080;
  --accent: #FFED00;
  --accent2: #FFD700;
  --accent-lo: rgba(255, 237, 0, 0.12);
  --accent-border: rgba(255, 237, 0, 0.35);
  --text: #FFFDE0;
  --text-60: rgba(255, 253, 224, 0.6);
  --text-30: rgba(255, 253, 224, 0.3);
  --text-8: rgba(255, 253, 224, 0.08);
  --text-4: rgba(255, 253, 224, 0.04);
  --slate: #7AA0CC;
  --slate-dim: #2A4A6E;
  --border: rgba(255, 237, 0, 0.15);
  --green: #4ADE80;
  --green-lo: rgba(74, 222, 128, 0.1);
  --green-border: rgba(74, 222, 128, 0.25);
  --shadow: 0 4px 28px rgba(0, 0, 0, 0.8);
  --shadow-accent: 0 0 40px rgba(255, 237, 0, 0.25);
  --card-hover: rgba(255, 237, 0, 0.06);
  --nav-blur: rgba(0, 26, 48, 0.96);
  --hero-glow: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 237, 0, 0.1), transparent 70%);
  --btn-text: #001A30;
  --chip-active-bg: #FFED00;
  --chip-active-text: #001A30;
  --scrollbar-track: #002749;
  --scrollbar-thumb: #2A4A6E;
  color-scheme: dark;

  --white: var(--text);
  --white-60: var(--text-60);
  --white-30: var(--text-30);
  --white-8: var(--text-8);
  --white-4: var(--text-4);
  --w: var(--text);
  --w60: var(--text-60);
  --w30: var(--text-30);
  --w8: var(--text-8);
  --w4: var(--text-4);
  --amber: var(--accent);
  --amber-lo: var(--accent-lo);
  --amber-border: var(--accent-border);
}

/* ─ SARI-KIRMIZI (Galatasaray — kırmızı zemin + sarı #FDB912) ──────────────── */
[data-theme="sari-kirmizi"] {
  --bg: #0F0008;
  --bg2: #1A000D;
  --bg3: #240012;
  --surface: #2E0018;
  --accent: #FDB912;
  --accent2: #FFD040;
  --accent-lo: rgba(253, 185, 18, 0.12);
  --accent-border: rgba(253, 185, 18, 0.35);
  --text: #FFF8E0;
  --text-60: rgba(255, 248, 224, 0.6);
  --text-30: rgba(255, 248, 224, 0.3);
  --text-8: rgba(255, 248, 224, 0.08);
  --text-4: rgba(255, 248, 224, 0.04);
  --slate: #CC7090;
  --slate-dim: #6A2030;
  --border: rgba(169, 4, 50, 0.25);
  --green: #4ADE80;
  --green-lo: rgba(74, 222, 128, 0.1);
  --green-border: rgba(74, 222, 128, 0.25);
  --shadow: 0 4px 28px rgba(0, 0, 0, 0.85);
  --shadow-accent: 0 0 40px rgba(253, 185, 18, 0.2);
  --card-hover: rgba(253, 185, 18, 0.05);
  --nav-blur: rgba(15, 0, 8, 0.96);
  --hero-glow: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(169, 4, 50, 0.15), transparent 70%);
  --btn-text: #0F0008;
  --chip-active-bg: #FDB912;
  --chip-active-text: #0F0008;
  --scrollbar-track: #1A000D;
  --scrollbar-thumb: #6A2030;
  color-scheme: dark;

  --white: var(--text);
  --white-60: var(--text-60);
  --white-30: var(--text-30);
  --white-8: var(--text-8);
  --white-4: var(--text-4);
  --w: var(--text);
  --w60: var(--text-60);
  --w30: var(--text-30);
  --w8: var(--text-8);
  --w4: var(--text-4);
  --amber: var(--accent);
  --amber-lo: var(--accent-lo);
  --amber-border: var(--accent-border);
}

/* ─ SIYAH-BEYAZ (Beşiktaş — siyah #000000 + beyaz #FFFFFF) ────────────────── */
[data-theme="siyah-beyaz"] {
  --bg: #060606;
  --bg2: #101010;
  --bg3: #1A1A1A;
  --surface: #242424;
  --accent: #FFFFFF;
  --accent2: #E0E0E0;
  --accent-lo: rgba(255, 255, 255, 0.08);
  --accent-border: rgba(255, 255, 255, 0.25);
  --text: #F8F8F8;
  --text-60: rgba(248, 248, 248, 0.6);
  --text-30: rgba(248, 248, 248, 0.3);
  --text-8: rgba(248, 248, 248, 0.08);
  --text-4: rgba(248, 248, 248, 0.04);
  --slate: #909090;
  --slate-dim: #404040;
  --border: rgba(255, 255, 255, 0.1);
  --green: #6EE7B7;
  --green-lo: rgba(110, 231, 183, 0.1);
  --green-border: rgba(110, 231, 183, 0.25);
  --shadow: 0 4px 28px rgba(0, 0, 0, 0.9);
  --shadow-accent: 0 0 40px rgba(255, 255, 255, 0.1);
  --card-hover: rgba(255, 255, 255, 0.04);
  --nav-blur: rgba(6, 6, 6, 0.97);
  --hero-glow: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(255, 255, 255, 0.05), transparent 70%);
  --btn-text: #060606;
  --chip-active-bg: #FFFFFF;
  --chip-active-text: #060606;
  --scrollbar-track: #101010;
  --scrollbar-thumb: #404040;
  color-scheme: dark;

  --white: var(--text);
  --white-60: var(--text-60);
  --white-30: var(--text-30);
  --white-8: var(--text-8);
  --white-4: var(--text-4);
  --w: var(--text);
  --w60: var(--text-60);
  --w30: var(--text-30);
  --w8: var(--text-8);
  --w4: var(--text-4);
  --amber: var(--accent);
  --amber-lo: var(--accent-lo);
  --amber-border: var(--accent-border);
}

/* ─ BORDO-MAVI (Trabzonspor — bordo #902F2F + gök mavisi #4FBFF0) ──────────── */
[data-theme="bordo-mavi"] {
  --bg: #080512;
  --bg2: #100A1E;
  --bg3: #180F28;
  --surface: #201430;
  --accent: #4FBFF0;
  --accent2: #7DD4F8;
  --accent-lo: rgba(79, 191, 240, 0.1);
  --accent-border: rgba(79, 191, 240, 0.3);
  --text: #E8F4FF;
  --text-60: rgba(232, 244, 255, 0.6);
  --text-30: rgba(232, 244, 255, 0.3);
  --text-8: rgba(232, 244, 255, 0.08);
  --text-4: rgba(232, 244, 255, 0.04);
  --slate: #7090C0;
  --slate-dim: #302060;
  --border: rgba(144, 47, 47, 0.2);
  --green: #34D399;
  --green-lo: rgba(52, 211, 153, 0.1);
  --green-border: rgba(52, 211, 153, 0.25);
  --shadow: 0 4px 28px rgba(0, 0, 0, 0.85);
  --shadow-accent: 0 0 40px rgba(79, 191, 240, 0.2);
  --card-hover: rgba(79, 191, 240, 0.05);
  --nav-blur: rgba(8, 5, 18, 0.96);
  --hero-glow: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(144, 47, 47, 0.15), transparent 50%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(79, 191, 240, 0.08), transparent 60%);
  --btn-text: #080512;
  --chip-active-bg: #4FBFF0;
  --chip-active-text: #080512;
  --scrollbar-track: #100A1E;
  --scrollbar-thumb: #302060;
  color-scheme: dark;

  --white: var(--text);
  --white-60: var(--text-60);
  --white-30: var(--text-30);
  --white-8: var(--text-8);
  --white-4: var(--text-4);
  --w: var(--text);
  --w60: var(--text-60);
  --w30: var(--text-30);
  --w8: var(--text-8);
  --w4: var(--text-4);
  --amber: var(--accent);
  --amber-lo: var(--accent-lo);
  --amber-border: var(--accent-border);
}

/* ─ KIRMIZI-BEYAZ (Türkiye Milli Takımı — kırmızı #E30A17 + beyaz) ──────────── */
[data-theme="kirmizi-beyaz"] {
  --bg: #F8F4F4;
  --bg2: #FFFFFF;
  --bg3: #FFF0F0;
  --surface: #FFF5F5;
  --accent: #E30A17;
  --accent2: #FF2030;
  --accent-lo: rgba(227, 10, 23, 0.08);
  --accent-border: rgba(227, 10, 23, 0.25);
  --text: #1A0404;
  --text-60: rgba(26, 4, 4, 0.6);
  --text-30: rgba(26, 4, 4, 0.3);
  --text-8: rgba(26, 4, 4, 0.08);
  --text-4: rgba(26, 4, 4, 0.04);
  --slate: #804040;
  --slate-dim: #D09090;
  --border: rgba(227, 10, 23, 0.12);
  --green: #16A34A;
  --green-lo: rgba(22, 163, 74, 0.08);
  --green-border: rgba(22, 163, 74, 0.2);
  --shadow: 0 4px 20px rgba(227, 10, 23, 0.08);
  --shadow-accent: 0 0 32px rgba(227, 10, 23, 0.15);
  --card-hover: rgba(227, 10, 23, 0.04);
  --nav-blur: rgba(248, 244, 244, 0.97);
  --hero-glow: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(227, 10, 23, 0.06), transparent 70%);
  --btn-text: #FFFFFF;
  --chip-active-bg: #E30A17;
  --chip-active-text: #FFFFFF;
  --scrollbar-track: #FFF0F0;
  --scrollbar-thumb: #D09090;
  color-scheme: light;

  --white: var(--text);
  --white-60: var(--text-60);
  --white-30: var(--text-30);
  --white-8: var(--text-8);
  --white-4: var(--text-4);
  --w: var(--text);
  --w60: var(--text-60);
  --w30: var(--text-30);
  --w8: var(--text-8);
  --w4: var(--text-4);
  --amber: var(--accent);
  --amber-lo: var(--accent-lo);
  --amber-border: var(--accent-border);
}

/* ─ TESTTEMA (Adenyum Document Theme — koyu + cyan accent) ────────────────── */
[data-theme="testtema"] {
  --bg: #0a0e14;
  --bg2: #0f1620;
  --bg3: #131c28;
  --surface: #1a222e;
  --accent: #4fc3f7;
  --accent2: #7dd7f9;
  --accent-lo: rgba(79, 195, 247, 0.12);
  --accent-border: rgba(79, 195, 247, 0.28);
  --text: #d6deeb;
  --text-60: rgba(214, 222, 235, 0.6);
  --text-30: rgba(214, 222, 235, 0.3);
  --text-8: rgba(214, 222, 235, 0.08);
  --text-4: rgba(214, 222, 235, 0.04);
  --slate: #8a9bb5;
  --slate-dim: #3d4a5e;
  --border: rgba(79, 195, 247, 0.12);
  --green: #50fa7b;
  --green-lo: rgba(80, 250, 123, 0.1);
  --green-border: rgba(80, 250, 123, 0.2);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
  --shadow-accent: 0 0 40px rgba(79, 195, 247, 0.2);
  --card-hover: rgba(79, 195, 247, 0.06);
  --nav-blur: rgba(10, 14, 20, 0.94);
  --hero-glow: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(79, 195, 247, 0.1), transparent 70%);
  --btn-text: #0a0e14;
  --chip-active-bg: #4fc3f7;
  --chip-active-text: #0a0e14;
  --scrollbar-track: #0f1620;
  --scrollbar-thumb: #3d4a5e;
  color-scheme: dark;

  --white: var(--text);
  --white-60: var(--text-60);
  --white-30: var(--text-30);
  --white-8: var(--text-8);
  --white-4: var(--text-4);
  --w: var(--text);
  --w60: var(--text-60);
  --w30: var(--text-30);
  --w8: var(--text-8);
  --w4: var(--text-4);
  --amber: var(--accent);
  --amber-lo: var(--accent-lo);
  --amber-border: var(--accent-border);
}