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

/* Umum */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff;
    color: #1e1e2f;
    padding-top: 60px; /* agar konten tidak tertutup navbar - DIPERKECIL */
    font-weight: bold; /* Menambahkan font-weight default untuk body */
}

/* Navbar */
.navbar {
    background-color: #1e1e2f;
    display: flex;
    /* Ubah ini untuk memastikan logo di kiri dan item lain di kanan */
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px; /* DIPERKECIL */
    color: white;
    position: fixed; /* Ini agar navbar ikut scroll */
    top: 0;
    left: 0;
    width: 100%; /* Tambahkan agar lebarnya penuh */
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    height: 40px; /* DIPERKECIL */
    margin-right: 10px; /* DIPERKECIL */
}

.site-title {
    font-size: 18px; /* DIPERKECIL */
    font-weight: bold; /* Sudah tebal */
    color: #ffffff;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 15px; /* DIPERKECIL */
}

.nav-links li {
    position: relative;
}

.nav-links a {
    color: #ffffff;
    text-decoration: none;
    padding: 6px 10px; /* DIPERKECIL */
    transition: background 0.3s ease, color 0.3s ease;
    border-radius: 6px;
    font-weight: bold; /* Dipertebal */
    font-size: 15px; /* DIPERKECIL */
}

.nav-links a:hover {
    background-color: #2c2c44;
    color: #ffd700; /* Emas */
}

/* Dropdown Styling */
.dropdown {
    position: relative;

}

.dropdown-menu {
    display: none; /* Sembunyikan secara default */
    position: absolute;
    background-color: #1e1e2f; /* Warna latar belakang sama dengan navbar */
    top: 120%;
    left: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 180px; /* Lebar minimum dropdown */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1000;
    border-radius: 0 0 6px 6px; /* Sudut membulat di bagian bawah saja */
    overflow: hidden; /* Penting untuk radius dan transisi */
}

.dropdown-menu li a {
    color: white;
    padding: 12px 15px;
    text-decoration: none;
    display: block;
    text-align: left; /* Teks rata kiri di dropdown */
    font-weight: bold; /* Dipertebal */
    transition: background-color 0.3s ease;
}

