.gklm-section{
    padding:60px 20px;
}

.gklm-container{
    max-width:1200px;
    margin:0 auto;
}

.gklm-section h2{
    margin-bottom:20px;
    font-size:32px;
    font-weight:700;
}

.gklm-section p{
    line-height:1.8;
}

.gklm-map iframe{
    width:100%;
    height:450px;
    border:0;
    border-radius:12px;
}

.gklm-contact p{
    margin-bottom:15px;
}

.gklm-nearby ul{
    padding-left:20px;
}

.gklm-nearby li{
    margin-bottom:10px;
}

/* =========================================================
   GK LOCATION MANAGER
   KECAMATAN PAGE
   ========================================================= */

/*
 * =========================================================
 * COLOR SYSTEM
 * =========================================================
 */

.gklm-kecamatan-page {

    --gklm-navy: #071d49;
    --gklm-navy-dark: #041534;
    --gklm-yellow: #f9c32b;
    --gklm-yellow-dark: #e8ad08;

    --gklm-text: #17233b;
    --gklm-muted: #647087;

    --gklm-light: #f7f9fc;
    --gklm-border: #e7ebf2;

    --gklm-white: #ffffff;

    font-family:
        "Poppins",
        "Inter",
        Arial,
        sans-serif;

    color: var(--gklm-text);

    background: #ffffff;

    overflow: hidden;

}


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

.gklm-kecamatan-container {

    width: min(
        1180px,
        calc(100% - 40px)
    );

    margin-left: auto;
    margin-right: auto;

}


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

.gklm-kecamatan-hero {

    position: relative;

    padding:
        90px
        0
        90px;

    background:
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #ffffff 55%,
            #fffaf0 100%
        );

}


/*
 * Decorative yellow glow
 */

.gklm-kecamatan-hero::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    top: -180px;

    background:
        rgba(249, 195, 43, 0.12);

    border-radius: 50%;

    pointer-events: none;

}


/*
 * Hero grid
 */

.gklm-kecamatan-hero-grid {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(360px, 0.85fr);

    align-items: center;

    gap: 70px;

}


/*
 * Hero content
 */

.gklm-kecamatan-hero-content {

    max-width: 690px;

}


/*
 * Eyebrow
 */

.gklm-kecamatan-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.2px;

    color: var(--gklm-yellow-dark);

}


.gklm-kecamatan-eyebrow::before {

    content: "";

    width: 34px;
    height: 3px;

    background:
        var(--gklm-yellow);

    border-radius: 10px;

}


/*
 * H1
 */

.gklm-kecamatan-hero h1 {

    margin:
        0
        0
        20px;

    color:
        var(--gklm-navy);

    font-size:
        clamp(
            38px,
            5vw,
            62px
        );

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;

}


/*
 * Location
 */

.gklm-kecamatan-hero-location {

    display: inline-block;

    margin:
        0
        0
        18px;

    padding:
        8px
        14px;

    border-radius: 8px;

    background:
        rgba(
            249,
            195,
            43,
            0.14
        );

    color:
        var(--gklm-navy);

    font-size: 14px;

    font-weight: 600;

}


/*
 * Description
 */

.gklm-kecamatan-hero-description {

    max-width: 630px;

    margin:
        0
        0
        30px;

    color:
        var(--gklm-muted);

    font-size: 17px;

    line-height: 1.8;

}


/*
 * Hero buttons
 */

.gklm-kecamatan-hero-actions {

    display: flex;

    align-items: center;

    gap: 14px;

}


/*
 * Primary button
 */

.gklm-kecamatan-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding:
        0
        28px;

    border-radius: 10px;

    background:
        var(--gklm-yellow);

    color:
        var(--gklm-navy) !important;

    font-size: 15px;

    font-weight: 700;

    text-decoration: none !important;

    box-shadow:
        0 8px 20px
        rgba(
            249,
            195,
            43,
            0.24
        );

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

}


.gklm-kecamatan-button:hover {

    background:
        var(--gklm-yellow-dark);

    color:
        var(--gklm-navy) !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 26px
        rgba(
            249,
            195,
            43,
            0.30
        );

}


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

