:root{--navy:#073d39;--navy-deep:#062f2d;--green:#19aa7d;--green-light:#dff7ed;--cream:#f7f8f3;--ink:#16312f;--muted:#71817f;--line:#e9eeea;--white:#fff;--shadow:0 24px 70px rgba(4,49,45,.16)}*{box-sizing:border-box}html{background:#dfe9e4}body{margin:0;font-family:DM Sans,sans-serif;color:var(--ink);background:radial-gradient(circle at top,#f7f9f5,#dce8e2);min-height:100vh}button,input{font:inherit}.phone{width:min(100%,430px);min-height:100vh;margin:0 auto;background:var(--cream);position:relative;overflow:hidden;box-shadow:var(--shadow)}a{color:var(--green);font-weight:700;text-decoration:none}button{border:0;cursor:pointer}.brand{display:flex;align-items:center;gap:9px;color:#fff;font:700 22px Manrope}.brand img{width:38px;height:38px;object-fit:contain}.brand span b{color:#8de0bf}.brand--compact img{width:42px;height:42px}.muted{color:var(--muted)}.loading-screen{display:grid;place-content:center;text-align:center}.loader{width:38px;height:38px;border:4px solid #d8ebe3;border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite;margin:auto}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:700px){body{padding:24px 0}.phone{min-height:860px;border-radius:32px}.bottom-nav{border-radius:0 0 32px 32px}}.login-page{background:#f5f7f3;min-height:100vh}.login-visual{height:390px;background:radial-gradient(circle at 85% 25%,#147560 0,#075247 35%,#063b38 72%);padding:22px 22px 0;color:#fff;position:relative;overflow:hidden}.login-visual:after{content:"";position:absolute;inset:auto -90px -145px auto;width:330px;height:330px;border-radius:50%;border:1px solid #ffffff14;box-shadow:0 0 0 44px #ffffff08,0 0 0 88px #ffffff05}.login-top{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between}.login-top .brand img{width:43px;height:43px;filter:drop-shadow(0 6px 12px #001f1c66)}.safe-badge{height:29px;padding:0 10px;border-radius:20px;background:#ffffff12;border:1px solid #ffffff17;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;gap:5px;font-size:8px;color:#c8e7df}.safe-badge svg{width:13px;color:#8de2bf}.login-copy{position:relative;z-index:4;margin-top:32px;width:61%}.login-kicker{display:flex;align-items:center;gap:5px;font-size:8px;font-weight:700;letter-spacing:.3px;color:#91e3c2}.login-kicker svg{width:12px}.login-copy h1{font:800 28px/1.17 Manrope;letter-spacing:-1.2px;margin:10px 0 9px}.login-copy h1 em{font-style:normal;color:#91e3c2}.login-copy p{font-size:10px;line-height:1.55;color:#bbd8d2;margin:0;max-width:220px}.login-person{position:absolute;z-index:3;width:238px;height:auto;right:-39px;bottom:-25px;filter:drop-shadow(0 18px 18px #002a2538)}.login-orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb-one{width:180px;height:180px;background:#50d4a51a;right:-45px;top:58px}.orb-two{width:100px;height:100px;background:#ffd36d0d;left:-50px;bottom:45px}.floating-pill{position:absolute;z-index:6;display:flex;align-items:center;gap:5px;background:#fffffff0;color:#12443e;border:1px solid #ffffff80;border-radius:11px;padding:6px 8px;box-shadow:0 9px 24px #002c2733;font-size:8px;font-weight:700;animation:float 3.6s ease-in-out infinite}.floating-pill svg{width:13px;color:#149370}.pill-pulsa{right:128px;bottom:70px}.pill-fast{right:13px;bottom:28px;animation-delay:-1.5s}.pill-fast svg{color:#dfa02a}.login-sheet{position:relative;z-index:8;margin-top:-21px;border-radius:27px 27px 0 0;background:#fff;padding:11px 24px 22px;min-height:500px;box-shadow:0 -12px 35px #002b2412}.sheet-handle{width:39px;height:4px;background:#dce5e1;border-radius:5px;margin:0 auto 18px}.sheet-heading{display:flex;align-items:center;justify-content:space-between}.sheet-heading>div:first-child{display:grid}.sheet-heading span{font-size:8px;font-weight:800;letter-spacing:1.1px;color:#17a077}.sheet-heading h2{font:800 22px Manrope;letter-spacing:-.4px;margin:4px 0 0}.sheet-icon{width:42px;height:42px;border-radius:13px;background:#e5f7f0;color:#149270;display:grid;place-items:center}.sheet-icon svg{width:21px}.sheet-subtitle{font-size:10px;color:#81908d;margin:5px 0 19px}.login-sheet form>label,.password-label label{display:block;font-size:10px;font-weight:700;margin:0 0 7px;color:#334c48}.password-label{display:flex;align-items:center;justify-content:space-between}.password-label a{font-size:9px;margin-bottom:7px}.login-field{height:49px;border:1.5px solid #e0e8e4;border-radius:14px;display:flex;align-items:center;padding:0 13px;margin-bottom:14px;background:#fbfcfa;transition:.2s}.login-field:focus-within{border-color:#19a87c;background:#fff;box-shadow:0 0 0 4px #19a87c12}.login-field>svg{width:17px;color:#7d8e8a}.login-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:0 10px;color:#173b35;font-size:11px}.field-status{width:19px;height:19px;border-radius:50%;background:#dff5ec;color:#15926f;display:grid;place-items:center}.field-status svg{width:11px}.password-toggle{background:none;color:#83918e;padding:4px}.password-toggle svg{width:17px}.remember{display:flex!important;align-items:center;gap:7px!important;font-size:9px!important;color:#687a76!important;margin:0!important;font-weight:500!important}.remember input{accent-color:#16a078;width:14px;height:14px}.login-error{font-size:9px;color:#d45353;min-height:14px;margin:7px 0}.login-submit{height:51px;width:100%;border-radius:14px;background:linear-gradient(110deg,#08705d,#19aa7d);color:#fff;font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 11px 24px #15977035;transition:.2s}.login-submit:hover{transform:translateY(-1px);box-shadow:0 14px 27px #15977045}.login-submit svg{width:17px}.login-submit.loading span{font-size:0}.login-submit.loading span:after{content:"Memeriksa akun...";font-size:11px}.register-copy{text-align:center;font-size:10px;color:#788783;margin:17px 0 14px}.login-trust{border-top:1px solid #edf1ef;padding-top:13px;display:flex;align-items:center;justify-content:center;gap:12px;color:#92a09d}.login-trust span{display:flex;align-items:center;gap:4px;font-size:8px}.login-trust svg{width:11px;color:#159370}.login-trust>i{width:3px;height:3px;background:#cbd5d1;border-radius:50%}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@media(max-height:760px){.login-visual{height:345px}.login-copy{margin-top:22px}.login-person{width:205px}.login-sheet{padding-top:9px}.sheet-handle{margin-bottom:12px}.sheet-subtitle{margin-bottom:13px}.login-field{height:45px;margin-bottom:10px}.register-copy{margin:12px 0 10px}}@media(min-width:700px){.login-page{min-height:860px}.login-visual{height:390px}}.ppob-page{background:#f4f7f4;padding-bottom:90px}.ppob-hero{height:290px;background:linear-gradient(145deg,#063d39,#08715e);padding:25px 22px;color:#fff;position:relative;overflow:hidden}.ppob-hero:after{content:"";position:absolute;width:240px;height:240px;border:1px solid #ffffff12;border-radius:50%;right:-85px;top:12px;box-shadow:0 0 0 38px #ffffff08,0 0 0 76px #ffffff05}.topline{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}.header-actions{display:flex;gap:9px}.round-btn,.avatar{width:40px;height:40px;border-radius:13px;background:#ffffff1c;color:#fff;display:grid;place-items:center}.round-btn svg{width:19px}.avatar{background:#9ce6c7;color:#075045;font-weight:800}.welcome{margin-top:31px;position:relative;z-index:2}.welcome p{font-size:12px;color:#bee0d8;margin:0 0 6px}.welcome h1{font:800 29px/1.2 Manrope;letter-spacing:-.8px;margin:0 0 8px}.welcome span{font-size:11px;color:#b7d8d0}.hero-orbit{position:absolute;right:40px;bottom:52px;width:54px;height:54px;background:#ffd16d;color:#805909;border-radius:19px;display:grid;place-items:center;transform:rotate(8deg);z-index:1;box-shadow:0 12px 30px #0003}.hero-orbit svg{width:29px}.page-content{padding:0 19px}.home-content{margin-top:-42px;position:relative;z-index:3}.wallet-card{height:105px;border-radius:20px;background:#fff;padding:18px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 12px 32px #0637321c}.wallet-card span{font-size:10px;color:#72827f}.wallet-card h2{font:800 22px Manrope;margin:5px 0 2px}.wallet-card small{font-size:9px;color:#98a5a2}.wallet-card button{background:#e2f7ef;color:#108765;border-radius:13px;padding:10px 12px;display:grid;justify-items:center;gap:3px;font-size:8px;font-weight:700}.wallet-card button svg{width:18px}.quick-bar{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:17px;margin-top:12px;padding:13px 6px;border:1px solid #edf1ee}.quick-bar button{background:none;display:grid;justify-items:center;gap:6px;font-size:8px;color:#5f716d}.quick-bar svg{width:19px;color:#11956e}.section-title{display:flex;justify-content:space-between;align-items:center;margin:23px 2px 12px}.section-title h3{font:800 16px Manrope;margin:0}.section-title p{font-size:9px;color:#8c9996;margin:2px 0 0}.section-title button{background:none;color:#11956e;font-size:10px;font-weight:700}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 8px;background:#fff;border:1px solid #ebf0ed;border-radius:20px;padding:17px 10px}.service-item{background:none;display:flex;flex-direction:column;align-items:center;min-width:0}.service-item strong{font-size:9px;margin-top:5px;white-space:nowrap}.service-item span{font-size:7px;color:#96a19f;margin-top:2px;white-space:nowrap}.service-3d{width:55px;height:55px;background-image:url(/service-icons.png);background-size:400% 200%;background-position:calc(var(--x)*33.333%) calc(var(--y)*100%);background-repeat:no-repeat;filter:drop-shadow(0 5px 7px #08483e21)}.service-3d.big{width:84px;height:84px}.promo-card{height:145px;margin-top:18px;border-radius:20px;background:linear-gradient(125deg,#073d39,#096452);color:#fff;padding:18px;display:flex;justify-content:space-between;overflow:hidden}.promo-card>div:first-child{z-index:2}.promo-card span{font-size:8px;color:#89d9b9;font-weight:800;letter-spacing:1px}.promo-card h3{font:800 18px/1.25 Manrope;margin:7px 0 3px}.promo-card p{font-size:8px;color:#bcd8d2;margin:0 0 8px}.promo-card button{background:none;color:#8de0bf;padding:0;font-size:9px;font-weight:700;display:flex;gap:4px;align-items:center}.promo-card button svg{width:12px}.promo-visual{width:98px;height:98px;border-radius:50%;background:#8ce2be1f;display:grid;place-items:center;margin:6px -2px 0 0;box-shadow:0 0 0 18px #8ce2be0d}.promo-visual svg{width:52px;height:52px;color:#8de0bf}.empty-state{background:#fff;border:1px solid #ebefed;border-radius:18px;text-align:center;padding:24px}.empty-state>div{width:48px;height:48px;margin:0 auto 9px;background:#e7f7f1;color:#169672;border-radius:15px;display:grid;place-items:center}.empty-state svg{width:23px}.empty-state strong{font-size:12px}.empty-state p{font-size:9px;color:#8c9996;line-height:1.5;margin:5px auto 0;max-width:245px}.empty-state.compact{margin-bottom:25px}.empty-state.full{margin-top:70px;padding:38px 22px}.empty-state.full button{margin-top:18px;background:#118b6b;color:#fff;border-radius:12px;padding:11px 18px;font-size:11px;font-weight:700}.inner-header{height:92px;background:#073f3a;color:#fff;padding:24px 20px;display:grid;grid-template-columns:42px 1fr 42px;align-items:center}.inner-header h1{text-align:center;font:800 18px Manrope;margin:0}.back-btn{width:40px;height:40px;border-radius:12px;background:#ffffff1a;color:#fff;display:grid;place-items:center}.back-btn svg{width:20px}.inner-content{padding-top:20px}.search-box{height:48px;border:1px solid #e2e9e5;background:#fff;border-radius:14px;display:flex;align-items:center;padding:0 13px}.search-box svg{width:18px;color:#81908d}.search-box input{border:0;outline:0;flex:1;padding-left:9px;font-size:11px}.category-chips{display:flex;gap:7px;margin:14px 0 18px;overflow:auto}.category-chips button,.transaction-tabs button{background:#fff;border:1px solid #e1e8e4;border-radius:20px;padding:8px 13px;font-size:9px;white-space:nowrap;color:#697a76}.category-chips button.active,.transaction-tabs button.active{background:#0e8e6c;border-color:#0e8e6c;color:#fff}.service-list{display:grid;gap:9px}.service-row{background:#fff;border:1px solid #e8eeea;border-radius:16px;padding:10px 13px;display:flex;align-items:center;text-align:left}.service-row .service-3d{width:58px;height:58px}.service-row div:nth-child(2){display:grid;flex:1;margin-left:10px}.service-row strong{font-size:12px}.service-row span{font-size:9px;color:#8b9895;margin-top:3px}.service-row>svg{width:17px;color:#9aa5a2}.transaction-tabs{display:flex;justify-content:space-between;border-bottom:1px solid #e0e7e3;padding-bottom:13px}.transaction-tabs button{border:0;background:transparent;padding:7px 11px}.profile-card{background:linear-gradient(135deg,#075149,#08725e);border-radius:19px;padding:18px;color:#fff;display:flex;align-items:center;gap:12px}.profile-avatar{width:53px;height:53px;background:#a0e6ca;color:#075046;border-radius:17px;display:grid;place-items:center;font-weight:800;font-size:17px}.profile-card>div:nth-child(2){display:grid;flex:1}.profile-card strong{font-size:14px}.profile-card span{font-size:9px;color:#b9d7d1;margin-top:2px}.profile-card small{font-size:8px;color:#8fe0c0;margin-top:6px;display:flex;gap:3px;align-items:center}.profile-card small svg{width:11px}.profile-card>button{background:#ffffff1a;color:#fff;border-radius:10px;width:34px;height:34px}.profile-card>button svg{width:15px}.account-group{background:#fff;border:1px solid #e6ece8;border-radius:18px;margin-top:17px;padding:7px 14px}.account-group h3{font-size:10px;color:#8b9996;text-transform:uppercase;letter-spacing:.5px;margin:9px 3px}.account-row{width:100%;background:none;border-top:1px solid #edf1ef;padding:12px 2px;display:flex;align-items:center;gap:11px;text-align:left}.account-row>svg:first-child{width:18px;color:#118d6b}.account-row>svg:last-child{width:15px;color:#9ba6a3}.account-row div{display:grid;flex:1}.account-row strong{font-size:11px}.account-row span{font-size:8px;color:#909d99;margin-top:2px}.logout-btn{width:100%;margin:18px 0 10px;padding:13px;background:#fff0f0;color:#d55353;border-radius:13px;font-size:11px;font-weight:700;display:flex;justify-content:center;gap:7px}.logout-btn svg{width:16px}.detail-content{padding-top:22px}.detail-service{background:linear-gradient(145deg,#e3f8f0,#fff);border:1px solid #dcefe7;border-radius:19px;padding:14px 18px;display:flex;align-items:center;gap:16px}.detail-service h2{font:800 18px Manrope;margin:0}.detail-service p{font-size:10px;color:#7e8e8a;margin:3px 0}.purchase-form{margin-top:22px}.purchase-form>label{display:block;font-size:11px;font-weight:700;margin-bottom:17px}.field{height:51px;margin-top:8px;background:#fff;border:1px solid #dfe7e3;border-radius:14px;display:flex;align-items:center;padding:0 13px}.field:focus-within{border-color:#159572;box-shadow:0 0 0 3px #15957214}.field>svg{width:18px;color:#82918e}.field input{border:0;outline:0;flex:1;padding:0 9px;font-size:11px;min-width:0}.field button{background:none;color:#159572}.field button svg{width:18px}.info-box{display:flex;gap:9px;background:#edf8f4;color:#5d746e;border-radius:13px;padding:12px}.info-box svg{width:16px;flex:none;color:#159572}.info-box p{font-size:9px;line-height:1.5;margin:0}.form-error{font-size:10px;color:#d05252;line-height:1.4;min-height:16px}.continue-btn{height:52px;width:100%;background:linear-gradient(110deg,#08715d,#19aa7d);color:#fff;border-radius:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}.continue-btn svg{width:17px}.continue-btn:disabled{opacity:.6}.bottom-nav{position:absolute;bottom:0;left:0;right:0;height:78px;background:#fff;display:flex;justify-content:space-around;align-items:center;border-top:1px solid #e5ebe8;z-index:20}.bottom-nav>button{background:none;color:#92a09d;display:grid;justify-items:center;gap:4px;font-size:8px}.bottom-nav>button svg{width:20px}.bottom-nav>button.active{color:#11906d}.bottom-nav .scan-btn{width:50px;height:50px;border-radius:17px;background:linear-gradient(145deg,#08705d,#19aa7d);color:#fff;transform:translateY(-15px);box-shadow:0 8px 20px #11976e4d;display:grid;place-items:center}.bottom-nav .scan-btn svg{width:23px}@media(min-width:700px){.ppob-page{min-height:860px}.bottom-nav{position:absolute}}.welcome h1 em{font-style:normal;color:#91e3c2}.hero-person{position:absolute;right:27px;bottom:27px;width:105px;height:145px;z-index:1}.person-head{width:48px;height:53px;border-radius:45% 45% 48% 48%;background:#f2b98d;margin:auto;position:relative;box-shadow:inset 0 12px #143b38}.person-head:after{content:"";position:absolute;width:9px;height:5px;border-bottom:2px solid #7b4c3d;border-radius:50%;left:20px;bottom:12px}.person-body{height:91px;margin-top:-4px;border-radius:35px 35px 12px 12px;background:linear-gradient(145deg,#ffd06c,#f2ae3e);display:grid;place-items:center;color:#08443d;transform:rotate(-3deg);box-shadow:0 12px 22px #002b2726}.person-body svg{width:38px;height:38px;background:#fff;padding:8px;border-radius:11px;transform:rotate(7deg)}.more-service>div{width:55px;height:55px;border-radius:18px;background:linear-gradient(145deg,#e1f6ee,#f7fffc);color:#168c6c;display:grid;place-items:center;box-shadow:inset 0 0 0 1px #d4eee4}.more-service svg{width:24px}.bottom-nav{position:fixed;left:50%;right:auto;width:min(100%,430px);transform:translate(-50%)}.provider-result{min-height:67px;background:#fff;border:1px solid #e1e9e5;border-radius:15px;margin:-4px 0 16px;padding:10px 12px;display:flex;align-items:center;gap:11px}.provider-result>div:nth-child(2){display:grid;flex:1}.provider-result strong{font-size:11px}.provider-result span{font-size:9px;color:#899793;margin-top:3px}.provider-result>svg{width:18px;color:#15a078}.detect-icon{width:42px;height:42px;border-radius:12px;background:#e7f7f1;color:#159572;display:grid;place-items:center}.detect-icon svg{width:19px}.provider-logo{width:46px;height:46px;background:#fff;border:1px solid #e6ece9;border-radius:13px;display:grid;place-items:center;padding:6px;overflow:hidden}.provider-logo img{max-width:100%;max-height:100%;object-fit:contain}.provider-logo b{font-size:8px;text-align:center}.provider-logo.large{width:60px;height:60px;padding:8px}.product-content{padding-top:22px}.selected-provider{background:#fff;border:1px solid #e2eae6;border-radius:18px;padding:14px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 25px #083e3810}.selected-provider>div:nth-child(2){display:grid;flex:1}.selected-provider span{font-size:9px;color:#889692}.selected-provider strong{font-size:14px;margin-top:2px}.selected-provider small{font-size:9px;color:#6e7f7b;margin-top:2px}.selected-provider>svg{width:19px;color:#18a37b}.product-heading{margin:24px 2px 13px}.product-heading h2{font:800 17px Manrope;margin:0}.product-heading p{font-size:9px;color:#8d9996;margin:4px 0}.empty-products{background:#fff;border:1px dashed #cedbd5;border-radius:18px;padding:34px 23px;text-align:center;display:grid;justify-items:center}.empty-products>svg{width:40px;height:40px;padding:9px;background:#e8f7f1;color:#159572;border-radius:13px;margin-bottom:10px}.empty-products strong{font-size:12px}.empty-products p{font-size:9px;line-height:1.55;color:#879590;margin:6px 0 0}