/* =====================================================
   DASHBOARD DESA SIRNAMEKAR
===================================================== */
/* ===== VIDEO BACKGROUND ===== */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    object-fit: cover;
}

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

.hero-home {
    position: relative;

    min-height: 92vh;

    display: flex;
    align-items: center;

    overflow: hidden;

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

    color: white;
}


.hero-overlay {
    position: absolute;
    inset: 0;
    background: transparent;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .45) 0%,
            rgba(0, 0, 0, .20) 55%,
            rgba(0, 0, 0, .05) 100%
        );
}


.hero-content {
    position: relative;

    z-index: 2;

    padding: 130px 0 95px;
}


.hero-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 22px;

    padding: 9px 17px;

    border:
        1px solid rgba(255,255,255,.25);

    border-radius: 30px;

    background:
        rgba(255,255,255,.12);

    backdrop-filter:
        blur(8px);

    font-size: 12px;

    font-weight: 700;
}


.hero-badge i {
    color: #f0c040;
}


.hero-content h1 {
    margin-bottom: 16px;

    color: white;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        clamp(2.4rem,6vw,4.5rem);

    font-weight: 900;

    line-height: 1.08;

    text-shadow:
        0 4px 30px rgba(0,0,0,.25);
}


.hero-content h1 span {
    display: block;

    color:
        #f0c040;
}


.hero-location {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 17px;

    color:
        rgba(255,255,255,.78);

    font-size: 14px;
}


.hero-location i {
    color:
        #f0c040;
}


.hero-description {
    max-width: 580px;

    margin-bottom: 34px;

    color:
        rgba(255,255,255,.88);

    font-size: 16px;

    line-height: 1.85;
}


.hero-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 13px;
}


.btn-main,
.btn-outline-custom {
    display: inline-flex;

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

    gap: 8px;

    padding:
        13px 25px;

    border-radius:
        12px;

    font-size:
        13px;

    font-weight:
        700;

    text-decoration: none;

    transition:
        .3s;
}


.btn-main {
    border: none;

    background:
        #e6a817;

    color: white;

    box-shadow:
        0 8px 25px
        rgba(230,168,23,.25);
}


.btn-main:hover {
    transform:
        translateY(-3px);

    background:
        #c8900f;

    color: white;
}


.btn-outline-custom {
    border:
        1px solid rgba(255,255,255,.38);

    color: white;

    background:
        rgba(255,255,255,.08);

    backdrop-filter:
        blur(8px);
}


.btn-outline-custom:hover {
    border-color: white;

    background:
        rgba(255,255,255,.18);

    color: white;

    transform:
        translateY(-3px);
}


/* SCROLL */

.hero-scroll {
    position: absolute;

    left: 50%;
    bottom: 30px;

    z-index: 3;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    color:
        rgba(255,255,255,.60);

    font-size: 10px;

    letter-spacing:
        1.5px;

    animation:
        dashboardBounce 2s infinite;
}


.hero-scroll i {
    font-size: 18px;
}


@keyframes dashboardBounce {

    0%,
    100% {
        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(6px);
    }
}


/* ================= STATISTIK ================= */

.statistic-wrapper {
    position: relative;

    z-index: 10;

    margin-top:
        -55px;
}


.stat-row {
    display: grid;

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

    gap: 20px;

    padding:
        25px 30px;

    border-radius:
        22px;

    background:
        white;

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.12);
}


.stat-item {
    display: flex;

    align-items: center;

    gap: 14px;
}


.stat-icon-box {
    width: 56px;
    height: 56px;

    display: flex;

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

    flex-shrink: 0;

    border-radius:
        15px;

    color: white;

    font-size: 22px;
}


