/*
Theme Name: Kibaran
Theme URI: https://www.demo.pojoksoft.com/kibaran
Author: Pojoksoft.com
Author URI: https://www.pojoksoft.com
Description: Kibaran adalah template WordPress portal berita yang dari segi desain sedikit mirip dengan kumparan.com
Requires at least: 5.9
Tested up to: 6.1
Requires PHP: 7.4
Version: 3.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kibaran
Tags: #pojoksoft

kibaran WordPress Theme, (C) 2024 Pojoksoft.com
kibaran is distributed under the terms of the GNU GPL.
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing: border-box;font-family: 'Heebo', sans-serif;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;box-sizing: border-box;}body{line-height:1.4}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.clr{clear:both}a{text-decoration:none;color:#000}a:hover{text-decoration:underline}b,h1,h2,h3,h4,h5,h6,strong{font-weight:normal;font-family:'Heebo',sans-serif;}i,em{font-style:italic}h1{font-size:32px}h2{font-size:28px}h3{font-size:24px}h4{font-size:20px}h5{font-size:16px}h6{font-size:14px}

img {
	margin: 0;
    padding: 0;
    border: 0;
    max-width: 100%;
	height: auto;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    font-family: 'Heebo',sans-serif;
} 

/* WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

#wpdevar_comment_1, #wpdevar_comment_2, .no-more {
	display: none;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: var(--bg-color-dua);
    max-width: 100%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;	
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
		color: #999999;
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	margin-left: 0;
	margin-right: 0;
	text-align: left;
	margin-top: 0;

}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

.sticky {
	
}

.gallery-caption {
}

.bypostauthor {
	
}

#gallery-1 img {
	border: none !important;
}

.gallery .gallery-caption {
	display: none;
}

.gallery { margin: 0 auto 18px; }
.gallery .gallery-item {
	float: left;
	margin-top: 0;
	text-align: center;
	width: 33%;
}
.gallery-columns-2 .gallery-item { width: 50%; }
.gallery-columns-4 .gallery-item { width: 25%; }
.gallery img {
	
}
.gallery img:hover {
	background: white;
}
.gallery-columns-2 .attachment-medium {
	max-width: 92%;
	height: auto;
}
.gallery-columns-4 .attachment-thumbnail {
	max-width: 84%;
	height: auto;
}
.gallery .gallery-caption {
	color: #888;
	font-size: 12px;
	margin: 0 0 12px;
}
.gallery dl, .gallery dt { margin: 0; }
.gallery br+br { display: none; }


/******************
 * DEFAULT
 * *******************/
body {
	font-family: 'Heebo', sans-serif;
	position: relative;
}

b, strong {
	font-weight: bold;
}

i, em {
	font-style: italic;
}

/*************************
 HOME
************************/
body, body.home, body.category, body.page-template  {
	background-color: var(--warnabackgroundbody);
}

body.single {
	background: var(--bg-color-dua);
}
/*************************
 HEADER
************************/
.add-height {
/*	height: 140px; */
	box-sizing: border-box;
}

header {
	width: 100%;
	margin: 0 auto;
	text-align: center;
/* 	position: fixed; */
	top: 0;
	z-index: 2;
	box-shadow: 0 0.4rem 1.2rem 0 rgba(0, 0, 0, 0.05);
	background: var(--warnaheader);
}

header.clone {
	width: 100%;
	margin: 0 auto;
	text-align: center;
 	position: fixed; 
	top: 0;
	z-index: 6;
	box-shadow: 0 0.4rem 1.2rem 0 rgba(0, 0, 0, 0.05);
	background: var(--warnaheader);
	display: none;
}

body.down header.clone {
	display: block;
}

.hamburger-button {
	position: absolute;
	left: 0;
	top: 20px;
	display: none;
	padding: 20px;
	box-sizing: border-box;
	z-index: 1;
	/* Versi AMP memakai elemen <button> (wajib bisa diklik tanpa JS lewat
	   on="tap:..."), sedangkan versi non-AMP memakai <div>. Reset ini
	   menghapus gaya bawaan browser utk <button> (background abu-abu,
	   border, font) -- tidak berpengaruh apa pun pada <div> non-AMP. */
	background: transparent;
	border: none;
	margin: 0;
	font: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.hamburger-button .atas, .hamburger-button .tengah, .hamburger-button .bawah {
	background: var(--bg-color-tiga);
	width: 18px;
	height: 2px;
	line-height: 0;
	margin-top: 0;
	margin-bottom: 5px;
}

.mobile-menu-kiri-wrap {
	display: none;
	/* background: #fff; */
	background: var(--sidemenubackg);
	position: fixed;
	width: 80%;
	min-height: 100vh;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999;
box-shadow: 173px -19px 70px 200px rgba(0,0,0,0.5);
-webkit-box-shadow: 173px -19px 70px 200px rgba(0,0,0,0.5);
-moz-box-shadow: 173px -19px 70px 200px rgba(0,0,0,0.5);
	/* FIX: hanya wadah ini yang scroll (lihat catatan .kbn-mobile-menu-scroll
	   di bawah). overflow-y:auto (bukan overflow:scroll di kedua sumbu)
	   supaya tidak muncul scrollbar horizontal, dan
	   -webkit-overflow-scrolling:touch supaya momentum-scroll di iOS Safari
	   tetap mulus. */
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	/* FIX terpotong saat scroll: beri ruang bawah ekstra supaya item menu
	   terakhir DAN teks copyright benar-benar bisa dijangkau/terlihat penuh
	   saat digulir ke bawah. Tanpa ini, konten berhenti persis di tepi
	   viewport sehingga di browser mobile (yang punya bilah URL / area
	   gesture di bawah) bagian paling bawah -- termasuk copyright --
	   ketutup. Angka aman 90px + safe-area iOS. */
	padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
}

/* Versi AMP (<amp-sidebar>) dari menu hamburger -- SENGAJA class terpisah
   dari .mobile-menu-kiri-wrap di atas: amp-sidebar mengurus sendiri
   display/position/z-index/animasi slide-in-nya (jangan dioverride), jadi
   di sini cukup tata tampilan isinya saja (lebar, warna latar, padding). */
amp-sidebar.kbn-amp-hamburger-sidebar {
	width: 80%;
	max-width: 320px;
	background: var(--sidemenubackg);
	box-sizing: border-box;
	overflow-y: auto;
}

amp-sidebar.kbn-amp-hamburger-sidebar p.judul-menu {
	font-weight: bold;
	text-align: left;
	padding: 10px 20px;
	border-bottom: 1px solid #ccc;
	box-sizing: border-box;
	color: var(--font-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

amp-sidebar.kbn-amp-hamburger-sidebar .close-button-hamburger {
	background: none;
	border: none;
	font-size: 16px;
	cursor: pointer;
	color: var(--font-color);
	padding: 0;
}

amp-sidebar.kbn-amp-hamburger-sidebar .copyright-mobile {
	padding: 16px 20px;
	font-size: 12px;
	color: var(--font-color);
	box-sizing: border-box;
}

.mobile-menu-kiri-wrap p.judul-menu {
	font-weight: bold;
	text-align: left;
	padding: 10px 20px;
	border-bottom: 1px solid #ccc;
	box-sizing: border-box;
	color: var(--font-color);
}

.mobile-menu-kiri-wrap p span {
	font-weight: normal;
	display: block;
	float: right;
	box-sizing: border-box;
	filter: var(--filter-png)
}

/*
 * FIX (dua masalah sekaligus di sini):
 * 1) Selector diganti dari ".menu-menu-atas-container" (nama otomatis dari
 *    WordPress berdasarkan SLUG menu yang dipilih admin -- lihat catatan di
 *    header.php) menjadi ".kbn-mobile-menu-scroll" yang SELALU sama, apa pun
 *    nama menu "Side Menu (Mobile)" yang dipakai.
 * 2) "height: 100%" dihapus. Sebelumnya, area menu ini dipaksa setinggi 100%
 *    dari .mobile-menu-kiri-wrap (yaitu SETINGGI LAYAR PENUH) terlepas dari
 *    seberapa panjang isi menunya, sementara .mobile-menu-kiri-wrap sendiri
 *    JUGA scroll. Dua area scroll bersarang dengan tinggi yang saling
 *    tumpang tindih inilah yang membuat sebagian item (dan copyright di
 *    bagian bawah) terpotong / tidak bisa dijangkau saat digulir -- gerakan
 *    scroll "terjebak" pada satu area sementara area lain masih menyimpan
 *    sisa kontennya. Sekarang hanya .mobile-menu-kiri-wrap (wadah paling
 *    luar) yang mengurus scroll; area menu ini mengikuti tinggi kontennya
 *    sendiri secara alami, sehingga seluruh isi menu + copyright di
 *    bawahnya selalu bisa dicapai dengan SATU gerakan gulir yang konsisten.
 */
.mobile-menu-kiri-wrap .kbn-mobile-menu-scroll {
	height: auto;
	overflow: visible;
	box-sizing: border-box;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.mobile-menu-kiri-wrap .kbn-mobile-menu-scroll::-webkit-scrollbar {
	display: none;
}

.mobile-menu-kiri-wrap .container {
	margin-top: 20px;
	text-align: left;
}

.mobile-menu-kiri {
	overflow: hidden;
	margin: 0;
	padding: 0 20px;
	box-sizing: border-box;
}

.mobile-menu-kiri li a {
	display: block;
	text-align: left;
	padding: 10px 0;
	text-decoration: none;
	position: relative;
	box-sizing: border-box;
	color: var(--font-color);
}

ul.mobile-menu-kiri li.menu-item-has-children ul.sub-menu {
	display: none;
	box-sizing: border-box;
}

ul.mobile-menu-kiri li.active ul.sub-menu {
  display: block; /* Show the list when class 'active' is added to the li */ 
  color: red;
	box-sizing: border-box;
}

.copyright-mobile {
	font-size: 12px;
/*	color: rgb(153, 153, 153); */
    color: var(--font-color);
	font-weight: normal;
	border-top: 1px solid #ccc;
	text-align: left;
	padding: 20px;
	background: var(--sidemenubackg);
	width: 100%;
	box-sizing: border-box;
	position: relative;
	bottom: 0;
	z-index: 999999999999999;
	box-sizing: border-box;
}

/* ===== Theme switcher (Light / Dark / Automatic) ===== */

/* --- Desktop: icon button + dropdown --- */
.kibaran-theme-switcher {
	position: relative;
	margin-top: 20px;
	float: left;
}

.theme-switcher-btn {
	display: block;
	width: 30px;
	height: 30px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--font-color);
}

.theme-switcher-btn svg {
	width: 24px;
	height: 24px;
	display: none;
}

/* Show whichever icon matches the current PREFERENCE (not just the
   effective light/dark result), so picking "Automatic" always shows
   the automatic icon even if it currently resolves to light or dark. */
html:not([data-theme-pref]) .theme-switcher-btn .icon-auto,
html[data-theme-pref="auto"] .theme-switcher-btn .icon-auto {
	display: block;
}

html[data-theme-pref="light"] .theme-switcher-btn .icon-sun {
	display: block;
}

html[data-theme-pref="dark"] .theme-switcher-btn .icon-moon {
	display: block;
}

.theme-switcher-dropdown {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	background: var(--warnaheader);
	border: 1px solid var(--border-eee);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	padding: 6px;
	min-width: 160px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 9999;
}

.theme-switcher-dropdown.kibaran-dropdown-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.theme-option {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: none;
	border: 0;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-family: 'Heebo', sans-serif;
	font-size: 14px;
	color: var(--font-color);
	text-align: left;
}

.theme-option svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.theme-option:hover {
	background: var(--bg-color-dua);
}

.theme-option.kibaran-theme-active {
	background: var(--bg-color-dua);
	font-weight: 600;
	color: var(--themecolor);
}

/* --- Mobile: 3-position sliding track --- */
.modegelap {
	margin-left: 20px;
	margin-bottom: 10px;
	display: inline-block;
	color: var(--font-color);
}

.kibaran-theme-track {
	position: relative;
	display: flex;
	width: 108px;
	height: 34px;
	background: var(--bg-color-dua);
	border-radius: 20px;
	padding: 3px;
	box-sizing: border-box;
	float: right;
}

.kibaran-theme-track-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 30px;
	height: 28px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	transition: transform 0.25s ease;
	z-index: 1;
}

.kibaran-theme-track[data-active-index="1"] .kibaran-theme-track-thumb {
	transform: translateX(34px);
}

.kibaran-theme-track[data-active-index="2"] .kibaran-theme-track-thumb {
	transform: translateX(68px);
}

.theme-track-option {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--font-color);
}

.theme-track-option svg {
	width: 16px;
	height: 16px;
}

.theme-track-option.kibaran-theme-active {
	color: #1a1a1a;
}

/* ===== end theme switcher ===== */

.fixed-wrap {
	width: 100%;
	max-width: 1024px;
	background-color: var(--warnaheader);
	padding: 10px 10px 0 10px;
	margin: 0 auto;
	box-sizing: border-box;
	position: relative;
}

#logo {
	display: block;
	float: left;
	margin-right: 20px;
}

/* searchform.php */
header #searchform {
	float: left;
	width: 52%;
	margin-right: 0;
	margin-top: 10px;
	box-sizing: border-box;
}

header #searchform input[type='text'] {
	border: 1px solid rgb(204, 204, 204);
	border-radius: 20px;
	color: #000;
	width: 92%;
	text-align: left;
	font-size: 1.2em;
	background-color: #F7F7F7;
	background-image: url('images/search-icon.svg');
	background-repeat: no-repeat;
	background-position: 2% 50%;
	padding: 10px 10px 10px 50px;
	box-sizing: border-box;
}

::-webkit-input-placeholder { /* Edge */
  color: #757575;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #757575;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #757575;
}

::placeholder {
  color: #757575;
opacity: 1; /* Firefox */
}


header #searchform input:focus {
	outline: none;
}

header #searchsubmit {
	background-color: transparent;
	background-image: url('images/search.png');
	background-repeat: no-repeat;
	border: 1px solid red;
	width: 26px;
	height: 30px;
	cursor: pointer;
	line-height: 0;
	display: none;
}

[data-theme="dark"] header #searchform input[type='text'] {
	background-color: var(--bg-f7f);
	border-color: var(--border-ddd);
	color: var(--font-color);
}

[data-theme="dark"] header #searchform input[type='text']::placeholder {
	color: #9a9a9a;
	opacity: 1;
}

.header-banner-wrap {
	margin-top: 150px;
}

.header-banner-wrap {
	text-align: center;
	width: 100%;
	max-width: 970px;
	margin: 0 auto;
}

.header-banner-wrap img {
	text-align: center;
	max-width: 100%;
	height: auto;
}

#sidebar-header {
	margin-bottom: 5px;
	width: 100%;
	max-width: 1024px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.sidebar-header-wrap {
	text-align: center;
}

.sidebar-header-wrap > div {
	text-align: center;
	max-width: 1190px;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin: 0 auto;
}

.sidebar-header-wrap img {
	max-width: 1119px;
	width: 100%;
	height: auto;
	text-align: center;
	box-sizing: border-box;
	margin: 0 auto;
}

.post-banner-wrap, .post-banner-wrap img{
	text-align: center;
}

.post-banner-wrap {
	margin-bottom: 20px;
}

#hamburger-button {
	float: left;
	cursor: pointer;
	margin-top: 10px;
	 -o-transition:.5s;
  	-ms-transition:.5s;
 	 -moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition:.5s;
	display: none;
}

.garis1, .garis3 {
	width: 20px;
    height: 3px;
    background-color: #ccc;
    margin: 5px 0;
}

.garis2 {
	width: 13px;
    height: 3px;
    background-color: #ccc;
    margin: 5px 0;
}

#media-sosial-header {
	text-align: center;	
	margin-top: 20px;
	float: right;
	margin-right: 20px;
}

#media-sosial-header a {
	display: inline-block;
}

#media-sosial-header .fb {
	border: 1px solid var(--iconbackg);
	background-color: var(--iconbackg);
	background-image: url('images/fb.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 30px;
	height: 30px;
	border-radius: 20px;
	background-size: 55%;
}

#media-sosial-header .twitter {
	border: 1px solid var(--iconbackg);
	background-color: var(--iconbackg);
	background-image: url('images/twitter-x.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 30px;
	height: 30px;
	border-radius: 20px;
	background-size: 55%;
}

#media-sosial-header .instagram {
	border: 1px solid var(--iconbackg);
	background-color: var(--iconbackg);
	background-image: url('images/ig.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 30px;
	height: 30px;
	border-radius: 20px;
	background-size: 55%;
}

#media-sosial-header .youtube {
	border: 1px solid var(--iconbackg);
	background-color: var(--iconbackg);
	background-image: url('images/yt.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 30px;
	height: 30px;
	border-radius: 20px;
	background-size: 55%;
}

#media-sosial-header .tiktok {
	border: 1px solid var(--iconbackg);
	background-color: var(--iconbackg);
	background-image: url('images/tiktok.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 30px;
	height: 30px;
	border-radius: 20px;
	background-size: 55%;
}

#media-sosial-header .threads {
	border: 1px solid var(--iconbackg);
	background-color: var(--iconbackg);
	background-image: url('images/threads.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 30px;
	height: 30px;
	border-radius: 20px;
	background-size: 64%;
}

#media-sosial-header .whatsapp {
	border: 1px solid var(--iconbackg);
	background-color: var(--iconbackg);
	background-image: url('images/whatsapp.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 30px;
	height: 30px;
	border-radius: 20px;
	background-size: 62%;
}

#media-sosial-header .telegram {
	border: 1px solid var(--iconbackg);
	background-color: var(--iconbackg);
	background-image: url('images/telegram.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 30px;
	height: 30px;
	border-radius: 20px;
	background-size: 62%;
}

#media-sosial-header a:hover {
	background-color: transparent;
	filter: var(--svg);
}

#hamburger-button:hover .garis2 {
	width: 20px;
}

#search-mobile-button {
	background-image: url('images/search-mobile.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 50px;
	height: 50px;
	float: right;
	cursor: pointer;
	display: none;
	filter: var(--filter-none);
	/* Sekarang <label for="kbnHeaderSearchCheck"> (checkbox hack, AMP &
	   non-AMP sekaligus) -- reset ini menghapus gaya bawaan browser utk
	   elemen form-adjacent walau <label> sendiri bukan elemen form. */
	background-color: transparent;
	border: none;
	padding: 0;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
}

.menu-utama {
	margin-top: 5px;
	overflow-y: hidden;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
    white-space: nowrap;
	margin-bottom: 0;
	padding: 0;
	text-align: left;
	transition: all 3s ease;
	box-sizing: border-box;
	display: flex;
    flex-wrap: nowrap;
}

.menu-utama::-webkit-scrollbar {
	display: none;
}

#geserkiri,
#geserkanan {
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 50%;
	background-color: var(--warnaheader, #fff);
	color: var(--font-color, #1a1a1a);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	position: absolute;
	top: 95px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-50%) scale(0.6);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background-color 0.2s ease, box-shadow 0.2s ease;
}

#geserkiri svg,
#geserkanan svg {
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

#geserkiri {
	left: -15px;
}

#geserkanan {
	right: -15px;
}

#geserkiri.geser-visible,
#geserkanan.geser-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(-50%) scale(1);
}

#geserkiri:hover,
#geserkanan:hover {
	background-color: var(--themecolor, #009BA9);
	color: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

#geserkiri:active,
#geserkanan:active {
	transform: translateY(-50%) scale(0.88);
}

#geserkiri:hover svg {
	transform: translateX(-2px);
}

#geserkanan:hover svg {
	transform: translateX(2px);
}

/* Mobile (Primary Menu Mobile): hidden, not needed -- the menu already
   scrolls natively via touch/swipe there. Desktop keeps the buttons
   for mouse users. */
@media screen and (max-width: 750px) {
	#geserkiri,
	#geserkanan {
		display: none !important;
	}
}


.menu-utama li {
	display: inline-block;
	border-bottom: 5px solid transparent;
	box-sizing: border-box;
}

.menu-utama li a {
	text-decoration: none;
	font-family: 'Heebo', sans-serif;
	font-weight: 900;
	font-size: 18px;
	color: var(--menuutama1);
	display: inline-block;
	padding: 5px 10px 8px 10px;
	 -o-transition:.5s;
  	-ms-transition:.5s;
 	 -moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition:.5s;
	position: relative;
	text-align: center;
}

.menu-utama li a:hover {
	color: var(--font-color);
}

.menu-utama .current-menu-item {
	border-bottom: 5px solid var(--listmenu);
	box-sizing: border-box;
}

.menu-utama .sub-menu .current-menu-item {
	border-bottom: none;
}

.home .menu-utama .menu-item-object-custom {
/*	border-bottom: 5px solid #D13438; */
}

.menu-utama > li.menu-item-has-children > a {
	margin-right: 10px;
}


.menu-utama > li.menu-item-has-children > a:after {
	 content: url('images/arrow-down.png');
	position: absolute;
	right: -6px;
	top: 2px;
	width: 10px;
	filter: var(--filter-png);
	display: inline-block;
	transition: transform 0.25s ease;
	transform-origin: center;
} 

/* Arrow rotates while the dropdown is open, toggled by the shared
   click handler (works the same way on both desktop and mobile). */
.menu-utama li.menu-item-has-children.down > a:after {
	transform: rotate(180deg);
}

.mobile-menu-kiri > li.menu-item-has-children > a:after {
	content: "";
	background-image: url('images/chevron.svg');
	position: absolute;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: 20px;
	right: 0;
	filter: var(--filter-png);
} 

