/* ============================================================
   RESET
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {
    --primary: #1f5c45;
    --primary-dark: #164434;
    --primary-light: #e8f2ed;

    --background: #f5f7f6;
    --surface: #ffffff;

    --text-main: #1d2924;
    /* Kontras >= 4,5:1 (WCAG AA) pada semua latar terang yang dipakai, termasuk --primary-light. */
    --text-secondary: #5c6863;
    --text-muted: #616e68;

    --border: #e1e7e4;

    --success: #2d8a5c;
    --warning: #d89a28;
    --danger: #c74b43;

    --sidebar-width: 250px;

    --shadow:
        0 4px 20px rgba(25, 45, 36, 0.06);
}


html {
    scroll-behavior: smooth;
}


body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--background);
    color: var(--text-main);

    min-height: 100vh;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    width: var(--sidebar-width);

    background: var(--surface);

    border-right: 1px solid var(--border);

    display: flex;
    flex-direction: column;

    z-index: 1000;
}


/* BRAND */

.brand {
    height: 82px;

    padding: 0 22px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-bottom: 1px solid var(--border);
}


.brand-icon {
    width: 40px;
    height: 40px;

    border-radius: 10px;

    background: var(--primary);

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    font-weight: 800;
}


.brand-text h1 {
    font-size: 14px;
    letter-spacing: 0.5px;
}


.brand-text span {
    display: block;

    margin-top: 3px;

    font-size: 12px;

    color: var(--text-muted);
}


/* NAVIGATION */

.navigation {
    padding: 22px 14px;

    flex: 1;
}


.nav-section-title {
    padding: 0 10px;

    margin: 18px 0 8px;

    font-size: 12px;
    font-weight: 700;

    color: var(--text-muted);

    letter-spacing: 1.2px;
}


.nav-section-title:first-child {
    margin-top: 0;
}


.nav-item {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 11px 12px;

    margin-bottom: 4px;

    border-radius: 8px;

    color: var(--text-secondary);

    text-decoration: none;

    font-size: 13px;
    font-weight: 500;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.nav-item:hover {
    background: var(--primary-light);

    color: var(--primary);
}


.nav-item.active {
    background: var(--primary);

    color: white;
}


.nav-icon {
    width: 22px;

    display: flex;
    justify-content: center;

    font-size: 16px;
    font-weight: 700;
}


/* SIDEBAR FOOTER */

.sidebar-footer {
    padding: 18px;

    border-top: 1px solid var(--border);
}


.sidebar-footer p {
    font-size: 12px;

    line-height: 1.5;

    color: var(--text-muted);
}


/* STATUS DOT */

.status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--text-muted);

    flex-shrink: 0;
}


.status-dot[data-tone="ok"] {
    background: var(--success);
}


.status-dot[data-tone="warn"] {
    background: var(--warning);
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */

.main-content {
    margin-left: var(--sidebar-width);

    min-height: 100vh;

    display: flex;
    flex-direction: column;
}


/* ============================================================
   TOPBAR
   ============================================================ */

.topbar {
    height: 82px;

    background: var(--surface);

    border-bottom: 1px solid var(--border);

    padding: 0 32px;

    display: flex;
    align-items: center;

    justify-content: space-between;

    position: sticky;
    top: 0;

    z-index: 500;
}


.page-label,
.section-label {
    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.2px;

    color: var(--primary);
}


.page-heading h2 {
    margin-top: 3px;

    font-size: 18px;
}


.topbar-status {
    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 12px;

    color: var(--text-secondary);
}


/* MOBILE MENU */

.mobile-menu-button {
    display: none;

    border: none;

    background: none;

    font-size: 22px;

    cursor: pointer;

    color: var(--text-main);
}


/* ============================================================
   PAGE CONTENT
   ============================================================ */

.page-content {
    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 34px;
}


/* ============================================================
   WELCOME
   ============================================================ */

.welcome-section {
    margin-bottom: 30px;
}


.welcome-section h1,
.page-introduction h1 {
    margin-top: 6px;

    font-size: 28px;

    line-height: 1.2;
}


.welcome-section p,
.page-introduction p {
    max-width: 680px;

    margin-top: 9px;

    font-size: 14px;

    line-height: 1.7;

    color: var(--text-secondary);
}


/* ============================================================
   STATISTICS
   ============================================================ */

.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;

    margin-bottom: 20px;
}


