@charset "utf-8";
/* =============================================================================
   BPR Cakrabhumi Sentosa, desain contoh (lembaga fiktif)
   Sumber desain: stitch/14-koperasi-bpr/ (DESIGN.md + PROMPTS-WEB/STATE)

   MODE WARNA DIKUNCI TERANG. SELURUH rasio di berkas ini DIHITUNG SENDIRI dengan
   rumus WCAG (relative luminance) untuk latar terang, bukan disalin dari brief
   dan bukan diwarisi dari situs 08.

   HASIL HITUNGAN, DAN PUTUSANNYA:
     tinta  #0D2B26 di atas latar #F6F9F7 = 14,25:1   LULUS (teks utama)
     redup  #4C645E di atas latar         =  6,02:1   LULUS (teks sekunder)
     tinta  di atas aksen #D4A02C         =  6,37:1   LULUS → teks di atas aksen
     putih  di atas aksen                 =  2,37:1   GAGAL → tidak pernah dipakai
     aksen  di atas latar                 =  2,24:1   GAGAL lantai 3:1
     garis kartu #DCE5E0 di atas latar    =  1,21:1   dekoratif saja
   Angka DESIGN.md paket ini TERBUKTI BENAR sampai dua desimal (6,37 · 2,37 ·
   14,25 · 6,02 cocok semua), tapi ia diperiksa, bukan dipercaya: angka DESIGN.md
   paket 02 pernah tertulis 2,03:1 padahal kenyataannya 1,47:1.

   PUTUSAN AKSEN: 2,24:1 ada jauh DI BAWAH lantai 3:1, jadi emas #D4A02C di paket
   ini ISIAN SAJA. Ia DILARANG jadi warna teks, garis kendali, garis bawah aktif,
   cincin fokus, atau ikon fungsional. Teks di atasnya wajib TINTA (6,37:1).

   TIGA AKIBAT YANG DITEGAKKAN DI BERKAS INI, dan ketiganya lahir dari angka di
   atas, bukan disalin dari paket mana pun:
     · Margin teks di atas aksen LEBAR (6,37 lawan 4,5 → sisa 1,87), jadi tidak
       ada larangan ukuran khusus di atas aksen. Yang tipis di paket ini justru
       TEPI ISIANNYA: 2,24:1 berarti tombol beraksen nyaris tidak punya batas yang
       terlihat di atas latar. Karena itu SETIAP isian aksen yang berperan sebagai
       kendali diberi garis 1px --tinta (14,25:1). Tepinya, bukan hurufnya, yang
       perlu ditolong di sini.
     · Keadaan hover/tekan MENGGELAPKAN aksen, kebalikan dari situs 08. Diperiksa:
       #C08F22 menyisakan tinta 5,17:1 (masih lulus AA) dan justru menaikkan
       pemisahan isian terhadap latar dari 2,24 ke 2,75. Di situs 08 penggelapan
       terlarang karena menjatuhkan labelnya sendiri di bawah 4,5, di sini tidak,
       dan meniru putusan itu tanpa menghitung akan salah.
     · Cincin fokus, garis bawah item aktif, ikon fungsional, dan border kendali
       semuanya TINTA atau --garis-kendali, tidak pernah aksen.

   ⛔ RAMBU ISI (DESIGN.md + ATURAN-KONTEN.md), berlaku di CSS maupun di HTML:
   TIDAK ADA nomor izin usaha bank, nomor badan hukum, nomor sertifikat, atau
   nomor registrasi apa pun, status saja. TIDAK ADA lambang OJK atau LPS yang
   dirender; keduanya hanya kalimat teks. TIDAK ADA janji imbal hasil, kepastian
   persetujuan kredit, atau kecepatan cair tanpa syarat. Suku bunga selalu tampil
   sebagai informasi berjalan berikut tanggal berlakunya, tidak pernah dibesarkan
   jadi angka pahlawan.

   SATU KELUARGA HURUF: Manrope. 400 isi, 500 label, 700 judul, 800 uang dan suku
   bunga. Manrope PUNYA `tnum` sungguhan (diperiksa dengan fontTools), jadi kolom
   rupiah di situs ini benar-benar sejajar, lihat catatan di _font-face.css.
   ========================================================================== */

@import url("aset/huruf/_font-face.css");

/* -----------------------------------------------------------------------------
   1. TOKEN, tiap warna punya PERAN dan RASIO TERHITUNG di sebelahnya.
   -------------------------------------------------------------------------- */
:root {
  /* Permukaan */
  --latar:        #F6F9F7;   /* alas halaman */
  --kertas:       #FFFFFF;   /* alas kartu di atas --latar; tinta 15,10:1 */
  --sentuh:       #EAF0EC;   /* hover/tekan; tinta di atasnya 13,07:1 */

  /* Teks */
  --tinta:        #0D2B26;   /* 14,25:1 di atas --latar, teks utama, ukuran apa pun */
  --redup:        #4C645E;   /* 6,02:1 di atas --latar, teks sekunder, LULUS AA */

  /* Aksen, ISIAN SAJA */
  --aksen:        #D4A02C;   /* 2,24:1 di atas latar → ISIAN saja: tombol, cip, pita
                                statistik, nomor langkah, kepala panel hasil.
                                DILARANG jadi warna teks, garis bawah aktif, border
                                kendali, cincin fokus, atau ikon fungsional, semuanya butuh minimal 3:1 dan 2,24 jauh dari sana.
                                Teks DI ATAS aksen wajib --tinta (6,37:1); putih di
                                atasnya 2,37:1 dan GAGAL AA. Karena tepi isiannya
                                cuma 2,24:1 terhadap latar, tiap isian aksen yang
                                berperan sebagai kendali diberi garis --tinta. */
  --aksen-tekan:  #C08F22;   /* hover/tekan LEBIH GELAP: tinta di atasnya 5,17:1 dan
                                isiannya naik ke 2,75:1 terhadap latar. Kebalikan
                                dari situs 08, dan itu hasil hitungan, bukan selera. */
  --aksen-alas:   #FAF0D8;   /* alas lembut; tinta di atasnya 13,32:1, redup 5,63:1 */
  --nonaktif:     #E4EAE6;   /* alas kendali mati; redup di atasnya 5,23:1 */

  /* Garis */
  --garis:        #DCE5E0;   /* 1,21:1, DEKORATIF saja (pemisah, border kartu).
                                DILARANG untuk border kendali interaktif. */
  --garis-kendali:#4C645E;   /* 6,02:1, border input, checkbox, tombol outline. */

  /* Semantik, dihitung terhadap --latar */
  --sukses:       #0F6B45;   /* 6,17:1 */
  --galat:        #B3261E;   /* 6,17:1 */
  --peringatan:   #7A4B00;   /* 6,99:1 */
  --sukses-alas:  #E7F2EC;   /* tinta di atasnya 13,17:1 */
  --galat-alas:   #FBEAE8;   /* tinta di atasnya 12,97:1 */
  --peringatan-alas:#F7EEDC; /* tinta di atasnya 13,10:1 */

  /* Huruf. SATU keluarga, sesuai DESIGN.md: Manrope untuk judul, isi, uang, dan
     suku bunga.
     ⚠️ DIPERIKSA dengan fontTools, bukan ditebak dari unicode-range:
       · U+2192 (→) dan U+2190 (←) TIDAK ADA. Kali ini rentang yang dideklarasikan
         memang jujur, ia menyebut U+2191 dan U+2193 saja. Halaman ini karena itu
         tidak pernah memakai panah sebagai aksara; arah digambar dengan ikon SVG.
       · U+00B7 (·), U+2013 (–), U+2014 (-), U+2019 (’), U+2026 (…), U+00D7 (×),
         U+00B0 (°), U+0025 (%), U+00A9 (©) SEMUANYA ADA. Halaman ini memakai
         ·, –, -, …, % dan ©.
       · Manrope PUNYA fitur `tnum`, dan fitur itu benar-benar mengubah lebar:
         lebar angka bawaannya 716–1240 (angka "1" paling sempit), sementara
         seluruh varian tabularnya 1240 rata. Jadi `tabular-nums` di berkas ini
         BEKERJA, kebalikan dari Fraunces di situs 08, tempat `tabular-nums`
         mati diam-diam. Untuk situs yang isinya kolom rupiah, ini bukan detail.
     Rantai cadangan diisi huruf sistem yang pasti punya glif yang kurang. */
  --f-judul: "Manrope", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  --f-isi:   "Manrope", ui-sans-serif, "Segoe UI", system-ui, sans-serif;

  /* LANTAI UKURAN TEKS, jangan turun di bawah ini di mana pun. */
  --t-isi:   1rem;      /* 16px, teks isi */
  --t-kecil: 0.875rem;  /* 14px, sekunder */
  --t-label: 0.75rem;   /* 12px, label huruf besar, BATAS BAWAH */

  /* Ritme */
  --r1: .25rem; --r2: .5rem; --r3: .75rem; --r4: 1rem;
  --r5: 1.5rem; --r6: 2rem; --r7: 3rem; --r8: 4rem; --r9: 6rem;

  --radius: 8px;                    /* DESIGN.md: radius 8px */
  --lebar-isi: 1240px;
  --tepi: 1.25rem;

  --bar-atas: 0px;
  --bar-bawah: calc(56px + env(safe-area-inset-bottom, 0px));
}

/* -----------------------------------------------------------------------------
   2. DASAR
   -------------------------------------------------------------------------- */
/* WAJIB, dan sempat hilang saat kepala berkas ini ditulis ulang: tanpa baris ini
   padding-inline .bungkus DITAMBAHKAN ke lebar 100%, jadi tiap halaman meluber
   tepat 40px (2 × --tepi) di layar sempit dan 40px di navbar pada layar lebar.
   Ketiga audit teks tetap hijau saat itu, hanya pengukur responsif yang melihat. */
*, *::before, *::after { box-sizing: border-box; }

