/* =========================================================
   KUDUNGA RUN FESTIVAL 2026 — Stylesheet Utama
   Situs statis: tanpa framework, ringan, siap hosting apa pun
   ========================================================= */

/* ---------- Token Desain ---------- */
:root {
  /* Palet brand */
  --navy-950:#050b1a; --navy-900:#0a1430; --navy-800:#111e44; --navy-700:#1a2c5e; --navy-600:#24407e;
  --brand-50:#eff4fe; --brand-100:#dce6fd; --brand-200:#bccdfb; --brand-300:#93aef8;
  --brand-400:#6e92f7; --brand-500:#3b6cf0; --brand-600:#1d50d8; --brand-700:#1a41ac; --brand-800:#183689;
  --gold-100:#fff3c4; --gold-200:#ffe58a; --gold-300:#ffd95a; --gold-400:#ffc61a; --gold-500:#f0a800; --gold-600:#c98d00;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --red-50:#fef2f2; --red-100:#fee2e2; --red-200:#fecaca; --red-300:#fca5a5; --red-500:#ef4444; --red-600:#dc2626; --red-700:#b91c1c;
  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-200:#fde68a; --amber-300:#fcd34d; --amber-400:#fbbf24; --amber-500:#f59e0b; --amber-700:#b45309;
  --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-200:#a7f3d0; --emerald-300:#6ee7b7; --emerald-400:#34d399; --emerald-500:#10b981; --emerald-600:#059669;

  --ink:#0b1226;
  --border:#e6e9f0;
  --bg:#ffffff;
  --font:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --nav-h:64px;
  --r-md:14px; --r-lg:18px; --r-xl:24px; --r-full:999px;
  --shadow-sm:0 1px 2px rgba(2,8,23,.05), 0 1px 3px rgba(2,8,23,.06);
  --shadow-md:0 4px 14px rgba(2,8,23,.08);
  --shadow-lg:0 12px 34px rgba(2,8,23,.12);
  --shadow-gold:0 10px 24px rgba(240,168,0,.28);
}

/* ---------- Reset & Dasar ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; overflow-x:clip; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; min-height:100dvh; display:flex; flex-direction:column;
  animation:pageIn .35s ease both;
}
main{ flex:1; overflow-x:clip; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
input,select{ font-family:inherit; }
h1,h2,h3,h4,p,dl,dd,dt,ul,ol,figure{ margin:0; padding:0; }
ul,ol{ list-style:none; }
table{ border-collapse:collapse; width:100%; }
.ic{ width:1.15em; height:1.15em; flex:none; }
::selection{ background:var(--gold-300); color:var(--navy-950); }
:focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px; border-radius:6px; }
@keyframes pageIn{ from{ opacity:0 } to{ opacity:1 } }

.container{ width:100%; max-width:1152px; margin-inline:auto; padding-inline:16px; }
@media(min-width:640px){ .container{ padding-inline:24px; } }
.container-narrow{ max-width:768px; }
.center{ display:flex; justify-content:center; }
.tabular{ font-variant-numeric:tabular-nums; }
.muted{ color:var(--slate-500); }

/* ---------- Ikon & elemen inline ---------- */
[data-icon]{ display:inline-flex; align-items:center; justify-content:center; }
[data-icon] .ic{ width:18px; height:18px; }

/* ---------- Tombol ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 22px; border-radius:12px;
  font-size:14px; font-weight:700; line-height:1; white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.btn:active{ transform:scale(.98); }
.btn-lg{ height:48px; padding:0 28px; font-size:15px; }
.btn-block{ display:flex; width:100%; }
.btn .ic{ width:18px; height:18px; }
.btn-gold{ background:var(--gold-400); color:var(--navy-950); box-shadow:var(--shadow-gold); }
.btn-gold:hover{ background:var(--gold-300); }
.btn-navy{ background:var(--navy-950); color:#fff; }
.btn-navy:hover{ background:var(--brand-600); }
.btn-brand{ background:var(--brand-600); color:#fff; }
.btn-brand:hover{ background:var(--brand-700); }
.btn-red{ background:var(--red-600); color:#fff; }
.btn-red:hover{ background:var(--red-700); }
.btn-wa{ background:var(--emerald-500); color:#fff; box-shadow:0 10px 24px rgba(16,185,129,.25); }
.btn-wa:hover{ background:var(--emerald-600); }
.btn-outline-light{ border:1px solid rgba(255,255,255,.2); color:#fff; background:transparent; }
.btn-outline-light:hover{ background:rgba(255,255,255,.1); }
.btn-glass{ background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.btn-glass:hover{ background:rgba(255,255,255,.16); }
.btn-outline-dark{ border:1px solid var(--slate-300); color:var(--navy-950); background:#fff; box-shadow:var(--shadow-sm); }
.btn-outline-dark:hover{ border-color:var(--brand-400); color:var(--brand-600); }
.btn-ghost{ color:var(--slate-500); }
.btn-ghost:hover{ color:var(--navy-950); }
.btn-danger-ghost{ border:1px solid var(--slate-300); color:var(--slate-500); background:#fff; }
.btn-danger-ghost:hover{ border-color:var(--red-300); color:var(--red-500); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* ---------- Chip ---------- */
.chip{ display:inline-flex; align-items:center; gap:8px; border-radius:var(--r-full); padding:8px 14px; font-size:12.5px; font-weight:600; }
.chip .ic{ width:16px; height:16px; }
.chip-glass{ border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); color:var(--slate-200); }
.chip-glass .ic{ color:var(--gold-400); }
.chip-gold{ background:rgba(255,198,26,.15); color:var(--gold-300); box-shadow:inset 0 0 0 1px rgba(255,198,26,.4); }
.chip-dark{ background:var(--slate-100); color:var(--slate-600); }
.chip-brand{ background:var(--brand-50); color:var(--brand-700); font-weight:800; }
.chip-app{ border:1px solid var(--slate-200); background:var(--slate-50); color:var(--slate-600); padding:5px 10px; font-size:11px; font-weight:800; border-radius:10px; }

/* ---------- Navbar ---------- */
.site-header{
  position:sticky; top:0; z-index:50; width:100%;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(5,11,26,.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.nav-inner{ display:flex; height:var(--nav-h); align-items:center; justify-content:space-between; }
.logo-btn{
  flex:none; display:inline-flex; align-items:center; padding:6px; border-radius:12px;
  background:rgba(0,0,0,.7); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transition:box-shadow .2s;
}
.logo-btn:hover{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.logo-btn img{ height:26px; width:auto; }
@media(min-width:640px){ .logo-btn img{ height:30px; } }
.menu-btn{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px;
  border-radius:12px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.05);
  color:#fff; font-size:14px; font-weight:600; transition:background .2s, border-color .2s;
}
.menu-btn:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); }
.menu-btn .ic{ width:20px; height:20px; }
.menu-btn .label{ display:none; }
@media(min-width:640px){ .menu-btn .label{ display:inline; } }

