@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap");
/* Bentor Go v2 - tampilan profesional. Warna merek oranye, header gelap, kartu bersih. */
:root{--bg:#ffffff;--soft:#f3f1ed;--card:#fff;--ink:#1c1915;--mute:#6b665e;--or:#F28C1E;--or2:#b85f00;--line:#e4e0d8;--fld:#faf9f6;--err:#c0392b;--ok:#17803f;--okbg:#e3f4e9;--warnbg:#fdf0d9;--errbg:#fbe5e2;--hd:#1d1a16;--sh:0 1px 2px #1c19150f,0 6px 18px #1c19150f}
*{box-sizing:border-box;margin:0}[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.5 "Plus Jakarta Sans",system-ui,"Segoe UI",Roboto,sans-serif;max-width:520px;margin:0 auto;min-height:100vh;padding-bottom:32px;-webkit-font-smoothing:antialiased}
@media (min-width:560px){body{box-shadow:0 0 0 1px var(--line),0 10px 40px #0002}}
button,input{font-family:inherit}
:focus-visible{outline:3px solid color-mix(in srgb,var(--or) 70%,#fff);outline-offset:2px}
/* header */
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--hd);color:#fff;border-bottom:3px solid var(--or)}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;line-height:1.1;letter-spacing:-.01em}
.logo img{width:40px;height:40px;border-radius:11px;background:#fff;object-fit:contain}
.logo b{color:var(--or)}.logo small{display:block;font-size:11px;font-weight:500;letter-spacing:.04em;color:#cfc8bb;margin-top:2px}
.chip{background:#ffffff1a;color:#fff;border:1px solid #ffffff33;border-radius:99px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer}
.chip:hover{background:#ffffff2e}
/* kartu */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin:14px 16px;box-shadow:var(--sh)}
#auth{margin-top:24px}
h2{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}.mut{color:var(--mute);font-size:13px}
/* form */
label{display:block;font-size:12px;font-weight:700;color:var(--mute);margin:12px 0 5px;letter-spacing:.02em}
input{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--fld);color:var(--ink);font-size:15px;transition:border-color .15s,box-shadow .15s}
input::placeholder{color:#9a948a}
input:focus{border-color:var(--or);outline:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--or) 22%,transparent)}
.btn{display:block;width:100%;text-align:center;text-decoration:none;margin-top:12px;padding:14px;border:0;border-radius:14px;background:var(--or);color:#1c1915;font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 2px 0 #b85f00,0 6px 14px #f28c1e40;transition:transform .08s,filter .15s}
.btn:hover{filter:brightness(1.04)}.btn:active{transform:translateY(1px);box-shadow:0 1px 0 #b85f00}
.btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed;filter:grayscale(.3)}
.btn.g{background:var(--card);border:1.5px solid var(--line);color:var(--ink);font-weight:700;box-shadow:none}
.btn.g:hover{border-color:var(--or)}
.btn.s{width:auto;display:inline-block;padding:8px 14px;font-size:13px;margin:0;border-radius:10px;box-shadow:none}
.er{color:var(--err);font-size:13px;min-height:18px;margin-top:8px;font-weight:600}
.hint{color:var(--mute);font-size:12.5px;margin-top:8px}
/* sheet pesan */
.sheet{background:var(--card);border-radius:26px 26px 0 0;margin-top:-22px;position:relative;z-index:500;padding:10px 18px 18px;box-shadow:0 -8px 24px #1c19151f}
.hd{display:block;width:40px;height:4px;border-radius:9px;background:var(--line);margin:0 auto 14px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:10px;padding:4px;background:var(--soft);border-radius:14px}
.seg button{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:11px;border:0;background:none;color:var(--mute);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);font-weight:800;box-shadow:0 1px 3px #1c19152e}
.seg svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dt{display:inline-block;width:12px;height:12px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px currentColor}
.dt.g{background:#17a34a;color:#17a34a}.dt.r{background:#e5484d;color:#e5484d}
.gps{display:inline-flex;align-items:center;gap:6px;background:none;border:1.5px solid color-mix(in srgb,var(--or) 55%,transparent);color:var(--or2);border-radius:99px;padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer;margin:2px 0 4px}
.gps:hover{background:color-mix(in srgb,var(--or) 10%,transparent)}
.fare{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--or) 11%,var(--card));border:1px solid color-mix(in srgb,var(--or) 30%,var(--line))}
.fare span{font-size:13px;font-weight:600;color:var(--mute)}.fare b{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--or2);font-variant-numeric:tabular-nums}
.it{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}.it:last-child{border:0}.it a{color:var(--or2);font-weight:700}
/* pelacakan */
.stp{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;list-style:none;padding:0;margin:0 0 14px;counter-reset:p}
.stp li{counter-increment:p;position:relative;text-align:center;font-size:11px;font-weight:700;color:var(--mute);padding-top:16px}
.stp li::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;border-radius:9px;background:var(--line)}
#trk[data-s="mencari"] .stp li:nth-child(-n+1)::before,#trk[data-s="diterima"] .stp li:nth-child(-n+2)::before,#trk[data-s="jalan"] .stp li:nth-child(-n+3)::before,#trk[data-s="selesai"] .stp li::before{background:var(--or)}
#trk[data-s="mencari"] .stp li:nth-child(1),#trk[data-s="diterima"] .stp li:nth-child(2),#trk[data-s="jalan"] .stp li:nth-child(3),#trk[data-s="selesai"] .stp li:nth-child(4){color:var(--ink)}
#trk[data-s="batal"] .stp{display:none}
#trk[data-s="selesai"] #st{color:var(--ok)}#trk[data-s="batal"] #st{color:var(--err)}
#trk #dv{margin-top:8px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--fld)}
/* tabel dan lencana */
table{width:100%;border-collapse:collapse;font-size:13px}td,th{padding:9px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);font-weight:700}
.sc{overflow-x:auto}
.bd{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700;background:var(--warnbg);color:var(--or2);text-transform:capitalize;white-space:nowrap}
.bd.selesai,.bd.on{background:var(--okbg);color:var(--ok)}.bd.batal{background:var(--errbg);color:var(--err)}.bd.off{background:var(--soft);color:var(--mute)}
#sm{line-height:1.9}
/* driver */
#tg{font-weight:700;border-radius:99px;margin-top:10px}
#tg.on{background:var(--okbg);border-color:var(--ok);color:var(--ok)}
#tg::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:#9a948a;margin-right:9px}
#tg.on::before{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 25%,transparent)}
/* peta */
#mw{position:relative}#map{height:52vh;min-height:260px;background:var(--line)}
.mk{width:34px;height:34px;border-radius:50%;background:#fff;font-size:17px;line-height:34px;text-align:center;box-shadow:0 2px 8px #0005;border:2px solid var(--or)}
.sb{position:absolute;top:12px;left:12px;right:12px;z-index:1000;display:flex;gap:8px}
.sb input{flex:1;border-radius:99px;padding:13px 18px;background:#fff;color:#1c1915;border-color:transparent;box-shadow:0 2px 10px #0003}
.sb button,.rc{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:#fff;color:#1c1915;box-shadow:0 2px 10px #0003;cursor:pointer}
.sb svg,.rc svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ly{position:absolute;top:68px;right:12px;z-index:1000;background:#fff;border-radius:14px;padding:6px;box-shadow:0 4px 16px #0003;display:grid;gap:4px}
.ly button{padding:9px 16px;border:1.5px solid transparent;border-radius:10px;background:none;color:#1c1915;font-size:14px;text-align:left;cursor:pointer}
.ly button[aria-pressed="true"]{border-color:var(--or);background:#fff4e6;font-weight:700}
.sr{position:absolute;top:68px;left:12px;right:12px;z-index:1000;list-style:none;padding:0;background:#fff;border-radius:16px;box-shadow:0 4px 16px #0003;max-height:40%;overflow:auto}
.sr li{padding:0;border-bottom:1px solid #eee}.sr li.mut{padding:12px 14px}.sr button{display:block;width:100%;padding:12px 14px;border:0;background:none;color:#1c1915;font-size:13px;text-align:left;cursor:pointer}.sr button:hover{background:#fff4e6}
.cp{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-30px 0 0 -15px;z-index:900;pointer-events:none}
.cp::before{content:"";position:absolute;inset:0 0 6px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--or);border:3px solid #fff;box-shadow:0 3px 8px #0006}
.cp::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-8px 0 0 -4px;border-radius:50%;background:#fff}
.rc{position:absolute;right:12px;bottom:84px;z-index:1000}
.pk{position:absolute;left:16px;right:16px;bottom:36px;z-index:1000;margin:0;width:auto}
.lock .sb,.lock .ly,.lock .sr,.lock .cp,.lock .pk,.lock .rc{display:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* beranda */
#app{padding-bottom:78px}
body.onhome .top{border-bottom:0}
.hero{background:linear-gradient(var(--hd),#2c2218);color:#fff;padding:6px 16px 22px;border-radius:0 0 28px 28px}
.hr{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.hr small{font-size:12px;color:#cfc8bb;letter-spacing:.03em}.hr h1{font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--or);background:#ffffff14;color:#fff;cursor:pointer}
.av svg,.nav svg,.find svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.find{display:flex;align-items:center;gap:10px;width:100%;padding:14px 18px;border:0;border-radius:99px;background:#fff;color:#6b665e;font-size:15px;text-align:left;cursor:pointer;box-shadow:0 4px 14px #0004}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:20px 12px 8px}
.grid button{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 2px;border:0;background:none;color:var(--ink);font-size:12.5px;font-weight:700;line-height:1.2;text-align:center;cursor:pointer}
.grid button:disabled{cursor:default;color:var(--mute);font-weight:600}
.ic{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:var(--soft);color:var(--mute);border:1px solid var(--line)}
.ic.a{background:color-mix(in srgb,var(--or) 18%,var(--card));color:var(--or2);border-color:color-mix(in srgb,var(--or) 45%,var(--line))}
.ic svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.grid em{font-style:normal;font-size:10px;font-weight:700;padding:1px 7px;border-radius:99px;background:var(--soft);border:1px solid var(--line);color:var(--mute)}
.grid button:not(:disabled):active .ic{transform:scale(.95)}
.live{display:flex;align-items:center;gap:12px;width:calc(100% - 32px);margin:10px 16px 0;padding:12px 14px;border:1.5px solid var(--or);border-radius:16px;background:color-mix(in srgb,var(--or) 12%,var(--card));color:var(--ink);font-size:13px;text-align:left;cursor:pointer}
.live span:nth-child(2){flex:1}.live i{font-style:normal;font-weight:800;color:var(--or2)}
.pls{width:12px;height:12px;border-radius:50%;background:var(--or);box-shadow:0 0 0 0 var(--or);animation:pl 1.6s infinite}
@keyframes pl{70%{box-shadow:0 0 0 10px #f28c1e00}100%{box-shadow:0 0 0 0 #f28c1e00}}
.chips{display:flex;gap:10px;overflow-x:auto;padding:16px 16px 6px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.ch{flex:0 0 auto;min-width:150px;padding:12px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh)}
.ch small{display:block;font-size:12px;color:var(--mute)}.ch b{font-size:15px;font-weight:800}
.sec{font-size:16px;font-weight:800;margin:18px 16px 10px;letter-spacing:-.01em}
.feed{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px}
.fc{display:flex;flex-direction:column;padding:0;border:1px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden;text-align:left;color:var(--ink);cursor:pointer;box-shadow:var(--sh)}
.art{height:130px;display:grid;place-items:center}
.art.r{background:linear-gradient(140deg,#ffd79a,#F28C1E)}.art.f{background:linear-gradient(140deg,#ffe9b8,#f5a742);color:#b85f00}
.art img{width:96px;height:96px;object-fit:contain;border-radius:22px;background:#fff;box-shadow:0 6px 16px #0003}
.art svg{width:64px;height:64px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fb{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}
.tg{align-self:flex-start;padding:2px 10px;border-radius:99px;background:var(--or);color:#1c1915;font-size:11px;font-weight:800}
.fb b{font-size:14px;line-height:1.3}.fb small{font-size:12px;color:var(--mute)}
/* menu bawah */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;z-index:2000;display:grid;grid-template-columns:repeat(3,1fr);background:var(--card);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 18px #1c19151a}
.nav button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px;border:0;background:none;color:var(--mute);font-size:11.5px;font-weight:700;cursor:pointer}
.nav button[aria-current="true"]{color:var(--or2)}
.nav button[aria-current="true"] svg{fill:color-mix(in srgb,var(--or) 25%,transparent)}
#acc .card p{margin-bottom:2px}
#ord .sheet{padding-bottom:28px}

/* semua latar putih */
:root{--bg:#fff;--soft:#fff;--fld:#fff;--hd:#fff;--card:#fff;--okbg:#fff;--warnbg:#fff;--errbg:#fff;color-scheme:light}
.top{color:var(--ink);border-bottom:1px solid var(--line)}body.onhome .top{border-bottom:0}
.logo small{color:var(--mute)}
.chip,.chip:hover{background:#fff;color:var(--ink);border:1px solid var(--line)}.chip:hover{border-color:var(--or)}
.hero{background:#fff;color:var(--ink);border-radius:0;padding-bottom:10px}
.hr small{color:var(--mute)}.av{background:#fff;color:var(--ink)}
.find{border:1.5px solid var(--line);box-shadow:var(--sh)}
.seg{border:1px solid var(--line)}.seg button{border:1.5px solid transparent}.seg button[aria-pressed="true"]{border-color:var(--or);box-shadow:none}
.ic,.ic.a{background:#fff}.ic.a{border-color:var(--or)}
.fare,.live{background:#fff}
.ly button[aria-pressed="true"]{background:#fff}.sr button:hover{background:#fff;color:var(--or2)}
.art.r,.art.f{background:#fff;border-bottom:1px solid var(--line)}
.tg{background:#fff;border:1.5px solid var(--or);color:var(--or2)}
.bd,.bd.selesai,.bd.on,.bd.batal,.bd.off{background:#fff;border:1px solid currentColor}
.btn.g,.gps{background:#fff}
#tg.on{background:#fff}
#map{background:#fff}
/* warung */
textarea{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:15px;resize:vertical}
textarea:focus{border-color:var(--or);outline:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--or) 22%,transparent)}
.shl{display:grid;gap:10px;padding:0 16px}
.sp{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--sh)}
.sp>div{min-width:0;flex:1}.sp b{display:block;font-size:15px}.sp small{display:block;color:var(--mute);font-size:12.5px}
.sp details,.shm{margin-top:6px;font-size:13px}.sp summary,.shm summary{cursor:pointer;color:var(--or2);font-weight:700}
.sp p,.shm p{white-space:pre-line;color:var(--mute);margin-top:4px}
.sp .btn.s{flex:0 0 auto;white-space:nowrap;padding:10px 14px}
.shm{margin:4px 0 6px;padding:10px 14px;border:1px solid var(--line);border-radius:12px}
#sf .btn{margin-top:14px}#sh .btn.s{margin:2px 2px 0 0}
/* chat */
.nav{grid-template-columns:repeat(4,1fr)}.nav button{position:relative}
.nb{position:absolute;top:0;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#e5484d;color:#fff;font:700 11px/18px "Plus Jakarta Sans",system-ui,sans-serif;font-style:normal;text-align:center}
.msgs{height:min(44vh,340px);overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:10px 2px;border-top:1px solid var(--line)}
.msgs .em{margin:auto;text-align:center}
.bb{max-width:82%;align-self:flex-start;padding:8px 12px;border:1px solid var(--line);border-radius:16px 16px 16px 4px;background:#fff}
.bb.me{align-self:flex-end;border:1.5px solid var(--or);border-radius:16px 16px 4px 16px}
.bb span{display:block;white-space:pre-wrap;word-break:break-word;font-size:14px}.bb small{display:block;text-align:right;font-size:10.5px;color:var(--mute)}
.qr{display:flex;gap:6px;overflow-x:auto;padding:8px 0;scrollbar-width:none}.qr::-webkit-scrollbar{display:none}
.qr button{flex:0 0 auto;padding:7px 12px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer}.qr button:hover{border-color:var(--or)}
.cf{display:flex;gap:8px;align-items:center}.cf input{flex:1}.cf .btn.s{padding:13px 18px}
#cbx .msgs{height:260px}
/* kota */
select{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:15px}
select:focus{border-color:var(--or);outline:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--or) 22%,transparent)}
.kts{display:flex;gap:8px;overflow-x:auto;margin:0 0 12px;scrollbar-width:none}.kts::-webkit-scrollbar{display:none}
.kts button{flex:0 0 auto;padding:8px 16px;border:1.5px solid var(--line);border-radius:99px;background:#fff;color:var(--mute);font-size:13.5px;font-weight:700;cursor:pointer}
.kts button[aria-pressed="true"]{border-color:var(--or);color:var(--ink)}
#kb{margin-top:10px}#km{margin-top:8px}
/* admin: lihat semua */
.kts.adm{padding:12px 16px 0;margin:0}
tr.rw{cursor:pointer}tr.rw:hover td{background:#fff8ef}
.msgs.ro{height:auto;max-height:320px;border-top:1px solid var(--line)}
.bb small.who{text-align:left;font-weight:700;color:var(--ink)}
td a{color:var(--or2);font-weight:600}

/* selfie driver */
.sfi video,.sfi img{display:block;width:100%;max-width:260px;aspect-ratio:3/4;object-fit:cover;border-radius:14px;margin:8px auto 0;background:#000;border:1.5px solid var(--line)}
.sfi video{transform:scaleX(-1)}
img.sfa{display:block;width:96px;height:128px;object-fit:cover;border-radius:10px;margin-top:6px;border:1.5px solid var(--line);cursor:pointer}

/* ===== Efek sentuh dan klik (premium) ===== */
:root{--spr:cubic-bezier(.34,1.56,.64,1);--eo:cubic-bezier(.22,1,.36,1)}
button,a,select,.rw{-webkit-tap-highlight-color:transparent}
.btn,.chip,.find,.gps,.seg button,.kts button,.qr button,.shl button{position:relative;overflow:hidden;transition:transform .4s var(--spr),box-shadow .3s var(--eo),border-color .2s,background-color .2s,filter .2s}
.btn:not(:disabled):active,.chip:active,.find:active,.gps:active,.seg button:active,.kts button:active,.qr button:active,.shl button:active{transform:scale(.96);transition-duration:.1s}
.btn:not(.g):not(.s):not(:disabled):active{box-shadow:0 1px 0 #b85f00,0 2px 8px #f28c1e55}
.btn:not(.g)::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(105deg,transparent,#ffffff66,transparent);transform:skewX(-20deg);opacity:0;pointer-events:none}
.btn:not(.g):not(:disabled):active::after{opacity:1;left:130%;transition:left .55s var(--eo),opacity .1s}
.rip{position:absolute;border-radius:50%;background:currentColor;opacity:.2;transform:scale(0);animation:rip .65s var(--eo) forwards;pointer-events:none}
.btn:not(.g) .rip{background:#fff;opacity:.5}
@keyframes rip{to{transform:scale(1);opacity:0}}
.grid button .ic{transition:transform .45s var(--spr),box-shadow .3s var(--eo),background-color .2s}
.grid button:not(:disabled):active .ic{transform:scale(.86);box-shadow:inset 0 2px 6px #1c191522}
.av{transition:transform .35s var(--spr)}.av:active{transform:scale(.88)}
.card{transition:box-shadow .3s var(--eo),border-color .25s}
.rw:active td{background:#ffeccf}
.rw td{transition:background-color .2s}
input:focus,select:focus,textarea:focus{transition:border-color .2s,box-shadow .25s var(--eo)}
@media (hover:hover){
 .btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 2px 0 #b85f00,0 12px 26px #f28c1e66}
 .btn.g:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px 20px #f28c1e30}
 .btn.s:not(:disabled):hover{box-shadow:0 6px 16px #f28c1e44}
 .btn:not(.g):not(:disabled):hover::after{opacity:1;left:130%;transition:left .7s var(--eo),opacity .1s}
 .chip:hover,.kts button:hover,.seg button:hover,.qr button:hover{box-shadow:0 4px 14px #f28c1e33;border-color:var(--or)}
 .find:hover{transform:translateY(-2px);box-shadow:0 10px 26px #0005}
 .grid button:not(:disabled):hover .ic{transform:scale(1.07) translateY(-2px);box-shadow:0 10px 22px #f28c1e44}
 .card:hover{box-shadow:0 10px 32px #1c19151f;border-color:#f28c1e55}
}
@media (prefers-reduced-motion:reduce){.btn,.chip,.find,.gps,.seg button,.kts button,.qr button,.shl button,.grid button .ic,.av,.card{transition:none!important}.rip{display:none}.btn::after{display:none}}

/* ===== Identitas visual dari logo bentor: latar putih, oranye, hitam arang, biru ===== */
:root{--or:#F58220;--ink:#202020;--bl:#2B75B2;--blbg:#eaf2fa;--blln:#b9d3ec}
html,body{background:#fff}
.logo img{width:50px;height:47px;border-radius:0;background:none;box-shadow:none}
.art img{background:none;box-shadow:none;border-radius:0}
a:not(.btn):not(.chip){color:var(--bl)}
:focus-visible{outline-color:color-mix(in srgb,var(--bl) 70%,#fff)}
.bb.me{background:var(--blbg);border-color:var(--blln)}

/* Kartu driver di dasbor admin (nyaman di HP) */
.dc{border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:10px;display:grid;gap:6px;background:var(--card);font-size:14px}
.dh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dc select{width:100%;margin-top:0!important}
.da{display:flex;gap:8px;margin-top:4px}.da .btn{flex:1;margin:0}

/* === v15: efek mewah (latar tetap putih) === */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero>*{position:relative}
.hero::before,.hero::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;filter:blur(46px);z-index:-1;opacity:.32;pointer-events:none}
.hero::before{background:radial-gradient(circle,var(--or),transparent 70%);top:-90px;right:-60px;animation:aur 9s ease-in-out infinite alternate}
.hero::after{background:radial-gradient(circle,var(--bl),transparent 70%);bottom:-120px;left:-70px;animation:aur 11s ease-in-out infinite alternate-reverse}
@keyframes aur{to{transform:translate(-40px,30px) scale(1.15)}}
.find{background:#ffffffb3;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 22px -12px #f28c1e88}
.grid{perspective:900px}
.grid button:not(:disabled) .ic{color:#fff;border:0;background:linear-gradient(135deg,#f6c46a,var(--or) 55%,var(--or2));box-shadow:0 8px 16px -6px #f28c1e99,inset 0 1px 0 #fff8}
.grid button{transition:transform .25s ease-out;will-change:transform}
.btn:not(:disabled){background:linear-gradient(135deg,#f9c76b,var(--or) 55%,#e07a0d);box-shadow:0 12px 24px -10px #f28c1ecc,inset 0 1px 0 #fff7}
.fc,.shl>*{position:relative}
.fc::after,.shl>*::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(135deg,#f6c46a,transparent 40%,var(--bl));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55}
@media (prefers-reduced-motion:reduce){.hero::before,.hero::after{animation:none}}

/* === v16: menu layanan berurutan kiri ke kanan, bisa digeser === */
.grid{display:flex;grid-template-columns:none;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:20px 14px 14px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.grid::-webkit-scrollbar{display:none}
.grid button{flex:0 0 auto;min-width:84px;scroll-snap-align:start}
.grid::after{content:"";flex:0 0 18px}

/* === v17: logo lebih besar + efek mewah di kartu warung === */
.logo img{width:62px;height:58px}
.shl{perspective:900px}
.sp{--mx:50%;--my:50%;overflow:hidden;transition:transform .25s ease-out,box-shadow .3s;will-change:transform}
.sp::before{content:"";position:absolute;inset:0;background:radial-gradient(180px circle at var(--mx) var(--my),#f28c1e2e,transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.sp>*{position:relative}
.sp:active{transform:scale(.985)}
@media (hover:hover){.sp:hover::before{opacity:1}.sp:hover{box-shadow:0 18px 34px -14px #f28c1e66}}

/* === v18: tampilan lebih rapi dan profesional === */
.hero h1{letter-spacing:-.03em}
.ch{border-radius:14px;background:#fff;box-shadow:none}
.sec{font-size:15px;letter-spacing:-.01em}
.fc,.sp,.shm{border-radius:18px}

/* === v19: kirim foto dan lokasi di chat === */
.ib{flex:0 0 auto;width:46px;height:46px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.ib svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ib:hover{border-color:var(--or);color:var(--or2)}
.cimg{display:block;max-width:100%;max-height:240px;min-width:120px;min-height:60px;border-radius:12px;background:#f3f1ed;object-fit:cover}
.loc{display:block;font-weight:700;font-size:14px;color:var(--bl);text-decoration:none}
.cf input{min-width:0}.cf .ib{margin:0}

/* v21: foto warung dan menu */
.sp.v{display:block;padding:0}
.sp.v .spi{display:block;width:100%;height:150px;object-fit:cover;background:var(--line)}
.sp.v .spb{padding:14px}
.sp.v .btn.s{width:100%;margin-top:10px}
.mnu{margin-top:8px;border-top:1px solid var(--line)}
.mi{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.mi img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:0 0 auto;background:var(--line)}
.mi .mt{flex:1;min-width:0}.mi .mt span{display:block;font-size:14px;font-weight:600}.mi .mt b{display:block;font-size:13px;color:var(--or2);font-weight:800}
.mi .st{display:flex;align-items:center;gap:6px}
.mi .st button{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:18px;line-height:1;cursor:pointer;color:var(--ink)}
.mi .st output{min-width:18px;text-align:center;font-weight:700}
.tot{margin-top:8px;font-size:13px;font-weight:700}
.spv{display:block;max-width:100%;max-height:160px;border-radius:12px;margin:6px 0;object-fit:cover}
.mrw{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}.mrw>div:nth-child(2){flex:1;min-width:0}
.mrw img,.mph,.mth{width:48px;height:48px;border-radius:10px;object-fit:cover;background:var(--line);flex:0 0 auto}
.mph{display:inline-block}
.mac{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.chk{display:flex;gap:8px;align-items:center;font-weight:500;font-size:13px;letter-spacing:0;text-transform:none;margin-top:6px}

/* v22: tampilan warung gaya aplikasi pesan antar */
.shs{padding:0 16px 12px}.shs input{border-radius:99px;padding:12px 16px}
.shl{display:block;columns:2;column-gap:12px;padding:0 16px}
.sc2{display:block;width:100%;break-inside:avoid;margin:0 0 12px;padding:0;text-align:left;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--sh);cursor:pointer;font:inherit;color:inherit}
.sc2>img,.sc2>.ph0{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.ph0{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--or) 18%,#fff);color:var(--or2);font-weight:800;font-size:40px}
.sb2{padding:10px 12px 12px}.sb2>b{font-size:14.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sm2{display:flex;justify-content:space-between;gap:6px;margin-top:6px;font-size:12px;color:var(--mute)}.sm2 .dk{font-weight:700;color:var(--ink);white-space:nowrap}
.shtop{display:flex;align-items:center;gap:10px;padding:12px 16px 0}.shtop b{font-size:16px}
.bk{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink);padding:0}.bk svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.shh2{display:flex;gap:14px;align-items:center}.shh2>img,.shh2>.ph0{width:84px;height:84px;border-radius:18px;object-fit:cover;flex:0 0 auto;font-size:30px}.shh2 h2{font-size:18px;margin:0 0 2px}.shh2 small{display:block;color:var(--mute);font-size:12.5px}
.pgr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;padding:0 16px 110px}
.pi{position:relative;border-radius:18px;overflow:hidden;background:#f4f1ea}.pi>img,.pi>.ph0{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.pa{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:2px;border-radius:99px}
.pa.st{background:#fff;box-shadow:0 2px 8px #0003}
.pa button{width:36px;height:36px;border:0;border-radius:50%;background:transparent;font-size:20px;line-height:1;color:var(--or2);font-weight:700;cursor:pointer;padding:0}
.pa .p1{background:var(--or);color:#1c1915;box-shadow:0 2px 8px #0003}
.pa output{min-width:16px;text-align:center;font-weight:800;font-size:14px}
.pn{margin:8px 2px 0;font-size:14px;line-height:1.3}.pp{margin:2px 2px 0;font-weight:800;color:var(--or2)}
.cbar{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:520px;bottom:calc(66px + env(safe-area-inset-bottom));padding:0 16px;z-index:1900}
.cbar .btn{margin-top:0;box-shadow:0 6px 18px #0003}

/* v22: menu warung per kategori, bisa digeser */
.mtb{display:flex;gap:8px;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none;position:sticky;top:0;z-index:5;background:var(--bg)}.mtb::-webkit-scrollbar{display:none}
.mtb button{flex:0 0 auto;display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:99px;padding:8px 14px;font-size:14px;font-weight:700;cursor:pointer}
.mtb button i{font-style:normal;font-size:11.5px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--soft);color:var(--mute)}
.mtb button[aria-selected="true"]{background:var(--or);border-color:var(--or);color:#1c1915}.mtb button[aria-selected="true"] i{background:#fff6;color:#1c1915}
.msw{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;align-items:flex-start;transition:height .25s var(--eo,ease)}.msw::-webkit-scrollbar{display:none}
.msl{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}.msl .pgr{padding-bottom:110px}
@media (prefers-reduced-motion:reduce){.msw{transition:none}}

/* v23: Warung | Coffee, warna mengikuti aplikasi (oranye, garis tipis, putih) */
.jtb{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin:0 16px 12px;padding:4px;background:var(--soft);border:1px solid var(--line);border-radius:14px}
.jtb button{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:11px;border:1.5px solid transparent;background:none;color:var(--mute);font-size:14px;font-weight:600;cursor:pointer}
.jtb button[aria-selected="true"]{background:var(--card);color:var(--ink);font-weight:800;border-color:var(--or)}
/* tab kategori menu: gaya sama dengan chip kota (.kts) */
.mtb button{border:1.5px solid var(--line);background:#fff;color:var(--mute);font-size:13.5px}
.mtb button[aria-selected="true"]{background:#fff;border-color:var(--or);color:var(--ink)}
.mtb button i,.mtb button[aria-selected="true"] i{background:#fff;border:1px solid var(--line);color:var(--mute)}
.mtb button[aria-selected="true"] i{border-color:var(--or);color:var(--or2)}

/* beranda gaya kartu: ilustrasi, judul, tombol, kartu layanan */
:root{--nb:#1b5aa6}
.hero::after{display:none}
.hero::before{width:190px;height:190px;top:-95px;left:-95px;right:auto;opacity:1;filter:none;border-radius:50%;background:var(--or);box-shadow:0 0 0 10px #fbc07a66;animation:none}
.hb{text-align:center;padding:0 16px}
.hbi{display:block;width:100%;max-width:400px;margin:6px auto 0;-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 60%,transparent 100%)}
.hbt{margin:2px 0 0;font-size:25px;font-weight:800;letter-spacing:-.02em;color:var(--nb)}.hbt em{font-style:normal;color:var(--or)}
.hbc{display:block;margin:14px auto 0;padding:14px 46px;border:0;border-radius:99px;font-size:17px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(90deg,#f9a03a,#f56a22);box-shadow:0 12px 22px -10px #f56a22cc}
.hbc:active{transform:scale(.96)}
.hbs{margin:12px 0 0;font-size:14px;color:var(--ink)}
.grid{-webkit-mask-image:none;mask-image:none;gap:12px;padding:22px 16px 10px}
.grid button{flex:0 0 31%;min-width:0;padding:18px 6px 14px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);font-size:14px;font-weight:800}
.grid button:disabled{background:#fff;opacity:.72}
.grid .ic{width:54px;height:54px;border-radius:18px}
.grid::after{flex:0 0 2px}

/* ikon layanan duotone + gambar utama lebih kecil */
.hbi{max-width:310px;margin-top:2px}
.grid button:not(:disabled) .ic,.grid .ic{width:60px;height:60px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--nb)}
.grid .ic svg{width:44px;height:44px;stroke:var(--nb);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.grid .ic svg .o{fill:#fcb55a;stroke:var(--or)}
.grid button:disabled .ic svg{stroke:#9a958b}.grid button:disabled .ic svg .o{fill:#ececec;stroke:#b5b0a6}

/* tampilan profesional: header bersih, grid layanan, kartu promo */
.hero::before{display:none}
.hero h1{font-size:22px}
.find{border-radius:14px;border:1px solid var(--line);box-shadow:0 2px 10px #1c19151a;backdrop-filter:none}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 6px;padding:20px 14px 2px;overflow:visible}
.grid button{flex:none;min-width:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-size:12px;font-weight:700;opacity:1}
.grid button:disabled{background:none;opacity:1;color:var(--mute)}
.grid button:not(:disabled) .ic,.grid .ic{width:62px;height:62px;border-radius:20px;background:#fff6ea;border:1px solid #f6dcb8}
.grid button:disabled .ic{background:#f6f5f2;border-color:var(--line)}
.grid .ic svg{width:36px;height:36px}
.grid::after{display:none}
.pmc{display:flex;align-items:center;margin:20px 16px 0;padding:16px 6px 16px 18px;border:1px solid #f3dcbc;border-radius:22px;background:linear-gradient(135deg,#fff1dc,#fff 72%);box-shadow:var(--sh);overflow:hidden}
.pmt{flex:1;min-width:0}.pmt small{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--or2)}
.pmt h2{margin:6px 0 4px;font-size:20px;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--nb)}.pmt h2 em{font-style:normal;color:var(--or)}
.pmt p{margin:0 0 12px;font-size:12.5px;color:var(--mute)}
.pmb{padding:11px 20px;border:0;border-radius:12px;font-size:14px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(90deg,#f9a03a,#f56a22);box-shadow:0 8px 16px -8px #f56a22cc}.pmb:active{transform:scale(.96)}
.pmc img{flex:none;width:46%;max-width:170px;-webkit-mask-image:radial-gradient(ellipse 75% 72% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 75% 72% at 50% 50%,#000 58%,transparent 100%)}

/* menu geser + ikon gradasi + efek mewah */
.grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:22px 16px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,#000 93%,transparent);mask-image:linear-gradient(90deg,#000 93%,transparent)}
.grid::-webkit-scrollbar{display:none}.grid::after{display:block;content:"";flex:0 0 2px}
.grid button{flex:0 0 74px;scroll-snap-align:start;gap:9px;animation:lxu .6s cubic-bezier(.22,1,.36,1) both}
.grid button:nth-child(2){animation-delay:.06s}.grid button:nth-child(3){animation-delay:.12s}.grid button:nth-child(4){animation-delay:.12s}.grid button:nth-child(5){animation-delay:.18s}.grid button:nth-child(6){animation-delay:.24s}
.grid button:not(:disabled) .ic,.grid .ic{position:relative;overflow:hidden;width:68px;height:68px;border-radius:23px;background:linear-gradient(145deg,#fff,#fff1dd);border:1px solid #f7dcb6;box-shadow:0 12px 22px -12px #f28c1ebb,inset 0 1px 0 #fff,inset 0 -8px 14px #f28c1e18}
.grid .ic::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,#ffffffd9 50%,transparent 62%);transform:translateX(-130%);animation:lxs 6s ease-in-out infinite}
.grid button:nth-child(2) .ic::after{animation-delay:.5s}.grid button:nth-child(3) .ic::after{animation-delay:1s}.grid button:nth-child(4) .ic::after{animation-delay:1s}.grid button:nth-child(5) .ic::after{animation-delay:1.5s}.grid button:nth-child(6) .ic::after{animation-delay:2s}
.grid .ic svg{width:40px;height:40px;stroke:none;fill:none;filter:drop-shadow(0 3px 3px #1b5aa633)}
.grid .ic svg *{stroke:none}
.grid .ic svg .o{fill:url(#gO)}.grid .ic svg .b{fill:url(#gB)}.grid .ic svg .d{fill:#c85f00}.grid .ic svg .k{fill:#2b2a28}.grid .ic svg .w{fill:#fff}
.grid .ic svg .s,.grid .ic svg .h{fill:none;stroke-linecap:round;stroke-linejoin:round}
.grid .ic svg .s{stroke:#1b5aa6;stroke-width:1.7}.grid .ic svg .h{stroke:#fff;stroke-opacity:.75;stroke-width:1.4}
.grid button:disabled .ic{background:linear-gradient(145deg,#fff,#f3f2ef);border-color:var(--line);box-shadow:none}
.grid button:disabled .ic svg{filter:grayscale(1);opacity:.5}.grid button:disabled .ic svg .o{fill:url(#gO);stroke:none}.grid button:disabled .ic::after{display:none}
.grid button:not(:disabled):hover .ic{transform:translateY(-3px)}
.pmc{box-shadow:0 20px 36px -20px #f28c1e99,var(--sh)}
.pmc img{animation:lxf 5s ease-in-out infinite}
.pmb{position:relative;overflow:hidden}.pmb::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,#ffffff99 50%,transparent 62%);transform:translateX(-130%);animation:lxs 4.5s ease-in-out infinite}
@keyframes lxu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lxs{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@keyframes lxf{50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.grid button,.grid .ic::after,.pmc img,.pmb::after{animation:none!important}}

/* ikon berwarna per layanan + kartu promo menyatu */
.grid button:nth-child(1){--c:#f58220;--t:#fff0dc;--bd:#f7d3a4}
.grid button:nth-child(2){--c:#e8452c;--t:#ffece6;--bd:#f9c9bb}
.grid button:nth-child(4){--c:#1f8fd0;--t:#e6f3fc;--bd:#bcdcf3}
.grid button:nth-child(5){--c:#139a55;--t:#e5f7ec;--bd:#b7e5c9}
.grid button:nth-child(6){--c:#5236d1;--t:#eeeaff;--bd:#d0c7fa}
.grid button:not(:disabled) .ic,.grid button:disabled .ic{background:linear-gradient(145deg,#fff,var(--t));border-color:var(--bd);box-shadow:0 12px 22px -12px color-mix(in srgb,var(--c) 75%,transparent),inset 0 1px 0 #fff,inset 0 -8px 14px color-mix(in srgb,var(--c) 12%,transparent)}
.grid button:nth-child(2) .ic svg .o{fill:url(#gR)}.grid button:nth-child(2) .ic svg .b{fill:url(#gY)}
.grid button:nth-child(4) .ic svg .o{fill:url(#gT)}.grid button:nth-child(4) .ic svg .b{fill:url(#gB)}.grid button:nth-child(4) .ic svg .d{fill:#14609f}
.grid button:nth-child(5) .ic svg .o{fill:url(#gG)}.grid button:nth-child(5) .ic svg .s{stroke:#0f7a42}
.grid button:nth-child(6) .ic svg .b{fill:url(#gP)}.grid button:nth-child(6) .ic svg .o{fill:url(#gY)}
.grid button:disabled .ic svg{filter:saturate(.75) drop-shadow(0 3px 3px #0002);opacity:.9}
.grid button:disabled .ic svg .o,.grid button:disabled .ic svg .b{stroke:none}
.grid button:nth-child(4):disabled .ic svg .o{fill:url(#gT)}.grid button:nth-child(5):disabled .ic svg .o{fill:url(#gG)}.grid button:nth-child(2):disabled .ic svg .o{fill:url(#gR)}.grid button:nth-child(6):disabled .ic svg .o{fill:url(#gY)}
.grid button:disabled .ic::after{display:block}
.pmc{position:relative;border:1px solid transparent;border-radius:24px;background:linear-gradient(135deg,#fff8ec,#fffefb 52%,#f1f6fd) padding-box,linear-gradient(135deg,#f3c27e,#fff 45%,#9cc3ee) border-box;box-shadow:0 22px 38px -22px #f28c1eaa,0 2px 6px #1c19150d}
.pmc::before,.pmc::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.pmc::before{right:-50px;bottom:-70px;width:250px;height:250px;background:radial-gradient(circle,#f5822030,transparent 68%)}
.pmc::after{left:-60px;top:-80px;width:220px;height:220px;background:radial-gradient(circle,#2b75b21c,transparent 68%)}
.pmc>*{position:relative}
.pmc img{mix-blend-mode:multiply}
.pmt small{display:inline-flex;align-items:center;gap:6px}.pmt small::before{content:"";width:16px;height:2px;border-radius:2px;background:linear-gradient(90deg,#f3c27e,var(--or))}
.pmb{box-shadow:0 10px 18px -8px #f56a22d0,inset 0 1px 0 #fff6}

/* gambar tanpa latar, menyatu dengan kartu + animasi halus */
.pmc img{mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none;width:48%;max-width:180px;margin:-6px 0 -6px;filter:drop-shadow(0 12px 10px #1c191526);transform-origin:50% 90%;animation:lxr 5.5s ease-in-out infinite}
@keyframes lxr{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(-2px,-5px) rotate(-.8deg)}65%{transform:translate(3px,-2px) rotate(.7deg)}}
@media (prefers-reduced-motion:reduce){.pmc img{animation:none!important}}

.grid button:nth-child(3){--c:#8a5a3b;--t:#f7ede4;--bd:#e8d3c1}
.grid button:nth-child(3) .ic svg .o{fill:url(#gC)}.grid button:nth-child(3) .ic svg .b{fill:url(#gY)}.grid button:nth-child(3) .ic svg .s{stroke:#7a4a2a}

/* iklan naik + daftar warung/coffee dengan produk */
.grid{padding:14px 16px 6px}.pmc{margin-top:8px}.hero{padding-bottom:6px}
.shl{display:block;columns:1;padding:0 16px}
.sc3{margin:0 0 14px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--sh);overflow:hidden;cursor:pointer}
.sh3{display:flex;align-items:center;gap:12px;padding:12px 14px 10px}
.sh3>img,.sh3>.ph0{flex:none;width:52px;height:52px;border-radius:14px;object-fit:cover;font-size:22px}
.sb3{flex:1;min-width:0}.sb3>b{display:block;font-size:15px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp3{flex:none;align-self:flex-start;padding:2px 10px;border-radius:99px;border:1.5px solid var(--or);font-size:11px;font-weight:800;color:var(--or2);background:#fff}
.pr3{display:flex;gap:10px;overflow-x:auto;padding:2px 14px 14px;scrollbar-width:none;scroll-snap-type:x proximity}.pr3::-webkit-scrollbar{display:none}
.pi3{flex:0 0 86px;scroll-snap-align:start}
.pi3>img,.pi3>.ph0{display:block;width:86px;height:86px;border-radius:14px;object-fit:cover;font-size:26px}
.pi3 b{display:block;margin-top:6px;font-size:12px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pi3 span{display:block;margin-top:2px;font-size:12px;font-weight:800;color:var(--or2)}

/* v37: ikon Warung/Coffee dan halaman legal */
.ti{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.jtb button{gap:7px}
.jtb button[aria-selected="true"] .ti{color:var(--or)}
#shh{display:flex;align-items:center;gap:8px}#shh .ti{width:20px;height:20px;color:var(--or)}
.shtop b{display:inline-flex;align-items:center;gap:7px}.shtop b .ti{width:19px;height:19px;color:var(--or)}
.tp3{display:inline-flex;align-items:center;gap:4px}.tp3 .ti{width:13px;height:13px;stroke-width:2.1}
.lgl{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:18px 16px 4px;font-size:12px}
.lgl a,.lgn a,.lg a{color:var(--bl,#1b5aa6);text-decoration:underline;text-underline-offset:2px}
.lgn{margin:12px 0 0;font-size:12px;color:var(--mute);text-align:center}
.lg{padding:4px 16px 28px}
.lg h1{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:16px 0 4px}
.lg .upd{color:var(--mute);font-size:12.5px;margin-bottom:12px}
.lg h2{font-size:16px;font-weight:800;margin:22px 0 6px}
.lg p,.lg li{font-size:14px;line-height:1.65;color:var(--ink)}
.lg p{margin:0 0 10px}.lg ul{margin:0 0 10px;padding-left:20px}.lg li{margin-bottom:4px}
.lg .note{background:var(--warnbg);border:1px solid #f1dcae;border-radius:14px;padding:12px 14px;margin:12px 0;font-size:13.5px}
.lg .back{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:700;text-decoration:none}
.lg nav.lnav{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.lg nav.lnav a{padding:7px 12px;border:1px solid var(--line);border-radius:99px;font-size:12.5px;font-weight:700;text-decoration:none;color:var(--ink)}

/* v38: menu pengaturan */
.stg{padding:6px 0 0}.stg h2{padding:12px 18px 4px}
.stg details{border-top:1px solid var(--line)}
.stg summary{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;list-style:none;font-size:14.5px}
.stg summary::-webkit-details-marker{display:none}
.stg summary b{flex:1;font-weight:700}
.stg summary .ti{width:20px;height:20px;color:var(--or)}
.stg summary .cv{width:16px;height:16px;color:var(--mute);transition:transform .2s}
.stg details[open] .cv{transform:rotate(90deg)}
.stg .sbd{padding:0 18px 14px 50px}.stg .sbd p{font-size:13.5px;line-height:1.6;margin:0 0 8px}
.stg .sbd a{color:var(--bl,#1b5aa6);font-weight:700}

/* v39: tombol Pengaturan */
.stgb{display:flex;align-items:center;gap:12px;width:calc(100% - 32px);margin:14px 16px;padding:14px 18px;text-align:left}
.stgb b{flex:1;font-weight:700}.stgb .ti{width:20px;height:20px;color:var(--or)}.stgb .cv{width:16px;height:16px;color:var(--mute);transition:transform .2s}
.stgb[aria-expanded="true"] .cv{transform:rotate(90deg)}
.stg{margin-top:0}

/* v40: daftar warung bisa digulir (2 kartu terlihat), lokasi, kontak kantor */
#shl{position:relative;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity;-webkit-overflow-scrolling:touch}
#shl .sc3{scroll-snap-align:start}
.lc3{display:flex;align-items:center;gap:6px;padding:0 14px 10px;font-size:12px;color:var(--mute)}
.lc3 .ti{width:15px;height:15px;color:var(--or)}
.lc3 span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc3 a,a.mp{flex:none;font-weight:800;color:var(--bl,#1b5aa6);text-decoration:none}
a.mp{display:inline-flex;align-items:center;gap:4px}a.mp .ti{width:14px;height:14px;color:var(--or)}

/* v41: ukuran banner promo mengikuti rasio 1080x320 (27:8), isi ikut mengecil di layar sempit */
.pmc{container-type:inline-size;aspect-ratio:1080/320;padding:0 0 0 16px;align-items:center}
.pmt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.pmt small{font-size:clamp(9px,2.1cqw,11px)}
.pmt h2{margin:3px 0 2px;font-size:clamp(14px,4.3cqw,21px)}
.pmt p{margin:0 0 8px;font-size:clamp(10px,2.5cqw,12.5px)}
.pmb{padding:clamp(6px,1.8cqw,10px) clamp(14px,4cqw,20px);font-size:clamp(11px,2.9cqw,14px)}
.pmc img{width:auto;height:100%;max-width:44%;margin:0;object-fit:contain}
@container (max-width:400px){.pmt p{display:none}}

/* v42: banner promo tepat di bawah tombol cari "Mau ke mana hari ini?" */
.hero+.pmc{margin-top:12px}

/* v43: bayangan banner lebih tipis */
.pmc{box-shadow:0 6px 14px -12px #f28c1e66,0 1px 3px #1c19150d}
.pmc::before{opacity:.45}
.pmc img{filter:drop-shadow(0 4px 4px #1c19150f)}

/* v44: menu layanan sedikit lebih kecil + hak cipta */
.grid{gap:12px;padding:16px 16px 12px}
.grid button{flex:0 0 64px;gap:7px;font-size:11.5px}
.grid button:not(:disabled) .ic,.grid button:disabled .ic,.grid .ic{width:58px;height:58px;border-radius:20px}
.grid .ic svg{width:34px;height:34px}
.cpr{margin:6px 16px 4px;text-align:center;font-size:12px;color:var(--mute)}

/* v45: label Segera mengikuti warna ikon; ketuk menampilkan info pengembangan */
.grid em{color:var(--c);background:var(--t);border:1px solid var(--bd);font-weight:800}
.grid button[data-soon]{cursor:pointer}
.grid button[data-soon] .ic svg{filter:saturate(.8) drop-shadow(0 3px 3px #0002)}
.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,12px);z-index:3000;max-width:min(88vw,420px);padding:11px 18px;border-radius:14px;background:#1d1a16;color:#fff;font-size:13px;font-weight:600;line-height:1.4;text-align:center;box-shadow:0 10px 26px #0004;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* v47: efek mewah Warung/Coffee (sorot emas mengikuti jari/kursor, riak emas, kilau, tekan lembut) */
.sc3,.jtb button{position:relative;overflow:hidden;--mx:50%;--my:50%}
.sc3{transition:transform .35s var(--spr),box-shadow .35s var(--eo),border-color .25s}
.sc3::before,.jtb button::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(230px circle at var(--mx) var(--my),#f9d28a66,#f28c1e1c 48%,transparent 72%)}
.sc3::after,.jtb button::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#fffc 50%,transparent 65%);transform:translateX(-130%)}
.sc3.pr::before,.jtb button.pr::before{opacity:1}
.sc3.lux-go::after,.jtb button.lux-go::after{animation:luxs .85s ease-out}
.sc3.pr{transform:scale(.985);border-color:#f0b862;box-shadow:0 6px 16px -10px #f28c1e99,0 0 0 1px #f6d9a8}
.jtb button.pr{transform:scale(.96)}
.jtb button{transition:transform .3s var(--spr),background-color .25s,border-color .25s,box-shadow .3s}
.jtb button[aria-selected="true"]{background:linear-gradient(135deg,#fffaf0,#ffefd2);box-shadow:0 6px 14px -9px #f28c1ecc,inset 0 1px 0 #fff}
.jtb button[aria-selected="true"]::after{animation:luxs 1s .05s ease-out}
.luxr{position:absolute;border-radius:50%;pointer-events:none;z-index:2;background:radial-gradient(circle,#ffe3aacc,#f6a63a55 42%,transparent 70%);transform:translate(-50%,-50%) scale(0);animation:luxrp .75s ease-out forwards}
@keyframes luxrp{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
@keyframes luxs{0%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@media (hover:hover){.sc3:hover{border-color:#f3cf94;box-shadow:0 14px 28px -16px #f28c1e88,var(--sh)}.sc3:hover::before,.jtb button:hover::before{opacity:1}.jtb button:hover:not([aria-selected="true"]){border-color:#f3cf94;color:var(--ink)}}
#shl{padding-top:6px;padding-bottom:6px}
@media (prefers-reduced-motion:reduce){.luxr{display:none}.sc3::after,.jtb button::after{display:none}.sc3.pr,.jtb button.pr{transform:none}}

.top{position:relative}.chip.ic{display:inline-flex;align-items:center;justify-content:center;padding:7px 9px}.chip.ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kpop{position:absolute;right:12px;top:100%;margin-top:6px;z-index:2100;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:6px;min-width:170px}.kpop button{display:flex;width:100%;justify-content:space-between;gap:10px;border:0;background:none;padding:10px 12px;border-radius:10px;font:600 14px "Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);cursor:pointer}.kpop button[aria-checked=true]{background:var(--warnbg)}
#app.hasnav{padding-bottom:88px}

.chip.ic{overflow:visible}.bn{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#e5484d;color:#fff;font:700 11px/18px "Plus Jakarta Sans",system-ui,sans-serif;font-style:normal;text-align:center}
.npop{width:min(320px,calc(100% - 24px));max-height:62vh;overflow:auto;padding:0}.nh{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}.nh button{border:0;background:none;color:var(--or2);font:700 12.5px "Plus Jakarta Sans",system-ui,sans-serif;cursor:pointer;width:auto;padding:0}
.nit{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:13.5px}.nit small{color:var(--mute);flex:0 0 auto}.nit.nw{background:var(--warnbg)}.nit:last-child{border-bottom:0}
.top #kpop{right:58px}

/* v49: foto profil, foto unit, jenis kendaraan */
.pfp{display:block;width:72px;height:72px;border-radius:50%;object-fit:cover;border:1.5px solid var(--line);margin:6px 0;background:#fff}
.pfu{display:block;width:96px;height:72px;border-radius:12px;object-fit:cover;border:1.5px solid var(--line);margin:6px 0;background:#fff}
.dvr{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.pr{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;margin-top:6px}

/* Menu produk: area terpisah dari foto & nama warung */
.mn3{position:relative;z-index:1;border-top:1px solid var(--line);background:#fff8ee;padding-top:9px}
.mh3{padding:0 14px 6px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--or2)}
.mn3 .pr3{padding:2px 14px 14px;overscroll-behavior-x:contain;touch-action:pan-x pan-y;contain:content}
.pi3{transition:transform .2s}.pi3:active{transform:scale(.96)}
.pi3>img,.pi3>.ph0{box-shadow:0 2px 8px -4px #0005}
#shh2{margin-top:6px}

/* ==========================================================================
   v52: TAMPILAN PREMIUM
   Bahasa visual: putih bersih + tinta hangat + emas-oranye + biru logo.
   Lapisan ini ditaruh paling bawah, jadi menimpa gaya lama tanpa mengubah
   fitur. Semua halaman (pelanggan, driver, admin, warung, legal) ikut.
   ========================================================================== */
:root{
 --ink:#171410;--mute:#6f6a61;--line:#ece7de;--line2:#f3efe8;
 --or:#F58220;--or2:#B85F00;--gold:#E9A23B;--gold2:#FFD08A;
 --bl:#245F9E;--blbg:#eef4fb;--blln:#cfe0f2;
 --sh:0 1px 2px #17141008,0 4px 12px -2px #1714100d,0 14px 30px -14px #1714101c;
 --sh2:0 2px 4px #1714100a,0 18px 40px -14px #17141029;
 --disp:"Sora","Plus Jakarta Sans",system-ui,"Segoe UI",Roboto,sans-serif;
}
::selection{background:#ffe2b8;color:var(--ink)}
body{letter-spacing:-.005em}
h1,h2,.sec{font-family:var(--disp)}
*{scrollbar-width:thin;scrollbar-color:#e0d9cc transparent}
@media (min-width:560px){
 html{background:#efebe3}
 body{background:#fff;box-shadow:0 0 0 1px var(--line),0 40px 90px -36px #17141066}
}

/* ---- header: kaca bening yang menempel di atas ---- */
.top{position:sticky;top:0;z-index:2200;padding:8px 16px;background:#ffffffd9;-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);border-bottom:0;box-shadow:0 1px 0 var(--line)}
body.onhome .top{border-bottom:0}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#f5822070,transparent)}
.logo{gap:10px;font-family:var(--disp);font-size:19px;font-weight:700;letter-spacing:-.04em}
.logo img{width:46px;height:43px}
.logo b{background:linear-gradient(135deg,#FFB347,#F58220 50%,#D9690B);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo small{margin-top:3px;font:500 11px/1.2 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.01em;color:var(--mute)}
.chip.ic,.chip.ic:hover{width:40px;height:40px;padding:0;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px #1714100d}
.chip.ic:hover{border-color:#f3cf94}
.kpop{border-radius:18px;border:1px solid var(--line);box-shadow:var(--sh2);padding:6px}
.kpop button{border-radius:12px;font-weight:600}
.bn{box-shadow:0 0 0 2px #fff}

/* ---- beranda ---- */
.hero{padding:10px 16px 4px}
.hero::before,.hero::after{display:none}
.hr{margin-bottom:14px}
.hr small{font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--mute)}
.hr h1{margin-top:2px;font-size:26px;font-weight:700;letter-spacing:-.04em;line-height:1.15}
.find{height:54px;padding:0 18px;gap:12px;border-radius:18px;border:1px solid var(--line);background:#fff;box-shadow:var(--sh);color:var(--mute);font-size:15px;font-weight:500;-webkit-backdrop-filter:none;backdrop-filter:none}
.find svg{flex:none;width:20px;height:20px;color:var(--or)}
@media (hover:hover){.find:hover{transform:translateY(-1px);box-shadow:var(--sh2);border-color:#f3cf94}}

/* banner promo: satu-satunya blok gelap, jadi pusat perhatian */
.pmc{margin:14px 16px 0;border:1px solid #3d3020;border-radius:24px;background:radial-gradient(120% 150% at 88% 115%,#f5822044,transparent 56%),linear-gradient(135deg,#1c1813,#2b2118 62%,#3a2915);box-shadow:0 20px 36px -20px #171410b3,inset 0 1px 0 #ffffff14}
.pmc::before{right:-40px;bottom:-60px;width:230px;height:230px;opacity:1;background:radial-gradient(circle,#f5822052,transparent 68%)}
.pmc::after{left:0;top:0;width:100%;height:1px;border-radius:0;background:linear-gradient(90deg,transparent,#ffd08a99,transparent)}
.pmt small{font-weight:700;letter-spacing:.03em;text-transform:none;color:var(--gold2)}
.pmt small::before{background:linear-gradient(90deg,transparent,var(--gold2))}
.pmt h2{font-family:var(--disp);font-weight:700;letter-spacing:-.035em;color:#fff}
.pmt h2 em{font-style:normal;background:linear-gradient(135deg,#FFD08A,#F58220);-webkit-background-clip:text;background-clip:text;color:transparent}
.pmt p{color:#d8d0c2}
.pmb{border-radius:12px;font-weight:800;color:#1c1408;background:linear-gradient(135deg,#FFD08A,#F5A33A 52%,#F58220);box-shadow:0 8px 18px -8px #f58220d0,inset 0 1px 0 #ffffff90}
.pmb::after{display:none}
.pmc img{filter:drop-shadow(0 10px 14px #0009)}

/* ikon layanan: ubin putih tenang, tanpa kilau yang terus berputar */
.grid button{font-weight:700;color:var(--ink)}
.grid button .ic::after,.grid button:disabled .ic::after{display:none}
.grid button:not(:disabled) .ic,.grid button:disabled .ic,.grid .ic{border-radius:22px;border:1px solid var(--line);background:#fff;box-shadow:var(--sh),inset 0 -12px 18px color-mix(in srgb,var(--c,#F58220) 9%,transparent)}
.grid button:disabled .ic{background:#fcfbf8;box-shadow:none}
.grid em{font-size:10px;font-weight:700;padding:1px 8px}

.chips{padding:14px 16px 4px}
.ch{border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,#fff,#fcfaf6);box-shadow:none}
.ch small{font-weight:600}
.ch b{font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:-.02em}
.sec{margin:24px 16px 12px;font-size:17px;font-weight:700;letter-spacing:-.03em}
.live{border:1px solid #f5ddb4;border-radius:18px;background:linear-gradient(135deg,#fff8ec,#fff);box-shadow:var(--sh)}

/* ---- kartu, form, tombol ---- */
.card{margin:14px 16px;padding:20px;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh)}
@media (hover:hover){.card:hover{border-color:var(--line);box-shadow:var(--sh2)}}
h2{font-size:19px;font-weight:700;letter-spacing:-.03em}
label{margin:14px 0 6px;font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--mute)}
input,select,textarea{border:1px solid #e3ddd1;border-radius:14px;background:#fff;font-weight:500;box-shadow:inset 0 1px 2px #1714100a}
input:focus,select:focus,textarea:focus{border-color:var(--or);box-shadow:0 0 0 4px #f5822026}
input::placeholder,textarea::placeholder{color:#a8a296;font-weight:400}

.btn{border-radius:16px;font-weight:800;letter-spacing:-.01em}
.btn:not(:disabled){color:#1c1408;background:linear-gradient(180deg,#FFB44D,#F58220);box-shadow:0 10px 22px -10px #f58220cc,inset 0 1px 0 #ffffff80,inset 0 -1px 0 #b85f0044}
.btn:not(:disabled):active{box-shadow:0 3px 10px -4px #f58220aa,inset 0 1px 0 #ffffff60}
.btn:disabled{opacity:1;color:#a39d91;background:#f1ede5;box-shadow:none;filter:none}
.btn.g:not(:disabled){color:var(--ink);background:#fff;border:1px solid #e3ddd1;font-weight:700;box-shadow:0 1px 2px #1714100d}
.btn.g:not(:disabled):active{box-shadow:none;background:#faf7f1}
.btn.s{border-radius:12px}
@media (hover:hover){
 .btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 14px 26px -10px #f58220d9,inset 0 1px 0 #ffffff80,inset 0 -1px 0 #b85f0044}
 .btn.g:not(:disabled):hover{transform:translateY(-1px);border-color:#f3cf94;box-shadow:0 6px 16px -8px #f5822066}
}
.gps{border-radius:99px;border:1px solid #f3cf94;background:#fffaf1;color:var(--or2)}
.er{font-weight:600}

#auth{margin-top:28px;padding:26px 22px;position:relative;overflow:hidden;border-radius:26px;box-shadow:var(--sh2)}
#auth::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#FFD08A,#F58220 55%,#2F7FC0)}
#auth h2{font-size:24px;letter-spacing:-.04em}

/* ---- kontrol segmen & tab ---- */
.seg,.jtb{padding:4px;border:0;border-radius:16px;background:#f4f1ea}
.seg button,.jtb button{border:0;border-radius:12px;font-weight:600}
.seg button[aria-pressed="true"],.jtb button[aria-selected="true"]{color:var(--ink);font-weight:800;background:#fff;border:0;box-shadow:0 1px 2px #1714101f,0 6px 14px -6px #17141033}
.jtb button[aria-selected="true"]::after{animation:none;display:none}
.kts button,.mtb button{border:1px solid #e3ddd1;font-weight:600}
.kts button[aria-pressed="true"],.mtb button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.mtb button i{border:0;background:#f4f1ea;color:var(--mute)}
.mtb button[aria-selected="true"] i{border:0;background:#ffffff2b;color:#fff}

/* ---- warung & menu ---- */
.sc3{border-radius:22px;border:1px solid var(--line);box-shadow:var(--sh)}
.sh3{padding:14px 14px 10px}
.sh3>img,.sh3>.ph0{width:56px;height:56px;border-radius:16px}
.sb3>b{font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:-.025em}
.sm2{color:var(--mute)}
.tp3{border:0;background:#fff3e0;color:var(--or2);font-weight:700}
.lc3{color:var(--mute)}
.mn3{background:#fcfaf6;border-top:1px solid var(--line2)}
.mh3{font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--mute)}
.pi3>img,.pi3>.ph0{border-radius:16px}
.pi3 span{font-family:var(--disp);font-size:12px;font-weight:700;color:var(--or2)}
.ph0{background:linear-gradient(135deg,#ffeacb,#ffd698);color:#8a4a00;font-family:var(--disp)}
.pi{border-radius:20px;box-shadow:var(--sh)}
.pa .p1{background:linear-gradient(135deg,#FFC46B,#F58220);color:#1c1408}
.pn{font-weight:600}
.pp{font-family:var(--disp);font-weight:700}
.shs input{height:48px;border-radius:16px}
.bk{border:1px solid var(--line);box-shadow:0 1px 2px #1714100d}
.shh2{gap:14px}
.shh2>img,.shh2>.ph0{border-radius:20px}
.sp,.shm,.fc{border-radius:20px}

/* ---- sheet pesan, tarif, pelacakan ---- */
.sheet{margin-top:-26px;padding:12px 18px 24px;border-radius:30px 30px 0 0;box-shadow:0 -12px 40px -12px #17141026}
.hd{width:44px;height:5px;background:#e3ddd1}
.fare{margin-top:16px;border:1px solid #f5ddb4;border-radius:18px;background:linear-gradient(135deg,#fff8ec,#fff)}
.fare b{font-family:var(--disp);font-size:26px;font-weight:700;letter-spacing:-.04em;color:var(--ink)}
.stp li::before{height:6px}
#trk[data-s="mencari"] .stp li:nth-child(-n+1)::before,#trk[data-s="diterima"] .stp li:nth-child(-n+2)::before,#trk[data-s="jalan"] .stp li:nth-child(-n+3)::before,#trk[data-s="selesai"] .stp li::before{background:linear-gradient(90deg,#FFC46B,#F58220)}
#trk #dv{border-radius:16px;background:#fcfaf6}

/* ---- peta ---- */
.mk{border-color:var(--or);box-shadow:0 4px 12px -2px #17141066}
.sb input{box-shadow:0 6px 20px -6px #17141055}
.sb button,.rc{box-shadow:0 6px 18px -6px #17141055}
.ly,.sr{border-radius:18px;box-shadow:var(--sh2)}

/* ---- menu bawah: kapsul kaca melayang ---- */
.nav{width:calc(100% - 24px);bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:6px;border:0;border-radius:26px;background:#ffffffe8;-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);box-shadow:0 0 0 1px var(--line),0 14px 36px -10px #17141040,0 2px 6px #1714100f}
.nav button{gap:4px;padding:8px 4px 7px;border-radius:20px;font-size:11px;font-weight:700;transition:background-color .25s var(--eo),color .25s}
.nav button[aria-current="true"]{color:var(--or2);background:#fff1dc}
.nav button[aria-current="true"] svg{stroke:var(--or2);fill:#f5822030}
.nb{top:3px}
#app{padding-bottom:104px}
#app.hasnav{padding-bottom:108px}
.cbar{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
.msl .pgr,.pgr{padding-bottom:150px}
.toast{bottom:104px;border-radius:99px;padding:11px 20px;background:var(--ink)}

/* ---- chat ---- */
.msgs{gap:10px;padding:12px 2px;border-top:1px solid var(--line2)}
.bb{padding:9px 13px;border:0;border-radius:18px 18px 18px 6px;background:#f4f1ea}
.bb.me{border:0;border-radius:18px 18px 6px 18px;color:#fff;background:linear-gradient(135deg,#2F7FC0,#1F5F9C)}
.bb.me span{color:#fff}
.bb.me small{color:#ffffffb8}
.bb.me a,.bb.me a.loc{color:#fff;text-decoration:underline}
.qr button{border:1px solid #e3ddd1;font-weight:600}
.cf input{border-radius:99px}
.ib{border-radius:50%}
.cimg{border-radius:14px}

/* ---- tabel & lencana (admin) ---- */
th{padding:10px 8px;font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--mute)}
td{padding:12px 8px;border-bottom-color:var(--line2)}
tr.rw:hover td{background:#fffaf1}
.bd{padding:3px 10px;border:0;background:#fff2dd;color:var(--or2);font-size:11.5px}
.bd.selesai,.bd.on{border:0;background:#e6f6ec;color:#14703a}
.bd.batal{border:0;background:#fdeceb;color:#b3261e}
.bd.off{border:0;background:#f1ede5;color:var(--mute)}
.dc{padding:14px;border-radius:18px;box-shadow:var(--sh)}

/* ---- driver ---- */
#tg{height:52px;border:0;border-radius:99px;font-weight:700;background:#f4f1ea}
#tg.on{border:0;background:#e6f6ec;color:#14703a;box-shadow:inset 0 0 0 1px #b6e2c6}

/* ---- halaman legal ---- */
.lg h1{font-family:var(--disp);letter-spacing:-.04em}
.lg nav.lnav a{border-radius:99px}

@media (prefers-reduced-motion:reduce){.find,.btn,.card,.nav button{transition:none!important}}

/* v53: Warung dan Coffee dipisah, masing-masing punya ikon dan warna sendiri */
#shh,#shh2{display:flex;align-items:center;gap:10px;margin:24px 16px 12px}
#shh .ti,#shh2 .ti{width:34px;height:34px;padding:7px;border-radius:12px;stroke-width:1.9}
#shh .ti{background:#fff3e0;color:#B85F00}
#shh2 .ti{background:#f5ebe1;color:#7a4a2a}
#shh2{margin-top:30px;padding-top:22px;border-top:1px solid var(--line2)}
.tp3.kp{background:#f5ebe1;color:#7a4a2a}
.sc3:has(.tp3.kp) .mn3{background:#fbf6f0}
.sc3:has(.tp3.kp) .mh3,.sc3:has(.tp3.kp) .pi3 span{color:#7a4a2a}
.sc3:has(.tp3.kp) .ph0{background:linear-gradient(135deg,#f3e3d3,#e2c3a5);color:#5e3a1f}
.sc3:has(.tp3.kp) .lc3 .ti{color:#8a5a3b}

/* v54: ikon premium + efek lebih halus */
.nav button svg{width:24px;height:24px;stroke-width:1.7;transition:transform .45s var(--spr),color .25s}
.nav svg .d{fill:currentColor;fill-opacity:.14;stroke:none}
.nav button[aria-current="true"] svg{fill:none;stroke:var(--or2);animation:navpop .5s var(--spr)}
.nav button[aria-current="true"] svg .d{fill:url(#gO);fill-opacity:.55}
@keyframes navpop{0%{transform:translateY(3px) scale(.82)}60%{transform:translateY(-2px) scale(1.1)}100%{transform:none}}
.grid button:not(:disabled) .ic,.grid button:disabled .ic,.grid .ic{width:66px;height:66px;border-radius:24px;overflow:hidden;border:1px solid color-mix(in srgb,var(--c,#F58220) 24%,#fff);background:radial-gradient(120% 100% at 30% 0%,#fff 0%,var(--t,#fff3e0) 68%,color-mix(in srgb,var(--c,#F58220) 22%,var(--t,#fff3e0)) 100%);box-shadow:0 14px 24px -14px color-mix(in srgb,var(--c,#F58220) 85%,transparent),0 2px 4px #1714100a,inset 0 1px 0 #fff,inset 0 -10px 18px color-mix(in srgb,var(--c,#F58220) 14%,transparent)}
.grid button:disabled .ic{filter:saturate(.7)}
.grid .ic::before{content:"";position:absolute;left:7%;right:7%;top:0;height:48%;border-radius:0 0 60% 60%/0 0 100% 100%;background:linear-gradient(180deg,#ffffffd0,#fff0);pointer-events:none}
.grid .ic svg{position:relative;width:42px;height:42px;filter:drop-shadow(0 4px 4px color-mix(in srgb,var(--c,#F58220) 38%,transparent))}
.find::after{content:"";flex:none;margin-left:auto;width:34px;height:34px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1408' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat,linear-gradient(135deg,#FFD08A,#F58220);box-shadow:0 6px 12px -6px #f58220cc,inset 0 1px 0 #fff8}
.chip.ic svg{width:19px;height:19px;stroke-width:1.8}
.ti{stroke-width:1.8}
/* satu momen pembuka saat halaman dimuat */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero .hr,.hero .find,.hero+.pmc{animation:rise .7s var(--eo) both}
.hero .find{animation-delay:.08s}.hero+.pmc{animation-delay:.16s}
.pmc::after{background:linear-gradient(90deg,transparent,#ffd08acc,transparent);background-size:60% 100%;background-repeat:no-repeat;animation:edge 1.6s .5s var(--eo) both}
@keyframes edge{from{background-position:-60% 0}to{background-position:160% 0}}
.sc3,.pi,.card{transition:transform .35s var(--spr),box-shadow .3s var(--eo)}
@media (prefers-reduced-motion:reduce){.hero .hr,.hero .find,.hero+.pmc,.pmc::after,.nav button svg{animation:none!important}}

/* v55: beranda = dua kartu kategori (Warung kiri, Coffee kanan); ketuk untuk daftar lengkap */
#shw{padding:0 16px}
#shw>.shs{padding:0 0 12px}
.jc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.jc:has(.jt:only-child){grid-template-columns:1fr}
.jt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:150px;padding:16px;text-align:left;border:1px solid var(--line);border-radius:24px;background:radial-gradient(120% 90% at 100% 0%,#fff3e0,#fff 62%);box-shadow:var(--sh);color:var(--ink);cursor:pointer;overflow:hidden;transition:transform .35s var(--spr),box-shadow .3s var(--eo)}
.jt.kopi{background:radial-gradient(120% 90% at 100% 0%,#f5ebe1,#fff 62%)}
.jt:active{transform:scale(.97)}
@media (hover:hover){.jt:hover{box-shadow:var(--sh2);transform:translateY(-2px)}}
.jti{display:grid;place-items:center;width:52px;height:52px;margin-bottom:auto;border-radius:18px;background:linear-gradient(145deg,#fff,#ffe6c2);color:#B85F00;box-shadow:0 10px 18px -10px #f58220cc,inset 0 1px 0 #fff}
.jt.kopi .jti{background:linear-gradient(145deg,#fff,#ecd5bf);color:#7a4a2a;box-shadow:0 10px 18px -10px #7a4a2acc,inset 0 1px 0 #fff}
.jti .ti{width:28px;height:28px}
.jt b{margin-top:12px;font:700 18px var(--disp);letter-spacing:-.035em}
.jt small{font-size:12px;color:var(--mute);line-height:1.35}
.jt .go{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 1px 3px #17141022}
.jt .go .ti{width:15px;height:15px}
:is(#shw,#lst) .shl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
:is(#shw,#lst) .sc3{margin:0;border-radius:20px}
:is(#shw,#lst) .sh3{position:relative;flex-direction:column;align-items:stretch;gap:8px;padding:8px 8px 6px}
:is(#shw,#lst) .sh3>img,:is(#shw,#lst) .sh3>.ph0{width:100%;height:auto;aspect-ratio:4/3;border-radius:14px;font-size:30px}
:is(#shw,#lst) .sb3{padding:0 4px}
:is(#shw,#lst) .sb3>b{font-size:14px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
:is(#shw,#lst) .sm2{flex-direction:column;gap:2px;font-size:11.5px}
:is(#shw,#lst) .tp3{position:absolute;top:14px;right:14px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 8px -2px #17141044}
:is(#shw,#lst) .tp3.kp{background:#f5ebe1ee}
:is(#shw,#lst) .lc3{flex-wrap:wrap;padding:0 12px 8px;gap:2px 6px;font-size:11.5px}
:is(#shw,#lst) .lc3 span{flex:1 1 calc(100% - 22px)}
:is(#shw,#lst) .mn3{padding-top:8px}
:is(#shw,#lst) .mh3,:is(#shw,#lst) .pr3{padding-left:10px;padding-right:10px}
:is(#shw,#lst) .pi3{flex:0 0 68px}
:is(#shw,#lst) .pi3>img,:is(#shw,#lst) .pi3>.ph0{width:68px;height:68px;border-radius:14px;font-size:22px}
:is(#shw,#lst) .pi3 b{font-size:11px}
#lst{padding-bottom:20px}
#lstt{display:inline-flex;align-items:center;gap:8px;font:700 17px var(--disp);letter-spacing:-.03em}
#lstt .ti{width:30px;height:30px;padding:6px;border-radius:10px;background:#fff3e0;color:#B85F00}

/* v50: Warung | Coffee jadi 2 tombol nav; daftar muncul sesuai pilihan */
#shw>.jtb{margin:0 0 12px}
#jl{padding-top:0}
:is(#shw,#lst) #jl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
#jl[hidden]{display:none}

/* v51: tombol Warung | Coffee berwarna premium; daftar satu kolom, tersusun atas ke bawah, di tengah */
#shw #jtb{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px;padding:0;background:none;border:0;border-radius:0}
#shw #jtb button.jb{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:124px;padding:16px 10px 14px;border:0;border-radius:24px;color:#fff;text-align:center;cursor:pointer;
 transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,filter .35s,opacity .35s}
#shw #jtb button.warung{background:linear-gradient(145deg,#ffc266 0%,#f58220 52%,#d45f00 100%);box-shadow:0 14px 26px -14px #d45f00cc,inset 0 1px 0 #ffffff80,inset 0 -10px 18px -12px #7a3300}
#shw #jtb button.kopi{background:linear-gradient(145deg,#b98458 0%,#7a4a2a 52%,#3d2212 100%);box-shadow:0 14px 26px -14px #3d2212cc,inset 0 1px 0 #ffffff59,inset 0 -10px 18px -12px #1c0e05}
#shw #jtb button.jb::before{content:"";position:absolute;inset:0 0 52% 0;z-index:-1;opacity:1;background:linear-gradient(180deg,#ffffff38,#ffffff00);border-radius:inherit;pointer-events:none}
#shw #jtb button.jb::after{content:"";position:absolute;inset:0;z-index:-1;display:block;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#ffffff66 50%,transparent 65%);transform:translateX(-130%);animation:none}
#shw #jtb button.jb[aria-selected="true"]::after{animation:jshine 1.1s .1s ease-out}
.jbi{display:grid;place-items:center;width:54px;height:54px;margin-bottom:4px;border-radius:50%;background:#ffffff2e;border:1px solid #ffffff59;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 8px 16px -8px #0006,inset 0 1px 0 #ffffff66}
.jbi .ti{width:28px;height:28px;color:#fff;stroke-width:1.8}
#shw #jtb button.jb b{font:800 17px var(--disp);letter-spacing:-.02em;text-shadow:0 1px 6px #0003}
#shw #jtb button.jb small{font-size:11.5px;font-weight:600;color:#ffffffd9}
#shw #jtb button.jb:not([aria-selected="true"]){filter:saturate(.8);opacity:.9}
#shw #jtb button.jb[aria-selected="true"]{transform:translateY(-3px) scale(1.02);filter:none;opacity:1}
#shw #jtb button.warung[aria-selected="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5px #f58220,0 22px 34px -14px #d45f00e6,inset 0 1px 0 #ffffff80}
#shw #jtb button.kopi[aria-selected="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5px #7a4a2a,0 22px 34px -14px #3d2212e6,inset 0 1px 0 #ffffff59}
#shw #jtb button.jb[aria-selected="true"] .jbi{background:#ffffff40;box-shadow:0 0 0 6px #ffffff1f,0 10px 18px -8px #0006,inset 0 1px 0 #ffffff80}
#shw #jtb button.jb.pr{transform:scale(.95)}
@media (hover:hover){#shw #jtb button.jb:hover{transform:translateY(-3px);opacity:1;filter:none}}
#shw #jl{display:flex;flex-direction:column;align-items:center;gap:16px;padding:2px 0 20px}
#jl .jhd{display:flex;flex-direction:column;align-items:center;gap:2px;margin:2px 0 2px;text-align:center}
#jl .jhi{display:grid;place-items:center;width:46px;height:46px;margin-bottom:6px;border-radius:16px;color:#fff;background:linear-gradient(145deg,#ffc266,#d45f00);box-shadow:0 12px 20px -10px #d45f00cc}
#jl[data-k="kopi"] .jhi{background:linear-gradient(145deg,#b98458,#3d2212);box-shadow:0 12px 20px -10px #3d2212cc}
#jl .jhi .ti{width:24px;height:24px;color:#fff}
#jl .jhd b{font:800 22px var(--disp);letter-spacing:-.03em}
#jl .jhd small{font-size:12.5px;color:var(--mute)}
#jl .jhd::after{content:"";width:44px;height:4px;margin-top:8px;border-radius:99px;background:linear-gradient(90deg,#ffc266,#d45f00)}
#jl[data-k="kopi"] .jhd::after{background:linear-gradient(90deg,#b98458,#3d2212)}
#jl .sc3{width:100%;max-width:440px;margin:0;border-radius:26px;background:linear-gradient(180deg,#fff,#fffaf3);border:1px solid #f0e4d2;box-shadow:0 18px 34px -22px #3d221255,0 2px 6px #1714100d}
#jl[data-k="kopi"] .sc3{background:linear-gradient(180deg,#fff,#fbf6f1)}
#jl .sh3{align-items:stretch;padding:10px 10px 8px}
#jl .sh3>img,#jl .sh3>.ph0{aspect-ratio:16/10;border-radius:18px}
#jl .sb3{text-align:center;padding:2px 6px}
#jl .sb3>b{font-size:17px;-webkit-line-clamp:2;letter-spacing:-.02em}
#jl .sm2{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 12px;font-size:12px}
#jl .lc3{justify-content:center;text-align:center}
#jl .mh3{text-align:center}
#jl.ani .sc3,#jl.ani .jhd{animation:jin .55s cubic-bezier(.2,.8,.2,1) both}
#jl.ani>:nth-child(2){animation-delay:70ms}
#jl.ani>:nth-child(3){animation-delay:140ms}
#jl.ani>:nth-child(4){animation-delay:210ms}
#jl.ani>:nth-child(5){animation-delay:280ms}
#jl.ani>:nth-child(6){animation-delay:350ms}
#jl.ani>:nth-child(7){animation-delay:420ms}
#jl.ani>:nth-child(8){animation-delay:490ms}
#jl.ani>:nth-child(9){animation-delay:560ms}
@keyframes jin{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes jshine{to{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){#jl.ani .sc3,#jl.ani .jhd{animation:none}#shw #jtb button.jb[aria-selected="true"]::after{animation:none}#shw #jtb button.jb{transition:none}}

/* v52: tombol lebih kecil; kartu: foto warung, nama, alamat, lalu foto-nama-harga produk */
#shw #jtb{gap:10px;margin:0 0 14px}
#shw #jtb button.jb{min-height:92px;padding:11px 8px 10px;gap:2px;border-radius:20px}
.jbi{width:38px;height:38px;margin-bottom:3px}
.jbi .ti{width:21px;height:21px}
#shw #jtb button.jb b{font-size:15px}
#shw #jtb button.jb small{font-size:11px}
#shw #jtb button.warung[aria-selected="true"]{box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px #f58220,0 16px 26px -12px #d45f00e6,inset 0 1px 0 #ffffff80}
#shw #jtb button.kopi[aria-selected="true"]{box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px #7a4a2a,0 16px 26px -12px #3d2212e6,inset 0 1px 0 #ffffff59}
#jl .sc3{border-radius:28px;overflow:hidden;box-shadow:0 22px 40px -24px #3d221266,0 2px 8px #1714100d}
#jl .sh3{padding:0 0 4px;gap:0}
#jl .sh3>img,#jl .sh3>.ph0{border-radius:0;aspect-ratio:16/9}
#jl .sh3>img,#jl .sh3>.ph0{position:relative}
#jl .sb3{padding:14px 18px 4px}
#jl .sb3>b{font-size:19px;font-weight:800}
#jl .sm2{margin-top:8px;gap:6px}
#jl .sm2 span{padding:4px 11px;border-radius:99px;background:#fff3e0;color:#9a4f00;font-weight:700;font-size:11.5px}
#jl[data-k="kopi"] .sm2 span{background:#f3e8dd;color:#6a3f22}
#jl .sm2 .dk{background:#171410;color:#fff}
#jl .lc3{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;padding:8px 20px 14px;font-size:12.5px;line-height:1.4}
#jl .lc3 span{flex:0 1 auto;white-space:normal;overflow:visible;text-overflow:clip;text-align:center;color:var(--ink);font-weight:600}
#jl .lc3 a{flex:none;padding:4px 11px;border-radius:99px;background:#eef4fc;color:#1b5aa6;font-size:11.5px}
#jl .mn3{padding:14px 0 2px;background:linear-gradient(180deg,#fff8ee,#fff);border-top:1px solid #f3e4cf}
#jl[data-k="kopi"] .mn3{background:linear-gradient(180deg,#f8f0e8,#fff);border-top-color:#eadccd}
#jl .mh3{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 18px 10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#b85f00}
#jl[data-k="kopi"] .mh3{color:#7a4a2a}
#jl .mh3::before,#jl .mh3::after{content:"";height:1px;flex:1;max-width:56px;background:linear-gradient(90deg,transparent,currentColor);opacity:.5}
#jl .mh3::after{transform:scaleX(-1)}
#jl .pr3{gap:12px;padding:2px 18px 16px;scroll-padding:0 18px}
#jl .pi3{flex:0 0 104px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 6px 9px;border-radius:20px;background:#fff;border:1px solid #f1e6d6;box-shadow:0 10px 18px -14px #3d221266}
#jl .pi3>img,#jl .pi3>.ph0{width:100%;height:auto;aspect-ratio:1;border-radius:15px;font-size:26px}
#jl .pi3 b{margin-top:8px;font-size:12px;line-height:1.25;min-height:30px}
#jl .pi3 span{margin-top:5px;padding:3px 9px;border-radius:99px;background:linear-gradient(135deg,#ffc266,#f58220);color:#fff;font:800 11.5px var(--disp)}
#jl[data-k="kopi"] .pi3 span{background:linear-gradient(135deg,#b98458,#6a3f22);color:#fff}

/* v53: tombol lebih ringkas (ikon di kiri, teks di kanan); judul kategori dihapus; foto tempat lebih kecil */
#shw #jtb{gap:10px;margin:0 0 14px}
#shw #jtb button.jb{flex-direction:row;justify-content:center;gap:10px;min-height:0;height:62px;padding:0 12px;border-radius:18px;text-align:left}
#shw #jtb button.jb .jbt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.jbi{width:34px;height:34px;margin:0;flex:none}
.jbi .ti{width:19px;height:19px}
#shw #jtb button.jb b{font-size:14.5px}
#shw #jtb button.jb small{font-size:10.5px;margin-top:2px}
#shw #jtb button.warung[aria-selected="true"]{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #f58220,0 14px 22px -12px #d45f00e6,inset 0 1px 0 #ffffff80}
#shw #jtb button.kopi[aria-selected="true"]{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #7a4a2a,0 14px 22px -12px #3d2212e6,inset 0 1px 0 #ffffff59}
#shw #jtb button.jb[aria-selected="true"]{transform:translateY(-2px) scale(1.015)}
#shw #jtb button.jb[aria-selected="true"] .jbi{animation:jring 2.4s ease-out infinite}
#shw #jtb button.jb[aria-selected="true"] .jbi::after{content:none}
@keyframes jring{0%{box-shadow:0 0 0 0 #ffffff66,inset 0 1px 0 #ffffff80}70%,100%{box-shadow:0 0 0 9px #ffffff00,inset 0 1px 0 #ffffff80}}
#jl .sh3>img,#jl .sh3>.ph0{aspect-ratio:2.1/1}
#jl{gap:16px;padding-top:4px}
#jl.ani>:nth-child(n){animation-delay:0ms}
#jl.ani>:nth-child(2){animation-delay:70ms}
#jl.ani>:nth-child(3){animation-delay:140ms}
#jl.ani>:nth-child(4){animation-delay:210ms}
#jl.ani>:nth-child(5){animation-delay:280ms}
#jl.ani>:nth-child(6){animation-delay:350ms}
#jl.ani>:nth-child(7){animation-delay:420ms}
#jl.ani>:nth-child(8){animation-delay:490ms}
@media (prefers-reduced-motion:reduce){#shw #jtb button.jb[aria-selected="true"] .jbi{animation:none}}

/* v54: menu layanan 3 kolom dengan jarak tepi lega; kartu tempat lebih ringkas (nama + info di atas foto, alamat satu baris) */
#svcs.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px;padding:24px 28px 14px;overflow:visible;-webkit-mask-image:none;mask-image:none;scroll-snap-type:none;justify-items:center}
#svcs.grid button{flex:none;width:100%;max-width:96px;align-items:center}
#jl .sc3{max-width:420px}
#jl .sh3{padding:0;overflow:hidden}
#jl .sh3>img,#jl .sh3>.ph0{aspect-ratio:2/1}
#jl .sb3{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:46px 16px 12px;text-align:center;color:#fff;background:linear-gradient(180deg,#0000 0%,#0000008c 55%,#000000c4 100%)}
#jl .sb3>b{font-size:18px;line-height:1.2;color:#fff;text-shadow:0 2px 10px #0008;-webkit-line-clamp:1}
#jl .sm2{margin-top:6px;gap:6px}
#jl .sm2 span,#jl[data-k="kopi"] .sm2 span{padding:3px 10px;font-size:11px;background:#ffffff2e;color:#fff;border:1px solid #ffffff3d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#jl .sm2 .dk{background:#f58220cc;border-color:#ffffff55}
#jl[data-k="kopi"] .sm2 .dk{background:#7a4a2acc}
#jl .tp3{z-index:3}
#jl .lc3{flex-wrap:nowrap;justify-content:flex-start;gap:8px;padding:11px 14px 12px;border-bottom:1px solid #f3e4cf}
#jl .lc3 .ti{flex:none}
#jl .lc3 span{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-size:12.5px}
#jl .lc3 a{white-space:nowrap}
#jl .mn3{padding:11px 0 0;border-top:0}
#jl .mh3{padding-bottom:8px}
#jl .pr3{padding-bottom:14px}

/* v55: menu layanan satu baris bisa digeser, jarak tepi lega, ikon sedikit lebih kecil */
#svcs.grid{display:flex;grid-template-columns:none;justify-items:normal;gap:14px;padding:22px 24px 14px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x proximity;scroll-padding:0 24px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
#svcs.grid::-webkit-scrollbar{display:none}
#svcs.grid::after{content:"";flex:0 0 1px}
#svcs.grid button{flex:0 0 66px;width:66px;max-width:none;gap:6px;font-size:11px;scroll-snap-align:start}
#svcs.grid button:not(:disabled) .ic,#svcs.grid button:disabled .ic,#svcs.grid .ic{width:58px;height:58px;border-radius:21px}
#svcs.grid .ic svg{width:36px;height:36px}

/* v56: kolom cari lebih ramping; kotak ikon menu berbayangan berlapis dengan kilau */
.find{height:46px;padding:0 14px;gap:10px;border-radius:15px;font-size:14px}
.find svg{width:18px;height:18px}
.find::after{width:28px;height:28px;background-size:55%;background-position:center;background-repeat:no-repeat}
#svcs.grid{padding-bottom:20px}
#svcs.grid button .ic{position:relative;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;
 box-shadow:0 1px 1px #1714100a,0 4px 8px -2px color-mix(in srgb,var(--c,#F58220) 22%,#17141024),0 14px 22px -10px color-mix(in srgb,var(--c,#F58220) 55%,#1714102e),inset 0 1px 0 #ffffffe6,inset 0 -8px 14px color-mix(in srgb,var(--c,#F58220) 12%,transparent)}
#svcs.grid button .ic::after{content:"";display:block;position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 38%,#ffffffa6 50%,transparent 62%);transform:translateX(-130%)}
#svcs.grid button:active .ic{transform:scale(.93);box-shadow:0 1px 2px #1714101a,0 4px 8px -4px color-mix(in srgb,var(--c,#F58220) 45%,#1714101f),inset 0 1px 0 #ffffffe6}
#svcs.grid button:active .ic::after{transform:translateX(130%);transition:transform .55s ease-out}
@media (hover:hover){#svcs.grid button:hover .ic{transform:translateY(-3px);box-shadow:0 2px 2px #1714100a,0 8px 14px -4px color-mix(in srgb,var(--c,#F58220) 32%,#1714102e),0 20px 28px -12px color-mix(in srgb,var(--c,#F58220) 62%,#17141033),inset 0 1px 0 #fff,inset 0 -8px 14px color-mix(in srgb,var(--c,#F58220) 14%,transparent)}#svcs.grid button:hover .ic::after{transform:translateX(130%);transition:transform .7s ease-out}}
#svcs.grid button[data-soon] .ic{box-shadow:0 1px 1px #1714100a,0 4px 8px -4px #17141022,0 10px 16px -10px #1714102a,inset 0 1px 0 #ffffffe6}
@media (prefers-reduced-motion:reduce){#svcs.grid button .ic,#svcs.grid button .ic::after{transition:none}}

/* v57: iklan jadi carousel (Bentor, Warung, Coffee) berwarna cerah, bisa digeser */
.adc{container-type:inline-size;margin:14px 16px 0}
.adt{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:24px;box-shadow:0 18px 30px -20px #1658b8b3,0 2px 6px #1714100d}
.adt::-webkit-scrollbar{display:none}
.ads{position:relative;flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:128px;aspect-ratio:27/10;padding:0 0 0 clamp(14px,5cqw,22px);overflow:hidden;color:#fff;isolation:isolate}
.ads.a1{background:linear-gradient(120deg,#3b9bf0 0%,#1f6fd0 55%,#1658b8 100%)}
.ads.a2{background:linear-gradient(120deg,#ffb04a 0%,#ff8a1f 52%,#ee5a0a 100%)}
.ads.a3{background:linear-gradient(120deg,#d9a171 0%,#b4743f 52%,#7d421d 100%)}
.ads::before,.ads::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1}
.ads::before{right:-34px;top:-60px;width:210px;height:210px;background:radial-gradient(circle,#ffffff3d,#ffffff00 68%)}
.ads::after{left:-50px;bottom:-90px;width:210px;height:210px;background:radial-gradient(circle,#ffffff26,#ffffff00 68%)}
.adx{position:relative;z-index:1;flex:1 1 auto;min-width:0;padding:10px 0}
.adk{display:inline-block;padding:2px 10px;border-radius:99px;background:#ffffff33;border:1px solid #ffffff55;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:clamp(9.5px,2.5cqw,11.5px);font-weight:700;letter-spacing:.02em}
.adx h2{margin:7px 0 3px;font:800 clamp(15px,5cqw,22px)/1.15 var(--disp);letter-spacing:-.03em;text-shadow:0 2px 8px #0003}
.adx h2 em{display:block;font-style:normal;color:#fff3c9}
.adx p{margin:0 0 9px;font-size:clamp(10.5px,2.8cqw,13px);color:#ffffffeb;line-height:1.3}
.adb{padding:clamp(6px,1.8cqw,9px) clamp(14px,4.2cqw,20px);border:0;border-radius:12px;background:#fff;color:#1658b8;font:800 clamp(11px,3cqw,13.5px) var(--disp);box-shadow:0 8px 16px -8px #0006,inset 0 -2px 0 #0000000f;cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.a2 .adb{color:#d9480f}.a3 .adb{color:#7d421d}
.adb:active{transform:scale(.95)}
.ads>img{flex:none;width:auto;height:100%;max-width:42%;object-fit:contain;filter:drop-shadow(0 10px 12px #0004)}
.adv{position:relative;flex:none;width:36%;align-self:stretch;display:grid;place-items:center}
.adv::before{content:"";position:absolute;width:min(78%,118px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff55,#ffffff1a);border:1px solid #ffffff55;box-shadow:inset 0 1px 0 #ffffff80,0 14px 22px -12px #0005}
.adv i{position:relative;font-style:normal;font-size:clamp(42px,15cqw,68px);line-height:1;filter:drop-shadow(0 8px 8px #0004)}
.add{display:flex;justify-content:center;gap:6px;margin-top:9px}
.add button{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:#d9d2c4;cursor:pointer;transition:width .3s,background .3s}
.add button[aria-current="true"]{width:20px;background:linear-gradient(90deg,#ffb04a,#f06a00)}
.adc{animation:rise .7s .16s var(--eo) both}
@media (prefers-reduced-motion:reduce){.adc{animation:none}.adb,.add button{transition:none}}

/* v58: gambar iklan Warung dan Coffee berupa ilustrasi semi-realistis (bayangan, kilau, uap) */
.adv svg{position:relative;width:100%;max-width:150px;height:auto;aspect-ratio:1;filter:drop-shadow(0 10px 10px #0003)}
.adv::before{background:radial-gradient(circle at 50% 42%,#ffffff40,#ffffff12 70%);border-color:#ffffff40;width:min(86%,128px)}

/* v59: logo lebih besar dan mewah (emas, kilau berkala, garis emas tipis di header) */
.logo{gap:11px}
.logo img{width:58px;height:54px;filter:drop-shadow(0 5px 6px #f5822038) drop-shadow(0 1px 1px #1714101a)}
.logo>span{font-size:22px;font-weight:800;letter-spacing:-.045em;color:#1c1408;line-height:1.05}
.logo b{background:linear-gradient(110deg,#d9780a 0%,#ffbf55 28%,#fff0bd 40%,#ffbf55 52%,#f58220 72%,#b85f00 100%);background-size:240% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 #f5822026);animation:lgs 6s 1.2s ease-in-out infinite}
.logo small{margin-top:4px;font:700 9.5px/1.2 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#a07a3a}
.top{padding:8px 16px 9px}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#e8c27a 22%,#f58220aa 50%,#e8c27a 78%,transparent)}
@keyframes lgs{0%,55%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.logo b{animation:none;background-position:50% 0}}