/*
Theme Name: Mediacak
Theme URI: https://mediacak.com
Description: Child theme untuk GeneratePress dengan Pure CSS Premium Header.
Author: Mediacak Team
Template: generatepress
Version: 1.0.2
Text Domain: mediacak
*/

/* ==========================================================================
   1. GLOBAL HEADER RESETS & BRANDING (ALL SCREENS)
   ========================================================================== */
body .mediacak-header {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border-bottom: 1px solid #eaeaea !important;
	position: relative !important;
	width: 100% !important;
	z-index: 99999 !important;
	box-shadow: none !important;
}

body .mediacak-nav-wrapper {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 0.8rem 1.5rem !important;
	box-sizing: border-box !important;
}

body .site-branding {
	display: flex !important;
	align-items: center !important;
}

body .site-branding img {
	max-height: 42px !important;
	width: auto !important;
	display: block !important;
}

body .site-title-link {
	text-decoration: none !important;
	color: var(--contrast, #111111) !important;
	font-weight: 800 !important;
	font-size: 1.6rem !important;
	letter-spacing: -0.5px !important;
}

body .mediacak-menu-checkbox {
	display: none !important;
}

body .mediacak-menu, 
body .mediacak-menu .sub-menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================================================
   2. VERSI DESKTOP (> 768px) - PREMIUM FLOATING DROPDOWN CARD
   ========================================================================== */
@media (min-width: 769px) {
	body .mediacak-menu {
		display: flex !important;
		gap: 1.8rem !important;
		align-items: center !important;
	}

	body .mediacak-menu li {
		position: relative !important;
	}

	/* Link Menu Utama (Desktop) */
	body .mediacak-header .mediacak-menu > li > a {
		text-decoration: none !important;
		color: #333333 !important; 
		font-size: 0.95rem !important;
		font-weight: 600 !important;
		padding: 0.6rem 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		transition: color 0.2s ease !important;
		background: transparent !important;
	}

	/* Indikator Panah Siku */
	body .mediacak-menu .menu-item-has-children > a::after {
		content: "" !important;
		display: inline-block !important;
		margin-left: 6px !important;
		width: 5px !important;
		height: 5px !important;
		border-right: 2px solid currentColor !important;
		border-bottom: 2px solid currentColor !important;
		transform: rotate(45deg) translateY(-1px) !important;
	}

	/* Warna Menu Utama Saat Hover / Aktif */
	body .mediacak-header .mediacak-menu > li > a:hover,
	body .mediacak-header .mediacak-menu > li.current-menu-item > a,
	body .mediacak-header .mediacak-menu > li.current-menu-ancestor > a {
		color: var(--gp-color-accent, var(--accent)) !important;
	}

	/* WADAH UTAMA DROPDOWN (Keadaan Tersembunyi - Diselaraskan dengan Selektor Hover) */
	body .mediacak-header .mediacak-menu li .sub-menu {
		position: absolute !important;
		top: calc(100% + 8px) !important;
		left: 50% !important;
		transform: translateX(-50%) translateY(10px) !important;
		background: #ffffff !important; 
		background-color: #ffffff !important;
		padding: 0.6rem !important;
		min-width: 220px !important;
		border-radius: 14px !important; 
		box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important; 
		border: 1px solid rgba(0, 0, 0, 0.05) !important; 
		opacity: 0 !important;
		visibility: hidden !important;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
		z-index: 99999 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 2px !important;
	}

	/* PENYEBAB UTAMA DIPERBAIKI DI SINI: Selektor Hover Sekarang Lebih Spesifik */
	body .mediacak-header .mediacak-menu li:hover > .sub-menu {
		opacity: 1 !important;
		visibility: visible !important;
		transform: translateX(-50%) translateY(0) !important;
	}

	body .mediacak-header .mediacak-menu .sub-menu li {
		width: 100% !important;
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* TAUTAN DI DALAM DROPDOWN */
	body .mediacak-header .mediacak-menu .sub-menu li a {
		display: block !important;
		width: 100% !important;
		padding: 0.65rem 1.1rem !important;
		font-size: 0.92rem !important;
		font-weight: 500 !important;
		color: #444444 !important; 
		text-decoration: none !important;
		background: transparent !important;
		background-color: transparent !important;
		border-radius: 8px !important; 
		box-sizing: border-box !important;
		transition: background-color 0.15s ease, color 0.15s ease !important;
		border: none !important;
	}

	body .mediacak-header .mediacak-menu .sub-menu li a::after {
		display: none !important;
	}

	/* EFEK HOVER KAPSUL PIL ABU-ABU LEMBUT */
	body .mediacak-header .mediacak-menu .sub-menu li a:hover,
	body .mediacak-header .mediacak-menu .sub-menu li.current-menu-item > a {
		background: #f4f5f7 !important;
		background-color: #f4f5f7 !important; 
		color: #111111 !important; 
	}

	body .mediacak-mobile-toggle {
		display: none !important;
	}
}

/* ==========================================================================
   3. VERSI MOBILE TAMPILAN IPHONE XR (< 768px) - PURE CSS ACCORDION
   ========================================================================== */
@media (max-width: 768px) {
	body .mediacak-mobile-toggle {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 4px !important;
		width: 40px !important;
		height: 40px !important;
		background-color: #f4f5f7 !important;
		border-radius: 8px !important;
		cursor: pointer !important;
	}

	body .hamburger-line {
		width: 18px !important;
		height: 2px !important;
		background-color: #111111 !important;
		border-radius: 2px !important;
		transition: all 0.25s ease !important;
	}

	body .mediacak-menu-checkbox:checked ~ .mediacak-mobile-toggle .hamburger-line:nth-child(1) {
		transform: translateY(6px) rotate(45deg) !important;
	}
	body .mediacak-menu-checkbox:checked ~ .mediacak-mobile-toggle .hamburger-line:nth-child(2) {
		opacity: 0 !important;
	}
	body .mediacak-menu-checkbox:checked ~ .mediacak-mobile-toggle .hamburger-line:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg) !important;
	}

	body .mediacak-menu-container {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		width: 100% !important;
		background-color: #ffffff !important;
		border-bottom: 1px solid #eaeaea !important;
		max-height: 0 !important;
		overflow: hidden !important;
		transition: max-height 0.35s ease-in-out !important;
		box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
		z-index: 99999 !important;
	}

	body .mediacak-menu-checkbox:checked ~ .mediacak-menu-container {
		max-height: 85vh !important;
		overflow-y: auto !important;
	}

	body .mediacak-menu {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		background: #ffffff !important;
	}

	body .mediacak-menu li {
		display: flex !important;
		flex-direction: column !important;
		border-bottom: 1px solid #f0f0f0 !important;
		background: transparent !important;
	}

	body .mediacak-menu a {
		padding: 1.1rem 1.5rem !important;
		color: #222222 !important;
		font-size: 1rem !important;
		font-weight: 600 !important;
		justify-content: space-between !important;
		display: flex !important;
		text-decoration: none !important;
		background: transparent !important;
	}

	body .mediacak-menu .menu-item-has-children > a::after {
		content: "" !important;
		width: 7px !important;
		height: 7px !important;
		border-right: 2px solid #888888 !important;
		border-bottom: 2px solid #888888 !important;
		transform: rotate(45deg) !important;
		transition: transform 0.2s ease !important;
		display: inline-block !important;
	}

	/* Sub-menu Mobile Accordion */
	body .mediacak-menu .sub-menu {
		display: none !important;
		background-color: #f8f9fa !important;
		background: #f8f9fa !important;
	}

	body .mediacak-menu .menu-item-has-children:hover > .sub-menu,
	body .mediacak-menu .menu-item-has-children:focus-within > .sub-menu {
		display: block !important;
	}

	body .mediacak-menu .menu-item-has-children:hover > a::after {
		transform: rotate(-135deg) !important;
		border-color: var(--gp-color-accent, var(--accent)) !important;
	}

	body .mediacak-menu .sub-menu a {
		padding: 0.9rem 1.5rem 0.9rem 2.5rem !important;
		font-size: 0.92rem !important;
		color: #555555 !important;
	}
	
	body .mediacak-header .mediacak-menu a:hover {
		color: var(--gp-color-accent, var(--accent)) !important;
	}
}

