/* =========================================================
   SISTEM SUNYI WALLPAPER SPIRAL KESADARAN PACK
   Clean Final CSS + Editorial Premium Lift
   Root: #sssp-top
   Prefix: sssp-
   Scoped, TagDiv Newspaper Safe
========================================================= */


/* =========================================================
   01. HARD SCOPE RESET
========================================================= */

#sssp-top,
#sssp-top *,
#sssp-top *::before,
#sssp-top *::after{
  box-sizing:border-box !important;
}

#sssp-top{
  --sssp-bg:#06101b;
  --sssp-bg2:#0b1826;
  --sssp-bg3:#101f2c;

  --sssp-text:#f3ead8;
  --sssp-text-strong:#fff7e7;
  --sssp-muted:rgba(243,234,216,.74);
  --sssp-soft:rgba(243,234,216,.56);
  --sssp-faint:rgba(243,234,216,.40);

  --sssp-card:rgba(8,20,32,.78);
  --sssp-card2:rgba(255,255,255,.060);
  --sssp-card3:rgba(255,255,255,.090);
  --sssp-panel:rgba(255,255,255,.050);

  --sssp-line:rgba(246,234,208,.12);
  --sssp-line-soft:rgba(246,234,208,.075);
  --sssp-line-strong:rgba(200,169,107,.38);

  --sssp-red:#8f2424;
  --sssp-red-soft:rgba(143,36,36,.12);
  --sssp-red-line:rgba(143,36,36,.34);

  --sssp-gold:#c8a96b;
  --sssp-gold-2:#e4c982;
  --sssp-gold-soft:rgba(200,169,107,.16);

  --sssp-blue:#88b9df;
  --sssp-blue-soft:rgba(88,136,174,.16);

  --sssp-radius-xl:34px;
  --sssp-radius-lg:26px;
  --sssp-radius-md:18px;
  --sssp-radius-sm:14px;

  --sssp-max:1260px;
  --sssp-shadow:0 28px 84px rgba(0,0,0,.24);
  --sssp-shadow-deep:0 34px 104px rgba(0,0,0,.38);
  --sssp-shadow-soft:0 18px 54px rgba(0,0,0,.16);

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

  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  color:var(--sssp-text) !important;
  line-height:1.65 !important;

  background:
    radial-gradient(circle at 15% 8%, rgba(200,169,107,.12), transparent 31%),
    radial-gradient(circle at 86% 18%, rgba(58,86,112,.20), transparent 34%),
    radial-gradient(circle at 52% 94%, rgba(143,36,36,.08), transparent 38%),
    linear-gradient(90deg, rgba(200,169,107,.014) 0 1px, transparent 1px 100%),
    linear-gradient(145deg,#050a12 0%, #07101a 44%, #102132 100%) !important;
  background-size:auto, auto, auto, 58px 58px, auto !important;
}

#sssp-top[data-theme="light"]{
  --sssp-bg:#f8f3ea;
  --sssp-bg2:#f1eadf;
  --sssp-bg3:#e9edf0;

  --sssp-text:#182332;
  --sssp-text-strong:#0d1723;
  --sssp-muted:rgba(24,35,50,.72);
  --sssp-soft:rgba(24,35,50,.56);
  --sssp-faint:rgba(24,35,50,.40);

  --sssp-card:rgba(255,255,255,.80);
  --sssp-card2:rgba(255,255,255,.64);
  --sssp-card3:rgba(255,255,255,.88);
  --sssp-panel:rgba(255,255,255,.62);

  --sssp-line:rgba(80,58,30,.13);
  --sssp-line-soft:rgba(80,58,30,.08);
  --sssp-line-strong:rgba(142,101,45,.36);

  --sssp-red:#9b3831;
  --sssp-red-soft:rgba(155,56,49,.10);
  --sssp-red-line:rgba(155,56,49,.28);

  --sssp-gold:#9f7430;
  --sssp-gold-2:#745220;
  --sssp-gold-soft:rgba(159,116,48,.12);

  --sssp-blue:#2f678f;
  --sssp-blue-soft:rgba(47,103,143,.11);

  --sssp-shadow:0 24px 70px rgba(30,35,44,.12);
  --sssp-shadow-deep:0 28px 76px rgba(30,35,44,.13);
  --sssp-shadow-soft:0 16px 46px rgba(30,35,44,.09);

  background:
    radial-gradient(circle at 15% 8%, rgba(159,116,48,.14), transparent 31%),
    radial-gradient(circle at 86% 18%, rgba(47,103,143,.10), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(155,56,49,.04), transparent 38%),
    linear-gradient(90deg, rgba(159,116,48,.014) 0 1px, transparent 1px 100%),
    linear-gradient(145deg,#fbf7ef 0%, #f4ede2 48%, #e9eef2 100%) !important;
  background-size:auto, auto, auto, 58px 58px, auto !important;
}


/* =========================================================
   02. TAGDIV AND TYPOGRAPHY GUARD
========================================================= */

#sssp-top h1,
#sssp-top h2,
#sssp-top h3,
#sssp-top p,
#sssp-top a,
#sssp-top span,
#sssp-top small,
#sssp-top strong,
#sssp-top b,
#sssp-top button,
#sssp-top div,
#sssp-top section,
#sssp-top article,
#sssp-top aside,
#sssp-top footer,
#sssp-top nav{
  font-family:inherit !important;
  text-shadow:none !important;
}

