@import url("/assets/fonts/fonts.css");

/* ==============================================================
   Bank WM — sistem visual
   PT Bank Perekonomian Rakyat Weleri Makmur

   Tiga warna diambil langsung dari berkas logo:
     indigo #3E4095 · merah #ED3237 · emas #D2AE6D

   Yang dipinjam dari logo bukan cuma warnanya, tapi cara logo
   membagi ketiganya:
     - Indigo mendominasi          -> tulang punggung: teks, kop, angka
     - Merah hanya struktural      -> bingkai + satu tindakan utama per layar
     - Emas terkurung di dalam     -> garis rambut & arsiran, tidak pernah jadi teks
   Emas di atas putih kontrasnya cuma 1,9:1, jadi memakainya
   sebagai teks memang mustahil dibaca — bukan sekadar selera.
   ============================================================== */

/* ---------- 1. Token ------------------------------------------ */
:root {
  /* merek — nilai mentah, jangan dipakai langsung untuk teks */
  --indigo: #3e4095;
  --merah: #ed3237;
  --emas: #d2ae6d;

  /* peran — inilah yang dipakai komponen */
  --tinta: #1a1b33;
  --tinta-2: #3a3c57;
  --redup: #5e6178;
  --samar: #8b8da3;

  --kertas: #ffffff;
  --kertas-2: #f6f6fa;
  --cekung: #edeef5;

  --garis: #e1e1ec;
  --garis-tegas: #c7c8dc;

  --aksen: #3e4095;          /* indigo — tautan, angka, penegas */
  --aksen-lembut: #eaeaf6;
  --aksen-kuat: #2e3078;

  --tindakan: #d81e24;       /* merah, digelapkan agar teks putih di atasnya aman */
  --tindakan-hover: #b8171d;
  --tindakan-lembut: #fdecec;

  --hias: #d2ae6d;           /* emas — garis & arsir saja */
  --hias-lembut: #f6eeda;

  --baik: #1f7a55;
  --baik-lembut: #e4f3ec;
  --awas: #9a6608;
  --awas-lembut: #fbf0da;

  /* bidang indigo — dipakai hero dan pita gelap */
  --bidang: #23255c;
  --bidang-teks: #f4f4fb;
  --bidang-redup: rgba(244, 244, 251, 0.72);
  --bidang-garis: rgba(210, 174, 109, 0.32);
  --hias-garis: rgba(210, 174, 109, 0.45);

  --bayang: 0 1px 2px rgba(26, 27, 51, 0.06), 0 4px 14px rgba(26, 27, 51, 0.05);
  --bayang-naik: 0 2px 6px rgba(26, 27, 51, 0.08), 0 12px 32px rgba(26, 27, 51, 0.09);

  /* tipografi */
  --f-judul: "Bricolage Grotesque", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --f-teks: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;

  --t-xs: 0.78rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.12rem, 1.6vw, 1.3rem);
  --t-xl: clamp(1.35rem, 3vw, 1.7rem);
  --t-2xl: clamp(1.7rem, 4.4vw, 2.35rem);
  --t-3xl: clamp(2rem, 6vw, 3.15rem);

  /* jarak */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  --lebar: 1160px;
  --lebar-baca: 68ch;
  --sudut: 12px;             /* lembut: sudut tajam membuat situs terasa kaku (22 Okt 2026) */
  --sudut-besar: 22px;
  --tepi: 1px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta: #e9e9f5;
    --tinta-2: #c3c5dc;
    --redup: #9a9cba;
    --samar: #6e7095;

    --kertas: #12132a;
    --kertas-2: #191a34;
    --cekung: #212244;

    --garis: #2b2c50;
    --garis-tegas: #3e4068;

    --aksen: #9294e8;
    --aksen-lembut: #21224a;
    --aksen-kuat: #b0b2f2;

    --tindakan: #ff5f63;
    --tindakan-hover: #ff8386;
    --tindakan-lembut: #3a1b1e;

    --hias: #d2ae6d;
    --hias-lembut: #33290f;

    --baik: #5fc79b;
    --baik-lembut: #16301f;
    --awas: #e0ae4c;
    --awas-lembut: #33280f;

    --bidang: #191b3f;
    --bidang-teks: #f0f0f9;
    --bidang-redup: rgba(240, 240, 249, 0.7);
    --bidang-garis: rgba(210, 174, 109, 0.3);
    --hias-garis: rgba(210, 174, 109, 0.4);
    --bidang: #191b3f;
  --bidang-teks: #f0f0f9;
  --bidang-redup: rgba(240, 240, 249, 0.7);
  --bidang-garis: rgba(210, 174, 109, 0.3);
  --hias-garis: rgba(210, 174, 109, 0.4);
  --bayang: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
    --bayang-naik: 0 2px 6px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --tinta: #e9e9f5;
  --tinta-2: #c3c5dc;
  --redup: #9a9cba;
  --samar: #6e7095;

  --kertas: #12132a;
  --kertas-2: #191a34;
  --cekung: #212244;

  --garis: #2b2c50;
  --garis-tegas: #3e4068;

  --aksen: #9294e8;
  --aksen-lembut: #21224a;
  --aksen-kuat: #b0b2f2;

  --tindakan: #ff5f63;
  --tindakan-hover: #ff8386;
  --tindakan-lembut: #3a1b1e;

  --hias: #d2ae6d;
  --hias-lembut: #33290f;

  --baik: #5fc79b;
  --baik-lembut: #16301f;
  --awas: #e0ae4c;
  --awas-lembut: #33280f;

  --bidang: #191b3f;
  --bidang-teks: #f0f0f9;
  --bidang-redup: rgba(240, 240, 249, 0.7);
  --bidang-garis: rgba(210, 174, 109, 0.3);
  --hias-garis: rgba(210, 174, 109, 0.4);
  --bayang: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  --bayang-naik: 0 2px 6px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* ---------- 2. Dasar ------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--kertas);
  color: var(--tinta);
  font-family: var(--f-teks);
  font-size: var(--t-base);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: var(--f-judul);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
  color: var(--tinta);
}

h1 { font-size: var(--t-3xl); letter-spacing: -0.028em; }
h2 { font-size: var(--t-2xl); letter-spacing: -0.022em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--aksen);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--aksen-kuat); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--aksen);
  outline-offset: 2px;
  border-radius: 2px;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

hr {
  border: 0;
  border-top: 1px solid var(--garis);
  margin: var(--s-6) 0;
}

strong, b { font-weight: 700; color: var(--tinta); }
small { font-size: var(--t-sm); }

::selection {
  background: var(--aksen);
  color: #fff;
}

/* Angka yang berderet harus lurus — ini situs bank. */
.angka,
table td,
table th,
.nominal {
  font-variant-numeric: tabular-nums;
}

/* ---------- 3. Kerangka --------------------------------------- */
.wadah {
  width: 100%;
  max-width: var(--lebar);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 768px) {
  .wadah { padding-inline: var(--s-5); }
}

.bagian { padding-block: var(--s-7); }
@media (min-width: 768px) {
  .bagian { padding-block: var(--s-8); }
}
.bagian--cekung { background: var(--kertas-2); }

.baca { max-width: var(--lebar-baca); }

.lompat-isi {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--aksen);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  z-index: 100;
}
.lompat-isi:focus {
  left: var(--s-4);
  top: var(--s-4);
}

/* ---------- 4. Dua motif dari logo ---------------------------- */

/* 4a. Bingkai merah — kotak yang mengurung mark di logo.
   Dipakai untuk mengurung pernyataan OJK/LPS dan angka penting. */
.bingkai {
  border: 1.5px solid var(--tindakan);
  border-radius: var(--sudut);
  padding: var(--s-4) var(--s-5);
  background: var(--kertas);
}
.bingkai--lembut {
  border-color: color-mix(in srgb, var(--tindakan) 38%, transparent);
  background: var(--tindakan-lembut);
}

/* 4b. Arsiran emas — garis-garis halus yang mengisi segitiga di
   logo, cara uang kertas dan sertifikat dicetak. Digambar CSS,
   tanpa berkas gambar. */
.arsir {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--hias) 0,
    var(--hias) 1px,
    transparent 1px,
    transparent 6px
  );
  opacity: 0.5;
}
.arsir-pita {
  height: 10px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--hias) 0,
    var(--hias) 1px,
    transparent 1px,
    transparent 6px
  );
  opacity: 0.45;
}

/* Garis rambut emas sebagai pembatas bagian. */
.garis-emas {
  height: 2px;
  background: var(--hias);
  border: 0;
  width: 44px;
  margin: 0 0 var(--s-4);
}

/* ---------- 5. Label & lencana -------------------------------- */
.mata {
  font-family: var(--f-judul);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--redup);
  display: block;
  margin-bottom: var(--s-2);
}

.lencana {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-judul);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 2px;
  background: var(--aksen-lembut);
  color: var(--aksen);
  white-space: nowrap;
}
.lencana--emas { background: var(--hias-lembut); color: var(--awas); }
.lencana--baik { background: var(--baik-lembut); color: var(--baik); }
.lencana--merah { background: var(--tindakan-lembut); color: var(--tindakan); }

/* ---------- 6. Tombol ----------------------------------------- */
.tbl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--f-judul);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 0.82rem 1.35rem;
  min-height: 46px;               /* sasaran sentuh nyaman di HP */
  border: 1.5px solid transparent;
  border-radius: var(--sudut);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Merah dipakai sekali per layar. Kalau ada dua tombol merah di
   satu halaman, salah satunya salah. */
.tbl--utama {
  background: var(--tindakan);
  border-color: var(--tindakan);
  color: #fff;
}
.tbl--utama:hover {
  background: var(--tindakan-hover);
  border-color: var(--tindakan-hover);
  color: #fff;
}

.tbl--kedua {
  background: transparent;
  border-color: var(--garis-tegas);
  color: var(--tinta);
}
.tbl--kedua:hover {
  border-color: var(--aksen);
  color: var(--aksen);
}

.tbl--isi {
  background: var(--aksen);
  border-color: var(--aksen);
  color: #fff;
}
.tbl--isi:hover { background: var(--aksen-kuat); border-color: var(--aksen-kuat); color: #fff; }

.tbl--kecil { padding: 0.5rem 0.85rem; min-height: 38px; font-size: var(--t-xs); }
.tbl--penuh { width: 100%; }

/* Tautan yang membuka sistem lain diberi tanda, supaya jelas
   pengunjung akan meninggalkan situs bank. */
.tbl[data-luar]::after,
a[data-luar]::after {
  content: "↗";
  font-size: 0.85em;
  opacity: 0.75;
}

/* ---------- 7. Kartu ------------------------------------------ */
/* Tidak semua hal perlu jadi kartu. Kartu dipakai hanya untuk
   hal yang benar-benar berdiri sendiri dan bisa diklik. */
.kartu {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.kartu:hover {
  border-color: var(--aksen);
  box-shadow: var(--bayang);
}
.kartu h3 { font-size: var(--t-lg); }
.kartu p { color: var(--redup); font-size: var(--t-sm); margin: 0; }

.kisi {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.kisi--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.kisi--rapat { gap: var(--s-3); }

/* Daftar yang berbagi tepi: satu objek, bukan kartu berserakan. */
.papan {
  display: grid;
  gap: 1px;
  background: var(--garis);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  overflow: hidden;
}
.papan > * {
  background: var(--kertas);
  padding: var(--s-4) var(--s-5);
}

/* ---------- 8. Tabel ------------------------------------------ */
.tabel-gulir {
  overflow-x: auto;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  -webkit-overflow-scrolling: touch;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--t-sm);
}
thead th {
  background: var(--cekung);
  text-align: left;
  font-family: var(--f-judul);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--redup);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--garis-tegas);
  white-space: nowrap;
}
tbody td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--garis);
  vertical-align: top;
  color: var(--tinta-2);
}
tbody tr:last-child td { border-bottom: 0; }
tbody td:first-child { color: var(--tinta); font-weight: 600; }
td.kanan, th.kanan { text-align: right; }

/* Tabel suku bunga — angkanya yang jadi bintang, jadi diberi
   ukuran dan warna indigo penuh. */
.tabel-bunga td.nominal {
  font-family: var(--f-judul);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--aksen);
  text-align: right;
  white-space: nowrap;
}

/* ---------- 9. Daftar bercentang ------------------------------ */
.daftar-centang {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-3);
}
.daftar-centang li {
  display: grid;
  grid-template-columns: 1.4em 1fr;
  gap: var(--s-2);
  color: var(--tinta-2);
}
.daftar-centang li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 0.55em;
  background: var(--hias);
  transform: rotate(45deg);
  flex: none;
}

.daftar-titik {
  margin: 0 0 var(--s-4);
  padding-left: 1.15em;
  color: var(--tinta-2);
}
.daftar-titik li { margin-bottom: var(--s-2); }
.daftar-titik li::marker { color: var(--hias); }

/* ---------- 10. Angka sorot ----------------------------------- */
.sorot {
  display: grid;
  gap: 1px;
  background: var(--garis);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  overflow: hidden;
}
.sorot > div {
  background: var(--kertas);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sorot .nilai {
  font-family: var(--f-judul);
  font-size: clamp(1.5rem, 4vw, 1.95rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--aksen);
}
.sorot .satuan {
  font-size: var(--t-xs);
  color: var(--samar);
}
.sorot .label {
  font-size: var(--t-sm);
  color: var(--redup);
  line-height: 1.35;
}

/* ---------- 11. Formulir -------------------------------------- */
.medan {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.medan > label {
  font-family: var(--f-judul);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--tinta);
}
.medan .bantuan {
  font-size: var(--t-xs);
  color: var(--redup);
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="password"],
input[type="file"],
select,
textarea {
  width: 100%;
  font-family: var(--f-teks);
  font-size: var(--t-base);   /* 16px — di bawah itu iOS memperbesar sendiri */
  line-height: 1.5;
  color: var(--tinta);
  background: var(--kertas);
  border: 1px solid var(--garis-tegas);
  border-radius: var(--sudut);
  padding: 0.7rem 0.85rem;
  min-height: 46px;
}
textarea { min-height: 130px; resize: vertical; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--redup) 50%),
    linear-gradient(135deg, var(--redup) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--aksen);
  outline: 2px solid var(--aksen-lembut);
  outline-offset: 0;
}
.medan--galat input,
.medan--galat textarea,
.medan--galat select { border-color: var(--tindakan); }
.galat {
  font-size: var(--t-sm);
  color: var(--tindakan);
  font-weight: 600;
}
.wajib { color: var(--tindakan); }

/* ---------- 12. Catatan & peringatan -------------------------- */
.catatan {
  padding: var(--s-4) var(--s-5);
  background: var(--kertas-2);
  border-left: 3px solid var(--garis-tegas);
  border-radius: 0 var(--sudut) var(--sudut) 0;
  color: var(--tinta-2);
  font-size: var(--t-sm);
}
.catatan--awas { background: var(--awas-lembut); border-left-color: var(--awas); }
.catatan--emas { background: var(--hias-lembut); border-left-color: var(--hias); }

/* ---------- 13. Isi naskah ------------------------------------ */
.naskah { max-width: var(--lebar-baca); color: var(--tinta-2); }
.naskah > * + * { margin-top: var(--s-4); }
.naskah h2 { font-size: var(--t-xl); margin-top: var(--s-6); }
.naskah h3 { font-size: var(--t-lg); margin-top: var(--s-5); }
.naskah ul,
.naskah ol { padding-left: 1.2em; }
.naskah li { margin-bottom: var(--s-2); }
.naskah li::marker { color: var(--hias); }
.naskah img { border-radius: var(--sudut); margin-block: var(--s-5); }
.naskah blockquote {
  margin: var(--s-5) 0;
  padding-left: var(--s-4);
  border-left: 3px solid var(--hias);
  color: var(--tinta);
  font-size: var(--t-lg);
}
.naskah table { margin-block: var(--s-4); }

/* Tabel naskah yang selnya berlabel (td data-label) ditumpuk jadi
   kartu di HP: tabel tiga kolom berisi kalimat panjang, seperti di
   Pemberitahuan Privasi, tidak muat selebar 390px. Sel pertama jadi
   judul kartu, sel lain diberi nama kolomnya di atas isinya. */
@media (max-width: 640px) {
  .naskah table:has(td[data-label]),
  .naskah table:has(td[data-label]) :is(tbody, tr, td) { display: block; width: 100%; }
  .naskah table:has(td[data-label]) thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  }
  .naskah table:has(td[data-label]) tr {
    margin-bottom: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--garis);
    border-radius: var(--sudut);
  }
  .naskah table:has(td[data-label]) td { padding: var(--s-1) 0; border: 0; }
  .naskah table:has(td[data-label]) td:first-child { font-weight: 700; color: var(--tinta); }
  .naskah table:has(td[data-label]) td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin-top: var(--s-2);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--redup);
  }
}

/* ---------- 14. Aksesibilitas & gerak ------------------------- */
.hanya-pembaca-layar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .tanpa-cetak { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==============================================================
   15. Kop halaman & menu

   Tanpa JavaScript sama sekali. Di ponsel sebuah kotak centang
   tersembunyi membuka panel menu; di layar lebar panel itu selalu
   tampil mendatar, dengan submenu muncul saat disorot atau saat
   mendapat fokus papan ketik.

   Kotak centang dipakai, bukan <details>, karena Chromium baru
   menyembunyikan isi <details> lewat content-visibility pada
   ::details-content — dan itu tidak bisa dibatalkan dari CSS.
   ============================================================== */
.kop {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--kertas);
  border-bottom: 1px solid var(--garis);
}
.kop-baris {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 62px;
  flex-wrap: wrap;
}
.kop-logo { display: flex; align-items: center; flex: none; }
.kop-logo img { height: 34px; width: auto; }

.kop-telepon {
  display: none;
  flex-direction: column;
  line-height: 1.15;
  text-decoration: none;
  text-align: right;
  flex: none;
}
.kop-telepon-label {
  font-size: var(--t-xs);
  color: var(--redup);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kop-telepon-nomor {
  font-family: var(--f-judul);
  font-weight: 800;
  font-size: var(--t-lg);
  color: var(--tindakan);
  letter-spacing: -0.01em;
}

/* -- tombol menu di ponsel -- */
/* Kotak centangnya tetap bisa difokus papan ketik, hanya tidak
   terlihat; label di sebelahnya yang menjadi tombolnya. */
.kop-suis {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.kop-tombol {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--garis-tegas);
  border-radius: var(--sudut);
  font-family: var(--f-judul);
  font-size: var(--t-sm);
  font-weight: 700;
  min-height: 42px;
  user-select: none;
  flex: none;
}
.kop-suis:focus-visible + .kop-tombol {
  outline: 2px solid var(--aksen);
  outline-offset: 2px;
}
.kop-menu-garis,
.kop-menu-garis::before,
.kop-menu-garis::after {
  display: block;
  width: 17px;
  height: 2px;
  background: var(--tinta);
  content: "";
}
.kop-menu-garis { position: relative; }
.kop-menu-garis::before { position: absolute; top: -5px; }
.kop-menu-garis::after { position: absolute; top: 5px; }
.kop-suis:checked + .kop-tombol { border-color: var(--aksen); color: var(--aksen); }
.kop-suis:checked + .kop-tombol .kop-menu-garis { background: transparent; }
.kop-suis:checked + .kop-tombol .kop-menu-garis::before { top: 0; transform: rotate(45deg); }
.kop-suis:checked + .kop-tombol .kop-menu-garis::after { top: 0; transform: rotate(-45deg); }

.nav {
  display: none;
  order: 3;
  width: 100%;
  border-top: 1px solid var(--garis);
  padding: var(--s-2) 0 var(--s-4);
  max-height: calc(100vh - 62px);
  overflow-y: auto;
}
.kop-suis:checked ~ .nav { display: block; }

.nav-daftar { list-style: none; margin: 0; padding: 0; }
.menu-butir { border-bottom: 1px solid var(--garis); }
.menu-butir:last-child { border-bottom: 0; }
.menu-atas,
.menu-butir > a {
  display: block;
  padding: var(--s-3) 0;
  font-family: var(--f-judul);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--tinta);
  text-decoration: none;
}
.menu-atas[aria-current], .menu-butir > a[aria-current] { color: var(--aksen); }

.menu-panel { padding: 0 0 var(--s-3); }
.menu-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.menu-panel li a {
  display: block;
  padding: 0.44rem 0 0.44rem var(--s-4);
  font-size: var(--t-sm);
  color: var(--tinta-2);
  text-decoration: none;
}
.menu-panel li a:hover,
.menu-panel li a[aria-current="page"] { color: var(--aksen); }
.menu-judul {
  display: block;
  font-family: var(--f-judul);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--redup);
  text-decoration: none;
  margin: var(--s-3) 0 var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--hias);
}
.menu-kolom { display: grid; gap: var(--s-2); }
.nav-kontak { margin-top: var(--s-4); }

@media (min-width: 1060px) {
  .kop-baris { min-height: 74px; flex-wrap: nowrap; }
  .kop-logo img { height: 40px; }
  .kop-telepon { display: flex; }
  .kop-tombol { display: none; }

  .nav {
    display: block;
    order: 0;
    width: auto;
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    max-height: none;
    overflow: visible;
  }
  .nav-daftar { display: flex; justify-content: center; gap: 2px; }
  .menu-butir { border: 0; position: relative; }
  .menu-atas,
  .menu-butir > a {
    padding: var(--s-2) 0.6rem;
    font-size: var(--t-sm);
    white-space: nowrap;
    border-radius: var(--sudut);
  }
  .menu-butir--aktif > .menu-atas { color: var(--aksen); box-shadow: inset 0 -2px 0 var(--hias); }

  .menu-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 258px;
    padding: var(--s-4);
    background: var(--kertas);
    border: 1px solid var(--garis);
    border-top: 2px solid var(--tindakan);
    border-radius: 0 0 var(--sudut) var(--sudut);
    box-shadow: var(--bayang-naik);
    z-index: 60;
  }
  .menu-butir:hover > .menu-panel,
  .menu-butir:focus-within > .menu-panel { display: block; }
  .menu-panel li a { padding-left: 0; }

  /* Panel produk berisi tiga kolom, jadi diletakkan rata tengah
     agar tidak menjorok keluar layar. */
  .menu-panel:has(.menu-kolom) {
    left: 50%;
    transform: translateX(-50%);
    min-width: min(690px, 90vw);
  }
  .menu-kolom { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  .menu-judul { margin-top: 0; }
  .nav-kontak { display: none; }
}

/* ---------- 16. Remah roti ------------------------------------ */
.remah {
  border-bottom: 1px solid var(--garis);
  background: var(--kertas-2);
  font-size: var(--t-xs);
}
.remah ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-3) 0;
  color: var(--redup);
}
.remah li + li::before { content: "/"; margin-right: var(--s-2); color: var(--samar); }
.remah a { color: var(--redup); text-decoration: none; }
.remah a:hover { color: var(--aksen); text-decoration: underline; }
.remah [aria-current="page"] { color: var(--tinta); font-weight: 600; }

/* ---------- 17. Kepala halaman -------------------------------- */
.judul-halaman { padding-block: var(--s-6) var(--s-5); }
.judul-halaman h1 { margin-bottom: var(--s-3); }
.judul-halaman .ringkasan {
  font-size: var(--t-lg);
  color: var(--redup);
  max-width: 60ch;
  line-height: 1.5;
}

/* ---------- 18. Kaki halaman ---------------------------------- */
.kaki {
  margin-top: var(--s-8);
  border-top: 2px solid var(--tinta);
  background: var(--kertas-2);
  padding-block: var(--s-7) var(--s-5);
  font-size: var(--t-sm);
}
.kaki-atas {
  display: grid;
  gap: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--garis);
}
.kaki-logo { height: 34px; width: auto; margin-bottom: var(--s-3); }
.kaki-profil { color: var(--redup); max-width: 46ch; }
.kaki-regulator { margin-top: var(--s-4); max-width: 46ch; }
.kaki-regulator p { font-size: var(--t-sm); font-weight: 600; color: var(--tinta); }

.kaki-menu {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.kaki-judul {
  display: block;
  font-family: var(--f-judul);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
  margin-bottom: var(--s-3);
}
.kaki-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.kaki-menu a { color: var(--redup); text-decoration: none; }
.kaki-menu a:hover { color: var(--aksen); text-decoration: underline; }

.kaki-kontak {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--garis);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.kaki-kontak p { color: var(--redup); margin: 0; }
.kaki-kontak a { color: var(--tinta-2); text-decoration: none; }
.kaki-kontak a:hover { color: var(--aksen); text-decoration: underline; }
.kaki-sosial { display: flex; gap: var(--s-4); flex-wrap: wrap; }

.kaki-bawah {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-4);
  color: var(--samar);
  font-size: var(--t-xs);
}
.kaki-bawah p { margin: 0; }

@media (min-width: 900px) {
  .kaki-atas { grid-template-columns: minmax(280px, 1fr) 2fr; gap: var(--s-8); }
}

/* ==============================================================
   19. Beranda

   Yang dipinjam dari logo bukan cuma warnanya. Segitiga di dalam
   bingkai merah itu diarsir garis halus — cara uang kertas dan
   sertifikat dicetak. Di sini arsiran itu dipakai sebagai BIDANG
   berskala besar di balik hero, bukan pita tipis penghias.

   Iramanya sengaja tidak seragam: bidang indigo penuh, lalu kolom
   baca yang sempit, lalu pita pucat selebar layar. Halaman yang
   tiap bagiannya berjarak sama akan terbaca seperti templat.
   ============================================================== */

/* ---------- Bidang indigo: hero ---------- */
.bidang {
  position: relative;
  overflow: hidden;
  background: var(--bidang);
  color: var(--bidang-teks);
  isolation: isolate;
}
/* Arsiran intaglio. Dua lapis dengan sudut dan langkah berbeda
   supaya tidak terbaca sebagai garis-garis rapi buatan mesin. */
.bidang::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background-image:
    repeating-linear-gradient(-45deg, var(--emas) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, var(--emas) 0 1.5px, transparent 1.5px 52px),
    repeating-linear-gradient(45deg, var(--emas) 0 1px, transparent 1px 96px);
  opacity: 0.22;
  pointer-events: none;
}
.hero-atas {
  font-family: var(--f-judul);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emas);
  display: block;
  margin-bottom: var(--s-4);
}
.hero-tombol { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.bidang .tbl--kedua {
  border-color: var(--bidang-garis);
  color: var(--bidang-teks);
}
.bidang .tbl--kedua:hover { border-color: var(--emas); color: var(--emas); }

/* ---------- Pita suku bunga: pusat halaman ---------- */
.pita-bunga {
  background: var(--kertas-2);
  border-block: 1px solid var(--garis);
  padding-block: clamp(2.4rem, 5vw, 4rem);
}
.bunga-baris { display: grid; gap: var(--s-6); }
.bunga-teks h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  letter-spacing: -0.028em;
  margin-bottom: var(--s-3);
}
.bunga-teks p { color: var(--redup); max-width: 42ch; }

/* Disusun seperti daftar harga, bukan tabel data: label kecil di
   kiri, angka besar di kanan, garis emas tipis antar baris.
   Angka 60 bulan jadi angka terbesar di halaman — memang itu yang
   paling dicari orang. */
.daftar-bunga { display: grid; gap: 0; margin: 0; }
.daftar-bunga > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--hias-garis);
}
.daftar-bunga > div:first-child { border-top: 2px solid var(--tinta); }
.daftar-bunga > div:last-child { border-bottom: 2px solid var(--tinta); }
.daftar-bunga dt {
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  color: var(--redup);
  white-space: nowrap;
}
.daftar-bunga dd {
  margin: 0;
  font-family: var(--f-judul);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--aksen);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  /* Tenor yang lebih panjang ditulis lebih besar — urutan angkanya
     jadi terbaca sebagai bentuk, bukan cuma daftar. */
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
}
.daftar-bunga > div:nth-child(5) dd { font-size: clamp(1.5rem, 3vw, 2rem); }
.daftar-bunga > div:nth-child(6) dd { font-size: clamp(1.65rem, 3.4vw, 2.3rem); }
.daftar-bunga > div:nth-child(7) dd { font-size: clamp(1.85rem, 4vw, 2.7rem); }

.bunga-catatan {
  font-size: var(--t-xs);
  color: var(--redup);
  margin-top: var(--s-4);
  max-width: 54ch;
  line-height: 1.55;
}

@media (min-width: 900px) {
  .bunga-baris { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
}

/* ---------- Produk sebagai daftar redaksional ---------- */
.bagian-produk { padding-block: clamp(2.6rem, 6vw, 4.6rem); }
.kepala-lebar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 2px solid var(--tinta);
}
.kepala-lebar h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  letter-spacing: -0.028em;
}
.kepala-lebar p { margin: 0; color: var(--redup); font-size: var(--t-sm); max-width: 48ch; }

.deret { display: grid; gap: 0; }
.baris-produk {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--s-4);
  padding: 1.05rem 0;
  border-top: 1px solid var(--garis);
  text-decoration: none;
  color: inherit;
  position: relative;
}
.baris-produk:last-child { border-bottom: 1px solid var(--garis); }
/* Garis emas menyapu masuk saat disorot — satu isyarat, bukan
   kotak yang ikut bergeser. */
.baris-produk::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--hias);
  transition: width 0.28s cubic-bezier(0.16, 0.72, 0.24, 1);
}
.baris-produk:hover::after,
.baris-produk:focus-visible::after { width: 100%; }
.baris-produk .no {
  font-family: var(--f-judul);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--samar);
  font-variant-numeric: tabular-nums;
}
.baris-produk .nm {
  font-family: var(--f-judul);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--tinta);
  line-height: 1.2;
}
.baris-produk .tg {
  display: block;
  font-family: var(--f-teks);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--redup);
  margin-top: 2px;
  max-width: 54ch;
}
.baris-produk .ag {
  text-align: right;
  font-family: var(--f-judul);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  letter-spacing: -0.03em;
  color: var(--aksen);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.1;
}
.baris-produk .ag small {
  display: block;
  font-family: var(--f-teks);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--samar);
  margin-top: 1px;
}
.baris-produk:hover .nm { color: var(--aksen); }
@media (max-width: 620px) {
  .baris-produk { grid-template-columns: 1.9rem minmax(0, 1fr); }
  .baris-produk .ag { grid-column: 2; text-align: left; margin-top: var(--s-2); }
  .baris-produk .ag small { display: inline; margin-left: 6px; }
}

/* ---------- Kabar & laporan ---------- */
.bagian-kabar { padding-block: clamp(2.6rem, 6vw, 4.6rem); }
.kisi-kabar {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
}
/* Kartu pertama dibuat lebih besar — hierarki, bukan empat kotak
   yang sama persis. */
@media (min-width: 900px) {
  .kisi-kabar { grid-template-columns: repeat(3, 1fr); }
  .kisi-kabar > :first-child { grid-column: span 2; grid-row: span 2; }
  .kisi-kabar > :first-child .kartu-gambar { aspect-ratio: 16 / 9; }
  .kisi-kabar > :first-child h3 { font-size: var(--t-xl); }
}

.beranda-bawah { display: grid; gap: clamp(2.2rem, 5vw, 4rem); }
.beranda-bawah h2 { font-size: clamp(1.3rem, 2.8vw, 1.75rem); letter-spacing: -0.024em; margin-bottom: var(--s-3); }
.beranda-bawah p { color: var(--redup); max-width: 44ch; }
@media (min-width: 900px) {
  .beranda-bawah { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Baris kontak: garis, bukan kotak. */
.deret-kontak { display: grid; gap: 0; margin-top: var(--s-4); }
.deret-kontak > * {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0.78rem 0;
  border-top: 1px solid var(--garis);
  text-decoration: none;
  color: inherit;
}
.deret-kontak > *:last-child { border-bottom: 1px solid var(--garis); }
.deret-kontak .kc {
  font-family: var(--f-judul);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--samar);
  flex: none;
}
.deret-kontak strong { font-family: var(--f-judul); font-weight: 700; color: var(--tinta); text-align: right; }
.deret-kontak a:hover strong { color: var(--aksen); }

/* ==============================================================
   20. Kartu
   ============================================================== */
.kartu-tulisan { padding: 0; overflow: hidden; }
.kartu-gambar {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--cekung);
  overflow: hidden;
}
.kartu-gambar img { width: 100%; height: 100%; object-fit: cover; }
.kartu-tulisan .kartu-meta,
.kartu-tulisan h3,
.kartu-tulisan p { padding-inline: var(--s-5); }
.kartu-tulisan .kartu-meta { padding-top: var(--s-4); }
.kartu-tulisan p { padding-bottom: var(--s-5); }
.kartu-tulisan h3 { font-size: var(--t-md); margin-block: var(--s-2); }

