/* =============================================================
   BERITA.CSS — OMODA JAECOO Palembang
   Light editorial theme, DNA website utama tetap terjaga.
   dark navbar → light news area → dark CTA/footer
============================================================= */

/* ── Body override untuk halaman berita ── */
.berita-page {
  background: var(--color-bg);
}

/* =============================================================
   HERO — dark, premium
============================================================= */

.berita-hero {
  background: var(--color-bg);
  padding: calc(var(--nav-height) + 64px) 0 56px;
  border-bottom: 1px solid var(--color-line);
}

.berita-hero__inner {
  max-width: 760px;
}

.berita-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 28px;
}

.berita-hero__breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.berita-hero__breadcrumb a:hover {
  color: var(--color-accent);
}

.berita-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--color-text);
  margin: 12px 0 18px;
}

.berita-hero__desc {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin: 0;
}

@media (max-width: 640px) {
  .berita-hero {
    padding: calc(var(--nav-height-mobile) + 40px) 0 40px;
  }
  .berita-hero__title {
    font-size: clamp(1.7rem, 7vw, 2.4rem);
  }
}

/* =============================================================
   FILTER — light background, aksen brand
============================================================= */

.berita-filter-wrap {
  background: #F7F7F5;
  border-bottom: 1px solid #E4E4E0;
  position: sticky;
  top: var(--nav-height);
  z-index: 50;
}

.berita-filter {
  display: flex;
  gap: 8px;
  padding: 14px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.berita-filter::-webkit-scrollbar { display: none; }

.berita-filter__btn {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4A4A4A;
  background: transparent;
  border: 1px solid #D0D0CB;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.berita-filter__btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.berita-filter__btn.is-active {
  background: var(--color-bg);
  border-color: var(--color-bg);
  color: var(--color-text);
}

@media (max-width: 640px) {
  .berita-filter-wrap {
    top: var(--nav-height-mobile);
  }
}

/* =============================================================
   FEATURED ARTICLE — light editorial
============================================================= */

.berita-featured-wrap {
  background: #F7F7F5;
  padding: 56px 0;
}

.berita-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 24px rgba(0,0,0,0.07);
  transition: box-shadow 0.3s var(--ease-premium);
}

.berita-featured:hover {
  box-shadow: 0 6px 40px rgba(0,0,0,0.12);
}

.berita-featured__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.berita-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-premium);
}

.berita-featured:hover .berita-featured__media img {
  transform: scale(1.03);
}

.berita-featured__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-accent);
  padding: 5px 10px;
  border-radius: 3px;
}

.berita-featured__body {
  padding: 40px 40px 40px 0;
}

.berita-featured__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.berita-featured__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #0A0C0F;
  margin: 0 0 14px;
}

.berita-featured__excerpt {
  font-size: 15px;
  line-height: 1.7;
  color: #555;
  margin: 0 0 28px;
}

.berita-featured__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .berita-featured {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .berita-featured__media {
    aspect-ratio: 16/9;
  }
  .berita-featured__body {
    padding: 28px 28px 32px;
  }
}

@media (max-width: 480px) {
  .berita-featured-wrap {
    padding: 32px 0;
  }
  .berita-featured__body {
    padding: 22px 20px 26px;
  }
}

/* =============================================================
   KATEGORI BADGES
============================================================= */

.berita-cat {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 3px;
}

.berita-cat--harga {
  background: rgba(201, 168, 103, 0.14);
  color: #8B6D2A;
  border: 1px solid rgba(201, 168, 103, 0.35);
}

.berita-cat--info {
  background: rgba(59, 130, 246, 0.09);
  color: #1D4ED8;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.berita-cat--perbandingan {
  background: rgba(16, 185, 129, 0.09);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.berita-cat--promo {
  background: rgba(201, 168, 103, 0.18);
  color: #7a5c20;
  border: 1px solid rgba(201, 168, 103, 0.4);
}

.berita-date {
  font-size: 11px;
  color: #999;
  letter-spacing: 0.04em;
}

/* =============================================================
   READ MORE BUTTON
============================================================= */

.berita-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-bg);
  text-decoration: none;
  padding: 12px 22px;
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 4px;
  transition: background 0.2s, transform 0.2s;
  min-height: 44px;
}

