/* =========================================================
   PETA BESAR FRAGMEN
   Clean Final CSS + Editorial Premium Lift
   Root: #ss-fragmen-godmode
   Prefix: ss-frag-
   Scoped, TagDiv Newspaper Safe, sslp-core Compatible
========================================================= */


/* =========================================================
   0. HARD SCOPE RESET
========================================================= */

#ss-fragmen-godmode,
#ss-fragmen-godmode *,
#ss-fragmen-godmode *::before,
#ss-fragmen-godmode *::after{
  box-sizing:border-box !important;
}

#ss-fragmen-godmode{
  --ss-bg:#07101d;
  --ss-bg-deep:#040914;
  --ss-bg-soft:#101d30;

  --ss-surface:rgba(255,255,255,.055);
  --ss-surface-2:rgba(255,255,255,.088);
  --ss-surface-3:rgba(255,255,255,.118);

  --ss-border:rgba(214,180,112,.22);
  --ss-border-strong:rgba(214,180,112,.38);
  --ss-border-soft:rgba(255,255,255,.10);
  --ss-border-blue:rgba(108,148,189,.34);

  --ss-text:#f3efe6;
  --ss-muted:rgba(243,239,230,.74);
  --ss-soft:rgba(243,239,230,.58);

  --ss-gold:#c8a15a;
  --ss-gold-2:#e0c079;

  --ss-blue:#6c94bd;
  --ss-blue-soft:rgba(108,148,189,.16);
  --ss-blue-soft-2:rgba(108,148,189,.10);

  --ss-violet:#8f84c9;
  --ss-violet-soft:rgba(143,132,201,.16);

  --ss-rose:#b87b72;
  --ss-rose-soft:rgba(184,123,114,.14);

  --ss-radius-xl:30px;
  --ss-radius-lg:22px;
  --ss-radius-md:18px;

  --ss-shadow:0 24px 76px rgba(0,0,0,.30);
  --ss-shadow-soft:0 18px 52px rgba(0,0,0,.14);

  --ss-max:1180px;
  --ss-serif:Georgia, "Times New Roman", serif;
  --ss-sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;

  color:var(--ss-text) !important;
  font-family:var(--ss-sans) !important;
  font-size:16px !important;
  line-height:1.65 !important;
  scroll-behavior:smooth !important;

  background:
    radial-gradient(circle at 12% 8%, rgba(200,161,90,.12), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(108,148,189,.16), transparent 35%),
    radial-gradient(circle at 48% 94%, rgba(143,132,201,.10), transparent 38%),
    radial-gradient(circle at 18% 84%, rgba(184,123,114,.050), transparent 34%),
    linear-gradient(90deg, rgba(200,161,90,.016) 0 1px, transparent 1px 100%),
    linear-gradient(145deg, var(--ss-bg-deep) 0%, var(--ss-bg) 45%, #0d1d32 100%) !important;
  background-size:auto, auto, auto, auto, 58px 58px, auto !important;
}

#ss-fragmen-godmode[data-theme="light"]{
  --ss-bg:#f6f1e8;
  --ss-bg-deep:#fbf7ef;
  --ss-bg-soft:#eef2f8;

  --ss-surface:rgba(255,255,255,.72);
  --ss-surface-2:rgba(255,255,255,.94);
  --ss-surface-3:rgba(255,255,255,.98);

  --ss-border:rgba(111,78,34,.20);
  --ss-border-strong:rgba(111,78,34,.34);
  --ss-border-soft:rgba(30,45,66,.12);
  --ss-border-blue:rgba(65,111,152,.26);

  --ss-text:#172235;
  --ss-muted:rgba(23,34,53,.74);
  --ss-soft:rgba(23,34,53,.58);

  --ss-gold:#9f7430;
  --ss-gold-2:#7d5520;

  --ss-blue:#416f98;
  --ss-blue-soft:rgba(65,111,152,.12);
  --ss-blue-soft-2:rgba(65,111,152,.08);

  --ss-violet:#6960a4;
  --ss-violet-soft:rgba(105,96,164,.10);

  --ss-rose:#985d55;
  --ss-rose-soft:rgba(152,93,85,.10);

  --ss-shadow:0 24px 70px rgba(35,35,35,.12);
  --ss-shadow-soft:0 18px 52px rgba(35,35,35,.10);

  color:var(--ss-text) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(159,116,48,.14), transparent 31%),
    radial-gradient(circle at 86% 12%, rgba(65,111,152,.12), transparent 35%),
    radial-gradient(circle at 48% 94%, rgba(105,96,164,.055), transparent 38%),
    linear-gradient(90deg, rgba(159,116,48,.018) 0 1px, transparent 1px 100%),
    linear-gradient(145deg, #fbf7ef 0%, #f3ede2 48%, #eef2f8 100%) !important;
  background-size:auto, auto, auto, 58px 58px, auto !important;
}


/* =========================================================
   1. TAGDIV AND NEWSPAPER GUARD
========================================================= */

#ss-fragmen-godmode h1,
#ss-fragmen-godmode h2,
#ss-fragmen-godmode h3,
#ss-fragmen-godmode h4,
#ss-fragmen-godmode p,
#ss-fragmen-godmode span,
#ss-fragmen-godmode strong,
#ss-fragmen-godmode div,
#ss-fragmen-godmode article,
#ss-fragmen-godmode aside,
#ss-fragmen-godmode section,
#ss-fragmen-godmode header,
#ss-fragmen-godmode footer,
#ss-fragmen-godmode a,
#ss-fragmen-godmode button,
#ss-fragmen-godmode input,
#ss-fragmen-godmode select,
#ss-fragmen-godmode summary{
  font-family:inherit !important;
  text-shadow:none !important;
}

#ss-fragmen-godmode h1,
#ss-fragmen-godmode h2,
#ss-fragmen-godmode h3,
#ss-fragmen-godmode h4{
  color:var(--ss-text) !important;
  margin-top:0 !important;
  text-transform:none !important;
}

#ss-fragmen-godmode p{
  color:var(--ss-muted) !important;
  margin-top:0 !important;
}

#ss-fragmen-godmode a,
#ss-fragmen-godmode a:link,
#ss-fragmen-godmode a:visited,
#ss-fragmen-godmode a:hover,
#ss-fragmen-godmode a:active{
  color:inherit !important;
  text-decoration:none !important;
  outline:none !important;
}

#ss-fragmen-godmode button,
#ss-fragmen-godmode input,
#ss-fragmen-godmode select{
  font:inherit !important;
  outline:none !important;
}

#ss-fragmen-godmode button{
  appearance:none !important;
  -webkit-appearance:none !important;
  cursor:pointer !important;
}


/* =========================================================
   2. LAYOUT AND TYPOGRAPHY
========================================================= */

#ss-fragmen-godmode .ss-frag-shell{
  width:min(var(--ss-max), calc(100% - 32px)) !important;
  margin:0 auto !important;
  position:relative !important;
  z-index:2 !important;
}

#ss-fragmen-godmode .ss-frag-bg-mark{
  position:absolute !important;
  inset:auto -8vw 8% auto !important;
  z-index:1 !important;
  width:min(52vw, 640px) !important;
  height:min(52vw, 640px) !important;
  border-radius:50% !important;
  border:1px solid rgba(108,148,189,.15) !important;
  opacity:.52 !important;
  pointer-events:none !important;
}