.kartu-meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
  color: var(--samar);
}

.kartu-produk { position: relative; }
.kartu-produk h3 { font-size: var(--t-lg); }
.kartu-angka {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hias);
}
.kartu-angka .nilai {
  font-family: var(--f-judul);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--aksen);
}
.kartu-angka .label { font-size: var(--t-xs); color: var(--redup); }
.kartu-lanjut {
  margin-top: auto;
  padding-top: var(--s-3);
  font-family: var(--f-judul);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--aksen);
}
.kartu-lanjut::after { content: " \2192"; }

/* ==============================================================
   21. Dokumen
   ============================================================== */
.dok {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  text-decoration: none;
  color: inherit;
}
.dok:hover { background: var(--aksen-lembut); }
.dok-ikon {
  flex: none;
  width: 40px;
  height: 46px;
  display: grid;
  place-items: center;
  font-family: var(--f-judul);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--tindakan);
  border: 1.5px solid var(--tindakan);
  border-radius: 2px;
}
.dok-isi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dok-judul { font-weight: 600; color: var(--tinta); }
.dok:hover .dok-judul { color: var(--aksen); }
.dok-catatan { font-size: var(--t-xs); color: var(--awas); }
.dok-ukuran {
  margin-left: auto;
  font-size: var(--t-xs);
  color: var(--samar);
  white-space: nowrap;
}

.tahun-daftar { display: grid; gap: var(--s-6); }
.tahun-judul {
  font-family: var(--f-judul);
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--hias);
}

/* ==============================================================
   22. Halaman produk
   ============================================================== */
.produk-baris { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-bottom: var(--s-7); }
.produk-utama > * + * { margin-top: var(--s-6); }
.blok > h2 {
  font-size: var(--t-xl);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--garis);
}
.syarat-blok + .syarat-blok { margin-top: var(--s-5); }
.syarat-blok h3 {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--redup);
  margin-bottom: var(--s-3);
}
.tabel-blok + .tabel-blok { margin-top: var(--s-5); }
.tabel-blok h3 { font-size: var(--t-md); margin-bottom: var(--s-3); }

.produk-samping { display: grid; gap: var(--s-4); align-content: start; }
.kotak-aksi {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--kertas-2);
  border: 1px solid var(--garis);
  border-top: 3px solid var(--tindakan);
  border-radius: var(--sudut);
}
.kotak-aksi p { font-size: var(--t-sm); color: var(--redup); margin: 0; }
.kotak-aksi .tbl { width: 100%; }
.kotak-dokumen {
  padding: var(--s-5);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
}
.kotak-dokumen .dok { margin-top: var(--s-3); }

@media (min-width: 950px) {
  .produk-baris { grid-template-columns: minmax(0, 1fr) 330px; gap: var(--s-8); }
  .produk-samping { position: sticky; top: 94px; }
}

/* ==============================================================
   23. Tulisan
   ============================================================== */
.tulisan { max-width: 760px; padding-bottom: var(--s-7); }
.tulisan-kepala { padding-block: var(--s-6) var(--s-5); }
.tulisan-kepala h1 { margin-block: var(--s-3) var(--s-2); font-size: var(--t-2xl); }
.tulisan-tanggal { color: var(--samar); font-size: var(--t-sm); margin: 0; }
.tulisan-isi { max-width: none; }
.tulisan-isi figure { margin: var(--s-5) 0; }
.tulisan-isi figcaption {
  font-size: var(--t-sm);
  color: var(--redup);
  margin-top: var(--s-2);
  text-align: center;
}
.tulisan-kaki { margin-top: var(--s-7); }

.paginasi {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block: var(--s-7);
}
.paginasi-nomor { display: flex; align-items: center; gap: var(--s-1); }
.paginasi-nomor a,
.paginasi-kini,
.paginasi-jeda {
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-family: var(--f-judul);
  font-size: var(--t-sm);
  font-weight: 700;
  border-radius: var(--sudut);
  text-decoration: none;
}
.paginasi-nomor a { color: var(--tinta-2); border: 1px solid var(--garis); }
.paginasi-nomor a:hover { border-color: var(--aksen); color: var(--aksen); }
.paginasi-kini { background: var(--aksen); color: #fff; }
.paginasi-jeda { color: var(--samar); }

/* ==============================================================
   24. WMAGZ
   ============================================================== */
.kisi-majalah {
  display: grid;
  gap: 1px;
  background: var(--garis);
  border: 1px solid var(--garis);
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  margin-bottom: var(--s-7);
}
.majalah {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--kertas);
  padding: var(--s-4) var(--s-5);
  text-decoration: none;
  color: inherit;
}
.majalah:hover { background: var(--aksen-lembut); }
.majalah-nomor {
  font-family: var(--f-judul);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--hias);
  font-variant-numeric: tabular-nums;
}
.majalah-isi { display: flex; flex-direction: column; }
.majalah-isi strong { font-family: var(--f-judul); color: var(--tinta); }
.majalah-isi span { font-size: var(--t-xs); color: var(--samar); }
.majalah:hover .majalah-isi strong { color: var(--aksen); }

/* ==============================================================
   25. Kantor layanan
   ============================================================== */
/* Direktori kantor: buku alamat, bukan kisi kartu.
   Wilayah di kolom kiri menempel saat digulir, kantornya berderet
   di kanan dengan kolom tetap — nama, alamat, telepon, peta. */
.buku-kantor { border-top: 1px solid var(--tinta); }
.direktori-wilayah {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2) var(--s-6);
  padding: var(--s-5) 0 var(--s-2);
  border-bottom: 1px solid var(--garis);
}
.direktori-nama {
  font-family: var(--f-judul);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--tinta);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-3);
}
.direktori-no {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--hias);
  font-variant-numeric: tabular-nums;
  flex-basis: 100%;
  margin-bottom: var(--s-2);
}
.direktori-nama small {
  font-family: var(--f-teks);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--samar);
}
.direktori-daftar { list-style: none; margin: 0; padding: 0; }
.direktori-baris {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1) var(--s-5);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--garis);
  position: relative;
}
.direktori-baris:first-child { border-top: 0; }
.direktori-kantor h3 {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}
.direktori-jenis {
  display: block;
  font-family: var(--f-judul);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--samar);
  margin-top: 4px;
}
.direktori-baris--pusat .direktori-jenis { color: var(--hias); }
.direktori-baris--pusat .direktori-kantor h3 { color: var(--aksen); }
.direktori-alamat { color: var(--redup); font-size: var(--t-sm); margin: 0; max-width: 40ch; }
.direktori-telepon { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: var(--t-sm); }
.direktori-telepon a {
  color: var(--tinta-2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.direktori-telepon a:hover { color: var(--aksen); text-decoration: underline; }
.direktori-peta {
  font-family: var(--f-judul);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--aksen);
  text-decoration: none;
  align-self: start;
  justify-self: start;
}
.direktori-peta::after { content: " \2197"; }
.direktori-peta:hover { text-decoration: underline; }
@media (min-width: 720px) {
  .direktori-baris {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto auto;
    align-items: start;
  }
  .direktori-telepon { min-width: 9.5rem; }
  .direktori-peta { justify-self: end; }
}
@media (min-width: 980px) {
  .direktori-wilayah {
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 2.2fr);
    padding: var(--s-6) 0 var(--s-3);
  }
  .direktori-nama { position: sticky; top: 7rem; align-self: start; }
  .direktori-daftar { margin-top: -0.3rem; }
  .direktori-baris:first-child { padding-top: 0; }
}

/* ==============================================================
   26. Formulir
   ============================================================== */
.formulir-baris { display: grid; gap: var(--s-6); padding-bottom: var(--s-7); }
.formulir { max-width: 620px; }
.formulir .bantuan { margin-block: var(--s-4); }
.formulir-samping { display: grid; gap: var(--s-4); align-content: start; }
.kotak-sukses { max-width: 620px; margin-bottom: var(--s-7); }
.kotak-sukses h2 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.kotak-sukses .tbl { margin-top: var(--s-4); }
.tiket {
  font-family: var(--f-judul);
  font-size: var(--t-lg);
  letter-spacing: 0.02em;
  color: var(--aksen);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 950px) {
  .formulir-baris { grid-template-columns: minmax(0, 1fr) 330px; gap: var(--s-8); }
}

/* ==============================================================
   27. Banner kampanye

   Ditumpuk ke bawah, bukan carousel. Semua banner terbaca
   sekaligus, tanpa JavaScript, dan tanpa menunda apa pun.
   ============================================================== */
.banner-daftar { padding-top: var(--s-5); }
.banner-daftar .wadah { display: grid; gap: var(--s-4); }

.banner {
  display: grid;
  gap: var(--s-4);
  border: 1px solid var(--garis);
  border-left: 3px solid var(--tindakan);
  border-radius: var(--sudut);
  overflow: hidden;
  background: var(--kertas);
}
.banner-gambar {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 7;
  background: var(--cekung);
}
.banner-teks {
  padding: var(--s-4) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.banner-teks h2 { font-size: var(--t-lg); }
.banner-teks p { color: var(--redup); font-size: var(--t-sm); margin: 0; max-width: 60ch; }

@media (min-width: 800px) {
  .banner:has(.banner-gambar) { grid-template-columns: 320px minmax(0, 1fr); align-items: center; }
  .banner-gambar { height: 100%; aspect-ratio: auto; min-height: 150px; }
  .banner-teks { padding: var(--s-5); }
}

/* ==============================================================
   28. Simulasi angsuran kredit
   ============================================================== */
.simulasi-baris { display: grid; gap: var(--s-5); padding-bottom: var(--s-7); }
.simulasi-form .medan:last-of-type { margin-bottom: var(--s-4); }
.simulasi-form .tbl { width: 100%; }

.simulasi-hasil {
  border-top: 3px solid var(--hias);
}
.simulasi-angka {
  font-family: var(--f-judul);
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--aksen);
  font-variant-numeric: tabular-nums;
  margin: var(--s-1) 0 var(--s-4);
}
.simulasi-rinci {
  display: grid;
  gap: 1px;
  background: var(--garis);
  border: 1px solid var(--garis);
  margin: 0 0 var(--s-4);
}
.simulasi-rinci > div {
  background: var(--kertas);
  padding: var(--s-3) var(--s-4);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  align-items: baseline;
}
.simulasi-rinci dt { color: var(--redup); font-size: var(--t-sm); }
.simulasi-rinci dd {
  margin: 0;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.simulasi-samping { display: grid; gap: var(--s-4); align-content: start; }
.rumus {
  font-family: var(--f-judul);
  font-size: var(--t-sm);
  font-weight: 600;
  background: var(--cekung);
  border-left: 3px solid var(--hias);
  padding: var(--s-3) var(--s-4);
  color: var(--tinta);
}

@media (min-width: 950px) {
  .simulasi-baris { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-6); }
}

/* Tautan simulasi di halaman produk kredit. */
.simulasi-tautan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--garis);
  border-left: 3px solid var(--hias);
  border-radius: var(--sudut);
  text-decoration: none;
  color: inherit;
  margin-top: var(--s-5);
}
.simulasi-tautan:hover { border-color: var(--aksen); border-left-color: var(--hias); }
.simulasi-tautan strong { display: block; font-family: var(--f-judul); color: var(--tinta); }
.simulasi-tautan span { font-size: var(--t-sm); color: var(--redup); }
.simulasi-tautan .tbl { flex: none; }

/* Panel: kotak isi bergaris untuk halaman alat seperti simulasi. */
.panel {
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}
.panel > h2 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.baris-2 { display: grid; gap: var(--s-4); }
@media (min-width: 620px) {
  .baris-2 { grid-template-columns: 1fr 1fr; }
}

/* Jarak untuk tautan lanjut di bawah daftar dokumen beranda. */
.lanjut-bawah { margin-top: var(--s-4); }

/* ==============================================================
   29. Kepala halaman dalam

   Dua wujud, supaya situs punya hierarki: bidang indigo untuk
   halaman induk, pita pucat untuk halaman ujung. Kepala yang
   seragam di semua halaman adalah salah satu sebab situs terasa
   seperti templat.
   ============================================================== */
.kepala-bidang { padding-block: clamp(2rem, 4.5vw, 3.4rem) clamp(1.7rem, 3.5vw, 2.6rem); }
.kepala-bidang h1 {
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: var(--bidang-teks);
  max-width: 26ch;
}
.kepala-bidang .kepala-ringkasan {
  color: var(--bidang-redup);
  max-width: 58ch;
  margin: var(--s-4) 0 0;
  font-size: clamp(0.97rem, 1.5vw, 1.1rem);
  line-height: 1.6;
}

.kepala-pucat {
  background: var(--kertas-2);
  border-bottom: 1px solid var(--garis);
  padding-block: clamp(1.7rem, 4vw, 2.8rem) clamp(1.5rem, 3vw, 2.2rem);
}
.kepala-pucat h1 {
  font-size: clamp(1.75rem, 4.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.032em;
  max-width: 28ch;
}
.kepala-pucat .kepala-ringkasan {
  color: var(--redup);
  max-width: 58ch;
  margin: var(--s-3) 0 0;
  font-size: clamp(0.97rem, 1.5vw, 1.08rem);
  line-height: 1.6;
}
.kepala-mata {
  font-family: var(--f-judul);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--awas);
  display: block;
  margin-bottom: var(--s-3);
}

/* Bagian isi tidak lagi butuh jarak atas besar, karena kepalanya
   sudah punya bidangnya sendiri. */
.kepala-bidang + .wadah,
.kepala-pucat + .wadah { padding-top: clamp(1.8rem, 4vw, 2.8rem); }

/* Judul blok di halaman dalam: garis tebal, bukan strip emas. */
.blok > h2,
.tahun-judul {
  font-family: var(--f-judul);
  letter-spacing: -0.022em;
}
.blok > h2 {
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  border-bottom: 2px solid var(--tinta);
  padding-bottom: var(--s-2);
}
.tahun-judul {
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  border-bottom: 2px solid var(--tinta);
}

/* Tabel bunga di halaman dalam diberi lebar terbatas supaya
   angkanya tidak melebar sampai ujung layar. */
.bunga-sendiri { max-width: 560px; }

/* Halaman satu tulisan: kepala pucat penuh lebar, isinya kolom baca. */
.kepala-pucat .tulisan h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); max-width: 34ch; }
.kepala-pucat .tulisan .tulisan-tanggal { margin-top: var(--s-3); }

/* Bagian pertama sesudah kepala halaman tidak perlu jarak atas
   ganda — kepalanya sudah punya bidangnya sendiri. */
.kepala-bidang + .wadah > .bagian-produk:first-child,
.kepala-pucat + .wadah > .bagian-produk:first-child { padding-top: 0; }
.kepala-bidang + .wadah, .kepala-pucat + .wadah { padding-top: clamp(1.6rem, 3.5vw, 2.4rem); }

/* ==============================================================
   30. Sistem gerak

   Empat aturan yang dipakai konsisten di seluruh situs:

   1. Kurva bawaan CSS terlalu lemah. Semua gerak memakai kurva
      buatan sendiri — yang bawaan tidak punya ketegasan yang
      membuat gerakan terasa disengaja.
   2. Yang masuk atau keluar layar pakai ease-out: bergerak cepat
      lebih dulu, jadi terasa langsung menyahut. ease-in tidak
      pernah dipakai — ia menunda gerakan tepat di saat mata
      pengunjung paling memperhatikan.
   3. Gerak antarmuka di bawah 300ms. Yang 180ms terasa lebih
      sigap daripada yang 400ms.
   4. Angka tidak dianimasikan. Ini situs bank — suku bunga dan
      plafon adalah isi, bukan pertunjukan.
   ============================================================== */
:root {
  /* masuk & keluar layar */
  --ease-keluar: cubic-bezier(0.23, 1, 0.32, 1);
  /* bergerak di dalam layar */
  --ease-dua-arah: cubic-bezier(0.77, 0, 0.175, 1);

  --laju-tekan: 140ms;
  --laju-sorot: 200ms;
  --laju-singkap: 620ms;
}

/* ---------- Umpan balik tekan ----------
   Tiap yang bisa ditekan menyusut sedikit saat ditekan. Ini
   detail yang jarang disadari orang, tapi tanpanya antarmuka
   terasa tidak mendengarkan. */
.tbl,
.baris-produk,
.kartu,
.dok,
.majalah,
.deret-kontak > a,
.simulasi-tautan {
  transition:
    transform var(--laju-tekan) var(--ease-keluar),
    border-color var(--laju-sorot) var(--ease-keluar),
    background-color var(--laju-sorot) var(--ease-keluar),
    color var(--laju-sorot) var(--ease-keluar),
    box-shadow var(--laju-sorot) var(--ease-keluar);
}
.tbl:active { transform: scale(0.97); }
.baris-produk:active,
.kartu:active,
.dok:active,
.majalah:active,
.simulasi-tautan:active { transform: scale(0.995); }

/* ---------- Sorot hanya untuk tetikus ----------
   Di layar sentuh, hover ikut menyala saat disentuh dan
   meninggalkan keadaan sorot yang menempel. */
@media (hover: hover) and (pointer: fine) {
  a.kartu:hover {
    border-color: var(--aksen);
    box-shadow: var(--bayang);
    transform: translateY(-2px);
  }
  .majalah:hover { transform: translateY(-2px); }
  .dok:hover { background: var(--aksen-lembut); }

  /* Tautan teks: garis bawah tumbuh dari kiri, bukan muncul
     sekaligus. Ukuran latar dianimasikan, jadi tidak ada
     pergeseran tata letak. */
  .naskah a:not(.tbl),
  .tautan-lanjut,
  .kaki-menu a,
  .menu-panel li a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size var(--laju-sorot) var(--ease-keluar), color var(--laju-sorot) ease;
  }
  .naskah a:not(.tbl) { background-size: 100% 1px; }
  .naskah a:not(.tbl):hover { background-size: 0% 1px; }
  .tautan-lanjut:hover,
  .kaki-menu a:hover,
  .menu-panel li a:hover { background-size: 100% 1px; }
}

/* ---------- Singkap saat digulir ----------
   Isi tetap terlihat tanpa JavaScript — kelas .singkap baru
   dipasang skrip kalau ia benar-benar jalan, jadi tidak ada
   yang tersangkut tak terlihat. */
@media (prefers-reduced-motion: no-preference) {
  .singkap {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--laju-singkap) var(--ease-keluar),
      transform var(--laju-singkap) var(--ease-keluar);
    will-change: opacity, transform;
  }
  .singkap.tampil {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  /* Beruntun: tiap baris menyusul yang sebelumnya. Jedanya
     pendek — jeda panjang membuat halaman terasa lambat. */
  .singkap-runtun > * {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 460ms var(--ease-keluar),
      transform 460ms var(--ease-keluar);
  }
  .singkap-runtun.tampil > * { opacity: 1; transform: none; }
  .singkap-runtun.tampil > *:nth-child(1) { transition-delay: 0ms; }
  .singkap-runtun.tampil > *:nth-child(2) { transition-delay: 45ms; }
  .singkap-runtun.tampil > *:nth-child(3) { transition-delay: 90ms; }
  .singkap-runtun.tampil > *:nth-child(4) { transition-delay: 130ms; }
  .singkap-runtun.tampil > *:nth-child(5) { transition-delay: 165ms; }
  .singkap-runtun.tampil > *:nth-child(6) { transition-delay: 195ms; }
  .singkap-runtun.tampil > *:nth-child(n + 7) { transition-delay: 220ms; }
}

/* ==============================================================
   32. Kisi sampul WMAGZ

   Sampul majalah adalah satu-satunya materi bergambar yang
   benar-benar dimiliki situs ini — dirancang, berwajah orang.
   Jadi sampulnya yang jadi isi halaman, bukan daftar nomor.
   ============================================================== */
.kisi-sampul {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  margin-bottom: var(--s-8);
}
.sampul { display: flex; flex-direction: column; gap: var(--s-3); text-decoration: none; color: inherit; }
.sampul-gambar {
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--cekung);
  border: 1px solid var(--garis);
  overflow: hidden;
  position: relative;
}
.sampul-gambar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Edisi yang sampulnya belum ada tetap mengisi kisinya, dengan
   nomor besar di bidang indigo berarsir. Lubang di kisi akan
   terbaca sebagai kesalahan, bukan sebagai ketiadaan. */
.sampul-kosong {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0;
}
.sampul-kosong > span {
  font-family: var(--f-judul);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--emas);
  font-variant-numeric: tabular-nums;
}
.sampul-kaki { display: flex; flex-direction: column; gap: 1px; }
.sampul-kaki strong { font-family: var(--f-judul); font-size: var(--t-sm); color: var(--tinta); }
.sampul-kaki span { font-size: var(--t-xs); color: var(--samar); font-variant-numeric: tabular-nums; }

@media (hover: hover) and (pointer: fine) {
  .sampul:hover .sampul-gambar { border-color: var(--aksen); }
  .sampul:hover .sampul-kaki strong { color: var(--aksen); }
  .sampul { transition: transform var(--laju-tekan) var(--ease-keluar); }
  .sampul:hover { transform: translateY(-3px); }
}
.sampul:active { transform: scale(0.99); }

/* Sampul majalah di beranda: teks kiri, deretan sampul kanan. */
.bagian-majalah { padding-block: clamp(2.4rem, 5.5vw, 4rem); }
.majalah-baris { display: grid; gap: clamp(1.6rem, 4vw, 3rem); }
.majalah-baris h2 { font-size: clamp(1.4rem, 3vw, 1.95rem); letter-spacing: -0.026em; margin-bottom: var(--s-3); }
.majalah-baris p { color: var(--redup); max-width: 38ch; }
.majalah-baris .tautan-lanjut { display: inline-block; margin-top: var(--s-3); }
.majalah-deret {
  display: grid;
  gap: clamp(0.7rem, 1.6vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(110px, 30%), 1fr));
}
@media (min-width: 900px) {
  .majalah-baris { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr); align-items: center; }
  .majalah-deret { grid-template-columns: repeat(5, 1fr); }
}

/* Kolom kanan baris yang berisi kata, bukan angka. */
.baris-produk .ag--kecil {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--aksen);
}
.baris-produk .ag--kecil::after { content: " \2192"; }

/* ==============================================================
   33. Pernyataan regulator — tenang, bukan peringatan
   Kotak bergaris merah di setiap halaman terbaca sebagai pesan
   galat. Pernyataan OJK/LPS itu wajib ada, tapi nadanya keterangan
   resmi: huruf kecil, garis emas tipis di kiri, tanpa kotak.
   ============================================================== */
.kotak-ojk {
  border-left: 3px solid var(--hias);
  padding: var(--s-1) 0 var(--s-1) var(--s-4);
  max-width: 66ch;
}
.kotak-ojk p { margin: 0; font-size: var(--t-sm); line-height: 1.55; }
.kotak-ojk-utama { color: var(--tinta); font-weight: 600; }
.kotak-ojk-tambahan { color: var(--redup); margin-top: var(--s-2) !important; }
.kaki-regulator { margin-top: var(--s-4); max-width: 46ch; border-left: 3px solid var(--hias); padding-left: var(--s-3); }
.kaki-regulator p { font-size: var(--t-sm); font-weight: 600; color: var(--tinta); margin: 0; }
.produk-samping .kotak-ojk { padding-left: var(--s-3); }

/* ==============================================================
   34. Halaman naratif bertepi
   ============================================================== */
.naratif { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
.naratif-isi { min-width: 0; }
.naratif-kaki { grid-column: 1 / -1; }
.naratif-tepi { display: grid; gap: var(--s-5); align-content: start; }
.tepi-blok .mata { margin-bottom: var(--s-3); }
.tepi-daftar { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--garis); }
.tepi-daftar li { border-bottom: 1px solid var(--garis); }
.tepi-daftar a {
  display: block;
  padding: 0.55rem 0;
  font-size: var(--t-sm);
  color: var(--tinta-2);
  text-decoration: none;
  transition: color 0.18s var(--ease-keluar), padding-left 0.22s var(--ease-keluar);
}
.tepi-daftar a:hover { color: var(--aksen); padding-left: 4px; }
.tepi-daftar a[aria-current="page"] {
  color: var(--tinta);
  font-weight: 700;
  padding-left: 12px;
  position: relative;
}
.tepi-daftar a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: var(--hias);
  border-radius: 50%;
}
.naskah h2[id] { scroll-margin-top: 6.5rem; }
@media (min-width: 980px) {
  .naratif--bertepi { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s-8); }
  .naratif-tepi { position: sticky; top: 6.5rem; }
}

/* Roster pengurus: nama besar, jabatan kecil. */
.naskah ul.roster { list-style: none; padding: 0; margin: var(--s-4) 0 var(--s-6); display: grid; gap: 0; border-top: 1px solid var(--garis); }
.naskah .orang { margin: 0; padding: var(--s-4) 0; border-bottom: 1px solid var(--garis); display: grid; gap: 2px; }
.orang-nama {
  font-family: var(--f-judul);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tinta);
  line-height: 1.15;
}
.orang-jabatan {
  font-family: var(--f-judul);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--redup);
}
@media (min-width: 640px) {
  .naskah ul.roster { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); }
}

/* ==============================================================
   35. Halaman suku bunga: daftar tarif + pendamping
   ============================================================== */
.bunga-tata { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
.bunga-kaki { grid-column: 1 / -1; }
.bunga-tepi { display: grid; gap: var(--s-4); align-content: start; }
.fakta-ringkas { margin: 0; display: grid; gap: 0; }
.fakta-ringkas > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--garis);
  font-size: var(--t-sm);
}
.fakta-ringkas dt { color: var(--redup); }
.fakta-ringkas dd { margin: 0; font-weight: 700; color: var(--tinta); text-align: right; }
@media (min-width: 900px) {
  .bunga-tata { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: var(--s-8); align-items: start; }
  .bunga-tepi { position: sticky; top: 6.5rem; }
}

/* ==============================================================
   36. Kisi laporan triwulan
   ============================================================== */
.kisi-triwulan { border-top: 2px solid var(--tinta); }
.kisi-triwulan-kepala,
.kisi-triwulan-baris {
  display: grid;
  grid-template-columns: 5rem repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
  align-items: center;
  border-bottom: 1px solid var(--garis);
}
.kisi-triwulan-kepala {
  padding: var(--s-2) 0;
  font-family: var(--f-judul);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--samar);
}
.kisi-triwulan-baris { padding: var(--s-2) 0; }
.kisi-triwulan-tahun {
  font-family: var(--f-judul);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.sel-dok {
  display: grid;
  gap: 1px;
  padding: 0.6rem 0.75rem;
  border-radius: var(--sudut);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--garis);
  transition: border-color 0.18s var(--ease-keluar), background 0.18s var(--ease-keluar), transform 0.18s var(--ease-keluar);
}
.sel-dok-label { font-family: var(--f-judul); font-weight: 700; font-size: var(--t-sm); color: var(--tinta); }
.sel-dok-ukuran { font-size: 11.5px; color: var(--samar); font-variant-numeric: tabular-nums; }
a.sel-dok:hover { border-color: var(--aksen); background: var(--aksen-lembut); }
a.sel-dok:hover .sel-dok-label { color: var(--aksen); }
a.sel-dok .sel-dok-ukuran::before { content: "PDF · "; color: var(--tindakan); font-weight: 700; }
.sel-dok--kosong { border-style: dashed; opacity: 0.55; }
.sel-dok--kosong .sel-dok-label { color: var(--samar); font-weight: 400; }
@media (max-width: 640px) {
  .kisi-triwulan-kepala { display: none; }
  .kisi-triwulan-baris { grid-template-columns: 1fr 1fr; padding: var(--s-3) 0; }
  .kisi-triwulan-tahun { grid-column: 1 / -1; margin-bottom: var(--s-1); }
  .sel-dok--kosong { display: none; }
}

/* ==============================================================
   37. Perbaikan kecil
   ============================================================== */
/* Panah tautan luar pada kotak simulasi jatuh sebagai butir flex
   tersendiri — pindah ke dalam tombolnya. */
a.simulasi-tautan[data-luar]::after { content: none; }
.simulasi-tautan .tbl::after { content: " \2197"; }
.simulasi-tautan > span > span { display: block; }
.simulasi-tautan .tbl { font-size: var(--t-sm); color: var(--tinta); }

/* Bilah aksi lekat di dasar layar sempit halaman produk. */
.aksi-lekat { display: none; }
@media (max-width: 949px) {
  .aksi-lekat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-2);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 0.6rem var(--tepi, 1rem) calc(0.6rem + env(safe-area-inset-bottom));
    background: var(--kertas);
    border-top: 1px solid var(--garis);
    box-shadow: 0 -8px 24px -12px rgb(0 0 0 / 0.18);
  }
  .aksi-lekat .tbl { white-space: nowrap; }
  .produk-baris { padding-bottom: 4.5rem; }
}

/* Baris tautan luar: panah ↗ umum dari a[data-luar]::after menimpa
   garis sapuan emas dan jatuh sebagai sel kisi baru. Kembalikan
   sapuannya, taruh panahnya di kolom aksi. */
a.baris-produk[data-luar]::after { content: ""; }
.baris-produk[data-luar] .ag--kecil::after { content: " \2197"; }

/* Angka sorot di layar sempit: tiga kolom rapat, bukan 2 + 1 yang
   menyisakan sel kosong. */
@media (max-width: 560px) {
  .sorot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sorot > div { padding: var(--s-3) var(--s-3); }
  .sorot .nilai { font-size: clamp(1.05rem, 4.6vw, 1.4rem); letter-spacing: -0.02em; }
  .sorot .label { font-size: 11.5px; }
}

/* Daftar isi halaman hanya berguna saat menempel di samping teks;
   di layar sempit ia jatuh ke bawah isi dan tak berguna lagi. */
@media (max-width: 979px) {
  .naratif-tepi nav[aria-label="Bagian halaman ini"] { display: none; }
}

/* Di layar sempit tiga kabar cukup; enam kartu bertumpuk membuat
   beranda dua kali lebih panjang tanpa menambah apa-apa. */
@media (max-width: 699px) {
  .kisi-kabar > :nth-child(n + 4) { display: none; }
}

/* ==============================================================
   38. Lapis hidup (22 Okt 2026)

   Versi pertama situs ini jatuh ke gaya "koran": garis rambut,
   sudut tajam, kolom padat, tanpa satu foto pun. Rapi, tapi
   pemilik menilainya kaku dan lebih suka situs lama. Situs lama
   menang karena dibuka dengan kampanye yang sedang berjalan,
   berwajah orang, berwarna kampanye.

   Lapis ini menambahkan:
     - panggung sorotan dengan gambar kampanye asli Bank WM,
     - warna kampanye (biru myWM, kuning-jingga kredit69, merah
       panggung Tamasha) yang hanya hidup di panggung,
     - sudut lembut dan tombol bulat,
     - foto orang dan kantor di tengah halaman.
   Indigo, merah, dan emas logo tetap jadi warna utama halaman.
   ============================================================== */
:root {
  --kampanye-biru: #1d4fe0;
  --kampanye-biru-tua: #0e1f99;
  --kampanye-kuning: #ffd23f;
  --kampanye-jingga: #ffad1f;
  --kampanye-tinta: #14165a;
}

/* Tombol bulat terasa ramah dan bisa ditekan; kotak bersudut
   tajam terbaca sebagai formulir kantor. */
.tbl { border-radius: 999px; }
.tbl--terang { background: #fff; border-color: #fff; color: var(--kampanye-tinta); }
.tbl--terang:hover { background: var(--kampanye-kuning); border-color: var(--kampanye-kuning); color: var(--kampanye-tinta); }
.kartu,
.papan { border-radius: 16px; }
.sampul-gambar { border-radius: 10px; }
.dok-ikon { font-size: 12px; letter-spacing: 0.02em; border-radius: 6px; }

/* Penanda kecil di atas judul bagian: belah ketupat emas dari
   logo, lalu nama bagiannya. */
.mata-warna {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-judul);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--aksen);
  margin-bottom: var(--s-3);
}
.mata-warna::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--hias);
  transform: rotate(45deg);
}

/* Judul bagian tanpa garis tebal di bawahnya. */
.kepala-lebar { border-bottom: 0; padding-bottom: 0; }