/* ==========================================================================
   4. DESIGN FOOTER SEMANTIK (CENTERED STYLE)
   ========================================================================== */
body .mediacak-footer {
	background-color: #f5f5f5 !important; /* Warna abu-abu terang sesuai gambar */
	border-top: 1px solid #eaeaea !important;
	padding: 3.5rem 1.5rem !important;
	text-align: center !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

body .mediacak-footer-wrapper {
	max-width: 800px !important;
	margin: 0 auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 1.5rem !important; /* Jarak vertikal yang seimbang antar elemen */
}

/* Logo & Branding Footer */
body .mediacak-footer .footer-branding img {
	max-height: 38px !important;
	width: auto !important;
	display: block !important;
	margin: 0 auto !important;
}

body .mediacak-footer .footer-title {
	font-size: 1.5rem !important;
	font-weight: 800 !important;
	color: var(--contrast, #111111) !important;
	letter-spacing: -0.5px !important;
}

/* Deskripsi / Tagline Website */
body .mediacak-footer .footer-description {
	font-size: 0.95rem !important;
	line-height: 1.6 !important;
	color: #666666 !important; /* Abu-abu redup premium */
	max-width: 620px !important;
	margin: 0 auto !important;
}

/* Navigasi Menu Horizontal Footer */
body .mediacak-footer .footer-nav {
	width: 100% !important;
}

body .mediacak-footer .footer-menu {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 1.5rem !important; /* Jarak horizontal antarmenu */
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

body .mediacak-footer .footer-menu li {
	margin: 0 !important;
	padding: 0 !important;
}

body .mediacak-footer .footer-menu a {
	text-decoration: none !important;
	color: #333333 !important; /* Hitam arang */
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	transition: color 0.2s ease !important;
}

/* Hover Mengikuti Warna Aksen Utama GP */
body .mediacak-footer .footer-menu a:hover {
	color: var(--gp-color-accent, var(--accent)) !important;
}

/* Copyright */
body .mediacak-footer .footer-copyright {
	font-size: 0.85rem !important;
	color: #888888 !important;
	margin-top: 1rem !important;
}

/* Penyesuaian Responsif Layar Kecil (HP) */
@media (max-width: 480px) {
	body .mediacak-footer {
		padding: 2.5rem 1rem !important;
	}
	body .mediacak-footer .footer-menu {
		flex-direction: column !important;
		gap: 1rem !important;
	}
}

/* ==========================================================================
   5. PENYELARASAN SINGLE POST CONTENT (content-single.php)
   ========================================================================== */
body .mediacak-single-article {
	max-width: 800px !important;
	margin: 0 auto !important;
	padding: 2rem 0 !important;
}

/* --- A. Breadcrumbs --- */
body .mediacak-breadcrumbs {
	font-size: 0.85rem !important;
	font-weight: 500 !important;
	color: #888888 !important;
	margin-bottom: 1.2rem !important;
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 0.4rem !important;
}

body .mediacak-breadcrumbs a {
	color: #888888 !important;
	text-decoration: none !important;
	transition: color 0.2s !important;
}

body .mediacak-breadcrumbs a.category-link {
	color: var(--gp-color-accent, var(--accent)) !important; 
	font-weight: 700 !important;
}

body .mediacak-breadcrumbs a:hover {
	color: #111111 !important;
}

body .mediacak-breadcrumbs .current-post {
	color: #555555 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 250px !important;
}

/* --- B. Judul & Sub-Judul --- */
body .mediacak-single-article .entry-title {
	font-size: 2.6rem !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	color: #111111 !important;
	margin: 0.5rem 0 1.2rem 0 !important;
	letter-spacing: -0.5px !important;
}

body .mediacak-single-article .entry-subtitle {
	font-size: 1.15rem !important;
	line-height: 1.6 !important;
	color: #555555 !important;
	margin-bottom: 1.5rem !important;
}

/* --- C. Meta Artikel --- */
body .entry-meta-container {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding-bottom: 1.2rem !important;
	border-bottom: 1px solid #eaeaea !important;
	margin-bottom: 2rem !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
}

body .entry-meta-container .meta-left {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.25rem !important;
}

/* MENGHANCURKAN WARNA BIRU TAUTAN PADA PENULIS DAN DOMAIN */
body .entry-meta-container .meta-author {
	font-size: 0.9rem !important;
	color: #555555 !important;
}

body .entry-meta-container .meta-author a.author-link {
	color: #111111 !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

body .entry-meta-container .meta-author a.author-link:hover {
	color: var(--gp-color-accent, var(--accent)) !important;
}

body .entry-meta-container .meta-author a.site-source-link {
	color: var(--gp-color-accent, var(--accent)) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

body .entry-meta-container .meta-author a.site-source-link:hover {
	text-decoration: underline !important;
}

body .entry-meta-container .meta-date {
	font-size: 0.85rem !important;
	color: #888888 !important;
}

/* Meta Buttons (Share) */
body .entry-meta-container .meta-right {
	display: flex !important;
	gap: 0.5rem !important;
}

body .entry-meta-container .meta-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: #ffffff !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 8px !important;
	padding: 0.4rem 0.8rem !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: #555555 !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

body .entry-meta-container .meta-btn:hover {
	background: #f4f5f7 !important;
	color: #111111 !important;
	border-color: #cccccc !important;
}

/* --- D. Featured Image & Figcaption --- */
body .entry-featured-image {
	margin: 0 0 2.5rem 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

body .entry-featured-image img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	border-radius: 12px !important; 
}

body .entry-featured-image .featured-caption {
	font-size: 0.85rem !important;
	color: #777777 !important;
	text-align: center !important;
	margin-top: 0.75rem !important;
	font-style: italic !important;
}

/* --- E. Body Content (Isi Artikel) --- */
body .mediacak-single-article .entry-content {
	font-size: 1.12rem !important;
	line-height: 1.8 !important;
	color: #2c2c2c !important;
}

body .mediacak-single-article .entry-content p {
	margin-bottom: 1.6rem !important;
}

body .mediacak-single-article .entry-content h2 {
	font-size: 1.6rem !important;
	font-weight: 700 !important;
	color: #111111 !important;
	margin: 2.2rem 0 1.1rem 0 !important;
}

/* --- F. Footer Artikel (Tags & Google News) --- */
body .mediacak-single-article .entry-footer {
	margin-top: 3.5rem !important;
	border-top: 1px solid #eaeaea !important;
	padding-top: 1.8rem !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 2rem !important;
}

/* Tags / Topik Container */
body .post-tags-container {
	display: flex !important;
	align-items: center !important;
	gap: 1.2rem !important;
	flex-wrap: wrap !important;
}

body .post-tags-container .tags-title {
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	color: #888888 !important;
	letter-spacing: 0.5px !important;
}

body .post-tags-list {
	display: flex !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 0.5rem !important;
	flex-wrap: wrap !important;
}

/* Desain Pil Tag Premium */
body .post-tags-list li a.tag-pill {
	display: inline-block !important;
	padding: 0.5rem 1.1rem !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border-radius: 30px !important; 
	box-sizing: border-box !important;
	transition: all 0.15s ease !important;
	background: #f4f5f7 !important;
	color: #444444 !important;
}

/* Pil Pertama: Berwarna merah pudar & tulisan merah accent */
body .post-tags-list li:first-child a.tag-pill {
	background: rgba(217, 35, 45, 0.08) !important;
	color: var(--gp-color-accent, var(--accent)) !important;
}

body .post-tags-list li a.tag-pill:hover {
	background: var(--gp-color-accent, var(--accent)) !important;
	color: #ffffff !important;
}

/* Google News Box */
body .google-news-follow {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	background: #ffffff !important;
	border: 1px solid #eaeaea !important;
	border-radius: 12px !important;
	padding: 1.2rem 1.5rem !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
}

body .google-news-follow .follow-label {
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #111111 !important;
}

body .google-news-follow .google-news-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	border: 1px solid #eaeaea !important;
	background: #ffffff !important;
	padding: 0.6rem 1.2rem !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: #444444 !important;
	box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
	transition: all 0.2s ease !important;
}

body .google-news-follow .google-news-btn:hover {
	background: #f4f5f7 !important;
	border-color: #cccccc !important;
	box-shadow: 0 4px 8px rgba(0,0,0,0.05) !important;
}

/* --- G. Penyesuaian Responsif Ponsel (Mobile) --- */
@media (max-width: 768px) {
	body .mediacak-single-article {
		padding: 1.5rem 1rem !important;
	}
	body .mediacak-single-article .entry-title {
		font-size: 1.9rem !important;
	}
	body .entry-meta-container {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	body .entry-meta-container .meta-right {
		width: 100% !important;
		justify-content: flex-start !important;
		margin-top: 0.5rem !important;
	}
}

/* ==========================================================================
   6. SECTION ARTIKEL TERKAIT (related-posts.php)
   ========================================================================== */
body .mediacak-related-posts {
	max-width: 800px !important;
	margin: 3.5rem auto 0 auto !important;
	padding-top: 2.5rem !important;
	border-top: 1px solid #eaeaea !important;
	box-sizing: border-box !important;
}

/* Judul Section dengan Aksen Garis Merah Vertikal di Kiri (Sesuai Gambar) */
body .mediacak-related-posts .related-title {
	font-size: 1.35rem !important;
	font-weight: 800 !important;
	color: #111111 !important;
	border-left: 3px solid var(--gp-color-accent, var(--accent)) !important;
	padding-left: 12px !important;
	margin: 0 0 2rem 0 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.3px !important;
}

/* Grid Layout 2 Kolom untuk Desktop */
body .mediacak-related-posts .related-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 2.2rem 2rem !important;
}

body .mediacak-related-posts .related-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 1rem !important;
}

/* Thumbnail Box Bulat Halus (Rounded Box) */
body .mediacak-related-posts .related-thumbnail {
	flex-shrink: 0 !important;
	width: 90px !important;
	height: 90px !important;
	margin: 0 !important;
	padding: 0 !important;
}

body .mediacak-related-posts .related-thumbnail img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important; /* Memastikan rasio gambar tetap proporsional */
	border-radius: 10px !important; /* Membuat sudut tumpul tipis halus */
}

body .mediacak-related-posts .related-item-header {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.35rem !important;
}

/* Metadata Kategori & Waktu */
body .mediacak-related-posts .related-meta {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	color: #888888 !important;
	letter-spacing: 0.3px !important;
}

body .mediacak-related-posts .related-category {
	color: var(--gp-color-accent, var(--accent)) !important; /* Otomatis mengikuti accent warna dari GP */
}

body .mediacak-related-posts .related-meta .sep {
	font-size: 0.6rem !important;
	color: #cccccc !important;
}

/* Judul Postingan Terkait */
body .mediacak-related-posts .related-item-title {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	margin: 0 !important;
}

body .mediacak-related-posts .related-item-title a {
	color: #111111 !important;
	text-decoration: none !important;
	transition: color 0.15s ease !important;
}

body .mediacak-related-posts .related-item-title a:hover {
	color: var(--gp-color-accent, var(--accent)) !important;
}

/* --- Penyesuaian Responsif Layar Kecil (Mobile) --- */
@media (max-width: 768px) {
	body .mediacak-related-posts {
		margin-top: 2.5rem !important;
		padding: 2rem 1rem 0 1rem !important;
	}
	/* Grid Berubah menjadi 1 Kolom Vertikal di HP */
	body .mediacak-related-posts .related-grid {
		grid-template-columns: 1fr !important;
		gap: 1.8rem !important;
	}
	body .mediacak-related-posts .related-thumbnail {
		width: 80px !important;
		height: 80px !important;
	}
	body .mediacak-related-posts .related-item-title {
		font-size: 0.98rem !important;
	}
}

/* ==========================================================================
   7. HOMEPAGE PORTAL LAYOUT (home.php)
   ========================================================================== */
body .mediacak-home {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 2rem 1.5rem !important;
	box-sizing: border-box !important;
}

/* Kotak Kontainer Blok Kategori */
body .mediacak-home-block {
	display: grid !important;
	grid-template-columns: 1.6fr 1fr !important; /* Desain asimetris, kiri lebih lebar */
	gap: 2.5rem !important;
	margin-bottom: 4rem !important;
	align-items: start !important;
}

/* --- A. SISI KIRI (FEATURED POST BESAR) --- */
body .block-featured {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.2rem !important;
}

body .block-featured .featured-image {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

body .block-featured .featured-image img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9 !important; /* Memaksa proporsi lanskap gambar utama */
	object-fit: cover !important;
	border-radius: 12px !important;
	display: block !important;
}

body .block-featured .featured-meta {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	color: #888888 !important;
	margin-bottom: 0.5rem !important;
}

body .block-featured .featured-category {
	color: var(--gp-color-accent, var(--accent)) !important; /* Warna accent merah/hijau dari GP */
}

body .block-featured .featured-meta .sep {
	color: #cccccc !important;
}

body .block-featured .featured-title {
	font-size: 2.2rem !important;
	font-weight: 850 !important;
	line-height: 1.2 !important;
	margin: 0 0 0.8rem 0 !important;
	letter-spacing: -0.5px !important;
}

body .block-featured .featured-title a {
	color: #111111 !important;
	text-decoration: none !important;
	transition: color 0.15s ease !important;
}

body .block-featured .featured-title a:hover {
	color: var(--gp-color-accent, var(--accent)) !important;
}

body .block-featured .featured-excerpt {
	font-size: 1rem !important;
	line-height: 1.6 !important;
	color: #555555 !important;
	margin: 0 !important;
}

/* --- B. SISI KANAN (SIDEBAR LIST KECIL) --- */
body .block-sidebar {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.5rem !important;
}

/* Judul Blok Sidebar dengan Garis Vertikal Aksen Merah (Sesuai Gambar) */
body .block-sidebar .sidebar-block-title {
	font-size: 1.35rem !important;
	font-weight: 800 !important;
	color: #111111 !important;
	border-left: 3px solid var(--gp-color-accent, var(--accent)) !important;
	padding-left: 12px !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}

body .sidebar-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.5rem !important;
}

/* Format Item Desain Mengambil dari Desain Related */
body .sidebar-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 1rem !important;
	padding-bottom: 1.5rem !important;
	border-bottom: 1px solid #f0f0f0 !important;
}

