/* ========== GLOBAL ========== */
section{
  max-width:1200px;
  margin:40px auto;
  padding:0 15px;
}
.category{
  background:#d32f2f;
  color:#fff;
  padding:4px 8px;
  font-size:12px;
  border-radius:3px;
  width:max-content;
  margin-bottom:6px;
  display:inline-block;
}
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.meta-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  color:#fff;
  opacity:.9;
}
.meta-link svg{
  width:14px;
  height:14px;
  fill:currentColor;
}
.meta-link:hover{opacity:1;text-decoration:underline}


.kategorinews-title{
  margin-bottom:15px;
  font-size:18px;
  font-weight: 700;
  color: #c90505;
  border-bottom: 2px solid #e4e4e4;
}

/* =====================================================
   BAGAN 1
===================================================== */
.bagan-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
}
@media(max-width:768px){
  .bagan-grid{grid-template-columns:1fr}
}


@media(min-width:768px){

    /* HEADLINE */
.headline-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:15px;
  height: 480px;
}

}



.headline-left{grid-row:1/span 2}
@media(max-width:768px){
  .headline-grid{grid-template-columns:1fr}
  .headline-left{grid-row:auto}

.headline-grid .news-card {
    margin-bottom: 15px;
  }


}

.news-card{
  position:relative;
  overflow:hidden;
  border-radius:6px;
}
.news-card a.image-link{
  display:block;
  height:100%;
}
.news-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.news-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:15px;
  background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0));
  color:#fff;
}
.news-title{
  font-size:16px;
  font-weight:bold;
  margin-bottom:6px;
  display:block;
}

/* SIDEBAR */
.sidebar{
  background:#fff;
  padding:15px;
  border-radius:6px;
}
@media(min-width:769px){
  .sidebar{position:sticky;top:20px}
}

/* TABS */
.tabs{
  display:flex;
  border-bottom:2px solid #ddd;
  margin-bottom:15px;
}
.tab{
  flex:1;
  text-align:center;
  padding:8px;
  cursor:pointer;
  font-weight:bold;
}
.tab.active{
  color:#d32f2f;
  border-bottom:3px solid #d32f2f;
}
.tab-content{display:none}
.tab-content.active{display:block}

.side-news{
  display:flex;
  gap:10px;
  margin-bottom:12px;
}
.side-news img{
  width:100px;
  height:80px;
  object-fit:cover;
  border-radius:4px;
}
.side-news-title{
  font-size:14px;
  font-weight:bold;
  margin-bottom:4px;
}
.side-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.side-meta .meta-link{
  font-size:11px;
  color:#555;
}

/* =====================================================
   BAGAN 2
===================================================== */
.bagan-2-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
@media(max-width:1024px){
  .bagan-2-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .bagan-2-grid{grid-template-columns:1fr}
}
.b2-card{
  background:#fff;
  border-radius:6px;
  overflow:hidden;
}
.b2-card img{
  width:100%;
  height:200px;
  object-fit:cover;
}
.b2-content{padding:12px}
.b2-category{
  font-size:12px;
  color:#d32f2f;
  font-weight:bold;
  display:inline-block;
  margin-bottom:6px;
}
.b2-title{
  font-size:16px;
  font-weight:bold;
  margin-bottom:6px;
  display:block;
}
.b2-card .meta-link{color:#555}

/* =====================================================
   BAGAN 3
===================================================== */
.bagan-3-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
}
@media(max-width:768px){
  .bagan-3-grid{grid-template-columns:1fr}
}

/* SLIDER */
.slider-wrapper{
  position:relative;
  overflow:hidden;
  border-radius:6px;
}
.slider-track{
  display:flex;
  transition:transform .5s ease;
}
.slide{
  min-width:100%;
  position:relative;
}
.slide img{
  width:100%;
  height:420px;
  object-fit:cover;
}
.slide-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:20px;
  background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0));
  color:#fff;
}
.slide-overlay .news-title{font-size:20px}

.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.6);
  color:#fff;
  border:none;
  width:40px;
  height:40px;
  cursor:pointer;
  font-size:20px;
}
.slider-btn.prev{left:10px}
.slider-btn.next{right:10px}

