/* ===============================================
   PETA WILAYAH PAGE SPECIFIC STYLES
   =============================================== */

/* 1. Palet Warna Khas Peta & Geografis */
:root {
  --peta-bg: #F5F3EF; /* Krem lembut seperti kertas peta */
  --peta-surface: #FFFFFF;
  --peta-text: #5D4037; /* Coklat tua untuk teks */
  --peta-heading: #1B5E20; /* Hijau tua seperti hutan */
  --peta-accent: #0277BD; /* Biru cerah seperti air */
  --peta-border: rgba(27, 94, 32, .15);
  --peta-shadow: 0 10px 30px rgba(93, 64, 55, .12);
}

html[data-theme="dark"] {
  --peta-bg: #1a1d1f;
  --peta-surface: #24282b;
  --peta-text: #E0E0E0;
  --peta-heading: #A5D6A7; /* Hijau muda */
  --peta-accent: #4FC3F7; /* Biru muda */
  --peta-border: rgba(165, 214, 167, .2);
  --peta-shadow: 0 15px 40px rgba(0, 0, 0, .25);
}

body {
  background: var(--peta-bg);
  color: var(--peta-text);
}

/* 2. Hero Section Kustom */
#peta-hero {
  background-image:
    linear-gradient(to top, var(--peta-bg) 5%, transparent 50%),
    url('../images/background_title_profil.jpg');
  background-color: var(--peta-bg);
  background-blend-mode: normal;
  background-size: cover;
  background-position: center 30%;
  min-height: 50vh;
}

#peta-hero h1,
#peta-hero p,
#peta-hero .breadcrumb a,
#peta-hero .breadcrumb span {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

/* 3. Peta Wrapper */
.peta-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--peta-shadow);
    border: 3px solid var(--peta-surface);
    background-color: var(--peta-bg);
    margin-top: -80px; /* Menarik peta ke atas agar sedikit menumpuk dengan hero */
    position: relative;
    z-index: 5;
    height: 600px; /* Menetapkan tinggi wadah peta */
}

.peta-wrapper iframe {
    position: absolute;
    top: -60px; /* Menggeser iframe ke atas untuk menyembunyikan header */
    left: 0;
    width: 100%;
    height: calc(100% + 60px); /* Menyesuaikan tinggi iframe agar pas */
    display: block;
}


/* 4. Legenda Peta */
.legenda-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.legenda-item {
    background: var(--peta-surface);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--peta-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.legenda-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--peta-shadow);
}

.legenda-item img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.legenda-info h4 {
    margin: 0 0 0.25rem 0;
    color: var(--peta-heading);
    font-size: 1.1rem;
}

.legenda-info p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
}

/* 5. Override Tombol & Footer di Halaman Peta */
.navbar .nav a.btn--smarthub {
    background: var(--peta-heading);
    box-shadow: 0 4px 15px rgba(27, 94, 32, .3);
}
.navbar .nav a.btn--smarthub:hover {
    background: var(--peta-accent);
}

footer {
    background: linear-gradient(180deg, rgba(27, 94, 32, .05), transparent), var(--peta-bg);
    color: var(--peta-text);
}
footer b {
    color: var(--peta-heading);
}
footer a:hover {
    color: var(--peta-accent) !important;
}