*,*::before,*::after{box-sizing:border-box;}
/* UI helpers & components */
.sv-wrap{max-width:1100px;margin:0 auto;padding:0 14px;}
.sv-section{padding:18px 0;}

/* ===== Grid fallback for older mobile browsers (e.g., UC Browser) =====
   Some browsers don't fully support CSS Grid. We provide Flexbox fallbacks
   and then override with Grid when supported.
*/
.sv-popgrid,
.sv-grid,
.sv-footgrid,
.sv-txgrid,
.sv-packgrid,
.sv-payline,
.sv-pricelist,
.sv-pack-grid,
.sv-mobile-menu-grid,
.sv-mobile-list,
.sv-help-grid{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}
.sv-txgrid{flex-direction:column;}
.sv-txgrid > *{width:100%;}

@media (min-width: 981px){
  .sv-txgrid{flex-direction:row;align-items:flex-start;}
  .sv-left{flex:0 0 360px;max-width:360px;}
  .sv-right{flex:1 1 auto;min-width:0;}
}

/* Card grids: default 2 columns on small screens, more on larger */
.sv-grid > *{flex:1 1 calc(50% - 18px);min-width:160px;}
@media (min-width: 820px){
  .sv-grid > *{flex:1 1 calc(25% - 18px);}
}

/* Packs grid */
.sv-packgrid > *,
.sv-pack-grid > *{flex:1 1 calc(50% - 18px);min-width:160px;}
@media (min-width: 820px){
  .sv-packgrid > *,
  .sv-pack-grid > *{flex:1 1 calc(33.333% - 18px);}
}

/* Footer grid */
.sv-footgrid > *{flex:1 1 220px;min-width:200px;}

/* Override with CSS Grid when supported */
@supports (display: grid){
  .sv-popgrid,
  .sv-grid,
  .sv-footgrid,
  .sv-txgrid,
  .sv-review-bars .row,
  .sv-packgrid,
  .sv-payline,
  .sv-pricelist,
  .sv-pack-grid,
  .sv-mobile-menu-grid,
  .sv-mobile-list,
  .sv-help-grid{
    display:grid;
    gap:18px;
  }
  /* let existing grid rules below define columns */
  .sv-left,.sv-right{flex:unset;max-width:none;}
}

.sv-header{
  position: sticky; top: 0; z-index: 99;
  backdrop-filter: blur(10px);
  background: rgba(10, 70, 120, .55);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.sv-row{display:flex;gap:10px;align-items:center;padding:10px 0;}

.sv-logo{
  width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.sv-logo img{width:34px;height:34px;object-fit:cover}

.sv-search{
  flex:1; display:flex; gap:8px; align-items:center;
  padding:8px 10px; border-radius:999px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.14);
}
.sv-search input{
  width:100%; background:transparent; border:0; outline:0; color:var(--white);
  font-size:14px;
}
.sv-searchbtn{
  border:0;background:transparent;color:var(--white);cursor:pointer;
  font-size:16px;line-height:1;
}

.sv-iconbtn{
  width:42px;height:42px;border-radius:14px;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
  color:var(--white); text-decoration:none;
}
.sv-iconbtn:hover{border-color:rgba(255,255,255,.26)}
.sv-nav{padding:8px 0 12px;}
.sv-menulinks{
  display:flex; gap:18px; flex-wrap:wrap;
  color:var(--white);
}
.sv-menulinks a{
  color:var(--white); text-decoration:none; font-weight:700;
  display:inline-flex; align-items:center; gap:8px;
  opacity:.92;
}
.sv-menulinks a:hover{opacity:1;}

@media (max-width: 720px){
  .sv-nav{display:none}
  .sv-nav.is-open{display:block}
  .sv-menulinks{gap:12px}
}

.sv-hero{
  border-radius:20px;
  /* allow overlap card under banner */
  overflow:visible;
  box-shadow: 0 20px 40px rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
}
.sv-hero img{width:100%;display:block;}

/* HERO game: banner di atas + kartu game overlap di bawah (mirip savagemaniac) */
.sv-hero-game{position:relative}
.sv-hero-banner{position:relative; overflow:hidden; border-radius:20px; height:220px}
.sv-hero-game .sv-hero-bg{width:100%; height:100%; object-fit:cover; display:block;}
.sv-hero-slider{position:absolute; inset:0;}
.sv-hero-slides{position:absolute; inset:0;}
.sv-hero-slide{position:absolute; inset:0; display:block; opacity:0; transform:scale(1.01); transition:opacity .35s ease, transform .6s ease; pointer-events:none;}

.sv-hero-slide.is-active{opacity:1; transform:scale(1); pointer-events:auto;}
.sv-hero-slide picture, .sv-hero-slide img{width:100%; height:100%; display:block;}
.sv-hero-banner .sv-hero-bg{width:100%; height:100%; object-fit:cover; display:block;}

.sv-hero-dots{position:absolute; left:12px; right:12px; bottom:10px; display:flex; gap:8px; justify-content:center; z-index:2;}
.sv-hero-dot{width:10px; height:10px; border-radius:999px; border:0; background:rgba(255,255,255,.42); cursor:pointer; padding:0;}
.sv-hero-dot.is-active{background:rgba(255,255,255,.92);}
.sv-hero-banner:after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.40) 100%); pointer-events:none}
.sv-hero-cardwrap{margin-top:-32px; padding:0 12px 12px}
.sv-hero-panel{position:relative; display:flex; gap:12px; align-items:center; padding:12px; border-radius:16px; background:linear-gradient(180deg, rgba(35,14,21,.92), rgba(15,10,25,.80)); border:1px solid rgba(255,255,255,.12); box-shadow:0 18px 50px rgba(0,0,0,.42); backdrop-filter:blur(10px)}

/* Ensure the dark hero panel spans full width of the hero container (desktop & mobile).
   Some mobile tweaks can cause the panel to shrink to content width.
   Keep clean/minimal look but force full width. */
body.single-sv_game .sv-hero-cardwrap{padding-left:0 !important; padding-right:0 !important;}
body.single-sv_game .sv-hero-panel{width:100% !important; box-sizing:border-box !important;}
.sv-hero-cover{width:86px; height:86px; border-radius:16px; overflow:hidden; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); flex:0 0 auto}
.sv-hero-cover img{width:100%; height:100%; object-fit:cover; display:block}
.sv-hero-meta{min-width:0}
.sv-hero-title{font-weight:900; font-size:20px; line-height:1.1; margin:0 0 4px; letter-spacing:.2px}
.sv-hero-sub{opacity:.86; font-weight:600; margin:0 0 8px; font-size:13px}
.sv-hero-badges .sv-badge{background:rgba(255,255,255,.08)}

@media (max-width: 520px){
  .sv-hero-banner{height:180px}
  .sv-hero-cardwrap{margin-top:-24px; padding:0 0 10px}
  .sv-hero-panel{padding:10px; gap:10px}
  .sv-hero-cover{width:74px; height:74px; border-radius:14px}
  .sv-hero-title{font-size:18px}
}

@media (min-width: 900px){
  .sv-hero-banner{height:280px}
  .sv-hero-cardwrap{margin-top:-44px}
}

.sv-title{
  display:flex; gap:10px; align-items:center;
  font-size:22px; font-weight:900; letter-spacing:.4px;
}
.sv-sub{color:var(--muted); margin-top:6px;}

