/*
Theme Name: Wpberita Child - Elegant Futuristik
Theme URI: https://www.idtheme.com/wpberita/
Description: Wpberita Child Theme - Elegant Futuristik: Local Poppins, Dominant Sanepo Blue, Compact Mobile Padding.
Author: kentooz - Gian MR (Sanepo Blue Light)
Author URI: http://gianmr.com
Version: 1.5.3
Template: wpberita
Text Domain: wpberita-child
Requires at least: 5.8
Requires PHP: 7.4
*/

/* ==========================================================================
   LOCAL FONT: POPPINS (Self-Hosted WOFF2, Zero External Network Roundtrip)
   ========================================================================== */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/poppins-400-latin.woff2') format('woff2'),
	     url('fonts/poppins-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/poppins-500-latin.woff2') format('woff2'),
	     url('fonts/poppins-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/poppins-600-latin.woff2') format('woff2'),
	     url('fonts/poppins-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/poppins-700-latin.woff2') format('woff2'),
	     url('fonts/poppins-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('fonts/poppins-800-latin.woff2') format('woff2'),
	     url('fonts/poppins-800-latin-ext.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF;
}

/* ==========================================================================
   1. DESIGN TOKENS — SANEPO EDITORIAL (DOMINAN BIRU SANEPO)
   ========================================================================== */
:root {
	/* Font: Poppins (Self-Hosted WOFF2) */
	--font-family-base: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-reguler: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-extrabold: 800;

	/* Palet Sanepo — DOMINAN BIRU RESMI */
	--brand-primary: #111827;          /* teks utama / nav dark */
	--brand-accent: #0056e0;           /* Biru Utama Sanepo (kategori, hover, aksen) */
	--brand-accent-hover: #0043c7;
	--brand-link: #0056e0;             /* link body teks artikel: biru sanepo */
	--brand-link-hover: #003bb8;
	--brand-futuristic: #0067ff;       /* biru cerah dinamis */
	--brand-glow: rgba(0, 86, 224, 0.12);

	/* Mapping ke variable parent */
	--scheme-color: #0056e0;
	--secondscheme-color: #0067ff;
	--button-bgcolor: #0056e0;
	--button-bgcolor-hover: #0043c7;
	--button-color: #ffffff;
	--mainmenu-bgcolor: #ffffff;       /* bar nav tetap putih bersih */
	--mainmenu-color: #111827;
	--mainmenu-hovercolor: #0056e0;    /* hover link di menu: biru sanepo */
	--secondmenu-bgcolor: #ffffff;
	--secondmenu-color: #111827;
	--secondmenu-hovercolor: #0056e0;
	--link-color-body: #0056e0;
	--hoverlink-color-body: #003bb8;
	--bigheadline-color: #111827;

	/* Surfaces */
	--background-color: #f9fafb;       /* body — abu sangat muda, bukan biru */
	--content-bgcolor: #ffffff;
	--header-bgcolor: #ffffff;
	--topnav-color: #111827;
	--main-color: #111827;
	--muted-color: #6b7280;
	--muted-2: #9ca3af;
	--content-greycolor: #6b7280;
	--greybody-bgcolor: #f3f4f6;
	--rgbacolor: rgba(17, 24, 39, 0.04);
	--border-color: #e5e7eb;
	--border-light: #f3f4f6;
	--border-cyber: #e5e7eb;           /* override sisa cyber */

	--footer-bgcolor: #0b1220;
	--footer-color: #94a3b8;
	--footer-linkcolor: #e2e8f0;
	--footer-hover-linkcolor: #ffffff;

	/* Radius — kalem tapi tidak kaku, futuristik halus */
	--radius-xs: 6px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-pill: 9999px;

	/* Shadow — lembut + glow futuristik sangat tipis */
	--card-shadow: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
	--card-shadow-hover: 0 8px 24px rgba(17, 24, 39, 0.08), 0 2px 8px rgba(14, 165, 233, 0.06);
	--shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06);
	--shadow-md: 0 8px 24px rgba(17, 24, 39, 0.08);
	--glow-primary: 0 0 0 1px rgba(14, 165, 233, 0.08), 0 4px 16px rgba(14, 165, 233, 0.08);
	--glow-cyan: 0 0 0 1px rgba(14, 165, 233, 0.06);

	--touch-min: 44px;
	--content-width: 720px;
	--space-xs: 8px;
	--space-sm: 12px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 40px;
}

/* Dark mode — tetap elegan, bukan cyber glow */
body.dark-theme {
	--background-color: #080c14;
	--content-bgcolor: #0f172a;
	--header-bgcolor: #0b1120;
	--topnav-color: #f1f5f9;
	--main-color: #f1f5f9;
	--muted-color: #94a3b8;
	--muted-2: #64748b;
	--content-greycolor: #94a3b8;
	--greybody-bgcolor: #0f172a;
	--rgbacolor: rgba(255, 255, 255, 0.06);
	--border-color: #1e293b;
	--border-light: #1e293b;
	--border-cyber: #1e293b;
	--link-color-body: #60a5fa;
	--hoverlink-color-body: #93c5fd;
	--footer-bgcolor: #020617;
	--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	--card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5);
}
body.dark-theme .gmr-topnotification {
	background: #f9fafb !important;
	border-color: #e5e7eb !important;
}

/* ==========================================================================
   2. BASE & TYPOGRAPHY — enak dibaca lama
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   2. PENERAPAN UNIVERSAL FONT POPPINS (Self-Hosted, 100% Unified)
   Menimpa seluruh font-family lama, customizer inline CSS (Inter), dsb.
   ========================================================================== */
*,
*::before,
*::after,
html,
body,
input,
textarea,
select,
button,
h1, h2, h3, h4, h5, h6,
.site-title,
.site-title a,
.site-description,
.heading-text,
.entry-title,
.entry-title a,
.post-title,
.recent-title,
.gmr-mainmenu,
.gmr-mainmenu *,
.gmr-mainmenu ul,
.gmr-mainmenu ul > li,
.gmr-mainmenu ul > li > a,
.main-navigation,
.main-navigation *,
#primary-menu,
#primary-menu *,
#primary-menu li a,
#secondary-menu,
#secondary-menu *,
#secondary-menu li a,
.gmr-mobilemenu,
.gmr-mobilemenu *,
.gmr-mobilemenu ul li a,
.sidr,
.sidr *,
.sidr ul li a,
.sidr-class-menu-item a,
.topnav-button,
.second-topnav-btn,
.subtitle,
.meta-content,
.meta-content *,
.posted-on,
.posted-on *,
.gmr-meta-topic,
.gmr-meta-topic a,
.gmr-reading-time-pill,
.duration,
.nav-links,
.nav-links *,
.page-numbers,
.widget-title,
.widget-title *,
.box-item,
.box-item *,
.entry-content-single,
.entry-content-single *,
.entry-content-archive,
.entry-content-archive *,
.comment-body,
.comment-body * {
	font-family: var(--font-family-base) !important;
}

body {
	font-family: var(--font-family-base) !important;
	background: var(--background-color);
	color: var(--main-color);
	line-height: 1.65;
	letter-spacing: 0;
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.site-title, .heading-text, .entry-title, .post-title {
	font-family: var(--font-family-base) !important;
	color: var(--main-color);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

a {
	color: var(--link-color-body);
	text-decoration: none;
	transition: color 0.15s ease;
}
a:hover { color: var(--hoverlink-color-body); }

:focus-visible {
	outline: 2px solid var(--brand-link);
	outline-offset: 2px;
	border-radius: 2px;
}
::selection {
	background: rgba(29, 78, 216, 0.14);
	color: var(--main-color);
}
body.dark-theme ::selection {
	background: rgba(96, 165, 250, 0.3);
	color: #fff;
}

/* ==========================================================================
   3. READING PROGRESS — tipis, solid, tidak rainbow
   ========================================================================== */
#gmr-reading-progress-wrap {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 2px;
	z-index: 99999;
	background: transparent;
	pointer-events: none;
}
#gmr-reading-progress {
	height: 100%; width: 0%;
	background: var(--brand-accent);
	box-shadow: none;
	transition: width 0.08s linear;
}

/* ==========================================================================
   4. HEADER & TOPNAV — solid, premium, bukan glassy
   ========================================================================== */
.site { background: var(--content-bgcolor); }

