/* =========================================================
   Halaman Detail Artikel News — full-bleed, krem dengan nuansa
   biru, gaya editorial (Playfair Display + Work Sans), konsisten
   sama halaman News listing.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Work+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --nd-ink:#1C1A17;
  --nd-muted:#6b6055;
  --nd-accent:#2563EB;
  --nd-line:rgba(28,26,23,0.12);
  --nd-bg:#FBFAF8;
  --nd-card:#FFFFFF;
}

#nd-header a,
#nd-body a,
#nd-related a{
  font-style:normal !important;
}

/* ---------------- DEFENSIF: lepas dari grid/sidebar tema Astra ----------------
   Beberapa tema (termasuk Astra untuk single post) membungkus konten dalam
   CSS Grid/Flex untuk layout sidebar. Ini memaksa wrapper kita jadi satu
   blok penuh & section di dalamnya berjejer normal dari atas ke bawah,
   apapun struktur parent-nya. */
#nd-page{
  display:block !important;
  width:100% !important;
  grid-column:1 / -1 !important;
  flex:1 1 100% !important;
  max-width:100% !important;
}
#nd-page > section{
  display:block !important;
  position:relative !important;
  float:none !important;
  clear:both !important;
  grid-column:1 / -1 !important;
  grid-row:auto !important;
}

/* ---------------- HEADER ---------------- */
.nd-header{
  position:relative;
  background:var(--nd-bg);
  font-family:'Work Sans','Helvetica Neue',Arial,sans-serif;
  padding:56px 24px 48px;
  overflow:hidden;
  box-sizing:border-box;
  width:100%;
}
.nd-header.js-full-bleed{ width:100vw !important; max-width:100vw !important; }

.nd-header-bg{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, var(--nd-bg) 0%, var(--nd-bg) 10%, rgba(251,250,248,0.85) 20%, transparent 42%),
    radial-gradient(55% 65% at 70% 20%,
      rgba(37,99,235,0.08) 0%,
      rgba(37,99,235,0.05) 30%,
      rgba(37,99,235,0.02) 55%,
      rgba(251,250,248,0) 80%
    ),
    var(--nd-bg);
}

.nd-header-inner{
  position:relative; z-index:1;
  max-width:820px;
  margin:0 auto;
}

.nd-topline{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:26px;
  flex-wrap:wrap;
}

.nd-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.88rem;
  font-weight:600;
  color:var(--nd-muted) !important;
  text-decoration:none !important;
  transition:color .2s ease;
}
.nd-back:hover{ color:var(--nd-accent) !important; }

.nd-tag{
  display:inline-block;
  padding:5px 14px;
  border-radius:999px;
  background:rgba(37,99,235,0.1);
  color:var(--nd-accent) !important;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.nd-title{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-size:clamp(32px,5vw,50px);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.12;
  color:var(--nd-ink);
  margin:0 0 22px 0;
}

.nd-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:.86rem;
  color:var(--nd-muted);
}
.nd-meta-sep{ color:rgba(28,26,23,0.3); }

/* ---------------- BODY ---------------- */
.nd-body{
  position:relative;
  background:var(--nd-bg);
  font-family:'Work Sans','Helvetica Neue',Arial,sans-serif;
  padding:0 24px 80px;
  box-sizing:border-box;
  width:100%;
}
.nd-body.js-full-bleed{ width:100vw !important; max-width:100vw !important; }

.nd-body-inner{
  max-width:760px;
  margin:0 auto;
}