.stat-card {
    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 22px;

    box-shadow: var(--shadow);
}


.stat-title {
    display: block;

    font-size: 12px;

    color: var(--text-secondary);

    margin-bottom: 10px;
}


.stat-value {
    display: block;

    font-size: 26px;

    font-weight: 750;

    color: var(--primary);
}


.stat-description {
    display: block;

    margin-top: 5px;

    font-size: 12px;

    color: var(--text-muted);
}


/* ============================================================
   CONTENT GRID
   ============================================================ */

.content-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;
}


.information-card {
    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 22px;

    box-shadow: var(--shadow);
}


.card-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 16px;
}


.card-header h3 {
    margin-top: 5px;

    font-size: 16px;
}


.information-card p {
    font-size: 12px;

    line-height: 1.7;

    color: var(--text-secondary);
}


.card-link {
    color: var(--primary);

    text-decoration: none;

    font-size: 12px;

    font-weight: 650;

    white-space: nowrap;
}


.card-link:hover {
    text-decoration: underline;
}


/* ============================================================
   NOTICE
   ============================================================ */

.dashboard-notice {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 20px;

    padding: 16px;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: var(--primary-light);
}


.notice-icon {
    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: var(--primary);

    color: white;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 12px;

    flex-shrink: 0;
}


.dashboard-notice strong {
    font-size: 12px;
}


.dashboard-notice p {
    margin-top: 4px;

    font-size: 12px;

    line-height: 1.5;

    color: var(--text-secondary);
}


/* ============================================================
   PAGE INTRODUCTION
   ============================================================ */

.page-introduction {
    margin-bottom: 28px;
}


/* ============================================================
   EDUKASI
   ============================================================ */

.edu-page {
    display: grid;
    gap: 20px;
    max-width: 1120px;
}

.edu-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Pembuka: hijau tua dengan garis kontur seperti peta topografi. */
.edu-hero {
    position: relative;
    overflow: hidden;
    padding: 36px 36px 30px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, #2f7d5b 100%);
    box-shadow: 0 12px 32px rgba(22, 68, 52, 0.22);
}

.edu-hero-contours {
    position: absolute;
    top: -30px;
    right: -40px;
    width: 520px;
    height: auto;
    fill: none;
    stroke: rgba(255, 255, 255, 0.13);
    stroke-width: 1.4;
    pointer-events: none;
}

.edu-hero-body {
    position: relative;
    max-width: 700px;
}

.edu-hero-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #bfe3d0;
}

.edu-hero h1 {
    margin-top: 8px;
    font-size: 30px;
    line-height: 1.2;
}

.edu-hero p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.86);
}

.edu-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.edu-jump a {
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
}

.edu-jump a:hover {
    background: rgba(255, 255, 255, 0.22);
}

.edu-jump a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Kartu bagian; warna tiap bagian lewat --tone. */
.edu-card {
    --tone: var(--primary);
    --tone-ink: var(--primary-dark);
    --tone-soft: var(--primary-light);
    position: relative;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
    scroll-margin-top: 100px;
}

