/* v19: dua gaya splash dengan progress bar lingkaran (tanpa teks).
   1) Splash buka aplikasi  : latar krem, logo bulat + glow, judul renggang, ring merah.
   2) Splash masuk panel    : (#splash.sp-welcome) gaya halaman verifikasi — putih, avatar, brand, ring teal.
   Ukuran memakai vw agar proporsinya sama di semua layar. */
html body #splash,html.dark body #splash{
  --sp-bg:#fff8e1;--sp-ink:#1a1a1a;--sp-mu:#9e9e9e;--sp-ac:#ff4757;--sp-tr:rgba(255,71,87,.16);
  --pf-size:min(33vw,190px);--pf-border:0 solid transparent;--pf-shadow:0 0 8vw 1.5vw rgba(255,71,87,.26);
  --h1-size:clamp(26px,8.47vw,44px);--h1-w:700;--h1-ls:.06em;--h1-mt:9vw;
  --tg-size:clamp(9px,2.78vw,14px);--tg-ls:.33em;--tg-mt:4.3vw;
  --rg-size:min(11vw,56px);--rg-mt:14.5vw;
}
html body #splash.sp-welcome,html.dark body #splash.sp-welcome{
  --sp-bg:#fff;--sp-ink:#111b21;--sp-mu:#667781;--sp-ac:#00a884;--sp-tr:#d9efe9;
  --pf-size:min(24vw,130px);--pf-border:1px solid #bfe8dd;--pf-shadow:none;
  --h1-size:clamp(20px,6vw,32px);--h1-w:400;--h1-ls:.07em;--h1-mt:4.4vw;
  --tg-size:clamp(10px,2.8vw,14px);--tg-ls:.12em;--tg-mt:3.4vw;
  --rg-size:min(13vw,64px);--rg-mt:15vw;
}
html body #splash,html.dark body #splash{
  background:var(--sp-bg)!important;color:var(--sp-ink)!important;
  padding:0!important;align-items:center;justify-content:center;
}
#splash .sp-glow,#splash .sp-grid,#splash .sp-top,#splash .sp-act,#splash #spLogo{display:none!important}
html body #splash .sp-hero{
  flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 6vw;
}
#splash .sp-pf{
  width:var(--pf-size);height:var(--pf-size);border-radius:50%;overflow:hidden;background:#fff;flex:none;
  border:var(--pf-border);box-shadow:var(--pf-shadow);
  animation:spIn .7s cubic-bezier(.2,.9,.3,1) both;
}
#splash .sp-pf img{display:block;width:100%;height:100%;object-fit:cover}
html body #splash .sp-hero h1,html.dark body #splash .sp-hero h1{
  margin:var(--h1-mt) 0 0;padding-left:var(--h1-ls);
  font-size:var(--h1-size);line-height:1;font-weight:var(--h1-w);letter-spacing:var(--h1-ls);white-space:nowrap;
  color:var(--sp-ink)!important;text-transform:uppercase;
}
html body #splash .sp-tag,html.dark body #splash .sp-tag{
  margin:var(--tg-mt) 0 0;max-width:86vw;padding-left:var(--tg-ls);
  font-size:var(--tg-size);line-height:1.5;letter-spacing:var(--tg-ls);color:var(--sp-mu)!important;
}
/* progress lingkaran: terisi sesuai progres nyata (diatur lewat stroke-dashoffset dari JS) */
#splash .sp-rg{
  position:relative;width:var(--rg-size);height:var(--rg-size);min-width:40px;min-height:40px;
  margin-top:var(--rg-mt);flex:none;animation:spIn .7s .25s cubic-bezier(.2,.9,.3,1) both;
}
#splash .sp-rg svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
#splash .sp-rg circle{fill:none;stroke-width:3}
#splash .sp-rg .t{stroke:var(--sp-tr)}
#splash .sp-rg .p{stroke:var(--sp-ac);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .35s ease}