/* ================================================================
   pemuat.css - layar pemuat (splash) bermerek SIPILAR. Revisi 80.
   Gambarnya assets/ui/loading.svg: ring emas-hijau berputar 1,8 detik
   mengelilingi emblem SIPILAR. SVG dipilih (bukan GIF) karena 200 KB sekali
   muat, tajam di layar retina, dan tepinya tidak bergerigi.
   Perilaku: assets/pemuat.js
   ================================================================ */
.pemuat {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  background: var(--canvas, #fff);
  transition:
    opacity 0.35s var(--ease, ease-out),
    visibility 0.35s;
  /* jaring pengaman: bila peristiwa load tidak pernah sampai (mis. berkas
     pihak ketiga menggantung), layar tetap menyingkir sendiri pada 6 detik */
  animation: pemuat-aman 0s linear 6s forwards;
}
.pemuat img {
  width: 118px;
  height: 118px;
}
.pemuat-teks {
  font: 700 11.5px/1 var(--font-ui, system-ui, sans-serif);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink3, #8494a6);
}
.pemuat.selesai {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}
.pemuat[hidden] {
  display: none;
}
/* Gelap khusus layar pemuat. Sengaja tidak menimpa var(--canvas) karena
   variabel itu dipakai 45+ elemen lain (kartu, panel, input) yang warna
   teksnya belum disesuaikan untuk mode gelap. */
body.dark-mode .pemuat {
  background: #0f172a;
}
body.dark-mode .pemuat-teks {
  color: #94a3b8;
}
@keyframes pemuat-aman {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pemuat {
    transition: none;
  }
}
@media (max-width: 480px) {
  .pemuat img {
    width: 96px;
    height: 96px;
  }
}