/* == BERKAS TURUNAN (dihasilkan scripts/bangun-tema-turunan.js, jangan disunting tangan) ==
   Tema hud-terang = badan hud.css + web/tema-sumber/hud-terang.lapisan.css.
   Sunting salah satu sumbernya, lalu jalankan: npm run tema:bangun */
/* == JEMBATAN TOKEN (dihasilkan storefrontTema, jangan disunting tangan) == */
html[data-tema="hud-terang"]{
  --t-bg:var(--bg,#f4f6fa);--t-frame:color-mix(in srgb,var(--bg,#f4f6fa) 82%,var(--txt,#162033));
  --t-surface:var(--card,#fff);--t-field:color-mix(in srgb,var(--card,#fff) 95%,var(--txt,#162033));
  --t-fill:color-mix(in srgb,var(--card,#fff) 92%,var(--txt,#162033));--t-line:var(--line,#dfe5ee);
  --t-text:var(--txt,#162033);--t-muted:var(--muted,#667085);--t-subtle:color-mix(in srgb,var(--muted,#667085) 70%,var(--card,#fff));
  --t-on-bg:var(--txt,#162033);--t-on-bg-muted:var(--muted,#667085);
  --t-on-bg-link:color-mix(in srgb,var(--brand,#4f7cff) 78%,var(--txt,#162033));
  --t-accent:var(--brand,#4f7cff);--t-accent-d:var(--brand-d,#3959be);--t-on-accent:#fff;
  --t-accent-text:color-mix(in srgb,var(--brand,#4f7cff) 78%,var(--txt,#162033));
  --t-accent-soft:color-mix(in srgb,var(--brand,#4f7cff) 12%,var(--card,#fff));
  --t-accent-line:color-mix(in srgb,var(--brand,#4f7cff) 32%,var(--line,#dfe5ee));
  --t-deep:color-mix(in srgb,var(--brand-d,#3959be) 30%,#0b1224);--t-deep-2:color-mix(in srgb,var(--brand,#4f7cff) 38%,#101a33);
  --t-on-deep:#fff;--t-on-deep-muted:rgba(255,255,255,.74);--t-scrim:rgba(6,8,14,.64);
  --t-ok:#22a95b;--t-ok-d:#13804a;--t-ok-soft:var(--ok-bg,#e9f9ef);--t-ok-text:var(--ok-tx,#0b7a3b);
  --t-err:#e5534b;--t-err-d:#a8261e;--t-err-soft:var(--err-bg,#fdecec);--t-err-text:var(--err-tx,#b42318);
  --t-err-line:color-mix(in srgb,var(--err-tx,#b42318) 30%,var(--card,#fff));
  --t-warn-soft:color-mix(in srgb,var(--gold,#f6b60c) 16%,var(--card,#fff));--t-warn-line:color-mix(in srgb,var(--gold,#f6b60c) 42%,var(--card,#fff));
  --t-warn-text:color-mix(in srgb,var(--gold-d,#d98e00) 62%,var(--txt,#162033));
  --t-gold:var(--gold,#f6b60c);--t-gold-d:var(--gold-d,#d98e00);--t-gold-soft:color-mix(in srgb,var(--gold,#f6b60c) 34%,var(--card,#fff));
  --t-gold-text:color-mix(in srgb,var(--gold-d,#d98e00) 85%,var(--txt,#162033));--t-on-gold:#2f2200;--t-promo:#d92d83;
  --t-font:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--t-font-display:var(--t-font);
}
/* Kontrol formulir tidak mewarisi huruf; tema berhuruf sendiri butuh ini. */
html[data-tema="hud-terang"] :is(input,select,textarea){font-family:inherit}
/* Kaki identitas duduk di atas kanvas halaman, bukan di atas kartu, jadi
   aksennya memakai warna tautan-di-kanvas: warna merek apa adanya nyaris
   hilang di tema berkanvas gelap (Domino, Arena, Nebula). */
html[data-tema="hud-terang"] .ident-foot{--ident-accent:var(--t-on-bg-link)!important}
/* Baris tautan kebijakan juga duduk di kanvas, bukan di kartu. */
html[data-tema="hud-terang"] .ident-kebijakan a{color:var(--t-on-bg-muted)}
html[data-tema="hud-terang"] .ident-kebijakan a:hover{color:var(--t-on-bg-link)}
/* Cangkang halaman blog dan kebijakan: gayanya inline dan tidak memuat
   style.css, jadi permukaan dan teksnya dipetakan ke token di sini —
   sekali untuk semua tema. Isi artikel diberi panel supaya tetap terbaca
   di atas kanvas bertekstur atau gelap. */
html[data-tema="hud-terang"] body{color:var(--t-on-bg)}
html[data-tema="hud-terang"] :is(.b-title,.b-art-title,.b-lead,.b-date,.b-crumb,.b-pager-info,.b-foot){color:var(--t-on-bg)}
html[data-tema="hud-terang"] .b-eyebrow{background:var(--t-accent-soft);color:var(--t-accent-text)}
html[data-tema="hud-terang"] :is(.b-lead,.b-date,.b-pager-info,.b-crumb,.b-foot){color:var(--t-on-bg-muted)}
html[data-tema="hud-terang"] :is(.b-card,.b-pager a){background:var(--t-surface);border-color:var(--t-line);color:var(--t-text)}
html[data-tema="hud-terang"] .b-card a{color:inherit}
html[data-tema="hud-terang"] .b-body{padding:16px 18px;border:1px solid var(--t-line);border-radius:16px;
  background:var(--t-surface);color:var(--t-text)}
html[data-tema="hud-terang"] .b-body :is(h2,h3,h4,strong,b){color:var(--t-text)}
html[data-tema="hud-terang"] .b-body a{color:var(--t-accent-text)}
html[data-tema="hud-terang"] :is(.b-more,.b-card:hover h2,.b-pager a){color:var(--t-accent-text)}
html[data-tema="hud-terang"] :is(.b-foot a,.b-crumb a:hover){color:var(--t-on-bg-link)}
html[data-tema="hud-terang"] .b-crumb a{color:var(--t-on-bg-muted)}
html[data-tema="hud-terang"] .b-body blockquote{border-color:var(--t-accent)}
html[data-tema="hud-terang"]{--brand-soft:color-mix(in srgb,var(--brand,#4f7cff) 12%,var(--card,#fff));
  --brand-line:color-mix(in srgb,var(--brand,#4f7cff) 32%,var(--line,#dfe5ee))}
/* Huruf tema ikut ke halaman luar: tema bukan hanya warna. */
html[data-tema="hud-terang"] body{font-family:var(--t-font)}
html[data-tema="hud-terang"] :is(.b-brand,.b-title,.b-art-title,.b-card h2,.b-body h2,.b-body h3){font-family:var(--t-font-display)}
/* == /JEMBATAN TOKEN == */

/* ══ Tema HUD — signature TokoMD (eksklusif, lihat hanyaDomain di storefrontTema) ══
   Antarmuka taktis minimal: grafit + putih, garis rambut, siku putih di sudut
   panel, label kapital berjarak lebar, penanda berlian. Aturan warna:
   putih = aksi umum dan pilihan aktif; warna MEREK domain (biru TokoMD) hanya
   untuk tombol yang memindahkan uang (blok AKSEN MEREK di akhir berkas);
   mint = berhasil, amber = menunggu/tier/poin, merah muda = galat.
   Siku digambar sebagai LAPISAN LATAR ber-origin border-box (--h-siku), bukan
   ::before: tidak bentrok dengan pseudo-elemen bawaan dan tidak ikut
   terpotong overflow:hidden. Semua sudut persegi. */

@font-face{font-family:"Tomorrow";font-style:normal;font-weight:500;font-display:swap;src:url('huruf/tomorrow-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tomorrow";font-style:normal;font-weight:600;font-display:swap;src:url('huruf/tomorrow-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url('huruf/hanken-grotesk-400-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Palet & token ─────────────────────────────────────────────────────── */
html[data-tema="hud-terang"]{
  --gold:#dcb576;--gold-d:#bb944f;
  --bg:#11151d;--card:#171c26;--txt:#dde2ea;--muted:#949cab;--line:#2b3140;
  --ok-bg:#12211b;--ok-tx:#93dcb5;--err-bg:#2a181b;--err-tx:#f08a8a;
  --t-bg:#11151d;--t-frame:#0c0f16;--t-surface:#171c26;--t-field:#0e1219;--t-fill:#1d2330;--t-line:#2b3140;
  --t-text:#dde2ea;--t-muted:#949cab;--t-subtle:#7f8796;
  --t-accent:var(--h-putih);--t-accent-d:#cfd6e2;--t-accent-text:var(--h-putih);--t-accent-soft:#232a38;--t-accent-line:#3b4353;--t-on-accent:#11151d;
  --t-deep:#0e1219;--t-deep-2:#171c26;--t-on-deep:#dde2ea;--t-on-deep-muted:#949cab;--t-scrim:rgba(5,7,12,.84);
  --t-ok:#93dcb5;--t-ok-d:#57b389;--t-ok-soft:#12211b;--t-ok-text:#93dcb5;
  --t-err:#f08a8a;--t-err-d:#bd5757;--t-err-soft:#2a181b;--t-err-line:#572d31;--t-err-text:#f08a8a;
  --t-warn-soft:#241f16;--t-warn-line:#53462c;--t-warn-text:#dcb576;
  --t-gold:#dcb576;--t-gold-d:#bb944f;--t-gold-soft:#282218;--t-gold-text:#dcb576;--t-on-gold:#1a1408;--t-promo:#f06a84;
  --t-font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--t-font-display:"Tomorrow","Arial Narrow",system-ui,sans-serif;
  /* Teks dan tautan yang duduk langsung di kanvas (blog, kebijakan, kaki identitas). */
  --t-on-bg:#dde2ea;--t-on-bg-muted:#949cab;--t-on-bg-link:var(--h-aksen);
  --h-disp:"Tomorrow","Arial Narrow",system-ui,sans-serif;
  /* Grafit bersemburat biru: warna khas TokoMD masuk lewat nada abu-abunya,
     bukan lewat bidang berwarna baru. */
  --h-g0:#0e1219;--h-g1:#11151d;--h-g2:#171c26;--h-g3:#1d2330;
  --h-panel:rgba(23,28,38,.84);--h-field:rgba(0,0,0,.26);
  --h-line:rgba(214,226,255,.13);--h-line-2:rgba(214,226,255,.24);
  /* Aksen: penanda berlian, strip kepala halaman, pendar. */
  --h-aksen:#8fb6ff;
  /* Bidang terang: dipakai untuk teks dan label, BUKAN lagi untuk tombol dan
     pilihan aktif — sejak 24 Sep 2026 peran itu dipegang biru merek. Putih
     pekat sendiri sudah diredupkan karena menyilaukan di layar lebar. */
  --h-putih:#e4e8ee;
  /* Biru TokoMD di atas grafit: garis dan ikon memakai nada muda supaya tetap
     terbaca, bidangnya memakai var(--brand) apa adanya. */
  --h-biru:#7ea4ff;--h-biru-teks:#bed2ff;--h-biru-terang:#eaf0ff;
  --h-biru-tipis:color-mix(in srgb,var(--brand) 20%,transparent);
  --h-biru-cincin:color-mix(in srgb,var(--brand) 55%,transparent);
  --h-mint:#93dcb5;--h-amber:#dcb576;--h-rose:#f08a8a;
  --h-siku:
    linear-gradient(var(--h-biru),var(--h-biru)) left top/12px 1.5px no-repeat border-box,linear-gradient(var(--h-biru),var(--h-biru)) left top/1.5px 12px no-repeat border-box,
    linear-gradient(var(--h-biru),var(--h-biru)) right top/12px 1.5px no-repeat border-box,linear-gradient(var(--h-biru),var(--h-biru)) right top/1.5px 12px no-repeat border-box,
    linear-gradient(var(--h-biru),var(--h-biru)) left bottom/12px 1.5px no-repeat border-box,linear-gradient(var(--h-biru),var(--h-biru)) left bottom/1.5px 12px no-repeat border-box,
    linear-gradient(var(--h-biru),var(--h-biru)) right bottom/12px 1.5px no-repeat border-box,linear-gradient(var(--h-biru),var(--h-biru)) right bottom/1.5px 12px no-repeat border-box;
  --h-kanvas:
    radial-gradient(90% 340px at 50% -60px,rgba(120,160,255,.08),rgba(255,255,255,0) 70%) no-repeat,
    repeating-linear-gradient(90deg,rgba(214,226,255,.022) 0 1px,transparent 1px 48px),
    #11151d;
}
html[data-tema="hud-terang"] body{color:var(--txt);background:var(--h-kanvas);-webkit-font-smoothing:antialiased}
html[data-tema="hud-terang"] :is(input,select,textarea){color:var(--txt);color-scheme:dark}
html[data-tema="hud-terang"] ::selection{background:rgba(255,255,255,.3);color:var(--h-putih)}

/* ── Pola bersama ──────────────────────────────────────────────────────────
   :where() = kekhususan nol (cukup html[data-tema] = 0,1,1) supaya aturan per
   komponen di bawah tetap bisa menimpanya. :is() hanya bila aturan dasar yang
   harus dikalahkan lebih khusus. */
/* Huruf label: Tomorrow kapital berjarak lebar */
html[data-tema="hud-terang"] :where(.card h2,.page-head h1,.pay-page h3,.pay-kicker,.pay-invoice-label,.pay-invoice-product,.pay-step,.order-ticket-top,.track-overline,.track-status-head strong,.track-ticket span,.track-detail-grid span,.track-buyer span:not(.track-avatar),.page-back,.info-more,.section-kicker,.summary-assurance,.checkout-benefits-head>span,.external-pay-head>span,.tabs button,.tabs a,.id-mode button,.player-identity strong,.player-identity-actions button,.tier-chip,.account-meters span,.wallet-pass-balance span,.checkin-card strong,.spender-head h2,.spender-periods button,.wallet-topup-head h4,.wallet-topup-steps,#wallet-topup-form legend,.wallet-topup-custom>span:first-child,.account-subhead strong,.account-subhead button,.account-filter label>span,.transaction-entry>button,.entry-status,.account-more,.wallet-pass-btn,.wallet-topup-record button,.track-nota-link,.refund-opt button,.login-card .login-back,.profile-editor button,.order-ticket-actions button,.seo-eyebrow,.seo-block-label,.seo-return small,.ident-segel>span,.paycard h3,.tg-miniapp-install-card h3,.bulk-confirm-actions button,.tg-miniapp-install-actions button,.event-popup-cta,.flash-sale-head h3,.promo-copy b,.benefit-card b,.account-menu a,.account-menu button,.bnav a,.btn-full,.nota-btn,.seo-toggle,.wallet-topup-submit,.checkin-card button,.track-ticket button,.pay-nota-link,.account-session-note,.pwa-pasang-hdr,.flash-ticket,.promo-badge,.bulk-secondary,.bulk-hist,.b-back){font-family:var(--h-disp);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
/* Tombol umum: putih pekat berteks grafit (ID dasar butuh :is berkekhususan ID) */
html[data-tema="hud-terang"] :is(#check-btn,#track-go,#bulk-preview-btn){border:0;border-radius:0;background:var(--h-putih);color:var(--h-g1);font-family:var(--h-disp);font-weight:600;letter-spacing:.2em;text-transform:uppercase;box-shadow:none}
html[data-tema="hud-terang"] :where(.btn-full,.nota-btn,.seo-toggle,.wallet-topup-submit,.checkin-card button,.track-ticket button,.wallet-pass-btn.primary,.profile-save,.tg-miniapp-install-confirm,.event-popup-cta,.bulk-confirm-yes){border:0;border-radius:0;background:var(--h-putih);color:var(--h-g1);box-shadow:none}
html[data-tema="hud-terang"] :is(#check-btn,#track-go,#bulk-preview-btn,.btn-full,.nota-btn,.seo-toggle,.checkin-card button,.track-ticket button,.profile-save,.tg-miniapp-install-confirm,.event-popup-cta):hover{background:#dfe3e8}
html[data-tema="hud-terang"] :is(#buy-btn,#check-btn,#track-go,.wallet-topup-submit,.checkin-card button,.tg-miniapp-install-confirm,.btn-full):disabled{background:transparent;color:#737a84;box-shadow:inset 0 0 0 1px var(--h-line);opacity:1}
html[data-tema="hud-terang"] :is(#check-btn,#track-go,#buy-btn,#bulk-preview-btn,.btn-full,.nota-btn,.tabs button,.tabs a,.seo-toggle,.prod,.paym,.benefit-card):focus-visible{outline:2px solid var(--h-putih);outline-offset:2px}
/* Pilihan aktif: putih pekat */
html[data-tema="hud-terang"] :is(.tabs button.active,.tabs a.active,.id-mode button.is-on,.spender-periods button[aria-selected="true"],.wallet-topup-steps .active span,.pay-step.active .pay-step-dot,.checkin-days li.today:not(.done)>b){border-color:var(--h-putih);background:var(--h-putih);color:var(--h-g1);box-shadow:none}
/* Panel bersiku */
html[data-tema="hud-terang"] :where(.card,.checkin-card,.account-spender-card,.wallet-topup-card,.player-pass,.account-rank,.track-order-card,.seo-artikel){border:1px solid var(--h-line);border-radius:0;background:var(--h-siku),var(--h-panel);box-shadow:none}
/* Panel tanpa siku: daftar menu dan kartu CS */
html[data-tema="hud-terang"] :where(.account-menu,.cs-card){border:1px solid var(--h-line);border-radius:0;background:var(--h-panel);box-shadow:none}
/* Kartu pilihan kecil (metode, saldo/poin, preset) */
html[data-tema="hud-terang"] :where(.benefit-card,.paym,.wallet-topup-methods button,.wallet-topup-presets button){border:1px solid var(--h-line);border-radius:0;background:rgba(0,0,0,.28);color:var(--txt);box-shadow:none;transform:none}
html[data-tema="hud-terang"] :where(.prod,.benefit-card,.paym,.wallet-topup-methods button,.wallet-topup-presets button):hover{border-color:var(--h-line-2);transform:none}
html[data-tema="hud-terang"] :is(.benefit-card.active,.paym.active,.wallet-topup-methods button.active,.wallet-topup-presets button[aria-pressed="true"]){border-color:var(--h-putih);background:rgba(255,255,255,.08);color:var(--h-putih);box-shadow:inset 0 0 0 1px var(--h-putih)}
/* Ikon: kotak bergaris */
html[data-tema="hud-terang"] :where(.benefit-icon,.checkin-mark,.spender-trophy,.wallet-pass-mark,.track-avatar,.bulk-done-mark,.tg-miniapp-install-mark,.seo-return b,.mutation-sign,.spender-avatar,.cs-avatar){border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih);box-shadow:none;font-family:var(--h-disp)}
/* WAJIB: display di aturan tema ini mengalahkan [hidden] bawaan peramban.
   Elemen yang disembunyikan app.js lewat atribut hidden harus tetap hilang. */
html[data-tema="hud-terang"] :is(.buyer,.page-back,.tier-chip,.section-kicker,.pay-kicker,.pay-nota-link,.track-nota-link,.email-help)[hidden]{display:none}
/* Sudut persegi untuk kotak kecil lain */
html[data-tema="hud-terang"] :where(input,select,textarea,.account-filter select,.bulk-field select,.bulk-field textarea,.email-help,.checkout-benefits,.pay-invoice,.pay-state-head,.order-ticket,.pay-email-note,.va,.track-buyer,.track-detail-grid,.refund-box,.track-error,.track-security,.btn-outline,.nota-btn-sekunder,.info-promo-list img,.info-leaderboard-list img,.account-loading,.account-error,.profile-editor,.avatar-picker,.avatar-options button,.wallet-topup-input,.wallet-topup-quote>p,.wallet-topup-error,.wallet-topup-record,.wallet-topup-instruction,.wallet-topup-active,.wallet-topup-breakdown,.account-entry,.account-subhead button,.account-more,.spender-list li,.spender-periods,.bulk-secondary,.bulk-summary,.bulk-rows-report,.bulk-warn,.bulk-confirm-detail,.bulk-confirm-actions button,.tg-miniapp-install-actions button,.seo-jelajah,.seo-route,.seo-block,.seo-faq,.ident-mark,.bantuan-avatar,.track-status-icon,.pay-state-symbol,.close,.paycard,.tg-miniapp-install-card,.event-popup-card,.event-popup-body,.flash-sale,.st-badge,.bulk-chip,.bulk-no,.bulk-hist,.entry-status,.transaction-entry>button,.track-nota-link,.refund-opt button,.wallet-pass-btn,.wallet-pass-btn b,.pay-status){border-radius:0}

/* ── Header: kaca grafit + garis rambut ────────────────────────────────── */
html[data-tema="hud-terang"] .hdr{color:var(--txt);background:rgba(14,16,19,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--h-line);box-shadow:none}
/* Tinggi kepala dipaku, sama dengan bilah merek blog & kebijakan: tanpa ini
   tombol kembali (34px) di bilah blog membuatnya 4px lebih tinggi dari kepala
   beranda. 54px isi + 1px garis bawah; desktop menimpanya jadi 72px. */
html[data-tema="hud-terang"] .hdr{height:55px;padding-block:0}
html[data-tema="hud-terang"] .b-top-in{height:54px;padding-block:0}
/* Logo persegi di KIRI, di depan logo nama; pojok kanan milik segel Mitra resmi. */
html[data-tema="hud-terang"] .brand{justify-content:flex-start;gap:10px}
html[data-tema="hud-terang"] .brand img#brand-logo{order:0;margin-left:0;border-radius:0;box-shadow:none}
/* Logo nama tokomd (gambar putih) diwarnai biru merek #4f7cff lewat rantai filter. */
html[data-tema="hud-terang"] .brand img#brand-wordmark{margin-right:0;filter:brightness(0) saturate(100%) invert(40%) sepia(98%) saturate(2274%) hue-rotate(212deg) brightness(106%) contrast(114%)}
/* Rantai filter di atas hanya CADANGAN: Safari iPhone menghitungnya lain dan
   biru TokoMD tampil UNGU. Bila server menulis --logo-nama (kepala, bilah
   blog, kaki), logo nama digambar sebagai mask berisi warna merek — warnanya
   persis sama di semua browser dan ikut Warna utama domain. Isi gambarnya
   digeser keluar kotak (object-position), jadi yang tampak hanya latar
   berwarna merek yang dipotong mengikuti bentuk logo. */
html[data-tema="hud-terang"] :is(.brand img#brand-wordmark,.b-brand img.b-wordmark,.ident-wordmark)[style*="--logo-nama"]{
  filter:none;object-position:-99999px 0;background:var(--brand);
  -webkit-mask:var(--logo-nama) center/contain no-repeat;mask:var(--logo-nama) center/contain no-repeat}
/* Logo nama kaki rata kiri (object-position left center di style.css). */
html[data-tema="hud-terang"] .ident-wordmark[style*="--logo-nama"]{-webkit-mask-position:left center;mask-position:left center}
html[data-tema="hud-terang"] #brand-name{font:600 16px/1 var(--h-disp);letter-spacing:.14em;text-transform:uppercase}
html[data-tema="hud-terang"] .hdr-back{width:34px;height:34px;border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih)}
html[data-tema="hud-terang"] .hdr-back:hover{background:rgba(255,255,255,.08)}
html[data-tema="hud-terang"] .hdr .link{border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--txt)}
/* Slot aksi kepala kosong = tersembunyi, sama seperti Klasik (segel "Mitra resmi"
   dekoratif yang dulu mengisinya dibuang 28 Sep 2026 atas permintaan Taka). */
html[data-tema="hud-terang"] .pwa-pasang-hdr{height:30px;padding:0 10px;border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih);font-size:10px;line-height:1;letter-spacing:.14em}
html[data-tema="hud-terang"] .pwa-pasang-hdr:hover{background:rgba(255,255,255,.08)}
/* Notifikasi "Pasang aplikasi". Gayanya disuntik pwa/install.js sebagai kartu
   PUTIH ala heads-up Android, dan suntikan itu masuk ke <head> BELAKANGAN —
   tetapi aturan di sini tetap menang karena berawalan html[data-tema="hud-terang"]
   (0,2,1) melawan .pwa-pasang polos (0,1,0). Jadi tema lain tidak ikut
   berubah sama sekali: kartu putihnya tetap seperti sekarang.
   Gaya HUD (siku, nama kapital Tomorrow, sudut 4px) dengan susunan
   NOTIFIKASI SISTEM (±104px, dulu ±146px dengan baris tombol sendiri):
     [ikon] TOKOMD · sekarang ............ [×]
     Pasang di layar utama   [PASANG APLIKASI]
     Buka toko langsung dari ikon, tanpa ...
                  ───  (pegangan: seret ke atas untuk menutup)
   Pembungkus meta/teks/aksi dibuat display:contents supaya isinya jadi sel
   grid tanpa mengubah markup install.js. "Nanti" dibuang (× dan seret sudah
   menutup). Di iOS/manual tanpa tombol, judul memakai lebar penuh dan
   kalimat petunjuknya tetap di baris ketiga. */
html[data-tema="hud-terang"] .pwa-pasang{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;padding:9px 8px 15px 13px;border:1px solid var(--h-line-2);border-radius:4px;background:var(--h-siku),rgba(17,21,29,.95);color:var(--txt);box-shadow:0 22px 48px -14px rgba(0,0,0,.82)}
/* Pegangan seret di tepi bawah: penanda bahwa ini notifikasi yang bisa
   disingkirkan ke atas, bukan kotak dialog yang menunggu jawaban. */
html[data-tema="hud-terang"] .pwa-pasang::after{content:"";position:absolute;left:50%;bottom:6px;width:34px;height:3px;margin-left:-17px;border-radius:2px;background:var(--h-line-2)}
html[data-tema="hud-terang"] :is(.pwa-pasang-meta,.pwa-pasang-teks,.pwa-pasang-aksi){display:contents}
html[data-tema="hud-terang"] .pwa-pasang-ikon{grid-column:1;grid-row:1;width:20px;height:20px;margin-right:8px;border-radius:4px;box-shadow:0 0 0 1px var(--h-line-2);font-size:10px}
html[data-tema="hud-terang"] .pwa-pasang-ikon:has(img){background:#0e1219}
html[data-tema="hud-terang"] .pwa-pasang-ikon img{object-fit:contain}
html[data-tema="hud-terang"] .pwa-pasang-app{grid-column:2;grid-row:1;color:var(--h-biru-teks);font-family:var(--h-disp);font-weight:600;letter-spacing:.14em}
html[data-tema="hud-terang"] .pwa-pasang-waktu{grid-column:3;grid-row:1;justify-self:start;margin-left:6px;color:var(--muted);font-family:var(--h-disp);letter-spacing:.1em}
html[data-tema="hud-terang"] .pwa-pasang-tutup{grid-column:4;grid-row:1;justify-self:end;width:26px;height:26px;border-radius:4px;color:var(--muted)}
html[data-tema="hud-terang"] .pwa-pasang-tutup:hover{background:rgba(255,255,255,.08);color:var(--h-putih)}
html[data-tema="hud-terang"] .pwa-pasang-judul{grid-column:1/4;grid-row:2;margin-top:4px;color:var(--h-putih);font-family:var(--t-font);font-weight:700;letter-spacing:.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-tema="hud-terang"] .pwa-pasang:not(:has(.pwa-pasang-btn)) .pwa-pasang-judul{grid-column:1/-1}
html[data-tema="hud-terang"] .pwa-pasang-sub{grid-column:1/-1;grid-row:3;margin-top:2px;color:var(--muted)}
html[data-tema="hud-terang"] .pwa-pasang-sub b{color:var(--h-putih);font-weight:700}
html[data-tema="hud-terang"] .pwa-pasang-btn{grid-column:4;grid-row:2;margin:4px 0 0 12px;padding:7px 12px;border:1px solid var(--brand);border-radius:4px;background:var(--brand);color:var(--brand-on,#fff);font-family:var(--h-disp);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;box-shadow:none}
html[data-tema="hud-terang"] .pwa-pasang-nanti{display:none}
html[data-tema="hud-terang"] .pwa-pasang :focus-visible{outline-color:var(--h-putih)}

/* ── Artikel terbaru: kolom kiri Top Up desktop ─────────────────────────
   Server hanya mengisinya untuk tema HUD (kartuArtikelTopup di server.js),
   meniru susunan /blog: yang terbaru jadi sorotan bergambar besar, sisanya
   baris ringkas bergambar 112px. Di bawah 900px halaman satu kolom, jadi
   kartu ini disembunyikan (gambar lazy-nya pun tidak diunduh); blok desktop
   menyalakannya kembali dan menaruhnya di bawah kartu Masukan ID. */
html[data-tema="hud-terang"] .topup-artikel{display:none}
html[data-tema="hud-terang"] .ta-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
html[data-tema="hud-terang"] .ta-kepala h2{margin:0}
html[data-tema="hud-terang"] .ta-semua{color:var(--h-biru-teks);font:600 10px/1 var(--h-disp);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
html[data-tema="hud-terang"] :is(.ta-sorotan,.ta-daftar a){display:block;color:inherit;text-decoration:none}
html[data-tema="hud-terang"] .ta-sorotan-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:3px;background:var(--h-g2)}
html[data-tema="hud-terang"] .ta-tgl{display:block;color:var(--muted);font-size:11.5px;line-height:1.3}
html[data-tema="hud-terang"] .ta-sorotan .ta-tgl{margin-top:10px}
html[data-tema="hud-terang"] .ta-tgl b{color:var(--h-biru-teks);font-weight:700}
html[data-tema="hud-terang"] .ta-sorotan h3{margin:4px 0 0;color:var(--h-putih);font:800 17px/1.3 var(--t-font)}
html[data-tema="hud-terang"] .ta-daftar{margin:14px -14px -14px;padding:0;list-style:none}
html[data-tema="hud-terang"] .ta-daftar a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--h-line)}
html[data-tema="hud-terang"] .ta-baris-img{flex:0 0 112px;width:112px;height:63px;object-fit:cover;border-radius:3px;background:var(--h-g2)}
html[data-tema="hud-terang"] .ta-baris-teks{display:flex;flex-direction:column;gap:3px;min-width:0}
html[data-tema="hud-terang"] .ta-baris-teks b{display:-webkit-box;overflow:hidden;color:var(--h-putih);font-size:14px;font-weight:700;line-height:1.35;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html[data-tema="hud-terang"] :is(.ta-sorotan:hover h3,.ta-daftar a:hover b){color:var(--h-biru-teks)}

/* ── Hero (bila dinyalakan domain) ─────────────────────────────────────── */
html[data-tema="hud-terang"] .hero:not(.hero-mati){
  color:var(--txt);border:1px solid var(--h-line-2);border-radius:0;box-shadow:none;background-color:var(--h-g1);
  background-image:linear-gradient(90deg,rgba(14,16,19,.97) 0%,rgba(14,16,19,.86) 44%,rgba(14,16,19,.25) 76%,rgba(14,16,19,0) 100%),linear-gradient(0deg,rgba(14,16,19,.7),transparent 45%),var(--hero-gambar,url('/assets/tokohiggs-hero-resmi-mitra-bergaransi.webp'))!important;
}
html[data-tema="hud-terang"] .hero:not(.hero-mati)::before{content:"";position:absolute;inset:7px;z-index:3;background:var(--h-siku);pointer-events:none}
html[data-tema="hud-terang"] .hero .badge{border:1px solid var(--h-line-2);border-radius:0;padding:5px 9px;background:rgba(14,16,19,.72);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--h-putih);font:500 9px/1.2 var(--h-disp);letter-spacing:.16em;text-transform:uppercase}
html[data-tema="hud-terang"] .hero h1{font:600 23px/1.04 var(--h-disp);letter-spacing:.06em;text-transform:uppercase;text-shadow:none}
html[data-tema="hud-terang"] .hero .h1-kw{font:400 12px/1.3 var(--t-font);letter-spacing:0;text-transform:none;color:#c9ced5;opacity:1}
html[data-tema="hud-terang"] .hero p{color:#b9bfc8;opacity:1;text-shadow:none}
html[data-tema="hud-terang"] .hero-trust span{gap:6px;border:1px solid var(--h-line-2);border-radius:0;background:rgba(14,16,19,.86);box-shadow:none;color:var(--h-putih);font:600 8.5px/1.1 var(--h-disp);letter-spacing:.06em;text-transform:uppercase}
/* Centang di chip keunggulan jadi berlian mint kecil. */
html[data-tema="hud-terang"] .hero-trust b{width:6px;height:6px;flex:0 0 6px;border-radius:0;background:var(--h-mint);font-size:0;transform:rotate(45deg)}

/* ── Banner event ──────────────────────────────────────────────────────── */
html[data-tema="hud-terang"] .event-slider{border-radius:0;box-shadow:0 0 0 1px var(--h-line-2);background:var(--h-g0)}
html[data-tema="hud-terang"] .event-slider::after{content:"";position:absolute;inset:7px;z-index:1;background:var(--h-siku);opacity:.9;pointer-events:none}
html[data-tema="hud-terang"] .event-nav{border-radius:0;background:rgba(14,16,19,.82);color:var(--h-putih);box-shadow:0 0 0 1px var(--h-line-2)}
html[data-tema="hud-terang"] .event-dots{gap:5px;margin-top:10px}
/* Garis 2px, bidang ketuk tetap 12px. */
html[data-tema="hud-terang"] .event-dots button{width:12px;height:12px;border-radius:0;background:linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.25)) center/100% 2px no-repeat}
html[data-tema="hud-terang"] .event-dots button.is-on{width:26px;background:linear-gradient(var(--h-putih),var(--h-putih)) center/100% 2px no-repeat}
html[data-tema="hud-terang"] .event-dots button:focus-visible{outline:2px solid var(--h-putih);outline-offset:2px}

/* ── Kartu langkah ─────────────────────────────────────────────────────── */
html[data-tema="hud-terang"] .card{margin-bottom:12px;padding:16px 14px 14px}
html[data-tema="hud-terang"] .card h2{gap:12px;margin:0 0 14px;color:var(--h-putih);font-size:15px;font-weight:600;line-height:1.15;letter-spacing:.16em}
html[data-tema="hud-terang"] .user-id-head h2{margin:0}
/* Nomor langkah "01": angka dari HTML, nol di depannya dari ::before. */
html[data-tema="hud-terang"] .card h2 .num{width:auto;height:auto;flex:0 0 auto;padding:4px 6px;border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--muted);font:500 11px/1 var(--h-disp);letter-spacing:.1em}
html[data-tema="hud-terang"] .card h2 .num::before{content:"0"}

/* Isian */
html[data-tema="hud-terang"] input{border:1px solid var(--h-line-2);background:var(--h-field);color:var(--h-putih)}
html[data-tema="hud-terang"] :is(input,textarea)::placeholder{color:#6d747e;opacity:1}
html[data-tema="hud-terang"] input:focus{border-color:var(--h-putih);background:rgba(0,0,0,.44);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
html[data-tema="hud-terang"] :is(#game-id,#track-input,#login-code,#wallet-topup-amount){font-family:var(--h-disp);font-weight:500;letter-spacing:.14em}
html[data-tema="hud-terang"] :is(#game-id,#track-input,#login-code,#wallet-topup-amount)::placeholder{font-family:var(--t-font);font-weight:400;letter-spacing:.01em}
html[data-tema="hud-terang"] .wallet-topup-input input{background:transparent}
html[data-tema="hud-terang"] .user-id-row{gap:6px}
html[data-tema="hud-terang"] .user-id-row #game-id{height:48px}
html[data-tema="hud-terang"] :is(#check-btn,#track-go){height:48px;padding:0 18px;font-size:13px;line-height:1}
html[data-tema="hud-terang"] #bulk-preview-btn{min-height:44px;padding:0 18px;font-size:12px}
html[data-tema="hud-terang"] .user-id-row #user-id-guide-btn{width:48px;min-width:48px;height:48px;flex-basis:48px;border:1px solid var(--h-line-2);border-radius:0;background:transparent}
html[data-tema="hud-terang"] .user-id-row #user-id-guide-btn:is(:hover,:focus-visible){border-color:var(--h-putih);background:rgba(255,255,255,.06);box-shadow:none}
/* Ikon panduan milik domain berwarna; di HUD dibuat satu warna. */
html[data-tema="hud-terang"] .user-id-row #user-id-guide-btn img{filter:grayscale(1) brightness(1.5)}
html[data-tema="hud-terang"] .user-id-copy{color:var(--muted);font-size:12.5px;line-height:1.6}
html[data-tema="hud-terang"] .buyer{display:flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid rgba(158,232,191,.32);border-radius:0;background:rgba(158,232,191,.08);color:var(--h-mint);font:500 14px/1.3 var(--t-font)}
html[data-tema="hud-terang"] .buyer.err{border-color:rgba(255,143,143,.36);background:rgba(255,143,143,.08);color:var(--h-rose)}
html[data-tema="hud-terang"] .id-mode{gap:0;padding:0;border:1px solid var(--h-line);border-radius:0;background:transparent}
html[data-tema="hud-terang"] .id-mode button{padding:8px 12px;border-radius:0;color:var(--muted);font-size:10.5px;letter-spacing:.12em}

/* ── Kategori: satu bilah bersegmen ────────────────────────────────────── */
html[data-tema="hud-terang"] .tabs{gap:0;margin:0 0 14px}
html[data-tema="hud-terang"] .tabs button,html[data-tema="hud-terang"] .tabs a{padding:13px 12px;border:1px solid var(--h-line);border-radius:0;background:transparent;color:var(--muted);font-size:11.5px;font-weight:600;line-height:1;letter-spacing:.1em;box-shadow:none}
html[data-tema="hud-terang"] :is(.tabs button,.tabs a)+:is(button,a){margin-left:-1px}

/* ── Nominal: kartu tegak, harga putih ─────────────────────────────────── */
html[data-tema="hud-terang"] .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* Susunan isi kartu sama dengan Klasik yang dipakai pembeli sekarang: ikon di
   kiri, nama dan harga di kanan, chip poin berwarna di bawah harga. Versi
   awal menumpuk ikon di atas nama sehingga kartu ponsel tinggi dan longgar. */
html[data-tema="hud-terang"] .prod{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:10px;row-gap:5px;min-height:88px;padding:10px 11px;border:1px solid var(--h-line);border-radius:0;background:rgba(0,0,0,.28);color:var(--txt);box-shadow:none}
html[data-tema="hud-terang"] .prod .ic{grid-row:1/3;grid-column:1;width:40px;height:40px;margin:0;border-radius:0;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--h-line);font-size:20px;overflow:hidden}
html[data-tema="hud-terang"] .prod .ic img{width:30px;height:30px;font-size:9px;line-height:1.1}
html[data-tema="hud-terang"] .prod.prod-image-native .ic{background:transparent;box-shadow:none}
html[data-tema="hud-terang"] .prod.prod-image-native .ic img{width:40px;height:40px}
html[data-tema="hud-terang"] .prod .n{grid-row:1;grid-column:2;min-width:0;color:#c9ced5;font:600 11.5px/1.3 var(--h-disp);letter-spacing:.1em;text-transform:uppercase;overflow-wrap:anywhere}
html[data-tema="hud-terang"] .prod .n small{color:var(--muted);font:400 11px/1.3 var(--t-font);letter-spacing:0;text-transform:none}
html[data-tema="hud-terang"] .prod-price{grid-row:2;grid-column:2;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
/* Harga mengikuti lebar layar: 18px hanya muat di kolom lebar. Di ponsel dua
   kolom (kolom teks 89-104px) harga tujuh angka seperti Rp 1.210.000 meluap
   keluar kartu, jadi ukurannya clamp 13-18px lewat vw, jarak huruf 0, dan
   boleh patah di spasi ("Rp" / angka) sebagai pengaman terakhir. */
html[data-tema="hud-terang"] .prod-price strong,html[data-tema="hud-terang"] .prod .p{color:var(--h-putih);font:600 clamp(12px,3.5vw,18px)/1.05 var(--h-disp);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:normal;overflow-wrap:anywhere}
html[data-tema="hud-terang"] .prod .p{grid-row:2;grid-column:2;margin:0;padding:0;border-radius:0;background:none;box-shadow:none}
html[data-tema="hud-terang"] .prod-price del{color:var(--t-subtle);font:500 11px/1 var(--h-disp);letter-spacing:.04em}
/* Chip poin: bidang amber seperti Klasik (token warn-soft/warn-text ada di kedua
   tema), bukan teks abu-abu berpenanda berlian. */
html[data-tema="hud-terang"] .prod-points{gap:0;padding:3px 7px;border:0;border-radius:4px;background:var(--t-warn-soft);color:var(--t-warn-text);font:700 10.5px/1 var(--t-font);letter-spacing:0;white-space:nowrap}
html[data-tema="hud-terang"] .prod-points::before{display:none}
/* Harga coret domain: label garis rambut bersiku, huruf teknis, warna --h-aksen
   (biru pucat di HUD gelap, biru merek di HUD Terang). Bukan tombol warna merek
   padat (khusus tombol yang memindahkan uang), bukan amber (poin dan tier),
   bukan merah muda (galat). */
html[data-tema="hud-terang"] .prod-coret{gap:2px 4px;margin-bottom:-1px}
html[data-tema="hud-terang"] .prod-coret del{letter-spacing:0}
html[data-tema="hud-terang"] .prod-diskon{padding:2px 3px;border:1px solid color-mix(in srgb,var(--h-aksen) 55%,transparent);border-radius:0;background:color-mix(in srgb,var(--h-aksen) 10%,transparent);color:var(--h-aksen);font:600 9.5px/1 var(--h-disp);letter-spacing:.02em}
html[data-tema="hud-terang"] .prod-diskon.prod-diskon-promo{border-color:transparent;background:var(--t-promo);color:var(--h-putih)}
/* Berlian tanda terpilih naik sedikit pada kartu bercoret supaya tidak
   menimpa label persen di baris kedua. */
html[data-tema="hud-terang"] .prod.active:has(.prod-diskon)::before{top:5px}
html[data-tema="hud-terang"] .prod.active:has(.prod-diskon)::after{top:10px}
html[data-tema="hud-terang"] .prod.active{border-color:var(--h-putih);background:rgba(255,255,255,.08);color:var(--h-putih);box-shadow:inset 0 0 0 1px var(--h-putih)}
html[data-tema="hud-terang"] .prod.active .n{padding-right:24px;color:var(--h-putih)}
/* Centang di dalam berlian putih, pojok kanan atas. Kartu berlencana promo
   memakai pojok itu untuk lencananya, jadi centangnya tidak dipasang. */
html[data-tema="hud-terang"] .prod.active::before{content:"";position:absolute;top:11px;right:11px;width:22px;height:22px;background:var(--h-putih);transform:rotate(45deg) scale(.82);pointer-events:none}
html[data-tema="hud-terang"] .prod.active::after{content:"";position:absolute;top:16px;right:19px;width:5px;height:9px;border:solid var(--h-g1);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}
html[data-tema="hud-terang"] .prod.active:has(.promo-badge)::before,html[data-tema="hud-terang"] .prod.active:has(.promo-badge)::after{content:none}
html[data-tema="hud-terang"] .promo-badge{top:-8px;right:10px;padding:2px 7px;border-radius:0;background:var(--t-promo);color:var(--h-putih);font-size:9px;line-height:1.2;letter-spacing:.12em}
/* Badge di garis tepi atas (di pojok dalam ia menimpa nama produk); rak yang
   digulir menyamping butuh ruang di atas supaya badge tidak terpotong. */
html[data-tema="hud-terang"] .flash-products{padding-top:11px}
html[data-tema="hud-terang"] .promo-copy{margin-top:8px}
html[data-tema="hud-terang"] .promo-copy b{color:var(--t-promo);font-size:10px;letter-spacing:.12em}
html[data-tema="hud-terang"] .promo-copy small{color:var(--muted);font-size:10.5px}
html[data-tema="hud-terang"] .flash-sale{border:1px solid rgba(255,107,134,.35);border-radius:0;background:rgba(255,107,134,.05);box-shadow:none}
html[data-tema="hud-terang"] .flash-ticket{background:var(--t-promo);color:var(--h-putih);font-size:9.5px;letter-spacing:.16em}
html[data-tema="hud-terang"] .flash-sale-head h3{color:var(--h-putih);font-size:14px;letter-spacing:.12em}
html[data-tema="hud-terang"] .flash-sale-head p{color:var(--muted)}
html[data-tema="hud-terang"] .flash-products .prod{border-color:var(--h-line);background:rgba(0,0,0,.28)}
html[data-tema="hud-terang"] .flash-products .prod.active{border-color:var(--h-putih);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--h-putih)}
html[data-tema="hud-terang"] .catalog-empty{color:var(--muted)}

/* ── Email ─────────────────────────────────────────────────────────────── */
html[data-tema="hud-terang"] .email-help{margin-top:10px;padding:10px 12px;border:1px solid var(--h-line);background:rgba(255,255,255,.03);color:var(--muted);font-size:12px;line-height:1.55}
html[data-tema="hud-terang"] .email-help::before{border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih);font-family:var(--h-disp)}
html[data-tema="hud-terang"] .email-help[data-kind="error"]{border-color:rgba(255,143,143,.45);background:rgba(255,143,143,.06);color:var(--h-rose)}
html[data-tema="hud-terang"] .email-help[data-kind="error"]::before{border-color:var(--h-rose);color:var(--h-rose)}

/* ── Langkah 4: saldo/poin + metode ────────────────────────────────────── */
html[data-tema="hud-terang"] .checkout-benefits{padding:12px;border:1px solid var(--h-line);background:rgba(0,0,0,.22)}
html[data-tema="hud-terang"] :is(.checkout-benefits-head,.external-pay-head)>span{color:var(--h-putih);font-size:10.5px;letter-spacing:.18em}
html[data-tema="hud-terang"] :is(.checkout-benefits-head,.external-pay-head) small{color:var(--muted);font-size:11.5px}
html[data-tema="hud-terang"] .benefit-grid{gap:8px}
html[data-tema="hud-terang"] .benefit-card{grid-template-columns:30px minmax(0,1fr);align-items:start;gap:9px;padding:10px}
html[data-tema="hud-terang"] .benefit-card.locked{background:transparent;color:var(--muted)}
html[data-tema="hud-terang"] .benefit-card b{color:var(--h-putih);font-size:11px;line-height:1.2;letter-spacing:.12em}
html[data-tema="hud-terang"] .benefit-card strong{margin-top:3px;color:#d6dbe1;font:600 14px/1.15 var(--h-disp)}
html[data-tema="hud-terang"] .benefit-card small{margin-top:3px;color:var(--t-subtle);font-size:10.5px}
html[data-tema="hud-terang"] .benefit-icon{width:30px;height:30px;font-size:11px;font-weight:600;letter-spacing:.04em}
html[data-tema="hud-terang"] :is(.benefit-icon.wallet,.benefit-icon.points){background:transparent;color:var(--h-putih)}
html[data-tema="hud-terang"] .benefit-note{color:var(--muted);font-size:12px}
/* Kepala metode bertumpuk: label kapital di atas, keterangan di bawahnya. */
html[data-tema="hud-terang"] .external-pay-head{flex-direction:column;align-items:flex-start;gap:6px;margin:16px 0 12px;padding-top:16px;border-top:1px solid var(--h-line)}
html[data-tema="hud-terang"] .external-pay-head small{text-align:left}
html[data-tema="hud-terang"] .paygrid{gap:10px}
html[data-tema="hud-terang"] .paym{gap:9px;padding:10px 12px 12px}
/* Strip logo tetap PUTIH: logo metode bayar bertinta gelap. */
html[data-tema="hud-terang"] .paym-ic{height:26px;padding:0 9px;border-radius:0;background:#fff}
html[data-tema="hud-terang"] .paym-ic-fb{height:auto;padding:0;background:transparent}
html[data-tema="hud-terang"] .paym-n{color:var(--txt);font:500 13px/1.25 var(--t-font)}
html[data-tema="hud-terang"] .paym-p{margin-top:6px;color:#d6dbe1;font:600 14px/1 var(--h-disp);letter-spacing:.02em;font-variant-numeric:tabular-nums}
html[data-tema="hud-terang"] .paym.active .paym-p{color:var(--h-putih);font-weight:600}
html[data-tema="hud-terang"] .paym.is-unavailable{border-color:var(--h-line);background:transparent;opacity:.62}
html[data-tema="hud-terang"] .paym-unavailable-label{color:var(--muted)}
html[data-tema="hud-terang"] .paygrid-minta .paym{border-color:var(--h-putih)}
html[data-tema="hud-terang"] .paym-internal{border-color:rgba(158,232,191,.45);background:rgba(158,232,191,.06)}
html[data-tema="hud-terang"] .paym-internal .paym-ic{width:44px;height:44px;border:1px solid rgba(158,232,191,.55);border-radius:0;background:transparent;color:var(--h-mint)}
html[data-tema="hud-terang"] #pay-note{color:var(--muted)}

/* ── Bilah Total: kaca grafit bersiku ──────────────────────────────────── */
html[data-tema="hud-terang"] .summary{gap:0 4px;padding:9px 8px 9px 14px;border:1px solid var(--h-line-2);border-bottom:0;border-radius:0;background:var(--h-siku),rgba(14,16,19,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -8px 22px rgba(0,0,0,.12)}
html[data-tema="hud-terang"] .summary-assurance{margin:0 0 8px;padding:0 0 8px;border-bottom:1px solid var(--h-line);color:var(--h-mint);font-size:10px;font-weight:500;line-height:1.1;letter-spacing:.14em}
html[data-tema="hud-terang"] .summary>div::before{color:var(--muted);font:500 10.5px/1.2 var(--h-disp);letter-spacing:.12em;text-transform:uppercase}
/* Nama produk menggantikan label "Total" begitu ada yang dipilih. */
html[data-tema="hud-terang"] .summary>div:has(#sum-product:not(:empty))::before{content:none}
html[data-tema="hud-terang"] .summary>div:has(#sum-product:not(:empty)) #sum-product{display:block;overflow:hidden;color:var(--muted);font:500 10.5px/1.2 var(--h-disp);letter-spacing:.1em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
html[data-tema="hud-terang"] #sum-price{margin-top:5px;color:var(--h-putih);font:600 22px/1 var(--h-disp);letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
html[data-tema="hud-terang"] #buy-btn{padding:6px 16px;border:0;border-radius:0;background:var(--h-putih);color:var(--h-g1);font:600 12px/1.15 var(--h-disp);letter-spacing:.1em;text-transform:uppercase;white-space:normal;box-shadow:none}

/* Tombol CS melayang: kotak bergaris, lencana Telegram tetap */
html[data-tema="hud-terang"] .bantuan-tg{border:1px solid var(--h-line-2);border-radius:0;background:rgba(14,16,19,.92);color:var(--h-putih);box-shadow:0 12px 26px rgba(0,0,0,.5)}
html[data-tema="hud-terang"] .bantuan-tg:hover{box-shadow:0 14px 30px rgba(0,0,0,.6)}
html[data-tema="hud-terang"] .bantuan-avatar{border-radius:0;background:transparent;box-shadow:none}
html[data-tema="hud-terang"] .bantuan-avatar>img{border-radius:0}
html[data-tema="hud-terang"] .bantuan-avatar-fallback{color:var(--h-putih);font:600 13px/1 var(--h-disp);letter-spacing:.1em}
html[data-tema="hud-terang"] .bantuan-channel-badge{border-color:var(--h-g1)}
html[data-tema="hud-terang"] .bantuan-copy small{font-family:var(--h-disp);letter-spacing:.14em}

/* ── Navigasi bawah: garis bawah putih + tombol tengah berlian ─────────── */
html[data-tema="hud-terang"] .bnav{background:var(--h-g0);border-top:1px solid var(--h-line);box-shadow:none}
html[data-tema="hud-terang"] .bnav a{gap:6px;color:#7f8792;font-size:9.5px;line-height:1;letter-spacing:.12em}
html[data-tema="hud-terang"] .bnav svg{width:21px;height:21px}
html[data-tema="hud-terang"] .bnav a[aria-current="page"]{color:var(--h-putih);font-weight:600}
html[data-tema="hud-terang"] .bnav a[aria-current="page"] svg{fill:none;stroke-width:2}
html[data-tema="hud-terang"] .bnav a[aria-current="page"]::before{display:none}
html[data-tema="hud-terang"] .bnav a[aria-current="page"]::after{content:"";position:absolute;bottom:4px;left:50%;width:18px;height:2px;margin-left:-9px;background:var(--h-putih)}
html[data-tema="hud-terang"] .bnav a:focus-visible{outline:2px solid var(--h-putih);outline-offset:-4px;border-radius:0}
html[data-tema="hud-terang"] .bnav li.center a{color:var(--h-putih)}
html[data-tema="hud-terang"] .bnav li.center a[aria-current="page"]::after{display:none}
html[data-tema="hud-terang"] .bnav .bnav-fab{top:-20px;width:44px;height:44px;border:0;border-radius:0;background:var(--h-putih);transform:translateX(-50%) rotate(45deg);box-shadow:0 0 0 5px var(--h-g0),0 0 0 6px var(--h-line-2)}
html[data-tema="hud-terang"] .bnav .bnav-fab svg{width:22px;height:22px;stroke:var(--h-g1);stroke-width:2;transform:rotate(-45deg)}
html[data-tema="hud-terang"] .bnav li.center a[aria-current="page"] .bnav-fab{background:var(--h-putih);box-shadow:0 0 0 5px var(--h-g0),0 0 0 6px var(--h-putih)}
html[data-tema="hud-terang"] .bnav li.center a[aria-current="page"] .bnav-fab svg{fill:none;stroke-width:2.2}
html[data-tema="hud-terang"] .bnav li.center a:active .bnav-fab{transform:translateX(-50%) rotate(45deg) scale(.94)}
html[data-tema="hud-terang"] .bnav li.center a:focus-visible .bnav-fab{outline:2px solid var(--h-amber);outline-offset:5px}
html[data-tema="hud-terang"] .bnav .bnav-dot{top:10px;left:calc(50% + 9px);width:7px;height:7px;border:0;border-radius:0;background:var(--h-rose);transform:rotate(45deg)}
html[data-tema="hud-terang"] .bnav .bnav-dot.pts{z-index:2;top:5px;left:calc(50% + 8px);width:auto;height:auto;padding:3px 5px;border-radius:0;background:var(--h-amber);color:var(--h-g1);font:600 9px/1 var(--h-disp);letter-spacing:.04em;transform:none}
html[data-tema="hud-terang"] .bnav li.center .bnav-dot.pts{top:-36px;left:calc(50% + 15px)}

/* ── Halaman ───────────────────────────────────────────────────────────── */
html[data-tema="hud-terang"] .page-head{padding:22px 2px 12px}
html[data-tema="hud-terang"] .page-head h1{color:var(--h-putih);font-size:26px;font-weight:600;line-height:1.08;letter-spacing:.08em}
html[data-tema="hud-terang"] .page-head p{margin-top:9px;color:var(--muted);font-size:13.5px;line-height:1.55}
html[data-tema="hud-terang"] .section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:10.5px;font-weight:500;line-height:1;letter-spacing:.24em}
html[data-tema="hud-terang"] .section-kicker::before{content:"";width:6px;height:6px;flex:0 0 6px;background:var(--h-aksen);transform:rotate(45deg)}
html[data-tema="hud-terang"] .page-head .section-kicker{margin-bottom:10px}
html[data-tema="hud-terang"] .page-back{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:16px 0 4px;padding:0 12px;border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih);font-size:11.5px;line-height:1;letter-spacing:.16em}
html[data-tema="hud-terang"] .page-back:hover{background:rgba(255,255,255,.06)}
html[data-tema="hud-terang"] :is(.btn-full,.nota-btn){padding:15px 14px;font-size:12px;line-height:1.1;letter-spacing:.18em}
html[data-tema="hud-terang"] :is(.btn-full.btn-outline,.nota-btn-sekunder){border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}
html[data-tema="hud-terang"] :is(.btn-full.btn-outline,.nota-btn-sekunder):hover{background:rgba(255,255,255,.06)}
html[data-tema="hud-terang"] .muted{color:var(--muted)}
html[data-tema="hud-terang"] .msg{border-radius:0;border:1px solid rgba(255,143,143,.36);background:rgba(255,143,143,.08);color:var(--h-rose)}

/* ── Pembayaran /pesanan/<nomor> ───────────────────────────────────────── */
html[data-tema="hud-terang"] .payment-card::before{display:none}
html[data-tema="hud-terang"] .pay-page{padding:20px 16px 16px}
html[data-tema="hud-terang"] .pay-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:0;color:var(--h-mint);font-size:10.5px;font-weight:500;letter-spacing:.2em}
html[data-tema="hud-terang"] .pay-kicker::before{content:"";width:6px;height:6px;flex:0 0 6px;background:var(--h-mint);transform:rotate(45deg)}
html[data-tema="hud-terang"] .pay-page h3{margin:10px 0 16px;color:var(--h-putih);font-size:17px;line-height:1.2;letter-spacing:.14em}
html[data-tema="hud-terang"] .pay-invoice{padding:18px 18px 16px;border:1px solid var(--h-line-2);background:var(--h-siku),rgba(0,0,0,.3);box-shadow:none}
html[data-tema="hud-terang"] .pay-invoice-label{color:var(--muted);font-size:10.5px;font-weight:500;letter-spacing:.2em}
html[data-tema="hud-terang"] .pay-invoice-amount{margin-top:12px;color:var(--h-putih);font:600 34px/1 var(--h-disp);letter-spacing:.02em;font-variant-numeric:tabular-nums}
html[data-tema="hud-terang"] .pay-invoice-product{margin-top:10px;color:#c9ced5;font-size:11.5px;font-weight:500;line-height:1.3;letter-spacing:.14em}
html[data-tema="hud-terang"] .pay-funding-breakdown{margin-top:14px;padding-top:12px;border-top:1px dashed var(--h-line-2)}
html[data-tema="hud-terang"] .pay-funding-breakdown span{color:var(--muted);font-size:12.5px}
html[data-tema="hud-terang"] .pay-funding-breakdown b{color:var(--h-putih);font:600 12.5px/1.2 var(--h-disp);letter-spacing:.02em;font-variant-numeric:tabular-nums}
html[data-tema="hud-terang"] .pay-nota-link{display:inline-flex;align-items:center;min-height:36px;margin-top:8px;color:var(--h-putih);font-size:11px;letter-spacing:.12em;text-decoration:underline;text-underline-offset:4px}
html[data-tema="hud-terang"] .payment-card .pay-status{margin-top:20px;padding:18px 0 0;border-top:1px solid var(--h-line);background:transparent;color:var(--txt)}
/* Tiga langkah + dua garis harus muat di 390px: jarak huruf .14em membuat
   "SELESAI" terpotong di tepi kartu, jadi dirapatkan. */
html[data-tema="hud-terang"] .pay-steps{gap:6px;margin:2px 0 16px}
html[data-tema="hud-terang"] .pay-step{gap:6px;color:var(--t-subtle);font-size:10px;font-weight:500;letter-spacing:.08em;white-space:nowrap}
html[data-tema="hud-terang"] .pay-step.active,html[data-tema="hud-terang"] .pay-step.done{color:var(--h-putih)}
html[data-tema="hud-terang"] .pay-step-dot{width:26px;height:26px;border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--muted);font:600 11.5px/1 var(--h-disp);box-shadow:none}
html[data-tema="hud-terang"] .pay-step.done .pay-step-dot{border-color:rgba(158,232,191,.5);background:transparent;color:var(--h-mint)}
html[data-tema="hud-terang"] .pay-step-line{flex:1 1 auto;width:auto;min-width:6px;height:1px;border-radius:0;background:var(--h-line-2)}
html[data-tema="hud-terang"] .pay-step-line.done{background:var(--h-mint)}
/* Kepala status: amber saat menunggu, mint berhasil, merah muda gagal. */
html[data-tema="hud-terang"] .pay-state-head{gap:12px;padding:14px;border:1px solid rgba(232,192,122,.32);background:rgba(232,192,122,.06)}
html[data-tema="hud-terang"] .pay-state-symbol{width:36px;height:36px;flex-basis:36px;border:1px solid rgba(232,192,122,.5);background:transparent;color:var(--h-amber);box-shadow:none;font-family:var(--h-disp)}
html[data-tema="hud-terang"] .pay-status.ok .pay-state-head{border-color:rgba(158,232,191,.32);background:rgba(158,232,191,.06)}
html[data-tema="hud-terang"] .pay-status.ok .pay-state-symbol{border-color:rgba(158,232,191,.55);background:transparent;color:var(--h-mint)}
html[data-tema="hud-terang"] .pay-status.err .pay-state-head{border-color:rgba(255,143,143,.36);background:rgba(255,143,143,.06)}
html[data-tema="hud-terang"] .pay-status.err .pay-state-symbol{border-color:rgba(255,143,143,.55);background:transparent;color:var(--h-rose)}
html[data-tema="hud-terang"] .pay-state-head strong{color:var(--h-putih);font:600 13px/1.3 var(--h-disp);letter-spacing:.1em;text-transform:uppercase}
html[data-tema="hud-terang"] .pay-state-head p{margin-top:5px;color:var(--muted);font-size:12.5px;line-height:1.5}
/* Tiket nomor pesanan dengan dua takik berlian di sisi. */
html[data-tema="hud-terang"] .order-ticket{padding:14px 16px 16px;border:1px solid var(--h-line-2);background:rgba(0,0,0,.3);color:var(--txt);box-shadow:none;overflow:visible}
html[data-tema="hud-terang"] .order-ticket::after{content:"";position:absolute;inset:auto;top:53px;right:-5px;width:9px;height:9px;opacity:1;border:1px solid var(--h-line-2);background:var(--h-g1);transform:rotate(45deg)}
html[data-tema="hud-terang"] .order-ticket::before{content:"";position:absolute;top:53px;left:-5px;width:9px;height:9px;border:1px solid var(--h-line-2);background:var(--h-g1);transform:rotate(45deg)}
html[data-tema="hud-terang"] .order-ticket-top{align-items:baseline;min-height:30px;color:var(--muted);font-size:10.5px;font-weight:500;letter-spacing:.18em}
html[data-tema="hud-terang"] .order-ticket-top b{color:var(--h-putih);font:600 19px/1 var(--h-disp);letter-spacing:.14em;text-shadow:none}
html[data-tema="hud-terang"] .order-full-id{color:var(--muted)}
html[data-tema="hud-terang"] .order-ticket-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--h-line-2)}
html[data-tema="hud-terang"] .order-ticket-actions button{min-height:44px;padding:8px;border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih);font-size:10.5px;line-height:1.1;letter-spacing:.12em}
html[data-tema="hud-terang"] .order-ticket-actions button:last-child{border-color:var(--h-putih);background:var(--h-putih);color:var(--h-g1)}
html[data-tema="hud-terang"] .pay-email-note{gap:10px;padding:0;border:0;background:transparent;color:var(--muted);font-size:12.5px;line-height:1.55}
html[data-tema="hud-terang"] .pay-email-note b{color:var(--h-putih);font-weight:600}
html[data-tema="hud-terang"] .va{border:1px solid var(--h-line-2);background:rgba(0,0,0,.3);color:var(--h-putih);font-family:var(--h-disp);letter-spacing:.1em}
html[data-tema="hud-terang"] #pay-body img{padding:10px;border-radius:0;background:#fff}
/* Bingkai bidik di sekeliling gambar QR. */
html[data-tema="hud-terang"] #pay-body img{box-shadow:0 0 0 6px var(--h-g1),0 0 0 7px var(--h-line-2)}
html[data-tema="hud-terang"] .visual-logo-fallback{border-radius:0;background:transparent;box-shadow:inset 0 0 0 1px var(--h-line-2);color:var(--h-putih);font-family:var(--h-disp)}

/* ── Lacak pesanan & nota ──────────────────────────────────────────────── */
html[data-tema="hud-terang"] .track-order-card{overflow:visible}
html[data-tema="hud-terang"] .track-status-head{gap:14px;padding:16px;background:transparent;border-bottom:1px solid var(--h-line)}
html[data-tema="hud-terang"] :is(.track-order-card.ok,.track-order-card.err) .track-status-head{background:transparent;border-bottom-color:var(--h-line)}
html[data-tema="hud-terang"] .track-status-icon{width:44px;height:44px;flex-basis:44px;border:1px solid rgba(232,192,122,.55);background:transparent;color:var(--h-amber);box-shadow:none;font-family:var(--h-disp)}
html[data-tema="hud-terang"] .track-order-card.ok .track-status-icon{border-color:rgba(158,232,191,.55);background:transparent;color:var(--h-mint);box-shadow:none}
html[data-tema="hud-terang"] .track-order-card.err .track-status-icon{border-color:rgba(255,143,143,.55);background:transparent;color:var(--h-rose);box-shadow:none}
html[data-tema="hud-terang"] :is(.track-status-icon,.pay-state-symbol).has-asset{border-color:var(--h-line-2);background:transparent;box-shadow:none;color:var(--txt)}
html[data-tema="hud-terang"] .track-overline{color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.22em}
html[data-tema="hud-terang"] :is(.track-order-card.ok,.track-order-card.err) .track-overline{color:var(--muted)}
html[data-tema="hud-terang"] .track-status-head strong{margin-top:6px;color:var(--h-putih);font-size:19px;line-height:1.1;letter-spacing:.1em}
html[data-tema="hud-terang"] .track-status-head p{margin-top:6px;color:var(--muted);font-size:12.5px;line-height:1.5}
html[data-tema="hud-terang"] .track-status-head small{color:var(--t-subtle)}
html[data-tema="hud-terang"] .track-buyer{border:1px solid var(--h-line);background:rgba(0,0,0,.22)}
html[data-tema="hud-terang"] .track-avatar{font-size:12px;font-weight:600;letter-spacing:.06em}
html[data-tema="hud-terang"] .track-buyer span:not(.track-avatar){color:var(--muted);font-size:9.5px;font-weight:500;letter-spacing:.18em}
html[data-tema="hud-terang"] .track-buyer strong{color:var(--h-putih);font:600 14px/1.25 var(--h-disp);letter-spacing:.04em}
html[data-tema="hud-terang"] .track-detail-grid{border:1px solid var(--h-line)}
html[data-tema="hud-terang"] .track-detail-grid>div{background:rgba(0,0,0,.18)}
html[data-tema="hud-terang"] .track-detail-grid>div:nth-child(odd){border-right-color:var(--h-line)}
html[data-tema="hud-terang"] .track-detail-grid>div:nth-child(-n+2){border-bottom-color:var(--h-line)}
html[data-tema="hud-terang"] .track-detail-grid span{color:var(--muted);font-size:9.5px;font-weight:500;letter-spacing:.16em}
html[data-tema="hud-terang"] .track-detail-grid b{color:var(--h-putih);font:500 12.5px/1.35 var(--h-disp);letter-spacing:.03em}
html[data-tema="hud-terang"] .track-ticket{flex-wrap:wrap;padding:14px 14px 14px 16px;border-top:1px dashed var(--h-line-2);background:rgba(0,0,0,.3);color:var(--txt)}
html[data-tema="hud-terang"] .track-ticket span{color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.2em}
html[data-tema="hud-terang"] .track-ticket b{margin-top:8px;color:var(--h-putih);font:600 18px/1 var(--h-disp);letter-spacing:.1em}
html[data-tema="hud-terang"] .track-ticket button{min-height:40px;padding:0 12px;font-size:10.5px;line-height:1;letter-spacing:.1em}
html[data-tema="hud-terang"] .track-nota-link{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border:1px solid var(--h-line-2);color:var(--h-putih);font-size:10.5px;letter-spacing:.1em}
html[data-tema="hud-terang"] .track-error{border-color:rgba(255,143,143,.36);background:rgba(255,143,143,.06);color:var(--h-rose)}
html[data-tema="hud-terang"] .track-security{border:1px solid var(--h-line);background:rgba(0,0,0,.22);color:var(--txt)}
html[data-tema="hud-terang"] .track-security span{color:var(--muted)}
html[data-tema="hud-terang"] .refund-box{border:1px solid var(--h-line);background:rgba(0,0,0,.22)}
html[data-tema="hud-terang"] .refund-box[style]{color:var(--err-tx)!important}
html[data-tema="hud-terang"] .refund-opt button{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih);font-size:11px;letter-spacing:.1em}
html[data-tema="hud-terang"] .st-badge{font-family:var(--h-disp);letter-spacing:.1em;text-transform:uppercase}

/* ── Bantuan & Info ────────────────────────────────────────────────────── */
html[data-tema="hud-terang"] .faq-item{border-top-color:var(--h-line)}
html[data-tema="hud-terang"] .faq-item summary{color:var(--txt);font-size:14px;font-weight:600}
html[data-tema="hud-terang"] .faq-item summary::after,html[data-tema="hud-terang"] .seo-faq summary::after{border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih);font-family:var(--h-disp)}
html[data-tema="hud-terang"] .faq-item[open] summary::after{border-color:var(--h-putih);background:var(--h-putih);color:var(--h-g1)}
html[data-tema="hud-terang"] .faq-item p{color:var(--muted)}
html[data-tema="hud-terang"] .cs-copy small{color:var(--muted)}
html[data-tema="hud-terang"] .cs-copy b{color:var(--h-putih);font:600 14px/1.2 var(--h-disp);letter-spacing:.08em}
html[data-tema="hud-terang"] .cs-go{color:var(--muted)}
html[data-tema="hud-terang"] :is(.info-promo-list,.info-leaderboard-list) img{border-color:var(--h-line)}
html[data-tema="hud-terang"] .info-posts li{border-top-color:var(--h-line)}
html[data-tema="hud-terang"] .info-posts a{color:var(--txt)}
html[data-tema="hud-terang"] .info-posts a b{font-weight:600;font-size:14px}
html[data-tema="hud-terang"] .info-posts a:hover b{color:var(--h-putih);text-decoration:underline;text-underline-offset:3px}
html[data-tema="hud-terang"] .info-more{color:var(--h-putih);font-size:11.5px;text-decoration:underline;text-underline-offset:4px}
html[data-tema="hud-terang"] .info-brand{color:var(--h-putih)}

/* Menu akun / tautan halaman */
html[data-tema="hud-terang"] :is(.account-menu a,.account-menu button){min-height:54px;padding:0 16px;border-top-color:var(--h-line);color:var(--h-putih);font-size:12px;line-height:1;letter-spacing:.14em}
html[data-tema="hud-terang"] :is(.account-menu a,.account-menu button):hover{background:rgba(255,255,255,.05)}
html[data-tema="hud-terang"] :is(.account-menu a,.account-menu button)>span{border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih);box-shadow:none;font:600 11px/1 var(--h-disp);letter-spacing:0}
html[data-tema="hud-terang"] .account-menu a>i{color:var(--t-subtle)}
html[data-tema="hud-terang"] .account-menu button.danger{color:var(--h-rose)}
html[data-tema="hud-terang"] .account-menu button.danger>span{border-color:rgba(255,143,143,.5);background:transparent;color:var(--h-rose)}
html[data-tema="hud-terang"] .account-session-note{margin-top:12px;color:var(--t-subtle);font-size:10px;font-weight:500;letter-spacing:.14em;text-align:center}
html[data-tema="hud-terang"] .login-card .login-back{border:0;background:transparent;color:var(--muted);font-size:11px}

/* ── Akun: kartu anggota & check-in ────────────────────────────────────── */
html[data-tema="hud-terang"] .player-pass{padding:18px 36px 18px 18px;border-color:var(--h-line-2);background:var(--h-siku),linear-gradient(135deg,rgba(255,255,255,.07) 0 22%,rgba(255,255,255,0) 22%),repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),rgba(20,23,28,.9);color:var(--txt)}
/* Label tegak di tepi kanan: tanda eksklusif tema ini. ::before bawaan
   (takik tiket) dimatikan; ::after dipakai untuk labelnya. */
html[data-tema="hud-terang"] .player-pass::before{display:none}
html[data-tema="hud-terang"] .player-pass::after{content:"TOKOMD // MEMBER";top:18px;right:10px;bottom:18px;left:auto;width:auto;height:auto;padding-left:6px;border-left:1px solid var(--h-line);border-radius:0;background:none;color:rgba(255,255,255,.34);font:500 8px/1 var(--h-disp);letter-spacing:.34em;text-align:center;writing-mode:vertical-rl;pointer-events:none}
html[data-tema="hud-terang"] .wallet-pass::after{content:"TOKOMD // DOMPET"}
html[data-tema="hud-terang"] .player-pass-top{position:relative;align-items:flex-start;flex-wrap:wrap;row-gap:10px}
html[data-tema="hud-terang"] .player-avatar{width:56px;height:56px;flex:0 0 56px;border:1px solid var(--h-putih);border-radius:0;background:rgba(255,255,255,.06);box-shadow:none;outline:1px solid var(--h-line);outline-offset:4px;color:var(--h-putih);font-size:24px}
html[data-tema="hud-terang"] :is(.avatar-orbit,.avatar-bolt,.avatar-crown,.avatar-nova,.avatar-jade,.avatar-pixel,.avatar-initials){background:rgba(255,255,255,.06)}
html[data-tema="hud-terang"] .avatar-initials{font-family:var(--h-disp);font-weight:600}
html[data-tema="hud-terang"] .player-identity strong{color:var(--h-putih);font-size:17px;line-height:1.15;letter-spacing:.1em}
html[data-tema="hud-terang"] .player-identity>span{margin-top:5px;color:var(--muted);font-size:12px}
html[data-tema="hud-terang"] .player-identity-actions{gap:6px;margin-top:10px}
html[data-tema="hud-terang"] .player-identity-actions button{height:30px;padding:0 9px;border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih);font-size:9.5px;letter-spacing:.12em}
html[data-tema="hud-terang"] .profile-result{color:var(--muted)}
/* Chip tier duduk di barisnya sendiri di bawah avatar. Sebelumnya dipaku
   absolut di 72px dari atas, padahal tombol "Ubah nama" tumbuh di kolom yang
   sama dan berhenti persis di ketinggian itu — begitu namanya pendek (dua
   baris identitas saja) keduanya saling menimpa. Barisnya dipaksa lewat
   flex-basis kolom identitas: avatar 56px + gap 12px + sisa = satu baris
   penuh, jadi chip selalu turun. */
html[data-tema="hud-terang"] .player-identity{flex:1 1 calc(100% - 68px)}
html[data-tema="hud-terang"] .player-pass-top>.tier-chip{position:static;align-self:flex-start;max-width:none;width:auto}
html[data-tema="hud-terang"] .tier-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:1px solid var(--h-amber);border-radius:0;background:transparent;color:var(--h-amber);font-size:10px;line-height:1;letter-spacing:.2em}
html[data-tema="hud-terang"] .tier-chip::before{content:"";width:5px;height:5px;flex:0 0 5px;background:var(--h-amber);transform:rotate(45deg)}
html[data-tema="hud-terang"] .account-meters{gap:1px;margin:18px 0 0;padding:0;border:1px solid var(--h-line);background:var(--h-line)}
html[data-tema="hud-terang"] .account-meters>div{padding:12px 14px;background:rgba(14,16,19,.94)}
html[data-tema="hud-terang"] .account-meters>div+div{padding-left:14px;border-left:0}
html[data-tema="hud-terang"] .account-meters span{color:var(--muted);font-size:9.5px;font-weight:500;letter-spacing:.22em}
html[data-tema="hud-terang"] .account-meters strong{margin-top:7px;color:var(--h-putih);font:600 18px/1 var(--h-disp);letter-spacing:.02em;font-variant-numeric:tabular-nums}
html[data-tema="hud-terang"] .tier-progress{margin-top:14px}
html[data-tema="hud-terang"] .tier-progress>div:first-child{color:var(--muted);font:500 10px/1.2 var(--h-disp);letter-spacing:.12em;text-transform:uppercase}
html[data-tema="hud-terang"] .tier-progress b{color:var(--h-putih);font:600 10.5px/1.2 var(--h-disp);letter-spacing:.04em;text-transform:none;font-variant-numeric:tabular-nums}
/* Bilah kemajuan bersegmen ala HUD. */
html[data-tema="hud-terang"] .tier-track{height:8px;margin-top:10px;border-radius:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 10px,transparent 10px 13px)}
html[data-tema="hud-terang"] .tier-track span{border-radius:0;background:repeating-linear-gradient(90deg,var(--h-putih) 0 10px,transparent 10px 13px)}
html[data-tema="hud-terang"] :is(.profile-editor,.avatar-picker){border:1px solid var(--h-line);background:rgba(0,0,0,.3);box-shadow:none}
html[data-tema="hud-terang"] .profile-editor>label{color:var(--muted);font-family:var(--h-disp);font-weight:500;letter-spacing:.16em}
html[data-tema="hud-terang"] .profile-editor input{border:1px solid var(--h-line-2);border-radius:0;background:var(--h-field);color:var(--h-putih)}
html[data-tema="hud-terang"] .profile-cancel{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}
html[data-tema="hud-terang"] #acct-name-help,html[data-tema="hud-terang"] .avatar-picker>span,html[data-tema="hud-terang"] .avatar-save-status{color:var(--muted)}
html[data-tema="hud-terang"] .profile-editor-status{color:var(--h-amber)}
html[data-tema="hud-terang"] .avatar-options button{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}
html[data-tema="hud-terang"] .avatar-options button[aria-pressed="true"]{border-color:var(--h-putih);background:var(--h-putih);color:var(--h-g1)}
html[data-tema="hud-terang"] .checkin-card{gap:12px;padding:16px}
html[data-tema="hud-terang"] .checkin-mark{width:42px;height:42px;border-color:var(--h-putih);font-size:13px;font-weight:600;letter-spacing:.04em}
html[data-tema="hud-terang"] .checkin-card strong{color:var(--h-putih);font-size:12.5px;line-height:1.2;letter-spacing:.14em}
html[data-tema="hud-terang"] .checkin-card>div>span{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45}
html[data-tema="hud-terang"] .checkin-card button{min-height:44px;padding:0 14px;font-size:10.5px;line-height:1;letter-spacing:.14em}
html[data-tema="hud-terang"] .checkin-days{gap:5px}
html[data-tema="hud-terang"] .checkin-days li{gap:7px;padding:8px 0 9px;border:1px solid var(--h-line);border-radius:0;background:transparent;color:var(--t-subtle)}
html[data-tema="hud-terang"] .checkin-days li>span{font:500 8.5px/1 var(--h-disp);letter-spacing:.08em;text-transform:uppercase}
html[data-tema="hud-terang"] .checkin-days li>b{border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--muted);font:600 11px/1 var(--h-disp)}
html[data-tema="hud-terang"] .checkin-days li>small{color:#d6dbe1;font:600 9.5px/1 var(--h-disp)}
html[data-tema="hud-terang"] .checkin-days li.done{border-color:var(--h-line);background:transparent}
html[data-tema="hud-terang"] .checkin-days li.done>b{border-color:rgba(158,232,191,.5);background:transparent;color:var(--h-mint)}
html[data-tema="hud-terang"] .checkin-days li.today{border-color:var(--h-putih);box-shadow:inset 0 0 0 1px var(--h-putih)}
html[data-tema="hud-terang"] .checkin-days li.bonus{border-color:rgba(232,192,122,.5);background:transparent}
html[data-tema="hud-terang"] .checkin-days li.bonus>b{border-color:rgba(232,192,122,.6);color:var(--h-amber)}
html[data-tema="hud-terang"] .checkin-days li.bonus>small{color:var(--h-amber)}
html[data-tema="hud-terang"] .account-rank{border-color:rgba(232,192,122,.4)}
html[data-tema="hud-terang"] .account-rank span{color:var(--h-amber);font-family:var(--h-disp);font-weight:500;letter-spacing:.16em}
html[data-tema="hud-terang"] .account-rank strong{color:var(--h-putih);font-family:var(--h-disp);font-weight:600}
html[data-tema="hud-terang"] .account-rank small{color:var(--muted)}
html[data-tema="hud-terang"] .spender-card::after{display:none}
html[data-tema="hud-terang"] .spender-head h2{color:var(--h-putih);font-size:15px;letter-spacing:.14em}
html[data-tema="hud-terang"] .spender-head p{color:var(--muted)}
html[data-tema="hud-terang"] .spender-trophy{width:40px;height:40px;flex-basis:40px;color:var(--h-amber);border-color:rgba(232,192,122,.55)}
html[data-tema="hud-terang"] .spender-periods{gap:0;padding:0;border:1px solid var(--h-line);background:transparent}
html[data-tema="hud-terang"] .spender-periods button{border-radius:0;color:var(--muted);font-size:10.5px;letter-spacing:.12em}
html[data-tema="hud-terang"] .spender-list li{border:1px solid var(--h-line);background:rgba(0,0,0,.22)}
html[data-tema="hud-terang"] .spender-rank{color:var(--t-subtle);font-family:var(--h-disp)}
html[data-tema="hud-terang"] .spender-list li:first-child .spender-rank{color:var(--h-amber)}
html[data-tema="hud-terang"] .spender-person strong{color:var(--h-putih)}
html[data-tema="hud-terang"] .spender-person small{color:var(--muted)}
html[data-tema="hud-terang"] .spender-list li>b{color:var(--h-putih);font-family:var(--h-disp);font-weight:600;letter-spacing:.02em}
html[data-tema="hud-terang"] :is(.spender-state,.spender-zone){color:var(--muted)}

/* ── Saldo ─────────────────────────────────────────────────────────────── */
html[data-tema="hud-terang"] .wallet-pass-top{align-items:flex-start}
html[data-tema="hud-terang"] .wallet-pass-mark{width:52px;height:52px;flex-basis:52px;border-color:var(--h-putih);font-size:16px;font-weight:600}
html[data-tema="hud-terang"] .wallet-pass-copy .section-kicker{color:var(--muted)}
html[data-tema="hud-terang"] .wallet-pass-copy strong{margin-top:6px;color:var(--h-putih);font:600 16px/1.2 var(--h-disp);letter-spacing:.1em;text-transform:uppercase}
html[data-tema="hud-terang"] .wallet-pass-copy small{margin-top:4px;color:var(--muted);font-size:12px}
html[data-tema="hud-terang"] .wallet-pass-top>.tier-chip{flex:0 0 auto}
html[data-tema="hud-terang"] .wallet-pass-balance{border-top:1px dashed var(--h-line-2)}
html[data-tema="hud-terang"] .wallet-pass-balance span{color:var(--muted);font-size:9.5px;font-weight:500;letter-spacing:.22em}
html[data-tema="hud-terang"] .wallet-pass-balance strong{color:var(--h-putih);font:600 34px/1.05 var(--h-disp);letter-spacing:.01em;text-shadow:none}
html[data-tema="hud-terang"] .wallet-pass .wallet-pass-meters{margin-top:14px;padding:0;border:1px solid var(--h-line)}
html[data-tema="hud-terang"] .wallet-pass-btn{min-height:46px;border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih);font-size:11.5px;letter-spacing:.16em}
html[data-tema="hud-terang"] .wallet-pass-btn b{border-radius:0;background:rgba(14,16,19,.16)}
html[data-tema="hud-terang"] .wallet-topup-mark{border:1px solid var(--h-putih);border-radius:0;background:transparent;color:var(--h-putih);font-family:var(--h-disp);box-shadow:none}
/* Lencana "+" di sudut tanda Rp jadi berlian mint kecil. */
html[data-tema="hud-terang"] .wallet-topup-mark span{width:12px;height:12px;right:-6px;top:-6px;border:0;border-radius:0;background:var(--h-mint);font-size:0;transform:rotate(45deg)}
html[data-tema="hud-terang"] .wallet-topup-head h4{color:var(--h-putih);font-size:15px;letter-spacing:.12em}
html[data-tema="hud-terang"] .wallet-topup-head p{color:var(--muted)}
html[data-tema="hud-terang"] .wallet-topup-steps{color:var(--muted);letter-spacing:.1em}
html[data-tema="hud-terang"] .wallet-topup-steps span{border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--muted);font-family:var(--h-disp)}
html[data-tema="hud-terang"] .wallet-topup-steps .active{color:var(--h-putih)}
html[data-tema="hud-terang"] .wallet-topup-steps li:not(:last-child)::after{height:1px;background:var(--h-line-2)}
html[data-tema="hud-terang"] :is(#wallet-topup-form legend,.wallet-topup-custom>span:first-child,.account-filter label>span){color:var(--muted);font-weight:500;letter-spacing:.16em}
html[data-tema="hud-terang"] .wallet-topup-presets button{color:#d6dbe1;font:600 13px/1.1 var(--h-disp);letter-spacing:.02em}
html[data-tema="hud-terang"] .wallet-topup-input{border:1px solid var(--h-line-2);background:var(--h-field)}
html[data-tema="hud-terang"] .wallet-topup-input:focus-within{border-color:var(--h-putih);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
html[data-tema="hud-terang"] .wallet-topup-input b{color:var(--muted);font-family:var(--h-disp)}
html[data-tema="hud-terang"] .wallet-topup-custom>small{color:var(--muted)}
html[data-tema="hud-terang"] :is(.wallet-topup-quote>p,.wallet-topup-error){border:1px solid var(--h-line);background:rgba(0,0,0,.22);color:var(--muted)}
html[data-tema="hud-terang"] .wallet-topup-error{border-color:rgba(255,143,143,.36);color:var(--h-rose)}
html[data-tema="hud-terang"] .wallet-topup-quote-head span{color:var(--muted)}
html[data-tema="hud-terang"] .wallet-topup-method-logo{border:0;border-radius:0;background:#fff}
html[data-tema="hud-terang"] .wallet-topup-methods button small{color:var(--muted)}
html[data-tema="hud-terang"] .wallet-topup-methods button>strong{font-family:var(--h-disp);letter-spacing:.02em}
html[data-tema="hud-terang"] .wallet-topup-breakdown{border:1px solid rgba(158,232,191,.3);background:rgba(158,232,191,.06);color:var(--h-mint)}
html[data-tema="hud-terang"] .wallet-topup-submit{min-height:48px;padding:0 14px;font-size:12px;line-height:1.1;letter-spacing:.14em}
html[data-tema="hud-terang"] .wallet-topup-message{color:var(--muted)}
html[data-tema="hud-terang"] .wallet-topup-instruction{border:1px solid var(--h-line);background:rgba(0,0,0,.22);color:var(--muted)}
html[data-tema="hud-terang"] .wallet-topup-instruction img{border-radius:0;background:#fff}
html[data-tema="hud-terang"] .wallet-topup-va strong{color:var(--h-putih);font-family:var(--h-disp)}
html[data-tema="hud-terang"] .wallet-topup-active{border:1px solid rgba(232,192,122,.4);background:rgba(232,192,122,.06)}
html[data-tema="hud-terang"] .wallet-topup-active-head strong{color:var(--h-amber)}
html[data-tema="hud-terang"] .wallet-topup-record{border:1px solid var(--h-line);border-left:3px solid var(--h-amber);background:rgba(0,0,0,.22)}
html[data-tema="hud-terang"] .wallet-topup-record.process{border-left-color:var(--h-putih)}
html[data-tema="hud-terang"] .wallet-topup-record.done{border-left-color:var(--h-mint)}
html[data-tema="hud-terang"] .wallet-topup-record.fail{border-left-color:var(--h-rose)}
html[data-tema="hud-terang"] .wallet-topup-record button{border:1px solid var(--h-putih);background:var(--h-putih);color:var(--h-g1)}
html[data-tema="hud-terang"] .account-subhead strong{color:var(--h-putih);font-size:12px;letter-spacing:.14em}
html[data-tema="hud-terang"] .account-subhead span{color:var(--muted)}
html[data-tema="hud-terang"] .account-subhead button{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih);font-size:9.5px}
html[data-tema="hud-terang"] :is(.account-filter input,.account-filter select){border:1px solid var(--h-line-2);border-radius:0;background:var(--h-field);color:var(--h-putih)}
html[data-tema="hud-terang"] .account-entry{border:1px solid var(--h-line);background:rgba(0,0,0,.22);color:var(--txt)}
html[data-tema="hud-terang"] .entry-kicker{color:var(--muted);font-family:var(--h-disp);font-weight:500;letter-spacing:.16em}
html[data-tema="hud-terang"] :is(.entry-main small,.entry-main>span:not(.entry-kicker)){color:var(--muted)}
html[data-tema="hud-terang"] .transaction-entry>button{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih);font-size:10px;letter-spacing:.12em}
html[data-tema="hud-terang"] .entry-status{border:1px solid rgba(232,192,122,.5);background:transparent;color:var(--h-amber);font-size:8.5px;font-weight:600;letter-spacing:.12em}
html[data-tema="hud-terang"] .entry-status.ok{border-color:rgba(158,232,191,.5);background:transparent;color:var(--h-mint)}
html[data-tema="hud-terang"] .entry-status.err{border-color:rgba(255,143,143,.5);background:transparent;color:var(--h-rose)}
html[data-tema="hud-terang"] .entry-value>strong{font-family:var(--h-disp);font-weight:600;letter-spacing:.02em}
html[data-tema="hud-terang"] .mutation-sign.pos{border-color:rgba(158,232,191,.5);background:transparent;color:var(--h-mint)}
html[data-tema="hud-terang"] .mutation-sign.neg{border-color:rgba(255,143,143,.5);background:transparent;color:var(--h-rose)}
html[data-tema="hud-terang"] .account-more{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih);font-size:10.5px;letter-spacing:.14em}
html[data-tema="hud-terang"] :is(.account-list-state,.account-loading){color:var(--muted)}
html[data-tema="hud-terang"] .account-loading{border:1px solid var(--h-line);background:var(--h-panel)}
html[data-tema="hud-terang"] .account-error{border:1px solid rgba(255,143,143,.36);background:rgba(255,143,143,.06);color:var(--h-rose)}

/* Pesan massal: cukup ikut token; isian & tombol sekunder digelapkan */
html[data-tema="hud-terang"] :is(.bulk-field select,.bulk-field textarea){border:1px solid var(--h-line-2);background:var(--h-field);color:var(--h-putih)}
html[data-tema="hud-terang"] .bulk-field>span{color:var(--muted);font-family:var(--h-disp);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
html[data-tema="hud-terang"] .bulk-secondary{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih);font-size:11px}
html[data-tema="hud-terang"] :is(.bulk-summary,.bulk-confirm-detail){border:1px solid var(--h-line);background:rgba(0,0,0,.22)}
html[data-tema="hud-terang"] .bulk-hist{border:1px solid var(--h-line-2);background:transparent;color:var(--muted);font-size:10px}
html[data-tema="hud-terang"] .bulk-hist.is-active{border-color:var(--h-putih);color:var(--h-putih)}
html[data-tema="hud-terang"] .bulk-chip{font-family:var(--h-disp);letter-spacing:.08em}
html[data-tema="hud-terang"] .bulk-no{border:1px solid var(--h-line-2);color:var(--h-putih)}
html[data-tema="hud-terang"] .bulk-confirm-no{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}

/* ── Artikel panduan, jelajah, kaki identitas ─────────────────────────── */
html[data-tema="hud-terang"] .seo-jelajah{border:1px solid var(--h-line);background:var(--h-panel);color:var(--muted)}
html[data-tema="hud-terang"] .seo-jelajah a{color:var(--h-putih);font-family:var(--h-disp);font-weight:600;letter-spacing:.06em}
html[data-tema="hud-terang"] .seo-produk a{color:var(--t-on-bg-link)}
html[data-tema="hud-terang"] .seo-artikel{--seo-soft:rgba(0,0,0,.22);--seo-line:rgba(255,255,255,.14)}
html[data-tema="hud-terang"] .seo-article-head{background:transparent}
html[data-tema="hud-terang"] .seo-article-head::after{display:none}
html[data-tema="hud-terang"] .seo-eyebrow{gap:10px;color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.22em}
html[data-tema="hud-terang"] .seo-eyebrow span{width:6px;height:6px;flex:0 0 6px;border-radius:0;background:var(--h-aksen);transform:rotate(45deg)}
html[data-tema="hud-terang"] .seo-artikel h2{color:var(--h-putih);font:600 21px/1.25 var(--h-disp);letter-spacing:.03em;text-wrap:balance}
html[data-tema="hud-terang"] .seo-artikel h3{color:var(--h-putih);font:600 16px/1.35 var(--h-disp);letter-spacing:.04em}
html[data-tema="hud-terang"] .seo-toggle{min-height:44px;margin-top:14px;padding:0 16px;font-size:11px;line-height:1;letter-spacing:.16em}
html[data-tema="hud-terang"] .seo-lead{color:#c9ced5}
html[data-tema="hud-terang"] .seo-article-lead{background:transparent}
html[data-tema="hud-terang"] .seo-route{gap:6px;padding:0;border:0;background:transparent;box-shadow:none}
html[data-tema="hud-terang"] .seo-route span{padding:8px 6px;border:1px solid var(--h-line-2);color:var(--h-putih);font:500 10px/1.2 var(--h-disp);letter-spacing:.1em;text-transform:uppercase}
html[data-tema="hud-terang"] .seo-route i{color:var(--t-subtle)}
html[data-tema="hud-terang"] .seo-article-body{background:transparent}
html[data-tema="hud-terang"] .seo-block{border:0;border-top:1px solid var(--h-line);background:transparent;box-shadow:none}
html[data-tema="hud-terang"] .seo-block::before{display:none}
html[data-tema="hud-terang"] .seo-block-label{color:var(--t-subtle);font-size:9.5px;font-weight:500;letter-spacing:.24em}
html[data-tema="hud-terang"] .seo-copy p{color:#c9ced5}
html[data-tema="hud-terang"] .seo-step-list li{color:#c9ced5}
html[data-tema="hud-terang"] .seo-step-list li::before{content:"0" counter(seo-step);flex:0 0 30px;width:30px;height:26px;border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih);font:600 11px/1 var(--h-disp);letter-spacing:.06em;box-shadow:none}
html[data-tema="hud-terang"] .seo-faq{border:1px solid var(--h-line);background:rgba(0,0,0,.22)}
html[data-tema="hud-terang"] .seo-faq[open]{background:rgba(255,255,255,.03)}
html[data-tema="hud-terang"] .seo-faq summary{color:var(--txt);font-weight:600}
html[data-tema="hud-terang"] .seo-faq p{color:var(--muted)}
html[data-tema="hud-terang"] .seo-return{border-top:1px solid var(--h-line);background:rgba(255,255,255,.04);color:var(--h-putih)}
html[data-tema="hud-terang"] .seo-return small{color:var(--muted);font-size:9.5px;font-weight:500;letter-spacing:.2em;opacity:1}
html[data-tema="hud-terang"] .seo-return span{font:600 13.5px/1.3 var(--h-disp);letter-spacing:.06em}
html[data-tema="hud-terang"] .seo-return b{border-color:var(--h-putih);background:var(--h-putih);color:var(--h-g1)}
html[data-tema="hud-terang"] .seo-return:hover b{background:var(--h-putih)}
html[data-tema="hud-terang"] footer.foot{color:var(--t-subtle)}
html[data-tema="hud-terang"] .ident-foot{--ident-accent-d:var(--h-putih);border-top-color:var(--h-line)}
html[data-tema="hud-terang"] .ident-segel>span{gap:8px;padding:0 10px;min-height:30px;border:1px solid var(--h-line-2);border-radius:0;background:transparent;box-shadow:none;color:#d6dbe1;font-size:10px;font-weight:500;letter-spacing:.14em}
html[data-tema="hud-terang"] .ident-mark{border-radius:0;box-shadow:none}
html[data-tema="hud-terang"] .ident-name{color:var(--h-putih);font-family:var(--h-disp);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
/* Logo nama kaki halaman (gambar hitam) diwarnai biru merek, sama dengan kepala. */
html[data-tema="hud-terang"] .ident-wordmark{filter:brightness(0) saturate(100%) invert(40%) sepia(98%) saturate(2274%) hue-rotate(212deg) brightness(106%) contrast(114%)}
html[data-tema="hud-terang"] .ident-legal{color:var(--t-subtle)}
html[data-tema="hud-terang"] .ident-legal-nama{color:var(--h-putih);font-family:var(--h-disp);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
html[data-tema="hud-terang"] .ident-kontak a{border-bottom-color:var(--h-line-2)}
html[data-tema="hud-terang"] .ident-kebijakan a{font-family:var(--h-disp);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
html[data-tema="hud-terang"] .ident-copy{font-family:var(--h-disp);font-size:10px;letter-spacing:.14em;text-transform:uppercase}

/* ── Overlay ───────────────────────────────────────────────────────────── */
html[data-tema="hud-terang"] :is(.paycard,.tg-miniapp-install-card){border:1px solid var(--h-line-2);background:var(--h-siku),var(--h-g2);color:var(--txt);box-shadow:0 24px 60px rgba(0,0,0,.6)}
html[data-tema="hud-terang"] :is(.paycard h3,.tg-miniapp-install-card h3){color:var(--h-putih);letter-spacing:.12em}
html[data-tema="hud-terang"] .tg-miniapp-install-card p{color:var(--muted)}
html[data-tema="hud-terang"] .tg-miniapp-install-later{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}
html[data-tema="hud-terang"] .close{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}
html[data-tema="hud-terang"] #event-popup-close{border:1px solid var(--h-line-2);border-radius:0;background:var(--h-g1);color:var(--h-putih)}
html[data-tema="hud-terang"] .event-popup-card{border-radius:0;background:var(--h-g0);box-shadow:0 0 0 1px var(--h-line-2),0 24px 60px rgba(0,0,0,.6)}
/* Lebar kartu ikut poster. Kartu bawaan selebar 420px, tetapi gambarnya
   dibatasi setinggi layar (max-height 100vh - 150px, object-fit contain):
   di desktop poster tegak jadi lebih sempit dari kartu dan menyisakan bidang
   kosong di kiri-kanan (terlihat jelas di HUD Terang). Batas ¾ tinggi itu =
   lebar poster 3:4 (ukuran pop-up TokoMD); poster yang lebih lebar dari 3:4
   tetap pas tanpa bidang kosong, hanya sedikit lebih kecil. */
html[data-tema="hud-terang"] .event-popup-card{width:min(92vw,420px,calc((100vh - 150px) * .75))}
html[data-tema="hud-terang"] .event-popup-body{border-radius:0}
html[data-tema="hud-terang"] .event-popup-cta{font-size:12px;letter-spacing:.16em}
html[data-tema="hud-terang"] .bulk-done-mark{color:var(--h-mint);border-color:rgba(158,232,191,.55)}
html[data-tema="hud-terang"] .bulk-done-note{border-radius:0;background:rgba(0,0,0,.22);color:var(--muted)}

/* ── Kekakuan dikendurkan ──────────────────────────────────────────────────
   Versi pertama menulis SEMUA dengan kapital berjarak lebar, tanpa satu pun
   lengkung, dan memberi siku ke tiap panel. Ketiganya membuat toko terbaca
   seperti panel mesin dan melelahkan dibaca. Yang DIPERTAHANKAN: angka dan
   label kecil tetap Tomorrow kapital, sudut tetap tegas (4px, bukan 12px),
   dan siku tetap ada — hanya di panel utama, sehingga kembali jadi tanda,
   bukan pengulangan. */
/* 1 · Nama, judul, dan menu kembali huruf biasa (Hanken), bukan kapital. */
html[data-tema="hud-terang"] :is(.card h2,.page-head h1,.pay-page h3,.prod .n,.paym-n,.account-menu a,.account-menu button,
  .player-identity strong,.checkin-card strong,.spender-head h2,.seo-artikel h2,.seo-artikel h3,.track-status-head strong,
  .benefit-card b,.benefit-card strong,.wallet-topup-head h4,.faq-item summary,.info-posts a b,.cs-copy b,.pay-invoice-product,
  .track-buyer strong,.track-detail-grid b,.entry-main strong,.account-subhead strong,.ident-name,.ident-legal-nama,
  .b-brand span,.flash-sale-head h3,.wallet-pass-copy strong,.seo-return span){
  font-family:var(--t-font);text-transform:none;letter-spacing:.005em;font-weight:700;
}
html[data-tema="hud-terang"] .card h2{font-size:16px}
html[data-tema="hud-terang"] .page-head h1{font-size:28px;letter-spacing:-.01em}
html[data-tema="hud-terang"] .prod .n{color:#c4cbd6;font-size:13px;line-height:1.3}
html[data-tema="hud-terang"] :is(.account-menu a,.account-menu button){font-size:14px;letter-spacing:0}
html[data-tema="hud-terang"] .paym-n{font-size:13.5px}
html[data-tema="hud-terang"] .player-identity strong{font-size:18px}
html[data-tema="hud-terang"] .track-status-head strong{font-size:20px}
/* Label kecil tetap kapital Tomorrow, jaraknya dirapatkan dari .14–.24em. */
html[data-tema="hud-terang"] :is(.section-kicker,.summary-assurance,.pay-kicker,.track-overline,.pay-invoice-label,
  .account-meters span,.wallet-pass-balance span,.bnav a,.tabs button,.tabs a,.order-ticket-top span,.track-ticket span,
  .checkout-benefits-head>span,.external-pay-head>span,.track-detail-grid span,.track-buyer span:not(.track-avatar),
  .entry-status,.tier-chip,.seo-eyebrow,.seo-block-label,.ident-segel>span,.ident-kebijakan a,.ident-copy,
  .account-session-note){letter-spacing:.1em}
/* 2 · Sudut 4px, bukan bidang miring. Geometri ala Arena — sudut kartu
   dipotong, tombol dan tab jajar genjang, ikon heksagon — dicoba 23 Sep 2026
   lalu DITOLAK: bidang miring yang bertumpuk membuat halaman gelisah dan
   kartu nominal terlihat penyok. Yang dipakai: kartu besar tetap tegas,
   kotak kecil sedikit lunak. */
html[data-tema="hud-terang"] :is(.card,.prod,.paym,.benefit-card,.account-menu,.player-pass,.checkin-card,.account-rank,
  .track-order-card,.seo-artikel,.summary,.pay-invoice,.order-ticket,.pay-state-head,.checkout-benefits,.email-help,
  input,textarea,select,.account-filter select,.btn-full,.nota-btn,.btn-outline,.nota-btn-sekunder,#check-btn,#track-go,
  #buy-btn,#bulk-preview-btn,.seo-toggle,.wallet-topup-submit,.checkin-card button,.track-ticket button,.wallet-pass-btn,
  .tabs button,.tabs a,.id-mode,.id-mode button,.benefit-icon,.checkin-mark,.wallet-pass-mark,.track-avatar,.spender-avatar,
  .spender-trophy,.player-avatar,.tier-chip,.pay-step-dot,.wallet-topup-presets button,.wallet-topup-methods button,
  .account-entry,.entry-status,.paym-ic,.track-buyer,.track-detail-grid,.cs-card,.account-more,.account-subhead button,
  .hdr-back,.user-id-row #user-id-guide-btn,.bantuan-tg,.bantuan-avatar,.seo-route span,.seo-faq,.transaction-entry>button,
  .track-nota-link,.checkin-days li,.checkin-days li>b,.avatar-options button,.profile-editor,.avatar-picker,.mutation-sign,
  .wallet-topup-input,.wallet-topup-record,.wallet-topup-instruction,.wallet-topup-active,.spender-list li,.spender-periods,
  .page-back,.event-nav,.paycard,.tg-miniapp-install-card,.close,#event-popup-close,.buyer,.msg,.track-error,.refund-box,
  .refund-opt button,.bulk-secondary,.bulk-summary,.bulk-confirm-detail,.pwa-pasang-hdr,.hdr .link,.b-card,.b-pager a,.b-body,
  .bulk-confirm-yes,.event-popup-cta,.order-ticket-actions button,.btn-ghost,.profile-save,.tg-miniapp-install-confirm,
  .bulk-done-mark,.tg-miniapp-install-mark,.seo-return b,.cs-avatar,.wallet-topup-mark,.track-status-icon,.pay-state-symbol,
  .promo-badge,.flash-ticket,.card h2 .num,.wallet-topup-steps span){border-radius:4px}
html[data-tema="hud-terang"] .faq-item summary::after{border-radius:4px}
html[data-tema="hud-terang"] .bnav .bnav-fab{border-radius:6px}
/* 3 · Siku hanya di panel utama: kartu langkah, kartu anggota, bilah Total,
   dan tagihan — supaya siku kembali jadi tanda, bukan pengulangan. */
html[data-tema="hud-terang"] :is(.checkin-card,.account-spender-card,.wallet-topup-card,.account-rank,.track-order-card,.seo-artikel,
  .paycard,.tg-miniapp-install-card,.b-body){background:var(--h-panel)}
html[data-tema="hud-terang"] :is(.user-id-card-flow,.product-card,.topup-artikel){background:var(--h-siku),var(--h-panel)}
html[data-tema="hud-terang"] .player-pass{background:var(--h-siku),linear-gradient(135deg,rgba(255,255,255,.06) 0 22%,rgba(255,255,255,0) 22%),repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 7px),rgba(23,28,38,.9)}
html[data-tema="hud-terang"] .summary{background:var(--h-siku),rgba(17,21,29,.94)}
html[data-tema="hud-terang"] .pay-invoice{background:var(--h-siku),rgba(0,0,0,.26)}
/* 4 · Pendar biru tipis pada angka besar, dan strip di kepala halaman —
   peran yang di Arena dipegang pendar oranye. */
html[data-tema="hud-terang"] :is(#sum-price,.prod-price strong,.pay-invoice-amount,.wallet-pass-balance strong,.account-meters strong){
  text-shadow:0 0 16px rgba(120,160,255,.35);
}
html[data-tema="hud-terang"] .page-head::before{content:"";display:block;width:34px;height:3px;margin-bottom:10px;
  background:linear-gradient(90deg,var(--h-aksen),rgba(199,215,248,0));box-shadow:0 0 10px rgba(120,160,255,.5)}
/* Judul dan angka besar sedikit lebih terang dari teks badan. */
html[data-tema="hud-terang"] :is(.card h2,.page-head h1,.player-identity strong,#sum-price,.pay-invoice-amount,.prod-price strong,
  .track-status-head strong,.seo-artikel h2,.account-meters strong,.wallet-pass-balance strong){color:#eef2f8}

/* ── Biru TokoMD memimpin ──────────────────────────────────────────────────
   Versi pertama memakai PUTIH sebagai warna aksi dan menyimpan biru merek
   hanya untuk tombol yang memindahkan uang. Akibatnya toko tidak terbaca
   sebagai TokoMD lagi: biru yang dihafal pembeli cuma muncul sekali per
   halaman. Sejak 24 Sep 2026 biru merek yang memimpin — pilihan aktif,
   tombol, siku, ikon, tombol tengah nav. KEPALA dan KANVAS sengaja TETAP
   grafit: pita biru di kepala membuatnya kembali seperti tema Klasik. */
html[data-tema="hud-terang"] :is(.tabs button.active,.tabs a.active,.id-mode button.is-on,.spender-periods button[aria-selected="true"],
  .wallet-topup-steps .active span,.pay-step.active .pay-step-dot,.checkin-days li.today:not(.done)>b){
  border-color:var(--brand);background:var(--brand);color:var(--brand-on,#fff)}
html[data-tema="hud-terang"] :is(#check-btn,#track-go,#bulk-preview-btn,.btn-full:not(.btn-outline),.nota-btn,.seo-toggle,
  .wallet-topup-submit,.checkin-card button,.track-ticket button,.wallet-pass-btn.primary,.bulk-confirm-yes,.event-popup-cta,
  .profile-save,.tg-miniapp-install-confirm,.order-ticket-actions button:last-child):not(:disabled){
  border-color:var(--brand);background:var(--brand);color:var(--brand-on,#fff)}
html[data-tema="hud-terang"] :is(.prod.active,.paym.active,.benefit-card.active,.flash-products .prod.active,
  .wallet-topup-methods button.active,.wallet-topup-presets button[aria-pressed="true"]){
  border-color:var(--brand);background:var(--h-biru-tipis);color:var(--h-biru-terang);box-shadow:inset 0 0 0 1px var(--brand)}
html[data-tema="hud-terang"] .prod.active::before{background:var(--brand)}
html[data-tema="hud-terang"] .prod.active::after{border-color:var(--brand-on,#fff)}
html[data-tema="hud-terang"] :is(.btn-outline,.nota-btn-sekunder,.page-back){border-color:var(--h-biru-cincin);color:var(--h-biru-teks)}
/* Ikon, penanda langkah, dan avatar: garis biru muda, bukan putih. */
html[data-tema="hud-terang"] :is(.benefit-icon,.checkin-mark,.spender-trophy,.wallet-pass-mark,.track-avatar,.bulk-done-mark,
  .tg-miniapp-install-mark,.seo-return b,.mutation-sign,.spender-avatar,.cs-avatar,.wallet-topup-mark,.card h2 .num){
  border-color:var(--h-biru-cincin);color:var(--h-biru-teks)}
html[data-tema="hud-terang"] .player-avatar{border-color:var(--h-biru);color:var(--h-biru-terang)}
/* Tombol tengah bilah nav ponsel. Di layar lebar slot ini jadi tombol header,
   dan blok "Lebar khusus" di bawah yang mengembalikannya. */
html[data-tema="hud-terang"] .bnav .bnav-fab{background:var(--brand);box-shadow:0 0 0 5px var(--h-g0),0 0 0 6px var(--h-biru-cincin)}
html[data-tema="hud-terang"] .bnav .bnav-fab svg{stroke:var(--brand-on,#fff)}
html[data-tema="hud-terang"] .bnav li.center a[aria-current="page"] .bnav-fab{background:var(--brand);box-shadow:0 0 0 5px var(--h-g0),0 0 0 6px var(--brand)}
html[data-tema="hud-terang"] .bnav a[aria-current="page"]{color:var(--h-biru-teks)}
html[data-tema="hud-terang"] .bnav a[aria-current="page"]::after{background:var(--brand)}
/* Angka besar: tetap terang supaya terbaca, pendarnya biru merek. */
html[data-tema="hud-terang"] :is(#sum-price,.prod-price strong,.pay-invoice-amount,.wallet-pass-balance strong,.account-meters strong){
  color:var(--h-biru-terang);text-shadow:0 0 18px var(--h-biru-tipis)}
html[data-tema="hud-terang"] input:focus{border-color:var(--brand);background:rgba(0,0,0,.44);box-shadow:0 0 0 3px var(--h-biru-tipis)}

/* ── Lebar khusus ──────────────────────────────────────────────────────── */
@media (max-width:700px){
  /* Nama nominal 12px seperti Klasik supaya dua baris tetap ringkas. */
  html[data-tema="hud-terang"] .prod .n{font-size:12px}
  /* Kartu dua kolom di ponsel: ikon 36px, jarak 8px, tepi 9px supaya kolom teks
     cukup untuk harga tujuh angka (Rp 5.950.000) satu baris mulai 390px; di
     360px harga sebesar itu patah jadi "Rp" / angka, tidak pernah keluar kartu. */
  html[data-tema="hud-terang"] .prod{padding:9px 9px;grid-template-columns:36px minmax(0,1fr);column-gap:8px}
  html[data-tema="hud-terang"] .prod .ic{width:36px;height:36px}
  html[data-tema="hud-terang"] .prod.prod-image-native .ic img{width:36px;height:36px}
  /* Chip kategori lengket di ponsel: latarnya ikut panel kartu */
  html[data-tema="hud-terang"] .tabs{margin:0 -4px 12px;padding:4px;background:rgba(19,22,26,.97)}
}
@media (max-width:400px){
  html[data-tema="hud-terang"] #buy-btn{padding-inline:12px;font-size:11px;letter-spacing:.06em}
  html[data-tema="hud-terang"] #sum-price{font-size:19px}
  /* Serapat Klasik: 40px ikon + dua baris teks, tanpa ruang kosong di atas-bawah. */
  html[data-tema="hud-terang"] .prod{min-height:84px}
  html[data-tema="hud-terang"] :is(.tabs button,.tabs a){padding:12px 10px;font-size:10.5px;letter-spacing:.08em}
  html[data-tema="hud-terang"] .card h2{font-size:14px;letter-spacing:.12em}
  /* Satu baris saja: takik berlian tiket duduk sejajar garis putusnya. */
  html[data-tema="hud-terang"] .order-ticket-top span{font-size:9.5px;letter-spacing:.12em;white-space:nowrap}
  html[data-tema="hud-terang"] .order-ticket-top b{font-size:17px;letter-spacing:.1em}
}
@media (max-width:350px){
  /* Layar paling sempit: nama toko lebih penting daripada segel. */
}
@media (min-width:701px){
  html[data-tema="hud-terang"] body{background:#07080a}
  html[data-tema="hud-terang"] body::before{background:var(--h-kanvas);box-shadow:0 0 0 1px #1a1d22,0 24px 60px rgba(0,0,0,.6)}
  html[data-tema="hud-terang"] .bnav a{font-size:10px}
}

/* ══ LAYAR LEBAR: dua kolom, navigasi naik ke header ══════════════════════
   Etalase memakai satu tata letak untuk semua lebar (kolom 520px + bingkai,
   lihat blok FASE 3 di style.css). HUD keluar dari situ mulai 900px: kolom
   paling lebar 1120px, kiri (--h-kiri, 360-440px) mengapung untuk yang
   ditindak, sisanya untuk yang panjang dibaca, dan bilah nav bawah pindah ke
   header sebagai tautan. Semuanya CSS di berkas tema, jadi hanya domain
   bertema HUD (dan turunannya) yang berubah.

   Ambang 900px, bukan 1100px lagi (Taka 16 Okt 2026): HP dalam mode desktop
   (Chrome Android, Safari iPhone) merender selebar 980px, laptop yang
   diperbesar 125% (1366px jadi ±1093px) dan jendela setengah layar (960px)
   juga di bawah 1100px — semuanya dulu jatuh ke bingkai ponsel 520px. Supaya
   muat: kolom kiri lentur, tepi minimal --h-sisi (dulu isi menempel ke tepi
   layar di 1100-1180px karena .wrap tanpa padding samping), dan di bawah
   1180px kartu nominal dua kolom + Memanjang satu lajur (blok 1180px di
   bawah). Di bawah 900px logo + lima tautan kepala mulai berdesakan dan kolom
   User ID terpotong, jadi di sana tetap bingkai ponsel.

   Pembagian kolom mengikuti URUTAN DOM: float kiri yang muncul lebih dulu
   menahan kolom kanan (float tidak boleh lebih tinggi dari float sebelumnya),
   jadi yang di kiri selalu elemen paling awal di halamannya. */
@media (min-width:900px){
  /* --h-kiri lebar kolom kiri, --h-sela jarak antarkolom, --h-sisi tepi minimal kiri-kanan.
     --h-kiri bersatuan vw, bukan %: bilah Total yang menempel di kiri bawah (fixed, acuannya
     layar) memakainya juga, jadi lebarnya sama persis dengan kolom kiri di dalam .wrap.
     --h-tepi = jarak isi ke tepi layar; kepala dan nav memakainya supaya sejajar dengan isi. */
  html[data-tema="hud-terang"]{--nav-h:0px;--h-kolom:1120px;--h-kiri:clamp(360px,38vw,440px);--h-sela:24px;--h-sisi:28px;
    --h-tepi:max(var(--h-sisi),calc((100% - var(--h-kolom)) / 2))}
  /* Bingkai kolom ponsel dilepas; ::before-nya dipakai ulang jadi label tegak
     (baru tampil mulai 1280px, lihat blok sesudah blok ini). */
  html[data-tema="hud-terang"] body{background:var(--h-kanvas)}
  html[data-tema="hud-terang"] body::before{
    content:"TOKOMD // TOP UP HGI // MITRA RESMI";position:fixed;left:34px;top:132px;bottom:auto;width:auto;
    transform:rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;background:none;box-shadow:none;
    color:rgba(255,255,255,.2);font:500 12px/1 var(--h-disp);letter-spacing:.6em;text-transform:uppercase;pointer-events:none;
  }
  /* Header: merek + segel di kiri, navigasi di kanan. */
  html[data-tema="hud-terang"] .hdr{max-width:none;margin:0;height:72px;padding-inline:var(--h-tepi);justify-content:flex-start;gap:14px}
  html[data-tema="hud-terang"] .brand{flex:0 0 auto;justify-content:flex-start}
  html[data-tema="hud-terang"] #brand-name{font-size:19px}
  html[data-tema="hud-terang"] .brand img{height:40px}
  html[data-tema="hud-terang"] .brand img#brand-wordmark{height:26px;max-width:220px}
  /* Jarak 28px ke kepala: tanpa ini banner dan kartu nominal menempel ke
     bilah kepala, karena jarak atas elemen pembuka kolom sengaja dibuang
     supaya kedua kolom mulai sejajar. Padding samping --h-sisi: di layar yang
     lebih sempit dari kolom, isi tetap berjarak dari tepi dan sejajar kepala. */
  html[data-tema="hud-terang"] .wrap{max-width:calc(var(--h-kolom) + 2 * var(--h-sisi));padding:28px var(--h-sisi) 64px}
  html[data-tema="hud-terang"] .tabs{top:76px}

  /* Bilah nav bawah naik ke header: baris tautan, slot tengah jadi tombol putih. */
  html[data-tema="hud-terang"] .bnav{position:fixed;top:0;right:var(--h-tepi);bottom:auto;left:auto;z-index:17;width:auto;height:72px;padding:0;background:transparent;border-top:0;box-shadow:none;transform:none}
  html[data-tema="hud-terang"] .bnav ul{display:flex;align-items:center;gap:2px;height:72px;max-width:none;margin:0}
  html[data-tema="hud-terang"] .bnav a{flex-direction:row;gap:8px;height:42px;padding:0 14px;font-size:11px;letter-spacing:.14em}
  html[data-tema="hud-terang"] .bnav svg{width:17px;height:17px}
  html[data-tema="hud-terang"] .bnav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--brand)}
  html[data-tema="hud-terang"] .bnav a[aria-current="page"]::after{display:none}
  html[data-tema="hud-terang"] .bnav a:hover{background:rgba(255,255,255,.06)}
  /* Slot tengah (Masuk/Saldo/Akun) pindah ke ujung kanan, jadi tombol putih. */
  html[data-tema="hud-terang"] .bnav li.center{order:9}
  html[data-tema="hud-terang"] .bnav li.center a{margin-left:12px;padding:0 18px;justify-content:center;background:var(--brand);color:var(--brand-on,#fff)}
  html[data-tema="hud-terang"] .bnav li.center a:hover{background:color-mix(in srgb,var(--brand) 86%,var(--h-putih))}
  html[data-tema="hud-terang"] .bnav li.center a[aria-current="page"]{box-shadow:none}
  /* Slot tengah jadi tombol di header: heksagon ponsel dilepas. */
  html[data-tema="hud-terang"] .bnav .bnav-fab{position:static;width:auto;height:auto;top:auto;margin:0;border:0;background:transparent;box-shadow:none;transform:none}
  html[data-tema="hud-terang"] .bnav .bnav-fab svg{width:17px;height:17px;stroke:var(--brand-on,#fff);stroke-width:2;transform:none}
  html[data-tema="hud-terang"] .bnav li.center a:active .bnav-fab{transform:none}
  /* Lencana duduk di SUDUT tautan, bukan di atas tulisannya: di header
     tautannya berbaris (ikon + label), jadi posisi tengah ala ponsel menimpa
     teks. */
  html[data-tema="hud-terang"] .bnav li :is(.bnav-dot,.bnav-dot.pts){top:-7px;right:-8px;left:auto}

  /* Bilah Total (status pesanan + tombol bayar) tidak melayang lagi di lebar ini
     (keputusan Taka 8 Okt 2026): ia ikut aliran halaman di kolom kanan, tepat di bawah
     kartu Pembayaran, jadi baru terlihat sesudah digulir ke bawah dan tidak menutup
     kartu kolom kiri. Muncul sesudah nominal dipilih seperti di ponsel (atribut hidden
     dari updateSummary); tidak menyingkir saat digulir karena tidak menempel ke layar. */
  html[data-tema="hud-terang"] .summary{position:static;left:auto;right:auto;bottom:auto;width:auto;max-width:none;margin:0 0 16px calc(var(--h-kiri) + var(--h-sela));grid-template-columns:minmax(0,1fr) auto;gap:0 12px;padding:9px 9px 9px 15px;border-bottom:1px solid var(--h-line-2);box-shadow:none;transform:none}
  html[data-tema="hud-terang"] .summary::after{content:none}
  html[data-tema="hud-terang"] #buy-btn{grid-column:2;max-width:230px;min-height:46px;padding-block:10px}
  html[data-tema="hud-terang"] .bantuan-tg{right:var(--h-tepi);bottom:28px}
  /* Bilah Total tidak lagi di bawah layar, jadi CS tidak ikut turun saat bilah
     tersembunyi/menyingkir (aturan body.total-sembunyi di style.css). */
  html[data-tema="hud-terang"] body[data-page="topup"].total-sembunyi .bantuan-tg{bottom:28px}
  html[data-tema="hud-terang"] .summary.menyingkir{transform:none}

  /* ── Dua kolom ──────────────────────────────────────────────────────── */
  /* :not([hidden]) WAJIB: display di sini mengalahkan [hidden] bawaan, dan
     tanpa itu halaman yang sedang tertutup ikut tampil (Akun menampilkan
     Top Up). */
  html[data-tema="hud-terang"] :is(#view-topup,#view-pesanan,#view-bantuan,#view-info,.account-body,.account-panel):not([hidden]){display:flow-root}
  /* Kolom kiri: elemen paling awal di tiap halaman. Judul halaman TIDAK ikut —
     ia melebar di atas kedua kolom (lihat daftar "selebar halaman"), supaya
     kartu pertama kiri dan kanan mulai di ketinggian yang sama. Waktu judul
     masih ikut kolom kiri, kartu kanan naik sampai ~110px di atas kartu kiri
     dan halaman terbaca miring. */
  /* Pesanan tidak punya kolom kiri (Taka 8 Okt 2026): tamu dan pembeli yang masuk sama-sama
     memakai lebar penuh, kotak cek nomor di atas tabel transaksi terbaru. Masukan ID Top Up
     ada di kolom kanan, di atas Pilih Nominal (lihat daftar kolom kanan). */
  html[data-tema="hud-terang"] :is(
    #view-topup>section.hero:not(.hero-mati),#view-topup>#event-banner,
    #view-bantuan>.bantuan-cs,#view-bantuan>.card:not(.faq-card),
    #view-info>#info-leaderboard,#view-info>#info-promo,
    #acct-panel-overview>.player-pass,#acct-panel-wallet>.player-pass,
    #view-topup>.topup-artikel
  ){float:left;clear:left;width:var(--h-kiri)}
  /* Kartu artikel terbaru hanya hidup di sini (lihat blok "Artikel terbaru"). */
  html[data-tema="hud-terang"] #view-topup>.topup-artikel{display:block}
  /* Kolom kanan: sisanya, digeser selebar kolom kiri + jaraknya. */
  html[data-tema="hud-terang"] :is(
    #view-topup>.user-id-card-flow,#view-topup>.product-card,#view-topup>.card[aria-labelledby="checkout-email-title"],#view-topup>#pay-methods-card,#view-topup>#msg,
    #view-pesanan>#pay,
    #view-bantuan>.faq-card,#view-bantuan>.account-menu,
    #view-info>#info-blog,#view-info>#info-poin,#view-info>.card:not(#info-leaderboard):not(#info-promo),#view-info>.account-menu,
    #acct-panel-overview>:not(.player-pass),#acct-panel-wallet>:not(.player-pass)
  ){margin-left:calc(var(--h-kiri) + var(--h-sela));width:auto}
  /* Selebar halaman: judul di atas kedua kolom, sisanya di bawah keduanya. */
  html[data-tema="hud-terang"] :is(.seo-artikel,.seo-jelajah,footer.foot,.ident-foot,.page-head,.account-loading,.account-error){clear:both;margin-left:0;width:auto;float:none}
  /* Kedua kolom mulai di garis yang sama: jarak atas elemen pembuka dibuang,
     jaraknya sudah dipegang judul di atasnya. */
  html[data-tema="hud-terang"] :is(#view-topup>#event-banner,#view-topup>section.hero,#acct-panel-overview>.checkin-card){margin-top:0}
  /* Halaman baca: satu kolom di tengah. */
  html[data-tema="hud-terang"] :is(#view-nota,#view-masuk){max-width:760px;margin-inline:auto}
  html[data-tema="hud-terang"] .page-head h1{font-size:34px}
  html[data-tema="hud-terang"] .page-head p{max-width:52ch}

  /* Kartu nominal: dua kolom (tiga mulai 1180px, panel kanan baru ±640px), ikon di
     samping nama. Di 900-1179px panel kanan ±445-640px: tiga kolom = kartu ±140-195px,
     dan di 1100px (kartu 184px) harga enam digit pun patah baris; dua kolom memuat semua. */
  html[data-tema="hud-terang"] .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html[data-tema="hud-terang"] .prod{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:12px;row-gap:6px;min-height:90px;padding:12px 14px}
  html[data-tema="hud-terang"] .prod .ic{grid-row:1/3;grid-column:1;width:44px;height:44px;margin:0}
  html[data-tema="hud-terang"] .prod.prod-image-native .ic img{width:44px;height:44px}
  html[data-tema="hud-terang"] .prod .n{grid-row:1;grid-column:2}
  html[data-tema="hud-terang"] .prod-price{grid-row:2;grid-column:2;margin:0;padding:0;gap:5px}
  html[data-tema="hud-terang"] .prod .p{grid-row:2;grid-column:2;margin:0;padding:0}
  html[data-tema="hud-terang"] .flash-products{grid-auto-columns:minmax(230px,1fr)}

  /* Halaman luar (blog, artikel, kebijakan) ikut kolom dan header yang sama. */
  html[data-tema="hud-terang"] .b-top{max-width:none;margin:0}
  html[data-tema="hud-terang"] .b-top-in{max-width:none;height:71px;padding-inline:var(--h-tepi);gap:14px}
  /* Ukuran merek sama dengan kepala beranda desktop (logo 40px, logo nama 26px). */
  html[data-tema="hud-terang"] .b-brand img:not(.b-wordmark){height:40px;width:40px}
  html[data-tema="hud-terang"] .b-brand img.b-wordmark{height:26px;width:auto;max-width:220px}
  html[data-tema="hud-terang"] .b-top .b-brand span{font-size:19px}
  /* Merek berhenti melar supaya segel duduk di sebelahnya, bukan di bawah nav. */
  html[data-tema="hud-terang"] .b-brand{flex:0 0 auto}
  html[data-tema="hud-terang"] .b-page{max-width:760px;padding-bottom:4rem}
  html[data-tema="hud-terang"] .k-halaman{max-width:760px}

  /* ── Kolom kiri SELAMA domain belum punya artikel ──────────────────── */
  /* Server mengisi #topup-artikel hanya bila Blog domain menyala DAN ada artikel terbit
     (TEMA_ARTIKEL_KIRI di server.js). Selama slot itu kosong, kolom kiri tidak dibiarkan
     kosong: kartu Masukan ID pindah ke kiri dan lengket saat daftar nominal digulir,
     bilah Total + tombol bayar menempel di kiri bawah layar (opsi B, keputusan Taka
     9 Okt 2026 untuk TopBos, 12 Okt 2026 untuk seluruh keluarga HUD). Begitu artikel
     terbit, susunannya kembali seperti di atas (ID kanan atas, Total di bawah kartu
     Pembayaran). Isi di bawah kedua kolom tetap selebar penuh; kartu ID BERHENTI di
     batasnya: sticky CSS tidak bisa berhenti di tengah #view-topup, jadi app.js
     (pasangBatasKolomKiri) menghitung --kolom-kiri-atas. --kolom-kiri:1 = penanda mode
     untuk app.js. (Grid tidak dipakai: Chrome membatasi sticky di grid ke seluruh kontainer.) */
  html[data-tema="hud-terang"] #view-topup:not(:has(>#topup-artikel:not([hidden]))){--kolom-kiri:1}
  /* #view-topup diulang: daftar kolom kanan di atas (margin-left kolom kiri + sela) memuat
     #view-info>.card:not(#info-leaderboard):not(#info-promo), jadi kekhususan :is()-nya (3,2,1). */
  html[data-tema="hud-terang"] #view-topup#view-topup:not(:has(>#topup-artikel:not([hidden])))>.user-id-card-flow{float:left;clear:left;width:var(--h-kiri);margin:0 0 14px;position:sticky;top:var(--kolom-kiri-atas,100px)}
}
/* Desktop sempit (900-1099px): tulisan tombol "Pasang Aplikasi" di kepala (±160px) menabrak
   tautan Top Up — di 900px tertimpa ±85px. Tinggal ikon panah-ke-bawah, persegi setinggi
   tombolnya, sama dengan perlakuan layar sangat sempit di pwa/install.js; namanya tetap
   terbaca pembaca layar lewat aria-label tombol. */
@media (min-width:900px) and (max-width:1099px){
  html[data-tema="hud-terang"] .hdr .pwa-pasang-hdr{justify-content:center;width:auto;aspect-ratio:1;padding:0}
  html[data-tema="hud-terang"] .hdr .pwa-pasang-hdr span{display:none}
}
/* Panel kanan baru selebar ±640px mulai 1180px: kartu nominal tiga kolom. */
@media (min-width:1180px){
  html[data-tema="hud-terang"] .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Label tegak (body::before di blok 900px) duduk di left:34px; baru ada ruang di sisi
   kiri isi mulai ±1265px (tepi = (lebar - 1120px) / 2). Di bawahnya ia menyelip di
   belakang kartu dan hanya mengintip di celah, jadi disembunyikan. Lapisan turunan
   hanya mengganti content/warnanya, jadi display:none ini berlaku untuk semuanya. */
@media (min-width:900px) and (max-width:1279px){
  html[data-tema="hud-terang"] body::before{display:none}
}
/* Bilah Total di kiri bawah hanya bila jendela cukup tinggi: hero (±200px) + Masukan ID
   (±250px) + bilah (±130px) mulai 108px dari atas. Di jendela lebih pendek (laptop 1366x768
   ±650px) bilah itu menutupi kartu ID sebelum halaman digulir, jadi di sana bilah Total
   tetap di bawah kartu Pembayaran seperti susunan berartikel. Selama ia menempel,
   body.ruang-total-kiri (app.js) memberi ruang di dasar halaman supaya kaki halaman
   terbaca saat digulir mentok. Bayangan dapat ditimpa lapisan turunan. */
@media (min-width:900px) and (min-height:700px){
  html[data-tema="hud-terang"] #view-topup:not(:has(>#topup-artikel:not([hidden])))>#summary{position:fixed;left:var(--h-tepi);right:auto;bottom:28px;z-index:15;
    width:var(--h-kiri);margin:0;grid-template-columns:minmax(0,1fr) auto;transform:none;
    box-shadow:0 22px 48px -14px rgba(0,0,0,.82)}
  html[data-tema="hud-terang"] #view-topup:not(:has(>#topup-artikel:not([hidden])))>#summary[hidden]{display:none}
  html[data-tema="hud-terang"] body.ruang-total-kiri .wrap{padding-bottom:170px}
}

/* == HALAMAN LUAR: bilah merek blog & kebijakan ===================== */
html[data-tema="hud-terang"] .b-top{color:var(--txt);background:rgba(14,16,19,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--h-line);box-shadow:none}
html[data-tema="hud-terang"] .b-brand{justify-content:flex-start;gap:10px;color:var(--txt)}
html[data-tema="hud-terang"] .b-brand span{font:600 16px/1 var(--h-disp);letter-spacing:.14em;text-transform:uppercase}
/* Logo persegi di kiri, sama dengan bilah merek etalase. */
html[data-tema="hud-terang"] .b-brand img:not(.b-wordmark){order:0;margin-left:0;border-radius:0;box-shadow:none}
html[data-tema="hud-terang"] .b-brand img.b-wordmark{margin-right:0;filter:brightness(0) saturate(100%) invert(40%) sepia(98%) saturate(2274%) hue-rotate(212deg) brightness(106%) contrast(114%)}
html[data-tema="hud-terang"] .b-back{border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih)}
html[data-tema="hud-terang"] .b-back:hover{background:rgba(255,255,255,.08)}
html[data-tema="hud-terang"] :is(.b-card,.b-pager a){border-radius:0}
html[data-tema="hud-terang"] .b-body{border-radius:0;background:var(--h-siku),var(--h-g2)}
html[data-tema="hud-terang"] .b-eyebrow{border-radius:0;background:transparent;box-shadow:inset 0 0 0 1px var(--h-line-2);color:var(--h-putih);font-family:var(--h-disp);letter-spacing:.16em;text-transform:uppercase}
/* Isi artikel: aksen warna merek cangkang (garis judul, kutipan, butir)
   diganti penanda putih — merek hanya untuk tombol yang menagih. */
html[data-tema="hud-terang"] .b-body h2{padding-left:0;border-left:0;letter-spacing:.02em}
html[data-tema="hud-terang"] .b-body h2::before{content:"";display:inline-block;width:7px;height:7px;margin:0 12px 3px 1px;background:var(--h-putih);transform:rotate(45deg)}
html[data-tema="hud-terang"] .b-body li::marker{color:var(--h-putih)}
html[data-tema="hud-terang"] .b-body blockquote{border-left:2px solid var(--h-putih);border-radius:0;background:rgba(255,255,255,.04)}
html[data-tema="hud-terang"] .b-more{font-family:var(--h-disp);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
html[data-tema="hud-terang"] .b-pager a{border-radius:0}
html[data-tema="hud-terang"] .b-pager a:hover{border-color:var(--h-putih);background:rgba(255,255,255,.06)}
/* Halaman kebijakan menyalin gaya kartu etalase di bawah .k-halaman, yang
   lebih khusus daripada aturan panel di atas: dipetakan ulang di sini. */
html[data-tema="hud-terang"] .k-halaman .card{border:1px solid var(--h-line);border-radius:0;background:var(--h-siku),var(--h-panel);box-shadow:none}
html[data-tema="hud-terang"] .k-halaman .card h2{color:var(--h-putih);font:600 14px/1.2 var(--h-disp);letter-spacing:.14em;text-transform:uppercase}
html[data-tema="hud-terang"] .k-halaman .card li::marker{color:var(--h-putih)}
html[data-tema="hud-terang"] .k-halaman .card b{color:var(--h-putih)}
html[data-tema="hud-terang"] .k-halaman .card a{color:var(--h-putih);text-decoration:underline;text-underline-offset:3px}
html[data-tema="hud-terang"] .k-halaman .account-menu{border:1px solid var(--h-line);border-radius:0;background:var(--h-panel)}
html[data-tema="hud-terang"] .k-kaki{border-top-color:var(--h-line)}
html[data-tema="hud-terang"] .k-kaki small{color:var(--t-subtle);font-family:var(--h-disp);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
html[data-tema="hud-terang"] .ident-kebijakan a[aria-current="page"]{color:var(--h-putih);text-decoration-color:var(--h-putih)}
/* == /HALAMAN LUAR ================================================== */

/* == POP-UP CEK ID ================================================== */
/* Konsep HUD awal (5 Okt 2026), dikembalikan Taka 9 Okt 2026 untuk SEMUA keluarga HUD
   (HUD dan semua turunannya): cangkang .paycard HUD bersiku bergaris rambut,
   tanpa gambar kepala — medali ikon domain + sayap daun emas (8 Okt) dibuang. Kepala
   kartu = NAMA TOKO: logo nama domain (gambar seperti tokomd; digambar sebagai mask
   berwarna --idk-merek lewat --logo-nama, sama dengan kepala toko) atau tulisan nama
   toko, lalu judul "Pastikan akun tujuan" kapital renggang. Ikon & pil bergaris, tombol
   setuju putih (merek hanya untuk tombol uang). Warna lewat --idk-* supaya lapisan
   turunan cukup mengganti token (style.css: .idcek-toko display:none di tema lain). */
html[data-tema="hud-terang"] .paycard.idcek-kartu{
  --idk-merek:var(--brand);--idk-nama:var(--h-putih);--idk-judul:var(--t-muted);
  --idk-panel:transparent;--idk-pil:var(--h-field);--idk-pil-garis:var(--h-line);
  --idk-teks:var(--h-putih);--idk-label:var(--t-muted);--idk-ikon:transparent;--idk-ikon-tx:var(--h-putih);--idk-ikon-garis:var(--h-line-2);
  --idk-catatan:var(--h-amber);
  max-width:348px;margin-top:14px;padding:20px 18px 18px;color:var(--idk-catatan)}
html[data-tema="hud-terang"] .idcek-toko{display:flex;align-items:center;justify-content:center;min-height:30px;margin:0 34px 6px}
html[data-tema="hud-terang"] .idcek-toko-nama{color:var(--idk-nama);font:600 18px/1.2 var(--h-disp);letter-spacing:.12em;text-transform:uppercase;text-align:center;overflow-wrap:anywhere}
html[data-tema="hud-terang"] .idcek-toko-nama[hidden]{display:none}
html[data-tema="hud-terang"] .idcek-wordmark{display:block;width:auto;height:28px;max-width:210px;margin:0;border-radius:0;object-fit:contain}
html[data-tema="hud-terang"] .idcek-wordmark[hidden]{display:none}
html[data-tema="hud-terang"] .idcek-wordmark[style*="--logo-nama"]{object-position:-99999px 0;background:var(--idk-merek);
  -webkit-mask:var(--logo-nama) center/contain no-repeat;mask:var(--logo-nama) center/contain no-repeat}
html[data-tema="hud-terang"] .paycard .idcek-judul{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip:auto;white-space:normal;text-align:center}
html[data-tema="hud-terang"] .paycard .idcek-judul{color:var(--idk-judul);font:500 11px/1.3 var(--h-disp);letter-spacing:.2em;text-transform:uppercase;text-shadow:none}
html[data-tema="hud-terang"] .idcek-hias{display:none}
html[data-tema="hud-terang"] .idcek-tutup{top:10px;right:10px;width:32px;height:32px;border:0;border-radius:0;background:transparent;color:var(--h-putih);box-shadow:inset 0 0 0 1px var(--h-line-2)}
html[data-tema="hud-terang"] .idcek-panel{gap:12px;padding:0;border-radius:0;background:var(--idk-panel);box-shadow:none}
html[data-tema="hud-terang"] .idcek-baris{grid-template-columns:44px minmax(0,1fr);column-gap:12px}
html[data-tema="hud-terang"] .idcek-ikon{width:44px;height:44px;margin:0;border-radius:0;background:var(--idk-ikon);color:var(--idk-ikon-tx);box-shadow:inset 0 0 0 1px var(--idk-ikon-garis)}
html[data-tema="hud-terang"] .idcek-ikon svg{width:20px;height:20px}
html[data-tema="hud-terang"] .idcek-ikon-nama{color:var(--h-amber)}
html[data-tema="hud-terang"] .idcek-label{margin:0 0 4px 1px;font:600 10.5px/1.2 var(--h-disp);letter-spacing:.16em;text-transform:uppercase;color:var(--idk-label)}
html[data-tema="hud-terang"] .idcek-nilai{min-height:40px;padding:7px 12px;border:1px solid var(--idk-pil-garis);border-radius:0;background:var(--idk-pil);font:500 19px/24px var(--h-disp);letter-spacing:.06em;color:var(--idk-teks)}
html[data-tema="hud-terang"] .idcek-nilai.panjang{font-size:16px;line-height:22px}
html[data-tema="hud-terang"] .idcek-nilai.sangat-panjang{font-size:14px;line-height:19px;letter-spacing:0}
html[data-tema="hud-terang"] .idcek-catatan{margin:14px 4px 0;color:var(--idk-catatan)}
html[data-tema="hud-terang"] .idcek-aksi{margin:14px 0 0}
html[data-tema="hud-terang"] .idcek-aksi button{min-height:46px;border-radius:0;font:600 13px/1 var(--h-disp);letter-spacing:.16em;text-transform:uppercase}
html[data-tema="hud-terang"] .idcek-ubah{background:transparent;color:var(--h-putih);box-shadow:inset 0 0 0 1px var(--h-line-2)}
html[data-tema="hud-terang"] .idcek-benar{background:var(--h-putih);color:var(--h-g1);box-shadow:none}
/* == /POP-UP CEK ID ================================================= */

/* == SUSUNAN KARTU: MEMANJANG ======================================== */
/* Pilihan domain "memanjang" (kerangka di style.css): harga besar di kanan.
   Berlian terpilih pindah ke sudut ikon karena pojok kanan atas kini milik
   harga. Desktop lebar (>=1180px) punya panel ±640px: daftarnya dua lajur,
   bukan baris sepanjang panel. Desktop sempit (900-1179px) panelnya ±445-640px:
   dua lajur di sana memeras nama sampai patah per huruf, jadi tetap satu lajur
   (aturan style.css). Turunan HUD mewarisi blok ini (npm run tema:bangun). */
html[data-tema="hud-terang"][data-kartu="memanjang"] #products .prod{--k-harga:18px}
html[data-tema="hud-terang"][data-kartu="memanjang"] #products .prod .n{font-size:12.5px}
html[data-tema="hud-terang"][data-kartu="memanjang"] #products .prod.active::before{top:calc(50% + 9px);right:auto;left:41px}
html[data-tema="hud-terang"][data-kartu="memanjang"] #products .prod.active::after{top:calc(50% + 14px);right:auto;left:49px}
@media (min-width:1180px){
  html[data-tema="hud-terang"][data-kartu="memanjang"] #products.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (max-width:360px){
  html[data-tema="hud-terang"][data-kartu="memanjang"] #products .prod{--k-harga:15px}
  html[data-tema="hud-terang"][data-kartu="memanjang"] #products .prod .n{font-size:11.5px}
  html[data-tema="hud-terang"][data-kartu="memanjang"] #products .prod.active::before{top:calc(50% + 7px);left:35px}
  html[data-tema="hud-terang"][data-kartu="memanjang"] #products .prod.active::after{top:calc(50% + 12px);left:43px}
}
/* == /SUSUNAN KARTU ================================================== */

/* == TRANSAKSI TERBARU & NOTIFIKASI PEMBELIAN ======================== */
/* Notifikasi pembelian memakai bentuk notifikasi HUD yang sama dengan ajakan
   pasang aplikasi (siku, sudut 4px, panel gelap 95%); keduanya tidak pernah
   tampil bersamaan. Daftar transaksi memakai .card HUD apa adanya. HUD Terang
   mewarisi blok ini (npm run tema:bangun) dan menerangkannya di lapisannya. */
html[data-tema="hud-terang"] .notif-beli{border:1px solid var(--h-line-2);border-radius:4px;background:var(--h-siku),rgba(17,21,29,.95);color:var(--txt);box-shadow:0 22px 48px -14px rgba(0,0,0,.82)}
html[data-tema="hud-terang"] .notif-beli-ikon{border-radius:4px;box-shadow:0 0 0 1px var(--h-line-2)}
html[data-tema="hud-terang"] .notif-beli-teks b{color:var(--h-putih)}
html[data-tema="hud-terang"] .notif-beli-tutup{border-radius:4px}
html[data-tema="hud-terang"] .notif-beli-tutup:hover{background:rgba(255,255,255,.08);color:var(--h-putih)}
html[data-tema="hud-terang"] :is(.tx-kepala h2,.tx-judul-kolom){font-family:var(--h-disp);letter-spacing:.1em;text-transform:uppercase}
/* Desktop: halaman Pesanan tanpa kolom kiri, jadi daftar ini selalu lebar penuh (tabel
   lima kolom lewat container query style.css) untuk tamu maupun pembeli yang masuk. */
/* == /TRANSAKSI TERBARU & NOTIFIKASI PEMBELIAN ======================= */

/* == ULASAN TOKO ===================================================== */
/* Kosakata HUD: panel bersiku tipis, label kapital Tomorrow berjarak lebar,
   sudut 4px, penanda berlian. Bintang tetap emas; biru merek memimpin tombol
   kirim seperti aksi lain. Warna permukaan lewat --h-* supaya HUD Terang
   (turunan berkas ini) cukup menukar beberapa nada di lapisannya. */
html[data-tema="hud-terang"]{--ul-emas:#f2b23a;--ul-kosong:rgba(214,226,255,.18)}
html[data-tema="hud-terang"] :is(.ul-ajak,.ul-lembar,.ul-lacak,.ul-item,.ul-produk-baris,.ul-catatan-cs,.ul-isian textarea,.ul-catatan-cs a,
  .ul-kirim,.ul-tanda,.ul-ajak-ikon,.ul-chips button,.ul-saring button,.ul-tag-ringkas span,.ul-item-tag span,.ul-status,.ul-kabar,.ul-galat,
  .ul-kosong-daftar,.ul-avatar,.ul-produk-baris img,.ul-produk-ikon,.ul-tutup,.ul-pilih button){border-radius:4px}
/* Label kapital Tomorrow, sama dengan label HUD lain. */
html[data-tema="hud-terang"] :is(.ul-ajak-kicker,.ul-lembar-kepala span,.ul-label-nilai,.ul-lacak span,
  .ul-produk,.ul-isian>span,.ul-kirim,.ul-status,.ul-ajak.terkirim b,.ul-ajak.terkirim a,.ul-catatan-cs a){font-family:var(--h-disp);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
html[data-tema="hud-terang"] :is(.ul-skor-angka b,.ul-sebaran em,.ul-sebaran li span,.ul-avatar){font-family:var(--h-disp);font-weight:600;letter-spacing:0}
/* Seksi beranda: kartu HUD biasa; penanda bintang menggantikan nomor langkah. */
html[data-tema="hud-terang"] .ul-tanda{width:auto;height:auto;padding:4px 6px;border:1px solid var(--h-line-2);background:transparent}
html[data-tema="hud-terang"] .ul-tanda svg{width:11px;height:11px}
html[data-tema="hud-terang"] .ul-skor-angka b{font-size:46px;color:var(--h-putih)}
html[data-tema="hud-terang"] .ul-sebaran i{height:4px;border-radius:0;background:var(--h-line)}
html[data-tema="hud-terang"] .ul-sebaran i::before{border-radius:0}
html[data-tema="hud-terang"] .ul-puas{padding:9px 10px;border:1px solid color-mix(in srgb,var(--h-mint) 30%,transparent);background:color-mix(in srgb,var(--h-mint) 7%,transparent);font-size:12.5px}
html[data-tema="hud-terang"] .ul-puas b{color:var(--h-mint)}
html[data-tema="hud-terang"] .ul-puas::before{content:"";width:6px;height:6px;flex:0 0 6px;background:var(--h-mint);transform:rotate(45deg)}
html[data-tema="hud-terang"] .ul-tag-ringkas span{border:1px solid var(--h-line);background:var(--h-field);font-size:12px;color:var(--txt)}
html[data-tema="hud-terang"] .ul-item{border-color:var(--h-line);background:var(--h-panel);box-shadow:none}
html[data-tema="hud-terang"] .ul-geser .ul-item{background:var(--h-field)}
html[data-tema="hud-terang"] .ul-avatar{background:var(--h-biru-tipis);color:var(--h-biru-teks)}
html[data-tema="hud-terang"] .ul-nama small{color:var(--h-mint)}
html[data-tema="hud-terang"] .ul-produk{font-size:10px;color:var(--muted)}
html[data-tema="hud-terang"] .ul-item-tag span{border:1px solid var(--h-line);background:transparent}
html[data-tema="hud-terang"] .ul-balasan{border-left:2px solid var(--brand);border-radius:0;background:var(--h-biru-tipis)}
html[data-tema="hud-terang"] .ul-balasan b{color:var(--h-biru-teks)}
/* Kartu bintang di panel bayar: panel cekung bertepi emas tipis. */
html[data-tema="hud-terang"] .ul-ajak{border-color:color-mix(in srgb,var(--ul-emas) 40%,transparent);background:color-mix(in srgb,var(--ul-emas) 6%,transparent)}
html[data-tema="hud-terang"] .ul-ajak-kicker{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;color:var(--ul-emas)}
html[data-tema="hud-terang"] .ul-ajak-kicker::before{content:"";width:6px;height:6px;background:var(--ul-emas);transform:rotate(45deg)}
html[data-tema="hud-terang"] .ul-ajak b.ul-ajak-judul{font-size:16.5px;font-weight:700;color:var(--h-putih)}
html[data-tema="hud-terang"] .ul-pilih svg{stroke:color-mix(in srgb,var(--h-putih) 34%,transparent)}
html[data-tema="hud-terang"] .ul-pilih button.on svg{stroke:var(--ul-emas)}
html[data-tema="hud-terang"] .ul-ajak.terkirim{border-color:color-mix(in srgb,var(--h-mint) 30%,transparent);background:color-mix(in srgb,var(--h-mint) 7%,transparent)}
html[data-tema="hud-terang"] .ul-ajak.terkirim.tinjau{border-color:color-mix(in srgb,var(--ul-emas) 40%,transparent);background:color-mix(in srgb,var(--ul-emas) 7%,transparent)}
html[data-tema="hud-terang"] .ul-ajak-ikon{background:color-mix(in srgb,var(--h-mint) 20%,transparent);color:var(--h-mint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--h-mint) 40%,transparent)}
html[data-tema="hud-terang"] .ul-ajak.tinjau .ul-ajak-ikon{background:color-mix(in srgb,var(--ul-emas) 20%,transparent);color:var(--ul-emas);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ul-emas) 45%,transparent)}
html[data-tema="hud-terang"] .ul-ajak.terkirim b{font-size:12px;color:var(--h-putih)}
html[data-tema="hud-terang"] .ul-ajak.terkirim p{color:var(--txt)}
html[data-tema="hud-terang"] .ul-ajak.terkirim a{font-size:11px;color:var(--h-biru-teks)}
/* Lembar: panel bersiku, garis merek di tepi atas, siku hanya di dua sudut atas. */
html[data-tema="hud-terang"] .ul-latar{background:var(--t-scrim)}
html[data-tema="hud-terang"] .ul-lembar{border-top:2px solid var(--brand);color:var(--txt);box-shadow:0 -10px 30px rgba(0,0,0,.5);
  background:linear-gradient(var(--brand),var(--brand)) left 0 top 0/1.5px 14px no-repeat,linear-gradient(var(--brand),var(--brand)) right 0 top 0/1.5px 14px no-repeat,var(--h-g2)}
html[data-tema="hud-terang"] .ul-pegangan{border-radius:0;background:var(--h-line-2)}
html[data-tema="hud-terang"] .ul-lembar-kepala span{font-size:10.5px;color:var(--muted)}
html[data-tema="hud-terang"] .ul-produk-baris{border:1px solid var(--h-line);background:var(--h-field)}
html[data-tema="hud-terang"] :is(.ul-produk-baris img,.ul-produk-ikon){background:var(--h-g3)}
html[data-tema="hud-terang"] .ul-produk-baris b{font-family:var(--h-disp);font-weight:600;font-size:13px;letter-spacing:.06em;color:var(--h-putih)}
html[data-tema="hud-terang"] .ul-label-nilai{font-size:11.5px;color:var(--ul-emas)}
html[data-tema="hud-terang"] .ul-label-nilai.rendah{color:var(--h-rose)}
html[data-tema="hud-terang"] .ul-chips button{border-color:var(--h-line);background:transparent;color:var(--txt)}
html[data-tema="hud-terang"] .ul-chips button.on{border-color:var(--brand);background:var(--h-biru-tipis);color:var(--h-biru-teks)}
html[data-tema="hud-terang"] .ul-isian>span{font-size:10px;color:var(--muted)}
html[data-tema="hud-terang"] .ul-isian textarea{border-color:var(--h-line);background:var(--h-field);color:var(--txt)}
html[data-tema="hud-terang"] .ul-isian textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--h-biru-tipis)}
html[data-tema="hud-terang"] .ul-catatan-cs{border-color:color-mix(in srgb,var(--ul-emas) 40%,transparent);background:color-mix(in srgb,var(--ul-emas) 7%,transparent);color:var(--txt)}
html[data-tema="hud-terang"] .ul-catatan-cs a{border-color:var(--h-line-2);background:transparent;color:var(--h-putih);font-size:11.5px}
html[data-tema="hud-terang"] .ul-kirim{min-height:50px;background:var(--brand);color:var(--brand-on,#fff);font-size:13px;letter-spacing:.2em}
html[data-tema="hud-terang"] .ul-kirim:disabled{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--h-line);opacity:1}
html[data-tema="hud-terang"] .ul-nanti{font-size:13px}
/* Lacak & nota: baris cekung seperti isi kartu lacak lainnya. */
html[data-tema="hud-terang"] .ul-lacak{border-color:var(--h-line);background:var(--h-field)}
html[data-tema="hud-terang"] .ul-lacak span{font-size:10px;color:var(--muted)}
html[data-tema="hud-terang"] .ul-status{font-size:9.5px;letter-spacing:.12em}
html[data-tema="hud-terang"] .ul-status.tayang{border:1px solid color-mix(in srgb,var(--h-mint) 30%,transparent);background:color-mix(in srgb,var(--h-mint) 8%,transparent);color:var(--h-mint)}
html[data-tema="hud-terang"] .ul-status.tinjau{border:1px solid color-mix(in srgb,var(--ul-emas) 40%,transparent);background:transparent;color:var(--ul-emas)}
html[data-tema="hud-terang"] .ul-status.sembunyi{border:1px solid var(--h-line);background:transparent;color:var(--muted)}
/* Halaman /ulasan. */
html[data-tema="hud-terang"] .ul-saring button{border-color:var(--h-line);background:var(--h-panel);color:var(--txt)}
html[data-tema="hud-terang"] .ul-saring button.on{border-color:var(--brand);background:var(--h-biru-tipis);color:var(--h-biru-teks)}
html[data-tema="hud-terang"] .ul-kabar{border-color:var(--h-line);background:var(--h-siku),var(--h-panel)}
html[data-tema="hud-terang"] .ul-kosong-daftar{border-color:var(--h-line);color:var(--muted)}
/* == /ULASAN TOKO ==================================================== */

/* == LAPISAN HUD TERANG ============================================
   SUMBER lapisan mode terang untuk tema hud-terang. Berkas tema yang
   sesungguhnya (web/site/tema/hud-terang.css) DIHASILKAN oleh
   scripts/bangun-tema-turunan.js: badan hud.css dengan awalan
   html[data-tema="hud-terang"], jembatan tokennya sendiri, lalu lapisan
   ini disisipkan tepat SEBELUM blok AKSEN MEREK. Sunting di sini (atau di
   hud.css), lalu jalankan skripnya; tes menjaga keduanya tetap sinkron.

   Tema HUD yang sama — siku sudut, label kapital Tomorrow, nomor langkah,
   penanda berlian, sudut 4px, tata letak desktop — hanya kanvasnya dibalik.
   Aturan warnanya ikut dibalik: "bidang terang" (--h-putih) yang di HUD
   gelap dipakai untuk teks di atas grafit di sini jadi TINTA GELAP di atas
   kertas, dan biru merek tetap memimpin semua aksi.
   Folder tema-sumber TIDAK disajikan express.static (hanya web/site). */
html[data-tema="hud-terang"]{
  --bg:#f3f6fc;--card:#ffffff;--txt:#16203a;--muted:#5f6a81;--line:#dfe4f0;
  --t-bg:#f3f6fc;--t-frame:#e7ecf7;--t-surface:#ffffff;--t-field:#ffffff;--t-fill:#eef2fa;--t-line:#dfe4f0;
  --t-text:#16203a;--t-muted:#5f6a81;--t-subtle:#8a93a8;
  --t-on-bg:#16203a;--t-on-bg-muted:#5f6a81;--t-on-bg-link:var(--brand);
  --t-accent:var(--brand);--t-accent-d:#2438c8;--t-accent-text:var(--brand);--t-on-accent:#fff;
  --t-accent-soft:#eaf0ff;--t-accent-line:#c8d6ff;
  --t-deep:#16203a;--t-deep-2:#243459;--t-on-deep:#fff;--t-on-deep-muted:rgba(255,255,255,.76);
  --t-ok-soft:#e6f7ee;--t-ok-text:#12784a;--t-err-soft:#fdecec;--t-err-text:#b42318;
  --t-warn-soft:#fff3d8;--t-warn-text:#8a5a00;--t-gold-soft:#fff3d8;--t-gold-text:#8a5a00;
  --h-g0:#e9eef8;--h-g1:#f3f6fc;--h-g2:#ffffff;--h-g3:#eef2fa;
  --h-panel:#ffffff;--h-field:#f7f9fe;
  --h-line:rgba(22,32,58,.13);--h-line-2:rgba(47,90,224,.34);
  --h-aksen:var(--brand);
  /* Dulu: bidang putih di atas grafit. Sekarang: tinta gelap di atas kertas. */
  --h-putih:#16203a;
  --h-biru:var(--brand);--h-biru-teks:#2f4bd0;--h-biru-terang:#16203a;
  --h-mint:#12784a;--h-amber:#8a5a00;--h-rose:#b42318;
  --h-kanvas:
    radial-gradient(90% 340px at 50% -60px,rgba(47,90,224,.12),rgba(255,255,255,0) 70%) no-repeat,
    repeating-linear-gradient(90deg,rgba(22,32,58,.05) 0 1px,transparent 1px 48px),
    #f3f6fc;
}
html[data-tema="hud-terang"] body{color:var(--txt);background:var(--h-kanvas)}
html[data-tema="hud-terang"] ::selection{background:rgba(47,90,224,.2);color:#16203a}
/* Kepala: kaca putih. Logo nama tetap biru merek (filter dari badan HUD). */
html[data-tema="hud-terang"] .hdr{color:var(--txt);background:rgba(255,255,255,.9);border-bottom:1px solid var(--h-line);
  box-shadow:none}
html[data-tema="hud-terang"] :is(.hdr-back,.pwa-pasang-hdr,.page-back,.account-menu a,.account-menu button,
  .btn-full.btn-outline,.nota-btn-sekunder,.user-id-row #user-id-guide-btn):hover{background:rgba(22,32,58,.06)}
/* Bidang cekung yang dulu hitam → kertas biru sangat muda. */
html[data-tema="hud-terang"] :is(.prod,.flash-products .prod,.checkout-benefits,.email-help,.order-ticket,.va,.track-buyer,
  .track-security,.refund-box,.track-ticket,.spender-list li,.profile-editor,.avatar-picker,.wallet-topup-input,
  .wallet-topup-record,.wallet-topup-instruction,.wallet-topup-active,.account-entry,.buyer,.msg,.track-error,
  .bulk-summary,.bulk-confirm-detail,input,textarea,select,.account-filter select){background:#f7f9fe;color:var(--txt)}
html[data-tema="hud-terang"] :is(.track-detail-grid>div,.account-meters>div){background:#ffffff}
html[data-tema="hud-terang"] .pay-invoice{background:var(--h-siku),#f7f9fe}
/* Bilah Total menempel ke nav: bayangan ke atas. Bayangan jatuh ke bawah hanya
   untuk panel melayang di layar lebar (lihat @media min-width:900px di bawah). */
html[data-tema="hud-terang"] .summary{background:var(--h-siku),rgba(255,255,255,.96);box-shadow:0 -8px 22px rgba(0,0,0,.12)}
html[data-tema="hud-terang"] .prod .ic{background:#eef2fa;box-shadow:none}
html[data-tema="hud-terang"] .prod .n{color:#4a5568}
html[data-tema="hud-terang"] input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px var(--h-biru-tipis)}
/* Bilah nav bawah dan tombol CS. */
html[data-tema="hud-terang"] .bantuan-tg{background:#fff;color:var(--brand);border-color:var(--h-line-2);
  box-shadow:0 16px 34px -18px rgba(22,32,58,.25)}
/* Kartu anggota ikut terang; siku biru yang jadi bingkainya. */
html[data-tema="hud-terang"] .player-pass{border-color:var(--h-line-2);color:var(--txt);background:var(--h-siku),
  linear-gradient(135deg,rgba(47,90,224,.10) 0 22%,rgba(255,255,255,0) 22%),
  repeating-linear-gradient(135deg,rgba(22,32,58,.03) 0 1px,transparent 1px 7px),#ffffff}
html[data-tema="hud-terang"] .player-pass::after{color:rgba(22,32,58,.32);border-left-color:var(--h-line)}
html[data-tema="hud-terang"] .player-avatar{border-color:var(--brand);background:#f2f6ff;color:var(--brand)}
html[data-tema="hud-terang"] :is(.avatar-orbit,.avatar-bolt,.avatar-crown,.avatar-nova,.avatar-jade,.avatar-pixel,.avatar-initials){background:#f2f6ff}
html[data-tema="hud-terang"] .tier-track{background:repeating-linear-gradient(90deg,rgba(22,32,58,.14) 0 10px,transparent 10px 13px)}
/* Yang DUDUK DI ATAS GAMBAR tetap putih: banner hero dan tombol slider. */
html[data-tema="hud-terang"] :is(.hero .badge,.hero-trust span,.event-nav,.hero h2,.hero p,.hero-trust b){color:#fff}
html[data-tema="hud-terang"] .hero-trust span{background:rgba(14,16,19,.86);border-color:rgba(255,255,255,.35)}
html[data-tema="hud-terang"] .hero .badge{background:rgba(14,16,19,.72);border-color:rgba(255,255,255,.35)}
html[data-tema="hud-terang"] .event-nav{background:rgba(14,16,19,.82);color:#fff}
/* Notifikasi pasang aplikasi ikut terang. */
html[data-tema="hud-terang"] .pwa-pasang{background:var(--h-siku),rgba(255,255,255,.96);color:var(--txt);
  box-shadow:0 24px 48px -22px rgba(22,32,58,.22)}
html[data-tema="hud-terang"] .pwa-pasang-ikon:has(img){background:#eef2fb}
html[data-tema="hud-terang"] .pwa-pasang-sub{color:var(--muted)}
html[data-tema="hud-terang"] :is(.pwa-pasang-nanti,.pwa-pasang-tutup):hover{background:rgba(22,32,58,.06);color:var(--txt)}
/* Notifikasi pembelian ikut terang, sama seperti ajakan pasang. */
html[data-tema="hud-terang"] .notif-beli{background:var(--h-siku),rgba(255,255,255,.96);color:var(--txt);
  box-shadow:0 24px 48px -22px rgba(22,32,58,.22)}
html[data-tema="hud-terang"] .notif-beli-teks b{color:var(--txt)}
html[data-tema="hud-terang"] .notif-beli-tutup:hover{background:rgba(22,32,58,.06);color:var(--txt)}
/* Panel gelap kecil yang tersisa. */
html[data-tema="hud-terang"] :is(.paycard,.tg-miniapp-install-card){background:var(--h-siku),#fff;color:var(--txt)}
html[data-tema="hud-terang"] .b-body{background:var(--h-siku),#fff}

/* Judul kartu dan nama: aturan asli memaku #eef2f8 lewat :is() ber-id (#sum-price),
   kekhususan (1,1,1) — jadi ditimpa dengan :is() ber-id yang sama, datang belakangan. */
html[data-tema="hud-terang"] :is(#sum-price,.card h2,.page-head h1,.player-identity strong,.track-status-head strong,.seo-artikel h2,.pay-page h3){color:#16203a}
/* Bilah tab yang menempel saat digulir (blok ponsel memaku rgba(19,22,26,.97)). */
html[data-tema="hud-terang"] .tabs{background:rgba(255,255,255,.97)}
/* Bilah nav bawah hanya di ponsel; di desktop ia menyatu ke kepala (transparan). */
@media (max-width:899px){
  html[data-tema="hud-terang"] .bnav{background:#fff;border-top:1px solid var(--h-line);box-shadow:0 -12px 30px -22px rgba(22,32,58,.18)}
  html[data-tema="hud-terang"] .bnav a{color:#7b869c}
}
@media (min-width:900px){
  html[data-tema="hud-terang"] .summary{box-shadow:0 24px 48px -22px rgba(22,32,58,.22)}
  html[data-tema="hud-terang"] .bnav{background:transparent;border-top:0;box-shadow:none}
  html[data-tema="hud-terang"] .bnav a{color:#5f6a81}
  html[data-tema="hud-terang"] .bnav a:hover{background:rgba(22,32,58,.06)}
}

/* Kartu metode bayar, saldo/poin, preset dan metode top up saldo: latar hitam
   28% di tema gelap menjadi abu pekat di atas putih, dan teksnya #d6dbe1
   nyaris tak terbaca — semuanya dibalik ke kertas biru muda + tinta gelap. */
html[data-tema="hud-terang"] :is(.paym,.benefit-card,.wallet-topup-methods button,.wallet-topup-presets button){background:#f7f9fe;color:var(--txt)}
html[data-tema="hud-terang"] :is(.paym-p,.benefit-card strong,.wallet-topup-presets button,.wallet-topup-methods button>strong,.wallet-topup-va strong){color:#16203a}
html[data-tema="hud-terang"] .benefit-card.locked{background:#f3f5fb;color:var(--muted)}
html[data-tema="hud-terang"] .benefit-card.locked strong{color:var(--muted)}
html[data-tema="hud-terang"] .paym.is-unavailable{background:#fbfcff}
html[data-tema="hud-terang"] .paym-internal{border-color:#12784a;background:#e9f7ef}
html[data-tema="hud-terang"] .paym-internal .paym-ic{border-color:#12784a;color:#12784a}
html[data-tema="hud-terang"] :is(.wallet-topup-quote>p,.wallet-topup-error){background:#f7f9fe}
html[data-tema="hud-terang"] .wallet-topup-breakdown{border-color:#9fd9bc;background:#e9f7ef;color:#12784a}
html[data-tema="hud-terang"] .wallet-topup-active{border-color:#e2c48a;background:#fff8ea}
html[data-tema="hud-terang"] .wallet-pass-btn b{background:rgba(22,32,58,.08)}
html[data-tema="hud-terang"] .wallet-topup-input:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--h-biru-tipis)}
html[data-tema="hud-terang"] .wallet-topup-steps .active span{color:#fff}

/* Kaki identitas: logo nama tetap biru merek (filter dari badan HUD). */
html[data-tema="hud-terang"] .ident-mark{background:#fff}
html[data-tema="hud-terang"] .ident-foot{border-top-color:var(--h-line)}
/* Segel "Mitra Resmi" di kaki: HUD gelap memaku teksnya #d6dbe1 (abu terang) untuk
   grafit; di kertas jadi tinta gelap dengan garis biru. */
html[data-tema="hud-terang"] .ident-segel>span{color:#16203a;border-color:var(--h-line-2)}
html[data-tema="hud-terang"] .ident-segel svg{color:var(--brand)}

/* Cangkang halaman luar (blog, kebijakan): bilah mereknya di HUD gelap kaca
   grafit; di tema terang jadi kaca putih, logo nama tetap biru merek. */
html[data-tema="hud-terang"] .b-top{color:var(--txt);background:rgba(255,255,255,.92);border-bottom:1px solid var(--h-line)}
html[data-tema="hud-terang"] .b-back{color:var(--txt);border-color:var(--h-line-2)}
html[data-tema="hud-terang"] :is(.b-back,.b-pager a):hover{background:rgba(22,32,58,.06)}
html[data-tema="hud-terang"] .b-body blockquote{background:rgba(22,32,58,.04)}
/* Nama produk di bawah total tagihan: di grafit putih, di kertas abu sedang. */
html[data-tema="hud-terang"] .pay-invoice-product{color:var(--muted)}
/* Penunjuk slide banner: garis putih 25% lenyap di kertas, jadi garis abu-biru;
   slide aktif biru merek supaya posisinya terbaca sekilas. */
html[data-tema="hud-terang"] .event-dots button{background:linear-gradient(rgba(22,32,58,.22),rgba(22,32,58,.22)) center/100% 2px no-repeat}
html[data-tema="hud-terang"] .event-dots button.is-on{background:linear-gradient(var(--brand),var(--brand)) center/100% 2px no-repeat}
html[data-tema="hud-terang"] .event-dots button:focus-visible{outline-color:var(--brand)}
/* Panduan toko & blok halaman nominal: badan HUD memaku #c9ced5 (abu terang
   untuk grafit) pada paragraf panduan dan --t-subtle pada labelnya — di
   kertas putih nyaris tak terbaca. Teks kembali ke rumus style.css; tautan
   blok nominal biru teks (biru merek polos hanya 3,7:1 di putih). */
html[data-tema="hud-terang"] .seo-lead{color:color-mix(in srgb,var(--txt) 76%,var(--muted))}
html[data-tema="hud-terang"] :is(.seo-copy p,.seo-step-list li){color:color-mix(in srgb,var(--txt) 84%,var(--muted))}
html[data-tema="hud-terang"] .seo-block-label{color:var(--muted)}
html[data-tema="hud-terang"] .seo-produk a{color:var(--h-biru-teks)}
/* Panah "Mulai top up": kotaknya tinta gelap (--h-putih), tapi aturan ikon
   di atas mewarnai panahnya biru teks — biru di atas biru tua. */
html[data-tema="hud-terang"] .seo-artikel .seo-return b{color:var(--h-g1)}
/* Pop-up Cek ID: konsep HUD awal tanpa logo (9 Okt 2026) memakai token terang badan HUD
   apa adanya — panel putih bersiku, nama toko / logo nama biru merek, tombol setuju
   bertinta gelap. Tidak ada yang perlu ditimpa di sini. */
/* Bilah Total yang menempel di kiri bawah selama domain belum punya artikel (badan HUD):
   bayangan terang seperti elemen terang lainnya, bukan bayangan hitam pekat HUD gelap. */
@media (min-width:900px) and (min-height:700px){
  html[data-tema="hud-terang"] #view-topup:not(:has(>#topup-artikel:not([hidden])))>#summary{box-shadow:0 0 0 1px rgba(22,32,58,.08),0 18px 40px -14px rgba(22,32,58,.35)}
}
/* Ulasan toko: bintang emas yang lebih pekat di atas kertas, garis bintang kosong tinta,
   bayangan lembar tipis seperti elemen terang lainnya. Sisanya mewarisi badan HUD lewat --h-*. */
html[data-tema="hud-terang"]{--ul-emas:#f2a100;--ul-kosong:rgba(22,32,58,.16)}
html[data-tema="hud-terang"] .ul-lembar{box-shadow:0 -10px 30px rgba(22,32,58,.18)}
/* Logo status (HGI) di panel bayar dan kartu lacak berupa gambar PUTIH: di kertas putih ia
   tak terlihat dan hanya menyisakan ruang kosong di atas langkah Bayar/Proses/Selesai.
   Satu filter brightness(0) (bukan rantai pewarna — Safari iPhone salah menampilkannya)
   menjadikannya tinta gelap. */
html[data-tema="hud-terang"] :is(.pay-status-logo,.track-status-logo) img{filter:brightness(0);opacity:.82}

/* == AKSEN MEREK (terbatas) ======================================== */
/* Sejak 24 Sep 2026 warna merek memimpin seluruh aksi (lihat blok "Biru
   TokoMD memimpin"), jadi blok ini tidak lagi satu-satunya tempat biru
   muncul. Ia tetap ada karena tombol yang MEMINDAHKAN UANG — pilih
   pembayaran, bayar, isi saldo, konfirmasi pesan massal — wajib biru penuh
   walau aturan di atas berubah, dan karena hover-nya diatur di sini.
   Keadaan mati dikecualikan lewat :not(:disabled): #pay-body a.btn-full
   membuat :is() di sini lebih khusus daripada aturan :disabled di atas. */
html[data-tema="hud-terang"] :is(#buy-btn,.wallet-topup-submit,.wallet-pass-btn.primary,.bulk-confirm-yes,#pay-body a.btn-full):not(:disabled){border-color:var(--brand);background:var(--brand);color:var(--brand-on,var(--h-putih))}
html[data-tema="hud-terang"] :is(#buy-btn,.wallet-topup-submit,.wallet-pass-btn.primary,.bulk-confirm-yes,#pay-body a.btn-full):hover:not(:disabled){background:color-mix(in srgb,var(--brand) 86%,var(--h-putih))}
/* == /AKSEN MEREK ================================================== */