#ss-fragmen-godmode .ss-frag-bg-mark::before,
#ss-fragmen-godmode .ss-frag-bg-mark::after{
  content:"" !important;
  position:absolute !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.075) !important;
}

#ss-fragmen-godmode .ss-frag-bg-mark::before{
  inset:12% !important;
}

#ss-fragmen-godmode .ss-frag-bg-mark::after{
  inset:26% !important;
  border-color:rgba(200,161,90,.11) !important;
}

#ss-fragmen-godmode h1{
  max-width:940px !important;
  margin:0 0 20px !important;
  font-family:var(--ss-serif) !important;
  font-size:clamp(36px, 4.2vw, 52px) !important;
  line-height:1.03 !important;
  letter-spacing:-.045em !important;
  font-weight:730 !important;
}

#ss-fragmen-godmode h2{
  margin:0 !important;
  font-family:var(--ss-serif) !important;
  font-size:clamp(25px, 2.5vw, 36px) !important;
  line-height:1.14 !important;
  letter-spacing:-.032em !important;
  font-weight:700 !important;
}

#ss-fragmen-godmode h3{
  margin:0 0 8px !important;
  font-family:var(--ss-serif) !important;
  font-size:clamp(18px, 1.38vw, 22px) !important;
  line-height:1.2 !important;
  letter-spacing:-.018em !important;
  font-weight:700 !important;
}


/* =========================================================
   3. TOPBAR AND FOOTER
========================================================= */

#ss-fragmen-godmode .ss-frag-topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  padding:24px 0 16px !important;
  position:relative !important;
  z-index:5 !important;
}

#ss-fragmen-godmode .ss-frag-navlinks{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

#ss-fragmen-godmode .ss-frag-pill,
#ss-fragmen-godmode .ss-frag-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:36px !important;
  padding:8px 13px !important;
  border:1px solid var(--ss-border-soft) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.05) !important;
  color:var(--ss-muted) !important;
  font-size:11.5px !important;
  font-weight:760 !important;
  line-height:1.2 !important;
  letter-spacing:.075em !important;
  text-transform:uppercase !important;
  transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease !important;
}

#ss-fragmen-godmode[data-theme="light"] .ss-frag-pill,
#ss-fragmen-godmode[data-theme="light"] .ss-frag-toggle{
  background:rgba(255,255,255,.72) !important;
}

#ss-fragmen-godmode .ss-frag-pill:hover,
#ss-fragmen-godmode .ss-frag-toggle:hover{
  transform:translateY(-2px) !important;
  color:var(--ss-text) !important;
  border-color:var(--ss-border-strong) !important;
  background:var(--ss-surface-2) !important;
}

#ss-fragmen-godmode .ss-frag-brand{
  color:var(--ss-gold) !important;
  font-size:11.5px !important;
  font-weight:820 !important;
  line-height:1.3 !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  opacity:.92 !important;
  white-space:nowrap !important;
}

#ss-fragmen-godmode .ss-frag-footer{
  padding:24px 0 36px !important;
  border-top:1px solid var(--ss-border-soft) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  flex-wrap:wrap !important;
  color:var(--ss-soft) !important;
  font-size:11.5px !important;
  line-height:1.4 !important;
  letter-spacing:.075em !important;
  text-transform:uppercase !important;
}

#ss-fragmen-godmode .ss-frag-footer span,
#ss-fragmen-godmode .ss-frag-footer a{
  color:var(--ss-soft) !important;
}

#ss-fragmen-godmode .ss-frag-footer a{
  border-bottom:1px solid transparent !important;
  transition:color .25s ease, border-color .25s ease !important;
}

#ss-fragmen-godmode .ss-frag-footer a:hover{
  color:var(--ss-gold) !important;
  border-color:var(--ss-gold) !important;
}


/* =========================================================
   4. HERO
========================================================= */

#ss-fragmen-godmode .ss-frag-hero{
  padding:58px 0 54px !important;
  scroll-margin-top:90px !important;
}

#ss-fragmen-godmode .ss-frag-hero-grid{
  display:grid !important;
  grid-template-columns:minmax(0, .95fr) minmax(340px, 1.05fr) !important;
  gap:38px !important;
  align-items:center !important;
}

#ss-fragmen-godmode .ss-frag-kicker,
#ss-fragmen-godmode .ss-frag-eyebrow,
#ss-fragmen-godmode .sslp-eyebrow{
  display:inline-flex !important;
  align-items:center !important;
  color:var(--ss-gold) !important;
  font-size:11px !important;
  font-weight:850 !important;
  line-height:1.2 !important;
  letter-spacing:.15em !important;
  text-transform:uppercase !important;
}

#ss-fragmen-godmode .ss-frag-kicker{
  gap:10px !important;
  margin-bottom:16px !important;
}

#ss-fragmen-godmode .ss-frag-kicker::before{
  content:"" !important;
  width:34px !important;
  height:1px !important;
  background:var(--ss-gold) !important;
  opacity:.85 !important;
}

#ss-fragmen-godmode .ss-frag-hero-lead{
  max-width:780px !important;
  margin:0 0 24px !important;
  color:var(--ss-muted) !important;
  font-size:clamp(15.5px, 1.18vw, 17.5px) !important;
  line-height:1.72 !important;
}

#ss-fragmen-godmode .ss-frag-quote{
  max-width:760px !important;
  margin:0 0 26px !important;
  padding:16px 18px 16px 20px !important;
  border-left:2px solid var(--ss-blue) !important;
  border-radius:0 18px 18px 0 !important;
  background:
    linear-gradient(90deg, rgba(108,148,189,.17), rgba(108,148,189,.035)) !important;
  color:var(--ss-text) !important;
  font-family:var(--ss-serif) !important;
  font-size:clamp(17px, 1.5vw, 21px) !important;
  line-height:1.48 !important;
  letter-spacing:-.018em !important;
}

#ss-fragmen-godmode .ss-frag-actions{
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  margin-top:24px !important;
}

#ss-fragmen-godmode .ss-frag-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  min-height:44px !important;
  padding:11px 17px !important;
  border-radius:999px !important;
  border:1px solid var(--ss-border) !important;
  font-size:12.5px !important;
  font-weight:820 !important;
  line-height:1.2 !important;
  letter-spacing:.035em !important;
  transition:transform .25s ease, background .25s ease, border-color .25s ease !important;
}

#ss-fragmen-godmode .ss-frag-btn.primary{
  color:#120f0a !important;
  background:linear-gradient(135deg, #d9b66e, #f2dda3) !important;
  border-color:rgba(255,255,255,.22) !important;
  box-shadow:0 16px 42px rgba(200,161,90,.16) !important;
}

#ss-fragmen-godmode .ss-frag-btn.blue{
  color:#f8fbff !important;
  background:linear-gradient(135deg, #416f98, #6c94bd) !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:0 16px 42px rgba(108,148,189,.18) !important;
}

#ss-fragmen-godmode .ss-frag-btn.secondary{
  color:var(--ss-text) !important;
  background:rgba(255,255,255,.06) !important;
  border-color:var(--ss-border-soft) !important;
}