/* Drawer menu */
.drawer-overlay{
  position:fixed; inset:0; z-index:70; background:rgba(2,6,18,.6);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:71; width:min(86vw,320px);
  background:var(--navy-950); color:#fff; display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .3s cubic-bezier(.32,.72,.24,1);
  box-shadow:-16px 0 48px rgba(2,6,18,.5); padding-bottom:env(safe-area-inset-bottom);
}
body.drawer-open .drawer-overlay{ opacity:1; pointer-events:auto; }
body.drawer-open .drawer{ transform:none; }
body.drawer-open{ overflow:hidden; }
.drawer-head{ border-bottom:1px solid rgba(255,255,255,.1); padding:20px 20px 16px; }
.drawer-head .logo-btn{ padding:6px; }
.drawer-head img{ height:24px; width:auto; }
.drawer-head p{ margin-top:10px; font-size:12px; line-height:1.6; color:var(--slate-400); }
.drawer-close{ position:absolute; top:14px; right:14px; display:inline-flex; padding:8px; border-radius:10px; color:var(--slate-300); }
.drawer-close:hover{ background:rgba(255,255,255,.08); color:#fff; }
.drawer-nav{ display:flex; flex-direction:column; gap:4px; padding:16px 12px; overflow-y:auto; }
.drawer-nav a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 14px; border-radius:14px; font-size:14px; font-weight:600; color:var(--slate-200);
  transition:background .2s, color .2s;
}
.drawer-nav a:hover{ background:rgba(255,255,255,.05); color:#fff; }
.drawer-nav a .ic:first-child{ width:18px; height:18px; }
.drawer-nav a .arr{ opacity:.4; width:16px; height:16px; }
.drawer-nav a.active{ background:rgba(29,80,216,.2); color:var(--gold-300); box-shadow:inset 0 0 0 1px rgba(255,198,26,.3); }
.drawer-foot{ margin-top:auto; border-top:1px solid rgba(255,255,255,.1); padding:20px; }
.drawer-foot .dinfo{ display:grid; gap:10px; font-size:12px; color:var(--slate-300); }
.drawer-foot .dinfo p{ display:flex; align-items:flex-start; gap:10px; }
.drawer-foot .dinfo .ic{ width:16px; height:16px; color:var(--gold-400); margin-top:2px; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid rgba(255,255,255,.1); background:var(--navy-950); color:var(--slate-300); }
.footer-grid{ display:grid; gap:40px; padding:48px 0; }
@media(min-width:768px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1.2fr; gap:32px; } }
.footer-logo{ display:inline-block; padding:6px; border-radius:12px; background:rgba(0,0,0,.7); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.footer-logo img{ height:26px; width:auto; }
.footer-desc{ margin-top:16px; max-width:24rem; font-size:14px; line-height:1.7; color:var(--slate-400); }
.footer-h{ font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; }
.footer-links{ margin-top:16px; display:grid; gap:10px; }
.footer-links a{ font-size:14px; color:var(--slate-400); transition:color .2s; }
.footer-links a:hover{ color:var(--gold-300); }
.footer-info{ margin-top:16px; display:grid; gap:12px; font-size:14px; color:var(--slate-400); }
.footer-info li{ display:flex; gap:10px; align-items:flex-start; }
.footer-info .ic{ width:16px; height:16px; flex:none; color:var(--gold-400); margin-top:3px; }
.footer-cta{ margin-top:20px; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:12px; border:1px solid rgba(255,255,255,.15); font-size:14px; font-weight:600; color:#fff; transition:border-color .2s, color .2s; }
.footer-cta:hover{ border-color:rgba(255,198,26,.6); color:var(--gold-300); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); }
.footer-bottom-in{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:8px; padding:20px 0 calc(20px + env(safe-area-inset-bottom)); font-size:12px; color:var(--slate-500); }
@media(min-width:640px){ .footer-bottom-in{ flex-direction:row; } }

/* ---------- Section umum ---------- */
.section{ padding:64px 0; }
@media(min-width:640px){ .section{ padding:88px 0; } }
.section-alt{ background:var(--slate-50); }
.section-dark{ background:var(--navy-950); }
.sec-head{ max-width:42rem; margin-inline:auto; text-align:center; }
.sec-head.left{ margin-inline:0; text-align:left; }
.sec-head .overline{ font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--brand-600); }
.sec-head.dark .overline{ color:var(--gold-400); }
.sec-head h2{ margin-top:8px; font-size:clamp(1.5rem,3.2vw,2.25rem); font-weight:800; letter-spacing:-.02em; line-height:1.15; color:var(--navy-950); }
.sec-head.dark h2{ color:#fff; }
.sec-head .sub{ margin-top:12px; font-size:14.5px; line-height:1.7; color:var(--slate-600); }
.sec-head.dark .sub{ color:var(--slate-300); }

/* Animasi reveal saat scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal{ transition:none; opacity:1; transform:none; } }

/* ---------- HERO (beranda) ---------- */
.hero{ position:relative; overflow:hidden; background:var(--navy-950); color:#fff; }
.blob{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; }
.hero .b1{ width:380px; height:380px; background:rgba(29,80,216,.4); left:-130px; top:-130px; }
.hero .b2{ width:320px; height:320px; background:rgba(255,198,26,.25); right:-100px; top:100px; }
.hero .b3{ width:260px; height:260px; background:rgba(59,108,240,.2); bottom:-40px; left:33%; }
.hero-grid{ position:relative; display:grid; gap:44px; align-items:center; padding-top:52px; padding-bottom:64px; }
@media(min-width:1024px){ .hero-grid{ grid-template-columns:1.05fr .95fr; gap:40px; padding-top:64px; padding-bottom:88px; } }
.hero-badge{
  display:inline-flex; align-items:center; gap:10px; border-radius:var(--r-full);
  background:rgba(255,255,255,.05); padding:7px 16px;
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-300); box-shadow:inset 0 0 0 1px rgba(255,198,26,.3);
}
.ping{ position:relative; display:inline-flex; width:8px; height:8px; }
.ping::before{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--gold-400); animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
.ping .dot{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--gold-400); }
@keyframes ping{ 75%,100%{ transform:scale(2.4); opacity:0 } }
.hero-title{ margin-top:20px; font-size:clamp(2.1rem,6vw,3.6rem); font-weight:800; line-height:1.06; letter-spacing:-.025em; }
.gold-grad{ background:linear-gradient(90deg,var(--gold-300),var(--gold-400),var(--gold-500)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-lead{ margin-top:20px; max-width:36rem; font-size:14.5px; line-height:1.75; color:var(--slate-300); }
@media(min-width:640px){ .hero-lead{ font-size:16px; } }
.hero-chips{ margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }
.hero-cta{ margin-top:30px; display:flex; flex-direction:column; gap:12px; }
@media(min-width:640px){ .hero-cta{ flex-direction:row; } }
.hero-note{ margin-top:16px; font-size:12px; color:var(--slate-400); }

.hero-poster{ position:relative; width:100%; max-width:400px; margin-inline:auto; }
@media(min-width:1024px){ .hero-poster{ max-width:440px; } }
.poster-frame{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-xl); box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.2); }
.poster-frame img{ width:100%; height:100%; object-fit:cover; }
.float-card{
  position:absolute; display:flex; align-items:center; gap:7px; padding:10px 16px;
  border-radius:16px; font-size:11.5px; font-weight:800; box-shadow:var(--shadow-lg); backdrop-filter:blur(6px);
}
@media(min-width:640px){ .float-card{ font-size:12.5px; } }
.float-card .ic{ width:16px; height:16px; }
.fc-left{ left:-12px; top:24px; background:rgba(255,255,255,.95); color:var(--navy-950); animation:float 7s ease-in-out infinite; }
.fc-left .ic{ color:var(--gold-500); }
.fc-right{ right:-12px; bottom:32px; background:rgba(10,20,48,.95); color:#fff; box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.15); animation:float 11s ease-in-out infinite; }
.fc-right .ic{ color:var(--gold-400); }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }

