/* ============================================================================
   CONNECT+ Publik — lapisan tampilan halaman klien (VS OS Design System)
   Register editorial: display Fivo Sans Modern, hero ink, aksen Identity Yellow
   hemat (CTA hero + tick). Anatomi kartu dari GUI/04 (package card) & GUI/06
   (kartu media foto-atas). Muat setelah: fonts.css, tokens.css, vs-ui.css.
   ============================================================================ */

body.pub { background: var(--surface-0); }
.pub-shell { width: 100%; max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--gutter); }

/* ===== Header ===== */
.pub-announce {
  background: var(--bg-ink); color: var(--text-on-dark-muted);
  font-size: var(--text-2xs); text-align: center; padding: 7px var(--gutter);
}
.pub-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface-0); border-bottom: 1px solid var(--border-default);
}
.pub-header__row { display: flex; align-items: center; gap: var(--space-6); height: 64px; }
.pub-brand {
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 17px;
  letter-spacing: var(--ls-tight); color: var(--text-strong); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.pub-brand .plus { color: var(--brand-line); }
.pub-brand small {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--ls-label-sm);
  text-transform: uppercase; color: var(--text-subtle); margin-left: var(--space-3);
}
.pub-nav { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
.pub-nav a {
  font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-muted);
  text-decoration: none; transition: color .12s ease;
}
.pub-nav a:hover, .pub-nav a[aria-current="page"] { color: var(--text-strong); }
.pub-navtoggle { display: none; margin-left: auto; }

/* ===== Hero ink — portal onboarding SEMUA ukuran (cms5, D39) =====
   Feedback owner: desktop/tablet juga harus terasa native app portal —
   hero beranda mengisi sisa layar (100svh - chrome announcement+header ≈100px),
   konten menetap di dasar seperti layar onboarding aplikasi. */
.pub-hero {
  background: var(--bg-ink); color: var(--text-on-dark);
  min-height: calc(100svh - 100px);
  display: flex; flex-direction: column;
}
.pub-hero > .pub-shell { flex: 1; display: flex; }
.pub-hero__inner {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--space-6);
  padding: var(--space-10) 0 var(--space-11); max-width: none;
}
.pub-hero__title { max-width: 840px; }
.pub-hero__kicker {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-on-dark-muted);
}
.pub-hero__title {
  font-family: var(--font-display); font-size: var(--text-display-lg);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-display); line-height: var(--lh-tight);
  color: var(--text-on-dark);
}
.pub-hero__body { font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--text-on-dark-muted); max-width: 520px; }
.pub-hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ===== Section rhythm ===== */
.pub-section { padding: var(--space-11) 0; }
.pub-section--subtle { background: var(--surface-1); }
.pub-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-8); flex-wrap: wrap; }
.pub-section__titles { display: flex; flex-direction: column; gap: var(--space-3); }
.pub-section__title {
  font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); color: var(--text-strong);
}
.pub-section__sub { font-size: var(--text-sm); color: var(--text-muted); max-width: 560px; }

/* ===== Chips kategori ===== */
.pub-chiprow { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pub-chip {
  padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-input); background: var(--surface-0);
  color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--fw-medium);
  text-decoration: none; cursor: pointer; transition: all .12s ease;
}
.pub-chip:hover { border-color: var(--ink-300); color: var(--text-strong); }
.pub-chip.is-active { background: var(--ink-900); border-color: var(--ink-900); color: var(--primary-contrast); font-weight: var(--fw-semibold); }

/* ===== Kartu creative (grid direktori) ===== */
.pub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5); }
.pub-ccard {
  background: var(--surface-0); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
.pub-ccard:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.pub-ccard__cover {
  height: 170px; background: var(--surface-1); position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pub-ccard__cover img { width: 100%; height: 100%; object-fit: cover; }
.pub-ccard__initial {
  font-family: var(--font-display); font-size: var(--text-display);
  font-weight: var(--fw-bold); color: var(--ink-200);
}
.pub-ccard__cat { position: absolute; top: 10px; left: 10px; }
.pub-ccard__body { padding: var(--space-5) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.pub-ccard__name {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: 16px; font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.pub-ccard__summary {
  font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pub-ccard__tags { display: flex; gap: 5px; flex-wrap: wrap; }
.pub-ccard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  border-top: 1px solid var(--border-faint); padding-top: var(--space-4); margin-top: auto;
}
.pub-ccard__price { font-family: var(--font-mono); font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--text-strong); }
.pub-ccard__price small { font-family: var(--font-body); font-size: 11px; font-weight: var(--fw-regular); color: var(--text-subtle); }
.pub-ccard__count { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); }

/* ===== Langkah cara kerja ===== */
.pub-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.pub-step {
  background: var(--surface-0); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: var(--space-7);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.pub-step__num {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-label);
  color: var(--text-subtle);
}
.pub-step__art {
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0;
  aspect-ratio: 3 / 2;
  overflow: visible;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  background: var(--ink-050);
}
.pub-step__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pub-step__title { font-family: var(--font-display); font-size: 16px; font-weight: var(--fw-bold); color: var(--text-strong); }
.pub-step__body { font-size: var(--text-xs); line-height: 1.55; color: var(--text-muted); margin: 0; }

/* ===== Gerbang PIN ===== */
.pub-gate { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: var(--space-11) 0; }
.pub-gate__card { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: var(--space-6); }
.pub-pininput {
  height: var(--field-h-lg); text-align: center;
  font-family: var(--font-mono); font-size: var(--text-h3); letter-spacing: .4em;
  font-variant-numeric: tabular-nums;
}

/* ===== Profil creative ===== */
.pub-profile-hero { background: var(--bg-ink); color: var(--text-on-dark); }
.pub-profile-hero__inner { display: flex; gap: var(--space-8); align-items: flex-end; padding: var(--space-11) 0 var(--space-9); flex-wrap: wrap; }
.pub-profile-hero__ava {
  width: 96px; height: 96px; border-radius: var(--radius-md); overflow: hidden; flex: 0 0 auto;
  background: var(--ink-800); border: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--text-h1); font-weight: var(--fw-bold); color: var(--ink-400);
}
.pub-profile-hero__ava img { width: 100%; height: 100%; object-fit: cover; }
.pub-profile-hero__body { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; flex: 1; }
.pub-profile-hero__name {
  font-family: var(--font-display); font-size: var(--text-h1); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display); line-height: var(--lh-tight); color: var(--text-on-dark);
  display: inline-flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
.pub-profile-hero__summary { font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--text-on-dark-muted); max-width: 560px; }
.pub-profile-facts { display: flex; gap: var(--space-7); flex-wrap: wrap; }
.pub-profile-fact { display: flex; flex-direction: column; gap: 2px; }
.pub-profile-fact__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-on-dark-muted); }
.pub-profile-fact__v { font-family: var(--font-mono); font-size: 13.5px; color: var(--text-on-dark); }

/* ============================================================================
   PRICELIST v3 (pkg3) — kartu paket marketplace.
   Sumber library:
     Commerce & Marketplace.dc.html §01 Storefront catalog  → shell + media + margin-top:auto
     Commerce & Marketplace.dc.html §07 Marketplace         → 3 tier + meta hairline
     Commerce & Marketplace.dc.html §02 Product detail      → ledger spesifikasi
     Component Library.dc.html GUI/04/PACKAGE-CARD          → check list + CTA block
   Aturan: SEMUA nilai = var(--token) dari assets/vs/tokens.css. Nilai turunan
   memakai calc() dari token (bukan literal). Rasio (aspect-ratio) & durasi
   transisi bukan besaran token — token file tidak memodelkannya; durasi
   mengikuti konvensi file ini (.12s ease).
   ============================================================================ */

/* ---- Grid: jumlah kolom dikendalikan kelas, BUKAN auto-fill (D5) ---- */
.pub-plist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}
/* cols1 = SATU paket. Track dikunci selebar kartu (bukan 1fr penuh): kalau
   diregangkan ke lebar shell, media ber-aspect-ratio ikut memanjang — gallery
   4/5 di 720px = placeholder setinggi 900px. Lebar diturunkan dari token
   container, bukan angka karangan. */
.pub-plist--cols1 { grid-template-columns: minmax(0, calc(var(--container-sm) / 2)); justify-content: start; }
.pub-plist--gallery.pub-plist--cols1 { grid-template-columns: minmax(0, calc(var(--container-sm) / 3)); }
.pub-plist--gallery.pub-plist--cols2 { grid-template-columns: repeat(2, minmax(0, calc(var(--container-sm) / 3))); justify-content: start; }
.pub-plist--cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pub-plist--cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* stack ditulis SETELAH cols* — PHP juga tidak mengirim kelas cols utk stack. */
.pub-plist--stack { grid-template-columns: minmax(0, 1fr); max-width: var(--container-md); gap: var(--space-4); }

/* ---- Shell kartu ---- */
.pub-pkg {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;                                     /* D2 + D8 */
  scroll-margin-top: calc(var(--space-11) + var(--space-7));   /* D11 (was 90px) */
  transition: box-shadow .12s ease, border-color .12s ease;
}
.pub-pkg:hover { box-shadow: var(--shadow-pop); }
/* D10 — featured = elevasi + garis brand penuh keliling (bukan 3px hardcode di atas
   yang lalu ditimpa media kotak). */
.pub-pkg--featured { border-color: var(--brand-line); box-shadow: var(--shadow-pop); }

/* ---- Media: anak pertama biasa, TANPA margin negatif (D2/D6) ---- */
.pub-pkg__media {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border-faint);         /* hairline dalam kartu = faint */
}
.pub-pkg__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* D1 — placeholder terang + ikon; --ink-500 (tidak pernah ada) dihapus total. */
.pub-pkg__media--empty {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  color: var(--ink-300);
}
.pub-pkg__initial {
  font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--fw-bold);
  line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--text-subtle);
}
/* satu-satunya absolute di kartu, dan HANYA di atas media (D2/D10) */
.pub-pkg__flag { position: absolute; left: var(--space-4); top: var(--space-4); z-index: 1; }
.pub-pkg__flag--inline { align-self: flex-start; margin-top: var(--space-2); }

/* ---- Body: satu kolom flex, satu gap antar-kelompok (D3) ---- */
.pub-pkg__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5);
}

/* tier 0 + 1, gap intra-kelompok = 1/3 gap antar-kelompok (D3) */
.pub-pkg__head { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.pub-pkg__kind {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-subtle);
}
.pub-pkg__name {                                        /* D4 + D8 */
  margin: 0;
  font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--fw-semibold);
  line-height: var(--lh-snug); color: var(--text-strong);
  text-wrap: pretty; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}

/* tier 3 */
.pub-pkg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; }
.pub-pkg__fact { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--text-xs); color: var(--text-muted); }
.pub-pkg__fact vs-icon { color: var(--text-subtle); flex: 0 0 auto; }
.pub-pkg__fact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-pkg__summary {
  margin: 0; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}

/* tier 2 — margin-top:auto = kunci tinggi-sama satu baris (D3) */
.pub-pkg__price {
  margin-top: auto; padding-top: var(--space-2);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2);
}
.pub-pkg__amount {
  font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display); line-height: var(--lh-tight);
  color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.pub-pkg__unit { font-size: var(--text-xs); color: var(--text-subtle); }

/* ---- Chip pilih studio (kontrak D12 lama tetap) ---- */
.pub-pkg__studio { display: flex; flex-direction: column; gap: var(--space-3); border-top: 1px solid var(--border-faint); padding-top: var(--space-4); }
.pub-studiochips { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pub-studiochip {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
  min-height: var(--field-h); padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  background: var(--surface-0); cursor: pointer; text-align: left;
  font-family: var(--font-body); transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.pub-studiochip:hover { border-color: var(--ink-400); }
.pub-studiochip.is-active, .pub-studiochip[aria-checked="true"] {
  border-color: var(--ink-900); background: var(--bg-inset); box-shadow: var(--shadow-focus);
}
.pub-studiochip__name  { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-strong); }
.pub-studiochip__price { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---- SPACE 17.07 — pemilih ruang + gerbang kapasitas PAX ----
   Wadah .pub-space + label mono; barisnya memakai kartu .pub-spacecard di
   .pub-space__grid (GUI/15/MULTI-ROOM, blocks.php pub_space_picker). Baris radio
   lama GUI/15/ROOM-SELECTOR (.pub-space__row/__dot/__cap) dihapus 18 Sep 2026
   (venue2) karena tidak dirender lagi. Harga sewa ruang tidak pernah tampil ke
   klien; kapasitas yang ditampilkan. */
.pub-space { display: flex; flex-direction: column; gap: var(--space-4); border-top: 1px solid var(--border-faint); padding-top: var(--space-4); }
.pub-space__label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-subtle);
}
.pub-space__list { display: flex; flex-direction: column; gap: var(--space-3); }

/* Notice kelebihan kapasitas. Nadanya PERINGATAN, bukan penolakan: klien tetap
   boleh lanjut (keputusan owner), jadi tidak ada tombol yang diabukan di sini. */
.pub-space__notice {
  margin: 0; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--tag-warning-border); border-radius: var(--radius-xs);
  background: var(--tag-warning-bg); color: var(--tag-warning-text);
  font-size: var(--text-2xs); line-height: var(--lh-normal);
}
/* Kartu terpilih yang kapasitasnya terlampaui diberi garis peringatan. Selektor lama
   menyasar `.pub-space__row` — bentuk BARIS yang sejak 17.07 hanya dipakai halaman tiket
   vendor — jadi aturannya tidak pernah punya efek di kartu paket. Sekarang menyasar
   `.pub-spacecard`, bentuk yang benar-benar dirender pemilih. */
.pub-space--over .pub-spacecard[aria-checked="true"] { border-color: var(--tag-warning-border); }

/* ---- SPACE 17.07 — CARD ruang untuk klien (keputusan owner 25 Agu 2026) ----
   Reproduksi unit design system katalog "Commerce & Marketplace → 01 Catalog"
   (kartu produk): media rasio 4/5 dengan fallback ikon, badan berisi nama +
   kicker mono, dan harga display yang didorong ke dasar kartu. Radius 14px,
   shadow-card → shadow-pop saat hover.

   Kenapa DUA keluarga hidup berdampingan: `.pub-space__row` (unit
   GUI/15/ROOM-SELECTOR) TETAP dipakai halaman tiket vendor — di sana yang perlu
   dibaca cepat adalah daftar harga bundling, bukan foto ruang. Yang klien lihat
   di kartu paket adalah `.pub-spacecard`. Jangan menyatukan keduanya: satu
   melayani mata yang memilih, satu melayani mata yang memverifikasi angka. */
.pub-space__grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
}
.pub-spacecard {
  display: flex; flex-direction: column; min-width: 0; padding: 0;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  overflow: hidden; background: var(--surface-0); box-shadow: var(--shadow-card);
  cursor: pointer; text-align: left; font-family: var(--font-body);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.pub-spacecard:hover { box-shadow: var(--shadow-pop); }
.pub-spacecard:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pub-spacecard[aria-checked="true"] { border-color: var(--ink-900); box-shadow: var(--shadow-pop); }

.pub-spacecard__media {
  position: relative; aspect-ratio: 4 / 5;
  background: var(--bg-inset) center / cover no-repeat;
  border-bottom: 1px solid var(--border-faint);
  display: flex; align-items: center; justify-content: center;
}
.pub-spacecard__media--empty { color: var(--ink-300); }
.pub-spacecard__flag { position: absolute; left: var(--space-3); top: var(--space-3); }

/* Penanda terpilih. Unit katalog tidak punya state ini (ia keranjang, bukan
   radio), jadi bentuknya dipinjam dari titik radio GUI/15/ROOM-SELECTOR —
   lingkaran ink dengan centang — supaya "pilih satu" tetap terbaca. */
.pub-spacecard__check {
  position: absolute; right: var(--space-3); top: var(--space-3);
  width: 24px; height: 24px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-0); border: 1.5px solid var(--ink-300);
  color: transparent;
}
.pub-spacecard[aria-checked="true"] .pub-spacecard__check {
  background: var(--ink-900); border-color: var(--ink-900); color: var(--vs-white);
}

.pub-spacecard__body {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); flex: 1 1 auto; min-width: 0;
}
.pub-spacecard__name {
  font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug);
  color: var(--text-strong); text-wrap: pretty; overflow-wrap: anywhere;
}
.pub-spacecard__kicker {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pub-spacecard__foot {
  margin-top: auto; padding-top: var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.pub-spacecard__pax {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-2xs); color: var(--text-muted);
}
.pub-spacecard__pax vs-icon { color: var(--text-subtle); flex: 0 0 auto; }
.pub-spacecard__price { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.pub-spacecard__amount {
  font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.pub-spacecard__pricenote {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-subtle);
}

/* ---- SPACE 17.07b — pemilih ruang DI DALAM overlay (keputusan owner 25 Agu 2026) ----
   Pemilih ruang pindah dari badan kartu paket ke bottom sheet .pub-sheet yang sudah
   dipakai "Filter & Urutkan" di /discover — komponen produksi dari unit design system
   GUI-OVERLAY-BOTTOM-SHEET (App Shell) / GUI-MOBILE-SHEET-BOTTOM (Mobile UI): bottom
   sheet di bawah 681px, dialog tengah 440px di atasnya.

   Kelas di bawah HANYA menambal jahitan antara dua komponen yang sudah ada. Blok
   `.pub-sheet` dan blok `@container page (min-width:681px)` miliknya TIDAK disentuh —
   /discover memakai blok yang sama, dan merapikannya di sini akan mengubah layar lain
   tanpa diminta. */

/* Grup pemilih dirender di dalam kartu (fallback tanpa JS) lalu DIPINDAH skrip ke sini.
   Garis pemisah atas hanya masuk akal saat ia bertetangga dengan harga paket; di dalam
   sheet ia jadi garis liar di bawah ringkasan paket. */
.pub-space--insheet { border-top: 0; padding-top: 0; gap: var(--space-4); }

/* Ringkasan paket di kepala badan sheet — penanda "kamu sedang memilih untuk paket ini". */
.pub-sheet__lede {
  margin: 0; display: flex; flex-direction: column; gap: var(--space-1);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-faint);
}
.pub-sheet__ledename {
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong);
  line-height: var(--lh-snug);
}
.pub-sheet__ledemeta {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-label-sm); color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

/* Kaki sheet varian ruang: total di kiri, tombol lanjut mengisi sisa lebar.
   `.pub-sheet__foot` dasar sudah memberi border-top + padding; di sini hanya
   perataan vertikalnya yang berbeda karena total punya dua baris. */
/* Spesifisitas dinaikkan DENGAN SENGAJA. `.pub-sheet__foot--space` dan
   `.pub-sheet__foot` sama-sama satu kelas dan menempel di elemen yang SAMA, jadi
   yang menang adalah yang tertulis belakangan — dan blok dasar berada jauh di
   bawah berkas ini. Tanpa `.pub-sheet` di depan, `gap` di sini tidak pernah
   berlaku dan kaki overlay diam-diam memakai jarak blok dasar.
   `flex-wrap` bukan hiasan: pada 320px, total (kolom tetap) + tombol berlabel
   panjang tidak muat sebaris dan tombolnya terpotong. */
.pub-sheet .pub-sheet__foot--space { align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.pub-sheet__total { display: flex; flex-direction: column; gap: 0; flex: 0 0 auto; }
.pub-sheet__foot--space .vs-btn { min-width: 180px; }
.pub-sheet__totallabel {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-subtle);
}
.pub-sheet__totalvalue {
  font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); color: var(--text-strong); font-variant-numeric: tabular-nums;
}

/* Di dalam sheet, kartu ruang boleh lebih lega daripada saat berdesakan di kartu paket. */
/* Kotak notice kapasitas: kalimat + satu tombol aksi. Sejak tarif kelebihan orang
   dihitung (25 Agu 2026) notice tidak lagi sekadar memperingatkan — ia menawarkan
   jalan keluar yang bisa DITEKAN, bukan disuruh dicari sendiri. */
.pub-space__noticebox { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.pub-space__upgradebtn { align-self: stretch; }

/* Form detail sesi untuk klien walk-in (PIN Universal). */
.pub-sheet__form { display: flex; flex-direction: column; gap: var(--space-4); }
.pub-sheet__formlede { margin: 0; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.pub-sheet__formrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 400px) { .pub-sheet__formrow { grid-template-columns: 1fr; } }

.pub-sheet--space .pub-space__grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.pub-sheet--space .pub-sheet__body { gap: var(--space-4); }

/* ---- Detail "apa yang termasuk" ---- */
.pub-pkg__detail { border-top: 1px solid var(--border-faint); }
.pub-pkg__detailbtn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--field-h-sm); padding-top: var(--space-4);
  cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-subtle);
}
.pub-pkg__detailbtn::-webkit-details-marker { display: none; }
.pub-pkg__detailbtn:hover { color: var(--text-strong); }
.pub-pkg__detailbtn:focus-visible { outline: none; border-radius: var(--radius-xs); box-shadow: var(--shadow-focus); color: var(--text-strong); }
.pub-pkg__detailbtn vs-icon { flex: 0 0 auto; transition: transform .12s ease; }
.pub-pkg__detail[open] .pub-pkg__detailbtn vs-icon { transform: rotate(180deg); }
.pub-pkg__detailbody { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-4); }

