/* ============================================================================
 * Tatakas — UNIFIED loading pattern (single visual language).
 *
 * Dipakai oleh: upload.astro, drafts.astro, dashboard.astro, dan halaman w/*
 * (index/cashflow/reports/invoices/journals/journal). Satu pola:
 *   spinner Tatakas (GIF) + teks status + elapsed counter + hint opsional.
 *
 * Kontrak visual:
 *   .tk-loading         → kolom tengah (spinner di atas, teks di bawah)
 *   .tk-spinner         → spinner GIF 88×50 (asset: /loading-tatakas.gif)
 *   .tk-spinner-sm      → ukuran kompak 64×36 (di dalam kartu)
 *   .tk-spinner-lg      → ukuran besar 140×79 (modal proses)
 *   Semua ukuran memakai rasio 16:9 (rasio asli GIF) supaya GIF tidak
 *   terpotong/berongga di dalam kotak persegi. Diperbesar 2026-10-12.
 *   .tk-loading-text    → teks status (aria-live polite)
 *   .tk-loading-elapsed → counter detik monospace
 *
 * Aset spinner: `loading-tatakas.gif` (16:9, 12fps, 8s loop; digenerate oleh
 * scripts/gif-tools/finalize-spinner-asset.mjs dari docs/asset/loading-tatakas.gif).
 *   - Elemen dibiarkan KOSONG (tanpa markup baru) → background-image contain.
 *   - GIF SELALU beranimasi: override `prefers-reduced-motion` (yang dulu
 *     menukar ke PNG statis) SENGAJA DIHAPUS pada 2026-10-11 atas keputusan user.
 *   - `loading-tatakas-static.png` (frame 0) tetap digenerate untuk keperluan
 *     lain, tetapi tidak lagi dipakai sebagai fallback loading.
 *   - Latar GIF: OK di semua konteks Tatakas (semua latar terang,
 *     termasuk header ink di landing). Tidak ada dark surface untuk spinner.
 * ========================================================================== */

.tk-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 18px 0;
}

.tk-spinner {
    width: 88px;
    height: 50px; /* 16:9 — rasio asli GIF (160×90) */
    border: 0;
    border-radius: 0;
    background: url("/loading-tatakas.gif") center / contain no-repeat;
    animation: none;
    flex: 0 0 auto;
}

.tk-spinner-sm {
    width: 64px;
    height: 36px; /* 16:9 */
    border-width: 0;
}

.tk-spinner-lg {
    width: 140px;
    height: 79px; /* 16:9 */
    border-width: 0;
}

.tk-loading-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-ink, #12203a);
    line-height: 1.45;
}

.tk-loading-elapsed {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-ink, #12203a);
    opacity: 0.55;
}

.tk-loading-hint {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-ink, #12203a);
    opacity: 0.7;
    max-width: 44ch;
}

/* CATATAN: override GIF -> PNG statis SENGAJA DIHAPUS (keputusan user,
 * 2026-10-11) supaya spinner GIF selalu beranimasi di semua perangkat —
 * termasuk perangkat yang mengaktifkan "reduce motion". */