/* Custom Variables and Styles */
:root {
	--bs-primary-green: #004d40;
	--bs-accent-gold: #c5a973;
	--bs-font-sans-serif: "Inter", sans-serif;
	--bs-body-font-family: var(--bs-font-sans-serif);
	--bs-body-bg: #f8f9fa;
	/* bg-gray-50 */
}

/* Custom Colors */
.bg-primary-green {
	background-color: var(--bs-primary-green);
}

.text-primary-green {
	color: var(--bs-primary-green);
}

.border-primary-green {
	border-color: var(--bs-primary-green);
}

.bg-accent-gold {
	background-color: var(--bs-accent-gold);
}

.text-accent-gold {
	color: var(--bs-accent-gold);
}

.border-accent-gold {
	border-color: var(--bs-accent-gold);
}

/* Custom Buttons */
.btn-accent-gold {
	background-color: var(--bs-accent-gold);
	color: var(--bs-primary-green);
	border-color: var(--bs-accent-gold);
	font-weight: 600;
}

.btn-accent-gold:hover {
	background-color: #b39867;
	border-color: #b39867;
	color: var(--bs-primary-green);
}

.btn-primary-green {
	background-color: var(--bs-primary-green);
	color: white;
	border-color: var(--bs-primary-green);
	font-weight: 600;
}

.btn-primary-green:hover {
	background-color: #00382e;
	border-color: #00382e;
	color: white;
}

/* Custom Fonts */
.font-display {
	font-family: "Montserrat", sans-serif;
}

/* Custom scrollbar */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: #004d40;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: #00382e;
}

/* --- Component Overrides & Custom Styles --- */

/* Navbar Active State */
.navbar-nav .nav-link.active {
	color: var(--bs-primary-green) !important;
	font-weight: 700;
	border-bottom: 2px solid var(--bs-accent-gold);
	padding-bottom: 0.25rem;
}

.navbar-nav .nav-link:not(.active) {
	color: #4b5563;
	/* text-gray-600 */
	font-weight: 600;
}

.navbar-nav .nav-link:hover {
	color: var(--bs-primary-green);
}

.navbar-brand img {
	height: 3rem;
	/* h-12 */
}

.navbar-brand div {
	line-height: 1.2;
}
.navbar-brand .logo-line-1,
.navbar-brand .logo-line-2 {
	text-transform: uppercase;
	margin-bottom: 0;
	line-height: 1.2;
}

/* Styling Baris 1 (MAHKAMAH AGUNG) */
.navbar-brand .logo-line-1 {
	font-family: var(--bs-font-sans-serif); /* Font Inter (biasa) */
	
	/* UBAHAN DI SINI: */
	font-size: 0.9rem; /* Kita naikkan dari 0.8rem agar lebih panjang */
	font-weight: 400;
	color: var(--bs-primary-green); /* Kita ubah jadi hijau */
}

/* Styling Baris 2 (DIREKTORAT JENDERAL) */
.navbar-brand .logo-line-2 {
	font-family: var(--bs-font-display); /* Font Montserrat (judul) */
	font-size: 0.9rem;
	font-weight: 700; /* Bold */
	color: var(--bs-primary-green); /* Warna hijau utama */
}
/* =================================
	STYLING TAMPILAN ARTIKEL (COM_CONTENT)
================================= */

/* 1. Mengatur Judul Artikel */
.com_content .page-header {
    text-align: center; /* Buat rata tengah */
    margin-bottom: 1rem; /* Jarak ke info di bawahnya */
}
.com_content .page-header h1 {
    font-family: var(--bs-font-display); /* Font Montserrat (jika perlu) */
    font-size: 2.25rem; /* PERKECIL UKURAN FONT (sesuaikan angkanya) */
    font-weight: 700;
    color: var(--bs-primary-green); /* Samakan warnanya */
    line-height: 1.3;
}

/* 2. Mengatur Info Artikel (Written by, Published, Hits) */

/* Target kontainer utama info */
.com_content .article-info {
    text-align: center; /* Ikut rata tengah */
    color: var(--bs-secondary-color); /* Warna abu-abu */
    font-size: 0.9rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #dee2e6; /* Garis pemisah */
}