.berita-read-more:hover {
  background: #1a1d22;
  transform: translateX(2px);
}

.berita-read-more--sm {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid rgba(201, 168, 103, 0.4);
  padding: 9px 18px;
  min-height: 38px;
}

.berita-read-more--sm:hover {
  background: rgba(201, 168, 103, 0.08);
  border-color: var(--color-accent);
  transform: translateX(2px);
}

.berita-wa-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #16A34A;
  text-decoration: none;
  padding: 12px 20px;
  border: 1px solid rgba(22, 163, 74, 0.3);
  border-radius: 4px;
  min-height: 44px;
  transition: background 0.2s, border-color 0.2s;
}

.berita-wa-inline:hover {
  background: rgba(22, 163, 74, 0.07);
  border-color: rgba(22, 163, 74, 0.6);
}

/* =============================================================
   GRID ARTIKEL — light background
============================================================= */

.berita-grid-wrap {
  background: #F7F7F5;
  padding: 0 0 64px;
}

.berita-section-header {
  padding: 48px 0 32px;
  border-top: 1px solid #E4E4E0;
}

.berita-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0A0C0F;
  margin: 10px 0 0;
}

.berita-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.berita-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 12px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s var(--ease-premium), transform 0.3s var(--ease-premium);
  display: flex;
  flex-direction: column;
}

.berita-card:hover {
  box-shadow: 0 6px 32px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}

.berita-card__media-link {
  display: block;
  overflow: hidden;
}

.berita-card__media {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.berita-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-premium);
}

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

.berita-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.berita-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.berita-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #0A0C0F;
  margin: 0 0 10px;
}

.berita-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.berita-card__title a:hover {
  color: var(--color-accent);
}

.berita-card__excerpt {
  font-size: 13.5px;
  line-height: 1.65;
  color: #666;
  margin: 0 0 20px;
  flex: 1;
}

.berita-card__footer {
  margin-top: auto;
}

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

@media (max-width: 480px) {
  .berita-grid-wrap {
    padding: 0 0 48px;
  }
  .berita-card__body {
    padding: 18px;
  }
}

/* =============================================================
   CTA WHATSAPP — kembali ke dark
============================================================= */

.berita-cta-section {
  background: var(--color-bg);
  padding: 80px 0;
  border-top: 1px solid var(--color-line);
}

.berita-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 48px 56px;
  background: rgba(201, 168, 103, 0.04);
  border: 1px solid rgba(201, 168, 103, 0.14);
  border-radius: 8px;
  flex-wrap: wrap;
}

.berita-cta__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 12px;
}

.berita-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-text);
  margin: 0 0 10px;
}

.berita-cta__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin: 0;
}

.berita-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.berita-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  min-height: 48px;
  min-width: 220px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
  color: #fff;
  background: #16A34A;
  border: 1px solid #16A34A;
}

.berita-cta__btn:hover {
  background: #15803D;
  border-color: #15803D;
}

.berita-cta__btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid rgba(244,245,247,0.22);
}

.berita-cta__btn--ghost:hover {
  background: rgba(244,245,247,0.06);
  border-color: rgba(244,245,247,0.5);
}