.stat-green {
    background:
        linear-gradient(135deg,#176b3a,#2db65e);
}


.stat-orange {
    background:
        linear-gradient(135deg,#e67e22,#f3a124);
}


.stat-blue {
    background:
        linear-gradient(135deg,#2980b9,#3498db);
}


.stat-purple {
    background:
        linear-gradient(135deg,#8e44ad,#9b59b6);
}


.stat-item h3 {
    margin: 0;

    color:
        #18221c;

    font-size:
        25px;

    font-weight:
        800;
}


.stat-item p {
    margin: 4px 0 0;

    color:
        #8a948d;

    font-size:
        12px;
}


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

.section-space {
    padding:
        90px 0;
}


.bg-soft {
    background:
        #f5faf7;
}


.section-label {
    display:
        inline-block;

    margin-bottom:
        9px;

    color:
        #e6a817;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2.3px;

    text-transform:
        uppercase;
}


.section-title {
    margin-bottom:
        16px;

    color:
        #142119;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        clamp(1.7rem,3vw,2.4rem);

    font-weight:
        800;

    line-height:
        1.25;
}


.section-title span {
    color:
        #176b3a;
}


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

.profil-card {
    overflow:
        hidden;

    border:
        1px solid #dce9e0;

    border-radius:
        23px;

    background:
        white;

    box-shadow:
        0 15px 45px
        rgba(20,70,40,.08);
}


.profil-image-wrap {
    position:
        relative;
}


.profil-card img {
    width:
        100%;

    height:
        310px;

    display:
        block;

    object-fit:
        cover;
}


.profil-image-badge {
    position:
        absolute;

    left:
        18px;

    bottom:
        18px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        8px 13px;

    border-radius:
        25px;

    background:
        rgba(8,70,37,.92);

    color:
        white;

    font-size:
        11px;

    font-weight:
        700;
}


.profil-body {
    padding:
        30px;
}


.profil-body p {
    color:
        #68736c;

    font-size:
        14px;

    line-height:
        1.85;
}


.more-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        7px;

    color:
        #176b3a;

    font-size:
        13px;

    font-weight:
        700;

    text-decoration:
        none;
}


.more-link:hover {
    color:
        #e6a817;
}


/* ================= DUSUN ================= */

.dusun-card {
    position:
        relative;

    min-height:
        145px;

    padding:
        22px;

    overflow:
        hidden;

    border:
        1px solid #dfe9e2;

    border-radius:
        18px;

    background:
        white;

    transition:
        .3s;
}


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

    box-shadow:
        0 15px 35px
        rgba(20,70,40,.10);
}


.dusun-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        15px;
}


.dusun-top > span {
    color:
        #9aa49e;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.5px;
}


.dusun-emoji {
    font-size:
        25px;

    line-height:
        1;
}


.dusun-bottom {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}


.dusun-icon {
    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border-radius:
        13px;

    color:
        white;

    font-size:
        20px;
}


.dusun-green {
    background:
        linear-gradient(135deg,#176b3a,#31aa5d);
}


.dusun-orange {
    background:
        linear-gradient(135deg,#e67e22,#f3a24d);
}


.dusun-blue {
    background:
        linear-gradient(135deg,#2980b9,#4aa3d8);
}


.dusun-purple {
    background:
        linear-gradient(135deg,#8e44ad,#ab68c1);
}


.dusun-bottom h4 {
    margin:
        0 0 4px;

    color:
        #18221c;

    font-size:
        17px;

    font-weight:
        750;
}


.dusun-bottom p {
    margin:
        0;

    color:
        #89938c;

    font-size:
        11px;
}


/* ================= GIS ================= */

.gis-description {
    margin-bottom:
        23px;

    color:
        #68736c;

    font-size:
        14px;

    line-height:
        1.85;
}


.gis-legend-list {
    display:
        grid;

    gap:
        10px;

    margin-bottom:
        25px;
}


.gis-legend-list > div {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #566158;

    font-size:
        13px;
}


.legend-triangle {
    width:
        0;

    height:
        0;

    border-left:
        7px solid transparent;

    border-right:
        7px solid transparent;

    border-bottom:
        13px solid;
}


.legend-triangle.red {
    border-bottom-color:
        #e74c3c;
}


.legend-triangle.blue {
    border-bottom-color:
        #3498db;
}


.legend-triangle.green {
    border-bottom-color:
        #27ae60;
}


.legend-triangle.orange {
    border-bottom-color:
        #e67e22;
}


.peta-card {
    overflow:
        hidden;

    border:
        1px solid #dce9e0;

    border-radius:
        22px;

    background:
        white;

    box-shadow:
        0 18px 45px
        rgba(20,70,40,.09);
}


.peta-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        18px 21px;

    background:
        linear-gradient(
            135deg,
            #176b3a,
            #2d8a4e
        );

    color:
        white;
}


.peta-header h5 {
    margin:
        0;

    font-size:
        15px;

    font-weight:
        700;
}


.peta-header h5 i {
    color:
        #d9f0df;
}


.peta-header small {
    display:
        block;

    margin-top:
        3px;

    color:
        rgba(255,255,255,.70);

    font-size:
        11px;
}


.peta-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        8px 13px;

    border-radius:
        20px;

    background:
        #e6a817;

    color:
        white;

    font-size:
        11px;

    font-weight:
        700;

    text-decoration:
        none;

    white-space:
        nowrap;
}


#peta-beranda {
    width:
        100%;

    height:
        410px;
}


.gis-marker {
    width:
        0;

    height:
        0;

    border-left:
        9px solid transparent;

    border-right:
        9px solid transparent;

    border-bottom:
        20px solid;

    filter:
        drop-shadow(0 2px 4px rgba(0,0,0,.45));
}


.p-foto {
    width:
        100%;

    height:
        130px;

    display:
        block;

    object-fit:
        cover;
}


.p-nofoto {
    width:
        100%;

    height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #176b3a,
            #2d8a4e
        );

    font-size:
        28px;
}


.p-body {
    padding:
        10px 13px 13px;
}


.p-judul {
    margin-bottom:
        7px;

    color:
        #176b3a;

    font-size:
        12px;

    font-weight:
        800;

    line-height:
        1.4;
}


.p-btn {
    display:
        inline-block;

    padding:
        5px 12px;

    border-radius:
        20px;

    background:
        #176b3a;

    color:
        white !important;

    font-size:
        10px;

    font-weight:
        700;

    text-decoration:
        none;
}


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

.government-section {
    position:
        relative;

    overflow:
        hidden;

    padding:
        90px 0;

    background:
        linear-gradient(
            135deg,
            #073d20,
            #176d3b
        );
}


.government-section::after {
    content:
        "";

    position:
        absolute;

    width:
        370px;

    height:
        370px;

    right:
        -170px;

    bottom:
        -190px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.04);
}