/* 404 Page
--------------------------------------------- */
.notfound-box {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    background-color: var(--warnabackgroundbody);
    color: #000000;
    /*height: 100vh;*/
}
.notfound-box .notfound-wrap {
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}
.notfound-box .notfound-image {
    background-color: transparent;
    float: left;
}
.notfound-box .img-404 {
    padding-bottom: 100%;
    width: 200px;
    height: 0px;
    position: relative;
    overflow: hidden;
    background: url("../kibaran/images/404.png") center center / cover repeat;
}
.notfound-box .notfound-title {
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: 10px;
    text-align: center;
}
.notfound-box .notfound-title h1,
.notfound-box .notfound-title h2 {
    -webkit-font-smoothing: antialiased;
    color: #000000;
    font-family: Heebo, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    margin: 0;
}
.notfound-box .notfound-desc {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: 10px;
    text-align: center;
}
.notfound-box .notfound-desc p {
    -webkit-font-smoothing: antialiased;
    color: #000000;
    font-family: Heebo, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    text-align: center;
    margin: 0;
}
.notfound-box .notfound-button a {
    	display: block;
	width: 200px;
	border: 2px solid #009BA9;
	border-radius: 6px;
	padding: 10px;
	text-decoration: none;
	font-weight: bold;
	margin: 10px;
	text-align: center;
	 -o-transition:.4s;
	-ms-transition:.4s;
	-moz-transition:.4s;
	-webkit-transition:.4s;
	transition:.3s;
	background-color: #009BA9;
	color: #fff;
}
.notfound-box .notfound-button {
    padding-top: 20px;
}

/* Menu
--------------------------------------------- */
ul.sub-menu {
	position: absolute;
	background-color: #1d1d1d;
	display: none;
	min-width: 220px;
	z-index: 999999999;
	padding: 0;
	box-shadow: rgb(0 0 0 / 13%) 0px 0.16rem 0.36rem 0px, rgb(0 0 0 / 11%) 0px 0.03rem 0.09rem 0px;
}

ul.sub-menu:before {
	  border-bottom: 15px solid #000;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  width: 0;
  height: 0;
  content: "";
  display: block;
	position: absolute;
	top: -9px;
	left: 20px;
}

ul.sub-menu > li {
	display: block;
}

ul.sub-menu > li > a {
	display: block;
	color: #fff;
	padding: 6px 12px;
	font-family: 'Heebo', sans-serif;
	font-weight: 500;
	font-size: 16px;
	text-align: left;
}

ul.sub-menu > li > a:hover {
	background-color: #4a4a4a;
	background: linear-gradient(90deg, rgba(74,74,74,1) 0%, rgba(250,250,250,0) 100%);
	color: #fff;
}

/* Dropdown opening is now handled by the shared click handler (adds
   inline display via slideToggle) instead of :hover, so desktop and
   mobile behave the same way. */

/* akhir tambahan */

.menu-tag-terkini {
	text-align: center;
	padding: 0;
	margin-top: 10px;
}

.menu-tag-terkini li {
	display: inline-block;
}

.menu-tag-terkini li a {
	
	padding: 5px 10px;
	color: rgb(31, 141, 214);
	border-radius: 6px;
	border: 1px solid rgb(31, 141, 214);
	font-weight: 700;
	font-family: 'Heebo', sans-serif;
	font-size: 14px;
	background-color: var(--bg-f7f);
	text-transform: capitalize;
	text-decoration: none;
	margin-right: 4px;
}

.menu-tag-terkini li a:hover {
	background-color: rgb(31, 141, 214);
	color: #fff;
}

.topik-terkini {
	display: none;
}

.menu-tag-terkini-mobile {
	display: none;
	padding-left: 20px;
	margin-bottom: 20px;
}

.menu-tag-terkini-mobile li a {
	color: rgb(31, 141, 214);
	font-weight: 800;
	font-family: 'Heebo', sans-serif;
	font-size: 16px;
	padding: 5px 0;
	display: block;
	text-transform: capitalize;
}

.menu-tag-terkini-mobile li a:before {
	content: "# ";
	color: gray;
	margin-right: 7px;
}

.menu-mobile {
	position: fixed;
	top: 85px;
	left: 0;
	z-index: 999999;
	background-color: #0087E2;
	width: 100%;
	height: auto;
	display: none;
	overflow: auto; 
}

.menu-mobile li a {
	display: block;
	padding: 10px 20px;
	color: #fff;
	text-align: left;
	text-decoration: none;
	font-size: 0.9em;
	font-weight: bold;
	-o-transition:.5s;
  	-ms-transition:.5s;
 	 -moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition:.5s;
}

.menu-mobile li a:hover {
	padding: 10px 40px;
	background-color: #0070BB;
}

.hot a::after {
	content: "Hot";
	color: #fff;
	vertical-align: super;
	font-size: 0.7em;
	font-weight: bold;
	background-color: red;
	padding: 3px;
	margin-left: 5px;
	border-radius: 20px
}

.hot a:hover {
}

.menu-menu-atas-container:after {
	content: " ";
	position: absolute;
	top: 68%;
	right: 0;
	z-index: 99;
	width: 25px;
	height: 37px;
	background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	display: var(--display);
}

.menu-menu-atas-container:before {
	content: " ";
	position: absolute;
	left: 0;
	z-index: 99;
	width: 25px;
	height: 37px;
	background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	display: var(--display);
	}

/* --- BREAKING NEWS TICKER ------------------------------------------
   Layout: a fixed red label on the left, then a scrolling viewport.
   Everything is CSS-only so it works identically on AMP. */

/* Container metrics are copied from #content-wrap and #sidebar-header
   (max-width 1024px, centred, 20px side padding) so the ticker's left
   edge lands on exactly the same vertical line as the header banner
   below it and the headline column below that. It used to be a 910px
   box with 10px padding, which -- being both narrower AND less inset --
   pushed its contents (1024-910)/2 + (20-10) = 47px to the right of
   everything else on the page. */
.marquee {
	width: 100%;
	max-width: 1024px;
	overflow: hidden;
	margin: 0px auto 0 auto;
	padding: 10px 20px;
	box-sizing: border-box;
}

.marquee-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.marquee-label {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: 'Heebo', sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1;
	color: #fff;
	background: var(--ornament1);
	padding: 7px 11px;
	border-radius: 4px;
	white-space: nowrap;
}

/* Slow "on air" blink. Kept subtle on purpose -- a hard flash next to
   scrolling text is tiring to read past. */
.marquee-live {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	animation: kibaran-marquee-pulse 1.8s ease-in-out infinite;
}

@keyframes kibaran-marquee-pulse {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%      { opacity: .35; transform: scale(.7); }
}

/* The headlines are clipped here rather than on .marquee, so the label
   beside them is never affected. The mask softens the trailing edge so
   a headline fades out instead of being sliced mid-letter; browsers
   without mask support simply get the old hard edge. */
.marquee-viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
	        mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
}

/* Animasi CSS murni menggantikan plugin jQuery marquee lama -- jalan di
   halaman biasa MAUPUN AMP (tak perlu JS sama sekali). Konten diulang 2x
   di markup (lihat header.php, .marquee-set) supaya translateX(-50%)
   menggeser PERSIS satu salinan penuh, sehingga terlihat menyambung tanpa
   jeda saat animasi mengulang dari awal. */
.marquee-track {
	display: inline-flex;
	white-space: nowrap;
	animation: kibaran-marquee-scroll 25s linear infinite;
}

.marquee-track:hover {
	animation-play-state: paused;
}

.marquee-set {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

@keyframes kibaran-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.marquee-track {
		animation: none;
	}

	.marquee-live {
		animation: none;
	}
}

/* Spacing deliberately uses margins, never `gap`, on the track and its
   sets. A gap on the track would sit BETWEEN the two copies and get
   counted into the total width, so translateX(-50%) would land half a
   gap off and the loop would visibly jump. Every bit of spacing
   therefore has to live inside a set. */
.marquee-set a {
	display: inline-block;
	margin-right: 14px;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: var(--font-color-marquee);
	text-decoration: none;
	transition: color .15s ease;
}

.marquee-set a:hover {
	color: var(--ornament1);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The separator between headlines. Previously this was a 40px "middot"
   glyph drawn via ::before on the NEXT link, pulled into place with
   left:-4px and top:-16px. Because it was positioned inside the next
   link's box and shifted back over the 5px margin, it ended up almost
   touching the previous headline's last letter -- the gap was about a
   pixel. As a real flex item with an equal margin on each side, it can
   no longer drift, and the spacing is symmetrical by construction. */
.marquee-sep {
	flex: 0 0 auto;
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 14px;
	border-radius: 50%;
	background: var(--ornament1);
}

/* Lighslider
--------------------------------------------- */
.demo {
	width: 100%;
    max-width: 650px;
	float: left;
	margin-right: 10px;

}

.demo ul {
    list-style-type: none;
	padding: 0;
}

/* The slide was laid out with inline-blocks at `width: 49.3%` each.
   Two of those only ever add up to 98.6% of the row, and the leftover
   1.4% was being filled by whatever the newline between the two <a>
   tags happened to render as -- an inline whitespace gap whose size
   depends on the inherited font-size, so it could never be relied on to
   land the second card exactly on the row's right edge. That is why the
   small card underneath sat a few pixels short of the big card above.

   Flex with an explicit gap removes both guesses at once: whitespace
   between children is ignored entirely in a flex container, and the two
   cards split whatever is left after one 10px gap, so all three edges
   line up exactly at any width. */
.demo li {
	border-radius: 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-content: flex-start;
}

.demo li a {
	display: inline-block;
	position: relative;
background: rgba(0, 0, 0, 0) linear-gradient(transparent 0%, rgba(0, 0, 0, 0.4) 90%, rgba(0, 0, 0, 0.8) 100%) repeat scroll 0% 0%;
	overflow: hidden;
	border-radius: 6px;
}

.demo li a:first-child {
	flex: 0 0 100%;
	width: 100%;
}

/* `flex: 1 1 0` makes the pair share the row equally. It also quietly
   neutralises the `width: 49.5%` overrides in the responsive blocks
   further down -- a flex-basis of 0 wins over `width` for a flex item's
   main size no matter how specific the width selector is -- so those
   percentages no longer need to be kept in step with the gap. */
.demo li .slide-medium {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	vertical-align: top;
}

#lightSlider img {
	border-radius: 6px;
}

img.foto-slide-besar {
	width: 650px;
	aspect-ratio: 750 / 420;
	height: auto;
	object-fit: cover;
	object-position: center;
}

img.foto-slide-medium{
	width: 100%;
	max-width: 100%;
	aspect-ratio: 350 / 204;
	height: auto;
	object-fit: cover;
	object-position: center;
}

.demo img {
	position: relative;
	z-index: -9999999;
	transition: 0.4s ease;
}

.demo a:hover img {
	transform: scale(1.1);
}

.headline-title-wrap {
	position: absolute;
	z-index: 999;
	padding: 20px;
	bottom: 20px;
}

.headline-title-wrap h2 {
	font-size: 18px;
}

.demo h2 {
	font-family: 'Heebo', sans-serif;
	font-size: 18px;
	color: #fff;
	font-weight: 700;
	
}

.headline {
	color: red;
	text-transform: uppercase;
	font-family: 'Heebo', sans-serif;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: -0.016em;
	margin-bottom: 3px;
}

.tanggal-headline {
	color: rgb(204, 204, 204);
	font-size: 12px;
	margin-top: 10px;
	font-family: 'Heebo', sans-serif;
}

.lSSlideOuter {
	position: relative;	
}

.demo .lSPager, .demo .lSpg {
	position: absolute;
	bottom: 10px;
	left: 46%;
}

.demo .lSSlideOuter .lSPager.lSpg > li a {
	width: 13px !important;
	height: 5px !important;
	z-index: 0 !important;
	background-color: #fff !important;
}

.lSSlideOuter .lSPager.lSpg > li.active a, .lSSlideOuter .lSPager.lSpg > li:hover a {
	background-color: rgb(33, 150, 243) !important;
}

.lSAction > a {
	top: 25% !important;
}

.lSAction > a {
	background: rgba(0, 0, 0, 0.4) none repeat scroll 0% 0%;
	z-index: 0 !important;
}

.demo .lSAction > .lSPrev {
	left: 0 !important;
}

.demo .lSAction > .lSNext {
	right: 0 !important;
}


/* Headline
--------------------------------------------- */

.headline-indozone {
	display: none;
    margin: 10px 15px 0px 15px;
}

.headline-indozone ul.lSPager {
	margin-top: 13px !important;
}

.headline-indozone .lSPager img {
	border-radius: 100%;
	border: 3px solid #e60e2e;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

.headline-indozone .lSPager li.active {
	filter: brightness(0.5);
}

#imageGallery {
	height: auto !important;
}

#imageGallery li {
	position: relative;
}

#imageGallery li img {
	width: 100%;
	aspect-ratio: 350 / 204;
	height: auto;
	object-fit: cover;
	object-position: center;
	display: block;
}

.indozone-text {
	position: absolute;
	bottom: 0;
	padding: 20px;
	background: linear-gradient(180deg,rgba(15,15,15,0),rgba(0,0,0,.9));
}

.indozone-text .headline-text {
	color: #fff;
	padding: 3px 5px;
	background: #ff0000;
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 10px;
	display: inline-block;
}

.indozone-text h2 {
	font-family: 'Heebo', sans-serif;
	font-weight: bold;
	color: #fff;
	line-height: 1.1;
	margin-bottom: 10px;
}

.indozone-text .tanggal-headline-mobile {
	color: #fff;
}

/* Owl Carousel
--------------------------------------------- */
.hidden {
	display: none;
}

.owl-carousel {
	z-index: 1 !important;
}

.owl-stage {
padding-left: 0px !important;
}

.owl-carousel .owl-item img {
	border-radius: 7px;
	width: 100%;
	aspect-ratio: 350 / 204;
	height: auto;
	object-fit: cover;
	object-position: center;
	display: block;
}

.headline-mobile {
	margin-top: 15px;
}

.headline-mobile h2 {
	font-size: 17px;
	font-weight: bold;
	margin-bottom: 5px;
	color: var(--font-color);
}

.tanggal-headline-mobile {
	font-size: 12px;
	font-family: 'Heebo',sans-serif;
	color: var(--font-color);
}

/* Homepage
--------------------------------------------- */

.block-kibaran {
	margin-bottom: 40px;
}

.wrap-homepage {
	width: 100%;
	max-width: 1190px;
	margin: 0 auto 0 auto;
	padding: 0;
}

.homepage-category {
	width: 100%;
	max-width: 1024px;
	margin: 10px auto 0 auto;
	box-sizing: border-box;
	padding: 0 20px;
}

.homepage-category-name, .homepage-category-video {
	font-family: 'Heebo', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 0.8;
	padding: 5px;
	border-left: 7px solid var(--ornament1);
	margin: 10px 0;
	box-sizing: border-box;
	color: var(--font-color);
}

.homepage-category-name a, .homepage-category-video a {
	text-decoration: none;
	text-transform: capitalize;
	color: var(--font-color);
}

.homepage-category-name a.lihat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-align: right;
	font-weight: 600;
	font-size: 14px;
	color: var(--themecolor, #009BA9);
	float: right;
	padding: 7px 16px;
	border-radius: 30px;
	background-color: rgba(0, 155, 169, 0.08);
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.homepage-category-name a.lihat:hover {
	background-color: var(--themecolor, #009BA9);
	color: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.homepage-category-name a.lihat:active {
	transform: scale(0.96);
}

.homepage-category-name a.lihat:hover .chevron-right {
	transform: translateX(4px);
	opacity: 1;
	filter: brightness(0) invert(1);
}

.chevron-right {
	height: 14px;
	vertical-align: middle;
	opacity: 0.6;
	filter: var(--svg);
	transition: transform 0.25s ease, opacity 0.2s ease;
}

a.homepage-category-headline {
	display: block;
	float: left;
	width: 100%;
	max-width: 320px;
	height: 450px;
	text-decoration: none;
	background: rgba(0, 0, 0, 0) linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 90%, rgba(0, 0, 0, 0.8) 100%) repeat scroll 0% 0%;
	border-radius: 6px;
	position: relative;
	margin: 10px 0;
	overflow: hidden;
	-o-transition:.5s;
  	-ms-transition:.5s;
 	 -moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition:.5s;
	box-sizing: border-box;
}

a.homepage-category-headline:hover img {
	transform: scale(1.1);
} 

/* Periodic glass-shine sweep across the big thumbnail */
a.homepage-category-headline::before {
	content: "";
	position: absolute;
	top: 0;
	left: -75%;
	width: 45%;
	height: 100%;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	pointer-events: none;
	z-index: 2;
	animation: kibaran-shine-sweep 5s ease-in-out infinite;
}

@keyframes kibaran-shine-sweep {
	0% {
		left: -75%;
	}
	35% {
		left: 130%;
	}
	100% {
		left: 130%;
	}
}

@media (prefers-reduced-motion: reduce) {
	a.homepage-category-headline::before {
		animation: none;
		display: none;
	}
}

img.foto-headline-category {
	display: block;
	border-radius: 6px;
	max-width: 320px;
	width: 100%;
	height: 450px;
	position: relative;
	z-index: -1;
	transition: 0.4s ease;
}

.homepage-category-text-block {
	position: absolute;
	bottom: 25px;
}

.homepage-category-inside {
	color: red;
	padding: 2px 15px;
	margin: 0;
	font-family: 'Heebo',sans-serif;
	font-size: 12px;
	text-transform: uppercase;
}

h3.homepage-category-headline-judul {
	color: #fff;
	padding: 5px 15px;
	font-size: 18px;
	font-weight: 700;
	margin-top: 5px;
}

.deskripsi-kategori p {
	text-align: center;
	font-family: 'Heebo',sans-serif;
	width: 100%;
	margin-bottom: 20px;
	color: var(--font-color);
}

.homepage-category-tanggal {
	color: #fff;
	padding: 5px 15px;
	font-size: 12px;
	margin: 0;
	font-family: 'Heebo',sans-serif;
}

.homepage-category-block {
	width: 100%;
	max-width: 320px;
	float: left;
	margin: 10px;
	background-color: var(--bg-color-dua);
	box-shadow: rgba(0, 0, 0, 0.133) 0px 0.16rem 0.36rem 0px, rgba(0, 0, 0, 0.11) 0px 0.03rem 0.09rem 0px;
	border-radius: 6px;
}

.trending-homepage {
	width: 100%;
	max-width: 320px;
	float: left;
	margin: 10px 5px;
	background-color: var(--bg-color-dua);
	box-shadow: rgba(0, 0, 0, 0.133) 0px 0.16rem 0.36rem 0px, rgba(0, 0, 0, 0.11) 0px 0.03rem 0.09rem 0px;
	border-radius: 6px;
}

.trending-homepage .wpp-list {
	height: 409px;
	overflow: scroll;
	padding-top: 0;
	margin-top: 0;
}

.wpp-notice {
	display: none; 
}

.nocomments {
		display: none; 
}

.terbaru {
	background: transparent;
	width: 100%;
	padding: 0 10px;
	border-left: 7px solid var(--ornament2);
	margin: 10px 0;
	font-weight: 900;
	font-family: 'Heebo', sans-serif;
	box-sizing: border-box;
	color: var(--font-color);
}

.terbaru span {
	text-transform: capitalize;
}

.berita-terkini {
	counter-reset: listCounter;
	background: var(--bg-color-dua);
	height: 409px;
	padding: 0 8px 15px 8px;
	overflow: hidden;
	float: left;
	margin: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.berita-terkini > li {
	flex: 0 0 97px;
	min-height: 0;
	overflow: hidden;
	box-sizing: border-box;
	margin-bottom: 0;
}

/* Content-injection rotation: fixed slots stay in place, only their
   content (image, title, date, link) updates -- this is just a brief
   fade while that swap happens. */
.berita-terkini > li.kibaran-rotate-fade,
.video-box.kibaran-rotate-fade {
	transition: opacity 0.25s ease;
	opacity: 0.15;
}

@media (prefers-reduced-motion: reduce) {
	.berita-terkini > li.kibaran-rotate-fade,
	.video-box.kibaran-rotate-fade {
		transition: none;
		opacity: 1;
	}
}

.berita-terkini li {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 10px;
	border-bottom: 1px solid var(--border-ddd);
	counter-increment: listCounter;
	position: relative;
	padding-left: 5px;
	margin-bottom: 6px;
	padding-bottom: 10px;
}

.berita-terkini li > a:first-child {
	flex: 0 0 85px;
}

.berita-terkini li > a:last-of-type {
	flex: 1 1 auto;
	min-width: 0;
}

.berita-terkini li:first-child {
	margin-top: 0px;
}

.berita-terkini li:first-child::before {
	top: 1px;
}

.berita-terkini li:last-child {
	border-bottom: none;
}

.berita-terkini li a {
	color: var(--font-color);
	line-height: 1.4;
	font-family: 'Heebo', sans-serif;
	font-weight: 500;
}

.judul-berita-terkini {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* "Trending on" reuses the exact same .berita-terkini box/flex layout
   (4 equal areas, fixed height per item) but comes from a different
   rendering mechanism with its own class names -- these make it look
   identical to "Latest in" (same thumbnail + 2-line title clamp),
   just without any rotation JS applied to it. */
.berita-terkini-trending .wpp-thumbnail {
	float: none !important;
	flex-shrink: 0;
	margin: 0 !important;
	border-radius: 6px;
}

.berita-terkini-trending .wpp-post-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--font-color);
	line-height: 1.4;
	font-family: 'Heebo', sans-serif;
	font-weight: 500;
	text-decoration: none;
}

/* The thumbnail stays a fixed 85px column. In "Latest in" the title and
   the date already live inside one <a>, so they stack in a single text
   column; "Trending on" renders them as separate elements, so they are
   wrapped in .trending-text-wrap to reproduce that same two-column
   (thumb + text) layout -- without it the date became a third flex item
   and ended up as a narrow column of its own beside the title. */
.berita-terkini-trending li > a:first-child {
	flex: 0 0 85px;
}

.berita-terkini-trending .trending-text-wrap {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.berita-terkini-trending .trending-text-wrap .tanggal-related-post {
	margin-bottom: 0;
}

.berita-terkini.sidebar-popular-post-latest {
	height: 507.5px; /* 5 x 98.5px + 15px padding, matching "Latest in"'s per-item height for visual consistency */
}

.berita-terkini li a:hover {
	text-decoration: none;
}

.foto-berita-terkini {
	float: none;
	flex-shrink: 0;
	margin: 0;
	border-radius: 6px;
}

.foto-berita-terkini:hover {
	opacity: 0.8;
}

#block1, #block2, #block3 {
	background: #fff;
	float: left;
	width: 320px;
	margin: 10px 0 10px 0;
	box-shadow: rgba(0, 0, 0, 0.133) 0px 0.16rem 0.36rem 0px, rgba(0, 0, 0, 0.11) 0px 0.03rem 0.09rem 0px;
	border-radius: 6px;
	height: 450px;
	overflow: scroll;
}

#sidebar-right {
	overflow: hidden;
}

.pvc-popular-scroll {
	overflow-y: auto;
	margin-bottom: 0 !important;
}

h2.judul-block1, h2.judul-block2, h2.judul-block3 {
	background: #fff;
	width: 100%;
	padding: 0 10px;
	border-left: 7px solid rgb(3, 131, 131);
	margin: 10px 0 0 0;
	font-weight: 700;
	font-size: 16px;
	font-family: 'Heebo', sans-serif;
	box-sizing: border-box;
}

.block1-wrap .wpp-list, .block2-wrap .wpp-list, .block2-wrap .wpp-list {
	height: 395px;
	padding: 10px 8px;
}


.block1-wrap ul.wpp-list li:first-child::before, .block2-wrap ul.wpp-list li:first-child::before, .block3-wrap ul.wpp-list li:first-child::before {
	top: 16px;
}


.block1-wrap .wpp-list li:first-child, .block2-wrap .wpp-list li:first-child, .block3-wrap .wpp-list li:first-child {
	border-top: 1px solid #eee;
	padding-top: 15px;
}


.block1-wrap > div > img, .block2-wrap > div > img, 
.block3-wrap > div > img {
	display: block;
	margin: 0 auto;
	padding: 10px 0;
	box-sizing: border-box;
}

.block1-wrap > div, .block2-wrap > div, 
.block3-wrap > div {
	margin: 10px;
}

.block1-wrap input, .block1-wrap textarea, .block1-wrap select, .block2-wrap input, .block2-wrap textarea, .block2-wrap select, .block3-wrap input, .block3-wrap textarea, .block3-wrap select {
	display: block;
	margin: 10px;
	max-width: 300px;
	width: 100%;
	box-sizing: border-box;
}

.block1-wrap ol li, .block1-wrap ul li, .block2-wrap ol li, .block2-wrap ul li, .block3-wrap ol li, .block3-wrap ul li {
	margin-bottom: 10px;
}

#sidebar-banner-160x600-kanan {
	position: fixed;
	top: 0px;
	margin-top: 70px;
	z-index: 9999;
	right: 49%;
	margin-right: -678px;
}

