/* ===== PSB Ma'had Al-Muqoddasah — gaya bersama (publik & admin) ===== */
@font-face{font-family:"Jakarta";src:url(../vendor/fonts/pjs-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jakarta";src:url(../vendor/fonts/pjs-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jakarta";src:url(../vendor/fonts/pjs-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Jakarta";src:url(../vendor/fonts/pjs-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Jakarta";src:url(../vendor/fonts/pjs-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Amiri";src:url(../vendor/fonts/amiri-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --hijau:#0e6b50;--hijau-tua:#0a3f31;--hijau-gelap:#072b22;--hijau-muda:#e7f2ed;--hijau-garis:#cfe3da;
  --emas:#c79a2b;--emas-tua:#9c7515;--emas-muda:#f7edd1;--navy:#1d2170;--krem:#faf7ef;--tinta:#16241e;--abu:#5d6b65;--merah:#b3261e;
  --bs-primary:#0e6b50;--bs-primary-rgb:14,107,80;--bs-body-font-family:"Jakarta",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bs-body-color:#16241e;--bs-body-bg:#faf7ef;--bs-link-color-rgb:14,107,80;--bs-link-hover-color-rgb:10,63,49;--bs-border-radius:.55rem;
  --pola:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1.2'%3E%3Cpath d='M36 6l8.8 21.2L66 36l-21.2 8.8L36 66l-8.800-21.2L6 36l21.2-8.800z'/%3E%3Crect x='14.800' y='14.800' width='42.400' height='42.400'/%3E%3Crect x='14.800' y='14.800' width='42.400' height='42.400' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
}
body{font-size:.9rem;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,h4,h5{font-weight:800;letter-spacing:-.01em}
a{text-decoration:none}
.arab{font-family:"Amiri",serif;font-weight:700;direction:rtl}
.btn{font-weight:600;--bs-btn-padding-y:.36rem;--bs-btn-padding-x:.8rem;--bs-btn-font-size:.86rem}
.btn-sm{--bs-btn-padding-y:.18rem;--bs-btn-padding-x:.5rem;--bs-btn-font-size:.78rem}
.btn-primary{--bs-btn-bg:var(--hijau);--bs-btn-border-color:var(--hijau);--bs-btn-hover-bg:var(--hijau-tua);--bs-btn-hover-border-color:var(--hijau-tua);--bs-btn-active-bg:var(--hijau-gelap);--bs-btn-active-border-color:var(--hijau-gelap);--bs-btn-disabled-bg:#8fb5a7;--bs-btn-disabled-border-color:#8fb5a7}
.btn-outline-primary{--bs-btn-color:var(--hijau);--bs-btn-border-color:var(--hijau);--bs-btn-hover-bg:var(--hijau);--bs-btn-hover-border-color:var(--hijau);--bs-btn-active-bg:var(--hijau-tua);--bs-btn-active-border-color:var(--hijau-tua)}
.btn-emas{--bs-btn-bg:var(--emas);--bs-btn-border-color:var(--emas);--bs-btn-color:#2b2105;--bs-btn-hover-bg:#d8ac3d;--bs-btn-hover-border-color:#d8ac3d;--bs-btn-hover-color:#2b2105;--bs-btn-active-bg:var(--emas-tua);--bs-btn-active-color:#fff}
.form-control,.form-select{font-size:.88rem;border-color:#c5d3cc}
.form-control:focus,.form-select:focus,.btn:focus-visible{border-color:var(--hijau);box-shadow:0 0 0 .2rem rgba(14,107,80,.2)}
.form-check-input:checked{background-color:var(--hijau);border-color:var(--hijau)}
.text-hijau{color:var(--hijau)}.text-emas{color:var(--emas-tua)}.bg-hijau{background:var(--hijau)}
.kartu{background:#fff;border:1px solid var(--hijau-garis);border-radius:.7rem;box-shadow:0 1px 2px rgba(10,63,49,.05)}
.huruf-besar{text-transform:uppercase}
.huruf-besar::placeholder{text-transform:none}

/* ---------- Header publik ---------- */
.kepala{position:sticky;top:0;z-index:1030;background:#fff;border-bottom:3px solid var(--emas);box-shadow:0 2px 10px rgba(10,63,49,.08)}
.kepala .isi{display:flex;align-items:center;gap:.6rem;padding:.35rem 0;flex-wrap:wrap}
.merek{display:flex;align-items:center;gap:.55rem;color:var(--navy);margin-right:auto;min-width:0}
.merek img{height:46px;width:auto}
.merek b{display:block;font-weight:800;font-size:1.02rem;line-height:1.1;color:var(--navy)}
.merek small{display:block;font-size:.72rem;color:var(--hijau);font-weight:600;line-height:1.2}
.menu-atas{display:flex;gap:.35rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.menu-atas::-webkit-scrollbar{display:none}
.menu-atas .btn{white-space:nowrap}
@media(max-width:767px){.menu-atas{width:100%;padding-bottom:.15rem}.menu-atas .btn{flex:1 0 auto}.merek img{height:38px}.merek b{font-size:.92rem}}

/* ---------- Beranda ---------- */
.hero{background:linear-gradient(135deg,var(--hijau-gelap),var(--hijau) 70%,#128a66);background-image:var(--pola),linear-gradient(135deg,var(--hijau-gelap),var(--hijau) 70%,#128a66);color:#fff;padding:1.4rem 0 1.5rem;position:relative}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:repeating-linear-gradient(90deg,var(--emas) 0 14px,transparent 14px 20px)}
.hero .arab{text-align:left;font-size:1.7rem;color:#f3dc9a;line-height:1.5}
.hero h1{font-size:clamp(1.45rem,3.6vw,2.3rem);margin:.1rem 0 .3rem;text-wrap:balance}
.hero p{color:#d6ebe2;max-width:56ch;margin-bottom:.8rem}
.lencana{display:inline-flex;align-items:center;gap:.35rem;border-radius:99px;padding:.18rem .7rem;font-weight:700;font-size:.76rem}
.lencana.buka{background:#d9f4e6;color:#0a5a3c}.lencana.tutup{background:#fde2df;color:#8f1d16}
.jam-kotak{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:.8rem;padding:.75rem 1rem;backdrop-filter:blur(3px);text-align:center}
.jam-kotak .hari{font-weight:700;color:#f3dc9a;font-size:.95rem}
.jam-kotak .tanggal{font-weight:800;font-size:1.15rem}
.jam-kotak .jam{font-variant-numeric:tabular-nums;font-weight:800;font-size:2rem;line-height:1.1;letter-spacing:.02em}
.jam-kotak .jam small{font-size:.8rem;font-weight:600;color:#d6ebe2}
.judul-seksi{display:flex;align-items:center;gap:.5rem;font-size:1.05rem;font-weight:800;margin:0 0 .6rem;color:var(--hijau-tua)}
.judul-seksi::before{content:"";width:10px;height:10px;background:var(--emas);transform:rotate(45deg);flex:none}
.umum{border-left:5px solid var(--navy);padding:.7rem .85rem;height:100%}
.umum.pembukaan{border-left-color:var(--hijau)}.umum.penutupan{border-left-color:var(--merah)}
.umum h3{font-size:.98rem;margin:.25rem 0 .3rem}
.umum .isi-umum{color:#33433c;white-space:pre-line;overflow-wrap:anywhere}
.umum .meta{font-size:.72rem;color:var(--abu);font-weight:600}
.tag{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:.1rem .4rem;background:#e6e7f5;color:var(--navy)}
.tag.pembukaan{background:var(--hijau-muda);color:var(--hijau)}.tag.penutupan{background:#fde2df;color:var(--merah)}
.alur{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem}
.alur div{background:#fff;border:1px solid var(--hijau-garis);border-radius:.6rem;padding:.5rem .55rem;position:relative}
.alur b{display:block;font-size:.8rem;line-height:1.2}.alur span{font-size:.72rem;color:var(--abu)}
.alur i{color:var(--emas-tua);font-size:1.1rem}
@media(max-width:767px){.alur{grid-template-columns:1fr 1fr}}
.kaki{margin-top:auto;background:var(--hijau-gelap);background-image:var(--pola);color:#d6ebe2;border-top:4px solid var(--emas)}
.kaki h4{color:#fff;font-size:1rem}.kaki a{color:#f3dc9a}
.kaki .baris-info{display:flex;gap:.55rem;margin-bottom:.4rem;align-items:flex-start}
.kaki .baris-info i{color:#f3dc9a}
.kaki iframe{width:100%;height:230px;border:0;border-radius:.6rem;display:block}
.kaki .bawah{border-top:1px solid rgba(255,255,255,.14);font-size:.74rem;padding:.45rem 0;color:#a9c9bc}
.wa-layang{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:1040;width:52px;height:52px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;font-size:1.7rem;box-shadow:0 6px 18px rgba(0,0,0,.28);animation:denyut 2.4s infinite}
.wa-layang:hover{color:#fff;background:#1eb957}
@keyframes denyut{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55),0 6px 18px rgba(0,0,0,.28)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0),0 6px 18px rgba(0,0,0,.28)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0),0 6px 18px rgba(0,0,0,.28)}}

/* ---------- Popup (SweetAlert2) ---------- */
.swal2-popup{font-family:inherit;border-radius:.9rem;padding:1rem 1rem 1.1rem;border-top:5px solid var(--emas)}
.swal2-title{font-size:1.15rem;font-weight:800;color:var(--hijau-tua);padding:.4rem .6rem 0}
.swal2-html-container{font-size:.9rem;margin:.6rem .4rem 0}
.swal2-actions{margin-top:.8rem}
.swal2-styled.swal2-confirm{background:var(--hijau);font-weight:700;border-radius:.5rem;padding:.45rem 1.3rem}
.swal2-styled.swal2-cancel,.swal2-styled.swal2-deny{font-weight:700;border-radius:.5rem;padding:.45rem 1.1rem}
.swal2-styled:focus{box-shadow:0 0 0 3px rgba(14,107,80,.3)}
.swal2-validation-message{font-size:.84rem;margin:.6rem 0 0;border-radius:.5rem}
.swal2-toast{border-top:0;border-left:5px solid var(--hijau);padding:.5rem .8rem}
.pop-form{text-align:left}.pop-form label{font-weight:700;font-size:.8rem;margin-bottom:.15rem}
.pop-form .form-control{font-weight:600;letter-spacing:.02em;margin-bottom:.55rem}
.ts-wadah{display:flex;justify-content:center;min-height:0;margin-top:.2rem}
.jejak{text-align:left;margin:.2rem 0 0}
.jejak .lgk{display:flex;gap:.6rem;align-items:center;border:1px solid var(--hijau-garis);border-radius:.6rem;padding:.45rem .6rem;background:#fff}
.jejak .lgk i.ik{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e9ecea;color:#7c8a84;font-size:1rem;flex:none}
.jejak .lgk b{display:block;font-size:.86rem;line-height:1.2}.jejak .lgk small{color:var(--abu);font-size:.74rem}
.jejak .lgk.selesai{background:var(--hijau-muda)}.jejak .lgk.selesai i.ik{background:var(--hijau);color:#fff}
.jejak .lgk.aktif{border-color:var(--emas);background:var(--emas-muda);box-shadow:0 0 0 2px rgba(199,154,43,.25)}.jejak .lgk.aktif i.ik{background:var(--emas);color:#fff}
.jejak .lgk.belum{opacity:.62}
.jejak .panah{text-align:center;color:var(--hijau);line-height:1;font-size:1.05rem;margin:.05rem 0}
.jejak .panah.belum{color:#b9c4bf}

/* ---------- Input tanggal (07 Agustus 2026) ---------- */
.tgl-wadah{position:relative;display:block}
.tgl-wadah .tgl-teks{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230e6b50' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/%3E%3C/svg%3E") no-repeat right .6rem center;padding-right:2rem;cursor:pointer}
.tgl-wadah input[type=date]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

/* ---------- Formulir bertahap ---------- */
.fm-atas{position:sticky;top:0;z-index:1020;background:#fff;border-bottom:1px solid var(--hijau-garis);box-shadow:0 2px 8px rgba(10,63,49,.06)}
.fm-atas .jdl{display:flex;align-items:center;gap:.5rem;padding:.35rem 0 .25rem}
.fm-atas .jdl img{height:34px}
.fm-atas .jdl b{font-size:.9rem;line-height:1.15;color:var(--navy)}
.fm-atas .jdl small{display:block;font-size:.7rem;color:var(--abu);font-weight:600}
.fm-persen{font-weight:800;font-size:1.25rem;color:var(--hijau);font-variant-numeric:tabular-nums;margin-left:auto}
.fm-bar{height:9px;background:var(--hijau-muda);border-radius:99px;overflow:hidden}
.fm-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--hijau),var(--emas));border-radius:99px;transition:width .45s ease}
.fm-nomor{display:flex;gap:4px;overflow-x:auto;padding:.35rem 0;scrollbar-width:thin;scroll-behavior:smooth}
.fm-nomor button{flex:none;min-width:28px;height:26px;border-radius:6px;border:1px solid #cdd8d2;background:#fff;font-size:.72rem;font-weight:700;color:#7c8a84;padding:0 4px}
.fm-nomor button.isi{background:var(--hijau-muda);border-color:var(--hijau-garis);color:var(--hijau)}
.fm-nomor button.kini{background:var(--emas);border-color:var(--emas-tua);color:#231a02;box-shadow:0 0 0 3px rgba(199,154,43,.3);transform:scale(1.08)}
.fm-nomor button:disabled{cursor:not-allowed}
.fm-panggung{position:relative;overflow:hidden;padding-top:.75rem;padding-bottom:5rem}
.fm-hal{will-change:transform,opacity}
.fm-hal.masuk-kanan{animation:gulirKanan .42s cubic-bezier(.2,.8,.2,1)}
.fm-hal.masuk-kiri{animation:gulirKiri .42s cubic-bezier(.2,.8,.2,1)}
@keyframes gulirKanan{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes gulirKiri{from{opacity:0;transform:translateY(-46px)}to{opacity:1;transform:none}}
.soal{background:#fff;border:1px solid var(--hijau-garis);border-radius:.8rem;padding:.8rem .9rem .9rem;margin-bottom:.6rem;position:relative;transition:box-shadow .2s,border-color .2s}
.soal.sorot{border-color:var(--emas);box-shadow:0 0 0 3px rgba(199,154,43,.28),0 8px 24px rgba(10,63,49,.08)}
.soal .kepala-soal{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.5rem}
.soal .no{flex:none;min-width:38px;height:38px;border-radius:10px;background:var(--hijau);color:#fff;font-weight:800;display:grid;place-items:center;font-size:1rem;padding:0 6px}
.soal.sorot .no{background:var(--emas);color:#231a02}
.soal label.jdl{font-weight:700;font-size:1rem;line-height:1.3;margin:0;padding-top:.3rem;flex:1}
.soal .hal{flex:none;font-size:.72rem;font-weight:700;color:var(--abu);background:var(--hijau-muda);border-radius:6px;padding:.15rem .45rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.soal .bag{font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--emas-tua);margin-bottom:.3rem}
.soal .ket{font-size:.8rem;color:var(--abu);white-space:pre-line;margin:0 0 .5rem;background:var(--krem);border-radius:.45rem;padding:.4rem .55rem;border-left:3px solid var(--emas)}
.soal .form-control,.soal .form-select{font-size:1rem;padding:.5rem .7rem;font-weight:600}
.soal .salah{color:var(--merah);font-size:.8rem;font-weight:600;margin-top:.3rem;display:none}
.soal.galat{border-color:var(--merah);animation:goyang .35s}
.soal.galat .salah{display:block}
@keyframes goyang{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.pilihan{display:grid;gap:.35rem}
.pilihan label{display:flex;align-items:center;gap:.55rem;border:1.5px solid #cdd8d2;border-radius:.55rem;padding:.45rem .7rem;cursor:pointer;font-weight:600;background:#fff;transition:.15s}
.pilihan label:hover{border-color:var(--hijau)}
.pilihan input[type=radio],.pilihan input[type=checkbox]{accent-color:var(--hijau);width:1.05rem;height:1.05rem;flex:none}
.pilihan label:has(input:checked){border-color:var(--hijau);background:var(--hijau-muda);color:var(--hijau-tua)}
.unggah{border:2px dashed #b9cbc2;border-radius:.7rem;padding:.7rem;text-align:center;background:var(--krem)}
.unggah .tmb{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap}
.unggah img{max-width:100%;max-height:300px;border-radius:.5rem;border:1px solid var(--hijau-garis);margin-bottom:.5rem;cursor:zoom-in;background:#fff}
.unggah .info{font-size:.76rem;color:var(--abu);margin-top:.4rem}
.fm-bawah{position:fixed;left:0;right:0;bottom:0;z-index:1020;background:#fff;border-top:1px solid var(--hijau-garis);padding:.5rem 0;box-shadow:0 -4px 14px rgba(10,63,49,.07)}
.fm-bawah .btn{min-width:8.5rem;padding:.55rem 1rem;font-size:.95rem}
.ringkas{font-size:.84rem}
.ringkas .rb{display:flex;gap:.5rem;padding:.28rem .2rem;border-bottom:1px dashed var(--hijau-garis);cursor:pointer;break-inside:avoid}
.ringkas .rb:hover{background:var(--hijau-muda)}
.ringkas .rb span{flex:none;width:2rem;font-weight:800;color:var(--hijau)}
.ringkas .rb div{flex:1;min-width:0}.ringkas .rb small{display:block;color:var(--abu);line-height:1.2}
.ringkas .rb b{overflow-wrap:anywhere}
.ringkas h6{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--emas-tua);font-weight:800;margin:.7rem 0 .2rem}
.sukses-ikon{width:74px;height:74px;border-radius:50%;background:var(--hijau);color:#fff;display:grid;place-items:center;font-size:2.4rem;margin:0 auto .6rem;box-shadow:0 0 0 8px var(--hijau-muda)}
.saran{position:absolute;left:0;right:0;top:100%;z-index:5;background:#fff;border:1px solid var(--hijau-garis);border-radius:.5rem;box-shadow:0 8px 20px rgba(0,0,0,.1);overflow:hidden}
.saran button{display:block;width:100%;text-align:left;border:0;background:#fff;padding:.4rem .7rem;font-weight:600}
.saran button:hover{background:var(--hijau-muda)}

/* ---------- Penampil foto ---------- */
.pf{position:relative;background:#1c2622 var(--pola);overflow:hidden;touch-action:none;cursor:grab;user-select:none}
.pf.geser{cursor:grabbing}
.pf img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;-webkit-user-drag:none}
.pf-alat{position:absolute;right:8px;bottom:8px;display:flex;gap:4px;z-index:2}
.pf-alat .btn{background:rgba(255,255,255,.92);border:0;width:34px;height:34px;padding:0;display:grid;place-items:center;font-size:1rem;color:var(--hijau-tua)}
.pf-alat .btn:hover{background:#fff}
.pf-layar{position:fixed;inset:0;z-index:2000;background:rgba(7,20,16,.93);display:flex;flex-direction:column}
.pf-layar .pf{flex:1}
.pf-layar .atas{display:flex;align-items:center;color:#fff;padding:.4rem .7rem;gap:.5rem}
.pf-layar .atas b{margin-right:auto;font-size:.9rem}

/* ---------- Admin ---------- */
.adm-nav{position:sticky;top:0;z-index:1030;background:var(--hijau-gelap);background-image:var(--pola);border-bottom:3px solid var(--emas)}
.adm-nav .isi{display:flex;align-items:center;gap:.4rem;min-height:56px}
.adm-nav .merek b{color:#fff;font-size:1rem}.adm-nav .merek small{color:#f3dc9a;font-size:.72rem}
.adm-nav .merek img{height:42px;background:#fff;border-radius:6px;padding:2px}
.adm-menu{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.adm-menu::-webkit-scrollbar{display:none}
.adm-menu a{color:#cfe5db;font-weight:600;font-size:.74rem;padding:.55rem .3rem;border-radius:.5rem;white-space:nowrap;display:flex;align-items:center;gap:.3rem}
.adm-menu a:hover{background:rgba(255,255,255,.1);color:#fff}
.adm-menu a.aktif{background:var(--emas);color:#231a02}
.adm-menu .jml{background:rgba(255,255,255,.18);border-radius:99px;font-size:.72rem;padding:0 .38rem;font-weight:800}
.adm-menu a.aktif .jml{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.adm-menu .jml{display:inline-block;min-width:1.5rem;text-align:center;font-variant-numeric:tabular-nums;animation:jml-denyut 2.6s ease-in-out infinite}
.adm-menu .jml.j-masuk{background:#f2b134;color:#3b2a00;--gl:242,177,52}
.adm-menu .jml.j-verifikasi{background:#4aa3df;color:#06263d;--gl:74,163,223;animation-delay:.35s}
.adm-menu .jml.j-ujian{background:#a77be0;color:#2a0f55;--gl:167,123,224;animation-delay:.7s}
.adm-menu .jml.j-penilaian{background:#ff8a5b;color:#4a1700;--gl:255,138,91;animation-delay:1.05s}
.adm-menu .jml.j-pengumuman{background:#4fd18b;color:#06341f;--gl:79,209,139;animation-delay:1.4s}
@keyframes jml-denyut{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(var(--gl),.55)}50%{transform:scale(1.1);box-shadow:0 0 0 5px rgba(var(--gl),0)}}
@keyframes jml-lompat{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-6px) scale(1.35)}60%{transform:translateY(1px) scale(.95)}100%{transform:translateY(0) scale(1)}}
.adm-menu .jml.lompat{animation:jml-lompat .6s ease-out, jml-denyut 2.6s ease-in-out .6s infinite}
@media (prefers-reduced-motion:reduce){.adm-menu .jml,.adm-menu .jml.lompat{animation:none}}
@media(max-width:991px){.adm-nav .isi{flex-wrap:wrap;padding:.25rem 0}.adm-menu{order:3;flex-basis:100%}}
.adm-isi{padding-top:.6rem;padding-bottom:1rem}
.bilah{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.5rem}
.bilah h1{font-size:1.1rem;margin:0 auto 0 0;display:flex;align-items:center;gap:.4rem;color:var(--hijau-tua)}
.bilah .cari{position:relative;width:min(100%,250px)}
.bilah .cari i{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);color:var(--abu)}
.bilah .cari input{padding-left:1.9rem}
.bilah .form-control,.bilah .form-select{padding:.3rem .55rem;font-size:.82rem}
.bilah .tgl-wadah{width:158px}
.tbl-bebas{overflow:visible!important;max-height:none!important}
.tbl-bebas table.data th{top:var(--sticky-atas,59px)}
@media(max-width:991px){.tbl-bebas{overflow-x:auto!important}.tbl-bebas table.data th{top:0}}
.tabel-wadah{overflow:auto;background:#fff;border:1px solid var(--hijau-garis);border-radius:.6rem}
table.data{width:100%;border-collapse:collapse;font-size:.76rem}
table.data th{background:var(--hijau);color:#fff;font-weight:700;padding:.4rem .26rem;white-space:nowrap;position:sticky;top:0;z-index:1;text-align:left}
table.data th[data-sort]{cursor:pointer;user-select:none}
table.data th[data-sort]:hover{background:var(--hijau-tua)}
table.data th[data-sort]::after{content:"\2195";opacity:.45;margin-left:.3rem;font-size:.8em}
table.data th.naik::after{content:"\2191";opacity:1;color:#f3dc9a}
table.data th.turun::after{content:"\2193";opacity:1;color:#f3dc9a}
table.data td{padding:.28rem .26rem;border-top:1px solid #e3ece7;vertical-align:middle}
table.data tbody tr:nth-child(even){background:#f6faf8}
table.data tbody tr:hover{background:var(--emas-muda)}
table.data td.aksi{white-space:nowrap;text-align:right;padding-left:.15rem}
table.data td.aksi .btn{--bs-btn-padding-x:.38rem;--bs-btn-padding-y:.18rem;--bs-btn-font-size:.74rem}
table.data td .jam{color:var(--abu);font-size:.72rem}
table.data .kosong{text-align:center;color:var(--abu);padding:1.6rem}
.lbl{display:inline-block;border-radius:5px;font-size:.68rem;font-weight:800;padding:.08rem .4rem;background:#e9ecea;color:#45524c;white-space:nowrap}
.lbl.h{background:#d9f4e6;color:#0a5a3c}.lbl.m{background:#fde2df;color:#8f1d16}.lbl.e{background:var(--emas-muda);color:#6b4f08}.lbl.n{background:#e6e7f5;color:var(--navy)}
.hal-nav{display:flex;align-items:center;gap:.4rem;font-size:.8rem;margin-top:.4rem;flex-wrap:wrap}
.stat{padding:.6rem .7rem;height:100%;border-top:4px solid var(--hijau)}
.stat .atas{display:flex;align-items:center;gap:.5rem}
.stat .atas i{width:34px;height:34px;border-radius:9px;background:var(--hijau-muda);color:var(--hijau);display:grid;place-items:center;font-size:1.05rem;flex:none}
.stat .atas span{font-weight:700;font-size:.8rem;line-height:1.15;color:#33433c}
.stat .angka{font-size:1.9rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;margin:.3rem 0 .1rem;color:var(--hijau-tua)}
.stat .lp{font-size:.76rem;font-weight:700;color:var(--abu);display:flex;gap:.7rem}
.stat .lp b{color:var(--tinta)}
.stat .wil{margin-top:.4rem;border-top:1px dashed var(--hijau-garis);padding-top:.3rem;font-size:.74rem}
.stat .wil summary{cursor:pointer;font-weight:700;color:var(--hijau);list-style:none}
.stat .wil summary::before{content:"\25B8  "}.stat .wil details[open] summary::before{content:"\25BE  "}
.stat .wil ul{list-style:none;margin:.15rem 0 .3rem;padding:0;max-height:150px;overflow-y:auto;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#a9c4b7 transparent;padding-right:1rem}
.stat .wil li{display:flex;justify-content:space-between;gap:.5rem;padding:.06rem 0;border-bottom:1px dotted #e0e8e4}
.stat .wil li b{font-variant-numeric:tabular-nums}
.stat .wil li.klik{cursor:pointer;border-radius:5px;transition:background .15s}
.stat .wil li.klik:hover,.stat .wil li.klik:focus-visible{background:#e7f3ec;outline:none}
.stat .wil li.klik:hover span{text-decoration:underline}
.kel-tbl{width:100%;font-size:.86rem;text-align:left;border-collapse:collapse}.kel-tbl th{background:#eef5f1;padding:.3rem .5rem;position:sticky;top:0}.kel-tbl td{padding:.28rem .5rem;border-bottom:1px solid #eef2ef}.kel-tbl td:nth-child(2),.kel-tbl td:nth-child(5),.kel-tbl td:nth-child(4),.kel-tbl th{white-space:nowrap}.kel-tbl a{font-weight:700;text-decoration:none}
.stat.s2{border-top-color:var(--emas)}.stat.s3{border-top-color:var(--navy)}.stat.s4{border-top-color:#2a7fa8}.stat.s5{border-top-color:#8a4fb0}.stat.s6{border-top-color:var(--merah)}.stat.s7{border-top-color:#1fa36a}.stat.s8{border-top-color:#c0392b}
.dt{display:grid;grid-template-columns:2.2rem minmax(0,5fr) minmax(0,6fr);gap:0;font-size:.82rem}
.dt>div{padding:.28rem .4rem;border-bottom:1px solid #e3ece7;overflow-wrap:anywhere}
.dt .n{font-weight:800;color:var(--hijau);text-align:center}
.dt .j{font-weight:700}
.dt .bg{grid-column:1/-1;background:var(--hijau);color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .5rem}
.dt img.mini{height:64px;border-radius:5px;border:1px solid var(--hijau-garis);cursor:zoom-in}
.vf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:calc(100vh - 100px);min-height:420px;border:1px solid var(--hijau-garis);border-radius:.6rem;overflow:hidden;background:#fff}
.vf .kiri{overflow:auto;border-right:4px solid var(--emas)}
.vf-hbar{flex:1 1 240px;max-width:480px;margin:0 auto;display:flex;align-items:center;gap:.55rem}
.vf-hbar .trk{flex:1;height:14px;border-radius:99px;background:#dfe8e3;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.15)}
.vf-hbar .isi{height:100%;width:var(--p,0%);border-radius:99px;background:linear-gradient(90deg,var(--emas),#f3dc9a);transition:width .35s ease,background .3s}
.vf-hbar .pct{font-weight:800;font-size:.85rem;min-width:2.9rem;text-align:center;background:var(--emas);color:#231a02;border-radius:99px;padding:.12rem .5rem;line-height:1.3}
.vf-hbar.penuh .isi{background:linear-gradient(90deg,#1fa36a,#7de0ad)}.vf-hbar.penuh .pct{background:#1fa36a;color:#fff}
.vf .kanan{display:flex;flex-direction:column;min-width:0}
.vf .kanan .pf{flex:1}
.vf-tab{display:flex;gap:3px;overflow-x:auto;background:var(--hijau-gelap);padding:6px 6px 14px;scrollbar-gutter:stable}
.vf-tab button{border:0;background:rgba(255,255,255,.12);color:#d6ebe2;font-size:.76rem;font-weight:700;padding:.55rem .75rem;min-height:2.6rem;border-radius:6px;white-space:nowrap}
.vf-tab button.aktif{background:var(--emas);color:#231a02}
.vf .brs{display:grid;grid-template-columns:2rem minmax(0,5fr) minmax(0,6fr) 3.6rem;font-size:.82rem;border-bottom:1px solid #e3ece7;align-items:center}
.vf .brs>div{padding:.3rem .4rem;overflow-wrap:anywhere}
.vf .brs.ok{background:#eef8f2}
.vf .brs .n{font-weight:800;color:var(--hijau);text-align:center}.vf .brs .j{font-weight:700}
.vf .brs .c{text-align:center}
.vf .brs .c input{width:1.3rem;height:1.3rem;accent-color:var(--hijau);cursor:pointer}
.vf .bg{background:var(--hijau);color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .5rem;position:sticky;top:0;z-index:1}
.vf .kaki-vf{position:sticky;bottom:0;background:#fff;border-top:2px solid var(--hijau-garis);padding:.5rem;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
@media(max-width:767px){.vf{grid-template-columns:1fr;grid-template-rows:55vh 60vh;height:auto}.vf .kiri{border-right:0;border-bottom:4px solid var(--emas)}.vf-hbar{order:5;flex-basis:100%;max-width:none}}
.login-latar{min-height:100vh;display:grid;place-items:center;background:var(--hijau-gelap);background-image:var(--pola),linear-gradient(135deg,var(--hijau-gelap),var(--hijau));padding:1rem}
.login-kotak{width:min(100%,370px);background:#fff;border-radius:1rem;padding:1.3rem 1.3rem 1.1rem;border-top:5px solid var(--emas);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.nav-tabs{--bs-nav-tabs-link-active-color:var(--hijau);--bs-nav-link-color:var(--abu);--bs-nav-link-hover-color:var(--hijau);--bs-nav-link-padding-y:.4rem;--bs-nav-link-padding-x:.8rem;font-weight:700;font-size:.84rem}
.set-grup{padding:.7rem .8rem;margin-bottom:.6rem}
.set-grup h2{font-size:.92rem;color:var(--hijau-tua);margin:0 0 .5rem;display:flex;gap:.4rem;align-items:center}
.set-grup label{font-weight:700;font-size:.76rem;margin-bottom:.1rem;color:#33433c}
.set-grup .form-text{font-size:.72rem;margin-top:.1rem}
.kode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;background:var(--emas-muda);border-radius:4px;padding:0 .3rem;cursor:pointer;white-space:nowrap}
.fb-bagian{margin-bottom:.5rem;overflow:hidden}
.fb-bagian>.jd{background:var(--hijau);color:#fff;padding:.3rem .6rem;display:flex;align-items:center;gap:.4rem;font-weight:800;font-size:.8rem;letter-spacing:.04em}
.fb-item{display:flex;align-items:center;gap:.5rem;padding:.28rem .6rem;border-top:1px solid #e3ece7;font-size:.82rem}
.fb-item .n{width:1.8rem;font-weight:800;color:var(--hijau);flex:none;text-align:center}
.fb-item .l{flex:1;min-width:0;font-weight:600}
.fb-item .l small{display:block;font-weight:500;color:var(--abu)}
@media print{.kepala,.kaki,.wa-layang,.adm-nav,.bilah,.fm-bawah{display:none!important}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.form-control,.form-select{background-color:#fff}
@media(max-width:575px){.menu-atas{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.menu-atas .btn{font-size:.8rem;padding:.3rem .4rem}}

/* Loading gelas pasir */
@keyframes gp-putar{0%{transform:rotate(0)}70%{transform:rotate(180deg)}100%{transform:rotate(180deg)}}
.gp-putar,.gp>i,.kosong .bi-hourglass-split{display:inline-block;animation:gp-putar 1.3s ease-in-out infinite}
.gp{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20000;display:none;align-items:center;gap:.4rem;background:rgba(10,63,49,.94);color:#f3dc9a;padding:.55rem 1.1rem;border-radius:99px;font-size:.85rem;font-weight:700;box-shadow:0 4px 18px rgba(0,0,0,.35);pointer-events:none}
.gp.on{display:flex}.gp>i{font-size:1.25rem}
.swal2-popup .gp-besar{font-size:2.2rem;color:var(--hijau)}
@media(prefers-reduced-motion:reduce){.gp-putar,.gp>i,.kosong .bi-hourglass-split{animation-duration:3s}}
.soal .ganda{display:none;margin-top:.4rem;padding:.45rem .65rem;border-radius:8px;font-size:.82rem;font-weight:600;line-height:1.35}
.soal .ganda.nik{background:#fdecec;color:#b42318;border:1px solid #f4b8b3}
.soal .ganda.nama{background:#fff4de;color:#8a5a00;border:1px solid #f1d08a}
.pf img.lama{opacity:.18;transition:opacity .2s}
.pf-muat{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;z-index:6;pointer-events:none;color:#fff}
.pf-muat.tampil{display:flex}
.pf-muat .cincin{width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--emas) var(--p,0%),rgba(255,255,255,.18) 0);display:grid;place-items:center;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.pf-muat .cincin::before{content:"";grid-area:1/1;width:72px;height:72px;border-radius:50%;background:#12392d}
.pf-muat .cincin span{grid-area:1/1;position:relative;font-weight:800;font-size:1.15rem}
.pf-muat small{font-weight:600;letter-spacing:.02em;text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* Backup & dialog keluar */
.bk-popup{border-radius:1rem!important;padding:1.4rem 1.2rem 1.2rem!important}
.bk-popup .swal2-title{font-size:1.25rem;font-weight:700}
.bk-teks{font-size:.92rem;color:#445;line-height:1.5}
.bk-sub{margin-top:.6rem;font-size:.8rem;color:#6b7a73;background:#f2f6f4;border-radius:.6rem;padding:.4rem .7rem;display:inline-block}
.bk-aksi{display:flex;flex-direction:column;gap:.5rem;width:100%;margin-top:1rem!important}
.bk-aksi button{width:100%;margin:0!important;border-radius:.65rem!important;font-weight:600;padding:.65rem 1rem!important;font-size:.92rem!important}
.bk-aksi .swal2-confirm{order:1}.bk-aksi .swal2-deny{order:2;background:#fff!important;border:1px solid #cfd8d3!important;color:#0f6b4f!important}.bk-aksi .swal2-deny.bk-merah{color:#b02a37!important;border-color:#e3b9bd!important}.bk-aksi .swal2-cancel{order:3;background:transparent!important;color:#6b7a73!important}
.bk-kotak{text-align:center;padding:.4rem .2rem}
.bk-ikon{font-size:2.6rem;color:#0f6b4f;line-height:1;animation:bk-turun 1.1s ease-in-out infinite}
.bk-kotak.selesai .bk-ikon{animation:none;color:#198754}
.bk-judul{font-weight:700;font-size:1.05rem;margin:.5rem 0 .9rem}
.bk-bar{height:16px;background:#e3ece7;border-radius:99px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
.bk-isi{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#0f6b4f,#2fb184,#0f6b4f);background-size:200% 100%;animation:bk-geser 1.2s linear infinite}
.bk-kotak.selesai .bk-isi{animation:none;background:#198754}
.bk-baris{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;font-size:.82rem;color:#5b6a63}
.bk-baris b{font-size:1.15rem;color:#0f6b4f;font-variant-numeric:tabular-nums}
@keyframes bk-geser{to{background-position:-200% 0}}
@keyframes bk-turun{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.bk-slot{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border:1px solid #dfe8e3;border-radius:.6rem;margin-bottom:.4rem;font-size:.85rem}
.bk-slot .n{width:1.7rem;height:1.7rem;border-radius:50%;background:#e3f2ea;color:#0f6b4f;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.bk-slot.baru{border-color:#2fb184;background:#f3fbf7}.bk-slot.kosong{color:#9aa7a0;background:#fafbfa}

/* Formulir: halaman berikutnya mengintip (buram) di bawah */
.fm-gulir{will-change:transform}
.fm-hal{margin-bottom:1rem}
.fm-hal.intip{filter:blur(2.5px);opacity:.42;pointer-events:none;user-select:none;transition:filter .55s ease,opacity .55s ease}
.fm-hal{transition:filter .55s ease,opacity .55s ease}
.fm-semua .soal{margin-bottom:.9rem}