/* ====================================================== */
    /* MOBILE TOP + BOTTOM NAV STABILITY */
    /* ====================================================== */

    :root {
        --mobile-visual-top: 0px;
        --mobile-visual-bottom: 0px;
    }


    @media (max-width: 767px) {

        /*
            Mengurangi efek rubber-band yang membuat elemen fixed
            seperti ikut tertarik ke luar layar.
        */
        html,
        body {
            overscroll-behavior-y:
                none;
        }


        /* ================================================== */
        /* TOP NAVBAR */
        /* ================================================== */

        #navbar-container,
        #navbar-container.scrolled {

            /*
                Posisi mengikuti visual viewport browser mobile,
                bukan hanya layout viewport.
            */
            top:
                var(
                    --mobile-visual-top
                ) !important;

            left:
                0 !important;

            right:
                0 !important;

            /*
                PENTING:
                jangan lagi berubah padding ketika scroll > 40px.
                Inilah salah satu penyebab navbar terlihat
                tenggelam / berubah tinggi.
            */
            padding:
                9px 12px
                8px !important;

            margin:
                0 !important;

            transform:
                translate3d(
                    0,
                    0,
                    0
                ) !important;

            backface-visibility:
                hidden;

            -webkit-backface-visibility:
                hidden;

            will-change:
                auto;
        }


        /*
            Class .scrolled tetap boleh mengubah glass effect,
            tetapi TIDAK BOLEH mengubah geometri navbar.
        */
        #navbar-container #navbar-inner,
        #navbar-container.scrolled #navbar-inner {

            min-height:
                46px;

            padding:
                0 !important;

            margin:
                0 auto !important;

            transition:
                none !important;
        }


        /*
            Saat navbar sudah scroll, tetap kasih kaca yang rapi
            tanpa menggeser elemen.
        */
        #navbar-container.scrolled {

            background:
                rgba(
                    248,
                    252,
                    255,
                    .76
                ) !important;

            backdrop-filter:
                blur(22px)
                saturate(165%) !important;

            -webkit-backdrop-filter:
                blur(22px)
                saturate(165%) !important;

            border-bottom:
                1px solid
                rgba(
                    255,
                    255,
                    255,
                    .72
                ) !important;

            box-shadow:
                0 8px 28px
                rgba(
                    15,
                    23,
                    42,
                    .07
                ) !important;
        }


        /* ================================================== */
        /* BOTTOM NAVBAR */
        /* ================================================== */

        .mobile-bottom-nav {

            /*
                Bottom selalu menghitung ruang toolbar browser
                yang sedang terlihat.
            */
            bottom:
                calc(
                    var(
                        --mobile-visual-bottom
                    )
                    +
                    8px
                    +
                    env(
                        safe-area-inset-bottom
                    )
                ) !important;

            transform:
                translate3d(
                    0,
                    0,
                    0
                ) !important;

            backface-visibility:
                hidden;

            -webkit-backface-visibility:
                hidden;

            will-change:
                auto;
        }


        /*
            Bottom nav tidak boleh ikut mendapat transform
            dari animasi scroll lain di halaman.
        */
        #mobile-bottom-nav {
            translate:
                none !important;
        }


        /*
            Beri ruang konten sesuai tinggi bottom nav.
            Jadi konten terakhir tidak masuk ke balik bar.
        */
        body {

            padding-bottom:
                calc(
                    96px
                    +
                    env(
                        safe-area-inset-bottom
                    )
                ) !important;
        }


        /* ================================================== */
        /* CHATBOT */
        /* ================================================== */

        /*
            Chatbot ikut mengikuti visual bottom agar tidak
            bertabrakan dengan bottom navigation ketika toolbar
            browser berubah.
        */
        #cidadapbot-launcher {

            bottom:
                calc(
                    var(
                        --mobile-visual-bottom
                    )
                    +
                    94px
                    +
                    env(
                        safe-area-inset-bottom
                    )
                ) !important;
        }


        #cidadapbot-window {

            bottom:
                calc(
                    var(
                        --mobile-visual-bottom
                    )
                    +
                    88px
                    +
                    env(
                        safe-area-inset-bottom
                    )
                ) !important;
        }


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

        #mobile-menu.cidadap-mobile-menu {

            top:
                var(
                    --mobile-visual-top
                ) !important;

            height:
                calc(
                    100dvh
                    -
                    var(
                        --mobile-visual-top
                    )
                    -
                    var(
                        --mobile-visual-bottom
                    )
                ) !important;

            min-height:
                0 !important;
        }

    }


    /*
        iPhone / layar sangat kecil:
        sedikit dipadatkan, tetapi posisi tetap sama.
    */
    @media (max-width: 380px) {

        #navbar-container,
        #navbar-container.scrolled {

            padding:
                7px 9px
                7px !important;
        }


        #navbar-container #navbar-inner,
        #navbar-container.scrolled #navbar-inner {

            min-height:
                43px;
        }


        .mobile-bottom-nav {

            bottom:
                calc(
                    var(
                        --mobile-visual-bottom
                    )
                    +
                    6px
                    +
                    env(
                        safe-area-inset-bottom
                    )
                ) !important;
        }

    }