:root{--bg:#0b1016;--panel:#101820;--brand:#ffd54d;--muted:#8aa0b2;--sidebar:380px;}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#0b1016,#0e151d 60%,#0b1016);color:#e7edf5;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans'}
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;height:100vh;gap:0;overflow:hidden}
.sidebar{background:var(--panel);border-right:1px solid #0f2533;padding:16px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.brand{display:flex;align-items:center;gap:12px}.brand .logo{width:36px;height:36px;border-radius:10px;background:radial-gradient(120% 120% at 20% 20%,#ffe082,#ffca28 50%,#f9a825 100%);box-shadow:0 8px 40px #ffca281a}
.brand h1{font-size:18px;margin:0;line-height:1.2}.brand small{color:var(--muted)}
.controls{display:grid;gap:10px;position:sticky;top:0;background:var(--panel);padding-bottom:6px;z-index:10}
.search{display:flex;align-items:center;gap:8px;background:#0b141d;border:1px solid #102536;border-radius:12px;padding:8px 10px}
.search input{background:transparent;border:none;outline:none;color:#e7edf5;width:100%}
.profile-toggle{display:flex;gap:6px}
.profile-toggle button{flex:1;padding:8px;border-radius:10px;border:1px solid #1a2f41;background:#0b141d;color:#cfe5ff;cursor:pointer}
.profile-toggle button.active{background:#12324a;border-color:#215174;color:#fff}
.dest-list{overflow:auto;min-height:0;border:1px solid #102536;border-radius:12px}
.dest-item{display:grid;grid-template-columns:64px 1fr auto;gap:10px;padding:10px;border-bottom:1px solid #0f2533;align-items:center}
.dest-item:last-child{border-bottom:none}
.dest-item img{width:64px;height:64px;object-fit:cover;border-radius:10px}
.dest-item h3{margin:0;font-size:14px}
.dest-item p{margin:2px 0 0;font-size:12px;color:#9fb4c9}
.actions{display:flex;gap:6px}
.btn{background:#0b141d;border:1px solid #1a2f41;color:#cfe5ff;border-radius:10px;padding:8px 10px;cursor:pointer}
.btn.primary{background:var(--brand);color:#1a1a1a;border-color:#b08900}
.footer{font-size:12px;color:#9fb4c9}.footer a{color:#cfe5ff}
#map{height:100vh;width:100%}.leaflet-control-attribution{background:rgba(0,0,0,.4);color:#e7edf5}
.route-panel{position:absolute;right:16px;top:16px;width:360px;max-height:74vh;overflow:auto;background:#0b141d;border:1px solid #102536;border-radius:14px;padding:12px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.route-panel h4{margin:0 0 8px 0}.route-summary{font-size:13px;color:#cfe5ff;margin-bottom:8px}
.go-nav{display:inline-block;margin:6px 0 10px 0;background:var(--brand);color:#1a1a1a;text-decoration:none;font-weight:700;padding:8px 12px;border-radius:10px}
.steps{font-size:12px;color:#9fb4c9;display:grid;gap:6px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#0b141d;border:1px solid #102536;color:#e7edf5;padding:10px 14px;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.35);font-size:14px;display:none;z-index:9999}
.controls .chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid #1a2f41;background:#0b141d;padding:6px 10px;border-radius:999px;cursor:pointer;font-size:12px;color:#cfe5ff}
.chip.active{background:#12324a;color:#fff;border-color:#215174}
@media (max-width:900px){.app{grid-template-columns:1fr}.sidebar{position:absolute;z-index:5000;width:calc(100% - 24px);margin:12px;border-radius:12px;box-shadow:0 24px 80px rgba(0,0,0,.45)}.route-panel{width:calc(100% - 32px);right:16px}}




/* Tombol mengambang “Destinasi” */
.fab{
  position: fixed;
  right: 12px;
  bottom: 16px;
  z-index: 6000;
  display: none;
  padding: 12px 14px;
  border-radius: 999px;
  background: var(--brand);
  color: #1a1a1a;
  border: none;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  cursor: pointer;
}

/* Mobile: map selalu kelihatan; sidebar disembunyikan default */
@media (max-width: 900px){
  .fab{ display: inline-flex; }
  /* Sidebar jadi panel mengambang yang bisa muncul/di-hide */
  .sidebar{
    position: fixed;
    left: 12px;
    right: 12px;
    top: -10px;
    width: auto;
    max-height: 60vh;            /* lebih tinggi sedikit */
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    background: rgba(16,24,32,.94);
    z-index: 5000;
    overflow: auto;
    transition: transform .25s ease, opacity .2s ease;
  }
  /* Keadaan “tersembunyi” (default) */
  .sidebar.mobile-hidden{
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
  }
}







/* ===== Bottom sheet route panel ===== */
.route-panel.bottom-sheet{
  position: fixed;
  left: 8px; right: 8px; bottom: 8px;
  background: #0b141d;
  border: 1px solid #102536;
  border-radius: 16px;
  box-shadow: 0 -20px 60px rgba(0,0,0,.35);
  padding: 10px 12px;
  z-index: 4000;
  max-height: 42vh;           /* Desktop default tinggi panel */
  overflow: hidden;
}
.route-panel.bottom-sheet.hidden{
  transform: translateY(calc(100% + 12px));
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.route-panel.bottom-sheet:not(.hidden){
  transform: translateY(0);
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}

/* Header & grid */
.rp-toggle{
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none; color: #cfe5ff;
  font-weight: 700; cursor: pointer; margin-bottom: 6px;
}
.rp-grid{ display: grid; grid-template-columns: 1fr; gap: 8px; }
.rp-summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rp-metrics{ display:flex; align-items:center; gap:8px; color:#cfe5ff; }
.rp-profile{ font-size:12px; opacity:.85; }

/* Step-by-step */
.rp-steps{ border-top:1px solid #102536; padding-top:8px; }
.rp-step-header{ font-size:12px; color:#9fb4c9; margin-bottom:6px; }
.rp-step{ font-size:13px; color:#e7edf5; background:#0f151c; border:1px solid #102536; border-radius:10px; padding:10px; min-height:42px; display:flex; align-items:center; }
.rp-step-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }

/* Tab kecil saat panel hidden */
.rp-tab{
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 8px;
  z-index: 4100;
  display: none;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--brand, #ffd54d);
  color: #1a1a1a;
  border: none; font-weight: 800;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  cursor: pointer;
}

/* Mobile: panel sedikit lebih tinggi */
@media (max-width: 900px){
  .route-panel.bottom-sheet{ max-height: 25vh; left: 6px; right: 6px; bottom: 6px; }
}


/* ===== Responsive Route Panel: Desktop = Kanan, Mobile = Bottom Sheet ===== */

/* --- DESKTOP (>=900px): panel kanan elegan --- */
.route-panel{
  /* gaya dasar dari styles.css kamu dipakai, kita tambah transisi */
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
.route-panel.hidden{
  /* geser keluar ke kanan saat disembunyikan */
  transform: translateX(120%);
  opacity: 0;
  pointer-events: none;
}

/* Tombol tab saat panel disembunyikan (posisi kanan bawah di desktop) */
.rp-tab{
  position: fixed;
  right: 24px;
  bottom: 16px;
  z-index: 4100;
  display: none;                 /* app.js akan set ke inline-flex saat hidden */
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--brand, #ffd54d);
  color: #1a1a1a;
  border: none; font-weight: 800;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  cursor: pointer;
}

/* --- MOBILE (<900px): bottom sheet seperti versi kamu sebelumnya --- */
@media (max-width: 900px){
  .route-panel{
    position: fixed;
    left: 8px; right: 8px; bottom: 8px;
    top: auto;
    width: auto;
    max-height: 52vh;            /* tinggi bottom sheet */
    background: #0b141d;
    border: 1px solid #102536;
    border-radius: 16px;
    box-shadow: 0 -20px 60px rgba(0,0,0,.35);
    padding: 10px 12px;
    z-index: 4000;
    overflow: hidden;
    transform: translateY(0);
  }
  .route-panel.hidden{
    transform: translateY(calc(100% + 12px));
    opacity: 1;                  /* tetap 1, hanya keluar layar bawah */
    pointer-events: auto;
  }

  /* Tab muncul di tengah bawah saat panel disembunyikan */
  .rp-tab{
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8px;
  }
}