/* =============================================
     ZONAASUPAN69 — style.css v3
     Premium Dark Redesign
     ============================================= */
  
  /* ── BASE ─────────────────────────────────── */
  *,::after,::before{box-sizing:border-box;margin:0;padding:0}
  body,html{overflow-x:hidden}
  body,button,input,select,textarea{font-family:'Plus Jakarta Sans',system-ui,sans-serif}
  img{display:block;max-width:100%}
  a{text-decoration:none;color:inherit}
  button{border:none;background:0 0;cursor:pointer;touch-action:manipulation}
  button:focus:not(:focus-visible),input:focus:not(:focus-visible),
  select:focus:not(:focus-visible),textarea:focus:not(:focus-visible){outline:0}
  button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
  :focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}
  
  /* ── VARIABLES ────────────────────────────── */
  :root{
    --bg:#09090f;
    --bg2:#080812;
    --surface:#0d0d1b;
    --surface2:#111121;
    --surface3:#181830;
  --primary:#7c5cbf;
    --primary-dark:#5e3fa3;
    --primary-light:#a98de0;
    --cyan:#67e8f9;
    --cyan2:#4dd8f0;
    --pink:#e0407b;
    --magenta:#c026d3;
    --gold:#f5c518;
    --red:#ff4444;
    --green:#00d4aa;
    --text:#eeeef8;
    --text2:#b9b9cc;
    --text3:#63639a;
    --rg:linear-gradient(180deg,#9069C9,#00f9ff);
  
    --rg3:linear-gradient(180deg,#9069C9,#da69d3,#00f9ff);
--border:rgba(144,105,233,.18);
    --border-strong:rgba(144,105,233,.25);
    --border-cyan:rgba(0,249,255,.12);
    --r-xs:6px;
    --r-sm:9px;
    --r:15px;
    --r-lg:18px;
    --r-xl:24px;
    --t:.2s ease;
    --t-fast:.12s ease;
  }
  /* ── LIGHT MODE VARIABLES ─────────────────────────────── */
[data-theme="light"] {
  --bg: #f0ede8;
  --bg2: #e8e4de;
  --surface: #faf8f5;
  --surface2: #f0ede8;
  --surface3: #e8e4de;
  --primary: #7c5cbf;
  --primary-dark: #5e3fa3;
  --primary-light: #9069c9;
  --cyan: #0ea5c9;
  --cyan2: #0891b2;
  --pink: #db2777;
  --magenta: #a21caf;
  --gold: #b45309;
  --red: #dc2626;
  --green: #059669;
  --text: #1a1625;
  --text2: #3d3550;
  --text3: #7c6fa0;
  --rg: linear-gradient(180deg, #7c5cbf, #0ea5c9);
  --rg3: linear-gradient(180deg, #7c5cbf, #a855f7, #0ea5c9);
  --border: rgba(124, 92, 191, .18);
  --border-strong: rgba(124, 92, 191, .45);
  --border-cyan: rgba(14, 165, 201, .22);
}

/* Body background di light mode */
[data-theme="light"] body {
  background-color: var(--bg);
  color: var(--text);
}

/* Overlay pattern lebih subtle di light mode */
[data-theme="light"] body::before {
  background-color: rgba(240, 237, 232, 0.93);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M18 2 L34 18 L18 34 L2 18 Z' fill='none' stroke='rgba(124,92,191,0.10)' stroke-width='1'/%3E%3Cpath d='M18 8 L28 18 L18 28 L8 18 Z' fill='none' stroke='rgba(14,165,201,0.08)' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='1.2' fill='rgba(14,165,201,0.18)'/%3E%3Ccircle cx='0' cy='0' r='1.2' fill='rgba(124,92,191,0.22)'/%3E%3Ccircle cx='36' cy='0' r='1.2' fill='rgba(124,92,191,0.22)'/%3E%3Ccircle cx='0' cy='36' r='1.2' fill='rgba(124,92,191,0.22)'/%3E%3Ccircle cx='36' cy='36' r='1.2' fill='rgba(124,92,191,0.22)'/%3E%3C/svg%3E");
}

/* Header light */
[data-theme="light"] .header,
[data-theme="light"] .back-header {
  background: rgba(250, 248, 245, .97);
  border-bottom-color: rgba(124, 92, 191, .18);
}

/* Nav light */
[data-theme="light"] #globalNav {
  background: rgba(250, 248, 245, .97);
  border-color: rgba(124, 92, 191, .18);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12), 0 0 0 1px rgba(124, 92, 191, .08);
}
[data-theme="light"] .nav-item { color: #7c6fa0; }
[data-theme="light"] .nav-item.active { color: var(--primary); }
[data-theme="light"] .nav-item.active::before { background: var(--primary); }

/* Surface / cards light */
[data-theme="light"] .game-card { background: #faf8f5; }
[data-theme="light"] .game-img-wrap { background: #f0ede8; }
[data-theme="light"] .flash-card {
  background-image:
    linear-gradient(#faf8f5, #f0ede8),
    linear-gradient(135deg, #7c5cbf, #a855f7, #0ea5c9);
}
[data-theme="light"] .order-summary,
[data-theme="light"] .form-card,
[data-theme="light"] .order-item,
[data-theme="light"] .desc-spec-card {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="light"] .review-card {
  background: linear-gradient(135deg, #faf8f5 0%, #f4f0ee 100%);
  border-color: rgba(124,92,191,.18);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
[data-theme="light"] .review-card::before {
  background: linear-gradient(180deg, var(--primary), var(--cyan));
}
[data-theme="light"] .review-header-card {
  background: linear-gradient(135deg, #faf8f5 0%, #f0ecf8 60%, #edf6fa 100%);
  border-color: rgba(124,92,191,.25);
  box-shadow: 0 4px 14px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9);
}

/* Section header accent light */
[data-theme="light"] .sec-hdr::after {
  background: linear-gradient(90deg, transparent, var(--primary) 30%, var(--cyan) 70%, transparent);
}

/* Search & filter light */
[data-theme="light"] .search-input,
[data-theme="light"] .filter-btn {
  background: var(--surface);
  color: var(--text);
}
[data-theme="light"] .search-results,
[data-theme="light"] .filter-dropdown {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="light"] .search-item:hover,
[data-theme="light"] .filter-dd-item:hover {
  background: rgba(124, 93, 191, .07);
}

/* Sticky buy light */
[data-theme="light"] .sticky-buy {
  background: rgba(250, 248, 245, .99);
  border-top-color: var(--border);
}

/* Footer light */
/* Footer light — matching secure section light style */
[data-theme="light"] .footer {
  background: rgba(250, 248, 245, .96);
  border-top-color: rgba(124, 92, 191, .35);
  box-shadow: inset 0 1px 0 rgba(124, 93, 191, .09);
}

/* CS modal light */
[data-theme="light"] .cs-modal-box { background: var(--surface); }
[data-theme="light"] .cs-modal-backdrop { background: rgba(26, 22, 37, .55); }

/* Secure section light */
[data-theme="light"] .secure-section {
  background: rgba(250, 248, 245, .98);
  border-color: rgba(124, 92, 191, .25);
}

/* Media69 board light */
[data-theme="light"] .media69-board {
  background-image:
    linear-gradient(#faf8f5, #faf8f5),
    linear-gradient(145deg, #9069C9, #7c5cbf 50%, #c026d3 80%, #4a8fa8);
}
[data-theme="light"] .board-item { background: rgba(124, 92, 191, .05); border-left-color: var(--primary); }
[data-theme="light"] .board-item { background: rgba(124, 92, 191, .05); border-left-color: var(--primary); }
[data-theme="light"] .board-icon { background: linear-gradient(145deg, #f0ede8, #e8e4de); }

/* Payment methods light */
[data-theme="light"] .pm-dropdown .pm-dd-trigger,
[data-theme="light"] .pm-dd-list,
[data-theme="light"] .pay-instructions {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="light"] .pm-dd-option:hover { background: rgba(124, 92, 191, .07); }

/* Input fields light */
[data-theme="light"] .input-field,
[data-theme="light"] .promo-input,
[data-theme="light"] .order-search-input {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
}

/* Order search light */
[data-theme="light"] .order-search-inner {
  background: var(--surface);
  border-color: rgba(124, 92, 191, .3);
}

/* Toast light */
[data-theme="light"] .toast {
  background: rgba(250, 248, 245, .97);
  border-color: var(--border);
  color: var(--text);
}
/* Transaction popup light */
[data-theme="light"] .trx-popup {
  background: rgba(250, 248, 245, .98);
  border-color: rgba(124, 92, 191, .25);
  box-shadow: 0 4px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(124,92,191,.12);
}
[data-theme="light"] .trx-popup-who { color: var(--text); }
[data-theme="light"] .trx-popup-msg { color: var(--text); }
/* ── LIGHT MODE: KOMPONEN TAMBAHAN ───────────────────────── */

/* Timer block — light mode */
[data-theme="light"] .timer {
  background: rgba(124, 92, 191, .08);
  border-color: rgba(124, 92, 191, .25);
}
[data-theme="light"] .tblock {
  background: linear-gradient(160deg, #e8e4de 0%, #f0ede8 50%, #e0dbd4 100%);
  border-color: rgba(124, 92, 191, .35);
  color: var(--primary-dark);
  text-shadow: none;
  box-shadow: 0 0 0 1px rgba(124,92,191,.1), 0 2px 6px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.8);
}
[data-theme="light"] .tsep {
  color: rgba(124, 92, 191, .6);
  text-shadow: none;
  animation: none;
}

/* Product info tabs — light mode */
[data-theme="light"] .pi-tabs {
  background: var(--surface2);
  border-color: var(--border);
}
[data-theme="light"] .pi-tab {
  color: var(--text3);
}
[data-theme="light"] .pi-tab:hover {
  background: rgba(124, 92, 191, .07);
  color: var(--text2);
}
[data-theme="light"] .pi-tab.active {
  color: #fff;
}

/* Game card image overlay — lebih subtle di light mode */
[data-theme="light"] .game-img-wrap::after {
  background: linear-gradient(
    to top,
    rgba(240,237,232,1)    0%,
    rgba(232,228,222,1)    20%,
    rgba(224,220,214,.96)  38%,
    rgba(216,212,206,.82)  55%,
    rgba(208,204,198,.45)  70%,
    rgba(200,196,190,.12)  85%,
    transparent            100%
  );
}
[data-theme="light"] .game-img-wrap::before {
  background: linear-gradient(to bottom, rgba(240,237,232,.3) 0%, transparent 100%);
}

/* Game name text — light mode perlu dark text */
[data-theme="light"] .game-name {
  color: #1a1625;
  text-shadow: 0 1px 4px rgba(240,237,232,.9), 0 2px 8px rgba(240,237,232,.7);
  -webkit-text-fill-color: #1a1625;
}
[data-theme="light"] .game-desc-p1 {
  text-shadow: none;
}

/* Game price row — light mode */
[data-theme="light"] .game-price-row {
  background: linear-gradient(
    80deg,
    rgba(240,237,232,.92) 0%,
    rgba(220,210,240,.88) 40%,
    rgba(240,237,232,.92) 100%
  );
  border-top-color: rgba(124,92,191,.3);
}
[data-theme="light"] .game-orig {
  color: rgba(61,53,80,.45);
}

/* Board title — light mode */
[data-theme="light"] .board-title { color: var(--text); }
[data-theme="light"] .board-item-title { color: var(--text); }
[data-theme="light"] .board-sub { color: var(--text3); }
[data-theme="light"] .media69-board-inner { background: rgba(250,248,245,.9); }

/* Desc spec card — light mode */
[data-theme="light"] .desc-spec-card {
  background: var(--surface);
}
[data-theme="light"] .desc-spec-row:nth-child(even) {
  background: rgba(124,92,191,.03);
}
[data-theme="light"] .desc-spec-row {
  border-bottom-color: rgba(124,92,191,.08);
}

/* Review header card — light mode */
[data-theme="light"] .review-header-card {
  background: linear-gradient(90deg, rgba(124,92,191,.08), rgba(14,165,201,.04));
}

/* Upload area — light mode */
[data-theme="light"] .upload-area {
  border-color: rgba(124,92,191,.3);
  background: rgba(124,92,191,.03);
}
[data-theme="light"] .upload-area:hover,
[data-theme="light"] .upload-area.has-file {
  border-color: rgba(124,92,191,.5);
  background: rgba(124,92,191,.07);
}
[data-theme="light"] .upload-text { color: var(--text2); }

/* Process page — light mode */
[data-theme="light"] .process-page { color: var(--text); }
[data-theme="light"] .order-id-box { background: rgba(124,92,191,.07); }
[data-theme="light"] .success-detail { background: rgba(124,92,191,.05); }

/* PWA Banner — light mode */
[data-theme="light"] #pwaBanner {
  background: rgba(250,248,245,.97);
  border-color: rgba(124,92,191,.3);
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(124,92,191,.1);
}

/* Empty state — light mode */
[data-theme="light"] .empty-title { color: var(--text2); }
[data-theme="light"] .empty-sub { color: var(--text3); }

/* Order filter buttons — light mode */
[data-theme="light"] .of-btn {
  background: rgba(124,92,191,.06);
  border-color: var(--border);
  color: var(--text3);
}

/* Flash card — light mode name color */
[data-theme="light"] .flash-name { color: var(--text); }
[data-theme="light"] .flash-price { color: var(--text); }

/* Secure ticker — light mode */
[data-theme="light"] .secure-ticker {
  background: rgba(124,92,191,.05);
  border-color: rgba(124,92,191,.12);
}

/* Tab back button — tetap solid, OK di light mode */
/* Buy button — tetap solid purple, OK */

/* Scrollbar — light mode */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--surface2); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(124,92,191,.25); }

/* Page background light */
[data-theme="light"] .page { background-color: rgba(240, 237, 232, .25); }

/* Swiper skeleton shimmer light */
[data-theme="light"] swiper-container,
[data-theme="light"] swiper-slide {
  background: var(--surface2);
}
[data-theme="light"] swiper-container[init="false"] {
  background-image: linear-gradient(
    90deg,
    var(--surface2) 25%,
    var(--surface3) 50%,
    var(--surface2) 75%
  );
}

/* ── THEME TOGGLE BUTTON ──────────────────────────────── */
.theme-toggle-btn {
  width: 33px;
  height: 33px;
  border-radius: 9px;
  background: rgba(144, 105, 233, .09);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform .2s;
  touch-action: manipulation;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  background: rgba(144, 105, 233, .18);
  border-color: var(--border-strong);
  color: var(--text);
}
.theme-toggle-btn:active { transform: scale(.93); }

/* Icon dark (moon) — tampil di dark mode */
.theme-toggle-btn .icon-dark,
.theme-toggle-btn .icon-light {
  position: absolute;
  width: 17px; height: 17px;
  transition: opacity .22s ease, transform .3s cubic-bezier(.34,1.4,.64,1);
}
.theme-toggle-btn .icon-dark {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.theme-toggle-btn .icon-light {
  opacity: 0;
  transform: rotate(-90deg) scale(.6);
}

/* Saat light mode aktif — swap icon */
[data-theme="light"] .theme-toggle-btn .icon-dark {
  opacity: 0;
  transform: rotate(90deg) scale(.6);
}
[data-theme="light"] .theme-toggle-btn .icon-light {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Light mode: warna icon toggle */
[data-theme="light"] .theme-toggle-btn {
  background: rgba(124, 92, 191, .08);
  border-color: rgba(124, 92, 191, .22);
  color: var(--primary);
}
[data-theme="light"] .theme-toggle-btn:hover {
  background: rgba(124, 92, 191, .16);
  border-color: var(--primary);
}
  
  /* ── HTML / BODY ──────────────────────────── */
  html {
    scroll-behavior: smooth;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  
  }
  
body {
  background-color: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
  line-height: 1.6;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
background-color: rgba(3, 3, 12, 0.93);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M18 2 L34 18 L18 34 L2 18 Z' fill='none' stroke='rgba(144,105,233,0.10)' stroke-width='1'/%3E%3Cpath d='M18 8 L28 18 L18 28 L8 18 Z' fill='none' stroke='rgba(0,249,255,0.08)' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='1.2' fill='rgba(0,249,255,0.18)'/%3E%3Ccircle cx='0' cy='0' r='1.2' fill='rgba(144,105,233,0.22)'/%3E%3Ccircle cx='36' cy='0' r='1.2' fill='rgba(144,105,233,0.22)'/%3E%3Ccircle cx='0' cy='36' r='1.2' fill='rgba(144,105,233,0.22)'/%3E%3Ccircle cx='36' cy='36' r='1.2' fill='rgba(144,105,233,0.22)'/%3E%3C/svg%3E");
background-size: 36px 36px;
  user-select: none;
  z-index: -1;
}
/* ── SCROLLBAR ────────────────────────────── */
  ::-webkit-scrollbar{width:3px;height:3px}
  ::-webkit-scrollbar-track{background:var(--bg)}
  ::-webkit-scrollbar-thumb{background:rgba(144,105,233,.18);border-radius:99px}
  ::-webkit-scrollbar-thumb:hover{background:var(--primary)}
  
  /* ── TYPOGRAPHY ───────────────────────────── */
  .back-title,.flash-cta,.flash-label,.flash-name,.sec-title,
  .tblock,h1,h2,h3{font-family:Oswald,sans-serif}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border-width:0}
  
  /* ── KEYFRAMES (minimal) ──────────────────── */
  @keyframes pgIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
  @keyframes pgBack{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
  @keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}
  @keyframes ddIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes checkoutPop{0%{transform:scale(.93);opacity:0}60%{transform:scale(1.02)}100%{transform:scale(1);opacity:1}}
  @keyframes tgPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.06)}}
  @keyframes waTooltipIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
  @keyframes floatUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  @keyframes dlOverlayIn{from{opacity:0}to{opacity:1}}
  @keyframes dlOverlayOut{from{opacity:1}to{opacity:0}}
  @keyframes dlModalIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.82) translateY(22px)}65%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  @keyframes dlModalOut{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.86) translateY(18px)}}
  @keyframes dlBtnPulse{0%,100%{opacity:1}50%{opacity:.82}}
  @keyframes flash{0%,100%{opacity:1}50%{opacity:.35}}
  @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  
  /* ── PAGE SYSTEM ──────────────────────────── */

.page{
    display:none;min-height:100svh;
    animation:.25s cubic-bezier(.4,0,.2,1) pgIn;
    position:relative;z-index:1;
    background-color:rgba(9,9,15,.69);
    /* Desktop: center konten, beri garis pembatas */
    box-shadow: 0 0 0 1px rgba(144,105,233,.06);
  }
  .page.active{display:block}
  .page.back{animation:.25s cubic-bezier(.4,0,.2,1) pgBack}
  .tab-content{display:none}
  .tab-content.active{display:block}
  .pi-content{display:none;padding-top:14px}
  .pi-content.active{display:block}
  
  /* ── HEADER ───────────────────────────────── */
  .header{
    position:sticky;top:0;z-index:200;
    background:rgba(6,6,15,.96);
    border-bottom:1px solid var(--border);
    /* will-change dihapus — header selalu statis saat tidak di-scroll */
    /* transform: translateZ(0) tidak diperlukan untuk sticky positioning */
  }
  .header::after{
    content:'';position:absolute;bottom:-1px;left:0;width:100%;height:1px;
    background:linear-gradient(90deg,transparent,var(--primary) 40%,var(--primary) 60%,transparent);
    opacity:.3;
  }
  .header-inner{max-width:639px;margin:0 auto;padding:0 12px}
  .header-row{display:flex;align-items:center;justify-content:space-between;height:51px;gap:6px}
  
  /* ── LOGO ─────────────────────────────────── */
  .logo{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none}
.logo-img-wrap{
    width:39px;height:39px;border-radius:12px;overflow:hidden;flex-shrink:0;
    border:1.5px solid rgba(144,105,233,.21);
  }
  .logo-img-wrap img,.flash-img-wrap img,.product-hero img,.slide-deco img{width:100%;height:100%;object-fit:cover}
  .logo-text{display:flex;flex-direction:column;line-height:1}
  .logo-name{
    font-size:15px;font-weight:700;letter-spacing:.2px;
    background:var(--rg);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .logo-sub{font-size:5.5px;font-weight:600;color:var(--text3);letter-spacing:.8px;margin-top:5px;text-transform:uppercase;white-space:nowrap}
.header-actions{display:flex;gap:3px;flex-shrink:0}
.logo-text--orders { flex: 1; }
.logo-name--orders { font-size: 16px; }
  
  /* ── ICON BUTTONS ─────────────────────────── */
  .icon-btn{
    width:33px;height:33px;border-radius:9px;
    background:rgba(144,105,233,.09);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    transition:background var(--t),border-color var(--t);
    color:var(--text2);position:relative;touch-action:manipulation;
  }
  .icon-btn:hover{background:rgba(144,105,233,.18);border-color:var(--border-strong);color:var(--text)}
  .icon-btn svg,.back-btn svg,.pm-dd-arrow svg{width:17px;height:17px}
  .cs-dot{position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--green);border:1.5px solid var(--bg)}
  /* ── BACK HEADER ──────────────────────────── */
  .back-header{
    display:flex;align-items:center;gap:12px;height:54px;
    max-width:640px;margin:0 auto;padding:0 14px;
    position:sticky;top:0;z-index:200;
    background:rgba(6,6,15,.96);
    border-bottom:1px solid var(--border);
    
  }
  .back-header::after{
    content:'';position:absolute;bottom:-1px;left:0;width:100%;height:1px;
    background:linear-gradient(90deg,transparent,var(--primary) 40%,var(--primary) 60%,transparent);
    opacity:.25;
  }
  .back-btn{
    width:36px;height:36px;border-radius:10px;
    background:rgba(144,105,233,.07);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    color:var(--text);flex-shrink:0;transition:background var(--t),border-color var(--t);touch-action:manipulation;
  }
  .back-btn:hover{background:rgba(144,105,233,.16);border-color:var(--border-strong)}
  .back-title{
    font-size:14.5px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    background:var(--rg);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .header-action-right{margin-left:auto;display:flex;gap:6px}
  
  /* ── MAIN ─────────────────────────────────── */
  
.main{max-width:640px;margin:0 auto;padding:15px 12px 96px;}
  
  /* ── BANNER SWIPER ────────────────────────── */
.banner-wrap { margin-bottom:12px; }
swiper-container {
  width:100%;
  display:block;
  /* Reserve exact space sebelum Swiper init — cegah CLS */
  aspect-ratio:640/207;
  border-radius:18px;
  overflow:hidden;
  background:var(--surface2,#111121);
  margin-bottom:12px;
}
swiper-slide {
  border:1px solid rgba(124,92,191,.18);
  border-radius:18px;
  overflow:hidden;
  background:var(--surface2,#111121);
}
swiper-slide img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:640/207;
  object-fit:cover;
  object-position:center center;
  border-radius:18px;
}
swiper-container[init="false"] {
  background-image: linear-gradient(
    90deg,
    var(--surface2) 25%,
    var(--surface3) 50%,
    var(--surface2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
}
  
  .swiper {
    border-radius: var(--r-lg);
    overflow: hidden;
     margin-bottom: 3px;
  }
   /* ── SEARCH & FILTER ──────────────────────── */
  .search-wrap{margin-bottom:15px}
  .search-row{display:flex;align-items:center;gap:8px}
  .search-container{position:relative;flex:1}
  .search-input{
    width:100%;padding:10px 38px 10px 14px;border-radius:99px;
    font-size:12px;color:var(--text);
    border:1px solid rgba(144,105,233,.28); background: var(--surface);
    transition: box-shadow .2s, border-color .2s;
  }
  .search-input::placeholder{color:var(--text3)}


.search-input:focus{
    border-color: var(--primary-light);
    outline: none;
    box-shadow: 0 0 0 3px rgba(144,105,233,.12);
}
  .search-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text3);pointer-events:none}
  .search-clear{
    position:absolute;right:34px;top:50%;transform:translateY(-50%);
    width:19px;height:19px;border-radius:50%;background:rgba(120,120,160,.22);
    display:flex;align-items:center;justify-content:center;
    transition:background var(--t-fast);border:none;padding:0;cursor:pointer;
  }
  .search-clear[hidden]{display:none}
  .search-clear:hover{background:rgba(255,68,68,.22);color:var(--red)}
  .search-clear svg{width:11px;height:11px;color:var(--text3)}
  .search-results{
    position:absolute;top:calc(100% + 6px);left:0;right:0;
    background:var(--surface2);border:1px solid var(--border);
    border-radius:var(--r);z-index:300;display:none;overflow-y:auto;max-height:265px;
  }
  .search-results.show{display:block;animation:.18s ddIn}
  .search-item{
    display:flex;align-items:center;gap:10px;padding:9px 12px;
    transition:background var(--t-fast);cursor:pointer;touch-action:manipulation;
  }
  .search-item:hover{background:rgba(144,105,233,.08)}
  .search-item img{width:36px;height:36px;border-radius:8px;object-fit:cover;border:1px solid var(--border);flex-shrink:0}
  .si-name{font-size:12px;font-weight:700;color:var(--text)}
  .si-cat{font-size:10px;color:var(--text3);margin-top:1px}
  
  /* Filter */
  .filter-dd-wrap{position:relative}
.filter-btn{
    flex-shrink:0;height:39px;padding:0 12px 0 10px;border-radius:99px;
    border:1px solid rgba(144,105,233,.28);
    background: var(--surface);
    display:flex;align-items:center;gap:5px;
    color:var(--text);cursor:pointer;touch-action:manipulation;
    transition: box-shadow .2s, border-color .2s;position:relative;
  }
  .filter-btn:hover,.filter-btn.active{
    border-color: var(--cyan);
    box-shadow: 0 0 12px rgba(0,249,255,.09), 0 0 20px rgba(144,105,233,.1);
  }
  .filter-btn-icon{font-size:12px;line-height:1}
  .filter-btn-label{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap}
  .filter-chevron{width:12px;height:12px;color:var(--text3);transition:transform var(--t);flex-shrink:0}
  .filter-btn[aria-expanded=true] .filter-chevron{transform:rotate(180deg)}
  .filter-dot{display:none;position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--cyan);border:1.5px solid var(--bg)}
  .filter-btn.filtered .filter-dot{display:block}
  .filter-dropdown{
    display:none;position:absolute;top:calc(100% + 8px);right:0;width:205px;
    background:var(--surface2);border:1px solid var(--border);
    border-radius:var(--r-lg);z-index:400;overflow:hidden;
  }
  .filter-dropdown.show{display:block;animation:.18s ddIn}
  .filter-dd-header{
    padding:9px 12px 7px;font-size:9px;font-weight:700;color:var(--text3);
    letter-spacing:.9px;text-transform:uppercase;
    border-bottom:1px solid rgba(144,105,233,.08);text-align:center;
  }
  .filter-dd-item{
    display:flex;align-items:center;gap:9px;padding:9px 12px;
    cursor:pointer;touch-action:manipulation;
    transition:background var(--t-fast);font-size:12px;font-weight:600;
    color:var(--text2);border-bottom:1px solid rgba(144,105,233,.06);
  }
  .filter-dd-item:last-child{border-bottom:none}
  .filter-dd-item:hover{background:rgba(144,105,233,.08);color:var(--text)}
  .filter-dd-item.active{color:var(--cyan);background:rgba(0,249,255,.04)}
  .filter-dd-item.active::after{content:'\2714';margin-left:auto;font-size:12px;font-weight:800}
  .filter-dd-icon{font-size:14px;width:20px;flex-shrink:0;text-align:center}
  
  /* ── SECTION HEADERS ——— REDESIGNED ─────── */
  .sec-hdr{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:10px;padding-bottom:10px;
    border-bottom:1px solid var(--border);
    position:relative;
  }
  /* Accent line under section title */
  .sec-title { display:flex; align-items:center; gap:7px; font-size:14px; font-weight:700; font-family:'Oswald',sans-serif; letter-spacing:.3px; }
  .sec-icon{
    width:26px;height:26px;border-radius:7px;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;flex-shrink:0;
  }
  .ic-purple{background:rgba(144,105,233,.14)}
  .ic-green{background:rgba(0,212,170,.1)}
  .ic-pink{background:rgba(255,0,110,.1)}
  .ic-orange{background:rgba(255,145,0,.1)}
  .ic-blue{background:rgba(59,127,246,.1)}
  .see-all {
    font-size:12px; font-weight:600; color:var(--cyan);
    cursor:pointer; display:flex; align-items:center; gap:3px;
    white-space:nowrap; transition:opacity var(--t); font-family:'Oswald',sans-serif;
  }
  .see-all:hover { opacity:.7; }
  .see-all svg { width:12px; height:12px; flex-shrink:0; color:var(--cyan); }
  
  /* ── GAME GRID ─────────────────────────────── */
  .game-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-bottom: 15px;
  }
  
  /* ── GAME CARD WRAPPER (rainbow border) ──── */
.game-card-wrap {
  position: relative;
  border-radius: 12px;
  padding: 1px;
  background: conic-gradient(
    from 0deg,
    rgba(144,92,201,.55), rgba(0,249,255,.39), rgba(218,105,211,.45), rgba(255,45,120,.39), rgba(144,92,233,.55)
  );
  transition: opacity .2s;
  animation: fadeUp .3s ease both;
  contain: layout style;
}
  .game-card-wrap:active { opacity: .8; }
  
  /* ── GAME CARD (inner) ──────────────────── */
  .game-card {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface2);
    cursor: pointer;
    display: block;
    transition: transform .2s cubic-bezier(.34,1.4,.64,1);
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 10px rgba(0,0,0,.6);
    width: 100%;
    height: 100%;
  }
  
  .game-card::before { content: none; }
  
  .game-card-wrap:hover .game-card {
    transform: translateY(-3px) scale(1.02);
  }
  
  .game-card-wrap:active .game-card {
    transform: scale(.96);
  }
  
  /* Shine sweep */
  .game-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
      125deg, transparent 35%,
      rgba(255,255,255,.07) 50%,
      transparent 65%
    );
    background-size: 200% 200%;
    background-position: 200% 0;
    transition: background-position .5s ease;
    pointer-events: none;
    z-index: 2;
    border-radius: 10px;
  }
  .game-card-wrap:hover .game-card::after { background-position: -200% 0; }
  
  /* ── IMAGE WRAPPER ─────────────────────────── */
  .game-img-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--surface2);
    z-index: 1;
    border-radius: 10px;           /* sama dengan card karena overflow:hidden */
  }
  
  /* ★ FIX 1: object-fit contain + center agar gambar tidak terpotong */
  .game-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    margin: 0;
    transition: transform .42s cubic-bezier(.25,.46,.45,.93);
    display: block;
  
  }
  
  /* Bottom gradient overlay */
  .game-img-wrap::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 75%;
    background: linear-gradient(
      to top,
      rgba(4,2,12,1)     0%,
      rgba(6,3,15,1)     20%,
      rgba(8,4,18,.96)   38%,
      rgba(10,5,20,.82)  55%,
      rgba(11,6,22,.45)  70%,
      rgba(12,7,24,.12)  85%,
      transparent        100%
    );
    pointer-events: none;
    z-index: 2;
  }
  
  /* Top vignette */
  .game-img-wrap::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 25%;
    background: linear-gradient(to bottom, rgba(4,2,12,.45) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
  }
  

  .game-img-wrap.loading {
    background: linear-gradient(
      90deg, var(--surface2) 25%, rgba(144,105,233,.07) 50%, var(--surface2) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease infinite;
  }
  .game-img-wrap.loading img { opacity: 0; }
  
  /* ── BADGES — Diamond+Ribbon style (BukaOlshop) ──────── */
.card-badge {
  position: absolute;
  left: 3px;
  bottom: 30px;
  z-index: 20;
    height: 11px;
    width: auto; max-width: 85%;
    display: inline-flex; align-items: center;
    pointer-events: none; overflow: visible;
  }
  .badge-diamond {
    position: relative;
    width: 12px; height: 12px;
    border-radius: 3px;
    transform: rotate(45deg);
    flex-shrink: 0;
    z-index: 25;
    box-shadow: 1px 0 4px rgba(0,0,0,.5);
    margin-right: -3px;
    margin-left: 2px;
    display: flex; align-items: center; justify-content: center;
  }
  .badge-diamond::after {
    content: '';
    position: absolute; inset: 2px;
    border-radius: 1px;
    border: 1px solid rgba(255,255,255,.5);
    pointer-events: none;
  }
  .card-badge .badge-diamond { font-size: 0; }
  .card-badge .badge-diamond::before {
    content: attr(data-icon);
    font-size: 6px; line-height: 1;
    transform: rotate(-45deg);
    display: block; position: relative; z-index: 1;
  }
  .badge-body {
    height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 5px; font-weight: 900;
    letter-spacing: .5px; text-transform: uppercase;
    color: #fff; white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    position: relative; z-index: 2;
    min-width: 39px; max-width: 60px;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 0 100%);
    padding: 0 8px 0 5px;
  }
  .badge-body::before {
    content: ''; position: absolute;
    left: 0; top: 0; bottom: 0; width: 9px;
    clip-path: polygon(0 0, 55% 0, 100% 100%, 45% 100%);
    pointer-events: none; z-index: 1;
  }
  .badge-body::after {
    content: ''; position: absolute;
    left: 6px; top: 0; bottom: 0; width: 6px;
    clip-path: polygon(0 0, 55% 0, 100% 100%, 45% 100%);
    pointer-events: none; z-index: 1; opacity: .5;
  }
  /* Recomend — ungu */
  .card-badge.b-recomend .badge-diamond { background: linear-gradient(135deg, #7c5cbf, #c026d3); }
  .card-badge.b-recomend .badge-body    { background: linear-gradient(90deg, #4a18a0, #7c5cbf 40%, #c026d3 100%); }
  .card-badge.b-recomend .badge-body::before,
  .card-badge.b-recomend .badge-body::after { background: rgba(255,255,255,.3); }
  /* New — magenta */
  .card-badge.b-new .badge-diamond { background: #ff00cc; }
  .card-badge.b-new .badge-body    { background: linear-gradient(90deg, #99006e, #ff00cc 50%, #dd00aa); }
  .card-badge.b-new .badge-body::before,
  .card-badge.b-new .badge-body::after { background: rgba(255,255,255,.3); }
  /* Populer — pink */
  .card-badge.b-populer .badge-diamond { background: #ff2d78; }
  .card-badge.b-populer .badge-body    { background: linear-gradient(90deg, #99002e, #ff2d78 50%, #e0205a); }
  .card-badge.b-populer .badge-body::before,
  .card-badge.b-populer .badge-body::after { background: rgba(255,255,255,.3); }
  
  /* Backward compat — strip lama jadi hidden */
  .badge-recomend, .badge-new, .badge-populer { display: none !important; }
  
  /* ── SHARE BADGE ─────────────────────────────────────────── */
.card-share-badge {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(0,0,0,.39);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 99px;
  padding: 3px 7px 3px 5px;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  pointer-events: all;
  cursor: pointer;
  line-height: 1;
  transition: background .2s, border-color .2s, color .2s;
}
  .card-share-badge:hover {
    background: rgba(0,249,255,.18);
    border-color: rgba(0,249,255,.7);
  }
  .card-share-badge svg {
    width: 9px;
    height: 9px;
    stroke: rgba(255,255,255,.6);
    filter: none;
    flex-shrink: 0;
  }
  
  /* ── GAME NAME ─────────────────────────────── */
.game-name {
    font-family: Oswald, sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #fff;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-shadow: 0 1px 6px rgba(0,0,0,.95), 0 2px 12px rgba(0,0,0,.7);
    margin-bottom: 3px;
    background: none;
    -webkit-text-fill-color: #fff;
  }
  
  /* ★ FIX 2: Short desc 2 baris */
.game-desc-block { margin-bottom: 9px; }
  
.game-desc-p1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 6px;
    font-weight: 600;
    color: var(--primary-light);
    text-transform: uppercase;
    letter-spacing: .25px;
    opacity: .7;
    line-height: 1.2;
    text-shadow: none;
    white-space: normal;
    word-break: break-word;
  }
  
.game-card-info {
    position: absolute;
    bottom: 39px;
    left: 0; right: 0;
    z-index: 5;
    padding: 0 5px 2px;
    pointer-events: none;
}
  
  
.game-price-row {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 7;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 5px;
    background: linear-gradient(
      80deg,
      rgba(0,0,0,.85) 0%,
      rgba(30,8,80,.85) 40%,
      rgba(0,0,0,.85) 100%
    );
    border-top: 1px solid rgba(124,92,191,.6);
    /* backdrop-filter dihapus — dipakai di 6-20+ card sekaligus, sangat mahal */
    /* Kompensasi: opacity background dinaikkan dari .72 → .85 */
  }
.game-price {
    font-size: 8px;
    font-weight: 800;
    font-family: Oswald, sans-serif;
    color: #fff;
    background: linear-gradient(180deg, rgba(127,85,220,.9), rgba(0,200,220,.9));
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.5;
    -webkit-text-fill-color: #fff;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    border: 1px solid rgba(255,255,255,.14);
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .game-orig {
    font-weight: 500;
    font-size: 6.6px;
    color: rgba(255,255,255,.39);
    text-decoration: line-through;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  /* ── TAB BACK BUTTON ───────────────────────── */
  .tab-back-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; width: 100%; margin: 18px 0 8px; padding: 12px 20px;
    font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #fff;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
    border: none; cursor: pointer; touch-action: manipulation;
    font-family: Oswald, sans-serif; transition: opacity .2s, transform .15s;
  }
  .tab-back-btn:hover  { opacity: .88; transform: translateY(-1px); }
  .tab-back-btn:active { transform: scale(.98); opacity: .75; }
  .tab-back-btn svg    { width: 15px; height: 15px; flex-shrink: 0; }

/* ── ABOUT BOARD ──────────────────────────── */
.media69-board {
  position: relative;
  width: 100%;
  margin: 0 0 14px;
  border-radius: 22px;
  z-index: 1;
  overflow: visible;
  isolation: isolate;
  border: 2px solid rgba(0,249,255,.60);
  background: linear-gradient(
    180deg,
    #060f0f 0%,
    #04090c 50%,
    #060f0f 100%
  );
  box-shadow:
    0 0 0 3px #04090c,
    0 0 0 5px rgba(0,180,160,.22),
    0 0 18px rgba(0,249,255,.10),
    0 8px 22px rgba(0,0,0,.40);
}


/* ── INNER FRAME ──────────────────────────── */
.media69-board::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 16px;
  border: 1px solid rgba(0,249,255,.28);
  pointer-events: none;
  z-index: 0;
  box-shadow: inset 0 0 0 1px rgba(0,249,255,.06);
}


/* ── INNER BOARD ──────────────────────────── */
.media69-board-inner {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(
    180deg,
    rgba(9,7,17,.981),
    rgba(7,6,14,.996)
  );
  border-radius: 19px;
  padding: 2px 10px 8px;
  overflow: hidden;
  z-index: 1;
}

/* ── CORNER PINS ──────────────────────────── */
.board-corner-dot {
  position:absolute;

  width:8px;
  height:8px;

  border-radius:50%;

  background:#67e8f9;

  border:1px solid rgba(255,255,255,.16);

  box-shadow:
    0 0 5px rgba(103,232,249,.78),
    0 0 10px rgba(103,232,249,.22);

  z-index:20;

  pointer-events:none;
}

.board-corner-dot.tl {
  top:10px;
  left:10px;
}

.board-corner-dot.tr {
  top:10px;
  right:10px;
}

.board-corner-dot.bl {
  bottom:10px;
  left:10px;
}

.board-corner-dot.br {
  bottom:10px;
  right:10px;
}


/* ── PARTNERSHIP HEADER ───────────────────── */
.board-partner-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  line-height: 1;
}


/* ── HEADER IMAGE ─────────────────────────── */
.board-partner-header-image {
  display:block;

  width:66%;

  max-width:285px;

  height:auto;

  margin:0 auto;

  object-fit:contain;
}



/* ── HEADER DIVIDER — pseudo dimatikan, pakai div.board-header-divider ── */
.board-partner-header::after {
  content: none;
}

.board-header-divider {
  width: 82%;
  max-width: 340px;
  height: 1px;
  margin: 2px auto 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(144,105,233,.25) 12%,
    rgba(144,105,233,.69) 32%,
    rgba(103,232,249,.72) 50%,
    rgba(144,105,233,.69) 69%,
    rgba(144,105,233,.25) 88%,
    transparent 100%
  );
}

/* standalone divider element — <div class="board-header-divider"> */
.board-header-divider {
  width: 79%;
  max-width: 340px;
  height: 1px;
  margin: 0 auto 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(144,105,233,.25) 12%,
    rgba(144,105,233,.68) 32%,
    rgba(103,232,249,.72) 50%,
    rgba(144,105,233,.68) 68%,
    rgba(144,105,233,.25) 88%,
    transparent 100%
  );
}


/* ── MAIN PARTNERSHIP IMAGE ──────────────── */
.board-main-image {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 5px;

  border-radius:14px;

  overflow:hidden;

  border:1px solid rgba(144,105,233,.42);

  background:#08060f;

  box-shadow:
    0 0 0 1px rgba(103,232,249,.025),
    0 4px 12px rgba(0,0,0,.26);
}


/* ── MAIN IMAGE ───────────────────────────── */
.board-main-image img {
  width:100%;

  height:100%;

  display:block;

  object-fit:cover;
}


/* ── MAIN IMAGE INNER HIGHLIGHT ───────────── */
.board-main-image::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04);
}


/* ── CONTENT DIVIDER ──────────────────────── */
.board-logo-divider {
  width:100%;

  height:1px;

  margin:0 0 5px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(144,105,233,.22) 10%,
      rgba(144,105,233,.65) 30%,
      rgba(103,232,249,.72) 50%,
      rgba(144,105,233,.65) 70%,
      rgba(144,105,233,.22) 90%,
      transparent 100%
    );
}


/* ── GIF BANNER ───────────────────────────── */
.board-gif-banner {
  position:relative;

  width:100%;

  margin:0 0 6px;

  border-radius:9px;

  overflow:hidden;

  border:1px solid rgba(124,93,191,.39);

  background:#0a0812;

  box-shadow:
    0 2px 7px rgba(0,0,0,.20);
}


/* ── GIF IMAGE ───────────────────────────── */
.board-gif-banner img {
  display:block;

  width:100%;

  height:auto;
}


/* ── CTA ──────────────────────────────────── */
.board-cta-btn {
  display:flex;

  align-items:center;

  justify-content:center;

  width:100%;

  min-height:47px;

  padding:10px 15px;

  margin:0;

  box-sizing:border-box;

  border-radius:11px;

  background:
    linear-gradient(
      180deg,
      #3b2865 0%,
      #2b1c4a 50%,
      #180f2b 100%
    );

  color:#f7f4ff;

  font-size:15px;

  font-weight:800;

  letter-spacing:.55px;

  font-family:'Oswald',sans-serif;

  text-transform:uppercase;

  cursor:pointer;

  border:1px solid rgba(160,125,245,.64);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.38),
    0 4px 10px rgba(0,0,0,.28);

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;

  position:relative;

  top:0;
}


/* ── CTA HOVER ────────────────────────────── */
.board-cta-btn:hover {
  transform:translateY(-1px);

  background:
    linear-gradient(
      180deg,
      #452f73 0%,
      #332151 50%,
      #1c1231 100%
    );

  border-color:rgba(180,150,255,.82);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 5px 12px rgba(0,0,0,.34);
}


/* ── CTA ACTIVE ───────────────────────────── */
.board-cta-btn:active {
  transform:translateY(1px);

  top:1px;

  background:
    linear-gradient(
      180deg,
      #2b1c4a 0%,
      #180f2b 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(0,0,0,.34),
    0 2px 5px rgba(0,0,0,.26);
}


/* ── BOARD TITLE ──────────────────────────── */
.board-title-box {
  text-align:center;

  padding:6px 12px;

  border:1px dashed rgba(150,150,255,.6);

  border-radius:9px;

  margin-bottom:11px;

  background:rgba(255,255,255,.03);
}


/* ── MOBILE REFINEMENT ────────────────────── */
@media (max-width:480px) {

  /* ── Main Board ── */
  .media69-board {
    width:100%;

    border-radius:19px;

    margin-bottom:12px;

    border-width:1.5px;

    box-shadow:
      0 0 0 3px #08060f,
      0 0 0 5px rgba(124,92,191,.27),
      0 0 14px rgba(144,105,233,.10),
      0 7px 18px rgba(0,0,0,.39);
  }


  /* ── Inner Frame ── */
  .media69-board::before {
    inset:6px;

    border-radius:14px;
  }


/* ── Inner Board ── */
  .media69-board-inner {
    width: 100%;
    padding: 3px 9px 9px;
    border-radius: 16px;
  }


  /* ── Corner Pins ── */
  .board-corner-dot {
    width:7px;

    height:7px;

    box-shadow:
      0 0 4px rgba(103,232,249,.78),
      0 0 9px rgba(103,232,249,.20);
  }


  .board-corner-dot.tl {
    top:9px;
    left:9px;
  }

  .board-corner-dot.tr {
    top:9px;
    right:9px;
  }

  .board-corner-dot.bl {
    bottom:9px;
    left:9px;
  }

  .board-corner-dot.br {
    bottom:9px;
    right:9px;
  }


  /* ── Partnership Header ── */
  .board-partner-header {
    width:100%;

    padding:0;

    margin:0;
  }


  .board-partner-header-image {
    width:68%;

    max-width:260px;

    height:auto;

    margin:0 auto;
  }


/* ── Header Divider ── */
  .board-partner-header::after {
    content: none;
  }


  /* ── Main Image ── */
  .board-main-image {
    width:100%;

    max-width:none;

    margin:0 auto 7px;

    border-radius:11px;

    box-shadow:
      0 0 0 1px rgba(103,232,249,.02),
      0 3px 10px rgba(0,0,0,.24);
  }


  .board-main-image::after {
    border-radius:11px;
  }


  /* ── Content Divider ── */
  .board-logo-divider {
    width:100%;

    height:1px;

    margin:0 0 6px;
  }


  /* ── GIF ── */
  .board-gif-banner {
    width:100%;

    margin:0 0 7px;

    border-radius:9px;

    box-shadow:
      0 2px 6px rgba(0,0,0,.18);
  }


  /* ── CTA ── */
  .board-cta-btn {
    width:100%;

    min-height:46px;

    padding:10px 12px;

    border-radius:11px;

    font-size:14px;

    letter-spacing:.45px;
  }
}


/* ── PROTECTION ───────────────────────────── */
.secure-section {
    background: rgba(8,7,22,.96);
    border: 1px solid rgba(144,105,233,.3);
    border-radius: var(--r-lg);
    padding: 14px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}
/* Top accent line di secure section — konsisten dengan .header dan .media69-board */
.secure-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--primary), #00d4aa);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
  .secure-header  { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
  .secure-header img { width:28px; flex-shrink:0; filter:drop-shadow(0 0 5px rgba(0,249,255,.4)); }
  .secure-title-wrap { flex:1; }
  .secure-title { font-size:11px; font-weight:700; color:var(--cyan); font-family:'Oswald',sans-serif; }
  .secure-badge { display:flex; align-items:center; border-radius:8px; gap:0; overflow:hidden; border:1px solid rgba(144,105,233,.3); flex-shrink:0; }.secure-sub   { font-size:10px; color:var(--primary-light); }
  
.secure-badge-status {
    background: linear-gradient(180deg, rgba(127,85,220,.9), rgba(0,200,220,.6));
    display:flex; align-items:center; gap:3px;
    padding:4px 8px; font-size:12px; font-weight:700; color:#fff; font-family:'Oswald',sans-serif;
  }
  .secure-badge-status img { width:14px; filter:invert(1); }
  .secure-badge-label { padding:4px 8px; font-size:12px; font-weight:700; color:var(--primary-light); }
  
.secure-ticker {
  border-radius: 10px;
  background: rgba(144,105,233,.09);
  border: 1px solid rgba(144,105,233,.21);
  overflow: hidden;
}
.secure-ticker-inner { display: flex; flex-direction: column; }

/* Stats bar */
.tx-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 8px;
  gap: 3px;
  animation: fadeUp .3s ease both;
}
.tx-stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
.tx-stat-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.tx-stat-body {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.tx-stat-num {
  font-size: 12px;
  font-weight: 800;
  color: var(--cyan);
  font-family: Oswald, sans-serif;
  letter-spacing: .3px;
}
.tx-stat-unit {
  font-size: 9px;
  font-weight: 600;
  color: var(--text3);
}
.tx-stat-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-top: 2px;
  white-space: nowrap;
}
.tx-stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(144,105,233,.3);
  flex-shrink: 0;
}
[data-theme="light"] .tx-stat-divider { background: rgba(124,92,191,.2); }
[data-theme="light"] .tx-stat-num { color: var(--cyan); }
[data-theme="light"] .tx-stat-icon { filter: none; }
  
  /* ── CHECKOUT ACTIVITY ────────────────────── */
  .checkout-anim-text{display:flex;align-items:center;gap:6px;animation:.69s cubic-bezier(.175,.885,.32,1.275) both checkoutPop}
  .checkout-avatar{width:18px;height:18px;border-radius:50%;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
  .checkout-msg{font-size:9.0px;color:var(--text2);flex:1;line-height:1.2}
  .checkout-msg strong{color:var(--cyan)}
  .checkout-time{font-size:8.8px;color:var(--text3);flex-shrink:0;white-space:nowrap}
  
  /* ── FOOTER ───────────────────────────────── */
.footer{border-top:1px solid rgba(144,105,233,.3);background:rgba(8,7,22,.95);padding:12px 14px 15px;margin-top:10px;}
  .footer__content{max-width:720px;margin:0 auto;text-align:center}
.contact-section{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:9px}
  .contact-label{font-size:9px;font-weight:800;color:var(--text2);text-transform:uppercase;letter-spacing:.8px;white-space:nowrap;flex-shrink:0;font-family:Oswald,sans-serif;}
  .contact-row{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:3px;overflow-x:auto;width:100%;scrollbar-width:none;padding-bottom:2px}
  .contact-row::-webkit-scrollbar{display:none}
.contact-item{
    display:flex;align-items:center;gap:4px;background:rgba(144,105,233,.06);
    border:1px solid rgba(144,105,233,.18);padding:4px 10px;border-radius:50px;
    color:var(--primary-light);font-size:9px;transition:var(--t);font-weight:600;
    white-space:nowrap;flex-shrink:0;
  }
  .contact-item:hover{background:rgba(255,45,120,.1);transform:translateY(-1px);border-color:var(--pink)}
  .contact-item img{width:12px;height:12px;object-fit:contain}
  .footer__text{font-size:9px;color:var(--text3)}
  .footer__text strong{color:var(--text2)}
  
  /* ── GLOBAL NAV — REDESIGNED ─────────────── */
#globalNav{
  position:fixed;
  bottom:8px;
  left:8px;
  right:8px;
  z-index:300;
  background:rgba(12,10,24,.96);
  display:flex;
  max-width:620px;
  margin:0 auto;
  padding:3px 3px max(env(safe-area-inset-bottom,3px),3px);
  border:1px solid rgba(144,105,233,.16);
  border-radius:99px;
  box-shadow:0 4px 16px rgba(0,0,0,.45);
  overflow:visible;
}
/* Catatan: .pay-page dan .orders-page padding lengkap ada di blok PAYMENT di bawah */
/* Baris ini sengaja dikosongkan — nilai dipindah ke definisi utama */
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:4px 0 5px;gap:2px;
  color:var(--text3);font-size:8px;
  transition:color var(--t),opacity var(--t);
  user-select:none;
  font-family:Oswald,sans-serif;
  font-weight:600;
  letter-spacing:.3px;
  cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;position:relative;
  min-height:42px;
}
.nav-item:hover:not(.active):not(.nav-item-video69){
  color:var(--primary-light);
}
button.nav-item{
  background:none;
  border:none;
  color:inherit;
  font-family:Oswald,sans-serif;
  font-weight:600;
  font-size:9px;
  letter-spacing:.3px;
}
button.nav-item:focus-visible{
  outline:1.8px solid var(--cyan);
  outline-offset:-2px;
  border-radius:6px;
}
a.nav-item{text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}
.nav-item.active{color:var(--primary-light)}
.nav-item.active::before{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:20px;height:2px;border-radius:0 0 3px 3px;
  background:var(--primary-light);
}
.nav-icon{width:18px;height:18px;position:relative}
.nav-item-video69 {
  position: relative;
  flex: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  color: #fff;
  font-weight: 700;
}