.hero-count{ position:relative; border-top:1px solid rgba(255,255,255,.1); }
.hero-count .container{ padding-top:30px; padding-bottom:30px; }
.cd-label{ display:flex; align-items:center; gap:8px; justify-content:center; font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-400); }
@media(min-width:640px){ .cd-label{ justify-content:flex-start; } }
.cd-grid{ margin-top:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-width:448px; }
@media(min-width:640px){ .cd-grid{ gap:12px; } }
.cd-box{ border-radius:18px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); padding:14px 4px; text-align:center; backdrop-filter:blur(4px); }
.cd-box b{ display:block; font-size:clamp(1.4rem,4vw,1.9rem); font-weight:800; line-height:1; }
.cd-box span{ display:block; margin-top:6px; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-400); }
@media(min-width:640px){ .cd-box span{ font-size:12px; } }

/* ---------- Strip statistik ---------- */
.stat-wrap{ background:#fff; }
.stat-strip{
  position:relative; z-index:5; margin-top:-28px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  background:#fff; border:1px solid var(--slate-100); border-radius:22px; padding:22px;
  box-shadow:0 18px 44px rgba(2,8,23,.08);
}
@media(min-width:1024px){ .stat-strip{ grid-template-columns:repeat(4,1fr); gap:16px; padding:28px; } }
.stat-item{ display:flex; align-items:center; gap:14px; border-radius:14px; padding:8px 4px; }
.stat-item .sicon{ display:flex; width:44px; height:44px; flex:none; align-items:center; justify-content:center; border-radius:13px; background:var(--brand-50); color:var(--brand-600); }
.stat-item .sicon .ic{ width:21px; height:21px; }
.stat-item b{ display:block; font-size:19px; font-weight:800; line-height:1.15; color:var(--navy-950); }
@media(min-width:640px){ .stat-item b{ font-size:24px; } }
.stat-item span{ display:block; font-size:11px; font-weight:500; color:var(--slate-500); }
@media(min-width:640px){ .stat-item span{ font-size:12px; } }

/* ---------- Kartu kategori (preview beranda) ---------- */
.cat-grid{ margin-top:40px; display:grid; gap:16px; }
@media(min-width:640px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
.cat-card{
  display:flex; height:100%; width:100%; flex-direction:column; text-align:left;
  background:#fff; border:1px solid var(--slate-200); border-radius:18px; padding:20px;
  box-shadow:var(--shadow-sm); transition:transform .25s, border-color .25s, box-shadow .25s;
}
.cat-card:hover{ transform:translateY(-4px); border-color:var(--brand-300); box-shadow:0 16px 36px rgba(29,80,216,.1); }
.cat-card .top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cat-card h3{ margin-top:14px; font-size:18px; font-weight:800; color:var(--navy-950); }
.cat-card .tag{ margin-top:4px; font-size:12px; line-height:1.6; color:var(--slate-500); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cat-card .price-row{ margin-top:auto; padding-top:16px; }
.cat-card .strike{ font-size:11px; font-weight:500; color:var(--slate-400); text-decoration:line-through; }
.cat-card .price-line{ display:flex; align-items:flex-end; justify-content:space-between; }
.cat-card .price{ font-size:21px; font-weight:800; color:var(--brand-600); }
.cat-card .go{ display:flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:50%; background:var(--navy-950); color:#fff; transition:background .2s; }
.cat-card:hover .go{ background:var(--brand-600); }
.cat-card .go .ic{ width:15px; height:15px; }

/* ---------- Racepack ---------- */
.racepack-grid{ margin-top:40px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media(min-width:1024px){ .racepack-grid{ grid-template-columns:repeat(4,1fr); } }
.racepack-card{ height:100%; overflow:hidden; border-radius:18px; border:1px solid var(--slate-200); background:#fff; box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s; }
.racepack-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.racepack-card .ph{ aspect-ratio:4/5; overflow:hidden; }
.racepack-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.racepack-card:hover img{ transform:scale(1.06); }
.racepack-card figcaption{ padding:16px; }
.racepack-card b{ display:block; font-size:14px; font-weight:800; color:var(--navy-950); }
.racepack-card span{ display:block; margin-top:4px; font-size:12px; line-height:1.6; color:var(--slate-500); }

/* ---------- Panduan ukuran ---------- */
.size-grid{ display:grid; gap:40px; align-items:center; }
@media(min-width:1024px){ .size-grid{ grid-template-columns:.9fr 1.1fr; } }
.size-photo{ position:relative; width:100%; max-width:400px; margin-inline:auto; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); }
.size-photo img{ width:100%; height:100%; object-fit:cover; }
.tabs{ display:inline-flex; margin-top:24px; background:var(--slate-100); border-radius:14px; padding:4px; }
.tab{ height:36px; padding:0 16px; border-radius:10px; font-size:14px; font-weight:800; color:var(--slate-500); transition:background .2s, color .2s, box-shadow .2s; }
.tab.active{ background:#fff; color:var(--navy-950); box-shadow:var(--shadow-sm); }
.table-card{ margin-top:16px; overflow:hidden; border:1px solid var(--slate-200); border-radius:18px; background:#fff; }
.table-head{ background:var(--navy-950); padding:13px 20px; }
.table-head b{ font-size:13.5px; font-weight:800; color:#fff; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.size-table{ min-width:420px; text-align:left; font-size:14px; }
.size-table thead th{ background:var(--slate-50); padding:12px 18px; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); }
.size-table tbody td{ padding:12px 18px; border-top:1px solid var(--slate-100); color:var(--slate-600); }
.size-table tbody td:first-child{ font-weight:800; color:var(--brand-600); }
.size-table tbody tr{ transition:background .15s; }
.size-table tbody tr:hover{ background:rgba(239,244,254,.6); }
.table-note{ border-top:1px solid var(--slate-100); padding:11px 20px; font-size:12px; color:var(--slate-400); }
.tiny-note{ margin-top:12px; font-size:12px; color:var(--slate-400); }

/* ---------- Alur pendaftaran (dark) ---------- */
.steps-grid{ margin-top:40px; display:grid; gap:16px; }
@media(min-width:640px){ .steps-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .steps-grid{ grid-template-columns:repeat(4,1fr); } }
.step-item{ position:relative; display:flex; height:100%; flex-direction:column; border-radius:18px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); padding:20px; backdrop-filter:blur(4px); transition:border-color .25s; }
.step-item:hover{ border-color:rgba(255,198,26,.4); }
.step-item .srow{ display:flex; align-items:center; justify-content:space-between; }
.step-item .sicon{ display:flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:13px; background:var(--gold-400); color:var(--navy-950); }
.step-item .sicon .ic{ width:21px; height:21px; }
.step-item .num{ font-size:30px; font-weight:800; color:rgba(255,255,255,.1); }
.step-item h3{ margin-top:16px; font-size:15.5px; font-weight:800; color:#fff; }
.step-item p{ margin-top:6px; font-size:12.5px; line-height:1.65; color:var(--slate-400); }
.steps-more{ margin-top:32px; }

/* ---------- Lokasi ---------- */
.loc-card{ margin-top:40px; overflow:hidden; border:1px solid var(--slate-200); border-radius:var(--r-xl); background:#fff; box-shadow:var(--shadow-md); }
.loc-grid{ display:grid; }
@media(min-width:768px){ .loc-grid{ grid-template-columns:repeat(3,1fr); } }
.loc-item{ display:flex; flex-direction:column; gap:8px; padding:26px; }
@media(min-width:768px){ .loc-item+.loc-item{ border-left:1px solid var(--slate-100); } }
@media(max-width:767px){ .loc-item+.loc-item{ border-top:1px solid var(--slate-100); } }
.loc-item .licon{ display:flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:13px; background:var(--brand-50); color:var(--brand-600); }
.loc-item .licon .ic{ width:21px; height:21px; }
.loc-item h3{ margin-top:4px; font-size:13px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--navy-950); }
.loc-item p{ font-size:14px; line-height:1.65; color:var(--slate-600); }
.loc-foot{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--slate-100); background:var(--slate-50); padding:20px 24px; }
@media(min-width:640px){ .loc-foot{ flex-direction:row; } }
.loc-foot .note{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--slate-600); }
.loc-foot .note .ic{ width:16px; height:16px; flex:none; color:var(--gold-500); }

/* ---------- FAQ ---------- */
.faq-list{ margin-top:32px; display:grid; gap:12px; }
.faq-item{ border:1px solid var(--slate-200); border-radius:18px; background:#fff; box-shadow:var(--shadow-sm); overflow:hidden; transition:border-color .2s; }
.faq-item[open]{ border-color:var(--brand-300); }
.faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 20px; cursor:pointer; list-style:none; font-size:14.5px; font-weight:800; color:var(--navy-950); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .ic{ width:18px; height:18px; flex:none; color:var(--slate-400); transition:transform .25s; }
.faq-item[open] summary .ic{ transform:rotate(180deg); color:var(--brand-600); }
.faq-item .faq-body{ padding:0 20px 18px; font-size:14px; line-height:1.75; color:var(--slate-600); }
.faq-more{ margin-top:32px; }

/* ---------- CTA banner ---------- */
.cta-wrap{ padding:64px 0; }
@media(min-width:640px){ .cta-wrap{ padding:80px 0; } }
.cta-banner{ position:relative; overflow:hidden; border-radius:var(--r-xl); background:linear-gradient(135deg,var(--brand-700),var(--brand-600) 50%,var(--brand-500)); padding:52px 24px; text-align:center; color:#fff; box-shadow:0 20px 50px rgba(29,80,216,.25); }
@media(min-width:640px){ .cta-banner{ padding:64px 40px; } }
.cta-banner .blob1{ position:absolute; right:-64px; top:-64px; width:224px; height:224px; border-radius:50%; background:rgba(255,198,26,.3); filter:blur(50px); }
.cta-banner .blob2{ position:absolute; left:-40px; bottom:-80px; width:224px; height:224px; border-radius:50%; background:rgba(255,198,26,.2); filter:blur(50px); }
.cta-inner{ position:relative; }
.cta-chip{ display:inline-flex; align-items:center; gap:8px; border-radius:var(--r-full); background:rgba(255,255,255,.1); padding:7px 16px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.cta-chip .ic{ width:14px; height:14px; }
.cta-banner h2{ margin:16px auto 0; max-width:36rem; font-size:clamp(1.5rem,3.2vw,2.25rem); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.cta-banner p{ margin:12px auto 0; max-width:32rem; font-size:14.5px; line-height:1.7; color:var(--brand-100); }
.cta-banner .btn{ margin-top:28px; }
@media(min-width:640px){ .cta-banner .btn{ height:52px; font-size:16px; } }

/* ---------- Timer sesi 10 menit ---------- */
.timer-sticky{ position:sticky; top:var(--nav-h); z-index:40; border-bottom:1px solid rgba(226,232,240,.7); background:rgba(255,255,255,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.timer-in{ display:flex; align-items:center; gap:12px; padding-top:12px; padding-bottom:12px; }
.timer-box{ display:flex; width:100%; align-items:center; gap:12px; border-radius:18px; border:1px solid var(--brand-200); background:var(--brand-50); color:var(--brand-700); padding:10px 16px; box-shadow:var(--shadow-sm); transition:background .3s, border-color .3s, color .3s; }
.timer-box .ic{ width:20px; height:20px; flex:none; }
.timer-mid{ min-width:0; flex:1; }
.timer-label{ font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.timer-bar{ margin-top:6px; height:6px; width:100%; overflow:hidden; border-radius:var(--r-full); background:rgba(2,8,23,.1); }
.timer-bar span{ display:block; height:100%; border-radius:var(--r-full); background:var(--brand-600); transition:width 1s linear, background .3s; }
.timer-time{ flex:none; font-size:clamp(22px,4vw,30px); font-weight:800; line-height:1; }
.timer-box.warn{ border-color:var(--amber-200); background:var(--amber-50); color:var(--amber-700); }
.timer-box.warn .timer-bar span{ background:var(--amber-500); }
.timer-box.crit{ border-color:var(--red-300); background:var(--red-50); color:var(--red-700); animation:pulseSoft 2.4s ease-in-out infinite; }
.timer-box.crit .timer-bar span{ background:var(--red-500); }
.timer-box.dead{ border-color:var(--red-200); background:var(--red-50); color:var(--red-700); }
@keyframes pulseSoft{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.72; transform:scale(.985) } }

/* ---------- Header halaman gelap (detail tiket) ---------- */
.page-hero{ position:relative; overflow:hidden; background:var(--navy-950); color:#fff; padding:56px 0; }
@media(min-width:640px){ .page-hero{ padding:80px 0; } }
.page-hero .b1{ width:320px; height:320px; background:rgba(29,80,216,.4); right:-96px; top:-96px; }
.page-hero .b2{ width:256px; height:256px; background:rgba(255,198,26,.2); left:-80px; bottom:0; }
.page-hero-in{ position:relative; }
.crumbs{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--slate-400); }
.crumbs a:hover{ color:var(--gold-300); }
.crumbs .ic{ width:14px; height:14px; }
.crumbs .here{ color:var(--slate-200); }
.page-hero h1{ margin-top:16px; font-size:clamp(1.9rem,4.5vw,3rem); font-weight:800; letter-spacing:-.025em; line-height:1.1; }
.page-hero .lead{ margin-top:16px; max-width:42rem; font-size:14.5px; line-height:1.7; color:var(--slate-300); }
@media(min-width:640px){ .page-hero .lead{ font-size:16px; } }
.page-hero .chips{ margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- Kartu kategori detail ---------- */
.cat-detail-grid{ display:grid; gap:20px; }
@media(min-width:768px){ .cat-detail-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .cat-detail-grid{ gap:28px; } }
.cd-card{ position:relative; display:flex; height:100%; flex-direction:column; overflow:hidden; background:#fff; border:1px solid var(--slate-200); border-radius:var(--r-xl); padding:24px; box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s, border-color .25s; }
@media(min-width:640px){ .cd-card{ padding:32px; } }
.cd-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--brand-300); }
.cd-card.popular{ border-color:var(--gold-400); box-shadow:0 14px 40px rgba(255,198,26,.22); }
.ribbon{ position:absolute; right:0; top:24px; background:var(--gold-400); color:var(--navy-950); padding:6px 20px 6px 16px; border-radius:var(--r-full) 0 0 var(--r-full); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; box-shadow:var(--shadow-sm); }
.cd-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.cd-chips .chip-brand{ padding:5px 12px; font-size:12px; }
.cd-chips .chip-dark{ padding:5px 12px; font-size:12px; }
.cd-card h2{ margin-top:16px; font-size:clamp(1.4rem,2.6vw,1.75rem); font-weight:800; letter-spacing:-.02em; color:var(--navy-950); }
.cd-card .tagline{ margin-top:8px; font-size:14px; line-height:1.7; color:var(--slate-500); }
.cd-price{ margin-top:24px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 12px; }
.cd-price .big{ font-size:clamp(1.7rem,3.4vw,2.2rem); font-weight:800; letter-spacing:-.02em; color:var(--brand-600); line-height:1.1; }
.cd-price .strike{ padding-bottom:5px; font-size:14px; font-weight:500; color:var(--slate-400); text-decoration:line-through; }
.hemat{ margin-bottom:5px; border-radius:var(--r-full); background:var(--emerald-50); color:var(--emerald-600); padding:4px 10px; font-size:11px; font-weight:800; box-shadow:inset 0 0 0 1px var(--emerald-200); }
.cd-normal{ margin-top:6px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-400); }
.cd-div{ margin:24px 0; border:0; border-top:2px dashed var(--slate-200); }
.cd-inc-h{ font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--slate-400); }
.cd-inc{ margin-top:12px; display:grid; gap:10px; }
.cd-inc li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--slate-700); }
.cd-inc .ck{ display:flex; width:20px; height:20px; flex:none; align-items:center; justify-content:center; border-radius:50%; margin-top:1px; background:var(--emerald-100); color:var(--emerald-600); }
.cd-inc .ck .ic{ width:12px; height:12px; }
.slot-note{ margin-top:20px; display:flex; align-items:center; gap:8px; border-radius:14px; background:var(--amber-50); color:var(--amber-700); padding:10px 14px; font-size:12.5px; font-weight:500; box-shadow:inset 0 0 0 1px var(--amber-200); }
.slot-note .ic{ width:16px; height:16px; flex:none; }
.cd-card .btn{ margin-top:24px; }
.strip-all{ margin-top:40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 32px; border:1px solid var(--slate-200); background:var(--slate-50); border-radius:18px; padding:24px; }
.strip-all .lead{ font-size:14px; font-weight:800; color:var(--navy-950); }
.strip-all .it{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--slate-600); }
.strip-all .it .ic{ width:17px; height:17px; color:var(--brand-600); }

/* ---------- Jersey figures ---------- */
.jersey-grid{ margin-top:40px; display:grid; gap:24px; }
@media(min-width:1024px){ .jersey-grid{ grid-template-columns:repeat(2,1fr); } }
.jersey-card{ height:100%; overflow:hidden; border:1px solid var(--slate-200); border-radius:var(--r-xl); background:#fff; box-shadow:var(--shadow-sm); }
.jersey-card .ph{ aspect-ratio:4/5; overflow:hidden; }
.jersey-card img{ width:100%; height:100%; object-fit:cover; }
.jersey-card figcaption{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; }
.jersey-card b{ font-size:14px; font-weight:800; color:var(--navy-950); }
.jersey-card span{ font-size:12px; font-weight:600; color:var(--slate-500); }

/* ---------- Ketentuan ---------- */
.term-grid{ display:grid; gap:40px; }
@media(min-width:1024px){ .term-grid{ grid-template-columns:1fr 1.4fr; } }
.term-list{ display:grid; gap:12px; }
.term-list li{ display:flex; gap:14px; border:1px solid var(--slate-200); background:#fff; border-radius:18px; padding:18px; box-shadow:var(--shadow-sm); }
.term-list .n{ display:flex; width:28px; height:28px; flex:none; align-items:center; justify-content:center; border-radius:50%; background:var(--brand-50); font-size:12px; font-weight:800; color:var(--brand-700); }
.term-list p{ font-size:14px; line-height:1.7; color:var(--slate-600); }

/* ---------- Halaman FORM ---------- */
.page-soft{ background:var(--slate-50); }
.form-wrap{ padding-top:32px; padding-bottom:112px; }
@media(min-width:1024px){ .form-wrap{ padding-bottom:48px; } }
.steps-ind{ display:flex; align-items:center; max-width:32rem; margin-inline:auto; margin-bottom:32px; }
.steps-ind li{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.steps-ind li.grow{ flex:1; }
.steps-ind .sic{ display:flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:50%; font-size:13px; font-weight:800; background:var(--slate-200); color:var(--slate-500); }
.steps-ind li.now .sic{ background:var(--brand-600); color:#fff; box-shadow:0 6px 16px rgba(29,80,216,.3); }
.steps-ind .sic .ic{ width:17px; height:17px; }
.steps-ind small{ font-size:10px; font-weight:800; color:var(--slate-400); white-space:nowrap; }
@media(min-width:640px){ .steps-ind small{ font-size:12px; } }
.steps-ind li.now small{ color:var(--brand-700); }
.steps-ind .line{ flex:1; height:2px; border-radius:2px; background:var(--slate-200); margin:0 8px 22px; }
.form-grid{ display:grid; gap:28px; }
@media(min-width:1024px){ .form-grid{ grid-template-columns:1.55fr 1fr; align-items:start; } }
.fcol{ display:grid; gap:24px; }

.card{ border:1px solid var(--slate-200); background:#fff; border-radius:18px; padding:20px; box-shadow:var(--shadow-sm); }
@media(min-width:640px){ .card{ padding:28px; } }
.card-head{ display:flex; align-items:center; gap:12px; }
.card-head .cicon{ display:flex; width:40px; height:40px; flex:none; align-items:center; justify-content:center; border-radius:12px; background:var(--brand-50); color:var(--brand-600); }
.card-head .cicon .ic{ width:20px; height:20px; }
.card-head h2{ font-size:16.5px; font-weight:800; color:var(--navy-950); }
.card-head p{ font-size:12px; color:var(--slate-500); }

.field{ margin-top:0; }
.fgrid{ margin-top:24px; display:grid; gap:18px; }
@media(min-width:640px){ .fgrid{ grid-template-columns:repeat(2,1fr); } }
.fgrid .full{ grid-column:1/-1; }
label.lbl{ display:block; font-size:14px; font-weight:600; color:var(--navy-950); }
label.lbl .req{ color:var(--red-500); }
.inp{
  margin-top:8px; width:100%; height:44px; padding:0 14px;
  border:1px solid #d8dde8; border-radius:10px; background:#fff;
  font-size:15.5px; color:var(--navy-950); transition:border-color .2s, box-shadow .2s;
}
.inp::placeholder{ color:var(--slate-400); }
.inp:focus{ outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(59,108,240,.18); }
.inp.err{ border-color:var(--red-300); background:var(--red-50); }
select.inp{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:38px; }
select.inp.placeholder{ color:var(--slate-400); border-style:dashed; }
.hint{ margin-top:6px; font-size:12px; color:var(--slate-400); }
.ferr{ margin-top:6px; display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--red-600); }
.ferr .ic{ width:14px; height:14px; flex:none; }

/* Radio kategori */
.radios{ margin-top:24px; display:grid; gap:12px; }
@media(min-width:640px){ .radios{ grid-template-columns:repeat(2,1fr); } }
.radio-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; border:1px solid var(--slate-200); border-radius:18px; padding:16px; background:#fff; transition:border-color .2s, background .2s, box-shadow .2s; }
.radio-card:hover{ border-color:var(--brand-300); background:var(--slate-50); }
.radio-card.active{ border-color:var(--brand-600); background:rgba(239,244,254,.5); box-shadow:0 0 0 2px rgba(29,80,216,.2); }
.radio-card .rc-main{ min-width:0; }
.radio-card .rc-name{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; color:var(--navy-950); }
.rc-dot{ display:flex; width:18px; height:18px; flex:none; align-items:center; justify-content:center; border-radius:50%; border:2px solid var(--slate-300); }
.radio-card.active .rc-dot{ border-color:var(--brand-600); }
.radio-card.active .rc-dot::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--brand-600); }
.rc-sub{ display:block; margin-top:4px; padding-left:26px; font-size:12px; color:var(--slate-500); }
.rc-price{ flex:none; text-align:right; }
.rc-price .strike{ display:block; font-size:11px; color:var(--slate-400); text-decoration:line-through; }
.rc-price b{ display:block; font-size:14.5px; font-weight:800; color:var(--brand-600); }

/* Stepper qty */
.qty-box{ margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; background:var(--slate-50); border-radius:18px; padding:16px; }
.qty-box b{ font-size:14px; font-weight:800; color:var(--navy-950); display:block; }
.qty-box small{ display:block; margin-top:2px; font-size:12px; color:var(--slate-500); }
.stepper{ display:flex; align-items:center; gap:12px; }
.stepper button{ display:flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:12px; border:1px solid var(--slate-300); background:#fff; color:var(--navy-950); transition:border-color .2s, color .2s; }
.stepper button:hover:not(:disabled){ border-color:var(--brand-400); color:var(--brand-600); }
.stepper button:disabled{ opacity:.4; cursor:not-allowed; }
.stepper b{ width:40px; text-align:center; font-size:21px; font-weight:800; color:var(--navy-950); }

/* Peserta */
.part-list{ margin-top:24px; display:grid; gap:16px; }
.part-card{ border:1px solid var(--slate-200); background:rgba(248,250,252,.6); border-radius:18px; padding:16px; }
@media(min-width:640px){ .part-card{ padding:20px; } }
.part-tag{ display:inline-flex; align-items:center; gap:8px; background:var(--navy-950); color:#fff; border-radius:var(--r-full); padding:4px 12px; font-size:12px; font-weight:800; }
.part-tag .mini{ background:var(--gold-400); color:var(--navy-950); border-radius:var(--r-full); padding:2px 8px; font-size:10px; font-weight:800; }
.part-grid{ margin-top:8px; display:grid; gap:16px; }
@media(min-width:640px){ .part-grid{ grid-template-columns:repeat(2,1fr); } }

/* Ringkasan */
.summary{ overflow:hidden; border:1px solid var(--slate-200); border-radius:18px; background:#fff; box-shadow:var(--shadow-lg); }
@media(min-width:1024px){ .summary-col{ position:sticky; top:150px; } }
.summary-head{ background:var(--navy-950); padding:16px 24px; }
.summary-head h2{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; }
.summary-head .ic{ width:17px; height:17px; color:var(--gold-400); }
.summary-body{ padding:20px 24px; display:grid; gap:16px; }
.sum-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sum-item b{ display:block; font-size:14px; font-weight:800; color:var(--navy-950); }
.sum-item small{ display:block; font-size:12px; color:var(--slate-500); }
.sum-item .pr{ font-size:14px; font-weight:700; color:var(--slate-700); }
.eb-box{ border-radius:14px; background:var(--slate-50); padding:14px; font-size:12px; line-height:1.65; color:var(--slate-600); }
.eb-box b{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; color:var(--navy-950); }
.eb-box .ic{ width:16px; height:16px; color:var(--brand-600); }
.eb-box p{ margin-top:6px; }
.sum-dl{ display:grid; gap:8px; border-top:2px dashed var(--slate-200); padding-top:16px; font-size:14px; }
.sum-dl .row{ display:flex; justify-content:space-between; color:var(--slate-600); }
.sum-dl .row b{ font-weight:700; color:var(--navy-950); }
.sum-dl .row .green{ color:var(--emerald-600); font-weight:700; }
.sum-total{ display:flex; align-items:flex-end; justify-content:space-between; border-top:2px dashed var(--slate-200); padding-top:16px; }
.sum-total span{ font-size:14px; font-weight:700; color:var(--slate-500); }
.sum-total b{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--brand-600); }
.agree{ display:flex; gap:12px; align-items:flex-start; border:1px solid var(--slate-200); border-radius:14px; padding:14px; cursor:pointer; transition:border-color .2s, background .2s; font-size:12px; line-height:1.65; color:var(--slate-600); }
.agree:hover{ border-color:var(--brand-300); }
.agree.err{ border-color:var(--red-300); background:var(--red-50); }
.agree input{ width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--brand-600); }
.agree b{ color:var(--navy-950); font-weight:700; }
.safe-note{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:11px; color:var(--slate-400); }
.safe-note .ic{ width:13px; height:13px; color:var(--emerald-500); }
.err-count{ margin-top:12px; display:flex; align-items:center; gap:8px; border-radius:14px; background:var(--red-50); color:var(--red-600); padding:12px 16px; font-size:12.5px; font-weight:500; box-shadow:inset 0 0 0 1px var(--red-200); }
.err-count .ic{ width:16px; height:16px; flex:none; }

/* Bar bawah mobile (form) */
.mbar{ position:fixed; left:0; right:0; bottom:0; z-index:40; border-top:1px solid var(--slate-200); background:rgba(255,255,255,.95); backdrop-filter:blur(10px); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(2,8,23,.08); }
@media(min-width:1024px){ .mbar{ display:none; } }
.mbar-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1152px; margin-inline:auto; }
.mbar small{ display:block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--slate-400); }
.mbar b{ display:block; font-size:18px; font-weight:800; line-height:1.2; color:var(--brand-600); }
.mbar .btn{ flex:1; max-width:220px; height:44px; }

/* ---------- Halaman QRIS ---------- */
.qris-wrap{ padding:40px 0 56px; }
@media(min-width:640px){ .qris-wrap{ padding:56px 0 64px; } }
.qris-head{ text-align:center; margin-bottom:32px; }
.qris-head .overline{ font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--brand-600); }
.qris-head h1{ margin-top:8px; font-size:clamp(1.5rem,3.2vw,2.25rem); font-weight:800; letter-spacing:-.02em; color:var(--navy-950); }
.qris-head p{ margin:12px auto 0; max-width:36rem; font-size:14px; line-height:1.7; color:var(--slate-600); }
.qris-grid{ display:grid; gap:24px; }
@media(min-width:1024px){ .qris-grid{ grid-template-columns:1fr 1.05fr; align-items:start; } }
.qr-card{ overflow:hidden; border:1px solid var(--slate-200); border-radius:var(--r-xl); background:#fff; box-shadow:var(--shadow-lg); }
.qr-top{ background:var(--navy-950); padding:20px 24px; }
.qr-top small{ display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-400); }
.qr-total{ margin-top:4px; font-size:clamp(1.7rem,4vw,2.2rem); font-weight:800; letter-spacing:-.02em; color:var(--gold-400); }
.order-chip{ margin-top:12px; display:inline-flex; align-items:center; gap:8px; border-radius:var(--r-full); background:rgba(255,255,255,.1); padding:6px 14px; font-size:12px; font-weight:800; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); transition:background .2s; }
.order-chip:hover{ background:rgba(255,255,255,.16); }
.order-chip .ic{ width:14px; height:14px; color:var(--gold-400); }
.qr-body{ display:flex; flex-direction:column; align-items:center; padding:28px 24px; }
@media(min-width:640px){ .qr-body{ padding:28px 40px; } }
.qr-frame{ position:relative; width:100%; max-width:320px; }
.qr-frame::before{ content:""; position:absolute; inset:-6px; border-radius:18px; background:linear-gradient(135deg,rgba(29,80,216,.15),transparent 50%,rgba(255,198,26,.25)); }
.qr-inner{ position:relative; overflow:hidden; border:1px solid var(--slate-200); border-radius:18px; background:#fff; padding:12px; box-shadow:var(--shadow-sm); }
.qr-inner img{ width:100%; aspect-ratio:1/1; object-fit:contain; border-radius:10px; }
.qr-scan{ margin-top:20px; display:flex; align-items:center; gap:8px; text-align:center; font-size:14px; font-weight:800; color:var(--navy-950); }
.qr-scan .ic{ width:18px; height:18px; color:var(--brand-600); }
.apps-chips{ margin-top:16px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:360px; }
.qr-warn{ margin-top:20px; display:flex; align-items:flex-start; gap:8px; border-radius:14px; background:var(--amber-50); color:var(--amber-700); padding:12px 16px; font-size:12.5px; line-height:1.65; box-shadow:inset 0 0 0 1px var(--amber-200); max-width:420px; }
.qr-warn .ic{ width:16px; height:16px; flex:none; margin-top:2px; }
.qr-warn b{ font-weight:800; }
.pay-steps{ margin-top:20px; display:grid; gap:16px; }
.pay-steps li{ display:flex; gap:14px; }
.pay-steps .pn{ display:flex; width:28px; height:28px; flex:none; align-items:center; justify-content:center; border-radius:50%; background:var(--brand-600); color:#fff; font-size:12px; font-weight:800; }
.pay-steps p{ padding-top:3px; font-size:14px; line-height:1.65; color:var(--slate-600); }
.trust-box{ margin-top:24px; display:grid; gap:10px; border-radius:18px; background:var(--slate-50); padding:16px; }
.trust-box p{ display:flex; align-items:flex-start; gap:10px; font-size:12.5px; line-height:1.65; color:var(--slate-600); }
.trust-box .ic{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--emerald-500); }
.qris-actions{ display:grid; gap:12px; }
.qris-actions .btn-lg{ height:52px; }
.sum-mini .dl{ margin-top:16px; display:grid; gap:10px; font-size:14px; }
.sum-mini .row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.sum-mini .row dt{ flex:none; color:var(--slate-500); }
.sum-mini .row dd{ text-align:right; font-weight:600; color:var(--navy-950); overflow-wrap:anywhere; }
.sum-mini .row.total{ border-top:2px dashed var(--slate-200); padding-top:12px; align-items:center; }
.sum-mini .row.total dt{ font-weight:800; color:var(--slate-700); }
.sum-mini .row.total dd{ font-size:18px; font-weight:800; color:var(--brand-600); }

/* ---------- Loading ---------- */
.loading-screen{ position:relative; display:flex; min-height:calc(100dvh - var(--nav-h)); align-items:center; justify-content:center; overflow:hidden; background:var(--navy-950); padding:64px 16px; color:#fff; }
.loading-screen .b1{ width:288px; height:288px; background:rgba(29,80,216,.3); left:-96px; top:40px; }
.loading-screen .b2{ width:288px; height:288px; background:rgba(255,198,26,.2); right:-80px; bottom:40px; }
.load-card{ position:relative; width:100%; max-width:448px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); border-radius:var(--r-xl); padding:28px; text-align:center; backdrop-filter:blur(10px); }
@media(min-width:640px){ .load-card{ padding:36px; } }
.spin-wrap{ position:relative; width:80px; height:80px; margin-inline:auto; }
.spin-ring{ position:absolute; inset:0; border-radius:50%; border:4px solid rgba(255,255,255,.1); border-top-color:var(--gold-400); animation:spin 1s linear infinite; }
.spin-mid{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.spin-mid .ic{ width:30px; height:30px; color:var(--gold-400); animation:spin 1.2s linear infinite; }
.spin-mid .ok{ width:32px; height:32px; color:var(--emerald-400); animation:none; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.load-card h1{ margin-top:24px; font-size:clamp(1.25rem,2.6vw,1.55rem); font-weight:800; }
.load-card .lead{ margin-top:8px; font-size:13.5px; line-height:1.7; color:var(--slate-400); }
.load-bar{ margin-top:24px; height:8px; width:100%; overflow:hidden; border-radius:var(--r-full); background:rgba(255,255,255,.1); }
.load-bar span{ display:block; height:100%; width:0%; border-radius:var(--r-full); background:linear-gradient(90deg,var(--brand-500),var(--gold-400)); transition:width .7s ease-out; }
.load-steps{ margin-top:28px; display:grid; gap:12px; text-align:left; }
.load-steps li{ display:flex; align-items:center; gap:12px; border-radius:14px; border:1px solid rgba(255,255,255,.05); background:rgba(255,255,255,.03); padding:12px 16px; opacity:.5; transition:background .5s, border-color .5s, opacity .5s; }
.load-steps li.active{ border-color:rgba(255,198,26,.4); background:rgba(255,255,255,.1); opacity:1; }
.load-steps li.done{ border-color:rgba(52,211,153,.3); background:rgba(52,211,153,.1); opacity:1; }
.load-steps .ls-ic{ display:flex; width:28px; height:28px; flex:none; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.1); color:var(--slate-400); }
.load-steps .ls-ic .ic{ width:14px; height:14px; }
.load-steps li.active .ls-ic{ background:var(--gold-400); color:var(--navy-950); }
.load-steps li.done .ls-ic{ background:var(--emerald-400); color:var(--navy-950); }
.load-steps p{ font-size:13.5px; font-weight:600; color:var(--slate-200); }
.load-steps li.done p{ color:var(--emerald-300); }

/* ---------- Pending ---------- */
.status-hero{ position:relative; overflow:hidden; background:var(--navy-950); color:#fff; padding:48px 0; }
@media(min-width:640px){ .status-hero{ padding:64px 0; } }
.status-hero .b1{ width:288px; height:288px; background:rgba(255,198,26,.2); right:-80px; top:-80px; }
.status-hero .b2{ width:224px; height:224px; background:rgba(29,80,216,.3); left:-64px; bottom:0; }
.status-in{ position:relative; max-width:48rem; margin-inline:auto; text-align:center; padding-inline:16px; }
.status-ic{ position:relative; width:80px; height:80px; margin-inline:auto; }
.status-ic .ping-a{ position:absolute; inset:0; border-radius:50%; background:rgba(251,191,36,.3); animation:ping 2s cubic-bezier(0,0,.2,1) infinite; }
.status-ic .core{ position:relative; display:flex; width:64px; height:64px; margin:8px auto 0; align-items:center; justify-content:center; border-radius:50%; background:rgba(251,191,36,.2); box-shadow:inset 0 0 0 2px rgba(251,191,36,.6); }
.status-ic .core .ic{ width:32px; height:32px; color:var(--amber-300); animation:pulseSoft 2.4s ease-in-out infinite; }
.status-in h1{ margin-top:24px; font-size:clamp(1.5rem,3.4vw,2.25rem); font-weight:800; letter-spacing:-.02em; }
.status-in .lead{ margin:12px auto 0; max-width:36rem; font-size:14px; line-height:1.75; color:var(--slate-300); }
@media(min-width:640px){ .status-in .lead{ font-size:15.5px; } }
.status-in .lead b{ color:#fff; }
.status-in .lead .gold{ color:var(--gold-300); }
.status-chips{ margin-top:20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; }
.id-chip{ display:inline-flex; align-items:center; gap:8px; border-radius:var(--r-full); background:rgba(255,255,255,.1); padding:9px 16px; font-size:12px; font-weight:800; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); transition:background .2s; }
.id-chip:hover{ background:rgba(255,255,255,.16); }
.id-chip .ic{ width:15px; height:15px; color:var(--gold-400); }
.id-chip .cp{ width:14px; height:14px; opacity:.7; color:#fff; }
.est-chip{ display:inline-flex; border-radius:var(--r-full); background:rgba(251,191,36,.15); padding:9px 14px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--amber-300); box-shadow:inset 0 0 0 1px rgba(251,191,36,.4); }
.pending-grid{ display:grid; gap:24px; padding:40px 0 0; }
@media(min-width:1024px){ .pending-grid{ grid-template-columns:1fr 1.15fr; align-items:start; } }

/* Timeline */
.timeline{ position:relative; margin-top:24px; display:grid; gap:28px; }
.tl-item{ position:relative; display:flex; gap:16px; }
.tl-item::before{ content:""; position:absolute; left:17px; top:38px; height:calc(100% + 6px); width:2px; background:var(--slate-200); }
.tl-item:last-child::before{ display:none; }
.tl-ic{ position:relative; z-index:2; display:flex; width:36px; height:36px; flex:none; align-items:center; justify-content:center; border-radius:50%; background:var(--slate-100); color:var(--slate-400); }
.tl-ic .ic{ width:17px; height:17px; }
.tl-item.done .tl-ic{ background:var(--emerald-500); color:#fff; }
.tl-item.current .tl-ic{ background:var(--amber-400); color:var(--navy-950); box-shadow:0 0 0 5px rgba(251,191,36,.25); }
.tl-item b{ display:block; font-size:14px; font-weight:800; color:var(--navy-950); }
.tl-item.next b{ color:var(--slate-400); }
.tl-item small{ display:block; margin-top:2px; font-size:12.5px; line-height:1.6; color:var(--slate-500); }
.tl-note{ margin-top:28px; border-radius:16px; background:var(--brand-50); color:var(--brand-800); padding:16px; font-size:12.5px; line-height:1.7; box-shadow:inset 0 0 0 1px var(--brand-200); }
.tl-note b{ font-weight:800; }
.tl-note p{ margin-top:4px; }

/* Detail pesanan */
.pd-card{ overflow:hidden; border:1px solid var(--slate-200); border-radius:var(--r-xl); background:#fff; box-shadow:var(--shadow-sm); }
.pd-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--navy-950); padding:16px 24px; }
.pd-head h2{ font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; }
.pd-head .st{ border-radius:var(--r-full); background:rgba(251,191,36,.15); padding:5px 12px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--amber-300); box-shadow:inset 0 0 0 1px rgba(251,191,36,.4); }
.pd-dl{ padding:0 24px; }
.pd-dl .row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--slate-100); }
.pd-dl .row dt{ flex:none; font-size:14px; color:var(--slate-500); }
.pd-dl .row dd{ text-align:right; font-size:14px; font-weight:600; color:var(--navy-950); overflow-wrap:anywhere; }
.pd-parts{ border-top:1px solid var(--slate-100); background:rgba(248,250,252,.7); padding:20px 24px; }
.pd-parts .lbl{ font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--slate-400); }
.pd-parts ul{ margin-top:12px; display:grid; gap:10px; }
.pd-parts li{ display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--slate-200); background:#fff; border-radius:14px; padding:12px 16px; }
.pd-parts b{ display:block; font-size:14px; font-weight:800; color:var(--navy-950); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-parts small{ font-size:12px; color:var(--slate-500); }
.pd-parts .sz{ flex:none; border-radius:var(--r-full); background:var(--brand-50); padding:5px 12px; font-size:12px; font-weight:800; color:var(--brand-700); }
.pd-total{ display:flex; align-items:center; justify-content:space-between; border-top:2px dashed var(--slate-300); margin-top:20px; padding-top:16px; }
.pd-total span{ font-size:14px; font-weight:700; color:var(--slate-600); }
.pd-total b{ font-size:20px; font-weight:800; color:var(--brand-600); }
.pend-actions{ padding:0 0 56px; }
.pa-card{ display:flex; flex-direction:column; gap:12px; border:1px solid var(--slate-200); background:#fff; border-radius:var(--r-xl); padding:20px; box-shadow:var(--shadow-sm); }
@media(min-width:640px){ .pa-card{ flex-direction:row; padding:24px; } }
.pa-card .btn{ flex:1; }
.pend-foot{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; text-align:center; font-size:12px; color:var(--slate-400); }
.pend-foot .ic{ width:14px; height:14px; flex:none; }

/* ---------- Dialog ---------- */
.dialog-overlay{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(2,6,18,.55); backdrop-filter:blur(4px); animation:fadeIn .2s ease; }
.dialog{ width:100%; max-width:384px; border-radius:18px; background:#fff; padding:24px; box-shadow:0 30px 80px rgba(2,6,18,.35); animation:popIn .22s cubic-bezier(.16,1,.3,1); }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes popIn{ from{ opacity:0; transform:scale(.94) translateY(8px) } to{ opacity:1; transform:none } }
.dialog h3{ display:flex; align-items:center; gap:10px; font-size:16px; font-weight:800; color:var(--navy-950); }
.dialog h3 .ic{ width:20px; height:20px; flex:none; color:var(--red-500); }
.dialog .d-body{ margin-top:10px; font-size:14px; line-height:1.7; color:var(--slate-600); }
.dialog .d-body b{ color:var(--navy-950); font-weight:700; }
.dialog .d-actions{ margin-top:20px; display:grid; gap:10px; }
.dialog .d-actions .btn{ width:100%; }

/* ---------- Toast ---------- */
#toast-root{ position:fixed; left:0; right:0; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:90; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 16px; }
.toast{ display:flex; align-items:center; gap:10px; max-width:420px; background:var(--navy-950); color:#fff; border-radius:14px; padding:12px 18px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lg); animation:toastIn .25s ease; }
.toast .ic{ width:17px; height:17px; flex:none; color:var(--gold-400); }
.toast.out{ animation:toastOut .3s ease forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(12px) } }

/* ---------- Loading spinner kecil (guard) ---------- */
.guard-spin{ display:flex; min-height:60vh; align-items:center; justify-content:center; background:var(--slate-50); }
.guard-spin .ring{ width:40px; height:40px; border-radius:50%; border:4px solid var(--brand-200); border-top-color:var(--brand-600); animation:spin .9s linear infinite; }

/* ---------- Pastikan atribut hidden selalu bekerja ---------- */
[hidden]{ display:none !important; }