/* Hapus bullet points jika Joomla menggunakan <ul> */
.com_content .article-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* INI KUNCINYA: Paksa semua item jadi 1 baris */
.com_content .article-info .createdby,
.com_content .article-info .published,
.com_content .article-info .hits,
.com_content .article-info li {
    display: inline-block;
    margin: 0 0.5rem; /* Beri jarak antar item */
}
/* =================================
	STYLING LOGO (VERSI MOBILE)
================================= */

/* Baris 1 Mobile: Mahkamah Agung RI */
.navbar-brand .logo-mobile-1 {
	font-family: var(--bs-font-sans-serif); /* Font Inter */
	font-size: 0.8rem; /* Kecil */
	font-weight: 400;
	color: var(--bs-primary-green);
	text-transform: none; /* Sesuai permintaan Anda "Mahkamah Agung RI" */
	margin-bottom: 0;
	line-height: 1.2;
}

/* Baris 2 Mobile: DITJEN BADILAG */
.navbar-brand .logo-mobile-2 {
	font-family: var(--bs-font-display); /* Font Montserrat */
	font-size: 1.1rem; /* Besar */
	font-weight: 700;
	color: var(--bs-primary-green);
	text-transform: uppercase; /* Sesuai permintaan Anda "DITJEN BADILAG" */
	margin-bottom: 0;
	line-height: 1.2;
}
.dropdown-item:hover {
	background-color: #f8f9fa;
	/* bg-gray-100 */
}

/* Profil Nav */
.profil-nav-link.active {
	background-color: var(--bs-primary-green);
	color: white;
	border-left: 4px solid var(--bs-accent-gold);
}

.profil-nav-link:not(.active) {
	color: #374151;
	/* text-gray-700 */
	border-left: 4px solid transparent;
}

.profil-nav-link:hover {
	background-color: #f8f9fa;
}

.profil-nav-link.active i {
	color: white !important;
}

.profil-nav-link i {
	color: #6b7280;
	/* text-gray-500 */
}

.profil-nav-link:hover i {
	color: var(--bs-primary-green);
}
/* =================================
   MEMBUAT GAMBAR DI DALAM ARTIKEL JADI RESPONSIVE
   ================================= */

/* Target semua <img> di dalam badan artikel */
/* Kita pakai class .com-content-article__body dari DevTools Anda sebelumnya */
.com-content-article .com-content-article__body img {
    max-width: 100% !important; /* 1. JANGAN biarkan lebih lebar dari container */
    height: auto !important;     /* 2. Jaga rasio aspek (biar tidak gepeng) */
    width: 100% !important;      /* 3. TIMPA 'width="400"' yg mungkin di-set editor */
    display: block;             /* 4. Hapus space aneh di bawah gambar */
    margin: 1.5rem auto;        /* 5. Beri jarak atas/bawah & ratakan tengah */
}
/* Hero Carousel */
#hero-carousel .carousel-item {
	height: 70vh;
	background-position: center;
	background-size: cover;
}

#hero-carousel .carousel-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

#hero-carousel .carousel-item:first-child::before {
	background-color: rgba(0, 77, 64, 0.7);
	/* bg-primary-green bg-opacity-70 */
}

#hero-carousel .carousel-item:nth-child(2)::before {
	background-color: rgba(0, 0, 0, 0.6);
	/* bg-black bg-opacity-60 */
}

#hero-carousel .hero-content {
	position: relative;
	z-index: 10;
}

/* Akses Cepat Link Cards */
.card-link {
	transition: all 0.3s ease-in-out;
	color: #374151;
	/* text-gray-800 */
}

.card-link:hover {
	background-color: var(--bs-primary-green) !important;
	color: white;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
	/* shadow-xl */
}

.card-link .bi {
	color: var(--bs-primary-green);
	transition: color 0.3s ease-in-out;
}

.card-link:hover .bi {
	color: var(--bs-accent-gold);
}

.card-link:hover h3 {
	color: white;
}

.card-link:hover p {
	color: #e5e7eb;
	/* text-gray-200 */
}

/* Line Clamp */
.line-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.bg-primary-green .d-flex a {
	color: white;
	text-decoration: none;
}

.bg-primary-green .d-flex a:hover {
	color: var(--bs-accent-gold);
	/* Efek hover emas */
}

#mainNavbar .mod-finder {
	padding-top: 0;
	padding-bottom: 0;
}

#mainNavbar ul.navbar-nav > li.nav-item:has(form.mod-finder) {
	margin-left: 1rem;
	/* Sesuaikan jarak jika perlu */
}