.gmr-topnavwrap {
	background: rgba(255,255,255,0.92) !important;
	border-bottom: 1px solid rgba(229,231,235,0.9);
	box-shadow: 0 1px 3px rgba(17,24,39,0.04) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
}
.admin-bar .gmr-topnavwrap { top: 32px; }

/* Top notification / ticker bar — futuristik tipis */
.gmr-topnotification {
	background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
	border-bottom: 1px solid var(--border-light);
	padding: 8px 0;
	font-size: 13px;
}
.text-marquee {
	background: linear-gradient(135deg, var(--brand-accent) 0%, #ef4444 100%) !important;
	color: #fff !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	font-size: 10px !important;
	letter-spacing: 0.08em !important;
	padding: 5px 10px !important;
	border-radius: 6px !important;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(220,38,38,0.2) !important;
	display: inline-flex;
	align-items: center;
}
.text-marquee::before { content: none !important; }
.wrap-marquee .marquee {
	font-size: 13px;
	color: var(--main-color);
}
.wrap-marquee .marquee a { color: var(--main-color); font-weight: 500; }
.wrap-marquee .marquee a:hover { color: var(--brand-accent); }

/* Logo */
.gmr-logo img, .gmr-logo-mobile img, .custom-logo {
	max-width: 100%;
	height: auto;
	display: block;
}
.site-title { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.site-title a { color: var(--main-color); }
.gmr-logo-mobile .site-title { font-size: 17px; line-height: 1; }

/* Search form — kotak elegan, alignment pixel perfect */
.gmr-topnavwrap .row-flex .gmr-searchform {
	max-width: 300px;
	display: flex;
	align-items: center;
}
.gmr-topnavwrap .row-flex .gmr-searchform input {
	background: var(--greybody-bgcolor) !important;
	border: 1px solid transparent !important;
	border-radius: 8px !important;
	font-size: 13px;
	height: 36px;
	padding: 7px 40px 7px 14px !important;
	color: var(--main-color);
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
	line-height: 1;
}
.gmr-topnavwrap .row-flex .gmr-searchform input:focus {
	background: var(--content-bgcolor) !important;
	border-color: var(--border-color) !important;
	box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1) !important;
}
.gmr-topnavwrap .row-flex .gmr-searchform button {
	color: var(--muted-color);
	padding: 0;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	right: 0;
}
.topnav-button {
	background: var(--greybody-bgcolor);
	color: var(--main-color) !important;
	border: 1px solid transparent;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
	line-height: 1.2;
	transition: all 0.15s ease;
}
.topnav-button:hover {
	background: var(--content-bgcolor);
	border-color: var(--border-color);
	color: var(--main-color) !important;
}
#search-menu-button, .topnav-button.darkmode-button {
	background: transparent !important;
	border: 0;
	padding: 6px;
	color: var(--muted-color) !important;
}
#search-menu-button:hover, .darkmode-button:hover { color: var(--main-color) !important; }

/* Mobile scroll menu — rapi, tidak kepotong */
.gmr-mobilemenuwrap {
	background: var(--header-bgcolor) !important;
	border-bottom: 1px solid var(--border-light);
	max-height: 44px;
	overflow: hidden;
}
.gmr-mobilemenu {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.gmr-mobilemenu::-webkit-scrollbar { display: none; }
.gmr-mobilemenu ul li a {
	color: var(--main-color) !important;
	font-size: 13px;
	font-weight: 600;
	padding: 13px 12px 13px 0;
	white-space: nowrap;
	line-height: 1;
}
.gmr-mobilemenu ul li a:hover { color: var(--brand-accent) !important; }

/* Site header branding — padding simple elegan */
.site-header {
	padding: 16px 0;
	border-bottom: 1px solid var(--border-light);
	background: var(--header-bgcolor);
}
@media (max-width: 992px) {
	.site-header { padding: 16px 0; }
}
.site-branding { gap: 16px; }
.site-branding .gmr-logo img,
.site-branding .custom-logo,
.gmr-logo-wrap img {
	max-height: 48px !important;
	width: auto !important;
	max-width: 260px !important;
	object-fit: contain !important;
	display: block !important;
}
.gmr-logo-mobile img,
.gmr-logo-mobile .custom-logo {
	max-height: 34px !important;
	width: auto !important;
	max-width: 160px !important;
	object-fit: contain !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

/* ==========================================================================
   4. NAVIGATION & MENUS — BACKGROUND PUTIH BERSIH, OBJECT/TEKS HITAM PEKAT
   ========================================================================== */

/* 4.1 Hamburger Button (#gmr-responsive-menu) — Background transparan/putih, Garis HITAM */
#gmr-responsive-menu,
button#gmr-responsive-menu,
.menu-toggle#gmr-responsive-menu {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 6px 8px 6px 0 !important;
	width: 36px !important;
	height: 34px !important;
	min-width: 36px !important;
	min-height: 34px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	color: #111827 !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	border-radius: 6px !important;
}
#gmr-responsive-menu:hover,
#gmr-responsive-menu:focus {
	background: rgba(0, 0, 0, 0.04) !important;
	background-color: rgba(0, 0, 0, 0.04) !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}
#gmr-responsive-menu div.ktz-i-wrap {
	width: 27px !important;
	height: 27px !important;
	display: block !important;
	position: relative !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	margin: 0 auto !important;
}
#gmr-responsive-menu span.ktz-i {
	display: block !important;
	position: absolute !important;
	height: 2.5px !important;
	left: 3px !important;
	width: 20px !important;
	background: #111827 !important; /* OBJECT: HITAM PEKAT */
	background-color: #111827 !important;
	border-radius: 4px !important;
	opacity: 1 !important;
	transition: all 0.25s ease-in-out !important;
}
#gmr-responsive-menu span:nth-child(1) { top: 6px !important; }
#gmr-responsive-menu span:nth-child(2) { top: 12px !important; }
#gmr-responsive-menu span:nth-child(3) { top: 18px !important; }

#gmr-responsive-menu.toggled-on span:nth-child(1) {
	top: 12px !important;
	transform: rotate(135deg) !important;
	background-color: var(--brand-accent, #0056e0) !important;
}
#gmr-responsive-menu.toggled-on span:nth-child(2) {
	opacity: 0 !important;
	left: -20px !important;
}
#gmr-responsive-menu.toggled-on span:nth-child(3) {
	top: 12px !important;
	transform: rotate(-135deg) !important;
	background-color: var(--brand-accent, #0056e0) !important;
}

