/* ================================================================
   PELUKBET — TOTAL VISUAL REMODEL 2026
   Dark premium / gold + red + aqua identity, responsive-first.
   Overrides only: existing RTP engine and provider JS stay untouched.
   ================================================================ */
:root{
  --pb-bg:#02070d;
  --pb-bg-2:#08111d;
  --pb-surface:#0b1623;
  --pb-surface-2:#112133;
  --pb-surface-3:#183049;
  --pb-gold:#20ace8;
  --pb-gold-2:#c6f2ff;
  --pb-red:#1573b1;
  --pb-red-2:#34c1ff;
  --pb-aqua:#45c8ff;
  --pb-aqua-2:#d3f6ff;
  --pb-green:#7ae0ff;
  --pb-text:#f7f8fb;
  --pb-soft:#b9c2cf;
  --pb-muted:#7f8a99;
  --pb-line:rgba(255,255,255,.08);
  --pb-gold-line:rgba(245,192,74,.28);
  --pb-shadow:0 24px 70px rgba(0,0,0,.42);
  --pb-radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--pb-bg)}
body{
  margin:0!important;
  min-height:100vh;
  color:var(--pb-text)!important;
  background:
    radial-gradient(circle at 10% 0%, rgba(69,200,255,.14), transparent 26%),
    radial-gradient(circle at 88% 8%, rgba(35,129,195,.16), transparent 24%),
    radial-gradient(circle at 50% 60%, rgba(49,186,255,.07), transparent 32%),
    linear-gradient(180deg,#02070d 0%,#06101b 34%,#030912 100%)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  animation:none!important;
  padding-bottom:96px!important;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.58;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}
.thunderstorm-overlay,.rain-container{display:none!important}
.bg-particle-container{opacity:.35!important}
.particle{filter:blur(6px)!important;animation-duration:25s!important}
.particle.p1,.particle.p3{background:var(--pb-gold)!important}
.particle.p2,.particle.p5{background:var(--pb-aqua)!important}
.particle.p4{background:var(--pb-red)!important}

/* top ticker */
.win-ticker-bar{
  height:38px!important;background:#080b11!important;border-bottom:1px solid var(--pb-line)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.25)!important;
}
.ticker-kapsul-item{color:#9ba7b6!important}
.ticker-tag{background:linear-gradient(135deg,var(--pb-gold-2),var(--pb-gold))!important;color:#2a1c00!important;border-radius:999px!important}
.t-user{color:var(--pb-aqua-2)!important}.t-win{color:var(--pb-gold-2)!important}.t-game{color:#fff!important}

/* hero */
header{
  width:min(1180px,calc(100% - 32px))!important;
  margin:28px auto 18px!important;
  padding:42px 42px 34px!important;
  border-radius:32px!important;
  position:relative!important;overflow:hidden!important;
  background:
    linear-gradient(125deg,rgba(7,17,29,.98),rgba(10,33,56,.98) 58%,rgba(18,101,163,.92))!important;
  border:1px solid rgba(255,255,255,.085)!important;
  box-shadow:var(--pb-shadow), inset 0 1px 0 rgba(255,255,255,.05)!important;
}
header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 7% 15%,rgba(66,216,255,.14),transparent 23%),
    radial-gradient(circle at 93% 0%,rgba(240,42,42,.18),transparent 28%),
    linear-gradient(90deg,transparent 0 72%,rgba(245,192,74,.035));
}
header::after{
  content:"";position:absolute;left:38px;right:38px;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--pb-aqua),transparent 30%,var(--pb-gold) 62%,var(--pb-red));
  opacity:.85;box-shadow:0 0 22px rgba(245,192,74,.35)
}
.logo-wrapper{position:relative;z-index:1;margin:0 auto 18px!important}
.site-logo{width:min(430px,86vw)!important;max-width:none!important;height:auto!important;filter:drop-shadow(0 12px 24px rgba(0,0,0,.42))!important}
header h1{position:relative;z-index:1;margin:2px 0 8px!important;font-size:clamp(26px,4vw,43px)!important;letter-spacing:.5px!important;color:#fff!important;background:none!important;-webkit-text-fill-color:initial!important;text-shadow:none!important}
.brand-title{color:var(--pb-gold-2)!important;letter-spacing:3px!important}
.hero-subtitle{position:relative;z-index:1;max-width:720px!important;margin:0 auto!important;color:var(--pb-soft)!important;line-height:1.7!important;font-size:14px!important}
.hero-badges{position:relative;z-index:1;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:20px auto 8px}
.hero-badges span{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);font-size:10px;font-weight:800;letter-spacing:1.25px;color:#dce3ec}
.hero-badges span:first-child{color:#aef6cf;border-color:rgba(49,216,137,.25);background:rgba(49,216,137,.08)}

.live-clock-dashboard{
  position:relative;z-index:1;width:min(600px,100%)!important;margin:26px auto 0!important;
  overflow:hidden;border-radius:18px!important;background:rgba(5,8,13,.68)!important;
  border:1px solid rgba(255,255,255,.075)!important;box-shadow:0 18px 40px rgba(0,0,0,.28)!important;
}
.clock-panel-top{padding:11px 14px!important;color:#aab5c3!important;border-bottom:1px solid var(--pb-line)!important;font-size:10px!important;letter-spacing:.8px!important}
.clock-panel-bottom{padding:14px!important;display:flex!important;justify-content:center!important;gap:14px!important;align-items:center!important}
.timer-label{color:var(--pb-soft)!important;font-size:10px!important;letter-spacing:1px!important}
.neon-timer-digital{color:var(--pb-gold-2)!important;font-size:22px!important;text-shadow:0 0 16px rgba(245,192,74,.24)!important;font-variant-numeric:tabular-nums}

/* Overview */
.quick-overview{width:min(1180px,calc(100% - 32px));margin:0 auto 18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.overview-card{min-height:108px;padding:18px 20px;border-radius:20px;background:linear-gradient(180deg,rgba(19,25,35,.95),rgba(10,14,20,.96));border:1px solid var(--pb-line);box-shadow:0 14px 32px rgba(0,0,0,.20);display:flex;flex-direction:column;justify-content:center}
.overview-kicker{font-size:9px;font-weight:900;letter-spacing:1.6px;color:var(--pb-muted);margin-bottom:5px}.overview-card strong{font-size:19px;letter-spacing:.7px;color:#fff}.overview-card:nth-child(1) strong{color:#79efb2}.overview-card:nth-child(2) strong{color:var(--pb-gold-2)}.overview-card:nth-child(3) strong{color:var(--pb-aqua-2)}.overview-card small{margin-top:4px;color:var(--pb-muted);font-size:11px}

/* main and provider tabs */
#rtp-container{width:min(1180px,calc(100% - 32px))!important;margin:0 auto!important}
.provider-nav-tabs {
  position: sticky !important;
  top: 8px !important;
  
  /* Tambahkan ini untuk meluruskan ke tengah */
  left: 0 !important;
  right: 0 !important;
  max-width: max-content !important; /* Membatasi lebar sesuai isi agar bisa center, atau gunakan persentase seperti 90% */
  margin: 0 auto 18px !important;    /* Mengubah margin kiri-kanan menjadi 'auto' */
  
  z-index: 1000 !important;
  display: flex !important;
  gap: 8px !important;
  padding: 9px !important;
  border-radius: 18px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  background: rgba(10,13,19,.82) !important;
  backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.34) !important;
}

.provider-nav-tabs::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  flex: 0 0 auto !important;
  border-radius: 12px !important;
  padding: 11px 17px !important;
  background: transparent !important;
  color: #8f9aa9 !important;
  border: 1px solid transparent !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
  box-shadow: none !important;
}
.tab-btn:hover{background:rgba(255,255,255,.05)!important;color:#fff!important;border-color:rgba(255,255,255,.07)!important}
.tab-btn.active{background:linear-gradient(135deg,#2a210c,#4a330c)!important;color:var(--pb-gold-2)!important;border-color:rgba(245,192,74,.28)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 18px rgba(0,0,0,.22)!important}

/* provider block */
.provider-section{padding:24px!important;margin-bottom:18px!important;border-radius:var(--pb-radius)!important;background:linear-gradient(180deg,rgba(15,20,29,.97),rgba(8,11,17,.98))!important;border:1px solid var(--pb-line)!important;box-shadow:0 20px 52px rgba(0,0,0,.26)!important}
.provider-section h2{display:flex!important;align-items:center!important;justify-content:space-between!important;margin:0 0 20px!important;padding:0 0 16px!important;border-bottom:1px solid var(--pb-line)!important;color:#fff!important;font-size:18px!important;letter-spacing:.25px!important}
.provider-section h2::before{content:"PELUKBET PROVIDER";font-size:8px;letter-spacing:1.7px;color:var(--pb-gold);border:1px solid var(--pb-gold-line);background:rgba(245,192,74,.06);padding:6px 9px;border-radius:999px;margin-right:10px}
.provider-section h2::after{content:"LIVE"!important;position:static!important;font-size:9px!important;font-weight:900!important;letter-spacing:1.3px!important;color:#93f5bf!important;padding:6px 9px!important;border-radius:999px!important;background:rgba(49,216,137,.08)!important;border:1px solid rgba(49,216,137,.20)!important;box-shadow:none!important}
.game-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important}
.game-card{position:relative!important;overflow:hidden!important;border-radius:18px!important;background:#0d121a!important;border:1px solid rgba(255,255,255,.075)!important;box-shadow:0 12px 28px rgba(0,0,0,.30)!important;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important}
.game-card:hover{transform:translateY(-5px)!important;border-color:rgba(245,192,74,.32)!important;box-shadow:0 20px 35px rgba(0,0,0,.38),0 0 0 1px rgba(245,192,74,.05)!important}
.game-card::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--pb-gold),transparent);opacity:.0;transition:opacity .2s}.game-card:hover::before{opacity:.65}
.game-card::after{display:none!important}
.img-container{aspect-ratio:1/1!important;height:auto!important;background:linear-gradient(145deg,#151c26,#090c12)!important;overflow:hidden!important}
.img-container img{width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .32s ease!important}.game-card:hover .img-container img{transform:scale(1.045)}
.game-info{padding:13px!important}.game-info h3{min-height:34px!important;margin:0 0 10px!important;color:#f8f9fb!important;font-size:12px!important;line-height:1.35!important;font-weight:800!important}
.badge-status{top:9px!important;right:9px!important;padding:5px 8px!important;border-radius:999px!important;background:linear-gradient(135deg,var(--pb-red-2),var(--pb-red))!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff!important;font-size:8px!important;letter-spacing:.8px!important;box-shadow:0 8px 18px rgba(240,42,42,.26)!important}
.rtp-bar-container{height:22px!important;margin:0 0 10px!important;border-radius:999px!important;background:#06080d!important;border:1px solid rgba(255,255,255,.07)!important;overflow:hidden!important;box-shadow:inset 0 2px 8px rgba(0,0,0,.55)!important}
.rtp-bar{border-radius:999px!important;box-shadow:none!important}.rtp-text{font-size:9px!important;font-weight:900!important;letter-spacing:.25px!important;color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.75)!important}
.card-buttons{gap:7px!important}.btn-mainkan,.btn-pola{border-radius:10px!important;padding:9px 6px!important;font-size:9px!important;font-weight:900!important;letter-spacing:.4px!important;text-transform:uppercase!important;transition:.2s!important}
.btn-mainkan{background:linear-gradient(135deg,#f6d46d,#d69d26)!important;color:#241700!important;border:1px solid rgba(255,235,164,.45)!important;box-shadow:0 8px 16px rgba(201,144,27,.14)!important}.btn-mainkan:hover{filter:brightness(1.06)!important;color:#241700!important;transform:translateY(-1px)}
.btn-pola{background:rgba(66,216,255,.055)!important;color:#9beeff!important;border:1px solid rgba(66,216,255,.17)!important}.btn-pola:hover{background:rgba(66,216,255,.11)!important;color:#d8f9ff!important}

/* Modal */
.modal-overlay{background:rgba(2,4,7,.86)!important;backdrop-filter:blur(14px)!important}.modal-box{background:linear-gradient(180deg,#121923,#090d13)!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:26px!important;box-shadow:0 35px 90px rgba(0,0,0,.62)!important}.modal-header-text h2{color:#fff!important}.modal-header-text h4{color:var(--pb-gold)!important}.modal-close-btn{background:#222a36!important;color:#fff!important;border:1px solid var(--pb-line)!important}.modal-action-btn{background:linear-gradient(135deg,#f8d66d,#d59a22)!important;color:#281a00!important;border:none!important;border-radius:12px!important;box-shadow:0 12px 25px rgba(213,154,34,.16)!important}
.jam-gacor-box,.pola-item-box,.warning-pola-box{background:#0b1017!important;border:1px solid var(--pb-line)!important;border-radius:14px!important;box-shadow:none!important}.warning-pola-box{border-color:rgba(240,42,42,.32)!important;background:rgba(240,42,42,.055)!important}.jam-title,.pola-label{color:var(--pb-soft)!important}.jam-digital-text{color:var(--pb-gold-2)!important}.pola-number-display{color:var(--pb-aqua-2)!important}

/* Footer */
.seo-footer{width:min(1180px,calc(100% - 32px))!important;margin:22px auto 0!important;padding:0 0 28px!important;background:transparent!important;border:none!important}.footer-table-container,.footer-seo-intro,.footer-block{background:linear-gradient(180deg,rgba(15,20,29,.96),rgba(9,12,18,.98))!important;border:1px solid var(--pb-line)!important;border-radius:18px!important;box-shadow:0 16px 34px rgba(0,0,0,.20)!important}.footer-table-container{padding:18px!important;margin-bottom:12px!important}.footer-table-container h3,.footer-block h3{color:#fff!important}.seo-table{border-radius:12px!important;overflow:hidden!important}.seo-table th{background:#151c26!important;color:var(--pb-gold-2)!important;border-color:var(--pb-line)!important}.seo-table td{color:var(--pb-soft)!important;border-color:var(--pb-line)!important}.footer-seo-intro{padding:18px!important;margin-bottom:12px!important}.footer-seo-intro p,.footer-block p,.footer-links li a{color:#8f9aa9!important}.footer-seo-intro a,.footer-links li a:hover{color:var(--pb-aqua-2)!important}.footer-container{grid-template-columns:1.45fr 1fr 1.15fr!important;gap:12px!important}.footer-block{padding:18px!important}.footer-block h3::after{background:linear-gradient(90deg,var(--pb-gold),transparent)!important;box-shadow:none!important}.footer-bottom{border-top:1px solid var(--pb-line)!important;margin-top:18px!important}.footer-bottom p{color:#66717f!important}

/* Floating nav */
.floating-bottom-nav{left:50%!important;bottom:14px!important;transform:translateX(-50%)!important;width:min(600px,calc(100% - 24px))!important;height:70px!important;border-radius:22px!important;padding:7px!important;background:rgba(9,12,18,.88)!important;backdrop-filter:blur(18px)!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 20px 50px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.04)!important}.nav-item{border-radius:15px!important;gap:2px!important}.nav-item:hover{transform:translateY(-2px)!important;background:rgba(255,255,255,.035)!important}.nav-icon-circle{width:34px!important;height:34px!important;margin:0!important;border-radius:11px!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:none!important}.nav-custom-img{width:22px!important;height:22px!important;object-fit:contain!important}.icon-wa{background:rgba(49,216,137,.11)!important}.icon-daftar{background:rgba(245,192,74,.11)!important}.icon-login{background:rgba(240,42,42,.11)!important}.icon-roda{background:rgba(66,216,255,.11)!important}.nav-text{font-size:8px!important;letter-spacing:.6px!important}.text-wa{color:#82f2b8!important}.text-daftar{color:var(--pb-gold-2)!important}.text-login{color:#ff8585!important}.text-roda{color:var(--pb-aqua-2)!important}

/* responsive */
@media(max-width:1024px){.game-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:800px){
  header{width:calc(100% - 20px)!important;margin:16px auto 12px!important;padding:30px 18px 26px!important;border-radius:24px!important}
  header::after{left:20px;right:20px}.quick-overview,#rtp-container,.seo-footer{width:calc(100% - 20px)!important}.quick-overview{gap:8px}.overview-card{padding:14px;min-height:92px;border-radius:16px}.overview-card strong{font-size:15px}.overview-card small{font-size:9px}.provider-section{padding:14px!important;border-radius:20px!important}.provider-section h2{font-size:15px!important}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}.footer-container{grid-template-columns:1fr!important}.provider-nav-tabs{top:6px!important}
}
@media(max-width:560px){
  body{padding-bottom:90px!important}.site-logo{width:min(330px,88vw)!important}header h1{font-size:25px!important}.hero-subtitle{font-size:12px!important}.hero-badges{gap:6px}.hero-badges span{font-size:8px;padding:7px 9px}.clock-panel-bottom{flex-direction:column!important;gap:4px!important}.quick-overview{grid-template-columns:repeat(3,1fr)}.overview-card{padding:11px 9px;min-height:84px}.overview-kicker{font-size:7px}.overview-card strong{font-size:12px}.overview-card small{font-size:8px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.game-info{padding:10px!important}.game-info h3{font-size:11px!important}.provider-section h2::before{display:none}.floating-bottom-nav{bottom:8px!important;width:calc(100% - 16px)!important;height:66px!important;border-radius:18px!important}.nav-icon-circle{width:31px!important;height:31px!important}.nav-custom-img{width:20px!important;height:20px!important}.seo-table{min-width:640px}.footer-table-container{overflow-x:auto!important}}
@media(max-width:360px){.quick-overview{grid-template-columns:1fr}.overview-card{min-height:70px}.game-grid{grid-template-columns:1fr!important}}


/* ================================================================
   PELUKBET BLUE THEME EXTENSION — inspired by user reference image
   ================================================================ */
.pelukbet-utilitybar{
  position:sticky;top:0;z-index:1200;width:100%;background:#05080d;border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 24px;box-shadow:0 10px 24px rgba(0,0,0,.18)
}
.utility-left,.utility-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tg-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;background:linear-gradient(135deg,#1aa1df,#0d85c2);color:#fff!important;text-decoration:none;font-weight:800;font-size:14px;box-shadow:0 8px 20px rgba(18,149,215,.22)}
.mini-icon,.country-badge{display:inline-flex;align-items:center;justify-content:center;color:#fff;opacity:.92;font-size:17px;min-width:18px}
.auth-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 18px;border-radius:999px;text-decoration:none!important;font-weight:900;letter-spacing:.5px;text-transform:uppercase;font-size:13px}
.auth-login{background:linear-gradient(135deg,#383d43,#22272d);color:#fff!important}
.auth-register{background:linear-gradient(135deg,#1fb2ef,#0c89ca);color:#fff!important;box-shadow:0 8px 20px rgba(15,150,220,.22)}
.pelukbet-topnav{width:100%;background:linear-gradient(90deg,#3a9fcf 0%,#52c0e9 52%,#208ac2 100%);box-shadow:inset 0 -1px 0 rgba(255,255,255,.12)}
.topnav-inner{width:min(1240px,calc(100% - 24px));margin:0 auto;display:flex;align-items:center;gap:24px;padding:18px 6px}
.topnav-logo img{width:150px;height:auto;display:block;filter:drop-shadow(0 6px 16px rgba(0,0,0,.22))}
.topnav-menu{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.topnav-menu::-webkit-scrollbar{display:none}
.topnav-menu a{position:relative;padding:0 18px;color:#ecfbff!important;text-decoration:none!important;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;line-height:1}
.topnav-menu a+a{border-left:1px solid rgba(255,255,255,.22)}
.topnav-menu a:hover{color:#fff!important;text-shadow:0 0 12px rgba(255,255,255,.18)}

header{margin-top:24px!important;background:linear-gradient(135deg,rgba(6,18,33,.98),rgba(9,29,48,.98) 58%,rgba(14,91,146,.92))!important}
header::before{
  background:
    radial-gradient(circle at 8% 18%,rgba(69,200,255,.18),transparent 22%),
    radial-gradient(circle at 92% 0%,rgba(155,233,255,.18),transparent 25%),
    linear-gradient(90deg,transparent 0 68%,rgba(188,241,255,.05));
}
.brand-title{color:#d8f6ff!important}
.live-clock-dashboard{background:rgba(4,11,19,.75)!important;border-color:rgba(132,213,255,.18)!important}
.provider-nav-tabs{top:56px!important;background:rgba(6,14,24,.84)!important;border-color:rgba(133,214,255,.16)!important}
.tab-btn.active{background:linear-gradient(135deg,#0f4468,#1676ab)!important;color:#dff9ff!important;border-color:rgba(135,228,255,.26)!important}
.provider-section{background:linear-gradient(180deg,rgba(8,19,31,.98),rgba(4,11,19,.99))!important;border-color:rgba(136,214,255,.10)!important}
.provider-section h2::before{color:#9be6ff;background:rgba(69,200,255,.06);border-color:rgba(69,200,255,.22)}
.game-card{background:linear-gradient(180deg,#091321,#050c14)!important;border-color:rgba(136,214,255,.10)!important}
.game-card:hover{border-color:rgba(136,214,255,.33)!important;box-shadow:0 20px 35px rgba(0,0,0,.38),0 0 0 1px rgba(69,200,255,.09)!important}
.btn-mainkan{background:linear-gradient(135deg,#22b5f2,#118ccc)!important;color:#fff!important;border-color:rgba(211,246,255,.32)!important;box-shadow:0 10px 20px rgba(17,140,204,.22)!important}
.btn-pola{background:rgba(255,255,255,.04)!important;border-color:rgba(132,213,255,.15)!important;color:#bdefff!important}
.footer-table-container,.footer-seo-intro,.footer-block{background:linear-gradient(180deg,rgba(7,18,30,.96),rgba(4,11,19,.98))!important;border-color:rgba(136,214,255,.10)!important}
.seo-table th{background:#0d1a29!important;color:#c6f2ff!important}
.floating-bottom-nav{background:rgba(5,12,20,.90)!important;border-color:rgba(136,214,255,.12)!important}
.icon-daftar,.icon-login,.icon-roda{background:rgba(69,200,255,.10)!important}.text-daftar,.text-login,.text-roda{color:#d4f7ff!important}

@media(max-width:900px){
  .pelukbet-utilitybar{padding:10px 12px;gap:8px}
  .tg-pill{padding:9px 12px;font-size:13px}
  .topnav-inner{width:calc(100% - 16px);gap:16px;padding:14px 4px}
  .topnav-logo img{width:128px}
  .topnav-menu a{padding:0 12px;font-size:12px}
}
@media(max-width:640px){
  .pelukbet-utilitybar{padding:10px 10px;align-items:flex-start;flex-direction:column}
  .utility-right{width:100%;justify-content:flex-end}
  .topnav-inner{flex-direction:column;align-items:flex-start;gap:10px}
  .topnav-menu{width:100%;padding-bottom:4px}
  .topnav-menu a{padding:0 10px;font-size:11px}
  .provider-nav-tabs{top:98px!important}
}


/* ================================================================
   FINAL CLEANUP  — TOTAL RAPIH BLUE DOMINANT THEME
   ================================================================ */
:root{--sticky-offset:118px}
body{padding-bottom:104px!important}
a{text-decoration:none}

/* auto device classes */
html.device-mobile .desktop-only{display:none!important}
html.device-desktop .mobile-only{display:none!important}

/* utility/header/nav */
.pelukbet-utilitybar{backdrop-filter:blur(14px);position:sticky;top:0}
.tg-pill,.auth-btn{transition:transform .2s ease, filter .2s ease, box-shadow .2s ease}
.tg-pill:hover,.auth-btn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.pelukbet-topnav{position:sticky;top:52px;z-index:1190}
.topnav-inner{justify-content:space-between}
.topnav-menu{flex:1;justify-content:flex-start}
.topnav-menu a::after{content:'';position:absolute;left:18px;right:18px;bottom:-10px;height:2px;border-radius:2px;background:rgba(255,255,255,.85);transform:scaleX(0);transform-origin:left;transition:transform .22s ease, opacity .22s ease;opacity:.0}
.topnav-menu a:hover::after{transform:scaleX(1);opacity:.75}

/* hero */
header{padding:44px 40px 34px!important}
header .site-logo{max-width:390px}
.hero-actions{position:relative;z-index:1;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:18px auto 0}
.hero-btn{display:inline-flex;align-items:center;justify-content:center;min-width:154px;height:44px;padding:0 18px;border-radius:999px;font-size:13px;font-weight:900;letter-spacing:.55px;text-transform:uppercase;transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;border:1px solid transparent}
.hero-btn:hover{transform:translateY(-2px);filter:brightness(1.03)}
.hero-btn-primary{background:linear-gradient(135deg,#26b8f4,#1189c8);color:#fff!important;box-shadow:0 12px 26px rgba(17,137,200,.28)}
.hero-btn-secondary{background:rgba(255,255,255,.055);border-color:rgba(146,224,255,.18);color:#dff8ff!important}
.hero-btn-ghost{background:rgba(0,0,0,.20);border-color:rgba(255,255,255,.10);color:#c9efff!important}
.live-clock-dashboard{margin-top:24px!important}

/* highlight row */
.promo-highlight{width:min(1180px,calc(100% - 32px));margin:0 auto 18px;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:20px;background:linear-gradient(135deg,rgba(8,20,32,.98),rgba(11,31,49,.98) 60%,rgba(25,111,173,.94));border:1px solid rgba(151,228,255,.15);box-shadow:0 18px 40px rgba(0,0,0,.24)}
.promo-chip{flex:0 0 auto;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);font-size:10px;font-weight:900;letter-spacing:1.4px;color:#dff8ff;text-transform:uppercase}
.promo-text{display:flex;flex-direction:column;gap:3px}
.promo-text strong{font-size:15px;color:#fff}
.promo-text span{font-size:12px;line-height:1.65;color:#b9dcee}

/* content area */
.provider-nav-tabs{top:var(--sticky-offset)!important;padding:10px!important;border-radius:20px!important}
.provider-section{padding:20px!important}
.provider-section h2{gap:10px;flex-wrap:wrap}
.game-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:16px!important}
.game-card{border-radius:20px!important}
.game-info{padding:14px!important}
.game-info h3{font-size:12px!important;min-height:36px!important}
.badge-status{font-size:8px!important}
.rtp-bar-container{height:21px!important}
.card-buttons{display:grid!important;grid-template-columns:1fr 1fr!important}
.btn-mainkan,.btn-pola{min-height:38px!important;display:flex!important;align-items:center!important;justify-content:center!important}

/* footer cleaner */
.seo-footer{padding-bottom:18px!important}
.footer-container{display:grid!important}
.footer-links{padding-left:16px!important}
.footer-links li{margin-bottom:8px!important}

/* floating nav */
.floating-bottom-nav{height:76px!important;padding:8px!important}
.nav-item{min-width:0!important}
.nav-text{margin-top:4px!important}

/* responsive tuning */
@media (max-width: 1100px){
  .game-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media (max-width: 900px){
  .pelukbet-topnav{top:52px}
  .topnav-menu a{font-size:12px}
  header{padding:34px 24px 28px!important}
  .promo-highlight{padding:14px 16px}
}
@media (max-width: 768px){
  :root{--sticky-offset:138px}
  .pelukbet-topnav{top:88px}
  .topnav-inner{padding:12px 4px!important}
  .topnav-logo img{width:122px!important}
  header{padding:28px 18px 24px!important;border-radius:24px!important}
  header h1{font-size:24px!important}
  .hero-subtitle{max-width:100%!important}
  .hero-actions{gap:8px}
  .hero-btn{min-width:unset;width:calc(50% - 6px);font-size:11px;height:42px;padding:0 10px}
  .hero-btn-ghost{width:100%}
  .quick-overview{grid-template-columns:1fr!important}
  .overview-card{min-height:78px!important}
  .promo-highlight{width:calc(100% - 20px);flex-direction:column;align-items:flex-start;gap:10px;border-radius:16px}
  .provider-nav-tabs{top:var(--sticky-offset)!important}
  .provider-section{padding:14px!important}
  .provider-section h2{font-size:14px!important}
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .floating-bottom-nav{height:68px!important}
}
@media (max-width: 480px){
  .pelukbet-utilitybar{position:sticky;top:0;padding:10px 10px!important}
  .utility-left{gap:8px!important}
  .tg-pill{font-size:12px!important;padding:9px 11px!important}
  .mini-icon,.country-badge{font-size:14px!important}
  .utility-right{width:100%!important;justify-content:space-between!important}
  .auth-btn{flex:1;height:38px;font-size:12px}
  .pelukbet-topnav{top:96px}
  .topnav-menu a{padding:0 9px!important;font-size:10px!important}
  .site-logo{width:min(280px,88vw)!important}
  .hero-badges span{font-size:7px!important}
  .hero-btn{width:100%!important}
  .overview-card strong{font-size:14px!important}
  .promo-text strong{font-size:14px}
  .promo-text span{font-size:11px}
  .provider-section h2::after{font-size:8px!important}
  .game-grid{grid-template-columns:1fr 1fr!important}
  .game-info h3{font-size:10px!important;min-height:30px!important}
  .btn-mainkan,.btn-pola{font-size:8px!important;min-height:35px!important}
  .floating-bottom-nav{width:calc(100% - 12px)!important;bottom:6px!important}
  .nav-icon-circle{width:30px!important;height:30px!important}
  .nav-custom-img{width:18px!important;height:18px!important}
  .nav-text{font-size:7px!important}
}
@media (max-width: 380px){
  .game-grid{grid-template-columns:1fr!important}
}


/* ================================================================
   TOPBAR SIMPLIFIED — remove telegram/icons, keep login/register only
   ================================================================ */
:root{--sticky-offset:102px}
.utility-left,.tg-pill,.mini-icon,.country-badge{display:none!important}
.pelukbet-utilitybar{
  justify-content:flex-end!important;
  min-height:56px!important;
  padding:10px 18px!important;
  gap:0!important;
}
.utility-right{
  width:auto!important;
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:12px!important;
}
.auth-btn{
  min-width:112px;
  height:38px!important;
  padding:0 20px!important;
}
.pelukbet-topnav{
  top:56px!important;
}
.topnav-inner{
  align-items:center!important;
  min-height:58px;
  padding:14px 6px!important;
}
.topnav-logo{
  flex:0 0 auto;
}
.topnav-menu{
  align-items:center!important;
}
header{
  margin-top:18px!important;
}
.provider-nav-tabs{
  top:var(--sticky-offset)!important;
}
@media (max-width: 768px){
  :root{--sticky-offset:100px}
  .pelukbet-utilitybar{
    padding:10px 12px!important;
    min-height:54px!important;
  }
  .utility-right{
    width:100%!important;
    justify-content:flex-end!important;
    gap:10px!important;
  }
  .auth-btn{
    min-width:102px;
    flex:0 0 auto!important;
    height:36px!important;
    font-size:12px!important;
  }
  .pelukbet-topnav{
    top:54px!important;
  }
  .topnav-inner{
    width:calc(100% - 14px)!important;
    gap:12px!important;
    padding:12px 2px!important;
  }
  .topnav-logo img{
    width:120px!important;
  }
}
@media (max-width: 480px){
  :root{--sticky-offset:96px}
  .pelukbet-utilitybar{
    padding:8px 10px!important;
    min-height:50px!important;
  }
  .utility-right{
    width:100%!important;
    justify-content:flex-end!important;
    gap:8px!important;
  }
  .auth-btn{
    min-width:92px;
    height:34px!important;
    padding:0 16px!important;
    font-size:11px!important;
  }
  .pelukbet-topnav{
    top:50px!important;
  }
  .topnav-inner{
    flex-direction:row!important;
    align-items:center!important;
    gap:10px!important;
    padding:10px 2px!important;
  }
  .topnav-menu{
    width:auto!important;
    flex:1!important;
    padding-bottom:0!important;
  }
  .topnav-menu a{
    padding:0 8px!important;
    font-size:10px!important;
  }
}


/* ================================================================
   CLEAN TOP AREA UPDATE — remove telegram/icons, keep login/register
   ================================================================ */
.pelukbet-utilitybar.simple-utilitybar{
  position:sticky;top:0;z-index:1300;
  justify-content:flex-end!important;
  padding:12px 18px!important;
  min-height:58px;
}
.pelukbet-utilitybar.simple-utilitybar .utility-right{
  width:100%;display:flex;justify-content:flex-end;align-items:center;gap:12px;
}
.pelukbet-utilitybar.simple-utilitybar::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(100,207,255,.35),transparent);
}
.pelukbet-topnav{position:sticky;top:58px;z-index:1250}
.topnav-inner{
  width:min(1240px,calc(100% - 28px))!important;
  justify-content:flex-start!important;
  gap:26px!important;
  padding:15px 4px!important;
}
.topnav-logo{display:flex;align-items:center;flex:0 0 auto}
.topnav-menu{flex:1 1 auto;align-items:center!important}
.topnav-menu a{display:inline-flex;align-items:center;height:18px}
header{
  margin-top:18px!important;
  width:min(1240px,calc(100% - 28px))!important;
}
.quick-overview,#rtp-container,.seo-footer{width:min(1240px,calc(100% - 28px))!important}
.provider-nav-tabs{top:112px!important}
@media(max-width:900px){
  .pelukbet-utilitybar.simple-utilitybar{padding:10px 14px!important;min-height:54px}
  .topnav-inner{width:calc(100% - 18px)!important;gap:16px!important;padding:13px 2px!important}
  header,.quick-overview,#rtp-container,.seo-footer{width:calc(100% - 18px)!important}
  .provider-nav-tabs{top:104px!important}
}
@media(max-width:640px){
  .pelukbet-utilitybar.simple-utilitybar{padding:10px 12px!important;min-height:auto}
  .pelukbet-utilitybar.simple-utilitybar .utility-right{justify-content:flex-end!important}
  .auth-btn{height:36px;padding:0 16px;font-size:12px}
  .pelukbet-topnav{top:56px!important}
  .topnav-inner{flex-direction:column!important;align-items:flex-start!important;gap:8px!important;padding:12px 0!important}
  .topnav-menu{width:100%;padding-bottom:2px}
  .provider-nav-tabs{top:118px!important}
}


/* ================================================================
   FRESH BLUE REBUILD — brighter, cleaner, more minimal
   ================================================================ */
:root{
  --sticky-offset:102px;
  --pb-bg:#e9f7ff;
  --pb-bg-soft:#d7f0ff;
  --pb-navy:#123a5b;
  --pb-blue:#3ab6ec;
  --pb-blue-2:#6dd4ff;
  --pb-blue-3:#aee8ff;
  --pb-card:#ffffff;
  --pb-card-2:#f3fbff;
  --pb-line2:rgba(39,146,201,.15);
  --pb-text-dark:#12344f;
  --pb-text-soft:#4d718a;
}
html{background:linear-gradient(180deg,#eefaff 0%,#dff5ff 100%)!important}
body{
  color:var(--pb-text-dark)!important;
  background:
    radial-gradient(circle at 0% 0%, rgba(86,200,255,.34), transparent 22%),
    radial-gradient(circle at 100% 12%, rgba(125,214,255,.33), transparent 25%),
    radial-gradient(circle at 50% 22%, rgba(173,231,255,.42), transparent 32%),
    linear-gradient(180deg,#eaf8ff 0%,#d9f1ff 24%,#c6eaff 100%)!important;
}
body::before{opacity:.18!important;background-size:42px 42px!important}
.bg-particle-container{opacity:.12!important}
.logo-wrapper{margin-bottom:12px!important}
.site-logo{width:min(320px,82vw)!important;filter:drop-shadow(0 8px 16px rgba(26,125,180,.18))!important}

.pelukbet-utilitybar{
  background:rgba(8,31,53,.96)!important;
  border-bottom:1px solid rgba(169,229,255,.20)!important;
  box-shadow:0 10px 24px rgba(7,52,88,.12)!important;
}
.auth-login{background:linear-gradient(135deg,#375061,#233647)!important}
.auth-register{background:linear-gradient(135deg,#38b7ee,#1698d8)!important;box-shadow:0 10px 22px rgba(22,152,216,.20)!important}

.pelukbet-topnav{
  background:linear-gradient(90deg,#5bc4f0 0%,#78d4fb 52%,#4db8eb 100%)!important;
  box-shadow:0 8px 18px rgba(67,171,223,.15)!important;
}
.topnav-menu a{color:#f7fdff!important;font-weight:800!important}
.topnav-menu a+a{border-left:1px solid rgba(255,255,255,.18)!important}

header{
  width:min(1240px,calc(100% - 28px))!important;
  margin:18px auto 16px!important;
  padding:30px 28px 26px!important;
  border-radius:30px!important;
  background:
    linear-gradient(135deg,rgba(245,252,255,.95) 0%,rgba(222,246,255,.97) 48%,rgba(164,224,255,.92) 100%)!important;
  border:1px solid rgba(96,189,236,.22)!important;
  box-shadow:0 20px 55px rgba(47,136,186,.12)!important;
}
header::before{
  background:
    radial-gradient(circle at 8% 14%,rgba(129,223,255,.35),transparent 22%),
    radial-gradient(circle at 93% 9%,rgba(88,192,237,.28),transparent 26%),
    linear-gradient(90deg,transparent 0 70%,rgba(255,255,255,.24));
}
header::after{
  left:24px!important;right:24px!important;height:1px!important;
  background:linear-gradient(90deg,transparent,#67cfff 16%,#35b6ef 48%,#a2e3ff 82%,transparent)!important;
  box-shadow:none!important;opacity:.95!important;
}
header h1{color:#0b3555!important;font-size:clamp(30px,4vw,40px)!important;letter-spacing:.4px!important;margin-bottom:10px!important}
.brand-title{color:#129fdc!important}
.hero-subtitle{max-width:690px!important;color:#4c6d86!important;font-size:14px!important;line-height:1.75!important}
.hero-badges{gap:10px!important;margin-top:18px!important}
.hero-badges span{
  color:#177bb0!important;
  background:rgba(255,255,255,.6)!important;
  border:1px solid rgba(72,178,225,.22)!important;
  box-shadow:0 8px 20px rgba(57,168,219,.08);
  font-size:10px!important;
}
.hero-actions{margin-top:18px!important;gap:12px!important}
.hero-btn{min-width:170px!important;height:46px!important;border-radius:16px!important;text-transform:none!important;font-size:14px!important;letter-spacing:.2px!important}
.hero-btn-primary{background:linear-gradient(135deg,#2eb8f0,#1796d3)!important;box-shadow:0 14px 26px rgba(31,158,217,.20)!important}
.hero-btn-secondary{background:rgba(255,255,255,.72)!important;border:1px solid rgba(73,180,227,.22)!important;color:#15557e!important}
.hero-btn-ghost{display:none!important}
.live-clock-dashboard{
  width:min(560px,100%)!important;
  background:rgba(255,255,255,.74)!important;
  border:1px solid rgba(79,185,230,.18)!important;
  box-shadow:0 16px 28px rgba(50,147,200,.10)!important;
}
.clock-panel-top{color:#2d678a!important;border-bottom:1px solid rgba(79,185,230,.14)!important;background:rgba(234,249,255,.76)!important}

.timer-label{color:#5a7b92!important}
.neon-timer-digital{color:#0f7fb8!important;text-shadow:none!important}

.quick-overview{
  width:min(1240px,calc(100% - 28px))!important;
  margin:0 auto 18px!important;
  gap:14px!important;
}
.overview-card{
  min-height:106px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(241,250,255,.96))!important;
  border:1px solid rgba(91,190,235,.16)!important;
  box-shadow:0 16px 34px rgba(53,150,201,.08)!important;
}
.overview-kicker{color:#6aa6c2!important}
.overview-card strong{color:#0f3554!important;font-size:18px!important}
.overview-card small{color:#67849a!important;font-size:11px!important}
.promo-highlight{display:none!important}

#rtp-container{width:min(1240px,calc(100% - 28px))!important}
.provider-nav-tabs{
  top:var(--sticky-offset)!important;
  background:rgba(244,252,255,.92)!important;
  border:1px solid rgba(89,187,231,.14)!important;
  box-shadow:0 14px 30px rgba(54,156,207,.08)!important;
  padding:11px!important;
  border-radius:22px!important;
}
.tab-btn{
  color:#5d7890!important;
  background:transparent!important;
  border-radius:14px!important;
  padding:12px 18px!important;
}
.tab-btn:hover{background:rgba(94,194,237,.08)!important;color:#11537c!important;border-color:transparent!important}
.tab-btn.active{
  background:linear-gradient(135deg,#46c0f4,#1b9bd6)!important;
  color:#ffffff!important;
  border-color:transparent!important;
  box-shadow:0 12px 22px rgba(39,159,217,.20)!important;
}
.provider-section{
  background:linear-gradient(180deg,rgba(252,254,255,.98),rgba(239,249,255,.98))!important;
  border:1px solid rgba(85,186,233,.12)!important;
  box-shadow:0 20px 42px rgba(42,146,198,.08)!important;
  padding:22px!important;
}
.provider-section h2{
  color:#133d5d!important;
  border-bottom:1px solid rgba(85,186,233,.10)!important;
}
.provider-section h2::before{color:#2a8fc3!important;background:rgba(84,192,239,.10)!important;border-color:rgba(84,192,239,.18)!important}
.provider-section h2::after{background:rgba(66,214,143,.10)!important;color:#12a46c!important;border-color:rgba(66,214,143,.16)!important}
.game-card{
  background:linear-gradient(180deg,#ffffff,#f1fbff)!important;
  border:1px solid rgba(84,192,239,.16)!important;
  box-shadow:0 14px 28px rgba(40,149,199,.08)!important;
}
.game-card:hover{
  border-color:rgba(84,192,239,.28)!important;
  box-shadow:0 18px 34px rgba(40,149,199,.13)!important;
}
.img-container{background:linear-gradient(145deg,#eefaff,#d9f2ff)!important}
.game-info h3{color:#153f5e!important}
.badge-status{background:linear-gradient(135deg,#32c2f8,#189ad8)!important;box-shadow:0 8px 16px rgba(50,194,248,.16)!important}
.rtp-bar-container{background:#dcedf8!important;border:1px solid rgba(84,192,239,.10)!important;box-shadow:none!important}
.rtp-text{color:#093b5d!important;text-shadow:none!important}
.btn-mainkan{background:linear-gradient(135deg,#38b8ee,#1598d8)!important;color:#fff!important;border:none!important;box-shadow:0 10px 18px rgba(32,162,223,.14)!important}
.btn-pola{background:rgba(77,192,238,.08)!important;color:#1676ac!important;border:1px solid rgba(77,192,238,.18)!important}

.seo-footer{width:min(1240px,calc(100% - 28px))!important}
.footer-table-container,.footer-seo-intro,.footer-block{
  background:linear-gradient(180deg,#ffffff,#f2fbff)!important;
  border:1px solid rgba(90,190,235,.12)!important;
  box-shadow:0 14px 26px rgba(49,149,198,.06)!important;
}
.footer-table-container h3,.footer-block h3{color:#123f61!important}
.seo-table th{background:#e7f7ff!important;color:#1675aa!important}
.seo-table td,.footer-seo-intro p,.footer-block p,.footer-links li a{color:#597b92!important}
.footer-seo-intro a,.footer-links li a:hover{color:#1499d6!important}
.footer-bottom{border-top:1px solid rgba(90,190,235,.10)!important}
.footer-bottom p{color:#6f93aa!important}

.floating-bottom-nav{
  background:rgba(247,252,255,.88)!important;
  border:1px solid rgba(90,190,235,.14)!important;
  box-shadow:0 18px 40px rgba(40,149,199,.12)!important;
}
.nav-item:hover{background:rgba(76,191,239,.06)!important}
.nav-icon-circle{border:1px solid rgba(90,190,235,.12)!important;background:#eff9ff!important}
.text-wa{color:#1aaa72!important}.text-daftar,.text-login,.text-roda{color:#1486bf!important}

@media (max-width: 900px){
  header,.quick-overview,#rtp-container,.seo-footer{width:calc(100% - 20px)!important}
  header{padding:26px 18px 22px!important;border-radius:24px!important}
  .quick-overview{gap:10px!important}
  .hero-btn{min-width:150px!important}
}
@media (max-width: 768px){
  .pelukbet-topnav{top:54px!important}
  .topnav-inner{min-height:auto!important;padding:12px 0!important}
  .topnav-logo img{width:124px!important}
  .topnav-menu{width:100%!important;overflow-x:auto!important}
  .topnav-menu a{font-size:11px!important;padding:0 11px!important}
  .hero-badges span{font-size:9px!important}
  .hero-btn{width:calc(50% - 6px)!important;min-width:unset!important;height:44px!important}
  .quick-overview{grid-template-columns:1fr!important}
  .provider-section{padding:16px!important}
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width: 480px){
  .auth-btn{min-width:96px!important;padding:0 14px!important}
  .pelukbet-topnav{top:54px!important}
  header h1{font-size:26px!important}
  .site-logo{width:min(250px,80vw)!important}
  .hero-subtitle{font-size:12px!important}
  .hero-badges{gap:7px!important}
  .hero-badges span{font-size:8px!important;padding:7px 9px!important}
  .hero-actions{gap:8px!important}
  .hero-btn{width:100%!important;font-size:13px!important}
  .clock-panel-bottom{flex-direction:column!important}
  .provider-nav-tabs{padding:8px!important}
  .tab-btn{padding:10px 14px!important;font-size:10px!important}
  .game-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
}
@media (max-width: 380px){
  .game-grid{grid-template-columns:1fr!important}
}
/* Kontainer luar berbentuk kapsul putih (sesuaikan nama class dengan HTML Anda) */
.update-status-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 50px;
  padding: 10px 24px; /* Menambah ruang vertikal & horizontal agar proporsional */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  width: max-content;
  margin: 0 auto 18px;
}
.clock-panel-top #live-date-text {
    color: #000000 !important;
}
/* FIX WARNA TEKS TERAKHIR UPDATE */
.clock-panel-top #live-date-text {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    text-shadow: none !important;
}