.sv-popgrid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:14px;
}
.sv-popcard{
  display:flex; gap:12px; align-items:center;
  padding:14px; border-radius:18px;
  background: linear-gradient(180deg, var(--card) 0%, var(--card2) 100%);
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none;
  transition: transform .15s ease, outline-color .15s ease;
}
.sv-popcard:hover{
  outline:2px solid rgba(43,179,255,.30);
  transform: translateY(-1px);
}
.sv-popimg{
  width:62px;height:62px;border-radius:14px;flex:0 0 auto;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.sv-popimg img{width:100%;height:100%;object-fit:contain;border-radius:inherit;}
.sv-popmeta .name{font-weight:900;}
.sv-popmeta .pub{color:var(--muted);font-size:13px;margin-top:2px;}

.sv-pills{
  display:flex; gap:10px; overflow:auto; padding:8px 2px 0;
  scrollbar-width:none;
}
.sv-pills::-webkit-scrollbar{display:none;}
.sv-pill{
  white-space:nowrap;
  padding:10px 14px;
  border-radius:999px;
  background: var(--pill);
  border: 1px solid rgba(255,255,255,.12);
  color:var(--white);
  font-weight:800;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.sv-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
@media (max-width: 980px){ .sv-grid{grid-template-columns:repeat(3, 1fr);} }
@media (max-width: 680px){
  .sv-grid{grid-template-columns:repeat(2, 1fr);}
  .sv-popgrid{grid-template-columns:1fr;}
}

@media (max-width: 980px){
  .sv-popgrid{grid-template-columns:1fr 1fr;}
}

/* Mobile: Populer Sekarang tampil 1 kolom (list), lebih kecil, bukan kotak */
@media (max-width: 680px){
  .sv-popgrid{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .sv-popcard{
    padding: 10px 12px;
    border-radius: 16px;
    gap: 10px;
  }
  .sv-popimg{
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  .sv-popmeta .name{font-size:15px;}
  .sv-popmeta .pub{font-size:12px;}
}

.sv-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:22px;
  overflow:hidden;
  background:transparent;
  border:none;
  box-shadow:none;
  text-decoration:none;
  transform:translateZ(0);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.sv-card::after{display:none;}
.sv-card:hover{
  transform:translateY(-4px);
}
.sv-card:active{
  transform:scale(.985);
}
.sv-card .thumb{
  position:relative;
  aspect-ratio:1 / 1;
  background:transparent;
  padding:0;
  margin:0;
  line-height:0;
  border-radius:22px 22px 0 0;
  overflow:hidden;
}
.sv-card .thumb img{
  position:absolute;
  inset:-1px;
  width:calc(100% + 2px);
  height:calc(100% + 2px);
  max-width:none;
  object-fit:cover;
  object-position:center center;
  display:block;
  border-radius:22px 22px 0 0;
  transition:transform .35s ease, filter .35s ease;
}
.sv-card:hover .thumb img{
  transform:scale(1.03);
  filter:saturate(1.05) brightness(1.04);
}
.sv-card .meta{
  padding:14px 14px 16px;
  background:linear-gradient(180deg, rgba(18,58,120,.98) 0%, rgba(11,46,99,.98) 100%);
  border-top:1px solid rgba(255,255,255,.06);
}
.sv-card .meta .t{
  font-weight:900;
  font-size:16px;
  line-height:1.25;
  color:#fff;
}
.sv-card .meta .p{color:var(--muted);font-size:13px;margin-top:4px;}

.sv-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:999px;
  background: rgba(80,0,0,.65);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;font-weight:900;
}
.sv-btn:hover{border-color:rgba(255,255,255,.25)}

.sv-footer{
  margin-top:30px;
  background: radial-gradient(80% 80% at 50% 0%, rgba(255,255,255,.10), transparent 60%), var(--footer);
  padding:28px 0;
}
.sv-footgrid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
@media (max-width: 820px){ .sv-footgrid{grid-template-columns:repeat(2,1fr);} }

.sv-foot h4{margin:0 0 10px;font-weight:900;}
.sv-foot a{display:block;color:var(--muted);text-decoration:none;margin:8px 0;}
.sv-foot a:hover{color:var(--white);}
.sv-copy{color:var(--muted);text-align:center;margin-top:18px;}

.sv-social{
  width:40px;height:40px;border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
}
.sv-social:hover{border-color:rgba(255,255,255,.25)}

/* Content */
.sv-article{
  background: rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:16px;
}
.sv-page-title{margin:0 0 10px;font-weight:900}
.sv-content{color:rgba(255,255,255,.85)}


/* ===== Menu bar with icons + auth on right ===== */
.sv-menubar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  padding:8px 0 12px;
}

.sv-nav{padding:0; margin:0;}
.sv-menulinks{
  display:flex; gap:18px; flex-wrap:wrap;
  color:var(--white);
  margin:0; padding:0;
  list-style:none;
}
.sv-menulinks li{margin:0; padding:0;}
.sv-menulinks a{
  color:var(--white); text-decoration:none; font-weight:700;
  display:inline-flex; align-items:center; gap:8px;
  opacity:.92;
}
.sv-menulinks a:hover{opacity:1;}
.sv-mi-label{display:inline-block}

/* dashicons fix */
.dashicons{font-size:18px;width:18px;height:18px;line-height:18px;opacity:.9}

.sv-auth{
  display:flex;
  align-items:center;
  gap:16px;
  white-space:nowrap;
}
.sv-authlink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--white);
  text-decoration:none;
  font-weight:800;
  opacity:.92;
}
.sv-authlink:hover{opacity:1;}

@media (max-width: 720px){
  .sv-menubar{align-items:flex-start}
  .sv-nav{display:none}
  .sv-nav.is-open{display:block}
  /* hide Masuk/Daftar bar on mobile */
  .sv-auth{display:none !important}
}


/* ===== Game detail layout ===== */
.sv-gamehead{
  background: linear-gradient(180deg, rgba(36,0,0,.90), rgba(36,0,0,.75));
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:18px;
  display:flex;
  gap:16px;
  align-items:center;
}
.sv-gamecover{
  width:96px;height:96px;border-radius:18px;overflow:hidden;flex:0 0 auto;
  background:rgba(255,255,255,.08);
}
.sv-gamecover img{width:100%;height:100%;object-fit:cover;display:block}
.sv-gametitle{font-size:26px;font-weight:900;letter-spacing:.2px}
.sv-gamepub{color:rgba(255,255,255,.75);margin-top:2px}
.sv-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.sv-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  font-weight:800;
}

.sv-txgrid{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:18px;
}
@media (max-width: 980px){
  .sv-txgrid{grid-template-columns:1fr}
}
.sv-box{
  background: linear-gradient(180deg, rgba(36,0,0,.90), rgba(36,0,0,.75));
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  overflow:hidden;
}
.sv-box summary{
  cursor:pointer;
  padding:14px 16px;
  font-weight:900;
  list-style:none;
}
.sv-box summary::-webkit-details-marker{display:none}
.sv-boxin{padding:0 16px 16px;color:rgba(255,255,255,.86)}
.sv-editor p{margin:10px 0}

.sv-review{padding:16px; margin-top:16px}
.sv-review-head{font-weight:900;margin-bottom:10px}
.sv-review-score{font-size:54px;font-weight:900;line-height:1}
.sv-review-score span{font-size:18px;color:rgba(255,255,255,.75);font-weight:800}
.sv-review-sub{color:rgba(255,255,255,.75);margin:10px 0 14px}
.sv-review-bars .row{display:grid;grid-template-columns:20px 1fr 20px;align-items:center;gap:10px;margin:8px 0;color:rgba(255,255,255,.85)}
.sv-review-bars .bar{height:10px;border-radius:999px;background:rgba(255,210,0,.85)}
.sv-review-bars .bar.dim{background:rgba(255,255,255,.22)}
.sv-review-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  text-decoration:none;
  margin-top:14px;
}

.sv-stepcard{
  background: linear-gradient(180deg, rgba(36,0,0,.90), rgba(36,0,0,.75));
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  overflow:hidden;
  margin-bottom:14px;
}
.sv-stephead{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  font-weight:900;
}
.sv-stepno{
  width:38px;height:38px;border-radius:14px;
  background:rgba(43,179,255,.35);
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
}
.sv-stepbody{padding:0 16px 16px}
.sv-formrow{display:flex;gap:12px;flex-wrap: wrap; }

.sv-field{flex:1;min-width: 220px; min-width: 0; }
.sv-field label{display:block;font-weight:800;margin:10px 0 8px}
.sv-field input{
  width:100%;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(43,179,255,.18);
  color:rgba(255,255,255,.92);
  outline:0;
}
.sv-hint{
  margin-top:12px;
  padding:12px 14px;
  border-radius:16px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.80);
}

/* packages */
.sv-packgrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 520px){ .sv-packgrid{grid-template-columns:1fr} }
.sv-pack{
  text-align:left;
  padding:14px;
  border-radius:16px;
  background: rgba(255,255,255,.78);
  border:0;
  cursor:pointer;
  color:#222;
  display:block;
}
.sv-pack .top{font-weight:900}
.sv-pack .mid{opacity:.85;margin-top:2px}
.sv-pack .bot{opacity:.9;margin-top:6px;font-weight:900}
.sv-pack.is-active{
  outline: 3px solid rgba(43,179,255,.55);
}

/* payments */
.sv-payline{
  width:100%;
  display:grid;
  grid-template-columns: 120px 1fr 100px;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-radius:16px;
  background: rgba(255,255,255,.78);
  border:0;
  cursor:pointer;
  color:#222;
  margin-bottom:10px;
}
.sv-payline .tag{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 10px;border-radius:999px;
  background:#1d7bbb;color:#fff;font-weight:900;font-size:12px;
}
.sv-payline.is-active, .sv-paychip.is-active{outline: 3px solid rgba(43,179,255,.55);}

