/*
Theme Name: V10 News
Version: 10.0
*/

/* RESET */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* =========================
   CSS VARIABLES
========================= */

:root{
--bg:#fcfcfc;
--text:#333;

--header:#ffffff;
--card:#ffffff;
--menu:#ffffff;

--icon-bg:#f0f0f0;
--icon-color:#666;

--border:#eee;
--shadow:rgba(0,0,0,.08);

--dropdown:#ffffff;
--breaking:#f5f5f5;

--section:#eee;

--line:#eee;

--footer:#111;
--footer-text:#fff;
--footer-bg:#3f3f3f;

--hover:#ff2b2b;
}

/* DARK MODE */
body.dark{
--bg:#1f2020;
--text:#eee;

--header:#191919;
--card:#282828;
--menu:#191919;

--icon-bg:#222;
--icon-color:#fff;

--border:#333;
--shadow:rgba(245,243,243,.1);

--dropdown:#1a1a1a;
--breaking:#303134;

--section:#3C3C3C;

--line:#323232;

--footer:#000;
--footer-text:#fff;
--footer-bg:#191919;
}

body{
font-family:'Poppins', sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.5;
overflow-x:hidden;
}

h1,h2,h3,h4,h5{
font-weight:600;
}

/* CONTAINER */
.container{
max-width:1100px;
margin:auto;
padding:0 0px;
}

/* HEADER TOP */
.header-top{
background:var(--header);
color:var(--text);
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 0;
}

.logo{
font-size:28px;
font-weight:600;
color:#4cc3ff;
padding: 0;
text-transform: uppercase;
letter-spacing: -1px;
}

.logo a{
color:inherit;
text-decoration:none;
display:inline-block;
}

.logo span{
color:#ff2b2b;
}

/* jika pakai logo image */
.logo .custom-logo-link{
display:block;
}

.logo .custom-logo{
height:34px;
width:auto;
display:block;
}

/* matikan style text saat logo gambar */
.logo:has(.custom-logo){
font-size:0;
letter-spacing:0;
}

.header-right{
display:flex;
align-items:center;
gap:8px;
}

.header-search{
position:relative;
display:flex;
align-items:center;
margin-right:4px; /* jarak sebelum icon medsos */
order:-1;
}

/* tombol bulat */
.search-toggle{
width:34px;
height:34px;
background:var(--icon-bg);
border-radius:50%;
border:0;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
color:var(--icon-color);;
font-size:14px;
}

/* input */
.search-box{
position:absolute;
right:45px;
top:50%;
transform:translateY(-50%);
width:0;
overflow:hidden;
transition:.3s;
}

.search-box input{
width:245px;
padding:8px 12px;
border-radius:20px;
border:1px solid #ddd;
outline:none;
font-family:Poppins;
}

/* aktif */
.header-search.active .search-box{
width:245px;
}

.header-social{
display:flex;
gap:8px;
}


.header-social a{
width:34px;
height:34px;
background:var(--icon-bg);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:var(--icon-color);
font-size:16px;
text-decoration:none;
border:0;
box-shadow:none;
}

.header-social a:hover{
background:#e5e5e5;
}



/* MENU */
/* MENU BAR */
.main-menu {
background:var(--menu);
box-shadow:
0 1px 0 var(--shadow),
0 -1px 0 var(--shadow);
position:sticky;
top:0px;
z-index: 999;
}


.menu a{
font-weight:500;
}

/* WRAP */
.menu-wrap{
display:flex;
align-items:center;
}

/* FIX WP MENU */
.menu-wrap ul{
display:flex;
align-items:center;
gap:20px;
list-style:none;
margin:0;
padding:0;
width:100%;
}

/* MENU ITEM */
.menu-wrap li{
position:relative;
}



.menu-wrap a:hover{
color:#ff2b2b;
}

/* DROPDOWN */
.menu-wrap li ul{
position:absolute;
top:100%;
left:0;
background:#fff;
min-width:200px;
display:none;
flex-direction:column;
box-shadow:0 10px 20px rgba(0,0,0,.1);
}

.menu-wrap li:hover ul{
display:flex;
}