/* Navbar Active State (LEBIH SPESIFIK) */
.navbar-nav > li.nav-item > a.nav-link.active {
	font-family: var(--bs-font-sans-serif);
	/* <-- TAMBAHKAN INI */
	color: var(--bs-primary-green) !important;
	font-weight: 700;
	border-bottom: 2px solid var(--bs-accent-gold);
	padding-bottom: 0.25rem;
}

/* Navbar Link Biasa (LEBIH SPESIFIK) */
.navbar-nav > li.nav-item > a.nav-link:not(.active) {
	font-family: var(--bs-font-sans-serif);
	/* <-- TAMBAHKAN INI */
	color: #4b5563;
	/* text-gray-600 */
	font-weight: 600;
	border-bottom: 2px solid transparent;
	padding-bottom: 0.25rem;
}

/* Navbar Link Hover (LEBIH SPESIFIK) */
.navbar-nav > li.nav-item > a.nav-link:hover {
	/* Tambahkan '> li.nav-item > a' */
	color: var(--bs-primary-green);
}

/* Navbar Active State (SELECTOR DIPERBAIKI) */
.navbar-nav > li.nav-item.active > a.nav-link {
	/* Ubah '.active' dari 'a' ke 'li' */
	font-family: var(--bs-font-sans-serif);
	color: var(--bs-primary-green) !important;
	font-weight: 700;
	border-bottom: 2px solid var(--bs-accent-gold);
	padding-bottom: 0.25rem;
}

.navbar-brand h1.text-primary-green {
	color: var(--bs-primary-green) !important;
}

/* Paksa P (paragraf) di dalam logo untuk jadi abu-abu */
.navbar-brand p.text-secondary {
	/* Kita gunakan variabel Bootstrap untuk warna abu-abu */
	color: var(--bs-secondary-color) !important;
}

/* =================================
	KUSTOMISASI DJ-MEGAMENU (VERSI FIX)
================================= */

/* 1. Wrapper Utama (untuk flexbox) */
.dj-megamenu-wrapper {
	/* flex-grow: 1; */
	/* Biarkan menu mengisi ruang di kiri */
}

/* 2. UL Utama (Hapus style bawaan) */
ul.dj-megamenu {
	background: none !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	/* Paksa jadi flex */
	align-items: center;
	height: 3rem;
	/* Samakan tinggi dengan logo */
}

/* 3. LI Level 1 */
.dj-megamenu li.dj-up {
	list-style: none !important;
	margin: 0 0 0 1.5rem;
	/* Jarak antar menu */
	padding: 0 !important;
	background: none !important;
}

.dj-megamenu li.dj-up:first-child {
	margin-left: 0;
}

/* 4. Link Level 1 (STYLING UTAMA) */
.dj-megamenu li.dj-up > a.dj-up_a {
	font-family: var(--bs-font-sans-serif) !important;
	color: #4b5563 !important;
	/* Warna abu-abu (sesuai blueprint) */
	font-weight: 600 !important;
	text-transform: none !important;
	/* border-bottom: 2px solid transparent !important; */
	padding: 0.25rem 0 !important;
	background: none !important;
	text-decoration: none;
}

/* 5. Matikan ikon & panah bawaan */
.dj-megamenu a.dj-up_a .dj-icon,
.dj-megamenu a.dj-up_a .arrow {
	display: none !important;
}

/* 6. Link Level 1 HOVER */
.dj-megamenu li.dj-up:hover > a.dj-up_a {
	color: var(--bs-primary-green) !important;
	background: none !important;
}

/* 7. Link Level 1 ACTIVE (HIJAU + GARIS EMAS) */
.dj-megamenu li.dj-up.active > a.dj-up_a {
	color: var(--bs-primary-green) !important;
	font-weight: 700 !important;
	/* border-bottom: 2px solid var(--bs-accent-gold) !important; */
	background: none !important;
}

/* 7b. Buat wrapper teks jadi 'relative' */
.dj-megamenu li.dj-up > a.dj-up_a .image-title {
	position: relative;
	padding-bottom: 0.25rem;
	/* Atur jarak teks ke garis di sini */
}

/* 7c. Buat garis emas HANYA di bawah teks yang aktif */
.dj-megamenu li.dj-up.active > a.dj-up_a .image-title::after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	/* Lebar garis 100% dari teks */
	height: 2px;
	/* Tebal garis */
	background: var(--bs-accent-gold);
	bottom: 0;
	/* Menempel di 'padding-bottom' */
	left: 0;
}

