/* ====================================================== */
    /* HERO MAP REVISION */
    /* ====================================================== */

    .hero-map-stack {
        display:
            flex;

        flex-direction:
            column;

        gap:
            14px;

        min-width:
            0;

        transform:
            rotate(.7deg);

        transform-origin:
            center center;
    }


    /*
        Map card sekarang hanya berisi peta.
        Tidak ada lagi kartu gelap yang menimpa iframe.
    */
    .hero-map-stack
    .hero-map-card {
        min-height:
            520px;

        transform:
            none;

        border-radius:
            34px;

        box-shadow:
            0 27px 75px
            rgba(14,165,233,.14),
            inset 0 1px 0
            rgba(255,255,255,.92);
    }


    /*
        Gradient peta dibuat lebih tipis karena
        informasi wilayah sudah berada di bawah map.
    */
    .hero-map-stack
    .hero-map-card::after {
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.02) 60%,
                rgba(7,24,39,.08) 100%
            );
    }


    /* Kartu gelap baru yang berada di bawah peta */
    .hero-map-info-below {

        position:
            relative;

        z-index:
            5;

        width:
            calc(100% - 28px);

        margin:
            -2px auto 0;

        min-height:
            102px;

        display:
            grid;

        grid-template-columns:
            46px minmax(0,1fr) 38px;

        align-items:
            center;

        gap:
            14px;

        padding:
            18px 18px;

        border-radius:
            24px;

        color:
            #ffffff;

        background:
            linear-gradient(
                135deg,
                rgba(7,24,39,.96),
                rgba(9,57,82,.94)
            );

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

        box-shadow:
            0 20px 50px
            rgba(7,24,39,.20),
            inset 0 1px 0
            rgba(255,255,255,.08);

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);
    }


    .hero-map-info-icon {

        width:
            46px;

        height:
            46px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        border-radius:
            15px;

        color:
            #7dd3fc;

        background:
            rgba(14,165,233,.12);

        border:
            1px solid
            rgba(125,211,252,.18);
    }


    .hero-map-info-copy {

        min-width:
            0;
    }


    .hero-map-info-copy p {

        color:
            #7dd3fc;

        font-size:
            9px;

        font-weight:
            800;

        text-transform:
            uppercase;

        letter-spacing:
            .11em;
    }


    .hero-map-info-copy h3 {

        margin-top:
            4px;

        color:
            #ffffff;

        font-size:
            15px;

        line-height:
            1.35;

        font-weight:
            800;
    }


    .hero-map-info-copy span {

        display:
            block;

        margin-top:
            5px;

        color:
            #cbd5e1;

        font-size:
            9.5px;

        line-height:
            1.65;
    }


    .hero-map-info-action {

        width:
            38px;

        height:
            38px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        border-radius:
            999px;

        color:
            #ffffff;

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

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

        transition:
            transform .35s
            cubic-bezier(.16,1,.3,1),
            background .3s ease,
            color .3s ease;
    }


    .hero-map-info-action:hover {

        transform:
            translateY(-2px)
            rotate(4deg);

        color:
            #075985;

        background:
            #ffffff;
    }


    /*
        Style lama untuk dark box overlay tidak lagi digunakan.
    */
    .hero-map-bottom {
        display:
            none !important;
    }


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

    @media (
        max-width: 980px
    ) {

        .hero-map-stack {
            transform:
                none;
        }


        .hero-map-stack
        .hero-map-card {

            min-height:
                480px;
        }

    }


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

    @media (
        max-width: 680px
    ) {

        .hero-map-stack {

            gap:
                10px;
        }


        .hero-map-stack
        .hero-map-card {

            min-height:
                390px;

            border-radius:
                26px;
        }


        .hero-map-info-below {

            width:
                100%;

            grid-template-columns:
                40px minmax(0,1fr) 34px;

            gap:
                11px;

            min-height:
                94px;

            padding:
                15px;

            border-radius:
                21px;
        }


        .hero-map-info-icon {

            width:
                40px;

            height:
                40px;

            border-radius:
                13px;
        }


        .hero-map-info-copy h3 {

            font-size:
                13px;
        }


        .hero-map-info-copy span {

            font-size:
                8.8px;
        }


        .hero-map-info-action {

            width:
                34px;

            height:
                34px;
        }

    }