.nav-kanal {
	position: relative;
	padding-bottom: 10px; 
	margin-bottom: -10px; 
}
.nav-sub-kanal {
	visibility: hidden;
	opacity: 0;
	position: absolute; 
	left: 0;
	top: 95%; /* Sesuaikan ini agar overlap/nempel */
	background-color: #c53030; /* bg-red-800 atau bg-red-700 */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	border-radius: 0.25rem; 
	padding-top: 0.25rem; 
	padding-bottom: 0.25rem;
	z-index: 20;
	min-width: 150px;
	transition: opacity 0.2s ease-in-out, visibility 0s linear 0s; /* Ubah visibility transition */
}
.nav-kanal:hover .nav-sub-kanal,
.nav-kanal.active .nav-sub-kanal {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.2s ease-in-out;
}
/* Hamburger Menu Styles */
#mobile-menu-button { display: none; } /* Sembunyikan di desktop */
#main-nav-container { display: block; } /* Navigasi utama terlihat di desktop */
@media (min-width: 768px) {
	#article-image-container {
	  width: 450px;
	  float: left;
	  margin-right: 20px;
	}
}
@media (max-width: 768px) { /* md breakpoint Tailwind */
	#mobile-menu-button { display: block; }
	#main-nav-container {
		display: none; /* Sembunyikan nav utama */
		width: 100%;
		position: absolute;
		top: 100%; /* Di bawah header */
		left: 0;
		background-color: #c53030; /* Warna background sama dengan header atau submenu */
		box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
		z-index: 40; /* Di atas konten lain, di bawah header sticky jika ada */
	}
	#main-nav-container.open {
		display: block; /* Tampilkan saat 'open' */
	}
	#main-nav { /* Class pada <nav> di dalam container */
		flex-direction: column;
		align-items: stretch; /* Item nav memenuhi lebar */
	}
	.nav-kanal {
		width: 100%;
		padding-bottom: 0; /* Reset padding-bottom untuk mobile */
		margin-bottom: 0;  /* Reset margin-bottom untuk mobile */
	}
	.nav-kanal > a { /* Link kanal utama */
		display: block;
		padding: 10px 15px;
		border-bottom: 1px solid rgba(255,255,255,0.2);
	}
	.nav-sub-kanal { /* Submenu di mobile */
		position: static; /* Tidak absolute lagi */
		visibility: visible; /* Selalu visible jika parent di-expand (JS) */
		opacity: 1;
		display: none; /* Awalnya disembunyikan, di-toggle dengan JS */
		box-shadow: none;
		min-width: unset;
		background-color: #b91c1c; /* Sedikit lebih gelap dari parent-nya */
		padding-left: 20px; /* Indentasi submenu */
	}
	.nav-kanal.open-submenu .nav-sub-kanal {
		display: block;
	}
	.nav-kanal:hover .nav-sub-kanal { /* Matikan hover default di mobile */
		 /* Biarkan JS yang mengontrol */
	}
}
/* ... CSS pagination, dll ... */
.lazyload, .lazyloading { opacity: 0; }
.lazyloaded { opacity: 1; transition: opacity 300ms; }
.pagination a, .pagination span { margin: 0 2px; padding: 8px 12px; border: 1px solid #ddd; text-decoration: none; color: #337ab7; }
.pagination a:hover { background-color: #f0f0f0; }
.pagination span.active { background-color: #337ab7; color: white; border-color: #337ab7; }
.header-sticky { position: sticky; top: 0; background-color: #dc2626; /* Sesuaikan dengan bg-red-600 atau 700 */ z-index: 50; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
/* Styling khusus untuk halaman baca */
#article-content h1 { font-size: 2.25rem; /* text-3xl */ line-height: 2.5rem; font-weight: 700; margin-bottom: 0.75rem; }
#article-meta { font-size: 0.875rem; /* text-sm */ color: #4b5563; /* text-gray-600 */ margin-bottom: 1.5rem; }
#article-body { font-size: 1.125rem; /* text-lg */ line-height: 1.75; color: #1f2937; /* text-gray-800 */ text-align: justify; }
#article-body strong { font-weight: 600; }
#article-body a { color: #dc2626; /* text-red-600 */ text-decoration: underline; }
#article-body a:hover { color: #b91c1c; /* text-red-700 */ }
#article-body img { max-width: 100%; height: auto; margin-top: 1rem; margin-bottom: 1rem; border-radius: 0.375rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.main-article-image { width: 100%; max-height: 500px; object-fit: cover; border-radius: 0.5rem; margin-bottom: 0.5rem; }
.image-caption { font-size: 0.875rem; color: #6b7280; /* text-gray-500 */ text-align: center; }
.related-articles { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; /* border-gray-200 */ }
.related-articles h3 { font-size: 1.25rem; /* text-xl */ font-semibold; margin-bottom: 1rem; }
.related-articles ul li { margin-bottom: 0.5rem; }
.related-articles ul li a { color: #1d4ed8; /* text-blue-700 */ }
.related-articles ul li a:hover { text-decoration: underline; }