/* program.css — komponen bersama fitur baru LAZISMU Madina
   (Agenda, Safari Dakwah, Ramadan Berbagi, Edukasi ZIS & Wakaf) */

/* ---------- kerangka halaman ---------- */
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin:2px 0 12px}
.page-head h2{margin:0; font-size:19px; letter-spacing:-.01em}
.page-head p{margin:3px 0 0; font-size:12.5px; color:var(--abu)}
.aksi-lanjut{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-top:10px}
.aksi-lanjut .btn{flex:0 1 auto}
.chip-baris{display:flex; gap:7px; flex-wrap:wrap; margin:8px 0 10px}
.chip.on{background:var(--hijau); color:#fff; border-color:transparent}
.chip.kecil{padding:5px 10px; font-size:11px}
.ff-pil-baris{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
.ff-pil-baris .chip{padding:3px 9px; font-size:11px}
.tabel-gulir{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tabel-gulir .tabel{min-width:520px}

/* ---------- kartu umum ---------- */
.pil-kartu{padding:13px 14px}
.rk-head{display:flex; align-items:center; gap:10px; color:var(--hijau)}
.rk-head > div{flex:1; min-width:0}
.rk-head b{display:block; color:var(--tinta); font-size:14.5px}
.rk-head .cap{display:block; color:var(--abu); font-size:11.5px; line-height:1.35}
.pil-aksi{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px}
.blok-teks b{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--hijau)}
.blok-teks p{margin:6px 0 0; font-size:13px; line-height:1.65; color:var(--tinta)}
.isi-materi{font-size:13.6px; line-height:1.75; color:var(--tinta); margin-top:8px}
.isi-materi p{margin:0 0 10px}
.isi-materi ul{margin:0 0 12px; padding-left:20px}
.isi-materi li{margin-bottom:5px}
.isi-materi h4{margin:14px 0 7px; font-size:14px; color:var(--hijau)}
.bl-judul{margin:0; font-size:17px}

/* ---------- progress ---------- */
.bar-prog{height:9px; border-radius:99px; background:#E9F1EC; overflow:hidden; margin:9px 0 4px}
.bar-prog > i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#1E7A55,#38A169)}
.bar-prog.terang{background:rgba(255,255,255,.25)}
.bar-prog.terang > i{background:linear-gradient(90deg,#FFD479,#F4B740)}
.prog-angka{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px; text-align:center}
.prog-angka span{display:block; font-size:10.5px; color:var(--abu); text-transform:uppercase; letter-spacing:.03em}
.prog-angka b{font-size:12.6px}
.prog-angka b.hijau{color:var(--hijau)}
.stat-3{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; text-align:center}
.stat-3 div{background:#F6FAF7; border:1px solid var(--garis); border-radius:12px; padding:8px 4px}
.stat-3 b{display:block; font-size:14px; color:var(--hijau)}
.stat-3 span{font-size:10.5px; color:var(--abu)}

/* ---------- info baris detail ---------- */
.info-baris{margin-top:10px; border-top:1px dashed var(--garis); padding-top:8px}
.info-baris .ib{display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:12.8px}
.info-baris .ib span{color:var(--abu)}
.info-baris .ib b{text-align:right}

/* ---------- hero Ramadan ---------- */
.ram-hero{position:relative; border-radius:20px; padding:20px 18px; color:#fff;
  background:radial-gradient(120% 120% at 85% 0%, #1E7A55 0%, #0E4C36 55%, #093627 100%);
  box-shadow:0 12px 30px rgba(14,76,54,.28); overflow:hidden}
.ram-hero::after{content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle,rgba(244,183,64,.35),transparent 70%)}
.rh-cap{display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.16); padding:5px 11px; border-radius:99px}
.ram-hero h1{margin:11px 0 6px; font-size:26px; letter-spacing:.02em; line-height:1.1}
.ram-hero p{margin:0; font-size:13px; opacity:.92; line-height:1.55}
.rh-stat{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; text-align:center;
  background:rgba(255,255,255,.11); border-radius:14px; padding:10px 6px}
.rh-stat span{display:block; font-size:10px; opacity:.8; text-transform:uppercase; letter-spacing:.04em}
.rh-stat b{font-size:13.4px}

/* ---------- dokumentasi ---------- */
.gal-doku{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin-top:8px}
.gal-doku img,.gal-doku video{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; border:1px solid var(--garis); background:#F2F5F3}

/* ---------- wilayah ---------- */
.wil-blok{margin-bottom:14px}
.wil-blok .ff-row{padding:7px 0; border-bottom:1px solid var(--garis)}
.wil-blok .ff-row:last-child{border-bottom:0}

/* ---------- kuis ---------- */
.kuis-set{display:flex; flex-direction:column; gap:14px}
.kuis-butir b{display:block; font-size:13.6px; line-height:1.5; margin-bottom:7px}
.kuis-pil{display:flex; align-items:flex-start; gap:9px; padding:9px 11px; border:1.3px solid var(--garis);
  border-radius:12px; margin-bottom:6px; font-size:13px; background:#FBFDFC; cursor:pointer}
.kuis-pil input{margin-top:2px; width:17px; height:17px}
.kuis-pil:has(input:checked){border-color:var(--hijau); background:var(--hijau-soft); font-weight:600}

/* ---------- hasil kuis & sertifikat ---------- */
.hasil-kartu.hijau{border-color:rgba(30,122,85,.35); background:#F3FAF6}
.hasil-kartu.merah{border-color:rgba(200,60,60,.3); background:#FDF4F4}
.sert-kartu{position:relative; border-radius:20px; padding:24px 20px; text-align:center; color:#123;
  background:linear-gradient(150deg,#FFFDF7,#F4F8F4); border:2px solid rgba(30,122,85,.35);
  box-shadow:0 10px 26px rgba(14,76,54,.12)}
.sert-kartu::before{content:""; position:absolute; inset:7px; border:1px dashed rgba(30,122,85,.3); border-radius:14px; pointer-events:none}
.sk-cap{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--hijau)}
.sk-judul{font-size:22px; font-weight:800; letter-spacing:.01em; margin:6px 0 12px; color:var(--hijau)}
.sert-kartu p{font-size:12.5px; color:var(--abu); margin:8px 0}
.sk-nama{font-size:24px; font-weight:800; margin:6px 0 10px; color:var(--tinta);
  border-bottom:2px dotted rgba(30,122,85,.4); display:inline-block; padding:0 14px 4px}
.sk-kaki{display:flex; flex-direction:column; gap:3px; margin-top:16px; font-size:11.5px; color:var(--abu)}
.pil-min{display:inline-block; padding:2px 7px; border-radius:8px; background:#F2F5F3; margin:2px 3px 0 0; font-size:11px}
.pil-min.benar{background:var(--hijau-soft); color:var(--hijau); font-weight:700}

@media (max-width:640px){
  .prog-angka{grid-template-columns:1fr 1fr}
  .ram-hero h1{font-size:22px}
  .page-head h2{font-size:17px}
}
@media print{
  .bnav,.ads-bawah,.nav-bawah,.app-wrap > header{display:none !important}
  .sert-kartu{box-shadow:none}
}

/* ---------- komponen admin tambahan ---------- */

.fld-set{display:flex; flex-direction:column; gap:2px}
.fld-set .fld{margin-bottom:4px}

.kec-baris{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; margin-top:6px}
.kec-chip{display:flex; flex-direction:column; align-items:flex-start; gap:2px; background:#F6FAF7; border:1.3px solid var(--garis);
  border-radius:12px; padding:8px 11px; text-align:left; font:inherit; cursor:pointer}
.kec-chip b{font-size:12.6px}
.kec-chip span{font-size:11px; color:var(--abu)}
.kec-chip.on{border-color:var(--hijau); background:var(--hijau-soft)}

.galeri-mini{display:flex; gap:7px; flex-wrap:wrap; margin-top:7px}
.gm{position:relative; width:78px; height:62px; border-radius:10px; overflow:hidden; border:1px solid var(--garis); background:#F2F5F3}
.gm img,.gm video{width:100%; height:100%; object-fit:cover}
.gm-x{position:absolute; inset-inline-end:2px; top:2px; width:18px; height:18px; border-radius:50%; border:0; background:rgba(0,0,0,.55); color:#fff; font-size:12px; line-height:1; cursor:pointer}

/* ---------- komitmen cicilan / sedekah bertahap (form & rincian) ---------- */
.ccl-kepala h2{margin:0; font-size:19px}
.ccl-kepala p{margin:4px 0 12px; font-size:12.6px; color:var(--abu)}
.ccl-form{padding:15px 16px}
.ccl-lbl{display:block; font-size:11.6px; font-weight:700; color:var(--abu); text-transform:uppercase; letter-spacing:.04em; margin:12px 0 2px}
.ccl-chips{display:flex; flex-wrap:wrap; gap:7px; margin:8px 0 4px}
.ccl-chip{background:#F6FAF7; border:1.3px solid var(--garis); border-radius:99px; padding:8px 14px; font:inherit; font-size:12.6px; color:var(--tinta); cursor:pointer; line-height:1.15}
.ccl-chip.on{background:var(--hijau); border-color:transparent; color:#fff; font-weight:700}
.ccl-form .inp{width:100%; box-sizing:border-box; margin-top:2px}
.ccl-ringkas{display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; margin:14px 0 10px; background:#F6FAF7; border:1.3px solid var(--garis); border-radius:14px; padding:12px 13px}
.ccl-ringkas > div{display:flex; flex-direction:column; gap:2px}
.ccl-ringkas span{font-size:10.6px; color:var(--abu); text-transform:uppercase; letter-spacing:.03em}
.ccl-ringkas b{font-size:14.4px}
.ccl-ringkas.kurang{border-color:rgba(200,60,60,.35); background:#FDF5F5}
.ccl-ringkas .ccl-peringat{grid-column:1/-1; font-size:12px; color:#B3261E; text-transform:none; letter-spacing:0}
.ccl-utama{width:100%; margin-top:12px}
.ccl-jadwal{margin-top:14px; padding:14px 16px}
.ccl-jad{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--garis); font-size:12.7px}
.ccl-jad span{color:var(--abu); min-width:42px}
.ccl-jad b{color:var(--tinta); flex:1}