/* ==========================================================
   CSS VARIABLES & RESET DASAR (DARK MODE)
   ================================================---------- */
:root {
	--font-reguler: 400;
	--font-bold: 600;
	--background-color: #121212;
	--scheme-color: #e3e3e3;
	--secondscheme-color: #7d7c7c;
	--main-color: #ffffff;
	--link-color-body: #e0e0e0;
	--hoverlink-color-body: #6a6a6a;
	--border-color: #333333;
	--header-bgcolor: #1e1e1e;
	--topnav-color: #e0e0e0;
	--mainmenu-bgcolor: #2e2e2e;
	--mainmenu-color: #ffffff;
	--mainmenu-hovercolor: #f1c40f;
	--content-bgcolor: #1e1e1e;
	--content-greycolor: #aaaaaa;
	--button-bgcolor: #388e3c;
	--button-color: #ffffff;
	--footer-bgcolor: #181818;
	--footer-color: #aaaaaa;
	--greybody-bgcolor: #181818;
	--rgbacolor: rgba(255, 255, 255, 0.05);
	--sidebar-link-color: #e0e0e0;
	--sidebar-hover-color: #4fc3f7;
} 


*, *::before, *::after {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	word-wrap: break-word;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background-color: var(--background-color);
	color: var(--main-color);
	font-size: 14px;
	line-height: 1.6;
}

/* ==========================================================
   TYPOGRAPHY & ELEMENTS
   ================================================---------- */
h1, h2, h3, h4, h5, h6 {
	clear: both;
	margin-top: 0;
	margin-bottom: 10px;
	line-height: 1.3;
	font-weight: var(--font-bold);
	color: var(--main-color, #000000);
}

h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

p {
	margin-top: 0;
	margin-bottom: 20px;
}

/* ==========================================================
   LINK GLOBAL & WARNA KONTEN
   ================================================---------- */
a {
	text-decoration: none;
	transition: 0.3s;
	color: var(--link-color-body);
}

a:hover, a:focus {
	color: var(--hoverlink-color-body);
}

.box-content h2 a, 
.entry-title a, 
.site-main h2 a {
    color: var(--link-color-body) !important;
}

.box-content h2 a:hover, 
.entry-title a:hover, 
.site-main h2 a:hover {
    color: var(--hoverlink-color-body) !important;
}

.entry-content a {
    color: var(--link-color-body) !important;
    text-decoration: underline;
}

.entry-content a:hover {
    color: var(--hoverlink-color-body) !important;
}

aside a, 
.sidebar a, 
.widget a, 
.trending-box a, 
.right-sidebar a, 
#sidebar a,
div[class*="sidebar"] a,
div[class*="widget"] a {
    color: var(--sidebar-link-color) !important;
}

aside a:hover, 
.sidebar a:hover, 
.widget a:hover, 
.trending-box a:hover, 
.right-sidebar a:hover, 
#sidebar a:hover,
div[class*="sidebar"] a:hover,
div[class*="widget"] a:hover {
    color: var(--sidebar-hover-color) !important;
}

img {
	vertical-align: middle;
	height: auto;
	max-width: 100%;
}

pre, code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    box-sizing: border-box;
}

pre {
    background: #f8fafc;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

/* ==========================================================
   GRID SYSTEM (RESPONSIF 2 KOLOM)
   ================================================---------- */
.site-wrapper {
    max-width: 1082px;
    margin: 0 auto;
    background: var(--content-bgcolor);
}

.container {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
	max-width: 1070px;
}

.row {
	margin-left: -15px;
	margin-right: -15px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.col-md-4, .col-md-8, .col-md-12 {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
}

@media (min-width: 992px) {
	.col-md-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; }
	.col-md-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; }
	.col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 992px) {
	.col-md-8, .col-md-4 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ==========================================================
   HEADER & MENU NAVIGASI RESPONSIF MOBILE (STICKY)
   ================================================---------- */
.site-header {
	padding: 20px 0;
	background-color: var(--header-bgcolor);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
	justify-content: space-between;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.site-title {
	font-size: 22px;
	font-weight: bold;
}

.nona-mainmenu {
	background-color: var(--mainmenu-bgcolor);
	position: sticky;
	top: 0;
	z-index: 999;
	width: 100%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.menu-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1070px;
	margin: 0 auto;
	padding: 0 15px;
}

.menu-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
}

.menu-list li a {
	display: block !important;
	padding: 12px 10px !important;
	color: var(--mainmenu-color) !important;
	text-decoration: none !important;
	font-weight: 600;
}

.menu-list li a:hover {
	background-color: rgba(0, 0, 0, 0.1);
	color: var(--mainmenu-hovercolor) !important;
}

/* ==========================================================
   STYLING DROPDOWN SUB-MENU (BARU)
   ========================================================== */
.menu-list li.menu-item-has-children {
    position: relative;
}

.menu-list .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--mainmenu-bgcolor);
    min-width: 180px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    border-radius: 0 0 6px 6px;
    padding: 6px 0;
    z-index: 999;
    list-style: none !important;
}

