/* ==========================================================================
   KOMPOSISI VISUAL, TINGGI ISI & KESELARASAN TEKS ↔ VISUAL (PROMPT #14)
   Lapisan 9 — dimuat SETELAH tipografi.css.

   MENGAPA BERKAS INI ADA
   Aturan tata letak sebelumnya memusatkan perhatian pada tipografi (perataan,
   panjang baris). Yang belum diatur adalah HUBUNGAN antar elemen:
     • tinggi panel yang dipaksa sama sehingga menyisakan ruang kosong besar
     • baris terakhir kisi yang menyisakan lubang ("5 + 2" pada 7 KPI)
     • hierarki lebar yang seragam untuk semua elemen (padahal seharusnya
       halaman 1140px, isi bagian 1080px, blok teks 600–780px)
     • irama jarak vertikal DI DALAM kartu (ikon → judul → teks → aksi)
     • jarak antarbagian yang bertumpuk (dua bagian rapat berturut-turut)

   PRINSIP: CONTENT FOLLOWS VISUAL —
   tinggi elemen mengikuti isinya, bukan sebaliknya. Tidak ada `height` tetap
   untuk menyamakan tinggi; yang dipakai hanya `min-height` pada komponen yang
   memang perlu seragam (kartu KPI), dan `height: auto` di tempat lain.
   ========================================================================== */

/* ==========================================================================
   1. HIERARKI LEBAR (bukan satu max-width untuk semua)
   Dipakai supaya setiap blok teks mengikuti komposisi visual di atasnya.
   ========================================================================== */
:root {
  --lebar-isi-bagian: 1080px;   /* isi satu bagian (intro, dashboard, KPI) */
  --lebar-judul:      780px;    /* judul bagian + pengantarnya              */
  --lebar-teks-lebar: 760px;    /* blok teks panjang                        */
  --lebar-teks:       680px;    /* blok teks sedang (sudah ada: --lebar-baca) */
  --lebar-teks-sempit:620px;    /* keterangan & deskripsi pendek            */
}

/* Isi satu bagian dipusatkan pada 1080px, tetapi tidak pernah lebih lebar
   daripada wadah halaman (1140px) — jadi hanya berpengaruh pada layar lebar. */
.trans-bagian,
.trans-kpi,
.stat-seksi__isi { max-width: var(--lebar-isi-bagian); margin-inline: auto; }

/* ==========================================================================
   2. BAGIAN INTRO (LABEL + JUDUL + PENGANTAR) SEBAGAI SATU BLOK VISUAL
   ========================================================================== */
.judul-bagian {
  max-width: var(--lebar-judul);
  margin-bottom: var(--sp-7);          /* 32px, bukan 34px */
}
.judul-bagian > h1,
.judul-bagian > h2 { margin-bottom: var(--sp-3); }   /* 12px */
.judul-bagian > p { margin-bottom: 0; max-width: var(--lebar-teks-sempit); }
/* Label bagian menempel lebih rapat ke judul daripada jarak judul → pengantar. */
.judul-bagian > .lencana { margin-bottom: var(--sp-3); }

/* ==========================================================================
   3. IRAMA JARAK DI DALAM KARTU
   IKON → 18px → JUDUL → 10px → TEKS → 16px → AKSI
   Sebelumnya jarak ini bersumber dari margin bawaan <h3>/<p> yang berbeda-beda.
   ========================================================================== */
.kartu > .kartu-ikon,
.kartu-ds > .kartu-ikon { margin-bottom: var(--sp-5); }      /* 20px */
.kartu > h2,
.kartu > h3,
.kartu > h4 { margin-top: 0; margin-bottom: var(--sp-3); }   /* 12px */
.kartu > p { margin-top: 0; margin-bottom: var(--sp-4); }    /* 16px */
.kartu > p:last-child,
.kartu > ul:last-child,
.kartu > .kartu-kaki { margin-bottom: 0; }
.kartu > ul.cek { margin-bottom: var(--sp-4); }
.kartu > ul.cek > li:last-child { margin-bottom: 0; }

/* Padding kartu memakai clamp supaya ikut mengecil di layar sempit tanpa
   mengubah batas atasnya di desktop (26px → --pad-kartu). */
