/* Donasi Al Washoya — layout refinement and accessible back controls, 2026-11-06 */
:root{--aw-accent:#dc2d74;--aw-ink:#1d2637;--aw-border:#e7eaf0}
body[data-page="detail.html"]{background:#f6f7fa}
body[data-page="detail.html"] .detail-shell{box-shadow:0 16px 50px rgba(18,32,55,.07)}
body[data-page="detail.html"] .detail-cover-wrap{background:#f1f3f7}
body[data-page="detail.html"] .detail-cover{object-fit:contain;object-position:center center}
body[data-page="detail.html"] .detail-back-hit{top:16px;left:16px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.95);color:#1a2436;box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:4}
body[data-page="detail.html"] .detail-back-hit svg{width:22px;height:22px}
body[data-page="detail.html"] .detail-content{overflow-wrap:break-word}
body[data-page="detail.html"] .detail-content h1.detail-program-title{letter-spacing:-.5px;line-height:1.27}
body[data-page="detail.html"] .detail-collection-line{align-items:baseline;gap:8px 12px}
body[data-page="detail.html"] .detail-collection-line strong{white-space:nowrap}
body[data-page="detail.html"] .detail-progress{height:11px}
body[data-page="detail.html"] .detail-stats-row{grid-template-columns:minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--aw-border);border-bottom:1px solid var(--aw-border)}
body[data-page="detail.html"] .detail-usage-link{width:100%;padding:8px 0;min-height:40px;text-align:left}
body[data-page="detail.html"] .detail-stat-card b{font-size:20px}
body[data-page="detail.html"] .detail-stat-card span:last-child{font-size:14px}
body[data-page="detail.html"] .detail-notice{padding:14px}
body[data-page="detail.html"] .detail-donate-btn{border-radius:14px;box-shadow:0 6px 12px rgba(222,46,114,.12)}
@media(min-width:700px){
 body[data-page="detail.html"] .detail-shell{max-width:1024px;margin:28px auto;min-height:calc(100dvh - 56px);border-radius:24px;overflow:clip}
 body[data-page="detail.html"] .detail-container{display:grid!important;grid-template-columns:minmax(0,42%) minmax(0,58%);min-height:0}
 body[data-page="detail.html"] .detail-cover-wrap{height:calc(100dvh - 140px);min-height:480px;max-height:720px;position:sticky;top:0;align-self:start}
 body[data-page="detail.html"] .detail-cover{width:100%;height:100%;object-fit:contain;padding:18px}
 body[data-page="detail.html"] .detail-content{padding:36px 38px 105px!important}
 body[data-page="detail.html"] .detail-content h1.detail-program-title{font-size:clamp(24px,2.35vw,31px);margin-bottom:22px!important}
 body[data-page="detail.html"] .detail-collection-line strong{font-size:clamp(29px,3vw,38px)}
 body[data-page="detail.html"] .detail-collection-line span{font-size:15px}
 body[data-page="detail.html"] .detail-notice p{font-size:13px}
 body[data-page="detail.html"] .detail-section-divider{margin:0 -38px}
 body[data-page="detail.html"] .detail-donate-footer{max-width:1024px;padding:12px 38px 14px calc(42% + 38px);border-radius:0 0 22px 22px}
}
@media(max-width:699px){body[data-page="detail.html"] .detail-cover-wrap{height:300px}body[data-page="detail.html"] .detail-cover{padding:0}body[data-page="detail.html"] .detail-content{padding:22px 20px 100px!important}body[data-page="detail.html"] .detail-back-hit{top:12px;left:14px}}
/* Payment methods — centered mobile-first form with readable choices on desktop */
body[data-page="metode.html"]{background:#f6f7fb}
body[data-page="metode.html"] .site-shell{max-width:560px!important;min-height:100dvh;background:#fff;box-shadow:0 12px 36px rgba(17,31,53,.06)}
body[data-page="metode.html"] .main-content{padding:0 22px 60px!important}
body[data-page="metode.html"] .flow-top{height:72px;margin:0 -22px;padding:0 22px;border-bottom:1px solid var(--aw-border);gap:12px;font-size:17px}
body[data-page="metode.html"] .flow-top a{width:40px!important;height:40px!important;border:1px solid #e8ebf2;border-radius:12px;color:#202a39!important;display:grid!important;place-items:center}
body[data-page="metode.html"] .payment-list{padding:26px 0 40px}
body[data-page="metode.html"] .payment-list h3{font-size:21px!important;letter-spacing:-.45px;margin:0 0 8px!important}
body[data-page="metode.html"] .payment-intro{color:#737e8e;line-height:1.55;font-size:13px;margin:0 0 20px}
body[data-page="metode.html"] .payment-option{min-height:76px!important;border-radius:16px!important;padding:14px 16px!important;grid-template-columns:44px minmax(0,1fr) auto!important}
body[data-page="metode.html"] .payment-option .pay-brand{width:44px;height:44px;border-radius:12px}
body[data-page="metode.html"] .payment-option>span:nth-child(2){font-size:15px}
body[data-page="metode.html"] .payment-option small{font-size:12px}
body[data-page="metode.html"] .method-bank-heading{font-size:14px;margin:20px 0 12px;color:#344055}
body[data-page="metode.html"] #method-bank-list{gap:12px}
body[data-page="metode.html"] .method-bank-item{padding:15px!important;border-radius:15px!important;gap:14px;min-height:88px;transition:border-color .2s,background-color .2s}
body[data-page="metode.html"] .method-bank-item:hover,body[data-page="metode.html"] .method-bank-item:focus-visible{border-color:#e5347b;background:#fffafd;outline:none}
body[data-page="metode.html"] .method-bank-logo{height:46px;width:46px;flex-shrink:0}
body[data-page="metode.html"] .method-bank-info strong{font-size:14px}
body[data-page="metode.html"] .method-bank-info>span{font-size:clamp(15px,3vw,19px);letter-spacing:0}
body[data-page="metode.html"] .method-bank-info small{font-size:12px}
body[data-page="metode.html"] .payment-list>p.muted{margin-top:20px;font-size:12px;padding:16px}
body[data-page="metode.html"] #method-bank-selection[hidden]{display:none!important}
@media(min-width:720px){body[data-page="metode.html"] .site-shell{min-height:calc(100dvh - 48px);margin:24px auto;border-radius:22px;overflow:hidden}}
@media(max-width:440px){body[data-page="metode.html"] .main-content{padding:0 16px 40px!important}body[data-page="metode.html"] .flow-top{height:62px;margin:0 -16px;padding:0 16px}body[data-page="metode.html"] .payment-list{padding-top:22px}body[data-page="metode.html"] .payment-list h3{font-size:19px!important}body[data-page="metode.html"] .method-bank-item{padding:12px!important}}
@media(prefers-reduced-motion:reduce){body[data-page="metode.html"] .method-bank-item{transition:none}}