/* BATAVIA77: tema merah (gaya referensi): dasar hitam-marun, panel merah tua bergradasi, bingkai & tombol merah menyala.
   Menimpa variabel warna bawaan template (_next/static/css). Warna diambil dari screenshot referensi. */
:root{
  --hk-0:#00030a;--hk-1:#020817;--hk-2:#010a21;--hk-3:#011031;--hk-4:#031a4f;--hk-5:#05246d;--hk-6:#052d8a;
  --hk-line:#0536a8;--hk-hot:#006fff;--hk-btn:#035ed6;--hk-btn2:#1644b0;--hk-btn3:#072e8b;
  --primary-color:#0061e0;--primary-rgb:0,97,224;--secondary-color:#2a86ff;--accent-color:#52c5ff;--border-color:#053ec5;
  --jackpot-primary:#0061e0;--jackpot-secondary:#2a86ff;--jackpot-primary-rgb:0,97,224;--jackpot-secondary-rgb:42,134,255;--jackpot-accent-rgb:60,145,255;
  --text-color:#fff;--text-secondary:#e9f3ff;--text-muted:#52c5ff;--text-accent:#52c5ff;
  --template-bg:var(--hk-3);
  --bg-dark:var(--hk-1);--bg-dark-darker:var(--hk-0);--bg-dark-lighter:var(--hk-3);--bg-dark-medium:var(--hk-4);--bg-surface:var(--hk-3);
  --bg-white-05:var(--hk-3);--bg-white-10:var(--hk-4);--bg-white-28:var(--hk-0);
  --primary-trans-3:var(--hk-3);--primary-trans-5:var(--hk-4);--primary-trans-8:var(--hk-0);
  --primary-trans-10:#05153b;--primary-trans-12:#071c4c;--primary-trans-15:#0a225c;--primary-trans-20:#0c296d;--primary-trans-25:#0e307d;
  --primary-pop-1:#05153b;--primary-pop-2:#071c4c;--primary-pop-3:#0a225c;
  --jackpot-trans-5:var(--hk-4);--jackpot-trans-10:#05153b;--jackpot-trans-15:#071c4c;--jackpot-trans-20:#0a225c;--jackpot-trans-25:#0c296d;
  --jackpot-gold-trans-5:var(--hk-4);--jackpot-gold-trans-10:#05153b;--jackpot-gold-trans-15:#071c4c;
  --jackpot-accent-trans-5:var(--hk-4);--jackpot-accent-trans-10:#05153b;--jackpot-accent-trans-15:#071c4c;--jackpot-accent-trans-20:#0a225c;--jackpot-accent-trans-25:#0c296d;
  --jackpot-pop-1:#05153b;--jackpot-pop-2:#071c4c;--jackpot-pop-3:#0a225c;--jackpot-gold-pop-1:#05153b;--jackpot-gold-pop-2:#071c4c;--jackpot-gold-pop-3:#0a225c;
  --bg-overlay:var(--hk-3);--bg-overlay-light:var(--hk-4);--bg-modal:var(--hk-3);
  --bg-card:var(--hk-3);--bg-card-hover:var(--hk-4);--bg-input:var(--hk-2);--bg-input-focus:var(--hk-3);
  --text-on-primary:#fff;--text-on-primary-rgb:255,255,255;--text-on-secondary:#fff;--text-on-accent:#011031;--text-on-gradient:#fff;
  --border-input:var(--hk-line);--divider-color:var(--hk-0);
  --status-success-bg:var(--hk-1);--status-warning-bg:var(--hk-1);--status-error-bg:#02133b;--error-bg:#02133b;
  --honeycomb-1:var(--hk-3);--honeycomb-2:var(--hk-4);--honeycomb-3:var(--hk-0);--honey-color-base:var(--hk-0);
  --skeleton-bg:var(--hk-3);--skeleton-border:var(--hk-0);
  --bg-gradient-dark-start:var(--hk-3);--bg-gradient-input-start:#011031cc;--bg-gradient-input-end:#031a4fcc;
  --bg-dark-custom-1:#01103199;--bg-dark-custom-2:#011031f2;--bg-dark-custom-3:#020817f2;
  --bg-gradient-modal-start:#011031f2;--bg-gradient-modal-mid:#031a4ff2;--bg-gradient-modal-end:#011031f2;
  --captcha-bg-start:var(--hk-3);--captcha-bg-mid:var(--hk-4);--captcha-bg-end:var(--hk-0);--captcha-border:var(--hk-hot);--captcha-text-start:#2a86ff;--captcha-text-end:#2a86ff;
  --placeholder-bg:var(--hk-3);--placeholder-rect:var(--hk-4);--placeholder-svg-bg:var(--hk-1);--placeholder-text:#2a86ff;
  --gradient-metallic-gold:linear-gradient(135deg,#021d5c,#0536a8 20%,#1a7dff 45%,#4d9aff 55%,#0061e0 75%,#05246d);
  /* latar halaman: hitam-marun dengan cahaya merah di sisi, seperti referensi */
  --bg-radial-primary-15:radial-gradient(circle 700px at 0% 30%,rgba(10,105,230,.30)0%,transparent 60%);
  --bg-radial-secondary-12:radial-gradient(circle 700px at 100% 70%,rgba(10,105,230,.28)0%,transparent 60%);
  --bg-radial-accent-08:radial-gradient(circle 500px at 50% 50%,rgba(3,39,123,.25)0%,transparent 70%);
  --bg-grid-pattern:linear-gradient(transparent,transparent),linear-gradient(transparent,transparent);
  --bg-base-gradient:linear-gradient(180deg,#020a1d 0%,#00050e 40%,#000612 70%,#010e2b 100%);
}
html{background-color:var(--hk-0)}
body:before{background:radial-gradient(600px at 8% 40%,rgba(20,122,255,.18)0,#0000 55%),radial-gradient(600px at 92% 60%,rgba(20,122,255,.16)0,#0000 55%)!important}
/* header: merah tua -> hitam, garis bawah merah menyala */
html body .nav-glass{background:linear-gradient(180deg,#072364 0,#041c55 45%,#021540 100%)!important;border-bottom:2px solid var(--hk-hot)!important}
html body header.nav-glass{background:linear-gradient(180deg,#06205c 0,#051436 50%,#020817 100%)!important}
/* menu bawah (HP) */
.floating-nav-container{background:linear-gradient(180deg,#06205cf5 0,#011031fa 55%,#020817fc 100%)!important;border:1px solid var(--hk-hot)!important;box-shadow:0 -4px 24px #000a,0 0 12px rgba(0,111,255,.35)!important}
.mobile-sidebar-header{background:linear-gradient(180deg,#06205cfa,#011031f5)!important}
/* notifikasi "Telah Berhasil Withdraw" & tombol kiri (skrip bawaan template) */
/* notifikasi "Berhasil Withdraw" (bgn/notif.js): kotak gelap berbingkai merah + logo bank */
#notifContainer .notification:not(.hkn){visibility:hidden}
#notifContainer .notification.hkn{display:flex!important;align-items:center;gap:12px;width:min(470px,92vw)!important;max-width:none!important;padding:7px 14px 7px 8px!important;border-radius:10px!important;
  background:linear-gradient(90deg,#050a17,#03060d)!important;border:1px solid #0544d5!important;box-shadow:0 6px 18px rgba(0,0,0,.55)!important;color:#fff!important}
#notifContainer .hkn-logo{width:30px;height:30px;flex:none;border-radius:6px;object-fit:cover;display:block}
#notifContainer .hkn-tx{font-size:13px;font-weight:700;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:640px){#notifContainer .notification.hkn{width:min(360px,92vw)!important;gap:10px;padding:6px 12px 6px 6px!important}#notifContainer .hkn-logo{width:26px;height:26px}#notifContainer .hkn-tx{font-size:12px}}
#left-buttons a{background:var(--hk-3)!important;border:1px solid var(--hk-hot);box-shadow:0 0 8px rgba(0,111,255,.45)}
/* panel bagian (Paling Banyak Dimainkan, Togel, Pertandingan, Pembayaran, Provider, info): merah tua bergradasi + bingkai merah menyala */
html body .unified-dashboard-card,html body .payment-methods-wrapper,html body .provider-game-wrapper,html body .info-card{background:linear-gradient(180deg,#031a4f 0%,#02133b 30%,#031a4f 70%,#05246d 100%)!important;border:2px solid #0541cd!important;box-shadow:0 0 14px rgba(0,111,255,.3),inset 0 1px 0 rgba(90,162,255,.18)!important}
/* kotak di dalam panel: merah gelap seperti baris "Hasil Terakhir" */
html body .toto-card{background:#011031!important;border:1px solid rgba(0,111,255,.45)!important}
html body .info-card .backdrop-blur-xl{background:#011031!important;border-color:rgba(0,111,255,.45)!important}
/* tombol pil di header (Promosi, Masuk, dll.): isi merah gelap, bingkai merah menyala, teks putih */
html body .nav-pill:not(.nav-pill-auth-secondary){background:linear-gradient(180deg,#0e2459,#081c4a)!important;border:1px solid #006fff!important;color:#fff!important}
/* teks sorotan: kuning emas (seperti referensi), judul artikel putih bercahaya merah, label tombol putih */
html body .nav-pill-auth-label,html body .auth-pill-label{color:#fff!important}
html body .toto-card-result,html body .toto-card-countdown,html body .rm-match-kick-value,html body .running-text span,html body .running-text-topbar span{color:#52c5ff!important}
html body .mobile-sidebar-section-eyebrow,html body .mobile-sidebar-action-label,html body .footer-links-title{color:#52c5ff!important}
html body .prose h1,html body .prose h2,html body .prose h3{color:#fff!important;text-shadow:0 0 10px rgba(0,111,255,.75)}
html body .prose a,html body .prose strong{color:#52c5ff!important}
html body .most-played-more,html body [class*=lihat-semua]{color:#52c5ff!important}
/* tombol samping (RTP dll.) lebih besar: gambarnya terbaca */
html body #left-buttons{gap:12px!important}
html body #left-buttons a{width:72px!important;height:72px!important;border-radius:16px!important}
@media (max-width:768px){html body #left-buttons a{width:58px!important;height:58px!important;border-radius:14px!important}}
/* panel Paling Banyak Dimainkan: kartu bawaan diganti kartu potret Hot Slot / Hot Casino (bgn/hotgames.js) */
html.hkh-on .most-played-wrapper>.most-played-games-section{display:none!important}
/* logo: kilau putih berjalan pelan dari huruf H ke akhir, berulang (dibatasi bentuk logo lewat mask) */
.navbar-logo-wrap,.mobile-sidebar-logo-wrap,.footer-logo{position:relative}
.navbar-logo-wrap:after,.mobile-sidebar-logo-wrap:after,.footer-logo:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.15) 46%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.15) 54%,transparent 58%) no-repeat;background-size:250% 100%;
  -webkit-mask:url(/logob77.webp) left center/contain no-repeat;mask:url(/logob77.webp) left center/contain no-repeat;animation:hk-logo-shine 4.5s linear infinite}
.footer-logo:after{-webkit-mask-position:center;mask-position:center}
@keyframes hk-logo-shine{0%{background-position:100% 0}65%,100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.navbar-logo-wrap:after,.mobile-sidebar-logo-wrap:after,.footer-logo:after{animation:none;background:none}}
/* tombol Download Aplikasi di bawah RTP (bgn/install.js) */
html body #left-buttons a.hk-app{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#062a7d,#010e2b)!important;border:1px solid #2a86ff;box-shadow:0 0 10px rgba(0,111,255,.45);text-decoration:none;cursor:pointer}
html body #left-buttons a.hk-app img{width:62%!important;height:62%!important;object-fit:contain;border-radius:10px;margin-top:-6px}
html body #left-buttons a.hk-app span{position:absolute;left:0;right:0;bottom:4px;text-align:center;color:#52c5ff;font:900 8.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.02em;text-shadow:0 1px 2px #000}
@media (max-width:768px){html body #left-buttons a.hk-app span{font-size:7px;bottom:3px}}
/* tombol DOWNLOAD APP: animasi (kilau menyapu, bingkai berdenyut, ikon berdetak, tulisan berkilau) */
html body #left-buttons a.hk-app{overflow:hidden;animation:hk-app-glow 2.2s ease-in-out infinite;background:radial-gradient(circle at 50% 38%,#0540c9 0%,#041f5c 55%,#010a1f 100%)!important}
html body #left-buttons a.hk-app:before{content:"";position:absolute;top:-30%;bottom:-30%;left:-80%;width:45%;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-22deg);animation:hk-app-sweep 3s ease-in-out infinite}
html body #left-buttons a.hk-app:after{content:"";position:absolute;inset:3px;border-radius:12px;border:1px solid rgba(82,197,255,.55);pointer-events:none;animation:hk-app-ring 2.2s ease-in-out infinite}
html body #left-buttons a.hk-app img{animation:hk-app-beat 2.2s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(40,133,255,.9))}
html body #left-buttons a.hk-app span{z-index:3;background:linear-gradient(90deg,#52c5ff 0%,#b0e5ff 45%,#52c5ff 55%,#52c5ff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:hk-app-text 2.6s linear infinite;text-shadow:none;filter:drop-shadow(0 1px 1px #000)}
@keyframes hk-app-glow{0%,100%{box-shadow:0 0 6px rgba(0,111,255,.45);border-color:#0541cd}50%{box-shadow:0 0 16px 3px rgba(30,128,255,.85);border-color:#4093ff}}
@keyframes hk-app-sweep{0%,55%{left:-80%}100%{left:140%}}
@keyframes hk-app-ring{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes hk-app-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes hk-app-text{0%{background-position:100% 0}100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){html body #left-buttons a.hk-app,html body #left-buttons a.hk-app:before,html body #left-buttons a.hk-app:after,html body #left-buttons a.hk-app img,html body #left-buttons a.hk-app span{animation:none}}
/* Menu akun model "Kartu bank digital" (bgn/umenu.js): saldo di kartu kaca biru neon (chip, BATAVIA77, nama & 4 digit), 4 tombol ikon bulat */
html body .user-menu-dropdown.um-bank{width:304px!important;padding:0 0 4px!important;border-radius:18px!important;background:linear-gradient(180deg,#071a42,#030b1f)!important;border:1px solid #2a86ff!important;box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 18px rgba(0,111,255,.3)!important}
html body .um-bank .user-menu-header{margin:0!important;padding:14px 14px 12px!important;border:0!important;background:transparent!important}
html body .um-bank .user-menu-avatar{border:2px solid #52c5ff!important;box-shadow:0 0 10px rgba(82,197,255,.45)!important}
html body .um-bank .user-menu-name{color:#fff!important;font-weight:900!important}
html body .um-bank .user-menu-username{color:#9cc8ff!important}
html body .um-bank .user-menu-tier-badge{background:rgba(82,197,255,.12)!important;border:1px solid rgba(82,197,255,.5)!important;color:#7ad3ff!important}
html body .um-bank .user-menu-balance{position:relative;overflow:hidden;margin:0 14px!important;padding:14px 16px 12px!important;border-radius:16px!important;aspect-ratio:1.7/1;display:flex!important;flex-direction:column;justify-content:space-between;
  background:radial-gradient(120% 140% at 100% 0%,rgba(82,197,255,.5),transparent 50%),radial-gradient(90% 120% at 0% 100%,rgba(0,40,140,.8),transparent 60%),linear-gradient(135deg,#1e6bff 0%,#0b3aa8 50%,#061a52 100%)!important;
  border:1px solid rgba(140,210,255,.55)!important;box-shadow:0 10px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.25)!important}
html body .um-bank .user-menu-balance:before{content:"";position:absolute;right:-40px;top:-60px;width:180px;height:180px;border-radius:50%;border:24px solid rgba(255,255,255,.06);pointer-events:none}
html body .um-bank .user-menu-balance:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 48%,transparent 60%);transform:translateX(-110%);animation:um-sheen 5s ease-in-out infinite;pointer-events:none}
@keyframes um-sheen{0%,55%{transform:translateX(-110%)}85%,100%{transform:translateX(110%)}}
html body .um-bank .um-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
html body .um-bank .um-chip{display:block;width:34px;height:25px;border-radius:6px;background:linear-gradient(135deg,#f3f6fb,#aab4c3 45%,#e9eef5 60%,#8e99aa);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
html body .um-bank .um-top .um-brand{font:900 13px/1 system-ui,sans-serif;letter-spacing:.08em;color:#fff;text-shadow:0 0 10px rgba(82,197,255,.8)}
html body .um-bank .user-menu-balance-label{color:#bfe3ff!important;letter-spacing:.18em;font-weight:800!important}
html body .um-bank .user-menu-balance-amount{color:#fff!important;font-size:25px!important;font-weight:900!important;text-shadow:0 2px 8px rgba(0,0,0,.4)}
html body .um-bank .user-menu-refresh{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.3)!important;color:#fff!important}
html body .um-bank .user-menu-service-pills{margin-top:4px!important;gap:6px!important}
html body .um-bank .user-menu-service-pill{padding:2px 8px!important;font-size:10px!important;background:rgba(0,10,40,.35)!important;border:1px solid rgba(140,210,255,.35)!important;color:#d6ecff!important}
html body .um-bank .um-foot{display:flex;align-items:center;gap:10px;margin-top:8px;font:700 12px/1 ui-monospace,Consolas,monospace;letter-spacing:.14em;color:#e6f3ff}
html body .um-bank .um-foot .um-holder{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .um-bank .um-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 10px 2px}
html body .um-bank .um-quick a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:#d6ecff;font-size:11px;font-weight:700}
html body .um-bank .um-quick i{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(42,134,255,.15);border:1px solid rgba(82,197,255,.5);color:#7ad3ff;transition:background .15s,transform .15s}
html body .um-bank .um-quick .um-dep i{background:linear-gradient(180deg,#2a86ff,#0b4fd6);border-color:#7ad3ff;color:#fff;box-shadow:0 0 12px rgba(42,134,255,.6)}
html body .um-bank .um-quick a:hover i{transform:translateY(-2px);background:rgba(42,134,255,.3)}
html body .um-bank .user-menu-info{margin:10px 14px 0!important;padding:4px 12px!important;border-radius:12px!important;background:rgba(0,20,60,.45)!important;border:1px solid rgba(82,197,255,.2)!important}
html body .um-bank .user-menu-info-label{color:#7ad3ff!important}
html body .um-bank .user-menu-actions{padding:12px 14px 12px!important;border:0!important}
@media (prefers-reduced-motion:reduce){html body .um-bank .user-menu-balance:after{animation:none;display:none}}
html body .um-vip .user-menu-balance-amount:before,html body .um-bank .user-menu-balance-amount:before{content:"Rp ";font-size:.62em;font-weight:800;opacity:.85}