#sidebar-banner-160x600-kiri {
	position: fixed;
	top: 0px;
	margin-top: 70px;
	z-index: 9999;
	left: 49%;
	margin-left: -678px;
}

.sidebar-banner-160x600-kiri-wrap > div, 
.sidebar-banner-160x600-kiri-wrap img {
	width: 100%;
	max-width: 160px;
	height: auto;
}

.sidebar-banner-160x600-kanan-wrap > div, 
.sidebar-banner-160x600-kanan-wrap img {
	width: 100%;
	max-width: 160px;
	height: auto;
}

#sidebar-banner-bawah-headline {
	margin-top: 25px;
}

#sidebar-banner-bawah-headline, #sidebar-banner-bawah-block1, #sidebar-banner-bawah-tombol-share-post {
	width: 100%;
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	padding: 0 20px;
}

#sidebar-banner-bawah-tombol-share-post {
	margin-top: 20px;
}

.sidebar-banner-bawah-headline-wrap, .sidebar-banner-bawah-block1-wrap, .sidebar-banner-bawah-tombol-share-post-wrap {
	text-align: center;
	box-sizing: border-box;
}

.sidebar-banner-bawah-headline-wrap > div, 
.sidebar-banner-bawah-block1-wrap > div, 
.sidebar-banner-bawah-headline-wrap img, 
.sidebar-banner-bawah-block1-wrap img {
	text-align: center;
	max-width: 1190px;
	box-sizing: border-box;
	margin: 0 auto;
}

.sidebar-banner-bawah-tombol-share-post-wrap > div {
	text-align: center;
	max-width: 320px;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin: 0 auto;
}

.video-block {
	margin-bottom: 40px;
}

.video-wrap {
	width: 100%;
	max-width: 1024px;
	margin: 10px auto 0 auto;
	box-sizing: border-box;
	padding: 0 20px;
}

.video-box {
	width: 100%;
	max-width: 228px;
	border-width: 1px;
	border-style: solid;
	border-color: var(--border-video-box);
	display: inline-block;
	padding: 16px 20px;
	vertical-align: top;
	background: var(--bg-color-dua);
	margin-right: 20px;
	margin-bottom: 10px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

.video-box:last-child {
	margin-right: 0;
}

.video-box a {
	text-decoration: none;
}

.video-box a:hover {
}

.video-box a img {
	width: 100%;
	border-radius: 6px;
	height: auto;
}

.video-box a:hover img {
	opacity: 0.8;
		 -o-transition:.3s;
  	-ms-transition:.3s;
 	 -moz-transition:.3s;
  	-webkit-transition:.3s;
  	transition:.3s;
}

.video-play-icon {
	position: absolute;
	left: 35%;
	top: 15%;
	z-index: 1;
	width: 64px !important;
	height: 64px !important;
}

.video-play-icon-related-post {
	position: absolute;
	right: -104px;
	top: 15px;
	z-index: 1;
	width: 45px !important;
	height: 45px;
	display: none !important;
	opacity: 0;
}

.video-box h3 {
	font-family: 'Heebo', sans-serif;
	font-size: 16px;
	text-align: left;
	font-weight: 500;
	margin-top: 10px;
	color: var(--font-color);
    line-height:15px;font-weight:700;height:30px;
 	overflow: hidden;
    text-overflow: ellipsis;
    /* The number of lines to be displayed */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	width: 180px;
	display: -webkit-box;
}

#page-fullwidth .video-box {
	max-width: 300px;
	margin-left: 12px;
	margin-right: 12px;
}

#page-fullwidth .video-play-icon {
	left: 38%;
	top: 20%;
}

.video-pagination {
	text-align: center;
}

.video-tanggal {
	color: #999;
	padding: 5px 0;
	font-size: 12px;
	margin: 0;
	font-family: 'Heebo',sans-serif;
}

/* Content
--------------------------------------------- */
.wrap {
	width: 100%;
	max-width: 1190px;
	margin: 0 auto;
}

#content-wrap {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 12px 20px 0 20px;
	position: relative;
/*	border: 1px solid red; */
}

#category-wrap {
	display: flex;
	flex-direction: row;
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 12px 20px 0 20px;
/*	border: 1px solid red; */
}


#timeline {
	width: 100%;
	max-width: 550px;
	margin-top: 25px;
/*	border: 1px solid red; */
}

#timeline .judul-timeline-umum {
	margin: 0 0 20px 0;
	text-align: center;
}

.box-umum {
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
	padding-top: 10px;
}

h1.judul-timeline-umum {
	color: var(--font-color);
	font-weight: bold;
	font-size: 40px;
	font-family: 'Heebo', sans-serif;
	margin-bottom: 0;
	text-transform: capitalize;
	margin-top: 0;
}

.logo-timeline {
	float: right;
	margin-right: 20px;
	margin-top: 20px;
}

.logo-timeline img {
	width: 100%;
	height: auto;
	max-width: 120px;
	float: right;
	margin-top: 20px;
	margin-right: 20px;
}

.wrap-kategori-tanggal {
	float: left;
}

.wrap-list-berita {
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-bottom: 20px;
	padding-bottom : 60px;
}

.kategori a {
	background-color: #fff;
	color: #0086E1;
	font-size: 0.9em;
	padding: 5px 10px;
	border-radius: 20px;
	border: 2px solid #0086E1;
	display: inline-block;
	margin-top: 20px;
	margin-bottom: 10px;
	-o-transition:.5s;
  	-ms-transition:.5s;
 	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition:.5s;
}

.kategori a:first-child {
	margin-left: 25px;
}

.kategori a:hover {
	color: #fff;
	background-color: #0086E1;
	text-decoration: none;
}

.foto-list-berita {
	width: 100%;
	margin-bottom: 10px;
	padding: 0 20px;
}

.foto-list-berita img {
	width: 100%;
	height: auto;
}

#timeline .judul-list-berita {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 10px;
	margin-left: 25px;
	margin-right: 25px;
	padding: 0;
}

.judul-list-berita a:hover  {
	text-decoration: underline;
}

.tanggal {
	font-size: 14px;
	color: rgb(118, 118, 118);
	margin-bottom: 20px;
	font-family: 'Heebo', sans-serif;
	font-weight: normal;
	text-transform: capitalize;
}

.eta, .waktu-baca {
	color: rgb(118, 118, 118);
	font-size: 14px;
	font-weight: normal;
	text-transform: capitalize;
}

.tanggal-mobile {
	font-size: 0.8em;
	color: #999;	
	margin-bottom: 20px;
	margin-left: 25px;
	display: none;
}

.tanggal-related-mobile {
	display: none;
}

.excerpt {
	margin-bottom: 20px;
	margin-left: 25px;
	margin-right: 25px;
}

.excerpt p {
	line-height: 1.6;
	color: #404040;
	font-size: 0.9em;
}

.wrap-list-berita iframe {
	width: 100% !important;
	height: auto !important;
	min-height: 300px;
	padding: 0 20px 20px 20px;
}

.wrap-list-berita video { 
	width: 100% !important; 
	height: auto !important; 
	min-height: 290px;
}

#single-social-share-wrap {
	text-align: right;
	margin-right: 20px;
}

#single-social-share-wrap a {
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	padding: 8px;
	box-sizing: border-box;
	text-align: center;
}

#single-social-share-wrap a:hover {
	opacity: 0.8;
}

#single-social-share-wrap a.fb {
	background-color: #3B5998;
}

#single-social-share-wrap a.twitter {
	background-color: #000;
}

#single-social-share-wrap a.whatsapp {
	background-color: #25D366;
}

#single-social-share-wrap a.threads {
	background-color: #000;
}

#single-social-share-wrap a.telegram {
	background-color: #1DA1F2;
}

#single-social-share-wrap a.copas {
	background-color: #00A1B0;
	cursor: pointer;
}

#single-social-share-wrap a img {
	width: 25px;
	height: auto;
	display: block;
	text-align: center;
}

.page-links-kibaran {
	background: var(--bg-banner-mobile-bawah);
	border-radius: 6px;
	padding: 10px 15px;
	margin: 20px 0;
}

.page-links-kibaran > span {
	color: var(--font-404);
}

.page-link-text {
	font-weight: bold;
}

.post-page-numbers {
	border-radius: 100%;
	background: #fff;
	padding: 1px 10px;
	display: inline-block;
	margin-left: 5px;
}

.page-links-kibaran .current {
	background: #009BA9;
	color: #fff;
}

.share-wrap {
	position: relative;
	top: -70px;
	left: 80%;
	width: 120px;
}

.share-button-timeline {
	display: block;
	text-align: right;
	color: #6d6e71;
	background-image: url('images/share.png');
	background-repeat: no-repeat;
	width: 80px;
	cursor: pointer;
	position: absolute;
	top: 0;
}

a.share-button-timeline:hover {
	color: #0288E1;
	text-decoration: none;
}

.share-popup {
	display: none;
	position: absolute;
	left: -100px;
	top: -170px;
	border-radius: 4px;
	width: 150px;
	background-color: #fff;
	box-shadow : 0 3px 8px rgba(0, 0, 0, .3);
	border: 1px solid rgba(0, 0, 0, .15)
}

.share-popup::after {
	content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 80%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.share-popup li a {
	display: block;
	border-radius: 4px;
	padding: 10px 35px;
}

.share-popup .facebook {
	background-image: url('images/facebook-black.png');
	background-repeat: no-repeat;
	background-position: 10% 50%;
}

.share-popup .twitter {
	background-image: url('images/twitter-black.png');
	background-repeat: no-repeat;
	background-position: 10% 50%;
}

.share-popup .google {
	background-image: url('images/google-black.png');
	background-repeat: no-repeat;
	background-position: 10% 50%;
}

.share-popup .whatsapp {
	background-image: url('images/whatsapp-black.png');
	background-repeat: no-repeat;
	background-position: 10% 50%;
}

.share-popup li a:hover {
	color: #0080DF;
	text-decoration: none;
	border-radius: 0;
	background-color: whitesmoke;
}

.next-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.next a, .prev a {
	display: block;
	width: 200px;
	border: 2px solid var(--warnatombol);
	border-radius: 6px;
	padding: 10px;
	text-decoration: none;
	font-weight: bold;
	margin: 10px;
	text-align: center;
	 -o-transition:.4s;
	-ms-transition:.4s;
	-moz-transition:.4s;
	-webkit-transition:.4s;
	transition:.3s;
	background-color: var(--warnatombol);
	color: #fff;
	width: 90%;
}

span.page-numbers {
		display: inline-block;
	border: 2px solid #999;
	border-radius: 6px;
	padding: 10px 15px;
	text-decoration: none;
	font-weight: bold;
	margin: 10px 2px;
	text-align: center;
	 -o-transition:.4s;
	-ms-transition:.4s;
	-moz-transition:.4s;
	-webkit-transition:.4s;
	transition:.3s;
	background-color: #999;
	color: #fff;
}

a.page-numbers {
	display: inline-block;
	border: 2px solid var(--warnatombol);
	border-radius: 6px;
	padding: 10px 15px;
	text-decoration: none;
	font-weight: bold;
	margin: 10px 2px;
	text-align: center;
	 -o-transition:.4s;
	-ms-transition:.4s;
	-moz-transition:.4s;
	-webkit-transition:.4s;
	transition:.3s;
	background-color: var(--warnatombol);
	color: #fff;
}

.next a:hover, .prev a:hover, a.page-numbers:hover {
	background-color: transparent;
	color: var(--warnatombol);
}

/* Page
--------------------------------------------- */
.page #single-wrap {
	max-width: 980px;	
}

.page .single-article {
	max-width: 100%;
}

/* Category
--------------------------------------------- */
.wrap-category {
	width: 100%;
	max-width: 650px;
	float: left;
	margin-right: 13px;
}

.wrap-feed {
	float: left;
	margin-top: 30px;
	width: 100%;
}

.category #sidebar-category, .tag #sidebar-category {
	float: left;
}

.category .terbaru, .author .terbaru{
	font-family: 'Heebo', sans-serif;
	font-weight: 700;
	font-size: 24px;
	padding-left: 7px;
	border-left: 7px solid #DC1641;
	line-height: 1;
	background: transparent;
}

.category .wpp-list, .tag .wpp-list  {
	height: 562px;
	overflow: scroll;
}

.kotak-terbaru {
	background-color: var(--bg-color-dua);
	border: 1px solid var(--border-e6e);
	border-radius: 6px;
}

.kotak-terbaru > a {
	display: flex;
	align-items: flex-start;
	border-bottom: 1px solid var(--border-e6e);
	padding: 15px 0;
	text-decoration: none;
	margin: 0 20px;
}

.kotak-terbaru a img {
	flex-shrink: 0;
	border-radius: 4px;
	margin-left: 15px;
}

.kotak-terbaru > a h2 {
	font-family: 'Heebo', sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	color: var(--font-color);
}

.category h2:hover {

}

.tanggal-category {
	font-size: 14px;
	font-family: 'Heebo', sans-serif;
	color: #767676;
	margin-bottom: 0;
}

.tag #sidebar-single {
	float: left;
}

.tag .box-umum {
	margin-top: 40px;
	margin-bottom: 40px;
}

/** IKLAN **/
.close-button-right {
    position: fixed;
    right: 49%;
    margin-right: -538px;
    width: 20px;
    height: 20px;
    background-image: url('images/close-button.svg');
    background-repeat: no-repeat;
    background-position: 50%;
    background-color: #fff;
    border: 1px solid gray;
    border-radius: 100%;
    z-index: 99999999;
    background-size: 78%;
}

.close-button-left {
    position: fixed;
    left: 49%;
    margin-left: -538px;
    width: 20px;
    height: 20px;
    background-image: url('images/close-button.svg');
    background-repeat: no-repeat;
    background-position: 50%;
    background-color: #fff;
    border: 1px solid gray;
    border-radius: 100%;
    z-index: 99999999;
    background-size: 78%;
}

.parallxads {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    height: 326px;
    position: relative;
    left: 0;
    right: 0;
    margin-bottom: 0;
    background: #222;
}

.parallxads-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    clip: rect(auto,auto,auto,auto);
}

.parallxads-box {
    height: auto;
    position: fixed;
    top: 118px;
    left: 0;
    right: 0;
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    margin: 0 auto;
    width: 100%;
    text-align: center;
    max-width: 664px;
    box-sizing: border-box;
    padding: 0 15px;
}

.parallxads-box > * {
    margin: 0 auto !important;
    display: inline-block;
    max-width: 100%;
}

.parallxads:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 10px;
    z-index: 1;
    background: #038383;
    font-family: Heebo, sans-serif;
    content: var(--textparallax);
}
.parallxads:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 10px;
    z-index: 1;
    background: #038383;
    font-family: Heebo, sans-serif;
    content: var(--textparallaxbawah);
}
.parallxads {margin-bottom:  10px;}
.sidebar-sticky .widget {
    background: #eee;
    padding: 10px;
    margin-bottom: 10px;
}

/* geserkiri/geserkanan visibility is now controlled by JS (.geser-visible class based on scroll position) */


/* RELATED */
.related-item {
    flex: 1 1 0%;
}
.related-item .related-box {
    display: flex;
    flex: 1 1 0%;
    flex-direction: row;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 10px;
    overflow: hidden;
    border-radius: 6px;
    background-color: #eeeeee;
    color: #000000;
    margin: 10px;
}
.related-item .related-content {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
}
.related-item .related-label {
    -webkit-font-smoothing: antialiased;
    color: var(--color3);
    font-family: Heebo, sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.related-item .related-title h3 {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    font-family: Heebo, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}
.related-item .related-title h3 a {
    color: #000000;
    word-break: break-word;
    overflow-wrap: break-word;
    display: block;
}
.related-item .related-image {
    margin-left: 16px;
    width: 80px;
    position: relative;
    border-radius: 6px;
    height: 80px;
    background: #eeeeee;
    overflow: hidden;
}
.related-item .related-image:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #dfdfdf;
    animation: shine 1s infinite;
}
.related-item .related-image:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));
    -webkit-animation: shimmer 2s infinite;
    animation: shimmer 2s infinite;
    content: "";
}
.related-item .related-image a {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    outline: 0px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}
.related-item .related-image img {
 /*   z-index: 2; */
    display: block;
    border-radius: 6px;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: relative;
}
.related-item .related-author {
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 6px;
}
.related-item .related-author img {
    /*margin-right: 6px;*/
    display: flex;
    align-items: flex-end;
    -webkit-box-pack: end;
    justify-content: flex-end;
    border-color: #eeeeee;
    border-style: solid;
    border-width: 1px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 0.1rem;
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: 500;
    border-radius: 50%;
    background: #f6f8fc;
    position: relative;
    text-align: center;
}
.related-item .related-author-name {
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    font-family: Heebo, sans-serif;
    font-size: 12px;
    font-weight: 400;
    word-break: break-all;
    white-space: normal;
    line-height: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #767676;
}
.related-item .icon-verification {
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    margin-left: 6px;
    width: 12px;
    max-width: 12px;
    height: 12px;
    background-image: url("../icon/verified-round.svg");
    background-size: 12px;
    background-repeat: no-repeat;
}
.related-item .dot {
    -webkit-font-smoothing: antialiased;
    color: #767676;
    font-family: Heebo, sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
}
.related-item .timeago {
    -webkit-font-smoothing: antialiased;
    color: #767676;
    font-family: Heebo, sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
}
.related-author .dot:before {
    content: "\00B7";
    margin: 0 4px;
}

.box-content {
	position: relative;
	margin-bottom: 10px;
	padding-bottom: 10px;
	text-align: center;
}

.infeed-banner .pjs-box-content{
	border-width: 0 0 1px;
	border-color: rgba(0,0,0,0.2);
	border-style: solid;
	text-align: center;
}

/* Sidebar Left
--------------------------------------------- */
#sidebar-left {
	width: 100%;
	max-width: 300px;
	margin-right: 20px;
	margin-top: 25px;
}

.sidebar-left-wrap {
	margin-left: 20px;
	margin-bottom: 20px;
	position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 150px;
}

.sidebar-left-wrap > div {
	margin-bottom: 25px;
}

.judul-sidebar-left {
	font-size: 1.2em;
	text-transform: capitalize;
	font-weight: 700;
	color: #000;
	border-left: 5px solid red;
	padding-left: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
	background-color: #fff;
	border-bottom: 1px solid #eee;
}

.wpp-list {
	counter-reset: my-awesome-counter;
	background-color: var(--bg-color-dua);
	margin: 0;
	text-align: left;
	padding: 15px 8px;
}

.wpp-no-data {
	display: none
}

/* width */
::-webkit-scrollbar {
  width: 7px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ddd; 
}

.wpp-list li {
	margin-bottom: 10px;
	counter-increment: my-awesome-counter;
	position: relative;
	padding-left: 5px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-eee);
	min-height: 85px;
	overflow: hidden;
	clear: both;
}

.wpp-list li:last-child {
	border-bottom: none;
}

/* .wpp-list li::before {
	content: counter(my-awesome-counter) ". ";
	color: red;
	font-family: 'Heebo', sans-serif;
	font-weight: bold;
	position: absolute;
	padding: 0 0 0 4px;
	top: 1.9px;
	left: 0;
	border-radius: 20px;
	text-align: center;
} */

.wpp-post-title {
	color: var(--font-color);
	line-height: 1.4;
	font-family: 'Heebo', sans-serif;
	font-weight: 500;
	font-size: 16px;
	
}

.wpp-post-title:hover {
	text-decoration: none;
}