.edu-tone-teal { --tone: #1f7a74; --tone-ink: #155a55; --tone-soft: #e2f3f1; }
.edu-tone-amber { --tone: #d89a28; --tone-ink: #7a4b00; --tone-soft: #fff1d6; }
.edu-tone-green { --tone: #2d8a5c; --tone-ink: #1f5c45; --tone-soft: #e3f3ea; }
.edu-tone-red { --tone: #c74b43; --tone-ink: #8f2d27; --tone-soft: #fde8e6; }
.edu-tone-blue { --tone: #3a6ea5; --tone-ink: #244b75; --tone-soft: #e6eef8; }

.edu-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.edu-badge {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--tone-soft);
    color: var(--tone-ink);
}

.edu-badge .edu-icon {
    width: 26px;
    height: 26px;
}

.edu-kicker {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--tone-ink);
}

.edu-card h2 {
    margin-top: 2px;
    font-size: 19px;
    line-height: 1.3;
}

.edu-lead {
    max-width: 760px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--text-secondary);
}

.edu-subtitle {
    margin: 20px 0 10px;
    font-size: 13px;
    color: var(--text-main);
}

.edu-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    list-style: none;
}

.edu-tiles li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-radius: 12px;
    background: var(--tone-soft);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.edu-tiles strong {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    color: var(--text-main);
}

.edu-tile-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--surface);
    color: var(--tone-ink);
}

.edu-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}

.edu-tags li {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    font-size: 12px;
    color: var(--text-main);
}

/* Tanda bahaya: kartu hangat dengan aksen kuning di tepi kiri. */
.edu-card-alert {
    border-color: #f1d9a6;
    background: linear-gradient(180deg, #fffaf0 0%, var(--surface) 70%);
}

.edu-card-alert::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--tone);
}

.edu-signs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    margin-top: 16px;
    list-style: none;
}

.edu-signs li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid #f3e2bd;
    border-radius: 12px;
    background: var(--surface);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.edu-signs li:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(122, 75, 0, 0.1);
}

.edu-signs strong {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    color: var(--text-main);
}

.edu-sign-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--tone-soft);
    color: var(--tone-ink);
}

.edu-sign-icon .edu-icon {
    width: 25px;
    height: 25px;
}

/* Sebelum, saat, sesudah: tiga kartu dengan pita warna di atas. */
.edu-group-label {
    margin: 6px 0 -6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.edu-phases {
    display: grid;
    gap: 16px;
}

.edu-phase {
    display: flex;
    flex-direction: column;
    padding-top: 0;
    overflow: hidden;
}

.edu-phase-band {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -26px 18px;
    padding: 14px 26px;
    /* Warna gelap tema: teks putih di atasnya >= 7,8:1 (warna --tone hijau hanya 4,28:1). */
    background: var(--tone-ink);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.edu-phase-step {
    margin-left: auto;
    opacity: 0.85;
}

.edu-phase-body {
    flex: 1;
}

.edu-checklist {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    list-style: none;
    counter-reset: langkah;
}

.edu-checklist li {
    position: relative;
    padding-left: 34px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-secondary);
    counter-increment: langkah;
}

.edu-checklist li::before {
    content: counter(langkah);
    position: absolute;
    top: 1px;
    left: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tone-soft);
    color: var(--tone-ink);
    font-size: 12px;
    font-weight: 700;
}

.edu-checklist strong {
    color: var(--text-main);
}

.edu-callout {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--tone-soft);
    font-size: 12px;
    line-height: 1.65;
    color: var(--tone-ink);
}

/* Kontak darurat: tombol telepon besar yang mudah ditekan. */
.edu-contact {
    border-color: #f2c9c5;
    background: linear-gradient(135deg, #fff5f4 0%, var(--surface) 60%);
}

.edu-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 6px 0 14px;
}

.edu-call {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    padding: 14px 20px;
    border: 1px solid var(--tone-ink);
    border-radius: 12px;
    background: var(--tone-ink);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(199, 75, 67, 0.25);
    transition: transform 0.2s ease;
}

.edu-call span {
    font-size: 12px;
}

.edu-call strong {
    font-size: 26px;
    letter-spacing: 0.5px;
}