.nav-item-video69 .nav-icon {
  width: 42px;
  height: 42px;
  margin-top: -18px;
  margin-bottom: 2px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #1a0a2a, #7c5cbf 55%, #0d0d1e);
  border: 2px solid rgba(144,105,233,.39);
  box-shadow: 0 0 0 3px rgba(9,9,15,.96), 0 3px 9px rgba(144,105,233,.18);
  transition: transform .15s ease, box-shadow .2s ease;
}
.nav-item-video69 .nav-icon svg { width: 22px; height: 22px; color: #fff; }
.nav-item-video69:active .nav-icon { transform: scale(.93); }
.nav-item-video69.active { color: var(--primary-light); }
.nav-item-video69.active::before { display: none; }
/* Label di bawah FAB — lebih visible */
.nav-item-video69 { font-size: 7.5px; }

a#nav-shortvideo { text-decoration: none; }
.nav-icon--badge { position: relative; }
  /* ── PRODUCT DETAIL ───────────────────────── */
  .product-hero{width:100%;aspect-ratio:16/9;background:var(--surface);overflow:hidden;position:relative}
  .product-hero img{width:100%;height:100%;object-fit:cover}
  .product-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.07) 0%,var(--bg) 100%)}
  .product-hero-content{position:absolute;bottom:0;left:0;right:0;max-width:640px;margin:0 auto;padding:0 16px 20px}
  .product-cat{
    display:inline-flex;align-items:center;gap:4px;
    background:rgba(144,105,233,.18);border:1px solid var(--border);border-radius:99px;
    padding:3px 10px;font-size:10px;color:var(--cyan);font-weight:600;letter-spacing:.3px;margin-bottom:6px;
  }
  .product-title-lg{
    font-size:22px;font-weight:700;line-height:1.2;margin-bottom:5px;letter-spacing:.3px;
    background:linear-gradient(90deg,var(--text),var(--cyan));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    font-family:Oswald,sans-serif;
    position:relative;
    padding-bottom:10px;
  }
  
  .product-title-lg::after{
    content:'';
    position:absolute;
    bottom:0;left:0;
    width:100%;height:1px;
    background:linear-gradient(90deg,transparent,var(--primary) 30%,var(--cyan) 70%,transparent);
    opacity:.5;
  }
  
  
