/* GKII Loader — dimuat di <head> agar tampil seketika, sebelum JS/CSS aplikasi siap.
   File eksternal (bukan <style> inline) supaya tetap patuh CSP style-src 'self'. */
#gkii-loader, .gk-screen {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: #f7f8fb; transition: opacity .4s ease, visibility .4s ease;
}
html[data-mode="dark"] #gkii-loader, html[data-mode="dark"] .gk-screen { background: #0f1522; }
#gkii-loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

.gk-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.gk-ring { position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; }
.gk-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gk-track { stroke: #e3e7f0; }
html[data-mode="dark"] .gk-track { stroke: #26304a; }
.gk-spin { animation: gk-spin 1.4s linear infinite; }
.gk-ring img { width: 104px; height: 104px; border-radius: 50%; animation: gk-breathe 2.4s ease-in-out infinite; }
.gk-dots { display: flex; gap: 8px; height: 14px; align-items: center; }
.gk-dots span { width: 8px; height: 8px; border-radius: 50%; animation: gk-dot 1.4s ease-in-out infinite; }
.gk-dots span:nth-child(1) { background: #d23a32; }
.gk-dots span:nth-child(2) { background: #2f8a3e; animation-delay: .15s; }
.gk-dots span:nth-child(3) { background: #1f4fa8; animation-delay: .3s; }
.gk-dots span:nth-child(4) { background: #d8a920; animation-delay: .45s; }
.gk-label { font-size: 14px; font-weight: 600; letter-spacing: .04em; color: #3a4560; }
html[data-mode="dark"] .gk-label { color: #c9d2e6; }
html[lang="en"] .gk-l-id, html:not([lang="en"]) .gk-l-en { display: none; }

/* Versi kecil untuk memuat data di dalam halaman */
.gk-inline { display: flex; justify-content: center; padding: 56px 0; }
.gk-wrap.sm { gap: 14px; }
.gk-wrap.sm .gk-ring { width: 72px; height: 72px; }
.gk-wrap.sm .gk-ring img { width: 52px; height: 52px; }
.gk-wrap.sm .gk-dots { gap: 6px; height: 10px; }
.gk-wrap.sm .gk-dots span { width: 6px; height: 6px; }
.gk-wrap.sm .gk-label { font-size: 13px; color: var(--mute, #626770); }

@keyframes gk-spin { to { transform: rotate(360deg); } }
@keyframes gk-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes gk-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-6px); opacity: 1; } }

/* Pengguna yang mengurangi animasi: tetap bergerak, tapi lambat & lembut */
@media (prefers-reduced-motion: reduce) {
  .gk-spin, .gk-ring img, .gk-dots span { animation-duration: 3s !important; }
}