/*
 * Satu-satunya file CSS aplikasi. Semua warna & font lewat CSS variables.
 * Nilai di :root ini adalah CADANGAN (sama dengan DEFAULT_THEME di
 * core/branding.py). Nilai aktif disuntikkan di base.html dari SiteSettings.
 */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans/PlusJakartaSans-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #B84F2B;
  --color-primary-hover: #9E4224;
  --color-primary-soft: #F6E3D9;
  --color-sidebar: #1F2A33;
  --color-sidebar-text: #FFFFFF;
  --color-background: #F7EFE7;
  --color-surface: #FFFFFF;
  --color-border: #E7DED5;
  --color-text: #1F2A33;
  --color-text-secondary: #6B635B;
  --color-success: #276B43;
  --color-success-soft: #E3F1E8;
  --color-danger: #C62828;
  --color-danger-soft: #FBE7E7;
  --color-muted: #6F767D;

  --font-plus-jakarta-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-inter: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-utama: var(--font-plus-jakarta-sans);

  --radius: 14px;
  --radius-kecil: 8px;
  --bayangan: 0 1px 2px rgb(31 42 51 / 0.04), 0 1px 3px rgb(31 42 51 / 0.04);
  --lebar-sidebar: 248px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-utama);
  font-size: 0.96875rem; /* 15.5px */
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-background);
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
h1 { font-size: 1.625rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }

p { margin: 0 0 0.75rem; }

a {
  color: var(--color-primary);
  text-underline-offset: 2px;
}
a:hover { color: var(--color-primary-hover); }
/* Tautan langsung di atas latar krem memakai primary_hover (kontras AA). */
.di-latar a { color: var(--color-primary-hover); }

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.teks-kecil { font-size: 0.8125rem; }
.teks-ket { color: var(--color-text-secondary); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.ikon {
  width: 1.125em;
  height: 1.125em;
  flex: none;
  vertical-align: -0.2em;
}

/* ---------- Kerangka ---------- */

.kerangka {
  display: grid;
  grid-template-columns: var(--lebar-sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: var(--color-sidebar);
  color: var(--color-sidebar-text);
  padding: 1.25rem 0.875rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sidebar-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.5rem;
}

.merek {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--color-sidebar-text);
  text-decoration: none;
  min-width: 0;
}
.merek:hover { color: var(--color-sidebar-text); }
.merek-wordmark {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.merek-titik { color: var(--color-primary); }
.merek-app {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0.75;
  white-space: nowrap;
}
/* Logo (gambar berlatar terang) selalu di atas pelat surface bersudut,
   agar terbaca di sidebar gelap maupun latar krem. */
.merek-logo {
  display: block;
  width: auto;
  max-height: 28px;
  max-width: 132px;
  box-sizing: content-box;
  padding: 4px 8px;
  background: var(--color-surface);
  border-radius: var(--radius-kecil);
}
.merek:has(.merek-logo) { align-items: center; }
.polos-merek .merek-logo {
  max-height: 44px;
  max-width: 200px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  box-shadow: var(--bayangan);
}

.tombol-menu {
  display: none;
  background: transparent;
  color: var(--color-sidebar-text);
  border: 1px solid currentColor;
  border-radius: var(--radius-kecil);
  padding: 0.375rem 0.5rem;
  font: inherit;
  cursor: pointer;
}

.nav { display: flex; flex-direction: column; gap: 1rem; }
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-judul {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  padding: 0 0.75rem;
  margin: 0 0 0.25rem;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 0.75rem;
  border-radius: var(--radius-kecil);
  color: var(--color-sidebar-text);
  text-decoration: none;
  font-weight: 500;
}
a.nav-item:hover {
  color: var(--color-sidebar-text);
  background: rgb(255 255 255 / 0.08);
}
.nav-item[aria-current="page"] {
  background: var(--color-primary);
  color: #FFFFFF;
}
.nav-item.nonaktif {
  opacity: 0.6;
  cursor: not-allowed;
}
.nav-label {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0 0.4375rem;
  white-space: nowrap;
}

.sidebar-kaki {
  margin-top: auto;
  font-size: 0.8125rem;
  word-break: break-word;
}

.utama {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.konten {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  padding: 2rem 2rem 1.5rem;
}

.kepala-halaman { margin-bottom: 1.5rem; }
.kepala-halaman p { color: var(--color-text-secondary); margin: 0; }

.kaki {
  padding: 1rem 2rem 1.5rem;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}

/* ---------- Komponen ---------- */

.kartu {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--bayangan);
  padding: 1.25rem 1.5rem;
}
.kartu + .kartu { margin-top: 1rem; }
.grid > .kartu { margin-top: 0; }
.kartu > :last-child { margin-bottom: 0; }

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.baris {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.tumpuk > * + * { margin-top: 1.5rem; }

.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 1.125rem;
  border-radius: var(--radius-kecil);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.tombol-primer {
  background: var(--color-primary);
  color: #FFFFFF;
}
.tombol-primer:hover,
.tombol-primer:active {
  background: var(--color-primary-hover);
  color: #FFFFFF;
}
.tombol-sekunder {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.tombol-sekunder:hover {
  color: var(--color-text);
  border-color: var(--color-text-secondary);
}
.tombol:disabled,
.tombol[aria-disabled="true"] {
  background: var(--color-surface);
  color: var(--color-muted);
  border-color: var(--color-border);
  border-style: dashed;
  cursor: not-allowed;
}

.field { display: grid; gap: 0.375rem; max-width: 28rem; }
.field label { font-weight: 600; }
.field .bantuan { font-size: 0.8125rem; color: var(--color-text-secondary); }
.input {
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-kecil);
  padding: 0.5625rem 0.75rem;
  width: 100%;
}
.input:hover { border-color: var(--color-text-secondary); }
.input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
  border-color: var(--color-primary);
}
.input:disabled { color: var(--color-muted); cursor: not-allowed; }

.unggah {
  display: grid;
  justify-items: center;
  gap: 0.375rem;
  text-align: center;
  padding: 2rem 1.25rem;
  border: 2px dashed var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  cursor: pointer;
}
.unggah strong { font-size: 1.0625rem; }
.unggah .ikon { width: 2rem; height: 2rem; }
.unggah:focus-within {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.unggah input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0;
}

/* Kartu bank: teks saja, tanpa logo bank. */
.kartu-bank {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--bayangan);
  padding: 1.125rem 1.25rem;
  color: var(--color-text);
  text-decoration: none;
}
a.kartu-bank:hover {
  color: var(--color-text);
  border-color: var(--color-primary);
}
.kartu-bank-singkatan {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.kartu-bank-nama {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}
.kartu-bank.segera {
  color: var(--color-muted);
  cursor: not-allowed;
}
.kartu-bank.segera .kartu-bank-nama { color: var(--color-muted); }
.kartu-bank .chip { margin-top: 0.625rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip-berhasil { background: var(--color-success-soft); color: var(--color-success); }
.chip-selisih,
.chip-gagal { background: var(--color-danger-soft); color: var(--color-danger); }
.chip-diproses { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.chip-segera {
  background: var(--color-surface);
  color: var(--color-muted);
  border-color: var(--color-border);
}

/* Tabel angka */
.tabel-bungkus {
  /* relative: elemen absolute di dalam tabel (mis. .sr-only) ikut tergulir di
     sini, tidak melebarkan halaman di layar ponsel. */
  position: relative;
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--bayangan);
}
.tabel {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  font-size: 0.875rem;
}
.tabel th,
.tabel td {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.tabel thead th {
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel .angka {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tabel tr.baris-selisih td { background: var(--color-danger-soft); }
.teks-selisih {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-danger);
  font-weight: 600;
  font-size: 0.8125rem;
}

.swatch {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
}
.swatch-warna {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-kecil);
  border: 1px solid var(--color-border);
  flex: none;
}

/* ---------- Header aplikasi & menu akun ---------- */

.kepala-app {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.75rem 2rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.menu-akun { position: relative; }
.menu-akun summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
.menu-akun summary::-webkit-details-marker { display: none; }
.menu-akun summary:hover { background: var(--color-background); }
.menu-akun-nama {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-weight: 700;
}
.menu-akun-isi {
  position: absolute;
  right: 0;
  top: calc(100% + 0.375rem);
  z-index: 20;
  width: max-content;
  min-width: 14rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.375rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-kecil);
  box-shadow: 0 8px 24px rgb(31 42 51 / 0.12);
}
.menu-akun-email {
  margin: 0;
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--color-border);
  overflow-wrap: anywhere;
}
.menu-akun-isi a,
.menu-akun-isi button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-akun-isi a:hover,
.menu-akun-isi button:hover {
  background: var(--color-background);
  color: var(--color-text);
}

/* ---------- Pesan & galat ---------- */

.daftar-pesan { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.pesan {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-kecil);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.pesan .ikon { margin-top: 0.15em; }
.pesan-berhasil { background: var(--color-success-soft); border-color: transparent; color: var(--color-success); }
.pesan-galat { background: var(--color-danger-soft); border-color: transparent; color: var(--color-danger); }
.galat-field {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-danger);
  font-size: 0.8125rem;
  font-weight: 600;
}
.input[aria-invalid="true"] { border-color: var(--color-danger); }

/* ---------- Halaman polos (masuk/daftar) ---------- */

.polos {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.polos-utama {
  flex: 1;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  padding: 3rem 1rem 1.5rem;
}
.polos-merek { text-align: center; margin-bottom: 1.5rem; }
.polos-merek .merek { justify-content: center; }
.polos-merek p { margin: 0.5rem 0 0; }
.merek-gelap,
.merek-gelap:hover { color: var(--color-text); }
.merek-gelap .merek-app { color: var(--color-text-secondary); opacity: 1; }
.polos-kaki { text-align: center; }
.kartu-masuk { padding: 1.75rem; }
.kartu-masuk h1 { font-size: 1.375rem; }

.form-masuk { display: grid; gap: 1rem; margin-bottom: 1rem; }
.field-penuh { max-width: none; }
.tombol-penuh { width: 100%; }
.input-kode {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-align: center;
  text-transform: uppercase;
}
.kartu-masuk input:not([type="checkbox"], [type="radio"], [type="hidden"]):not(.input) {
  font: inherit;
  width: 100%;
  padding: 0.5625rem 0.75rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-kecil);
}

.pemisah-atau {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}
.pemisah-atau::before,
.pemisah-atau::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-border);
}

.tombol-tautan {
  background: none;
  border: 0;
  padding: 0.25rem 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.tombol-tautan:hover { color: var(--color-primary-hover); }
.baris-tengah { justify-content: center; gap: 1.5rem; margin-bottom: 0.75rem; }

/* ---------- Dasbor & akun ---------- */

.judul-ikon { display: flex; align-items: center; gap: 0.5rem; }
.judul-ikon .ikon { color: var(--color-primary); }
.daftar-data {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.25rem;
}
.daftar-data dt { color: var(--color-text-secondary); }
.daftar-data dd { margin: 0; font-weight: 500; word-break: break-all; }
.kartu-bahaya { border-color: var(--color-danger-soft); }
.tombol-bahaya { background: var(--color-danger); color: #FFFFFF; }
.tombol-bahaya:hover,
.tombol-bahaya:active { background: var(--color-danger); color: #FFFFFF; filter: brightness(0.9); }

/* ---------- Login email + password ---------- */

.tombol-google {
  min-height: 3rem;
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
  font-size: 1rem;
}
.tombol-google:hover {
  color: var(--color-text);
  border-color: var(--color-text-secondary);
}
.label-baris {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}
.label-baris label { font-weight: 600; }
.centang {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.centang input {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-primary);
}
.kartu-form { max-width: 32rem; }
.kartu-masuk label { font-weight: 600; }
.kartu-masuk .centang { font-weight: 500; }
.kartu-masuk h1 + .pesan { margin-bottom: 0.75rem; }

.banner-verifikasi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  padding: 0.875rem 1rem;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  border-radius: var(--radius);
}
.banner-verifikasi p { flex: 1 1 18rem; margin: 0; }

/* ---------- Paket & kuota ---------- */

.kartu-kuota {
  display: grid;
  gap: 0.375rem;
  padding: 0.875rem;
  border-radius: var(--radius);
  border: 1px solid rgb(255 255 255 / 0.16);
  background: rgb(255 255 255 / 0.06);
  color: var(--color-sidebar-text);
}
.kartu-kuota p { margin: 0; }
.kartu-kuota-judul {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kartu-kuota-nama { font-weight: 700; font-size: 0.875rem; }
.kartu-kuota-ket { font-size: 0.75rem; }
.kartu-kuota .tombol { margin-top: 0.375rem; min-height: 2.25rem; }
.bar {
  height: 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.18);
  overflow: hidden;
}
.bar span {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: inherit;
}

.kartu-ajakan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  background: var(--color-primary-soft);
  border-color: transparent;
  color: var(--color-primary-hover);
}
.kartu-ajakan h2 { margin-bottom: 0.25rem; }
.kartu-ajakan .teks-ket { color: var(--color-primary-hover); margin: 0; }

.grup-paket { margin-bottom: 2rem; }
.grid-paket { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.kartu-paket { display: flex; flex-direction: column; gap: 0.5rem; }
.kartu-paket h3 { margin: 0; font-size: 1.125rem; }
.kartu-paket .tombol { margin-top: auto; }
.kartu-paket-populer { border: 2px solid var(--color-primary); }
.kartu-paket-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.kartu-paket > p { margin: 0; }
.harga {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.harga .teks-ket { font-size: 0.875rem; font-weight: 500; }
.harga-periode { display: block; margin-top: 0.125rem; }
.daftar-fitur {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: grid;
  gap: 0.375rem;
  font-size: 0.875rem;
}
.daftar-fitur li { display: flex; gap: 0.5rem; align-items: flex-start; }
.daftar-fitur .ikon { color: var(--color-primary); margin-top: 0.15em; }

.angka-besar {
  font-size: 1.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.25rem;
}
.angka-besar span { font-size: 1rem; font-weight: 500; color: var(--color-text-secondary); }
.tumpuk-atas { margin-top: 2rem; }
.pesan-info { background: var(--color-primary-soft); border-color: transparent; color: var(--color-primary-hover); }

/* ---------- Status job konversi ---------- */

#status-job { display: grid; gap: 0.875rem; justify-items: start; }
#status-job > * { margin: 0; }
#status-job .pesan { justify-self: stretch; }

/* ---------- Batch konversi ---------- */

.progres {
  height: 8px;
  margin: 0.875rem 0 0.375rem;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}
.progres span { display: block; height: 100%; background: var(--color-primary); }
.daftar-file, .daftar-bulan { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.daftar-file li, .daftar-bulan li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-kecil);
  border-bottom: 1px solid var(--color-border);
}
.daftar-file li > span:first-child, .daftar-bulan li > span:first-child { min-width: 11rem; font-weight: 500; }
/* Chip panjang boleh turun baris agar tidak keluar kartu di ponsel. */
.daftar-file li .chip, .daftar-bulan li .chip { white-space: normal; max-width: 100%; }
.daftar-bulan li.bermasalah { background: var(--color-danger-soft); }
.teks-galat { color: var(--color-danger); }

/* ---------- Pemeriksaan batch ---------- */

.pilihan { border: 0; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pilihan legend { font-weight: 600; margin-bottom: 0.25rem; }
.opsi-hasil {
  display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer;
  padding: 0.625rem 0.75rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-kecil); background: var(--color-surface);
}
.opsi-hasil:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.opsi-hasil input { margin-top: 0.2rem; width: 1.125rem; height: 1.125rem; flex: none; accent-color: var(--color-primary); }
.opsi-hasil strong { display: block; }
.opsi-hasil:has(input:checked) strong { color: var(--color-primary-hover); }
.opsi-ket { display: block; font-size: 0.875rem; color: var(--color-text-secondary); }
.opsi-hasil:has(input:checked) .opsi-ket { color: var(--color-text); }
.opsi-nonaktif { cursor: not-allowed; opacity: 0.7; }
.kartu-terkunci h2 { margin-top: 0; }
.form-password { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.form-password-semua {
  display: grid; gap: 0.375rem; margin: 0.75rem 0 0.25rem; padding: 0.75rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-kecil);
}
.form-password-semua label { font-weight: 600; }
.baris-password { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.baris-password .input { flex: 1 1 12rem; width: auto; }
.form-password .input-kecil { width: 11rem; max-width: 100%; }
.aksi-terkunci { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; }
.input-kecil { width: auto; padding: 0.3125rem 0.5rem; font-size: 0.875rem; }
.kepala-kelompok { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.tombol-tautan-polos { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.kotak-centang {
  display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--color-primary); border-radius: 4px;
  color: var(--color-primary); font-weight: 800; font-size: 0.875rem;
}
.kartu-redup { opacity: 0.7; }
.kisi-bulan {
  display: grid; gap: 0.5rem; margin-top: 0.875rem;
  grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr));
}
.sel-bulan {
  display: grid; gap: 0.25rem; align-content: start; min-width: 0;
  padding: 0.625rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-kecil); background: var(--color-surface);
}
.sel-bulan .chip { justify-self: start; }
.sel-label { font-weight: 700; }
.sel-hilang, .sel-ganda { background: var(--color-danger-soft); border-color: transparent; }
.sel-di_luar { opacity: 0.6; }
.form-slot { display: grid; gap: 0.25rem; min-width: 0; }
.form-slot .input { width: 100%; min-width: 0; }
.form-baris { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; align-items: center; min-width: 0; }
.daftar-file li.bermasalah { background: var(--color-danger-soft); }
.progres-berjalan span { width: 40%; animation: progres-geser 1.2s ease-in-out infinite alternate; }
@keyframes progres-geser { from { margin-left: 0; } to { margin-left: 60%; } }
@media (prefers-reduced-motion: reduce) { .progres-berjalan span { animation: none; } }

/* ---------- Ponsel ---------- */

@media (max-width: 860px) {
  .kerangka { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .sidebar {
    position: sticky;
    z-index: 10;
    height: auto;
    padding: 0.75rem 1rem;
    gap: 0;
  }
  .sidebar-kepala { padding: 0; }
  .tombol-menu { display: inline-flex; }
  .js .sidebar .nav,
  .js .sidebar .sidebar-kaki { display: none; }
  .js .sidebar.terbuka .nav,
  .js .sidebar.terbuka .sidebar-kaki { display: flex; }
  .sidebar.terbuka { max-height: 100vh; overflow-y: auto; }
  .sidebar.terbuka .nav { margin-top: 1rem; }
  .sidebar.terbuka .sidebar-kaki { margin-top: 1rem; padding-bottom: 0.5rem; display: block; }
  .konten { padding: 1.25rem 1rem; }
  .kaki { padding: 0.75rem 1rem 1.25rem; }
  .kepala-app { padding: 0.5rem 1rem; }
  .menu-akun-nama { max-width: 10rem; }
  .polos-utama { padding-top: 1.5rem; }
  .kartu-masuk { padding: 1.25rem; }
  .kartu { padding: 1rem; }
}

/* =====================================================================
 * LAPISAN VISUAL v2 (redesain 12/10/2026)
 * Hanya tampilan: menimpa gaya di atas lewat urutan cascade.
 * Semua warna tetap dari token tema (--color-*). Untuk kembali ke
 * tampilan lama, hapus seluruh blok ini sampai akhir file.
 * ===================================================================== */

:root {
  --radius: 16px;
  --radius-kecil: 10px;
  --bayangan: 0 1px 2px rgb(31 42 51 / 0.04), 0 2px 8px rgb(31 42 51 / 0.04);
  --bayangan-angkat: 0 1px 2px rgb(31 42 51 / 0.05), 0 12px 32px rgb(31 42 51 / 0.08);
  --lebar-sidebar: 260px;
  --garis-halus: color-mix(in srgb, var(--color-border) 65%, var(--color-surface));
}

body {
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1 { font-size: 1.75rem; letter-spacing: -0.02em; }
h2 { font-size: 1.1875rem; letter-spacing: -0.01em; }
h3 { font-size: 1.0625rem; }
::selection { background: var(--color-primary-soft); color: var(--color-primary-hover); }

/* ---------- Sidebar ---------- */

.sidebar {
  padding: 1.25rem 0.875rem 1rem;
  gap: 1.5rem;
  border-right: 1px solid rgb(255 255 255 / 0.04);
}
.sidebar-kepala { padding: 0.25rem 0.5rem; }
.merek-wordmark { font-size: 1.3125rem; letter-spacing: -0.02em; }
.merek-app {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 1;
  color: color-mix(in srgb, var(--color-sidebar-text) 70%, transparent);
  padding: 0.125rem 0.375rem;
  border: 1px solid color-mix(in srgb, var(--color-sidebar-text) 22%, transparent);
  border-radius: 6px;
}
.sidebar .merek-logo {
  max-height: 30px;
  padding: 6px 10px;
  border-radius: var(--radius-kecil);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
}

.nav { gap: 1.25rem; }
.nav-judul {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 1;
  color: color-mix(in srgb, var(--color-sidebar-text) 60%, transparent);
  margin-bottom: 0.375rem;
}
.nav-item {
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-kecil);
  color: color-mix(in srgb, var(--color-sidebar-text) 86%, transparent);
  font-size: 0.9375rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-item .ikon { opacity: 0.85; }
a.nav-item:hover {
  color: var(--color-sidebar-text);
  background: rgb(255 255 255 / 0.07);
}
.nav-item[aria-current="page"] {
  background: var(--color-primary);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 2px 6px rgb(0 0 0 / 0.18);
}
.nav-item[aria-current="page"] .ikon { opacity: 1; }

.sidebar-kaki { padding: 0; }
.kartu-kuota {
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid rgb(255 255 255 / 0.09);
  background: rgb(255 255 255 / 0.05);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.kartu-kuota-judul {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--color-sidebar-text) 60%, transparent);
}
.kartu-kuota-nama { font-size: 0.9375rem; }
.kartu-kuota-ket { font-size: 0.75rem; color: color-mix(in srgb, var(--color-sidebar-text) 70%, transparent); }
.kartu-kuota .bar { height: 6px; background: rgb(255 255 255 / 0.12); margin: 0.125rem 0; }
.kartu-kuota .tombol { margin-top: 0.5rem; min-height: 2.5rem; font-size: 0.875rem; }

/* ---------- Bilah atas ---------- */

.kepala-app {
  position: sticky;
  top: 0;
  z-index: 15;
  gap: 0.75rem;
  min-height: 4rem;
  padding: 0.75rem 2rem;
  background: color-mix(in srgb, var(--color-background) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.kepala-app-aksi { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.menu-akun summary { padding: 0.25rem 0.625rem 0.25rem 0.25rem; min-height: 2.75rem; }
.menu-akun summary:hover { background: var(--color-surface); }
.avatar {
  width: 2.125rem;
  height: 2.125rem;
  background: var(--color-sidebar);
  color: var(--color-sidebar-text);
  font-size: 0.875rem;
}
.menu-akun-isi {
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: var(--bayangan-angkat);
}

/* ---------- Konten & kepala halaman ---------- */

.konten { max-width: 1200px; padding: 2rem 2.25rem 1.5rem; }
.kepala-halaman { margin-bottom: 1.75rem; }
.kepala-halaman h1 { margin-bottom: 0.25rem; }
.kepala-halaman p { font-size: 0.9375rem; }
.label-atas {
  display: block;
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary-hover);
}
.kaki { padding: 1.25rem 2.25rem 1.75rem; font-size: 0.8125rem; }

/* ---------- Kartu, tombol, input ---------- */

.kartu {
  border-radius: var(--radius);
  box-shadow: var(--bayangan);
  padding: 1.375rem 1.5rem;
}
.kartu h2 { font-size: 1.0625rem; }
.grid { gap: 1rem; }

.tombol {
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border-radius: var(--radius-kecil);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.tombol:active { transform: translateY(1px); }
.tombol-primer {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 1px 2px color-mix(in srgb, var(--color-primary-hover) 40%, transparent);
}
.tombol-primer:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 4px 12px color-mix(in srgb, var(--color-primary) 28%, transparent); }
.tombol-sekunder { box-shadow: 0 1px 2px rgb(31 42 51 / 0.04); }
.tombol-sekunder:hover { background: var(--color-surface); border-color: var(--color-text-secondary); }
.tombol .ikon { width: 1.125rem; height: 1.125rem; }

.input,
.kartu-masuk input:not([type="checkbox"], [type="radio"], [type="hidden"]):not(.input) {
  min-height: 2.875rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-kecil);
  border-color: color-mix(in srgb, var(--color-border) 70%, var(--color-text-secondary));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus-visible,
.kartu-masuk input:focus-visible {
  outline: 0;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}
.field { gap: 0.4375rem; }
.field label, .label-baris label { font-size: 0.875rem; }

.chip {
  gap: 0.3125rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.78125rem;
  font-weight: 600;
}
.chip .ikon { width: 0.95rem; height: 0.95rem; }

.pesan { border-radius: 12px; padding: 0.75rem 1rem; }
.banner-verifikasi {
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  border-radius: 14px;
  padding: 1rem 1.125rem;
}

/* ---------- Tabel ---------- */

.tabel-bungkus { border-radius: var(--radius); }
.tabel { font-size: 0.875rem; }
.tabel th,
.tabel td { padding: 0.8125rem 1.125rem; border-bottom-color: var(--garis-halus); vertical-align: middle; }
.tabel thead th {
  background: color-mix(in srgb, var(--color-background) 55%, var(--color-surface));
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom-color: var(--color-border);
}
.tabel tbody tr { transition: background-color 0.12s ease; }
.tabel tbody tr:hover td { background: color-mix(in srgb, var(--color-background) 40%, var(--color-surface)); }
.tabel tbody tr.baris-selisih:hover td { background: var(--color-danger-soft); }

/* ---------- Dasbor ---------- */

.kepala-dasbor {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.kartu-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1.5rem;
  padding: 1.75rem;
  margin-bottom: 1rem;
}
.hero-teks {
  flex: 1 1 20rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
}
.hero-teks h2 { margin: 0; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.02em; }
.hero-teks p { margin: 0; color: var(--color-text-secondary); }
.hero-poin {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.hero-poin li { display: flex; align-items: flex-start; gap: 0.5rem; }
.hero-poin .ikon { color: var(--color-success); margin-top: 0.1em; }
.hero-unggah {
  flex: 1 1 18rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
  text-decoration: none;
  color: var(--color-primary-hover);
  background: var(--color-primary-soft);
  border: 2px dashed color-mix(in srgb, var(--color-primary) 45%, transparent);
  border-radius: 14px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.hero-unggah:hover {
  color: var(--color-primary-hover);
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary-soft) 80%, var(--color-surface));
}
.hero-unggah-ikon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.hero-unggah-ikon .ikon { width: 1.625rem; height: 1.625rem; }
.hero-unggah strong { font-size: 1.0625rem; }
.hero-unggah > span:not(.hero-unggah-ikon):not(.tombol) { font-size: 0.8125rem; }
.hero-unggah .tombol { margin-top: 0.5rem; }

.grid-statistik { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kartu-statistik { display: flex; flex-direction: column; gap: 0.375rem; }
.kartu-statistik .judul-ikon {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0.25rem;
}
.kartu-statistik .judul-ikon .ikon {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.3125rem;
  border-radius: 8px;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}
.kartu-statistik p { margin: 0; }
.kartu-statistik .tombol { align-self: flex-start; margin-top: 0.5rem; }
.angka-besar { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }

.bagian-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}
.bagian-kepala h2 { margin: 0; }
.bagian-kepala a { font-size: 0.875rem; font-weight: 600; }

/* ---------- Paket ---------- */

.kartu-paket { gap: 0.625rem; padding: 1.5rem; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.kartu-paket:hover { box-shadow: var(--bayangan-angkat); }
.kartu-paket-populer { box-shadow: var(--bayangan-angkat); }
.harga { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.daftar-fitur { gap: 0.5rem; }
.kartu-ajakan { border-radius: var(--radius); padding: 1.5rem 1.75rem; }

/* ---------- Halaman masuk / daftar ---------- */

.polos {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  min-height: 100vh;
}
.polos-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 3rem 3.5rem;
  background: var(--color-sidebar);
  color: var(--color-sidebar-text);
  overflow: hidden;
}
.polos-panel .merek { color: var(--color-sidebar-text); }
.polos-panel-isi { display: flex; flex-direction: column; gap: 1rem; max-width: 30rem; }
.polos-panel h2 { margin: 0; font-size: 2rem; line-height: 1.18; letter-spacing: -0.025em; }
.polos-panel-isi > p { margin: 0; font-size: 1rem; color: color-mix(in srgb, var(--color-sidebar-text) 78%, transparent); }
.polos-poin { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.125rem; max-width: 30rem; }
.polos-poin li { display: flex; gap: 0.875rem; align-items: flex-start; }
.polos-poin-ikon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.08);
  color: var(--color-sidebar-text);
}
.polos-poin strong { display: block; font-size: 0.9375rem; }
.polos-poin span span { display: block; font-size: 0.875rem; color: color-mix(in srgb, var(--color-sidebar-text) 72%, transparent); }
.polos-panel-kaki {
  margin: auto 0 0;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--color-sidebar-text) 65%, transparent);
}
.polos-kanan {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.polos-utama {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 30rem;
  margin: 0;
  padding: 3rem 1.5rem 1rem;
}
.polos-utama .polos-merek { display: none; }
.kartu-masuk {
  padding: 2rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.kartu-masuk h1 { font-size: 1.75rem; margin-bottom: 0.375rem; }
.tombol-google { min-height: 3rem; box-shadow: 0 1px 2px rgb(31 42 51 / 0.05); }

.merek-gelap .merek-app { border-color: var(--color-border); }

/* Kolom sidebar tetap gelap sampai bawah walau halaman panjang. */
.kerangka { background: linear-gradient(to right, var(--color-sidebar) var(--lebar-sidebar), transparent 0); }
/* Di layar lebar, kaki halaman sudah ada di panel kiri. */
.polos-kanan .polos-kaki { display: none; }

/* ---------- Ponsel (v2) ---------- */

@media (max-width: 1024px) {
  .polos { grid-template-columns: minmax(0, 1fr); }
  .polos-panel { display: none; }
  .polos-utama .polos-merek { display: block; }
  .polos-kanan .polos-kaki { display: block; }
  .kartu-masuk {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--bayangan);
  }
}

@media (max-width: 860px) {
  .kerangka { background: none; }
  .sidebar { padding: 0.75rem 1rem; gap: 0; border-right: 0; }
  .kepala-app { position: static; padding: 0.5rem 1rem; min-height: 3.5rem; backdrop-filter: none; }
  .kepala-app-aksi .tombol-baru span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .konten { padding: 1.25rem 1rem; }
  .kaki { padding: 0.75rem 1rem 1.25rem; }
  .kartu-hero { padding: 1.25rem; }
  .hero-teks h2 { font-size: 1.25rem; }
  .angka-besar { font-size: 1.75rem; }
  .kartu-masuk { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tombol, .nav-item, .kartu-paket, .hero-unggah, .tabel tbody tr { transition: none; }
}

/* ---------- Proses lama & pembatalan ---------- */
.kotak-proses-lama { align-items: flex-start; margin-top: 0.75rem; }
.kotak-proses-lama form { margin-top: 0.5rem; }
.tumpuk-kecil { display: grid; gap: 0.25rem; }

/* =====================================================================
 * PAPAN PERIODE (pemeriksaan batch gabung) — redesain 12/10/2026
 * Hanya tampilan. Untuk kembali ke tampilan sebelumnya, hapus blok ini
 * sampai akhir file (dan blok "Papan periode" di static/js/app.js).
 * ===================================================================== */

.papan-kelompok { display: grid; gap: 0.875rem; }
.papan-kelompok .kepala-kelompok { gap: 0.5rem 1rem; }
.papan-kelompok .kepala-kelompok .centang { text-align: left; }
.papan-bulan .form-slot .input { font-size: 0.8125rem; }
.papan-kelompok .kepala-kelompok strong { font-size: 1.0625rem; letter-spacing: -0.01em; }
.kotak-centang {
  display: inline-grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 6px;
  border: 2px solid var(--color-primary);
  color: var(--color-primary-hover);
  font-weight: 800;
  font-size: 0.8125rem;
}
.papan-petunjuk { margin: 0; }

.strip-bulan {
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 14px;
  gap: 3px;
}
.strip-bulan li { height: 10px; border-radius: 3px; border: 1.5px dashed color-mix(in srgb, var(--color-text-secondary) 55%, transparent); }
.strip-bulan li.strip-isi, .strip-bulan li.strip-hilang { border: 0; }
.strip-bulan .strip-terdeteksi { background: var(--color-success); }
.strip-bulan .strip-dikoreksi { background: var(--color-text-secondary); }
.strip-bulan .strip-ganda { background: var(--color-danger); }
.strip-bulan .strip-hilang { background: var(--color-danger-soft); box-shadow: inset 0 0 0 1.5px var(--color-danger); }

.kisi-bulan.papan-bulan {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}
.papan-bulan .sel-bulan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  min-height: 7.5rem;
  padding: 0.75rem;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  opacity: 1;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.papan-bulan .sel-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.375rem; }
.papan-bulan .sel-label { font-size: 0.9375rem; font-weight: 700; }
.papan-bulan .sel-bulan .chip { font-size: 0.71875rem; padding: 0.125rem 0.5rem; }
.papan-bulan .sel-di_luar {
  background: transparent;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--color-text-secondary) 35%, transparent);
}
.papan-bulan .sel-di_luar .sel-label { color: var(--color-text-secondary); }
.papan-bulan .sel-kosong { color: var(--color-text-secondary); }
.papan-bulan .sel-ganda { border: 2px solid var(--color-danger); background: var(--color-surface); }
.papan-bulan .sel-hilang { border: 1.5px dashed var(--color-danger); background: color-mix(in srgb, var(--color-danger-soft) 55%, var(--color-surface)); }
.papan-bulan .sel-dikoreksi { border-color: color-mix(in srgb, var(--color-text-secondary) 45%, var(--color-border)); }
.papan-bulan .sel-bulan.sasaran-seret {
  border: 2px solid var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Chip file + menu kecil */
.berkas-chip { position: relative; }
.berkas-chip > summary {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: grab;
  list-style: none;
  box-shadow: 0 1px 2px rgb(31 42 51 / 0.05);
}
.berkas-chip > summary::-webkit-details-marker { display: none; }
.berkas-chip > summary:hover { border-color: var(--color-text-secondary); }
.berkas-chip[open] > summary {
  border: 2px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary-soft) 40%, var(--color-surface));
}
.berkas-chip.diseret { opacity: 0.45; }
.berkas-chip-ikon {
  flex: none;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-primary-hover);
  background: var(--color-primary-soft);
  border-radius: 5px;
  padding: 0.125rem 0.3125rem;
}
.berkas-chip-nama { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.berkas-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.375rem);
  left: 0;
  width: max-content;
  min-width: 15rem;
  max-width: min(20rem, 80vw);
  display: grid;
  gap: 0.75rem;
  padding: 0.875rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--bayangan-angkat);
}
.berkas-popover-dasar { margin: 0; font-size: 0.8125rem; color: var(--color-text-secondary); }
.berkas-popover-dasar:empty { display: none; }
.form-pindah { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.375rem 0.5rem; align-items: center; }
.form-pindah label { grid-column: 1 / -1; font-size: 0.8125rem; font-weight: 600; }
.form-pindah .input { min-height: 2.5rem; }
.tombol-kecil { min-height: 2.5rem; padding: 0.375rem 0.875rem; font-size: 0.875rem; }
.tombol-tautan-bahaya { color: var(--color-danger); }
.tombol-tautan-bahaya:hover { color: var(--color-danger); filter: brightness(0.85); }