body .sidebar-item:last-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

body .sidebar-thumbnail {
	flex-shrink: 0 !important;
	width: 95px !important;
	height: 95px !important;
	margin: 0 !important;
	padding: 0 !important;
}

body .sidebar-thumbnail img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 8px !important; /* Membuat sudut tumpul halus */
}

body .sidebar-item-header {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.35rem !important;
}

body .sidebar-meta {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	color: #888888 !important;
	letter-spacing: 0.3px !important;
}

body .sidebar-category {
	color: var(--gp-color-accent, var(--accent)) !important;
}

body .sidebar-meta .sep {
	color: #cccccc !important;
}

body .sidebar-item-title {
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	margin: 0 !important;
}

body .sidebar-item-title a {
	color: #111111 !important;
	text-decoration: none !important;
	transition: color 0.15s ease !important;
}

body .sidebar-item-title a:hover {
	color: var(--gp-color-accent, var(--accent)) !important;
}

/* --- C. PENYESUAIAN RESPONSIF MOBILE (< 768px) --- */
@media (max-width: 768px) {
	body .mediacak-home {
		padding: 1rem !important;
	}
	
	/* Grid Berubah Menjadi 1 Kolom Vertikal (Kiri di Atas, Kanan di Bawah) */
	body .mediacak-home-block {
		grid-template-columns: 1fr !important;
		gap: 2rem !important;
		margin-bottom: 3rem !important;
	}
	
	body .block-featured .featured-title {
		font-size: 1.7rem !important;
	}
	
	body .sidebar-thumbnail {
		width: 80px !important;
		height: 80px !important;
	}
	
	body .sidebar-item-title {
		font-size: 0.95rem !important;
	}
}

