:root{
  --bg:#0a0a0c;--bg2:#111113;--card:#141418;--line:#22232e;
  --text:#f3f4f6;--muted:#b5b8c6;--gold:#ffd86b;--gold2:#e1b64c;
}

/* ===== Reset & mobile stabil ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    url("https://cdn.rek8k8.cloud/bandartotowebp/backgroundwebbandartoto.webp") center/cover fixed,
    linear-gradient(180deg,var(--bg),var(--bg2));
  min-height:100vh;
  touch-action:manipulation;                 /* cegah double-tap zoom */
  overscroll-behavior:none;                  /* anti bounce */
  -webkit-tap-highlight-color:transparent;
}
input,select,textarea,button{font-size:16px} /* cegah auto-zoom saat fokus */

.container{width:94%;max-width:1100px;margin:0 auto}

/* ===== Topbar ===== */
.topbar{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);border-bottom:1px solid #1b1b21}
.topbar .wrap{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 6px}
.brand{display:flex;align-items:center;gap:10px;background:transparent;border:0;padding:0;cursor:pointer}
.logo{height:46px;border-radius:10px}

/* Search */
.searchbox{position:relative;flex:1;max-width:520px}
.searchbox input{
  width:100%;padding:12px 40px 12px 12px;border-radius:12px;border:1px solid #2b2b38;
  background:#0e0e14;color:#e8e9f0;font-weight:600;outline:none
}
.searchbox svg{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;fill:#b5b8c6;opacity:.9
}

