/* ====================================================== */
    /* DAFTAR UMKM - FULL MAP BACKGROUND */
    /* ====================================================== */

    /*
        File awal sudah menggunakan peta Cidadap sebagai identitas
        visual. Pada halaman Daftar UMKM, background putih lama
        menutup peta tersebut. Override ini membuat peta terlihat
        kembali tanpa mengganggu navbar, filter, kartu, chatbot,
        dan footer.
    */

    #directory-page {
        position: relative;
        z-index: 1;

        min-height: 100vh;

        overflow: hidden;

        background:
            transparent !important;

        isolation:
            isolate;
    }


    /* ====================================================== */
    /* LAYER PETA */
    /* ====================================================== */

    #directory-page::before {
        content: "";

        position: absolute;
        inset: 0;

        z-index: -2;

        pointer-events: none;

        background-color:
            #f0f9ff;

        background-image:
            url('https://lh3.googleusercontent.com/d/1_uJr5viwuC4N85Fo5GnzSIlpDvhPBQc4');

        background-size:
            cover;

        background-position:
            center top;

        background-repeat:
            no-repeat;

        /*
            Sedikit scale supaya sisi peta tidak terasa kosong
            pada layar ultra-wide.
        */
        transform:
            scale(1.035);

        transform-origin:
            center top;

        opacity:
            1;
    }


    /* ====================================================== */
    /* OVERLAY PUTIH LEMBUT */
    /* ====================================================== */

    #directory-page::after {
        content: "";

        position: absolute;
        inset: 0;

        z-index: -1;

        pointer-events: none;

        background:
            linear-gradient(
                180deg,

                rgba(248, 252, 255, .38) 0%,

                rgba(248, 252, 255, .48) 16%,

                rgba(255, 255, 255, .62) 35%,

                rgba(255, 255, 255, .72) 58%,

                rgba(255, 255, 255, .82) 78%,

                rgba(255, 255, 255, .92) 100%
            ),

            radial-gradient(
                circle at 50% 8%,

                rgba(255, 255, 255, .20),

                transparent 38%
            );
    }


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

    .directory-banner-section {
        position: relative;

        z-index: 2;

        padding:
            132px 1.5rem 24px !important;

        background:
            transparent !important;
    }


    /*
        Banner tetap terlihat sebagai panel putih lembut,
        tapi tidak seputih solid seperti sebelumnya.
    */
    .directory-banner {
        width:
            min(100%, 1280px);

        margin:
            0 auto;

        overflow:
            hidden;

        border-radius:
            30px;

        background:
            rgba(255, 255, 255, .84) !important;

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

        backdrop-filter:
            blur(8px)
            saturate(120%);

        -webkit-backdrop-filter:
            blur(8px)
            saturate(120%);

        box-shadow:
            0 22px 60px rgba(15, 23, 42, .08),
            inset 0 1px 0 rgba(255, 255, 255, .86);
    }


    .directory-banner img {
        width:
            100%;

        height:
            auto;

        display:
            block;
    }


    /* ====================================================== */
    /* DIREKTORI / SEARCH / FILTER */
    /* ====================================================== */

    .directory-main {
        position: relative;

        z-index: 2;

        padding:
            36px 1.5rem 96px !important;

        background:
            transparent !important;
    }


    /*
        Search dibuat sedikit glassy supaya terlihat menyatu
        dengan peta seperti navbar.
    */
    .directory-search {
        background:
            rgba(255, 255, 255, .84) !important;

        border:
            1px solid rgba(255, 255, 255, .92) !important;

        backdrop-filter:
            blur(14px)
            saturate(130%);

        -webkit-backdrop-filter:
            blur(14px)
            saturate(130%);

        box-shadow:
            0 14px 34px rgba(15, 23, 42, .075),
            inset 0 1px 0 rgba(255, 255, 255, .90);
    }


    .directory-search:focus-within {
        background:
            rgba(255, 255, 255, .94) !important;

        border-color:
            rgba(125, 211, 252, .90) !important;

        box-shadow:
            0 18px 42px rgba(14, 165, 233, .12),
            0 0 0 4px rgba(14, 165, 233, .07);
    }


    .directory-chip {
        background:
            rgba(255, 255, 255, .80) !important;

        border:
            1px solid rgba(255, 255, 255, .90) !important;

        backdrop-filter:
            blur(11px)
            saturate(125%);

        -webkit-backdrop-filter:
            blur(11px)
            saturate(125%);

        box-shadow:
            0 7px 18px rgba(15, 23, 42, .035);
    }


    .directory-chip:hover {
        background:
            rgba(255, 255, 255, .95) !important;

        border-color:
            rgba(125, 211, 252, .92) !important;
    }


    .directory-chip.active {
        color:
            #ffffff !important;

        background:
            #0ea5e9 !important;

        border-color:
            #0ea5e9 !important;

        box-shadow:
            0 10px 24px rgba(14, 165, 233, .22) !important;
    }


    /* ====================================================== */
    /* CARD UMKM */
    /* ====================================================== */

    .directory-card {
        background:
            rgba(255, 255, 255, .88) !important;

        border:
            1px solid rgba(255, 255, 255, .92) !important;

        backdrop-filter:
            blur(8px);

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

        box-shadow:
            0 14px 36px rgba(15, 23, 42, .06),
            inset 0 1px 0 rgba(255, 255, 255, .88);
    }


    .directory-card:hover {
        border-color:
            rgba(125, 211, 252, .95) !important;

        box-shadow:
            0 26px 60px rgba(14, 165, 233, .12),
            inset 0 1px 0 rgba(255, 255, 255, .94);
    }


    /* ====================================================== */
    /* CTA BAWAH DIREKTORI */
    /* ====================================================== */

    .directory-bottom-cta {
        background:
            rgba(255, 255, 255, .78) !important;

        border:
            1px solid rgba(255, 255, 255, .90) !important;

        backdrop-filter:
            blur(14px)
            saturate(125%);

        -webkit-backdrop-filter:
            blur(14px)
            saturate(125%);

        box-shadow:
            0 16px 38px rgba(15, 23, 42, .055);
    }


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

    @media (max-width: 768px) {

        /*
            Hindari background fixed / efek berat di mobile.
            Peta tetap terlihat tetapi compositor bekerja lebih ringan.
        */
        #directory-page::before {
            background-size:
                auto 100%;

            background-position:
                44% top;

            transform:
                scale(1.02);
        }


        #directory-page::after {
            background:
                linear-gradient(
                    180deg,

                    rgba(248, 252, 255, .48) 0%,

                    rgba(255, 255, 255, .66) 28%,

                    rgba(255, 255, 255, .82) 58%,

                    rgba(255, 255, 255, .94) 100%
                );
        }


        .directory-banner-section {
            padding:
                110px 12px 18px !important;
        }


        .directory-banner {
            border-radius:
                22px;
        }


        .directory-main {
            padding:
                26px 14px 72px !important;
        }

    }