/*
Theme Name: Fatich News
Theme URI: https://news.fatich.web.id
Author: M. Ichzan Aryo Saputra (fatich_id)
Author URI: https://news.fatich.web.id
Description: Tema portal berita, dikembangkan dari basis kode Kobaran (Baturetno Studio) dengan perbaikan menyeluruh: pemuatan script yang benar (slider/carousel/copy-link/reading time berfungsi normal), pencegahan fatal error saat plugin WordPress Popular Posts tidak aktif, perbaikan tampilan panel Trending, perbaikan halaman arsip penulis, dan penghapusan kode debug yang tertinggal di production.
Version: 4.7.3
Requires at least: 5.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fatich-news
Tags: three-columns, right-sidebar, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, theme-options
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


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,img,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}



/* ============================================================
   FATICH NEWS DESIGN SYSTEM
   ============================================================ */
:root {
    --fn-font-sans: 'Heebo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fn-font-serif: 'PT Serif', Georgia, serif;
    --fn-text-xs: 0.75rem;
    --fn-text-sm: 0.875rem;
    --fn-text-md: 1rem;
    --fn-text-lg: 1.125rem;
    --fn-text-xl: 1.375rem;
    --fn-text-2xl: 1.75rem;
    --fn-text-3xl: 2.25rem;
    --fn-leading-tight: 1.2;
    --fn-leading-normal: 1.5;
    --fn-leading-relaxed: 1.75;
    --fn-space-1: 0.25rem;
    --fn-space-2: 0.5rem;
    --fn-space-3: 0.75rem;
    --fn-space-4: 1rem;
    --fn-space-5: 1.25rem;
    --fn-space-6: 1.5rem;
    --fn-space-8: 2rem;
    --fn-space-10: 2.5rem;
    --fn-radius-sm: 0.375rem;
    --fn-radius-md: 0.625rem;
    --fn-radius-lg: 1rem;
    --fn-shadow-sm: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
    --fn-focus-ring: 0 0 0 3px rgba(0, 155, 169, 0.28);
}

html { scroll-behavior: smooth; }

body,
button,
input,
textarea,
select { font-family: var(--fn-font-sans); }

button,
input[type='button'],
input[type='submit'],
input[type='reset'] { font: inherit; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--fn-focus, #009BA9);
    outline-offset: 2px;
    box-shadow: var(--fn-focus-ring);
}

img,
svg,
video,
iframe { max-width: 100%; }

body.fatich-menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.fatich-menu-align-left .menu-utama { text-align: left; }
.fatich-menu-align-center .menu-utama { text-align: center; }
.fatich-menu-align-right .menu-utama { text-align: right; }

.fatich-hide-menu-arrows #geserkiri,
.fatich-hide-menu-arrows #geserkanan { display: none; }

.fatich-hide-reader-count .totalpembaca { display: none; }
.fatich-show-reader-count .totalpembaca { display: block; }

@media (max-width: 782px) {
    body.admin-bar header { top: 46px; }
}
@media (min-width: 783px) {
    body.admin-bar header { top: 32px; }
}
@media (max-width: 600px) {
    html #wpadminbar { top: -46px !important; }
    body.admin-bar header { top: 0; }
}

#search-mobile-button {
    border: 0;
    background-color: transparent;
}

header #searchform { transition: opacity 180ms ease, visibility 180ms ease; }

@media (max-width: 700px) {
    header #searchform {
        display: none;
        opacity: 0;
        visibility: hidden;
    }
    header #searchform.fatich-search-open {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}

.mobile-menu-kiri-wrap[aria-hidden="true"] { display: none; }
.mobile-menu-kiri-wrap[aria-hidden="false"] { display: block; }

.judul-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fn-space-3);
}

.close-button-hamburger {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    font-size: 1.125rem;
}

.hamburger-button {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
}

.hamburger-button .atas,
.hamburger-button .tengah,
.hamburger-button .bawah { display: block; }

@media (max-width: 700px) {
    .hamburger-button { display: block; }
}

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

.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(--fn-surface);
    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;
	/* [DICABUT] overflow-x:hidden yang sebelumnya ada di sini (dan di html)
	   dicabut -- overflow apapun (termasuk cuma overflow-x) pada elemen
	   leluhur diketahui bisa merusak perhitungan position:sticky pada
	   elemen turunannya (mis. .sidebar-single-wrap tidak pernah "lepas"
	   walau artikelnya panjang). Penyebab ASLI masalah overflow
	   horizontal yang dulu memicu penambahan ini ternyata adalah fatal
	   error PHP (sudah diperbaiki tuntas jauh sebelumnya), bukan masalah
	   CSS -- jadi pengaman ini sudah tidak diperlukan lagi dan sekarang
	   malah jadi sumber bug baru. */
	width: 100%;
}

b, strong {
	font-weight: bold;
}

i, em {
	font-style: italic;
}

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

body.single {
	background: var(--fn-surface);
}
/*************************
 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(--fn-surface);
}

.hamburger-button {
	position: absolute;
	left: 0;
	top: 15%;
	display: none;
	padding: 20px;
	box-sizing: border-box;
	z-index: 1;
}

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

.mobile-menu-kiri-wrap {
	display: none;
	/* background: #fff; */
	background: var(--fn-surface);
	position: absolute;
	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);
	overflow-y: auto;
	overflow-x: hidden;
	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(--fn-text);
}

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

.mobile-menu-kiri-wrap .menu-menu-atas-container {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.mobile-menu-kiri-wrap .menu-menu-atas-container::-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(--fn-text);
}

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);
	font-weight: normal;
	border-top: 1px solid #ccc;
	text-align: left;
	padding: 20px;
	background: var(--fn-surface);
	width: 100%;
	box-sizing: border-box;
	position: relative;
	bottom: 0;
	z-index: 999999999999999;
	box-sizing: border-box;
}

div.containerdua  {
	margin-top: 20px;
	width: 60px;
	height: 25px;
	float: left;
	background-image: url('images/matahari.svg');
	background-repeat: no-repeat;
	cursor: pointer;
	filter: var(--svg);
}

