/* ================================================
MENU BANNER SECTION - TEKS KIRI BAWAH, LABEL JAJAR GENJANG (LENGKAP)
================================================ */
.menu-banner-section {
	margin: 0; padding: 0; position: relative; width: 100%;
	height: 60vh; /* Tinggi 60% dari layar */
	overflow: hidden;
	display: flex;
	align-items: flex-end; /* Vertikal: Bawah */
	justify-content: flex-start; /* Horizontal: Kiri */
	
	border: 1px solid #ffffffff;
	background-color: #000000; /* Latar belakang hitam untuk 'contain' */
}

/* 1. Gambar Latar Belakang */
.menu-banner-section .banner-image-wrapper {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	z-index: 1; transition: filter 0.5s ease, transform 0.5s ease;
	display: flex; /* Untuk pusatkan gambar 'contain' */
	align-items: center;
	justify-content: center;
}
.menu-banner-section .banner-image-wrapper img {
	width: 100%; height: 100%;
	object-fit: cover; /* Tampilkan seluruh gambar, mungkin ada bar hitam */
	display: block;
}

/* 2. Konten Teks */
.menu-banner-section .banner-content {
	position: relative; z-index: 3; color: white;
	text-align: left; padding: 2.5rem;
	max-width: 90%;
}

/* Struktur Banner Berita Bertingkat */
.news-banner-stacked {
	display: inline-block; /* Lebar sesuai konten */
	margin-bottom: 0;
	transition: transform 0.5s ease;
	transform: translateY(0);
}

/* Style umum untuk kedua label */
.category-label-stacked,
.menu-name-label-stacked {
	display: block;
	position: relative;
	padding: 0.5rem 2rem; /* Padding horizontal lebih banyak */
	white-space: nowrap;
	margin-bottom: -1px; /* Agar border tumpang tindih (jika ada) */
	width: fit-content; /* Lebar sesuai teks */
	box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.category-label-stacked {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	clip-path: polygon(0% 0%, 95% 0%, 100% 100%, 5% 100%); /* Jajar genjang atas */
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
}

.menu-name-label-stacked {
	font-size: clamp(1.2rem, 3vw, 1.8rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: -5px; /* Sedikit naik agar tumpang tindih */
	clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%); /* Jajar genjang bawah terbalik */
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}

/* Deskripsi di bawah banner */
.banner-description {
	font-size: clamp(0.9rem, 2vw, 1.1rem); max-width: 600px;
	opacity: 0; margin-top: 1.5rem; /* Beri jarak lebih dari label */
	transition: opacity 0.5s ease, transform 0.5s ease;
	transform: translateY(10px);
}

/* 3. Tautan Overlay */
.menu-banner-section .banner-link {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4;
}

/* ================================================
SKEMA WARNA (Hitam Pekat & Putih Murni)
================================================ */

/* Style Gelap (Default) */
.banner-style-dark .category-label-stacked {
	background-color: #ffffff; color: #000000;
}
.banner-style-dark .menu-name-label-stacked {
	background-color: #000000; color: #ffffff;
}
.banner-style-dark .banner-description { color: #e5e7eb; }

/* Style Terang */
.banner-style-light .category-label-stacked {
	background-color: #000000; color: #ffffff;
}
.banner-style-light .menu-name-label-stacked {
	background-color: #ffffff; color: #000000;
}
.banner-style-light .banner-description { color: #f9fafb; }

/* ================================================
EFEK HOVER
================================================ */
.menu-banner-section:hover .banner-image-wrapper {
	filter: blur(8px) brightness(0.7);
	transform: scale(1.0); /* Hapus zoom agar 'contain' tetap */
}
/* Overlay tidak lagi diperlukan */

.menu-banner-section:hover .banner-content {
	transform: scale(1.0);
}
.menu-banner-section:hover .news-banner-stacked {
	transform: translateY(-5px) scale(1.03); /* Sedikit naik dan membesar */
}
.menu-banner-section:hover .banner-description {
	opacity: 1;
	transform: translateY(0);
}

/* ================================================
RESPONSIVE
================================================ */
@media (max-width: 768px) {
	.menu-banner-section { height: 45vh; }
	.menu-banner-section .banner-content { padding: 1.5rem; max-width: 95%; }
	.news-banner-stacked { max-width: 100%; }
	.category-label-stacked { padding: 0.2rem 1.5rem; font-size: 0.7rem; }
	.menu-name-label-stacked { padding: 0.3rem 1.5rem; font-size: clamp(1rem, 4vw, 1.5rem); margin-top: -4px; }
	.banner-description { margin-top: 1rem; font-size: 0.9rem; }
}