@media (max-width: 900px) {
  .berita-cta {
    padding: 36px 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .berita-cta__actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .berita-cta__btn {
    min-width: 0;
    flex: 1;
  }
}

@media (max-width: 480px) {
  .berita-cta-section {
    padding: 56px 0;
  }
  .berita-cta {
    padding: 28px 20px;
    gap: 22px;
  }
  .berita-cta__actions {
    flex-direction: column;
  }
  .berita-cta__btn {
    width: 100%;
  }
}

/* =============================================================
   CARD TRANSITION untuk filter
============================================================= */

.berita-card,
.berita-featured {
  transition:
    box-shadow 0.3s var(--ease-premium),
    transform 0.3s var(--ease-premium),
    opacity 0.2s ease;
}

/* =============================================================
   WRAP utility — reuse dari style.css
============================================================= */

/* Pastikan .wrap tetap ada (sudah di style.css, ini fallback) */

/* =============================================================
   FOOTER-V2 GLOBAL — copy exact dari index.html
   Diperlukan karena berita/index.html tidak punya inline CSS
============================================================= */

.footer-v2{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:64px 0 0 0;
  font-size:0.82rem;
}
.footer-v2__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 40px 48px;
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:48px 40px;
  align-items:start;
}
.footer-v2__logo-wrap{
  display:inline-flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:inherit;
  margin-bottom:18px;
}
.footer-v2__logo-wrap img{
  height:28px;
  width:auto;
  display:block;
}
.footer-v2__city{
  font-size:0.68rem;
  font-weight:400;
  letter-spacing:0.22em;
  text-transform:uppercase;
  opacity:0.55;
  font-family:'Rajdhani','Barlow Condensed',sans-serif;
  border-left:1px solid rgba(255,255,255,0.15);
  padding-left:14px;
  line-height:1;
  white-space:nowrap;
}
.footer-v2__tagline{
  font-size:0.78rem;
  opacity:0.55;
  line-height:1.6;
  margin:0;
  max-width:280px;
}
.footer-v2__col-title{
  font-size:0.65rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  opacity:0.55;
  margin:0 0 16px 0;
}
.footer-v2__col--social{display:none;}
.footer-v2__col nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-v2__col nav a{
  color:inherit;
  text-decoration:none;
  opacity:0.65;
  font-size:0.82rem;
  letter-spacing:0.04em;
  transition:opacity .18s;
}
.footer-v2__col nav a:hover{opacity:1;}
.footer-v2__social-row{
  border-top:1px solid rgba(255,255,255,0.07);
}
.footer-v2__social-row-inner{
  max-width:1200px;
  margin:0 auto;
  padding:32px 40px;
  display:flex;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
}
.footer-v2__social-row-inner .footer-v2__col-title{
  margin:0;
  white-space:nowrap;
  flex-shrink:0;
}
.footer-v2__social-links{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.footer-v2__social-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:inherit;
  text-decoration:none;
  opacity:0.55;
  font-size:0.8rem;
  letter-spacing:0.06em;
  padding:8px 16px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:3px;
  transition:opacity .18s, border-color .18s;
  min-height:40px;
  white-space:nowrap;
}
.footer-v2__social-links a:hover{
  opacity:1;
  border-color:rgba(255,255,255,0.3);
}
.footer-v2__social-links svg{flex-shrink:0;}
.footer-v2__social-links-wa{
  opacity:0.75!important;
  border-color:rgba(37,211,102,0.25)!important;
}
.footer-v2__social-links-wa:hover{
  border-color:rgba(37,211,102,0.5)!important;
  opacity:1!important;
}
.footer-v2__bottom{
  border-top:1px solid rgba(255,255,255,0.07);
  text-align:center;
  padding:18px 40px;
}
.footer-v2__bottom p{
  margin:0;
  font-size:0.72rem;
  letter-spacing:0.05em;
  opacity:0.52;
}
@media(max-width:900px){
  .footer-v2__inner{
    grid-template-columns:1fr 1fr;
    gap:40px 32px;
    padding:0 32px 40px;
  }
  .footer-v2__social-row-inner{
    padding:28px 32px;
    gap:20px;
  }
}
@media(max-width:640px){
  .footer-v2__inner{
    grid-template-columns:1fr;
    padding:0 24px 36px;
    gap:32px;
  }
  .footer-v2__social-row-inner{
    padding:24px;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  .footer-v2__social-links{
    gap:8px;
  }
  .footer-v2__social-links a{
    padding:10px 14px;
    min-height:44px;
    font-size:0.78rem;
  }
  .footer-v2__bottom{padding:16px 24px;}
}


/* =============================================================
   ARTICLE DETAIL — berita-template.html
   Namespace: .art-* untuk menghindari konflik dengan komponen lain
   Tidak mengubah style global website.
============================================================= */

/* ── Article Hero ── */

.art-hero {
  padding-top: var(--nav-height);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}

/* Breadcrumb */
.art-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 36px;
  padding-bottom: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.art-hero__breadcrumb a {
  color: var(--color-text-muted);
  transition: color 0.2s var(--ease-premium);
}

.art-hero__breadcrumb a:hover {
  color: var(--color-accent);
}

.art-hero__breadcrumb span[aria-current] {
  color: var(--color-text);
}

/* Meta wrap — judul + byline */
.art-hero__meta-wrap {
  padding-top: 28px;
  padding-bottom: 40px;
  max-width: calc(760px + (var(--container-pad) * 2));
}

/* Category pills */
.art-hero__cats {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.art-hero__cat-pill {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding: 4px 12px;
  border: 1px solid rgba(201, 168, 103, 0.35);
  background: rgba(201, 168, 103, 0.07);
  line-height: 1.6;
}

.art-hero__cat-pill--model {
  color: var(--color-text-muted);
  border-color: var(--color-line-strong);
  background: transparent;
}

.art-hero__cat-sep {
  color: var(--color-line-strong);
  font-size: 12px;
}

/* Judul */
.art-hero__title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-text);
}

