/* EZurance web (situs) — tata letak khusus situs. Hanya merujuk token di /css/tokens.css.
   Komponen dasar (btn, card, chip, option, field, badge, notice, stepper, timeline, dll.) dari /css/komponen.css.
   Breakpoint mengikuti DESIGN.md §4: 40rem (640), 48rem (768), 64rem (1024), 80rem (1280). */

:root {
  --atas: 0px;                                  /* tinggi bilah demo, diisi JS */
  --kepala-h: var(--sp-16);                     /* tinggi header situs */
  --prosa: calc(var(--sp-20) * 9);              /* 720 px lebar teks bacaan */
  --sisi: calc(var(--sp-20) * 3 + var(--sp-10)); /* 280 px kolom samping */
  --foto-rasio: 16 / 9;
}

body.situs { background: var(--surface-raised); min-height: 100vh; display: flex; flex-direction: column; }
body.situs main { flex: 1; }
body.situs img { height: auto; }
.wrap { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 64rem) { .wrap { padding: 0 var(--sp-8); } }
.wrap.sempit { max-width: var(--prosa); }
.skip { position: absolute; left: var(--sp-4); top: calc(-1 * var(--sp-20)); z-index: 100; }
.skip:focus { top: var(--sp-2); }

/* ---------- Strip prototype ---------- */
.strip-proto { background: var(--neutral-800); color: var(--neutral-100); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.strip-proto .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--sp-8); flex-wrap: wrap; padding-block: var(--sp-1); }
.strip-proto .seg { display: inline-flex; align-items: center; gap: var(--sp-1); }
.strip-proto .seg span { color: var(--neutral-300); }
.strip-proto button { min-height: var(--sp-6); padding: 0 var(--sp-2); border-radius: var(--r-full); border: var(--border-w) solid var(--neutral-600); background: transparent; color: var(--neutral-100); font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer; }
.strip-proto button[aria-pressed="true"] { background: var(--neutral-0); color: var(--neutral-900); border-color: var(--neutral-0); }
.strip-proto :focus-visible { outline-color: var(--neutral-0); }

/* ---------- Header ---------- */
.sh { background: var(--surface-raised); border-bottom: var(--border-w) solid var(--border-default); z-index: 60; }
@media (min-width: 64rem) { .sh { position: sticky; top: var(--atas); } }
.sh .wrap { display: flex; align-items: center; gap: var(--sp-6); min-height: var(--kepala-h); }
.logo { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--text-primary); flex: none; min-height: var(--target-min); }
.logo img { width: var(--sp-8); height: var(--sp-8); }
.logo b { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-snug); }
.sh nav { display: flex; gap: var(--sp-1); }
.sh nav a { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--sp-3); border-radius: var(--r-full); text-decoration: none; color: var(--text-secondary); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.sh nav a:hover { background: var(--surface-sunken); color: var(--text-primary); }
.sh nav a[aria-current="page"] { color: var(--text-brand); background: var(--surface-brand-soft); }
.sh .kanan { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.avatar { width: var(--sp-10); height: var(--sp-10); border-radius: var(--r-full); background: var(--action-soft); color: var(--action-on-soft); display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-sm); flex: none; }
.akun-link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--target-min); padding: 0 var(--sp-2) 0 var(--sp-1); border-radius: var(--r-full); text-decoration: none; color: var(--text-primary); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.akun-link:hover { background: var(--surface-sunken); }
.menu-btn { display: none; }
@media (max-width: 63.99rem) {
  .sh nav, .sh .kanan .hanya-lebar { display: none; }
  .menu-btn { display: grid; }
  .sh .wrap { gap: var(--sp-2); }
  .akun-link .nama { display: none; }
}
.sh.polos .wrap { gap: var(--sp-3); }
.sh.polos .aman { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--status-success-text); }
@media (max-width: 40rem) { .sh.polos .aman span { display: none; } }

/* Menu seluler (sheet dari kanan memakai pola .sheet) */
.menu-list { display: flex; flex-direction: column; }
.menu-list a { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--sp-14); padding: 0 var(--sp-2); text-decoration: none; color: var(--text-primary); font-weight: var(--fw-semibold); border-bottom: var(--border-w) solid var(--border-default); }
.menu-list a .icon { color: var(--text-brand); }
.menu-list a[aria-current="page"] { color: var(--text-brand); }

/* ---------- Lapisan: sheet / dialog / toast (fixed untuk web) ---------- */
body.situs .overlay { position: fixed; z-index: 80; }
body.situs .sheet { position: fixed; z-index: 81; max-height: 90vh; }
body.situs .sheet .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
@media (min-width: 48rem) {
  body.situs .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: calc(100% - var(--sp-12)); max-width: calc(var(--sp-20) * 6); border-radius: var(--r-xl); padding: var(--sp-6); transform: translate(-50%, -46%); opacity: 0; pointer-events: none; transition: transform var(--dur-emph) var(--ease-emph), opacity var(--dur-std) var(--ease-std); }
  body.situs .sheet.lebar { max-width: calc(var(--sp-20) * 8); }
  body.situs .sheet.open { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
  body.situs .sheet .grabber { display: none; }
}
body.situs .toast { position: fixed; left: 50%; right: auto; bottom: var(--sp-6); width: max-content; max-width: calc(100% - var(--sp-8)); transform: translate(-50%, var(--sp-2)); z-index: 90; }
body.situs .toast.show { transform: translate(-50%, 0); }
body.situs.ada-bar .toast { bottom: calc(var(--sp-20) + var(--sp-4)); }

