:root{
  --indigo:#1F1548;
  --gold:#E4CE8E;
  --white:#FEFEFE;
  --page:#F3F3F3;
}

*{ box-sizing:border-box; }

.page{ padding-top: 0; }

/* HERO */
.news-hero{
  height: 420px;
  background: url("../assets/Background.jpeg") center/cover no-repeat;
}

/* CONTENT WRAP */
.news-wrap{
  padding: 54px 0 64px;
  background: var(--page);
}

.news-inner{
  width:min(1160px, calc(100% - 56px));
  margin:0 auto;
}

/* FILTER BAR */
.filterbar{
  display:flex;
  justify-content:flex-end;
  margin: 0 0 70px;
}

.filterbar-right{
  display:flex;
  align-items:center;
  gap: 18px;
}

.filters{
  display:flex;
  align-items:center;
  gap: 22px;
}

.filter-btn{
  border: 1.5px solid rgba(31,21,72,.75);
  background: var(--white);
  color: rgba(31,21,72,.9);
  font-size: 18px;
  font-weight: 500;
  padding: 12px 38px;
  border-radius: 999px;
  cursor:pointer;
  transition: all 0.2s ease;
}

.filter-btn.active{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--indigo);
}

/* ADVANCED DROPDOWN */
.adv{ position:relative; }

.adv-btn{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1.5px solid rgba(31,21,72,.75);
  background: var(--white);
  color: rgba(31,21,72,.9);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.adv-panel{
  position:absolute;
  right:0;
  top: calc(100% + 12px);
  width: 260px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  padding: 14px;
  z-index: 40;
}

.adv-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 8px;
}

.adv-row + .adv-row{ border-top: 1px solid rgba(31,21,72,.10); }

.adv-label{ font-size: 14px; font-weight: 600; color: rgba(31,21,72,.85); }

.adv-select{
  font-family:inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--indigo);
  background: var(--white);
  border: 1px solid rgba(31,21,72,.25);
  padding: 10px 12px;
  border-radius: 999px;
  cursor:pointer;
  min-width: 140px;
}

/* NEW DYNAMIC LAYOUT */
.news-layout {
  display: flex;
  flex-direction: column;
}

/* Umum untuk Kartu Berita */
.card{
  background: var(--white);
  border-radius: 20px;
  overflow:hidden;
  box-shadow: 0 22px 42px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
}
.card.is-hidden{ display:none; }

.meta{ display:flex; align-items:flex-start; justify-content:space-between; gap: 16px; margin: 0 0 26px; }
.kicker{ font-size: 22px; font-weight: 700; margin:0; color: var(--indigo); }
.date{ font-size: 16px; font-weight: 500; color: rgba(31,21,72,.90); }
.title{ margin: 0 0 18px; line-height: 1.22; font-weight: 800; color: var(--indigo); }
.excerpt{ margin: 0 0 30px; font-size: 18px; line-height: 1.8; color: rgba(0,0,0,.62); }
.tags{ display:flex; gap: 16px; flex-wrap:wrap; margin: 0 0 36px; }
.tag{ font-size: 14px; font-weight: 600; padding: 10px 24px; border-radius: 4px; background: var(--gold); color: var(--indigo); }
.readmore{ display:inline-block; color: rgba(0,0,0,.80); text-decoration:none; font-weight: 500; font-size: 20px; margin-top: auto;}
.readmore:hover{ text-decoration: underline; }

/* BARIS PERTAMA (2 Kartu Awal, dengan excerpt) */
.news-row-top {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 38px;
}
.news-row-top .card .card-body { padding: 52px 56px; height: 100%; display: flex; flex-direction: column; }
.news-row-top .card .title { font-size: 34px; }
.news-row-top .card .excerpt { display: block; }

/* BARIS KEDUA (Slider, tanpa excerpt) */
.news-slider-wrapper {
  position: relative;
  width: 100%;
  margin-top: 38px;
}

.news-row-bottom {
  display: flex;
  gap: 38px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  padding: 10px 0; /* Hindari shadow card terpotong saat scroll */
  width: 100%;
}
.news-row-bottom::-webkit-scrollbar { display: none; } /* Safari and Chrome */

.news-row-bottom .card {
  flex: 0 0 calc(33.333% - 25.33px); /* 3 kartu sekaligus */
  scroll-snap-align: start;
}
.news-row-bottom .card .card-body { padding: 42px 46px; height: 100%; display: flex; flex-direction: column; }
.news-row-bottom .card .title { font-size: 26px; }
.news-row-bottom .card .excerpt { display: none; } /* Sembunyikan Deskripsi sesuai video */

