/* KTEMU — sistem visual.
   Palet dari logo Ktemu. SATU NADA: seluruh chrome UI memakai keluarga ungu.
   Oranye dan magenta hanya hidup di dalam mark logo itu sendiri, tidak pernah
   di tombol, chip, badge, titik, atau FAB.

   TERANG SAJA — keputusan sadar, bukan kelalaian (permintaan founder). Prspectiv
   gelap; KTEMU sengaja jadi kebalikannya, sekaligus menyambung ke Sisih yang juga
   terang. `color-scheme: light` dipasang supaya kontrol form (select, scrollbar)
   ikut terang walau HP user disetel gelap — tanpa itu, dropdown "Tempat" muncul
   hitam di atas kartu putih. */

:root {
  color-scheme: light;

  /* Palet diambil dari logo Ktemu (2 Sep 2026): titik biru, huruf K bergradasi
     biru → ungu → magenta → oranye, di atas navy gelap. Namanya sengaja peran
     (brand/accent), bukan nama warna, supaya penggantian palet berikutnya tidak
     meninggalkan token "--hijau" yang isinya ungu. */
  --biru:#2E7BF6;
  --ungu:#5B33E8;
  --grad:linear-gradient(135deg,#7A57F0 0%,#5B33E8 52%,#3E1FB0 100%);

  --ground:#FAFAFD; --surface:#FFFFFF; --surface-2:#F3F2FA;
  --ink:#171B3A; --ink-2:#565B7E; --ink-3:#8A8FAE;
  --line:#E5E4F1; --line-strong:#D3D1E6;

  --brand:#5B33E8; --brand-deep:#3E1FB0; --brand-soft:#EFEAFE;
  --accent:#3E1FB0; --accent-deep:#2E1580; --accent-soft:#EFEAFE;

  --alert:#D1345B; --alert-soft:#FDECF0;
  --ok:#1F9268;

  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --tap:48px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --shadow:0 1px 2px rgba(23,27,58,.05), 0 10px 28px -16px rgba(23,27,58,.28);
  --shell:520px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
input,textarea{font:inherit; color:inherit}
a{color:var(--brand); text-underline-offset:2px}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}
.tnum{font-variant-numeric:tabular-nums lining-nums}

/* ── shell ── */
#app{max-width:var(--shell); margin:0 auto; min-height:100dvh; position:relative; background:var(--ground)}
.screen{display:none; padding:0 16px calc(96px + var(--safe-b))}
.screen.active{display:block}
.screen--full{display:none; padding:0}
.screen--full.active{display:block}

/* ── tipografi ── */
h1,h2,h3{margin:0; line-height:1.18; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:1.72rem; font-weight:800}
h2{font-size:1.24rem; font-weight:800}
h3{font-size:1.02rem; font-weight:700}
p{margin:0}
.eyebrow{font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.muted{color:var(--ink-2)}
.s{font-size:.88rem; color:var(--ink-2); line-height:1.5}
.tiny{font-size:.78rem; color:var(--ink-3); line-height:1.45}
.dim{color:var(--ink-3)}

/* ── appbar ── */
.appbar{
  position:sticky; top:0; z-index:20; background:var(--ground);
  display:flex; align-items:center; gap:10px; padding:14px 0 10px;
}
.appbar .brand{display:flex; align-items:baseline; gap:7px}
.brand-mark{font-size:1.32rem; font-weight:800; letter-spacing:-.03em; color:var(--brand)}
.brand-by{font-size:.7rem; font-weight:700; color:var(--ink-3); letter-spacing:.02em}
.appbar .spacer{flex:1}
.iconbtn{
  width:38px; height:38px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; background:var(--surface);
  border:1px solid var(--line); color:var(--ink-2);
}

/* ── tombol ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); width:100%; padding:0 18px; border-radius:999px;
  background:var(--brand); color:#fff; font-weight:700; font-size:.98rem;
  border:1px solid transparent; transition:transform .12s ease;
}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.42; pointer-events:none}
.btn--accent{background:var(--accent); color:#fff}
.btn--ghost{background:transparent; color:var(--brand); border-color:var(--line-strong)}
.btn--soft{background:var(--brand-soft); color:var(--brand-deep)}
.btn--sm{min-height:38px; width:auto; font-size:.85rem; padding:0 14px}
.linkbtn{color:var(--brand); font-weight:700; font-size:.88rem; text-decoration:underline}

/* ── kartu ── */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow);
}
.card + .card{margin-top:12px}

