:root{
  /* ═══ WARNA UTAMA ═══ */
  --pri: #38bdf8;              /* emas — tombol utama, link aktif, border aksen */
  --pri-d: #0ea5e9;            /* emas gelap — hover button */
  --pri-l: rgba(56,189,248,.15); /* emas transparan — background tombol outline */
  --sec: #38bdf8;              /* teal — saldo, aksen kedua */
  --sec-d: #0ea5e9;            /* teal gelap */

  /* ═══ BACKGROUND ═══ */
  --bg: #0f172a;               /* hijau teal sangat gelap — background utama */
  --bg2: #1e293b;               /* sedikit lebih terang — card */
  --bg3: #334155;               /* terang — hover/aktif */

  /* ═══ TEKS ═══ */
  --t: #ffffff;                /* teks utama */
  --t2: #cbd5e1;               /* teks kedua */
  --t3: #94a3b8;               /* teks tersier/hint */

  /* ═══ BORDER & OUTLINE ═══ */
  --bd: rgba(255,255,255,.1);  /* border standar */
  --bd2: rgba(255,255,255,.15); /* border kuat */

  /* ═══ NAV & SURFACE — dipake di bottom nav, card, dll ═══ */
  --nav-bg: #0a1628;           /* bottom nav background (lebih gelap dari bg) */
  --s: #1e293b;                /* surface — input, chip, card (solid, beda dikit dari bg) */
  --s2: #334155;               /* surface hover (lebih terang) */
  --s3: #475569;               /* surface elevated (popup/modal card) */
  --g: #38bdf8;                /* gold alias untuk --pri */
  --gl: #7dd3fc;               /* gold light (shimmer) */
  --pri2: #7dd3fc;             /* gold terang */
  --pri-rgb: 56,189,248;       /* rgb raw untuk rgba() */
  --sec-rgb: 56,189,248;       /* teal rgb */

  /* ═══ STATUS ═══ */
  --green: #10b981;
  --red: #ef4444;
  --orange: #f59e0b;
  --blue: #3b82f6;
}

html,body{background:var(--bg);color:var(--t)}
body{font-family:'Poppins','Segoe UI',Arial,sans-serif;margin:0;padding:0;min-height:100vh}

/* Tombol primary — Solid sky blue dengan glow */
.btn-pri,.btn.btn-pri{
  background:linear-gradient(135deg,#38bdf8 0%,#0ea5e9 100%);
  color:#ffffff;font-weight:800;border:none;border-radius:10px;
  padding:11px 20px;cursor:pointer;font-family:inherit;font-size:.88rem;letter-spacing:.3px;
  transition:all .2s;
  box-shadow:0 4px 14px rgba(56,189,248,.45),inset 0 1px 0 rgba(255,255,255,.25);
  text-shadow:0 1px 2px rgba(0,0,0,.15);
}
.btn-pri:hover,.btn.btn-pri:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg,#7dd3fc 0%,#38bdf8 100%);
  box-shadow:0 6px 20px rgba(56,189,248,.6),inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-pri:active,.btn.btn-pri:active{transform:translateY(0);box-shadow:0 2px 8px rgba(56,189,248,.4)}

/* Tombol secondary — outline sky blue */
.btn-sec,.btn.btn-sec{
  background:transparent;color:var(--pri);border:1.5px solid var(--pri);
  border-radius:8px;padding:10px 20px;cursor:pointer;font-family:inherit;font-size:.88rem;
  font-weight:600;transition:all .15s;
}
.btn-sec:hover,.btn.btn-sec:hover{background:var(--pri-l);box-shadow:0 0 12px rgba(56,189,248,.3)}

/* Tombol red */
.btn-red{
  background:var(--red);color:#fff;border:none;border-radius:8px;
  padding:10px 20px;cursor:pointer;font-family:inherit;font-size:.88rem;font-weight:600;
}
.btn-red:hover{opacity:.85}

/* Tombol small */
.btn-sm{padding:5px 12px;font-size:.72rem}

/* Input & textarea */
input,textarea,select{
  background:rgba(255,255,255,.05);color:var(--t);
  border:1.5px solid var(--bd);border-radius:8px;
  padding:11px 13px;font-size:.88rem;font-family:inherit;
  width:100%;outline:none;box-sizing:border-box;
}
input:focus,textarea:focus,select:focus{border-color:var(--pri);background:rgba(255,255,255,.08)}

/* Label */
label{font-size:.75rem;color:var(--t2);font-weight:600;margin-bottom:4px;display:block}

/* Form group */
.fg{margin-bottom:14px}
.fg-row{display:flex;gap:10px}
.fg-row .fg{flex:1}

/* Messages */
.msg{padding:10px 12px;border-radius:8px;font-size:.78rem;margin-bottom:12px}
.msg-ok{background:rgba(16,185,129,.1);color:var(--green);border:1px solid rgba(16,185,129,.3)}
.msg-err{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.3)}
.msg-warn{background:rgba(245,158,11,.1);color:var(--orange);border:1px solid rgba(245,158,11,.3)}