.menu-wrap li ul a{
color:#111;
padding:10px;
}



/* BREAKING */
.breaking-bar{
background:var(--breaking);
color:#fff;
padding:8px 0;
font-size:13px;
}

.breaking-label{
background:#ff0000;
padding:3px 10px;
margin-right:10px;
font-weight:bold;
white-space: nowrap;
border-radius: 5px;
}

.breaking-bar marquee{
color:var(--text);
}

.breaking-wrap{
display:flex;
align-items:center;
}

.breaking-track a{
color:var(--text);
text-decoration:none;
white-space:nowrap;
}

.breaking-track a:hover{
text-decoration:underline;
}

.breaking-ticker{
overflow:hidden;
flex:1;
}

.breaking-track{
display:flex;
width:max-content;
animation:breaking 60s linear infinite;
}

.breaking-group{
display:flex;
gap:15px;
white-space:nowrap;
padding-right:15px;
}

.breaking-group a{
color:var(--text);
text-decoration:none;
}

.breaking-group a:hover{
text-decoration:underline;
}

@keyframes breaking{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-50%);
}
}

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

/* MENU */
.menu-bar{
background:#d50000;
position:sticky;
top:0;
z-index:9999;
}

.menu-wrap{
display:flex;
align-items:center;
gap:20px;
overflow-x:auto;
white-space:nowrap;
}

.menu-wrap a{
color:var(--text);
text-decoration:none;
padding:10px 13px 10px 0px;
font-size:14px;
font-weight:600;
display:inline-block;
}

.menu-wrap a:hover{
background:none;
}

/* DROPDOWN */
.menu-item{
position:relative;
}

.submenu{
display:none;
position:absolute;
background:#fff;
top:100%;
left:0;
min-width:200px;
box-shadow:0 5px 15px rgba(0,0,0,.1);
}

.submenu a{
color:#111;
display:block;
padding:10px;
}

.menu-item:hover .submenu{
display:block;
}

.menu-right{
margin-left:auto;
display:flex;
align-items:center;
}

.dark-switch{
background:var(--icon-bg);
border:0;
width:34px;
height:34px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:14px;
color:var(--icon-color);
}

/* dark mode */
body.dark .dark-switch{
background:#222;
color:#fff;
}
.dark-switch:hover{
color:#ff2b2b;
}

/* SEARCH */
.menu-search{
color:#fff;
cursor:pointer;
font-size:18px;
}

/* BREAKING */
.breaking{
display:flex;
align-items:center;
background:#111;
color:#fff;
padding:8px;
}

.breaking span{
background:#ff0000;
padding:5px 10px;
margin-right:10px;
}

/* MAIN LAYOUT */
.main {
display: grid;
grid-template-columns:1fr 300px;
gap: 15px;
margin-top: 15px;
}

/* HERO SLIDER */
.hero-slider{
position:relative;
overflow:hidden;
border-radius:10px;
margin-bottom:15px;
}

.hero-track{
display:flex;
transition:.4s ease;
}

.hero-slide{
min-width:100%;
position:relative;
}

.hero-slide img{
width:100%;
height:400px;
object-fit:cover;
display:block;
}

.hero-caption{
position:absolute;
bottom:0;
left:0;
right:0;
padding:20px;
background:linear-gradient(transparent,rgba(0,0,0,.8));
color:#fff;
}

/* kategori */
.hero-cat{
display:inline-block;
background:#e60023;
color:#fff;
font-size:12px;
padding:4px 8px;
border-radius:4px;
margin-bottom:6px;
font-weight:600;
}

/* judul */
.hero-caption h2{
font-size:26px;
margin:5px 0;
line-height:1.3;
}

/* tanggal */
.hero-meta{
font-size:12px;
opacity:.9;
}

.hero-prev,
.hero-next{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,25%);
color:#fff;
border:0;
width:35px;
height:70px;
cursor:pointer;
z-index:10;
border-radius:10px;
}

.hero-prev{left:15px;}
.hero-next{right:15px;}

.hero-dots{
position:absolute;
bottom:15px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:6px;
z-index:20;
}

