/* StokLensa v16: unify premium header controls and walk-through with the selected site theme. */
:root{--v16-menu-shadow:0 28px 65px #0006}
html[data-theme="light"]{--v16-menu-shadow:0 22px 54px #12351b16}
.site-header{z-index:150;background:var(--header);border-color:var(--outline);box-shadow:0 1px 0 var(--outline)}
.nav-shell{min-width:0}
.site-nav{align-items:center;gap:clamp(12px,1.6vw,26px)}
.site-nav>a,.site-nav .v16-nav-group>summary{font-size:13px;font-weight:700;letter-spacing:0;color:var(--muted)}
.site-nav>a:hover,.site-nav .v16-nav-group>summary:hover,.site-nav .v16-nav-group[open]>summary{color:var(--text)}
.v16-nav-group{position:relative;flex-shrink:0}
.v16-nav-group>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding:12px 2px;white-space:nowrap}
.v16-nav-group>summary::-webkit-details-marker{display:none}
.v16-nav-group>summary::marker{content:""}
.v16-chevron{font-size:10px;line-height:1;transition:transform .2s ease}
.v16-nav-group[open] .v16-chevron{transform:rotate(180deg)}
.v16-nav-menu{position:absolute;top:calc(100% + 7px);left:-14px;min-width:230px;padding:9px;background:var(--surface);border:1px solid var(--outline);border-radius:15px;box-shadow:var(--v16-menu-shadow);display:grid;gap:3px;z-index:180}
.v16-nav-menu>a{display:flex;flex-direction:column;gap:2px;padding:11px 13px;border-radius:9px;white-space:nowrap;font-size:13px;font-weight:760;color:var(--text)}
.v16-nav-menu>a:hover,.v16-nav-menu>a:focus-visible{background:var(--surface-2);color:var(--accent)}
.v16-nav-menu small{color:var(--muted);font-size:10px;font-weight:600}
.v16-en{display:initial}
.v16-id{display:none}
html[lang="id"] .v16-en{display:none!important}
html[lang="id"] .v16-id{display:initial!important}
.lang-control{border-radius:11px;padding:3px;gap:1px;background:var(--surface);border-color:var(--outline)}
.lang-option{min-width:33px;height:36px;border-radius:8px;padding:5px 7px;font-size:11px}
.nav-actions{gap:9px;flex-shrink:0}
.theme-toggle{display:inline-flex;justify-content:center;min-height:44px;min-width:44px;width:44px;padding:11px;border-radius:11px;background:var(--surface);border:1px solid var(--outline);color:var(--text);font-size:17px}
.theme-toggle #theme-label{position:absolute;width:1px!important;height:1px!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.theme-toggle svg{width:18px;height:18px;flex:none}
.v16-theme-icon{display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1}
.v16-theme-icon::before{content:"☀"}
html[data-theme="light"] .v16-theme-icon::before{content:"☾"}
.nav-login{min-height:44px;padding:10px 15px;border-radius:11px}
.desktop-cta,.v16-header-cta{min-height:44px;border-radius:11px;box-shadow:0 4px 16px #b4ed9540}
.menu-toggle{min-height:44px;min-width:44px;border:1px solid var(--outline);border-radius:11px;background:var(--surface)}
.menu-toggle span{margin:4px auto}
.v16-nav-mobile-cta{display:none!important}
@media(min-width:1200px){
  .site-nav{display:flex!important;position:static!important;top:auto!important;left:auto!important;right:auto!important;padding:0!important;box-shadow:none!important;background:transparent!important;border:0!important;flex-direction:row!important;gap:clamp(12px,1.3vw,24px)}
  .menu-toggle{display:none!important}
}
@media(max-width:1199px){
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:20px 26px 30px;background:var(--surface);border-bottom:1px solid var(--outline);box-shadow:var(--v16-menu-shadow);flex-direction:column;align-items:stretch;gap:8px;max-height:calc(100vh - 82px);overflow:auto}
  .site-nav.is-open{display:flex}
  .site-nav>a,.site-nav .v16-nav-group>summary{display:flex;padding:12px 13px;border-radius:10px;width:100%;font-size:15px}
  .site-nav>a:hover{background:var(--surface-2)}
  .v16-nav-group{width:100%}
  .v16-nav-group>summary{justify-content:space-between}
  .v16-nav-menu{position:static;min-width:0;box-shadow:none;border-radius:11px;background:var(--surface-2);margin-top:3px;border-color:var(--outline)}
  .v16-nav-mobile-cta{display:flex!important;align-items:center;justify-content:center;margin-top:8px;background:var(--accent);color:var(--accent-text)!important}
  .menu-toggle{display:block!important}
  .desktop-cta,.v16-header-cta{display:none!important}
}
@media(max-width:760px){
  .site-nav{top:100%;max-height:calc(100vh - 69px)}
  .theme-toggle{min-height:40px;min-width:40px;width:40px}
  .lang-control{padding:2px}
  .lang-option{min-width:28px;height:32px}
  .nav-actions{gap:6px}
  .nav-shell{gap:9px}
}
@media(max-width:430px){
  .brand{font-size:19px}
  .brand-mark,.brand-mark img{width:31px;height:31px}
  .nav-actions{gap:5px}
  .theme-toggle{min-width:36px;width:36px;min-height:38px;padding:7px}
  .menu-toggle{min-width:38px;width:38px;min-height:40px;padding:6px}
  .lang-option{min-width:26px;padding-inline:3px}
}

/* Theme-matched v15 section. The live product preview itself stays
   intentionally darker, whereas the timeline inherits the website theme. */
.sl-story{
  --sl-paper:var(--bg-alt);--sl-ink:var(--text);
  --sl-muted:var(--muted);--sl-line:var(--outline);
  --sl-mint:var(--accent);--sl-neon:var(--accent);
  background:var(--sl-paper);color:var(--sl-ink);
  border-top:1px solid var(--outline);border-bottom:1px solid var(--outline)
}
.sl-story h2,.sl-story h3{color:var(--text)}
.sl-story .sl-story-heading p:last-child,.sl-story .sl-step-copy,.sl-story .sl-story-foot{color:var(--muted)}
.sl-story .sl-eyebrow{color:var(--accent)}
.sl-story .sl-scroll-meter{color:var(--muted)}
.sl-story .sl-scroll-track{background:var(--outline)}
.sl-story .sl-scroll-fill{background:var(--accent)}
.sl-story .sl-step-list{border-left-color:var(--outline)}
.sl-story .sl-step{color:var(--muted);border-left-color:transparent}
.sl-story .sl-step:hover{color:var(--text)}
.sl-story .sl-step.is-active{color:var(--text);border-left-color:var(--accent)}
.sl-story .sl-step.is-complete{color:var(--subtle);border-left-color:var(--outline)}
.sl-story .sl-number{background:var(--surface);color:var(--muted);border-color:var(--outline)}
.sl-story .sl-step.is-active .sl-number{background:var(--accent);color:var(--accent-text);border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent)}
.sl-story .sl-step.is-complete .sl-number{background:var(--surface-3);color:var(--text);border-color:var(--outline)}
.sl-story .sl-step.is-active .sl-step-copy{color:var(--muted)}
.sl-story .sl-step.is-complete .sl-step-copy{color:var(--subtle)}
.sl-story .sl-story-foot strong{color:var(--text)}
.sl-story .sl-story-foot a{color:var(--accent);text-decoration-color:var(--accent)}
.sl-story .sl-access-link{color:var(--accent);border-color:var(--outline);background:var(--surface);box-shadow:none}
.sl-story .sl-access-link:hover{background:var(--surface-2);border-color:var(--accent)}
.sl-story .sl-mock{border:1px solid #315044;background:radial-gradient(circle at 88% 4%,#1b302b 0%,transparent 35%),#0b1519;box-shadow:0 25px 70px #0005}
.sl-story .sl-panel{animation:sl-rise .42s cubic-bezier(.16,1,.3,1) both}
.sl-story .sl-mock-stage{overflow:hidden}
.sl-story .sl-batch.is-priority{box-shadow:0 0 0 1px #8bddad80}
.sl-story .sl-scroll-fill,.sl-story .sl-progress-dots span{transition:width .36s ease,background-color .3s ease}
html[data-theme="light"] .sl-story{background:var(--bg-alt)}
html[data-theme="light"] .sl-story .sl-story-foot a,html[data-theme="light"] .sl-story .sl-access-link{color:var(--accent)}
@media(max-width:760px){.sl-story .sl-story-heading{margin-bottom:30px}}
@media(prefers-reduced-motion:reduce){
  .sl-story .sl-panel,.sl-story .sl-unit,.sl-story .sl-batch{animation:none!important}
  .sl-story .sl-scroll-fill,.sl-story .sl-progress-dots span{transition:none!important}
  .v16-nav-group .v16-chevron{transition:none}
}