/* ── chip ── */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  padding:8px 13px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line-strong); font-size:.86rem; font-weight:600; color:var(--ink-2);
}
.chip[aria-pressed="true"]{
  background:var(--brand-soft); border-color:var(--brand); color:var(--brand-deep);
}
.chip--accent[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-deep)}
.chip--x{display:inline-flex; align-items:center; gap:6px}
.chip--x b{font-weight:800}

/* scroller filter waktu */
.scroll-x{display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}
.scroll-x .chip{flex:0 0 auto}

/* ── badge ── */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:.72rem; font-weight:700;
}
.badge--brand{background:var(--brand-soft); color:var(--brand-deep)}
.badge--accent{background:var(--accent-soft); color:var(--accent-deep)}
.badge--abu{background:var(--surface-2); color:var(--ink-2)}

/* ── kartu temu (feed) ── */
.tcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px;
  width:100%; text-align:left;
}
.tcard + .tcard{margin-top:12px}
.thost{display:flex; align-items:center; gap:10px}
.avatar{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto; object-fit:cover;
  background:var(--surface-2); border:1px solid var(--line);
}
.avatar--sm{width:28px; height:28px}
.thost-main{min-width:0; flex:1}
.thost-name{font-weight:800; font-size:.96rem; line-height:1.25}
.thost-role{font-size:.8rem; color:var(--brand); font-weight:600; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tbody{font-size:.94rem; line-height:1.55; color:var(--ink); white-space:pre-line}
.tmeta{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.83rem; color:var(--ink-2)}
.tmeta span{display:inline-flex; align-items:center; gap:5px}
.tfoot{
  display:flex; align-items:center; gap:10px; padding-top:11px;
  border-top:1px solid var(--line);
}
.troles{flex:1; min-width:0; font-size:.82rem; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tseats{font-size:.82rem; font-weight:700; color:var(--ink-2); white-space:nowrap}
.stack-av{display:flex; align-items:center}
.stack-av .avatar--sm{margin-left:-8px; border:2px solid var(--surface)}
.stack-av .avatar--sm:first-child{margin-left:0}
.more-av{
  width:28px; height:28px; border-radius:50%; margin-left:-8px; border:2px solid var(--surface);
  background:var(--surface-2); color:var(--ink-2); font-size:.68rem; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}

/* titik kursi */
.dots{display:inline-flex; gap:4px; align-items:center}
.dots i{width:8px; height:8px; border-radius:50%; border:1.5px solid var(--line-strong); display:block}
.dots i.on{background:var(--brand); border-color:var(--brand)}

/* ── baris detail ── */
.drow{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
.drow:last-child{border-bottom:0}
.drow .ic{
  width:34px; height:34px; border-radius:10px; flex:0 0 auto; background:var(--brand-soft);
  color:var(--brand-deep); display:inline-flex; align-items:center; justify-content:center;
}
.drow .k{font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.drow .v{font-weight:700; font-size:.96rem; margin-top:1px}
.drow .sub{font-size:.82rem; color:var(--ink-3); line-height:1.4; margin-top:2px}

/* ── sheet ── */
.scrim{
  position:fixed; inset:0; background:rgba(20,19,15,.45); z-index:60;
  display:flex; align-items:flex-end; justify-content:center; padding:0;
  animation:fade .18s ease;
}
.sheet{
  width:100%; max-width:var(--shell); background:var(--surface);
  border-radius:22px 22px 0 0; padding:18px 16px calc(20px + var(--safe-b));
  max-height:92dvh; overflow-y:auto; animation:up .22s cubic-bezier(.2,.8,.3,1);
}
.sheet-grip{width:38px; height:4px; border-radius:99px; background:var(--line-strong); margin:0 auto 14px}
.sheet-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:4px}
.sheet-head h2{flex:1}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(14px)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.scrim,.sheet{animation:none}}

/* ── form ── */
.field{margin-top:14px}
.field label{display:block; font-size:.86rem; font-weight:700; margin-bottom:6px}
.field .req{color:var(--alert)}
.input, textarea.input{
  width:100%; min-height:var(--tap); padding:12px 14px; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
}
textarea.input{min-height:112px; resize:vertical; line-height:1.5}
.input::placeholder,textarea.input::placeholder{color:var(--ink-3)}
.input:focus,textarea.input:focus{outline:none; border-color:var(--brand); background:var(--surface)}
.hint-row{display:flex; justify-content:space-between; gap:10px; margin-top:5px}
.notebox{
  display:flex; gap:9px; align-items:flex-start; margin-top:8px; padding:11px 13px;
  border-radius:var(--r-md); background:var(--surface-2); font-size:.82rem; color:var(--ink-2); line-height:1.5;
}
.notebox svg{flex:0 0 auto; margin-top:2px; color:var(--ink-3)}

/* toggle */
.toggle-row{
  display:flex; gap:14px; align-items:flex-start; padding:14px;
  border:1px solid var(--line); border-radius:var(--r-md); margin-top:10px; background:var(--surface);
}
.toggle-row .tt{flex:1}
.toggle-row .tt b{display:block; font-size:.94rem}
.switch{
  flex:0 0 auto; width:50px; height:30px; border-radius:99px; background:var(--line-strong);
  position:relative; transition:background .16s ease;
}
.switch i{
  position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background:#fff; transition:transform .16s ease; box-shadow:0 1px 3px rgba(0,0,0,.25); display:block;
}
.switch[aria-pressed="true"]{background:var(--brand)}
.switch[aria-pressed="true"] i{transform:translateX(20px)}

/* ── bottom nav ── */
.nav{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  max-width:var(--shell); margin:0 auto;
  background:var(--surface); border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center;
  padding-bottom:var(--safe-b);
}
.nav[hidden]{display:none}
.nav button{
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 0 8px;
  font-size:.66rem; font-weight:700; color:var(--ink-3);
}
.nav button.on{color:var(--brand)}
.nav .fab{
  width:54px; height:54px; border-radius:50%; background:var(--accent); color:#fff;
  margin:-16px auto 0; box-shadow:0 6px 18px -4px rgba(62,31,176,.45);  /* var(--accent) */
  display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.nav .dot-new{
  position:absolute; transform:translate(11px,-4px); width:7px; height:7px;
  border-radius:50%; background:var(--alert);
}

/* ── onboarding ── */
.ob{
  min-height:100dvh; display:flex; flex-direction:column; padding:0 20px calc(22px + var(--safe-b));
  max-width:var(--shell); margin:0 auto;
}
.ob-hero{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:14px; padding:28px 0;
}
/* Tile logo sengaja TERANG, bukan ungu pekat. Mark Ktemu itu sendiri sudah
   bergradasi biru → magenta → oranye; ditaruh di atas ungu, titik birunya
   hilang dan yang tersisa cuma siluet gelap. */
.ob-logo{
  width:84px; height:84px; border-radius:26px; background:var(--brand-soft);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); border:1px solid rgba(91,51,232,.1);
}
.ob-dots{display:flex; gap:7px; justify-content:center; padding:14px 0}
.ob-dots i{width:7px; height:7px; border-radius:99px; background:var(--line-strong); transition:all .2s}
.ob-dots i.on{width:20px; background:var(--accent)}
.ob-foot{display:flex; flex-direction:column; gap:10px}
.ob-illus{width:100%; border-radius:var(--r-lg); display:block}

/* ── pratinjau (create) ── */
.preview-wrap{margin-top:18px}
.preview-lbl{font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}

/* ── profil ── */
.phead{text-align:center; padding:14px 0 6px}
.phead .avatar{width:92px; height:92px; margin:0 auto}
.pgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.pbox{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:13px}
.pbox .big{font-size:1.5rem; font-weight:800; line-height:1}
.sec-head{display:flex; align-items:center; gap:10px; margin:22px 0 10px}
.sec-head h3{flex:1; display:flex; align-items:center; gap:8px}
.sec-head h3::before{content:""; width:3px; height:16px; border-radius:2px; background:var(--accent)}

/* sesi */
.sesi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:13px}
.sesi + .sesi{margin-top:10px}
.stars{display:inline-flex; gap:3px}
.stars button{font-size:1.05rem; line-height:1; color:var(--line-strong)}
.stars button.on{color:var(--accent)}

/* ── empty ── */
.empty{
  text-align:center; padding:34px 18px; border:1px dashed var(--line-strong);
  border-radius:var(--r-lg); color:var(--ink-2);
}
.empty .t{font-weight:800; color:var(--ink); margin-bottom:4px}

/* ── toast ── */
#toast{
  position:fixed; left:50%; bottom:calc(86px + var(--safe-b)); transform:translateX(-50%);
  background:var(--ink); color:var(--ground); padding:11px 17px; border-radius:999px;
  font-size:.88rem; font-weight:600; z-index:80; opacity:0; pointer-events:none;
  transition:opacity .2s ease; max-width:90%; text-align:center;
}
#toast.on{opacity:1}

