/* Inline "Artikel Terkait" di dalam konten */
body.layout-article .inline-related,
body.layout-article .baca-juga,
body.layout-article .artikel-terkait{
  --ir-surface:#ffffff; --ir-border:#d8e3ef; --ir-accent:#0ea5e9; --ir-accent-2:#22c55e; --ir-text:#0f172a;
  margin:1.25rem 0;
  padding:clamp(1rem, 2vw, 1.35rem);
  border-radius:18px;
  background:
    radial-gradient(120% 120% at 8% 0%, rgba(14,165,233,.14), transparent 60%),
    radial-gradient(120% 120% at 92% 0%, rgba(34,197,94,.14), transparent 55%),
    var(--ir-surface);
  border:1px solid var(--ir-border);
  box-shadow:0 14px 38px rgba(15,23,42,.08);
  position:relative;
  overflow:hidden;
}
body.layout-article .inline-related::before,
body.layout-article .baca-juga::before,
body.layout-article .artikel-terkait::before{
  content:"";
  position:absolute;
  inset:auto 1rem 0 1rem;
  height:18px;
  background:linear-gradient(90deg, rgba(14,165,233,.16), rgba(34,197,94,.08), rgba(14,165,233,.14));
  filter:blur(18px);
  z-index:0;
}
body.layout-article .inline-related > *,
body.layout-article .baca-juga > *:not(.bj-grid),
body.layout-article .artikel-terkait > *:not(.bj-grid){
  position:relative;
  z-index:1;
}
body.layout-article .inline-related .ir-header{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.6rem; margin-bottom:.85rem;
}
body.layout-article .inline-related .ir-eyebrow{
  text-transform:uppercase; letter-spacing:.08em; font-weight:800;
  color:var(--ir-text); font-size:.8rem;
}
body.layout-article .inline-related .ir-subtitle{
  margin:0; color:#475569; font-size:.95rem;
}
body.layout-article .inline-related .ir-pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .75rem; border-radius:999px;
  background:linear-gradient(135deg, rgba(14,165,233,.12), rgba(34,197,94,.14));
  color:#0f172a; font-weight:700; font-size:.85rem;
  border:1px solid rgba(14,165,233,.28); box-shadow:0 8px 20px rgba(14,165,233,.18);
}
body.layout-article .ir-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:.85rem;
}
body.layout-article .ir-card{
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.85rem .95rem; background:#fff; color:var(--ir-text);
  text-decoration:none; border:1px solid #e2e8f0; border-radius:14px;
  box-shadow:0 12px 26px rgba(15,23,42,.08);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.layout-article .ir-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(15,23,42,.12);
  border-color:color-mix(in oklab, var(--ir-accent) 30%, #e2e8f0);
}
body.layout-article .ir-number{
  width:38px; height:38px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #0ea5e9, #22c55e);
  color:#fff; font-weight:800; flex:0 0 auto;
  box-shadow:0 8px 18px rgba(14,165,233,.35);
}
body.layout-article .ir-body{ display:flex; flex-direction:column; gap:.15rem; }
body.layout-article .ir-label{
  text-transform:uppercase; letter-spacing:.06em;
  font-size:.72rem; font-weight:700; color:#0ea5e9;
}
body.layout-article .ir-title{ font-weight:800; font-size:1rem; line-height:1.35; }
body.layout-article .ir-url{
  display:inline-flex; align-items:center; gap:.35rem;
  color:#64748b; font-size:.86rem;
}
body.layout-article .ir-arrow{
  margin-left:auto; width:34px; height:34px; border-radius:10px;
  background:#e0f2fe; color:#0ea5e9;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  transition:background .2s ease, color .2s ease;
}
body.layout-article .ir-card:hover .ir-arrow{ background:#0ea5e9; color:#fff; }

/* Fallback chips (mis. jika JS dimatikan) */
body.layout-article .baca-juga > strong,
body.layout-article .artikel-terkait > strong{
  display:block; margin:0 0 .55rem;
  font:800 clamp(.95rem,2.2vw,1.05rem)/1.2 var(--bs-font-sans-serif,system-ui);
  color:var(--ir-text); letter-spacing:.15px;
}
body.layout-article .bj-chip,
body.layout-article .baca-juga a,
body.layout-article .artikel-terkait a{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .8rem; margin:.2rem .45rem .2rem 0;
  text-decoration:none; color:var(--ir-text);
  background:rgba(14,165,233,.08);
  border:1px solid #cbd5e1; border-radius:12px;
  font-size:.94rem; line-height:1.2; white-space:normal;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
body.layout-article .bj-chip:hover,
body.layout-article .baca-juga a:hover,
body.layout-article .artikel-terkait a:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(15,23,42,.08);
  border-color:color-mix(in oklab, var(--ir-accent) 30%, #cbd5e1);
  background:rgba(14,165,233,.12);
}
body.layout-article .bj-chip:focus,
body.layout-article .baca-juga a:focus,
body.layout-article .artikel-terkait a:focus{
  outline:none; box-shadow:0 0 0 3px rgba(14,165,233,.25);
  border-color:var(--ir-accent);
}

@media (max-width: 640px){
  body.layout-article .ir-grid{
    display:flex; overflow-x:auto; gap:.75rem;
    padding-bottom:.35rem; margin:0 -.35rem; padding-left:.35rem;
    scroll-snap-type:x mandatory;
  }
  body.layout-article .ir-card{ min-width:240px; scroll-snap-align:start; }
  body.layout-article .inline-related,
  body.layout-article .baca-juga,
  body.layout-article .artikel-terkait{ padding:1rem; }
}
@media (prefers-color-scheme:dark){
  body.layout-article .inline-related,
  body.layout-article .baca-juga,
  body.layout-article .artikel-terkait{
    --ir-surface:#0f172a; --ir-border:#1f2937; --ir-text:#e2e8f0;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
  }
  body.layout-article .inline-related::before,
  body.layout-article .baca-juga::before,
  body.layout-article .artikel-terkait::before{
    background:linear-gradient(90deg, rgba(14,165,233,.32), rgba(34,197,94,.18), rgba(14,165,233,.26));
  }
  body.layout-article .ir-card{
    background:#111827; border-color:#1f2937;
    box-shadow:0 12px 28px rgba(0,0,0,.4); color:var(--ir-text);
  }
  body.layout-article .ir-url{ color:#cbd5e1; }
  body.layout-article .ir-arrow{ background:#0b2740; }
  body.layout-article .ir-card:hover{ border-color:color-mix(in oklab, var(--ir-accent) 45%, #1f2937); }
}