#sssp-top a,
#sssp-top a:link,
#sssp-top a:visited,
#sssp-top a:hover,
#sssp-top a:active{
  color:inherit !important;
  text-decoration:none !important;
  box-shadow:none !important;
  outline:none !important;
}

#sssp-top img{
  max-width:none !important;
  border:0 !important;
  box-shadow:none !important;
}

#sssp-top .sssp-shell{
  width:min(var(--sssp-max), calc(100% - 44px)) !important;
  max-width:none !important;
  margin:0 auto !important;
  padding:0 !important;
  position:relative !important;
  z-index:2 !important;
}

#sssp-top .sssp-hero-title,
#sssp-top .sssp-section-title,
#sssp-top .sssp-item-copy h3,
#sssp-top .sssp-flow-card h3,
#sssp-top .sssp-dual-card h3,
#sssp-top .sssp-bridge-card h3,
#sssp-top .sssp-note h2,
#sssp-top .sssp-final p,
#sssp-top .sssp-intro-mark span{
  font-family:Georgia, "Times New Roman", serif !important;
  color:var(--sssp-text-strong) !important;
  text-shadow:none !important;
  text-decoration:none !important;
  text-wrap:balance !important;
}

#sssp-top .sssp-hero-title,
#sssp-top .sssp-hero h1.sssp-hero-title{
  margin:0 !important;
  max-width:720px !important;
  font-size:clamp(2.65rem,5vw,4rem) !important;
  line-height:1 !important;
  font-weight:560 !important;
  letter-spacing:-.058em !important;
}

#sssp-top .sssp-section-title{
  margin:0 !important;
  max-width:880px !important;
  font-size:clamp(2rem,3.75vw,3rem) !important;
  line-height:1.08 !important;
  font-weight:560 !important;
  letter-spacing:-.052em !important;
}

#sssp-top .sssp-lead,
#sssp-top .sssp-section-lead,
#sssp-top .sssp-prose p,
#sssp-top .sssp-intro-mark p,
#sssp-top .sssp-item-copy p,
#sssp-top .sssp-flow-card p,
#sssp-top .sssp-dual-card p,
#sssp-top .sssp-bridge-card p,
#sssp-top .sssp-note p,
#sssp-top .sssp-final small{
  color:var(--sssp-muted) !important;
  text-wrap:pretty !important;
}

#sssp-top .sssp-kicker,
#sssp-top .sssp-flow-card strong,
#sssp-top .sssp-dual-card strong,
#sssp-top .sssp-bridge-card span,
#sssp-top .sssp-bottom-link span,
#sssp-top .sssp-stat b,
#sssp-top .sssp-node strong{
  color:var(--sssp-gold) !important;
}


/* =========================================================
   03. FLOATING THEME TOGGLE, INSIDE ROOT
========================================================= */

#sssp-top .sssp-toggle,
#sssp-top .sssp-floating-toggle{
  position:fixed !important;
  top:auto !important;
  left:auto !important;
  right:22px !important;
  bottom:22px !important;
  z-index:999999 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  min-height:44px !important;
  padding:0 16px !important;
  margin:0 !important;

  border:1px solid rgba(246,234,208,.16) !important;
  border-radius:999px !important;
  background:rgba(7,16,26,.86) !important;
  color:#f2ead8 !important;

  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  box-shadow:0 16px 48px rgba(0,0,0,.24) !important;

  cursor:pointer !important;
  font-size:.82rem !important;
  font-weight:850 !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
  transform:none !important;
}

#sssp-top[data-theme="light"] .sssp-toggle,
#sssp-top[data-theme="light"] .sssp-floating-toggle,
#sssp-top .sssp-floating-toggle[data-active-theme="light"]{
  border-color:rgba(80,58,30,.14) !important;
  background:rgba(255,255,255,.88) !important;
  color:#182332 !important;
}


/* =========================================================
   04. TOPBAR
========================================================= */

#sssp-top .sssp-topbar{
  position:absolute !important;
  z-index:40 !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  padding:18px 0 !important;
  pointer-events:none !important;
}

#sssp-top .sssp-topbar-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  pointer-events:auto !important;
}

#sssp-top .sssp-topbar-home,
#sssp-top .sssp-topbar-brand{
  display:inline-flex !important;
  align-items:center !important;
  min-height:44px !important;
  border:1px solid rgba(246,234,208,.16) !important;
  border-radius:999px !important;
  background:rgba(7,16,26,.60) !important;
  color:#f2ead8 !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  box-shadow:0 12px 36px rgba(0,0,0,.22) !important;
}

#sssp-top .sssp-topbar-home{
  gap:10px !important;
  padding:0 16px !important;
  font-size:.84rem !important;
  font-weight:850 !important;
}

#sssp-top .sssp-topbar-home span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px !important;
  height:22px !important;
  border-radius:999px !important;
  background:rgba(200,169,107,.14) !important;
  color:var(--sssp-gold) !important;
}