/* ── pencarian tempat (Photon/OSM) ── */
.tp-cari{display:flex;align-items:center;gap:9px;padding:0 14px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line);min-height:var(--tap)}
.tp-cari:focus-within{border-color:var(--brand);background:var(--surface)}
.tp-in{flex:1;border:0;background:none;outline:none;min-height:46px}
.tp-ic{flex:0 0 auto;color:var(--ink-3);display:inline-flex}
.tp-baris{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:12px 14px;
  border-bottom:1px solid var(--line);background:var(--surface)}
.tp-baris:first-child{border-top-left-radius:var(--r-md);border-top-right-radius:var(--r-md);margin-top:6px}
.tp-baris:last-child{border-bottom:0;border-bottom-left-radius:var(--r-md);border-bottom-right-radius:var(--r-md)}
#tp-hasil{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-top:6px}
#tp-hasil:empty{border:0;margin:0}
.tp-txt{min-width:0;display:flex;flex-direction:column}
.tp-txt b{font-size:.93rem;font-weight:700;line-height:1.3}
.tp-txt span{font-size:.8rem;color:var(--ink-3);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-manual .tp-txt b{color:var(--brand-deep)}
.tp-pilih{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:var(--r-md);
  background:var(--brand-soft);border:1px solid transparent}
.tp-pilih .tp-ic{color:var(--brand-deep)}
.tp-pilih .tp-txt{flex:1}
.tp-x{flex:0 0 auto;width:30px;height:30px;border-radius:50%;color:var(--ink-2);font-size:.9rem}

/* ── pintu masuk Google ──────────────────────────────────────────────────
   Tombol Google sengaja putih dengan garis tipis, bukan diwarnai brand:
   pedoman merek Google melarang menempel logo G di atas warna sendiri, dan
   orang mengenali tombol ini justru karena bentuknya seragam di mana-mana. */
.btn--google{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-strong); gap:10px;
}
.btn--google:active{background:var(--surface-2)}
.masuk-hero{
  display:flex; align-items:center; justify-content:center;
  width:84px; height:84px; margin:2px auto 0;
  border-radius:24px; background:var(--brand-soft);
}

