/*
Theme Name: WpBerita Child
Theme URI: https://www.idtheme.com/wpberita
Description: Child theme WpBerita ala Wpmedia (BosTheme) - warna merah #d9091b & ungu #3920c9, font Poppins, menu bar dan widget bergradasi, tanggal di header.
Author: Gian MR
Author URI: https://www.gianmr.com
Template: wpberita
Version: 1.0.70
Requires at least: 5.8
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wpberita-child
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*--------------------------------------------------------------
1. Warna & Font ala Wpmedia
--------------------------------------------------------------*/
body {
	--font-reguler: 400;
	--font-bold: 700;
	--background-color: #f8f8f8;
	--scheme-color: #d9091b;
	--secondscheme-color: #3920c9;
	--bigheadline-color: #f1c40f;
	--main-color: #000000;
	--link-color-body: #000000;
	--hoverlink-color-body: #d9091b;
	--widget-title: #000000;
	--border-color: #cccccc;
	--header-bgcolor: #ffffff;
	--topnav-color: #000000;
	--topnav-link-color: #000000;
	--topnav-linkhover-color: #d9091b;
	--mainmenu-bgcolor: #d9091b;
	--main-menu-secondbgcolor: #3920c9;
	--mainmenu-direction: 80deg;
	--mainmenu-color: #ffffff;
	--mainmenu-hovercolor: #f1c40f;
	--secondmenu-bgcolor: transparent;
	--secondmenu-color: #ffffff;
	--secondmenu-hovercolor: #f1c40f;
	--content-bgcolor: #ffffff;
	--content-greycolor: #555555;
	--button-bgcolor: #3920c9;
	--button-color: #ffffff;
	--footer-bgcolor: #ffffff;
	--footer-color: #666666;
	--footer-linkcolor: #212121;
	--footer-hover-linkcolor: #d9091b;
	--greybody-bgcolor: #eeeeee;
	font-family: "Poppins", sans-serif;
}

body.dark-theme {
	--background-color: #111111;
	--scheme-color: #d9091b;
	--secondscheme-color: #3920c9;
	--bigheadline-color: #f1c40f;
	--main-color: #efefef;
	--link-color-body: #ffffff;
	--hoverlink-color-body: #f1c40f;
	--widget-title: #f1c40f;
	--border-color: #444444;
	--header-bgcolor: #222222;
	--topnav-color: #ffffff;
	--topnav-link-color: #ffffff;
	--topnav-linkhover-color: #f1c40f;
	--mainmenu-bgcolor: #333333;
	--main-menu-secondbgcolor: #222222;
	--mainmenu-color: #ffffff;
	--mainmenu-hovercolor: #f1c40f;
	--secondmenu-color: #ffffff;
	--secondmenu-hovercolor: #f1c40f;
	--content-bgcolor: #222222;
	--content-greycolor: #aaaaaa;
	--footer-bgcolor: #333333;
	--footer-color: #dddddd;
	--footer-linkcolor: #ffffff;
	--footer-hover-linkcolor: #dddddd;
	--greybody-bgcolor: #333333;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.gmr-mainmenu ul > li > a,
.gmr-mobilemenu ul li a,
.heading-text {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
}
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
	font-weight: 700;
}
.entry-content-single {
	font-size: 16px;
}

/*--------------------------------------------------------------
2. Header ala Wpmedia (logo kiri, date + search + darkmode kanan)
--------------------------------------------------------------*/
.gmr-topnavwrap .site-header {
	position: relative;
	color: var(--topnav-color, #000000);
	padding: 10px 0 10px;
}
.gmr-topnavwrap .row-flex {
	height: 40px;
}
.row-flex.gmr-navleft > * {
	margin-right: 20px;
}
@media (max-width: 600px) {
	.row-flex.gmr-navleft > * {
		margin-right: 10px;
	}
}
.gmr-topnavwrap .row-flex.gmr-navright {
	margin-left: auto;
	max-width: 720px;
	align-items: center;
}
/* Jarak antar elemen di navright - persis Wpmedia */
.row-flex.gmr-navright > * {
	margin-left: 20px;
}
@media (max-width: 600px) {
	.row-flex.gmr-navright > * {
		margin-left: 10px;
	}
}
.row-flex.gmr-navright > *:first-child {
	margin-left: 0;
}
.gmr-searchform {
	position: relative;
	max-width: 400px;
}
.gmr-searchform input {
	outline: none;
	text-align: left;
	width: 100%;
	max-width: 250px;
	margin: 0;
	height: 34px;
	border-width: 1px !important;
	padding: 8px 40px 8px 16px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 20px;
}
.gmr-searchform button {
	position: absolute;
	right: 0;
	top: 0;
	border: none;
	cursor: pointer;
	outline: none;
	background-color: transparent;
	padding: 6px 10px;
	color: var(--content-greycolor, #555555);
}
.gmr-searchform button svg {
	width: 20px;
	height: 20px;
	line-height: 20px;
	vertical-align: -0.4em;
	padding: 0;
}
/* Buang margin vertikal parent agar selaras dengan tinggi 40px */
.gmr-topnavwrap .row-flex .gmr-searchform {
	height: 34px !important;
	margin: 0 !important;
	position: relative;
	color: var(--topnav-color, #000000);
}
.gmr-topnavwrap .row-flex #gmr-responsive-menu {
	height: 24px !important;
	width: 24px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 20px !important;
	padding: 0 !important;
	background-color: transparent !important;
}
@media (max-width: 600px) {
	.gmr-topnavwrap .row-flex #gmr-responsive-menu {
		margin-left: 10px !important;
	}
}
/* Sembunyikan hamburger di desktop; parent memaksa display:inline-flex via ID */
#gmr-responsive-menu {
	display: none !important;
}
@media (max-width: 992px) {
	#gmr-responsive-menu {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}
}
.gmr-topnavwrap .row-flex #gmr-responsive-menu svg {
	height: 24px;
	width: 24px;
}
.gmr-topnavwrap .row-flex .darkmode-button {
	padding: 0;
}
button.topnav-button {
	background-color: transparent !important;
	background: none !important;
	color: var(--topnav-color, #000000);
	width: 24px;
	height: 24px;
	padding: 0 !important;
	margin: 0;
	border-radius: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Tombol ikon di topnavwrap tidak berubah merah saat diklik (parent
   memaksa color: --topnav-linkhover-color via :focus/:active) */
.gmr-topnavwrap .site-header button:hover,
.gmr-topnavwrap .site-header button:focus,
.gmr-topnavwrap .site-header button:active {
	color: var(--topnav-color, #000000);
}
button.topnav-button > svg {
	height: 24px;
	width: 24px;
	padding: 0;
}
.gmr-menugrid-btn {
	position: relative;
	width: 24px;
	height: 24px;
}
.gmr-menugrid-btn #menugrid-button {
	max-width: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.gmr-menugrid-btn .gmr-dropdown {
	display: none;
	position: absolute;
	top: auto;
	right: 0;
	margin-top: 12px;
	z-index: 99999;
	transition: all 0.3s;
	background-color: var(--content-bgcolor, #ffffff);
	padding: 0 !important;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	border-radius: 2px;
}
.gmr-menugrid-btn .gmr-dropdown.active {
	display: block;
}
/* Dropdown menugrid - persis Wpmedia */
.gmr-secondmenu-dropdown.gmr-dropdown ul#secondary-menu,
.gmr-menugrid-btn ul#secondary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gmr-menugrid-btn ul#secondary-menu li {
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	background: none;
}
.gmr-menugrid-btn ul#secondary-menu li a {
	padding: 0 20px;
	display: flex;
	position: relative;
	line-height: 1.4;
	font-size: 13px;
	text-decoration: none !important;
	justify-content: flex-start;
	align-items: center;
	height: 32px;
	color: var(--link-color-body, #000000);
	white-space: nowrap;
	background-color: transparent;
}
.gmr-menugrid-btn ul#secondary-menu li a:hover {
	color: var(--hoverlink-color-body, #d9091b);
	background-color: rgba(0, 0, 0, 0.05);
}
.gmr-secondmenu-dropdown.gmr-dropdown ul#secondary-menu {
	padding: 10px 0 !important;
}
.gmr-secondmenu-dropdown.col-2 ul#secondary-menu {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 400px) {
	.gmr-secondmenu-dropdown.col-2 ul#secondary-menu {
		grid-template-columns: repeat(1, 1fr);
	}
}
.desktop-only {
	display: block;
}
.mobile-only {
	display: none;
}
@media (max-width: 992px) {
	.mobile-only {
		display: block;
	}
	.nomobile,
	.desktop-only {
		display: none;
	}
}
.gmr-top-date {
	border-right: 1px solid var(--border-color, #cccccc);
	padding-right: 20px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
	color: var(--topnav-color, #000000);
}
@media (max-width: 992px) {
	.gmr-top-date {
		display: none;
	}
}
/* Logo kompak di mobile (tampil di samping tombol menu) */
@media (max-width: 992px) {
	.gmr-topnavwrap .gmr-logo {
		display: inline-flex;
		width: auto;
		max-width: 200px;
		margin: 0 0 0 5px;
		text-align: left;
	}
	.gmr-topnavwrap .gmr-logo img.custom-logo {
		max-height: 34px;
		width: auto;
	}
	.gmr-topnavwrap .gmr-logo .site-title {
		font-size: 18px;
	}
}

/*--------------------------------------------------------------
3. Menu bar gradasi ala Wpmedia
--------------------------------------------------------------*/
.gmr-mainmenu {
	background: linear-gradient(var(--mainmenu-direction, 80deg), var(--mainmenu-bgcolor, #d9091b) 0%, var(--main-menu-secondbgcolor, #3920c9) 100%);
	box-shadow: 0 15px 15px -15px rgba(0, 0, 0, 0.2);
}
#primary-menu {
	background-color: transparent;
}
/* Struktur menu persis Wpmedia: ul flex, li grid height 44, a tanpa padding */
.gmr-mainmenu ul#primary-menu,
.gmr-mainmenu ul#secondary-menu {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 0;
	z-index: 999;
	align-items: center;
}
.gmr-mainmenu ul#primary-menu > li,
.gmr-mainmenu ul#secondary-menu > li {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	position: relative;
	height: 44px;
	align-items: center;
	justify-content: center;
	margin-right: 30px;
}
.gmr-mainmenu ul#primary-menu > li:last-child,
.gmr-mainmenu ul#secondary-menu > li:last-child {
	margin-right: 0;
}
.gmr-mainmenu ul#primary-menu > li > a,
.gmr-mainmenu ul#secondary-menu > li > a {
	position: relative;
	display: flex;
	padding: 0;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none !important;
	color: var(--mainmenu-color, #ffffff);
	height: 44px;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}