.wpp-date, .wpp-views, .wpp-comments, .wpp-author, .wpp-author a, .wpp-meta, .post-stats, .wpp-date-custom, .wpp-stats-custom {
	font-weight: normal;
	font-family: 'Heebo', sans-serif;
	color: #999;
	margin: 5px 0;
	font-size: 13px;
}

.wpp-excerpt {
	display: block;
	font-size: 0.8em;
}

.wpp-thumbnail {
	float: right !important;
	margin: 0 9px 0 10px;
	border-radius: 6px;
}

.wpp-thumbnail:hover {
	opacity: 0.8;
}

.wpp-stats-custom a {
	display: block;
	font-family: 'Heebo', sans-serif;
	font-weight: normal;
	color: #999;
	margin: 3px 0;
	font-size: 13px;
}

.trending-wrap .wpp-stats-custom a {
	display: inline-block;
}

.wpp-date-custom {
	color: #999;
	margin: 3px 0;
	font-size: 13px;
	font-family: 'Heebo', sans-serif;
}

.totalpembaca {
	font-size: 16px;
	text-align: right;
	margin-right: 20px;
	margin-bottom: 20px;
	color: var(--font-color);
}

/*************************
 SIDEBAR RIGHT and SIDE SINGLE
************************/
#sidebar-right, #sidebar-single, #sidebar-category {
	width: 100%;
	max-width: 320px;
	margin-top: 0;
	border-radius: 6px;
	overflow-wrap: break-word;
}

/* #single-wrap (unlike #content-wrap) has no padding of its own, so
   the sidebar needs its own matching right margin to align with the
   same 20px inset used everywhere else on the site. */
#single-wrap #sidebar-single {
	margin-right: 20px;
	box-sizing: border-box;
}
.sidebar-right-wrap, .sidebar-single-wrap, .sidebar-category-wrap {
	position: relative;
}

.sidebar-single-wrap, .sidebar-category-wrap {
	position: sticky;
	top: 0px;
}

.sidebar-right-wrap > div, .sidebar-single-wrap > div, .sidebar-category-wrap > div {
	margin-bottom: 10px;
	background-color: var(--bg-color-dua);
	padding: 0px 0px 10px 0px;
	box-sizing: border-box;
}

.sidebar-right-wrap > div {
	border: 1px solid var(--border-eee);
	border-radius: 6px;
}

.judul-sidebar-right::before, .judul-sidebar-single::before, .judul-sidebar-category::before {
	content: "";
	position: absolute;
	width: 6px;
	background: var(--ornament1);
	height: 30px;
	left: 0;
}

.judul-sidebar-right, .judul-sidebar-single, .judul-sidebar-category {
	text-transform: capitalize;
	font-family: 'Heebo', sans-serif;
	font-size: 24px;
	font-weight: 900;
	color: var(--font-color);
	padding-left: 10px;
	padding-bottom: 10px;
	background-color: var(--bg-color-dua);
	border-bottom: 1px solid var(--border-eee);
	margin: 0;
	text-align: left;
	box-sizing: border-box;
	width: 100%;
}

#sidebar-right ul, #sidebar-single ul, #sidebar-category ul, #sidebar-right ol, #sidebar-single ol, #sidebar-category ol {
	padding: 10px 0;
	box-sizing: border-box;
}

#sidebar-right ul li a, #sidebar-single ul li a, #sidebar-category ul li a, #sidebar-right ol li a, #sidebar-single ol li a, #sidebar-category ol li a {
	color: var(--font-color);
}

#sidebar-right input[type=text], #sidebar-right textarea, #sidebar-right select, #sidebar-category input[type=text], #sidebar-category textarea, #sidebar-category select, #sidebar-single input[type=text], #sidebar-single textarea, #sidebar-single select {
	margin-top: 15px;
}

#sidebar-right .size-full, #sidebar-single .size-full, #sidebar-category .size-full {
	max-width: 100%;
	height: auto;
}

.first-post img {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}

.secondary-post {
	margin-top: 15px;
	display: flex;
}

.secondary-post > a {
	margin-right: 10px;
	display: inline-block;
}

.text-wrap {
	width: 100%;
	margin-right: 20px;
	padding: 15px;
	background-color: var(--bg-color-dua);
	box-sizing: border-box;
}

.single #sidebar-single .text-wrap {
	padding-left: 0;
}

.video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
#single-wrap iframe.my-youtube-video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.text-wrap .waktu {
	font-size: .8em;
	font-family: 'Heebo', sans-serif;
	color: #999;
	margin-bottom: 0;
}

.text-wrap a:hover {
	text-decoration: none;
	color: rgb(79, 107, 237);
}

/***** SCROLL TO TOP ****/
/* Footer
--------------------------------------------- */
footer {
	width: 100%;
	margin: 20px auto 0 auto;
	background-color: var(--warnabackgroundfooter);
	box-sizing: border-box;
	box-shadow: 0 0 1.2rem 0.4rem rgba(0, 0, 0, 0.05);
}

#footer-wrap {
	background-color: var(--warnabackgroundfooter);
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	padding: 40px 10px;
	box-sizing: border-box;
}

.logo-bawah-wrap, .logo-bawah-wrap-no-filter {
	display: block;
	float: left;
	width: 100%;
	max-width: 350px;
	box-sizing: border-box;
	color: var(--font-color);
}

.logo-bawah-wrap > p {
}

.logo-bawah-wrap-no-filter > p {
}

.logo-bawah-wrap img {
	filter: var(--filter-logo-bawah);
	opacity: 0.5;
	padding-left: 20px;
}

.logo-bawah-wrap-no-filter img {
	padding-left: 20px;
}

.logo-bawah-wrap p {
	padding-left: 20px;
	font-size: 0.7em;
	font-family: 'Heebo', sans-serif;
	margin-left: 10px;
	width: 100%;
	max-width: 250px;
}

.logo-bawah-wrap-no-filter p {
	padding-left: 20px;
	font-size: 0.7em;
	font-family: 'Heebo', sans-serif;
	margin-left: 10px;
	width: 100%;
	max-width: 250px;
}

footer .menu-bawah {
	text-align: center;
	margin-bottom: 10px;
	float: left;
	margin-left: 40px;
	padding: 0;
}

footer ul.menu-bawah li {
	display: block;
}

footer .menu-bawah li a {
	font-size: 12px;
	display: block;
	padding: 4px 10px;
	color: var(--font-color);
	text-align: left;
	font-family: 'Heebo', sans-serif;
}

footer .menu-bawah li a:hover {
	text-decoration: none;
	color: var(--font-000);
}

.menu-footer-2 {
	float: left;
	margin-left: 40px;
	padding: 0;
}

.menu-footer-2 li a {
	font-size: 12px;
	display: block;
	padding: 4px 10px;
	color: var(--font-color);
	text-align: left;
	font-family: 'Heebo', sans-serif;
}

.menu-footer-2 li a:hover {
	text-decoration: none;
	color: var(--font-000);
}

.menu-footer-3 {
	float: left;
	margin-left: 40px;
	padding: 0;
}

.menu-footer-3 li a {
	font-size: 12px;
	display: block;
	padding: 4px 10px;
	color: var(--font-color);
	text-align: left;
	font-family: 'Heebo', sans-serif;
}

.menu-footer-3 li a:hover {
	text-decoration: none;
	color: var(--font-000);
}

.menu-footer-4 {
	float: left;
	margin-left: 40px;
	padding: 0;
}

.menu-footer-4 li a {
	font-size: 12px;
	display: block;
	padding: 4px 10px;
	color: var(--font-color);
	text-align: left;
	font-family: 'Heebo', sans-serif;
}

.menu-footer-4 li a:hover {
	text-decoration: none;
	color: var(--font-000);
}

.copyrights {
	text-align: center;
	font-size: 0.7em;
}

.copyright-mobile-new {
	display: none;
}

#media-sosial-footer {
	/* FIX jarak tepi kiri/kanan tidak rata:
	   Dulu kontainer ini "text-align:center" dan tiap ikon memakai
	   margin-right:15px + aturan :last-child untuk membuang margin ikon
	   terakhir. Begitu jumlah ikon banyak dan ada yang turun ke baris ke-2,
	   ikon "terakhir" secara DOM belum tentu ikon paling kanan yang terlihat,
	   sehingga margin kanan jadi tidak simetris dengan margin kiri.
	   Sekarang pakai flexbox: ikon selalu di tengah, jarak antar-ikon rata
	   lewat "gap", boleh turun baris (wrap) dengan jarak vertikal yang sama,
	   dan diberi padding kiri-kanan 15px supaya jarak ke tepi layar simetris. */
	display: none; /* di-set "flex" pada breakpoint mobile di bawah */
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 10px;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
	/* FIX maksimal 5 ikon per baris:
	   Sebelumnya baris hanya "wrap" jika lebar layar tidak muat, jadi 6-8
	   ikon bisa tetap tampil dalam satu baris di layar yang cukup lebar.
	   Dengan membatasi lebar kontainer supaya pas untuk 5 ikon (35px) +
	   4 gap (15px) + padding kiri-kanan, ikon ke-6 dst pasti turun ke
	   baris baru, dan karena margin kiri-kanan "auto", barisnya tetap
	   presisi di tengah (jarak ke kiri = jarak ke kanan layar). */
	max-width: 265px;
	margin-left: auto;
	margin-right: auto;
}

#media-sosial-footer a {
	display: inline-block;
	/* margin-right per-ikon tidak lagi dipakai -- jarak diatur oleh "gap"
	   pada kontainer flex di atas, jadi selalu rata. */
	margin-right: 0;
}

#media-sosial-footer .fb {
	border: 1px solid var(--iconbackgfooter);
	background-color: var(--iconbackgfooter);
	background-image: url('images/fb.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 35px;
	height: 35px;
	border-radius: 20px;
	background-size: 55%;
	margin-right: 0;
}

#media-sosial-footer .twitter {
	border: 1px solid var(--iconbackgfooter);
	background-color: var(--iconbackgfooter);
	background-image: url('images/twitter-x.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 35px;
	height: 35px;
	border-radius: 20px;
	background-size: 55%;
	margin-right: 0;
}

#media-sosial-footer .instagram {
	border: 1px solid var(--iconbackgfooter);
	background-color: var(--iconbackgfooter);
	background-image: url('images/ig.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 35px;
	height: 35px;
	border-radius: 20px;
	background-size: 55%;
	margin-right: 0;
}

#media-sosial-footer .youtube {
	border: 1px solid var(--iconbackgfooter);
	background-color: var(--iconbackgfooter);
	background-image: url('images/yt.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 35px;
	height: 35px;
	border-radius: 20px;
	background-size: 55%;
	margin-right: 0;
}

#media-sosial-footer .tiktok {
	border: 1px solid var(--iconbackgfooter);
	background-color: var(--iconbackgfooter);
	background-image: url('images/tiktok.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 35px;
	height: 35px;
	border-radius: 20px;
	background-size: 55%;
	margin-right: 0;
}

/* FIX: 3 platform ini sebelumnya tidak punya gaya ikon di footer sama
   sekali (hanya ada di header), padahal sudah didukung penuh oleh
   Customizer -- jadi kalau diisi & tampil (setelah perbaikan footer.php),
   ikonnya akan muncul kosong/tanpa gambar tanpa aturan berikut. */
#media-sosial-footer .threads {
	border: 1px solid var(--iconbackgfooter);
	background-color: var(--iconbackgfooter);
	background-image: url('images/threads.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 35px;
	height: 35px;
	border-radius: 20px;
	background-size: 64%;
	margin-right: 0;
}

#media-sosial-footer .whatsapp {
	border: 1px solid var(--iconbackgfooter);
	background-color: var(--iconbackgfooter);
	background-image: url('images/whatsapp.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 35px;
	height: 35px;
	border-radius: 20px;
	background-size: 62%;
	margin-right: 0;
}

#media-sosial-footer .telegram {
	border: 1px solid var(--iconbackgfooter);
	background-color: var(--iconbackgfooter);
	background-image: url('images/telegram.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 35px;
	height: 35px;
	border-radius: 20px;
	background-size: 62%;
	margin-right: 0;
}

#media-sosial-footer a:hover {
	background-color: transparent;
}

#media-sosial-footer a:last-child {
	margin-right: 0;
}

div.menu-bawah-mobile {
	display: none;
}

ul.menu-bawah-mobile {
	text-align: center;
	padding: 0 30px;
	margin-bottom: 20px;
	display: none;
}

ul.menu-bawah-mobile li {
	display: inline-block;
	margin-right: 4px;
}

ul.menu-bawah-mobile li a {
	display: block;
	font-size: 11px;
	text-align: center;
	color: var(--font-color);
}

ul.menu-bawah-mobile li a:after {
	content: " - ";
}

ul.menu-bawah-mobile li:last-child a:after {
	content: "";
}

#media-sosial {
	text-align: center;	
}

#media-sosial a {
	display: inline-block;
	opacity: 0.5;
}

#media-sosial .fb {
	border: 1px solid #ddd;
	background-color: #ddd;
	background-image: url('images/facebook-black.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 30px;
	height: 30px;
	border-radius: 20px;
}

#media-sosial .twitter {
	border: 1px solid #ddd;
	border: 1px solid #ddd;
	background-color: #ddd;
	background-image: url('images/twitter-black.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 30px;
	height: 30px;
	border-radius: 20px;
}

#media-sosial .instagram {
	border: 1px solid #ddd;
	background-color: #ddd;
	background-image: url('images/instagram-black.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 30px;
	height: 30px;
	border-radius: 20px;
}

#media-sosial a:hover {
	background-color: transparent;
	opacity: 1;
}

/* Single Page
--------------------------------------------- */
#single-wrap {
	display: flex;
	flex-direction: row;
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	background-color: var(--bg-color-dua);
	box-sizing: border-box;
	padding-top: 10px;
}

#single-share-wrap-mobile  {
	display: none;
	position: fixed;
	left: 0;
	bottom: 0;
	background-color: #fff;
	width: 100%;
	z-index: 9999999999999999999;
	text-align: center;
	border-top: 1px solid #ccc;
	transition: bottom 1s;
}

#single-share-wrap-mobile a {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 10px;
	padding: 10px;
	border-radius: 4px;
}

#single-share-wrap-mobile .fb {
	background-color: #3A5A9B;
	background-image: url('images/facebook-white.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

#single-share-wrap-mobile .twitter {
	background-color: #54ABF7;
	background-image: url('images/twitter-white.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

#single-share-wrap-mobile .google {
	background-color: #DD4B39;
	background-image: url('images/google-white.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

#single-share-wrap-mobile .whatsapp {
	background-color: #55CD6C;
	background-image: url('images/whatsapp-white.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.single-article {
	width: 100%;
	max-width: 664px;
	margin-top: 0;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 18px;
	color: #404040;
	line-height: 1.5;
}

.single-article ul {
	list-style-type: disc;
	line-height: 1.5;
	padding-left: 20px;
	margin-top: 20px;
	color: var(--font-color);
}

.single-article dl {
	line-height: 1.5;
	margin-top: 20px;
	color: var(--font-color);
} 

.single-article ol {
	list-style-type: numbers;
	line-height: 1.5;
	padding-left: 20px;
	margin-top: 20px;
	color: var(--font-color);
}

.single-article ol li, .single-article ul li , .single-article dl dt, .single-article dl dd {
	margin-bottom: 20px;
	font-size: 20px;
}

.single-article dl dd {
	padding-left: 20px;
}

.single-article .instagram-media {
	margin-top: 20px !important;
	margin-bottom: 20px;
	margin-left: auto !important;
	margin-right: auto !important;
	min-width: 250px !important;
}

.single-article .twitter-tweet {
	margin-top: 20px !important;
	margin-bottom: 20px;
	margin-left: auto !important;
	margin-right: auto !important;
	min-width: 250px !important;
}

.single-article #facebook {
	margin-top: 20px !important;
	margin-bottom: 20px;
	margin-left: auto !important;
	margin-right: auto !important;
	min-width: 250px !important;
}

.single-article video { 
	width: 100% !important; 
	height: auto !important; 
	min-height: 400px;
}

.single-article h1 {
	font-family: 'Heebo', sans-serif;
	font-size: 34px;
	font-weight: 700;
	margin-bottom: 10px;
	line-height: 1.15;
	color: var(--font-color);
	letter-spacing: -0.4px;
}

.single-article h2 {
	font-family: 'Heebo', sans-serif;
	font-size: 26px;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 1.15;
	color: var(--font-color);
}

.single-article h3 {
	font-size: 24px;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 1.2;
	color: var(--font-color);
}

.single-article h4 {
	font-size: 18px;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 20px;
	line-height: 1.2;
	color: var(--font-color);
}

.single-article h5 {
	font-size: 20px;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 1.2;
	color: var(--font-color);
}

.single-article h6 {
	font-size: 18px;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 1.2;
	color: var(--font-color);
}

.single-article .sub-judul {
	font-size: 1.1em;
	color: #057BC1;
	display: none;
}

blockquote {
	font-style: italic;
	padding-left: 20px;
	border-left: 5px solid #ccc;
	margin: 25px 0;
}

pre {
 white-space: pre-wrap;
  word-wrap: break-word;
  text-align: justify;
	font-family: monospace;
}

cite {
	font-style: italic;
}

code {
	font-family: monospace;
}

hr {
	margin-top: 20px;
	margin-bottom: 20px;
}

u {
	text-decoration: underline;
}

.single-category-header {

}

.single-kategori {
	color: rgb(31, 141, 214);
	font-size: 16px;
	font-weight: 700;
	display: inline-block;
	font-family: 'Heebo', sans-serif;
	text-transform: uppercase;
}

.single-kategori a:first-child {
	color: rgb(31, 141, 214);
}

.single-kategori a:hover {
	text-decoration: none;
}

.single-logo-timeline {
	float: left;
}

.single-logo-timeline img {
	width: 100%;
	height: auto;
	max-width: 170px;
	border-right: 1px solid #ccc;
	margin-right: 20px;
}

.single-post-view-counter {
	font-size: 14px;
	margin-right: 20px;
	margin-bottom: 20px;
	text-align: left;
	color: rgb(153, 153, 153);
	font-family: 'Heebo', sans-serif;
}

.single-post-view-counter span {

}

.single-photo-wrap {
	margin-bottom: 10px;
}

.single-photo-wrap a {
	position: relative;
}

.perbesar {
	display: block;
	position: absolute;
	right: 15px;
	bottom: 20px;
	font-size: 12px;
	color: #fff;
	background: #000;
	opacity: 0.5;
	border-radius: 6px;
	z-index: 1;
	padding: 5px 8px 5px 22px;
	background-image: url('images/search-icon.svg');
	background-repeat: no-repeat;
	background-size: 16%;
	background-position: 10%;
}


.single-article .foto-utama {
	border-radius: 6px;
	width: 100%;
	height: auto;
}

.single-article .wpp-list img {
	width: 85px;
	height: 85px;
}

.caption-photo, figcaption {
	color: #999999;
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 30px;
	text-align: left;
	margin-top: 0;
}

.caption-photo a {
	color: #999999;
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

.single-article-text {
	margin-bottom: 20px;
	overflow-wrap: break-word;
}
.single-article-text p {
	color: var(--font-color);
	margin-top: 25px;
	font-size: 20px;
	line-height: 1.5;
	font-family: 'Heebo', sans-serif;
	font-weight: 400;
}
.single-article-text p:first-child {
	margin-top: 0;
}

.single-article-text p a, .single-article-text ul li a {
	color: rgb(0, 165, 175);
}

.single-article-text p a:hover {
	text-decoration: none;
}

.single-article-text .size-auto, 
.single-article-text .size-full,
.single-article-text .size-large,
.single-article-text .size-medium,
.single-article-text .size-thumbnail {
	margin-top: 20px;
	border-radius: 6px;
}

.single-article-text .size-full, .single-article-text .size-large {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.wp-caption, .alignnone {

}

.single-inline-related {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 20px 0;
	margin: 20px 0;
}

.single-inline-related .single-judul-inline {
	padding: 0;
	margin: 0 0 10px 0;
	font-weight: bold;
}

.single-inline-related a {
	display: block;
	font-size: 18px;
	line-height: 1.5;
	padding-left: 20px;
	padding-bottom: 10px;
	color: #0086E1;
		 -o-transition:.5s;
  	-ms-transition:.5s;
 	 -moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition:.5s;
	font-weight: bold;
}

.single-inline-related a:hover {
	text-decoration: none;
	padding-left: 40px;
	color: #26A7FF;
}

.single-article ul.wpp-list {
	padding-top: 0;
	line-height: 1.1;
}

.single-article .wpp-list li:first-child {
	border-top: 1px solid var(--border-eee);
	padding-top: 20px;
}

#single-related-post-wrap {
	margin-left: 20px;
	margin-right: 20px;
}

#single-related-post-wrap > div {
	margin-bottom: 10px;
	border-bottom: 1px solid var(--border-e6e);
}

#single-related-post-wrap > div:first-child {
	border-top: 1px solid var(--border-e6e);
	padding-top: 10px;
}

#single-related-post-wrap > div:last-child {
	border-bottom: none;
}

#single-related-post-wrap > div > a {
	display: flex;
	align-items: flex-start;
}

#single-related-post-wrap img {
	display: block;
	flex-shrink: 0;
	margin-bottom: 10px;
	margin-left: 15px;
	border-radius: 6px;
}

#single-related-post-wrap a {
	font-weight: 500;
	font-family: 'Heebo', sans-serif;
	position: relative;
}

#single-related-post-wrap a:hover {
	text-decoration: none;
	color: rgb(79, 107, 237);
}

#single-related-post-wrap a h2 {
	font-size: 16px;
	line-height: 1.4;
	font-weight: 500;
	margin-bottom: 0;
	margin-top: 0;
	color: var(--font-color);
}

.single-judul-related-post {
	font-family: 'Heebo', sans-serif;
	font-size: 20px;
	font-weight: 700;
	margin-left: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
	border-left: 5px solid var(--ornament1);
	padding: 0 0 0 5px;
	line-height: 1;
	color: var(--font-color);
}

.related-post-text-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

.tanggal-related-post {
	font-size: 0.8em;
	color: #999;
	margin-top: 5px;
	margin-bottom: 5px;
}