/* ==========================================================================
   8. ARCHIVE PAGE & PAGINATION (archive.php)
   ========================================================================== */
body .mediacak-archive-page {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 3rem 1.5rem !important;
	box-sizing: border-box !important;
}

/* Header Area Kategori / Tag */
body .archive-header {
	margin-bottom: 2.5rem !important;
	padding-bottom: 2rem !important;
	border-bottom: 1px solid #eaeaea !important;
}

body .archive-header .archive-label {
	font-size: 0.8rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: var(--gp-color-accent, var(--accent)) !important; /* Menggunakan warna accent GP */
	letter-spacing: 1px !important;
}

body .archive-header .archive-title {
	font-size: 3rem !important;
	font-weight: 850 !important;
	line-height: 1.1 !important;
	color: #111111 !important;
	margin: 0.5rem 0 1.2rem 0 !important;
	letter-spacing: -1px !important;
}

body .archive-header .archive-description {
	font-size: 1.1rem !important;
	line-height: 1.6 !important;
	color: #666666 !important;
	max-width: 720px !important;
	margin: 0 !important;
}

/* Grid Layout 2 Kolom untuk Desktop */
body .mediacak-archive-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 2.5rem 2rem !important;
	margin-bottom: 4rem !important;
}

body .mediacak-archive-grid .archive-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 1.2rem !important;
}