.art-hero__br {
  display: none; /* on mobile line-break is not forced */
}

/* Byline */
.art-hero__byline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.art-hero__date {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.art-hero__byline-sep {
  color: var(--color-line-strong);
}

.art-hero__author {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* Featured image — full-width dalam container terbatas */
.art-hero__figure-wrap {
  padding-bottom: 64px;
  max-width: calc(960px + (var(--container-pad) * 2));
}

.art-hero__figure {
  margin: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.art-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}

.art-hero__caption {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ── Article Body ── */

.art-body {
  background: var(--color-bg);
  padding: 72px 0 80px;
}

.art-body__inner {
  /* Lebar teks artikel 680-760px agar mudah dibaca */
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Lead paragraph — lebih besar dari body */
.art-body__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.175rem);
  line-height: 1.78;
  color: var(--color-text);
  margin: 0 0 2em;
  font-weight: 400;
}

/* Body paragraphs */
.art-body__inner p:not(.art-body__lead) {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.82;
  color: var(--color-text-muted);
  margin: 0 0 1.6em;
}

/* Headings dalam artikel */
.art-body__inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--color-text);
  margin: 2.8em 0 0.8em;
  padding-top: 0;
}

.art-body__inner h2:first-child {
  margin-top: 0;
}

.art-body__inner h3 {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--color-text);
  margin: 2.4em 0 0.7em;
}

/* Lists */
.art-body__inner ul,
.art-body__inner ol {
  margin: 0 0 1.8em;
  padding-left: 1.4em;
  color: var(--color-text-muted);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.82;
}

.art-body__inner li {
  margin-bottom: 0.55em;
}

.art-body__inner li::marker {
  color: var(--color-accent);
}

/* Links dalam body */
.art-body__inner a:not(.art-product-cta__btn):not(.text-link) {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 168, 103, 0.35);
  transition: border-color 0.2s var(--ease-premium);
}

.art-body__inner a:not(.art-product-cta__btn):not(.text-link):hover {
  border-color: var(--color-accent);
}

/* Blockquote */
.art-body__blockquote {
  margin: 2.2em 0;
  padding: 28px 32px;
  border-left: 2px solid var(--color-accent);
  background: rgba(201, 168, 103, 0.05);
}

.art-body__blockquote p {
  margin: 0 0 12px !important;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.15rem) !important;
  line-height: 1.65 !important;
  color: var(--color-text) !important;
  font-style: italic;
}

.art-body__blockquote cite {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-style: normal;
}

/* Inline figure dalam artikel */
.art-body__figure {
  margin: 2.2em 0;
}

.art-body__figure img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--color-bg-alt);
}

.art-body__figure figcaption {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ── Product Related CTA ── */

.art-product-cta {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: 72px 0;
}

.art-product-cta__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.art-product-cta__eyebrow {
  margin-bottom: 16px;
}

.art-product-cta__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-text);
}

.art-product-cta__desc {
  margin: 0 0 30px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* Tombol CTA produk — pakai .btn--secondary dari style.css */
.art-product-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 28px;
}


/* ── WhatsApp CTA — override posisi agar pas setelah artikel ── */
.art-wa-cta {
  /* Padding sudah di .berita-cta-section, ini override ringan saja */
  padding: 72px 0;
}