/* 4.2 Top Navigation Wrap (#topnavwrap) — Background Putih, Objek Hitam */
#topnavwrap,
.gmr-topnavwrap {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
.gmr-topnavwrap a,
.gmr-topnavwrap .site-title a,
.gmr-topnavwrap .row-flex a,
.gmr-topnavwrap .row-flex span {
	color: #111827 !important; /* Teks Hitam */
}
.gmr-topnavwrap .topnav-button {
	background: #f3f4f6 !important;
	background-color: #f3f4f6 !important;
	color: #111827 !important;
	border: 1px solid #e5e7eb !important;
	font-weight: 700 !important;
	font-size: 12.5px !important;
}
.gmr-topnavwrap .topnav-button:hover {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: var(--brand-accent, #0056e0) !important;
	border-color: var(--brand-accent, #0056e0) !important;
}
.gmr-topnavwrap #search-menu-button,
.gmr-topnavwrap .darkmode-button {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	color: #111827 !important;
}
.gmr-topnavwrap #search-menu-button svg,
.gmr-topnavwrap .darkmode-button svg {
	color: #111827 !important;
	fill: currentColor !important;
}
.gmr-topnavwrap .gmr-searchform {
	background: transparent !important;
}
.gmr-topnavwrap .gmr-searchform input {
	background: #f9fafb !important;
	background-color: #f9fafb !important;
	color: #111827 !important;
	border: 1px solid #e5e7eb !important;
}
.gmr-topnavwrap .gmr-searchform button {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	color: #111827 !important;
}
.gmr-topnavwrap .gmr-searchform button svg {
	color: #111827 !important;
	fill: currentColor !important;
}
#search-dropdown-container {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border: 1px solid #e5e7eb !important;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

/* 4.3 Mobile Category Menu Strip (.gmr-mobilemenuwrap) — Background Putih, Objek Hitam */
.gmr-mobilemenuwrap {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border-bottom: 1px solid #e5e7eb !important;
}
.gmr-mobilemenu ul li a {
	color: #111827 !important; /* Teks Hitam */
	font-weight: 700 !important;
	font-size: 13.5px !important;
	background: transparent !important;
}
.gmr-mobilemenu ul li a:hover,
.gmr-mobilemenu ul li.current-menu-item a {
	color: var(--brand-accent, #0056e0) !important;
}

/* 4.4 Main Navigation Bar (Desktop & Primary/Secondary Menu) — Background Putih, Objek Hitam */
#main-nav-wrap,
.gmr-mainmenu-wrap,
#main-nav,
.main-navigation,
.gmr-mainmenu,
#primary-menu,
#secondary-menu {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border-bottom: 1px solid #e5e7eb !important;
	box-shadow: none !important;
}
.gmr-mainmenu ul > li > a,
#primary-menu > li > a,
#secondary-menu > li > a {
	color: #111827 !important; /* Teks Hitam */
	font-weight: 700 !important;
	font-size: 14px !important;
	background: transparent !important;
	background-color: transparent !important;
	padding: 14px 16px;
	line-height: 1;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.gmr-mainmenu ul > li > a:hover,
#primary-menu > li > a:hover,
#secondary-menu > li > a:hover,
.gmr-mainmenu ul > li.current-menu-item > a,
#primary-menu > li.current-menu-item > a,
#secondary-menu > li.current-menu-item > a {
	color: var(--brand-accent, #0056e0) !important;
	border-bottom-color: var(--brand-accent, #0056e0) !important;
	background: transparent !important;
	background-color: transparent !important;
}
/* Panah dropdown sub-menu */
.gmr-mainmenu ul > li.menu-item-has-children > a:after,
.gmr-mainmenu ul > li.page_item_has_children > a:after,
#primary-menu > li.menu-item-has-children > a:after,
#secondary-menu > li.menu-item-has-children > a:after {
	border-bottom: 2px solid #111827 !important;
	border-right: 2px solid #111827 !important;
}
.gmr-mainmenu ul > li.menu-item-has-children:hover > a:after,
#primary-menu > li.menu-item-has-children:hover > a:after,
#secondary-menu > li.menu-item-has-children:hover > a:after {
	border-bottom-color: var(--brand-accent, #0056e0) !important;
	border-right-color: var(--brand-accent, #0056e0) !important;
}

/* 4.5 Sub-menu Dropdown — Background Putih, Objek Hitam */
.gmr-mainmenu ul .sub-menu,
.gmr-mainmenu ul .children,
#primary-menu .sub-menu,
#secondary-menu .sub-menu {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border: 1px solid #e5e7eb !important;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
	border-radius: 8px !important;
	padding: 8px !important;
}
.gmr-mainmenu ul .sub-menu li a,
.gmr-mainmenu ul .children li a,
#primary-menu .sub-menu li a,
#secondary-menu .sub-menu li a {
	color: #111827 !important; /* Teks Hitam */
	font-weight: 600 !important;
	font-size: 13.5px !important;
	padding: 8px 12px !important;
	border-radius: 6px !important;
	background: transparent !important;
	background-color: transparent !important;
}
.gmr-mainmenu ul .sub-menu li a:hover,
.gmr-mainmenu ul .children li a:hover,
#primary-menu .sub-menu li a:hover,
#secondary-menu .sub-menu li a:hover {
	background: #f3f4f6 !important;
	background-color: #f3f4f6 !important;
	color: var(--brand-accent, #0056e0) !important;
}

/* 4.6 Sidr Mobile Off-Canvas Drawer Menu — Background Putih, Objek Hitam */
#sidr,
.sidr,
#topnavmenus,
.sidr-inner {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #111827 !important;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.15) !important;
}
.sidr-class-gmr-logo-wrap {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border-bottom: 1px solid #e5e7eb !important;
}
.sidr-class-close-topnavmenu-wrap #sidr-id-close-topnavmenu-button,
.sidr-class-close-topnavmenu-wrap a {
	color: #111827 !important;
	background: transparent !important;
}
.sidr-class-close-topnavmenu-wrap svg {
	color: #111827 !important;
	fill: #111827 !important;
}
.sidr ul li a,
.sidr-class-menu-item a {
	color: #111827 !important; /* Teks Hitam */
	font-weight: 600 !important;
	font-size: 15px !important;
	padding: 10px 20px !important;
	border-bottom: 1px solid #f3f4f6 !important;
	background: transparent !important;
}
.sidr ul li a:hover,
.sidr-class-menu-item a:hover {
	background: #f3f4f6 !important;
	background-color: #f3f4f6 !important;
	color: var(--brand-accent, #0056e0) !important;
}
.sidr ul li ul,
.sidr-class-sub-menu {
	background: #f9fafb !important;
	background-color: #f9fafb !important;
}
.sidr ul li ul li a {
	color: #374151 !important;
	font-weight: 500 !important;
	font-size: 14px !important;
}
.sidr ul li ul li a:hover {
	color: var(--brand-accent, #0056e0) !important;
	background: #f3f4f6 !important;
}

/* ==========================================================================
   5. LAYOUT GRID — 8/4 tetap, gap premium
   ========================================================================== */
.container { max-width: 1160px; padding-left: 16px; padding-right: 16px; }
@media (min-width: 1200px) { .container { max-width: 1160px; } }
.row { margin-left: -16px; margin-right: -16px; gap: 0; }
.col-md-8, .col-md-4, .col-md-12, .col-md-6, .col-md-3 { padding-left: 16px; padding-right: 16px; }
#primary.col-md-8 { flex: 0 0 67.5%; max-width: 67.5%; }
#secondary.col-md-4 { flex: 0 0 32.5%; max-width: 32.5%; }
@media (max-width: 992px) {
	#primary.col-md-8, #secondary.col-md-4 { flex: 0 0 100%; max-width: 100%; }
}
.gmr-content { padding: 24px 0; background: var(--content-bgcolor); }

/* Page header — tidak mepet, ada udara, sangat rapi */
.page-header { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h1.page-title, h3.page-title, .related-text, h3.related-text {
	font-size: 13.5px !important;
	font-weight: 800 !important;
	color: var(--main-color) !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding-top: 0 !important;
	margin: 0 !important;
	line-height: 1;
	display: flex;
	align-items: center;
	gap: 10px;
}
h1.page-title::before, h3.page-title::before, h3.related-text::before { content: none !important; }
.related-text, h3.related-text {
	border-top: 0 !important;
	border-left: 3px solid var(--brand-accent);
	padding-left: 12px;
	line-height: 1;
}

/* ==========================================================================
   6. FEED — Elegant list, bukan card mengkilap
   Standard berita: thumb kiri + teks kanan di desktop
   ========================================================================== */
.box-item {
	display: flex;
	gap: 16px;
	padding: 16px;
	border: 1px solid transparent;
	border-bottom: 1px solid var(--border-light);
	margin-bottom: 0;
	border-radius: 12px;
	background: transparent;
	transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
	position: relative;
}
.widget {
	background: #fff;
	border: 1px solid var(--border-light);
	border-radius: 12px;
	box-shadow: var(--card-shadow);
	overflow: hidden;
	position: relative;
}
.box-item:hover {
	transform: none !important;
	background: #fff !important;
	box-shadow: var(--card-shadow-hover) !important;
	border-color: var(--border-color) !important;
}
.box-item:first-child { padding-top: 16px; }
.box-item:last-child { border-bottom-color: transparent; }

/* Thumbnail — futuristik ringan dengan glow halus */
.box-item .post-thumbnail {
	flex: 0 0 168px;
	width: 168px;
	height: 96px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--greybody-bgcolor);
	display: block;
	position: relative;
	align-self: flex-start;
	box-shadow: 0 2px 8px rgba(17,24,39,0.06);
	border: 1px solid rgba(229,231,235,0.8);
}
.box-item .post-thumbnail img {
	width: 100%; height: 100%;
	object-fit: cover;
	aspect-ratio: auto;
	transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.box-item:hover .post-thumbnail { border-color: rgba(14,165,233,0.15); box-shadow: 0 4px 16px rgba(17,24,39,0.1); }
.box-item:hover .post-thumbnail img { transform: scale(1.04); filter: none !important; }

/* Jika tanpa thumbnail, teks full */
.box-item:not(:has(.post-thumbnail)) .box-content { width: 100%; }

.box-content { flex: 1; min-width: 0; padding: 2px 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.gmr-meta-topic {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
	margin: 0;
}
.gmr-meta-topic a { font-size: 11px !important; }
.cat-links-content a,
.gmr-meta-topic a {
	background: transparent !important;
	color: var(--brand-accent) !important;
	border: 0 !important;
	padding: 0 !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase;
	box-shadow: none !important;
}
.cat-links-content a::before, .gmr-meta-topic a::before {
	content: ""; width: 6px; height: 6px; background: var(--brand-accent); border-radius: 50%; margin-right: 6px; display: inline-block; box-shadow: none !important;
}
.cat-links-content a:hover, .gmr-meta-topic a:hover {
	background: transparent !important; color: var(--brand-accent-hover) !important; text-decoration: underline; text-underline-offset: 3px; box-shadow: none !important;
}
.meta-content { font-size: 12px; color: var(--muted-color); font-weight: 400; }
.meta-content a { color: var(--muted-color); }
.meta-content a:hover { color: var(--main-color); }
.posted-on { font-size: 12px; color: var(--muted-color); }

h2.entry-title {
	font-size: 16.5px !important;
	line-height: 1.38 !important;
	font-weight: 700 !important;
	margin: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
h2.entry-title a { color: var(--main-color); }
h2.entry-title a:hover { color: var(--brand-accent) !important; text-decoration: none; }

.entry-content-archive {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--muted-color);
	margin-top: 2px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.entry-content-archive p { margin: 0; }

.entry-footer-archive {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	font-size: 12px; color: var(--muted-color);
	margin-top: 4px;
}
.posted-by a { color: var(--muted-color); font-weight: 600; }
.posted-by a:hover { color: var(--main-color); }

/* Featured first post — hero futuristik tapi tidak kaku */
body.home #infinite-container > article:first-child .box-item {
	gap: 20px;
	padding: 16px;
	padding-bottom: 20px;
	background: linear-gradient(180deg, rgba(249,250,251,0.6) 0%, rgba(255,255,255,0) 100%);
	border: 1px solid var(--border-light);
	border-radius: 16px;
	margin-bottom: 12px;
	box-shadow: var(--card-shadow);
}
body.home #infinite-container > article:first-child .box-item:hover {
	background: #fff !important;
	box-shadow: var(--card-shadow-hover) !important;
	border-color: var(--border-color) !important;
}
body.home #infinite-container > article:first-child .post-thumbnail {
	flex-basis: 52%;
	width: 52%;
	height: 220px;
	border-radius: 12px;
}
body.home #infinite-container > article:first-child h2.entry-title { font-size: 20px !important; -webkit-line-clamp: 3; }
body.home #infinite-container > article:first-child .entry-content-archive { -webkit-line-clamp: 3; }

@media (max-width: 640px) {
	.box-item { gap: 10px !important; padding: 10px 4px !important; border-radius: 8px !important; margin-bottom: 6px !important; }
	.box-item .post-thumbnail { flex-basis: 104px !important; width: 104px !important; height: 72px !important; border-radius: 6px !important; }
	body.home #infinite-container > article:first-child .box-item { flex-direction: column !important; padding: 10px 4px !important; }
	body.home #infinite-container > article:first-child .post-thumbnail { flex-basis: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 16/9 !important; }
	body.home #infinite-container > article:first-child .post-thumbnail img { height: auto !important; aspect-ratio: 16/9 !important; }
	h2.entry-title { font-size: 15px !important; line-height: 1.35 !important; }
}

/* Format badges — minimal, rapi di pojok */
.gmr-format {
	background: rgba(17, 24, 39, 0.82) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: 0 !important;
	border-radius: 6px !important;
	padding: 4px 7px !important;
	font-size: 11px !important;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
	color: #fff !important;
	position: absolute !important;
	bottom: 8px !important;
	left: 8px !important;
	top: auto !important;
	right: auto !important;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.gmr-format svg { width: 12px; height: 12px; }
.gmr-format svg path { fill: #fff !important; }

/* Infinite scroll / pagination — rapi tengah */
.pagination, .inf-pagination { margin-top: 24px; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.pagination .page-numbers {
	border: 1px solid var(--border-color);
	background: var(--content-bgcolor);
	color: var(--main-color);
	padding: 9px 14px;
	border-radius: 8px;
	font-size: 13px; font-weight: 600;
	min-width: 40px;
	min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
	line-height: 1;
	transition: all 0.15s ease;
}
.pagination .page-numbers.current {
	background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); box-shadow: 0 2px 8px rgba(17,24,39,0.12);
}
.pagination .page-numbers:hover { border-color: var(--main-color); color: var(--main-color); background: var(--greybody-bgcolor); }
.view-more-button, .btn {
	background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
	color: #fff !important;
	border: 1px solid #111827 !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	min-height: 42px;
	padding: 10px 20px !important;
	box-shadow: 0 2px 8px rgba(17,24,39,0.12) !important;
	line-height: 1;
}
.view-more-button:hover, .btn:hover {
	background: #000 !important; border-color: #000 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(17,24,39,0.15) !important;
}

/* Ad containers — banner iklan Google AdSense, kustom HTML, shortcode (100% andal & responsif) */
.inline-banner,
.gmr-banner-between-posts,
.gmr-verytopbanner,
.gmr-topbanner,
.gmr-banner-beforecontent,
.gmr-banner-before-content,
.gmr-banner-insidecontent,
.gmr-banner-inside-content,
.gmr-banner-aftercontent,
.gmr-banner-after-content,
.gmr-banner-afterrelpost,
.gmr-banner-after-relpost,
.gmr-banner-stickyright,
.widget-banner {
	display: block !important;
	text-align: center !important;
	margin: 20px auto !important;
	clear: both !important;
	overflow: visible !important;
	padding: 10px 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Biarkan AdSense dan Banner Responsive mengatur ukurannya sendiri tanpa terjebak flex collapse */
.inline-banner ins.adsbygoogle,
.gmr-verytopbanner ins.adsbygoogle,
.gmr-topbanner ins.adsbygoogle,
.gmr-banner-beforecontent ins.adsbygoogle,
.gmr-banner-insidecontent ins.adsbygoogle,
.gmr-banner-aftercontent ins.adsbygoogle,
.gmr-banner-afterrelpost ins.adsbygoogle,
.widget-banner ins.adsbygoogle {
	display: block !important;
	margin: 0 auto !important;
	overflow: visible !important;
}

.inline-banner img,
.gmr-verytopbanner img,
.gmr-topbanner img,
.gmr-banner-beforecontent img,
.gmr-banner-insidecontent img,
.gmr-banner-aftercontent img,
.gmr-banner-afterrelpost img,
.widget-banner img {
	max-width: 100% !important;
	height: auto !important;
	display: inline-block !important;
	vertical-align: middle !important;
	border-radius: 8px !important;
}

.inline-banner iframe,
.gmr-verytopbanner iframe,
.gmr-topbanner iframe,
.gmr-banner-beforecontent iframe,
.gmr-banner-insidecontent iframe,
.gmr-banner-aftercontent iframe,
.gmr-banner-afterrelpost iframe {
	max-width: 100% !important;
	margin: 0 auto !important;
	display: block !important;
}

/* Jika container banner benar-benar kosong di frontend, sembunyikan agar tidak ada celah kosong */
.inline-banner:empty,
.gmr-verytopbanner:empty,
.gmr-topbanner:empty,
.gmr-banner-beforecontent:empty,
.gmr-banner-insidecontent:empty,
.gmr-banner-aftercontent:empty,
.gmr-banner-afterrelpost:empty {
	display: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	border: 0 !important;
}

/* Content visibility — hanya listing */
body.blog .box-item, body.archive .box-item, body.search .box-item {
	content-visibility: auto;
	contain-intrinsic-size: auto 140px;
}

/* ==========================================================================
   7. SINGLE ARTICLE — premium readability, tanpa card
   ========================================================================== */
.content-single {
	background: #fff !important;
	border: 1px solid var(--border-light) !important;
	border-radius: 16px !important;
	box-shadow: var(--card-shadow) !important;
	padding: 24px !important;
	margin-bottom: 24px;
	max-width: var(--content-width);
}
@media (min-width: 992px) {
	.content-single { padding: 24px !important; }
}
@media (max-width: 768px) {
	.content-single { padding: 16px !important; border-radius: 12px !important; }
}
.entry-header-single { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border-light); }
.entry-header-single .entry-title {
	font-size: clamp(26px, 3.2vw, 34px) !important;
	line-height: 1.22 !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em;
	margin: 10px 0 12px !important;
	color: var(--main-color);
}
.subtitle {
	font-size: 16px; line-height: 1.6; color: var(--muted-color); font-weight: 400; margin: 10px 0 0;
	max-width: 95%;
}
.gmr-content-metasingle { font-size: 13px; color: var(--muted-color); line-height: 1.55; display: flex; flex-direction: column; gap: 2px; }
.gmr-gravatar-metasingle img {
	width: 38px; height: 38px; border-radius: 50%; border: 0 !important; box-shadow: 0 1px 3px rgba(17,24,39,0.08) !important;
	object-fit: cover;
}
.gmr-reading-time-pill {
	display: inline-flex; align-items: center; gap: 5px;
	background: var(--greybody-bgcolor) !important;
	color: var(--muted-color) !important;
	border: 1px solid var(--border-color) !important;
	padding: 3px 8px !important;
	border-radius: 9999px !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	letter-spacing: 0.02em;
}
.gmr-reading-time-pill .reading-time-icon { color: var(--muted-color) !important; filter: none !important; font-size: 11px; }

/* Breadcrumbs — subtle, sangat rapi */
.breadcrumbs {
	font-size: 12.5px;
	color: var(--muted-color);
	margin-bottom: 14px;
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
	padding: 6px 0;
	line-height: 1.4;
}
.breadcrumbs a { color: var(--muted-color); font-weight: 500; }
.breadcrumbs a:hover { color: var(--main-color); }
.breadcrumbs .separator {
	width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center;
	color: var(--muted-2); font-size: 12px;
	border: 0 !important; transform: none !important; background: transparent;
}
.breadcrumbs .separator::after { content: "›"; border: 0; width: auto; height: auto; transform: none; color: var(--muted-2); font-weight: 400; }
.breadcrumbs .last-cl { display: inline !important; color: var(--main-color); font-weight: 600; }

/* Thumbnail single — futuristik ringan, tidak kaku, rapi */
.gmr-thumbnail-single {
	border-radius: 12px;
	overflow: hidden;
	margin: 20px 0 24px;
	box-shadow: 0 4px 20px rgba(17,24,39,0.08) !important;
	border: 1px solid var(--border-light) !important;
	background: var(--greybody-bgcolor);
	position: relative;
}
.gmr-thumbnail-single figcaption { margin: 0; }
.gmr-thumbnail-single img { width: 100%; height: auto; display: block; }
.wp-caption-text {
	font-size: 12px; color: var(--muted-color); font-style: italic; padding: 10px 14px; background: var(--greybody-bgcolor); border-top: 1px solid var(--border-light); line-height: 1.5;
}

/* Entry content */
.entry-content-single {
	font-size: 17px;
	line-height: 1.84;
	color: #1f2937;
	max-width: 100%;
}
body.dark-theme .entry-content-single { color: #e5e7eb; }
.entry-content-single p { margin-bottom: 1.4em; }
.entry-content-single h2 {
	font-size: 21px;
	margin-top: 30px; margin-bottom: 14px;
	padding: 8px 14px;
	border-left: 3px solid var(--brand-accent);
	background: linear-gradient(90deg, rgba(220,38,38,0.06) 0%, transparent 100%);
	border-radius: 0 8px 8px 0;
	line-height: 1.35;
}
.entry-content-single h3 {
	font-size: 18px; margin-top: 24px; margin-bottom: 10px; color: var(--main-color);
}
.entry-content-single a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(29,78,216,0.35); }
.entry-content-single a:hover { text-decoration-color: var(--brand-link); }
.entry-content-single blockquote {
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
	border-left: 4px solid var(--brand-accent) !important;
	border-radius: 0 12px 12px 0 !important;
	padding: 18px 22px !important;
	margin: 24px 0 !important;
	font-style: normal !important;
	color: var(--main-color) !important;
	font-size: 15.5px !important;
	line-height: 1.7 !important;
	box-shadow: 0 1px 3px rgba(17,24,39,0.04);
}
body.dark-theme .entry-content-single blockquote { background: #1e293b !important; border-left-color: #ef4444 !important; }
.entry-content-single ul, .entry-content-single ol { padding-left: 1.5em; margin-bottom: 1.3em; }
.entry-content-single li { margin-bottom: 0.5em; line-height: 1.65; }
.entry-content-single li::marker { color: var(--brand-accent); font-weight: 700; }
.entry-content-single img { border-radius: 10px; max-width: 100%; height: auto; }
.entry-content-single figure { margin: 24px 0; }
.entry-content-single figcaption { text-align: center; font-size: 12.5px; color: var(--muted-color); padding-top: 6px; }

/* ==========================================================================
   CODE BLOCKS & INLINE CODE — Super Rapi, Kontras Sempurna & Elegan
   Mencegah potongan kode tutorial/shortcode hilang, berantakan, atau sulit dibaca
   ========================================================================== */
pre,
.entry-content-single pre,
.entry-content pre,
.wp-block-code pre,
.wp-block-preformatted pre {
	background: #0f172a !important;
	color: #f8fafc !important;
	border: 1px solid #1e293b !important;
	border-radius: 12px !important;
	padding: 18px 20px !important;
	margin: 24px 0 !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
	font-size: 14px !important;
	line-height: 1.65 !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	position: relative !important;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1) !important;
	tab-size: 4 !important;
}

pre code,
.entry-content-single pre code,
.entry-content pre code,
.wp-block-code code {
	background: transparent !important;
	color: inherit !important;
	padding: 0 !important;
	font-size: inherit !important;
	border: none !important;
	border-radius: 0 !important;
	white-space: pre !important;
	word-break: normal !important;
	word-wrap: normal !important;
}

/* Inline code (misal dalam teks paragraf atau list) */
code,
.entry-content-single p code,
.entry-content-single li code,
.entry-content-single td code,
.entry-content p code,
.entry-content li code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
	font-size: 0.88em !important;
	background: rgba(220, 38, 38, 0.08) !important;
	color: #0056e0 !important;
	border: 1px solid rgba(220, 38, 38, 0.18) !important;
	border-radius: 6px !important;
	padding: 2px 7px !important;
	margin: 0 2px !important;
	font-weight: 600 !important;
	vertical-align: baseline !important;
}

body.dark-theme code,
body.dark-theme .entry-content-single p code,
body.dark-theme .entry-content-single li code,
body.dark-theme .entry-content-single td code {
	background: rgba(248, 113, 113, 0.15) !important;
	color: #fca5a5 !important;
	border-color: rgba(248, 113, 113, 0.3) !important;
}

/* Keyboard badge kbd */
kbd {
	background-color: #f1f5f9 !important;
	color: #0f172a !important;
	border: 1px solid #cbd5e1 !important;
	border-bottom: 2px solid #94a3b8 !important;
	border-radius: 6px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
	font-size: 0.85em !important;
	padding: 2px 6px !important;
	font-family: monospace !important;
}

body.dark-theme kbd {
	background-color: #1e293b !important;
	color: #f8fafc !important;
	border-color: #475569 !important;
	border-bottom-color: #334155 !important;
}

/* ==========================================================================
   TABLES & GUTENBERG BLOCKS — Super Rapi & Responsif
   ========================================================================== */
table,
.wp-block-table table {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 24px 0 !important;
	font-size: 14.5px !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
}

table thead th,
.wp-block-table th {
	background: var(--greybody-bgcolor) !important;
	color: var(--main-color) !important;
	font-weight: 700 !important;
	text-align: left !important;
	padding: 12px 16px !important;
	border-bottom: 2px solid var(--border-color) !important;
}

table tbody td,
.wp-block-table td {
	padding: 12px 16px !important;
	border-bottom: 1px solid var(--border-color) !important;
	color: var(--main-color) !important;
}

table tbody tr:nth-child(even),
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: rgba(0, 0, 0, 0.02) !important;
}

body.dark-theme table tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.03) !important;
}

.wp-block-table {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	margin: 24px 0 !important;
}

.wp-block-embed,
.gmr-embed-responsive {
	position: relative !important;
	margin: 24px 0 !important;
	clear: both !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
}

.wp-block-embed iframe,
.gmr-embed-responsive iframe {
	max-width: 100% !important;
	border: none !important;
	border-radius: 12px !important;
}

.wp-block-button__link {
	border-radius: 8px !important;
	font-weight: 700 !important;
	padding: 12px 24px !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
}

.wp-block-button__link:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18) !important;
}