/* ---------- Tipografi situs ---------- */
.h-hero { font-size: clamp(var(--fs-display), 4.2vw, var(--sp-12)); line-height: 1.15; font-weight: var(--fw-heavy); letter-spacing: var(--tracking-tight); }
.h-band { font-size: clamp(var(--fs-h1), 3vw, var(--fs-display)); line-height: 1.2; font-weight: var(--fw-heavy); letter-spacing: var(--tracking-snug); }
.lead { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); max-width: calc(var(--sp-20) * 7); }
@media (min-width: 64rem) { .lead.besar { font-size: var(--fs-h3); line-height: var(--lh-body); } }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-tertiary); }
.crumb a { color: var(--text-secondary); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--sp-6); }
.crumb a:hover { color: var(--text-brand); text-decoration: underline; }
.crumb .icon { width: var(--sp-4); height: var(--sp-4); }

/* ---------- Bagian ---------- */
.band { padding-block: var(--sp-16); }
.band.soft { background: var(--surface-base); }
.band.rapat { padding-block: var(--sp-10); }
@media (max-width: 48rem) { .band { padding-block: var(--sp-12); } .band.rapat { padding-block: var(--sp-8); } }
.band-head { display: flex; flex-direction: column; gap: var(--sp-2); max-width: var(--prosa); margin-bottom: var(--sp-8); }
.band-head.baris { max-width: none; flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); }
.band-head.baris > div { display: flex; flex-direction: column; gap: var(--sp-2); max-width: var(--prosa); }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 64rem) { .g4 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 48rem) { .g2, .g3 { grid-template-columns: 1fr; } }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-12); align-items: center; }
@media (max-width: 56rem) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } }
.self-start { align-self: flex-start; }
.pusat { text-align: center; align-items: center; }
.no-under { text-decoration: none; }
.tautan { color: var(--text-brand); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: var(--sp-1); cursor: pointer; background: none; border: 0; padding: 0; font-size: inherit; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--sp-6); }
.tautan:hover { color: var(--action-primary-hover); }

/* ---------- Hero beranda ---------- */
.hero { background: var(--surface-base); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-12); align-items: center; padding-block: var(--sp-16); }
@media (max-width: 56rem) { .hero .wrap { grid-template-columns: 1fr; padding-block: var(--sp-8) var(--sp-10); gap: var(--sp-8); } }
.hero .verbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hero .verbs span { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1); border-radius: var(--r-full); background: var(--surface-raised); border: var(--border-w) solid var(--border-default); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.hero .verbs span .ib { width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-full); display: grid; place-items: center; background: var(--surface-brand-soft); color: var(--text-brand); }
.hero .harga { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.hero .cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (max-width: 40rem) { .hero .cta .btn { flex: 1 1 100%; } }
.hero-media { position: relative; padding-bottom: var(--sp-10); }
.hero-media .foto { border-radius: var(--r-xl); aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: var(--surface-sunken); }
.hero-media .policy-card { position: absolute; left: calc(-1 * var(--sp-6)); bottom: 0; width: 62%; min-width: calc(var(--sp-20) * 3); box-shadow: var(--shadow-sheet); padding: var(--sp-4); }
@media (max-width: 56rem) { .hero-media .policy-card { left: var(--sp-3); width: 64%; } }
.hero-media .policy-card .t-h3 { color: var(--text-on-brand); }
.hero-media .pc-qr { width: var(--sp-12); height: var(--sp-12); }
.hero-media .tanda { position: absolute; right: var(--sp-4); top: var(--sp-4); }
.badge.putih { background: var(--neutral-0); color: var(--text-primary); box-shadow: var(--shadow-float); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.badge.putih .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--status-success); }