/* SIDEBAR BAGAN 3 */
.b3-sidebar{
  background:#fff;
  padding:15px;
  border-radius:6px;
}
.b3-item{
  display:flex;
  gap:10px;
  margin-bottom:15px;
}
.b3-item img{
  width:100px;
  height:80px;
  object-fit:cover;
  border-radius:4px;
}
.b3-title{
  font-size:14px;
  font-weight:bold;
  margin-bottom:4px;
  display:block;
}
.b3-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.b3-meta .meta-link{
  font-size:11px;
  color:#555;
}


/* KATEGORI SIDEBAR BAGAN 3 */
.b3-category{
  font-size:11px;
  font-weight:bold;
  color:#d32f2f;
  display:inline-block;
  margin-bottom:3px;
}




/* =====================================================
   BAGAN 4 – BERITA TERBARU
===================================================== */

/* ===== BAGAN 4 ===== */
section{
  max-width:1200px;
  margin:40px auto;
  padding:0 15px;
}
.bagan-4-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}

/* Tablet */
@media(max-width:1024px){
  .bagan-4-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

/* Mobile */
@media(max-width:768px){
  .bagan-4-grid{
    grid-template-columns:1fr;
  }
}


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




.b4-card{
  background:#fff;
  border-radius:6px;
  overflow:hidden;
}
.b4-image img{
  width:100%;
  height:160px;
  object-fit:cover;
}
.b4-content{
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
.b4-category{
  font-size:12px;
  font-weight:bold;
  color:#d32f2f;
  display:inline-block;
  margin-bottom:5px;
}
.b4-title{
  font-size:14px;
  font-weight:bold;
  margin-bottom:6px;
  display:block;
}

/* Mobile Layout */
@media(max-width:768px){
  .b4-card{
    display:flex;
    gap:10px;
    padding-top: 10px;
    padding-left: 10px;
  }
  .b4-image img{
    width:100px;
    height:80px;
  }
}

/* ===== BUTTON LIHAT SELENGKAPNYA ===== */
.b4-more{
  margin-top:30px;
  text-align:center;
  font-size: 13px;
}
.b4-more a{
  display:inline-block;
  padding:10px 20px;
  background:#d32f2f;
  color:#fff;
  font-weight:bold;
  border-radius:30px;
  transition:.3s;
}
.b4-more a:hover{
  background:#b71c1c;
}





/* ===== META ===== */
.meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.meta-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
}
.meta-link svg{
  width:14px;
  height:14px;
  fill:currentColor;
}










/* ===== META ===== */
.meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.meta-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
}
.meta-link svg{
  width:14px;
  height:14px;
  fill:currentColor;
}

/* ================= BAGAN 5 ================= */
.bagan-5{
  max-width:1200px;
  margin:40px auto;
  padding:0 15px;
}
.bagan-5-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
}
@media(max-width:768px){
  .bagan-5-grid{grid-template-columns:1fr}
}

/* ===== SLIDER ===== */
.b5-slider-wrapper{
  overflow:hidden;
}
.b5-slider-track{
  display:flex;
  transition:transform .6s ease;
}
.b5-slide{
  min-width:33.333%;
  padding:0 10px;
}
@media(max-width:768px){
  .b5-slide{min-width:100%}
}
.b5-slide img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:6px;
}
.b5-slide-content{
  padding:10px 0;
}
.b5-category{
  font-size:12px;
  font-weight:bold;
  color:#d32f2f;
  display:inline-block;
  margin-bottom:5px;
}
.b5-title{
  font-size:15px;
  font-weight:bold;
  margin-bottom:6px;
  display:block;
}

/* ===== SIDEBAR TERPOPULER ===== */
.b5-sidebar{
  background:#fff;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  border-radius:6px;
}
.b5-sidebar-title{
  margin-bottom:15px;
  font-size:20px;
  font-weight: 700;
}
.b5-popular{
  display:flex;
  gap:10px;
  margin-bottom:15px;
}
.b5-popular-img{
  position:relative;
  display:block;
}
.b5-popular-img img{
  width:100px;
  height:80px;
  object-fit:cover;
  border-radius:4px;
}
.b5-rank{
  position:absolute;
  top:4px;
  left:4px;
  background:#d32f2f;
  color:#fff;
  font-size:12px;
  font-weight:bold;
  padding:2px 6px;
  border-radius:3px;
}
.b5-popular-title{
  font-size:14px;
  font-weight:bold;
  display:block;
}

.b5-excerpt{
  font-size:14px;
  color:#333333;
  margin-top:4px;
  margin-bottom: 5px;
  display:-webkit-box;
  -webkit-line-clamp:3; /* maksimal 3 baris untuk ~20 kata */
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}