/* ═══════════════════════════════════════════════════════════════ */
/* GLOBAL OVERRIDE — paksa SEMUA element solid sesuai tema, ga ada transparant */
/* ═══════════════════════════════════════════════════════════════ */

/* Header sticky bar — selalu solid bg, ga ada blur transparant */
.hdr{
  background:var(--bg)!important;
  
  -webkit-
  border-bottom:1px solid var(--bd);
}
/* Header back button — solid surface, bukan transparant white */
.hdr button{
  background:var(--s)!important;
  border:1px solid var(--bd)!important;
  color:var(--t)!important;
}
.hdr h1{color:var(--t)!important}

/* Card / box generic — solid */
.card,.box,.panel,.row{background:var(--s);color:var(--t)}

/* Hadiah / item row di profil */
.item-row{background:var(--s)!important;border:1px solid var(--bd)}

/* Pill buttons (chip/ftab/dt-tab) — solid bg */
.ftab,.chip,.uc-tag,.dt-tab{
  background:var(--bg2);
  color:var(--t2);
  border:1px solid var(--bd);
}
.ftab.on,.chip.on,.dt-tab.on{
  background:var(--pri)!important;
  color:#fff!important;
}

/* Riwayat tabs di profil — selalu solid */
#rwTabs > div{background:var(--s)!important;color:var(--t2)!important;border:1px solid var(--bd)}
#rwTabs > div[style*="--sec"]{background:var(--pri)!important;color:#fff!important;border-color:var(--pri)!important}

/* Progress bar — solid base */
.bar,.progress-bg,.tomeric{background:var(--bg2)!important}

/* Input/select solid */
input,select,textarea{background:var(--bg2);color:var(--t);border:1px solid var(--bd)}

/* Bottom nav — selalu solid */
.bnav,.bottom-nav,nav.bottom{background:var(--nav-bg)!important;border-top:1px solid var(--bd)}

/* Modal/popup — solid bg */
.modal-box,.k-box,.pay-overlay,.pop,.popup,.sheet{background:var(--s)!important;border:1px solid var(--bd)}

/* Container body anti-default-white */
body,.wrap,.content,main{background:var(--bg)}

/* Empty state container */
.empty,.kosong{background:var(--s);color:var(--t3);border:1px solid var(--bd);border-radius:10px;padding:24px;text-align:center}

/* ═══════════════════════════════════════════════════════════════ */
/* DEEP OVERRIDE — anti-AI look (gradient overdo + glassmorphism) */
/* ═══════════════════════════════════════════════════════════════ */

