:root{--w:440px;--rail:0px;--b1:#0e8bea;--b2:#0b6fc7;--bg:#f2f5fa;--c:#fff;--t:#172033;--m:#6b7a93;--ln:#e5eaf2;--ok:#10b981;--warn:#f59e0b;--bad:#ef4444;--sh:0 4px 16px #1c3a6e14}
@media(prefers-color-scheme:dark){:root{--bg:#0b1220;--c:#121c30;--t:#e8edf7;--m:#8e9bb5;--ln:#22304a;--sh:0 4px 16px #0006}}
[hidden]{display:none!important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%}
body{font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--t);overscroll-behavior-y:contain}
#app{max-width:var(--w);margin:0 auto;min-height:100%;position:relative;background:var(--bg)}
#view{padding-bottom:calc(86px + env(safe-area-inset-bottom));min-height:100vh}
.hero{background:linear-gradient(160deg,var(--b1),var(--b2));color:#fff;padding:calc(18px + env(safe-area-inset-top)) 18px 70px;border-radius:0 0 28px 28px}
.hero .row{display:flex;align-items:center;gap:12px}.av{width:44px;height:44px;border-radius:50%;background:#fff3;display:grid;place-items:center;font-weight:700;font-size:18px}
.hero h1{margin:0;font-size:17px}.hero small{opacity:.85}.grow{flex:1;min-width:0}
.sw{display:flex;align-items:center;gap:6px;background:#fff2;border:0;color:#fff;border-radius:99px;padding:7px 12px;font:inherit;font-size:13px}.dot{width:9px;height:9px;border-radius:50%;background:#9ca3af}.dot.on{background:#34d399;box-shadow:0 0 0 3px #34d39955}
.wallet{margin:-48px 16px 0;background:var(--c);border-radius:20px;padding:16px;box-shadow:var(--sh)}
.wallet .lbl{color:var(--m);font-size:13px;display:flex;justify-content:space-between;align-items:center}.wallet .amt{font-size:28px;font-weight:800;margin:2px 0 10px;letter-spacing:-.5px}
.eye{border:0;background:none;font-size:18px;color:var(--m)}.mini{display:flex;gap:10px}.mini div{flex:1;background:var(--bg);border-radius:14px;padding:9px 12px}.mini b{display:block;font-size:18px}.mini span{color:var(--m);font-size:12px}
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:18px 16px 4px}.qa button{border:0;background:none;color:var(--t);font:inherit;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:6px}
.qa i{font-style:normal;width:52px;height:52px;border-radius:18px;display:grid;place-items:center;font-size:24px;background:var(--c);box-shadow:var(--sh)}
h2{font-size:15px;margin:20px 16px 8px}.sec{display:flex;justify-content:space-between;align-items:center}.sec a{color:var(--b1);font-size:13px;margin-right:16px;text-decoration:none}
.card{background:var(--c);border-radius:18px;padding:14px;margin:0 16px 12px;box-shadow:var(--sh)}.card.tap{cursor:pointer}.card.tap:active{transform:scale(.99)}
.pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;background:var(--bg);color:var(--m)}.pill.ok{background:#10b98122;color:#0c9d70}.pill.warn{background:#f59e0b22;color:#c77d05}.pill.bad{background:#ef444422;color:#d33}.pill.b{background:#0e8bea22;color:var(--b1)}
.t1{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.t1 b{font-size:15px}.sub{color:var(--m);font-size:13px;margin-top:2px}
.bar{display:flex;gap:4px;margin-top:10px}.bar i{flex:1;height:5px;border-radius:9px;background:var(--ln)}.bar i.on{background:var(--b1)}
.btn{display:block;width:100%;border:0;border-radius:16px;padding:14px;font:inherit;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--b1),var(--b2));box-shadow:0 8px 18px #0e8bea44}.btn:disabled{opacity:.55}.btn.g{background:var(--c);color:var(--t);box-shadow:none;border:1.5px solid var(--ln)}.btn.red{background:var(--bad);box-shadow:none}.btn.green{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 18px #10b98144}
.rowb{display:flex;gap:10px;margin-top:10px}.rowb>*{flex:1}
.top{display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 14px 12px;background:linear-gradient(160deg,var(--b1),var(--b2));color:#fff;position:sticky;top:0;z-index:5}.top button{border:0;background:#fff2;color:#fff;width:36px;height:36px;border-radius:50%;font-size:18px}.top b{font-size:16px}
.kv{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--ln)}.kv:last-child{border:0}.kv i{font-style:normal;width:24px;text-align:center}.kv span{color:var(--m);font-size:12px;display:block}.kv div{white-space:pre-wrap;overflow-wrap:anywhere}
.steps{display:flex;justify-content:space-between;margin:4px 0 0;position:relative}.stp{flex:1;text-align:center;font-size:11px;color:var(--m)}.stp u{display:grid;place-items:center;width:28px;height:28px;margin:0 auto 4px;border-radius:50%;background:var(--ln);text-decoration:none;font-size:13px}.stp.on u{background:var(--b1);color:#fff}.stp.cur u{box-shadow:0 0 0 4px #0e8bea33;background:var(--b1);color:#fff}.stp.cur{color:var(--t);font-weight:600}
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--w);padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--ln);z-index:9}
nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--w);display:flex;background:var(--c);border-top:1px solid var(--ln);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:7;box-shadow:0 -6px 20px #0001}
nav button{flex:1;border:0;background:none;color:var(--m);font:inherit;font-size:11px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;position:relative}nav button i{font-style:normal;font-size:22px}nav button.on{color:var(--b1);font-weight:700}
nav b{position:absolute;top:0;right:24%;min-width:17px;height:17px;border-radius:9px;background:var(--bad);color:#fff;font-size:10px;display:grid;place-items:center;padding:0 4px}
#sheet{position:fixed;inset:0;background:#0007;z-index:20;display:flex;align-items:flex-end;justify-content:center}#sheet[hidden]{display:none}
.sh{background:var(--c);width:100%;max-width:var(--w);border-radius:24px 24px 0 0;padding:8px 18px calc(18px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto;animation:up .22s ease}@keyframes up{from{transform:translateY(40px);opacity:.4}}
.sh .grab{width:40px;height:4px;border-radius:9px;background:var(--ln);margin:6px auto 12px}.sh h3{margin:0 0 10px}
label.f{display:block;font-size:13px;color:var(--m);margin-bottom:12px}input.in,textarea.in,select.in{width:100%;font:inherit;padding:12px;margin-top:5px;border:1.5px solid var(--ln);border-radius:14px;background:var(--bg);color:var(--t)}textarea.in{min-height:84px;resize:vertical}
.ph{display:flex;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--ln);border-radius:16px;min-height:110px;color:var(--m);overflow:hidden;cursor:pointer}.ph img{width:100%;max-height:220px;object-fit:cover}
#toast{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top));transform:translate(-50%,-160%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .25s,opacity .2s,visibility .25s;background:#0f172a;color:#fff;padding:12px 16px;border-radius:14px;z-index:30;max-width:92vw;white-space:pre-wrap;font-size:14px;box-shadow:0 10px 30px #0006}#toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}#toast.ok{background:#047857}#toast.warn{background:#b45309}#toast.bad{background:#b91c1c}
.banner{margin:12px 16px 0;padding:11px 14px;border-radius:14px;background:#f59e0b22;color:#b45309;font-size:13px}
.chat{display:flex;flex-direction:column;gap:6px;padding:14px 14px calc(170px + env(safe-area-inset-bottom));min-height:60vh}.bub{max-width:80%;padding:9px 12px;border-radius:16px;background:var(--c);box-shadow:var(--sh);white-space:pre-wrap;overflow-wrap:anywhere}.bub.me{align-self:flex-end;background:var(--b1);color:#fff}.bub small{display:block;opacity:.6;font-size:10px;margin-top:2px}.bub em{display:block;font-size:11px;opacity:.7;font-style:normal;margin-bottom:2px}
.cin{display:flex;gap:8px;align-items:center}.cin .in{margin:0;flex:1}.cin button{width:46px;height:46px;border-radius:50%;border:0;background:var(--b1);color:#fff;font-size:18px}.cin .att{background:var(--c);color:var(--t);border:1.5px solid var(--ln)}
.emp{text-align:center;color:var(--m);padding:36px 24px}.emp i{font-style:normal;font-size:44px;display:block;margin-bottom:6px}
.sk{height:84px;margin:0 16px 12px;border-radius:18px;background:linear-gradient(90deg,var(--c),var(--ln),var(--c));background-size:200% 100%;animation:sk 1.2s infinite}@keyframes sk{to{background-position:-200% 0}}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 16px 12px}.cats div{background:var(--c);border-radius:14px;padding:10px 12px;box-shadow:var(--sh)}.cats span{color:var(--m);font-size:12px}.cats b{display:block}

/* ---- lazy list, chip, chat v22 ---- */
.tail{min-height:8px}.end{text-align:center;color:var(--m);font-size:12px;padding:14px 0;letter-spacing:4px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:12px 16px 4px;scrollbar-width:none;position:sticky;top:calc(46px + env(safe-area-inset-top));z-index:4;background:var(--bg)}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1.5px solid var(--ln);background:var(--c);color:var(--t);font:inherit;font-size:13px;padding:7px 14px;border-radius:99px;display:flex;gap:6px;align-items:center}.chip u{text-decoration:none;font-size:11px;background:var(--bg);color:var(--m);border-radius:9px;padding:0 7px}
.chip.on{background:var(--b1);border-color:var(--b1);color:#fff}.chip.on u{background:#fff3;color:#fff}
.crow{display:flex;gap:12px;align-items:center}.av2{width:44px;height:44px;flex:none;border-radius:50%;background:linear-gradient(135deg,var(--b1),var(--b2));color:#fff;display:grid;place-items:center;font-weight:700}
.cprv{color:var(--m);font-size:13px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cprv.un{color:var(--t);font-weight:600}.udot{width:10px;height:10px;border-radius:50%;background:var(--b1);flex:none}.crow .grow{min-width:0}
.day{align-self:center;font-size:11px;color:var(--m);background:var(--c);padding:3px 12px;border-radius:99px;margin:8px 0 4px;box-shadow:var(--sh)}
.cimg{display:block;width:100%;max-width:230px;min-height:120px;max-height:300px;object-fit:cover;border-radius:12px;margin-bottom:4px;background:var(--ln);cursor:zoom-in}
.bub.pend{opacity:.6}.ctop{min-height:4px}
.cprev{display:flex;align-items:center;gap:10px;background:var(--c);border:1.5px solid var(--ln);border-radius:14px;padding:6px 10px;margin-bottom:8px;font-size:13px;color:var(--m)}.cprev img{width:46px;height:46px;border-radius:9px;object-fit:cover}.cprev span{flex:1}.cprev button{border:0;background:var(--bg);color:var(--t);width:30px;height:30px;border-radius:50%}
.newpill{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom));z-index:8;border:0;background:var(--b1);color:#fff;padding:8px 16px;border-radius:99px;font:inherit;font-size:13px;box-shadow:0 6px 18px #0004}
#ptr{position:fixed;left:50%;top:calc(8px + env(safe-area-inset-top));transform:translate(-50%,-70px);opacity:0;width:38px;height:38px;border-radius:50%;background:var(--c);box-shadow:var(--sh);display:grid;place-items:center;z-index:25;font-size:18px;color:var(--b1);transition:transform .15s}
#ptr.rdy,#ptr.spin{opacity:1}#ptr.rdy{background:var(--b1);color:#fff}#ptr.spin{transform:translate(-50%,14px)!important;animation:rot .8s linear infinite}@keyframes rot{to{rotate:360deg}}

.tgl{flex:none;width:52px;height:30px;border-radius:99px;border:0;background:var(--ln);position:relative;transition:background .2s}.tgl::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0004;transition:transform .2s}.tgl.on{background:var(--ok)}.tgl.on::after{transform:translateX(22px)}.tgl:disabled{opacity:.6}
.av img{display:block}

/* ===== Aplikasi customer ===== */
.brand{display:flex;align-items:center;gap:10px}.brand img,.brand .lg{width:38px;height:38px;border-radius:11px;background:#fff;object-fit:contain;display:grid;place-items:center;font-weight:800;color:var(--b2)}.brand b{font-size:17px}
.top.home{padding-bottom:16px}.top .sp{flex:1}.chipbtn{border:0;background:#fff3;color:#fff;border-radius:99px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600}
.slider{position:relative;margin:14px 0 0}.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 16px 6px;scrollbar-width:none}.strip::-webkit-scrollbar{display:none}
.sl{flex:0 0 86%;scroll-snap-align:center;border-radius:20px;padding:16px;color:#fff;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;cursor:pointer;box-shadow:var(--sh)}
.sl::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:#ffffff22}.sl .bd{align-self:flex-start;background:#fff3;border-radius:99px;padding:3px 11px;font-size:12px;font-weight:700}.sl h3{margin:8px 0 2px;font-size:17px;line-height:1.25}.sl p{margin:0;font-size:12.5px;opacity:.92}.sl .em{position:absolute;right:14px;bottom:8px;font-size:38px;opacity:.9;z-index:1}.sl .cd{font-size:12px;margin-top:6px;opacity:.95}
.th-biru{background:linear-gradient(135deg,#0e8bea,#0b5fb8)}.th-hijau{background:linear-gradient(135deg,#10b981,#047857)}.th-oranye{background:linear-gradient(135deg,#f59e0b,#d9480f)}.th-ungu{background:linear-gradient(135deg,#8b5cf6,#5b21b6)}.th-merah{background:linear-gradient(135deg,#f43f5e,#be123c)}
.dots{display:flex;justify-content:center;gap:6px;margin-top:8px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--ln)}.dots i.on{background:var(--b1);width:18px;border-radius:9px}
.cats{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 4px;scrollbar-width:none}.cats::-webkit-scrollbar{display:none}
.svc{display:flex;gap:12px;align-items:center}.svc .ic{width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,var(--b1),var(--b2));color:#fff;display:grid;place-items:center;font-size:22px;flex:none}.svc .pr{font-weight:800;color:var(--b2);white-space:nowrap;text-align:right;font-size:14px}.svc .pr small{display:block;color:var(--m);font-weight:400;font-size:11px}
.lbl2{display:block;font-size:13px;color:var(--m);margin:12px 0 6px}.in,.ta{width:100%;border:1.5px solid var(--ln);background:var(--c);color:var(--t);border-radius:14px;padding:12px 14px;font:inherit}.in:focus,.ta:focus{outline:2px solid var(--b1);outline-offset:0;border-color:transparent}.ta{resize:vertical;min-height:70px}
.err{color:var(--bad);font-size:13px;margin:8px 0 0}.okx{color:#0c9d70;font-size:13px}
.stepper{display:flex;gap:6px;padding:12px 16px 0}.stepper i{flex:1;height:5px;border-radius:9px;background:var(--ln)}.stepper i.on{background:var(--b1)}.stt{padding:6px 16px 0;color:var(--m);font-size:12px}
.qtyrow{display:flex;align-items:center;gap:12px}.qtyrow button{width:44px;height:44px;border-radius:14px;border:1.5px solid var(--ln);background:var(--c);font-size:22px;color:var(--t)}.qtyrow input{text-align:center;font-size:20px;font-weight:700;width:90px}
.opt{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--ln)}.opt:last-child{border:0}.opt input{width:20px;height:20px;margin-top:2px;accent-color:var(--b1)}.opt .grow b{display:block}
.hours{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}.hours button{border:1.5px solid var(--ln);background:var(--c);color:var(--t);border-radius:12px;padding:10px 0;font:inherit}.hours button.on{background:var(--b1);border-color:var(--b1);color:#fff}
#map{height:300px;border-radius:18px;overflow:hidden;margin:10px 0;border:1.5px solid var(--ln);z-index:0}.srch{position:relative}.srch .res{position:absolute;left:0;right:0;top:100%;background:var(--c);border-radius:14px;box-shadow:0 10px 30px #0003;z-index:1000;max-height:240px;overflow:auto;margin-top:4px}.srch .res button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--ln);background:none;color:var(--t);padding:11px 14px;font:inherit;font-size:13px}
.gpsb{width:100%;border:1.5px dashed var(--b1);background:none;color:var(--b2);border-radius:14px;padding:11px;font:inherit;font-weight:600}
.sum .kv b{margin-left:auto;text-align:right}.sum .tot{font-size:20px;font-weight:800;display:flex;justify-content:space-between;padding-top:10px}.neg{color:#0c9d70}
.promobox{display:flex;gap:8px}.promobox .in{text-transform:uppercase}.promobox .btn{width:auto;padding:0 18px}.pchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.pchips button{border:1.5px dashed var(--warn);background:#f59e0b14;border-radius:12px;padding:6px 10px;font:inherit;font-size:12px;color:var(--t)}
.note{background:#f59e0b1f;border-radius:14px;padding:11px 13px;font-size:13px;margin:10px 0}.note.ok{background:#10b9811f}
.tl{margin:6px 0 0;padding:0;list-style:none}.tl li{display:flex;gap:12px;position:relative;padding-bottom:16px;color:var(--m)}.tl li::before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--ln)}.tl li:last-child::before{display:none}.tl u{text-decoration:none;flex:none;width:24px;height:24px;border-radius:50%;background:var(--ln);display:grid;place-items:center;font-size:12px;color:#fff;z-index:1}.tl li.done{color:var(--t)}.tl li.done u{background:var(--ok)}.tl li.done::before{background:var(--ok)}.tl small{display:block;color:var(--m)}
.stf{display:flex;gap:12px;align-items:center;padding:8px 0}.stf img,.stf .ph2{width:54px;height:54px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,var(--b1),var(--b2));color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px;flex:none}
.big{font-size:12px;padding:3px 11px}.pin{letter-spacing:10px;text-align:center;font-size:22px;font-weight:700}.lnk{border:0;background:none;color:var(--b2);font:inherit;font-size:13px;text-decoration:underline;padding:8px 0;display:block;margin:6px auto 0}
.hero2{background:linear-gradient(160deg,var(--b1),var(--b2));color:#fff;padding:calc(30px + env(safe-area-inset-top)) 22px 34px;border-radius:0 0 28px 28px;text-align:center}.hero2 img,.hero2 .lg{width:72px;height:72px;border-radius:20px;background:#fff;object-fit:contain;display:grid;place-items:center;margin:0 auto 10px;font-size:32px;font-weight:800;color:var(--b2)}.hero2 h1{margin:0;font-size:20px}.hero2 p{margin:4px 0 0;opacity:.9;font-size:13px}
.pcard{display:flex;gap:12px}.pcard .tag{flex:none;width:54px;height:54px;border-radius:16px;color:#fff;display:grid;place-items:center;font-size:26px}.code{display:inline-block;font-family:ui-monospace,Menlo,monospace;background:var(--bg);border:1.5px dashed var(--b1);border-radius:10px;padding:3px 10px;font-weight:700;color:var(--b2);letter-spacing:1px}
.leaflet-container{font:inherit}

/* ================= v24: responsif + komponen baru ================= */
#app{width:100%}
.gridc{display:block;padding:0 16px}.gridc .card{margin:0 0 12px}
.gridc2{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 12px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
button,.card.tap{touch-action:manipulation}
.btn:active,.chip:active,nav button:active{transform:scale(.97)}
/* chat & invoice */
.chatcard{display:flex;gap:12px;align-items:center}.chatcard .ic{width:46px;height:46px;border-radius:14px;background:#0e8bea1a;display:grid;place-items:center;font-size:22px;flex:none}
.udot{width:10px;height:10px;border-radius:50%;background:var(--bad);flex:none}
.top .ttl{min-width:0;flex:1}.top .ttl b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top .ttl small{display:block;opacity:.85;font-size:12px}
.chat{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
.bub.staff em{color:var(--b1);opacity:1;font-weight:600}
.cnote{background:var(--c);border:1.5px dashed var(--ln);color:var(--m);border-radius:14px;padding:12px;text-align:center;font-size:13px}
.inv{padding:0;overflow:hidden}.inv .ih{padding:16px;border-bottom:1px dashed var(--ln)}.inv .ib{padding:6px 16px 16px}
.inv .big{font-size:22px;font-weight:800;letter-spacing:.5px}
.paybox{white-space:pre-wrap;background:var(--bg);border-radius:14px;padding:12px;font-size:14px;overflow-wrap:anywhere}
.proofprev{display:flex;gap:10px;align-items:center;background:var(--bg);border-radius:14px;padding:8px}.proofprev img{width:64px;height:64px;object-fit:cover;border-radius:10px}.proofprev span{flex:1;font-size:13px;color:var(--m)}
.statcard{background:linear-gradient(160deg,var(--b1),var(--b2));color:#fff;border-radius:22px;padding:18px;margin:14px 16px 12px;box-shadow:var(--sh)}
.statcard .sub{color:#fffc}.statcard h3{margin:0 0 4px;font-size:18px}.statcard .pill{background:#fff3;color:#fff}
.gridc .card.svc{height:calc(100% - 12px)}

.tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:800;font-size:16px;padding-top:12px;margin-top:8px;border-top:1.5px solid var(--ln)}
.top button.hchip,.top .hchip{width:auto;height:36px;padding:0 14px;border-radius:99px;font-size:13px;font-weight:600;white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.top .chipbtn{width:auto;height:auto}

.editrow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}.editrow .chip{padding:6px 12px;font-size:13px}
.stepper{cursor:default}.stepper i{cursor:pointer;min-height:6px}.stepper i.on{cursor:pointer}
.dock .btn.g{min-height:48px}

/* ================= v26: tampilan aplikasi Android modern (selalu mode HP, juga di desktop) ================= */
:root{--b1:#0e8bea;--b2:#0a62c4;--bg:#f4f6fb;--sh:0 2px 10px #1c3a6e12,0 1px 2px #1c3a6e0d;--r:20px}
@media(prefers-color-scheme:dark){:root{--bg:#0a101c}}
html{background:var(--bg)}
@media(min-width:520px){
  html,body{background:radial-gradient(900px 500px at 15% 0,#0e8bea26,transparent 60%),radial-gradient(800px 500px at 90% 100%,#8b5cf622,transparent 60%),#e4eaf5}
  #app{box-shadow:0 0 0 1px var(--ln),0 30px 90px #1c3a6e38}
}
@media(min-width:520px) and (prefers-color-scheme:dark){html,body{background:radial-gradient(900px 500px at 15% 0,#0e8bea22,transparent 60%),#04070d}}
#sheet{align-items:flex-end}.sh{border-radius:28px 28px 0 0}
body{-webkit-font-smoothing:antialiased;font-family:"Google Sans","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* header beranda */
.hhead{position:relative;background:linear-gradient(150deg,var(--b1),var(--b2));color:#fff;padding:calc(16px + env(safe-area-inset-top)) 18px 52px;border-radius:0 0 32px 32px;overflow:hidden}
.hhead::before,.hhead::after{content:"";position:absolute;border-radius:50%;background:#ffffff18;pointer-events:none}
.hhead::before{width:200px;height:200px;right:-60px;top:-70px}.hhead::after{width:130px;height:130px;left:-40px;bottom:-60px}
.hhead>*{position:relative;z-index:1}
.hrow{display:flex;align-items:center;gap:10px}.hrow .sp{flex:1}
.hhead .brand b{font-size:16px;letter-spacing:-.2px}
.hhead .brand img,.hhead .brand .lg{width:36px;height:36px;border-radius:12px}
.avbtn{width:40px;height:40px;border-radius:50%;border:2px solid #fff8;background:#fff3;color:#fff;font:inherit;font-weight:800;font-size:16px;display:grid;place-items:center}
.hello{margin-top:18px}.hello small{font-size:13px;opacity:.9}
.hello h1{margin:2px 0 0;font-size:22px;line-height:1.25;letter-spacing:-.4px;font-weight:800;max-width:15em}
.hsearch{position:relative;margin:-26px 16px 0;z-index:2}
.hsearch .ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--m);pointer-events:none}
.hs-in{width:100%;height:52px;border:0;border-radius:26px;padding:0 18px 0 48px;background:var(--c);color:var(--t);font:inherit;font-size:15px;box-shadow:0 8px 24px #0b3a7a26,0 0 0 1px var(--ln)}
.hs-in:focus{outline:2px solid var(--b1)}.hs-in::placeholder{color:var(--m)}
.hs-in::-webkit-search-cancel-button{display:none}

/* judul seksi */
h2{font-size:17px;font-weight:800;letter-spacing:-.3px;margin:22px 16px 10px}
.sec{display:flex;justify-content:space-between;align-items:baseline}.sec h2{margin-right:auto}.sec a{font-weight:700;font-size:13px}.sec>h2+*{margin-top:22px}

/* slider promo (gambar atau gradasi) */
.slider{margin:0}.strip{gap:12px;padding:2px 16px 6px}
.sl{flex:0 0 88%;height:176px;min-height:0;padding:0;border-radius:22px;color:#fff;justify-content:flex-end;isolation:isolate;box-shadow:0 8px 22px #1c3a6e26}
.sl::after{display:none}
.sl .sx{position:relative;z-index:2;padding:16px}.sl.img .sx{padding-top:60px;background:linear-gradient(to top,#000000a6,#00000055 55%,transparent)}
.sl:not(.img)::after{display:block;content:"";position:absolute;right:-34px;top:-34px;width:130px;height:130px;border-radius:50%;background:#ffffff22;z-index:0}
.sl .sim{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;user-select:none;-webkit-user-drag:none}
.sl .bd{display:inline-block;background:#ffffff38;backdrop-filter:blur(6px);border-radius:99px;padding:3px 11px;font-size:12px;font-weight:700}
.sl h3{margin:8px 0 2px;font-size:18px;line-height:1.2;letter-spacing:-.3px;text-shadow:0 1px 8px #0005}
.sl p{margin:0;font-size:12.5px;opacity:.95;max-width:78%}
.sl .em{z-index:1;right:16px;bottom:10px;font-size:46px}
.sl .cd{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;background:#fff;color:#0a4f9e;border-radius:9px;padding:2px 9px}
.sl:not(.img) .sx{padding-bottom:16px}
.dots{margin-top:10px}.dots i{transition:width .2s,background .2s}
.simg{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:16px;display:block;margin:0 0 12px;background:var(--ln)}

/* kategori ala super-app */
.cg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 6px;padding:0 12px}
.ct{border:0;background:none;color:var(--t);font:inherit;display:flex;flex-direction:column;align-items:center;gap:7px;padding:2px 0;min-width:0}
.ci{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;font-size:27px;transition:transform .15s,box-shadow .15s}
.ct:active .ci{transform:scale(.92)}
.ct.on .ci{box-shadow:0 0 0 2.5px var(--b1)}.ct.on .cl{color:var(--b1);font-weight:700}
.cl{font-size:11.5px;line-height:1.2;text-align:center;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--t)}
.tn0{background:#0e8bea22}.tn1{background:#10b98124}.tn2{background:#f59e0b26}.tn3{background:#8b5cf624}.tn4{background:#f43f5e1f}

/* kartu layanan */
.card{border-radius:var(--r);box-shadow:var(--sh)}
.svc{padding:12px 14px}.svc .ic{width:56px;height:56px;border-radius:18px;font-size:27px;color:inherit}
.svc .ic.tn0{background:#0e8bea22}.svc .ic.tn1{background:#10b98124}.svc .ic.tn2{background:#f59e0b26}.svc .ic.tn3{background:#8b5cf624}.svc .ic.tn4{background:#f43f5e1f}
.svc .grow b{font-size:15px;letter-spacing:-.2px}.svc .pr{text-align:left;font-size:13.5px;color:var(--b2);margin-top:4px}.svc .pr small{display:inline;font-size:11px}
.svc .chev{color:var(--m);width:20px;height:20px}
.gridc .card.svc{height:auto}

/* top app bar halaman dalam (putih, gaya Material) */
.top{background:var(--c);color:var(--t);box-shadow:0 1px 0 var(--ln);gap:12px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px}
.top b{font-size:17px;font-weight:700;letter-spacing:-.2px}
.top button,.top .chipbtn{width:40px;height:40px;border-radius:50%;background:var(--bg);color:var(--t);display:grid;place-items:center;padding:0}
.top button .ico{width:22px;height:22px}
.top .ttl small{opacity:.7}
.chips{top:calc(60px + env(safe-area-inset-top))}
.chipbtn.hchip{background:#fff;color:var(--b2);width:auto;height:38px;padding:0 18px;font-weight:700;border-radius:99px;box-shadow:0 4px 12px #0003}

/* bottom navigation Material 3 */
nav{padding:8px 6px calc(8px + env(safe-area-inset-bottom));border-top:0;box-shadow:0 -1px 0 var(--ln),0 -10px 30px #1c3a6e14;border-radius:22px 22px 0 0}
nav button{gap:3px;font-size:11.5px;font-weight:600;padding:2px 0}
nav .ni{display:grid;place-items:center;width:62px;height:32px;border-radius:99px;transition:background .2s,transform .2s}
nav .ni .ico{width:23px;height:23px}
nav button.on{color:var(--b1);font-weight:800}nav button.on .ni{background:#0e8bea24}nav button.on .ni .ico{stroke-width:2.3}
nav button:active .ni{transform:scale(.92)}
nav b{right:calc(50% - 30px);top:-1px}
.btn{border-radius:18px;padding:15px;font-size:15px;letter-spacing:.1px}
.dock{border-top:0;box-shadow:0 -10px 30px #1c3a6e12;background:var(--c)}

/* halaman promo */
.pcard.pic{display:block;padding:0;overflow:hidden}.pcard .pimg{width:100%;aspect-ratio:2/1;object-fit:cover;display:block;background:var(--ln)}
.pcard .prow{display:flex;gap:12px}.pcard.pic .prow{padding:12px 14px}
.hero2{border-radius:0 0 32px 32px}
@media(min-width:520px){.sl{flex-basis:86%}}

.tn5{background:transparent!important}.ci .cimgi,.svc .ic .cimgi{width:100%;height:100%;object-fit:contain;display:block;border-radius:inherit}
.ci.tn5{background:var(--c)!important;box-shadow:var(--sh);overflow:hidden}.svc .ic.tn5{background:var(--c)!important;overflow:hidden}

/* splash screen (diatur dari Pengaturan admin) */
#splash{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;transition:opacity .45s ease,visibility .45s;overflow:hidden}
#splash::before,#splash::after{content:"";position:absolute;border-radius:50%;background:#ffffff14}
#splash::before{width:340px;height:340px;right:-120px;top:-100px}#splash::after{width:240px;height:240px;left:-90px;bottom:-70px}
#splash.out{opacity:0;visibility:hidden}
.spc{position:relative;z-index:1;text-align:center;padding:0 32px;animation:spin .7s cubic-bezier(.2,.8,.2,1) both}
.spl{width:96px;height:96px;border-radius:28px;object-fit:contain;background:#ffffff26;padding:10px;box-shadow:0 14px 40px #00000030;display:block;margin:0 auto 18px}
.spi{display:grid;place-items:center;font-size:44px;font-weight:800;padding:0}
#splash h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.4px}#splash p{margin:8px auto 0;font-size:14px;opacity:.9;max-width:300px;line-height:1.4}
.spbar{position:absolute;left:50%;bottom:calc(48px + env(safe-area-inset-bottom));width:120px;height:4px;border-radius:99px;background:#ffffff33;transform:translateX(-50%);overflow:hidden}
.spbar i{display:block;height:100%;width:100%;background:#fff;border-radius:99px;transform-origin:left;animation:spb linear both}
@keyframes spin{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}@keyframes spb{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.spc{animation:none}.spbar i{animation:none}}
/* ubah jadwal */
.rsbtn{margin-top:12px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--b1);background:#0e8bea14;color:var(--b1);font:inherit;font-weight:700;font-size:14px;border-radius:16px;padding:11px}
.rsbtn .ico{width:19px;height:19px}.rsnote{margin-top:10px;font-size:12.5px;color:var(--m)}
@media(min-width:520px){#splash{inset:0 auto 0 50%;width:var(--w);transform:translateX(-50%)}}

/* rating petugas */
.stars{display:flex;gap:4px;margin:6px 0}.stars button{border:0;background:none;padding:0;font-size:26px;line-height:1;color:#cbd5e1;font-family:inherit;transition:transform .12s,color .12s}
@media(prefers-color-scheme:dark){.stars button{color:#3a4560}}
.stars button.on{color:#f59e0b}.stars button:active{transform:scale(1.25)}.stars.ro button{pointer-events:none;font-size:20px;margin:0}.stars.ro{margin:3px 0}
.stars.big{justify-content:center;gap:8px;margin:16px 0 4px}.stars.big button{font-size:44px}
.rlbl{text-align:center;font-weight:700;min-height:24px;margin-bottom:12px}.rhead{text-align:center}.rhead .ph2,.rhead img{width:68px;height:68px;margin:6px auto 0;border-radius:50%;object-fit:cover;display:grid;place-items:center;font-size:26px}
.rchips,.rtags{display:flex;flex-wrap:wrap;gap:8px}.rchips{justify-content:center;margin-bottom:14px}.rtags{margin-top:6px}
.rchip{border:1.5px solid var(--ln);background:var(--c);color:var(--t);font:inherit;font-size:13px;font-weight:600;border-radius:99px;padding:7px 14px}.rchip.on{border-color:var(--b1);background:#0e8bea1f;color:var(--b1)}
.rtags span{font-size:12px;background:#f59e0b1f;color:#b45309;border-radius:99px;padding:3px 10px;font-weight:600}
@media(prefers-color-scheme:dark){.rtags span{color:#fbbf24}}
.rt{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--ln)}.rt:last-child{border-bottom:0}.rt .ph2,.rt img{flex:none}
.lnk{border:0;background:none;color:var(--b1);font:inherit;font-weight:700;font-size:13px;padding:6px 0 0}
.ratechip{margin-top:10px;display:inline-block;background:#f59e0b24;color:#b45309;font-weight:700;font-size:12.5px;border-radius:99px;padding:5px 12px}
@media(prefers-color-scheme:dark){.ratechip{color:#fbbf24}}
.rhead .ph2,.rt .ph2{background:linear-gradient(135deg,var(--b1),var(--b2));color:#fff;font-weight:800}.rt .ph2,.rt img{width:46px;height:46px;border-radius:50%;object-fit:cover;display:grid;place-items:center;font-size:18px}
.lnk{width:auto!important;display:block;text-align:left;text-decoration:none;box-shadow:none;background:none!important}

/* splash dengan gambar latar layar penuh */
#splash .spbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#splash .spscrim{position:absolute;inset:0;z-index:0;background:linear-gradient(to top,#000000b3,#00000040 55%,#00000026)}
#splash.hasbg::before,#splash.hasbg::after{display:none}#splash.poster .spc{display:none}#splash.hasbg .spbar{z-index:2}

/* ===== detail layanan (Material You) ===== */
.shero{position:relative;color:#fff;padding:calc(10px + env(safe-area-inset-top)) 18px 52px;overflow:hidden;border-radius:0 0 34px 34px;background:linear-gradient(150deg,var(--a),var(--b))}
.shero::before,.shero::after{content:"";position:absolute;border-radius:50%;background:#ffffff1a;pointer-events:none}.shero::before{width:220px;height:220px;right:-70px;top:-80px}.shero::after{width:140px;height:140px;left:-50px;bottom:-60px}
.shero>*{position:relative;z-index:1}
.h0{--a:#0e8bea;--b:#0a62c4}.h1{--a:#10b981;--b:#047857}.h2{--a:#f59e0b;--b:#d97706}.h3{--a:#8b5cf6;--b:#6d28d9}.h4{--a:#f43f5e;--b:#be123c}
.sbar{display:flex;align-items:center;height:48px}.hbtn{width:42px;height:42px;border-radius:50%;border:0;background:#ffffff33;backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;padding:0}
.sico{width:76px;height:76px;border-radius:26px;background:#ffffff2e;backdrop-filter:blur(8px);display:grid;place-items:center;font-size:38px;margin:10px 0 14px;box-shadow:0 10px 26px #0000002a}
.sico.img{background:#fff}.sico .cimgi{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.scat{display:inline-block;font-size:12.5px;font-weight:700;background:#ffffff2e;border-radius:99px;padding:3px 12px;margin-left:10px;vertical-align:middle}
.shero h1{margin:10px 0 0;font-size:26px;line-height:1.2;letter-spacing:-.5px;font-weight:800}
.gps{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.gp{background:#ffffff2e;border-radius:99px;padding:5px 12px;font-size:12px;font-weight:700}
.sbody{position:relative;margin-top:-26px;background:var(--bg);border-radius:28px 28px 0 0;padding:18px 16px 0}
.sprice{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;background:var(--c);border-radius:22px;padding:16px 18px;box-shadow:var(--sh);margin-bottom:12px}
.sprice small{display:block;color:var(--m);font-size:12px;font-weight:600}.sprice b{font-size:26px;letter-spacing:-.6px;color:var(--b2)}.sprice span{color:var(--m);font-size:13px}.sprice-n{font-size:11.5px;color:var(--m);text-align:right}
.scard{background:var(--c);border-radius:22px;padding:16px 18px;box-shadow:var(--sh);margin-bottom:12px}.scard h3{margin:0 0 10px;font-size:15.5px;font-weight:800;letter-spacing:-.2px}
.sdesc{margin:0;font-size:14px;line-height:1.55;white-space:pre-line;color:var(--t)}.sdesc.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ssteps{display:flex;flex-direction:column;gap:14px}.sst{display:flex;gap:12px;align-items:center}.sst b{display:block;font-size:14px}.sst small{color:var(--m);font-size:12.5px}
.sn{width:42px;height:42px;border-radius:15px;background:#0e8bea1f;display:grid;place-items:center;font-size:20px;flex:none}
.arow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--ln)}.arow:first-of-type{border-top:0}
.ack{width:30px;height:30px;border-radius:50%;background:#10b98124;color:#059669;display:grid;place-items:center;font-weight:800;flex:none}
.apr{font-size:12.5px;background:#0e8bea1a;color:var(--b2);border-radius:99px;padding:4px 11px;white-space:nowrap}
.psc{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none}.psc::-webkit-scrollbar{display:none}.psc .sl{flex:0 0 82%;height:148px;scroll-snap-align:start}
.sdock{display:flex;align-items:center;gap:14px;padding-top:12px}.sdock .dp{flex:1;min-width:0}.sdock .dp small{display:block;color:var(--m);font-size:11.5px;font-weight:600}.sdock .dp b{font-size:19px;letter-spacing:-.4px;color:var(--b2);white-space:nowrap}
.sdock .btn{flex:1.2;width:auto;border-radius:99px;padding:15px 18px;white-space:nowrap}
.scat{margin-left:0}.scard .lnk{margin:8px 0 0;padding:0;text-align:left;justify-self:start}
.psc{scroll-padding:0 16px}

/* ===== Pesanan — gaya Material 3 ===== */
.o3-bar0{background:var(--bg);padding:calc(14px + env(safe-area-inset-top)) 16px 6px;position:sticky;top:0;z-index:5}
.o3-bar0 h1{margin:6px 4px 12px;font-size:28px;font-weight:600;letter-spacing:-.3px}
.o3-search{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border-radius:28px;background:var(--c);box-shadow:var(--sh);color:var(--m)}
.o3-in{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--t)}
.o3-chips{display:flex;gap:8px;overflow-x:auto;padding:8px 16px 10px;scrollbar-width:none;position:sticky;top:calc(96px + env(safe-area-inset-top));z-index:4;background:var(--bg)}.o3-chips::-webkit-scrollbar{display:none}
.o3-chip{flex:none;height:34px;padding:0 14px;border-radius:10px;border:1px solid var(--ln);background:transparent;color:var(--t);font:inherit;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.o3-chip em{font-style:normal;font-size:11.5px;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;background:var(--ln);color:var(--m);padding:0 5px}
.o3-chip.on{background:#0e8bea26;border-color:transparent;color:var(--b2)}.o3-chip.on em{background:var(--b2);color:#fff}
.o3-list{padding:4px 16px 0;display:flex;flex-direction:column}
.o3-list>div>div:first-child{display:flex;flex-direction:column;gap:12px}
.o3-card{background:var(--c);border-radius:20px;padding:14px 16px;box-shadow:var(--sh);cursor:pointer;transition:transform .12s,box-shadow .12s}.o3-card:active{transform:scale(.985)}
.o3-row{display:flex;align-items:center;gap:12px}
.o3-ic{width:46px;height:46px;border-radius:16px;background:#0e8bea1f;display:grid;place-items:center;font-size:22px;flex:none;overflow:hidden}.o3-ic.img{background:transparent}.o3-ic img{width:100%;height:100%;object-fit:cover}
.o3-t{font-weight:700;font-size:15.5px;line-height:1.25}.o3-s{color:var(--m);font-size:12.5px;margin-top:2px}
.o3-tot{font-weight:800;font-size:15px;text-align:right;white-space:nowrap}.o3-tot small{font-weight:600;font-size:11.5px;color:var(--m)}
.o3-bar{height:6px;border-radius:3px;background:var(--ln);margin:12px 0 2px;overflow:hidden}.o3-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--b1),var(--b2));transition:width .4s}
.o3-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--ln);font-size:12.5px}
.o3-st{display:inline-flex;align-items:center;gap:7px;font-weight:700;min-width:0}.o3-st i{width:8px;height:8px;border-radius:50%;background:var(--b1);flex:none}
.o3-ok .o3-st{color:#0c9d70}.o3-ok .o3-st i{background:var(--ok)}.o3-warn .o3-st{color:#c77d05}.o3-warn .o3-st i{background:var(--warn)}.o3-x .o3-st{color:var(--m)}.o3-x .o3-st i{background:#9ca3af}.o3-go .o3-st{color:var(--b2)}
.o3-x{opacity:.8}.o3-d{color:var(--m);flex:none}
.o3-reset{border:0;border-radius:20px;background:var(--b2);color:#fff;font:inherit;font-weight:600;padding:9px 18px}
@media(prefers-color-scheme:dark){.o3-ok .o3-st{color:#34d399}.o3-warn .o3-st{color:#fbbf24}.o3-go .o3-st,.o3-chip.on{color:#7cc4ff}}

/* ---- Beranda: lonceng notifikasi pojok kanan atas ---- */
.hbtns{display:flex;align-items:center;gap:8px}.hbell{position:relative}.hbell .ico{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hbdg{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px;border:2px solid var(--b1)}
/* ---- Akun: tombol Bantuan ---- */
a.helpbtn{display:flex;align-items:center;gap:12px;text-decoration:none;text-align:left;color:var(--t)}.helpbtn .hi{width:40px;height:40px;border-radius:12px;background:#25d36622;display:grid;place-items:center;font-size:20px;flex:none}.helpbtn b{display:block}.helpbtn small{color:var(--m);font-size:12px}.helpbtn .chev{width:18px;height:18px;flex:none;color:var(--m)}
/* ---- Langkah Kru (pindahan) ---- */
.kintro{display:flex;gap:12px;align-items:flex-start;margin:0 16px 12px;padding:14px;border-radius:16px;background:linear-gradient(135deg,#0e8bea14,#0e8bea0a);border:1px solid #0e8bea33}.kintro b{display:block;margin-bottom:2px}.kintro .sub{display:block;line-height:1.45}.kie{font-size:26px;line-height:1}
.kcard{border:1.5px solid var(--ln);transition:border-color .15s,box-shadow .15s}.kcard.on{border-color:var(--b1);box-shadow:0 0 0 3px #0e8bea1f}
.khead{display:flex;align-items:center;gap:12px}.kic{width:44px;height:44px;border-radius:14px;background:#0e8bea1a;display:grid;place-items:center;font-size:22px;flex:none}.khead b{display:block}.khead .sub{display:block}
.kprice{flex:none;text-align:right;font-weight:800;color:var(--b2);font-size:14px;line-height:1.15}.kprice small{display:block;font-weight:500;color:var(--m);font-size:11px}
.krow{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--ln)}.krow b{display:block;font-size:14px}.krow .sub{display:block;font-size:12px}
.kstep{display:flex;align-items:center;gap:6px;flex:none;background:var(--bg);border-radius:14px;padding:4px}.kstep button{width:36px;height:36px;border-radius:11px;border:0;background:var(--c);color:var(--b2);font-size:20px;font-weight:700;box-shadow:var(--sh)}.kstep button:active{transform:scale(.92)}
.kval{min-width:30px;text-align:center;font-size:17px}.kval.wide{min-width:58px;font-size:15px}
.ksub{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:10px 12px;border-radius:12px;background:#0e8bea12;font-size:13px;color:var(--b2)}.ksub b{font-size:15px}
.ktot{background:linear-gradient(135deg,var(--b1),var(--b2));color:#fff;border:0}.ktot .khead{justify-content:space-between}.ktot .sub{color:#ffffffcc}.ktot .kt{font-size:22px}.ktot>.sub{margin-top:4px}

/* ---- Minimal jam layanan & rating petugas ---- */
.minj{display:inline-block;margin-top:4px;padding:2px 9px;border-radius:20px;background:#f59e0b1f;color:#b45309;font-size:11.5px;font-weight:700}
.minnote{margin-top:8px;padding:8px 12px;border-radius:12px;background:#f59e0b1a;color:#b45309;font-size:13px;font-weight:600}
.srate{font-size:12.5px;font-weight:700;color:#b45309;margin-top:1px}
@media(prefers-color-scheme:dark){.minj,.minnote,.srate{color:#fbbf24}}

/* ---- PWA: kartu pasang aplikasi / notifikasi, ETA petugas ---- */
.pwa .sub{line-height:1.45}
.etab{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:#0e8bea14;color:var(--b2);font-weight:700;font-size:13.5px}

/* v35 — ruang chat grup (satu order, beberapa petugas) */
.cmem{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px 0}.cmem[hidden]{display:none}.cmem span{font-size:12px;padding:4px 10px;border-radius:99px;background:var(--c);box-shadow:var(--sh);color:var(--t)}.cmem span i{font-style:normal;color:var(--m)}