div.containerdua label.switch {
	display: block;
	height: 60px;
  position: relative;
  width: 60px;
	top: 0;
	float: none;
	margin-right: 0;
}

div.containerdua label.switch input {
	display: none;
}

.modegelap {
	margin-left: 20px;
	margin-bottom: 10px;
	display: inline-block;
	color: var(--fn-text);
}

.switch {
  display: inline-block;
  height: 15px;
  position: relative;
  width: 40px;
	top: 3px;
	float: right;
	margin-right: 20px;
}

.switch input {
  display:none;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 20px;
  left: 0;
	top: -6px;
  position: absolute;
  transition: .4s;
  width: 20px;
	border: 2px solid #ccc;
}

input:checked + .slider {
  background-color: #35393B;
}

input:checked + .slider:before {
  transform: translateX(20px);
	border-color: #35393B;
	background-color: #181A1B;
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


.fixed-wrap {
	width: 100%;
	max-width: 1024px;
	background-color: var(--fn-surface);
	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: #ddd;
}

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

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

::placeholder {
  color: #ddd;
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;
}

.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 #ddd;
	background-color: #ddd;
	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 #ddd;
	border: 1px solid #ddd;
	background-color: #ddd;
	background-image: url('images/twitter.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 #ddd;
	background-color: #ddd;
	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 #ddd;
	background-color: #ddd;
	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 #ddd;
	background-color: #ddd;
	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 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);
}

.menu-utama {
	margin-top: 5px;
	overflow-y: hidden;
	overflow-x: hidden;
    white-space: nowrap;
	margin-bottom: 0;
	padding: 0;
	text-align: left;
	transition: all 3s ease;
	box-sizing: border-box;
}

#geserkiri {
	background-image: url('images/chevron-back.svg');
	background-repeat: no-repeat;
	background-size: 25px;
	width: 25px;
	height: 25px;
	border: none;
	background-color: transparent;
	cursor: pointer;
	position: absolute;
	left: -25px;
	top: 95px;
}

#geserkanan {
	background-image: url('images/chevron-back.svg');
	background-repeat: no-repeat;
	background-size: 25px;
	width: 25px;
	height: 25px;
	border: none;
	background-color: transparent;
	transform: rotate(180deg);
	cursor: pointer;
	position: absolute;
	right: -25px;
	top: 95px;
}


.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(--fn-text);
	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(--fn-text);
}

.menu-utama .current-menu-item {
	border-bottom: 5px solid #D13438;
	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);
} 

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


/* awal tambahan */
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;
}

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

/* akhir tambahan */

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

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

.menu-tag-terkini li a {
	display: block;
	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(--fn-page);
	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);
	}


.marquee {
	width: 100%;
	max-width: 910px;
	overflow: hidden;
	margin: -10px auto 0 auto;
	padding: 10px;
	box-sizing: border-box;
}

.marquee a {
	display: inline-block;
	margin-right: 5px;
	font-weight: normal;
	font-size: 14px;
	color: var(--fn-text-muted);
	position: relative;
	padding-left: 15px;
}

.marquee a:before {
	content: '\00B7';
	position: absolute;
	left: -4px;
	font-size: 40px;
	top: -16px;
	color: red;
}

.marquee a:hover {
	text-decoration: underline;
}

/*************************
 LIGHTSLIDER
************************/

.demo {
	width: 100%;
    max-width: 650px;
	float: left;
	margin-right: 10px;
}
.demo ul {
    list-style-type: none;
	padding: 0;
}
.demo li {
	border-radius: 6px;
}

.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 {
	width: 100%;
}

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

img.foto-slide-besar {
	width: 650px;
	height: auto;
}


img.foto-slide-medium{
	width: 100%;
	max-width: 323px;
	height: auto;
}

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

/**** INDOZONE ***/

.headline-indozone {
	margin-bottom: 20px;
	display: none;
}

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

.headline-indozone .lSPager img {
	border-radius: 100%;
	border: 3px solid #e60e2e;
	padding: 3px;
}

.headline-indozone .lSPager li {
	transition: .5s;
	width: 50.8px !important;
}

.headline-indozone .lSPager li:first-child {
	margin-left: 20px;
}

.headline-indozone .lSPager li:last-child {
	margin-right: 20px;
}

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

#imageGallery {
	height: auto !important;
}

#imageGallery li {
	position: relative;
}

#imageGallery li img {
	width: 100%;
}

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

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

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

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


/*************************
 HOMEPAGE (INDEX)
************************/

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

.wrap-homepage {
	width: 100%;
	max-width: 1190px;
	margin: 0 auto 0 auto;
	padding: 0 10px 0 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 #D13438;
	margin: 10px 0;
	box-sizing: border-box;
	color: var(--fn-text);
}

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

.homepage-category-name a.lihat {
	text-align: right;
	font-weight: normal;
	font-size: 16px;
	color: rgb(24, 112, 171);
	float: right;
}

.chevron-right {
	height: 18px;
	vertical-align: middle;
	opacity: 0.4;
	filter: var(--svg);
}

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

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(--fn-text);
}

.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(--fn-surface);
	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(--fn-surface);
	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;
}

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

.terbaru span {
	text-transform: capitalize;
}

.berita-terkini {
	counter-reset: listCounter;
	background: var(--fn-surface);
	height: 409px;
	padding: 0 8px 15px 8px;
	overflow-y: scroll;
	overflow-x: hidden;
	float: left;
	margin: 0;
}

