/* GolRadar · web-tokens.css · Talep 016 v1
   Kaynak: docs/tasarim/teslimler/001-marka/tokens/golradar-tokens-v2.json (renk v2).
   Ad kuralı: token yolu tireyle birleşir, camelCase kebab olur.
   color.<tema>.bg.base -> --bg-base · statusBg.live -> --status-bg-live · brand.onPrimary -> --brand-on-primary
   Tema cihazdan gelir (prefers-color-scheme). Açık tema varsayılan; koyu tema medya sorgusunda.
   Bu dosyayı elle değiştirme; tokenlar değişirse yeniden üretilir. */

@font-face { font-family: "Unbounded"; src: url("fonts/Unbounded-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/Archivo-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/Archivo-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/Archivo-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Doto"; src: url("fonts/Doto-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;

  /* Renk · açık tema */
  --bg-base: #F4F6F1;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --text-primary: #0B0F0C;
  --text-secondary: #4A564C;
  --text-tertiary: #66726A;
  --text-disabled: #A3ADA5;
  --border-subtle: #E0E6DB;
  --border-strong: #C4CDBF;
  --brand-primary: #82EC3D;
  --brand-on-primary: #0B0F0C;
  --brand-ink: #337503;
  --action-primary: #0B0F0C;
  --action-on-primary: #82EC3D;
  --status-live: #00737F;
  --status-won: #2B5F0B;
  --status-lost: #B6322B;
  --status-void: #5E6862;
  --status-locked: #4A564C;
  --status-bg-live: #E0F3F5;
  --status-bg-won: #E4FBD4;
  --status-bg-lost: #FDEAE8;
  --status-bg-void: #EEF2EA;
  --status-bg-locked: #EEF2EA;
  --led-on: #1F2A21;
  --led-off: #DDE3D8;
  --skeleton: #E0E6DB;
  --scale-fill: #337503;
  --scale-ring: #879488;
  --scrim-color: #0B0F0C;
  --accent-green: #2F9E44;
  --accent-teal: #0E8FA3;
  --accent-blue: #3D63F2;
  --accent-violet: #7A4EF0;
  --accent-pink: #D9407A;
  --accent-orange: #C8661A;
  --accent-slate: #5B6B73;
  --accent-coral: #D9534A;
  --scrim: rgba(11,15,12,0.4);

  /* Efekt · açık tema */
  --aurora:
    radial-gradient(75% 38% at 0% 0%, rgba(130,236,61,0.28) 0%, rgba(130,236,61,0) 70%),
    radial-gradient(60% 32% at 58% 0%, rgba(40,210,225,0.16) 0%, rgba(40,210,225,0) 70%),
    radial-gradient(75% 40% at 100% 6%, rgba(90,130,255,0.18) 0%, rgba(90,130,255,0) 72%),
    radial-gradient(80% 36% at 100% 58%, rgba(40,210,225,0.12) 0%, rgba(40,210,225,0) 72%),
    radial-gradient(90% 40% at 0% 72%, rgba(90,130,255,0.12) 0%, rgba(90,130,255,0) 72%),
    radial-gradient(90% 38% at 60% 104%, rgba(130,236,61,0.18) 0%, rgba(130,236,61,0) 72%);
  --aurora-led-dot: rgba(11,15,12,0.05);
  --card-tint-live: rgba(0,115,127,0.22);
  --card-tint-won: rgba(43,95,11,0.18);
  --card-tint-lost: rgba(182,50,43,0.2);

  /* Sahne (Işık sahnesi): iki temada da koyu */
  --scene-bg: #0B0F0C;
  --scene-text: #EEF5EA;
  --scene-text-secondary: #A4B2A6;
  --scene-glow: radial-gradient(120% 70% at 50% -5%, rgba(130,236,61,0.42) 0%, rgba(130,236,61,0.1) 45%, rgba(130,236,61,0) 100%);
  --led-field-on: rgba(130,236,61,0.55);
  --led-field-off: rgba(238,245,234,0.1);
  --led-field-pitch: 9px;
  --led-field-dot: 3.2px;
  --scoreboard-color: #82EC3D;
  --scoreboard-glow: 0 0 18px rgba(130,236,61,0.55);
  --scan-color: #82EC3D;
  --scan-width: 3px;
  --scan-glow: 0 0 24px rgba(130,236,61,0.45);
  --scan-trail: linear-gradient(90deg, rgba(130,236,61,0) 0%, rgba(130,236,61,0.16) 100%);
  --scan-trail-width: 120px;
  --aurora-led-pitch: 9px;
  --aurora-led-size: 2.8px;
  --aurora-led-mask: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,1) 100%);
  --card-tint-edge: 3px;

  /* Yazı tipleri */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-led: "Doto", ui-monospace, monospace;

  /* Web yazı ölçeği: 375 px'te ilk değer, 1280 px ve üstünde son değer */
  --type-display-size: clamp(34px, 4.4vw + 18px, 72px); --type-display-leading: 1.06; --type-display-tracking: -0.02em;
  --type-h1-size: clamp(28px, 2.2vw + 20px, 44px); --type-h1-leading: 1.12; --type-h1-tracking: -0.015em;
  --type-h2-size: clamp(22px, 1.1vw + 18px, 30px); --type-h2-leading: 1.2; --type-h2-tracking: -0.01em;
  --type-h3-size: clamp(18px, 0.25vw + 17px, 20px); --type-h3-leading: 1.3; --type-h3-tracking: 0;
  --type-lead-size: clamp(19px, 0.35vw + 18px, 22px); --type-lead-leading: 1.45; --type-lead-tracking: 0;
  --type-body-size: clamp(17px, 0.1vw + 16.6px, 18px); --type-body-leading: 1.6; --type-body-tracking: 0;
  --type-small-size: 15px; --type-small-leading: 1.5; --type-small-tracking: 0;
  --type-label-size: 13px; --type-label-leading: 1.3; --type-label-tracking: 0.02em;
  --type-led-size: clamp(18px, 1vw + 14px, 26px); --type-led-leading: 1.0; --type-led-tracking: 0;

  /* Boşluk, köşe, hareket (tokenlardan) */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 48px;
  --space-screen: 20px;
  --space-card-pad: 16px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 450ms;
  --duration-medium: 320ms;
  --duration-signature: 600ms;
  --duration-splash: 900ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --easing-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --tap-min: 44px;
  --content-max: 1120px;
  --prose-max: 680px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-base: #0B0F0C;
    --bg-surface: #172019;
    --bg-elevated: #1E2921;
    --text-primary: #EEF5EA;
    --text-secondary: #A4B2A6;
    --text-tertiary: #879488;
    --text-disabled: #5C685F;
    --border-subtle: #253027;
    --border-strong: #34423A;
    --brand-primary: #82EC3D;
    --brand-on-primary: #0B0F0C;
    --brand-ink: #82EC3D;
    --action-primary: #82EC3D;
    --action-on-primary: #0B0F0C;
    --status-live: #4FD8EB;
    --status-won: #82EC3D;
    --status-lost: #F47C6E;
    --status-void: #A4B2A6;
    --status-locked: #A4B2A6;
    --status-bg-live: #173033;
    --status-bg-won: #263D1E;
    --status-bg-lost: #392A28;
    --status-bg-void: #253027;
    --status-bg-locked: #253027;
    --led-on: #82EC3D;
    --led-off: #253027;
    --skeleton: #253027;
    --scale-fill: #82EC3D;
    --scale-ring: #64716A;
    --scrim-color: #000000;
    --accent-green: #2F9E44;
    --accent-teal: #0E8FA3;
    --accent-blue: #3D63F2;
    --accent-violet: #7A4EF0;
    --accent-pink: #D9407A;
    --accent-orange: #C8661A;
    --accent-slate: #5B6B73;
    --accent-coral: #D9534A;
    --scrim: rgba(0,0,0,0.6);
    --aurora:
    radial-gradient(75% 38% at 0% 0%, rgba(130,236,61,0.34) 0%, rgba(130,236,61,0) 70%),
    radial-gradient(60% 32% at 58% 0%, rgba(40,210,225,0.28) 0%, rgba(40,210,225,0) 70%),
    radial-gradient(75% 40% at 100% 6%, rgba(70,110,255,0.36) 0%, rgba(70,110,255,0) 72%),
    radial-gradient(80% 36% at 100% 58%, rgba(40,210,225,0.16) 0%, rgba(40,210,225,0) 72%),
    radial-gradient(90% 40% at 0% 72%, rgba(70,110,255,0.2) 0%, rgba(70,110,255,0) 72%),
    radial-gradient(90% 38% at 60% 104%, rgba(130,236,61,0.2) 0%, rgba(130,236,61,0) 72%);
    --aurora-led-dot: rgba(255,255,255,0.07);
    --card-tint-live: rgba(79,216,235,0.22);
    --card-tint-won: rgba(130,236,61,0.18);
    --card-tint-lost: rgba(244,124,110,0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-medium: 0ms; --duration-slow: 0ms;
          --duration-signature: 0ms; --duration-splash: 0ms; }
}

