/* JagoUMKM — loader halaman & proses (overlay + progress bar). Dipakai di situs publik dan panel. */
.jl-loader {
  position: fixed; inset: 0; z-index: 20000;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .94) 0%, rgba(240, 249, 243, .92) 45%, rgba(225, 242, 231, .9) 100%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.jl-loader.is-active { opacity: 1; visibility: visible; }
/* Pengaman: loader awal hilang sendiri bila JavaScript gagal dimuat. */
.jl-loader.is-initial { animation: jl-autohide .35s ease 15s forwards; }

.jl-loader__box { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; transform: translateY(8px); transition: transform .35s ease; }
.jl-loader.is-active .jl-loader__box { transform: translateY(0); }

.jl-loader__ring { position: relative; width: 136px; height: 136px; display: grid; place-items: center; }
/* Cincin gradasi warna logo yang berputar. */
.jl-loader__ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(8, 116, 67, 0) 0%, #087443 30%, #22a55a 55%, #f6b21b 78%, #f97316 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  animation: jl-spin 1.05s linear infinite;
}
/* Lingkaran putih tempat ikon. */
.jl-loader__ring::after {
  content: ""; position: absolute; inset: 13px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 14px 34px rgba(8, 116, 67, .2), inset 0 0 0 1px rgba(8, 116, 67, .07);
}
.jl-loader__pulse {
  position: absolute; inset: 13px; border-radius: 50%;
  border: 2px solid rgba(34, 165, 90, .45);
  animation: jl-pulse 1.8s ease-out infinite;
}
.jl-loader__pulse.is-late { animation-delay: .9s; border-color: rgba(246, 178, 27, .5); }
.jl-loader__icon {
  position: relative; z-index: 1; width: 74px; height: 74px; object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(8, 116, 67, .22));
  animation: jl-float 1.8s ease-in-out infinite;
}

/* Tiga batang grafik naik-turun (motif "naik kelas"). */
.jl-loader__bars { display: flex; align-items: flex-end; gap: 5px; height: 22px; }
.jl-loader__bars span {
  width: 7px; border-radius: 3px;
  background: linear-gradient(180deg, #f6b21b, #f97316);
  animation: jl-bar 1.1s ease-in-out infinite;
}
.jl-loader__bars span:nth-child(2) { background: linear-gradient(180deg, #34c06a, #087443); animation-delay: .15s; }
.jl-loader__bars span:nth-child(3) { background: linear-gradient(180deg, #22a55a, #0b5c34); animation-delay: .3s; }

.jl-loader__text { font-weight: 700; font-size: 1rem; color: #0b5c34; letter-spacing: .01em; text-align: center; }
.jl-loader__dots span { display: inline-block; animation: jl-dot 1.2s ease-in-out infinite; }
.jl-loader__dots span:nth-child(2) { animation-delay: .15s; }
.jl-loader__dots span:nth-child(3) { animation-delay: .3s; }
.jl-loader__tagline { margin-top: -.55rem; font-size: .78rem; color: #5f7a68; letter-spacing: .04em; text-align: center; }

/* Progress bar tipis di atas layar. */
.jl-progress {
  position: fixed; top: 0; left: 0; z-index: 20001;
  height: 3px; width: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, #087443, #22a55a 40%, #f6b21b 75%, #f97316);
  box-shadow: 0 0 10px rgba(246, 178, 27, .55);
  border-radius: 0 3px 3px 0;
}
.jl-progress.is-running { opacity: 1; width: 85%; transition: width 9s cubic-bezier(.08, .82, .17, 1), opacity .2s; }
.jl-progress.is-done { opacity: 0; width: 100%; transition: width .25s ease, opacity .4s ease .2s; }

@keyframes jl-spin { to { transform: rotate(360deg); } }
@keyframes jl-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.04); } }
@keyframes jl-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes jl-bar { 0%, 100% { height: 7px; } 50% { height: 22px; } }
@keyframes jl-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes jl-autohide { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .jl-loader__ring::before { animation-duration: 2.5s; }
  .jl-loader__icon, .jl-loader__pulse, .jl-loader__bars span, .jl-loader__dots span { animation: none; }
}
@media print { .jl-loader, .jl-progress { display: none !important; } }