.berita-terkini li {
	border-bottom: 1px solid var(--fn-border);
	counter-increment: listCounter;
	position: relative;
	padding-left: 5px;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.berita-terkini li:first-child, .trending-homepage .wpp-list li:first-child {
	border-top: 1px solid var(--fn-border-subtle);
	padding-top: 15px;
}




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

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

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

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

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

.foto-berita-terkini {
	float: right;
	margin: 0 9px 0 12px;
	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 {
	height: 618px;
	overflow-y: scroll;
	overflow-x: hidden;
}



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 {
	/* PERSIS pola asli Kobaran: position:fixed murni, tanpa JS apapun
	   yang menghentikan/melepasnya. Sudah dikonfirmasi lewat pemeriksaan
	   menyeluruh terhadap kode sumber Kobaran -- tidak ada mekanisme
	   "berhenti mengikuti" di sana. Nilai top/margin-top dikembalikan
	   persis seperti aslinya (123px + 70px), bukan digabung. */
	position: fixed;
	top: 123px;
	margin-top: 70px;
	z-index: 0;
	right: 49%;
	margin-right: -678px;
	
}

#sidebar-banner-160x600-kiri {
	position: fixed;
	top: 123px;
	margin-top: 70px;
	z-index: 0;
	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-mobile-bawah {
	position: fixed;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	z-index: 2;
	margin-bottom: 0;
	padding: 0;
	background-color: var(--fn-banner-muted);
	display: none;
}

.close-button {
	display: block;
	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%;
	position: absolute;
	right: 10px;
	bottom: 75%;
	z-index: 99999999;
	background-size: 78%;
}

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

.sidebar-banner-mobile-bawah-wrap {
	width: 100%;
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	padding: 0;
	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;
	width: 100%;
	height: auto;
	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;
	/* BUG: sebelumnya .video-box pakai display:inline-block, yang punya
	   kelemahan klasik -- spasi/baris baru di antara tag HTML ikut
	   dihitung sebagai jarak kecil tambahan (biasanya beberapa pixel per
	   celah). Perhitungan lebar aslinya (4 x 228px + 3 x 20px gap =
	   972px) SEHARUSNYA muat dalam 984px lebar kontainer, tapi celah
	   whitespace tambahan itu mendorongnya melebihi batas, jadi kartu
	   ke-4 terpaksa turun ke baris kedua. CSS Grid presisi tidak
	   terpengaruh whitespace HTML sama sekali -- dijamin 4 kolom rata
	   dalam 1 baris di desktop. Dibatasi HANYA untuk .video-box di
	   dalam .video-block (homepage Block 3) -- .video-box di halaman
	   Video terpisah (page-video.php, di dalam .video-wrap) TIDAK
	   disentuh sama sekali supaya tidak ikut berubah. */
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.video-block .homepage-category-name {
	grid-column: 1 / -1;
}

.video-block > .clr {
	display: none;
}

.video-block .video-box {
	width: 100%;
	max-width: none;
	margin-right: 0;
	margin-bottom: 0;
}

@media screen and (max-width: 900px) {
	.video-block {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 480px) {
	.video-block {
		grid-template-columns: 1fr;
	}
}

.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(--fn-border-media);
	display: inline-block;
	padding: 16px 20px;
	vertical-align: top;
	background: var(--fn-surface);
	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(--fn-text);
}

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

#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: 10px 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;
}

h3.judul-timeline-umum p {
	color: var(--fn-text);
	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: 16px;
	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: 16px;
	font-weight: normal;
	text-transform: lowercase;
}

.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: #1DA1F2;
}

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

#single-social-share-wrap a.line {
	background-color: #4FD64F;
}

#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-fatich {
	background: var(--fn-banner-muted);
	border-radius: 6px;
	padding: 10px 15px;
	margin: 20px 0;
}

.page-links-fatich > span {
	color: var(--fn-text);
}

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

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

.page-links-fatich .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;
	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;
}

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 #009BA9;
	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: #009BA9;
	color: #fff;
}

.next a:hover, .prev a:hover, a.page-numbers:hover {
	background-color: transparent;
	color: #009ba9;
}

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

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

/************************
 CATEGORY 
 ***********************/

/* SAMAKAN dengan pola Sidebar Single Post: #single-wrap pakai
   display:flex sehingga tinggi sidebar otomatis menyesuaikan tinggi
   artikel -- itulah yang membuat position:sticky di sidebar single
   post punya "ruang" untuk bekerja dengan benar (nempel lalu lepas di
   titik yang pas). Sebelumnya .wrap-category & #sidebar-category
   masih pakai float lama yang TIDAK membuat sidebar menyesuaikan
   tinggi kontennya, sehingga position:sticky tidak pernah benar-benar
   berfungsi di halaman category/tag. Dibatasi hanya untuk halaman
   category/tag (body.category / body.tag) supaya tidak mengubah
   struktur #content-wrap di homepage yang berbeda. */
body.category #content-wrap,
body.tag #content-wrap {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.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(--fn-surface);
	border: 1px solid var(--fn-border);
	border-radius: 6px;
}

.kotak-terbaru > a {
	display: block;
	border-bottom: 1px solid var(--fn-border);
	padding: 15px 0;
	text-decoration: none;
	margin: 0 20px;
}

.kotak-terbaru a img {
	float: right;
	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(--fn-text);
}

.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;
}
/*************************
 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(--fn-surface);
	margin: 0;
	text-align: left;
	padding: 15px 8px;
}

.wpp-no-data {
	/* BUG: sebelumnya display:none, jadi pesan "belum ada data trending"
	   yang baru saya tambahkan (fallback saat plugin WordPress Popular
	   Posts belum terpasang) tidak akan pernah terlihat -- panelnya balik
	   lagi jadi kotak kosong tanpa keterangan. Ditampilkan dengan gaya
	   placeholder yang rapi supaya pengunjung tahu itu memang belum ada
	   datanya, bukan halaman rusak. */
	display: block;
	padding: 20px 8px;
	text-align: center;
	color: #999;
	font-size: 13px;
	font-family: 'Heebo', sans-serif;
}

/* 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(--fn-border-subtle);
	min-height: 85px;
}

.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(--fn-text);
	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;
	/* BUG: sebelumnya tidak ada width/height, jadi kalau gambar dari plugin
	   Popular Posts belum dipotong ke ukuran kecil (tidak seperti gambar
	   "Terbaru" yang memang sudah di-crop 85x85 oleh WordPress), foto akan
	   tampil dalam ukuran aslinya yang besar/blur dan merusak layout panel
	   "Trending". Dikunci ukurannya di sini supaya konsisten kecil seperti
	   panel "Terbaru" di sebelahnya, apapun ukuran asli fotonya. */
	width: 85px;
	height: 85px;
	object-fit: cover;
	flex-shrink: 0;
}

