/* ====================================================== */
    /* MOBILE BOTTOM NAVIGATION - INTERACTIVE V2 */
    /* ====================================================== */

    .mobile-bottom-nav {
        display:
            none;
    }


    @media (max-width: 767px) {

        /*
            Konsistensi ukuran bottom navigation di semua halaman.
            index.html tidak memuat page-base.css, sedangkan halaman
            internal memuatnya. Tanpa aturan ini padding + border pada
            bottom nav dihitung di luar tinggi elemen (content-box),
            sehingga navbar Beranda terlihat lebih tinggi/besar.

            Border-box dibuat lokal hanya untuk komponen bottom nav agar
            tidak mengubah layout halaman lain.
        */
        .mobile-bottom-nav,
        .mobile-bottom-nav *,
        .mobile-bottom-nav *::before,
        .mobile-bottom-nav *::after {
            box-sizing: border-box;
        }

        body {
            padding-bottom:
                calc(
                    88px +
                    env(
                        safe-area-inset-bottom
                    )
                );
        }


        .mobile-bottom-nav {

            --active-index:
                0;

            position:
                fixed;

            left:
                10px;

            right:
                10px;

            bottom:
                calc(
                    8px +
                    env(
                        safe-area-inset-bottom
                    )
                );

            z-index:
                30;

            min-height:
                68px;

            display:
                grid;

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

            align-items:
                stretch;

            padding:
                6px;

            overflow:
                visible;

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

            border-radius:
                24px;

            background:
                linear-gradient(
                    135deg,
                    rgba(255,255,255,.95),
                    rgba(248,252,255,.89)
                );

            box-shadow:
                0 17px 45px
                rgba(
                    15,
                    23,
                    42,
                    .13
                ),
                inset 0 1px 0
                rgba(255,255,255,.98);

            backdrop-filter:
                blur(24px)
                saturate(165%);

            -webkit-backdrop-filter:
                blur(24px)
                saturate(165%);

            transform:
                translateZ(0);

            backface-visibility:
                hidden;
        }


        /* Bubble aktif yang bergeser */
        .mobile-bottom-indicator {

            position:
                absolute;

            z-index:
                0;

            top:
                6px;

            bottom:
                6px;

            left:
                6px;

            width:
                calc(
                    (
                        100% - 12px
                    ) / 4
                );

            padding:
                0 4px;

            pointer-events:
                none;

            transform:
                translate3d(
                    calc(
                        var(--active-index)
                        * 100%
                    ),
                    0,
                    0
                );

            transition:
                transform .43s
                cubic-bezier(
                    .16,
                    1,
                    .3,
                    1
                );

            will-change:
                transform;
        }


        .mobile-bottom-indicator::before {

            content:
                "";

            position:
                absolute;

            inset:
                0 4px;

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

            border-radius:
                18px;

            background:
                linear-gradient(
                    155deg,
                    rgba(224,242,254,.94),
                    rgba(240,249,255,.72)
                );

            box-shadow:
                0 8px 20px
                rgba(
                    14,
                    165,
                    233,
                    .09
                ),
                inset 0 1px 0
                rgba(255,255,255,.94);
        }


        .mobile-bottom-indicator::after {

            content:
                "";

            position:
                absolute;

            left:
                50%;

            top:
                -6px;

            width:
                30px;

            height:
                4px;

            border-radius:
                999px;

            transform:
                translateX(-50%);

            background:
                linear-gradient(
                    90deg,
                    #38bdf8,
                    #0ea5e9,
                    #0284c7
                );

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


        .mobile-bottom-indicator-glow {

            position:
                absolute;

            width:
                46px;

            height:
                28px;

            left:
                50%;

            top:
                -5px;

            transform:
                translateX(-50%);

            border-radius:
                50%;

            background:
                radial-gradient(
                    circle,
                    rgba(14,165,233,.18),
                    transparent 72%
                );

            filter:
                blur(3px);
        }


        .mobile-bottom-link {

            position:
                relative;

            z-index:
                2;

            min-width:
                0;

            min-height:
                56px;

            display:
                flex;

            flex-direction:
                column;

            align-items:
                center;

            justify-content:
                center;

            gap:
                3px;

            padding:
                7px 3px
                5px;

            overflow:
                hidden;

            border-radius:
                18px;

            color:
                #94a3b8;

            text-decoration:
                none;

            -webkit-tap-highlight-color:
                transparent;

            user-select:
                none;

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


        .mobile-bottom-ripple {

            position:
                absolute;

            width:
                18px;

            height:
                18px;

            left:
                var(--ripple-x);

            top:
                var(--ripple-y);

            z-index:
                -1;

            border-radius:
                50%;

            pointer-events:
                none;

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

            transform:
                translate(-50%,-50%)
                scale(0);

            animation:
                mobileBottomRipple
                .56s
                cubic-bezier(.16,1,.3,1)
                forwards;
        }


        @keyframes mobileBottomRipple {

            0% {
                opacity:
                    .75;

                transform:
                    translate(-50%,-50%)
                    scale(.2);
            }

            100% {
                opacity:
                    0;

                transform:
                    translate(-50%,-50%)
                    scale(7);
            }

        }


        .mobile-bottom-link.active {
            color:
                #0369a1;

            font-weight:
                800;
        }


        .mobile-bottom-icon {

            position:
                relative;

            width:
                34px;

            height:
                29px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                12px;

            transition:
                transform .38s
                cubic-bezier(.16,1,.3,1),
                color .28s ease,
                filter .28s ease;
        }


        .mobile-bottom-icon svg {
            transition:
                transform .38s
                cubic-bezier(.16,1,.3,1),
                stroke-width .28s ease;
        }


        .mobile-bottom-link.active
        .mobile-bottom-icon {

            color:
                #0284c7;

            transform:
                translateY(-3px);

            filter:
                drop-shadow(
                    0 4px 5px
                    rgba(14,165,233,.16)
                );
        }


        .mobile-bottom-link.active
        .mobile-bottom-icon svg {

            transform:
                scale(1.10);

            stroke-width:
                2.35;
        }


        .mobile-bottom-label {

            max-width:
                100%;

            overflow:
                hidden;

            text-overflow:
                ellipsis;

            white-space:
                nowrap;

            font-size:
                9.5px;

            line-height:
                1;

            letter-spacing:
                -.012em;

            transition:
                transform .34s
                cubic-bezier(.16,1,.3,1),
                letter-spacing .3s ease;
        }


        .mobile-bottom-link.active
        .mobile-bottom-label {

            transform:
                translateY(-1px);

            letter-spacing:
                .005em;
        }


        .mobile-bottom-link.tap-active {

            transform:
                scale(.93);
        }


        .mobile-bottom-link.tap-active
        .mobile-bottom-icon svg {

            animation:
                mobileBottomIconPop
                .38s
                cubic-bezier(.16,1,.3,1);
        }


        @keyframes mobileBottomIconPop {

            0% {
                transform:
                    scale(1);
            }

            45% {
                transform:
                    translateY(-3px)
                    scale(1.24)
                    rotate(-5deg);
            }

            100% {
                transform:
                    scale(1.08);
            }

        }


        #mobile-menu {
            z-index:
                80 !important;
        }


        #cidadapbot-launcher {

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


        #cidadapbot-window {

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

            height:
                min(
                    610px,
                    calc(
                        100dvh -
                        112px -
                        env(
                            safe-area-inset-bottom
                        )
                    )
                ) !important;
        }

    }


    @media (max-width: 360px) {

        .mobile-bottom-nav {
            left:
                7px;

            right:
                7px;

            border-radius:
                21px;
        }


        .mobile-bottom-label {
            font-size:
                8.8px;
        }

    }


    @media (prefers-reduced-motion: reduce) {

        .mobile-bottom-indicator,
        .mobile-bottom-link,
        .mobile-bottom-icon,
        .mobile-bottom-icon svg,
        .mobile-bottom-label {

            transition:
                none !important;
        }


        .mobile-bottom-ripple {
            display:
                none !important;
        }

    }