#ss-fragmen-godmode[data-theme="light"] .ss-frag-btn.secondary{
  background:rgba(255,255,255,.74) !important;
}

#ss-fragmen-godmode .ss-frag-btn:hover{
  transform:translateY(-3px) !important;
  border-color:var(--ss-gold) !important;
}


/* =========================================================
   5. HERO IMAGE: FRAGMENT ORIGIN ATLAS
========================================================= */

#ss-fragmen-godmode .ss-frag-hero-image{
  position:relative !important;
  min-height:500px !important;
  border:1px solid var(--ss-border) !important;
  border-radius:var(--ss-radius-xl) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    radial-gradient(circle at 50% 40%, rgba(200,161,90,.14), transparent 34%),
    linear-gradient(145deg, rgba(11,23,40,.96), rgba(18,39,64,.58)) !important;
  box-shadow:var(--ss-shadow) !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

#ss-fragmen-godmode .ss-frag-hero-image::before{
  content:"" !important;
  position:absolute !important;
  inset:18px !important;
  z-index:2 !important;
  border-radius:24px !important;
  border:1px solid rgba(224,192,121,.18) !important;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.052) 49.9% 50.1%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(255,255,255,.038) 49.9% 50.1%, transparent 50.3%) !important;
  opacity:.52 !important;
  pointer-events:none !important;
}

#ss-fragmen-godmode .ss-frag-hero-image::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:
    linear-gradient(180deg, rgba(4,9,20,.08), rgba(4,9,20,.70)),
    radial-gradient(circle at 18% 18%, rgba(200,161,90,.16), transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(108,148,189,.14), transparent 34%) !important;
  pointer-events:none !important;
}

#ss-fragmen-godmode[data-theme="light"] .ss-frag-hero-image::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(23,34,53,.18)),
    radial-gradient(circle at 18% 18%, rgba(159,116,48,.13), transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(65,111,152,.10), transparent 34%) !important;
}

#ss-fragmen-godmode .ss-frag-hero-image img{
  width:100% !important;
  height:100% !important;
  min-height:500px !important;
  display:block !important;
  object-fit:cover !important;
  opacity:.86 !important;
  filter:saturate(.92) contrast(1.02) brightness(.82) !important;
  transform:scale(1.01) !important;
}

#ss-fragmen-godmode[data-theme="light"] .ss-frag-hero-image img{
  opacity:.92 !important;
  filter:saturate(.92) contrast(1.01) brightness(.98) !important;
}

#ss-fragmen-godmode .ss-frag-hero-badge{
  position:absolute !important;
  left:22px !important;
  right:22px !important;
  bottom:22px !important;
  z-index:3 !important;
  padding:18px !important;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(5,11,20,.68) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}

#ss-fragmen-godmode[data-theme="light"] .ss-frag-hero-badge{
  background:rgba(255,255,255,.74) !important;
}

#ss-fragmen-godmode .ss-frag-hero-badge strong{
  display:block !important;
  margin-bottom:6px !important;
  color:var(--ss-gold) !important;
  font-size:11px !important;
  line-height:1.2 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

#ss-fragmen-godmode .ss-frag-hero-badge span{
  display:block !important;
  color:var(--ss-text) !important;
  font-family:var(--ss-serif) !important;
  font-size:clamp(18px, 1.6vw, 22px) !important;
  line-height:1.25 !important;
  letter-spacing:-.018em !important;
}


/* =========================================================
   6. SECTION BASE
========================================================= */

#ss-fragmen-godmode .ss-frag-section,
#ss-fragmen-godmode .ss-frag-cta,
#ss-fragmen-godmode .sslp-pause{
  scroll-margin-top:90px !important;
}

#ss-fragmen-godmode .ss-frag-section{
  padding:50px 0 !important;
  position:relative !important;
  z-index:2 !important;
}

#ss-fragmen-godmode .ss-frag-section-head{
  display:grid !important;
  grid-template-columns:minmax(0, .78fr) minmax(320px, .62fr) !important;
  gap:28px !important;
  align-items:end !important;
  margin-bottom:28px !important;
}

#ss-fragmen-godmode .ss-frag-eyebrow{
  margin-bottom:12px !important;
}

#ss-fragmen-godmode .ss-frag-section-desc{
  color:var(--ss-muted) !important;
  font-size:15.5px !important;
  line-height:1.76 !important;
}

#ss-fragmen-godmode .ss-frag-dual{
  display:grid !important;
  grid-template-columns:minmax(0, .78fr) minmax(300px, .52fr) !important;
  gap:20px !important;
  align-items:stretch !important;
}


/* =========================================================
   7. PANEL SYSTEM
========================================================= */

#ss-fragmen-godmode .ss-frag-panel,
#ss-fragmen-godmode .ss-frag-statement,
#ss-fragmen-godmode .ss-frag-note,
#ss-fragmen-godmode .ss-frag-filter-wrap,
#ss-fragmen-godmode .ss-frag-cta,
#ss-fragmen-godmode .sslp-pause-box{
  position:relative !important;
  overflow:hidden !important;
  border:1px solid var(--ss-border) !important;
  border-radius:var(--ss-radius-xl) !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(200,161,90,.12), transparent 34%),
    radial-gradient(circle at 92% 88%, var(--ss-blue-soft-2), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.03)) !important;
  box-shadow:var(--ss-shadow) !important;
}

#ss-fragmen-godmode[data-theme="light"] .ss-frag-panel,
#ss-fragmen-godmode[data-theme="light"] .ss-frag-statement,
#ss-fragmen-godmode[data-theme="light"] .ss-frag-note,
#ss-fragmen-godmode[data-theme="light"] .ss-frag-filter-wrap,
#ss-fragmen-godmode[data-theme="light"] .ss-frag-cta,
#ss-fragmen-godmode[data-theme="light"] .sslp-pause-box{
  background:
    radial-gradient(circle at 12% 18%, rgba(159,116,48,.10), transparent 34%),
    radial-gradient(circle at 92% 88%, rgba(65,111,152,.065), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.62)) !important;
}

#ss-fragmen-godmode .ss-frag-panel,
#ss-fragmen-godmode .ss-frag-statement,
#ss-fragmen-godmode .ss-frag-note{
  padding:28px !important;
}

#ss-fragmen-godmode .ss-frag-panel.blue,
#ss-fragmen-godmode .ss-frag-statement.blue,
#ss-fragmen-godmode .ss-frag-note.blue{
  border-color:rgba(108,148,189,.36) !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(108,148,189,.14), transparent 34%),
    radial-gradient(circle at 92% 88%, rgba(200,161,90,.08), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.03)) !important;
}

#ss-fragmen-godmode .ss-frag-panel::before,
#ss-fragmen-godmode .ss-frag-statement::before,
#ss-fragmen-godmode .ss-frag-note::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:32px !important;
  bottom:32px !important;
  width:3px !important;
  border-radius:999px !important;
  background:linear-gradient(to bottom, transparent, var(--ss-gold), transparent) !important;
  opacity:.42 !important;
}