/* ---------- Panggung sorotan ---------- */
.panggung { position: relative; background: var(--kampanye-biru-tua); }
.panggung-jalur {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.panggung-jalur::-webkit-scrollbar { display: none; }
.panggung-jalur:focus-visible { outline: 3px solid var(--kampanye-kuning); outline-offset: -3px; }

.layar {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  --sorot-latar: var(--kampanye-kuning);
  --sorot-teks: var(--kampanye-tinta);
}
.layar-isi {
  display: grid;
  gap: var(--s-5);
  padding-top: clamp(1.8rem, 5vw, 3.4rem);
  height: 100%;
}
.layar-teks { padding-bottom: var(--s-2); max-width: 36rem; }
.layar-mata {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
  font-family: var(--f-judul);
  font-size: var(--t-sm);
  font-weight: 700;
}
.layar-judul {
  margin: 0.85rem 0 0.9rem;
  font-size: clamp(1.85rem, 4.4vw, 3.3rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.024em;
  color: inherit;
  max-width: 17ch;
}
/* Angka kunci tiap sorotan ditandai seperti stabilo di brosur:
   satu sorotan, satu angka. */
.layar-angka {
  background: var(--sorot-latar);
  color: var(--sorot-teks);
  padding: 0 0.16em;
  border-radius: 0.18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  white-space: nowrap;
}
.layar-ket {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.55;
  max-width: 42ch;
  opacity: 0.88;
  margin-bottom: var(--s-5);
}
/* Warna sorotan sama di kedua tema, jadi merah tombolnya juga:
   merah terang mode gelap di atas kuning kredit69 tak terbaca. */
.layar .tbl--utama { background: #d81e24; border-color: #d81e24; color: #fff; }
.layar .tbl--utama:hover { background: #b8171d; border-color: #b8171d; color: #fff; }
.layar .tbl--kedua { border-color: currentColor; color: inherit; }
.layar .tbl--kedua:hover { background: rgb(255 255 255 / 0.14); border-color: currentColor; color: inherit; }

.layar-foto { display: block; justify-self: center; align-self: end; }
.layar-foto img { width: 100%; height: auto; }
/* Foto berlatar (model kredit69): jendela bersudut lembut yang
   duduk di dasar panggung. */
.layar-foto--bingkai { width: min(68vw, 420px); }
.layar-foto--bingkai img {
  border-radius: var(--sudut-besar) var(--sudut-besar) 0 0;
  box-shadow: 0 -10px 50px -18px rgb(0 0 0 / 0.45);
}
/* Gambar tanpa latar (ponsel myWM) dibiarkan lepas. */
.layar-foto--lepas { width: min(62vw, 400px); filter: drop-shadow(0 24px 30px rgb(0 0 0 / 0.35)); }

/* Kredit 69: kuning-jingga kampanye kredit69, tulisan tinta gelap. */
.layar--kredit69 {
  background:
    radial-gradient(90% 120% at 100% 0%, #ffe680 0%, transparent 55%),
    linear-gradient(115deg, var(--kampanye-jingga) 0%, var(--kampanye-kuning) 70%);
  color: var(--kampanye-tinta);
  --sorot-latar: var(--kampanye-tinta);
  --sorot-teks: var(--kampanye-kuning);
}
.layar--kredit69 .layar-mata { background: rgb(20 22 90 / 0.1); }

/* myWM: biru aplikasi dengan lingkaran konsentris seperti banner
   aslinya. */
.layar--mywm {
  background:
    repeating-radial-gradient(circle at 76% 60%, rgb(255 255 255 / 0.07) 0 2px, transparent 2px 54px),
    radial-gradient(110% 90% at 78% 30%, #3a74ff 0%, var(--kampanye-biru) 42%, var(--kampanye-biru-tua) 100%);
}

/* Tamasha: merah panggung undian. Fotonya ditempel seperti cetak
   foto, sedikit miring. */
.layar--tamasha {
  background:
    radial-gradient(60% 80% at 80% 35%, #e0262c 0%, transparent 70%),
    linear-gradient(140deg, #6d0d24 0%, #23255c 100%);
  --sorot-latar: var(--emas);
  --sorot-teks: #2a1405;
}
.layar--tamasha .layar-foto--bingkai { width: min(80vw, 460px); align-self: center; margin-bottom: var(--s-6); }
.layar--tamasha .layar-foto--bingkai img {
  border-radius: 6px;
  border: 8px solid #fff;
  transform: rotate(2.2deg);
  box-shadow: 0 24px 50px -16px rgb(0 0 0 / 0.55);
}

@media (min-width: 900px) {
  .layar { min-height: clamp(480px, 64vh, 580px); }
  .layar-isi {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    padding-top: var(--s-6);
  }
  .layar-teks { padding-bottom: 5.2rem; }
  .layar-foto { justify-self: end; }
  .layar-foto--lepas { margin-bottom: var(--s-5); }
}

/* Kendali: kapsul gelap tembus pandang yang terbaca di atas warna
   sorotan mana pun. */
.panggung-kendali {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s-4);
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}
.panggung-kendali[hidden] { display: none; }
.panggung-kendali > * { pointer-events: auto; }
.panggung-titik,
.panggung-jeda,
.panggung-geser {
  background: rgb(14 16 58 / 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 0;
}
.panggung-titik { display: flex; align-items: center; border-radius: 999px; padding: 0 4px; }
.panggung-titik button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.panggung-titik button::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.5);
  transition: width var(--laju-sorot) var(--ease-keluar), background-color var(--laju-sorot) var(--ease-keluar);
}
.panggung-titik button[aria-current="true"]::before { width: 24px; background: #fff; }
.panggung-jeda,
.panggung-geser {
  width: 44px;
  height: 44px;
  margin-left: var(--s-2);
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
}
.panggung-jeda span {
  width: 10px;
  height: 12px;
  border-inline: 3px solid #fff;
}
.panggung-jeda--putar span {
  width: 0;
  height: 0;
  border-inline: 0;
  border-block: 7px solid transparent;
  border-left: 11px solid #fff;
  margin-left: 3px;
}
.panggung-geser { display: none; }
@media (min-width: 900px) {
  .panggung-geser { display: grid; }
}
/* Di HP kendalinya pindah ke pojok kanan atas, supaya tidak
   menimpa foto yang duduk di dasar panggung. */
@media (max-width: 899px) {
  .panggung-kendali { bottom: auto; top: var(--s-3); justify-content: flex-end; }
  .layar-mata { margin-right: 9rem; }
}

/* ---------- Sambutan ---------- */
.sambutan {
  background: var(--kertas);
  padding-block: clamp(2rem, 4.5vw, 3.2rem);
  border-bottom: 1px solid var(--garis);
}
.sambutan-baris { display: grid; gap: var(--s-5); }
.sambutan h1 {
  font-size: clamp(1.65rem, 3.6vw, 2.55rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.022em;
  max-width: 21ch;
}
.sambutan h1 em {
  font-style: normal;
  color: var(--aksen);
  background: linear-gradient(transparent 64%, var(--hias-lembut) 64%);
}
.sambutan-teks { color: var(--redup); max-width: 52ch; margin-top: var(--s-3); }
.sambutan-fakta { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); margin: 0 0 var(--s-4); }
.sambutan-fakta > div { display: flex; flex-direction: column; }
.sambutan-fakta dd {
  margin: 0;
  font-family: var(--f-judul);
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--aksen);
  font-variant-numeric: tabular-nums;
}
.sambutan-fakta dt { font-size: var(--t-sm); color: var(--redup); margin-top: 4px; }
.sambutan-izin {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--redup);
  border-left: 3px solid var(--hias);
  padding-left: var(--s-3);
  max-width: 48ch;
  margin: 0;
}
.sambutan-izin b { color: var(--tinta); font-weight: 600; }
@media (min-width: 900px) {
  .sambutan-baris { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-8); align-items: end; }
}

/* ---------- Pintu cepat ---------- */
.pintu { background: var(--kertas-2); padding-block: clamp(2rem, 4.5vw, 3rem); }
.pintu-judul { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: var(--s-4); }
.pintu-kisi { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .pintu-kisi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
}
.pintu-butir {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-4);
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: 18px;
  text-decoration: none;
  color: var(--tinta);
  transition:
    transform var(--laju-tekan) var(--ease-keluar),
    border-color var(--laju-sorot) var(--ease-keluar),
    box-shadow var(--laju-sorot) var(--ease-keluar);
}
.pintu-butir:active { transform: scale(0.98); }
.pintu-butir strong { font-family: var(--f-judul); font-size: var(--t-md); line-height: 1.25; }
.pintu-butir > span:last-child { font-size: var(--t-sm); color: var(--redup); line-height: 1.4; }
.pintu-butir[data-luar]::after { position: absolute; top: var(--s-3); right: var(--s-4); color: var(--samar); }
.pintu-ikon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  margin-bottom: var(--s-3);
  background: var(--aksen-lembut);
  color: var(--aksen);
}
.pintu-butir--kredit .pintu-ikon { background: var(--tindakan-lembut); color: var(--tindakan); }
.pintu-butir--deposito .pintu-ikon { background: var(--hias-lembut); color: var(--awas); }
.pintu-butir--transaksi .pintu-ikon { background: color-mix(in srgb, #12a4d9 14%, var(--kertas)); color: #0b7fb0; }
@media (hover: hover) and (pointer: fine) {
  .pintu-butir:hover { transform: translateY(-3px); border-color: var(--aksen); box-shadow: var(--bayang-naik); }
}

/* ---------- Suku bunga: daftar tarif di atas kartu ---------- */
.pita-bunga { background: var(--kertas); border-block: 0; }
.bunga-papan {
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: var(--sudut-besar);
  padding: var(--s-2) clamp(1.1rem, 3vw, 2rem) clamp(1.1rem, 2.6vw, 1.6rem);
  box-shadow: var(--bayang);
}
.bunga-papan .daftar-bunga > div:first-child { border-top: 0; }
.bunga-papan .daftar-bunga > div:last-child { border-bottom: 1px solid var(--garis); }
.bunga-papan .daftar-bunga > div { border-bottom-color: var(--garis); }
.bunga-foto { display: none; }
@media (min-width: 900px) {
  .bunga-foto { display: block; margin-top: var(--s-6); max-width: 440px; }
  .bunga-foto img { border-radius: var(--sudut-besar); aspect-ratio: 2 / 1; object-fit: cover; }
}

/* ---------- Produk: dua panel ---------- */
.produk-dua { display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
@media (min-width: 900px) {
  .produk-dua { grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; }
}
.produk-panel {
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: var(--sudut-besar);
  padding: 0 clamp(1rem, 2.4vw, 1.5rem) var(--s-2);
}
.produk-panel-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--garis);
}
.produk-panel-kepala h3 { font-size: var(--t-lg); display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.produk-panel-kepala .tautan-lanjut { white-space: nowrap; font-size: var(--t-sm); }
.produk-panel-kepala h3::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--tindakan); }
.produk-panel--simpanan .produk-panel-kepala h3::before { background: var(--aksen); }
.produk-panel .baris-produk { grid-template-columns: minmax(0, 1fr) auto; padding: 0.85rem 0; }
.produk-panel .baris-produk:first-child { border-top: 0; }
.produk-panel .baris-produk:last-child { border-bottom: 0; }
.produk-panel .baris-produk .nm { font-size: clamp(1rem, 1.5vw, 1.12rem); }
.produk-panel .baris-produk .ag { font-size: clamp(1rem, 1.6vw, 1.2rem); }
.baris-produk .ag small { font-size: 12px; }
@media (max-width: 620px) {
  .produk-panel .baris-produk { grid-template-columns: minmax(0, 1fr); }
  .produk-panel .baris-produk .ag { grid-column: 1; }
}
.simulasi-tautan { border-radius: 16px; }

/* ---------- Wajah dan kantor ---------- */
.dekat {
  background:
    radial-gradient(70% 90% at 100% 0%, #34379a 0%, transparent 60%),
    var(--bidang);
  color: var(--bidang-teks);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.dekat-baris { display: grid; gap: var(--s-6); }
.dekat h2 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -0.024em; margin-bottom: var(--s-3); }
.dekat p { color: var(--bidang-redup); max-width: 46ch; }
.dekat .mata-warna { color: var(--emas); }
.dekat-tempat {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: var(--s-5) 0 var(--s-5);
  padding: 0;
}
.dekat-tempat li {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.16);
  font-size: var(--t-sm);
  color: #fff;
}
.dekat .tbl--isi { background: #fff; border-color: #fff; color: var(--bidang); }
.dekat .tbl--isi:hover { background: var(--kampanye-kuning); border-color: var(--kampanye-kuning); color: var(--kampanye-tinta); }
.dekat-mosaik { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; }
.dekat-foto { position: relative; margin: 0; }
.dekat-foto--besar { grid-column: 1 / -1; }
.dekat-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
}
.dekat-foto--besar img { aspect-ratio: 16 / 9; }
.dekat-foto figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  right: 10px;
  width: fit-content;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgb(14 16 40 / 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.3;
}
@media (min-width: 900px) {
  .dekat-baris { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-8); align-items: center; }
}

/* ---------- Kabar: kartu tanpa gambar ----------
   Kartu utama hanya dibesarkan kalau ia punya gambar. Pengumuman
   tanpa gambar yang kebetulan paling baru dulu tampil sebagai kotak
   putih raksasa yang kosong. */
@media (min-width: 900px) {
  .kisi-kabar > :first-child:not(:has(.kartu-gambar)) { grid-column: auto; grid-row: auto; }
}
.kartu-tulisan:not(:has(.kartu-gambar))::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--aksen), var(--hias));
}

/* ---------- Kepala halaman dalam: arsir lebih tipis ---------- */
.bidang {
  background:
    radial-gradient(80% 140% at 90% 0%, #34379a 0%, transparent 60%),
    var(--bidang);
}
.bidang::before { opacity: 0.1; }

/* ---------- Ukuran huruf & sasaran sentuh ----------
   Temuan pemeriksaan tampilan HP 390 (22 Okt 2026). */
.deret-kontak .kc { font-size: 12px; }
.sorot .label { font-size: 12px; }
.tautan-lanjut { display: inline-block; padding-block: 0.7rem; }
@media (hover: hover) and (pointer: fine) {
  .tautan-lanjut { background-position: 0 calc(100% - 0.7rem); }
}
.kaki-judul { padding-block: 0.75rem; }
.kaki-sosial a { display: inline-block; padding-block: 0.7rem; }
.direktori-peta { display: inline-block; padding-block: 0.7rem; }
@media (max-width: 949px) {
  /* Bilah aksi lekat halaman produk menutupi baris hak cipta. */
  body:has(.aksi-lekat) .kaki { padding-bottom: calc(5.2rem + env(safe-area-inset-bottom)); }
}

/* ---------- Pindah halaman yang mulus ----------
   View Transitions lintas dokumen: kop tetap di tempat, isinya
   memudar ke halaman berikutnya. Peramban yang belum mendukung
   cukup berpindah seperti biasa. */
@view-transition { navigation: auto; }
.kop { view-transition-name: kop; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Bagian jauh di bawah tidak dirakit peramban sebelum didekati. */
.bagian-majalah,
.bagian--cekung { content-visibility: auto; contain-intrinsic-size: auto 640px; }

/* ==============================================================
   39. Halaman dalam yang bergambar (22 Okt 2026)

   Halaman dalam versi pertama hanya judul, teks, dan daftar
   bergaris. Lapis ini menambahkan tiga hal yang semuanya memakai
   foto asli Bank WM dari situs lama:
     - foto di kepala halaman induk (Tentang Kami, Karir, ...),
       duduk di dasar bidang seperti foto di panggung beranda,
     - lini masa bergambar di Sekilas Perusahaan,
     - diagram makna logo.
   ============================================================== */

/* ---------- Foto kepala halaman ---------- */
.kepala-foto { display: none; margin: 0; }
@media (min-width: 900px) {
  .kepala--berfoto .kepala-baris {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: var(--s-7);
    align-items: end;
  }
  .kepala--berfoto .kepala-baris > div { align-self: center; }
  .kepala-foto {
    display: block;
    position: relative;
    /* Turun sampai ke dasar bidang, seperti foto di panggung beranda. */
    margin-bottom: calc(-1 * clamp(1.7rem, 3.5vw, 2.6rem));
  }
  .kepala-pucat .kepala-foto { margin-bottom: calc(-1 * clamp(1.5rem, 3vw, 2.2rem)); }
  .kepala-foto img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--sudut-besar) var(--sudut-besar) 0 0;
  }
  .kepala-foto figcaption {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgb(14 16 40 / 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12.5px;
  }
  .kepala-foto--lepas { width: 300px; justify-self: end; margin-top: calc(-1 * var(--s-5)); }
  .kepala-foto--lepas img {
    aspect-ratio: auto;
    border-radius: 0;
    filter: drop-shadow(0 20px 26px rgb(0 0 0 / 0.35));
  }
}

/* ---------- Kartu ikhtisar halaman induk ---------- */
.kisi-ikhtisar {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.kartu-ikhtisar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-5);
  min-height: 150px;
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: 18px;
  color: var(--tinta);
  text-decoration: none;
  transition:
    transform var(--laju-tekan) var(--ease-keluar),
    border-color var(--laju-sorot) var(--ease-keluar),
    box-shadow var(--laju-sorot) var(--ease-keluar);
}
.kartu-ikhtisar::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-bottom: var(--s-3);
  background: var(--hias);
  transform: rotate(45deg);
}
.kartu-ikhtisar strong { font-family: var(--f-judul); font-size: var(--t-lg); line-height: 1.2; }
.kartu-ikhtisar > span:not(.kartu-ikhtisar-aksi) { color: var(--redup); font-size: var(--t-sm); line-height: 1.5; }
.kartu-ikhtisar-aksi {
  margin-top: auto;
  padding-top: var(--s-3);
  font-family: var(--f-judul);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--aksen);
}
.kartu-ikhtisar:not([data-luar]) .kartu-ikhtisar-aksi::after { content: " \2192"; }
.kartu-ikhtisar[data-luar]::after { position: absolute; top: var(--s-4); right: var(--s-5); color: var(--samar); }
.kartu-ikhtisar:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .kartu-ikhtisar:hover { transform: translateY(-3px); border-color: var(--aksen); box-shadow: var(--bayang-naik); }
}

/* ---------- Lini masa Sekilas Perusahaan ---------- */
.naskah ol.lini-masa {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0 var(--s-6);
  position: relative;
}
/* Garis emas yang menyambung seluruh tahun. */
.naskah ol.lini-masa::before {
  content: "";
  position: absolute;
  left: 4.6rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: linear-gradient(var(--hias), var(--hias-lembut));
}
.naskah .lini-butir {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  margin: 0;
  padding-bottom: var(--s-5);
  position: relative;
}
.lini-tahun {
  font-family: var(--f-judul);
  font-weight: 800;
  font-size: var(--t-md);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--aksen);
  font-variant-numeric: tabular-nums;
  padding-right: var(--s-3);
}
/* Belah ketupat emas di garis, bentuk dari logo. */
.lini-isi { position: relative; padding-left: var(--s-5); }
.lini-isi::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.55rem;
  width: 10px;
  height: 10px;
  background: var(--kertas);
  border: 2px solid var(--hias);
  transform: rotate(45deg);
}
.lini-butir--foto .lini-isi::before { background: var(--hias); }
.lini-isi p { margin: 0; }
.lini-foto { margin: var(--s-3) 0 0; max-width: 320px; }
.lini-foto img {
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 14px;
  box-shadow: var(--bayang);
}
.lini-foto figcaption { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--redup); }
/* Tahun pertama: foto pendirian dibuat seperti cetakan lama. */
.lini-butir:first-child .lini-tahun { font-size: var(--t-xl); line-height: 1.1; }
.lini-butir:first-child .lini-foto img {
  border: 6px solid #fff;
  border-radius: 4px;
  transform: rotate(-1.5deg);
  box-shadow: 0 12px 28px -10px rgb(0 0 0 / 0.35);
}
@media (max-width: 480px) {
  .naskah ol.lini-masa::before { left: 3.4rem; }
  .naskah .lini-butir { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .lini-tahun { font-size: var(--t-sm); }
  .lini-butir:first-child .lini-tahun { font-size: var(--t-md); }
}

/* ---------- Visi, misi, dan logo di Sekilas Perusahaan ---------- */
.naskah--profil blockquote {
  position: relative;
  margin: var(--s-4) 0 var(--s-6);
  padding: var(--s-6) var(--s-6) var(--s-6) clamp(3.2rem, 7vw, 4.4rem);
  border: 0;
  border-radius: var(--sudut-besar);
  background:
    radial-gradient(80% 140% at 100% 0%, #34379a 0%, transparent 60%),
    var(--bidang);
  color: #fff;
  font-family: var(--f-judul);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
.naskah--profil blockquote::before {
  content: "\201C";
  position: absolute;
  left: clamp(1rem, 2.4vw, 1.5rem);
  top: 0.6rem;
  font-size: 4.2rem;
  line-height: 1;
  color: var(--emas);
}
/* Empat misi sebagai kartu bernomor: misi memang disebut berurutan. */
.naskah--profil h2#misi + ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  counter-reset: misi;
}
.naskah--profil h2#misi + ul > li {
  counter-increment: misi;
  margin: 0;
  padding: var(--s-4) var(--s-4) var(--s-4) 3.2rem;
  position: relative;
  background: var(--kertas-2);
  border: 1px solid var(--garis);
  border-radius: 16px;
  font-size: var(--t-sm);
  line-height: 1.55;
}
.naskah--profil h2#misi + ul > li::before {
  content: counter(misi);
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--aksen);
  color: #fff;
  font-family: var(--f-judul);
  font-weight: 800;
  font-size: var(--t-xs);
}
.logo-makna { margin: var(--s-4) 0 var(--s-5); }
.logo-makna img {
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 16px;
  border: 1px solid var(--garis);
  background: #fff;
}

/* ==============================================================
   40. Kartu berikon dan perbaikan dari survei (22 Okt 2026)

   Survei 28 halaman dalam: halaman kategori produk dan indeks
   laporan masih berupa daftar bernomor tanpa unsur visual. Nomornya
   tidak bermakna, jadi diganti kartu berikon. Sisanya perbaikan kecil
   yang tercatat di survei yang sama.
   ============================================================== */

/* ---------- Ikon dalam kotak lembut ---------- */
.ikon-chip {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--aksen-lembut);
  color: var(--aksen);
}
.kartu-produk-ikon--kredit .ikon-chip { background: var(--tindakan-lembut); color: var(--tindakan); }
.kartu-produk-ikon--deposito .ikon-chip { background: var(--hias-lembut); color: var(--awas); }

/* ---------- Kartu produk ---------- */
.kisi-produk {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
}
.kartu-produk-ikon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ikon teks" "ikon angka";
  gap: 0 var(--s-4);
  align-items: start;
  padding: var(--s-5);
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: 18px;
  color: var(--tinta);
  text-decoration: none;
  transition:
    transform var(--laju-tekan) var(--ease-keluar),
    border-color var(--laju-sorot) var(--ease-keluar),
    box-shadow var(--laju-sorot) var(--ease-keluar);
}
.kartu-produk-ikon .ikon-chip { grid-area: ikon; }
.kpi-teks { grid-area: teks; display: flex; flex-direction: column; gap: 2px; }
.kpi-teks strong { font-family: var(--f-judul); font-size: var(--t-lg); line-height: 1.2; }
.kpi-teks span { color: var(--redup); font-size: var(--t-sm); line-height: 1.45; }
.kpi-angka {
  grid-area: angka;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--garis-tegas);
  font-family: var(--f-judul);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
  color: var(--aksen);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kpi-angka small {
  font-family: var(--f-teks);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--redup);
  margin-left: 6px;
}
.kartu-produk-ikon:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .kartu-produk-ikon:hover { transform: translateY(-3px); border-color: var(--aksen); box-shadow: var(--bayang-naik); }
  .kartu-produk-ikon:hover strong { color: var(--aksen); }
}

/* Deposito: satu kartu produk berdampingan dengan tarifnya. */
.deposito-baris { display: grid; gap: var(--s-6); }
.kisi-produk--tunggal { grid-template-columns: minmax(0, 1fr); align-content: start; }
@media (min-width: 900px) {
  .deposito-baris { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
  .deposito-baris .kepala-lebar { margin-top: 0; }
}

/* ---------- Kartu ikhtisar berikon (indeks laporan) ---------- */
.kartu-ikhtisar--ikon::before { content: none; }
.kartu-ikhtisar--ikon .ikon-chip { margin-bottom: var(--s-3); }
.kartu-ikhtisar--ikon .kartu-ikhtisar-aksi::after { content: " \2192"; }

/* ---------- Perbaikan kecil dari survei ---------- */
/* Angka sorot berisi dua butir di layar sempit: dua kolom, bukan tiga
   dengan sel ketiga kosong (Tabungan Smart). */
@media (max-width: 560px) {
  .sorot:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* "Rp8.000.000" menempel ke tepi kartu (Deposito Makmur). */
  .sorot .nilai { font-size: clamp(0.95rem, 4.2vw, 1.4rem); overflow-wrap: anywhere; }
}
/* Teks di bawah 12px. */
.sel-dok-ukuran,
.orang-jabatan,
.direktori-jenis { font-size: 12px; }
/* Nomor telepon kantor: sasaran sentuh 44px di HP. */
@media (max-width: 720px) {
  .direktori-telepon a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Halaman naratif pendek (Klik WM): kolom pendamping yang panjang dulu
   mendorong kotak OJK jauh ke bawah. Pendamping kini mengisi dua baris,
   jadi kotak OJK duduk tepat di bawah isi. */
@media (min-width: 980px) {
  .naratif--bertepi .naratif-tepi { grid-column: 2; grid-row: 1 / span 2; }
  .naratif--bertepi .naratif-kaki { grid-column: 1; }
}

/* ==============================================================
   41. Persetujuan PDP di formulir (22 Okt 2026)

   Diminta Komdigi (surat B-1317/DJPRD.2/AI.05.01/10/2026): formulir
   pengumpul data wajib meminta persetujuan eksplisit dan menautkan
   Pemberitahuan Privasi. Kotaknya tidak tercentang bawaan dan wajib
   diisi; server menolak kiriman tanpa centang. Tombol kirim tampak
   nonaktif sampai kotak dicentang, cukup dengan :has(), tanpa skrip.
   ============================================================== */
.medan--setuju { margin-top: var(--s-2); }
.setuju {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4);
  border: 1px solid var(--garis-tegas);
  border-radius: 14px;
  background: var(--kertas-2);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--tinta-2);
  cursor: pointer;
}
.setuju input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--aksen);
  cursor: pointer;
}
.setuju:has(input:checked) { border-color: var(--aksen); background: var(--aksen-lembut); }
.medan--galat .setuju { border-color: var(--tindakan); }
.formulir:has(#persetujuan:not(:checked)) button[type="submit"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Tautan Pemberitahuan Privasi di kaki halaman, berdampingan. */
.kaki-bawah p:last-child { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.kaki-bawah p:last-child a { display: inline-block; padding-block: 0.8rem; }
/* Tombol aksesibilitas melekat di kiri bawah layar: sisakan ruang supaya tautan terakhir footer tidak tertutup. */
.kaki-bawah { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }

/* ==============================================================
   42. Menu aksesibilitas (27 Okt 2026)

   Pengganti widget UserWay situs lama, bukti 4.A.3 penilaian
   SETARA OJK. Setelan dipasang sebagai atribut data-ak-* pada
   <html> oleh aksesibilitas-awal.js (sebelum halaman digambar) dan
   aksesibilitas.js (saat diubah dari panel). Selektornya :root[...]
   supaya mengalahkan token mode gelap di bagian 1.
   ============================================================== */
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/opendyslexic-400.woff2") format("woff2");
}
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/opendyslexic-700.woff2") format("woff2");
}

/* ---------- Tombol dan panel ---------- */
.ak[hidden], .ak-panel[hidden] { display: none; }
.ak-tombol {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid var(--kertas);
  border-radius: 50%;
  background: var(--aksen);
  color: #fff;
  box-shadow: var(--bayang-naik);
  cursor: pointer;
}
.ak-tombol:hover { background: var(--aksen-kuat); }
.ak-tombol:focus-visible { outline: 3px solid var(--hias); outline-offset: 3px; }
/* Titik kecil penanda ada setelan yang sedang menyala. */
.ak-tombol--aktif::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--hias);
  border: 2px solid var(--kertas);
}
/* Bilah aksi lekat halaman produk menempati dasar layar sempit. */
@media (max-width: 949px) {
  /* Tombol "Tanya WEMA" (widget Rhalo) ikut naik di atas bilah itu. */
  body:has(.aksi-lekat) rhalo-obrolan { bottom: calc(5rem + env(safe-area-inset-bottom)) !important; }
  :root:is([data-ak-teks], [data-ak-spasi], [data-ak-disleksia]) body:has(.aksi-lekat) rhalo-obrolan { bottom: 16px !important; }
  body:has(.aksi-lekat) .ak-tombol { bottom: calc(5rem + env(safe-area-inset-bottom)); }
  body:has(.aksi-lekat) .ak-panel {
    bottom: calc(9.2rem + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 10.2rem - env(safe-area-inset-bottom));
  }
}

.ak-panel {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 64px);
  z-index: 61;
  width: min(368px, calc(100vw - 32px));
  max-height: calc(100dvh - 7rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 16px 24px;
  /* Ukuran dalam px: panel tidak ikut membesar oleh setelan teks. */
  font-size: 16px;
  line-height: 1.5;
  background: var(--kertas);
  color: var(--tinta);
  border: 1px solid var(--garis-tegas);
  border-radius: var(--sudut-besar);
  box-shadow: var(--bayang-naik);
}
.ak-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ak-kepala h2 { margin: 0; font-size: var(--t-lg); }
.ak-tutup {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -0.4rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}
.ak-tutup:hover { background: var(--cekung); }
.ak-ket { margin: 8px 0 16px; font-size: 14px; color: var(--redup); }
.ak-ket kbd {
  padding: 0.05em 0.4em;
  border: 1px solid var(--garis-tegas);
  border-radius: 5px;
  font: inherit;
  font-size: 0.92em;
}
.ak-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.ak-pilihan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 99px;
  padding: 12px 8px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--kertas-2);
  color: var(--tinta);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25 !important;
  text-align: center;
  cursor: pointer;
}
.ak-pilihan svg { color: var(--aksen); }
.ak-pilihan:hover { border-color: var(--aksen); }
.ak-pilihan:focus-visible { outline: 3px solid var(--aksen); outline-offset: 2px; }
.ak-pilihan[aria-pressed="true"] {
  background: var(--aksen);
  border-color: var(--aksen);
  color: #fff;
}
.ak-pilihan[aria-pressed="true"] svg { color: currentColor; }
.ak-keadaan { font-weight: 400; opacity: 0.85; }
.ak-titik { display: flex; gap: 4px; }
.ak-titik i { width: 14px; height: 4px; border-radius: 2px; background: currentColor; opacity: 0.25; }
.ak-titik i.nyala { opacity: 1; }
.ak-ulang { width: 100%; margin-top: 16px; justify-content: center; font-size: 13px; padding: 8px 14px; min-height: 40px; }

/* ---------- Kontras tinggi ---------- */
:root[data-ak-kontras] {
  --tinta: #000; --tinta-2: #000; --redup: #1a1a1a; --samar: #333;
  --kertas: #fff; --kertas-2: #fff; --cekung: #f2f2f2;
  --garis: #000; --garis-tegas: #000;
  --aksen: #00007a; --aksen-lembut: #fff; --aksen-kuat: #000046;
  --tindakan: #a30000; --tindakan-hover: #700000; --tindakan-lembut: #fff;
  --hias: #000; --hias-lembut: #fff; --hias-garis: #000;
  --baik: #004d26; --awas: #5c3a00;
  --bidang: #000; --bidang-teks: #fff; --bidang-redup: #fff; --bidang-garis: #fff;
  --bayang: none; --bayang-naik: 0 0 0 2px #000;
}
@media (prefers-color-scheme: dark) {
  :root[data-ak-kontras]:not([data-theme="light"]) {
    --tinta: #fff; --tinta-2: #fff; --redup: #f0f0f0; --samar: #ddd;
    --kertas: #000; --kertas-2: #000; --cekung: #111;
    --garis: #fff; --garis-tegas: #fff;
    --aksen: #ffe94d; --aksen-lembut: #000; --aksen-kuat: #fff27a;
    --tindakan: #ff8a8a; --tindakan-hover: #ffb3b3; --tindakan-lembut: #000;
    --hias: #fff; --hias-lembut: #000; --hias-garis: #fff;
    --baik: #7dffb8; --awas: #ffd36b;
    --bidang: #000; --bidang-teks: #fff; --bidang-redup: #fff; --bidang-garis: #fff;
    --bayang: none; --bayang-naik: 0 0 0 2px #fff;
  }
}
:root[data-ak-kontras] a:not(.tbl):not(.ak-tombol) { text-decoration: underline; }
/* Di mode gelap aksennya kuning terang: teks di atasnya harus gelap. */
:root[data-ak-kontras] .ak-tombol,
:root[data-ak-kontras] .ak-pilihan[aria-pressed="true"] { color: var(--kertas); }