.kartu { padding: clamp(20px, 2.2vw, var(--pad-kartu)); }
.kartu-ds { padding: clamp(20px, 2.2vw, var(--pad-kartu)); }

/* ==========================================================================
   4. KARTU KPI — irama ANGKA → LABEL → CATATAN
   min-height dipakai (bukan height) supaya semua kartu KPI seragam TANPA
   memotong teks; isinya sendiri tetap height:auto.
   ========================================================================== */
.kpi,
.stat-ds {
  min-height: 128px;
  padding: var(--sp-6) var(--sp-5);        /* 24px */
  gap: var(--sp-2);                        /* 8px antarbaris */
  justify-content: flex-start;
}
.kpi__angka,
.stat-ds__angka { margin: 0; }
.kpi__label,
.stat-ds__label { margin: 0; }
.kpi__catatan,
.stat-ds__catatan { margin: 0; }

/* ==========================================================================
   5. KISI KARTU ANGKA — KOMPOSISI YANG SENGAJA DIRANCANG
   Jumlah kolom datang dari PHP (`kisi_kolom_terbaik()`) sebagai --kpi-kolom /
   --kisi-kolom, dipilih supaya baris terakhir tidak terlihat seperti sisa.
   Contoh nyata: 7 KPI → 4 kolom (4 + 3), bukan 5 kolom (5 + 2) yang membuat
   tiga slot di kanan tampak seperti kartu yang hilang.
   Nilai dari PHP dipakai mulai 1181px (desktop); pada lebar lebih kecil
   jumlah kolom dipatok lewat media query di bawah karena yang menentukan
   adalah lebar kartu, bukan jumlah itemnya.
   ========================================================================== */
.trans-kpi,
.kpi-kisi { grid-template-columns: repeat(var(--kpi-kolom, 4), minmax(0, 1fr)); }

/* Kisi kartu yang jumlahnya diketahui PHP (mis. 4 kartu manfaat pada halaman
   Program). Dengan 4 kartu, kisi ini semula memakai `auto-fit minmax(340px)`
   sehingga hanya terbentuk 3 kolom dan kartu keempat berdiri sendirian
   (3 + 1). Jumlah kolom kini mengikuti jumlah kartunya. */
.kisi-kartu { grid-template-columns: repeat(var(--kisi-kolom, 4), minmax(0, 1fr)); }

/* Kisi logo mitra (21 lembaga). 7 kolom → 7 + 7 + 7: tiga baris PENUH,
   sebelumnya 6 kolom menyisakan baris terakhir hanya berisi 3 logo.
   143px pada 1440px masih di atas ukuran thumbnail asli lambang (160px
   dirender penuh di dalam kotak), jadi tidak ada penurunan ketajaman.) */
.satgas-kisi { grid-template-columns: repeat(var(--kisi-kolom, 7), minmax(0, 1fr)); }

