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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'poppins', sans-serif;
    background-color: #ffffff;
    color: #333333;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {
    background-color: #267f96;
    color: white;
    padding: 12px 0;
}

.navbar-container {
    width: 100%;
    max-width: none;

    min-height: 75px;

    margin: 0;

    padding: 0 20px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* =========================================================
   BRAND / LOGO
========================================================= */

.brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.logo-desa {

    width: 100px;

    height: 100px;

    max-width: 100px;

    max-height: 100px;

    object-fit: contain;

    display: block;

}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 18px;
    font-weight: 700;
}

.brand-location {
    font-size: 14px;
    margin-top: 2px;
}
/* =========================================================
   MENU NAVBAR
========================================================= */

.nav-menu {
    display: flex;
    align-items: center;
    gap: 25px;
}

.nav-menu a {
    font-size: 15px;
    font-weight: 600;
    transition: 0.3s;
}

.nav-menu a:hover {
    opacity: 0.75;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    min-height: 650px;

    background-image:
        linear-gradient(
            rgba(0, 80, 40, 0.65),
            rgba(0, 50, 30, 0.65)
        ),
        url("../images/hero_desa.jpeg");

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;

    color: white;
}

.hero-overlay {
    width: 100%;
}

.hero-content {
    text-align: center;
}

.hero-subtitle {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.hero h1 {
    font-size: 58px;
    line-height: 1.15;
    margin-bottom: 15px;
}

.hero-description {
    font-size: 20px;
    margin-bottom: 30px;
}


/* =========================================================
   BUTTON HERO
========================================================= */

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn {
    display: inline-block;
    padding: 13px 25px;
    border-radius: 6px;
    font-weight: bold;
    transition: 0.3s;
}

.btn-primary {
    background-color: #267f96;
    
    color: white;
}

.btn-primary:hover {
     background-color: #267f96;
}

.btn-outline {
    border: 2px solid white;
    color: white;
}

.btn-outline:hover {
    background-color: white;
    color: #267f96;
}


/* =========================================================
   SECTION UMUM
========================================================= */

.section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.section-title span {
    display: block;
    color: #267f96;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.section-title h2 {
    font-size: 36px;
    line-height: 1.2;
    color: #222222;
    margin: 0;
}


/* =========================================================
   TENTANG DESA
========================================================= */

.tentang-section {
    background-color: #ffffff;
}

.tentang-title {
    text-align: left;
    margin-bottom: 30px;
}

.tentang-title span {
    display: block;
    color: #267f96;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.tentang-title h2 {
    font-size: 36px;
    line-height: 1.2;
    color: #222222;
    margin: 0;
}

.about-content {
    max-width: 900px;
    margin-left: 0;
    margin-right: auto;
}

.about-text {
    width: 100%;
    text-align: justify;
    line-height: 1.8;
    font-size: 17px;
    color: #555555;
}

.about-text p {
    margin-bottom: 18px;
}

.read-more {
    color: #267f96;
    font-weight: bold;
}

.read-more:hover {
    text-decoration: underline;
}


/* =========================================================
   SAMBUTAN KEPALA DESA
========================================================= */

.sambutan-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.sambutan-wrapper {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 55px;
    align-items: center;

    max-width: 1050px;
    margin: auto;
}

.sambutan-foto {
    width: 250px;
    height: 330px;

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

    background: linear-gradient(
        145deg,
        #dcefe5,
        #b9ddc9
    );

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.10);
}

.sambutan-foto img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center bottom;

    display: block;

    border: none;
    outline: none;
}

.sambutan-label {
    color: #267f96;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;

    display: block;

    margin-bottom: 8px;
}

.sambutan-content h2 {
    font-size: 36px;
    line-height: 1.2;

    color: #267f96;

    margin: 0 0 12px 0;

    font-weight: 700;
}

.sambutan-content h4 {
    font-size: 18px;
    margin-bottom: 20px;
}

.sambutan-content p {
    line-height: 1.8;
    color: #555555;

    margin-bottom: 15px;

    text-align: justify;
}

.sambutan-pembuka,
.sambutan-penutup {
    font-weight: bold;
    font-style: italic;

    color: #267f96 !important;

    text-align: left !important;
}

.sambutan-nama {
    margin-top: 25px;

    display: flex;
    flex-direction: column;
}

.sambutan-nama strong {
    font-size: 18px;
    color: #222222;
}

.sambutan-nama span {
    margin-top: 20px;
    color: #666666;
}


/* =========================================================
   ADMINISTRASI PENDUDUK
========================================================= */

.penduduk-section {
    padding: 90px 0;
    background-color: #f5f8f6;
}


/* HEADER */

.penduduk-header {
    max-width: 800px;
    margin-bottom: 45px;
}

.penduduk-header .section-label {
    display: block;

    margin-bottom: 8px;

    color: #267f96;

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

    letter-spacing: 2.5px;
}

.penduduk-header h2 {
    margin: 0 0 12px;

    color: #267f96;

    font-size: 38px;
    line-height: 1.2;

    font-weight: 700;
}

.penduduk-header p {
    margin: 0;

    color: #68736e;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   GRID PENDUDUK
========================================================= */

.penduduk-grid {
    display: grid;

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

    gap: 22px;

    max-width: 1100px;
}


/* =========================================================
   KARTU PENDUDUK
========================================================= */

.penduduk-card {
    position: relative;

    background-color: #ffffff;

    min-height: 185px;

    padding: 28px 25px;

    border-radius: 16px;

    border: 1px solid #e5ece8;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.05);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* GARIS HIJAU */

.penduduk-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background-color: #267f96;
}


/* HOVER */

.penduduk-card:hover {
    transform: translateY(-6px);

    border-color: #b9daca;

    box-shadow:
        0 12px 30px rgba(8, 122, 62, 0.12);
}


/* ICON */

.penduduk-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 15px;

    border-radius: 50%;

    background-color: #e8f5ee;

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

    font-size: 25px;
}


/* ANGKA */

.penduduk-number {
    margin-bottom: 5px;

    color: #267f96;

    font-size: 34px;

    line-height: 1;

    font-weight: 700;
}


/* NAMA */

.penduduk-name {
    color: #6b746f;

    font-size: 14px;

    font-weight: 500;
}


/* =========================================================
   TOMBOL DATA PENDUDUK
========================================================= */

.penduduk-button {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    margin-top: 35px;

}


.btn-penduduk {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

}
.btn-penduduk {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 14px 22px;

    background-color: #267f96;

    color: #ffffff;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 600;

    box-shadow:
        0 5px 15px rgba(8, 122, 62, 0.18);

    transition: all 0.3s ease;
}

.btn-penduduk:hover {
    background-color: #065f30;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(8, 122, 62, 0.25);
}

.btn-penduduk span {
    font-size: 18px;

    transition: transform 0.3s ease;
}

.btn-penduduk:hover span {
    transform: translateX(4px);
}



/* =========================================================
   HALAMAN POTENSI DESA
========================================================= */

.potensi-page {
    width: 100%;
    background: #f5f7f6;
    padding: 70px 0;
    overflow-x: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.potensi-page .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.potensi-header {
    width: 100%;
    max-width: 750px;
    margin: 0 auto 45px;
    text-align: center;
}

.potensi-label {
    display: inline-block;
    color: #267f96;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.potensi-header h1 {
    margin: 0 0 15px;
    color: #222;
    font-size: 38px;
    line-height: 1.2;
}

.potensi-header > p {
    margin: 0;
    color: #666;
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   GRID POTENSI
========================================================= */

.potensi-page-grid {
    display: grid;

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

    gap: 28px;

    width: 100%;

    /* PENTING:
       jangan stretch tinggi card */
    align-items: start;
}


/* =========================================================
   CARD
========================================================= */

.potensi-page-card {
    width: 100%;
    min-width: 0;

    background: #ffffff;

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.08);

    display: flex;
    flex-direction: column;

    /* PENTING */
    height: auto;
    align-self: start;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.potensi-page-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   FOTO
========================================================= */

.potensi-page-image {
    width: 100%;
    height: 230px;

    overflow: hidden;

    background: #edf3f2;

    flex-shrink: 0;
}

.potensi-page-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.4s ease;
}

.potensi-page-card:hover
.potensi-page-image img {
    transform: scale(1.05);
}


/* =========================================================
   FOTO TIDAK TERSEDIA
========================================================= */

.potensi-page-no-image {
    width: 100%;
    height: 100%;

    display: flex;

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

    padding: 20px;

    color: #777;

    font-size: 14px;

    text-align: center;
}


/* =========================================================
   CONTENT CARD
========================================================= */

.potensi-page-content {
    display: block;

    width: 100%;

    padding: 23px;

    min-width: 0;

    /* PENTING:
       jangan flex: 1 */
    flex: none;

    box-sizing: border-box;
}


/* =========================================================
   JUDUL CARD
========================================================= */

.potensi-page-content h2 {
    margin: 0 0 12px;

    color: #267f96;

    font-size: 22px;

    line-height: 1.3;

    /* Maksimal 2 baris */
    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;

    overflow-wrap: break-word;
    word-break: break-word;
}


/* =========================================================
   DESKRIPSI CARD
========================================================= */

.potensi-page-content p {
    margin: 0;

    color: #666;

    font-size: 15px;

    line-height: 1.7;

    /* =========================================
       BATASI DESKRIPSI
       MAKSIMAL 5 BARIS
    ========================================= */

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 5;

    overflow: hidden;

    /* Tinggi maksimal 5 baris */
    max-height: calc(15px * 1.7 * 5);

    /* Jangan biarkan teks panjang
       merusak ukuran card */
    overflow-wrap: break-word;

    word-break: break-word;
}


/* =========================================================
   LINK DETAIL
========================================================= */

.potensi-page-link {
    display: inline-block;

    margin-top: 15px;

    padding-top: 0;

    color: #267f96;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition: color 0.2s ease;
}

.potensi-page-link:hover {
    color: #1f6d80;

    text-decoration: underline;
}


/* =========================================================
   DATA KOSONG
========================================================= */

.potensi-page-empty {
    grid-column: 1 / -1;

    width: 100%;

    background: #ffffff;

    padding: 60px 30px;

    border-radius: 14px;

    text-align: center;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.06);

    box-sizing: border-box;
}

