:root{color-scheme:dark;font-family:Inter,"Segoe UI",Arial,sans-serif;color:#f5f8ff;background:#070c16}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center}button{font:inherit;cursor:pointer;color:inherit;border:0}button:focus-visible{outline:2px solid #35c8ff;outline-offset:4px}button:hover{filter:brightness(1.15)}[hidden]{display:none!important}.phone{width:390px;height:844px;max-width:100%;position:relative;overflow:hidden;background:#0a1020;box-shadow:0 25px 100px #0009;border:1px solid #263447;border-radius:30px;display:flex;flex-direction:column}header{padding:25px 22px 0;background:#10192a;z-index:2}.brand{display:flex;align-items:center;gap:11px}.brand-icon{width:36px;height:42px;border-radius:12px;background:#1de9b615;color:#1de9b6;display:grid;place-items:center;font-size:32px;border:1px solid #1de9b63a}h1{font-size:19px;letter-spacing:-.6px;margin:0}header p{font-size:11px;color:#8da4bf;margin:5px 0}.demo{font-size:8px;letter-spacing:1.5px;color:#8da4bf;border:1px solid #394458;border-radius:4px;padding:4px;margin-left:auto}.city{display:flex;justify-content:space-between;font-size:11px;padding:20px 0 17px}.online{font-size:9px;color:#1de9b6}.view{display:none;flex:1;min-height:0;position:relative}.view.active{display:block}.stats{display:flex;justify-content:space-between;padding:13px 15px;background:#142033;color:#9eb0c7;font-size:9px;position:relative;z-index:2}.stats strong,.stats b{color:#f5f8ff;font-weight:600}.stats i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#1de9b6;margin-right:3px}.map{position:absolute;inset:35px 0 0;overflow:hidden}.map-art{width:100%;height:100%;opacity:.9}.map:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#0a1020 0%,transparent 55%)}.map-caption{position:absolute;top:15px;left:20px;font-size:8px;color:#8296ad;letter-spacing:2px}.marker{position:absolute;width:39px;height:39px;border-radius:50%;background:#142b32;border:1px solid #1de9b67a;box-shadow:0 3px 12px #0007;color:#1de9b6;z-index:2;transform:translate(-50%,-50%);padding:7px;transition:left .4s,top .4s,background .2s}.marker.selected{background:#1de9b6;color:#071d22;box-shadow:0 0 0 6px #1de9b61a,0 0 22px #1de9b63a}.bike{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.controls{position:absolute;right:17px;top:128px;display:grid;gap:8px;z-index:4}.controls button{height:39px;width:39px;background:#121a2edb;border:1px solid #3a4a5d;border-radius:12px;font-size:23px;backdrop-filter:blur(12px)}.controls button[aria-pressed=true]{color:#1de9b6;border-color:#1de9b6}#location{position:absolute;top:43%;left:48%;height:58px;width:58px;transform:translate(-50%,-50%);border:1px solid #35c8ff45;background:#35c8ff14;border-radius:50%;display:grid;place-items:center;z-index:2}#location span{height:15px;width:15px;background:#35c8ff;border:3px solid #e5f8ff;border-radius:50%;box-shadow:0 0 18px #35c8ff99}.you{position:absolute;left:39%;top:49%;font-size:9px;color:#c4e8fa;z-index:2}#location.pulse{animation:pulse .9s ease-out}@keyframes pulse{50%{box-shadow:0 0 0 24px #35c8ff1a}}#parking{position:absolute;top:19%;left:12%;width:130px;height:85px;transform:rotate(-20deg);background:#1de9b621;border:1px dashed #1de9b6;border-radius:15px;z-index:1}#parking span{position:absolute;top:27px;left:18px;color:#67f5d2;font-size:13px}.bottom-panel{position:absolute;bottom:0;left:0;right:0;padding:15px 20px 8px;z-index:5;background:linear-gradient(transparent,#0a1020 28%)}#intro{padding:27px 2px 20px}.eyebrow{color:#1de9b6;font-size:8px;letter-spacing:1.8px;font-weight:600}h2{font-size:25px;letter-spacing:-.8px;margin:11px 0}#intro p{font-size:11px;color:#8da4bf;line-height:1.7;margin:0}.primary{width:100%;height:54px;display:flex;align-items:center;justify-content:center;gap:13px;border-radius:15px;background:#1de9b6;color:#08251f;font-size:14px;font-weight:700;box-shadow:0 6px 24px #1de9b61a}.primary span{font-size:23px}.primary span:last-child{margin-left:auto}.primary span:first-child{margin-right:auto}.primary{padding:0 19px}.simulation-note{text-align:center;font-size:9px;color:#7890a9;margin:11px 0 5px}.glass{background:rgba(18,26,46,.92);backdrop-filter:blur(18px);border:1px solid #314158;border-radius:20px;padding:15px 17px;margin-bottom:13px}.card-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#8da4bf}.card-top button{font-size:21px;background:none;color:#8da4bf;padding:0 0 0 14px}.vehicle-heading{display:flex;align-items:center;gap:20px;padding:9px 0 16px}.vehicle-heading h2{font-size:21px;margin:3px 0 6px}.vehicle-art{width:80px;height:52px;color:#1de9b6}.available{font-size:9px;color:#1de9b6;margin:0}.metrics{display:flex;justify-content:space-between;border-top:1px solid #28384e;padding-top:13px}.metrics small{display:block;font-size:9px;color:#8da4bf;margin-bottom:6px}.metrics strong{font-size:14px;font-weight:600}.price{font-size:16px;margin-top:16px}.price span{font-size:10px;color:#8da4bf}nav{height:72px;flex-shrink:0;display:flex;background:#111a2a;border-top:1px solid #283449;z-index:6;padding-bottom:7px}nav button{flex:1;background:none;color:#7c91ac;font-size:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px}nav button span{font-size:23px;line-height:26px}nav .selected{color:#1de9b6}.content{padding:27px 21px}.content>h2{font-size:30px}.muted{color:#8da4bf;font-size:12px}.trip{display:flex;gap:13px;border:1px solid #2a384d;background:#141e30;border-radius:17px;margin-top:17px;padding:19px 14px}.trip-icon{font-size:22px;color:#1de9b6}.trip small{font-size:10px;color:#8da4bf}.trip h3{font-size:13px;margin:11px 0}.trip p{font-size:12px;color:#8da4bf}.trip b{margin-left:65px;color:#f5f8ff}.status{font-size:9px;color:#1de9b6;background:#1de9b610;padding:4px 8px;border-radius:5px}.demo-note{text-align:center;font-size:10px;margin-top:26px;line-height:1.7}.profile{text-align:center;padding:29px 0}.avatar{display:grid;place-items:center;width:78px;height:78px;margin:auto;border:1px solid #1de9b657;border-radius:26px;background:#163b3d;color:#1de9b6;font-size:26px}.profile h2{font-size:22px}.menu{background:#141e30;border:1px solid #2a384d;border-radius:18px;padding:0 18px}.menu button{background:none;padding:20px 0;width:100%;text-align:left;font-size:13px;border-bottom:1px solid #293549}.menu button:last-child{border:0}.menu span{float:right;color:#1de9b6}dialog{width:340px;max-width:calc(100% - 32px);padding:35px 23px 24px;background:#121a2e;color:#f5f8ff;border:1px solid #3a5369;border-radius:25px;text-align:center;box-shadow:0 20px 100px #000b}dialog::backdrop{background:#030914bd;backdrop-filter:blur(7px)}dialog h2{margin-top:19px}dialog p{color:#8da4bf;font-size:12px;line-height:1.7}.modal-close{position:absolute;top:10px;right:15px;background:none;font-size:26px;color:#8da4bf}.scan-frame{width:210px;height:210px;border:2px solid #1de9b6;border-radius:22px;margin:25px auto;position:relative;background:repeating-linear-gradient(0deg,transparent,transparent 19px,#1de9b609 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,#1de9b609 20px);display:grid;place-items:center}.qr{font-size:130px;line-height:1;color:#8da4bf44}.scan-line{position:absolute;left:10px;right:10px;top:50%;height:1px;background:#1de9b6;box-shadow:0 0 15px #1de9b6}.scan-frame.detected{background:#1de9b617}.detected .qr{font-size:80px;color:#1de9b6}.detected .scan-line{display:none}#toast{position:absolute;left:20px;right:20px;bottom:88px;background:#e7fff7;color:#0a3026;border-radius:12px;padding:14px;text-align:center;font-size:12px;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:0 6px 35px #0008}#toast.show{opacity:1}@media(max-width:500px){.phone{width:100%;height:100dvh;border:0;border-radius:0}}@media(min-width:501px){body{padding:24px}}@media(max-height:740px){header{padding-top:14px}.city{padding:12px 0}.glass{padding:10px 14px}.vehicle-heading{padding:3px 0 8px}.metrics{padding-top:8px}.price{margin-top:9px}.content{overflow:auto}.bottom-panel{padding-top:5px}#intro{padding-top:10px}}

/* Penyesuaian setempat V1.1 */
.brand>div{min-width:0;flex:1}h1{font-size:17px;line-height:1.2;max-width:220px}.vehicle-heading h2{font-size:18px}.price small{display:block;font-size:9px;color:#8da4bf;margin-bottom:6px}.map-caption{z-index:3}.stats{gap:8px;font-size:8.5px}.city{gap:8px}.online{font-size:8px}

/* Paparan demonstrasi tambahan */
.content{overflow-y:auto}.weather{display:flex;width:100%;align-items:center;gap:10px;text-align:left;background:#121a2e;border:1px solid #2a3d52;border-radius:12px;padding:9px 11px;margin:0 0 12px}.weather>span:first-child{font-size:24px;color:#1de9b6}.weather>span:nth-child(2){flex:1}.weather strong{font-size:10px}.weather small{display:block;font-size:8px;color:#8da4bf;margin-top:3px}.weather b{font-size:17px;color:#1de9b6}.cluster{position:absolute;left:75%;top:37%;z-index:3;border:1px solid #35c8ff;background:#173449;color:#c5f1ff;border-radius:50%;width:42px;height:42px;font-weight:700;font-size:13px}#intro h2{font-size:22px}.extra h2{font-size:26px}.back{background:none;color:#1de9b6;padding:0 0 12px;font-size:12px}.coupon-tabs{display:flex;gap:8px;margin:20px 0}.coupon-tabs button,.amounts button{background:#17243a;border:1px solid #35465e;border-radius:10px;padding:11px;font-size:12px}.coupon-tabs button{flex:1}.coupon-tabs .chosen,.amounts [aria-pressed=true]{border-color:#1de9b6;color:#1de9b6;background:#1de9b612}.coupon{border:1px solid #314158;border-left:3px solid #1de9b6;background:#121a2e;border-radius:15px;padding:17px;margin-bottom:13px}.coupon h3{font-size:19px;margin:12px 0}.coupon p{font-size:12px;color:#b0c3d9}.coupon small{font-size:10px;color:#8da4bf}.coupon button{display:block;background:none;padding:13px 0 0;color:#1de9b6;font-size:12px}.empty{padding:25px 0;line-height:1.8}.member-card,.wallet-card{background:#121a2e;border:1px solid #1de9b64a;border-radius:20px;padding:24px;margin:22px 0}.member-card h3{font-size:24px;color:#1de9b6;margin:15px 0}.member-card p{font-size:13px}.member-card small,.wallet-card small{display:block;color:#8da4bf;font-size:11px}.member-card strong{display:block;font-size:27px;margin:8px 0}.member-card progress{width:100%;height:7px;accent-color:#1de9b6;margin:13px 0}.member-stats{display:flex;gap:12px}.member-stats>div{flex:1;background:#121a2e;border:1px solid #29394f;border-radius:14px;padding:17px 12px}.member-stats small{font-size:10px;color:#8da4bf}.member-stats strong{display:block;margin-top:8px;font-size:21px}.section-title{font-size:15px;margin-top:26px}.benefits{list-style:none;padding:0}.benefits li{padding:14px 0;border-bottom:1px solid #28384e;font-size:13px}.benefits li:before{content:'✓';color:#1de9b6;margin-right:14px}.wallet-card>span{font-size:13px;color:#8da4bf}.wallet-card strong{display:block;font-size:40px;margin:18px 0;color:#1de9b6}.secondary{width:100%;border:1px solid #34475f;border-radius:15px;background:#121a2e;padding:17px;margin-top:12px;font-size:13px}.detail small{font-size:10px;color:#8da4bf}.temperature{display:block;font-size:48px;color:#1de9b6;margin:18px 0}.amounts{display:flex;justify-content:center;gap:9px;margin:22px 0}.transactions{list-style:none;padding:0;text-align:left;font-size:12px}.transactions li{display:flex;justify-content:space-between;gap:10px;padding:18px 0;border-bottom:1px solid #29394f}.transactions b{white-space:nowrap}#demo-feedback{color:#1de9b6;min-height:20px;margin-bottom:0}#demo-dialog{max-height:calc(100dvh - 40px);overflow-y:auto}