/* =====================================================================
   DIGIMEMBER v2 — Halaman toko: produk, checkout, invoice, member area
   (memakai token & komponen base.css + landing.css)
   ===================================================================== */
body.toko { min-height:100vh; }
.tk-main { padding-top:20px; padding-bottom:60px; }
.crumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin:6px 0 18px; flex-wrap:wrap; }
.crumb a:hover { color:var(--ink); }
.crumb .ic { width:14px; height:14px; }
.nav-akun { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px 0 6px; border-radius:99px; background:var(--surface-muted); font-weight:600; font-size:14px; color:var(--navy); }
.nav-akun .avatar { width:30px; height:30px; }
.nav-akun:hover { background:#e8ebf1; }
.tk-foot { margin-top:60px; padding:24px 0 32px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:13px; }
.tk-foot a:hover { color:var(--ink); }
.two-col { display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(320px, 1fr); gap:24px; align-items:start; }
.sticky { position:sticky; top:104px; }
.sec-title { font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--navy); margin-bottom:4px; }
.sec-sub { color:var(--muted); font-size:14px; margin-bottom:16px; }
.stack { display:flex; flex-direction:column; gap:20px; }
.row-between { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.lock-note { display:flex; gap:10px; align-items:flex-start; background:var(--surface-muted); border-radius:var(--radius-inner); padding:12px 14px; font-size:13px; color:var(--text); }
.lock-note .ic { color:var(--navy); margin-top:1px; }

/* ---------- Halaman produk ---------- */
.pd-hero { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:28px; padding:24px; }
.pd-hero .detail-gal { margin:0 0 10px; aspect-ratio:4/3; }
.pd-hero h1 { font-size:clamp(26px, 3.2vw, 38px); font-weight:800; letter-spacing:-.03em; line-height:1.12; margin:12px 0 10px; }
.pd-desc { font-size:15px; line-height:1.75; color:var(--text); white-space:pre-line; }
.pd-meta { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.pd-ring { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:18px; }
.pd-ring > div { background:var(--surface-muted); border-radius:16px; padding:12px 14px; }
.pd-ring strong { display:block; font-size:20px; font-weight:800; color:var(--navy); letter-spacing:-.02em; }
.pd-ring span { font-size:12px; color:var(--muted); }
.buy-card { padding:24px; }
.buy-card .harga-besar .price { font-size:34px; }
.buy-card .coret { display:flex; align-items:center; gap:10px; margin-top:4px; font-size:14px; color:var(--muted); }
.buy-card .coret s { color:var(--muted); }
.buy-list { list-style:none; margin:18px 0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.buy-list li { display:flex; gap:10px; align-items:flex-start; }
.buy-list .ic { color:var(--success); margin-top:1px; }
.buy-actions { display:flex; flex-direction:column; gap:10px; }
.isi-list { display:flex; flex-direction:column; gap:10px; }
.isi-item { display:flex; align-items:center; gap:14px; background:#fff; box-shadow:inset 0 0 0 1px var(--border); border-radius:var(--radius-inner); padding:12px 14px; }
.isi-item .ii-ic { width:40px; height:40px; border-radius:12px; background:var(--surface-muted); display:grid; place-items:center; flex:none; color:var(--navy); }
.isi-item .ii-tx { flex:1; min-width:0; }
.isi-item .ii-tx strong { display:block; font-size:14px; color:var(--navy); }
.isi-item .ii-tx span { font-size:12px; color:var(--muted); }
.isi-item .ii-end { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; flex:none; }
.isi-item.free { box-shadow:inset 0 0 0 1.5px var(--lime); }
.isi-item.done .ii-ic { background:var(--lime); color:var(--ink); }
.isi-item.on { background:var(--ink); box-shadow:none; }
.isi-item.on .ii-tx strong { color:#fff; } .isi-item.on .ii-tx span, .isi-item.on .ii-end { color:#A9AFBF; }
.isi-item.on .ii-ic { background:#1E1E25; color:var(--lime); }
button.isi-item { width:100%; text-align:left; transition:background .2s, box-shadow .2s; }
button.isi-item:hover:not(.on) { background:var(--surface-muted); }
.bab { margin-top:6px; }
.bab-head { display:flex; align-items:center; gap:12px; padding:10px 2px; font-weight:700; color:var(--navy); font-size:15px; }
.bab-head .acc-num { width:30px; height:30px; font-size:12px; }
.bab-head small { margin-left:auto; font-weight:500; color:var(--muted); font-size:12px; }
.bab-body { display:flex; flex-direction:column; gap:8px; padding-left:42px; }
.sesi-card { display:grid; grid-template-columns:72px 1fr auto; gap:14px; align-items:center; background:#fff; box-shadow:inset 0 0 0 1px var(--border); border-radius:18px; padding:12px; }
.sesi-date { background:var(--ink); color:#fff; border-radius:14px; text-align:center; padding:8px 4px; line-height:1.1; }
.sesi-date b { display:block; font-size:22px; font-weight:800; color:var(--lime); }
.sesi-date span { font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.sesi-card.lewat .sesi-date { background:var(--surface-muted); color:var(--muted); }
.sesi-card.lewat .sesi-date b { color:var(--muted); }
.sesi-card strong { display:block; color:var(--navy); font-size:15px; }
.sesi-card .meta { font-size:12px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; margin-top:2px; }
.sesi-card .meta .ic { width:13px; height:13px; }
.bundle-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.bundle-item { display:flex; flex-direction:column; gap:10px; background:#fff; box-shadow:inset 0 0 0 1px var(--border); border-radius:18px; padding:10px; transition:transform .2s var(--ease), box-shadow .2s; }
.bundle-item:hover { transform:translateY(-3px); box-shadow:0 0 0 1.5px var(--lime), 0 16px 40px -18px rgba(150,190,10,.6); }
.bundle-item img { aspect-ratio:16/10; object-fit:cover; border-radius:12px; width:100%; background:var(--surface-muted); }
.bundle-item strong { font-size:14px; color:var(--navy); }
.hemat-box { display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--lime); border-radius:18px; padding:14px 16px; margin-top:14px; font-weight:700; color:var(--ink); }
.mobile-buy { display:none; }

/* ---------- Checkout ---------- */
.steps { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
.steps span { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px 0 6px; border-radius:99px; background:#fff; font-size:13px; font-weight:600; color:var(--muted); }
.steps span i { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--surface-muted); font-style:normal; font-size:12px; }
.steps span.on { background:var(--ink); color:#fff; } .steps span.on i { background:var(--lime); color:var(--ink); }
.steps span.done i { background:var(--success); color:#fff; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.form-grid .full { grid-column:1 / -1; }
.pay-list { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.pay-opt { position:relative; display:flex; align-items:center; gap:12px; padding:14px; border-radius:18px; background:var(--surface-muted); cursor:pointer;
  transition:box-shadow .2s, background .2s; border:0; text-align:left; width:100%; }
.pay-opt:hover { background:#eceff4; }
.pay-opt.on { background:#fff; box-shadow:0 0 0 2px var(--ink); }
.pay-opt .pay-logo { width:46px; height:46px; border-radius:14px; background:#fff; display:grid; place-items:center; font-weight:800; font-size:13px; color:var(--navy); flex:none; overflow:hidden; box-shadow:inset 0 0 0 1px var(--border); }
.pay-opt.on .pay-logo { background:var(--lime); box-shadow:none; color:var(--ink); }
.pay-opt .pay-logo img { width:100%; height:100%; object-fit:contain; }
.pay-opt strong { display:block; font-size:14px; color:var(--navy); }
.pay-opt span { font-size:12px; color:var(--muted); }
.pay-opt .radio { margin-left:auto; width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 2px #c9cfdb; flex:none; }
.pay-opt.on .radio { box-shadow:inset 0 0 0 6px var(--ink); }
.kupon-row { display:flex; gap:8px; }
.kupon-row .input { text-transform:uppercase; }
.kupon-ok { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--success-soft); color:var(--success); border-radius:14px; padding:10px 14px; font-size:13px; font-weight:600; margin-top:8px; }
.rincian { display:flex; flex-direction:column; gap:10px; font-size:14px; }
.rincian .r { display:flex; justify-content:space-between; gap:12px; color:var(--text); }
.rincian .r span:first-child { color:var(--muted); }
.rincian .r.minus span:last-child { color:var(--success); font-weight:600; }
.rincian .total { border-top:1px dashed var(--border); padding-top:14px; margin-top:4px; align-items:baseline; }
.rincian .total span:first-child { color:var(--navy); font-weight:700; }
.rincian .total .price { font-size:28px; color:var(--navy); }
.sum-prod { display:flex; gap:12px; align-items:center; margin-bottom:16px; }
.sum-prod img { width:76px; height:58px; border-radius:14px; object-fit:cover; flex:none; background:var(--surface-muted); }
.sum-prod strong { display:block; font-size:15px; color:var(--navy); line-height:1.3; }
.akun-note { display:flex; gap:10px; background:var(--blue-soft); color:#1446a0; border-radius:16px; padding:12px 14px; font-size:13px; margin-bottom:16px; }
.akun-note a, .akun-note button { font-weight:700; text-decoration:underline; color:inherit; }

/* ---------- Invoice ---------- */
.inv-status { display:flex; align-items:center; gap:16px; padding:20px 24px; border-radius:var(--radius-card); background:var(--surface); }
.inv-status .st-dot { width:56px; height:56px; border-radius:18px; display:grid; place-items:center; flex:none; }
.inv-status h1 { font-size:22px; font-weight:800; letter-spacing:-.02em; }
.inv-status p { color:var(--muted); font-size:14px; margin-top:2px; }
.inv-status.s-bayar .st-dot { background:var(--warning-soft); color:#B45309; }
.inv-status.s-verif .st-dot { background:var(--blue-soft); color:#1B6EF3; }
.inv-status.s-lunas { background:var(--lime); } .inv-status.s-lunas .st-dot { background:var(--ink); color:var(--lime); } .inv-status.s-lunas p { color:#3f4a12; }
.inv-status.s-tolak .st-dot { background:var(--danger-soft); color:var(--danger); }
.inv-status.s-mati .st-dot { background:var(--surface-muted); color:var(--muted); }
.countdown { display:flex; gap:8px; margin-left:auto; }
.countdown div { background:var(--ink); color:#fff; border-radius:14px; padding:8px 10px; text-align:center; min-width:58px; }
.countdown b { display:block; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--lime); font-variant-numeric:tabular-nums; }
.countdown span { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#A9AFBF; }
.amount { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--ink); color:#fff; border-radius:20px; padding:18px 20px; }
.amount .lbl { font-size:12px; color:#A9AFBF; text-transform:uppercase; letter-spacing:.08em; }
.amount .val { font-size:32px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.amount .val .uniq { color:var(--lime); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }
.amount .btn { background:#1E1E25; color:#fff; }
.amount-note { display:flex; gap:8px; font-size:13px; color:var(--text); background:var(--warning-soft); border-radius:14px; padding:10px 14px; margin-top:10px; }
.amount-note .ic { color:#B45309; }
.rek-box { display:flex; align-items:center; gap:14px; background:var(--surface-muted); border-radius:18px; padding:14px 16px; margin-top:14px; }
.rek-box .pay-logo { width:52px; height:52px; border-radius:16px; background:#fff; display:grid; place-items:center; font-weight:800; color:var(--navy); flex:none; overflow:hidden; }
.rek-box .pay-logo img { width:100%; height:100%; object-fit:contain; }
.rek-box .nomor { font-size:20px; font-weight:800; color:var(--navy); letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.rek-box .an { font-size:13px; color:var(--muted); }
.qris-img { width:240px; max-width:100%; aspect-ratio:1; object-fit:contain; background:#fff; border-radius:18px; padding:10px; margin:14px auto 0; box-shadow:inset 0 0 0 1px var(--border); }
.upload { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; border:2px dashed #CBD1DC; border-radius:18px; padding:22px; cursor:pointer;
  background:var(--surface-muted); transition:border-color .2s, background .2s; color:var(--muted); font-size:13px; }
.upload:hover, .upload.drag { border-color:var(--ink); background:#fff; }
.upload strong { color:var(--navy); font-size:14px; }
.upload img { max-height:180px; border-radius:12px; object-fit:contain; }
.timeline { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.timeline li { position:relative; padding:0 0 16px 26px; font-size:13px; }
.timeline li::before { content:''; position:absolute; left:6px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--ink); }
.timeline li::after { content:''; position:absolute; left:10px; top:18px; bottom:0; width:1px; background:var(--border); }
.timeline li:last-child::after { display:none; }
.timeline li:first-child::before { background:var(--lime); box-shadow:0 0 0 3px var(--ink); }
.timeline b { display:block; color:var(--navy); font-weight:600; }
.timeline span { color:var(--muted); font-size:12px; }
.alert { display:flex; gap:10px; border-radius:16px; padding:12px 14px; font-size:13px; }
.alert-danger { background:var(--danger-soft); color:#9F1D21; }
.alert-info { background:var(--blue-soft); color:#1446a0; }
.alert-ok { background:var(--success-soft); color:#17663a; }
.alert .ic { flex:none; margin-top:1px; }

/* ---------- Member area ---------- */
.mb-shell { display:grid; grid-template-columns:260px minmax(0, 1fr); gap:20px; align-items:start; }
.mb-side { padding:16px; position:sticky; top:104px; }
.mb-user { display:flex; align-items:center; gap:12px; padding:6px 6px 14px; border-bottom:1px solid var(--border); margin-bottom:10px; }
.mb-user strong { display:block; color:var(--navy); font-size:15px; }
.mb-user span { font-size:12px; color:var(--muted); word-break:break-all; }
.mb-nav a, .mb-nav button { display:flex; align-items:center; gap:12px; height:46px; padding:0 14px; border-radius:14px; font-weight:600; color:var(--muted); font-size:14px; width:100%; transition:background .2s, color .2s; }
.mb-nav a:hover, .mb-nav button:hover { background:var(--surface-muted); color:var(--navy); }
.mb-nav a.on { background:var(--ink); color:#fff; }
.mb-nav a.on .ic { color:var(--lime); }
.mb-nav .cnt { margin-left:auto; }
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px; }
.mp-card { display:flex; flex-direction:column; gap:12px; background:#fff; border-radius:var(--radius-card); padding:14px; transition:transform .25s var(--ease), box-shadow .25s; text-align:left; width:100%; }
.mp-card:hover { transform:translateY(-4px); box-shadow:0 0 0 1.5px var(--lime), 0 20px 50px -20px rgba(150,190,10,.6); }
.mp-card .img { aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:var(--surface-muted); position:relative; }
.mp-card .img img { width:100%; height:100%; object-fit:cover; }
.mp-card .img .badge { position:absolute; left:10px; top:10px; }
.mp-card strong { font-size:16px; color:var(--navy); line-height:1.3; }
.progress { height:6px; border-radius:99px; background:var(--surface-muted); overflow:hidden; }
.progress i { display:block; height:100%; background:var(--lime); border-radius:99px; box-shadow:0 0 8px rgba(176,213,0,.6); }
.mp-card.habis { opacity:.6; }
.viewer { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:20px; align-items:start; }
.player { aspect-ratio:16/9; border-radius:20px; overflow:hidden; background:var(--ink); position:relative; }
.player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.player .ph { position:absolute; inset:0; display:grid; place-items:center; color:#A9AFBF; text-align:center; padding:20px; }
.teks-materi { font-size:15px; line-height:1.8; white-space:pre-line; background:var(--surface-muted); border-radius:18px; padding:18px 20px; }
.asset-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px; }
.asset { display:flex; flex-direction:column; gap:12px; background:#fff; box-shadow:inset 0 0 0 1px var(--border); border-radius:20px; padding:16px; }
.asset .a-ic { width:46px; height:46px; border-radius:14px; background:var(--lime); color:var(--ink); display:grid; place-items:center; }
.asset strong { font-size:15px; color:var(--navy); }
.asset p { font-size:13px; color:var(--muted); }
.asset .btn { margin-top:auto; }
.lisensi { display:flex; align-items:center; gap:12px; background:var(--ink); color:#fff; border-radius:20px; padding:16px 18px; }
.lisensi .k { font-family:ui-monospace, monospace; font-size:18px; font-weight:700; color:var(--lime); letter-spacing:.04em; word-break:break-all; flex:1; }
.lisensi .btn { background:#1E1E25; color:#fff; }
.tbl-mini { width:100%; border-collapse:collapse; font-size:14px; }
.tbl-mini th { text-align:left; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; padding:8px 10px; font-weight:600; }
.tbl-mini td { padding:12px 10px; border-top:1px solid var(--border); vertical-align:middle; }
.st-badge.s-Lunas { background:var(--success-soft); color:var(--success); }
.st-badge.s-Menunggu-Pembayaran { background:var(--warning-soft); color:#B45309; }
.st-badge.s-Menunggu-Verifikasi { background:var(--blue-soft); color:#1B6EF3; }
.st-badge.s-Ditolak { background:var(--danger-soft); color:var(--danger); }
.st-badge.s-Kedaluwarsa, .st-badge.s-Dibatalkan { background:var(--surface-muted); color:var(--muted); }
.login-card { max-width:460px; margin:20px auto; padding:30px; }
.tabs-pill { display:flex; background:var(--surface-muted); border-radius:99px; padding:4px; margin:18px 0; }
.tabs-pill button { flex:1; height:38px; border-radius:99px; font-weight:600; font-size:14px; color:var(--muted); }
.tabs-pill button.on { background:var(--ink); color:#fff; }
.or { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; margin:16px 0; }
.or::before, .or::after { content:''; flex:1; height:1px; background:var(--border); }
.redeem-box { display:flex; gap:10px; }
.redeem-box .input { text-transform:uppercase; letter-spacing:.06em; font-family:ui-monospace, monospace; }

/* ---------- Responsif ---------- */
@media (max-width:1024px) {
  .two-col, .viewer { grid-template-columns:1fr; }
  .sticky { position:static; }
  .pd-hero { grid-template-columns:1fr; }
  .mb-shell { grid-template-columns:1fr; }
  .mb-side { position:static; }
  .mb-nav { display:flex; overflow-x:auto; gap:6px; scrollbar-width:none; }
  .mb-nav::-webkit-scrollbar { display:none; }
  .mb-nav a, .mb-nav button { width:auto; flex:none; }
  .mb-user { display:none; }
}
@media (max-width:640px) {
  .pd-hero { padding:14px; }
  .pd-ring { grid-template-columns:repeat(3, 1fr); gap:6px; }
  .pd-ring strong { font-size:17px; }
  .form-grid, .pay-list { grid-template-columns:1fr; }
  .inv-status { flex-wrap:wrap; padding:16px; }
  .countdown { margin-left:0; width:100%; }
  .countdown div { flex:1; }
  .amount { flex-direction:column; align-items:stretch; }
  .amount .val { font-size:28px; }
  .sesi-card { grid-template-columns:60px 1fr; }
  .sesi-card > :last-child { grid-column:1 / -1; }
  .bab-body { padding-left:0; }
  .mobile-buy { display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:700; background:#fff; border-radius:22px; padding:10px 10px 10px 18px;
    box-shadow:var(--shadow-modal); align-items:center; justify-content:space-between; gap:10px; }
  .mobile-buy .price { font-size:20px; }
  body.has-mobile-buy .wa-float { bottom:92px; }
  .login-card { padding:22px 18px; }
}
@media print {
  .nav-wrap, .wa-float, .kupu, .no-print, .tk-foot, .toast-wrap { display:none !important; }
  body { background:#fff; }
  .card, .inv-status { box-shadow:none !important; border:1px solid #ddd; }
  .two-col { grid-template-columns:1fr; }
}
@media (max-width:640px) { .hide-sm { display:none; } .nav-akun { padding:0 6px; } }
.nav-menu a.on { color:#fff; }
.tk-foot .brand-name { font-size:inherit; font-weight:700; }
.pay-opt .pay-logo, .rek-box .pay-logo { font-size:11px; letter-spacing:-.02em; text-align:center; line-height:1.1; padding:2px; }
.sesi-card .meta span, .isi-item .ii-end { display:inline-flex; align-items:center; gap:4px; }
#vBody { display:flex; flex-direction:column; gap:20px; }