/* ── Related News ── */

.art-related {
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
  padding: 80px 0 96px;
}

.art-related__inner {
  max-width: calc(1200px + (var(--container-pad) * 2));
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.art-related__header {
  margin-bottom: 40px;
}

/* Grid 3 kolom */
.art-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Card related */
.art-related-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  overflow: hidden;
  transition: border-color 0.3s var(--ease-premium), transform 0.4s var(--ease-premium);
}

.art-related-card:hover {
  border-color: var(--color-line-strong);
  transform: translateY(-3px);
}

/* Seluruh card bisa diklik */
.art-related-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Media */
.art-related-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg);
  flex-shrink: 0;
}

.art-related-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
  transition: transform 0.7s var(--ease-premium), filter 0.5s var(--ease-premium);
  display: block;
}

.art-related-card:hover .art-related-card__media img {
  transform: scale(1.05);
  filter: saturate(1);
}

/* Body */
.art-related-card__body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Kategori */
.art-related-card__cat {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
  display: block;
}

/* Judul */
.art-related-card__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--color-text);
  flex: 1;
}

/* Tanggal */
.art-related-card__date {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

/* CTA teks */
.art-related-card__cta {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  transition: color 0.2s var(--ease-premium);
  margin-top: auto;
}

.art-related-card:hover .art-related-card__cta {
  color: var(--color-text);
}

/* Footer link balik ke listing */
.art-related__footer {
  margin-top: 48px;
  text-align: center;
}


/* ── Responsive — Tablet ── */

@media (max-width: 1024px) {
  .art-hero__br { display: inline; }
}

@media (max-width: 900px) {
  .art-related__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .art-product-cta {
    padding: 56px 0;
  }

  .art-wa-cta {
    padding: 56px 0;
  }

  .art-related {
    padding: 64px 0 80px;
  }
}


/* ── Responsive — Mobile ── */

@media (max-width: 640px) {
  .art-hero {
    padding-top: var(--nav-height-mobile);
  }

  .art-hero__breadcrumb {
    padding-top: 24px;
    font-size: 10px;
  }

  .art-hero__meta-wrap {
    padding-top: 20px;
    padding-bottom: 28px;
  }

  .art-hero__cats {
    margin-bottom: 14px;
  }

  .art-hero__title {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    margin-bottom: 16px;
  }

  .art-hero__figure-wrap {
    padding-bottom: 40px;
  }

  .art-body {
    padding: 48px 0 56px;
  }

  .art-body__blockquote {
    padding: 20px 22px;
    margin: 1.8em 0;
  }

  .art-product-cta {
    padding: 48px 0;
  }

  .art-wa-cta {
    padding: 48px 0;
  }

  .art-related {
    padding: 52px 0 64px;
  }

  .art-related__grid {
    /* Mobile: stack vertikal dengan scroll horizontal yang nyaman */
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .art-related-card__title {
    font-size: 0.97rem;
  }

  .art-related__footer {
    margin-top: 36px;
  }
}

@media (max-width: 400px) {
  .art-hero__byline {
    gap: 6px;
  }

  .art-body__blockquote {
    padding: 16px 18px;
  }
}

/* =============================================================
   ARTIKEL CMS — Typography Premium + Animasi + Auto-bold SEO
   Namespace: .berita-article__content
============================================================= */

/* ── Font Premium untuk konten artikel CMS ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600&display=swap');

.berita-article__content {
  font-family: 'Inter', var(--font-body), sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  line-height: 1.85;
  color: var(--color-text-muted);
  max-width: 720px;
}

/* Paragraf */
.berita-article__content p {
  margin: 0 0 1.7em;
  font-size: inherit;
  line-height: 1.85;
  color: var(--color-text-muted);
  animation: fadeSlideUp 0.5s ease both;
}

/* Heading H2 */
.berita-article__content h2 {
  font-family: 'DM Serif Display', var(--font-display), serif;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
  margin: 2.8em 0 0.8em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid rgba(201, 168, 103, 0.2);
  animation: fadeSlideUp 0.5s ease both;
}

.berita-article__content h2:first-child {
  margin-top: 0;
}

/* Heading H3 */
.berita-article__content h3 {
  font-family: var(--font-display), sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--color-text);
  margin: 2.2em 0 0.7em;
  animation: fadeSlideUp 0.5s ease both;
}

/* Lists */
.berita-article__content ul {
  margin: 0 0 1.8em;
  padding-left: 0;
  list-style: none;
  color: var(--color-text-muted);
}

.berita-article__content ul li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.6em;
  font-size: inherit;
  line-height: 1.75;
  animation: fadeSlideUp 0.5s ease both;
}