/* 8. Dropdown Container (putih, borderless, shadow) */
.dj-megamenu .dj-subwrap {
	background-color: #ffffff !important;
	border: none !important;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
	/* shadow-lg */
	margin-top: 10px !important;
	border-radius: 0.375rem !important;
	/* rounded-lg */
}

/* 9. Link Sub Menu (dropdown-item) */
.dj-megamenu .dj-subwrap li a {
	font-family: var(--bs-font-sans-serif) !important;
	font-weight: 400 !important;
	color: #212529 !important;
	padding: 0.5rem 1rem !important;
	display: block;
	text-decoration: none;
}

.dj-megamenu .dj-subwrap li a:hover {
	background-color: #f8f9fa !important;
	/* bg-gray-100 */
}

/* 10. Matikan panah di submenu juga */
.dj-megamenu .dj-subwrap li a .arrow {
	display: none !important;
}

/* 11. Pastikan nama sub menu tampil */
.dj-megamenu .dj-subwrap li a .name {
	padding: 0 !important;
}

#searchModal .mod-finder .js-finder-search-query {
	font-size: 1.25rem;
	/* Buat kotaknya lebih besar */
	padding: 0.75rem 1rem;
}

/* =================================
	STYLING SEARCH MODAL (ELEGANT VERSION)
================================= */

/* ... (CSS #1 dan #2 Anda biarkan saja) ... */

/* 3. Sembunyikan header jelek (teks "Pencarian...") */
#searchModal .modal-header {
	display: none;
}

/* 4. Paksa Form jadi Full-Width */
#searchModal .mod-finder {
	display: block !important;
	/* Paksa jadi block */
	width: 100% !important;
	/* Paksa full width */
}

#searchModal .mod-finder .awesomplete {
	display: block !important;
	width: 100% !important;
}

/* 5. Paksa Input di dalam form jadi Full-Width */
#searchModal .mod-finder .js-finder-search-query {
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--bs-primary-green);
	background-color: #f8f9fa;
	border: 2px solid #f8f9fa;
	border-radius: 0.375rem;
	box-shadow: none !important;
	padding: 1rem 1.25rem;
	height: auto;
	
	/* INI PERBAIKANNYA */
	display: block !important;
	/* Paksa jadi block */
	width: 100% !important;
	/* Paksa full width */
}

/* 6. Ganti warna placeholder */
#searchModal .mod-finder .js-finder-search-query::placeholder {
	color: #999;
	opacity: 1;
}

/* 7. Aksi saat di-fokus (paling keren) */
#searchModal .mod-finder .js-finder-search-query:focus {
	color: var(--bs-primary-green);
	background-color: #fff;
	border-color: var(--bs-accent-gold) !important;
}
/* =================================
	STYLING LAYANAN UNGGULAN (VERSI SITUS LAMA)
================================= */

.service-link {
	color: var(--bs-body-color); /* Warna teks normal */
	transition: opacity 0.3s ease;
}
.service-link:hover {
	opacity: 0.7; /* Efek hover sederhana */
}

/* Lingkaran Ikon (meniru screenshot) */
.service-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #f7f7f7; /* Latar belakang abu-abu */
	border: 2px solid var(--bs-primary-green); /* Border hijau */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Ikon di dalamnya */
.service-icon .bi {
	font-size: 2rem; /* Ukuran ikon */
	color: var(--bs-primary-green);
}

/* Teks di kanan */
.service-text .service-title {
	font-family: var(--bs-font-display); /* Montserrat */
	font-size: 0.9rem; /* Ukuran judul */
	font-weight: 700;
	color: #333; /* Warna judul lebih gelap */
	text-transform: uppercase;
	border-bottom: 2px solid var(--bs-accent-gold);
	padding-bottom: 0.25rem; /* Jarak ke garis bawah */
	margin-bottom: 0.25rem;
}
.service-text .service-desc {
	font-size: 0.85rem;
	color: var(--bs-secondary-color); /* Warna abu-abu */
	margin-bottom: 0;
}
/* =================================
	STYLING MODUL PENGUMUMAN & ARTIKEL (VERSI FINAL)
================================= */