.edu-call:hover {
    transform: translateY(-2px);
}

.edu-call:focus-visible {
    outline: 2px solid var(--tone-ink);
    outline-offset: 3px;
}

.edu-call-secondary {
    border-color: #f2c9c5;
    background: var(--surface);
    color: var(--tone-ink);
    box-shadow: none;
}

.edu-call-secondary strong {
    font-size: 18px;
}

.edu-contact > p {
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.edu-contact > p a {
    color: var(--tone-ink);
}

/* Catatan tentang batas aplikasi: netral, garis putus-putus. */
.edu-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-style: dashed;
    background: var(--background);
    box-shadow: none;
}

.edu-note h2 {
    font-size: 15px;
}

.edu-note p {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.education-sources {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-muted);
}

.education-sources a {
    color: var(--text-secondary);
    text-decoration-color: rgba(102, 115, 109, 0.4);
}

.education-sources a:hover {
    color: var(--tone-ink);
}

@media (min-width: 1200px) {

    .edu-phases {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (max-width: 900px) {

    .edu-tiles {
        grid-template-columns: 1fr;
    }

    /* Satu kolom: ikon di kiri agar ubin tidak terlalu tinggi. */
    .edu-tiles li {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
    }

}

@media (max-width: 480px) {

    .edu-hero {
        padding: 26px 20px 22px;
    }

    .edu-hero h1 {
        font-size: 24px;
    }

    .edu-hero-contours {
        right: -150px;
        width: 420px;
    }

    .edu-card {
        padding: 20px;
    }

    .edu-phase {
        padding-top: 0;
    }

    .edu-signs li {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
    }

    .edu-phase-band {
        margin: 0 -20px 16px;
        padding: 12px 20px;
    }

    .edu-call {
        flex: 1 1 100%;
    }

}

@media (prefers-reduced-motion: reduce) {

    .edu-signs li,
    .edu-call,
    .edu-jump a {
        transition: none;
    }

    .edu-signs li:hover,
    .edu-call:hover {
        transform: none;
    }

}


/* ============================================================
   PREDICTION
   ============================================================ */

.prediction-container {
    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap: 18px;
}


.prediction-form-card,
.prediction-result-card {
    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 24px;

    box-shadow: var(--shadow);
}


.prediction-form-card h2 {
    font-size: 17px;

    margin-bottom: 7px;
}


.prediction-form-card > p {
    font-size: 12px;

    line-height: 1.6;

    color: var(--text-secondary);

    margin-bottom: 25px;
}


.form-group {
    margin-bottom: 18px;
}


.form-group label {
    display: block;

    margin-bottom: 7px;

    font-size: 12px;

    font-weight: 650;
}


.form-group input {
    width: 100%;

    padding: 12px 13px;

    border: 1px solid var(--border);

    border-radius: 7px;

    outline: none;

    font-size: 12px;

    color: var(--text-main);

    background: var(--surface);

    transition: border 0.2s ease;
}


.form-group input:focus {
    border-color: var(--primary);
}


.primary-button {
    width: 100%;

    padding: 12px;

    border: none;

    border-radius: 7px;

    background: var(--primary);

    color: white;

    font-size: 12px;

    font-weight: 650;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.1s ease;
}


.primary-button:hover {
    background: var(--primary-dark);
}


.primary-button:active {
    transform: scale(0.99);
}


.empty-result {
    min-height: 220px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.empty-result > span {
    font-size: 40px;

    color: var(--text-muted);

    margin-bottom: 10px;
}


.empty-result p {
    font-size: 12px;

    color: var(--text-secondary);
}


/* ============================================================
   FOOTER
   ============================================================ */

.main-footer {
    margin-top: auto;

    padding: 18px 34px;

    border-top: 1px solid var(--border);

    display: flex;

    justify-content: space-between;

    gap: 20px;

    font-size: 12px;

    color: var(--text-muted);
}


/* ============================================================
   SIDEBAR OVERLAY
   ============================================================ */

.sidebar-overlay {
    display: none;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {

    .content-grid {
        grid-template-columns: 1fr 1fr;
    }

    .information-card:last-child {
        grid-column: span 2;
    }

    .prediction-container {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 768px) {

    :root {
        --sidebar-width: 250px;
    }


    .sidebar {
        transform: translateX(-100%);

        transition: transform 0.25s ease;
    }


    .sidebar.open {
        transform: translateX(0);
    }


    .main-content {
        margin-left: 0;
    }


    .mobile-menu-button {
        display: block;
    }


    .topbar {
        padding: 0 18px;

        gap: 15px;
    }


    .topbar-status {
        display: none;
    }


    .page-heading {
        flex: 1;
    }


    .page-heading h2 {
        font-size: 15px;
    }


    .page-content {
        padding: 24px 18px;
    }


    .stats-grid {
        grid-template-columns: 1fr;
    }


    .content-grid {
        grid-template-columns: 1fr;
    }


    .information-card:last-child {
        grid-column: auto;
    }


    .main-footer {
        padding: 16px 18px;

        flex-direction: column;
    }


    .sidebar-overlay.active {
        display: block;

        position: fixed;

        inset: 0;

        background: rgba(0, 0, 0, 0.25);

        z-index: 900;
    }

}


@media (max-width: 480px) {

    .welcome-section h1,
    .page-introduction h1 {
        font-size: 23px;
    }

}

/* ============================================================
   REGION SELECTOR
   ============================================================ */

.region-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.region-selector label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.region-selector select {
    width: 100%;
    padding: 12px;
    border: 1px solid #d9dee7;
    border-radius: 8px;
    background: white;
    font-size: 14px;
}

.region-selector select:disabled {
    background: #f1f3f5;
    cursor: not-allowed;
}

#riskMap {
    min-height: 450px;
    border-radius: 10px;
    background: #eef2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #68707a;
}


@media (max-width: 768px) {

    .region-selector {
        grid-template-columns: 1fr;
    }

}
/* ============================================================
   PETA SIAGA LONGSOR
   ============================================================ */

#riskMap {
    width: 100%;
    height: 600px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #d9dee7;
    margin-top: 15px;
}

#mapStatus {
    margin-bottom: 10px;
    color: #68707a;
    font-size: 14px;
}


/* ============================================================
   LEGENDA PETA
   ============================================================ */

.map-legend {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.legend-box {
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 4px;
    border: 1px solid #999;
}

.legend-default {
    background: #ffffff;
}

.legend-selected {
    background: #ff9800;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {

    #riskMap {
        height: 450px;
    }

    .map-legend {
        flex-direction: column;
        gap: 10px;
    }

}

/* ============================================================
   PETA DAN DATA CURAH HUJAN
   ============================================================ */

.content-card {
    margin-bottom: 18px;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.content-card h2,
.content-card h3 {
    margin-bottom: 8px;
}

.content-card > p {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.6;
}

.weather-message {
    margin-top: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.weather-village-name {
    margin-top: 18px;
    margin-bottom: 14px;
    font-size: 16px;
}

.data-section-title {
    margin-top: 18px;
    margin-bottom: 4px;
    color: var(--text-main);
    font-size: 14px;
}

.environmental-warning,
.environmental-note {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.6;
}

.environmental-warning {
    padding: 10px 12px;
    color: #7a4b00;
    background: #fff5d8;
    border-radius: 8px;
}

.environmental-note {
    color: var(--text-secondary);
}

.weather-metrics {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.weather-metrics > div {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.weather-metrics dt {
    color: var(--text-secondary);
    font-size: 12px;
}

.weather-metrics dd {
    margin-top: 3px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 650;
}

.map-weather-popup {
    min-width: 190px;
    line-height: 1.5;
}

.map-weather-popup > div {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 12px;
}

.map-weather-popup p {
    margin-top: 8px;
    font-size: 12px;
}

.map-weather-popup small {
    color: var(--text-secondary);
}

#lookupVillageButton:disabled {
    cursor: wait;
    opacity: 0.65;
}


/* ============================================================
   LOKASI PENGGUNA (BERANDA)
   ============================================================ */

.location-card {
    margin-top: 20px;
}

/* h2 agar urutan judul beranda tidak melompat; ukurannya tetap seperti judul kartu lain. */
.location-card > h2 {
    margin-top: 4px;
    font-size: 1.17em;
}

.location-card > p {
    max-width: 720px;
}

.location-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.location-actions .primary-button,
.location-links .primary-button {
    width: auto;
}

.location-card .primary-button,
.location-card .secondary-button {
    min-height: 44px;
    padding-left: 20px;
    padding-right: 20px;
}

.location-card a.primary-button,
.location-card a.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.location-card .secondary-button {
    padding-top: 12px;
    padding-bottom: 12px;
    border: 1px solid var(--primary);
    border-radius: 7px;
    background: var(--surface);
    color: var(--primary);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.2s ease;
}

.location-card .secondary-button:hover {
    background: var(--primary-light);
}

.location-card .primary-button:disabled {
    opacity: 0.6;
    cursor: progress;
}

.location-card .primary-button:focus-visible,
.location-card .secondary-button:focus-visible,
.location-card select:focus-visible {
    outline: 2px solid var(--primary-dark);
    outline-offset: 2px;
}

.location-status {
    min-height: 1.6em;
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.6;
}

.content-card > .location-status[data-kind="error"] {
    padding: 10px 12px;
    color: #7a4b00;
    background: #fff5d8;
    border-radius: 8px;
}

/* display: grid pada .region-selector mengalahkan atribut hidden bawaan peramban. */
.region-selector[hidden] {
    display: none;
}

.location-result {
    margin-top: 16px;
}

.location-result:empty {
    display: none;
}

.location-result-body {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--primary-light);
}

.location-result-body .weather-village-name {
    margin-top: 6px;
    margin-bottom: 4px;
}

.location-area {
    color: var(--text-secondary);
    font-size: 12px;
}

.location-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.location-result-body .risk-panel:empty {
    display: none;
}

.location-result-body .data-section-title {
    margin-top: 16px;
}

.location-result-body .quality-list {
    margin: 8px 0 0 18px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.6;
}

@media (max-width: 480px) {

    .location-actions > *,
    .location-links > * {
        flex: 1 1 100%;
    }

}


/* ============================================================
   HALAMAN OPERATOR
   ============================================================ */

.ops-section {
    margin-top: 28px;
}

.ops-section h2 {
    margin-bottom: 12px;
    font-size: 18px;
    color: var(--text-main);
}

.ops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.ops-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.ops-card h3 {
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--text-main);
}

.ops-card p + p {
    margin-top: 6px;
}

.ops-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-dark);
}

.ops-missing {
    color: var(--text-muted);
    font-style: italic;
}

.ops-warning {
    color: var(--danger);
}

.ops-note {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.ops-code {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

.ops-banner {
    margin: 0 0 14px;
    font-size: 13px;
}

.ops-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
}

.ops-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.ops-form input {
    min-width: 0;
    width: 160px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
}

.ops-result {
    margin-bottom: 16px;
}

.info-table-wrap {
    overflow-x: auto;
    margin-top: 12px;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 13px;
}

.info-table caption {
    padding: 8px 0;
    text-align: left;
    font-weight: 600;
    color: var(--text-main);
}

.info-table th,
.info-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.info-table thead th {
    font-size: 12px;
    color: var(--text-secondary);
}

.gate-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--primary-light);
    color: var(--primary-dark);
}