#sssp-top .sssp-topbar-brand{
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-end !important;
  padding:8px 16px !important;
  line-height:1.2 !important;
}

#sssp-top .sssp-topbar-brand span{
  color:rgba(242,234,216,.66) !important;
  font-size:.68rem !important;
  font-weight:850 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

#sssp-top .sssp-topbar-brand b,
#sssp-top .sssp-topbar-brand a{
  color:#f2ead8 !important;
  font-size:.84rem !important;
  font-weight:850 !important;
}

#sssp-top[data-theme="light"] .sssp-topbar-home,
#sssp-top[data-theme="light"] .sssp-topbar-brand{
  border-color:rgba(80,58,30,.13) !important;
  background:rgba(255,255,255,.78) !important;
  color:#182332 !important;
}

#sssp-top[data-theme="light"] .sssp-topbar-brand span{
  color:rgba(24,35,50,.58) !important;
}

#sssp-top[data-theme="light"] .sssp-topbar-brand b,
#sssp-top[data-theme="light"] .sssp-topbar-brand a{
  color:#182332 !important;
}


/* =========================================================
   05. HERO
========================================================= */

#sssp-top .sssp-hero{
  position:relative !important;
  min-height:86vh !important;
  padding:112px 0 82px !important;
  display:flex !important;
  align-items:center !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(200,169,107,.13), transparent 30%),
    radial-gradient(circle at 76% 24%, rgba(58,86,112,.22), transparent 34%),
    linear-gradient(135deg,#050a12,#07101a 56%,#112536) !important;
}

#sssp-top[data-theme="light"] .sssp-hero{
  background:
    radial-gradient(circle at 18% 18%, rgba(200,169,107,.13), transparent 30%),
    radial-gradient(circle at 76% 24%, rgba(58,86,112,.10), transparent 34%),
    linear-gradient(135deg,#fbf7ef,#f4ede2 66%,#e9eef2) !important;
}

#sssp-top .sssp-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(90deg,rgba(5,10,18,.80),rgba(5,10,18,.24),rgba(5,10,18,.72)),
    url("https://tokoh.id/wp-content/uploads/2026/05/spiral_kesadaran_sistem_sunyi_hero.jpg") center/cover no-repeat !important;
  opacity:.40 !important;
  filter:saturate(.82) contrast(1.02) brightness(.86) !important;
  pointer-events:none !important;
}

#sssp-top[data-theme="light"] .sssp-hero::before{
  opacity:.11 !important;
  filter:saturate(.58) contrast(.90) brightness(1.06) !important;
}

#sssp-top .sssp-hero::after{
  content:"" !important;
  position:absolute !important;
  inset:26px !important;
  border:1px solid rgba(200,169,107,.13) !important;
  border-radius:36px !important;
  pointer-events:none !important;
  opacity:.72 !important;
}

#sssp-top .sssp-hero-grid{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr) !important;
  gap:54px !important;
  align-items:center !important;
}

#sssp-top .sssp-kicker{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 0 18px !important;
  font-size:.76rem !important;
  font-weight:950 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}

#sssp-top .sssp-kicker::before{
  content:"" !important;
  width:34px !important;
  height:1px !important;
  background:var(--sssp-gold) !important;
  opacity:.88 !important;
}

#sssp-top .sssp-lead{
  max-width:660px !important;
  margin:24px 0 0 !important;
  font-size:clamp(1rem,1.45vw,1.14rem) !important;
  line-height:1.78 !important;
}

#sssp-top .sssp-hero-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  margin-top:32px !important;
}


/* =========================================================
   06. BUTTONS
========================================================= */

#sssp-top .sssp-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:46px !important;
  padding:0 20px !important;
  border-radius:999px !important;
  border:1px solid var(--sssp-line) !important;
  font-size:.86rem !important;
  font-weight:850 !important;
  line-height:1.2 !important;
  transition:
    background .24s ease,
    color .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s ease !important;
}

#sssp-top .sssp-btn:hover{
  transform:translateY(-2px) !important;
  border-color:var(--sssp-line-strong) !important;
  box-shadow:0 16px 42px rgba(200,169,107,.13) !important;
}

#sssp-top .sssp-btn-main{
  background:linear-gradient(135deg,#b99150,#e4c982) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#17110a !important;
  box-shadow:0 16px 42px rgba(200,169,107,.18) !important;
}

#sssp-top .sssp-btn-ghost{
  background:rgba(255,255,255,.065) !important;
  color:var(--sssp-text-strong) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}

#sssp-top[data-theme="light"] .sssp-btn-ghost{
  background:rgba(255,255,255,.72) !important;
}


/* =========================================================
   07. SPIRAL VISUAL MAP
========================================================= */

#sssp-top .sssp-spiral-map{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:18px !important;
  min-height:540px !important;
}

#sssp-top .sssp-spiral-orb{
  position:relative !important;
  width:min(100%,500px) !important;
  aspect-ratio:1/1 !important;
  border-radius:50% !important;
  border:1px solid var(--sssp-line) !important;
  background:
    radial-gradient(circle at center,rgba(200,169,107,.28),transparent 8%),
    radial-gradient(circle at center,transparent 16%,rgba(255,255,255,.07) 17%,transparent 18%),
    radial-gradient(circle at center,transparent 31%,rgba(255,255,255,.055) 32%,transparent 33%),
    radial-gradient(circle at center,transparent 48%,rgba(200,169,107,.13) 49%,transparent 50%),
    radial-gradient(circle at center,transparent 66%,rgba(255,255,255,.045) 67%,transparent 68%),
    rgba(7,16,26,.46) !important;
  box-shadow:
    0 34px 100px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.035) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  overflow:visible !important;
}

