/* ============================================================
   Dompet Keluarga — Loader halaman (logo beranimasi)
   Tampil sejak halaman mulai digambar, lalu memudar setelah siap
   (assets/loader.js). Tanpa JavaScript tetap hilang sendiri.
   Kelas lt-* berasal dari SVG logo (app/logo.php).
   ============================================================ */

.loader-halaman {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--bg-loader, #f5f6fb);
    pointer-events: none; /* tidak pernah menghalangi klik */
    /* Pengaman tanpa JS: memudar sendiri */
    animation: loader-pudar 0.35s ease 1.4s forwards;
}
@media (prefers-color-scheme: dark) {
    .loader-halaman { background: var(--bg-loader-gelap, #0b1020); }
}
.loader-halaman.selesai {
    animation: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.loader-halaman.pindah {
    animation: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
}
@keyframes loader-pudar { to { opacity: 0; visibility: hidden; } }

.loader-isi { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.loader-isi .logo-tanda { width: 112px; height: auto; overflow: visible; filter: drop-shadow(0 14px 18px rgba(0, 53, 150, 0.18)); }
.loader-titik { display: flex; gap: 6px; }
.loader-titik i { width: 8px; height: 8px; border-radius: 50%; background: #0055ea; animation: loader-titik 1s ease-in-out infinite; }
.loader-titik i:nth-child(2) { background: #00ae79; animation-delay: 0.15s; }
.loader-titik i:nth-child(3) { background: #f7287a; animation-delay: 0.3s; }
@keyframes loader-titik { 0%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-6px); opacity: 1; } }

/* Animasi logo: keluarga melompat bergantian, dompet memantul, kilau berkedip */
.logo-gerak .lt-org,
.logo-gerak .lt-dompet,
.logo-gerak .lt-kilau { transform-box: fill-box; }
.logo-gerak .lt-org { transform-origin: 50% 100%; animation: lt-lompat 1.2s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
.logo-gerak .lt-org-2 { animation-delay: 0.15s; }
.logo-gerak .lt-org-3 { animation-delay: 0.3s; }
.logo-gerak .lt-dompet { transform-origin: 50% 100%; animation: lt-pantul 1.2s ease-in-out infinite; }
.logo-gerak .lt-kilau { transform-origin: 100% 100%; animation: lt-kilau 1.2s ease-in-out infinite; }
@keyframes lt-lompat {
    0%, 55%, 100% { transform: translateY(0); }
    25% { transform: translateY(-16%); }
    40% { transform: translateY(0) scaleY(0.94); }
}
@keyframes lt-pantul {
    0%, 100% { transform: scale(1, 1); }
    45% { transform: scale(1.03, 0.96); }
    60% { transform: scale(0.98, 1.03); }
}
@keyframes lt-kilau { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } }

@media (prefers-reduced-motion: reduce) {
    .logo-gerak .lt-org, .logo-gerak .lt-dompet, .logo-gerak .lt-kilau, .loader-titik i { animation: none; }
}