/* ====================================================== */
    /* CIDADAP LOGO - NAVBAR */
    /* ====================================================== */

    .cidadap-navbar-logo {

        width:
            50px;

        height:
            50px;

        flex:
            none;

        display:
            block;

        object-fit:
            contain;

        /*
            File cidadap-logo.png sekarang sudah transparan,
            jadi mix-blend-mode tidak lagi dibutuhkan.
        */
        mix-blend-mode:
            normal;

        filter:
            none;

        transform:
            translateZ(0);

        backface-visibility:
            hidden;
    }


    /* ====================================================== */
    /* HERO LOGO + TITLE */
    /* ====================================================== */

    /*
        Lockup dibuat meniru komposisi referensi:
        logo di kiri dan dua baris judul di kanan,
        keduanya dianggap satu unit visual.
    */
    .hero-brand-lockup {

        width:
            fit-content;

        max-width:
            min(100%, 980px);

        margin:
            0 auto
            1.5rem;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            clamp(
                20px,
                2vw,
                30px
            );
    }


    .hero-brand-logo {

        width:
            clamp(
                172px,
                11.5vw,
                194px
            );

        height:
            auto;

        flex:
            none;

        display:
            block;

        object-fit:
            contain;

        mix-blend-mode:
            normal;

        /*
            Sedikit turun supaya pusat visual simbol C +
            keranjang sejajar dengan dua baris judul.
        */
        translate:
            0 5px;

        transform-origin:
            center center;

        backface-visibility:
            hidden;

        will-change:
            transform,
            opacity,
            filter;
    }


    .hero-brand-lockup
    #hero-main-title {

        margin-bottom:
            0 !important;

        text-align:
            left;

        /*
            Mencegah judul mengecil atau wrap di posisi
            yang tidak diinginkan pada desktop.
        */
        flex:
            none;
    }


    /*
        Logo ikut intro animation Hero.
    */
    html.hero-intro-pending
    #hero-brand-logo {

        opacity:
            0;
    }


    /* ====================================================== */
    /* FOOTER LOGO */
    /* ====================================================== */

    .footer-brand-logo-shell {

        width:
            52px;

        height:
            52px;

        flex:
            none;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        overflow:
            hidden;

        border-radius:
            16px;

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

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

        box-shadow:
            0 10px 28px
            rgba(
                0,
                0,
                0,
                .12
            ),
            inset 0 1px 0
            rgba(
                255,
                255,
                255,
                .95
            );
    }


    .footer-brand-logo {

        width:
            45px;

        height:
            45px;

        display:
            block;

        object-fit:
            contain;
    }


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

    @media (
        max-width: 900px
    ) {

        .hero-brand-logo {

            width:
                clamp(
                    130px,
                    16vw,
                    158px
                );
        }


        .hero-brand-lockup {

            gap:
                18px;
        }

    }


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

    @media (
        max-width: 767px
    ) {

        .cidadap-navbar-logo {

            width:
                40px;

            height:
                40px;
        }


        .hero-brand-logo {

            width:
                clamp(
                    102px,
                    18vw,
                    126px
                );

            translate:
                0 2px;
        }

    }


    @media (
        max-width: 639px
    ) {

        /*
            Di layar HP logo berada di atas judul
            agar judul tidak terjepit.
        */
        .hero-brand-lockup {

            flex-direction:
                column;

            gap:
                8px;

            margin-bottom:
                1.25rem;
        }


        .hero-brand-lockup
        #hero-main-title {

            text-align:
                center;

            flex:
                initial;
        }


        .hero-brand-logo {

            width:
                104px;

            translate:
                0 0;
        }

    }