/* Font dihos sendiri (tiada permintaan luar) */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/PlusJakartaSans-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/Amiri-400-arabic.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/Amiri-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --paper:#FBF9F4; --card:#FFFFFF; --ink:#1F2A24; --ink-2:#4A5A51; --muted:#5F6B64;
  --line:#E6E1D6; --green:#0F6B4F; --green-soft:#E8F1EC; --gold:#B98A21; --gold-soft:#FBF3DF;
  --slate:#5B6B77; --slate-soft:#EDF1F3; --shadow:0 1px 2px rgba(23,38,30,.05),0 8px 24px rgba(23,38,30,.06);
  --r:16px;
}
*{box-sizing:border-box}
html,body{font-display:swap;margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font:16px/1.65 'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-text-size-adjust:100%; overflow-x:hidden;
}
.wrap{width:100%;max-width:760px;margin:0 auto;padding:0 16px}
h1,h2,h3,h4{margin:0;line-height:1.3;font-weight:700}
.small{font-size:14px} .muted{color:var(--muted)}
a{color:var(--green)}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(251,249,244,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:var(--green);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;letter-spacing:-.4px}
.brand-txt{display:flex;flex-direction:column;min-width:0}
.brand-txt strong{font-size:15.5px;font-weight:800;letter-spacing:-.2px;white-space:nowrap}
.brand-txt small{font-size:12px;color:var(--muted)}
.progress{text-align:right;font-size:12.5px;color:var(--ink-2);font-weight:700;white-space:nowrap}
@media (max-width:420px){.brand-txt small{display:none}}
.pg-bar{margin-top:5px;width:86px;height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.pg-bar i{display:block;height:100%;width:7.7%;background:var(--green);border-radius:99px;transition:width .25s ease}

/* ---------- notice ---------- */
.notice{margin:14px auto 0;background:var(--gold-soft);border:1px solid #EAD9AE;border-left:4px solid var(--gold);
  border-radius:12px;padding:11px 14px;font-size:14px;color:#5D4A16}
.notice strong{color:#4A3A0E}

/* ---------- timeline ---------- */
.tl{min-height:72px;display:flex;gap:8px;overflow-x:auto;padding:14px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.tl::-webkit-scrollbar{height:0}
.tl button{
  flex:0 0 auto;min-width:44px;min-height:44px;padding:0 12px;border-radius:99px;border:1px solid var(--line);
  background:#fff;color:var(--ink-2);font:600 14px/1 'Plus Jakarta Sans',sans-serif;cursor:pointer;scroll-snap-align:center;
  transition:.15s;
}
.tl button[aria-current="true"]{background:var(--green);border-color:var(--green);color:#fff}
.tl button:hover{border-color:var(--green);color:var(--green)}

/* ---------- cards ---------- */
main{padding-bottom:8px}
.card{min-height:220px}
.peta-card,.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin:14px 0}
.peta-card img{width:100%;height:auto;aspect-ratio:1200/780;border-radius:10px;display:block;border:1px solid var(--line)}
.sec-lbl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.sec-lbl::after{content:"";flex:1;height:1px;background:var(--line)}

.step-head{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.step-no{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.step-head h2{font-size:22px;margin:8px 0 10px;letter-spacing:-.4px;line-height:1.3;font-weight:700}
.meta{display:flex;flex-wrap:wrap;gap:8px}
.meta span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);background:#F6F4EE;border:1px solid var(--line);
  border-radius:99px;padding:6px 11px;min-height:32px}
.meta i{font-style:normal;opacity:.75}

.pills{display:flex;flex-wrap:wrap;gap:7px;margin:0}
.pill{font-size:12.5px;font-weight:700;border-radius:99px;padding:6px 11px;border:1px solid transparent;display:inline-flex;gap:6px;align-items:center}
.pill small{font-weight:600;opacity:.85}
.pill.rukun{background:var(--green-soft);color:#0B523C;border-color:#C9E1D5}
.pill.wajib{background:var(--gold-soft);color:#6B5210;border-color:#EAD9AE}
.pill.sunat{background:var(--slate-soft);color:#3F4E59;border-color:#D7DEE3}

.blk{margin:16px 0 0}
.blk h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:9px}
ul.check,ul.plain{margin:0;padding:0;list-style:none}
ul.check li{position:relative;padding:0 0 0 26px;margin-bottom:9px}
ul.check li::before{content:"";position:absolute;left:2px;top:9px;width:9px;height:9px;border-radius:3px;background:var(--green);opacity:.25;
  border:1.5px solid var(--green)}
ul.warn li{position:relative;padding:0 0 0 26px;margin-bottom:9px}
ul.warn li::before{content:"!";position:absolute;left:3px;top:0;color:#B4553C;font-weight:800}
ul.plain li{padding:7px 0;border-bottom:1px dashed var(--line);color:var(--ink-2)}
ul.plain li:last-child{border-bottom:0}

.doa{background:#FCFBF7;border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:4px}
.doa .arab{font-family:'Amiri',serif;font-size:24px;line-height:2;direction:rtl;text-align:right;margin:0 0 12px;color:#16332A}
.doa dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800}
.doa dd{margin:4px 0 12px}
.doa dd:last-child{margin-bottom:0}
.nil{color:var(--muted);font-style:italic}

.kv{display:grid;gap:8px;background:#F6F4EE;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.kv b{font-weight:700}
.quote{font-size:14px;color:var(--ink-2);border-left:3px solid var(--line);padding-left:10px;margin:8px 0 0}
.quote em{font-style:normal;color:var(--muted);display:block;font-size:12.5px;margin-top:4px}

/* ---------- folds ---------- */
.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary h2{font-size:16px}
.fold>summary::after{content:"+";font-size:22px;color:var(--green);font-weight:700;line-height:1}
.fold[open]>summary::after{content:"–"}
.fold .body{padding-top:12px;border-top:1px solid var(--line);margin-top:6px}
table.lar{width:100%;border-collapse:collapse;font-size:14.5px}
table.lar td{padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:top}
table.lar td:first-child{width:34px;color:var(--muted);font-weight:700}
table.lar .lp{font-size:12.5px;color:var(--muted);display:block;margin-top:4px}
ol.src{margin:0;padding-left:20px;font-size:14.5px}
ol.src li{margin-bottom:12px}
ol.src .u{word-break:break-all;font-size:12.5px;color:var(--muted)}
ol.nota{margin:0;padding-left:20px;font-size:14.5px;color:var(--ink-2)}
ol.nota li{margin-bottom:10px}

.cit{margin-top:10px;border-top:1px dashed var(--line);padding-top:9px}
.cit p{margin:0 0 5px;font-size:14px}
.cit .pg{font-size:12.5px;color:var(--muted)}
.cit .url{font-size:11.5px;color:var(--muted);word-break:break-all;display:block}

/* ---------- nav buttons ---------- */
.nav{display:flex;gap:10px;margin:16px 0 6px}
.btn{flex:1;min-height:52px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);
  font:700 16px/1 'Plus Jakarta Sans',sans-serif;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--green);color:var(--green)}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.primary:hover{background:#0C5A42;color:#fff}
.btn[disabled]{opacity:.4;cursor:not-allowed}

.foot{padding:8px 16px 40px}

/* ---------- print: semua 13 langkah ---------- */
@media print{
  .topbar,.tl,.nav,.notice,.peta-card .muted{display:none!important}
  body{background:#fff}
  .card,.peta-card{box-shadow:none;border:1px solid #ddd;break-inside:avoid;page-break-inside:avoid}
  .fold>summary::after{content:""}
  .fold .body{display:block!important}
  #card{padding:0;border:0}
  .pc{display:block!important}
}

/* ---------- desktop ---------- */
@media (min-width:1024px){
  .wrap{max-width:1080px}
  main{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:20px;align-items:start}
  .peta-card{grid-column:1;grid-row:1;margin-top:14px}
  #card{grid-column:2;grid-row:1}
  .nav{grid-column:2;grid-row:2}
  #larangan,#sumber,#nota{grid-column:1/-1}
}

/* teks tersembunyi visual (struktur heading + a11y) */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}