/* ---------- Kartu kebutuhan dengan foto ---------- */
.need { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-raised); border: var(--border-w) solid var(--border-default); text-decoration: none; color: inherit; transition: transform var(--dur-micro) var(--ease-out); }
.need:hover { border-color: var(--border-strong); }
.need:active { transform: scale(0.99); }
.need img { width: 100%; aspect-ratio: var(--foto-rasio); object-fit: cover; background: var(--surface-sunken); }
.need .isi { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); flex: 1; }
.need .isi .row { margin-top: auto; padding-top: var(--sp-2); }
.need .ikon-label { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--text-brand); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-bold); }
.need .ikon-label .icon { width: var(--sp-4); height: var(--sp-4); }
.need.bantu { background: var(--surface-brand); color: var(--text-on-brand); border-color: transparent; justify-content: space-between; }
.need.bantu .isi { gap: var(--sp-3); padding: var(--sp-5); }
.need.bantu .t-sm { color: var(--text-on-brand-muted); }
.need.bantu .icon-box { background: rgba(255, 255, 255, 0.16); color: var(--text-on-brand); }
.need.lain { background: var(--surface-brand-soft); border-color: transparent; justify-content: space-between; }
.need.lain .isi { gap: var(--sp-3); padding: var(--sp-5); }
.need.lain .icon-box { background: var(--surface-raised); }
.kampanye .mascot { height: auto; }
@media (max-width: 40rem) {
  .g4.needs { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .need .isi { padding: var(--sp-3); }
  .need .isi .t-sm.desk { display: none; }
}

/* ---------- Strip kepercayaan ---------- */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 64rem) { .trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .trust { grid-template-columns: 1fr; gap: var(--sp-3); } }
.trust-item { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface-raised); border: var(--border-w) solid var(--border-default); }

/* ---------- Langkah ---------- */
.langkah { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.langkah.empat { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 64rem) { .langkah.empat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 48rem) { .langkah, .langkah.empat { grid-template-columns: 1fr; } }
.step-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface-raised); border: var(--border-w) solid var(--border-default); }
.step-card .n { width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-full); background: var(--action-soft); color: var(--action-on-soft); display: grid; place-items: center; font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }

/* ---------- Kampanye ---------- */
.kampanye { display: grid; grid-template-columns: 1.1fr 0.9fr; border-radius: var(--r-xl); overflow: hidden; background: var(--surface-brand); color: var(--text-on-brand); }
@media (max-width: 56rem) { .kampanye { grid-template-columns: 1fr; } }
.kampanye .isi { padding: var(--sp-10); display: flex; flex-direction: column; gap: var(--sp-4); position: relative; }
@media (max-width: 48rem) { .kampanye .isi { padding: var(--sp-6); } }
.kampanye .t-muted, .kampanye .t-sm { color: var(--text-on-brand-muted); }
.kampanye .foto { position: relative; min-height: calc(var(--sp-20) * 3); }
.kampanye .foto img.latar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kampanye .mascot { position: absolute; right: var(--sp-4); bottom: 0; width: calc(var(--sp-20) * 2); }
@media (max-width: 48rem) { .kampanye .mascot { display: none; } }
.voucher-tiket { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--accent-warm-soft); color: var(--accent-warm-text); align-self: flex-start; }
.voucher-tiket b { font-size: var(--fs-h3); letter-spacing: var(--tracking-wide); color: var(--neutral-900); }

/* ---------- Unduh aplikasi ---------- */
.app-cta { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-8); align-items: center; padding: var(--sp-10); border-radius: var(--r-xl); background: var(--surface-brand-soft); }
@media (max-width: 48rem) { .app-cta { grid-template-columns: 1fr; padding: var(--sp-6); } }
.qr-box { width: calc(var(--sp-20) + var(--sp-16)); aspect-ratio: 1; padding: var(--sp-3); background: var(--neutral-0); border-radius: var(--r-md); color: var(--neutral-950); border: var(--border-w) solid var(--border-default); }
.qr-box svg, .qr-besar svg { width: 100%; height: 100%; display: block; }
.store { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- FAQ ---------- */
details.faq { border-bottom: var(--border-w) solid var(--border-default); }
details.faq summary { cursor: pointer; font-weight: var(--fw-bold); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--sp-14); padding-block: var(--sp-3); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .icon { transition: transform var(--dur-std) var(--ease-std); color: var(--text-tertiary); }
details.faq[open] summary .icon { transform: rotate(180deg); }
details.faq .jawab { padding-bottom: var(--sp-4); color: var(--text-secondary); display: flex; flex-direction: column; gap: var(--sp-2); }

/* ---------- Footer ---------- */
.sf { background: var(--neutral-900); color: var(--neutral-300); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.sf .atas { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-8); padding-block: var(--sp-12); }
@media (max-width: 64rem) { .sf .atas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .sf .atas { grid-template-columns: 1fr; gap: var(--sp-6); } }
.sf h2 { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--neutral-0); font-weight: var(--fw-bold); }
.sf a { color: var(--neutral-100); text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--sp-8); }
.sf a:hover { color: var(--neutral-0); text-decoration: underline; }
.sf .kol { display: flex; flex-direction: column; gap: var(--sp-1); }
.sf .merek { display: flex; flex-direction: column; gap: var(--sp-4); }
.sf .logo { color: var(--neutral-0); }
.sf .endorse { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sf .endorse .pil { background: var(--neutral-0); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); display: inline-flex; }
.sf .endorse img { height: var(--sp-5); width: auto; }
.sf .ojk { display: flex; gap: var(--sp-2); align-items: flex-start; color: var(--neutral-200); }
.sf .ojk .icon { color: var(--green-100); }
.sf .bawah { border-top: var(--border-w) solid var(--neutral-700); padding-block: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); justify-content: space-between; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--neutral-300); }
.sf .telp { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-heavy); color: var(--neutral-0); font-variant-numeric: tabular-nums; }