.gate-badge-gagal {
    background: #fbeceb;
    color: #8f2f29;
}

.gate-badge-tidak_dapat_diuji,
.gate-badge-belum_dikerjakan {
    background: #f3f1ea;
    color: #5f5641;
}


/* ============================================================
   HALAMAN TENTANG
   ============================================================ */

.about-section {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.about-section h2 {
    margin-bottom: 10px;
    font-size: 18px;
    color: var(--text-main);
}

.about-section ul {
    margin-left: 18px;
}

.about-section li + li {
    margin-top: 6px;
}

.about-section p + p,
.about-section p + .info-table-wrap {
    margin-top: 10px;
}

.about-sources dt {
    margin-top: 12px;
    font-weight: 700;
    color: var(--text-main);
}

.about-sources dd {
    margin-left: 0;
}

.about-status {
    padding: 10px 12px;
    border-left: 3px solid var(--warning);
    border-radius: 6px;
    background: #fdf6e8;
    color: var(--text-main);
}

.about-subtitle {
    margin-top: 18px;
    font-size: 15px;
    color: var(--text-main);
}

.about-note {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted);
}


/* Indeks percobaan di kartu beranda (hanya bila model lulus gerbang) */

.environmental-note.risk-index {
    padding-left: 10px;
    border-left: 3px solid var(--warning);
    font-weight: 600;
    color: var(--text-main);
}