/* pane A — ledger key→value */
.pub-pkg__spec { margin: 0; display: flex; flex-direction: column; }
.pub-pkg__specrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border-faint);
}
.pub-pkg__specrow:last-child { border-bottom: 0; padding-bottom: 0; }
.pub-pkg__specrow dt { font-size: var(--text-xs); color: var(--text-subtle); }
.pub-pkg__specrow dd { margin: 0; min-width: 0; text-align: right; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-strong); overflow-wrap: anywhere; }

/* pane B — check list */
.pub-pkg__sections { display: flex; flex-direction: column; gap: var(--space-4); }
.pub-pkg__secgroup { display: flex; flex-direction: column; }
.pub-pkg__seclabel {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-subtle);
}
.pub-pkg__list { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.pub-pkg__list li {
  display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0;
  font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-body);
  overflow-wrap: anywhere;
}
.pub-pkg__check { color: var(--text-strong); display: inline-flex; flex: 0 0 auto; margin-top: var(--space-1); }
.pub-pkg__list--breakdown li { color: var(--text-muted); }

/* ---- CTA ---- */
.pub-pkg__cta { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---- Varian GALLERY: satu tempat saja (D9) ---- */
.pub-pkg--gallery .pub-pkg__media { aspect-ratio: 4 / 5; }
.pub-pkg--gallery .pub-pkg__body  { gap: var(--space-3); padding: var(--space-4); }
.pub-pkg--gallery .pub-pkg__name  { font-size: var(--text-sm); }
.pub-pkg--gallery .pub-pkg__amount{ font-size: var(--text-md); }

/* ---- Varian STACK: baris marketplace (media kiri, isi kanan) ---- */
.pub-plist--stack .pub-pkg { display: grid; grid-template-columns: calc(var(--container-sm) / 4) minmax(0, 1fr); }
.pub-plist--stack .pub-pkg--nomedia { grid-template-columns: minmax(0, 1fr); }
.pub-plist--stack .pub-pkg__media { aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--border-faint); }
.pub-plist--stack .pub-pkg__body  { padding: var(--space-5) var(--space-6); }
.pub-plist--stack .pub-pkg__name  { font-size: var(--text-lg); }

/* ===== CTA band — redesign cms3c (feedback owner: "kurang modern") =====
   Band kuning pucat full-width lama → KARTU ink membulat di dalam shell,
   glow kuning halus di sudut, CTA kuning. Pola promo-card app modern. */
.pub-band { background: transparent; border: 0; padding: var(--space-6) 0; }
.pub-band__inner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
  background: var(--bg-ink); border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-8);
}
.pub-band__inner::before {
  content: ''; position: absolute; top: -120px; right: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 247, 0, .16), transparent 70%);
  pointer-events: none;
}
.pub-band__title { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-bold); color: var(--text-on-dark); letter-spacing: var(--ls-tight); }
.pub-band__body { font-size: var(--text-sm); color: var(--text-on-dark-muted); max-width: 480px; }
.pub-band__inner > * { position: relative; }
/* CTA di atas ink: tombol primary (hitam) otomatis jadi kuning */
.pub-band .vs-btn--primary {
  background: var(--vs-yellow); color: var(--vs-black);
  border-color: var(--vs-yellow); box-shadow: 0 1px 0 var(--vs-yellow-shadow);
}
.pub-band .vs-btn--primary:hover { background: var(--brand-line); }
/* Varian ghost (band sekunder "Belum menemukan yang pas?") */
.pub-band--ghost .pub-band__inner { background: var(--surface-1); border: 1px solid var(--border-faint); }
.pub-band--ghost .pub-band__inner::before { display: none; }
.pub-band--ghost .pub-band__title { color: var(--text-strong); }
.pub-band--ghost .pub-band__body { color: var(--text-muted); }

/* ===== Footer — redesign minimalis (cms5, D40) =====
   Feedback owner: modern & minimalis, TANPA backlink dashboard admin.
   Satu baris brand + tautan; baris bawah mono kecil. */
.pub-footer { background: var(--bg-ink); color: var(--text-on-dark-muted); margin-top: auto; }
.pub-footer__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
  padding: var(--space-8) var(--gutter) var(--space-6);
}
.pub-footer__brand {
  font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--fw-bold);
  color: var(--text-on-dark); text-decoration: none; letter-spacing: var(--ls-tight);
}
.pub-footer__brand .plus { color: var(--brand); }
.pub-footer__nav { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.pub-footer__nav a {
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  color: var(--text-on-dark-muted); text-decoration: none; transition: color .12s ease;
}
.pub-footer__nav a:hover { color: var(--text-on-dark); }
.pub-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: var(--space-5) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-label-sm);
  text-transform: uppercase; color: rgba(255,255,255,.38);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
/* footer berada di LUAR container pub-main → pakai media viewport */
@media (max-width: 640px) {
  .pub-footer__row { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .pub-footer__nav { gap: var(--space-5) var(--space-6); }
}

/* ===== Layout halaman ===== */
.pub-page { min-height: 100vh; display: flex; flex-direction: column; }
.pub-main { flex: 1; display: flex; flex-direction: column; }

/* ===== Responsif (content-driven) ===== */
@media (max-width: 960px) {
  .pub-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* rules nav pindah ke blok ≤900 (cms5b: collapse lebih awal — nav sempit
     640–900 membuat label patah dua baris; keputusan owner: langsung hamburger). */
  .pub-hero__title { font-size: var(--text-h1); }
  .pub-hero__inner { padding: var(--space-10) 0 var(--space-9); }
  .pub-profile-hero__name { font-size: var(--text-h2); }
  .pub-footer__grid { grid-template-columns: 1fr; }
}

/* == PUB-PIN-MODAL:BEGIN =====================================================
   Popup PIN (keputusan owner 2026-08-20 — adopsi alur lama): akses direktori
   dari halaman mana pun lewat dialog, tanpa pindah halaman. Isi = partial
   access-forms.php yang sama dengan /access. Scrim mengikuti preseden
   .adm-scrim (rgba ink .44). Token-only. */
.pub-modal { position:fixed; inset:0; z-index:80; display:flex; align-items:flex-start; justify-content:center; padding:var(--space-7) var(--space-4); overflow-y:auto; }
.pub-modal[hidden] { display:none; }
.pub-modal__scrim { position:fixed; inset:0; background:rgba(5,5,5,.44); }
.pub-modal__card { position:relative; width:min(480px, 100%); background:var(--bg-card); border:1px solid var(--border-default); border-radius:var(--radius-lg); box-shadow:var(--shadow-pop); margin:auto 0; display:flex; flex-direction:column; max-height:calc(100dvh - 2 * var(--space-7)); }
.pub-modal__head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); padding:var(--space-6) var(--space-6) var(--space-4); border-bottom:1px solid var(--border-faint); }
/* gate2: kepala modal tanpa judul (judul dipegang tiap langkah). Tanpa aturan
   ini, justify-content:space-between pada satu anak tunggal menempelkan
   tombol tutup ke KIRI, dan garis bawah menyisakan strip kosong. */
.pub-modal__head--bare { justify-content:flex-end; border-bottom:0; padding-bottom:0; }
.pub-modal__title { font-family:var(--font-display); font-size:var(--text-h3); font-weight:var(--fw-bold); color:var(--text-strong); line-height:var(--lh-tight); }
.pub-modal__body { padding:var(--space-5) var(--space-6) var(--space-6); overflow-y:auto; display:flex; flex-direction:column; gap:var(--space-5); }
/* Kartu form di dalam popup tidak perlu border ganda — kartunya popup itu sendiri. */
.pub-modal__body .vs-card { border:0; box-shadow:none; padding:0; background:transparent; }
@media (max-width: 560px) {
  .pub-modal { padding:0; align-items:stretch; }
  .pub-modal__card { width:100%; max-height:100dvh; border-radius:0; border:0; }
}
/* == PUB-PIN-MODAL:END ======================================================= */

/* ============================================================================
   CMS Page Builder v2 (17.04.01) — blok baru & helper responsif.
   Transformasi konten (spec §4): columns 3→2 (≤1024) →1 (≤680); chip studio
   target sentuh ≥44px; visibility per device via kelas pub-hide-*.
   ============================================================================ */
.pub-blockwrap { min-width: 0; }
@media (min-width: 1025px) { .pub-hide-desktop { display: none !important; } }
@media (min-width: 681px) and (max-width: 1024px) { .pub-hide-tablet { display: none !important; } }
@media (max-width: 680px) { .pub-hide-mobile { display: none !important; } }

.pub-section--ink { background: var(--bg-ink); color: var(--text-on-dark); }
.pub-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.pub-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* cms7 (A5) — sel kolom ditempatkan EKSPLISIT dari field `col` tiap anak, bukan
   dari urutan auto-flow, supaya "Kolom 2" di editor benar-benar kolom 2 (dan
   kolom 1 boleh dibiarkan kosong). Untuk anak tanpa `col`, renderer mengisi
   (indeks mod jumlah kolom)+1 — hasil penempatannya IDENTIK dengan auto-flow,
   jadi halaman yang sudah terbit tidak bergeser. Saat grid diciutkan (3→2, →1)
   penempatan eksplisit DILEPAS kembali ke auto supaya urutan baca kembali
   mengikuti urutan dokumen, persis seperti sebelum cms7. */
.pub-cols__cell {
  min-width: 0; display: flex; flex-direction: column;
  grid-column: var(--pub-col, auto); grid-row: var(--pub-row, auto);
}
@media (max-width: 1024px) { .pub-cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-cols--3 > .pub-cols__cell { grid-column: auto; grid-row: auto; }
  .pub-plist--cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .pub-cols, .pub-cols--3 { grid-template-columns: minmax(0, 1fr); }
  .pub-cols > .pub-cols__cell { grid-column: auto; grid-row: auto; } }

/* ================= Rich text — tipografi editorial (2026-08-22) =================
   Blok teks dulu memakai satu ukuran body dan jarak seragam 12px antar elemen,
   jadi judul, paragraf, dan kutipan terbaca sebagai satu dinding rata. Yang
   ditambahkan di sini adalah RITME: ukuran baca sedikit lebih besar, jarak
   sebelum judul lebih lebar daripada jarak antar paragraf, dan sekumpulan gaya
   editorial (lead, drop cap, pull quote, catatan) yang bisa dipilih admin dari
   toolbar RTE. Daftar kelas di bawah HARUS tetap sinkron dengan allowlist
   BuilderService::sanitizeHtml — kelas di luar daftar itu dibuang saat save. */
.pub-richtext {
  font-size: 17px; line-height: 1.72; color: var(--text-body);
  display: flex; flex-direction: column; gap: var(--space-6);
}
/* Panjang baris nyaman baca. Satuan ch mengikuti ukuran font, jadi measure
   tetap benar kalau skala tipografi berubah — bukan angka px karangan.
   60ch di Geist ≈ 74 karakter tercetak per baris (ch = lebar glif "0", yang
   lebih sempit daripada rata-rata huruf kecil), pas di pita nyaman 65–75. */
.pub-richtext--measure { max-width: 60ch; }

.pub-richtext h2, .pub-richtext h3, .pub-richtext h4 {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); line-height: var(--lh-snug);
  color: var(--text-strong); margin: 0;
}
.pub-richtext h2 { font-size: var(--text-h3); }
.pub-richtext h3 { font-size: var(--text-h4); }
.pub-richtext h4 { font-size: var(--text-md); }
/* Margin menumpuk di ATAS gap flex — itu yang bikin judul punya napas lebih
   lebar daripada jarak antar paragraf tanpa mengubah struktur flex. */
.pub-richtext h2:not(:first-child) { margin-top: var(--space-7); }
.pub-richtext h3:not(:first-child), .pub-richtext h4:not(:first-child) { margin-top: var(--space-5); }

.pub-richtext p { margin: 0; }
.pub-richtext ul, .pub-richtext ol { margin: 0; padding-left: 1.35em; display: flex; flex-direction: column; gap: var(--space-3); }
.pub-richtext li { padding-left: var(--space-2); }
.pub-richtext li::marker { color: var(--text-muted); font-weight: var(--fw-semibold); }
.pub-richtext a { color: var(--text-strong); font-weight: var(--fw-semibold); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pub-richtext a:hover { text-decoration-color: var(--brand-line); }
.pub-richtext strong, .pub-richtext b { font-weight: var(--fw-bold); color: var(--text-strong); }
.pub-richtext u { text-underline-offset: 3px; }
.pub-richtext s { color: var(--text-muted); }
.pub-richtext sup, .pub-richtext sub { font-size: 0.68em; line-height: 0; }
/* Sorotan sengaja pakai brand-line, bukan --brand murni: kuning penuh di bawah
   teks ink gagal terbaca saat blok disorot beberapa baris sekaligus. */
.pub-richtext mark { background: var(--brand-line); color: var(--text-strong); padding: 0 .2em; border-radius: var(--radius-xs); }
.pub-richtext code {
  font-family: var(--font-mono); font-size: 0.88em; color: var(--text-strong);
  background: var(--surface-1); border: 1px solid var(--border-faint);
  border-radius: var(--radius-xs); padding: .12em .4em;
}
.pub-richtext pre {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6;
  background: var(--surface-1); border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm); padding: var(--space-5); overflow-x: auto;
}
.pub-richtext pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* Kutipan standar — garis brand di kiri, seperti sebelumnya. */
.pub-richtext blockquote {
  margin: 0; border-left: 3px solid var(--brand-line);
  padding-left: var(--space-5); color: var(--text-muted);
}
/* Pemisah bab: bukan garis penuh, tapi tiga titik di tengah — penanda jeda
   yang lazim di halaman editorial dan tidak memotong kolom jadi dua kartu. */
.pub-richtext hr {
  border: 0; margin: var(--space-4) 0; height: 1px; background: none;
  text-align: center; overflow: visible;
}
.pub-richtext hr::after {
  content: "• • •"; display: block; margin-top: -0.7em;
  color: var(--text-subtle); letter-spacing: .5em; font-size: var(--text-xs);
}

/* ---- Gaya editorial yang bisa dipilih admin dari toolbar RTE ---- */
/* Lead: paragraf pembuka. */
/* 20px, bukan --text-h4 (18px): pada body 17px selisih 1px tidak terbaca
   sebagai paragraf pembuka, hanya seperti baris yang kebetulan lebih tebal. */
.pub-richtext .is-lead {
  font-size: 20px; line-height: 1.5; color: var(--text-strong);
  font-weight: var(--fw-medium); letter-spacing: var(--ls-tight);
}
/* Drop cap. float dipakai supaya baris berikutnya membungkus huruf — inilah
   yang membedakannya dari sekadar huruf pertama yang dibesarkan. */
.pub-richtext .is-dropcap::first-letter {
  float: left; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: 3.1em; line-height: .82; padding: .06em .12em 0 0;
  color: var(--text-strong);
}
/* Pull quote: kutipan besar tanpa garis kiri, dipakai untuk memecah kolom. */
.pub-richtext .is-pull {
  border-left: 0; padding: var(--space-5) 0; text-align: center;
  border-top: 1px solid var(--border-faint); border-bottom: 1px solid var(--border-faint);
  font-family: var(--font-display); font-size: var(--text-h3); line-height: var(--lh-snug);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--text-strong);
}
/* Catatan kecil / disclaimer. */
.pub-richtext .is-note {
  font-size: var(--text-sm); color: var(--text-muted);
  border-left: 2px solid var(--border-default); padding-left: var(--space-4);
}
/* Eyebrow mono — label bab di atas judul. */
.pub-richtext .is-kicker {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted);
}
.pub-richtext .is-kicker + h2, .pub-richtext .is-kicker + h3 { margin-top: calc(var(--space-6) * -1 + var(--space-2)); }

/* ================= Halaman baca (statis) =================
   Cara Kerja, Tentang, S&K, Privasi, dan page CMS lain adalah halaman BACA,
   bukan katalog: pada shell 1200px judul dan paragraf menempel di tepi kiri
   dengan setengah layar kosong di kanan. Shell dipersempit dan kolom teks
   dipusatkan (feedback owner 2026-08-22). Halaman katalog/profil TIDAK ikut. */
.pub-main--read .pub-shell { max-width: var(--container-md); }
/* Satu lebar kolom untuk SEMUA elemen halaman baca. Sengaja rem, bukan ch:
   `ch` dihitung dari font-size elemen masing-masing, jadi kolom teks (17px) dan
   band CTA (16px) akan berhenti di titik yang berbeda dan tepinya tidak sejajar
   — persis cacat yang muncul saat keduanya sama-sama ditulis 60ch. */
.pub-main--read { --read-measure: 42rem; }
.pub-main--read .pub-richtext--measure {
  max-width: var(--read-measure); margin-left: auto; margin-right: auto;
}
/* Grid langkah menahan 4 kolom di shell yang lebih sempit: pada minimum 220px
   default, 4 kartu + gap melewati lebar 960 dan kartu keempat jatuh sendirian
   ke baris kedua — terbaca seperti langkah yang terpisah dari tiga lainnya. */
.pub-main--read .pub-steps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Ritme vertikal halaman baca. `.pub-section--flush` membuang SELURUH padding
   bawah — itu benar untuk beberapa blok teks berurutan (kalau tidak, jaraknya
   jadi 64+64), tapi salah di batas menuju blok berlatar lain: paragraf terakhir
   mendarat persis di garis warna, tanpa napas sedikit pun.
   Jadi: blok baca selalu punya jarak bawah, dan yang dibuang justru padding ATAS
   blok baca yang menempel pada blok baca sebelumnya. Hasilnya 40px antar blok
   teks, dan 40+64px saat pindah ke bagian berlatar. */
.pub-main--read .pub-section--flush { padding-bottom: var(--space-9); }
.pub-main--read .pub-section--flush + .pub-section--flush { padding-top: 0; }
/* Band CTA di halaman baca sejajar KOLOM BACA, bukan lebar shell. Pada 912px
   ia jadi pita 6:1 — lebar, pendek, dan lepas dari kolom teks di atasnya.
   Disamakan lebarnya dengan measure, ia terbaca sebagai kartu penutup artikel:
   proporsinya wajar dan tepi kirinya sejajar dengan paragraf. */
.pub-main--read .pub-band__inner {
  max-width: var(--read-measure); margin-left: auto; margin-right: auto;
  padding: var(--space-9) var(--space-8);
}
.pub-main--read .pub-band__body { max-width: none; }
/* Judul halaman ikut kolom baca. Hero statis memakai lebar shell penuh, jadi
   judulnya mulai di tepi kiri sementara paragraf di bawahnya terpusat — dua
   sumbu berbeda di satu halaman. Dibatasi HANYA pada blok pertama: kepala
   section lain (mis. "Empat langkah") berdiri di atas grid selebar shell dan
   harus tetap sejajar dengan grid itu, bukan dengan kolom teks. */
.pub-main--read > .pub-section:first-child .pub-section__titles {
  max-width: var(--read-measure); margin-left: auto; margin-right: auto;
}

/* Gambar & galeri (D16) */
.pub-figure { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.pub-figure img { width: 100%; max-width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border-faint); display: block; }
.pub-figure__cap { font-size: var(--text-xs); color: var(--text-muted); }
.pub-figure--empty {
  height: 220px; border-radius: var(--radius-md); background: var(--surface-1);
  border: 1.5px dashed var(--border-input); color: var(--text-subtle);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--text-xs); text-align: center; padding: var(--space-5);
}
.pub-gallery { display: grid; gap: var(--space-4); }
.pub-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pub-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pub-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pub-gallery img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-faint); }
@media (max-width: 680px) { .pub-gallery--3, .pub-gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pub-carousel { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); }
.pub-carousel__item { height: 300px; width: auto; max-width: 82vw; border-radius: var(--radius-sm); border: 1px solid var(--border-faint); scroll-snap-align: start; object-fit: cover; flex: 0 0 auto; }

/* FAQ */
.pub-faq { display: flex; flex-direction: column; max-width: 680px; }
.pub-faq__item { border-bottom: 1px solid var(--border-faint); }
.pub-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: var(--fw-semibold); color: var(--text-strong);
}
.pub-faq__q::-webkit-details-marker { display: none; }
.pub-faq__q svg { transition: transform .16s ease; flex: 0 0 auto; color: var(--text-muted); }
.pub-faq__item[open] .pub-faq__q svg { transform: rotate(180deg); }
.pub-faq__a { margin: 0 0 var(--space-5); font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--text-body); max-width: 600px; }