/* VIP card di profil — sebelum hardcode gradient navy, sekarang ikut tema */
.vip-card,.vc-box,.vip-banner{
  background:var(--s)!important;
  border:1px solid var(--bd)!important;
}
.vc-badge{background:var(--bg2)!important;border:1px solid var(--bd)!important}
.vc-badge .vbi{background:var(--pri)!important;color:#fff!important}
.vc-detail{background:var(--pri)!important;color:#fff!important}
.vc-bar{background:var(--bg2)!important;border:1px solid var(--bd)}
.vc-bar .fill{background:var(--pri)!important}

/* Notif/memo card */
.notif-card,.memo-card,.alert-card{background:var(--s)!important;border:1px solid var(--bd)}

/* Search bar */
.sb-main,.search-box,.sb-search{background:var(--bg2)!important;border:1px solid var(--bd)!important}

/* Banner/promotion card */
.b-overlay{background:transparent!important}

/* Quick action card  */
.qa-card .qa-fb{background:var(--s)!important;border:1px solid var(--bd)}

/* Provider/category chip pills */
.prov-pill,.cat-pill,.gen-pill{background:var(--bg2)!important;border:1px solid var(--bd)}
.prov-pill.on,.cat-pill.on,.gen-pill.on{background:var(--pri)!important;color:#fff!important;border-color:var(--pri)!important}

/* Dropdown / select option */
.opt,.dropdown-item{background:var(--s)!important;color:var(--t)}
.opt:hover,.dropdown-item:hover{background:var(--bg2)!important}

/* Toast & alerts */
.toast-box,.alert,.snack{background:var(--s)!important;color:var(--t);border:1px solid var(--bd)}

/* Modal overlay (bg gelap dimmer) */
.modal,.overlay,.toast-overlay{background:rgba(0,0,0,.65)!important;backdrop-filter:none!important}

/* Method/payment card */
.mth,.method-card,.pay-method,.bank-item{background:var(--s)!important;border:1px solid var(--bd)!important;color:var(--t)}
.mth.sel,.method-card.sel,.pay-method.sel,.bank-item.sel{border-color:var(--pri)!important;background:var(--bg2)!important}
.mth .m-name,.method-card .name{color:var(--t)!important}

/* Quick deposit nominal pill */
.qk,.nominal-pill{background:var(--bg2)!important;color:var(--t)!important;border:1px solid var(--bd)!important}
.qk.sel,.nominal-pill.sel{background:var(--pri)!important;color:#fff!important;border-color:var(--pri)!important}

/* Bonus selector */
.bon-sel,.bonus-card{background:var(--bg2)!important;color:var(--t)!important;border:1px solid var(--bd)!important}
.bon-sel.sel,.bonus-card.sel{background:var(--pri)!important;color:#fff!important;border-color:var(--pri)!important}

/* History row */
.tx-row,.hist-row,.row-item{background:var(--s)!important;border:1px solid var(--bd);border-radius:10px;margin-bottom:6px;padding:12px}

/* Generic divider line */
hr{border:none;border-top:1px solid var(--bd)}

/* ═══════════════════════════════════════════════════════════════ */
/* AFILIASI / UNDANG / REBATE — inline boxes biar solid */
/* ═══════════════════════════════════════════════════════════════ */
.km-box,.sg-item,.data-sub-card,.stat-item,.inv-box,.reward-box,.tier-box,.dn-item{
  background:var(--bg2)!important;
  border:1px solid var(--bd);
  color:var(--t);
}
.km-box .km-val,.sg-item .sg-val,.stat-item .sv{color:var(--pri)!important}
.km-box .km-lbl,.sg-item .sg-lbl{color:var(--t2)!important}

/* Share card & promo card biar solid */
.share-card,.promo-card,.reward-card,.bonus-banner{
  background:var(--s)!important;
  border:1px solid var(--bd);
  color:var(--t);
}
.share-card::before,.promo-card::before{display:none!important}
.link-url{color:var(--pri)!important}

/* Tab afiliasi (Promosi Saya / Tutorial / Kinerja) — text + underline style */
.tabs{background:var(--bg)!important;border-bottom:1px solid var(--bd)}
.tab{color:var(--t3)!important;background:transparent!important;border:none!important;border-bottom:2px solid transparent!important}
.tab.on{color:var(--pri)!important;background:transparent!important;border-bottom:2px solid var(--pri)!important}

/* Btn klaim — solid pakai var(--pri) bukan gradient */
.btn-klaim,.btn-claim{
  background:var(--pri)!important;
  color:#fff!important;
  border:none;
}

/* Redeem code input box */
#kodeInput,.kode-input{
  background:var(--bg2)!important;
  color:var(--t)!important;
  border:1px solid var(--bd)!important;
}

/* Daily code copy box */
.daily-code-box{background:var(--bg2)!important;border:1px dashed var(--pri)!important;color:var(--pri)!important}

/* VIP detail page cards */
.vip-lvl-card,.vip-perks{background:var(--s)!important;border:1px solid var(--bd)}
.vip-lvl-card.active{border-color:var(--pri)!important;background:var(--bg2)!important}

/* Rebate progress bar */
.rb-prog,.progress-container{background:var(--bg2)!important;border:1px solid var(--bd)}
.rb-prog .fill,.progress-bar{background:var(--pri)!important}

/* Level box rebate */
.rb-lvl,.level-badge,.lv-chip{background:var(--bg2)!important;color:var(--t)!important;border:1px solid var(--bd)}
.rb-lvl.active,.level-badge.active{background:var(--pri)!important;color:#fff!important;border-color:var(--pri)!important}

/* ═══════════════════════════════════════════════════════════════ */
/* GAME CARD — border ikut tema (ijo untuk CVG, biru untuk BLUE)   */
/* HARD CODE height biar konsisten                                  */
/* ═══════════════════════════════════════════════════════════════ */
.gc,.srch-grid .gc,.prov-ov-games .gc{
  border:1px solid rgba(var(--pri-rgb),.25)!important;
  background:var(--s)!important;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  position:relative!important;
  width:100%!important;
  height:120px!important;
  min-height:120px!important;
  max-height:120px!important;
  padding:0!important;
  padding-bottom:0!important;
  overflow:hidden!important;
  aspect-ratio:unset!important;
  display:block!important;
  contain:size layout!important;
  box-sizing:border-box!important;
}
/* Image/thumb DALAM gc: force fill absolute */
.gc img,.srch-grid .gc img,.prov-ov-games .gc img,
.gc .thumb,.srch-grid .gc .thumb,.prov-ov-games .gc .thumb{
  position:absolute!important;
  top:0!important;left:0!important;right:0!important;bottom:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:cover!important;
}

/* Featured game: border solid primary */
.gc.featured-game{
  border:2px solid var(--pri)!important;
  box-shadow:0 0 6px rgba(var(--pri-rgb),.3),0 2px 8px rgba(0,0,0,.4)!important;
}

/* Hide .gname-out (nama di luar) — kembali ke nama di dalam card */
.gname-out{display:none!important}

.gwrap{display:block}

/* Badge provider DI DALAM card — pojok bawah kiri, mengikuti tema */
.gprov{
  position:absolute!important;
  bottom:5px;left:5px;
  background:var(--pri)!important;
  color:#fff!important;
  font-size:.48rem!important;
  font-weight:800!important;
  padding:2px 7px!important;
  border-radius:5px!important;
  letter-spacing:.3px!important;
  text-transform:uppercase;
  z-index:3;
  max-width:calc(100% - 10px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* ANTI-AI LOOK OVERRIDES — paksa solid, ga over-translucent          */
/* ═══════════════════════════════════════════════════════════════════ */

/* Header pages — solid full (bukan faded gradient) */
.prof-top,.hdr-top,.page-hdr,.page-top,
[class*="prof-top"],[class*="page-top"]{
  background:var(--bg2)!important;
  border-bottom:1px solid var(--bd);
}

/* Card/box umum — solid, ga blur transparant */
.card,.panel,.box,.sec,.menu-row,.item-row,
.km-box,.sg-item,.share-card,.promo-card,
.stat-card,.stat-box,.info-card{
  background:var(--bg2)!important;
  
  -webkit-
  border:1px solid var(--bd);
}

/* Avatar — gradient tetap tapi warna branded */
.prof-avatar,.avatar{
  background:linear-gradient(135deg,var(--pri),var(--pri-d))!important;
}

/* Modal/dialog — solid */
.modal,.modal-box,.dlg,.dialog,.popup-inner,
[class*="modal-"],[class*="dlg-"]{
  background:var(--bg2)!important;
  
  -webkit-
}
.modal-bg,.dlg-bg,.popup-bg{background:rgba(0,0,0,.72)!important}

/* Bottom nav — solid */
.bnav{background:var(--bg2)!important;border-top:1px solid var(--bd)}

/* Input/form — solid */
input[type=text],input[type=number],input[type=tel],input[type=password],input[type=email],
input[type=search],textarea,select{
  background:var(--bg2)!important;
  border:1px solid var(--bd)!important;
  color:var(--t)!important;
}

/* VIP card profil — solid branded */
.vip-card,.vcard,[class*="vip-card"]{
  background:linear-gradient(135deg,var(--bg2),var(--bg3))!important;
  border:1px solid var(--pri)!important;
}

/* Tombol klaim — solid */
.btn-klaim,.btn-primary,.btn-pri{
  background:var(--pri)!important;
  color:#fff!important;
  border:none!important;
}

/* Level badge */
.rb-lvl,.level-badge,.lv-chip{
  background:var(--pri)!important;
  color:#fff!important;
}

/* Hilangin hardcoded navy #1e293b biar konsisten dgn theme color */
[style*="#1e293b"]{background-color:var(--bg2)!important}
[style*="#0f172a"]{background-color:var(--bg)!important}

/* Tab styling — TEXT + underline (bukan pill solid) */
.tab{
  background:transparent!important;
  color:var(--t2)!important;
  border:none!important;
  border-bottom:2px solid transparent!important;
  border-radius:0!important;
  padding:8px 12px!important;
}
.tab.on{
  background:transparent!important;
  color:var(--pri)!important;
  border-bottom:2px solid var(--pri)!important;
  font-weight:700;
}

/* Pill tab variants (chip, ftab, dt-tab) — solid pill */
.ftab,.chip,.uc-tag,.dt-tab{
  background:var(--bg2)!important;
  color:var(--t2)!important;
  border:1px solid var(--bd)!important;
  border-radius:999px!important;
  padding:6px 14px!important;
}
.ftab.on,.chip.on,.uc-tag.on,.dt-tab.on{
  background:var(--pri)!important;
  color:#fff!important;
  border-color:var(--pri)!important;
}

/* Prevent horizontal scroll on all pages */
html,body{overflow-x:hidden!important}

/* ═══════════════════════════════════════════════════════════════════
   FLATTEN EFFECTS — hapus semua glossy/shimmer/glow berlebihan
   Tujuan: tampilan clean, rapi, ga alay
   ═══════════════════════════════════════════════════════════════════ */

/* === Card/Button: Hapus inset highlight + glow ring === */
.mth, .pdd-wrap, .bon-dd, .amt-input, .qk, .submit,
.k-box .k-ok, .info, .stat-card, .rw-card, .st-btn,
.ref-copy, .card, .wc-btn, .wc-card {
  box-shadow: none !important;
}

/* Submit button — solid warna, ga ada glow */
.submit {
  background: var(--pri) !important;
  border: 1.5px solid var(--pri-d, var(--pri)) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.15) !important;
  letter-spacing: 0 !important;
}
.submit:active { transform: translateY(1px); }

/* Quick amount buttons — flat */
.qk {
  background: var(--s) !important;
  border: 1.5px solid var(--bd) !important;
  color: var(--sec) !important;
  box-shadow: none !important;
}
.qk:active {
  transform: scale(.96);
  background: var(--pri) !important;
  color: #fff !important;
  border-color: var(--pri) !important;
  box-shadow: none !important;
}

/* Payment method cards — hapus inset highlight, flat only */
.mth {
  background: var(--s) !important;
  border: 1.5px solid var(--bd) !important;
  box-shadow: none !important;
}
.mth.on {
  background: var(--s) !important;
  border-color: var(--pri) !important;
  box-shadow: 0 0 0 2px var(--pri) !important;
}

/* Amount input — flat */
.amt-input {
  background: var(--s) !important;
  border: 1.5px solid var(--bd) !important;
  box-shadow: none !important;
}

/* Dropdown buttons — flat */
.pdd-wrap, .bon-dd {
  background: var(--s) !important;
  border: 1.5px solid var(--bd) !important;
  box-shadow: none !important;
}

/* Info card — flat, no gradient bg */
.info {
  background: var(--s) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: none !important;
}

/* Hot badge — hapus shadow berlebihan */
.hot-badge { box-shadow: none !important; }

/* Toast — keep minimal shadow */
.toast-box { box-shadow: 0 4px 16px rgba(0,0,0,.3) !important; }

/* ═══════════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION — blok rapi tiap item
   ═══════════════════════════════════════════════════════════════════ */

.bnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  gap: 4px;
  padding: 6px 6px calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
  background: var(--nav-bg) !important;
  border-top: 1px solid var(--bd) !important;
  border-radius: 0 !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,.25) !important;
  overflow: visible !important;
}

/* HAPUS gradient line di atas bnav */
.bnav::before { display: none !important; }

/* Setiap item jadi BLOK rapi */
.bnav-i {
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 8px 4px !important;
  border-radius: 10px !important;
  background: transparent;
  color: var(--t3) !important;
  font-size: .62rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all .15s;
  min-width: 0;
}

.bnav-i:active {
  transform: scale(.94);
}

/* Item aktif — NO blok warna, cuma text jadi warna tema */
.bnav-i.active {
  background: transparent !important;
  color: var(--pri) !important;
}
.bnav-i.active svg {
  stroke: var(--pri) !important;
}
.bnav-i.active img {
  filter: none;
}

/* Icon size konsisten */
.bnav-i svg {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0;
}
.bnav-i img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain;
  flex-shrink: 0;
}

/* Label text */
.bnav-i span {
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Saat active, label jadi bold putih */
.bnav-i.active span {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* GLOBAL VIEWPORT LOCK — 9:16 PORTRAIT                                    */
/* - Body max-width 390px (mobile portrait standard)                       */
/* - Centered di device lebar (desktop/tablet) dengan letterbox hitam      */
/* - Disable horizontal scroll / pan supaya layar ga bisa geser kiri-kanan */
/* - Prevent over-scroll rubber band horizontal                            */
/* ═══════════════════════════════════════════════════════════════════════ */
html{
  background:#000!important;
  overflow-x:hidden!important;
  overscroll-behavior-x:none!important;
  -webkit-overflow-scrolling:touch;
  min-height:100vh;
}
body{
  max-width:390px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior-x:none!important;
  position:relative!important;
  min-height:100vh;
}
/* Semua element child body ga boleh lebih lebar dari 390 */
body > *{max-width:100%!important;box-sizing:border-box!important}

/* Disable pinch zoom & double-tap zoom kalau kelewat di meta */
html,body{touch-action:pan-y!important;-ms-touch-action:pan-y!important}

/* Tapi horizontal scroll TETEP BOLEH untuk element yg memang scrollable 
   (banner carousel, provider strip, filter tabs, dll) */
.banner-wrap,.banner-track,.filters,.prov-strip,
.fil-strip,.cat-strip,.hscroll,[data-hscroll],
.srch-grid,.games-grid{touch-action:pan-x pan-y!important}

/* Overlay & modal full-screen tetep boleh full viewport */
.game-overlay,#gameOverlay,.modal,.overlay,#overlay,
.popup-full,.fullscreen-modal{
  max-width:none!important;
  width:100vw!important;
  left:0!important;
  right:0!important;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* GLOBAL ANTI-GLOSSY — SEMUA FLAT, NO GRADIENT, NO GLOW                   */
/* Dipaksa via !important di akhir file, menang atas styling page manapun  */
/* ═══════════════════════════════════════════════════════════════════════ */

/* 1. Kill SEMUA linear-gradient di background & background-image           */
/*    Override common patterns yg keliatan glossy                          */
.hdr,.header,.top-hdr,.page-hdr,.page-top,.topbar,.nav-top,
.btn-primary,.submit,.mth,.bonus-card,.info,.info-card,
.prof-top,.hdr-top,
.stat-box,.stat-card,.kpi-card,.summary-card,
.hero,.hero-card,.banner-card,
.sbtn,.action-btn,.cta,.cta-btn,.unduh-btn,.spin-cta,
.game-card,.prov-card,.provider-card,
.bonus-item,.promo-item,.promo-card,
.notice,.notif-card,.alert-box,
.tab-bar,.tabs,.tab,.fil,
.bnav,.bnav-i,
.popup-card,.modal-card,.modal-body,
/* ═══ PRE-LOGIN ELEMENTS ═══ */
.btn-daftar,.btn-masuk,.btn-sub,
.qa-card,.qa-fb,
.fl-cs,.fl-invite,.fl-mine,.fi-fb,.fm-fb,
.jackpot-box,.social-item,
.mb,.mo .mb{
  background-image:none!important;
}

/* Pre-login buttons — solid tema, no glow */
.btn-daftar,.btn-sub{background:var(--pri)!important;color:#fff!important}
.btn-daftar:hover,.btn-sub:hover{background:var(--pri-d,var(--pri))!important}
.btn-masuk{background:transparent!important;border:1.5px solid var(--pri)!important;color:var(--pri)!important}
.btn-masuk:hover{background:var(--pri-l,rgba(var(--pri-rgb),.08))!important}

/* Floating CS bubble + invite/mine — solid tema */
.fl-cs > div,#flCsBody{background:var(--pri)!important;box-shadow:0 2px 8px rgba(0,0,0,.2)!important}
.fl-invite .fi-fb,.fl-mine .fm-fb{background:var(--pri)!important}

/* Quick action cards — solid tema */
.qa-card .qa-fb{background:var(--pri)!important}

/* 2. Kill glow shadows — keep subtle shadow untuk depth                   */
.btn,.submit,.mth,.info,.qk,.amt-input,
.card,.section-card,.stat-card,.item-row,
.bonus-card,.promo-card,.notif-card,
.hero,.hero-card{
  box-shadow:0 1px 3px rgba(0,0,0,.15)!important;
}
.btn:hover,.submit:hover,.mth:hover,
.btn:active,.submit:active{
  box-shadow:0 1px 3px rgba(0,0,0,.15)!important;
  transform:none!important;
}

/* 3. Kill inset highlights (gradient glossy di dalam button) */
*:not(input):not(textarea):not(select){
  background-attachment:scroll!important;
}

/* 4. Flatten tombol active state — no glow, no transform */
.mth.on,.qk.on,.fil.active,.tab.on,.tab.active,
.bnav-i.active,.prov-item.active,.prov-btn.active{
  box-shadow:none!important;
  transform:none!important;
}

/* 5. Kill backdrop-filter yang mungkin masih ada */
*{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* 6. Kill radial-gradient di body/root backgrounds */
html,body,.app-root,.page-root{
  background-image:none!important;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* GAME CARD — IMAGE ATAS 120px + TEXT STRIP BAWAH, BORDER 2PX TEMA        */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Card wrapper — solid, border 2px warna tema */
.gc,a.gc{
  display:block;
  position:relative;
  width:100%;
  background:var(--s,#0f172a);
  border:2px solid var(--pri,#22c55e);
  border-radius:10px;
  overflow:hidden;
  padding:0;
  text-decoration:none;
  color:inherit;
}

/* Image area 120px tinggi (1:1 with card width ±120px) */
.gc > img{
  display:block;
  width:100%;
  height:120px;
  object-fit:cover;
}

/* Thumb fallback — HIDDEN default, cuma show saat .no-image */
.gc .thumb{
  display:none;
  width:100%;
  height:120px;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:.65rem;
  color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.04);
  padding:6px;
  font-weight:600;
}
.gwrap.no-image .gc > img{display:none}
.gwrap.no-image .gc .thumb{display:flex}

/* RTP badge kiri-atas overlay */
.gc .rtp,.gc .gc-rtp{
  position:absolute;
  top:6px;left:6px;
  background:rgba(0,0,0,.75);
  color:#22c55e;
  font-size:.62rem;
  font-weight:800;
  padding:3px 7px;
  border-radius:4px;
  z-index:3;
}

/* Fav button kanan-atas overlay */
.gc .fav,.gc .gc-fav{
  position:absolute;
  top:6px;right:6px;
  width:24px;height:24px;
  background:rgba(0,0,0,.55);
  border:none;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
  padding:0;
}

/* Text strip di bawah image — IN FLOW (bukan absolute overlay) */
.gc .gn{
  position:static;
  display:block;
  padding:6px 8px 8px;
  background:var(--s,#0f172a);
  background-image:none;
  border-top:1px solid rgba(255,255,255,.06);
}
.gc .gn-name{
  font-size:.7rem;
  font-weight:700;
  color:var(--t,#fff);
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-transform:none;
  letter-spacing:0;
}
.gc .gn-prov{
  font-size:.58rem;
  font-weight:500;
  color:var(--t3,#94a3b8);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-transform:none;
  letter-spacing:0;
  margin-top:2px;
}

/* Hide pill .gprov + text outside .gname-out (obsolete — diganti .gn) */
.gprov,.gname-out{display:none!important}

/* No-image card tone */
.gwrap.no-image .gc{opacity:.65;border-color:rgba(148,163,184,.25)}