/* ==========================================================
   CSS VARIABLES & RESET DASAR (DARK MODE)
   ================================================---------- */
:root {
	--font-reguler: 400;
	--font-bold: 600;
	--background-color: #000000;
	--scheme-color: #ef5350;
	--secondscheme-color: #66bb6a;
	--main-color: #e0e0e0;
	--link-color-body: #90caf9;
	--hoverlink-color-body: #f48fb1;
	--border-color: #2c2c2c;
	--header-bgcolor: #1e1e1e;
	--topnav-color: #e0e0e0;
	--mainmenu-bgcolor: #7c7c7c;
	--mainmenu-color: #ffffff;
	--mainmenu-hovercolor: #ffeb3b;
	--content-bgcolor: #1e1e1e;
	--content-greycolor: #aaaaaa;
	--button-bgcolor: #2e7d32;
	--button-color: #ffffff;
	--footer-bgcolor: #181818;
	--footer-color: #aaaaaa;
	--greybody-bgcolor: #222222;
	--rgbacolor: rgba(255, 255, 255, 0.05);
	--sidebar-link-color: #90caf9;
	--sidebar-hover-color: #f48fb1;
}

*, *::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);
}

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

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

/* ==========================================================
   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;
    color: #e0e0e0;
}

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

/* ==========================================================
   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.5);
}

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

.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.4);
}

.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(255, 255, 255, 0.1);
	color: var(--mainmenu-hovercolor) !important;
}

.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.5);
		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;
	}
}

/* ==========================================================
   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;
	color: var(--main-color);
}

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

/* ==========================================================
   SIDEBAR
   ================================================---------- */
.widget-area {
	margin-bottom: 30px;
}

h3.widget-title {
    border-bottom: 1px dotted var(--mainmenu-bgcolor);
    color: #ffffff;
}

.col-md-4.widget-area {
	position: sticky;
	top: 70px;
	align-self: flex-start;
}

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

/* ==========================================================
   TABEL ELEGAN (DARK MODE)
   ================================================---------- */
.elegant-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
	background-color: #1e1e1e;
	color: #e0e0e0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	border-radius: 6px;
	overflow: hidden;
	margin: 20px 0;
}

.elegant-table th {
	background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
	color: #ffffff;
	font-weight: 700;
	text-align: left;
	padding: 10px 12px;
	font-size: 12px;
	text-transform: uppercase;
}

.elegant-table td {
	padding: 10px 12px;
	border-bottom: 1px solid #2d3748;
	vertical-align: middle;
}

.elegant-table tbody tr:nth-child(even) {
	background-color: #252525;
}

.elegant-table tbody tr:hover {
	background-color: #2a2a2a;
}

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
   ================================================---------- */
.site-header {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.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;
    }
}