```php

<!-- Tambahan CSS Khusus Halaman Utama -->
<style>
    /* =======================================
       EFEK HERO SECTION (PREMIUM DARK & GOLD)
       ======================================= */
    .hero-section {
        background-color: #121212; /* Warna dasar gelap */
        background-image: radial-gradient(circle at 20% 30%, rgba(255, 193, 7, 0.15) 0%, transparent 40%), 
                          radial-gradient(circle at 80% 80%, rgba(255, 193, 7, 0.1) 0%, transparent 40%);
        padding: 100px 0;
        position: relative;
        overflow: hidden;
    }
    
    .hero-title {
        font-weight: 800;
        font-size: 3.5rem;
        color: #ffffff;
        line-height: 1.2;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }

    .hero-subtitle {
        color: #d1d5db;
        font-size: 1.15rem;
        line-height: 1.7;
    }

    /* Pembungkus dan Efek Gambar Banner */
    .hero-image-wrapper {
        position: relative;
        display: inline-block;
        z-index: 1;
    }

    .hero-image-wrapper::before {
        content: '';
        position: absolute;
        top: -15px;
        left: -15px;
        right: 15px;
        bottom: 15px;
        background-color: #ffc107;
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; /* Bentuk asimetris modern */
        z-index: -1;
        transition: all 0.5s ease;
    }

    .hero-image-wrapper:hover::before {
        border-radius: 50%;
        transform: rotate(15deg);
    }

    .hero-image {
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.4);
        transition: transform 0.4s ease;
        border: 4px solid #1f1f1f;
    }
    
    .hero-image:hover {
        transform: translateY(-10px);
    }

    /* Tombol Kustom */
    .btn-custom {
        border-radius: 50px;
        padding: 12px 32px;
        font-weight: 700;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
    }

    .btn-custom:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(255, 193, 7, 0.3);
    }

    /* =======================================
       CSS KARTU & PRODUK BAWAH
       ======================================= */
    .card-hover {
        border: none;
        border-radius: 16px;
        transition: all 0.3s ease;
        background: #fff;
    }

    .card-hover:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
    }

    .img-product {
        height: 220px;
        object-fit: cover;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

    .icon-circle {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        transition: all 0.3s ease;
    }
    
    .feature-card:hover .icon-circle {
        transform: scale(1.1);
    }

    /* =======================================
       RESPONSIVE MOBILE (TAMPILAN HP)
       ======================================= */
    @media (max-width: 768px) {
        .hero-section {
            padding: 50px 0; /* Mengurangi jarak atas-bawah di HP */
        }
        
        .hero-title {
            font-size: 2.2rem; /* Mengecilkan teks judul */
            margin-bottom: 15px !important;
        }
        
        .hero-subtitle {
            font-size: 1rem; /* Mengecilkan teks paragraf */
            margin-bottom: 25px !important;
        }
        
        .hero-image-wrapper {
            margin-bottom: 40px; /* Memberi jarak antara gambar dan teks saat ditumpuk */
        }
        
        .icon-circle {
            width: 60px; /* Mengecilkan ikon bulat di HP */
            height: 60px;
        }
        
        .icon-circle i {
            font-size: 1.5rem !important; /* Mengecilkan ikon di dalam lingkaran */
        }

        .tentang-kami-box {
            padding: 30px !important; /* Mengurangi padding box tentang kami di HP */
        }
    }
</style>

<!-- ========================= -->
<!-- HERO SECTION              -->
<!-- ========================= -->
<section class="hero-section">
    <div class="container">
        <!-- flex-column-reverse membuat gambar ada di atas saat di HP -->
        <div class="row align-items-center flex-column-reverse flex-lg-row">
            <div class="col-lg-6 mt-4 mt-lg-0 pe-lg-5 text-center text-lg-start">
                <div class="mb-4">
                    <span class="badge border border-warning text-warning px-3 py-2 rounded-pill fs-6 bg-dark bg-opacity-50">
                        <i class="bi bi-star-fill me-1"></i> Sajian Terbaik Untuk Anda
                    </span>
                </div>

                <h1 class="hero-title mb-4">
                    Sensasi Rasa Istimewa di <br> 
                    <span class="text-warning">Dapoer Slion</span>
                </h1>

                <p class="hero-subtitle mb-5">
                    Hadirkan momen tak terlupakan dengan layanan katering, snack box, nasi box, dan prasmanan premium kami. Dibuat dengan cinta, rasa otentik, dan harga yang bersahabat.
                </p>
                
                <!-- Tombol ini akan memanjang (stack) di HP dan menyamping di laptop -->
                <div class="d-flex flex-column flex-sm-row justify-content-center justify-content-lg-start gap-3">
                    <a href="customer/produk.php" class="btn btn-warning btn-custom text-dark shadow-sm">
                        <i class="bi bi-basket2-fill me-2"></i> Pesan Sekarang
                    </a>

                    <a href="#kategori" class="btn btn-outline-light btn-custom">
                        Lihat Menu
                    </a>
                </div>
            </div>
            
            <div class="col-lg-6 text-center">
                <!-- Wrapper Gambar dengan Latar Asimetris Kuning -->
                <div class="hero-image-wrapper">
                    <img src="assets/banner.jpeg" 
                         alt="Banner Dapoer Slion" 
                         class="img-fluid hero-image" 
                         style="max-height:400px; width:100%; object-fit: cover;">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ========================= -->
<!-- KATEGORI PRODUK           -->
<!-- ========================= -->
<section id="kategori" class="container mt-5 pt-4">
    <div class="text-center mb-5">
        <h6 class="text-warning fw-bold text-uppercase tracking-wide">
            Pilihan Kami
        </h6>

        <h2 class="fw-bold">Kategori Layanan</h2>
    </div>

    <div class="row g-4 justify-content-center">

        <!-- Nasi Box -->
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card card-hover shadow-sm text-center p-4 h-100 border border-light">
                <div class="card-body">

                    <div class="icon-circle bg-warning bg-opacity-10 text-warning mx-auto">

                        <!-- LOGO NASI BOX -->
                        <i class="bi bi-box2-fill display-5"></i>

                    </div>

                    <h4 class="mt-3 fw-bold">Nasi Box</h4>

                    <p class="text-muted small mb-0">
                        Praktis, higienis, dan mengenyangkan untuk acara Anda.
                    </p>

                </div>
            </div>
        </div>

        <!-- Snack Box -->
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card card-hover shadow-sm text-center p-4 h-100 border border-light">
                <div class="card-body">

                    <div class="icon-circle bg-danger bg-opacity-10 text-danger mx-auto">

                      <!-- Nasi Box -->
                    <i class="bi bi-box2-fill display-5"></i>

                    </div>

                    <h4 class="mt-3 fw-bold">Snack Box</h4>

                    <p class="text-muted small mb-0">
                        Pilihan camilan manis dan gurih dalam satu kotak.
                    </p>

                </div>
            </div>
        </div>

        <!-- Minuman -->
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card card-hover shadow-sm text-center p-4 h-100 border border-light">
                <div class="card-body">

                    <div class="icon-circle bg-success bg-opacity-10 text-success mx-auto">

                        <!-- LOGO MINUMAN TETAP -->
                        <i class="bi bi-cup-straw display-5"></i>

                    </div>

                    <h4 class="mt-3 fw-bold">Minuman</h4>

                    <p class="text-muted small mb-0">
                        Sajian elegan dan lengkap untuk momen spesial.
                    </p>

                </div>
            </div>
        </div>

    </div>
</section>

<!-- ========================= -->
<!-- PRODUK TERBARU            -->
<!-- ========================= -->
<section class="container mt-5 pt-5">
    <div class="d-flex justify-content-between align-items-end mb-4">

        <div>
            <h6 class="text-warning fw-bold text-uppercase">
                Menu Favorit
            </h6>

            <h2 class="fw-bold mb-0">
                Produk Terbaru
            </h2>
        </div>

        <a href="customer/produk.php" 
           class="btn btn-outline-dark btn-sm rounded-pill px-4 d-none d-md-block">
            Lihat Semua
        </a>

    </div>

    <div class="row g-4">