/* back button floating di atas game hero banner */
.gh-back{position:absolute;top:16px;left:22px;z-index:10;
  background:rgba(6,6,14,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15);border-radius:10px;
  padding:8px 14px;color:#fff !important;margin-bottom:0;}
.gh-back:hover{background:rgba(25,231,255,.15) !important;border-color:rgba(25,231,255,.5) !important;color:var(--cyan) !important;}
@media(max-width:680px){.gh-back{top:10px;left:12px;padding:6px 11px;font-size:12.5px;}}
/* =========================================================
   N1STORE — shop flow + admin styles (extends homepage tokens)
   ========================================================= */

/* ---- view router ---- */
.view{display:none}
.view.active{display:block;animation:viewIn .35s ease}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Promo CSS/JS is lazy-loaded. Hide promo modal safely before that bundle is loaded. */
.promo-modal{display:none}
.promo-modal.show{display:flex}
.promo-modal .pm-result{display:none}
.promo-modal .pm-result.show{display:block}

body[data-view="admin"] footer,
body[data-view="checkout"] footer{display:none}
body[data-view="admin"] #hdr,
body[data-view="admin"] .nav-menu-wrap{display:none!important}
body[data-view="admin"] #view-admin{min-height:100vh}
body[data-view="admin"] .adm-gate{min-height:100vh}
body[data-view="admin"] .adm-side{top:0;height:100vh}

/* ── Finance tab ── */
.keu-period{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.keu-period-btn{padding:7px 18px;border-radius:50px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--muted);font-size:13px;font-family:inherit;cursor:pointer;transition:.18s}
.keu-period-btn:hover{border-color:rgba(25,231,255,.4);color:var(--cyan)}
.keu-period-btn.active{background:rgba(25,231,255,.12);border-color:rgba(25,231,255,.5);color:var(--cyan);font-weight:700}
.keu-chart-wrap{padding:20px 20px 10px;overflow-x:auto}
.keu-chart{display:flex;align-items:flex-end;gap:6px;min-height:140px;padding-bottom:24px;position:relative;border-bottom:1px solid var(--border-2)}
.keu-bar-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:36px;max-width:70px}
.keu-bar{width:100%;border-radius:5px 5px 0 0;background:linear-gradient(to top,rgba(25,231,255,.25),rgba(25,231,255,.7));transition:height .4s ease;position:relative;min-height:4px;cursor:default}
.keu-bar:hover{background:linear-gradient(to top,rgba(25,231,255,.45),var(--cyan))}
.keu-bar-val{font-family:'Chakra Petch';font-size:9px;color:var(--muted);white-space:nowrap}
.keu-bar-lbl{font-size:10px;color:var(--muted);white-space:nowrap;text-align:center;margin-top:6px}
.keu-empty-chart{text-align:center;padding:40px;color:var(--muted);font-size:13px}
.keu-top-row{display:flex;align-items:center;gap:14px;padding:13px 20px;border-top:1px solid var(--border-2);font-size:13.5px}
.keu-top-row:first-child{border-top:none}
.keu-rank{font-family:'Chakra Petch';font-size:11px;color:var(--muted);width:20px;text-align:center;flex-shrink:0}
.keu-top-rev{font-family:'Chakra Petch';font-size:13px;color:var(--gold);margin-left:auto;text-align:right}
.keu-top-cnt{font-size:11.5px;color:var(--muted);margin-left:10px;min-width:48px;text-align:right}
.keu-2col{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ---- generic page shell ---- */
.page{max-width:var(--maxw);margin:0 auto;padding:26px 22px 40px}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:20px;flex-wrap:wrap}
.crumb a{color:var(--muted);transition:.2s;cursor:pointer}
.crumb a:hover{color:var(--cyan)}
.crumb .sep{opacity:.5}
.crumb .now{color:var(--text)}
.page-title{font-family:'Chakra Petch';font-weight:700;font-size:26px;margin-bottom:4px}
.page-sub{font-size:13.5px;color:var(--muted)}

/* ============ DETAIL ============ */
/* ============ GAME HERO — banner + cover (Ourastore-style) ============ */
.game-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:-26px;margin-bottom:26px;overflow:hidden}
.gh-inner{max-width:var(--maxw);margin:0 auto;padding:0 22px;position:relative;height:100%}
/* banner */
.gh-banner{position:relative;height:330px;overflow:hidden}
.gh-bg{position:absolute;inset:0;z-index:0}
.gh-banner::before{content:"";position:absolute;inset:0;z-index:1;opacity:.16;mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(125deg,rgba(255,255,255,.7) 0 2px,transparent 2px 30px)}
.gh-banner::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(to bottom,transparent 50%,rgba(6,6,14,.5) 78%,rgba(6,6,14,.92))}
.gh-banner .gh-inner{z-index:3}
.gh-art{position:absolute;top:46%;left:16%;transform:translate(-50%,-50%);z-index:1;
  font-family:'Chakra Petch';font-weight:700;font-size:158px;line-height:.8;letter-spacing:-.04em;
  color:rgba(255,255,255,.92);text-shadow:0 10px 44px rgba(0,0,0,.45),0 0 70px rgba(255,255,255,.22)}
.gh-spark{position:absolute;z-index:1;width:26px;height:26px;background:linear-gradient(135deg,#fff,var(--cyan));
  clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%);opacity:.8;filter:drop-shadow(0 0 12px #fff)}
/* gold promo plaque */
.gh-promo{position:absolute;right:22px;top:50%;z-index:3;transform:translateY(-52%) rotate(-2.5deg);text-align:center;
  padding:18px 30px 14px;border-radius:14px;
  background:linear-gradient(160deg,#fff3d2,#ffd067 55%,#ffb43d);
  box-shadow:0 16px 44px -10px rgba(0,0,0,.55),inset 0 0 0 3px rgba(255,255,255,.55),inset 0 0 0 5px rgba(170,110,0,.25)}
.gh-promo .l1{font-family:'Chakra Petch';font-weight:700;font-size:23px;color:#9a5b00;letter-spacing:.02em;line-height:1;white-space:nowrap;
  -webkit-text-stroke:.5px rgba(120,70,0,.3)}
.gh-promo .l2{font-family:'Chakra Petch';font-weight:700;font-size:33px;color:#2a1800;line-height:.98;margin-top:1px;white-space:nowrap;
  text-shadow:0 2px 0 rgba(255,255,255,.45)}
.gh-promo .l3{margin-top:11px;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:#2a1800;
  display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:50px;background:rgba(40,24,0,.14)}
.gh-promo .l3 b{color:#7a1500}
/* dark bar with overlapping cover */
.gh-bar{position:relative;background:linear-gradient(100deg,#0b0b18,#13131f);min-height:130px}
.gh-bar .gh-inner{display:flex;flex-direction:column;justify-content:center;padding:22px 22px 24px 220px;min-height:130px}
.gh-bar::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px)}
.gh-cover{position:absolute;left:22px;bottom:22px;width:168px;height:168px;border-radius:15px;overflow:hidden;z-index:4;
  border:2px solid rgba(255,255,255,.16);box-shadow:0 20px 44px -12px rgba(0,0,0,.85)}
.gh-cover .ce{position:absolute;inset:0;display:grid;place-items:center;font-family:'Chakra Petch';font-weight:700;
  font-size:56px;color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.55);letter-spacing:-.02em}
.gh-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(255,255,255,.22),transparent 45%)}
.gh-flag{position:absolute;top:8px;left:8px;z-index:1;display:inline-flex;align-items:center;gap:5px;
  font-size:9px;font-weight:700;letter-spacing:.04em;color:#fff;padding:3px 8px;border-radius:50px;
  background:rgba(8,8,18,.6);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.18)}