.empty-icon {
    margin-bottom: 10px;

    font-size: 45px;
}

.potensi-page-empty h2 {
    margin: 0 0 10px;

    color: #267f96;

    font-size: 24px;
}

.potensi-page-empty p {
    margin: 0;

    color: #777;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .potensi-page {
        padding: 60px 25px;
    }

    .potensi-page-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .potensi-page {
        padding: 45px 15px;
    }

    .potensi-page .container {
        width: 100%;
        max-width: 100%;
    }

    .potensi-header {
        margin: 0 auto 30px;
    }

    .potensi-label {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .potensi-header h1 {
        font-size: 30px;
        line-height: 1.25;
    }

    .potensi-header > p {
        font-size: 14px;
        line-height: 1.7;
    }

    .potensi-page-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .potensi-page-card:hover {
        transform: none;
    }

    .potensi-page-image {
        height: 220px;
    }

    .potensi-page-content {
        padding: 20px;
    }

    .potensi-page-content h2 {
        font-size: 20px;
    }

    .potensi-page-content p {
        font-size: 14px;

        -webkit-line-clamp: 5;

        max-height:
            calc(14px * 1.7 * 5);
    }

    .potensi-page-link {
        margin-top: 15px;
    }

    .potensi-page-empty {
        padding: 45px 20px;
    }

    .potensi-page-empty h2 {
        font-size: 21px;
    }

}


/* =========================================================
   HP SANGAT KECIL
========================================================= */

@media (max-width: 380px) {

    .potensi-page {
        padding: 35px 12px;
    }

    .potensi-header h1 {
        font-size: 26px;
    }

    .potensi-header > p {
        font-size: 13px;
    }

    .potensi-page-image {
        height: 200px;
    }

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

    .potensi-page-content h2 {
        font-size: 19px;
    }

    .potensi-page-content p {
        font-size: 13px;

        -webkit-line-clamp: 5;

        max-height:
            calc(13px * 1.7 * 5);
    }

}


/* =========================================================
   GALERI
========================================================= */

.galeri-grid {
    display: grid;

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

    gap: 15px;
}

.galeri-item {
    height: 230px;

    overflow: hidden;

    border-radius: 10px;

    background-color: #eeeeee;
}

.galeri-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: 0.4s;
}

.galeri-item:hover img {
    transform: scale(1.05);
}


/* =========================================================
   PETA DESA
========================================================= */

.peta-section {
    background-color: #f5f7f6;
}

.peta-content {
    max-width: 1000px;

    margin: auto;

    background-color: white;

    padding: 15px;

    border-radius: 12px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.08);
}

.peta-image {
    width: 100%;

    height: auto;

    display: block;

    border-radius: 8px;
}


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

.footer {
    background-color: #2b8ba1;
    color: #ffffff;
    margin-top: 60px;
    padding: 48px 40px 0;
}

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

.footer-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

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

.footer-grid {
    display: grid;
    grid-template-columns:
        1.3fr
        1fr
        1fr
        1.1fr;

    gap: 45px;

    align-items: start;
}

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

.footer-column {
    min-width: 0;
}

.footer-column h3 {
    margin: 0 0 16px;

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

    color: #ffffff;
}

.footer-column p {
    margin: 0 0 8px;

    font-size: 15px;
    line-height: 1.6;

    color: #ffffff;
}

/* =========================================================
   IDENTITAS DESA
========================================================= */

.footer-desa {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.footer-logo-desa {
    width: 270px;
    height: 200px;

    flex-shrink: 0;

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

.footer-logo-desa img {
    width: 270px;
    height: 200px;

    object-fit: contain;

    display: block;

    transform: scale(1.55);
}

.footer-desa-info {
    padding-top: 2px;
}

.footer-desa-info h3 {
    margin-bottom: 10px;
}

.footer-desa-info p {
    margin-bottom: 5px;
}

/* =========================================================
   HUBUNGI KAMI
========================================================= */

.footer-contact-item {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 16px;
}

.footer-contact-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.15);

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

    font-size: 18px;
}

.footer-contact-text {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.footer-contact-label {
    font-size: 13px;

    opacity: 0.8;
}

.footer-contact-value {
    font-size: 15px;

    font-weight: 500;

    color: #ffffff;

    text-decoration: none;
}

/* =========================================================
   SOCIAL MEDIA DESA
========================================================= */

.footer-social {
    display: flex;

    gap: 10px;

    margin-top: 8px;
}

.footer-social a {
    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.15);

    color: #ffffff;

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

    text-decoration: none;

    font-size: 17px;

    transition: 0.2s ease;
}

.footer-social a:hover {
    background: rgba(255, 255, 255, 0.28);

    transform: translateY(-2px);
}

/* =========================================================
   NOMOR TELEPON PENTING
========================================================= */

.footer-important-list {
    display: flex;
    flex-direction: column;

    gap: 9px;
}

.footer-important-list a {
    color: #ffffff;

    font-size: 15px;

    text-decoration: underline;

    text-underline-offset: 3px;
}

.footer-important-list a:hover {
    opacity: 0.75;
}

/* =========================================================
   DIDUKUNG OLEH
========================================================= */

.footer-support-logos {
    display: flex;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 12px;
}

.footer-support-item {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
}

.footer-support-logo {
    width: 92px;
    height: 92px;

    background: #ffffff;

    border-radius: 12px;

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

    overflow: hidden;

    margin-bottom: 10px;
}

.footer-support-logo img {
    width: 78px;
    height: 78px;

    object-fit: contain;
}

/* =========================================================
   SOSIAL KKN / USTI
========================================================= */

.footer-support-name {
    font-size: 14px;

    font-weight: 700;

    margin-bottom: 7px;

    color: #ffffff;
}

.footer-support-social {
    display: flex;

    gap: 10px;
}

.footer-support-social a {
    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.15);

    color: #ffffff;

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

    text-decoration: none;

    font-size: 15px;

    transition: 0.2s ease;
}

.footer-support-social a:hover {
    background: rgba(255, 255, 255, 0.28);

    transform: translateY(-2px);
}

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

.footer-bottom {
    margin-top: 42px;

    padding: 18px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.25);

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;
}

.footer-bottom p {
    margin: 0;

    font-size: 13px;

    opacity: 0.9;
}

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

@media (max-width: 1000px) {

    .footer {
        padding: 40px 25px 0;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;

        gap: 35px;
    }

}

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

@media (max-width: 650px) {

    /* FOOTER */
    .footer {
        width: 100%;
        box-sizing: border-box;

        padding: 35px 20px 0;

        margin-top: 40px;

        overflow: hidden;
    }


    /* CONTAINER */
    .footer-container {
        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
    }


    /* GRID */
    .footer-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 30px;

        width: 100%;

        box-sizing: border-box;
    }


    /* =====================================================
       IDENTITAS DESA MOBILE
    ===================================================== */

    .footer-desa {
        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        margin: 0;

        padding: 0;

        box-sizing: border-box;
    }


    /* LOGO DESA */
    .footer-logo-desa {
        width: 100px !important;
        height: 100px !important;

        min-width: 100px !important;
        max-width: 100px !important;

        flex-shrink: 0;

        display: flex;

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

        margin: 0;

        padding: 0;

        box-sizing: border-box;
    }


    .footer-logo-desa img {
        width: 100px !important;
        height: 100px !important;

        max-width: 100px !important;
        max-height: 100px !important;

        object-fit: contain;

        display: block;

        transform: none !important;
    }


    /* INFORMASI DESA */
    .footer-desa-info {
        width: 100%;

        padding: 0;

        margin: 0;

        box-sizing: border-box;
    }


    .footer-desa-info h3 {
        margin: 0 0 10px;

        font-size: 20px;
    }


    .footer-desa-info p {
        margin: 0 0 5px;

        font-size: 14px;

        line-height: 1.6;

        word-break: normal;

        overflow-wrap: break-word;
    }


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

    .footer-column {
        width: 100%;

        min-width: 0;

        box-sizing: border-box;
    }


    .footer-column h3 {
        font-size: 20px;
    }


    .footer-column p {
        font-size: 14px;
    }


    /* =====================================================
       HUBUNGI KAMI
    ===================================================== */

    .footer-contact-item {
        width: 100%;

        max-width: 100%;

        box-sizing: border-box;
    }


    .footer-contact-text {
        min-width: 0;
    }


    .footer-contact-value {
        overflow-wrap: anywhere;
    }


    /* =====================================================
       DIDUKUNG OLEH
    ===================================================== */

    .footer-support-logos {
        display: flex;

        align-items: flex-start;

        gap: 15px;

        flex-wrap: wrap;
    }


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

    .footer-bottom {
        width: 100%;

        margin-top: 30px;

        box-sizing: border-box;

        text-align: center;
    }

}
/* =========================================================
   RESPONSIVE TABLET
========================================================= */

