/* ================================================================
   FERPEDIA — POPUP LOADING (komponen bersama Login & Register)
   Natural Navy & White. DOM dibuat oleh assets/js/loading-popup.js
   ================================================================ */
.fp-lp {
  --lp-navy: #163B5C; --lp-deep: #102A43; --lp-blue: #1677E8; --lp-soft: #EAF2F8;
  --lp-text: #172B3A; --lp-muted: #647789; --lp-line: #DFE7EF; --lp-ok: #1F8A55;
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; box-sizing: border-box;
  background: rgba(16, 42, 67, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.fp-lp.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease; }

.fp-lp-card {
  width: min(100%, 340px); box-sizing: border-box; text-align: center;
  background: #fff; border: 1px solid var(--lp-line); border-radius: 28px;
  padding: 30px 24px 24px;
  box-shadow: 0 30px 60px -24px rgba(16, 42, 67, .55), 0 2px 6px rgba(16, 42, 67, .06);
  transform: translateY(10px) scale(.96); transition: transform .3s cubic-bezier(.22, .8, .24, 1);
}
.fp-lp.is-open .fp-lp-card { transform: none; }

.fp-lp-ring { position: relative; width: 88px; height: 88px; margin: 0 auto 18px; }
.fp-lp-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fp-lp-track { fill: none; stroke: var(--lp-soft); stroke-width: 5; }
.fp-lp-arc {
  fill: none; stroke: var(--lp-navy); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 60 200; transform-origin: 50% 50%;
  animation: fp-lp-spin 1.1s linear infinite;
}
.fp-lp-logo {
  position: absolute; inset: 0; margin: auto; width: 42px; height: 42px; object-fit: contain; border-radius: 12px;
}
.fp-lp-check { opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1.4, .36, 1); }
.fp-lp-check circle { fill: var(--lp-ok); }
.fp-lp-check path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }

.fp-lp.is-success .fp-lp-arc, .fp-lp.is-success .fp-lp-track, .fp-lp.is-success .fp-lp-logo { opacity: 0; transition: opacity .2s ease; }
.fp-lp.is-success .fp-lp-check { opacity: 1; transform: none; }
.fp-lp.is-success .fp-lp-check path { animation: fp-lp-draw .45s .2s ease forwards; }

.fp-lp-title { margin: 0 0 6px; font-size: 1.02rem; font-weight: 800; color: var(--lp-deep); letter-spacing: -.01em; }
.fp-lp-text { min-height: 20px; margin: 0; font-size: .86rem; font-weight: 600; color: var(--lp-muted); transition: opacity .2s ease, transform .2s ease; }
.fp-lp-text.is-swap { opacity: 0; transform: translateY(4px); }
.fp-lp.is-success .fp-lp-title { color: var(--lp-ok); }

.fp-lp-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.fp-lp-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--lp-line); transition: width .3s ease, background-color .3s ease; }
.fp-lp-dots i.on { background: var(--lp-navy); }
.fp-lp-dots i.cur { width: 18px; background: var(--lp-blue); }
.fp-lp.is-success .fp-lp-dots { visibility: hidden; }

@keyframes fp-lp-spin { to { transform: rotate(360deg); } }
@keyframes fp-lp-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fp-lp, .fp-lp-card, .fp-lp-text, .fp-lp-dots i, .fp-lp-check { transition: none; }
  .fp-lp-arc { animation-duration: 2.4s; }
}