/* Target UL yang memiliki KEDUA class ini */
ul.mod-articlescategory.category-module {
    list-style: none !important; /* Hapus bullet points */
    padding: 0 !important;
    margin: 0 !important;
    display: grid; /* Ganti display jadi grid */
    gap: 0.75rem; /* Beri jarak antar item */
}

/* Target setiap list item (li) */
ul.mod-articlescategory.category-module li {
    padding-bottom: 0.75rem; /* Ruang di bawah item */
    /* Buat garis pemisah <hr> sesuai blueprint */
    border-bottom: 1px solid #dee2e6; 
}

/* Hapus garis untuk item terakhir */
ul.mod-articlescategory.category-module li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

/* Style link judul (a) */
ul.mod-articlescategory.category-module li a {
    display: block; 
    text-decoration: none;
    color: #212529; /* (text-dark) */
    font-weight: 600; /* (fw-semibold) */
    transition: color 0.2s ease;
}

/* Hover effect (hover-accent-gold) */
ul.mod-articlescategory.category-module li a:hover {
    color: var(--bs-accent-gold) !important;
}

/* =================================
	INI ADALAH FIX UNTUK TANGGAL (TURUN BARIS)
================================= */
ul.mod-articlescategory.category-module li span.mod-articles-category-date {
    font-size: 0.875em; /* (small) */
    color: var(--bs-secondary-color); /* (text-secondary) */
    display: block; /* <-- KUNCI AGAR TURUN BARIS */
    margin-top: 0.25rem;
}
/* =================================
	STYLING TAMPILAN ARTIKEL (VERSI FIX)
================================= */

/* 1. Mengatur Judul Artikel (Selector diperbaiki) */
/* Target class .com-content-article, BUKAN .com_content */
.com-content-article .page-header {
    text-align: center; /* Buat rata tengah */
    margin-bottom: 1rem; 
}
.com-content-article .page-header h1 {
    font-family: var(--bs-font-display); /* Font Montserrat */
    font-size: 1.5rem; /* PERKECIL UKURAN FONT (sesuaikan) */
    font-weight: 700;
    color: var(--bs-primary-green); 
    line-height: 1.3;
}

/* 2. Mengatur Info Artikel (Selector diperbaiki) */

/* Target <dl> (Definition List), BUKAN <ul> */
.com-content-article dl.article-info {
    text-align: center; /* Ikut rata tengah */
    color: var(--bs-secondary-color); 
    font-size: 0.9rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--bs-accent-gold); /* Garis pemisah */
	
    /* Jadikan <dl> sebagai flex container */
    display: flex;
    flex-wrap: wrap; /* Jika saking panjangnya, boleh turun baris */
    justify-content: center; /* Rata tengah semua item */
}

/* Sembunyikan <dt> (Details) yang disembunyikan Joomla */
.com-content-article dl.article-info dt {
    display: none;
}

/* Target <dd> (Definition Data), BUKAN <li> */
/* Ini akan membuat "Written by", "Published", "Hits" jadi 1 baris */
.com-content-article dl.article-info dd {
    display: inline-block;
    margin: 0 0.5rem; /* Beri jarak antar item */
}
/* Latar belakang untuk memisahkan bagian ini */
.accountability-section {
	background-color: #f8f9fa; /* Latar abu-abu muda */
}

/* Judul utama */
.section-title {
	font-weight: 700;
	color: #333;
	margin-bottom: 2.5rem; /* Memberi jarak ke kartu */
}

/* Kustomisasi Kartu (Card) */
.accountability-card {
	border: none; /* Menghilangkan border bawaan kartu */
	border-radius: 0.5rem; /* Membuat sudut sedikit lebih bulat */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Bayangan halus */
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transisi untuk hover */
	height: 100%; /* Memastikan semua kartu sama tinggi dalam satu baris */
}

/* Efek Hover: Kartu akan sedikit terangkat dan bayangan lebih jelas */
.accountability-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Kustomisasi Ikon */
.accountability-card .icon {
	font-size: 3.5rem; /* Ukuran ikon */
	color: #004d40; /* SESUAIKAN: Warna primary-green dari tema Badilag */
	margin-bottom: 1.5rem;
	display: inline-block;
}

/* Kustomisasi Tombol */
.btn-custom {
	font-weight: 600;
	background-color: #c5a973; /* SESUAIKAN: Warna accent-gold */
	border-color: #c5a973;
	color: #004d40; /* SESUAIKAN: Warna primary-green */
}