.dropdown-menu li a:hover {
    background-color: #2c2c44; /* Warna hover yang konsisten */
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-menu {
    display: block; /* Tampilkan saat hover */
}

/* Icon panah dropdown */
.dropdown .fas.fa-caret-down {
    margin-left: 8px; /* Jarak antara teks dan ikon */
    transition: transform 0.3s ease;
}

/* Rotate caret on hover (optional) */
.dropdown:hover .fas.fa-caret-down {
    transform: rotate(180deg);
}


/* Tombol Hamburger */
.menu-toggle {
    display: none; /* Sembunyikan secara default di desktop */
    font-size: 28px;
    background: none;
    border: none;
    color: white; /* Sesuaikan warna tombol hamburger */
    cursor: pointer;
    font-weight: bold;
}

/* ========================================================== */
/* RESPONSIVE STYLES (NAVBAR ONLY) */
/* ========================================================== */
@media (max-width: 768px) {
    /* Tampilkan tombol hamburger */
    .menu-toggle {
        display: block;
        /* Tambahkan margin-left auto untuk mendorong ke kanan */
        margin-left: auto;
    }

    /* Sembunyikan nav-links secara default */
    .nav-links {
        display: none; /* Kunci: Sembunyikan ul secara default */
        flex-direction: column;
        background-color: #1e1e2f;
        position: absolute;
        top: 60px; /* DIPERKECIL - Sesuaikan dengan tinggi navbar */
        left: 0;
        width: 100%;
        padding: 20px 0;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    }

    /* Tampilkan nav-links saat class 'active' ditambahkan oleh JS */
    .nav-links.active {
        display: flex; /* Kunci: Tampilkan saat aktif */
    }

    .nav-links li {
        text-align: center;
        width: 100%;
        margin-bottom: 10px; /* Jarak antar item di menu mobile */
    }

    .nav-links li:last-child {
        margin-bottom: 0;
    }

    .nav-links a {
        padding: 12px 0; /* Padding vertikal lebih besar untuk area klik */
        display: block; /* Pastikan link mengisi lebar penuh */
    }

    /* Responsive adjustments for dropdown in mobile */
    .dropdown .dropdown-menu {
        position: static; /* Hilangkan posisi absolut di mobile */
        background-color: #1e1e2f; /* Pastikan warna tetap sama */
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        display: none; /* Disembunyikan secara default, akan dibuka oleh JS */
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Saat dropdown parent memiliki class 'open' (dari JS) */
    .dropdown.open .dropdown-menu {
        display: block;
    }

    /* Sembunyikan ikon Font Awesome di mobile jika ingin pakai karakter '▼' */
    .dropdown > a .fas.fa-caret-down {
        display: none;
    }
    .dropdown > a::after {
        content: ' ▼'; /* Tambahkan karakter panah sebagai fallback/ganti */
        margin-left: 5px;
        font-weight: bold;
    }

    /* Rotasi panah untuk dropdown mobile saat dibuka */
    .dropdown.open > a::after {
        transform: rotate(180deg);
        display: inline-block; /* Pastikan panah tetap terlihat */
    }
}

/* index css */
        /* Umum dan Reset */

        /* Welcome Section - DIUBAH UNTUK POSISI TEKS DI ATAS */
        .welcome-section {
            height: 690px;
            padding: 10px 20px 20px;
            display: flex;
            flex-direction: column; /* Mengubah ini untuk konten dari atas ke bawah */
            justify-content: flex-start; /* Memposisikan konten di bagian atas */
            align-items: center;
            background-image: url('img/bgindex.jpeg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            overflow: hidden;
            text-align: center;
            margin-top: 0;
            transition: background-image 1s ease-in-out;
        }

        .welcome-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.55);
            z-index: 0;
        }

        .welcome-container {
            background-color: transparent;
            padding: 50px 20px 20px; /* Padding atas lebih besar untuk mendorong teks ke bawah */
            text-align: center;
            max-width: 900px;
            width: 100%;
            position: relative;
            z-index: 1;
        }

        .welcome-container h1 {
            color: #ffffff;
            font-size: 68px;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
            margin-bottom: 20px;
            font-weight: 800;
            letter-spacing: 1.5px;
            opacity: 1;
            transition: opacity 0.5s ease-in-out;
        }

        .welcome-container p {
            font-size: 24px;
            color: #e0e0e0;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
            line-height: 1.6;
            opacity: 1;
            transition: opacity 0.5s ease-in-out;
        }

        @media (max-width: 768px) {
            .welcome-section {
                height: 700px;
                padding-top: 0px; /* Menyesuaikan padding-top untuk mobile */
                justify-content: flex-start; /* Tetap di atas */
            }

            .welcome-container {
                padding-top: 30px; /* Mengurangi padding atas untuk mobile */
            }

            .welcome-container h1 {
                font-size: 48px;
                margin-top: 0;
            }

            .welcome-container p {
                font-size: 18px;
            }
        }

        @media (max-width: 480px) {
            .welcome-section {
                 height: 700px;
                padding-top: 60px;
            }

            .welcome-container h1 {
                font-size: 36px;
            }
            .welcome-container p {
                font-size: 16px;
            }
        }

        /* Penyesuaian Jarak Antar Bagian (KUNCI UNTUK 30PX GAP) */
        .sambutan-section{
            margin-top: 10px;
        }
        /* Sambutan Kepala Desa */
        .sambutan-section {
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            text-align: justify;
            padding: 20px 20px 0px 20px;
        }

        .sambutan-container {
            display: flex;
            
            flex-wrap: wrap;
            max-width: 1100px;
            align-items: center;
            gap: 40px;
            background-color: #ffffff;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            padding: 30px;
            width: 100%;
            box-sizing: border-box;
        }

        .foto-kades {
            width: 380px;
            height: auto;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            object-fit: cover;
            flex-shrink: 0;
        }

        .sambutan-teks {
            flex: 1;
            min-width: 300px;
        }

        .sambutan-teks h2 {
            font-size: 42px;
            margin-bottom: 25px;
            color: #2c3e50;
            font-weight: 700;
            position: relative;
            padding-bottom: 15px;
        }

        .sambutan-teks h2::after {
            content: '';
            display: block;
            width: 70px;
            height: 4px;
            background-color: #007bff;
            position: absolute;
            bottom: 0;
            left: 0;
            border-radius: 2px;
        }

        .sambutan-teks p {
            font-size: 18px;
            color: #555;
            line-height: 1.7;
            margin-bottom: 15px;
        }

        .sambutan-teks p strong {
            color: #2c3e50;
            font-size: 19px;
        }

        @media (max-width: 992px) {
            .sambutan-container {
                flex-direction: column;
                align-items: center;
                text-align: justify;
                padding: 30px;
                gap: 30px;
            }

            .foto-kades {
                width: 300px;
                margin-bottom: 20px;
            }

            .sambutan-teks h2 {
                font-size: 36px;
                text-align: center;
            }
            .sambutan-teks h2::after {
                left: 50%;
                transform: translateX(-50%);
            }

            .sambutan-teks p {
                font-size: 17px;
            }
        }

        @media (max-width: 768px) {
            .sambutan-section {
                padding: 0px 15px;
            }
            .foto-kades {
                width: 250px;
            }
            .sambutan-teks h2 {
                font-size: 30px;
            }
            .sambutan-teks p {
                font-size: 16px;
            }
        }

        /* CSS for Sejarah Desa Kalepadang section and Demografi */
        .profile-section {
            background-color: #f0f2f5;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40px 20px 5px 20px;
        }

        .profile-section h2 {
            font-size: 42px;
            color: #2c3e50;
            margin-bottom: 50px;
            position: relative;
            display: inline-block;
            font-weight: 700;
        }

        .profile-section h2::after {
            content: '';
            display: block;
            width: 90px;
            height: 5px;
            background-color: #007bff;
            margin: 20px auto 0;
            border-radius: 3px;
        }

        .profile-section h2 img {
            vertical-align: middle;
            margin-right: 15px;
            width: 45px;
            height: 45px;
            filter: invert(20%) sepia(90%) saturate(1500%) hue-rotate(190deg) brightness(90%) contrast(90%);
        }

        .history-content, .demography-container {
            max-width: 1100px;
            width: 100%;
            margin: 0 auto;
            background-color: #ffffff;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
            text-align: justify;
            line-height: 1.8;
            color: #555;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #eee;
        }

        .history-content h2, .demography-container h2 {
            font-size: 36px;
            margin-bottom: 30px;
            color: #2c3e50;
            font-weight: 700;
            position: relative;
            text-align: center;
            width: 100%;
        }

        .history-content h2::after, .demography-container h2::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            margin: 15px auto 0;
            border-radius: 2px;
            background-color: #007bff;
        }

        .history-content p {
            margin-bottom: 20px;
            font-size: 18px;
            text-align: justify;
            width: 100%;
        }

        /* Bagian Data Penduduk (Demografi) */
        .demography-group {
            width: 100%;
            text-align: center;
            margin-top: 20px;
        }

        .demography-group h3 {
            font-size: 32px;
            color: #2c3e50;
            margin-bottom: 35px;
            font-weight: 600;
            position: relative;
            display: inline-block;
        }

        .demography-group h3::after {
            content: '';
            display: block;
            width: 50px;
            height: 3px;
            margin: 10px auto 0;
            border-radius: 2px;
            background-color: #007bff;
        }

        .demography-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 25px;
            justify-content: center;
            padding: 0 10px;
        }

        .demography-item {
            background-color: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        .demography-item:hover {
            transform: translateY(-7px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }
        .demography-item img {
            width: 60px;
            height: auto;
            max-height: 60px;
            border-radius: 50%;
            object-fit: contain;
            margin-bottom: 10px;
            border: 2px solid #007bff;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        @media (max-width: 768px) {
            .demography-item img {
                width: 50px;
                max-height: 50px;
            }
        }

        @media (max-width: 480px) {
            .demography-item img {
                width: 40px;
                max-height: 40px;
            }
        }
        .demography-item h4 {
            color: #555;
            margin-bottom: 8px;
            font-size: 18px;
            font-weight: 600;
        }

        .demography-item .count {
            font-size: 38px;
            font-weight: bold;
            color: #007bff;
            display: block;
            margin-bottom: 5px;
        }

        .demography-item .label {
            font-size: 15px;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        @media (max-width: 992px) {
            .history-content, .demography-container {
                padding: 35px;
            }
            .demography-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 20px;
            }
        }

        @media (max-width: 768px) {
            .profile-section {
                padding: 40px 15px;
            }
            .profile-section h2 {
                font-size: 36px;
                margin-bottom: 0px;
            }
            .profile-section h2 img {
                width: 35px;
                height: 35px;
            }
            .history-content, .demography-container {
                padding: 30px;
            }
            .history-content h2, .demography-container h2 {
                font-size: 30px;
                margin-bottom: 25px;
            }
            .history-content p {
                font-size: 16px;
            }
            .demography-group h3 {
                font-size: 28px;
            }
            .demography-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 20px;
            }
            .demography-item img {
                width: 50px;
                height: 50px;
            }
            .demography-item .count {
                font-size: 36px;
            }
            .demography-item h4 {
                font-size: 16px;
            }
            .demography-item .label {
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {
            .profile-section h2 {
                font-size: 30px;
            }
            .history-content, .demography-container {
                padding: 20px;
            }
            .history-content h2, .demography-container h2 {
                font-size: 24px;
            }
            .history-content p {
                font-size: 15px;
            }
            .demography-group h3 {
                font-size: 24px;
            }
            .demography-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            .demography-item img {
                width: 40px;
                height: 40px;
            }
            .demography-item h4 {
                font-size: 15px;
            }
            .demography-item .count {
                font-size: 32px;
            }
            .demography-item .label {
                font-size: 13px;
            }
        }

        /* Styles for the map section */
        .map-wrapper {
            position: relative;
            height: 500px;
            overflow: hidden;
            max-width: 1100px;
            width: 100%;
            margin: 0 auto;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid #eee;
        }

        .map-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        @media (max-width: 768px) {
            .map-wrapper {
                height: 400px;
                max-width: calc(100% - 30px);
            }
        }
        @media (max-width: 480px) {
            .map-wrapper {
                height: 300px;
            }
        }

        /* Footer */
        footer {
            background-color: #4c505a !important;
            color: #f0f0f0;
            padding: 40px 20px;
            text-align: center;
            border-top: 1px solid #3a475a;
            margin-top: 30px;
        }

        footer div {
            max-width: 1100px;
            margin: 0 auto;
        }

        footer p {
            font-size: 17px;
            margin-bottom: 10px;
        }

        footer p:first-child {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #ffffff;
        }

        footer a {
            color: #99ccff;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        footer a:hover {
            color: #ffffff;
            text-decoration: underline;
        }

        br {
            display: none;
        }

        /* CSS Baru untuk Berita Terbaru */
        .berita-terbaru-section {
            background-color: #f0f2f5;
            text-align: center;
            padding: 40px 20px;
        }

        .berita-terbaru-section h2 {
            font-size: 42px;
            color: #2c3e50;
            margin-bottom: 50px;
            position: relative;
            display: inline-block;
            font-weight: 700;
        }

        .berita-terbaru-section h2::after {
            content: '';
            display: block;
            width: 90px;
            height: 5px;
            background-color: #007bff;
            margin: 20px auto 0;
            border-radius: 3px;
        }

        .berita-container-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .berita-item {
            background-color: #ffffff;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            text-align: left;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .berita-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
        }

        .berita-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
            border-bottom: 1px solid #eee;
        }

        .berita-content {
            padding: 20px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .berita-content h3 {
            font-size: 22px;
            margin-top: 0;
            margin-bottom: 10px;
            line-height: 1.4;
        }

        .berita-content h3 a {
            color: #2c3e50;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .berita-content h3 a:hover {
            color: #007bff;
        }

        .berita-content p {
            font-size: 15px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .berita-content .read-more {
            display: inline-block;
            background-color: #007bff;
            color: white;
            padding: 10px 18px;
            border-radius: 5px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: background-color 0.2s ease;
            align-self: flex-start;
        }

        .berita-content .read-more:hover {
            background-color: #0056b3;
        }

        @media (max-width: 768px) {
            .berita-terbaru-section h2 {
                font-size: 36px;
            }
            .ass{
                text-align: center;
            }
            .berita-container-grid {
                grid-template-columns: 1fr;
            }
            .berita-item img {
                height: 180px;
            }
            .berita-content h3 {
                font-size: 20px;
            }
            .berita-content p {
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {
            .berita-terbaru-section h2 {
                font-size: 30px;
            }
            .berita-item img {
                height: 150px;
            }
            .berita-content {
                padding: 15px;
            }
            .berita-content h3 {
                font-size: 18px;
            }
        }
        .jabatan{
            margin-top: -20px;
        }
        /* Untuk gambar dalam slideshow */
.slideshow-image { /* Ganti .slideshow-image dengan kelas aktual pada gambar Anda */
    max-width: 700px;
    height: auto; /* Ini akan menjaga rasio aspek gambar */
    display: block; /* Agar margin auto bekerja untuk penengahan */
    margin: 0 auto; /* Untuk menengahkan gambar */
}

/* Untuk kontainer slideshow */
.slideshow-container { /* Ganti .slideshow-container dengan kelas aktual pada kontainer slideshow Anda */
    max-width: 700px;
    margin: 0 auto; /* Untuk menengahkan kontainer slideshow */
    overflow: hidden; /* Penting jika ada transisi atau elemen lain di dalamnya */
}
/* end index css */