/* ============================================================
   KOPI DAKAS - Tampilan ala aplikasi mobile
   Lapisan tampilan saja: semua fitur lama tetap jalan dari file aslinya.
   Prefix "kda" supaya tidak bentrok. Dimuat PALING AKHIR.
   Urutan Home: sapaan > banner > Pesan Kopi Dakas > Menu Favorit > Outlet
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root{--kdf:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--kd-ink:#0b0c3a}
html[data-theme=dark]{--kd-ink:#eef0ff}

/* ruang bawah supaya isi halaman tidak tertutup menu melayang */
#app{padding-bottom:116px}
body.kmon #app{padding-bottom:180px}

/* ---------- Header: pojok bawah membulat, tombol bulat (tetap) ---------- */
header{border-radius:0 0 24px 24px;box-shadow:0 6px 18px rgba(0,0,231,.18)}
header .ib{background:rgba(255,255,255,.16);border-radius:50%;width:42px;height:42px}
header .ib:active{background:rgba(255,255,255,.3)}
header .hp{border-radius:20px}

/* ============================================================
   KOLOM CARI: ikon search bulat di dalam kolom
   ============================================================ */
#sb.sr{padding:16px 14px 6px;gap:10px;align-items:center}
#sb .kda-sw{position:relative;flex:1;min-width:0}
#sb .kda-sw input{height:50px;padding:0 16px 0 56px;border:0;border-radius:26px;background:var(--l);background-image:none;
  box-shadow:inset 0 0 0 1px var(--ln);font-size:15px;transition:box-shadow .2s,background-color .2s}
#sb .kda-sw input::placeholder{color:var(--g);opacity:1}
#sb .kda-sw input:focus{background-color:var(--bg,#fff);box-shadow:inset 0 0 0 2px var(--b),0 0 0 5px rgba(0,0,231,.1)}
#sb .kda-si{position:absolute;left:7px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#0000E7,#4166ff);box-shadow:0 4px 10px rgba(0,0,231,.32);pointer-events:none;transition:transform .2s}
#sb .kda-si .kda-ic{width:18px;height:18px;stroke:#fff;stroke-width:2.2}
#sb .kda-sw:focus-within .kda-si{transform:scale(1.07)}
#sb>button{width:50px;height:50px;border:0;border-radius:18px;background:rgba(0,0,231,.08);box-shadow:inset 0 0 0 1px rgba(0,0,231,.18)}
#sb>button:active{background:rgba(0,0,231,.16)}

/* ============================================================
   KARTU SAPAAN: border biru, panel poin sebagai pusat perhatian
   ============================================================ */