/* Badge & kontak profil (D8) */
.pub-badgerow { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pub-linkbar { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Chip pilih-studio (D12) — radiogroup, target sentuh ≥44px */
.pub-pkg__studio { display: flex; flex-direction: column; gap: var(--space-3); border-top: 1px solid var(--border-faint); padding-top: var(--space-4); }
.pub-studiochips { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pub-studiochip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-height: 44px; padding: 7px 14px;
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  background: var(--surface-0); cursor: pointer; text-align: left;
  font-family: var(--font-body); transition: all .12s ease;
}
.pub-studiochip:hover { border-color: var(--ink-400); }
.pub-studiochip.is-active, .pub-studiochip[aria-checked="true"] {
  border-color: var(--ink-900); background: var(--bg-inset); box-shadow: var(--shadow-focus);
}
.pub-studiochip__name { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--text-strong); }
.pub-studiochip__price { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pub-pkg__list--breakdown li { color: var(--text-muted); }

/* ============================================================================
   CMS 17.04.02 (cms2) — pricelist varian, header profil Behance, mobile parity.
   ============================================================================ */

/* -- Pricelist layouts (D22): grid | stack | gallery -- */

/* -- Header profil ala Behance (D26) -- */
.pub-profile-hero { position: relative; }
.pub-profile-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(5, 5, 5, var(--hero-ov, 0));
}
/* Mode color/gradient/image: teks tetap putih (kontrak D26 — overlay menjaga kontras). */
.pub-profile-hero--color, .pub-profile-hero--gradient, .pub-profile-hero--image { color: var(--text-on-dark); }

/* -- Mobile parity via container queries (D27) --
   Container `page` = .pub-main (publik) DAN .pb-canvas__page (canvas editor):
   toggle mobile di editor kini memicu rules yang SAMA dengan viewport asli.
   container-type TIDAK dipasang di body (containment merusak position:fixed). */
.pub-main { container-type: inline-size; container-name: page; }

@container page (max-width: 680px) {
  .pub-section { padding: var(--space-9) 0; }
  .pub-section__title { font-size: var(--text-h4); }
  .pub-section__head { margin-bottom: var(--space-6); }
  .pub-richtext { font-size: var(--text-md); gap: var(--space-5); }
  .pub-richtext h2 { font-size: var(--text-h4); }
  .pub-richtext .is-lead { font-size: var(--text-md); }
  .pub-richtext .is-pull { font-size: var(--text-h4); }
  .pub-richtext .is-dropcap::first-letter { font-size: 2.6em; }
  .pub-hero__inner { padding: var(--space-9) 0 var(--space-8); }
  .pub-hero__title { font-size: var(--text-h2); }
  /* hero profil: kolom, avatar 72 di atas, identitas rapat — anti bertumpuk/oversize */
  .pub-profile-hero__inner {
    flex-direction: column; align-items: flex-start; gap: var(--space-5);
    padding: var(--space-8) 0 var(--space-7);
  }
  .pub-profile-hero__ava { width: 72px; height: 72px; font-size: var(--text-h3); }
  .pub-profile-hero__name { font-size: var(--text-h3); gap: var(--space-3); }
  .pub-profile-hero__name .vs-tag { font-size: 10.5px; }
  .pub-profile-hero__summary { font-size: var(--text-sm); }
  .pub-profile-facts {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6);
    width: 100%; border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--space-5);
  }
  /* pricelist */
  .pub-plist, .pub-plist--cols1, .pub-plist--cols2, .pub-plist--cols3 { grid-template-columns: minmax(0, 1fr); }
  .pub-plist--gallery, .pub-plist--gallery.pub-plist--cols1, .pub-plist--gallery.pub-plist--cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-plist--stack .pub-pkg { grid-template-columns: calc(var(--container-sm) / 6) minmax(0, 1fr); }
  /* venue2: kartu tanpa media tetap satu kolom; tanpa ini isi kartu jatuh ke
     kolom media 96px dan baris fakta ruang + tombol WhatsApp terpotong. */
  .pub-plist--stack .pub-pkg--nomedia { grid-template-columns: minmax(0, 1fr); }
  .pub-plist--stack .pub-pkg__body { padding: var(--space-4); }
  .pub-pkg__body { padding: var(--space-5); }
  .pub-pkg--gallery .pub-pkg__body { padding: var(--space-4); gap: var(--space-3); }
  .pub-studiochips { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
  .pub-studiochip { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  /* galeri & kolom */
  .pub-gallery--3, .pub-gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-cols, .pub-cols--3 { grid-template-columns: minmax(0, 1fr); }
  .pub-cols > .pub-cols__cell { grid-column: auto; grid-row: auto; }   /* cms7 (A5) */
  .pub-band__inner { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .pub-band__inner .vs-btn { width: 100%; justify-content: center; }
}

/* ============================================================================
   CMS 17.04.03 (cms3) — mobile "App-first Marketplace" (D29–D35).
   Desktop TIDAK berubah: semua rule di media ≤640 (nav, di luar container
   pub-main) atau @container page ≤680 (konten halaman).
   ============================================================================ */

/* -- D35: fluid guards global area publik -- */
.pub-main img, .pub-main svg, .pub-main video { max-width: 100%; }
.pub-main .vs-mono, .pub-main code { overflow-wrap: anywhere; }

/* -- D32: nav mobile/tablet = overlay editorial rata kanan --
   Elemen khusus overlay (head/kicker/close) disembunyikan di desktop.
   cms5b (keputusan owner): breakpoint collapse dinaikkan 640 → 900 — begitu
   nav mulai sesak/patah baris, langsung hamburger seperti mobile. */
.pub-nav__head, .pub-nav__kicker, .pub-nav__close { display: none; }
@media (max-width: 900px) {
  .pub-navtoggle { display: inline-flex; margin-left: auto; }
  .pub-nav {
    display: none;
    position: fixed; inset: 0; z-index: 90;
    background: var(--bg-ink); color: var(--text-on-dark);
    display: none; flex-direction: column; align-items: flex-end;
    padding: 0 var(--gutter) calc(var(--space-7) + env(safe-area-inset-bottom));
    border-bottom: 0; overflow-y: auto;
  }
  .pub-nav.is-open { display: flex; }
  body.has-nav-open { overflow: hidden; }
  .pub-nav__head {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: var(--space-5) 0;
  }
  .pub-nav__brand {
    font-family: var(--font-display); font-weight: var(--fw-bold);
    font-size: 15px; letter-spacing: var(--ls-tight); color: var(--text-on-dark);
  }
  .pub-nav__brand .plus { color: var(--vs-yellow); }
  .pub-nav__close { display: inline-flex; border-color: rgba(255,255,255,.25); color: var(--text-on-dark); background: transparent; }
  .pub-nav__kicker {
    display: block; margin-top: auto;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-label);
    text-transform: uppercase; color: var(--text-on-dark-muted);
    padding-bottom: var(--space-4); text-align: right;
  }
  /* Rapatkan jarak baris (feedback owner 2026-08-22): overlay mewarisi
     gap: var(--space-6) dari aturan dasar .pub-nav DAN menambah padding 10px
     per item — total ~100px antar baris, jauh terlalu longgar. Gap dinolkan;
     ritme diatur padding saja. */
  .pub-nav.is-open { gap: 0; }
  .pub-nav a:not(.pub-nav__cta) {
    padding: var(--space-3) 0; border-bottom: 0; width: auto; text-align: right;
    font-family: var(--font-display); font-weight: var(--fw-bold);
    font-size: clamp(28px, 8cqw, 38px); letter-spacing: var(--ls-tight);
    line-height: 1.1; color: var(--text-on-dark); text-decoration: none;
    opacity: 0; transform: translateX(12px);
  }
  .pub-nav.is-open a:not(.pub-nav__cta) {
    animation: pub-nav-in .28s ease forwards;
    animation-delay: calc(var(--nav-i, 0) * 60ms);
  }
  .pub-nav a[aria-current="page"] { color: var(--vs-yellow); }
  @keyframes pub-nav-in { to { opacity: 1; transform: translateX(0); } }
  @media (prefers-reduced-motion: reduce) {
    .pub-nav a:not(.pub-nav__cta) { opacity: 1; transform: none; }
    .pub-nav.is-open a:not(.pub-nav__cta) { animation: none; }
  }
}

@container page (max-width: 680px) {
  /* -- D31: home guest = portal onboarding full-screen --
     Chrome di atas hero ≈ announcement (~40) + header (~84). */
  .pub-hero {
    min-height: calc(100svh - 124px);
    display: flex; flex-direction: column;
  }
  .pub-hero .pub-shell { flex: 1; display: flex; }
  .pub-hero__inner {
    flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--space-8) 0 calc(var(--space-8) + env(safe-area-inset-bottom));
    gap: var(--space-5);
  }
  .pub-hero__title { font-size: clamp(34px, 10cqw, 44px); }
  .pub-hero__body { font-size: var(--text-sm); }
  .pub-hero__actions { flex-direction: column; width: 100%; gap: var(--space-3); margin-top: var(--space-4); }
  .pub-hero__actions .vs-btn { width: 100%; justify-content: center; height: 52px; }

  /* -- D30: direktori ala marketplace -- */
  .pub-dirhead { padding: var(--space-6) 0 0; }
  .pub-dirhead__title { font-size: 22px !important; }
  .pub-dirhead__sub { display: none; }
  .pub-dirbody { padding-top: var(--space-4) !important; }
  /* cms3c (feedback "frame in frame kuno"): TANPA strip latar — sticky bar
     menyatu dgn latar halaman (edge-to-edge via margin negatif gutter), dan
     tombol Cari MASUK ke dalam pill (absolute kanan). Satu elemen, satu frame. */
  .pub-searchrow {
    position: sticky; top: 0; z-index: 20;
    background: var(--surface-0);
    margin: 0 calc(-1 * var(--gutter));
    padding: var(--space-3) var(--gutter);
    flex-wrap: nowrap !important; gap: 0 !important;
  }
  .pub-searchrow .adm-search { min-width: 0 !important; flex: 1; padding-right: 78px; }
  .pub-searchrow .vs-selwrap { min-width: 0 !important; }
  /* Kapsul Cari DI DALAM pill: 36px (inset 5px dari pill 46px), radius pill.
     Satu-satunya definisi ukuran tombol ini (jangan tambah rule lain). */
  .pub-searchrow .vs-btn {
    position: absolute; right: calc(var(--gutter) + 5px); top: 50%;
    transform: translateY(-50%);
    height: 36px !important; min-height: 0; padding: 0 16px;
    font-size: 12.5px; border-radius: var(--radius-pill);
  }
  .pub-chiprow--scroll {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) var(--space-3);
    scrollbar-width: none;
  }
  .pub-chiprow--scroll::-webkit-scrollbar { display: none; }
  .pub-chiprow--scroll .pub-chip { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }

  /* -- D33: kartu creative compact 2 kolom -- */
  .pub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .pub-ccard { border-radius: var(--radius-sm); }
  .pub-ccard__cover { aspect-ratio: 4 / 5; height: auto; }
  .pub-ccard__body { padding: 10px; gap: 4px; }
  .pub-ccard__name {
    font-size: 13px; gap: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pub-ccard__summary, .pub-ccard__tags { display: none; }
  .pub-ccard__price { font-size: 12px; }
  .pub-ccard__count { display: none; }
  .pub-ccard__cat .vs-tag { font-size: 10px; padding: 2px 7px; }
}

/* -- D34 pendamping: pemisah aman utk layar sangat sempit -- */
@container page (max-width: 360px) {
  .pub-plist--gallery { grid-template-columns: minmax(0, 1fr); }
  .pub-plist--stack .pub-pkg { grid-template-columns: minmax(0, 1fr); }  /* added */
  .pub-plist--stack .pub-pkg__media { aspect-ratio: 4 / 3; border-right: 0; border-bottom: 1px solid var(--border-faint); }
  .pub-searchrow .vs-selwrap { display: none; }
}

/* -- D30 fix: pill search publik berdiri sendiri (kelas .adm-search milik
   admin.css yang TIDAK dimuat halaman publik — definisikan di sini). -- */
.pub-searchrow .adm-search {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  background: var(--surface-0); padding: 0 14px; height: 44px;
  flex: 1; min-width: 240px;
}
.pub-searchrow .adm-search:focus-within { border-color: var(--border-strong); box-shadow: var(--shadow-focus); }
.pub-searchrow .adm-search input {
  border: 0; outline: none; flex: 1; min-width: 0; background: transparent;
  font-size: 14px; font-family: var(--font-body); color: var(--text-strong);
}
.pub-searchrow .adm-search input::placeholder { color: var(--text-subtle); }
@container page (max-width: 680px) {
  .pub-searchrow .adm-search { border-radius: var(--radius-pill); height: 46px !important; }
  /* marketplace: satu baris = pill + tombol Cari; sort disembunyikan
     (urutan default sudah kurasi; sort tetap tersedia di desktop).
     Ukuran tombol Cari HANYA diatur satu tempat (blok absolute di atas) —
     dua definisi sempat bentrok: 46px = setinggi pill → blob menabrak
     border (bug QA owner cms3d). */
  .pub-searchrow .vs-selwrap { display: none; }
}

/* ============================================================================
   CMS 17.04.03 D36 (cms4) — kontrol marketplace direktori: filterbar + bottom
   sheet Filter & Urutkan + tag filter aktif.
   ============================================================================ */
.pub-filterbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pub-filterbtn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--border-input); border-radius: var(--radius-pill);
  background: var(--surface-0); cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: var(--fw-semibold);
  color: var(--text-strong); transition: all .12s ease;
}
.pub-filterbtn:hover { border-color: var(--ink-400); }
.pub-filterbtn__count {
  min-width: 18px; height: 18px; border-radius: var(--radius-pill);
  background: var(--vs-yellow); color: var(--vs-black);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: var(--fw-bold);
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.pub-ftag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 11px;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  background: var(--bg-inset); color: var(--text-body);
  font-size: 12px; font-weight: var(--fw-medium); text-decoration: none;
}
.pub-ftag:hover { border-color: var(--ink-400); color: var(--text-strong); }

/* Bottom sheet (mobile) / dialog tengah (desktop ≥681) */
.pub-sheet { position: fixed; inset: 0; z-index: 85; }
.pub-sheet[hidden] { display: none; }
.pub-sheet__scrim { position: absolute; inset: 0; background: rgba(5, 5, 5, .44); opacity: 0; transition: opacity .18s ease; }
.pub-sheet.is-open .pub-sheet__scrim { opacity: 1; }
body.has-sheet-open { overflow: hidden; }
.pub-sheet__card {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--surface-0); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 0 0 max(var(--space-5), env(safe-area-inset-bottom));
  max-height: 82dvh; display: flex; flex-direction: column;
  transform: translateY(24px); opacity: 0; transition: transform .2s ease-out, opacity .18s ease;
}
.pub-sheet.is-open .pub-sheet__card { transform: translateY(0); opacity: 1; }
.pub-sheet__grip { width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--ink-200); margin: 10px auto 2px; flex: 0 0 auto; }
.pub-sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-6) var(--space-3);
}
.pub-sheet__title { font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--fw-bold); color: var(--text-strong); }
.pub-sheet__body { overflow-y: auto; padding: 0 var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.pub-sheet__label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-label-sm);
  text-transform: uppercase; color: var(--text-subtle); margin-top: var(--space-4);
}
.pub-sheet__opts { display: flex; flex-direction: column; }
.pub-sheet__opt {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 13px 2px; border-bottom: 1px solid var(--border-faint);
  font-size: 14px; color: var(--text-body); cursor: pointer;
}
.pub-sheet__opt input { position: absolute; opacity: 0; pointer-events: none; }
.pub-sheet__opt span { flex: 1; }
/* centang: sasar elemen vs-icon (bukan svg — bisa berada di balik custom element) */
.pub-sheet__opt vs-icon { opacity: 0; color: var(--text-strong); display: inline-flex; }
.pub-sheet__opt:has(input:checked) { color: var(--text-strong); font-weight: var(--fw-semibold); }
.pub-sheet__opt:has(input:checked) vs-icon { opacity: 1; }
.pub-sheet__chips { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pub-sheet__chip { position: relative; cursor: pointer; }
.pub-sheet__chip input { position: absolute; opacity: 0; pointer-events: none; }
.pub-sheet__chip span {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px;
  border: 1px solid var(--border-input); border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: var(--fw-medium); color: var(--text-body);
  transition: all .12s ease;
}
.pub-sheet__chip:has(input:checked) span {
  background: var(--ink-900); border-color: var(--ink-900);
  color: var(--primary-contrast); font-weight: var(--fw-semibold);
}
.pub-sheet__foot {
  display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-6) 0;
  border-top: 1px solid var(--border-faint);
}
@container page (min-width: 681px) {
  /* desktop: sheet menjadi dialog tengah */
  .pub-sheet__card {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -46%); width: min(440px, 92vw);
    border-radius: var(--radius-lg); padding-bottom: var(--space-5);
    max-height: 80vh;
  }
  .pub-sheet.is-open .pub-sheet__card { transform: translate(-50%, -50%); }
  .pub-sheet__grip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pub-sheet__card, .pub-sheet__scrim { transition: none; }
}

/* ==========================================================================
   GERBANG PIN DUA LANGKAH (gate2, 2026-08-22)
   Memulihkan alur asli artifact 17.01.02: LANGKAH 1 = PIN saja, LANGKAH 2 =
   detail sesi di balik satu tombol + jalan kembali. Token-only; chip memakai
   nada .vs-tag--<tone> dari vs-ui.css. Breakpoint 680 = yang sudah dipakai.
   ========================================================================== */
.pub-gate2 { display: flex; flex-direction: column; }
.pub-gate2__pane { display: flex; flex-direction: column; gap: var(--space-5); }
.pub-gate2__pane[hidden] { display: none; }
.pub-gate2__head { display: flex; flex-direction: column; gap: var(--space-2); }
.pub-gate2__title {
  font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--fw-bold);
  color: var(--text-strong); line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  margin: 0;
}
.pub-gate2__lede { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-muted); margin: 0; }
.pub-gate2__back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-3); padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-muted);
}
.pub-gate2__back:hover { color: var(--text-strong); }
.pub-gate2__form { display: flex; flex-direction: column; gap: var(--space-5); }

/* Pemisah "atau" — garis + label di tengah. */
.pub-gate2__or { display: flex; align-items: center; gap: var(--space-4); }
.pub-gate2__or::before, .pub-gate2__or::after {
  content: ""; flex: 1; height: 1px; background: var(--border-faint);
}
.pub-gate2__or span {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-label-sm);
  text-transform: uppercase; color: var(--text-subtle);
}

/* Kartu "Belum punya PIN?" — pintu ke LANGKAH 2, diisi kuning brand
   (keputusan owner 2026-08-22) karena inilah jalur mayoritas pengunjung baru. */
.pub-gate2__alt {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border: 1px solid var(--brand-line);
  border-radius: var(--radius-md); background: var(--brand);
}
.pub-gate2__alt-title { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--brand-ink); }
.pub-gate2__alt-body { font-size: var(--text-sm); color: var(--brand-ink); opacity: .72; margin: 0 0 var(--space-2); }



/* Chip jenis sesi — nada warna diwarisi dari .vs-tag--<tone>. */
.pub-gate2__chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pub-gate2__chip {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 38px; padding: 0 var(--space-5);
  border: 1px solid; border-radius: var(--radius-pill);
  font-family: inherit; font-size: var(--text-xs); font-weight: var(--fw-medium);
  cursor: pointer; transition: box-shadow .12s ease, transform .12s ease;
}
.pub-gate2__chip:hover { box-shadow: var(--shadow-card); }
.pub-gate2__chip[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--ink-900);
  font-weight: var(--fw-semibold);
}
/* Tanpa JS chip tidak berfungsi — input teks di bawahnya tetap jalan.
   JS menandai root dengan data-gate-js lalu menyembunyikan input itu
   sampai "Lainnya" dipilih. */
.pub-gate2[data-gate-js] .pub-gate2__other { display: none; }
.pub-gate2[data-gate-js] .pub-gate2__other[data-gate-other-open] { display: block; margin-top: var(--space-4); }

.pub-gate2__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.pub-gate2__check {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--text-sm); color: var(--text-body); cursor: pointer;
}
.pub-gate2__check input { margin-top: 3px; }

/* Input PIN — enam digit, monospaced & renggang agar mudah dibaca. */
.pub-gate2 .pub-pininput {
  font-family: var(--font-mono); font-size: var(--text-h3); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label); text-align: center; font-variant-numeric: tabular-nums;
}

@media (max-width: 680px) {
  .pub-gate2__title { font-size: var(--text-h3); }
  .pub-gate2__row2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pub-gate2__chip { transition: none; }
}
/* Chip jenis sesi yang belum dipilih saat submit (gate2). */
.pub-gate2__chip.is-invalid { box-shadow: 0 0 0 1px var(--tag-danger-text); }
/* Gerbang PIN tanpa JavaScript: kedua langkah HARUS tetap terjangkau. Server
   tidak lagi mengirim atribut `hidden` — penyembunyian hanya berlaku setelah JS
   menandai root dengan data-gate-js (audit 2026-08-22). */
.pub-gate2[data-gate-js] .pub-gate2__pane.is-hidden { display: none; }

/* Bar masa akses — varian pengumuman saat sesi PIN aktif. */
/* Bar masa akses sengaja LEBIH BESAR dari bar pengumuman biasa (feedback owner
   2026-08-22). Ini satu-satunya tempat klien melihat sisa waktu direktorinya;
   pada ukuran micro-label 11px ia terbaca seperti footnote dan terlewat sampai
   sesi keburu habis. Ukuran hanya dinaikkan di varian --access; .pub-announce
   umum tidak ikut berubah. */
.pub-announce--access {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-4); flex-wrap: wrap;
  font-size: var(--text-sm); font-weight: var(--fw-medium);
  color: var(--text-on-dark); padding: 12px var(--gutter);
}
.pub-announce--access strong {
  font-variant-numeric: tabular-nums; color: var(--brand);
  font-size: var(--text-h4); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}
.pub-announce--access .pub-announce__cta { font-size: var(--text-xs); padding: var(--space-2) var(--space-5); }
@media (max-width: 680px) {
  .pub-announce--access { font-size: var(--text-xs); gap: var(--space-3); padding: 10px var(--gutter); }
  .pub-announce--access strong { font-size: var(--text-sm); }
}
.pub-announce.is-ended { background: var(--tag-danger-text); }
.pub-announce.is-ended strong { color: var(--text-on-dark); }
.pub-announce__cta {
  border: 1px solid currentColor; background: none; color: inherit; cursor: pointer;
  font-family: inherit; font-size: var(--text-2xs); font-weight: var(--fw-semibold);
  padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill);
}
.pub-announce__cta[hidden] { display: none; }
.pub-announce__cta { text-decoration: none; display: inline-flex; align-items: center; }

