/* Halaman donasi QRIS. Berdiri sendiri — kelas .notice di beranda.css tidak
   ikut termuat di sini, jadi gayanya ditulis ulang seperlunya. */

.donation-page { width:var(--shell); margin:0 auto; padding:48px 0 72px; }
.donation-page .head { max-width:680px; margin-bottom:30px; }
.donation-page .label { color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.donation-page h1 { margin:8px 0 12px; font:700 clamp(36px,7vw,60px)/1 Georgia,serif; letter-spacing:-.04em; }
.donation-page .head p { color:var(--muted); font-size:13px; line-height:1.7; }

.donation-grid { display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:24px; align-items:start; }

.qr-card { padding:22px; border:1px solid var(--line); background:#191610; }
/* Latar putih wajib: QR di atas latar gelap sering gagal dibaca scanner. */
.qr-frame { padding:14px; border-radius:6px; background:#fff; }
.qr-frame img { display:block; width:100%; height:auto; }
.qr-meta { margin-top:18px; text-align:center; }
.qr-meta strong { display:block; font:700 17px Georgia,serif; letter-spacing:.02em; }
.qr-meta span { display:block; margin-top:6px; color:var(--muted); font-size:11px; line-height:1.6; }
.qr-meta span:first-of-type { color:var(--gold-light); letter-spacing:.06em; }

.donation-steps ol { margin:0; padding:0; list-style:none; counter-reset:donasi; }
.donation-steps li { position:relative; padding:0 0 22px 58px; counter-increment:donasi; }
.donation-steps li::before { position:absolute; top:0; left:0; display:grid; place-items:center; width:38px; height:38px; content:counter(donasi); color:#181107; border-radius:50%; background:linear-gradient(135deg,var(--gold-light),var(--gold)); font:700 16px Georgia,serif; }
.donation-steps li strong { display:block; margin-bottom:6px; font:700 20px/1.2 Georgia,serif; }
.donation-steps li p { margin:0; color:#c3bcb1; font-size:14px; line-height:1.8; }
.donation-steps a { color:var(--gold-light); text-decoration:underline; text-decoration-color:rgba(215,164,68,.4); text-underline-offset:3px; transition:text-decoration-color .2s ease; }
.donation-steps a:hover { text-decoration-color:var(--gold); }

.confirmation-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.confirmation-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 15px; border:1px solid rgba(215,164,68,.35); border-radius:5px; background:rgba(215,164,68,.06); font-size:13px; font-weight:700; line-height:1.2; text-decoration:none !important; transition:border-color .2s ease,background-color .2s ease; }
.confirmation-link:hover,.confirmation-link:active { border-color:var(--gold); background:rgba(215,164,68,.12); }
.confirmation-link:focus-visible { outline:2px solid var(--gold-light); outline-offset:3px; }
.confirmation-link--whatsapp { gap:10px; color:#9ce9b8 !important; border-color:rgba(37,211,102,.38); background:rgba(37,211,102,.08); }
.confirmation-link--whatsapp:hover { border-color:#25d366; background:rgba(37,211,102,.14); }
.confirmation-link--whatsapp svg { width:20px; height:20px; flex:0 0 auto; fill:currentColor; }
.confirmation-link--whatsapp span { display:grid; gap:2px; text-align:left; }
.confirmation-link--whatsapp strong { margin:0; font-family:inherit; font-size:13px; font-weight:700; line-height:1.2; }
.confirmation-link--whatsapp small { color:#c3d9ca; font-size:11px; font-weight:500; letter-spacing:.03em; }

.donation-page .notice { margin-top:6px; padding:18px 20px; border-left:2px solid var(--gold); background:rgba(215,164,68,.06); }
.donation-page .notice strong { display:block; margin-bottom:5px; font-size:12px; }
.donation-page .notice span { color:var(--muted); font-size:12px; line-height:1.7; }

@media (max-width:900px) {
  .donation-grid { grid-template-columns:1fr; }
  .qr-card { max-width:420px; margin:0 auto; }
}

@media (max-width:650px) {
  .donation-page { width:calc(100% - 28px); padding-top:32px; }
  /* Padding dipangkas agar QR tetap sebesar mungkin — makin besar makin gampang
     di-scan dari layar HP. */
  .qr-card { padding:14px; }
  .qr-frame { padding:10px; }
  .donation-steps li { padding-left:50px; }
  .donation-steps li::before { width:34px; height:34px; font-size:14px; }
  .confirmation-links { align-items:stretch; flex-direction:column; }
  .confirmation-link { width:100%; }
}