/* Reset & font */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Poppins', sans-serif; background: #f4f6fa; color: #333; }

/* Header */
.top-bar {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 1.5rem;
  background: #004d80; color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.logo { height: 50px; filter: drop-shadow(0 0 2px #fff); }
.top-bar h1 { font-weight: 500; font-size: 1.25rem; }

/* Layout utama */
.wrapper {
  display: flex; height: calc(100vh - 70px);
}
#map { flex: 1; z-index: 1; }

/* Panel samping */
.side-panel {
  width: 320px; background: #fff; padding: 1.2rem;
  box-shadow: -2px 0 8px rgba(0,0,0,.08);
  overflow-y: auto;
}
.side-panel h2 { margin-bottom: .8rem; font-size: 1.1rem; }
#slider { width: 100%; margin: .5rem 0 1.2rem; }

/* Responsif */
@media (max-width: 768px) {
  .wrapper { flex-direction: column; }
  .side-panel { width: 100%; height: 260px; box-shadow: 0 -2px 8px rgba(0,0,0,.08); }
  .top-bar h1 { font-size: 1rem; }
}