/* =====================================================================
   PREMIUM UI LAYER
   Lapisan visual tambahan yang sengaja tidak mengubah logika transaksi.
   Semua warna utama tetap mengikuti --gold / --gold-2 dari pengaturan admin.
   ===================================================================== */

:root{
  --premium-shadow-sm:0 8px 28px -18px rgba(15,23,42,.28);
  --premium-shadow:0 18px 46px -24px rgba(15,23,42,.32);
  --premium-shadow-lg:0 28px 70px -32px rgba(15,23,42,.40);
  --premium-radius:20px;
  --premium-radius-sm:14px;
}

html{scroll-padding-top:84px}
body{font-feature-settings:"cv02","cv03","cv04","cv11";text-rendering:optimizeLegibility}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--gold) 32%,transparent);outline-offset:2px}
.container{width:min(1180px,calc(100% - 32px));max-width:1180px;margin-left:auto;margin-right:auto}

/* ---------- Header desktop ---------- */
.site-header{z-index:60}
.premium-header-inner{gap:22px;height:72px}
.premium-header-inner .logo{flex:0 0 auto}
.desktop-nav{display:none;align-items:center;gap:4px;flex:1;min-width:0}
.desktop-nav a{position:relative;display:inline-flex;align-items:center;height:40px;padding:0 10px;border-radius:10px;color:var(--muted);font-size:12.5px;font-weight:800;white-space:nowrap;transition:.2s ease}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--text);background:color-mix(in srgb,var(--gold) 7%,var(--surface))}
.desktop-nav a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--gold-2))}
.desktop-header-tools{display:none;align-items:center;gap:8px;flex:0 0 auto}
.header-search{width:190px;height:40px;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid var(--border);border-radius:12px;background:var(--bg-2);transition:.2s ease}
.header-search:focus-within{width:230px;border-color:color-mix(in srgb,var(--gold) 55%,var(--border));box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 8%,transparent);background:var(--surface)}
.header-search i{font-size:12px;color:var(--muted)}
.header-search input{width:100%;min-width:0;background:transparent;border:0;outline:0;font-size:11.5px;font-weight:600;color:var(--text)}
.header-search input::placeholder{color:var(--muted)}
.header-login-link{font-size:12.5px;font-weight:800;color:var(--text);padding:10px 9px}
.header-register-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:11px;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;font-size:12px;font-weight:900;box-shadow:0 10px 24px -12px color-mix(in srgb,var(--gold) 65%,transparent);transition:.2s ease}
.header-register-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px -12px color-mix(in srgb,var(--gold) 70%,transparent)}
.header-account-btn{display:flex;align-items:center;gap:8px;max-width:180px;padding:5px 10px 5px 5px;border:1px solid var(--border);border-radius:13px;background:var(--surface);box-shadow:var(--premium-shadow-sm);transition:.2s ease}
.header-account-btn:hover{border-color:color-mix(in srgb,var(--gold) 35%,var(--border));transform:translateY(-1px)}
.header-account-avatar{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;font-size:11px;font-weight:900}
.header-account-copy{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.header-account-copy small{font-size:8.5px;color:var(--muted);font-weight:700}
.header-account-copy strong{font-size:10.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-header-actions{display:flex}
.drawer-search{margin:0 16px 8px;height:44px;border:1px solid var(--border);border-radius:13px;background:var(--bg-2);display:flex;align-items:center;gap:10px;padding:0 13px}
.drawer-search i{font-size:13px;color:var(--muted)}
.drawer-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:13px;font-weight:600}
.drawer-nav a i{width:22px;text-align:center;color:var(--muted)}

@media(min-width:980px){
  .desktop-nav,.desktop-header-tools{display:flex}
  .mobile-header-actions{display:none!important}
  .premium-header-inner .logo-img{max-height:42px}
}
@media(min-width:1180px){
  .desktop-nav a{padding:0 12px;font-size:13px}
  .header-search{width:220px}
  .header-search:focus-within{width:260px}
}

/* ---------- Hero & intro ---------- */
.hero{padding-top:24px}
.banner{border-radius:22px!important;box-shadow:var(--premium-shadow-lg);border:1px solid color-mix(in srgb,var(--border) 85%,transparent);overflow:hidden}
.premium-intro{padding-top:14px;padding-bottom:8px}
.premium-intro-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr;border:1px solid var(--border);border-radius:24px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--gold) 4%,var(--surface)));box-shadow:var(--premium-shadow);isolation:isolate}
.premium-intro-card::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-110px;top:-140px;background:radial-gradient(circle,color-mix(in srgb,var(--gold-2) 18%,transparent),transparent 70%);z-index:-1}
.premium-intro-copy{padding:24px 20px}
.premium-eyebrow{display:inline-flex;align-items:center;gap:7px;width:max-content;max-width:100%;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--gold) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 16%,var(--border));color:var(--gold);font-size:10px;font-weight:900;letter-spacing:.03em;text-transform:uppercase}
.premium-intro-copy h1{max-width:720px;margin:12px 0 8px;font-family:'Sora','Manrope',sans-serif;font-size:clamp(24px,5.8vw,42px);line-height:1.12;letter-spacing:-.035em;font-weight:900;color:var(--text)}
.premium-intro-copy>p{max-width:700px;color:var(--muted);font-size:13.5px;line-height:1.75}
.premium-main-search{display:flex;align-items:center;gap:9px;max-width:700px;margin-top:18px;padding:6px 6px 6px 14px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:0 12px 32px -22px rgba(15,23,42,.35);transition:.2s ease}
.premium-main-search:focus-within{border-color:color-mix(in srgb,var(--gold) 45%,var(--border));box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 7%,transparent),var(--premium-shadow-sm)}
.premium-main-search>i{font-size:14px;color:var(--muted)}
.premium-main-search input{flex:1;min-width:0;height:39px;border:0;outline:0;background:transparent;color:var(--text);font-size:12.5px;font-weight:600}
.premium-main-search button{height:39px;padding:0 17px;border:0;border-radius:11px;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;font-size:11.5px;font-weight:900;cursor:pointer}
.premium-trust-row{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:15px;color:var(--muted);font-size:10.5px;font-weight:700}
.premium-trust-row span{display:inline-flex;align-items:center;gap:6px}
.premium-trust-row i{color:var(--gold)}
.premium-category-panel{padding:18px 20px 22px;border-top:1px solid var(--border);background:color-mix(in srgb,var(--gold) 2.5%,var(--bg-2))}
.premium-category-panel>strong{display:block;color:var(--text);font-size:12.5px;font-weight:900;margin-bottom:10px}
.premium-category-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.premium-category-links a{display:flex;align-items:center;gap:8px;min-width:0;padding:9px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:10.5px;font-weight:800;transition:.2s ease}
.premium-category-links a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gold) 35%,var(--border));box-shadow:var(--premium-shadow-sm)}
.premium-category-links a>span:nth-child(2){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.premium-category-links a>i:last-child{font-size:8px;color:var(--muted)}
.premium-category-icon{flex:0 0 auto;width:27px;height:27px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--gold) 9%,var(--surface));color:var(--gold);font-size:10px}
.premium-all-products{display:inline-flex;align-items:center;gap:7px;margin-top:12px;color:var(--gold);font-size:11px;font-weight:900}
@media(min-width:760px){
  .premium-intro-card{grid-template-columns:minmax(0,1.55fr) minmax(290px,.75fr)}
  .premium-intro-copy{padding:34px 36px}
  .premium-category-panel{padding:30px 28px;border-top:0;border-left:1px solid var(--border)}
  .premium-category-links{grid-template-columns:1fr}
  .premium-intro-copy>p{font-size:14px}
}