#ss-fragmen-godmode .ss-frag-panel::after,
#ss-fragmen-godmode .ss-frag-statement::after,
#ss-fragmen-godmode .ss-frag-note::after{
  content:"" !important;
  position:absolute !important;
  right:-118px !important;
  bottom:-130px !important;
  width:330px !important;
  height:330px !important;
  border-radius:50% !important;
  border:1px solid rgba(108,148,189,.12) !important;
  box-shadow:
    0 0 0 46px rgba(108,148,189,.014),
    0 0 0 96px rgba(200,161,90,.010) !important;
  pointer-events:none !important;
  opacity:.46 !important;
}

#ss-fragmen-godmode .ss-frag-panel > *,
#ss-fragmen-godmode .ss-frag-statement > *,
#ss-fragmen-godmode .ss-frag-note > *{
  position:relative !important;
  z-index:2 !important;
}

#ss-fragmen-godmode .ss-frag-statement h2,
#ss-fragmen-godmode .ss-frag-panel h2{
  margin-bottom:14px !important;
}

#ss-fragmen-godmode .ss-frag-panel p,
#ss-fragmen-godmode .ss-frag-statement p,
#ss-fragmen-godmode .ss-frag-note p{
  margin:0 0 14px !important;
  font-size:15.5px !important;
  line-height:1.78 !important;
  color:var(--ss-muted) !important;
}

#ss-fragmen-godmode .ss-frag-panel p:last-child,
#ss-fragmen-godmode .ss-frag-statement p:last-child,
#ss-fragmen-godmode .ss-frag-note p:last-child{
  margin-bottom:0 !important;
}

#ss-fragmen-godmode .ss-frag-panel strong,
#ss-fragmen-godmode .ss-frag-note strong{
  color:var(--ss-text) !important;
  font-weight:820 !important;
}


/* =========================================================
   8. EDITORIAL GRIDS AND CARDS
========================================================= */

#ss-fragmen-godmode .ss-frag-grid-2,
#ss-fragmen-godmode .ss-frag-grid-3,
#ss-fragmen-godmode .ss-frag-grid-4{
  display:grid !important;
  gap:18px !important;
}

#ss-fragmen-godmode .ss-frag-grid-2{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

#ss-fragmen-godmode .ss-frag-grid-3{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}

#ss-fragmen-godmode .ss-frag-grid-4{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:14px !important;
}

#ss-fragmen-godmode .ss-frag-mini,
#ss-fragmen-godmode .ss-frag-step,
#ss-fragmen-godmode .ss-frag-faq-item,
#ss-fragmen-godmode .ss-frag-compass-card{
  position:relative !important;
  min-height:178px !important;
  padding:21px !important;
  border-radius:var(--ss-radius-lg) !important;
  border:1px solid var(--ss-border-soft) !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(108,148,189,.10), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.024)) !important;
  box-shadow:var(--ss-shadow-soft) !important;
  overflow:hidden !important;
}

#ss-fragmen-godmode[data-theme="light"] .ss-frag-mini,
#ss-fragmen-godmode[data-theme="light"] .ss-frag-step,
#ss-fragmen-godmode[data-theme="light"] .ss-frag-faq-item,
#ss-fragmen-godmode[data-theme="light"] .ss-frag-compass-card{
  background:
    radial-gradient(circle at 86% 12%, rgba(65,111,152,.09), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.56)) !important;
}

#ss-fragmen-godmode .ss-frag-mini.blue,
#ss-fragmen-godmode .ss-frag-step.blue,
#ss-fragmen-godmode .ss-frag-faq-item.blue{
  border-color:rgba(108,148,189,.34) !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(108,148,189,.15), transparent 34%),
    linear-gradient(145deg, rgba(108,148,189,.12), rgba(255,255,255,.045)) !important;
}

#ss-fragmen-godmode .ss-frag-mini::before,
#ss-fragmen-godmode .ss-frag-step::before,
#ss-fragmen-godmode .ss-frag-faq-item::before,
#ss-fragmen-godmode .ss-frag-compass-card::before{
  content:"" !important;
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg, rgba(200,161,90,.44), transparent) !important;
  opacity:.62 !important;
}

#ss-fragmen-godmode .ss-frag-mini::after,
#ss-fragmen-godmode .ss-frag-step::after,
#ss-fragmen-godmode .ss-frag-compass-card::after{
  content:"" !important;
  position:absolute !important;
  right:-44px !important;
  bottom:-44px !important;
  width:122px !important;
  height:122px !important;
  border-radius:50% !important;
  border:1px solid rgba(108,148,189,.22) !important;
  opacity:.56 !important;
  pointer-events:none !important;
}

#ss-fragmen-godmode .ss-frag-mini > *,
#ss-fragmen-godmode .ss-frag-step > *,
#ss-fragmen-godmode .ss-frag-faq-item > *,
#ss-fragmen-godmode .ss-frag-compass-card > *{
  position:relative !important;
  z-index:2 !important;
}

#ss-fragmen-godmode .label{
  display:inline-flex !important;
  margin-bottom:18px !important;
  color:var(--ss-gold) !important;
  font-size:11px !important;
  font-weight:850 !important;
  line-height:1.2 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

#ss-fragmen-godmode .ss-frag-mini p,
#ss-fragmen-godmode .ss-frag-step p,
#ss-fragmen-godmode .ss-frag-faq-item p,
#ss-fragmen-godmode .ss-frag-compass-card p{
  margin:0 !important;
  color:var(--ss-muted) !important;
  font-size:14px !important;
  line-height:1.66 !important;
}


/* =========================================================
   9. KOMPAS BACA AND PUSAT MAKNA
========================================================= */

#ss-fragmen-godmode .ss-frag-compass{
  padding:34px 0 46px !important;
}

#ss-fragmen-godmode .ss-frag-compass-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:14px !important;
}

#ss-fragmen-godmode .ss-frag-compass-card{
  min-height:220px !important;
}

#ss-fragmen-godmode .ss-frag-compass-card:nth-child(1){
  border-radius:34px 22px 22px 22px !important;
}

#ss-fragmen-godmode .ss-frag-compass-card:nth-child(2){
  transform:translateY(14px) !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(200,161,90,.10), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.022)) !important;
}

#ss-fragmen-godmode .ss-frag-compass-card:nth-child(3){
  transform:translateY(30px) !important;
}

#ss-fragmen-godmode .ss-frag-compass-card:nth-child(4){
  transform:translateY(8px) !important;
  border-radius:22px 34px 22px 22px !important;
}

#ss-fragmen-godmode .ss-frag-meaning{
  padding:8px 0 48px !important;
}

#ss-fragmen-godmode .ss-frag-meaning-box{
  position:relative !important;
  padding:clamp(26px, 3vw, 38px) !important;
  border-radius:var(--ss-radius-xl) !important;
  border:1px solid var(--ss-border) !important;
  background:
    radial-gradient(circle at 14% 22%, rgba(108,148,189,.16), transparent 36%),
    radial-gradient(circle at 88% 8%, rgba(200,161,90,.13), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.082), rgba(255,255,255,.035)) !important;
  box-shadow:var(--ss-shadow) !important;
  overflow:hidden !important;
}

#ss-fragmen-godmode .ss-frag-meaning-box::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:34px !important;
  bottom:34px !important;
  width:3px !important;
  border-radius:999px !important;
  background:linear-gradient(to bottom, transparent, var(--ss-blue), transparent) !important;
  opacity:.44 !important;
}