.sec-hdr::after{
    content:'';position:absolute;bottom:-1px;left:0;
    width:100%;height:1px;
    background:linear-gradient(90deg,transparent,var(--primary) 30%,var(--primary) 70%,transparent);
    opacity:.28;
  }
  .product-meta{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--text2)}
  
.detail-body{max-width:640px;margin:0 auto;padding:14px 15px 96px}
  .pi-tabs{
    display:flex;margin:18px 0 0;background:var(--surface2);
    border:1px solid var(--border);border-radius:11px;padding:3px;gap:3px;
  }
  .pi-tab{
    flex:1;padding:8px 7px;font-size:11px;font-weight:600;border-radius:8px;
    transition:color .2s,background .2s;letter-spacing:.1px;color:var(--text3);
    border:1px solid transparent;font-family:Oswald,sans-serif;
    cursor:pointer;touch-action:manipulation;text-align:center;
  }
  .pi-tab:hover{color:var(--text2);background:rgba(144,105,233,.07)}
  .pi-tab.active{color:#fff;background:linear-gradient(180deg,var(--primary),var(--primary-dark));border-color:var(--primary)}
  
  .info-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface)}
  .info-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(144,105,233,.07)}
  .info-row:last-child{border-bottom:none}
  .info-row:nth-child(2n){background:rgba(144,105,233,.025)}
  .info-key{font-size:11.5px;font-weight:500;color:var(--text3)}
  .info-val{font-weight:700;color:var(--cyan);font-size:11.5px;text-align:right}
  
  /* ── INFO BADGE NEW ───────────────────────── */
  .info-val--badge { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
  .info-badge-new {
    font-size: 8px; font-weight: 800; letter-spacing: .5px;
    background: linear-gradient(180deg, var(--green), #00a882);
    color: #fff; padding: 2px 6px; border-radius: 4px;
    text-transform: uppercase; flex-shrink: 0;
    font-family: Oswald, sans-serif;
  }
  .info-desc-block{margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid rgba(144,105,233,.1)}
  .info-desc-block p{font-size:12px;color:var(--text2);line-height:1.8;margin-bottom:7px}
  .info-desc-block p:last-child{margin-bottom:0}
  .info-desc-block p strong{color:var(--text);font-weight:700}
  .info-price-card{
    display:none;align-items:center;gap:11px;flex-wrap:wrap;
    background:rgba(144,105,233,.06);border:1px solid var(--border);
    border-radius:var(--r);padding:12px 15px;margin-bottom:12px;
  }
  .info-price-card.visible{display:flex}
  .ipc-label{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;flex-basis:100%;font-weight:700;font-family:Oswald,sans-serif}
  .ipc-price{font-size:21px;font-weight:800;color:var(--primary-light);font-family:Oswald,sans-serif}
  .ipc-orig{font-size:10.2px;color:var(--text3);text-decoration:line-through;margin-top:2px}
  .ipc-disc{font-size:9.6px;color:#fff;font-weight:700;background:linear-gradient(180deg,var(--pink),#a0003e);padding:3px 9px;border-radius:99px;margin-left:auto}
  .review-list{display:flex;flex-direction:column;gap:9px}
  .review-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:11px}
  .review-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
  .reviewer{font-weight:700;color:var(--cyan);font-size:11.5px}
  .review-stars{color:var(--gold);font-size:11.5px}
  .review-date{font-size:10px;color:var(--text3);margin-bottom:4px}
  .review-text{font-size:12px;color:var(--text2);line-height:1.65}
  .review-product{font-size:10px;color:var(--text3);margin-top:4px;text-transform:uppercase;letter-spacing:.3px}
  .cara-video-wrap{margin-bottom:12px;border-radius:var(--r);background:#000;position:relative;overflow:hidden;border:1px solid var(--border);display:flex;justify-content:center}
  .cara-video-wrap iframe,.cara-video-wrap video{width:auto;max-width:100%;aspect-ratio:9/16;max-height:75svh;display:block}
  .cara-video-wrap video{object-fit:contain;outline:0;background:#000}
  .cara-video-wrap iframe{border:none;margin:0 auto}
  
  /* ── STICKY BUY ───────────────────────────── */
  .sticky-buy{
    position:fixed;bottom:0;left:0;right:0;z-index:250;max-width:640px;margin:0 auto;
    padding:9px 15px 11px;background:rgba(6,6,15,.99);
    border-top:1px solid var(--border);
  }
  .buy-bar{display:flex;align-items:center;gap:12px}
  .buy-info{flex:1}
  .buy-label{font-size:9.5px;color:var(--text3);font-weight:500}
  .buy-price{font-size:16px;font-weight:700;color:var(--primary-light);font-family:Oswald,sans-serif}
  .buy-btn{
    display:flex;align-items:center;gap:7px;padding:12px 20px; /* ← 11px→12px, 18px→20px */
    background:linear-gradient(180deg,var(--primary),var(--primary-dark));
    color:#fff;border-radius:var(--r-lg);font-size:12.5px; /* ← sedikit lebih besar */
    font-weight:700;transition:opacity .2s,transform .15s;border:none;
    letter-spacing:.4px;white-space:nowrap;font-family:Oswald,sans-serif;
    cursor:pointer;touch-action:manipulation;min-height:44px; /* ← touch target */
  }
  .buy-btn:hover{opacity:.88;transform:translateY(-1px)}
  .buy-btn svg{width:16px;height:16px}
  
  /* ── PAYMENT ──────────────────────────────── */
  .pay-page{max-width:640px;margin:0 auto;padding:14px 15px 140px}
  .order-summary{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-lg);padding:14px;margin-bottom:12px}
  .os-title{font-size:11.5px;color:var(--cyan);font-weight:700;margin-bottom:11px;letter-spacing:.3px;font-family:Oswald,sans-serif}
  .os-item{display:flex;align-items:center;gap:11px;margin-bottom:12px}
  .os-img{width:52px;height:52px;border-radius:10px;object-fit:cover;border:1px solid var(--border);flex-shrink:0}
  .os-game{font-size:14px;color:var(--text);font-weight:700;margin-bottom:2px;font-family:Oswald,sans-serif}
  .os-denom{font-size:11.5px;color:var(--cyan);margin-bottom:2px;font-weight:600}
  .os-uid,.acc-name{font-size:10.5px;color:var(--text3)}
  .price-rows{border-top:1px solid rgba(144,105,233,.1);padding-top:11px}
  .pr{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;padding:4px 0}
  .pr[hidden]{display:none}
  .pr-label{color:var(--text2)}
  .pr-val,.sd-val{font-weight:600;color:var(--text)}
  .pr.total{border-top:1px solid rgba(144,105,233,.1);margin-top:4px;padding-top:9px}
  .pr.total .pr-label{font-weight:700;color:var(--text);font-size:12.9px}
  .pr.total .pr-val{font-size:15px;font-weight:700;color:var(--cyan)}
  .discount-row .pr-val{color:var(--green)}
  .form-card{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-lg);padding:16px;margin:0 0 12px}
  .form-title{font-size:12px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:7px;font-family:Oswald,sans-serif;letter-spacing:.3px;color:var(--cyan)}
  .form-title svg{width:15px;height:15px;color:var(--primary)}
  .input-group{margin-bottom:11px}
  .input-label{font-size:12.3px;font-weight:600;color:var(--text2);margin-bottom:5px;display:block;letter-spacing:.1px}
  .input-field{width:100%;border:1px solid var(--border);background:var(--surface2);border-radius:10px;padding:11px 12px;font-size:12px;color:var(--text);transition:border-color .2s,box-shadow .2s}
  .input-field:focus{border-color:rgba(144,105,233,.3);box-shadow:0 0 0 3px rgba(144,105,233,.06);outline:none}
  .input-field::placeholder{color:var(--text3)}
.form-hint{
    margin-top:12px;padding:9px 12px;border-radius:var(--r-sm);
    background:rgba(0,249,255,.06);border:1px solid rgba(0,249,255,.15);
    font-size:10.5px;line-height:1.6;color:var(--text2);
  }
  .promo-row{display:flex;gap:7px;margin-bottom:9px}
  .promo-input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:11.5px;color:var(--text);transition:border-color .2s}
  .promo-input:focus{border-color:rgba(144,105,233,.4);outline:none}
  .promo-input::placeholder{color:var(--text3)}
  .promo-btn{padding:9px 16px;background:linear-gradient(180deg,var(--primary),var(--primary-dark));color:#fff;border-radius:10px;font-size:11.5px;font-weight:700;transition:opacity .2s;white-space:nowrap;font-family:Oswald,sans-serif;cursor:pointer;touch-action:manipulation}
  .promo-btn:hover{opacity:.85}
  .promo-success{display:none;align-items:center;gap:6px;background:rgba(0,212,170,.07);border:1px solid rgba(0,212,170,.3);border-radius:9px;padding:7px 11px;font-size:11.5px;font-weight:600;color:var(--green);margin-bottom:11px}
  .promo-success[hidden]{display:none}
  .promo-success svg{width:12px;height:12px;flex-shrink:0}
  
  .promo-success:not([hidden]) {
    display: flex;
  }
  .pm-section{margin-bottom:12px}
  .pm-section-title{display:flex;align-items:center;font-size:11.5px;font-weight:700;color:var(--cyan);gap:7px;margin-bottom:11px;letter-spacing:.3px;font-family:Oswald,sans-serif}
  .pm-section-title svg{width:15px;height:15px;color:var(--primary)}
  .pm-logo{display:flex;align-items:center;width:42px;height:30px;border-radius:7px;justify-content:center;font-size:17px;flex-shrink:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}
  .pm-logo img,.pi-bank-logo img{width:100%;height:100%;object-fit:contain;padding:3px}
  .pm-info,.oi-info{flex:1;min-width:0}
  .pm-name{font-size:11.5px;font-weight:600;color:var(--text)}
  .pm-desc{font-size:10.5px;color:var(--text3);margin-top:1px}
  .pm-extra{font-size:10.5px;color:var(--cyan);font-weight:600;margin-top:2px}
  .pm-dropdown{position:relative;margin-bottom:11px}
  .pm-dd-trigger{display:flex;align-items:center;gap:11px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r);padding:11px 12px;transition:border-color .2s,box-shadow .2s;min-height:52px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .pm-dropdown.open .pm-dd-trigger{border-color:rgba(144,105,233,.4);box-shadow:0 0 0 3px rgba(144,105,233,.07)}
  .pm-dd-placeholder{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
  .pm-dd-placeholder-text{font-size:11.5px;color:var(--text3)}
  .pm-dd-arrow{flex-shrink:0;width:17px;height:17px;color:var(--text3);transition:transform .2s}
  .pm-dd-list{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);z-index:200;max-height:0;opacity:0;pointer-events:none;transition:max-height .28s cubic-bezier(.4,0,.2,1),opacity .18s;box-shadow:0 8px 24px rgba(0,0,0,.4);overflow:hidden}
  .pm-dropdown.open .pm-dd-list{max-height:400px;opacity:1;pointer-events:auto;overflow-y:auto}
  .pm-dd-group-label{font-size:9.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;padding:9px 12px 4px;background:rgba(144,105,233,.05)}
  .pm-dd-option{display:flex;align-items:center;gap:11px;padding:10px 12px;transition:background .15s;border-bottom:1px solid rgba(255,255,255,.03);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .pm-dd-option:last-child{border-bottom:none}
  .pm-dd-option:hover{background:rgba(144,105,233,.08)}
  .pm-dd-option.selected{background:rgba(144,105,233,.06)}
  .pm-radio{width:17px;height:17px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
  .pm-dd-option.selected .pm-radio{border-color:var(--primary);background:var(--primary)}
  .pm-radio-dot{width:6px;height:6px;border-radius:50%;background:#fff;opacity:0;transition:opacity .2s}
  .pm-dd-option.selected .pm-radio-dot{opacity:1}
  .pay-instructions{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-lg);padding:16px;margin:12px 0;display:none}
  .pay-instructions.show{display:block;animation:.22s fadeUp}
  .pi-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .pi-logo{font-size:26px}
  .pi-bank-logo{display:flex;align-items:center;width:42px;height:28px;border-radius:6px;background:rgba(255,255,255,.08);justify-content:center;flex-shrink:0;overflow:hidden}
  .pi-bank-name{font-size:14.5px;font-weight:700;font-family:Oswald,sans-serif}
  .pi-bank-type{font-size:10.5px;color:var(--text3);margin-top:1px}
  .qris-box{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:12px}
.qris-img{width:190px;height:190px;border-radius:var(--r);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(144,105,233,.39);cursor:zoom-in;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s;touch-action:manipulation;text-align:center;contain:layout}
.qris-img:focus-visible{box-shadow:0 0 0 3px rgba(0,249,255,.39)}
  .qris-img:hover{transform:scale(1.02)}
  .qris-img img{width:100%;flex:1;object-fit:contain}
  .qris-zoom-hint{width:100%;background:linear-gradient(180deg,rgba(144,105,233,.85),rgba(0,249,255,.7));color:#fff;font-size:10px;font-weight:700;padding:3px 0;letter-spacing:.3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:4px;text-align:center}
  .qris-note{font-size:11.5px;color:var(--text3);line-height:1.5;text-align:center}
  .account-box{background:rgba(144,105,233,.05);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 12px;margin-bottom:12px}
  .acc-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin-bottom:7px}
  .acc-number{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
  .acc-number span{font-size:17px;font-weight:700;letter-spacing:.8px;color:var(--text);font-family:Oswald,sans-serif}
  .amount-box{display:flex;justify-content:space-between;align-items:center;background:rgba(144,105,233,.05);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 12px;margin-bottom:12px}
  .amount-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
  .amount-value{font-size:17px;font-weight:800;color:var(--cyan);font-family:Oswald,sans-serif}
  .amount-note{font-size:10px;color:var(--gold);margin-top:2px}
  .copy-btn{flex-shrink:0;padding:6px 12px;background:linear-gradient(180deg,var(--primary),var(--primary-dark));color:#fff;border-radius:8px;font-size:11px;border:none;cursor:pointer;transition:opacity .2s;touch-action:manipulation;font-weight:700;font-family:Oswald,sans-serif}
  .copy-btn:hover{opacity:.82}
  .pi-steps{font-size:11.5px;color:var(--text2);line-height:1.9;border-top:1px solid rgba(144,105,233,.1);padding-top:11px}
  .pi-steps strong{color:var(--cyan)}
  #qrisLightbox{display:flex;align-items:center;position:fixed;inset:0;z-index:9999;justify-content:center;opacity:0;transition:opacity .22s}
  #qrisLightbox.show{opacity:1}
.qlb-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.88)}
  .qlb-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:16px}
  .qlb-img{max-width:min(88vw,430px);max-height:min(88vh,430px);width:auto;height:auto;border-radius:var(--r-lg);object-fit:contain}
.qlb-close{position:absolute;top:-11px;left:-11px;width:33px;height:33px;border-radius:50%;background:rgba(30,20,60,.82);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:17px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;touch-action:manipulation}
.qlb-close:hover{background:rgba(255,68,68,.9)}

  .upload-section{margin:12px 0}
  .upload-section[hidden]{display:none}
  .upload-title{display:flex;align-items:center;font-size:11.5px;color:var(--cyan);gap:7px;margin-bottom:5px;font-weight:700;font-family:Oswald,sans-serif}
  .upload-title svg{width:15px;height:15px;color:var(--primary)}
  .upload-sub{font-size:10.5px;color:var(--text3);margin-bottom:11px}
  .upload-area{border:1.5px dashed rgba(144,105,233,.28);border-radius:var(--r-lg);padding:20px;cursor:pointer;transition:border-color .2s,background .2s;position:relative;background:rgba(144,105,233,.03);touch-action:manipulation;text-align:center;overflow:hidden}
  .upload-area:hover,.upload-area.has-file{border-color:rgba(144,105,233,.5);background:rgba(144,105,233,.07)}
.upload-area input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;pointer-events:none}
  .upload-icon{font-size:30px;margin-bottom:7px}
  .upload-text{font-size:11.5px;font-weight:600;color:var(--text2);margin-bottom:3px}
  .upload-hint{font-size:10px;color:var(--text3)}
  .upload-preview{width:100%;max-width:190px;max-height:140px;object-fit:contain;margin:11px auto 0;border-radius:var(--r-sm);display:none;border:1px solid var(--border)}
  .upload-preview.show{display:block}
  .upload-filename{font-size:11px;color:var(--green);margin-top:7px;display:none;font-weight:600}
  .upload-filename.show{display:block}
  .tg-progress{display:none;align-items:center;gap:7px;margin-top:11px;color:var(--cyan);font-size:11.5px;font-weight:600}
  .tg-progress.show{display:flex}
  .tg-spinner,.pay-btn svg{width:15px;height:15px}
  .tg-spinner{border:2px solid rgba(0,249,255,.15);border-top-color:var(--cyan);border-radius:50%;animation:1s linear infinite spin;flex-shrink:0}
  .pay-btn{width:100%;padding:14px;margin:14px 0 0;background:linear-gradient(180deg,var(--primary),var(--primary-dark));color:#fff;border-radius:var(--r-lg);font-size:12.9px;display:flex;align-items:center;justify-content:center;gap:7px;transition:opacity .2s,transform .15s;cursor:pointer;border:none;font-family:Oswald,sans-serif;touch-action:manipulation;font-weight:700;letter-spacing:.3px}
  .pay-btn:hover:not(:disabled){opacity:.88;transform:translateY(-1px)}
  .pay-btn:disabled{background:var(--surface2);color:var(--text3);cursor:not-allowed;transform:none;opacity:1}
  .pay-notice{font-size:9px;color:var(--text3);line-height:1.5;margin-top:11px;text-align:center}
  .pay-notice strong{color:var(--text2)}
  
  /* ── PROCESSING ───────────────────────────── */
  .process-page{max-width:640px;margin:0 auto;padding:55px 20px;display:flex;flex-direction:column;align-items:center;min-height:80svh;justify-content:center;gap:9px;text-align:center}
  .process-anim{font-size:52px;margin-bottom:12px;animation:1.5s ease-in-out infinite floatUp}
  .process-title{font-size:19px;font-family:Oswald,sans-serif;font-weight:700;letter-spacing:.3px}
  .process-sub{font-size:11.5px;color:var(--text3);line-height:1.7;max-width:290px}
  .pending-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(245,197,24,.08);border:1px solid rgba(245,197,24,.22);border-radius:99px;padding:4px 12px;font-size:10.5px;font-weight:700;color:var(--gold);margin-bottom:7px}
  .pending-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:1s infinite livePulse}
  .order-id-box{background:rgba(144,105,233,.07);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 18px;margin:16px 0;width:100%;max-width:330px}
  .oid-label{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
  .oid-val{font-size:17px;font-weight:800;color:var(--cyan);font-family:Oswald,sans-serif;letter-spacing:.5px}
  .success-detail{width:100%;max-width:350px;background:rgba(144,105,233,.05);border:1px solid var(--border);border-radius:var(--r);padding:12px;margin-bottom:18px}
  .sd-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:4px 0;border-bottom:1px solid rgba(144,105,233,.07)}
  .sd-row:last-child{border-bottom:none}
  .sd-key{color:var(--text3)}
  .action-btns{display:flex;flex-direction:column;gap:9px;width:100%;max-width:330px}
  .btn-primary,.btn-secondary,.btn-wa{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;width:100%;border-radius:var(--r-lg);font-size:12px;font-weight:700;letter-spacing:.3px;font-family:Oswald,sans-serif;cursor:pointer;touch-action:manipulation;transition:opacity .2s,transform .15s}
  .btn-primary{background:linear-gradient(180deg,var(--primary),var(--primary-dark));color:#fff;border:none}
  .btn-primary:hover{opacity:.88;transform:translateY(-1px)}
  .btn-wa{background:linear-gradient(180deg,#25d366,#128c7e);color:#fff;border:none;text-decoration:none}
  .btn-wa:hover{opacity:.88;transform:translateY(-1px)}
  .btn-secondary{background:rgba(144,105,233,.07);border:1px solid var(--border);color:var(--text)}
  .btn-secondary:hover{background:rgba(144,105,233,.15);border-color:var(--border-strong)}
  
/* ── ORDERS ───────────────────────────────── */
 .order-search-wrap{padding:0 0 10px}
.order-search-inner{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid rgba(144,105,233,.6);
  border-radius:99px;padding:9px 14px;
  transition:border-color .2s,box-shadow .2s;
}
.order-search-inner:focus-within{
  border-color:var(--cyan);
  box-shadow:0 0 0 2px rgba(0,249,255,.15);
}
.order-search-inner svg{width:15px;height:15px;color:var(--text3);flex-shrink:0}
.order-search-input{
  flex:1;background:none;border:none;outline:none;
  font-size:12px;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;
}
.order-search-input::placeholder{color:var(--text3)}
.order-search-clear{
  width:18px;height:18px;border-radius:50%;background:rgba(120,120,160,.22);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:none;padding:0;cursor:pointer;transition:background var(--t-fast);
}
.order-search-clear[hidden]{display:none}
.order-search-clear:hover{background:rgba(255,68,68,.22)}
.order-search-clear svg{width:10px;height:10px;color:var(--text3)}
  .order-filter{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .order-filter::-webkit-scrollbar{display:none}
  .of-btn{padding:6px 14px;border-radius:99px;font-weight:600;cursor:pointer;touch-action:manipulation;border:1px solid var(--border);background:rgba(144,105,233,.06);color:var(--text3);transition:background .2s,border-color .2s,color .2s;white-space:nowrap;font-size:11.5px;font-family:Oswald,sans-serif}
  .of-btn.active{background:linear-gradient(180deg,var(--primary),var(--primary-dark));border-color:var(--primary);color:#fff}
  .order-list{display:flex;flex-direction:column;gap:9px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .order-item{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-lg);padding:12px;animation:.3s both fadeUp}
  .oi-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
  .oi-body{display:flex;align-items:center;gap:9px;margin-bottom:7px}
  .oi-img{width:42px;height:42px;border-radius:8px;object-fit:cover;border:1px solid var(--border);flex-shrink:0}
  .oi-info{flex:1;min-width:0}
  .oi-game{font-size:11.5px;font-weight:700;color:var(--text);font-family:Oswald,sans-serif}
  .oi-denom,.oi-date{font-size:10.5px;color:var(--text3);margin-top:2px}
  .oi-id{font-size:10px;color:var(--text3)}
  .oi-price{margin-left:auto;font-size:14px;font-weight:700;color:var(--primary-light);flex-shrink:0;font-family:Oswald,sans-serif}
  .oi-status{border-radius:99px;padding:3px 9px;font-size:9px;letter-spacing:.3px;font-weight:700;flex-shrink:0}
  .status-pending{background:rgba(245,197,24,.1);color:var(--gold);border:1px solid rgba(245,197,24,.22)}
  .status-success{background:rgba(0,212,170,.08);color:var(--green);border:1px solid rgba(0,212,170,.22)}
  .status-failed{background:rgba(255,68,68,.08);color:var(--red);border:1px solid rgba(255,68,68,.22)}


.oi-action-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  padding:7px 6px;font-size:9.8px;font-weight:700;font-family:Oswald,sans-serif;
  letter-spacing:.2px;border-radius:8px;cursor:pointer;touch-action:manipulation;
  border:1px solid transparent;transition:opacity .2s,transform .15s;
  white-space:nowrap;text-decoration:none;
}
.oi-action-btn svg{width:11px;height:11px;flex-shrink:0}
.oi-action-btn:hover{opacity:.85;transform:translateY(-1px)}
.oi-action-btn:active{transform:scale(.97)}
.oi-action-btn--status{background:linear-gradient(180deg,var(--primary),var(--primary-dark));color:#fff}
.oi-action-btn--apk{background:linear-gradient(180deg,var(--cyan2),var(--cyan));color:#06222a}
.oi-action-btn--chat{background:rgba(144,105,233,.08);border-color:var(--border-strong);color:var(--cyan)}

.oid-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.oid-copy-btn{
  flex-shrink:0;width:30px;height:30px;border-radius:8px;
  background:rgba(144,105,233,.1);border:1px solid var(--border);
  color:var(--cyan);display:flex;align-items:center;justify-content:center;
  cursor:pointer;touch-action:manipulation;
  transition:background .2s,border-color .2s,transform .15s;
}
.oid-copy-btn svg{width:15px;height:15px}
.oid-copy-btn:hover{background:rgba(144,105,233,.3);border-color:var(--border-strong)}
.oid-copy-btn:active{transform:scale(.93)}
  .oi-actions{display:flex;gap:6px;padding-top:9px;border-top:1px solid rgba(144,105,233,.09)}

  .oi-wa-btn{background:linear-gradient(180deg,#128c7e,#075e54);color:#fff;border:none;text-decoration:none}
  .oi-wa-btn:hover{opacity:.82}
  .oi-copy-btn{background:rgba(144,105,233,.07);border:1px solid var(--border);color:var(--text2)}
  .oi-copy-btn:hover{background:rgba(144,105,233,.18);border-color:var(--border-strong);color:var(--cyan)}
  .empty-state{padding:55px 20px;color:var(--text3);text-align:center}
  .empty-icon{font-size:50px;margin-bottom:12px}
  .empty-title{font-size:15px;font-weight:700;color:var(--text2);margin-bottom:5px;font-family:Oswald,sans-serif}
  .empty-sub{font-size:11.5px;line-height:1.6}
  
  /* ── EMBEDS ───────────────────────────────── */
  .embed-page,.info-page{max-width:640px;margin:0 auto;padding:0}
  .embed-wrap,.info-embed-wrap{width:100%;height:calc(100svh - 54px - 62px);position:relative;background:var(--surface)}
  .embed-wrap iframe,.info-embed-wrap iframe,.cs-modal-body iframe{width:100%;height:100%;border:none;display:block}
  .embed-loader,.info-embed-loader,.cs-modal-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;background:var(--surface);z-index:1;transition:opacity .3s}
  .embed-loader.hidden,.info-embed-loader.hidden,.cs-modal-loader.hidden{opacity:0;pointer-events:none}
  .embed-loader-spin,.info-loader-spin{width:34px;height:34px;border:3px solid rgba(144,105,233,.14);border-top-color:var(--primary);border-radius:50%;animation:1s linear infinite spin}
  .embed-loader-text,.info-loader-text{font-size:11.5px;color:var(--text3)}
  
  /* ── TOAST ────────────────────────────────── */
  .toast{position:fixed;bottom:76px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(12,12,27,.96);border:1px solid var(--border);border-radius:99px;padding:9px 18px;font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:7px;z-index:700;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;max-width:calc(100vw - 32px);color:var(--text);opacity:0}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  
  /* ── CS MODAL ─────────────────────────────── */
  .cs-modal{position:fixed;inset:0;z-index:800;display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
  .cs-modal.show{opacity:1;visibility:visible}
.cs-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.78); /* Perkuat opacity, hapus blur */
  /* backdrop-filter dihapus — tidak visible di modal gelap, tapi sangat mahal */
}
  .cs-modal-box{position:relative;z-index:1;width:100%;max-width:640px;height:88svh;background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);overflow:hidden;border-top:1px solid var(--border)}
  .cs-modal.show .cs-modal-box{transform:translateY(0)}
.cs-modal-close-floating{position:absolute;top:12px;right:12px;z-index:10;width:34px;height:34px;border-radius:50%;background:rgba(100,80,180,.55);border:1px solid rgba(144,105,233,.45);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:background var(--t);/* backdrop-filter dihapus */touch-action:manipulation}
  .cs-modal-close-floating:hover{background:rgba(255,68,68,.32);border-color:var(--red);color:var(--red)}
  .cs-modal-body{flex:1;position:relative;overflow:hidden}
  
  /* ── TG FLOAT ─────────────────────────────── */
.tg-float{position:fixed;bottom:88px;left:12px;z-index:450;display:flex;align-items:center;flex-direction:row-reverse;gap:6px;opacity:0;transform:translateY(16px) scale(.88);pointer-events:none;transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}
  .tg-float.show{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
  .wa-float-inner{position:relative;flex-shrink:0}
.tg-float-btn{width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,#2aabee,#229ed9);border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 9px rgba(0,136,204,.27);transition:transform .2s;cursor:pointer;touch-action:manipulation;text-decoration:none}
/* Animasi HANYA aktif saat float visible — tidak boros GPU saat hidden */
.tg-float.show .tg-float-btn {
  animation:1.8s ease-in-out infinite tgPulse;
}
  .tg-float-btn:hover{transform:scale(1.1)}
  .tg-float-btn svg{width:19px;height:19px}
  .wa-tooltip{font-size:9.5px;font-weight:700;background:rgba(34,169,217,.96);color:#fff;padding:5px 9px;border-radius:99px;white-space:nowrap;box-shadow:0 3px 14px rgba(0,0,0,.25);animation:.3s both waTooltipIn;letter-spacing:.2px;pointer-events:none;transition:opacity .3s}
  .wa-float-close{width:14px;height:14px;border-radius:50%;background:rgba(22,22,40,.85);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;position:absolute;top:-5px;right:-5px;line-height:1;padding:0;z-index:1;transition:background .2s}
  .wa-float-close:hover{background:rgba(255,68,68,.9)}
  

/* ── DOWNLOAD POPUP — Warning Frame Style (COMPACT) ─── */
.dl-popup-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.81);opacity:0;visibility:hidden;transition:visibility .39s}
.dl-popup-overlay.is-open{opacity:1;visibility:visible;animation:.35s forwards dlOverlayIn}
.dl-popup-overlay.is-closing{animation:.28s forwards dlOverlayOut}

.dl-popup-modal{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.78);
  z-index:10000;
  width:calc(100% - 44px);max-width:320px;
  max-height:93svh;overflow:visible;
  background:transparent;border:none;box-shadow:none;border-radius:0;
  opacity:0;
  display:flex;flex-direction:column;align-items:center;gap:9px;
}
.dl-popup-overlay.is-open .dl-popup-modal{animation:.45s cubic-bezier(.34,1.36,.64,1) 50ms forwards dlModalIn}
.dl-popup-overlay.is-closing .dl-popup-modal{animation:.25s forwards dlModalOut}

.dl-popup-close{
  display: none; position:absolute;top:-12px;left:-12px;z-index:20;
  width:30px;height:30px;border-radius:50%;
  background:#fff;border:none;color:#1a1625;
  align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.45);
  transition:transform .2s,background .2s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.dl-popup-close:active,.dl-popup-close:hover{background:#ffe4e4;color:#e02020;transform:rotate(90deg) scale(1.08)}

.dl-popup-frame{
  position:relative;width:100%;
  background:linear-gradient(145deg,#3b0764 0%,#5a1a9e 35%,#8b1da8 65%,#1a0f5c 100%);
  border:3px solid rgba(34,211,238,.69);
  border-radius:18px;
  padding:0 0 12px;
  box-shadow:
    0 0 14px rgba(34,211,238,.25),
    0 0 22px rgba(192,38,211,.15),
    0 10px 32px rgba(0,0,0,.55),
    inset 0 0 0 2px rgba(232,121,249,.12);
  overflow:hidden;
}

.dl-popup-hazard{
  width:100%;height:9px;
  border-radius:12px 12px 0 0;
  background:repeating-linear-gradient(-45deg,#22d3ee 0 6px,#c026d3 6px 12px);
  border-bottom:2px solid rgba(0,0,0,.36);
  margin-bottom:9px;
}

.dl-popup-bolt{
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#22d3ee 55%,#a21caf 100%);
  box-shadow:0 0 6px rgba(34,211,238,.81),0 1px 2px rgba(0,0,0,.6);
  z-index:5;
}
.dl-popup-bolt-tl{top:6px;left:6px}
.dl-popup-bolt-tr{top:6px;right:6px}
.dl-popup-bolt-bl{bottom:6px;left:6px}
.dl-popup-bolt-br{bottom:6px;right:6px}

.dl-popup-heading{
  text-align:center;padding:0 15px;margin-bottom:9px;
  display:flex;flex-direction:column;gap:3px;
}
.dl-popup-heading-top{
  font-size:12px;font-weight:600;color:#f0abfc;
  text-transform:none;letter-spacing:.3px;
  font-family:'Oswald',sans-serif;
  line-height:1.35;
  opacity:.93;
  text-shadow:0 0 9px rgba(240,171,252,.39);
}
.dl-popup-heading-main{
  font-size:15.9px;font-weight:800;color:#fff;
  font-family:'Oswald',sans-serif;letter-spacing:.3px;
  text-shadow:0 0 6px rgba(34,211,238,.35), 0 1px 3px rgba(0,0,0,.6);
  line-height:1.25;
}
.dl-popup-heading-divider{
  font-size:12px;color:rgba(34,211,238,.9);
  letter-spacing:1px;
  margin-top:0;
}

.dl-popup-img-wrap{
  width:calc(100% - 24px);margin:0 auto 10px;
  border-radius:12px;overflow:hidden;
  border:3px solid rgba(255,255,255,.85);
  box-shadow:0 6px 18px rgba(0,0,0,.39);
  background:#000;
}
.dl-popup-img{width:100%;height:100%;object-fit:contain;object-position:center top;display:block}

.dl-popup-btn-download{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:calc(100% - 24px);margin:0 auto;
  padding:11px 15px;
  background:linear-gradient(120deg,#22d3ee 0%,#a21caf 55%,#7e22ce 100%);
  color:#fff;font-size:.88rem;font-weight:800;
  border-radius:9px;text-decoration:none;
  letter-spacing:.03em;text-transform:uppercase;
  font-family:'Plus Jakarta Sans',sans-serif;
  box-shadow:0 4px 0 #5b0d70,0 8px 20px rgba(162,28,175,.45),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .15s,box-shadow .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.dl-popup-overlay.is-open .dl-popup-btn-download{animation:1.5s ease-in-out infinite dlBtnPulse}
.dl-popup-btn-download svg{flex-shrink:0}
.dl-popup-btn-download:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 #5b0d70,0 3px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15);
}

.dl-popup-btn-later{
  display:block;
  width:calc(100% - 39px);
  margin:6px auto 0;
  text-align:center;
  background:none;border:none;
  color:rgba(255,255,255,.69);
  font-size:.75rem;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;
  cursor:pointer;padding:3px 12px;
  font-family:'Plus Jakarta Sans',sans-serif;
  transition:color .3s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  text-decoration:underline;text-underline-offset:3px;
}
.dl-popup-btn-later:active,.dl-popup-btn-later:hover{color:#fff}
.flash-wrap {
  padding:9px 0 0; margin-bottom:9px; position:relative; overflow:hidden;
}
.flash-hdr {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:9px;
}
.flash-label {
  display:flex; align-items:center; gap:6px;
  font-size:12.9px; font-weight:700; letter-spacing:.3px; font-family:'Oswald',sans-serif;
}
.flash-label span:first-child { animation:flash 1s linear infinite; }
.timer {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(144,105,233,.2);
  border-radius: 10px;
  padding: 3px 6px;
  contain: layout;
}
.tblock {
  position: relative;
  min-width: 22px;
  padding: 2px 5px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1px;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, #1a0a2a 0%, #2d1060 50%, #0d0d1e 100%);
  border: 1px solid rgba(144,105,233,.39);
  box-shadow:
    0 2px 6px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.6);
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}

/* Glow scan line di dalam kotak */
.tblock::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255,255,255,.06), transparent);
  border-radius: 6px 6px 0 0;
  pointer-events: none;
}

.tsep {
  font-size: 12px;
  font-weight: 900;
  font-family: 'Oswald', sans-serif;
  color: rgba(144,105,233,.7);
  animation: flash 1s linear infinite;
  text-shadow: 0 0 8px rgba(144,105,233,.5);
  line-height: 1;
  padding-bottom: 2px;
}

.flash-scroll-wrap {
  overflow-x:auto; overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding-bottom:0;
}
.flash-scroll-wrap::-webkit-scrollbar { display:none; }
.flash-scroll-wrap.is-dragging { cursor:grabbing; }
.flash-scroll {
  display:flex; flex-direction:row; gap:9px;
  padding:3px 2px 3px; width:max-content;
}
/* ── FLASH LINE INDICATOR (modern segmented bar style) ── */
.flash-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 9px;
  margin-bottom: 3px;
  padding-bottom: 0;
}
.flash-dot {
  width: 18px;
  height: 3px;
  border-radius: 99px;
  background: rgba(144,105,233,.18);
  border: none;
  transition: background .3s ease, box-shadow .3s ease, width .3s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
  padding: 0;
}
.flash-dot.active {
  width: 26px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  box-shadow: none;
}
.flash-dot:hover:not(.active) {
  background: rgba(144,105,233,.35);
}
.flash-card {
  flex-shrink:0; width:218px;
  border:1px solid transparent;
  background-image:
  linear-gradient(#0e0e1c, #080810),
  linear-gradient(135deg, rgba(124,92,191,.9), rgba(192,38,211,.6), rgba(103,232,249,.6));
  background-origin:border-box; background-clip:padding-box,border-box;
  border-radius:var(--r-sm); cursor:pointer;
  transition:transform .2s; position:relative;
  padding:6px; display:flex; align-items:flex-start; gap:6px;
  -webkit-tap-highlight-color:transparent;
}
.flash-img-wrap {
  flex-shrink:0; width:54px; height:54px;
  border-radius:8px; overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
}
.flash-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.flash-name {
  font-size:11px; font-weight:700; color:#fff; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-family:'Oswald',sans-serif;
}
.flash-subtitle {
  font-size:7.5px; color:var(--cyan); text-transform:uppercase;
  letter-spacing:.3px; font-weight:600; margin-top:1px;
}


.flash-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.flash-price-row { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:2px; }
.flash-price { font-size:11.5px; font-weight:800; color:var(--text); }
.flash-orig  { font-size:10px; color:var(--text3); text-decoration:line-through; }
.flash-cta {
  display: inline-block; width: 100%; margin-top: 6px;
  padding: 6px 9px;
  background: linear-gradient(180deg, rgba(127,85,220,.9), rgba(0,0,0,.9));
  color: #fff; border-radius: 7px; font-size: 10.8px;
  font-weight: 700; text-align: center; cursor: pointer;
  font-family: 'Oswald', sans-serif; letter-spacing: .3px;
  border: none;
  /* 3D effect */
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -1px 0 rgba(0,0,0,.39) inset,
    0 3px 0 #3d1f7a,
    0 4px 8px rgba(0,0,0,.6);
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
  top: 0;
}
.flash-cta:hover {
  background: linear-gradient(180deg, #a87ff0 0%, #8a68cc 45%, #6b4ab5 100%);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -1px 0 rgba(0,0,0,.39) inset,
    0 4px 0 #3d1f7a,
    0 6px 12px rgba(0,0,0,.6);
}
.flash-cta:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(0,0,0,.3) inset,
    0 1px 0 #3d1f7a,
    0 2px 4px rgba(0,0,0,.3);
  top: 3px;
}
.ribbon {
  font-size:.5rem; font-weight:700; color:#fff;
  --f:.3em; --r:.9em;
  position:absolute; right:3px; top:calc(-1 * var(--f));
  padding:.3em; border:solid #ff1293;
  border-width:0 0 var(--r) calc(2 * var(--f));
  background:radial-gradient(69% 100% at bottom,#ff006e 99%,#ff1293 102%) 0 0/calc(2 * var(--f)) var(--f) no-repeat border-box;
  background-color:#ff1293; border-radius:var(--f) var(--f) 0 0;
  clip-path:polygon(0 0,100% 0,100% 100%,calc(50% + var(--f)) calc(100% - var(--r)),calc(2 * var(--f)) 100%,calc(2 * var(--f)) var(--f),0 var(--f));
}
  
  /* ── SKELETON ─────────────────────────────── */
  .skeleton{background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%);background-size:200% 100%;animation:1.5s infinite shimmer;border-radius:var(--r-sm)}
  .flash-scroll-wrap,.order-list,.search-results{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  
  
  /* ── PERFORMANCE HINTS ────────────────────────
     will-change dipasang di base state, BUKAN di :hover
     Browser butuh tahu SEBELUM animasi mulai.
     Hanya 3 elemen paling sering dianimasikan.
  ─────────────────────────────────────────────── */
/* will-change hanya aktif saat hover/focus — bukan always-on */
.game-card-wrap:hover .game-card,
.flash-cta:hover,
.flash-cta:focus-visible,
.buy-btn:hover,
.buy-btn:focus-visible {
  will-change: transform;
}
  
  
  
/* translateZ(0) dihapus dari base state — biarkan browser decide compositing.
     will-change:transform sudah ada di :hover state yang lebih tepat. */
  @media (prefers-reduced-motion: no-preference) {
    .buy-btn {
      transform: translateZ(0); /* Hanya buy-btn karena sering dianimasi */
    }
  }
  
  /* Game card: area tap lebih lega */
  .game-card {
    -webkit-tap-highlight-color: transparent;
  }
  /* ── TRANSACTION POPUP ────────────────────── */
.trx-popup {
  position: fixed;
  bottom: 140px;
  left: 12px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(10,9,26,.96);
  border: 1px solid rgba(144,105,233,.28);
  border-radius: 14px;
  padding: 9px 11px 9px 9px;
  max-width: 260px;
  min-width: 210px;
  box-shadow:
    0 4px 18px rgba(0,0,0,.55),
    0 0 0 1px rgba(144,105,233,.09),
    inset 0 1px 0 rgba(144,105,233,.18);
  pointer-events: all;
  cursor: default;
  opacity: 0;
  transform: translateX(-110%) scale(0.88);
  transition:
    opacity .42s cubic-bezier(.34,1.2,.64,1),
    transform .42s cubic-bezier(.34,1.2,.64,1);
}

/* Visible state */
.trx-popup.show {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Exit state */
.trx-popup.hide {
  opacity: 0;
  transform: translateX(-30%) scale(0.9);
  transition:
    opacity .3s ease,
    transform .3s ease;
}
  
  .trx-popup-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b6e3f4, #c0aede);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(144,105,233,.5);
    position: relative;
    overflow: visible; /* ← CHANGED: hidden → visible agar dot bisa keluar */
    box-shadow: 0 0 0 3px rgba(144,105,233,.15);
  }
  
  /* Clip hanya gambarnya, bukan seluruh avatar */
  .trx-popup-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    overflow: hidden; /* clip gambar tetap bulat */
  }
  
  
  
  
  /* Online dot — di luar avatar pojok kiri atas */
  .trx-popup-avatar::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 8px;   /* ← lebih kecil */
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid var(--bg);
    animation: livePulse 1.4s ease-in-out infinite;
    z-index: 10;
  }
  
  .trx-popup-body {
    flex: 1;
    min-width: 0;
  }
  
  .trx-popup-row1 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    overflow: hidden;
  }
  
  .trx-popup-who {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .2px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .trx-popup-sep {
    font-size: 12px;
    color: var(--text3);
    flex-shrink: 0;
  }
  
  .trx-popup-time {
    font-size: 12px;
    color: var(--text3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .trx-popup-msg {
    font-size: 12.3px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
  }
  
  .trx-popup-product {
    color: var(--cyan);
    font-weight: 700;
  }
  
  .trx-popup-close {
    font-size: 11px;
    color: var(--text3);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color .2s, background .2s;
    flex-shrink: 0;
    align-self: flex-start;
    line-height: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  .trx-popup-close:hover {
    color: var(--red);
    background: rgba(255,68,68,.1);
  }
  
@media (min-width: 640px) {
    .trx-popup {
      left: calc(50% - 308px);
      bottom: 140px;
    }
  }
  /* ═══════════════════════════════════════════════
     PRODUCT DETAIL v2 — Bukaolshop-style
     ═══════════════════════════════════════════════ */
  
  /* ── SPEC CARD (Tab Deskripsi) ──────────────── */
  .desc-spec-card {
    background: rgba(14,14,28,.6);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 12px;
  }
  
  .desc-spec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(144,105,233,.08);
  }
  .desc-spec-row:last-child  { border-bottom: none; }
  .desc-spec-row:nth-child(even) { background: rgba(144,105,233,.025); }
  
  .desc-spec-row--block {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }
  
  .desc-spec-key {
    font-size: 11.5px;
    color: var(--text3);
    font-weight: 500;
    flex-shrink: 0;
  }
  
  .desc-spec-val {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--cyan);
    text-align: right;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  
  .desc-spec-val--desc {
    display: block;
    color: var(--text2);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.75;
    text-align: left;
    width: 100%;
  }
  .desc-spec-val--desc strong { color: var(--text); font-weight: 700; }
  
  /* ── VIDEO LABEL ROW ─────────────────────────── */
  .video-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
  }
  
  .video-label-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--red);
    animation: livePulse 1.2s infinite;
    flex-shrink: 0;
  }
  
  .video-label-text {
    font-size: 12px; font-weight: 700;
    color: var(--text2);
    font-family: 'Oswald', sans-serif;
    letter-spacing: .3px;
  }
  
  .video-note {
    margin-top: 10px;
    font-size: 11px;
    color: var(--text3);
    line-height: 1.6;
    text-align: center;
  }
  /* Tab Tampilan: kurangi padding atas karena video-label-row sudah ada margin */
  #pi-cara.pi-content { padding-top: 6px; }
  /* ── THUMBNAIL GRID ──────────────────────────── */
  .tampilan-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tampilan-grid::-webkit-scrollbar { display: none; }
  
  .tampilan-thumb {
    flex: 0 0 auto;
    width: 108px;
    scroll-snap-align: start;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    transition: border-color var(--t), transform var(--t);
    background: #000;
    -webkit-tap-highlight-color: transparent;
  }
  .tampilan-thumb:active { transform: scale(.95); }
  
  .tampilan-thumb-wrap,
  .tampilan-thumb-video {
    position: relative;
    width: 100%;
    aspect-ratio: 9/16;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
  }
  
  .tampilan-thumb-bg {
    position: absolute;
    inset: -10%;
    width: 120%; height: 120%;
    object-fit: cover;
    object-position: center;
    filter: blur(18px) brightness(.55) saturate(1.4);
    transform: scale(1.1);
    display: block;
    border-radius: 0;
    z-index: 0;
  }
  
  .tampilan-thumb-fg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    z-index: 1;
  }
  
  .thumb-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.38);
    border-radius: 8px;
    z-index: 2;
  }
  .thumb-play-icon svg {
    width: 28px; height: 28px;
    color: #fff;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.8));
  }
  
.tampilan-thumb-badge {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(4,4,12,.85); /* Solid, no blur */
  border: 1px solid var(--border);
  color: var(--text3);
  font-size: 8.5px; font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .3px;
  white-space: nowrap;
  z-index: 3;
}
  .tampilan-thumb-badge.video-badge {
    color: var(--cyan);
    border-color: rgba(0,249,255,.3);
  }
  
  /* ── MEDIA LIGHTBOX ──────────────────────────── */
.media-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.96);
    /* backdrop-filter dihapus — background sudah 96% opaque, blur tidak visible */
    /* Menghilangkan GPU compositing cost yang tidak perlu */
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
  }
  .media-lightbox.open {
    display: flex;
    animation: fadeUp .2s ease;
  }
  
  .media-lb-inner {
    position: relative;
    max-width: 380px;
    width: 100%;
  }
  
  .media-lb-close {
    position: absolute;
    top: -12px; left: -12px;
    width: 33px; height: 33px;
    border-radius: 50%;
    background: rgba(144,105,233,.18);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background var(--t);
    line-height: 1;
    touch-action: manipulation;
  }
  .media-lb-close:active { background: rgba(255,68,68,.45); }
  
  .media-lb-img {
    width: 100%;
    max-height: 82svh;
    object-fit: contain;
    border-radius: var(--r);
    box-shadow: 0 0 40px rgba(144,105,233,.3);
    display: block;
  }
  
  .media-lb-video {
    width: 100%;
    aspect-ratio: 9/16;
    max-height: 82svh;
    border-radius: var(--r);
    background: #000;
    display: block;
    box-shadow: 0 0 40px rgba(144,105,233,.3);
  }
  
  .media-lb-nav {
    position: fixed;
    top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(144,105,233,.2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--t);
    touch-action: manipulation;
    z-index: 10;
  }
  .media-lb-nav:active { background: rgba(144,105,233,.45); }
  .media-lb-nav.prev  { left: 8px; }
  .media-lb-nav.next  { right: 8px; }
  
  .media-lb-counter {
    text-align: center;
    margin-top: 10px;
    font-size: 11px;
    color: var(--text3);
    font-family: 'Oswald', sans-serif;
    letter-spacing: .5px;
  }
  
  /* ── REVIEW v2 ───────────────────────────────── */
