/*
 * Namespace: semua style modul Peta Implementasi di-scope ke .peta-page
 * supaya tidak bocor ke halaman lain di web onesia (halaman lain memakai
 * Bootstrap + style.css global yang tidak boleh ketiban aturan di sini).
 */
.peta-page {
    /* Onesia brand palette: putih + merah + abu */
    --color-bg: #ffffff;
    --color-bg-alt: #f5f5f7;
    --color-surface: #ffffff;
    --color-border: #e2e2e6;

    --color-text: #1c1c1e;
    --color-text-muted: #6b6b72;
    --color-text-faint: #9a9aa2;

    --color-red: #d0021b;
    --color-red-dark: #a10115;
    --color-red-light: #fdeaec;

    --color-gray-100: #f5f5f7;
    --color-gray-200: #e2e2e6;
    --color-gray-300: #c7c7cf;
    --color-gray-600: #6b6b72;
    --color-gray-900: #1c1c1e;

    --color-success: #1b8a4a;
    --color-success-bg: #e6f5ec;
    --color-warning: #a3670a;
    --color-warning-bg: #fbf0dc;

    background: var(--color-bg);
    color: var(--color-text);
    font-family: Verdana, Arial, sans-serif;
}

.peta-page, .peta-page *, .peta-page *::before, .peta-page *::after {
    box-sizing: border-box;
}

/* Layer 1+2 (peta + counter): section hero besar di bagian atas modul.
   Bukan literal 100vh seperti versi standalone (test.test) -- di sini modul
   ini dibungkus header/footer tema utama onesia, jadi tinggi disesuaikan
   supaya tetap terasa seperti "hero" tanpa memotong header/footer. */
.peta-page .hero-viewport {
    min-height: 82vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.peta-page img,
.peta-page svg {
    max-width: 100%;
}