#ss-fragmen-godmode .ss-frag-meaning-box::after{
  content:"" !important;
  position:absolute !important;
  right:-118px !important;
  bottom:-130px !important;
  width:330px !important;
  height:330px !important;
  border-radius:50% !important;
  border:1px solid rgba(108,148,189,.12) !important;
  box-shadow:
    0 0 0 46px rgba(108,148,189,.014),
    0 0 0 96px rgba(200,161,90,.010) !important;
  pointer-events:none !important;
  opacity:.48 !important;
}

#ss-fragmen-godmode[data-theme="light"] .ss-frag-meaning-box{
  background:
    radial-gradient(circle at 14% 22%, rgba(65,111,152,.12), transparent 36%),
    radial-gradient(circle at 88% 8%, rgba(159,116,48,.11), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.66)) !important;
}

#ss-fragmen-godmode .ss-frag-meaning-grid{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:minmax(0, .82fr) minmax(320px, .52fr) !important;
  gap:28px !important;
  align-items:center !important;
}

#ss-fragmen-godmode .ss-frag-meaning-lead{
  margin:14px 0 0 !important;
  max-width:760px !important;
  color:var(--ss-muted) !important;
  font-size:16px !important;
  line-height:1.78 !important;
}

#ss-fragmen-godmode .ss-frag-meaning-list{
  display:grid !important;
  gap:10px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

#ss-fragmen-godmode .ss-frag-meaning-list li{
  margin:0 !important;
  padding:13px 14px !important;
  border-radius:16px !important;
  border:1px solid var(--ss-border-soft) !important;
  background:rgba(255,255,255,.045) !important;
  color:var(--ss-muted) !important;
  font-size:13.8px !important;
  line-height:1.58 !important;
}

#ss-fragmen-godmode[data-theme="light"] .ss-frag-meaning-list li{
  background:rgba(255,255,255,.66) !important;
}

#ss-fragmen-godmode .ss-frag-meaning-list strong{
  color:var(--ss-text) !important;
  font-weight:820 !important;
}


/* =========================================================
   10. TIMELINE
========================================================= */

#ss-fragmen-godmode .ss-frag-timeline{
  position:relative !important;
  display:grid !important;
  gap:12px !important;
}

#ss-fragmen-godmode .ss-frag-timeline::before{
  content:"" !important;
  position:absolute !important;
  left:60px !important;
  top:22px !important;
  bottom:22px !important;
  width:1px !important;
  background:linear-gradient(to bottom, transparent, rgba(108,148,189,.38), transparent) !important;
  pointer-events:none !important;
}

#ss-fragmen-godmode .ss-frag-timeline-item{
  position:relative !important;
  display:grid !important;
  grid-template-columns:120px minmax(0, 1fr) !important;
  gap:14px !important;
  padding:16px !important;
  border-radius:20px !important;
  border:1px solid var(--ss-border-soft) !important;
  background:rgba(255,255,255,.045) !important;
  overflow:hidden !important;
}

#ss-fragmen-godmode .ss-frag-timeline-item::before{
  content:"" !important;
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg, rgba(108,148,189,.36), transparent) !important;
}

#ss-fragmen-godmode[data-theme="light"] .ss-frag-timeline-item{
  background:rgba(255,255,255,.70) !important;
}

#ss-fragmen-godmode .ss-frag-timeline-code{
  position:relative !important;
  z-index:2 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  border-radius:999px !important;
  border:1px solid var(--ss-border) !important;
  color:var(--ss-gold) !important;
  background:rgba(200,161,90,.060) !important;
  font-size:11px !important;
  font-weight:850 !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
}

#ss-fragmen-godmode .ss-frag-timeline-item h3{
  margin-bottom:4px !important;
}

#ss-fragmen-godmode .ss-frag-timeline-item p{
  margin:0 !important;
  font-size:14px !important;
  line-height:1.65 !important;
}


/* =========================================================
   11. FILTER AND SEARCH
========================================================= */

#ss-fragmen-godmode .ss-frag-filter-wrap{
  padding:22px !important;
  position:sticky !important;
  top:12px !important;
  z-index:10 !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
}

#ss-fragmen-godmode .ss-frag-filter-wrap::before{
  content:"" !important;
  position:absolute !important;
  left:22px !important;
  right:22px !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg, rgba(108,148,189,.46), rgba(200,161,90,.16), transparent) !important;
  opacity:.70 !important;
}

#ss-fragmen-godmode .ss-frag-search-row{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  gap:12px !important;
  align-items:center !important;
  margin-top:16px !important;
}

#ss-fragmen-godmode .ss-frag-search{
  width:100% !important;
  min-height:48px !important;
  padding:12px 15px !important;
  border-radius:16px !important;
  border:1px solid var(--ss-border-soft) !important;
  background:rgba(255,255,255,.07) !important;
  color:var(--ss-text) !important;
  font-size:14px !important;
  line-height:1.3 !important;
}

#ss-fragmen-godmode[data-theme="light"] .ss-frag-search{
  background:rgba(255,255,255,.86) !important;
}

#ss-fragmen-godmode .ss-frag-search::placeholder{
  color:var(--ss-soft) !important;
}

#ss-fragmen-godmode .ss-frag-search:focus{
  border-color:rgba(108,148,189,.42) !important;
  box-shadow:0 0 0 4px rgba(108,148,189,.10) !important;
}

#ss-fragmen-godmode .ss-frag-filter-block{
  margin-top:14px !important;
}

#ss-fragmen-godmode .ss-frag-filter-title{
  margin:0 0 8px !important;
  color:var(--ss-soft) !important;
  font-size:10.5px !important;
  font-weight:850 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

#ss-fragmen-godmode .ss-frag-filter-buttons{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}

#ss-fragmen-godmode .ss-frag-filter-btn,
#ss-fragmen-godmode .ss-frag-reset{
  min-height:34px !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  border:1px solid var(--ss-border-soft) !important;
  background:rgba(255,255,255,.045) !important;
  color:var(--ss-muted) !important;
  font-size:11.5px !important;
  font-weight:820 !important;
  line-height:1.2 !important;
  letter-spacing:.045em !important;
  cursor:pointer !important;
  transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease !important;
}

#ss-fragmen-godmode .ss-frag-filter-btn:hover,
#ss-fragmen-godmode .ss-frag-filter-btn.is-active,
#ss-fragmen-godmode .ss-frag-reset:hover{
  color:var(--ss-text) !important;
  border-color:var(--ss-border-strong) !important;
  background:rgba(108,148,189,.16) !important;
  transform:translateY(-1px) !important;
}

#ss-fragmen-godmode .ss-frag-reset{
  min-height:48px !important;
  white-space:nowrap !important;
}

#ss-fragmen-godmode .ss-frag-counter{
  margin:14px 0 0 !important;
  color:var(--ss-soft) !important;
  font-size:12.5px !important;
  line-height:1.5 !important;
  font-weight:650 !important;
}


/* =========================================================
   12. CATALOG CARDS
========================================================= */

#ss-fragmen-godmode .ss-frag-catalog{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:18px !important;
  margin-top:24px !important;
}

