/* Gerak UI buatan sendiri (jalan A, keputusan pemilik 5 Nov 2026). Satu berkas kecil bersama, tanpa pustaka.
   Aturan: gerak sekali saja saat elemen tampil (kelas .gerak-main dipasang gerak.js sekali per elemen per kunci), bukan berulang,
   kecuali penanda memuat. Tanpa JS atau dengan kurangi gerak, semua elemen langsung tampil di keadaan akhirnya yang benar. */

/* Cincin progres: lingkaran pathLength 100, offset akhir ditulis inline (100 - persen). */
.g-cincin { flex: none; display: block; }
.g-cincin .g-alas { stroke: var(--pf-garis, rgba(20, 48, 77, .12)); }
.g-cincin .g-isi { stroke: var(--biru, #1E90E6); stroke-linecap: round; }
.g-cincin.selesai .g-isi { stroke: var(--hijau, #1E8E5A); }
.g-cincin text { font-weight: 700; fill: currentColor; }
.gerak-main.g-cincin .g-isi { animation: g-cincin 1.1s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes g-cincin { from { stroke-dashoffset: 100; } }

/* Kilau sekali lewat di kartu sertifikat dan badge yang sudah didapat. */
[data-gerak="kilau"] { position: relative; overflow: hidden; }
[data-gerak="kilau"]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%); transform: translateX(-120%); opacity: 0; }
.gerak-main[data-gerak="kilau"]::after { animation: g-kilau 1.2s .25s ease-out both; }
html[data-tema="gelap"] [data-gerak="kilau"]::after { background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); }
@keyframes g-kilau { from { transform: translateX(-120%); opacity: 1; } to { transform: translateX(120%); opacity: 1; } }

/* Penanda memuat (skeleton): satu-satunya gerak berulang, hanya selama data dimuat. */
.g-rangka { display: grid; gap: 10px; padding: 4px 0; }
.g-rangka[hidden] { display: none; }
.g-rangka i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--g-r1, #E7EDF4) 25%, var(--g-r2, #F5F8FB) 50%, var(--g-r1, #E7EDF4) 75%); background-size: 200% 100%; animation: g-muat 1.4s linear infinite; }
.g-rangka i.besar { height: 32px; width: 40%; }
.g-rangka i.judul { height: 16px; width: 55%; }
.g-rangka i.pendek { width: 70%; }
.g-rangka i.kotak { height: 84px; border-radius: 12px; }
html[data-tema="gelap"] .g-rangka i { --g-r1: #1C2635; --g-r2: #263247; }
@keyframes g-muat { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .gerak-main.g-cincin .g-isi, .gerak-main[data-gerak="kilau"]::after { animation: none !important; }
  .g-rangka i { animation: none; }
}
html.kurangi-gerak .gerak-main.g-cincin .g-isi, html.kurangi-gerak .gerak-main[data-gerak="kilau"]::after, html.kurangi-gerak .g-rangka i { animation: none !important; }