/* TOC — Joli TOC, Easy TOC, LWPToc, Gutenberg TOC */
#ez-toc-container, .lwptoc, #toc_container, .table-of-contents, .wp-block-table-of-contents,
#wpj-jtoc, .wpj-jtoc, .wpj-jtoc--toc {
	background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%) !important;
	border: 1px solid var(--border-color) !important;
	border-left: 3px solid var(--brand-accent) !important;
	border-radius: 12px !important;
	box-shadow: var(--card-shadow) !important;
	padding: 16px 18px !important;
	margin: 22px 0 !important;
}
#ez-toc-container .ez-toc-title, .wpj-jtoc--title { font-size: 13.5px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.05em; color: var(--main-color) !important; }
#ez-toc-container ul li a, .wpj-jtoc--items a { color: var(--brand-link) !important; font-size: 13.5px; }

/* Custom "Lanjutkan Membaca / Baca Juga" (kda-bj-wrapper) */
.kda-bj-wrapper {
	margin: 28px 0 !important;
	padding: 16px 20px !important;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
	border: 1px solid var(--border-color) !important;
	border-left: 4px solid var(--brand-accent) !important;
	border-radius: 12px !important;
	box-shadow: var(--card-shadow) !important;
}
body.dark-theme .kda-bj-wrapper {
	background: #111827 !important;
	border-color: #1e293b !important;
	border-left-color: var(--brand-accent) !important;
}
.kda-bj-heading {
	font-size: 14px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: var(--main-color) !important;
	margin: 0 0 12px 0 !important;
	padding: 0 !important;
	border: none !important;
}
.kda-bj-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.kda-bj-item {
	padding: 8px 0 !important;
	border-bottom: 1px solid var(--border-light) !important;
}
.kda-bj-item:last-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}
.kda-bj-link {
	text-decoration: none !important;
	color: var(--main-color) !important;
	font-weight: 600 !important;
	font-size: 14.5px !important;
	line-height: 1.45 !important;
	display: flex !important;
	align-items: baseline !important;
	gap: 8px !important;
	transition: color 0.15s ease !important;
}
.kda-bj-link:hover {
	color: var(--brand-accent) !important;
}
.kda-bj-reading-time {
	font-size: 11.5px !important;
	color: var(--muted-color) !important;
	font-weight: 500 !important;
	margin-left: 8px !important;
	white-space: nowrap !important;
}

