/* style.css — tampilan halaman Modulgen (Pages) dan gaya cetak PDF modul */
:root{
  --biru:#1f3b73; --biru2:#12305f; --garis:#d7deea; --redup:#5b6b82;
  --hijau:#1c7c54; --merah:#b3261e; --latar:#f5f7fb;
}
*{box-sizing:border-box}
body{margin:0;background:var(--latar);color:#1f2733;
  font:15px/1.55 system-ui,"Segoe UI",Roboto,Arial,sans-serif}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:#fff;border-bottom:1px solid var(--garis);padding:12px 20px;position:sticky;top:0;z-index:20}
.merek strong{color:var(--biru);font-size:19px;margin-right:8px}
.merek span{color:var(--redup);font-size:13px}
.akun{display:flex;align-items:center;gap:8px}
main{max-width:1080px;margin:22px auto 60px;padding:0 16px;display:grid;gap:18px}
.kartu{background:#fff;border:1px solid var(--garis);border-radius:12px;padding:18px 20px;
  box-shadow:0 1px 2px rgba(20,40,80,.04)}
h2{font-size:17px;color:var(--biru);margin:0 0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.grid .lebar{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#33415c}
input,select{padding:9px 10px;border:1px solid var(--garis);border-radius:8px;font:inherit;background:#fff}
input:focus,select:focus{outline:2px solid #9db6e5;border-color:#9db6e5}
.aksi{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.tmbl{border:1px solid var(--garis);background:#fff;color:#233;border-radius:9px;
  padding:10px 15px;font-weight:600;cursor:pointer}
.tmbl:hover{background:#f2f6fd}
.tmbl-utama{background:var(--biru);border-color:var(--biru);color:#fff}
.tmbl-utama:hover{background:var(--biru2)}
.tmbl[disabled]{opacity:.5;cursor:not-allowed}
.redup{color:var(--redup);font-size:13px}
.catatan{color:var(--redup);font-size:12.5px;margin:12px 0 0}
.kemajuan{height:8px;background:#e8eef8;border-radius:99px;overflow:hidden;margin-top:12px}
.kemajuan>div{height:100%;width:0;background:linear-gradient(90deg,#2f5aa8,#5f9bea);transition:width .4s}
.kotak-pratinjau{margin-top:14px;background:#eef1f6;border:1px solid var(--garis);border-radius:10px;
  padding:14px;max-height:640px;overflow:auto}
.pesan{padding:10px 12px;border-radius:8px;font-size:13.5px;margin-top:12px}
.pesan-info{background:#eef4ff;border:1px solid #c9d9f7;color:#1d3a72}
.pesan-galat{background:#fdecea;border:1px solid #f6c9c4;color:#7f1d1a}
.pesan-ok{background:#e9f7ef;border:1px solid #bfe6d2;color:#14532d}
.donasi-info{margin-top:14px;padding:14px;border:1px dashed var(--garis);border-radius:10px;background:#fbfcfe}
.donasi-info img{max-width:220px;border:1px solid var(--garis);border-radius:8px;background:#fff}
footer{max-width:1080px;margin:0 auto 30px;padding:0 16px;text-align:center}

/* ---------- pratinjau modul (juga dipakai untuk cetak PDF) ---------- */
.mg-halaman{background:#fff;color:#111;width:21cm;min-height:29.7cm;margin:0 auto;
  padding:2cm;font:12pt/1.5 "Times New Roman",Times,serif;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.mg-kop{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border-bottom:3px double #000;padding-bottom:8px;margin-bottom:14px;text-align:center}
.mg-kop-1{font-weight:700;font-size:12pt;letter-spacing:.3px}
.mg-kop-2{font-weight:700;font-size:15pt}
.mg-kop-3{font-size:9.5pt}
.mg-logo{height:2.6cm;width:auto}
.mg-jd{text-align:center;margin:6px 0;font-weight:700;color:var(--biru2)}
.mg-jd-besar{font-size:22pt;margin-top:26px;letter-spacing:1px}
.mg-jd-besar2{font-size:14pt;text-align:left;border-bottom:2px solid var(--biru2);
  padding-bottom:4px;margin-top:22px}
.mg-jd-kecil{font-size:12.5pt}
.mg-kosong{margin:14px 0}
.mg-h1{font-weight:700;color:var(--biru);margin:14px 0 6px;font-size:12.5pt}
.mg-h2{font-weight:700;margin:10px 0 4px}
.mg-h3{font-weight:700;font-style:italic;margin:8px 0 4px}
.mg-p{margin:0 0 7px;text-align:justify;text-indent:0}
.mg-info{margin:4px 0 10px;font-style:italic;color:#333}
.mg-li{display:flex;gap:8px;margin:0 0 3px;text-align:justify}
.mg-tanda{min-width:1.5em;flex:0 0 auto}
.mg-li-1{margin-left:1.6em}.mg-li-2{margin-left:3.2em}
.mg-ayat{margin:10px 0 12px}
.mg-arab{font-family:"NotoNaskh","Noto Naskh Arabic",Amiri,serif;direction:rtl;
  font-size:18pt;line-height:1.9;text-align:center;margin:0 0 6px}
.mg-latin{font-style:italic;text-align:center;font-size:10.5pt;color:#333;margin:0 0 4px}
.mg-terjemah{margin:0 0 3px;text-align:justify;padding-left:1.5em}
.mg-sumber{font-style:italic;text-align:right;margin:0 0 10px;font-size:10.5pt}
.mg-tabel{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:11pt}
.mg-tabel td,.mg-tabel th{border:1px solid #8fa6c8;padding:5px 7px;vertical-align:top;text-align:left}
.mg-tabel th{background:#e8eef8;font-weight:700}
.mg-tabel td:first-child{font-weight:600}
.mg-tanpa-border td{border:0;padding:2px 4px}
.mg-tanpa-border td:first-child{width:30%}
.mg-arab-sel{font-family:"NotoNaskh","Noto Naskh Arabic",Amiri,serif;direction:rtl;
  text-align:right;font-size:13pt}
.mg-pb{break-after:page;page-break-after:always;height:0}

/* pilihan font Arab pada pratinjau */
body[data-font-arab="amiri"] .mg-arab, body[data-font-arab="amiri"] .mg-arab-sel{font-family:Amiri,serif}
body[data-font-arab="traditional"] .mg-arab, body[data-font-arab="traditional"] .mg-arab-sel{
  font-family:"Traditional Arabic","NotoNaskh",serif}

@font-face{font-family:"NotoNaskh";src:url("fonts/NotoNaskhArabic-Regular.ttf") format("truetype");
  font-display:swap}
@font-face{font-family:"Amiri";src:url("fonts/Amiri-Regular.ttf") format("truetype");font-display:swap}

@media print{
  body{background:#fff}
  .topbar,main>.kartu:not(#kartu-hasil),footer,#kartu-hasil>h2,#kartu-hasil>.aksi,#kartu-hasil>.redup{display:none!important}
  main{display:block;padding:0;margin:0;max-width:none}
  .kartu{border:0;box-shadow:none;padding:0;margin:0}
  .kotak-pratinjau{padding:0;border:0;background:#fff;max-height:none;overflow:visible}
  .mg-halaman{box-shadow:none;width:auto;min-height:0;padding:0;margin:0}
  @page{size:A4;margin:2cm}
}