/* ---------- Section rhythm ---------- */
.section{padding-top:34px;padding-bottom:8px}
.section-head{margin-bottom:2px}
.section-head h2{letter-spacing:-.025em}
.premium-section-head{text-align:left!important;margin:6px 0 16px}
.premium-section-head h1{margin:8px 0 5px;font-family:'Sora','Manrope',sans-serif;font-size:clamp(24px,5vw,34px);line-height:1.15;letter-spacing:-.03em;font-weight:900;color:var(--text)}
.premium-section-head p{max-width:680px!important;margin-bottom:0!important;line-height:1.7}

/* ---------- Breadcrumb ---------- */
.seo-breadcrumb{display:flex;align-items:center;gap:8px;min-width:0;margin:2px 0 14px;color:var(--muted);font-size:10.5px;font-weight:700;white-space:nowrap;overflow:hidden}
.seo-breadcrumb a{color:var(--muted);transition:.2s}
.seo-breadcrumb a:hover{color:var(--gold)}
.seo-breadcrumb i{font-size:7px;opacity:.65}
.seo-breadcrumb span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--text);font-weight:800}

/* ---------- Catalog ---------- */
.premium-catalog{padding-top:24px}
.catalog-search{display:flex;align-items:center;gap:9px;max-width:660px;margin-bottom:16px;padding:5px 5px 5px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--premium-shadow-sm)}
.catalog-search>i{font-size:13px;color:var(--muted)}
.catalog-search input{height:39px;flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:12.5px;font-weight:600}
.catalog-search button{height:39px;padding:0 17px;border:0;border-radius:10px;background:var(--text);color:var(--surface);font-size:11px;font-weight:900;cursor:pointer}
body[data-surface="gelap"] .catalog-search button{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff}
.catalog-category-nav{display:flex;gap:7px;overflow-x:auto;padding:2px 1px 9px;margin-bottom:16px;scrollbar-width:none}
.catalog-category-nav::-webkit-scrollbar{display:none}
.catalog-category-nav a{flex:0 0 auto;display:inline-flex;align-items:center;height:35px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:10.5px;font-weight:800;transition:.18s ease}
.catalog-category-nav a:hover{border-color:color-mix(in srgb,var(--gold) 30%,var(--border));color:var(--text)}
.catalog-category-nav a.active{border-color:transparent;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;box-shadow:0 8px 20px -12px color-mix(in srgb,var(--gold) 70%,transparent)}
.premium-games-grid{align-items:stretch}
.premium-game-card{align-items:stretch!important;border:1px solid var(--border);border-radius:17px;padding:7px;background:var(--surface);box-shadow:var(--premium-shadow-sm);overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important}
.premium-game-card:hover{transform:translateY(-4px)!important;box-shadow:var(--premium-shadow);border-color:color-mix(in srgb,var(--gold) 25%,var(--border))}
.premium-game-card .game-cover{width:100%!important;aspect-ratio:1/1!important;height:auto!important;border-radius:12px!important;box-shadow:none!important}
.premium-game-card:hover .game-cover{box-shadow:none!important}
.premium-game-meta{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 4px 5px;min-width:0}
.premium-game-meta strong{width:100%;font-size:11.5px;line-height:1.35;font-weight:900;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.premium-game-meta span{width:100%;font-size:9.5px;color:var(--muted);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.premium-game-meta small{margin-top:4px;color:var(--gold);font-size:9.5px;font-weight:900}
.premium-empty-state{max-width:560px;margin:34px auto;text-align:center;padding:38px 24px;border:1px dashed var(--border);border-radius:20px;background:var(--surface)}
.premium-empty-state>span{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin:0 auto 13px;background:color-mix(in srgb,var(--gold) 9%,var(--surface));color:var(--gold)}
.premium-empty-state h2{font-size:17px;font-weight:900;color:var(--text)}
.premium-empty-state p{margin-top:4px;font-size:12px;color:var(--muted)}
.premium-empty-state a{display:inline-flex;margin-top:14px;padding:9px 14px;border-radius:10px;background:var(--text);color:var(--surface);font-size:10.5px;font-weight:900}

/* ---------- Existing homepage cards upgraded ---------- */
.grid-2{gap:10px!important}
.prod-card{border-radius:15px!important;padding:10px 11px!important;box-shadow:var(--premium-shadow-sm)!important}
.prod-card:hover{box-shadow:var(--premium-shadow)!important;border-color:color-mix(in srgb,var(--gold) 28%,var(--border))!important}
.prod-thumb{border-radius:11px!important}
.tabs{padding:3px!important}
.tab{font-weight:800!important}

/* ---------- Product detail ---------- */
.order-hero{border-radius:22px!important;box-shadow:var(--premium-shadow-lg)!important;border-color:color-mix(in srgb,var(--gold) 10%,var(--border))!important}
.order-hero h1{font-size:clamp(20px,4vw,27px)!important;letter-spacing:-.025em}
.order-badges{justify-content:center;gap:7px!important}
.order-badges span{border:1px solid var(--border);background:var(--bg-2);padding:6px 9px!important;border-radius:999px!important}
.order-step{border-radius:18px!important;box-shadow:var(--premium-shadow-sm)!important}
.order-step-head{padding:13px 16px!important;background:linear-gradient(120deg,color-mix(in srgb,var(--gold) 92%,#111827),var(--gold-2))!important}
.order-step-body{padding:17px!important}
.order-input{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important}
.order-input:focus{border-color:color-mix(in srgb,var(--gold) 55%,var(--border))!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 8%,transparent)!important}
.nominal-item,.pay-opt{transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease!important}
.nominal-item:hover,.pay-opt:hover{transform:translateY(-2px);box-shadow:var(--premium-shadow-sm)}

/* ---------- Footer ---------- */
.site-footer{margin-top:44px!important}
.footer-cols{gap:28px!important}
.footer-cols h4{font-size:12px!important;letter-spacing:.02em}
.footer-cols a{transition:.18s ease}
.footer-cols a:hover{color:var(--gold)!important;transform:translateX(2px)}

/* ---------- Dark surface ---------- */
body[data-surface="gelap"] .premium-intro-card,
body[data-surface="gelap"] .premium-game-card,
body[data-surface="gelap"] .catalog-search,
body[data-surface="gelap"] .catalog-category-nav a,
body[data-surface="gelap"] .premium-category-links a,
body[data-surface="gelap"] .header-account-btn{background:var(--surface);border-color:var(--border)}
body[data-surface="gelap"] .premium-category-panel{background:color-mix(in srgb,var(--gold) 5%,var(--bg-2))}

/* ---------- Desktop spacing ---------- */
@media(min-width:640px){
  .premium-game-meta strong{font-size:12.5px}
  .premium-game-meta span,.premium-game-meta small{font-size:10px}
  .prod-card{padding:12px!important}
}
@media(min-width:900px){
  .hero{padding-top:30px}
  .section{padding-top:46px}
  .premium-games-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:16px!important}
  .premium-game-card{padding:8px}
}
@media(min-width:1180px){
  .premium-games-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important}
}

/* ---------- Mobile polish ---------- */
@media(max-width:639px){
  .container{width:min(100% - 24px,1180px)}
  .site-header .container{width:calc(100% - 24px)}
  .premium-header-inner{height:62px}
  .premium-intro{padding-top:10px}
  .premium-intro-card{border-radius:19px}
  .premium-intro-copy{padding:20px 16px}
  .premium-category-panel{padding:16px}
  .premium-main-search{padding-left:12px}
  .premium-main-search button{padding:0 13px}
  .premium-trust-row{gap:7px 11px}
  .premium-section-head h1{font-size:24px}
  .premium-game-card{border-radius:14px;padding:6px}
  .premium-game-card .game-cover{border-radius:10px!important}
}

@media(prefers-reduced-motion:reduce){
  .premium-game-card,.premium-category-links a,.header-register-btn,.header-account-btn{transition:none!important}
}