@media (max-width: 900px) {

    .container {
        width: 92%;
    }

    .hero h1 {
        font-size: 48px;
    }

    .sambutan-wrapper {
        grid-template-columns: 230px 1fr;
        gap: 35px;
    }

    .sambutan-foto {
        width: 230px;
        height: 310px;
    }

    .penduduk-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .potensi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .berita-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   RESPONSIVE TABLET / HP
========================================================= */

@media (max-width: 768px) {

    /* NAVBAR */

    .navbar .container {
        flex-direction: column;

        gap: 15px;
    }

    .nav-menu {
        flex-wrap: wrap;

        justify-content: center;

        gap: 15px;
    }


    /* HERO */

    .hero {
        min-height: 500px;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero-description {
        font-size: 16px;
    }


    /* TENTANG */

    .tentang-title h2 {
        font-size: 30px;
    }


    /* SAMBUTAN */

    .sambutan-wrapper {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .sambutan-foto {
        width: 200px;
        height: 260px;

        margin: auto;
    }

    .sambutan-content h2 {
        font-size: 30px;
    }

    .sambutan-content p {
        text-align: justify;
    }

    .sambutan-pembuka,
    .sambutan-penutup {
        text-align: center !important;
    }

    .sambutan-nama {
        align-items: center;
    }


    /* PENDUDUK */

    .penduduk-header h2 {
        font-size: 32px;
    }


    /* GALERI */

    .galeri-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 480px) {

    /* CONTAINER */

    .container {
        width: 90%;
    }


    /* NAVBAR */

    .brand-name {
        font-size: 19px;
    }

    .brand-location {
        font-size: 12px;
    }

    .logo-desa {
        width: 48px;
        height: 48px;
    }

    .nav-menu {
        gap: 10px;
    }

    .nav-menu a {
        font-size: 16px;
    }


    /* HERO */

    .hero {
        min-height: 450px;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero-subtitle {
        font-size: 13px;
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-buttons {
        flex-direction: column;

        align-items: center;
    }

    .btn {
        width: 200px;

        text-align: center;
    }


    /* SECTION */

    .section {
        padding: 60px 0;
    }

    .section-title h2 {
        font-size: 28px;
    }


    /* TENTANG */

    .tentang-title h2 {
        font-size: 28px;
    }

    .about-text {
        font-size: 16px;
    }


    /* SAMBUTAN */

    .sambutan-section {
        padding: 60px 0;
    }

    .sambutan-content h2 {
        font-size: 27px;
    }

    .sambutan-content p {
        font-size: 15px;
    }


    /* PENDUDUK */

    .penduduk-section {
        padding: 60px 0;
    }

    .penduduk-header h2 {
        font-size: 29px;
    }

    .penduduk-grid{

display:grid;

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

gap:25px;

}



.penduduk-card{

background:white;

padding:30px;

border-radius:20px;

text-align:center;


box-shadow:
0 10px 30px rgba(0,0,0,.08);


transition:.3s;

}


.penduduk-card:hover{

transform:translateY(-8px);

}


    /* POTENSI */

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


    /* BERITA */

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


    /* GALERI */

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

    .galeri-item {
        height: 220px;
    }

}

/* =========================================================
   INFOGRAFIS DESA
========================================================= */

.infografis-page {
    background-color: #f5f8f6;
    padding: 70px 0 90px;
}


/* HEADER */

.infografis-header {
    margin-bottom: 60px;
}

.info-label {
    display: block;

    color: #267f96;

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

    letter-spacing: 2.5px;

    margin-bottom: 8px;
}

.infografis-header h1 {
    color: #267f96;

    font-size: 42px;

    line-height: 1.2;

    margin-bottom: 12px;
}

.infografis-header p {
    max-width: 700px;

    color: #68736e;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   SECTION
========================================================= */

.info-section {
    margin-bottom: 65px;
}

.info-section-title {
    margin-bottom: 28px;
}

.info-section-title span {
    display: block;

    color: #267f96;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 7px;
}

.info-section-title h2 {
    color: #222;

    font-size: 30px;

    margin-bottom: 8px;
}

.info-section-title p {
    color: #68736e;

    font-size: 15px;
}


/* =========================================================
   STAT CARD
========================================================= */

.info-stat-grid {
    display: grid;

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

    gap: 20px;
}

.info-stat-card {
    position: relative;

    background-color: #ffffff;

    padding: 30px 20px;

    min-height: 180px;

    border-radius: 14px;

    border: 1px solid #e4ebe7;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    box-shadow:
        0 5px 18px rgba(0,0,0,0.05);

    transition: 0.3s;
}

.info-stat-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background-color: #267f96;
}

.info-stat-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 12px 25px rgba(8,122,62,0.12);
}

.info-stat-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    background-color: #e8f5ee;

    border-radius: 50%;

    font-size: 24px;

    margin-bottom: 14px;
}

.info-stat-number {
    color: #267f96;

    font-size: 34px;

    font-weight: 700;

    line-height: 1;

    margin-bottom: 7px;
}

.info-stat-name {
    color: #68736e;

    font-size: 14px;

    font-weight: 500;
}


/* =========================================================
   CHART
========================================================= */

.info-chart-card {
    background-color: #ffffff;

    padding: 35px;

    border-radius: 14px;

    border: 1px solid #e4ebe7;

    box-shadow:
        0 5px 18px rgba(0,0,0,0.05);

    max-width: 1000px;
}

.bar-item {
    margin-bottom: 25px;
}

.bar-item:last-child {
    margin-bottom: 0;
}

.bar-header {
    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;

    color: #555;
}

.bar-header strong {
    color: #267f96;
}

.bar-background {
    width: 100%;

    height: 18px;

    background-color: #e8efeb;

    border-radius: 20px;

    overflow: hidden;
}

.bar-fill {
    height: 100%;

    background-color: #267f96;

    border-radius: 20px;

    transition: width 0.5s ease;
}


/* =========================================================
   DATA BELUM TERSEDIA
========================================================= */

.info-empty {
    background-color: #ffffff;

    border: 1px solid #e4ebe7;

    border-radius: 14px;

    min-height: 180px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: #68736e;

    box-shadow:
        0 5px 18px rgba(0,0,0,0.04);
}

.info-empty div {
    font-size: 38px;

    margin-bottom: 12px;
}

.info-empty p {
    font-size: 14px;
}


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

@media (max-width: 768px) {

    .infografis-page {
        padding: 50px 0 70px;
    }

    .infografis-header h1 {
        font-size: 34px;
    }

    .info-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .info-section-title h2 {
        font-size: 27px;
    }

}


@media (max-width: 480px) {

    .info-stat-grid {
        grid-template-columns: 1fr;
    }

    .infografis-header h1 {
        font-size: 30px;
    }

    .info-chart-card {
        padding: 22px;
    }

}


/* =========================================================
   TOMBOL SECTION - POSISI TENGAH
========================================================= */

.section-button {
    width: 100% !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    text-align: center !important;

    margin-top: 40px !important;

    margin-left: auto !important;

    margin-right: auto !important;

}


/* =========================================================
   SEMUA TOMBOL DI DALAM SECTION BUTTON
========================================================= */

.section-button .btn,
.section-button button,
.section-button a {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    margin-left: auto !important;

    margin-right: auto !important;

}


/* =========================================================
   PRODUK UMKM
========================================================= */

.umkm-section .section-button {

    width: 100% !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    text-align: center !important;

    margin-top: 35px !important;

}


/* =========================================================
   BERITA
========================================================= */

.berita-section .section-button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}


/* =========================================================
   GALERI
========================================================= */

.galeri-section .section-button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}


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

.peta-section .section-button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}
/* =========================================================
   PRODUK UMKM DESA
========================================================= */

.umkm-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.umkm-section .section-title {
    margin-bottom: 40px;
}

.umkm-section .section-title p {
    max-width: 700px;
    margin: 12px auto 0;
    color: #68736e;
    line-height: 1.7;
}


/* GRID */

.umkm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;

    /* Membuat card dalam satu baris mengikuti tinggi yang sama */
    align-items: stretch;
}


/* CARD */

.umkm-card {
    border-radius: 20px;

    overflow: hidden;

    background: white;

    box-shadow:
        0 10px 30px rgba(0,0,0,.1);

    /* Menjaga tinggi card tetap rapi */
    display: flex;
    flex-direction: column;

    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.umkm-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 12px 30px rgba(8, 122, 62, 0.12);
}


/* IMAGE */

.umkm-image {
    width: 100%;
    height: 210px;

    background-color: #e8f5ee;

    overflow: hidden;

    flex-shrink: 0;
}

.umkm-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.4s ease;
}

.umkm-card:hover .umkm-image img {
    transform: scale(1.05);
}


/* CONTENT */

.umkm-content {
    padding: 22px;

    /* Isi card dibuat fleksibel */
    display: flex;
    flex-direction: column;

    flex: 1;
}

.umkm-category {
    display: inline-block;

    color: #267f96;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 8px;
}

.umkm-content h3 {
    margin: 0 0 10px;

    color: #222222;

    font-size: 21px;

    line-height: 1.3;
}

.produk-content p {
    color: #68736e;

    font-size: 14px;

    line-height: 1.7;

    margin: 0 0 18px;

    /* Batasi deskripsi menjadi 5 baris */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;

    overflow: hidden;
}

.produk-card {
    display: flex;
    flex-direction: column;
}

.produk-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.produk-content .produk-link {
    margin-top: auto;
}
.umkm-content a {
    color: #267f96;

    font-size: 14px;

    font-weight: 700;

    /* Dorong Detail ke bagian bawah card */
    margin-top: auto;
}

.umkm-content a:hover {
    text-decoration: underline;
}


/* BUTTON */

.umkm-section .section-button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 35px;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .umkm-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

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

    .umkm-image {
        height: 220px;
    }

}

/* =========================================================
   PROFIL DESA
========================================================= */

.profil-page {
    background-color: #f6f9f7;
    padding: 75px 0 90px;
}

.profil-header {
    max-width: 850px;
    margin-bottom: 65px;
}

.profil-label {
    display: block;
    color: #087a3e;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
    margin-bottom: 10px;
}

.profil-header h1 {
    color: #087a3e;
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 15px;
}

.profil-header p {
    color: #68736e;
    font-size: 17px;
    line-height: 1.7;
}


/* SECTION */

.profil-section {
    margin-bottom: 65px;
}

