/* Landing bergaya scroll untuk halaman Ringkasan. Semua kelas diawali pl- agar tidak bertabrakan dengan layar analisis. */

.app-shell.landing-mode{grid-template-columns:minmax(0,1fr);background:#061024}
.app-shell.landing-mode .sidebar,
.app-shell.landing-mode .topbar,
.app-shell.landing-mode .hero,
.app-shell.landing-mode .view-switcher,
.app-shell.landing-mode .footer{display:none}
.app-shell.landing-mode .content{padding:0;max-width:none}
.app-shell.landing-mode #viewContent{display:block}

.pl{
  --ink:#061024;--ink-2:#0a1b3c;--navy:#0b2d66;--navy-soft:#10407f;
  --paper:#f5f9fe;--paper-2:#ffffff;--rule:#dbe6f3;
  --lime:#dfff54;--mint:#51cfaf;--blue:#2367d3;--coral:#ff7e70;
  --text-dark:#142b49;--text-mid:#53687f;--text-muted:#7b8fa5;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:#fff;background:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.pl *{box-sizing:border-box}
/* Animasi perpindahan layar analisis memasang transform pada pembungkus ini.
   Transform apa pun akan membuat elemen fixed di dalamnya ikut tergulir, jadi dinetralkan. */
.pl{animation:none!important;transform:none!important;filter:none!important;perspective:none!important}
.pl-wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}

/* ---------- rel progres ---------- */
.pl-progress{position:fixed;inset:0 auto auto 0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--mint),var(--lime));transition:width .08s linear}

/* ---------- nav melayang ---------- */
.pl-nav{position:fixed;top:0;left:0;right:0;z-index:55;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:14px clamp(16px,3vw,34px);
  background:rgba(6,16,36,.92);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
  transform:translateY(0)}
.pl-nav-brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:-.02em}
.pl-nav-mark{width:30px;height:30px;border-radius:9px;background:var(--lime);color:#061024;
  display:grid;place-items:center;font-weight:800;font-size:15px}
.pl-nav-links{display:flex;gap:4px}
.pl-nav-links button{border:0;background:none;color:rgba(255,255,255,.62);font:inherit;
  font-size:14px;font-weight:500;padding:8px 12px;border-radius:9px;cursor:pointer;transition:.18s}
.pl-nav-links button:hover{color:#fff;background:rgba(255,255,255,.08)}
.pl-nav-links button[aria-current="true"]{color:var(--lime)}
.pl-enter{border:0;background:var(--lime);color:#061024;font:inherit;font-weight:700;font-size:14px;
  padding:10px 18px;border-radius:10px;cursor:pointer;transition:transform .18s,box-shadow .18s}
.pl-enter:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(223,255,84,.26)}

/* ---------- hero ---------- */
.pl-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  background:
    radial-gradient(1100px 620px at 76% 18%,rgba(35,103,211,.34),transparent 62%),
    radial-gradient(760px 520px at 12% 88%,rgba(81,207,175,.16),transparent 60%),
    linear-gradient(176deg,#061024 0%,#08203f 54%,#061024 100%)}
.pl-hero-grid{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(circle at 50% 42%,#000 10%,transparent 76%)}
.pl-hero-map{position:absolute;right:-3%;top:52%;width:min(1180px,84%);translate:0 -50%;
  opacity:.95;pointer-events:none;will-change:transform;
  mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.22) 32%,#000 64%);
  -webkit-mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.22) 32%,#000 64%)}
.pl-hero-map svg{width:100%;height:auto;display:block;overflow:visible}
.pl-hero-map path{fill-opacity:.4;stroke:currentColor;stroke-opacity:.8;stroke-width:.9;
  vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center;
  filter:drop-shadow(0 0 7px currentColor)}
.pl-hero-map circle{fill:currentColor;opacity:0;filter:drop-shadow(0 0 6px currentColor)}
.pl-ready .pl-hero-map path{
  animation:plLand .85s cubic-bezier(.2,.75,.25,1) calc(var(--i) * 20ms) both,
            plWave 7s ease-in-out var(--wd) infinite}
.pl-ready .pl-hero-map circle{
  animation:plDot .9s ease calc(560ms + var(--i) * 20ms) both,
            plPulse 7s ease-in-out var(--wd) infinite}
@keyframes plLand{from{opacity:0}to{opacity:1}}
@keyframes plDot{from{opacity:0}to{opacity:.85}}
@keyframes plWave{
  0%,46%,100%{transform:translateY(0);fill-opacity:.34;filter:drop-shadow(0 0 6px currentColor)}
  16%{transform:translateY(-8px);fill-opacity:.66;filter:drop-shadow(0 0 20px currentColor)}}
@keyframes plPulse{
  0%,46%,100%{r:2.1;opacity:.5}
  16%{r:3.7;opacity:1}}

.pl-hero-legend{position:absolute;right:clamp(16px,3vw,38px);bottom:34px;z-index:2;
  max-width:360px;text-align:right}
.pl-hero-legend p{margin:0 0 10px;font-size:12px;color:rgba(190,215,248,.62);font-weight:500}
.pl-hero-legend ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px 16px;margin:0;padding:0}
.pl-hero-legend li{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;
  color:rgba(214,232,255,.8)}
.pl-hero-legend i{width:9px;height:9px;border-radius:3px;flex:none;box-shadow:0 0 9px currentColor}
.pl-hero-inner{position:relative;z-index:2;width:min(1180px,calc(100% - 48px));margin-inline:auto;
  padding:120px 0 96px;will-change:transform,opacity}
.pl-hero-inner:before{content:'';position:absolute;inset:40px -90px 40px -90px;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 64% at 18% 50%,rgba(6,16,36,.88),rgba(6,16,36,.45) 58%,transparent 76%)}
.pl-kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;
  color:rgba(198,222,255,.82);margin-bottom:26px}
