/* ============================================================
   font-besar.css
   Memperbesar (1.2x) ukuran huruf di SELURUH halaman — admin & publik —
   tanpa perlu mengubah font-size di tiap file PHP satu per satu.

   CARA KERJA:
   Hampir semua font-size di seluruh sistem ditulis dalam satuan `rem`
   (misal: .78rem, .85rem), yang nilainya RELATIF terhadap font-size
   elemen <html> (disebut "root em"). Dengan menaikkan font-size <html>
   dari ukuran default browser (16px) menjadi 19.2px, SEMUA nilai rem di
   seluruh halaman — baik yang ditulis lewat <style> eksternal MAUPUN
   lewat atribut style="..." inline langsung di HTML — otomatis ikut
   menjadi 1.2x lipat, karena nilainya selalu dihitung ulang relatif
   terhadap root.

   CARA PASANG (di SETIAP file PHP yang ingin diperbesar):
   Tambahkan baris ini SETELAH semua <link rel="stylesheet" ...> yang
   sudah ada, sebelum tag </head>:

       <link rel="stylesheet" href="assets/css/font-besar.css">

   (sesuaikan path "assets/css/" relatif terhadap lokasi file —
    contoh: halaman di /admin/ dan /pages/ perlu "../assets/css/...")

   CATATAN PENTING:
   - Elemen yang ukurannya ditulis dalam `px` (bukan `rem`) TIDAK akan
     ikut membesar otomatis dengan teknik ini.
   - Karena SEMUA ukuran rem ikut membesar (termasuk padding/margin
     yang ditulis dalam rem), layout kartu/tombol akan ikut melebar
     secara proporsional — ini hal yang wajar dan diharapkan supaya
     teks besar tetap punya ruang yang cukup, tidak sempit.
============================================================ */

html {
  font-size: 19.2px !important; /* default desktop: 16px -> 19.2px = 1.2x */
}

/* ── RESPONSIVE SCALING: ukuran disesuaikan per lebar layar ─────────────────
   Rasio 1.2x dipertahankan, tapi nilai dasarnya diturunkan di layar kecil
   supaya teks besar tidak terasa memenuhi/menyesakkan layar HP, dan sedikit
   dinaikkan lagi di layar HP besar/tablet agar tetap nyaman dibaca. */

/* HP kecil (≤375px, mis. iPhone SE) — dasar 14px, hasil scaling ≈16.8px */
@media (max-width: 375px) {
  html { font-size: 16.8px !important; }
}

/* HP umum (376px–576px, mis. iPhone standar, Android umum) — dasar 15px */
@media (min-width: 376px) and (max-width: 576px) {
  html { font-size: 18px !important; }
}

/* HP besar / tablet kecil (577px–768px) — mendekati ukuran desktop normal */
@media (min-width: 577px) and (max-width: 768px) {
  html { font-size: 19.2px !important; }
}

/* Tablet besar / desktop kecil (769px–1200px) — tetap di rasio standar */
@media (min-width: 769px) and (max-width: 1200px) {
  html { font-size: 19.2px !important; }
}

/* Desktop besar (≥1201px) — sedikit dinaikkan agar tidak terasa kecil
   di layar lebar/monitor besar */
@media (min-width: 1201px) {
  html { font-size: 20px !important; }
}

/* ── FALLBACK UNTUK ELEMEN YANG MEMAKAI PX, BUKAN REM ───────────────────── */
/* Bootstrap Icons (class "bi") sering diberi ukuran lewat style="font-size:Npx"
   langsung di HTML. Baris ini tidak bisa menjangkau SEMUA kasus px inline
   secara otomatis (itu butuh edit manual per file), tapi menutupi kasus
   ikon yang ukurannya diatur lewat class bawaan Bootstrap Icons. */
.bi {
  font-size: 1.15em; /* relatif terhadap teks sekitarnya, ikut membesar wajar */
}

/* Tombol, input, dan badge Bootstrap memakai sedikit kombinasi rem+em di
   bawaannya sendiri — umumnya sudah otomatis ikut membesar lewat root
   scaling di atas. Baris di bawah ini memastikan kontrol form (input,
   select, textarea) tidak collapse atau terlalu kecil dibanding teks. */
.form-control, .form-select, .btn, .input-group-text {
  line-height: 1.5;
}

/* Tabel dengan banyak kolom (rekap, statistik) akan melebar signifikan
   setelah font 2x — pastikan tetap bisa di-scroll horizontal alih-alih
   memecah layout halaman. */
.table-responsive {
  overflow-x: auto !important;
}
