@font-face {
  font-family: "Barlow Semi Condensed"; font-style: italic; font-weight: 800; font-display: swap;
  src: url("../assets/fonts/barlow-semi-condensed-800i.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: "Bangers"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/bangers-400.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: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../assets/fonts/bodoni-moda-tegak.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: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("../assets/fonts/bodoni-moda-italic.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: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/plus-jakarta-500.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("../assets/fonts/plus-jakarta-700.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/plus-jakarta-800.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 500; font-display: swap; src: url("../assets/fonts/plus-jakarta-500i.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 800; font-display: swap; src: url("../assets/fonts/plus-jakarta-800i.ttf") format("truetype"); }

 
@font-face {
  font-family: "Orbitron"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../assets/fonts/orbitron-var.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: "Rajdhani"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/rajdhani-600.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: "Rajdhani"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/rajdhani-700.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: "Oxanium"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../assets/fonts/oxanium-var.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: "Tilt Neon"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/tilt-neon-400.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;
}

 
:root {
   
  --tf-rookie:   oklch(80% 0.015 250);
  --tf-bronze:   oklch(72% 0.120 50);
  --tf-silver:   oklch(85% 0.040 245);
  --tf-gold:     oklch(86% 0.160 90);
  --tf-platinum: oklch(80% 0.110 190);
  --tf-diamond:  oklch(72% 0.130 280);
  --tf-master:   oklch(68% 0.220 340);
  

  --tf-grade-f:  oklch(82% 0.140 150);
  --tf-grade-e:  oklch(76% 0.120 255);
  --tf-grade-d:  oklch(72% 0.150 305);

   
  --s-bg:        oklch(13% 0.018 240);
  --s-bg-2:      oklch(19% 0.030 240);
  --s-frame:     oklch(14% 0.020 235 / 0.55);
  --s-panel:     oklch(12% 0.020 235 / 0.62);
  --s-ink:       oklch(96% 0.006 250);
  --s-muted:     oklch(76% 0.012 240);
  --s-faint:     oklch(60% 0.012 240);
  --s-accent:    oklch(86% 0.135 205);    
  --s-holo:      oklch(80% 0.100 235);    
  --s-line:      oklch(80% 0.100 235 / 0.42);
  --s-dim:       oklch(80% 0.100 235 / 0.14);
  --s-flare:     oklch(97% 0.020 220 / 0.50);
  --s-floor:     oklch(46% 0.090 235 / 0.50);
  --s-bokeh-1:   oklch(90% 0.080 210 / 0.55);
  --s-bokeh-2:   oklch(92% 0.070 220 / 0.45);
  --s-photo-top: oklch(30% 0.045 232 / 0.55);
  --s-photo-bot: oklch(13% 0.020 235 / 0.70);
  --s-scan:      oklch(96% 0.006 250 / 0.04);
  --s-shadow:    oklch(5% 0.010 240 / 0.70);

   
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --wide: 100%;    
  --font-sport: "Barlow Semi Condensed", var(--font-display);    
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  

  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.1875rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.375rem, 1.2vw + 1.05rem, 1.875rem);
  --text-score: clamp(4.5rem, 16vw, 10rem);

   
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

   
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;    
  --cut: 14px;

   
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  --tabbar-h: 64px;
  --topbar-h: 60px;    

   
  --hero-a:     oklch(26% 0.060 258);
  --hero-b:     oklch(43% 0.130 250);
  --hero-c:     oklch(62% 0.125 228);
  --hero-glow:  oklch(80% 0.120 215 / 0.45);
  --hero-ink:   oklch(99% 0.004 240);
  --hero-muted: oklch(90% 0.030 235);
  --hero-line:  oklch(99% 0.004 240 / 0.22);
   
  --court-a:    oklch(38% 0.110 250);
  --court-b:    oklch(52% 0.125 236);
  --court-line: oklch(99% 0.004 240 / 0.55);
   
  --medal-gold:   oklch(82% 0.150 85);
   
  --ver-rim: oklch(64% 0.140 72); --ver-isi: oklch(85% 0.170 88); --ver-cek: oklch(27% 0.060 65);
  --medal-silver: oklch(80% 0.020 250);
  --medal-bronze: oklch(68% 0.110 50);
}

 
:root, :root[data-theme="light"] {
  color-scheme: light;

   
  --c-paper:   oklch(97.5% 0.006 250);
  --c-paper-2: oklch(99.5% 0.003 250);
  --c-paper-3: oklch(95% 0.009 250);
  --c-paper-4: oklch(91.5% 0.012 250);
  --c-rule:    oklch(89.5% 0.011 250);
  --c-rule-2:  oklch(80% 0.014 250);
  --c-faint:   oklch(51% 0.018 255);
  --c-muted:   oklch(41% 0.020 255);
  --c-ink:     oklch(21% 0.032 258);

  


  --c-cta:         oklch(91% 0.2 122);
  --c-cta-2:       oklch(87% 0.205 124);
  --c-cta-ink:     oklch(19% 0.045 262);
  --c-cta-line:    oklch(78% 0.19 125);
  --c-accent:      oklch(52% 0.15 135);
  --c-accent-2:    oklch(46% 0.14 136);
  --c-accent-ink:  oklch(99% 0.004 240);
  --c-on-accent:   var(--c-accent-ink);
  --c-accent-text: oklch(48% 0.14 135);
  --c-accent-dim:  oklch(62% 0.16 132 / 0.14);
  --c-accent-line: oklch(55% 0.15 134 / 0.45);
  --c-focus:       oklch(48% 0.14 135);
   
  --c-vegan:       oklch(86% 0.170 92);
  --c-vegan-ink:   oklch(22% 0.030 90);
  --c-vegan-text:  oklch(51% 0.110 70);

   
  --c-win:   oklch(51% 0.140 150);
  --c-loss:  oklch(54% 0.190 27);
  --c-live:  oklch(58% 0.220 27);
  --c-live-solid: oklch(58% 0.220 27);    
  --c-go-solid: oklch(50% 0.150 150);    
  --c-gold-bg: oklch(90% 0.110 88); --c-gold-ink: oklch(38% 0.090 70);    
  --c-kuning-bg: oklch(96% 0.070 95); --c-kuning-garis: oklch(84% 0.160 92); --c-kuning-ic: oklch(70% 0.170 80); --c-kuning-ink: oklch(30% 0.050 80); --c-kuning-isi: oklch(85% 0.170 90); --c-kuning-seru: oklch(25% 0.050 75);    
  --c-info:  oklch(52% 0.130 245);
  --c-wa:    oklch(46% 0.125 150);

   
  --t-rookie:   oklch(48% 0.015 250);
  --t-bronze:   oklch(50% 0.110 48);
  --t-silver:   oklch(48% 0.050 250);
  --t-gold:     oklch(53% 0.105 82);
  --t-platinum: oklch(50% 0.080 195);
  --t-diamond:  oklch(48% 0.160 280);
  --t-master:   oklch(50% 0.210 340);

   
  --c-pal-1: oklch(52% 0.085 195);   
  --c-pal-2: oklch(52% 0.150 255);   
  --c-pal-3: oklch(52% 0.170 300);   
  --c-pal-4: oklch(55% 0.170 35);    
  --c-pal-5: oklch(52% 0.130 150);   
  --c-male:   oklch(52% 0.150 250);   
  --c-female: oklch(56% 0.190 355);   

   
  --lv-elite: oklch(50% 0.190 295);
  --lv-great: oklch(52% 0.095 172);
  --lv-good:  oklch(53% 0.135 130);
  --lv-fair:  oklch(55% 0.130 55);
  --lv-low:   oklch(55% 0.190 25);

   
  --grade-f: oklch(49% 0.120 150);
  --grade-e: oklch(49% 0.150 255);
  --grade-d: oklch(49% 0.190 305);

   
  --c-holo:      oklch(50% 0.085 225);
  --c-holo-line: oklch(55% 0.085 225 / 0.30);
  --c-holo-dim:  oklch(55% 0.085 225 / 0.10);
  --c-stage:     oklch(95.5% 0.010 240);
  --c-stage-2:   oklch(98.5% 0.005 240);
  --c-heat-1:    oklch(58% 0.210 27);
  --c-heat-2:    oklch(66% 0.180 52);
  --c-radar:     oklch(55% 0.130 244);

   
  --c-glass:       oklch(99.5% 0.003 250 / 0.72);
  --c-glass-edge:  oklch(21% 0.032 258 / 0.08);
  --c-scrim:       oklch(22% 0.030 258 / 0.42);
  --c-promo-scrim: oklch(15% 0.030 258 / 0.88);    
  --c-topbar:      oklch(95.8% 0.020 236 / 0.86);    
  --c-ice:         oklch(94.5% 0.028 236);           
  --c-streak:      oklch(100% 0 0 / 0.55);           
  --c-toast:       oklch(99.5% 0.003 250);
  --c-glow-1:      oklch(85% 0.100 222 / 0.20);
  --c-glow-2:      oklch(82% 0.080 250 / 0.16);
  --c-shadow-card: 0 1px 2px oklch(30% 0.030 255 / 0.06), 0 6px 16px -10px oklch(30% 0.030 255 / 0.22);
  --shadow-lift:   0 18px 40px -22px oklch(30% 0.040 255 / 0.40);
  --shadow-glow:   0 0 0 1px var(--c-accent-line), 0 14px 34px -18px oklch(55% 0.15 134 / 0.40);
  --c-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23515a68' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

   
  --c-card:         oklch(99.5% 0.003 250);
  --c-card-foot:    oklch(99.5% 0.003 250);
  --c-plate:        oklch(23% 0.040 255);    
  --c-plate-ink:    oklch(98% 0.004 250);
  --c-plate-muted:  oklch(80% 0.014 250);
  --c-on-t:         oklch(99% 0.003 250);
  --c-sheen:        oklch(99% 0.006 250 / 0.60);
  --c-photo-shadow: oklch(30% 0.035 255 / 0.32);
  --c-silhouette:   oklch(21% 0.032 258 / 0.16);
  --c-seg-bg:       oklch(93% 0.010 250);
  --c-seg-edge:     oklch(80% 0.014 250);
  --c-seg-off:      oklch(21% 0.032 258 / 0.07);
  --c-seg-glow:     oklch(58% 0.130 240 / 0);
}

 
:root[data-theme="dark"], .theme-dark, .bc {
  color-scheme: dark;

  --c-paper:   oklch(14.5% 0.014 255);
  --c-paper-2: oklch(18.5% 0.018 255);
  --c-paper-3: oklch(22.5% 0.020 255);
  --c-paper-4: oklch(27.5% 0.022 255);
  --c-rule:    oklch(32% 0.020 255);
  --c-rule-2:  oklch(42% 0.020 255);
  --c-faint:   oklch(63% 0.016 250);
  --c-muted:   oklch(77% 0.014 250);
  --c-ink:     oklch(96% 0.006 250);

   
  --c-cta:         oklch(91% 0.2 122);
  --c-cta-2:       oklch(95% 0.16 118);
  --c-cta-ink:     oklch(19% 0.045 262);
  --c-cta-line:    oklch(91% 0.2 122);
  --c-accent:      oklch(91% 0.2 122);
  --c-accent-2:    oklch(95% 0.16 118);
  --c-accent-ink:  oklch(19% 0.045 262);
  --c-on-accent:   var(--c-accent-ink);
  --c-accent-text: oklch(90% 0.19 122);
  --c-accent-dim:  oklch(91% 0.2 122 / 0.14);
  --c-accent-line: oklch(91% 0.2 122 / 0.38);
  --c-focus:       oklch(91% 0.2 122);
  --c-vegan:       oklch(88% 0.165 95);
  --c-vegan-ink:   oklch(20% 0.030 90);
  --c-vegan-text:  oklch(88% 0.165 95);

  --c-win:   oklch(80% 0.170 150);
  --c-loss:  oklch(70% 0.190 25);
  --c-live:  oklch(66% 0.220 25);
  --c-live-solid: oklch(55% 0.215 27);    
  --c-go-solid: oklch(50% 0.150 150);
  --c-gold-bg: oklch(42% 0.090 80); --c-gold-ink: oklch(92% 0.090 88);
  --c-kuning-bg: oklch(30% 0.060 88); --c-kuning-garis: oklch(62% 0.130 90); --c-kuning-ic: oklch(88% 0.180 95); --c-kuning-ink: oklch(95% 0.030 95); --c-kuning-isi: oklch(85% 0.170 90); --c-kuning-seru: oklch(25% 0.050 75);
  --c-info:  oklch(78% 0.110 230);
  --c-wa:    oklch(72% 0.170 150);

  --t-rookie:   oklch(70% 0.012 250);
  --t-bronze:   oklch(70% 0.110 55);
  --t-silver:   oklch(84% 0.020 250);
  --t-gold:     oklch(86% 0.160 88);
  --t-platinum: oklch(83% 0.090 185);    
  --t-diamond:  oklch(78% 0.120 278);    
  --t-master:   oklch(72% 0.200 330);

  --c-pal-1: oklch(80% 0.110 195);
  --c-pal-2: oklch(76% 0.120 250);
  --c-pal-3: oklch(76% 0.140 300);
  --c-pal-4: oklch(76% 0.140 35);
  --c-pal-5: oklch(80% 0.150 150);
  --c-male:   oklch(76% 0.120 245);
  --c-female: oklch(77% 0.150 355);

  --lv-elite: oklch(76% 0.130 295);
  --lv-great: oklch(80% 0.130 172);
  --lv-good:  oklch(85% 0.170 128);
  --lv-fair:  oklch(79% 0.150 62);
  --lv-low:   oklch(70% 0.180 25);

  --grade-f: oklch(82% 0.150 150);
  --grade-e: oklch(80% 0.110 250);
  --grade-d: oklch(80% 0.120 305);

  --c-holo:      oklch(84% 0.110 210);
  --c-holo-line: oklch(84% 0.110 210 / 0.42);
  --c-holo-dim:  oklch(84% 0.110 210 / 0.14);
  --c-stage:     oklch(13% 0.018 240);
  --c-stage-2:   oklch(19% 0.030 240);
  --c-heat-1:    oklch(60% 0.215 27);
  --c-heat-2:    oklch(72% 0.190 52);
  --c-radar:     oklch(79% 0.130 220);

  --c-glass:       oklch(22.5% 0.020 255 / 0.58);
  --c-glass-edge:  oklch(96% 0.006 250 / 0.10);
  --c-scrim:       oklch(10% 0.014 255 / 0.72);
  --c-promo-scrim: oklch(6% 0.012 255 / 0.88);
  --c-topbar:      oklch(16% 0.024 250 / 0.86);
  --c-ice:         oklch(19% 0.035 248);
  --c-streak:      oklch(80% 0.080 230 / 0.06);
  --c-toast:       oklch(27.5% 0.022 255);
  --c-glow-1:      oklch(79% 0.130 220 / 0.10);
  --c-glow-2:      oklch(60% 0.140 250 / 0.10);
  --c-shadow-card: 0 12px 26px -22px oklch(5% 0.014 255 / 0.9);
  --shadow-lift:   0 18px 40px -22px oklch(8% 0.014 255 / 0.9);
  --shadow-glow:   0 0 0 1px var(--c-accent-line), 0 14px 40px -18px oklch(91% 0.2 122 / 0.30);
  --c-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd5e0' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  --c-card:         oklch(16% 0.020 240);
  --c-card-foot:    oklch(12% 0.018 240);
  --c-plate:        oklch(9% 0.012 240);
  --c-plate-ink:    oklch(97% 0.006 250);
  --c-plate-muted:  oklch(74% 0.012 240);
  --c-on-t:         oklch(18% 0.030 255);
  --c-sheen:        oklch(97% 0.010 250 / 0.16);
  --c-photo-shadow: oklch(5% 0.010 240 / 0.75);
  --c-silhouette:   oklch(96% 0.006 250 / 0.16);
  --c-seg-bg:       oklch(10% 0.012 240 / 0.70);
  --c-seg-edge:     oklch(79% 0.130 220 / 0.50);
  --c-seg-off:      oklch(96% 0.006 250 / 0.09);
  --c-seg-glow:     oklch(79% 0.130 220 / 0.60);
}