.pl-kicker i{width:7px;height:7px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 5px rgba(223,255,84,.14)}
.pl-hero h1{font-size:clamp(34px,5.4vw,78px);line-height:1.0;letter-spacing:-.045em;font-weight:800;
  margin:0 0 26px;max-width:24ch;text-wrap:balance}
.pl-hero h1 .pl-line{display:block;overflow:hidden}
.pl-hero h1 .pl-line span{display:block;transform:translateY(102%)}
.pl-ready .pl-hero h1 .pl-line span{animation:plRise .95s cubic-bezier(.19,.9,.26,1) both}
.pl-ready .pl-hero h1 .pl-line:nth-child(2) span{animation-delay:.09s}
.pl-ready .pl-hero h1 .pl-line:nth-child(3) span{animation-delay:.18s}
@keyframes plRise{to{transform:none}}
.pl-hero-lead{font-size:clamp(16px,1.35vw,20px);line-height:1.6;color:rgba(214,232,255,.76);
  max-width:56ch;margin:0 0 38px;font-weight:400}
.pl-ready .pl-hero-lead,.pl-ready .pl-hero-cta,.pl-ready .pl-kicker,.pl-ready .pl-scrollcue{
  animation:plFade .8s cubic-bezier(.2,.8,.2,1) both}
.pl-ready .pl-kicker{animation-delay:.05s}
.pl-ready .pl-hero-lead{animation-delay:.34s}
.pl-ready .pl-hero-cta{animation-delay:.44s}
.pl-ready .pl-scrollcue{animation-delay:.72s}
@keyframes plFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pl-hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.pl-btn{border:0;font:inherit;font-weight:700;font-size:15px;padding:14px 24px;border-radius:12px;
  cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s}
.pl-btn-primary{background:var(--lime);color:#061024}
.pl-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(223,255,84,.24)}
.pl-btn-ghost{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.18)}
.pl-btn-ghost:hover{background:rgba(255,255,255,.13)}
.pl-scrollcue{position:absolute;left:50%;bottom:34px;translate:-50% 0;z-index:2;display:grid;
  justify-items:center;gap:10px;color:rgba(198,222,255,.6);font-size:12px;font-weight:500}
.pl-scrollcue i{display:block;width:1px;height:46px;background:linear-gradient(rgba(223,255,84,.9),transparent);
  animation:plCue 2.1s ease-in-out infinite}