.environmental-note.risk-index[data-kelas="tinggi"] {
    border-left-color: var(--danger);
}

.environmental-note.risk-index[data-kelas="rendah"] {
    border-left-color: var(--success);
}


/* Peringatan dini dan prakiraan BMKG di kartu desa */

.bmkg-panel:empty {
    display: none;
}

.bmkg-panel {
    margin-top: 12px;
}

.bmkg-alert {
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid #f0c9c5;
    border-left: 4px solid var(--danger);
    border-radius: 8px;
    background: #fdf1f0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-main);
}

.bmkg-alert p {
    margin-top: 2px;
    color: var(--text-secondary);
}

.bmkg-alert a,
.bmkg-source {
    font-size: 12px;
}

.bmkg-source {
    display: inline-block;
    margin-top: 4px;
    color: var(--text-muted);
}


/* Kelas kerawanan InaRISK di kartu desa (statis, bukan prediksi) */

.hazard-note:empty {
    display: none;
}

.hazard-note {
    margin-top: 8px;
    padding: 8px 12px;
    border-left: 4px solid var(--warning);
    border-radius: 6px;
    background: #fdf6e8;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-main);
}

.hazard-note[data-kelas="tinggi"] {
    border-left-color: var(--danger);
    background: #fdf1f0;
}