.gmr-mainmenu ul#primary-menu > li:hover > a,
.gmr-mainmenu ul#secondary-menu > li:hover > a,
.gmr-mainmenu ul#primary-menu > li.current-menu-item > a,
.gmr-mainmenu ul#secondary-menu > li.current-menu-item > a,
.gmr-mainmenu ul#primary-menu > li.current_page_item > a,
.gmr-mainmenu ul#secondary-menu > li.current_page_item > a {
	color: var(--mainmenu-hovercolor, #f1c40f);
	box-shadow: inset 0 -1px 0 0 var(--mainmenu-hovercolor, #f1c40f);
}
/* Link di sub-menu memakai penataan asli parent */
.gmr-mainmenu ul .sub-menu > li > a {
	height: auto;
	display: block;
	padding: 9px 15px;
	font-size: 14px;
	white-space: normal;
}
/* Panah dropdown persis Wpmedia */
.gmr-mainmenu ul > li.menu-item-has-children > a:after,
.gmr-mainmenu ul > li.page_item_has_children > a:after {
	display: none;
}
.gmr-mainmenu ul > li.menu-item-has-children > a span:after,
.gmr-mainmenu ul > li.page_item_has_children > a span:after {
	display: inline-block;
	position: relative;
	margin-left: 6px;
	margin-right: 3px;
	margin-top: -3px;
	top: auto;
	bottom: auto;
	vertical-align: middle;
	content: " ";
	border-bottom: 1px solid var(--mainmenu-color, #ffffff);
	border-right: 1px solid var(--mainmenu-color, #ffffff);
	transform-origin: 66% 66%;
	transform: rotate(45deg);
	transition: all 0.15s ease-in-out;
	height: 6px;
	width: 6px;
}
@media (max-width: 992px) {
	.gmr-mainmenu ul > li.menu-item-has-children > a span:after,
	.gmr-mainmenu ul > li.page_item_has_children > a span:after {
		display: none;
	}
}
.gmr-mainmenu ul > li.menu-item-has-children:hover > a span:after,
.gmr-mainmenu ul > li.page_item_has_children:hover > a span:after {
	transform: rotate(225deg);
	border-color: var(--mainmenu-hovercolor, #f1c40f);
}

/* Dekorasi menu ala Wpmedia - persis CSS asli tema wpmedia */
/* Warna teks */
.gmr-mainmenu ul.menu > li.menu-red > a { color: red; }
.gmr-mainmenu ul.menu > li.menu-green > a { color: #27ae60; }
.gmr-mainmenu ul.menu > li.menu-blue > a { color: #2980b9; }
.gmr-mainmenu ul.menu > li.menu-orange > a { color: #e56324; }
.gmr-mainmenu ul.menu > li.menu-blue-light > a { color: #90caf9; }
.gmr-mainmenu ul.menu > li.menu-orange-light > a { color: #ffe082; }
.gmr-mainmenu ul.menu > li.menu-red-light > a { color: #ffab91; }
.gmr-mainmenu ul.menu > li.menu-green-light > a { color: #a5d6a7; }

/* Titik warna (::after) di pojok kanan atas selaras teks - persis Wpmedia */
.gmr-mainmenu ul.menu > li.menu-dot > a:after {
	content: "";
	width: 8px;
	height: 8px;
	background-color: red;
	position: absolute;
	top: 10px;
	right: -10px;
	margin-left: 5px;
	border-radius: 50%;
	display: inline-flex;
}

/* Badge teks (::after) di pojok kanan atas - persis Wpmedia */
.gmr-mainmenu ul.menu > li.menu-new > a:after,
.gmr-mainmenu ul.menu > li.menu-hot > a:after,
.gmr-mainmenu ul.menu > li.menu-popular > a:after {
	position: absolute;
	top: 2px;
	right: -15px;
	padding: 0 5px;
	background-color: red;
	color: #fff;
	font-size: 8px;
	line-height: 1.4;
	letter-spacing: -0.02em;
	border-radius: 2px;
	display: inline-flex;
	height: 13px;
	align-items: center;
}
.gmr-mainmenu ul.menu > li.menu-new > a:after { content: "NEW"; background-color: red; }
.gmr-mainmenu ul.menu > li.menu-hot > a:after { content: "HOT"; background-color: red; }
.gmr-mainmenu ul.menu > li.menu-popular > a:after { content: "POPULAR"; background-color: #27ae60; }

/* Variasi warna badge/dot */
.gmr-mainmenu ul.menu > li.menu-dot.blue > a:after,
.gmr-mainmenu ul.menu > li.menu-new.blue > a:after,
.gmr-mainmenu ul.menu > li.menu-hot.blue > a:after,
.gmr-mainmenu ul.menu > li.menu-popular.blue > a:after { background-color: #2980b9; }
.gmr-mainmenu ul.menu > li.menu-dot.orange > a:after,
.gmr-mainmenu ul.menu > li.menu-new.orange > a:after,
.gmr-mainmenu ul.menu > li.menu-hot.orange > a:after,
.gmr-mainmenu ul.menu > li.menu-popular.orange > a:after { background-color: #e56324; }
.gmr-mainmenu ul.menu > li.menu-dot.red > a:after,
.gmr-mainmenu ul.menu > li.menu-new.red > a:after,
.gmr-mainmenu ul.menu > li.menu-hot.red > a:after,
.gmr-mainmenu ul.menu > li.menu-popular.red > a:after { background-color: red; }
.gmr-mainmenu ul.menu > li.menu-dot.green > a:after,
.gmr-mainmenu ul.menu > li.menu-new.green > a:after,
.gmr-mainmenu ul.menu > li.menu-hot.green > a:after,
.gmr-mainmenu ul.menu > li.menu-popular.green > a:after { background-color: #27ae60; }

/* Reposisi di secondary-menu / sub-menu / side-menu - persis Wpmedia */
.gmr-mainmenu ul#secondary-menu li.menu-new > a:after,
.gmr-mainmenu ul#secondary-menu li.menu-hot > a:after,
.gmr-mainmenu ul#secondary-menu li.menu-popular > a:after,
.gmr-mainmenu ul.sub-menu li.menu-new > a:after,
.gmr-mainmenu ul.sub-menu li.menu-hot > a:after,
.gmr-mainmenu ul.sub-menu li.menu-popular > a:after,
#side-menu li.menu-new > a:after,
#side-menu li.menu-hot > a:after,
#side-menu li.menu-popular > a:after { position: relative; top: -10px; right: -10px; }
.gmr-mainmenu ul#secondary-menu li.menu-dot > a:after,
.gmr-mainmenu ul.sub-menu li.menu-dot > a:after,
#side-menu li.menu-dot > a:after { position: relative; top: 0; right: 0; }

/*--------------------------------------------------------------
3b. Warna solid teks per kategori menu (bar tetap merah-ungu)
   Tambahkan CSS class di item menu sesuai kategori, mis:
   cg-red, cg-blue, cg-green, cg-orange, cg-purple, cg-teal,
   cg-pink, cg-cyan, cg-dark, cg-yellow
--------------------------------------------------------------*/
.gmr-mainmenu ul#primary-menu > li.cg-red > a,
.gmr-mainmenu ul#secondary-menu > li.cg-red > a { color: #ff8a80; }
.gmr-mainmenu ul#primary-menu > li.cg-blue > a,
.gmr-mainmenu ul#secondary-menu > li.cg-blue > a { color: #90caf9; }
.gmr-mainmenu ul#primary-menu > li.cg-green > a,
.gmr-mainmenu ul#secondary-menu > li.cg-green > a { color: #a5d6a7; }
.gmr-mainmenu ul#primary-menu > li.cg-orange > a,
.gmr-mainmenu ul#secondary-menu > li.cg-orange > a { color: #ffcc80; }
.gmr-mainmenu ul#primary-menu > li.cg-purple > a,
.gmr-mainmenu ul#secondary-menu > li.cg-purple > a { color: #ce93d8; }
.gmr-mainmenu ul#primary-menu > li.cg-teal > a,
.gmr-mainmenu ul#secondary-menu > li.cg-teal > a { color: #80cbc4; }
.gmr-mainmenu ul#primary-menu > li.cg-pink > a,
.gmr-mainmenu ul#secondary-menu > li.cg-pink > a { color: #f48fb1; }
.gmr-mainmenu ul#primary-menu > li.cg-cyan > a,
.gmr-mainmenu ul#secondary-menu > li.cg-cyan > a { color: #80deea; }
.gmr-mainmenu ul#primary-menu > li.cg-dark > a,
.gmr-mainmenu ul#secondary-menu > li.cg-dark > a { color: #cfd8dc; }
.gmr-mainmenu ul#primary-menu > li.cg-yellow > a,
.gmr-mainmenu ul#secondary-menu > li.cg-yellow > a { color: #fff59d; }
.gmr-mainmenu ul#primary-menu > li[class*="cg-"] > a:hover,
.gmr-mainmenu ul#secondary-menu > li[class*="cg-"] > a:hover {
	color: var(--mainmenu-hovercolor, #f1c40f);
}

/*--------------------------------------------------------------
4. Breaking News / Marquee ala Wpmedia
--------------------------------------------------------------*/
.gmr-topnotification {
	margin-top: 20px;
	width: 100%;
	height: 54px;
	color: #ffffff;
	line-height: 1.4;
	font-size: 14px;
	font-weight: 400;
	background-color: var(--scheme-color, #d9091b);
	overflow: hidden;
	border-radius: 2px;
	padding: 0;
}
.gmr-topnotification a {
	color: #ffffff !important;
	font-size: 12px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gmr-topnotification .text-marquee {
	background-color: #000000;
	z-index: 1;
	padding: 10px;
	height: 54px;
	border-radius: 2px 0 0 2px;
	color: #ffffff;
	white-space: nowrap;
	position: relative;
}
.gmr-topnotification .text-marquee:before {
	width: 10px;
	height: 54px;
	transform: skew(-18deg);
	content: "";
	position: absolute;
	right: -18px;
	bottom: 0;
	background: #222222;
}
.gmr-topnotification .text-marquee:after {
	width: 0;
	height: 0;
	border-top: 54px solid #000000;
	border-right: 18px solid transparent;
	content: "";
	position: absolute;
	right: -18px;
	bottom: 0;
}
.gmr-topnotification .wrap-marquee {
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
	white-space: nowrap;
	margin: 0 auto;
}
.gmr-topnotification div.marquee {
	display: flex;
	align-items: center;
	padding: 0 10px;
	padding-left: 100%;
	height: 54px;
	animation: marquee 30s linear infinite forwards;
	-moz-animation: marquee 30s linear infinite forwards;
	-webkit-animation: marquee 30s linear infinite forwards;
}
.gmr-topnotification .marquee > * {
	margin-right: 20px;
}
.gmr-topnotification .marquee > *:last-child {
	margin-right: 0;
}
.gmr-topnotification .marquee:hover {
	animation-play-state: paused;
}
@keyframes marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}
@media (max-width: 600px) {
	.gmr-topnotification .marquee {
		animation: marquee 15s linear infinite forwards;
	}
}
.marquee-content {
	display: flex;
	align-items: center;
	max-width: 300px;
	min-width: 300px;
	width: 100%;
	white-space: initial;
}
.marquee-content .post-thumbnail {
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	max-width: 36px;
	max-height: 36px;
	border-radius: 2px;
	margin-right: 10px;
}
.marquee-content .post-thumbnail img {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 2px;
}
.gmr-topnotification a.gmr-recent-marquee {
	margin-right: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gmr-topnotification a.gmr-recent-marquee:hover {
	color: var(--mainmenu-hovercolor, #f1c40f) !important;
}

/*--------------------------------------------------------------
5. Sidebar sticky ala Wpmedia
--------------------------------------------------------------*/
/* top: 104px = tinggi header sticky lokal (gmr-topnavwrap) agar sidebar
   menempel tepat di bawah header, persis perilaku demo (100px). */
@media (min-width: 992px) {
	.pos-sticky {
		top: 104px;
	}
	.admin-bar .pos-sticky {
		top: 136px;
	}
}

/*--------------------------------------------------------------
6. Gradient Widget ala Wpmedia
   Aktifkan lewat Appearance > Customize > "Gradient Wpmedia"
--------------------------------------------------------------*/
/* Gradient module (full-width module widget) */
.wpb-child-grad-module .module-widget .widget {
	padding: 16px !important;
	background: linear-gradient(var(--wpb-grad-deg, 137deg), var(--wpb-grad-color1, #d9091b) 0%, var(--wpb-grad-color2, #3920c9) 100%);
	--widget-title: #ffffff;
	--widget-desc: #d8d8d8;
	--widget-link: #fcfcfc;
	--widget-linkhover: #c6c6c6;
}
.wpb-child-grad-module .module-widget .widget .box-widget {
	background: transparent;
	padding: 0;
}
.wpb-child-grad-module .module-widget .widget .widget-title,
.wpb-child-grad-module .module-widget .widget .module-title {
	color: var(--widget-title, #ffffff);
}
.wpb-child-grad-module .module-widget .widget .widget-subtitle {
	color: var(--widget-desc, #d8d8d8);
}
.wpb-child-grad-module .module-widget .widget a {
	color: var(--widget-link, #fcfcfc);
}
.wpb-child-grad-module .module-widget .widget a:hover {
	color: var(--widget-linkhover, #c6c6c6);
}
.wpb-child-grad-module .module-widget .widget .module-linktitle a {
	background-color: #ffffff;
	color: #000000;
}
.wpb-child-grad-module .module-widget .widget .module-linktitle a svg path {
	fill: #000000;
}

/* Gradient sidebar widget */
.wpb-child-grad-sidebar #secondary .widget {
	padding: 16px;
	background: linear-gradient(var(--wpb-sbgrad-deg, 1deg), var(--wpb-sbgrad-color1, #efefef) 0%, var(--wpb-sbgrad-color2, #dddddd) 100%);
}
.wpb-child-grad-sidebar #secondary .widget .box-widget {
	background: transparent;
}
.wpb-child-grad-sidebar #secondary .widget ul li a {
	color: var(--footer-linkcolor, #212121);
}

/*--------------------------------------------------------------
7. Polish headline & slider ala Wpmedia
--------------------------------------------------------------*/
.gmr-big-headline .post-thumbnail,
.list-gallery .post-thumbnail,
.list-slider .post-thumbnail,
.wpberita-moduleslide .post-thumbnail {
	border-radius: 6px;
	overflow: hidden;
}
.gmr-bigheadline .post-thumbnail img,
.list-gallery .post-thumbnail img,
.wpberita-moduleslide .post-thumbnail img {
	transition: transform 0.3s ease;
}
.gmr-bigheadline .post-thumbnail:hover img,
.list-gallery .post-thumbnail:hover img,
.wpberita-moduleslide .post-thumbnail:hover img {
	transform: scale(1.03);
}
.wpberita-moduleslide .list-slider {
	border-radius: 6px;
	overflow: hidden;
}

/*--------------------------------------------------------------
7b. Cosmetik module-widget ala Wpmedia
   (Wpmedia: kotak polos tanpa latar abu; parent memberi box-widget #efefef)
--------------------------------------------------------------*/
.module-widget {
	margin-bottom: 20px;
}
.module-widget .box-widget {
	background-color: transparent;
	padding: 0;
}
.module-widget h3.widget-title,
.module-widget h3.module-title {
	font-size: 18px;
	font-weight: var(--font-bold, bold);
	padding-top: 0;
}
.module-widget h3.widget-title:before,
.module-widget h3.module-title:before {
	content: "";
	margin-right: 10px;
	width: 10px;
	height: 15px;
	border-top: 0;
	border-radius: 2px;
	background-color: var(--secondscheme-color, #3920c9);
	position: static;
	display: inline-block;
	vertical-align: middle;
}
.module-widget .gmr-titlewidget {
	padding-top: 0;
	margin-bottom: 10px;
}
.module-widget .gmr-titlewidget:before {
	border-top: 0;
}
.module-widget .module-linktitle a {
	background-color: var(--secondscheme-color, #3920c9);
	color: #ffffff;
	border-radius: 2px;
}
.module-widget .module-linktitle a svg path {
	fill: #ffffff;
}
.gmr-fixheight .list-gallery img,
.wpberita-moduleslide .post-thumbnail img,
.wpberita-moduleslide .list-slider img {
	object-fit: cover;
	height: 220px !important;
}

/*--------------------------------------------------------------
8. Footer ala Wpmedia (wpmedia-address / taglist / widget-footer)
--------------------------------------------------------------*/
.widget-footer {
	margin-top: 20px;
}
.site-footer {
	border-top: 1px solid var(--border-color, #eeeeee);
	padding: 20px 0 40px;
	/* Demo memakai footer putih (--footer-bgcolor: #ffffff) */
	background-color: #ffffff;
	color: var(--footer-color, #666666);
}
.site-footer h3.widget-title {
	padding-top: 0;
	border-top: 0;
	font-size: 18px;
	color: var(--widget-title, #000000);
}
/* Judul widget footer persis demo: ikon kotak kecil 10x15 di depan teks
   (ganti garis bawah 50px bawaan parent; posisi statis supaya kotak
   berada di depan teks, bukan menimpa) */
.site-footer h3.widget-title {
	display: flex;
	align-items: center;
}
.site-footer h3.widget-title:before {
	content: "";
	position: static;
	flex: 0 0 auto;
	margin-right: 10px;
	width: 10px;
	height: 15px;
	background-color: var(--secondscheme-color, #3920c9);
	border-radius: 2px;
	border-top: 0;
}
/* Warna link footer persis demo: #212121, hover merah #d9091b */
.site-footer a {
	color: var(--footer-linkcolor, #212121);
}
.site-footer a:hover,
.site-footer a:focus,
.site-footer a:active {
	color: var(--footer-hover-linkcolor, #d9091b);
}
/* Judul widget (sidebar & footer) ala demo: kotak 10x15 di depan teks,
   warna hitam (--widget-title), ganti garis 50px bawaan parent yang
   posisinya absolute/menimpa. Posisi static supaya tidak overlap.
   Spesifisitas disamakan dengan parent (h3.widget-title) agar menang. */
h3.widget-title,
h2.widget-title {
	display: flex;
	align-items: center;
	color: var(--widget-title, #000000);
}
h3.widget-title:before,
h2.widget-title:before {
	content: "";
	position: static;
	flex: 0 0 auto;
	margin-right: 10px;
	width: 10px;
	height: 15px;
	background-color: var(--secondscheme-color, #3920c9);
	border-radius: 2px;
	border-top: 0;
}
/* Judul berbentuk gambar (logo) tidak memakai kotak — persis demo
   (.widget-titleimg .widget-title:before { display: none !important }) */
.widget-titleimg .widget-title:before {
	display: none !important;
}
/* Persis demo: .site (wrapper halaman) punya stacking context di atas
   banner fixed (z-index:2) sehingga saat scroll konten menutupi gambar
   banner — banner hanya terlihat di atas fold, tertutup header sticky. */
.site {
	position: relative;
	z-index: 2;
}

/* Banner parallax atas ala demo wpmedia (gmr-verytopbanner): latar hitam,
   hanya tampil di mobile (≤991px), strip merah "Scroll untuk baca
   artikel" + tombol ×, gambar 325x300 efek rellax. */
.gmr-verytopbanner {
	background-color: #000000;
	position: relative;
	display: none;
	padding-bottom: 0;
	overflow: hidden;
}
@media (max-width: 991px) {
	.gmr-verytopbanner {
		display: block;
	}
}
.gmr-verytopbanner .gmr-parallax {
	width: 100%;
	position: relative;
	margin: 0 0;
	display: flex;
	justify-content: center;
	height: 330px;
}
.gmr-verytopbanner .gmr-parallax .rellax {
	position: fixed;
	width: 100%;
	height: 330px;
	margin: auto auto;
	left: 0;
	right: 0;
	top: 30px;
	/* z-index auto persis demo: header (DOM belakangan) menutupi
	   banner saat di-scroll — banner hanya terlihat di atas fold. */
	z-index: auto;
}
.admin-bar .gmr-verytopbanner .gmr-parallax .rellax {
	top: 60px;
}
@media (max-width: 782px) {
	.admin-bar .gmr-verytopbanner .gmr-parallax .rellax {
		top: 74px;
	}
}
.gmr-verytopbanner .gmr-parallax .rellax .in-rellax {
	display: flex;
	justify-content: center;
	width: 100%;
}
.gmr-verytopbanner .idt-xclosewrap {
	top: -30px !important;
	right: 0 !important;
	left: 0 !important;
	z-index: 1;
	height: 30px !important;
	font-size: 18px;
	margin: auto auto;
	display: flex;
	position: absolute;
	align-items: center;
	justify-content: center;
	width: 100%;
	background-color: var(--scheme-color, #d9091b);
}
.gmr-verytopbanner .idt-xclosewrap .idt-xclosetext {
	text-transform: capitalize;
	color: #ffffff;
	font-size: 13px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-right: 10px;
}
.gmr-verytopbanner .idt-xclose-top {
	width: 22px !important;
	min-width: 22px !important;
	height: 22px !important;
	font-size: 22px;
	line-height: 22px;
	background-color: #ffffff;
	color: #000000;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	justify-content: center;
	padding: 0 0 !important;
	display: flex;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
}
.wpmedia-contactinfo {
	display: flex;
	flex-direction: column;
}
.wpmedia-contactinfo > * {
	margin-bottom: 16px;
}
.wpmedia-contactinfo > *:last-child {
	margin-bottom: 0;
}
.wpmedia-contactinfo .wpmedia-address,
.wpmedia-contactinfo .wpmedia-phone,
.wpmedia-contactinfo .wpmedia-mail {
	display: flex;
	align-items: flex-start;
}
.wpmedia-contactinfo .wpmedia-address svg,
.wpmedia-contactinfo .wpmedia-phone svg,
.wpmedia-contactinfo .wpmedia-mail svg {
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	margin-right: 10px;
}
/* Logo sebagai judul widget kontak (persis demo widget-titleimg) */
.site-footer .widget-titleimg .img-titlebg {
	display: block;
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: left;
	background-position-y: center;
	height: 32px;
	width: 200px;
	max-width: 100%;
	margin-bottom: 16px;
}
/* Logo di site-info disembunyikan (demo: logo di atas kolom kontak) */
.site-footer .gmr-footer-logo {
	display: none;
}
/* Kolom footer persis demo: kolom 1 (kontak) 50%, sisanya 16.66% */
@media (min-width: 992px) {
	.widget-footer .footer-column:first-child {
		width: 50%;
	}
	.widget-footer .footer-column:not(:first-child) {
		width: 16.66666667%;
	}
}

/*--------------------------------------------------------------
9. Slider homepage ala Wpmedia (1 slide besar + thumbnail nav)
--------------------------------------------------------------*/
.idtslider-wrap {
	margin-bottom: 20px;
}
.wpberita-moduleslide .list-slider.module-home {
	position: relative;
	overflow: hidden;
	border-radius: 2px 2px 0 0;
}
.wpberita-moduleslide .list-slider.module-home .post-thumbnail {
	margin-bottom: 0;
	border-radius: 2px 2px 0 0 !important;
}
/* Gambar slide besar rasio seragam 680x389 persis demo (splide demo
   semua 680x389) — object-fit cover supaya tiap slide sama tinggi. */
.modulehome-wrap .wpberita-moduleslide .list-slider img {
	width: 100%;
	height: auto !important;
	aspect-ratio: 680 / 389;
	object-fit: cover;
}
/* Overlay judul di bawah gambar - persis Wpmedia */
.idt-infomainslide {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 2;
}
.idt-infomainslide h3 {
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: left;
	font-size: 22px;
	line-height: 1.4;
}
@media (max-width: 600px) {
	.idt-infomainslide h3 {
		font-size: 18px;
	}
}
@media (max-width: 400px) {
	.idt-infomainslide h3 {
		font-size: 16px;
	}
}
.idt-infomainslide h3 a {
	color: #ffffff;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.idt-infomainslide .meta-content {
	color: #dddddd;
	text-align: left;
	display: block;
	width: 100%;
	font-size: 11px;
	line-height: 11px;
	font-style: normal;
	text-transform: capitalize;
}
.idt-infomainslide .cat-links-content {
	font-size: 11px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: left;
	line-height: 11px;
}
.idt-infomainslide .cat-links-content a {
	color: #ffffff !important;
	border-radius: 2px;
	background-color: var(--scheme-color, #d9091b);
	padding: 5px;
	line-height: 1.4;
}
/* Strip thumbnail navigasi - persis Wpmedia (tanpa border luar, margin-top -1px) */
.idtsliderthumb-modhome {
	display: flex;
	flex-wrap: wrap;
	margin-top: -1px;
	border-radius: 0 0 2px 2px;
	overflow: hidden;
	background: var(--rgbacolor, rgba(0, 0, 0, 0.05));
}
.idtsliderthumb-modhome > * {
	width: 25%;
	cursor: pointer;
	position: relative;
	border-top: 4px solid #000000;
	transition: all 0.2s ease-in-out;
	background: var(--rgbacolor, rgba(0, 0, 0, 0.05));
}
.idtsliderthumb-modhome > * img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 350 / 220;
	object-fit: cover;
}
.idtsliderthumb-modhome > *:hover,
.idtsliderthumb-modhome > *.tns-nav-active {
	border-top-color: var(--scheme-color, #d9091b);
	background: rgba(0, 0, 0, 0.1);
}
/* Judul di bawah thumbnail tampil di desktop (persis Wpmedia), disembunyikan < 550px */
.idtsliderthumb-modhome .title-slider {
	font-size: 14px;
	padding: 10px;
	margin-bottom: 0 !important;
	text-align: left;
	line-height: 1.4;
}
.idtsliderthumb-modhome .title-slider a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (max-width: 550px) {
	.idtsliderthumb-modhome .title-slider {
		display: none;
	}
}

/*--------------------------------------------------------------
10. Footer ala Wpmedia: kolom 6/2/2/2 (kontak + kategori + label + halaman)
--------------------------------------------------------------*/
@media (min-width: 992px) {
	.widget-footer .row:has(> .footer-column:nth-child(4)) > .footer-column:first-child {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.widget-footer .row:has(> .footer-column:nth-child(4)) > .footer-column:nth-child(n+2) {
		flex: 0 0 16.66666667%;
		max-width: 16.66666667%;
	}
}

/*--------------------------------------------------------------
11. Main-nav tampil di mobile (persis Wpmedia: satu baris scrollable)
--------------------------------------------------------------*/
@media (max-width: 992px) {
	/* Batalkan display:none parent — main menu bar gradasi tetap tampil di mobile */
	.gmr-mainmenu {
		display: block;
		max-height: 44px;
		overflow: hidden;
	}
	.gmr-mainmenu ul#primary-menu,
	.gmr-mainmenu ul#secondary-menu {
		overflow: auto;
		white-space: nowrap;
		max-width: 100% !important;
		flex-wrap: nowrap;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.gmr-mainmenu ul#primary-menu::-webkit-scrollbar,
	.gmr-mainmenu ul#secondary-menu::-webkit-scrollbar {
		display: none;
	}
	.gmr-mainmenu ul#primary-menu > li,
	.gmr-mainmenu ul#secondary-menu > li {
		height: 44px;
		margin-right: 30px;
	}
	.gmr-mainmenu ul#primary-menu > li > a,
	.gmr-mainmenu ul#secondary-menu > li > a {
		height: 44px;
		font-size: 14px;
	}
	/* Persis demo: item ber-dropdown (mis. "Lainnya") disembunyikan di mobile,
	   menu lengkapnya tetap bisa dibuka lewat tombol hamburger */
	.gmr-mainmenu ul#primary-menu > li.menu-item-has-children,
	.gmr-mainmenu ul#secondary-menu > li.menu-item-has-children,
	.gmr-mainmenu ul#primary-menu .sub-menu,
	.gmr-mainmenu ul#secondary-menu .sub-menu,
	.gmr-mainmenu ul > li.menu-item-has-children > a span:after,
	.gmr-mainmenu ul > li.page_item_has_children > a span:after {
		display: none;
	}
}

/*--------------------------------------------------------------
12. Header "Recent News" ala Wpmedia (aksen ungu, bukan garis merah)
--------------------------------------------------------------*/
.site-main .page-header h3.page-title {
	display: flex;
	align-items: center;
	font-size: 18px;
	color: var(--widget-title, #000000);
	padding-top: 15px;
	margin-bottom: 16px;
}
.site-main .page-header h3.page-title:before {
	content: "";
	position: static;
	margin-right: 10px;
	width: 10px;
	height: 15px;
	background-color: var(--secondscheme-color, #3920c9);
	border-radius: 2px;
	border-top: 0;
	display: inline-block;
	vertical-align: middle;
}

/*--------------------------------------------------------------
13. Modul widget full-width di bawah daftar berita (ala Wpmedia)
--------------------------------------------------------------*/
.col-md-12 > .module-widget:first-child {
	margin-top: 20px;
}

/*--------------------------------------------------------------
14. Badge kategori pada kartu modul widget (ala Wpmedia)
--------------------------------------------------------------*/
/* wpmedia-mp-2 ala demo: TANPA gradien & tanpa padding (latar polos),
   judul logo gambar, badge kategori berwarna per-kategori
   (Otomotif = biru #1c74af persis demo). */
.wpb-child-grad-module #wpberita-mp-2 {
	background: transparent !important;
	padding: 0 !important;
	--secondscheme-color: #1c74af;
	--widget-title: #000000;
	--widget-desc: #666666;
	--widget-link: #000000;
	--widget-linkhover: var(--scheme-color, #d9091b);
}
.wpb-child-grad-module #wpberita-mp-2 .module-title {
	color: #000000;
}
.wpb-child-grad-module #wpberita-mp-2 .module-title:before {
	display: none;
}
.wpb-child-grad-module #wpberita-mp-2 a {
	color: #000000;
}
.wpb-child-grad-module #wpberita-mp-2 a:hover {
	color: var(--scheme-color, #d9091b);
}
/* Judul logo (img-titlebg ala demo wpmedia-mp-2) */
.wpb-child-grad-module #wpberita-mp-2 .img-titlebg {
	display: block;
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: left;
	background-position-y: center;
	height: 32px;
	width: 260px;
	max-width: 100%;
}
/* Badge kategori mp-2: warna per-kategori (diset lewat JS), ukuran persis demo */
.wpb-child-grad-module #wpberita-mp-2 .cat-links-content a {
	color: #ffffff !important;
	border-radius: 2px;
	padding: 5px 5px;
	font-size: 11px;
	line-height: 11px;
}
/* Kartu modul: gambar rasio 350×220 natural (persis demo wpmedia-module,
   bukan dipaksa tinggi tetap) */
.module-widget .wpberita-list-slider .list-slider img {
	object-fit: cover;
	width: 100%;
	height: auto;
	aspect-ratio: 350 / 220;
}
@media (max-width: 600px) {
	.module-widget .wpberita-list-slider .list-slider img {
		aspect-ratio: 350 / 220;
	}
}
/* Widget popular ala wpmedia-popular-1: box gradien abu terang + padding.
   Box dikendalikan OPSI "Box Widget" widget itu sendiri (Appearance >
   Widgets > Popular Post > Box Widget): saat enable, parent merender
   div.box-widget dan di bawah ini distyling persis demo. */
#wpberita-popular-1 .box-widget {
	padding: 16px;
	background: linear-gradient(var(--wpb-sbgrad-deg, 1deg), var(--wpb-sbgrad-color1, #efefef) 0%, var(--wpb-sbgrad-color2, #dddddd) 100%);
	overflow: visible;
}
#wpberita-popular-1 .widget-title {
	color: #000000;
}
.module-widget .list-slider {
	position: relative;
}
.module-widget .list-slider .post-thumbnail {
	position: relative;
}
.module-widget .list-slider .cat-links-content {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 2;
}
.module-widget .list-slider .cat-links-content a {
	background-color: var(--scheme-color, #d9091b);
	color: #ffffff !important;
	border-radius: 2px;
	padding: 5px;
	font-size: 11px;
	line-height: 1.4;
}
/* Kartu modul: judul seragam di bawah gambar (persis demo) */
.module-widget .list-slider .list-gallery-title a {
	font-size: 14px;
	line-height: 1.4;
}

/*--------------------------------------------------------------
16. Sidebar (widget-area col-md-4 pos-sticky) ala Wpmedia
--------------------------------------------------------------*/
/* Recent Posts (wpberita-rp-1) ala wpmedia-recent demo:
   item pertama big-thumb berisi inner-thumbnail (judul + tanggal
   overlay di atas gambar, dibuat JS), item lain thumb 80x80.
   CSS persis wpmedia (wpmedia-rp-widget). */
.widget ul.wpberita-rp-widget li {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}
.widget ul.wpberita-rp-widget li:last-child {
	margin-bottom: 0;
}
/* Thumb kecil 80x80 persis demo */
.widget ul.wpberita-rp-widget li .small-thumb.post-thumbnail,
.widget ul.wpberita-rp-widget li .post-thumbnail.pull-left {
	width: 80px;
	height: 80px;
	margin-right: 16px;
	overflow: hidden;
	display: inline-flex;
	flex: 0 0 auto;
}
.widget ul.wpberita-rp-widget li .small-thumb.post-thumbnail img,
.widget ul.wpberita-rp-widget li .post-thumbnail.pull-left img {
	width: 80px;
	height: 80px;
	object-fit: cover;
}
/* Item pertama big-thumb: markup inner-thumbnail persis demo */
.widget ul.wpberita-rp-widget li .big-thumb {
	width: calc(100% + 32px);
	position: relative;
}
.widget ul.wpberita-rp-widget li .big-thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 350 / 220;
	object-fit: cover;
	display: block;
}
.widget ul.wpberita-rp-widget li .big-thumb .inner-thumbnail {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 16px;
	line-height: 30px;
	color: #ffffff;
	margin-bottom: 0;
	z-index: 2;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0));
	display: flex;
	align-items: center;
}
.widget ul.wpberita-rp-widget li .big-thumb .recent-content {
	flex: 1 1 auto;
}
.widget ul.wpberita-rp-widget li .big-thumb .recent-title {
	color: #ffffff;
	font-size: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.widget ul.wpberita-rp-widget li .big-thumb .meta-content {
	color: #dddddd;
}
/* Popular Posts (wpberita-popular-1): rp-number kotak merah 60x60 persis demo */
.rp-number {
	color: #ffffff;
	font-size: 20px;
	line-height: 60px;
	width: 60px;
	height: 60px;
	margin-right: 14px;
	text-align: center;
	background-color: var(--scheme-color, #d9091b);
	font-style: normal;
	padding: 0;
}
.widget ul.wpberita-rp-widget li .recent-content {
	flex: 1 1 auto;
}

/*--------------------------------------------------------------
17. Widget Popular Posts (wpberita-popular-1) ala wpmedia-popular demo
--------------------------------------------------------------*/
/* Item list: flex + jarak 16px, judul di atas meta, meta flex sebaris */
#wpberita-popular-1 ul.wpberita-list-widget li {
	display: flex;
	align-items: center;
	margin: 16px 0;
}
#wpberita-popular-1 ul.wpberita-list-widget li:last-child {
	margin-bottom: 0;
}
#wpberita-popular-1 ul.wpberita-list-widget .recent-content {
	flex: 1 1 auto;
}
#wpberita-popular-1 ul.wpberita-list-widget .meta-content {
	display: flex;
	align-items: center;
}
#wpberita-popular-1 ul.wpberita-list-widget .recent-title {
	font-size: 14px;
	display: inline-block;
	margin-bottom: 5px;
}
/* Item pertama big-thumb ala demo (dibuat oleh JS di main.js).
   Bleed margin -16px SELALU aktif agar nomor item 1 sejajar dengan
   nomor item 2+ baik saat box enable (padding 16px) maupun disable. */
#wpberita-popular-1 .big-thumb {
	position: relative;
	display: block;
	margin: 0 -16px;
	border-radius: 0 !important;
}
/* Counter popular: spasi persis demo (ikon mata + teks) */
#wpberita-popular-1 .count-text {
	margin-left: 4px;
	display: inline-flex;
	align-items: center;
}
#wpberita-popular-1 .count-text svg {
	width: 13px;
	height: 13px;
	margin-right: 5px;
}
#wpberita-popular-1 .big-thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 350 / 220;
	object-fit: cover;
	display: block;
}
#wpberita-popular-1 .big-thumb .inner-thumbnail {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 16px;
	line-height: 24px;
	color: #ffffff;
	z-index: 2;
	display: flex;
	align-items: center;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 100%);
}
#wpberita-popular-1 .big-thumb .rp-number {
	margin-right: 14px;
	flex: 0 0 auto;
}
#wpberita-popular-1 .big-thumb .recent-content {
	flex: 1 1 auto;
}
#wpberita-popular-1 .big-thumb .recent-title {
	color: #ffffff;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#wpberita-popular-1 .big-thumb .meta-content {
	color: #dddddd;
}

/*--------------------------------------------------------------
18. Tipografi sidebar widget ala demo (tulisan rapi)
--------------------------------------------------------------*/
/* Buang margin lama parent (has-thumbnail 115px / numberstyle 45px)
   yang merusak jarak di layout flex baru. */
.widget ul.wpberita-rp-widget li .recent-content.has-thumbnail,
#wpberita-popular-1 ul.wpberita-list-widget li .recent-content.numberstyle {
	margin-left: 0;
}
/* Konten memakai flex-basis 0 (persis demo .recent-content {flex:1})
   agar kotak angka / thumb kecil TIDAK terhimpit flex-shrink. */
.widget ul.wpberita-rp-widget li .recent-content,
#wpberita-popular-1 ul.wpberita-list-widget li .recent-content {
	flex: 1;
}
.widget ul.wpberita-rp-widget li .rp-number,
#wpberita-popular-1 ul.wpberita-list-widget li .rp-number,
#wpberita-popular-1 ul.wpberita-list-widget li .post-thumbnail.pull-left,
.widget ul.wpberita-rp-widget li .post-thumbnail.pull-left,
.widget ul.wpberita-rp-widget li .small-thumb.post-thumbnail {
	flex: 0 0 auto;
}
/* Tanggal: non-italic, 11px, line-height 11px persis demo */
.widget ul.wpberita-rp-widget li .meta-content,
#wpberita-popular-1 ul.wpberita-list-widget .meta-content {
	font-size: 11px;
	line-height: 11px;
	font-style: normal;
}
.widget ul.wpberita-rp-widget li .meta-content > *,
#wpberita-popular-1 ul.wpberita-list-widget .meta-content > * {
	margin-right: 8px;
}
.widget ul.wpberita-rp-widget li .meta-content > *:last-child,
#wpberita-popular-1 ul.wpberita-list-widget .meta-content > *:last-child {
	margin-right: 0;
}
/* Judul: line-height 1.4 + jarak bawah 5px persis demo */
.widget ul.wpberita-rp-widget li .recent-title,
#wpberita-popular-1 ul.wpberita-list-widget .recent-title {
	line-height: 1.4;
	margin-bottom: 5px;
}

/*--------------------------------------------------------------
19. Kartu berita (box-item) ala demo Wpmedia
--------------------------------------------------------------*/
/* Proporsi gambar persis demo (25% / mobile 100x100) */
.box-item {
	align-items: center;
}
.box-item .post-thumbnail {
	width: 25%;
	margin: 0 16px 0 0;
	overflow: hidden;
}
/* Desktop: rasio 180x130 persis demo (crop via object-fit) */
.box-item .post-thumbnail img {
	width: 100%;
	height: auto;
	aspect-ratio: 180 / 130;
	object-fit: cover;
	display: block;
}
@media (max-width: 700px) {
	.box-item .post-thumbnail {
		width: 100px;
	}
	/* Mobile: 100x100 kotak persis demo */
	.box-item .post-thumbnail img {
		width: 100%;
		height: 100px;
		aspect-ratio: auto;
		object-fit: cover;
		margin: 0 !important;
		padding: 0 !important;
	}
}
.box-content {
	width: 75%;
}
/* Judul kartu persis demo (18px desktop / 14px mobile) */
.box-item h2.entry-title {
	font-size: 18px;
	margin-bottom: 10px;
}
@media (max-width: 600px) {
	.box-item h2.entry-title {
		font-size: 14px;
	}
}
/* Meta: kategori + tanggal satu baris flex persis demo */
.box-item .gmr-meta-topic {
	line-height: 11px;
}
.box-item .gmr-meta-topic .meta-content {
	display: flex;
	align-items: center;
}
.box-item .gmr-meta-topic .meta-content > * {
	margin-right: 8px;
}
.box-item .gmr-meta-topic .meta-content > *:last-child {
	margin-right: 0;
}
/* Kategori: badge merah 11px persis demo */
.box-item .cat-links-content a {
	color: #ffffff !important;
	border-radius: 2px;
	background-color: var(--scheme-color, #d9091b);
	padding: 5px 5px;
	font-size: 11px;
	line-height: 11px;
}

/*--------------------------------------------------------------
20. Modul wpberita-mp-3 ala wpmedia-mp-3 demo (Teknologi)
--------------------------------------------------------------*/
/* Gradien maroon→hijau + aksen kuning persis demo */
.wpb-child-grad-module .module-widget #wpberita-mp-3 {
	background: linear-gradient(154deg, #962a22 0%, #006047 100%);
	--widget-title: #ffffff;
	--widget-desc: #cecece;
	--widget-link: #ffffff;
	--widget-linkhover: #eeee22;
	/* Ikon judul modul kuning persis demo (--secondscheme-color) */
	--secondscheme-color: #eeee22;
}
/* Ikon judul modul mp-1 hijau persis demo */
.wpb-child-grad-module .module-widget #wpberita-mp-1 {
	--secondscheme-color: #81d742;
}
#wpberita-mp-3 .module-title,
#wpberita-mp-3 .widget-title {
	color: #ffffff;
}
/* Grid statis 4 kolom persis demo (gallery-col-4, gap 16, img 220px).
   JS mengubah wrapper jadi .wpmedia-list-gallery.gallery-col-4 —
   selektor lama (.wpberita-list-slider) tetap disediakan sbg fallback
   kalau JS belum berjalan. */
#wpberita-mp-3 .wpmedia-list-gallery,
#wpberita-mp-3 .wpberita-list-slider {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 16px;
}
/* Kartu: list-gallery (post-JS) atau gmr-slider-content (pre-JS) */
#wpberita-mp-3 .list-gallery,
#wpberita-mp-3 .wpberita-list-slider .gmr-slider-content {
	position: relative;
	overflow: hidden;
	display: block;
	margin: 0;
}
/* Parent memberi .list-gallery { width: 50%; padding: 0 12px } (layout
   lama) — netralkan agar kartu memakai sel grid penuh persis demo. */
#wpberita-mp-3 .list-gallery {
	width: 100%;
	flex: none;
	padding-left: 0;
	padding-right: 0;
	min-height: 0;
}
/* Thumbnail + badge dalam module-smallthumb (post-JS) */
#wpberita-mp-3 .module-smallthumb,
#wpberita-mp-3 .wpberita-list-slider .list-slider .post-thumbnail {
	position: relative;
}
#wpberita-mp-3 .module-smallthumb {
	margin-bottom: 10px;
}
/* Anchor thumbnail full-width persis demo (base .post-thumbnail flex) */
#wpberita-mp-3 .module-smallthumb .post-thumbnail {
	display: block;
	overflow: hidden;
}
#wpberita-mp-3 .wpmedia-list-gallery img,
#wpberita-mp-3 .wpberita-list-slider .list-slider img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}
/* Badge kategori pojok kiri-bawah persis demo */
#wpberita-mp-3 .module-smallthumb .cat-links-content,
#wpberita-mp-3 .wpberita-list-slider .list-slider .cat-links-content {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 2;
}
#wpberita-mp-3 .module-smallthumb .cat-links-content a,
#wpberita-mp-3 .wpberita-list-slider .list-slider .cat-links-content a {
	background-color: var(--scheme-color, #d9091b);
	color: #ffffff !important;
	border-radius: 2px;
	padding: 5px;
	font-size: 11px;
	line-height: 1.4;
}
/* Judul kartu clamp-3 persis demo (.wpmedia-module .recent-title) */
#wpberita-mp-3 .list-gallery-title a {
	font-size: 14px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 600px) {
	#wpberita-mp-3 .wpmedia-list-gallery,
	#wpberita-mp-3 .wpberita-list-slider {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*--------------------------------------------------------------
21. Halaman Single Post ala wpmedia demo
---------------------------------------------------------------*/
/* Judul: hitam 30px desktop / 22px mobile, margin bawah 10px —
   persis demo (parent memakai merah --scheme-color 28px/24px) */
h1.entry-title {
	font-size: 30px;
	color: var(--main-color, #000000);
	margin-bottom: 10px;
}
@media (max-width: 992px) {
	h1.entry-title {
		font-size: 22px;
	}
}

/* Breadcrumb 13px persis demo */
.breadcrumbs {
	font-size: 13px;
	margin-bottom: 10px;
}

/* Kategori di header single: badge pill persis demo
   (merah --scheme-color, teks putih 11px, radius 2px) */
.entry-header-single .cat-links-content {
	font-size: 11px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	line-height: 11px;
}
.entry-header-single .cat-links-content > * {
	margin-right: 8px;
}
.entry-header-single .cat-links-content > *:last-child {
	margin-right: 0;
}
.entry-header-single .cat-links-content a {
	color: #ffffff !important;
	border-radius: 2px;
	background-color: var(--scheme-color, #d9091b);
	padding: 5px 5px;
	margin-bottom: 8px;
}
/* Netralkan wrapper lokal (gmr-meta-topic + strong + &nbsp;) */
.entry-header-single .gmr-meta-topic {
	display: block;
	margin: 0 0 8px;
}
.entry-header-single .gmr-meta-topic strong {
	display: block;
	font-weight: normal;
}

/* Meta row persis demo: avatar bulat 36px, kolom author/date,
   aksi share di kanan */
.entry-header-single .list-table {
	display: flex;
	align-items: center;
}
.entry-header-single .list-table .table-row {
	display: flex;
	align-items: center;
	width: 100%;
}
.entry-header-single .gmr-gravatar-metasingle {
	width: 46px;
	height: 36px;
}
.entry-header-single .gmr-gravatar-metasingle img {
	display: flex;
	height: 36px;
	width: 36px;
}
@media (max-width: 400px) {
	.entry-header-single .gmr-gravatar-metasingle {
		display: none;
	}
}
.entry-header-single .gmr-content-metasingle {
	display: flex;
	flex-direction: column;
}
.entry-header-single .gmr-content-metasingle .meta-content {
	display: flex;
	align-items: center;
}
.entry-header-single .gmr-content-share {
	margin-left: auto;
}
/* Meta (author/date) persis demo: 11px normal (parent italic 12px) */
.entry-header-single .meta-content {
	font-size: 11px;
	font-style: normal;
	line-height: 11px;
}

/* Heading related persis demo: kotak biru 10x15 + teks hitam 18px
   (parent memakai merah --scheme-color + garis atas) */
h3.related-text,
.related-text-onlytitle {
	color: var(--widget-title, #000000);
	border-top: 0;
	position: static;
	display: flex;
	align-items: center;
	font-size: 18px;
	padding-top: 0;
	margin-bottom: 16px;
}
h3.related-text:before,
.related-text-onlytitle:before {
	content: "";
	margin-right: 10px;
	width: 10px;
	height: 15px;
	background-color: var(--secondscheme-color, #3920c9);
	border-radius: 2px;
	border-top: 0;
	position: static;
	display: inline-block;
	top: auto;
}

/* Badge kategori pada kartu related persis demo (kiri-bawah gambar) */
.gmr-related-post .related-gallery .post-thumbnail .cat-links-content {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 2;
}
.gmr-related-post .related-gallery .post-thumbnail .cat-links-content a {
	background-color: var(--scheme-color, #d9091b);
	color: #ffffff !important;
	border-radius: 2px;
	padding: 5px;
	font-size: 11px;
	line-height: 1.4;
}

/* Persis demo: ticker Breaking News tidak tampil di halaman single
   (di demo ticker hanya di home & arsip) */
body.single .gmr-topnotification {
	display: none;
}

/* Iklan dalam konten single ala demo (gmr-banner-insidecontent gmr-parallax):
   kontainer 630px di-clip, banner 300x600 mengambang fixed di tengah
   (parallax saat konten di-scroll). */
.gmr-banner-insidecontent.gmr-parallax {
	width: 100%;
	position: relative;
	margin: 0 0 20px;
	display: flex;
	justify-content: center;
	height: 630px;
	min-height: 630px;
	clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%) !important;
}
.gmr-banner-insidecontent.gmr-parallax .rellax {
	top: 50%;
	transform: translateY(-50%);
	position: fixed;
	z-index: 2;
	margin: auto;
	text-align: center;
}

/* Persis demo: sidebar di halaman single & arsip hanya banner + popular
   (widget "Berita Terbaru" + banner pertama disembunyikan; di demo
   widget-widget itu hanya tampil di home) */
body.single #wpberita-rp-1,
body.single #custom_html-1,
body.archive #wpberita-rp-1,
body.archive #custom_html-1 {
	display: none;
}

/* Entry footer single ala demo Wpmedia: label "Tags:" + chip tag.
   (markup dihasilkan wpberita_entry_footer() override di functions.php) */
.entry-footer-single .tags-links {
	margin-right: 6px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.entry-footer-single .tags-links > * {
	margin-right: 5px;
}
.entry-footer-single .tags-links > *:last-child {
	margin-right: 0;
}
.entry-footer-single .tags-links .idt-tagtitle {
	background-color: var(--secondscheme-color);
	display: block;
	font-size: 13px;
	line-height: 13px;
	padding: 6px 8px;
	border-radius: 2px;
	text-decoration: none !important;
	color: #ffffff;
}
.entry-footer-single .tags-links a {
	background-color: var(--rgbacolor, rgba(0, 0, 0, 0.05));
	display: block;
	font-size: 13px;
	line-height: 13px;
	padding: 6px 8px;
	border-radius: 2px;
	text-decoration: none !important;
	border-left: 3px solid var(--secondscheme-color);
	margin: 0 5px 0 0;
}
.entry-footer-single .tags-links a:hover {
	background-color: var(--scheme-color);
	color: #ffffff;
}
.entry-footer-single .tags-links a:before {
	content: "#";
	display: inline-flex;
	margin-right: 4px;
}
/* Div kosong Writer/Editor/Source tidak ikut dirender (demo tidak menampilkan) */
.entry-footer-single .gmr-cf-metacontent:empty {
	display: none;
}

/* Tombol next post ala demo Wpmedia (gmr-nextposts-button) */
.gmr-nextposts-button {
	margin-top: 20px;
}
.gmr-nextposts-button .post-thumbnail {
	width: 60px;
	min-width: 60px;
	max-width: 60px;
	height: 60px;
	min-height: 60px;
	max-height: 60px;
	margin: 0;
	padding: 0 !important;
	overflow: hidden;
	flex: 0 0 60px;
}
.gmr-nextposts-button .post-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gmr-nextposts-button .nextposts-content-link {
	display: flex;
	align-items: center;
	background-color: var(--scheme-color);
	color: #ffffff;
	border-radius: 2px;
	overflow: hidden;
}
.gmr-nextposts-button .nextposts-content-link > * {
	margin-right: 10px;
}
.gmr-nextposts-button .nextposts-content-link > *:last-child {
	margin-right: 0;
}
.gmr-nextposts-button .nextposts-content {
	flex: 1;
	min-width: 0;
}
.gmr-nextposts-button .nextposts-content-link .recent-title {
	margin-bottom: 0 !important;
	color: #ffffff;
}
.gmr-nextposts-button .nextposts-icon {
	margin-left: auto;
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 60px;
	background-color: #000000;
	flex: 0 0 30px;
}

/*--------------------------------------------------------------
21. Related posts (Read Also / Recommendation) ala demo Wpmedia
--------------------------------------------------------------*/
/* Judul section: bar warna 10x15 persis demo (sub-title) */
.gmr-related-post h3.related-text.sub-title {
	font-size: 18px;
	margin-bottom: 16px !important;
	display: flex;
	align-items: center;
	padding-top: 0;
	border-top: 0;
}
.gmr-related-post h3.related-text.sub-title:before {
	content: "";
	margin-right: 10px;
	width: 10px;
	height: 15px;
	background-color: var(--secondscheme-color, #3920c9);
	border-radius: 2px;
	border-top: 0;
	position: static;
}
/* Grid kartu persis demo (3 kolom, gap 16px) */
.gmr-related-post .wpmedia-list-gallery.related-gallery {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 16px;
}
/* Netralkan gaya .list-gallery lama parent (width 50% + padding) */
.gmr-related-post .list-gallery {
	display: block;
	width: 100% !important;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	flex: none;
}
.gmr-related-post .list-gallery .post-thumbnail {
	display: block;
	margin-bottom: 10px;
	overflow: hidden;
}
/* Thumbnail rasio 350:220 persis demo (dipotong rapi) */
.gmr-related-post .list-gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 350 / 220;
	object-fit: cover;
	transition: 0.2s all ease-in-out;
}
/* Badge kategori di atas thumbnail (kiri bawah) */
.gmr-related-post .module-smallthumb {
	position: relative;
}
.gmr-related-post .module-smallthumb .cat-links-content {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 2;
	border-radius: 0;
	font-size: 11px;
	line-height: 11px;
}
.gmr-related-post .cat-links-content a {
	color: #ffffff !important;
	border-radius: 2px;
	background-color: var(--scheme-color, #d9091b);
	padding: 5px;
	font-size: 11px;
	line-height: 11px;
}
/* Judul kartu clamp 3 baris persis demo */
.gmr-related-post .list-gallery-title a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--heading-color, #333333);
}
.gmr-related-post .list-gallery-title a:hover {
	color: var(--scheme-color, #d9091b);
}
@media (max-width: 600px) {
	.gmr-related-post .wpmedia-list-gallery.related-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*--------------------------------------------------------------
22. Comments area ala demo Wpmedia
--------------------------------------------------------------*/
/* Judul "Leave a Reply": teks gelap + bar warna 10x15 persis demo */
h3.comment-reply-title,
h2.comments-title {
	font-size: 18px;
	color: var(--widget-title, #333333);
	margin-bottom: 16px !important;
	display: flex;
	align-items: center;
	padding-top: 0;
}
h3.comment-reply-title:before,
h2.comments-title:before {
	content: "";
	margin-right: 10px;
	width: 10px;
	height: 15px;
	background-color: var(--secondscheme-color, #3920c9);
	border-radius: 2px;
	border-top: 0;
	position: static;
}
/* Input komentar: abu transparan + radius 2 persis demo */
.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area textarea {
	background-color: var(--rgbacolor, rgba(0, 0, 0, 0.05));
	border: 1px solid var(--border-color, #cccccc);
	border-radius: 2px;
	padding: 7px 16px;
}
.comments-area textarea {
	width: 100%;
}
/* Tombol submit: ungu persis demo */
.comments-area input[type="submit"] {
	border-radius: 2px;
	padding: 8px 16px;
	background-color: var(--button-bgcolor, #3920c9);
	color: var(--button-color, #ffffff);
}
/* Checkbox cookie: kotak 16x16 + centang merah persis demo */
.comments-area input[type="checkbox"] {
	display: inline-flex;
	align-items: center;
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	font: inherit;
	width: 16px;
	height: 16px;
	min-width: 16px;
	min-height: 16px;
	max-width: 16px;
	max-height: 16px;
	border: 1px solid var(--border-color, #cccccc);
	border-radius: 2px;
	background-color: var(--rgbacolor, rgba(0, 0, 0, 0.05));
	position: relative;
	cursor: pointer;
}
.comments-area input[type="checkbox"]:before {
	content: "";
	width: 10px;
	height: 10px;
	min-width: 10px;
	min-height: 10px;
	max-width: 10px;
	max-height: 10px;
	border-radius: 2px;
	position: absolute;
	top: 2px;
	left: 2px;
	display: block;
	transform: scale(0);
	transition: 0.12s transform ease-in-out;
	background-color: var(--scheme-color, #d9091b);
}
.comments-area input[type="checkbox"]:checked:before {
	transform: scale(1);
}
/* Spasi antar field & teks note persis demo */
.comments-area .comment-form p {
	margin: 0 0 15px;
}
.comments-area .comment-form p.comment-notes {
	margin: 0 0 5px;
}
.comments-area .comment-form p.form-submit {
	margin-bottom: 0 !important;
}
/* Daftar komentar ala demo */
.comments-area ol.comment-list li .comment-meta:after {
	border-bottom: 1px dashed var(--border-color, #cccccc);
	bottom: -10px;
}
.comments-area ol.comment-list li div.vcard img.avatar {
	width: 32px;
	height: 32px;
}
.comments-area ol.comment-list li div.comment-author {
	font-size: 11px;
	display: flex;
	align-items: center;
	text-transform: capitalize;
}
.comments-area ol.comment-list li div.comment-metadata {
	font-size: 11px;
	line-height: 11px;
	margin-top: 5px;
}
.comments-area ol.comment-list li div.reply a {
	background-color: var(--scheme-color, #d9091b);
}


/*--------------------------------------------------------------
23. "Rekomendasi untuk Anda" ala demo Wpmedia "Read Also"
    (kartu box-item: thumbnail kiri + judul + kategori/tanggal)
--------------------------------------------------------------*/
.gmr-related-post-third article.post {
	margin-bottom: 20px;
}
.gmr-related-post-third article.post:last-child {
	margin-bottom: 0;
}
.gmr-related-post-third .box-item {
	display: flex;
	align-items: center;
}
.gmr-related-post-third .box-item .post-thumbnail {
	width: 100px;
	min-width: 100px;
	flex: 0 0 100px;
	margin: 0 16px 0 0;
}
.gmr-related-post-third .box-item .post-thumbnail img {
	width: 100%;
	height: 100px;
	aspect-ratio: auto;
	object-fit: cover;
	margin: 0 !important;
	padding: 0 !important;
}
.gmr-related-post-third .box-content {
	width: auto;
	flex: 1;
}
.gmr-related-post-third .reltitle {
	margin-bottom: 5px;
	line-height: 1.4;
}
.gmr-related-post-third .reltitle a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
	line-height: 1.4;
	color: var(--link-color-body, #000000);
}
.gmr-related-post-third .reltitle a:hover {
	color: var(--hoverlink-color-body, #d9091b);
}
/* Meta: 11px abu + kapital persis demo */
.gmr-related-post-third .gmr-meta-topic {
	margin-bottom: 5px;
	line-height: 11px;
}
.gmr-related-post-third .gmr-meta-topic .meta-content {
	display: flex;
	align-items: center;
	font-size: 11px;
	color: var(--content-greycolor, #555555);
	line-height: 11px;
	text-transform: capitalize;
}
.gmr-related-post-third .gmr-meta-topic .meta-content > * {
	margin-right: 8px;
}
.gmr-related-post-third .gmr-meta-topic .meta-content > *:last-child {
	margin-right: 0;
}
.gmr-related-post-third .gmr-meta-topic .cat-links-content a {
	color: #ffffff !important;
	border-radius: 2px;
	background-color: var(--scheme-color, #d9091b);
	padding: 5px;
	font-size: 11px;
	line-height: 11px;
}
.gmr-related-post-third .gmr-meta-topic .posted-on {
	color: var(--content-greycolor, #555555);
}
/* Cuplikan artikel (excerpt) dalam box-content persis demo: tampil di
   desktop, disembunyikan di layar <=800px (persis demo wpmedia). */
.gmr-related-post-third .entry-content-archive p {
	margin-top: 10px;
	margin-bottom: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--content-greycolor, #555555);
}
@media (max-width: 800px) {
	.gmr-related-post-third .entry-content-archive {
		display: none;
	}
}

/* Ikon side-menu (menu-3) ala demo WpBerita: ukuran 20px, jarak 13px */
.gmr-sidemenu ul.menu li.menu-item ._svg,
.gmr-sidemenu ul.menu li.menu-item img._mi {
	width: 20px;
	height: 20px;
	min-width: 20px;
	max-width: 20px;
	display: inline-block;
	vertical-align: -5px;
	margin-right: 13px;
}

/* ===== Drawer side-menu ala demo Wpmedia (onoffcanvas) ===== */
#gmr-sidemenu-id {
	display: block !important; /* parent menyembunyikan .gmr-sidemenu */
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	padding-bottom: 40px;
	max-width: 400px;
	width: 100%;
	height: 100%;
	z-index: 9999999;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background-color: var(--content-bgcolor, #ffffff);
	transform: translate3d(-100%, 0, 0);
	transition: all 0.3s ease-in-out;
	box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
	pointer-events: none;
}
#gmr-sidemenu-id.is-open {
	transform: translate3d(0, 0, 0);
	pointer-events: auto;
}
/* Overlay redup saat drawer terbuka */
.onoffcanvas-drawer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999998;
	background: rgba(0, 0, 0, 0.5);
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s ease-in-out;
	pointer-events: none;
}
.onoffcanvas-drawer.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}
/* Logo + tombol tutup (sticky) */
#side-nav .gmr-logo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 20px;
	margin-bottom: 10px;
	background-color: var(--content-bgcolor, #ffffff);
	height: 60px;
	box-shadow: 0 15px 15px -15px rgba(0, 0, 0, 0.2);
	position: sticky;
	left: 0;
	right: 0;
	top: 0;
	z-index: 8;
	/* Parent media query (max-width:1200px) memaksa max-width:170px dan
	   (max-width:992px) menambah margin-top:20px + text-align:center untuk
	   logo header — tidak boleh menimpa baris logo drawer. */
	max-width: none !important;
	width: 100%;
	margin-top: 0 !important;
	text-align: left;
}
#side-nav .gmr-logo a.logolink img {
	max-height: 34px;
	display: inline-block;
	max-width: 100%;
}
/* Parent menyembunyikan wrap ini (display:none !important) untuk menu sidr lama;
   drawer ala demo butuh tombol tutup tampil. */
#side-nav .close-topnavmenu-wrap {
	display: flex !important;
	align-items: center;
}
#side-nav .close-topnavmenu-wrap button {
	border: none !important;
	color: var(--main-color, #000000);
	font-size: 30px;
	line-height: 30px;
	padding: 0 !important;
	margin: 0 !important;
	background: var(--content-bgcolor, #ffffff);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	justify-content: center;
	align-items: center;
	display: flex;
	border-radius: 50%;
	width: 34px;
	height: 34px;
	cursor: pointer;
}
/* Kotak pencarian */
#side-nav .gmr-searchform {
	position: relative;
	max-width: 100%;
	margin: 8px 10px;
}
#side-nav .gmr-searchform input {
	outline: none;
	text-align: left;
	width: 100%;
	max-width: 100%;
	margin: 0;
	height: 34px;
	border-width: 1px !important;
	padding: 8px 40px 8px 16px;
	box-sizing: border-box;
	border-radius: 20px;
}
#side-nav .gmr-searchform button {
	position: absolute;
	right: 0;
	top: 0;
	border: none;
	cursor: pointer;
	outline: none;
	background-color: transparent;
	padding: 6px 10px;
	color: var(--content-greycolor, #555555);
}
#side-nav .gmr-searchform button svg {
	width: 20px;
	height: 20px;
	vertical-align: -0.4em;
}
/* Daftar menu drawer */
#side-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#side-nav ul li {
	width: 100%;
	display: block;
	list-style: none;
	padding: 0;
	margin: 0;
}
#side-nav ul li a {
	padding: 8px 16px;
	display: flex;
	align-items: center;
	position: relative;
	font-size: 16px;
	line-height: 1.5;
	text-decoration: none;
	color: var(--main-color, #000000);
}
#side-nav ul li a:hover {
	background-color: var(--rgbacolor, rgba(0, 0, 0, 0.05));
}
#side-nav ul li ul.sub-menu {
	border-bottom: 0;
	margin: 5px;
	display: grid !important;
	grid-template-columns: repeat(1, 1fr);
	gap: 5px;
}
#side-nav ul li ul.sub-menu li a {
	font-size: 13px;
	padding: 8px 10px;
	background-color: var(--rgbacolorthin, rgba(0, 0, 0, 0.03));
}
#side-nav ul li.col-2 ul.sub-menu {
	grid-template-columns: repeat(2, 1fr);
}
#side-nav ul li.menu-item-has-children > a {
	font-size: 16px;
	background-color: var(--rgbacolor, rgba(0, 0, 0, 0.05));
	/* Heading section (Kategori, Label, Laman): huruf kapital + tebal */
	text-transform: uppercase;
	font-weight: 700;
}
/* Badge (mis. "Hot") tetap sesuai teks asli, tidak ikut kapital */
#side-menu li.menu-new > a:after {
	text-transform: none;
}
/* Item kategori di drawer: tulisan berwarna per kategori (tanpa gambar) */
#side-nav ul li ul.sub-menu li.menu-item-type-taxonomy > a {
	background-color: var(--rgbacolorthin, rgba(0, 0, 0, 0.03));
}

/* Badge menu-new ala demo Wpmedia: konten dari atribut data-desciption */
#side-menu li.menu-new > a:after {
	content: attr(data-desciption);
	position: absolute;
	top: 2px;
	right: -15px;
	padding: 0 5px;
	background-color: red;
	color: #fff;
	font-size: 9px;
	line-height: 1.4;
	letter-spacing: -0.02em;
	border-radius: 2px;
	display: inline-flex;
	height: 13px;
	align-items: center;
}
#side-menu li.menu-new.green > a:after {
	background-color: #27ae60;
}
/* Posisi badge di dalam drawer (persis demo) */
#side-menu li.menu-new > a:after {
	position: relative;
	top: -10px;
	right: -10px;
}

/* ===== Drawer social icons (ala demo Wpmedia) ===== */
.gmr-sidemenu .gmr-social-icons ul {
	padding: 8px 10px;
	margin: 20px 5px;
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
}
.gmr-sidemenu .gmr-social-icons ul > li {
	margin: 0 5px;
}

/* ===== Entry header single ala demo Wpmedia ===== */
.entry-header-single {
	margin-bottom: 20px;
}
.entry-header-single .cat-links-content {
	font-size: 11px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	line-height: 11px;
}
.entry-header-single .cat-links-content > * {
	margin-right: 8px;
}
.entry-header-single .cat-links-content a {
	color: #fff !important;
	border-radius: 2px;
	padding: 5px;
	margin-bottom: 8px;
}
.list-flex {
	display: flex;
	align-items: center;
}
.list-flex .list-right {
	margin-left: auto;
	display: flex;
}
.list-flex .list-right > * {
	margin-left: 5px;
}
.gmr-content-share {
	margin-left: auto;
}
.gmr-gravatar-metasingle {
	width: 46px;
	height: 36px;
}
.gmr-gravatar-metasingle img {
	display: flex;
	height: 36px;
	width: 36px;
}
.gmr-content-metasingle {
	display: flex;
	flex-direction: column;
}
.entry-header-single .gmr-content-metasingle .meta-content {
	font-size: 11px;
	color: var(--content-greycolor, #888888);
	line-height: 11px;
	text-transform: capitalize;
	display: flex;
	align-items: center;
}
.entry-header-single .gmr-content-metasingle .meta-content > * {
	margin-right: 8px;
}
.entry-header-single .gmr-content-metasingle .meta-content > *:last-child {
	margin-right: 0;
}
.entry-header-single .gmr-content-metasingle .meta-content a {
	color: var(--content-greycolor, #888888);
}
.entry-header-single .count-text {
	margin-left: 4px;
	display: inline-flex;
	align-items: center;
}
.entry-header-single .count-text > * {
	margin-right: 5px;
}
.entry-header-single .count-text > *:last-child {
	margin-right: 0;
}
.entry-header-single .count-text svg {
	width: 13px;
	height: 13px;
}
.gmr-iconnotif {
	font-size: 11px;
	position: relative;
}
.gmr-iconnotif .gmr-iconnotif-wrap,
.gmr-iconnotif a {
	/* Demo Wpmedia: komentar pakai ungu #3920c9 (--secondscheme-color demo). */
	background-color: #3920c9;
	color: #fff;
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.gmr-iconnotif .gmr-iconnotif-wrap {
	/* Ikon dilihat: warna skema utama (persis demo). */
	background-color: var(--scheme-color, #d32f2f);
}
.gmr-iconnotif svg {
	font-size: 20px;
	width: 20px;
	height: 20px;
}
.notif-number {
	position: absolute;
	top: -6px;
	right: -6px;
	padding: 3px;
	font-size: 9px;
	line-height: 9px;
	background-color: red;
	color: #fff;
	border-radius: 2px;
	height: 14px;
	max-width: 34px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}
#share-modal {
	border: none;
	/* Demo Wpmedia: tombol share biru #3c5a99. */
	background-color: #3c5a99;
	color: #fff;
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
}
#share-modal svg {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

/* ===== Popup share ala demo Wpmedia ===== */
#gmr-popupwrap {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 9999998;
	margin-left: 0;
}
#gmr-popupwrap.gmr-bannerpopup {
	display: block;
}
.gmr-modalbg {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}
.gmr-in-popup {
	background-color: var(--content-bgcolor, #ffffff);
	margin: auto;
	padding: 10px;
	width: 80%;
	max-width: 350px;
	position: relative;
	z-index: 99999;
	top: 50%;
	transform: translateY(-50%);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	border-radius: 2px;
}
.gmr-share-popup .gmr-in-popup {
	padding: 20px;
}
.idt-xclose {
	position: absolute;
	display: flex;
	top: -30px;
	right: -30px;
	z-index: 99;
	background-color: var(--content-bgcolor, #ffffff);
	color: var(--main-color, #c62828);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	width: 34px;
	min-width: 34px;
	height: 34px;
	font-size: 22px;
	line-height: 1.5;
	text-align: center;
	cursor: pointer;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	padding: 0 !important;
}
.main-textshare {
	font-size: 18px;
	display: block;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-color, #e0e0e0);
	text-align: center;
}
.second-textshare {
	font-size: 12px;
	color: var(--content-greycolor, #888888);
	text-align: center;
}
.content-share .gmr-socialicon-share {
	margin-top: 10px;
	justify-content: center;
}
ul.gmr-socialicon-share {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	list-style: none;
}
ul.gmr-socialicon-share li {
	text-align: center;
	margin-left: 5px;
}
ul.gmr-socialicon-share li:first-child {
	margin-left: 0;
}
ul.gmr-socialicon-share li a {
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
ul.gmr-socialicon-share li.facebook a {
	background-color: #3c5a99;
}
ul.gmr-socialicon-share li.twitter a {
	background-color: #0f1419;
}
ul.gmr-socialicon-share li.telegram a {
	background-color: #08c;
}
ul.gmr-socialicon-share li.pinterest a {
	background-color: #bd081c;
}
ul.gmr-socialicon-share li.whatsapp a {
	background-color: #25d366;
}
ul.gmr-socialicon-share li svg {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: #fff;
}
@media (max-width: 400px) {
	.entry-header-single .gmr-gravatar-metasingle {
		display: none;
	}
}

/* ===== View More button ala demo Wpmedia (ungu terang, teks putih, centered) ===== */
.view-more-button {
	background-color: var(--button-bgcolor, #3920c9) !important;
	color: var(--button-color, #ffffff) !important;
	line-height: 1.5;
	width: auto;
	margin: 0 auto;
	padding: 8px 16px;
	border-radius: 2px;
	display: block;
	font-size: 14px;
	position: relative;
}
.view-more-button:hover {
	opacity: 0.85;
}

/* ===== Popular Posts ala demo Wpmedia: nomor 1,2,3... + big thumbnail item 1 ===== */
#wpberita-popular-1 ul.wpmedia-rp-widget,
.widget.wpberita-popular ul.wpmedia-rp-widget {
	margin: 0;
	padding: 0;
	list-style: none;
}
#wpberita-popular-1 ul.wpmedia-rp-widget li,
.widget.wpberita-popular ul.wpmedia-rp-widget li {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}
#wpberita-popular-1 ul.wpmedia-rp-widget li:last-child,
.widget.wpberita-popular ul.wpmedia-rp-widget li:last-child {
	margin-bottom: 0;
}
.widget.wpberita-popular .wpmedia-rp-widget li .big-thumb {
	position: relative;
	display: block;
	width: 100%;
}
.widget.wpberita-popular .wpmedia-rp-widget li .big-thumb img {
	width: 100%;
	height: auto;
	display: block;
}
.widget.wpberita-popular .wpmedia-rp-widget li .big-thumb .inner-thumbnail {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 12px;
	line-height: 1.4;
	color: #fff;
	z-index: 2;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 100%);
	display: flex;
	align-items: center;
}
.widget.wpberita-popular .wpmedia-rp-widget li .big-thumb .meta-content {
	color: #ddd;
}
/* Nomor ala demo: kotak merah, teks putih (menimpa .rp-number parent yang abu-abu italik) */
#wpberita-popular-1 .rp-number,
.widget.wpberita-popular .rp-number {
	color: #fff;
	font-size: 20px;
	font-style: normal;
	line-height: 44px;
	width: 44px;
	height: 44px;
	padding: 0;
	margin-right: 14px;
	text-align: center;
	background-color: var(--scheme-color, #d9091b);
	border-radius: 2px;
	flex: none;
}
.widget.wpberita-popular .recent-content {
	flex: 1;
	min-width: 0;
}
.widget.wpberita-popular .recent-title {
	font-size: 14px;
	display: block;
	margin-bottom: 5px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.widget.wpberita-popular .meta-content.meta-content-flex {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.widget.wpberita-popular .count-text {
	margin-left: 4px;
	display: inline-flex;
	align-items: center;
}
.widget.wpberita-popular .count-text svg {
	width: 13px;
	height: 13px;
	margin-right: 5px;
}

/* ===== Index page ala demo Wpmedia (filter + layout) ===== */
.gmr-filter-index {
	border-radius: 2px;
	padding: 10px;
}
.gmr-filter-index form {
	display: flex;
	flex-wrap: wrap;
}
.gmr-filter-index form > * {
	margin-right: 5px;
}
.gmr-filter-index form > *:last-child {
	margin-right: 0;
}
.gmr-filter-index input[type="number"],
.gmr-filter-index select {
	font-size: 14px;
	padding: 8px 10px;
	border-radius: 2px;
	border: 0 !important;
	max-width: 120px;
}
.gmr-filter-index input[type="submit"] {
	font-size: 14px;
	padding: 8px 10px;
	border-radius: 2px;
}