.review-header-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(14,12,28,.97) 0%, rgba(20,10,45,.95) 60%, rgba(0,18,28,.95) 100%);
    border: 1px solid rgba(144,105,233,.3);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(144,105,233,.12);
  }
  .review-score      { text-align: center; flex-shrink: 0; }
  .review-score-num  {
    font-size: 36px; font-weight: 800;
    color: var(--gold); font-family: 'Oswald', sans-serif; line-height: 1;
  }
  .review-score-label { font-size: 10px; color: var(--text3); margin-top: 2px; }
  .review-stars-row   { font-size: 12px; margin: 4px 0; }
  
  .review-sep {
    width: 1px; height: 48px;
    background: rgba(144,105,233,.2);
    flex-shrink: 0;
  }
  
  .review-meta  { flex: 1; }
  .review-total { font-size: 12px; font-weight: 700; color: var(--text); }
  .review-sub   { font-size: 11px; color: var(--text3); margin-top: 2px; }
  
  .review-card {
    background: linear-gradient(135deg, rgba(14,12,28,.96) 0%, rgba(18,14,36,.94) 100%);
    border: 1px solid rgba(144,105,233,.22);
    border-radius: var(--r);
    padding: 12px 14px;
    animation: fadeUp .3s ease both;
    position: relative;
    overflow: hidden;
  }
  /* Left accent bar */
  .review-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary), var(--cyan));
    border-radius: 0 2px 2px 0;
  }
  
  .review-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    margin-bottom: 9px;
  }
  
  .reviewer-info   { display: flex; align-items: center; gap: 9px; }
  .reviewer-avatar {
    width: 33px; height: 33px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--cyan));
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
  }
  .reviewer-name { font-size: 12.6px; font-weight: 700; color: var(--text); }
  .reviewer-date { font-size: 9px; color: var(--text3); margin-top: 1px; }
  
  .review-star-row      { display: flex; gap: 2px; font-size: 12px; }
  .review-text          { font-size: 12px; color: var(--text2); line-height: 1.8; }
  
  .review-product-tag {
    display: inline-flex; align-items: center; gap: 3px;
    background: rgba(0,249,255,.09);
    border: 1px solid rgba(0,249,255,.15);
    color: var(--cyan);
    padding: 3px 9px; border-radius: 6px;
    font-size: 9.6px; font-weight: 700;
    margin-top: 9px;
  }
  
  /* ── SEARCH HISTORY ───────────────────────── */