#ss-fragmen-godmode .ss-frag-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:100% !important;
  border-radius:var(--ss-radius-lg) !important;
  border:1px solid var(--ss-border-soft) !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(108,148,189,.075), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.022)) !important;
  box-shadow:var(--ss-shadow-soft) !important;
  overflow:hidden !important;
  transition:transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease !important;
}

#ss-fragmen-godmode .ss-frag-card::before{
  content:"" !important;
  position:absolute !important;
  left:16px !important;
  right:16px !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg, rgba(200,161,90,.42), transparent) !important;
  z-index:4 !important;
  opacity:.62 !important;
}

#ss-fragmen-godmode[data-theme="light"] .ss-frag-card{
  background:
    radial-gradient(circle at 86% 12%, rgba(65,111,152,.065), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.56)) !important;
}

#ss-fragmen-godmode .ss-frag-card:hover{
  transform:translateY(-4px) !important;
  border-color:var(--ss-border-strong) !important;
  background:var(--ss-surface-2) !important;
  box-shadow:var(--ss-shadow-soft) !important;
}

#ss-fragmen-godmode .ss-frag-card-media{
  position:relative !important;
  aspect-ratio:16 / 9 !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.05) !important;
}

#ss-fragmen-godmode .ss-frag-card-media img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  filter:saturate(.92) contrast(1.02) brightness(.82) !important;
  transition:transform .35s ease, filter .35s ease !important;
}

#ss-fragmen-godmode[data-theme="light"] .ss-frag-card-media img{
  filter:saturate(.92) contrast(1.01) brightness(.96) !important;
}

#ss-fragmen-godmode .ss-frag-card:hover .ss-frag-card-media img{
  transform:scale(1.035) !important;
  filter:saturate(.95) contrast(1.05) brightness(.92) !important;
}

#ss-fragmen-godmode .ss-frag-card-media::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg, transparent, rgba(4,9,20,.64)) !important;
  pointer-events:none !important;
}

#ss-fragmen-godmode[data-theme="light"] .ss-frag-card-media::after{
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.22)) !important;
}

#ss-fragmen-godmode .ss-frag-code-badge{
  position:absolute !important;
  left:12px !important;
  top:12px !important;
  z-index:2 !important;
  min-height:30px !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(5,11,20,.64) !important;
  color:var(--ss-gold) !important;
  font-size:10.5px !important;
  font-weight:850 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}

#ss-fragmen-godmode .ss-frag-card-body{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  padding:18px !important;
}

#ss-fragmen-godmode .ss-frag-card-kicker{
  margin-bottom:10px !important;
  color:var(--ss-gold) !important;
  font-size:10.5px !important;
  font-weight:850 !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
}

#ss-fragmen-godmode .ss-frag-card h3{
  margin-bottom:8px !important;
  font-size:clamp(18px, 1.4vw, 22px) !important;
}

#ss-fragmen-godmode .ss-frag-card p{
  margin:0 0 14px !important;
  color:var(--ss-muted) !important;
  font-size:13.8px !important;
  line-height:1.62 !important;
}

#ss-fragmen-godmode .ss-frag-meta{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  margin:0 0 14px !important;
}

#ss-fragmen-godmode .ss-frag-tag{
  display:inline-flex !important;
  min-height:27px !important;
  align-items:center !important;
  padding:6px 9px !important;
  border-radius:999px !important;
  border:1px solid var(--ss-border-soft) !important;
  color:var(--ss-soft) !important;
  background:rgba(255,255,255,.035) !important;
  font-size:10.5px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}

#ss-fragmen-godmode .ss-frag-platforms{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:auto !important;
  padding-top:4px !important;
}

#ss-fragmen-godmode .ss-frag-platform{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:32px !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  border:1px solid var(--ss-border-soft) !important;
  color:var(--ss-text) !important;
  background:rgba(255,255,255,.05) !important;
  font-size:11px !important;
  font-weight:820 !important;
  line-height:1.2 !important;
  letter-spacing:.04em !important;
  transition:transform .25s ease, border-color .25s ease, background .25s ease !important;
}

#ss-fragmen-godmode .ss-frag-platform:hover{
  transform:translateY(-2px) !important;
  border-color:var(--ss-border-strong) !important;
  background:rgba(200,161,90,.12) !important;
}

#ss-fragmen-godmode .ss-frag-no-results{
  display:none !important;
  margin-top:18px !important;
  padding:22px !important;
  border-radius:22px !important;
  border:1px solid var(--ss-border-soft) !important;
  background:rgba(255,255,255,.045) !important;
  color:var(--ss-muted) !important;
  font-size:14px !important;
  line-height:1.65 !important;
}

#ss-fragmen-godmode .ss-frag-no-results.is-visible{
  display:block !important;
}


/* =========================================================
   13. FAQ
========================================================= */

#ss-fragmen-godmode details.ss-frag-faq{
  position:relative !important;
  border:1px solid var(--ss-border-soft) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.045) !important;
  overflow:hidden !important;
}

#ss-fragmen-godmode details.ss-frag-faq::before{
  content:"" !important;
  position:absolute !important;
  left:16px !important;
  right:16px !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg, rgba(200,161,90,.40), transparent) !important;
  opacity:.60 !important;
}

#ss-fragmen-godmode[data-theme="light"] details.ss-frag-faq{
  background:rgba(255,255,255,.72) !important;
}

#ss-fragmen-godmode details.ss-frag-faq + details.ss-frag-faq{
  margin-top:10px !important;
}

#ss-fragmen-godmode details.ss-frag-faq summary{
  cursor:pointer !important;
  padding:15px 16px !important;
  color:var(--ss-text) !important;
  font-family:var(--ss-serif) !important;
  font-size:17px !important;
  line-height:1.38 !important;
  letter-spacing:-.012em !important;
  font-weight:700 !important;
  list-style:none !important;
}

#ss-fragmen-godmode details.ss-frag-faq summary::-webkit-details-marker{
  display:none !important;
}

#ss-fragmen-godmode details.ss-frag-faq p{
  padding:0 16px 16px !important;
  margin:0 !important;
  font-size:14px !important;
  line-height:1.68 !important;
  color:var(--ss-muted) !important;
}

#ss-fragmen-godmode details.ss-frag-faq[open]{
  border-color:var(--ss-border) !important;
  background:
    radial-gradient(circle at 94% 12%, rgba(108,148,189,.10), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.064), rgba(255,255,255,.024)) !important;
}


/* =========================================================
   14. JEDA SUNYI AND CTA
========================================================= */

#ss-fragmen-godmode .sslp-pause{
  padding:48px 0 !important;
}

#ss-fragmen-godmode .sslp-pause-box{
  padding:clamp(26px, 4vw, 46px) !important;
  border-color:rgba(108,148,189,.30) !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(108,148,189,.18), transparent 38%),
    radial-gradient(circle at 92% 16%, rgba(200,161,90,.10), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.03)) !important;
}

#ss-fragmen-godmode .sslp-pause-box::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:34px !important;
  bottom:34px !important;
  width:3px !important;
  border-radius:999px !important;
  background:linear-gradient(to bottom, transparent, var(--ss-blue), transparent) !important;
  opacity:.42 !important;
}