#sssp-top[data-theme="light"] .sssp-spiral-orb{
  background:
    radial-gradient(circle at center,rgba(200,169,107,.22),transparent 8%),
    radial-gradient(circle at center,transparent 16%,rgba(0,0,0,.05) 17%,transparent 18%),
    radial-gradient(circle at center,transparent 31%,rgba(0,0,0,.045) 32%,transparent 33%),
    radial-gradient(circle at center,transparent 48%,rgba(200,169,107,.12) 49%,transparent 50%),
    radial-gradient(circle at center,transparent 66%,rgba(0,0,0,.04) 67%,transparent 68%),
    rgba(255,255,255,.72) !important;
}

#sssp-top .sssp-spiral-orb::before{
  content:"" !important;
  position:absolute !important;
  inset:12% !important;
  border-radius:50% !important;
  background:
    conic-gradient(from 230deg, transparent 0 10%, rgba(200,169,107,.72) 16%, transparent 23%, rgba(200,169,107,.32) 32%, transparent 45%, rgba(255,255,255,.14) 58%, transparent 70%, rgba(200,169,107,.44) 82%, transparent 100%) !important;
  opacity:.66 !important;
  filter:blur(.2px) !important;
  animation:sssp-spin 34s linear infinite !important;
}

#sssp-top .sssp-spiral-orb::after{
  content:"" !important;
  position:absolute !important;
  inset:50% !important;
  width:84px !important;
  height:84px !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50% !important;
  background:radial-gradient(circle,#fff4c5,#c8a96b 45%,rgba(200,169,107,.08) 72%,transparent) !important;
  box-shadow:0 0 62px rgba(200,169,107,.38) !important;
}

@keyframes sssp-spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

#sssp-top .sssp-node{
  position:absolute !important;
  z-index:3 !important;
  width:104px !important;
  padding:10px 9px !important;
  border-radius:16px !important;
  border:1px solid var(--sssp-line) !important;
  background:rgba(7,16,26,.68) !important;
  color:#f2ead8 !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  text-align:center !important;
  box-shadow:0 14px 38px rgba(0,0,0,.22) !important;
}

#sssp-top[data-theme="light"] .sssp-node{
  background:rgba(255,255,255,.84) !important;
  color:#182332 !important;
}

#sssp-top .sssp-node strong{
  display:block !important;
  margin-bottom:4px !important;
  font-size:.61rem !important;
  font-weight:950 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

#sssp-top .sssp-node span{
  display:block !important;
  color:inherit !important;
  font-size:.72rem !important;
  font-weight:850 !important;
  line-height:1.22 !important;
}

#sssp-top .sssp-node-1{ left:11% !important; top:16% !important; }
#sssp-top .sssp-node-2{ right:-2% !important; top:20% !important; }
#sssp-top .sssp-node-3{ left:42% !important; top:2% !important; }
#sssp-top .sssp-node-4{ left:42% !important; bottom:-2% !important; }
#sssp-top .sssp-node-5{ left:-3% !important; top:48% !important; }
#sssp-top .sssp-node-6{ right:-2% !important; top:50% !important; }
#sssp-top .sssp-node-7{ left:18% !important; bottom:13% !important; }
#sssp-top .sssp-node-8{ right:18% !important; bottom:14% !important; }

#sssp-top .sssp-stats{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  width:min(100%,500px) !important;
}

#sssp-top .sssp-stat{
  padding:15px 16px !important;
  border:1px solid var(--sssp-line) !important;
  border-radius:20px !important;
  background:var(--sssp-card) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}

#sssp-top .sssp-stat b{
  display:block !important;
  margin-bottom:7px !important;
  font-family:Georgia, "Times New Roman", serif !important;
  font-size:1.6rem !important;
  line-height:1 !important;
  font-weight:560 !important;
}

#sssp-top .sssp-stat span{
  display:block !important;
  color:var(--sssp-muted) !important;
  font-size:.7rem !important;
  font-weight:800 !important;
  line-height:1.35 !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
}


/* =========================================================
   08. NAV BAND
========================================================= */

#sssp-top .sssp-navband{
  position:relative !important;
  z-index:5 !important;
  margin-top:-38px !important;
}

#sssp-top .sssp-nav{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  padding:14px !important;
  border-radius:26px !important;
  border:1px solid var(--sssp-line) !important;
  background:var(--sssp-card) !important;
  box-shadow:var(--sssp-shadow) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}

#sssp-top .sssp-nav a{
  min-height:88px !important;
  padding:17px !important;
  border-radius:20px !important;
  border:1px solid var(--sssp-line) !important;
  background:var(--sssp-card2) !important;
  transition:
    background .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s ease !important;
}

