@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap";:root{--ink:#201630;--muted:#746b80;--violet:#7048e8;--line:#e8e2f0}*{box-sizing:border-box}body{margin:0;background:linear-gradient(120deg,#fbfaff,#eef2ff,#fbfaff);color:var(--ink);font-family:DM Sans,sans-serif}.page{min-height:100vh;background-image:linear-gradient(#6f55bc0a 1px,transparent 1px),linear-gradient(90deg,#6f55bc0a 1px,transparent 1px);background-size:36px 36px}.shell{width:min(1100px,calc(100% - 40px));margin:auto}.topbar-wrapper{position:sticky;top:0;z-index:1000;background:#fbfaffe0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #e5e0ef}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between}.logo{color:var(--ink);font:800 1.5rem Plus Jakarta Sans;letter-spacing:-1.5px;text-decoration:none}.logo b{color:var(--violet)}.back{color:#594b70;font-size:.88rem;font-weight:700;text-decoration:none}.back:hover{color:var(--violet)}.crumb{display:flex;gap:9px;margin:28px 0 16px;color:#81778c;font-size:.8rem}.crumb a{color:inherit;text-decoration:none}.crumb strong{color:#4d405d}.layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px;align-items:start;padding-bottom:64px}.side{position:sticky;top:96px}.card{border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 16px 38px #3320520c}.product-card{padding:22px}.product-banner{width:calc(100% + 44px);margin:-22px -22px 18px;height:160px;overflow:hidden;border-radius:18px 18px 0 0}.product-banner img{width:100%;height:100%;object-fit:cover;display:block}.product-card.has-banner{padding-top:0}.product-icon{display:grid;place-items:center;width:61px;height:61px;border-radius:17px;background:linear-gradient(135deg,#e1d8ff,#f4f0ff);color:#5631bb;font-size:1.8rem;font-weight:800}.product-name{margin:17px 0 5px;font:800 1.28rem Plus Jakarta Sans;letter-spacing:-.05em}.product-card.has-banner .product-name{margin-top:12px}.product-desc{margin:0;color:var(--muted);font-size:.88rem;line-height:1.5}.rating{display:flex;gap:7px;align-items:center;margin:14px 0;color:#6f6479;font-size:.8rem}.stars{color:#f7ae16;letter-spacing:1px}.pills{display:flex;flex-wrap:wrap;gap:7px}.pill{padding:6px 8px;border-radius:7px;background:#f4f1ff;color:#6040c7;font-size:.69rem;font-weight:700}.pill.green{background:#eaf9f1;color:#198958}.benefit-card{margin-top:16px;padding:20px}.benefit-card h2{margin:0 0 15px;font:800 1rem Plus Jakarta Sans}.benefit{display:grid;grid-template-columns:17px 1fr;gap:9px;margin:15px 0}.tick{color:#18ad70;font-weight:800}.benefit b{display:block;font-size:.82rem}.benefit p{margin:3px 0 0;color:var(--muted);font-size:.75rem;line-height:1.4}.safe{display:flex;gap:9px;align-items:center;margin-top:16px;padding:13px 14px;border:1px solid #ded8ec;border-radius:14px;background:#ffffffa8;color:#6c6177;font-size:.76rem;line-height:1.35}.safe-mark{color:#18ad70;font-size:1rem}.flow{display:grid;gap:18px}.step{overflow:hidden}.step-head{display:flex;gap:10px;align-items:center;padding:20px 22px;border-bottom:1px solid #eeeaf3;font:800 1rem Plus Jakarta Sans}.number{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--violet);color:#fff;font:800 .72rem DM Sans}.step-body{padding:22px}.choice-label,.field-label{display:block;margin-bottom:9px;color:#40354d;font-size:.82rem;font-weight:700}.package-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.choice{display:block;min-width:0;cursor:pointer}.choice input{position:absolute;opacity:0}.choice>span{display:flex;min-width:0;min-height:53px;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border:1px solid #ded9e7;border-radius:12px;background:#fff;font-size:.84rem;font-weight:700}.choice>span>span{min-width:0}.choice small{display:block;color:var(--violet);font-size:.72rem}.choice input:checked+span{border-color:#a78bfa;background:#faf7ff;box-shadow:0 0 0 2px #7048e82b}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field input{width:100%;height:47px;padding:0 13px;border:1px solid #ded9e7;border-radius:10px;color:var(--ink);font:inherit;outline:none}.field input:focus{border-color:#a78bfa;box-shadow:0 0 0 3px #7048e81e}.field-help{margin:7px 0 0;color:#81778c;font-size:.74rem}.payment-option{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid #a78bfa;border-radius:12px;background:#faf7ff;color:#3d2a6e;font-size:.86rem;font-weight:700}.qris{display:grid;place-items:center;width:43px;height:32px;border:1px solid #d8e2f8;border-radius:7px;background:#fff;color:#1d2636;font:800 .69rem Plus Jakarta Sans;letter-spacing:-1px}.payment-option small{display:block;margin-top:3px;color:#75829a;font-weight:500}.summary-body{padding:20px 22px 22px}.summary-row{display:flex;justify-content:space-between;gap:18px;margin:11px 0;color:#73697e;font-size:.87rem}.summary-row b{color:var(--ink)}.divider{height:1px;margin:18px 0;background:#ece8f1}.total{display:flex;justify-content:space-between;align-items:end}.total span{font-size:.88rem;font-weight:700}.total strong{color:var(--violet);font:800 1.45rem Plus Jakarta Sans;letter-spacing:-.06em}.pay{width:100%;margin-top:21px;padding:18px 16px 15px;border:0;border-radius:16px;background:linear-gradient(135deg,#7048e8,#9861ff);color:#fff;font:800 1rem Plus Jakarta Sans;letter-spacing:.2px;cursor:pointer;box-shadow:0 8px 28px #7048e840,0 2px 8px #7048e820;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease;position:relative;overflow:hidden;animation:pay-breathe 3s ease-in-out infinite}.pay:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);transform:translate(-100%);transition:transform .6s ease}.pay:hover:before{transform:translate(100%)}.pay:hover{filter:brightness(1.08);transform:translateY(-2px) scale(1.012);box-shadow:0 14px 38px #7048e850,0 4px 12px #7048e830;animation:none}.pay:active{transform:scale(.97);box-shadow:0 4px 12px #7048e828;animation:none}.pay:disabled{cursor:wait;opacity:.85;transform:none;filter:none;animation:none}.pay.loading{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;animation:none}.pay.loading:before{display:none}@keyframes pay-breathe{0%,to{box-shadow:0 8px 28px #7048e840,0 2px 8px #7048e820}50%{box-shadow:0 10px 36px #7048e860,0 0 0 7px #7048e814}}.pay small{display:block;margin-top:3px;color:#e3d8ff;font-size:.7rem;font-weight:600;letter-spacing:.1px}.secure-note{margin:12px 0 0;text-align:center;color:#80768a;font-size:.73rem}.footer{padding:23px 0;border-top:1px solid #e6e1ed;background:#ffffffa6;color:#766c81;font-size:.77rem}.footer .shell{display:flex;justify-content:space-between;gap:15px}.footer strong{color:#51445f}@media(max-width:780px){.layout{grid-template-columns:1fr}.side{position:static;display:grid;grid-template-columns:1fr 1fr;gap:14px}.benefit-card{margin-top:0}.safe{grid-column:1/-1}.crumb{margin-top:22px}.topbar{height:64px}}@media(max-width:540px){.shell{width:min(100% - 28px,1100px)}.topbar .back{font-size:.77rem}.layout{gap:16px;padding-bottom:36px}.side{display:block}.benefit-card{margin-top:14px}.form-grid{grid-template-columns:1fr}.footer .shell{display:block}.footer span+span{display:block;margin-top:7px}}.product-card{padding:20px;border-radius:20px}.product-card .card-header{display:flex;align-items:center;gap:14px;margin-bottom:12px}.product-card .app-icon{width:56px;height:56px;min-width:56px;border-radius:16px;background:#f8fafc;border:1px solid #f1f5f9;box-shadow:0 4px 10px #0000000a;display:grid;place-items:center;overflow:hidden;font-size:1.7rem}.product-card .app-icon img{width:100%;height:100%;object-fit:cover;border-radius:16px}.product-card .card-title-group{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.product-card .product-name{margin:0;font-family:Plus Jakarta Sans,sans-serif;font-weight:800;font-size:1.15rem;color:#1e1b2e;line-height:1.2}.product-card .card-rating{display:flex;align-items:center;gap:4px;font-size:.78rem;color:#64748b;font-weight:500}.product-card .card-rating .star{color:#eab308;font-size:.88rem}.product-card .product-desc{margin:10px 0 0;color:var(--muted);font-size:.86rem;line-height:1.5}.product-card .card-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}.badge-pill{display:inline-flex;align-items:center;gap:3px;padding:4px 9px;border-radius:8px;font-size:.75rem;font-weight:600;line-height:1}.badge-blue{background:#eff6ff;color:#2563eb}.badge-green{background:#f0fdf4;color:#16a34a}.badge-red{background:#fef2f2;color:#dc2626}.info-icon{opacity:.7}