/* 761–1180px (tablet & tablet lanskap). */
@media (max-width: 1180px) {
  /* Jumlah kolom pada tablet juga dihitung PHP (--kpi-kolom-tablet) dengan
     batas 4 kolom. Contoh: 5 kartu → 3 kolom (3 + 2), bukan 4 kolom (4 + 1);
     7 kartu → 4 kolom (4 + 3). Jadi jumlah kolom selalu dipilih dari jumlah
     kartunya, bukan dipatok satu angka untuk semua keadaan. */
  .kpi-kisi,
  .trans-kpi { grid-template-columns: repeat(var(--kpi-kolom-tablet, 4), minmax(0, 1fr)); }
  .satgas-kisi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Kartu dengan isi panjang (manfaat program): dua kolom supaya teksnya tetap
     lega — 4 kartu menjadi 2 + 2, bukan 3 + 1. */
  .kisi-kartu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≤900px: dua kolom untuk kisi KPI.
   MENGAPA ambangnya 900px, bukan 760px: pada 761–900px empat kolom menyisakan
   kartu sekitar **159px** (terukur pada 768px) — di bawah ambang proyek 165px
   untuk kisi NON-teks, sehingga labelnya terlalu sering membungkus. Yang
   terdeteksi `audit_global.js` ada dua halaman (halaman contoh design system &
   tab Keanggotaan) karena keduanya memakai kisi KPI tanpa `--kpi-kolom-tablet`.
   Dua kolom juga membuat baris selalu PENUH (4 kartu → 2 + 2), sesuai aturan
   komposisi proyek — bukan 3 + 1 yang menyisakan satu kartu sendiri. */
@media (max-width: 900px) {
  .kpi-kisi,
  .trans-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≤760px: dua kolom (kartu 220–350px). */
@media (max-width: 760px) {
  .kpi-kisi,
  .trans-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .satgas-kisi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kisi-kartu { grid-template-columns: 1fr; }
}

/* ≤380px: satu kolom — kartu KPI dua kolom pada lebar ini sudah di bawah
   165px dan labelnya mulai terlalu sering membungkus. */
@media (max-width: 380px) {
  .kpi-kisi,
  .trans-kpi { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .satgas-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   6. TINGGI PANEL: ISI YANG MENENTUKAN
   `align-self:stretch` pada kartu di dalam kisi dipertahankan HANYA untuk
   kartu yang isinya setara (kartu teks). Untuk kisi yang isinya memang
   berbeda panjang — diagram potensi, daftar tautan peta situs, kartu titik
   peta — kartu dibiarkan setinggi isinya, karena memaksanya sama tinggi
   menghasilkan ruang kosong sampai 43% (terukur 306px pada halaman Potensi).
   ========================================================================== */
.pot-kisi > .kartu,
.peta-daftar > .peta-titik,
.grid-atas-sejajar > .kartu-ds { align-self: start; }

/* Kartu di kisi yang isinya setara tetap diregangkan supaya barisnya rata,
   tetapi TIDAK pernah lebih tinggi daripada isinya sendiri + padding. */
.grid > .kartu,
.unit-kisi > .unit-kartu,
.album-kisi > .album-butir { height: auto; }

/* ==========================================================================
   7. TENTANG KAMI + PANEL IDENTITAS
   Kolom kiri (narasi) sedikit lebih lebar daripada panel identitas, dan
   keduanya dimulai dari atas yang sama. Panel identitas tidak dipaksa sama
   tinggi dengan narasi.
   ========================================================================== */
.grid-identitas {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: var(--gap-seksi);
  align-items: start;
}
.grid-identitas > * { min-width: 0; }
@media (max-width: 900px) {
  .grid-identitas { grid-template-columns: 1fr; }
}

/* Kolom narasi (Profil & Program) dibatasi lebarnya.
   Pada dua kolom lebarnya sudah di bawah batas ini (528px), jadi aturan ini
   baru berlaku ketika kisinya menjadi SATU kolom — saat itulah tanpa batas
   barisnya melebar sampai 856px / 93 huruf (terukur pada 900px). */
.narasi > p { max-width: var(--lebar-baca); }   /* 680px */

/* VISI + MISI: isi yang menentukan tinggi.
   Sebelumnya kisi ini memakai `align-items:stretch` sehingga kartu Visi
   (isi 194px) dipaksa setinggi kartu Misi yang berisi 4 butir — terukur
   409px tinggi dengan 163px (40%) ruang kosong.
   `align-self:start` ditulis pada KARTUNYA (bukan hanya `align-items:start`
   pada kisinya) karena aturan `.grid > .kartu{align-self:stretch}` di
   `tipografi.css` mengalahkan `align-items` kisi. */
.grid-visi-misi {
  align-items: start;
  gap: var(--gap-kartu-besar);   /* 24px */
}
.grid-visi-misi > .kartu { align-self: start; }
@media (max-width: 900px) {
  .grid-visi-misi { grid-template-columns: 1fr; }
}

/* Kisi daftar tautan (peta situs) & kartu identitas: kartunya setinggi isinya.
   Ditulis pada kartunya karena aturan `.grid > .kartu-ds{align-self:stretch}`
   di `tipografi.css` lebih kuat daripada `align-items:start` pada kisinya. */
.grid-atas-sejajar > .kartu,
.grid-atas-sejajar > .kartu-ds { align-self: start; }

/* ==========================================================================
   8. JARAK ANTARBAGIAN — HINDARI SPASI BERGANDA
   Dua hal yang membuat jarak menumpuk:
     a) dua bagian "rapat" berturut-turut → 62px (padding bawah) + 34px
        (padding atas) = 96px
     b) padding bagian + margin bawah elemen terakhir di dalamnya
        (mis. `.kpi-kisi.jarak-bawah` 40px) → 62 + 40 = 102px pada satu sisi
   Perbaikannya: bagian kedua tidak menambah padding atasnya, dan elemen
   terakhir di dalam bagian tidak lagi menyumbang margin bawah.
   ========================================================================== */
.bagian-rapat + .bagian-rapat { padding-top: 0; }
.bagian + .bagian-rapat,
.bagian-rapat + .bagian { padding-top: var(--sp-10); }   /* 64px, satu nilai */

/* Elemen terakhir di dalam bagian tidak menyumbang margin bawah lagi.
   Selektor hanya menyentuh ANAK LANGSUNG wadah bagian, jadi margin di dalam
   kartu/daftar tidak terpengaruh. */
section[class*="bagian"] > .wrap > *:last-child,
section[class*="bagian"] > *:last-child { margin-bottom: 0; }

/* ==========================================================================
   9. GARIS TEPI AKEN YANG LEBIH HALUS (§16)
   `.sorot` adalah komponen sorotan resmi (kutipan/ajakan) dengan garis tepi
   kiri merah sebagai aksen merek — BUKAN debug outline. Tidak ada satu pun
   debug outline di CSS produksi (diperiksa dengan penyaring otomatis:
   tidak ada `outline` bertanda debug, tidak ada kotak putus-putus merah).
   Ketebalannya diturunkan 5px → 3px supaya terbaca sebagai aksen, bukan
   sebagai bingkai yang menarik perhatian lebih kuat daripada isinya.
   ========================================================================== */
.sorot { border-left-width: 3px; }
.sorot.sorot-narasi { border-left-width: 3px; }

/* ==========================================================================
   10. PANEL DALAM (DAFTAR DATA) TIDAK DIPAKSA SETINGGI PANEL LAIN
   Kartu daftar tautan (peta situs) dan kartu diagram (potensi) isinya memang
   berbeda panjang antarkolom; memaksa tingginya sama menyisakan ruang kosong
   35–57% (terukur 137–227px). Kartu seperti itu dimulai dari atas masing-masing.
   ========================================================================== */
.kartu-ds,
.kartu { height: auto; }
.kartu-ds__kaki,
.kartu > .kartu-kaki { margin-top: auto; }

/* ==========================================================================
   11. PENYELARASAN TANGGA JARAK (PROMPT #15 §33)
   Audit token menemukan nilai satu-off di luar tangga 8/12/16/24/32/48/64/80.
   Yang DISELARASKAN hanya nilai yang muncul berulang (30px muncul 111×,
   gap 38px, radius 11px) karena itulah yang terasa sebagai ritme yang
   menyimpang. Nilai kecil satu-off pada komponen tunggal (2px garis fokus,
   3px kotak warna legenda) dibiarkan — menghapusnya tidak memperbaiki apa pun
   (§42: jangan mengejar kesempurnaan angka).

   Token baru `--radius-xl: 26px` FORMALISASI, bukan perubahan: 26px ternyata
   sudah dipakai konsisten pada kartu besar (panel berita, panel Instagram,
   kotak survey, panel formulir, kartu situs resmi) — jadi yang salah adalah
   tidak adanya tokennya, bukan nilainya. Mengubahnya menjadi 18px akan
   mengubah tampilan seluruh situs tanpa alasan.
   ========================================================================== */
:root {
  --radius-xl: 26px;      /* kartu besar / panel — sudah dipakai konsisten */
  --jarak-kaki: 40px;     /* ruang bawah halaman (menggantikan nilai 38px) */
}

/* 30px → 32px (--sp-7). Sumber aslinya ada tiga, semuanya diselaraskan di
   sini (bukan dengan menyunting style.css, supaya aturan lama tetap utuh dan
   penyelarasannya terkumpul di satu lapisan):
     .bk-poster  { margin-top: 30px }   → panel poster beranda
     .survey     { margin-top: 30px }   → kotak survey di kaki halaman
     .statistik  { margin-bottom: 30px } → blok kartu angka pengurus          */
.bk-poster,
.survey { margin-top: var(--sp-7); }
.statistik { margin-bottom: var(--sp-7); }

/* padding-right 30px pada ringkasan FAQ → 32px (--sp-7). */
.faq summary { padding-right: var(--sp-7); }

/* radius 11px → 12px (--radius-md): tombol di kepala halaman. */
.nav-aksi .btn { border-radius: var(--radius-md); }

/* Ruang bawah kaki halaman: 38px → 40px, satu nilai untuk SEMUA halaman
   (nilainya berpasangan dengan tombol WhatsApp melayang di layar kecil). */
.kaki-isi { padding-bottom: var(--jarak-kaki); }

/* radius 26px → token (nilai tidak berubah, hanya dirapikan ke token). */
.bk-berita,
.ig-panel,
.survey,
.formulir-panel,
.pot-kelurahan { border-radius: var(--radius-xl); }

/* ==========================================================================
   12. KESERAGAMAN KEPALA HALAMAN (intro halaman)
   Semua halaman publik memakai pola `.judul-bagian` dengan h1 40px. Dua
   halaman memakai pola sendiri dengan ukuran berbeda — hasilnya judul halaman
   terasa berbeda tingkatan padahal sama. Diselaraskan pada ukuran yang SAMA
   tanpa mengubah struktur/penanda HTML-nya.
   ========================================================================== */
.reg-kepala-judul h1 { font-size: clamp(2rem, 3.4vw, 2.5rem); }   /* sama dengan .judul-bagian h1 */

/* ==========================================================================
   13. KARTU YANG MENYISAKAN RUANG KOSONG BERLEBIH
   Tiga kartu terukur >30% ruang kosong karena tingginya ditentukan tetangga
   sebarisnya, bukan isinya sendiri.
   ========================================================================== */
/* Kartu diagram pada dashboard transparansi: tingginya mengikuti isi. */
.grafik-kisi { align-items: start; }
.grafik-kisi > .grafik { align-self: start; height: auto; }

/* Kisi kartu panduan (halaman desain.php) — kartu setinggi isinya. */
.panduan-kisi { align-items: start; }
.panduan-kisi > .kartu-ds { align-self: start; }

/* Kartu statistik pengurus: isinya label/nilai pendek, jadi tidak perlu
   diregangkan setinggi kartu bersebelahan. */
.admin .statistik { align-items: start; }
.admin .statistik > .kartu { align-self: start; height: auto; }

/* ==========================================================================
   14b. SASARAN SENTUH PANAH GESER (PROMPT #15 §31, §36)
   `.bk-panah` (panah geser pada slider berita, slider poster, dan News Flash)
   berukuran 34×34px — di bawah standar proyek sendiri (`--sentuh-min: 44px`)
   dan di bawah pedoman WCAG 2.2 SC 2.5.5. Audit global menemukannya pada
   lima lebar layar (320–430px), yaitu tepat di perangkat yang paling
   membutuhkannya.

   Dinaikkan menjadi 44×44px. Catatan penting dari AGENTS.md: memperluas area
   tekan lewat pseudo-element `::after` TERBUKTI tidak bekerja (pernah diuji
   dengan klik 3px di luar tepi), jadi ukurannya memang harus benar-benar 44px.
   Ikon panahnya diperbesar sedikit agar tidak tenggelam di dalam lingkaran.
   ========================================================================== */
.bk-panah {
  width: var(--sentuh-min);
  height: var(--sentuh-min);
  font-size: 1rem;
}

/* Baris tombol geser diberi jarak yang tetap rapi setelah tombolnya membesar. */
.ps-panah,
.nf-panah {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* ==========================================================================
   15. SATU WARNA CINCIN FOKUS (PROMPT #15 §36)
   Sebelumnya halaman publik memakai cincin fokus HIJAU (--hijau-terang) di
   style.css sedangkan dasar.css memakai MERAH (--color-primary). Dua warna
   fokus berbeda untuk kontrol yang sama terasa tidak konsisten. Dipilih warna
   utama merek supaya kontrasnya terhadap latar krem tetap ≥3:1 di SEMUA
   halaman (hijau terang gagal kontras di atas kartu putih).
   Aksesibilitas tidak diturunkan — cincin tetap 3px + offset 2px.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.tombol:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   16. KISI HARUS BOLEH MENYUSUT (perbaikan luber mendatar di 320px)
   Ditemukan pada alamat produksi: halaman Unit Usaha meluber **70px** pada
   320px. Penyebabnya bukan teks, melainkan aturan tema lama di style.css
   yang mengubah kisi menjadi `grid-template-columns: 1fr` pada ≤760px.
   `1fr` sama dengan `minmax(auto, 1fr)`, dan batas `auto` berarti kolom
   TIDAK BOLEH menyusut di bawah lebar min-content isinya. Di dalam kartu ada
   tabel (`.tabel-ds`) ber-min-content 318px; ditambah padding kartu 52px
   menjadi 364px — melebihi ruang 276px yang tersedia, sehingga kisi memaksa
   halaman meluber.

   Dengan `minmax(0, 1fr)` kolom boleh menyusut, dan `.tabel-gulir`
   (`overflow-x:auto`) yang menggulir isinya secara mendatar — persis yang
   diminta §18 ("gunakan wadah tabel responsif"), bukan memotong informasi.

   Catatan: bug ini SUDAH ADA sebelum tahap ini (terukur 70px pada produksi
   dengan kedua lapisan baru dimatikan) — bukan regresi, tetapi nyata dan
   termasuk syarat §31 "tidak ada horizontal overflow pada 320px".
   ========================================================================== */
@media (max-width: 760px) {
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .pilar,
  .langkah,
  .grid-form,
  .pilihan-unit,
  .ringkas-anggota,
  .galeri,
  .poster-grid,
  .personel-grid,
  .galeri-dokumentasi,
  .grid-identitas,
  .grid-visi-misi { grid-template-columns: minmax(0, 1fr); }
}

/* Wadah gulir tabel: izinkan menyusut di dalam kisi/flex. Tanpa `min-width:0`,
   wadah `overflow-x:auto` tetap dipaksa selebar isinya sehingga tidak pernah
   menggulir — dan kisi induknya ikut meluber. */
.tabel-gulir,
.tabel-bungkus { min-width: 0; max-width: 100%; }

/* Pada ≤900px, style.css mematikan guliran `.tabel-gulir`
   (`overflow: visible`) karena tabel Ketua RT/RW memang BERUBAH MENJADI KARTU
   pada lebar itu. Tetapi aturan itu berlaku untuk SEMUA isi `.tabel-gulir` —
   padahal tabel lain (mis. daftar produk unit usaha) TIDAK berubah menjadi
   kartu, sehingga isinya menembus layar dan halaman meluber.
   Perbaikan: gulirannya DIPERTAHANKAN (isi yang memang pas tidak memunculkan
   bilah gulir, jadi tabel RT/RW tidak terpengaruh), dan hanya "hiasan"
   pembungkusnya yang dilepas supaya tampilan kartu RT/RW tetap seperti semula. */
@media (max-width: 900px) {
  .tabel-gulir {
    overflow-x: auto;
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
}

/* ---------------------------------------------------------------------------
   11. KOTAK PEMBERITAHUAN: ANAK FLEX WAJIB BOLEH MENYUSUT
   `.pemberitahuan` adalah flex (ikon + isi). Anak isinya tidak punya
   `min-width: 0`, sehingga teks panjang yang tidak bisa dipatahkan (mis. label
   tautan "Jurnal → Bangun dari Berkas") memaksa lebar min-content dan membuat
   halaman meluber pada 320px. Ini cacat laten komponen bersama — muncul di
   halaman mana pun yang memuat teks panjang tanpa spasi.
   --------------------------------------------------------------------------- */
.pemberitahuan > div { min-width: 0; overflow-wrap: anywhere; }
.pemberitahuan > div > * { max-width: 100%; }