#sssp-top .sssp-nav a:hover{
  transform:translateY(-2px) !important;
  border-color:var(--sssp-line-strong) !important;
  background:var(--sssp-card3) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.12) !important;
}

#sssp-top .sssp-nav strong{
  display:block !important;
  margin-bottom:8px !important;
  color:var(--sssp-gold) !important;
  font-size:.68rem !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}

#sssp-top .sssp-nav span{
  display:block !important;
  color:var(--sssp-text-strong) !important;
  font-size:.94rem !important;
  font-weight:850 !important;
  line-height:1.25 !important;
}


/* =========================================================
   09. SECTIONS AND INTRO
========================================================= */

#sssp-top .sssp-section{
  position:relative !important;
  padding:84px 0 !important;
}

#sssp-top .sssp-section-alt{
  border-top:1px solid var(--sssp-line) !important;
  border-bottom:1px solid var(--sssp-line) !important;
  background:
    radial-gradient(circle at 8% 14%,rgba(200,169,107,.09),transparent 26%),
    radial-gradient(circle at 86% 18%,rgba(58,86,112,.14),transparent 30%),
    var(--sssp-bg2) !important;
}

#sssp-top .sssp-section-lead{
  max-width:760px !important;
  margin:18px 0 0 !important;
  font-size:1rem !important;
  line-height:1.78 !important;
}

#sssp-top .sssp-intro{
  display:grid !important;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr) !important;
  gap:44px !important;
  align-items:start !important;
}

#sssp-top .sssp-intro-mark{
  position:sticky !important;
  top:24px !important;
  padding:32px !important;
  border-radius:var(--sssp-radius-xl) !important;
  border:1px solid var(--sssp-line-strong) !important;
  background:
    radial-gradient(circle at 72% 18%,rgba(200,169,107,.16),transparent 44%),
    linear-gradient(145deg,rgba(255,255,255,.064),rgba(255,255,255,.026)),
    var(--sssp-card) !important;
  box-shadow:var(--sssp-shadow) !important;
}

#sssp-top .sssp-intro-mark span{
  display:block !important;
  color:var(--sssp-gold) !important;
  font-size:clamp(2.05rem,4vw,2.9rem) !important;
  line-height:1 !important;
  letter-spacing:-.052em !important;
  font-weight:560 !important;
}

#sssp-top .sssp-intro-mark p{
  margin:20px 0 0 !important;
  font-size:1rem !important;
  line-height:1.78 !important;
}

#sssp-top .sssp-prose p{
  margin:0 0 20px !important;
  font-size:1.03rem !important;
  line-height:1.88 !important;
}


/* =========================================================
   10. WALLPAPER RIVER
========================================================= */

#sssp-top .sssp-river{
  position:relative !important;
  margin-top:40px !important;
}

#sssp-top .sssp-river::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  left:50% !important;
  width:1px !important;
  transform:translateX(-50%) !important;
  background:linear-gradient(to bottom,transparent,var(--sssp-gold),transparent) !important;
  opacity:.32 !important;
}

#sssp-top .sssp-item{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr) !important;
  gap:34px !important;
  align-items:center !important;
  margin:0 0 50px !important;
}

#sssp-top .sssp-item:nth-child(even){
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr) !important;
}

#sssp-top .sssp-item:nth-child(even) .sssp-item-copy{ order:2 !important; }
#sssp-top .sssp-item:nth-child(even) .sssp-item-media{ order:1 !important; }

#sssp-top .sssp-item-dot{
  position:absolute !important;
  z-index:4 !important;
  top:50% !important;
  left:50% !important;
  width:16px !important;
  height:16px !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50% !important;
  background:var(--sssp-gold) !important;
  box-shadow:0 0 24px rgba(200,169,107,.54) !important;
}

#sssp-top .sssp-item-copy{
  position:relative !important;
  overflow:hidden !important;
  padding:30px !important;
  border-radius:var(--sssp-radius-xl) !important;
  border:1px solid var(--sssp-line) !important;
  background:
    radial-gradient(circle at 88% 8%, var(--sssp-blue-soft), transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.064),rgba(255,255,255,.026)),
    var(--sssp-card) !important;
  box-shadow:var(--sssp-shadow) !important;
}

#sssp-top .sssp-item-copy::before{
  content:"" !important;
  position:absolute !important;
  left:22px !important;
  right:22px !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg, rgba(200,169,107,.52), transparent) !important;
}

#sssp-top .sssp-no{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:46px !important;
  height:32px !important;
  margin-bottom:15px !important;
  border-radius:999px !important;
  border:1px solid var(--sssp-line) !important;
  background:var(--sssp-card2) !important;
  color:var(--sssp-gold) !important;
  font-size:.78rem !important;
  font-weight:950 !important;
}

#sssp-top .sssp-item-copy h3{
  margin:0 !important;
  font-size:clamp(1.45rem,2.55vw,2rem) !important;
  line-height:1.1 !important;
  font-weight:560 !important;
  letter-spacing:-.045em !important;
}

#sssp-top .sssp-item-copy p{
  margin:14px 0 0 !important;
  font-size:.96rem !important;
  line-height:1.74 !important;
}

#sssp-top .sssp-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:9px !important;
  margin-top:20px !important;
}

