/* ==========================================
   TRANS SIKOP - GLOBAL & THEME STYLESHEET
   Palet: #0f2a22 (Agrarian Dark), #f3f6f2 (Light)
   Tipografi: Fraunces & Plus Jakarta Sans
   ========================================== */

/* 1. Pengaturan Font Utama */
.font-display { 
    font-family: 'Fraunces', Georgia, serif; 
    font-optical-sizing: auto; 
}
.font-body { 
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif; 
}

/* 2. Navigasi Pintar & Responsif */
#nav { 
    transition: background-color .35s ease, border-color .35s ease, color .35s ease; 
}
#nav .n-link { color: rgba(255,255,255,.85); }
#nav .n-link:hover, #nav .n-link[aria-current="page"] { color: #fff; }
#nav .n-btn { background: #fff; color: #0f2a22; }
#nav .n-btn:hover { background: #dcebdc; }
#nav .n-logo { color: #fff; }
#nav .n-sub { color: rgba(255,255,255,.7); }
#nav .n-mark { background: rgba(255,255,255,.15); color: #fff; }

#nav.solid { 
    background: rgba(243,246,242,.88); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    border-bottom: 1px solid rgba(15,42,34,.08); 
}
#nav.solid .n-link { color: #4b5d55; }
#nav.solid .n-link:hover, #nav.solid .n-link[aria-current="page"] { color: #0f2a22; }
#nav.solid .n-btn { background: #0f2a22; color: #fff; }
#nav.solid .n-btn:hover { background: #1d4a3b; }
#nav.solid .n-logo { color: #0f2a22; }
#nav.solid .n-sub { color: #4b5d55; }
#nav.solid .n-mark { background: #0f2a22; color: #fff; }

#nav .n-link[aria-current="page"] span.gar { transform: scaleX(1); }

/* 3. Slider & Efek Latar Berganti (Crossfade + Zoom) */
.slide { 
    opacity: 0; 
    transition: opacity 1.8s ease-in-out; 
}
.slide.aktif { 
    opacity: 1; 
}
.slide img { 
    transform: scale(1.02); 
}
.slide.aktif img { 
    animation: zoom 14s ease-out forwards; 
}
@keyframes zoom { 
    to { transform: scale(1.12); } 
}

/* Indikator Slider Bergaris */
.bar > i { 
    display: block; 
    height: 100%; 
    width: 0; 
    background: #fff; 
}
.bar.aktif > i { 
    animation: isi 6s linear forwards; 
}
@keyframes isi { 
    to { width: 100%; } 
}

/* 4. Tekstur Kontur Peta & Zoom Pelan */
.kontur {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400' fill='none' stroke='%230f2a22' stroke-opacity='0.07' stroke-width='1.2'%3E%3Cpath d='M-20 80 C 100 20, 200 140, 320 80 S 520 20, 640 90'/%3E%3Cpath d='M-20 120 C 100 60, 200 180, 320 120 S 520 60, 640 130'/%3E%3Cpath d='M-20 160 C 100 100, 200 220, 320 160 S 520 100, 640 170'/%3E%3Cpath d='M-20 240 C 120 190, 220 300, 340 240 S 520 200, 640 260'/%3E%3Cpath d='M-20 280 C 120 230, 220 340, 340 280 S 520 240, 640 300'/%3E%3Cpath d='M-20 320 C 120 270, 220 380, 340 320 S 520 280, 640 340'/%3E%3C/svg%3E");
    background-size: 600px 400px;
}
.zoom-pelan { 
    animation: zoomPelan 20s ease-out forwards; 
}
@keyframes zoomPelan { 
    from { transform: scale(1.02); } 
    to { transform: scale(1.1); } 
}

/* 5. Elemen Formulir Interaktif (.kolom) */
.kolom {
    width: 100%; 
    border-radius: .75rem; 
    border: 1px solid rgba(15,42,34,.2);
    background: #fff; 
    padding: .85rem 1rem; 
    font-size: .95rem; 
    color: #0f2a22;
    transition: border-color .2s, box-shadow .2s;
}
.kolom::placeholder { 
    color: #8a9a92; 
}
.kolom:focus { 
    outline: none; 
    border-color: #2f6b52; 
    box-shadow: 0 0 0 3px rgba(47,107,82,.2); 
}

/* 6. Penyesuaian Komponen Peta Leaflet */
.leaflet-container { 
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif; 
}
.leaflet-bar { 
    border: none !important; 
    border-radius: 14px !important; 
    overflow: hidden; 
    box-shadow: 0 4px 18px rgba(15,42,34,.18) !important; 
}
.leaflet-bar a { 
    background: rgba(255,255,255,.95); 
    color: #0f2a22; 
    border-bottom: 1px solid rgba(15,42,34,.1); 
}
.leaflet-bar a:hover { 
    background: #dcebdc; 
    color: #0f2a22; 
}
.leaflet-popup-content-wrapper { 
    border-radius: 14px; 
    box-shadow: 0 8px 28px rgba(15,42,34,.22); 
    color: #0f2a22; 
}
.leaflet-popup-content { 
    font-size: 13px; 
    line-height: 1.5; 
}
.leaflet-control-attribution { 
    background: rgba(255,255,255,.75) !important; 
    font-size: 10px; 
}

/* 7. Aksesibilitas Gerakan */
@media (prefers-reduced-motion: reduce) {
    .slide, .slide.aktif img, .bar.aktif > i, .zoom-pelan { 
        animation: none; 
        transition: none; 
    }
    .bar.aktif > i { width: 100%; }
}