.hazard-note[data-kelas="rendah"] {
    border-left-color: var(--success);
    background: var(--primary-light);
}


/* Peta desa di beranda: desa terpilih dan desa yang berbatasan, prakiraan bulanan PVMBG */

.village-map-panel:empty {
    display: none;
}

.village-map-card {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.village-map-title {
    margin-bottom: 10px;
    font-size: 16px;
    color: var(--text-main);
}

.village-map {
    height: 340px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* Lebih spesifik dari .leaflet-tooltip (CSS Leaflet dimuat belakangan). */
.leaflet-tooltip.village-map-label {
    padding: 0 3px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 3px;
    box-shadow: none;
}

.leaflet-tooltip.village-map-label::before {
    display: none;
}

.village-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--text-secondary);
}

.village-map-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.village-map-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.village-map-swatch.kelas-tinggi { background: var(--danger); }
.village-map-swatch.kelas-menengah { background: var(--warning); }
.village-map-swatch.kelas-rendah { background: var(--success); }
.village-map-swatch.kelas-tanpa-data { background: #9aa5a0; }

.village-map-text {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-main);
}

.village-map-subtitle {
    margin-top: 14px;
    font-size: 14px;
    color: var(--text-main);
}

.village-map-list {
    margin: 6px 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-main);
}