
    {{-- ================= HEADER ================= --}}
    <header class="w-full border-b border-gray-200 bg-white">
        <div class="max-w-6xl mx-auto px-6 py-5 flex items-center justify-between">

            {{-- MOBILE LAYOUT --}}
            <div class="w-full flex flex-col items-center gap-3 md:hidden">

                {{-- CENTER LOGO (UTAMA) --}}
                <img
                    src="{{ asset('images/AlihAksara.png') }}"
                    class="h-16 object-contain"
                >

                {{-- LEFT + RIGHT LOGO --}}
                <div class="flex items-center justify-center gap-6">
                    <img
                        src="{{ asset('images/Kementrian-Kebudayaan.png') }}"
                        class="h-10 object-contain"
                    >
                    <img
                        src="{{ asset('images/dana-indonesia.png') }}"
                        class="h-5 object-contain"
                    >
                </div>

            </div>

            {{-- DESKTOP LAYOUT --}}
            <div class="w-full hidden md:grid grid-cols-3 items-center">

                {{-- LEFT --}}
                <div class="flex justify-start">
                    <img
                        src="{{ asset('images/Kementrian-Kebudayaan.png') }}"
                        class="h-12 lg:h-14 object-contain"
                    >
                </div>

                {{-- CENTER --}}
                <div class="flex justify-center">
                    <img
                        src="{{ asset('images/AlihAksara.png') }}"
                        class="h-20 lg:h-24 object-contain"
                    >
                </div>

                {{-- RIGHT --}}
                <div class="flex justify-end">
                    <img
                        src="{{ asset('images/dana-indonesia.png') }}"
                        class="h-7 lg:h-8 object-contain"
                    >
                </div>

            </div>

        </div>
    </header>