/* SLIDER NAVIGATION BUTTONS */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid rgba(31,21,72,.15);
  color: var(--indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  transition: all 0.3s ease;
}
.slider-nav:hover { background: var(--gold); border-color: var(--gold); transform: translateY(-50%) scale(1.05); }
.slider-nav.prev { left: -26px; }
.slider-nav.next { right: -26px; }
.slider-nav.hidden { opacity: 0; pointer-events: none; }

/* RESPONSIVE */
@media (max-width: 1100px){
  .news-inner{ width:min(1160px, calc(100% - 40px)); }
  .news-row-top .card .card-body { padding: 44px; }
  .news-row-bottom .card .card-body { padding: 34px; }
  .news-row-top .card .title { font-size: 30px; }
  .news-row-bottom .card .title { font-size: 24px; }
  .slider-nav.prev { left: -15px; }
  .slider-nav.next { right: -15px; }
}
@media (max-width: 960px){
  .news-row-top { grid-template-columns: 1fr; }
  .news-row-bottom .card { flex: 0 0 calc(50% - 19px); } /* 2 cards di tablet */
  .filterbar{ justify-content:flex-start; }
  .filters{ flex-wrap:wrap; }
  .clarity-title{ font-size: 36px; }
  .quote-text{ font-size: 30px; }
}
@media (max-width: 600px){
  .news-row-bottom .card { flex: 0 0 100%; } /* 1 card di HP */
  .filterbar-right{ flex-wrap:wrap; justify-content:flex-start; }
  .slider-nav { width: 44px; height: 44px; }
}

/* VIEW ALL BUTTON */
.view-all{ display:flex; justify-content:center; margin: 72px 0 0; }
.viewall-btn{
  border:none; background: var(--indigo); color: var(--gold); font-family:inherit; font-size: 28px;
  font-weight: 800; display:flex; align-items:center; justify-content:center; gap: 18px;
  cursor:pointer; padding: 22px 64px; border-radius: 999px; transition: transform 0.2s;
}
.viewall-btn:hover { transform: translateY(-2px); }
.viewall-btn span[aria-hidden="true"] { display: inline-block; transform: translateY(-2px); }

/* CLARITY SECTION */
.clarity{ padding: 92px 0 84px; background: var(--white); text-align:center; }
.clarity-title{ margin:0 0 14px; font-size: 42px; font-weight: 900; color: rgba(0,0,0,.85); }
.clarity-sub{ margin:0 auto 34px; max-width: 1200px; font-size: 24px; line-height: 1.8; color: rgba(0,0,0,.55); }
.clarity-btn{ display:inline-flex; align-items:center; gap: 18px; text-decoration:none; background: var(--indigo); color: var(--gold); border-radius: 999px; padding: 20px 60px; font-weight: 900; font-size: 26px; transition: transform 0.2s; }
.clarity-btn:hover { transform: translateY(-2px); }

/* QUOTE LINE */
.quote{ padding: 70px 0 70px; background: var(--white); text-align:center; }
.quote-text{ font-style: italic; font-weight: 600; font-size: 38px; color: rgba(0,0,0,.78); }

/* STAY INFORMED BAND */
.stay{ background: var(--gold); padding: 80px 0 80px; }
.stay-grid{ display:grid; grid-template-columns: 1fr; gap: 22px; align-items:start; }
.stay-title{ margin:0 0 10px; font-size: 44px; font-weight: 900; color: var(--indigo); }
.stay-sub{ 
  margin:0; 
  max-width: 800px; 
  font-size: 22px; 
  line-height: 2; 
  color: rgba(0,0,0,.55); 
}

.stay-form{ 
  display:flex; 
  align-items:stretch; 
  width: min(780px, 100%); 
  background: transparent; 
  margin-top: 2px;
  margin-left: 0; 
}

.stay-form input{ 
  flex: 1; 
  height: 60px; 
  padding: 0 18px; 
  border: none; 
  border-radius: 0; 
  background: rgba(254,254,254,.72); 
  font-family:inherit; 
  font-size: 20px; color: 
  var(--indigo); 
}

.stay-form input:focus{ outline: none; background: var(--white); }
.stay-form button { 
  height: 60px; 
  padding: 0 26px; 
  border: none; 
  border-radius: 0; 
  background: 
  var(--indigo); 
  color: var(--white); 
  font-family:inherit; 
  font-weight: 800; 
  font-size: 20px; 
  cursor:pointer; 
}

@media (max-width: 520px){
  .stay-form{ flex-direction:column; }
  .stay-form input, .stay-form button{ width:100%; }
}