html, body {
  height: 100%;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 1.2rem;
  text-align: center;
  color: white;
  background: transparent;
  overflow: hidden;
}

/* === CONTENT WRAPPER === */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  margin-top: 20px; /* supaya konten nempel atas */
}

/* === MAP === */
#map {
  width: 100%;
  height: calc(100vh - 120px);          /* 70% tinggi layar */
  margin: 0 auto;        /* center horizontal */
  border-radius: 12px;
  z-index: 10;
}

.legend {
  background:white;
  padding:8px;
  border-radius:6px;
  font-size:13px;
  color: #0a1a2f;
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.legend i {
  width:18px;
  height:18px;
  float:left;
  margin-right:8px;
  opacity:0.8;
}