.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(--fn-text);
}

/*************************
 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;
}
.sidebar-right-wrap, .sidebar-single-wrap, .sidebar-category-wrap {
	position: relative;
}

.sidebar-single-wrap, .sidebar-category-wrap {
	/* DIKEMBALIKAN ke sticky polos, PERSIS pola kumparan.com (dicek
	   langsung dari CSS mereka: position:sticky; top:140px; tanpa
	   max-height/overflow apapun). Percobaan sebelumnya menambahkan
	   max-height + overflow-y:auto ternyata menghasilkan kotak sidebar
	   kecil dengan scrollbar internal yang tidak sesuai referensi. */
	position: sticky;
	top: 140px;
}

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

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

.judul-sidebar-right::before, .judul-sidebar-single::before, .judul-sidebar-category::before {
	content: "";
	position: absolute;
	width: 6px;
	background: #D13438;
	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(--fn-text);
	padding-left: 5px;
	padding-bottom: 10px;
	background-color: var(--fn-surface);
	border-bottom: 1px solid var(--fn-border-subtle);
	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(--fn-text);
}

#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(--fn-surface);
	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 ****/
.scrollTop {
  position: fixed;
  right: 3%;
  bottom: 15px;
  background-color: #009BA9;
  padding: 7px 15px;
  opacity: 0.7;
  transition: all 0.4s ease-in-out 0s;
	border-radius: 100%;
}

.scrollTop a {
  font-size: 18px;
  color: #fff;
}

.arrow {
  border: solid #fff;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

/*************************
 FOOTER
************************/
footer {
	width: 100%;
	margin: 20px auto 0 auto;
	background-color: var(--fn-footer);
	box-sizing: border-box;
}

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

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


.logo-bawah-wrap > p {

}

.logo-bawah-wrap img {
	filter: var(--filter-logo-bawah);
	opacity: 0.5;
	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;
}

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(--fn-text);
	text-align: left;
	font-family: 'Heebo', sans-serif;
}

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

.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(--fn-text);
	text-align: left;
	font-family: 'Heebo', sans-serif;
}

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

.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(--fn-text);
	text-align: left;
	font-family: 'Heebo', sans-serif;
}

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

.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(--fn-text);
	text-align: left;
	font-family: 'Heebo', sans-serif;
}

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

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

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

#media-sosial-footer {
	text-align: center;	
	margin-bottom: 10px;
	display: none;
}

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

#media-sosial-footer .fb {
	border: 1px solid #ddd;
	background-color: #ddd;
	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: 15px;
}

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

#media-sosial-footer .instagram {
	border: 1px solid #ddd;
	background-color: #ddd;
	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: 15px;
}

#media-sosial-footer .youtube {
	border: 1px solid #ddd;
	background-color: #ddd;
	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: 15px;
}

#media-sosial-footer .tiktok {
	border: 1px solid #ddd;
	background-color: #ddd;
	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: 15px;
}

#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(--fn-text);
}

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
************************/

#single-wrap {
	display: flex;
	flex-direction: row;
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	background-color: var(--fn-surface);
	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: 10px;
	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(--fn-text);
}

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

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

.single-article ol li, .single-article ul li , .single-article dl dt, .single-article dl dd {
	margin-bottom: 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-top: 10px;
	margin-bottom: 20px;
	line-height: 1.15;
	color: var(--fn-text);
	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(--fn-text);
}

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

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

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

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

.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(--fn-text);
	margin-top: 25px;
	font-size: 20px;
	line-height: 1.5;
	font-family: 'PT Serif', Georgia, 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(--fn-border-subtle);
	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(--fn-border);
}

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

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

#single-related-post-wrap img {
	display: block;
	float: right;
	margin-bottom: 10px;
	margin-left: 15px;
	float: right;
	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(--fn-text);
}

.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 rgb(220, 22, 65);
	padding: 0 0 0 5px;
	line-height: 1;
	color: var(--fn-text);
}

.related-post-text-wrap {
	float: left;
	width: 80%;
}






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

.writer img.badge-check {
	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(--fn-text);
}

.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(--fn-surface);
	padding-top: 50px;
	padding-bottom: 30px;
	margin-top: 100px;
	border: 1px solid var(--fn-border-subtle);
}

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

.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(--fn-surface);
	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;
}

/*************************
PAGE TRENDING
************************/
#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(--fn-text);
}

.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(--fn-surface);
}

ul.tabs {
	font-family: 'Heebo', sans-serif;
	background: var(--fn-page);
	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(--fn-text-inverse);
	border-left: 1px solid var(--fn-border-strong);
	border-right: 1px solid var(--fn-border-strong);
}


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(--fn-text);
}

.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(--fn-text);
}

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

#ez-toc-container a {
	color: var(--fn-text-inverse) !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(--fn-text) !important;
	text-decoration: none !important;
	padding: 0 !important;
	margin: 0 !important;
}


/*************************
SEARCH PAGE
************************/
body.search {
	background-color: var(--fn-page);
}

.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(--fn-text);
}

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

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

.kotak-pencarian > a {
	display: block;
	border-bottom: 1px solid var(--fn-border);
	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(--fn-text);
}

.kotak-pencarian a img {
	float: right;
	border-radius: 4px;
	margin-left: 15px;
}

/* calendar widget */
#calendar_wrap {
	margin: 10px;
}
.widget_calendar{float:left}#wp-calendar{width:100%}#wp-calendar caption{text-align:right;color:var(--fn-text-strong);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(--fn-text-strong) }#wp-calendar tbody{color:#aaa}#wp-calendar tbody td{background:var(--fn-surface-subtle); border:2px solid #fff; text-align: center; padding: 5px; } #wp-calendar tbody td a {color: var(--fn-text);} 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(--fn-text-strong) } #calendar_wrap nav {margin-top: 15px;}

