/* =========================================================
   SSC Detail Pages — halaman artikel News (v1.0.5)
   Dipakai bersama detail.css (hero, navbar, animasi).
   ========================================================= */
.sscd-article{ background:#fff; }
.sscd-art-hero{ min-height:clamp(440px, 58vh, 580px); }
.sscd-art-hero .sscd-hero-inner{ max-width:960px; }
.sscd-art-badge{
  display:inline-flex; align-items:center; gap:8px; margin:6px 0 16px;
  padding:7px 13px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#fff;
}
.sscd-art-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:#ff8a7a; }
.sscd .sscd-art-title{
  font-family:'Montserrat','Helvetica Neue',Arial,sans-serif !important;
  margin:0 0 20px; max-width:880px;
  font-size:clamp(30px, 4.2vw, 54px); font-weight:800 !important; line-height:1.1; letter-spacing:-.01em;
  color:#fff !important;
}
.sscd-art-meta{ display:flex; flex-wrap:wrap; gap:10px 22px; margin:0; padding:0; list-style:none; }
.sscd-art-meta li{ display:inline-flex; align-items:center; gap:7px; font-size:.86rem; font-weight:600; color:rgba(255,255,255,.85); }
.sscd-art-meta svg{ color:#ff8a7a; }

/* ---------- isi ---------- */
.sscd-art-body{ padding:72px 0 80px; }
.sscd-art-grid{ display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:64px; align-items:start; max-width:1120px; }
.sscd-art-content{ min-width:0; }
.sscd-art-lead{
  margin:0 0 34px; padding:0 0 28px; border-bottom:1px solid #e3e6ec;
  font-size:clamp(17px, 1.4vw, 20px); font-weight:500; line-height:1.7; color:#0f2a6b;
}
.sscd-prose{ font-family:'Montserrat','Helvetica Neue',Arial,sans-serif; font-size:1.02rem; line-height:1.85; color:#2b3242; }
.sscd-prose > *:first-child{ margin-top:0; }
.sscd-prose p{ margin:0 0 1.35em; }
.sscd-prose h2, .sscd-prose h3, .sscd-prose h4{
  font-family:'Montserrat','Helvetica Neue',Arial,sans-serif !important;
  color:#0f2a6b !important; font-weight:800 !important; line-height:1.3; letter-spacing:-.005em;
}
.sscd-prose h2{ margin:2em 0 .7em; font-size:clamp(22px, 2vw, 28px); padding-left:14px; border-left:4px solid #c0392b; }
.sscd-prose h3{ margin:1.7em 0 .6em; font-size:1.22rem; }
.sscd-prose h4{ margin:1.5em 0 .5em; font-size:1.05rem; }
.sscd-prose strong, .sscd-prose b{ color:#0f2a6b; font-weight:700; }
.sscd-prose a{ color:#c0392b !important; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.sscd-prose a:hover{ color:#a93226 !important; }
.sscd-prose ul, .sscd-prose ol{ margin:0 0 1.4em; padding-left:0; list-style:none; }
.sscd-prose ul li{ position:relative; padding-left:26px; margin-bottom:.55em; }
.sscd-prose ul li::before{ content:""; position:absolute; left:4px; top:.72em; width:8px; height:8px; border-radius:2px; background:#c0392b; }
.sscd-prose ol{ counter-reset:sscdol; }
.sscd-prose ol li{ position:relative; padding-left:36px; margin-bottom:.7em; counter-increment:sscdol; }
.sscd-prose ol li::before{
  content:counter(sscdol); position:absolute; left:0; top:.15em;
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#0f2a6b; color:#fff; font-size:.74rem; font-weight:800; line-height:1;
}
.sscd-prose blockquote{
  margin:2em 0; padding:24px 28px; border:0; border-left:4px solid #c0392b; border-radius:0 14px 14px 0;
  background:#f5f6f8; font-size:1.1rem; font-style:normal; font-weight:600; line-height:1.7; color:#0f2a6b;
}
.sscd-prose blockquote p:last-child{ margin-bottom:0; }
.sscd-prose img{ max-width:100%; height:auto; border-radius:14px; }
.sscd-prose figure{ margin:2em 0; }
.sscd-prose figcaption{ margin-top:10px; font-size:.82rem; color:#6b7280; text-align:center; }
.sscd-prose table{ width:100%; margin:2em 0; border-collapse:collapse; font-size:.92rem; }
.sscd-prose th, .sscd-prose td{ padding:12px 14px; border-bottom:1px solid #e3e6ec; text-align:left; }
.sscd-prose th{ background:#0f2a6b; color:#fff; font-weight:700; }
.sscd-prose hr{ margin:2.5em 0; border:0; border-top:1px solid #e3e6ec; }

.sscd-art-foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:48px; padding-top:26px; border-top:1px solid #e3e6ec; }
.sscd-art-back{ display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:700; color:#0f2a6b !important; text-decoration:none !important; }
.sscd-art-back:hover{ color:#c0392b !important; }

/* ---------- share ---------- */
.sscd-share{ display:flex; flex-wrap:wrap; gap:8px; }
.sscd-share a, .sscd-share button{
  all:unset; cursor:pointer; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 14px; border-radius:8px; border:1px solid #e3e6ec; background:#fff;
  font-family:'Montserrat','Helvetica Neue',Arial,sans-serif; font-size:.8rem; font-weight:700; color:#0f2a6b !important;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.sscd-share a:hover, .sscd-share button:hover{ background:#0f2a6b; border-color:#0f2a6b; color:#fff !important; }
.sscd-share button.is-done{ background:#e8f7ef; border-color:#b9e5cc; color:#0f5f35 !important; }
.sscd-share--inline{ align-items:center; }
.sscd-share--inline > span{ margin-right:4px; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#6b7280; }
.sscd-share--inline a{ min-width:40px; padding:9px 10px; }

/* ---------- samping ---------- */
.sscd-art-side{ position:sticky; top:110px; display:flex; flex-direction:column; gap:18px; }
.sscd-side-card{ padding:22px; border-radius:16px; border:1px solid #e3e6ec; background:#f5f6f8; }
.sscd-side-h{ margin:0 0 14px; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#0f2a6b; }
.sscd-side-card .sscd-share a, .sscd-side-card .sscd-share button{ flex:1 1 calc(50% - 8px); }
.sscd-side-cta{
  padding:26px 24px; border-radius:18px; color:#fff;
  background:radial-gradient(400px 220px at 100% 0%, rgba(91,155,255,.25), transparent 70%), linear-gradient(140deg, #0f2a6b 0%, #0a1f55 100%);
  box-shadow:0 22px 48px rgba(10,31,85,.22);
}
.sscd-side-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#c0392b; }
.sscd-side-eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.sscd-side-cta .sscd-side-eyebrow{ color:#7fb0ff; }
.sscd-side-title{ margin:10px 0 18px; font-size:1.08rem; font-weight:800; line-height:1.4; color:#fff; }
.sscd-side-btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:7px; background:#c0392b; color:#fff !important; text-decoration:none !important; font-size:.86rem; font-weight:700; transition:background .25s ease; }
.sscd-side-btn:hover{ background:#a93226; }

/* ---------- sebelum / sesudah ---------- */
.sscd-art-pn{ padding:0 0 72px; }
.sscd-art-pn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:1120px; }
.sscd-pn{ display:block; padding:22px 24px; border-radius:16px; border:1px solid #e3e6ec; background:#fff; text-decoration:none !important; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.sscd-pn:hover{ border-color:#0f2a6b; transform:translateY(-3px); box-shadow:0 18px 36px rgba(10,31,85,.1); }
.sscd-pn.is-next{ text-align:right; }
.sscd-pn small{ display:block; margin-bottom:6px; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#c0392b; }
.sscd-pn b{ display:block; font-size:1rem; font-weight:800; line-height:1.35; color:#0f2a6b; }

/* ---------- artikel terkait ---------- */
.sscd-art-related{ padding:80px 0 100px; background:#f5f6f8; }
.sscd-art-related-head{ margin-bottom:30px; }
.sscd .sscd-art-related-head h2{ margin:10px 0 0; font-family:'Montserrat','Helvetica Neue',Arial,sans-serif !important; font-size:clamp(26px, 3vw, 38px); font-weight:800 !important; color:#0f2a6b !important; }
.sscd-art-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin:0; padding:0; list-style:none; }
.sscd-art-card{ display:flex; flex-direction:column; height:100%; overflow:hidden; border-radius:16px; border:1px solid #e3e6ec; background:#fff; text-decoration:none !important; transition:border-color .3s ease, transform .4s cubic-bezier(.25,1,.5,1), box-shadow .4s ease; }
.sscd-art-card:hover{ border-color:#0f2a6b; transform:translateY(-5px); box-shadow:0 22px 44px rgba(10,31,85,.12); }
.sscd-art-card-media{ position:relative; display:block; aspect-ratio:16 / 10; overflow:hidden; background:linear-gradient(135deg, #12306e, #0a1f55); }
.sscd-art-card-media img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; color:transparent; transition:transform .9s cubic-bezier(.25,1,.5,1); }
.sscd-art-card:hover .sscd-art-card-media img{ transform:scale(1.06); }
.sscd-art-card-media em{ position:absolute; left:12px; top:12px; padding:5px 10px; border-radius:6px; background:#0f2a6b; color:#fff; font-style:normal; font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.sscd-art-card-body{ display:flex; flex-direction:column; flex:1; padding:18px 20px 20px; }
.sscd-art-card-body small{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#c0392b; }
.sscd-art-card-body b{ margin:6px 0 14px; font-size:1.02rem; font-weight:800; line-height:1.35; color:#0f2a6b; }
.sscd-art-card:hover .sscd-art-card-body b{ color:#c0392b; }
.sscd-art-card-more{ margin-top:auto; font-size:.8rem; font-weight:700; color:#0f2a6b; }

/* ---------- responsif ---------- */
@media (max-width:1000px){
  .sscd-art-grid{ grid-template-columns:1fr; gap:40px; }
  .sscd-art-side{ position:static; }
  .sscd-art-cards{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .sscd-art-body{ padding:48px 0 56px; }
  .sscd-prose{ font-size:.98rem; }
  .sscd-art-pn-grid, .sscd-art-cards{ grid-template-columns:1fr; }
  .sscd-pn.is-next{ text-align:left; }
  .sscd-art-related{ padding:60px 0 72px; }
}

/* ---------- share: ikon saja (v1.0.6) ---------- */
.sscd-share a, .sscd-share button{ width:42px; height:42px; padding:0 !important; border-radius:50%; flex:0 0 auto !important; }
.sscd-share svg{ display:block; width:18px; height:18px; }
.sscd-share a[aria-label="LinkedIn"]:hover{ background:#0a66c2; border-color:#0a66c2; }
.sscd-share a[aria-label="WhatsApp"]:hover{ background:#25d366; border-color:#25d366; }
.sscd-share a[aria-label="Facebook"]:hover{ background:#1877f2; border-color:#1877f2; }
.sscd-share button.is-done{ background:#e8f7ef; border-color:#b9e5cc; color:#0f5f35 !important; }
.sscd-side-card .sscd-share{ gap:10px; }