/* Slot hilang: tombol tambah file */
.papan-bulan .form-slot { gap: 0.375rem; margin-top: auto; }
.tombol-tambah-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.5rem;
  border-radius: 10px;
  border: 1.5px dashed var(--color-danger);
  color: var(--color-danger);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--color-surface);
}
.tombol-tambah-slot:hover { background: var(--color-danger-soft); }
.tombol-tambah-slot:focus-within { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* Nampan "Belum ditempatkan" */
.nampan-berkas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  background: var(--color-primary-soft);
  border: 1.5px dashed color-mix(in srgb, var(--color-primary) 45%, transparent);
  box-shadow: none;
}
.nampan-teks { flex: 1 1 18rem; }
.nampan-teks h2 { margin: 0; font-size: 1rem; color: var(--color-primary-hover); }
.nampan-teks p { margin: 0; font-size: 0.875rem; color: var(--color-primary-hover); }
.nampan-isi { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Daftar lengkap file: dilipat di mode gabung */
.kartu-lipat > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  cursor: pointer;
  list-style: none;
}
.kartu-lipat > summary::-webkit-details-marker { display: none; }
.kartu-lipat > summary h2 { margin: 0; font-size: 1.0625rem; }
.kartu-lipat > summary::after {
  content: "";
  margin-left: auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--color-text-secondary);
  border-bottom: 2px solid var(--color-text-secondary);
  transform: rotate(45deg);
  align-self: center;
  transition: transform 0.15s ease;
}
.kartu-lipat[open] > summary::after { transform: rotate(-135deg); }

/* Bilah "Siap dikonversi" menempel di bawah layar */
.bilah-konversi {
  position: sticky;
  bottom: 0.75rem;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 1rem 1.25rem;
  box-shadow: var(--bayangan-angkat);
}
.bilah-konversi-ringkas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; flex: 1 1 26rem; }
.bilah-konversi-ringkas h2 { margin: 0; font-size: 1rem; }
.bilah-konversi .daftar-data {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.375rem;
  margin: 0;
  font-size: 0.875rem;
}
.bilah-konversi .daftar-data dt { margin: 0; }
.bilah-konversi .daftar-data dt::after { content: ":"; }
.bilah-konversi .daftar-data dd { margin: 0 1rem 0 0; font-weight: 700; word-break: normal; white-space: nowrap; }
.bilah-konversi > .pesan { flex: 1 1 100%; order: 3; }
.bilah-konversi-aksi { margin-left: auto; }
.bilah-konversi-aksi .tombol-primer { min-width: 9rem; }
.bilah-konversi-catatan { flex: 1 1 100%; margin: 0; order: 4; }

@media (max-width: 1200px) {
  .kisi-bulan.papan-bulan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .kisi-bulan.papan-bulan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip-bulan { margin-left: 0; }
  .bilah-konversi { position: static; }
  .berkas-chip-ikon { display: none; }
  .bilah-konversi-aksi { width: 100%; }
  .bilah-konversi-aksi form:last-child { flex: 1; }
  .bilah-konversi-aksi .tombol-primer { width: 100%; }
  .berkas-popover { left: auto; right: -0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .papan-bulan .sel-bulan, .kartu-lipat > summary::after { transition: none; }
}

/* ---------- Baris info file (nama file → hasil deteksi) ---------- */
.info-file { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.375rem; min-width: 0; }
.nama-file { font-weight: 600; overflow-wrap: anywhere; }
.panah-info { color: var(--color-text-secondary); }
.rincian-info { color: var(--color-text); }
.tidak-terbaca { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--color-danger); font-weight: 600; }
.tidak-terbaca .ikon { width: 0.95rem; height: 0.95rem; }
.label-file { font-weight: 700; margin-right: 0.25rem; }
/* Chip file: nama file asli (maks 4 baris) di atas, "File n · hal" kecil di bawah. */
.berkas-chip-nama { display: grid; gap: 0.0625rem; white-space: normal; overflow: hidden; }
.berkas-chip-file {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; font-size: 0.75rem; font-weight: 600; line-height: 1.3;
}
.berkas-chip-meta { font-size: 0.6875rem; font-weight: 500; color: var(--color-text-secondary); white-space: nowrap; }
.sel-bulan .berkas-chip-ikon { display: none; }
.pemilik-kelompok { font-weight: 600; }

/* ---------- Invoice ---------- */
.total-invoice { align-items: center; }
.total-besar { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.angka-rekening { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.qris { margin: 0; display: grid; gap: 0.375rem; justify-items: start; }
.qris img { border: 1px solid var(--color-border); border-radius: 12px; background: #fff; padding: 0.5rem; max-width: 100%; height: auto; }
.tutup-beli { text-align: center; margin: 0; }
.banner-invoice { margin-bottom: 1rem; }

/* =====================================================================
 * HALAMAN PAKET v2 — redesain 13/10/2026
 * Hanya tampilan. Untuk kembali, hapus blok ini sampai akhir file (dan
 * blok "Halaman Paket" di static/js/app.js).
 * ===================================================================== */

.kepala-paket { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; }
.kepala-paket > div:first-child { max-width: 44rem; }
.kepala-paket h1 { font-size: 2rem; }
.kuota-saat-ini {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.kuota-saat-ini > span:last-child { display: grid; line-height: 1.3; }
.kuota-saat-ini-ikon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.bantu-pilih {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
  padding: 1.125rem 1.375rem;
  border-radius: var(--radius);
  background: var(--color-sidebar);
  color: var(--color-sidebar-text);
}
.bantu-pilih[hidden] { display: none; }
.bantu-pilih-input { flex: 1 1 18rem; display: grid; gap: 0.5rem; }
.bantu-pilih-input label { font-weight: 700; }
.bantu-pilih-input input { width: 100%; accent-color: var(--color-primary); }
.bantu-pilih-hasil { flex: 1 1 18rem; margin: 0; font-size: 0.9375rem; color: color-mix(in srgb, var(--color-sidebar-text) 88%, transparent); }
.bantu-pilih-hasil strong { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-sidebar-text); margin-right: 0.25rem; }

.grid-paket-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.125rem;
  align-items: stretch;
  margin-bottom: 1.75rem;
}
.grid-paket-v2 .kartu-paket {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: 20px;
}
.grid-paket-v2 .kartu-paket + .kartu-paket { margin-top: 0; }
.paket-jenis {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-hover);
}
.grid-paket-v2 .kartu-paket-kepala { display: grid; gap: 0.375rem; justify-items: start; }
.grid-paket-v2 .kartu-paket h3 { margin: 0; font-size: 1.375rem; letter-spacing: -0.015em; }
.paket-deskripsi { margin: 0; font-size: 0.875rem; color: var(--color-text-secondary); }
.paket-harga .harga { margin: 0; font-size: clamp(1.5rem, 2.1vw, 1.875rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; white-space: nowrap; }
.paket-harga .harga-periode { display: block; margin: 0.125rem 0 0; font-size: 0.9375rem; font-weight: 600; color: var(--color-text-secondary); letter-spacing: 0; }
.harga-sub { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--color-text-secondary); }
.paket-per-satuan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: 12px;
  background: var(--color-background);
  font-size: 0.8125rem;
}
.paket-per-satuan strong { font-size: 1rem; white-space: nowrap; }
.paket-per-satuan span { min-width: 0; }
.paket-alternatif {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem 0.875rem;
  border-radius: 12px;
  background: var(--color-success-soft);
  color: var(--color-success);
  text-decoration: none;
  font-size: 0.875rem;
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
}
.paket-alternatif:hover { color: var(--color-success); border-color: var(--color-success); }
.paket-alternatif-judul { display: flex; align-items: center; gap: 0.375rem; font-weight: 700; font-size: 0.8125rem; }
.paket-alternatif strong { font-size: 1rem; }
.grid-paket-v2 .daftar-fitur { gap: 0.625rem; font-size: 0.9rem; margin: 0; }
.grid-paket-v2 .kartu-paket .tombol { margin-top: auto; min-height: 3rem; font-size: 0.9375rem; border-radius: 12px; }
.grid-paket-v2 .tutup-beli { margin-top: auto; }