/* Atribut `hidden` KALAH oleh `display` mana pun yang ditulis di CSS. Gejalanya
   mahal dan hanya terlihat setelah dirender: pesan galat formulir tampil sejak
   halaman dibuka karena .pesan menyetel display:flex. Satu aturan ini menutup
   seluruh kelasnya. */
[hidden] { display: none !important; }

html {
  /* Jangkar berhenti tepat di bawah bar, dan ini juga menyelamatkan elemen yang
     menerima fokus keyboard (teknik W3C C43 untuk WCAG 2.2 SC 2.4.11). */
  scroll-padding-top: calc(var(--bar-atas) + var(--r4));
  scroll-padding-bottom: calc(var(--bar-bawah) + var(--r4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--latar);
  color: var(--tinta);
  font-family: var(--f-isi);
  font-size: var(--t-isi);
  line-height: 1.6;
  /* Ruang untuk bar tab bawah di mobile supaya isi terakhir tidak tertutup. */
  padding-bottom: var(--bar-bawah);
}

h1, h2, h3, h4 { font-family: var(--f-judul); font-weight: 700; line-height: 1.2; margin: 0; }
h1 { font-size: clamp(2.125rem, 5vw, 3.375rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.125rem, 1.9vw, 1.375rem); }
p  { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

/* Uang dan suku bunga: Manrope 800, sesuai DESIGN.md. `tabular-nums` di sini
   BENAR-BENAR bekerja, Manrope punya fitur OpenType `tnum` dan lebar angka
   bawaannya memang tidak seragam (716–1240 per 1000 upem), jadi tanpa fitur itu
   kolom rupiah bergeser antar-baris. Diperiksa dengan fontTools pada berkas woff2
   yang ada di aset/huruf/, bukan dari dokumentasi hurufnya.
   Di situs 08 pemeriksaan yang sama justru menemukan kebalikannya, dan angka
   besarnya terpaksa dipindah ke huruf lain. Di sini tidak perlu: satu huruf
   menutup seluruh kolom angka. */
.angka { font-family: var(--f-judul); font-weight: 800; font-variant-numeric: tabular-nums; }
/* Angka yang DIBANDINGKAN LAWAN BARIS LAIN, huruf yang sama, bobot lebih ringan
   supaya tabel tidak berubah jadi dinding tebal. */
.angka-tabel { font-family: var(--f-isi); font-weight: 700; font-variant-numeric: tabular-nums; }

/* CINCIN FOKUS, SELALU 2px tinta dengan offset 2px. Di paket ini bukan pilihan
   melainkan keharusan: emas 2,24:1 tidak sampai ke lantai 3:1, jadi cincin fokus
   beraksen adalah cincin fokus yang tidak terlihat. Lembar state S1, S2, dan S8
   menuntut cincin fokus 2px beroffset 2px di kolom, tombol, DAN tiap tautan
   navigasi, ketiganya dilayani aturan tunggal ini. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Lewati ke konten, wajib ada, dan wajib terlihat saat difokus. */
.lewati {
  position: absolute; left: var(--tepi); top: -100px; z-index: 100;
  background: var(--tinta); color: #fff; padding: var(--r3) var(--r4);
  border-radius: var(--radius); font-weight: 600; text-decoration: none;
}
.lewati:focus-visible { top: var(--r3); }

/* -----------------------------------------------------------------------------
   3. TATA LETAK
   -------------------------------------------------------------------------- */
.bungkus { width: 100%; max-width: var(--lebar-isi); margin-inline: auto; padding-inline: var(--tepi); }
.bagian { padding-block: var(--r7); }
.bagian + .bagian { border-top: 1px solid var(--garis); }
@media (min-width: 768px) { .bagian { padding-block: var(--r8); } }

.kepala-bagian { margin-bottom: var(--r5); max-width: 62ch; }
.kepala-bagian p { color: var(--redup); margin-top: var(--r2); }

.kisi { display: grid; gap: var(--r4); }
@media (min-width: 640px)  { .kisi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .kisi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                             .kisi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 899px) { .kisi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Tiap anak kisi WAJIB boleh menyusut, kalau tidak isi yang lebar mendorong
   lebar halaman dan yang dilaporkan meluber justru elemen lain. */
.kisi > * { min-width: 0; }

/* -----------------------------------------------------------------------------
   4. PITA "DESAIN CONTOH", tidak bisa ditutup, wajib di tiap halaman
   -------------------------------------------------------------------------- */
.pita {
  background: var(--tinta); color: #fff;   /* 15,10:1 */
  font-size: 0.8125rem; text-align: center;
  padding: var(--r2) var(--tepi);
}

/* -----------------------------------------------------------------------------
   5. NAVBAR (desktop), di mobile digantikan bar tab bawah
   -------------------------------------------------------------------------- */
.navbar { border-bottom: 1px solid var(--garis); background: var(--latar); }
.navbar-isi { display: flex; align-items: center; gap: var(--r4); min-height: 64px; }
.wordmark {
  font-family: var(--f-judul); font-weight: 600; letter-spacing: .06em;
  font-size: 0.9375rem; text-decoration: none; white-space: nowrap;
}
.nav-tautan { display: none; gap: var(--r5); margin-inline: auto; }
.nav-tautan a { text-decoration: none; color: var(--redup); font-size: var(--t-kecil); }
.nav-tautan a:hover { color: var(--tinta); }
/* Item aktif TIDAK dibedakan warna saja, ada garis bawah tebal juga.
   ⚠️ Prompt S8 paket ini meminta garis bawah item aktif "2px in accent #D4A02C".
   Itu tidak bisa dituruti apa adanya: emas di atas latar cuma 2,24:1, jauh di
   bawah lantai 3:1 untuk penanda non-teks, dan penanda yang tidak terlihat sama
   saja dengan tidak ada penanda. Garisnya karena itu TINTA (14,25:1), bentuk
   dan tebalnya persis seperti yang diminta, warnanya yang dinaikkan. Inilah
   tempat menyalin paling berbahaya di seluruh berkas. */
.nav-tautan a[aria-current="page"] {
  color: var(--tinta); font-weight: 700;
  box-shadow: inset 0 -3px 0 0 var(--tinta);
}
@media (min-width: 900px) { .nav-tautan { display: flex; } }
.navbar .tombol { margin-left: auto; }
@media (min-width: 900px) { .navbar .tombol { margin-left: 0; } }

/* -----------------------------------------------------------------------------
   6. TOMBOL, target sentuh minimal 48px, tombol utama 52px di mobile
   -------------------------------------------------------------------------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r2);
  min-height: 48px; padding: var(--r3) var(--r5);
  /* 16px bobot 600. Di sini alasannya BUKAN kontras huruf, tinta di atas emas
     6,37:1 punya sisa 1,87 dari ambang AA, lapang. Alasannya target sentuh dan
     ritme: label tombol yang mengecil membuat tinggi 48px terlihat kosong. */
  font-family: var(--f-isi); font-size: var(--t-isi); font-weight: 600;
  border-radius: var(--radius); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; background: none; color: var(--tinta);
  transition: background-color .15s ease, border-color .15s ease;
}
/* Garis --tinta pada tombol beraksen BUKAN hiasan: isian emas cuma 2,24:1 di atas
   latar, jadi tanpa garis, tepi tombol praktis tidak terlihat dan yang tersisa
   sebagai penanda "ini bisa ditekan" hanyalah warnanya. Garisnya 14,25:1. */
.tombol-utama { background: var(--aksen); color: var(--tinta); border-color: var(--tinta); }  /* teks 6,37:1 */
.tombol-utama:hover { background: var(--aksen-tekan); }            /* 5,17:1, lebih GELAP */
.tombol-utama:active { background: var(--aksen-tekan); }
.tombol-kedua { border-color: var(--garis-kendali); color: var(--tinta); }  /* 6,02:1 */
.tombol-kedua:hover { background: var(--sentuh); }
.tombol-blok { width: 100%; }
.tombol[disabled], .tombol[aria-disabled="true"] {
  background: var(--nonaktif); color: var(--redup); border-color: transparent;
  cursor: not-allowed;
}
.tombol-alasan { font-size: var(--t-kecil); color: var(--redup); margin-top: var(--r2); }

/* Keadaan memuat: tombol punya LABELNYA SENDIRI, bukan cuma spinner. */
.tombol[data-memuat="ya"] { pointer-events: none; }
.pemintal {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: putar .7s linear infinite; flex: none;
}
@keyframes putar { to { transform: rotate(360deg); } }

/* -----------------------------------------------------------------------------
   7. IKON, SVG sebaris, BUKAN emoji dan bukan font ikon.
   Brief menyebut Material Symbols; yang dipakai di sini SVG sebaris dengan bentuk
   yang sama maknanya. Alasannya bukan selera: font ikon berbasis ligatur
   menampilkan nama glyph sebagai teks mentah sebelum fontnya termuat, dan itu
   berarti kata "request_quote" sempat terbaca di layar pembeli.
   -------------------------------------------------------------------------- */
.ikon { width: 20px; height: 20px; flex: none; stroke: currentColor;
        fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ikon-besar { width: 28px; height: 28px; }
.ikon-redup { color: var(--redup); }
/* TIDAK ADA .ikon-aksen di paket ini: ikon fungsional beremas cuma 2,24:1, di
   bawah lantai 3:1. Ikon memakai --tinta (14,25:1) atau --redup (6,02:1). */

/* -----------------------------------------------------------------------------
   8. KARTU, border 1px, TANPA bayangan (DESIGN.md)
   -------------------------------------------------------------------------- */
.kartu {
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: var(--r4);
}
.kartu h3 { margin-bottom: var(--r2); }
.kartu p { color: var(--redup); font-size: var(--t-kecil); }

/* Cip beraksen: 14px bobot 600, tinta di atas emas 6,37:1. Bordernya tinta karena
   alasan yang sama dengan tombol, tepi isian emas 2,24:1 tidak terlihat sendiri. */
.cip {
  display: inline-block; background: var(--aksen); color: var(--tinta);  /* 6,37:1 */
  border: 1px solid var(--tinta);
  font-size: var(--t-kecil); font-weight: 600; letter-spacing: .02em;
  padding: 2px var(--r3); border-radius: 999px;
}
.cip-netral { background: var(--nonaktif); color: var(--tinta); }
/* Status TIDAK PERNAH dibawa warna saja, tiap cip memasangkan ikon, kata, dan
   warna sekaligus. Bordernya TINTA, bukan aksen: 2,24:1 tidak sampai ke lantai
   3:1 untuk garis. */
.cip-garis {
  /* inline-flex, BUKAN inline-block warisan .cip: cip bergaris hampir selalu
     membawa ikon, dan sebagai inline-block ikonnya duduk di garis dasar teks lalu
     terlihat seperti glyph yang rusak. Terlihat jelas di kisi cip layanan. */
  display: inline-flex; align-items: center; gap: var(--r2);
  background: var(--kertas); color: var(--tinta);
  border: 1px solid var(--tinta); text-transform: none; letter-spacing: 0;
  font-size: var(--t-kecil); padding: var(--r1) var(--r3);
}

.tautan-panah {
  display: inline-flex; align-items: center; gap: var(--r1);
  font-size: var(--t-kecil); font-weight: 600; text-decoration: none;
  color: var(--tinta); text-underline-offset: 3px;   /* aksen GAGAL sebagai teks: 2,24:1 */
}
.tautan-panah:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero { display: grid; gap: var(--r5); align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr .95fr; gap: var(--r7); } }
.hero-mata { font-size: var(--t-kecil); font-weight: 600; color: var(--redup); letter-spacing: .06em; text-transform: uppercase; }
.hero h1 { margin-block: var(--r3); }
.hero-sub { color: var(--redup); font-size: 1.0625rem; max-width: 56ch; }
.hero-aksi { display: flex; flex-wrap: wrap; gap: var(--r3); margin-top: var(--r5); }
.hero-aksi .tombol { min-height: 52px; }      /* aksi utama di mobile 52px */
.hero-statistik { display: flex; flex-wrap: wrap; gap: var(--r5); margin-top: var(--r5);
                  padding-top: var(--r4); border-top: 1px solid var(--garis); }
.hero-statistik div { min-width: 0; }
.hero-statistik .angka { font-size: 1.25rem; display: block; }
.hero-statistik span:last-child { font-size: var(--t-kecil); color: var(--redup); }
.hero-foto { border-radius: var(--radius); border: 1px solid var(--garis); overflow: hidden; }
.hero-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* -----------------------------------------------------------------------------
   10. PITA STATISTIK BERAKSEN, SELURUH teks di atasnya wajib TINTA.
   Terhitung sendiri: tinta di atas emas #D4A02C 6,37:1 LULUS, putih di atasnya
   2,37:1 GAGAL, dan gagalnya besar, bukan tipis. Lima angka di pita ini memakai
   Manrope 800 dengan angka tabular, sesuai DESIGN.md.
   -------------------------------------------------------------------------- */
.pita-statistik { background: var(--aksen); color: var(--tinta); padding-block: var(--r6); }
.pita-statistik .kisi { gap: var(--r5); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 900px) { .pita-statistik .kisi { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.pita-statistik .angka { font-size: clamp(1.375rem, 2.3vw, 1.75rem); display: block; }
.pita-statistik span:last-child { font-size: var(--t-kecil); font-weight: 500; }
/* Cincin fokus di atas pita ini tetap TINTA, ia terbaca di atas emas maupun di
   atas latar, jadi tidak perlu pengecualian warna fokus di mana pun. */

/* Pita kalimat beraksen, sama aturannya, teks tinta. */
.pita-aksen {
  background: var(--aksen); color: var(--tinta); border-radius: var(--radius);
  padding: var(--r5); font-size: 1.0625rem;
}

/* -----------------------------------------------------------------------------
   11. BARIS DAFTAR NATIVE, padanan mobile untuk tabel dan dropdown.
   Tinggi minimal 56px. Dipakai juga di desktop karena polanya memang terbaca.
   -------------------------------------------------------------------------- */
.daftar { border: 1px solid var(--garis); border-radius: var(--radius); background: var(--kertas); }
.baris {
  display: flex; align-items: center; gap: var(--r3);
  min-height: 56px; padding: var(--r3) var(--r4);
  border-bottom: 1px solid var(--garis);
}
.baris:last-child { border-bottom: 0; }
.baris-isi { min-width: 0; flex: 1; }
/* Keduanya WAJIB blok. Sebagai span inline, judul dan keterangannya menyambung
   jadi satu paragraf dan barisnya berhenti terbaca sebagai baris daftar native, terlihat jelas di 390px, tidak terlihat sama sekali dari kode. */
.baris-label { display: block; font-weight: 600; font-size: var(--t-kecil); }
.baris-nilai { display: block; font-size: var(--t-kecil); color: var(--redup); }
/* Baris dua kolom (label kiri, nilai kanan) tetap sebaris: di situ keterangannya
   pendek dan memang berpasangan, bukan judul-dan-penjelasan. */
.baris > .baris-nilai:first-child { display: inline; }
/* TANPA nowrap. Nilai panjang seperti "Monday to Friday 08.00 to 17.00, Saturday
   08.00 to 13.00, GMT+7" tidak bisa membungkus dan mendorong lebar halaman:
   terukur meluber 54px di 320px pada situs 02, dan yang dilaporkan meluber justru
   <main>, bukan span penyebabnya. */
.baris-kanan { margin-left: auto; font-weight: 600; font-size: var(--t-kecil);
               text-align: right; min-width: 0; overflow-wrap: anywhere; }
.baris-kanan.angka { font-weight: 600; }
a.baris { text-decoration: none; }
a.baris:hover { background: var(--sentuh); }

/* -----------------------------------------------------------------------------
   12. TABEL, GARIS MENDATAR SAJA, tinggi baris 48px (DESIGN.md).
   Di bawah 768px tabel lebar tetap bisa digulir mendatar di dalam kotaknya
   sendiri; halamannya TIDAK ikut bergeser.
   -------------------------------------------------------------------------- */
.tabel-bungkus { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--radius);
                 background: var(--kertas);
                 /* WAJIB. Lihat komentar panjang di atas: tanpa ini .hanya-layar-baca
                    di dalam tabel lolos dari pangkasan overflow dan menarik lebar
                    dokumen sampai 263px melewati layar 390px. */
                 position: relative; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-kecil); }
th, td { text-align: left; padding: var(--r3) var(--r4); border-bottom: 1px solid var(--garis);
         height: 48px; }
th { font-weight: 600; background: var(--sentuh); white-space: nowrap; }  /* 13,07:1 */
/* Angka lajur dua dan seterusnya dibandingkan lawan lajur → tabular. */
td:not(:first-child) { font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
/* Kolom angka di tabel apa pun dibandingkan lawan barisnya, jadi ia tabular.
   Aturan warnanya ada di .tabel-bunga (bagian 40c). */
caption { caption-side: top; text-align: left; padding: var(--r3) var(--r4);
          font-size: var(--t-kecil); color: var(--redup); }

/* -----------------------------------------------------------------------------
   13. CAROUSEL GESER, kartu berikutnya mengintip, ada titik indikator
   -------------------------------------------------------------------------- */
.carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 320px);
  gap: var(--r4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--r3); scrollbar-width: thin;
  /* Geser mendatar ditangkap carousel, gulir tegak halaman tetap jalan. */
  touch-action: pan-y;
}
.carousel > * { scroll-snap-align: start; }
@media (min-width: 900px) {
  .carousel { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0,1fr));
              overflow: visible; scroll-snap-type: none; }
}
.titik { display: flex; gap: var(--r2); justify-content: center; margin-top: var(--r3); }
.titik span { width: 6px; height: 6px; border-radius: 50%; background: var(--garis-kendali); opacity: .35; }
.titik span[data-aktif="ya"] { opacity: 1; width: 18px; border-radius: 3px; }
@media (min-width: 900px) { .titik { display: none; } }

