.poster a { color:inherit !important; text-decoration:none !important; pointer-events:none; }
.poster {
  width:620px; background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,0.28);
  overflow:hidden;
  display:flex; flex-direction:column;
}

/* PHOTO */
.photo { position:relative; height:340px; overflow:hidden; }
.photo img { width:100%; height:100%; object-fit:cover; object-position:center 35%; display:block; }
.photo .fade {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(160,200,230,0.2) 0%, transparent 45%, rgba(255,255,255,0.75) 78%, #fff 100%);
}
.photo .g1 { position:absolute; border-radius:50%; width:260px; height:260px; top:-55px; right:-45px; background:radial-gradient(circle,rgba(255,255,255,0.55) 0%,transparent 70%); filter:blur(44px); }
.photo .g2 { position:absolute; border-radius:50%; width:180px; height:180px; top:10px; left:-25px; background:radial-gradient(circle,rgba(180,220,255,0.38) 0%,transparent 70%); filter:blur(38px); }
.badge { position:absolute; bottom:56px; left:28px; z-index:5; background:#e8621a; color:#fff; font-size:19px; font-weight:900; padding:5px 18px; letter-spacing:1px; transform:skewX(-5deg); box-shadow:3px 3px 0 rgba(0,0,0,0.18); }
.logo { position:absolute; top:14px; right:14px; z-index:5; background:rgba(255,255,255,0.9); border-radius:10px; padding:8px 12px; text-align:center; box-shadow:0 2px 10px rgba(0,0,0,0.12); }
.logo .ico { font-size:22px; }
.logo .txt { font-size:8px; font-weight:900; color:#1a5c3a; letter-spacing:1px; text-transform:uppercase; line-height:1.3; }

/* wave foto ke putih */
.wave-in { position:relative; z-index:4; margin-top:-48px; line-height:0; }
.wave-in svg { display:block; width:100%; }

/* KONTEN */
.main { background:#fff; padding:4px 32px 0; }
.row { display:flex; gap:20px; align-items:flex-start; }
.left { flex:1; }
.sub { font-size:13px; font-weight:700; color:#666; margin-bottom:2px; }
.title { font-size:33px; font-weight:900; line-height:1.1; color:#0c3526; margin-bottom:10px; }
.title .g { color:#1a7a46; }
.alamat { font-size:11px; color:#888; font-weight:600; line-height:1.5; margin-bottom:10px; max-width:300px; }
.hadith { border-left:3px solid #e8621a; padding:5px 0 5px 11px; margin-bottom:11px; max-width:318px; }
.hadith p { font-size:11.5px; font-style:italic; color:#444; line-height:1.65; }
.hadith .src { font-size:10px; color:#999; font-weight:700; font-style:normal; margin-top:3px; }
.desc { font-size:12px; color:#555; line-height:1.7; max-width:318px; margin-bottom:13px; }
.desc strong { color:#0c3526; font-weight:800; }
.rek-btn { display:inline-block; background:#0c3526; color:#fff; font-size:10.5px; font-weight:800; padding:7px 14px; }

/* QR */
.qr-card { flex-shrink:0; width:165px; border:1px solid #ddd; box-shadow:0 4px 14px rgba(0,0,0,0.09); padding:10px 10px 8px; background:#fff; position:relative; }
.qr-card::before { content:''; position:absolute; top:0;left:0;right:0; height:4px; background:linear-gradient(90deg,#e8621a,#f5a830); }
.ql { font-size:7.5px; font-weight:800; color:#333; letter-spacing:1px; text-transform:uppercase; margin-bottom:3px; }
.qn { font-size:9px; font-weight:900; color:#0c3526; text-transform:uppercase; letter-spacing:.5px; line-height:1.3; margin-bottom:5px; }
.qa { display:flex; justify-content:center; background:#f8f8f8; padding:5px 0; margin-bottom:5px; }
.qg { display:grid; grid-template-columns:repeat(11,1fr); gap:1.5px; width:116px; height:116px; }
.qb { background:#111; border-radius:.5px; } .qw { background:#fff; }
.qs { font-size:7.5px; text-align:center; color:#888; font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-bottom:4px; }
.bsi-logo-img { width:116px; object-fit:contain; border-radius:4px; }
.rek-num { font-size:18px; font-weight:900; color:#0c3526; letter-spacing:1px; text-align:center; margin-bottom:3px; }
.rek-an { font-size:7px; text-align:center; color:#777; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }

/* note */
.note { background:#fff8ef; border-top:1.5px solid #f5c07a; padding:7px 32px; font-size:10.5px; color:#7a4f00; font-weight:700; text-align:center; margin-top:14px; }
.note .hl { color:#e8621a; font-weight:900; }

/* strip */
.strip { background:#0c3526; color:rgba(255,255,255,0.88); font-size:10px; font-style:italic; font-weight:600; text-align:center; padding:9px 32px; letter-spacing:.3px; line-height:1.6; }

/* wrapper */
.wrapper { display:flex; flex-direction:column; align-items:center; }

/* download button */

/* rekening */
.rek { background:#f4f4f4; border-top:1px solid #e5e5e5; padding:13px 32px; display:flex; align-items:center; gap:13px; }
.bsi { background:#1a5c3a; color:#fff; font-size:14px; font-weight:900; letter-spacing:2px; padding:5px 13px; flex-shrink:0; }
.rn { font-size:23px; font-weight:900; color:#0c3526; letter-spacing:.5px; line-height:1; }
.ra { font-size:10px; color:#999; font-weight:600; margin-top:2px; }

/* ════════════════════════════════
   FOOTER - CSS only, no SVG wave
   Referensi Al-Azhar:
   - Baris rekening: latar putih/abu
   - Transisi: ada bentuk biru tua di kiri (seperti tab/ribbon melengkung)
     dan background orange
   - Baris footer: orange lebar dengan teks kiri & sosmed kanan
   - Baris bawah: orange lebih gelap / biru tua dengan url & sosmed
   
   Implementasi: 
   .footer-row = display flex, background orange
   di dalam ada .footer-blue = div dengan border-radius kanan atas & kanan bawah
   yang menciptakan efek ribbon biru melengkung seperti di referensi
   ════════════════════════════════ */

/* ROW TENGAH: background orange, ada blok biru di kiri */
.footer-mid {
  margin-top: auto;
  background: linear-gradient(90deg, #e05810 0%, #f5a623 50%, #e8a000 100%);
  display: flex;
  align-items: stretch;
  min-height: 70px;
}

/* Blok biru tua di kiri dengan border-radius kanan membentuk lengkung */
.footer-blue-blob {
  background: #1a3a6e;
  border-radius: 0 40px 40px 0;
  padding: 14px 28px 14px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 220px;
  flex-shrink: 0;
}
.fb-label { font-size:9px; font-weight:700; color:rgba(255,255,255,0.75); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
.fb-phone { font-size:20px; font-weight:900; color:#fff; letter-spacing:.5px; line-height:1; }
.fb-sub { font-size:9px; color:rgba(255,255,255,0.65); font-weight:600; margin-top:3px; }

/* Sisi kanan footer: sosmed */
.footer-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 28px;
  gap: 8px;
}
.sc { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; font-weight:900; }
.org { font-size:11px; font-weight:900; color:#fff; letter-spacing:.5px; text-transform:uppercase; }
.email-footer { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.18); border-radius:6px; padding:7px 13px; }
.email-footer svg { flex-shrink:0; }
.email-footer-text { display:flex; flex-direction:column; line-height:1.3; }
.email-footer-label { font-size:7px; font-weight:800; color:rgba(255,255,255,0.7); text-transform:uppercase; letter-spacing:1px; }
.email-footer-addr { font-size:10px; font-weight:800; color:#fff; letter-spacing:.2px; }

/* bottom bar: orange lebih gelap dengan url */
.footer-bot {
  background: linear-gradient(90deg, #e05810, #c04800);
  padding: 9px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fb-url { font-size:10.5px; font-weight:800; color:rgba(255,255,255,0.85); letter-spacing:1px; text-transform:uppercase; }
.fb-r { display:flex; align-items:center; gap:7px; }
.sc2 { width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff; }
.fb-name { font-size:10px; font-weight:900; color:#fff; letter-spacing:1px; text-transform:uppercase; }
.dl-btn { display:block; margin:24px auto 0; background:#0c3526; color:#fff; font-size:14px; font-weight:800; border:none; padding:13px 36px; cursor:pointer; letter-spacing:.5px; border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,0.15); transition:background .2s; }
.dl-btn:hover { background:#1a5c3a; }
.dl-btn:disabled { background:#aaa; cursor:not-allowed; }