.kda-gr{position:relative;margin:12px 14px 0;padding:16px;border:1.5px solid var(--b);border-radius:26px;overflow:hidden;
  background:radial-gradient(circle at 100% 0,rgba(0,0,231,.07),transparent 55%),var(--bg,#fff);
  box-shadow:0 0 0 5px rgba(0,0,231,.07),0 14px 30px rgba(0,0,120,.1)}
.kda-top{display:flex;align-items:center;gap:12px}
.kda-av{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;font:800 20px var(--kdf);
  background:linear-gradient(135deg,#0000E7,#4b6bff);box-shadow:0 0 0 3px var(--bg,#fff),0 0 0 5px rgba(0,0,231,.25)}
.kda-av-ic .kda-ic{width:24px;height:24px}
.kda-tx{flex:1;min-width:0}
.kda-gr h2{padding:0;font:800 20px/1.15 var(--kdf);letter-spacing:-.3px;color:var(--kd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kda-tx p{margin-top:3px;font-size:12.5px;line-height:1.35;color:var(--g)}

.kda-lv{flex:none;display:flex;align-items:center;gap:5px;padding:7px 11px;border-radius:14px;font:800 12px var(--kdf)}
.kda-lv .kda-ic{width:15px;height:15px}
.kda-lv:active{transform:scale(.96)}
.kda-lv-silver{background:#eceef6;color:#4d556b}
.kda-lv-gold{background:#fff1cc;color:#7a5200}
.kda-lv-diamond{background:#e5ecff;color:#0000E7}
html[data-theme=dark] .kda-gr{border-color:#3d5cff}
html[data-theme=dark] .kda-lv-silver{background:#272b45;color:#c3c9de}
html[data-theme=dark] .kda-lv-gold{background:#3a2f12;color:#f3c75a}
html[data-theme=dark] .kda-lv-diamond{background:#1d2859;color:#9db4ff}

.kda-pts{display:block;width:100%;margin-top:14px;padding:14px 16px 13px;border-radius:20px;text-align:left;color:#fff;
  background:radial-gradient(circle at 92% -25%,rgba(255,255,255,.3),transparent 46%),linear-gradient(135deg,#0000E7 0%,#2a3dff 60%,#4d7bff 100%);
  box-shadow:0 10px 22px rgba(0,0,231,.28);transition:transform .15s}
.kda-pts:active{transform:scale(.985)}
.kda-pts-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kda-pts-l{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;opacity:.92}
.kda-pts-l .kda-ic{width:16px;height:16px}
.kda-pts-v{font-size:13px;opacity:.92}
.kda-pts-v b{margin-right:3px;font:800 28px/1 var(--kdf);letter-spacing:-.5px}
.kda-bar{display:block;height:8px;margin-top:12px;border-radius:8px;background:rgba(255,255,255,.25);overflow:hidden}
.kda-bar b{display:block;height:100%;border-radius:8px;background:#fff}
.kda-pts-n{display:block;margin-top:9px;font-size:12px;line-height:1.35;opacity:.93}

.kda-join{display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;padding:6px 16px 6px 6px;border-radius:30px;color:#fff;
  font:700 15px var(--kdf);background:linear-gradient(135deg,#0000E7,#3d5cff);box-shadow:0 8px 18px rgba(0,0,231,.3);transition:transform .15s}
.kda-join:active{transform:scale(.98)}
.kda-join i{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2)}
.kda-join span{flex:1;text-align:left}
.kda-join .kda-go{width:18px;height:18px}
.kda-nt{margin-top:10px;font-size:12px;line-height:1.45;color:var(--g)}

.kda-ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ============================================================
   BANNER (tepat di bawah sapaan)
   ============================================================ */
.ban{margin:14px 14px 0;border-radius:24px;box-shadow:0 10px 24px rgba(0,0,120,.14)}

/* ============================================================
   JUDUL BAGIAN (seragam)
   ============================================================ */
#hm h3,.kda-od h3{font:800 18px/1.2 var(--kdf);letter-spacing:-.2px;color:var(--kd-ink);padding:24px 14px 12px}
#hm .ds-home-title h3{font:800 18px/1.2 var(--kdf);letter-spacing:-.2px;color:var(--kd-ink);padding:24px 0 12px}
#hm h3 .lsm,.ds-home-title button{padding:6px 12px;border-radius:14px;background:rgba(0,0,231,.08);color:var(--b);font:700 12px var(--kdf)}
html[data-theme=dark] #hm h3 .lsm,html[data-theme=dark] .ds-home-title button{background:rgba(142,166,255,.14);color:#8ea6ff}
html[data-theme=dark] #hm h3,html[data-theme=dark] #hm .ds-home-title h3{color:#eef0ff}

/* ============================================================
   PESAN KOPI DAKAS SEKARANG
   ============================================================ */
.kda-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 14px}
.kda-c{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:142px;padding:14px;border:1.5px solid;border-radius:22px;text-align:left;transition:transform .15s}
.kda-c:active{transform:scale(.97)}
.kda-c i{margin-bottom:auto;width:44px;height:44px;border-radius:15px;display:grid;place-items:center;color:#fff}
.kda-c .kda-ic{width:23px;height:23px}
.kda-c b{margin-top:14px;font:800 17px/1.15 var(--kdf)}
.kda-c small{max-width:none;font-size:12px;line-height:1.35;color:var(--g)}
.kda-pk{border-color:rgba(0,0,231,.45);background:linear-gradient(160deg,var(--bg,#fff) 45%,rgba(0,0,231,.1))}
.kda-pk i{background:#0000E7;box-shadow:0 6px 14px rgba(0,0,231,.3)}.kda-pk b{color:#0000E7}
.kda-dl{border-color:rgba(10,116,201,.45);background:linear-gradient(160deg,var(--bg,#fff) 45%,rgba(10,116,201,.12))}
.kda-dl i{background:#0a74c9;box-shadow:0 6px 14px rgba(10,116,201,.3)}.kda-dl b{color:#0a74c9}
html[data-theme=dark] .kda-pk b{color:#8ea6ff}
html[data-theme=dark] .kda-dl b{color:#6cc0ff}

/* ============================================================
   MENU FAVORIT (geser ke samping, tinggi kartu sama)
   ============================================================ */
.fav{display:flex;align-items:stretch;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:14px;padding:2px 14px 14px;scrollbar-width:none}
.fav::-webkit-scrollbar{display:none}
.fv{flex:0 0 150px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;padding:10px;border:0;border-radius:22px;background:var(--bg,#fff);
  box-shadow:0 0 0 1px var(--ln),0 8px 20px rgba(0,0,120,.08)}
.fv img{border-radius:16px;aspect-ratio:1;object-fit:cover}
.fv b{font:700 14px/1.25 var(--kdf);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fv small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em;font-size:11.5px;line-height:1.4;color:var(--g)}
.fv button{margin-top:auto;padding:10px;border-radius:14px;background:var(--b);color:#fff;font:700 13px var(--kdf);box-shadow:0 6px 14px rgba(0,0,231,.25)}
.fv button:active{transform:scale(.97)}

.big{width:calc(100% - 28px);margin:20px 14px 0;border-radius:22px}

/* ============================================================
   CARD OUTLET: sampul biru, foto sales, tombol ikon
   ============================================================ */
.ds-home{padding:0 0 8px}
.ds-home-title{padding:0 14px}
#ds-home-list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:14px;padding:2px 14px 16px;scrollbar-width:none}
#ds-home-list::-webkit-scrollbar{display:none}
#ds-home-list>.kda-oc{flex:0 0 min(304px,86%);scroll-snap-align:start}
#ds-home-list>.kda-oc:only-child{flex-basis:100%}
#ds-home-list>:not(.kda-oc){flex:0 0 100%}

.kda-oc{position:relative;display:flex;flex-direction:column;padding:0;border:0;border-radius:24px;overflow:hidden;background:var(--bg,#fff);box-shadow:0 0 0 1px var(--ln),0 12px 28px rgba(0,0,120,.1)}
.kda-oc-cv{position:relative;display:flex;align-items:flex-start;justify-content:space-between;height:68px;padding:12px 14px;
  background:radial-gradient(circle at 90% 125%,rgba(255,255,255,.22) 0 27%,transparent 28%),radial-gradient(circle at 68% -35%,rgba(255,255,255,.14) 0 30%,transparent 31%),linear-gradient(135deg,#0000E7,#3d5cff 65%,#5b94ff)}
.kda-oc-on{display:flex;align-items:center;gap:6px;color:#fff;font:700 11.5px var(--kdf)}
.kda-oc-on i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.3)}
.kda-oc .kda-oc-st{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:12px;background:rgba(255,255,255,.2);color:#fff;font:700 11.5px var(--kdf);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.kda-oc-st .kda-ic{width:13px;height:13px}

.kda-oc-main{display:flex;align-items:flex-start;gap:12px;padding:0 14px}
.kda-oc-ph{position:relative;flex:none;width:76px;height:76px;margin-top:-34px;border:3px solid var(--bg,#fff);border-radius:24px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,#e5ecff,#cdd9ff);color:#0000E7;font:800 28px var(--kdf);box-shadow:0 8px 18px rgba(0,0,100,.22)}
.kda-oc-ph img{width:100%;height:100%;object-fit:cover;display:block}
.kda-oc-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-top:10px}
.kda-oc-row{display:flex;align-items:center;gap:8px}
.kda-oc .kda-oc-nm{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:800 16px/1.2 var(--kdf);color:var(--kd-ink)}
.kda-oc-dt{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,231,.08);color:var(--b)}
.kda-oc-dt .kda-ic{width:15px;height:15px}
.kda-oc .kda-oc-own{font-size:12px;color:var(--g)}
html[data-theme=dark] .kda-oc-dt{color:#8ea6ff;background:rgba(142,166,255,.14)}
html[data-theme=dark] .kda-oc-ph{background:linear-gradient(135deg,#1d2859,#2a3a7a);color:#9db4ff}

.kda-oc .kda-oc-loc{display:flex;align-items:flex-start;gap:6px;margin:12px 14px 0;font-size:12.5px;line-height:1.4;color:var(--g)}
.kda-oc-loc .kda-ic{width:15px;height:15px;margin-top:1px;color:var(--b)}
.kda-oc .kda-oc-near{display:block;margin:4px 14px 0 35px;font-size:11.5px;font-weight:600;color:var(--b)}

.kda-oc .ds-actions{display:flex;flex-wrap:nowrap;gap:8px;margin:auto 14px 14px;padding-top:14px}
.kda-oc .ds-actions button{flex:1;height:46px;padding:0 14px;border:0;border-radius:16px;background:var(--b);color:#fff;font:700 14px var(--kdf);box-shadow:0 8px 16px rgba(0,0,231,.26)}
.kda-oc .ds-actions button:active{transform:scale(.98)}
.kda-oc .ds-actions a{flex:none;width:46px;height:46px;padding:0;display:grid;place-items:center;border-radius:16px;transition:transform .15s}
.kda-oc .ds-actions a:active{transform:scale(.94)}
.kda-oc .ds-actions a .kda-ic{width:22px;height:22px}
.kda-oc .ds-actions a.kda-oc-gps{border:1px solid rgba(0,0,231,.22);background:rgba(0,0,231,.08);color:var(--b)}
.kda-oc .ds-actions a.kda-oc-wa{border:0;background:#25D366;color:#fff;box-shadow:0 8px 16px rgba(37,211,102,.34)}
.kda-oc .ds-actions a.kda-oc-wa .kda-ic{width:24px;height:24px}
html[data-theme=dark] .kda-oc .ds-actions a.kda-oc-gps{color:#8ea6ff;border-color:rgba(142,166,255,.3);background:rgba(142,166,255,.12)}

/* ============================================================
   MENU BAWAH: dock melayang, ikon aktif dalam pil biru
   ============================================================ */
nav{bottom:calc(10px + env(safe-area-inset-bottom));width:calc(100% - 24px);max-width:456px;padding:8px;gap:2px;justify-content:space-between;
  border:1px solid var(--ln);border-radius:28px;background:var(--bg,#fff);box-shadow:0 16px 36px rgba(0,0,110,.18),0 2px 6px rgba(0,0,110,.06)}
nav button[data-p]{position:relative;flex:1;min-width:0;width:auto;height:56px;padding:8px 0 0;gap:6px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
nav button[data-p]::before{content:"";position:absolute;top:4px;left:50%;width:46px;height:30px;margin-left:-23px;border-radius:15px;background:var(--b);
  box-shadow:0 6px 14px rgba(0,0,231,.32);opacity:0;transform:scaleX(.4);transition:opacity .2s,transform .28s cubic-bezier(.3,1.3,.5,1)}
nav button[data-p].on::before{opacity:1;transform:none}
nav button[data-p] img{position:relative;width:22px;height:22px;opacity:.5;transition:opacity .2s}
nav button[data-p].on img{opacity:1;filter:brightness(0) invert(1);transform:none}
nav button[data-p] span{font:600 11px/1.1 var(--kdf);color:var(--g)}
nav button[data-p].on span{font-weight:800;color:var(--b)}
html[data-theme=dark] nav button[data-p].on span{color:#8ea6ff}

nav .cm{flex:none;width:64px;min-width:0;height:auto;margin:-28px 4px 0;padding:0;gap:4px;justify-content:flex-start}
nav .cm i{width:56px;height:56px;border:2px solid var(--b);border-radius:20px;background:var(--bg,#fff);
  box-shadow:0 0 0 5px var(--bg,#fff),0 10px 20px rgba(0,0,231,.3);transition:transform .15s}
nav .cm:active i{transform:scale(.95)}
nav .cm span{font:800 11px/1.1 var(--kdf)}

/* mini player musik dan notifikasi naik mengikuti dock */
.kmm{bottom:calc(92px + env(safe-area-inset-bottom))}

/* ---------- Notifikasi kecil (toast) seperti kartu ---------- */
#ts{bottom:calc(104px + env(safe-area-inset-bottom));background:var(--bg,#fff);color:inherit;font-size:13.5px;font-weight:600;padding:13px 18px 13px 16px;border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,80,.22);border-left:4px solid var(--b);opacity:0;transform:translateX(-50%) translateY(10px);transition:opacity .25s,transform .25s}
#ts.on{opacity:1;transform:translateX(-50%)}

/* ---------- Pindah halaman halus ---------- */
#v>*{animation:kdaIn .28s ease both}
@keyframes kdaIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Fokus keyboard + gerak dikurangi ---------- */
.kda-gr button:focus-visible,.kda-c:focus-visible,.fv button:focus-visible,.kda-oc a:focus-visible,.kda-oc button:focus-visible,nav button:focus-visible{outline:3px solid #5b94ff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){#v>*{animation:none}#ts{transition:none}nav button[data-p]::before{transition:none}}