/* ---------------------------------------------------------------- Hazır efekt sınıfları (isteğe bağlı) */

/* Aurora: sayfa zemini, sabit durur, içerik üstünden kayar. body'ye .gr-aurora ver. */
.gr-aurora { position: relative; isolation: isolate; background: var(--bg-base); }
.gr-aurora::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--aurora), var(--bg-base); }
.gr-aurora::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, var(--aurora-led-dot) calc(var(--aurora-led-size) / 2), transparent calc(var(--aurora-led-size) / 2 + 0.5px)) 0 0 / var(--aurora-led-pitch) var(--aurora-led-pitch);
  -webkit-mask-image: var(--aurora-led-mask); mask-image: var(--aurora-led-mask); }

/* Işık sahnesi: koyu blok, iki temada aynı. İçindeki metin --scene-text. */
.gr-scene { position: relative; isolation: isolate; background: var(--scene-glow), var(--scene-bg); color: var(--scene-text); }
.gr-scene::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, var(--led-field-off) calc(var(--led-field-dot) / 2), transparent calc(var(--led-field-dot) / 2 + 0.5px)) 0 0 / var(--led-field-pitch) var(--led-field-pitch);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(80% 70% at 50% 0%, #000 0%, transparent 100%); }

/* LED tabela: yalnız .gr-scene içinde, yalnız sayı ve dakika. */
.gr-led { font-family: var(--font-led); font-weight: 900; color: var(--scoreboard-color); text-shadow: var(--scoreboard-glow);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* Kart tonu: üst kenarda 3 px çizgi + sol üstten radyal ton. data-durum="live|won|lost". */
.gr-card { position: relative; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.gr-card[data-durum="live"] { background: radial-gradient(130% 70% at 0 0, var(--card-tint-live) 0%, transparent 62%), var(--bg-surface); box-shadow: inset 0 var(--card-tint-edge) 0 var(--status-live); }
.gr-card[data-durum="won"] { background: radial-gradient(130% 70% at 0 0, var(--card-tint-won) 0%, transparent 62%), var(--bg-surface); box-shadow: inset 0 var(--card-tint-edge) 0 var(--status-won); }
.gr-card[data-durum="lost"] { background: radial-gradient(130% 70% at 0 0, var(--card-tint-lost) 0%, transparent 62%), var(--bg-surface); box-shadow: inset 0 var(--card-tint-edge) 0 var(--status-lost); }

/* Radar taraması: bir kez, soldan sağa. Öğeye .gr-scan ver; ::after çubuktur. Hareketi azaltta hiç çalışmaz. */
.gr-scan { position: relative; overflow: hidden; }
.gr-scan::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--scan-trail-width) * -1); width: var(--scan-trail-width); pointer-events: none;
  background: var(--scan-trail); border-right: var(--scan-width) solid var(--scan-color);
  opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .gr-scan::after { animation: gr-scan var(--duration-splash) var(--easing-standard) 300ms 1 both; }
}
@keyframes gr-scan { 0% { left: calc(var(--scan-trail-width) * -1); opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }