/* =========================================================
   DATA DESA MAKASARI
   Modern / Fluid / Responsive
   Header & Footer tidak diubah
========================================================= */


/* =========================================================
   ROOT
========================================================= */

.data-page {

    width:
        min(
            1180px,
            calc(100% - clamp(30px, 6vw, 96px))
        );

    margin:
        clamp(24px, 4vw, 48px) auto
        clamp(56px, 7vw, 90px);

    color:
        #171717;
}


/* =========================================================
   HEADING
========================================================= */

.data-heading {

    text-align:
        center;

    margin:
        clamp(24px, 4vw, 48px)
        0
        clamp(30px, 5vw, 52px);
}


.eyebrow {

    font-size:
        clamp(.58rem, .5rem + .2vw, .72rem);

    font-weight:
        800;

    letter-spacing:
        .18em;

    color:
        #087d32;

    margin-bottom:
        10px;
}


.data-heading h1 {

    font-size:
        clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);

    line-height:
        1.12;

    font-weight:
        700;

    letter-spacing:
        -.025em;
}


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

.hero-stat {

    position:
        relative;

    min-height:
        clamp(360px, 42vw, 500px);

    border-radius:
        clamp(16px, 2vw, 24px);

    overflow:
        hidden;

    margin-bottom:
        clamp(48px, 6vw, 72px);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.10);
}


.hero-stat-bg {

    position:
        absolute;

    inset:
        0;

    background-size:
        cover;

    background-position:
        center;
}


/* overlay supaya teks tetap terbaca */

.hero-stat::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            135deg,
            rgba(0,45,25,.50),
            rgba(0,0,0,.10)
        );

    pointer-events:
        none;
}


.stat-grid {

    position:
        relative;

    z-index:
        1;

    min-height:
        clamp(360px, 42vw, 500px);

    padding:
        clamp(24px, 5vw, 60px);

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                220px,
                280px
            )
        );

    align-content:
        center;

    justify-content:
        center;

    gap:
        clamp(14px, 2vw, 22px);
}


.glass-stat {

    min-height:
        clamp(105px, 10vw, 135px);

    padding:
        clamp(18px, 2vw, 24px);

    border-radius:
        clamp(12px, 1.5vw, 18px);

    text-align:
        center;

    background:
        rgba(
            235,
            248,
            241,
            .24
        );

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

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    color:
        #fff;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

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

    transition:
        transform .25s ease,
        background .25s ease;
}


.glass-stat:hover {

    transform:
        translateY(-3px);

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


.glass-stat h3 {

    font-family:
        var(--playfair);

    font-size:
        clamp(.9rem, .75rem + .35vw, 1.15rem);

    line-height:
        1.2;

    margin-bottom:
        7px;

    color: white;
}


.glass-stat strong {

    font-size:
        clamp(.72rem, .6rem + .25vw, .9rem);

    font-weight:
        700;
}


.glass-stat span {

    font-size:
        clamp(.55rem, .48rem + .18vw, .68rem);

    line-height:
        1.5;

    opacity:
        .88;
}


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

.section-block {

    margin:
        0 auto
        clamp(42px, 6vw, 72px);
}


.section-title {

    margin-bottom:
        clamp(18px, 2.5vw, 28px);
}


.section-title h2 {

    font-family:
        var(--playfair);

    font-size:
        clamp(1.25rem, 1rem + .8vw, 1.65rem);

    line-height:
        1.2;

    font-weight:
        700;

    margin-bottom:
        7px;
}


.section-title h2 small {

    font-family:
        var(--raleway);

    font-size:
        clamp(.62rem, .55rem + .15vw, .75rem);

    font-weight:
        600;
}


.section-title p {

    font-size:
        clamp(.72rem, .65rem + .2vw, .84rem);

    font-weight:
        700;

    line-height:
        1.5;
}


.section-title span {

    display:
        block;

    font-size:
        clamp(.58rem, .52rem + .15vw, .68rem);

    line-height:
        1.6;

    color:
        #707070;
}


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

.age-chart {

    position:
        relative;

    height:
        clamp(260px, 30vw, 360px);

    padding:
        10px
        clamp(4px, 1vw, 16px)
        0;

    border-bottom:
        1px solid #d8d8d8;

    background:
        repeating-linear-gradient(
            to top,
            transparent 0,
            transparent 59px,
            #e9e9e9 60px
        );

    border-radius:
        10px 10px 0 0;
}


.age-bars {

    height:
        100%;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        clamp(3px, 1vw, 12px);
}


.bar-wrap {

    position:
        relative;

    height:
        100%;

    flex:
        1 1 0;

    min-width:
        0;

    max-width:
        70px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-end;
}


.bar-wrap > span {

    font-size:
        clamp(.46rem, .4rem + .12vw, .58rem);

    color:
        #707070;

    margin-bottom:
        5px;

    white-space:
        nowrap;
}


.bar {

    width:
        100%;

    height:
        var(--h);

    min-height:
        4px;

    max-height:
        calc(100% - 25px);

    background:
        #2d8750;

    border-radius:
        5px 5px 0 0;

    transition:
        height .4s ease,
        opacity .2s ease;
}


.bar:hover {

    opacity:
        .8;
}


.bar-wrap small {

    margin-top:
        7px;

    font-size:
        clamp(.42rem, .37rem + .12vw, .54rem);

    line-height:
        1;

    color:
        #555;

    white-space:
        nowrap;
}


/* =========================================================
   ECONOMY
========================================================= */

.economy-grid {

    display:
        grid;

    grid-template-columns:
        minmax(
            280px,
            .9fr
        )
        minmax(
            300px,
            1.1fr
        );

    align-items:
        center;

    gap:
        clamp(30px, 5vw, 70px);
}


.donut-card {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;
}


.donut {

    --d1: #d7495b;
    --d2: #ef7b4b;
    --d3: #f0b83e;
    --d4: #8fc34d;
    --d5: #2f9151;

    width:
        clamp(190px, 22vw, 270px);

    aspect-ratio:
        1;

    border-radius:
        50%;

    background:
        conic-gradient(
            var(--d1) 0% var(--p1),
            var(--d2) var(--p1) var(--p2),
            var(--d3) var(--p2) var(--p3),
            var(--d4) var(--p3) var(--p4),
            var(--d5) var(--p4) 100%
        );

    display:
        grid;

    place-items:
        center;

    position:
        relative;

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


.donut::after {

    content:
        "";

    position:
        absolute;

    width:
        56%;

    aspect-ratio:
        1;

    background:
        #fff;

    border-radius:
        50%;
}


.donut > div {

    position:
        relative;

    z-index:
        1;

    text-align:
        center;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;
}


.donut strong {

    font-size:
        clamp(1.1rem, 1rem + .5vw, 1.45rem);

    line-height:
        1.1;
}


.donut span {

    margin-top:
        4px;

    font-size:
        clamp(.48rem, .43rem + .15vw, .58rem);

    color:
        #777;
}


/* =========================================================
   LEGEND
========================================================= */

.legend-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}


.legend-list > div {

    display:
        grid;

    grid-template-columns:
        12px
        minmax(0, 1fr)
        auto;

    gap:
        10px;

    align-items:
        center;

    padding:
        clamp(9px, 1vw, 12px)
        clamp(10px, 1.3vw, 15px);

    background:
        #f7f8f7;

    border:
        1px solid
        #ededed;

    border-radius:
        8px;

    transition:
        transform .2s ease,
        background .2s ease;
}


.legend-list > div:hover {

    transform:
        translateX(3px);

    background:
        #f2f6f3;
}


.legend-list b {

    font-size:
        clamp(.56rem, .5rem + .15vw, .66rem);

    display:
        block;
}


.legend-list small {

    font-size:
        clamp(.48rem, .43rem + .12vw, .55rem);

    color:
        #888;
}


.legend-list > div > strong {

    font-size:
        clamp(.58rem, .52rem + .15vw, .68rem);
}


.dot {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    display:
        block;
}


.d1 {
    background: #d7495b;
}

.d2 {
    background: #ef7b4b;
}

.d3 {
    background: #f0b83e;
}

.d4 {
    background: #8fc34d;
}

.d5 {
    background: #2f9151;
}


/* =========================================================
   PROFESSION
========================================================= */

.profession-card {

    background:
        #f7f8f7;

    border:
        1px solid
        #e9e9e9;

    border-radius:
        14px;

    padding:
        clamp(18px, 2.5vw, 28px);

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


.progress-row {

    display:
        grid;

    grid-template-columns:
        minmax(110px, .35fr)
        minmax(120px, 1fr)
        48px;

    gap:
        clamp(9px, 1.5vw, 16px);

    align-items:
        center;

    margin:
        13px 0;
}


.progress-row b {

    font-size:
        clamp(.55rem, .5rem + .15vw, .66rem);

    font-weight:
        600;

    line-height:
        1.3;
}


.progress-row > div {

    height:
        clamp(7px, .6vw, 10px);

    background:
        #e3e6e4;

    border-radius:
        99px;

    overflow:
        hidden;
}


.progress-row span {

    display:
        block;

    width:
        var(--w);

    height:
        100%;

    background:
        #3869db;

    border-radius:
        99px;

    transition:
        width .5s ease;
}


.progress-row strong {

    font-size:
        clamp(.52rem, .47rem + .15vw, .62rem);

    text-align:
        right;
}


/* =========================================================
   SCHOOL
========================================================= */

.school-group {

    background:
        linear-gradient(
            135deg,
            #e3f7ea,
            #d2f1dd
        );

    border:
        1px solid
        rgba(0,100,50,.10);

    border-radius:
        16px;

    padding:
        clamp(16px, 2vw, 24px);

    margin-bottom:
        clamp(16px, 2vw, 24px);

    box-shadow:
        0 8px 24px
        rgba(0,0,0,.035);
}


.school-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding-bottom:
        13px;

    border-bottom:
        1px solid
        rgba(0,80,40,.15);
}


.school-heading > div {

    flex:
        1;

    min-width:
        0;
}


.school-heading b {

    display:
        block;

    font-size:
        clamp(.62rem, .55rem + .18vw, .74rem);

    line-height:
        1.3;
}


.school-heading small {

    display:
        block;

    margin-top:
        3px;

    font-size:
        clamp(.48rem, .43rem + .14vw, .56rem);

    color:
        #555;

    line-height:
        1.4;
}


.school-heading em {

    flex:
        0 0 auto;

    font-size:
        clamp(.45rem, .4rem + .12vw, .52rem);

    font-style:
        normal;

    background:
        #fff;

    border-radius:
        99px;

    padding:
        5px 9px;

    color:
        #6652d8;

    white-space:
        nowrap;
}


.school-icon {

    flex:
        0 0 auto;

    width:
        32px;

    height:
        32px;

    border-radius:
        50%;

    background:
        #fff;

    display:
        grid;

    place-items:
        center;

    color:
        #f3a84d;
}


.school-icon.blue {
    color: #4680ed;
}


.school-icon.purple {
    color: #9b5ce0;
}


.school-item {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        12px 0;

    border-bottom:
        1px solid
        rgba(0,80,40,.10);
}


.school-item:last-child {

    border-bottom:
        0;
}


.school-item > div {

    min-width:
        0;
}


.school-item b {

    display:
        block;

    font-size:
        clamp(.54rem, .49rem + .15vw, .64rem);

    line-height:
        1.35;
}


.school-item small {

    display:
        block;

    margin-top:
        3px;

    font-size:
        clamp(.44rem, .4rem + .12vw, .53rem);

    color:
        #555;

    line-height:
        1.4;
}


.school-photo {

    width:
        clamp(60px, 7vw, 82px);

    height:
        clamp(42px, 5vw, 55px);

    flex:
        0 0
        clamp(60px, 7vw, 82px);

    border-radius:
        8px;

    background-size:
        cover;

    background-position:
        center;

    background-color:
        #dfe8e2;

    overflow:
        hidden;
}


/* =========================================================
   OLD PHOTO CLASSES
   Tetap dipertahankan supaya HTML lama tidak rusak.
========================================================= */

.photo-1,
.photo-2,
.photo-3,
.photo-4,
.photo-5,
.photo-6,
.photo-7,
.photo-8,
.photo-9,
.photo-10,
.photo-11 {

    background-size:
        cover;

    background-position:
        center;
}


/* =========================================================
   INFRASTRUCTURE
========================================================= */

.rice-field {

    height:
        clamp(190px, 24vw, 300px);

    border-radius:
        clamp(12px, 1.5vw, 18px);

    background-size:
        cover;

    background-position:
        center;

    margin-bottom:
        clamp(14px, 2vw, 20px);

    overflow:
        hidden;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.07);
}


/* =========================================================
   FACILITY
========================================================= */

.facility-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                210px,
                1fr
            )
        );

    gap:
        clamp(12px, 1.5vw, 18px);
}


.facility-card {

    border:
        1px solid
        #e0eee5;

    border-radius:
        14px;

    padding:
        clamp(16px, 2vw, 22px);

    background:
        #effaf4;

    min-width:
        0;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.facility-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.06);
}


.facility-card h3 {

    font-size:
        clamp(.62rem, .56rem + .18vw, .72rem);

    line-height:
        1.3;

    margin-bottom:
        12px;
}


.facility-card div {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        10px;

    padding:
        9px 0;

    border-bottom:
        1px solid
        #dce9df;
}


.facility-card div:last-child {

    border-bottom:
        0;
}


.facility-card b {

    font-size:
        clamp(.56rem, .5rem + .15vw, .65rem);

    white-space:
        nowrap;
}


.facility-card span {

    font-size:
        clamp(.48rem, .43rem + .13vw, .55rem);

    color:
        #777;

    text-align:
        right;

    line-height:
        1.35;
}


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

@media (max-width: 900px) {

    .economy-grid {

        grid-template-columns:
            1fr;

        gap:
            30px;
    }


    .donut-card {

        padding:
            10px 0;
    }


    .legend-list {

        max-width:
            650px;

        width:
            100%;

        margin:
            0 auto;
    }

}


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

@media (max-width: 700px) {

    .data-page {

        width:
            calc(100% - 30px);

        margin-top:
            18px;
    }


    .hero-stat {

        min-height:
            390px;
    }


    .stat-grid {

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

        padding:
            20px;

        gap:
            10px;
    }


    .glass-stat {

        min-height:
            105px;
    }


    .age-chart {

        height:
            230px;

        padding-left:
            2px;

        padding-right:
            2px;
    }


    .progress-row {

        grid-template-columns:
            minmax(95px, .4fr)
            minmax(100px, 1fr)
            40px;
    }


    .facility-grid {

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

}


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

@media (max-width: 480px) {

    .data-page {

        width:
            calc(100% - 24px);

        margin:
            14px auto 55px;
    }


    .data-heading {

        margin:
            18px 0 28px;
    }


    .data-heading h1 {

        font-size:
            1.55rem;
    }


    .hero-stat {

        min-height:
            430px;

        border-radius:
            14px;
    }


    .stat-grid {

        min-height:
            430px;

        grid-template-columns:
            1fr 1fr;

        padding:
            18px;

        gap:
            9px;
    }


    .glass-stat {

        min-height:
            112px;

        padding:
            12px 8px;

        border-radius:
            11px;
    }


    .glass-stat h3 {

        font-size:
            .78rem;
    }


    .glass-stat strong {

        font-size:
            .62rem;
    }


    .glass-stat span {

        font-size:
            .47rem;
    }


    .section-block {

        margin-bottom:
            44px;
    }


    .section-title h2 {

        font-size:
            1.15rem;
    }


    .section-title p {

        font-size:
            .67rem;
    }


    .section-title span {

        font-size:
            .54rem;
    }


    .age-chart {

        height:
            205px;
    }


    .bar-wrap > span {

        font-size:
            .39rem;
    }


    .bar-wrap small {

        font-size:
            .35rem;

        transform:
            none;
    }


    .donut {

        width:
            175px;
    }


    .legend-list > div {

        grid-template-columns:
            9px
            minmax(0, 1fr)
            auto;

        gap:
            7px;

        padding:
            8px;
    }


    .legend-list b {

        font-size:
            .5rem;
    }


    .legend-list small {

        font-size:
            .43rem;
    }


    .legend-list > div > strong {

        font-size:
            .52rem;
    }


    .profession-card {

        padding:
            15px 12px;
    }


    .progress-row {

        grid-template-columns:
            78px
            minmax(0, 1fr)
            32px;

        gap:
            7px;

        margin:
            11px 0;
    }


    .progress-row b,
    .progress-row strong {

        font-size:
            .45rem;
    }


    .progress-row > div {

        height:
            6px;
    }


    .school-group {

        padding:
            14px;

        border-radius:
            13px;
    }


    .school-heading {

        gap:
            8px;
    }


    .school-icon {

        width:
            28px;

        height:
            28px;
    }


    .school-heading em {

        display:
            none;
    }


    .school-item {

        gap:
            10px;

        padding:
            10px 0;
    }


    .school-photo {

        width:
            56px;

        height:
            40px;

        flex-basis:
            56px;

        border-radius:
            6px;
    }


    .facility-grid {

        grid-template-columns:
            1fr;
    }


    .facility-card {

        padding:
            15px;
    }


    .facility-card h3 {

        font-size:
            .6rem;
    }


    .facility-card b {

        font-size:
            .53rem;
    }


    .facility-card span {

        font-size:
            .46rem;
    }


    .rice-field {

        height:
            170px;

        border-radius:
            12px;
    }

}


/* =========================================================
   VERY SMALL SCREEN
========================================================= */

@media (max-width: 350px) {

    .data-page {

        width:
            calc(100% - 18px);
    }


    .stat-grid {

        padding:
            12px;

        gap:
            7px;
    }


    .glass-stat {

        min-height:
            105px;

        padding:
            9px 5px;
    }


    .glass-stat h3 {

        font-size:
            .7rem;
    }


    .progress-row {

        grid-template-columns:
            68px
            minmax(0, 1fr)
            28px;

        gap:
            5px;
    }

}