/* ================================================= */
/* GLOBAL FONT IMPORT */
/* ================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Lato:wght@400;700&display=swap');

/* ================================================= */
/* VARIABEL CSS */
/* ================================================= */
:root {
    --custom-brown: #967969; 
    --highlight-color: #ffc107; 
    --main-font: 'Poppins', sans-serif;
    --secondary-font: 'Lato', sans-serif; /* KRITIS: Diganti ke LATO */
}

/* ================================================= */
/* GLOBAL STYLING & FOOTER */
/* ================================================= */
body {
    font-family: var(--secondary-font); 
    color: #333;
}

/* Kelas untuk Footer */
.bg-custom-brown {
    background-color: var(--custom-brown) !important;
    /* Tambahkan warna teks putih untuk footer */
    color: white !important;
}

/* ================================================= */
/* NAVBAR: TRANSPARAN & INTERAKTIF */
/* ================================================= */
#main-header {
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* Teks dan Logo (di mode transparan) */
#main-header .navbar-brand {
    color: white !important; /* Biarkan teks logo putih/terang */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); 
}

/* Tambahkan jarak antar menu */
#main-header .nav-item-custom {
    margin-left: 10px;
}

/* Efek Balok di Bawah Menu (Interaktif) */
#main-header .nav-link {
    font-family: var(--secondary-font);
    font-weight: 600;
    
    /* KRITIS: Warna teks default diubah menjadi cokelat tua untuk kontras */
    color: var(--custom-brown) !important; 
    
    text-shadow: none; /* Hapus shadow yang tidak perlu */
    padding: 8px 15px; 
    border-radius: 5px; 
    position: static; 
}

/* Balok (Pseudo-element ::after) */
#main-header .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    background: var(--highlight-color);
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    transition: width 0.3s ease-out;
}

/* Efek Hover dan Active */
#main-header .nav-link:hover {
    /* Saat di-hover: Gunakan warna highlight kuning */
    color: var(--highlight-color) !important; 
    background-color: transparent !important; /* Pastikan background transparan saat hover */
}
#main-header .nav-link.active {
    /* Teks aktif harus kuning */
    color: var(--highlight-color) !important;
    
    /* Hapus background solid yang konflik */
    background-color: transparent !important; 
    
    /* Tambahkan garis bawah kuning sebagai penanda aktif */
    border-bottom: 3px solid var(--highlight-color);
    padding-bottom: 5px;
}

#main-header .nav-link:hover::after,
#main-header .nav-link.active::after {
    width: 80%;
}

#features .card {
    /* Tambahkan transition pada shadow agar lebih elegan */
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 12px; /* Sudut lebih lembut */
    border: none !important;
    
    /* Tambahkan border gradien yang menonjol */
    border-top: 5px solid transparent !important; 
    border-image: linear-gradient(to right, var(--custom-brown), var(--highlight-color)) 1;
    
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

#features .card:hover {
    transform: translateY(-8px); /* Gerakan lebih dramatis */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); 
}


.scrolled-nav .navbar-brand {
    text-shadow: none; /* Hilangkan bayangan di mode solid */
}

.scrolled-nav {
    /* Gunakan background transparan (misal 85%) */
    background-color: rgba(150, 121, 105, 0.85) !important; /* Warna Cokelat Transparan */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    
    /* KRITIS: Efek Glassmorphism (Buram) */
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
}

.scrolled-nav .nav-link {
    text-shadow: none; /* Hilangkan shadow teks di background buram */
}

/* ================================================= */
/* HERO SECTION */
/* ================================================= */
#hero {
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
}

/* Teks Hero Section - Menggunakan Font yang Sama dengan Branding */
#hero h1, #hero h2, #hero p {
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-family: var(--main-font);
}


/* ================================================= */
/* FITUR & VISI MISI CARDS */
/* ================================================= */
.card i.fa-4x {
    color: var(--custom-brown);
}

.card h5.fw-bold, .card h3.fw-bold {
    font-family: var(--main-font);
}

.visimisi-list {
    list-style: none;
    padding-left: 0;
    text-align: left; /* Pastikan list rata kiri */
    font-family: var(--secondary-font);
}