/* -----------------------------------------------------------------------------
   14. TIMELINE, tegak di mobile, mendatar di layar lebar.
   ⚠️ Paket ini TIDAK memakai timeline mendatar sama sekali. Yang dibutuhkan
   riwayat pelacakan enam langkah yang SELALU tegak (halaman /lacak), karena
   urutannya kronologis dan tiap langkah membawa tanggal, jam, judul, dan
   keterangan, empat baris yang tidak pernah muat di satu kolom mendatar.
   Kelasnya .timeline-tegak di bagian 36; .timeline mendatar dibiarkan utuh
   supaya struktur berkas tetap sebangun dengan situs 01–05.
   -------------------------------------------------------------------------- */
.timeline { position: relative; padding-left: 44px; }
.timeline::before {
  content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px;
  width: 2px; background: var(--garis);
}
.langkah { position: relative; padding-bottom: var(--r5); }
.langkah:last-child { padding-bottom: 0; }
.langkah-nomor {
  position: absolute; left: -44px; top: 0; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--aksen); color: var(--tinta);         /* 6,37:1 */
  border: 1px solid var(--tinta);                        /* tepi isian 2,24:1 ditolong garis */
  font-family: var(--f-judul); font-weight: 800; font-size: var(--t-kecil);
}
.langkah h3 { font-size: 1.0625rem; }
.langkah p { color: var(--redup); font-size: var(--t-kecil); margin-top: var(--r1); }
/* ENAM langkah di paket ini (W7), bukan tujuh seperti situs 08 dan bukan lima
   seperti situs 01. Jumlah kolom timeline SELALU ikut diperiksa saat menyalin:
   kisi tujuh yang menampung enam meninggalkan satu kolom kosong menganga di
   ujung kanan, dan itu hanya terlihat sesudah dirender. Enam kolom hanya
   dinyalakan di ≥1100px; di bawah itu ia tetap TEGAK, karena keterangan tiap
   langkah di sini satu kalimat penuh dan tidak pernah muat di kolom 150px. */
