/* =====================================================================
   MASUK PTN — Redesign v3 · Article Detail (artikel-detail.css)
   Page-specific polish only. Reuses base.css tokens + .konten-artikel.
   v3: flat colors (zero gradients), diverse accents, proportional type,
   glass on 3 smart spots (hero chip, feature-image chip, bookmark).
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  Article hero header                                                */
/* ------------------------------------------------------------------ */
.artikel-hero {
  margin-top: -1px;
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
/* Glass spot 1 — category chip floating over the hero image */
.artikel-hero-eyebrow {
  color: #fff;
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: var(--shadow-sm);
}
.artikel-hero-title {
  max-width: 60rem;
  line-height: 1.16;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
}

/* ------------------------------------------------------------------ */
/*  Layout chrome                                                      */
/* ------------------------------------------------------------------ */
.artikel-wrap { margin-top: -3.5rem; position: relative; z-index: 2; }

.artikel-main {
  padding: clamp(1.25rem, 3vw, 2.5rem) !important;
}
.artikel-main > h1 {
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1.22;
  margin-top: 1.4rem !important;
  margin-bottom: 1.2rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

/* Feature image */
.artikel-feature-img {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  isolation: isolate;
}
.artikel-feature-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .8s var(--ease);
}
.artikel-feature-img:hover img { transform: scale(1.04); }
/* Flat single-tone veil — no gradient scrim */
.artikel-feature-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 40, 54, .12);
  pointer-events: none;
}

/* Glass spot 2 — category ribbon on the feature image */
.artikel-feature-img .thumb-title {
  position: absolute;
  left: 16px;
  bottom: 16px;
  margin: 0 !important;
  z-index: 3;
  display: inline-block;
  padding: .4rem 1rem;
  border-radius: var(--r-pill);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .28);
}

/* Glass spot 3 — bookmark button over the feature image */
.bookmark_artikels {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.bookmark_artikels:hover { transform: translateY(-2px) scale(1.05); box-shadow: var(--shadow); }
.bookmark_artikels .mdi {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--blue-600);
}
.bookmark_artikels .mdi-bookmark { color: var(--amber-600); }

/* ------------------------------------------------------------------ */
/*  Long-form body — tame Word-pasted inline styles                    */
/* ------------------------------------------------------------------ */
.konten-artikel,
.konten-artikel span,
.konten-artikel p,
.konten-artikel td,
.konten-artikel b {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
.konten-artikel p { text-align: left !important; }
.konten-artikel p,
.konten-artikel span { color: var(--ink-soft); }
.konten-artikel span { line-height: inherit !important; }
/* Word empty-paragraph spacers stay tidy */
.konten-artikel .MsoNormal { margin: 0 0 1.05rem !important; line-height: 1.85 !important; }
.konten-artikel b,
.konten-artikel b span { color: var(--ink); font-weight: 700; }

.konten-artikel o\:p { display: none; }

/* ------------------------------------------------------------------ */
/*  Tables inside the article (rundown / jadwal)                       */
/* ------------------------------------------------------------------ */
.konten-artikel table.MsoNormalTable {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid var(--line) !important;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  margin: 1.6rem 0;
  background: var(--surface);
  font-size: var(--fs-sm);
}
.konten-artikel table.MsoNormalTable td {
  width: auto !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
  border-right: 1px solid var(--line-soft) !important;
  padding: .7rem .85rem !important;
  vertical-align: top;
  color: var(--ink-soft);
}
.konten-artikel table.MsoNormalTable td:last-child { border-right: 0 !important; }
.konten-artikel table.MsoNormalTable tr:last-child td { border-bottom: 0 !important; }
.konten-artikel table.MsoNormalTable td p { margin: 0 !important; }
/* Word inline font-size: 12pt on cell spans defeats the table's --fs-sm — normalize */
.konten-artikel table.MsoNormalTable td p,
.konten-artikel table.MsoNormalTable td span {
  font-size: var(--fs-sm) !important;
  line-height: 1.55 !important;
}

/* Header row = first row — flat blue tint */
.konten-artikel table.MsoNormalTable tr:first-child td {
  background: var(--blue-50);
  border-bottom: 2px solid var(--blue-100) !important;
}
.konten-artikel table.MsoNormalTable tr:first-child td p,
.konten-artikel table.MsoNormalTable tr:first-child b span {
  color: var(--blue-700) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-weight: 700;
}
.konten-artikel table.MsoNormalTable tr:nth-child(even) td { background: var(--surface-2); }
.konten-artikel table.MsoNormalTable tbody tr { transition: background .25s var(--ease); }
.konten-artikel table.MsoNormalTable tbody tr:hover td { background: var(--amber-50); }

/* Horizontal scroll safety on small screens */
@media (max-width: 575.98px) {
  .konten-artikel table.MsoNormalTable {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------ */
/*  Section titles: "Baca Juga", "Kategori", "Popular News"            */
/*  Diverse solid underline accents per section                        */
/* ------------------------------------------------------------------ */
.editors-news h3.title {
  position: relative;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 .25rem;
  padding-bottom: .65rem;
}
.editors-news h3.title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--violet);          /* Baca Juga — editorial violet */
}
.artikel-sidebar h3.title::after { background: var(--rose); }        /* Kategori */
.artikel-sidebar.mt-5 h3.title::after { background: var(--amber); }  /* Popular News */

/* ------------------------------------------------------------------ */
/*  "Baca Juga" related cards                                          */
/* ------------------------------------------------------------------ */
.baca-juga-grid { margin-top: .5rem; }
.baca-juga-grid > div {
  margin-bottom: 1.75rem !important;
}
.baca-juga-grid .image-hover {
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  isolation: isolate;
}
.baca-juga-grid .image-hover img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.baca-juga-grid > div:hover .image-hover img { transform: scale(1.08); }
/* Flat solid navy chip (no blur here — glass budget spent) */
.baca-juga-grid .thumb-title {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  margin: 0 !important;
  padding: .28rem .7rem;
  border-radius: var(--r-pill);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(13, 40, 54, .85);
}
/* Flat single-tone veil — no gradient scrim */
.baca-juga-grid .image-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 40, 54, .14);
  pointer-events: none;
}
.baca-juga-grid a.text-black h5 {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  margin-top: .85rem !important;
  transition: color .3s var(--ease);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.baca-juga-grid a.text-black:hover h5 { color: var(--violet-600); }

/* ------------------------------------------------------------------ */
/*  Sidebar: Kategori + Popular News — flat cards                      */
/* ------------------------------------------------------------------ */
.artikel-sidebar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  padding: 1.5rem 1.6rem;
  margin-left: 0;
  margin-right: 0;
}
.artikel-sidebar > [class*="col-"] { padding-left: 0; padding-right: 0; }