/* ---------- Halaman produk ---------- */
.produk-layout { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--sisi) + var(--sp-20)); gap: var(--sp-12); align-items: start; padding-block: var(--sp-8) var(--sp-16); }
@media (max-width: 64rem) { .produk-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); padding-bottom: var(--sp-12); } }
.produk-main { display: flex; flex-direction: column; gap: var(--sp-16); min-width: 0; }
@media (max-width: 48rem) { .produk-main { gap: var(--sp-12); } }
.produk-main > section { display: flex; flex-direction: column; gap: var(--sp-5); scroll-margin-top: calc(var(--atas) + var(--kepala-h) + var(--sp-4)); }
.produk-hero { display: flex; flex-direction: column; gap: var(--sp-5); }
.produk-hero .foto { width: 100%; aspect-ratio: var(--foto-rasio); object-fit: cover; border-radius: var(--r-xl); background: var(--surface-sunken); }
.usp { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); }
.usp span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.usp .icon { color: var(--status-success); }
.buy-col { position: sticky; top: calc(var(--atas) + var(--kepala-h) + var(--sp-6)); }
@media (max-width: 64rem) { .buy-col { position: static; order: 0; } }
.buybox { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-xl); background: var(--surface-raised); border: var(--border-w) solid var(--border-default); }
@media (min-width: 64rem) { .buybox { box-shadow: var(--shadow-sheet); border-color: transparent; } }
.buybox .option { padding: var(--sp-3) var(--sp-4); }
.qty { display: inline-flex; align-items: center; gap: var(--sp-1); border: var(--border-w) solid var(--border-strong); border-radius: var(--r-md); }
.qty button { width: var(--target-min); height: var(--target-min); border: 0; background: transparent; color: var(--text-brand); cursor: pointer; display: grid; place-items: center; border-radius: var(--r-md); }
.qty button:disabled { color: var(--text-tertiary); cursor: not-allowed; }
.qty output { min-width: var(--sp-8); text-align: center; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.seg-pil { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.seg-pil .option { justify-content: center; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; }
@media (min-width: 64rem) { .mobile-bar { display: none; } }
@media (max-width: 63.99rem) { body.ada-bar main { padding-bottom: calc(var(--sp-20) + var(--sp-4)); } }

.skenario { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 40rem) { .skenario { grid-template-columns: 1fr; } }
.sken { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface-base); border: var(--border-w) solid var(--border-default); }
.sken .jika { display: flex; gap: var(--sp-2); align-items: flex-start; font-weight: var(--fw-semibold); }
.sken .jika .icon { color: var(--status-warning); margin-top: var(--sp-1); flex: none; }
.sken .dapat { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--status-success-text); background: var(--status-success-soft); padding: var(--sp-3); border-radius: var(--r-md); }
.sken .dapat .icon { flex: none; }

.tabel-wrap { overflow-x: auto; border: var(--border-w) solid var(--border-default); border-radius: var(--r-lg); }
table.banding { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--lh-sm); }
table.banding th, table.banding td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: var(--border-w) solid var(--border-default); vertical-align: top; }
table.banding tbody tr:last-child td, table.banding tbody tr:last-child th { border-bottom: 0; }
table.banding thead th { background: var(--surface-base); vertical-align: bottom; }
table.banding thead th .stack { --gap: var(--sp-1); }
table.banding td { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
table.banding tbody th { font-weight: var(--fw-medium); color: var(--text-secondary); }
table.banding .pop { background: var(--surface-brand-soft); }
table.banding thead th.pop { background: var(--action-soft); }
.plans { display: none; }
@media (max-width: 48rem) { .tabel-wrap.lebar-saja { display: none; } .plans { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); } }
.plan { display: flex; flex-direction: column; gap: var(--sp-3); }
.plan.pop { border-color: var(--border-brand); box-shadow: 0 0 0 var(--border-w) var(--border-brand); }
.benefits { display: flex; flex-direction: column; gap: var(--sp-2); }
.benefits li { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.benefits li span:last-child { font-weight: var(--fw-semibold); text-align: right; font-variant-numeric: tabular-nums; }
.tahu { display: flex; flex-direction: column; gap: var(--sp-3); }
.tahu li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.tahu li .icon { flex: none; margin-top: var(--sp-1); }
.tahu .ya .icon { color: var(--status-success); }
.tahu .tidak .icon { color: var(--status-danger); }
.dok-riplay { display: flex; align-items: center; gap: var(--sp-3); }

/* ---------- Katalog ---------- */
.katalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 64rem) { .katalog { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .katalog { grid-template-columns: 1fr; } }
.pcard { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-raised); border: var(--border-w) solid var(--border-default); }
.pcard img { width: 100%; aspect-ratio: var(--foto-rasio); object-fit: cover; background: var(--surface-sunken); }
.pcard .isi { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.pcard .bawah { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-2); }
.bantu-card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4); align-items: center; padding: var(--sp-5) var(--sp-6); border-radius: var(--r-xl); background: var(--surface-brand-soft); text-decoration: none; color: inherit; }
.bantu-card:hover { box-shadow: 0 0 0 var(--border-w) var(--border-brand); }
@media (max-width: 40rem) { .bantu-card { grid-template-columns: auto 1fr; } .bantu-card .btn { grid-column: 1 / -1; } }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.filter-bar .chips { flex-wrap: wrap; }
@media (max-width: 40rem) { .filter-bar .chips { flex-wrap: nowrap; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } }

/* ---------- Kepala halaman umum ---------- */
.page-head { background: var(--surface-base); border-bottom: var(--border-w) solid var(--border-default); }
.page-head .wrap { padding-block: var(--sp-10); display: flex; flex-direction: column; gap: var(--sp-3); }
@media (max-width: 48rem) { .page-head .wrap { padding-block: var(--sp-6); } }

/* ---------- Bantu pilihkan ---------- */
.bp-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-10); align-items: start; padding-block: var(--sp-10) var(--sp-16); }
@media (max-width: 56rem) { .bp-layout { grid-template-columns: 1fr; gap: var(--sp-8); padding-block: var(--sp-6) var(--sp-12); } }
.bp-hasil { position: sticky; top: calc(var(--atas) + var(--kepala-h) + var(--sp-6)); display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 56rem) { .bp-hasil { position: static; } }
.keg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 40rem) { .keg { grid-template-columns: 1fr; } }
.keg .option { align-items: center; color: var(--text-primary); }
.rek.utama { border-color: var(--border-brand); box-shadow: 0 0 0 var(--border-w) var(--border-brand); }
.urutan { width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-full); display: grid; place-items: center; background: var(--surface-sunken); font-weight: var(--fw-heavy); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; flex: none; }
.rek.utama .urutan { background: var(--action-primary); color: var(--action-on-primary); }

/* ---------- Checkout ---------- */
.co-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sisi); gap: var(--sp-10); align-items: start; padding-block: var(--sp-8) var(--sp-16); }
@media (min-width: 80rem) { .co-layout { grid-template-columns: minmax(0, 1fr) calc(var(--sisi) + var(--sp-10)); } }
@media (max-width: 64rem) { .co-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); padding-block: var(--sp-4) var(--sp-12); } }
.co-main { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.co-head { display: flex; flex-direction: column; gap: var(--sp-3); }
.co-head .row { flex-wrap: wrap; }
.co-sec { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); border-radius: var(--r-xl); background: var(--surface-raised); border: var(--border-w) solid var(--border-default); }
@media (max-width: 48rem) { .co-sec { padding: var(--sp-4); border-radius: var(--r-lg); } }
.co-sec > h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); }
.co-side { position: sticky; top: calc(var(--atas) + var(--kepala-h) + var(--sp-6)); display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 64rem) { .co-side { position: static; order: -1; } }
.ringkasan { display: flex; flex-direction: column; gap: var(--sp-4); }
.ringkasan-toggle { display: none; }
@media (max-width: 64rem) {
  .ringkasan-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--target-min); background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left; }
  .ringkasan-toggle .icon { transition: transform var(--dur-std) var(--ease-std); }
  .ringkasan[data-buka="false"] .ringkasan-isi { display: none; }
  .ringkasan[data-buka="true"] .ringkasan-toggle .icon { transform: rotate(180deg); }
  .ringkasan .ringkas-judul { display: none; }
}
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 40rem) { .fields-2 { grid-template-columns: 1fr; } }
textarea.input { min-height: calc(var(--sp-20) + var(--sp-8)); padding: var(--sp-3) var(--sp-4); resize: vertical; line-height: var(--lh-body); }
select.input { appearance: none; background-image: none; padding-right: var(--sp-10); cursor: pointer; }
.select-wrap { position: relative; }
.select-wrap .icon { position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-tertiary); }
.metode { display: flex; flex-direction: column; gap: var(--sp-5); }
.metode .grup { display: flex; flex-direction: column; gap: var(--sp-2); }
.metode .option .logo-m { width: var(--sp-10); height: var(--sp-10); border-radius: var(--r-sm); background: var(--surface-sunken); display: grid; place-items: center; color: var(--text-secondary); flex: none; }
.menunggu { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-8); align-items: start; }
@media (max-width: 48rem) { .menunggu { grid-template-columns: 1fr; gap: var(--sp-5); justify-items: center; } }
.qr-besar { width: calc(var(--sp-20) * 3); aspect-ratio: 1; padding: var(--sp-3); border-radius: var(--r-lg); background: var(--neutral-0); border: var(--border-w) solid var(--border-default); color: var(--neutral-950); }
.hitung { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-full); background: var(--status-warning-soft); color: var(--status-warning-text); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.va-box { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-sunken); }
.va-box .no { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-wide); }
.sukses-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); }
.sukses-ikon { width: var(--sp-16); height: var(--sp-16); border-radius: var(--r-full); display: grid; place-items: center; background: var(--status-success-soft); color: var(--status-success); }
.sukses-ikon .icon { width: var(--sp-10); height: var(--sp-10); }
.kartu-wrap { width: 100%; max-width: calc(var(--sp-20) * 5); margin: 0 auto; }
.otp-demo input { caret-color: var(--action-primary); }
.otp-demo input.terisi { border-color: var(--border-brand); background: var(--surface-brand-soft); }
.anggota { display: flex; flex-direction: column; gap: var(--sp-2); }
.anggota .check { padding: var(--sp-3) var(--sp-4); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); color: var(--text-primary); min-height: var(--target-min); align-items: center; }
.drop { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-8) var(--sp-4); border-radius: var(--r-lg); border: var(--focus-w) dashed var(--border-strong); background: var(--surface-base); text-align: center; }
.drop.aktif { border-color: var(--border-brand); background: var(--surface-brand-soft); }
.bar-proses { height: var(--sp-2); border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden; width: 100%; }
.bar-proses span { display: block; height: 100%; width: 0; background: var(--action-primary); border-radius: inherit; transition: width var(--dur-emph) var(--ease-std); }
.co-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
@media (max-width: 64rem) { .co-nav.lebar-saja { display: none; } }