form {
	margin-right: 30px;
}

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: #009BA9;
	color: #fff;
	font-weight: bold;
	border: 1px solid #009BA9;
	 -o-transition:.5s;
  	-ms-transition:.5s;
 	 -moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition:.5s;
}

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(--fn-border-subtle);
	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(--fn-text);
}

/************************
 SWITCH COLOR 
************************/
:root {
  /* Fatich News semantic design tokens. Legacy names remain defined below only as compatibility aliases. */
  --fn-text: #424242;
  --fn-text-strong: #333;
  --fn-text-inverse: #000;
  --fn-heading: #292922;
  --fn-text-muted: #515151;
  --fn-page: #F7F7F7;
  --fn-surface: #fff;
  --fn-surface-subtle: #f5f5f5;
  --fn-contrast: #000;
  --fn-footer: #EDEBE9;
  --fn-banner-muted: #EEEEEE;
  --fn-border-media: rgb(238, 238, 238);
  --fn-border-strong: #ccc;
  --fn-border-subtle: #eee;
  --fn-border: #ddd;

	--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;
	--bg-banner-mobile-bawah: #EEEEEE;
	--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] {
  /* Semantic dark-theme values. */
  --fn-text: #DAD9D8;
  --fn-text-strong: #DAD9D8;
  --fn-text-inverse: #fff;
  --fn-heading: #818cab;
  --fn-text-muted: #ffffff;
  --fn-page: #0C0D0D;
  --fn-surface: #0C0D0D;
  --fn-surface-subtle: #242525;
  --fn-contrast: #DAD9D8;
  --fn-footer: #181A1B;
  --fn-banner-muted: #181A1B;
  --fn-border-media: #181A1B;
  --fn-border-strong: #242525;
  --fn-border-subtle: #242525;
  --fn-border: #242525;

	--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;
	--bg-banner-mobile-bawah: #181A1B;
	--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%);
}

/** CUSTOM LOGIN PAGE **/

body.page-template-page-custom-login {
	background: var(--fn-surface);
}

.page-template-page-custom-login #sidebar-header, .page-template-page-custom-login .marquee, .page-template-page-custom-login #sidebar-banner-mobile-bawah, .page-template-page-custom-login #stop {
	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(--fn-text-inverse);
}

.login-desc {
	text-align: center;
	color: var(--fn-text-inverse);
	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(--fn-text-inverse);
}


.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 #D13438;
	margin: 10px 20px;
	box-sizing: border-box;
	color: var(--fn-text);
}

.block-newsfeed-wrap {
	width: 100%;
	max-width: 650px;
/*	border: 1px solid black; */
	background: var(--fn-surface);
	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(--fn-text);
	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(--fn-surface);
}

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

.judul-sidebar-custom-homepage::before {
	content: "";
	position: absolute;
	width: 6px;
	background: #D13438;
	height: 30px;
	left: 0;
}

.judul-sidebar-custom-homepage {
	text-transform: capitalize;
	font-family: 'Heebo', sans-serif;
	font-size: 24px;
	font-weight: 900;
	color: var(--fn-text);
	padding-left: 5px;
	padding-bottom: 10px;
	background-color: var(--fn-surface);
	border-bottom: 1px solid var(--fn-border-subtle);
	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-160x600-kanan {
		right: 51.5%;
		margin-top: 20px;
	}
	
	#sidebar-banner-160x600-kiri {
		left: 51.5%;
		margin-top: 20px;
	}

}


@media screen and (max-width: 1107px) {
	/* DIKEMBALIKAN ke 1107px (nilai asli tema, sama seperti situs
	   referensi kobaran.baturetnostudio.com yang terbukti menampilkan
	   banner ini dengan normal di lebar layar ~1366px). Sebelumnya
	   sempat saya naikkan ke 1440px berdasarkan dugaan bahwa kalkulasi
	   position:fixed di atas rapuh di lebar umum -- ternyata dugaan itu
	   salah sasaran: bukti dari situs referensi (kode CSS original,
	   tidak diubah) menunjukkan kalkulasi ini sebenarnya baik-baik saja
	   di lebar tersebut. Overflow horizontal yang pernah terjadi
	   sebelumnya kemungkinan besar disebabkan HTML yang rusak akibat
	   fatal error PHP (sudah diperbaiki tuntas), bukan oleh CSS ini.
	   Pengaman overflow-x:hidden di html/body tetap dipertahankan
	   sebagai jaring pengaman tambahan yang tidak mengganggu tampilan
	   normal. */
	#sidebar-banner-160x600-kiri, #sidebar-banner-160x600-kanan {
		display: none;
	}
	
	.menu-utama {
		overflow-x: scroll;
	}
}


@media screen and (max-width: 1079px) {
	#geserkiri, #geserkanan {
		display: none;
	}
}

@media screen and (max-width: 1052px) {
	#sidebar-right {
		width: 32%;
	}
	
	.video-box{
		width: 23%;
	}
	
	#page-fullwidth .video-box {
		width: 100%;
	}
	
}

@media screen and (max-width: 1051px) {
	.category .wrap-category {
		width: 65%;
	}
	
	.category .slide-medium {
		width: 49.3%;
	}

}

@media screen and (max-width: 1042px) {
	#sidebar-right {
		width: 31%;
	}
	
	.trending-homepage {
		width: 31%;
	}
}

@media screen and (max-width: 1029px) {
	#sidebar-right {
		width: 30%;
	}

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

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

@media screen and (max-width: 1012px) {
	
	#sidebar-right {
		width: 28%;
	}

	header #searchform {
		width: 52%;
	}
}

@media screen and (max-width: 1009px) {
	
	.block-newsfeed-wrap {
		width: 60%;
	}


}

@media screen and (max-width: 1000px) {
	
	.homepage-category-block {
		width: 32%;
	}
	
	header #searchform {
		width: 50%;
	}


}

@media screen and (max-width: 999px) {
	
	.category .wrap-category {
		width : 64%;
	}

}

@media screen and (max-width: 989px) {
	
	.home .demo {
		width: 71%;
	}
	
	.home .demo li .slide-medium {
		width: 49.5%;
	} 

}

