/* Labbaik PWA. Susun atur: satu lajur telefon, bar atas, kandungan boleh skrol, menu bawah tetap. */
:root{
  --bg:#EEF2EF; --surface:#FFFFFF; --surface2:#F4F6F5; --ink:#10201B; --muted:#4A5B55; --line:#D5DDD8; --line2:#E6ECE9;
  --green:#0B5D4B; --green-soft:#DCEFE8; --green-ink:#FFFFFF;
  --sirah:#2B3585; --sirah-soft:#E3E6F7; --tarikan:#A64F05; --tarikan-soft:#F8E8D6; --ibadah:#0B5D4B; --ibadah-soft:#DCEFE8;
  --gold:#C9A04A; --gold2:#D9A650; --red:#B3261E; --warn-bg:#F8E8D6; --warn-ink:#8A4204; --jem:#5B3C88; --jem-soft:#EEE8F7;
  --dial:#FFFFFF; --dial-ring:#D5DDD8; --night:#10201B;
  --fs:16px; --font:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif; --font-ar:"Amiri","Traditional Arabic","Noto Naskh Arabic",serif;
  --tabh:64px; --r:16px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1513; --surface:#17211E; --surface2:#1C2824; --ink:#E9EFEC; --muted:#A3B2AC; --line:#2A3833; --line2:#22302B;
    --green:#3FA987; --green-soft:#16362D; --green-ink:#08130F;
    --sirah:#9AA6F2; --sirah-soft:#1F2547; --tarikan:#F0A15A; --tarikan-soft:#3A2512; --ibadah:#3FA987; --ibadah-soft:#16362D;
    --warn-bg:#3A2512; --warn-ink:#F3C08A; --jem:#C7B2F0; --jem-soft:#2B2240; --dial:#17211E; --dial-ring:#2A3833; --night:#0A0F0D;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1513; --surface:#17211E; --surface2:#1C2824; --ink:#E9EFEC; --muted:#A3B2AC; --line:#2A3833; --line2:#22302B;
  --green:#3FA987; --green-soft:#16362D; --green-ink:#08130F;
  --sirah:#9AA6F2; --sirah-soft:#1F2547; --tarikan:#F0A15A; --tarikan-soft:#3A2512; --ibadah:#3FA987; --ibadah-soft:#16362D;
  --warn-bg:#3A2512; --warn-ink:#F3C08A; --jem:#C7B2F0; --jem-soft:#2B2240; --dial:#17211E; --dial-ring:#2A3833; --night:#0A0F0D;
  color-scheme:dark;
}
:root[data-size="large"]{ --fs:19px }
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs);line-height:1.45;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold2);outline-offset:2px}
.app{max-width:560px;margin:0 auto;height:100%;display:flex;flex-direction:column}
.top{flex:none;display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
.top h1{margin:0;font-size:1.35em;line-height:1.15;flex:1;min-width:0}
.top .sub{display:block;font-size:.78em;font-weight:500;color:var(--muted);margin-top:2px}
.iconbtn{flex:none;min-width:44px;min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:inline-flex;align-items:center;justify-content:center}
.sosbtn{flex:none;min-height:40px;padding:0 13px;border-radius:999px;border:0;background:var(--red);color:#fff;font-weight:700;font-size:.85em;display:inline-flex;align-items:center;gap:6px}
.banner{flex:none;background:var(--warn-bg);color:var(--warn-ink);font-size:.74em;font-weight:600;text-align:center;padding:4px 16px}
main{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
main.full{padding:0;overflow:hidden;position:relative}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:8px;align-items:center}
.wrap{flex-wrap:wrap}
.scrollx{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.scrollx::-webkit-scrollbar{display:none}
.card{background:var(--surface);border-radius:var(--r);padding:12px 14px}
.card.line{border:1px solid var(--line)}
.h2{font-size:1.05em;font-weight:700;margin:4px 0 0}
.muted{color:var(--muted)}
.small{font-size:.8em}
.tiny{font-size:.72em}
.ar{font-family:var(--font-ar);direction:rtl;text-align:right;line-height:1.8}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:3px}
.seg button{min-height:40px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-weight:600}
.seg button[aria-pressed="true"]{background:var(--green);color:var(--green-ink);font-weight:700}
.chip{flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:.88em;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:700}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%}
.tag{display:inline-block;font-size:.7em;font-weight:700;border-radius:6px;padding:1px 7px}
.tag.sirah{color:var(--sirah);background:var(--sirah-soft)} .tag.ibadah{color:var(--ibadah);background:var(--ibadah-soft)} .tag.tarikan{color:var(--tarikan);background:var(--tarikan-soft)}
.tag.off{color:var(--green);background:var(--green-soft)} .tag.jem{color:var(--jem);background:var(--jem-soft)}
.tag.rukun{color:var(--bg);background:var(--ink)} .tag.wajib{color:var(--warn-ink);background:var(--warn-bg)} .tag.sunat{color:var(--muted);background:var(--line2)}
.btn{min-height:46px;border-radius:12px;border:0;background:var(--green);color:var(--green-ink);font-weight:700;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn.ghost{background:var(--surface);color:var(--green);border:1.5px solid var(--green)}
.btn.sirah{background:var(--sirah);color:#fff}
.btn.block{width:100%}
.list{background:var(--surface);border-radius:var(--r);padding:2px 14px}
.li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line2)}
.li:last-child{border-bottom:0}
.num{flex:none;min-width:44px;height:44px;padding:0 8px;border-radius:12px;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9em;text-align:center;line-height:1.1;font-variant-numeric:tabular-nums}
/* tab bar */
nav.tabs{flex:none;display:flex;background:var(--surface);border-top:1px solid var(--line);padding:4px 4px calc(8px + env(safe-area-inset-bottom,0px))}
nav.tabs button{flex:1;min-height:56px;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.72em;font-weight:600;color:var(--muted)}
nav.tabs button[aria-current="page"]{color:var(--green);font-weight:700}
/* kompas */
.dialwrap{display:flex;justify-content:center;padding:4px 0 0}
.dial{position:relative;width:min(84vw,340px);aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none}
.dial .face{position:absolute;inset:0;border-radius:50%;background:var(--dial);box-shadow:0 2px 16px rgba(0,0,0,.10)}
.dial .r1,.dial .r2{position:absolute;border-radius:50%;border:1.5px dashed var(--dial-ring)}
.dial .r1{inset:7%} .dial .r2{inset:22%}
.dial .rot{position:absolute;inset:0;will-change:transform}
.dial .card-n{position:absolute;font-weight:700;font-size:.85em;color:var(--muted);transform:translate(-50%,-50%)}
.dial .card-n.n{color:var(--red)}
.dial .mk{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:3px solid var(--dial);box-shadow:0 1px 4px rgba(0,0,0,.3);padding:0}
.dial .mk.sel{width:28px;height:28px;margin:-14px 0 0 -14px;border:4px solid var(--gold2)}
.dial .mk.sirah{background:var(--sirah)} .dial .mk.ibadah{background:var(--ibadah)} .dial .mk.tarikan{background:var(--tarikan)}
.dial .kaabah{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:8px;background:var(--dial);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center}
.dial .kaabah i{display:block;width:18px;height:18px;background:#1C1F1E;border-radius:2px;position:relative}
.dial .kaabah i::after{content:"";position:absolute;left:0;right:0;top:5px;height:3px;background:var(--gold)}
.dial .qline{position:absolute;left:50%;top:50%;width:3px;height:44%;margin-left:-1.5px;transform-origin:50% 0;background:linear-gradient(var(--gold),transparent);pointer-events:none}
.dial .me{position:absolute;left:50%;top:50%;width:26px;height:56px;margin:-38px 0 0 -13px;pointer-events:none}
.qbadge{display:inline-block;background:var(--green);color:var(--green-ink);border-radius:999px;padding:7px 14px;font-weight:700;font-size:.92em}
.hotelbar{display:flex;align-items:center;gap:12px;background:var(--night);color:#fff;border-radius:14px;padding:10px 14px;border:0;width:100%;text-align:left}
/* peta */
#map{position:absolute;inset:0}
.mapui{position:absolute;left:12px;right:12px;top:10px;display:flex;gap:8px;align-items:center;z-index:2}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:3;background:var(--surface);border-radius:22px 22px 0 0;box-shadow:0 -4px 18px rgba(0,0,0,.15);padding:8px 16px 14px;max-height:62%;display:flex;flex-direction:column;gap:8px}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 4px}
.sheet .scroll{overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:6px}
.backcard{display:flex;align-items:center;gap:14px;background:var(--night);color:#fff;border-radius:16px;padding:12px 14px}
.arrowc{width:52px;height:52px;border-radius:50%;background:#1F2A26;display:flex;align-items:center;justify-content:center;flex:none}
.maplibregl-ctrl-attrib{font-size:11px}
/* lapisan penuh (mataf 3D, SOS, tetapan) */
.overlay{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;max-width:560px;margin:0 auto}
.overlay .body{flex:1;min-height:0;overflow-y:auto;padding:4px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.m3d{position:relative;height:min(58vh,440px);border-radius:20px;overflow:hidden;background:#BFD0E0}
.m3d canvas{display:block;width:100%;height:100%;touch-action:none}
.hint{position:absolute;left:10px;top:10px;background:rgba(12,16,20,.66);color:#fff;font-size:.75em;font-weight:600;border-radius:999px;padding:6px 11px;pointer-events:none}
.sosnum{display:flex;align-items:center;gap:14px;border-radius:18px;padding:16px;min-height:76px;text-decoration:none}
.sosnum.red{background:var(--red);color:#fff} .sosnum.dark{background:var(--night);color:#fff} .sosnum.light{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.sosnum b{font-size:1.9em;flex:none}
.toast{position:fixed;left:50%;bottom:calc(var(--tabh) + 24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--night);color:#fff;border-radius:12px;padding:10px 16px;font-weight:600;font-size:.9em;z-index:60;max-width:90vw;text-align:center}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
.sosnum.long{flex-direction:column;align-items:flex-start;gap:4px}
.sosnum.long > b{font-size:1.45em}
.qbadge{transition:background .2s,color .2s,transform .2s}
.qbadge.near{background:#E8A33A;color:#2A1A00}
.qbadge.on{background:#F4C542;color:#2A1A00;transform:scale(1.08);box-shadow:0 0 0 6px rgba(244,197,66,.35);animation:qpulse 1.2s ease-in-out infinite}
@keyframes qpulse{50%{box-shadow:0 0 0 12px rgba(244,197,66,.12)}}
@media (prefers-reduced-motion:reduce){.qbadge.on{animation:none}}
.warnbox{background:var(--warn-bg);color:var(--warn-ink);border-radius:12px;padding:8px 12px}
.cityseg button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.dial .nabawi{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:10px;background:var(--dial);border:2px solid #2E9E5B;display:flex;align-items:center;justify-content:center;padding:0;color:var(--ink)}
.dial .nabawi.sel{border:3px solid var(--gold2)}
.dial .qline.green{background:linear-gradient(#2E9E5B,transparent)}

/* ---------- Gerakan: pantas dan lembut ---------- */
:root{--ease:cubic-bezier(.22,.9,.24,1);--ease-in:cubic-bezier(.5,0,.9,.4)}
button,a,input{touch-action:manipulation}
button,.chip,.btn,.card,.hotelbar,.sosnum,.sosbtn,.iconbtn,nav.tabs button,.dial .mk,.dial .nabawi{transition:transform .16s var(--ease),background-color .2s,color .2s,border-color .2s,box-shadow .2s,opacity .2s}
button:active,.chip:active,.btn:active,a.card:active,.sosnum:active,.hotelbar:active,.iconbtn:active,.sosbtn:active{transform:scale(.96)}
nav.tabs button:active{transform:scale(.9)}
nav.tabs button[aria-current="page"] svg{animation:tabpop .34s var(--ease)}
@keyframes tabpop{40%{transform:translateY(-3px) scale(1.12)}}
main.enter > .stack > *, main.enter > :not(.stack){animation:rise-r .34s var(--ease) both;animation-delay:calc(var(--i,0) * 24ms)}
main.enter.from-l > .stack > *{animation-name:rise-l}
@keyframes rise-r{from{opacity:0;transform:translate3d(14px,6px,0)}}
@keyframes rise-l{from{opacity:0;transform:translate3d(-14px,6px,0)}}
.seg{position:relative;isolation:isolate}
.seg::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--n,2));border-radius:9px;background:var(--green);transform:translateX(calc(var(--k,0) * 100%));transition:transform .3s var(--ease)}
.seg.noind::before{display:none}
.seg button[aria-pressed="true"]{background:transparent}
.seg button{position:relative;transition:color .25s}
.overlay{animation:ovIn .3s var(--ease) both}
.overlay.closing{animation:ovOut .19s var(--ease-in) both;pointer-events:none}
@keyframes ovIn{from{opacity:0;transform:translate3d(0,28px,0)}}
@keyframes ovOut{to{opacity:0;transform:translate3d(0,22px,0)}}
.sheet{animation:sheetUp .36s var(--ease) both}
@keyframes sheetUp{from{transform:translate3d(0,40px,0);opacity:0}}
.toast.in{animation:toastIn .24s var(--ease) both}
.toast.out{animation:toastOut .2s var(--ease-in) both}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px) scale(.96)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,8px)}}
#selCard.pop{animation:cardPop .26s var(--ease)}
@keyframes cardPop{from{opacity:.4;transform:translateY(6px)}}
.dial .mk.sel,.dial .nabawi.sel{transform:scale(1.08)}
.expand{animation:expand .26s var(--ease) both;transform-origin:top}
@keyframes expand{from{opacity:0;transform:translateY(-6px)}}
.hotelbar,.card{will-change:auto}
@media (prefers-reduced-motion: reduce){.seg::before{transition:none}}
.qbadge.off{background:var(--line);color:var(--ink)}

/* =====================================================================
   GAYA iOS: tipografi sistem, latar berkumpulan, bar lutsinar kabur,
   tajuk besar yang mengecil bila skrol, kawalan bersegmen iOS, lembaran modal
   ===================================================================== */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;
  --fs:17px;
  --bg:#F2F2F7; --surface:#FFFFFF; --surface2:#F2F2F7; --ink:#000000; --muted:rgba(60,60,67,.62); --line:rgba(60,60,67,.18); --line2:rgba(60,60,67,.14);
  --fill:rgba(118,118,128,.12); --fill2:rgba(118,118,128,.20); --thumb:#FFFFFF;
  --green:#0E7C61; --green-soft:rgba(14,124,97,.12); --green-ink:#FFFFFF; --red:#FF3B30;
  --bar:rgba(249,249,251,.78); --hair:.5px solid rgba(60,60,67,.29);
  --dial:#FFFFFF; --dial-ring:rgba(60,60,67,.18); --night:#1C1C1E; --r:12px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#000000; --surface:#1C1C1E; --surface2:#2C2C2E; --ink:#FFFFFF; --muted:rgba(235,235,245,.6); --line:rgba(84,84,88,.6); --line2:rgba(84,84,88,.45);
  --fill:rgba(118,118,128,.24); --fill2:rgba(118,118,128,.32); --thumb:#636366;
  --green:#30C48D; --green-soft:rgba(48,196,141,.16); --green-ink:#00140D; --red:#FF453A;
  --bar:rgba(22,22,24,.78); --hair:.5px solid rgba(84,84,88,.65); --dial:#1C1C1E; --dial-ring:rgba(84,84,88,.6); --night:#2C2C2E;
}}
:root[data-theme="dark"]{
  --bg:#000000; --surface:#1C1C1E; --surface2:#2C2C2E; --ink:#FFFFFF; --muted:rgba(235,235,245,.6); --line:rgba(84,84,88,.6); --line2:rgba(84,84,88,.45);
  --fill:rgba(118,118,128,.24); --fill2:rgba(118,118,128,.32); --thumb:#636366;
  --green:#30C48D; --green-soft:rgba(48,196,141,.16); --green-ink:#00140D; --red:#FF453A;
  --bar:rgba(22,22,24,.78); --hair:.5px solid rgba(84,84,88,.65); --dial:#1C1C1E; --dial-ring:rgba(84,84,88,.6); --night:#2C2C2E;
}
:root[data-size="large"]{--fs:20px}
body{letter-spacing:-.012em;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;line-height:1.35}
.app{background:var(--bg)}
/* bar navigasi dengan tajuk besar */
#head{position:relative;z-index:5;background:var(--bg);transition:background .2s}
#head.edge{background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:var(--hair)}
.top{display:block;padding:calc(4px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px))}
.top .bar{display:flex;align-items:center;gap:10px;min-height:44px;position:relative}
.top .mini{position:absolute;left:50%;transform:translate(-50%,4px);font-weight:600;font-size:17px;opacity:0;transition:opacity .2s,transform .25s var(--ease);white-space:nowrap;pointer-events:none;max-width:52%;overflow:hidden;text-overflow:ellipsis}
.top .bar::before{content:"";flex:1}
.top h1.lt{margin:0;font-size:34px;font-weight:700;letter-spacing:.012em;line-height:1.12;transition:font-size .25s var(--ease),opacity .2s,max-height .25s var(--ease),margin .25s;max-height:110px;overflow:hidden}
.top h1.lt .sub{font-size:15px;font-weight:400;letter-spacing:-.01em;margin-top:2px;color:var(--muted)}
#head.compact .top h1.lt{opacity:0;max-height:0;margin-top:-6px}
#head.compact .top .mini{opacity:1;transform:translate(-50%,0)}
.iconbtn{min-width:36px;min-height:36px;width:36px;height:36px;border:0;border-radius:50%;background:var(--fill);color:var(--green)}
.iconbtn svg{width:20px;height:20px}
.sosbtn{min-height:32px;padding:0 12px;font-size:15px;font-weight:600;background:var(--red)}
/* kandungan berkumpulan */
main{padding-top:6px}
.card{border-radius:var(--r);box-shadow:none}
.card.line{border:0}
.list{border-radius:var(--r);padding:0 0 0 16px}
.li{padding:11px 16px 11px 0;border-bottom:var(--hair)}
.h2{font-size:22px;font-weight:700;letter-spacing:.01em;margin:10px 0 0}
.small{font-size:15px}.tiny{font-size:13px}
.muted{color:var(--muted)}
.btn{min-height:50px;border-radius:12px;font-size:17px;font-weight:600}
.btn.ghost{background:var(--green-soft);border:0}
.chip{min-height:34px;padding:0 14px;border:0;background:var(--fill);font-size:15px;font-weight:500}
.chip[aria-pressed="true"]{background:var(--green);color:var(--green-ink);font-weight:600}
.num{border-radius:10px;background:var(--fill2);color:var(--ink)}
.tag{border-radius:5px;font-weight:600}
/* kawalan bersegmen iOS */
.seg{background:var(--fill);border:0;border-radius:9px;padding:2px}
.seg button{min-height:32px;border-radius:7px;font-size:14px;font-weight:500;color:var(--ink)}
.seg::before{top:2px;bottom:2px;left:2px;width:calc((100% - 4px) / var(--n,2));border-radius:7px;background:var(--thumb);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
.seg button[aria-pressed="true"]{color:var(--ink);font-weight:600}
.cityseg button svg{transform:scale(.9)}
/* bar tab lutsinar */
nav.tabs{background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:var(--hair);padding:2px 4px calc(2px + env(safe-area-inset-bottom,0px))}
nav.tabs button{min-height:49px;gap:2px;font-size:10px;font-weight:500;letter-spacing:.01em;color:rgba(128,128,133,1)}
nav.tabs button svg{width:26px;height:26px}
nav.tabs button[aria-current="page"]{color:var(--green);font-weight:600}
nav.tabs button:active{transform:none;opacity:.6}
/* kompas */
.dial .face{box-shadow:0 1px 3px rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.08)}
.qbadge{font-size:17px;font-weight:600;padding:9px 18px;background:var(--green)}
.hotelbar{border-radius:var(--r);background:var(--surface);color:var(--ink);box-shadow:none}
.hotelbar .tiny{opacity:1;color:var(--muted)}
.warnbox{border-radius:var(--r);font-size:15px}
/* peta */
.sheet{border-radius:12px 12px 0 0;background:var(--surface);box-shadow:0 -1px 0 var(--line),0 -10px 30px rgba(0,0,0,.12)}
.sheet .grab{width:36px;height:5px;border-radius:3px;background:var(--fill2)}
.backcard{border-radius:var(--r)}
/* lembaran modal iOS: halaman belakang mengecil */
body.sheet-open{background:#000}
.app{transition:transform .38s cubic-bezier(.2,.9,.25,1),border-radius .38s,filter .38s;transform-origin:50% 0}
body.sheet-open .app{transform:translateY(calc(env(safe-area-inset-top,0px) + 6px)) scale(.93);border-radius:12px;overflow:hidden;filter:brightness(.82)}
.overlay{top:calc(env(safe-area-inset-top,0px) + 14px);border-radius:12px 12px 0 0;box-shadow:0 -2px 20px rgba(0,0,0,.18);background:var(--bg);transition:transform .32s cubic-bezier(.2,.9,.25,1)}
.overlay.closing{animation:none;transform:translate3d(0,105%,0)!important;transition:transform .26s cubic-bezier(.4,0,1,1)}
@keyframes ovIn{from{transform:translate3d(0,100%,0)}}
.overlay{animation:ovIn .42s cubic-bezier(.2,.9,.25,1) both}
.sheethead{padding:6px 16px 4px;touch-action:none}
.sheethead .grabber{width:36px;height:5px;border-radius:3px;background:var(--fill2);margin:0 auto 4px}
.sheethead .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.sheethead .bar::before{display:none}
.sheethead h1{margin:0;font-size:17px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.donebtn{justify-self:end;border:0;background:none;color:var(--green);font-weight:600;font-size:17px;min-height:44px;padding:0 4px}
.sosnum{border-radius:var(--r)}
.toast{border-radius:999px;background:var(--bar);color:var(--ink);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 6px 24px rgba(0,0,0,.18);font-weight:600}
@media (prefers-reduced-motion: reduce){.app{transition:none}}
.solatcard{display:flex;align-items:center;gap:12px;width:100%;border:0;text-align:left;padding:10px 14px;color:var(--ink)}
.solic{flex:none;width:36px;height:36px;border-radius:10px;background:var(--green);color:var(--green-ink);display:flex;align-items:center;justify-content:center}
.solcd{font-size:15px;font-weight:600;color:var(--green);white-space:nowrap}
.chev{color:var(--muted);font-size:22px;line-height:1;margin-left:2px}
.li.now{color:var(--green)}
/* pandu arah langsung */
.navbanner{position:absolute;left:10px;right:10px;top:60px;z-index:4;display:flex;align-items:center;gap:12px;background:#0E5E49;color:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:ovIn .35s var(--ease) both}
.navbanner .navic{flex:none;width:52px;height:52px;border-radius:12px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.navbanner .navd{font-size:26px;font-weight:700;line-height:1.1}
.navbanner .navt{font-size:16px;font-weight:500;opacity:.92}
.navbanner .navw{font-size:13px;margin-top:3px;color:#FFD48A}
.navvoice{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:18px}
body.navmode .mapui{opacity:.0;pointer-events:none}
.doabox{display:flex;flex-direction:column;gap:10px;background:var(--surface2);border-radius:12px;padding:12px;margin-left:-48px}
.doa{padding-bottom:10px;border-bottom:var(--hair)}
.doa:last-of-type{border-bottom:0}
.playbtn{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--green);color:var(--green-ink);font-size:14px;display:flex;align-items:center;justify-content:center}
body.navmode #head .lt{display:none}

/* =====================================================================
   RESPONSIF: telefon (satu lajur), tablet dan PC (bar sisi + dua lajur)
   ===================================================================== */
.colA,.colB{display:contents}
.cmpgrid > .colA > *{order:3}
.cmpgrid > .colA > .cityrow{order:1}
.cmpgrid > .colB > *{order:4}
.cmpgrid > .colB > #solatCard{order:2}
.sidebrand{display:none}
@media (min-width: 760px){
  body{background:var(--bg)}
  .app{max-width:none;display:grid;grid-template-columns:232px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:100%}
  #head{grid-column:2;grid-row:1}
  main{grid-column:2;grid-row:2;padding:8px 32px 40px}
  main.full{padding:0}
  nav.tabs{grid-column:1;grid-row:1 / 3;flex-direction:column;justify-content:flex-start;gap:2px;border-top:0;border-right:var(--hair);padding:calc(14px + env(safe-area-inset-top,0px)) 12px 16px;background:var(--surface2)}
  nav.tabs::before{content:"Labbaik";font-size:22px;font-weight:700;letter-spacing:.01em;padding:6px 12px 14px;color:var(--ink)}
  nav.tabs button{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;font-size:16px;font-weight:500;color:var(--ink)}
  nav.tabs button svg{width:22px;height:22px;color:var(--green)}
  nav.tabs button[aria-current="page"]{background:var(--green);color:var(--green-ink)}
  nav.tabs button[aria-current="page"] svg{color:var(--green-ink);animation:none}
  .top{padding-left:32px;padding-right:32px}
  main > .stack{max-width:1040px;margin:0 auto}
  /* kompas dua lajur */
  main[data-tab="compass"] > .stack{max-width:620px}
  .dial{width:min(70vw,440px)}
  /* kisah dan masjid: grid kad */
  main[data-tab="kisah"][data-view="list"] > .stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  main[data-tab="kisah"][data-view="list"] > .stack > .seg,main[data-tab="kisah"][data-view="list"] > .stack > .card:last-child{grid-column:1 / -1}
  main[data-tab="kisah"][data-view="detail"] > .stack{max-width:760px}
  main[data-tab="masjid"] > .stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  main[data-tab="masjid"] > .stack > :not(.stack){grid-column:1 / -1}
  main[data-tab="umrah"] > .stack{max-width:820px}
  /* peta: panel terapung di kiri */
  .sheet{left:16px;right:auto;bottom:16px;width:400px;border-radius:14px;max-height:calc(100% - 92px);box-shadow:0 10px 40px rgba(0,0,0,.2)}
  .sheet .grab{display:none}
  .mapui{right:auto;width:400px;left:16px;top:16px}
  .navbanner{left:16px;right:auto;width:400px;top:70px}
  /* SOS, tetapan, mataf: tetingkap di tengah */
  .overlay{top:50%;left:50%;right:auto;bottom:auto;width:min(680px,92vw);height:min(88vh,920px);margin:0;border-radius:14px;transform:translate(-50%,-50%);animation:ovPop .32s var(--ease) both;box-shadow:0 30px 80px rgba(0,0,0,.35)}
  .overlay.closing{transform:translate(-50%,-46%)!important;opacity:0;transition:transform .2s,opacity .2s}
  @keyframes ovPop{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
  body.sheet-open .app{transform:none;border-radius:0;filter:brightness(.55)}
  .sheethead .grabber{display:none}
  .m3d{height:min(60vh,560px)}
  .toast{bottom:28px}
}
@media (min-width: 1100px){
  main[data-tab="compass"] > .stack{max-width:1040px}
  .cmpgrid{display:grid;grid-template-columns:minmax(380px,1fr) minmax(300px,400px);gap:20px 28px;align-items:start}
  .colA,.colB{display:flex;flex-direction:column;gap:12px}
  .colB{position:sticky;top:8px}
  .dial{width:min(40vw,460px)}
}
@media (min-width: 1200px){
  .app{grid-template-columns:260px minmax(0,1fr)}
}