.profil-section-title {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.profil-section-title span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    background-color: #087a3e;
    color: white;

    border-radius: 50%;

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

.profil-section-title h2 {
    margin: 0;

    color: #222;
    font-size: 30px;
}


/* TEXT */

.profil-text {
    max-width: 900px;

    color: #555;

    font-size: 16px;
    line-height: 1.9;

    text-align: justify;
}

.profil-text p {
    margin-bottom: 18px;
}


/* VISI MISI */

.visi-misi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.visi-card,
.misi-card {
    background-color: white;

    padding: 30px;

    border-radius: 14px;

    border: 1px solid #e4ebe7;

    box-shadow:
        0 5px 18px rgba(0,0,0,0.05);
}

.card-label {
    color: #087a3e;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 2px;
}

.visi-card h3,
.misi-card h3 {
    margin: 10px 0 12px;

    font-size: 22px;

    color: #222;
}

.visi-card p,
.misi-card p {
    color: #68736e;

    line-height: 1.8;

    text-align: justify;
}


/* GEOGRAFIS */

.geografis-grid {
    display: grid;

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

    gap: 18px;
}

.geografis-card {
    background-color: white;

    padding: 25px 20px;

    border-radius: 12px;

    border: 1px solid #e4ebe7;

    display: flex;
    flex-direction: column;

    gap: 8px;

    box-shadow:
        0 5px 15px rgba(0,0,0,0.04);
}

.geografis-card strong {
    color: #087a3e;
}

.geografis-card span {
    color: #68736e;
}


/* BATAS WILAYAH */

.batas-grid {
    display: grid;

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

    gap: 18px;
}

.batas-card {
    background-color: white;

    padding: 25px 20px;

    border-radius: 12px;

    border: 1px solid #e4ebe7;

    display: flex;
    flex-direction: column;

    gap: 8px;

    box-shadow:
        0 5px 15px rgba(0,0,0,0.04);
}

.batas-card strong {
    color: #087a3e;
}

.batas-card span {
    color: #68736e;

    font-size: 14px;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .geografis-grid,
    .batas-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 768px) {

    .profil-header h1 {
        font-size: 34px;
    }

    .profil-section-title h2 {
        font-size: 27px;
    }

    .visi-misi-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 480px) {

    .profil-page {
        padding: 55px 0 70px;
    }

    .profil-header h1 {
        font-size: 30px;
    }

    .profil-text {
        font-size: 15px;
    }

    .geografis-grid,
    .batas-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   SOTK PEMERINTAH DESA
========================================================= */

.sotk-page {
    background: #f6f9f7;
    padding: 70px 0 90px;
}


/* =========================================================
   HEADER
========================================================= */

.sotk-header {
    margin-bottom: 50px;
}

.sotk-label {
    color: #087a3e;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.sotk-header h1 {
    margin: 8px 0 5px;

    color: #087a3e;

    font-size: 38px;
    line-height: 1.2;
}

.sotk-header p {
    margin: 0;

    color: #68736e;

    font-size: 17px;
}


/* =========================================================
   KEPALA DESA
========================================================= */

.sotk-kepala {
    display: flex;

    justify-content: center;

    margin-bottom: 60px;
}

.sotk-card-kepala {
    width: 300px;
}


/* =========================================================
   GROUP
========================================================= */

.sotk-group {

    width: 100%;

    margin-bottom: 55px;

}


.sotk-group h2 {

    margin: 0 0 25px;

    color: #087a3e;

    font-size: 25px;

    line-height: 1.3;

    text-align: center;

}


/* =========================================================
   GROUP PEMERINTAHAN
========================================================= */

.sotk-group {

    width: 100%;

    margin-bottom: 55px;

}


.sotk-group h2 {

    margin: 0 0 25px;

    color: #087a3e;

    font-size: 25px;

    line-height: 1.3;

    text-align: center;

}


/* =========================================================
   CARD
========================================================= */

.sotk-grid .sotk-card {

    width: 255px;

    flex: 0 0 255px;

}


/* =========================================================
   GRID 4
========================================================= */

.sotk-grid-4 {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 20px;

}


/* =========================================================
   KEPALA DESA
========================================================= */

.sotk-kepala {

    display: flex;

    justify-content: center;

    width: 100%;

}


/* =========================================================
   CARD KEPALA DESA
========================================================= */

.sotk-card-kepala {

    width: 255px;

}

/* =========================================================
   CARD
========================================================= */

.sotk-card {
    overflow: hidden;

    background: #ffffff;

    border-radius: 12px;

    border: 1px solid #e4ebe7;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);

    display: flex;
    flex-direction: column;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.sotk-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 12px 25px rgba(8, 122, 62, 0.13);
}


/* =========================================================
   FOTO
========================================================= */

.sotk-photo {
    width: 100%;

    height: 260px;

    display: flex;

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

    background: #dcefe5;

    color: #087a3e;

    font-size: 15px;

    font-weight: 600;

    overflow: hidden;

    flex-shrink: 0;
}


/* GAMBAR */

.sotk-photo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}


/* =========================================================
   INFO NAMA & JABATAN
========================================================= */

.sotk-card-info {
    min-height: 78px;

    padding: 16px 15px;

    text-align: center;

    background: #ffffff;

    border-top: 4px solid #80d84f;

    display: flex;

    flex-direction: column;

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


/* NAMA */

.sotk-card-info h3 {
    margin: 0 0 7px;

    color: #222222;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.4;
}


/* JABATAN */

.sotk-card-info span {
    color: #087a3e;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.3;
}


/* =========================================================
   KEPALA DESA LEBIH BESAR
========================================================= */

.sotk-card-kepala {
    width: 300px;
}

.sotk-card-kepala .sotk-photo {
    height: 320px;
}

.sotk-card-kepala .sotk-card-info {
    min-height: 85px;
}

.sotk-card-kepala .sotk-card-info h3 {
    font-size: 22px;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1000px) {

    .sotk-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   RESPONSIVE - TABLET KECIL
========================================================= */

@media (max-width: 800px) {

    .sotk-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   RESPONSIVE - HP
========================================================= */

@media (max-width: 550px) {

    .sotk-page {
        padding: 50px 0 70px;
    }

    .sotk-header {
        margin-bottom: 35px;
    }

    .sotk-header h1 {
        font-size: 30px;
    }

    .sotk-header p {
        font-size: 15px;
    }

    .sotk-grid,
    .sotk-grid-4 {
        grid-template-columns: 1fr;
    }

    .sotk-card-kepala {
        width: 100%;
        max-width: 300px;
    }

    .sotk-photo {
        height: 280px;
    }

    .sotk-card-kepala .sotk-photo {
        height: 320px;
    }

    .sotk-group h2 {
        font-size: 22px;
    }

}

/* =========================================================
   SOTK - FINAL OVERRIDE
========================================================= */

.sotk-page .sotk-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
}

/* AREA FOTO */
.sotk-page .sotk-card > .sotk-photo {
    display: block !important;

    width: 100% !important;
    height: 260px !important;

    position: relative !important;

    overflow: hidden !important;

    padding: 0 !important;
    margin: 0 !important;

    background: #dcefe5 !important;

    flex-shrink: 0 !important;
}

/* GAMBAR */
.sotk-page .sotk-card > .sotk-photo > img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    position: static !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
}

/* AREA INFORMASI */
.sotk-page .sotk-card > .sotk-card-info {
    display: block !important;

    position: static !important;

    width: 100% !important;
    min-height: 78px !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 16px 10px !important;

    background: #ffffff !important;

    border-top: 4px solid #80d84f !important;

    text-align: center !important;
}

/* NAMA */
.sotk-page .sotk-card > .sotk-card-info > h3 {
    display: block !important;

    position: static !important;

    margin: 0 0 6px !important;
    padding: 0 !important;

    color: #222222 !important;

    font-size: 18px !important;

    line-height: 1.4 !important;
}

/* JABATAN */
.sotk-page .sotk-card > .sotk-card-info > span {
    display: block !important;

    position: static !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #267f96 !important;

    font-size: 13px !important;

    line-height: 1.3 !important;
}


/* KEPALA DESA */
.sotk-page .sotk-card-kepala > .sotk-photo {
    height: 320px !important;
}

.sotk-page .sotk-card-kepala {
    width: 300px !important;
}

/* =========================================================
   SOTK - WARNA DAN POSISI
========================================================= */

/* Warna teks seluruh halaman pemerintahan */
.sotk-page {
    color: #267f96;
}


/* Semua judul */
.sotk-page h1,
.sotk-page h2,
.sotk-page h3,
.sotk-page p,
.sotk-page span {
    color: #267f96;
}


/* Label kecil */
.sotk-page .sotk-label {
    color: #267f96;
}


/* Nama */
.sotk-page .sotk-card-info h3 {
    color: #267f96;
}


/* Jabatan */
.sotk-page .sotk-card-info span {
    color: #267f96;
}


/* =========================================================
   GRID YANG HANYA MEMILIKI 2 FOTO
========================================================= */

.sotk-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 300px));
    justify-content: center;
}


/* =========================================================
   BORDER FOTO / PEMISAH FOTO DAN TEKS
========================================================= */

.sotk-page .sotk-card-info {
    border-top-color: #267f96;
}


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

@media (max-width: 800px) {

    .sotk-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 550px) {

    .sotk-grid-2 {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   WARNA TEKS KARTU SOTK
========================================================= */

/* Nama perangkat desa */
.sotk-page .sotk-card .sotk-card-info h3 {
    color: #267f96 !important;
}


/* Jabatan perangkat desa */
.sotk-page .sotk-card .sotk-card-info span {
    color: #267f96 !important;
}


/* Judul bagian */
.sotk-page .sotk-group h2 {
    color: #267f96 !important;
}


/* Label PEMERINTAHAN DESA */
.sotk-page .sotk-label {
    color: #267f96 !important;
}


/* Judul utama */
.sotk-page .sotk-header h1 {
    color: #267f96 !important;
}


/* Deskripsi */
.sotk-page .sotk-header p {
    color: #267f96 !important;
}

/* =========================================================
   BERITA DESA
========================================================= */

.berita-page {
    background: #f6f9f7;
    padding: 70px 0 90px;
}


/* HEADER */

.berita-header {
    margin-bottom: 45px;
}

.berita-label {
    color: #267f96;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.berita-header h1 {
    margin: 8px 0 8px;
    color: #267f96;
    font-size: 38px;
    line-height: 1.2;
}

.berita-header p {
    max-width: 750px;
    margin: 0;
    color: #68736e;
    font-size: 16px;
    line-height: 1.7;
}


/* SECTION */

.berita-section {
    margin-top: 30px;
}

.berita-section-title h2 {
    margin: 0 0 25px;
    color: #267f96;
    font-size: 26px;
}


/* GRID */

.berita-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* CARD */

.berita-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e4ebe7;
    border-radius: 12px;

    box-shadow: 0 5px 18px rgba(0,0,0,0.06);

    transition: 0.3s ease;
}

.berita-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 12px 25px rgba(38,127,150,0.15);
}


/* GAMBAR */

.berita-image {
    width: 100%;
    height: 220px;

    overflow: hidden;

    background: #dcefe5;
}

.berita-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.4s ease;
}

.berita-card:hover .berita-image img {
    transform: scale(1.05);
}


/* CONTENT */

.berita-content {
    padding: 20px;
}

.berita-date {
    color: #267f96;
    font-size: 12px;
    font-weight: 600;
}

.berita-content h3 {
    margin: 8px 0 10px;

    color: #222;

    font-size: 20px;
    line-height: 1.4;
}

