/* ============================================================
   promo-zakat.css — gaya POPUP PROMO landing page (Lazismu Madina)
   ============================================================ */
.pz-tirai{
  position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(28,16,6,.62);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .24s ease;
}
.pz-tirai.buka{opacity:1}
.pz-kotak{
  position:relative;width:100%;max-width:404px;max-height:calc(100vh - 32px);overflow:auto;
  background:#fff;border-radius:24px;box-shadow:0 26px 70px rgba(40,20,4,.42);
  transform:translateY(16px) scale(.97);transition:transform .28s cubic-bezier(.2,.9,.3,1.1);
  -webkit-overflow-scrolling:touch;
}
.pz-tirai.buka .pz-kotak{transform:none}
.pz-tutup{
  position:absolute;top:11px;right:11px;z-index:2;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(20,12,4,.55);color:#fff;display:grid;place-items:center;cursor:pointer;
  backdrop-filter:blur(2px);
}
.pz-tutup svg{width:17px;height:17px}
.pz-tutup:hover{background:rgba(20,12,4,.75)}
.pz-gambar{display:block;line-height:0}
.pz-gambar img{display:block;width:100%;height:auto;border-radius:24px 24px 0 0}
.pz-isi{padding:17px 20px 20px;text-align:center}
.pz-isi h3{
  margin:0 0 7px;font-size:19px;line-height:1.25;font-weight:800;letter-spacing:-.2px;color:#2A1A0C;
}
.pz-isi p{margin:0 0 15px;font-size:13.6px;line-height:1.6;color:#6B5A4A}
.pz-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:15px 20px;border-radius:15px;text-decoration:none;cursor:pointer;
  background:linear-gradient(135deg,#F2760D,#DC5F09);color:#fff;
  font-size:16px;font-weight:800;letter-spacing:.1px;
  box-shadow:0 12px 26px rgba(220,95,9,.34);
}
.pz-btn svg{width:18px;height:18px;flex:0 0 auto}
.pz-btn:hover{box-shadow:0 16px 34px rgba(220,95,9,.44);transform:translateY(-1px)}
.pz-nanti{
  margin-top:11px;width:100%;padding:9px;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:#8A7767;
}
.pz-nanti:hover{color:#DC5F09}
@media (max-width:420px){
  .pz-tirai{padding:10px}
  .pz-kotak{max-width:100%}
  .pz-isi h3{font-size:17.5px}
  .pz-isi p{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .pz-tirai,.pz-kotak{transition:none}
}

/* ── kartu pengarah ke halaman Zakat Profesi (bagian "Jenis Donasi") ── */
.zpb{
  display:flex;gap:16px;align-items:center;margin:0 0 22px;padding:14px;
  background:#fff;border:1px solid var(--line,#F0E1D2);border-radius:var(--r-xl,22px);
  box-shadow:var(--sh-1,0 6px 18px rgba(70,40,10,.07));text-decoration:none;
}
.zpb img{width:98px;height:98px;border-radius:16px;object-fit:cover;flex:0 0 auto}
.zpb-isi{display:block;flex:1;min-width:0}
.zpb-isi b{display:block;font-size:16.5px;color:#2A1A0C;letter-spacing:-.2px}
.zpb-isi span{display:block;margin-top:4px;font-size:13.5px;line-height:1.55;color:#6B5A4A}
.zpb-btn{
  flex:0 0 auto;white-space:nowrap;padding:13px 19px;border-radius:13px;
  background:linear-gradient(135deg,#F2760D,#DC5F09);color:#fff;
  font-size:14px;font-weight:800;box-shadow:0 10px 22px rgba(220,95,9,.3);
}
.zpb:hover .zpb-btn{box-shadow:0 14px 30px rgba(220,95,9,.42)}
@media (max-width:760px){
  .zpb{flex-wrap:wrap;gap:12px}
  .zpb img{width:66px;height:66px;border-radius:14px}
  .zpb-btn{width:100%;text-align:center}
}