.gh-flag .fdot{width:11px;height:8px;border-radius:2px;background:linear-gradient(#ff2e2e 50%,#fff 50%)}
.gh-meta{position:relative;z-index:1}
.gh-meta h1{font-family:'Chakra Petch';font-weight:700;font-size:30px;line-height:1.05;text-transform:uppercase;letter-spacing:.02em}
.gh-meta .pub{color:var(--muted);font-size:14px;margin-top:3px}
.gh-feats{display:flex;gap:24px;margin-top:15px;flex-wrap:wrap}
.gh-feat{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#dfe3ff}
.gh-feat .fi{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--cyan)}
.gh-feat:nth-child(2) .fi{color:var(--purple)}
.gh-feat:nth-child(3) .fi{color:#4affa0}

.detail-grid{display:grid;grid-template-columns:1fr 350px;gap:22px;align-items:start}
.step{background:var(--glass);border:1px solid var(--border);border-radius:18px;padding:22px;margin-bottom:18px;position:relative}
.step-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.step-num{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;font-family:'Chakra Petch';font-weight:700;font-size:15px;
  color:#06060e;background:linear-gradient(135deg,var(--cyan),var(--purple));box-shadow:0 0 16px -4px rgba(25,231,255,.6)}
.step-head h3{font-family:'Chakra Petch';font-weight:600;font-size:17px}
.step-head .hint{font-size:12px;color:var(--muted);margin-top:1px}

/* fields */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:12.5px;font-weight:600;color:#c3c8ec}
.field input,.field select{height:46px;padding:0 14px;border-radius:11px;background:rgba(8,8,18,.6);
  border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:14.5px;outline:none;transition:.2s}
.field input:focus,.field select:focus{border-color:rgba(25,231,255,.5);box-shadow:0 0 18px -6px rgba(25,231,255,.4)}
.field input::placeholder{color:#6a6f95}
/* Tanpa reset appearance, <select> dirender sebagai kontrol putih bawaan sistem
   dan terlihat asing di sebelah kotak isian gelap. Panah digambar sendiri. */
.field select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238b90b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
/* Opsi dirender oleh sistem operasi; beri warna gelap agar tidak putih menyala. */
.field select option{background:#12132b;color:var(--text)}
/* Belum memilih apa pun: tampil seredup placeholder input di sebelahnya. */
.field select:invalid,.field select option[value=""]{color:#6a6f95}
.field .note{font-size:11.5px;color:var(--muted)}

/* denominations */
.denoms{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.denom-cat-title{grid-column:1/-1;font-family:'Chakra Petch';font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:#aab0d6;margin:10px 0 -2px;padding-bottom:8px;border-bottom:1px solid var(--border-2)}
.denom-cat-title:first-child{margin-top:0}
/* Filter kategori nominal di halaman detail (memakai gaya chip .tab yang sama) */
.denom-cat-tabs{margin-bottom:16px}
.denom-cat-tabs .tab{display:inline-flex;align-items:center;gap:7px}
/* Ikon kategori: di judul grup & di dalam chip filter */
.dct-icon{width:18px;height:18px;object-fit:contain;flex-shrink:0;vertical-align:middle;margin-right:7px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.denom-cat-tabs .tab .dct-icon{margin-right:0;width:16px;height:16px}
.denom-cat-title{display:flex;align-items:center}
/* Admin: baris kategori di modal Kelola Kategori */
.dcat-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-2)}
.dcat-row:last-child{border-bottom:none}
.dcat-row.dragging{opacity:.5}
.dcat-row.drag-over{outline:2px dashed rgba(25,231,255,.5);outline-offset:2px}
.dcat-row.uploading{opacity:.6;pointer-events:none}
.dcat-icon{width:42px;height:42px;flex-shrink:0;border-radius:10px;border:1px dashed var(--border);background:rgba(10,10,22,.55);display:grid;place-items:center;cursor:pointer;overflow:hidden;transition:.15s}
.dcat-icon:hover{border-color:rgba(25,231,255,.5)}
.dcat-icon img{width:100%;height:100%;object-fit:contain}
.dcat-icon-empty{font-size:18px;color:var(--muted);line-height:1}
.dcat-name{flex:1;min-width:0}
/* Admin: kategori nominal (strip + chip + tag + picker) */
.denom-cat-strip{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 18px;border-bottom:1px solid var(--border-2);background:rgba(120,140,255,.03)}
.dcs-label{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.dcs-list{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.dcs-empty{font-size:11.5px;color:var(--muted);font-style:italic}
.denom-cat-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:8px;background:rgba(25,231,255,.08);border:1px solid rgba(25,231,255,.28);font-size:11.5px;cursor:pointer;color:inherit;font-family:inherit;transition:.15s}
.denom-cat-chip:hover{background:rgba(25,231,255,.16);border-color:rgba(25,231,255,.5)}
.denom-cat-chip.active{background:rgba(25,231,255,.22);border-color:#19e7ff;box-shadow:0 0 12px -4px rgba(25,231,255,.6)}
.dcc-count{font-family:'Chakra Petch';font-size:10.5px;color:var(--muted);background:rgba(0,0,0,.3);border-radius:20px;padding:1px 6px}
.denom-cat-chip.active .dcc-count{color:#cffaff}
.dcs-primary{color:#19e7ff;border-color:rgba(25,231,255,.45)!important;border-style:solid!important}
.dcs-primary:hover{background:rgba(25,231,255,.12)}
.denom-filter-note{margin-left:auto;font-size:11.5px;color:var(--muted)}
.denom-filter-note a{color:#19e7ff;text-decoration:none}
.denom-filter-note a:hover{text-decoration:underline}
.denom-cat-chip.dragging{opacity:.5}.denom-cat-chip.drag-over{outline:2px dashed rgba(25,231,255,.5)}
.dcc-drag{cursor:grab;color:var(--muted);font-size:11px;user-select:none}
.dcc-name{color:#19e7ff;font-weight:600}
.dcc-btn{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;line-height:1;padding:2px 3px;border-radius:4px}
.dcc-btn:hover{background:rgba(255,255,255,.08);color:var(--text)}
.dcc-del:hover{color:#ff6b6b}
.dcs-add{border:1px dashed var(--border);background:transparent;color:var(--muted);cursor:pointer;font-size:11.5px;padding:5px 10px;border-radius:8px;white-space:nowrap}
.dcs-add:hover{color:#19e7ff;border-color:rgba(25,231,255,.4)}
.dr-cat-tag{font-size:10px;font-weight:600;color:#19e7ff;background:rgba(25,231,255,.1);border:1px solid rgba(25,231,255,.25);border-radius:5px;padding:1px 6px}
.denom-cat-box{display:flex;flex-wrap:wrap;gap:8px}
.denom-cat-chk{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:rgba(10,10,22,.5);cursor:pointer}
.denom-cat-chk input{accent-color:#19e7ff}
/* Admin: pilih banyak nominal → hapus massal */
.denom-sel-chk{width:16px;height:16px;flex-shrink:0;accent-color:#ff6b6b;cursor:pointer}
.denom-selall-bar{padding:9px 18px;border-top:1px solid var(--border-2);background:rgba(255,107,107,.04);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.denom-selall-lbl{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);cursor:pointer}
.denom-selall-lbl input{width:15px;height:15px;accent-color:#ff6b6b;cursor:pointer}
.denom-bulk-bar{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);z-index:1200;display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:14px;background:rgba(18,18,32,.97);border:1px solid rgba(255,107,107,.35);box-shadow:0 12px 40px -10px rgba(0,0,0,.7);transition:transform .22s cubic-bezier(.2,.8,.2,1);backdrop-filter:blur(8px)}
.denom-bulk-bar.show{transform:translate(-50%,0)}
.denom-bulk-bar .dbb-count{font-size:13px;color:var(--text);white-space:nowrap}
.denom-bulk-bar .dbb-count b{color:#ff8a8a}
.btn-danger-solid{background:#e5484d;border:1px solid #e5484d;color:#fff;font-weight:600;border-radius:9px;cursor:pointer;white-space:nowrap}
.btn-danger-solid:hover{background:#f2565b}
.denom{position:relative;border-radius:13px;padding:14px;cursor:pointer;background:rgba(8,8,18,.45);
  border:1px solid var(--border);transition:.18s;display:flex;flex-direction:column;gap:8px;min-height:96px}
.denom:hover{border-color:rgba(25,231,255,.45);transform:translateY(-2px)}
.denom.sel{border-color:var(--cyan);background:rgba(25,231,255,.07);box-shadow:0 0 22px -8px rgba(25,231,255,.55)}
.denom.sel::after{content:"✓";position:absolute;top:9px;right:10px;width:20px;height:20px;border-radius:50%;
  background:var(--cyan);color:#06060e;font-size:12px;font-weight:800;display:grid;place-items:center}
.denom .amt{display:flex;align-items:center;gap:7px;font-family:'Chakra Petch';font-weight:600;font-size:15px}
.denom .amt .di{width:20px;height:20px;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.denom .price{font-size:14px;font-weight:700;color:var(--gold);margin-top:auto}
.denom .bonus{position:absolute;top:0;left:0;font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:3px 8px;
  border-radius:13px 0 13px 0;background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff}

/* payments */
.pay-group{margin-bottom:16px}
.pay-group h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-weight:700}
.pay-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;cursor:pointer;
  background:rgba(8,8,18,.45);border:1px solid var(--border);transition:.18s;position:relative}
.pay-opt:hover{border-color:rgba(177,75,255,.5)}
.pay-opt.sel{border-color:var(--purple);background:rgba(177,75,255,.08);box-shadow:0 0 20px -8px rgba(177,75,255,.55)}
.pay-logo{width:52px;height:34px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;font-family:'Chakra Petch';
  font-weight:700;font-size:11px;color:#0a0a16;letter-spacing:-.02em}
.pay-logo.has-logo{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.pay-logo img{width:100%;height:100%;object-fit:contain;padding:4px 5px;box-sizing:border-box;display:block}
.pay-opt .pn{font-size:13.5px;font-weight:600;flex:1}
.pay-opt .pf{font-size:11px;color:var(--muted)}
.pay-fee-info{display:flex;align-items:flex-start;gap:9px;margin-top:6px;padding:11px 13px;border-radius:11px;background:rgba(120,140,255,.06);border:1px solid rgba(120,140,255,.18);font-size:12px;line-height:1.45;color:#aab0d6}
.pay-fee-info svg{flex-shrink:0;margin-top:1px;color:#8fa0ff}
.pay-fee-info b{color:#d7dcff;font-weight:600}
.pay-opt .reco{position:absolute;top:-8px;right:10px;font-size:9px;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:50px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#23170a}

/* summary */
/* Pembungkus kolom kanan MEREGANG setinggi baris grid. `.detail-grid` memakai
   align-items:start, jadi tanpa pembungkus ini sel gridnya hanya setinggi kartu
   ringkasan — dan sticky tidak punya jarak sedikit pun untuk bergeser. */
.summary-col{align-self:stretch}
.summary{position:sticky;top:140px;background:var(--glass);border:1px solid var(--border);border-radius:18px;overflow:hidden}
.summary-head{padding:16px 18px;border-bottom:1px solid var(--border-2);font-family:'Chakra Petch';font-weight:600;font-size:15px;display:flex;align-items:center;gap:9px}
.summary-body{padding:18px}
.sum-game{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px dashed var(--border)}
.sum-game .sg-thumb{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font-family:'Chakra Petch';font-weight:700;font-size:16px;color:#fff}
.sum-game h5{font-size:14px;font-weight:600}.sum-game span{font-size:11.5px;color:var(--muted)}
.sum-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:6px 0;color:#c3c8ec}
.sum-row .k{color:var(--muted)}
.sum-row .v{font-weight:600;text-align:right}
.sum-row.muted .v{color:#8b90b8;font-weight:500}
.sum-total{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.sum-total .k{font-size:13px;color:var(--muted)}
.sum-total .v{font-family:'Chakra Petch';font-weight:700;font-size:23px;color:var(--gold);text-shadow:0 0 16px rgba(255,201,57,.35)}
.btn-buy{width:100%;margin-top:16px;justify-content:center;padding:15px;font-size:15.5px;border-radius:13px}
.btn-buy:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.3);box-shadow:none}
.summary .secure{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;color:var(--muted);margin-top:12px}

/* empty placeholder text in summary */
.sum-empty{font-size:12.5px;color:#6a6f95;padding:6px 0}
.sum-note{font-size:11.5px;color:#8a8fb5;padding:0 0 6px;line-height:1.35}

/* ============ CHECKOUT ============ */
.checkout-grid{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start}
.inv-card{background:var(--glass);border:1px solid var(--border);border-radius:18px;padding:22px}
.inv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--border-2);padding-bottom:16px;margin-bottom:16px}
.inv-id{font-family:'Chakra Petch';font-weight:700;font-size:18px}
.inv-id span{display:block;font-size:11px;color:var(--muted);font-weight:400;font-family:'Sora';margin-bottom:2px}
.badge-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:7px 13px;border-radius:50px}
.bs-wait{color:var(--gold);background:rgba(255,201,57,.1);border:1px solid rgba(255,201,57,.4)}
.bs-proc{color:var(--cyan);background:rgba(25,231,255,.1);border:1px solid rgba(25,231,255,.4)}
.bs-done{color:#4affa0;background:rgba(74,255,160,.1);border:1px solid rgba(74,255,160,.4)}
.inv-rows .sum-row{font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--border-2)}
.inv-rows .sum-row:last-child{border:none}
.inv-grand{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:14px;border-radius:12px;background:rgba(255,201,57,.07);border:1px solid rgba(255,201,57,.25)}
.inv-grand .v{font-family:'Chakra Petch';font-weight:700;font-size:22px;color:var(--gold)}

/* QRIS pay box */
.pay-box{background:var(--glass);border:1px solid var(--border);border-radius:18px;padding:22px;text-align:center}
.pay-box h3{font-family:'Chakra Petch';font-weight:600;font-size:16px;margin-bottom:4px}
.pay-box .pb-sub{font-size:12.5px;color:var(--muted);margin-bottom:16px}
.qr{width:210px;height:210px;margin:0 auto;border-radius:14px;background:#fff;padding:12px;position:relative;box-shadow:0 0 30px -8px rgba(25,231,255,.5)}
.qr canvas{width:100%;height:100%;image-rendering:pixelated;border-radius:4px}
.qr-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:9px;
  background:linear-gradient(135deg,var(--cyan),var(--purple));display:grid;place-items:center;color:#fff;font-family:'Chakra Petch';font-weight:700;font-size:13px;border:3px solid #fff}
.countdown{margin-top:16px;font-size:13px;color:var(--muted)}
.countdown b{font-family:'Chakra Petch';font-size:22px;color:var(--pink);text-shadow:0 0 14px rgba(255,52,210,.45);display:inline-block;margin-top:4px}
.pay-amount{font-family:'Chakra Petch';font-weight:700;font-size:26px;color:var(--gold);margin:6px 0 2px}
.pay-methods-mini{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:14px}
.pay-box .btn{width:100%;justify-content:center;margin-top:18px;padding:14px}

/* processing / success */
.proc-screen{text-align:center;padding:40px 20px}
.spinner{width:70px;height:70px;margin:0 auto 22px;border-radius:50%;border:5px solid rgba(25,231,255,.15);border-top-color:var(--cyan);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.success-check{width:92px;height:92px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(74,255,160,.25),transparent 70%);position:relative}
.success-check svg{width:56px;height:56px;color:#4affa0;filter:drop-shadow(0 0 14px rgba(74,255,160,.7))}
.success-check::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(74,255,160,.4);animation:ping 1.6s ease-out infinite}
@keyframes ping{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.proc-screen h2{font-family:'Chakra Petch';font-weight:700;font-size:24px}
.proc-screen p{color:var(--muted);font-size:14px;margin-top:8px;max-width:420px;margin-inline:auto}
.proc-actions{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap}

/* ============ CEK TRANSAKSI ============ */
.cek-wrap{max-width:660px;margin:0 auto}
.cek-search{display:flex;gap:12px;margin-bottom:24px}
.cek-search input{flex:1;height:52px;padding:0 18px;border-radius:13px;background:rgba(8,8,18,.6);border:1px solid var(--border);color:var(--text);font-size:15px;outline:none;font-family:inherit}
.cek-search input:focus{border-color:rgba(25,231,255,.5);box-shadow:0 0 20px -6px rgba(25,231,255,.4)}
.cek-search button{padding:0 26px;border-radius:13px}
.cek-result{background:var(--glass);border:1px solid var(--border);border-radius:18px;padding:24px}
.cek-empty{text-align:center;padding:40px 20px;color:var(--muted)}
.cek-empty .ce-ic{font-size:42px;margin-bottom:12px;opacity:.7}
.timeline{margin-top:22px;position:relative;padding-left:8px}
.tl-step{display:flex;gap:16px;position:relative;padding-bottom:26px}
.tl-step:last-child{padding-bottom:0}
.tl-step::before{content:"";position:absolute;left:15px;top:32px;bottom:-2px;width:2px;background:var(--border)}
.tl-step:last-child::before{display:none}
.tl-step.done::before{background:#4affa0}
.tl-dot{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;z-index:1;
  background:rgba(8,8,18,.8);border:2px solid var(--border);color:var(--muted)}
.tl-step.done .tl-dot{border-color:#4affa0;color:#4affa0;background:rgba(74,255,160,.12);box-shadow:0 0 14px -4px rgba(74,255,160,.6)}
.tl-step.active .tl-dot{border-color:var(--cyan);color:var(--cyan);background:rgba(25,231,255,.12);box-shadow:0 0 16px -3px rgba(25,231,255,.7);animation:pulseDot 1.4s ease infinite}
@keyframes pulseDot{50%{box-shadow:0 0 24px -2px rgba(25,231,255,.9)}}
.tl-body h5{font-size:14.5px;font-weight:600}
.tl-body span{font-size:12px;color:var(--muted)}
.tl-step.active .tl-body h5{color:var(--cyan)}

/* ============ ADMIN ============ */
/* Desktop: hamburger/overlay/close hidden */
.adm-hamburger{display:none}
.adm-overlay{display:none}
.adm-side-close{display:none}
.admin{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 121px)}
/* overflow-y di elemen sticky ini sendiri aman (tidak mematikan sticky-nya),
   dan mencegah menu terpotong pada layar yang pendek. */
.adm-side{background:rgba(6,6,14,.7);border-right:1px solid var(--border-2);padding:22px 16px;position:sticky;top:121px;height:calc(100vh - 121px);overflow-y:auto;overscroll-behavior:contain;
  /* Batang gulir disembunyikan — bawaan peramban tampil putih terang dan
     merusak sisi gelap panel. Gulirannya sendiri TIDAK dimatikan, jadi menu
     yang panjang tetap bisa dijangkau lewat roda tetikus maupun sentuhan. */
  scrollbar-width:none;-ms-overflow-style:none}
.adm-side::-webkit-scrollbar{width:0;height:0}
.adm-side .as-logo{display:flex;align-items:center;gap:9px;padding:0 6px 18px;border-bottom:1px solid var(--border-2);margin-bottom:14px}
.adm-side .as-logo .badge-admin{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--gold);border:1px solid rgba(255,201,57,.4);padding:2px 7px;border-radius:50px}
.adm-menu a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;transition:.18s;margin-bottom:3px}
.adm-menu a:hover{background:rgba(120,140,255,.07);color:var(--text)}
.adm-menu a.active{background:linear-gradient(135deg,rgba(25,231,255,.14),rgba(177,75,255,.14));color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}
.adm-menu a.active svg{color:var(--cyan)}
.adm-menu .grp{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#5a5f85;padding:14px 13px 7px;font-weight:700}
.adm-main{padding:26px 30px;min-width:0}
.adm-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.adm-top h1{font-family:'Chakra Petch';font-weight:700;font-size:23px}
.adm-top .sub{font-size:13px;color:var(--muted);margin-top:2px}
.adm-user{display:flex;align-items:center;gap:10px}
.adm-ava{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--purple),var(--pink));display:grid;place-items:center;font-weight:700;color:#fff}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat{background:var(--glass);border:1px solid var(--border);border-radius:15px;padding:18px;position:relative;overflow:hidden}
.stat .si{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:12px;background:rgba(255,255,255,.04);border:1px solid var(--border)}
.stat .sv{font-family:'Chakra Petch';font-weight:700;font-size:24px}
.stat .sl{font-size:12.5px;color:var(--muted);margin-top:2px}
.stat .sd{font-size:11.5px;font-weight:600;margin-top:8px;display:inline-flex;align-items:center;gap:4px}
.sd.up{color:#4affa0}.sd.down{color:#ff6b8b}

.panel{background:var(--glass);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:22px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--border-2);flex-wrap:wrap}
.panel-head h3{font-family:'Chakra Petch';font-weight:600;font-size:16px}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;padding:13px 20px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;background:rgba(255,255,255,.02)}
.tbl td{padding:13px 20px;border-top:1px solid var(--border-2);color:#d3d7f4}
.tbl tr:hover td{background:rgba(120,140,255,.04)}
.tbl .gname{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--text)}
.tbl .gname .gt2{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-family:'Chakra Petch';font-weight:700;font-size:12px;color:#fff;flex-shrink:0}
.gt2.has-photo{overflow:hidden}
.gt2.has-photo>span{display:none}
.gt2.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:50px}
.pill.ok{color:#4affa0;background:rgba(74,255,160,.1);border:1px solid rgba(74,255,160,.3)}
.pill.proc{color:var(--cyan);background:rgba(25,231,255,.1);border:1px solid rgba(25,231,255,.3)}
.pill.wait{color:var(--gold);background:rgba(255,201,57,.1);border:1px solid rgba(255,201,57,.3)}
.pill.off{color:#8b90b8;background:rgba(139,144,184,.1);border:1px solid var(--border)}
.adm-select{height:32px;padding:0 10px;border-radius:8px;background:rgba(8,8,18,.6);border:1px solid var(--border);color:var(--text);font-size:12.5px;font-family:inherit;cursor:pointer}
.tswitch{width:42px;height:24px;border-radius:50px;background:rgba(139,144,184,.25);border:1px solid var(--border);position:relative;cursor:pointer;transition:.2s;flex-shrink:0}
.tswitch.on{background:linear-gradient(135deg,var(--cyan),var(--purple))}
.tswitch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
.tswitch.on::after{left:20px}
.adm-tab{display:none}
.adm-tab.active{display:block}
.mini-edit{background:none;border:1px solid var(--border);color:var(--muted);width:30px;height:30px;border-radius:8px;cursor:pointer;display:inline-grid;place-items:center;transition:.18s}
.mini-edit:hover{border-color:var(--cyan);color:var(--cyan)}

/* promo banner admin cards */
.promo-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:20px}
.promo-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:rgba(8,8,18,.4)}
.promo-card .pc-img{height:96px;display:flex;align-items:center;padding:0 18px;font-family:'Chakra Petch';font-weight:700;font-size:20px;color:#fff;position:relative}
.promo-card .pc-body{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.promo-card .pc-body h5{font-size:13.5px}
.promo-card .pc-body span{font-size:11.5px;color:var(--muted)}

/* mini bar chart */
.chart{display:flex;align-items:flex-end;gap:10px;height:140px;padding:20px}
.bar{flex:1;border-radius:7px 7px 0 0;background:linear-gradient(180deg,var(--cyan),rgba(177,75,255,.6));position:relative;min-height:8px;transition:.3s}
.bar:hover{filter:brightness(1.2)}
.bar span{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:10.5px;color:var(--muted)}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);z-index:200;
  background:rgba(12,14,28,.95);border:1px solid var(--border);border-radius:13px;padding:14px 20px;display:flex;align-items:center;gap:11px;
  font-size:14px;font-weight:500;box-shadow:0 18px 50px -16px rgba(0,0,0,.8);transition:.4s cubic-bezier(.2,.9,.3,1);backdrop-filter:blur(14px)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast .ti{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;background:rgba(74,255,160,.14);color:#4affa0}

.btn-back{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:.2s;margin-bottom:16px;background:none;border:none;font-family:inherit}
.btn-back:hover{color:var(--cyan)}


/* rating card */
.rating-card{display:flex;align-items:center;gap:16px;background:var(--glass);border:1px solid var(--border);border-radius:18px;padding:18px;margin-bottom:18px;position:relative;overflow:hidden}
.rating-card .rc-score{text-align:center;flex-shrink:0}
.rc-num{font-family:'Chakra Petch';font-weight:700;font-size:34px;line-height:1;color:#fff;text-shadow:0 0 18px rgba(255,201,57,.4)}
.rc-stars{color:var(--gold);font-size:14px;letter-spacing:2px;margin-top:4px;text-shadow:0 0 12px rgba(255,201,57,.5)}
.rating-card .rc-meta{min-width:0}
.rating-card .rc-meta h5{font-family:'Chakra Petch';font-weight:600;font-size:15px;margin-bottom:3px}
.rating-card .rc-meta span{font-size:12.5px;color:var(--muted)}
.rating-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--gold),var(--gold2));box-shadow:0 0 16px -2px rgba(255,201,57,.7)}

/* ═══════ ADMIN PANEL — EXTENDED ═══════ */

/* Login gate */
.adm-gate{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 121px);padding:40px 20px;animation:viewFadeIn .3s ease}
.ag-card{background:var(--glass);border:1px solid var(--border);border-radius:22px;padding:48px 40px;max-width:420px;width:100%;text-align:center}
.ag-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px}
.ag-card h2{font-family:'Chakra Petch';font-size:22px;font-weight:700;margin-bottom:8px}
.ag-card p{font-size:13.5px;color:var(--muted);margin-bottom:26px}
.ag-field{display:flex;gap:10px}
.ag-field input{flex:1;background:rgba(10,10,22,.7);border:1px solid var(--border);border-radius:11px;padding:12px 14px;color:var(--text);font-family:inherit;font-size:14px;outline:none;transition:.2s}
.ag-field input:focus{border-color:rgba(25,231,255,.5);box-shadow:0 0 0 3px rgba(25,231,255,.07)}
.ag-err{font-size:12.5px;color:#ff6b6b;min-height:18px;font-weight:500;text-align:center}
.ag-card .adm-form-group{margin-bottom:14px}
.ag-card .adm-form-group label{color:var(--muted)}
#adm-login-btn:disabled{opacity:.6;cursor:not-allowed}

/* Adm top-right */
.adm-top-r{display:flex;align-items:center;gap:12px}

/* Stat grid 6-col */
.stat-grid-6{grid-template-columns:repeat(6,1fr)}

/* Pill fail */
.pill.fail{color:#ff6b6b;background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.3)}

/* Timeline + note untuk transaksi gagal */
.tl-step.fail::before{background:#ff6b6b}
.tl-step.fail .tl-dot{border-color:#ff6b6b;color:#ff6b6b;background:rgba(255,107,107,.12);box-shadow:0 0 14px -4px rgba(255,107,107,.6)}
.tl-step.fail .tl-body h5{color:#ff6b6b}
.cek-failnote{margin-top:14px;padding:11px 14px;border-radius:10px;font-size:12.5px;line-height:1.5;
  color:#ff9b9b;background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.28)}

/* ── Midtrans Snap Embed (halaman pembayaran in-site) ── */
.snap-head{text-align:center;margin-bottom:6px}
.snap-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.3px;
  color:#4affa0;background:rgba(74,255,160,.1);border:1px solid rgba(74,255,160,.28);padding:5px 12px;border-radius:50px;margin-bottom:12px}
.snap-title{font-size:20px;font-weight:800;margin-bottom:6px;background:linear-gradient(90deg,var(--cyan),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.snap-count{display:inline-block;margin:14px auto 0;padding:8px 16px;border-radius:12px;font-size:12.5px;color:var(--muted);
  background:rgba(255,201,57,.08);border:1px solid rgba(255,201,57,.3)}
.snap-count b{color:var(--gold);font-family:'Sora';font-size:15px}
/* Pembayaran inline (snap.embed) — menempel di halaman, dgn overlay loading
   supaya tidak pernah tampak kotak hitam kosong. */
.snap-frame{position:relative;margin-top:18px;min-height:520px;border-radius:16px;overflow:visible;
  background:rgba(8,8,18,.5);border:1px solid var(--border);box-shadow:0 18px 50px -20px rgba(0,0,0,.6)}
.snap-embed{width:100%;max-width:100%;height:auto}
/* iframe Midtrans kadang punya min-width bawaan yang melebihi layar HP -> paksa muat */
.snap-embed iframe{width:100%!important;max-width:100%!important;min-width:0!important;height:auto;border:0;display:block;border-radius:14px;box-sizing:border-box}
.snap-loading{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:24px;text-align:center;color:var(--muted);font-size:13px;background:rgba(8,8,18,.75)}
.snap-loading .spinner{width:44px;height:44px;border-width:4px;margin:0}
@media(max-width:640px){
  /* Halaman pembayaran di HP: pastikan semua muat & tidak bisa digeser horizontal */
  #view-checkout .page{overflow-x:hidden;max-width:100%;padding-left:8px;padding-right:8px}
  /* minmax(0,1fr) mencegah "grid blowout": tanpa ini kolom ikut melebar mengikuti
     min-content (nomor invoice / User ID yang panjang tanpa spasi) sehingga kartu
     meluber ke kanan dan terlihat tidak simetris. */
  #view-checkout .checkout-grid{grid-template-columns:minmax(0,1fr);gap:14px;width:100%;max-width:100%;margin:0}
  #view-checkout .inv-card,#view-checkout .pay-box{box-sizing:border-box;width:100%;max-width:100%;min-width:0;padding:16px 12px;margin:0}
  /* Teks panjang tanpa spasi boleh pecah baris, jadi tidak memaksa lebar kartu */
  #view-checkout .inv-id,#view-checkout .sum-row .v,#view-checkout .sum-row .k{overflow-wrap:anywhere;word-break:break-word;min-width:0}
  #view-checkout .sum-row{gap:10px}
  #view-checkout .inv-top{flex-wrap:wrap;gap:10px}
  /* Frame melebar penuh (batalkan padding pay-box 12px) supaya embed Midtrans
     dapat lebar maksimum -> kontennya muat tanpa terpotong maupun mepet. */
  .snap-frame{min-height:420px;margin:14px -12px 0;border-radius:10px;overflow:visible;
    width:auto;max-width:none}
  .snap-embed{min-height:420px;max-width:100%}
  .snap-embed iframe{width:100%!important;max-width:100%!important;min-width:0!important}
  .snap-cta{padding:24px 16px}
  .snap-title{font-size:18px}
}

.snap-cta{margin-top:18px;padding:34px 22px;border-radius:16px;text-align:center;
  background:rgba(8,8,18,.5);border:1px solid var(--border);box-shadow:0 18px 50px -20px rgba(0,0,0,.6)}
.snap-cta-ic{margin:0 auto 14px;min-height:46px;display:flex;align-items:center;justify-content:center;font-size:38px;line-height:1}
.snap-cta-ic .spinner{width:44px;height:44px;border-width:4px;margin:0}
.snap-cta-text{color:var(--muted);font-size:13px;margin-bottom:16px;line-height:1.55}
.snap-cta .btn{width:100%;justify-content:center;margin-top:0}
.snap-cta .btn-ghost{margin-top:10px}
.snap-secure{margin-top:14px;justify-content:center}
/* Sedikit lebarkan kolom pembayaran saat Snap aktif (desktop) */
@media(min-width:769px){.checkout-grid.snap-active{grid-template-columns:1fr 440px}}

/* Aksi baris transaksi: tombol sejajar horizontal, tidak menumpuk */
.tx-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.tx-actions .btn-icon{flex:none}
.btn-icon-danger{color:#ff6b6b;border-color:rgba(255,107,107,.3)}
.btn-icon-danger:hover{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.55)}

/* Promo scope picker (kategori & game) di panel admin */
.promo-chk-box{display:flex;flex-wrap:wrap;gap:8px;max-height:170px;overflow-y:auto;padding:2px}
.promo-chk{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;padding:7px 12px;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--border);color:var(--text);user-select:none}
.promo-chk:hover{border-color:var(--cyan)}
.promo-chk input{accent-color:var(--cyan);cursor:pointer;margin:0}

/* Banner promo full-bleed (melebar kanan-kiri penuh) — dikunci !important */
#promoSection{max-width:none;padding:0}
#promoSection .promo-photo{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;aspect-ratio:auto!important;border-radius:0!important;overflow:visible!important}
#promoSection .promo-photo img{width:100%!important;height:auto!important;object-fit:contain!important;border-radius:0!important;display:block}

/* Drag & drop ubah urutan (panel admin) — berlaku untuk semua list */
.gs-drag{cursor:grab;color:var(--muted);padding:0 4px;flex-shrink:0;align-self:center;font-size:17px;line-height:1;user-select:none;touch-action:none}
.gs-drag:active{cursor:grabbing}
.dragging{opacity:.45}
.drag-over{box-shadow:inset 0 3px 0 -1px var(--cyan)}

/* Refresh button */
.btn-icon{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--border);display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:.2s;flex-shrink:0}
.btn-icon:hover{color:var(--cyan);border-color:rgba(25,231,255,.4)}
@keyframes spin360{to{transform:rotate(360deg)}}
.spinning svg{animation:spin360 .7s linear infinite}

/* Notification banners */
.adm-notif{display:flex;align-items:flex-start;gap:12px;padding:13px 18px;border-radius:12px;margin-bottom:12px;font-size:13px;line-height:1.5}
.adm-notif svg{flex-shrink:0;margin-top:1px}
.adm-notif.warn{background:rgba(255,201,57,.07);border:1px solid rgba(255,201,57,.25);color:var(--gold)}
.adm-notif.err{background:rgba(255,107,107,.07);border:1px solid rgba(255,107,107,.25);color:#ff6b6b}
.adm-notif.info{background:rgba(25,231,255,.07);border:1px solid rgba(25,231,255,.25);color:var(--cyan)}

/* ph-tools */
.ph-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm-search-wrap{display:flex;align-items:center;gap:8px;background:rgba(10,10,22,.6);border:1px solid var(--border);border-radius:10px;padding:8px 12px;flex:1;min-width:180px;max-width:300px}
.adm-search-wrap svg{flex-shrink:0;color:var(--muted)}
.adm-search-input{background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:13.5px;width:100%}
.adm-search-input::placeholder{color:var(--muted)}

/* Admin inputs */
.adm-input{background:rgba(10,10,22,.7);border:1px solid var(--border);border-radius:10px;padding:10px 13px;color:var(--text);font-family:inherit;font-size:13.5px;outline:none;width:100%;transition:.2s;-webkit-appearance:none}
.adm-input:focus{border-color:rgba(25,231,255,.45);box-shadow:0 0 0 3px rgba(25,231,255,.06)}
.adm-input:disabled{opacity:.5;cursor:not-allowed}
.adm-textarea{resize:vertical;min-height:88px}

/* Form groups */
.adm-form-group{margin-bottom:18px}
.adm-form-group label{display:block;font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:7px}
/* Keterangan kecil yang BERDIRI SENDIRI (di luar .adm-form-group) dulu tidak
   punya gaya sama sekali, jadi tampil sebesar teks biasa dan justru berteriak
   lebih keras daripada isian yang dijelaskannya. */
.fg-hint{font-size:11.5px;color:var(--muted);line-height:1.5}
.adm-form-group .fg-hint{font-size:11.5px;color:var(--muted);margin-top:6px}
.adm-form-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.adm-form-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* Baris aturan margin per kategori. Kolom pertama melar supaya kotak angkanya
   tetap sejajar berapa pun panjang nama kategorinya. */
.hrg-row{display:grid;grid-template-columns:minmax(140px,1.4fr) repeat(3,1fr);gap:10px;align-items:center;
  padding:10px 12px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px;background:rgba(255,255,255,.02)}
.hrg-row.mati .hrg-in{opacity:.35;pointer-events:none}
.hrg-row label.hrg-name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;cursor:pointer;margin:0}
.hrg-in{width:100%;background:#080815;border:1px solid var(--border);border-radius:8px;color:var(--text);
  padding:8px 10px;font-family:'Sora';font-size:12.5px}
/* Baris ikon sosial di halaman Pengaturan. Pratinjau gambarnya paling kiri
   supaya admin langsung melihat ikon mana yang sedang dia atur. */
.sos-row{display:grid;grid-template-columns:44px minmax(110px,1fr) minmax(160px,2fr) auto auto;gap:10px;align-items:center;
  padding:10px 12px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px;background:rgba(255,255,255,.02)}
.sos-ikon{width:40px;height:40px;border:1px solid var(--border);border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.03);overflow:hidden}
.sos-ikon img{width:26px;height:26px;object-fit:contain}
.sos-kosong{color:var(--muted);font-size:15px;font-weight:700}
.sos-btn{padding:8px 12px;font-size:12px;white-space:nowrap}
.sos-del{color:#ff6b6b;border-color:rgba(255,107,107,.3);padding:8px 12px;line-height:1}
@media(max-width:760px){.sos-row{grid-template-columns:44px 1fr auto auto}}
.hrg-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.hrg-sum div{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.02);font-size:12px;color:var(--muted)}
.hrg-sum b{display:block;font-size:19px;font-family:'Chakra Petch';margin-top:2px;color:var(--text)}
/* Penggulir mendatar menempel pada tabelnya sendiri, bukan pada wadah panjang
   di luarnya — bilahnya jadi tepat di bawah tabel yang sedang dilihat. */
.hrg-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.hrg-scroll.menyeret{cursor:grabbing;user-select:none}
.hrg-scroll::-webkit-scrollbar{height:9px}
.hrg-scroll::-webkit-scrollbar-thumb{background:rgba(120,140,255,.35);border-radius:8px}
.hrg-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
.hrg-tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:12.5px}
.hrg-tbl th,.hrg-tbl td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
/* Hanya kolom nominal yang boleh melipat — namanya bisa sangat panjang, dan
   memaksanya satu baris itulah yang mendorong kolom lain keluar layar. */
.hrg-tbl .hrg-nm{white-space:normal;min-width:130px;max-width:230px;line-height:1.3}
.hrg-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.hrg-tbl th{position:sticky;top:0;background:#0c0c1c;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.hrg-naik{color:#ff9f6b}
.hrg-turun{color:#4affa0}
/* Baris yang tidak akan berubah tetap ditampilkan, tapi diredupkan supaya tidak
   terbaca seolah ikut diterapkan. */
.hrg-redup{color:var(--muted)}
.hrg-st{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.hrg-st-berubah{background:rgba(25,231,255,.12);color:var(--cyan);border:1px solid rgba(25,231,255,.3)}
.hrg-st-tetap{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid var(--border)}
.hrg-st-kunci{background:rgba(255,201,57,.10);color:var(--gold);border:1px solid rgba(255,201,57,.28)}
.hrg-st-nomodal{background:rgba(255,107,107,.08);color:#ff8f8f;border:1px solid rgba(255,107,107,.25)}
@media(max-width:760px){.adm-form-3col{grid-template-columns:1fr}.hrg-row{grid-template-columns:1fr 1fr}}

/* Modal overlay */
.adm-modal-overlay{position:fixed;inset:0;z-index:300;background:rgba(4,4,14,.82);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:20px}
.adm-modal-overlay.open{display:flex}
.adm-modal{background:var(--bg2);border:1px solid var(--border);border-radius:20px;width:100%;max-width:600px;max-height:88vh;overflow-y:auto;position:relative;animation:viewFadeIn .25s ease}
.adm-modal-wide{max-width:760px}
/* Modal bertabel data butuh ruang lebih. Dengan 1120px, keenam kolom pratinjau
   harga muat tanpa perlu digeser sama sekali di layar desktop. */
.adm-modal-xwide{max-width:1120px}
.am-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border-2);position:sticky;top:0;background:var(--bg2);z-index:2;border-radius:20px 20px 0 0}
.am-head h3{font-family:'Chakra Petch';font-weight:700;font-size:17px}
.am-close{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--border);display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:.2s;flex-shrink:0}
.am-close:hover{color:var(--text);border-color:rgba(255,255,255,.25)}
.am-body{padding:24px}
.am-row{display:flex;gap:8px;justify-content:space-between;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border-2);font-size:13.5px}
.am-row:last-child{border-bottom:none}
.am-row .k{color:var(--muted);flex-shrink:0;min-width:160px;font-size:12.5px}
.am-row .v{text-align:right;font-weight:500;word-break:break-all}
.am-footer{padding:16px 24px;border-top:1px solid var(--border-2);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;border-radius:0 0 20px 20px}
/* TX modal footer: 2 separate rows on all screen sizes */
.am-footer-tx{flex-direction:column;gap:10px}
.am-footer-r1,.am-footer-r2{display:flex;gap:8px;align-items:center}
.am-footer-r1{justify-content:flex-end}
.am-footer-r2{justify-content:flex-end}
.am-footer-r2 .adm-select{flex:1;max-width:160px}

/* Products tab — accordion */
.gs-block{margin-bottom:16px;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.gs-head{display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;transition:.18s}
.gs-head .gt2{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-family:'Chakra Petch';font-weight:700;font-size:12px;color:#fff;flex-shrink:0}
.gs-head:hover{background:rgba(120,140,255,.05)}
.gs-chevron{margin-left:auto;color:var(--muted);transition:.22s;flex-shrink:0}
.gs-head.open .gs-chevron{transform:rotate(180deg)}
.gs-body{display:none;border-top:1px solid var(--border-2)}
.gs-head.open+.gs-body{display:block}
/* Kode / nomor seri dari provider. Untuk voucher & token, isi kotak ini ADALAH
   barang yang dibeli — jadi dibuat menonjol dan gampang disalin. */
.sn-box{margin:16px 0;padding:14px 16px;border:1px solid rgba(74,255,160,.35);border-radius:12px;background:rgba(74,255,160,.06);text-align:left}
.sn-label{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.sn-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sn-code{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;font-weight:600;color:#4affa0;word-break:break-all;user-select:all}
.sn-copy{padding:7px 14px;font-size:12.5px;white-space:nowrap;flex-shrink:0}
.sn-note{margin-top:9px;font-size:11.5px;line-height:1.5;color:var(--muted)}
@media(max-width:600px){.sn-code{font-size:14px}.sn-copy{width:100%}}

/* Sub-grup per brand di dalam kategori Digiflazz non-game (TV -> Jawara Vision,
   Decoder GOL, …). Dibuat rata dengan induknya supaya tidak terlihat seperti
   kartu bertumpuk: tanpa bingkai sendiri, cukup garis pemisah + indentasi. */
.gs-block .gs-sub{margin:0;border:0;border-radius:0;border-top:1px solid var(--border-2)}
.gs-block .gs-sub:first-child{border-top:0}
.gs-block .gs-sub>.gs-head{padding:11px 18px 11px 34px}
.gs-block .gs-sub>.gs-body{background:rgba(0,0,0,.16)}
@media(max-width:980px){.gs-block .gs-sub>.gs-head{padding:10px 14px 10px 26px}}

/* Status indicators */
.ind{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:50px}
.ind.ready{color:#4affa0;background:rgba(74,255,160,.08);border:1px solid rgba(74,255,160,.25)}
.ind.unlinked{color:var(--gold);background:rgba(255,201,57,.08);border:1px solid rgba(255,201,57,.22)}
.ind.problem{color:#ff6b6b;background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.25)}

/* Denomination row */
/* ── Baris nominal (GRID) ────────────────────────────────────────────
   Kolom : [☐] [judul/tag ..fleksibel..] [harga/modal] [kontrol]
   Baris 1: judul                 | harga  | kontrol
   Baris 2: tag + SKU             | modal  | (kontrol membentang)
   Harga sengaja di kanan atas — posisi yang paling cepat ditemukan mata,
   dan modal tepat di bawahnya supaya margin mudah dibandingkan. */
.denom-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;gap:4px 12px;
  padding:12px 18px;border-top:1px solid var(--border-2);font-size:13px;transition:.15s;
}
/* Checkbox kotak-membulat bergaris (bukan checkbox bawaan) */
.denom-row > .denom-sel-chk{
  grid-column:1;grid-row:1 / span 2;align-self:center;
  appearance:none;-webkit-appearance:none;
  width:19px;height:19px;border-radius:6px;
  border:1.5px solid var(--border);background:transparent;cursor:pointer;
  display:grid;place-items:center;transition:.15s;flex:none;
}
.denom-row > .denom-sel-chk:hover{border-color:var(--cyan)}
.denom-row > .denom-sel-chk:checked{background:var(--cyan);border-color:var(--cyan)}
.denom-row > .denom-sel-chk:checked::after{content:"";width:5px;height:9px;margin-top:-2px;
  border:solid #04121a;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Judul: ikon dalam kotak + teks bertingkat */
.dr-label{grid-column:2;grid-row:1;display:flex;align-items:center;gap:12px;min-width:0;
  border-left:1px solid var(--border-2);padding-left:16px}
.dr-icon-box{width:40px;height:40px;flex-shrink:0;border-radius:11px;
  border:1px solid var(--border);background:rgba(25,231,255,.05);
  display:grid;place-items:center;overflow:hidden}
.dr-icon{width:24px;height:24px;object-fit:contain}
.dr-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.dr-name{font-weight:600;font-size:13.5px;color:var(--text);overflow-wrap:anywhere;line-height:1.3}
.dr-sub{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.dr-bonus{color:var(--cyan);font-size:11px}
/* Harga & modal SELALU menempel sebagai satu blok — kalau dipisah ke baris
   grid berbeda, nama produk yang panjang akan merenggangkan keduanya. */
.dr-money{grid-column:3;grid-row:1 / span 2;justify-self:end;align-self:center;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  border-left:1px solid var(--border-2);padding-left:16px}
.dr-price{white-space:nowrap;font-family:'Chakra Petch';font-size:16px;font-weight:800;color:var(--gold);letter-spacing:.01em}
.dr-modal{white-space:nowrap;font-size:11.5px;color:var(--muted)}
.dr-modal.warn{color:#ffcc33}
.dr-tags{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;
  gap:6px 8px;font-size:11px;color:var(--muted);min-width:0;
  border-left:1px solid var(--border-2);padding-left:16px}
.dr-ctrl{grid-column:4;grid-row:1 / span 2;display:flex;align-items:center;gap:10px;
  padding-left:16px}
/* Tombol aksi: kotak membulat bergaris (sesuai mockup) */
.dr-ctrl .btn-icon{width:34px;height:34px;border-radius:10px;border:1px solid var(--border)}
/* SKU sebagai pil bergaris dengan ikon label */
.dr-sku{display:inline-flex;align-items:center;gap:6px;
  font-family:'Chakra Petch';color:var(--cyan);font-size:11.5px;
  padding:5px 11px;border-radius:999px;
  border:1px solid rgba(25,231,255,.3);background:rgba(25,231,255,.06)}
.dr-sku svg{width:12px;height:12px;flex-shrink:0}
.dr-warn{color:#ffcc33}
.denom-row:hover{background:rgba(120,140,255,.03)}
.dr-label{flex:1;font-weight:500}
.dr-price{font-family:'Chakra Petch';font-size:12.5px;color:var(--gold);min-width:90px}
.dr-actions{display:flex;align-items:center;gap:8px}

/* Digiflazz product item */
.dgf-item{display:flex;align-items:center;gap:14px;padding:12px 20px;border-top:1px solid var(--border-2);font-size:13px;transition:.15s}
.dgf-item:hover{background:rgba(120,140,255,.04)}
.dgf-sku{font-family:'Chakra Petch';font-size:11.5px;color:var(--muted);margin-top:2px}
.dgf-name-wrap{flex:1;min-width:0}
.dgf-price{font-family:'Chakra Petch';font-size:12.5px;color:var(--gold);min-width:90px;text-align:right}
.dgf-mapped{margin-top:4px;font-size:11.5px;color:#19e7ff}
.dgf-map-badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;border:1px solid rgba(25,231,255,.35);background:rgba(25,231,255,.1);color:#19e7ff;font-size:11px;font-weight:700;white-space:nowrap}

/* Mapping row */
.map-row{display:flex;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid var(--border-2);font-size:13px;flex-wrap:wrap}
.map-row:hover{background:rgba(120,140,255,.03)}
.map-denom{flex:1;min-width:160px}
.map-game-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin-top:3px}
.map-sku{font-family:'Chakra Petch';font-size:11.5px;color:var(--cyan);margin-top:3px}
.map-warn-text{font-size:11.5px;color:var(--gold);display:flex;align-items:center;gap:4px;margin-top:3px}

/* Banner item */
.banner-item{display:flex;align-items:center;gap:16px;padding:16px 20px;border-top:1px solid var(--border-2)}
.bn-thumb{width:120px;height:62px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--glass);border:1px solid var(--border)}
.bn-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bn-thumb-empty{display:flex;align-items:center;justify-content:center;height:100%;font-size:20px;color:var(--muted)}
.bn-info{flex:1;min-width:0}
.bn-title{font-weight:600;font-size:14px;truncate}
.bn-sub{font-size:12px;color:var(--muted);margin-top:3px}
.bn-desc{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.35;max-width:680px}
.bn-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.btn-icon.danger{color:#ff6b6b;border-color:rgba(255,107,107,.28)}
.btn-icon.danger:hover{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.45)}
.gi-upload-wide .gi-preview-wide{width:100%;height:170px}

/* ── Bagian teknis yang dilipat ──
   Dipakai di beberapa halaman admin untuk menyembunyikan hal yang hanya berguna
   saat menelusuri masalah (kode channel, token, kredensial, versi server).
   Memakai <details> asli supaya tetap bisa dibuka tanpa JavaScript. */
.tek-box{margin-top:14px;border:1px solid var(--border-2);border-radius:12px;background:rgba(255,255,255,.014);overflow:hidden}
.tek-summary{list-style:none;cursor:pointer;padding:10px 14px;font-size:12px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:7px;transition:.15s;user-select:none}
.tek-summary::-webkit-details-marker{display:none}
.tek-summary::before{content:"›";display:inline-block;font-size:16px;line-height:1;transition:transform .18s;color:var(--muted)}
.tek-box[open] > .tek-summary::before{transform:rotate(90deg)}
.tek-summary:hover{color:var(--text);background:rgba(255,255,255,.03)}
.tek-note{font-weight:400;font-size:11px;color:#5a5f85}
.tek-body{padding:4px 14px 14px}
.tek-box.tek-inline{margin-top:10px}
.tek-box.tek-inline .tek-body{padding:2px 0 4px}

/* Editor form isian pembeli (modal produk) */
.fld-presets{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.fld-presets-lbl{font-size:11.5px;color:var(--muted);margin-right:2px}
.fld-preset-btn{font-family:inherit;font-size:11.5px;padding:5px 11px;border-radius:50px;cursor:pointer;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--border);transition:.15s}
.fld-preset-btn:hover{border-color:rgba(25,231,255,.45);color:var(--cyan);background:rgba(25,231,255,.07)}
/* Gaya kotak saran isian dihapus 2026-08-04, bersama kotaknya sendiri. */

.fld-row{display:flex;align-items:flex-start;gap:9px;padding:9px;margin-bottom:7px;border-radius:11px;background:rgba(255,255,255,.022);border:1px solid var(--border-2)}
.fld-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1.15fr);gap:7px;flex:1;min-width:0}
.fld-in{padding:7px 10px;font-size:12.5px}
.fld-in-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
/* Baris pilihan: kotak opsi mengambil lebar penuh di bawah tiga kolom utama. */
.fld-row-select{flex-wrap:wrap}

/* Daftar pilihan: satu baris per opsi, bisa ditambah & dihapus. Menggantikan
   satu kotak berisi semuanya dipisah koma — untuk daftar panjang (LifeAfter
   punya 35 server) bentuk lama tidak terbaca, dan satu koma yang terlewat
   diam-diam menggabungkan dua server jadi satu pilihan yang tidak pernah ada. */
.fld-opts{flex:1 1 100%;order:5;margin-top:2px;padding:10px 11px;border-radius:10px;
  background:rgba(255,255,255,.02);border:1px solid var(--border-2)}
.fld-opts-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.fld-opts-head span{font-size:11.5px;font-weight:600;color:var(--muted)}
.fld-opt-add{font-family:inherit;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:8px;
  cursor:pointer;color:var(--cyan);background:rgba(25,231,255,.08);
  border:1px solid rgba(25,231,255,.35);transition:.15s;flex-shrink:0}
.fld-opt-add:hover{background:rgba(25,231,255,.16)}
/* Dibatasi tingginya: 35 baris tanpa batas akan mendorong tombol Simpan jauh
   ke bawah layar. */
.fld-opt-list{display:flex;flex-direction:column;gap:6px;max-height:270px;overflow-y:auto}
/* Dua kolom: pilihan + tombol hapus. Kolom "Kode" hanya ada pada pilihan yang
   memang sudah punya kode berbeda — admin biasa tidak akan pernah melihatnya. */
.fld-opt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
.fld-opt-berkode{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto}
.fld-opt-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
.fld-opt-del{width:28px;height:28px;flex-shrink:0;display:grid;place-items:center;border-radius:8px;
  font-size:16px;line-height:1;cursor:pointer;color:var(--muted);
  background:rgba(255,255,255,.04);border:1px solid var(--border-2);transition:.15s}
.fld-opt-del:hover{color:#ff6b8a;border-color:rgba(255,107,138,.45);background:rgba(255,107,138,.1)}
.fld-opt-empty{font-size:11.5px;color:var(--muted);font-style:italic;padding:4px 2px}
.fld-in-type{width:auto;min-width:82px;padding:6px 8px;font-size:11.5px;flex-shrink:0}
/* Kode disembunyikan secara default. Kolomnya ikut menyusut jadi 2 supaya Label
   dan Contoh isian mendapat ruang lebih lega. */
/* Panjang tetap: pengaturan teknis, ikut sembunyi bersama kolom Kode. */
.fld-in-len{width:74px;flex-shrink:0;text-align:center}
.fld-hidekey .fld-in-key,
.fld-hidekey .fld-in-len{display:none}
.fld-hidekey .fld-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* Selektor dinaikkan (0,2,1) agar mengalahkan `.adm-form-group label` (0,1,1) —
   tanpa itu tulisannya dirender kapital berspasi seperti label form. */
.adm-form-group label.fld-showkey{display:inline-flex;align-items:center;gap:6px;margin:2px 0 0 10px;font-size:11px;font-weight:500;color:var(--muted);cursor:pointer;letter-spacing:0;text-transform:none}
.fld-showkey input{accent-color:var(--cyan);cursor:pointer}
.fld-tools{display:flex;align-items:center;gap:5px;flex-shrink:0}
/* Selektor sengaja dinaikkan jadi `.fld-row label.fld-req` (0,2,1) agar
   mengalahkan `.adm-form-group label` (0,1,1) — tanpa itu teksnya dirender
   kapital dan berspasi lebar seperti label form lainnya. */
.fld-row label.fld-req{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);cursor:pointer;white-space:nowrap}
.fld-req input{accent-color:var(--cyan);cursor:pointer}
.fld-badge{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(255,201,57,.35);border-radius:4px;padding:2px 6px}
.fld-empty{font-size:12px;color:var(--muted);font-style:italic;padding:11px;border:1px dashed var(--border);border-radius:11px;text-align:center}
.fld-add-btn{margin-top:2px;font-family:inherit;font-size:12px;font-weight:600;padding:7px 14px;border-radius:9px;cursor:pointer;color:var(--cyan);background:rgba(25,231,255,.08);border:1px solid rgba(25,231,255,.3);transition:.15s}
.fld-add-btn:hover{background:rgba(25,231,255,.14)}
/* Penanda opsional di storefront */
.fld-opt{font-size:11px;font-weight:400;color:var(--muted)}

/* Pratinjau format nomor tujuan provider (modal produk) */
.cnf-preview{margin-top:7px;font-size:12px;color:var(--text);line-height:1.6}
.cnf-preview code,.cnf-warn code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;background:rgba(25,231,255,.1);border:1px solid rgba(25,231,255,.25);border-radius:5px;padding:1px 6px;color:#7ef0ff}
.cnf-preview b{color:var(--cyan);font-weight:700}
.cnf-off{color:var(--muted);font-style:italic}
.cnf-warn{margin-top:8px;font-size:11.5px;line-height:1.6;color:var(--gold);background:rgba(255,201,57,.07);border:1px solid rgba(255,201,57,.28);border-radius:9px;padding:8px 10px}
.cnf-warn code{background:rgba(255,201,57,.12);border-color:rgba(255,201,57,.3);color:#ffd97a}
/* Merah dipakai HANYA untuk kondisi yang membuat pesanan gagal setelah dibayar,
   supaya bedanya jelas dengan peringatan kuning yang cuma informatif. */
.cnf-warn.cnf-danger{color:#ff8a8a;background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.35)}
.cnf-warn.cnf-danger code{background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.35);color:#ffb3b3}
/* Tombol perbaikan sekali klik, supaya admin tidak perlu membuka format nomor
   tujuan sama sekali untuk menyelesaikan peringatan. */
.cnf-fix-btn{display:block;margin-top:9px;font-family:inherit;font-size:11.5px;font-weight:700;padding:6px 13px;border-radius:8px;cursor:pointer;color:#1a1400;background:var(--gold);border:none;transition:.15s}
.cnf-fix-btn:hover{filter:brightness(1.1)}
.cnf-warn-alt{display:block;margin-top:8px;font-size:10.5px;color:var(--muted);line-height:1.55}

/* Payment row */
.pay-method-row{display:flex;align-items:center;gap:14px;padding:14px 20px;border-top:1px solid var(--border-2);font-size:13.5px;flex-wrap:wrap}
/* Kotak logo = tombol unggah. Border putus-putus menandakan bisa diklik. */
.pm-icon-box{position:relative;min-width:56px;height:34px;border-radius:8px;background:rgba(255,255,255,.04);border:1px dashed var(--border);display:grid;place-items:center;font-size:10px;font-weight:700;font-family:'Chakra Petch';color:#bfc5ee;letter-spacing:.05em;flex-shrink:0;cursor:pointer;overflow:hidden;transition:.15s}
.pm-icon-box:hover{border-color:rgba(25,231,255,.55);background:rgba(25,231,255,.06)}
.pm-icon-box input[type=file]{display:none}
.pm-icon-box img{max-width:100%;max-height:26px;object-fit:contain;display:block}
.pm-icon-text{font-family:'Chakra Petch';font-size:10px;font-weight:700}
/* Tanda "+" muncul saat hover, jadi tidak menutupi logo saat diam. */
.pm-icon-cam{position:absolute;right:2px;bottom:1px;font-size:11px;line-height:1;color:#19e7ff;opacity:0;transition:.15s;pointer-events:none}
.pm-icon-box:hover .pm-icon-cam{opacity:1}
.pm-logo-clear{background:none;border:none;padding:0 2px;font-size:14px;line-height:1;color:#ff6b6b;cursor:pointer;flex-shrink:0;opacity:.75;transition:.15s}
.pm-logo-clear:hover{opacity:1}
.pay-method-row.uploading{opacity:.6;pointer-events:none}
.pm-name{flex:1;font-weight:500}
.pm-fee-wrap{display:flex;align-items:center;gap:8px}
.pm-fee-wrap label{font-size:12px;color:var(--muted);white-space:nowrap}
.pm-fee-input{width:110px;background:rgba(10,10,22,.7);border:1px solid var(--border);border-radius:8px;padding:7px 10px;color:var(--text);font-family:inherit;font-size:13px;outline:none;text-align:right}
.pm-field{display:flex;flex-direction:column;gap:5px;flex-shrink:0}
.pm-field > label{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;letter-spacing:.01em}
.pm-inputs{display:flex;align-items:center;gap:5px}
.pm-unit{font-size:11.5px;color:var(--muted);width:14px;text-align:right;flex-shrink:0}
.pm-mini-input{width:78px;box-sizing:border-box;background:rgba(10,10,22,.7);border:1px solid var(--border);border-radius:7px;padding:7px 9px;color:var(--text);font-family:inherit;font-size:13px;outline:none;text-align:right;-moz-appearance:textfield;appearance:textfield}
.pm-mini-input::-webkit-outer-spin-button,.pm-mini-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pm-mini-input:focus{border-color:rgba(120,140,255,.5)}
.pm-field-mdr > label{color:#c8a24a}
.pay-method-row > .toggle-wrap{flex-shrink:0;margin-left:2px}
.pm-field-mdr .pm-mini-input{color:#ffcc55;border-color:rgba(255,204,85,.25);background:rgba(255,204,85,.06)}

/* Settings */
.settings-section{margin-bottom:28px}
.settings-section h4{font-family:'Chakra Petch';font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border-2)}

/* Menu badge */
.mn-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:50px;background:rgba(255,107,107,.9);color:#fff;font-size:10px;font-weight:700;padding:0 5px;margin-left:auto}

/* MM products list */
.mm-product-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;cursor:pointer;transition:.15s;border:1px solid transparent}
.mm-product-row:hover{background:rgba(120,140,255,.07);border-color:rgba(120,140,255,.2)}
.mm-product-row.selected{background:rgba(25,231,255,.07);border-color:rgba(25,231,255,.35)}
.mm-check{width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(120,140,255,.4);flex-shrink:0;display:grid;place-items:center;transition:.15s}
.mm-product-row.selected .mm-check{background:#19e7ff;border-color:#19e7ff}
.mm-product-row.selected .mm-check::after{content:'✓';color:#04121a;font-size:12px;font-weight:800;line-height:1}

/* Loading / empty */
.adm-loading{text-align:center;padding:44px 20px;color:var(--muted);font-size:13.5px}
.adm-empty{text-align:center;padding:44px 20px}
.adm-empty .ae-icon{font-size:36px;margin-bottom:12px}
.adm-empty p{font-size:13.5px;color:var(--muted)}

/* Responsive additions */
@media(max-width:980px){
  .detail-grid{grid-template-columns:1fr}
  .summary{position:static}
  .checkout-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid-6{grid-template-columns:repeat(3,1fr)}
  .admin{grid-template-columns:1fr}
  .adm-side{position:static;height:auto;display:flex;gap:6px;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border-2)}
  .adm-side .as-logo,.adm-menu .grp{display:none}
  .adm-menu{display:flex;gap:6px}
  .adm-menu a{margin:0;white-space:nowrap}
  .promo-list{grid-template-columns:1fr}
}
@media(max-width:680px){
  .denoms{grid-template-columns:repeat(2,1fr)}
  .pay-opts{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr}
  .gh-banner{height:200px}
  .gh-art{font-size:96px;left:28%}
  .gh-promo{right:14px;padding:11px 16px 9px}
  .gh-promo .l1{font-size:15px}.gh-promo .l2{font-size:21px}.gh-promo .l3{font-size:8.5px;margin-top:7px}
  .gh-bar .gh-inner{padding:104px 18px 18px;min-height:0}
  .gh-cover{width:96px;height:96px;left:18px;bottom:auto;top:-58px}
  .gh-cover .ce{font-size:34px}
  .gh-meta h1{font-size:23px}
  .gh-feats{gap:14px}
  .adm-main{padding:18px}
  .tbl-scroll{overflow-x:auto}
}

/* ── Toggle switch ── */
.toggle-wrap{display:inline-flex;align-items:center;cursor:pointer;user-select:none}
.toggle-wrap input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.toggle-wrap .toggle{position:relative;display:inline-block;width:40px;height:22px;background:rgba(139,144,184,.25);border:1px solid var(--border);border-radius:50px;transition:.2s;flex-shrink:0}
.toggle-wrap .toggle::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;background:#8b90b8;border-radius:50%;transition:.2s}
.toggle-wrap input:checked~.toggle{background:rgba(25,231,255,.25);border-color:rgba(25,231,255,.5)}
.toggle-wrap input:checked~.toggle::after{left:21px;background:var(--cyan)}

/* ── Digiflazz balance ── */
.dgf-bal-pill{display:flex;align-items:center;gap:7px;padding:6px 14px;border-radius:50px;background:rgba(74,255,160,.08);border:1px solid rgba(74,255,160,.25);color:#4affa0;font-size:12px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap;font-family:'Chakra Petch'}
.dgf-bal-pill:hover{background:rgba(74,255,160,.14);border-color:rgba(74,255,160,.4)}
.dgf-bal-pill.loading{opacity:.6;pointer-events:none}
.dgf-bal-pill.error{background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.25);color:#ff6b6b}
.dgf-bal-card{display:flex;align-items:center;gap:24px;padding:18px 22px;border-radius:16px;background:linear-gradient(135deg,rgba(74,255,160,.07),rgba(25,231,255,.04));border:1px solid rgba(74,255,160,.2);margin-bottom:20px;flex-wrap:wrap}
.dgf-bal-left{display:flex;align-items:center;gap:14px;flex:1;min-width:200px}
.dgf-bal-icon{width:46px;height:46px;border-radius:12px;background:rgba(74,255,160,.12);border:1px solid rgba(74,255,160,.25);display:grid;place-items:center;color:#4affa0;flex-shrink:0}
.dgf-bal-label{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.dgf-bal-amount{font-family:'Chakra Petch';font-size:22px;font-weight:700;color:#4affa0;letter-spacing:.02em}
.dgf-bal-amount.error{color:#ff6b6b;font-size:14px}
.dgf-bal-meta{display:flex;flex-direction:column;gap:5px;padding:10px 20px;border-left:1px solid var(--border-2);border-right:1px solid var(--border-2)}
.dgf-bal-meta-row{display:flex;gap:16px;font-size:12px;justify-content:space-between;min-width:180px}
.dgf-bal-meta-row span:first-child{color:var(--muted)}
.dgf-bal-meta-row span:last-child{font-weight:500;color:var(--text)}
@media(max-width:680px){.dgf-bal-card{gap:14px}.dgf-bal-meta{border:none;padding:0}}

/* ── Payment tab ── */
.pgw-status-card{display:flex;align-items:flex-start;gap:20px;padding:18px 20px;background:rgba(255,201,57,.04);border:1px solid rgba(255,201,57,.18);border-radius:14px;margin-bottom:20px;flex-wrap:wrap}
.pgw-status-icon{width:52px;height:52px;border-radius:12px;background:rgba(255,201,57,.1);border:1px solid rgba(255,201,57,.25);display:grid;place-items:center;color:var(--gold);flex-shrink:0}
.pgw-badge-manual{display:inline-flex;align-items:center;font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.04em;margin-top:2px}
.pgw-providers{display:flex;flex-direction:column;gap:8px;align-items:flex-end;flex-shrink:0}
.pgw-provider-chip{font-size:11px;font-weight:700;font-family:'Chakra Petch';padding:4px 12px;border-radius:6px;letter-spacing:.06em}
.pgw-provider-chip.off{background:rgba(139,144,184,.1);border:1px solid var(--border);color:var(--muted)}
.pgw-provider-chip.on{background:rgba(74,255,160,.1);border:1px solid rgba(74,255,160,.3);color:#4affa0}
.pgw-roadmap{background:rgba(10,10,22,.4);border:1px solid var(--border-2);border-radius:12px;padding:16px 20px}
.pgw-roadmap-title{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;margin-bottom:12px}
.pgw-roadmap-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pgw-roadmap-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#8b90b8}
.pgw-ri-dot{width:6px;height:6px;border-radius:50%;background:var(--border);flex-shrink:0}
.pay-method-group-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;padding:14px 20px 6px;border-top:1px solid var(--border-2)}
.pay-method-group-label:first-child{border-top:none}
.pgw-needs-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;background:rgba(139,144,184,.1);border:1px solid var(--border);color:var(--muted);white-space:nowrap;flex-shrink:0}
.pgw-instr-block{border:1px solid var(--border-2);border-radius:12px;overflow:hidden}
.pgw-instr-head{display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(255,255,255,.03);font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--border-2)}
.pgw-instr-body{padding:16px}
@media(max-width:680px){.pgw-roadmap-list{grid-template-columns:1fr}.pgw-providers{flex-direction:row;align-items:center}}

/* ── Game image upload ── */
.gi-upload-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gi-upload-group{}
.gi-upload-btn{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;border:1.5px dashed var(--border);border-radius:12px;padding:12px 8px;transition:.15s;background:rgba(10,10,22,.4)}
.gi-upload-btn:hover{border-color:var(--cyan);background:rgba(25,231,255,.05)}
.gi-preview{width:100%;aspect-ratio:3/4;max-height:230px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.gi-preview-wide{aspect-ratio:16/5}
.gi-preview-sq{aspect-ratio:1/1}
.gi-upload-lbl{font-size:11.5px;color:var(--muted);text-align:center}
@media(max-width:680px){.gi-upload-row{grid-template-columns:1fr}}

/* ── Promo admin list ── */
.promo-adm-item{display:flex;align-items:flex-start;gap:16px;padding:18px 20px;border-top:1px solid var(--border-2)}
.promo-adm-item:first-child{border-top:none}
.pai-main{flex:1;min-width:0}
.pai-name{font-weight:600;font-size:14px;margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pai-code{font-family:'Chakra Petch';font-size:11px;padding:2px 8px;border-radius:4px;background:rgba(255,201,57,.12);color:var(--gold);border:1px solid rgba(255,201,57,.3);letter-spacing:.05em}
.pai-meta{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
.pai-meta span{display:flex;align-items:center;gap:4px}
.pai-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-top:2px}
.pai-value{font-family:'Chakra Petch';font-size:15px;font-weight:700;color:var(--cyan);margin-top:4px}
.pai-stat{font-size:11.5px;color:var(--muted);margin-top:3px}

/* Mobile feature strip: desktop hidden */
.mob-feat-strip{display:none}

/* ════════════════════════════════════════════════
   MOBILE IMPROVEMENTS ≤768px
════════════════════════════════════════════════ */
@media(max-width:768px){
  /* ── Page shell ── */
  .page{padding:20px 16px 40px}
  .crumb{font-size:12.5px;gap:6px;margin-bottom:14px}

  /* ── Game Hero: photo-2 compact unified card ── */
  .game-hero{margin:0 -16px;overflow:hidden}
  /* Banner: compact height, show game photo clearly */
  .gh-banner{height:130px;min-height:0}
  .gh-promo{display:none!important}
  .gh-art{display:none}
  /* Show actual photo — remove blur & dark filter */
  .gh-bg{filter:brightness(.85);transform:none}
  /* Remove black gradient overlay */
  .gh-banner::after{background:linear-gradient(to bottom,transparent 50%,rgba(6,6,14,.25) 100%)}
  /* Back button stays visible */
  .gh-back{top:12px;left:14px}
  /* Bar: main hero card content */
  .gh-bar{background:var(--surface-2,var(--surface));border-bottom:1px solid var(--border-2)}
  .gh-bar .gh-inner{
    display:flex;flex-direction:row;align-items:flex-start;
    gap:14px;padding:14px 16px 18px;min-height:0;
  }
  /* Cover: inline (not absolute) — prominent, large */
  .gh-cover{
    position:relative;left:auto;bottom:auto;top:auto;
    width:82px;height:82px;border-radius:14px;flex-shrink:0;
    box-shadow:0 4px 20px rgba(0,0,0,.45);
    border:1.5px solid rgba(255,255,255,.12);
  }
  .gh-cover .ce{font-size:28px}
  /* Meta: fills remaining space */
  .gh-meta{padding-left:0!important;min-width:0;flex:1}
  .gh-meta h1{font-size:18px;line-height:1.2;overflow:hidden;
    white-space:nowrap;text-overflow:ellipsis}
  .gh-meta .pub{font-size:12px;margin-top:3px;color:var(--muted)}
  /* gh-feats: compact pills inside bar (NOT hidden) */
  .gh-feats{
    display:flex;gap:0;flex-wrap:nowrap;margin-top:10px;overflow:hidden;
    border-top:1px solid var(--border);padding-top:9px;
  }
  .gh-feat{
    font-size:10px;gap:4px;color:rgba(200,210,255,.7);
    padding:0;background:transparent!important;border:none!important;
    flex:1;justify-content:center;
  }
  .gh-feat:not(:last-child){border-right:1px solid var(--border);margin-right:0;padding-right:0}
  .gh-feat .fi{
    width:16px;height:16px;border-radius:4px;flex-shrink:0;
    background:transparent!important;border:none!important;padding:0;
  }
  .gh-feat .fi svg{width:11px;height:11px}

  /* mob-feat-strip: no longer needed */
  .mob-feat-strip{display:none!important}

  /* ── Detail grid ── */
  .detail-grid{grid-template-columns:1fr;gap:16px}

  /* Steps */
  .step{border-radius:16px!important;padding:16px!important;margin-bottom:14px}
  .step-head{gap:10px;margin-bottom:14px}
  .step-num{width:28px;height:28px;font-size:13px;border-radius:8px}
  .step-head h3{font-size:15px}
  .step-head .hint{font-size:11.5px}

  /* Account fields */
  .fields{grid-template-columns:1fr;gap:10px}
  .field label{font-size:12.5px;margin-bottom:6px}
  .field input,.field select{padding:11px 14px;font-size:14px;border-radius:11px}

  /* Denomination grid: 2 col, bigger touch targets */
  .denoms{grid-template-columns:repeat(2,1fr);gap:10px}
  .denom{padding:14px 12px;border-radius:14px;min-height:70px}
  .denom .amt{font-size:13.5px}
  .denom .price{font-size:12.5px}
  .denom .bonus{font-size:10px;padding:2px 7px;top:8px;right:8px}

  /* Payment options: 1 col */
  .pay-group h4{font-size:12px;padding:10px 0 6px}
  .pay-opts{grid-template-columns:1fr;gap:8px}
  .pay-opt{padding:12px;border-radius:13px;min-height:56px}
  .pay-logo{width:46px;height:30px;border-radius:7px;font-size:11px}
  .pay-opt .pn{font-size:13.5px}
  .pay-opt .pf{font-size:11.5px}

  /* Summary card: compact */
  .summary{position:static;border-radius:18px!important;padding:18px!important;margin-top:0!important}
  .btn-buy{padding:15px 22px;font-size:14.5px;border-radius:13px;width:100%}

  /* ── Checkout page ── */
  .checkout-grid{grid-template-columns:1fr;gap:16px}
  .co-section{border-radius:16px;padding:18px 16px}
  .pay-instr{border-radius:14px;padding:16px}

  /* ── Cek Transaksi ── */
  .cek-wrap{padding:0}
  .cek-search{flex-direction:column;gap:10px}
  .cek-search input{font-size:14px;padding:12px 16px;border-radius:12px}
  .cek-search .btn{width:100%;justify-content:center;padding:13px;border-radius:12px}
  .cek-result{border-radius:16px;padding:18px 16px}

  /* ── Admin panel mobile: sidebar drawer ── */
  .admin{grid-template-columns:1fr}

  /* Overlay: dark backdrop behind open drawer */
  .adm-overlay{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,8,.62);z-index:199;
    backdrop-filter:blur(2px);
    -webkit-tap-highlight-color:transparent;
  }
  .adm-overlay.open{display:block}

  /* Sidebar → fixed drawer sliding from left */
  body[data-view="admin"] .adm-side{top:0;height:100vh}
  .adm-side{
    position:fixed;left:-270px;top:0;
    width:260px;height:100vh;z-index:200;
    overflow-y:auto;overflow-x:hidden;
    background:#0d0d1f;
    border-right:1px solid var(--border-2);
    border-bottom:none;
    padding:18px 14px;display:block;
    transition:left .28s cubic-bezier(.4,0,.2,1);
    -webkit-overflow-scrolling:touch;
  }
  .adm-side.open{left:0}
  body.adm-nav-open{overflow:hidden}

  /* Drawer: show logo + close button */
  .adm-side .as-logo{
    display:flex!important;align-items:center;justify-content:flex-start;
    padding-bottom:16px;margin-bottom:12px;
    border-bottom:1px solid var(--border-2);
  }
  .adm-side-close{
    display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:8px;flex-shrink:0;margin-left:auto;
    background:rgba(255,255,255,.05);border:1px solid var(--border);
    color:var(--muted);cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  /* Drawer: show group labels */
  .adm-menu .grp{display:block!important}
  /* Drawer: vertical menu layout */
  .adm-menu{
    display:flex!important;flex-direction:column;gap:2px;
    padding:0;overflow:visible;width:auto;flex-wrap:nowrap;
  }
  .adm-menu a{
    flex-direction:row!important;align-items:center!important;
    text-align:left!important;gap:11px;
    padding:11px 13px!important;border-radius:11px!important;
    margin:0 0 2px 0;font-size:13.5px!important;line-height:1.3;
    color:var(--muted);min-width:0;flex-shrink:1;
    border-bottom:none!important;white-space:normal;
    background:transparent;box-shadow:none;
  }
  .adm-menu a svg{width:16px!important;height:16px!important;flex-shrink:0}
  .adm-menu a.active{
    background:linear-gradient(135deg,rgba(25,231,255,.14),rgba(177,75,255,.14))!important;
    color:var(--text)!important;
    box-shadow:inset 0 0 0 1px var(--border)!important;
    border-bottom:none!important;
  }
  .adm-menu a.active svg{color:var(--cyan)!important}

  /* Hamburger button */
  .adm-hamburger{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:10px;flex-shrink:0;
    background:var(--glass);border:1px solid var(--border);
    color:var(--text);cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

  /* Top bar */
  .adm-main{padding:14px}
  .adm-top{margin-bottom:14px;flex-wrap:nowrap;gap:10px;align-items:center}
  .adm-top h1{font-size:18px;line-height:1.2}
  .adm-top .sub{font-size:11.5px;margin-top:1px}
  .adm-user{display:none}
  .adm-top-r{gap:8px;flex-shrink:0}
  .dgf-bal-pill{font-size:11px;padding:5px 10px;gap:5px;max-width:150px;overflow:hidden;text-overflow:ellipsis}

  /* Login gate */
  .ag-card{padding:30px 20px;border-radius:18px}
  .ag-card h2{font-size:19px}

  /* Balance card: stack vertically */
  /* Balance card: stack vertically, refresh btn pinned top-right */
  .dgf-bal-card{position:relative;flex-direction:column;gap:0;padding:14px 16px 16px;margin-bottom:16px}
  .dgf-bal-left{min-width:0;margin-bottom:14px;padding-right:40px}
  .dgf-bal-card > .btn-icon{position:absolute;top:12px;right:12px;flex-shrink:0}
  .dgf-bal-meta{
    border-left:none;border-right:none;
    border-top:1px solid var(--border-2);
    padding:12px 0 0;min-width:0;width:100%;
  }
  .dgf-bal-meta-row{min-width:0;font-size:12px}
  .dgf-bal-amount{font-size:22px}

  /* Stat grid: 2-col */
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
  .stat-grid-6{grid-template-columns:repeat(2,1fr)}
  /* Stat card: vertical stack so label tidak terpotong */
  .stat{
    padding:13px 12px;border-radius:13px;
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
  }
  .stat .si{width:32px;height:32px;border-radius:8px;flex-shrink:0;margin-bottom:8px;display:grid;place-items:center}
  .stat .si svg{width:15px;height:15px}
  .stat .sv{font-size:17px;line-height:1.1;font-weight:700}
  .stat .sl{font-size:10.5px;margin-top:3px;white-space:normal;overflow:visible;line-height:1.3;color:var(--muted)}

  /* Keuangan: promo breakdown + top games = 1-col on mobile */
  .keu-2col{grid-template-columns:1fr;gap:14px}
  /* Top games/payment row */
  .keu-top-row{padding:10px 14px;gap:10px;font-size:12.5px}
  .keu-top-rev{font-size:12px}
  .keu-top-cnt{font-size:11px;min-width:auto;margin-left:6px}
  /* Panel spacing */
  .panel{margin-bottom:14px;border-radius:14px}

  /* Panel head: kolom — h3 penuh, elemen lain stack di bawah */
  .panel-head{
    padding:13px 14px;
    position:relative;
    flex-direction:column;align-items:stretch;
    gap:7px;
  }
  .panel-head h3{font-size:15px}
  /* btn-icon LANGSUNG anak panel-head → absolut pojok kanan atas
     (tidak makan ruang, h3 tetap full-width) */
  .panel-head > .btn-icon{position:absolute;top:13px;right:14px}
  /* Link "Lihat semua" → rata kanan */
  .panel-head > a{align-self:flex-end;font-size:12px;margin-top:-2px}
  /* Subtitle span langsung di panel-head */
  .panel-head > span{font-size:11px;color:var(--muted);margin-top:-2px}
  /* Inline div controls (Metode Pembayaran, dll) */
  .panel-head > div:not(.ph-tools){display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  /* ph-tools: baris sendiri dengan flex-wrap */
  .ph-tools{flex-wrap:wrap;gap:8px;align-items:center}
  /* Search full-width baris 1, select+btn di baris 2 */
  .adm-search-wrap{flex:1 1 100%;max-width:none;min-width:0}
  .adm-select{flex:1;min-width:90px;font-size:12.5px;padding:7px 10px}
  .ph-tools .btn{font-size:12.5px;padding:8px 14px;white-space:nowrap}

  /* Notification banners */
  .adm-notif{margin:10px 14px 0;padding:11px 14px;font-size:12.5px;border-radius:10px}

  /* Tables */
  .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl{font-size:12.5px}
  .tbl th{font-size:11.5px;padding:10px 10px;white-space:nowrap}
  .tbl td{padding:10px 10px;white-space:nowrap}
  .adm-table{min-width:560px}

  /* Modal: base */
  .adm-modal{
    border-radius:16px;max-width:calc(100vw - 20px);width:100%;
    max-height:92vh;
    display:flex;flex-direction:column;
  }
  .am-head{padding:14px 16px;flex-shrink:0}
  .am-head h3{font-size:15px}
  .am-body{padding:6px 14px 12px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
  .am-row{font-size:12.5px;padding:9px 0}
  .am-row .k{min-width:108px;font-size:12px}
  /* Footer: sticky at bottom of modal */
  .am-footer{
    padding:12px 14px;gap:8px;
    flex-shrink:0;
    position:sticky;bottom:0;
    background:var(--bg2);
    border-top:1px solid var(--border-2);
  }
  .am-footer-r2 .adm-select{max-width:none;flex:1}

  /* Form: compact 2-col — keep 2 columns to save vertical space */
  .adm-form-2col{grid-template-columns:1fr 1fr;gap:8px}
  .adm-form-group{margin-bottom:12px}
  .adm-form-group label{font-size:10px;margin-bottom:5px}
  .adm-input{padding:9px 11px;font-size:13px;border-radius:9px}
  .adm-form-group .fg-hint{font-size:10px;margin-top:4px;line-height:1.4}

  /* Image upload: compact 2-col grid */
  .gi-upload-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .gi-upload-btn{padding:8px 6px;gap:5px;border-radius:10px}
  .gi-preview{height:110px;aspect-ratio:unset}
  .gi-preview-wide{height:60px;aspect-ratio:unset}
  .gi-preview-sq{height:90px;aspect-ratio:unset}
  .gi-upload-lbl{font-size:10px}

  /* ── Halaman Pembayaran ── */
  /* Status gateway card: grid 2-col (icon|info) lalu providers full-width */
  .pgw-status-card{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    gap:10px 12px;padding:14px;margin-bottom:14px;border-radius:12px;
  }
  .pgw-status-icon{
    grid-column:1;grid-row:1;
    width:40px;height:40px;border-radius:9px;
  }
  .pgw-status-icon svg{width:20px;height:20px}
  .pgw-status-card > div:nth-child(2){grid-column:2;grid-row:1;min-width:0}
  /* Deskripsi: clamp 2 baris */
  .pgw-status-card > div:nth-child(2) > div:last-child{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-size:11.5px!important;margin-top:4px!important;
  }
  /* Providers: baris ke-2, horizontal */
  .pgw-providers{
    grid-column:1/-1;grid-row:2;
    flex-direction:row!important;align-items:center;gap:8px;
  }
  /* Roadmap: compact */
  .pgw-roadmap{padding:12px 14px;border-radius:10px}
  .pgw-roadmap-title{margin-bottom:8px;font-size:11px}
  .pgw-roadmap-item{font-size:12px;gap:6px}
  /* Panel wrapper padding override */
  #adm-pembayaran .panel > div[style*="padding"]{padding:14px!important}

  /* Payment method rows: flex-wrap natural 2-baris */
  .pay-method-row{
    display:flex;flex-wrap:wrap;
    align-items:center;padding:12px 14px;gap:5px 10px;
  }
  /* Baris 1: icon + nama (flex:1) + toggle — otomatis penuh */
  .pm-icon-box{
    order:1;flex-shrink:0;
    min-width:0;width:52px;height:34px;border-radius:8px;
  }
  .pm-name{order:2;flex:1;min-width:0;font-size:13px}
  .pay-method-row > .toggle-wrap{order:3;flex-shrink:0}
  /* Tanpa order eksplisit tombol ini melompat ke depan kotak logo. Angka 5
     dipilih agar selalu di belakang badge "Butuh Gateway" (order 10 di sini,
     order 4 pada breakpoint 480px). */
  .pm-logo-clear{order:5;margin-left:2px}
  /* Baris 2 (auto-wrap karena baris 1 sudah penuh):
     badge indent sejajar nama, fee dorong ke kanan */
  .pgw-needs-badge{order:10;flex-shrink:0;margin-left:62px}
  .pm-field{order:11;margin-left:58px;gap:3px}
  .pm-field-fee{order:12;margin-left:auto}
  .pm-field > label{font-size:10.5px}
  .pm-inputs{gap:4px}
  .pm-unit{width:12px}
  .pm-mini-input{width:64px;padding:6px 7px;font-size:12.5px}
  /* Group label */
  .pay-method-group-label{padding:12px 14px 5px;font-size:10.5px}
  /* Warning notif */
  #adm-pembayaran .adm-notif{margin:0 14px 0!important;padding:10px 12px;font-size:12px}
  /* Instruksi manual */
  .pgw-instr-head{padding:10px 14px;font-size:11px}
  .pgw-instr-body{padding:12px 14px}

  /* ── Pengaturan ── */
  #adm-pengaturan .panel > div[style*="padding"]{padding:14px!important}
  .settings-section{margin-bottom:20px}
  .settings-section h4{margin-bottom:12px;padding-bottom:8px;font-size:11.5px}
  /* fg-hint standalone (bukan dalam adm-form-group) */
  #adm-pengaturan .fg-hint{font-size:11px;color:var(--muted);line-height:1.5;margin-bottom:10px}
  /* Digiflazz disabled 2col: 1-col di mobile agar placeholder terbaca */
  #adm-pengaturan .adm-form-2col{grid-template-columns:1fr 1fr;gap:8px}
  /* SSL status box */
  #set-ssl-status{font-size:12px!important;padding:9px 12px!important;border-radius:9px!important}
  /* Server info */
  #set-server-info{padding:12px!important;font-size:11.5px!important;border-radius:10px!important}

  /* ── Kelola Promo ── */
  /* Stack vertikal: info di atas, actions di bawah sebagai footer */
  .promo-adm-item{
    flex-direction:column;align-items:stretch;
    gap:0;padding:14px;
  }
  .pai-main{margin-bottom:0}
  .pai-name{font-size:13px;gap:6px;margin-bottom:3px}
  .pai-code{font-size:10.5px;padding:2px 7px}
  .pai-value{font-size:14px;margin-top:3px}
  /* Meta: wrap chips kecil-kecil */
  .pai-meta{
    font-size:11px;gap:3px 8px;margin-top:8px;
  }
  .pai-meta span::before{content:'•';margin-right:4px;opacity:.4}
  .pai-meta span:first-child::before{display:none}
  /* Actions: footer strip toggle kiri, Edit+Hapus kanan */
  .pai-actions{
    display:flex;align-items:center;width:100%;
    margin-top:12px;padding-top:10px;
    border-top:1px solid var(--border-2);
    gap:8px;flex-shrink:unset;
  }
  .pai-actions > .toggle-wrap{margin-right:auto}
  .pai-actions .btn{padding:5px 13px;font-size:12px}

  /* ── Banner admin: tiap banner jadi KARTU (senada halaman lain) ──
     Sebelumnya .bn-actions diberi width:100% padahal .banner-item tidak
     flex-wrap, sehingga toggle + Edit + Hapus terdorong KELUAR kartu dan
     tersembunyi oleh overflow-x:hidden — admin tidak bisa mengelola banner
     dari HP sama sekali. Sekarang barisnya dibuat membungkus:
        ⠿ [thumb] Judul + subjudul
        ─────────────────────────────
        Urutan: 1        ⬤  [✎] [🗑] */
  .banner-item{
    flex-wrap:wrap;align-items:center;gap:10px;
    padding:12px;margin:0 12px 10px;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016));
    border:2px solid rgba(255,255,255,.20);border-radius:13px;
    box-shadow:0 5px 14px -8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
  }
  .banner-item:first-child{margin-top:3px}
  .gs-drag{flex-shrink:0}
  .bn-thumb{width:84px;height:48px;border-radius:8px;flex-shrink:0}
  .bn-info{flex:1 1 110px;min-width:0}
  .bn-title{font-size:13px;overflow-wrap:anywhere}
  .bn-sub{font-size:11.5px;margin-top:2px;overflow-wrap:anywhere}
  .bn-desc{display:none}
  .bn-actions{
    flex:1 1 100%;display:flex;align-items:center;justify-content:flex-end;gap:8px;
    padding-top:10px;border-top:2px solid rgba(255,255,255,.17);
  }
  /* "Urutan: n" didorong ke kiri agar tombol tetap berkumpul di kanan. */
  .bn-actions > div:first-child{margin-right:auto;text-align:left!important;font-size:11px}

  /* ── Digiflazz catalog ── */
  .dgf-item{padding:10px 14px;gap:10px;font-size:12.5px}
  .dgf-sku{font-size:10.5px;margin-top:1px}
  .dgf-price{font-size:12px;min-width:auto;flex-shrink:0}
  .dgf-map-badge{font-size:10px;padding:3px 7px}
  /* Pager */
  #dgf-pager{padding:10px 14px!important}

  /* Finance period: non-wrapping scroll */
  .keu-period{
    display:flex;overflow-x:auto;scrollbar-width:none;
    flex-wrap:nowrap;gap:6px;margin-bottom:16px;padding-bottom:2px;
  }
  .keu-period::-webkit-scrollbar{display:none}
  .keu-period-btn{flex-shrink:0;padding:7px 14px;font-size:12px}
  .keu-chart-wrap{padding:14px 14px 6px}

  /* ── Produk game / non-game ── */
  /* Notif info margin override (inline style kalah ke !important) */
  #adm-produk .adm-notif,
  #adm-produk-lain .adm-notif{margin:0 14px 0!important;padding:10px 12px;font-size:12px}
  .gs-block{margin-bottom:10px;border-radius:12px}
  .gs-head{padding:12px 14px;gap:10px}
  .gs-head > div:nth-child(2){min-width:0;flex:1}
  /* Subtitle truncate ke 1 baris */
  .gs-head > div:nth-child(2) > div:last-child{
    font-size:11px!important;
    overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  }
  /* Tata letak baris nominal diatur di blok grid (layout A) di bawah. */
  .dr-actions .btn-icon{width:28px;height:28px;border-radius:7px}

  /* ── Mapping game rows: 2-row grid ── */
  .map-row{
    display:grid;
    grid-template-columns:1fr auto auto;
    grid-template-rows:auto auto;
    align-items:center;
    padding:11px 14px;gap:3px 8px;
  }
  /* Row 1: nama produk + game tag, full width */
  .map-row > div:nth-child(1){
    grid-column:1 / -1;grid-row:1;min-width:0;
  }
  .map-denom{min-width:0;font-size:13px}
  .map-game-tag{font-size:11px;margin-top:2px}
  /* Row 2 col 1: SKU info — truncated to 1 line */
  .map-row > div:nth-child(2){
    grid-column:1;grid-row:2;min-width:0;overflow:hidden;
  }
  .map-row > div:nth-child(2) > div{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-size:11px!important;line-height:1.4;
  }
  .map-warn-text{font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Row 2 col 2: status pill */
  .map-row > .ind{
    grid-column:2;grid-row:2;flex-shrink:0;
    font-size:10px;padding:3px 8px;
  }
  /* Row 2 col 3: Ganti / Tautkan button */
  .map-row > button{
    grid-column:3;grid-row:2;
    padding:6px 11px!important;font-size:11.5px!important;white-space:nowrap;
  }
}

/* ════════════════════════════════════════════════
   MOBILE IMPROVEMENTS ≤480px
════════════════════════════════════════════════ */
@media(max-width:480px){
  .page{padding:16px 14px 36px}

  /* Game hero: even more compact */
  .gh-banner{height:110px;min-height:0}
  .gh-cover{width:70px;height:70px;border-radius:12px}
  .gh-cover .ce{font-size:24px}
  .gh-bar .gh-inner{gap:12px;padding:12px 14px 16px}
  .gh-meta h1{font-size:16px}

  /* Denom: keep 2 col */
  .denoms{grid-template-columns:repeat(2,1fr);gap:8px}
  .denom{padding:12px 10px;min-height:62px;border-radius:12px}
  .denom .amt{font-size:12.5px}
  .denom .price{font-size:12px}

  /* Steps */
  .step{padding:14px!important;margin-bottom:12px}
  .step-head{margin-bottom:12px}

  /* Summary */
  .summary{border-radius:16px!important;padding:14px!important}

  /* Admin */
  .adm-main{padding:12px}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-grid-6{grid-template-columns:repeat(2,1fr)}
  .stat{padding:11px 10px;flex-direction:column;gap:0}
  .stat .si{width:28px;height:28px;border-radius:7px;margin-bottom:6px}
  .stat .si svg{width:13px;height:13px}
  .stat .sv{font-size:15px}
  .stat .sl{font-size:10px;white-space:normal}
  .adm-menu a{min-width:50px;padding:9px 8px 6px;font-size:9.5px}

  /* Finance: tetap horizontal scroll, jangan wrap */
  .keu-period{flex-wrap:nowrap;overflow-x:auto}
  .keu-period-btn{flex:none;flex-shrink:0;white-space:nowrap;padding:6px 12px;font-size:11.5px}
}

@supports (content-visibility:auto){
  /* Hanya footer (benar-benar di bawah lipatan). Seksi above-the-fold
     (.strips/.ticker/.sec/#promoSection) SENGAJA dikeluarkan: content-visibility
     pada elemen yang langsung terlihat memakai placeholder contain-intrinsic-size
     lalu menggantinya dengan tinggi asli -> memicu layout shift (CLS ~0.2). */
  footer{
    content-visibility:auto;
    contain-intrinsic-size:1px 480px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Halaman detail produk — perbaikan lebar (kategori nominal)

   Masalah: judul kategori & label nominal yang panjang (mis. "Mobile
   Legend Adventure M-Cash") memaksa kolom grid melebar melebihi layar,
   sehingga SELURUH halaman bisa digeser ke samping di HP.

   Akar masalah: kolom `.detail-grid` memakai `1fr` (= minmax(auto,1fr)),
   sehingga LEBAR MINIMUMNYA mengikuti konten terlebar. Baris chip kategori
   yang tidak boleh turun (nowrap) membuat lebar minimum itu melebihi layar,
   lalu SELURUH halaman ikut melar / terpotong.

   Perbaikan:
   1) Chip kategori BOLEH TURUN ke baris berikutnya (flex-wrap:wrap) —
      jadi tidak pernah ada konten yang memanjang ke kanan.
   2) Track grid dikunci `minmax(0,1fr)` + item `min-width:0`, supaya
      lebar kolom tidak pernah melebihi layar berapa pun isinya.
   3) Teks panjang dipatahkan (overflow-wrap), bukan melebarkan grid.
   Aman untuk berapa pun jumlah kategori — 0, 3, maupun 10+.
   ══════════════════════════════════════════════════════════════════ */
/* `clip`, BUKAN `hidden`. Keduanya sama-sama memotong lebar berlebih, tapi
   `hidden` menjadikan elemen ini wadah gulir tersendiri — dan `position:sticky`
   di dalamnya lalu menempel pada wadah itu, bukan pada layar. Itu yang membuat
   Ringkasan Pesanan tidak pernah ikut bergulir. `clip` tidak membuat wadah
   gulir, jadi sticky-nya kembali bekerja. Perbaikan lebar yang sesungguhnya
   ada di aturan di bawah ini, bukan pada pemotongan ini. */
#view-detail{overflow-x:clip}

/* 1) Kunci lebar kolom halaman detail */
.detail-grid{grid-template-columns:minmax(0,1fr) 350px}
.detail-grid>*{min-width:0}
#view-detail .step{min-width:0}

/* 2) Grid nominal + teks yang bisa dipatahkan */
.denoms{grid-template-columns:repeat(3,minmax(0,1fr))}
.denom{min-width:0}
.denom .amt{min-width:0;overflow-wrap:anywhere}
.denom .price{overflow-wrap:anywhere}
.denom-cat-title{min-width:0;overflow-wrap:anywhere}

/* 3) Baris chip kategori: RAPI KE BAWAH, tidak memanjang ke kanan.
   Pakai ID agar pasti menang atas aturan .tabs bawaan (spesifisitas sama). */
#denom-cat-filter{display:flex;flex:0 1 auto;flex-wrap:wrap;overflow:visible;
  max-width:100%;width:100%;gap:8px;margin-bottom:16px}
#denom-cat-filter .tab{flex:0 0 auto;max-width:100%;white-space:normal;text-align:center}

@media(max-width:980px){
  .detail-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:768px){
  .denoms{grid-template-columns:repeat(2,minmax(0,1fr))}
  #denom-cat-filter{gap:7px;margin-bottom:12px}
  #denom-cat-filter .tab{padding:7px 12px;font-size:12px}
  .denom-cat-title{font-size:11.5px;margin:10px 0 -2px}
  .dct-icon{width:16px;height:16px;margin-right:6px}
}

/* ══════════════════════════════════════════════════════════════════
   PANEL ADMIN — tampilan mobile untuk komponen yang baru ditambahkan
   (kategori nominal, hapus massal, filter Digiflazz, biaya pembayaran,
   dan modal-modal baru). Sebelumnya komponen ini belum punya aturan
   mobile sama sekali sehingga meluber / berdesakan di layar kecil.
   ══════════════════════════════════════════════════════════════════ */

/* Jaring pengaman: panel admin tidak boleh bisa digeser ke samping.
   PENTING — `overflow-x:hidden` hanya boleh di ≤980px. Di atas itu sidebar
   memakai position:sticky, dan overflow selain `visible` mengubah #view-admin
   jadi scroll container sehingga sticky-nya mati (sidebar ikut ter-scroll dan
   menyisakan area kosong). Di ≤980px sidebar sudah static/fixed, jadi aman. */
@media(max-width:980px){
  #view-admin{overflow-x:hidden}
}
.adm-main{max-width:100%;min-width:0}
.adm-tab,.panel{min-width:0}

@media(max-width:768px){
  /* ── Baris nominal di HP (layout A) ──
     ☐  Nama nominal .................  Rp6.600
        (nama boleh 2 baris)            modal 6.275
        [Kategori] vax1        ✓Ready ⬤ ✎ 🗑
     Harga di kanan atas = paling cepat ditemukan mata; modal tepat di
     bawahnya; baris ketiga khusus info + tombol. */
  /* Cukup 2 baris:
     Baris 1: ☐ | nama produk ............ | Rp14.700
                                            modal 13.905
     Baris 2:   | [Kategori] axp3g60d      | ✓Ready ⬤ ✎ 🗑   */
  /* Tiap nominal jadi KARTU terpisah — sebelumnya hanya dipisah garis 1px
     sehingga daftar terlihat menyatu dan sulit dibedakan antar produk. */
  .denom-row{
    /* Kolom: [checkbox] [harga = selebar isinya] [kontrol = sisa, rata kanan].
       Dulu kolom harga dapat sisa (1fr) yang tinggal ~75px sehingga teks
       "modal" meluber menimpa badge Ready & toggle. */
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:start;gap:8px 10px;padding:12px;
    /* Kartu "terangkat": gradien halus + sorotan tepi atas + bayangan */
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
    /* Bingkai ditebalkan & dicerahkan agar batas kartu jelas terlihat */
    border:2px solid rgba(255,255,255,.22);border-radius:14px;
    box-shadow:0 6px 16px -8px rgba(0,0,0,.75),
               inset 0 1px 0 rgba(255,255,255,.07);
    margin:0 12px 11px;
  }
  .denom-row:first-of-type{margin-top:3px}
  /* Latar wadah dibuat lebih gelap agar kartunya makin menonjol.
     Dibatasi ke halaman produk saja supaya accordion Digiflazz tak berubah. */
  #adm-produk .gs-body,
  #adm-produk-lain .gs-body{background:rgba(0,0,0,.22)}
  .denom-row > .denom-sel-chk{
    grid-column:1;grid-row:1 / -1;align-self:start;
    width:17px;height:17px;margin:2px 0 0;flex:none;
  }
  /* Judul memakai LEBAR PENUH (membentang ke kanan), baru membungkus
     saat benar-benar mentok. Harga & kontrol turun ke baris berikutnya. */
  /* Garis vertikal dihilangkan di HP — di dalam kartu yang sudah berbingkai
     garis itu hanya jadi noise dan terlihat terpotong. */
  .dr-label{grid-column:2 / -1;grid-row:1;align-items:center;gap:10px;
    padding-left:0;border-left:none}
  .dr-icon-box{width:34px;height:34px;border-radius:9px}
  .dr-icon{width:20px;height:20px}
  .dr-name{font-size:12.5px;line-height:1.35}
  .dr-sub{font-size:11px}
  /* Baris 2 — tag & SKU di kiri, harga di kanan */
  .dr-tags{grid-column:2;grid-row:2;gap:6px;font-size:10.5px;align-self:center;
    padding-left:0;border-left:none}
  /* Baris 3 — zona harga & aksi, dipisah garis. Harga dibuat SEBARIS
     (harga · modal) supaya tingginya sama dengan kontrol di kanan → sejajar. */
  /* Harga bertumpuk di KANAN baris tag (bukan baris sendiri) → kartu lebih
     pendek, dan tidak pernah bertabrakan karena kontrol punya baris sendiri. */
  .dr-money{grid-column:3;grid-row:2;justify-self:end;align-self:center;
    flex-direction:column;align-items:flex-end;gap:1px;
    padding:0;margin:0;border-left:none;border-top:none}
  .dr-price{font-size:15px;white-space:nowrap}
  .dr-modal{font-size:10.5px;white-space:nowrap}
  .dr-cat-tag{font-size:9px;padding:2px 6px}
  .dr-sku{font-size:10.5px;padding:4px 9px;gap:5px}
  .dr-sku svg{width:11px;height:11px}
  /* Isinya mengulang nama produk di judul — disembunyikan di HP */
  .dr-skuinfo{display:none}
  /* Kontrol di kanan baris kedua, satu garis dengan blok harga di atasnya */
  /* Kontrol: baris sendiri, MEMBENTANG penuh (justify-self:stretch) supaya
     garis pemisah di atasnya selebar kartu, isinya didorong ke kanan. */
  .dr-ctrl{grid-column:2 / -1;grid-row:3;justify-self:stretch;align-self:center;
    justify-content:flex-end;gap:7px;
    padding:10px 0 0;margin-top:1px;border-left:none;
    border-top:2px solid rgba(255,255,255,.17)}
  .dr-ctrl .dr-actions{gap:5px}
  .dr-ctrl .btn-icon{width:28px;height:28px;border-radius:8px}
  /* Badge status diramping agar kontrol tidak memakan ruang harga */
  .dr-ctrl .pill{font-size:10.5px;padding:4px 8px;gap:4px}

  /* ── Strip kategori di blok produk ── */
  .denom-cat-strip{padding:10px 14px;gap:6px}
  .dcs-label{flex:1 1 100%;font-size:11px;margin-bottom:2px}
  .dcs-list{flex:1 1 100%;gap:5px}
  .denom-cat-chip{font-size:11px;padding:5px 8px;max-width:100%}
  .dcc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38vw}
  .dcc-count{font-size:10px;padding:1px 5px}
  .dcs-add{flex:1 1 auto;text-align:center;padding:8px 10px;font-size:11.5px}
  .denom-filter-note{flex:1 1 100%;margin-left:0;font-size:11px}

  /* ── Bar pilih semua & bar hapus massal ── */
  .denom-selall-bar{padding:8px 14px;gap:8px}
  .denom-selall-lbl{font-size:11.5px}
  .denom-bulk-bar{left:10px;right:10px;bottom:12px;transform:translateY(160%);
    padding:10px 12px;gap:8px;border-radius:12px;justify-content:space-between}
  .denom-bulk-bar.show{transform:translateY(0)}
  .denom-bulk-bar .dbb-count{font-size:12px}
  .denom-bulk-bar .btn{padding:7px 11px!important;font-size:11.5px!important}

  /* ── Produk Digiflazz: tombol scope + filter ── */
  .dgf-scope-seg{flex:1 1 100%;display:flex!important;gap:6px}
  .dgf-scope-seg .btn{flex:1;padding:8px 6px!important;font-size:12px!important}
  #adm-digiflazz .ph-tools{flex-wrap:wrap;gap:8px;width:100%}
  #adm-digiflazz .adm-search-wrap{flex:1 1 100%}
  #adm-digiflazz .adm-select{flex:1 1 auto;min-width:0}
  #dgf-list{padding:10px!important}
  /* ── Katalog Digiflazz: tiap SKU jadi KARTU (senada dgn daftar nominal) ──
     Sebelumnya nama, harga, dan badge berdesakan di satu baris sehingga
     nama terpotong dan badge terhimpit. Kini nama pakai lebar penuh,
     harga & badge turun ke baris kedua. */
  .dgf-item{
    flex-wrap:wrap;align-items:center;gap:8px;
    padding:12px;margin-bottom:9px;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016));
    border:2px solid rgba(255,255,255,.20);border-radius:13px;border-top:2px solid rgba(255,255,255,.20);
    box-shadow:0 5px 14px -8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
  }
  .dgf-item:last-child{margin-bottom:0}
  .dgf-item:hover{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016))}
  /* Nama + meta SKU: lebar penuh (baris 1), dengan garis pembatas ke
     baris harga/status di bawahnya. Garis dipasang di sini karena blok ini
     sudah selebar kartu → garisnya membentang penuh. */
  .dgf-name-wrap{flex:1 1 100%;min-width:0;
    padding-bottom:10px;border-bottom:2px solid rgba(255,255,255,.17)}
  .dgf-name-wrap > div:first-child{font-size:12.5px;line-height:1.35;overflow-wrap:anywhere}
  .dgf-sku{font-size:10.5px;margin-top:3px;overflow-wrap:anywhere}
  .dgf-mapped{font-size:10.5px;margin-top:3px;overflow-wrap:anywhere;line-height:1.35}
  /* Baris 2: harga di kiri, badge & status didorong ke kanan */
  .dgf-price{font-size:14px;font-weight:700;min-width:auto;flex:0 0 auto;margin-right:auto;text-align:left}
  .dgf-map-badge{font-size:9.5px;padding:3px 8px}

  /* ── Pembayaran: tiap metode jadi KARTU (senada halaman lain) ──
     Baris 1: logo + nama + toggle (+ badge). Lalu garis pembatas, disusul
     dua blok biaya: "MDR gateway" dan "Biaya ke customer". */
  .pay-method-row{
    gap:6px 8px;padding:12px;margin:0 12px 10px;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016));
    border:2px solid rgba(255,255,255,.20);border-radius:13px;
    border-top:2px solid rgba(255,255,255,.20);
    box-shadow:0 5px 14px -8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
  }
  .pay-method-row:first-of-type{margin-top:3px}
  .pm-name{font-size:12.5px}
  .pgw-needs-badge{margin-left:0;order:4}
  /* Kedua blok biaya memakai lebar penuh agar labelnya tidak terpotong */
  .pm-field{order:11;margin-left:0;flex:1 1 100%;min-width:0}
  .pm-field-fee{order:12;margin-left:0}
  .pm-field > label{font-size:10.5px}
  /* Garis pembatas: dipasang di blok pertama (MDR) → membentang penuh */
  .pm-field-mdr{padding-top:10px;margin-top:3px;border-top:2px solid rgba(255,255,255,.17)}
  .pm-inputs{gap:5px}
  .pm-mini-input{width:100%;min-width:0;padding:7px 8px;font-size:12.5px}
  .pm-unit{width:13px;font-size:11px}

  /* ── Modal: Kelola Kategori ── */
  .dcat-row{gap:8px;padding:9px 0;flex-wrap:wrap}
  .dcat-icon{width:38px;height:38px}
  .dcat-name{flex:1 1 auto;min-width:0;font-size:12.5px}

  /* ── Modal produk: editor form isian ──
     Tiga kolom (Label · Kode · Contoh) tidak muat di HP, jadi ditumpuk dan
     baris tombolnya turun ke bawah dengan garis pemisah. */
  .fld-row{flex-wrap:wrap;gap:7px;padding:10px}
  .fld-grid,.fld-hidekey .fld-grid{grid-template-columns:1fr;flex:1 1 100%;gap:6px}
  .fld-tools{flex:1 1 100%;justify-content:flex-end;padding-top:8px;border-top:1px solid var(--border-2)}
  .fld-row label.fld-req{margin-right:auto}
  .fld-preset-btn{font-size:11px;padding:5px 10px}
  .cnf-preview,.cnf-warn{font-size:11px}

  /* ── Modal: kategori pada form nominal & pilih SKU ── */
  .denom-cat-box{gap:6px}
  .denom-cat-chk{font-size:12px;padding:6px 9px}
  .mm-product-row{gap:9px;padding:10px 12px}
  .mm-check{width:18px;height:18px}
  #modal-map-cat-wrap > div{flex-direction:column;gap:8px}
  #modal-map-cat-wrap .adm-select,#modal-map-cat-wrap .adm-input{width:100%;min-width:0}

  /* ── Dashboard & Keuangan: kartu statistik lebih ringkas ──
     Sebelumnya ikon menempati barisnya sendiri sehingga kartu tinggi dan
     banyak ruang kosong. Kini ikon sejajar di kiri angka: 2 baris saja
     (angka + keterangan), kartu ~35% lebih pendek dan lebih mudah dibaca. */
  /* column-gap sengaja 0 dan jaraknya ditaruh di margin ikon, supaya kartu
     yang TIDAK punya ikon (mis. "Omzet Sebelum Diskon") tetap rata kiri. */
  .stat{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    align-items:center;column-gap:0;row-gap:1px;padding:12px;
  }
  .stat .si{grid-column:1;grid-row:1 / span 2;margin:0 10px 0 0;align-self:center}
  .stat .sv{grid-column:2;grid-row:1;font-size:16.5px;overflow-wrap:anywhere}
  .stat .sl{grid-column:2;grid-row:2;margin-top:0;font-size:10.5px}
  /* Keuangan: angkanya paling panjang ("Rp 12.480.000") dan pada kartu 2 kolom
     ia pecah jadi dua baris. Mengecilkan font sampai muat butuh 12px — terlalu
     kecil untuk angka utama. Ikonnya justru seragam (semua ikon uang) sehingga
     tidak menambah informasi, jadi ikon yang disembunyikan dan angka mendapat
     lebar penuh. overflow-wrap tetap aktif sebagai pengaman. */
  #adm-keuangan .stat .si{display:none}
  #adm-keuangan .stat .sv{font-size:15px}

  /* ── Tabel transaksi → KARTU (Dashboard & halaman Transaksi) ──
     8 kolom terlalu banyak untuk layar HP: tabel memaksa geser ke samping
     sehingga Status/Total/Aksi tidak pernah terlihat. Di HP tiap baris
     tabel ditampilkan sebagai kartu 2 kolom x 4 baris:
        [ML] Mobile Legend        ✓ Sukses
             5 Diamond              Rp5.300
        ──────────────────────────────────
        QRIS                    2 jam lalu
        INVMRVWX…                 [🔍] [🗑]
     Desktop tetap memakai tabel seperti biasa. */
  .tbl-scroll{overflow:visible}
  .tbl,.tbl tbody{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;gap:0 10px;
    padding:11px 12px;margin-bottom:9px;
    background:rgba(255,255,255,.02);
    border:1px solid var(--border);border-radius:13px;
  }
  .tbl tr:last-child{margin-bottom:0}
  .tbl tr:hover td{background:transparent}
  .tbl td{display:block;padding:0;border:none;white-space:normal;min-width:0}
  /* Baris 1 — game | status */
  .tbl td:nth-child(2){grid-column:1;grid-row:1;min-width:0}
  .tbl td:nth-child(6){grid-column:2;grid-row:1;justify-self:end}
  /* Baris 2 — item | total. Item diberi indent agar SEJAJAR dengan nama game
     (lebar badge 26px + jarak 8px), bukan menempel ke tepi kiri kartu. */
  .tbl td:nth-child(3){grid-column:1;grid-row:2;padding-left:34px;margin-top:1px;
    font-size:11.5px;color:var(--muted);overflow-wrap:anywhere;line-height:1.35}
  .tbl td:nth-child(4){grid-column:2;grid-row:2;justify-self:end;margin-top:1px;
    font-size:14px;font-weight:700;color:var(--gold);white-space:nowrap}
  /* Baris 3 (dipisah garis) — metode | waktu */
  .tbl td:nth-child(5),
  .tbl td:nth-child(7){grid-row:3;font-size:11px;margin-top:9px;padding-top:9px;
    border-top:1px solid var(--border-2);color:var(--muted)}
  .tbl td:nth-child(5){grid-column:1}
  .tbl td:nth-child(7){grid-column:2;justify-self:end;white-space:nowrap}
  /* Baris 4 — invoice | aksi */
  .tbl td:nth-child(1){grid-column:1;grid-row:4;align-self:center;margin-top:6px;
    font-size:10px;letter-spacing:.02em;color:#6f74a0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tbl td:nth-child(8){grid-column:2;grid-row:4;justify-self:end;margin-top:6px}
  .tbl .gname{gap:8px;font-size:12.5px;min-width:0;font-weight:600}
  .tbl .gname .gt2{width:26px;height:26px;font-size:11px}
  .tbl .pill{font-size:10.5px;padding:4px 9px}
  .tbl .tx-actions .btn-icon{width:26px;height:26px;border-radius:6px}
  /* Baris "Memuat…" / kosong (pakai colspan) tetap satu blok utuh */
  .tbl td[colspan]{grid-column:1 / -1;grid-row:auto;justify-self:stretch;
    text-align:center;margin:0;padding:6px 0;border-top:none}

  /* ── Mapping Game / Non-Game: tiap baris jadi KARTU (senada halaman lain) ──
     Dulu nama, tag game, info SKU, status, dan tombol berdesakan dan hanya
     dipisah garis tipis. Kini: nama (baris 1), info SKU (baris 2, dipisah
     garis), lalu status + tombol rata kanan (baris 3). */
  #adm-mapping-game .tbl-scroll,#adm-mapping-nongame .tbl-scroll{overflow:visible}
  .map-row{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto auto;
    align-items:center;gap:7px 8px;padding:12px;margin:0 12px 10px;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016));
    border:2px solid rgba(255,255,255,.20);border-radius:13px;
    box-shadow:0 5px 14px -8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
  }
  .map-row:first-of-type{margin-top:3px}
  .map-row:hover{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016))}
  /* Baris 1 — nama nominal + tag game */
  .map-row > div:nth-child(1){grid-column:1 / -1;grid-row:1;min-width:0}
  .map-denom{font-size:12.5px;line-height:1.35}
  .map-game-tag{font-size:10.5px;margin-top:3px}
  /* Baris 2 — info SKU / peringatan, dipisah garis selebar kartu */
  .map-row > div:nth-child(2){
    grid-column:1 / -1;grid-row:2;min-width:0;overflow:visible;
    padding-bottom:9px;border-bottom:2px solid rgba(255,255,255,.17);
  }
  /* Info SKU tidak dipotong elipsis lagi — boleh 2 baris karena ruang penuh */
  .map-row > div:nth-child(2) > div{
    white-space:normal!important;overflow:hidden;font-size:10.5px;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  .map-warn-text{font-size:10.5px!important;white-space:normal!important;overflow:visible;text-overflow:clip}
  /* Baris 3 — status + tombol, rata kanan */
  .map-row > .ind{grid-column:1;grid-row:3;justify-self:end;margin:0}
  .map-row > button{grid-column:2;grid-row:3;margin:0;padding:7px 14px!important;font-size:12px!important}

  /* ── Transaksi: tombol aksi (detail + hapus) ── */
  .tx-actions{gap:4px;justify-content:flex-end;flex-wrap:nowrap}
  .tx-actions .btn-icon{width:28px;height:28px;border-radius:7px}

  /* ── Kelola Promo: tiap promo jadi KARTU (senada halaman lain) ──
     Info promo di atas, lalu garis pembatas, lalu toggle + Edit/Hapus. */
  .promo-adm-item{
    flex-wrap:wrap;align-items:center;gap:8px;
    padding:12px;margin:0 12px 10px;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016));
    border:2px solid rgba(255,255,255,.20)!important;border-radius:13px;
    box-shadow:0 5px 14px -8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
  }
  .promo-adm-item:first-child{margin-top:3px}
  .pai-main{flex:1 1 100%;min-width:0;margin-bottom:0}
  .pai-meta{font-size:10.8px;line-height:1.65;gap:2px 8px;margin-top:5px}
  /* Baris aksi: lebar penuh, dipisah garis, tombol didorong ke kanan */
  .pai-actions{
    flex:1 1 100%;margin:2px 0 0;padding-top:10px;
    border-top:2px solid rgba(255,255,255,.17);
  }

  /* ── Modal Promo: centang kategori & game ── */
  .promo-chk-box{gap:6px;max-height:150px}
  .promo-chk{font-size:11.5px;padding:6px 9px;gap:6px;max-width:100%}

  /* Semua modal: tidak melebihi layar */
  .adm-modal{max-width:calc(100vw - 20px)}
  .adm-modal .am-body{overflow-x:hidden}
  .am-footer{flex-wrap:wrap;gap:8px}
  .am-footer .btn{flex:1 1 auto;white-space:nowrap}
}

@media(max-width:480px){
  .dcc-name{max-width:32vw}
  .pm-field{flex:1 1 100%}
  .denom-cat-strip{padding:9px 12px}
  /* Dua tombol berdampingan (bukan menumpuk penuh) agar hemat ruang */
  .dcs-add{flex:1 1 calc(50% - 4px);min-width:0;padding:8px 6px;font-size:11px}
  /* Kartu statistik: tetap ringkas di layar sangat kecil */
  .stat{padding:10px;column-gap:0}
  .stat .si{width:30px;height:30px;margin:0 8px 0 0}
  .stat .sv{font-size:15.5px}
  .stat .sl{font-size:9.8px}
}

/* Kartu produk berubah dari <div> menjadi <a>. Sebagai anak grid keduanya sudah
   otomatis jadi blok, tapi ditegaskan di sini supaya tidak bergantung pada itu —
   <a> yang tetap inline akan mengabaikan aspect-ratio dan merusak barisnya. */
a.game{display:block}
a.pop{display:flex}

/* ---------- Blok isi halaman produk (/game/{slug}) ----------
   Dirender server, jadi isinya ada di HTML tanpa menunggu JavaScript. Ini yang
   dibaca Google. Tetap terlihat pengunjung — bukan teks tersembunyi, karena
   menyembunyikan teks khusus mesin pencari justru melanggar aturan Google. */
.seo-produk{padding:38px 0 8px;border-top:1px solid var(--border-2);margin-top:34px}
.seo-produk h2{font-family:'Chakra Petch',sans-serif;font-size:25px;font-weight:700;letter-spacing:.01em;margin-bottom:6px}
.seo-produk h3{font-family:'Chakra Petch',sans-serif;font-size:18px;font-weight:600;margin:26px 0 12px}
.seo-produk p{color:var(--muted);font-size:14px;line-height:1.65;max-width:70ch}
.seo-produk .sp-pub{font-size:13px;margin-bottom:10px}
.seo-produk .sp-note{font-size:12.5px;margin-top:12px}
/* Tabel harga bisa panjang di layar sempit — gulirannya dikurung di sini supaya
   badan halaman tidak pernah ikut bergeser mendatar. */
.sp-tabel-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--glass)}
.sp-tabel{width:100%;border-collapse:collapse;font-size:13.5px}
.sp-tabel th,.sp-tabel td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--border-2)}
.sp-tabel thead th{color:var(--cyan);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.sp-tabel tbody tr:last-child td{border-bottom:none}
.sp-tabel td:last-child{white-space:nowrap;font-weight:600;color:var(--text)}
.sp-tabel .sp-sub{color:var(--muted);font-size:12px}
@media(max-width:720px){
  .seo-produk{padding-top:28px;margin-top:26px}
  .seo-produk h2{font-size:21px}
  .sp-tabel th,.sp-tabel td{padding:10px 12px}
}

/* Peringatan nominal khusus wilayah pada ringkasan pesanan. Sengaja mencolok:
   pembeli memilih nominal ini justru karena harganya lebih murah, jadi
   keterangannya harus menang melawan godaan itu. */
.sum-warn{
  margin-top:8px;padding:9px 11px;border-radius:10px;font-size:12.3px;line-height:1.5;
  color:#ffd98a;background:rgba(255,201,57,.10);border:1px solid rgba(255,201,57,.32);
}
.sum-warn b{color:var(--gold)}

/* ---------- Hasil pemeriksaan ID akun ----------
   Muncul tepat di bawah kolom isian, tempat mata pembeli sudah berada. */
.acc-cek{margin-top:10px;padding:10px 13px;border-radius:11px;font-size:13.2px;line-height:1.5;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.acc-cek.memuat{color:var(--muted);background:var(--glass-2);border:1px solid var(--border-2)}
.acc-cek.ok{color:#8ff5c6;background:rgba(74,255,164,.09);border:1px solid rgba(74,255,164,.30)}
.acc-cek.ok b{color:#4affa4;font-size:14.5px;font-weight:700}
.acc-cek.gagal{color:#ffb4b4;background:rgba(255,82,82,.10);border:1px solid rgba(255,82,82,.32)}
.acc-cek .acc-reg{font-size:11px;letter-spacing:.06em;padding:2px 7px;border-radius:999px;background:rgba(74,255,164,.16);color:#8ff5c6}

/* ---------- Peringatan dashboard admin ----------
   Ditaruh di puncak halaman supaya terlihat tanpa dicari. */
.dash-alert{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;
  padding:12px 15px;border-radius:12px;font-size:13.5px;line-height:1.5}
.dash-alert b{font-weight:700}
.dash-alert.bahaya{color:#ffb4b4;background:rgba(255,82,82,.10);border:1px solid rgba(255,82,82,.34)}
.dash-alert.bahaya b{color:#ff6b6b}
.dash-alert.awas{color:#ffd98a;background:rgba(255,201,57,.10);border:1px solid rgba(255,201,57,.32)}
.dash-alert.awas b{color:var(--gold)}
.dash-alert .btn-sm{padding:6px 12px;font-size:12.5px;margin-left:auto}
/* Rincian di dalam kartu peringatan. Induknya flex-wrap, jadi tanpa flex-basis
   penuh baris-barisnya akan berdesakan di sisa ruang tombol. */
.dash-alert small{flex:0 0 100%;opacity:.72;font-size:12px}
.dash-alert-list{flex:0 0 100%;max-height:260px;overflow-y:auto;margin-top:2px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.10);font-size:12.5px}
.dash-alert-list div{padding:4px 0}
.dash-alert-list code{font-size:11.5px;opacity:.8;padding:1px 6px;border-radius:5px;
  background:rgba(255,255,255,.07)}
.dash-alert-list .muted{opacity:.6}
/* Pemberitahuan nominal ber-SKU mati di dalam blok produk. Sengaja tenang, bukan
   merah: tidak ada yang rusak dan tidak ada pembeli yang dirugikan — ini cuma
   keterangan bahwa daftarnya memang sudah disaring. */
.denom-mati-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 18px;font-size:12px;color:var(--muted);
  border-bottom:1px solid var(--border-2);background:rgba(255,201,57,.05)}
.denom-mati-note b{color:var(--gold);font-weight:700}
.denom-mati-note a{color:var(--gold);text-decoration:underline;cursor:pointer}
/* Penanda kecil di baris ringkasan produk (mis. "25 belum berkategori"). */
.warn-inline{color:var(--gold)}
/* Kolom kode wilayah pada baris kategori nominal — sempit, cukup untuk "PH". */
.dcat-row .dcat-region{max-width:96px;flex:0 0 96px;text-align:center;text-transform:uppercase;letter-spacing:.08em}