/* SiapJual48 final UI/UX system — shared visual, responsive and accessibility rules. */
:root{
  --sj48-space-1:8px;--sj48-space-2:12px;--sj48-space-3:16px;--sj48-space-4:24px;--sj48-space-5:32px;--sj48-space-6:48px;--sj48-space-7:72px;--sj48-space-8:96px;
  --sj48-radius-sm:12px;--sj48-radius-md:18px;--sj48-radius-lg:24px;--sj48-radius-pill:999px;
  --sj48-touch:44px;--sj48-touch-primary:48px;
  --sj48-lime:#c8ff52;--sj48-orange:#ff5a36;--sj48-ink:#11130f;--sj48-paper:#f3efe6;
}
html{scroll-padding-top:92px}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
:where(button,a,input,select,textarea):focus-visible{outline:3px solid var(--sj48-lime)!important;outline-offset:3px!important}
:where(button,[role="button"],a.btn,.sj48-freeze-cta,.sj48-freeze-menu,.sj48-footer-brief,.sj48-flow-btn,.sj48x-btn,.proof-tab,.work-tab,.concept-tab,#sj48-concept-range .crp-tab){min-height:var(--sj48-touch)!important}
:where(.btn.primary,.sj48-freeze-cta,.sj48-footer-brief,.sj48-flow-btn.primary,.sj48x-btn.lime){min-height:var(--sj48-touch-primary)!important}

/* Typography hierarchy: strong headlines, calmer support copy. */
.page-hero h1,.section-head h2,.sj48-flow-head h2,.sj48x-head h2,#sj48-concept-range .crp-head h2{text-wrap:balance}
.page-hero p,.article>p,.article>li,.article li,.sj48-flow-head p,.sj48x-head p{font-weight:400}
.eyebrow,.sj48x-kicker,.sj48-flow-kicker,#sj48-concept-range .crp-kicker{font-size:max(10.5px,0.66rem)!important;line-height:1.45!important}
.article>p,.article>ul,.article>ol{max-width:70ch;font-size:16px!important;line-height:1.76!important}
.article>h2{max-width:22ch}
.callout{border-radius:var(--sj48-radius-md)!important}

/* Header/footer interaction comfort. */
.sj48-freeze-nav a{min-height:44px!important}
.sj48-freeze-menu{min-width:44px!important;min-height:44px!important}
.crumbs>a:first-child,.sj48-back-link{min-height:44px!important;padding-inline:15px!important}
.crumbs>a:first-child:before,.sj48-back-link:before{content:"← Beranda"!important;font-size:11.5px!important}
.sj48-footer-nav a{min-height:44px!important;padding-block:4px!important}
.sj48-footer-kicker{font-size:10.5px!important}
.sj48-footer-bottom-inner,.sj48-footer-legal a{font-size:10.5px!important}

/* Brief: editorial copy on the left, usable form on the right. */
#brief-sebelum-chat{border-top:0!important;box-shadow:none!important}
#brief-sebelum-chat::before{display:none!important}
#brief-sebelum-chat .sj48x-briefbox{width:min(1240px,calc(100% - 44px))!important;display:grid!important;grid-template-columns:minmax(0,.88fr) minmax(430px,1fr)!important;gap:clamp(44px,5.5vw,86px)!important;align-items:start!important;margin-inline:auto!important}
#brief-sebelum-chat .sj48x-briefcopy{max-width:560px!important;text-align:left!important;padding-top:8px!important}
#brief-sebelum-chat .sj48x-briefcopy .sj48x-kicker{text-align:left!important;margin-left:0!important}
#brief-sebelum-chat .sj48x-briefcopy h2{max-width:10ch!important;margin-left:0!important;margin-right:0!important;text-align:left!important;text-wrap:balance!important}
#brief-sebelum-chat .sj48x-briefcopy>p{max-width:42ch!important;margin-left:0!important;margin-right:0!important;text-align:left!important;font-size:14px!important;line-height:1.68!important}
#brief-sebelum-chat .sj48x-mini{justify-content:flex-start!important}
#brief-sebelum-chat #sj48Brief,#brief-sebelum-chat .sj48x-form{width:100%!important;max-width:540px!important;justify-self:end!important;margin:0!important}
#brief-sebelum-chat>hr:first-child{display:none!important}

/* Forms: readable labels, predictable targets, no tiny notes. */
.sj48x-form label{font-size:11px!important;line-height:1.4!important;letter-spacing:.02em!important}
.sj48x-form input,.sj48x-form select,.sj48x-form textarea{min-height:48px!important;font-size:15px!important;line-height:1.4!important}
.sj48x-form textarea{min-height:112px!important}
.sj48x-form .sj48x-note{font-size:11.5px!important;line-height:1.55!important}
.sj48x-form .sj48x-status{font-size:11.5px!important;line-height:1.45!important}
.choices span{min-height:48px!important}
.tool-actions button,.result-actions a{min-height:48px!important}

/* Concept Range: same content width as the rest of the homepage. */
#sj48-concept-range .crp-shell{width:min(1240px,calc(100% - 44px))!important;max-width:1240px!important;margin-inline:auto!important}
#sj48-concept-range .crp-tab{min-height:52px!important;font-size:12px!important;line-height:1.2!important}
#sj48-concept-range .crp-kicker{font-size:10.5px!important}
#sj48-concept-range .crp-item,#sj48-concept-range .crp-fix{font-size:12.5px!important;line-height:1.48!important}
#sj48-concept-range .crp-before p,#sj48-concept-range .crp-after p{font-size:11.5px!important;line-height:1.5!important}
#sj48-concept-range .crp-benefits span,#sj48-concept-range .crp-proof span,#sj48-concept-range .crp-cta small,#sj48-concept-range .crp-use{font-size:10.5px!important;line-height:1.45!important}
#sj48-concept-range .crp-proof strong{font-size:11.5px!important;line-height:1.35!important}

/* KORA preview: toolbar remains actionable but the preview itself is not a nested scroll trap on phones. */
@media(max-width:720px){
  .kora-preview-toolbar{gap:8px!important;padding:8px!important;flex-wrap:wrap!important}
  .kora-window-dots,.kora-address{display:none!important}
  .kora-preview-actions{width:100%!important;margin:0!important;justify-content:space-between!important}
  .kora-mode button,.kora-full-demo{min-height:44px!important;font-size:10.5px!important;padding-inline:12px!important}
  .kora-preview-stage{padding:0!important}
  .kora-preview-viewport{height:620px!important;max-height:72vh!important;overflow:hidden!important;touch-action:pan-y!important;border-radius:0!important;position:relative!important}
  .kora-preview-viewport:after{content:"";position:absolute;left:0;right:0;bottom:0;height:84px;pointer-events:none;background:linear-gradient(180deg,rgba(248,243,234,0),rgba(248,243,234,.96))}
  .kora-preview-viewport .kora-site-shell{pointer-events:none}
}

/* Tablet breakpoint: stop forcing desktop grids into narrow portrait screens. */
@media(max-width:880px){
  .section-head,.sj48-flow-head,.sj48x-head{grid-template-columns:1fr!important;gap:14px!important;align-items:start!important}
  .section-head p,.sj48-flow-head p,.sj48x-head p{max-width:620px!important}
  .sj48-footer-main{grid-template-columns:1fr!important;gap:30px!important}
  .sj48-footer-explore{max-width:700px!important}
  .decision-grid{grid-template-columns:1fr!important}
  #brief-sebelum-chat .sj48x-briefbox{grid-template-columns:1fr!important;gap:28px!important}
  #brief-sebelum-chat .sj48x-briefcopy{max-width:620px!important;padding-top:0!important}
  #brief-sebelum-chat #sj48Brief,#brief-sebelum-chat .sj48x-form{justify-self:start!important;max-width:620px!important}
}

@media(max-width:720px){
  html{scroll-padding-top:78px}
  .page-hero{padding-top:54px!important;padding-bottom:52px!important}
  .page-hero .wrap{width:calc(100% - 28px)!important}
  .page-hero h1{font-size:clamp(38px,11.4vw,50px)!important;line-height:.98!important;letter-spacing:-.052em!important;max-width:14ch!important;margin-block:14px 18px!important}
  .page-hero p{font-size:15px!important;line-height:1.65!important;max-width:38ch!important}
  .content{padding-top:52px!important;padding-bottom:78px!important}
  .content .article{width:calc(100% - 28px)!important}
  .article>h2{margin-top:48px!important;font-size:clamp(29px,8.6vw,38px)!important;line-height:1.06!important;max-width:18ch!important}
  .article>h3{font-size:clamp(22px,6.5vw,28px)!important}
  .article>p,.article>ul,.article>ol{font-size:15.5px!important;line-height:1.72!important;max-width:none}
  .callout{padding:18px!important}
  .mini-cta{padding:20px!important;margin-top:42px!important}
  .mini-cta .btn{width:100%!important;justify-content:center!important}

  .sj48-freeze-header{padding-top:7px!important}
  .sj48-freeze-wrap{width:calc(100% - 16px)!important;min-height:56px!important;padding:6px 7px 6px 13px!important;gap:8px!important}
  .sj48-freeze-brand{font-size:18px!important}
  .sj48-freeze-cta{display:none!important}
  .sj48-freeze-menu{display:inline-flex!important;align-items:center!important;justify-content:center!important}
  .sj48-freeze-nav{top:66px!important;left:8px!important;right:8px!important;padding:10px!important;border-radius:18px!important}
  .sj48-freeze-nav a{min-height:46px!important;padding-inline:14px!important;font-size:13px!important}

  .sj48-footer-main{width:calc(100% - 28px)!important;padding-top:42px!important;padding-bottom:28px!important}
  .sj48-footer-intro p{font-size:13.5px!important}
  .sj48-footer-nav{gap:2px 14px!important}
  .sj48-footer-nav a{font-size:12px!important}
  .sj48-footer-bottom-inner{width:calc(100% - 28px)!important;align-items:flex-start!important;padding:18px 0!important;min-height:0!important;flex-direction:column!important;gap:10px!important}

  #brief-sebelum-chat .sj48x-briefbox{width:calc(100% - 24px)!important;grid-template-columns:1fr!important;gap:24px!important}
  #brief-sebelum-chat .sj48x-briefcopy,#brief-sebelum-chat .sj48x-briefcopy .sj48x-kicker,#brief-sebelum-chat .sj48x-briefcopy h2,#brief-sebelum-chat .sj48x-briefcopy>p{text-align:left!important}
  #brief-sebelum-chat .sj48x-briefcopy h2{max-width:10ch!important;margin-left:0!important;margin-right:0!important}
  #brief-sebelum-chat .sj48x-briefcopy>p{max-width:36ch!important;margin-left:0!important;margin-right:0!important}
  #brief-sebelum-chat .sj48x-mini{justify-content:flex-start!important}
  #brief-sebelum-chat #sj48Brief,#brief-sebelum-chat .sj48x-form{max-width:none!important;justify-self:stretch!important}

  /* Concept Range becomes a true vertical before/after story. */
  #sj48-concept-range{padding-block:46px!important}
  #sj48-concept-range .crp-shell{width:calc(100% - 24px)!important}
  #sj48-concept-range .crp-head{gap:14px!important;margin-bottom:18px!important}
  #sj48-concept-range .crp-head h2{font-size:clamp(36px,10.4vw,46px)!important;line-height:.98!important;max-width:12ch!important}
  #sj48-concept-range .crp-head>p{font-size:13.5px!important;line-height:1.6!important}
  #sj48-concept-range .crp-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;overflow:visible!important}
  #sj48-concept-range .crp-tab{font-size:11.5px!important;padding:8px 5px!important;min-height:48px!important;border-radius:12px!important;overflow-wrap:normal!important;word-break:normal!important}
  #sj48-concept-range .crp-card{grid-template-columns:1fr!important;border-radius:20px!important;overflow:hidden!important}
  #sj48-concept-range .crp-copy{padding:22px 18px!important;border-right:0!important;border-bottom:1px solid #e2dbd1!important}
  #sj48-concept-range .crp-copy h3{font-size:clamp(26px,7.8vw,34px)!important;line-height:1.05!important}
  #sj48-concept-range .crp-demo{padding:18px 14px 20px!important}
  #sj48-concept-range .crp-compare-head{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-bottom:10px!important}
  #sj48-concept-range .crp-compare-head>div{grid-column:1!important}
  #sj48-concept-range .crp-compare{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;align-items:stretch!important}
  #sj48-concept-range .crp-before,#sj48-concept-range .crp-after{width:100%!important;min-width:0!important}
  #sj48-concept-range .crp-arrow{display:flex!important;justify-content:center!important;min-height:36px!important}
  #sj48-concept-range .crp-arrow i{width:36px!important;height:36px!important;transform:rotate(90deg)!important}
  #sj48-concept-range .crp-after-top{grid-template-columns:1fr!important;min-height:0!important}
  #sj48-concept-range .crp-after-copy{padding:18px!important;margin:0!important;background:#fff!important}
  #sj48-concept-range .crp-hero-photo{min-height:220px!important;order:-1!important}
  #sj48-concept-range .crp-usecases,#sj48-concept-range .crp-local-flow,#sj48-concept-range .crp-proofs{grid-template-columns:1fr!important}

  .proof-tabs,.sprint-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important}
  .proof-tab,.sprint-tabs>*{min-height:48px!important;font-size:11.5px!important;text-align:center!important;white-space:normal!important}
  .proof-tabs>*:last-child:nth-child(odd),.sprint-tabs>*:last-child:nth-child(odd){grid-column:1/-1!important}

  .sj48x-form{border-radius:18px!important;padding:16px!important}
  .sj48x-form input,.sj48x-form select,.sj48x-form textarea{font-size:16px!important}
}

@media(max-width:420px){
  .page-hero h1{font-size:clamp(36px,11vw,44px)!important}
  .sj48-footer-nav{grid-template-columns:1fr 1fr!important}
  #sj48-concept-range .crp-tabs{gap:5px!important}
  #sj48-concept-range .crp-tab{font-size:11px!important;padding-inline:4px!important}
}

@media(max-width:340px){
  .page-hero .wrap,.content .article{width:calc(100% - 20px)!important}
  .page-hero h1{font-size:34px!important}
  .sj48-footer-nav{grid-template-columns:1fr!important}
  .sj48-footer-nav a{min-height:44px!important}
  #brief-sebelum-chat .sj48x-briefbox{width:calc(100% - 18px)!important}
  #brief-sebelum-chat .sj48x-briefcopy h2{font-size:31px!important}
  #sj48-concept-range .crp-shell{width:calc(100% - 16px)!important}
  #sj48-concept-range .crp-tabs{grid-template-columns:1fr!important}
  #sj48-concept-range .crp-tab{font-size:12px!important;min-height:44px!important}
}

@media(max-height:520px) and (orientation:landscape){
  .sj48-freeze-header{position:relative!important}
  #sj48-mobile-finalbar,.sj48-mobile-cta{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
}