/* Doa & dzikir */
.dz-wrap { padding: clamp(24px, 4vw, 48px) 0 clamp(56px, 7vw, 96px); }
.dz-warn { background: #fbf3df; color: #6b5214; border-radius: 14px; padding: 12px 16px; font-size: 14.5px; margin-bottom: 16px; }
.dz-bar input { width: 100%; max-width: 520px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; font: inherit; background: var(--paper); color: var(--ink); }
.dz-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 6px; -webkit-overflow-scrolling: touch; }
.dz-tabs button { flex: none; border: 1px solid var(--line); background: var(--paper); border-radius: 99px; padding: 8px 16px; font: 600 14px var(--f-body, inherit); color: var(--ink); }
.dz-tabs button.on { background: var(--em); border-color: var(--em); color: #fff; }
.dz-cat { margin-top: 28px; }
.dz-cat h2 { font-size: clamp(22px, 3vw, 30px); }
.dz-ket { color: var(--muted); margin: 4px 0 14px; font-size: 14.5px; }
.dz-it { border: 1px solid var(--line); border-radius: 20px; background: var(--paper); padding: clamp(16px, 2.6vw, 24px); margin-bottom: 14px; }
.dz-it h3 { font-size: 17px; margin-bottom: 12px; color: var(--em-d); }
.dz-ar { font-family: 'Amiri', serif; font-size: clamp(24px, 3.6vw, 32px); line-height: 2.1; text-align: right; color: var(--ink); margin: 0 0 8px; }
.dz-n { color: var(--gold); font-size: .8em; }
.dz-lt { font-style: italic; color: var(--em-d); font-size: 15px; line-height: 1.6; margin: 0 0 8px; }
.dz-id { font-size: 15.5px; line-height: 1.7; margin: 0 0 10px; }
.dz-src { font-size: 13.5px; color: var(--muted); margin: 0; }
.dz-src b { color: var(--em); }
.dz-kt { font-size: 13.5px; color: var(--muted); margin: 6px 0 0; }
.dz-load { color: var(--muted); font-size: 14px; }
.dz-act { margin-top: 12px; }
.dz-act button { margin-right: 8px; border: 1px solid var(--line); background: var(--paper); border-radius: 99px; padding: 6px 16px; font-weight: 600; font-size: 13.5px; color: var(--em); }
.dz-empty { padding: 30px 0; color: var(--muted); text-align: center; }

/* hafalan */
.hf-sum { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); margin: 14px 0; }
.hf-ring { --p: 0; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: conic-gradient(var(--em) calc(var(--p) * 1%), var(--em-l, #e3efe9) 0); position: relative; }
.hf-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--paper); }
.hf-ring b, .hf-ring span { position: relative; } .hf-ring b { font-size: 24px; line-height: 1; } .hf-ring span { font-size: 12px; color: var(--muted); }
.hf-sum h2 { font-size: clamp(20px, 3vw, 26px); margin: 0 0 4px; } .hf-sum p { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; }
.hf-m { color: var(--muted); font-size: 14px; line-height: 1.55; }
.hf-h { margin: 26px 0 10px; font-size: 18px; }
.hf-list { display: grid; gap: 6px; } .hf-r { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); font-size: 14.5px; }
.hf-r em { font-style: normal; color: var(--muted); white-space: nowrap; } .hf-r.hafal em { color: var(--em); font-weight: 700; } .hf-r.belajar em { color: #8a6a14; font-weight: 600; }
.hf-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: var(--muted); font-size: 14px; }
.hf-card small { color: var(--muted); display: block; margin-bottom: 6px; } .hf-card h3 { font-size: clamp(20px, 3vw, 26px); }
.hf-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; } .hf-btns .btn { justify-content: center; }
.hf-top .text-btn, #hf-reset { background: none; border: 0; padding: 0; cursor: pointer; font: 600 14px inherit; color: var(--em); } #hf-reset { color: #9b2c22; font-weight: 500; }
/* zakat */
.zk-box { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); margin-top: 14px; max-width: 640px; }
.zk-d { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0; }
.zk-f { display: grid; gap: 5px; } .zk-f span { font-weight: 600; font-size: 14px; } .zk-f small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.zk-f input { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: var(--bg, #fff); color: var(--ink); width: 100%; }
#zk-out { max-width: 640px; margin-top: 14px; }
.zk-r { padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--paper); } .zk-r.ok { background: var(--em-l, #e3efe9); border-color: transparent; }
.zk-r small { display: block; color: var(--muted); font-weight: 600; } .zk-r b { display: block; font-size: clamp(28px, 6vw, 40px); color: var(--em-d, #064d3b); margin: 4px 0; } .zk-r p { margin: 0; font-size: 14px; color: var(--muted); }
.zk-n { max-width: 640px; color: var(--muted); font-size: 13px; line-height: 1.55; margin-top: 18px; }

.ct-bar { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; } .ct-t { white-space: pre-wrap; line-height: 1.65; margin: 8px 0 12px; } .ct-i h3 a { color: inherit; }
.ct-ta { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: var(--bg, #fff); color: var(--ink); margin: 8px 0; }

/* dampak */
.dm-g { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.dm-c { padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); } .dm-c b { display: block; font-size: clamp(30px, 5vw, 44px); color: var(--em-d, #064d3b); letter-spacing: -.02em; line-height: 1.1; }
.dm-c span { display: block; font-weight: 600; margin-top: 6px; } .dm-c small { display: block; color: var(--muted); margin-top: 2px; font-size: 13.5px; }
.dm-h { margin: 38px 0 14px; font-size: clamp(22px, 3vw, 30px); } .dm-n { margin-top: 14px; color: var(--muted); }

/* cetak jadwal */
.ck-ctl { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 8px; } .ck-ctl label { display: grid; gap: 4px; font-weight: 600; font-size: 13.5px; }
.ck-ctl select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: var(--paper); color: var(--ink); max-width: 100%; }
.ck-paper { background: #fff; color: #0b1f19; border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-top: 12px; overflow-x: auto; }
.ck-paper > * { min-width: 760px; }
.ck-head { display: flex; align-items: center; gap: 16px; border-bottom: 2px solid #0b6b54; padding-bottom: 10px; margin-bottom: 10px; } .ck-head h2 { margin: 0; font-size: 22px; } .ck-head p { margin: 2px 0 0; color: #4a5a54; font-size: 13px; }
.ck-w, .ck-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .ck-w div { background: #0b6b54; color: #fff; text-align: center; font-weight: 700; font-size: 12px; padding: 5px 0; }
.ck-c { min-height: 92px; border: 1px solid #cfd8d3; padding: 3px 4px; font-size: 10.5px; line-height: 1.25; } .ck-c.off { background: #f3f5f4; } .ck-c > i { font-style: normal; font-weight: 700; font-size: 12px; color: #0b6b54; display: block; }
.ck-e { margin-top: 3px; padding: 2px 3px; border-radius: 4px; background: #e8f3ee; } .ck-e b { color: #0b6b54; } .ck-e small { display: block; color: #4a5a54; } .ck-e.lb { background: #fdeceb; } .ck-e.lb small { color: #a8231a; font-weight: 700; }
.ck-f { margin: 8px 0 0; font-size: 10.5px; color: #4a5a54; text-align: center; }
@media print {
  .nav, .drawer, .nav-dim, .page-hero, .cta, footer, .skip, .noprint, .mobbar, .appbar, #pwa-bar { display: none !important; }
  html, body { background: #fff !important; } body * { visibility: visible; }
  .section, .container { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .ck-paper { border: 0; border-radius: 0; padding: 0; margin: 0; overflow: visible; } .ck-paper > * { min-width: 0; }
  .ck-c { min-height: 24mm; } .ck-paper.a3 .ck-c { min-height: 36mm; font-size: 13px; } .ck-paper.a3 .ck-head h2 { font-size: 30px; } .ck-paper.a3 .ck-c > i { font-size: 16px; } .ck-paper.a3 .ck-w div { font-size: 15px; padding: 8px 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}