/* Efek hover untuk tombol kustom */
.btn-custom:hover {
	background-color: #b39762; /* Versi gold sedikit lebih gelap */
	border-color: #b39762;
	color: #004d40;
}

/* --- CSS untuk Bagian Layanan Utama --- */
.service-link {
	color: #333; /* Warna teks default */
	padding: 1rem;
	border-radius: 0.5rem;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
	height: 100%; 
	background-color: #ffffff; /* Latar putih standar */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Bayangan halus seperti kartu */
}

.service-link:hover {
	background-color: #004d40; /* Latar hijau saat hover */
	color: #ffffff;
	transform: translateY(-5px); /* Efek angkat seperti kartu */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.service-icon {
	font-size: 2.5rem; 
	color: #004d40; 
	transition: color 0.3s ease;
}

.service-link:hover .service-icon {
	color: #c5a973; /* Warna ikon gold saat link di-hover */
}

.service-title {
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 0.25rem;
	color: #004d40; /* Judul selalu hijau */
	transition: color 0.3s ease;
}

.service-link:hover .service-title {
	color: #ffffff; /* Judul jadi putih saat hover */
}

.service-desc {
	font-size: 0.9rem;
	line-height: 1.5;
	color: #555; /* Deskripsi abu-abu */
	transition: color 0.3s ease;
}

.service-link:hover .service-desc {
	color: #f0f0f0; /* Deskripsi jadi abu-abu muda saat hover */
}

/* =================================
   STYLING MODUL ARTICLES (HEADLINE KIRI - VERSI FINAL v5)
   ================================= */

/* Target UL pembungkus */
.beranda-infoterkini .col-lg-8 ul.mod-articles-items {
    list-style: none !important; padding: 0 !important; margin: 0 !important;
}

/* Target LI (ini akan kita jadikan CARD) */
.beranda-infoterkini .col-lg-8 ul.mod-articles-items > li {
    background-color: #ffffff;
    border-radius: 0.375rem; /* rounded-lg */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* shadow-lg */
    overflow: hidden; 
    margin: 0; 
    padding: 0; /* Pastikan card tidak punya padding */
	position: relative;
}

/* Wrapper untuk Gambar */
.beranda-infoterkini .col-lg-8 figure.mod-articles-image {
    position: relative; 
    width: 100%;
    order: 1; /* URUTAN 1: GAMBAR */
    overflow: hidden; 
    aspect-ratio: 16 / 6; /* Paksa rasio 16:9 */
    margin: 0; /* Hapus margin default figure */
}
.beranda-infoterkini .col-lg-8 figure.mod-articles-image img {
    width: 100%; height: 100%; object-fit: cover;
}

/* Wrapper untuk semua teks */
.beranda-infoterkini .col-lg-8 .mod-articles-item-content {
    padding: 0; /* FIX 1: HAPUS PADDING DARI KONTAINER INDUK */
    display: flex; 
    flex-direction: column; 
    flex-grow: 1;
}

/* Tag Kategori (Menempel di atas gambar) */
.beranda-infoterkini .col-lg-8 dd.mod-articles-category {
    position: absolute;
    top: 1rem; left: 1rem;
    background-color: var(--bs-accent-gold);
    color: var(--bs-primary-green) !important; 
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 0.25rem;
    z-index: 10; 
}

/* Kontainer Tanggal & Info */
.beranda-infoterkini .col-lg-8 dl.list-unstyled {
    order: 2; /* URUTAN 2: TANGGAL */
    margin: 0 !important;
    /* FIX 2: Tambahkan padding atas (jarak) dan padding L/R */
    padding: 1.5rem 1.5rem 0.5rem 1.5rem; 
}
.beranda-infoterkini .col-lg-8 dd.mod-articles-date {
    font-size: 0.875em;
    color: var(--bs-secondary-color);
    display: block; 
}

/* Judul Artikel */
.beranda-infoterkini .col-lg-8 h4.mod-articles-title {
     order: 3; /* URUTAN 3: JUDUL */
     margin-top: 0; 
     padding: 0 1.5rem; /* Tambahkan padding L/R */
}
.beranda-infoterkini .col-lg-8 h4.mod-articles-title a {
    font-family: var(--bs-font-display); 
    font-size: 1.5rem; 
    font-weight: 700;
    color: var(--bs-primary-green);
    text-decoration: none;
    line-height: 1.3;
}
.beranda-infoterkini .col-lg-8 h4.mod-articles-title a:hover {
    color: var(--bs-accent-gold);
}

/* Teks Intro */
.beranda-infoterkini .col-lg-8 .mod-articles-item-content > p:not(.readmore) {
    order: 4; /* URUTAN 4: INTRO */
    color: var(--bs-secondary-color) !important; 
    font-size: 0.9rem !important;
    line-height: 1.6;
    flex-grow: 1; 
    text-align: left !important; 
    /* Tambahkan padding T/L/R */
    padding: 0.75rem 1.5rem 0 1.5rem;
    margin-top: 0;
}

/* Link "Baca Selengkapnya" */
.beranda-infoterkini .col-lg-8 p.readmore {
     order: 5; /* URUTAN 5: READMORE */
     margin-top: 1rem;
     margin-bottom: 0;
     flex-grow: 0;
     /* Tambahkan padding T/L/R/B */
     padding: 0 1.5rem 1.5rem 1.5rem;
}
.beranda-infoterkini .col-lg-8 p.readmore a.btn {
    color: var(--bs-accent-gold) !important; 
    font-weight: 700;
    text-decoration: none;
    background: none !important; 
    border: none !important;
    padding: 0 !important;
    font-size: 0 !important; 
}
.beranda-infoterkini .col-lg-8 p.readmore a.btn::after {
    content: 'Baca Selengkapnya →'; 
    font-family: var(--bs-font-sans-serif);
    font-size: 1rem; 
}
.beranda-infoterkini .col-lg-8 p.readmore a.btn span {
    display: none !important;
}
.beranda-infoterkini .col-lg-8 p.readmore a.btn:hover {
    text-decoration: underline;
}
/* =================================
   STYLING MODUL ARTICLES (DAFTAR KANAN - VERSI FINAL)
   ================================= */

/* Target UL pembungkus di kolom kanan */
.beranda-infoterkini .col-lg-4 ul.mod-articles-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid;
    gap: 0.75rem; /* Jarak antar item */
}