/* Latar hero yang diatur admin (2026-08-22). Scrim dipisah ke ::before supaya
   ia menggelapkan LATAR saja — teks hero tetap penuh kontras di atasnya.
   Meniru anatomi pub-profile-hero (D26) agar dua permukaan tetap satu bahasa. */
.pub-hero--color, .pub-hero--gradient, .pub-hero--image { position: relative; }
.pub-hero--color::before, .pub-hero--gradient::before, .pub-hero--image::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(5, 5, 5, var(--hero-ov, 0));
}
.pub-hero--color > *, .pub-hero--gradient > *, .pub-hero--image > * { position: relative; z-index: 1; }

/* Jarak napas sebelum footer (feedback owner 2026-08-22).
   Blok terakhir tiap halaman dulu menempel ke footer: .pub-main tidak punya
   padding bawah sama sekali, dan padding blok terakhir tidak konsisten
   (0px di halaman teks, 20px di About, 64px di Discover).
   HANYA hero & section ink yang dikecualikan: keduanya benar-benar full-bleed
   sampai tepi, jadi memberi jarak di sana menyisipkan strip latar halaman di
   antara dua area gelap. CTA band TIDAK dikecualikan — ia kartu di dalam shell
   (cms3c), jadi ia tetap butuh napas seperti blok lain. */
.pub-section--flush { padding-bottom: 0; }

/* Blok TERAKHIR selalu mendapat jarak, menimpa --flush. Dulu setiap blok teks
   menulis style="padding-bottom:0" INLINE — inline selalu menang atas
   stylesheet, jadi tidak ada aturan CSS yang bisa memperbaikinya. Nilainya kini
   dipegang kelas, sehingga cascade bisa mengaturnya. */
.pub-main > :last-child:not(.pub-hero):not(.pub-section--ink) {
  padding-bottom: var(--space-11);
}
@media (max-width: 680px) {
  .pub-main > :last-child:not(.pub-hero):not(.pub-section--ink) {
    padding-bottom: var(--space-9);
  }
}

/* ================= REG — Registrasi creative /signup (17.05.01) =================
   Arah desain "Formulir Pendampingan": satu pertanyaan jelas per waktu, dengan
   kalimat yang menjelaskan kenapa ia ditanya. Field sengaja --field-h-lg (52px):
   ini isian penting yang diisi orang baru, bukan filter yang dipakai berulang.

   KEJUJURAN TOKEN (audit 17.05.03, keputusan pemilik 23 Agu 2026: kerjakan
   SEMUA perubahan §2B). Utang token dilunasi — `.reg-lede` naik ke `--text-lg`
   dan leadingnya ke `--lh-relaxed`. Satu pengecualian tersisa, dan ia memang
   tidak punya padanan:
     · letter-spacing .18em/.12em pada kode tiket — skala token berhenti di
       0.14em; memaksakannya merapatkan kode yang justru harus dibaca huruf
       demi huruf.
   Geometri stepper punya properti lokalnya sendiri (lihat `.reg-steps`). */
/* Judul /signup. Nilainya SAMA dengan gaya inline yang digantikannya (nol
   perubahan piksel); yang berubah hanya tempatnya, sehingga ia bisa disesuaikan
   per lebar layar tanpa menyentuh markup lagi. */
.reg-title { font-size: var(--text-h1); }
.reg-lede { font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--text-body); max-width: var(--read-measure); margin: var(--space-4) 0 0; }

/* --- Pemilih kategori (C1) --- */
.reg-pick { max-width: var(--read-measure); margin: 0 auto; }
.reg-pick__title { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--text-strong); margin: 0; }
.reg-pick__note { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-3) 0 var(--space-7); line-height: var(--lh-relaxed); }
.reg-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
/* Kotak kartunya milik `.vs-card` + `--interactive` (bg, border, radius,
   bayangan diam, dan angkat saat hover). Sebelumnya blok ini menyalin
   `.vs-card` lalu hanya memberi bayangan SAAT hover — sembilan kartu bidang
   duduk rata tanpa elevasi dalam keadaan diam, dan halaman terbaca datar.
   Yang tersisa di sini: tata letak dua kolom (panah tetap di kanan, tinggi
   kartu tidak melompat antar bidang), padding lokal yang lebih lega dari
   `--p-sm`, dan cincin fokus yang TIDAK disediakan `.vs-card`. */
.reg-cat {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--space-3) var(--space-4); padding: var(--space-5) var(--space-6);
  min-height: 68px; text-decoration: none; color: inherit;
}
.reg-cat:focus-visible { outline: none; border-color: var(--border-strong); box-shadow: var(--shadow-focus); }
/* Penempatan grid ditulis EKSPLISIT. Dengan auto-placement, ikon panah
   (anak ketiga) merebut kolom pertama baris pertama dan label terdorong ke
   kanan — kartu jadi terbaca rata kanan. */
.reg-cat__label { grid-column: 1; grid-row: 1; font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.reg-cat__meta { grid-column: 1; grid-row: 2; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.reg-cat__go { grid-column: 2; grid-row: 1 / -1; justify-self: end; align-self: center; color: var(--text-muted); display: inline-flex; }
.reg-cat:hover .reg-cat__go { color: var(--text-strong); }

.reg-other {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  flex-wrap: wrap; margin-top: var(--space-7); padding: var(--space-6);
  background: var(--surface-1); border: 1px solid var(--border-faint); border-radius: var(--radius-md);
}
.reg-other__body { display: flex; flex-direction: column; gap: var(--space-2); }
.reg-other__title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.reg-other__note { font-size: var(--text-sm); color: var(--text-muted); }

.reg-how { max-width: var(--read-measure); margin: 0 auto; }
.reg-how__title { font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--fw-bold); color: var(--text-strong); margin: 0 0 var(--space-5); }
.reg-how__list { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--text-body); }
.reg-how__list strong { color: var(--text-strong); }

/* --- Kerangka form (C2/C3) --- */
.reg-wrap { max-width: var(--read-measure); margin: 0 auto; }
/* Progress stepper. Nomor + rel penghubung, bukan deretan titik: pendaftar
   perlu tahu ada berapa langkah, sudah sampai mana, dan mana yang sudah
   selesai. Nomor datang dari CSS counter supaya markup tetap <ol><li>. */
.reg-steps { margin-bottom: var(--space-7); }
.reg-steps ol {
  list-style: none; margin: 0 auto; padding: 0; counter-reset: regstep;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  width: 100%; max-width: var(--read-measure);
}
/* Stepper dipusatkan (permintaan owner 2026-08-22): label langkah rata tengah
   di bawah lingkarannya, dan seluruh rel duduk di tengah kolom baca.

   Dulu pemusatan ini ditulis di blok TERPISAH di atas definisi aslinya —
   dan karena kedua blok punya spesifisitas sama, `left: 0` yang datang
   belakangan menang sementara `transform: translateX(-50%)` dari blok atas
   tetap bertahan: lingkarannya justru tergeser 13px KELUAR tepi kiri kolom.
   Sekarang semuanya satu blok, dan geometrinya diturunkan dari satu angka.

   Empat nilai di bawah adalah GEOMETRI, bukan jarak tata letak: tidak ada
   token untuk "diameter lingkaran stepper" atau "tebal rel". Ia disimpan
   sebagai properti lokal supaya tetap ditulis SEKALI. */
.reg-steps {
  --regdot: 26px;    /* diameter lingkaran nomor */
  --regrail: 2px;    /* tebal rel penghubung */
  --regbrd: 1.5px;   /* tepi lingkaran */
  --reggap: 10px;    /* jarak lingkaran ke labelnya */
}
.reg-steps li {
  counter-increment: regstep; position: relative; text-align: center;
  padding: calc(var(--regdot) + var(--reggap)) var(--space-2) 0; min-width: 0;
  font-size: var(--text-xs); color: var(--text-muted); line-height: 1.35;
}
.reg-steps li::before {
  content: counter(regstep);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: var(--regdot); height: var(--regdot);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-0); border: var(--regbrd) solid var(--border-input);
  color: var(--text-muted); font-size: var(--text-2xs); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
/* Rel menghubungkan titik tengah satu lingkaran ke lingkaran berikutnya: dari
   tepi kanan lingkaran sampai tepi kiri lingkaran berikutnya. Menariknya dari
   0 akan membuat rel menembus lingkarannya. */
.reg-steps li::after {
  content: ""; position: absolute;
  top: calc((var(--regdot) - var(--regrail)) / 2);
  left: calc(50% + var(--regdot) / 2 + var(--space-2));
  right: calc(-50% + var(--regdot) / 2 + var(--space-2));
  height: var(--regrail); background: var(--border-input); border-radius: 2px;
  transition: background .16s ease;
}
.reg-steps li:last-child::after { display: none; }
.reg-steps li.is-done::before {
  content: "\2713"; background: var(--ink-900); border-color: var(--ink-900);
  color: var(--text-on-dark); font-size: var(--text-xs);
}
.reg-steps li.is-done::after { background: var(--ink-900); }
.reg-steps li[aria-current="step"] { color: var(--text-strong); font-weight: var(--fw-semibold); }
.reg-steps li[aria-current="step"]::before {
  background: var(--brand); border-color: var(--brand-line); color: var(--text-strong);
}
.reg-steps__count { display: none; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .reg-steps li::before, .reg-steps li::after { transition: none; }
}

/* Kepala satu baris: konteks bidang tetap ada, tapi tidak lagi merebut
   perhatian dari judul langkah yang sedang dikerjakan. */
.reg-head {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  margin: var(--space-5) 0 var(--space-7);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-faint);
}
.reg-head__ctx {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400;
  color: var(--text-muted); margin: 0; letter-spacing: 0; line-height: 1.4;
}
.reg-head__ctx strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.reg-head__back { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-muted); text-decoration: none; }
.reg-head__back:hover { color: var(--text-strong); }
.reg-head__back:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }

.reg-form { display: flex; flex-direction: column; gap: var(--space-8); }
.reg-step { display: flex; flex-direction: column; gap: var(--space-5); }
.reg-step[hidden] { display: none; }
/* Judul langkah kini elemen paling besar di layar — inilah yang sedang
   dikerjakan orangnya, bukan nama bidang yang sudah dipilih tadi. */
.reg-step__title { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--text-strong); margin: 0; }
.reg-step__lede { font-size: var(--text-md); color: var(--text-muted); line-height: var(--lh-relaxed); margin: 0; }
.reg-step__note { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--lh-relaxed); margin: 0; padding: var(--space-4) var(--space-5); background: var(--surface-1); border-radius: var(--radius-sm); }
.reg-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.reg-f { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-3); }
.reg-f--half { grid-column: span 1; }
.reg-f[hidden] { display: none; }
.reg-f--group { border: 0; margin: 0; padding: 0; min-width: 0; }
.reg-f--group legend { padding: 0; }
/* Bantuan duduk di antara LABEL dan input: ia menjelaskan kenapa pertanyaannya
   ada, jadi harus terbaca sebelum orang mengetik — tapi tidak boleh mendahului
   pertanyaannya sendiri. Urutan DOM sudah benar; cukup rapikan jaraknya. */
.reg-help { margin-top: calc(var(--space-1) * -1); }
.reg-note { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--lh-relaxed); margin: 0; padding: var(--space-4) var(--space-5); background: var(--surface-1); border-radius: var(--radius-sm); }
.reg-consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-body); line-height: var(--lh-relaxed); cursor: pointer; }
/* Aturan `.reg-consent input { width:17px; height:17px }` DIBUANG: sejak
   persetujuan memakai `.vs-check`, input aslinya `position:absolute; opacity:0`
   — memberinya ukuran adalah instruksi untuk sesuatu yang tak pernah terlihat. */

/* cms6 — definisi .reg-chips/.reg-chip/.reg-card DINAIKKAN ke vs-ui.css sebagai
   kontrak bersama. Sebabnya: drawer Sunting Paket memakai pola chip yang sama
   tapi berjalan di layouts/admin.php, yang TIDAK memuat public.css — menyalin
   markupnya tanpa memindahkan gayanya menghasilkan chip tanpa gaya. Dinaikkan,
   bukan diduplikasi, supaya tidak ada dua definisi yang bisa drift. */

.reg-recap { display: flex; flex-direction: column; gap: 0; margin: 0; }
.reg-recap__row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-faint); align-items: baseline; }
.reg-recap dt { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }
/* `pre-line` menjaga paragraf yang diketik pendaftar tetap berparagraf. Tanpa
   ini jawaban tiga alinea di layar Tinjau menyatu jadi satu blok panjang —
   dan halaman tiket yang memakai kelas sama ikut sembuh. */
.reg-recap dd { font-size: var(--text-sm); color: var(--text-strong); margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
/* Bentuk tombolnya milik `.vs-btn--ghost --sm`. Yang tersisa di sini hanya
   perataannya: induk `.reg-recap__row` memakai `align-items: baseline`, jadi
   tombol setinggi 36px akan tergantung kalau tidak dipusatkan sendiri. */
.reg-recap__edit { align-self: center; flex: 0 0 auto; }

.reg-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); }
.reg-actions [data-reg-back] { margin-right: auto; }

/* --- Tiket (C6) --- */
.reg-ticket { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; max-width: var(--read-measure); margin: 0 auto; }
.reg-ticket__code {
  font-family: var(--font-display); font-size: var(--text-display-lg); font-weight: var(--fw-bold);
  letter-spacing: .18em; line-height: var(--lh-tight); color: var(--text-on-dark);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.reg-ticket__ref { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-on-dark-muted); }
.reg-ticket__note { font-size: var(--text-sm); color: var(--text-on-dark-muted); line-height: var(--lh-relaxed); margin: 0; max-width: 46ch; }
.reg-next, .reg-answers { max-width: var(--read-measure); margin: var(--space-9) auto 0; }
.reg-next__title { font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--fw-bold); color: var(--text-strong); margin: 0 0 var(--space-5); }
.reg-next__list { margin: 0 0 var(--space-6); padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--text-body); }
.reg-next__list strong { color: var(--text-strong); }
.reg-next__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.reg-next__hint { font-size: var(--text-xs); color: var(--text-muted); margin: var(--space-5) 0 0; }

@container page (max-width: 680px) {
  /* Judul /signup sejajar dengan `.reg-step__title` di layar sempit. Nilai
     inline di markup KEBAL terhadap container query — itulah alasan ia
     dipindah ke kelas lebih dulu. */
  .reg-title { font-size: var(--text-h3); }
  .reg-fields { grid-template-columns: minmax(0, 1fr); }
  .reg-f--half { grid-column: 1 / -1; }
  .reg-step__title { font-size: var(--text-h3); }
  /* Label langkah dipotong, BUKAN dikecilkan — teks 11px di deretan titik
     tidak terbaca, dan hitungan "1 dari 4" memberi info yang sama. */
  /* Label langkah dipotong, BUKAN dikecilkan — teks 11px di bawah lingkaran
     tidak terbaca. Lingkaran + rel tetap ada sebagai peta posisi, dan
     hitungan "Langkah 1 dari 4" memberi info yang sama dengan label. */
  .reg-steps li span { display: none; }
  .reg-steps li { padding: var(--regdot) var(--space-1) 0; }
  .reg-steps__count { display: block; margin-top: var(--space-4); text-align: center; }
  .reg-recap__row { grid-template-columns: minmax(0, 1fr) auto; }
  .reg-recap dt { grid-column: 1 / -1; }
  /* Kode tiket 56px + tracking melewati 375px. */
  .reg-ticket__code { font-size: var(--text-h1); letter-spacing: .12em; }
  .reg-cats { grid-template-columns: minmax(0, 1fr); }
  .reg-other { flex-direction: column; align-items: flex-start; }
  .reg-other .vs-btn { width: 100%; justify-content: center; }
}
@media (max-width: 680px) {
  /* Bar aksi menempel bawah supaya "Lanjut" selalu terjangkau ibu jari. */
  .reg-actions {
    position: sticky; bottom: 0; z-index: 20;
    background: var(--surface-0); border-top: 1px solid var(--border-faint);
    margin: 0 calc(var(--gutter) * -1);
    padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom));
  }
  .reg-actions .vs-btn { flex: 1; justify-content: center; }
}
@media (max-height: 480px) {
  /* Lanskap ponsel: bar lengket memakan setengah layar — dilepas. */
  .reg-actions { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .reg-cat, .reg-chip, .reg-card { transition: none; }
}

/* Tombol sekunder di hero ink. `.vs-btn--secondary` dirancang untuk latar
   terang — di atas ink ia jadi kotak putih pekat yang justru lebih menarik
   perhatian daripada tombol brand di sebelahnya. Di sini ia dijadikan garis
   tipis di atas gelap: hadir, terbaca, tapi jelas nomor dua. */
.pub-hero .pub-hero__alt {
  background: transparent; color: var(--text-on-dark);
  border-color: rgba(255, 255, 255, .38); box-shadow: none;
}
.pub-hero .pub-hero__alt:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .62); }
.pub-hero .pub-hero__alt:focus-visible { box-shadow: var(--shadow-focus-brand); border-color: var(--brand); }

/* About: figur V dan petir menjelaskan peran Connect+ secara visual,
   sementara judul tetap dibaca sebagai satu hero statis dari CMS. */
.pub-about-hero { padding-bottom: var(--space-8); }
.pub-about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(340px, .72fr);
  align-items: center;
  gap: clamp(var(--space-6), 7vw, var(--space-12));
}
.pub-about-hero__art {
  margin: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg);
  background: var(--ink-050);
}
.pub-about-hero__art img { display: block; width: 100%; height: auto; }
.pub-about-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr);
  gap: var(--space-7);
  align-items: center;
}
.pub-about-story__art {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-0);
}
.pub-about-story__art img { display: block; width: 100%; height: auto; }

@media (max-width: 700px) {
  .pub-about-hero { padding-bottom: var(--space-6); }
  .pub-about-hero__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .pub-about-hero__art { padding: var(--space-2); }
  .pub-about-story { grid-template-columns: 1fr; gap: var(--space-5); }
  .pub-about-story__art { width: min(100%, 360px); justify-self: center; }
}

/* Isian teks panjang di form publik. Default `.vs-textarea` 88px ≈ tiga baris —
   terlalu sempit untuk pertanyaan yang meminta beberapa kalimat, dan orang jadi
   menggulir di dalam kotak untuk membaca tulisannya sendiri. */
.reg-ta { min-height: 148px; resize: vertical; line-height: var(--lh-relaxed); }
.reg-count {
  align-self: flex-end; font-size: var(--text-xs); color: var(--text-muted);
  font-variant-numeric: tabular-nums; margin-top: calc(var(--space-2) * -1);
}
/* `--accent-orange` (#F97316) hanya 2,80:1 di atas putih — di bawah AA untuk
   teks 13px, dan modul ini sendiri sudah menuliskan larangan itu di
   registration-form.php. `--tag-warning-text` (#B54708) = 5,43:1. */
.reg-count.is-near { color: var(--tag-warning-text); font-weight: var(--fw-semibold); }
@container page (max-width: 680px) {
  .reg-ta { min-height: 132px; }
}

/* Header publik lengket menutupi bagian atas elemen yang digulirkan ke posisi.
   scroll-margin memberi jarak aman supaya judul langkah tidak tersembunyi di
   baliknya saat pindah langkah. */
.reg-wrap { scroll-margin-top: 88px; }
.reg-f { scroll-margin-top: 96px; }

/* ===== REG refresh: adopsi indikator DS pada kontrol publik =====
   Kontrol di form ini sebelumnya campur: chip dan kartu digambar sendiri,
   sementara checkbox masih kotak bawaan sistem operasi — satu-satunya kontrol
   yang tidak berbicara bahasa visual aplikasi. */
.reg-consent.vs-check { align-items: flex-start; }
.reg-consent .vs-check__box { margin-top: 2px; }
/* Kalimat persetujuan adalah PARAGRAF, bukan label kontrol: `.vs-check__label`
   default 14px/600 membuatnya berteriak. */
.reg-consent__text {
  font-size: var(--text-sm); font-weight: 400; color: var(--text-body);
  line-height: var(--lh-relaxed);
}
/* Chip & kartu pilihan: indikator DS di dalam label. `:has()` dipertahankan
   untuk gaya kontainernya, tapi keterpilihan tidak lagi BERGANTUNG padanya. */
.reg-card.vs-radio { align-items: flex-start; }
.reg-card .vs-radio__circle { margin-top: 2px; }
.reg-opt__text { min-width: 0; }

/* ===== REG — jalan keluar, penanda error, dan navigasi balik (17.05.02 P6/P7) ===== */

/* Formulir yang salah disusun (tidak menanyakan nama/nomor) bukan kesalahan
   pendaftar — spanduknya berwarna peringatan, bukan bahaya, dan ia membawa
   pintu keluar alih-alih menyuruh orang memperbaiki sesuatu yang tak ada di
   layarnya. */
.reg-formissue { margin-bottom: var(--space-6); }
.reg-formissue__wa { align-self: flex-start; margin-top: var(--space-3); }

/* Kesalahan pada grup radio/chips menempel di BATAS grupnya, bukan di tiap
   chip: menandai chip akan bertabrakan dengan `:has(input:checked)` dan
   membuat pilihan yang benar justru tampak merah. */