.visimisi-list li {
    display: flex; /* KRITIS: Aktifkan Flexbox */
    align-items: flex-start; /* Sejajarkan ke atas */
    margin-bottom: 10px; /* Jarak antar poin */
    font-size: 0.95rem;
}

.visimisi-list li i {
    flex-shrink: 0; /* Memastikan ikon tidak menyusut */
    margin-right: 10px; 
    padding-top: 4px; /* Geser ikon sedikit ke bawah agar rata dengan teks */
    color: var(--custom-brown); /* Gunakan warna branding */
}

/* ================================================= */
/* SAMBUTAN LURAH STYLING */
/* ================================================= */

/* Styling untuk Foto Lurah (Membuat Lingkaran) */
.sambutan-foto {
    width: 350px; /* Lebar tetap */
    height: 350px; /* Tinggi tetap */
    border-radius: 50%; /* Membuat gambar menjadi lingkaran */
    overflow: hidden; /* Menyembunyikan bagian gambar di luar lingkaran */
    border: 8px solid white; /* Border putih tipis agar menonjol */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.sambutan-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memastikan gambar mengisi area tanpa terdistorsi */
    display: block;
}

/* Warna Judul Sambutan (Menggunakan Hijau Tua untuk kontras yang elegan) */
.sambutan-title {
    color: #967969; /* Hijau Tua/Success dari Bootstrap */
    font-size: 2.5rem;
}

/* Penyesuaian responsif untuk perangkat kecil */
@media (max-width: 768px) {
    .sambutan-foto {
        width: 250px; 
        height: 250px; 
        margin-bottom: 25px; /* Jarak antara foto dan teks di mobile */
    }
    .sambutan-title {
        text-align: center;
        margin-top: 15px;
    }
    .col-md-7 h4, .col-md-7 p {
        text-align: center;
    }
}

/* ================================================= */
/* SAMBUTAN LURAH SCROLL STYLING */
/* ================================================= */
.sambutan-konten-scroll {
    max-height: 350px; /* Atur tinggi maksimum Div konten */
    overflow-y: scroll; /* Mengaktifkan scroll vertikal jika konten melebihi max-height */
    padding-right: 15px; /* Memberi ruang agar scrollbar tidak menempel pada teks */
    
    /* Gaya untuk Scrollbar (Opsional, khusus untuk Chrome/Edge/Safari) */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--custom-brown) transparent; /* Firefox */
}

/* Gaya Scrollbar untuk Webkit (Chrome, Safari, Edge) */
.sambutan-konten-scroll::-webkit-scrollbar {
    width: 6px;
}

.sambutan-konten-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.sambutan-konten-scroll::-webkit-scrollbar-thumb {
    background: var(--custom-brown); /* Warna cokelat yang sesuai */
    border-radius: 10px;
}

.pt-fix {
    /* Nilai padding-top yang tegas */
    padding-top: 100px !important; 
}

/* Penyesuaian agar tidak terjadi tumpang tindih di layar kecil */
@media (max-width: 991px) {
    .pt-fix {
        padding-top: 80px !important; 
    }
}

/* ================================================= */
/* PETA KELURAHAN STYLING */
/* ================================================= */
/* File: css/style.css */

/* ================================================= */
/* PETA KELURAHAN (PORTRAIT & BORDER STYLING) */
/* ================================================= */

.peta-border-container {
    /* Mengatur aspek rasio 4:5 (mendekati portrait) */
    position: relative;
    width: 100%;
    padding-top: 125%; /* 4:5 aspect ratio (5/4 * 100% = 125%) */
    overflow: hidden;
    border: 3px solid var(--custom-brown); /* Border tebal cokelat */
    border-radius: 5px;
}

.peta-kinali-img {
    /* Memastikan gambar mengisi container Aspect Ratio */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Penting: Memastikan seluruh peta terlihat */
    cursor: zoom-in;
}

/* Gaya untuk Keterangan Legenda */
#peta h2 {
    color: var(--custom-brown) !important;
}

#peta h5 {
    font-size: 1.1rem;
}