@media (min-width: 1100px) {
  .timeline-6 { display: grid; grid-template-columns: repeat(6, minmax(0,1fr));
                gap: var(--r5) var(--r4); padding-left: 0; }
  .timeline-6::before { display: none; }      /* diganti border per langkah */
  .timeline-6 > .langkah { padding: calc(var(--r5) + 16px) 0 0;
                           border-top: 2px solid var(--garis); min-width: 0; }
  .timeline-6 > .langkah-nomor, .timeline-6 .langkah-nomor { left: 0; top: -16px; }
  .timeline-6 .langkah h3 { font-size: 1rem; }
}

/* -----------------------------------------------------------------------------
   15. AKORDEON FAQ, <details> asli, jadi tetap bisa dibuka tanpa JavaScript
   -------------------------------------------------------------------------- */
.faq { border: 1px solid var(--garis); border-radius: var(--radius); background: var(--kertas); }
.faq details { border-bottom: 1px solid var(--garis); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  display: flex; align-items: center; gap: var(--r3); cursor: pointer;
  min-height: 56px; padding: var(--r3) var(--r4);
  font-weight: 600; font-size: var(--t-kecil); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ikon { margin-left: auto; transition: transform .2s ease; }
.faq details[open] summary .ikon { transform: rotate(180deg); }
.faq .jawab { padding: 0 var(--r4) var(--r4); color: var(--redup); font-size: var(--t-kecil); }

/* -----------------------------------------------------------------------------
   16. FORMULIR, border kendali WAJIB --garis-kendali (6,02:1), bukan --garis (1,21:1)
   -------------------------------------------------------------------------- */
.bidang { display: block; margin-bottom: var(--r4); }
.bidang > label, .label { display: block; font-size: var(--t-kecil); font-weight: 600; margin-bottom: var(--r2); }
.kolom {
  width: 100%; min-height: 52px; padding: var(--r3);
  /* 52px, bukan 48px: DESIGN.md paket ini meminta kolom dan tombol minimal 52px.
     16px WAJIB: di bawah itu Safari iOS ikut memperbesar layar saat kolom difokus. */
  font-size: var(--t-isi); font-family: var(--f-isi); color: var(--tinta);
  background: var(--kertas); border: 1px solid var(--garis-kendali);
  border-radius: var(--radius);
}
.kolom::placeholder { color: #667370; }   /* 4,94:1 di atas --kertas */
textarea.kolom { min-height: 120px; resize: vertical; }
.bantuan { font-size: var(--t-kecil); color: var(--redup); margin-top: var(--r2); }
.bantuan-galat { color: var(--galat); font-weight: 600; }      /* 6,17:1 */
.bantuan-sukses { color: var(--sukses); font-weight: 600; }    /* 6,17:1 */
.kolom[aria-invalid="true"] { border-color: var(--galat); border-width: 2px; }
.kolom[disabled] { background: var(--nonaktif); color: var(--redup); cursor: not-allowed; }

/* Radio sebaris (W14: tiga pilihan dalam satu baris), target sentuh 48px penuh,
   dan yang terpilih ditandai border DAN alas, bukan warna titik saja. */
.pilihan { display: grid; gap: var(--r2); }
@media (min-width: 640px) { .pilihan { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.pilihan label {
  display: flex; align-items: center; gap: var(--r2); min-height: 48px;
  padding: var(--r2) var(--r3); border: 1px solid var(--garis-kendali);
  border-radius: var(--radius); background: var(--kertas);
  font-size: var(--t-kecil); cursor: pointer;
}
/* accent-color menggambar isian kendali DAN centangnya PUTIH. Putih di atas emas
   cuma 2,37:1, jadi kendalinya bertinta (putih di atas tinta 15,10:1). */
.pilihan input { width: 20px; height: 20px; accent-color: var(--tinta); flex: none; }
.pilihan label:has(input:checked) { border-color: var(--tinta); border-width: 2px; background: var(--aksen-alas); }

/* Segmented control, padanan mobile untuk radio 2 sampai 3 opsi */
.segmen { display: flex; border: 1px solid var(--garis-kendali); border-radius: var(--radius); overflow: hidden; }
.segmen button {
  flex: 1; min-height: 48px; border: 0; background: var(--kertas); cursor: pointer;
  font-family: var(--f-isi); font-size: var(--t-kecil); font-weight: 600; color: var(--tinta);
}
.segmen button + button { border-left: 1px solid var(--garis-kendali); }
/* Tombol tersegmen terpilih: isian aksen, label tinta 14px bobot 600 (6,37:1),
   DITAMBAH border tinta 2px supaya keterpilihannya tidak hanya di warna. */
.segmen button[aria-pressed="true"] { background: var(--aksen); color: var(--tinta);
                                      box-shadow: inset 0 0 0 2px var(--tinta); }

/* -----------------------------------------------------------------------------
   17. PESAN DALAM HALAMAN, supaya implementasi tidak jatuh ke alert() peramban.
   Tidak pernah membawa makna lewat warna saja: selalu ada ikon dan kata.
   -------------------------------------------------------------------------- */
.pesan {
  display: flex; gap: var(--r3); align-items: flex-start;
  padding: var(--r3) var(--r4); border-radius: var(--radius);
  border-left: 4px solid; font-size: var(--t-kecil);
}
.pesan-galat { background: var(--galat-alas); border-color: var(--galat); color: var(--tinta); }
.pesan-peringatan { background: var(--peringatan-alas); border-color: var(--peringatan); color: var(--tinta); }
.pesan-sukses { background: var(--sukses-alas); border-color: var(--sukses); color: var(--tinta); }
.pesan b { display: block; }

/* -----------------------------------------------------------------------------
   18. BAR TAB BAWAH (mobile), navigasi UTAMA di mobile, bukan hamburger
   -------------------------------------------------------------------------- */
.tab-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--kertas); border-top: 1px solid var(--garis);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab-bar a {
  display: grid; place-items: center; gap: 2px;
  min-height: 56px; padding: var(--r2) var(--r1);
  text-decoration: none; color: var(--redup); font-size: var(--t-label);
}
/* Tab aktif dibedakan warna DAN tebal DAN garis atas, bukan warna saja. Garis
   atasnya TINTA (14,25:1): aksen 2,24:1 meleset dari lantai 3:1 untuk penanda.
   Isian pil beraksen di belakang ikon tetap boleh, itu isian, bukan penanda
   tipis, dan ikonnya bertinta di atasnya (6,37:1). */
.tab-bar a[aria-current="page"] { color: var(--tinta); font-weight: 600; box-shadow: inset 0 3px 0 0 var(--tinta); }
.tab-bar a[aria-current="page"] .ikon { background: var(--aksen); border-radius: 999px;
                                        padding: 2px 10px; box-sizing: content-box; width: 20px; }
.tab-bar .ikon { width: 22px; height: 22px; }
@media (min-width: 900px) { .tab-bar { display: none; } body { padding-bottom: 0; } }

/* -----------------------------------------------------------------------------
   19. BOTTOM SHEET, padanan mobile untuk dropdown
   -------------------------------------------------------------------------- */
.lapis { position: fixed; inset: 0; z-index: 50; background: rgba(13,43,38,.62); display: grid; align-items: end; }
.lapis[hidden] { display: none; }
.sheet {
  background: var(--kertas); border-radius: 8px 8px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px); max-height: 80vh; overflow-y: auto;
}
.sheet-pegangan { width: 36px; height: 4px; background: var(--garis-kendali); opacity: .5;
                  border-radius: 2px; margin: var(--r3) auto; }
.sheet-kepala { display: flex; align-items: center; gap: var(--r3); padding: 0 var(--r4) var(--r3);
                border-bottom: 1px solid var(--garis); }
.sheet-kepala h3 { font-size: 1rem; }
.sheet-tutup { margin-left: auto; min-width: 48px; min-height: 48px; display: grid; place-items: center;
               background: none; border: 0; cursor: pointer; color: var(--tinta); }
@media (min-width: 900px) {
  .lapis { align-items: center; justify-items: center; }
  .sheet { border-radius: var(--radius); max-width: 480px; width: 100%; }
}

/* Lightbox foto */
.lightbox img { width: 100%; max-height: 80vh; object-fit: contain; background: #000; }

/* -----------------------------------------------------------------------------
   20. SKELETON MEMUAT, bukan spinner, supaya bentuk halaman sudah terbaca
   -------------------------------------------------------------------------- */
.tulang { background: var(--nonaktif); border-radius: var(--radius); position: relative; overflow: hidden; }
.tulang::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: kilau 1.4s ease-in-out infinite;
}
@keyframes kilau { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.tulang-baris { height: 14px; margin-bottom: var(--r2); }
.tulang-judul { height: 28px; width: 60%; margin-bottom: var(--r3); }
.tulang-foto { aspect-ratio: 4 / 3; }

/* -----------------------------------------------------------------------------
   21. HALAMAN GALAT
   DITINJAU ULANG UNTUK KETUJUH KALINYA, dan hasilnya sama bentuknya dengan situs
   08, karena hitungannya, bukan karena disalin. Emas #D4A02C di atas latar cuma
   2,24:1, jadi angka "404" beraksen akan nyaris tak terbaca. Polanya: aksen jadi
   BLOK, angkanya bertinta di atasnya (6,37:1), dengan garis tinta supaya tepi
   bloknya juga terlihat.

   ⚠️ CACAT WARISAN YANG DIPERBAIKI DI SINI, dan wajib tetap begini: di situs
   02–06 aturannya ditulis `.galat-halaman p { color: var(--redup); }` SESUDAH
   `.galat-kode`. Spesifisitasnya 0,1,1 lawan 0,1,0, jadi angka 404/500 diam-diam
   mewarisi --redup, di paket 08 terukur 1,88:1 sebelum ditambal. Bentuk yang
   benar memakai `:not(.galat-kode)`, dan yang membuktikannya BUKAN membaca kode
   ini melainkan menghitung warna hasil render: diukur ulang di situs ini, angka
   galat keluar #0D2B26 di atas #D4A02C = 6,37:1.
   -------------------------------------------------------------------------- */
.galat-kode { font-family: var(--f-judul); font-weight: 800; font-size: clamp(3rem, 12vw, 6rem);
              line-height: 1.1; display: inline-block; padding-inline: var(--r4);
              border-radius: var(--radius); border: 1px solid var(--tinta);
              background: var(--aksen); color: var(--tinta); }           /* 6,37:1 */
.galat-halaman p:not(.galat-kode) { color: var(--redup); }
.galat-aksi { display: flex; flex-wrap: wrap; gap: var(--r3); justify-content: center; }

/* Anak yang dipusatkan lewat place-items:center TIDAK melar: lebarnya lahir dari
   isinya sendiri, jadi satu paragraf panjang bisa melewati viewport, terukur
   10px di 320px pada situs 02, dan yang dilaporkan meluber cuma "p" tanpa kelas,
   mustahil ditebak dari kode. max-width:100% saja TIDAK menutupnya; grid-nya yang
   dicabut. Halaman galat di sini karena itu blok sejak awal, bukan grid. */
.galat-halaman { display: block; text-align: center; padding-block: var(--r9);
                 max-width: 56ch; margin-inline: auto; }
.galat-halaman > * + * { margin-top: var(--r4); }
.galat-halaman > * { max-width: 100%; }

/* -----------------------------------------------------------------------------
   22. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--tinta); color: #fff; padding-block: var(--r7); margin-top: var(--r7); }
.footer a { color: #C3D2CD; text-decoration: none; font-size: var(--t-kecil); }  /* 9,65:1 di atas tinta */
.footer a:hover { color: #fff; text-decoration: underline; }
.footer h4 { font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--r3); }
.footer li { margin-bottom: var(--r2); }
.footer-atas { display: grid; gap: var(--r5); }
@media (min-width: 768px) { .footer-atas { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--r6); } }
.footer-tentang { color: #C3D2CD; font-size: var(--t-kecil); margin-top: var(--r3); max-width: 40ch; }
.footer-bawah {
  margin-top: var(--r6); padding-top: var(--r4); border-top: 1px solid #2A4A44;
  display: flex; flex-wrap: wrap; gap: var(--r3); justify-content: space-between;
  font-size: var(--t-kecil); color: #C3D2CD;
}
.footer :focus-visible { outline-color: #fff; }

/* -----------------------------------------------------------------------------
   23. UTILITAS
   -------------------------------------------------------------------------- */
.hanya-layar-baca {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tumpuk-2 { display: grid; gap: var(--r2); }
.tumpuk-3 { display: grid; gap: var(--r3); }
.tumpuk-4 { display: grid; gap: var(--r4); }
.redup { color: var(--redup); }
.kecil { font-size: var(--t-kecil); }
@media (min-width: 900px) { .hanya-mobile { display: none !important; } }
@media (max-width: 899px) { .hanya-desktop { display: none !important; } }

/* -----------------------------------------------------------------------------
   24. GERAK DIKURANGI, hormati preferensi sistem
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .tulang::after { animation: none; }
}

/* -----------------------------------------------------------------------------
   25. FOTO DAN PENGGANTI FOTO
   Tiap foto di folder aset/ SUDAH DILIHAT satu per satu dengan mata, bukan dinilai
   dari nama berkasnya, dan hasil olahannya dilihat sekali lagi sebagai contact
   sheet. Uji yang dipakai: apakah lembaga kita masuk akal MEMILIKI benda itu.

   TIGA CALON DIBUANG SEPENUHNYA, bukan ditambal, di vertikal keuangan, benda
   bermerek di dalam foto terbaca sebagai klaim:
     · dua foto pembukuan memuat kalkulator bermerek Canon lengkap dengan
       wordmark-nya, catatan berbahasa Inggris bersatuan dolar, dan nama merek
       lain yang ditulis tangan di daftar belanja. Penggantinya setara dan lebih
       tepat: buku kas tulisan tangan berbahasa Indonesia dengan uang rupiah.
     · satu foto layar ponsel memuat lambang WhatsApp, Chrome, dan Gmail yang
       masih terbaca. Di halaman yang justru membahas pinjaman online tidak
       berizin, lambang perusahaan nyata di sebelah aplikasi mencurigakan adalah
       hal terakhir yang boleh muncul. Penggantinya memakai layar generik.
     · satu diagram tangan berbahasa Inggris bersatuan dolar, dan label kedua
       kurvanya tertukar. Penggantinya ilustrasi dua grafik TANPA teks apa pun.

   SATU FOTO DIPOTONG BINGKAINYA: foto warung memuat papan nama terbalik yang
   masih terbaca; bingkainya dipersempit sampai papan itu keluar frame.

   Sidik perseptual keenam foto hasil olahan sudah diukur (jarak Hamming 90–148,
   ambang 30): tidak ada dua yang berasal dari sumber yang sama. Situs ini tidak
   menampilkan satu pun potret orang bernama, jadi .potret-inisial di bawah
   disediakan untuk lembar komponen, bukan untuk menutupi wajah yang kembar.
   -------------------------------------------------------------------------- */
.gambar-lebar, .foto-kosong {
  aspect-ratio: 4 / 3; width: 100%; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--garis); background: var(--nonaktif);
}
.foto-kosong {
  display: grid; place-content: center; justify-items: center; gap: var(--r2);
  color: var(--redup);                                  /* 5,23:1 di atas --nonaktif */
  background-color: var(--nonaktif);
  background-image: linear-gradient(var(--garis) 1px, transparent 1px),
                    linear-gradient(90deg, var(--garis) 1px, transparent 1px);
  background-size: 16px 16px;
}
.foto-kosong span {
  font-family: var(--f-isi); font-weight: 600; font-size: var(--t-label);
  letter-spacing: .08em; background: var(--kertas); padding: 2px var(--r2);
  border-radius: 4px; border: 1px solid var(--garis); text-align: center;
}

.potret {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--garis); margin-bottom: var(--r3);
}
.potret-inisial {
  display: grid; place-items: center; background: var(--aksen-alas); color: var(--tinta);
  font-family: var(--f-judul); font-weight: 600; font-size: 1.75rem; letter-spacing: .04em;
}

/* Tombol pembungkus foto yang bisa diperbesar, tetap terlihat sebagai gambar */
.foto-tombol { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.foto-tombol img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
                   border-radius: var(--radius); border: 1px solid var(--garis); }

/* Pengganti peta, tidak memuat peta pihak ketiga, jadi tidak ada pelacak. */
.peta {
  display: grid; place-content: center; justify-items: center; gap: var(--r3);
  aspect-ratio: 4 / 3; border-radius: var(--radius); border: 1px solid var(--garis);
  color: var(--redup); text-align: center; padding: var(--r4);
  background-color: var(--nonaktif);
  background-image: linear-gradient(var(--garis) 1px, transparent 1px),
                    linear-gradient(90deg, var(--garis) 1px, transparent 1px);
  background-size: 24px 24px;
}
.peta span { font-size: var(--t-kecil); max-width: 28ch; }

/* Dua kolom di layar lebar, satu kolom di mobile. */
@media (min-width: 900px) {
  [data-dua-kolom] { grid-template-columns: 1fr 1fr; align-items: start; }
  /* Simulasi angsuran: panel isian di kiri, panel hasil di kanan. */
  .simulasi-tata { grid-template-columns: 1fr 1fr; gap: var(--r6) !important; align-items: start; }
  /* Kantor layanan: pengganti peta di kiri, lima kartu kantor di kanan. */
  .kantor-tata { grid-template-columns: 1fr 1.1fr; gap: var(--r6) !important; align-items: start; }
  /* Pengaduan: kartu tenggat di kiri, kartu pelacakan yang lebih sempit di kanan.
     align-items:start WAJIB, tanpa itu kartu pelacakan yang isinya satu kolom
     ikut melar setinggi kartu tenggat tiga kalimat, dan yang terlihat pengunjung
     adalah kartu setengah kosong sepanjang layar. */
  .pengaduan-tata { grid-template-columns: 1.2fr 1fr; gap: var(--r6) !important; align-items: start; }
  /* Kontak: alamat dan jam di kiri, formulir pertanyaan di kanan. */
  .kontak-tata { grid-template-columns: 1fr 1.1fr; gap: var(--r6) !important; align-items: start; }
}

/* -----------------------------------------------------------------------------
   26. PENCARI, baris kendali mendatar untuk penyaring dan pelacak
   -------------------------------------------------------------------------- */
.pencari { display: grid; gap: var(--r3); align-items: end; margin-bottom: var(--r6); }
@media (min-width: 900px) { .pencari { grid-template-columns: repeat(3, minmax(0,1fr)) auto; } }
.pencari .bidang { margin: 0; }
.pencari .tombol { min-height: 48px; }

/* -----------------------------------------------------------------------------
   27. RAPI-RAPI DI BAWAH 900px, semuanya hanya terlihat setelah dirender
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  /* Tombol navbar membungkus jadi dua baris dan mendesak wordmark sampai nyaris
     tak terbaca. Di mobile aksi ini juga sudah ada di bar tab bawah, jadi di sini
     ia cukup ringkas: tanpa ikon, padding lebih rapat, dan label 12px.
     Di bawah 900px tombol ini berubah jadi tombol bergaris. Alasannya BUKAN
     kontras huruf (tinta di atas emas 6,37:1 lulus di ukuran apa pun) melainkan
     bobot visual: dua isian emas berdempetan di bar setinggi 64px membuat
     wordmark kalah, dan tombol bergaris bertinta 14,25:1 menyelesaikannya. */
  .navbar .tombol-utama { background: none; color: var(--tinta);
                          border-color: var(--garis-kendali); }
  .navbar .tombol-utama:hover { background: var(--sentuh); }
  .navbar .tombol { padding-inline: var(--r3); white-space: nowrap; font-size: var(--t-label); }
  .navbar .tombol .ikon { display: none; }
  .wordmark { font-size: 0.75rem; letter-spacing: .04em; }

  /* Aksi utama melebar penuh supaya lebarnya seragam dan mudah dijangkau jempol. */
  .hero-aksi { flex-direction: column; align-items: stretch; }
  .hero-aksi .tombol { width: 100%; }
}

/* -----------------------------------------------------------------------------
   28. PONSEL SEMPIT (≤ 380px), iPhone SE dan Android kecil
   Label tab turun ke 11px dan padding dirapatkan. Wordmark paket ini tiga kata,
   jadi ia ikut mengecil.
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  :root { --tepi: 1rem; }
  .tab-bar a { font-size: 0.6875rem; padding-inline: 2px; min-width: 0; }
  .tab-bar a > :last-child { max-width: 100%; overflow-wrap: anywhere; text-align: center; line-height: 1.15; }
  .tab-bar .ikon { width: 20px; height: 20px; }
  .wordmark { font-size: 0.625rem; }

  /* TERUKUR, bukan ditaksir: di 320px wordmark panjang plus tombol berlabel panjang
     yang TIDAK boleh membungkus mendorong lebar halaman. Label tombol didiktekan
     brief dan diuji verbatim, jadi yang dicabut nowrap-nya. Diwarisi dari situs 03
     dan 04; wordmark paket ini "BPR CAKRABHUMI SENTOSA" TIGA kata dan panjang,
     dan tombolnya berlabel "Ajukan Kredit", jadi keduanya diberi izin membungkus. */
  .navbar .tombol { white-space: normal; text-align: center; line-height: 1.2;
                    padding-inline: var(--r2); }
}

/* Tombol sunting di baris ringkasan wizard */
.sunting {
  margin-left: auto; min-width: 44px; min-height: 44px;
  display: grid; place-items: center; background: none;
  border: 1px solid var(--garis); border-radius: var(--radius); cursor: pointer;
}
.sunting:hover { background: var(--sentuh); }

/* -----------------------------------------------------------------------------
   29. TABEL BIAYA, kolom rupiah rata KANAN dan tabular (Manrope, yang punya tnum)
   -------------------------------------------------------------------------- */
.tabel-biaya td:last-child, .tabel-biaya th:last-child { text-align: right; }
.tabel-biaya td:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   30. KOTAK IKON, bingkai lembut untuk ikon penyortir niat, produk, dan syarat.
   Alasnya --aksen-alas dan ikonnya TINTA (13,32:1). Ikon beraksen dilarang: emas
   di atas alas lembut cuma 2,09:1, jauh di bawah lantai 3:1 untuk ikon fungsional.
   -------------------------------------------------------------------------- */
.ikon-kotak {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius); background: var(--aksen-alas); color: var(--tinta);
  margin-bottom: var(--r3);
}