.reg-f--group.reg-f--error {
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--accent-red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--tag-danger-bg);
}
.reg-f--group.reg-f--error > legend { color: var(--accent-red); }
/* Fokus mendarat di FIELDSET (tabindex="-1" dipasang JS saat tombol "Ubah"
   ditekan). `:focus-visible` tidak cocok di sini — fokusnya programatik, dan
   peramban tidak menganggapnya "terlihat". Cincinnya dipinjamkan ke legend
   supaya penandanya jatuh di judul grup, bukan mengelilingi seluruh blok. */
.reg-f--group:focus { outline: none; }
.reg-f--group:focus > legend {
  box-shadow: var(--shadow-focus); border-radius: var(--radius-xs);
  padding: 2px var(--space-2); margin-left: calc(var(--space-2) * -1);
}

/* Garis merah HARUS bertahan saat kolomnya disentuh. Tanpa blok ini, aturan
   fokus/hover DS menimpa `border-color` dan penanda satu-satunya yang
   menghubungkan pesan error ke kolomnya menghilang tepat ketika orang
   mengklik kolom itu untuk memperbaikinya. */
.reg-f .vs-input--error:hover, .reg-f .vs-input--error:focus,
.reg-f .vs-sel--error:hover, .reg-f .vs-sel--error:focus,
.reg-f .vs-inputwrap--error:hover, .reg-f .vs-inputwrap--error:focus-within {
  border-color: var(--accent-red); border-width: 1.5px;
}

/* "Kembali ke ringkasan" muncul hanya setelah orang meninggalkan layar tinjau
   lewat tombol "Ubah". Ia berdiri di sisi kiri bersama "Kembali". */
.reg-actions__return { margin-right: auto; }
.reg-actions [data-reg-back]:not([hidden]) ~ .reg-actions__return { margin-right: 0; }

@media (max-width: 680px) {
  /* Tiga tombol tidak muat sebaris di bar lengket 375px. "Kembali ke
     ringkasan" naik ke barisnya sendiri, bukan menyempitkan "Lanjut". */
  .reg-actions { flex-wrap: wrap; }
  .reg-actions__return { flex: 1 0 100%; order: -1; margin-right: 0; }
}

/* ===== cms6 — blok Tab Paket =====
   Strip tabnya SUDAH punya gaya di vs-ui.css (GUI/08/TABS-UNDERLINE /
   GUI/02/SEGMENTED-CONTROL, kelas .vs-tabs/.vs-tab) dan vs-ui.css dimuat layout
   publik — jadi tidak ada komponen baru dibuat di sini, hanya lem tata letak.

   KONTRAK TANPA-JS (D49): panel TIDAK PERNAH disembunyikan oleh CSS statis.
   Tanpa JavaScript semua panel tampil bertumpuk dengan headingnya masing-masing,
   dan itu keadaan yang benar — bukan keadaan rusak. JS-lah yang menyembunyikan
   panel non-aktif (atribut `hidden`) setelah ia berhasil berjalan. */
.pub-tabs__panel { padding-block: var(--space-6); }
.pub-tabs__heading {
  font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--fw-bold);
  color: var(--text-strong); margin: 0 0 var(--space-5);
}
/* Begitu JS menyalakan mode tab, heading per-panel jadi pengulangan label yang
   sudah tampil di strip — disembunyikan SECARA VISUAL saja, tetap terbaca
   pembaca layar lewat aria-labelledby. */
.pub-tabs.is-enhanced .pub-tabs__heading {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pub-tabs .vs-tabs { overflow-x: auto; scrollbar-width: none; }
.pub-tabs .vs-tabs::-webkit-scrollbar { display: none; }
.pub-tabs .vs-tab { white-space: nowrap; flex: 0 0 auto; }
.pub-tabs .vs-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }

/* ===== REGDEMO — contoh halaman creative (/signup + /signup/contoh/*) =====
   Halaman contoh punya satu pekerjaan yang tidak dimiliki halaman lain:
   MENGAKU. Profil di bawahnya dirender mesin yang sama persis dengan profil
   sungguhan (pub_profile_default_blocks), jadi satu-satunya pembeda antara
   contoh dan halaman asli adalah chrome di sekelilingnya. Semua aturan di blok
   ini melayani pengakuan itu — dan tidak satu pun menyentuh permukaan profil,
   supaya yang dilihat pendaftar tetap jujur.

   Kotak, tombol, dan pil datang dari DS (.vs-card--interactive, .vs-btn,
   .vs-tag); yang ditulis di sini hanya tata letak dan warna spanduk. */

/* --- Spanduk lengket. `top` = tinggi .pub-header yang juga lengket (64px,
       tidak berubah di breakpoint mana pun); tanpa offset itu spanduk melayang
       di bawah header dan menutupi baris pertama konten. z-index di bawah
       header (50) supaya menu mobile tetap menang. --- */
.regdemo-bar {
  position: sticky; top: 64px; z-index: 30;
  background: var(--tag-warning-bg); border-bottom: 1px solid var(--tag-warning-border);
}
.regdemo-bar__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-3);
}
.regdemo-bar__label { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.regdemo-bar__text { font-size: var(--text-sm); color: var(--text-body); }

/* --- Kepala halaman contoh --- */
.regdemo-intro { max-width: var(--read-measure, 42rem); }
.regdemo-intro__title {
  font-family: var(--font-display); font-size: var(--text-h1); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); color: var(--text-strong); margin: var(--space-3) 0 0;
}
.regdemo-intro__lede {
  font-size: var(--text-lg); line-height: var(--lh-relaxed);
  color: var(--text-body); margin: var(--space-4) 0 0;
}
.regdemo-intro__note {
  font-size: var(--text-sm); line-height: var(--lh-relaxed);
  color: var(--text-muted); margin: var(--space-3) 0 0;
}

/* --- Pemindah jenis. Bukan `.vs-tabs`: strip itu memindahkan panel di halaman
       yang sama, sementara tiga tautan ini memuat tiga halaman berbeda —
       memakai rupa tab akan menjanjikan perpindahan yang tidak terjadi. --- */
.regdemo-switch { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.regdemo-switch__item {
  display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--fw-medium);
  color: var(--text-body); text-decoration: none; background: var(--surface-0);
}
.regdemo-switch__item:hover { border-color: var(--border-strong); color: var(--text-strong); }
.regdemo-switch__item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.regdemo-switch__item.is-active {
  background: var(--ink-900); border-color: var(--ink-900); color: var(--text-on-dark);
}

/* --- Penanda tahap (01 kartu direktori, 02 halaman profil) --- */
.regdemo-stage {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4);
  align-items: start; max-width: var(--read-measure, 42rem); margin-bottom: var(--space-6);
}
/* Nomor tahap disurutkan lewat UKURAN, bukan lewat warna pucat: `--text-subtle`
   (#777D88) berhenti di 4,14:1 terhadap putih — lolos untuk teks besar, gagal
   AA untuk 18px. Nomor kecil berwarna `--text-muted` tetap mundur secara visual
   tanpa membayar kontras. */
.regdemo-stage__num {
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-muted);
  font-variant-numeric: tabular-nums; line-height: var(--lh-relaxed);
}
.regdemo-stage__body { display: flex; flex-direction: column; gap: var(--space-2); }
.regdemo-stage__title {
  font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--fw-bold);
  color: var(--text-strong); margin: 0;
}
.regdemo-stage__note { font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--text-muted); margin: 0; }

/* Kartu direktori berdiri sendiri di sini, sementara aslinya hidup di grid
   `.pub-grid`. Lebarnya dijepit ke ukuran satu sel grid itu — dibiarkan
   melebar, kartu contoh akan terlihat sebagai komponen yang berbeda. */
.regdemo-cardwrap { display: grid; grid-template-columns: minmax(0, 280px); }

/* --- Penutup. Sengaja BUKAN `.pub-band`: blok cta-whatsapp profil tepat di
       atasnya sudah memakai band, dan dua pita berurutan terbaca seperti
       halaman yang mengulang dirinya. --- */
.regdemo-end {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  flex-wrap: wrap; padding: var(--space-7);
  background: var(--surface-1); border: 1px solid var(--border-faint); border-radius: var(--radius-md);
}
.regdemo-end__body { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--read-measure, 42rem); }
.regdemo-end__title {
  font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--fw-bold);
  color: var(--text-strong); margin: 0;
}
.regdemo-end__note { font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--text-body); margin: 0; }
.regdemo-end__quotas { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); font-size: var(--text-sm); color: var(--text-muted); }
.regdemo-end__quota strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.regdemo-end__others { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); font-size: var(--text-sm); }
.regdemo-end__othersLabel { color: var(--text-muted); }
.regdemo-end__others a { color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; }

/* --- Pemilih contoh di /signup --- */
.regdemo-pick { max-width: var(--read-measure); margin: 0 auto; }
.regdemo-pick__title {
  font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); color: var(--text-strong); margin: 0;
}
.regdemo-pick__note { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-3) 0 var(--space-6); line-height: var(--lh-relaxed); }
.regdemo-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.regdemo-picks__item {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5) var(--space-6); text-decoration: none; color: inherit;
}
.regdemo-picks__item:focus-visible { outline: none; border-color: var(--border-strong); box-shadow: var(--shadow-focus); }
.regdemo-picks__label { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
/* Pil jatah paket tidak boleh melar selebar kartu — kolom flex meregangkan
   anaknya secara bawaan, dan `.vs-tag` yang selebar kartu berhenti terbaca
   sebagai pil. */
.regdemo-picks__quota { align-self: flex-start; }
.regdemo-picks__for { font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--text-muted); }
.regdemo-picks__go {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong);
}
.regdemo-picks__item:hover .regdemo-picks__go { gap: var(--space-3); }

/* --- Tombol WhatsApp dalam mode contoh. Rupanya TIDAK diubah — justru itu yang
       sedang ditunjukkan — hanya kursornya yang mengaku tombol ini tidak
       mengirim apa-apa. Penahan kliknya ada di markup (<button aria-disabled>),
       bukan di sini. --- */
.pub-cta--demo { cursor: not-allowed; }

@container page (max-width: 680px) {
  /* Spanduk tetap satu baris: teksnya boleh membungkus di dalam kolomnya
     sendiri, tapi tombolnya TIDAK turun ke baris kedua — spanduk lengket yang
     setinggi 100px memakan seperlima layar 844px sepanjang halaman. */
  .regdemo-bar__label { flex: 1 1 0; }
  .regdemo-bar__more { display: none; }
  .regdemo-intro__title { font-size: var(--text-h2); }
  .regdemo-intro__lede { font-size: var(--text-md); }
  .regdemo-end { padding: var(--space-6); }
  .regdemo-end .vs-btn { width: 100%; justify-content: center; }
}

/* ---- SPACE 17.07c — kabar gagal-catat handoff (25 Agu 2026) ----
   Muncul hanya ketika POST /handoff GAGAL sementara tab WhatsApp sudah telanjur
   terbuka. Ia harus terlihat tanpa merebut fokus: klien sedang berpindah ke
   aplikasi lain, dan yang dibutuhkannya adalah kabar yang masih ada saat ia
   kembali — bukan dialog yang menghalangi. */
.pub-handofffail {
  position: fixed; left: var(--space-5); right: var(--space-5); bottom: var(--space-5);
  z-index: 95; max-width: 520px; margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--tag-warning-border); border-radius: var(--radius-sm);
  background: var(--tag-warning-bg); color: var(--tag-warning-text);
  font-size: var(--text-xs); line-height: var(--lh-normal);
  box-shadow: var(--shadow-pop);
}

/* ---- Pager direktori (25 Agu 2026) ----
   Sebelumnya direktori dipotong diam-diam di 100 profil tanpa jalan ke sisanya. */
.pub-pager {
  display: flex; align-items: center; justify-content: center; gap: var(--space-5);
  margin-top: var(--space-8); flex-wrap: wrap;
}
.pub-pager__pos {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-subtle);
}

/* ============================================================
   ubf1 (17.04.06 U6) — Pricelist v3: katalog · menu · compare + sheet detail.
   Semua nilai dari token; rules responsif = @container page (paritas canvas).
   ============================================================ */

/* --- Katalog marketplace: thumbnail 1:1 dominan, harga bold, 2 kolom ≤680. --- */
.pub-plist--katalog { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pub-pkg--katalog .pub-pkg__media { aspect-ratio: 1 / 1; }
.pub-pkg--katalog .pub-pkg__body { gap: var(--space-2); padding: var(--space-4); }
.pub-pkg--katalog .pub-pkg__name {
  font-size: var(--text-sm); line-height: var(--lh-snug);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pub-pkg--katalog .pub-pkg__kind { font-size: var(--text-2xs); }
.pub-pkg--katalog .pub-pkg__amount { font-size: var(--text-md); font-weight: var(--fw-bold); }
.pub-pkg--tappable { cursor: pointer; }

/* --- Tombol "Lihat detail" pembuka sheet (varian button dari detailbtn summary). --- */
.pub-pkg__detailbtn--sheet {
  width: 100%; background: none; border: 0; border-top: 1px solid var(--border-faint);
  text-align: left; padding-left: 0; padding-right: 0; padding-bottom: 0;
}

/* --- Sheet detail paket. --- */
.pub-sheet--pkgdetail .pub-sheet__body { gap: var(--space-4); }
.pub-detailsheet__media {
  border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-faint);
}
.pub-detailsheet__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

/* --- Menu (daftar harga leader-dots). --- */
.pub-menu { display: flex; flex-direction: column; max-width: var(--container-md); }
.pub-menu__row {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-4) 0; border-bottom: 1px solid var(--border-faint);
}
.pub-menu__row[role="button"] { cursor: pointer; }
.pub-menu__row[role="button"]:hover .pub-menu__name { color: var(--text-strong); }
.pub-menu__row:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
.pub-menu__main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 0 1 auto; }
.pub-menu__name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: var(--lh-snug); }
.pub-menu__sub { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--lh-normal); }
.pub-menu__dots { flex: 1 1 auto; min-width: var(--space-6); border-bottom: 1px dotted var(--ink-300); transform: translateY(-4px); }
.pub-menu__price {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pub-menu__cta { margin-top: var(--space-6); }

/* --- Compare: tabel di wrapper scroll-x sendiri (halaman tak pernah scroll-x). --- */
/* venue2: position relative = blok penampung span .vs-visually-hidden (absolute)
   di sel ✓/—. Tanpa itu span lolos dari scroll-x wadah dan melebarkan halaman HP. */
.pub-compare { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pub-compare__table { border-collapse: collapse; width: 100%; min-width: calc(var(--container-sm) + var(--space-8)); }
.pub-compare__table th, .pub-compare__table td { border-bottom: 1px solid var(--border-faint); vertical-align: top; }
.pub-compare__feat {
  text-align: left; padding: var(--space-4) var(--space-4) var(--space-4) 0;
  font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-muted); min-width: 160px;
}
.pub-compare__col { text-align: center; padding: var(--space-4); min-width: 150px; }
.pub-compare__col .pub-compare__name { display: block; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.pub-compare__col .pub-compare__price {
  display: block; margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--fw-bold);
  color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.pub-compare__cell { text-align: center; padding: var(--space-4); }
.pub-compare__col--hot { background: var(--bg-inset); }
.pub-compare__no { color: var(--text-subtle); }

/* --- Utilitas a11y: teks untuk pembaca layar saja. --- */
.vs-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Mobile (container page ≤680): katalog 2 kolom pola kartu compact D33. --- */
@container page (max-width: 680px) {
  .pub-plist--katalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .pub-pkg--katalog .pub-pkg__body { padding: var(--space-3); }
  .pub-pkg--katalog .pub-pkg__amount { font-size: var(--text-sm); }
  .pub-menu__price { font-size: var(--text-xs); }
  .pub-menu__cta .vs-btn { width: 100%; }
  .pub-compare__feat { min-width: 130px; }
  .pub-compare__col { min-width: 128px; }
}

/* ============================================================
   ubf2 (17.04.06 U7) — blok dekoratif/visual baru.
   ============================================================ */

/* --- Testimoni. --- */
.pub-testi { display: grid; gap: var(--space-5); }
.pub-testi--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pub-testi--carousel {
  grid-auto-flow: column; grid-auto-columns: min(72cqw, 340px);
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-3);
}
.pub-testi--carousel .pub-testi__item { scroll-snap-align: start; }
.pub-testi__item {
  margin: 0; display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--bg-card); border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.pub-testi--single .pub-testi__item { border: 0; background: transparent; padding: 0; max-width: var(--container-md); }
.pub-testi__quote { margin: 0; font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--text-strong); }
.pub-testi--single .pub-testi__quote { font-size: var(--text-h4); font-weight: var(--fw-medium); line-height: var(--lh-normal); }
.pub-testi__quote::before { content: "\201C"; color: var(--text-subtle); }
.pub-testi__quote::after { content: "\201D"; color: var(--text-subtle); }
.pub-testi__who { display: flex; align-items: center; gap: var(--space-3); }
.pub-testi__ava {
  width: 36px; height: 36px; border-radius: var(--radius-pill); flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-ink); color: var(--text-on-dark);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
}
.pub-testi__meta { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.pub-testi__name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.pub-testi__role { font-size: var(--text-xs); color: var(--text-muted); }

/* --- Statistik. --- */
.pub-stats { margin: 0; display: grid; gap: var(--space-6); }
.pub-stats--row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.pub-stats--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pub-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.pub-stat__value {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-h2);
  font-weight: var(--fw-bold); color: var(--text-strong); font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
}
.pub-stat__label { font-size: var(--text-xs); color: var(--text-muted); }

/* --- Logo strip. --- */
.pub-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-7) var(--space-8); }
.pub-logos img { max-height: 36px; width: auto; max-width: 140px; object-fit: contain; }
.pub-logos--gray img { filter: grayscale(1); opacity: .72; transition: filter .15s ease, opacity .15s ease; }
@media (hover: hover) { .pub-logos--gray img:hover { filter: none; opacity: 1; } }

/* --- Banner. --- */
.pub-banner {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}
.pub-banner--s { min-height: 180px; }
.pub-banner--m { min-height: 280px; }
.pub-banner--l { min-height: 420px; }
.pub-banner__scrim { position: absolute; inset: 0; background: rgba(5, 5, 5, var(--hero-ov, 0)); }
.pub-banner__inner {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-3); padding: var(--space-7);
}
.pub-banner__title { font-size: var(--text-h3); font-weight: var(--fw-bold); color: var(--text-on-dark); line-height: var(--lh-snug); }
.pub-banner__body { margin: 0; font-size: var(--text-sm); color: var(--text-on-dark-muted); line-height: var(--lh-normal); max-width: var(--container-sm); }
.pub-banner__inner .vs-btn { margin-top: var(--space-2); }

/* --- Daftar fitur. --- */
.pub-feats { display: grid; gap: var(--space-5) var(--space-7); }
.pub-feats--cols1 { grid-template-columns: minmax(0, 1fr); max-width: var(--container-md); }
.pub-feats--cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pub-feats--cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pub-feat { display: flex; gap: var(--space-4); align-items: flex-start; }
.pub-feat__icon {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-ink);
}
.pub-feat__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.pub-feat__title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.pub-feat__desc { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--lh-normal); }

/* --- Video lite-embed. --- */
.pub-video {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); width: 100%; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-ink); color: var(--text-on-dark); text-decoration: none;
}
.pub-video--r16-9 { aspect-ratio: 16 / 9; }
.pub-video--r9-16 { aspect-ratio: 9 / 16; max-width: 420px; margin: 0 auto; }
.pub-video--r1-1 { aspect-ratio: 1 / 1; max-width: var(--container-sm); margin: 0 auto; }
.pub-video__play {
  width: 64px; height: 64px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vs-yellow); color: var(--brand-ink);
  transition: transform .12s ease;
}
.pub-video:hover .pub-video__play { transform: scale(1.06); }
.pub-video__hint {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-label-sm);
  text-transform: uppercase; color: var(--text-on-dark-muted);
}
.pub-video--live iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pub-video--live { display: block; }

/* --- Sebelum / Sesudah. --- */
.pub-ba { display: grid; gap: var(--space-4); }
.pub-ba__pane { margin: 0; position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.pub-ba__pane img { width: 100%; display: block; object-fit: cover; }
.pub-ba__tag {
  position: absolute; left: var(--space-3); bottom: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-label-sm);
  text-transform: uppercase; color: var(--text-on-dark);
  background: rgba(5, 5, 5, .62); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
}
.pub-ba.is-enhanced { display: block; position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.pub-ba.is-enhanced .pub-ba__pane { position: relative; border-radius: 0; }
.pub-ba.is-enhanced [data-ba-after] { position: absolute; inset: 0; }
.pub-ba.is-enhanced [data-ba-after] img { height: 100%; }
.pub-ba--horizontal.is-enhanced [data-ba-after] { clip-path: inset(0 0 0 var(--ba-pos, 50%)); }
.pub-ba--horizontal.is-enhanced .pub-ba__tag--after { left: auto; right: var(--space-3); }
.pub-ba--vertical.is-enhanced [data-ba-after] { clip-path: inset(var(--ba-pos, 50%) 0 0 0); }
.pub-ba__range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; touch-action: none;
}
.pub-ba--vertical .pub-ba__range { cursor: ns-resize; }
.pub-ba__range:focus-visible ~ .pub-ba__handle { box-shadow: var(--shadow-focus); }
.pub-ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%); width: 2px;
  background: var(--vs-yellow); pointer-events: none; transform: translateX(-1px);
}
.pub-ba--vertical .pub-ba__handle {
  top: var(--ba-pos, 50%); left: 0; right: 0; bottom: auto; width: auto; height: 2px;
  transform: translateY(-1px);
}