#single-related-post-wrap img {
	width: 100%;
	max-width: 85px;
}

.inline-related-post {
	background-color: #eee;
	padding: 20px;
}

.placeholder {
  background-color: #f6f6f6;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.placeholder img {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 1s linear;
}

.placeholder img.loaded {
  opacity: 1;
}

.img-small {
  /* this is needed so Safari keeps sharp edges */
  transform: scale(1);
}

.writer {
	margin-bottom: 15px;
	position: relative;
}

.writer img.avatar {
	
	width: 100%;
	max-width: 50px;
	height: auto;
	border-radius: 50%;
	display: block;
	margin-right: 10px;
	float: left
}

img.badge-check-author {
	width: 100%;
	max-width: 20px;
	height: auto;
	position: absolute;
	bottom: 0;
	left: 33px;
}

.writer-name {
	display: table-cell;
	vertical-align: middle;
}

.writer a {
	display: block;
	text-transform: capitalize;
	font-weight: bold;
	font-family: 'Heebo', sans-serif;
	color: var(--font-color);
}

.writer span {
	color: #999;
	font-size: 16px;
	font-family: 'Heebo', sans-serif;
}

.author .wrap-author {
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
}

.author .writer {
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
	margin-top: 30px;
	background-color: var(--bg-color);
	padding-top: 50px;
	padding-bottom: 30px;
	margin-top: 100px;
	border: 1px solid var(--border-eee);
}

.author .writer-name {
	display: block;
	text-align: center;
	font-weight: bold;
	font-size: 22px;
	color: var(--font-color);
}

.author .writer a {
	text-align: center;
}

.author .writer img.badge-check {
	width: 100%;
	max-width: 25px;
	height: auto;
	position: absolute;
	left: 350px;
	top: -10%;
}

.author .writer img.avatar {
	width: 100%;
	max-width: 85px;
	height: auto;
	border-radius: 50%;
	display: block;
	margin: 0 auto;
	border: 1px solid #ccc;
	float: none;
	margin-bottom: 20px;
	position: absolute;
	margin-top: -100px;
	right: 43%;
	border: 5px solid #fff;
}

.author .jumlahtulisan {
	text-align: center;
	color: #999;
	font-size: 16px;
	font-family: 'Heebo', sans-serif;
	
}

.author .kotak-terbaru {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.author .writer span {
	display: block;
}

.tagname {
	padding: 10px 0;
	margin-bottom: 20px;
}

.tagname a {
	display: inline-block;
	padding: 4px 8px;
	color: rgb(31, 141, 214);
	border-radius: 6px;
	border: 1px solid rgb(31, 141, 214);
	font-weight: 700;
	font-family: 'Heebo', sans-serif;
	font-size: 14px;
	line-height: 1.8;
	background-color: var(--bg-color-dua);
	text-transform: capitalize;
	text-decoration: none;
	margin-right: 2px;
	margin-bottom: 6px;
	
}

.tagname a:hover {
	background-color: rgb(31, 141, 214);
	color: #fff;
	text-decoration: none;
}

.komentar-fb {
	margin: 20px 0;
	width: 100% !important;
	max-width: 800px !important;
}

/* Trending Page
--------------------------------------------- */
#page-fullwidth {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
}

#page-fullwidth h1 {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 40px;
	color: var(--font-color);
}

.trending-wrap {
	width: 100%;
	max-width: 640px;
	background-color: #fff;
	margin: 0 auto;
	overflow: hidden;
	box-shadow: rgba(0, 0, 0, 0.133) 0px 0.16rem 0.36rem 0px, rgba(0, 0, 0, 0.11) 0px 0.03rem 0.09rem 0px;
	margin-bottom: 20px;
}

.trending-wrap .wpp-list {
	height: auto;
	overflow: hidden;
}

.trending-wrap .wrapper {
	background: var(--bg-color-dua);
}

ul.tabs {
	font-family: 'Heebo', sans-serif;
	background: var(--bg-f7f);
	overflow: auto;
  	white-space: nowrap;
	-ms-overflow-style: none;  /* IE and Edge */
}

ul.tabs::-webkit-scrollbar {
	width: 1px; 
	height: 8px;
}

ul.tabs {
  	scrollbar-width: thin;
}
	
li.tab-link {
  	list-style: none;
  	cursor: pointer;
  	border-bottom: solid 5px rgba(255, 255, 255, 0);
	display: inline-block;
	padding: 10px 12px;
	text-transform: capitalize;
	color: #999;
	font-size: 14px;
		font-weight: bold;
	transition: 0.25s background ease;
}

li.tab-link.active {
  border-color: #DC1641;
	font-weight: bold;
	color: var(--font-000);
	border-left: 1px solid var(--border-samar);
	border-right: 1px solid var(--border-samar);
}

div.tab-content {
  display: none;
  opacity: 0;
  transform: translateY(15px);
  animation: fadeIn 0.5s ease 1 forwards;
}

div.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Widget
--------------------------------------------- */
.tagcloud {
	margin: 10px;
}

.tagcloud a {
	color: var(--font-color);
}

.foto-samping-kecil {
	width: 85px;
	height: 85px;
}

.code-block {
	background-color: #eee;
	margin-top: 15px !important;
}

.textwidget, .custom-html-widget {
	padding: 10px 0;
	color: var(--font-color);
}

#ez-toc-container {
	margin-top: 1em;
	background-color: var(--bg-color-dua);
}

#ez-toc-container a {
	color: var(--font-000) !important;
}

#ez-toc-container a.ez-toc-toggle {
	color: #444 !important;
}

.fb-page {
	z-index: 0;
}

#myTopnav {
	z-index: 99999999999999;
}

.pswp__bg {
	background: rgba(0,0,0,0.8) !important;
}

.ctaText, .postTitle {
	color: var(--font-color) !important;
	text-decoration: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Search
--------------------------------------------- */
body.search {
	background-color: var(--bg-f7f);
}

.hasil-pencarian {
	width: 100%;
	max-width: 638px;
	margin: 0 auto;
}

.judul-hasil-pencarian {
	text-transform: capitalize;
}

p.menemukan {
	text-align: center;
	font-family: 'Heebo', sans-serif;
	margin-bottom: 20px;
	color: var(--font-color);
}

.author .kotak-pencarian {
	background: transparent;
	border: none;
}

.kotak-pencarian {
	background: var(--bg-color);
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	border: 1px solid var(--border-e6e);
	border-radius: 6px;
}

.kotak-pencarian > a {
	/* FIX posisi gambar tidak sesuai:
	   Sebelumnya wrapper teks judul/tanggal adalah block biasa (bukan
	   float), diletakkan sebelum <img> yang float:right. Karena float
	   tidak memengaruhi elemen sebelumnya dalam urutan dokumen, wrapper
	   teks selalu melebar 100% lebih dulu, lalu gambar baru "jatuh" ke
	   bawahnya -- akibatnya thumbnail tampil di bawah/terpisah dari judul,
	   bukan sejajar di sampingnya. Sekarang pakai flexbox supaya teks dan
	   gambar selalu sejajar dalam satu baris. */
	display: flex;
	align-items: flex-start;
	gap: 15px;
	border-bottom: 1px solid var(--border-e6e);
	padding: 10px 15px;
	text-decoration: none;
}

.kotak-pencarian > a h2 {
	font-family: 'Heebo',sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	color: var(--font-color);
}

.kotak-pencarian a img {
	flex: 0 0 85px;
	width: 85px;
	height: 85px;
	object-fit: cover;
	border-radius: 4px;
	margin-left: 0;
}

/* calendar widget */
#calendar_wrap {
	margin: 10px;
}
.widget_calendar{float:left}#wp-calendar{width:100%}#wp-calendar caption{text-align:right;color:var(--font-333);font-size:14px;margin-top:10px;margin-bottom:15px}#wp-calendar thead{font-size:10px}#wp-calendar thead th{padding:5px; font-size: 14px;color:var(--font-333) }#wp-calendar tbody{color:#aaa}#wp-calendar tbody td{background:var(--bg-f5f); border:2px solid #fff; text-align: center; padding: 5px; } #wp-calendar tbody td a {color: var(--font-color);} border:1px solid #fff;text-align:center; padding:8px; #wp-calendar tbody td:hover{background:#fff}#wp-calendar tbody .pad{background:0 0}#wp-calendar tfoot #next{font-size:10px;text-transform:uppercase;text-align:right}#wp-calendar tfoot #prev{font-size:10px;text-transform:uppercase;padding-top:10px} .wp-calendar-nav-prev a { font-size: 14px; color:var(--font-333) } #calendar_wrap nav {margin-top: 15px;}

input[type=text], textarea, select, input[type=email], input[type=url], input[type=number], input[type=date], input[type=tel], input[type=file] {
	border: 1px solid #ccc;
	width: 100%;
	padding: 10px 15px;
	margin-top: 5px;
	margin-bottom: 15px;
	border-radius: 3px;
	font-size: 1em;
}

input[type=submit] {
	border: 1px solid #ccc;
	padding: 10px 15px;
	margin-top: 5px;
	margin-bottom: 15px;
	border-radius: 3px;
	font-size: 1em;
}

label {
	display: block;
	width: 100%;
}

input[type=button], input[type=submit], input[type=reset] {
	background-color: var(--warnatombol);
	color: #fff;
	font-weight: bold;
	border: 1px solid var(--warnatombol);
	 -o-transition:.5s;
  	-ms-transition:.5s;
 	 -moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition:.5s;
}

input[type=button]:hover, input[type=reset]:hover {
	color: var(--warnatombol);
	background-color: #fff;
}

/*input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
	color: #009BA9;
	background-color: #fff;
}*/

.recent-post-widget {
	border-bottom: 1px solid var(--border-eee);
	padding-bottom: 15px;
	margin-bottom: 15px;
	text-align: left;
}

.recent-post-widget:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.recent-post-widget img {
	float: right;
	margin-left: 12px;
	border-radius: 6px;
}

.recent-post-widget a {
	font-family: 'Heebo', sans-serif;
	font-size: 1em;
	font-weight: 500;
	color: var(--font-color);
}

/************************
 SWITCH COLOR 
************************/
:root {
	--themecolor: #009BA9;
	--ornament1: #D13438;
	--ornament2: #12A7B5;
	--iconbackgfooter:  #ddd;
  --textparallax: "Advertisement";
  --warnascrolltop: #009BA9;
  --warnatombol: #009BA9;
  --textparallaxbawah: "Scroll to continue reading";
  --warnaheader: #fff;
  --sidemenubackg: #fff;
  --iconbackg:  #ddd;
  --menuutama1: #424242;
  --font-color: #424242;
  --font-color-black: #000;
  --listmenu: #D13438;
	--font-333: #333;
	--font-000: #000;
	--font-404: #404040;
	--font-424: #424242;
  --bg-color: #fff;
	--bg-color-dua : #fff;
	--bg-color-tiga: #000;
	--bg-color-footer: #EDEBE9;
	--warnabackgroundfooter: #EDEBE9;
	--bg-banner-mobile-bawah: #EEEEEE;
	--warnabackgroundbody: #F7F7F7;
	--bg-f7f: #F7F7F7;
	--bg-f5f: #f5f5f5;
  --heading-color: #292922;
	--svg: invert(0%) sepia(0%) saturate(0%) hue-rotate(43deg) brightness(0%) contrast(0%);
	--filter-none: none;
	--display: block;
	--border-video-box : rgb(238, 238, 238); 
	--border-samar : #ccc;
	--border-eee : #eee;
	--border-ddd : #ddd;
	--border-e6e : #e6e6e6;
	--filter-png : none;
	--font-color-marquee : #515151;
	--filter-logo-bawah : grayscale(100%);
}

[data-theme=dark] {
	--warnaheader: #0C0D0D;
	--iconbackgfooter:  #ddd;
  	--font-color: #DAD9D8;
  	--font-color-black: #000;
  	--iconbackg:  #ddd;
	--font-333: #DAD9D8;
	--font-000: #fff;
	--font-404: #fff;
	--font-424: #fff;
  	--bg-color: #181A1B;
	--bg-color-dua : #0C0D0D;
	--bg-color-tiga: #DAD9D8;
	--bg-color-footer: #181A1B;
	--warnabackgroundfooter: #181A1B;
	--bg-banner-mobile-bawah: #181A1B;
	--warnabackgroundbody: #0C0D0D;
	--bg-f7f: #0C0D0D;
  	--heading-color: #818cab;
	--svg: invert(100%) sepia(0%) saturate(0%) hue-rotate(43deg) brightness(114%) contrast(100%);
	--filter-none: invert(100%) sepia(0%) saturate(0%) hue-rotate(43deg) brightness(114%) contrast(100%);
	--display: none;
	--border-video-box : #181A1B;
	--border-samar : #242525;
	--border-eee : #242525;
	--border-ddd : #242525;
	--border-e6e : #242525;
	--bg-f5f: #242525;
	--filter-png: brightness(0) invert(1);
	--font-color-marquee : #ffffff;
	--filter-logo-bawah : grayscale(0%);
}

[data-theme=dark] .comment-reply-title, .comments_title {color: #404040;}
[data-theme=dark] .single-kategori {color: #fff;}

/** CUSTOM LOGIN PAGE **/
body.page-template-page-custom-login {
	background: var(--bg-color);
}

.page-template-page-custom-login #sidebar-header, .page-template-page-custom-login .marquee {
	display: none !important;
}

.custom-login {
	width: 100%;
	max-width: 1115px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10%;
}

.custom-login h1 {
	text-align: center;
	margin: 15px;
	font-family: 'Heebo', sans-serif;
	font-weight: bold;
	color: var(--font-000);
}

.login-desc {
	text-align: center;
	color: var(--font-000);
	font-family: 'Heebo', sans-serif;
	font-size: 14px;
}

p.login-msg {
	display: block;
	text-align: center;
	color: red;
	margin: 15px auto;
	font-family: 'Heebo', sans-serif;
	font-size: 14px;
}

.login-msg-success {
	color: green;
}

.login-username, .login-password {
	display: block;
	width: 100%;
	margin: 0 20px;
}

.login-username label, .login-password label {
	display: block;
	margin: 15px;
	text-align: center;
	display: none;
}

.login-username input, .login-password input {
	display: block;
	margin: 15px auto;
	text-align: left;
	padding: 10px;
	max-width: 400px;
	width: 100%;
	border: 1px solid #ccc;
	font-size: 18px;
	background: #fff;
	font-family: 'Heebo', sans-serif;
	box-sizing: border-box;
}

.login-username input:focus, .login-password input:focus {
	outline: none !important;
}

.login-username input:-webkit-autofill,
.login-username input:-webkit-autofill:hover, 
.login-username input:-webkit-autofill:focus, 
.login-username input:-webkit-autofill:active,
.login-password input:-webkit-autofill,
.login-password input:-webkit-autofill:hover, 
.login-password input:-webkit-autofill:focus, 
.login-password input:-webkit-autofill:active
{
 -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.login-remember, .login-submit {
	display: block;
	width: 100%;
	max-width: 400px;
	margin: 15px auto;
}

.login-remember label {
	display: block;
	width: 100%;
	max-width: 400px;
	margin: 0 20px;
	color: var(--font-000);
}

.login-remember input {
	border: none;
}

.login-submit {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
}

.login-submit input {
	background-color: #04A4A4;
	color: #fff;
	padding: 10px 5px;
	border: none;
	width: 100%;
	max-width: 400px;
	font-family: 'Heebo', sans-serif;
	font-weight: bold;
	  transition: 0.3s;
	cursor: pointer;
	margin: 0 20px;
}

.login-submit input:hover {
	background: #037373;
	color: #fff;
}

/** CUSTOM HOME PAGE **/
.block-newsfeed {
	width: 100%;
	max-width: 1024px;
	margin: 20px auto 0 auto;
	/* border: 1px solid red; */
}

.judul-block-newsfeed {
	font-family: 'Heebo', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 0.8;
	padding: 5px;
	border-left: 7px solid var(--ornament1);
	margin: 10px 20px;
	box-sizing: border-box;
	color: var(--font-color);
}

.block-newsfeed-wrap {
	width: 100%;
	max-width: 650px;
/*	border: 1px solid black; */
	background: var(--bg-color-dua);
	padding: 20px 20px 10px 20px;
	margin: 0 20px;
	border-radius: 6px;
	float: left;
}

.block-newsfeed-wrap .next-wrap {
	margin-bottom: 0;
}

.block-newsfeed-wrap a {
	text-decoration: none;
}

.newsfeed-wrap {
	width: 100%;
	max-width: 650px;
/*	border: 1px solid black; */
	margin-bottom: 20px;
}

.newsfeed-wrap h2 {
	font-family: 'Heebo', sans-serif;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.3;
	color: var(--font-color);
	margin: 10px 0;
}

p.foto-newsfeed-wrap {
	overflow: hidden;
	float: left;
	margin-right: 20px;
	border-radius: 6px;
}

.foto-newsfeed {
	display: block;
	border-radius: 6px;
	transition: 0.4s ease;
}

.foto-custom-homepage-mobile {
	display: none;
}

.foto-newsfeed:hover {
	transform: scale(1.1);
}

.newsfeed-category {
	font-size: 14px;
	color: red;
	font-weight: bold;
	font-family: 'Heebo', sans-serif;
}

.newsfeed-tanggal {
	color: #7e7e7e;
	font-size: 12px;
	font-family: 'Heebo', sans-serif;
	margin: 5px 0;
}

/** SIDEBAR CUSTOM HOMEPAGE **/

#sidebar-custom-homepage {
	float: left;
	width: 100%;
	max-width: 320px;
	margin-top: 0;
	border-radius: 6px;
	overflow-wrap: break-word;
}

.sidebar-custom-homepage-wrap {
	position: relative;
}

#sidebar-custom-homepage .text-wrap {
	background: var(--bg-color-dua);
}

.sidebar-custom-homepage-wrap > div {
	margin-bottom: 10px;
	background-color: var(--bg-color-dua);
	padding: 10px 8px;
	box-sizing: border-box;
}

.judul-sidebar-custom-homepage::before {
	content: "";
	position: absolute;
	width: 6px;
	background: var(--ornament1);
	height: 30px;
	left: 0;
}

.judul-sidebar-custom-homepage {
	text-transform: capitalize;
	font-family: 'Heebo', sans-serif;
	font-size: 24px;
	font-weight: 900;
	color: var(--font-color);
	padding-left: 5px;
	padding-bottom: 10px;
	background-color: var(--bg-color-dua);
	border-bottom: 1px solid var(--border-eee);
	margin: 0;
	text-align: left;
	box-sizing: border-box;
	width: 100%;
}

body.ogio-preview {
	display: none !important;
}

/*************************
MEDIA SCREEN
************************/
@media screen and (max-width: 1380px) {
	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 1340px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	#sidebar-banner-160x600-kanan {
		right: 51.5%;
		margin-top: 20px;
	}
	
	#sidebar-banner-160x600-kiri {
		left: 51.5%;
		margin-top: 20px;
	}
}

@media screen and (max-width: 1107px) {
	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 1067px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	#sidebar-banner-160x600-kiri, #sidebar-banner-160x600-kanan {
		display: none;
	}
	.menu-utama {
		overflow-x: scroll;
	}
}


@media screen and (max-width: 1079px) {
	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 1039px;
		box-sizing: border-box;
		margin: 0 auto;
	}
}

@media screen and (max-width: 1052px) {
	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 1012px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	#sidebar-right {
		width: 32%;
	}
	.video-box{
		width: 23%;
	}
	#page-fullwidth .video-box {
		width: 100%;
	}
}

@media screen and (max-width: 1051px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 1011px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	.category .wrap-category {
		width: 65%;
	}
	.category .slide-medium {
		width: 49.3%;
	}
}

@media screen and (max-width: 1042px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 1002px;
		box-sizing: border-box;
		margin: 0 auto;
	}

	#sidebar-right {
		width: 31%;
	}
	.trending-homepage {
		width: 31%;
	}
}

@media screen and (max-width: 1029px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 989px;
		box-sizing: border-box;
		margin: 0 auto;
	}

	#sidebar-right {
		width: 32%;
		float:  right;
	}
	.trending-homepage {
		width: 30%;
	}
	.tag .wrap-category {
		width: 64%;
	}
}
  
@media screen and (max-width: 1017px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 977px;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.trending-homepage {
		width: 29%;
	}
	.video-box {
		width: 30%;
	}
}

@media screen and (max-width: 1012px) {
	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 972px;
		box-sizing: border-box;
		margin: 0 auto;
	}

	#sidebar-right {
		width: 28%;
	}
	header #searchform {
		width: 52%;
	}
}

@media screen and (max-width: 1009px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 969px;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.block-newsfeed-wrap {
		width: 60%;
	}
}

@media screen and (max-width: 1000px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 960px;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.homepage-category-block {
		width: 32%;
	}
	header #searchform {
		width: 50%;
	}
}

@media screen and (max-width: 999px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 959px;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.category .wrap-category {
		width : 64%;
	}
}

@media screen and (max-width: 989px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 949px;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.home .demo {
		width: 71%;
	}
	.home .demo li .slide-medium {
		width: 49.5%;
	} 
}

@media screen and (max-width: 981px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 941px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.homepage-category-block {
		width: 30%;
	}

}

@media screen and (max-width: 971px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 931px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.category .wrap-category {
		width: 63%;
	}

}

@media screen and (max-width: 972px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 932px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	header #searchform {
		width: 50%;
	}

}

@media screen and (max-width: 970px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 930px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.wpp-list, .trending-homepage .wpp-list {
		overflow-x: hidden;
	}
	
	.tag .wrap-category {
		width: 60%;
	}
	
	.video-box {
		width: 22%;
	}
	
	#page-fullwidth .video-box {
		width: 30%;
	}
	

}

@media screen and (max-width: 967px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 927px;
		box-sizing: border-box;
		margin: 0 auto;
	}

	header #searchform {
		width: 47%;
	}
}



@media screen and (max-width: 956px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 916px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.logo-bawah-wrap, .logo-bawah-wrap-no-filter {
		width: 30%;
	}
	
	.page-template-page-home .demo {
		width: 70%;
	}
	
	.page-template-page-home .demo li .slide-medium {
		width: 49.5%;
	} 

}