/* -----------------------------------------------------------------------------
   31. BARIS INFO BERIKON, dipakai untuk rambu, catatan bunga, dan syarat dokumen.
   Ikonnya --redup (6,02:1): barisnya sering panjang dan ikon di sini berfungsi
   sebagai penanda jenis, bukan sebagai aksi.
   -------------------------------------------------------------------------- */
.info-baris { display: flex; gap: var(--r3); align-items: flex-start;
              font-size: var(--t-kecil); color: var(--redup); }
.info-baris .ikon { margin-top: 2px; }
.info-baris b { color: var(--tinta); }

/* Rambu "ini simulasi" dan "kredit adalah utang", muncul di beberapa tempat dan
   sengaja seragam. Garis kirinya PERINGATAN (6,99:1), bukan aksen: ia bukan
   promosi, ia batas. DESIGN.md menyebut kalimat risiko sebagai bagian dari desain,
   bukan sebagai disclaimer yang disembunyikan, jadi rambu ini tidak pernah
   dikecilkan di bawah 14px dan tidak pernah diberi warna redup. */
.rambu {
  display: flex; gap: var(--r3); align-items: flex-start;
  background: var(--peringatan-alas); border-left: 4px solid var(--peringatan);
  border-radius: var(--radius); padding: var(--r3) var(--r4);
  font-size: var(--t-kecil); color: var(--tinta);
}

