/* style.css - Responsive Version */
:root {
    --primary-color: #36abfc;
    --dark-color: #222;
    --light-bg: #fdfdfd;
}

body { 
    font-family: 'Raleway', sans-serif; 
    margin: 0; 
    overflow-x: hidden; /* Mencegah scroll ke samping di HP */
}

/* NAVBAR RESPONSIVE */
.navbar {
    background: #fff;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.navbar-brand img {
    height: 35px; /* Lebih kecil sedikit agar pas di layar HP */
}

/* HERO SECTION - Responsive Height */
.hero-main {
    height: 70vh; /* Di HP jangan 100vh supaya user tahu ada konten di bawahnya */
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('https://monicaloves.co.nz/wp-content/uploads/2016/04/ML-Rogue-Society-Promo-032.jpg?auto=format&fit=crop&w=1000&q=80');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    padding: 20px;
}

.hero-main h1 {
    font-size: 2.5rem; /* Ukuran pas untuk HP */
}

/* MENU ITEM - Flex Wrap untuk Mobile */
.menu-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default 1 kolom (Mobile) */
    gap: 20px;
}

/* Desktop Version (Layar > 768px) */
@media (min-width: 768px) {
    .hero-main h1 { font-size: 4rem; }
    .hero-main { height: 85vh; }
    .menu-grid { grid-template-columns: 1fr 1fr; } /* Jadi 2 kolom di Desktop */
}

.menu-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.price {
    color: var(--primary-color);
    font-weight: bold;
    display: block; /* Supaya harga di bawah nama menu kalau layar kekecilan */
}

/* FOOTER */
footer {
    background: var(--dark-color);
    color: #ccc;
    padding: 40px 20px;
    text-align: center;
}