/*
Theme Name: SavageManiac Clone Lite
Theme URI: https://example.com/
Author: ChatGPT
Author URI: https://example.com/
Description: Tema WordPress ringan bergaya "top up games" (rebuild) mirip screenshot yang kamu kirim: header blur + search, banner hero, section populer, tabs pill, grid game, footer maroon. Tidak menyertakan aset berhak cipta.
Version: 1.6.76
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: savagemaniac-clone-lite
Tags: custom-background, custom-logo, custom-menu, featured-images, full-width-template, blog
*/

:root{
  --bg1:#0a2f7a;
  --bg2:#1f8fff;
  --bg3:#081a44;
  --navy:#081a44;
  --card:#0c2d6b;
  --card2:#081f4f;
  --line:rgba(138,214,255,.18);
  --pill:rgba(255,255,255,.08);
  --white:rgba(255,255,255,.96);
  --muted:rgba(220,240,255,.78);
  --accent:#57c7ff;
  --accent2:#ffb400;
  --footer:#081a44;
  --glow:0 0 18px rgba(87,199,255,.35);
}

body{
  background:
    radial-gradient(circle at 50% 20%, rgba(120,210,255,.30) 0%, rgba(120,210,255,0) 28%),
    linear-gradient(180deg, #1f8fff 0%, #0a2f7a 45%, #081a44 100%);
  color: var(--white);
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

a{color:inherit}
img{max-width:100%;height:auto}

/* =========================================================
 * Bottom floating menu (mobile & tablet)
 * Struktur: BERANDA | (FAB) LIVE CHAT | DAFTAR HARGA
 * ========================================================= */
.sv-bottomnav{display:none}

@media (max-width: 1024px){
  /* App-like bottom bar (SaldoGame-style) */
  body{padding-bottom:74px !important;}

  .sv-bottomnav{
    position:fixed !important;
    left:0 !important; right:0 !important; bottom:0 !important;
    z-index:999999 !important;
    display:block !important;
    background:#ffffff !important;
    border-top:1px solid rgba(0,0,0,.08);
    padding:6px 10px calc(6px + env(safe-area-inset-bottom)) !important;
  }

  .sv-bnav-bar{
    width:min(560px, 100%);
    margin:0 auto;
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:6px;
  }

  .sv-bnav-item{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:8px 6px;
    border-radius:14px;
    text-decoration:none;
    color:rgba(0,0,0,.72);
    font-weight:800;
    letter-spacing:.1px;
    background:transparent;
    border:0;
    outline:0;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .sv-bnav-ico{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    color:rgba(0,0,0,.58);
  }
  .sv-bnav-ico svg{width:22px;height:22px;display:block}

  .sv-bnav-label{
    font-size:12px;
    line-height:1;
  }

  .sv-bnav-item.is-active{
    background:rgba(31,111,255,.10);
    color:var(--sm-accent, #1f6fff);
  }
  .sv-bnav-item.is-active .sv-bnav-ico{color:var(--sm-accent, #1f6fff);}

  /* small badge for chat */
  .sv-bnav-badge{
    position:absolute;
    top:6px;
    right:18%;
    min-width:18px;
    height:18px;
    border-radius:999px;
    padding:0 6px;
    display:grid;
    place-items:center;
    font-size:11px;
    font-weight:900;
    background:var(--sm-accent, #1f6fff);
    color:#fff;
    box-shadow:0 8px 18px rgba(31,111,255,.35);
  }

  .sv-bnav-item--chat{position:relative;}

  /* desktop/tablet tap feedback */
  .sv-bnav-item:active{transform:scale(.98);}
}

/* v1.5.4: Step 1 includes WhatsApp inside account block */
#sv-step1 .sv-field{width:100%;}

/* === SVCL LIVECHAT CLICK FIX (mobile & UC browser) === */
.sv-bottomnav, .sv-bnav, .sv-bottom-nav{ z-index: 999999 !important; }
.sv-bottomnav *, .sv-bnav *, .sv-bottom-nav *{ pointer-events: auto; }
.sv-bottomnav .sv-bnav__center, .sv-bnav .sv-bnav__center{ pointer-events:auto; }
.sv-bottomnav .sv-bnav__center button, .sv-bnav .sv-bnav__center button{ pointer-events:auto; }

/* === SM Live Chat PRO: ensure launcher clickable on desktop === */
.smplc-launcher,
.smplc-pro-launcher,
.smplcpro-launcher,
.smplc-floating,
.smplc-bubble,
.sm-livechat-launcher,
.sm-live-support-launcher,
.sm-live-support,
.sm-livechat,
#smplc-launcher,
#smplc-pro-launcher,
#smplcpro-launcher,
#sm_live_support_launcher,
#sm-live-support-launcher{
  position: fixed !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

.smplc-launcher *,
.smplc-pro-launcher *,
.smplcpro-launcher *,
#smplc-launcher *,
#smplc-pro-launcher *{
  pointer-events: auto !important;
}

/* If an overlay/menu is open, keep launcher above it */
.sv-nav-overlay{ z-index: 9997 !important; }

/* ===== Bersihkan total area bawah hero (single game) ===== */
body.single-sv_game .sv-hero,
body.single-sv_game .sv-hero-panel{
  box-shadow: none !important;
  border: none !important;
}

/* ==========================================================
   Mobile precision fix: prevent overflow/cut + true centering
   Target: single game page (single-sv_game)
   v1.6.49
   ========================================================== */

/* Hard stop any horizontal overflow on mobile */
@media (max-width: 768px){
  html, body{ overflow-x: hidden !important; width: 100% !important; }
}

/* Use one centered container width for ALL right-side blocks */
@media (max-width: 768px){
  body.single-sv_game .site,
  body.single-sv_game #page,
  body.single-sv_game .site-content,
  body.single-sv_game .site-main,
  body.single-sv_game .entry-content,
  body.single-sv_game .page-content{
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  /* The game layout wrappers (from plugin/template) */
  body.single-sv_game main .sv-wrap,
  body.single-sv_game main .sv-section,
  body.single-sv_game main .sv-txgrid,
  body.single-sv_game main .sv-left,
  body.single-sv_game main .sv-right{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Create a single centered inner width used by ALL cards */
  body.single-sv_game main .sv-right{
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* Any main card / panel inside right column must fit the inner width */
  body.single-sv_game main .sv-right .sv-stepcard,
  body.single-sv_game main .sv-right .sv-summary,
  body.single-sv_game main .sv-right .sv-desc,
  body.single-sv_game main .sv-right .sv-pay,
  body.single-sv_game main .sv-right .sv-review,
  body.single-sv_game main .sv-right .sv-reviews,
  body.single-sv_game main .sv-right .sv-panel,
  body.single-sv_game main .sv-right .sv-card,
  body.single-sv_game main .sv-right .sv-box{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Ensure inner grids do not force overflow */
  body.single-sv_game .sv-pack-grid,
  body.single-sv_game .sv-products,
  body.single-sv_game .product-grid,
  body.single-sv_game .nominal-grid{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.single-sv_game .sv-pack-card{ min-width: 0 !important; }
  body.single-sv_game .sv-pack-body{ min-width: 0 !important; }

  /* Promo row: prevent the button from pushing layout wider */
  body.single-sv_game .sv-promo,
  body.single-sv_game .sv-promo-row,
  body.single-sv_game .sv-promo-actions{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.single-sv_game .sv-promo-row{
    display:flex !important;
    gap:10px !important;
    flex-wrap: wrap !important;
  }

  body.single-sv_game .sv-promo-row input{
    flex: 1 1 220px !important;
    min-width: 0 !important;
  }

  body.single-sv_game .sv-promo-row button{
    flex: 0 0 auto !important;
  }
}

/* Footer: avoid any horizontal cut on mobile */
@media (max-width: 768px){
  .site-footer,
  footer,
  .footer,
  .sv-footer{
    overflow-x: hidden !important;
  }

  .site-footer .container,
  footer .container,
  .sv-footer .container,
  .sv-footer__inner{
    width: calc(100% - 24px) !important;
    max-width: 720px !important;
    margin: 0 auto !important;
  }
}

/* =========================================================
   WPPartenggen Fix: Hero panel full-width on single game pages
   Applies to desktop/tablet/mobile (edge-to-edge dark panel)
   ========================================================= */
body.single-sv_game main{
  width:100%;
  max-width:100%;
}

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

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

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

body.single-sv_game .sv-hero-panel{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  border-radius:0 !important; /* true full-width look */
}

/* keep hero inner layout clean on mobile */
@media (max-width:768px){
  body.single-sv_game .sv-hero-panel{
    padding-left:14px !important;
    padding-right:14px !important;
  }
}

/* =========================================================
   Rapikan header mobile agar logo dan tombol menu tidak mepet
   ========================================================= */
@media (max-width:768px){
  .sv-header .sv-wrap{
    padding-left:14px !important;
    padding-right:14px !important;
    box-sizing:border-box !important;
  }

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

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

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

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

/* =========================================================
   ROYAL DREAM STAGE 2
   Header glow + card premium + royal blue polish
   Tempel di paling bawah style.css
   ========================================================= */

/* Header lebih menyatu dan bercahaya */
.sv-header,
.site-header,
header.site-header{
  background: linear-gradient(180deg, rgba(8,26,68,.92) 0%, rgba(12,45,107,.88) 100%) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.18),
    0 0 24px rgba(87,199,255,.16) !important;
  border-bottom: 1px solid rgba(138,214,255,.16) !important;
}

/* Search bar lebih premium */
.sv-search,
.sv-search input,
.sv-header input[type="search"],
.sv-header input[type="text"]{
  background: rgba(6, 29, 74, .78) !important;
  color: rgba(255,255,255,.96) !important;
}

.sv-search input::placeholder,
.sv-header input[type="search"]::placeholder,
.sv-header input[type="text"]::placeholder{
  color: rgba(220,240,255,.55) !important;
}

/* Menu atas lebih terang saat hover */
.sv-header a,
.site-header a{
  transition: all .22s ease;
}

.sv-header a:hover,
.site-header a:hover{
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(87,199,255,.35);
}

/* Hero/banner diberi frame halus */
.sv-hero,
.sv-banner,
.hero-banner,
.sv-slider,
.sv-swiper{
  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    0 0 22px rgba(87,199,255,.12) !important;
  border: 1px solid rgba(138,214,255,.15) !important;
}

/* Card game lebih premium */
.sv-card,
.sv-gamecard,
.sv-game-item,
.game-card,
.products .product,
.sv-grid > *{
  background: linear-gradient(180deg, rgba(10,37,96,.96) 0%, rgba(7,27,72,.98) 100%) !important;
  border: 1px solid rgba(138,214,255,.12) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.16),
    0 0 18px rgba(87,199,255,.08) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Hover card game */
.sv-card:hover,
.sv-gamecard:hover,
.sv-game-item:hover,
.game-card:hover,
.products .product:hover,
.sv-grid > *:hover{
  transform: translateY(-4px);
  border-color: rgba(138,214,255,.28) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.22),
    0 0 24px rgba(87,199,255,.18) !important;
}

/* Judul game lebih hidup */
.sv-card h3,
.sv-card h4,
.sv-gamecard h3,
.sv-game-item h3,
.game-card h3,
.products .product h3{
  color: #ffffff !important;
}

/* Subjudul game */
.sv-card p,
.sv-gamecard p,
.sv-game-item p,
.game-card p,
.products .product p{
  color: rgba(220,240,255,.72) !important;
}

/* Footer rapikan agar tidak terlalu gelap mati */
.site-footer,
footer,
.sv-footer{
  background:
    radial-gradient(circle at 50% -20%, rgba(87,199,255,.10) 0%, rgba(87,199,255,0) 38%),
    linear-gradient(180deg, #0a2258 0%, #07183f 100%) !important;
  border-top: 1px solid rgba(138,214,255,.10) !important;
}

/* Link footer */
.site-footer a,
footer a,
.sv-footer a{
  color: rgba(255,255,255,.82) !important;
}

.site-footer a:hover,
footer a:hover,
.sv-footer a:hover{
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(87,199,255,.28);
}

/* =========================================================
   ROYAL DREAM STAGE 3
   Sparkle / stars overlay yang benar-benar tampil
   Tempel di paling bawah style.css
   ========================================================= */

html, body{
  min-height:100%;
}

body{
  position:relative;
  overflow-x:hidden;
}

/* layer sparkle utama */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.65;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(255,255,255,.85) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 22% 36%, rgba(255,255,255,.55) 0 1px, transparent 1.7px),
    radial-gradient(circle at 35% 22%, rgba(255,255,255,.75) 0 1.4px, transparent 2px),
    radial-gradient(circle at 48% 68%, rgba(255,255,255,.45) 0 1px, transparent 1.7px),
    radial-gradient(circle at 63% 28%, rgba(255,255,255,.8) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 76% 52%, rgba(255,255,255,.55) 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.7) 0 1.3px, transparent 2px),
    radial-gradient(circle at 82% 78%, rgba(255,255,255,.5) 0 1px, transparent 1.7px),
    radial-gradient(circle at 14% 78%, rgba(255,255,255,.7) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 56% 88%, rgba(255,255,255,.45) 0 1px, transparent 1.7px);
  background-repeat:no-repeat;
}

/* semua isi web naik di atas layer sparkle */
body > *{
  position:relative;
  z-index:1;
}

/* =========================================
   CARD GAME: THUMBNAIL MENYATU + MODERN GLOW
   ========================================= */

.sv-grid .sv-card,
.sv-gamecard,
.sv-game-item,
.game-card,
.products .product{
  border-radius: 22px !important;
  overflow: hidden !important;
}

.sv-grid .sv-card{
  display:flex !important;
  flex-direction:column !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration:none !important;
}

.sv-grid .sv-card::after{display:none !important;}

.sv-grid .sv-card .thumb{
  position:relative !important;
  aspect-ratio: 1 / 1 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  border-radius: 22px 22px 0 0 !important;
}

.sv-grid .sv-card .thumb img{
  position:absolute !important;
  inset:-1px !important;
  width:calc(100% + 2px) !important;
  height:calc(100% + 2px) !important;
  max-width:none !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  transition: transform .35s ease, filter .35s ease !important;
}

.sv-grid .sv-card .meta{
  background: linear-gradient(180deg, rgba(18,58,120,.98) 0%, rgba(11,46,99,.98) 100%) !important;
  border-radius: 0 0 22px 22px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.sv-grid .sv-card .meta .t{color:#fff !important;}
.sv-grid .sv-card .meta .p{color:rgba(220,240,255,.78) !important;}

.sv-grid .sv-card:hover,
.sv-grid .sv-card:focus-visible{
  transform: translateY(-4px) !important;
}

.sv-grid .sv-card:hover .thumb img,
.sv-grid .sv-card:focus-visible .thumb img{
  transform: scale(1.03) !important;
  filter: saturate(1.05) brightness(1.04) !important;
}

.sv-grid .sv-card:active{
  transform: scale(.985) !important;
}

/* =====================================
   HOMEPAGE HERO BANNER FULL UTUH
   TANPA CROP DAN TANPA BATAS TINGGI
   ===================================== */

.home .sv-hero{
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
  padding:0 !important;
  margin-bottom:18px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}

.home .sv-hero-banner{
  position:relative !important;
  width:100% !important;
  max-width:1400px !important;
  margin:0 auto !important;
  border-radius:18px !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    0 0 22px rgba(87,199,255,.12) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  overflow:visible !important;
}

.home .sv-hero-slider,
.home .sv-hero-slides{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  overflow:visible !important;
}

.home .sv-hero-slide{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  display:none !important;
  opacity:0 !important;
  transition:opacity .35s ease !important;
  overflow:visible !important;
}

.home .sv-hero-slide.is-active{
  display:block !important;
  opacity:1 !important;
  z-index:2 !important;
}

.home .sv-hero-slide a{
  display:block !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}

.home .sv-hero-slide img,
.home .sv-hero-bg{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  max-width:100% !important;
  object-fit:unset !important;
  border-radius:18px !important;
}

/* Kalau ada elemen yang memakai background-image lama */
.home .sv-hero-bg{
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
}

/* Dots tetap */
.home .sv-hero-dots{
  position:absolute !important;
  left:50% !important;
  bottom:12px !important;
  transform:translateX(-50%) !important;
  z-index:4 !important;
  display:flex !important;
  gap:8px !important;
}

.home .sv-hero-dot{
  width:10px !important;
  height:10px !important;
  border-radius:999px !important;
  border:none !important;
  background:rgba(255,255,255,.45) !important;
  cursor:pointer !important;
}

.home .sv-hero-dot.is-active{
  background:#fff !important;
  box-shadow:0 0 10px rgba(255,255,255,.4) !important;
}

/* Matikan overlay text lama */
.home .sv-hero-text{
  display:none !important;
}

@media (max-width:768px){
  .home .sv-hero{
    margin-bottom:14px !important;
  }

  .home .sv-hero-banner,
  .home .sv-hero-slide img,
  .home .sv-hero-bg{
    border-radius:14px !important;
  }

  .home .sv-hero-dots{
    bottom:10px !important;
  }
}

/* =====================================
   SV PILL - ICON TANPA LATAR + SCROLL
   ===================================== */

.sv-pills,
.sv-tabs,
.sv-categories,
.sv-cat-tabs,
.sv-category-tabs{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
  align-items:center !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  scroll-behavior:smooth !important;
  padding-bottom:4px !important;
  scrollbar-width:none !important;
}

.sv-pills::-webkit-scrollbar,
.sv-tabs::-webkit-scrollbar,
.sv-categories::-webkit-scrollbar,
.sv-cat-tabs::-webkit-scrollbar,
.sv-category-tabs::-webkit-scrollbar{
  display:none !important;
}

.sv-pill{
  position:relative !important;
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-height:48px !important;
  padding:10px 18px 10px 42px !important;
  border-radius:999px !important;

  font-size:15px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  letter-spacing:.1px !important;
  text-decoration:none !important;
  white-space:nowrap !important;

  color:#ffffff !important;
  background:linear-gradient(180deg, #2f82ff 0%, #1e6df4 100%) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 8px 18px rgba(0,0,0,.14) !important;

  transition:
    transform .18s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease !important;

  box-sizing:border-box !important;
  overflow:hidden !important;
}

.sv-pill::before{
  content:"" !important;
  position:absolute !important;
  inset:1px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%) !important;
  pointer-events:none !important;
}

/* ikon TANPA latar */
.sv-pill::after{
  position:absolute !important;
  left:16px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  background:none !important;
  box-shadow:none !important;
  border:none !important;
  width:auto !important;
  height:auto !important;
  font-size:15px !important;
  line-height:1 !important;
  color:#ffffff !important;
}

/* ikon per kategori */
.sv-pill[href*="/game/"]::after{
  content:"🎮" !important;
}

.sv-pill[href*="higg"]::after,
.sv-pill[href*="island"]::after{
  content:"🪙" !important;
}

.sv-pill[href*="royal"]::after{
  content:"👑" !important;
}

.sv-pill:not([href*="/game/"]):not([href*="higg"]):not([href*="island"]):not([href*="royal"])::after{
  content:"✦" !important;
}

.sv-pill:hover{
  transform:translateY(-1px) !important;
  background:linear-gradient(180deg, #4491ff 0%, #2a79fb 100%) !important;
  border-color:rgba(255,255,255,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 10px 22px rgba(0,0,0,.16) !important;
}

.sv-pill:active{
  transform:scale(.985) !important;
}

.sv-pill:focus,
.sv-pill:focus-visible{
  outline:none !important;
  box-shadow:
    0 0 0 3px rgba(120,190,255,.20),
    0 10px 22px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.sv-pill.active,
.sv-pill.is-active,
.current .sv-pill,
.current-menu-item .sv-pill,
.sv-pill[aria-current="page"]{
  background:linear-gradient(180deg, #56a8ff 0%, #3388ff 100%) !important;
  border-color:rgba(255,255,255,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 10px 22px rgba(0,0,0,.16) !important;
}

@media (max-width:768px){
  .sv-pills,
  .sv-tabs,
  .sv-categories,
  .sv-cat-tabs,
  .sv-category-tabs{
    gap:10px !important;
    padding-bottom:6px !important;
  }

  .sv-pill{
    min-height:44px !important;
    padding:9px 16px 9px 38px !important;
    font-size:14px !important;
  }

  .sv-pill::after{
    left:14px !important;
    font-size:14px !important;
  }
}

@media (max-width:480px){
  .sv-pill{
    min-height:40px !important;
    padding:8px 14px 8px 34px !important;
    font-size:13px !important;
  }

  .sv-pill::after{
    left:12px !important;
    font-size:13px !important;
  }
}

@media (max-width:390px){
  .sv-pill{
    font-size:12px !important;
    padding:8px 12px 8px 32px !important;
  }

  .sv-pill::after{
    left:11px !important;
    font-size:12px !important;
  }
}

/* =========================================
   FOOTER MODERN TOPKOIN
   Mobile/Tablet center
   Desktop 3 kolom
   ========================================= */

.sv-footer-modern{
  background:#050505 !important;
  color:#fff !important;
  padding:46px 0 28px !important;
}

.sv-footer-modern .sv-wrap{
  max-width:1200px !important;
  margin:0 auto !important;
  padding-left:20px !important;
  padding-right:20px !important;
  box-sizing:border-box !important;
}

.sv-footer-modern__top{
  display:grid !important;
  grid-template-columns:1.2fr .9fr .9fr !important;
  gap:34px !important;
  align-items:start !important;
}

.sv-footer-modern__brand{
  text-align:left !important;
}

.sv-footer-modern__logo img{
  display:block !important;
  max-width:280px !important;
  width:100% !important;
  height:auto !important;
}

.sv-footer-modern__textlogo{
  font-size:42px !important;
  font-weight:900 !important;
  line-height:1 !important;
  color:#fff !important;
}

.sv-footer-modern__desc{
  margin-top:24px !important;
  font-size:17px !important;
  line-height:1.9 !important;
  color:rgba(255,255,255,.94) !important;
}

.sv-footer-modern__socials{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:16px !important;
  margin-top:26px !important;
}

.sv-footer-modern__social{
  width:54px !important;
  height:54px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#171717 !important;
  color:#fff !important;
  text-decoration:none !important;
  font-size:26px !important;
  transition:transform .2s ease, background .2s ease !important;
}

.sv-footer-modern__social:hover{
  transform:translateY(-2px) !important;
  background:#222 !important;
}

.sv-footer-modern__links,
.sv-footer-modern__cta{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:100% !important;
}

.sv-footer-modern__linkrow{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:18px 24px !important;
}

.sv-footer-modern__linkrow a{
  color:#fff !important;
  text-decoration:none !important;
  font-size:17px !important;
  line-height:1.7 !important;
}

.sv-footer-modern__linkrow a:hover{
  text-decoration:underline !important;
}

.sv-footer-modern__reseller{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  color:#fff !important;
  text-decoration:none !important;
  font-size:18px !important;
  line-height:1.4 !important;
}

.sv-footer-modern__reseller-ico{
  font-size:28px !important;
  line-height:1 !important;
}

.sv-footer-modern__bottom{
  margin-top:34px !important;
}

.sv-footer-modern__divider{
  height:1px !important;
  background:rgba(255,255,255,.9) !important;
  margin-bottom:20px !important;
}

.sv-footer-modern__copy{
  text-align:center !important;
  font-size:17px !important;
  color:rgba(255,255,255,.96) !important;
}

@media (max-width:980px){
  .sv-footer-modern{
    padding:40px 0 24px !important;
  }

  .sv-footer-modern__top{
    grid-template-columns:1fr !important;
    gap:28px !important;
    text-align:center !important;
  }

  .sv-footer-modern__brand,
  .sv-footer-modern__links,
  .sv-footer-modern__cta{
    text-align:center !important;
    justify-content:center !important;
  }

  .sv-footer-modern__logo img{
    margin:0 auto !important;
    max-width:240px !important;
  }

  .sv-footer-modern__textlogo{
    text-align:center !important;
    font-size:34px !important;
  }

  .sv-footer-modern__desc{
    font-size:16px !important;
    line-height:1.85 !important;
    margin-top:20px !important;
  }

  .sv-footer-modern__socials,
  .sv-footer-modern__linkrow,
  .sv-footer-modern__reseller{
    justify-content:center !important;
  }
}

@media (max-width:600px){
  .sv-footer-modern .sv-wrap{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .sv-footer-modern__logo img{
    max-width:220px !important;
  }

  .sv-footer-modern__desc{
    font-size:15px !important;
  }

  .sv-footer-modern__socials{
    gap:14px !important;
  }

  .sv-footer-modern__social{
    width:50px !important;
    height:50px !important;
    font-size:23px !important;
  }

  .sv-footer-modern__linkrow{
    gap:14px 18px !important;
  }

  .sv-footer-modern__linkrow a{
    font-size:16px !important;
  }

  .sv-footer-modern__reseller{
    font-size:17px !important;
  }

  .sv-footer-modern__copy{
    font-size:16px !important;
  }
}

/* =====================================
   Header Quick Menu
   ===================================== */

.sv-menulinks{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
}

.sv-menulinks a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  text-decoration:none;
}

.sv-mi-emoji{
  display:inline-block;
  line-height:1;
  font-size:14px;
}

.sv-mi-label{
  display:inline-block;
  line-height:1.2;
}

/* =====================================
   Side Menu Cepat
   ===================================== */

.sv-mobile-side-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sv-mobile-side-links a{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.sv-mobile-side-ico{
  display:inline-block;
  line-height:1;
  font-size:16px;
}

.sv-mobile-side-label{
  display:inline-block;
  line-height:1.2;
}

/* =====================================
   Footer Menu Cepat
   Tanpa ikon
   ===================================== */

.sv-footer-menu-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:18px 24px;
}

.sv-footer-menu-links a{
  color:#ffffff !important;
  text-decoration:none;
  font-size:17px;
  line-height:1.7;
}

.sv-footer-menu-links a:hover{
  text-decoration:underline;
}

/* ===== PAYMENT METHOD PREMIUM ===== */
.sv-pay-groups{
  display:grid;
  gap:14px;
}

.sv-pay-group-block{
  display:grid;
  gap:8px;
}

.sv-pay-group-title{
  font-size:13px;
  font-weight:800;
  color:#fff;
  letter-spacing:.15px;
  opacity:.95;
}

.sv-pay-method-list{
  display:grid;
  gap:10px;
}

.sv-paycard{
  width:100%;
  border:none;
  border-radius:16px;
  padding:12px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
    linear-gradient(135deg, rgba(15,23,42,.52), rgba(127,29,29,.16));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 8px 18px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  transition:all .2s ease;
  text-align:left;
  position:relative;
  overflow:hidden;
}

.sv-paycard::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.03), transparent 30%, transparent 70%, rgba(255,255,255,.02));
  pointer-events:none;
}

.sv-paycard:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.13);
  box-shadow:
    0 12px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.sv-paycard.is-active{
  border-color:rgba(96,165,250,.55);
  box-shadow:
    0 0 0 2px rgba(96,165,250,.15),
    0 14px 28px rgba(37,99,235,.16),
    inset 0 1px 0 rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(59,130,246,.11), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(15,23,42,.60), rgba(127,29,29,.20));
}

.sv-paycard-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}

.sv-paycard-logo{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:12px;
  background:linear-gradient(180deg, #ffffff, #f3f4f6);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:
    0 6px 12px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.sv-paycard-logo img{
  width:74%;
  height:74%;
  object-fit:contain;
  display:block;
}

.sv-paycard-logo span{
  font-size:16px;
  font-weight:900;
  color:#111827;
  line-height:1;
}

.sv-paycard-meta{
  min-width:0;
  flex:1;
}

.sv-paycard-top{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:4px;
}

.sv-paycard-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:0 8px;
  border-radius:999px;
  background:linear-gradient(180deg, #4ea1ff, #2b6fbe);
  color:#eaf4ff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 4px 10px rgba(59,130,246,.22);
}

.sv-paycard-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.20);
  color:#bbf7d0;
  font-size:9px;
  font-weight:700;
}

.sv-paycard-name{
  font-size:14px;
  font-weight:800;
  color:#fff;
  line-height:1.18;
  letter-spacing:.05px;
  margin-bottom:2px;
}

.sv-paycard-desc{
  font-size:11px;
  line-height:1.35;
  color:rgba(255,255,255,.68);
}

.sv-paycard-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.sv-paycard-fee{
  font-size:14px;
  font-weight:800;
  color:#fde68a;
  white-space:nowrap;
  text-shadow:0 3px 10px rgba(0,0,0,.16);
}

.sv-paycard-radio{
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.04);
  position:relative;
  transition:all .2s ease;
}

.sv-paycard.is-active .sv-paycard-radio{
  border-color:#60a5fa;
  background:rgba(96,165,250,.14);
  box-shadow:0 0 0 4px rgba(96,165,250,.10);
}

.sv-paycard.is-active .sv-paycard-radio::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:999px;
  background:#60a5fa;
}

.sv-pay-hint-box{
  border-radius:14px;
  padding:12px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.84);
  font-size:12px;
  line-height:1.5;
}

@media (max-width: 640px){
  .sv-pay-groups{
    gap:12px;
  }

  .sv-pay-group-title{
    font-size:12px;
  }

  .sv-paycard{
    padding:10px 12px;
    border-radius:14px;
    gap:8px;
  }

  .sv-paycard-left{
    gap:8px;
  }

  .sv-paycard-logo{
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:10px;
  }

  .sv-paycard-logo span{
    font-size:14px;
  }

  .sv-paycard-top{
    gap:5px;
    margin-bottom:3px;
  }

  .sv-paycard-badge,
  .sv-paycard-chip{
    min-height:18px;
    padding:0 7px;
    font-size:8px;
  }

  .sv-paycard-name{
    font-size:13px;
  }

  .sv-paycard-desc{
    font-size:10px;
    line-height:1.3;
  }

  .sv-paycard-fee{
    font-size:13px;
  }

  .sv-paycard-right{
    gap:8px;
  }

  .sv-paycard-radio{
    width:15px;
    height:15px;
  }

  .sv-pay-hint-box{
    padding:10px 12px;
    font-size:11px;
  }
}

/* =========================================================
   HERO BANNER RESPONSIVE SINGLE GAME
   Desktop / Tablet / Mobile
   ========================================================= */
body.single-sv_game .sv-hero-banner{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:28px;
  height:clamp(200px, 30vw, 420px);
  min-height:200px;
}

body.single-sv_game .sv-hero-banner picture,
body.single-sv_game .sv-hero-banner .sv-hero-bg{
  display:block;
  width:100%;
  height:100%;
}

body.single-sv_game .sv-hero-bg{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

@media (max-width:1024px){
  body.single-sv_game .sv-hero-banner{
    height:300px;
    min-height:300px;
  }
}

@media (max-width:640px){
  body.single-sv_game .sv-hero-banner{
    height:190px;
    min-height:190px;
    border-radius:18px;
  }
}

.sv-hero-banner picture{
  display:block;
  width:100%;
  height:100%;
}

/* =========================================================
   FOOTER MOBILE – CLEAN PREMIUM (NO PILL / NO BUTTON STYLE)
   ========================================================= */
@media (max-width:768px){

  .sv-footer-modern{
    padding:26px 0 16px !important;
    background:
      radial-gradient(circle at 50% -20%, rgba(87,199,255,.10), transparent 40%),
      linear-gradient(180deg,#071735 0%,#050c22 100%) !important;
    border-top:1px solid rgba(138,214,255,.10) !important;
  }

  .sv-footer-modern .sv-wrap{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .sv-footer-modern__top{
    gap:18px !important;
    text-align:center !important;
  }

  .sv-footer-modern__logo img{
    max-width:160px !important;
    margin:0 auto 10px !important;
  }

  .sv-footer-modern__desc{
    font-size:14px !important;
    line-height:1.7 !important;
    color:rgba(230,240,255,.85) !important;
    margin-top:8px !important;
    margin-bottom:8px !important;
    max-width:330px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Link footer clean */
  .sv-footer-modern__linkrow{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:16px 22px !important;
    margin-top:8px !important;
  }

  .sv-footer-modern__linkrow a{
    font-size:14px !important;
    font-weight:500 !important;
    color:rgba(220,235,255,.85) !important;
    text-decoration:none !important;
    transition:color .2s ease;
  }

  .sv-footer-modern__linkrow a:hover{
    color:#ffffff !important;
  }

  /* reseller link */
  .sv-footer-modern__reseller{
    margin-top:8px !important;
    font-size:15px !important;
    font-weight:600 !important;
    color:#d8e8ff !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    text-decoration:none !important;
  }

  .sv-footer-modern__reseller:hover{
    color:#ffffff !important;
  }

  .sv-footer-modern__reseller-ico{
    font-size:18px !important;
  }

  .sv-footer-modern__bottom{
    margin-top:16px !important;
  }

  .sv-footer-modern__divider{
    margin-bottom:10px !important;
    background:rgba(138,214,255,.20) !important;
  }

  .sv-footer-modern__copy{
    font-size:12px !important;
    color:rgba(220,235,255,.65) !important;
    letter-spacing:.02em;
  }
}

/* =========================================================
   PAGE TEMPLATE MODERN - MENYATU DENGAN THEME
   Clean, modern, no double frame
   ========================================================= */

/* Matikan title bawaan WordPress agar tidak dobel */
body.page .entry-title,
body.page .page-title,
body.page .wp-block-post-title{
  display:none !important;
}

/* Bersihkan wrapper bawaan theme */
body.page .site-main,
body.page .page,
body.page article.page,
body.page .entry-content,
body.page .page-content{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* Area utama */
.tk-page-main{
  width:100%;
  padding:16px 0 24px;
}

.tk-page-modern{
  width:100%;
}

.tk-page-modern__wrap{
  width:min(980px, calc(100% - 24px));
  margin:0 auto;
}

/* Hero atas: menyatu dengan web */
.tk-page-modern__hero{
  padding:4px 2px 14px;
}

.tk-page-modern__title{
  margin:0 0 6px;
  font-size:clamp(28px, 4vw, 42px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.02em;
  color:#ffffff;
  text-shadow:0 6px 20px rgba(0,0,0,.16);
}

.tk-page-modern__meta{
  font-size:14px;
  line-height:1.45;
  color:rgba(255,255,255,.82);
  font-weight:600;
}

/* Konten utama */
.tk-page-modern__article{
  margin:0;
}

.tk-page-modern__content{
  background:rgba(255,255,255,.96);
  color:#18212f;
  border-radius:22px;
  padding:28px 30px;
  box-shadow:
    0 14px 34px rgba(4,18,48,.14),
    0 2px 0 rgba(255,255,255,.35) inset;
  backdrop-filter:blur(4px);
}

/* Rapikan elemen pertama/terakhir */
.tk-page-modern__content > *:first-child{
  margin-top:0 !important;
}
.tk-page-modern__content > *:last-child{
  margin-bottom:0 !important;
}

/* Typography */
.tk-page-modern__content h1,
.tk-page-modern__content h2,
.tk-page-modern__content h3,
.tk-page-modern__content h4,
.tk-page-modern__content h5,
.tk-page-modern__content h6{
  color:#0f172a;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.3;
}

.tk-page-modern__content h1{
  font-size:30px;
  margin:0 0 16px;
}

.tk-page-modern__content h2{
  font-size:24px;
  margin:28px 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid #e7edf7;
}

.tk-page-modern__content h3{
  font-size:20px;
  margin:22px 0 10px;
}

.tk-page-modern__content h4{
  font-size:17px;
  margin:18px 0 8px;
}

.tk-page-modern__content p{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.72;
  color:#243041;
}

.tk-page-modern__content ul,
.tk-page-modern__content ol{
  margin:0 0 14px 20px;
  padding:0;
}

.tk-page-modern__content li{
  margin:0 0 7px;
  font-size:16px;
  line-height:1.68;
  color:#243041;
}

.tk-page-modern__content strong{
  color:#0f172a;
  font-weight:800;
}

.tk-page-modern__content a{
  color:#1459d9;
  text-decoration:none;
  font-weight:600;
}

.tk-page-modern__content a:hover{
  text-decoration:underline;
}

.tk-page-modern__content hr{
  border:0;
  border-top:1px solid #e5e7eb;
  margin:18px 0;
}

.tk-page-modern__content blockquote{
  margin:18px 0;
  padding:14px 16px;
  border-left:4px solid #2563eb;
  background:#f8fbff;
  border-radius:12px;
  color:#334155;
}

.tk-page-modern__content table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0 18px;
  overflow:hidden;
  border-radius:14px;
}

.tk-page-modern__content th,
.tk-page-modern__content td{
  border:1px solid #e5e7eb;
  padding:10px 12px;
  text-align:left;
  font-size:15px;
  color:#243041;
}

.tk-page-modern__content th{
  background:#f8fafc;
  font-weight:700;
  color:#0f172a;
}

.tk-page-modern__content img{
  border-radius:14px;
  height:auto;
}

/* Hilangkan kotak bawaan Gutenberg jika ada */
.tk-page-modern__content .wp-block-group,
.tk-page-modern__content .wp-block-cover,
.tk-page-modern__content .wp-block-columns{
  margin-top:0;
  margin-bottom:16px;
}

/* Mobile */
@media (max-width: 768px){
  .tk-page-main{
    padding:10px 0 18px;
  }

  .tk-page-modern__wrap{
    width:calc(100% - 12px);
  }

  .tk-page-modern__hero{
    padding:0 2px 10px;
  }

  .tk-page-modern__title{
    font-size:clamp(22px, 7vw, 34px);
    line-height:1.14;
    margin-bottom:4px;
  }

  .tk-page-modern__meta{
    font-size:13px;
  }

  .tk-page-modern__content{
    border-radius:18px;
    padding:20px 16px;
  }

  .tk-page-modern__content h1{
    font-size:25px;
    margin-bottom:12px;
  }

  .tk-page-modern__content h2{
    font-size:21px;
    margin:22px 0 10px;
    padding-bottom:7px;
  }

  .tk-page-modern__content h3{
    font-size:18px;
    margin:18px 0 8px;
  }

  .tk-page-modern__content p,
  .tk-page-modern__content li{
    font-size:15px;
    line-height:1.68;
  }

  .tk-page-modern__content ul,
  .tk-page-modern__content ol{
    margin-left:18px;
  }
}

/* =========================================================
   PAGE FULL WHITE AREA
   Dari bawah header sampai sebelum footer = putih penuh
   ========================================================= */

/* area utama halaman */
body.page .site,
body.page #page,
body.page .site-content,
body.page .site-main,
body.page main,
body.page .content-area{
  background:#ffffff !important;
}

/* hilangkan background tema biru pada area halaman */
body.page{
  background:#ffffff !important;
}

/* tapi header dan footer tetap ikut desain tema */
body.page .sv-header,
body.page header,
body.page .site-header{
  background:linear-gradient(180deg, rgba(8,26,68,.92) 0%, rgba(12,45,107,.88) 100%) !important;
}

body.page .site-footer,
body.page footer,
body.page .sv-footer,
body.page .sv-footer-modern{
  background:
    radial-gradient(circle at 50% -20%, rgba(87,199,255,.10) 0%, rgba(87,199,255,0) 38%),
    linear-gradient(180deg, #0a2258 0%, #07183f 100%) !important;
}

/* matikan sparkle/bintang untuk halaman */
body.page::before{
  display:none !important;
}

/* wrapper halaman full putih */
.tk-page-main,
.tk-page-modern,
.tk-page-modern__wrap,
.tk-page-modern__article{
  background:#ffffff !important;
  box-shadow:none !important;
}

/* hero halaman putih juga */
.tk-page-modern__hero{
  background:#ffffff !important;
  padding:20px 0 10px !important;
}

.tk-page-modern__title{
  color:#111827 !important;
  text-shadow:none !important;
  margin:0 0 6px !important;
}

.tk-page-modern__meta{
  color:#6b7280 !important;
}

/* konten tanpa bingkai biru */
.tk-page-modern__content{
  background:#ffffff !important;
  color:#1f2937 !important;
  box-shadow:none !important;
  border:none !important;
  border-radius:0 !important;
  padding:12px 0 28px !important;
}

/* lebar konten lebih pas */
.tk-page-modern__wrap{
  width:min(980px, calc(100% - 32px)) !important;
  margin:0 auto !important;
}

/* typography lebih rapat dan normal */
.tk-page-modern__content h1,
.tk-page-modern__content h2,
.tk-page-modern__content h3,
.tk-page-modern__content h4{
  color:#111827 !important;
  letter-spacing:0 !important;
  line-height:1.35 !important;
}

.tk-page-modern__content h1{
  font-size:32px !important;
  margin:0 0 14px !important;
}

.tk-page-modern__content h2{
  font-size:26px !important;
  margin:26px 0 10px !important;
  padding-bottom:8px !important;
  border-bottom:1px solid #e5e7eb !important;
}

.tk-page-modern__content h3{
  font-size:21px !important;
  margin:20px 0 8px !important;
}

.tk-page-modern__content p,
.tk-page-modern__content li{
  color:#374151 !important;
  font-size:16px !important;
  line-height:1.8 !important;
  letter-spacing:0 !important;
  margin-bottom:12px !important;
}

/* mobile */
@media (max-width:768px){
  body.page .site,
  body.page #page,
  body.page .site-content,
  body.page .site-main,
  body.page main,
  body.page .content-area{
    background:#ffffff !important;
  }

  .tk-page-modern__wrap{
    width:calc(100% - 24px) !important;
  }

  .tk-page-modern__hero{
    padding:16px 0 8px !important;
  }

  .tk-page-modern__title{
    font-size:24px !important;
    line-height:1.2 !important;
    margin-bottom:4px !important;
  }

  .tk-page-modern__meta{
    font-size:13px !important;
  }

  .tk-page-modern__content{
    padding:10px 0 22px !important;
  }

  .tk-page-modern__content h1{
    font-size:26px !important;
    margin-bottom:12px !important;
  }

  .tk-page-modern__content h2{
    font-size:22px !important;
    margin:22px 0 8px !important;
  }

  .tk-page-modern__content h3{
    font-size:18px !important;
  }

  .tk-page-modern__content p,
  .tk-page-modern__content li{
    font-size:15px !important;
    line-height:1.72 !important;
    margin-bottom:10px !important;
  }
}
/* =========================================================
   TOPKOIN MOBILE POLISH
   - Samakan bottom navbar dengan footer
   - Rapikan header mobile agar tidak ada ruang kosong berlebih
   ========================================================= */
@media (max-width: 768px){
  /* hilangkan ruang kosong di bawah header mobile */
  .sv-header .sv-menubar,
  header.site-header .sv-menubar,
  .site-header .sv-menubar{
    display:none !important;
    padding:0 !important;
    margin:0 !important;
    height:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
    border:0 !important;
  }

  .sv-header,
  .site-header,
  header.site-header{
    padding-bottom:0 !important;
  }

  .sv-header .sv-wrap,
  .site-header .sv-wrap{
    padding-top:12px !important;
    padding-bottom:12px !important;
  }

  .sv-header .sv-row,
  .site-header .sv-row{
    min-height:auto !important;
    gap:10px !important;
  }

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

  /* bottom navbar dibuat menyatu dengan footer */
  .sv-bottomnav,
  .sv-bnav,
  .sv-bottom-nav{
    background:linear-gradient(180deg, #071a44 0%, #061637 100%) !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    box-shadow:0 -10px 28px rgba(0,0,0,.22) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .sv-bnav-bar{
    gap:8px !important;
  }

  .sv-bnav-item{
    color:rgba(236,244,255,.78) !important;
    border-radius:16px !important;
  }

  .sv-bnav-ico{
    color:rgba(236,244,255,.72) !important;
  }

  .sv-bnav-label{
    color:inherit !important;
    font-weight:800 !important;
  }

  .sv-bnav-item.is-active{
    background:rgba(255,255,255,.10) !important;
    color:#ffffff !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 18px rgba(4,10,26,.24) !important;
  }

  .sv-bnav-item.is-active .sv-bnav-ico{
    color:#7fc6ff !important;
  }

  .sv-bnav-badge{
    background:linear-gradient(180deg,#ff5757 0%, #ff2e5f 100%) !important;
    color:#fff !important;
    box-shadow:0 6px 16px rgba(255,46,95,.35) !important;
  }

  /* footer dibuat lebih serasi saat bertemu navbar bawah */
  .sv-footer-modern,
  .sv-footer{
    background:linear-gradient(180deg, #081a44 0%, #061637 100%) !important;
  }

  .sv-footer-modern__divider,
  .sv-footer-modern .sv-footer-modern__divider{
    background:rgba(255,255,255,.12) !important;
  }
}

/* =========================================================
   FINAL POLISH: centered homepage game grid + true full-bleed
   thumbnails without visible inner frame
   ========================================================= */

.home .sv-grid{
  justify-content:center !important;
  align-items:start !important;
}

@media (max-width: 680px){
  .home .sv-wrap,
  .home .sv-section,
  .home main .sv-wrap,
  .home main .sv-section{
    width:100% !important;
    max-width:100% !important;
    padding-left:8px !important;
    padding-right:8px !important;
    box-sizing:border-box !important;
  }

  .home .sv-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    column-gap:22px !important;
    row-gap:18px !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
	transform:scale(.92) !important;  
  }

  .home .sv-grid .sv-card{
    width:100% !important;
    min-width:0 !important;
  }

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

/* Center card pada desktop & tablet */
@media (min-width:681px){

  .home .sv-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fit, 220px) !important;
    justify-content:center !important;
    gap:18px !important;
  }

}

/* ===== FOOTER PAYMENT METHODS FINAL ===== */
.sv-footer-modern__top{
  display:grid !important;
  grid-template-columns:1.2fr .9fr .9fr !important;
  gap:34px !important;
  align-items:start !important;
}

.sv-footer-modern__payments{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:12px;
}

.sv-footer-modern__paytitle{
  font-size:16px;
  line-height:1.2;
  font-weight:800;
  color:#fff;
  margin:0 0 4px;
}

.sv-footer-modern__paylogos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 16px;
  max-width:280px;
}

.sv-footer-modern__payitem{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.sv-footer-modern__payitem img{
  display:block;
  height:18px;
  width:auto;
  max-width:92px;
  object-fit:contain;
  opacity:.96;
  transition:transform .18s ease, opacity .18s ease, filter .18s ease;
}

.sv-footer-modern__payitem img:hover{
  opacity:1;
  transform:translateY(-1px);
}

/* Tablet */
@media (max-width:980px){
  .sv-footer-modern__top{
    grid-template-columns:1fr !important;
    gap:26px !important;
    text-align:center !important;
  }

  .sv-footer-modern__brand,
  .sv-footer-modern__links,
  .sv-footer-modern__payments{
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .sv-footer-modern__linkrow{
    justify-content:center !important;
  }

  .sv-footer-modern__paylogos{
    justify-content:center !important;
    max-width:100% !important;
  }
}

/* Mobile */
@media (max-width:768px){
  .sv-footer-modern__payments{
    align-items:center !important;
    text-align:center !important;
  }

  .sv-footer-modern__paytitle{
    font-size:15px !important;
    margin-bottom:2px !important;
  }

  .sv-footer-modern__paylogos{
    justify-content:center !important;
    gap:10px 14px !important;
    max-width:260px !important;
  }

  .sv-footer-modern__payitem img{
    height:16px !important;
    max-width:82px !important;
  }

}