.government-label {
    color:
        rgba(255,255,255,.62);
}


.government-description {
    max-width:
        520px;

    margin:
        auto;

    color:
        rgba(255,255,255,.62);

    font-size:
        14px;
}


.official-card {
    padding:
        30px 22px;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius:
        20px;

    background:
        rgba(255,255,255,.08);

    text-align:
        center;

    backdrop-filter:
        blur(8px);

    transition:
        .3s;
}


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

    background:
        rgba(255,255,255,.13);
}


.official-photo {
    width:
        110px;

    height:
        110px;

    margin:
        0 auto 17px;

    overflow:
        hidden;

    border:
        3px solid #e6a817;

    border-radius:
        18px;
}


.official-photo img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.official-card .jabatan {
    margin-bottom:
        5px;

    color:
        rgba(255,255,255,.58);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.official-card h4 {
    margin:
        0;

    color:
        white;

    font-size:
        17px;

    font-weight:
        800;
}


.btn-light-custom {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        13px 24px;

    border:
        1px solid rgba(255,255,255,.25);

    border-radius:
        11px;

    background:
        rgba(255,255,255,.10);

    color:
        white;

    font-size:
        13px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        .3s;
}


.btn-light-custom:hover {
    background:
        rgba(255,255,255,.18);

    color:
        white;

    transform:
        translateY(-3px);
}


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

.potential-home {
    background:
        white;
}


.home-potential-image {
    position:
        relative;
}


.home-potential-image img {
    width:
        100%;

    height:
        430px;

    object-fit:
        cover;

    border-radius:
        24px;

    box-shadow:
        0 20px 50px
        rgba(20,70,40,.12);
}


.potential-floating {
    position:
        absolute;

    left:
        20px;

    bottom:
        20px;

    padding:
        13px 17px;

    border-radius:
        13px;

    background:
        rgba(9,67,35,.94);

    color:
        white;
}


.potential-floating span,
.potential-floating strong {
    display:
        block;
}


.potential-floating span {
    color:
        rgba(255,255,255,.64);

    font-size:
        10px;
}


.potential-floating strong {
    margin-top:
        3px;

    font-size:
        16px;
}


.home-potential-text {
    color:
        #68736c;

    font-size:
        14px;

    line-height:
        1.9;
}


.btn-potential {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        9px;

    padding:
        12px 19px;

    border-radius:
        10px;

    background:
        #176b3a;

    color:
        white;

    font-size:
        13px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        .3s;
}


.btn-potential:hover {
    color:
        white;

    background:
        #0d542c;

    transform:
        translateY(-2px);
}


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

.section-heading {
    max-width:
        720px;

    margin-bottom:
        35px;
}


.section-heading > p {
    margin:
        0;

    color:
        #718078;

    line-height:
        1.8;
}


.home-news-card {
    height:
        100%;

    padding:
        28px;

    border:
        1px solid #dfe9e2;

    border-radius:
        18px;

    background:
        white;

    transition:
        .3s;
}


.home-news-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 15px 40px
        rgba(20,70,40,.09);
}


