/* Toko Digital: halaman jual, invoice, unduh. Ikut mode gelap perangkat + pilihan tombol tema blog. */
:root{--td-bg:#f6f6f4;--td-card:#fff;--td-text:#1d1d1f;--td-muted:#666;--td-line:#e3e3e0;--td-accent:#1f7a4d;--td-accent-h:#17603c;--td-mark:#fff3b0;--td-err:#b42318;--td-err-bg:#fdecea;color-scheme:light}
:root[data-theme="dark"]{--td-bg:#16161b;--td-card:#202028;--td-text:#e9e9ec;--td-muted:#a3a3ad;--td-line:#33333d;--td-accent:#2f9e68;--td-accent-h:#38b277;--td-mark:#5a4a00;--td-err:#ff8a80;--td-err-bg:#3a1d1d;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--td-bg:#16161b;--td-card:#202028;--td-text:#e9e9ec;--td-muted:#a3a3ad;--td-line:#33333d;--td-accent:#2f9e68;--td-accent-h:#38b277;--td-mark:#5a4a00;--td-err:#ff8a80;--td-err-bg:#3a1d1d;color-scheme:dark}}
*{box-sizing:border-box}
body.td-body{margin:0;background:var(--td-bg);color:var(--td-text);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.td-top{max-width:720px;margin:0 auto;padding:16px}
.td-top a{color:var(--td-text);text-decoration:none;font-weight:700}
.td-wrap{max-width:720px;margin:0 auto;padding:0 16px 32px;display:flex;flex-direction:column;gap:16px}
.td-foot{text-align:center;color:var(--td-muted);font-size:.85rem;padding:24px 16px}
.td-card{background:var(--td-card);border:1px solid var(--td-line);border-radius:14px;padding:24px}
.td-card h1{font-size:1.6rem;line-height:1.25;margin:.25rem 0 .5rem}
.td-card h2{font-size:1.25rem;margin:0 0 1rem}
.td-hero{display:block;width:calc(100% + 48px);max-width:none;margin:-24px -24px 16px;border-radius:14px 14px 0 0;aspect-ratio:16/9;object-fit:cover}
.td-price{display:flex;align-items:baseline;gap:.6rem;font-size:1.5rem;font-weight:800;color:var(--td-accent);margin-bottom:1rem}
.td-price s{color:var(--td-muted);font-weight:400;font-size:1rem}
.td-content img{max-width:100%;height:auto;border-radius:8px}
.td-content a{color:var(--td-accent)}
.td-form form{display:flex;flex-direction:column;gap:14px}
.td-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.95rem}
.td-form label small{font-weight:400;color:var(--td-muted)}
.td-form input{font:inherit;padding:12px 14px;border:1px solid var(--td-line);border-radius:10px;background:var(--td-bg);color:var(--td-text);width:100%}
.td-form input:focus{outline:2px solid var(--td-accent);outline-offset:1px}
.td-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.td-method{font-size:.9rem;color:var(--td-muted);background:var(--td-bg);border-radius:10px;padding:12px 14px}
.td-btn{display:inline-block;text-align:center;font:inherit;font-weight:700;background:var(--td-accent);color:#fff;border:0;border-radius:10px;padding:14px 20px;cursor:pointer;text-decoration:none}
.td-btn:hover{background:var(--td-accent-h)}
.td-btn-wa{background:#25d366;color:#0b3d1f}
.td-btn-wa:hover{background:#1ebe5b}
.td-alert{background:var(--td-mark);border-radius:10px;padding:12px 14px;font-size:.95rem}
.td-alert-error{background:var(--td-err-bg);color:var(--td-err)}
.td-alert ul{margin:0;padding-left:1.2rem}
.td-muted{color:var(--td-muted);font-size:.9rem}
.td-badge{display:inline-block;font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--td-line)}
.td-badge-unpaid{background:#fff1c2;color:#7a5600}
.td-badge-completed{background:#d6f5e3;color:#14643c}
.td-badge-expired,.td-badge-cancelled,.td-badge-refunded{background:#eee;color:#555}
.td-total{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:2rem;font-weight:800;margin:.25rem 0}
.td-banks{display:grid;gap:10px;margin:1rem 0}
.td-bank{border:1px solid var(--td-line);border-radius:10px;padding:12px 14px}
.td-bank-name{font-weight:700}
.td-bank-num{font-size:1.2rem;font-family:ui-monospace,monospace;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.td-bank-holder{color:var(--td-muted);font-size:.9rem}
.td-copy{font:inherit;font-size:.8rem;font-weight:600;font-family:system-ui,sans-serif;padding:4px 10px;border-radius:6px;border:1px solid var(--td-line);background:var(--td-bg);color:var(--td-text);cursor:pointer}
@media (max-width:480px){.td-card{padding:18px}.td-hero{width:calc(100% + 36px);margin:-18px -18px 14px}.td-total{font-size:1.6rem}}