.berita-article__content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* Strong / Bold — warna accent untuk SEO highlight */
.berita-article__content strong {
  font-weight: 600;
  color: var(--color-text);
}

/* Em / Italic */
.berita-article__content em {
  font-style: italic;
  color: var(--color-text);
}

/* Link dalam artikel */
.berita-article__content a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 168, 103, 0.35);
  transition: border-color 0.2s;
}

.berita-article__content a:hover {
  border-color: var(--color-accent);
}

/* ── Animasi teks premium ── */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Intersection Observer — elemen masuk viewport baru animasi */
.berita-article__content p,
.berita-article__content h2,
.berita-article__content h3,
.berita-article__content ul li {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.berita-article__content p.is-visible,
.berita-article__content h2.is-visible,
.berita-article__content h3.is-visible,
.berita-article__content ul li.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Gambar artikel — optimasi responsif ── */
.berita-article__image {
  margin: 0 0 40px;
}

.berita-article__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 6px;
}

/* ── Meta artikel ── */
.berita-article__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.berita-article__meta time {
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

/* ── CTA Inline Simulasi Kredit ── */
.berita-cta-inline {
  margin: 48px 0;
  padding: 36px 40px;
  background: rgba(201, 168, 103, 0.05);
  border: 1px solid rgba(201, 168, 103, 0.2);
  border-left: 3px solid var(--color-accent);
  border-radius: 6px;
}

.berita-cta-inline__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 10px;
}

.berita-cta-inline__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 10px;
}

.berita-cta-inline__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0 0 24px;
}

.berita-cta-inline__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.berita-cta-inline__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 24px;
  min-height: 44px;
  border-radius: 4px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  background: #16A34A;
  color: #fff;
  border: 1px solid #16A34A;
  white-space: nowrap;
}

.berita-cta-inline__btn:hover {
  background: #15803D;
  border-color: #15803D;
}

.berita-cta-inline__btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid rgba(244, 245, 247, 0.22);
}

.berita-cta-inline__btn--ghost:hover {
  background: rgba(244, 245, 247, 0.06);
  border-color: rgba(244, 245, 247, 0.5);
}

@media (max-width: 640px) {
  .berita-cta-inline {
    padding: 24px 20px;
    margin: 36px 0;
  }
  .berita-cta-inline__actions {
    flex-direction: column;
  }
  .berita-cta-inline__btn {
    width: 100%;
  }
}

/* ── Section artikel CMS ── */
.berita-article-content {
  padding: 48px 0 0;
}

.berita-article-content.wrap {
  max-width: 800px;
}

/* ── Hero artikel CMS ── */
.berita-hero {
  background: var(--color-bg);
  padding: calc(var(--nav-height) + 56px) 0 48px;
  border-bottom: 1px solid var(--color-line);
}

@media (max-width: 640px) {
  .berita-hero {
    padding: calc(var(--nav-height-mobile) + 36px) 0 36px;
  }
  .berita-article-content.wrap {
    max-width: 100%;
  }
}

/* =============================================================
   EMPTY STATE — tampil jika belum ada artikel dari CMS
============================================================= */

.berita-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 24px 96px;
  max-width: 480px;
  margin: 0 auto;
}

.berita-empty[hidden] {
  display: none;
}

.berita-empty__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-line, #E8E8E3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  color: var(--color-text-muted, #888);
  flex-shrink: 0;
}

.berita-empty__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 12px;
}

.berita-empty__desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0 0 32px;
  max-width: 38ch;
}

.berita-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}

.berita-empty__cta:hover {
  background: #1fba58;
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .berita-empty {
    padding: 56px 16px 72px;
  }
}