/* --- Sorotan paket. --- */
.pub-spot {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--bg-card); border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg); overflow: hidden;
}
.pub-spot__media {
  position: relative; min-height: 220px; background: var(--bg-inset);
  display: flex; align-items: center; justify-content: center; color: var(--text-subtle);
}
.pub-spot__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pub-spot__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-7); }
.pub-spot__name { margin: 0; font-size: var(--text-h3); font-weight: var(--fw-bold); color: var(--text-strong); line-height: var(--lh-snug); }
.pub-spot__price {
  font-family: var(--font-mono); font-size: var(--text-h4); font-weight: var(--fw-bold);
  color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.pub-spot .pub-pkg__cta { margin-top: var(--space-2); }

/* --- Mobile (container page ≤680). --- */
@container page (max-width: 680px) {
  .pub-testi--cards { grid-template-columns: minmax(0, 1fr); }
  .pub-testi__item { padding: var(--space-5); }
  .pub-stats--row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-stats--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-stat__value { font-size: var(--text-h3); }
  .pub-feats--cols2, .pub-feats--cols3 { grid-template-columns: minmax(0, 1fr); }
  .pub-banner__inner { padding: var(--space-5); }
  .pub-banner__title { font-size: var(--text-h4); }
  .pub-banner--l { min-height: 320px; }
  .pub-spot { grid-template-columns: minmax(0, 1fr); }
  .pub-spot__media { min-height: 0; aspect-ratio: 16 / 9; }
  .pub-spot__body { padding: var(--space-5); }
  .pub-logos { gap: var(--space-5) var(--space-6); }
  .pub-logos img { max-height: 28px; max-width: 110px; }
}

/* ============================================================
   ubf3 (17.04.06 U8) — sub-page: header back app-style, kartu halaman
   turunan, sticky CTA bar mobile.
   ============================================================ */

/* --- Header sub-page (sticky, back ke induk). --- */
.pub-subhead {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--space-3);
  padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--space-5) var(--space-3);
  background: var(--surface-0); border-bottom: 1px solid var(--border-faint);
}
.pub-subhead__back {
  width: 44px; height: 44px; flex: 0 0 auto; margin-left: calc(-1 * var(--space-3));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-strong); border-radius: var(--radius-pill);
}
.pub-subhead__back:hover { background: var(--bg-inset); }
.pub-subhead__titles { display: flex; flex-direction: column; min-width: 0; }
.pub-subhead__title {
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pub-subhead__parent {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-label-sm);
  text-transform: uppercase; color: var(--text-subtle);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Kartu halaman turunan (subpage-grid). --- */
.pub-subgrid { display: grid; gap: var(--space-5); }
.pub-subgrid--grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pub-subgrid--list { grid-template-columns: minmax(0, 1fr); max-width: var(--container-md); }
.pub-subgrid--rail {
  grid-auto-flow: column; grid-auto-columns: min(72cqw, 300px);
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-3);
}
.pub-subgrid--rail .pub-subcard { scroll-snap-align: start; }
.pub-subcard {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.pub-subcard:hover { border-color: var(--border-default); box-shadow: var(--shadow-card); }
.pub-subgrid--list .pub-subcard { flex-direction: row; align-items: stretch; }
.pub-subcard__media {
  position: relative; aspect-ratio: 16 / 9; background: var(--bg-inset);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pub-subgrid--list .pub-subcard__media { aspect-ratio: auto; width: 120px; flex: 0 0 auto; }
.pub-subcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pub-subcard__initial {
  font-family: var(--font-mono); font-size: var(--text-h3); font-weight: var(--fw-bold);
  color: var(--text-subtle);
}
.pub-subcard__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); min-width: 0; }
.pub-subcard__title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: var(--lh-snug); }
.pub-subcard__desc {
  font-size: var(--text-xs); color: var(--text-muted); line-height: var(--lh-normal);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pub-subcard__go {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-label-sm);
  text-transform: uppercase; color: var(--text-subtle);
}
.pub-subcard:hover .pub-subcard__go { color: var(--text-strong); }

/* --- Sticky CTA bar (§8.5) — HANYA container mobile; sembunyi saat sheet/nav
       terbuka; safe-area dihormati. --- */
.pub-stickycta { display: none; }
@container page (max-width: 680px) {
  .pub-stickycta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--surface-0); border-top: 1px solid var(--border-faint);
  }
  /* Konten terakhir tidak boleh tertutup bar. */
  .pub-main:has(.pub-stickycta) { padding-bottom: 84px; }
  .pub-subgrid--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .pub-subcard__body { padding: var(--space-3) var(--space-4); }
}
body.has-sheet-open .pub-stickycta { display: none; }

/* ============================================================
   ubf5 (17.04.06 U10) — blok Formulir + layar sukses.
   ============================================================ */
.pub-formcard {
  background: var(--bg-card); border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg); padding: var(--space-7);
  max-width: var(--container-md);
}
.pub-formcard--flat { background: transparent; border: 0; padding: 0; }
.pub-formcard .reg-form { display: flex; flex-direction: column; gap: var(--space-5); }
.pub-formdone {
  width: 56px; height: 56px; border-radius: var(--radius-pill); margin: 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vs-yellow); color: var(--brand-ink);
}
.pub-formdone__code {
  margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--text-muted);
}
@container page (max-width: 680px) {
  .pub-formcard { padding: var(--space-5); }
}

/* ============================================================
   sdgate1/pkgvar (29 Agu 2026) — DUA layout pricelist baru,
   direproduksi dari master 12.04.02 yang SEBELUMNYA TIDAK terindeks
   di design-system/library-index.md:

     `tier`   ← Storefront & Public.dc.html · 04 · Pricing
     `market` ← Commerce & Marketplace.dc.html · 01 · Catalog

   Nilai di master ditulis inline sebagai px; di sini SEMUANYA di-snap ke
   token terdekat pada skala tokens.css (kamus USAGE.md) — tidak ada px
   tipografi/warna/spacing/radius/shadow yang ditulis langsung. Contoh
   snap yang sengaja meleset sedikit dari master: harga tier 34px →
   --text-h1 (36px), dan rincian 13.5px → --text-sm (14px); skala DS tidak
   punya nilai di antaranya, dan mengarang nilai baru justru melanggar
   aturan token. Yang tersisa sebagai angka mentah hanya LAYOUT (grid
   minmax, aspect-ratio) — pola yang sama dipakai .pub-plist--katalog.

   Field library yang TIDAK direproduksi (keputusan owner 29 Agu):
   rating bintang & tombol wishlist — sistemnya tidak ada, dan mengarang
   angka rating di halaman yang dibaca vendor jauh lebih buruk daripada
   kehilangan satu baris visual.
   ============================================================ */

/* --- TIER: kartu paket berjenjang, rincian SELALU terbuka --- */
.pub-plist--tier { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; }
.pub-tier {
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-6); border-radius: var(--radius-md);
  background: var(--bg-card); border: 1px solid var(--border-default);
  box-shadow: var(--shadow-card);
}
/* Varian sorotan: master mengganti border penuh dengan GARIS ATAS tebal +
   shadow-pop. Border penuh TIDAK ikut dipertahankan — menumpuk keduanya
   membuat kartunya terbaca seperti dua bingkai. */
.pub-tier--hot {
  border: 0; border-top: 3px solid var(--brand-accent);
  box-shadow: var(--shadow-pop);
}
.pub-tier__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.pub-tier__kicker {
  display: block; font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-subtle);
}
.pub-tier__name {
  margin: var(--space-2) 0 0; font-family: var(--font-display);
  font-size: var(--text-h3); font-weight: var(--fw-bold); color: var(--text-strong);
  line-height: var(--lh-tight);
}
.pub-tier__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.pub-tier__amount {
  font-family: var(--font-display); font-size: var(--text-h1); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); color: var(--text-strong); line-height: var(--lh-tight);
}
.pub-tier__unit { font-size: var(--text-xs); color: var(--text-subtle); }
/* Label "Mulai" — kecil, sebaris dengan angka, tidak ikut skala display. */
.pub-tier__pre { font-size: var(--text-xs); color: var(--text-subtle); }
/* `flex-wrap: nowrap` pada baris harga: di master, angka + satuan + harga coret
   SELALU sebaris. Dibiarkan wrap, harga coret turun sendirian dan terbaca
   seperti keterangan terpisah, bukan pembanding harga di sebelahnya.
   `min-width:0` menjaga angka panjang tetap boleh menyusut alih-alih meluber. */
.pub-tier__price { flex-wrap: nowrap; align-items: baseline; min-width: 0; }
.pub-tier__was { font-size: var(--text-xs); color: var(--text-subtle); text-decoration: line-through; white-space: nowrap; }
.pub-tier__rule { height: 1px; background: var(--border-faint); }
.pub-tier__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pub-tier__list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--text-muted); }
/* Centang memakai warna garis-kuning identitas persis seperti master. */
.pub-tier__check { flex: none; display: inline-flex; color: var(--vs-yellow-shadow); margin-top: 1px; }
.pub-tier__group { display: flex; flex-direction: column; gap: var(--space-3); }
.pub-tier__grouplabel {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-subtle);
}
/* Tombol didorong ke dasar supaya kaki semua kartu sejajar walau jumlah
   rinciannya berbeda — tanpa ini kartu paket "hemat" terlihat pincang. */
.pub-tier__cta { margin-top: auto; }
/* Strip "semua paket termasuk" — unit yang sama di master, opsional. */
.pub-tierfoot {
  display: flex; align-items: center; justify-content: center; gap: var(--space-5);
  flex-wrap: wrap; padding: var(--space-4); margin-top: var(--space-5);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.pub-tierfoot__label {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-subtle);
}
.pub-tierfoot__item { font-size: var(--text-xs); color: var(--text-muted); }
.pub-tierfoot__dot { color: var(--border-default); }

/* --- MARKET: kartu item marketplace, media 4/5 --- */
.pub-plist--market { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pub-mkt {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-card);
}
.pub-mkt__media {
  position: relative; aspect-ratio: 4 / 5; background: var(--ink-050);
  border-bottom: 1px solid var(--border-faint);
}
.pub-mkt__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-mkt__empty {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--ink-300);
}
.pub-mkt__badge { position: absolute; left: var(--space-3); top: var(--space-3); }
.pub-mkt__body {
  padding: var(--space-4); display: flex; flex-direction: column;
  gap: var(--space-3); flex: 1;
}
.pub-mkt__head { display: flex; flex-direction: column; gap: var(--space-1); }
.pub-mkt__name {
  margin: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--text-strong); line-height: var(--lh-snug); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pub-mkt__kind {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-subtle);
}
/* margin-top:auto — harga & tombol menempel dasar kartu, jadi baris harga
   tetap sejajar antar kartu walau nama produknya satu atau dua baris. */
.pub-mkt__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-top: auto; }
.pub-mkt__amount {
  font-family: var(--font-display); font-size: var(--text-md);
  font-weight: var(--fw-bold); color: var(--text-strong);
}
.pub-mkt__was { font-size: var(--text-xs); color: var(--text-subtle); text-decoration: line-through; }
.pub-mkt__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }

@container page (max-width: 680px) {
  .pub-plist--tier { grid-template-columns: 1fr; }
  .pub-plist--market { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .pub-tier { padding: var(--space-5); }
  .pub-tier__amount { font-size: var(--text-h3); }
  .pub-tierfoot { gap: var(--space-3); }
}

/* --- Pemilih ruang di KANVAS EDITOR (pkgvar/29 Agu 2026) ---
   Kanvas tidak pernah merender overlay, jadi tanpa blok ini admin tidak melihat
   ruang apa pun yang ditawarkan paketnya. Sengaja dibuat terbaca sebagai
   PRATINJAU — bergaris putus-putus, berlabel — supaya tidak dikira ia juga
   tampil begitu di halaman publik (di sana ia popup). */
/* (Ringkasan ruang di kanvas DICABUT 12 Sep 2026 — mengganggu tata letak kartu;
   tombol "Pilih ruang studio" sudah menjelaskan alurnya.) */

/* ============================================================
   pkgvar2 (29 Agu 2026) — ARAH HERO, direproduksi dari
   Storefront & Public.dc.html · 02 Hero ("3 arah").
   Arah A master (gradient + panel quick-book) tidak direproduksi:
   panelnya memilih studio & jam — fitur yang tidak ada di sini.
   ============================================================ */

/* --- B · Split editorial: teks kiri, foto kanan --- */
.pub-hero--split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch; min-height: 420px;
  background: var(--bg-card); color: var(--text-body);
}
.pub-hero--split .pub-hero__col {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-5);
  padding: var(--space-10) var(--space-9);
}
/* Kicker memakai garis-kuning identitas — di master inilah satu-satunya
   sentuhan warna pada arah ini, dan ia yang menahannya dari terbaca datar. */
.pub-hero--split .pub-hero__kicker { color: var(--vs-yellow-shadow); }
.pub-hero--split .pub-hero__title { font-size: var(--text-display); color: var(--text-strong); max-width: none; }
.pub-hero--split .pub-hero__body { font-size: var(--text-md); color: var(--text-muted); max-width: 42ch; }
.pub-hero--split .pub-hero__media { position: relative; min-height: 420px; border-left: 1px solid var(--border-faint); background: var(--ink-050); }
.pub-hero--split .pub-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Tombol sekunder di atas kertas putih butuh border yang terbaca; varian --lg
   milik DS sudah membawanya, jadi di sini cukup warnanya yang dikembalikan. */
.pub-hero--split .pub-hero__alt { color: var(--text-strong); }

/* --- C · Foto penuh + overlay, teks menempel dasar --- */
.pub-hero--foto { position: relative; min-height: 440px; background: var(--bg-ink); }
.pub-hero--foto .pub-hero__bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Scrim: gradasi dari tipis di atas ke pekat di bawah — teks duduk di bagian
   terpekat, jadi kontras tidak bergantung pada terang-gelapnya foto. */
.pub-hero--foto .pub-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg-ink) calc(var(--hero-ov, .45) * 55%), transparent),
    color-mix(in srgb, var(--bg-ink) calc(var(--hero-ov, .45) * 160%), transparent));
}
.pub-hero--foto > .pub-shell { position: relative; }
.pub-hero--foto .pub-hero__title { max-width: 16ch; }

@container page (max-width: 680px) {
  /* Split jadi bertumpuk; foto pindah ke ATAS teks karena di ponsel gambar
     yang menyambut lebih dulu, bukan blok teks setinggi layar. */
  .pub-hero--split { grid-template-columns: 1fr; min-height: 0; }
  .pub-hero--split .pub-hero__media { order: -1; min-height: 260px; border-left: 0; border-bottom: 1px solid var(--border-faint); }
  .pub-hero--split .pub-hero__col { padding: var(--space-8) var(--gutter); }
  .pub-hero--split .pub-hero__title { font-size: var(--text-h1); }
  .pub-hero--foto { min-height: 380px; }
  .pub-hero--foto .pub-hero__title { max-width: none; }
}

/* --- pkgvar2 · Galeri masonry + lightbox (master 06 Gallery) --- */
/* Masonry pakai column-count, sama seperti master. Konsekuensinya urutan baca
   mengalir ke BAWAH per kolom, bukan ke kanan per baris — itu memang sifat
   masonry dan alasan ia tidak dipakai untuk konten berurutan. */
.pub-gallery--masonry { display: block; column-count: 3; column-gap: var(--space-4); }
.pub-gallery--masonry.pub-gallery--2 { column-count: 2; }
.pub-gallery--masonry.pub-gallery--4 { column-count: 4; }
.pub-gallery--masonry > * { break-inside: avoid; margin: 0 0 var(--space-4); display: block; width: 100%; }
/* Tinggi MENGIKUTI rasio asli — inilah bedanya dengan grid yang memotong kotak. */
.pub-gallery--masonry img { aspect-ratio: auto; height: auto; }

.pub-gallery__item {
  padding: 0; border: 0; background: none; cursor: zoom-in; display: block; width: 100%;
  border-radius: var(--radius-sm); overflow: hidden;
}
.pub-gallery__item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pub-gallery--grid .pub-gallery__item img { aspect-ratio: 1/1; }

.pub-lb { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; }
.pub-lb[hidden] { display: none; }
.pub-lb__scrim { position: absolute; inset: 0; background: var(--bg-ink); opacity: .92; }
.pub-lb__stage {
  position: relative; margin: 0; max-width: min(1100px, 92vw); max-height: 86dvh;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.pub-lb__stage img { max-width: 100%; max-height: 78dvh; object-fit: contain; border-radius: var(--radius-sm); }
.pub-lb__count { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-label); color: var(--text-on-dark-muted); }
.pub-lb__close { position: absolute; top: var(--space-5); right: var(--space-5); z-index: 1; color: var(--text-on-dark); background: transparent; border-color: var(--text-on-dark-muted); }
.pub-lb__nav { position: relative; z-index: 1; color: var(--text-on-dark); background: transparent; border-color: var(--text-on-dark-muted); flex: none; margin: 0 var(--space-4); }
.pub-lb__close:hover, .pub-lb__nav:hover { background: var(--fill-ghost-hover, rgba(255,255,255,.12)); }

@container page (max-width: 680px) {
  .pub-gallery--masonry { column-count: 2; }
  .pub-gallery--masonry.pub-gallery--4 { column-count: 2; }
  /* Panah dipindah ke bawah gambar: di ponsel keduanya menutupi tepi foto. */
  .pub-lb { flex-wrap: wrap; align-content: center; }
  .pub-lb__stage { order: -1; flex-basis: 100%; }
  .pub-lb__nav { margin: var(--space-5) var(--space-3) 0; }
}

/* --- pkgvar2 · Gaya tautan kontak (master 09 Link-in-bio) ---
   Gaya C master (editorial cover) tidak direproduksi: butuh foto sampul yang
   blok ini tidak punya, dan menambahkannya melahirkan kembaran blok `banner`. */
.pub-linkbar--stack { flex-direction: column; align-items: stretch; gap: var(--space-3); }
.pub-linkrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--space-4); padding: var(--space-5) var(--space-5);
  border-radius: var(--radius-sm); border: 1px solid var(--border-default);
  background: var(--bg-card); color: var(--text-strong); text-decoration: none;
}
.pub-linkrow:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.pub-linkrow:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pub-linkrow__label { font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.pub-linkrow__go { color: var(--text-subtle); }
/* Varian utama = isian ink, mengikuti master (item pertama diberi bobot). */
.pub-linkrow--hot { background: var(--bg-ink); border-color: var(--bg-ink); color: var(--text-on-dark); }
.pub-linkrow--hot:hover { background: var(--bg-ink); border-color: var(--bg-ink); }
.pub-linkrow--hot .pub-linkrow__go { color: var(--text-on-dark-muted); }

.pub-linkbar--kartu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.pub-linkcard {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5) var(--space-4); border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); background: var(--bg-card);
  color: var(--text-strong); text-decoration: none;
}
.pub-linkcard:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.pub-linkcard:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pub-linkcard__label { font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.pub-linkcard--hot { border-color: var(--vs-yellow-shadow); }

@container page (max-width: 680px) {
  .pub-linkbar--kartu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .pub-linkrow { padding: var(--space-4); }
}

/* --- pkgvar2 · Lebar baca teks, FAQ terbuka, langkah berikon --- */
/* `--measure` lama tetap ada untuk doc yang sudah menuliskannya; `--baca`
   adalah nama barunya dan nilainya identik, jadi tidak ada halaman yang
   berubah saat prop ini diperkenalkan. */
.pub-richtext--baca { max-width: var(--container-sm); }
.pub-richtext--penuh { max-width: none; }
.pub-richtext--sempit { max-width: 46ch; }

/* Penanda langkah berikon: lingkaran ber-outline, bukan angka mono. */
.pub-step__num--ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-default); background: var(--bg-card);
  color: var(--text-strong);
}
.pub-steps--ikon .pub-step { gap: var(--space-4); }

/* --- pkgvar3 · Slideshow galeri (master 06 Gallery varian A) + panah carousel --- */
.pub-slideshow { display: flex; flex-direction: column; gap: var(--space-4); }
.pub-slideshow__stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--ink-050);
}
.pub-slideshow__stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-slideshow__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: var(--bg-card); border-color: var(--border-default); box-shadow: var(--shadow-card);
}
.pub-slideshow__nav--prev { left: var(--space-4); }
.pub-slideshow__nav--next { right: var(--space-4); }
.pub-slideshow__count {
  position: absolute; right: var(--space-4); bottom: var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-label);
  color: var(--text-on-dark); background: var(--bg-ink); opacity: .82;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs);
}
.pub-slideshow__thumbs { display: grid; gap: var(--space-4); }
.pub-slideshow__thumb {
  padding: 0; background: none; cursor: pointer; overflow: hidden;
  aspect-ratio: 1 / 1; border-radius: var(--radius-sm);
  /* Border SELALU 2px — yang berubah hanya warnanya. Menaikkan tebal border
     hanya saat aktif (seperti master menulisnya) menggeser tata letak satu
     piksel tiap kali foto berganti. */
  border: 2px solid var(--border-faint);
}
.pub-slideshow__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-slideshow__thumb.is-active { border-color: var(--text-strong); }
.pub-slideshow__thumb:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.pub-carouselwrap { position: relative; }
.pub-carousel__nav {
  position: absolute; top: calc(50% - var(--space-3)); transform: translateY(-50%);
  background: var(--bg-card); border-color: var(--border-default); box-shadow: var(--shadow-card);
}
.pub-carousel__nav--prev { left: calc(var(--space-4) * -1); }
.pub-carousel__nav--next { right: calc(var(--space-4) * -1); }
.pub-carousel__nav[disabled] { opacity: 0; pointer-events: none; }