.sv-accordion{
  margin-top:10px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(43,179,255,.18);
}
.sv-accordion summary{
  padding:12px 14px;cursor:pointer;font-weight:900;
  list-style:none;
}
.sv-accordion summary::-webkit-details-marker{display:none}
.sv-accin{padding:10px 12px 12px;display:flex;gap:10px;flex-wrap:wrap}
.sv-paychip{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color:rgba(255,255,255,.92);
  padding:10px 12px;border-radius:999px;
  cursor:pointer;
}

/* promo apply btn */
.sv-apply{
  align-self:flex-end;
  height:46px;
  padding:0 16px;
  border-radius:999px;
  background: rgba(80,0,0,.65);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
  font-weight:900;
  cursor:pointer;
}

/* summary */
.sv-summary{
  background: linear-gradient(180deg, rgba(36,0,0,.90), rgba(36,0,0,.75));
  border:1px dashed rgba(255,255,255,.18);
  border-radius:22px;
  padding:14px 16px;
}
.sv-sumline{
  display:flex;justify-content:space-between;gap:12px;
  padding:8px 0;
  color:rgba(255,255,255,.86);
}
.sv-sumline b{color:rgba(255,255,255,.95)}
.sv-order{
  width:100%;
  margin-top:10px;
  height:52px;
  border-radius:999px;
  background: rgba(80,0,0,.78);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.95);
  font-weight:900;
  cursor:pointer;
  font-size:16px;
}
.sv-empty{
  padding:12px 14px;border-radius:16px;
  background: rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.85);
}


/* ===== Daftar Harga style (seperti screenshot) ===== */
.sv-pricelist{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 720px){
  .sv-pricelist{grid-template-columns:1fr}
}
.sv-pricecard{
  position:relative;
  background:#fff;
  border-radius:16px;
  padding:14px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  color:#222;
}
.sv-price-left .sv-qty{font-weight:900;font-size:16px;letter-spacing:.2px}
.sv-price .sv-old{
  font-size:12px;
  color:rgba(0,0,0,.45);
  text-decoration: line-through;
  margin-top:4px;
}
.sv-price .sv-new{
  font-size:14px;
  font-weight:900;
  margin-top:4px;
}
.sv-price-right img{
  width:54px;height:54px;object-fit:contain;
}
.sv-disc{
  position:absolute;
  right:10px; bottom:10px;
  background:#ff4d6d;
  color:#fff;
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:10px;
}

/* ID check status */
.sv-idstatus{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
  font-weight: 800;
  min-height: 18px;
}
.sv-idstatus.is-error{color: rgba(255,120,120,.95);}
.sv-idstatus.is-ok{color: rgba(150,255,180,.95);}


/* ===== Paket Filter Pills ===== */
.sv-pack-filters{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 10px 0 14px;
}
.sv-pill{
  appearance:none;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.9);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.sv-pill:hover{ transform: translateY(-1px); }
.sv-pill.is-active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}

/* ===== Paket Grid (2 kolom) ===== */
.sv-pack-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 520px){
  .sv-pack-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 380px){
  .sv-pack-grid{ grid-template-columns: 1fr 1fr; }
}

.sv-pack-card{
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  text-align:left;
  width:100%;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(13, 23, 41, .78), rgba(9, 16, 32, .72));
  color: rgba(255,255,255,.92);
  cursor:pointer;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.sv-pack-card:before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius: 20px;
  background: radial-gradient(circle at 30% 20%, rgba(120,220,255,.22), rgba(120,220,255,0) 50%),
              radial-gradient(circle at 70% 80%, rgba(255,120,190,.16), rgba(255,120,190,0) 55%);
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.sv-pack-card:hover{
  transform: translateY(-2px);
  border-color: rgba(120,220,255,.34);
  box-shadow: 0 20px 54px rgba(0,0,0,.26), 0 0 0 1px rgba(120,220,255,.14);
}
.sv-pack-card:hover:before{ opacity: 1; }

.sv-pack-card.is-selected{
  outline: 2px solid rgba(120, 220, 255, .85);
  box-shadow: 0 22px 58px rgba(0,0,0,.28), 0 0 0 1px rgba(120,220,255,.18);
}
.sv-pack-body{ display:flex; flex-direction:column; gap:6px; }
.sv-pack-title{
  font-weight: 950;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: .1px;
  display:flex;
  flex-wrap: nowrap;       /* keep "1B + 800M" in one line */
  align-items:center;
  gap: 4px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;        /* keep in one line, but NO ellipsis */
  text-overflow: clip;
}


/* Small coin placed before amount(s) */
.sv-pack-amt{ display:inline-flex; align-items:center; gap:6px; }
.sv-pack-plus{ opacity:.9; font-weight: 950; }

/* highlight bonus/additional amount (after +) */
.sv-pack-amt.is-bonus .sv-pack-amt-text{
  background: linear-gradient(90deg, rgba(126,240,255,1), rgba(255,189,96,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(126,240,255,.18);
}

.sv-pack-amt.is-bonus .sv-pack-coin-sm{
  filter: saturate(1.2) brightness(1.06);
}

.sv-pack-coin-sm{
  width: 18px;
  height: 18px;
  display:inline-block;
  position: relative;
  flex: 0 0 18px;
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: none;
}
.sv-pack-coin-sm:before,
.sv-pack-coin-sm:after{
  display:none;
  content:none;
}

/* allow small icon from product image when available */
.sv-pack-coin-sm.is-img{
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.sv-pack-coin-sm.is-img:before,
.sv-pack-coin-sm.is-img:after{ display:none; }
.sv-pack-bonus{ display:flex; align-items:center; gap:8px; margin-top:6px; font-weight: 900; font-size: 12px; opacity:.95; }
.sv-bonus-ico{ width:18px; height:18px; border-radius:999px; display:inline-block; position:relative; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.sv-bonus-ico:before{ content:'+'; position:absolute; inset:0; display:grid; place-items:center; font-size:14px; font-weight: 950; line-height:1; }
.sv-pack-bonus-text{ opacity:.98; }

.sv-pack-prices{ display:flex; flex-direction:column; gap:4px; }
.sv-pack-old{
  font-size: 12px;
  opacity: .72;
  text-decoration: line-through;
  font-weight: 900;
}
.sv-pack-new{
  font-size: 14px;
  font-weight: 950;
}

.sv-pack-disc{
  position:absolute;
  right: 10px;
  top: -10px;
  background: #ff4d6d;
  color:#fff;
  font-weight: 950;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
}

/* ===== Coin Icon (gold) ===== */
.sv-pack-icon{ width: 56px; height: 56px; display:flex; align-items:center; justify-content:center; flex:0 0 56px; }
.sv-pack-icon img{ width: 56px; height: 56px; object-fit: contain; }

/* Hide large right icon (premium compact layout) */
.sv-pack-card .sv-pack-icon{ display:none; }

/* Circular coin with rim + shine (looks good on dark cards) */
.sv-coin{
  width: 52px;
  height: 52px;
  display:inline-block;
  border-radius: 999px;
  position: relative;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.95), rgba(255,255,255,0) 35%),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,.25), rgba(0,0,0,0) 55%),
    linear-gradient(135deg, #ffe9ad, #d89b00);
  box-shadow:
    0 12px 20px rgba(0,0,0,.28),
    inset 0 2px 0 rgba(255,255,255,.40),
    inset 0 -3px 0 rgba(0,0,0,.18);
}

/* ===== Mobile/Tablet: make coin + text more compact & clean ===== */
@media (max-width: 768px){
  .sv-pack-card{ padding: 12px 12px; gap: 10px; border-radius: 16px; }
  .sv-pack-body{ gap: 5px; }
  .sv-pack-title{ font-size: 13px; font-weight: 700; }
  .sv-pack-old{ font-size: 11px; }
  .sv-pack-new{ font-size: 12px; font-weight: 800; }

  .sv-pack-icon{ width: 42px; height: 42px; flex: 0 0 42px; }
  .sv-pack-icon img{ width: 42px; height: 42px; }
  .sv-coin{ width: 38px; height: 38px; box-shadow: 0 10px 18px rgba(0,0,0,.24), inset 0 2px 0 rgba(255,255,255,.38), inset 0 -3px 0 rgba(0,0,0,.16); }
  .sv-coin:before{ inset: 5px; }
  .sv-coin:after{ inset: 10px; }
}

@media (max-width: 380px){
  .sv-pack-title{ font-size: 12px; }
  .sv-pack-new{ font-size: 12px; }
  .sv-pack-icon{ width: 40px; height: 40px; flex: 0 0 40px; }
  .sv-pack-icon img{ width: 40px; height: 40px; }
  .sv-coin{ width: 36px; height: 36px; }
}
.sv-coin:before{
  content:'';
  position:absolute;
  inset: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff2c2, #c78500);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35);
  opacity: .95;
}
.sv-coin:after{
  content:'';
  position:absolute;
  left: 15px;
  top: 16px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%);
  opacity: .70;
}