/* Wordmark bergradasi, dipakai hanya di layar sambutan. Di appbar tetap warna
   polos supaya teks kecil tidak jadi buram. */
.brand-mark--grad{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* By-line induk. Sengaja kecil dan abu: yang harus diingat orang KTEMU, bukan
   siapa yang menaunginya. Pelajaran dari "TEMU by Sisih" yang dulu terlalu
   menonjol sampai dua brand berebut perhatian di layar pertama. */
.byline{
  margin-top:7px; font-size:.78rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink-3);
}

/* ── tumpukan wajah peserta di kaki kartu feed ────────────────────────────
   Bertindih ke kiri supaya lima wajah muat tanpa memaksa kartunya melebar. */
.stack-av{display:flex; align-items:center; margin-top:10px}
.stack-lebih{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 7px; margin-left:-8px;
  border-radius:999px; background:var(--surface-2); border:2px solid var(--surface);
  font-size:.72rem; font-weight:800; color:var(--ink-2);
}

/* ── kartu "Segera": temu yang sudah kamu ikuti ───────────────────────────
   Sengaja lebih rapat dari kartu feed. Ini pengingat, bukan tawaran, jadi
   tidak perlu mengulang seluruh undangannya. */
.segera{
  display:block; width:100%; text-align:left; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:var(--r-md); padding:13px 15px; margin-bottom:10px;
}
.segera-atas{display:flex; gap:11px; align-items:center; margin-bottom:10px}
.segera-baris{
  display:flex; gap:8px; align-items:center; color:var(--ink-2);
  font-size:.87rem; padding-top:7px; border-top:1px solid var(--line);
}
.segera-baris + .segera-baris{margin-top:0}
.segera-baris svg{color:var(--ink-3); flex:0 0 auto}