#sssp-top .sssp-actions a{
  min-height:38px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid var(--sssp-line) !important;
  background:var(--sssp-card2) !important;
  color:var(--sssp-text-strong) !important;
  font-size:.76rem !important;
  font-weight:850 !important;
  transition:
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease !important;
}

#sssp-top .sssp-actions a:first-child{
  background:linear-gradient(135deg,#b99150,#e4c982) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#17110a !important;
}

#sssp-top .sssp-actions a:hover{
  transform:translateY(-2px) !important;
  background:var(--sssp-gold) !important;
  border-color:var(--sssp-gold) !important;
  color:#17110a !important;
  box-shadow:0 12px 30px rgba(200,169,107,.13) !important;
}

#sssp-top .sssp-item-media{
  position:relative !important;
  min-height:360px !important;
  border-radius:var(--sssp-radius-xl) !important;
  overflow:hidden !important;
  border:1px solid var(--sssp-line) !important;
  background:#07101a !important;
  box-shadow:var(--sssp-shadow) !important;
}

#sssp-top .sssp-item-media > img{
  width:100% !important;
  height:100% !important;
  min-height:360px !important;
  display:block !important;
  object-fit:cover !important;
  transition:transform .65s ease !important;
}

#sssp-top .sssp-item:hover .sssp-item-media > img{
  transform:scale(1.018) !important;
}

#sssp-top .sssp-item-media::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.30)),
    radial-gradient(circle at 72% 22%,rgba(200,169,107,.14),transparent 34%) !important;
  pointer-events:none !important;
}

#sssp-top .sssp-phone{
  position:absolute !important;
  right:20px !important;
  bottom:20px !important;
  width:82px !important;
  aspect-ratio:9/16 !important;
  border-radius:18px !important;
  border:3px solid rgba(246,234,208,.72) !important;
  overflow:hidden !important;
  z-index:3 !important;
  background:#07101a !important;
  box-shadow:0 18px 48px rgba(0,0,0,.34) !important;
}

#sssp-top .sssp-phone img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
}


/* =========================================================
   11. FLOW, DUAL, BRIDGE CARDS
========================================================= */

#sssp-top .sssp-flow-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  margin-top:40px !important;
}

#sssp-top .sssp-flow-card,
#sssp-top .sssp-dual-card,
#sssp-top .sssp-bridge-card,
#sssp-top .sssp-bottom-link{
  position:relative !important;
  overflow:hidden !important;
  border:1px solid var(--sssp-line) !important;
  background:
    radial-gradient(circle at 88% 8%, var(--sssp-blue-soft), transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.060),rgba(255,255,255,.024)),
    var(--sssp-card) !important;
  box-shadow:var(--sssp-shadow-soft) !important;
}

#sssp-top .sssp-flow-card::after,
#sssp-top .sssp-dual-card::after,
#sssp-top .sssp-bridge-card::after,
#sssp-top .sssp-bottom-link::after{
  content:"" !important;
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg, rgba(200,169,107,.46), transparent) !important;
  pointer-events:none !important;
}

#sssp-top .sssp-flow-card{
  min-height:240px !important;
  padding:24px !important;
  border-radius:24px !important;
}

#sssp-top .sssp-flow-card::before{
  content:"" !important;
  position:absolute !important;
  right:-70px !important;
  top:-70px !important;
  width:170px !important;
  height:170px !important;
  border-radius:50% !important;
  border:1px solid rgba(200,169,107,.24) !important;
  background:radial-gradient(circle,rgba(200,169,107,.13),transparent 58%) !important;
}

#sssp-top .sssp-flow-card strong,
#sssp-top .sssp-dual-card strong{
  display:block !important;
  margin-bottom:14px !important;
  font-size:.72rem !important;
  font-weight:950 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

#sssp-top .sssp-flow-card h3{
  margin:0 0 12px !important;
  font-size:1.36rem !important;
  line-height:1.2 !important;
  font-weight:560 !important;
  letter-spacing:-.032em !important;
}

#sssp-top .sssp-flow-card p{
  margin:0 !important;
  font-size:.92rem !important;
  line-height:1.68 !important;
}

#sssp-top .sssp-dual{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:22px !important;
  margin-top:40px !important;
}

#sssp-top .sssp-dual-card{
  min-height:300px !important;
  padding:32px !important;
  border-radius:var(--sssp-radius-xl) !important;
  background:
    radial-gradient(circle at 76% 20%,rgba(200,169,107,.14),transparent 38%),
    linear-gradient(145deg,rgba(255,255,255,.060),rgba(255,255,255,.024)),
    var(--sssp-card) !important;
}

#sssp-top .sssp-dual-card h3{
  margin:0 0 14px !important;
  font-size:clamp(1.65rem,3vw,2.05rem) !important;
  line-height:1.08 !important;
  font-weight:560 !important;
  letter-spacing:-.045em !important;
}

#sssp-top .sssp-dual-card p{
  margin:0 !important;
  font-size:.98rem !important;
  line-height:1.76 !important;
}

#sssp-top .sssp-bridge-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
  margin-top:36px !important;
}

#sssp-top .sssp-bridge-card{
  padding:24px !important;
  border-radius:24px !important;
  transition:
    background .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s ease !important;
}