.gklm-kecamatan-hero-visual {

    position: relative;

    min-height: 360px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/*
 * Navy visual background
 */

.gklm-kecamatan-hero-visual::before {

    content: "";

    position: absolute;

    width: 310px;
    height: 310px;

    border-radius: 50%;

    background:
        var(--gklm-navy);

    box-shadow:
        0 30px 70px
        rgba(
            7,
            29,
            73,
            0.20
        );

}


/*
 * Hero card
 */

.gklm-kecamatan-hero-card {

    position: relative;

    z-index: 2;

    width: min(
        330px,
        100%
    );

    padding:
        38px
        32px;

    border-radius: 20px;

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

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.8
        );

    box-shadow:
        0 25px 60px
        rgba(
            7,
            29,
            73,
            0.18
        );

    text-align: center;

}


.gklm-kecamatan-hero-card-icon {

    width: 64px;
    height: 64px;

    margin:
        0
        auto
        20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--gklm-yellow);

    font-size: 27px;

}


.gklm-kecamatan-hero-card span {

    display: block;

    margin-bottom: 8px;

    color:
        var(--gklm-muted);

    font-size: 13px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.gklm-kecamatan-hero-card strong {

    display: block;

    color:
        var(--gklm-navy);

    font-size: 22px;

    line-height: 1.35;

    font-weight: 800;

}


.gklm-kecamatan-hero-card small {

    display: block;

    margin-top: 8px;

    color:
        var(--gklm-muted);

    font-size: 14px;

}


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

.gklm-kecamatan-page
section {

    position: relative;

}


.gklm-kecamatan-page
h2 {

    margin-top: 0;

    color:
        var(--gklm-navy);

    font-size:
        clamp(
            28px,
            4vw,
            42px
        );

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -0.7px;

}


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

.gklm-kecamatan-info {

    padding:
        80px
        0;

    background:
        #ffffff;

}


.gklm-kecamatan-info-card {

    padding:
        45px;

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

    border-radius: 20px;

    background:
        #ffffff;

    box-shadow:
        0 15px 45px
        rgba(
            7,
            29,
            73,
            0.07
        );

}


.gklm-kecamatan-info-header {

    margin-bottom: 35px;

}


.gklm-kecamatan-info-header span {

    display: block;

    margin-bottom: 10px;

    color:
        var(--gklm-yellow-dark);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1.2px;

}


.gklm-kecamatan-info-header h2 {

    margin-bottom: 0;

}


/*
 * Address
 */

.gklm-kecamatan-address {

    padding:
        24px;

    margin-bottom: 25px;

    border-radius: 12px;

    background:
        var(--gklm-light);

    border-left:
        4px solid
        var(--gklm-yellow);

}


.gklm-kecamatan-address strong {

    display: block;

    margin-bottom: 8px;

    color:
        var(--gklm-navy);

    font-size: 15px;

}


.gklm-kecamatan-address p {

    margin: 0;

    color:
        var(--gklm-muted);

    font-size: 15px;

    line-height: 1.7;

}


/*
 * Meta
 */

.gklm-kecamatan-meta {

    display: grid;

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

    gap: 20px;

}


.gklm-kecamatan-meta > div {

    padding:
        20px;

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

    border-radius: 12px;

}


.gklm-kecamatan-meta span {

    display: block;

    margin-bottom: 7px;

    color:
        var(--gklm-muted);

    font-size: 13px;

}


.gklm-kecamatan-meta strong {

    color:
        var(--gklm-navy);

    font-size: 16px;

}


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

.gklm-kecamatan-map {

    padding:
        80px
        0;

    background:
        var(--gklm-light);

}


.gklm-kecamatan-map-header {

    margin-bottom: 30px;

    text-align: center;

}


.gklm-kecamatan-map-header span {

    display: block;

    margin-bottom: 10px;

    color:
        var(--gklm-yellow-dark);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1.2px;

}


.gklm-kecamatan-map-header h2 {

    margin-bottom: 0;

}


.gklm-kecamatan-map-frame {

    overflow: hidden;

    border-radius: 20px;

    background:
        #ffffff;

    box-shadow:
        0 15px 45px
        rgba(
            7,
            29,
            73,
            0.10
        );

}


.gklm-kecamatan-map-frame iframe {

    display: block;

    width: 100%;

    min-height: 420px;

    border: 0;

}


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

.gklm-kecamatan-cta-section {

    padding:
        80px
        0;

    background:
        #ffffff;

}


.gklm-kecamatan-cta-box {

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding:
        55px
        60px;

    border-radius: 22px;

    background:
        var(--gklm-navy);

    box-shadow:
        0 20px 55px
        rgba(
            7,
            29,
            73,
            0.20
        );

}


.gklm-kecamatan-cta-box::after {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -100px;
    top: -120px;

    border-radius: 50%;

    background:
        rgba(
            249,
            195,
            43,
            0.14
        );

}


.gklm-kecamatan-cta-box > div {

    position: relative;

    z-index: 2;

}


.gklm-kecamatan-cta-box span {

    display: block;

    margin-bottom: 10px;

    color:
        var(--gklm-yellow);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1.2px;

}


.gklm-kecamatan-cta-box h2 {

    margin-bottom: 12px;

    color:
        #ffffff;

}


.gklm-kecamatan-cta-box p {

    max-width: 650px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );

    font-size: 15px;

    line-height: 1.7;

}