.pita-paket {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.875rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.pita-paket .ikon { width: 0.9rem; height: 0.9rem; }

/* Kartu unggulan (paket "Populer"): gelap */
.grid-paket-v2 .kartu-paket-populer {
  background: var(--color-sidebar);
  color: var(--color-sidebar-text);
  border: 0;
  box-shadow: 0 18px 40px rgb(31 42 51 / 0.22);
}
.kartu-paket-populer .paket-jenis { color: color-mix(in srgb, var(--color-primary) 45%, var(--color-sidebar-text)); }
.kartu-paket-populer .paket-deskripsi,
.kartu-paket-populer .harga-sub,
.kartu-paket-populer .paket-harga .harga-periode { color: color-mix(in srgb, var(--color-sidebar-text) 75%, transparent); }
.kartu-paket-populer .paket-per-satuan { background: rgb(255 255 255 / 0.08); color: color-mix(in srgb, var(--color-sidebar-text) 90%, transparent); }
.kartu-paket-populer .daftar-fitur .ikon { color: color-mix(in srgb, var(--color-primary) 45%, var(--color-sidebar-text)); }
.kartu-paket-populer .paket-alternatif {
  background: rgb(39 107 67 / 0.25);
  color: #CFEEDB;
  border-color: rgb(155 224 180 / 0.4);
}
.kartu-paket-populer .paket-alternatif:hover { color: #FFFFFF; }
.kartu-paket-populer .tutup-beli { color: color-mix(in srgb, var(--color-sidebar-text) 75%, transparent); }

/* Rekomendasi penggeser */
.label-cocok {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  align-self: flex-start;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  background: #FFE9B8;
  color: #1F2A33;
  font-size: 0.75rem;
  font-weight: 700;
}
.label-cocok[hidden] { display: none; }
.grid-paket-v2 .paket-cocok:not(.kartu-paket-populer) { border: 2px solid #D8A13A; }
.grid-paket-v2 .paket-cocok.kartu-paket-populer { box-shadow: 0 0 0 3px #D8A13A, 0 18px 40px rgb(31 42 51 / 0.22); }

/* Tabel perbandingan */
.banding-paket { padding: 1.25rem 0 0.25rem; margin-bottom: 1.5rem; }
.banding-paket h2 { padding: 0 1.375rem; margin-bottom: 0.5rem; }
.tabel-polos { border: 0; box-shadow: none; border-radius: 0; }
.banding-paket .tabel { min-width: 40rem; }
.banding-paket .tabel tbody th { font-weight: 500; color: var(--color-text-secondary); white-space: nowrap; }
.banding-paket .tabel th:first-child, .banding-paket .tabel td:first-child { padding-left: 1.375rem; }
.banding-paket .kolom-unggulan { background: color-mix(in srgb, var(--color-primary-soft) 45%, var(--color-surface)); font-weight: 600; }
.banding-paket thead .kolom-unggulan { color: var(--color-primary-hover); box-shadow: inset 0 -2px 0 var(--color-primary); }

/* Jaminan */
.jaminan-paket {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem 1.5rem;
  margin-bottom: 1rem;
}
.jaminan-paket > div { display: flex; gap: 0.75rem; align-items: flex-start; }
.jaminan-paket > div > .ikon {
  flex: none;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0.5rem;
  border-radius: 10px;
  background: var(--color-success-soft);
  color: var(--color-success);
  box-sizing: border-box;
}
.jaminan-paket p { margin: 0; display: grid; font-size: 0.875rem; }
.jaminan-paket p span { color: var(--color-text-secondary); }

@media (max-width: 560px) {
  .kepala-paket h1 { font-size: 1.625rem; }
  .paket-harga .harga { font-size: 1.75rem; }
  .grid-paket-v2 { gap: 1.5rem; }
}

/* ---------- Pembayaran (staff) & dokumen invoice ---------- */
.tab-pembayaran { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1rem; }
.tab-pembayaran .tab {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 0.75rem;
  border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface);
  color: var(--color-text); text-decoration: none; font-weight: 600; font-size: 0.875rem;
}
.tab-pembayaran .tab-aktif { background: var(--color-primary-soft); border-color: transparent; color: var(--color-primary-hover); }
.lencana {
  display: inline-block; min-width: 1.375rem; padding: 0 0.375rem; border-radius: 999px;
  background: var(--color-border); color: var(--color-text); font-size: 0.75rem; font-weight: 700;
  text-align: center; font-variant-numeric: tabular-nums;
}
.lencana-nav { background: var(--color-primary); color: #fff; margin-left: auto; }
.cari-pembayaran { margin-bottom: 1rem; }
.cari-pembayaran .input { flex: 1 1 16rem; max-width: 28rem; }
.aksi-pembayaran { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; min-width: 8.5rem; }
.sel-nomor { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sel-email { overflow-wrap: anywhere; min-width: 9rem; }
.daftar-pembayaran .tabel td { vertical-align: middle; }
.tolak-pembayaran summary { list-style: none; cursor: pointer; }
.tolak-pembayaran summary::-webkit-details-marker { display: none; }
.tolak-pembayaran[open] form { display: grid; gap: 0.375rem; margin-top: 0.375rem; min-width: 14rem; }
.baris-dokumen { margin-top: 1rem; padding-top: 0.875rem; border-top: 1px solid var(--color-border); align-items: center; }
.dokumen-label { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; margin-right: 0.25rem; }

/* ==========================================================================
 * Pilih bank (halaman Konversi) v2 — redesain 13/10/2026
 * Halaman Konversi: pencarian + bagian "Tersedia sekarang" / "Segera hadir".
 * Kartu tetap teks (tanpa logo bank). Hapus blok ini untuk kembali ke tampilan lama.
 * ======================================================================== */
.pilih-bank { display: flex; flex-direction: column; gap: 1.375rem; max-width: 1240px; }
.pilih-bank [hidden] { display: none !important; }
.kepala-pilih-bank {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 0.75rem 1.5rem; margin-bottom: 0;
}
.kepala-pilih-bank h1 { margin: 0 0 0.25rem; }
.ringkas-bank { font-size: 0.875rem; color: var(--color-text-secondary); margin: 0; }
.ringkas-bank strong { color: var(--color-text); }

.alat-bank {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
  padding: 1rem; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 16px; box-shadow: var(--bayangan);
}
.cari-bank {
  flex: 1 1 420px; min-width: 0; display: flex; align-items: center; gap: 0.75rem;
  min-height: 52px; padding: 0 1rem; box-sizing: border-box;
  border: 1.5px solid #D5CCC3; border-radius: 12px; background: var(--color-surface);
  color: var(--color-text-secondary); cursor: text;
}
.cari-bank:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.cari-bank svg { flex: none; }
.cari-bank input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 1rem; color: var(--color-text); padding: 0;
}
.cari-bank input::placeholder { color: var(--color-muted); }
.cari-bank kbd {
  font-family: inherit; font-size: 0.75rem; font-weight: 700; color: var(--color-text-secondary);
  border: 1px solid var(--color-border); border-radius: 6px; padding: 2px 7px; background: #FAF6F2;
}
.saklar-tersedia {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto;
  font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.saklar-tersedia input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); }

.bagian-bank { display: flex; flex-direction: column; gap: 0.75rem; }
.bagian-bank:not(:has(.kartu-bank)) { display: none; }
.judul-bagian-bank {
  display: flex; align-items: center; gap: 0.5rem; margin: 0;
  font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-secondary);
}
.judul-tersedia { color: var(--color-success); }
.judul-tersedia::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
}
.hitung-bank {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--color-text-secondary); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 999px; padding: 0 0.5rem;
}

.grid-bank-tersedia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 0.875rem; }
.grid-bank-segera { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0.625rem; }

