/* ===== Web Fonts ===== */
@font-face {
    font-family: 'IndoPak';
    src: url('/assets/fonts/indo_font.ttf') format('truetype');
    font-display: swap;
}
/* (Amiri & Scheherazade New di-load dari Google Fonts di header.php) */

/* ===== Namespace & variables ===== */
body {
  --bg:#f7faf9; --card:#fff; --text:#0f172a; --muted:#64748b;
  --brand:#0ea5a6; --brand2:#14b8a6; --bar:#0ea5a6; --barbg:#e6f7f6;
  --ring:rgba(20,184,166,.25); --radius:16px; --shadow:0 8px 28px rgba(2,44,34,.08);
  --pt-arab:24; --pt-lt:20;
  --fs-arab: calc(var(--pt-arab) * 1px); --lh-arab: 2.1em;
  --fs-latin: calc(var(--pt-lt) * 1px);   --lh-latin: 1.35em;
  --fs-trans: calc(max(14, var(--pt-lt) - 2) * 1px); --lh-trans: 1.35em;
  background: var(--bg); color: var(--text);
  font-family:ui-sans-serif,system-ui,"Inter","Segoe UI",Roboto,Arial,sans-serif;
  margin: 0; padding: 0;
  overflow-x: hidden; width: 100%;
}
body.dark { --bg:#0b1413; --card:#0f1a19; --text:#e7f3f1; --muted:#9fb3ad; --brand:#2dd4bf; --brand2:#34d399; --bar:#2dd4bf; --barbg:#08211d; --shadow:0 8px 28px rgba(0,0,0,.4); }

*, *::before, *::after { box-sizing: border-box; }
.dzp {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  overflow:visible; padding:15px; border-radius:0px;
}

/* Topbar sticky */
.dzp-topbar{
  position:sticky; top:0; z-index:9998;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px; background:rgba(255,255,255,.8); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); box-shadow:var(--shadow);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s ease;
}
body.dark .dzp-topbar{ background:rgba(15,26,25,.8) }
.dzp-top-title{ margin:0; font-size:1.18rem; text-align:center; flex:1 }
.dzp-iconbtn{ background:var(--card); border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:8px 10px; line-height:1; cursor:pointer; color:inherit }
.dzp-iconbtn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px }

/* Subhead & classic progress */
.dzp-subhead{ margin:10px 4px 6px }
.dzp-desc{ margin:0; color:var(--muted); font-size:.92rem }
.dzp-total{ margin:10px 4px 10px; background:var(--card); border-radius:var(--radius); padding:12px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06) }
.dzp-total-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px }
.dzp-progress{ width:100%; height:10px; background:var(--barbg); border-radius:999px; overflow:hidden }
.dzp-progress-bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--bar),var(--brand2)); border-radius:999px; transition:width .3s ease }

/* List – scroll only */
.dzp-list-wrap{ margin-top:8px }
.dzp-list{ display:grid; gap:12px }
.dzp-card{ background:var(--card); border:1px solid rgba(0,0,0,.06); border-radius:20px; box-shadow:var(--shadow); position:relative; overflow:hidden; user-select:none; -webkit-user-select:none; }
.dzp-card-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; background:linear-gradient(180deg, rgba(14,165,166,.08), transparent) }
.dzp-tag{ font-size:.8rem; padding:6px 10px; border-radius:999px; background:var(--barbg); color:var(--brand) }
.dzp-count{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--brand) }

/* Teks bacaan */
.dzp-card-body{ padding-bottom:10px; touch-action: pan-y; }
.dzp-arab{ font-family: 'IndoPak', 'Amiri', 'Scheherazade New', serif; direction:rtl; text-align:right; font-size:var(--fs-arab); line-height:var(--lh-arab); padding:14px; border-top:1px dashed rgba(0,0,0,.06); border-bottom:1px dashed rgba(0,0,0,.06) }
.dzp-meta{ padding:12px 14px; display:grid; gap:8px }
.dzp-latin{ font-size:var(--fs-latin); line-height:var(--lh-latin); color:var(--text); opacity:.95 }
.dzp-trans{ font-size:var(--fs-trans); line-height:var(--lh-trans); color:var(--muted) }