.gklm-kecamatan-cta-box
.gklm-kecamatan-button {

    position: relative;

    z-index: 3;

    flex-shrink: 0;

}


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

@media (
    max-width: 900px
) {

    .gklm-kecamatan-hero {

        padding:
            70px
            0;

    }


    .gklm-kecamatan-hero-grid {

        grid-template-columns:
            1fr;

        gap: 55px;

    }


    .gklm-kecamatan-hero-content {

        max-width: 100%;

        text-align: center;

        margin:
            0
            auto;

    }


    .gklm-kecamatan-eyebrow {

        justify-content: center;

    }


    .gklm-kecamatan-hero-description {

        margin-left: auto;
        margin-right: auto;

    }


    .gklm-kecamatan-hero-actions {

        justify-content: center;

    }


    .gklm-kecamatan-hero-visual {

        min-height: 330px;

    }


    .gklm-kecamatan-info,
    .gklm-kecamatan-map,
    .gklm-kecamatan-cta-section {

        padding:
            65px
            0;

    }


    .gklm-kecamatan-cta-box {

        flex-direction: column;

        align-items: flex-start;

        padding:
            45px;

    }

}


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

@media (
    max-width: 600px
) {

    .gklm-kecamatan-container {

        width:
            calc(100% - 30px);

    }


    .gklm-kecamatan-hero {

        padding:
            55px
            0
            60px;

    }


    .gklm-kecamatan-hero h1 {

        font-size: 34px;

        letter-spacing: -0.8px;

    }


    .gklm-kecamatan-hero-description {

        font-size: 15px;

        line-height: 1.7;

    }


    .gklm-kecamatan-hero-actions {

        width: 100%;

    }


    .gklm-kecamatan-button {

        width: 100%;

        padding:
            0
            20px;

    }


    .gklm-kecamatan-hero-visual {

        min-height: 300px;

    }


    .gklm-kecamatan-hero-visual::before {

        width: 250px;
        height: 250px;

    }


    .gklm-kecamatan-hero-card {

        width:
            calc(100% - 30px);

        padding:
            30px
            22px;

    }


    .gklm-kecamatan-hero-card strong {

        font-size: 19px;

    }


    .gklm-kecamatan-info,
    .gklm-kecamatan-map,
    .gklm-kecamatan-cta-section {

        padding:
            55px
            0;

    }


    .gklm-kecamatan-info-card {

        padding:
            25px
            20px;

        border-radius: 16px;

    }


    .gklm-kecamatan-page h2 {

        font-size: 28px;

    }


    .gklm-kecamatan-meta {

        grid-template-columns:
            1fr;

    }


    .gklm-kecamatan-map-frame {

        border-radius: 14px;

    }


    .gklm-kecamatan-map-frame iframe {

        min-height: 300px;

    }


    .gklm-kecamatan-cta-box {

        padding:
            35px
            25px;

        border-radius: 16px;

    }


    .gklm-kecamatan-cta-box h2 {

        font-size: 27px;

    }

}