.search-history-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px 6px;
  font-size: 10px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .6px;
  border-bottom: 1px solid rgba(144,105,233,.09);
}
.search-history-clear {
  font-size: 10px; font-weight: 600; color: var(--pink);
  cursor: pointer; background: none; border: none;
  padding: 3px 6px; border-radius: 3px;
  transition: background var(--t-fast);
}
.search-history-clear:hover { background: rgba(224,64,123,.1); }
.search-item--history { opacity: .81; }
.search-item--history:hover { opacity: 1; }
/* ── PWA INSTALL BANNER ────────────────────── */
#pwaBanner {
  position: fixed;
  top: 63px; left: 12px; right: 12px;
  max-width: 399px; margin: 0;
  z-index: 600;
  display: flex; align-items: center; gap: 9px;
  background: rgba(12,12,28,.96);
  border: 1px solid rgba(144,105,233,.9);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 9px 33px rgba(0,0,0,.6), 0 0 0 1px rgba(144,105,233,.9);
  opacity: 0; transform: translateY(-20px);
  transition: opacity .36s ease, transform .36s cubic-bezier(.34,1.2,.64,1);
}
#pwaBanner.show { opacity: 1; transform: translateY(0); }
.pwa-banner-icon { font-size: 27px; flex-shrink: 0; }
.pwa-banner-text { flex: 1; min-width: 0; }
.pwa-banner-title {
  font-size: 12px; font-weight: 700; color: var(--text);
  font-family: Oswald, sans-serif;
}
.pwa-banner-sub { font-size: 9px; color: var(--text3); margin-top: 3px; }
.pwa-banner-btn {
  flex-shrink: 0; padding: 6px 12px;
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
  color: #fff; border: none; border-radius: 9px;
  font-size: 12px; font-weight: 700; font-family: Oswald, sans-serif;
  cursor: pointer; touch-action: manipulation;
}
.pwa-banner-close {
  flex-shrink: 0; width: 21px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12);
  color: var(--text3); font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