#sssp-top .sssp-bridge-card:hover{
  transform:translateY(-3px) !important;
  border-color:var(--sssp-line-strong) !important;
  background:var(--sssp-card3) !important;
  box-shadow:0 18px 52px rgba(0,0,0,.14) !important;
}

#sssp-top .sssp-bridge-card span{
  display:block !important;
  margin-bottom:14px !important;
  font-size:.72rem !important;
  font-weight:950 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

#sssp-top .sssp-bridge-card h3{
  margin:0 0 12px !important;
  font-size:1.38rem !important;
  line-height:1.18 !important;
  font-weight:560 !important;
  letter-spacing:-.032em !important;
}

#sssp-top .sssp-bridge-card p{
  margin:0 !important;
  font-size:.92rem !important;
  line-height:1.68 !important;
}


/* =========================================================
   12. NOTE
========================================================= */

#sssp-top .sssp-note{
  max-width:900px !important;
  margin:0 auto !important;
  padding:30px !important;
  border-radius:24px !important;
  border:1px solid var(--sssp-line) !important;
  border-left:5px solid var(--sssp-gold) !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(200,169,107,.12), transparent 34%),
    var(--sssp-card) !important;
  box-shadow:var(--sssp-shadow-soft) !important;
}

#sssp-top .sssp-note h2{
  margin:0 0 12px !important;
  font-size:1.58rem !important;
  font-weight:560 !important;
  letter-spacing:-.035em !important;
}

#sssp-top .sssp-note p{
  margin:0 !important;
  font-size:.98rem !important;
  line-height:1.82 !important;
}


/* =========================================================
   13. BOTTOM NAV AND FOOTER
========================================================= */

#sssp-top .sssp-bottom-nav{
  padding:28px 0 !important;
  border-top:1px solid var(--sssp-line) !important;
  border-bottom:1px solid var(--sssp-line) !important;
  background:
    radial-gradient(circle at 10% 20%,rgba(200,169,107,.10),transparent 26%),
    var(--sssp-bg2) !important;
}

#sssp-top .sssp-bottom-nav-inner{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
}

#sssp-top .sssp-bottom-link{
  min-height:88px !important;
  padding:17px !important;
  border-radius:22px !important;
  transition:
    background .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s ease !important;
}

#sssp-top .sssp-bottom-link:hover{
  transform:translateY(-2px) !important;
  border-color:var(--sssp-line-strong) !important;
  background:var(--sssp-card3) !important;
}

#sssp-top .sssp-bottom-link span{
  display:block !important;
  margin-bottom:8px !important;
  font-size:.68rem !important;
  font-weight:950 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

#sssp-top .sssp-bottom-link strong{
  display:block !important;
  color:var(--sssp-text-strong) !important;
  font-size:.94rem !important;
  line-height:1.25 !important;
  font-weight:850 !important;
}

#sssp-top .sssp-final{
  padding:68px 0 82px !important;
  border-top:1px solid var(--sssp-line) !important;
  text-align:center !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(200,169,107,.12), transparent 34%),
    var(--sssp-bg) !important;
}

#sssp-top .sssp-final p{
  max-width:780px !important;
  margin:0 auto 24px !important;
  font-size:clamp(1.55rem,3vw,2.05rem) !important;
  line-height:1.18 !important;
  letter-spacing:-.04em !important;
}

#sssp-top .sssp-final small{
  display:block !important;
  font-size:.92rem !important;
  line-height:1.7 !important;
}


/* =========================================================
   14. RESPONSIVE
========================================================= */

@media(max-width:1180px){
  #sssp-top .sssp-hero-grid,
  #sssp-top .sssp-intro,
  #sssp-top .sssp-item,
  #sssp-top .sssp-item:nth-child(even),
  #sssp-top .sssp-dual{
    grid-template-columns:1fr !important;
  }

  #sssp-top .sssp-item:nth-child(even) .sssp-item-copy,
  #sssp-top .sssp-item:nth-child(even) .sssp-item-media{
    order:initial !important;
  }

  #sssp-top .sssp-spiral-map{
    align-items:center !important;
    min-height:auto !important;
  }

  #sssp-top .sssp-nav,
  #sssp-top .sssp-flow-grid,
  #sssp-top .sssp-bridge-grid,
  #sssp-top .sssp-bottom-nav-inner{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #sssp-top .sssp-river::before,
  #sssp-top .sssp-item-dot{
    display:none !important;
  }

  #sssp-top .sssp-intro-mark{
    position:relative !important;
    top:auto !important;
  }
}