@container page (max-width: 680px) {
  .pub-slideshow__nav { display: none; }   /* di ponsel thumbnail sudah cukup */
  .pub-slideshow__thumbs { gap: var(--space-3); }
  /* Panah carousel disembunyikan: strip ini digeser dengan jari, dan dua tombol
     melayang justru menutupi foto. */
  .pub-carousel__nav { display: none; }
}

/* --- Tombol pesan per baris di layout `menu` (keputusan owner 29 Agu 2026) ---
   Unit master-nya daftar harga polos tanpa tombol; tombol ditambahkan karena
   tanpa itu pengunjung melihat harga lalu buntu. Dibuat sekecil mungkin supaya
   baris tetap terbaca sebagai daftar harga, bukan deretan kartu. */
.pub-menu__cta { flex: none; margin-left: var(--space-4); }
.pub-menu__cta .vs-btn { white-space: nowrap; }
@container page (max-width: 680px) {
  /* Di ponsel baris dibungkus: nama+harga di atas, tombol turun rata kanan —
     memaksa tiga hal sebaris membuat nama paket terpotong. */
  .pub-menu__row { flex-wrap: wrap; }
  .pub-menu__cta { margin-left: auto; margin-top: var(--space-3); }
  /* venue2: tombol paket kecil tetap bisa disentuh jari (≥44px, --field-h),
     sama dengan tinggi tombol master G4 versi HP (2875). */
  .pub-menu__cta .vs-btn--sm, .pub-compare__col .vs-btn--sm { height: var(--field-h); }
}
/* venue2: tombol paket (Button block master G4 2469). Padding samping dan gap
   tetap bawaan .vs-btn. Label satu baris selama muat di badan tombol; bila
   kolomnya lebih sempit dari isi (kartu dua kolom HP, kolom ±184px), label
   terlipat dan tombol tumbuh dari tinggi minimumnya, bukan meluber.
   Padding atas-bawah --space-2 (keputusan 18 Sep): hanya terasa saat label
   terlipat; satu baris tetap 44px karena min-height yang menentukan. */
.pub-pkg__cta .vs-btn, .pub-tier__cta .vs-btn, .pub-mkt .vs-btn {
  white-space: normal; text-align: center; line-height: var(--lh-snug);
  height: auto; min-height: var(--field-h);
  padding-top: var(--space-2); padding-bottom: var(--space-2);
}

/* Home artwork: reading and actions on the left, compact art above on phones. */
.pub-home-illustrated {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
  color: #050505;
}
.pub-home-illustrated .pub-hero__kicker { color: #525252; }
.pub-home-illustrated .pub-hero__body { color: #404040; }
.pub-home-illustrated .pub-hero__alt {
  color: #050505;
  background: #fff;
  border-color: #737373;
}
.pub-home-illustrated .pub-hero__alt:hover {
  color: #050505;
  background: #f5f5f5;
  border-color: #050505;
}
.pub-home-illustrated .vs-btn--brand { color: #050505; background: #fff700; }
.pub-home-illustrated .vs-btn--brand:hover { background: #eee600; }
.pub-home-illustrated .vs-btn:focus-visible {
  outline: 2px solid #050505;
  outline-offset: 4px;
}
.pub-home-illustrated > .pub-shell {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: min(720px, calc(100svh - 84px));
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}
.pub-home-illustrated .pub-hero__inner {
  position: relative;
  z-index: 2;
  width: min(100%, 720px);
  min-width: 0;
  padding: 0;
  justify-content: center;
}
.pub-home-illustrated .pub-hero__title {
  color: #050505;
  font-size: clamp(40px, 5vw, 72px);
  max-width: 13ch;
}
.pub-home-illustrated__art {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(-110px, -6vw, -24px);
  width: min(58%, 700px);
  aspect-ratio: 1;
  margin: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  transform: translateY(-50%);
}
.pub-home-illustrated__art img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.pub-thunder-loop__halo {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,247,0,.35) 0 12%, rgba(255,247,0,.13) 34%, transparent 68%);
  filter: blur(22px);
  animation: cpx-thunder-halo 6s ease-in-out infinite;
}
.pub-home-illustrated__art .pub-thunder-loop__asset {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 28px 22px rgba(5,5,5,.23));
  transform-origin: center;
  transform-style: preserve-3d;
  animation: cpx-thunder-rotate 10s cubic-bezier(.45, .05, .55, .95) infinite;
}
@keyframes cpx-thunder-rotate {
  0%,100% { transform: perspective(1200px) translate3d(0,0,0) rotateY(-12deg) rotateX(4deg) rotateZ(-5deg); }
  25% { transform: perspective(1200px) translate3d(0,-12px,0) rotateY(10deg) rotateX(-4deg) rotateZ(3deg); }
  50% { transform: perspective(1200px) translate3d(0,-18px,0) rotateY(16deg) rotateX(3deg) rotateZ(6deg); }
  75% { transform: perspective(1200px) translate3d(0,-8px,0) rotateY(-8deg) rotateX(-3deg) rotateZ(0deg); }
}
@keyframes cpx-thunder-halo {
  0%,100% { opacity: .55; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .pub-thunder-loop__halo, .pub-thunder-loop__asset { animation: none; }
}
.pub-home-illustrated .pub-hero__actions .vs-btn {
  white-space: normal;
  text-align: center;
  min-height: 52px;
}
@media (max-width: 900px) {
  .pub-home-illustrated > .pub-shell {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: calc(100svh - 64px);
    padding-top: 20px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
    align-content: center;
  }
  .pub-home-illustrated__art {
    position: absolute;
    z-index: 0;
    top: 60%;
    right: auto;
    left: 50%;
    width: min(100vw, 470px);
    aspect-ratio: 1;
    opacity: .48;
    transform: translate(-50%, -50%);
  }
  .pub-home-illustrated .pub-hero__inner {
    z-index: 1;
    flex: 0 0 auto;
    justify-content: flex-end;
    width: 100%;
    gap: 16px;
  }
  .pub-home-illustrated .pub-hero__title {
    font-size: clamp(32px, 7.5vw, 46px);
    max-width: 18ch;
  }
  .pub-home-illustrated .pub-hero__body { font-size: 16px; }
  .pub-home-illustrated .pub-hero__actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
  }
  .pub-home-illustrated .pub-hero__actions .vs-btn { width: 100%; height: auto; padding: 14px 16px; }
}
/* Di ponsel, pusat artwork semula berada di 60% tinggi hero. Karena file petir
   punya ruang transparan di bagian atas, visualnya tampak jatuh terlalu rendah
   dan menyisakan area kosong besar di bawah header. Naikkan artwork saja;
   urutan dan ruang aman konten CTA tetap sama. */
@media (max-width: 640px) {
  .pub-home-illustrated__art { top: 42%; }
}


/* ════════════════════════════════════════════════════════════════════════════
   KELUARGA PRICELIST (plb1–plb3, 11 Sep 2026) — port CSS Gateway R12
   "KELUARGA PRICELIST" ke Connect+ (handoff 17.02/02 §6 standar mobile).

   Penamaan: `.plb-*` = primitif bersama; per blok `.plb-<kode>` + `__anak`:
   fo featured-offer · pr price-rows · pm price-menu · pa price-accordion ·
   dp duration-picker · ac addon-calculator · ps price-strip · sub subscription ·
   oc option-card · tk ticket-card · bd bundle-card. Tombol = .vs-btn DS
   (brand/primary/secondary + sm/lg/block); tag = .vs-tag--<tone> DS.

   Token-only (tokens.css Connect+ 1:1 dengan Gateway — nol token baru).
   Putih-transparan di permukaan gelap = color-mix atas --vs-white; garis pada
   gelap = color-mix(--vs-white 14%).

   BENTUK DIATUR LEBAR KARTU (container-type pada kartu), bukan lebar layar:
   @container (max-width: 420px) = ponsel atau kolom sempit. Kepala seksi
   memakai @container page (≤680) yang sudah dipakai .pub-main.

   LETAK: akhir berkas, SESUDAH seluruh @media/@container blok lain.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Primitif bersama ──────────────────────────────────────────────────────── */
.plb .pub-shell { display: flex; flex-direction: column; gap: var(--space-5); }
.plb-head { margin-bottom: var(--space-1); }
.plb-kicker { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-subtle); }
.plb-note { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.plb-foot { margin: 0; font-size: var(--text-xs); color: var(--text-subtle); }
.plb-cta { white-space: nowrap; }
.plb-cta.vs-btn--block { width: 100%; }

/* Strip hint di canvas editor. */
.plb-hint { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border: 1px solid var(--tag-warning-border); border-radius: var(--radius-sm); background: var(--tag-warning-bg); color: var(--tag-warning-text); font-size: var(--text-xs); line-height: var(--lh-normal); margin-bottom: var(--space-3); }
.plb-hint svg { margin-top: 2px; }

/* Kartu tunggal (2d 2f 2g 2h). */
.plb-single { container-type: inline-size; max-width: 560px; border: 1px solid var(--line-200); border-radius: var(--radius-md); background: var(--surface-0); box-shadow: var(--shadow-card); }

/* Tag bertona berdot — di atas .vs-tag DS. */
.plb-tag { white-space: nowrap; }
.plb-tag--dot::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; flex: none; }

/* Daftar centang. */
.plb-points { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.plb-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; color: var(--text-body); font-size: var(--text-xs); line-height: var(--lh-normal); }
.plb-points svg { width: 15px; height: 15px; margin-top: 2px; color: var(--brand-line); }
.plb-points li.is-off { color: var(--text-subtle); }
.plb-points li.is-off svg { color: var(--text-subtle); }
.plb-points--dark li { color: color-mix(in srgb, var(--vs-white) 90%, transparent); }
.plb-points--dark svg { color: var(--brand-accent); }
.plb-points--dark li.is-off, .plb-points--dark li.is-off svg { color: var(--text-on-dark-muted); }

/* Pil pilihan (1c): ink saat aktif. */
.plb-pill { min-height: 44px; padding: var(--space-3) var(--space-5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); flex: 1 1 90px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-0); color: var(--text-strong); font: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold); cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease; }
.plb-pill small { font-size: var(--text-2xs); font-weight: var(--fw-medium); opacity: .7; }
.plb-pill.is-on { border-color: var(--bg-ink); background: var(--bg-ink); color: var(--text-on-dark); }

/* Segmented control (2d) — anatomi GUI/02/SEGMENTED-CONTROL. */
.plb-seg { display: inline-flex; align-self: flex-start; gap: var(--space-1); padding: 3px; border: 1px solid var(--line-200); border-radius: var(--radius-sm); background: var(--surface-1); }
.plb-seg__btn { min-height: 34px; padding: 0 var(--space-5); border: 0; border-radius: calc(var(--radius-sm) - 2px); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--text-xs); font-weight: var(--fw-semibold); cursor: pointer; transition: background .16s ease, color .16s ease; }
.plb-seg__btn.is-on { background: var(--bg-ink); color: var(--text-on-dark); }

/* Stepper jumlah (2g). */
.plb-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; }
.plb-stepper__btn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: var(--surface-0); color: var(--text-strong); cursor: pointer; }
.plb-stepper__btn:disabled { color: var(--text-disabled); cursor: default; }
.plb-stepper__value { min-width: 36px; height: 40px; display: grid; place-items: center; border-inline: 1px solid var(--border-default); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-strong); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .plb-stepper__btn:not(:disabled):hover { background: var(--surface-1); } }

/* Kepala penjual (2e) & chip meta (2b) — dipakai tier/compare pricelist. */
.plb-author, .pub-tier__author, .pub-compare__author { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; text-align: left; }
.plb-author__avatar, .pub-tier__author__avatar, .pub-compare__author__avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--bg-ink); color: var(--text-on-dark); font-size: var(--text-2xs); font-weight: var(--fw-bold); }
.plb-author__copy, .pub-tier__author__copy, .pub-compare__author__copy { display: flex; flex-direction: column; min-width: 0; }
.plb-author__copy strong, .pub-tier__author__copy strong, .pub-compare__author__copy strong { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-strong); }
.plb-author__copy span, .pub-tier__author__copy span, .pub-compare__author__copy span { font-size: var(--text-2xs); color: var(--text-muted); }
.plb-meta, .pub-tier__meta, .pub-compare__meta { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-muted); }
.pub-compare__meta { justify-content: center; margin-top: var(--space-2); font-size: var(--text-2xs); }
.plb-meta__item, .pub-tier__meta__item, .pub-compare__meta__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.plb-meta__item svg, .pub-tier__meta__item svg, .pub-compare__meta__item svg { width: 13px; height: 13px; }
/* Rincian tier sebagai ubin (2j): kotak kecil auto-fit, label mono di atas isi. */
.pub-tier__groups { display: flex; flex-direction: column; gap: var(--space-5); }
.pub-tier__groups--tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: var(--space-3); }
.pub-tier__groups--tiles .pub-tier__group { padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-sm); gap: var(--space-2); }
.pub-tier__groups--tiles .pub-tier__grouplabel { font-size: 10px; }
.pub-tier__groups--tiles .pub-tier__list { gap: var(--space-1); }
.pub-tier__groups--tiles .pub-tier__list li { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.pub-tier__groups--tiles .pub-tier__check { display: none; }

/* ── featured-offer (1f 3a 3b 3c 3d 3e) ───────────────────────────────────── */
.plb-fo { container-type: inline-size; --plb-pad: clamp(var(--space-6), 5.4cqi, var(--space-8)); border-radius: var(--radius-md); overflow: hidden; color: var(--text-on-dark); }
.plb-fo__kicker { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-on-dark-muted); }
.plb-fo__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.plb-fo__titles { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.plb-fo__title { margin: 0; font-family: var(--font-display); font-size: clamp(var(--text-h3), 5.4cqi, var(--text-h1)); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); line-height: 1.08; color: inherit; }
.plb-fo__intro { margin: 0; max-width: 420px; font-size: var(--text-sm); line-height: var(--lh-normal); color: color-mix(in srgb, var(--vs-white) 78%, transparent); }
.plb-fo__badge { align-self: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: var(--brand-accent); color: var(--brand-accent-ink); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label-sm); text-transform: uppercase; white-space: nowrap; }
.plb-fo__price { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.plb-fo__value { font-family: var(--font-display); font-size: clamp(var(--text-h2), 7.6cqi, var(--text-display-lg)); font-weight: var(--fw-bold); letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.plb-fo__strike { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-on-dark-muted); }
.plb-fo__unit { font-size: var(--text-xs); color: color-mix(in srgb, var(--vs-white) 70%, transparent); }
.plb-fo__actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; padding-top: var(--space-5); border-top: 1px solid color-mix(in srgb, var(--vs-white) 14%, transparent); }
.plb-fo__actions--stacked { flex-direction: column; align-items: stretch; gap: var(--space-3); padding-top: 0; border-top: 0; }
.plb-fo__actions--stacked .plb-cta { width: 100%; display: flex; }
.plb-fo__actions--stacked .plb-fo__note { text-align: center; }
.plb-fo__note { font-size: var(--text-xs); color: color-mix(in srgb, var(--vs-white) 70%, transparent); }
.plb-fo .plb-points { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-3) var(--space-7); }
.plb-fo .plb-points li { font-size: var(--text-sm); }
/* gradient (1f) */
.plb-fo[data-variant="gradient"] { display: flex; flex-direction: column; gap: clamp(var(--space-5), 5cqi, var(--space-7)); padding: var(--plb-pad); background: var(--brand-gradient); box-shadow: var(--shadow-identity); }
/* ink (3c) */
.plb-fo[data-variant="ink"] { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--plb-pad); background: var(--bg-ink); border-top: 3px solid var(--brand-accent); }
.plb-fo[data-variant="ink"] .plb-fo__value { color: var(--brand-accent); }
.plb-fo[data-variant="ink"] .plb-fo__badge { background: transparent; border: 1px solid var(--brand-accent); color: var(--brand-accent); }
.plb-fo__countdown { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; flex-basis: 100%; }
.plb-fo__digits { font-family: var(--font-mono); font-size: var(--text-h4); color: var(--brand-accent); font-variant-numeric: tabular-nums; }
.plb-fo__quota { display: flex; flex-direction: column; gap: var(--space-3); }
.plb-fo__quotaline { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-xs); color: color-mix(in srgb, var(--vs-white) 70%, transparent); }
.plb-fo__quotacount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.plb-fo__quotabar { height: 4px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--vs-white) 14%, transparent); overflow: hidden; }
.plb-fo__quotabar span { display: block; height: 100%; background: var(--brand-accent); }
/* soft (3d) */
.plb-fo[data-variant="soft"] { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--plb-pad); background: var(--brand-gradient-soft); border: 1px solid var(--brand-line); box-shadow: var(--shadow-card); color: var(--text-body); }
.plb-fo[data-variant="soft"] .plb-fo__kicker { color: var(--text-subtle); }
.plb-fo[data-variant="soft"] .plb-fo__title, .plb-fo[data-variant="soft"] .plb-fo__value { color: var(--text-strong); }
.plb-fo[data-variant="soft"] .plb-fo__intro, .plb-fo[data-variant="soft"] .plb-fo__note { color: var(--text-muted); }
.plb-fo[data-variant="soft"] .plb-fo__strike, .plb-fo[data-variant="soft"] .plb-fo__unit { color: var(--text-subtle); }
.plb-fo[data-variant="soft"] .plb-fo__badge { background: var(--tag-identity-bg); border: 1px solid var(--tag-identity-border); color: var(--tag-identity-text); font-family: var(--font-body); text-transform: none; letter-spacing: var(--ls-normal); }
.plb-fo[data-variant="soft"] .plb-fo__actions { border-top-color: var(--brand-line); }
.plb-fo[data-variant="soft"] .plb-points svg { color: var(--ink-900); }
.plb-fo__facts { display: flex; align-items: flex-end; gap: clamp(var(--space-6), 5.4cqi, var(--space-8)); flex-wrap: wrap; }
.plb-fo__fact { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-2); }
.plb-fo__fact--main { padding-bottom: 0; }
.plb-fo__factval { font-family: var(--font-mono); font-size: var(--text-md); color: var(--text-strong); }
.plb-fo__fact:nth-child(n+3) .plb-fo__factval { color: var(--text-subtle); text-decoration: line-through; }
/* split (3a) */
.plb-fo[data-variant="split"] { display: flex; flex-wrap: wrap; border: 1px solid var(--border-default); box-shadow: var(--shadow-identity); }
.plb-fo__pane { flex: 1 1 260px; min-width: 0; padding: var(--plb-pad); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-7); }
.plb-fo__pane--ink { background: var(--brand-gradient); }
.plb-fo__pane--light { flex-basis: 280px; background: var(--surface-0); color: var(--text-body); gap: var(--space-5); }
.plb-fo__list { display: flex; flex-direction: column; gap: var(--space-4); }
.plb-fo__listhead { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.plb-fo__listhead .plb-fo__kicker { color: var(--text-subtle); }
.plb-fo__pane--light .plb-fo__note { color: var(--text-subtle); }
/* strip (3b) */
.plb-fo[data-variant="strip"] { display: flex; align-items: center; gap: var(--space-5) var(--space-8); flex-wrap: wrap; padding: clamp(var(--space-5), 5cqi, var(--space-7)) clamp(var(--space-5), 5cqi, var(--space-8)); background: var(--brand-gradient); box-shadow: var(--shadow-identity); }
.plb-fo[data-variant="strip"] .plb-fo__titles { flex: 1 1 220px; gap: var(--space-2); }
.plb-fo[data-variant="strip"] .plb-fo__title { font-size: clamp(var(--text-h4), 5cqi, var(--text-h3)); line-height: 1.15; }
.plb-fo[data-variant="strip"] .plb-fo__price { gap: var(--space-3); }
.plb-fo[data-variant="strip"] .plb-fo__value { font-size: clamp(var(--text-h3), 5.4cqi, var(--text-h1)); }
.plb-fo[data-variant="strip"] .plb-fo__price .plb-fo__badge { align-self: baseline; }
/* hero (3e) */
.plb-fo[data-variant="hero"] { display: flex; flex-direction: column; background: var(--brand-gradient); box-shadow: var(--shadow-identity); }
.plb-fo__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.plb-fo__copy { padding: clamp(var(--space-6), 5.4cqi, var(--space-9)); display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.plb-fo__copy .plb-fo__actions { border-top: 0; padding-top: 0; }
.plb-fo__media { min-height: 220px; background: color-mix(in srgb, var(--vs-white) 8%, transparent); border-left: 1px solid color-mix(in srgb, var(--vs-white) 12%, transparent); }
.plb-fo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plb-fo__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); border-top: 1px solid color-mix(in srgb, var(--vs-white) 14%, transparent); background: color-mix(in srgb, var(--vs-black) 35%, transparent); }
.plb-fo__metric { padding: var(--space-5) clamp(var(--space-5), 5cqi, var(--space-7)); display: flex; flex-direction: column; gap: var(--space-1); border-right: 1px solid color-mix(in srgb, var(--vs-white) 10%, transparent); min-width: 0; }
.plb-fo__metric:last-child { border-right: 0; }
.plb-fo__metric strong { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); line-height: 1; }
.plb-fo__metric span { font-size: var(--text-xs); color: var(--text-on-dark-muted); }