@media (min-width:640px){
  .tg-float{left:calc(50% - 304px)}
}
  @media print{.cs-modal,.tg-float,.toast,nav{display:none}}
  @media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* ══════════════════════════════════════════════════════
   DESKTOP / LAPTOP RESPONSIVE — Complete Patch v2
   ══════════════════════════════════════════════════════ */

/* ── 1024px: Small Laptop / Large Tablet ── */
@media (min-width: 1024px) {

  /* Body background lebih gelap agar content area menonjol */
  body { background-color: var(--bg2); }

  /* Wrapper utama semua konten */
  .header-inner,
  .main,
  .back-header,
  .detail-body,
  .pay-page,
  .orders-page,
  .embed-page,
  .info-page { max-width: 900px; }

  /* Header full width tapi inner tetap centered */
  .header { left: 0; right: 0; }

  /* Product hero centered */
  .product-hero { max-width: 900px; margin: 0 auto; display: block; }

  /* Nav bar centered dengan lebar sesuai content */
  #globalNav {
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    max-width: 900px;
    /* Tambah rounded corner lebih besar di desktop */
    border-radius: 20px;
  }

  /* Sticky buy bar */
  .sticky-buy {
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    max-width: 900px;
    border-radius: 20px 20px 0 0;
  }

  /* TG float button ikut posisi content */
  .tg-float { left: calc(50% - 434px); }

  /* PWA Banner ikut content width */
  #pwaBanner {
    left: 50%;
    transform: translateX(-50%);
    max-width: 500px;
    top: 72px;
  }

  /* Grid produk: 4 kolom di laptop kecil */
  .game-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  /* Flash card lebih lebar */
  .flash-card { width: 260px; }

  /* Banner swiper: tambah border radius */
  swiper-container { border-radius: 22px; }

  /* Game card: font sedikit lebih besar */
  .game-name { font-size: 10.5px; }
  .game-price { font-size: 9px; }

  /* Section padding lebih lega */
  .main { padding: 20px 20px 110px; }

  /* Detail body padding */
  .detail-body { padding: 18px 24px 110px; }

  /* Product hero aspect ratio lebih sinematik */
  .product-hero { aspect-ratio: 21/7; }

  /* Footer lebih compact */
  .footer { padding: 14px 20px 18px; }

  /* Toast naik sedikit */
  .toast { bottom: 90px; }

  /* Transaction popup ikut batas kiri content */
  .trx-popup { left: calc(50% - 434px); }

  /* Order filter scrollbar visible di desktop */
  .order-filter { overflow-x: visible; flex-wrap: wrap; }

  /* Embed/iframe tinggi full sisa layar */
  .embed-wrap,
  .info-embed-wrap { height: calc(100svh - 54px - 74px); }

  /* CS Modal lebih tinggi */
  .cs-modal-box { height: 85svh; }

  /* Flash scroll: tampilkan semua item, hapus scroll horizontal */
  .flash-scroll-wrap { overflow-x: visible; }
  .flash-scroll {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .flash-card { width: 100%; }

  /* Flash dots disembunyikan di desktop karena sudah grid */
  .flash-dots { display: none; }

  /* Eksklusif carousel: tampilkan lebih banyak */
  .eksklusif-scroll { padding-bottom: 10px; }
  .eksklusif-card { width: 320px; }

  /* Search results dropdown lebih lebar */
  .search-results { max-height: 360px; }

  /* Filter dropdown */
  .filter-dropdown { width: 240px; }

  /* Payment method dropdown */
  .pm-dd-list { max-height: 500px; }

  /* QRIS lightbox lebih besar */
  .qlb-img { max-width: min(88vw, 550px); }

  /* Media lightbox gambar lebih besar */
  .media-lb-inner { max-width: 480px; }
  .media-lb-nav.prev { left: 16px; }
  .media-lb-nav.next { right: 16px; }

  /* Download popup lebih besar */
  .dl-popup-modal { max-width: 420px; }

  /* Sticky buy bar padding */
  .sticky-buy { padding: 12px 24px 14px; }
}

