/* Mikode POS — UI/UX Fase 2: halaman publik billing (harga, perpanjang,
   aktivasi, trial, lupa-password, reset-password).
   Dimuat SETELAH css/billing.css + css/mikode-theme.css. Semua selector
   ter-scope body.pg-publik; warna/spasi/radius HANYA dari token tema
   (--sp/--fs/--r, --success/--danger dkk) atau token billing (--ok/--bad)
   yang sudah diselaraskan nilainya di billing.css. Tidak ada hex baru. */

/* Ritme vertikal yang dulu inline style di aktivasi/perpanjang. */
body.pg-publik .pub-top-pad{padding-top:var(--sp-8,32px)}
body.pg-publik .bl-status-top{margin-top:var(--sp-8,32px)}
body.pg-publik .bl-center{text-align:center}

/* Kartu & tombol billing diselaraskan ke token tema (radius/shadow sama
   nilainya dengan billing.css, kini dari satu sumber token). */
body.pg-publik .bl-card{border-radius:var(--r-lg,16px);box-shadow:var(--sh-card)}
body.pg-publik .bl-plan{border-radius:var(--r-lg,16px)}
body.pg-publik .bl-btn{border-radius:var(--r-md,12px)}
body.pg-publik .bl-btn svg{width:20px;height:20px;flex:none}

/* Ikon status (SVG statis pengganti glyph centang/emoji di aktivasi):
   lingkaran .bl-ico dari billing.css tetap dipakai, isi SVG di tengahnya. */
body.pg-publik .bl-ico svg{width:30px;height:30px;display:block}

/* Penanda hasil akhir di perpanjang (pengganti penulisan style
   programatik dari JS): karakter centang/seru kini diberi class. */
body.pg-publik .bl-state-mark{font-size:var(--fs-30,30px);font-weight:700;line-height:1}
body.pg-publik .bl-state-mark svg{width:30px;height:30px;display:block}
body.pg-publik .bl-state-mark.is-ok{color:var(--ok,var(--success,#17803D))}
body.pg-publik .bl-state-mark.is-bad{color:var(--bad,var(--danger,#B42318))}

/* Pesan hasil pembayaran/aktivasi tetap POLA INLINE halaman (section
   .bl-state di perpanjang & aktivasi) — bukan alert native. Class ini
   hanya merapikan jarak ikon hasil di dalam section tersebut. */
body.pg-publik .bl-state .bl-ico{margin-bottom:var(--sp-3,12px)}

/* === Harga: hero dua kolom (Varian A, pilihan user 23 Okt 2026) === */
.va-hero{display:grid;grid-template-columns:1.25fr .85fr;gap:32px;align-items:start;text-align:left;padding-top:36px}
.va-hero h1{font-size:40px;line-height:1.15}
.va-hero .bl-btn{display:inline-block;width:auto;padding:14px 28px}
.va-assure{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;justify-content:start;margin-top:20px}
.va-kartu{background:#fff;border:1px solid #dbe4ee;border-radius:16px;padding:22px 24px;box-shadow:0 8px 24px rgba(10,31,51,.07)}
.va-kartu-judul{font-weight:700;font-size:15px;margin:0 0 10px;color:#0a1f33}
.va-kartu-list{margin:0 0 14px;padding-left:18px;color:#44596d;font-size:14px;line-height:1.7}
.va-kartu-bayar{margin:0;font-size:13px;color:#68798c;border-top:1px dashed #dbe4ee;padding-top:12px}
.bl-sandbox,.bl-promo{border-radius:10px}
#periodeToggle{display:flex}
@media (max-width:860px){.va-hero{grid-template-columns:1fr}.va-hero h1{font-size:32px}}
/* Nav publik di HP: tombol CTA disembunyikan agar tidak meluber (menu Trial + CTA hero tetap ada) */
@media (max-width:560px){.pub-cta{display:none}.pub-menu{gap:16px}}