.pilih-bank .kartu-bank { display: flex; align-items: center; min-width: 0; }
.kartu-bank-monogram {
  flex: none; display: grid; place-items: center;
  font-weight: 800; letter-spacing: -0.01em; line-height: 1;
}
.kartu-bank-isi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.kartu-bank-baris { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.chip-kecil { font-size: 0.71875rem; font-weight: 700; padding: 0.0625rem 0.5rem; gap: 0.25rem; }

/* Tersedia: kartu besar, bisa diklik */
.pilih-bank a.kartu-bank {
  gap: 1.125rem; padding: 1.25rem 1.375rem; border-radius: 16px;
  box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 8px 24px rgb(31 42 51 / 0.05);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.pilih-bank a.kartu-bank:hover {
  border-color: var(--color-primary); transform: translateY(-1px);
  box-shadow: 0 2px 4px rgb(31 42 51 / 0.05), 0 14px 32px rgb(31 42 51 / 0.09);
}
.pilih-bank a.kartu-bank .kartu-bank-monogram {
  width: 64px; height: 64px; border-radius: 16px;
  background: var(--color-sidebar); color: var(--color-sidebar-text); font-size: 1.125rem;
}
.pilih-bank a.kartu-bank .kartu-bank-singkatan { display: inline; font-size: 1.125rem; }
.pilih-bank a.kartu-bank .kartu-bank-nama { font-size: 0.875rem; }
.kartu-bank-format { font-size: 0.78125rem; color: var(--color-text-secondary); }
.kartu-bank-mulai {
  flex: none; display: inline-flex; align-items: center; min-height: 42px; padding: 0 1rem;
  border-radius: 10px; background: var(--color-primary); color: #FFFFFF;
  font-weight: 700; font-size: 0.875rem; white-space: nowrap;
}
.pilih-bank a.kartu-bank:hover .kartu-bank-mulai { background: var(--color-primary-hover); }

/* Segera hadir: ubin ringkas, redup, tidak bisa diklik */
.pilih-bank .kartu-bank.segera {
  gap: 0.75rem; padding: 0.75rem 0.875rem; border-radius: 12px;
  background: rgb(255 255 255 / 0.6); border: 1px dashed #D5CCC3; box-shadow: none;
}
.pilih-bank .kartu-bank.segera .kartu-bank-monogram {
  width: 44px; height: 44px; border-radius: 12px; background: #EDE6DF; color: #5E564F; font-size: 0.78125rem;
}
.pilih-bank .kartu-bank.segera .kartu-bank-isi { gap: 0.125rem; }
.pilih-bank .kartu-bank.segera .kartu-bank-baris { flex-wrap: nowrap; justify-content: space-between; }
.pilih-bank .kartu-bank.segera .kartu-bank-singkatan {
  font-size: 0.90625rem; font-weight: 700; color: #3E4A53;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pilih-bank .kartu-bank.segera .kartu-bank-nama {
  font-size: 0.75rem; color: var(--color-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pilih-bank .kartu-bank.segera .chip { margin-top: 0; flex: none; }

.bank-kosong {
  display: flex; flex-direction: column; align-items: center; gap: 0.625rem;
  padding: 2.5rem 1.25rem; text-align: center; background: var(--color-surface);
  border: 1px dashed #D5CCC3; border-radius: 16px;
}
.bank-kosong strong { font-size: 1.0625rem; }
.bank-kosong span { color: var(--color-text-secondary); }
.catatan-bank { margin: 0; }

@media (max-width: 560px) {
  .saklar-tersedia { margin-left: 0; }
  .cari-bank kbd { display: none; }
  .pilih-bank a.kartu-bank { gap: 0.875rem; padding: 1rem; }
  .pilih-bank a.kartu-bank .kartu-bank-monogram { width: 52px; height: 52px; font-size: 1rem; }
  .kartu-bank-mulai { min-height: 38px; padding: 0 0.75rem; }
}

/* ==========================================================================
 * Halaman unggah (Konversi <bank>) v2 — redesain 13/10/2026
 * Kepala bank + langkah, dua kolom, daftar file, kartu bentuk hasil.
 * Hapus blok ini untuk kembali ke tampilan lama.
 * ======================================================================== */
.unggah-v2 { display: flex; flex-direction: column; gap: 1.375rem; max-width: 1240px; }
.unggah-v2 [hidden] { display: none !important; }
.kepala-unggah { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; }
.kepala-unggah-bank { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.kepala-unggah-bank .kartu-bank-monogram {
  width: 56px; height: 56px; border-radius: 14px; font-size: 1rem;
  background: var(--color-sidebar); color: var(--color-sidebar-text);
}
.kepala-unggah h1 { margin: 0; line-height: 1.15; }
.kepala-unggah p { margin: 0.125rem 0 0; color: var(--color-text-secondary); font-size: 0.875rem; }

.langkah-alur { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; color: var(--color-text-secondary); }
.langkah-alur li { display: flex; align-items: center; gap: 0.5rem; }
.langkah-alur li > span {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem;
  border: 1.5px solid #CFC4B9; box-sizing: border-box;
}
.langkah-alur li.aktif { color: var(--color-primary-hover); }
.langkah-alur li.aktif > span { background: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF; }
.langkah-alur .langkah-garis { width: 28px; height: 2px; background: #E0D5CB; }

.tata-unggah { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.375rem; align-items: start; }
.tata-unggah-utama { min-width: 0; }
.tata-unggah-utama .kartu-form { max-width: none; }
.tata-unggah-samping { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.kartu-unggah {
  padding: 1.5rem; border-radius: 16px;
  box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 8px 24px rgb(31 42 51 / 0.05);
}
.form-unggah { display: flex; flex-direction: column; gap: 1.5rem; }
.form-unggah > .pesan, .form-unggah > .tombol { margin: 0; }
.langkah-form { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.langkah-form-kepala { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 0.75rem; }
.langkah-form-kepala h2, .unggah-v2 .pilihan-hasil legend { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--color-text); }
.unggah-v2 .pilihan-hasil legend { margin-bottom: 0.75rem; padding: 0; }

/* Zona unggah: mendatar dan ringkas */
.unggah-v2 .unggah {
  position: relative; display: flex; align-items: center; justify-items: initial; gap: 1.25rem; text-align: left;
  padding: 1.5rem 1.75rem; border-radius: 14px; border-color: #D9A58F; background: #FBF1EB; color: var(--color-text);
  transition: border-color 0.15s, background 0.15s;
}
.unggah-v2 .unggah:hover, .unggah-v2 .unggah.sasaran-unggah { border-color: var(--color-primary); background: var(--color-primary-soft); }
.unggah-v2 .unggah.unggah-ringkas { padding: 0.75rem 1rem; gap: 0.875rem; }
.unggah-ringkas .unggah-ikon { width: 36px; height: 36px; border-radius: 10px; }
.unggah-v2 .unggah.unggah-ringkas .unggah-ikon .ikon { width: 1.125rem; height: 1.125rem; }
.unggah-ringkas .unggah-teks strong { font-size: 0.875rem; }
.unggah-ringkas [data-nama-berkas] { display: none; }
.unggah-ikon {
  flex: none; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  background: var(--color-surface); border: 1px solid #F0D6C9; color: var(--color-primary);
}
.unggah-v2 .unggah .unggah-ikon .ikon { width: 1.625rem; height: 1.625rem; }
.unggah-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.unggah-teks strong { font-size: 1.03125rem; }
.unggah-teks > span { font-size: 0.875rem; color: var(--color-text-secondary); }
.unggah-tautan { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 3px; }
.unggah-format {
  flex: none; font-size: 0.75rem; font-weight: 700; color: var(--color-text-secondary);
  border: 1px solid var(--color-border); border-radius: 8px; padding: 0.25rem 0.625rem; background: var(--color-surface);
}

/* Daftar file terpilih (diisi JavaScript) */
.daftar-berkas { border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.daftar-berkas-kepala {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 0.75rem;
  padding: 0.75rem 1rem; background: #FAF6F2; border-bottom: 1px solid var(--color-border); font-size: 0.875rem;
}
.daftar-berkas-aksi { display: flex; gap: 0.875rem; }
.tautan {
  border: 0; background: none; padding: 0; font: inherit; font-size: 0.8125rem; font-weight: 700;
  color: var(--color-primary-hover); cursor: pointer;
}
.tautan:hover { text-decoration: underline; }
.tautan-redup { color: var(--color-text-secondary); }
.daftar-berkas ul {
  list-style: none; margin: 0; padding: 0.375rem 0.5rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 0.25rem;
}
.daftar-berkas li { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem; border-radius: 10px; min-width: 0; }
.daftar-berkas li:hover { background: #FAF6F2; }
.berkas-tipe {
  flex: none; width: 30px; height: 36px; border-radius: 5px; display: grid; place-items: center;
  font-size: 0.5625rem; font-weight: 800; background: var(--color-danger-soft); color: var(--color-danger); border: 1px solid #F3CFCF;
}
.berkas-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.berkas-nama { font-size: 0.84375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.berkas-ukuran { font-size: 0.75rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.berkas-hapus {
  flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent;
  color: var(--color-text-secondary); font: inherit; font-size: 1.125rem; line-height: 1; cursor: pointer;
}
.berkas-hapus:hover { border-color: var(--color-border); background: var(--color-surface); color: var(--color-danger); }

/* Kartu bentuk hasil */
.grid-opsi-hasil { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; }
.unggah-v2 .opsi-hasil {
  position: relative; flex-direction: column; align-items: stretch; gap: 0.125rem;
  padding: 0.875rem 1rem 1rem; border-radius: 14px; margin: 1px;
}
.unggah-v2 .opsi-hasil:has(input:checked) {
  border: 2px solid var(--color-primary); margin: 0; background: #FDF6F2; box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.unggah-v2 .opsi-hasil:focus-within { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.unggah-v2 .opsi-hasil input { position: absolute; opacity: 0; pointer-events: none; margin: 0; }
.opsi-hasil-atas { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; min-height: 22px; }
.opsi-radio {
  width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid #B9AFA5;
  display: grid; place-items: center; background: var(--color-surface);
}
.opsi-hasil:has(input:checked) .opsi-radio { border: 2px solid var(--color-primary); }
.opsi-hasil:has(input:checked) .opsi-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
.opsi-skema { display: flex; align-items: center; gap: 3px; padding: 0.75rem 0 0.375rem; }
.skema-pdf { width: 12px; height: 15px; border-radius: 2px; background: var(--color-border); }
.skema-xls { width: 13px; height: 16px; border-radius: 2px; background: var(--color-success); }
.skema-panah { margin: 0 0.25rem; color: var(--color-muted); font-size: 0.8125rem; }
.unggah-v2 .opsi-hasil strong { font-size: 0.9375rem; }
.unggah-v2 .opsi-ket { font-size: 0.8125rem; line-height: 1.45; }
.unggah-v2 .opsi-hasil:has(input:checked) .opsi-ket { color: var(--color-text-secondary); }
.unggah-v2 .opsi-nonaktif .opsi-skema { opacity: 0.5; }

.bilah-unggah {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem;
  padding-top: 1.125rem; border-top: 1px solid #EFE7DF;
}
.bilah-unggah .bantuan { margin: 0; max-width: 460px; }
.tombol-besar { min-height: 48px; padding: 0 1.375rem; border-radius: 12px; font-size: 0.9375rem; }
.unggah-v2 .tombol-primer:not(:disabled) { box-shadow: 0 6px 16px rgb(184 79 43 / 0.22); }

/* Kolom samping */
.kartu-sisa-kuota {
  display: flex; flex-direction: column; gap: 0.375rem; padding: 1.25rem; border-radius: 16px;
  background: var(--color-sidebar); color: var(--color-sidebar-text);
}
.kartu-sisa-kuota-judul { font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #B6BDC3; }
.kartu-sisa-kuota-angka { font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kartu-sisa-kuota-angka small { font-size: 0.9375rem; font-weight: 600; color: #C9CFD4; }
.kartu-sisa-kuota-ket { font-size: 0.8125rem; color: #C9CFD4; }
.kartu-sisa-kuota a { margin-top: 0.375rem; color: #F0B496; font-size: 0.8125rem; font-weight: 700; text-decoration: none; }
.kartu-sisa-kuota a:hover { color: #FFFFFF; }
.kartu-info-unggah { margin: 0 !important; padding: 1.125rem 1.25rem; border-radius: 16px; }
.judul-info-unggah {
  margin: 0 0 0.75rem; font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-secondary);
}
.kartu-info-unggah > .teks-kecil { margin: 0; color: #3E4A53; }
.daftar-aman { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; font-size: 0.84375rem; color: var(--color-text-secondary); }
.daftar-aman li { display: flex; gap: 0.625rem; align-items: flex-start; }
.daftar-aman strong { color: var(--color-text); }
.ikon-bulat {
  flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: var(--color-primary-soft); color: var(--color-primary-hover);
}
.ikon-bulat .ikon { width: 15px; height: 15px; vertical-align: 0; }

@media (max-width: 1000px) {
  .tata-unggah { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .kartu-unggah { padding: 1rem; }
  .unggah-v2 .unggah { padding: 1.125rem; gap: 0.875rem; }
  .unggah-ikon { width: 44px; height: 44px; }
  .unggah-format { display: none; }
  .langkah-alur .langkah-garis { width: 14px; }
  .bilah-unggah .tombol { width: 100%; }
}

/* ==========================================================================
 * Halaman Masuk / Daftar v2 — redesain 13/10/2026
 * Panel kiri: label, sorotan judul, contoh hasil, 3 poin berjajar.
 * Kanan: kartu putih, kolom berikon, tombol Lihat password.
 * Hapus blok ini untuk kembali ke tampilan lama.
 * ======================================================================== */
.polos { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
.polos-panel { gap: 2rem; padding: 2.75rem 3.25rem; isolation: isolate; }
.polos-panel > * { position: relative; }
.polos-panel > .polos-panel-hias {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 100% 0, rgb(184 79 43 / 0.38), rgb(184 79 43 / 0) 38%),
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 36px 36px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 85%);
}
.polos-panel-isi { gap: 0.875rem; max-width: 32rem; margin-top: 0.5rem; }
.polos-label {
  align-self: flex-start; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #F0B496; background: rgb(184 79 43 / 0.18); border: 1px solid rgb(240 180 150 / 0.25);
  border-radius: 999px; padding: 0.25rem 0.75rem;
}
.polos-panel h2 { font-size: 2.5rem; line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; }
.polos-sorot { color: #F0B496; }

.polos-contoh {
  margin: 0; max-width: 32rem; border-radius: 16px; overflow: hidden;
  background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.1);
  box-shadow: 0 20px 40px rgb(0 0 0 / 0.25);
}
.polos-contoh-kepala {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  padding: 0.75rem 0.875rem; border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
.polos-contoh-file { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; }
.polos-contoh-xls {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  background: var(--color-success); font-size: 0.625rem;
}
.polos-contoh-cocok {
  display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.71875rem; font-weight: 700;
  color: #9FD8B4; background: rgb(39 107 67 / 0.35); border-radius: 999px; padding: 0.125rem 0.5625rem;
}
.polos-contoh table {
  width: 100%; border-collapse: collapse; font-size: 0.75rem; color: #DCE1E5; font-variant-numeric: tabular-nums;
}
.polos-contoh th { font-size: 0.6875rem; font-weight: 700; color: #8E979F; text-align: left; }
.polos-contoh th, .polos-contoh td { padding: 0.4375rem 0.625rem; border-top: 1px solid rgb(255 255 255 / 0.07); white-space: nowrap; }
.polos-contoh .kanan { text-align: right; }
.polos-contoh td.cocok { color: #9FD8B4; }
.polos-contoh .ikon { width: 0.875rem; height: 0.875rem; vertical-align: -0.15em; }
.polos-contoh tr.selisih { background: rgb(198 40 40 / 0.22); }
.polos-contoh tr.selisih td:last-child { color: #FFB4B4; font-weight: 700; }
.polos-contoh tr.selisih td:last-child .ikon { margin-right: 0.25rem; }
.polos-contoh figcaption { padding: 0.5rem 0.875rem 0.625rem; font-size: 0.6875rem; color: #A4ADB4; }

.polos-poin { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 36rem; }
.polos-poin li { flex-direction: column; gap: 0.5rem; }
.polos-poin-ikon { width: 2rem; height: 2rem; border-radius: 9px; color: #F0B496; }
.polos-poin strong { font-size: 0.84375rem; }
.polos-poin span span { font-size: 0.78125rem; }

/* Kanan */
.polos-utama { max-width: 31rem; gap: 1.125rem; }
.polos-utama > .daftar-pesan { margin: 0; }
.polos-utama > .daftar-pesan .pesan { border-radius: 12px; }
.kartu-masuk {
  padding: 2rem; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface);
  box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 18px 40px rgb(31 42 51 / 0.08);
}
.kartu-masuk h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.025em; margin: 0; }
.kartu-masuk .sub-masuk { margin: 0.25rem 0 1.25rem; }
.kartu-masuk .pemisah-atau { margin: 1.125rem 0; font-size: 0.78125rem; }
.kartu-masuk .tombol-google { border-width: 1.5px; border-color: #D5CCC3; font-weight: 700; font-size: 0.9375rem; }
.kartu-masuk .field label, .kartu-masuk .label-baris label { font-size: 0.84375rem; }
.kartu-masuk .label-baris a { font-weight: 600; }
.input-ikon {
  display: flex; align-items: center; gap: 0.625rem; min-height: 48px; padding: 0 0.875rem; box-sizing: border-box;
  border: 1.5px solid #D5CCC3; border-radius: 12px; background: var(--color-surface); color: var(--color-text-secondary);
}
.input-ikon:hover { border-color: var(--color-text-secondary); }
.input-ikon:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.input-ikon:has(.input[aria-invalid="true"]) { border-color: var(--color-danger); }
.input-ikon > .ikon { flex: none; width: 18px; height: 18px; }
.input-ikon .input {
  flex: 1; min-width: 0; border: 0; padding: 0.625rem 0; background: transparent; font-size: 0.9375rem; border-radius: 0;
}
.input-ikon .input:focus, .input-ikon .input:focus-visible { outline: none; box-shadow: none; border: 0; }
.tombol-lihat {
  flex: none; border: 0; background: none; padding: 0.25rem 0.125rem; font: inherit; font-size: 0.8125rem; font-weight: 700;
  color: var(--color-text-secondary); cursor: pointer;
}
.tombol-lihat:hover { color: var(--color-text); }
.tombol-lihat:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
.kartu-masuk .centang .teks-ket { font-size: 0.8125rem; }
.kartu-masuk .tombol-primer.tombol-penuh {
  min-height: 50px; border-radius: 12px; font-size: 0.96875rem; font-weight: 700; box-shadow: 0 8px 20px rgb(184 79 43 / 0.25);
}
.kartu-masuk > .form-masuk { margin-bottom: 0; }
.ajakan-bawah { margin: 0; text-align: center; font-size: 0.90625rem; color: var(--color-text-secondary); }
.ajakan-bawah a { font-weight: 700; }

@media (max-width: 1200px) {
  .polos-panel h2 { font-size: 2.125rem; }
  .polos-poin { grid-template-columns: minmax(0, 1fr); }
  .polos-poin li { flex-direction: row; }
}
/* Ponsel & tablet: panel gelap jadi kepala ringkas, formulir di kartu di bawahnya. */
@media (max-width: 1024px) {
  .polos { display: flex; flex-direction: column; }
  .polos-panel { display: flex; gap: 0.875rem; padding: 1.375rem 1.375rem 2.5rem; }
  .polos-panel .polos-label, .polos-panel-isi > p, .polos-contoh, .polos-poin, .polos-panel-kaki { display: none; }
  .polos-panel-isi { margin: 0; }
  .polos-panel h2 { font-size: 1.4375rem; line-height: 1.18; }
  .polos-kanan { margin-top: -1.25rem; position: relative; }
  .polos-utama { padding: 0 1rem 1rem; max-width: 34rem; margin: 0 auto; }
  .polos-utama .polos-merek { display: none; }
  .kartu-masuk { padding: 1.5rem 1.25rem; }
}

/* ==========================================================================
 * Dasbor v3 — redesain 13/10/2026
 * Hero gelap (ajakan + visual PDF → Excel), angka utama, panduan 3 langkah.
 * Hapus blok ini untuk kembali ke tampilan lama.
 * ======================================================================== */
.dasbor-v3 { display: flex; flex-direction: column; gap: 1.375rem; max-width: 1280px; }
.dasbor-v3 > .banner-invoice { margin: 0; }
.hero-dasbor {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem 2.5rem;
  padding: 2.125rem 2.25rem; border-radius: 22px;
  background: var(--color-sidebar); color: var(--color-sidebar-text);
  box-shadow: 0 24px 50px rgb(31 42 51 / 0.22);
}
.hero-dasbor-hias {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 92% -10%, rgb(184 79 43 / 0.45), rgb(184 79 43 / 0) 42%),
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 34px 34px;
}
.hero-dasbor-teks { flex: 1 1 26rem; min-width: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.hero-dasbor-tanggal { font-size: 0.8125rem; font-weight: 600; color: #F0B496; }
.hero-dasbor h1 { margin: 0; font-size: 2.125rem; line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; color: inherit; overflow-wrap: anywhere; }
.hero-dasbor-teks > p { margin: 0; max-width: 34rem; font-size: 1rem; color: #C9CFD4; }
.hero-dasbor-aksi { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 0.375rem; }
.tombol-hero { min-height: 50px; padding: 0 1.375rem; border-radius: 12px; gap: 0.5rem; box-shadow: 0 10px 24px rgb(184 79 43 / 0.4); }
.tombol-hero-sekunder {
  min-height: 50px; padding: 0 1.25rem; border-radius: 12px;
  border: 1px solid rgb(255 255 255 / 0.22); background: transparent; color: var(--color-sidebar-text);
}
.tombol-hero-sekunder:hover { color: var(--color-sidebar-text); background: rgb(255 255 255 / 0.08); }

.hero-dasbor-visual { flex: 0 1 27rem; min-width: 18rem; display: flex; align-items: center; gap: 0.875rem; }
.visual-pdf {
  flex: none; width: 118px; height: 150px; box-sizing: border-box; padding: 0.75rem;
  display: flex; flex-direction: column; gap: 6px; border-radius: 12px;
  background: var(--color-surface); color: var(--color-text);
  transform: rotate(-5deg); box-shadow: 0 16px 30px rgb(0 0 0 / 0.3);
}
.visual-pdf > span:not(.visual-pdf-label) { height: 6px; border-radius: 3px; background: var(--color-border); }
.visual-pdf > span:nth-of-type(2) { width: 80%; }
.visual-pdf > span:nth-of-type(4) { width: 70%; }
.visual-pdf > span:nth-of-type(6) { width: 60%; }
.visual-pdf-label {
  align-self: flex-start; font-size: 0.625rem; font-weight: 800; color: var(--color-danger);
  background: var(--color-danger-soft); border-radius: 4px; padding: 1px 6px;
}
.visual-pdf small { margin-top: auto; font-size: 0.59375rem; color: var(--color-text-secondary); }
.visual-panah { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #F0B496; font-size: 0.6875rem; font-weight: 700; }
.visual-panah span { font-size: 1.375rem; line-height: 1; }
.visual-xls {
  flex: 1; min-width: 0; border-radius: 14px; overflow: hidden;
  background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.12);
  box-shadow: 0 16px 30px rgb(0 0 0 / 0.25); font-variant-numeric: tabular-nums;
}
.visual-xls-kepala {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5625rem 0.6875rem; border-bottom: 1px solid rgb(255 255 255 / 0.08); font-size: 0.71875rem; font-weight: 700;
}
.visual-xls-kepala > span:first-child { display: flex; align-items: center; gap: 6px; }
.visual-xls-kepala b {
  width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center;
  background: var(--color-success); font-size: 0.5625rem;
}
.visual-cocok {
  display: inline-flex; align-items: center; gap: 3px; font-size: 0.65625rem;
  color: #B9E6CA; background: rgb(39 107 67 / 0.35); border-radius: 999px; padding: 1px 8px;
}
.visual-baris {
  display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.6875rem;
  border-top: 1px solid rgb(255 255 255 / 0.06); font-size: 0.65625rem; color: #DCE1E5; white-space: nowrap;
}
.visual-baris .ikon, .visual-cocok .ikon { width: 0.75rem; height: 0.75rem; color: #9FD8B4; vertical-align: -0.1em; }
.visual-selisih { background: rgb(198 40 40 / 0.25); color: #FFB4B4; font-weight: 700; }

/* Angka utama */
.angka-dasbor { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.875rem; }
.dasbor-v3 .kartu + .kartu { margin-top: 0; }
.kartu-angka {
  margin: 0; padding: 1.125rem 1.25rem; border-radius: 16px; display: flex; align-items: center; gap: 1rem;
  box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 8px 24px rgb(31 42 51 / 0.05);
}
.kartu-angka-tegak { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.kartu-angka-isi { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.label-angka {
  margin: 0; font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-secondary);
}
.nilai-angka { font-size: 1.625rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nilai-angka small, .nama-paket small { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); letter-spacing: 0; }
.nama-paket { font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.tautan-panah { margin-top: 0.25rem; font-size: 0.8125rem; font-weight: 700; text-decoration: none; }
.cincin {
  flex: none; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--color-primary) calc(var(--persen, 0) * 1%), #F3E9E1 0);
}
.cincin > span {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-surface); font-size: 0.75rem; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* Tata letak bawah */
.tata-dasbor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.375rem; align-items: start; }
.tata-dasbor-utama { display: flex; flex-direction: column; gap: 1.375rem; min-width: 0; }
.tata-dasbor-utama .bagian-kepala h2 { margin: 0; }
.tata-dasbor-samping { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.langkah-mulai { margin: 0; padding: 1.375rem 1.5rem; border-radius: 16px; }
.langkah-mulai .bagian-kepala { margin-bottom: 0.875rem; }
.langkah-mulai ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.langkah-mulai li {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem;
  border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface);
}
.langkah-mulai li.selesai { background: #F4FAF6; border-color: #D4EADC; }
.langkah-mulai li.sekarang { border: 2px solid var(--color-primary); background: #FDF6F2; padding: calc(0.75rem - 1px) calc(0.875rem - 1px); }
.langkah-no {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.8125rem; font-weight: 800; border: 1.5px solid #CFC4B9; color: var(--color-text-secondary); box-sizing: border-box;
}
.langkah-no .ikon { width: 0.875rem; height: 0.875rem; }
.selesai .langkah-no { background: var(--color-success); border-color: var(--color-success); color: #FFFFFF; }
.sekarang .langkah-no { background: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF; }
.langkah-isi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.langkah-isi > span { font-size: 0.8125rem; color: var(--color-text-secondary); }
.langkah-mulai li .tombol { flex: none; min-height: 40px; padding: 0 1rem; border-radius: 10px; font-size: 0.875rem; }
.langkah-mulai li:not(.sekarang) .tombol-primer { background: var(--color-surface); color: var(--color-primary-hover); border: 1px solid var(--color-border); box-shadow: none; }

.kartu-percaya { margin: 0; padding: 1.125rem 1.25rem; border-radius: 16px; }
.kartu-percaya .label-angka { margin-bottom: 0.75rem; }
.kartu-percaya ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; font-size: 0.84375rem; color: var(--color-text-secondary); }
.kartu-percaya li { display: flex; gap: 0.625rem; align-items: flex-start; }
.kartu-percaya strong { color: var(--color-text); }
.ikon-bulat-hijau { background: var(--color-success-soft); color: var(--color-success); }
.kartu-promo {
  display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; border-radius: 16px; color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, #000));
  box-shadow: 0 14px 30px rgb(184 79 43 / 0.3);
}
.kartu-promo-label { font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #F8D3C2; }
.kartu-promo strong { font-size: 1.0625rem; line-height: 1.3; }
.kartu-promo > span:not(.kartu-promo-label) { font-size: 0.8125rem; color: #F8D3C2; }
.kartu-promo a {
  align-self: flex-start; margin-top: 0.25rem; display: inline-flex; align-items: center; min-height: 38px; padding: 0 0.875rem;
  border-radius: 10px; background: #FFFFFF; color: var(--color-primary-hover); font-weight: 700; font-size: 0.84375rem; text-decoration: none;
}

@media (max-width: 1100px) {
  .tata-dasbor { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .hero-dasbor { padding: 1.5rem 1.25rem; border-radius: 18px; }
  .hero-dasbor h1 { font-size: 1.625rem; }
  .hero-dasbor-visual { display: none; }
  .hero-dasbor-aksi .tombol { flex: 1 1 100%; }
  .langkah-mulai li { flex-wrap: wrap; }
  .langkah-isi { flex: 1 1 calc(100% - 26px - 0.75rem); }
  .langkah-mulai li .tombol { margin-left: calc(26px + 0.75rem); }
}

/* ==========================================================================
 * Halaman Akun v3 (opsi C) — redesain 13/10/2026
 * Kartu profil + menu bagian di kiri, pengaturan berbentuk daftar baris.
 * Hapus blok ini untuk kembali ke tampilan lama.
 * ======================================================================== */
.akun-v3 { max-width: 1200px; }
.akun-v3 .kepala-halaman h1 { font-weight: 800; letter-spacing: -0.025em; }
.tata-akun { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.tata-akun-samping { position: sticky; top: 1.25rem; display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
.tata-akun-utama { display: flex; flex-direction: column; gap: 1.125rem; min-width: 0; }
.akun-v3 .kartu + .kartu { margin-top: 0; }

.kartu-profil {
  margin: 0; padding: 1.5rem; border-radius: 20px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0.5rem; box-shadow: 0 12px 32px rgb(31 42 51 / 0.06);
}
.avatar-profil {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #E39566, var(--color-primary)); color: #FFFFFF;
  font-size: 2.125rem; font-weight: 800; box-shadow: 0 0 0 6px #FBF1EB; margin-bottom: 0.375rem;
}
.nama-profil { font-size: 1.1875rem; overflow-wrap: anywhere; }
.email-profil { margin-top: -0.375rem; font-size: 0.84375rem; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.ringkas-profil {
  width: 100%; margin: 0.625rem 0 0; padding-top: 0.875rem; border-top: 1px solid #F0E9E2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; text-align: left;
}
.ringkas-profil dt { font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); }
.ringkas-profil dd { margin: 0; font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ringkas-profil dd small { font-size: 0.75rem; font-weight: 600; color: var(--color-text-secondary); }
.form-lebar { width: 100%; margin-top: 0.375rem; }
.form-lebar .tombol { width: 100%; justify-content: center; }

.nav-akun { margin: 0; padding: 0.5rem; border-radius: 16px; display: flex; flex-direction: column; font-size: 0.875rem; font-weight: 600; }
.nav-akun a { padding: 0.625rem 0.75rem; border-radius: 10px; color: #3E4A53; text-decoration: none; white-space: nowrap; }
.nav-akun a:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.nav-akun a.nav-akun-bahaya { color: var(--color-danger); }
.nav-akun a.nav-akun-bahaya:hover { background: var(--color-danger-soft); color: var(--color-danger); }

.bagian-akun { margin: 0; padding: 1.25rem 1.5rem 0.5rem; border-radius: 16px; scroll-margin-top: 1rem; }
.akun-v3 h2.label-bagian, .label-bagian {
  margin: 0 0 0.5rem; line-height: 1.4; font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-secondary);
}
.label-bagian-baris { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.label-bagian-baris a { font-size: 0.8125rem; font-weight: 700; }
.daftar-baris { list-style: none; margin: 0; padding: 0; }
.daftar-baris li { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-top: 1px solid #F0E9E2; }
.ikon-baris {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--color-primary-soft); color: var(--color-primary-hover); border: 1px solid #F0E3DA;
}
.ikon-baris .ikon { width: 18px; height: 18px; vertical-align: 0; }
.ikon-baris-putih { background: var(--color-surface); border-color: var(--color-border); }
.ikon-baris-hijau { background: var(--color-success-soft); color: var(--color-success); border-color: #D4EADC; }
.isi-baris { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.isi-baris strong { font-size: 0.90625rem; overflow-wrap: anywhere; }
.isi-baris > span { font-size: 0.8125rem; color: var(--color-text-secondary); }
.isi-baris b { color: var(--color-text); }
.aksi-baris { flex: none; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.tombol-kecil { min-height: 36px; padding: 0 0.75rem; font-size: 0.84375rem; border-radius: 10px; gap: 0.375rem; }
.tombol-kecil .ikon { width: 1rem; height: 1rem; }
.kosong-bagian { padding: 0.75rem 0 1rem; margin: 0; border-top: 1px solid #F0E9E2; }

.form-preferensi { display: flex; flex-direction: column; gap: 0.875rem; padding: 0.5rem 0 1rem; }
.baris-saklar { display: flex; align-items: flex-start; gap: 1rem; cursor: pointer; }
.saklar {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; margin: 0.125rem 0 0;
  width: 44px; height: 26px; border-radius: 999px; background: #D5CCC3; cursor: pointer; transition: background 0.15s;
}
.saklar::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: left 0.15s;
}
.saklar:checked { background: var(--color-primary); }
.saklar:checked::after { left: 21px; }
.saklar:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.contoh-samar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.contoh-samar > div {
  padding: 0.75rem 0.875rem; border-radius: 12px; border: 1px solid #EFE7DF; background: #FCFAF8;
  display: flex; flex-direction: column; gap: 0.125rem; transition: opacity 0.15s, border-color 0.15s;
}
.contoh-samar span { font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); }
.contoh-samar b { font-size: 0.9375rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.form-preferensi:has(.saklar:checked) .contoh-mati,
.form-preferensi:not(:has(.saklar:checked)) .contoh-nyala { opacity: 0.55; }
.form-preferensi:has(.saklar:checked) .contoh-nyala,
.form-preferensi:not(:has(.saklar:checked)) .contoh-mati { border: 2px solid var(--color-primary); background: #FDF6F2; padding: calc(0.75rem - 1px) calc(0.875rem - 1px); }
.form-preferensi:has(.saklar:checked) .contoh-nyala span,
.form-preferensi:not(:has(.saklar:checked)) .contoh-mati span { color: var(--color-primary-hover); }

.bagian-bahaya {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem;
  padding: 1.125rem 1.5rem; border: 1px solid #F3CFCF; background: #FFF8F8;
}
.akun-v3 .bagian-bahaya h2 { margin: 0; font-size: 0.9375rem; color: var(--color-danger); }
.bagian-bahaya p { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--color-text-secondary); }
.tombol-bahaya-garis { background: var(--color-surface); color: var(--color-danger); border: 1px solid #E9A9A9; }
.tombol-bahaya-garis:hover { background: var(--color-danger-soft); color: var(--color-danger); }

@media (max-width: 980px) {
  .tata-akun { grid-template-columns: minmax(0, 1fr); }
  .tata-akun-samping { position: static; }
  .nav-akun { flex-direction: row; overflow-x: auto; }
}
@media (max-width: 560px) {
  .daftar-baris li { flex-wrap: wrap; }
  .aksi-baris { width: 100%; justify-content: flex-start; padding-left: calc(36px + 1rem); }
  .bagian-akun { padding: 1rem 1rem 0.375rem; }
}

/* ==========================================================================
 * Halaman invoice v2 — redesain 13/10/2026
 * Pratinjau kertas invoice (kiri) + panel tindakan sesuai status (kanan).
 * Hapus blok ini untuk kembali ke tampilan lama.
 * ======================================================================== */
.invoice-v2 { max-width: 1220px; }
.kepala-invoice { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.75rem 1.5rem; }
.kepala-invoice .di-latar { margin: 0 0 0.375rem; }
.kepala-invoice h1 { font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.aksi-dokumen { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.aksi-dokumen .dokumen-label { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.84375rem; font-weight: 600; color: var(--color-text-secondary); margin-right: 0.25rem; }
.aksi-dokumen .tombol { min-height: 40px; border-radius: 10px; }

.tata-invoice { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.375rem; align-items: start; }
.tata-invoice > * + * { margin-top: 0; }
.label-kecil { margin: 0; font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); }

/* Kertas */
.kertas-invoice {
  position: relative; overflow: hidden; background: var(--color-surface); border-radius: 18px;
  box-shadow: 0 1px 2px rgb(31 42 51 / 0.05), 0 20px 50px rgb(31 42 51 / 0.1);
  border-top: 6px solid var(--color-primary);
}
.kertas-invoice.status-lunas { border-top-color: var(--color-success); }
.kertas-invoice.status-ditolak { border-top-color: var(--color-danger); }
.kertas-invoice.status-kedaluwarsa, .kertas-invoice.status-dibatalkan { border-top-color: var(--color-muted); }
.kertas-isi { padding: 1.875rem 2.25rem 1.5rem; }
.kertas-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem; flex-wrap: wrap; }
.kertas-merek { display: flex; flex-direction: column; gap: 0.375rem; max-width: 22rem; }
.kertas-merek .merek { font-size: 1.25rem; }
.kertas-merek .merek-logo { max-height: 34px; padding: 0; box-shadow: none; border: 0; background: transparent; }
.kertas-nomor { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3125rem; text-align: right; }
.kertas-nomor strong { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kertas-info { display: grid; grid-template-columns: 1.3fr 1fr 1fr; margin: 1.5rem 0 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.kertas-info > div { padding: 0.6875rem 0.75rem; min-width: 0; }
.kertas-info > div:first-child { padding-left: 0; }
.kertas-info > div + div { border-left: 1px solid var(--color-border); }
.kertas-info dt { font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); }
.kertas-info dd { margin: 0; font-size: 0.84375rem; font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kertas-info .info-sorot dt, .kertas-info .info-sorot dd { color: var(--color-primary-hover); }
.kertas-info .info-hijau dt, .kertas-info .info-hijau dd { color: var(--color-success); }
.kertas-rincian { width: 100%; border-collapse: collapse; margin-top: 1.125rem; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.kertas-rincian th {
  padding: 0 0 0.5rem; text-align: left; border-bottom: 1.5px solid var(--color-text);
  font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); background: none;
}
.kertas-rincian th.angka, .kertas-rincian td.angka { text-align: right; }
.kertas-rincian td { padding: 0.75rem 0; border-bottom: 1px solid #F0E9E2; vertical-align: top; background: none; }
.kertas-rincian td strong { display: block; }
.kertas-rincian td span { display: block; font-size: 0.78125rem; color: var(--color-text-secondary); }
.kertas-total { position: relative; display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: 1rem; min-height: 64px; }
.blok-total {
  width: min(100%, 290px); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.875rem 1.125rem; border-radius: 10px; background: var(--color-sidebar); color: #FFFFFF;
}
.status-lunas .blok-total { background: var(--color-success); }
.blok-total span { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #C9CFD4; }
.status-lunas .blok-total span { color: #D4EBDD; }
.blok-total strong { font-size: 1.5rem; font-weight: 800; }
.stempel {
  position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%) rotate(-12deg);
  display: flex; flex-direction: column; align-items: center; padding: 0.25rem 1.125rem 0.3125rem;
  border: 3px double currentColor; border-radius: 10px; opacity: 0.85; line-height: 1.05;
}
.stempel b { font-size: 1.625rem; font-weight: 800; letter-spacing: 0.14em; }
.stempel small { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.06em; }
.stempel-lunas { color: var(--color-success); }
.stempel-lain { color: var(--color-muted); }
.status-ditolak .stempel-lain { color: var(--color-danger); }
.kertas-kaki {
  display: flex; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 0; padding-top: 0.75rem;
  border-top: 1px solid var(--color-border); font-size: 0.6875rem; color: var(--color-text-secondary);
}

/* Panel kanan */
.panel-invoice { display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
.panel-invoice .kartu { margin: 0; border-radius: 16px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.875rem; }
.panel-invoice .pesan { margin: 0; }
.panel-invoice form { margin: 0; }
.teks-tengah { text-align: center; }
.tombol-tautan-redup { color: var(--color-text-secondary); font-size: 0.8125rem; font-weight: 600; }
.panel-bayar { padding: 0 !important; gap: 0 !important; overflow: hidden; border: 1.5px solid var(--color-primary); }
.panel-bayar-kepala {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.75rem 1.125rem; background: var(--color-primary-soft); color: var(--color-primary-hover);
  font-size: 0.8125rem; font-weight: 800;
}
.hitung-mundur:not(:empty) { background: var(--color-surface); border-radius: 999px; padding: 0.125rem 0.625rem; font-variant-numeric: tabular-nums; font-size: 0.75rem; }
.panel-bayar-isi { padding: 1.125rem; display: flex; flex-direction: column; gap: 0.875rem; }
.panel-bayar-isi p { margin: 0; }
.baris-nominal { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; margin: 0.125rem 0 0.25rem; }
.panel-invoice .total-besar { font-size: 1.875rem; font-weight: 800; letter-spacing: -0.01em; margin: 0; line-height: 1.15; }
.digit-unik { color: var(--color-primary-hover); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.kotak-rekening {
  margin: 0; padding: 0.75rem 0.875rem; border: 1px solid #EFE7DF; border-radius: 12px; background: #FCFAF8;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.kotak-rekening > div { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.kotak-rekening dt { font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); }
.kotak-rekening dd { margin: 0; font-weight: 700; text-align: right; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.kotak-rekening .angka-rekening { font-size: 1rem; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.panel-invoice .tombol-kecil { min-height: 32px; padding: 0 0.625rem; font-size: 0.78125rem; }
.panel-invoice .qris { margin: 0; text-align: center; }
.panel-lunas { border-color: #CFE5D7; background: linear-gradient(180deg, #F1F9F4, var(--color-surface) 55%); }
.panel-lunas-kepala { display: flex; align-items: center; gap: 0.75rem; }
.lingkar-cek {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-success); color: #FFFFFF; box-shadow: 0 0 0 6px var(--color-success-soft);
}
.lingkar-cek .ikon { width: 1.25rem; height: 1.25rem; }
.pesan-lunas { margin: 0; font-weight: 700; font-size: 1rem; line-height: 1.35; }
.ringkas-lunas { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; padding: 0.75rem 0; border-top: 1px solid #E3EDE6; border-bottom: 1px solid #E3EDE6; }
.ringkas-lunas dt { font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); }
.ringkas-lunas dd { margin: 0; font-weight: 800; }
.panel-lunas .teks-kecil { margin: 0; }
.panel-status p { margin: 0; }

.garis-waktu { list-style: none; margin: 0; padding: 0; }
.garis-waktu li { position: relative; display: flex; gap: 0.75rem; padding-bottom: 0.875rem; }
.garis-waktu li:last-child { padding-bottom: 0; }
.garis-waktu li:not(:last-child)::before {
  content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--color-border);
}
.garis-waktu li.selesai:not(:last-child)::before { background: var(--color-success); }
.garis-waktu .titik {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box;
  font-size: 0.75rem; font-weight: 800; border: 1.5px solid #CFC4B9; color: var(--color-text-secondary); background: var(--color-surface);
}
.garis-waktu .titik .ikon { width: 0.8125rem; height: 0.8125rem; }
.garis-waktu .selesai .titik { background: var(--color-success); border-color: var(--color-success); color: #FFFFFF; }
.garis-waktu .sekarang .titik { background: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF; }
.garis-waktu .gagal .titik { background: var(--color-danger); border-color: var(--color-danger); color: #FFFFFF; }
.garis-waktu li > span:last-child { display: flex; flex-direction: column; }
.garis-waktu strong { font-size: 0.875rem; }
.garis-waktu li > span:last-child > span { font-size: 0.78125rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.garis-waktu .sekarang li > span:last-child > span, .garis-waktu .sekarang span span { color: var(--color-primary-hover); }

@media (max-width: 1060px) {
  .tata-invoice { grid-template-columns: minmax(0, 1fr); }
  .panel-invoice { order: -1; }
}
@media (max-width: 560px) {
  .kertas-isi { padding: 1.25rem 1rem 1rem; }
  .kertas-nomor { align-items: flex-start; text-align: left; }
  .kertas-info { grid-template-columns: 1fr; }
  .kertas-info > div { padding: 0.5rem 0; }
  .kertas-info > div + div { border-left: 0; border-top: 1px solid #F0E9E2; }
  .kertas-total { flex-direction: column; align-items: stretch; }
  .stempel { position: static; transform: rotate(-6deg); align-self: flex-start; margin: 0.25rem 0 0.5rem; }
  .blok-total { width: auto; }
  .kertas-kaki { flex-direction: column; gap: 0.25rem; }
}

/* ---------- Pengaturan Tampilan & Merek (staff) ---------- */
.pratinjau-nama { margin: 0; }
.grid-tampilan { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .grid-tampilan { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.daftar-warna { display: grid; gap: 0.5rem; }
.baris-warna { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; }
.baris-warna label { font-weight: 600; font-size: 0.875rem; }
.isian-warna { display: inline-flex; align-items: center; gap: 0.5rem; }
.isian-warna input[type=color] { width: 2.5rem; height: 2.25rem; padding: 0.125rem; border: 1px solid var(--color-border); border-radius: var(--radius-kecil); background: var(--color-surface); cursor: pointer; }
.input-hex { width: 7.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.pratinjau-kolom { position: sticky; top: 1rem; }
.pratinjau-tema {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); overflow: hidden;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-background); color: var(--color-text); font-family: var(--font-utama);
}
.pratinjau-sidebar { display: grid; align-content: start; gap: 0.25rem; padding: 0.75rem; background: var(--color-sidebar); color: var(--color-sidebar-text); font-size: 0.8125rem; }
.pratinjau-merek { font-weight: 800; margin-bottom: 0.5rem; }
.pratinjau-nav { padding: 0.375rem 0.5rem; border-radius: var(--radius-kecil); }
.pratinjau-nav-aktif { background: var(--color-primary); color: #fff; font-weight: 600; }
.pratinjau-isi { display: grid; gap: 0.75rem; padding: 0.875rem; min-width: 0; }
.pratinjau-bank { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.pratinjau-bank .kartu-bank { padding: 0.625rem; }
.daftar-kontras { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.8125rem; }
.daftar-kontras li { padding: 0.25rem 0.5rem; border-radius: var(--radius-kecil); }
.kontras-ok { color: var(--color-success); background: var(--color-success-soft); }
.kontras-kurang { color: var(--color-danger); background: var(--color-danger-soft); font-weight: 600; }
.teks-berhasil { color: var(--color-success); }
@media (max-width: 40rem) {
  .pratinjau-tema { grid-template-columns: minmax(0, 1fr); }
  .pratinjau-kolom { position: static; }
}

/* ---------- Halaman publik (beranda, privasi, S&K, galat) ---------- */
.publik { background: var(--color-background); color: var(--color-text); min-height: 100vh; display: flex; flex-direction: column; }
.publik-lebar { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; box-sizing: border-box; }
.publik-kepala { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.publik-kepala-isi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block: 0.875rem; }
.publik-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.125rem; font-weight: 600; }
.publik-nav a:not(.tombol) { color: var(--color-text); text-decoration: none; }
.publik-nav a:not(.tombol):hover { color: var(--color-primary-hover); text-decoration: underline; }
.publik-utama { flex: 1; display: grid; gap: 2.5rem; padding-block: 2rem 3rem; }
.publik-hero-isi { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .publik-hero-isi { grid-template-columns: 1.1fr 1fr; } }
.publik-hero h1 { font-size: clamp(1.75rem, 4vw, 2.625rem); line-height: 1.15; margin: 0.25rem 0 0.75rem; }
.publik-label { margin: 0; color: var(--color-primary-hover); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; }
.publik-sub { font-size: 1.0625rem; color: var(--color-text-secondary); max-width: 38rem; }
.publik-aksi { align-items: center; margin-block: 1.25rem 0.5rem; }
.publik-tautan { font-weight: 600; color: var(--color-primary-hover); }
.publik-contoh { margin: 0; display: grid; gap: 0.5rem; }
.publik-bagian { display: grid; gap: 1rem; }
.publik-bagian h2 { margin: 0; }
.publik-grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.publik-grid-3 h3 { margin: 0.5rem 0 0.25rem; }
.publik-ikon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary-hover); }
.publik-langkah { list-style: none; counter-reset: langkah; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.publik-langkah li { counter-increment: langkah; display: grid; gap: 0.25rem; padding: 1rem 1.125rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.publik-langkah li::before { content: counter(langkah); display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--color-primary); color: #fff; font-weight: 700; }
.publik-langkah span { color: var(--color-text-secondary); }
.publik-grid-bank { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.publik-grid-bank .kartu-bank { display: grid; gap: 0.25rem; justify-items: start; }
.publik-paket .harga { font-size: 1.5rem; font-weight: 800; margin: 0.25rem 0; }
.publik-paket h3, .publik-paket .paket-jenis { margin: 0; }
.publik-paket-populer { border-color: var(--color-primary); }
.publik-ajakan { text-align: left; }
.publik-dokumen { max-width: 52rem; line-height: 1.65; }
.publik-dokumen h2 { margin-top: 1.75rem; font-size: 1.1875rem; }
.publik-dokumen h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.perlu-ditinjau { background: var(--color-primary-soft); color: var(--color-primary-hover); padding: 0 0.25rem; border-radius: 4px; font-weight: 600; }
.publik-galat { max-width: 36rem; text-align: center; justify-items: center; display: grid; }
.publik-galat .publik-aksi { justify-content: center; }
.publik-galat-kode { margin: 0; font-size: 3.5rem; font-weight: 800; color: var(--color-primary-hover); line-height: 1; }
.publik-kaki-isi { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; }
.publik-kaki-isi p { margin: 0; }
.tautan-kaki { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-left: 0.75rem; }
.tautan-kaki a { color: inherit; }
.persetujuan { margin: 0.25rem 0 0; }
.lompat-konten { position: absolute; left: -999px; top: 0.5rem; padding: 0.5rem 0.75rem; background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-kecil); z-index: 10; }
.lompat-konten:focus { left: 0.5rem; }
/* Grafik batang statistik (SVG buatan sendiri). */
.grafik { width: 100%; height: 9rem; display: block; }
.grafik rect { fill: var(--color-primary); }
.grafik rect.nol { fill: var(--color-border); }
.grafik-sumbu { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--color-text-secondary); }
.filter-periode { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.ringkas-angka { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.ringkas-angka div { padding: 0.75rem 0.875rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.ringkas-angka dt { font-size: 0.8125rem; color: var(--color-text-secondary); }
.ringkas-angka dd { margin: 0.125rem 0 0; font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
/* Halaman publik: baris grid tidak meregang; kartu dalam grid tanpa margin bawaan. */
.publik-utama, .publik-bagian, .publik-langkah li, .publik-galat { align-content: start; }
.publik-utama .kartu + .kartu, .publik-grid-3 > .kartu, .publik-grid-bank > * { margin-top: 0; }
.publik-paket .harga-periode { display: inline; font-size: 0.9375rem; font-weight: 600; color: var(--color-text-secondary); }
.publik-ajakan { display: grid; gap: 0.75rem; }
.publik-ajakan p { margin: 0; }
.publik-ajakan.kartu { width: calc(100% - 2rem); max-width: 70rem; }
.daftar-kontak { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
/* Menu Backup */
.aksi-snapshot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; }
.ubah-snapshot summary { cursor: pointer; }
.ubah-snapshot form { margin-top: 0.375rem; }
.grid-jadwal { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; margin-top: 0.75rem; }
.ubah-jadwal { padding: 0.75rem 1rem; }
.ubah-jadwal summary { cursor: pointer; font-weight: 600; }
button[disabled] { cursor: not-allowed; opacity: 0.55; }

/* ==========================================================================
   Beranda publik v3 (14/10/2026) — hero gelap senada dasbor v3, header sticky,
   persona berfoto, timeline langkah, preview aplikasi.
   Semua warna lewat token tema; hanya aktif di <body class="publik publik-beranda">.
   ========================================================================== */
.publik-beranda .publik-utama { gap: 0; padding-block: 0; grid-template-columns: minmax(0, 1fr); }
.publik-beranda .publik-utama > .pesan { width: calc(100% - 2rem); max-width: 72rem; margin: 1rem auto; }

/* Kepala di atas hero gelap */
.publik-beranda .publik-kepala { background: var(--color-sidebar); border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.publik-beranda .publik-kepala .merek-gelap,
.publik-beranda .publik-kepala .merek-gelap:hover { color: var(--color-sidebar-text); }
.publik-beranda .publik-nav a:not(.tombol) { color: #C9CFD4; }
.publik-beranda .publik-nav a:not(.tombol):hover { color: var(--color-sidebar-text); }
.publik-beranda :focus-visible { outline-color: #F0B496; }

.br-lebar { width: 100%; max-width: 75rem; margin-inline: auto; padding-inline: 1.5rem; box-sizing: border-box; }
.br-lebar-luas { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: 1.5rem; box-sizing: border-box; }
.br-bagian { padding-top: 6.5rem; }
.br-bagian-akhir { padding-bottom: 6rem; }

.br-label { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); }
.br-label-aksen { color: var(--color-primary-hover); }
.br-label-terang { color: #F0B496; }
.br-lead { margin: 1rem 0 0; font-size: 1.125rem; color: var(--color-text-secondary); max-width: 42rem; }
.br-catatan { margin: 0.875rem 0 0; font-size: 0.75rem; color: var(--color-text-secondary); }
.br-tengah { text-align: center; margin-inline: auto; }
.br-tengah .br-lead { margin-inline: auto; }

.br-kepala-bagian { max-width: 46rem; margin-bottom: 3rem; }
.br-kepala-bagian h2,
.br-faq-kepala h2 { margin: 0.75rem 0 0; font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.br-kepala-baris { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; }
.br-kepala-baris > div { max-width: 40rem; }
.br-kepala-baris > p { margin: 0; max-width: 24rem; }

/* Tombol */
.br-tombol-besar { min-height: 3.375rem; padding: 0 1.75rem; border-radius: 12px; font-size: 1.0625rem; }
.publik-beranda .br-hero .tombol-primer { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 10px 24px color-mix(in srgb, var(--color-primary) 40%, transparent); }
.br-tombol-gelap { background: transparent; color: var(--color-sidebar-text); border: 1px solid rgb(255 255 255 / 0.28); }
.br-tombol-gelap:hover { background: rgb(255 255 255 / 0.08); color: var(--color-sidebar-text); }
.br-tombol-putih { background: var(--color-surface); color: var(--color-text); font-weight: 800; box-shadow: 0 10px 24px rgb(31 42 51 / 0.2); }
.br-tombol-putih:hover { background: var(--color-primary-soft); color: var(--color-text); }

/* ---------- Hero ---------- */
.br-hero {
  position: relative; overflow: hidden; color: var(--color-sidebar-text);
  background-color: var(--color-sidebar);
  background-image:
    radial-gradient(circle at 85% -5%, color-mix(in srgb, var(--color-primary) 55%, transparent), transparent 40%),
    radial-gradient(circle at 5% 75%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 35%),
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-size: auto, auto, 40px 40px, 40px 40px;
  padding: 4.5rem 1.5rem 17rem;
}
.br-hero-isi { max-width: 58rem; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.br-pil {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.75rem;
  padding: 0.375rem 1rem 0.375rem 0.5rem; border-radius: 999px;
  background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.14);
  font-size: 0.8125rem; font-weight: 600; color: #DCE1E5;
}
.br-pil .ikon { width: 1.375rem; height: 1.375rem; padding: 0.25rem; border-radius: 999px; background: var(--color-success); color: #FFFFFF; box-sizing: border-box; }
.br-hero h1 { margin: 0; font-size: clamp(2.25rem, 5.6vw, 4.125rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; color: inherit; text-wrap: balance; }
.br-hero-sub { margin: 1.5rem 0 0; max-width: 42rem; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.6; color: #C9CFD4; }
.br-hero-aksi { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2.25rem; }
.br-hero-cek { list-style: none; margin: 1.625rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem 1.625rem; font-size: 0.875rem; color: #C9CFD4; }
.br-hero-cek li { display: flex; align-items: center; gap: 0.5rem; }
.br-hero-cek .ikon { color: #9FD8B4; }

/* ---------- Mock aplikasi ---------- */
.br-mock-bungkus { margin-top: -14.5rem; position: relative; }
.br-mock {
  position: relative; margin: 0; padding: 0.5rem; border-radius: 20px; background: var(--color-surface);
  box-shadow: 0 40px 80px rgb(31 42 51 / 0.28), 0 2px 6px rgb(31 42 51 / 0.08);
}
.br-mock-bingkai { display: flex; min-height: 30rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--color-border); }
.br-mock-sidebar {
  flex: 0 0 13rem; display: flex; flex-direction: column; gap: 2px; padding: 1.25rem 0.875rem;
  background: var(--color-sidebar); color: var(--color-sidebar-text); font-size: 0.8125rem; font-weight: 500;
}
.br-mock-sidebar > span { padding: 0.5rem 0.625rem; border-radius: 8px; color: #DCE1E5; }
.br-mock-sidebar > span.aktif { background: var(--color-primary); color: #FFFFFF; }
.br-mock-sidebar > .br-mock-merek { padding: 0 0.375rem 1rem; font-size: 1.0625rem; font-weight: 800; color: var(--color-sidebar-text); }
.br-mock-merek small { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; color: #C9CFD4; }
.br-mock-sidebar > .br-mock-judul-menu { padding: 0 0.625rem 0.25rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #AEB7BE; }
.br-mock-utama { flex: 1; min-width: 0; background: var(--color-background); padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.br-mock-kepala { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; }
.br-mock-kepala strong { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.br-mock-kepala small { font-size: 0.8125rem; color: var(--color-text-secondary); }
.br-mock-isi { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.br-mock-tabel { width: 100%; border: 1px solid var(--color-border); border-radius: 14px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 0.8125rem; }
.br-mock-tabel td { font-weight: 600; white-space: nowrap; }
.br-mock-tabel td small { font-weight: 500; color: var(--color-text-secondary); }
.br-periode { display: inline-block; padding: 0.1875rem 0.5rem; border: 1px solid var(--color-border); border-radius: 6px; font-variant-numeric: tabular-nums; }
.br-periode-ubah { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-hover); }
.br-mock-samping { min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.br-mock-kartu { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.875rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; font-size: 0.8125rem; }
.br-mock-kartu .br-label { font-size: 0.65625rem; }
.br-opsi { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border: 1px solid var(--color-border); border-radius: 8px; }
.br-opsi::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #C9C1B9; box-sizing: border-box; }
.br-opsi.aktif { border: 1.5px solid var(--color-primary); background: color-mix(in srgb, var(--color-primary-soft) 55%, var(--color-surface)); font-weight: 700; }
.br-opsi.aktif::before { border: 4px solid var(--color-primary); background: var(--color-surface); }
.br-xls { display: flex; align-items: center; gap: 0.625rem; font-size: 0.75rem; font-weight: 700; line-height: 1.35; font-variant-numeric: tabular-nums; }
.br-xls b { flex: none; width: 2.125rem; height: 2.125rem; border-radius: 9px; display: grid; place-items: center; background: var(--color-success); color: #FFFFFF; font-size: 0.8125rem; }
.br-xls span { word-break: break-all; }
.br-mock-unduh { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.375rem; border-radius: 9px; background: var(--color-primary); color: #FFFFFF; font-weight: 700; }
.br-mock-melayang {
  position: absolute; right: -0.25rem; bottom: -2.25rem; display: flex; align-items: center; gap: 0.875rem;
  padding: 0.875rem 1.125rem; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: 0 20px 44px rgb(31 42 51 / 0.18);
}
.br-mock-melayang > span:last-child { display: flex; flex-direction: column; }
.br-mock-melayang strong { font-size: 1rem; font-weight: 800; }
.br-mock-melayang .br-label { font-size: 0.65625rem; }
.br-bulat-hijau { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-success-soft); color: var(--color-success); }
.br-mock-bungkus > .br-catatan { margin-top: 1rem; }

/* ---------- Kartu ubin ---------- */
.br-ubin {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 22px; padding: 1.875rem;
  box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 8px 24px rgb(31 42 51 / 0.05);
}
.br-ubin h3 { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.br-ubin p { margin: 0; color: #4A535B; }
.br-ikon { width: 2.875rem; height: 2.875rem; border-radius: 13px; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary-hover); }
.br-ikon .ikon { width: 1.375rem; height: 1.375rem; }

/* ---------- Bento fitur ---------- */
.br-bento { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.br-ubin { display: flex; flex-direction: column; gap: 1.25rem; }
.br-ubin p { font-size: 0.9375rem; }
.br-ubin-lebar { grid-column: span 2; }
.br-ubin-gelap {
  color: var(--color-sidebar-text); border: 0;
  background-color: var(--color-sidebar);
  background-image: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-primary) 45%, transparent), transparent 55%);
}
.br-ubin-gelap p { color: #C9CFD4; }

.br-xls-contoh { border: 1px solid #DCE1E5; border-radius: 12px; overflow: hidden; font-variant-numeric: tabular-nums; }
.br-xls-ringkas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--color-border); border-bottom: 1px solid var(--color-border); }
.br-xls-ringkas > div { display: flex; flex-direction: column; padding: 0.625rem 0.75rem; background: color-mix(in srgb, var(--color-background) 45%, var(--color-surface)); }
.br-xls-ringkas small { font-size: 0.65625rem; font-weight: 700; color: var(--color-text-secondary); }
.br-xls-ringkas b { font-size: 0.875rem; font-weight: 800; }
.br-xls-ringkas .cocok { background: var(--color-success-soft); }
.br-xls-ringkas .cocok small { color: var(--color-success); }
.br-xls-contoh table { width: 100%; border-collapse: collapse; font-size: 0.78125rem; }
.br-xls-contoh th { background: var(--color-success); color: #FFFFFF; font-weight: 600; text-align: left; padding: 0.5rem 0.75rem; }
.br-xls-contoh td { padding: 0.4375rem 0.75rem; border-bottom: 1px solid #EEF1F3; }
.br-xls-contoh .angka { text-align: right; white-space: nowrap; }
.br-xls-tab { display: flex; gap: 2px; padding: 0 0.5rem; background: #F1F3F5; border-top: 1px solid #DCE1E5; font-size: 0.71875rem; overflow-x: auto; }
.br-xls-tab span { padding: 0.375rem 0.75rem; color: #4A535B; white-space: nowrap; }
.br-xls-tab .aktif { background: var(--color-surface); color: var(--color-success); font-weight: 700; border-bottom: 2px solid var(--color-success); }

.br-rumus { margin-top: auto; display: grid; gap: 0.5rem; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.br-rumus > div { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; border-radius: 10px; background: rgb(255 255 255 / 0.06); }
.br-rumus span { color: #C9CFD4; }
.br-rumus b { display: inline-flex; align-items: center; gap: 0.5rem; }
.br-rumus .cocok { background: color-mix(in srgb, var(--color-success) 45%, transparent); border: 1px solid rgb(159 216 180 / 0.35); }
.br-rumus .cocok span { color: var(--color-sidebar-text); font-weight: 700; }
.br-rumus .ikon { color: #9FD8B4; }

.br-bulan { margin-top: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.375rem; font-size: 0.75rem; font-weight: 700; text-align: center; }
.br-bulan span { padding: 0.4375rem 0; border-radius: 8px; border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.br-bulan .isi { border-color: transparent; background: var(--color-primary-soft); color: var(--color-primary-hover); }
.br-bulan .pilih { border-color: transparent; background: var(--color-primary); color: #FFFFFF; }

.br-sandi { margin-top: auto; display: flex; align-items: center; gap: 0.625rem; min-height: 2.875rem; padding: 0 0.875rem; border: 1px solid #D9CEC3; border-radius: 10px; background: color-mix(in srgb, var(--color-background) 45%, var(--color-surface)); color: var(--color-text-secondary); }
.br-sandi-titik { letter-spacing: 0.3em; font-weight: 800; color: var(--color-text); }
.br-sandi .chip { margin-left: auto; }

.br-segmen { margin-top: auto; display: flex; padding: 0.25rem; border-radius: 12px; background: color-mix(in srgb, var(--color-background) 75%, var(--color-border)); font-size: 0.78125rem; font-weight: 700; text-align: center; }
.br-segmen span { flex: 1; padding: 0.5625rem 0.25rem; color: var(--color-text-secondary); }
.br-segmen .aktif { border-radius: 9px; background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 3px rgb(31 42 51 / 0.12); }


/* ---------- Keamanan ---------- */
.br-panel-gelap {
  display: flex; flex-wrap: wrap; gap: 3rem; padding: 4.5rem 3.5rem; border-radius: 28px; color: var(--color-sidebar-text);
  background-color: var(--color-sidebar);
  background-image:
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--color-primary) 40%, transparent), transparent 42%),
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
}
.br-panel-teks { flex: 1 1 20rem; min-width: 0; display: flex; flex-direction: column; gap: 1.125rem; }
.br-panel-teks h2 { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; color: inherit; }
.br-panel-teks p:not(.br-label) { margin: 0; font-size: 1.0625rem; color: #C9CFD4; }
.br-tautan-terang { color: #F0B496; font-weight: 700; }
.br-tautan-terang:hover { color: #FFFFFF; }
.br-aman { flex: 1.4 1 30rem; min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.br-aman li { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.375rem; border-radius: 16px; background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.1); }
.br-aman .ikon { width: 1.375rem; height: 1.375rem; color: #F0B496; }
.br-aman strong { font-size: 1rem; }
.br-aman span { font-size: 0.90625rem; color: #C9CFD4; }
.br-aman .br-aman-penuh { grid-column: 1 / -1; }

/* ---------- Harga (angka dari database) ---------- */
.br-grid-harga { gap: 1.25rem; }
.publik-beranda .publik-paket { border-radius: 22px; padding: 1.875rem; box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 8px 24px rgb(31 42 51 / 0.05); }
.publik-beranda .publik-paket .paket-jenis { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); }
.publik-beranda .publik-paket h3 { margin: 0.5rem 0 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.publik-beranda .publik-paket .harga { font-size: 2rem; letter-spacing: -0.03em; margin: 0.75rem 0 0.25rem; }
.publik-beranda .publik-paket-populer { border: 1.5px solid var(--color-primary); box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 18px 40px color-mix(in srgb, var(--color-primary) 14%, transparent); }
.br-harga-aksi { margin: 1.75rem auto 0; }

/* ---------- FAQ ---------- */
.br-faq { display: flex; flex-wrap: wrap; gap: 3rem; }
.br-faq-kepala { flex: 1 1 18rem; min-width: 0; }
.br-faq-daftar { flex: 2 1 34rem; min-width: 0; display: grid; gap: 0.625rem; }
.br-faq details { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 0.25rem 1.5rem; }
.br-faq details[open] { box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 8px 24px rgb(31 42 51 / 0.06); }
.br-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.75rem; padding: 1rem 0; font-weight: 700; font-size: 1.0625rem; }
.br-faq summary::-webkit-details-marker { display: none; }
.br-faq summary::after {
  content: ""; flex: none; width: 0.5625rem; height: 0.5625rem; margin-right: 0.25rem;
  border-right: 2.5px solid var(--color-primary-hover); border-bottom: 2.5px solid var(--color-primary-hover);
  transform: translateY(-25%) rotate(45deg); transition: transform 0.15s ease;
}
.br-faq details[open] summary::after { transform: translateY(25%) rotate(-135deg); }
.br-faq details p { margin: 0 0 1.25rem; color: #4A535B; }

/* ---------- Ajakan ---------- */
.br-ajakan {
  position: relative; overflow: hidden; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between;
  padding: 4.5rem 3.5rem; border-radius: 28px; color: #FFFFFF;
  background-color: var(--color-primary);
  background-image:
    radial-gradient(circle at 100% 0%, rgb(255 255 255 / 0.22), transparent 45%),
    radial-gradient(circle at 0% 100%, rgb(31 42 51 / 0.35), transparent 50%);
}
.br-ajakan > div:first-child { flex: 1 1 26rem; min-width: 0; }
.br-ajakan h2 { margin: 0; font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; color: inherit; }
.br-ajakan p { margin: 0.875rem 0 0; font-size: 1.125rem; color: #FFF1EA; }
.br-ajakan-aksi { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.br-ajakan .br-tombol-gelap { border-color: rgb(255 255 255 / 0.55); }

/* ---------- Kaki (gelap, hanya di beranda) ---------- */
.publik-beranda .publik-kaki { background: var(--color-sidebar); color: #C9CFD4; padding-block: 2rem; }
.publik-beranda .publik-kaki a { color: #DCE1E5; }
.publik-beranda .publik-kaki a:hover { color: #FFFFFF; }

/* ---------- Header sticky (beranda) ---------- */
.publik-beranda .publik-kepala {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--color-sidebar) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 8px 24px rgb(15 22 28 / 0.18);
}
.publik-beranda .publik-kepala-isi { max-width: 75rem; padding-inline: 1.5rem; }
.publik-beranda .publik-nav { gap: 0.5rem 1.375rem; font-weight: 500; font-size: 0.9375rem; }
.publik-beranda [id] { scroll-margin-top: 5.5rem; }

/* ---------- Strip fakta ---------- */
.br-fakta { margin-top: 5.5rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.br-fakta-kartu {
  display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: 22px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 12px 32px rgb(31 42 51 / 0.06);
}
.br-fakta-atas { display: flex; justify-content: space-between; align-items: center; }
.br-fakta-ikon { width: 2.625rem; height: 2.625rem; border-radius: 12px; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary-hover); }
.br-fakta-ikon .ikon { width: 1.3125rem; height: 1.3125rem; }
.br-fakta-ikon-hijau { background: var(--color-success-soft); color: var(--color-success); }
.br-fakta-nilai { margin: 0; font-size: 2.125rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.br-fakta-nilai small { font-size: 1.125rem; font-weight: 700; letter-spacing: 0; color: var(--color-text-secondary); }
.br-fakta-ket { margin: 0.25rem 0 0; font-size: 0.875rem; color: #4A535B; }
.br-fakta-visual { margin-top: auto; }
.br-bar { display: block; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--color-background) 75%, var(--color-border)); overflow: hidden; }
.br-bar span { display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 55%, #FFFFFF), var(--color-primary)); }
.br-bar-label { display: flex; justify-content: space-between; margin-top: 0.375rem; font-size: 0.6875rem; font-weight: 600; color: var(--color-text-secondary); }
.br-sheet { display: flex; flex-wrap: wrap; gap: 0.25rem; font-size: 0.6875rem; font-weight: 700; }
.br-sheet span { padding: 0.25rem 0.5rem; border-radius: 6px; background: var(--color-success-soft); color: var(--color-success); }
.br-sheet .utama { background: var(--color-success); color: #FFFFFF; }
.br-sheet .opsional { background: transparent; border: 1px dashed color-mix(in srgb, var(--color-success) 45%, transparent); }
.br-fakta .br-segmen { font-size: 0.6875rem; }
.br-fakta .br-segmen span { padding: 0.3125rem 0.125rem; }
.br-fakta-gelap {
  border: 0; color: var(--color-sidebar-text); box-shadow: 0 18px 40px rgb(31 42 51 / 0.18);
  background-color: var(--color-sidebar);
  background-image: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-primary) 50%, transparent), transparent 60%);
}
.br-fakta-gelap .br-fakta-ikon { background: rgb(255 255 255 / 0.08); color: #F0B496; }
.br-fakta-gelap .br-fakta-ket { color: #C9CFD4; }
.br-batang { display: flex; align-items: flex-end; gap: 5px; height: 1.625rem; }
.br-batang span { flex: 1; border-radius: 4px; background: #E8956A; }
.br-batang span:nth-child(1) { height: 40%; opacity: 0.35; }
.br-batang span:nth-child(2) { height: 60%; opacity: 0.5; }
.br-batang span:nth-child(3) { height: 80%; opacity: 0.7; }
.br-batang span:nth-child(4) { height: 100%; }
.br-batang small { margin-left: 0.5rem; align-self: center; font-size: 0.6875rem; font-weight: 700; color: #C9CFD4; }

/* ---------- Untuk siapa ---------- */
.br-persona { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.br-persona-kartu {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 24px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 18px 44px rgb(31 42 51 / 0.08);
}
.br-persona-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-sidebar); }
.br-persona-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.br-persona-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(31 42 51 / 0.45)); pointer-events: none; }
.br-persona-chip {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 1; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5625rem 0.75rem; border-radius: 12px; background: var(--color-surface); box-shadow: 0 12px 28px rgb(0 0 0 / 0.28);
}
.br-persona-chip .br-bulat-hijau { width: 1.625rem; height: 1.625rem; }
.br-persona-chip .br-bulat-hijau .ikon { width: 0.8125rem; height: 0.8125rem; }
.br-persona-chip > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.br-persona-chip small { font-size: 0.59375rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); }
.br-persona-chip strong { font-size: 0.8125rem; font-weight: 800; }
.br-persona-isi { display: flex; flex-direction: column; gap: 0.875rem; flex: 1; padding: 1.625rem 1.625rem 1.75rem; }
.br-persona-isi h3 { margin: 0; font-size: 1.375rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.br-persona-isi > p:not(.br-label) { margin: 0; font-size: 0.9375rem; color: #4A535B; }
.br-persona-isi ul { list-style: none; margin: 0.25rem 0 0; padding: 0.875rem 0 0; border-top: 1px solid #EEE4DA; display: grid; gap: 0.5rem; font-size: 0.90625rem; }
.br-persona-isi li { display: flex; gap: 0.625rem; align-items: flex-start; }
.br-persona-isi li .ikon { margin-top: 0.1875rem; color: var(--color-success); }
.br-juga { display: flex; align-items: center; gap: 1rem; margin: 2.5rem 0 1.125rem; }
.br-garis { flex: 1; height: 1px; background: #E2D6CA; }
.br-persona-kecil { display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.br-persona-kecil article { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; border-radius: 18px; background: var(--color-surface); border: 1px solid var(--color-border); }
.br-persona-kecil p { margin: 0; font-size: 0.875rem; color: #4A535B; }
.br-pk-kepala { display: flex; align-items: center; gap: 0.625rem; }
.br-persona-kecil .br-pk-kepala { color: var(--color-text); font-size: 0.9375rem; line-height: 1.25; }
.br-persona-kecil .br-ikon { flex: none; width: 2.375rem; height: 2.375rem; border-radius: 11px; }
.br-persona-kecil .br-ikon .ikon { width: 1.1875rem; height: 1.1875rem; }

/* ---------- Tiga langkah (timeline) ---------- */
.br-alur { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.br-alur::before {
  content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 27px; height: 2px; opacity: 0.45;
  background-image: linear-gradient(90deg, var(--color-primary) 50%, transparent 50%); background-size: 12px 2px;
}
.br-alur > li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.375rem; }
.br-alur-nomor {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-primary); color: #FFFFFF; font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 8px var(--color-background), 0 10px 24px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.br-alur-nomor-hijau { background: var(--color-success); box-shadow: 0 0 0 8px var(--color-background), 0 10px 24px color-mix(in srgb, var(--color-success) 30%, transparent); }
.br-alur-kartu { width: 100%; overflow: hidden; border-radius: 22px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 14px 36px rgb(31 42 51 / 0.07); }
.br-alur-visual { height: 10.625rem; box-sizing: border-box; padding: 1.25rem; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; background: color-mix(in srgb, var(--color-background) 45%, var(--color-surface)); border-bottom: 1px solid #EEE4DA; font-size: 0.75rem; }
.br-alur-teks { padding: 1.5rem 1.625rem 1.75rem; }
.br-alur-teks h3 { margin: 0 0 0.375rem; font-size: 1.3125rem; font-weight: 800; letter-spacing: -0.02em; }
.br-alur-teks p { margin: 0; font-size: 0.9375rem; color: #4A535B; }
.br-alur-unggah { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.625rem; border: 2px dashed color-mix(in srgb, var(--color-primary) 40%, #FFFFFF); border-radius: 14px; background: var(--color-surface); color: var(--color-primary); }
.br-alur-unggah .ikon { width: 1.75rem; height: 1.75rem; }
.br-alur-unggah > span { display: flex; gap: 0.375rem; }
.br-alur-unggah b { padding: 0.25rem 0.5rem; border-radius: 6px; background: var(--color-primary-soft); color: var(--color-primary-hover); font-size: 0.6875rem; }
.br-alur-periksa > span { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 10px; background: var(--color-surface); border: 1px solid var(--color-border); }
.br-alur-periksa b { display: flex; align-items: center; gap: 0.375rem; font-weight: 600; }
.br-alur-periksa i { font-style: normal; font-weight: 700; padding: 0.125rem 0.4375rem; border: 1px solid var(--color-border); border-radius: 6px; font-variant-numeric: tabular-nums; }
.br-alur-periksa .kunci { border: 1.5px solid var(--color-primary); }
.br-alur-periksa .kunci .ikon { width: 0.8125rem; height: 0.8125rem; color: var(--color-primary-hover); }
.br-alur-periksa em { font-style: normal; font-weight: 700; color: var(--color-primary-hover); }
.br-alur-unduh { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.875rem; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); }
.br-alur-unduh .chip { margin-left: auto; font-size: 0.65625rem; }
.br-alur-unduh .br-xls > span:nth-child(2) { word-break: normal; }

/* ---------- Preview aplikasi ---------- */
.br-preview { padding: 3.5rem 3rem; border-radius: 28px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 24px 60px rgb(31 42 51 / 0.07); }
.br-preview .br-kepala-bagian { margin-bottom: 2.5rem; }
.br-pv-tata { display: flex; flex-wrap: wrap; gap: 2rem; align-items: stretch; }
.br-pv-daftar { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.br-pv-tab {
  display: grid; grid-template-columns: auto 1fr; gap: 0 0.75rem; align-items: center; width: 100%;
  padding: 1rem 1.125rem; border-radius: 16px; border: 1px solid transparent; background: transparent;
  font: inherit; color: var(--color-text); text-align: left; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.br-pv-tab:hover { background: color-mix(in srgb, var(--color-background) 55%, var(--color-surface)); }
.br-pv-tab.aktif { background: color-mix(in srgb, var(--color-primary-soft) 45%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }
.br-pv-no { width: 2.125rem; height: 2.125rem; border-radius: 10px; display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; background: color-mix(in srgb, var(--color-background) 75%, var(--color-border)); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.br-pv-tab.aktif .br-pv-no { background: var(--color-primary); color: #FFFFFF; }
.br-pv-judul { display: flex; flex-direction: column; gap: 0.125rem; }
.br-pv-judul strong { font-size: 1rem; }
.br-pv-judul span { font-size: 0.84375rem; color: var(--color-text-secondary); }
.br-pv-progres { grid-column: 1 / -1; display: none; height: 3px; margin-top: 0.875rem; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--color-background) 75%, var(--color-border)); }
.js .br-pv-tab.aktif .br-pv-progres { display: block; }
.br-pv-progres span { display: block; height: 100%; width: 0; background: var(--color-primary); }
.br-pv-tab.aktif .br-pv-progres span { animation: br-isi-progres 5.5s linear forwards; }
.br-preview.jeda .br-pv-progres span { animation-play-state: paused; }
@keyframes br-isi-progres { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .js .br-pv-tab.aktif .br-pv-progres { display: none; } }

.br-pv-jendela { flex: 2 1 38rem; min-width: 0; padding: 0.625rem; border-radius: 18px; background: var(--color-sidebar); box-shadow: 0 30px 60px rgb(31 42 51 / 0.22); }
.br-pv-bilah { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem 0.75rem; }
.br-pv-bilah > span { width: 10px; height: 10px; border-radius: 50%; background: #4A5862; }
.br-pv-bilah em { margin-left: 0.625rem; font-style: normal; font-size: 0.75rem; color: #C9CFD4; }
.br-pv-layar { height: 32rem; box-sizing: border-box; overflow: hidden; padding: 1.5rem; border-radius: 12px; background: var(--color-background); }
.br-pv-panel { display: flex; flex-direction: column; gap: 0.875rem; }
.br-pv-panel[hidden] { display: none; }
.br-pv-kepala { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; }
.br-pv-kepala strong { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.br-pv-kepala small { font-size: 0.8125rem; color: var(--color-text-secondary); }
.br-pv-lencana { flex: none; padding: 0.3125rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; background: var(--color-surface); border: 1px solid var(--color-border); color: #4A535B; }
.br-pv-lencana-aksen { background: var(--color-primary-soft); border-color: transparent; color: var(--color-primary-hover); }
.br-pv-lencana-bahaya { background: var(--color-danger-soft); border-color: transparent; color: var(--color-danger); }
.br-pv-lencana-hijau { background: var(--color-success-soft); border-color: transparent; color: var(--color-success); }
.br-pv-tabel { display: grid; overflow: hidden; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.br-pv-tabel > span { padding: 0.6875rem 1rem; border-top: 1px solid #F0E9E2; align-self: stretch; display: flex; align-items: center; }
.br-pv-tabel > .th { border-top: 0; background: color-mix(in srgb, var(--color-background) 45%, var(--color-surface)); font-size: 0.65625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); }
.br-pv-tabel > .kanan { justify-content: flex-end; text-align: right; }
.br-pv-tabel > .ok { color: var(--color-success); font-weight: 700; }
.br-pv-tabel > .sorot { background: color-mix(in srgb, var(--color-primary-soft) 45%, var(--color-surface)); }
.br-pv-tabel > .aksen { color: var(--color-primary-hover); font-weight: 700; }
.br-pv-tabel > .selisih { background: var(--color-danger-soft); }
.br-pv-tabel .teks-bahaya { color: var(--color-danger); font-weight: 700; }
.br-pv-tabel i { font-style: normal; font-weight: 600; }
.br-pv-k4 { grid-template-columns: 2fr 1.2fr 1.3fr 1fr; }
.br-pv-k5 { grid-template-columns: 0.8fr 2fr 1fr 1fr 1.3fr; }
.br-pv-k7 { grid-template-columns: 0.8fr 1.1fr 1.1fr 1.1fr 1.1fr 0.9fr 2fr; font-size: 0.71875rem; border-radius: 0; border: 0; }
.br-pv-k7 > span { padding: 0.5625rem 0.625rem; }
.br-pv-hijau > .th { background: var(--color-success); color: #FFFFFF; text-transform: none; letter-spacing: 0; font-size: 0.71875rem; }
.br-pv-excel { overflow: hidden; border-radius: 12px; border: 1px solid #D5DBE0; background: var(--color-surface); }
.br-pv-catatan { margin: 0; padding: 0.875rem 1rem; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); font-size: 0.8125rem; color: #4A535B; }
.br-pv-sandi { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 14px; background: var(--color-surface); border: 1.5px solid var(--color-primary); font-size: 0.84375rem; }
.br-pv-sandi > .ikon { color: var(--color-primary-hover); }
.br-pv-input { flex: 1 1 10rem; min-height: 2.375rem; display: flex; align-items: center; padding: 0 0.75rem; border: 1px solid #D9CEC3; border-radius: 9px; letter-spacing: 0.3em; font-weight: 800; }
.br-pv-tombol { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.875rem; border-radius: 9px; background: var(--color-primary); color: #FFFFFF; font-size: 0.78125rem; font-weight: 700; }
.br-pv-tombol.redup { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.br-pv-riwayat { display: grid; gap: 0.625rem; }
.br-pv-riwayat > div { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); }
.br-pv-riwayat > div > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.br-pv-riwayat strong { font-size: 0.875rem; }
.br-pv-riwayat small { font-size: 0.78125rem; color: var(--color-text-secondary); }
.br-pv-x { flex: none; width: 2.375rem; height: 2.375rem; border-radius: 10px; display: grid; place-items: center; background: var(--color-success); color: #FFFFFF; font-weight: 800; }
.br-pv-x.redup { background: color-mix(in srgb, var(--color-background) 75%, var(--color-border)); color: var(--color-text-secondary); }
.br-pv-dasbor {
  display: flex; flex-direction: column; gap: 0.25rem; padding: 1.375rem; border-radius: 16px; color: var(--color-sidebar-text);
  background-color: var(--color-sidebar); background-image: radial-gradient(circle at 92% -10%, color-mix(in srgb, var(--color-primary) 50%, transparent), transparent 45%);
}
.br-pv-dasbor small { font-size: 0.75rem; font-weight: 600; color: #F0B496; }
.br-pv-dasbor strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; }
.br-pv-dasbor span { font-size: 0.8125rem; color: #C9CFD4; }
.br-pv-dasbor em { align-self: flex-start; margin-top: 0.75rem; padding: 0.5625rem 1rem; border-radius: 10px; background: var(--color-primary); font-style: normal; font-size: 0.8125rem; font-weight: 700; }
.br-pv-angka { display: grid; gap: 0.625rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.br-pv-angka > div { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.875rem; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }
.br-pv-angka > div:first-child { flex-direction: row; align-items: center; gap: 0.75rem; }
.br-pv-angka > div:first-child > span:last-child { display: flex; flex-direction: column; }
.br-pv-angka small { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); }
.br-pv-angka strong { font-size: 0.9375rem; }
.br-pv-angka span { font-size: 0.75rem; color: var(--color-text-secondary); }
.br-pv-angka .teks-hijau { color: var(--color-success); font-weight: 700; }
.br-pv-cincin { flex: none; width: 3.125rem; height: 3.125rem; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--color-primary) 64%, color-mix(in srgb, var(--color-background) 75%, var(--color-border)) 0); }
.br-pv-cincin span { width: 2.375rem; height: 2.375rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface); font-size: 0.6875rem; font-weight: 800; color: var(--color-text); }

/* ---------- FAQ: daftar bank ---------- */
.br-faq-bank { display: grid; gap: 0.625rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); margin: 0 0 1.25rem; }
.br-faq-bank .kartu-bank { margin: 0; }
.br-faq details > p + .br-faq-bank { margin-top: -0.5rem; }

/* ---------- Tombol kembali ke atas ---------- */
.br-ke-atas {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 50; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--color-sidebar); color: var(--color-sidebar-text);
  border: 1px solid rgb(255 255 255 / 0.12); box-shadow: 0 12px 28px rgb(31 42 51 / 0.35);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease;
}
.br-ke-atas:hover { background: var(--color-primary); color: #FFFFFF; }
.br-ke-atas .ikon { width: 1.375rem; height: 1.375rem; }
.js .br-ke-atas:not(.tampil) { opacity: 0; transform: translateY(0.75rem); pointer-events: none; }

/* ---------- Layar sedang & ponsel ---------- */
@media (max-width: 62rem) {
  .br-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-ubin-lebar { grid-column: 1 / -1; }
  .br-mock-sidebar { display: none; }
  .br-mock-isi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .br-bagian { padding-top: 4.5rem; }
  .br-hero { padding: 3rem 1rem 11rem; }
  .br-hero-aksi { width: 100%; flex-direction: column; }
  .br-hero-aksi .tombol { width: 100%; }
  .br-lebar, .br-lebar-luas { padding-inline: 1rem; }
  .br-mock-bungkus { margin-top: -9rem; }
  .br-mock-utama { padding: 1rem; }
  .br-mock-tabel th:nth-child(3), .br-mock-tabel td:nth-child(3) { display: none; }
  .br-mock-tabel { font-size: 0.75rem; }
  .br-mock-tabel th, .br-mock-tabel td { padding: 0.625rem 0.625rem; white-space: normal; }
  .br-mock-tabel td small { display: none; }
  .br-mock-kepala { flex-wrap: wrap; align-items: flex-start; }
  .br-mock-kepala .chip { display: none; }
  .br-pil { max-width: 100%; text-align: left; }
  .br-mock-melayang { position: static; margin-top: 0.75rem; box-shadow: none; }
  .br-bento { grid-template-columns: minmax(0, 1fr); }
  .br-xls-ringkas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-xls-contoh table { font-size: 0.6875rem; }
  .br-xls-contoh th:nth-child(2), .br-xls-contoh td:nth-child(2) { display: none; }
  .br-panel-gelap, .br-ajakan { padding: 2.5rem 1.25rem; border-radius: 22px; }
  .br-ajakan-aksi { width: 100%; flex-direction: column; }
  .br-ajakan-aksi .tombol { width: 100%; }
}
@media (max-width: 62rem) {
  .br-nav-jangkar { display: none; }
  .br-alur::before { display: none; }
  .br-preview { padding: 2.5rem 1.5rem; }
}
@media (max-width: 40rem) {
  .publik-beranda .publik-kepala-isi { padding-inline: 1rem; }
  .publik-beranda .publik-kepala-isi { flex-wrap: nowrap; padding-block: 0.625rem; }
  .publik-beranda .publik-kepala .merek-app { display: none; }
  .publik-beranda .merek-logo { max-width: 104px; }
  .publik-beranda .publik-nav { flex-wrap: nowrap; gap: 0.875rem; font-size: 0.875rem; white-space: nowrap; }
  .br-pv-k4 > span:nth-child(4n+1) { word-break: break-all; }
  .br-fakta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 4rem; }
  .br-fakta-kartu { padding: 1.125rem; gap: 0.75rem; border-radius: 18px; }
  .br-fakta-nilai { font-size: 1.5rem; }
  .br-fakta-nilai small { font-size: 0.875rem; }
  .br-fakta-atas .br-label { display: none; }
  .br-fakta .br-segmen span { font-size: 0.625rem; }
  .br-persona-isi { padding: 1.25rem; }
  .br-alur-teks { padding: 1.25rem; }
  .br-preview { padding: 2rem 1rem; border-radius: 22px; }
  .br-pv-daftar { flex-direction: row; overflow-x: auto; gap: 0.375rem; padding-bottom: 0.25rem; }
  .br-pv-tab { flex: none; width: auto; padding: 0.625rem 0.875rem; }
  .br-pv-judul span, .br-pv-progres { display: none !important; }
  .br-pv-judul strong { font-size: 0.875rem; white-space: nowrap; }
  .br-pv-jendela { padding: 0.375rem; }
  .br-pv-layar { height: 31rem; padding: 0.875rem; overflow-y: auto; }
  .br-pv-kepala { flex-wrap: wrap; align-items: flex-start; }
  .br-pv-tabel { overflow-x: auto; font-size: 0.75rem; }
  .br-pv-tabel > span { padding: 0.5rem 0.5rem; }
  .br-pv-tabel i { font-size: 0.6875rem; }
  .br-xls-contoh { overflow-x: auto; }
  .br-pv-catatan { display: none; }
  .br-pv-k4 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.8fr); }
  .br-pv-k4 > span:nth-child(4n+2) { display: none; }
  .br-pv-k5 { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.5fr) minmax(0, 1.2fr); }
  .br-pv-k5 > span:nth-child(5n+3), .br-pv-k5 > span:nth-child(5n+4) { display: none; }
  .br-pv-k7 { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.6fr); }
  .br-pv-k7 > span:nth-child(7n+2), .br-pv-k7 > span:nth-child(7n+3), .br-pv-k7 > span:nth-child(7n+4), .br-pv-k7 > span:nth-child(7n+6) { display: none; }
  .br-pv-riwayat > div { flex-wrap: wrap; }
  .br-pv-angka { grid-template-columns: minmax(0, 1fr); }
  .br-ke-atas { right: 1rem; bottom: 1rem; width: 2.875rem; height: 2.875rem; }
}

/* ---------- Halaman /paket/ tampilan publik (belum masuk) ---------- */
.publik-halaman-paket { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-content: start; }
.publik-halaman-paket > * { margin-top: 0; margin-bottom: 0; }
.publik-halaman-paket .kepala-halaman h1 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; }

/* ==========================================================================
   Beranda publik v4 (14/10/2026) — hero ringkas, nav, "Juga dipakai oleh",
   harga bertingkat, FAQ 2 kolom, footer khusus beranda. Menimpa aturan v3 di atas.
   ========================================================================== */
html:has(body.publik-beranda) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(body.publik-beranda) { scroll-behavior: auto; } }

/* ---------- Header: merek & menu ---------- */
.publik-beranda .publik-kepala .merek-app {
  opacity: 1; margin-left: 0.25rem; padding: 0.3125rem 0.5625rem; border-radius: 7px;
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.2;
  color: #FFF4EE; background: color-mix(in srgb, var(--color-primary) 55%, transparent);
  border: 1px solid color-mix(in srgb, #F0B496 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.publik-beranda .publik-nav { gap: 0.25rem; }
.publik-beranda .publik-nav a:not(.tombol) {
  position: relative; padding: 0.5rem 0.8125rem; border-radius: 999px; text-decoration: none;
  transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.publik-beranda .publik-nav a:not(.tombol)::after {
  content: ""; position: absolute; left: 50%; bottom: 0.25rem; width: 4px; height: 4px; border-radius: 50%;
  background: #F0B496; opacity: 0; transform: translate(-50%, 4px); transition: opacity 0.18s ease, transform 0.18s ease;
}
.publik-beranda .publik-nav a:not(.tombol):hover,
.publik-beranda .publik-nav a:not(.tombol):focus-visible {
  color: #FFFFFF; text-decoration: none; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}
.publik-beranda .publik-nav a:not(.tombol):hover::after,
.publik-beranda .publik-nav a:not(.tombol):focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.publik-beranda .publik-nav .tombol { margin-left: 0.5rem; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
.publik-beranda .publik-nav .tombol:hover { transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 40%, transparent); }

/* ---------- Hero ringkas ---------- */
.br-hero { padding: 3.5rem 1.5rem 16.25rem; }
.br-hero-isi { max-width: 62rem; }
.br-hero h1 { max-width: 58.75rem; font-size: clamp(2.125rem, 4.4vw, 3.5rem); line-height: 1.1; }
@media (min-width: 48rem) {
  .br-hero h1 {
    background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 50%, #F0B496 50%, #F0B496 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
.br-hero-sub { margin-top: 1.125rem; max-width: 48.75rem; font-size: clamp(1rem, 1.4vw, 1.125rem); }
.br-hero-aksi { margin-top: 1.75rem; }
.br-hero .br-tombol-besar { min-height: 3.125rem; font-size: 1rem; padding: 0 1.625rem; }
.br-hero-cek { margin-top: 1.25rem; }
.br-mock-bungkus { margin-top: -13.75rem; }

/* ---------- Bank mini (langkah Unggah) ---------- */
.br-bank-mini { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.br-bank-mini li { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem 0.25rem 0.625rem; border-radius: 999px; font-size: 0.75rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.br-bank-mini .kartu-bank-singkatan { font-size: 0.75rem; font-weight: 800; }
.br-bank-status { font-size: 0.6875rem; font-weight: 600; color: var(--color-text-secondary); }
.br-bank-mini li.tersedia { border-color: color-mix(in srgb, var(--color-success) 40%, transparent); background: var(--color-success-soft); }
.br-bank-mini li.tersedia .br-bank-status { color: var(--color-success); font-weight: 700; }
.br-bank-mini li.segera .kartu-bank-singkatan { color: var(--color-muted); }

/* ---------- Juga dipakai oleh ---------- */
.br-persona-kecil { gap: 1rem; }
.br-persona-kecil article {
  position: relative; overflow: hidden; gap: 0.875rem; padding: 1.5rem 1.375rem 1.25rem; border-radius: 20px;
  background: linear-gradient(180deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-background) 45%, var(--color-surface)) 100%);
  box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 10px 26px rgb(31 42 51 / 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.br-persona-kecil article::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--color-primary), #E8956A);
}
.br-persona-kecil article::after {
  content: "\201D"; position: absolute; right: 0.875rem; top: 0.25rem; font-size: 4.5rem; line-height: 1; font-weight: 800;
  color: color-mix(in srgb, var(--color-primary) 12%, transparent); pointer-events: none;
}
.br-persona-kecil article:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 20px 40px rgb(31 42 51 / 0.1); }
.br-persona-kecil .br-ikon {
  background: linear-gradient(135deg, var(--color-primary), #E8956A); color: #FFFFFF;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.br-persona-kecil .br-pk-pain { position: relative; font-size: 0.875rem; color: #3D4750; }
.br-pk-solusi {
  margin: auto 0 0 !important; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.3125rem 0.625rem; border-radius: 999px; font-size: 0.75rem !important; font-weight: 700;
  color: var(--color-success) !important; background: var(--color-success-soft);
}
.br-pk-solusi .ikon { width: 0.875rem; height: 0.875rem; }

/* ---------- Harga bertingkat ---------- */
.br-judul-naik { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.25rem 0.875rem; }
.br-panah-naik {
  display: inline-grid; place-items: center; width: 3.5rem; height: 2.75rem; border-radius: 14px; flex: none;
  color: var(--color-success); background: var(--color-success-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-success) 25%, transparent);
}
.br-panah-naik svg { width: 2.125rem; height: 1.5rem; }
.br-tangga { position: relative; list-style: none; margin: 0 auto 2.5rem; padding: 0; max-width: 46rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.br-tangga::before {
  content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 1.25rem; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 25%, var(--color-background)), var(--color-primary));
}
.br-tangga::after {
  content: ""; position: absolute; right: calc(16.6% - 0.5rem); top: calc(1.25rem - 6px); border: 8px solid transparent; border-left: 10px solid var(--color-primary); border-right: 0;
}
.br-tangga li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.br-tangga-titik {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.9375rem;
  background: var(--color-surface); color: var(--color-primary-hover); border: 2px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  box-shadow: 0 0 0 6px var(--color-background);
}
.br-tangga li:nth-child(2) .br-tangga-titik { background: var(--color-primary-soft); border-color: var(--color-primary); }
.br-tangga-puncak { background: var(--color-primary) !important; color: #FFFFFF !important; border-color: var(--color-primary) !important; box-shadow: 0 0 0 6px var(--color-background), 0 10px 22px color-mix(in srgb, var(--color-primary) 40%, transparent) !important; }
.br-tangga strong { display: block; font-size: 0.9375rem; }
.br-tangga small { font-size: 0.78125rem; color: var(--color-text-secondary); }

.br-harga-tingkat { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: start; }
@media (min-width: 62rem) {
  .br-harga-tingkat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .br-tingkat:nth-child(1) { margin-top: 4rem; }
  .br-tingkat:nth-child(2) { margin-top: 2rem; }
}
.br-tingkat { display: flex; flex-direction: column; gap: 0.875rem; }
.br-tingkat-label { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); }
.br-tingkat-label span { padding: 0.125rem 0.4375rem; border-radius: 6px; background: var(--color-primary-soft); color: var(--color-primary-hover); letter-spacing: 0.04em; }
.br-harga-kartu {
  position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.625rem; border-radius: 22px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 12px 30px rgb(31 42 51 / 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.br-harga-kartu:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 22px 44px rgb(31 42 51 / 0.11); }
.br-harga-kartu h3 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.br-harga-jenis { margin: 0; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); }
.br-harga-angka { margin: 0.375rem 0 0; font-size: 2.125rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.br-harga-angka span { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; color: var(--color-text-secondary); }
.br-harga-kuota { margin: 0; font-size: 0.875rem; font-weight: 600; color: #3D4750; }
.br-harga-desk { margin: 0; font-size: 0.84375rem; color: var(--color-text-secondary); }
.br-harga-fitur { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.375rem; font-size: 0.84375rem; }
.br-harga-fitur li { display: flex; align-items: center; gap: 0.5rem; }
.br-harga-fitur .ikon { color: var(--color-success); }
.br-harga-kartu .tombol { margin-top: 0.75rem; }
.br-harga-populer {
  border: 0; color: var(--color-sidebar-text);
  background-color: var(--color-sidebar);
  background-image: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-primary) 50%, transparent), transparent 55%);
  box-shadow: 0 24px 50px rgb(31 42 51 / 0.25);
}
.br-harga-populer .br-harga-jenis, .br-harga-populer .br-harga-angka span, .br-harga-populer .br-harga-desk { color: #C9CFD4; }
.br-harga-populer .br-harga-kuota { color: #E9E2DA; }
.br-harga-pita {
  position: absolute; top: 1.125rem; right: 1.125rem; display: inline-flex; align-items: center; gap: 0.3125rem;
  padding: 0.25rem 0.625rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em;
  background: var(--color-primary); color: #FFFFFF;
}
.br-harga-pita .ikon { width: 0.8125rem; height: 0.8125rem; }
.br-harga-bawah { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.125rem 1.375rem; border-radius: 18px; background: var(--color-surface); border: 1px dashed #D9CBBE; }
.br-harga-bawah p { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #4A535B; }
.br-harga-bawah .ikon { color: var(--color-primary-hover); }

/* ---------- FAQ 2 kolom ---------- */
.br-faq { display: block; }
.br-faq-kolom { display: grid; gap: 0.75rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.br-faq-kolom .br-faq-daftar { flex: none; display: grid; gap: 0.75rem; }
.br-faq summary { font-size: 1rem; }
.br-faq details { transition: box-shadow 0.18s ease, border-color 0.18s ease; }
.br-faq details:hover { border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); }
.br-faq-kontak { display: flex; gap: 0.875rem; align-items: flex-start; padding: 1.125rem 1.25rem; border-radius: 16px; background: var(--color-primary-soft); }
.br-faq-kontak .br-ikon { flex: none; width: 2.5rem; height: 2.5rem; background: var(--color-surface); }
.br-faq-kontak strong { display: block; }
.br-faq-kontak p { margin: 0.125rem 0 0; font-size: 0.875rem; color: #4A535B; }
.br-faq-kontak a { color: var(--color-primary-hover); font-weight: 700; }

/* ---------- Footer khusus beranda ---------- */
.br-kaki {
  position: relative; overflow: hidden; color: #C9CFD4;
  background-color: var(--color-sidebar);
  background-image:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--color-primary) 35%, transparent), transparent 40%),
    linear-gradient(rgb(255 255 255 / 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.03) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
}
.br-kaki-atas { position: relative; display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); padding-block: 4rem 3rem; }
.br-kaki-merek { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.br-kaki-merek > div { display: flex; align-items: center; gap: 0.625rem; }
.br-kaki-logo { display: inline-flex; align-items: center; padding: 0.5rem 0.875rem; border-radius: 12px; background: var(--color-surface); color: var(--color-text); text-decoration: none; box-shadow: 0 10px 24px rgb(0 0 0 / 0.25); }
.br-kaki-logo:hover { color: var(--color-text); }
.br-kaki-logo img { display: block; height: 2rem; width: auto; max-width: 11rem; }
.br-kaki-logo .merek-wordmark { font-size: 1.5rem; }
.br-kaki-app { margin-top: -0.25rem; padding: 0.3125rem 0.5625rem; border-radius: 7px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; color: #FFF4EE; background: color-mix(in srgb, var(--color-primary) 55%, transparent); border: 1px solid color-mix(in srgb, #F0B496 55%, transparent); }
.br-kaki-merek p { margin: 0; max-width: 22rem; font-size: 0.9375rem; color: #C9CFD4; }
.br-kaki-kolom { display: flex; flex-direction: column; gap: 0.625rem; }
.br-kaki-kolom p { margin: 0 0 0.375rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #FFFFFF; }
.br-kaki-kolom a { width: fit-content; color: #C9CFD4; text-decoration: none; font-size: 0.9375rem; transition: color 0.15s ease, transform 0.15s ease; }
.br-kaki-kolom a:hover { color: #FFFFFF; transform: translateX(3px); }
.br-kaki-bawah { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; padding-block: 1.375rem 1.75rem; border-top: 1px solid rgb(255 255 255 / 0.1); font-size: 0.84375rem; }
.br-kaki-bawah p { margin: 0; }
.br-kaki-lencana { display: inline-flex; align-items: center; gap: 0.5rem; color: #E9E2DA; }
.br-kaki-lencana .ikon { color: #F0B496; }

@media (max-width: 62rem) {
  .br-kaki-atas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .br-kaki-merek { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .br-hero { padding: 2.5rem 1rem 10.5rem; }
  .br-mock-bungkus { margin-top: -8.5rem; }
  .publik-beranda .publik-kepala .merek-app { display: inline-block; }
  .publik-beranda .publik-nav { gap: 0; }
  .publik-beranda .publik-nav a:not(.tombol) { padding: 0.5rem 0.5rem; }
  .publik-beranda .publik-nav .tombol { margin-left: 0.25rem; }
  .br-tangga { margin-bottom: 1.75rem; }
  .br-tangga small { display: none; }
  .br-faq-kolom { grid-template-columns: minmax(0, 1fr); }
  .br-harga-bawah { flex-direction: column; align-items: flex-start; }
  .br-kaki-atas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; padding-block: 3rem 2rem; }
  .br-kaki-bawah { flex-direction: column; }
}

/* v4 penyesuaian */
.br-hero h1 { text-wrap: wrap; }
.br-persona-kecil article::after { top: auto; bottom: -1.75rem; right: 0.625rem; font-size: 6rem; }
.br-persona-kecil article > * { position: relative; z-index: 1; }
#harga .br-kepala-bagian { max-width: 60rem; }
@media (min-width: 48rem) { .br-judul-naik { flex-wrap: nowrap; } }
.br-tangga::before { right: calc(16.6% + 1.875rem); }
.br-tangga::after { right: calc(16.6% + 1.375rem); }
@media (max-width: 40rem) {
  .publik-beranda .publik-nav a:not(.tombol) { display: none; }
  .publik-beranda .publik-kepala .merek { gap: 0.5rem; }
  .publik-beranda .publik-kepala .merek-app { font-size: 0.625rem; padding: 0.25rem 0.4375rem; }
}

/* ---------- Harga v5: rapi & sejajar (menimpa v4) ---------- */
.br-harga-tingkat { position: relative; align-items: stretch; gap: 1.25rem; }
@media (min-width: 62rem) {
  .br-tingkat:nth-child(1), .br-tingkat:nth-child(2) { margin-top: 0; }
  .br-harga-tingkat::before {
    content: ""; position: absolute; top: 1.25rem; left: 2.5rem; height: 3px; border-radius: 3px;
    right: calc((100% - 2.5rem) / 3 - 0.25rem);
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 22%, var(--color-background)), var(--color-primary));
  }
  .br-harga-tingkat::after {
    content: ""; position: absolute; top: calc(1.25rem - 6.5px); right: calc((100% - 2.5rem) / 3 - 0.375rem);
    border: 8px solid transparent; border-left: 10px solid var(--color-primary); border-right: 0;
  }
}
.br-tingkat { gap: 1rem; }
.br-tingkat-kepala { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.75rem; padding-right: 1.5rem; }
.br-tingkat-kepala .br-tangga-titik { flex: none; box-shadow: 0 0 0 6px var(--color-background); }
.br-tingkat:nth-child(2) .br-tangga-titik { background: var(--color-primary-soft); border-color: var(--color-primary); }
.br-tingkat-kepala > span:last-child { display: flex; flex-direction: column; padding: 0 0.625rem; background: var(--color-background); line-height: 1.3; }
.br-tingkat-kepala strong { font-size: 1rem; font-weight: 800; }
.br-tingkat-kepala small { font-size: 0.78125rem; color: var(--color-text-secondary); }
.br-tingkat > .br-harga-kartu { flex: 1; }
.br-harga-kartu { gap: 0.375rem; padding: 1.5rem; }
.br-harga-kartu h3 { font-size: 1.125rem; }
.br-harga-angka { margin-top: 0.25rem; font-size: 1.875rem; }
.br-harga-kuota { margin-top: 0.125rem; }
.br-harga-desk { min-height: 1.3em; }
.br-harga-fitur { margin-top: 0.5rem; }
.br-harga-kartu .tombol { margin-top: auto; }
.br-harga-kartu > .tombol, .br-harga-kartu > p.teks-ket:last-child { margin-top: auto; }
.br-harga-kartu > .br-harga-desk + .tombol,
.br-harga-kartu > .br-harga-kuota + .tombol,
.br-harga-kartu > .br-harga-fitur + .tombol { margin-top: auto; }
.br-harga-kartu::after { content: ""; display: block; flex: 0 0 0; }
.br-harga-kartu > .tombol { position: relative; top: 0; }
.br-harga-kartu > *:nth-last-child(2) { margin-bottom: 0.75rem; }
.br-harga-pita { top: 1.25rem; right: 1.25rem; }
@media (max-width: 62rem) {
  .br-tingkat-kepala > span:last-child { background: transparent; padding: 0; }
}

/* ==========================================================================
   Halaman Pilih paket (14/10/2026): ringkasan gelap + checkout + dialog konfirmasi.
   ========================================================================== */
.pp-tata { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; max-width: 64rem; margin-top: 1rem; }
.pp-ringkas {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 0.5rem;
  padding: 2rem; border-radius: 22px; color: var(--color-sidebar-text);
  background: var(--color-sidebar); box-shadow: 0 24px 50px rgb(31 42 51 / 0.22);
}
.pp-ringkas-hias {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 95% -10%, color-mix(in srgb, var(--color-primary) 50%, transparent), transparent 45%),
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 34px 34px;
}
.pp-ringkas-kepala { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.pp-label { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #F0B496; }
.pp-pita { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.25rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; background: var(--color-primary); color: #FFFFFF; }
.pp-pita .ikon { width: 0.875rem; height: 0.875rem; }
.pp-ringkas h1 { margin: 0.25rem 0 0; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; color: inherit; }
.pp-desk { margin: 0; color: #C9CFD4; }
.pp-harga { margin: 1rem 0 0; font-size: clamp(2.25rem, 4vw, 2.875rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pp-harga span { margin-left: 0.375rem; font-size: 1rem; font-weight: 600; letter-spacing: 0; color: #C9CFD4; }
.pp-sub { margin: 0; font-size: 0.875rem; color: #C9CFD4; }
.pp-fitur { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.625rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-fitur li { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; border-radius: 14px; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.1); }
.pp-fitur-ikon { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 10px; display: grid; place-items: center; background: rgb(255 255 255 / 0.08); color: #F0B496; }
.pp-fitur li > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pp-fitur strong { font-size: 0.9375rem; }
.pp-fitur small { font-size: 0.75rem; color: #C9CFD4; }

.pp-bayar {
  display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; border-radius: 22px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 14px 36px rgb(31 42 51 / 0.07);
}
.pp-bayar h2 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.pp-bayar form { margin: 0; }
.pp-bayar-ikon { width: 2.75rem; height: 2.75rem; border-radius: 12px; display: grid; place-items: center; }
.pp-ikon-aksen { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.pp-langkah { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; counter-reset: none; }
.pp-langkah li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; border-radius: 10px; font-size: 0.78125rem; font-weight: 700; color: var(--color-text-secondary); background: color-mix(in srgb, var(--color-background) 60%, var(--color-surface)); }
.pp-langkah li span { flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.6875rem; background: var(--color-surface); border: 1px solid var(--color-border); }
.pp-langkah li.aktif { color: var(--color-primary-hover); background: var(--color-primary-soft); }
.pp-langkah li.aktif span { background: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF; }
.pp-rincian { margin: 0; display: grid; border-radius: 14px; border: 1px solid var(--color-border); overflow: hidden; }
.pp-rincian > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.75rem 1rem; border-top: 1px solid var(--color-border); font-size: 0.875rem; }
.pp-rincian > div:first-child { border-top: 0; }
.pp-rincian dt { color: #4A535B; }
.pp-rincian dt small { display: block; font-size: 0.75rem; color: var(--color-text-secondary); }
.pp-rincian dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pp-rincian-total { background: color-mix(in srgb, var(--color-background) 55%, var(--color-surface)); }
.pp-rincian-total dt { font-weight: 800; color: var(--color-text); }
.pp-rincian-total dd { font-weight: 600; color: var(--color-text-secondary); }
.pp-catatan { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.875rem; color: #4A535B; }
.pp-catatan li { display: flex; align-items: flex-start; gap: 0.5rem; }
.pp-catatan .ikon { margin-top: 0.125rem; color: var(--color-primary-hover); }
.pp-tombol { min-height: 3.125rem; font-size: 1rem; border-radius: 12px; }
.pp-aman { margin: -0.375rem 0 0; text-align: center; font-size: 0.78125rem; color: var(--color-text-secondary); }
.pp-info { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.875rem 1rem; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-primary-hover); font-size: 0.875rem; }
.pp-info p { margin: 0; color: var(--color-text); }

/* Dialog konfirmasi */
.dialog-konfirmasi {
  width: min(28rem, calc(100% - 2rem)); padding: 0; border: 0; border-radius: 22px;
  background: var(--color-surface); color: var(--color-text);
  box-shadow: 0 30px 80px rgb(15 22 28 / 0.35);
}
.dialog-konfirmasi::backdrop { background: rgb(31 42 51 / 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialog-konfirmasi[open] { animation: dialog-muncul 0.18s ease-out; }
@keyframes dialog-muncul { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dialog-konfirmasi[open] { animation: none; } }
.dialog-isi { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.75rem; }
.dialog-ikon { width: 3rem; height: 3rem; border-radius: 14px; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary-hover); }
.dialog-ikon .ikon { width: 1.5rem; height: 1.5rem; }
.dialog-isi h2 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.dialog-isi p { margin: 0; color: #4A535B; font-size: 0.9375rem; }
.pp-rincian-kecil > div { padding: 0.625rem 0.875rem; font-size: 0.84375rem; }
.dialog-aksi { display: flex; justify-content: flex-end; gap: 0.625rem; margin-top: 0.25rem; }
.dialog-aksi .tombol { min-height: 2.875rem; }
.dialog-aksi [aria-disabled="true"] { opacity: 0.7; pointer-events: none; }

@media (max-width: 56rem) {
  .pp-tata { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .pp-ringkas, .pp-bayar { padding: 1.375rem; border-radius: 18px; }
  .pp-fitur { grid-template-columns: minmax(0, 1fr); }
  .pp-langkah li { flex-direction: column; text-align: center; gap: 0.25rem; }
  .dialog-aksi { flex-direction: column-reverse; }
  .dialog-aksi .tombol { width: 100%; }
}

/* ---------- Sidebar: logo + label aplikasi tidak terpotong (14/10/2026) ---------- */
.sidebar .merek:has(.merek-logo) { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.sidebar .merek:has(.merek-logo) .merek-app {
  opacity: 1; padding: 0.25rem 0.5rem; border-radius: 7px; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.2;
  color: #FFF4EE; background: color-mix(in srgb, var(--color-primary) 55%, transparent);
  border: 1px solid color-mix(in srgb, #F0B496 55%, transparent);
}
.sidebar .merek-logo { max-width: 150px; }

/* ---------- Dasbor: notifikasi invoice (14/10/2026) ---------- */
.notif-invoice {
  position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  padding: 1.375rem 1.5rem; border-radius: 20px; border: 1px solid; isolation: isolate;
}
.notif-invoice::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.notif-invoice-bayar {
  border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--color-primary-soft) 85%, var(--color-surface)) 0%, var(--color-surface) 70%);
  box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 16px 36px color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.notif-invoice-bayar::before {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 6%, transparent) 0 2px, transparent 2px 14px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%); mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
}
.notif-invoice-verifikasi {
  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
  background: linear-gradient(110deg, var(--color-success-soft) 0%, var(--color-surface) 70%);
  box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 12px 28px color-mix(in srgb, var(--color-success) 12%, transparent);
}
.notif-invoice-ikon { position: relative; flex: none; width: 3.25rem; height: 3.25rem; border-radius: 15px; display: grid; place-items: center; color: #FFFFFF; }
.notif-invoice-ikon .ikon { position: relative; width: 1.5rem; height: 1.5rem; }
.notif-invoice-bayar .notif-invoice-ikon { background: var(--color-primary); box-shadow: 0 10px 22px color-mix(in srgb, var(--color-primary) 40%, transparent); }
.notif-invoice-verifikasi .notif-invoice-ikon { background: var(--color-success); box-shadow: 0 10px 22px color-mix(in srgb, var(--color-success) 30%, transparent); }
.notif-invoice-denyut { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--color-primary); animation: notif-invoice-denyut 2s ease-out infinite; }
@keyframes notif-invoice-denyut { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .notif-invoice-denyut { animation: none; opacity: 0; } }
.notif-invoice-isi { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.notif-invoice-label { margin: 0; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.notif-invoice-bayar .notif-invoice-label { color: var(--color-primary-hover); }
.notif-invoice-verifikasi .notif-invoice-label { color: var(--color-success); }
.notif-invoice h2 { margin: 0; font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; }
.notif-invoice-meta { margin: 0.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; font-size: 0.84375rem; color: var(--color-text-secondary); }
.notif-invoice-meta > span { display: inline-flex; align-items: center; gap: 0.375rem; }
.notif-invoice-meta .ikon { width: 1rem; height: 1rem; }
.notif-invoice-batas { color: var(--color-primary-hover); font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primary-soft) 80%, var(--color-surface)); }
.notif-invoice-aksi { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.notif-invoice-total { margin: 0; display: flex; flex-direction: column; text-align: right; line-height: 1.15; }
.notif-invoice-total small { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); }
.notif-invoice-total strong { font-size: 1.625rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.notif-invoice-tombol { min-height: 3rem; padding: 0 1.375rem; border-radius: 12px; font-size: 0.9375rem; white-space: nowrap; }
.notif-invoice-bayar .notif-invoice-tombol { box-shadow: 0 10px 22px color-mix(in srgb, var(--color-primary) 35%, transparent); }
.dasbor-v3 > .notif-invoice { margin: 0; }
@media (max-width: 40rem) {
  .notif-invoice { padding: 1.125rem; border-radius: 18px; }
  .notif-invoice-aksi { width: 100%; justify-content: space-between; }
  .notif-invoice-total { text-align: left; }
}

/* ==========================================================================
 * Pilih bank (halaman Konversi) v3 / opsi A2 — redesain 16/10/2026
 * Kepala gelap + pencarian, kartu tersedia lebih kaya, daftar "Segera hadir"
 * dua kolom + indeks huruf. Hapus blok ini untuk kembali ke tampilan v2.
 * ======================================================================== */
.pilih-bank-v3 { gap: 1.5rem; }
.hero-bank {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 1rem;
  padding: 1.75rem 1.875rem 1.5rem; border-radius: 22px; background: var(--color-sidebar); color: var(--color-sidebar-text);
  box-shadow: 0 22px 46px rgb(31 42 51 / 0.22);
}
.hero-bank-hias {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 92% -20%, rgb(184 79 43 / 0.5), rgb(184 79 43 / 0) 45%),
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 32px 32px;
}
.hero-bank-atas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.75rem 1.25rem; }
.hero-bank-label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #F0B496; }
.hero-bank h1 { margin: 0.25rem 0 0.125rem; font-size: 1.875rem; font-weight: 800; letter-spacing: -0.025em; color: inherit; }
.hero-bank-atas p { margin: 0; color: #C9CFD4; }
.pilih-bank-v3 .ringkas-bank { display: flex; gap: 0.625rem; color: inherit; font-size: inherit; }
.stat-bank {
  display: flex; flex-direction: column; padding: 0.625rem 0.875rem; border-radius: 14px; min-width: 6.5rem;
  background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.12); font-size: 0.71875rem; color: #C9CFD4;
}
.stat-bank b { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.stat-tersedia b { color: #9FD8B4; }
.pilih-bank-v3 .alat-bank { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; gap: 0.75rem 1.25rem; }
.pilih-bank-v3 .cari-bank {
  min-height: 54px; border: 0; border-radius: 14px; background: var(--color-surface);
  box-shadow: 0 12px 26px rgb(0 0 0 / 0.28); color: var(--color-primary);
}
.pilih-bank-v3 .cari-bank:focus-within { box-shadow: 0 0 0 3px #F0B496, 0 12px 26px rgb(0 0 0 / 0.28); }
.pilih-bank-v3 .saklar-tersedia { color: #E6E9EC; }

/* Judul bagian */
.pilih-bank-v3 .judul-bagian-bank {
  font-size: 1.125rem; letter-spacing: -0.01em; text-transform: none; font-weight: 800; color: var(--color-text); gap: 0.625rem;
}
.pilih-bank-v3 .judul-tersedia::before {
  width: 10px; height: 10px; background: var(--color-success); box-shadow: 0 0 0 5px var(--color-success-soft);
}
.pilih-bank-v3 .judul-bagian-bank .hitung-bank { font-size: 0.8125rem; }
.pilih-bank-v3 .judul-tersedia .hitung-bank { background: var(--color-success-soft); border-color: transparent; color: var(--color-success); }

/* Kartu tersedia */
.pilih-bank-v3 .grid-bank-tersedia { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0.875rem; }
.pilih-bank-v3 a.kartu-bank {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; gap: 0.875rem;
  padding: 1.125rem 1.125rem 1rem; border-radius: 18px;
  box-shadow: 0 1px 2px rgb(31 42 51 / 0.04), 0 10px 26px rgb(31 42 51 / 0.06);
}
.pilih-bank-v3 a.kartu-bank::after {
  content: ""; position: absolute; right: -30px; top: -40px; width: 130px; height: 130px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(184 79 43 / 0.10), rgb(184 79 43 / 0) 70%);
}
.kartu-bank-atas { display: flex; align-items: center; gap: 0.875rem; min-width: 0; }
.pilih-bank-v3 a.kartu-bank .kartu-bank-monogram {
  position: relative; width: 52px; height: 52px; border-radius: 14px; font-size: 0.875rem;
  background: linear-gradient(145deg, #2E3B47, var(--color-sidebar)); box-shadow: 0 8px 16px rgb(31 42 51 / 0.22);
}
.lencana-cek {
  position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-success); border: 2px solid var(--color-surface); display: grid; place-items: center; color: #FFFFFF;
}
.lencana-cek .ikon { width: 10px; height: 10px; }
.pilih-bank-v3 a.kartu-bank .kartu-bank-singkatan { font-size: 1.0625rem; }
.pilih-bank-v3 a.kartu-bank .kartu-bank-nama { font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kartu-bank-bawah {
  display: flex; align-items: center; justify-content: space-between; gap: 0.625rem;
  padding-top: 0.75rem; border-top: 1px dashed #EADFD5;
}
.pilih-bank-v3 .kartu-bank-format { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--color-text-secondary); }
.label-pdf, .label-xlsx { font-size: 0.625rem; font-weight: 800; border-radius: 4px; padding: 1px 5px; }
.label-pdf { color: var(--color-danger); background: var(--color-danger-soft); }
.label-xlsx { color: #FFFFFF; background: var(--color-success); }
.pilih-bank-v3 .kartu-bank-mulai { min-height: 36px; padding: 0 0.875rem; font-size: 0.8125rem; box-shadow: 0 6px 14px rgb(184 79 43 / 0.28); }

/* Segera hadir: panel krem + daftar dua kolom */
.pilih-bank-v3 .bagian-bank-segera {
  padding: 1.25rem 1.375rem 1rem; border-radius: 20px; border: 1px solid #EADFD5;
  background: linear-gradient(180deg, #FBF4EE, var(--color-background));
}
.kepala-segera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; }
.kepala-segera p { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--color-text-secondary); }
.ikon-segera {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-secondary);
}
.ikon-segera .ikon { width: 15px; height: 15px; }
.indeks-huruf { display: flex; flex-wrap: wrap; gap: 2px; }
.indeks-huruf > * {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; padding: 0; border: 0;
  font: inherit; font-size: 0.6875rem; font-weight: 800; color: #CFC6BD; background: none;
}
.indeks-huruf button { background: var(--color-primary-soft); color: var(--color-primary-hover); cursor: pointer; }
.indeks-huruf button:hover { background: var(--color-primary); color: #FFFFFF; }
.pilih-bank-v3 .grid-bank-segera { display: block; columns: 2 18rem; column-gap: 0.75rem; }
.pilih-bank-v3 .kartu-bank.segera {
  break-inside: avoid; display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.375rem;
  padding: 0.5625rem 0.625rem; border-radius: 12px; border: 1px solid #F0E6DC; background: var(--color-surface);
  transition: box-shadow 0.2s;
}
.pilih-bank-v3 .kartu-bank.segera[hidden] { display: none !important; }
.pilih-bank-v3 .kartu-bank.segera .kartu-bank-monogram { width: 34px; height: 34px; border-radius: 10px; font-size: 0.65625rem; color: #7A7068; background: #F3ECE5; }
.pilih-bank-v3 .kartu-bank.segera .kartu-bank-baris { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilih-bank-v3 .kartu-bank.segera .kartu-bank-singkatan { display: inline; font-size: 0.875rem; color: #3E4A53; }
.pilih-bank-v3 .kartu-bank.segera .kartu-bank-nama { display: inline; font-size: 0.78125rem; color: var(--color-text-secondary); }
.pilih-bank-v3 .kartu-bank.segera .kartu-bank-nama::before { content: " · "; }
.pilih-bank-v3 .kartu-bank.segera .chip { flex: none; }
.pilih-bank-v3 .kartu-bank.segera.sorot-sebentar { box-shadow: 0 0 0 3px #F0B496; }

/* Info bawah */
.info-bank { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; }
.info-bank > div {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: 14px;
  background: var(--color-surface); border: 1px solid var(--color-border); font-size: 0.8125rem; color: var(--color-text-secondary);
}
.info-bank strong { display: block; color: var(--color-text); }
.ikon-info { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 0.75rem; }
.ikon-info .ikon { width: 16px; height: 16px; }
.ikon-info-pdf { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.ikon-info-cek { background: var(--color-success-soft); color: var(--color-success); }
.ikon-info-jam { background: #E6ECF2; color: #2E4A63; }

@media (max-width: 560px) {
  .hero-bank { padding: 1.25rem 1rem; border-radius: 18px; }
  .hero-bank h1 { font-size: 1.5rem; }
  .stat-bank { min-width: 0; flex: 1; }
  .pilih-bank-v3 .ringkas-bank { width: 100%; }
  .pilih-bank-v3 .bagian-bank-segera { padding: 1rem 0.75rem 0.75rem; }
  .pilih-bank-v3 .kartu-bank.segera .chip { display: none; }
}