/* TRENDY STORE THEME - Modern Dark Gaming */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --dark:#08080d;--dark2:#0e0e16;--dark3:#16161f;
  --card:#12121c;--border:rgba(255,255,255,.06);
  --gold:#f5c518;--gold2:#d4a017;
  --text:#e4e4e7;--muted:#91919D;
  --glass:rgba(255,255,255,.03);
  --glow:rgba(245,197,24,.08);
}

*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--dark)!important;color:var(--text)!important;font-family:'Inter','Plus Jakarta Sans',sans-serif!important}

/* NAV */
nav{background:rgba(8,8,13,.85)!important;border-bottom:1px solid var(--border)!important;backdrop-filter:blur(20px)!important}
nav::after{background:linear-gradient(90deg,transparent,rgba(245,197,24,.15),transparent)!important}
.nav-brand{font-family:'Inter',sans-serif!important;font-weight:800!important;color:var(--gold)!important;letter-spacing:2px!important}
.nav-links a{color:var(--muted)!important;font-weight:500!important;border-radius:8px!important;transition:all .2s!important}
.nav-links a:hover{color:#fff!important;background:rgba(255,255,255,.05)!important}
.nav-btn{background:var(--gold)!important;color:#000!important;border-radius:10px!important;font-family:'Inter',sans-serif!important;font-weight:700!important;box-shadow:0 4px 20px rgba(245,197,24,.25)!important}
.nav-mobile-menu{background:rgba(8,8,13,.97)!important}
.nav-mobile-menu a{color:var(--text)!important}
.hamburger span{background:var(--text)!important}

/* HERO */
.hero{background:transparent!important}
.hero::before{background:radial-gradient(ellipse at 50% 30%,var(--glow),transparent 60%)!important}
.hero-badge{background:rgba(245,197,24,.08)!important;border:1px solid rgba(245,197,24,.2)!important;color:var(--gold)!important;border-radius:99px!important;font-weight:600!important;backdrop-filter:blur(10px)!important}
.hero h1{font-family:'Inter',sans-serif!important;font-weight:900!important;background:linear-gradient(135deg,#fff,var(--gold))!important;-webkit-background-clip:text!important;background-clip:text!important}
.hero p{color:var(--muted)!important;font-weight:400!important}
.btn-primary{background:var(--gold)!important;color:#000!important;border-radius:12px!important;font-family:'Inter',sans-serif!important;font-weight:700!important;box-shadow:0 4px 24px rgba(245,197,24,.3)!important}
.btn-primary:hover{box-shadow:0 8px 32px rgba(245,197,24,.5)!important}
.btn-outline{border:1px solid rgba(245,197,24,.3)!important;background:transparent!important;color:var(--gold)!important;border-radius:12px!important;font-family:'Inter',sans-serif!important;font-weight:700!important}
.btn-topup{border-radius:12px!important;font-family:'Inter',sans-serif!important;font-weight:700!important}

/* STATS */
.stats{background:var(--dark2)!important;border-color:var(--border)!important}
.stat-num{color:var(--gold)!important;font-family:'Inter',sans-serif!important;font-weight:900!important}
.stat-label{color:var(--muted)!important}

/* SECTIONS */
section{background:transparent!important}
.section-tag{background:rgba(245,197,24,.06)!important;border:1px solid rgba(245,197,24,.15)!important;color:var(--gold)!important;border-radius:99px!important;font-weight:600!important}
.section-title{color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:800!important}
.section-sub{color:var(--muted)!important}
.products,.sold-section,.steps{background:transparent!important}

/* CARDS */
.product-card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:16px!important;box-shadow:none!important;transition:all .3s ease!important}
.product-card:hover{border-color:rgba(245,197,24,.3)!important;transform:translateY(-4px)!important;box-shadow:0 12px 40px rgba(245,197,24,.08)!important}
.product-badge{border-radius:8px!important;font-family:'Inter',sans-serif!important;font-weight:700!important}
.product-rank{color:var(--gold)!important;font-family:'Inter',sans-serif!important;font-weight:700!important}
.product-name{color:#fff!important;font-weight:600!important}
.product-tag{background:rgba(255,255,255,.04)!important;border:1px solid var(--border)!important;color:var(--muted)!important;border-radius:6px!important}
.product-price{border-top:1px solid var(--border)!important}
.price-val{color:var(--gold)!important;font-family:'Inter',sans-serif!important;font-weight:800!important}
.price-btn{background:var(--gold)!important;color:#000!important;border-radius:8px!important;font-family:'Inter',sans-serif!important;font-weight:700!important;box-shadow:none!important}
.price-btn:hover{box-shadow:0 4px 16px rgba(245,197,24,.3)!important}
.price-btn-detail{border:1px solid rgba(245,197,24,.25)!important;background:transparent!important;color:var(--gold)!important;border-radius:8px!important;font-family:'Inter',sans-serif!important;font-weight:600!important}
.stock-badge{border:none!important;border-radius:6px!important;font-weight:700!important;background:rgba(34,197,94,.12)!important;color:#22c55e!important}
.stock-badge.low{background:rgba(239,68,68,.12)!important;color:#ef4444!important}

/* FILTER */
.filter-card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:16px!important;box-shadow:none!important}
.filter-card:hover{border-color:rgba(245,197,24,.12)!important}
.filter-label{color:var(--muted)!important;font-weight:600!important}
.search-wrap input{background:var(--dark2)!important;border:1px solid var(--border)!important;border-radius:10px!important;color:#fff!important;font-family:'Inter',sans-serif!important;box-shadow:none!important}
.search-wrap input:focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(245,197,24,.1)!important}
.cat-item{border-radius:10px!important;border:none!important}
.cat-item:hover{background:rgba(245,197,24,.04)!important}
.cat-item .cat-check{border:2px solid var(--muted)!important;border-radius:6px!important}
.cat-item input:checked~.cat-check{background:var(--gold)!important;border-color:var(--gold)!important}
.cat-item input:checked~.cat-text{color:var(--gold)!important}
.cat-item .cat-text{color:var(--text)!important;font-weight:500!important}
.cat-item:has(input:checked){background:rgba(245,197,24,.06)!important}
.support-card{background:var(--card)!important;border:1px solid rgba(245,197,24,.12)!important;box-shadow:none!important}
.support-card .support-tag{color:var(--gold)!important}
.support-card .support-title{color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:700!important}
.support-card .support-btn{border-radius:10px!important;background:var(--gold)!important;color:#000!important;font-weight:700!important;box-shadow:none!important}

/* RANK SECTIONS */
.rank-section-header{border-bottom:1px solid var(--border)!important}
.rank-section-title{color:var(--gold)!important;font-family:'Inter',sans-serif!important;font-weight:800!important}
.rank-section-count{color:var(--muted)!important;background:var(--dark3)!important;border-radius:99px!important;box-shadow:none!important}
.show-all-btn{background:var(--dark3)!important;border:1px solid var(--border)!important;color:var(--gold)!important;border-radius:10px!important;box-shadow:none!important}
.show-all-btn:hover{background:rgba(245,197,24,.06)!important;border-color:rgba(245,197,24,.2)!important}

/* FEATURES */
.feature-card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:16px!important;box-shadow:none!important}
.feature-card:hover{border-color:rgba(245,197,24,.2)!important;transform:translateY(-4px)!important;box-shadow:0 8px 30px rgba(245,197,24,.06)!important}
.feature-title{color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:700!important}
.feature-desc{color:var(--muted)!important}

/* STEPS */
.step-num{background:var(--gold)!important;color:#000!important;font-family:'Inter',sans-serif!important;font-weight:800!important;box-shadow:0 4px 16px rgba(245,197,24,.25)!important}
.step-title{color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:700!important}
.step-desc{color:var(--muted)!important}

/* CTA */
.cta{background:transparent!important;border-color:var(--border)!important}
.cta h2{color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:800!important}
.cta p{color:var(--muted)!important}

/* SOLD */
.sold-card{background:var(--card)!important;border:1px solid rgba(239,68,68,.15)!important;border-radius:12px!important;box-shadow:none!important}
.sold-card-title{color:#fff!important}
.sold-card-sub{color:#f87171!important}

/* FOOTER */
footer{background:var(--dark2)!important;border-top:1px solid var(--border)!important}
.footer-brand{color:var(--gold)!important;font-family:'Inter',sans-serif!important;font-weight:800!important}
.footer-brand span{color:var(--muted)!important}
.footer-links a{color:var(--muted)!important}
.footer-links a:hover{color:var(--gold)!important}
.footer-bottom{color:var(--muted)!important}
.footer-bottom span{color:var(--gold)!important}

/* FILTER TOGGLE */
.filter-toggle{background:var(--card)!important;border:1px solid var(--border)!important;color:var(--gold)!important;border-radius:12px!important;box-shadow:none!important}
.result-count{color:var(--muted)!important}

/* TABS */
.tab-btn{background:var(--dark3)!important;border:1px solid var(--border)!important;color:var(--muted)!important;border-radius:10px!important;box-shadow:none!important}
.tab-btn:hover{color:var(--gold)!important;border-color:rgba(245,197,24,.2)!important}
.tab-btn.active{background:var(--gold)!important;color:#000!important;border-color:var(--gold)!important}

/* WA FLOAT */
.wa-float{border-radius:16px!important;width:56px!important;height:56px!important;box-shadow:0 4px 20px rgba(37,211,102,.3)!important}

/* MOBILE FILTER */
@media(max-width:768px){
  .filter-sidebar{background:rgba(8,8,13,.98)!important}
  .filter-mob-header{border-bottom:1px solid var(--border)!important}
  .filter-mob-title{color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:700!important}
  .filter-mob-close{background:var(--dark3)!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:10px!important;box-shadow:none!important}
}

/* DETAIL PAGE */
.detail-img-box{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:16px!important;box-shadow:none!important}
.gallery-img{border:1px solid var(--border)!important;border-radius:10px!important;box-shadow:none!important}
.gallery-img:hover{border-color:var(--gold)!important}
details.desc-box{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:14px!important;box-shadow:none!important}
details.desc-box summary{color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:700!important}
details.desc-box summary::after{background:var(--dark3)!important;border:1px solid var(--border)!important;color:var(--gold)!important;border-radius:8px!important;box-shadow:none!important}
details.desc-box[open] summary::after{background:rgba(245,197,24,.1)!important;border-color:var(--gold)!important;color:var(--gold)!important}
details.desc-box[open] summary{border-bottom:1px solid var(--border)!important}
details.desc-box .desc-content{color:var(--text)!important}
.info-panel{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:20px!important;box-shadow:none!important}
.info-title{color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:800!important}
.info-rank{color:var(--gold)!important;background:rgba(245,197,24,.08)!important;border:none!important;border-radius:99px!important;font-family:'Inter',sans-serif!important;font-weight:700!important}
.info-price{color:var(--gold)!important;font-family:'Inter',sans-serif!important;border-bottom:1px solid var(--border)!important}
.spec-item{border-bottom:1px dashed var(--border)!important}
.spec-label{color:var(--muted)!important}
.spec-val{color:var(--text)!important}
.qty-section{border-color:var(--border)!important}
.qty-selector{border:1px solid var(--border)!important;border-radius:10px!important;overflow:hidden;box-shadow:none!important}
.qty-btn{background:var(--dark3)!important;color:var(--text)!important;border:none!important}
.qty-btn:hover{color:var(--gold)!important;background:rgba(245,197,24,.1)!important}
.qty-val{background:var(--dark2)!important;color:#fff!important;border-color:var(--border)!important;font-weight:700!important}
.qty-total-label{color:var(--muted)!important}
.qty-total-val{color:var(--gold)!important;font-family:'Inter',sans-serif!important}
.buy-btn{background:var(--gold)!important;color:#000!important;border-radius:12px!important;font-family:'Inter',sans-serif!important;font-weight:700!important;box-shadow:0 4px 20px rgba(245,197,24,.25)!important}
.buy-btn:hover{box-shadow:0 8px 30px rgba(245,197,24,.4)!important}
.buy-wa{border-radius:12px!important;font-family:'Inter',sans-serif!important;font-weight:700!important;box-shadow:0 4px 16px rgba(37,211,102,.2)!important}
.awareness-box{background:rgba(239,68,68,.06)!important;border:1px solid rgba(239,68,68,.2)!important;border-radius:12px!important;box-shadow:none!important}
.spec-link-btn{background:rgba(245,197,24,.06)!important;border:1px solid rgba(245,197,24,.2)!important;color:var(--gold)!important;border-radius:8px!important;box-shadow:none!important}
.breadcrumb{color:var(--muted)!important}
.breadcrumb a{color:var(--gold)!important}
.related-title{color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:800!important}
.price-val-sm{color:var(--gold)!important;font-family:'Inter',sans-serif!important;font-weight:800!important}
.stock-badge-detail{border:none!important;border-radius:8px!important;background:rgba(34,197,94,.1)!important;color:#22c55e!important}
.stock-badge-detail.low{background:rgba(239,68,68,.1)!important;color:#ef4444!important}
.sticky-buy-bar{background:rgba(8,8,13,.95)!important;border-top:1px solid var(--border)!important;backdrop-filter:blur(16px)!important}
.sticky-price-label .s-name{color:var(--muted)!important}
.sticky-price-label .s-price{color:var(--gold)!important;font-family:'Inter',sans-serif!important}
.sticky-buy-btn{background:var(--gold)!important;color:#000!important;border-radius:10px!important;font-family:'Inter',sans-serif!important;font-weight:700!important}
.modal{background-color:rgba(0,0,0,.9)!important}
.modal-content{border:1px solid var(--border)!important;border-radius:12px!important}

/* CHECKOUT */
.checkout-title{color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:800!important}
.checkout-subtitle{color:var(--muted)!important}
.form-card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:20px!important;box-shadow:none!important}
.form-header{color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:700!important}
.form-desc{color:var(--muted)!important}
.form-label{color:var(--text)!important;font-weight:600!important}
.form-input{background:var(--dark2)!important;border:1px solid var(--border)!important;border-radius:10px!important;color:#fff!important;font-family:'Inter',sans-serif!important;box-shadow:none!important}
.form-input:focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(245,197,24,.1)!important}
.form-hint{color:var(--muted)!important}
.summary-card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:20px!important;box-shadow:none!important}
.summary-header{color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:700!important;border-bottom:1px solid var(--border)!important}
.summary-name{color:#fff!important;font-weight:700!important}
.summary-rank{color:var(--gold)!important;font-family:'Inter',sans-serif!important;font-weight:700!important}
.summary-img{border:none!important;border-radius:10px!important}
.summary-img-placeholder{border:none!important;border-radius:10px!important;background:var(--dark3)!important}
.stock-info{border:none!important;border-radius:8px!important;background:rgba(34,197,94,.1)!important;color:#22c55e!important}
.stock-info.low{background:rgba(239,68,68,.1)!important;color:#ef4444!important}
.price-row .label{color:var(--muted)!important}
.price-row .value{color:var(--text)!important}
.price-total{border-top:1px solid var(--border)!important}
.price-total .label{color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:700!important}
.price-total .value{color:var(--gold)!important;font-family:'Inter',sans-serif!important;font-weight:800!important}
.checkout-btn{background:var(--gold)!important;color:#000!important;border-radius:12px!important;font-family:'Inter',sans-serif!important;font-weight:700!important;box-shadow:0 4px 20px rgba(245,197,24,.25)!important}
.checkout-btn:hover{box-shadow:0 8px 30px rgba(245,197,24,.4)!important}
.error-alert{background:rgba(239,68,68,.06)!important;border:1px solid rgba(239,68,68,.2)!important;border-radius:12px!important;color:#ef4444!important;box-shadow:none!important}
.secure-info{background:rgba(34,197,94,.06)!important;border:1px solid rgba(34,197,94,.15)!important;border-radius:12px!important;color:#22c55e!important;box-shadow:none!important}
.pm-group{border:none!important;border-radius:14px!important;background:var(--card)!important;box-shadow:none!important;border:1px solid var(--border)!important}
.pm-group.active{box-shadow:0 0 0 2px rgba(245,197,24,.2)!important}
.pm-group-header{background:transparent!important}
.pm-group-header:hover{background:rgba(245,197,24,.03)!important}
.pm-group-name{color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:700!important}
.pm-group-arrow{color:var(--muted)!important}
.pm-option label{background:rgba(255,255,255,.02)!important;border:2px solid transparent!important;border-radius:10px!important}
.pm-option label:hover{background:rgba(245,197,24,.04)!important;border-color:rgba(245,197,24,.12)!important}
.pm-option input:checked+label{border-color:var(--gold)!important;background:rgba(245,197,24,.06)!important;box-shadow:none!important}
.pm-option .pm-channel-name{color:var(--muted)!important;font-weight:600!important}
.pm-option input:checked+label .pm-channel-name{color:var(--gold)!important}
.pm-selected-badge{background:var(--gold)!important;color:#000!important}

/* PAYMENT STATUS */
.status-card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:20px!important;box-shadow:none!important}
.status-pending .status-header{background:linear-gradient(180deg,rgba(245,197,24,.04),transparent)!important}
.status-paid .status-header{background:linear-gradient(180deg,rgba(34,197,94,.04),transparent)!important}
.status-failed .status-header,.status-expired .status-header{background:linear-gradient(180deg,rgba(239,68,68,.04),transparent)!important}
.status-badge{border:none!important;border-radius:99px!important;font-family:'Inter',sans-serif!important;font-weight:700!important;box-shadow:none!important}
.status-title{color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:800!important}
.status-desc{color:var(--muted)!important}
.detail-row{border-bottom:1px dashed var(--border)!important}
.detail-label{color:var(--muted)!important}
.detail-value{color:var(--text)!important;font-weight:600!important}
.detail-value.gold{color:var(--gold)!important;font-family:'Inter',sans-serif!important}
.act-btn{border-radius:12px!important;font-family:'Inter',sans-serif!important;font-weight:700!important}
.act-primary{background:var(--gold)!important;color:#000!important;box-shadow:0 4px 20px rgba(245,197,24,.25)!important}
.act-secondary{background:var(--dark3)!important;border:1px solid var(--border)!important;color:var(--text)!important;box-shadow:none!important}
.act-secondary:hover{color:var(--gold)!important}
.act-wa{border-radius:12px!important;box-shadow:0 4px 16px rgba(37,211,102,.2)!important}
.polling-bar{background:var(--dark3)!important;border-top:1px solid var(--border)!important;color:var(--gold)!important;font-weight:600!important}
.polling-dot{background:var(--gold)!important}
.next-steps{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:16px!important;box-shadow:none!important}
.next-steps h3{color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:700!important}
.step-list li{color:var(--muted)!important}
.step-list li::before{background:var(--dark3)!important;border:none!important;color:var(--gold)!important;box-shadow:none!important}
.step-list li.done{color:#22c55e!important}
.step-list li.done::before{background:rgba(34,197,94,.1)!important;color:#22c55e!important}
.step-list li.active{color:var(--gold)!important}
.step-list li.active::before{background:var(--gold)!important;color:#000!important}

/* Fokus keyboard terlihat di semua elemen interaktif */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold)!important;outline-offset:2px!important;border-radius:4px}

/* Bubble chat mengapung hilang di mobile: CTA WA sudah ada di navbar & hero */
@media(max-width:768px){.wa-float{display:none!important}}