.menu-list li.menu-item-has-children:hover > .sub-menu {
    display: block;
}

.menu-list .sub-menu li {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.menu-list .sub-menu li a {
    padding: 10px 15px !important;
    color: var(--mainmenu-color) !important;
    white-space: nowrap;
    font-size: 13px;
}

.menu-list .sub-menu li a:hover {
    color: var(--mainmenu-hovercolor) !important;
    background-color: rgba(0, 0, 0, 0.15);
}

.menu-list .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

.mobile-menu-toggle {
	display: none;
	background: none;
	border: none;
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	padding: 10px;
}

/* Sembunyikan brand secara default di posisi atas */
.nona-nav-brand {
    display: none !important;
}

/* Munculkan kembali brand saat menu di-scroll (.is-scrolled aktif) */
.nona-mainmenu.is-scrolled .nona-nav-brand {
    display: inline-block !important;
}

@media (max-width: 992px) {
	.mobile-menu-toggle {
		display: block;
	}
	.menu-list {
		display: none !important;
		flex-direction: column;
		width: 100%;
		background-color: var(--mainmenu-bgcolor);
		position: absolute;
		top: 100%;
		left: 0;
		box-shadow: 0 4px 10px rgba(0,0,0,0.15);
		z-index: 999;
	}
	.menu-list.active {
		display: flex !important;
	}
	.menu-list li {
		width: 100%;
		border-top: 1px solid rgba(255,255,255,0.1);
	}
	.menu-list li a {
		padding: 12px 15px !important;
	}
    
    /* Penyesuaian sub-menu untuk tampilan Mobile */
    .menu-list .sub-menu {
        position: static;
        box-shadow: none;
        background-color: rgba(0, 0, 0, 0.1);
        padding-left: 15px;
    }
    .menu-list li.menu-item-has-children:hover > .sub-menu {
        display: none; /* Di mobile biasanya menggunakan klik atau toggle, tampilkan fleksibel */
    }
    .menu-list .sub-menu.active {
        display: block !important;
    }
}

/* ==========================================================
   KONTEN ARTIKEL & HALAMAN SINGLE
   ================================================---------- */
.site-main {
	margin-bottom: 3px;
	background-color: var(--content-bgcolor);
	padding: 25px;
	border-radius: 4px;
	border: 1px solid var(--border-color);
}

h1.entry-title {
	font-size: 26px;
	color: var(--scheme-color);
	margin-bottom: 10px;
}

.meta-content {
	font-size: 12px;
	color: var(--content-greycolor);
	margin-bottom: 2px;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--border-color);
}

.entry-content {
	font-size: 16px;
	line-height: 1.7;
}

.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	margin: 15px 0;
}

/* ==========================================================
   SIDEBAR
   ================================================---------- */