/* ---------- Ukuran teks ----------
   Ukuran huruf dan jarak memakai rem, jadi cukup ukuran dasar
   <html> yang dinaikkan. */
:root[data-ak-teks="1"] { font-size: 115%; }
:root[data-ak-teks="2"] { font-size: 130%; }
:root[data-ak-teks="3"] { font-size: 150%; }

/* Pada teks 150% kata panjang seperti "Pemberitahuan" di judul tidak
   muat selebar HP; dipatah supaya halaman tidak menggulir mendatar. */
:root[data-ak-teks] :is(h1, h2, h3) { overflow-wrap: anywhere; hyphens: auto; }
:root[data-ak-teks] body { overflow-wrap: anywhere; }
/* Teks besar, spasi lebar, dan huruf disleksia membuat label yang
   dipaksa satu baris (tombol, kepala panel produk) lebih lebar dari HP.
   Selama setelan itu menyala, semuanya boleh membungkus. Pengaman
   terakhirnya overflow-x: clip, supaya sisa luapan tidak memperlebar
   layar dan tombol aksesibilitas tidak pernah terdorong ke luar. */
:root:is([data-ak-teks], [data-ak-spasi], [data-ak-disleksia]) body :not(pre, pre *, .hanya-pembaca-layar, .ak *) {
  white-space: normal !important;
}
:root:is([data-ak-teks], [data-ak-spasi], [data-ak-disleksia]) .produk-panel-kepala { flex-wrap: wrap; }
:root[data-ak-teks] .tbl { overflow-wrap: normal; }
/* Butir flex dan grid tidak mau menyempit di bawah lebar isinya
   (min-width: auto); dengan huruf besar itu yang mendorongnya lewat tepi. */
:root:is([data-ak-teks], [data-ak-spasi], [data-ak-disleksia]) body :not(svg, svg *, img) { min-width: 0 !important; }
:root:is([data-ak-teks], [data-ak-spasi], [data-ak-disleksia]) .tbl { max-width: 100%; }
:root .ak-kepala h2 {
  overflow-wrap: normal !important;
  hyphens: none;
  letter-spacing: normal !important;
  font-size: 19px;
  line-height: 1.3 !important;
}
/* Bilah aksi lekat halaman produk akan menutup separuh layar HP
   bila hurufnya membesar; selama itu ia ikut mengalir di halaman. */
@media (max-width: 949px) {
  :root:is([data-ak-teks], [data-ak-spasi], [data-ak-disleksia]) .aksi-lekat {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    box-shadow: none;
    border: 0;
    padding-inline: 0;
  }
  :root:is([data-ak-teks], [data-ak-spasi], [data-ak-disleksia]) .produk-baris { padding-bottom: 0; }
  :root:is([data-ak-teks], [data-ak-spasi], [data-ak-disleksia]) body:has(.aksi-lekat) .kaki { padding-bottom: 0; }
  :root:is([data-ak-teks], [data-ak-spasi], [data-ak-disleksia]) body:has(.aksi-lekat) .ak-tombol { bottom: max(1rem, env(safe-area-inset-bottom)); }
  :root:is([data-ak-teks], [data-ak-spasi], [data-ak-disleksia]) body:has(.aksi-lekat) .ak-panel { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 64px); max-height: calc(100dvh - 7rem); }
}
:root:is([data-ak-teks], [data-ak-spasi], [data-ak-disleksia]),
:root:is([data-ak-teks], [data-ak-spasi], [data-ak-disleksia]) body { overflow-x: clip; }
/* Kolom kaki halaman berpatokan px; ikut membesar bersama teks. */
:root[data-ak-teks] .kaki-menu { grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }

/* ---------- Spasi teks: angka WCAG 1.4.12 ---------- */
:root[data-ak-spasi] body :not(.ak, .ak *, svg, svg *) {
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
:root[data-ak-spasi] main p { margin-bottom: 2em; }

/* ---------- Tinggi garis ---------- */
:root[data-ak-garis="1"] body :not(.ak, .ak *, svg, svg *) { line-height: 1.8 !important; }
:root[data-ak-garis="2"] body :not(.ak, .ak *, svg, svg *) { line-height: 2 !important; }

/* ---------- Ramah disleksia ---------- */
:root[data-ak-disleksia] {
  --f-judul: "OpenDyslexic", ui-sans-serif, system-ui, sans-serif;
  --f-teks: "OpenDyslexic", ui-sans-serif, system-ui, sans-serif;
}
:root[data-ak-disleksia] body,
:root[data-ak-disleksia] body :is(button, input, select, textarea) { font-family: var(--f-teks); }
/* Panel kendali tetap berukuran dan berhuruf sama apa pun setelannya,
   supaya selalu bisa dipakai untuk mengembalikan tampilan. */
:root .ak-panel, :root .ak-panel :is(button, h2, p, kbd, span) { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important; }

/* ---------- Jeda animasi ---------- */
:root[data-ak-diam] { scroll-behavior: auto !important; }
:root[data-ak-diam] *,
:root[data-ak-diam] *::before,
:root[data-ak-diam] *::after {
  animation: none !important;
  transition: none !important;
}
:root[data-ak-diam]::view-transition-old(*),
:root[data-ak-diam]::view-transition-new(*),
:root[data-ak-diam]::view-transition-group(*) { animation: none !important; }
/* Isi yang belum sempat tersingkap langsung tampil. */
:root[data-ak-diam] .singkap,
:root[data-ak-diam] .singkap-runtun > * { opacity: 1 !important; transform: none !important; }

/* ---------- Sembunyikan gambar ----------
   Lewat opacity, bukan display atau visibility, supaya teks
   alternatifnya tetap dibacakan pembaca layar. Logo di kop dan
   kaki tetap tampil karena berada di luar <main>. */
:root[data-ak-gambar] main img,
:root[data-ak-gambar] main video { opacity: 0 !important; }
:root[data-ak-gambar] main picture,
:root[data-ak-gambar] main figure:has(img) { background: var(--cekung); }

/* ---------- Kursor besar ---------- */
:root[data-ak-kursor],
:root[data-ak-kursor] * { cursor: url("/assets/img/kursor-besar.svg") 6 3, auto !important; }
:root[data-ak-kursor] :is(a, button, label, summary, select, [role="button"]),
:root[data-ak-kursor] :is(a, button, label, summary, [role="button"]) * {
  cursor: url("/assets/img/kursor-tunjuk.svg") 17 4, pointer !important;
}

/* ---------- Sorot tautan ---------- */
:root[data-ak-tautan] a:not(.lompat-isi) {
  outline: 3px solid var(--tindakan) !important;
  outline-offset: 2px;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}
:root[data-ak-tautan] main a:not(.tbl) { background: #fff3a3; color: #000 !important; }

@media print { .ak { display: none !important; } }

/* =====================================================================
   40. Rombak November 2026: huruf baru, papan kurs, kepala produk

   Pemilik minta tampilan "modern, tidak template, kaya" (4 Nov 2026).
   Yang membuat versi Oktober terasa template: huruf Archivo/Public Sans
   yang dipakai di mana-mana, pita abu-abu yang sama di semua halaman
   produk, dan daftar bunga yang berupa tabel harga biasa.

   Ciri khas yang dipilih: PAPAN KURS. Tiap kantor BPR punya papan
   suku bunga di lobinya; angka bunga di situs ini ditampilkan dengan
   cara yang sama (ubin gelap, angka kunyit, sambungan lipat di
   tengah), dan ubin itu dipakai lagi di kepala halaman produk.
   Selebihnya dibuat tenang: warna kampanye (kunyit) untuk kredit,
   indigo logo untuk simpanan.
   ===================================================================== */

:root {
  --kunyit: #ffc21a;
  --kunyit-tua: #f39c12;
  --malam: #17184a;
  --malam-dalam: #0e0f33;
}

/* Judul: Bricolage Grotesque, rapat di ukuran besar. */
h1, h2, h3, .tbl { font-optical-sizing: auto; }
h1, h2 { letter-spacing: -0.025em; font-weight: 750; }

/* ---------- Papan kurs ---------- */
.papan-kurs {
  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 100% 0%, #2c2e7a 0%, var(--malam) 55%, var(--malam-dalam) 100%);
  color: #eef0ff;
  border: 0;
  border-radius: var(--sudut-besar);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 30px 60px -28px rgba(14, 15, 51, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.papan-kurs-kepala {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-judul);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kunyit);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-2);
  border-bottom: 1px dashed rgba(255, 194, 26, 0.35);
}
.papan-kurs-kepala span:first-child::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 0.6em;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.18);
  vertical-align: 1px;
}
.papan-kurs-kepala span:last-child { color: rgba(238, 240, 255, 0.6); }

.papan-kurs .daftar-bunga > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0.7rem 0;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.papan-kurs .daftar-bunga > div:last-child { border-bottom: 0 !important; }
.papan-kurs .daftar-bunga dt {
  color: #eef0ff;
  font-family: var(--f-judul);
  font-size: var(--t-md);
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.papan-kurs .daftar-bunga dt small {
  font-family: var(--f-teks);
  font-size: var(--t-xs);
  font-weight: 500;
  color: #ffb4a8;
}
.papan-kurs .daftar-bunga dd,
.papan-kurs .daftar-bunga > div:nth-child(n) dd { font-size: inherit; margin: 0; }
.papan-kurs .bunga-catatan {
  color: rgba(238, 240, 255, 0.62);
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
  margin-top: var(--s-3);
  padding-top: var(--s-4);
  border-left: 0;
  padding-left: 0;
}

/* Ubin angka: dipakai papan kurs dan kepala produk. */
.ubin-deret { display: inline-flex; align-items: center; gap: 4px; }
.ubin {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.05em;
  height: 1.42em;
  font-family: var(--f-judul);
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--kunyit);
  background: linear-gradient(180deg, #23246a 0 50%, #1a1b58 50% 100%);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 2px 0 rgba(0, 0, 0, 0.35);
}
/* Sambungan lipat di tengah ubin. */
.ubin::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.55);
}
.ubin-koma {
  font-family: var(--f-judul);
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  font-weight: 700;
  color: var(--kunyit);
  margin: 0 -1px;
  align-self: flex-end;
  line-height: 1.1;
}
.lewat-lps .ubin { color: #ffd2a6; }

@media (prefers-reduced-motion: no-preference) {
  .singkap .ubin { transform: rotateX(-90deg); opacity: 0.3; }
  .singkap.tampil .ubin {
    transform: none;
    opacity: 1;
    transition: transform 520ms cubic-bezier(0.2, 0.9, 0.25, 1.25), opacity 300ms ease;
  }
  .singkap.tampil .daftar-bunga > div:nth-child(2) .ubin { transition-delay: 60ms; }
  .singkap.tampil .daftar-bunga > div:nth-child(3) .ubin { transition-delay: 120ms; }
  .singkap.tampil .daftar-bunga > div:nth-child(4) .ubin { transition-delay: 180ms; }
  .singkap.tampil .daftar-bunga > div:nth-child(5) .ubin { transition-delay: 240ms; }
  .singkap.tampil .daftar-bunga > div:nth-child(6) .ubin { transition-delay: 300ms; }
  .singkap.tampil .daftar-bunga > div:nth-child(7) .ubin { transition-delay: 360ms; }
}

/* ---------- Kepala halaman produk ---------- */
.kepala-produk {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2rem, 6vw, 4.25rem);
}
.kepala-produk--kredit {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, 0.45) 0%, transparent 55%),
    linear-gradient(135deg, #ffd84a 0%, var(--kunyit) 45%, var(--kunyit-tua) 100%);
  color: var(--malam);
}
.kepala-produk--tabungan,
.kepala-produk--deposito {
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(120, 124, 230, 0.55) 0%, transparent 60%),
    linear-gradient(140deg, #4446a6 0%, #3e4095 40%, var(--malam) 100%);
  color: #f2f3ff;
}
.kepala-produk-baris {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .kepala-produk-baris { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); }
}
.kepala-produk-mata {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-judul);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
}
.kepala-produk--tabungan .kepala-produk-mata,
.kepala-produk--deposito .kepala-produk-mata { background: rgba(255, 255, 255, 0.12); }
.kepala-produk h1 {
  font-size: clamp(2.2rem, 5.6vw, 4.1rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: var(--s-4) 0 var(--s-3);
  color: inherit;
  max-width: 14ch;
}
.kepala-produk .kepala-ringkasan {
  font-size: var(--t-lg);
  color: inherit;
  opacity: 0.86;
  max-width: 40ch;
  margin: 0;
}
.kepala-produk .hero-tombol { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.kepala-produk--kredit .tbl--kedua { border-color: rgba(23, 24, 74, 0.35); color: var(--malam); background: rgba(255, 255, 255, 0.35); }
.kepala-produk--kredit .tbl--kedua:hover { background: #fff; border-color: #fff; color: var(--malam); }
.kepala-produk--tabungan .tbl--kedua,
.kepala-produk--deposito .tbl--kedua { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.kepala-produk--tabungan .tbl--kedua:hover,
.kepala-produk--deposito .tbl--kedua:hover { background: #fff; color: #3e4095; }

.kepala-produk-angka {
  position: relative;
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--sudut-besar);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 100% 0%, #2c2e7a 0%, var(--malam) 60%, var(--malam-dalam) 100%);
  color: #eef0ff;
  box-shadow: 0 30px 60px -30px rgba(14, 15, 51, 0.7);
  overflow: hidden;
  isolation: isolate;
}
.kpa-label {
  font-family: var(--f-judul);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kunyit);
}
.kpa-nilai { display: inline-flex; align-items: flex-end; gap: 6px; }
.kpa-nilai .ubin,
.kpa-nilai .ubin-koma { font-size: clamp(2.6rem, 6vw, 3.6rem); }
.kpa-persen {
  font-family: var(--f-judul);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  font-weight: 700;
  color: var(--kunyit);
  margin-left: 2px;
}
.kpa-nilai--teks {
  font-family: var(--f-judul);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--kunyit);
}
.kpa-satuan { font-size: var(--t-sm); color: rgba(238, 240, 255, 0.72); }
.kpa-ikon {
  position: absolute;
  right: -18px;
  bottom: -26px;
  z-index: -1;
  color: rgba(255, 255, 255, 0.07);
}
.kpa-ikon svg { width: 170px; height: 170px; stroke-width: 1.2; }

/* ---------- Beranda: pintu kredit dan panel produk berwarna ---------- */
.pintu-butir--kredit {
  background: linear-gradient(140deg, #ffd84a, var(--kunyit) 60%, var(--kunyit-tua));
  border-color: transparent;
  color: var(--malam);
}
.pintu-butir--kredit strong { color: var(--malam); }
.pintu-butir--kredit span:not(.pintu-ikon) { color: rgba(23, 24, 74, 0.78); }
.pintu-butir--kredit .pintu-ikon { background: rgba(255, 255, 255, 0.55); color: var(--malam); }

.produk-panel--kredit { border-top: 4px solid var(--kunyit); }
.produk-panel--simpanan { border-top: 4px solid var(--indigo); }

/* Isi halaman produk berjarak dari kepala berwarna. */
.kepala-produk + .produk-baris { margin-top: clamp(2rem, 5vw, 3.5rem); }
/* Brosur produk di kolom samping (audit lampiran 4 Nov 2026). */
.kotak-brosur {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding: var(--s-3);
  border: var(--tepi) solid var(--garis);
  border-radius: var(--sudut-besar);
  background: var(--kertas);
  text-decoration: none;
  color: var(--tinta);
  font-family: var(--f-judul);
  font-weight: 700;
  font-size: var(--t-sm);
}
.kotak-brosur img {
  width: 100%;
  height: auto;
  border-radius: var(--sudut);
}
.kotak-brosur:hover { border-color: var(--aksen); color: var(--aksen); }

/* =====================================================================
   41. Beranda "Lobi Bank WM" (4 Nov 2026, putaran kedua)

   Putaran pertama (papan kurs di satu bagian) masih dinilai "template
   banget". Sekarang seluruh beranda dibangun dari benda lobi kantor
   BPR: teks berjalan LED, papan balik raksasa yang berganti adegan,
   kalkulator yang menulis hasilnya di papan, dan dek produk mendatar.
   Warna latar ikut adegan: kunyit (Kredit 69), indigo (myWM),
   malam (deposito), merah (Tamasha). Semuanya warna kampanye Bank WM.
   ===================================================================== */

:root {
  --led: #ffb21a;
  --led-redup: rgba(255, 178, 26, 0.35);
  --ubin: #15164f;
  --ubin-bawah: #101142;
  --lengkung-pegas: cubic-bezier(0.2, 0.9, 0.25, 1.2);
}

/* ---------- Pita berjalan LED ---------- */
.pita-led {
  position: relative;
  overflow: hidden;
  background: #0b0c2a;
  color: var(--led);
  border-bottom: 1px solid #1d1e52;
}
/* Kisi titik LED di atas teks. */
.pita-led::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, transparent 0 1px, rgba(11, 12, 42, 0.55) 1.3px);
  background-size: 3px 3px;
}
.pita-led-jalur {
  display: flex;
  width: max-content;
  animation: pita-gulir 48s linear infinite;
}
.pita-led:hover .pita-led-jalur { animation-play-state: paused; }
.pita-led-isi { display: flex; flex: none; }
.pita-butir {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.62rem 1.6rem 0.62rem 0;
  font-family: var(--f-judul);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(255, 178, 26, 0.55);
}
.pita-butir::after { content: "◆"; font-size: 0.55em; color: #ff4b4f; text-shadow: 0 0 8px rgba(255, 75, 79, 0.7); }
@keyframes pita-gulir { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .pita-led-jalur { animation: none; overflow-x: auto; width: auto; }
  .pita-led-isi[aria-hidden="true"] { display: none; }
}
:root[data-ak-diam] .pita-led-jalur { animation: none; }

/* ---------- Papan balik (ubin) ---------- */
.papan-balik { display: inline-flex; gap: 0.08em; perspective: 600px; }
.keping {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 0.98em;
  height: 1.32em;
  border-radius: 0.1em;
  background: linear-gradient(180deg, var(--ubin) 0 50%, var(--ubin-bawah) 50% 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0.04em 0 rgba(0, 0, 0, 0.45),
    0 0.18em 0.4em -0.1em rgba(7, 8, 40, 0.55);
  color: var(--kunyit);
  font-family: var(--f-judul);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  overflow: hidden;
}
.keping::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: max(1px, 0.012em);
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}
.keping--kosong { background: linear-gradient(180deg, rgba(21, 22, 79, 0.35) 0 50%, rgba(16, 17, 66, 0.35) 50% 100%); box-shadow: none; }
.keping-isi { display: block; transform-origin: 50% 50%; backface-visibility: hidden; }
.keping.balik .keping-isi { animation: lipat 90ms ease-out; }
@keyframes lipat {
  from { transform: rotateX(-88deg); filter: brightness(1.6); }
  to { transform: rotateX(0deg); filter: none; }
}

/* ---------- Papan utama ---------- */
.lobi {
  --latar: #ffc21a;
  --teks: #17184a;
  --teks-redup: rgba(23, 24, 74, 0.78);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--teks);
  background: var(--latar);
  transition: background-color 700ms ease, color 400ms ease;
  padding-top: clamp(2rem, 6vw, 4.5rem);
}
.lobi[data-adegan="mywm"] { --latar: #34379a; --teks: #f4f5ff; --teks-redup: rgba(244, 245, 255, 0.8); }
.lobi[data-adegan="deposito"] { --latar: #13144a; --teks: #f4f5ff; --teks-redup: rgba(244, 245, 255, 0.78); }
.lobi[data-adegan="tamasha"] { --latar: #c8161c; --teks: #fff6f0; --teks-redup: rgba(255, 246, 240, 0.85); }
.lobi[data-adegan="deposito"] .keping,
.lobi[data-adegan="mywm"] .keping { --ubin: #0b0c33; --ubin-bawah: #07082a; }

/* Cahaya dan kisi titik di latar: lampu lobi, bukan gradasi polos. */
.lobi-latar {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 85% 30%, rgba(255, 255, 255, 0.35), transparent 70%),
    radial-gradient(45% 60% at 5% 100%, rgba(0, 0, 0, 0.16), transparent 70%);
}
.lobi-latar::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.09) 1px, transparent 1.4px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
}
.lobi[data-adegan="mywm"] .lobi-latar,
.lobi[data-adegan="deposito"] .lobi-latar { background: radial-gradient(60% 70% at 85% 30%, rgba(120, 124, 255, 0.35), transparent 70%); }
.lobi[data-adegan="mywm"] .lobi-latar::after,
.lobi[data-adegan="deposito"] .lobi-latar::after,
.lobi[data-adegan="tamasha"] .lobi-latar::after { background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.4px); }

.lobi-baris {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 960px) {
  .lobi-baris { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); min-height: min(68vh, 640px); }
}
.lobi-kiri { transition: opacity 180ms ease, transform 180ms ease; }
.lobi-kiri.ganti { opacity: 0.25; transform: translateY(6px); }
.lobi-kiri.ganti .lobi-papan { opacity: 1; }

.lobi-mata {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--s-5);
  font-family: var(--f-judul);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lobi-lampu {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #22d36b;
  box-shadow: 0 0 0 4px rgba(34, 211, 107, 0.25), 0 0 14px #22d36b;
  animation: lampu 1.6s ease-in-out infinite;
}
@keyframes lampu { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .lobi-lampu { animation: none; } }

.lobi-papan { position: relative; }
.papan--raksasa { font-size: min(15.5vw, 8.6rem); }
.lobi-judul {
  margin: var(--s-5) 0 var(--s-3);
  font-family: var(--f-judul);
  font-size: clamp(1.45rem, 3.2vw, 2.35rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.08;
  max-width: 22ch;
  text-wrap: balance;
}
.lobi-teks { margin: 0; max-width: 52ch; color: var(--teks-redup); font-size: var(--t-md); text-wrap: pretty; }
.lobi .hero-tombol { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.lobi .tbl--kedua { color: var(--teks); border-color: currentColor; background: transparent; }
.lobi .tbl--kedua:hover { background: var(--teks); color: var(--latar); border-color: var(--teks); }

/* Gambar kampanye: bertumpuk, berganti dengan pudar dan sedikit putar. */
.lobi-kanan { position: relative; display: grid; justify-items: center; align-items: end; min-height: 260px; }
.lobi-gambar {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(24px) rotate(-3deg) scale(0.96);
  transition: opacity 500ms ease, transform 700ms var(--lengkung-pegas);
}
.lobi-gambar.aktif { opacity: 1; transform: none; }
.lobi-gambar .adegan-foto img {
  display: block;
  width: min(100%, 440px);
  height: auto;
  max-height: 520px;
  object-fit: cover;
  border-radius: 28px 28px 28px 6px;
  box-shadow: 0 40px 70px -30px rgba(10, 11, 46, 0.6);
}
.lobi-gambar .adegan-foto--lepas img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35)); }
@media (max-width: 959px) {
  .lobi-kanan { min-height: 0; }
  .lobi-gambar .adegan-foto img { width: min(78vw, 360px); max-height: 300px; }
}