/* WordPress Popular Posts (WPP) - Style Modern */
.wpp-scope .wpp-list {
	counter-reset: wpp-counter !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.wpp-scope .wpp-list > li {
	list-style: none !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 8px 0 !important;
	padding: 10px 12px !important;
	background: var(--content-bgcolor) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.wpp-scope .wpp-list > li:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}
.wpp-scope .wpp-list > li::marker { content: "" !important; }
.wpp-scope .wpp-list > li::before {
	counter-increment: wpp-counter !important;
	content: counter(wpp-counter) !important;
	width: 28px !important;
	height: 28px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 28px !important;
	border-radius: 50% !important;
	background: var(--brand-primary) !important;
	color: #fff !important;
	font-weight: 800 !important;
	font-size: 12px !important;
	line-height: 1 !important;
}
.wpp-scope .wpp-list > li:nth-child(1)::before { background: #0056e0 !important; }
.wpp-scope .wpp-list > li:nth-child(2)::before { background: #ea580c !important; }
.wpp-scope .wpp-list > li:nth-child(3)::before { background: #ca8a04 !important; }
.wpp-scope .wpp-post-title,
.wpp-scope .popular a {
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: var(--main-color) !important;
	text-decoration: none !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}
.wpp-scope .wpp-post-title:hover,
.wpp-scope .popular a:hover {
	color: var(--brand-accent) !important;
}

/* Tags — rapi, tidak dempet */
.tags-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tags-links a {
	display: inline-flex; align-items: center;
	background: var(--greybody-bgcolor) !important;
	color: var(--muted-color) !important;
	padding: 6px 12px !important;
	border-radius: 9999px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	border: 1px solid var(--border-color) !important;
	transition: all 0.15s ease;
	margin: 0 !important;
	line-height: 1;
}
.tags-links a:hover {
	background: var(--main-color) !important;
	color: #fff !important;
	border-color: var(--main-color) !important;
	box-shadow: none !important;
	transform: none !important;
}
.gmr-cf-metacontent {
	display: flex; flex-wrap: wrap; gap: 16px;
	font-size: 12.5px; color: var(--muted-color);
	padding-top: 16px; margin-top: 18px; border-top: 1px solid var(--border-light);
	line-height: 1.4;
}
.gmr-cf-metacontent span { display: inline-flex; gap: 4px; }
.gmr-cf-metacontent a { color: var(--brand-link); text-decoration: underline; text-underline-offset: 2px; }

/* Share & comments — alignment sangat rapi */
.list-table { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-light); }
.comments-link { font-size: 13px; font-weight: 600; color: var(--muted-color); display: inline-flex; align-items: center; gap: 6px; }
.comments-link .text-comment { line-height: 1; }
.gmr-socialicon-share { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; align-items: center; }
.gmr-socialicon-share li a {
	width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
	background: var(--greybody-bgcolor); border: 1px solid var(--border-color); border-radius: 8px;
	color: var(--muted-color); transition: all 0.15s ease; line-height: 1;
}
.gmr-socialicon-share li a:hover { background: var(--main-color); border-color: var(--main-color); color: #fff; }
.gmr-socialicon-share li a svg { width: 16px; height: 16px; }

/* Related — SUPER RAPI desktop + mobile (override parent flex 33%/50% berantakan) */
.gmr-related-post {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--border-light);
}
.gmr-related-post .wpberita-list-gallery,
.wpberita-list-gallery {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}
/* Hilangkan clearfix :before/:after parent yang bikin gap kosong di desktop */
.wpberita-list-gallery::before,
.wpberita-list-gallery::after,
.wpberita-list-gallery.clearfix::before,
.wpberita-list-gallery.clearfix::after,
.gmr-related-post .wpberita-list-gallery::before,
.gmr-related-post .wpberita-list-gallery::after {
	content: none !important;
	display: none !important;
	height: 0 !important;
	clear: none !important;
}
.gmr-related-post .list-gallery,
.gmr-related-post .list-gallery.related-gallery,
.gmr-related-post .list-gallery.third-gallery,
.gmr-related-post .list-gallery.related-gallery.third-gallery,
.wpberita-list-gallery .list-gallery,
.list-gallery.related-gallery,
.list-gallery.third-gallery {
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
}
.list-gallery {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	background: #fff;
	border: 1px solid var(--border-light);
	border-radius: 12px;
	overflow: hidden;
	padding: 0 !important;
	box-shadow: var(--card-shadow);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.list-gallery:hover {
	box-shadow: var(--card-shadow-hover);
	border-color: var(--border-color);
}
.list-gallery .post-thumbnail {
	display: block !important;
	overflow: hidden;
	background: var(--greybody-bgcolor);
	aspect-ratio: 16 / 9;
	border: 0 !important;
	border-bottom: 1px solid var(--border-light) !important;
	border-radius: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	position: relative;
}
.list-gallery .post-thumbnail img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.3s ease;
}
.list-gallery:hover .post-thumbnail img { transform: scale(1.03); }
.list-gallery .list-gallery-title {
	padding: 12px 14px 0 !important;
	margin: 0 !important;
}
.list-gallery-title a {
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
	color: var(--main-color) !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
.list-gallery-title a:hover { color: var(--brand-accent) !important; }
.list-gallery .entry-content-archive,
.list-gallery .entry-content {
	padding: 0 14px 14px !important;
	margin: 0 !important;
	font-size: 12.5px !important;
	line-height: 1.5 !important;
	color: var(--muted-color) !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}
/* Rekomendasi untuk kamu — third-gallery (50% parent) sekarang 2 kolom desktop biar excerpt lega */
.gmr-related-post:has(.third-gallery) .wpberita-list-gallery {
	grid-template-columns: repeat(2, 1fr) !important;
}
.gmr-related-post-onlytitle {
	margin-top: 20px;
	padding: 16px 18px;
	background: var(--greybody-bgcolor);
	border: 1px solid var(--border-light);
	border-radius: 12px;
}
.related-text-onlytitle {
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 10px;
	line-height: 1;
}
/* Tablet */
@media (max-width: 992px) {
	.gmr-related-post .wpberita-list-gallery,
	.wpberita-list-gallery {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px !important;
	}
	.gmr-related-post:has(.third-gallery) .wpberita-list-gallery {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
/* Mobile — 1 kolom, title & excerpt bertumpuk atas-bawah (bukan berdampingan) */
@media (max-width: 640px) {
	.gmr-related-post .wpberita-list-gallery,
	.wpberita-list-gallery,
	.gmr-related-post:has(.third-gallery) .wpberita-list-gallery {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}
	.list-gallery {
		display: grid !important;
		grid-template-columns: 110px 1fr !important;
		grid-template-areas:
			"thumb title"
			"thumb excerpt" !important;
		gap: 0 !important;
		align-items: stretch !important;
	}
	.list-gallery .post-thumbnail {
		grid-area: thumb !important;
		width: 110px !important;
		flex: none !important;
		aspect-ratio: 1 / 1 !important;
		border-bottom: 0 !important;
		border-right: 1px solid var(--border-light) !important;
		border-radius: 0 !important;
		align-self: stretch !important;
	}
	.list-gallery .list-gallery-title {
		grid-area: title !important;
		padding: 10px 12px 0 !important;
		align-self: end !important;
	}
	.list-gallery .entry-content-archive,
	.list-gallery .entry-content {
		grid-area: excerpt !important;
		padding: 4px 12px 10px !important;
		-webkit-line-clamp: 1 !important;
		align-self: start !important;
	}
}
@media (max-width: 380px) {
	.list-gallery { grid-template-columns: 96px 1fr !important; }
	.list-gallery .post-thumbnail { width: 96px !important; }
}

/* ==========================================================================
   8. SIDEBAR & WIDGETS — clean, editorial
   ========================================================================== */
.widget-area { position: relative; display: flex; flex-direction: column; gap: 16px; }
.widget {
	padding: 16px;
	border: 1px solid var(--border-light);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--card-shadow);
	margin-bottom: 0;
}
.widget:last-child { margin-bottom: 0; }
.widget-title, .heading-text, .module-title {
	font-size: 13px !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--main-color);
	padding-left: 10px !important;
	margin-bottom: 14px;
	position: relative;
	border-left: 3px solid var(--brand-accent);
}
.widget-title::before, .heading-text::before, .module-title::before { content: none !important; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { padding: 10px 0; border-bottom: 1px solid var(--border-light); font-size: 13.5px; line-height: 1.5; display: flex; gap: 8px; align-items: center; }
.widget ul li:last-child { border-bottom: 0; padding-bottom: 0; }
.widget ul li:first-child { padding-top: 0; }
.widget ul li a { color: var(--main-color); font-weight: 500; line-height: 1.4; }
.widget ul li a:hover { color: var(--brand-accent); }

/* Search widget — rapi & sejajar */
.widget_search form, .search-form { display: flex; gap: 8px; align-items: center; }
.widget_search input[type="search"], .search-form input[type="search"] {
	border-radius: 8px !important; border: 1px solid var(--border-color) !important; background: var(--content-bgcolor) !important; flex: 1;
}
.widget_search input[type="search"]:focus { border-color: var(--brand-link) !important; box-shadow: 0 0 0 3px rgba(29,78,216,0.1) !important; }

/* ==========================================================================
   9. FOOTER — premium dark, hierarki
   ========================================================================== */
.site-footer {
	background: linear-gradient(180deg, #0b1220 0%, #070d1a 100%) !important;
	color: var(--footer-color);
	border-top: 1px solid rgba(255,255,255,0.06);
	margin-top: 32px;
	padding-top: 0;
}
#footer-sidebar { padding: 32px 0 20px; }
#footer-sidebar .widget {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 0 20px !important;
	border-radius: 0 !important;
}
#footer-sidebar .widget-title { color: #fff !important; border-left-color: var(--brand-accent); }
#footer-sidebar a { color: #cbd5e1; }
#footer-sidebar a:hover { color: #fff; }
.site-info { padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.gmr-footer-logo img { max-height: 40px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.gmr-social-icons .social-icon { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.gmr-social-icons .social-icon li a svg { width: 28px; height: 28px; border-radius: 50%; padding: 6px; background: rgba(255,255,255,0.08); }
.footer-menu ul { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.footer-menu a { font-size: 12.5px; color: var(--footer-linkcolor); font-weight: 500; }
.footer-menu a:hover { color: var(--footer-hover-linkcolor); }
.site-footer .heading-text { font-size: 12px; color: var(--footer-color); }
.site-footer a { color: var(--footer-linkcolor); }
.site-footer a:hover { color: var(--footer-hover-linkcolor); }

/* ==========================================================================
   10. BUTTONS & FORMS — kotak elegan, bukan pill mengkilap
   ========================================================================== */
.entry-content button, .entry-content input[type="submit"],
.comment-form input[type="submit"], .comment-reply-link,
.widget input[type="submit"], .widget button[type="submit"], .widget .button {
	background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
	color: #fff !important;
	border: 1px solid #111827 !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	min-height: 40px;
	padding: 9px 18px !important;
	box-shadow: 0 2px 8px rgba(17,24,39,0.12) !important;
	transition: all 0.2s ease !important;
}
.entry-content button:hover, .comment-form input[type="submit"]:hover, .widget input[type="submit"]:hover {
	background: linear-gradient(180deg, #111827 0%, #000 100%) !important; border-color: #000 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(17,24,39,0.18) !important;
}
.entry-content input[type="text"], .entry-content input[type="search"], .entry-content input[type="email"], .entry-content input[type="url"], .entry-content textarea, .entry-content select,
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea,
.widget input[type="text"], .widget input[type="search"], .widget input[type="email"], .widget select, .widget textarea,
.search-form input[type="search"] {
	border-radius: 6px !important;
	border: 1px solid var(--border-color) !important;
	background: var(--content-bgcolor) !important;
	color: var(--main-color) !important;
	min-height: 38px;
	padding: 8px 12px !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.entry-content input:focus, .entry-content textarea:focus, .comment-form input:focus, .widget input:focus, .search-form input:focus {
	border-color: var(--brand-link) !important;
	box-shadow: 0 0 0 3px rgba(29,78,216,0.1) !important;
	outline: none;
}

/* Back to top */
#gmr-back-to-top {
	position: fixed; bottom: 18px; right: 18px;
	width: 38px; height: 38px; padding: 0; border: 0;
	background: var(--brand-primary) !important;
	color: #fff; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 8px rgba(17,24,39,0.15) !important;
	cursor: pointer; z-index: 999;
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background 0.15s ease;
}
#gmr-back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
#gmr-back-to-top:hover { background: #000 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(17,24,39,0.2) !important; }
#gmr-back-to-top svg { width: 18px; height: 18px; fill: #fff; }

/* ==========================================================================
   11. MISC — suppress adblock, fallback-filter, accessibility
   ========================================================================== */
.adblock-notice, .adblock-overlay, .adblock-warning, .adblock-message,
.please-disable-adblock, .please-disable-adblocker, #adblock-notice, #adblock-warning,
#block-adblock, #blockadblock, .block-adblock, .blockadblock, .fuckadblock { display: none !important; }
body.adblock-on, body.adb-enabled, html.adblock-on { overflow: auto !important; position: static !important; height: auto !important; }

.breadcrumbs .last-cl { display: inline !important; color: var(--main-color); font-weight: 600; }
.breadcrumbs span.last-cl { display: inline !important; }

@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
	.gmr-topnavwrap, .gmr-format { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
.gmr-floatbanner button[data-close-float] {
	cursor: pointer; background: rgba(17,24,39,0.85); color: #fff; border: 0; border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600; line-height: 1;
}

/* Image anti-CLS & anti-404 visual fallback — futuristik halus */
.post-thumbnail, .gmr-thumbnail-single { position: relative; background: var(--greybody-bgcolor); }
.post-thumbnail img, .gmr-thumbnail-single img { display: block; width: 100%; height: auto; }
.post-thumbnail img[src=""], .post-thumbnail img:not([src]) { visibility: hidden; }
.box-item .post-thumbnail::after {
	content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(17,24,39,0.05)); pointer-events: none; border-radius: inherit;
}
.gmr-thumbnail-single::after {
	content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, rgba(17,24,39,0.04)); pointer-events: none; border-radius: inherit;
}

/* ==========================================================================
   12. MOBILE & A11Y
   ========================================================================== */
@media (max-width: 768px) {
	body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
	.main-navigation a, .menu a, .nav-menu a { min-height: var(--touch-min); display: inline-flex; align-items: center; padding: 8px 10px; }
	#gmr-back-to-top { bottom: 14px; right: 14px; width: 36px; height: 36px; }
	.gmr-content { padding-top: 8px !important; padding-bottom: 16px !important; }
	.container { padding-left: 8px !important; padding-right: 8px !important; }
	.row { margin-left: -4px !important; margin-right: -4px !important; }
	.col-md-8, .col-md-4, .col-md-12, .col-sm-12, .col-xs-12, .footer-column, .content-area, .site-main { padding-left: 4px !important; padding-right: 4px !important; }
	.site-header { padding: 8px 0 6px !important; }
	.site-branding { gap: 8px !important; }
	.gmr-topnotification { padding: 4px 0 !important; }
	.gmr-topnotification .container { padding-left: 8px !important; padding-right: 8px !important; }
	.gmr-mobilemenuwrap .container { padding-left: 8px !important; padding-right: 8px !important; }
	.gmr-mobilemenu ul li a { padding: 10px 10px 10px 0 !important; }
	.entry-header-single, .entry-content-single, .entry-footer-single, .comments-area, #comments, .post-navigation { padding-left: 2px !important; padding-right: 2px !important; }
	.entry-content-single { font-size: 16px !important; line-height: 1.78 !important; }
	.gmr-content-single { padding: 0 !important; }
	.page-header { margin-bottom: 10px !important; padding-left: 2px !important; }
}
@media (max-width: 480px), (hover: none) {
	.gmr-topnavwrap { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* ==========================================================================
   13. CUSTOM FIXES — Perfectionist Request (BEST: gap 16px calc)
   - .kda-bj-heading-text → hitam pekat
   - .wpp-scope .wpp-list > li → rata kiri (bukan tengah)
   - .gmr-floatbanner calc 16px (tidak pernah nutup konten) + popular sejajar + table-row center
   ========================================================================== */
.kda-bj-heading-text,
.kda-bj-heading-text * {
	color: #000 !important;
}
body.dark-theme .kda-bj-heading-text,
body.dark-theme .kda-bj-heading-text * {
	color: #f1f5f9 !important;
}

/* WordPress Popular Posts — paksa rata kiri, bukan tengah */
.wpp-scope .wpp-list > li {
	text-align: left !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
}
.wpp-scope .wpp-list > li a,
.wpp-scope .wpp-list > li .wpp-post-title,
.wpp-scope .wpp-list > li .wpp-excerpt,
.wpp-scope .wpp-list > li .wpp-meta {
	text-align: left !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Popular widget — angka sejajar dengan judul (bukan dibawah) */
.wpberita-popular .wpberita-list-widget > li,
.wpberita-popular li.clearfix,
.widget_wpberita-popular li {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	flex-wrap: nowrap !important;
}
.wpberita-popular .rp-number {
	flex: 0 0 42px !important;
	width: 42px !important;
	min-width: 42px !important;
	text-align: center !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 32px !important;
}
.wpberita-popular .recent-content.numberstyle {
	margin-left: 0 !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}
.wpberita-popular .recent-content .recent-title {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* Table row — place-items center (request) */
.table-row {
	display: table-row !important;
	place-items: center !important;
	vertical-align: middle !important;
}

/* Float banners — Responsive positioning: diletakkan di margin kanan-kiri desktop, tidak pernah off-screen */
.gmr-floatbanner {
	position: relative;
	z-index: 998;
}
.gmr-floatbanner-left {
	position: fixed !important;
	top: 90px !important;
	left: max(8px, calc(50% - 590px - 130px)) !important;
	right: auto !important;
	width: 120px !important;
	max-width: 120px !important;
	margin: 0 !important;
	z-index: 990 !important;
	display: block !important;
}
.gmr-floatbanner-right {
	position: fixed !important;
	top: 90px !important;
	right: max(8px, calc(50% - 590px - 130px)) !important;
	left: auto !important;
	width: 120px !important;
	max-width: 120px !important;
	margin: 0 !important;
	z-index: 990 !important;
	display: block !important;
}
@media (min-width: 1480px) {
	.gmr-floatbanner-left {
		left: max(16px, calc(50% - 600px - 170px)) !important;
		width: 160px !important;
		max-width: 160px !important;
	}
	.gmr-floatbanner-right {
		right: max(16px, calc(50% - 600px - 170px)) !important;
		width: 160px !important;
		max-width: 160px !important;
	}
}
@media (max-width: 1259px) {
	/* Pada layar di bawah 1260px, sembunyikan float samping agar tidak menutupi isi artikel */
	.gmr-floatbanner-left,
	.gmr-floatbanner-right {
		display: none !important;
	}
}

.gmr-floatbanner-footer {
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 99999 !important;
	text-align: center !important;
	background: rgba(15, 23, 42, 0.95) !important;
	padding: 8px 12px !important;
	box-shadow: 0 -4px 20px rgba(0,0,0,0.2) !important;
	backdrop-filter: blur(8px) !important;
}
.gmr-floatbanner-footer .inner-floatbottom {
	position: relative !important;
	display: inline-block !important;
	max-width: 100% !important;
}

/* Tombol Tutup Banner (Close button) */
.gmr-floatbanner button[data-close-float] {
	cursor: pointer !important;
	background: #0056e0 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 4px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	padding: 2px 8px !important;
	line-height: 18px !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
	z-index: 9999 !important;
	transition: background 0.15s ease !important;
}
.gmr-floatbanner button[data-close-float]:hover {
	background: #003bb8 !important;
}
.inner-floatleft button[data-close-float] {
	position: absolute !important;
	top: -24px !important;
	right: 0 !important;
}
.inner-floatright button[data-close-float] {
	position: absolute !important;
	top: -24px !important;
	left: 0 !important;
}
.gmr-floatbanner-footer button[data-close-float] {
	position: absolute !important;
	top: -26px !important;
	right: 0 !important;
	border-radius: 4px 4px 0 0 !important;
}

/* Subtitle styling */
.subtitle { font-family: var(--font-family-base); }

/* ==========================================================================
   14. AD & BANNER CONTAINERS — ZERO CLS (Cumulative Layout Shift) RESERVED SPACE
   ========================================================================== */
.gmr-topbanner,
.gmr-verytopbanner,
.gmr-banner-logo {
	min-height: 90px;
	margin: 16px auto;
	display: block !important;
	text-align: center !important;
	overflow: visible;
	contain-intrinsic-size: 728px 90px;
}
.gmr-banner-beforecontent,
.gmr-banner-insidecontent,
.gmr-banner-aftercontent,
.inline-banner {
	min-height: 250px;
	margin: 20px auto !important;
	display: block !important;
	text-align: center !important;
	overflow: visible;
	clear: both !important;
	contain-intrinsic-size: 336px 280px;
}
@media (max-width: 768px) {
	.gmr-topbanner,
	.gmr-verytopbanner {
		min-height: 50px;
		contain-intrinsic-size: 320px 50px;
	}
	.gmr-banner-beforecontent,
	.gmr-banner-insidecontent,
	.gmr-banner-aftercontent,
	.inline-banner {
		min-height: 250px;
		contain-intrinsic-size: 300px 250px;
		margin: 16px auto !important;
	}
}

/* ==========================================================================
   15. RELATIVE DATE & META TOPIC (News/Discover UI Polish)
   ========================================================================== */
.gmr-meta-topic {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}
.gmr-meta-topic .meta-content {
	display: inline-flex;
	align-items: center;
	font-size: 0.78rem;
	color: var(--muted-color);
}
.gmr-meta-topic .posted-on {
	display: inline-flex;
	align-items: center;
	font-weight: 500;
	color: var(--muted-color);
}
.gmr-meta-topic .posted-on time.entry-date {
	color: inherit;
	letter-spacing: -0.01em;
}

/* ==========================================================================
   16. GOOGLE ADSENSE COMPLIANT CONTAINERS & ANTI-CLS (Reserved Space)
   ========================================================================== */
.adsbygoogle-wrap,
.gmr-ad-wrapper {
	display: block;
	text-align: center;
	margin: 20px auto;
	min-height: 280px;
	contain-intrinsic-size: 336px 280px;
	clear: both;
}
@media (max-width: 768px) {
	.adsbygoogle-wrap,
	.gmr-ad-wrapper {
		min-height: 250px;
		contain-intrinsic-size: 300px 250px;
		margin: 16px auto;
	}
}
/* Label Iklan Resmi & Transparan Sesuai Kebijakan Google AdSense */
.gmr-ad-label {
	display: block;
	font-size: 11px;
	line-height: 1.4;
	color: var(--muted-2, #9ca3af);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: center;
	margin-bottom: 6px;
	user-select: none;
}