/* ── kartu orang (peserta yang bisa dibuka profilnya) ────────────────────── */
.orang{
  display:flex; gap:11px; align-items:center; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px 13px;
}
.orang + .orang{margin-top:9px}
.orang-isi{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.orang-nama{font-weight:700; font-size:.95rem; color:var(--ink)}
.orang-peran{font-style:normal; font-weight:600; color:var(--brand); font-size:.86rem}
.orang-tentang{font-size:.84rem; color:var(--ink-2); line-height:1.45}
.orang-panah{color:var(--ink-3); flex:0 0 auto}

/* ── daftar room ─────────────────────────────────────────────────────────── */
.room-row{
  display:flex; gap:12px; align-items:center; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px 13px;
}
.room-row + .room-row{margin-top:9px}
.room-isi{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.room-atas{display:flex; align-items:baseline; gap:8px}
.room-atas b{font-size:.95rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.room-atas i{font-style:normal; color:var(--ink-3); flex:0 0 auto}
.room-akhir{
  font-size:.86rem; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── layar obrolan ───────────────────────────────────────────────────────── */
.room-kepala{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  background:var(--brand-soft); border-radius:var(--r-md);
  padding:9px 13px; font-size:.85rem; color:var(--brand-deep); font-weight:600;
}
.room-kepala svg{color:var(--brand)}
.room-kepala span + svg{margin-left:8px}
.room-list{
  display:flex; flex-direction:column; gap:9px;
  padding:16px 0 84px; min-height:40vh;
}
.bubl{display:flex; flex-direction:column; gap:3px; max-width:82%; align-self:flex-start}
.bubl--aku{align-self:flex-end; align-items:flex-end}
.bubl-dari{font-size:.74rem; font-weight:700; color:var(--ink-3); padding-left:12px}
.bubl-teks{
  background:var(--surface); border:1px solid var(--line);
  border-radius:16px 16px 16px 5px; padding:10px 14px; font-size:.94rem; line-height:1.5;
}
.bubl--aku .bubl-teks{
  background:var(--brand); border-color:transparent; color:#fff;
  border-radius:16px 16px 5px 16px;
}
.room-tulis{
  position:fixed; left:0; right:0; bottom:0; z-index:5;
  display:flex; gap:9px; align-items:center;
  max-width:var(--shell); margin:0 auto;
  padding:10px 18px calc(10px + var(--safe-b));
  background:var(--ground); border-top:1px solid var(--line);
}
.room-tulis .input{margin:0; flex:1}
.room-kirim{
  background:var(--brand); color:#fff; width:44px; height:44px; border-radius:50%;
  flex:0 0 auto;
}