/* Pemilih adegan: empat tab di dasar papan, dengan garis waktu. */
.lobi-adegan {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: var(--s-3);
  list-style: none;
  margin: clamp(1.5rem, 4vw, 2.75rem) auto 0;
  padding-bottom: clamp(1rem, 3vw, 1.75rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.lobi-adegan::-webkit-scrollbar { display: none; }
.lobi-adegan template { display: none; }
.lobi-pilih {
  position: relative;
  display: grid;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 0.8rem 1rem 1rem;
  min-height: 64px;
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--teks) 9%, transparent);
  color: var(--teks);
  cursor: pointer;
  overflow: hidden;
  transition: background-color 200ms ease, transform 160ms ease;
}
.lobi-pilih:hover { background: color-mix(in srgb, var(--teks) 15%, transparent); }
.lobi-pilih:active { transform: scale(0.98); }
.lobi-pilih.aktif { background: var(--teks); color: var(--latar); }
.lobi-pilih-angka { font-family: var(--f-judul); font-weight: 750; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.lobi-pilih-nama { font-size: var(--t-xs); font-weight: 600; opacity: 0.8; }
.lobi-pilih-garis { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; opacity: 0.6; }
.lobi--jalan .lobi-pilih.aktif .lobi-pilih-garis { animation: garis-waktu 6500ms linear forwards; }
@keyframes garis-waktu { to { transform: scaleX(1); } }
/* Tanpa skrip, tab tetap tampil sebagai daftar sorotan statis. */
.lobi:not(.lobi--hidup) .lobi-pilih { cursor: default; }

/* ---------- Kalkulator deposito ---------- */
.hitung {
  padding-block: clamp(3.5rem, 9vw, 7rem);
  background:
    radial-gradient(50% 60% at 100% 0%, rgba(62, 64, 149, 0.10), transparent 70%),
    var(--kertas);
}
.hitung-baris { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 960px) { .hitung-baris { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.hitung h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1; letter-spacing: -0.035em; margin: var(--s-3) 0 var(--s-4); max-width: 16ch; text-wrap: balance; }
.hitung-pengantar { color: var(--redup); max-width: 44ch; margin: 0 0 var(--s-6); }
.hitung-label { display: block; font-family: var(--f-judul); font-size: var(--t-sm); font-weight: 700; color: var(--redup); margin-bottom: var(--s-2); }
.hitung-nominal { display: block; font-family: var(--f-judul); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--tinta); margin-bottom: var(--s-3); }
.hitung-form input[type="range"] {
  --isi: 2%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  cursor: pointer;
}
.hitung-form input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--kunyit-tua), var(--kunyit) var(--isi), var(--cekung) var(--isi));
}
.hitung-form input[type="range"]::-moz-range-track { height: 10px; border-radius: 99px; background: var(--cekung); }
.hitung-form input[type="range"]::-moz-range-progress { height: 10px; border-radius: 99px; background: var(--kunyit); }
.hitung-form input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px; height: 30px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--malam);
  border: 4px solid var(--kunyit);
  box-shadow: 0 6px 16px rgba(23, 24, 74, 0.35);
  transition: transform 150ms ease;
}
.hitung-form input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.hitung-form input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--malam); border: 4px solid var(--kunyit); }
.hitung-batas { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--samar); margin-top: -4px; }
.hitung-tenor { border: 0; margin: var(--s-6) 0 0; padding: 0; }
.hitung-chip { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hitung-chip label { position: relative; }
.hitung-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.hitung-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.05rem;
  border-radius: 999px;
  border: 1.5px solid var(--garis-tegas);
  font-family: var(--f-judul);
  font-weight: 700;
  font-size: var(--t-sm);
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.hitung-chip input:hover + span { border-color: var(--aksen); }
.hitung-chip input:checked + span { background: var(--malam); color: var(--kunyit); border-color: var(--malam); transform: translateY(-1px); }
.hitung-chip input:focus-visible + span { outline: 3px solid var(--aksen); outline-offset: 2px; }

.papan-kotak {
  position: relative;
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
  border-radius: 28px;
  color: #eef0ff;
  background:
    radial-gradient(90% 70% at 100% 0%, #2d2f84 0%, transparent 60%),
    linear-gradient(160deg, #1b1c5c, #0d0e33);
  box-shadow: 0 50px 80px -40px rgba(13, 14, 51, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.papan-kotak::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.4px);
  background-size: 16px 16px;
  pointer-events: none;
}
.papan-kotak-kepala {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-judul);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kunyit);
  padding-bottom: var(--s-4);
  border-bottom: 1px dashed rgba(255, 194, 26, 0.3);
}
.papan-kotak-angka { position: relative; display: flex; align-items: center; gap: 0.4rem; padding: var(--s-6) 0 var(--s-5); }
.papan-rp { font-family: var(--f-judul); font-weight: 750; color: var(--kunyit); font-size: clamp(1.1rem, 2.4vw, 1.6rem); align-self: flex-start; margin-top: 0.4em; }
.papan--hitung { font-size: clamp(1.45rem, 4.4vw, 2.75rem); }
.papan-kotak-rinci { position: relative; display: grid; gap: var(--s-3); margin: 0; }
.papan-kotak-rinci div { display: flex; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-3); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.papan-kotak-rinci dt { color: rgba(238, 240, 255, 0.7); font-size: var(--t-sm); }
.papan-kotak-rinci dd { margin: 0; font-family: var(--f-judul); font-weight: 750; font-variant-numeric: tabular-nums; }
.papan-kotak-lps { position: relative; margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-radius: 12px; background: rgba(255, 120, 100, 0.14); color: #ffd0c6; font-size: var(--t-sm); }
.papan-kotak-tombol { position: relative; margin-top: var(--s-6); }
.papan-kotak-tombol .tbl { width: 100%; }
.hitung-catatan { margin: var(--s-4) 0 0; font-size: var(--t-xs); color: var(--samar); max-width: 60ch; }

/* ---------- Dek produk ---------- */
.dek { padding-block: clamp(3.5rem, 8vw, 6rem); background: var(--cekung); overflow: hidden; }
.dek-kepala { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.dek-kepala h2 { margin: 0; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1; letter-spacing: -0.035em; max-width: 14ch; }
.dek-saring, .dek-geser { display: flex; gap: var(--s-2); }
.dek-saring[hidden], .dek-geser[hidden] { display: none; }
.dek-saring button, .dek-geser button {
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--garis-tegas);
  background: var(--kertas);
  color: var(--tinta);
  font-family: var(--f-judul);
  font-weight: 700;
  font-size: var(--t-sm);
  cursor: pointer;
}
.dek-geser button { width: 44px; padding: 0; font-size: 1.1rem; }
.dek-saring button[aria-pressed="true"] { background: var(--malam); color: var(--kunyit); border-color: var(--malam); }
.dek-jalur {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(1rem, calc((100vw - var(--lebar)) / 2));
  padding: 8px max(1rem, calc((100vw - var(--lebar)) / 2)) 28px;
  scrollbar-width: none;
}
.dek-jalur::-webkit-scrollbar { display: none; }
.dek-kartu {
  position: relative;
  flex: 0 0 clamp(250px, 72vw, 300px);
  min-height: 380px;
  display: flex;
  flex-direction: column;
  padding: 1.4rem;
  border-radius: 26px;
  scroll-snap-align: start;
  text-decoration: none;
  color: #f4f5ff;
  background: linear-gradient(165deg, #3e4095, #23255c);
  box-shadow: 0 24px 40px -28px rgba(23, 24, 74, 0.7);
  overflow: hidden;
  isolation: isolate;
  transition: transform 300ms var(--lengkung-pegas), box-shadow 300ms ease;
}
.dek-kartu[hidden] { display: none; }
.dek-kartu--kredit { background: linear-gradient(165deg, #ffd84a, #ffc21a 55%, #f39c12); color: var(--malam); }
.dek-kartu--semua { background: var(--kertas); color: var(--tinta); border: 2px dashed var(--garis-tegas); box-shadow: none; justify-content: center; }
.dek-kartu:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 40px 60px -30px rgba(23, 24, 74, 0.75); }
.dek-kartu:active { transform: translateY(-4px) scale(0.99); }
.dek-ikon { position: absolute; right: -24px; top: -24px; z-index: -1; opacity: 0.16; }
.dek-ikon svg { width: 170px; height: 170px; stroke-width: 1.2; }
.dek-kat { font-family: var(--f-judul); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.dek-nama { margin-top: var(--s-2); font-family: var(--f-judul); font-size: 1.6rem; line-height: 1.05; letter-spacing: -0.02em; }
.dek-angka { margin-top: auto; padding-top: var(--s-6); font-family: var(--f-judul); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3rem); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.dek-satuan { font-size: var(--t-sm); opacity: 0.8; }
.dek-tagline { margin-top: var(--s-3); font-size: var(--t-sm); opacity: 0.85; line-height: 1.4; }
.dek-panah {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--kunyit);
  color: var(--malam);
  font-size: 1.1rem;
  font-weight: 700;
  transition: transform 250ms var(--lengkung-pegas);
}
.dek-kartu--kredit .dek-panah { background: var(--malam); color: var(--kunyit); }
.dek-kartu--semua .dek-panah { background: var(--malam); color: var(--kunyit); }
.dek-kartu:hover .dek-panah { transform: translateX(4px) rotate(-45deg); }
.dek-tagline { padding-right: 48px; }

/* Kolom tunggal di HP: kunci lebar supaya isi tidak mendorong halaman melebar. */
.lobi-baris, .hitung-baris { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .lobi-baris { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .hitung-baris { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}
/* Papan raksasa mengikuti lebar kolomnya, bukan lebar layar. */
.lobi-papan { container-type: inline-size; }
.papan--raksasa { font-size: min(17.5cqi, 7.4rem); }
.keping { width: 1.04em; }
.papan-kotak-angka { container-type: inline-size; }
.papan--hitung { font-size: min(7.4cqi, 2.6rem); }
.papan--hitung .keping { height: 1.4em; }
@media (min-width: 960px) {
  .lobi { padding-top: clamp(1.5rem, 3.5vw, 2.75rem); }
  .lobi-baris { min-height: min(58vh, 540px); }
}
@media (max-width: 959px) {
  .lobi-gambar .adegan-foto img { width: auto; max-width: 78vw; max-height: 230px; }
  .lobi .hero-tombol { margin-top: var(--s-5); }
}

/* =====================================================================
   42. Putaran ketiga (5 Nov 2026): pola InfoChoice, SoFi, Betterment

   - Ubin kategori menumpang di tepi bawah papan (InfoChoice, SoFi).
   - Angka kepercayaan besar + cap OJK/LPS (SoFi, pita "As seen on").
   - Blok myWM dengan kode QR (SoFi).
   - Direktori produk tiga kolom dengan badge angka (Betterment).
   - Angka acuan bunga penjaminan LPS (InfoChoice "RBA cash rate").
   - Judul dua warna: bagian kedua kalimat diberi warna (SoFi).
   ===================================================================== */

/* ---------- Ubin kategori di tepi papan ---------- */
.lobi { padding-bottom: clamp(3.5rem, 8vw, 5.5rem); }
.pintu-tepi { position: relative; z-index: 3; margin-top: calc(-1 * clamp(2.6rem, 6vw, 3.6rem)); }
.pintu-tepi-kisi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  padding-block: 0;
}
@media (min-width: 720px) { .pintu-tepi-kisi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pintu-tepi-kisi { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.pintu-ubin {
  display: grid;
  justify-items: start;
  gap: 2px;
  height: 100%;
  padding: 1rem 1rem 1.05rem;
  border-radius: 18px;
  background: var(--kertas);
  color: var(--tinta);
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(23, 24, 74, 0.04), 0 18px 34px -22px rgba(23, 24, 74, 0.45);
  transition: transform 220ms var(--lengkung-pegas), box-shadow 220ms ease;
}
.pintu-ubin:hover { transform: translateY(-4px); box-shadow: 0 26px 40px -24px rgba(23, 24, 74, 0.55); }
.pintu-ubin:active { transform: translateY(-1px) scale(0.99); }
.pintu-ubin-ikon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 0.55rem;
  border-radius: 12px;
  background: var(--aksen-lembut);
  color: var(--indigo);
}
.pintu-ubin--kredit .pintu-ubin-ikon { background: #fff2c4; color: #9a6608; }
.pintu-ubin--pengaduan .pintu-ubin-ikon { background: var(--tindakan-lembut); color: var(--tindakan); }
.pintu-ubin strong { font-family: var(--f-judul); font-size: 1rem; font-weight: 700; }
.pintu-ubin span:last-child { font-size: var(--t-xs); color: var(--redup); }

/* ---------- Judul dua warna ---------- */
.percaya-judul span, .direktori-judul span, .mywm h2 span, .acuan h2 span { color: var(--indigo); }
.mywm h2 span { color: var(--kunyit); }

/* ---------- Angka kepercayaan ---------- */
.percaya { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.percaya-judul {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.percaya-angka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2.5rem);
  margin: clamp(2rem, 5vw, 3.25rem) 0 0;
}
@media (min-width: 900px) { .percaya-angka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.percaya-angka div { border-top: 2px solid var(--tinta); padding-top: var(--s-4); }
.percaya-angka dd {
  margin: 0;
  font-family: var(--f-judul);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--indigo);
}
.percaya-angka dt { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--redup); }
.percaya-izin {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  list-style: none;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: var(--s-4) var(--s-5);
  border-radius: 16px;
  background: var(--cekung);
  font-size: var(--t-sm);
  font-weight: 600;
}
.percaya-izin li { display: inline-flex; align-items: center; gap: 0.6rem; }
.percaya-cap {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--baik);
  color: #fff;
  font-family: var(--f-judul);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* ---------- Direktori produk ---------- */
section.direktori {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(255, 194, 26, 0.18), transparent 70%),
    linear-gradient(160deg, #2a2c7c, var(--malam) 70%);
  color: #f4f5ff;
}
.direktori-judul { margin: 0 0 clamp(2rem, 5vw, 3rem); max-width: 18ch; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1; letter-spacing: -0.035em; color: #fff; }
.direktori-judul span { color: var(--kunyit); }
.direktori-kolom { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 960px) { .direktori-kolom { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
section.direktori h3 { margin: 0 0 var(--s-2); font-size: 1.35rem; color: #fff; }
section.direktori ul { list-style: none; margin: 0; padding: 0; }
.dir-baris {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  gap: 0.9rem;
  align-items: center;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: inherit;
  text-decoration: none;
}
.dir-ikon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--indigo);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5);
  transition: transform 220ms var(--lengkung-pegas);
}
.dir-ikon--kredit { background: var(--kunyit); color: var(--malam); }
.dir-teks { display: grid; gap: 2px; }
.dir-teks strong { font-family: var(--f-judul); font-size: 1.02rem; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.dir-teks > span { font-size: var(--t-sm); color: rgba(244, 245, 255, 0.72); line-height: 1.35; }
.dir-badge {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 194, 26, 0.18);
  color: var(--kunyit);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dir-panah { color: rgba(255, 255, 255, 0.5); transition: transform 200ms ease, color 200ms ease; }
.dir-baris:hover .dir-panah { color: var(--kunyit); transform: translate(2px, -2px); }
.dir-baris:hover .dir-ikon { transform: rotate(-6deg) scale(1.06); }
.direktori-catatan { margin: var(--s-6) 0 0; font-size: var(--t-xs); color: rgba(244, 245, 255, 0.6); }

/* ---------- myWM dengan QR ---------- */
.mywm {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(45% 60% at 20% 50%, rgba(255, 255, 255, 0.18), transparent 70%),
    linear-gradient(135deg, #3e4095, #2e3078);
  color: #fff;
}
.mywm::before {
  content: "";
  position: absolute;
  left: -40px; top: -40px;
  width: 340px; height: 340px;
  background-image: radial-gradient(rgba(255, 194, 26, 0.5) 1.6px, transparent 2px);
  background-size: 16px 16px;
  mask-image: linear-gradient(135deg, #000, transparent 70%);
}
.mywm-baris { position: relative; display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .mywm-baris { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.mywm-foto { display: grid; justify-items: center; }
.mywm-ponsel img { width: min(70vw, 360px); height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35)); }
.mywm .mata-warna { color: var(--kunyit); }
.mywm h2 { margin: var(--s-3) 0 var(--s-5); font-size: clamp(2.1rem, 5vw, 3.8rem); line-height: 0.98; letter-spacing: -0.04em; color: #fff; max-width: 13ch; }
.mywm-daftar { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: 0.55rem; font-size: var(--t-md); }
.mywm-daftar li { display: flex; gap: 0.7rem; align-items: baseline; }
.mywm-daftar li::before { content: "✓"; display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--kunyit); color: var(--malam); font-size: 0.8rem; font-weight: 800; }
.mywm-unduh { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.mywm-qr {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.4rem 0.7rem 0.7rem;
  border-radius: 999px 999px 999px 999px;
  background: #fff;
  color: var(--malam);
  text-decoration: none;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}
.mywm-qr img { width: 112px; height: 112px; border-radius: 50%; padding: 12px; background: #fff; border: 3px solid var(--kunyit); }
.mywm-qr span { display: grid; gap: 2px; max-width: 18ch; font-size: var(--t-sm); line-height: 1.3; }
.mywm-qr strong { font-family: var(--f-judul); font-size: 1.05rem; }
.mywm-tombol { display: none; }
.mywm-catatan { margin: var(--s-5) 0 0; font-size: var(--t-xs); color: rgba(255, 255, 255, 0.7); max-width: 60ch; }
/* Di HP, kode QR tidak berguna: pengunjung sudah memegang HP-nya. */
@media (max-width: 899px), (pointer: coarse) {
  .mywm-qr { display: none; }
  .mywm-tombol { display: inline-flex; }
}

/* ---------- Angka acuan LPS ---------- */
.acuan { padding-block: clamp(3rem, 7vw, 5rem); }
.acuan-kotak {
  position: relative;
  display: grid;
  gap: var(--s-6);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 28px;
  background: var(--cekung);
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .acuan-kotak { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .acuan-kotak::after {
    content: "";
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 42%;
    background: linear-gradient(160deg, #ffd84a, var(--kunyit) 55%, var(--kunyit-tua));
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
    z-index: 0;
  }
}
.acuan-teks, .acuan-angka { position: relative; z-index: 1; }
.acuan h2 { margin: var(--s-3) 0 var(--s-4); font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.08; letter-spacing: -0.03em; max-width: 20ch; }
.acuan-teks p { color: var(--redup); max-width: 56ch; }
.acuan .hero-tombol { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.acuan-angka { display: grid; justify-items: center; }
.papan--acuan { font-size: clamp(2.6rem, 6vw, 4.4rem); }

/* Perbaikan putaran ketiga. */
section.direktori .dir-teks strong { color: #fff; }
.pintu-ubin { position: relative; }
.pintu-ubin[data-luar]::after { position: absolute; top: 0.9rem; right: 1rem; margin: 0; }
.acuan-angka { container-type: inline-size; width: 100%; }
.papan--acuan { font-size: min(17cqi, 4.4rem); }

/* =====================================================================
   43. Ilustrasi 3D dari lembar GPT (5 Nov 2026)
   ===================================================================== */
.ilus { display: block; height: auto; max-width: 100%; }

/* Ubin kategori: gambar menyembul ke atas tepi ubin. */
.pintu-tepi { margin-top: calc(-1 * clamp(3rem, 7vw, 4.2rem)); }
.pintu-ubin { padding-top: 0.6rem; overflow: visible; }
.pintu-ubin-gambar { display: block; width: 72px; height: 72px; margin: -2.1rem 0 0.35rem -0.35rem; transition: transform 300ms var(--lengkung-pegas); }
.pintu-ubin:hover .pintu-ubin-gambar { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
@media (max-width: 719px) {
  .pintu-tepi-kisi { row-gap: 1.6rem; }
  .pintu-ubin-gambar { width: 64px; height: 64px; }
}

/* Kalkulator: brankas di samping judul. */
.hitung-kiri { position: relative; }
.hitung-brankas { position: absolute; right: 0; top: -1.5rem; width: clamp(84px, 11vw, 120px); transform: rotate(6deg); filter: drop-shadow(0 18px 20px rgba(23, 24, 74, 0.18)); }
@media (max-width: 599px) { .hitung-brankas { top: -2.5rem; width: 76px; } }

/* Angka acuan LPS: perisai di atas papan. */
.acuan-angka { gap: var(--s-2); }
.acuan-perisai { width: clamp(96px, 12vw, 150px); filter: drop-shadow(0 18px 22px rgba(23, 24, 74, 0.25)); }

/* Kepala produk: ilustrasi menyembul di pojok kartu angka. */
.kpa-ilus { position: absolute; right: -10px; bottom: -14px; width: clamp(110px, 14vw, 150px); transform: rotate(-6deg); z-index: -1; opacity: 0.95; }
.kepala-produk-angka { padding-right: clamp(5.5rem, 11vw, 9rem); }
.kpa-ilus { right: 14px; bottom: -4px; transform: rotate(-4deg); }

/* =====================================================================
   44. Layar pertama stabil + bagian bertumpuk (5 Nov 2026)

   Keluhan pemilik: tab adegan dan ubin bergambar ikut naik-turun saat
   adegan berganti, dan layar pertama tidak memuat sampai ubin. Sebab:
   panjang teks tiap adegan berbeda. Sekarang teks keempat adegan
   ditumpuk di satu sel (lihat lobi.js), dan layar pertama dikunci
   setinggi layar dikurangi kepala situs.
   ===================================================================== */

/* Tumpukan adegan: semua lapis di sel yang sama. */
.lobi-tumpuk { display: grid; }
.lobi-tumpuk > .lobi-lapis { grid-area: 1 / 1; }
.lobi-lapis { transition: opacity 260ms ease, transform 260ms ease; }
.lobi-lapis:not(.aktif) { visibility: hidden; opacity: 0; transform: translateY(6px); }
.lobi-mata .lobi-tumpuk { display: inline-grid; }

/* Layar pertama: pita + papan + ubin = satu layar. */
.layar-pertama {
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--tinggi-kop, 75px));
  min-height: 600px;
  max-height: 1000px;
}
.layar-pertama .lobi { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: clamp(1rem, 3svh, 2.25rem); padding-bottom: clamp(3rem, 7svh, 4.5rem); }
.layar-pertama .lobi-baris { flex: 1 1 auto; min-height: 0; }
@media (min-width: 960px) { .layar-pertama .lobi-baris { min-height: 0; align-items: center; } }
.layar-pertama .lobi-adegan { margin-top: clamp(0.75rem, 2.5svh, 1.75rem); padding-bottom: 0; }
.layar-pertama .papan--raksasa { font-size: min(17.5cqi, 7.4rem, 15svh); }
.layar-pertama .lobi-mata { margin-bottom: clamp(0.6rem, 2svh, 1.4rem); }
.layar-pertama .lobi-judul { margin-top: clamp(0.6rem, 2svh, 1.4rem); }
.layar-pertama .lobi .hero-tombol { margin-top: clamp(0.8rem, 2.4svh, 1.6rem); }
.layar-pertama .lobi-gambar .adegan-foto img { max-height: min(52svh, 480px); width: auto; }
.layar-pertama .pintu-tepi { flex: none; padding-bottom: clamp(0.75rem, 2svh, 1.25rem); }

/* HP: susunan ringkas supaya sampai ubin muat satu layar. */
@media (max-width: 719px) {
  .layar-pertama { min-height: 560px; }
  .pita-butir { padding-block: 0.5rem; font-size: 0.75rem; }
  .layar-pertama .lobi-kanan { display: none; }
  .layar-pertama .lobi-teks { display: none; }
  .layar-pertama .papan--raksasa { font-size: min(17.5cqi, 12svh); }
  .layar-pertama .lobi-judul { font-size: 1.35rem; }
  .layar-pertama .lobi .hero-tombol { flex-wrap: nowrap; gap: 0.5rem; }
  .layar-pertama .lobi .hero-tombol .tbl { padding: 0.7rem 1rem; min-height: 44px; font-size: 0.82rem; white-space: nowrap; }
  .layar-pertama .lobi-adegan { grid-auto-columns: minmax(118px, 1fr); }
  .layar-pertama .lobi-pilih { min-height: 54px; padding: 0.55rem 0.8rem 0.7rem; }
  .layar-pertama .lobi-pilih-angka { font-size: 1rem; }
  .layar-pertama .pintu-tepi { margin-top: -2.4rem; }
  .layar-pertama .pintu-tepi-kisi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; row-gap: 1.6rem; }
  .layar-pertama .pintu-ubin { padding: 0.35rem 0.5rem 0.6rem; justify-items: center; text-align: center; border-radius: 14px; }
  .layar-pertama .pintu-ubin-gambar { width: 52px; height: 52px; margin: -1.6rem 0 0.1rem; }
  .layar-pertama .pintu-ubin strong { font-size: 0.8rem; line-height: 1.15; }
  .layar-pertama .pintu-ubin span:last-child { display: none; }
  .layar-pertama .pintu-ubin[data-luar]::after { display: none; }
}

/* Gulir berhenti pas di awal bagian, dan bagian yang muat satu layar
   ditumpuk seperti kartu. Kelas dipasang lobi.js. */
html.gulir-pas { scroll-snap-type: y proximity; scroll-padding-top: var(--tinggi-kop, 75px); }
html.gulir-pas main > .layar-pertama,
html.gulir-pas main > section { scroll-snap-align: start; }
/* Semua bagian berposisi, supaya urutan lukis mengikuti urutan halaman:
   bagian lekat tidak lagi tergambar di atas bagian biasa sesudahnya. */
main > section, main > .layar-pertama { position: relative; }
main > .tumpuk { position: sticky; top: var(--tinggi-kop, 75px); }
main > .layar-pertama.tumpuk { z-index: 0; }
main > section.tumpuk,
main > .tumpuk + section { box-shadow: 0 -26px 40px -30px rgba(14, 15, 51, 0.35); }
main > .percaya, main > .acuan, main > .bagian-kabar { background: var(--kertas); }
main > .percaya { border-radius: 28px 28px 0 0; }
@media (prefers-reduced-motion: reduce) {
  html.gulir-pas { scroll-snap-type: none; }
}

/* HP: isi papan rapat ke atas, sisa ruang jatuh di atas tab adegan. */
@media (max-width: 959px) {
  .layar-pertama .lobi-baris { align-content: start; align-items: start; }
  .layar-pertama .lobi-adegan { margin-top: auto; }
}

/* =====================================================================
   45. Layar pertama tanpa tabrakan di semua ukuran (5 Nov 2026)

   Diukur dengan scripts/cek-layar-pertama.mjs di 11 ukuran layar.
   Sebelumnya 8 gagal: ubin bergambar menyembul ke tab adegan, teks
   papan menabrak tab di layar pendek (ukurannya mengikuti lebar, bukan
   tinggi), dan foto jatuh menutupi tab di tablet.

   Sekarang baris papan menjadi kontainer tinggi (container-type: size).
   Ukuran papan, judul, dan foto memakai cqh, jadi ikut ruang yang
   benar-benar tersedia. Paragraf baru disembunyikan kalau ruangnya
   memang terlalu pendek.
   ===================================================================== */
.layar-pertama .lobi-baris { container-type: size; container-name: papan-utama; }
.layar-pertama .papan--raksasa { font-size: min(17.5cqi, 7.4rem, 23cqh); }
.layar-pertama .lobi-mata { margin-bottom: min(1.4rem, 3cqh); font-size: min(var(--t-sm), 3.4cqh); }
.layar-pertama .lobi-judul { font-size: clamp(1.15rem, min(3.2vw, 7.5cqh), 2.35rem); margin-top: min(1.4rem, 3cqh); }
.layar-pertama .lobi .hero-tombol { margin-top: min(1.6rem, 3.5cqh); }
.layar-pertama .lobi-gambar .adegan-foto img { max-height: 94cqh; max-width: 100%; }
.layar-pertama .lobi-kanan { max-height: 100cqh; }
@container papan-utama (max-height: 470px) {
  .lobi-teks { display: none; }
}
@container papan-utama (max-height: 330px) {
  .lobi .hero-tombol .tbl--kedua { display: none; }
}

/* Ruang untuk ubin yang menumpang: tab adegan berhenti sebelum
   gambar ubin yang menyembul. */
.layar-pertama .lobi { padding-bottom: 5rem; }
.layar-pertama .pintu-tepi { margin-top: -2.4rem; }
.layar-pertama .pintu-ubin-gambar { margin-top: -2rem; }

/* Tablet: susunan satu kolom seperti HP, tanpa foto. */
@media (min-width: 720px) and (max-width: 959px) {
  .layar-pertama .lobi-kanan { display: none; }
}
@media (max-width: 719px) {
  .layar-pertama .lobi { padding-bottom: 4.4rem; }
  .layar-pertama .pintu-ubin-gambar { margin-top: -1.6rem; }
}

/* Mulai 960 px ubin satu baris (enam), supaya papan tetap punya ruang di layar 1024. */
@media (min-width: 960px) {
  .layar-pertama .pintu-tepi-kisi { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .layar-pertama .pintu-ubin span:last-child { overflow-wrap: anywhere; }
}

/* Bagian yang menumpuk wajib berlatar padat; tanpa ini bagian di bawahnya
   (mis. angka acuan LPS di bawah WMAGZ) tembus dan teksnya bercampur. */
main > section, main > .layar-pertama { background-color: var(--kertas); }

/* =====================================================================
   46. Navigasi samping lekat, QR myWM bermerek, peluncur WEMA
   ===================================================================== */

/* Navigasi samping halaman naratif: lekat di bawah kepala situs.
   Sebelumnya aturan sticky sudah ada tetapi tidak jalan, karena kolom
   samping meregang setinggi baris grid (align-self: stretch). */
@media (min-width: 980px) {
  .naratif--bertepi .naratif-tepi {
    align-self: start;
    position: sticky;
    top: calc(var(--tinggi-kop, 76px) + 1.5rem);
    max-height: calc(100vh - var(--tinggi-kop, 76px) - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
.tepi-daftar a[aria-current="location"] { color: var(--tinta); font-weight: 700; padding-left: 12px; position: relative; }
.tepi-daftar a[aria-current="location"]::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--aksen);
}

/* QR myWM bermerek: persegi, sudut penanda QR tidak boleh terpotong. */
.mywm-qr img { width: 124px; height: 124px; border-radius: 14px; padding: 6px; border: 0; background: #fff; }
.mywm-qr { border-radius: 24px; padding: 0.7rem 1.4rem 0.7rem 0.7rem; }

/* Tombol melayang (aksesibilitas kiri bawah, WEMA kanan bawah) tidak
   boleh menutupi ubin di layar pertama: sisakan jalur di bawah ubin. */
.layar-pertama .pintu-tepi { padding-bottom: 84px; }
@media (min-width: 1560px) { .layar-pertama .pintu-tepi { padding-bottom: clamp(0.75rem, 2svh, 1.25rem); } }

/* ---------- Mockup WEMA (pratinjau) ---------- */
.wema-mock { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; justify-items: end; gap: 10px; }
.wema-peluncur {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 56px; padding: 5px 1.1rem 5px 5px;
  border: 0; border-radius: 999px;
  background: var(--malam); color: #fff;
  font-family: var(--f-judul); font-weight: 700; font-size: 0.95rem;
  box-shadow: 0 14px 30px -12px rgba(14, 15, 51, 0.6);
  cursor: pointer;
  transition: transform 200ms var(--lengkung-pegas, ease);
}
.wema-peluncur:hover { transform: translateY(-2px); }
.wema-peluncur:active { transform: scale(0.97); }
.wema-wajah { position: relative; display: block; width: 46px; height: 46px; }
.wema-wajah img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--kunyit); }
/* Titik "aktif" dan cincin denyut. */
.wema-wajah::after {
  content: ""; position: absolute; right: 0; bottom: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #22d36b; border: 2px solid var(--malam);
}
.wema-wajah::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--kunyit); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .wema-wajah img { animation: wema-angguk 4.2s ease-in-out infinite; transform-origin: 50% 85%; }
  .wema-wajah::before { animation: wema-denyut 2.6s ease-out infinite; }
  .wema-peluncur:hover .wema-wajah img { animation: wema-lambai 700ms ease-in-out; }
}
:root[data-ak-diam] .wema-wajah img, :root[data-ak-diam] .wema-wajah::before { animation: none; }
@keyframes wema-angguk {
  0%, 70%, 100% { transform: rotate(0) translateY(0); }
  78% { transform: rotate(-6deg) translateY(-1px); }
  86% { transform: rotate(5deg) translateY(-2px); }
  93% { transform: rotate(-2deg) translateY(0); }
}
@keyframes wema-lambai { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-10deg) scale(1.06); } 60% { transform: rotate(8deg) scale(1.06); } }
@keyframes wema-denyut { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.45); opacity: 0; } }

.wema-sapa {
  margin: 0; max-width: 220px; padding: 0.7rem 0.95rem;
  border-radius: 16px 16px 4px 16px;
  background: #fff; color: var(--tinta);
  font-size: 0.88rem; font-weight: 600;
  box-shadow: 0 14px 30px -14px rgba(14, 15, 51, 0.45);
  opacity: 0; transform: translateY(8px) scale(0.96); pointer-events: none;
  transition: opacity 260ms ease, transform 320ms var(--lengkung-pegas, ease);
  cursor: pointer;
}
.wema-mock.menyapa .wema-sapa { opacity: 1; transform: none; pointer-events: auto; }

.wema-panel {
  width: min(340px, calc(100vw - 32px));
  border-radius: 22px; overflow: hidden;
  background: #fff; color: var(--tinta);
  box-shadow: 0 30px 60px -20px rgba(14, 15, 51, 0.55);
  transform-origin: 100% 100%;
}
.wema-mock.terbuka .wema-panel { animation: wema-muncul 260ms var(--lengkung-pegas, ease); }
@keyframes wema-muncul { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
.wema-panel-kepala { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; background: var(--malam); color: #fff; }
.wema-panel-kepala img { border-radius: 50%; border: 2px solid var(--kunyit); }
.wema-panel-kepala div { display: grid; flex: 1; }
.wema-panel-kepala strong { font-family: var(--f-judul); }
.wema-panel-kepala span { font-size: 0.8rem; opacity: 0.8; display: inline-flex; align-items: center; gap: 0.35rem; }
.wema-panel-kepala i { width: 8px; height: 8px; border-radius: 50%; background: #22d36b; display: inline-block; }
.wema-tutup { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; font-size: 1.4rem; cursor: pointer; }
.wema-panel-isi { display: grid; gap: 0.8rem; padding: 1rem; }
.wema-gelembung { margin: 0; padding: 0.75rem 0.9rem; border-radius: 4px 16px 16px 16px; background: var(--cekung); font-size: 0.92rem; }
.wema-pintas { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wema-pintas a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.85rem; border-radius: 999px; border: 1.5px solid var(--garis-tegas); color: var(--indigo); font-size: 0.85rem; font-weight: 700; text-decoration: none; }
.wema-pintas a:hover { border-color: var(--indigo); background: var(--aksen-lembut); }
.wema-catatan { margin: 0; font-size: 0.78rem; color: var(--redup); }
@media (max-width: 599px) {
  .wema-label { display: none; }
  .wema-peluncur { padding: 5px; min-height: 0; }
  .wema-sapa { max-width: 190px; }
}

/* Penyetelan sesudah jalur tombol melayang ditambahkan. */
.layar-pertama .pintu-tepi { padding-bottom: 76px; }
@media (min-width: 1560px) { .layar-pertama .pintu-tepi { padding-bottom: clamp(0.75rem, 2svh, 1.25rem); } }
.layar-pertama .lobi-gambar .adegan-foto img { max-height: 84cqh; }
@container papan-utama (max-height: 540px) { .lobi-teks { display: none; } }
@media (min-width: 960px) and (max-width: 1099px) {
  .layar-pertama .lobi-kanan { display: none; }
  .layar-pertama .lobi-baris { grid-template-columns: minmax(0, 1fr); }
}
/* Baris grid papan dikunci setinggi kontainernya, supaya foto tidak ikut
   memanjangkan baris dan menembus tab adegan. */
.layar-pertama .lobi-baris { grid-template-rows: minmax(0, 100%); }
.wema-panel-kepala strong { color: #fff; font-size: 1.05rem; }
/* Sapaan di atas tombol, tidak menutupi ubin: lebih sempit dan lebih tinggi. */
.wema-sapa { max-width: 190px; font-size: 0.85rem; }

/* =====================================================================
   47. Tombol WhatsApp (5 Nov 2026)
   Pemilik: "tampil WhatsApp banget, dinamis, menyatu, tidak kaku".
   Hijau WhatsApp dengan logonya, kilau yang lewat sesekali, dan
   balon kecil berdenyut. Semua tombol .tbl yang menuju wa.me ikut.
   ===================================================================== */
:root { --wa: #25d366; --wa-tua: #128c7e; --wa-gelap: #075e54; }

.kop-wa {
  position: relative;
  display: none;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  padding: 6px 1.05rem 6px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2fe07a, var(--wa) 45%, var(--wa-tua));
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 22px -12px rgba(18, 140, 126, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 220ms var(--lengkung-pegas, ease), box-shadow 220ms ease;
}
@media (min-width: 1060px) { .kop-wa { display: inline-flex; } }
.kop-wa:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(18, 140, 126, 0.95), inset 0 1px 0 rgba(255,255,255,0.35); color: #fff; }
.kop-wa:active { transform: scale(0.97); }
.kop-wa-ikon {
  position: relative;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--wa-tua);
}
.kop-wa-ikon .wa-ikon { width: 24px; height: 24px; }
/* Cincin denyut di sekitar ikon. */
.kop-wa-ikon::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85); opacity: 0;
}
.kop-wa-teks { display: grid; line-height: 1.1; }
.kop-wa-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; opacity: 0.92; }
.kop-wa-nomor { font-family: var(--f-judul); font-weight: 800; font-size: 1.08rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
/* Kilau yang lewat. */
.kop-wa::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg) translateX(0);
}
@media (prefers-reduced-motion: no-preference) {
  .kop-wa::before { animation: wa-kilau 5.5s ease-in-out infinite; }
  .kop-wa-ikon::after { animation: wa-denyut 2.8s ease-out infinite; }
  .kop-wa:hover .wa-ikon { animation: wa-goyang 600ms ease-in-out; }
}
:root[data-ak-diam] .kop-wa::before, :root[data-ak-diam] .kop-wa-ikon::after { animation: none; }
@keyframes wa-kilau { 0%, 70% { left: -40%; } 100% { left: 130%; } }
@keyframes wa-denyut { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes wa-goyang { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 60% { transform: rotate(10deg); } }

/* Tombol .tbl ke WhatsApp di mana pun. */
.tbl--wa,
a.tbl[href^="https://wa.me"] {
  background: linear-gradient(135deg, #2fe07a, var(--wa) 50%, var(--wa-tua));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 20px -14px rgba(18, 140, 126, 0.9);
}
.tbl--wa:hover,
a.tbl[href^="https://wa.me"]:hover { background: linear-gradient(135deg, var(--wa), var(--wa-tua)); border-color: transparent; color: #fff; }
.tbl--wa .wa-ikon { width: 20px; height: 20px; flex: none; }
a.tbl[href^="https://wa.me"]:not(.tbl--wa)::before {
  content: ""; width: 20px; height: 20px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27M16.04%203C9.06%203%203.4%208.6%203.4%2015.52c0%202.2.58%204.36%201.68%206.26L3.3%2028.3l6.7-1.74a12.7%2012.7%200%200%200%206.04%201.53h.01c6.97%200%2012.64-5.6%2012.64-12.52C28.68%208.6%2023.02%203%2016.04%203Zm0%2022.96h-.01a10.5%2010.5%200%200%201-5.34-1.45l-.38-.22-3.98%201.03%201.06-3.84-.25-.4a10.3%2010.3%200%200%201-1.6-5.55c0-5.75%204.72-10.43%2010.51-10.43%205.8%200%2010.51%204.68%2010.51%2010.43%200%205.76-4.72%2010.43-10.52%2010.43Zm5.77-7.8c-.32-.16-1.87-.92-2.16-1.02-.29-.11-.5-.16-.71.16-.21.31-.82%201.02-1%201.23-.19.2-.37.23-.69.08-.32-.16-1.33-.49-2.54-1.56-.94-.83-1.57-1.86-1.76-2.17-.18-.31-.02-.48.14-.64.14-.14.32-.37.48-.55.16-.19.21-.32.32-.53.1-.2.05-.39-.03-.55-.08-.15-.71-1.7-.98-2.33-.26-.61-.52-.53-.71-.54h-.6c-.21%200-.55.08-.84.39-.29.31-1.1%201.07-1.1%202.6%200%201.54%201.13%203.03%201.29%203.24.16.2%202.22%203.36%205.37%204.71.75.32%201.34.51%201.8.66.75.24%201.44.2%201.98.12.6-.09%201.87-.76%202.13-1.48.27-.73.27-1.35.19-1.48-.08-.13-.29-.2-.61-.36Z%27/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27M16.04%203C9.06%203%203.4%208.6%203.4%2015.52c0%202.2.58%204.36%201.68%206.26L3.3%2028.3l6.7-1.74a12.7%2012.7%200%200%200%206.04%201.53h.01c6.97%200%2012.64-5.6%2012.64-12.52C28.68%208.6%2023.02%203%2016.04%203Zm0%2022.96h-.01a10.5%2010.5%200%200%201-5.34-1.45l-.38-.22-3.98%201.03%201.06-3.84-.25-.4a10.3%2010.3%200%200%201-1.6-5.55c0-5.75%204.72-10.43%2010.51-10.43%205.8%200%2010.51%204.68%2010.51%2010.43%200%205.76-4.72%2010.43-10.52%2010.43Zm5.77-7.8c-.32-.16-1.87-.92-2.16-1.02-.29-.11-.5-.16-.71.16-.21.31-.82%201.02-1%201.23-.19.2-.37.23-.69.08-.32-.16-1.33-.49-2.54-1.56-.94-.83-1.57-1.86-1.76-2.17-.18-.31-.02-.48.14-.64.14-.14.32-.37.48-.55.16-.19.21-.32.32-.53.1-.2.05-.39-.03-.55-.08-.15-.71-1.7-.98-2.33-.26-.61-.52-.53-.71-.54h-.6c-.21%200-.55.08-.84.39-.29.31-1.1%201.07-1.1%202.6%200%201.54%201.13%203.03%201.29%203.24.16.2%202.22%203.36%205.37%204.71.75.32%201.34.51%201.8.66.75.24%201.44.2%201.98.12.6-.09%201.87-.76%202.13-1.48.27-.73.27-1.35.19-1.48-.08-.13-.29-.2-.61-.36Z%27/%3E%3C/svg%3E") center / contain no-repeat;
}
a.tbl[href^="https://wa.me"]::after { content: none !important; }

/* =====================================================================
   48. Tiap bagian beranda = satu layar (5 Nov 2026)

   Pemilik: halaman yang lekat per bagian harus muat satu layar, atau
   dipecah ke bagian berikutnya kalau memang tidak muat. Semua bagian
   beranda kini setinggi satu layar (dikurangi kepala situs), isinya di
   tengah, dan disusun ulang supaya muat:
     - kalkulator: ringkas, kolom isian nominal bebas;
     - direktori produk: baris satu garis, tab di layar sempit;
     - angka acuan LPS: kotak penuh satu layar;
     - kabar: empat kartu sejajar (HP: deret geser);
     - WMAGZ: sampul besar satu deret.
   Diukur dengan scripts/cek-bagian.mjs.
   ===================================================================== */
:root { --layar: calc(100svh - var(--tinggi-kop, 75px)); }

/* Pita LED dibuang: layar pertama tidak lagi menyisakan ruang untuknya. */
.pita-led { display: none; }

main > .percaya,
main > .hitung,
main > .direktori,
main > .mywm,
main > .acuan,
main > .dekat,
main > .bagian-kabar,
main > .bagian-majalah {
  min-height: var(--layar);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(1.5rem, 4svh, 3rem);
}
main > section > .wadah { width: 100%; }

/* ---------- Angka kepercayaan ---------- */
.percaya-judul { font-size: clamp(1.8rem, min(4.4vw, 6svh), 3.4rem); }
.percaya-angka { margin-top: clamp(1.25rem, 4svh, 3.25rem); }
.percaya-izin { margin-top: clamp(1.25rem, 4svh, 3rem); }

/* ---------- Kalkulator ---------- */
.hitung h2 { font-size: clamp(1.6rem, min(3.6vw, 5.5svh), 2.9rem); margin-bottom: var(--s-3); }
.hitung-pengantar { margin-bottom: clamp(0.75rem, 2.5svh, 1.5rem); }
.hitung-ketik {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.35rem 0.9rem;
  border: 2px solid var(--garis-tegas);
  border-radius: 16px;
  background: var(--kertas);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.hitung-ketik:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 4px var(--aksen-lembut); }
.hitung-ketik span {
  font-family: var(--f-judul);
  font-weight: 750;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  color: var(--redup);
}
.hitung-ketik input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--f-judul);
  font-weight: 750;
  font-size: clamp(1.6rem, min(4vw, 5svh), 2.5rem);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  padding: 0;
}
.hitung-ketik-ket { margin: 0.4rem 0 0.25rem; font-size: var(--t-xs); color: var(--samar); }
.hitung-ketik-ket.awas { color: var(--awas); font-weight: 600; }
.hitung-batas { margin-top: -6px; }
.hitung-tenor { margin-top: clamp(0.75rem, 2.5svh, 1.75rem); }
.hitung-chip span { min-height: 42px; padding: 0 0.9rem; }
.papan-kotak { padding: clamp(1rem, 3svh, 2rem); }
.papan-kotak-angka { padding: clamp(0.8rem, 3svh, 2rem) 0 clamp(0.6rem, 2svh, 1.4rem); }
.papan-kotak-tombol { margin-top: clamp(0.8rem, 2.5svh, 1.75rem); }
.hitung-catatan { margin-top: var(--s-3); }
@media (max-width: 959px) {
  .hitung-brankas { display: none; }
  .hitung-pengantar { display: none; }
  .hitung-baris { gap: 1rem; }
  .hitung-chip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .hitung-chip::-webkit-scrollbar { display: none; }
  .hitung-chip label { flex: none; }
  .papan-kotak-rinci div { padding-top: 0.45rem; }
  .papan-kotak-rinci dt { font-size: var(--t-xs); }
  .hitung-catatan { display: none; }
}

/* ---------- Direktori produk ---------- */
.direktori-judul { margin-bottom: clamp(1rem, 3svh, 2.25rem); font-size: clamp(1.7rem, min(4vw, 5.5svh), 3rem); }
.dir-baris { padding: clamp(0.4rem, 1.1svh, 0.7rem) 0; grid-template-columns: 38px minmax(0, 1fr) 18px; gap: 0.75rem; }
.dir-ikon { width: 38px; height: 38px; border-radius: 11px; }
.dir-ikon svg { width: 20px; height: 20px; }
.dir-teks > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
section.direktori h3 { margin-bottom: 0.25rem; }
.direktori-catatan { margin-top: var(--s-4); }
@media (max-height: 760px) and (min-width: 960px) {
  .dir-teks > span { display: none; }
}
.direktori-tab[hidden] { display: none; }
.direktori-tab {
  display: flex;
  gap: 0.4rem;
  margin-bottom: var(--s-4);
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow-x: auto;
  scrollbar-width: none;
}
.direktori-tab button {
  flex: 1 0 auto;
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(244, 245, 255, 0.8);
  font-family: var(--f-judul);
  font-weight: 700;
  font-size: var(--t-sm);
  cursor: pointer;
  white-space: nowrap;
}
.direktori-tab button span { opacity: 0.6; font-weight: 600; }
.direktori-tab button[aria-selected="true"] { background: var(--kunyit); color: var(--malam); }
@media (min-width: 960px) {
  .direktori-tab { display: none; }
}
@media (max-width: 959px) {
  .direktori--tab .dir-kolom { display: none; }
  .direktori--tab .dir-kolom.aktif { display: block; }
  .direktori--tab .dir-kolom h3 { display: none; }
  .direktori-catatan { display: none; }
}

/* ---------- myWM ---------- */
.mywm h2 { font-size: clamp(1.9rem, min(5vw, 7svh), 3.8rem); }
@media (max-width: 899px) {
  .mywm-ponsel img { width: auto; max-height: 28svh; }
  .mywm-baris { gap: 0.5rem; }
  .mywm-daftar { margin-bottom: var(--s-4); }
}

/* ---------- Angka acuan LPS: penuh satu layar ---------- */
main > .acuan { padding-block: clamp(1rem, 3svh, 2rem); }
.acuan .wadah { flex: 1; display: flex; }
.acuan-kotak { flex: 1; min-height: calc(var(--layar) - clamp(2rem, 6svh, 4rem)); padding: clamp(1.5rem, 5vw, 4rem); }
.acuan h2 { font-size: clamp(1.8rem, min(4.2vw, 6svh), 3.4rem); max-width: 16ch; }
.acuan-teks p { font-size: var(--t-md); }
.papan--acuan { font-size: min(19cqi, 6.5rem); }
.acuan-perisai { width: clamp(110px, min(14vw, 22svh), 200px); }
@media (max-width: 899px) {
  .acuan-kotak { background: linear-gradient(180deg, var(--cekung) 0 58%, var(--kunyit) 58%); }
  .acuan-angka { flex-direction: column; }
}

/* ---------- Jaringan kantor ---------- */
@media (max-width: 899px) {
  .dekat-tempat { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .dekat-tempat::-webkit-scrollbar { display: none; }
  .dekat-tempat li { flex: none; }
  .dekat-mosaik { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .dekat-mosaik::-webkit-scrollbar { display: none; }
  .dekat-foto, .dekat-foto--besar { flex: 0 0 78%; scroll-snap-align: start; }
  .dekat-foto img { height: 26svh; width: 100%; object-fit: cover; }
}

/* ---------- Kabar terbaru: empat kartu sejajar ---------- */
.bagian-kabar .kepala-lebar { margin-bottom: clamp(1rem, 3svh, 2rem); }
.bagian-kabar .kisi-kabar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  align-items: stretch;
}
.bagian-kabar .kisi-kabar > * { grid-column: auto !important; grid-row: auto !important; display: flex !important; flex-direction: column; }
.bagian-kabar .kisi-kabar > :nth-child(n + 5) { display: none !important; }
.bagian-kabar .kartu-gambar { aspect-ratio: 4 / 3 !important; }
.bagian-kabar .kartu-gambar img { height: 100%; object-fit: cover; }
.bagian-kabar .kisi-kabar h3 { font-size: 1.02rem !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bagian-kabar .kisi-kabar p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-sm); }
@media (max-height: 800px) { .bagian-kabar .kisi-kabar p { -webkit-line-clamp: 2; } }
@media (max-width: 959px) {
  .bagian-kabar .kisi-kabar {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .bagian-kabar .kisi-kabar::-webkit-scrollbar { display: none; }
  .bagian-kabar .kisi-kabar > * { flex: 0 0 78%; scroll-snap-align: start; }
  .bagian-kabar .kisi-kabar > :nth-child(n + 5) { display: flex !important; }
}

/* ---------- WMAGZ: sampul besar satu deret ---------- */
.bagian-majalah .majalah-baris { display: grid; gap: clamp(1rem, 3svh, 2rem); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) { .bagian-majalah .majalah-baris { grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); } }
.bagian-majalah h2 { font-size: clamp(2rem, min(4.6vw, 7svh), 3.6rem); }
.bagian-majalah .majalah-deret {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  align-items: end;
}
.bagian-majalah .sampul-gambar img { width: 100%; height: auto; max-height: 60svh; object-fit: cover; aspect-ratio: 3 / 4; border-radius: 12px; box-shadow: 0 24px 40px -24px rgba(23, 24, 74, 0.55); transition: transform 300ms var(--lengkung-pegas, ease); }
.bagian-majalah .sampul:hover .sampul-gambar img { transform: translateY(-8px) rotate(-1.5deg); }
@media (max-width: 959px) {
  .bagian-majalah .majalah-deret { grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .bagian-majalah .majalah-deret::-webkit-scrollbar { display: none; }
  .bagian-majalah .sampul { scroll-snap-align: start; }
  .bagian-majalah .sampul-gambar img { max-height: 52svh; }
}

/* Penyetelan agar tiap bagian muat satu layar (hasil cek-bagian.mjs). */
.hitung-tenor { min-width: 0; }
@media (max-height: 860px) and (min-width: 960px) { .dir-teks > span { display: none; } }
@media (min-width: 960px) { .bagian-majalah .sampul-gambar img { max-height: min(52svh, 440px); } }
@media (max-width: 959px) {
  .hitung .mata-warna { display: none; }
  .hitung h2 { font-size: clamp(1.4rem, 6.4vw, 1.9rem); }
  .hitung-ketik input { font-size: 1.6rem; }
  .papan-kotak-kepala { padding-bottom: 0.6rem; }
  .papan--hitung { font-size: min(8.4cqi, 2rem); }
  .papan-kotak-lps { margin-top: 0.5rem; padding: 0.5rem 0.75rem; font-size: var(--t-xs); }
  .dir-teks > span { display: none; }
}
@media (max-width: 959px) and (max-height: 760px) {
  .acuan-perisai { display: none; }
  .acuan-teks p { font-size: var(--t-sm); }
  .mywm-catatan { display: none; }
  .mywm-ponsel img { max-height: 22svh; }
  .bagian-majalah .sampul-gambar img { max-height: 44svh; }
  .percaya-izin { font-size: var(--t-xs); }
}
/* WMAGZ kini satu layar penuh dan bisa lekat: jangan ditunda perakitannya,
   karena ukuran perkiraannya (640 px) membuat tingginya salah terbaca. */
main > .bagian-majalah { content-visibility: visible; contain-intrinsic-size: none; }
/* Mosaik foto kantor tidak boleh mendorong kolom melebar di HP. */
.dekat-baris > * { min-width: 0; }
@media (max-width: 899px) { .dekat-baris { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 960px) and (max-height: 740px) {
  .direktori-judul { font-size: 1.8rem; margin-bottom: 0.75rem; }
  .dir-baris { padding: 0.32rem 0; }
  .direktori-catatan { display: none; }
}
@media (max-width: 959px) and (max-height: 760px) {
  .hitung-tenor { margin-top: 0.6rem; }
  .hitung-ketik-ket { display: none; }
  .papan-kotak-rinci div:first-child { display: none; }
  .papan-kotak-tombol { margin-top: 0.6rem; }
}

/* WMAGZ: judul di atas, sampul besar memenuhi lebar (laptop dan HP). */
.bagian-majalah .majalah-baris { grid-template-columns: minmax(0, 1fr) !important; gap: clamp(1rem, 3svh, 2rem); }
.bagian-majalah .majalah-baris > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.5rem; }
.bagian-majalah .majalah-baris > div:first-child h2 { margin: 0; }
.bagian-majalah .majalah-baris > div:first-child p { margin: 0; flex: 1 1 32ch; max-width: 52ch; }
.bagian-majalah .majalah-deret { display: flex; gap: clamp(0.75rem, 1.6vw, 1.5rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px 2px 14px; }
.bagian-majalah .majalah-deret::-webkit-scrollbar { display: none; }
.bagian-majalah .sampul { flex: 1 0 0; min-width: 0; scroll-snap-align: start; }
.bagian-majalah .sampul-gambar img { max-height: none; height: min(56svh, 520px); width: 100%; }
@media (max-width: 959px) {
  .bagian-majalah .sampul { flex: 0 0 64%; }
  .bagian-majalah .sampul-gambar img { height: min(54svh, 440px); }
}

/* Kalkulator HP: papan muat tanpa terpotong. */
@media (max-width: 959px) {
  .papan--hitung { font-size: min(6.4cqi, 1.9rem); }
  .papan-rp { font-size: 1rem; }
}

/* Angka acuan HP: satu latar, angka di kotak kunyit sendiri. */
@media (max-width: 899px) {
  .acuan-kotak { background: var(--cekung); gap: 1rem; }
  .acuan-angka { flex-direction: row; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem; border-radius: 20px; background: linear-gradient(160deg, #ffd84a, var(--kunyit) 55%, var(--kunyit-tua)); }
  .acuan-perisai { width: 72px; }
  .papan--acuan { font-size: min(12cqi, 3.2rem); }
}
/* Sampul WMAGZ: rasio asli 3:4, tinggi mengikuti layar, tidak terpotong. */
.bagian-majalah .sampul { flex: 0 0 auto; }
.bagian-majalah .sampul-gambar img { width: auto; aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 960px) { .bagian-majalah .majalah-deret { justify-content: space-between; } .bagian-majalah .sampul-gambar img { height: min(46svh, 20vw, 420px); } }
@media (max-width: 959px) { .bagian-majalah .sampul-gambar img { height: min(44svh, 360px); } }
/* Layar pertama HP: isi papan di tengah, bukan menempel ke atas. */
@media (max-width: 959px) {
  .layar-pertama .lobi-baris { align-content: center; align-items: center; }
  .layar-pertama .lobi-adegan { margin-top: 0.75rem; }
}

/* =====================================================================
   49. Putaran 5 Nov siang: snap penuh, bagian "BPR terbesar", WEMA
   ===================================================================== */

/* Gulir berhenti pas satu bagian penuh (mandatory), satu bagian per
   gerakan (snap-stop), dan bagian penutup ikut satu layar. Kaki situs
   jadi titik henti terakhir. Mati kalau pengunjung minta gerak dikurangi. */
html.gulir-pas { scroll-snap-type: y mandatory; scroll-behavior: smooth; }
html.gulir-pas main > .layar-pertama,
html.gulir-pas main > section { scroll-snap-align: start; scroll-snap-stop: always; }
html.gulir-pas .kaki-pas { scroll-snap-align: end; }
main > .bagian--cekung:last-child { min-height: var(--layar); display: flex; flex-direction: column; justify-content: center; }
@media (prefers-reduced-motion: reduce) { html.gulir-pas { scroll-snap-type: none; scroll-behavior: auto; } }

/* ---------- Bagian "Salah satu BPR terbesar" ---------- */
main > .percaya {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(55% 60% at 100% 0%, rgba(255, 194, 26, 0.22), transparent 65%),
    radial-gradient(45% 55% at 0% 100%, rgba(62, 64, 149, 0.14), transparent 70%),
    var(--kertas);
}
main > .percaya::before {
  content: "";
  position: absolute;
  right: -6vw; top: -10svh;
  width: min(46vw, 620px); aspect-ratio: 1;
  border-radius: 50%;
  background-image: radial-gradient(rgba(62, 64, 149, 0.22) 1.6px, transparent 2px);
  background-size: 18px 18px;
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  pointer-events: none;
}
.percaya .wadah { position: relative; }
.percaya-mata {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin: 0 0 clamp(0.75rem, 2svh, 1.25rem);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--aksen-lembut);
  color: var(--indigo);
  font-family: var(--f-judul); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.percaya-mata span { width: 8px; height: 8px; border-radius: 50%; background: var(--kunyit); box-shadow: 0 0 0 4px rgba(255, 194, 26, 0.3); }
.percaya-judul { max-width: 20ch; font-size: clamp(2rem, min(5vw, 7svh), 4rem); line-height: 1; letter-spacing: -0.045em; }
.percaya-judul em {
  font-style: normal;
  background: linear-gradient(transparent 62%, rgba(255, 194, 26, 0.75) 62%, rgba(255, 194, 26, 0.75) 92%, transparent 92%);
  padding: 0 0.08em;
}
.percaya-judul span { color: var(--indigo); }
.percaya-angka { gap: clamp(0.6rem, 1.4vw, 1rem); }
.percaya-angka .percaya-kartu {
  border: 0;
  padding: clamp(1rem, 2.6svh, 1.6rem) clamp(1rem, 1.6vw, 1.4rem);
  border-radius: 22px;
  background: var(--kertas);
  box-shadow: 0 1px 0 rgba(23, 24, 74, 0.05), 0 22px 40px -28px rgba(23, 24, 74, 0.45);
  transition: transform 260ms var(--lengkung-pegas, ease);
}
.percaya-angka .percaya-kartu:hover { transform: translateY(-4px); }
.percaya-kartu--0 { background: var(--malam) !important; }
.percaya-kartu--0 dd { color: var(--kunyit) !important; }
.percaya-kartu--0 dt { color: rgba(244, 245, 255, 0.75) !important; }
.percaya-kartu--3 { background: linear-gradient(150deg, #ffd84a, var(--kunyit) 60%, var(--kunyit-tua)) !important; }
.percaya-kartu--3 dd, .percaya-kartu--3 dt { color: var(--malam) !important; }
.percaya-izin { background: transparent; padding: 0; gap: 0.5rem 1.75rem; }

/* ---------- Kalkulator: pilihan jangka waktu satu baris di PC ---------- */
@media (min-width: 960px) {
  .hitung-chip { flex-wrap: nowrap; gap: 0.35rem; }
  .hitung-chip span { padding: 0 0.7rem; font-size: 0.82rem; min-height: 40px; }
}

/* ---------- WEMA: siap ketik, contoh pertanyaan samar ---------- */
.wema-panel-isi { gap: 0.6rem; }
.wema-obrolan { display: grid; gap: 0.5rem; max-height: 38svh; overflow-y: auto; }
.wema-gelembung--saya { justify-self: end; border-radius: 16px 4px 16px 16px; background: var(--malam); color: #fff; }
.wema-ketik {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 4px 4px 4px 0.9rem;
  border: 2px solid var(--indigo);
  border-radius: 999px;
  box-shadow: 0 0 0 4px var(--aksen-lembut);
}
.wema-ketik input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--tinta); padding: 0.45rem 0; }
.wema-ketik button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 1rem; cursor: pointer; }
.wema-pintas { opacity: 0.55; transition: opacity 150ms ease; }
.wema-pintas:hover, .wema-pintas:focus-within { opacity: 1; }
.wema-pintas a { min-height: 32px; padding: 0 0.7rem; font-size: 0.76rem; font-weight: 600; border-width: 1px; color: var(--redup); }

/* ---------- WMAGZ geser semua edisi ---------- */
.bagian-majalah .majalah-deret { justify-content: flex-start !important; scroll-behavior: smooth; }
.bagian-majalah .sampul-kaki { display: block; margin-top: 0.5rem; }
/* Edisi WMAGZ tanpa gambar sampul (edisi lama): kartu pengganti bermerek. */
.sampul-ganti {
  display: grid; place-content: center; justify-items: center; gap: 0.2rem;
  height: min(46svh, 20vw, 420px); aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: linear-gradient(160deg, #3e4095, #17184a);
  color: #fff; box-shadow: 0 24px 40px -24px rgba(23, 24, 74, 0.55);
}
@media (max-width: 959px) { .sampul-ganti { height: min(44svh, 360px); } }
.sampul-ganti b { font-family: var(--f-judul); font-size: 2rem; color: #ff4b4f; letter-spacing: -0.03em; }
.sampul-ganti i { font-style: normal; font-size: var(--t-sm); opacity: 0.75; text-transform: uppercase; letter-spacing: 0.1em; }
.sampul-ganti em { font-style: normal; font-family: var(--f-judul); font-weight: 800; font-size: 4rem; line-height: 1; color: var(--kunyit); }
.percaya-angka dd { white-space: nowrap; font-size: clamp(1.9rem, min(3.6vw, 6svh), 3.4rem); }

/* =====================================================================
   50. Halaman dalam yang hidup (5 Nov 2026 sore)

   Pemilik: laporan "plain, jelek", kantor "susah dibaca", produk dan
   layanan "kurang dinamis", intinya semua halaman harus hidup.
   - Kepala halaman induk: cahaya bergerak pelan + ilustrasi 3D melayang.
   - Produk: kartu berlogo resmi dari Katalog WM, saringan kategori.
   - Laporan: kartu unduh terbaru + ubin berwarna per jenis.
   - Ikhtisar (Layanan, Tentang Kami, dst.): kartu berilustrasi.
   - Kantor: lompat ke kota, kartu wilayah yang terbaca jelas.
   ===================================================================== */

/* ---------- Bagian kedua beranda: peta Jawa Tengah ---------- */
main > .percaya { min-height: var(--layar); }
.percaya-peta {
  position: absolute;
  right: -4%;
  top: 50%;
  width: min(62vw, 1000px);
  height: auto;
  transform: translateY(-50%);
  opacity: 0.9;
  pointer-events: none;
  mask-image: radial-gradient(75% 75% at 55% 50%, #000 55%, transparent 100%);
}
main > .percaya::before { display: none; }
@media (max-width: 899px) {
  .percaya-peta { width: 140vw; right: -55vw; top: 22%; opacity: 0.55; }
}
.percaya-kartu--3 dd { font-size: clamp(1.9rem, min(3.6vw, 6svh), 3.4rem); }

/* ---------- Kepala halaman induk yang hidup ---------- */
.kepala--hidup { position: relative; overflow: hidden; isolation: isolate; }
.kepala-cahaya {
  position: absolute;
  inset: -40%;
  z-index: -1;
  background:
    radial-gradient(22% 30% at 20% 30%, rgba(255, 194, 26, 0.28), transparent 70%),
    radial-gradient(26% 34% at 80% 60%, rgba(120, 124, 255, 0.45), transparent 70%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .kepala-cahaya { animation: cahaya-geser 18s ease-in-out infinite alternate; }
}
@keyframes cahaya-geser { to { transform: translate(8%, -6%) rotate(8deg); } }
.kepala--ilus .kepala-baris { display: grid; align-items: center; gap: var(--s-6); }
@media (min-width: 900px) { .kepala--ilus .kepala-baris { grid-template-columns: minmax(0, 1fr) 320px; } }
.kepala-ilus { position: relative; height: 220px; display: none; }
@media (min-width: 900px) { .kepala-ilus { display: block; } }
.kepala-ilus .ilus { position: absolute; filter: drop-shadow(0 26px 30px rgba(8, 9, 40, 0.45)); }
.kepala-ilus-0 { width: 200px; right: 70px; top: 0; }
.kepala-ilus-1 { width: 120px; right: 0; bottom: -6px; }
@media (prefers-reduced-motion: no-preference) {
  .kepala-ilus-0 { animation: melayang 6s ease-in-out infinite; }
  .kepala-ilus-1 { animation: melayang 5s ease-in-out -2s infinite; }
}
:root[data-ak-diam] .kepala-ilus .ilus, :root[data-ak-diam] .kepala-cahaya { animation: none; }
@keyframes melayang { 50% { transform: translateY(-12px) rotate(-3deg); } }

/* ---------- Produk: kartu berlogo ---------- */
.saring-produk[hidden] { display: none; }
.saring-produk {
  position: sticky;
  top: calc(var(--tinggi-kop, 75px) + 0.75rem);
  z-index: 5;
  display: flex;
  gap: 0.4rem;
  width: max-content;
  max-width: 100%;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -18px rgba(23, 24, 74, 0.5), inset 0 0 0 1px var(--garis);
  overflow-x: auto;
  scrollbar-width: none;
}
.saring-produk button {
  flex: none;
  min-height: 42px;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font-family: var(--f-judul);
  font-weight: 700;
  font-size: var(--t-sm);
  cursor: pointer;
}
.saring-produk button span { opacity: 0.55; margin-left: 2px; }
.saring-produk button[aria-pressed="true"] { background: var(--malam); color: var(--kunyit); }
.bagian-produk[hidden] { display: none; }

.kisi-logo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}
.kisi-logo--tunggal { grid-template-columns: minmax(0, 1fr); }
.kartu-logo {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-radius: 26px;
  overflow: hidden;
  background: var(--kertas);
  color: var(--tinta);
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(23, 24, 74, 0.05), 0 22px 44px -30px rgba(23, 24, 74, 0.55);
  transition: transform 320ms var(--lengkung-pegas, ease), box-shadow 320ms ease;
}
.kartu-logo:hover { transform: translateY(-6px); box-shadow: 0 34px 56px -30px rgba(23, 24, 74, 0.6); }
.kartu-logo:active { transform: translateY(-2px) scale(0.99); }
.kartu-logo-papan {
  position: relative;
  display: grid;
  place-items: center;
  height: 150px;
  padding: 1.25rem 1.5rem;
  background:
    radial-gradient(rgba(255, 255, 255, 0.55) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(140deg, #fff3c4, #ffe28a);
  overflow: hidden;
}
.kartu-logo--tabungan .kartu-logo-papan,
.kartu-logo--deposito .kartu-logo-papan {
  background:
    radial-gradient(rgba(255, 255, 255, 0.6) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(140deg, #eceeff, #d7daf7);
}
.kartu-logo-papan .logo-produk {
  max-width: 88%;
  max-height: 96px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(23, 24, 74, 0.18));
  transition: transform 360ms var(--lengkung-pegas, ease);
}
.kartu-logo:hover .logo-produk { transform: scale(1.07) rotate(-2deg); }
.kartu-logo-isi { display: grid; align-content: start; gap: 0.3rem; padding: 1.1rem 1.25rem 0.5rem; }
.kartu-logo-kat { font-family: var(--f-judul); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--samar); }
.kartu-logo-isi strong { font-family: var(--f-judul); font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.15; }
.kartu-logo-tagline { color: var(--redup); font-size: var(--t-sm); line-height: 1.45; }
.kartu-logo-kaki { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.25rem 1.2rem; }
.kartu-logo-angka { display: grid; font-family: var(--f-judul); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--indigo); line-height: 1.05; }
.kartu-logo-angka small { font-family: var(--f-teks); font-weight: 500; font-size: var(--t-xs); letter-spacing: 0; color: var(--samar); }
.kartu-logo-panah {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--malam); color: var(--kunyit); font-weight: 800;
  transition: transform 260ms var(--lengkung-pegas, ease);
}
.kartu-logo--kredit .kartu-logo-panah { background: var(--kunyit); color: var(--malam); }
.kartu-logo:hover .kartu-logo-panah { transform: translateX(4px); }

/* Logo di kepala halaman satu produk. */
.kepala-produk-logo {
  display: inline-grid;
  place-items: center;
  margin: var(--s-4) 0 0;
  padding: 0.6rem 1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 30px -18px rgba(8, 9, 40, 0.6);
}
.kepala-produk-logo .logo-produk { display: block; max-height: 64px; max-width: 260px; width: auto; height: auto; }

/* ---------- Laporan ---------- */
.laporan-baru, .laporan-jenis { margin-top: clamp(2rem, 5vw, 3.5rem); }
.laporan-baru h2, .laporan-jenis h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 var(--s-5); letter-spacing: -0.03em; }
.laporan-baru-kisi { display: grid; gap: clamp(0.8rem, 2vw, 1.25rem); }
@media (min-width: 860px) { .laporan-baru-kisi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.unduh-besar {
  position: relative;
  display: grid;
  gap: 0.5rem;
  min-height: 190px;
  padding: 1.4rem;
  border-radius: 24px;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(150deg, #4446a6, var(--malam));
  box-shadow: 0 26px 46px -30px rgba(23, 24, 74, 0.7);
  transition: transform 300ms var(--lengkung-pegas, ease);
}
.unduh-besar::after {
  content: "PDF";
  position: absolute; right: -10px; bottom: -28px; z-index: -1;
  font-family: var(--f-judul); font-weight: 800; font-size: 7rem; letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.07);
}
.unduh-besar:hover { transform: translateY(-5px); }
.unduh-besar--kunyit { background: linear-gradient(150deg, #ffd84a, var(--kunyit) 55%, var(--kunyit-tua)); color: var(--malam); }
.unduh-besar--kunyit::after { color: rgba(23, 24, 74, 0.08); }
.unduh-besar--merah { background: linear-gradient(150deg, #e8383d, #a51217); }
.unduh-besar--hijau { background: linear-gradient(150deg, #2f9e6c, #17603f); }
.unduh-besar--malam { background: linear-gradient(150deg, #23255c, #0e0f33); }
.unduh-besar-kat { font-family: var(--f-judul); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.unduh-besar strong { font-family: var(--f-judul); font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.02em; max-width: 18ch; }
.unduh-besar-kaki { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.unduh-besar-pdf { font-size: var(--t-sm); opacity: 0.8; }
.unduh-besar-aksi { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: var(--malam); font-family: var(--f-judul); font-weight: 800; font-size: var(--t-sm); }
.unduh-besar-lencana { position: absolute; top: 1rem; right: 1rem; padding: 0.25rem 0.65rem; border-radius: 999px; background: #22d36b; color: #053d20; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }

.kisi-laporan { display: grid; gap: clamp(0.8rem, 2vw, 1.25rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ubin-laporan {
  --aksen-ubin: var(--indigo);
  --lembut-ubin: var(--aksen-lembut);
  display: grid;
  grid-template-rows: 1fr auto;
  border-radius: 24px;
  background: var(--kertas);
  box-shadow: 0 1px 0 rgba(23, 24, 74, 0.05), 0 20px 40px -30px rgba(23, 24, 74, 0.5);
  overflow: hidden;
  border-top: 5px solid var(--aksen-ubin);
  transition: transform 300ms var(--lengkung-pegas, ease);
}
.ubin-laporan:hover { transform: translateY(-4px); }
.ubin-laporan--kunyit { --aksen-ubin: var(--kunyit-tua); --lembut-ubin: #fff2c4; }
.ubin-laporan--merah { --aksen-ubin: var(--tindakan); --lembut-ubin: var(--tindakan-lembut); }
.ubin-laporan--hijau { --aksen-ubin: var(--baik); --lembut-ubin: var(--baik-lembut); }
.ubin-laporan--malam { --aksen-ubin: var(--malam); --lembut-ubin: #e4e5f2; }
.ubin-laporan-tautan { display: grid; gap: 0.45rem; align-content: start; padding: 1.3rem 1.3rem 1rem; color: var(--tinta); text-decoration: none; }
.ubin-laporan-ikon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--lembut-ubin); color: var(--aksen-ubin); }
.ubin-laporan-ikon svg { width: 26px; height: 26px; }
.ubin-laporan-jumlah { position: absolute; }
.ubin-laporan { position: relative; }
.ubin-laporan-jumlah { top: 1.4rem; right: 1.3rem; font-size: var(--t-xs); color: var(--samar); }
.ubin-laporan-jumlah b { display: block; text-align: right; font-family: var(--f-judul); font-size: 2rem; line-height: 1; color: var(--aksen-ubin); letter-spacing: -0.04em; }
.ubin-laporan-tautan strong { font-family: var(--f-judul); font-size: 1.25rem; letter-spacing: -0.02em; margin-top: 0.4rem; }
.ubin-laporan-ringkas { color: var(--redup); font-size: var(--t-sm); line-height: 1.5; }
.ubin-laporan-rentang { justify-self: start; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--lembut-ubin); color: var(--aksen-ubin); font-size: var(--t-xs); font-weight: 700; }
.ubin-laporan-buka { margin-top: 0.25rem; font-family: var(--f-judul); font-weight: 700; font-size: var(--t-sm); color: var(--aksen-ubin); }
.ubin-laporan-unduh { display: block; padding: 0.8rem 1.3rem; background: var(--lembut-ubin); color: var(--tinta); font-size: var(--t-xs); font-weight: 600; text-decoration: none; border-top: 1px dashed var(--garis-tegas); }
.ubin-laporan-unduh::before { content: "↓ "; color: var(--aksen-ubin); font-weight: 800; }
.ubin-laporan-unduh:hover { color: var(--aksen-ubin); }

/* ---------- Ikhtisar berilustrasi (Layanan, Tentang Kami, dll.) ---------- */
.kisi-ikhtisar--hidup { gap: clamp(0.9rem, 2vw, 1.4rem); }
.kartu-hidup {
  position: relative;
  min-height: 210px;
  padding-right: clamp(1.25rem, 9vw, 7.5rem) !important;
  border-radius: 24px !important;
  border: 0 !important;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 1px 0 rgba(23, 24, 74, 0.05), 0 22px 44px -30px rgba(23, 24, 74, 0.5) !important;
  transition: transform 300ms var(--lengkung-pegas, ease), box-shadow 300ms ease !important;
}
.kartu-hidup::before { content: none !important; }
.kartu-hidup:hover { transform: translateY(-6px); }
.kartu-hidup--0 { background: linear-gradient(150deg, #fff6d6, #ffe7a0) !important; }
.kartu-hidup--1 { background: linear-gradient(150deg, #eef0ff, #d9dcf8) !important; }
.kartu-hidup--2 { background: linear-gradient(150deg, #e9f7f0, #cdeedd) !important; }
.kartu-hidup--3 { background: linear-gradient(150deg, #fdeeee, #f8d4d4) !important; }
.kartu-hidup strong { font-size: 1.3rem !important; }
.kartu-hidup-ilus { position: absolute; right: -6px; bottom: -8px; z-index: -1; width: clamp(84px, 9vw, 112px); transition: transform 360ms var(--lengkung-pegas, ease); }
.kartu-hidup:hover .kartu-hidup-ilus { transform: translateY(-6px) rotate(-6deg) scale(1.06); }
.kartu-hidup .kartu-ikhtisar-aksi { color: var(--malam) !important; }

/* ---------- Kantor: lompat ke kota, kartu terbaca ---------- */
.lompat-kota {
  position: sticky;
  top: calc(var(--tinggi-kop, 75px) + 0.6rem);
  z-index: 5;
  display: flex;
  gap: 0.4rem;
  margin: clamp(1.25rem, 3vw, 2rem) 0;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -18px rgba(23, 24, 74, 0.5), inset 0 0 0 1px var(--garis);
  overflow-x: auto;
  scrollbar-width: none;
}
.lompat-kota a { flex: none; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0 0.95rem; border-radius: 999px; color: var(--tinta); text-decoration: none; font-family: var(--f-judul); font-weight: 700; font-size: var(--t-sm); }
.lompat-kota a span { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: var(--aksen-lembut); color: var(--indigo); font-size: 0.72rem; }
.lompat-kota a:hover { background: var(--malam); color: var(--kunyit); }
.buku-kantor { border-top: 0; display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
.buku-kantor .direktori-wilayah {
  scroll-margin-top: calc(var(--tinggi-kop, 75px) + 5rem);
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  border-radius: 24px;
  background: var(--kertas);
  box-shadow: 0 1px 0 rgba(23, 24, 74, 0.05), 0 22px 44px -32px rgba(23, 24, 74, 0.55);
  border: 0;
}
.buku-kantor .direktori-nama { color: var(--tinta); }
.buku-kantor .direktori-nama small, .buku-kantor .direktori-no { color: var(--samar); }
.buku-kantor .direktori-kantor h3 { color: var(--tinta); }
.buku-kantor .direktori-jenis { color: var(--hias); }
.buku-kantor .direktori-alamat { color: var(--redup); }
.buku-kantor .direktori-telepon a { color: var(--indigo); font-weight: 600; }
.buku-kantor .direktori-baris { border-color: var(--garis); }
.buku-kantor .direktori-baris--pusat { background: linear-gradient(90deg, #fff6d6, transparent); border-radius: 14px; }
.buku-kantor .direktori-peta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  min-height: 40px; padding: 0 0.9rem; border-radius: 999px;
  background: var(--malam); color: var(--kunyit) !important; font-weight: 700; text-decoration: none;
}
.buku-kantor .direktori-peta::before { content: "📍"; }
.buku-kantor .direktori-peta::after { content: none !important; }
.unduh-besar strong { color: inherit; }
.unduh-besar--kunyit .unduh-besar-aksi { background: var(--malam); color: var(--kunyit); }
/* Panah sudah ditulis di teks kartu hidup: matikan panah dari CSS lama. */
.kartu-hidup .kartu-ikhtisar-aksi::after { content: none !important; }
/* Logo produk di kepala: di bawah label kategori, bukan berdampingan. */
.kepala-produk-teks { display: flex; flex-direction: column; align-items: flex-start; }
.kepala-produk-logo { margin-top: var(--s-4); }
@media (max-width: 959px) {
  .hitung-ketik-ket { margin: 0.25rem 0 0; }
  .hitung h2 { margin-bottom: 0.4rem; }
  .papan-kotak-angka { padding: 0.5rem 0 0.4rem; }
  .papan-kotak-rinci { gap: 0.35rem; }
  .papan-kotak-rinci dt { line-height: 1.25; }
}

/* Titik henti gulir pada penanda statis (lihat lobi.js). */
.jangkar-gulir { display: block; height: 0; }
html.gulir-pas main > .layar-pertama,
html.gulir-pas main > section { scroll-snap-align: none; scroll-snap-stop: normal; }
html.gulir-pas .jangkar-gulir { scroll-snap-align: start; scroll-snap-stop: always; }

/* Tombol WhatsApp disembunyikan dulu: nasabah diarahkan ke WEMA, yang akan
   menyarankan WhatsApp untuk pertanyaan rumit (keputusan pemilik 5 Nov 2026).
   Hapus blok ini untuk memunculkannya lagi. */
.kop-wa, .nav-kontak, a.tbl[href^="https://wa.me"], .tbl--wa { display: none !important; }
.aksi-lekat a[href^="https://wa.me"] { display: none !important; }
/* .percaya pernah diberi position: relative yang mengalahkan sticky, sehingga
   top: tinggi-kop menggesernya 75 px ke bawah. Lekat menang. */
main > .tumpuk.tumpuk { position: sticky; top: var(--tinggi-kop, 75px); }

/* =====================================================================
   51. Tanya jawab produk dan wilayah kerja (dikutip AI, 5 Nov 2026)
   ===================================================================== */
.tanya-daftar { display: grid; gap: 0.75rem; margin: 0; }
.tanya-butir { padding: 1rem 1.2rem; border-radius: 18px; background: var(--cekung); border-left: 4px solid var(--kunyit); }
.tanya-butir dt { font-family: var(--f-judul); font-weight: 700; font-size: 1.05rem; color: var(--tinta); }
.tanya-butir dd { margin: 0.35rem 0 0; color: var(--redup); line-height: 1.55; }
.wilayah-kisi { display: grid; gap: clamp(0.9rem, 2vw, 1.25rem); margin-top: clamp(1.5rem, 4vw, 2.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.wilayah-kartu { padding: 1.3rem; border-radius: 22px; background: var(--kertas); box-shadow: 0 1px 0 rgba(23, 24, 74, 0.05), 0 20px 40px -30px rgba(23, 24, 74, 0.5); border-top: 5px solid var(--indigo); }
.wilayah-kartu h2 { margin: 0 0 0.75rem; font-size: 1.2rem; }
.wilayah-kartu dl { margin: 0; display: grid; gap: 0.6rem; }
.wilayah-kartu dt { font-family: var(--f-judul); font-weight: 700; font-size: var(--t-sm); color: var(--indigo); }
.wilayah-kartu dd { margin: 0.1rem 0 0; font-size: var(--t-sm); color: var(--redup); line-height: 1.5; }

/* =====================================================================
   52. Rapikan 5 Nov sore: bilah kota kantor, kotak OJK/LPS dibuang
   ===================================================================== */
/* Bilah kota lekat: pita penuh selebar layar, menempel tepat di bawah
   kepala (tanpa celah yang ditembus isi), dan semua kota muat:
   dilipat ke baris berikut, bukan terpotong. */
.lompat-kota {
  top: var(--tinggi-kop, 75px);
  width: auto;
  max-width: none;
  margin: 0 calc(50% - 50vw) clamp(1rem, 3vw, 1.75rem);
  padding: 0.6rem max(1rem, calc((100vw - var(--lebar)) / 2));
  border-radius: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  overflow: visible;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px -18px rgba(23, 24, 74, 0.45), inset 0 -1px 0 var(--garis);
}
.lompat-kota a { min-height: 36px; padding: 0 0.75rem; }
.buku-kantor .direktori-wilayah { scroll-margin-top: calc(var(--tinggi-kop, 75px) + 7rem); }
.buku-kantor { margin-top: clamp(1rem, 3vw, 1.75rem); }

/* Wadah kotak regulator yang kini kosong tidak menyisakan jarak. */
.bagian:empty, .naratif-kaki:empty { display: none; }
.kaki-regulator-rinci { margin-top: 0.4rem; font-weight: 500 !important; color: var(--redup) !important; }
@media (max-width: 719px) {
  .lompat-kota { gap: 0.25rem; padding-block: 0.45rem; }
  .lompat-kota a { min-height: 34px; padding: 0 0.6rem; font-size: 0.8rem; }
  .lompat-kota a span { display: none; }
}

/* =====================================================================
   53. Banner utama: gambar besar, navigasi sederhana (5 Nov 2026 sore)

   Pemilik: banner adalah muka utama; gambar harus besar, empat kartu
   adegan di bawah papan diganti navigasi sederhana yang tidak intrusif,
   dan tetap optimal di HP. Gambar kampanye mengisi separuh kanan banner
   setinggi banner. Kalau gambar latar lebar (.lobi-gambar--latar, dari
   GPT) tersedia, ia menutup panel penuh dan memudar ke warna adegan.
   ===================================================================== */
.layar-pertama .lobi { position: relative; }
.layar-pertama .lobi-kiri { position: relative; z-index: 2; }
.layar-pertama .lobi-kanan { z-index: 1; pointer-events: none; }

@media (min-width: 960px) {
  .layar-pertama .lobi-baris { grid-template-columns: minmax(0, 1fr) !important; }
  .layar-pertama .lobi-kiri { max-width: min(46%, 640px); }
  .layar-pertama .lobi-kanan {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 56%;
    max-height: none;
    min-height: 0;
    display: block !important;
  }
  .layar-pertama .lobi-gambar { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 3% 6% 9% 4%; }
  .layar-pertama .lobi-gambar .adegan-foto { height: 100%; display: flex; align-items: center; justify-content: center; }
  .layar-pertama .lobi-gambar .adegan-foto img {
    height: 100%; width: auto; max-height: none !important; max-width: 100%;
    object-fit: contain;
    border-radius: 36px 36px 36px 10px;
  }
  .layar-pertama .lobi-gambar .adegan-foto--lepas img { border-radius: 0; }
}
/* Gambar latar lebar (key visual GPT): menutup panel, memudar ke kiri. */
.lobi-gambar--latar { padding: 0 !important; }
.lobi-gambar--latar .adegan-foto, .lobi-gambar--latar .adegan-foto img {
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover !important; border-radius: 0 !important; box-shadow: none !important;
}
.lobi-gambar--latar .adegan-foto img { mask-image: linear-gradient(90deg, transparent 0%, #000 28%); }

/* Navigasi: panah + titik; titik aktif memanjang dan berisi garis waktu. */
.lobi-navi { display: flex; align-items: center; gap: 0.75rem; position: relative; z-index: 3; margin-top: clamp(0.75rem, 2.5svh, 1.5rem); }
.lobi-navi .lobi-adegan {
  display: flex !important; gap: 0.5rem; margin: 0 !important; padding: 0 !important;
  overflow: visible; grid-auto-flow: unset;
}
.lobi-navi .lobi-pilih {
  width: 12px; min-height: 0 !important; height: 12px; padding: 0 !important;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teks) 30%, transparent);
  transition: width 300ms var(--lengkung-pegas, ease), background-color 200ms ease;
}
.lobi-navi .lobi-pilih.aktif { width: 44px; background: color-mix(in srgb, var(--teks) 25%, transparent); }
.lobi-navi .lobi-pilih-angka, .lobi-navi .lobi-pilih-nama {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.lobi-navi .lobi-pilih-garis { height: 100%; opacity: 1; background: var(--teks); border-radius: 999px; }
/* Titik diperbesar area sentuhnya tanpa mengubah tampilannya. */
.lobi-navi .lobi-pilih::before { content: ""; position: absolute; inset: -16px -4px; }
.lobi-navi .lobi-pilih { position: relative; overflow: visible; }
.lobi-navi li { display: flex; }
.lobi-panah {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--teks) 35%, transparent);
  background: transparent; color: var(--teks);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.lobi-panah:hover { background: var(--teks); color: var(--latar); }

/* HP: gambar tampil di atas papan, besar tapi menyisakan papan dan ubin. */
@media (max-width: 959px) {
  .layar-pertama .lobi-kanan { display: flex !important; order: -1; justify-content: center; min-height: 0; }
  .layar-pertama .lobi-baris { display: flex !important; flex-direction: column; justify-content: center; }
  .layar-pertama .lobi-gambar .adegan-foto img { max-height: 24svh !important; width: auto; max-width: 70vw; }
  .layar-pertama .lobi-mata { margin-bottom: 0.4rem; }
  .layar-pertama .papan--raksasa { font-size: min(14cqi, 9svh); }
  .lobi-navi { justify-content: center; }
  .lobi-panah { display: none; }
}
@media (max-width: 959px) {
  .layar-pertama .lobi-kanan { flex: none; height: 24svh; display: grid !important; }
  .layar-pertama .lobi-gambar { grid-area: 1 / 1; display: flex; justify-content: center; height: 100%; }
  .layar-pertama .lobi-gambar .adegan-foto { height: 100%; display: flex; }
  .layar-pertama .lobi-gambar .adegan-foto img { height: 100%; max-height: none !important; width: auto; border-radius: 22px 22px 22px 6px; }
}
@media (max-width: 959px) and (max-height: 760px) { .layar-pertama .lobi-kanan { height: 19svh; } .layar-pertama .lobi-judul { font-size: 1.15rem; } }
@media (max-width: 959px) { .layar-pertama .lobi-gambar .adegan-foto img { height: 22svh !important; max-height: 22svh !important; } .layar-pertama .lobi-kanan { height: 23svh; margin-bottom: 0.5rem; } }
@media (max-width: 959px) and (max-height: 760px) { .layar-pertama .lobi-gambar .adegan-foto img { height: 15svh !important; max-height: 15svh !important; } .layar-pertama .lobi-kanan { height: 16svh; } }

/* =====================================================================
   54. Banner bergambar lebar (GPT, 5 Nov 2026)
   Gambar kredit, myWM, dan deposito berlatar kunyit dengan ruang kosong
   di kiri. Di laptop gambarnya menutup seluruh banner; di HP jadi pita
   di atas papan. Adegan bergambar ikut warna kunyit supaya teks dan
   gambar menyatu; Tamasha (foto acara) tetap merah.
   ===================================================================== */
.lobi[data-adegan="mywm"], .lobi[data-adegan="deposito"] {
  --latar: #ffc21a; --teks: #17184a; --teks-redup: rgba(23, 24, 74, 0.78);
}
.lobi[data-adegan="deposito"] .keping,
.lobi[data-adegan="mywm"] .keping { --ubin: #17184a; --ubin-bawah: #0b0c33; }
.lobi[data-adegan="mywm"] .lobi-latar,
.lobi[data-adegan="deposito"] .lobi-latar { background: none; }
.lobi[data-adegan="mywm"] .lobi-latar::after,
.lobi[data-adegan="deposito"] .lobi-latar::after { background-image: radial-gradient(rgba(0, 0, 0, 0.09) 1px, transparent 1.4px); }

.lobi-gambar--latar .adegan-foto img { mask-image: none; }

@media (min-width: 960px) {
  /* .lobi-kanan selebar 56% di kanan; gambar latar melebar ke kiri
     sampai menutup seluruh banner (100/56 = 178,6%). */
  .layar-pertama .lobi-gambar.lobi-gambar--latar { left: -78.6%; padding: 0; }
  .layar-pertama .lobi-gambar--latar .adegan-foto { width: 100%; }
  .layar-pertama .lobi-gambar--latar .adegan-foto img {
    width: 100% !important; height: 100% !important; max-width: none;
    object-fit: cover; object-position: 100% 30%; border-radius: 0;
  }
}
@media (max-width: 959px) {
  .layar-pertama .lobi-gambar--latar { width: 100%; }
  .layar-pertama .lobi-gambar--latar .adegan-foto { width: 100%; }
  .layar-pertama .lobi-gambar--latar .adegan-foto img {
    width: 100% !important; object-fit: cover; object-position: 88% 22%;
    border-radius: 22px 22px 22px 6px;
  }
}
@media (min-width: 960px) {
  /* Gambar utuh setinggi banner, rata kanan; tepi kirinya memudar ke
     kunyit latar supaya subjek tidak tertimpa papan angka. */
  .layar-pertama .lobi-gambar--latar .adegan-foto { justify-content: flex-end; }
  .layar-pertama .lobi-gambar--latar .adegan-foto img {
    width: auto !important; max-width: 72% !important; height: 100% !important;
    object-fit: cover; object-position: 100% 30%;
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  }
}

/* =====================================================================
   55. Peta kantor (halaman Kantor layanan)
   Latar titik Jawa Tengah yang sama dengan bagian 2 beranda; penanda
   kota bisa diklik dan melompat ke daftar kantornya.
   ===================================================================== */
.peta-kantor {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  margin: clamp(1.5rem, 4vw, 3rem) 0 clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: 28px;
  background:
    radial-gradient(60% 80% at 75% 40%, rgba(255, 194, 26, 0.18), transparent 70%),
    #f4f4fb;
}
.peta-kantor-angka { font-family: var(--huruf-judul, inherit); font-size: 1.25rem; font-weight: 700; color: #17184a; margin: 0 0 0.4rem; }
.peta-kantor-angka strong { display: block; font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: 0.95; color: #3e4095; }
.peta-kantor-teks > p:not(.peta-kantor-angka) { color: #4a4b6a; margin: 0 0 1.25rem; max-width: 32ch; }
.peta-kantor-jenis { display: grid; gap: 0.5rem; margin: 0; }
.peta-kantor-jenis div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.55rem 0.9rem; border-radius: 12px; background: #fff;
  box-shadow: 0 1px 0 rgba(23, 24, 74, 0.06);
}
.peta-kantor-jenis dt { color: #17184a; font-weight: 600; }
.peta-kantor-jenis dd { margin: 0; font-weight: 800; font-size: 1.25rem; color: #3e4095; font-variant-numeric: tabular-nums; }

.peta-kantor-gambar { position: relative; }
.peta-kantor-gambar img { display: block; width: 100%; height: auto; }
.peta-kantor-gambar svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.peta-kota { cursor: pointer; outline: none; }
.peta-kota-sasaran { fill: transparent; }
.peta-kota-inti { fill: #d81e24; stroke: #fff; stroke-width: 3.5; transition: r 200ms ease; }
.peta-kota-denyut {
  fill: none; stroke: #d81e24; stroke-width: 3;
  transform-box: fill-box; transform-origin: center;
  animation: peta-denyut 2.6s ease-out infinite;
}
.peta-kota:nth-child(3n) .peta-kota-denyut { animation-delay: 0.85s; }
.peta-kota:nth-child(3n + 1) .peta-kota-denyut { animation-delay: 1.7s; }
@keyframes peta-denyut { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(3); opacity: 0; } }
.peta-kota text {
  font-family: var(--huruf-judul, inherit); font-size: 24px; font-weight: 700; fill: #17184a;
  paint-order: stroke; stroke: #f4f4fb; stroke-width: 6px; stroke-linejoin: round;
}
.peta-kota tspan { fill: #3e4095; font-weight: 800; }
.peta-kota:hover .peta-kota-inti, .peta-kota:focus-visible .peta-kota-inti { r: 13; fill: #3e4095; }
.peta-kota:hover text, .peta-kota:focus-visible text { fill: #3e4095; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .peta-kota-denyut { animation: none; opacity: 0; } }

@media (max-width: 759px) {
  .peta-kantor { grid-template-columns: 1fr; padding: 1.1rem 0.75rem 0.75rem; border-radius: 20px; }
  .peta-kantor-teks { padding: 0 0.5rem; }
  .peta-kantor-teks > p:not(.peta-kantor-angka) { margin-bottom: 0.75rem; }
  .peta-kantor-jenis { grid-template-columns: repeat(3, 1fr); }
  .peta-kantor-jenis div { flex-direction: column-reverse; align-items: flex-start; padding: 0.5rem 0.65rem; }
  .peta-kantor-jenis dt { font-size: 0.75rem; font-weight: 500; }
  /* Label di peta sekecil ini tak terbaca; titik tetap bisa disentuh,
     dan nama kota ada di pita lompat-kota di bawahnya. */
  .peta-kota text { font-size: 34px; stroke-width: 8px; }
  .peta-kota-inti { r: 13; }
}

/* =====================================================================
   56. Peta kantor yang bisa diperbesar (assets/js/peta-kantor.js)
   ===================================================================== */
.peta-kantor-gambar { position: relative; border-radius: 20px; }
.peta-kantor-gambar .peta-svg {
  position: static; display: block; width: 100%; height: auto;
  aspect-ratio: 1000 / 633; overflow: hidden; border-radius: 18px;
}
.peta-dasar { transition: opacity 500ms ease; }
.peta-halus { opacity: 0; transition: opacity 500ms ease 200ms; pointer-events: none; }
.peta-halus.aktif { opacity: 1; }
.diperbesar .peta-dasar { opacity: 0; }
.peta-lapis-kota { transition: opacity 300ms ease; }
.diperbesar .peta-lapis-kota { opacity: 0; pointer-events: none; }

/* Ikon kantor (juga dipakai di keterangan jenis). */
.peta-ikon { width: 1.35rem; height: 1.35rem; margin-right: 0.55rem; vertical-align: -0.3rem; overflow: visible; }
.peta-kantor-jenis dt { display: flex; align-items: center; }
.peta-ikon--pusat .ik-dasar, .peta-kantor-titik--pusat .ik-dasar { fill: #d81e24; stroke: #fff; stroke-width: 3; }
.peta-ikon--pusat .ik-isi, .peta-kantor-titik--pusat .ik-isi { fill: #ffc21a; }
.peta-ikon--cabang .ik-dasar, .peta-kantor-titik--cabang .ik-dasar { fill: #3e4095; stroke: #fff; stroke-width: 3; }
.peta-ikon--cabang .ik-isi, .peta-kantor-titik--cabang .ik-isi { fill: #fff; }
.peta-ikon--kas .ik-dasar, .peta-kantor-titik--kas .ik-dasar { fill: #ffc21a; stroke: #17184a; stroke-width: 3; }

.peta-kantor-titik { opacity: 0; pointer-events: none; transition: opacity 300ms ease; cursor: pointer; outline: none; }
.peta-kantor-titik.tampil { opacity: 1; pointer-events: auto; transition-delay: 450ms; }
.peta-sasaran { fill: transparent; }
.peta-kantor-titik .skala > circle:not(.peta-sasaran), .peta-kantor-titik .skala > path { transition: transform 180ms ease; }
.peta-kantor-titik:hover .ik-dasar, .peta-kantor-titik.dipilih .ik-dasar, .peta-kantor-titik:focus-visible .ik-dasar { stroke: #17184a; stroke-width: 4; }
.peta-kantor-titik.dipilih .ik-dasar { filter: drop-shadow(0 3px 6px rgba(23, 24, 74, 0.35)); }
.peta-kantor-titik text {
  font-family: var(--huruf-judul, inherit); font-size: 17px; font-weight: 700; fill: #17184a;
  paint-order: stroke; stroke: #f4f4fb; stroke-width: 5px; stroke-linejoin: round;
}
.peta-kantor-titik--pusat text { font-size: 19px; }
.peta-kantor-titik.dipilih text, .peta-kantor-titik:hover text { fill: #3e4095; }

.peta-kantor-status { margin: 0 0 1rem; font-weight: 800; font-size: 1.15rem; color: #d81e24; min-height: 0; }
.peta-kantor-status:empty { display: none; }
.peta-kembali {
  position: absolute; left: 0.75rem; top: 0.75rem; z-index: 4;
  border: 0; border-radius: 999px; padding: 0.5rem 1rem;
  background: #17184a; color: #fff; font: inherit; font-weight: 700; font-size: 0.9rem;
  cursor: pointer; box-shadow: 0 6px 16px rgba(23, 24, 74, 0.25);
}
.peta-kembali:hover { background: #3e4095; }
.peta-kembali[hidden] { display: none; }

.peta-kartu {
  position: absolute; z-index: 3; width: min(300px, 80%);
  padding: 1rem 1.1rem; border-radius: 16px; background: #fff;
  box-shadow: 0 18px 40px rgba(23, 24, 74, 0.22);
  animation: peta-kartu-muncul 180ms ease-out;
}
.peta-kartu[hidden] { display: none; }
@keyframes peta-kartu-muncul { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.peta-kartu-jenis { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #b8860b; }
.peta-kartu-nama { display: block; font-size: 1.1rem; color: #17184a; margin: 0.15rem 0 0.4rem; }
.peta-kartu-alamat { margin: 0 0 0.5rem; font-size: 0.9rem; color: #4a4b6a; line-height: 1.45; }
.peta-kartu-telepon { margin: 0 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; }
.peta-kartu-telepon a { font-weight: 700; color: #3e4095; font-size: 0.92rem; }
.peta-kartu-aksi { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; }
.peta-kartu-aksi .tbl { font-size: 0.85rem; padding: 0.55rem 1rem; }
.peta-kartu-daftar { font-size: 0.85rem; font-weight: 700; color: #17184a; }

@media (max-width: 759px) {
  .peta-kantor-gambar .peta-svg { border-radius: 14px; }
  .peta-kantor-titik text { font-size: 30px; stroke-width: 7px; }
  .peta-kantor-titik--pusat text { font-size: 32px; }
  .peta-kantor-titik .ik-dasar { transform: scale(1.5); }
  .peta-kantor-titik .ik-isi { transform: scale(1.5); }
  /* Kartu di bawah peta, selebar peta. */
  .peta-kartu { position: static; width: auto; margin-top: 0.75rem; }
  .peta-kembali { left: 0.5rem; top: 0.5rem; padding: 0.45rem 0.85rem; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .peta-dasar, .peta-halus, .peta-lapis-kota, .peta-kantor-titik { transition: none; }
  .peta-kartu { animation: none; }
}

/* =====================================================================
   57. Wilayah kerja: peta kecamatan menempel + kartu kelompok kantor
   ===================================================================== */
.wk-tata { display: grid; gap: clamp(1rem, 3vw, 2rem); margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.wk-peta {
  margin: 0; padding: clamp(1rem, 2.5vw, 1.5rem); border-radius: 26px;
  background: radial-gradient(60% 80% at 70% 35%, rgba(255, 194, 26, 0.16), transparent 70%), #f4f4fb;
}
.wk-ringkas { display: flex; gap: 1.5rem; margin-bottom: 0.5rem; color: #17184a; font-weight: 600; }
.wk-ringkas strong { display: block; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; color: #3e4095; font-weight: 800; }
.wk-svg { display: block; width: 100%; height: auto; }
.wk-luar { stroke: #3e4095; opacity: 0.2; }
.wk-kel { stroke: #f39c12; transition: opacity 250ms ease, stroke 250ms ease; }
.wk-sebagian { opacity: 0.45; }
.wk-svg.menyorot .wk-kel { opacity: 0.22; }
.wk-svg.menyorot .wk-kel.disorot { stroke: #d81e24; opacity: 1; }
.wk-svg.menyorot .wk-sebagian.disorot { opacity: 0.55; }
.wk-kantor { pointer-events: none; }
.wk-legenda { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.85rem; color: #4a4b6a; }
.wk-legenda li { display: flex; align-items: center; }
.wk-legenda .peta-ikon { width: 1rem; height: 1rem; margin-right: 0.45rem; vertical-align: 0; }
.wk-tanda { width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.45rem; display: inline-block; }
.wk-tanda--penuh { background: #f39c12; }
.wk-tanda--sebagian { background: rgba(243, 156, 18, 0.45); }
.wk-tanda--luar { background: rgba(62, 64, 149, 0.25); }
.wk-daftar { margin-top: 0; }
.wk-daftar .wilayah-kartu { cursor: pointer; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; outline: none; }
.wk-daftar .wilayah-kartu.disorot { border-top-color: #d81e24; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(23, 24, 74, 0.05), 0 26px 44px -28px rgba(216, 30, 36, 0.55); }
.wk-daftar .wilayah-kartu:focus-visible { box-shadow: 0 0 0 3px #3e4095; }

@media (min-width: 960px) {
  .wk-tata { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .wk-peta-kolom { position: sticky; top: calc(var(--tinggi-kop, 76px) + 1.25rem); }
  .wk-daftar { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .wk-kel, .wk-daftar .wilayah-kartu { transition: none; } }

/* Tamasha juga bergambar GPT berlatar kunyit (5 Nov 2026): ikut warna kunyit. */
.lobi[data-adegan="tamasha"] { --latar: #ffc21a; --teks: #17184a; --teks-redup: rgba(23, 24, 74, 0.78); }
.lobi[data-adegan="tamasha"] .lobi-latar::after { background-image: radial-gradient(rgba(0, 0, 0, 0.09) 1px, transparent 1.4px); }

/* =====================================================================
   58. Peta pertumbuhan di lini masa Sekilas Perusahaan
   Peta menempel di atas daftar tahun; kota menyala sesuai tahun yang
   sedang dibaca (assets/js/lini-peta.js).
   ===================================================================== */
.lini-tata { position: relative; }
.lini-peta {
  position: sticky; top: calc(var(--tinggi-kop, 76px) + 0.5rem); z-index: 2;
  margin: var(--s-5) 0 var(--s-4); padding: 0.75rem 1rem 0.6rem;
  border-radius: 22px;
  background: radial-gradient(60% 80% at 70% 35%, rgba(255, 194, 26, 0.18), transparent 70%), #f4f4fb;
  box-shadow: 0 18px 30px -24px rgba(23, 24, 74, 0.45);
  display: flex; align-items: center; gap: 1rem;
}
.lini-peta-gambar { position: relative; flex: 1; max-height: 30svh; aspect-ratio: 1000 / 633; }
.lini-peta-gambar img, .lini-peta-gambar svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lini-peta figcaption { flex: none; display: grid; text-align: right; color: #17184a; font-weight: 700; }
.lini-peta-tahun {
  font-family: var(--f-judul); font-weight: 800; font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1; color: #3e4095; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lini-peta-hitung { font-size: 0.95rem; margin-top: 0.25rem; }

.tumbuh-kota text {
  font-family: var(--f-judul); font-size: 26px; font-weight: 700; fill: #17184a;
  paint-order: stroke; stroke: #f4f4fb; stroke-width: 6px; stroke-linejoin: round;
}
.tumbuh-inti { fill: #d81e24; stroke: #fff; stroke-width: 3.5; }
.tumbuh-denyut { fill: none; stroke: #d81e24; stroke-width: 3; transform-box: fill-box; transform-origin: center; opacity: 0; }
.lini-peta.hidup .tumbuh-kota { opacity: 0; transform-box: fill-box; transition: opacity 350ms ease; }
.lini-peta.hidup .tumbuh-kota.nyala { opacity: 1; }
.lini-peta.hidup .tumbuh-kota:not(.baru) .tumbuh-inti { fill: #3e4095; }
.lini-peta.hidup .tumbuh-kota:not(.baru) text { font-weight: 600; fill: #4a4b6a; }
.tumbuh-kota.baru .tumbuh-denyut { animation: peta-denyut 1.8s ease-out infinite; }
.tumbuh-kota.baru text { fill: #d81e24; }

/* Butir tahun yang sedang dibaca ditegaskan. */
.lini-butir .lini-tahun { transition: color 250ms ease, transform 250ms ease; transform-origin: left center; }
.lini-butir.aktif .lini-tahun { color: #d81e24; transform: scale(1.12); }
.lini-butir.aktif .lini-isi::before { background: #d81e24; border-color: #d81e24; }

@media (max-width: 759px) {
  .lini-peta { padding: 0.5rem 0.6rem; gap: 0.5rem; border-radius: 16px; }
  .lini-peta-gambar { max-height: 22svh; }
  .tumbuh-kota text { font-size: 38px; stroke-width: 8px; }
  .tumbuh-inti { r: 13; }
  .lini-peta-tahun { font-size: 1.6rem; }
  .lini-peta-hitung { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) { .tumbuh-kota.baru .tumbuh-denyut { animation: none; } }
@media (max-width: 759px) {
  /* Di HP hanya kota yang baru dibuka yang diberi nama; sisanya titik. */
  .lini-peta.hidup .tumbuh-kota:not(.baru) text { display: none; }
}

/* =====================================================================
   59. WMAGZ: rak majalah bersorot (6 Nov 2026)
   Pemilik: "judul dan subjudul kurang pas, rombak jadi dinamis".
   Panggung gelap dengan cahaya kunyit; sampul aktif besar di tengah,
   tetangga berjajar miring (coverflow). Letak dihitung lobi.js lewat
   --d (selisih urutan) dan --a (nilai mutlaknya).
   ===================================================================== */
.bagian-majalah.rak {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background:
    radial-gradient(55% 60% at 68% 52%, rgba(255, 194, 26, 0.22), transparent 70%),
    radial-gradient(40% 50% at 10% 100%, rgba(216, 30, 36, 0.18), transparent 70%),
    linear-gradient(160deg, #17184a 0%, #23256b 60%, #17184a 100%);
}
.rak-cahaya {
  position: absolute; z-index: -1; left: 50%; top: -10%; width: 70%; height: 90%;
  background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgba(255, 228, 150, 0.16) 20deg, transparent 40deg);
  filter: blur(18px); pointer-events: none;
  animation: rak-napas 7s ease-in-out infinite alternate;
}
@keyframes rak-napas { from { opacity: 0.55; } to { opacity: 1; } }
.rak::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px); background-size: 20px 20px;
  mask-image: linear-gradient(90deg, #000, transparent 60%);
}

.rak-baris { display: grid; gap: clamp(1rem, 3svh, 2.5rem); align-items: center; }
@media (min-width: 960px) { .rak-baris { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); } }

.rak-mata {
  margin: 0 0 0.5rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #ffc21a;
}
.bagian-majalah .rak-judul {
  margin: 0; font-family: var(--f-judul); font-weight: 800; color: #fff;
  font-size: clamp(3.2rem, min(8vw, 13svh), 7.5rem); line-height: 0.88; letter-spacing: -0.045em;
}
.rak-judul span { color: #ffc21a; }
.rak-sub { margin: 0.9rem 0 0; max-width: 34ch; color: rgba(244, 245, 255, 0.78); font-size: clamp(0.95rem, 1.3vw, 1.08rem); line-height: 1.55; }
.rak-edisi {
  display: flex; align-items: baseline; gap: 0.6rem; margin-top: clamp(1rem, 3svh, 2rem);
  padding-top: clamp(0.75rem, 2svh, 1.25rem); border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.rak-edisi-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244, 245, 255, 0.7); }
.rak-edisi-no {
  font-family: var(--f-judul); font-weight: 800; font-size: clamp(2.4rem, min(5vw, 8svh), 4rem); line-height: 1;
  color: #ffc21a; font-variant-numeric: tabular-nums; display: inline-block;
}
.rak-edisi-no.ganti { animation: rak-ganti 450ms cubic-bezier(0.22, 0.9, 0.24, 1); }
@keyframes rak-ganti { from { transform: translateY(45%); opacity: 0; } to { transform: none; opacity: 1; } }
.rak-edisi-tahun { font-weight: 700; color: rgba(244, 245, 255, 0.85); }
.rak-tombol { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(0.75rem, 2.5svh, 1.5rem); }
.rak .tbl--kedua { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: transparent; }
.rak .tbl--kedua:hover { background: #fff; color: #17184a; border-color: #fff; }
.rak-navi { display: flex; align-items: center; gap: 0.9rem; margin-top: clamp(0.75rem, 2.5svh, 1.5rem); }
.rak-panah {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.rak-panah:hover { background: #ffc21a; border-color: #ffc21a; color: #17184a; }
.rak-hitung { font-variant-numeric: tabular-nums; color: rgba(244, 245, 255, 0.7); font-weight: 600; }
.rak-hitung b { color: #fff; font-size: 1.15rem; }
.rak:not(.hidup) .rak-navi { display: none; }

/* Panggung coverflow (hanya kalau skrip jalan). */
.rak .rak-panggung { outline: none; }
.rak.hidup .rak-panggung {
  --tinggi: min(56svh, 520px);
  position: relative; height: calc(var(--tinggi) + 3rem); perspective: 1400px;
  display: block; overflow: visible; touch-action: pan-y;
}
.rak.hidup .rak-panggung::after {
  content: ""; position: absolute; left: 50%; bottom: 0.5rem; width: calc(var(--tinggi) * 0.95); height: 2.2rem;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent); pointer-events: none;
}
.rak.hidup .rak-sampul {
  position: absolute; left: 50%; top: 0; width: calc(var(--tinggi) * 0.75);
  transform:
    translateX(-50%)
    translateX(calc(var(--d, 0) * 58%))
    translateZ(calc(var(--a, 0) * -140px))
    rotateY(calc(clamp(-1, var(--d, 0), 1) * -34deg));
  z-index: calc(50 - var(--a, 0));
  opacity: calc(1 - var(--a, 0) * 0.2);
  filter: brightness(calc(1 - var(--a, 0) * 0.16)) saturate(calc(1 - var(--a, 0) * 0.12));
  transition: transform 750ms cubic-bezier(0.22, 0.9, 0.24, 1), opacity 500ms ease, filter 500ms ease;
  will-change: transform;
}
.rak.hidup .rak-sampul.jauh { opacity: 0; pointer-events: none; }
.rak.hidup .rak-sampul .sampul-gambar { display: block; }
.rak.hidup .rak-sampul .sampul-gambar img,
.rak.hidup .rak-sampul .sampul-ganti {
  width: 100%; height: auto; max-height: none; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  border-radius: 10px; box-shadow: 0 30px 50px -22px rgba(0, 0, 0, 0.7);
}
.rak.hidup .rak-sampul .sampul-ganti {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.25rem;
  background: linear-gradient(160deg, #3e4095, #17184a); border: 1px solid rgba(255, 255, 255, 0.15);
}
.rak.hidup .rak-sampul.aktif .sampul-gambar img,
.rak.hidup .rak-sampul.aktif .sampul-ganti { box-shadow: 0 40px 70px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 194, 26, 0.35); }
.rak.hidup .rak-sampul:hover .sampul-gambar img { transform: none; }
.rak.hidup .rak-sampul.aktif:hover .sampul-gambar img { transform: translateY(-6px); transition: transform 250ms ease; }
.rak.hidup .rak-sampul .sampul-kaki { display: none; }
.rak.hidup .rak-sampul:not(.aktif) { cursor: pointer; }

@media (max-width: 959px) {
  .rak-baris { gap: clamp(0.5rem, 2svh, 1rem); }
  .rak-sub { margin-top: 0.5rem; font-size: 0.92rem; }
  .rak-edisi { margin-top: 0.6rem; padding-top: 0.6rem; }
  .rak-tombol { margin-top: 0.6rem; }
  .rak-tombol .tbl { padding: 0.6rem 1rem; font-size: 0.88rem; }
  .rak-navi { display: none; }
  .rak.hidup .rak-panggung { --tinggi: min(40svh, 360px); height: calc(var(--tinggi) + 1.5rem); }
  .rak.hidup .rak-sampul { transform:
    translateX(-50%) translateX(calc(var(--d, 0) * 46%)) translateZ(calc(var(--a, 0) * -120px))
    rotateY(calc(clamp(-1, var(--d, 0), 1) * -38deg)); }
}
@media (max-width: 959px) and (max-height: 760px) {
  .rak.hidup .rak-panggung { --tinggi: min(34svh, 300px); }
  .rak-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rak-cahaya { animation: none; }
  .rak.hidup .rak-sampul { transition: opacity 200ms ease; }
  .rak-edisi-no.ganti { animation: none; }
}
.rak-teks { position: relative; z-index: 60; }
/* Peta pertumbuhan: gambar titik jangan melar mengikuti kotak (dulu
   object-fit bawaan "fill" membuatnya lebih lebar dari lapisan penanda,
   sehingga kota pantai tampak di laut). Keduanya kini sama-sama "contain". */
.lini-peta-gambar img { object-fit: contain; }
/* .naskah img memberi margin atas; di peta ini gambar dan lapisan penanda
   harus menumpuk persis, jadi margin dan bayangannya dihapus. */
.naskah .lini-peta-gambar img { margin: 0; border-radius: 0; box-shadow: none; max-width: none; }
/* Sampul di belakang padat seperti majalah sungguhan (pemilik 6 Nov 2026:
   "jangan tembus ke depannya"): hanya meredup, tidak transparan. */
.rak.hidup .rak-sampul { opacity: 1; filter: brightness(calc(1 - var(--a, 0) * 0.17)); }
.rak.hidup .rak-sampul.jauh { opacity: 0; }
.rak.hidup .rak-sampul .sampul-gambar { position: relative; border-radius: 10px; background: #fff; }
/* Punggung majalah dan kilap kertas. */
.rak.hidup .rak-sampul .sampul-gambar::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, rgba(255, 255, 255, 0.18) 1.6%, rgba(0, 0, 0, 0.08) 3.2%, transparent 6%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, transparent 38%);
}

/* =====================================================================
   60. Beranda bagian 7, 8, 10 (rombak 6 Nov 2026)
   ===================================================================== */
/* ---------- 7. Pencari kantor ---------- */
.dekat--cari .dekat-baris { align-items: center; }
@media (min-width: 960px) { .dekat--cari .dekat-baris { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.dekat--cari h2 { font-size: clamp(1.7rem, min(3.6vw, 6svh), 2.8rem); }
.dekat-aksi { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: clamp(0.8rem, 2.5svh, 1.4rem) 0; }
.dekat-lokasi { display: inline-flex; align-items: center; gap: 0.45rem; }
.dekat-lokasi svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.dekat-lokasi.memuat { opacity: 0.7; cursor: progress; }
.dekat--cari .tbl--kedua { color: #fff; border-color: rgba(255, 255, 255, 0.55); background: transparent; }
.dekat--cari .tbl--kedua:hover { background: #fff; color: #17184a; }
.dekat-kota { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dekat-kota button {
  font: inherit; font-size: 0.85rem; font-weight: 600; color: #fff; cursor: pointer;
  padding: 0.38rem 0.8rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06); transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.dekat-kota button:hover { border-color: #ffc21a; }
.dekat-kota button[aria-pressed="true"] { background: #ffc21a; border-color: #ffc21a; color: #17184a; }
.dekat-hasil { margin-top: clamp(0.8rem, 2.5svh, 1.25rem); min-height: 3rem; }
.dekat--cari .dekat-petunjuk { font-size: 0.92rem; color: rgba(244, 245, 255, 0.7); margin: 0; }
.dekat--cari .dekat-hasil-judul { margin: 0 0 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #ffc21a; max-width: none; }
.dekat-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.dekat-kartu {
  padding: 0.7rem 0.9rem; border-radius: 14px; background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12); animation: dekat-muncul 300ms ease-out both;
}
.dekat-kartu:nth-child(2) { animation-delay: 60ms; }
.dekat-kartu:nth-child(3) { animation-delay: 120ms; }
@keyframes dekat-muncul { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dekat-kartu-kepala { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.dekat-kartu-jenis { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244, 245, 255, 0.65); }
.dekat-jarak { font-weight: 800; color: #ffc21a; font-variant-numeric: tabular-nums; }
.dekat-kartu-nama { display: block; color: #fff; margin: 0.1rem 0 0.15rem; }
.dekat--cari .dekat-kartu-alamat { margin: 0; font-size: 0.85rem; color: rgba(244, 245, 255, 0.72); max-width: none; }
.dekat--cari .dekat-kartu-aksi { margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.88rem; max-width: none; }
.dekat-kartu-aksi a { color: #fff; font-weight: 700; }
.dekat-kartu-aksi .dekat-maps { color: #ffc21a; }

.dekat-peta {
  margin: 0; padding: clamp(0.75rem, 2vw, 1.25rem); border-radius: 26px;
  background: radial-gradient(60% 70% at 60% 40%, rgba(255, 194, 26, 0.14), transparent 70%), rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dekat-svg { display: block; width: 100%; height: auto; max-height: 58svh; }
.dekat-dasar { filter: brightness(0) invert(1); opacity: 0.32; }
.dekat-titik .skala { transform: scale(0.62); }
.dekat-titik { transition: opacity 250ms ease; }
.dekat-cincin { fill: none; stroke: #ffc21a; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.dekat--cari.menyorot .dekat-titik:not(.sorot) { opacity: 0.3; }
.dekat-titik.sorot .dekat-cincin { opacity: 1; }
.dekat-titik.utama .dekat-cincin { animation: peta-denyut 1.6s ease-out infinite; }
.dekat-anda circle:last-child { fill: #3db8ff; stroke: #fff; stroke-width: 4; }
.dekat-anda-denyut { fill: none; stroke: #3db8ff; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: peta-denyut 1.8s ease-out infinite; }
.dekat-legenda { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.5rem; font-size: 0.8rem; color: rgba(244, 245, 255, 0.75); }
.dekat-legenda span { display: inline-flex; align-items: center; }
.dekat-legenda .peta-ikon { width: 1rem; height: 1rem; margin-right: 0.35rem; }

@media (max-width: 959px) {
  .dekat--cari .dekat-baris { gap: 0.75rem; }
  .dekat--cari p { font-size: 0.92rem; }
  .dekat-kota { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1.25rem; padding-inline: 1.25rem; }
  .dekat-kota::-webkit-scrollbar { display: none; }
  .dekat-kota button { white-space: nowrap; }
  .dekat-svg { max-height: 30svh; }
  .dekat-peta { padding: 0.5rem; border-radius: 18px; }
  .dekat-titik .skala { transform: scale(0.9); }
}

/* ---------- 8. Kabar terbaru: satu utama + daftar ---------- */
.kabar-kepala { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: clamp(1rem, 3svh, 1.75rem); }
.kabar-kepala h2 { margin: 0.2rem 0 0; font-size: clamp(1.8rem, min(4vw, 6svh), 3rem); letter-spacing: -0.03em; }
.kabar-bento { display: grid; gap: clamp(0.9rem, 2vw, 1.5rem); }
@media (min-width: 960px) { .kabar-bento { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; } }
.kabar-utama {
  position: relative; display: block; overflow: hidden; border-radius: 24px; min-height: clamp(260px, 52svh, 520px);
  color: #fff; text-decoration: none; background: #17184a; isolation: isolate;
}
.kabar-utama img, .kabar-utama-kosong { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 600ms cubic-bezier(0.22, 0.9, 0.24, 1); }
.kabar-utama-kosong { background: linear-gradient(140deg, #3e4095, #17184a); }
.kabar-utama::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(13, 14, 50, 0.92) 100%); }
.kabar-utama:hover img { transform: scale(1.04); }
.kabar-utama-isi { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.1rem, 3vw, 2rem); display: grid; gap: 0.5rem; }
.kabar-utama-isi strong { font-family: var(--f-judul); font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
.kabar-ringkas { color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kabar-meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; }
.kabar-utama .lencana { background: #ffc21a; color: #17184a; }
.kabar-utama time { color: rgba(255, 255, 255, 0.8); }
.kabar-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.6rem, 1.5vw, 1rem); align-content: stretch; }
.kabar-baris {
  display: grid; grid-template-columns: clamp(84px, 9vw, 128px) minmax(0, 1fr); gap: 1rem; align-items: center; height: 100%;
  padding: 0.7rem; border-radius: 18px; background: var(--kertas, #fff); text-decoration: none; color: inherit;
  box-shadow: 0 1px 0 rgba(23, 24, 74, 0.05), 0 18px 36px -28px rgba(23, 24, 74, 0.5);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.kabar-baris:hover { transform: translateX(4px); box-shadow: 0 1px 0 rgba(23, 24, 74, 0.05), 0 22px 40px -24px rgba(23, 24, 74, 0.55); }
.kabar-mini { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: linear-gradient(140deg, #ffd65c, #f39c12); }
.kabar-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kabar-baris-isi { display: grid; gap: 0.35rem; }
.kabar-baris strong {
  font-family: var(--f-judul); font-size: clamp(0.98rem, 1.3vw, 1.12rem); line-height: 1.3; color: #17184a;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kabar-baris time { color: var(--redup); }
@media (max-width: 959px) {
  .kabar-utama { min-height: 34svh; border-radius: 18px; }
  .kabar-utama-isi strong { font-size: 1.15rem; }
  .kabar-ringkas { display: none; }
  .kabar-baris { grid-template-columns: 72px minmax(0, 1fr); gap: 0.75rem; padding: 0.5rem; border-radius: 14px; }
  .kabar-baris strong { font-size: 0.92rem; -webkit-line-clamp: 2; }
}

/* ---------- 10. Laporan dan kontak ---------- */
.bawah-baris { display: grid; gap: clamp(1rem, 3vw, 2.5rem); align-items: stretch; }
@media (min-width: 960px) { .bawah-baris { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.bawah-laporan h2, .bawah-kontak h2 { font-size: clamp(1.6rem, min(3.4vw, 5.5svh), 2.5rem); letter-spacing: -0.03em; margin: 0.2rem 0 0.5rem; }
.bawah-laporan > p { color: var(--redup); max-width: 46ch; margin: 0 0 1rem; }
.bawah-dok { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.bawah-dok .dok {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem;
  padding: 0.85rem 1rem; border-radius: 16px; background: #fff; border: 1px solid rgba(23, 24, 74, 0.06);
  box-shadow: 0 16px 30px -26px rgba(23, 24, 74, 0.55); transition: transform 200ms ease, border-color 200ms ease;
}
.bawah-dok .dok:hover { transform: translateY(-2px); border-color: #ffc21a; }
.bawah-dok .dok-ikon {
  width: 2.6rem; height: 3.2rem; display: grid; place-items: center; border-radius: 6px 12px 6px 6px;
  background: linear-gradient(160deg, #e8383d, #b3141a); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em;
  box-shadow: 3px 3px 0 rgba(23, 24, 74, 0.12);
}
.bawah-dok .dok-judul { font-weight: 700; color: #17184a; }
.bawah-dok .dok-ukuran { font-size: 0.8rem; color: var(--redup); }
.bawah-kontak {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: clamp(1.25rem, 3vw, 2.25rem);
  background: radial-gradient(70% 80% at 100% 0%, rgba(255, 255, 255, 0.45), transparent 60%), #ffc21a; color: #17184a;
}
.bawah-kontak::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1.4px); background-size: 18px 18px;
  mask-image: linear-gradient(200deg, #000, transparent 60%);
}
.bawah-wema {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; text-align: left;
  margin: 0.75rem 0 1rem; padding: 0.9rem 1rem; border: 0; border-radius: 20px; cursor: pointer; font: inherit;
  background: #17184a; color: #fff; box-shadow: 0 20px 36px -22px rgba(23, 24, 74, 0.8); transition: transform 200ms ease;
}
.bawah-wema:hover { transform: translateY(-2px); }
.bawah-wema img { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #ffc21a; object-fit: cover; }
.bawah-wema strong { display: block; font-size: 1.1rem; }
.bawah-wema span span { font-size: 0.88rem; color: rgba(244, 245, 255, 0.78); }
.bawah-wema-panah { font-size: 1.4rem; color: #ffc21a; }
.bawah-jalur { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.bawah-jalur a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0.9rem; border-radius: 14px;
  background: rgba(255, 255, 255, 0.55); color: #17184a; text-decoration: none; transition: background-color 150ms ease;
}
.bawah-jalur a:hover { background: #fff; }
.bawah-jalur span { font-size: 0.85rem; color: rgba(23, 24, 74, 0.72); }
.bawah-jalur strong { font-size: 0.98rem; text-align: right; overflow-wrap: anywhere; }
.bawah-janji { margin: 0.9rem 0 0; font-size: 0.85rem; color: rgba(23, 24, 74, 0.8); }
.bawah-janji a { color: #17184a; font-weight: 700; }
@media (max-width: 959px) {
  .bawah-dok .dok { padding: 0.6rem 0.75rem; }
  .bawah-dok .dok-ikon { width: 2.1rem; height: 2.6rem; }
  .bawah-dok .dok:nth-child(n + 4) { display: none; }
  .bawah-kontak { border-radius: 20px; }
}

/* 60b. Penyetelan sesudah potret pertama (6 Nov 2026). */
.dekat-kanan { display: grid; gap: 0.75rem; align-content: center; }
.dekat-kanan .dekat-hasil { margin-top: 0; min-height: 0; }
@media (min-width: 960px) {
  .dekat-kanan .dekat-daftar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dekat-kanan .dekat-kartu { padding: 0.6rem 0.75rem; }
  .dekat--cari .dekat-kanan .dekat-kartu-alamat { font-size: 0.78rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dekat-kanan .dekat-kartu-nama { font-size: 0.92rem; }
  .dekat--cari .dekat-kanan .dekat-kartu-aksi { flex-direction: column; gap: 0.15rem; font-size: 0.82rem; }
  .dekat-svg { max-height: 46svh; }
}
.kabar-utama::after { background: linear-gradient(180deg, transparent 20%, rgba(13, 14, 50, 0.78) 52%, rgba(13, 14, 50, 0.96) 100%); }
.kabar-utama-isi strong { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.kabar-mini { display: grid; place-items: center; }
.kabar-mini .kabar-ilus { width: 82%; height: auto; object-fit: contain; }
.bawah-wema strong { color: #fff; }
@media (max-width: 959px) {
  .bawah-laporan > p { display: none; }
  .bawah-laporan h2, .bawah-kontak h2 { font-size: 1.5rem; }
  .bawah-wema { margin: 0.5rem 0 0.75rem; }
}

/* 60c. HP: deret kota tanpa margin negatif (membuat halaman meluap ke
   samping), dan HP pendek dipadatkan agar bagian 7 dan 8 pas satu layar. */
@media (max-width: 959px) {
  .dekat-kota { margin-inline: 0; padding-inline: 0; }
}
@media (max-width: 959px) and (max-height: 760px) {
  .dekat--cari h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
  .dekat--cari .dekat-teks > p { font-size: 0.86rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dekat-aksi { margin: 0.6rem 0; }
  .dekat-aksi .tbl { padding: 0.55rem 0.9rem; font-size: 0.85rem; }
  .dekat-svg { max-height: 24svh; }
  .kabar-utama { min-height: 28svh; }
  .kabar-daftar li:nth-child(n + 3) { display: none; }
  .kabar-kepala { margin-bottom: 0.75rem; }
}

/* =====================================================================
   61. WEMA berlabuh di bagian kontak beranda (6 Nov 2026)
   ===================================================================== */
.wema-peluncur { view-transition-name: wema; transition: transform 200ms var(--lengkung-pegas, ease), opacity 200ms ease; }
.wema-mock.berlabuh .wema-peluncur { opacity: 0; transform: scale(0.85); pointer-events: none; view-transition-name: none; }
.wema-mock.berlabuh .wema-sapa { display: none; }
.bawah-wema.menunggu { visibility: hidden; }
.bawah-wema.jadi { view-transition-name: wema; }
.bawah-wema.jadi > * { animation: wema-isi-muncul 280ms ease-out both; }
.bawah-wema.jadi > :nth-child(2) { animation-delay: 60ms; }
.bawah-wema.jadi > :nth-child(3) { animation-delay: 120ms; }
@keyframes wema-isi-muncul { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.wema-hantu {
  position: fixed; z-index: 61; pointer-events: none; overflow: hidden;
  display: flex; align-items: center; gap: 0.6rem; padding: 5px 1rem 5px 5px;
  background: #17184a; color: #fff; font-family: var(--f-judul); font-weight: 700; font-size: 0.95rem; white-space: nowrap;
  box-shadow: 0 20px 40px -16px rgba(14, 15, 51, 0.65);
  will-change: left, top, width, height;
}
.wema-hantu img { flex: none; border-radius: 50%; object-fit: cover; border: 3px solid #ffc21a; }
@media (max-width: 959px) { .wema-hantu { padding: 5px; } }

/* =====================================================================
   62. Alur pengaduan bergambar (6 Nov 2026)
   Empat langkah tersambung garis yang terisi saat masuk layar; di HP
   tersusun tegak. Versi ringkas (tanpa ilustrasi) di atas formulir.
   ===================================================================== */
.alur {
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 26px; background: radial-gradient(60% 80% at 85% 0%, rgba(255, 194, 26, 0.18), transparent 70%), #f4f4fb;
}
.alur-kepala h2 { margin: 0.2rem 0 clamp(1rem, 3vw, 1.5rem); font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.025em; }
.alur-langkah { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; position: relative; counter-reset: alur; }
@media (min-width: 760px) {
  .alur-langkah { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Garis penghubung antar nomor, terisi dari kiri saat masuk layar. */
  .alur-langkah::before, .alur-langkah::after {
    content: ""; position: absolute; left: 1.1rem; right: calc(25% - 1rem); top: 1.1rem; height: 3px; border-radius: 3px;
  }
  .alur-langkah::before { background: rgba(62, 64, 149, 0.15); }
  .alur-langkah::after { background: linear-gradient(90deg, #3e4095, #ffc21a); transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(0.22, 0.9, 0.24, 1) 0.2s; }
  .alur.tampil .alur-langkah::after { transform: scaleX(1); }
}
.alur-butir { position: relative; display: grid; align-content: start; gap: 0.4rem; }
.alur-no {
  position: relative; z-index: 1; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #3e4095; font-weight: 800; border: 3px solid #3e4095;
  transition: background-color 300ms ease, color 300ms ease;
}
.alur.tampil .alur-no { background: #3e4095; color: #fff; }
.alur.tampil .alur-butir:nth-child(1) .alur-no { transition-delay: 0.2s; }
.alur.tampil .alur-butir:nth-child(2) .alur-no { transition-delay: 0.55s; }
.alur.tampil .alur-butir:nth-child(3) .alur-no { transition-delay: 0.9s; }
.alur.tampil .alur-butir:nth-child(4) .alur-no { transition-delay: 1.25s; background: #ffc21a; color: #17184a; border-color: #ffc21a; }
.alur-ilus { width: 88px; height: 88px; margin: 0.25rem 0 0; }
.alur-butir strong { font-family: var(--f-judul); font-size: 1.08rem; color: #17184a; }
.alur-butir p { margin: 0; font-size: 0.9rem; color: #4a4b6a; line-height: 1.5; }
.alur-waktu {
  justify-self: start; margin-top: 0.2rem; padding: 0.25rem 0.65rem; border-radius: 999px;
  background: #fff; color: #17184a; font-size: 0.8rem; font-weight: 800; box-shadow: 0 1px 0 rgba(23, 24, 74, 0.08);
}
.alur-butir:last-child .alur-waktu { background: #17184a; color: #ffc21a; }
.alur-cabang {
  margin-top: clamp(1rem, 3vw, 1.5rem); padding: 1rem 1.2rem; border-radius: 18px; background: #17184a; color: #fff;
  display: grid; gap: 0.9rem; align-items: center;
}
@media (min-width: 760px) { .alur-cabang { grid-template-columns: minmax(0, 1fr) auto; } }
.alur-cabang strong { color: #ffc21a; }
.alur-cabang p { margin: 0.25rem 0 0; color: rgba(244, 245, 255, 0.82); font-size: 0.92rem; }
@media (max-width: 759px) {
  .alur-langkah { gap: 0; }
  .alur-butir { grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: 0.9rem; padding-bottom: 1.1rem; }
  .alur-butir > :not(.alur-no) { grid-column: 2; }
  .alur-no { grid-row: 1 / span 4; }
  /* Garis tegak antar nomor. */
  .alur-butir:not(:last-child)::before {
    content: ""; position: absolute; left: calc(1.1rem - 1.5px); top: 2.2rem; bottom: 0; width: 3px; background: rgba(62, 64, 149, 0.2);
  }
  .alur-ilus { width: 64px; height: 64px; }
}
.alur--ringkas { margin-top: clamp(1.25rem, 3vw, 2rem); }
.alur--ringkas .alur-kepala h2 { font-size: 1.25rem; margin-bottom: 0.9rem; }
.alur--ringkas .alur-butir p { font-size: 0.85rem; }

/* Kotak "Butuh cepat?" di samping formulir: WEMA dulu, lalu telepon. */
.kotak-cepat { display: grid; gap: 0.6rem; }
.bawah-wema--kecil { margin: 0.25rem 0 0; padding: 0.6rem 0.75rem; grid-template-columns: auto minmax(0, 1fr); border-radius: 16px; }
.bawah-wema--kecil img { width: 44px; height: 44px; }
.bawah-wema--kecil strong { font-size: 1rem; color: #fff; }
.kotak-cepat-tel {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.65rem 0.8rem;
  border-radius: 14px; background: #fff; color: #17184a; text-decoration: none; border: 1px solid rgba(23, 24, 74, 0.08);
}
.kotak-cepat-tel span { font-size: 0.85rem; color: #4a4b6a; }
.kotak-cepat-tel:hover { border-color: #ffc21a; }

/* HP: alur ringkas di atas formulir jadi kisi 2x2 tanpa uraian, supaya formulir cepat terlihat. */
@media (max-width: 759px) {
  .alur--ringkas { padding: 1rem; }
  .alur--ringkas .alur-langkah { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .alur--ringkas .alur-butir { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); column-gap: 0.5rem; padding: 0.6rem; border-radius: 14px; background: #fff; }
  .alur--ringkas .alur-butir::before { display: none; }
  .alur--ringkas .alur-no { width: 1.8rem; height: 1.8rem; border-width: 2px; font-size: 0.85rem; grid-row: 1 / span 2; }
  .alur--ringkas .alur-butir p { display: none; }
  .alur--ringkas .alur-butir strong { font-size: 0.92rem; }
  .alur--ringkas .alur-waktu { font-size: 0.72rem; padding: 0.15rem 0.5rem; background: #f4f4fb; }
}

/* WEMA berlabuh (wema-tombol.js): kelas di <html>, berlaku untuk pratinjau dan Rhalo. */
.wema-berlabuh .wema-sapa { display: none; }
.bawah-jalur strong { white-space: nowrap; }