/* ── 1280px: Full Desktop / Large Monitor ── */
@media (min-width: 1280px) {

  .header-inner,
  .main,
  .back-header,
  .detail-body,
  .pay-page,
  .orders-page,
  .embed-page,
  .info-page { max-width: 1080px; }

  #globalNav,
  .sticky-buy { width: 1080px; max-width: 1080px; }

  .tg-float   { left: calc(50% - 524px); }
  .trx-popup  { left: calc(50% - 524px); }

  #pwaBanner { max-width: 560px; }

  /* 5 kolom di full desktop */
  .game-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }

  /* Flash: 3 kolom penuh */
  .flash-scroll {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Eksklusif card lebih lebar */
  .eksklusif-card { width: 360px; }

  /* Padding lebih lega */
  .main { padding: 24px 24px 120px; }
  .detail-body { padding: 20px 28px 120px; }

  /* Product hero */
  .product-hero { aspect-ratio: 21/6; }

  /* Game card info font */
  .game-name { font-size: 11px; }

  /* Media lightbox */
  .media-lb-inner { max-width: 520px; }

  /* CS Modal */
  .cs-modal-box { height: 82svh; max-width: 720px; }

  /* Review card lebih lega */
  .review-header-card { padding: 18px 20px; }
  .review-score-num { font-size: 42px; }
}

/* ── 1536px: Ultra Wide / 2K Monitor ── */
@media (min-width: 1536px) {

  .header-inner,
  .main,
  .back-header,
  .detail-body,
  .pay-page,
  .orders-page,
  .embed-page,
  .info-page { max-width: 1240px; }

  #globalNav,
  .sticky-buy { width: 1240px; max-width: 1240px; }

  .tg-float   { left: calc(50% - 604px); }
  .trx-popup  { left: calc(50% - 604px); }

  /* 6 kolom di ultrawide */
  .game-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }

  .flash-card { width: 100%; }

  .main { padding: 28px 28px 120px; }
}

/* ── DESKTOP: Sidebar Layout (opsional — dual panel) ──
   Di layar >= 1400px: tampilkan sidebar info di samping kanan produk
   Aktifkan jika ingin layout 2-kolom di product detail
── */
@media (min-width: 1400px) {

  /* Product detail: hero + tabs bisa lebih lebar */
  .product-hero { aspect-ratio: 21/7; }

  /* Desc spec card lebih lega */
  .desc-spec-row { padding: 12px 18px; }
  .desc-spec-key,
  .desc-spec-val { font-size: 12.5px; }

  /* Review card */
  .review-card { padding: 16px 18px; }
  .reviewer-name { font-size: 12.9px; }
  .review-text   { font-size: 12.5px; }

  /* Order item */
  .order-item { padding: 14px 16px; }
  .oi-game  { font-size: 12px; }
  .oi-denom { font-size: 11.5px; }
}

/* ── KHUSUS: Hover effects yang lebih smooth di desktop ── */
@media (hover: hover) and (pointer: fine) {

  /* Game card: lebih dramatis hover di desktop */
  .game-card-wrap:hover .game-card {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 30px rgba(0,0,0,.7), 0 0 20px rgba(144,105,233,.2);
  }

  /* Flash card hover */
  .flash-card:hover {
    transform: translateY(-3px);
    border-color: rgba(144,105,233,.4);
  }

  /* Nav item hover lebih jelas */
  .nav-item:hover:not(.active) {
    color: var(--primary-light);
    background: rgba(144,105,233,.06);
    border-radius: 12px;
  }

  /* Button hover lebih smooth */
  .buy-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(124,92,191,.35); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(124,92,191,.35); }

  /* Icon btn hover */
  .icon-btn:hover { transform: scale(1.05); }

  /* Eksklusif card hover */
  .eksklusif-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(124,92,191,.2);
  }

  /* Copy btn hover */
  .copy-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,92,191,.3); }

  /* Search item hover cursor */
  .search-item { cursor: pointer; }
  .filter-dd-item { cursor: pointer; }
}

/* ── SCROLLBAR lebih visible di desktop ── */
@media (min-width: 1024px) {
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-thumb { background: rgba(144,105,233,.25); }
  ::-webkit-scrollbar-thumb:hover { background: var(--primary); }
}


/* ══════════════════════════════════════════════════════
   DESKTOP BUG FIX PATCH — Tambahkan di bawah semua CSS
   ══════════════════════════════════════════════════════ */

/* ── FIX 1: .back-header max-width tidak ikut membesar di desktop ── */
/* Base style-nya masih 640px — harus di-override di sini */
@media (min-width: 1024px) {
  .back-header {
    max-width: 900px;
    width: 100%;
  }
  /* Konten hero product juga harus ikut melebar */
  .product-hero-content {
    max-width: 900px;
  }
}
@media (min-width: 1280px) {
  .back-header {
    max-width: 1080px;
  }
  .product-hero-content {
    max-width: 1080px;
  }
}
@media (min-width: 1536px) {
  .back-header {
    max-width: 1240px;
  }
  .product-hero-content {
    max-width: 1240px;
  }
}

/* ── Nav & Buy Bar — responsive width ── */
/* Base: mobile full width dengan margin 8px kiri-kanan */
/* 640px+: centered fixed width */
@media (min-width: 640px) {
  #globalNav  { left: 50%; right: auto; transform: translateX(-50%); width: 640px; max-width: 640px; }
  .sticky-buy { left: 50%; right: auto; transform: translateX(-50%); width: 640px; max-width: 640px; }
}
@media (min-width: 1024px) {
  #globalNav  { width: 900px; max-width: 900px; border-radius: 20px; }
  .sticky-buy { width: 900px; max-width: 900px; border-radius: 20px 20px 0 0; }
}