@media screen and (max-width: 981px) {
	
	.homepage-category-block {
		width: 30%;
	}

}

@media screen and (max-width: 971px) {
	
	.category .wrap-category {
		width: 63%;
	}

}

@media screen and (max-width: 972px) {
	
	header #searchform {
		width: 50%;
	}

}

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

	
	.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) {

	header #searchform {
		width: 47%;
	}
}



@media screen and (max-width: 956px) {
	
	.logo-bawah-wrap {
		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) {
	
	.tag .related-post-text-wrap {
		width: 75%;
	}

}


@media screen and (max-width: 946px) {
	
	.category .wrap-category {
		width: 60%;
	}
	
	.category .related-post-text-wrap {
		width: 75%;
	}

}

@media screen and (max-width: 939px) {
	
	.category .wrap-category {
		width: 55%;
	}
	
	.category .related-post-text-wrap {
		width: 70%;
	}

}

@media screen and (max-width: 934px) {
	
	.homepage-category-block {
		width: 29%;
	}
	
	.video-play-icon {
		width: 25% !important;
		top: 10%;
	}

}

@media screen and (max-width: 928px) {
	
	.related-post-text-wrap {
		width: 70%;
	}

}



@media screen and (max-width: 923px) {
	
	.home .demo {
		width: 66%;
	}
	
	#sidebar-right {
		width: 33%;
		height: 585px;
	}
	
	.page-template-page-home .demo {
		width: 65%;
	}
	


}

@media screen and (max-width: 914px) {
	
	header #searchform {
		width: 45%;
	}

}

@media screen and (max-width: 911px) {
	
	.block-fatich a.homepage-category-headline {
		width: 32%;
		background-position: 50% 100%;
	}

}

@media screen and (max-width: 904px) {
	
	.single .related-post-text-wrap {
		width: 75%;
	}

}

@media screen and (max-width: 899px) {
	
	.single .related-post-text-wrap {
		width: 75%;
	}
	
		.block-newsfeed-wrap{
		width: 58%;
	}
	
	p.foto-newsfeed-wrap {
		width: 45%;
	}

}

@media screen and (max-width: 881px) {
	
		header #searchform {
		width: 43%;
	}

}

@media screen and (max-width: 880px) {
	
	.tag .wrap-category {
		width: 55%;
	}

}

@media screen and (max-width: 879px) {
	
	.category .wrap-category {
		width: 55%;
	}

}

@media screen and (max-width: 876px) {
	
	a.homepage-category-headline {
		width: 31%;
	}

}

@media screen and (max-width: 857px) {
	
	p.foto-newsfeed-wrap {
		width: 35%;
	}
	
	.block-newsfeed-wrap {
		width: 55%;
	}
}

@media screen and (max-width: 850px) {
	
	.tag .related-post-text-wrap {
		width: 70%;
	}
}

@media screen and (max-width: 854px) {
	
	header #searchform {
		width: 42%;
	}
	
	a.homepage-category-headline {
		width: 30%;
	}
	
	.homepage-category-block, .trending-homepage {
		width: 31%;
	}
	
	.home .demo {
		width: 60%;
	}
	
	#sidebar-right {
		width: 39%;
		height: 555px;
	}
	
	.page-template-page-home .demo {
		width: 60%;
	}

}

@media screen and (max-width: 836px) {
	
	.single-kategori, .tanggal, .eta {
		font-size: 11.5px;
		word-spacing: -1px;
	}
	
	header #searchform {
		width: 40%;
	}

}

@media screen and (max-width: 826px) {
	
	#sidebar-right {
		height: 548px;
	}
	
	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%;
	}

}

@media screen and (max-width: 819px) {
	
	#sidebar-right {
		height: 548px;
	}
	
	#page-fullwidth .video-box {
		width: 29%;
	}
}

@media screen and (max-width: 810px) {
	
	.single .related-post-text-wrap {
		width: 75%;
	}

}

@media screen and (max-width: 799px) {
	
	.block-newsfeed-wrap {
		width: 52%;
	}
	header #searchform {
		width: 38%;
	}

}

@media screen and (max-width: 798px) {
	
	.single .related-post-text-wrap {
		width: 74%;
	}

}

@media screen and (max-width: 784px) {
	
	.single .related-post-text-wrap {
		width: 73%;
	}
	
	header #searchform {
		width: 36%;
	}

}

@media screen and (max-width: 786px) {
	
	.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) {
	
	header #searchform {
		width: 35%;
	}

}

@media screen and (max-width: 769px) {
	
	.single .related-post-text-wrap {
		width: 72%;
	}

}

@media screen and (max-width: 767px) {
	
	.video-box {
		width: 22%;
		top: 6%;
	}
	
}

@media screen and (max-width: 757px) {
	
	.single .related-post-text-wrap {
		width: 71%;
	}

}