/* ── price-rows (1b tabel · 2c kartu baris) ───────────────────────────────── */
.plb-pr[data-variant="table"] { container-type: inline-size; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-0); box-shadow: var(--shadow-card); overflow: hidden; }
.plb-pr__head { padding: var(--space-5) var(--space-6) var(--space-4); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; border-bottom: 1px solid var(--border-default); }
.plb-pr__titles { display: flex; flex-direction: column; gap: var(--space-2); }
.plb-pr__title { margin: 0; font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); color: var(--text-strong); }
.plb-pr__aside { font-size: var(--text-xs); color: var(--text-subtle); }
.plb-pr__row { width: 100%; display: flex; align-items: center; gap: var(--space-4) var(--space-6); flex-wrap: wrap; padding: var(--space-4) var(--space-6); border: 0; border-bottom: 1px solid var(--border-faint); background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; }
a.plb-pr__row { cursor: pointer; }
@media (hover: hover) { a.plb-pr__row:hover { background: var(--surface-1); } a.plb-pr__row:hover .plb-pr__go { border-color: var(--border-strong); } }
.plb-pr__name { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 180px; min-width: 0; }
.plb-pr__name strong { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.plb-pr__name span { font-size: var(--text-xs); color: var(--text-muted); }
.plb-pr__prices { display: flex; gap: var(--space-6); align-items: center; justify-content: space-between; flex: 1 1 240px; margin-left: auto; }
.plb-pr__cell { display: flex; flex-direction: column; gap: var(--space-1); }
.plb-pr__celllabel { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-subtle); }
.plb-pr__cellvalue { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.plb-pr__cell.is-muted .plb-pr__cellvalue { color: var(--text-muted); }
.plb-pr__go { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-pill); color: var(--text-strong); flex: 0 0 auto; }
.plb-pr__go svg { width: 14px; height: 14px; }
.plb-pr__go.is-empty { visibility: hidden; }
.plb-pr__foot { padding: var(--space-4) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; background: var(--surface-1); }
.plb-pr__footnote { font-size: var(--text-xs); color: var(--text-muted); }
.plb-pr[data-variant="cards"] { display: flex; flex-direction: column; gap: var(--space-3); }
.plb-pr__card { container-type: inline-size; width: 100%; display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-0); box-shadow: var(--shadow-card); color: inherit; font: inherit; text-align: left; text-decoration: none; }
a.plb-pr__card { cursor: pointer; }
@media (hover: hover) { a.plb-pr__card:hover { border-color: var(--border-strong); } }
.plb-pr__thumb { width: 68px; height: 68px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--border-faint); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-subtle); overflow: hidden; }
.plb-pr__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plb-pr__thumb svg { width: 18px; height: 18px; }
.plb-pr__cardbody { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.plb-pr__cardbody strong { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: var(--lh-snug); }
.plb-pr__cardsub { font-size: var(--text-xs); color: var(--text-muted); }
.plb-pr__cardprice { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); margin-left: auto; }
.plb-pr__cardprice b { font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); color: var(--text-strong); }
.plb-pr__cardprice span { font-size: var(--text-2xs); color: var(--text-subtle); }

/* ── price-menu (1d) ──────────────────────────────────────────────────────── */
.plb-pm { container-type: inline-size; padding: clamp(var(--space-6), 5.4cqi, var(--space-8)); display: flex; flex-direction: column; gap: var(--space-7); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-0); }
.plb-pm__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-strong); }
.plb-pm__title { margin: 0; font-family: var(--font-display); font-size: clamp(var(--text-h4), 5cqi, var(--text-h2)); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); color: var(--text-strong); }
.plb-pm__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--space-7) var(--space-9); }
.plb-pm__cat { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.plb-pm__item { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.plb-pm__itemname { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.plb-pm__itemname strong { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.plb-pm__itemname span { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; }
.plb-pm__dots { flex: 1; min-width: 16px; border-bottom: 1px dotted var(--ink-300); transform: translateY(-4px); }
.plb-pm__itemprice { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.plb-pm__foot { margin: 0; font-size: var(--text-xs); color: var(--text-subtle); line-height: var(--lh-normal); white-space: pre-line; }

/* ── price-accordion (1g) ─────────────────────────────────────────────────── */
.plb-pa { border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-0); box-shadow: var(--shadow-card); overflow: hidden; }
.plb-pa__cat { border-bottom: 1px solid var(--border-default); }
.plb-pa__cat:last-of-type { border-bottom: 0; }
.plb-pa__summary { min-height: 56px; padding: var(--space-4) var(--space-6); display: flex; align-items: center; gap: var(--space-4); cursor: pointer; list-style: none; }
.plb-pa__summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .plb-pa__summary:hover { background: var(--surface-1); } }
.plb-pa__num { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); flex: 0 0 auto; }
.plb-pa__titles { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; }
.plb-pa__titles strong { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.plb-pa__titles span { font-size: var(--text-xs); color: var(--text-muted); }
.plb-pa__from { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.plb-pa__chev { display: grid; place-items: center; color: var(--text-strong); flex: 0 0 auto; transition: transform .16s ease; }
.plb-pa__chev svg { width: 16px; height: 16px; }
.plb-pa__cat[open] > .plb-pa__summary .plb-pa__chev { transform: rotate(180deg); }
.plb-pa__body { padding: 0 var(--space-6) var(--space-5); display: flex; flex-direction: column; }
.plb-pa__item { display: flex; align-items: center; gap: var(--space-4); padding: 11px 0; border-top: 1px solid var(--border-faint); }
.plb-pa__itemname { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text-strong); }
.plb-pa__itemdesc { font-size: var(--text-xs); color: var(--text-muted); }
.plb-pa__itemprice { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.plb-pa__foot { padding: var(--space-4) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; background: var(--surface-1); font-size: var(--text-xs); color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .plb-pa__chev { transition: none; } }

/* ── duration-picker (1c) ─────────────────────────────────────────────────── */
.plb-dp { container-type: inline-size; display: flex; flex-wrap: wrap; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-0); box-shadow: var(--shadow-card); overflow: hidden; }
.plb-dp__pane { flex: 1 1 280px; min-width: 0; padding: clamp(var(--space-5), 5cqi, var(--space-7)); display: flex; flex-direction: column; gap: var(--space-5); }
.plb-dp__pane--sum { flex-basis: 240px; background: var(--surface-1); justify-content: space-between; gap: var(--space-4); }
.plb-dp__head { display: flex; flex-direction: column; gap: var(--space-2); }
.plb-dp__kickerrow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.plb-dp__title { margin: 0; font-family: var(--font-display); font-size: clamp(var(--text-h4), 5cqi, var(--text-h3)); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); line-height: 1.15; color: var(--text-strong); }
.plb-dp__desc { margin: 0; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.plb-dp__options { display: flex; flex-direction: column; gap: var(--space-3); }
.plb-dp__pills { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.plb-dp__sum { display: flex; flex-direction: column; gap: var(--space-3); }
.plb-dp__line { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.plb-dp__val { font-family: var(--font-mono); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.plb-dp__val.is-good { color: var(--accent-mint); }
.plb-dp__rule { height: 1px; background: var(--border-default); }
.plb-dp__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.plb-dp__totalval { font-family: var(--font-display); font-size: clamp(var(--text-h3), 5.4cqi, var(--text-h1)); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); color: var(--text-strong); }

/* ── addon-calculator (1i) ────────────────────────────────────────────────── */
.plb-ac { container-type: inline-size; display: flex; flex-direction: column; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-0); box-shadow: var(--shadow-card); overflow: hidden; }
.plb-ac__head { padding: var(--space-5) var(--space-6); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; border-bottom: 1px solid var(--border-default); }
.plb-ac__titles { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 160px; }
.plb-ac__titles strong { font-size: var(--text-md); color: var(--text-strong); }
.plb-ac__base { font-family: var(--font-mono); font-size: var(--text-md); color: var(--text-strong); }
.plb-ac__body { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.plb-ac__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--space-3); }
.plb-ac__tile { min-height: 44px; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); text-align: left; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-0); font: inherit; cursor: pointer; transition: background .16s ease, border-color .16s ease; }
@media (hover: hover) { .plb-ac__tile:hover { border-color: var(--border-strong); } }
.plb-ac__tile.is-on { background: var(--brand-soft); border-color: var(--brand-line); }
.plb-ac__tiletop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.plb-ac__tilename { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-strong); }
.plb-ac__box { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--ink-200); border-radius: var(--radius-xs); color: transparent; flex: 0 0 auto; }
.plb-ac__box svg { width: 12px; height: 12px; }
.plb-ac__tile.is-on .plb-ac__box { background: var(--bg-ink); border-color: var(--bg-ink); color: var(--text-on-dark); }
.plb-ac__tiledesc { font-size: var(--text-2xs); line-height: 1.4; color: var(--text-muted); }
.plb-ac__tileprice { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-strong); }
.plb-ac__bar { padding: var(--space-4) var(--space-6); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; background: var(--bg-ink); color: var(--text-on-dark); }
.plb-ac__barcopy { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 150px; }
.plb-ac__barlabel { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-on-dark-muted); }
.plb-ac__bartotal { font-family: var(--font-display); font-size: clamp(var(--text-h4), 5cqi, var(--text-h2)); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); }

/* ── price-strip (1j) ─────────────────────────────────────────────────────── */
.plb-ps { container-type: inline-size; display: flex; flex-direction: column; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-0); box-shadow: var(--shadow-card); overflow: hidden; }
.plb-ps__head { padding: var(--space-5) var(--space-6) var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.plb-ps__grab { width: 36px; height: 4px; margin: 0 auto var(--space-3); border-radius: var(--radius-pill); background: var(--ink-200); }
.plb-ps__headrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.plb-ps__title { font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); color: var(--text-strong); }
.plb-ps__rail { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--space-3) var(--space-6) var(--space-5); scrollbar-width: none; }
.plb-ps__rail::-webkit-scrollbar { display: none; }
.plb-ps__item { scroll-snap-align: start; flex: 0 0 clamp(150px, 44%, 190px); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); text-align: left; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-0); font: inherit; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease; }
.plb-ps__item.is-on { border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.plb-ps__media { aspect-ratio: 4 / 3; display: grid; place-items: center; border: 1px solid var(--border-faint); border-radius: var(--radius-xs); background: var(--surface-1); color: var(--text-subtle); overflow: hidden; }
.plb-ps__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plb-ps__media svg { width: 18px; height: 18px; }
.plb-ps__copy { display: flex; flex-direction: column; gap: var(--space-1); }
.plb-ps__copy strong { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.plb-ps__copy span { font-size: var(--text-2xs); color: var(--text-muted); }
.plb-ps__price { display: flex; align-items: baseline; gap: var(--space-1) var(--space-2); flex-wrap: wrap; }
/* Angka di kartu rail sempit (150–190px) tidak boleh patah di tengah ("Rp / 1.200.000"): satuannya yang turun. */
.plb-ps__price b { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-strong); white-space: nowrap; }
.plb-ps__price span { font-size: var(--text-2xs); color: var(--text-subtle); }
.plb-ps__bar { padding: var(--space-4) var(--space-6) var(--space-5); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; border-top: 1px solid var(--border-default); }
.plb-ps__barcopy { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 140px; }
.plb-ps__barname { font-size: var(--text-2xs); color: var(--text-muted); }
.plb-ps__barprice { display: flex; align-items: baseline; gap: var(--space-2); }
/* Angka dan satuan TIDAK boleh pecah baris — tombolnya yang turun (flex-wrap). */
.plb-ps__barprice b { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); color: var(--text-strong); white-space: nowrap; }
.plb-ps__barprice span { font-size: var(--text-2xs); color: var(--text-subtle); white-space: nowrap; }
/* Kartu sempit: angka 28px + tombol lg tidak muat sebaris → tombol ke bawah, melebar penuh. */
@container (max-width: 420px) {
  .plb-ps__bar { flex-direction: column; align-items: stretch; }
  .plb-ps__bar .plb-cta { width: 100%; display: flex; }
}

/* ── subscription-card (2d) ───────────────────────────────────────────────── */
.plb-sub { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.plb-sub__head { display: flex; flex-direction: column; gap: var(--space-3); }
.plb-sub__kickerrow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.plb-sub__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.plb-sub__value { font-family: var(--font-display); font-size: clamp(var(--text-h3), 5.4cqi, var(--text-h1)); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); line-height: 1; color: var(--text-strong); }
.plb-sub__unit { font-size: var(--text-xs); color: var(--text-subtle); }
.plb-sub__note { font-size: var(--text-xs); color: var(--text-muted); }

/* ── option-card (2f) ─────────────────────────────────────────────────────── */
.plb-oc { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.plb-oc__head { display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }
.plb-oc__thumb { width: 84px; height: 84px; flex: 0 0 auto; border: 1px solid var(--border-faint); border-radius: var(--radius-sm); background: var(--surface-1); overflow: hidden; }
.plb-oc__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plb-oc__titles { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.plb-oc__title { font-size: var(--text-md); line-height: var(--lh-snug); color: var(--text-strong); }
.plb-oc__sub { font-size: var(--text-xs); color: var(--text-muted); }
.plb-oc__options { display: flex; flex-direction: column; gap: var(--space-3); }
.plb-oc__list { display: flex; flex-direction: column; gap: var(--space-3); }
.plb-oc__option { width: 100%; min-height: 44px; padding: 0 var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); text-align: left; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-0); color: var(--text-strong); font: inherit; font-size: var(--text-xs); font-weight: var(--fw-semibold); cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease; }
.plb-oc__option.is-on { border-color: var(--bg-ink); background: var(--bg-ink); color: var(--text-on-dark); }
.plb-oc__optionprice { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-medium); opacity: .8; }
.plb-oc__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-4); border-top: 1px solid var(--border-faint); }
.plb-oc__footcopy { display: flex; flex-direction: column; gap: var(--space-1); }
.plb-oc__footdesc { font-size: var(--text-2xs); color: var(--text-muted); }
.plb-oc__footprice { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); line-height: 1; color: var(--text-strong); }

/* ── ticket-card (2g) ─────────────────────────────────────────────────────── */
.plb-tk { display: flex; flex-direction: column; }
.plb-tk__top { padding: var(--space-5); display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }
.plb-tk__date { width: 64px; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; text-align: center; }
.plb-tk__month { display: block; padding: var(--space-2) 0; background: var(--bg-ink); color: var(--text-on-dark); font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-label-sm); }
.plb-tk__day { display: block; padding: var(--space-3) 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); line-height: 1; color: var(--text-strong); }
.plb-tk__copy { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.plb-tk__copy > span { font-size: var(--text-xs); color: var(--text-muted); }
.plb-tk__title { font-size: var(--text-md); line-height: var(--lh-snug); color: var(--text-strong); }
/* "Sobekan" tiket: garis putus + dua lekukan beralas kanvas. */
.plb-tk__tear { position: relative; height: 1px; margin: 0 var(--space-4); border-top: 1px dashed var(--ink-300); }
.plb-tk__tear::before, .plb-tk__tear::after { content: ""; position: absolute; top: -8px; width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--bg-app); }
.plb-tk__tear::before { left: -22px; border-right: 1px solid var(--border-default); }
.plb-tk__tear::after { right: -22px; border-left: 1px solid var(--border-default); }
.plb-tk__foot { padding: var(--space-5); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.plb-tk__price { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 120px; }
.plb-tk__unit { font-size: var(--text-2xs); color: var(--text-muted); }
.plb-tk__total { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); line-height: 1; color: var(--text-strong); }

/* ── bundle-card (2h) ─────────────────────────────────────────────────────── */
.plb-bd { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.plb-bd__head { display: flex; flex-direction: column; gap: var(--space-2); }
.plb-bd__title { margin: 0; font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); line-height: 1.15; color: var(--text-strong); }
.plb-bd__list { display: flex; flex-direction: column; }
.plb-bd__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border-faint); }
.plb-bd__thumb { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--border-faint); border-radius: var(--radius-xs); background: var(--surface-1); overflow: hidden; }
.plb-bd__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plb-bd__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.plb-bd__name { font-size: var(--text-xs); color: var(--text-strong); }
.plb-bd__desc { font-size: var(--text-2xs); color: var(--text-muted); }
.plb-bd__price { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-subtle); white-space: nowrap; }
.plb-bd__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-4); border-top: 1px solid var(--border-strong); }
.plb-bd__total { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.plb-bd__totalval { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); line-height: 1; color: var(--text-strong); }

/* ── Standar mobile keluarga (owner, 11 Sep 2026) ─────────────────────────────
   Diatur lebar KARTU (container), bukan layar: kartu ≤ 420px = ponsel atau kolom
   sempit. Tangga: harga 24px · judul 20px · angka pendamping 16px · label 11px. */
@container (max-width: 420px) {
  .plb-fo__title { font-size: var(--text-h3); line-height: 1.12; }
  .plb-fo__value { font-size: 24px; }
  .plb-fo[data-variant="strip"] .plb-fo__value { font-size: var(--text-h4); }
  .plb-fo__digits { font-size: var(--text-md); }
  .plb-fo__factval { font-size: var(--text-sm); }
  /* Baris metrik hero: tiga kolom 110px tidak muat di 327px — "Rp 48 M" pecah dan
     menimpa labelnya. Di kartu sempit tiap metrik jadi SATU BARIS (angka kiri,
     label kanan) dipisah garis. */
  .plb-fo__metrics { grid-template-columns: minmax(0, 1fr); }
  .plb-fo__metric { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) clamp(var(--space-5), 5cqi, var(--space-7)); border-right: 0; border-top: 1px solid color-mix(in srgb, var(--vs-white) 10%, transparent); }
  .plb-fo__metric:first-child { border-top: 0; }
  .plb-fo__metric strong { font-size: var(--text-h4); }
  .plb-fo__media { min-height: 180px; }
  .plb-pr__cardprice b { font-size: var(--text-md); }
  .plb-pm__title { font-size: var(--text-h4); }
  .plb-dp__title { font-size: var(--text-h4); }
  .plb-dp__totalval { font-size: 24px; }
  .plb-ac__bartotal { font-size: var(--text-h3); }
  .plb-ps__barprice b { font-size: 24px; }
  .plb-sub__value { font-size: 24px; }
  .plb-oc__footprice { font-size: 24px; }
  .plb-tk__total { font-size: var(--text-h3); }
  .plb-tk__day { font-size: var(--text-h3); }
  .plb-bd__totalval { font-size: 24px; }
  .plb-bd__title { font-size: var(--text-h4); }
}

/* Kepala seksi keluarga (dan tier/compare pricelist) di halaman sempit: 22px,
   tracking display, line-height snug — judul panjang tidak saling menempel. */
@container page (max-width: 680px) {
  .plb .pub-section__title, .plb-pr__title { font-size: var(--text-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-display); overflow-wrap: anywhere; }
  .plb .pub-section__sub { font-size: var(--text-xs); }
  /* Compare/tier di ponsel disamakan dengan standar mobile ("sesuaikan semua"):
     angka 36 → 24px, judul kartu 22 → 20px. */
  .pub-tier__amount { font-size: 24px; }
  .pub-tier__name { font-size: 20px; }
  .pub-compare__col .pub-compare__price { font-size: 24px; }
}

/* ============================================================
   venue2 (17 Sep 2026) — GUI/04/PACKAGE-VENUE-FACT, master "Ruang dan Studio"
   2438-2934. Baris fakta ruang di kartu paket publik: ikon 16 di kiri, teks 13
   text-muted, hanya nama ruang yang tegas. Bukan badge, bukan Tag. Di HP
   maksimal dua baris (aturan master 2930). Konteks 'card' = <p>, 'row' = <span>
   di baris daftar menu. State dipilih/nonaktif/memuat/galat tidak dibangun:
   tidak ada permukaan publik untuknya (galat ditolak owner, Q6).
   (Blok voucher /tiket lama di bawahnya belum dibersihkan; milik INT.)
   ============================================================ */
.pub-venuefact {
  display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; min-width: 0;
  font-size: var(--text-xs); font-weight: var(--fw-regular); line-height: 1.45; /* master 2459 */
  color: var(--text-muted);
}
.pub-venuefact--row { line-height: 1.4; /* master 2718 */ }
.pub-venuefact__icon { display: flex; flex: 0 0 auto; margin-top: 1px; /* master 2460 */ color: var(--ink-400); }
.pub-venuefact__text { min-width: 0; text-wrap: pretty; overflow-wrap: anywhere; }
.pub-venuefact__room { color: var(--text-strong); font-weight: var(--fw-medium); }
@container page (max-width: 680px) {
  .pub-venuefact__text {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden;
  }
}
/* Letak per layout (perataan & jarak milik layout masing-masing). */
.pub-compare__venue { justify-content: center; text-align: left; margin-bottom: var(--space-3); }
.pub-tier__venue { margin-top: var(--space-3); }
.pub-spot__venue { margin-top: var(--space-2); }

.reg-ticket__brand { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-label-sm); text-transform: uppercase; opacity: .7; }
.reg-ticket__coderow { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.reg-ticket__copy { color: inherit; }