/* --- PERBAIKAN CARD UTAMA --- */
.sotk-card {
    /* KRITIS: Tambahkan Border Radius untuk sudut halus */
    border-radius: 10px; 
    overflow: hidden; 
    
    /* KRITIS: Tambahkan Box Shadow yang elegan */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); 
    
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border: 1px solid #e0e0e0; /* Border sangat tipis agar terlihat lebih tegas */
    
    /* Memastikan semua card sama tingginya */
    display: flex;
    flex-direction: column;
    height: 100% !important; 
}

.sotk-card:hover {
    transform: translateY(-5px); /* Efek melayang */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3); /* Shadow lebih menonjol saat hover */
}

/* --- TAMPILAN FOTO --- */
.sotk-foto-container {
    width: 100%;
    height: 250px !important; 
    overflow: hidden;
    position: relative; 
    background-color: #f0f0f0; 
    flex-shrink: 0; 
}

.sotk-img-fluid {
    width: 100%;
    height: 100% !important; 
    object-fit: cover !important; 
    display: block;
    transition: all 0.5s ease;
}

.sotk-card:hover .sotk-img-fluid {
    filter: none !important; /* Kembalikan warna asli saat hover */
}

/* --- TAMPILAN TEKS CARD (Warna Cokelat Navbar) --- */
.sotk-text-container {
    background-color: var(--custom-brown) !important; 
    color: white !important; 
    
    min-height: 75px; 
    padding: 10px 10px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1; 
}

/* ... (Gaya teks lainnya) ... */
.bagan-container-limit {
    /* KRITIS: Batas maksimum untuk layout (hanya berlaku di desktop besar) */
    max-width: 1000px; 
    margin: 0 auto; /* Pusatkan di tengah */
}

.bagan-scroll-wrapper {
    /* Memungkinkan scroll horizontal jika gambar terlalu besar */
    overflow-x: auto; 
    overflow-y: hidden; 
    padding-bottom: 10px; 
}

.sejarah-overlay {
    /* Overlay dimatikan di index.php karena kita pakai background solid */
    display: none; 
}

#sejarah .container {
    z-index: 3;
}

#sejarah {
    position: relative;
    background-color: var(--custom-brown) !important; 
    min-height: 50vh; 
    
    /* KRITIS: Tambahkan padding atas yang lebih besar untuk mendorong konten ke bawah */
    padding-top: 60px !important; 
    padding-bottom: 50px !important;
}

#sejarah h2 {
    color: white !important; 
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
    
    /* KRITIS: Tambahkan margin-bottom yang sangat besar untuk memisahkan judul dari garis */
    margin-bottom: 60px !important; 
    border-bottom: none !important; 
}

.sejarah-card-item {
    border-radius: 10px; 
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
    
    /* KRITIS: Tambahkan padding atas yang cukup untuk menampung badge di DALAM card */
    padding: 20px !important;
    
    /* Mengatur posisi relatif agar badge dapat di-positioning jika diperlukan */
    position: relative; 
    
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sejarah-card-item h5 {
    font-family: var(--main-font); 
    font-weight: 700; 
    font-size: 1.1rem;
    color: white !important;
    
    /* KRITIS: Flexbox untuk menata elemen secara vertikal */
    display: flex;
    flex-direction: column; 
    
    /* UBAH INI: Rata tengah horizontal */
    align-items: left; 
    
    /* Tinggi minimum untuk seragam */
    min-height: 70px; 
    
    /* Garis pemisah tegas dan margin */
    padding-bottom: 8px;
    margin-bottom: 15px !important; 
    padding-left: 0;
    padding-right: 0;
}

.sejarah-card-item h5 > span:first-child { 
    /* Pastikan tahun rata tengah */
    align-self: left;
}

/* Gaya Subjudul (Wadah Kuning) */
.sejarah-card-item .badge {
    /* Atur badge sebagai posisi absolut agar dapat meluber ke luar secara vertikal */
    position: absolute;
    top: -15px; /* Angkat sedikit di atas card (opsional) */
    left: 20px;
    
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    
    /* Hapus class bg-warning/text-dark bawaan dari Bootstrap jika Anda ingin style sendiri */
}

.sejarah-card-item p {
    font-family: var(--secondary-font); 
    font-size: 0.95rem;
    
    /* Rata Kiri Penuh */
    text-align: justify !important; 
    /* KRITIS: Naikkan Line-Height untuk kenyamanan membaca */
    line-height: 1.8; 
    color: white !important;
    
    /* Hapus margin atas yang terlalu rapat */
    margin-top: 10px !important;
    padding: 30px 20px 20px 20px !important;
    position: static;
}

.sejarah-card-item h5 .badge {
    /* Set display block agar berada di baris sendiri */
    display: block !important; 
    
    /* KRITIS: Gunakan margin-top untuk memisahkan dari Judul Tahun yang sekarang di tengah */
    margin-top: 8px !important; 
    margin-bottom: 0 !important; 
    
    /* Teks Badge: Pastikan Rata Tengah */
    text-align: left !important;
    white-space: normal !important; 
    width: auto; /* Biarkan lebar menyesuaikan teks */

    /* Gaya visual badge */
    padding: 4px 8px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 4px;
}


.sejarah-card-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
}

