/* =========================================================
   SSC Detail Pages — gaya SSC Works (Montserrat, navy & merah)
   ========================================================= */

/* --- Lepas container Astra supaya halaman full-bleed --- */
body.sscd-detail .site-content > .ast-container,
body.sscd-detail #content > .ast-container{
  max-width:none !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
}
body.sscd-detail #primary,
body.sscd-detail #secondary{ display:none; }

.sscd, .sscd *, .sscd *::before, .sscd *::after,
.sscd-lb, .sscd-lb *{ box-sizing:border-box; }

.sscd{
  --navy:#0f2a6b;
  --navy-deep:#0a1f55;
  --red:#c0392b;
  --red-dark:#a93226;
  --sky:#7fb0ff;
  --muted:#4a5266;
  --line:#e3e6ec;
  --font:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;

  display:block;
  width:100%;
  overflow:hidden;
  background:#fff;
  color:#1f2533;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
.sscd-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }

/* --- teks umum --- */
.sscd-tag{
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:12px;
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red);
}
.sscd-tag::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--red); flex-shrink:0; }
.sscd-tag-light{ color:var(--sky); }
.sscd-tag-light::before{ background:var(--sky); }
.sscd .sscd-h2{
  font-family:var(--font) !important;
  font-size:clamp(26px, 2.8vw, 40px); font-weight:800 !important; line-height:1.15;
  letter-spacing:-.01em; color:var(--navy) !important; margin:0;
}

/* --- tombol --- */
.sscd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:6px; border:1px solid transparent;
  font-family:var(--font); font-size:.9rem; font-weight:700;
  text-decoration:none !important; white-space:nowrap;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.sscd-btn svg{ transition:transform .3s ease; }
.sscd-btn:hover svg{ transform:translateX(4px); }
.sscd-btn-red{ background:var(--red); color:#fff !important; box-shadow:0 8px 20px rgba(192,57,43,.3); }
.sscd-btn-red:hover{ background:var(--red-dark); transform:translateY(-1px); }
.sscd-btn-light{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.7); color:#fff !important; }
.sscd-btn-light:hover{ background:#fff; color:var(--navy) !important; }
.sscd-btn-navy{ background:var(--navy); color:#fff !important; }
.sscd-btn-navy:hover{ background:var(--navy-deep); }
.sscd-btn-ghost{ border-color:var(--line); color:var(--navy) !important; background:#fff; }
.sscd-btn-ghost:hover{ border-color:var(--navy); }
.sscd-btn-block{ display:flex; width:100%; margin-top:10px; }
.sscd-btn:focus-visible, .sscd a:focus-visible, .sscd button:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* =========================================================
   HERO
   ========================================================= */
.sscd-hero{
  position:relative;
  min-height:clamp(480px, 62vh, 620px);
  display:flex; align-items:flex-end;
  padding:140px 0 72px;
  background:var(--navy-deep);
  color:#fff;
  isolation:isolate;
}
.sscd-hero-media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.sscd-hero-media img{
  width:100%; height:100%; max-width:none; object-fit:cover;
  transform:scale(1.08);
  animation:sscdZoom 2.2s cubic-bezier(.25,1,.5,1) forwards;
}
@keyframes sscdZoom{ to{ transform:scale(1); } }
.sscd-hero-shade{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(10,31,85,.96) 0%, rgba(10,31,85,.82) 38%, rgba(10,31,85,.35) 70%, rgba(10,31,85,.15) 100%),
    linear-gradient(0deg, rgba(10,31,85,.7) 0%, rgba(10,31,85,0) 45%);
}
.sscd-hero-inner{ width:100%; }

.sscd-crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-bottom:28px;
  font-size:.8rem; font-weight:600; color:rgba(255,255,255,.65);
}
.sscd-crumbs a{ color:rgba(255,255,255,.85) !important; text-decoration:none !important; transition:color .25s ease; }
.sscd-crumbs a:hover{ color:#fff !important; }
.sscd-crumbs [aria-current]{ color:#fff; }

.sscd-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}
.sscd-eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--red); }
.sscd-eyebrow b{ font-family:var(--mono); color:var(--sky); font-weight:600; }

.sscd .sscd-title{
  font-family:var(--font) !important;
  font-size:clamp(34px, 5vw, 66px); font-weight:800 !important;
  line-height:1.05; letter-spacing:-.015em;
  color:#fff !important;
  margin:20px 0 20px; max-width:860px;
}
.sscd-lead{
  max-width:620px; margin:0 0 32px;
  padding-left:16px; border-left:3px solid var(--red);
  font-size:clamp(15px, 1.25vw, 18px); font-weight:500; line-height:1.7;
  color:rgba(255,255,255,.88);
}
.sscd-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.sscd-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0; padding:0; list-style:none; }
.sscd-chips li{
  padding:6px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06);
  font-size:.74rem; font-weight:700; color:#fff;
}