.berita-content p {
    margin: 0 0 18px;

    color: #68736e;

    font-size: 14px;
    line-height: 1.7;
}


/* LINK */

.berita-link {
    color: #267f96;

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

    text-decoration: none;
}

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


/* RESPONSIVE */

@media (max-width: 900px) {

    .berita-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .berita-page {
        padding: 50px 0 70px;
    }

    .berita-header h1 {
        font-size: 30px;
    }

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

}

/* =========================================================
   LAYOUT HALAMAN
========================================================= */

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;

    display: flex;
    flex-direction: column;
}

.berita-page {
    flex: 1;
}

.footer {
    margin-top: auto;
    flex-shrink: 0;
}

/* =========================================================
   GALERI DESA
========================================================= */

.galeri-page {
    background: #f6f9f7;
    padding: 70px 0 90px;
}


/* HEADER */

.galeri-header {
    margin-bottom: 45px;
}

.galeri-label {
    color: #267f96;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.galeri-header h1 {
    margin: 8px 0 8px;

    color: #267f96;

    font-size: 38px;
    line-height: 1.2;
}

.galeri-header p {
    max-width: 750px;

    margin: 0;

    color: #68736e;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   GRID GALERI
========================================================= */

.galeri-grid {
    display: grid;

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

    gap: 22px;
}


/* =========================================================
   ITEM FOTO
========================================================= */

.galeri-item {
    position: relative;

    height: 260px;

    overflow: hidden;

    background: #dcefe5;

    border-radius: 12px;

    box-shadow:
        0 5px 18px rgba(0,0,0,0.07);

    cursor: pointer;
}


/* FOTO */

.galeri-item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}


/* ZOOM FOTO */

.galeri-item:hover img {
    transform: scale(1.07);
}


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

.galeri-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 45px 20px 18px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,0.75)
        );

    color: white;

    transform: translateY(5px);

    transition:
        transform 0.3s ease;
}

.galeri-item:hover .galeri-overlay {
    transform: translateY(0);
}


/* JUDUL */

.galeri-overlay h3 {
    margin: 0 0 5px;

    color: white;

    font-size: 18px;
}


/* KETERANGAN */

.galeri-overlay span {
    color: #ffffff;

    font-size: 13px;
}


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

@media (max-width: 900px) {

    .galeri-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .galeri-page {
        padding: 50px 0 70px;
    }

    .galeri-header h1 {
        font-size: 30px;
    }

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

    .galeri-item {
        height: 240px;
    }

}

/* =========================================================
   PETA DESA
========================================================= */

.peta-page {
    background: #f6f9f7;
    padding: 70px 0 90px;
}


/* HEADER */

.peta-header {
    margin-bottom: 45px;
}

.peta-label {
    color: #267f96;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.peta-header h1 {
    margin: 8px 0 8px;

    color: #267f96;

    font-size: 38px;
    line-height: 1.2;
}

