/* ==========================================================================
   TIPOGRAFI & TATA LETAK TEKS — Koperasi Kelurahan Merah Putih Latsari
   Lapisan 8 — dimuat PALING AKHIR oleh includes/header.php, sesudah
   admin.css / portal.css / laporan.css / CSS tambahan, supaya menjadi satu
   tempat yang menang atas aturan tipografi yang tersebar sebelumnya.

   MENGAPA BERKAS INI ADA
   Aturan tipografi sebelumnya tersebar: sebagian di assets/style.css
   (bagian "TIPOGRAFI & KETERBACAAN"), sebagian di dasar.css. Akibatnya
   beberapa blok tidak pernah mendapat aturan sama sekali — yang paling
   terlihat adalah daftar (<li>) yang tidak pernah diberi `text-wrap: pretty`
   sehingga kata terakhirnya sering berdiri sendiri di baris terakhir, dan
   beberapa paragraf tanpa batas lebar sehingga satu barisnya mencapai
   98–110 huruf.

   Berkas ini adalah SATU tempat untuk:
     1. pembungkusan kata (kata tidak dipotong, alamat panjang boleh patah)
     2. judul (seimbang, tidak terpotong, tidak menggantung)
     3. panjang baris (batas px untuk teks tetap, `em` untuk teks kecil)
     4. perataan (rata kiri-kanan HANYA untuk blok bacaan panjang)
     5. kartu (komposisi seragam, kisi meregang, aksi menempel ke bawah)
     6. tombol & lencana (tidak pernah rata kiri-kanan, tidak terpotong)
     7. angka/KPI (tidak pernah ikut aturan rata kiri-kanan)
     8. teks yang tidak boleh dipotong (line-clamp hanya untuk cuplikan)
     9. spasi antarelemen + kelas .ket-baris (pengganti <br> tata letak)
    10. penyesuaian baris angka diagram pada layar kecil

   ATURAN PENGUKURAN (dari audit sebelumnya — jangan diulang):
   • `ch` menyesatkan di sini: pada huruf Plus Jakarta Sans, 1ch = 12px,
     sehingga 66ch = 792px dan satu barisnya 93 huruf, 72ch = 864px dan
     satu barisnya 105–114 huruf. `ch` TIDAK dipakai sama sekali di berkas ini;
     untuk membatasi jumlah huruf dipakai `em` (--lebar-baris).
   • Perataan kiri-kanan TIDAK diikuti pemenggalan kata: peramban tidak punya
     kamus Bahasa Indonesia (`hyphens:auto` tidak berefek untuk lang="id"),
     jadi pada kolom sempit celah antarkata melar 3–6x. Justify hanya dipakai
     pada blok bacaan panjang; setiap blok yang diratakan sudah diukur
     (celah maks / celah alami <= 3) — lihat bagian 4.
   ========================================================================== */

/* ==========================================================================
   1. PEMBUNGKUSAN KATA
   Kata Bahasa Indonesia tidak pernah dipotong di tengah (word-break:normal),
   tetapi kata yang lebih panjang daripada kotaknya tetap boleh patah supaya
   tidak menembus keluar wadah (overflow-wrap:break-word).
   ========================================================================== */
p, li, dd, dt, figcaption, blockquote, summary, small, td, th,
.teks-mini, .teks-kecil, .teks-lembut, label, legend {
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}

/* Hanya alamat/surel/nomor yang boleh patah di titik mana pun — kalau tidak,
   satu URL panjang memaksa lebar halaman bertambah (luber di 320px). */
a[href^="http"],
a[href^="mailto:"],
a[href^="tel:"],
.alamat-panjang,
.patah-alamat {
  overflow-wrap: anywhere;
}

/* Kata terakhir tidak berdiri sendiri di baris terakhir (orphan), dan dua
   kata terakhir tidak menggantung di baris baru. Berlaku juga untuk daftar —
   sebelumnya hanya <p> yang mendapat aturan ini. */
p, li, dd, blockquote, figcaption, .teks-mini, .teks-kecil, .teks-lembut {
  text-wrap: pretty;
}

