/* =====================================================
   PEMERINTAHAN DESA SIRNAMEKAR
===================================================== */


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

.gov-hero {
    position: relative;

    min-height: 390px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        url('../images/hero-sirnamekar.jpg')
        center / cover no-repeat;

    color: white;
}


.gov-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,48,25,.95),
            rgba(13,96,52,.72),
            rgba(7,53,29,.28)
        );
}


.gov-hero-content {
    position: relative;

    z-index: 2;

    max-width: 850px;
}


.gov-hero-badge {
    display: inline-block;

    margin-bottom: 18px;

    padding: 8px 16px;

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

    border-radius: 30px;

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

    color: white;

    font-size: 13px;

    font-weight: 600;
}


.gov-hero h1 {
    margin-bottom: 14px;

    color: white;

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

    font-size:
        clamp(40px,6vw,61px);

    font-weight: 800;

    line-height: 1.15;
}


.gov-hero p {
    max-width: 720px;

    margin-bottom: 20px;

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

    font-size: 16px;

    line-height: 1.8;
}


.gov-breadcrumb {
    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 13px;
}


.gov-breadcrumb a {
    color: white;

    text-decoration: none;

    font-weight: 600;
}


.gov-breadcrumb a:hover {
    color: #d8f3df;
}


.gov-breadcrumb i {
    color:
        rgba(255,255,255,.70);
}


.gov-breadcrumb span {
    color:
        rgba(255,255,255,.65);
}


/* =========================
   INTRO
========================= */

.gov-intro {
    max-width: 820px;

    margin: auto;
}


.gov-intro p {
    max-width: 730px;

    margin: auto;

    color:
        var(--text);

    line-height: 1.9;
}


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

.leader-section {
    padding:
        10px 0 100px;
}


.leader-card {
    padding: 45px;

    border:
        1px solid #d6e9dd;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #effaf3,
            #dfefe5
        );
}


.leader-photo {
    position: relative;

    height: 500px;

    overflow: hidden;

    border-radius: 22px;

    background: #e3eae6;
}


.leader-photo img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.leader-photo span {
    position: absolute;

    left: 20px;

    bottom: 20px;

    padding:
        9px 17px;

    border-radius: 30px;

    background:
        rgba(9,78,41,.94);

    color: white;

    font-size: 12px;

    font-weight: 700;
}


.leader-card h2 {
    margin-bottom: 20px;

    color:
        var(--primary-dark);

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

    font-size:
        clamp(34px,5vw,50px);

    font-weight: 800;
}


.leader-card p {
    color:
        var(--text);

    line-height: 1.9;
}


.leader-info {
    display: grid;

    gap: 14px;

    margin-top: 28px;
}


.leader-info-item {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 15px;

    border-radius: 14px;

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


.leader-info-icon {
    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color: white;

    font-size: 20px;
}


.leader-info-item small,
.leader-info-item strong {
    display: block;
}


.leader-info-item small {
    color:
        var(--text);

    font-size: 11px;
}


/* =========================
   SEKRETARIS
========================= */

.person-card {
    padding: 20px;

    border:
        1px solid var(--border);

    border-radius: 20px;

    background: white;

    text-align: center;

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

    transition: .3s;
}


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

    box-shadow:
        var(--shadow);
}


.person-photo {
    height: 330px;

    margin-bottom: 20px;

    overflow: hidden;

    border-radius: 16px;

    background: #e5ebe7;
}


.person-photo img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.person-card > span {
    display: inline-block;

    margin-bottom: 9px;

    padding:
        6px 13px;

    border-radius: 20px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-size: 11px;

    font-weight: 700;
}


.person-card h3 {
    font-size: 21px;

    font-weight: 700;
}


.person-card p {
    margin: 0;

    color:
        var(--text);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================
   PERANGKAT DESA
========================= */

.apparatus-card {
    height: 100%;

    padding: 30px;

    border:
        1px solid var(--border);

    border-radius: 18px;

    background: white;

    transition: .3s;
}


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

    border-color: transparent;

    box-shadow:
        var(--shadow);
}


.apparatus-icon {
    width: 57px;

    height: 57px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    border-radius: 14px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-size: 24px;
}


.apparatus-card > span {
    display: block;

    margin-bottom: 7px;

    color:
        var(--primary);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .6px;

    text-transform: uppercase;
}


.apparatus-card h4 {
    margin-bottom: 8px;

    font-size: 19px;

    font-weight: 700;
}


.apparatus-card p {
    margin: 0;

    color:
        var(--text);

    font-size: 13px;
}


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

.kadus-card {
    position: relative;

    height: 100%;

    padding:
        32px 24px;

    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius: 19px;

    background: white;

    text-align: center;

    transition: .3s;
}


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

    box-shadow:
        var(--shadow);
}


.kadus-number {
    position: absolute;

    top: 8px;

    right: 15px;

    color:
        #edf2ef;

    font-size: 45px;

    font-weight: 800;
}


.kadus-avatar {
    width: 80px;

    height: 80px;

    margin:
        5px auto 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color: white;

    font-size: 33px;
}


.kadus-label {
    display: block;

    margin-bottom: 5px;

    color:
        var(--primary);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;
}


.kadus-card h4 {
    margin-bottom: 6px;

    font-size: 18px;

    font-weight: 700;
}


.kadus-card p {
    margin: 0;

    color:
        var(--text);

    font-size: 13px;
}


/* =========================
   LEMBAGA DESA
========================= */

.institution-section {
    background:
        linear-gradient(
            135deg,
            #073e20,
            #146d3a
        );
}


.institution-card {
    height: 100%;

    padding: 35px;

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

    border-radius: 19px;

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

    color: white;

    text-align: center;

    transition: .3s;
}


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

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


.institution-icon {
    width: 65px;

    height: 65px;

    margin:
        0 auto 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

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

    font-size: 27px;
}


.institution-card h4 {
    font-weight: 700;
}


.institution-card p {
    margin: 0;

    color:
        rgba(255,255,255,.72);
}


/* =========================
   BAGAN ORGANISASI
========================= */

.org-chart-wrapper {
    padding: 55px;

    border:
        1px solid var(--border);

    border-radius: 28px;

    background:
        linear-gradient(
            180deg,
            #f8fbf9,
            #edf4f0
        );
}


.org-level {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 55px;
}


.top-level {
    max-width: 950px;

    margin: auto;

    justify-content:
        space-between;
}


.org-main-card {
    min-width: 330px;

    padding:
        25px 30px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #176b3a,
            #0d4f2a
        );

    color: white;

    text-align: center;

    box-shadow:
        0 12px 30px
        rgba(20,80,42,.15);
}


.org-main-card.secondary {
    background:
        linear-gradient(
            135deg,
            #338254,
            #236942
        );
}


.org-main-card small,
.org-main-card strong {
    display: block;
}


.org-main-card small {
    margin-bottom: 5px;

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

    font-size: 12px;
}


.org-main-card strong {
    font-size: 20px;

    font-weight: 700;
}


.org-side-card {
    min-width: 120px;

    padding:
        17px 15px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #f7cf51,
            #edb936
        );

    color:
        #32311f;

    text-align: center;

    font-weight: 800;

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


.org-vertical-line {
    width: 2px;

    height: 55px;

    margin: auto;

    background:
        #a8cbb4;
}


.org-group-title {
    width: fit-content;

    margin:
        0 auto 25px;

    padding:
        9px 18px;

    border-radius: 25px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-size: 13px;

    font-weight: 800;
}


.org-grid {
    display: grid;

    gap: 20px;
}


.org-grid.three-column {
    grid-template-columns:
        repeat(3,1fr);
}


.org-grid.four-column {
    grid-template-columns:
        repeat(4,1fr);
}


.org-detail-card {
    padding: 22px;

    border:
        1px solid var(--border);

    border-radius: 16px;

    background: white;

    text-align: center;

    transition: .3s;
}


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

    border-color: transparent;

    box-shadow:
        var(--shadow);
}


.org-detail-card small,
.org-detail-card strong {
    display: block;
}


.org-detail-card small {
    margin-bottom: 6px;

    color:
        var(--primary);

    font-size: 12px;

    font-weight: 700;
}


.org-detail-card strong {
    color:
        var(--dark);

    font-size: 15px;

    font-weight: 700;
}


.org-divider {
    width: 2px;

    height: 45px;

    margin:
        25px auto;

    background:
        #c0d8c7;
}


/* =========================
   CTA
========================= */

.gov-contact-section {
    padding:
        20px 0 90px;
}


.gov-contact-box {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 40px;

    padding: 50px;

    border:
        1px solid #d5e9dc;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #edf8f1,
            #dcefe4
        );
}


.gov-contact-box > div {
    max-width: 750px;
}


.gov-contact-box span {
    display: block;

    margin-bottom: 9px;

    color:
        var(--primary);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;
}


.gov-contact-box h2 {
    margin-bottom: 12px;

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

    font-size:
        clamp(27px,4vw,38px);

    font-weight: 700;
}


.gov-contact-box p {
    margin: 0;

    color:
        var(--text);

    line-height: 1.7;
}


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

    align-items: center;

    justify-content: center;

    gap: 9px;

    flex-shrink: 0;

    padding:
        14px 23px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color: white;

    font-weight: 700;

    text-decoration: none;

    transition: .3s;
}


.gov-contact-btn:hover {
    color: white;

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px
        rgba(20,80,42,.18);
}


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

@media(max-width:991px) {

    .leader-card {
        padding: 30px;
    }


    .leader-photo {
        height: 430px;
    }


    .top-level {
        flex-direction: column;

        gap: 20px;
    }


    .org-grid.three-column,
    .org-grid.four-column {
        grid-template-columns:
            repeat(2,1fr);
    }


    .gov-contact-box {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


@media(max-width:576px) {

    .gov-hero {
        min-height: 340px;
    }


    .gov-hero h1 {
        font-size: 37px;
    }


    .leader-card {
        padding: 20px;
    }


    .leader-photo {
        height: 360px;
    }


    .person-photo {
        height: 300px;
    }


    .org-chart-wrapper {
        padding:
            30px 18px;
    }


    .org-main-card,
    .org-side-card {
        width: 100%;

        min-width: 100%;
    }


    .org-grid.three-column,
    .org-grid.four-column {
        grid-template-columns: 1fr;
    }


    .gov-contact-box {
        padding:
            32px 23px;
    }


    .gov-contact-btn {
        width: 100%;
    }

}