/* Thumbnail Box Rounded */
body .mediacak-archive-grid .archive-thumbnail {
	flex-shrink: 0 !important;
	width: 95px !important;
	height: 95px !important;
	margin: 0 !important;
	padding: 0 !important;
}

body .mediacak-archive-grid .archive-thumbnail img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 10px !important; /* Membuat sudut tumpul halus */
}

body .mediacak-archive-grid .archive-item-header {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.35rem !important;
}

/* Metadata Kategori & Waktu */
body .mediacak-archive-grid .archive-item-meta {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	color: #888888 !important;
	letter-spacing: 0.3px !important;
}

body .mediacak-archive-grid .archive-item-category {
	color: var(--gp-color-accent, var(--accent)) !important;
}

body .mediacak-archive-grid .sep {
	color: #cccccc !important;
}

/* Judul Artikel */
body .mediacak-archive-grid .archive-item-title {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	margin: 0 !important;
}

body .mediacak-archive-grid .archive-item-title a {
	color: #111111 !important;
	text-decoration: none !important;
	transition: color 0.15s ease !important;
}

body .mediacak-archive-grid .archive-item-title a:hover {
	color: var(--gp-color-accent, var(--accent)) !important;
}

/* ==========================================================================
   9. DESAIN PAGINATION PREMIUM (Sesuai Gambar Referensi)
   ========================================================================== */