#ss-fragmen-godmode[data-theme="light"] .sslp-pause-box{
  background:
    radial-gradient(circle at 18% 20%, rgba(65,111,152,.12), transparent 38%),
    radial-gradient(circle at 92% 16%, rgba(159,116,48,.09), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.64)) !important;
}

#ss-fragmen-godmode .sslp-pause-content{
  position:relative !important;
  z-index:2 !important;
  max-width:820px !important;
}

#ss-fragmen-godmode .sslp-eyebrow{
  margin-bottom:12px !important;
}

#ss-fragmen-godmode .sslp-pause-content p{
  max-width:760px !important;
  margin:14px 0 0 !important;
  color:var(--ss-muted) !important;
  font-size:15.5px !important;
  line-height:1.78 !important;
}

#ss-fragmen-godmode .sslp-pause-mark{
  position:absolute !important;
  right:28px !important;
  bottom:-42px !important;
  color:rgba(108,148,189,.18) !important;
  font-family:var(--ss-serif) !important;
  font-size:180px !important;
  line-height:1 !important;
  pointer-events:none !important;
}

#ss-fragmen-godmode .ss-frag-cta{
  margin:54px 0 66px !important;
  padding:34px !important;
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  gap:24px !important;
  align-items:center !important;
  background:
    radial-gradient(circle at 12% 30%, rgba(108,148,189,.14), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(200,161,90,.12), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035)) !important;
}

#ss-fragmen-godmode .ss-frag-cta::before{
  content:"" !important;
  position:absolute !important;
  left:-8% !important;
  top:-40% !important;
  width:360px !important;
  height:360px !important;
  border-radius:50% !important;
  background:radial-gradient(circle, rgba(108,148,189,.14), transparent 68%) !important;
  pointer-events:none !important;
}

#ss-fragmen-godmode[data-theme="light"] .ss-frag-cta{
  background:
    radial-gradient(circle at 12% 30%, rgba(65,111,152,.11), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(159,116,48,.10), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.66)) !important;
}

#ss-fragmen-godmode .ss-frag-cta > *{
  position:relative !important;
  z-index:2 !important;
}

#ss-fragmen-godmode .ss-frag-cta h2{
  margin:0 0 10px !important;
}

#ss-fragmen-godmode .ss-frag-cta p{
  margin:0 !important;
  max-width:760px !important;
  color:var(--ss-muted) !important;
  font-size:15.5px !important;
  line-height:1.74 !important;
}



/* =========================================================
   14A. CLEAN KBDS RAIL PANEL
   Eksplorasi • Visual Map • Kompas Pulang • Page Term
========================================================= */

#ss-fragmen-godmode .ss-frag-kbds-panel{
  position:relative !important;
  width:min(100%, 610px) !important;
  display:grid !important;
  gap:12px !important;
  margin-top:22px !important;
  padding:16px 18px 18px !important;
  border:1px solid var(--ss-border) !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 88% 8%, rgba(200,161,90,.085), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.022)) !important;
  box-shadow:var(--ss-shadow-soft) !important;
}

#ss-fragmen-godmode .ss-frag-kbds-panel::before{
  content:"" !important;
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg, rgba(200,161,90,.44), transparent) !important;
  opacity:.62 !important;
  pointer-events:none !important;
}

#ss-fragmen-godmode .ss-frag-kbds-panel-head{
  display:block !important;
}

#ss-fragmen-godmode .ss-frag-kbds-panel-head span{
  color:var(--ss-gold) !important;
  font-size:10px !important;
  font-weight:850 !important;
  letter-spacing:.16em !important;
  line-height:1.25 !important;
  text-transform:uppercase !important;
}

#ss-fragmen-godmode .ss-frag-kbds-rail{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:9px !important;
  align-items:center !important;
}

#ss-fragmen-godmode .ss-frag-kbds-btn{
  min-width:116px !important;
  min-height:36px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:9px 12px !important;
  border:1px solid rgba(200,161,90,.24) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.045) !important;
  color:var(--ss-muted) !important;
  font-size:12px !important;
  font-weight:820 !important;
  line-height:1 !important;
  letter-spacing:.020em !important;
  text-align:center !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    color .22s ease !important;
}

#ss-fragmen-godmode .ss-frag-kbds-btn:hover{
  transform:translateY(-2px) !important;
  border-color:var(--ss-border-strong) !important;
  background:rgba(200,161,90,.12) !important;
  color:var(--ss-text) !important;
}

#ss-fragmen-godmode .ss-frag-kbds-btn b{
  color:var(--ss-gold) !important;
  font-size:12px !important;
  line-height:1 !important;
}

/* =========================================================
   14B. EDITORIAL NEXT PATH
========================================================= */

#ss-fragmen-godmode .ss-frag-next-grid{
  display:grid !important;
  grid-template-columns:minmax(0, .86fr) minmax(320px, 1.14fr) !important;
  gap:clamp(28px, 5vw, 72px) !important;
  align-items:center !important;
  width:100% !important;
}

#ss-fragmen-godmode .ss-frag-next-list{
  display:grid !important;
  gap:10px !important;
  width:100% !important;
  max-width:620px !important;
  margin-left:auto !important;
}

#ss-fragmen-godmode .ss-frag-next-item{
  position:relative !important;
  display:grid !important;
  grid-template-columns:42px minmax(0, 1fr) 30px !important;
  gap:14px !important;
  align-items:center !important;
  min-height:64px !important;
  padding:12px 14px !important;
  border:1px solid var(--ss-border-soft) !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(200,161,90,.075), transparent 26%),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.024)) !important;
  color:var(--ss-text) !important;
  text-decoration:none !important;
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease !important;
}

#ss-fragmen-godmode .ss-frag-next-item:hover{
  transform:translateY(-2px) !important;
  border-color:var(--ss-border-strong) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(200,161,90,.105), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.080), rgba(255,255,255,.030)) !important;
}

#ss-fragmen-godmode .ss-frag-next-no{
  width:34px !important;
  height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  border:1px solid rgba(200,161,90,.26) !important;
  color:var(--ss-gold) !important;
  background:rgba(200,161,90,.085) !important;
  font-size:11px !important;
  font-weight:850 !important;
  line-height:1 !important;
}

#ss-fragmen-godmode .ss-frag-next-copy{
  min-width:0 !important;
  display:grid !important;
  gap:3px !important;
}

#ss-fragmen-godmode .ss-frag-next-copy small{
  color:var(--ss-gold) !important;
  font-size:10px !important;
  font-weight:850 !important;
  letter-spacing:.13em !important;
  line-height:1.2 !important;
  text-transform:uppercase !important;
}

#ss-fragmen-godmode .ss-frag-next-copy strong{
  color:var(--ss-text) !important;
  font-family:var(--ss-serif) !important;
  font-size:clamp(17px, 1.45vw, 22px) !important;
  font-weight:700 !important;
  letter-spacing:-.022em !important;
  line-height:1.18 !important;
}

#ss-fragmen-godmode .ss-frag-next-arrow{
  color:var(--ss-gold) !important;
  font-size:18px !important;
  line-height:1 !important;
  text-align:center !important;
}

#ss-fragmen-godmode[data-theme="light"] .ss-frag-kbds-panel,
#ss-fragmen-godmode[data-theme="light"] .ss-frag-next-item{
  background:
    radial-gradient(circle at 88% 8%, rgba(159,116,48,.070), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.58)) !important;
  box-shadow:var(--ss-shadow-soft) !important;
}