/* ---------- Area akun ---------- */
.akun-layout { display: grid; grid-template-columns: calc(var(--sisi) - var(--sp-10)) minmax(0, 1fr); gap: var(--sp-10); align-items: start; padding-block: var(--sp-8) var(--sp-16); }
@media (max-width: 64rem) { .akun-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); padding-block: var(--sp-4) var(--sp-12); } }
.akun-nav { position: sticky; top: calc(var(--atas) + var(--kepala-h) + var(--sp-6)); display: flex; flex-direction: column; gap: var(--sp-1); }
.akun-nav .profil-mini { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-4); }
.akun-nav a, .akun-nav button.navi { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--target-min); padding: 0 var(--sp-3); border-radius: var(--r-md); text-decoration: none; color: var(--text-secondary); font-weight: var(--fw-semibold); font-size: var(--fs-sm); border: 0; background: transparent; cursor: pointer; text-align: left; }
.akun-nav a:hover, .akun-nav button.navi:hover { background: var(--surface-sunken); }
.akun-nav a[aria-current="page"] { background: var(--action-soft); color: var(--action-on-soft); }
@media (max-width: 64rem) {
  .akun-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); gap: var(--sp-2); }
  .akun-nav::-webkit-scrollbar { display: none; }
  .akun-nav .profil-mini, .akun-nav hr { display: none; }
  .akun-nav a, .akun-nav button.navi { flex: none; border: var(--border-w) solid var(--border-default); border-radius: var(--r-full); white-space: nowrap; }
}
.akun-main { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.akun-main > section { display: flex; flex-direction: column; gap: var(--sp-3); }
.polis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 48rem) { .polis-grid { grid-template-columns: 1fr; } }
a.policy-card { text-decoration: none; }
.policy-card .t-h3 { color: var(--text-on-brand); }
.aksi-cepat { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
@media (max-width: 40rem) { .aksi-cepat { grid-template-columns: repeat(2, 1fr); } }
.aksi-cepat a { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); border: var(--border-w) solid var(--border-default); background: var(--surface-raised); text-decoration: none; color: var(--text-primary); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.aksi-cepat a:hover { border-color: var(--border-strong); }
.todo { text-decoration: none; color: inherit; }
.todo .icon:last-child { color: var(--text-tertiary); }
.poin-box { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4); align-items: center; }
.akun-sec { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); border-radius: var(--r-xl); border: var(--border-w) solid var(--border-default); background: var(--surface-raised); scroll-margin-top: calc(var(--atas) + var(--kepala-h) + var(--sp-4)); }
@media (max-width: 48rem) { .akun-sec { padding: var(--sp-4); border-radius: var(--r-lg); } }
.kv-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--target-min); }
.toggle-row + .toggle-row { border-top: var(--border-w) solid var(--border-default); padding-top: var(--sp-3); }
.switch[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.detail-polis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
@media (max-width: 56rem) { .detail-polis { grid-template-columns: 1fr; } }
.aksi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.aksi-grid .btn { width: 100%; }
@media (max-width: 40rem) { .aksi-grid { grid-template-columns: 1fr; } }

/* ---------- Klaim ---------- */
.klaim-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4); align-items: center; padding: var(--sp-4); border-radius: var(--r-lg); border: var(--border-w) solid var(--border-default); background: var(--surface-raised); text-decoration: none; color: inherit; }
.klaim-row:hover { border-color: var(--border-strong); }
@media (max-width: 40rem) { .klaim-row { grid-template-columns: auto 1fr; } .klaim-row > .icon { display: none; } }
.status-head { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); border-radius: var(--r-xl); background: var(--surface-base); border: var(--border-w) solid var(--border-default); }
.pin-dots { display: flex; justify-content: center; gap: var(--sp-3); }
.pin-dots span { width: var(--sp-4); height: var(--sp-4); border-radius: var(--r-full); border: var(--focus-w) solid var(--border-strong); }
.pin-dots span.on { background: var(--action-primary); border-color: var(--action-primary); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.pin-pad button { min-height: var(--sp-14); border-radius: var(--r-md); border: 0; background: var(--surface-sunken); font-size: var(--fs-h2); font-weight: var(--fw-bold); cursor: pointer; font-variant-numeric: tabular-nums; }
.pin-pad button:hover { background: var(--neutral-100); }
.pin-pad button.kosong { visibility: hidden; }

/* ---------- Artikel ---------- */
.artikel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 64rem) { .artikel-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .artikel-grid { grid-template-columns: 1fr; } }
.acard { display: flex; flex-direction: column; gap: var(--sp-3); text-decoration: none; color: inherit; }
.acard img { width: 100%; aspect-ratio: var(--foto-rasio); object-fit: cover; border-radius: var(--r-lg); background: var(--surface-sunken); }
.acard:hover .t-h3 { color: var(--text-brand); text-decoration: underline; }
.acard.utama { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-8); align-items: center; }
@media (max-width: 56rem) { .acard.utama { grid-template-columns: 1fr; gap: var(--sp-4); } }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-tertiary); font-weight: var(--fw-medium); }
.prosa { display: flex; flex-direction: column; gap: var(--sp-5); font-size: var(--fs-body); line-height: var(--sp-8); color: var(--text-primary); }
@media (min-width: 64rem) { .prosa { font-size: var(--fs-h3); } }
.prosa h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); margin-top: var(--sp-4); }
.prosa ul.butir { display: flex; flex-direction: column; gap: var(--sp-2); padding-left: var(--sp-6); list-style: disc; }
.prosa figure { display: flex; flex-direction: column; gap: var(--sp-2); }
.prosa figure img { border-radius: var(--r-lg); width: 100%; aspect-ratio: var(--foto-rasio); object-fit: cover; }
.prosa figcaption { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-tertiary); }
.cta-artikel { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: center; padding: var(--sp-5); border-radius: var(--r-xl); background: var(--surface-brand-soft); }
.cta-artikel .btn-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.artikel-layout { display: grid; grid-template-columns: minmax(0, var(--prosa)) var(--sisi); gap: var(--sp-12); justify-content: space-between; align-items: start; padding-block: var(--sp-8) var(--sp-16); }
@media (max-width: 64rem) { .artikel-layout { grid-template-columns: 1fr; gap: var(--sp-10); } }
.artikel-side { position: sticky; top: calc(var(--atas) + var(--kepala-h) + var(--sp-6)); display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 64rem) { .artikel-side { position: static; } }
.toc { display: flex; flex-direction: column; gap: var(--sp-1); }
.toc a { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); text-decoration: none; padding: var(--sp-2) var(--sp-3); border-left: var(--focus-w) solid var(--border-default); min-height: var(--sp-10); display: flex; align-items: center; }
.toc a:hover { color: var(--text-brand); border-left-color: var(--border-brand); }

