/* ===============================
   HERO BERITA
 ================================ */
.berita-hero {
  padding-top: 160px; /* aman dari header */
  padding-bottom: 120px;
  background: linear-gradient(135deg, #1a1026, #241437);
}

.berita-hero h1 {
  font-size: 44px;
  font-weight: 800;
  margin-bottom: 14px;
}

.berita-hero p {
  max-width: 640px;
  color: #B9AFC8;
  font-size: 17px;
}

/* ===============================
   SECTION
 ================================ */
.berita-section {
  background: #0f0b16;
  padding-bottom: 120px;
}

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

/* ===============================
   CARD
 ================================ */
.berita-card {
  background: linear-gradient(145deg, #1c1228, #2a183d);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,.45);
  transition: .35s ease;
  display: flex;
  flex-direction: column;
}

.berita-card:hover {
  transform: translateY(-8px);
}

/* ===============================
   IMAGE
 ================================ */
.berita-thumb {
  height: 200px;
  overflow: hidden;
}

.berita-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s ease;
}

.berita-card:hover img {
  transform: scale(1.06);
}

/* ===============================
   BODY
 ================================ */
.berita-body {
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
}

.berita-date {
  font-size: 13px;
  color: #f59e0b;
  margin-bottom: 8px;
}

.berita-body h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.4;
}

/* DESKRIPSI — DIPOTONG BIAR RAPIH */
.berita-body p {
  font-size: 14px;
  color: #B9AFC8;
  line-height: 1.6;
  margin-bottom: 14px;

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

/* ===============================
   LINK
 ================================ */
.berita-link {
  font-weight: 600;
  color: #F2A93B;
  transition: .3s ease;
  align-self: flex-start;
}

.berita-link:hover {
  color: #ffd27d;
  transform: translateX(4px);
}

/* ===============================
   SEARCH
 ================================ */
.berita-search {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  max-width: 420px;
}

.berita-search input {
  flex: 1;
  padding: 14px 16px;
  border-radius: 14px;
  border: none;
  outline: none;
  background: #1f1b2e;
  color: #fff;
}

.berita-search input::placeholder {
  color: #B9AFC8;
}

.berita-search button {
  padding: 14px 22px;
  border-radius: 14px;
  border: none;
  background: #F2A93B;
  color: #1C1228;
  font-weight: 600;
  cursor: pointer;
  transition: .3s;
}

.berita-search button:hover {
  background: #ffd27d;
}

/* ===============================
   PAGINATION
 ================================ */
.pagination-wrap {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}

.pagination {
  display: flex;
  gap: 10px;
}

.pagination li a,
.pagination li span {
  padding: 10px 16px;
  background: #1f1b2e;
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
}

.pagination li.active span {
  background: #F2A93B;
  color: #1C1228;
  font-weight: 600;
}

/* ===============================
   RESPONSIVE
 ================================ */
@media(max-width: 992px) {
  .berita-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 640px) {
  .berita-grid {
    grid-template-columns: 1fr;
  }

  .berita-hero h1 {
    font-size: 34px;
  }
}


/* ===============================
   DETAIL HERO
 ================================ */
.detail-hero {
  padding-top: 160px;
  padding-bottom: 80px;
  background: linear-gradient(135deg, #1C1228, #2E143F);
}

.detail-hero h1 {
  font-size: 42px;
  max-width: 900px;
  line-height: 1.25;
  font-weight: 800;
}

.detail-meta {
  margin-top: 16px;
  font-size: 14px;
  color: #B9AFC8;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ===============================
   BREADCRUMB
 ================================ */
.breadcrumb {
  font-size: 14px;
  margin-bottom: 18px;
  color: #B9AFC8;
}

.breadcrumb a {
  color: #F2A93B;
  font-weight: 500;
}

.breadcrumb span {
  margin: 0 6px;
}

/* ===============================
   DETAIL CONTENT
 ================================ */
.detail-section {
  background: #0f0b16;
  padding-bottom: 120px;
}

.detail-layout {
  max-width: 860px;
}

/* IMAGE */
.detail-image {
  width: 100%;
  border-radius: 24px;
  margin-bottom: 42px;
  box-shadow: 0 35px 90px rgba(0,0,0,.6);
}

/* ===============================
   DETAIL CONTENT (FINAL POLISH)
 ================================ */
.detail-text {
  font-size: 17px;
  line-height: 1.9;
  color: #E5E7EB;
  text-align: justify;           /* RATA KANAN KIRI */
}

/* PARAGRAF */
.detail-text p {
  margin-bottom: 22px;
}

/* JIKA PAKE <br> DARI nl2br */
.detail-text br {
  content: "";
  display: block;
  margin-bottom: 18px;
}

/* HEADING DALAM KONTEN */
.detail-text h2,
.detail-text h3 {
  margin: 40px 0 18px;
  color: #F2A93B;
}

/* BACK LINK */
.detail-back {
  margin-top: 60px;
}

.detail-back a {
  color: #F2A93B;
  font-weight: 600;
  transition: .3s ease;
}

.detail-back a:hover {
  color: #ffd27d;
  transform: translateX(-4px);
}

/* ===============================
   RESPONSIVE
 ================================ */
@media(max-width: 768px){
  .detail-hero h1 {
    font-size: 30px;
  }

  .detail-text {
    font-size: 16px;
  }
}