/* ==========================================================================
   2. JUDUL
   Judul SELALU rata kiri pada kolomnya. Perataan tidak ditulis di sini karena
   beberapa bagian memang sengaja menengahkan judulnya lewat wadahnya
   (.judul-bagian.tengah, .kosong, .sorot bertengahkan) — menulis
   `text-align:left` di sini akan merusak rancangan itu. Yang diatur di sini
   hanya pemenggalan baris & patahan kata.
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
}
/* Judul kartu: seimbang, tetapi jangan sampai judul pendek pecah jadi 3 baris
   di kartu sempit. */
.kartu h2, .kartu h3, .kartu h4,
.kartu-ds__judul, .unit-kartu__judul, .agenda-kartu__judul,
.grafik__judul, .info-judul, .kartu-berita h3 {
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* ==========================================================================
   3. PANJANG BARIS
   Batas panjang baris memakai DUA satuan, dipilih menurut sifat bloknya:

   • PIKsel — dipakai untuk blok yang sudah punya ukuran huruf tetap (16,5px).
     Angka px dipakai karena `ch` menyesatkan di sini: pada Plus Jakarta Sans
     66ch = 792px (1ch = 12px), sehingga "66ch" menghasilkan 93 huruf/baris.

   • em (--lebar-baris = 40em) — dipakai untuk teks berukuran LEBIH KECIL.
     Satu em mengikuti ukuran huruf elemen, sehingga jumlah huruf per baris
     tetap sama (≈85–90) baik pada teks 12px maupun 16,5px. Inilah satuan yang
     benar untuk membatasi jumlah huruf, dan `ch` tidak dipakai sama sekali.
   ========================================================================== */
:root {
  /* ≈85–90 huruf per baris, mengikuti ukuran huruf elemen. */
  --lebar-baris: 40em;
}

/* Tanya–jawab (beranda & halaman FAQ).
   Semula kotaknya 880px dan paragraf jawabannya terukur 97–106 huruf/baris. */
.faq { max-width: 760px; }
.faq details > p,
.faq details > ul,
.faq details > ol,
.faq dd,
.akordeon__isi > p {
  max-width: var(--lebar-kartu);      /* 620px */
}

/* Daftar tautan (dasar hukum, peta situs): judul peraturan sangat panjang.
   Semula memakai seluruh lebar kartu sehingga satu baris mencapai 110 huruf. */
.daftar-tautan li { max-width: var(--lebar-baris); }

/* Keterangan kecil di bawah diagram/tabel — batasnya mengikuti ukuran huruf.
   Sebagian blok ini berada di dalam `.kartu`, sedangkan `.kartu p` (620px)
   lebih khusus daripada nama kelas tunggal — karena itu selektornya ditulis
   `p.nama-kelas` supaya batasnya benar-benar berlaku. */
p.pot-catatan,
p.pot-kosong,
p.cari__petunjuk,
p.lap-ket,
p.keu-lipat,
p.peta-bantuan,
p.reg-tentang { max-width: var(--lebar-baris); }

/* Keterangan singkat di kartu regulasi. Pada 1024px kisi regulasi menjadi satu
   kolom sehingga kartunya melebar 930px dan satu barisnya 113 huruf. */
.reg-tentang span { max-width: var(--lebar-baris); }

/* Baris tautan situs resmi di halaman Potensi (semula 1096px / 89 huruf). */
.pot-situs-baris,
.pot-rt-baris { max-width: 780px; }

/* Teks pengantar panel poster (semula 711px / 87 huruf). */
.bk-poster-kepala p { max-width: var(--lebar-kartu); }

/* Paragraf langsung di dalam kartu design-system tanpa kelas khusus
   (semula ada yang melebar 1042px sehingga satu baris 69 huruf pada teks 12px). */
.kartu-ds > p,
.kartu-ds > ul,
.kartu-ds > ol { max-width: var(--lebar-kartu); }

/* Teks berukuran kecil (12–14px) di mana pun: batasnya mengikuti ukuran huruf,
   supaya jumlah huruf per barisnya tetap sama seperti teks badan.
   Contoh nyata: pesan keadaan kosong pada halaman Dokumen & Pengurus terukur
   98–103 huruf/baris karena kotaknya 620px sementara hurufnya hanya 12px.
   Selektor ditulis `p.teks-mini` (bukan `.teks-mini`) supaya menang atas
   `.kosong p` / `.kartu p` yang lebih khusus. */
p.teks-mini,
p.teks-kecil,
small.teks-mini { max-width: var(--lebar-baris); }

/* Keterangan gambar: selebar blok gambarnya, tidak lebih. */
figcaption {
  max-width: var(--lebar-kartu);
  margin-top: var(--sp-3);
  line-height: var(--lh-kecil);
  text-wrap: pretty;
}

/* ==========================================================================
   3b. HALAMAN PENGURUS & PORTAL — CAKUPAN YANG SEBELUMNYA TERLEWAT
   Aturan di bagian 3 hanya menyebut elemen halaman PUBLIK. Akibatnya halaman
   pengurus (36 tab) dan portal anggota (14 halaman) tidak pernah mendapat
   batas panjang baris: teks bacaan di sana terukur 94–175 huruf per baris
   (isi .admin__isi selebar 1168px), jauh di atas batas 92 huruf.

   Batasnya memakai `--lebar-baris` (em) supaya mengikuti ukuran huruf elemen —
   halaman pengurus memakai teks 12–16,5px dalam satu halaman yang sama.
   ========================================================================== */
/* Halaman pengurus: prosa & daftar, bukan tabel (tabel perlu lebar penuh). */
.admin__isi > p,
.admin__isi > .notis > p,
.admin__isi .kartu > p,
.admin__isi .kartu-ds > p,
.admin__isi .kartu li,
.admin__isi .kartu-ds li,
.admin__isi .notis > ul,
.admin__isi .notis > ol,
.admin__isi .teks-mini,
.admin__isi .teks-kecil,
.admin__isi .bantuan,
.admin__isi .pesan-bantu { max-width: var(--lebar-baris); }

/* Portal anggota: keterangan & catatan mengikuti lebar kartunya. */
.portal .portal-ket,
.portal .portal-catatan,
.portal .portal-kartu > p,
.portal .portal-kartu li { max-width: var(--lebar-baris); }

/* Teks panjang yang tidak boleh dipatah sembarang di halaman pengurus.
   Preseden nyata: nama akun Instagram ("@kopkelmerahputih.latsari") dipakai
   sebagai nilai kartu statistik berkolom 150px, sehingga `.statistik` memaksa
   halaman meluber 14px pada 1440px (diukur: isi 246px di dalam kolom 150px).
   Sama seperti alamat surel di halaman Kontak — nilai seperti ini harus boleh
   patah di titik mana pun. */
.admin .statistik .angka,
.admin .statistik .nilai,
.admin__isi .angka-panjang,
.portal .angka-panjang { overflow-wrap: anywhere; }

/* Judul kartu statistik yang panjang (mis. nama lembaga) juga dibungkus. */
.admin .statistik .kartu { min-width: 0; }
.admin .statistik .kartu > * { max-width: 100%; }

/* Paragraf yang menjadi ANAK LANGSUNG wadah bagian pada dashboard transparansi.
   Wadahnya dibatasi 1080px (komposisi.css), tetapi paragraf di dalamnya tidak
   ikut dibatasi sehingga satu barisnya terukur 127 huruf. */
.trans-bagian > p,
.kartu-ds > p.teks-lembut { max-width: var(--lebar-baris); }

/* Halaman cetak (laporan-cetak.php & anggota-cetak.php).
   Wadahnya 820px, sedangkan teks badan di sana hanya 12–14px — tanpa batas,
   satu barisnya mencapai 96 huruf (terukur pada pesan keadaan "403" dan
   "belum dapat dicetak"). Semua paragraf langsung di wadah cetak memang
   ditengahkan, jadi batas lebarnya ikut ditengahkan. */
.lap-cetak > p,
.lap-cetak__meta,
.lap-cetak__kaki {
  max-width: var(--lebar-baris);
  margin-inline: auto;
}

/* ==========================================================================
   4. PERATAAN (rata kiri-kanan)
   Hanya blok bacaan panjang yang kolomnya lebar. Ambang dipilih dari hasil
   ukur: pada kolom < 520px, justify membuat celah antarkata 3–6x celah alami.
   Halaman pengurus & portal TIDAK diratakan kiri-kanan: kolomnya sempit
   (kartu 20px padding) dan isinya banyak label/nilai, bukan prosa.
   ========================================================================== */

/* Blok bacaan panjang: baris terakhir tetap rata kiri (tidak dipaksa penuh). */
.sorot-narasi > p,
.baca-isi p,
.narasi > p,
.kartu-ds__teks,
.akordeon__isi > p,
.faq details > p {
  text-align-last: left;
}

/* Jawaban tanya–jawab tetap RATA KIRI.
   Percobaan meratakan kiri-kanan di sini TERUKUR gagal: pada kolom 620px
   celah antarkata maksimum mencapai 3,6x celah alami (ambang proyek 3,0) —
   teks jadi berlubang. Blok panjang yang lebih lebar (.sorot-narasi 600px
   dengan teks lebih panjang, .baca-isi 680px) tetap memiliki perataannya
   sendiri di style.css. */

/* Satu kolom (<=700px): semua perataan kiri-kanan dimatikan.
   Prioritas: keterbacaan, bukan perataan.
   Ambang 700px (bukan 768px) dipilih dari hasil ukur: pada 768px blok bacaan
   artikel masih terukur 60–71 huruf/baris dengan celah antarkata maksimum
   2,6x celah alami (masih di bawah ambang 3,0), jadi perataannya masih nyaman
   dan tidak perlu dimatikan. Mematikannya pada 768px justru menghilangkan
   perataan yang sudah diuji di `_scratch/uji_tipografi_berita.js`. */
@media (max-width: 700px) {
  .sorot-narasi > p,
  .narasi > p,
  .baca-isi p,
  .faq details > p,
  .kartu-ds__teks,
  .akordeon__isi > p {
    text-align: left;
    text-align-last: auto;
    hyphens: none;
    -webkit-hyphens: none;
  }
}

/* ==========================================================================
   5. KARTU — KOMPOSISI SERAGAM
   Kartu di dalam kisi sudah sama tinggi (grid meregangkan item); yang perlu
   dipastikan adalah isinya tidak memaksa tinggi berbeda:
   • judul kartu seimbang  → tidak ada kartu yang judulnya jadi 3 baris
   • aksi kartu menempel ke bawah (margin-top:auto) → tombol sejajar
   ========================================================================== */
.kartu,
.kartu-unit,
.kartu-berita,
.agenda-kartu,
.dok-kartu,
.unit-kartu,
.kartu-ds,
.peta-titik { min-width: 0; }

.kartu-unit,
.kartu-berita,
.unit-kartu { display: flex; flex-direction: column; }

/* Isi kartu boleh meregang; aksi selalu menempel ke bawah supaya tombol
   pada kartu-kartu sebaris sejajar (tinggi kartu tetap sama karena kisi
   meregangkan itemnya). */
.kartu-unit > .unit-isi,
.kartu-berita > .berita-isi { flex: 1; }
.kartu-unit > .tautan-panah,
.kartu-unit .tautan-panah,
.kartu-berita .berita-isi > .tautan-panah {
  margin-top: auto;
}
.unit-kartu__kaki,
.kartu-ds__kaki { margin-top: auto; }

/* Kartu di dalam kisi SELALU diregangkan setinggi barisnya.
   Sebagian kisi memasang `align-items:start` (supaya kolom narasi di sebelahnya
   tidak ikut melar); akibatnya kartu yang isinya lebih pendek berhenti lebih
   awal dan barisnya jadi bergerigi. `align-self:stretch` hanya menyentuh
   elemen kartu, jadi kolom narasi/teks di kisi yang sama tidak terpengaruh.
   Terukur sebelumnya: selisih tinggi kartu sebaris sampai 91px (profil) dan
   86px (program). */
.grid > .kartu,
.grid > .kartu-ds,
.grid > .kartu-berita,
.grid > .kartu-unit,
.unit-kisi > .unit-kartu,
.album-kisi > .album-butir { align-self: stretch; }
/* CATATAN: `.pot-kisi > .kartu` dan `.peta-daftar > .peta-titik` SENGAJA TIDAK
   diregangkan lagi (dipindah ke `komposisi.css` bagian 6 sebagai
   `align-self: start`) — kartu diagram potensi & kartu titik peta isinya
   memang berbeda panjang, dan meregangkannya menyisakan ruang kosong sampai
   43% (terukur 306px). */

/* Kisi kartu: lebar minimum kartu dijaga supaya teks di dalamnya tidak
   terkurung jadi 19–27 huruf per baris.
   • `.grid-4` semula memaksa 4 kolom pada 1440px → kartu 204px (19–23 huruf).
   • `.grid-3`/`.pilar` semula memaksa 3 kolom pada 1024px → kartu 258px
     (24–27 huruf/baris, terukur).
   Dengan minmax + auto-fit jumlah kolomnya menyesuaikan sendiri: 3 kolom pada
   desktop, 2 kolom pada tablet 1024px. Aturan @media lama di style.css
   (2 kolom di bawah 900px, 1 kolom di bawah 760px) tetap berlaku karena
   aturan ini hanya dipasang mulai 901px. */
@media (min-width: 901px) {
  .grid-3,
  .pilar { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
}
.album-kisi { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }

/* Tinggi baris di dalam kartu sedikit lebih rapat daripada prosa panjang,
   tetapi tetap lega untuk dibaca. */
.kartu p,
.kartu li,
.kartu dd,
.kartu-ds p,
.unit-kartu__teks { line-height: 1.65; }

/* ==========================================================================
   6. TOMBOL & LENCANA
   Tidak pernah rata kiri-kanan dan tidak boleh terpotong.

   CATATAN PENGUKURAN (penting): `white-space: nowrap` pada SELURUH tombol &
   lencana TERBUKTI membuat halaman meluber mendatar di 390px (halaman
   Pengurus +36px, lencana di dalam kotak sorotan menembus wadahnya). Karena
   syarat mutlak "tidak ada geser mendatar", label pendek dibuat seimbang
   (`text-wrap: balance`) — hasilnya tetap satu baris untuk label pendek,
   tetapi label panjang boleh membungkus alih-alih menembus layar.
   ========================================================================== */
.btn,
.tombol,
button,
input[type="submit"],
input[type="button"] { text-align: center; }

.btn,
.tombol {
  max-width: 100%;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Label tombol yang MEMANG pendek & jumlahnya tetap boleh dikunci satu baris.
   Hanya chip penyaring yang masuk daftar ini: labelnya satu-dua kata, wadahnya
   flex-wrap, dan lebarnya sudah diperiksa pada 320px.

   CATATAN PENGUKURAN — JANGAN diulang: `white-space: nowrap` pada
   `.tombol-kecil` (dipakai tombol kartu "situs resmi" di halaman Potensi)
   membuat lebar min-content tombol = lebar label penuh. Karena tombol itu
   berada di dalam kisi `1fr`, lebar kolom ikut membengkak (276px → 287px) dan
   halaman meluber +14px pada 320px. `nowrap` pada tombol umum karena itu
   DIBATALKAN — cukup `text-wrap: balance`. */
.lap-chip a { white-space: nowrap; }

.lencana,
.badge,
.badge--netral { text-wrap: balance; }

/* CATATAN: `.sorot` (komponen sorotan resmi) memakai garis tepi kiri merah
   sebagai AKEN merek — bukan debug outline. Ketebalannya diatur ulang di
   `komposisi.css` bagian 9 (5px → 3px). */

/* ==========================================================================
   7. ANGKA & KPI
   Angka tidak pernah diratakan kiri-kanan. Rancangan aslinya dipertahankan:
   kartu KPI rata tengah, kolom angka diagram rata kanan (supaya sejajar
   dengan batang). Tidak ada satu pun aturan justify di berkas ini yang
   mengenai elemen angka.
   ========================================================================== */
/* ANGKA SATU KATA (L/P pada diagram, tanggal, rata survey) boleh dikunci satu
   baris — nilainya murni angka sehingga tidak mungkin melebihi kolomnya. */
.pot-angka b,
.agenda-tanggal,
.survey-rata strong { text-wrap: nowrap; }

/* PENTING — JANGAN memakai `text-wrap: nowrap` pada nilai KPI/statistik
   (`.stat-ds__angka`, `.kpi__nilai`, `.kpi__angka`).
   Preseden nyata: kartu statistik beranda memuat nilai MAJEMUK
   "7 RW · 35 RT" pada kartu 165px (isi 123px); dengan `nowrap` nilainya tidak
   dapat membungkus sehingga `.kpi-kisi` melebar melebihi wadahnya dan halaman
   beranda meluber 7px pada 390px — persis kegagalan yang dilarang §42
   ("memperbaiki desktop tetapi merusak mobile ⇒ batalkan").
   `balance` sudah cukup: angka pendek tetap satu baris, nilai majemuk membungkus. */
.stat-ds__angka,
.kpi__nilai,
.kpi__angka,
.pot-kartu-jumlah { text-wrap: balance; overflow-wrap: break-word; }

/* Label kolom di dalam baris angka BOLEH membungkus: mengunci satu baris di
   sini pernah membuatnya menembus lebar kolom (terukur: isi 55px di dalam
   kolom 44px pada 360px). */
.pot-angka small { text-wrap: normal; }
/* Label KPI yang panjang tetap boleh membungkus supaya tidak terpotong. */
.stat-ds__label,
.stat-ds__catatan,
.kpi__label { text-wrap: balance; }

/* ==========================================================================
   8. TEKS YANG TIDAK BOLEH DIPOTONG
   `line-clamp` hanya untuk cuplikan kartu. Nama lembaga mitra & nama akun
   Instagram adalah informasi — tidak boleh dipotong.
   ========================================================================== */
.satgas-nama {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
  text-wrap: pretty;
}
.ig-identitas strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Ringkasan di kartu berita boleh dibatasi tingginya bila perlu (halaman
   daftar berita harus tetap rapi). Halaman BACA berita (.baca-isi) TIDAK
   pernah dibatasi — lihat aturan di bawah. */
.kartu-berita .berita-isi > p { text-wrap: pretty; }

/* ==========================================================================
   9. SPASI ANTARELEMEN
   Jarak yang konsisten: judul → teks, teks → visual, visual → keterangan.
   ========================================================================== */

/* Baris keterangan tambahan di bawah data utama.
   Menggantikan pemakaian `<br>` untuk mengatur tampilan: baris baru sekarang
   diatur CSS (`display:block`), bukan oleh penanda baris di dalam teks. */
.ket-baris { display: block; }

.pot-grafik + .pot-catatan,
.grafik__kanvas + .teks-kecil,
figure + figcaption { margin-top: var(--sp-3); }

/* Keterangan yang menempel langsung di bawah judul bagian diberi jarak tetap
   (sebelumnya mengandalkan margin bawaan yang berbeda-beda). */
.judul-bagian > h1 + p,
.judul-bagian > h2 + p,
.judul-bagian > .lencana + h1,
.judul-bagian > .lencana + h2 { margin-top: var(--sp-4); }

/* ==========================================================================
   10. LAYAR SANGAT KECIL — jangan sampai ada teks menembus wadah
   ========================================================================== */
@media (max-width: 760px) {
  /* Kolom ketiga harus cukup lebar untuk label kolom ("jumlah") — sebelumnya
     50px sementara isinya 55px sehingga labelnya menembus wadahnya. */
  .pot-angka { grid-template-columns: 46px 46px 58px; gap: 6px; }
  /* Kisi rapat (".pot-grafik-padat", dipakai daftar lipat jenis pekerjaan)
     punya aturan 3 kolom yang LEBIH KHUSUS daripada aturan 2 kolom umum,
     sehingga pada 360px barisnya tetap 3 kolom dan kolom angkanya terjepit
     (angka terdorong keluar kotak, terukur +18px). Aturan ini menyetarakannya
     dengan kisi biasa: label+angka berdampingan, batang pindah ke barisnya. */
  .pot-grafik-padat .pot-baris { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .pot-grafik-padat .pot-angka { grid-template-columns: 46px 46px 58px; gap: 6px; }
}

@media (max-width: 420px) {
  /* Kolom angka diagram dibuat lebih rapat supaya tidak menembus wadah
     (terukur melampaui induknya pada 375px & 360px). */
  .pot-angka,
  .pot-grafik-padat .pot-angka { grid-template-columns: 42px 42px 58px; gap: 5px; }
  .pot-angka b { font-size: .86rem; }
  .pot-angka small { font-size: .72rem; }
}