/* Kaki kartu + mini progress (gaya lama) */
.dzp-card-foot{ display:flex; align-items:center; gap:10px; padding:0px 0px }
.dzp-mini-progress{ flex:1; height:5px; background:var(--barbg); border-radius:999px; overflow:hidden }
.dzp-mini-bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--bar),var(--brand2)); transition:width .25s ease }

/* CTA Donasi */
.dzp-cta{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; text-align:center; padding:20px }
.dzp-cta h3{ margin:6px 0 }
.dzp-cta p{ margin:0; color:var(--muted) }
.dzp-btn{ background:var(--card); border:1px solid rgba(0,0,0,.08); padding:10px 12px; border-radius:12px; cursor:pointer; color:inherit; box-shadow:var(--shadow) }
.dzp-btn.dzp-full{ width:100% }

/* Bottom Sheet – tampil mobile style juga di desktop (max-width) */
.dzp-sheet[hidden]{ display:none }
.dzp-sheet{ position:fixed; inset:0; z-index:999999; display: flex; justify-content: center; }
.dzp-sheet-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .25s ease }
.dzp-sheet.open .dzp-sheet-backdrop{ opacity:1 }
.dzp-sheet-panel{
  position:absolute; bottom:0; width:100%; max-width:650px;
  transform:translateY(100%);
  background:var(--card); color:var(--text); border-top-left-radius:24px; border-top-right-radius:24px;
  box-shadow:0 -12px 40px rgba(0,0,0,.4); transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.dzp-sheet.open .dzp-sheet-panel{ transform:translateY(0%) }
.dzp-sheet-handle{ width:48px; height:5px; background:rgba(0,0,0,.18); border-radius:999px; margin:8px auto }
.dzp-sheet-head{ display:flex; align-items:center; justify-content:center; padding:12px 20px 8px }
.dzp-sheet-body{ padding:8px 24px max(30px, env(safe-area-inset-bottom)); display:grid; gap:18px }
.dzp-row2{ display:grid; grid-template-columns:1fr; gap:16px }
.dzp-sheet-foot{ padding:10px 14px }

/* Switch umum */
.dzp-switch{ position:relative; width:44px; height:26px; display:inline-block }
.dzp-switch input{ position:absolute; inset:0; opacity:0 }
.dzp-slider{ position:absolute; inset:0; background:#cbd5e1; border-radius:999px; transition:background .2s }
.dzp-slider::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s }
.dzp-switch input:checked + .dzp-slider{ background:var(--brand) }
.dzp-switch input:checked + .dzp-slider::after{ transform:translateX(18px) }

/* Theme checkbox slider (☀️/🌙) */
.dzp-theme-switch{ position:relative; width:64px; height:32px; display:inline-block }
.dzp-theme-switch input{ position:absolute; inset:0; opacity:0 }
.dzp-theme-track{ position:absolute; inset:0; background:#e2e8f0; border-radius:999px; overflow:hidden }
.dzp-theme-thumb{
  position:absolute; top:3px; left:3px; width:26px; height:26px; background:#fff; border-radius:50%;
  box-shadow:0 2px 8px rgba(0,0,0,.18); transition:transform .22s ease
}
.dzp-theme-icon{ position:absolute; top:50%; transform:translateY(-50%); font-size:14px; opacity:.85; pointer-events:none }
.dzp-sun{ left:10px } .dzp-moon{ right:10px }
.dzp-theme-switch input:checked + .dzp-theme-track .dzp-theme-thumb{ transform:translateX(32px) }
.dzp-theme-switch input:checked + .dzp-theme-track{ background:#0ea5a6 }

.dzp-flex{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

.dzp-sizebar{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; margin-top:6px }
.dzp-range{ width:100%; accent-color:var(--brand) }
.dzp-stepbtn{ background:var(--card); border:1px solid rgba(0,0,0,.12); border-radius:10px; padding:8px 12px; cursor:pointer }
.dzp-sizeval{ min-width:56px; text-align:right; font-variant-numeric:tabular-nums; color:var(--muted) }

.font-arab{ font-family: 'IndoPak', 'Amiri', 'Scheherazade New', serif; }

@media(min-width:560px){
  .dzp{ padding:18px }
  .dzp-top-title{ font-size:1.26rem }
}

/* ==== ISOLASI DARI ELEMENTOR (khusus dalam .dzp) ==== */
.dzp { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.dzp :where(a, button){ text-decoration: none !important; background: none; border: none; box-shadow: none; }
.dzp :where(a, button, [role="button"], [tabindex], input, select, textarea):focus { outline: none !important; box-shadow: none !important; }
.dzp :where(a, button, [role="button"], [tabindex], input, select, textarea):focus-visible{ outline: 2px solid var(--ring) !important; outline-offset: 2px !important; box-shadow: none !important; }

.dzp .dzp-iconbtn,
.dzp .dzp-stepbtn{ background: var(--card) !important; border: 1px solid rgba(0,0,0,.08) !important; box-shadow: var(--shadow) !important; border-radius: 12px !important; }
.dzp .dzp-range, .dzp .dzp-select, .dzp .dzp-num{ box-shadow: none !important; outline: none !important; }
.dzp :where(h1,h2,h3,h4,h5,h6,p,ul,ol){ margin-block: revert; }
.dzp :where(ul,ol){ padding-inline-start: 1.2rem; }

/* ==== Tombol kembali modern ==== */
.dzp-backbtn-modern{
  display:flex; align-items:center; gap:6px; background:rgba(14,165,166,0.1); color:var(--brand);
  border:none; border-radius:40px; padding:8px 14px; font-size:.95rem; font-weight:500;
  cursor:pointer; backdrop-filter:blur(8px); box-shadow:0 4px 10px rgba(14,165,166,.15); transition:all .25s ease;
}
.dzp-backbtn-modern:hover{ background:var(--brand); color:#fff; box-shadow:0 6px 14px rgba(14,165,166,.25); transform:translateY(-1px); }
.dzp-backbtn-modern:focus-visible{ outline:2px solid var(--ring); outline-offset:3px; }
.dzp-backicon{ width:22px; height:22px; }
.dzp-backtext{ font-size:.92rem; user-select:none; }

@keyframes spinClick {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(0.8) rotate(-45deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.settings-btn svg { transition: transform 0.2s ease; }
.settings-btn:active svg { animation: spinClick 0.3s ease; }

/* ==== SEO Summary ==== */
.dzp-seo-article {
  background: var(--card);
  padding: 25px;
  border-radius: var(--radius);
  margin: 30px 10px 10px;
  box-shadow: var(--shadow);
  color: var(--text);
  border: 1px solid rgba(0,0,0,0.04);
}
body.dark .dzp-seo-article { border: 1px solid rgba(255,255,255,0.05); }
.dzp-seo-article h2 {
  color: var(--brand);
  font-size: 1.35rem;
  margin-top: 0;
  margin-bottom: 15px;
  font-weight: 700;
}
.dzp-seo-article h3 {
  color: var(--brand);
  font-size: 1.15rem;
  margin-top: 22px;
  margin-bottom: 12px;
  font-weight: 600;
}
.dzp-seo-article p {
  line-height: 1.65;
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 16px;
}
.dzp-seo-article ul {
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 16px;
}
.dzp-seo-article li {
  margin-bottom: 8px;
  line-height: 1.5;
}

/* ==== Donasi Modern Mini Card ==== */
.dzp .dzp-cta {
  background: linear-gradient(180deg, var(--barbg), rgba(141,240,245,0.27)); border-radius: 14px; padding: 16px 14px;
  box-shadow: 0 4px 12px rgba(14,165,166,.1); text-align: center; color: var(--text); margin: 8px 10px; transition: all .3s ease;
}
.dzp .dzp-cta:hover { background: linear-gradient(180deg, var(--card), var(--barbg)); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(14,165,166,.18); }
.dzp .dzp-cta h3 { margin: 4px 0 6px; font-size: 1.05rem; font-weight: 600; color: var(--brand); }
.dzp .dzp-cta p { font-size: .88rem; color: var(--muted); line-height: 1.5; margin: 0 0 10px; }
.dzp .dzp-cta .dzp-btn { font-size: .85rem; font-weight: 600; padding: 8px 14px; border-radius: 10px; background: var(--brand); color: #fff; border: none; box-shadow: 0 4px 10px rgba(14,165,166,.25); transition: all .25s ease; }

/* ==== Mini Install Promo ==== */
.dzp-bubble{
  position:fixed; width:50px; height:50px; background:var(--card); border-radius:50%; box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.08); display:flex; justify-content:center; align-items:center; z-index:99998; cursor:pointer; transition:transform .25s ease;
}
.dzp-bubble img{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.dzp-bubble-tip{
  position:absolute; left:56px; top:50%; transform:translateY(-50%) scale(0.8); opacity:0;
  background:var(--card); padding:7px 12px; border-radius:10px; font-size:.82rem;
  white-space:nowrap; color:var(--text); border:1px solid rgba(0,0,0,.08); box-shadow:var(--shadow); transition:opacity .3s ease, transform .3s ease;
}
.dzp-bubble-tip.show{ opacity:1; transform:translateY(-50%) scale(1); }
.slideUpStart{ bottom:-80px; left:20px; }
.slideUpShow{ bottom:20px; left:20px; transition:bottom .35s ease; }

/* Thin Topbar Progress */
.dzp-topbar-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--brand), var(--brand2)); width: 0%; transition: width 0.3s ease; border-radius: 0 2px 2px 0; z-index: 99999; }

/* Floating Share */
.dzp-floating-share {
  position: fixed; bottom: -80px; right: 20px;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--card); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); border: 1px solid rgba(0,0,0,.08);
  opacity: 0; pointer-events: none;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 99999; cursor: pointer;
}
.dzp-floating-share svg { width: 20px; height: 20px; }
.dzp-floating-share.visible { opacity: 1; pointer-events: auto; bottom: 20px; }
.dzp-floating-share:active { transform: scale(0.9); }

@media(max-width:480px){ 
  .dzp { padding-top: 0; }
  .dzp-topbar { border-radius: 0; border-left: none; border-right: none; border-top: none; margin-left: -15px; margin-right: -15px; }
  
  .slideUpStart{ left:15px; }
  .slideUpShow{ left:15px; right:auto; bottom:20px; } 
  .dzp-bubble{ width:45px; height:45px; }
  .dzp-bubble img{ width:32px; height:32px; }
  .dzp-bubble-tip{ left:52px; font-size:.75rem; padding:6px 10px; }
  
  .dzp-floating-share { right: 15px; width: 45px; height: 45px; }
  .dzp-floating-share.visible { bottom: 20px; right: 15px; }
}

/* ==== Faedah Accordion ==== */
.dzp-faedah-wrapper {
  margin-top: 15px;
  border-top: 1px dashed rgba(128,128,128,0.2);
  padding-top: 10px;
}
.dzp-faedah-btn {
  background: transparent;
  border: none;
  color: var(--brand);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 5px 10px;
  margin: 0 auto;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.dzp-faedah-btn:hover { background: rgba(109, 162, 255, 0.1); }
.dzp-faedah-content {
  margin-top: 12px;
  background: var(--barbg);
  padding: 15px;
  border-radius: 10px;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
  text-align: left;
  display: none;
  animation: faedahSlideDown 0.3s ease forwards;
  border: 1px solid rgba(128,128,128,0.1);
}
.dzp-faedah-content.show {
  display: block;
}
.dzp-faedah-text strong, .dzp-faedah-sumber strong {
  color: var(--text);
}
.dzp-faedah-text { margin: 0 0 10px 0; }
.dzp-faedah-sumber { margin: 0; font-style: italic; color: var(--brand); font-weight: 500; }

@keyframes faedahSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}