body .navigation.pagination {
	margin: 4rem auto 0 auto !important;
	display: flex !important;
	justify-content: center !important;
}

body .navigation.pagination .nav-links {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important; /* Jarak renggang yang pas antar tombol */
	flex-wrap: wrap !important;
}

/* Gaya Dasar Tombol Angka dan Teks */
body .navigation.pagination .page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 38px !important;
	height: 38px !important;
	padding: 0 10px !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	color: #555555 !important;
	background-color: #ffffff !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 8px !important; /* Membuat sudut kotak membulat halus */
	transition: all 0.2s ease !important;
	box-sizing: border-box !important;
}

/* Efek Hover di Setiap Tombol */
body .navigation.pagination .page-numbers:hover {
	background-color: #f4f5f7 !important;
	border-color: #cccccc !important;
	color: #111111 !important;
}

/* TOMBOL AKTIF: Berwarna merah solid (Sesuai Gambar Referensi) */
body .navigation.pagination .page-numbers.current {
	background-color: var(--gp-color-accent, var(--accent)) !important;
	color: #ffffff !important;
	border-color: var(--gp-color-accent, var(--accent)) !important;
	cursor: default !important;
}

/* Tombol Sebelumnya & Berikutnya (Menyesuaikan Ukuran Teks) */
body .navigation.pagination .page-numbers.prev,
body .navigation.pagination .page-numbers.next {
	padding: 0 16px !important;
	min-width: auto !important;
}

/* Efek khusus untuk Teks Ellipsis (...) */
body .navigation.pagination .page-numbers.dots {
	border: none !important;
	background: transparent !important;
	color: #888888 !important;
	cursor: default !important;
}

/* --- H. Penyesuaian Responsif Layar Kecil (Mobile) --- */
@media (max-width: 768px) {
	body .mediacak-archive-page {
		padding: 1.5rem 1rem !important;
	}
	body .archive-header .archive-title {
		font-size: 2.2rem !important;
	}
	/* Grid berubah menjadi 1 kolom vertikal di ponsel */
	body .mediacak-archive-grid {
		grid-template-columns: 1fr !important;
		gap: 1.8rem !important;
	}
	body .mediacak-archive-grid .archive-thumbnail {
		width: 80px !important;
		height: 80px !important;
	}
	body .mediacak-archive-grid .archive-item-title {
		font-size: 0.98rem !important;
	}
	body .navigation.pagination .page-numbers {
		min-width: 32px !important;
		height: 32px !important;
		font-size: 0.8rem !important;
		padding: 0 8px !important;
	}
}