@media (min-width: 1280px) {
  #globalNav {
    width: 1080px !important;
    max-width: 1080px !important;
  }
  .sticky-buy {
    width: 1080px !important;
    max-width: 1080px !important;
  }
}
@media (min-width: 1536px) {
  #globalNav {
    width: 1240px !important;
    max-width: 1240px !important;
  }
  .sticky-buy {
    width: 1240px !important;
    max-width: 1240px !important;
  }
}

/* ── FIX 3: .flash-wrap overflow:hidden konflik dengan flash grid desktop ── */
/* Di desktop, flash berubah jadi grid — parent tidak boleh overflow:hidden */
@media (min-width: 1024px) {
  .flash-wrap {
    overflow: visible;
  }
  /* Flash scroll wrap juga perlu overflow visible agar grid tampil penuh */
  .flash-scroll-wrap {
    overflow: visible !important;
    cursor: default;
  }
  /* Nonaktifkan drag scroll behavior yang tidak relevan di desktop */
  .flash-scroll-wrap.is-dragging {
    cursor: default;
  }
}

/* ── FIX 4: About board features — 2 kolom di desktop ── */
@media (min-width: 1024px) {
  .board-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
  }
  /* Board title tetap full width */
  .board-title-box {
    grid-column: 1 / -1;
  }
}

/* ── FIX 5: Header inner — pastikan centered sempurna di semua halaman ── */
/* .header-inner base punya max-width:639px, harus diperbesar juga */
@media (min-width: 1024px) {
  .header-inner {
    max-width: 900px !important;
    padding: 0 20px;
  }
}
@media (min-width: 1280px) {
  .header-inner {
    max-width: 1080px !important;
    padding: 0 24px;
  }
}
@media (min-width: 1536px) {
  .header-inner {
    max-width: 1240px !important;
  }
}

/* ── FIX 6: Footer content width ikut melebar di desktop ── */
@media (min-width: 1024px) {
  .footer__content {
    max-width: 900px;
  }
  /* Contact row bisa tampil horizontal penuh */
  .contact-section {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px; }
}
@media (min-width: 1280px) {
  .footer__content {
    max-width: 1080px;
  }
}

/* ── FIX 7: Secure section dan media69 board ikut lebar konten ── */
@media (min-width: 1024px) {
  .secure-section {
    padding: 18px 22px;
  }
  .tx-stats {
    gap: 12px;
    padding: 12px 16px;
  }
  .tx-stat-icon { font-size: 22px; }
  .tx-stat-num  { font-size: 15px; }
}

/* ── FIX 8: Order item actions ── */
@media (min-width: 1024px) {
  .oi-actions { gap: 10px; }
  .oi-action-btn { padding: 8px 14px; font-size: 11px; }
}

/* ── FIX 9: Payment page 2 kolom ── */
@media (min-width: 1024px) {
  .pay-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
    padding: 20px 24px 130px;
    max-width: 900px;
    margin: 0 auto;
  }
  .order-summary { grid-column: 1; grid-row: 1; position: sticky; top: 70px; }
  .form-card     { grid-column: 2; grid-row: 1 / 4; }
  .promo-row, .promo-success { grid-column: 1; }
  .pm-section, .pay-instructions, .upload-section, .pay-btn, .pay-notice {
    grid-column: 1 / -1;
  }
}

/* ── FIX 10: Thumbnail desktop lebih besar ── */
@media (min-width: 1024px) {
  .tampilan-thumb { width: 130px; }
  .tampilan-grid  { gap: 10px; }
}

/* ── FIX 11: Process page centered ── */
@media (min-width: 1024px) {
  .process-page   { max-width: 600px; margin: 0 auto; padding: 60px 40px; }
  .order-id-box   { max-width: 420px; }
  .action-btns    { max-width: 420px; }
  .success-detail { max-width: 450px; }
}

/* ── FIX 12: trx-popup posisi di desktop ── */
@media (min-width: 1024px) {
  .trx-popup { bottom: 100px; max-width: 300px; }
}
/* ══════════════════════════════════════════════
   EKSKLUSIF ASUPAN — Card Style v2 (Fixed)
   ══════════════════════════════════════════════ */

.eksklusif-scroll-wrap {
  overflow-x: auto;           /* ← aktifkan scroll horizontal */
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.eksklusif-scroll-wrap::-webkit-scrollbar { display: none; }
.eksklusif-scroll-wrap.is-dragging { cursor: grabbing; }

.eksklusif-scroll {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 3px 3px 4px;
  width: max-content;
}

/* ── CARD WRAPPER (rainbow border) ── */
.eksklusif-card-wrap {
  position: relative;
  border-radius: var(--r-lg);
  padding: 1px;
  background: conic-gradient(
    from 0deg,
    #9069c9, #00f9ff, #da69d3, #ff2d78, #9069e9
  );
  width: 269px; 
  flex-shrink: 0;
  transition: opacity .2s;
}
.eksklusif-card-wrap:active { opacity: .8; }

/* ── CARD ── */
.eksklusif-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  min-height: 72px;
  width: 100%;
  background: var(--surface);
  border: none;
  border-radius: calc(var(--r-lg) - 1px);
  cursor: pointer;
  transition: transform .18s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

.eksklusif-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.3), 0 0 0 1px rgba(144,105,233,.15);
}

/* Gunakan satu nilai :active yang konsisten */
.eksklusif-card:active { transform: scale(.96); }

/* Left accent bar */
.eksklusif-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--cyan));
  border-radius: 0 2px 2px 0;
}

/* ── INFO (kiri, flex 1) ── */
.eksklusif-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Badge */
.eksklusif-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(144,105,233,.12);
  border: 1px solid rgba(144,105,233,.25);
  border-radius: 99px;
  padding: 2px 9px;
  font-size: 9px;
  font-weight: 700;
  color: var(--primary-light);
  letter-spacing: .4px;
  text-transform: uppercase;
  width: fit-content;       /* ← jangan stretch full width */
}

.eksklusif-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-light);
  flex-shrink: 0;
  animation: livePulse 1.4s ease-in-out infinite;
}

/* Title */
.eksklusif-title {
  font-size: 12.9px;
  font-weight: 700;
  color: var(--text);
  font-family: 'Oswald', sans-serif;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Desc */
.eksklusif-desc {
  font-size: 10.5px;
  color: var(--text3);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;   /* ← 1 baris saja agar card compact */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA row */
.eksklusif-cta-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary-light);
  font-size: 11px;
  font-weight: 700;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .3px;
  margin-top: 2px;
}

.eksklusif-arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform .2s;
}

/* ← INI yang bikin arrow raksasa — wajib dibatasi */
.eksklusif-arrow svg {
  width: 12.9px;
  height: 12.9px;
  stroke: var(--primary-light);
  flex-shrink: 0;
}

.eksklusif-card:hover .eksklusif-arrow {
  transform: translateX(3px);
}
/* ── THUMBNAIL (kanan, fixed size) ── */
.eksklusif-thumb-wrap {
  flex-shrink: 0;
  width: 63px;
  height: 63px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface2);
}
.eksklusif-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── LIGHT MODE ── */
[data-theme="light"] .eksklusif-card {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="light"] .eksklusif-badge {
  background: rgba(124,92,191,.09);
  border-color: rgba(124,92,191,.2);
  color: var(--primary);
}
[data-theme="light"] .eksklusif-dot  { background: var(--primary); }
[data-theme="light"] .eksklusif-title { color: var(--text); }
[data-theme="light"] .eksklusif-cta-row { color: var(--primary); }
/* ── MEDIA69 BOARD IFRAME MODE ─────────────────────── */
.media69-board-inner--iframe {
  padding: 14px 12px;
}

.board-iframe-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: .8px;
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  margin-bottom: 10px;
}

.board-iframe-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-light);
  flex-shrink: 0;
  animation: livePulse 1.4s ease-in-out infinite;
}

.board-iframe-wrap {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface2);
  /* Aspect ratio default — sesuaikan kalau konten partner butuh rasio lain */
  aspect-ratio: 9 / 16;
}

.board-iframe-wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}

/* Desktop: aspect ratio lebih landscape */
@media (min-width: 640px) {
  .board-iframe-wrap {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 1024px) {
  .board-iframe-wrap {
    aspect-ratio: 16 / 9;
  }
}

/* Light mode */
[data-theme="light"] .board-iframe-wrap {
  border-color: var(--border);
  background: var(--surface);
}
[data-theme="light"] .board-iframe-label {
  color: var(--text3);
}

/* ── DESKTOP ── */
@media (min-width: 1024px) {
  .eksklusif-scroll-wrap {
    overflow-x: visible;
    cursor: default;
  }
  .eksklusif-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;      
    gap: 9px;
  }
  .eksklusif-card-wrap {
    width: 100%;
  }
  .eksklusif-card {
    width: 100%;
  }
}
/* ══════════════════════════════════════════════
   TESTIMONI ORDER — Compact Modern v2
   ══════════════════════════════════════════════ */
.testi-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.testi-scroll-wrap {
  flex: 1;
  overflow: hidden;                 /* marquee pakai transform, bukan scroll */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.testi-scroll {
  display: flex;
  gap: 6px;
  padding: 3px 2px 5px;
  width: max-content;
}
.testi-scroll--marquee {
  animation: testiMarquee var(--testi-duration, 24s) linear infinite;
  will-change: transform;
}
.testi-scroll--marquee.is-paused {
  animation-play-state: paused;
}
@keyframes testiMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .testi-scroll--marquee { animation: none; }
}

.testi-nav {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(144,105,233,.1);
  border: 1px solid var(--border);
  color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: manipulation;
  transition: background .2s, border-color .2s, opacity .2s, transform .15s;
}
.testi-nav svg { width: 11px; height: 11px; }
.testi-nav:hover:not(:disabled) { background: rgba(144,105,233,.22); border-color: var(--border-strong); color: var(--text); }
.testi-nav:active:not(:disabled) { transform: scale(.92); }
.testi-nav:disabled { opacity: .3; cursor: default; }

/* Wrap rainbow border — konsisten dgn game-card-wrap / eksklusif-card-wrap */
.testi-card-wrap {
  flex: 0 0 auto;
  width: 112px;
  scroll-snap-align: start;
  border-radius: 12px;
  padding: 1px;
  background: conic-gradient(from 0deg,
    rgba(144,92,201,.6), rgba(0,249,255,.3), rgba(218,105,211,.45), rgba(255,45,120,.3), rgba(144,92,233,.6)
  );
  transition: transform .18s ease;
}
.testi-card-wrap:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .testi-card-wrap:hover { transform: translateY(-2px); }
}

.testi-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--surface);
  border-radius: 11px;
  overflow: hidden;
}

/* Thumbnail bukti transfer — rasio lebih ringkas, tidak lagi memanjang ekstrem */
.testi-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface2);
}
.testi-img-bg {
  position: absolute;
  inset: -10%;
  width: 120%; height: 120%;
  object-fit: cover;
  object-position: center;
  filter: blur(16px) brightness(.55) saturate(1.3);
  transform: scale(1.1);
  display: block;
  z-index: 0;
}
.testi-img-fg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  z-index: 1;
}
.testi-verified {
  position: absolute;
  top: 5px; left: 5px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(0,212,170,.96);
  color: #04241d;
  font-size: 6.3px; font-weight: 800;
  padding: 3px 6px; border-radius: 99px;
  letter-spacing: .2px;
  font-family: 'Oswald', sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,.39);
  white-space: nowrap;
}

.testi-info {
  padding: 6px 7px 7px;
  border-top: 1px solid rgba(144,105,233,.08);
}
.testi-stars { font-size: 7px; letter-spacing: 1px; margin-bottom: 3px; line-height: 1; }
.testi-product {
  font-size: 8.8px; font-weight: 700; color: var(--text);
  font-family: Oswald, sans-serif; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 2px;
}
.testi-name { font-size: 7.9px; color: var(--cyan); font-weight: 600; opacity: .86; }

[data-theme="light"] .testi-nav { background: rgba(124,92,191,.09); border-color: rgba(124,92,191,.39); color: var(--primary); }
[data-theme="light"] .testi-nav:hover:not(:disabled) { background: rgba(124,92,191,.16); }
[data-theme="light"] .testi-verified { color: #fff; background: rgba(5,150,105,.96); }
@media (min-width: 1024px) {
  .testi-card-wrap { width: 132px; }
  .testi-nav  { width: 30px; height: 30px; }
}
/* ══════════════════════════════════════════════
   MEDIA69 PARTNER BOARD — Reference Rebuild v2
   ══════════════════════════════════════════════ */


/* ── ROTATING LIGHT SWEEP — CSS conic-gradient, no GPU thrash ── */
.board-light-sweep {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.board-light-sweep::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(144, 105, 233, 0.00) 60deg,
    rgba(144, 105, 233, 0.06) 90deg,
    rgba(103, 232, 249, 0.09) 120deg,
    rgba(144, 105, 233, 0.06) 150deg,
    rgba(144, 105, 233, 0.00) 180deg,
    transparent 360deg
  );
  animation: boardLightSweep 7s linear infinite;
  will-change: transform;
}

.media69-board::after { content: none; }

@keyframes boardLightSweep {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .board-light-sweep::before { animation: none; opacity: 0; }
  .media69-board::after { animation: none; opacity: 0; }
}


/* ── PARTNERSHIP HEADER — LOGO ── */
.board-partner-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  overflow: visible;
  padding: 2px 0 2px;
}

.board-partner-logo {
  display: block;
  width: 80%;
  max-width: 300px;
  height: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: brightness(1.15) contrast(1.08) saturate(1.1);
}

/* Text-based header logo */
.board-partner-text-logo {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  line-height: 1;
}

.bpl-left {
  background: linear-gradient(180deg, #e060c8 0%, #9069C9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bpl-right {
  background: linear-gradient(180deg, #00f9ff 0%, #67c8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.board-partner-text-x {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: rgba(200, 180, 255, .75);
  line-height: 1;
  flex-shrink: 0;
}

.board-partner-x { display: none; }

/* ── CTA ROW — 2 buttons side by side ── */
.board-cta-row {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-bottom: 6px;
}

.board-cta-btn--primary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 9px;
  background: linear-gradient(
    180deg,
    #7c5cbf 0%,
    #5e3fa3 50%,
    #3b2865 100%
  );
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .35px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid rgba(160,125,245,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 3px 8px rgba(0,0,0,.3);
  transition: transform .15s ease, opacity .15s ease;
  touch-action: manipulation;
}

.board-cta-btn--secondary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 9px;
  background: linear-gradient(
    180deg,
    #0a1f1f 0%,
    #061414 100%
  );
  color: #67e8f9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .35px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid rgba(0,249,255,.45);
  box-shadow:
    inset 0 1px 0 rgba(0,249,255,.06),
    0 3px 8px rgba(0,0,0,.3);
  transition: transform .15s ease, opacity .15s ease;
  touch-action: manipulation;
}

.board-cta-btn--primary:hover,
.board-cta-btn--secondary:hover { opacity: .88; transform: translateY(-1px); }

.board-cta-btn--primary:active,
.board-cta-btn--secondary:active { transform: translateY(1px); opacity: .75; }


/* ── INFO / ATTENTION BOX ── */
.board-info-box {
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(144,105,233,.18);
  border-radius: 8px;
  padding: 7px 8px;
  margin-bottom: 6px;
  box-sizing: border-box;
}

.board-info-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}

.board-info-icon { font-size: 11px; flex-shrink: 0; line-height: 1; }

.board-info-title {
  font-size: 10px;
  font-weight: 800;
  color: var(--cyan);
  font-family: 'Oswald', sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.board-info-text {
  font-size: 9.5px;
  color: var(--text2);
  line-height: 1.55;
  margin: 0;
}

.board-info-text strong { color: var(--text); font-weight: 700; }

/* ── STATUS FOOTER BAR ── */
.board-status-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(0,220,200,.85);
  font-family: 'Oswald', sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding-top: 5px;
}

.board-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(0,212,170,.6);
}

/* Logo gambar di status bar — gantikan teks */
.board-status-logo {
  display: block;
  width: 66%;
  max-width: 240px;
  height: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: brightness(1.15) contrast(1.08) saturate(1.1);
  margin: 0 auto;
}


/* Light mode overrides */
[data-theme="light"] .board-partner-x { color: var(--cyan); }
[data-theme="light"] .board-info-box {
  background: rgba(124,92,191,.04);
  border-color: rgba(124,92,191,.18);
}
[data-theme="light"] .board-status-bar { color: var(--primary); }
[data-theme="light"] .board-cta-btn--secondary {
  background: rgba(124,93,191,.06);
  color: var(--primary);
  border-color: rgba(124,93,191,.39);
}