.sv-promostatus{margin-top:10px;font-weight:700}
.sv-promostatus.ok{color:#bfffd1}
.sv-promostatus.err{color:#ffd1d1}
.sv-payline.is-selected,.sv-paychip.is-selected{outline:2px solid rgba(255,255,255,.6);}

/* SV_MOBILE_NAV_V134 */
.sv-nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  z-index: 9997;
}
body.sv-nav-open .sv-nav-overlay{opacity:1; pointer-events:auto;}
@media (max-width: 991px){
  nav[data-nav-menu], ul[data-nav-menu]{
    position:fixed;
    top:72px;
    right:12px;
    left:12px;
    max-height: calc(100vh - 96px);
    overflow:auto;
    background: rgba(10, 25, 45, 0.92);
    border:1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 10px;
    transform: translateY(-8px);
    opacity:0;
    pointer-events:none;
    z-index: 9998;
    backdrop-filter: blur(10px);
  }
  body.sv-nav-open nav[data-nav-menu],
  body.sv-nav-open ul[data-nav-menu]{
    opacity:1;
    pointer-events:auto;
    transform: translateY(0);
  }
}

/* SV_MOBILE_DRAWER_V136 */
/* hamburger only mobile/tablet */
@media (min-width: 992px){
  [data-nav-toggle]{ display:none !important; }
  .sv-mobile-drawer{ display:none !important; }
  .sv-nav-overlay{ display:none !important; }
}
@media (max-width: 991px){
  /* Hide desktop menu (if exists) to avoid duplicate */
  nav.sv-nav, .sv-nav, .main-nav{
    display:none !important;
  }
  /* keep header layout tidy */
}

.sv-mobile-drawer{
  position:fixed;
  top:72px;
  left:12px; right:12px;
  z-index: 9999;
  opacity:0;
  pointer-events:none;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}
body.sv-nav-open .sv-mobile-drawer{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}
.sv-mobile-drawer-inner{
  background: rgba(10, 25, 45, 0.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 50px rgba(0,0,0,.25);
}
.sv-mobile-menu-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sv-mobile-menu-list a{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:12px 14px;
  border-radius: 14px;
  color:#fff;
  text-decoration:none;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.sv-mobile-menu-list a:active{
  transform: translateY(1px);
}

.sv-mobile-auth{
  margin-top: 12px;
  display:flex;
  gap:10px;
  justify-content:center; /* center align */
  align-items:center;
  flex-wrap:wrap;
}
.sv-auth-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  min-width: 140px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  transition: transform .15s ease, opacity .15s ease;
  color:#fff;
}
.sv-auth-btn:hover{ opacity:.95; }
.sv-auth-btn:active{ transform: translateY(1px); }
.sv-auth-login{
  background: rgba(255,255,255,.08);
}
.sv-auth-register{
  background: linear-gradient(135deg, rgba(255,78,78,.95), rgba(146,44,44,.95));
  border-color: rgba(255,100,100,.35);
}

/* SV_MOBILE_DRAWER_STYLE_V137 */
.sv-mobile-drawer{ position:fixed; left:12px; right:12px; z-index:9999; }
@media (max-width: 991px){ .sv-mobile-drawer{ top: 74px; } }
.sv-mobile-glow{
  position:absolute;
  inset:-40px -20px auto -20px;
  height: 220px;
  background: radial-gradient(circle at 30% 40%, rgba(0,180,255,.35), transparent 55%),
              radial-gradient(circle at 80% 20%, rgba(255,80,80,.25), transparent 55%),
              radial-gradient(circle at 50% 90%, rgba(120,80,255,.18), transparent 55%);
  filter: blur(2px);
  pointer-events:none;
  opacity:.95;
}
.sv-mobile-drawer-inner{
  position:relative;
  background: rgba(8, 22, 40, 0.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  overflow:hidden;
}

.sv-mobile-joincard{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}
.sv-join-title{ font-size: 18px; font-weight: 800; color:#fff; margin-bottom: 6px; }
.sv-join-desc{ font-size: 13px; line-height:1.45; color: rgba(255,255,255,.78); margin-bottom: 12px; }
.sv-join-actions{ display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
.sv-join-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 16px; min-width: 150px; border-radius: 14px;
  font-weight: 800; text-decoration:none;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  transition: transform .15s ease, opacity .15s ease;
  color:#fff;
}
.sv-join-btn:active{ transform: translateY(1px); }
.sv-join-register{ background: rgba(50, 200, 120, .92); border-color: rgba(50,200,120,.4); }
.sv-join-login{ background: rgba(0, 130, 255, .92); border-color: rgba(0,130,255,.4); }
.sv-join-ico{
  width: 26px; height: 26px; display:inline-flex; align-items:center; justify-content:center;
  border-radius: 9px; background: rgba(255,255,255,.18); font-weight: 900;
}

.sv-mobile-menuwrap{ margin-top: 8px; }
.sv-mobile-menu-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 420px){ .sv-mobile-menu-grid{ grid-template-columns: 1fr; } }
.sv-mobile-menu-grid a{
  display:flex; align-items:center; gap:10px;
  padding: 12px 12px; border-radius: 14px;
  color:#fff; text-decoration:none;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.sv-mobile-menu-grid a .sv-mi{
  width: 34px; height: 34px; border-radius: 12px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(0,170,255,.18);
  border:1px solid rgba(0,170,255,.22);
  flex: 0 0 34px;
}
.sv-mobile-menu-grid a .sv-mi svg{ width: 18px; height: 18px; fill:#9fe3ff; }
.sv-mobile-menu-grid a .sv-mt{ font-weight: 800; font-size: 14px; }
.sv-mobile-menu-grid a .sv-ms{ margin-left:auto; opacity:.55; }

.sv-mobile-social{ margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.10); }
.sv-social-label{ font-size: 12px; color: rgba(255,255,255,.75); margin-bottom: 10px; }
.sv-social-row{ display:flex; gap: 10px; align-items:center; }
.sv-social-btn{
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255,255,255,.95);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  text-decoration:none;
}
.sv-social-btn svg{ width: 22px; height: 22px; fill: #0b6cff; }

/* SV_MOBILE_DRAWER_STYLE_V138 */
.sv-mobile-drawer-inner{
  background: linear-gradient(180deg, #0b2a52 0%, #081b34 100%);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: none;
}
.sv-drawer-close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.sv-drawer-close:active{ transform: translateY(1px); }

.sv-join-actions{
  flex-wrap: nowrap;
}
.sv-join-btn{
  min-width: 0;
  flex: 1 1 0;
}
.sv-social-label{ text-align:center; }
.sv-social-row{ justify-content:center; }

.sv-mobile-section{ margin-top: 14px; }
.sv-mobile-section-title{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin: 10px 4px 10px;
}
.sv-mobile-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.sv-mobile-list a{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 12px;
  border-radius: 14px;
  color:#fff; text-decoration:none;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.sv-mobile-list a:after{ content:"›"; opacity:.55; }

/* SV_MOBILE_DRAWER_STYLE_V139 */
.sv-mobile-drawer{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.sv-mobile-drawer.is-open{ display:block; }
.sv-drawer-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background: rgba(0,0,0,.45);
  padding:0;
}
.sv-mobile-drawer-inner{
  position:absolute;
  top: 0;
  right: 0;
  width: min(420px, 92vw);
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 18px;
  background: linear-gradient(180deg, #0b2a52 0%, #081b34 100%);
  border-left: 1px solid rgba(255,255,255,.10);
  box-shadow: -20px 0 50px rgba(0,0,0,.35);
}

/* Full drawer for mobile/tablet */
@media (max-width: 991px){
  .sv-mobile-drawer-inner{ width: 100vw; }
}
.sv-mobile-glow{
  position:absolute;
  top: -140px;
  right: -120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at center, rgba(80,160,255,.45), rgba(80,160,255,0) 60%);
  filter: blur(6px);
  pointer-events:none;
}
.sv-drawer-close{
  position: sticky;
  top: 10px;
  margin-left: auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  z-index: 2;
}
.sv-mobile-joincard{
  margin-top: 10px;
  padding: 14px;
}
.sv-join-title{ font-size: 18px; }
.sv-join-desc{ font-size: 13px; line-height: 1.45; }
.sv-join-actions{ gap: 10px; }
.sv-join-btn{ padding: 12px 12px; border-radius: 14px; }

.sv-mobile-menuwrap{ margin-top: 12px; }
.sv-mobile-section{ margin-top: 12px; }
.sv-mobile-section-title{ margin: 10px 4px 10px; }

.sv-mobile-list{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sv-mobile-list a{
  padding: 12px 12px;
  border-radius: 14px;
  font-size: 14px;
}
@media (max-width: 360px){
  .sv-mobile-list{ grid-template-columns: 1fr; }
}

.sv-mobile-social{ margin-top: 14px; padding-bottom: 8px; }
.sv-social-label{ text-align:center; font-size: 13px; }
.sv-social-row{ justify-content:center; gap: 12px; }

/* SV_PACK_FILTER_MOBILE_V140 */
.sv-pfilters{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom: 6px;
}
.sv-pfilters::-webkit-scrollbar{ height: 0; }
.sv-pfilters .sv-pill{
  flex: 0 0 auto;
  white-space:nowrap;
  font-size: 13px;
  padding: 10px 12px;
}
@media (max-width: 420px){
  .sv-pfilters{ gap:8px; }
  .sv-pfilters .sv-pill{ font-size:12px; padding:9px 10px; border-radius: 14px; }
}

/* SV_MOBILE_TIGHT_V140 */
html, body{ overflow-x:hidden; }
.sv-wrap{ max-width: 1100px; }
@media (max-width: 768px){
  .sv-card{ padding: 14px; }
  /* homepage popular cards should stay edge-to-edge */
  .home .sv-grid .sv-card{ padding:0 !important; min-width:0 !important; }
  .home .sv-grid .sv-card .thumb{ margin:0 !important; }
  .home .sv-grid .sv-card .meta{ margin:0 !important; }
  .sv-step{ padding: 12px; }
  .sv-step h3{ font-size: 16px; }
  .sv-hint{ font-size: 12px; }
  .sv-input, .sv-select{ font-size: 14px; }
  .sv-pack{ padding: 12px; }
  .sv-pack-title{ font-size: 15px; }
  .sv-pack-price{ font-size: 15px; }
  .sv-pack-old{ font-size: 12px; }
  .sv-method{ padding: 12px; }
  .sv-order{ padding: 14px 14px; font-size: 15px; }
}


.sv-field input,
.sv-field textarea{
  width: 100%;
  max-width: 100%;
  font-size: 16px; /* prevent mobile zoom */
}

@media (max-width: 520px){
  .sv-formrow{ flex-direction: column; gap: 10px; }
  .sv-field{ width: 100%; }
}


@media (max-width: 520px){
  .sv-pack-card{ padding: 12px 12px; border-radius: 18px; }
  .sv-pack-title{ font-size: 18px; }
  .sv-pack-price{ font-size: 16px; }
  .sv-pack-old{ font-size: 13px; }
  .sv-pack-badge{ font-size: 12px; padding: 6px 10px; }
  .sv-pack-icon img{ width: 44px; height: 44px; }
  .sv-coin{ width: 44px; height: 44px; border-radius: 12px; }
}



/* ===== HERO: Banner + Game Card (Savagemaniac-style) ===== */
@media (max-width: 768px){
  /* Banner stays on top; card sits below and overlaps sedikit */
  .sv-hero-banner{height: 230px;}
  .sv-hero-cardwrap{margin-top: -56px;}

  /* Panel lebih ramping, tidak menutupi banner berlebihan */
  .sv-hero-panel{padding: 14px 14px 16px; align-items:center;}
  .sv-hero-cover{
    width: 96px; height: 96px;
    /* keep cover vertically aligned (no floating on mobile) */
    transform: none;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
  }
  .sv-hero-meta .sv-hero-title{font-size: 20px; line-height: 1.15;}
  .sv-hero-meta .sv-hero-sub{font-size: 13px;}
  .sv-hero-badges .sv-badge{padding: 8px 10px; font-size: 13px;}
}
@media (max-width: 420px){
  .sv-hero-banner{height: 210px;}
  .sv-hero-cardwrap{margin-top: -52px;}
  .sv-hero-cover{width: 88px; height: 88px; transform: none;}
}

/* ===============================
   Live Chat / Help Modal (Theme)
   =============================== */
.sv-help-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:flex-end;justify-content:center;padding:18px;}
.sv-help-modal.is-open{display:flex;}
.sv-help-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter: blur(4px);}
.sv-help-sheet{position:relative;width:min(520px,100%);border-radius:22px;
  background:linear-gradient(180deg,rgba(15,35,70,.96),rgba(8,18,35,.96));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  overflow:hidden;
}
.sv-help-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 12px;}
.sv-help-title{font-size:18px;font-weight:900;letter-spacing:.2px;color:#fff;}
.sv-help-sub{margin-top:4px;font-size:13px;color:rgba(255,255,255,.72);line-height:1.35;}
.sv-help-close{width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.sv-help-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px;}
.sv-help-card{border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);padding:14px;}
.sv-help-card__title{font-size:14px;font-weight:900;color:#fff;margin-bottom:10px;}
.sv-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width: 420px){.sv-help-grid{grid-template-columns:1fr;}}
.sv-help-option{display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:16px;
  background:linear-gradient(180deg,rgba(34,197,94,.12),rgba(34,197,94,.06));
  border:1px solid rgba(34,197,94,.20);color:#fff;text-decoration:none;font-weight:800;}
.sv-help-option .sv-ico{display:inline-flex;align-items:center;justify-content:center;color:#fff;opacity:.95}
.sv-help-option .sv-ico svg{display:block}
.sv-help-option .dot{width:10px;height:10px;border-radius:99px;box-shadow:0 0 0 6px rgba(255,255,255,.06);}
.sv-help-option .dot.on{background:#22c55e;box-shadow:0 0 0 6px rgba(34,197,94,.16);}
.sv-help-option .dot.off{background:#ef4444;box-shadow:0 0 0 6px rgba(239,68,68,.14);}
.sv-help-telegram{display:flex;gap:12px;align-items:center;padding:14px;border-radius:18px;margin-top:12px;
  background:linear-gradient(180deg,rgba(28,146,255,.18),rgba(28,146,255,.08));
  border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;}
.sv-help-telegram .tg-icon{width:44px;height:44px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(28,146,255,.25);color:#fff;flex:0 0 auto;}
.sv-help-telegram .tg-icon svg{width:22px;height:22px;display:block}
.sv-help-telegram .tg-title{font-weight:900}
.sv-help-telegram .tg-sub{font-size:12px;color:rgba(255,255,255,.7);margin-top:2px}
.sv-help-live{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;
  background:linear-gradient(180deg,rgba(59,130,246,.20),rgba(59,130,246,.08));
  border:1px solid rgba(255,255,255,.12);}
.sv-help-live .ico{width:44px;height:44px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(59,130,246,.22);color:#fff;}
.sv-help-live .txt .t{font-weight:900;color:#fff}
.sv-help-live .txt .s{font-size:12px;color:rgba(255,255,255,.72);margin-top:2px;line-height:1.35}
.sv-help-live .cta{margin-left:auto}
.sv-help-live .cta button{cursor:pointer;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);color:#fff;font-weight:900}

/* Desktop quick access button */
.sv-desktop-chat{display:none}
@media (min-width: 980px){
  .sv-desktop-chat{position:fixed;right:18px;bottom:18px;z-index:2147483647;pointer-events:auto;display:flex;align-items:center;gap:10px;
    padding:12px 14px;border-radius:999px;
    background:linear-gradient(180deg,rgba(15,35,70,.92),rgba(8,18,35,.92));
    border:1px solid rgba(255,255,255,.14);
    color:#fff;font-weight:900;letter-spacing:.3px;
    box-shadow:0 18px 55px rgba(0,0,0,.45);
  }
  .sv-desktop-chat__dot{width:10px;height:10px;border-radius:99px;background:#22c55e;box-shadow:0 0 0 6px rgba(34,197,94,.18)}
  .sv-desktop-chat__txt{font-size:14px}
}

/* Hide common 3rd party floating chat launchers to avoid double widgets */
.tawk-min-container,.crisp-client,#tidio-chat,#zsiq_float,.zsiq_float,.fb_dialog,.fb-customerchat{display:none !important;}


/* Hide other live-chat plugins (avoid double widgets) */
#blackchat, .blackchat, .black-chat, .black-chat-widget, .blackchat-widget,
#blc-chat, .blc-chat, .blc-widget, .blc-launcher,
iframe[src*="blackchat"], iframe[src*="black-chat"], iframe[src*="blc"],
.bc-widget, .bc-launcher, .chatra, #chatra, #crisp-chatbox, .crisp-client { display:none !important; }

/* Icon sizing */
.sm-wa-ico{display:inline-flex;align-items:center;justify-content:center;margin-right:10px}
.sm-wa-ico svg{display:block}
.sm-tg-card svg{width:28px;height:28px}


/* --- Mobile form fix (prevent overflow / misaligned inputs) --- */
@media (max-width: 520px){
  .sv-formrow{flex-direction:column; gap:10px;}
  .sv-field{min-width:0; width:100%;}
}

/* === SVCL: Force SM Live Chat PRO widget clickable on desktop === */
#svcl-livechat-mount{
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 2147483647 !important;
  pointer-events: none !important; /* wrapper doesn't block page */
}
#svcl-livechat-mount *{
  pointer-events: auto !important; /* but widget elements are clickable */
}


/* Desktop Live Chat launcher (opens chooser modal) */
.sv-chatdesk{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:2147483646;
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(8,18,36,.72);
  backdrop-filter: blur(10px);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.sv-chatdesk__dot{
  width:10px;height:10px;border-radius:999px;
  background:#2ecc71;
  box-shadow:0 0 0 3px rgba(46,204,113,.18);
}
.sv-chatdesk__txt{font-size:13px; letter-spacing:.2px;}
@media (min-width: 981px){
  .sv-chatdesk{display:inline-flex;}
  /* hide bottom nav on desktop */
  .sv-bnav{display:none !important;}
}


/* Customizer: Announcement Bar */
.sv-announce{background:rgba(0,0,0,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.12)}
.sv-announce .sv-wrap{padding:10px 14px;text-align:center}
.sv-announce-text,.sv-announce-link{color:#fff;font-weight:700;font-size:13px;text-decoration:none;display:inline-block}
.sv-announce-link:hover{text-decoration:underline}




/* ensure the banner image fills the full-width container */
body.single-sv_game .sv-hero-banner .sv-hero-bg{
  width:100% !important;
  height:100% !important;
}

/* === Clean minimal mobile hero alignment (game page) ===
   Keep logo + title + badges in one neat row like homepage.
   Re-contain the hero card on small screens so the logo doesn't look off.
*/
@media (max-width: 768px){
  body.single-sv_game .sv-hero-cardwrap{
    padding: 0 12px 12px !important;
  }
  body.single-sv_game .sv-hero-panel{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 16px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
  }
  body.single-sv_game .sv-hero-cover{
    width: 88px !important;
    height: 88px !important;
    border-radius: 18px !important;
    flex: 0 0 auto;
  }
  body.single-sv_game .sv-hero-meta{min-width: 0;}
  body.single-sv_game .sv-hero-title{font-size: 20px !important; line-height: 1.2;}
  body.single-sv_game .sv-hero-sub{font-size: 14px !important;}
  body.single-sv_game .sv-hero-badges{display:flex; gap:8px; flex-wrap:wrap;}
}


/* ===== WPPartenggen mobile clean v1.6.40 (single_sv_game) ===== */
@media (max-width: 980px){
  /* pastikan tidak kepotong & tidak geser kanan */
  html, body{ width:100%; overflow-x:hidden; }
  .single-sv_game #page,
  .single-sv_game .site,
  .single-sv_game .site-content,
  .single-sv_game .content-area,
  .single-sv_game .site-main,
  .single-sv_game .entry-content,
  .single-sv_game main{
    overflow: visible !important;
  }

  /* ruang bawah aman dari bottom bar */
  body.single-sv_game{
    padding-bottom: 140px !important;
  }

  /* center kolom kanan */
  .single-sv_game .sv-right{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    width:100% !important;
  }

  /* rapikan wrapper agar benar-benar simetris (sering terasa geser kanan karena padding/overflow parent) */
  /* Jangan ubah header/footer: batasi ke konten <main> */
  .single-sv_game main .sv-wrap{ padding-left:12px !important; padding-right:12px !important; }
  .single-sv_game .sv-section{ padding-left:0 !important; padding-right:0 !important; }
  .single-sv_game .sv-txgrid{ width:100% !important; margin:0 auto !important; }

  /* semua card di kolom kanan konsisten lebarnya */
  .single-sv_game .sv-right{ --svRightW: min(348px, calc(100% - 40px)); }

  .single-sv_game .sv-right .sv-stepcard,
  .single-sv_game .sv-right .sv-box,
  .single-sv_game .sv-right .sv-packgrid,
  .single-sv_game .sv-right .sv-payline,
  .single-sv_game .sv-right .sv-summary,
  .single-sv_game .sv-summary{
    width: var(--svRightW) !important;
    max-width: var(--svRightW) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* step card spacing */
  .single-sv_game .sv-stepcard{ border-radius:18px !important; }

  /* kecilin font supaya clean */
  .single-sv_game .sv-stephead{ font-weight:650 !important; font-size:14px !important; padding:11px 12px !important; }
  .single-sv_game .sv-stepno{ width:34px !important; height:34px !important; border-radius:12px !important; }
  .single-sv_game .sv-stepbody{ padding:0 12px 12px !important; }

  .single-sv_game .sv-field label{ font-size:11.5px !important; font-weight:550 !important; margin:10px 0 6px !important; }
  .single-sv_game .sv-field input,
  .single-sv_game .sv-field select,
  .single-sv_game .sv-field textarea{
    font-size:12.5px !important;
    font-weight:400 !important;
    padding:9px 11px !important;
  }
  .single-sv_game .sv-hint,
  .single-sv_game .sv-boxin p,
  .single-sv_game .sv-boxin,
  .single-sv_game .sv-editor{
    font-size:12px !important;
    line-height:1.55 !important;
  }

  /* grid nominal aman */
  /* grid nominal: paksa 2 kolom yang aman, hilangkan min-width yang bikin overflow */
  .single-sv_game .sv-packgrid{
    width: min(348px, calc(100% - 40px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:10px !important;
  }
  .single-sv_game .sv-packgrid > *{ min-width:0 !important; }
  .single-sv_game .sv-pack{
    border-radius:18px !important;
    min-width:0 !important;
  }
  .single-sv_game .sv-pack .sv-pack-title{ font-size:15px !important; font-weight:650 !important; }
  .single-sv_game .sv-pack .sv-pack-sub{ font-size:12px !important; }
  .single-sv_game .sv-pack .sv-pack-price{ font-size:12px !important; font-weight:550 !important; }

  /* filter chips tidak kepotong */
  .single-sv_game .sv-pack-filters{
    width: min(348px, calc(100% - 40px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .single-sv_game .sv-pack-filters::-webkit-scrollbar{ display:none; }

  /* payment method card sering kepotong karena isi fixed: paksa shrink */
  .single-sv_game .sv-payline,
  .single-sv_game .sv-payitem,
  .single-sv_game .sv-paycard{
    max-width: min(348px, calc(100% - 40px)) !important;
    width: 100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}



/* ===========================
   WPPartenggen 1.6.46
   Samakan lebar kolom 1-4 (sv-stepcard) dengan kolom 5 (sv-summary)
   khusus halaman game (single-sv_game)
   =========================== */
.single-sv_game .sv-right > .sv-stepcard,
.single-sv_game .sv-right > .sv-summary{
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Desktop/tablet: ikut lebar kolom kanan */
@media (min-width: 769px){
  .single-sv_game .sv-right > .sv-stepcard,
  .single-sv_game .sv-right > .sv-summary{
    max-width: 560px !important; /* aman & konsisten */
  }
}

/* Mobile: pastikan semua kartu kanan punya ukuran identik */
@media (max-width: 768px){
  .single-sv_game .sv-right > .sv-stepcard,
  .single-sv_game .sv-right > .sv-summary{
    width: min(360px, calc(100% - 40px)) !important;
    max-width: 360px !important;
  }
}

/* ===========================
   WPPartenggen 1.6.47
   Ikuti lebar kolom #5 (sv-summary):
   buat kolom 1-4 (sv-stepcard) benar-benar sama lebar dengan kolom 5
   (mengatasi kasus rule lama hanya kena sebagian selector / terlihat beda di mobile)
   =========================== */
@media (max-width: 768px){
  /* beri padding wrapper agar ada ruang kiri-kanan, lalu semua card = 100% wrapper */
  .single-sv_game .sv-right{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .single-sv_game .sv-right .sv-stepcard,
  .single-sv_game .sv-right .sv-summary,
  .single-sv_game .sv-right .sv-box{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===========================
   WPPartenggen 1.6.48
   Mobile centering fix (no guessing):
   - Pastikan semua section (kiri & kanan) benar-benar CENTER di viewport
   - Semua card ikut lebar wrapper yang sama (terutama kolom 1-4 mengikuti kolom 5)
   - Hilangkan offset dari padding wrapper parent yang bikin geser ke kanan
   =========================== */
@media (max-width: 768px){
  /* IMPORTANT: jangan mempengaruhi header/footer yang juga memakai .sv-wrap */
  body.single-sv_game main .sv-wrap,
  body.single-sv_game main .sv-section,
  body.single-sv_game main .sv-txgrid{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* wrapper kolom: center, simetris, tanpa geser */
  body.single-sv_game main .sv-left,
  body.single-sv_game main .sv-right{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
  }

  /* semua card di dalam kolom harus ikut lebar wrapper (100%) */
  body.single-sv_game main .sv-left > *,
  body.single-sv_game main .sv-right > *{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* khusus elemen inti */
  body.single-sv_game main .sv-stepcard,
  body.single-sv_game main .sv-summary,
  body.single-sv_game main .sv-box,
  body.single-sv_game main .sv-payline,
  body.single-sv_game main .sv-pack-filters,
  body.single-sv_game main .sv-packgrid{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ===============================
   Premium Pack Title (single-line, auto-scale)
   - Forces "🪙 1B + 🪙 800M" in ONE LINE
   - No ellipsis; shrinks via clamp()
   =============================== */
.sv-pack-card .sv-pack-body{min-width:0;}
.sv-pack-card .sv-pack-title{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  gap:6px !important;
  line-height:1.1 !important;
  /* auto-scale without JS */
  /* slightly larger for premium look; still shrinks on narrow cards */
  font-size:clamp(14px, 2.2vw, 18px) !important;
}
.sv-pack-card .sv-pack-amt{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  min-width:0 !important;
}
.sv-pack-card .sv-pack-coin-sm{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  display:inline-block !important;
  background-color: transparent !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

/* Price a bit larger to reduce empty space */
.sv-pack-card .sv-pack-new{ font-size:14px !important; }

/* Selected state: clear highlight so user knows which pack is chosen */
.sv-pack-card.is-selected{
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(120,220,255,.55) !important;
  box-shadow:
    0 0 0 2px rgba(120,220,255,.22) inset,
    0 14px 34px rgba(0,0,0,.35),
    0 0 28px rgba(120,220,255,.20);
  background: radial-gradient(120% 140% at 0% 0%, rgba(50,170,255,.20), rgba(0,0,0,0) 55%),
              radial-gradient(120% 140% at 100% 100%, rgba(140,80,255,.18), rgba(0,0,0,0) 55%);
}
.sv-pack-card.is-selected .sv-pack-title{
  text-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.sv-pack-card .sv-pack-coin-sm.is-img{
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.sv-pack-card .sv-pack-plus{
  font-weight:800 !important;
  opacity:.85 !important;
  margin:0 2px !important;
}
.sv-pack-card .sv-pack-amt.is-bonus .sv-pack-amt-text{
  background: linear-gradient(90deg, #8ee6ff, #b7a6ff, #ffd38a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 14px rgba(142,230,255,.18);
}
.sv-pack-card .sv-pack-icon{display:none !important;}


/* === Mobile: make description box width consistent with step cards === */
@media (max-width: 768px){
  body.single-sv_game .sv-txgrid{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  body.single-sv_game .sv-left,
  body.single-sv_game .sv-right{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.single-sv_game .sv-left .sv-box,
  body.single-sv_game .sv-right .sv-stepcard,
  body.single-sv_game .sv-right .sv-summary,
  body.single-sv_game .sv-right .sv-review{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}



/* === Fix: ensure description box and step cards share same full width on mobile (override older svRightW clamp) === */
@media (max-width: 768px){
  body.single-sv_game .sv-right{ --svRightW: 100% !important; }
  body.single-sv_game .sv-right .sv-stepcard,
  body.single-sv_game .sv-right .sv-box,
  body.single-sv_game .sv-right .sv-packgrid,
  body.single-sv_game .sv-right .sv-payline,
  body.single-sv_game .sv-right .sv-summary,
  body.single-sv_game .sv-summary,
  body.single-sv_game .sv-left .sv-box{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.single-sv_game .sv-txgrid{
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }
}



/* === FIX: left description box width match right cards on mobile + ensure details arrow visible === */
@media (max-width: 768px){
  body.single-sv_game .sv-left .sv-box{
    width: var(--svRightW, 100%) !important;
    max-width: var(--svRightW, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.single-sv_game .sv-left{ width: 100% !important; }
}

/* details arrow (summary chevron) */
details.sv-box > summary{
  position: relative;
  padding-right: 44px !important;
}
details.sv-box > summary::-webkit-details-marker{ display:none; }
details.sv-box > summary::marker{ content:""; }
details.sv-box > summary::after{
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 18px;
  line-height: 1;
  opacity: .9;
}
details.sv-box[open] > summary::after{
  transform: translateY(-50%) rotate(180deg);
}



/* ===== Footer width + alignment fix (keep background full, constrain content) ===== */
.sv-footer .sv-wrap{
  max-width:1100px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  padding-left:14px;
  padding-right:14px;
  box-sizing:border-box;
}

.sv-foot-socialrow{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.sv-foot-follow{ color:rgba(255,255,255,.75); }

@media (max-width: 520px){
  .sv-foot-socialrow{ justify-content:flex-start; }
}

/* On game page we allow full-width content inside <main>, but NEVER expand footer */
body.single-sv_game .sv-footer .sv-wrap{
  max-width:1100px !important;
  padding-left:14px !important;
  padding-right:14px !important;
}

/* Header mobile spacing fix */
@media (max-width:768px){

  .sv-header .sv-wrap{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .sv-row{
    gap:12px !important;
  }

  .sv-logo{
    margin-right:6px !important;
  }

  .sv-iconbtn{
    margin-left:6px !important;
  }

}

@media (max-width:768px){

  body .sv-header .sv-wrap{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  body .sv-header .sv-row{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
  }

  body .sv-header .sv-logo{
    margin-right:8px !important;
    flex:0 0 auto !important;
  }

  body .sv-header .sv-search{
    flex:1 1 auto !important;
    min-width:0 !important;
  }

  body .sv-header .sv-iconbtn{
    margin-left:8px !important;
    flex:0 0 auto !important;
  }

  body .sv-header .sv-hamburger{
    margin-left:0 !important;
  }
}

/* =========================================================
   Samakan header halaman game dengan homepage
   Desktop + Tablet
   ========================================================= */
@media (min-width: 769px){

  body.single-sv_game .sv-header .sv-wrap{
    max-width: 1100px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  body.single-sv_game .sv-header .sv-row{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  body.single-sv_game .sv-header .sv-logo{
    flex: 0 0 auto !important;
    margin-right: 0 !important;
  }

  body.single-sv_game .sv-header .sv-search{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  body.single-sv_game .sv-header .sv-iconbtn{
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }

  body.single-sv_game .sv-header .sv-menubar{
    max-width: 1100px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 769px){
  body.single-sv_game .sv-header .sv-nav,
  body.single-sv_game .sv-header .sv-menulinks{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* =========================================================
   FINAL FIX - HEADER + GAME PAGE SPACING
   Tempel PALING BAWAH ui.css
   ========================================================= */

/* -----------------------------
   Base container consistency
----------------------------- */
.sv-wrap{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
  padding-left:14px;
  padding-right:14px;
  box-sizing:border-box;
}

/* -----------------------------
   Header umum
----------------------------- */
.sv-header .sv-wrap{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
  padding-left:14px;
  padding-right:14px;
  box-sizing:border-box;
}

.sv-header .sv-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.sv-header .sv-logo{
  flex:0 0 auto;
  margin:0;
}

.sv-header .sv-search{
  flex:1 1 auto;
  min-width:0;
}

.sv-header .sv-iconbtn{
  flex:0 0 auto;
  margin:0;
}

.sv-header .sv-menubar{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
  padding-left:14px;
  padding-right:14px;
  box-sizing:border-box;
}

/* -----------------------------
   Header mobile
----------------------------- */
@media (max-width:768px){
  .sv-header .sv-wrap{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .sv-header .sv-row{
    gap:14px !important;
    align-items:center !important;
  }

  .sv-header .sv-logo{
    margin-right:8px !important;
  }

  .sv-header .sv-search{
    flex:1 1 auto !important;
    min-width:0 !important;
  }

  .sv-header .sv-iconbtn{
    margin-left:8px !important;
  }

  .sv-header .sv-hamburger{
    margin-left:0 !important;
  }
}

/* -----------------------------
   Halaman single game:
   samakan container dengan homepage
----------------------------- */
body.single-sv_game main{
  width:100%;
  max-width:100%;
}

body.single-sv_game main .sv-wrap{
  max-width:1100px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:14px !important;
  padding-right:14px !important;
  box-sizing:border-box !important;
}

body.single-sv_game main .sv-section{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* -----------------------------
   Hero game desktop/tablet
----------------------------- */
body.single-sv_game .sv-hero{
  border-radius:20px;
  overflow:visible;
}

body.single-sv_game .sv-hero-banner{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  border-radius:20px 20px 0 0 !important;
  overflow:hidden;
}

body.single-sv_game .sv-hero-banner .sv-hero-bg{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
}

body.single-sv_game .sv-hero-cardwrap{
  width:100% !important;
  max-width:100% !important;
  margin-top:-44px;
  padding:0 0 12px !important;
  box-sizing:border-box !important;
}

body.single-sv_game .sv-hero-panel{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
  border-radius:0 0 20px 20px !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

/* -----------------------------
   Konten bawah desktop/tablet
----------------------------- */
body.single-sv_game .sv-txgrid{
  display:grid;
  grid-template-columns:360px minmax(0, 1fr);
  gap:18px;
  align-items:start;
}

body.single-sv_game .sv-left,
body.single-sv_game .sv-right{
  min-width:0;
}

body.single-sv_game .sv-left .sv-box,
body.single-sv_game .sv-right .sv-stepcard,
body.single-sv_game .sv-right .sv-summary,
body.single-sv_game .sv-right .sv-review{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}

/* -----------------------------
   Tablet
----------------------------- */
@media (max-width:980px){
  body.single-sv_game .sv-txgrid{
    grid-template-columns:1fr !important;
  }

  body.single-sv_game main .sv-wrap{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  body.single-sv_game .sv-hero-cardwrap{
    margin-top:-32px !important;
  }

  body.single-sv_game .sv-left,
  body.single-sv_game .sv-right{
    width:100% !important;
    max-width:100% !important;
  }

  body.single-sv_game .sv-left .sv-box,
  body.single-sv_game .sv-right .sv-stepcard,
  body.single-sv_game .sv-right .sv-summary,
  body.single-sv_game .sv-right .sv-review{
    width:100% !important;
    max-width:100% !important;
  }
}

/* -----------------------------
   Mobile
----------------------------- */
@media (max-width:768px){
  html, body{
    overflow-x:hidden !important;
  }

  body.single-sv_game{
    padding-bottom:140px !important;
  }

  body.single-sv_game main .sv-wrap{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  body.single-sv_game .sv-txgrid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  body.single-sv_game .sv-left,
  body.single-sv_game .sv-right{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.single-sv_game .sv-left .sv-box,
  body.single-sv_game .sv-right .sv-stepcard,
  body.single-sv_game .sv-right .sv-summary,
  body.single-sv_game .sv-right .sv-review{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
  }

  body.single-sv_game .sv-hero-banner{
    border-radius:20px 20px 0 0 !important;
    height:210px !important;
  }

  body.single-sv_game .sv-hero-cardwrap{
    margin-top:-24px !important;
    padding:0 0 10px !important;
  }

  body.single-sv_game .sv-hero-panel{
    border-radius:0 0 18px 18px !important;
    padding:10px !important;
    gap:10px !important;
  }

  body.single-sv_game .sv-hero-cover{
    width:74px !important;
    height:74px !important;
    border-radius:14px !important;
    flex:0 0 auto !important;
  }

  body.single-sv_game .sv-hero-title{
    font-size:18px !important;
    line-height:1.15 !important;
  }

  body.single-sv_game .sv-hero-sub{
    font-size:13px !important;
  }

  body.single-sv_game .sv-hero-badges{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }
}

/* -----------------------------
   Details arrow tetap tampil
----------------------------- */
details.sv-box > summary{
  position:relative;
  padding-right:44px !important;
}

details.sv-box > summary::-webkit-details-marker{
  display:none;
}

details.sv-box > summary::marker{
  content:"";
}

details.sv-box > summary::after{
  content:"▾";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%) rotate(0deg);
  font-size:18px;
  line-height:1;
  opacity:.9;
}

details.sv-box[open] > summary::after{
  transform:translateY(-50%) rotate(180deg);
}

/* -----------------------------
   Footer tetap ikut container
----------------------------- */
.sv-footer .sv-wrap{
  max-width:1100px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:14px !important;
  padding-right:14px !important;
  box-sizing:border-box !important;
}

/* ===== Mobile: samakan lebar kolom dengan banner hero ===== */
@media (max-width: 768px){

  /* wrapper konten game ikut lebar banner */
  body.single-sv_game main .sv-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* hero tetap full */
  body.single-sv_game .sv-hero,
  body.single-sv_game .sv-hero-banner,
  body.single-sv_game .sv-hero-cardwrap,
  body.single-sv_game .sv-hero-panel{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* semua kolom bawah ikut lebar banner */
  body.single-sv_game .sv-txgrid{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 16px !important;
  }

  body.single-sv_game .sv-left,
  body.single-sv_game .sv-right{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* card-box di dalam kolom full mengikuti lebar wrapper */
  body.single-sv_game .sv-left .sv-box,
  body.single-sv_game .sv-right .sv-stepcard,
  body.single-sv_game .sv-right .sv-summary,
  body.single-sv_game .sv-right .sv-review,
  body.single-sv_game .sv-right .sv-packgrid,
  body.single-sv_game .sv-right .sv-pack-filters,
  body.single-sv_game .sv-right .sv-payline{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

.sv-promo-row{
  display:flex;
  gap:10px;
  align-items:center;
}

.sv-promo-row input{
  flex:1 1 auto;
  min-width:0;
}

.sv-promo-row .sv-apply{
  flex:0 0 auto;
  height:46px;
  white-space:nowrap;
}

@media (max-width:768px){
  .sv-promo-row{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
  }

  .sv-promo-row input{
    flex:1 1 auto;
    min-width:0;
  }

  .sv-promo-row .sv-apply{
    flex:0 0 auto;
  }
}

/* Footer menempel dengan bottom navbar */
@media (max-width:768px){

  body.single-sv_game{
    padding-bottom:70px !important;
  }

  .sv-footer{
    margin-bottom:0 !important;
    padding-bottom:20px !important;
  }

}

@media (max-width:768px){

  .sv-footer{
    margin-bottom:-10px !important;
  }

}

/* V7: homepage card spacing mobile - hanya atur jarak tengah */
@media (max-width:768px){
  .home .sv-wrap{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .home .sv-section{
    padding-top:14px !important;
    padding-bottom:14px !important;
  }

  .home .sv-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:22px !important; /* jarak tengah antar card */
    row-gap:18px !important;    /* jarak atas bawah tetap */
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .home .sv-grid .sv-card{
    width:100% !important;
    border-radius:20px !important;
    align-self:stretch !important;
  }

  .home .sv-grid .sv-card .thumb{
    aspect-ratio:1/1 !important;
    border-radius:20px 20px 0 0 !important;
  }

  .home .sv-grid .sv-card .thumb img{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:20px 20px 0 0 !important;
  }

  .home .sv-grid .sv-card .meta{
    padding:10px 12px 12px !important;
  }

  .home .sv-grid .sv-card .meta .t{
    font-size:15px !important;
    line-height:1.15 !important;
  }

  .home .sv-grid .sv-card .meta .p{
    font-size:12px !important;
    margin-top:4px !important;
  }
}

@media (max-width:420px){
  .home .sv-wrap{
    padding-left:6px !important;
    padding-right:6px !important;
  }

  .home .sv-grid{
    column-gap:14px !important; /* jarak tengah khusus layar sangat kecil */
    row-gap:6px !important;
  }

  .home .sv-grid .sv-card .meta{
    padding:10px 10px 12px !important;
  }
}


/* =========================================================
   MENGHILANGKAN BACKGROUND BANNER
   ========================================================= */

/* HILANGKAN FRAME BELAKANG HOMEPAGE BANNER */
.home .sv-wrap > .sv-section:first-child,
.home .sv-wrap > .sv-section:first-child > .sv-hero,
.home .sv-wrap > .sv-section:first-child > .sv-hero::before,
.home .sv-wrap > .sv-section:first-child > .sv-hero::after,
.home .sv-wrap > .sv-section:first-child .sv-hero-banner,
.home .sv-wrap > .sv-section:first-child .sv-hero-banner::before,
.home .sv-wrap > .sv-section:first-child .sv-hero-banner::after{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* pastikan pembungkus hero tidak punya radius/frame */
.home .sv-wrap > .sv-section:first-child > .sv-hero{
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* radius hanya pada banner image */
.home .sv-wrap > .sv-section:first-child .sv-hero-banner,
.home .sv-wrap > .sv-section:first-child .sv-hero-slide,
.home .sv-wrap > .sv-section:first-child .sv-hero-slide img,
.home .sv-wrap > .sv-section:first-child .sv-hero-bg{
  border-radius: 28px !important;
  overflow: hidden !important;
}