@media(max-width:720px){
  #sssp-top .sssp-shell{
    width:min(100% - 32px, var(--sssp-max)) !important;
  }

  #sssp-top .sssp-topbar{
    padding:14px 0 !important;
  }

  #sssp-top .sssp-topbar-brand{
    display:none !important;
  }

  #sssp-top .sssp-topbar-home{
    min-height:40px !important;
    padding:0 14px !important;
    font-size:.8rem !important;
  }

  #sssp-top .sssp-hero{
    min-height:auto !important;
    padding:92px 0 64px !important;
  }

  #sssp-top .sssp-hero::after{
    inset:14px !important;
    border-radius:24px !important;
  }

  #sssp-top .sssp-hero-title,
  #sssp-top .sssp-hero h1.sssp-hero-title{
    font-size:clamp(2.25rem,11vw,3.65rem) !important;
    line-height:1 !important;
    letter-spacing:-.055em !important;
  }

  #sssp-top .sssp-lead{
    font-size:.98rem !important;
    line-height:1.72 !important;
  }

  #sssp-top .sssp-hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
  }

  #sssp-top .sssp-btn{
    width:100% !important;
  }

  #sssp-top .sssp-spiral-orb{
    width:min(100%,430px) !important;
  }

  #sssp-top .sssp-node{
    width:94px !important;
    padding:9px 8px !important;
  }

  #sssp-top .sssp-node span{
    font-size:.68rem !important;
  }

  #sssp-top .sssp-stats{
    width:100% !important;
    grid-template-columns:1fr !important;
  }

  #sssp-top .sssp-navband{
    margin-top:-18px !important;
  }

  #sssp-top .sssp-nav,
  #sssp-top .sssp-flow-grid,
  #sssp-top .sssp-bridge-grid,
  #sssp-top .sssp-bottom-nav-inner{
    grid-template-columns:1fr !important;
  }

  #sssp-top .sssp-section{
    padding:64px 0 !important;
  }

  #sssp-top .sssp-section-title{
    font-size:clamp(1.85rem,8.8vw,2.65rem) !important;
    line-height:1.08 !important;
  }

  #sssp-top .sssp-intro-mark,
  #sssp-top .sssp-item-copy,
  #sssp-top .sssp-dual-card,
  #sssp-top .sssp-note{
    padding:24px !important;
  }

  #sssp-top .sssp-intro-mark span{
    font-size:clamp(1.85rem,8vw,2.65rem) !important;
  }

  #sssp-top .sssp-item{
    margin-bottom:34px !important;
  }

  #sssp-top .sssp-item-media{
    min-height:340px !important;
    border-radius:24px !important;
  }

  #sssp-top .sssp-item-media > img{
    min-height:340px !important;
  }

  #sssp-top .sssp-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  #sssp-top .sssp-actions a{
    width:100% !important;
  }

  #sssp-top .sssp-phone{
    width:74px !important;
    right:16px !important;
    bottom:16px !important;
  }

  #sssp-top .sssp-toggle,
  #sssp-top .sssp-floating-toggle{
    right:14px !important;
    bottom:14px !important;
  }
}

@media(max-width:460px){
  #sssp-top .sssp-shell{
    width:min(100% - 24px, var(--sssp-max)) !important;
  }

  #sssp-top .sssp-hero-title,
  #sssp-top .sssp-hero h1.sssp-hero-title{
    font-size:2.35rem !important;
  }

  #sssp-top .sssp-spiral-orb{
    width:100% !important;
  }

  #sssp-top .sssp-node{
    width:82px !important;
    padding:8px 6px !important;
    border-radius:13px !important;
  }

  #sssp-top .sssp-node span{
    font-size:.62rem !important;
  }

  #sssp-top .sssp-item-media{
    min-height:290px !important;
  }

  #sssp-top .sssp-item-media > img{
    min-height:290px !important;
  }

  #sssp-top .sssp-phone{
    width:62px !important;
  }
}


/* =========================================================
   15. FIX FLOATING TOGGLE WHEN JS MOVES BUTTON TO BODY
   Selector global sengaja dipertahankan
========================================================= */

body > .sssp-floating-toggle,
body > .sssp-toggle.sssp-floating-toggle{
  position:fixed !important;
  top:auto !important;
  left:auto !important;
  right:22px !important;
  bottom:22px !important;
  z-index:999999 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  min-width:auto !important;
  min-height:44px !important;
  width:auto !important;
  height:auto !important;
  padding:0 16px !important;
  margin:0 !important;

  border:1px solid rgba(246,234,208,.16) !important;
  border-radius:999px !important;
  background:rgba(7,16,26,.86) !important;
  color:#f2ead8 !important;

  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size:.82rem !important;
  font-weight:850 !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;

  cursor:pointer !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;

  box-shadow:0 16px 48px rgba(0,0,0,.28) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  transform:none !important;
}

body > .sssp-floating-toggle[data-active-theme="light"],
body > .sssp-toggle.sssp-floating-toggle[data-active-theme="light"]{
  border-color:rgba(80,58,30,.14) !important;
  background:rgba(255,255,255,.90) !important;
  color:#182332 !important;
  box-shadow:0 16px 44px rgba(30,35,44,.14) !important;
}

body > .sssp-floating-toggle:hover,
body > .sssp-toggle.sssp-floating-toggle:hover{
  border-color:#c8a96b !important;
}

@media(max-width:720px){
  body > .sssp-floating-toggle,
  body > .sssp-toggle.sssp-floating-toggle{
    right:14px !important;
    bottom:14px !important;
    min-height:42px !important;
    padding:0 14px !important;
    font-size:.78rem !important;
  }
}

@media(prefers-reduced-motion:reduce){
  #sssp-top *,
  #sssp-top *::before,
  #sssp-top *::after,
  body > .sssp-floating-toggle,
  body > .sssp-toggle.sssp-floating-toggle{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}