/* Kategori list rows — rotating accent dot + matching hover tint */
.artikel-sidebar .border-bottom.border-top {
  border-color: var(--line-soft) !important;
  border-radius: var(--r-xs);
  transition: padding-left .3s var(--ease), background-color .3s var(--ease);
}
.artikel-sidebar .border-bottom.border-top:hover { padding-left: .5rem !important; }
.artikel-sidebar .border-bottom.border-top h5 a {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--fs-sm) !important;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink) !important;
  transition: color .3s var(--ease);
}
.artikel-sidebar .border-bottom.border-top h5 a::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  margin-right: .6rem;
  vertical-align: 1px;
  background: var(--blue);
}
/* Diverse accents, rotating like the base service tiles */
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+1) h5 a::before { background: var(--blue); }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+2) h5 a::before { background: var(--coral); }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+3) h5 a::before { background: var(--green); }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+4) h5 a::before { background: var(--violet); }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+5) h5 a::before { background: var(--amber-600); }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+6) h5 a::before { background: var(--rose); }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+1):hover { background: var(--blue-50); }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+2):hover { background: var(--coral-50); }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+3):hover { background: var(--green-50); }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+4):hover { background: var(--violet-50); }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+5):hover { background: var(--amber-50); }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+6):hover { background: var(--rose-50); }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+1):hover h5 a { color: var(--blue-600) !important; }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+2):hover h5 a { color: var(--coral-600) !important; }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+3):hover h5 a { color: var(--green-600) !important; }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+4):hover h5 a { color: var(--violet-600) !important; }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+5):hover h5 a { color: var(--amber-600) !important; }
.artikel-sidebar .border-bottom.border-top:nth-of-type(6n+6):hover h5 a { color: var(--rose-600) !important; }

/* Popular News rows */
.artikel-sidebar .border-bottom.py-3 {
  border-color: var(--line-soft) !important;
  transition: padding-left .3s var(--ease);
}
.artikel-sidebar .border-bottom.py-3:hover { padding-left: .4rem; }
.artikel-sidebar .border-bottom.py-3 a.text-black h5 {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.artikel-sidebar .border-bottom.py-3 a.text-black:hover h5 { color: var(--blue-600); }
.artikel-sidebar .text-color {
  margin-top: .45rem !important;
  color: var(--muted) !important;
}
.artikel-sidebar .text-color .fs-10 { font-size: var(--fs-xs); }
.artikel-sidebar .text-color .mdi { color: var(--amber-600); font-size: 1rem; }

/* ------------------------------------------------------------------ */
/*  Misc                                                               */
/* ------------------------------------------------------------------ */
.image-hover { display: block; }

@media (max-width: 991.98px) {
  .artikel-wrap { margin-top: -2rem; }
  .baca-juga-grid .image-hover img { height: 170px; }
}