.peta-header p {
    max-width: 700px;

    margin: 0;

    color: #68736e;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   MAP CARD
========================================================= */

.peta-card {

    max-width: 850px;

    margin: 0 auto 35px;

    padding: 45px;

    display: flex;

    align-items: center;

    gap: 45px;

    background: #ffffff;

    border-radius: 16px;

    border: 1px solid #e2ebe7;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.06);
}


/* ICON */

.peta-icon {

    width: 130px;
    height: 130px;

    flex-shrink: 0;

    display: flex;

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

    background: #e4f2f5;

    border-radius: 50%;

    font-size: 55px;
}


/* INFO */

.peta-info {
    flex: 1;
}

.peta-keterangan {

    color: #267f96;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}

.peta-info h2 {

    margin: 7px 0 8px;

    color: #222;

    font-size: 30px;
}

.peta-info p {

    margin: 0 0 25px;

    color: #68736e;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   GOOGLE MAPS BUTTON
========================================================= */

.btn-google-maps {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 13px 20px;

    background: #267f96;

    color: white;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    border-radius: 8px;

    transition: 0.3s;
}

.btn-google-maps span {

    font-size: 18px;
}

.btn-google-maps:hover {

    background: #1d6679;

    transform: translateY(-2px);

}


/* =========================================================
   DETAIL LOKASI
========================================================= */

.peta-detail {

    max-width: 850px;

    margin: 0 auto;

    display: grid;

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

    gap: 15px;
}

.peta-detail-item {

    padding: 20px;

    background: white;

    border-radius: 10px;

    border: 1px solid #e4ebe7;

    text-align: center;
}

.peta-detail-item span {

    display: block;

    margin-bottom: 6px;

    color: #68736e;

    font-size: 13px;
}

.peta-detail-item strong {

    color: #267f96;

    font-size: 15px;
}


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

@media (max-width: 700px) {

    .peta-page {
        padding: 50px 0 70px;
    }

    .peta-header h1 {
        font-size: 30px;
    }

    .peta-card {

        padding: 30px 25px;

        flex-direction: column;

        text-align: center;

        gap: 25px;
    }

    .peta-info p {
        margin-bottom: 20px;
    }

    .peta-detail {

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

}


@media (max-width: 450px) {

    .peta-detail {

        grid-template-columns: 1fr;
    }

}
/* =========================================================
   PETA DESA
========================================================= */

.peta-page {
    background: #f6f9f7;
    padding: 70px 0 90px;
}


/* =========================================================
   HEADER
========================================================= */

.peta-header {
    margin-bottom: 35px;
}

.peta-label {
    color: #267f96;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.peta-header h1 {
    margin: 8px 0 8px;

    color: #267f96;

    font-size: 38px;
    line-height: 1.2;
}

.peta-header p {
    max-width: 750px;

    margin: 0;

    color: #68736e;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   GOOGLE MAPS
========================================================= */

.peta-map {
    width: 100%;

    margin-bottom: 30px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2ebe7;

    border-radius: 16px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.08);
}

.peta-map iframe {
    width: 100%;

    height: 500px;

    display: block;

    border: 0;
}


/* =========================================================
   INFORMASI LOKASI
========================================================= */

.peta-detail {
    display: grid;

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

    gap: 15px;

    margin-bottom: 30px;
}

.peta-detail-item {
    padding: 20px;

    background: #ffffff;

    border: 1px solid #e4ebe7;

    border-radius: 10px;

    text-align: center;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.04);
}

.peta-detail-item span {
    display: block;

    margin-bottom: 6px;

    color: #68736e;

    font-size: 13px;
}

.peta-detail-item strong {
    color: #267f96;

    font-size: 16px;
}


/* =========================================================
   TOMBOL
========================================================= */

.peta-action {
    text-align: center;
}

.btn-google-maps {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 13px 22px;

    background: #267f96;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    border-radius: 8px;

    transition: 0.3s ease;
}

.btn-google-maps span {
    font-size: 18px;
}

.btn-google-maps:hover {
    background: #1d6679;

    transform: translateY(-2px);
}


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

@media (max-width: 700px) {

    .peta-page {
        padding: 50px 0 70px;
    }

    .peta-header h1 {
        font-size: 30px;
    }

    .peta-map iframe {
        height: 400px;
    }

    .peta-detail {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 450px) {

    .peta-detail {
        grid-template-columns: 1fr;
    }

    .peta-map iframe {
        height: 350px;
    }

}

/* =========================================================
   HALAMAN BELANJA DESA
========================================================= */

.belanja-page {
    background: #f6f9f7;
    padding: 70px 0 90px;
    min-height: 600px;
}

.belanja-page .container {
    max-width: 1100px;
    margin: 0 auto;
}


/* HEADER */

.belanja-header {
    margin-bottom: 35px;
}

.belanja-label {
    display: block;
    margin-bottom: 8px;

    color: #267f96;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.belanja-header h1 {
    margin: 0 0 10px;

    color: #267f96;
    font-size: 38px;
    line-height: 1.2;
}

.belanja-header p {
    margin: 0;

    color: #68736e;
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   KATEGORI
========================================================= */

.belanja-kategori {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 35px;
}

.kategori-btn {
    padding: 10px 20px;

    border: 1px solid #d7e4e7;
    border-radius: 8px;

    background: #ffffff;
    color: #267f96;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.kategori-btn:hover,
.kategori-btn.active {
    background: #267f96;
    color: #ffffff;
    border-color: #267f96;
}


/* =========================================================
   GRID PRODUK
========================================================= */

.belanja-grid {
    display: grid;

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

    gap: 25px;
}


/* =========================================================
   CARD PRODUK
========================================================= */

.produk-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e1e9e7;
    border-radius: 14px;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);

    transition: all 0.3s ease;
}

.produk-card:hover {
    transform: translateY(-6px);

    box-shadow: 0 12px 28px rgba(38, 127, 150, 0.15);
}


/* =========================================================
   GAMBAR PRODUK
========================================================= */

.produk-image {
    position: relative;

    width: 100%;
    height: 230px;

    overflow: hidden;

    background: #e3f0ed;
}

.produk-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.4s ease;
}

.produk-card:hover .produk-image img {
    transform: scale(1.05);
}


/* BADGE */

.produk-badge {
    position: absolute;

    top: 15px;
    left: 15px;

    padding: 7px 12px;

    background: #ffffff;

    color: #267f96;

    border-radius: 6px;

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

    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}


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

.produk-content {
    padding: 20px;
}

.produk-content h3 {
    margin: 0 0 10px;

    color: #267f96;

    font-size: 20px;
    line-height: 1.4;
}

.produk-content p {
    margin: 0;

    color: #68736e;

    font-size: 14px;
    line-height: 1.7;
}


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

.produk-footer {
    display: flex;

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

    margin-top: 20px;
    padding-top: 15px;

    border-top: 1px solid #edf1ef;
}

.produk-status {
    color: #68736e;

    font-size: 12px;
    font-weight: 600;
}

.produk-btn {
    color: #267f96;

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

    text-decoration: none;
}

.produk-btn:hover {
    text-decoration: underline;
}


/* =========================================================
   INFORMASI
========================================================= */

.belanja-info {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 45px;
    padding: 25px 30px;

    background: #eaf4f6;

    border: 1px solid #d5e8ec;
    border-radius: 12px;
}

.belanja-info-icon {
    width: 55px;
    height: 55px;

    flex-shrink: 0;

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

    background: #ffffff;

    border-radius: 50%;

    font-size: 25px;
}

.belanja-info h2 {
    margin: 0 0 6px;

    color: #267f96;

    font-size: 20px;
}

.belanja-info p {
    margin: 0;

    color: #68736e;

    font-size: 14px;
    line-height: 1.6;
}


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

@media (max-width: 900px) {

    .belanja-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .belanja-page {
        padding: 50px 20px 70px;
    }

    .belanja-header h1 {
        font-size: 30px;
    }

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

    .belanja-info {
        align-items: flex-start;
        padding: 20px;
    }

}

/* =========================================================
   DETAIL PRODUK
========================================================= */

.detail-produk-page {
    background: #f6f9f7;
    min-height: 700px;
    padding: 60px 0 90px;
}


/* CONTAINER */

.detail-produk-page .container {
    width: 1100px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
}


/* =========================================================
   CARD UTAMA
========================================================= */

.detail-produk-card {
    display: grid;

    grid-template-columns: 430px 1fr;

    gap: 40px;

    padding: 25px;

    background: #ffffff;

    border: 1px solid #e0e8e5;

    border-radius: 12px;

    box-shadow:
        0 5px 20px rgba(0,0,0,0.05);
}


/* =========================================================
   FOTO
========================================================= */

.detail-produk-image {
    width: 100%;
    height: 380px;

    overflow: hidden;

    background: #e5f1ee;

    border-radius: 8px;
}

.detail-produk-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   INFORMASI
========================================================= */

.detail-produk-info {
    padding: 10px 5px;
}

.detail-produk-label {
    color: #267f96;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}


.detail-produk-info h1 {
    margin: 8px 0 12px;

    color: #222;

    font-size: 32px;

    line-height: 1.2;
}


/* META */

.detail-produk-meta {
    display: flex;

    gap: 18px;

    margin-bottom: 15px;

    color: #68736e;

    font-size: 13px;
}


/* HARGA */

.detail-produk-harga {
    margin-bottom: 20px;

    color: #267f96;

    font-size: 27px;

    font-weight: 700;
}


/* DESKRIPSI */

.detail-produk-deskripsi {
    margin: 0 0 25px;

    color: #68736e;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   PENJUAL
========================================================= */

.penjual-box {
    display: flex;

    flex-direction: column;

    gap: 5px;

    margin-bottom: 25px;

    padding: 15px;

    background: #f5f9f8;

    border-left: 4px solid #267f96;

    border-radius: 6px;
}

.penjual-label {
    color: #267f96;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;
}

.penjual-box strong {
    color: #222;

    font-size: 15px;
}

.penjual-box span:last-child {
    color: #68736e;

    font-size: 13px;
}


/* =========================================================
   BUTTON
========================================================= */

.detail-produk-actions {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;
}


.btn-whatsapp {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 11px 18px;

    background: #267f96;

    color: #ffffff;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    transition: 0.3s;
}

.btn-whatsapp:hover {
    background: #1d6679;

    transform: translateY(-2px);
}


.btn-kembali {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 11px 18px;

    background: #ffffff;

    color: #267f96;

    border: 1px solid #267f96;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;
}

.btn-kembali:hover {
    background: #267f96;

    color: #ffffff;
}


/* =========================================================
   INFORMASI BAWAH
========================================================= */

.detail-produk-bawah {
    margin-top: 30px;

    padding: 25px 30px;

    background: #ffffff;

    border: 1px solid #e0e8e5;

    border-radius: 10px;
}

.detail-produk-bawah h2 {
    margin: 0 0 10px;

    color: #267f96;

    font-size: 20px;
}

.detail-produk-bawah p {
    margin: 0;

    color: #68736e;

    font-size: 14px;

    line-height: 1.8;
}


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

@media (max-width: 800px) {

    .detail-produk-card {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .detail-produk-image {
        height: 350px;
    }

}


@media (max-width: 550px) {

    .detail-produk-page {
        padding: 40px 0 70px;
    }

    .detail-produk-page .container {
        max-width: calc(100% - 30px);
    }

    .detail-produk-card {
        padding: 15px;
    }

    .detail-produk-image {
        height: 280px;
    }

    .detail-produk-info h1 {
        font-size: 27px;
    }

    .detail-produk-actions {
        flex-direction: column;

        align-items: stretch;
    }

}

/* =========================================================
   NAVBAR MENU
========================================================= */

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 2px;

    white-space: nowrap;
}


/* =========================================================
   LINK MENU
========================================================= */

.nav-menu a {
    position: relative;

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

    padding: 9px 10px;

    color: #ffffff;

    text-decoration: none;

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

    white-space: nowrap;

    border-radius: 0;

    transition: color 0.25s ease;
}


/* =========================================================
   HOVER
========================================================= */

.nav-menu a:hover {
    color: #ffffff;
}


/* =========================================================
   MENU AKTIF
   HANYA GARIS BAWAH
========================================================= */

.nav-menu a.active {
    background: transparent !important;

    color: #ffffff !important;

    font-weight: 700 !important;
}


/* GARIS AKTIF */

.nav-menu a.active::after {
    content: "";

    position: absolute;

    left: 10px;
    right: 10px;

    bottom: 3px;

    height: 2px;

    background: #ffffff;

    border-radius: 5px;
}

/* =========================================================
   DETAIL BERITA
========================================================= */

.detail-berita-page {
    background: #f6f9f7;
    padding: 55px 0 90px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.berita-breadcrumb {
    max-width: 900px;

    margin: 0 auto 25px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #7a8581;

    font-size: 14px;
}

.berita-breadcrumb a {
    color: #267f96;

    text-decoration: none;

    font-weight: 700;
}

.berita-breadcrumb span:last-child {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}



/* =========================================================
   ARTIKEL
========================================================= */

.artikel {
    max-width: 900px;

    margin: 0 auto;

    background: #ffffff;

    border: 1px solid #e2e9e6;

    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 6px 25px rgba(0, 0, 0, 0.05);
}



/* =========================================================
   HEADER ARTIKEL
========================================================= */

.artikel-header {
    padding: 40px 45px 30px;
}

.artikel-kategori {
    color: #267f96;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


/* =========================================================
   JUDUL
========================================================= */

.artikel-judul {
    margin: 12px 0 15px;

    color: #267f96;

    font-size: 40px;

    line-height: 1.25;
}



/* =========================================================
   META
========================================================= */

.artikel-meta {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #7a8581;

    font-size: 14px;
}



/* =========================================================
   FOTO
========================================================= */

.artikel-image {
    width: 100%;

    height: 480px;

    background: #e6efed;

    overflow: hidden;
}

.artikel-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}



/* =========================================================
   RINGKASAN
========================================================= */

.artikel-ringkasan {
    margin: 35px 45px 0;

    padding: 20px 22px;

    background: #f1f7f5;

    border-left: 4px solid #267f96;

    color: #40504b;

    font-size: 17px;

    line-height: 1.7;
}



/* =========================================================
   ISI
========================================================= */

.artikel-isi {
    padding: 30px 45px 20px;
}

.artikel-isi p {
    margin: 0 0 22px;

    color: #4f5c58;

    font-size: 17px;

    line-height: 1.9;

    text-align: justify;
}



/* =========================================================
   INFORMASI BERITA
========================================================= */

.artikel-informasi {
    margin: 10px 45px 40px;

    padding-top: 25px;

    border-top: 1px solid #e4ebe8;

    display: grid;

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

    gap: 20px;
}

.artikel-informasi-item {
    display: flex;

    flex-direction: column;

    gap: 6px;
}

.artikel-informasi-item span {
    color: #89938f;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.artikel-informasi-item strong {
    color: #267f96;

    font-size: 14px;
}



/* =========================================================
   BERITA TIDAK DITEMUKAN
========================================================= */

.berita-tidak-ditemukan {
    max-width: 700px;

    margin: 30px auto;

    padding: 70px 30px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e2e9e6;

    border-radius: 12px;
}

.berita-error-icon {
    width: 55px;

    height: 55px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #eaf3f1;

    color: #267f96;

    font-size: 28px;

    font-weight: 700;
}

.berita-tidak-ditemukan h1 {
    margin: 0 0 10px;

    color: #267f96;
}

.berita-tidak-ditemukan p {
    margin: 0;

    color: #68736e;

    line-height: 1.7;
}

.btn-kembali-berita {
    display: inline-block;

    margin-top: 25px;

    padding: 11px 20px;

    background: #267f96;

    color: #ffffff;

    text-decoration: none;

    border-radius: 6px;

    font-weight: 600;
}

.btn-kembali-berita:hover {
    background: #206b80;
}



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

@media (max-width: 700px) {

    .detail-berita-page {
        padding: 35px 0 60px;
    }


    .artikel-header {
        padding: 28px 22px 25px;
    }


    .artikel-judul {
        font-size: 29px;
    }


    .artikel-image {
        height: 280px;
    }


    .artikel-ringkasan {
        margin: 25px 22px 0;

        font-size: 15px;
    }


    .artikel-isi {
        padding: 25px 22px 10px;
    }


    .artikel-isi p {
        font-size: 15px;

        line-height: 1.8;

        text-align: left;
    }


    .artikel-informasi {
        margin: 10px 22px 30px;

        grid-template-columns: 1fr;

        gap: 15px;
    }


    .berita-breadcrumb {
        margin-left: 20px;

        margin-right: 20px;
    }

}

/* =========================================================
   HAMBURGER MENU
========================================================= */

.menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    padding: 8px;

    border: none;

    background: transparent;

    cursor: pointer;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;
}


/* GARIS HAMBURGER */

.menu-toggle span {
    display: block;

    width: 25px;
    height: 3px;

    background: #ffffff;

    border-radius: 3px;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


/* =========================================================
   ANIMASI HAMBURGER MENJADI X
========================================================= */

.menu-toggle.active span:nth-child(1) {
    transform:
        translateY(8px)
        rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform:
        translateY(-8px)
        rotate(-45deg);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .navbar .container {

        position: relative;

        display: flex;

        align-items: center;

        justify-content: space-between;
    }


    /* LOGO */

    .brand {
        min-width: 0;
    }


    .brand-text {
        min-width: 0;
    }


    .brand-name {
        font-size: 18px;
    }


    .brand-location {
        font-size: 11px;

        white-space: nowrap;
    }


    /* TOMBOL HAMBURGER */

    .menu-toggle {
        display: flex;

        flex-shrink: 0;
    }


    /* =====================================================
       MENU
    ===================================================== */

    .nav-menu {

        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        z-index: 9999;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 10px;

        background: #267f96;

        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.15);
    }


    /* MENU TERBUKA */

    .nav-menu.show {
        display: flex;
    }


    /* LINK */

    .nav-menu a {

        display: block;

        width: 100%;

        padding: 14px 16px;

        color: #ffffff !important;

        text-decoration: none;

        font-size: 15px;

        font-weight: 600;

        border-radius: 6px;

        white-space: nowrap;

        text-align: left;

        box-sizing: border-box;

        transition:
            background 0.2s ease;
    }


    /* HOVER */

    .nav-menu a:hover {

        background: 
            rgba(255, 255, 255, 0.12);
    }


    /* ACTIVE */

    .nav-menu a.active {

        background:
            rgba(255, 255, 255, 0.18);

        color: #ffffff !important;
    }


    /* HILANGKAN EFEK GARIS LAMA */

    .nav-menu a.active::after {

        display: none !important;
    }

}

/* =========================================================
   NAVBAR FINAL
========================================================= */

.navbar {
    width: 100%;
    background: #267f96;
    position: relative;
    z-index: 9999;
}


/* =========================================================
   CONTAINER
========================================================= */

.navbar-container {
    width: 100%;
    max-width: none;

    margin: 0;

    padding: 0 20px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* =========================================================
   BRAND
========================================================= */

.navbar .brand {
    display: flex;
    align-items: center;

    text-decoration: none;

    flex-shrink: 0;
}


/* =========================================================
   LOGO
========================================================= */

.navbar .logo-desa {
    width: 80px;
    height: 80px;

    object-fit: contain;

    display: block;

    margin-right: 0px;

    flex-shrink: 0;
}


/* =========================================================
   TEXT DESA
========================================================= */

.navbar .brand-text {
    display: flex;
    flex-direction: column;
}


.navbar .brand-name {
    color: #ffffff;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.2;

    white-space: nowrap;
}


.navbar .brand-location {
    color: #ffffff;

    font-size: 11px;

    font-weight: 500;

    margin-top: 4px;

    line-height: 1.2;

    white-space: nowrap;
}


/* =========================================================
   MENU DESKTOP
========================================================= */

.navbar .nav-menu {
    display: flex;

    align-items: center;

    gap: 3px;

    margin: 0;

    padding: 0;

    background: transparent;
}


.navbar .nav-menu a {
    display: block;

    padding: 10px 9px;

    color: #ffffff !important;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    border-radius: 5px;

    transition: 0.2s ease;
}


.navbar .nav-menu a:hover {
    background: rgba(255, 255, 255, 0.10);
}


.navbar .nav-menu a.active {
    background: transparent;

    color: #ffffff !important;
}


/* HILANGKAN GARIS LAMA */

.navbar .nav-menu a::after,
.navbar .nav-menu a.active::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   HAMBURGER DESKTOP
   HARUS HILANG
========================================================= */

.navbar .menu-toggle {
    display: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    /* -----------------------------------------------------
       NAVBAR
    ----------------------------------------------------- */

    .navbar-container {

        width: 100%;

        max-width: none;

        min-height: 80px;

        margin: 0;

        padding: 8px 12px;

        position: relative;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       BRAND KIRI
    ----------------------------------------------------- */

    .navbar .brand {

        display: flex;

        align-items: center;

        margin: 0;

        padding: 0;

        max-width: calc(100% - 60px);
    }


    /* -----------------------------------------------------
       LOGO
    ----------------------------------------------------- */

    .navbar .logo-desa {

        width: 52px;

        height: 52px;

        margin-right: 8px;
    }


    /* -----------------------------------------------------
       NAMA
    ----------------------------------------------------- */

    .navbar .brand-name {

        font-size: 18px;

        line-height: 1.2;
    }


    .navbar .brand-location {

        font-size: 10px;

        margin-top: 3px;

        line-height: 1.2;
    }


    /* =====================================================
       HAMBURGER
       INI YANG MEMBUATNYA KE UJUNG KANAN
    ===================================================== */

    .navbar .menu-toggle {

        display: flex;

        position: absolute;

        top: 50%;

        right: 12px;

        transform: translateY(-50%);

        width: 42px;

        height: 42px;

        margin: 0;

        padding: 8px;

        border: none;

        background: transparent;

        cursor: pointer;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 5px;

        z-index: 10001;
    }


    /* GARIS HAMBURGER */

    .navbar .menu-toggle span {

        display: block;

        width: 25px;

        height: 3px;

        background: #ffffff;

        border-radius: 3px;

        transition: 0.3s ease;
    }


    /* =====================================================
       ANIMASI HAMBURGER → X
    ===================================================== */

    .navbar .menu-toggle.active span:nth-child(1) {

        transform:
            translateY(8px)
            rotate(45deg);
    }


    .navbar .menu-toggle.active span:nth-child(2) {

        opacity: 0;
    }


    .navbar .menu-toggle.active span:nth-child(3) {

        transform:
            translateY(-8px)
            rotate(-45deg);
    }


    /* =====================================================
       MENU MOBILE
    ===================================================== */

    .navbar .nav-menu {

        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        width: 100%;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 2px;

        margin: 0;

        padding: 8px;

        box-sizing: border-box;

        background: #267f96;

        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.18);

        z-index: 10000;
    }


    /* MENU DIBUKA */

    .navbar .nav-menu.show {

        display: flex;
    }


    /* LINK MOBILE */

    .navbar .nav-menu a {

        width: 100%;

        min-height: 45px;

        padding: 12px 16px;

        box-sizing: border-box;

        display: flex;

        align-items: center;

        justify-content: flex-start;

        color: #ffffff !important;

        background: transparent;

        font-size: 15px;

        font-weight: 600;

        border-radius: 5px;
    }


    .navbar .nav-menu a:hover {

        background:
            rgba(255, 255, 255, 0.12);
    }


    .navbar .nav-menu a.active {

        background:
            rgba(255, 255, 255, 0.15);
    }

}

/* =========================================================
   FIX POSISI LOGO MOBILE
========================================================= */

@media screen and (max-width: 700px) {

    body {
        overflow-x: hidden;
    }

    .navbar {
        width: 100%;
    }

    .navbar .navbar-container {
        width: 100vw !important;
        max-width: 100vw !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 5px !important;
        padding-right: 5px !important;

        box-sizing: border-box;

        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }

    .navbar .brand {
        margin-left: 0 !important;
        margin-right: auto !important;

        padding: 0 !important;

        transform: none !important;

        position: static !important;

        display: flex !important;
        align-items: center;
    }

    .navbar .logo-desa {
        margin-left: 0 !important;
        margin-right: 8px !important;

        width: 52px;
        height: 52px;
    }

    .navbar .menu-toggle {
        position: absolute !important;

        right: 5px !important;
        left: auto !important;

        top: 50% !important;

        transform: translateY(-50%) !important;
    }
}

/* =========================================================
   PROFIL DESA
========================================================= */

.profil-page {
    padding: 60px 0;
}

.profil-header {
    text-align: center;
    margin-bottom: 40px;
}

.profil-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.profil-header h1 {
    margin: 0 0 10px;
}

.profil-header p {
    margin: 0;
    line-height: 1.6;
}

.profil-image {
    max-width: 900px;
    margin: 0 auto 45px;
}

.profil-image img {
    width: 100%;
    max-height: 450px;
    object-fit: cover;
    border-radius: 15px;
    display: block;
}

.profil-section {
    max-width: 900px;
    margin: 0 auto 40px;
}

.profil-section h2 {
    margin-bottom: 15px;
}

.profil-text {
    line-height: 1.8;
}

.visi-box,
.misi-box {
    padding: 25px;
    border-radius: 12px;
    line-height: 1.8;
}

.visi-box p {
    margin: 0;
}

.misi-box {
    white-space: pre-line;
}

.profil-lokasi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.lokasi-card {
    padding: 20px;
    border-radius: 10px;
}

.lokasi-card span {
    display: block;
    font-size: 13px;
    margin-bottom: 7px;
}

.lokasi-card strong {
    display: block;
}

@media (max-width: 700px) {

    .profil-page {
        padding: 40px 0;
    }

    .profil-lokasi {
        grid-template-columns: 1fr;
    }

    .profil-image img {
        max-height: 300px;
    }

}

/* =========================
   GALERI LIGHTBOX
========================= */


.galeri-img{

    cursor:pointer;

    transition:.3s;

}


.galeri-img:hover{

    transform:scale(1.03);

}



/* BACKGROUND PREVIEW */

.lightbox{

    display:none;

    position:fixed;

    z-index:9999;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:
    rgba(0,0,0,.85);

    justify-content:center;

    align-items:center;

}



.lightbox img{

    max-width:85%;

    max-height:85%;

    border-radius:15px;

    box-shadow:
    0 10px 40px rgba(0,0,0,.5);

}



.lightbox span{

    position:absolute;

    top:30px;

    right:50px;

    color:white;

    font-size:45px;

    cursor:pointer;

}



/* =========================================================
   GALERI DESA
========================================================= */

.galeri-page {
    padding: 60px 0;
}

.galeri-header {
    text-align: center;
    margin-bottom: 40px;
}

.galeri-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.galeri-header h1 {
    margin: 0 0 12px;
}

.galeri-header p {
    margin: 0 auto;
    max-width: 700px;
    line-height: 1.7;
}

.galeri-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.galeri-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

.galeri-image {
    width: 100%;
    height: 230px;
    overflow: hidden;
}

.galeri-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.galeri-card:hover .galeri-image img {
    transform: scale(1.05);
}

.galeri-content {
    padding: 18px;
}

.galeri-content h3 {
    margin: 0 0 8px;
}

.galeri-content p {
    margin: 0;
    line-height: 1.6;
}

.galeri-kosong {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 20px;
}

.galeri-kosong h3 {
    margin-bottom: 8px;
}

.galeri-kosong p {
    margin: 0;
}


@media (max-width: 800px) {

    .galeri-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 550px) {

    .galeri-page {
        padding: 40px 0;
    }

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

    .galeri-image {
        height: 220px;
    }

}

/* ==========================================
   FINAL FIX NAVBAR
========================================== */

.navbar {
    height: 75px !important;
    min-height: 75px !important;
    padding: 0 !important;
}


.navbar-container {

    height: 75px !important;
    min-height: 75px !important;

    padding: 0 20px !important;

    display:flex !important;

    align-items:center !important;

}


/* LOGO */

.navbar .logo-desa {

    width:55px !important;

    height:55px !important;

    max-width:55px !important;

    max-height:55px !important;

    object-fit:contain !important;

}



/* TEXT */

.navbar .brand-name {

    font-size:18px !important;

    line-height:1.2 !important;

}


.navbar .brand-location {

    font-size:10px !important;

    line-height:1.2 !important;

}



/* MENU */

.navbar .nav-menu a {

    font-size:16px !important;

    padding:8px 10px !important;

}

/* =========================================================
   FINAL FIX - NAVBAR, LOGO, HERO
   Perbaikan konflik CSS terakhir
========================================================= */

/* Reset gambar agar logo tidak membesar */
.navbar .brand-logo img {
    width: 100px !important;
    height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    object-fit: contain !important;
}

/* Navbar kembali normal */
.navbar {
    height: auto !important;
    padding: 12px 0 !important;
}

.navbar-container {
    min-height: 70px !important;
    height: auto !important;
}

/* Brand */
.brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.brand-text {
    display: flex !important;
    flex-direction: column !important;
}

.brand-name {
    font-size: 18px !important;
    line-height: 1.2 !important;
}

.brand-location {
    font-size: 12px !important;
}

/* Menu */
.nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.nav-menu a {
    font-size: 13px !important;
    padding: 8px 10px !important;
}


/* Hero */
.hero {
    min-height: 520px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    background-size: cover !important;
    background-position: center !important;
}

.hero-content {
    width: 100%;
}

.hero h1 {
    font-size: 52px !important;
}


/* Hindari logo global merusak gambar konten */
img {
    max-width: 100%;
    height: auto;
}

.sambutan-foto img,
.galeri-item img,
.berita-image img,
.produk-image img {
    height: 100%;
}

:root {

    --primary: #267f96;
    --secondary: #7ed957;
    --dark: #1f2937;
    --text: #444;
    --background: #f7faf9;
    --white: #ffffff;

}

/* HERO MODERN */

.hero {

    min-height: 600px;

    background:
   
    url('../images/hero_desa.jpeg');

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

}



.hero-content{

    color:white;

    max-width:650px;

}



.hero-subtitle{

    font-size:16px;

    letter-spacing:2px;

    font-weight:600;

}



.hero h1{

    font-size:64px;

    margin:20px 0;

}



.hero-description{

    font-size:20px;

}

/* =====================================
   GALERI LIGHTBOX
===================================== */


.galeri-img{

    cursor:pointer;

    transition:.3s;

}


.galeri-img:hover{

    transform:scale(1.03);

}



/* BACKGROUND */

.lightbox{

    display:none;

    position:fixed;

    z-index:9999;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.85);

    justify-content:center;

    align-items:center;

}



/* GAMBAR BESAR */

.lightbox img{

    max-width:85%;

    max-height:85%;

    border-radius:15px;

    box-shadow:
    0 10px 40px rgba(0,0,0,.5);

    animation:
    zoom .3s ease;

}



/* TOMBOL CLOSE */

.lightbox span{

    position:absolute;

    top:30px;

    right:50px;

    color:white;

    font-size:45px;

    cursor:pointer;

}



@keyframes zoom{


from{

    transform:scale(.7);

}


to{

    transform:scale(1);

}


}

/* =========================================================
   PEMERINTAHAN DESA
   GRID 4 KOLOM
========================================================= */

.sotk-grid-4 {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 25px;

    justify-content: center;

    align-items: stretch;
}


/* =========================================================
   KARTU PEMERINTAHAN
========================================================= */

.sotk-grid-4 .sotk-card {
    width: 100%;
}


/* =========================================================
   BARIS TERAKHIR
   Agar jumlah yang tidak mencapai 4 tetap terlihat
   lebih rapi di tengah
========================================================= */

.sotk-grid-4 {
    justify-items: stretch;
}


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

@media (max-width: 992px) {

    .sotk-grid-4 {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;

    }

}


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

@media (max-width: 600px) {

    .sotk-grid-4 {

        grid-template-columns: 1fr;

        gap: 20px;

    }

}

/* =========================================================
   PERBAIKAN TEKS PROFIL DESA
========================================================= */

.profile-card,
.profil-card,
.sejarah-card,
.sejarah-section,
.profile-content {

    max-width: 100%;

    box-sizing: border-box;

}


/* Semua paragraf di halaman profil */

.profile-card p,
.profil-card p,
.sejarah-card p,
.sejarah-section p,
.profile-content p {

    max-width: 100%;

    box-sizing: border-box;

    line-height: 1.8;

    white-space: normal;

    overflow-wrap: anywhere;

    word-wrap: break-word;

    word-break: normal;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .profile-card,
    .profil-card,
    .sejarah-card,
    .sejarah-section,
    .profile-content {

        width: 100%;

        max-width: 100%;

        box-sizing: border-box;

        overflow: hidden;

    }


    .profile-card p,
    .profil-card p,
    .sejarah-card p,
    .sejarah-section p,
    .profile-content p {

        width: 100%;

        max-width: 100%;

        font-size: 14px;

        line-height: 1.8;

        white-space: normal;

        overflow-wrap: anywhere;

        word-break: normal;

    }

}

/* =========================================================
   TOMBOL LIHAT SEMUA POTENSI
========================================================= */

.potensi-button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 35px;
}


.btn-potensi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 13px 25px;

    background: #267f96;
    color: #ffffff !important;

    border-radius: 8px;

    text-decoration: none !important;

    font-size: 14px;
    font-weight: 600;

    transition: all 0.3s ease;
}


.btn-potensi span {
    font-size: 18px;
    line-height: 1;
}


.btn-potensi:hover {
    background: #206d81;
    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow: 0 6px 15px rgba(38, 127, 150, 0.25);
}

/* =========================================================
   MENU NAVBAR
========================================================= */

.nav-menu {
    display: flex !important;

    align-items: center !important;

    gap: 16px !important;

    margin-left: auto !important;
}


/* Link menu */
.nav-menu a {
    position: relative !important;

    display: inline-flex !important;

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

    padding: 12px 10px !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    line-height: 1 !important;

    color: white !important;

    text-decoration: none !important;

    background: transparent !important;

    border-radius: 0 !important;

    transition:
        color 0.2s ease,
        opacity 0.2s ease !important;
}


/* =========================================================
   HOVER
========================================================= */

.nav-menu a:hover {
    background: transparent !important;

    color: white !important;

    opacity: 0.8 !important;
}


/* =========================================================
   MENU AKTIF
   GARIS BAWAH
========================================================= */

.nav-menu a.active {

    background: transparent !important;

    color: #ffffff !important;

    box-shadow: none !important;

    border-bottom: 2px solid #ffffff !important;

    padding-bottom: 10px !important;

}


/* Hilangkan pseudo element jika ada CSS lama */

.nav-menu a.active::after {

    content: none !important;

}

/* =========================================================
   GESER LOGO FOOTER KE KIRI
   Ukuran logo TIDAK DIUBAH
========================================================= */

.footer-desa {
    position: relative !important;
    left: -110px !important;
}


/* =========================================================
   MOBILE
   Kembalikan posisi footer agar tidak terpotong
========================================================= */

@media (max-width: 650px) {

    .footer-desa {
        position: relative !important;

        left: 0 !important;

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        box-sizing: border-box !important;
    }

}



/* =========================================================
   MOBILE NAVBAR
========================================================= */

@media (max-width: 768px) {

    .navbar {
        height: auto !important;
        min-height: 75px !important;
        padding: 10px 0 !important;
    }

    .navbar-container {
        min-height: 65px !important;
        display: flex !important;
        align-items: center !important;
        position: relative;
    }

    /* Logo tetap normal */
    .navbar .logo-desa {
        width: 58px !important;
        height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
        object-fit: contain !important;
    }

    .brand {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .brand-name {
        font-size: 17px !important;
    }

    .brand-location {
        font-size: 11px !important;
    }

    /* Tampilkan hamburger */
    .nav-toggle {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Menu mobile */
    .nav-menu {
        display: none !important;

        width: 100% !important;

        flex-direction: column !important;
        align-items: center !important;

        gap: 0 !important;

        margin-left: 0 !important;

        padding: 10px 0 !important;
    }

    /* Saat menu dibuka */
    .nav-menu.active {
        display: flex !important;
    }

    .nav-menu a {
        width: 100% !important;

        padding: 16px 10px !important;

        font-size: 16px !important;
        font-weight: 700 !important;

        text-align: center !important;
    }

    /* Garis halaman aktif */
    .nav-menu a.active::after {
        left: 8% !important;
        right: 8% !important;
        bottom: 4px !important;
        height: 2px !important;
    }
}

/* =========================================================
   HAMBURGER MENU
========================================================= */

/* =========================================================
   DESKTOP
   Hamburger disembunyikan
========================================================= */

.navbar .nav-toggle {
    display: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 768px) {

    .navbar .nav-toggle {
        width: 38px !important;
        height: 38px !important;

        display: flex !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        padding: 7px !important;
        margin-left: auto !important;

        background: transparent !important;

        border: 1px solid rgba(255, 255, 255, 0.7) !important;

        border-radius: 6px !important;

        cursor: pointer !important;

        flex-shrink: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       TIGA GARIS HAMBURGER
    ===================================================== */

    .navbar .nav-toggle span {
        display: block !important;

        width: 22px !important;
        height: 2px !important;

        background-color: #ffffff !important;

        border-radius: 3px !important;

        opacity: 1 !important;

        transition: all 0.25s ease !important;
    }


    /* =====================================================
       HOVER
    ===================================================== */

    .navbar .nav-toggle:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }


    /* =====================================================
       MENU TERBUKA → MENJADI X
    ===================================================== */

    .navbar .nav-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .navbar .nav-toggle.active span:nth-child(2) {
        opacity: 0 !important;
    }

    .navbar .nav-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }

}