.hero-dot{
width:10px;
height:10px;
background:#fff;
opacity:.5;
border-radius:50%;
cursor:pointer;
transition:.3s;
}

.hero-dot.active{
opacity:1;
background:#ff0000;
}

/* PILIHAN SLIDER */
.pilihan-wrap{
overflow:hidden;
position:relative;
}

.pilihan-track{
display:flex;
gap:14px; /* ganti padding slide */
transition:.4s ease;
}

.pilihan-slide{
flex:0 0 calc(33.333% - 9.33px);
height: 296px;
}

/* SINGLE POST */
.single-wrap{
display:grid;
grid-template-columns:3fr 300px;
gap:15px;
margin-top:15px;
}

.single-body ol{
padding-left:40px;
}

.single-body ul{
padding-left:40px;
}

.single-body li{
margin-bottom:10px;
line-height:1.7;
}

.single-content ol{
padding-left:40px;
}

.single-content ul{
padding-left:40px;
}

.single-content li{
margin-bottom:10px;
line-height:1.7;
}

.single-content{
background:var(--card);
padding:15px;
border-radius:10px;
box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.single-title{
font-size:32px;
font-weight:bold;
margin-bottom:10px;
line-height:1.3;
}

.single-meta{
font-size:13px;
color:#777;
margin-bottom:10px;
}

.single-thumbnail img{
width:100%;
height:auto;
border-radius:4px;
margin-bottom:15px;
}

.image-caption{
font-size:13px;
color:#777;
margin-bottom:10px;
line-height:1.4;
font-style:italic;
}

.single-content p{
font-size:16px;
line-height:1.7;
margin-bottom:15px;
}

.single-content h2,
.single-content h3{
margin:0px 0px 0px;
}

.single-content img{
max-width:100%;
height:auto;
border-radius:10px;
margin:10px 0;
}

/* SHARE */
.share-box{
display:flex;
gap:10px;
margin:20px 0;
flex-wrap:wrap;
}

.share-btn{
display:flex;
align-items:center;
gap:6px;
padding:8px 12px;
border-radius:4px;
color:#fff;
text-decoration:none;
font-size:13px;
}

.share-btn i{
font-size:14px;
}

.share-btn.fb{background:#1877f2;}
.share-btn.wa{background:#25d366;}
.share-btn.tw{background:#000;}
.share-btn.tg{background:#229ED9;}
.share-btn.copy{background:#555;}


.pagination{
margin:20px 0;
}

.pagination ul{
display:flex;
gap:5px;
flex-wrap:wrap;
list-style:none;
padding:0;
margin:0;
}

.pagination li a,
.pagination li span{
display:block;
padding:6px 10px;
background:#eee;
text-decoration:none;
color:#333;
border-radius:4px;
font-size:13px;
}

.pagination .current{
background:#d50000;
color:#fff;
}

.pagination a:hover{
background:#ddd;
}

/* pagination single post */

.single-page{
display:flex;
gap:6px;
margin:15px 0;
}

.single-page .post-page-numbers{
display:inline-block;
padding:6px 10px;
background:#eee;
color:#333;
border-radius:4px;
font-size:13px;
text-decoration:none;
}

/* hover */
.single-page .post-page-numbers:hover{
border:2px solid #d40000;
padding:4px 8px;
background:#fff;
color:#d40000;
}

/* active page */
.single-page .post-page-numbers.current{
background:#d40000;
color:#fff;
}

/* tombol ALL */
.single-page .post-page-numbers.all{
background:#eee;
font-weight:600;
}

/* ALL aktif */
.single-page .post-page-numbers.all.current{
background:#d40000;
color:#fff;
}

.single-page .post-page-numbers{
border:1px solid #ddd;
}

.single-page .post-page-numbers.current{
border-color:#d40000;
}

.post-page-numbers{
background:#eee;
padding:6px 10px;
border-radius:4px;
}

.post-page-numbers.current{
background:#d40000;
color:#fff;
}

/* single readmore */
.single-page{
margin:20px 0;
display:flex;
gap:5px;
}

.single-page span,
.single-page a{
display:inline-block;
padding:6px 10px;
background:#eee;
border-radius:4px;
text-decoration:none;
color:#333;
font-size:13px;
}

.single-page .post-page-numbers.current{
background:#d50000;
color:#fff;
}

.single-page .all{
background:#111;
color:#fff;
padding:6px 10px;
border-radius:4px;
text-decoration:none;
font-size:13px;
}

.single-page .all:hover{
background:#000;
}

.single-page .all{
background:#111;
color:#fff;
}

.single-page .all.current{
background:#d50000;
}

/* RELATED */
.related{
margin-top:30px;
}

.related-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:15px;
}

.related .card img{
height:150px;
}

/* SIDEBAR SINGLE */
.single-sidebar{
background:#fff;
padding:15px;
border-radius:4px;
box-shadow:0 2px 6px rgba(0,0,0,.08);
height:fit-content;
position:sticky;
top:100px;
}

.sidebar-title{
font-size:20px;
font-weight:700;
margin-bottom:15px;
display:flex;
align-items:baseline;
gap:10px;
}

.sidebar-title:after{
content:"";
width:60px;
height:3px;
background:#d50000;
margin: 7px;
}

/* item */
.trending-item{
display:flex;
gap:15px;
padding:12px 0;
border-bottom:1px solid #eee;
text-decoration:none;
color:inherit;
}

/* nomor */
.trending-no{
font-size:32px;
font-weight:800;
color:#d50000;
width:35px;
flex-shrink:0;
padding: 0px 5px;
}

/* judul */
.trending-content h4{
font-size:15px;
margin:0 0 6px 0;
line-height:1.4;
}

/* meta */
.trending-meta{
font-size:12px;
color:#888;
}

.trending .trending-item:last-child{
border-bottom:none;
}

.trending + .sidebar-title{
margin-top:15px;
}

.tag-populer a{
background:#eee;
padding:6px 12px;
border-radius:20px;
font-size:13px;
color:#333;
text-decoration:none;
transition:.2s;
font-weight: 600;
}

.tag-populer a:hover{
background:#d50000;
color:#fff;
}

.tag-populer{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:10px;
}

.sidebar-title + .tag-populer{
margin-bottom:15px;
}

.sidebar .tag-populer{
margin-top:12px;
padding-top:12px;
}



/* FULL WIDTH SECTION */
.utama-section{
background:var(--section);
padding:15px 15px;
margin-top:20px;
border-radius: 10px;
}

.utama-wrap{
overflow:hidden;
}

.utama-track{
display:flex;
gap:15px;
transition:.4s ease;
}

/* card */
.utama-slide a{
display:block;
text-decoration:none;
color:inherit;
}

/* gambar konsisten */
.utama-wrap{
overflow:hidden;
}

.utama-track{
display:flex;
gap:15px;
}

.utama-slide{
flex:0 0 23.9%;
}

/* KATEGORI GRID */

.kategori-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:20px;
}

.kategori-col{
display:flex;
flex-direction:column;
}

/* title */
.kategori-title{
font-size:20px;
font-weight:700;
margin-bottom:10px;
position:relative;
display:flex;
align-items:baseline;
gap:10px;
}



.kategori-title:after{
content:"";
width:60px;
height:3px;
background:#d50000;
}

/* BIG */
.kategori-big{
display:block;
text-decoration:none;
color:inherit;
}

.kategori-big img{
width:100%;
height:200px;
object-fit:cover;
border-radius:10px;
margin-bottom:0px;
}

.kategori-big h3{
font-size:16px;
margin:5px 0;
line-height:1.4;
}

.kategori-big p{
font-size:13px;
color:#666;
margin-bottom:5px;
}

/* LIST */
.kategori-list{
margin-top:10px;
display:flex;
flex-direction:column;
gap:10px;
}

.kategori-item{
display:flex;
gap:10px;
text-decoration:none;
color:inherit;
}

.kategori-item img{
width:85px;
height:85px;
object-fit:cover;
border-radius:8px;
}

.kategori-item h4{
font-size:15px;
margin:0;
line-height:1.4;
height:calc(1.4em * 3);

display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}



/* GRID */
.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
}

/* CARD */
.card{
background:var(--card);
box-shadow:0 2px 6px rgba(0,0,0,.08);
border-radius:10px;
overflow:hidden;
}

.card-content{
padding: 0 15px 15px 15px;
}

.card-cat{
display:inline-block;
color:#e60023;
font-size:12px;
font-weight:600;
margin-bottom:0px;
}

.card-meta{
font-size:12px;
color:#777;
padding: 5px 0 0;
}

.card img{
width:100%;
height:160px;
object-fit:cover;
}

.card h3{
padding:0 0 10px 0;
font-size:15px;
line-height:1.4;
height:calc(1.4em * 3);

display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

.card a{
text-decoration:none;
color:var(--text);
}

/* LATEST */
.latest-item{
display:flex;
gap:15px;
margin-bottom:18px;
align-items:flex-start;
}

.latest-item a{
display:flex;
gap:15px;
text-decoration:none;
color:inherit;
width:100%;
}

.latest-item img{
width:220px;
height:120px;
object-fit:cover;
border-radius:10px;
flex-shrink:0;
}

.latest-content{
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
}

.latest-cat{
color:#e60023;
font-size:12px;
font-weight:600;
margin-bottom:4px;
display:block;
}

.latest-item h3{
font-size:18px;
margin:3px 0;
line-height:1.3;
}

.latest-meta{
font-size:12px;
color:#888;
}

#load-more{
display:block;
padding:10px 18px;
border-radius:10px;
border:0;
background:#e60023;
color:#fff;
cursor:pointer;
margin:20px auto;
font-weight: 700;
}

.section button{
display:block;
margin:auto;
}

/* sidebar hanya mobile */
.mobile-sidebar{
display:none;
}

/* hamburger hanya mobile */
.hamburger{
display:none;
}

/* HAMBURGER BASE */
.hamburger{
display:none;
width:34px;
height:34px;
background:var(--icon-bg);
border-radius:50%;
border:0;
align-items:center;
justify-content:center;
flex-direction:column;
gap:3px;
cursor:pointer;
}

/* garis */
.hamburger span{
width:16px;
height:2px;
background:var(--icon-color);
display:block;
}

/* overlay hanya mobile */
.menu-overlay{
display:none;
}

/* SIDEBAR */
.sidebar{
/*background:var(--card);
padding:12px;
border-radius:10px;
box-shadow:0 2px 6px rgba(0,0,0,.08);*/
height:fit-content;
position:sticky;
top:55px;
}

/* TRENDING */
.trending a{
display:flex;
gap:10px;
padding:8px 0;
border-bottom:1px solid var(--line);
text-decoration:none;
color:var(--text);
}

.trending img{
width:70px;
height:50px;
object-fit:cover;
}

/* SECTION */
.section{
margin-top:20px;
}

.section-title{
font-size:20px;
font-weight:700;
margin-bottom:0px;
display:flex;
align-items:baseline;
gap:10px;
padding-bottom: 10px;
}

.section-title:after{
content:"";
width:60px;
height:3px;
background:#d50000;
}



/* FOOTER */
.footer{
background:var(--footer-bg);
color:#fff;
margin-top:40px;
padding-top:30px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:30px;
}

.footer-logo{
font-size:28px;
font-weight:600;
color:#4cc3ff;
text-transform: uppercase;
letter-spacing: -1px;
}

.footer-logo a{
font-size:inherit;
color:inherit;
text-decoration:none;
}

.footer-logo span{
color:#ff2b2b;
}

.footer-logo .custom-logo{
height:36px;
width:auto;
display:block;
}

.footer-logo .custom-logo-link{
display:inline-block;
font-size:0;
}

.footer-follow{
margin:10px 0;
}

.footer-social{
display:flex;
gap:10px;
}

.footer-social a{
width:34px;
height:34px;
background:#555;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
text-decoration: none;
}

.footer-col h4{
margin-bottom:10px;
font-size:14px;
text-transform:uppercase;
}

.footer-col ul{
list-style:none;
padding:0;
margin:0;
}

.footer-col li{
margin-bottom:4px;
}

.footer-col ul a{
color:#ddd;
text-decoration:none;
font-size:14px;
}

.footer-bottom{
border-top:1px solid #666;
margin-top:20px;
padding:15px 0;
text-align:center;
font-size:13px;
}


.scroll-top{
position:fixed;
right:20px;
bottom:20px;
width:40px;
height:40px;
background:#d50000;
color:#fff;
border:0;
border-radius:4px;
cursor:pointer;
z-index:99999;

opacity:0;
visibility:hidden;
transition:.3s;
}

.scroll-top.show{
opacity:1;
visibility:visible;
}

.date-filter{
display:flex;
gap:8px;
margin:15px 0 20px;
align-items:center;
}

.date-filter input{
padding:8px 12px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
font-family:inherit;
background:#fff;
cursor:pointer;
}

.date-filter input:focus{
outline:none;
border-color:#d50000;
box-shadow:0 0 0 2px rgba(213,0,0,.1);
}

.date-filter button{
background:#d50000;
color:#fff;
border:0;
padding:8px 14px;
border-radius:6px;
font-size:14px;
cursor:pointer;
font-weight:600;
}

.date-filter button:hover{
background:#b80000;
}

.date-filter{
display:flex;
gap:10px;
align-items:center;
margin:15px 0 20px;
}

.date-filter input{
padding:8px 12px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
background:#fff;
}

.date-filter button{
display:flex;
align-items:center;
gap:6px;
background:#d50000;
color:#fff;
border:0;
padding:8px 14px;
border-radius:6px;
font-weight:600;
}

.date-filter label{
font-weight:600;
font-size:14px;
}

.homepage-wrap{
display:flex;
gap:30px;
align-items:flex-start;
}

.main-content{
flex:1;
min-width:0;
}

.sidebar-content{
width:300px;
}

.home-ads{
margin:15px 0;
text-align:center;
}

.home-ads img{
max-width:100%;
height:auto;
}



.home-ads ul{
list-style:none;
padding:0;
margin:0;
}

.home-ads li{
list-style:none;
}

.home-ads figure{
margin:0;
}

.sidebar-sticky{
position:sticky;
top:20px;
}

.sidebar-section{
margin-bottom:25px;
}

.sidebar-title{
font-size:20px;
font-weight:700;
margin-bottom:10px;
}

.sidebar-ads{
margin:0 0 15px;
text-align:center;
list-style: none;
}

.sidebar-ads img{
max-width:100%;
height:auto;
}

.trending-card{
background:var(--card);
border-radius:10px;
padding:12px;
margin-bottom:15px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.trending-card .sidebar-title{
margin-top:0;
margin-bottom:10px;
}

.trending-card .trending-item:last-child{
margin-bottom:0;
}



/* TABLET */
@media(max-width:1024px){
    
.homepage-wrap{
flex-direction:column;
}

.sidebar-content{
width:100%;
}

.grid{
grid-template-columns:1fr 1fr;
}

.pilihan-slide{
flex:0 0 calc(50% - 7px);
}

.container {
    padding: 0 10px;
}

.utama-slide{
flex:0 0 33.333%;
}

.kategori-grid{
grid-template-columns:1fr 1fr;
}

    
}

/* MOBILE */
@media(max-width:768px){
    

.container {
    padding: 0 10px;
}

.single-content {
    padding: 7px;
}

.pilihan-slide{
flex:0 0 calc(50% - 7px);
height: 255px;
}

.pilihan{
overflow:hidden;
}

.utama-slide{
flex:0 0 80%;
}

.kategori-grid{
grid-template-columns:1fr;
}

.card h3{
display:-webkit-box;
-webkit-box-orient:vertical;
overflow:hidden;
-webkit-line-clamp:3;
height: 66px;
}

.card-content {
    padding: 0 10px 10px 10px;
}

.card-meta {
    display:none;
}
    
.header-inner{
padding:8px 10px;
}

.logo{
font-size:22px;
padding:0;
}

/* sembunyikan social desktop */
.header-social{
display:none;
}

/* icon kanan jadi seperti gambar */
.header-right{
gap:6px;
}

/* search mobile */
.search-toggle{
width:32px;
height:32px;
}

.search-box input{
width:100%;
}

.header-top{
position:sticky;
top:0;
z-index:9999;
}

/* =========================
   MENU MOBILE
========================= */

.main-menu{
position:sticky;
top:49px;
overflow-x:auto;
white-space:nowrap;
z-index:9998;
}

.menu-wrap a {
padding: 10px 0px 10px 0px;
font-size: 15px;
}

.menu-wrap{
overflow-x:auto;
white-space:nowrap;
}

.menu-wrap ul{
display:flex;
gap:16px;
}

.menu-wrap li{
flex:0 0 auto;
}


.breaking-track{
animation:breaking 60s linear infinite;
}

/* =====================
SIDEBAR
===================== */

/* SIDEBAR MOBILE */
.mobile-sidebar{
position:fixed;
top:0;
left:-280px;
width:280px;
height:100%;
background:var(--menu);
z-index:99999;
transition:.3s;
overflow-y:auto;
padding-top:0px;
display:block;
}


.mobile-sidebar.active{
left:0;
}

.sidebar-close{
position:absolute;
top:10px;
right:10px;
width:32px;
height:32px;
border-radius:50%;
border:0;
background:rgba(0,0,0,.1);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
color:var(--text);
}

.sidebar-close:hover{
background:#eee;
}

/* reset WP menu */
.sidebar-menu{
list-style:none;
margin:0;
padding:0;
}

.sidebar-menu li{
border-bottom:1px solid var(--line);
}

.sidebar-menu a{
display:block;
padding:14px 18px;
color:var(--text);
text-decoration:none;
font-size:14px;
font-weight:600;
}

.sidebar-menu a:hover{
background:#f5f5f5;
}

/* submenu */
.sidebar-menu .sub-menu{
display:none;
background:#fafafa;
}

.sidebar-menu li.menu-item-has-children > a{
position:relative;
}

.sidebar-menu li.menu-item-has-children > a:after{
content:"›";
position:absolute;
right:15px;
}

.sidebar-head{
font-size:18px;
font-weight:700;
padding:12px 18px;
border-bottom:1px solid var(--line);
margin-bottom:10px;
}

.menu-overlay{
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
opacity:0;
visibility:hidden;
z-index:9998;
transition:.3s;
}

.menu-overlay.active{
opacity:1;
visibility:visible;
}

.hamburger{
display:flex !important;
}

.hero-prev, .hero-next {
    display: none;
}

.hero-caption h2 {
    font-size: 17px;
}

.hero-caption {
    padding: 15px;
}

.hero-dots {
    bottom: 18px;
    left: 85%;
}

.latest-item img {
    width: 110px;
    height: 90px;
}
.latest-item h3 {
    font-size: 15px;
}
.latest-cat {
    display: none;
}

.breaking-label{
background:#ff0000;
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
border-radius:5px;
font-size:14px;
}

.breaking-label:before{
content:"BN";
font-size:14px;
font-weight:bold;
padding:0 4px;
margin-right:0px;
border-radius:8px;
}

.breaking-label{
font-size:0;
}
    
.single-wrap{
grid-template-columns:1fr;
padding: 0;
}

.single-title{
font-size:24px;
font-weight:700;
}

.related .card img{
height:120px;
margin: 0px 0 0;
}

.related-grid{
grid-template-columns:1fr 1fr;
}

/* jika ganjil hide terakhir */
.related-grid .card:last-child:nth-child(odd){
display:none;
}

.main{
grid-template-columns:1fr;
}

.grid{
grid-template-columns:1fr 1fr;
}

.hero-slide img{
height:240px;
}

.sidebar{
position:relative;
top:auto;
}

.footer-grid{
grid-template-columns:1fr;
text-align:center;
}

/* hide kolom kategori & informasi */
.footer-grid .footer-col:not(.footer-about){
display:none;
}

/* tengah */
.footer-about{
margin:0 auto;
}

.footer-logo{
text-align:center;
}

.footer-follow{
text-align:center;
}

.footer-social{
justify-content:center;
}

}

/* SMALL MOBILE */
@media(max-width:480px){

.grid{
grid-template-columns:1fr;
}

.hero-slide img{
height:285px;
}

.card img{
height:140px;
}

}