/* ===== Halaman pembayaran QRIS ===== */
.pay{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.pay-card2{position:relative;width:min(800px,100%);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.9);border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(20,60,160,.55),inset 0 1px 0 #fff}
.pay-card2::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#1D4FD8,#2F6BFF,#8CC0FF)}
.pc-head{display:flex;align-items:center;gap:14px;padding:24px 28px;border-bottom:1px solid var(--line)}
.pc-head .logo-img{width:44px;height:44px;border-radius:12px;object-fit:cover}
.pc-head b{display:block;font-size:17px;letter-spacing:-.02em}
.pc-head small{color:var(--muted);font-size:12px}
.pc-badge{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--blue-d);background:#fff;border:1px solid #CFE0FF;padding:6px 14px;border-radius:999px;white-space:nowrap}
.pc-body{display:grid;grid-template-columns:1fr 1fr}
.pc-left{padding:26px 28px;display:grid;gap:12px;align-content:start;border-right:1px solid var(--line)}
.pill{justify-self:start;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-d);background:#E6EFFF;padding:5px 12px;border-radius:999px}
.lbl{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.total{font-size:clamp(2.2rem,5vw,3rem);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.pc-left .hint{margin:0;font-size:13px;line-height:1.55}
.status{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);transition:background-color .4s,border-color .4s}
.status b{font-size:13.5px}.status p{margin:2px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}
.status .dot{flex:none;width:10px;height:10px;margin-top:5px;border-radius:50%;background:#F59E0B;box-shadow:0 0 0 0 rgba(245,158,11,.5);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(245,158,11,0)}100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}}
.status.ok{background:#EAF8F0;border-color:#BCE5CD}.status.ok .dot{background:#1FA85F;animation:none}
.status.bad{background:#F2F3F7}.status.bad .dot{background:#94A0B8;animation:none}
.dtl-box{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.dtl-btn{display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px 16px;border:0;background:none;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}
.plus{position:relative;width:12px;height:12px}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease)}
.plus::after{transform:rotate(90deg)}
.dtl-btn[aria-expanded="true"] .plus::after{transform:rotate(0)}
.dtl-list{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;padding:4px 16px 16px;font-size:12.5px}
.dtl-list[hidden]{display:none}
.dtl-list dt{color:var(--muted)}.dtl-list dd{margin:0;text-align:right;font-weight:500;overflow-wrap:anywhere}
.foot-note{margin:4px 0 0;font-size:11.5px;color:var(--muted);line-height:1.55}
.pc-right{padding:26px 28px;display:grid;justify-items:center;align-content:start;gap:10px;text-align:center}
.qr-wrap{position:relative;padding:16px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -26px rgba(20,60,160,.5)}
.qr-wrap svg{display:block;width:min(240px,62vw);height:auto;transition:opacity .4s,filter .4s}
.qr-ok{position:absolute;inset:0;display:grid;place-items:center;font-size:64px;font-weight:700;color:#fff;opacity:0;transition:opacity .4s}
.qr-wrap.done svg,.qr-wrap.gone svg{opacity:.18;filter:grayscale(1)}
.qr-wrap.done .qr-ok{opacity:1;color:#1FA85F}
.timer{margin-top:8px;font-size:15px;font-variant-numeric:tabular-nums}
.sm{margin:0;font-size:11.5px;color:var(--muted)}
.pc-right .btn{margin-top:6px;padding:11px 26px;font-size:13.5px}
.pc-right .btn[hidden]{display:none}
.powered{margin-top:8px}
@media (max-width:760px){.pc-body{grid-template-columns:1fr}.pc-left{border-right:0;border-bottom:1px solid var(--line)}.pc-badge{display:none}}
@media (prefers-reduced-motion:reduce){.status .dot{animation:none}}