@keyframes plCue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---------- lensa dengan peta sticky ---------- */
.pl-lens{background:var(--paper);color:var(--text-dark);padding:clamp(72px,8vw,128px) 0 clamp(64px,7vw,110px)}
.pl-lens-head{width:min(1320px,calc(100% - 48px));margin:0 auto clamp(28px,4vw,56px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;
  border-bottom:1px solid var(--rule);padding-bottom:22px}
.pl-lens-head h2{font-size:clamp(28px,3.6vw,46px);line-height:1.04;letter-spacing:-.04em;margin:0;
  max-width:18ch;color:#0b2142;font-weight:800}
.pl-lens-head p{margin:10px 0 0;color:#5d7489;max-width:52ch;line-height:1.6}
.pl-lens-inner{width:min(1320px,calc(100% - 48px));margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:clamp(28px,3.4vw,60px);
  align-items:start}
.pl-steps{display:grid}
.pl-step{min-height:82svh;display:flex;flex-direction:column;justify-content:center;gap:18px;
  opacity:.34;transition:opacity .45s ease}
.pl-step.is-active{opacity:1}
.pl-step-q{font-size:clamp(22px,2.5vw,34px);line-height:1.14;letter-spacing:-.035em;font-weight:700;
  margin:0;color:#0b2142;max-width:20ch}
.pl-step p{margin:0;font-size:16px;line-height:1.66;color:#53687f;max-width:46ch}
.pl-step-read{display:flex;align-items:baseline;gap:12px;padding-top:6px}
.pl-step-read b{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.04em;line-height:1;
  color:#0b2142;font-variant-numeric:tabular-nums}
.pl-step-read span{font-size:14px;color:#6a7f96;max-width:22ch;line-height:1.35}
.pl-chips{display:flex;flex-wrap:wrap;gap:7px;padding-top:4px}
.pl-chips button{border:1px solid var(--rule);background:#fff;color:#4a6180;font:inherit;font-size:13px;
  font-weight:600;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.18s}
.pl-chips button:hover{border-color:#9dc0ea;color:#17365f}
.pl-chips button[aria-pressed="true"]{background:#0b2d66;border-color:#0b2d66;color:#fff}

.pl-stage{position:sticky;top:50%;transform:translateY(-50%);display:grid;align-content:center;gap:16px}
.pl-map{position:relative;background:linear-gradient(180deg,#fdfeff,#ecf4fc);border:1px solid var(--rule);
  border-radius:22px;padding:30px 16px 14px;box-shadow:0 30px 70px rgba(17,60,110,.12)}
.pl-map svg{width:100%;height:auto;display:block}
.pl-map path{stroke:#fff;stroke-width:1.1;vector-effect:non-scaling-stroke;
  transition:fill .62s cubic-bezier(.3,.7,.3,1)}
.pl-map-note{position:absolute;left:18px;top:14px;font-size:11px;font-weight:600;color:#86a3bd;
  letter-spacing:.02em}
.pl-legend{display:flex;flex-wrap:wrap;gap:8px 16px;padding:0 4px}
.pl-legend span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#5f768f;font-weight:500}
.pl-legend i{width:13px;height:13px;border-radius:4px;flex:none;border:1px solid rgba(12,51,97,.08)}
.pl-rail{display:flex;gap:7px;padding:0 4px}
.pl-rail i{height:3px;flex:1;border-radius:2px;background:#d7e3f0;transition:background .4s}
.pl-rail i.on{background:#0b2d66}

/* ---------- deret figur ---------- */
.pl-figures{background:var(--paper-2);color:var(--text-dark);padding:clamp(54px,6vw,86px) 0;
  border-top:1px solid var(--rule)}
.pl-fig-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.pl-fig{padding:4px clamp(14px,2vw,28px);border-left:1px solid var(--rule)}
.pl-fig:first-child{border-left:0;padding-left:0}
.pl-fig b{display:block;font-size:clamp(28px,3.4vw,46px);line-height:1;letter-spacing:-.045em;
  color:#0b2142;font-variant-numeric:tabular-nums;font-weight:800}
.pl-fig span{display:block;margin-top:10px;font-size:14px;color:#5f768f;line-height:1.45;max-width:20ch}
.pl-fig-foot{margin-top:28px;font-size:13px;color:#7b8fa5;max-width:76ch;line-height:1.6}

/* ---------- tabel modul ---------- */
.pl-modules{background:var(--paper);color:var(--text-dark);padding:clamp(64px,7vw,110px) 0}
.pl-modules h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.04em;margin:0 0 8px;color:#0b2142;
  font-weight:800;max-width:20ch;line-height:1.05}
.pl-modules .pl-sub{color:#5d7489;margin:0 0 30px;max-width:56ch;line-height:1.6}
.pl-table{border-top:1px solid #cfdeee}
.pl-row{display:grid;grid-template-columns:minmax(190px,.62fr) minmax(0,1.6fr) auto;gap:clamp(18px,3vw,40px);
  align-items:center;width:100%;text-align:left;border:0;border-bottom:1px solid var(--rule);
  background:none;font:inherit;padding:19px 10px 19px 2px;cursor:pointer;transition:background .2s,padding .2s}
.pl-row:hover,.pl-row:focus-visible{background:#eaf2fc;padding-left:12px;padding-right:0}
.pl-row b{font-size:17px;color:#0b2142;letter-spacing:-.015em;display:flex;align-items:center;gap:12px}
.pl-row-dot{width:9px;height:9px;border-radius:3px;flex:none}
.pl-row p{margin:0;font-size:15px;color:#5d7489;line-height:1.5}
.pl-tag{font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;white-space:nowrap}
.pl-tag.src{background:#e7f1ff;color:#1d4f93}
.pl-tag.ilu{background:#fff3dc;color:#96661a}

/* ---------- pernyataan ---------- */
.pl-claim{background:var(--ink);color:#fff;padding:clamp(86px,10vw,160px) 0;position:relative;overflow:hidden}
.pl-claim:before{content:'';position:absolute;inset:auto -10% -60% 40%;height:70%;
  background:radial-gradient(closest-side,rgba(35,103,211,.3),transparent);pointer-events:none}
.pl-claim-line{position:relative;overflow:hidden}
.pl-claim h2{font-size:clamp(30px,5vw,72px);line-height:1.02;letter-spacing:-.05em;font-weight:800;
  margin:0;max-width:17ch;transform:translateY(104%);transition:transform 1s cubic-bezier(.19,.9,.26,1)}
.pl-claim.is-in h2{transform:none}
.pl-claim-rule{width:64px;height:3px;background:var(--lime);margin:40px 0 30px;border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.2,1) .25s}
.pl-claim.is-in .pl-claim-rule{transform:none}
.pl-claim-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,56px)}
.pl-claim-body p{margin:0;font-size:15px;line-height:1.7;color:rgba(206,226,250,.76)}
.pl-claim-body p b{color:#fff;font-weight:600;display:block;margin-bottom:6px;font-size:15px}

/* ---------- penutup ---------- */
.pl-end{background:linear-gradient(168deg,#0a2350,#061024 70%);color:#fff;padding:clamp(70px,8vw,120px) 0 54px}
.pl-end h2{font-size:clamp(28px,4vw,56px);letter-spacing:-.045em;line-height:1.04;margin:0 0 18px;
  max-width:16ch;font-weight:800}
.pl-end p{color:rgba(206,226,250,.7);max-width:52ch;margin:0 0 32px;line-height:1.6;font-size:16px}
.pl-end-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:56px}
.pl-foot{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;flex-wrap:wrap;
  gap:10px 28px;justify-content:space-between;font-size:12.5px;color:rgba(188,211,240,.56);line-height:1.6}

/* ---------- fokus & aksesibilitas ---------- */
.pl button:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:10px}
.pl-lens button:focus-visible,.pl-modules button:focus-visible{outline-color:#0b2d66}

/* ---------- responsif ---------- */
@media(max-width:980px){
  .pl-lens-inner{grid-template-columns:minmax(0,1fr);gap:0}
  .pl-stage{position:sticky;top:0;transform:none;height:auto;padding:14px 0 16px;z-index:3;
    background:linear-gradient(180deg,var(--paper) 0 88%,rgba(245,249,254,0))}
  .pl-map{padding:24px 12px 10px;border-radius:18px}
  .pl-legend{gap:6px 12px}
  .pl-legend span{font-size:11px}
  .pl-steps{order:2}
  .pl-step{min-height:auto;padding:34px 0 52px;justify-content:flex-start}
  .pl-step-q{font-size:clamp(21px,5.4vw,28px)}
  .pl-fig-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 0}
  .pl-fig{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:18px}
  .pl-fig:first-child{border-top:0;padding-top:4px}
  .pl-claim-body{grid-template-columns:1fr;gap:20px}
  .pl-row{grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .pl-row p{grid-column:1/-1}
  .pl-nav-links{display:none}
}
@media(max-width:980px){.pl-hero-legend{display:none}}
@media(max-width:620px){
  .pl-wrap{width:calc(100% - 32px)}
  .pl-hero-inner{width:calc(100% - 32px);padding:104px 0 90px}
  .pl-hero-map{opacity:.3;right:-28%;width:150%}
  .pl-fig-row{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .pl *,.pl *:before,.pl *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .pl-hero h1 .pl-line span{transform:none}
  .pl-claim h2{transform:none}
  .pl-claim-rule{transform:none}
  .pl-hero-map path,.pl-hero-map circle{opacity:1;animation:none!important}
  .pl-hero-map path{opacity:.95;fill-opacity:.42}
  .pl-step{opacity:1}
}

/* ---------- keadaan boot ----------
   Dipasang skrip kecil di <head> sebelum render pertama, lalu dilepas oleh
   landing.js begitu tampilan sebenarnya selesai digambar. Tujuannya menghapus
   kedipan kerangka dashboard saat halaman landing dimuat ulang. */
html.landing-boot{background:#061024}
html.landing-boot body{background:#061024}
html.landing-boot .sidebar,
html.landing-boot .topbar,
html.landing-boot .hero,
html.landing-boot .view-switcher,
html.landing-boot .footer{display:none}
html.landing-boot .app-shell{grid-template-columns:minmax(0,1fr);background:#061024}
html.landing-boot .content{padding:0;max-width:none}
html.landing-boot #viewContent{min-height:100svh;display:grid;place-items:center}
html.landing-boot .loading{background:none;border:0;color:rgba(190,215,248,.5);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13px;font-weight:500;letter-spacing:.01em;padding:0;
  display:grid;justify-items:center;gap:16px}
html.landing-boot .loading:before{content:'';width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(223,255,84,.22);border-top-color:#dfff54;animation:plSpin .85s linear infinite}
@keyframes plSpin{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){html.landing-boot .loading:before{animation-duration:2.4s}}