/* ==========================================================================
   INSMART Loader
   - Splash logo (Pilihan A): hanya saat pertama membuka situs dalam satu sesi
   - Garis progres tipis di atas (Pilihan C): setiap pindah halaman
   - .ins-skeleton: kerangka konten berkilau untuk bagian yang memuat data
   ========================================================================== */

:root {
  --ins-loader-navy: #02073D;
  --ins-loader-orange: #FCAF42;
  --ins-loader-track: #F0F1F1;
  --ins-loader-text: #4A5876;
}

/* Matikan loader bawaan template bila masih tersisa di halaman lain */
.preloader { display: none !important; }

/* ---------- Splash (A) ---------- */
.ins-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;                 /* tampil hanya jika JavaScript aktif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #FFFFFF;
  transition: opacity .35s ease, visibility .35s ease;
}
.ins-js .ins-splash { display: flex; }
.ins-splash.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.ins-splash__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: ins-loader-pulse 1.8s ease-in-out infinite;
}
.ins-splash__brand img { max-height: 56px; width: auto; }
.ins-splash__name {
  font-family: 'Inter', system-ui, 'Segoe UI', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ins-loader-navy);
}
.ins-splash__bar {
  width: 180px;
  height: 5px;
  border-radius: 999px;
  background: var(--ins-loader-track);
  overflow: hidden;
}
.ins-splash__bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: var(--ins-loader-orange);
  animation: ins-loader-slide 1.2s ease-in-out infinite;
}
.ins-splash__text {
  font-family: 'Inter', system-ui, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--ins-loader-text);
}

/* ---------- Garis progres atas (C) ---------- */
.ins-topbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
  height: 3px;
  width: 0;
  background: var(--ins-loader-orange);
  box-shadow: 0 0 8px var(--ins-loader-orange);
  opacity: 0;
  pointer-events: none;
  transition: width .25s ease, opacity .3s ease;
}
.ins-topbar.is-running { opacity: 1; width: 70%; transition: width 8s cubic-bezier(.1, .7, .2, 1), opacity .2s ease; }
.ins-topbar.is-done { opacity: 0; width: 100%; transition: width .2s ease, opacity .4s ease .2s; }

/* ---------- Kerangka konten (skeleton) ---------- */
.ins-skeleton {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, #ECEEF2 0%, #F7F8FA 50%, #ECEEF2 100%);
  background-size: 600px 100%;
  animation: ins-loader-shimmer 1.4s linear infinite;
  color: transparent;
}

/* ---------- Animasi ---------- */
@keyframes ins-loader-slide   { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes ins-loader-pulse   { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.97); } }
@keyframes ins-loader-shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }

/* Hormati pengaturan "kurangi gerakan" di perangkat pengguna */
@media (prefers-reduced-motion: reduce) {
  .ins-splash__brand,
  .ins-splash__bar span,
  .ins-skeleton { animation: none; }
  .ins-topbar.is-running { transition: opacity .2s ease; }
}