@media(max-width:1080px){
  #ss-fragmen-godmode .ss-frag-next-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  #ss-fragmen-godmode .ss-frag-next-list{
    max-width:none !important;
    margin-left:0 !important;
  }
}

@media(max-width:720px){
  #ss-fragmen-godmode .ss-frag-kbds-panel{
    width:100% !important;
  }

  #ss-fragmen-godmode .ss-frag-kbds-btn{
    flex:1 1 calc(50% - 9px) !important;
    min-width:0 !important;
  }

  #ss-fragmen-godmode .ss-frag-next-item{
    grid-template-columns:38px minmax(0, 1fr) 24px !important;
  }
}

@media(max-width:480px){
  #ss-fragmen-godmode .ss-frag-kbds-rail{
    align-items:stretch !important;
  }

  #ss-fragmen-godmode .ss-frag-kbds-btn{
    flex-basis:100% !important;
  }

  #ss-fragmen-godmode .ss-frag-next-item{
    grid-template-columns:34px minmax(0, 1fr) !important;
  }

  #ss-fragmen-godmode .ss-frag-next-arrow{
    display:none !important;
  }
}


/* =========================================================
   15. REVEAL
========================================================= */

#ss-fragmen-godmode .ss-frag-reveal,
#ss-fragmen-godmode .sslp-reveal{
  opacity:0 !important;
  transform:translateY(16px) !important;
  transition:opacity .65s ease, transform .65s ease !important;
}

#ss-fragmen-godmode .ss-frag-reveal.is-visible,
#ss-fragmen-godmode .sslp-reveal.is-visible{
  opacity:1 !important;
  transform:translateY(0) !important;
}


/* =========================================================
   16. RESPONSIVE
========================================================= */

@media(max-width:1080px){
  #ss-fragmen-godmode .ss-frag-catalog,
  #ss-fragmen-godmode .ss-frag-grid-4{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  #ss-fragmen-godmode .ss-frag-search-row{
    grid-template-columns:1fr 180px !important;
  }

  #ss-fragmen-godmode .ss-frag-reset{
    grid-column:1 / -1 !important;
  }
}

@media(max-width:980px){
  #ss-fragmen-godmode .ss-frag-hero-grid,
  #ss-fragmen-godmode .ss-frag-section-head,
  #ss-fragmen-godmode .ss-frag-dual,
  #ss-fragmen-godmode .ss-frag-cta,
  #ss-fragmen-godmode .ss-frag-meaning-grid{
    grid-template-columns:1fr !important;
  }

  #ss-fragmen-godmode .ss-frag-grid-3,
  #ss-fragmen-godmode .ss-frag-grid-2{
    grid-template-columns:1fr !important;
  }

  #ss-fragmen-godmode .ss-frag-compass-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  #ss-fragmen-godmode .ss-frag-compass-card:nth-child(1),
  #ss-fragmen-godmode .ss-frag-compass-card:nth-child(2),
  #ss-fragmen-godmode .ss-frag-compass-card:nth-child(3),
  #ss-fragmen-godmode .ss-frag-compass-card:nth-child(4){
    transform:none !important;
  }

  #ss-fragmen-godmode .ss-frag-filter-wrap{
    position:relative !important;
    top:auto !important;
  }

  #ss-fragmen-godmode .ss-frag-timeline::before{
    display:none !important;
  }
}

@media(max-width:720px){
  #ss-fragmen-godmode .ss-frag-shell{
    width:min(100% - 22px, var(--ss-max)) !important;
  }

  #ss-fragmen-godmode .ss-frag-topbar{
    align-items:flex-start !important;
    flex-direction:column !important;
    padding-top:18px !important;
  }

  #ss-fragmen-godmode .ss-frag-brand{
    white-space:normal !important;
  }

  #ss-fragmen-godmode .ss-frag-hero{
    padding:42px 0 34px !important;
  }

  #ss-fragmen-godmode h1{
    font-size:clamp(31px, 9vw, 44px) !important;
    line-height:1.06 !important;
    letter-spacing:-.036em !important;
  }

  #ss-fragmen-godmode h2{
    font-size:clamp(23px, 6.8vw, 31px) !important;
    line-height:1.14 !important;
    letter-spacing:-.028em !important;
  }

  #ss-fragmen-godmode h3{
    font-size:clamp(18px, 5.4vw, 22px) !important;
    line-height:1.2 !important;
  }

  #ss-fragmen-godmode .ss-frag-hero-lead,
  #ss-fragmen-godmode .ss-frag-section-desc{
    font-size:15px !important;
    line-height:1.68 !important;
  }

  #ss-fragmen-godmode .ss-frag-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  #ss-fragmen-godmode .ss-frag-btn{
    width:100% !important;
  }

  #ss-fragmen-godmode .ss-frag-hero-image,
  #ss-fragmen-godmode .ss-frag-hero-image img{
    min-height:360px !important;
  }

  #ss-fragmen-godmode .ss-frag-catalog,
  #ss-fragmen-godmode .ss-frag-grid-4,
  #ss-fragmen-godmode .ss-frag-compass-grid{
    grid-template-columns:1fr !important;
  }

  #ss-fragmen-godmode .ss-frag-search-row{
    grid-template-columns:1fr !important;
  }

  #ss-fragmen-godmode .ss-frag-timeline-item{
    grid-template-columns:1fr !important;
  }

  #ss-fragmen-godmode .ss-frag-section,
  #ss-fragmen-godmode .sslp-pause{
    padding:40px 0 !important;
    scroll-margin-top:78px !important;
  }

  #ss-fragmen-godmode .ss-frag-panel,
  #ss-fragmen-godmode .ss-frag-statement,
  #ss-fragmen-godmode .ss-frag-note,
  #ss-fragmen-godmode .ss-frag-filter-wrap,
  #ss-fragmen-godmode .ss-frag-cta,
  #ss-fragmen-godmode .ss-frag-meaning-box,
  #ss-fragmen-godmode .sslp-pause-box{
    padding:22px !important;
    border-radius:24px !important;
  }

  #ss-fragmen-godmode .ss-frag-mini,
  #ss-fragmen-godmode .ss-frag-step,
  #ss-fragmen-godmode .ss-frag-compass-card{
    min-height:auto !important;
    padding:21px !important;
    border-radius:22px !important;
  }

  #ss-fragmen-godmode .sslp-pause-mark{
    right:12px !important;
    bottom:-24px !important;
    font-size:120px !important;
  }
}

@media(max-width:480px){
  #ss-fragmen-godmode .ss-frag-hero-image,
  #ss-fragmen-godmode .ss-frag-hero-image img{
    min-height:330px !important;
  }

  #ss-fragmen-godmode .ss-frag-hero-badge{
    left:14px !important;
    right:14px !important;
    bottom:14px !important;
    padding:15px !important;
    border-radius:18px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  #ss-fragmen-godmode *,
  #ss-fragmen-godmode *::before,
  #ss-fragmen-godmode *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }

  #ss-fragmen-godmode .ss-frag-reveal,
  #ss-fragmen-godmode .sslp-reveal{
    opacity:1 !important;
    transform:none !important;
  }
}