.home-news-icon {
    width:
        55px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        16px;

    border-radius:
        15px;

    background:
        #eaf5ed;

    font-size:
        25px;
}


.home-news-card > span {
    color:
        #176b3a;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.home-news-card h4 {
    margin:
        7px 0 9px;

    color:
        #17221b;

    font-size:
        19px;

    font-weight:
        750;
}


.home-news-card p {
    color:
        #718078;

    font-size:
        13px;

    line-height:
        1.7;
}


.home-news-card a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        5px;

    color:
        #176b3a;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;
}


/* ================= KONTAK ================= */

.contact-section {
    position:
        relative;

    overflow:
        hidden;

    padding:
        70px 0;

    background:
        linear-gradient(
            135deg,
            #e6a817,
            #f0c040
        );
}


.contact-section::before {
    content:
        "";

    position:
        absolute;

    width:
        240px;

    height:
        240px;

    left:
        -80px;

    bottom:
        -100px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.08);
}


.contact-section h2 {
    margin-bottom:
        11px;

    color:
        white;

    font-size:
        2.2rem;

    font-weight:
        900;

    line-height:
        1.2;
}


.contact-section p {
    margin:
        0;

    color:
        rgba(255,255,255,.86);

    font-size:
        14px;

    line-height:
        1.7;
}


.btn-contact-light {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        14px 25px;

    border-radius:
        11px;

    background:
        white;

    color:
        #176b3a;

    font-size:
        13px;

    font-weight:
        800;

    text-decoration:
        none;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.12);

    transition:
        .3s;
}


.btn-contact-light:hover {
    color:
        #176b3a;

    transform:
        translateY(-3px);
}


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

@media(max-width: 991px) {

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


    .hero-content {
        padding:
            115px 0 80px;
    }

}


@media(max-width: 576px) {

    .hero-home {
        min-height:
            760px;
    }


    .hero-content {
        padding:
            110px 0 75px;
    }


    .hero-content h1 {
        font-size:
            38px;
    }


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


    .statistic-wrapper {
        margin-top:
            -30px;
    }


    .stat-row {
        grid-template-columns:
            1fr 1fr;

        padding:
            18px;
    }


    .stat-item {
        gap:
            9px;
    }


    .stat-icon-box {
        width:
            45px;

        height:
            45px;

        font-size:
            18px;
    }


    .stat-item h3 {
        font-size:
            20px;
    }


    .stat-item p {
        font-size:
            10px;
    }


    .section-space {
        padding:
            65px 0;
    }


    .profil-card img {
        height:
            250px;
    }


    .peta-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    #peta-beranda {
        height:
            350px;
    }


    .home-potential-image img {
        height:
            330px;
    }


    .contact-section h2 {
        font-size:
            31px;
    }

}