@media screen and (max-width: 947px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 907px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.tag .related-post-text-wrap {
		width: 75%;
	}

}


@media screen and (max-width: 946px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 906px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.category .wrap-category {
		width: 60%;
	}
	
	.category .related-post-text-wrap {
		width: 75%;
	}

}

@media screen and (max-width: 939px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 889px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.category .wrap-category {
		width: 55%;
	}
	
	.category .related-post-text-wrap {
		width: 70%;
	}

}

@media screen and (max-width: 934px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 894px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.homepage-category-block {
		width: 29%;
	}
	
	.video-play-icon {
		width: 25% !important;
		top: 10%;
	}

}

@media screen and (max-width: 928px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 888px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.related-post-text-wrap {
		width: 70%;
	}

}

@media screen and (max-width: 923px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 883px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.home .demo {
		width: 66%;
	}
	
	#sidebar-right {
		width: 32%;
		float: right;
	}
	
	.page-template-page-home .demo {
		width: 65%;
	}
}

@media screen and (max-width: 914px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 874px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	header #searchform {
		width: 45%;
	}

	.parallxads-box {
	 	max-width: 552px;
	 }

}

@media screen and (max-width: 911px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 871px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.block-kibaran a.homepage-category-headline {
		width: 32%;
		background-position: 50% 100%;
	}
}

@media screen and (max-width: 904px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 864px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.single .related-post-text-wrap {
		width: 75%;
	}

}

@media screen and (max-width: 899px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 859px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.single .related-post-text-wrap {
		width: 75%;
	}
		.block-newsfeed-wrap{
		width: 58%;
	}
	
	p.foto-newsfeed-wrap {
		width: 45%;
	}
}

@media screen and (max-width: 881px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 841px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
		header #searchform {
		width: 43%;
	}

}

@media screen and (max-width: 880px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 840px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.tag .wrap-category {
		width: 55%;
	}

}

@media screen and (max-width: 879px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 839px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.category .wrap-category {
		width: 55%;
	}

}

@media screen and (max-width: 876px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 836px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	a.homepage-category-headline {
		width: 31%;
	}

}

@media screen and (max-width: 857px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 817px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	p.foto-newsfeed-wrap {
		width: 35%;
	}
	
	.block-newsfeed-wrap {
		width: 55%;
	}

	.parallxads-box {
	 	max-width: 780px;
	 }

/*	 #sidebar-single {
	 	display: none;
	 }  */

	.single-article {
    	max-width: 780px;
	}

}

@media screen and (max-width: 850px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 810px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.tag .related-post-text-wrap {
		width: 70%;
	}
}

@media screen and (max-width: 854px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 816px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	header #searchform {
		width: 42%;
	}
	
	a.homepage-category-headline {
		width: 30%;
	}
	
	.homepage-category-block, .trending-homepage {
		width: 31%;
	}
	
	.home .demo {
		width: 60%;
	}
	
	#sidebar-right {
		width: 38%;
	}
	
	.page-template-page-home .demo {
		width: 60%;
	}

}

@media screen and (max-width: 836px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 796px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.single-kategori, .tanggal, .eta {
		font-size: 11.5px;
		word-spacing: -1px;
	}
	
	header #searchform {
		width: 40%;
	}

}

@media screen and (max-width: 826px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 786px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	#sidebar-right {
		float:  right;
	}
	
	footer .menu-bawah, .menu-footer-2, .menu-footer-3, .menu-footer-4 {
		margin-left: 15px;
	}
	
	.single .related-post-text-wrap {
		width: 65%;
	}
	
	.video-box {
		width: 22.5%;
	}

	.parallxads-box {
	 	max-width: 773px;
	 }

}

@media screen and (max-width: 819px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 779px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	#sidebar-right {
		float:  right;
	}
	
	#page-fullwidth .video-box {
		width: 29%;
	}
}

@media screen and (max-width: 810px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 770px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.single .related-post-text-wrap {
		width: 75%;
	}

}

@media screen and (max-width: 799px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 759px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.block-newsfeed-wrap {
		width: 52%;
	}
	header #searchform {
		width: 38%;
	}

}

@media screen and (max-width: 798px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 758px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.single .related-post-text-wrap {
		width: 74%;
	}

}

@media screen and (max-width: 784px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 744px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.single .related-post-text-wrap {
		width: 73%;
	}
	
	header #searchform {
		width: 36%;
	}

}

@media screen and (max-width: 786px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 746px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.category .wrap-category {
		width: 50%;
	}
	
	.category .related-post-text-wrap {
		width: 60%;
	}
	
	.tag .wrap-category {
		width: 50%;
	}
	
	.tag .related-post-text-wrap {
		width: 65%;
	}

}


@media screen and (max-width: 779px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 739px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	header #searchform {
		width: 35%;
	}

}

@media screen and (max-width: 769px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 729px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.single .related-post-text-wrap {
		width: 72%;
	}

}

@media screen and (max-width: 767px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 727px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.video-box {
		width: 22%;
		top: 6%;
	}
	
}

@media screen and (max-width: 757px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 717px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.single .related-post-text-wrap {
		width: 71%;
	}

}

@media screen and (max-width: 750px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 710px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	body, body.home, body.category, body.page-template-page-trending, body.single, #single-wrap, .text-wrap, body.page-template-page-home  {
		margin: 0;
		background-color: var(--bg-color-dua);
	}
	.copyright-mobile-new {
	    display: block;
	    font-size: 0.7em;
	    font-family: 'Heebo', sans-serif;
	    width: 100%;
	    max-width: 250px;
	    text-align: center;
	    margin: 0 auto;
	    color: var(--font-color);
	    padding-bottom: 20px;
	    line-height: 1.7;
	}
	.logo-bawah-wrap-no-filter p {
	    padding: 0;
	    margin: 0 auto;
	    display: none;
	}
	.wrap-homepage {
	    padding: 0 0 20px 0;
	}

	.hamburger-button {
		display: block;
	}
	
	.indozone-text h2 {
	    font-size: 20px;
	}

	.containerdua {
		display: none;
	}
	
	header #searchform {
		display: none;
		position: absolute;
		top: 115px;
		width: 100%;
		box-sizing: border-box;
		background: var(--warnaheader);
		padding: 12px 20px;
		box-shadow: rgb(0 0 0 / 13%) 0px 0.16rem 0.36rem 0px, rgb(0 0 0 / 11%) 0px 0.03rem 0.09rem 0px;
		z-index: 5;
	}
	
	#logo {
		float: none;
		text-align: center;
		margin: 0 auto;
		padding-top: 8px;
	}
	
	#logo img {
		width: 100%;
		max-width: 208px;
		padding-top: 8px;
	}
	
	#media-sosial-header {
		display: none;
	}
	
	#search-mobile-button {
		display: block;
		float: none;
		position: absolute;
		top: 20px;
		right: 5px;
	}
	
	header #searchform input[type="text"] {
		border-radius: 0;
		width: 100%;
		background: #f5f5f5;
		border: none;
		box-shadow: rgb(0 0 0 / 13%) 0px 0.16rem 0.36rem 0px, rgb(0 0 0 / 11%) 0px 0.03rem 0.09rem 0px;
		color: #000;
	}
	
	header {
		box-shadow: none;
	}
	
	/* Same idea on mobile: #content-wrap switches to a plain 20px side
	   padding here, so the ticker matches it instead of guessing with
	   `width: 90%` plus a 20px left margin. */
	.marquee {
		width: 100%;
		margin-left: auto;
		padding: 7px 20px;
		margin-top: 0px;
	}
	
	.marquee-bar {
		gap: 9px;
	}
	
	.marquee-label {
		font-size: 10px;
		padding: 6px 9px;
		gap: 6px;
	}
	
	.marquee-live {
		width: 5px;
		height: 5px;
	}
	
	.marquee-viewport {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
		        mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
	}
	
	.marquee-set a {
		font-size: 12px;
		margin-right: 10px;
	}
	
	.marquee-sep {
		width: 4px;
		height: 4px;
		margin-right: 10px;
	}
	
	
	.fixed-wrap {
		padding: 0;
	}
	
	.single-article-text p, .single-article-text ol, .single-article-text ul, .single-article-text {
		font-size: 16px;
		margin-top: 15px;
		color: var(--font-000);
	}
	
	.totalpembaca {
		font-size: 14px;
	}
	
	.menu-utama {
		display: block;
		position: relative;
		border-bottom: 1px solid var(--border-samar);
		border-top: 1px solid var(--border-samar);
		-ms-overflow-style: none;  /* IE and Edge */
  		scrollbar-width: none;  /* Firefox */
	}
	
	.menu-utama::-webkit-scrollbar {
		display: none;
	}

	
	.menu-utama li:first-child {
		margin-left: 20px;
	}
	
	.menu-utama li:last-child {
		margin-right: 15px;
	}
	
	.menu-utama li {
		border-bottom: none;
	}
	
	.menu-utama li a {
		font-size: 14px;
		padding: 10px 5px;
		color: var(--menuutama1);
	}
	
	.menu-utama .current-menu-item {
		border-bottom: none; }
	::placeholder {
  		color: #000;
		opacity: 1; /* Firefox */
	}
	
	.menu-utama > li.menu-item-has-children > a:after {
		top: 8px;
		right: -9px;
	}
	

	
	.menu-utama ul.sub-menu {
		position: fixed;
		min-width: 100%;
		height: 100%;
		min-height: 100%;
		left: 0;
		display: none;
		text-align: center;
		background: var(--bg-color);
		padding: 0 20px;
		box-sizing: border-box;
	}
	
	ul.sub-menu:before {
		display: none;
	}
	
	.menu-utama ul.sub-menu > li {
		display: inline-block;
		margin: 0 5px;
		float: left;
		width: 46%;
	}
	
	.menu-utama ul.sub-menu > li > a {
		padding: 10px 20px;
		font-size: 14px;
		text-align: center;
		border-radius: 4px;
		background: var(--bg-color-dua);
		color: var(--font-color);
		border: 1px solid #ccc;
		margin-top: 10px;
	    overflow: hidden;
	    text-overflow: ellipsis;
    	white-space: nowrap;
	}
	
	.mobile-menu-kiri ul.sub-menu {
		display: block;
		box-shadow: none;
		background: var(--bg-color);
		position: relative;
	}
	
	.mobile-menu-kiri ul.sub-menu > li > a {
		padding: 10px 20px;
		font-size: 14px;
		font-weight: normal;
		color: var(--font-color);
	}
	
	.mobile-menu-kiri-wrap .kbn-mobile-menu-scroll:after, .mobile-menu-kiri-wrap .kbn-mobile-menu-scroll:before {
		display: none;
	}
	
	.menu-tag-terkini {
		display: none;
	}
	
	.menu-tag-terkini-mobile, .topik-terkini {
		display: block;
	}
	
	.demo {
		display: none;
	}
	
	
	.hidden, .headline-indozone {
		display: block;
	}
	
	.hidden a {
		text-decoration: none;
	}
	
	#sidebar-right {
		height: auto;
		overflow: visible;
		width: 100%;
		max-width: 100%;
	}

	.pvc-popular-scroll {
		overflow-y: visible;
		max-height: none !important;
	}

	
	.sidebar-right-wrap > div {
		border: none;
		border-radius: 0;
	}
	
	.judul-sidebar-right, .judul-sidebar-single, .judul-sidebar-category {
		font-size: 20px;
		color: var(--font-000);
	}
	
	.wpp-list {
		padding-bottom: 0;
		margin-bottom: 0;
	}
	
	.wpp-post-title {
		font-size: 14.5px;
		word-spacing: -1px;
		font-weight: 600;
	}
	
	.wpp-thumbnail {
		margin-right: 0;
	}
	
	#content-wrap {
		padding-left: 20px;
		padding-right: 20px;
		flex-direction: column;
	}

	#sidebar-header {
		padding-left: 20px;
		padding-right: 20px;
	}

	#category-wrap {
		display: block;
	}

	#sidebar-banner-bawah-headline {
		margin-top: 5px;
		margin-bottom: 25px;
	}
	
	.home a.homepage-category-headline {
		width: 100%;
		max-width: 100%;
		background-position: 50% 50% !important;
		height: 200px;
		margin-bottom: 20px;
		float: none;
	}
	
	.trending-homepage, .home .terbaru {
		display: none;
	}
	
	.homepage-category-block {
		width: 100%;
		max-width: 100%;
		float: none;
		margin: 0;
		box-sizing: border-box;
		box-shadow: none;
	}
	
	ul.berita-terkini {
		overflow: visible;
		height: auto;
		float: none;
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 0;
	}
	
	ul.berita-terkini li:first-child {
		border-top: none;
	}
	
	.berita-terkini li:last-child {
		padding-bottom: 0;
		margin-bottom: 0;
	}
	
	.berita-terkini li a {
		font-size: 14.5px;
	}
	
	.video-box {
		width: 100%;
		max-width: 100%;
		display: block;
	}
	
	.video-play-icon {
		top: 20%;
	}
	
	#page-fullwidth .video-box {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	#single-social-share-wrap {
		margin-right: 0;
		margin-top: 20px;
	}
	
	#footer-wrap {
		padding: 10px;
	}
	
	.logo-bawah-wrap, .logo-bawah-wrap-no-filter {
		width: 100%;
		float: none;
		text-align: center;
		margin-bottom: 20px;
	}

	.logo-bawah-wrap img,
	.logo-bawah-wrap-no-filter img {
		display: block;
		margin: 0 auto;
		padding: 0;
	}
	
/*	footer .menu-bawah, .menu-footer-2, .menu-footer-3, .menu-footer-4 {
		width: 38%;
		margin-bottom: 20px;
	}   */
	
	.menu-footer-2 li a, footer .menu-bawah li a, .menu-footer-4 li a, .menu-footer-3 li a {
		font-size: 11.8px;
	}
	
	#single-wrap {
		flex-direction: column;
		max-width: 100%;
		box-sizing: border-box
	}
	
	.single-article {
		margin-left: 0;
		margin-right: 0;
		padding-left: 15px;
		padding-right: 15px;
		max-width: 100%;
		box-sizing: border-box;
	}
	
	a img.alignnone {
		margin: 10px;
	}
	
	.single-article-text .size-full {
		margin: 0;
	}
	
	.single-article-text .size-auto, .single-article-text .size-full, .single-article-text .size-large, .single-article-text .size-medium, .single-article-text .size-thumbnail {
		
		margin-left: 0;
		margin-right: 0;
		border-radius: 6px;
	}
	
	.single-article-text .size-auto, .single-article-text .size-full, .single-article-text .size-large, .single-article-text .size-medium {
		
		width: 100%;
		max-width: 100%;
		height: auto;
		border-radius: 6px;
		
	}
	
	#single-related-post-wrap a h2 {
		font-size: 14.5px;
	}
	
	.code-block {
		background: transparent;
	}
	
	
	.caption-photo a, figcaption a {
		font-size: 12px;
		color: #999;
		line-height: 1.3;
	}
	
	.single-photo-wrap {
		margin-bottom: 0;
	}
	
	.caption-photo, figcaption {
		line-height: 1.3;
		margin-bottom: 15px;
	}
	
	.wp-caption p.wp-caption-text {
		line-height: 1.3;
		font-size: 12px;
	}
	
	.single-article h1 {
		font-size: 24px;
	}
	
	.headline-mobile h2 {
		font-size: 16px;
	}
	
	#sidebar-banner-bawah-tombol-share-post {
		padding: 0;
	}
	
	.totalpembaca, #single-social-share-wrap {
		text-align: center;
	}
	
	.single-judul-related-post {
		margin-left: 0;
	}
	
	#single-related-post-wrap {
		margin-left: 0;
		margin-right: 0;
	}
	
	.single-article ul {

	}
	
	.single .wpp-list {
		padding: 0;
		line-height: 1.4;
	}
	
	.single .recent-post-widget a {
		font-size: 14px;
		line-height: 1.4;
	}
	
	

	
	#single-related-post-wrap img {
		margin-left: 0;
	}

	.single #sidebar-right, .single #sidebar-single, .single
	#sidebar-category {
		width: 100%;
		max-width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}
	
	.category #sidebar-right, .category #sidebar-single, .category
	#sidebar-category {
		width: 100%;
		max-width: 100%;
	}
	
	.single .text-wrap {
		padding-right: 0;
		padding-left: 0;
	}
	
	#sidebar-single .image {
		display: block;
		margin: 0 auto;
		text-align: center;
	}
	
	.writer img.badge-check {
		left: 33px;
	}
	
	.category .wrap-category, .tag .wrap-category {
		width: 100%;
		max-width: 100%;
	}
	
	.category .kotak-terbaru {
		border-left: none;
		border-right: none;
		border-radius: 0;
	}
	
	.category .kotak-terbaru a:last-child, .category .kotak-terbaru, .category .kotak-terbaru > a:last-child {
		border-bottom: none;
	}
	
	.category .wrap-feed {
		margin-top: 10px;
	}
	
	.category .kotak-terbaru > a {
		margin: 10px;
	}
	
	.category .related-post-text-wrap {
		width: 70%;
	}
	
	#sidebar-category .wpp-list {
		overflow: visible;
		height: auto;
	}
	
	#sidebar-category .text-wrap {
		padding-left: 0;
		padding-right: 0;
	}
	
	#sidebar-category .sidebar-right-wrap > div, #sidebar-category .sidebar-single-wrap > div, #sidebar-category .sidebar-category-wrap > div {
		padding-right: 0;
	}
	
	.tag .box-umum {
		margin-top: 15px;
		margin-bottom: 15px;
	}
	
	.tag .kotak-terbaru, .search .kotak-pencarian {
		border-left: none;
		border-right: none;
		border-radius: 0;
	}
	
	.tag .kotak-terbaru a:last-child, .tag .kotak-terbaru, .tag .kotak-terbaru > a:last-child {
		border-bottom: none;
	}
	
	.search .related-post-text-wrap {
		width: 65%;
	}
	
	.author .kotak-terbaru {
		border: none;
	}
	
	.author .writer {
		border-left: none;
		border-right: none;
	}
	
	.trending-wrap {
		box-shadow: none;
	}
	
	ul.tabs {
		-ms-overflow-style: none;  /* IE and Edge */
  		scrollbar-width: none;  /* Firefox */
		margin-bottom: 15px;
		margin-left: 10px;
		margin-right: 10px;
	}
	
	ul.tabs::-webkit-scrollbar {
		display: none;
	}
	
	ul.tabs li:first-child {
		
	}
	
	ul.tabs li:last-child {
		margin-right: 10px;
	}
	
	
	li.tab-link {
  		border: 1px solid rgb(31, 141, 214);
		display: inline-block;
		padding: 6px 8px;
		text-transform: capitalize;
		color: rgb(31, 141, 214);
		font-size: 14px;
		font-weight: bold;
		transition: 0.25s background ease;
		border-radius: 6px;
		background: var(--bg-color);
		margin-right: 5px;
	}


	li.tab-link.active {
		font-weight: bold;
		color: #fff;
		background: rgb(31, 141, 214);
		border-color: rgb(31, 141, 214);
	}
	
	.page-template-page-trending h1 {
		display: none;
	}
	
	.block-newsfeed-wrap {
		float: none;
		width: 100%;
		margin: 0 auto;
	}
	
	.newsfeed-wrap {
		margin-bottom: 15px;
	}
	
	.newsfeed-wrap h2 {
		font-size: 14.5px;
	}
	
	#sidebar-custom-homepage {
		float: none;
		margin: 0 15px;
		max-width: 94%;
	}

	#sidebar-category {
		float: none;
		margin: 0;
		max-width: 94%;
	}
	
	#sidebar-category .image {
    display: block;
    margin: 0 auto;
    text-align: center;
	}

	p.foto-newsfeed-wrap {
		margin-bottom: 15px;
		margin-right: 5px;
	}
	
	.foto-newsfeed {
		width: 100%;
		display: none;
	}
	
	.foto-custom-homepage-mobile {
		display: block;
		border-radius: 6px;
	}
	
	.homepage-category-name, .homepage-category-video {
		font-size: 20px;
		color: var(--font-000);
	}
	
	.judul-block-newsfeed, .judul-sidebar-custom-homepage {
		font-size: 20px;
		color: var(--font-000);
	}
	
	.homepage-category-name a, .homepage-category-video a {
		color: var(--font-000);
	}
	
	#sidebar-right ul.wpp-list {
		padding-bottom: 0;
	}
	
	.hidden .owl-dots {
		display: none;
	}
	.logo-bawah-wrap-no-filter {
		max-width: 100%;
	}
	ul.menu-bawah-mobile { 
		display: block;
	}
	#media-sosial-footer { 
		display: flex;
	}

	.menu-bawah, .menu-footer-2, .menu-footer-3, .menu-footer-4 {
	    display: none;
	}

	/* Gutter 20px untuk blok berita homepage (Block 1, 2, 4, 6, 8, ...),
	   dipegang container supaya judul dan thumbnail kecil segaris dengan
	   thumbnail besar. */
	.block-kibaran .homepage-category {
		padding-left: 20px;
		padding-right: 20px;
	}

	.block-kibaran .homepage-category-block {
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}

	.block-kibaran ul.berita-terkini {
		padding-left: 0;
		padding-right: 0;
	}

	.block-kibaran .berita-terkini li {
		padding-left: 0;
		padding-right: 0;
	}

	/* Bukan bagian layout flex -- disembunyikan agar tidak memakan satu gap. */
	.block-kibaran .berita-terkini li > .clr {
		display: none;
	}

	/* Gutter 20px untuk headline dan menu utama, agar segaris dengan
	   hamburger, ticker, banner, dan blok berita. */
	.headline-indozone {
		margin-left: 20px;
		margin-right: 20px;
	}

	.menu-utama li:first-child {
		margin-left: 15px; /* + padding-left 5px pada <a> = 20px */
	}

	/* Menyeimbangkan tepi kanan ikon search dengan hamburger di 20px. */
	#search-mobile-button {
		right: 8px;
	}

}

@media screen and (max-width: 650px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 610px;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.author .writer img.badge-check {
		left: 55%;
	}
}