/* =========================================================
   ISI + SIDEBAR
   ========================================================= */
.sscd-body{ padding:96px 0 40px; }
.sscd-grid{ display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:64px; align-items:start; }

.sscd-prose{ font-size:1.02rem; line-height:1.85; color:var(--muted); }
.sscd-prose > *:first-child{ margin-top:0; }
.sscd-prose p{ margin:0 0 1.2em; }
.sscd-prose h2, .sscd-prose h3, .sscd-prose h4{
  font-family:var(--font) !important; color:var(--navy) !important; font-weight:800 !important;
  line-height:1.25; margin:1.8em 0 .6em;
}
.sscd-prose h2{ font-size:1.6rem; }
.sscd-prose h3{ font-size:1.3rem; }
.sscd-prose ul, .sscd-prose ol{ margin:0 0 1.3em; padding-left:0; list-style:none; }
.sscd-prose ul li, .sscd-prose ol li{ position:relative; padding-left:28px; margin:0 0 .55em; }
.sscd-prose ul li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:16px; height:16px; margin-top:-4px; border-radius:50%;
  background:#eef2fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2a6b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/10px no-repeat;
}
.sscd-prose ol{ counter-reset:sscd; }
.sscd-prose ol li::before{
  counter-increment:sscd; content:counter(sscd, decimal-leading-zero);
  position:absolute; left:0; top:0;
  font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--red);
}
.sscd-prose a{ color:var(--navy); font-weight:700; text-decoration-color:rgba(192,57,43,.5); text-underline-offset:3px; }
.sscd-prose img{ max-width:100%; height:auto; border-radius:12px; }
.sscd-prose blockquote{
  margin:1.6em 0; padding:18px 22px;
  border-left:3px solid var(--red); background:#f8f9fb; border-radius:0 10px 10px 0;
  font-style:italic; color:#1f2533;
}
.sscd-prose table{ width:100%; border-collapse:collapse; margin:0 0 1.4em; font-size:.92rem; }
.sscd-prose th, .sscd-prose td{ padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; }
.sscd-prose th{ color:var(--navy); font-weight:800; }