/* Cip berbentuk KALIMAT (pil status di hero, cip "hampir penuh"). Cip biasa memakai
   huruf besar semua dan itu benar untuk satu-dua kata; untuk satu kalimat penuh ia
   berhenti terbaca. Bentuknya sama, hurufnya tidak dipaksa. */
.cip-kalimat {
  display: inline-flex; align-items: center; gap: var(--r2);
  text-transform: none; letter-spacing: 0; font-size: var(--t-kecil);
  padding: var(--r2) var(--r4);
}

/* Lima kolom hanya di layar yang benar-benar cukup lebar. Di bawah itu ia turun ke
   tiga lalu dua, bukan memaksa lima kartu sempit yang judulnya patah tiap kata. */
/* Cip di hero berdiri sendiri di atas eyebrow. p{margin:0} membuat keduanya
   berdempetan sampai terbaca seperti satu blok, terlihat di 390px maupun 1440px,
   dan tidak terlihat sama sekali dari kode. */
.hero .cip { margin-bottom: var(--r3); }

/* Pesan "ini desain contoh" yang muncul sesudah tombol yang memang tidak punya
   tujuan nyata. Tersembunyi sampai ditekan, dan isinya ditulis JS. */
.pesan-contoh { margin-top: var(--r3); }

@media (min-width: 1100px) { .kisi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 1099px) { .kisi-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 899px) { .kisi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* -----------------------------------------------------------------------------
   33. KARTU PENCARI, kendali yang dipakai berdiri sendiri di dalam kartunya,
   dipakai pelacak nomor tiket pengaduan (W15).
   -------------------------------------------------------------------------- */
.pencari-kartu { background: var(--kertas); border: 1px solid var(--garis);
                 border-radius: var(--radius); padding: var(--r5); }
.pencari-baris { display: grid; gap: var(--r3); align-items: end; }
@media (min-width: 700px)  { .pencari-baris { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1100px) { .pencari-baris { grid-template-columns: repeat(5, minmax(0,1fr)) auto; } }
.pencari-baris .bidang { margin: 0; min-width: 0; }
.pencari-baris .tombol { min-height: 52px; }

/* -----------------------------------------------------------------------------
   34. KARTU YANG SEKALIGUS TAUTAN. Kisi lima kolom hanya di layar yang cukup
   lebar; di bawah itu turun ke tiga lalu dua, bukan lima ubin sempit yang
   labelnya patah tiap kata.
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) { .kisi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 1099px) { .kisi-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 560px) and (max-width: 899px) { .kisi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
a.kartu { text-decoration: none; display: block; }
a.kartu:hover { background: var(--sentuh); }

/* -----------------------------------------------------------------------------
   35. BATANG, dipakai untuk membandingkan rasio keuangan. Emas 2,24:1 tidak
   pernah sendirian membawa makna: tiap batang membawa label kiri, persen bertinta,
   dan keterangan kanan. Alurnya diberi border --garis-kendali supaya tepinya
   terlihat tanpa mengandalkan warna (aksen di atas alur cuma 1,94:1).
   -------------------------------------------------------------------------- */
.batang { display: grid; gap: var(--r4); }
/* EMPAT kolom, bukan tiga: barisnya memang punya empat anak (label, persen, alur,
   jumlah sampel). Dengan tiga kolom anak keempat jatuh ke baris berikutnya dan
   jumlah sampel tampil di bawah labelnya, terlihat jelas sesudah dirender, dan
   tidak terlihat sama sekali dari kode. */
.batang-baris { display: grid; grid-template-columns: 12rem 5rem 1fr 11rem; gap: var(--r3);
                align-items: center; font-size: var(--t-kecil); }
.batang-nilai { font-family: var(--f-judul); font-weight: 600; font-size: 1.25rem;
                font-variant-numeric: tabular-nums; }
.batang-alur { height: 12px; background: var(--garis); border: 1px solid var(--garis-kendali);
               border-radius: 999px; overflow: hidden; }
.batang-isi { display: block; height: 100%; background: var(--aksen); }
.batang-sampel { color: var(--redup); }
.batang-total { border-top: 2px solid var(--tinta); padding-top: var(--r4); }
@media (max-width: 700px) {
  .batang-baris { grid-template-columns: 1fr auto; }
  .batang-alur, .batang-sampel { grid-column: 1 / -1; }
}

/* -----------------------------------------------------------------------------
   36. RIWAYAT PELACAKAN, timeline yang SELALU tegak, tidak pernah mendatar.
   Langkah berjalan ditandai isian aksen DAN kata "Berjalan sekarang"; langkah
   mendatang bertinta redup DAN berlabel "Perkiraan". Tidak ada keadaan yang
   maknanya hanya di warna.
   -------------------------------------------------------------------------- */
.riwayat { position: relative; padding-left: 44px; }
.riwayat::before { content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px;
                   width: 2px; background: var(--garis-kendali); }
.riwayat li { position: relative; padding-bottom: var(--r6); }
.riwayat li:last-child { padding-bottom: 0; }
.riwayat-tanda {
  position: absolute; left: -44px; top: 0; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--kertas); border: 2px solid var(--tinta); color: var(--tinta);
}
.riwayat-tanda[data-keadaan="kini"] { background: var(--aksen); border-color: var(--tinta); }
.riwayat-tanda[data-keadaan="nanti"] { border-color: var(--redup); color: var(--redup); }
.riwayat-waktu { display: block; font-size: var(--t-kecil); color: var(--redup);
                 font-variant-numeric: tabular-nums; }
.riwayat h3 { font-size: 1.0625rem; margin-top: var(--r1); }
.riwayat p { color: var(--redup); font-size: var(--t-kecil); margin-top: var(--r1); }
.riwayat li[data-keadaan="nanti"] h3 { color: var(--redup); }

/* -----------------------------------------------------------------------------
   37. UNGGAH BERKAS, untuk foto berkas pengajuan kredit di lembar komponen.
   Bordernya --garis-kendali (6,02:1), bukan --garis: ia area yang bisa diklik.
   -------------------------------------------------------------------------- */
.unggah {
  display: grid; place-items: center; gap: var(--r2); text-align: center;
  padding: var(--r6) var(--r4); border: 2px dashed var(--garis-kendali);
  border-radius: var(--radius); background: var(--kertas); cursor: pointer;
  font-size: var(--t-kecil); color: var(--redup);
}
.unggah:hover { background: var(--sentuh); }

/* -----------------------------------------------------------------------------
   38. PENANDA PETA BERNOMOR, isian aksen dengan angka BERTINTA di atasnya
   -------------------------------------------------------------------------- */
.pin { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
       border-radius: 50%; background: var(--aksen); color: var(--tinta);   /* 6,37:1 */
       border: 1px solid var(--tinta);
       font-family: var(--f-judul); font-weight: 800; font-size: var(--t-kecil); }

/* -----------------------------------------------------------------------------
   39. BARIS RINCIAN BIAYA, label kiri, angka kanan tabular
   -------------------------------------------------------------------------- */
.rincian { display: grid; gap: var(--r3); }
.rincian > div { display: flex; gap: var(--r3); align-items: baseline; font-size: var(--t-kecil); }
.rincian dt, .rincian .rincian-label { flex: 1; min-width: 0; }
.rincian dd, .rincian .rincian-nilai { margin: 0; font-variant-numeric: tabular-nums;
                                       font-weight: 600; white-space: nowrap; }
.rincian-total { border-top: 2px solid var(--tinta); padding-top: var(--r3); font-size: var(--t-isi) !important; }
.rincian-total .rincian-nilai { font-size: 1.25rem; font-family: var(--f-judul);
                                font-weight: 800; }

/* =============================================================================
   40. KOMPONEN KHAS PAKET 14, bank perkreditan rakyat
   Semua warna di bawah memakai token yang rasionya sudah tertulis di bagian 1.
   Tidak ada satu pun tempat baru yang memakai aksen sebagai teks, garis kendali,
   ikon fungsional, atau cincin fokus.
   ========================================================================== */

/* 40a. PANEL HASIL SIMULASI, kepala beraksen dengan teks tinta (6,37:1).
   Ini bagian terpenting halaman menurut brief (W6), jadi angka jawabannya yang
   paling besar, dan seluruh biaya di muka ikut ditampilkan di panel yang sama, bukan disembunyikan di catatan kaki. */
.panel-hasil { border: 1px solid var(--garis); border-radius: var(--radius);
               background: var(--kertas); overflow: hidden; position: relative; }
.panel-hasil-kepala {
  background: var(--aksen); color: var(--tinta);        /* 6,37:1 */
  border-bottom: 1px solid var(--tinta);                /* tepi isian 2,24:1 ditolong garis */
  font-family: var(--f-judul); font-weight: 800;
  font-size: var(--t-isi); padding: var(--r3) var(--r4);
}
.panel-hasil-isi { padding: var(--r4); }
.hasil-baris { display: flex; gap: var(--r3); align-items: baseline;
               padding-block: var(--r3); border-bottom: 1px solid var(--garis); }
.hasil-baris:last-of-type { border-bottom: 0; }
.hasil-baris dt, .hasil-label { flex: 1; min-width: 0; font-size: var(--t-kecil);
                                color: var(--redup); }
/* DESIGN.md: "Numbers are the product here. Never render a rupiah figure in muted
   grey to make it look elegant." Jadi labelnya boleh redup, NILAINYA tidak pernah. */
.hasil-baris dd, .hasil-nilai { margin: 0; text-align: right; font-weight: 700;
                                color: var(--tinta); font-variant-numeric: tabular-nums;
                                overflow-wrap: anywhere; }
/* Baris jawaban: inilah angka yang dicari pengunjung, jadi ia yang paling besar. */
.hasil-utama { background: var(--aksen-alas); border-radius: var(--radius);
               padding: var(--r4); margin-block: var(--r3); border-bottom: 0; }
.hasil-utama .hasil-label { color: var(--tinta); font-weight: 600; font-size: var(--t-isi); }
.hasil-utama .hasil-nilai { font-family: var(--f-judul); font-weight: 800;
                            font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.15; }
@media (max-width: 560px) { .hasil-utama { display: block; text-align: left; }
                            .hasil-utama .hasil-nilai { text-align: left; margin-top: var(--r2); } }
/* Sub-kartu biaya di muka, dipotong saat pencairan. */
.sub-kartu { border: 1px solid var(--garis); border-radius: var(--radius);
             padding: var(--r4); margin-top: var(--r4); background: var(--latar); }
.sub-kartu h3 { font-size: 1rem; margin-bottom: var(--r3); }

/* 40b. PENGGESER, bordernya tinta, bukan aksen. Nilainya ditulis sebagai ANGKA
   di sebelahnya, karena posisi gagang sendirian tidak membawa angka. */
.geser { width: 100%; height: 44px; accent-color: var(--tinta); }
.geser-nilai { font-family: var(--f-judul); font-weight: 800; font-size: 1.5rem;
               font-variant-numeric: tabular-nums; display: block; }
.geser-batas { display: flex; justify-content: space-between; font-size: var(--t-label);
               color: var(--redup); font-variant-numeric: tabular-nums; }

/* 40c. TABEL UANG, label di kiri, NILAI rata KANAN dan tabular, sesuai DESIGN.md
   ("Tables of money are left-labelled and right-aligned on the value"). */
.tabel-uang td:not(:first-child), .tabel-uang th:not(:first-child) { text-align: right; }
.tabel-uang td:not(:first-child) { font-weight: 700; font-variant-numeric: tabular-nums; }
.tabel-uang td:first-child { font-variant-numeric: tabular-nums; }
/* Lima lajur rupiah tidak pernah muat di 390px. Tanpa lebar minimum, tabelnya
   MENYUSUT, "Rp 1.312.000" patah jadi dua baris di tiap sel dan tabelnya
   berhenti terbaca sebagai kolom angka. Dengan lebar minimum ia digulir mendatar
   di dalam kotaknya sendiri (.tabel-bungkus overflow-x:auto, position:relative),
   dan halamannya TIDAK ikut bergeser, diperiksa ulang di 320px. */
.tabel-uang { min-width: 34rem; }
/* Lebar minimum saja belum cukup: dibagi lima lajur, tiap sel masih menyempit
   sampai "Rp 1.312.000" patah jadi dua baris. Sel angka karena itu TIDAK BOLEH
   membungkus sama sekali, tabelnya melebar sendiri sesuai isi dan digulir di
   dalam kotaknya. Nowrap ini AMAN justru karena kotaknya memangkas: pola yang
   sama di luar kotak gulir adalah penyebab luber yang sudah dua kali terjadi. */
.tabel-uang td, .tabel-uang th { white-space: nowrap; }
/* Baris elipsis di tengah tabel angsuran: bukan data, jadi ia tidak ditebalkan. */
.tabel-uang tr[data-lompat] td { color: var(--redup); font-weight: 400; text-align: center; }
/* Tabel suku bunga: kolom angka ditebalkan supaya yang dibandingkan pembaca
   menonjol tanpa harus diwarnai, warna tidak pernah jadi satu-satunya pembeda. */
.tabel-bunga td:last-child { font-weight: 700; text-align: right;
                             font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel-bunga th:last-child { text-align: right; }

/* 40d. KARTU PRODUK, kredit dan simpanan. Ketentuannya baris label-nilai, bukan
   paragraf: pembacanya membandingkan enam kartu sekaligus. */
.kartu-produk { display: flex; flex-direction: column; gap: var(--r3); }
.kartu-produk h3 { font-size: 1.125rem; }
.kartu-produk .rincian { margin-top: auto; }
.kartu-produk .rincian > li { border-bottom: 1px solid var(--garis); padding-bottom: var(--r2); }
.kartu-produk .rincian > li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Baris tambahan yang hanya dimiliki sebagian kartu (setoran harian, panen). */
.produk-catatan { font-size: var(--t-kecil); color: var(--tinta); background: var(--aksen-alas);
                  border-radius: var(--radius); padding: var(--r2) var(--r3); }

/* 40e. DAFTAR UNDUHAN LAPORAN, tiap baris satu target sentuh penuh, ukuran
   berkasnya ditulis supaya pengunjung tahu apa yang akan diunduh. */
.unduh-baris { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; }
.unduh-teks { min-width: 0; flex: 1; }
.unduh-nama { display: block; font-weight: 600; font-size: var(--t-kecil); }
.unduh-meta { display: block; font-size: var(--t-label); color: var(--redup); }
.unduh-ukuran { font-size: var(--t-label); color: var(--redup); white-space: nowrap;
                font-variant-numeric: tabular-nums; }

/* 40f. KARTU ANGKA KUNCI, enam angka laporan keuangan. Nilainya Manrope 800 dan
   BERTINTA, tidak pernah redup: di situs ini angkanya memang produknya. */
.angka-kunci { display: block; font-family: var(--f-judul); font-weight: 800;
               font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-variant-numeric: tabular-nums;
               color: var(--tinta); line-height: 1.2; margin-top: var(--r1); }
.angka-label { font-size: var(--t-kecil); color: var(--redup); }
@media (min-width: 640px)  { .kisi-6 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .kisi-6 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1200px) { .kisi-6.kisi-6-rapat { grid-template-columns: repeat(6, minmax(0,1fr)); } }

/* 40g. KARTU ARTIKEL EDUKASI, gambar mini, cip kategori beraksen, judul, lama baca. */
.kartu-artikel { padding: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.kartu-artikel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.artikel-isi { padding: var(--r4); display: flex; flex-direction: column; gap: var(--r2);
               flex: 1; min-width: 0; }
.artikel-isi h3 { font-size: 1.0625rem; }
.artikel-waktu { font-size: var(--t-kecil); color: var(--redup); margin-top: auto; }

/* 40h. KARTU KANTOR, nama, alamat lengkap, jam layanan, telepon. Alamat panjang
   WAJIB boleh membungkus; nomor telepon tidak pernah nowrap sendirian. */
.kartu-kantor { display: flex; gap: var(--r3); align-items: flex-start; }
.kartu-kantor h3 { font-size: 1.0625rem; }
.kartu-kantor p { color: var(--redup); font-size: var(--t-kecil); }
.kartu-kantor .kantor-jam { color: var(--tinta); font-weight: 600; }

/* 40i. CIP STATUS, ikon + kata + warna, tidak pernah warna saja. Semuanya
   bergaris TINTA, jadi tepinya terbaca di atas alas apa pun. */
.cip-status {
  display: inline-flex; align-items: center; gap: var(--r1);
  font-size: var(--t-kecil); font-weight: 600; padding: var(--r1) var(--r3);
  border-radius: 999px; border: 1px solid var(--tinta); color: var(--tinta);
  background: var(--kertas);
}
.cip-status .ikon { width: 16px; height: 16px; }
.cip-status[data-status="sukses"]     { background: var(--sukses-alas); }      /* tinta 13,17:1 */
.cip-status[data-status="berjalan"]   { background: var(--aksen-alas); }       /* tinta 13,32:1 */
.cip-status[data-status="menunggu"]   { background: var(--peringatan-alas); }  /* tinta 13,10:1 */
.cip-status[data-status="tutup"]      { background: var(--nonaktif); }         /* tinta 12,38:1 */

/* 40j. Baris kepala bagian yang punya aksi di kanannya. */
.kepala-aksi { display: flex; flex-wrap: wrap; gap: var(--r4);
               align-items: end; justify-content: space-between; margin-bottom: var(--r5); }
.kepala-aksi .kepala-bagian { margin-bottom: 0; }

/* 40k. KARTU ORANG, situs ini tidak menampilkan potret orang bernama sama sekali,
   jadi .potret-inisial di sini dipakai lembar komponen untuk menunjukkan
   penggantinya, bukan untuk menutupi wajah yang kebetulan kembar. */
.potret { width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
          border-radius: var(--radius); border: 1px solid var(--garis); margin-bottom: var(--r3); }
.potret-inisial {
  display: grid; place-items: center; aspect-ratio: 1 / 1; margin-bottom: var(--r3);
  border-radius: var(--radius); border: 1px solid var(--garis);
  background: var(--aksen-alas); color: var(--tinta);      /* 13,32:1 */
  font-family: var(--f-judul); font-weight: 800; font-size: 1.75rem; letter-spacing: .04em;
}

/* =============================================================================
   41. PENYESUAIAN YANG LAHIR DARI MARKUP HALAMAN INI
   ========================================================================== */

/* Blok penampung untuk keturunan berposisi absolut. Tanpa ini, .hanya-layar-baca
   dan cip yang berada di dalam kotak berpangkas mengambil blok penampung dari
   <body>, LOLOS dari pemangkasan, lalu menarik lebar dokumen melewati layar.
   Gejalanya cuma terlihat sesudah dirender, dan yang dilaporkan meluber justru
   elemen lain. */
.bagian, .pita-statistik, .bungkus, .kartu, .segmen, .daftar, .faq { position: relative; }

.hero-statistik div { display: flex; align-items: center; gap: var(--r2); }

/* Kendali tersegmen berbasis RADIO SUNGGUHAN, bukan <button> yang mati tanpa
   JavaScript (jebakan 7 di resep: kendali yang hanya hidup di JS ditukar MASUK
   oleh JS, bukan ditulis duluan di HTML). Radionya disembunyikan secara visual,
   labelnya yang digambar. */
.segmen label { flex: 1; min-width: 0; display: grid; place-items: center;
                min-height: 48px; padding-inline: var(--r2); text-align: center;
                overflow-wrap: anywhere; cursor: pointer;
                font-size: var(--t-kecil); font-weight: 600;
                color: var(--tinta); background: var(--kertas); }
.segmen label + label { border-left: 1px solid var(--garis-kendali); }
.segmen input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Terpilih = isian aksen + garis dalam TINTA. Dua penanda, bukan warna saja. */
.segmen label:has(input:checked) { background: var(--aksen);
                                   box-shadow: inset 0 0 0 2px var(--tinta); }
.segmen label:focus-within { outline: 2px solid var(--tinta); outline-offset: -3px; }

/* Kartu radio metode bunga: tiga pilihan berdampingan, masing-masing membawa satu
   kalimat penjelasan. Terpilih ditandai border 2px TINTA dan alas lembut, bukan
   titik radio saja. */
.pilihan-kartu { display: grid; gap: var(--r3); }
@media (min-width: 700px) { .pilihan-kartu { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.pilihan-kartu label { display: flex; gap: var(--r3); align-items: flex-start;
                       min-height: 48px; padding: var(--r3); cursor: pointer;
                       border: 1px solid var(--garis-kendali); border-radius: var(--radius);
                       background: var(--kertas); }
.pilihan-kartu input { width: 20px; height: 20px; accent-color: var(--tinta); flex: none;
                       margin-top: 2px; }
.pilihan-kartu label:has(input:checked) { border-color: var(--tinta); border-width: 2px;
                                          background: var(--aksen-alas); padding: calc(var(--r3) - 1px); }
.pilihan-kartu b { display: block; font-size: var(--t-isi); }
.pilihan-kartu span { font-size: var(--t-kecil); color: var(--redup); }

/* Cip pintas adalah TOMBOL, jadi ia perlu mewarisi huruf halaman. */
button.cip-garis { font-family: var(--f-isi); cursor: pointer; }
button.cip-garis[aria-pressed="true"] { background: var(--aksen); border-width: 2px; }

/* Kartu yang sebenarnya tombol (baris unduhan laporan). */
button.kartu { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }

/* .rincian dipakai sebagai <ul>, bukan <div>/<dl> saja.
   KISI, BUKAN FLEX. Dengan flex, labelnya berbasis 0 dan menyusut sampai nol
   begitu nilainya panjang, lalu teksnya MELUBER MENIMPA nilainya, terukur di
   1440px pada baris "Perpanjangan / Otomatis, bisa dihentikan kapan saja" dan
   "Penarikan / Tiap hari kerja di semua kantor". Tidak satu pun dari ketiga audit
   melihatnya, karena lebar halamannya tidak berubah sedikit pun. Dengan kisi dua
   lajur, label memakai lebarnya sendiri dan nilainya membungkus di lajur kanan. */
.rincian > li { display: flex; flex-wrap: wrap; gap: var(--r1) var(--r3);
                align-items: baseline; font-size: var(--t-kecil); }
/* Label boleh menyusut TAPI punya dasar 8ch, dan nilainya boleh TURUN KE BARIS
   SENDIRI saat keduanya tidak muat berdampingan. Dua bentuk lain sudah dicoba dan
   dua-duanya rusak pada baris yang sama ("Dicairkan sebelum jatuh tempo" /
   "Penalti 0,5% dari nominal"): flex dengan basis 0 membuat label MELUBER
   menimpa nilainya, dan kisi dengan lajur label `auto` memeras nilainya jadi
   lajur selebar empat huruf. Keduanya hanya terlihat sesudah dirender. */
.rincian .rincian-label { flex: 0 1 auto; min-width: 0; }
.rincian .rincian-nilai { flex: 0 1 auto; margin-left: auto; min-width: 0; }
/* Nilai di baris rincian BERTINTA dan tebal, lihat rambu DESIGN.md di 40a. */
.rincian .rincian-nilai { color: var(--tinta); }
/* Nilai panjang ("Otomatis, bisa dihentikan kapan saja") tidak boleh nowrap: di
   320px ia mendorong lebar halaman, dan yang dilaporkan meluber justru elemen
   lain. Yang nowrap hanya nilai yang benar-benar pendek dan berupa angka. */
.rincian .rincian-nilai { white-space: normal; text-align: right; overflow-wrap: anywhere; }

.tab-daftar button { min-width: 0; }

/* Daftar syarat dokumen: tiap baris diawali ikon centang --sukses (6,17:1).
   Ikonnya penanda jenis, bukan aksi, dan katanya tetap ditulis lengkap. */
.daftar-syarat li { display: flex; gap: var(--r3); align-items: flex-start;
                    font-size: var(--t-kecil); padding-block: var(--r2);
                    border-bottom: 1px solid var(--garis); }
.daftar-syarat li:last-child { border-bottom: 0; }
.daftar-syarat .ikon { color: var(--sukses); margin-top: 2px; }

/* Kalimat tanggal berlaku suku bunga: berdiri SEBELUM angka mana pun (W9), dan
   bertinta, bukan redup, ia bagian dari angkanya, bukan catatan kaki. */
.tanggal-berlaku { display: inline-flex; align-items: center; gap: var(--r2);
                   font-weight: 600; color: var(--tinta); margin-bottom: var(--r4); }

/* Kartu kanal pengaduan: ikon di atas, nama kanal, lalu detailnya. */
.kartu-kanal .ikon-kotak { margin-bottom: var(--r3); }
.kartu-kanal p { overflow-wrap: anywhere; }