.sidebar-widget {
    background: var(--content-bgcolor, #ffffff);
    border: 1px solid var(--border-color, #dddddd);
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 8px;
}
.sidebar-widget .widget-title {
    font-size: 16px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--secondscheme-color, #43a047);
    padding-bottom: 8px;
    color: var(--main-color, #000000);
}
.sidebar-posts-list { display: flex; flex-direction: column; gap: 15px; }
.sidebar-item { display: flex; gap: 12px; align-items: center; }
.sidebar-thumb { width: 80px; height: 60px; flex-shrink: 0; overflow: hidden; border-radius: 4px; }
.sidebar-thumb img { width: 100%; height: 60px; object-fit: cover; }
.sidebar-content { flex-grow: 1; }
.sidebar-item-title { font-size: 14px; margin: 0 0 5px 0; line-height: 1.3; }
.sidebar-item-title a { color: var(--link-color-body, #000000); text-decoration: none; }
.sidebar-date, .sidebar-error { font-size: 12px; color: var(--content-greycolor, #888888); }

.sidebar-cat-list { list-style: none; padding: 0; margin: 0; }
.cat-item-wrapper { border-bottom: 1px solid var(--border-color, #f0f0f1); position: relative; }
.cat-parent-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.cat-parent-link { color: var(--link-color-body, #000000); text-decoration: none; flex-grow: 1; font-weight: 500; }
.toggle-subcat { cursor: pointer; padding: 0 8px; color: var(--content-greycolor, #888); font-size: 14px; user-select: none; }
.toggle-icon { transition: transform 0.2s ease; }
.subcat-list { list-style: none; padding-left: 15px; margin: 0 0 8px 0; display: none; background: rgba(0,0,0,0.03); border-left: 2px solid var(--secondscheme-color, #43a047); border-radius: 0 4px 4px 0; }
.subcat-item { padding: 6px 0; border-bottom: 1px dashed var(--border-color, #e2e8f0); }
.subcat-link { color: var(--link-color-body, #000000); text-decoration: none; display: flex; align-items: center; font-size: 13px; }
.subcat-arrow { margin-right: 6px; color: var(--content-greycolor, #aaa); }
/* ==========================================================
    FIX TOTAL TABEL: Anti Baris Hitam & Kontras Sempurna
   ========================================================== */
table.elegant-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    background-color: var(--content-bgcolor);
    color: var(--main-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-sizing: border-box;
    margin: 20px 0;
}

table.elegant-table th, 
table.elegant-table td {
    padding: 12px 14px;
    vertical-align: middle;
    color: var(--main-color) !important; /* Paksa teks mengikuti variabel tema agar tidak tenggelam */
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap; 
    background-color: transparent !important; /* Paksa hapus latar belakang nyasar di sel */
}

/* Header Tabel */
table.elegant-table th {
    background-color: var(--scheme-color) !important;
    color: #ffffff !important;
    font-weight: 700;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
}

/* Penyesuaian Header saat Dark Mode */
body.dark-mode table.elegant-table th {
    background-color: #262626 !important; 
    color: #ffffff !important;
    border-bottom: 1px solid var(--border-color);
}

/* Baris Ganjil & Genap (Mencegah baris hitam nyasar) */
table.elegant-table tbody tr {
    background-color: var(--content-bgcolor) !important;
}

table.elegant-table tbody tr:nth-child(even) {
    background-color: var(--greybody-bgcolor) !important;
}

/* Efek Hover Baris */
table.elegant-table tbody tr:hover {
    background-color: #ccc !important;
    color: #000 !important;
}

@media screen and (max-width: 768px) {
    table.elegant-table {
        font-size: 13px;
    }
    table.elegant-table th, 
    table.elegant-table td {
        padding: 10px 10px;
    }
}

div.table-container {
	width: 100%;
	overflow-x: auto;
	margin: 1.5rem 0;
}

/* ==========================================================
   FOOTER
   ================================================---------- */
.site-footer {
	padding: 25px 0;
	background-color: var(--footer-bgcolor);
	color: var(--footer-color);
	text-align: center;
	border-top: 1px solid var(--border-color);
	margin-top: auto;
}

.site-info {
	font-size: 13px;
}

@media (max-width: 992px) {
	.col-md-4.widget-area {
		position: relative !important;
		top: auto !important;
		max-height: none !important;
	}
}

/* ==========================================================
   EFEK JUDUL BLOG PINDAH KE SAMPING SAAT SCROLL
   ================================================---------- */
.nona-nav-brand {
    display: none;
    opacity: 0;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff !important;
    text-decoration: none;
    margin-left: 10px;
    transition: opacity 0.3s ease;
}

.nona-nav-brand a {
    color: #ffffff !important;
    text-decoration: none;
}

.site-header.header-hidden {
    display: none;
}

.nona-mainmenu.is-scrolled .menu-container {
    justify-content: flex-start !important;
    gap: 15px;
}

.nona-mainmenu.is-scrolled .nona-nav-brand {
    display: inline-block !important;
    opacity: 1;
}

.sidebar-posts-wrap > div:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Styling Tombol Tema di Navigasi */
#themeToggleBtn:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 992px) {
    .menu-container {
        flex-wrap: wrap;
    }
    .nav-right-action {
        margin-left: 0 !important;
        margin-right: 5px;
    }
}

/* Styling Modal Lightbox Pop-up Gambar */
.image-popup-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.image-popup-modal img {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 6px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
    object-fit: contain;
    animation: zoomIn 0.25s ease;
}

.image-popup-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    background: rgba(0,0,0,0.4);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.image-popup-close:hover {
    background: rgba(255,255,255,0.2);
}

@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.site-main img, .post-content img, .gallery-item img {
    cursor: pointer;
    transition: opacity 0.2s;
}
.site-main img:hover, .post-content img:hover {
    opacity: 0.95;
}


/* Layout Indeks & Sidebar */
.indeks-layout-flex { display: flex; gap: 30px; align-items: flex-start; width: 100%; }
.indeks-sidebar { flex: 0 0 280px; background: var(--content-bgcolor, #ffffff); border: 1px solid var(--border-color, #dddddd); border-radius: 6px; padding: 20px; }
.indeks-sidebar h3, .indeks-sidebar .widget-title { font-size: 16px; margin-bottom: 15px; border-bottom: 2px solid var(--border-color, #dddddd); padding-bottom: 8px; color: var(--main-color, #000000); }

.category-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.category-list li { border-bottom: 1px solid #f1f5f9; list-style: none !important; }
.category-list li a { display: flex; justify-content: space-between; align-items: center; padding: 10px 5px; color: var(--link-color-body, #000000); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.category-list li a:hover, .category-list li a.active { color: var(--scheme-color, #d32f2f); font-weight: 600; }
.category-list li a i { font-size: 12px; color: var(--content-greycolor, #888888); }

.indeks-main-content { flex: 1; min-width: 0; }
.date-filter-box { background: var(--content-bgcolor, #ffffff); border: 1px solid var(--border-color, #dddddd); border-radius: 6px; padding: 15px 20px; margin-bottom: 25px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.date-filter-box select { padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; font-size: 14px; }
.filter-label { font-weight: bold; font-size: 14px; margin-right: 5px; }
.filter-btn { background: var(--secondscheme-color, #43a047); color: #fff; border: none; padding: 7px 16px; border-radius: 4px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
.filter-btn:hover { opacity: 0.9; }
.reset-filter-link { font-size: 13px; color: #dc2626; text-decoration: none; margin-left: auto; }

.indeks-post-item { background: var(--content-bgcolor, #ffffff); border: 1px solid var(--border-color, #dddddd); border-radius: 6px; padding: 20px; margin-bottom: 20px; display: flex; gap: 20px; align-items: flex-start; }
.indeks-thumb { width: 200px; flex-shrink: 0; border-radius: 4px; overflow: hidden; }
.indeks-thumb img { width: 100%; height: 120px; object-fit: cover; display: block; }
.indeks-content h2 { font-size: 18px; margin: 4px 0 8px 0; line-height: 1.4; }
.indeks-content h2 a { color: var(--link-color-body, #000000); text-decoration: none; }
.indeks-content h2 a:hover { color: var(--scheme-color, #d32f2f); }
.indeks-meta { font-size: 12px; color: var(--content-greycolor, #888888); margin-bottom: 6px; }
.indeks-meta span.cat-tag { color: var(--secondscheme-color, #43a047); font-weight: 500; }
.indeks-excerpt { font-size: 13px; color: #475569; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.load-more-wrap { text-align: center; margin: 30px 0; }
.load-more-btn { background: var(--secondscheme-color, #43a047); color: #fff; border: none; padding: 10px 24px; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 14px; transition: opacity 0.2s; }
.load-more-btn:hover { opacity: 0.9; }
.infinite-loader-text { padding: 15px; color: #888; font-size: 13px; }
.pagination-wrap { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 30px; margin-bottom: 20px; }
.pagination-dots { padding: 6px 8px; color: #888; font-size: 13px; }

@media (max-width: 768px) {
    .row, .indeks-layout-flex { flex-direction: column !important; }
    .indeks-sidebar { width: 100% !important; }
    .indeks-post-item { flex-direction: column; }
    .indeks-thumb { width: 100%; }
    .indeks-thumb img { height: 180px; }
}