/* ===== Running Text / Ticker ===== */
.ticker{
  position:relative;
  margin:10px auto 14px;
  padding:8px 14px;
  border-radius:14px;
  background:linear-gradient(180deg,#1a1b20,#0f1014);
  box-shadow:0 6px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;border:1px solid #2a2c34;
}
.ticker::before{
  content:"";
  position:absolute;inset:0;border-radius:14px;padding:1px;
  background:linear-gradient(90deg,#ddc168,#ffd86b,#e1b64c,#ddc168);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:goldShift 6s linear infinite;
}
@keyframes goldShift{to{background-position:200% 0}}
.ticker__track{display:flex;gap:60px;white-space:nowrap;animation:scrollX 28s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{color:#f6f7fb;letter-spacing:.2px;font-weight:600;opacity:.92}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== Hero ===== */
.hero{padding:14px 0 8px;text-align:center}
.hero h1{margin:0 0 4px}
.hero .date{margin:0;color:#f6e3a4}

/* ===== Slider (no crop) ===== */
.slider{
  position:relative;margin:12px auto 10px;border-radius:14px;
  overflow:hidden;border:1px solid #2e2e38;background:#0d0d11;
  box-shadow:0 14px 50px rgba(0,0,0,.45) inset;
}
.slide-track{display:flex;transition:transform .6s ease}
.slide{
  min-width:100%;
  aspect-ratio: 3 / 1;              /* desktop banner */
  display:grid;place-items:center;
  background:linear-gradient(180deg,#0c0c11,#14141b);
}
@media (max-width:680px){ .slide{ aspect-ratio: 16 / 9; } } /* mobile 16:9 */
.slide img{width:100%;height:100%;object-fit:contain;object-position:center;background:transparent}

.ctrl{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.45);border:1px solid #3b3b45;color:#fff;
  padding:6px 10px;border-radius:10px;cursor:pointer
}
.ctrl:hover{background:rgba(0,0,0,.7)}
.prev{left:10px}.next{right:10px}
.dots{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:6px;justify-content:center}
.dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35);border:1px solid rgba(0,0,0,.4)}
.dot.active{background:linear-gradient(180deg,var(--gold),var(--gold2));}

/* ===== Auth buttons under slider (BESAR + efek cahaya lewat) ===== */
.authbar{display:flex;gap:14px;justify-content:center;align-items:center;margin:12px auto 6px;position:relative;z-index:5;flex-wrap:wrap}
.btn-cta{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;
  border-radius:999px;
  font-weight:800;letter-spacing:.3px;
  text-decoration:none;
  transition:transform .15s ease, filter .15s ease;
  min-width:160px;
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  overflow:hidden; /* untuk shimmer */
}
.btn-cta:active{transform:translateY(1px)}

/* Efek cahaya lewat (shimmer) — berlaku untuk kedua tombol */
.btn-cta::before{
  content:"";
  position:absolute;
  top:-120%; left:-30%;
  width:45%; height:300%;
  background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 45%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.18) 55%, rgba(255,255,255,0) 100%);
  transform:translateX(-140%);
  animation:btnSweep 2.8s linear infinite;
  pointer-events:none;
  filter:blur(.3px);
}
@keyframes btnSweep{to{transform:translateX(260%)}}

/* Gold solid (Daftar) */
.btn-gold{
  color:#141418;
  background:linear-gradient(180deg,#ffe08e,#ffd86b 55%,#e1b64c);
  border:1px solid #f1c85e;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.btn-gold:hover{filter:brightness(1.06)}

/* Dark solid (Login) — NON-RGB */
.btn-rgb{
  color:#f5f7fb;
  background:linear-gradient(180deg,#111318,#0f1116);
  border:1px solid #2b2b38;
}
.btn-rgb:hover{filter:brightness(1.06)}

@media (max-width:680px){
  .authbar{gap:10px}
  .btn-cta{width:calc(50% - 5px);padding:14px 0;min-width:0}
}

/* ===== Panel + table ===== */
.panel{background:rgba(16,16,22,.9);border:1px solid #2b2b36;border-radius:14px;padding:12px;margin:14px 0;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.panel .head{background:linear-gradient(180deg,#ffe8a3,#ffd86b);color:#221b00;border:1px solid #caa44a;border-radius:10px;padding:10px;text-align:center;font-weight:900;letter-spacing:.4px}
.twrap{overflow:auto;border-radius:10px;margin-top:10px}
.t{width:100%;border-collapse:collapse;font-size:15px}
.t th,.t td{border:1px solid #34343f;padding:10px 8px}
.t thead th{background:#1d1d26;color:#ffd86b;font-weight:900}
.t tbody tr{background:#14141a}
.t tbody tr:nth-child(odd){background:#191922}
.t td.time{white-space:nowrap}
.t td.score{text-align:center;font-weight:900;color:#ffe38f}

/* ===== Loader & footer ===== */
.loader{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:30}
.loader.show{display:grid}
.loader-card{background:#0f0f14;border:1px solid #222230;border-radius:16px;padding:18px 22px;text-align:center}
.spin{width:22px;height:22px;border-radius:999px;border:3px solid rgba(255,255,255,.25);border-top-color:#ffd36b;margin:8px auto 0;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.footer{color:#c9cbd7;text-align:center;margin:26px 0}

/* ===== Mobile polish ===== */
@media (max-width:680px){
  .topbar .wrap{padding:10px}
  .t{font-size:14px}
  .t th,.t td{padding:10px 8px}
}

/* ===== Tambahan khusus Live Score (sesuai perintah) ===== */
.panel.live .head{
  background:linear-gradient(90deg, rgba(255,60,60,.2), transparent);
}
.panel.live .t td.score{
  font-weight:700;
}

/* =========================================================
   LIVE SCORE — HEADER FIX (lebih jelas, senada, ada efek)
   (PASTE DIBAWAH ATURAN DI ATAS — INI MENG-OVERRIDE)
   ========================================================= */
:root{
  --live:#ff3b3b;
  --live2:#ff7a7a;
}

.panel.live .head{
  position: relative;
  overflow: hidden;
  padding-left: 36px;                 /* ruang buat dot LIVE di kiri */
  color:#221b00;
  background:linear-gradient(180deg,#ffe08e,#ffd86b 55%,#e1b64c); /* emas jelas */
  border:1px solid #caa44a;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:
    inset 0 0 0 1px rgba(255,216,107,.35),
    0 8px 24px rgba(0,0,0,.25),
    0 0 22px rgba(255,59,59,.15);
}

/* Dot merah berdenyut “LIVE” */
.panel.live .head::after{
  content:"";
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--live2), var(--live));
  box-shadow:0 0 10px var(--live), 0 0 20px rgba(255,59,59,.6);
  animation:pulseLive 1.4s ease-in-out infinite;
}

/* Kilauan (shine) melintas pelan */
.panel.live .head::before{
  content:"";
  position:absolute; inset:-20% -40%;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.15) 45%,
    rgba(255,255,255,.45) 50%,
    rgba(255,255,255,.15) 55%,
    rgba(255,255,255,0) 100%);
  transform:translateX(-120%);
  animation:liveShine 3.2s linear infinite;
  pointer-events:none;
}

/* Skor tetap tebal + tone senada */
.panel.live .t td.score{ font-weight:800; color:#ffe08e; }

/* Animations */
@keyframes pulseLive{
  0%  { box-shadow:0 0 0 0 rgba(255,59,59,.8), 0 0 20px rgba(255,59,59,.6); }
  70% { box-shadow:0 0 0 12px rgba(255,59,59,0), 0 0 10px rgba(255,59,59,.5); }
  100%{ box-shadow:0 0 0 0 rgba(255,59,59,0), 0 0 20px rgba(255,59,59,.6); }
}
@keyframes liveShine{
  to { transform:translateX(120%); }
}