/* ---------- Bantuan ---------- */
.cari-besar { position: relative; max-width: var(--prosa); width: 100%; }
.cari-besar .icon { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--text-tertiary); }
.cari-besar .input { padding-left: var(--sp-12); min-height: var(--sp-14); border-radius: var(--r-full); font-size: var(--fs-body); }
.kontak { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 64rem) { .kontak { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .kontak { grid-template-columns: 1fr; } }
.kontak .card { display: flex; flex-direction: column; gap: var(--sp-3); }
.kontak .card .btn { margin-top: auto; align-self: flex-start; }
.chat-box { display: flex; flex-direction: column; gap: var(--sp-3); max-height: 50vh; overflow-y: auto; padding: var(--sp-1); }
.bubble { max-width: 85%; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.bubble.bot { background: var(--surface-sunken); border-bottom-left-radius: var(--r-sm); align-self: flex-start; }
.bubble.saya { background: var(--action-primary); color: var(--action-on-primary); border-bottom-right-radius: var(--r-sm); align-self: flex-end; }
.bot-head { display: flex; align-items: center; gap: var(--sp-3); }
.bot-head img { width: var(--sp-10); height: var(--sp-10); border-radius: var(--r-full); background: var(--surface-brand-soft); padding: var(--sp-1); }

/* ---------- Rekanan ---------- */
.rekanan-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-6); align-items: start; padding-block: var(--sp-8) var(--sp-16); }
@media (max-width: 56rem) { .rekanan-layout { grid-template-columns: 1fr; padding-block: var(--sp-5) var(--sp-12); } }
.rek-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.rek-item { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); border: var(--border-w) solid var(--border-default); background: var(--surface-raised); cursor: pointer; }
.rek-item[aria-current="true"] { border-color: var(--border-brand); box-shadow: 0 0 0 var(--border-w) var(--border-brand); }
.peta { position: sticky; top: calc(var(--atas) + var(--kepala-h) + var(--sp-6)); border-radius: var(--r-xl); overflow: hidden; border: var(--border-w) solid var(--border-default); background: var(--surface-sunken); aspect-ratio: 4 / 3.4; }
@media (max-width: 56rem) { .peta { position: relative; top: 0; aspect-ratio: 4 / 3; } }
.peta svg { width: 100%; height: 100%; display: block; }
.peta .pin { cursor: pointer; }
.peta .pin circle.badan { fill: var(--action-primary); stroke: var(--neutral-0); stroke-width: 3; }
.peta .pin.rs circle.badan { fill: var(--status-danger); }
.peta .pin.aktif circle.badan { fill: var(--ez-900); }
.peta .pin.aktif circle.halo { fill: var(--ez-200); opacity: 0.6; }
.peta .pin circle.halo { fill: transparent; }
.peta .pin:focus-visible { outline: none; }
.peta .pin:focus-visible circle.badan { stroke: var(--neutral-950); }
.peta-ket { position: absolute; left: var(--sp-3); bottom: var(--sp-3); display: flex; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--surface-raised); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-semibold); box-shadow: var(--shadow-float); }
.peta-ket span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.peta-ket i { width: var(--sp-3); height: var(--sp-3); border-radius: var(--r-full); background: var(--action-primary); display: inline-block; }
.peta-ket i.rs { background: var(--status-danger); }
.peta-label { position: absolute; right: var(--sp-3); top: var(--sp-3); }
.titik { width: var(--sp-3); height: var(--sp-3); border-radius: var(--r-full); display: inline-block; flex: none; background: var(--action-primary); }
.titik.rs { background: var(--status-danger); }