@media screen and (max-width: 750px) {
	
	body, body.home, body.category, body.page-template-page-trending, body.single, #single-wrap, .text-wrap, body.page-template-page-home  {
		margin: 0;
		background: var(--fn-surface);
	}
	
	.hamburger-button {
		display: block;
	}
	
	.containerdua {
		display: none;
	}
	
	header #searchform {
		display: none;
		position: absolute;
		top: 115px;
		width: 100%;
		box-sizing: border-box;
	}
	
	#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;
	}
	
	.marquee {
		width: 90%;
		margin-left: 20px;
		padding: 7px 10px;
		margin-top: -15px;
	}
	
	.marquee a {
		font-size: 12px;
	}
	
	.marquee a:before {
		top: -18px;
		left: -2px;
	}
	
	
	.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(--fn-text-inverse);
	}
	
	.totalpembaca {
		font-size: 14px;
	}
	
	.menu-utama {
		display: block;
		position: relative;
		border-bottom: 1px solid var(--fn-border-strong);
		border-top: 1px solid var(--fn-border-strong);
		-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(--fn-text-inverse);
	}
	
	.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(--fn-surface);
		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(--fn-surface);
		color: var(--fn-text);
		border: 1px solid #ccc;
		margin-top: 10px;
	}
	
	.mobile-menu-kiri ul.sub-menu {
		display: block;
		box-shadow: none;
		background: var(--fn-surface);
		position: relative;
	}
	
	.mobile-menu-kiri ul.sub-menu > li > a {
		padding: 10px 20px;
		font-size: 14px;
		font-weight: normal;
		color: var(--fn-text);
	}
	
	.mobile-menu-kiri-wrap .menu-menu-atas-container:after, .mobile-menu-kiri-wrap .menu-menu-atas-container: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-y: visible;
		width: 100%;
		max-width: 100%;
	}
	
	.sidebar-right-wrap > div {
		border: none;
		border-radius: 0;
	}
	
	.judul-sidebar-right, .judul-sidebar-single, .judul-sidebar-category {
		font-size: 20px;
		color: var(--fn-text-inverse);
	}
	
	.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;
	}
	
	#sidebar-banner-mobile-bawah {
		display: block;
	}
	
	#content-wrap, #sidebar-header {
		padding-left: 15px;
		padding-right: 15px;
	}
	
	#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 {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
	
	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%;
	}
	
	/* BUG BARU: dari fix sebelumnya (#content-wrap jadi display:flex
	   untuk category/tag) -- di breakpoint mobile ini .wrap-category &
	   #sidebar-category sudah diberi width:100% supaya bertumpuk
	   vertikal, tapi karena parent-nya masih flex-direction:row (baris),
	   keduanya tetap dipaksa sejajar berbagi satu baris sempit alih-alih
	   bertumpuk -- itulah yang membuat tampilan mobile jadi terjepit
	   dua kolom sempit. Diubah jadi flex-direction:column supaya
	   benar-benar bertumpuk penuh di layar sempit. */
	body.category #content-wrap,
	body.tag #content-wrap {
		flex-direction: column;
	}
	
	.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: 0;
	}
	
	.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(--fn-surface);
		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: 340px;
	}
	
	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(--fn-text-inverse);
	}
	
	.judul-block-newsfeed, .judul-sidebar-custom-homepage {
		font-size: 20px;
		color: var(--fn-text-inverse);
	}
	
	.homepage-category-name a, .homepage-category-video a {
		color: var(--fn-text-inverse);
	}
	
	#sidebar-right ul.wpp-list {
		padding-bottom: 0;
	}
	
	.hidden .owl-dots {
		display: none;
	}
	
}

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

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

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

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

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

	.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 {
		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;
	}
	
	ul.menu-bawah-mobile, #media-sosial-footer { 
		display: block;
	}
	
	.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(--fn-text);
		padding-bottom: 20px;
		line-height: 1.7;
}
	

}

@media screen and (max-width: 420px) {
	
	.single .related-post-text-wrap {
		width: 69%;
	}
	
	.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: 320px;
	}
	
}


@media screen and (max-width: 380px) {
	
	.related-post-text-wrap {
		width: 65%;
	}
	
	.author .writer img.badge-check {
		left: 57%;
	}
	
}

@media screen and (max-width: 335px) {
	
	.related-post-text-wrap {
		width: 60%;
	}
	
}

@media screen and (max-width: 320px) {
	
	.lihat span, .eta {
		display: none;
	}
}

@media screen and (max-width: 315px) {
	
	.category .related-post-text-wrap {
		width: 63%;
	}
}

@media screen and (max-width: 280px) {
	
	.author .writer img.badge-check {
		left: 50%;
	}
	
}


/* ============================================================
   SECTION "ARTIKEL LAINNYA" (bawah homepage, setelah semua Block)
   Konsisten dengan gaya section lain di tema: judul border-left merah
   aksen, kartu dengan bayangan halus & radius 6px seperti homepage-
   category-block yang sudah ada.
   ============================================================ */

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

.more-articles-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 15px;
}

.more-articles-card {
	background-color: var(--fn-surface);
	border-radius: 6px;
	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;
	transition: transform 0.2s ease;
}

.more-articles-card:hover {
	transform: translateY(-3px);
}

.more-articles-card a {
	display: block;
	color: inherit;
}

.more-articles-thumb {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
}

.more-articles-text {
	padding: 12px 14px 16px 14px;
}

.more-articles-cat {
	display: inline-block;
	color: #D13438;
	font-family: 'Heebo', sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.more-articles-text h3 {
	font-family: 'Heebo', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--fn-text);
	margin: 0 0 8px 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.more-articles-date {
	font-family: 'Heebo', sans-serif;
	font-size: 12px;
	color: #999;
	margin: 0;
}

.more-articles-btn {
	display: block;
	margin: 25px auto 0 auto;
	padding: 12px 32px;
	background-color: #D13438;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-family: 'Heebo', sans-serif;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.more-articles-btn:hover {
	background-color: #a8282b;
}

.more-articles-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.more-articles-done {
	text-align: center;
	color: #999;
	font-family: 'Heebo', sans-serif;
	font-size: 13px;
	margin-top: 25px;
}

.more-articles-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 25px;
	flex-wrap: wrap;
}

.more-articles-pagination a {
	display: inline-block;
	min-width: 36px;
	text-align: center;
	padding: 8px 10px;
	border-radius: 6px;
	background-color: var(--fn-surface);
	color: var(--fn-text);
	font-family: 'Heebo', sans-serif;
	font-size: 14px;
	text-decoration: none;
}

.more-articles-pagination a:hover {
	background-color: #D13438;
	color: #fff;
}

.more-articles-pagination a.apage-current {
	background-color: #D13438;
	color: #fff;
	font-weight: 700;
}

@media screen and (max-width: 900px) {
	.more-articles-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 480px) {
	.more-articles-grid {
		grid-template-columns: 1fr;
	}
}

/******************
 * AI NEWS -- kotak pembeda visual untuk paragraf sisipan produk
 * afiliasi di dalam artikel berita (mode "news_with_affiliate").
 * SENGAJA tanpa teks disclosure apapun (sesuai keputusan eksplisit),
 * cuma pembeda visual halus lewat border+background supaya pembaca
 * yang jeli tetap bisa membedakan dari paragraf berita biasa.
 ******************/