/* =================================
  INI ADALAH TRIK "OFFSET" KITA:
  Sembunyikan artikel pertama (headline) dari daftar ini.
  ================================= 
*/
.beranda-infoterkini .col-lg-4 ul.mod-articles-items > li:first-child {
    display: none !important;
}

/* Target LI (item daftar) */
.beranda-infoterkini .col-lg-4 ul.mod-articles-items > li {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #dee2e6; /* Garis pemisah */
    margin: 0;
    padding: 0;
}
.beranda-infoterkini .col-lg-4 ul.mod-articles-items > li:last-child {
    border-bottom: none; /* Hapus garis di item terakhir */
}

/* Wrapper Konten Teks */
.beranda-infoterkini .col-lg-4 .mod-articles-item-content {
    padding: 0.5rem 0; /* Padding kecil atas/bawah */
}

/* Judul Artikel (Selector diperbaiki) */
.beranda-infoterkini .col-lg-4 h4.mod-articles-title {
     margin-top: 0; 
     margin-bottom: 0.25rem; /* Jarak ke tanggal */
}
.beranda-infoterkini .col-lg-4 h4.mod-articles-title a {
    font-family: var(--bs-font-sans-serif); /* Font Inter */
    font-size: 1rem; /* Ukuran normal */
    font-weight: 600; /* semi-bold */
    color: var(--bs-primary-green);
    text-decoration: none;
    line-height: 1.4;
}
.beranda-infoterkini .col-lg-4 h4.mod-articles-title a:hover {
    color: var(--bs-accent-gold);
}

/* Tanggal (Selector diperbaiki) */
.beranda-infoterkini .col-lg-4 dl.list-unstyled {
    margin: 0 !important;
    padding: 0;
}
.beranda-infoterkini .col-lg-4 dd.mod-articles-date {
    font-size: 0.875em;
    color: var(--bs-secondary-color);
    display: block; 
}
/* =================================
   CATEGORY LIST VIEW (Final Production Styles)
   ================================= */

/* 1. General Table/Wrapper Cleanup */
.category-list table.table {
    border: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    /* Timpa CSS variable untuk background agar stripe hilang total */
    --bs-table-bg: white;
}
.category-list table.table th,
.category-list table.table td {
    border-left: none !important;
    border-right: none !important;
}