/* ---------- Masuk ---------- */
.masuk-layout { display: grid; place-items: center; padding-block: var(--sp-12) var(--sp-16); }
.masuk-card { width: 100%; max-width: calc(var(--sp-20) * 6); display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-8); border-radius: var(--r-xl); background: var(--surface-raised); border: var(--border-w) solid var(--border-default); }
@media (max-width: 40rem) { .masuk-card { padding: var(--sp-5); border: 0; } .masuk-layout { padding-block: var(--sp-6) var(--sp-12); } }

/* ---------- Tentang ---------- */
.fakta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 48rem) { .fakta { grid-template-columns: 1fr; } }
.foto-band { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r-xl); background: var(--surface-sunken); }
@media (max-width: 48rem) { .foto-band { aspect-ratio: var(--foto-rasio); } }

@media (min-width: 64rem) { .akun-layout.status-layout { grid-template-columns: minmax(0, 1fr) var(--sisi); } }
.fs-reset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fs-reset legend { padding: 0; }
.judul-artikel { max-width: var(--prosa); }
.endorse-terang { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); border: var(--border-w) solid var(--border-default); background: var(--surface-raised); }
.endorse-terang img { height: var(--sp-6); width: auto; }
.tampilan-seluler { display: none; }
@media (max-width: 55.99rem) {
  .tampilan-seluler { display: flex; }
  body[data-tampil="daftar"] #peta { display: none; }
  body[data-tampil="peta"] #kol-daftar { display: none; }
}
.filter-bar .select-wrap .input { min-width: calc(var(--sp-20) + var(--sp-12)); }
img.avatar { object-fit: cover; padding: 0; }
.strip-proto select.peran { min-height: var(--sp-8); padding: 0 var(--sp-2); border-radius: var(--r-sm); border: var(--border-w) solid var(--neutral-600); background: var(--neutral-700); color: var(--neutral-0); font-size: var(--fs-xs); font-weight: var(--fw-semibold); max-width: calc(var(--sp-20) * 3); }
.strip-proto label { color: var(--neutral-300); }
.kosong { flex-wrap: wrap; }
.endorse-terang { flex-wrap: wrap; max-width: 100%; }
.co-layout.selesai { grid-template-columns: minmax(0, 1fr); max-width: calc(var(--prosa) + var(--sp-16)); }
.sf .ojk-note { color: var(--neutral-200); }
.sf .ojk-note .icon { color: var(--green-100); }
.sf .bawah a { color: var(--neutral-0); }
@media (max-width: 63.99rem) {
  .produk-main { display: contents; }
  .produk-hero { order: 0; }
  .buy-col { order: 1; }
  .produk-main > section:not(.produk-hero) { order: 2; }
  .produk-layout { gap: var(--sp-12); }
}
a.chip { text-decoration: none; }
.hero-media .policy-card .t-h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
@media (max-width: 40rem) {
  .hero-media .policy-card { width: calc(100% - var(--sp-12)); min-width: 0; }
  .hero-media { padding-bottom: var(--sp-20); }
}
@media (max-width: 40rem) {
  .todo { flex-wrap: wrap; }
  .todo .grow { flex-basis: calc(100% - var(--icon-box) - var(--sp-3)); }
  .todo > .btn { margin-left: calc(var(--icon-box) + var(--sp-3)); }
  .filter-bar > .row { width: 100%; }
  .filter-bar > .row > * { flex: 1 1 100%; }
  .filter-bar .select-wrap .input { width: 100%; }
}