.fatich-produk-sisipan {
	border-left: 3px solid var(--border-video-box, #ddd);
	background: var(--bg-color-dua, #f7f7f7);
	padding: 12px 16px;
	margin: 20px 0;
	border-radius: 4px;
}

/******************
 * [DIPERBAIKI] Layout 3 kolom Block Kategori Homepage (kartu headline +
 * "Terbaru" + "Trending") -- lihat komentar lengkap di
 * inc/homepage/category-block.php untuk kronologi bug-nya.
 *
 * Diverifikasi lewat pengukuran nyata (render markup+CSS asli tema ini
 * di browser headless, ukur bounding box tiap kartu per lebar layar):
 * total lebar 3 kartu versi lama (320px + 320px+margin20 + 320px+margin10
 * = 990px) melebihi lebar konten kontainer .homepage-category (984px
 * setelah padding) -- overflow ~6px yang membuat kartu ketiga "pecah
 * baris" di HAMPIR SEMUA lebar layar (termasuk desktop lebar), bukan
 * cuma di breakpoint tertentu. Ditambah lusinan media query lama
 * (baris ~4600-4900 & ~5170 di atas) yang masing-masing mengubah width
 * salah satu dari 3 elemen ini secara independen di breakpoint
 * berbeda-beda tanpa memperhitungkan totalnya -- membuat overflow ini
 * muncul-hilang tidak konsisten (kadang kebetulan pas 3 kolom, kadang
 * tidak) tergantung lebar layar persis.
 *
 * Rule di bawah ini TIDAK menghapus rule lama (supaya minim risiko ke
 * bagian lain yang mungkin masih memakai class-class ini) -- cukup
 * override otoritatif untuk elemen yang sudah dibungkus wrapper baru
 * ".fatich-category-row" (flexbox): lebar 3 kolom jadi dihitung
 * OTOMATIS oleh flexbox (dijamin selalu pas, tidak pernah overflow)
 * di semua lebar layar >= 751px, tanpa perlu lagi menambal satu-satu
 * puluhan breakpoint lama. Di lebar <=750px (mobile), perilaku lama
 * TETAP DIPERTAHANKAN (Trending disembunyikan, 1 kolom) -- rule mobile
 * lama tidak disentuh sama sekali.
 ******************/
.fatich-category-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 14px;
	width: 100%;
}

.fatich-category-row > a.homepage-category-headline,
.fatich-category-row > .homepage-category-block,
.fatich-category-row > .trending-homepage {
	/* flex-basis 0 (bukan "auto" atau px tetap) -> 3 kolom SELALU
	   dibagi rata 1/3 lebar row, MENYUSUT bersama-sama secara mulus
	   kalau layar menyempit (bukan malah "pecah baris" ke bawah kalau
	   salah satu tidak muat di lebar tetapnya) -- inilah yang bikin
	   percobaan pertama (flex-basis 280px tetap) masih pecah baris di
	   bawah ~900px, sudah dicek ulang lewat pengukuran browser.
	   min-width:0 WAJIB ada -- default flex item punya min-width:auto
	   yang mengikuti lebar konten di dalamnya (mis. ukuran gambar
	   thumbnail tetap), jadi tanpa ini kolom tetap bisa "menolak"
	   menyusut sampai batas tertentu lalu memicu wrap juga.
	   Semua rule width/max-width/float lama pada selector-selector ini
	   (dari media query manapun) otomatis TIDAK dipakai lagi untuk
	   perhitungan lebar utama begitu flex-basis bukan "auto" -- tidak
	   perlu lagi menang perang cascade/specificity satu-satu. */
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
	width: auto;
	float: none;
	margin: 0;
	box-sizing: border-box;
}

@media screen and (max-width: 750px) {
	/* Selaras dengan rule mobile lama (baris ~5171/5180/5184 di atas):
	   Trending tetap disembunyikan & headline+Terbaru tetap 1 kolom
	   penuh di layar sangat sempit -- flex row-nya dibuat transparan
	   (block biasa) supaya tidak bentrok dengan display:none yang
	   sudah ada pada .trending-homepage di breakpoint ini. */
	.fatich-category-row {
		display: block;
	}
}

/* ============================================================
   Fatich News — archive/article UX polish
   Keep editorial markup compatible while giving archive states,
   article content and reusable post lists a shared contract.
   ============================================================ */
.fatich-archive-page,
.fatich-search-page,
.fatich-author-page,
.fatich-category-page,
.fatich-tag-page {
  min-width: 0;
}

.fatich-page-title,
.fatich-article-title {
  text-wrap: balance;
}

.fatich-post-list {
  min-width: 0;
}

.fatich-post-list > a {
  display: block;
  min-width: 0;
}

.fatich-empty-state {
  display: grid;
  gap: .5rem;
  margin: 1.25rem 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius, 12px);
  background: var(--fn-surface-subtle);
  color: var(--fn-text);
  text-align: center;
}

.fatich-empty-state h2,
.fatich-empty-state p {
  margin: 0;
}

.fatich-empty-state h2 {
  color: var(--fn-heading);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.fatich-empty-state p {
  color: var(--fn-text-muted);
}

.fatich-single-article {
  min-width: 0;
}

.fatich-article-title {
  max-width: 26ch;
  margin-inline: auto;
  color: var(--fn-heading);
}

.fatich-article-content {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fatich-article-content img,
.fatich-article-content video,
.fatich-article-content iframe {
  max-width: 100%;
}

.fatich-related-section {
  min-width: 0;
}

@media (max-width: 767px) {
  .fatich-article-title {
    max-width: none;
    font-size: clamp(1.65rem, 7vw, 2.15rem);
    line-height: 1.16;
  }

  .fatich-empty-state {
    margin-block: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fatich-empty-state {
    scroll-behavior: auto;
  }
}



/* Shared article related-content contract. */
.fatich-related-section{margin-top:28px;padding-top:4px}
.fatich-related-section .single-judul-related-post{margin-top:0}