/* Kontainer Utama Navigasi */
.timeline-navigation {
    position: relative;
    padding-top: 30px;
}

.timeline-navigation::before {
    /* Posisikan garis lebih rendah, di bawah judul dan subjudul */
    top: 100px !important; 
    height: 4px !important; 
    background-color: white !important; 
    z-index: 10 !important; 
}

/* Styling Titik Tahun (Dot) */
.timeline-dot {
    /* Posisikan dot di tengah garis baru */
    top: 80px !important; 
    z-index: 11 !important; 
    /* ... (Style dimensi dan border lainnya) ... */
}

/* Teks Tahun di Bawah Titik */
.timeline-year {
    /* Posisikan teks tahun di bawah dot baru */
    top: 125px !important; 
    /* ... (Gaya teks lainnya) ... */
    z-index: 12 !important;
}

/* Efek Titik Aktif */
.timeline-dot.active, .timeline-dot:hover {
    background-color: var(--highlight-color) !important; /* Kuning saat aktif */
    transform: scale(1.2);
    border-color: white !important;
}

/* Gaya Detail Konten (Card) */
.tab-content .card {
    /* Wajib: Warna COKELAT SOLID */
    background-color: var(--custom-brown) !important; 
    color: white !important;
    border-top: 4px solid var(--highlight-color) !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
}

.tab-content .card h4 {
    color: var(--highlight-color) !important; /* Judul kuning */
    text-shadow: none;
    font-weight: 700;
}

#galeri h2 {
    color: var(--custom-brown) !important;
    font-family: var(--main-font);
}

.galeri-item {
    position: relative;
    overflow: hidden;
    height: 250px; /* Tinggi seragam untuk setiap kotak galeri */
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.galeri-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.galeri-item:hover img {
    transform: scale(1.05); /* Efek zoom saat hover */
}

/* Teks Overlay (Jika Anda ingin menampilkan judul di atas foto saat hover) */
.overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(150, 121, 105, 0.8); /* Cokelat transparan */
    color: white;
    padding: 8px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s;
}
.galeri-item:hover .overlay-text {
    opacity: 1;
}

.berita-card {
    /* Pastikan card adalah flex container */
    display: flex;
    flex-direction: column;
    height: 100%; /* Penting untuk konsistensi tinggi card */
    border-radius: 8px;
    overflow: hidden;
}

/* KRITIS: Wrapper Gambar (Memaksa Tinggi Gambar) */
.berita-img-wrapper {
    position: relative;
    /* Atur tinggi tetap untuk semua gambar, misalnya 200px */
    height: 200px !important; 
    overflow: hidden;
    flex-shrink: 0; /* Agar tidak menyusut saat konten lain panjang */
}

.berita-img-wrapper img {
    /* Memastikan gambar mengisi container secara penuh */
    width: 100%;
    height: 100%;
    object-fit: cover; /* KRITIS: Memotong gambar agar sesuai dimensi 200px */
    transition: transform 0.3s ease;
}