@media screen and (max-width: 630px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 590px;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.author .writer img.avatar {
		right: 42%;
	}
}

@media screen and (max-width: 540px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		max-width: 500px;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.parallxads-box {
	 	max-width: 510px;
	 }
}

@media screen and (max-width: 480px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		width: 100%;
		height:  auto;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.author .writer img.avatar {
		right: 39%;
	}
	
	.author .writer img.badge-check {
		left: 57%;
	}
	
	.menu-bawah, .menu-footer-2, .menu-footer-3, .menu-footer-4 {
		display: none;
	}
	
	.logo-bawah-wrap, .logo-bawah-wrap-no-filter {
		text-align: center;
		max-width: 100%;
		margin-bottom: 0;
	}
	
	.logo-bawah-wrap img {
		display: block;
		margin: 0 auto;
		padding: 0;
	}
	
	.logo-bawah-wrap p {
		padding: 0;
		margin: 0 auto;
		display: none;
	}

	.logo-bawah-wrap-no-filter img {
		display: block;
		margin: 0 auto;
		padding: 0;
	}
	
	.logo-bawah-wrap-no-filter p {
		padding: 0;
		margin: 0 auto;
		display: none;
	}
	
	ul.menu-bawah-mobile { 
		display: block;
	}
	#media-sosial-footer { 
		display: flex;
	}
	
	.copyright-mobile-new {
		display: block;
		font-size: 0.7em;
		font-family: 'Heebo', sans-serif;
		width: 100%;
		max-width: 250px;
		text-align: center;
		margin: 0 auto;
		color: var(--font-color);
		padding-bottom: 20px;
		line-height: 1.7;
	}
}

@media screen and (max-width: 440px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		width: 100%;
		height:  auto;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.parallxads-box {
	 	max-width: 400px;
	 }
}
@media screen and (max-width: 428px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		width: 100%;
		height:  auto;
		box-sizing: border-box;
		margin: 0 auto;
	}

 	.close-button {
	    left: 60px;
	  }
}
@media screen and (max-width: 420px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		width: 100%;
		height:  auto;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.single .related-post-text-wrap {
		width: 69%;
	}

	.parallxads-box {
	 	max-width: 384px;
	 }
	
	.category .related-post-text-wrap {
		width: 65%;
	}
	
	.tag .related-post-text-wrap {
		width: 60%;
	}
	
	#page-fullwidth h1 {
		font-size: 35px;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	
	.writer img.badge-check {
		left: 33px;
	}
	
	.author .writer img.badge-check {
		left: 58%;
	}
	
	.author .writer img.avatar {
		right: 38%;
	}
	
	.custom-login, .login-username input, .login-password input, .login-remember, .login-submit {
		max-width: 100%;
	}
	
	.page-template-page-custom-login form {
		max-width: 100%;
	}
	
}
@media screen and (max-width: 412px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		width: 100%;
		height:  auto;
		box-sizing: border-box;
		margin: 0 auto;
	}

 	.close-button {
	    left: 50px;
	  }
}
@media screen and (max-width: 400px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		width: 100%;
		height:  auto;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.parallxads-box {
	 	max-width: 360px;
	 }
 	.close-button {
	    left: 45px;
	  }
}
@media screen and (max-width: 384px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		width: 100%;
		height:  auto;
		box-sizing: border-box;
		margin: 0 auto;
	}

 	.close-button {
	    left: 40px;
	  }
}
@media screen and (max-width: 380px) {

	.info-post .timepost {
		white-space: nowrap;
		font-size: 12px;
	}

	.info-post .share-box {
		padding: 0 4px;
	}

	.info-post .author-avatar {
		width: 36px;
		height: 36px;
		margin-right: 8px;
	}

	.pjs-iconnotif .pjs-iconnotif-wrap,
	.pjs-iconnotif a,
	button#share-modal {
		width: 26px;
		height: 26px;
	}

	.pjs-iconnotif svg,
	button#share-modal svg {
		width: 14px;
		height: 14px;
	}

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		width: 100%;
		height:  auto;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.related-post-text-wrap {
		width: 65%;
	}
	
	.author .writer img.badge-check {
		left: 57%;
	}

	.parallxads-box {
	 	max-width: 345px;
	 }

	.close-button {
		left: 35px;
	}
	
}
@media screen and (max-width: 360px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		width: 100%;
		height:  auto;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.parallxads-box {
	 	max-width: 330px;
	 }
	 .close-button {
	    left: 25px;
	  }
}

@media screen and (max-width: 335px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		width: 100%;
		height:  auto;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.related-post-text-wrap {
		width: 60%;
	}
	
}

@media screen and (max-width: 320px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		width: 100%;
		height:  auto;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.lihat span, .eta {
		display: none;
	}
}

@media screen and (max-width: 315px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		width: 100%;
		height:  auto;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.category .related-post-text-wrap {
		width: 63%;
	}
}

@media screen and (max-width: 280px) {

	.sidebar-banner-bawah-headline-wrap > div, 
	.sidebar-banner-bawah-block1-wrap > div, 
	.sidebar-banner-bawah-headline-wrap img, 
	.sidebar-banner-bawah-block1-wrap img {
		text-align: center;
		width: 100%;
		height:  auto;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.author .writer img.badge-check {
		left: 50%;
	}

	.parallxads-box {
	 	max-width: 250px;
	 }

	#logo img {
	    max-width: 138px;
	    padding-top: 15px;
	}
	#media-sosial-footer .fb,#media-sosial-footer .twitter,#media-sosial-footer .instagram,#media-sosial-footer .youtube,#media-sosial-footer .tiktok,#media-sosial-footer .threads,#media-sosial-footer .whatsapp,#media-sosial-footer .telegram {
	    width: 25px;
	    height: 25px;
	}
	/* ikon mengecil jadi 25px di breakpoint ini, jadi lebar kontainer
	   5-ikon-per-baris ikut disesuaikan: 5*25px + 4*15px gap + 30px padding */
	#media-sosial-footer {
		max-width: 215px;
	}
}



/* COMMENT */
.comment-reply-title {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding-left: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    position: relative;
    margin: 0;
    font-size: 20px;
}
.comment-reply-title:before {
    content: "";
    position: absolute;
    left: 0px;
    width: 6px;
    height: 18px;
    background: var(--ornament1);
}
.comment-reply-title a {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-font-smoothing: antialiased;
    color: var(--color5);
    font-family: Heebo, sans-serif;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
}
.comments_title {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding-left: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    position: relative;
    margin: 0 0 1em;
    font-size: 20px;
}
.comments_title:before {
    content: "";
    position: absolute;
    left: -10px;
    width: 6px;
    height: 18px;
    background: var(--ornament1);
}
.logged-in-as a {
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    color: #767676;
    font-family: Heebo, sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    word-break: break-all;
}
.comment-form {
    flex: 1 1 0%;
    align-items: flex-end;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.logged-in-as {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.commentsArea ul {
    list-style: none;
    margin-left: 3em;
}
.commentsArea ul ul {
    padding: 0;
}
.comment-notes {
    color: #999999;
}
.commentBox {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    padding-bottom: 20px;
}
.commentAvatar {
    width: 32px;
    border-radius: 50%;
    height: 32px;
    background: #eee;
}
.commentAvatar img {
    display: block;
    border-radius: 50%;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.commentBody {
    margin-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    -ms-flex: 1;
    flex: 1;
}
.commentAuthorName,
.commentAuthorName a {
    -webkit-font-smoothing: antialiased;
    color: var(--font-color);
    font-family: Heebo, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}
.commentBodyText {
    font-size: 14px;
    position: relative;
    line-height: 1.25;
    word-break: break-word;
    overflow-wrap: break-word;
    margin: 0 0 5px 0;
}
.commentBodyModeration {
    background-color: #eeeeee;
    padding: 5px;
    border-radius: 6px;
    color: #999999;
}
.commentBodyText p {
    margin: 0 0 5px 0;
}
.commentReplyTo {
    float: left;
    margin-right: 5px;
    font-weight: 600;
}
.commentBodyFooter {
    -webkit-font-smoothing: antialiased;
    color: #999999;
    font-family: Heebo, sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
}
.commentBodyFooter a {
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    color: #999999;
    font-family: Heebo, sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
}
.commentBodyFooter time::after, .commentBodyFooter a::after {
    content: "\00B7";
    margin: 0 4px;
    font-weight: normal;
}
.commentBodyFooter a:last-child::after {
    content: "";
}
.navigation {
    text-align: center;
    border-top: 1px solid #e6e8ea;
    padding-top: 10px;
}

.labelCheck, .logged-in-as {
	color:  var(--font-color);
}

.endLoadMore {
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}
.iconCheck {
    margin-right: 8px;
    width: 16px;
    max-width: 16px;
    height: 16px;
    background-image: url(../kibaran/images/check-circle-green.svg);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
}

.loadingLoadMore {
    text-align: center;
}
.loadingLoadMore span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #04a4a4;
    margin: 4px 2px;
    opacity: 0;
}
.loadingLoadMore span:nth-child(1) {
    animation: 1s ease-in-out 0s infinite normal none running opacitychange;
}
.loadingLoadMore span:nth-child(2) {
    animation: 1s ease-in-out 0.33s infinite normal none running opacitychange;
}
.loadingLoadMore span:nth-child(3) {
    animation: 1s ease-in-out 0.66s infinite normal none running opacitychange;
}
@-webkit-keyframes opacitychange{
    0%,100%{
        opacity:0;
    }
    60%{
        opacity:1;
    }
}
@keyframes opacitychange{
    0%,100%{
        opacity:0;
    }
    60%{
        opacity:1;
    }
}

.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    margin-top: 0;
}

.comment-form-cookies-consent #wp-comment-cookies-consent {position: absolute;opacity: 0;cursor: pointer;width: 100%;height: 100%;}

.comment-form-cookies-consent label:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #c9c9c9;
    display: block;
    cursor: pointer;
    font-size: 17px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 5px;
}

.comment-form-cookies-consent #wp-comment-cookies-consent:checked ~ ::before {
    content: "";
    background: #04a4a4;
}

.comment-form-cookies-consent #wp-comment-cookies-consent:checked ~ ::after {
    left: 10px;
    top: 6px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    position: absolute;
    top: 5px;
    left: 9px;
}

/* --- WPP --- */

.wpp-tiles {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

.wpp-tiles li {
    position: relative;
    list-style: none;
    margin: 0 0 1.2em 0;
    padding: 0;
    overflow: hidden;
    clear: both;
}

.in-preview-mode .wpp-tiles li {
    margin: 0 0 1.2em 0;
    padding: 0;
}

.wpp-tiles li:last-of-type {
    margin: 0;
}

.wpp-tiles li .wpp-thumbnail {
    overflow: hidden;
    display: block;
    margin: 0;
    width: 100%;
    height: auto;
    font-size: 0.8em;
    line-height: 1;
    background: #f0f0f0;
    border: none;
}

/* "3 equal areas" division for Design 1 of Popular Post beside the
   headline, matching the same concept as "Latest in".

   The total height is NOT hard-coded here any more. It used to be
   `height: 420px` with `flex: 0 0 210px` slots, which is only two whole
   slots' worth -- so the third tile was cut in half by the overflow and
   its title disappeared with it. The box now stretches to whatever the
   headline column next to it actually measures -- that exact height is
   written onto .pvc-popular-scroll by js/popular-post-sync.js -- and the
   three tiles divide that space evenly, so the two columns always end on
   the same line. */
/* Borderless box. `.sidebar-right-wrap > div` gives every direct child
   of the sidebar a 1px grey frame (--border-eee), which is #eee in light
   mode and #242525 in dark -- visible either way, and unwanted around
   the Popular Post cards specifically. It is cleared here rather than on
   `.sidebar-right-wrap > div` itself so the framing still applies to any
   real widgets placed in this sidebar.

   The panel background is deliberately kept. `--bg-color-dua` is what
   the "Popular Post" heading directly above also sits on, and it differs from
   the page background (#fff vs #F7F7F7 in light mode) -- making only the
   box transparent would leave the heading as a floating white strip.

   Dropping the bottom padding along with the border is what makes the
   last card finish exactly level with the headline instead of 11px
   above it: the sync script sizes this box border-box, so its outer
   bottom already met the headline's -- the border and padding were
   simply holding the card itself back from that same line. */
.pvc-popular-scroll.pvc-popular-tiles {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.pvc-popular-scroll.pvc-popular-list {
	border: 0;
	border-radius: 0;
}

/* The list's own 10px bottom padding would reintroduce the same gap
   under the last card, so only the top spacing (which separates the
   first card from the "Popular Post" heading) is kept. */
#sidebar-right .pvc-popular-tiles ul.wpp-tiles-latest {
	padding: 10px 0 0 0;
}

/* Below 750px the sidebar sits UNDER the headline rather than beside it,
   so there is no neighbouring column left to match heights with: the
   tiles leave the "share one fixed height" layout and simply stack at a
   readable height each.

   This block is deliberately placed AFTER the rules it overrides rather
   than with the theme's other 750px rules further up. A media query adds
   nothing to specificity, so a mobile rule sitting earlier in the file
   than an equally specific desktop rule silently loses to it -- which is
   what happened when these lived in the shared breakpoint block. */
@media screen and (max-width: 750px) {

	.pvc-popular-scroll.pvc-popular-tiles {
		display: block;
		height: auto !important;
		max-height: none !important;
		overflow: visible;
	}

	.wpp-tiles-latest {
		height: auto;
		overflow: visible;
	}

	.wpp-tiles.wpp-tiles-latest > li,
	.in-preview-mode .wpp-tiles.wpp-tiles-latest > li {
		flex: 0 0 auto;
		height: 190px;
	}
}

.wpp-tiles-latest {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	box-sizing: border-box;
}

/* `flex: 1 1 0` (rather than a fixed basis) is what makes the slots
   share the height equally no matter what that height turns out to be.
   The min-height floor keeps them readable if the headline happens to
   render unusually short.
   
   Written as `.wpp-tiles.wpp-tiles-latest` (both classes on the same
   element) purely to out-weigh `.in-preview-mode .wpp-tiles li`, which
   would otherwise put the old 1.2em bottom margin back and make the box
   overshoot the headline inside the Customizer preview only -- i.e.
   exactly where this setting is adjusted and checked. */
.wpp-tiles.wpp-tiles-latest > li,
.in-preview-mode .wpp-tiles.wpp-tiles-latest > li {
	flex: 1 1 0;
	min-height: 92px;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	box-sizing: border-box;
}

.wpp-tiles.wpp-tiles-latest > li:last-of-type {
	margin: 0;
}

.wpp-tiles-latest > li .wpp-tile-link {
	display: block;
	width: 100%;
	height: 100%;
}

.wpp-tiles-latest > li .wpp-thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Caption plate. A gradient instead of a flat 50% black so a two-line
   title stays legible over a bright photo without the plate having to
   grow tall enough to swallow half the tile. */
.wpp-tiles.wpp-tiles-latest li .wpp-post-data {
	padding: 1.6em .8em .6em;
	background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .65) 55%, rgba(0, 0, 0, 0) 100%);
}

.wpp-tiles.wpp-tiles-latest li .wpp-post-data .category {
	display: block;
	margin: 0 0 2px;
	font-size: .68em;
	line-height: 1.1;
	opacity: .9;
}

/* Long titles: clamp to two lines and let the browser add the "...".
   This selector is deliberately more specific than the generic
   `.wpp-tiles li .wpp-post-data .wpp-post-title { display: block }`
   rule further up -- the previous, shorter selector lost the cascade to
   it, so `display: block` won, -webkit-line-clamp never took effect,
   and long titles simply ran past the bottom edge of the tile and were
   chopped off mid-line. The max-height is a belt-and-braces fallback
   for engines that ignore line-clamp. */
.wpp-tiles.wpp-tiles-latest li .wpp-post-data .wpp-post-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: .95em;
	line-height: 1.25;
	max-height: 2.5em;
	margin: 0;
}

.wpp-tiles li a {
    text-decoration: none;
}

.wpp-tiles li a:hover {
    text-decoration: underline;
}

.wpp-tiles li .wpp-post-data {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: .75em 1em 1em;
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.wpp-tiles li .wpp-post-data .category,
.wpp-tiles li .wpp-post-data .wpp-post-title {
    color: #fff !important;
    font-weight: bold;
}

.wpp-tiles li .wpp-post-data .category {
    margin: 0;
    font-size: 0.7em;
    line-height: 1;
}

.wpp-tiles li .wpp-post-data .wpp-post-title {
    display: block;
    margin: 0 0 0;
    font-size: 1em;
    line-height: 1.2;
}

#sidebar-right .wpp-tiles li .wpp-post-data .wpp-post-title,#sidebar-right .wpp-tiles li .wpp-post-data .category, .wpp-tiles li .wpp-post-data .wpp-post-title {
    color: #fff;
    font-weight: bold;
}

/* --- BOX AUTHOR --- */

.info-post {
    width: 100%;
    display: block;
/*    position: sticky; */
    top: 132px;
    z-index: 5;
/*    background: #fff; */
    margin-bottom: 10px;   
}

.info-post .info-box {
    display: flex;
    flex-direction: row;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
/*  background-color: #ffffff; */
    color: #000000;
    align-items: center;
}

.info-post .info-box .author-box {
    flex: 1;
}

.info-post .share-box {
   
/*    background: #ededed; */
    padding: 0 9px;
    border-radius: 50em;
    height: 38px;
    float: right;
}

.info-post .author-flex {
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
}

.info-post .author-avatar {
    margin-right: 12px;
    display: flex;
    align-items: flex-end;
    -webkit-box-pack: end;
    justify-content: flex-end;
    width: 48px;
    height: 48px;
    font-size: 28px;
    font-weight: 500;
    border-radius: 6px;
/*  background: #f6f8fc; */
    position: relative;
    text-align: center;
/*  border-color: #eeeeee;
    border-style: solid; */
    border-width: 1px;
}

.prop-pos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.info-post .author-name-flex {
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
}

.share-box .author-name-flex {
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
}

.info-post .author-name-flex {
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
}

.info-post .author-name a {
    -webkit-font-smoothing: antialiased;
    color: var(--font-000);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    padding-right: 4px;
}

.info-post .timepost {
    -webkit-font-smoothing: antialiased;
    color: #767676;
    font-size: 13px;
    line-height: 24px;
    font-weight: 500;
}

.info-post .author-avatar img {
    border-radius: 6px;

}

.pjs-iconnotif {
	font-size: 11px;
	position: relative;
	display:inline-block;
}

.pjs-iconnotif .pjs-iconnotif-wrap,
.pjs-iconnotif a {
	background-color: #0006ff;
	color: #ffffff;
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.pjs-iconnotif .pjs-iconnotif-wrap {
	background-color: #ff1800;
}

.pjs-iconnotif svg {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.notif-number {
	position: absolute;
	top: -6px;
	right: -6px;
	padding: 3px 3px;
	font-size: 9px;
	line-height: 9px;
	background-color: #ff0000;
	color: #ffffff;
	border-radius: 2px;
	height: 14px;
	max-width: 34px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
	text-overflow: '..';
}

.idt-xclose {
	position: absolute;
	display: flex;
	top: -30px;
	right: -30px;
	z-index: 99;
	background-color: #fff;
	color: var(--main-color);
	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 0 !important;
}

/* Social share */
ul.pjs-socialicon-share {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	list-style: none;
}

ul.pjs-socialicon-share li {
	text-align: center;
	margin-left: 5px;
}

ul.pjs-socialicon-share li:first-child {
	margin-left: 0;
}

ul.pjs-socialicon-share li a {
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

ul.pjs-socialicon-share li.facebook a {
	background-color: #3c5a99;
}

ul.pjs-socialicon-share li.twitter a {
	background-color: #0f1419;
}

ul.pjs-socialicon-share li.telegram a {
	background-color: #0088cc;
}

ul.pjs-socialicon-share li.threads a {
	background-color: #000;
}

ul.pjs-socialicon-share li.whatsapp a {
	background-color: #25d366;
}

ul.pjs-socialicon-share li.copas a {
	background-color: #33B4C0;
}

ul.pjs-socialicon-share li svg {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: #ffffff;
}

button#share-modal {
	display: inline-flex;
	background-color: #3c5a99;
	height: 34px;
	width: 34px;
	cursor: pointer;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	padding: 0;
	border-color: transparent;
}

button#share-modal svg {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: #ffffff;
}

.main-textshare {
	font-size: 18px;
	display: block;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-color);
}

h4.main-textshare {
	color: var(--font-color-black);
}

.content-share {
	text-align: center;
}

.content-share .pjs-socialicon-share {
	margin-top: 10px;
	justify-content: center;
}

/* Popup
--------------------------------------------- */
.pjs-modalbg {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

#pjs-popupwrap {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 9999998;
	margin-left: 0;
}

#pjs-popupwrap.pjs-bannerpopup {
	display: block;
}

.pjs-in-popup {
	background-color: #fff;
	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;
}

.pjs-in-popup img {
	display: block;
	width:  15px;
}

.pjs-share-popup .pjs-in-popup {
	padding: 20px;
}

/* Versi AMP (<amp-lightbox>) dari popup share artikel: tata letak &
   posisinya ada di css/amp.css (dienqueue khusus request AMP, lihat
   inc/amp-support.php) -- BUKAN di sini lagi, supaya konsisten dengan
   popup AMP lain & tak membebani halaman non-AMP dengan CSS tak terpakai. */

/* Versi AMP (<amp-lightbox>/<amp-sidebar>): tata letak & posisinya ada
   di css/amp.css (dienqueue khusus request AMP -- lihat inc/amp-support.php),
   supaya tak membebani halaman non-AMP dengan CSS yang tak dipakai sama
   sekali di sana. Kelas .kbn-search-form dkk di bawah tetap universal
   (dipakai non-AMP juga, mis. widget/komponen lain). */