.nd-featured-media{
  border-radius:16px;
  overflow:hidden;
  aspect-ratio:16/9;
  background:#eee9e2;
  margin-bottom:40px;
}
.nd-featured-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.nd-content p{
  font-size:1rem;
  font-weight:300;
  line-height:1.9;
  color:var(--nd-ink);
  margin:0 0 24px 0;
}
.nd-content p:last-child{ margin-bottom:0; }
.nd-content strong{
  font-weight:600;
}
.nd-content h2{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-size:1.5rem;
  font-weight:700;
  line-height:1.3;
  color:var(--nd-ink);
  margin:40px 0 18px 0;
}
.nd-content h3{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-size:1.24rem;
  font-weight:700;
  line-height:1.32;
  color:var(--nd-ink);
  margin:32px 0 14px 0;
}
.nd-content a{
  color:var(--nd-accent) !important;
  text-decoration:underline !important;
}
.nd-content ul,
.nd-content ol{
  margin:0 0 24px 0;
  padding-left:22px;
  color:var(--nd-ink);
  font-weight:300;
  line-height:1.8;
}
.nd-content li{ margin-bottom:8px; }
.nd-content img{
  max-width:100%;
  height:auto;
  border-radius:14px;
  margin:12px 0 28px 0;
  display:block;
}

.nd-quote{
  margin:36px 0;
  padding:4px 0 4px 24px;
  border-left:3px solid var(--nd-accent);
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.2rem;
  font-weight:600;
  font-style:italic !important;
  line-height:1.55;
  color:var(--nd-ink);
}

.nd-divider{
  height:1px;
  background:var(--nd-line);
  margin:48px 0 32px;
}

.nd-footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}

.nd-back--footer{
  color:var(--nd-ink) !important;
}
.nd-back--footer:hover{ color:var(--nd-accent) !important; }

.nd-view-all{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:999px;
  background:var(--nd-accent);
  color:#fff !important;
  font-size:.9rem;
  font-weight:600;
  text-decoration:none !important;
  transition:background .3s ease, transform .2s ease;
}
.nd-view-all:hover{
  background:#1d4fc4;
  transform:translateY(-2px);
}
.nd-view-all svg{ transition:transform .25s ease; }
.nd-view-all:hover svg{ transform:translateX(3px); }

/* ---------------- OTHER NEWS ---------------- */
.nd-related{
  position:relative;
  background:var(--nd-card);
  border-top:1px solid var(--nd-line);
  font-family:'Work Sans','Helvetica Neue',Arial,sans-serif;
  padding:70px 24px 90px;
  box-sizing:border-box;
  width:100%;
}
.nd-related.js-full-bleed{ width:100vw !important; max-width:100vw !important; }

.nd-related-inner{
  max-width:1080px;
  margin:0 auto;
}

.nd-related-title{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-size:clamp(24px,3vw,32px);
  font-weight:700;
  color:var(--nd-ink);
  margin:0 0 16px 0;
}
.nd-divider-accent{
  display:block;
  width:52px; height:3px;
  border-radius:2px;
  background:var(--nd-accent);
  margin-bottom:40px;
}

.nd-related-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}

.nd-related-card{
  display:block;
  text-decoration:none !important;
}
.nd-related-card *{
  text-decoration:none !important;
  font-style:normal !important;
}

.nd-related-media{
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:16/11;
  background:#eee9e2;
  margin-bottom:16px;
}
.nd-related-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.25,1,.5,1);
}
.nd-related-card:hover .nd-related-media img{
  transform:scale(1.06);
}

.nd-related-date{
  display:block;
  font-size:.76rem;
  font-weight:500;
  color:var(--nd-muted) !important;
  margin-bottom:8px;
}

.nd-related-card-title{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.32;
  color:var(--nd-ink) !important;
  margin:0 0 10px 0;
  transition:color .25s ease;
}
.nd-related-card:hover .nd-related-card-title{
  color:var(--nd-accent) !important;
}

.nd-related-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.82rem;
  font-weight:600;
  color:var(--nd-accent) !important;
}
.nd-related-link svg{ transition:transform .25s ease; }
.nd-related-card:hover .nd-related-link svg{ transform:translateX(3px); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:900px){
  .nd-related-grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .nd-header{ padding:44px 20px 40px; }
  .nd-body{ padding:0 20px 60px; }
  .nd-related{ padding:56px 20px 70px; }
  .nd-footer-row{ flex-direction:column; align-items:flex-start; }
  .nd-view-all{ width:100%; justify-content:center; }
}