/* === FONT === */
@font-face {
  font-family: 'Moana';
  src: url('../get/font/moana.ttf') format('truetype');
  font-display: swap;
}

@keyframes bgChange {
  0%, 100% { background-color: #0a1a2f; }
  20%      { background-color: #122d49; }
  40%      { background-color: #193f63; }
  60%      { background-color: #1b4370; }
  80%      { background-color: #21487a; }
}

html, body {
  height: 100%;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  color: white;
  background: #0a1a2f;
  animation: bgChange 15s infinite;
}

.page-wrapper{
	display:flex;
	flex-direction:column;
	min-height:100vh;
}

/* HEADER */
.header {
	background:#0b3d91;
	color:white;
	padding:8px 20px;
	display:flex;
	align-items:center;
	gap:15px;
	text-align: left;
}

.header img{height:50px;}

.samawa {
    font-family: 'Moana', cursive;
    font-size: 2.5rem;
    color: #ffcc00;
    line-height: 1; /* ⬅️ ini kunci */
    margin: 0;
}

.desc {
    font-size: 12px;
    opacity: 0.9;
    line-height: 1.1; /* ⬅️ kecilkan jarak */
    margin: 0;
}

/* MENU */
.dashboard-menu{
	padding:10px 20px;
	background:white;
	box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.menu-tile{
	border-radius:12px;
	background:linear-gradient(135deg,#0b3d91,#1f6feb);
	color:white;
	padding:10px;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	font-weight:600;
	height:48px;
	cursor:pointer;
}

.menu-tile:hover{
	transform:translateY(-2px);
	box-shadow:0 6px 14px rgba(0,0,0,0.15);
}

/* CONTENT */
.content-area{
	flex:1;
	padding:15px 20px;
}

/* MAP */
#map{
	width:100%;
	height:72vh;
	border-radius:12px;
	box-shadow:0 4px 12px rgba(0,0,0,0.12);
}

/* LEGEND */
.legend{
	background:white;
	padding:8px;
	font-size:12px;
	border-radius:6px;
	box-shadow:0 0 8px rgba(0,0,0,0.2);
}

/* === FOOTER === */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 5px;
  font-size: 0.9rem;
  color: white;
  text-align: left;
  z-index: 999;
}