/* Kartu popup search HEADER -- dipakai KEDUA versi (AMP & non-AMP), markup
   & CSS-nya SAMA PERSIS di kedua mode (lihat header.php, markupnya SEKARANG
   di luar <header>). Toggle buka/tutup pakai teknik "checkbox hack" CSS
   MURNI (input#kbnHeaderSearchCheck + selector :checked ~ ...), TANPA JS
   dan TANPA <amp-lightbox> sama sekali -- sama seperti popup Trending/
   Cari/Bagikan di menu bawah (lihat css/amp.css), supaya bekerja identik
   & konsisten di semua browser/mode tanpa bergantung JS atau perilaku
   internal komponen AMP tertentu. */
.kbn-popup-checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.kbn-header-search-backdrop {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 100029;
	cursor: pointer;
}

#kbnHeaderSearchCheck:checked ~ .kbn-header-search-backdrop {
	display: block;
}

.kbn-header-search-lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100030;
	/* Biar klik di area kosong (di luar kartu) tembus ke .kbn-header-search-backdrop
	   di baliknya, supaya "klik di luar kartu utk menutup" tetap jalan --
	   hanya kartunya sendiri (.kbn-header-search-inner) yang perlu menerima klik. */
	pointer-events: none;
}

#kbnHeaderSearchCheck:checked ~ .kbn-header-search-lightbox {
	display: block;
}

.kbn-header-search-inner {
	position: absolute;
	top: 80px;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 32px);
	max-width: 420px;
	background: var(--bg-color-dua, #f5f5f6);
	border-radius: 16px;
	padding: 24px 16px 16px;
	box-sizing: border-box;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
	pointer-events: auto;
}

/* Tombol tutup (sekarang <label for="kbnHeaderSearchCheck">, bukan <button>,
   supaya toggle-nya konsisten pakai checkbox hack) -- posisinya SEBELUMNYA
   cuma didefinisikan di css/amp.css (khusus AMP), jadi di non-AMP tombolnya
   jatuh ke posisi default/mengikuti text-align dari leluhurnya (tampak
   "pindah ke tengah"). Sekarang didefinisikan juga di sini supaya non-AMP
   & AMP konsisten. */
.kbn-amp-lightbox-close {
	position: absolute;
	top: 8px;
	right: 12px;
	width: 32px;
	height: 32px;
	display: block;
	border: none;
	border-radius: 50%;
	background: rgba(128, 128, 128, 0.15);
	color: var(--font-color, #1a1a1a);
	font-size: 16px;
	line-height: 32px;
	text-align: center;
	padding: 0;
	cursor: pointer;
	z-index: 1;
}

/* Tombol tutup (X) popup search/share/trending: di mode dark non-AMP
   warnanya SENGAJA dibuat putih murni (bukan ikut var(--font-color),
   yang nilainya abu-abu #DAD9D8 di dark mode -- kurang kontras di
   atas lingkaran background semi-transparan tombol ini). */
[data-theme="dark"] .kbn-amp-lightbox-close {
	color: #ffffff;
}

[data-theme="dark"] .kbn-search-form {
	border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .kbn-search-form:focus-within {
	border-color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .kbn-search-input::placeholder {
	color: #C0C0C0;
	opacity: 1;
}

/* Kotak pencarian mandiri (dipakai popup search header AMP & popup "Cari"
   menu bawah) -- terpisah dari header #searchform bawaan (yang didesain
   inline utk header biasa, bukan kartu popup, dan warnanya di-hardcode). */
.kbn-search-form {
	display: flex;
	align-items: center;
	gap: 4px;
	background: var(--warnaheader, #ffffff);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 26px;
	padding: 4px 4px 4px 16px;
	overflow: hidden;
	box-sizing: border-box;
}

.kbn-search-form:focus-within {
	border-color: rgba(0, 0, 0, 0.3);
}

.kbn-search-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	background: none;
	height: 34px;
	line-height: 34px;
	font-size: 14px;
	color: var(--font-color, #1a1a1a);
	-webkit-tap-highlight-color: transparent;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* Override the theme's global input[type="text"] border which otherwise
   wins over a plain class selector. */
.kbn-search-form .kbn-search-input,
.kbn-search-form .kbn-search-input:focus {
	border: 0 !important;
	border-width: 0 !important;
	border-style: none !important;
	border-color: transparent !important;
	background-color: transparent !important;
}

.kbn-search-input,
.kbn-search-input:focus,
.kbn-search-input:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.kbn-search-input::placeholder {
	color: rgba(26, 26, 26, 0.5);
}

.kbn-search-submit {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-width: 34px;
	border: 0;
	margin: 0;
	padding: 0;
	background: none;
	color: var(--font-color, #1a1a1a);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 50%;
	-webkit-tap-highlight-color: transparent;
}

.kbn-search-submit,
.kbn-search-submit:focus,
.kbn-search-submit:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.kbn-search-submit svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	pointer-events: none;
}

/* Accessibility
--------------------------------------------- */
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 10px;
	font-weight: var(--font-bold);
	height: auto;
	left: 5px;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.commentsArea>ol>ul ul,.footer-nav .menu-image-title,.frame-item.userbutton ul .menu-image-title,.menu-indeks ul li a .menu-image-title,.navigation .primary-menu li a .menu-image-title,.navigation .second-menu li a .menu-image-title {
    padding: 0
}
#comments,#respond {
    margin-bottom: 20px;
    border-radius: 12px
}
.comment-respond {
    border-radius: 12px
}
#comments,#respond,.comment-respond {
    background: #f7f7f7;
    padding: 16px 16px 0px 16px;
    box-sizing: border-box;
    overflow: hidden
}
.comment-reply-title small a {
    text-transform: capitalize;
    margin-left: 5px;
    color: var(--color3);
    display: block
}
.comment-notes {
    line-height: 1.4;
    font-size: 14px;
    color: #6f6f6f
}
input#author,input#email {
    margin: 10px 0 10px;
    background: #fff;
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border-radius: 12px
}
textarea#comment {
    background: #fff;
    border: 1px solid #e6e6e6;
    width: 100%;
    resize: unset;
    font-size: 14px;
    padding: 10px 10px 60px;
    height: 166px!important;
    border-radius: 12px;
    -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
    overflow: hidden
}
input#author,input#email,textarea#comment:focus {
    outline: 0;
    border: 1px solid #e6e6e6
}
.commentBox {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start
}
p.form-submit {
    margin: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 0 0 12px 12px;
    width: calc(100% - 2px);
    resize: unset;
    text-align: right;
    padding: 10px;
    border-top: 1px solid #e6e6e6;
    position: absolute;
    right: 1px;
    bottom: 8px;
    background: #fff;
    left: 1px
}
p.form-submit:after {
    content: "";
    position: absolute;
    right: 17px;
    background-image: url("data:image/svg+xml,%0A%3Csvg class='svg-icon' style='fill:%23fff;width: 1em;height: 1em;vertical-align: middle;overflow: hidden;' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M276.48 289.877333l20.906667 83.754667a42.666667 42.666667 0 0 1-82.773334 20.736l-42.666666-170.666667a42.666667 42.666667 0 0 1 59.434666-49.066666l640 298.666666a42.666667 42.666667 0 0 1 0 77.354667l-640 298.666667a42.666667 42.666667 0 0 1-59.093333-50.346667l85.333333-298.666667A42.666667 42.666667 0 0 1 298.666667 469.333333h170.666666a42.666667 42.666667 0 0 1 0 85.333334H330.837333l-50.773333 177.792L752.426667 512 276.48 289.877333z' /%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    top: 20px
}
p.form-submit input[type=submit] {
    font-size: 13px;
    display: inline-block;
    padding: 5px 30px 5px 10px;
    line-height: 1.4;
    cursor: pointer;
    vertical-align: top;
    background: var(--themecolor);
    border: 1px solid var(--themecolor);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    color: #fff
}
.comment-reply-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: 600
}
.notif {
    line-height: 1.4;
    font-size: 14px;
    color: #6f6f6f;
    padding: 15px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    background: #fff;
    text-align: center
}
.notif-header {
    font-weight: 700
}
.notif-image svg {
    height: 100px;
    color: #e5e5e5
}
h2.comments_title {
    /**display: block;**/
    border: none;
    margin: 10px 10px 20px;
    padding: 0;
    font-weight: 700;
    line-height: 1.4;
    font-size: 18px
}
.commentBodyText,.notfound-desc,p.logged-in-as {
    font-size: 14px;
    color: #666
}
.commentsArea>ol {
    padding: 0;
    margin: 0;
    list-style: none
}
.commentsArea li {
    margin: 0 0 15px;
    padding: 15px 0;
    border-bottom: 1px solid #e6e6e6
}
.commentAvatar {
    margin: 0 10px 0 0;
    width: 50px;
    height: 50px;
    position: relative;
    overflow: hidden;
    border-radius: 50em;
    background: #e4e4e4;
    float: left
}
.commentAvatar img {
    display: block;
    object-fit: cover;
    width: 100%;
    z-index: 2;
    position: relative;
    height: 100%
}
.commentBodyText {
    font-family: Helvetica,Arial,Tahoma;
    line-height: 1.4;
    display: block;
    word-wrap: break-word;
    margin: 5px 0 0
}
.commentAuthorName {
    color: #000;
    font-size: 16px;
    font-weight: 600
}
.commentHeader time {
    font-size: 12px;
    color: #999
}
.commentBodyFooter {
    font-size: 12px;
    color: #a7a7a7;
    margin: 10px 0 0;
    display: flex;
    align-items: center
}
.commentBodyFooter a {
    margin-right: 15px;
    color: #a7a7a7
}
.comment-btnshare {
    display: flex;
    color: #a7a7a7;
    align-items: center
}
.comment-share-button {
    display: flex;
    align-items: center
}
.comment-share-button a {
    width: 22px;
    height: 22px;
    font-size: 14px;
    vertical-align: middle;
    background: #a7a7a7;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    display: flex;
    margin: 0 0 0 5px;
    color: #fff;
    line-height: 14px;
    justify-content: center;
    align-items: center
}
.comments-pagination a,.comments-pagination span,.notfound-button a {
    position: relative;
    text-align: center;
    cursor: pointer;
    vertical-align: top;
    background: var(--themecolor)
}
.commentBodyModeration {
    background: #a7a7a7;
    color: #fff;
    padding: 3px 7px;
    border-radius: 3px;
    font-size: 12px
}
.commentsArea ol,.commentsArea ul {
    list-style: none
}
.commentBodyText p {
    display: inline
}
.commentReplyTo {
    display: inline-flex;
    font-weight: 600;
    align-items: flex-start;
    flex-wrap: wrap
}
.commentReplyTo svg {
    height: 14px;
    margin-right: 6px
}
.comments-pagination {
    display: block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
    text-align: center;
    position: relative
}
.comments-pagination a,.comments-pagination span {
    font-size: 16px;
    display: inline-flex;
    line-height: 1.4;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    align-items: center;
    width: auto;
    flex-wrap: wrap
}
.comments-pagination span.current {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: var(--themecolor);
    border-color: var(--themecolor)
}
.comments-pagination a svg,.notfound-button svg {
    height: 14px;
    margin-left: 10px
}
.no-more {
    line-height: 1.4;
    font-size: 14px;
    color: #6f6f6f
}
.no-more i {
    font-size: 18px;
    margin-top: -2px;
    color: var(--themecolor)
}
.comment-form-cookies-consent label {
    font-size: 14px;
    margin: 2px 0 0 35px;
}
.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
.comment-form-cookies-consent #wp-comment-cookies-consent {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.comment-form-cookies-consent label:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #c9c9c9;
    display: block;
    cursor: pointer;
    font-size: 17px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 5px;
}
.comment-form-cookies-consent #wp-comment-cookies-consent:checked ~ ::before {
    content: "";
    background: var(--gradient1);
}
.comment-form-cookies-consent #wp-comment-cookies-consent:checked ~ ::after {
    left: 10px;
    top: 6px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    position: absolute;
    top: 5px;
    left: 9px;
}
.media-more a:hover,.no-more,.notfound-button a:hover,.pagination .loadmore:hover,.trigger:hover,p.form-submit input[type=submit]:hover {
    opacity: .8
}
#boxDate,.comment-form,.datarentang,.image-box {
    position: relative
}

.trigger {
    position: relative;
    font-size: 16px;
    display: none;
    line-height: 1.4;
    padding: 8px 16px;
    text-align: center;
    cursor: pointer;
    vertical-align: top;
    border-radius: 4px;
    color: #fff;
    align-items: center;
    background: var(--themecolor)
}

.status {
    margin: 24px 0;
    text-align: center
}

.pagination a,.trigger {
    border: 1px solid transparent
}
.no-comments svg {
    height: 12px;
    margin-right: 10px
}
.menu.col2 {
    position: relative;
    list-style: none;
    margin: 0 -10px;
    padding: 0;
    display: flex;
    flex-wrap: wrap
}
.pagination .loadmore,.pagination a {
    font-size: 16px;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: top;
    background: var(--themecolor);
    color: #fff;
    position: relative;
    text-align: center;
    line-height: 1.4;
    cursor: pointer
}
.menu.col2 li {
    width: 50%;
    padding: 0 10px;
}
.pagination,.status {
    margin: 24px 0;
    text-align: center
}
.pagination a {
    border-radius: 4px
}
.pagination .loadmore {
    border: 1px solid transparent;
    border-radius: 4px;
    font-weight: 600
}
.status .loading {
    width: 32px;
    height: 32px;
    position: relative;
    margin: 12px auto;
    display: none
}
.status .loading .double-bounce1,.status .loading .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--themecolor);
    opacity: .6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: 2s ease-in-out infinite sk-bounce;
    animation: 2s ease-in-out infinite sk-bounce
}
.status .loading .double-bounce2 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}
@-webkit-keyframes sk-bounce {
    0%,100% {
        -webkit-transform: scale(0)
    }
    50% {
        -webkit-transform: scale(1)
    }
}
@keyframes sk-bounce {
    0%,100% {
        transform: scale(0);
        -webkit-transform: scale(0)
    }
    50% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

.media-more a svg,.pagination svg,.trigger svg {
    height: 14px;
    margin-left: 5px
}

.notif-text {
	margin:  0 0 20px;
}

/* Modern toast notification (replaces the native alert() for "Link Copied") */
.kibaran-toast {
	position: fixed;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%) translateY(20px);
	display: flex;
	align-items: center;
	gap: 8px;
	background: #1d1d1d;
	color: #fff;
	padding: 12px 20px;
	border-radius: 30px;
	font-size: 14px;
	font-family: 'Heebo', sans-serif;
	font-weight: 500;
	white-space: nowrap;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	opacity: 0;
	z-index: 999999;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	max-width: 92vw;
}

.kibaran-toast svg {
	flex-shrink: 0;
	color: #4ade80;
}

.kibaran-toast-show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Breadcrumb navigation */
.kibaran-breadcrumb {
	display: block;
	font-size: 13px;
	color: var(--font-color);
	opacity: 0.7;
	margin-bottom: 12px;
	line-height: 1.5;
}

.kibaran-breadcrumb a {
	color: var(--font-color);
	text-decoration: none;
}

.kibaran-breadcrumb a:hover {
	text-decoration: underline;
}

.kibaran-breadcrumb .sep {
	margin: 0 2px;
	opacity: 0.6;
}

/* Comment push notification popup */
.kibaran-comment-notif {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 99998;
	max-width: 320px;
	width: calc(100% - 32px);
	background: var(--warnaheader, #fff);
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
	padding: 14px 30px 14px 14px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.kibaran-comment-notif.kibaran-comment-notif-show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.kibaran-comment-notif-close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: none;
	border: 0;
	font-size: 18px;
	line-height: 1;
	color: #999;
	cursor: pointer;
	padding: 4px;
}

.kibaran-comment-notif-close:hover {
	color: var(--font-color, #1a1a1a);
}

.kibaran-comment-notif-link {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-decoration: none !important;
}

.kibaran-comment-notif-avatar {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.kibaran-comment-notif-text {
	font-size: 13px;
	line-height: 1.4;
	color: var(--font-color, #1a1a1a);
}

.kibaran-comment-notif-text strong {
	color: var(--font-color, #1a1a1a);
}

.kibaran-comment-notif-title {
	color: var(--themecolor, #009BA9);
	font-weight: 600;
}

@media screen and (max-width: 480px) {
	.kibaran-comment-notif {
		left: 8px;
		bottom: 8px;
		width: calc(100% - 16px);
	}

	body.kbn-has-bottom-nav .kibaran-comment-notif {
		bottom: calc(var(--kbn-bottom-nav-height, 64px) + 8px);
	}
}

/* Dark-mode logo variants (header & footer) -- the dark version only
   exists in the markup at all if the admin uploaded one; hidden by
   default and swapped in via [data-theme="dark"]. */
.kibaran-logo-dark {
	display: none;
}

#logo .kibaran-logo-dark,
#logo-footer .kibaran-logo-dark {
	display: none;
}

[data-theme="dark"] #logo .kibaran-logo-light,
[data-theme="dark"] #logo-footer .kibaran-logo-light {
	display: none;
}

[data-theme="dark"] #logo .kibaran-logo-dark,
[data-theme="dark"] #logo-footer .kibaran-logo-dark {
	display: inline-block;
}
@media screen and (min-width: 751px) {
	header #searchform {
		float: none;
		width: auto;
		overflow: hidden; /* buat Block Formatting Context -> isi sisa ruang */
		margin-top: 10px;
		margin-right: 14px;
		box-sizing: border-box;
	}

	header #searchform input[type='text'] {
		width: 100%;
	}

	#media-sosial-header {
		float: right;
		/* Jarak ~15px di sisi kiri grup ikon social. Ini menjaga jarak
		   ke tombol mode terang/gelap saat switcher AKTIF, sekaligus
		   mencegah ikon social menempel ke kotak pencarian saat switcher
		   DINONAKTIFKAN (elemen .kibaran-theme-switcher tidak dirender). */
		margin-left: 15px;
	}

	.kibaran-theme-switcher {
		float: right;
		margin-left: 14px;
	}

	/* Tombol tema kini di sisi kanan header, jadi dropdown-nya dibuka
	   rata kanan supaya tidak keluar dari tepi kanan container/layar. */
	.kibaran-theme-switcher .theme-switcher-dropdown {
		left: auto;
		right: 0;
	}
}

@media screen and (min-width: 751px) {
	.homepage-category.video-block {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		white-space: normal;
	}
	.homepage-category.video-block .homepage-category-name,
	.homepage-category.video-block .clr {
		flex: 0 0 100%;
		width: 100%;
	}
	.homepage-category.video-block .video-box {
		display: block;
		flex: 1 1 0;
		width: auto !important;
		min-width: 0;
		max-width: 260px;
		margin-right: 0;
		margin-bottom: 0;
		vertical-align: top;
	}
	/* Judul kartu ikut lebar kartu (jangan dipatok 180px seperti aturan lama,
	   supaya teks memakai ruang kartu yang kini fleksibel). */
	.homepage-category.video-block .video-box h3 {
		width: auto;
	}
}

@media screen and (max-width: 750px) {
	.video-box h3,
	.homepage-category.video-block .video-box h3,
	#page-fullwidth .video-box h3 {
		width: auto;
		max-width: 100%;
		line-height: 1.3;
		height: auto;
		max-height: 2.6em;
	}
}
#logo img {
	width: 208px;
}

#logo-footer img {
	width: 208px;
}

/* Gutter 20px seragam untuk header, kolom headline, blok berita, dan
   footer di desktop. */
@media screen and (min-width: 751px) {

	.fixed-wrap {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Menarik balik padding 10px pada <a> menu agar teksnya segaris di 20px. */
	.fixed-wrap .menu-utama {
		margin-left: -10px;
		margin-right: -10px;
	}

	#media-sosial-header {
		margin-right: 0;
	}

	/* Mengisi sisa ruang di kanan .demo lewat block formatting context. */
	#sidebar-right {
		float: none;
		width: auto;
		overflow: hidden;
	}

	/* Container 1024px untuk blok berita. */
	.block-kibaran {
		width: 100%;
		max-width: 1024px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}

	/* Gutter sudah dipegang .block-kibaran. */
	.block-kibaran .homepage-category,
	.block-kibaran #sidebar-header {
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	/* Tiga kolom sama lebar dengan dua celah 10px. */
	.block-kibaran a.homepage-category-headline,
	.block-kibaran .homepage-category-block,
	.block-kibaran .trending-homepage {
		width: calc((100% - 21px) / 3);
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	.block-kibaran .homepage-category-block,
	.block-kibaran .trending-homepage {
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 10px;
	}

	#footer-wrap {
		padding-left: 20px;
		padding-right: 20px;
	}

}

/* Jarak isi ke tepi kotak komentar di mobile: 8px + 8px = 16px. */
@media screen and (max-width: 750px) {

	#comments,
	#respond,
	.comment-respond {
		padding: 8px 8px 0 8px;
	}

	/* Jarak atas judul ditentukan padding container saja. */
	#respond > .comment-reply-title,
	.comment-respond > .comment-reply-title {
		margin-top: 0;
		padding-top: 0;
	}

}

/* Jarak isi ke tepi kotak komentar di desktop: 32px seragam keempat sisi. */
@media screen and (min-width: 751px) {

	#comments {
		padding: 32px;
	}

	/* Gutter sudah dipegang #comments. */
	#comments > #respond,
	#comments > .comment-respond,
	#comments > .commentsArea {
		padding-top: 0;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
	}

	#comments > .commentsArea {
		margin-bottom: 0;
	}

	/* Jarak atas judul ditentukan padding container saja. */
	#respond > .comment-reply-title,
	.comment-respond > .comment-reply-title {
		margin-top: 0;
		padding-top: 0;
	}

}

/* Warna centang "Save my name, ..." mengikuti ornamen judul "Leave a Reply". */
.comment-form-cookies-consent #wp-comment-cookies-consent:checked ~ ::after {
	border-color: var(--ornament1, #D13438);
}

/* Warna tombol "Post Comment" mengikuti ornamen judul "Leave a Reply". */
p.form-submit input[type=submit] {
	background: var(--ornament1, #D13438);
	border-color: var(--ornament1, #D13438);
}

/* Sudut membulat kartu komentar dipegang #comments; radius di sini akan
   memotong ornamen judul. */
#comments > #respond,
#comments > .comment-respond {
	border-radius: 0;
}