*{font-family:Plus Jakarta Sans,sans-serif;margin:0;padding:0;box-sizing:border-box}@keyframes st-pop{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}.spinner{width:1rem;height:1rem;border-radius:50%;border:.18em solid currentColor;border-right-color:transparent;display:inline-block;animation:spin .65s linear infinite;vertical-align:middle}.spinner-lg{width:2.5rem;height:2.5rem;border-width:.22rem}.spinner-sm{width:1rem;height:1rem}:root,[data-theme=dark]{--bg: #0a0a0c;--panel: #101013;--panel2: #17171c;--border: #232329;--border2: #3a3a42;--text: #ececf1;--muted: #9a9aa3;--faint: #6b6b75;--inv: #ffffff;--invfg: #0a0a0c;--accent: #8a8dff;--sel: #ffffff;--selfg: #0a0a0c;--updrop: #1e1e24;--upborder: #4a4a55;--uptext: rgba(255,255,255,.78);--headerbg: rgba(10,10,12,.92);--okbg: #14351d;--okfg: #4ade80}[data-theme=light]{--bg: #ffffff;--panel: #fafafb;--panel2: #f2f1fb;--border: #e9eaee;--border2: #d4d7e0;--text: #1f2328;--muted: #62666d;--faint: #9096a0;--inv: #111318;--invfg: #ffffff;--accent: #422ad5;--sel: #111318;--selfg: #ffffff;--updrop: #f3f4f8;--upborder: #c9ccd4;--uptext: rgba(0,0,0,.6);--headerbg: rgba(255,255,255,.92);--okbg: #e7f5e4;--okfg: #1f8a3b}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);min-height:100vh}#app,#root{max-width:430px;margin:0 auto;min-height:100vh;background:var(--bg);display:flex;flex-direction:column;position:relative;box-shadow:0 0 40px #00000073}@media (min-width: 640px){#app,#root{max-width:1200px;box-shadow:none}}.screen{display:none;flex-direction:column;min-height:100vh}.screen.active{display:flex}.app-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--headerbg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:30}.logo{display:flex;align-items:center;gap:8px;cursor:pointer}.logo-square{width:30px;height:30px;background:var(--inv);display:grid;place-items:center;color:var(--invfg);font-weight:800;font-size:15px}.logo-text{font-weight:800;font-size:18px;letter-spacing:-.3px}.header-actions{display:flex;align-items:center;gap:8px}.theme-btn{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--border2);background:transparent;color:var(--text);cursor:pointer;font-size:16px}.bottom-bar{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:430px;padding:12px 20px 18px;background:linear-gradient(to top,var(--bg) 75%,transparent);z-index:20}@media (min-width: 640px){.bottom-bar{max-width:1200px;position:sticky}}.btn-primary{width:100%;height:52px;font-size:15px;font-weight:700;border:none;background:var(--inv);color:var(--invfg);cursor:pointer}.btn-primary:disabled{opacity:.45;cursor:not-allowed}.pack-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (min-width: 640px){.pack-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}}@media (min-width: 768px){.pack-grid-3{grid-template-columns:1fr 1fr 1fr}}.sticker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}@media (min-width: 640px){.sticker-grid{gap:14px}}.pack-card{border:1px solid var(--border);background:var(--panel);cursor:pointer;display:flex;flex-direction:column;transition:border-color .15s}.pack-card:hover{border-color:var(--border2)}@media (min-width: 640px){.pack-card:hover{transform:translateY(-2px);border-color:#4a4a55}}.pack-cover{width:100%;aspect-ratio:1;display:grid;place-items:center}.pack-info{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}@media (max-width: 639px){.pack-info{padding:10px 12px 12px}}.pack-name{font-weight:700;font-size:15px}@media (max-width: 639px){.pack-name{font-size:13.5px}}.pack-meta{display:flex;gap:6px;flex-wrap:wrap}.pack-price{font-weight:800;font-size:15px}@media (max-width: 639px){.pack-price{font-size:13px}}.tag{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--border2);padding:2px 8px}@media (max-width: 639px){.tag{font-size:10px;padding:2px 6px}}.tag-accent{background:var(--okbg);color:var(--okfg);border:none;font-weight:700;font-size:11px;padding:2px 8px}@media (min-width: 640px){.tag-accent{font-size:12px}}.section-label{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}@media (min-width: 640px){.section-label{font-size:12px}}.hero-title{margin:10px 0 0;font-size:38px;line-height:1.08;font-weight:800;letter-spacing:-1.2px;text-wrap:pretty}@media (min-width: 640px){.hero-title{font-size:64px;letter-spacing:-2px}}.hero-sub{margin:14px 0 0;font-size:15px;color:var(--muted);line-height:1.6}@media (min-width: 640px){.hero-sub{font-size:17px;max-width:560px}}.cta-bar{display:flex;gap:10px;margin-top:22px}@media (min-width: 640px){.cta-bar{margin-top:0}}.cta-btn{height:50px;padding:0 22px;font-size:14.5px;font-weight:700;cursor:pointer}.cta-fill{border:none;background:var(--inv);color:var(--invfg)}.cta-outline{border:1px solid var(--border2);background:transparent;color:var(--text)}.step-card{display:flex;gap:14px;padding:16px;border:1px solid var(--border);background:var(--panel)}.step-num{width:28px;height:28px;display:grid;place-items:center;background:var(--inv);color:var(--invfg);font-weight:800;font-size:13px;flex-shrink:0}.step-title{font-weight:700;font-size:14.5px}.step-sub{font-size:13px;color:var(--muted);line-height:1.5;margin-top:3px}.promo-block{margin:36px 20px 0;padding:24px 20px;background:var(--inv);color:var(--invfg);text-align:center}@media (min-width: 640px){.promo-block{max-width:1200px;margin:48px 0 0;padding:40px 32px}}.promo-title{font-size:20px;font-weight:800;letter-spacing:-.4px}@media (min-width: 640px){.promo-title{font-size:28px}}.promo-sub{font-size:13px;opacity:.7;margin-top:4px}.promo-btn{margin-top:16px;height:46px;padding:0 24px;font-size:14px;font-weight:700;border:none;background:var(--bg);color:var(--text);cursor:pointer}.detail-layout{display:flex;flex-direction:column}@media (min-width: 640px){.detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px}}.detail-title{font-size:24px;font-weight:800;letter-spacing:-.5px;margin:6px 0 0}@media (min-width: 640px){.detail-title{font-size:40px;letter-spacing:-1px}}.detail-desc{font-size:14px;color:var(--muted);line-height:1.55;margin:8px 0 0}@media (min-width: 640px){.detail-desc{font-size:15px;line-height:1.65;margin:14px 0 0}}.detail-cover{width:100%;aspect-ratio:4/3;display:block}.tier-row{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);cursor:pointer}@media (min-width: 640px){.tier-row{gap:14px;padding:16px}}.tier-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border2);background:var(--bg);flex-shrink:0}.tier-row.selected .tier-dot{border-width:6px;border-color:var(--sel)}.tier-row.selected{border-color:var(--sel);background:var(--panel2)}.tier-label{font-weight:700;font-size:14px}@media (min-width: 640px){.tier-label{font-size:15px}}.tier-sub{font-size:12px;color:var(--muted);margin-top:2px}@media (min-width: 640px){.tier-sub{font-size:13px}}.tier-price{font-weight:800;font-size:14px}@media (min-width: 640px){.tier-price{font-size:15px}}.upload-grid{display:grid;gap:12px}@media (min-width: 640px){.upload-grid{gap:16px}}.upload-slot{display:flex;flex-direction:column;gap:6px}@media (min-width: 640px){.upload-slot{gap:8px}}.upload-box{width:100%;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:var(--updrop);border:2px dashed var(--upborder);cursor:pointer;text-align:center;padding:12px;transition:border-color .15s}.upload-box:hover{border-color:var(--muted)}.upload-box.filled{border-style:solid;border-color:var(--okfg)}.upload-box img{width:100%;height:100%;object-fit:cover}.upload-label{font-size:12px;font-weight:600;color:var(--muted);text-align:center}@media (min-width: 640px){.upload-label{font-size:13px}}.order-summary{border:1px solid var(--border);background:var(--panel);padding:16px}@media (min-width: 640px){.order-summary{padding:20px}}.summary-row{display:flex;justify-content:space-between;margin-top:12px;font-size:13.5px}@media (min-width: 640px){.summary-row{font-size:14px;margin-top:14px}}.summary-total{border-top:1px dashed var(--border2);margin-top:12px;padding-top:12px;display:flex;justify-content:space-between;font-size:15px;font-weight:800}@media (min-width: 640px){.summary-total{font-size:16px;margin-top:14px;padding-top:14px}}.pay-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--border);cursor:pointer;background:var(--panel)}@media (min-width: 640px){.pay-row{gap:14px;padding:14px 16px}}.pay-row.selected{border-color:var(--sel);background:var(--panel2)}.pay-mark{width:34px;height:24px;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:800;letter-spacing:.5px;flex-shrink:0}@media (min-width: 640px){.pay-mark{width:36px;height:26px}}.proc-center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;flex:1}.proc-icon{width:84px;height:84px;display:grid;place-items:center;animation:st-pop .4s ease}@media (min-width: 640px){.proc-icon{width:92px;height:92px}}.proc-title{margin:22px 0 0;font-size:20px;font-weight:800;letter-spacing:-.3px}@media (min-width: 640px){.proc-title{margin:26px 0 0;font-size:26px;letter-spacing:-.5px}}.proc-sub{margin:8px 0 0;font-size:13.5px;color:var(--muted)}@media (min-width: 640px){.proc-sub{font-size:14.5px}}.progress-wrap{width:100%;max-width:300px;margin-top:26px}@media (min-width: 640px){.progress-wrap{max-width:340px;margin-top:30px}}.progress-bar{height:8px;background:var(--border);overflow:hidden}.progress-fill{height:100%;background:var(--sel);transition:width .12s linear}.progress-label{font-size:12px;font-weight:700;margin-top:8px}@media (min-width: 640px){.progress-label{font-size:13px}}.stage-row{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600}@media (min-width: 640px){.stage-row{font-size:14.5px}}.stage-num{width:20px;height:20px;display:grid;place-items:center;font-size:11px}@media (min-width: 640px){.stage-num{width:22px;height:22px}}.sticker-item{display:flex;flex-direction:column;gap:6px}@media (min-width: 640px){.sticker-item{gap:8px}}.sticker-cell{position:relative;aspect-ratio:1;cursor:pointer;display:grid;place-items:center;border:2px solid transparent;animation:st-pop .35s ease}.sticker-cell.selected{border-color:var(--sel)}.sticker-cell.dimmed{opacity:.4}.sticker-face{width:72%;aspect-ratio:1;border-radius:50% 46% 52% 48%;background:#fff;box-shadow:0 2px 6px #00000040;display:grid;place-items:center;text-align:center;padding:4px}@media (min-width: 640px){.sticker-face{width:68%;box-shadow:0 2px 8px #0000004d}}.sticker-label{font-size:12px;font-weight:800;color:#333;line-height:1.1}@media (min-width: 640px){.sticker-label{font-size:15px}}.sticker-check{position:absolute;top:7px;right:7px;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--border2);font-size:12px;font-weight:800}@media (min-width: 640px){.sticker-check{top:8px;right:8px;width:24px;height:24px;font-size:13px}}.sticker-check.on{background:var(--inv);border-color:var(--inv);color:var(--invfg)}.reroll-btn{height:26px;font-size:10.5px;font-weight:700;border:1px solid var(--border2);background:transparent;color:var(--muted);cursor:pointer}@media (min-width: 640px){.reroll-btn{font-size:11px}}.reroll-btn:disabled{opacity:.35;cursor:not-allowed}.reroll-btn:hover:not(:disabled){border-color:var(--muted);color:var(--text)}.result-info{margin:0 20px;padding:12px 14px;border:1px solid var(--border);background:var(--panel);font-size:12.5px;color:var(--muted);line-height:1.5}@media (min-width: 640px){.result-info{margin:20px 0 0;font-size:13px;padding:14px 16px}}.done-icon{width:84px;height:84px;background:var(--okbg);display:grid;place-items:center;animation:st-pop .4s ease}@media (min-width: 640px){.done-icon{width:92px;height:92px}}.done-title{margin:22px 0 0;font-size:21px;font-weight:800;letter-spacing:-.3px}@media (min-width: 640px){.done-title{margin:26px 0 0;font-size:28px;letter-spacing:-.5px}}.done-sub{margin:8px 0 0;font-size:13.5px;color:var(--muted);line-height:1.55;max-width:280px}@media (min-width: 640px){.done-sub{font-size:14.5px;max-width:360px;margin:10px 0 0}}.wa-btn{height:48px;font-size:14px;font-weight:700;border:none;background:#25d366;color:#06210f;cursor:pointer}@media (min-width: 640px){.wa-btn{height:50px;padding:0 28px}}.app-footer{margin-top:auto;padding:20px;border-top:1px solid var(--border);text-align:center;font-size:12px;color:var(--faint)}@media (min-width: 640px){.app-footer{padding:24px 32px;display:flex;justify-content:space-between;font-size:13px}}.back-btn{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;border:none;background:none;color:var(--text);font-size:15px;font-weight:700}@media (min-width: 640px){.back-btn{padding:12px 0;color:var(--muted)}}.back-btn:hover{color:var(--text)}.badge-beta{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--border2);padding:2px 8px}@media (min-width: 640px){.badge-beta{font-size:12px}}.filter-pills{display:flex;gap:8px;overflow-x:auto}@media (min-width: 640px){.filter-pills{gap:10px;flex-wrap:wrap;overflow:visible}}.filter-pill{height:36px;padding:0 14px;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;border:1px solid var(--border2);background:transparent;color:var(--muted);transition:all .15s}@media (min-width: 640px){.filter-pill{height:40px;padding:0 18px;font-size:14px}}.filter-pill.active{border-color:var(--inv);background:var(--inv);color:var(--invfg)}.search-wrap{display:flex;gap:8px}@media (min-width: 640px){.search-wrap{gap:12px}}.search-box{flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--border2);background:var(--panel);padding:0 12px;height:46px}@media (min-width: 640px){.search-box{height:54px;padding:0 16px}}.search-box input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-size:14px;height:100%}@media (min-width: 640px){.search-box input{font-size:15px}}.search-box input::placeholder{color:var(--faint)}.search-btn{height:46px;padding:0 18px;font-size:14px;font-weight:700;border:none;background:var(--inv);color:var(--invfg);cursor:pointer}@media (min-width: 640px){.search-btn{height:54px;padding:0 28px;font-size:15px}}.req-box{padding:14px;border:1px solid var(--border);background:var(--panel)}@media (min-width: 640px){.req-box{padding:16px}}.req-box ul{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--muted);line-height:1.8}@media (min-width: 640px){.req-box ul{font-size:13.5px;line-height:1.9}}.req-title{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)}@media (min-width: 640px){.req-title{font-size:12px}}@media (min-width: 768px){#app,#root{max-width:1040px}#screen-home>div:not(.app-footer):not(.promo-block),#screen-home>.promo-block,#screen-store>div:not(.app-footer){width:100%;margin-left:auto;margin-right:auto}#screen-home>div:not(.app-footer):not(.promo-block),#screen-home>.promo-block{max-width:880px}#screen-home>.promo-block{border-radius:16px}#screen-home>div:nth-of-type(2)>div{max-width:720px;margin-left:auto;margin-right:auto}#cara-kerja>div{flex-direction:row!important;align-items:stretch}#cara-kerja .step-card{flex:1 1 0}#screen-detail>*:not(.app-header):not(.bottom-bar),#screen-checkout>*:not(.app-header),#screen-upload>*:not(.app-header):not(.bottom-bar),#screen-pay>*:not(.app-header):not(.bottom-bar),#screen-payment>*:not(.app-header):not(.bottom-bar){width:100%;max-width:660px;margin-left:auto;margin-right:auto}#screen-pay[data-screen=pay]{max-width:660px;margin-left:auto;margin-right:auto;width:100%}#uploadSlots{justify-content:center}#screen-result .sticker-grid,#screen-result .result-info{width:100%;max-width:480px;margin-left:auto;margin-right:auto}#screen-detail .bottom-bar,#screen-checkout .bottom-bar,#screen-upload .bottom-bar,#screen-pay .bottom-bar,#screen-payment .bottom-bar,#screen-result .bottom-bar{max-width:660px;margin-left:auto;margin-right:auto;left:auto;transform:none}}