/* 2. Row Color Cleanup (Menghilangkan stripe abu-abu pada baris) */
.category-list .cat-list-row0,
.category-list .cat-list-row1 {
    background-color: white !important; /* Paksa semua baris jadi putih */
    --bs-table-bg: white !important;
    --bs-table-accent-bg: white !important;
}
.category-list table.table tbody tr:hover {
    background-color: #f8f8f8 !important; /* Soft highlight */
}

/* 3. Table Header Styling (TH) */
.category-list table.table thead th {
    color: var(--bs-primary-green);
    font-weight: 600;
    border-bottom: 2px solid var(--bs-accent-gold) !important;
    padding: 0.75rem;
}
/* TAMBAHKAN INI UNTUK MEMAKSA WARNA HIJAU PADA HEADER LINK */
.category-list table.table thead th a {
    color: var(--bs-primary-green) !important; /* Paksa Hijau */
    text-decoration: none !important; /* Hapus underline */
}
.category-list table.table thead th a:hover {
    color: var(--bs-accent-gold) !important; /* Paksa Emas saat hover */
    text-decoration: underline !important;
}

/* 4. Table Data Styling (TD) and Links */
.category-list table.table tbody td,
.category-list table.table tbody th {
    padding: 0.75rem;
    border-top: 1px solid #eee;
    vertical-align: middle;
}
.category-list table.table tbody th a,
.category-list table.table tbody td a {
    color: var(--bs-primary-green) !important; /* Paksa warna hijau */
    font-size: 1rem !important; /* Atur ukuran font standar */
    font-weight: 500;
    text-decoration: none !important; /* HAPUS UNDERLINE */
}
.category-list table.table tbody th a:hover,
.category-list table.table tbody td a:hover {
    color: var(--bs-accent-gold) !important; /* Paksa warna emas saat hover */
    text-decoration: underline !important; /* Tampilkan underline HANYA saat hover */
}

/* 5. HITS BADGE STYLING */
.category-list table.table tbody td.list-hits {
    text-align: center;
    width: 50px;
}
.category-list table.table tbody td.list-hits span.badge { 
    background-color: var(--bs-primary-green) !important;
    color: white !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}

/* 6. FILTER CONTROLS (Select Month / Clear) */
.category-list .filter-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}
.category-list .filter-select select {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.375rem 1rem 0.375rem 0.75rem;
    background-color: white;
}
.category-list .filter-select button.btn-secondary {
    background-color: var(--bs-secondary-color) !important;
    color: white !important;
    font-weight: 600;
}

/* 7. PAGINATION COLOR FIX (MENIMPA WARNA BIRU) */
.category-list .pagination-container {
    padding-top: 2rem;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: center;
}
.category-list .pagination > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
.category-list ul.pagination li a,
.category-list ul.pagination li > span {
    padding: 0.375rem 0.75rem;
    border: 1px solid #ddd;
    text-decoration: none;
    color: var(--bs-primary-green) !important; /* Link yang tidak aktif jadi hijau */
    margin: 0 0.1rem;
    border-radius: 0.25rem;
}
.category-list ul.pagination li.active a { /* Selector yang benar */
    background-color: var(--bs-primary-green) !important; 
    color: white !important;
    border-color: var(--bs-primary-green) !important; 
}
.category-list .counter {
    display: none; /* Sembunyikan 'Page 1 of 484' */
}
/* =================================
   FIX ICON PAGINATION (GANTI DENGAN BOOTSTRAP ICONS)
   ================================= */

/* Target semua ikon navigasi lama dan paksa menggunakan font Bootstrap */
.pagination .icon-angle-right::before,
.pagination .icon-angle-left::before,
.pagination .icon-angle-double-right::before,
.pagination .icon-angle-double-left::before {
    font-family: "bootstrap-icons" !important;
    font-weight: normal;
    /* Hapus semua style bawaan Joomla */
    line-height: 1; 
    text-transform: none;
}

/* =================================
   FIX ICON PAGINATION (GANTI DENGAN SIMBOL TEKS)
   ================================= */

.pagination .icon-angle-right::before {
    content: ' > '; 
    font-family: sans-serif !important; /* Gunakan font umum */
}
.pagination .icon-angle-left::before {
    content: ' < '; 
    font-family: sans-serif !important;
}
.pagination .icon-angle-double-right::before {
    content: ' >> '; 
    font-family: sans-serif !important;
}
.pagination .icon-angle-double-left::before {
    content: ' << '; 
    font-family: sans-serif !important;
}