.sscd-side{ position:sticky; top:110px; }
.sscd-card{
  padding:26px 24px 24px;
  border:1px solid var(--line); border-radius:16px; background:#fff;
  box-shadow:0 20px 44px rgba(10,31,85,.08);
}
.sscd-card-h{ margin:0 0 16px; font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--navy); }
.sscd-facts{ margin:0 0 18px; padding:0; }
.sscd-facts > div{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.sscd-facts dt{ font-size:.8rem; color:#7a8193; margin:0; }
.sscd-facts dd{ margin:0; font-size:.86rem; font-weight:700; color:#1f2533; text-align:right; }
.sscd-facts dd.mono{ font-family:var(--mono); color:var(--red); }
.sscd-back{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-size:.86rem; font-weight:700; color:var(--navy) !important; text-decoration:none !important;
}
.sscd-back svg{ transition:transform .3s ease; }
.sscd-back:hover svg{ transform:translateX(-4px); }

/* =========================================================
   GALERI
   ========================================================= */
.sscd-gallery{ padding:72px 0 20px; }
.sscd-head{ margin-bottom:32px; }
.sscd-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.sscd-link{ font-size:.9rem; font-weight:700; color:var(--navy) !important; text-decoration:none !important; white-space:nowrap; }
.sscd-link:hover{ color:var(--red) !important; }
.sscd-gal-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin:0; padding:0; list-style:none; }
.sscd-gal-grid li:first-child{ grid-column:span 2; grid-row:span 2; }
.sscd-gal-item{
  all:unset; cursor:zoom-in; display:block; position:relative;
  width:100%; height:100%; min-height:200px;
  border-radius:14px; overflow:hidden; background:var(--navy-deep);
}
.sscd-gal-item img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;
  transition:transform .8s cubic-bezier(.25,1,.5,1), filter .4s ease;
}
.sscd-gal-item:hover img{ transform:scale(1.06); filter:brightness(.85); }
.sscd-gal-item:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* =========================================================
   TERKAIT
   ========================================================= */
.sscd-related{ padding:88px 0 40px; }
.sscd-rel-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin:0; padding:0; list-style:none; }
.sscd-rel{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:340px; border-radius:16px; overflow:hidden;
  background:var(--navy-deep); color:#fff !important; text-decoration:none !important;
  box-shadow:0 14px 34px rgba(10,31,85,.12);
  transition:transform .45s cubic-bezier(.25,1,.5,1), box-shadow .45s ease;
}
.sscd-rel:hover{ transform:translateY(-6px); box-shadow:0 28px 54px rgba(10,31,85,.28); }
.sscd-rel::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; z-index:2;
  background:var(--red); transform:scaleY(.25); transform-origin:top;
  transition:transform .6s cubic-bezier(.25,1,.5,1);
}
.sscd-rel:hover::after{ transform:scaleY(1); }
.sscd-rel-media{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform .9s cubic-bezier(.25,1,.5,1);
}
.sscd-rel:hover .sscd-rel-media{ transform:scale(1.07); }
.sscd-rel-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,24,60,.95) 0%, rgba(10,24,60,.6) 45%, rgba(10,24,60,.1) 100%);
}
.sscd-rel-body{ position:relative; z-index:1; display:flex; flex-direction:column; gap:8px; padding:24px; }
.sscd-rel-cat{ font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--sky); }
.sscd-rel-title{ font-size:1.2rem; font-weight:800; line-height:1.3; color:#fff; }
.sscd-rel-more{ margin-top:6px; font-size:.82rem; font-weight:700; color:rgba(255,255,255,.85); }

/* =========================================================
   PREV / NEXT
   ========================================================= */
.sscd-pager{ padding:48px 0 0; }
.sscd-pager-inner{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sscd-pager-link{
  display:flex; flex-direction:column; gap:6px;
  padding:22px 24px; border:1px solid var(--line); border-radius:14px;
  text-decoration:none !important; background:#fff;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.sscd-pager-link:hover{ border-color:var(--navy); transform:translateY(-3px); box-shadow:0 16px 34px rgba(10,31,85,.1); }
.sscd-pager-link.is-next{ text-align:right; }
.sscd-pager-link small{ font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.sscd-pager-link span{ font-size:1rem; font-weight:800; color:var(--navy); }

/* =========================================================
   CTA
   ========================================================= */
.sscd-cta{ padding:96px 0 110px; }
.sscd-cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  padding:48px 52px !important; border-radius:20px;
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(91,155,255,.25), transparent 70%),
    linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
  box-shadow:0 28px 60px rgba(10,31,85,.25);
}
.sscd .sscd-cta-title{
  font-family:var(--font) !important;
  font-size:clamp(24px, 2.6vw, 36px); font-weight:800 !important; line-height:1.2;
  color:#fff !important; margin:0 0 10px;
}
.sscd-cta-inner p{ margin:0; max-width:560px; font-size:.98rem; line-height:1.7; color:rgba(255,255,255,.8); }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.sscd-lb{
  position:fixed; inset:0; z-index:99999;
  display:none; align-items:center; justify-content:center;
  padding:60px 70px;
  background:rgba(8,16,40,.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s ease;
}
.sscd-lb.is-open{ display:flex; }
.sscd-lb.is-show{ opacity:1; }
.sscd-lb img{ max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.sscd-lb button{
  all:unset; cursor:pointer; position:absolute;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:#fff; font-size:1.4rem;
  font-family:'Montserrat',Arial,sans-serif;
  transition:background .25s ease;
}
.sscd-lb button:hover, .sscd-lb button:focus-visible{ background:#c0392b; }
.sscd-lb-close{ top:16px; right:16px; font-size:1rem !important; }
.sscd-lb-nav.is-prev{ left:14px; top:50%; margin-top:-23px; }
.sscd-lb-nav.is-next{ right:14px; top:50%; margin-top:-23px; }

/* =========================================================
   ANIMASI MASUK (aktif jika JS menambah .sscd-js)
   ========================================================= */
.sscd-js .sscd-rv{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s ease, transform .9s cubic-bezier(.25,1,.5,1);
  transition-delay:calc(var(--d, 0) * 110ms);
}
.sscd-js .sscd-rv.is-in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIF
   ========================================================= */
@media (max-width:1024px){
  .sscd-grid{ grid-template-columns:1fr; gap:40px; }
  .sscd-side{ position:static; }
  .sscd-rel-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .sscd-wrap{ padding:0 18px; }
  .sscd-hero{ padding:110px 0 52px; min-height:520px; }
  .sscd-hero-shade{ background:linear-gradient(180deg, rgba(10,31,85,.55) 0%, rgba(10,31,85,.85) 55%, rgba(10,31,85,.97) 100%); }
  .sscd-body{ padding:64px 0 24px; }
  .sscd-gal-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .sscd-gal-item{ min-height:140px; }
  .sscd-rel-grid{ grid-template-columns:1fr; }
  .sscd-rel{ min-height:260px; }
  .sscd-head-row{ flex-direction:column; align-items:flex-start; }
  .sscd-pager-inner{ grid-template-columns:1fr; }
  .sscd-pager-link.is-next{ text-align:left; }
  .sscd-cta{ padding:64px 0 80px; }
  .sscd-cta-inner{ flex-direction:column; align-items:flex-start; padding:32px 24px !important; }
  .sscd-btn{ padding:13px 20px; font-size:.86rem; }
  .sscd-lb{ padding:60px 12px; }
}
@media (prefers-reduced-motion: reduce){
  .sscd-hero-media img{ animation:none; transform:none; }
  .sscd-js .sscd-rv{ opacity:1; transform:none; transition:none; }
  .sscd-rel, .sscd-rel-media, .sscd-gal-item img{ transition:none; }
}


/* =========================================================
   NAVBAR TRANSPARAN DI ATAS HERO (v1.0.4) — sama dengan halaman lain
   ========================================================= */
.ssc-nav-el{ position:relative; z-index:50; }
.ssc-nav-el.is-dark{
  background-color:transparent !important; background-image:none !important;
  border-color:transparent !important; box-shadow:none !important;
}
.ssc-nav-el.is-dark *:not(select):not(option):not(.sub-menu):not(.sub-menu *):not(ul ul):not(ul ul *){
  background-color:transparent !important; background-image:none !important;
  border-color:transparent !important; box-shadow:none !important;
}
.ssc-nav-el.is-dark :is(a, span, p, li, button, label, div, i, strong){ color:#fff !important; }
.ssc-nav-el.is-dark svg:not(.site-branding svg):not(.ast-site-identity svg):not(.custom-logo-link svg):not(.site-logo-img svg),
.ssc-nav-el.is-dark svg:not(.site-branding svg):not(.ast-site-identity svg):not(.custom-logo-link svg):not(.site-logo-img svg) *{
  fill:#fff !important; color:#fff !important;
}
.ssc-nav-el.is-dark select{ background-color:transparent !important; color:#fff !important; border:1px solid rgba(255,255,255,.5) !important; }
.ssc-nav-el.is-dark select option{ color:#1f2533 !important; background:#fff !important; }
.ssc-nav-el.is-dark :is(.sub-menu, ul ul){ background:#fff !important; }
.ssc-nav-el.is-dark :is(.sub-menu, ul ul) :is(a, span, li){ color:#1f2533 !important; }
/* tombol EN putih seperti di Home */
body .ssc-nav-el.is-dark .ssc-lang .ssc-lang-btn.ssc-lang-btn{
  background-color:#fff !important; border:1px solid #fff !important; color:#1C1A17 !important;
}
body .ssc-nav-el.is-dark .ssc-lang .ssc-lang-btn.ssc-lang-btn *{ color:#1C1A17 !important; }
body .ssc-nav-el.is-dark .ssc-lang .ssc-lang-btn.ssc-lang-btn .ssc-lang-globe{ background-color:#2563EB !important; }
body .ssc-nav-el.is-dark .ssc-lang .ssc-lang-btn.ssc-lang-btn .ssc-lang-caret{ background-color:#1C1A17 !important; }
body .ssc-nav-el.is-dark .ssc-lang .ssc-lang-menu{ background-color:#0f172a !important; }
body .ssc-nav-el.is-dark .ssc-lang .ssc-lang-menu .ssc-lang-item{ color:#fff !important; }
/* menu aktif: garis merah di bawah teks */
.ssc-nav-el.is-dark .main-header-menu > :is(.current-menu-item, .current_page_item, .current-menu-ancestor) > .menu-link{
  text-decoration:underline !important; text-decoration-color:#c0392b !important;
  text-decoration-thickness:3px !important; text-underline-offset:10px;
}