/* =====================================================================
   EFEK & ANIMASI DEKORATIF (diadaptasi dari tema Eduact)
   - .fx-btn      : tombol dengan "kurva miring" yang melebar saat disorot
   - .fx-kilau    : kilatan cahaya menyapu gambar saat disorot
   - .fx-orn-*    : ornamen mengambang / berputar
   - .fx-lencana  : teks melingkar berputar (SVG textPath, tanpa pustaka)
   - .fx-putar    : tombol putar video dengan gelombang riak
   - .fx-pantul   : gambar memantul pelan
   - .fx-parallax : latar parallax (Jarallax) + lapisan warna
   Semua efek berhenti bila pengunjung memilih "kurangi animasi",
   dan bisa dimatikan lewat Pengaturan > Tampilan (kelas .fx-mati di <body>).
   ===================================================================== */

/* ---------- Keyframes ---------- */
@keyframes fx-putar     { to { transform: rotate(360deg); } }
@keyframes fx-apung-y   { 0%, 100% { transform: translateY(-12px); } 50% { transform: translateY(6px); } }
@keyframes fx-apung-x   { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(10px); } }
@keyframes fx-zoom-redup{ 0%, 100% { transform: scale(.88); opacity: .7; } 50% { transform: scale(1); opacity: 1; } }
@keyframes fx-pantul    { 0% { transform: translateY(0); } 100% { transform: translateY(-14px); } }
@keyframes fx-kilau     { 100% { left: 125%; } }
@keyframes fx-riak {
    0%   { box-shadow: 0 0 0 0 rgba(29, 78, 216, .45); }
    70%  { box-shadow: 0 0 0 26px rgba(29, 78, 216, 0); }
    100% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0); }
}

/* ---------- 1. Tombol: kurva miring (Eduact .eduact-btn__curve) ---------- */
.fx-btn { position: relative; overflow: hidden; isolation: isolate; }
.fx-btn::before {
    content: ""; position: absolute; top: 0; right: -15px; z-index: -1;
    width: 33px; height: 100%;
    background: currentColor; opacity: .14;
    transform: skewX(-22deg);
    transition: right .5s ease, width .5s ease, transform .5s ease, opacity .5s ease;
    pointer-events: none;
}
.fx-btn:hover::before, .fx-btn:focus-visible::before {
    right: 0; width: 100%; transform: skewX(0deg); opacity: .1;
}

/* ---------- 2. Kilau pada gambar ---------- */
.fx-kilau { position: relative; overflow: hidden; }
.fx-kilau::after {
    content: ""; position: absolute; top: 0; left: -75%; z-index: 3;
    width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
}
.fx-kilau:hover::after { animation: fx-kilau .85s; }

/* ---------- 3. Ornamen ---------- */
.fx-wadah { position: relative; }
.fx-orn { position: absolute; pointer-events: none; z-index: 0; }
.fx-orn-titik {               /* kisi titik */
    width: 120px; height: 120px; opacity: .55;
    background-image: radial-gradient(#3b82f6 2px, transparent 2.5px);
    background-size: 16px 16px;
    animation: fx-apung-y 6s ease-in-out infinite;
}
.fx-orn-cincin {              /* cincin putus-putus berputar */
    width: 150px; height: 150px; border-radius: 9999px;
    border: 2px dashed rgba(29, 78, 216, .35);
    animation: fx-putar 24s linear infinite;
}
.fx-orn-bulat {               /* lingkaran berdenyut */
    width: 70px; height: 70px; border-radius: 9999px;
    background: linear-gradient(135deg, #fde68a, #f59e0b); opacity: .85;
    animation: fx-zoom-redup 5s ease-in-out infinite;
}
.fx-orn-bintang {             /* bintang kecil mengambang */
    width: 26px; height: 26px; color: #f59e0b;
    animation: fx-apung-x 5s ease-in-out infinite;
}
.fx-orn-bintang svg { width: 100%; height: 100%; display: block; }
.fx-depan { position: relative; z-index: 1; }
@media (max-width: 639px) { .fx-orn-titik, .fx-orn-cincin { transform: scale(.7); } .fx-orn-cincin { width: 110px; height: 110px; } }

/* ---------- 4. Teks melingkar berputar ---------- */
.fx-lencana {
    position: absolute; z-index: 2; width: 128px; height: 128px;
    border-radius: 9999px; background: #fff;
    box-shadow: 0 15px 35px -12px rgba(17, 24, 39, .35);
    display: flex; align-items: center; justify-content: center;
}
.fx-lencana svg.fx-lencana-teks {
    position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px);
    animation: fx-putar 18s linear infinite;
}
.fx-lencana text {
    font-size: 11.5px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase;
    fill: #1d4ed8; font-family: inherit;
}
.fx-lencana-tengah {
    width: 54px; height: 54px; border-radius: 9999px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: #eff6ff;
}
.fx-lencana-tengah img { width: 80%; height: 80%; object-fit: contain; }
.dark .fx-lencana { background: #1f2937; }
.dark .fx-lencana text { fill: #93c5fd; }
.dark .fx-lencana-tengah { background: #111827; }
@media (max-width: 639px) { .fx-lencana { width: 96px; height: 96px; } .fx-lencana text { font-size: 9px; letter-spacing: 1.8px; } .fx-lencana-tengah { width: 40px; height: 40px; } }

/* ---------- 5. Tombol putar video + riak ---------- */
.fx-putar {
    display: inline-flex; align-items: center; gap: .75rem;
    font-weight: 600; font-size: .9rem; color: #111827;
}
.fx-putar-ikon {
    position: relative; flex: 0 0 auto;
    width: 52px; height: 52px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #1d4ed8; color: #fff;
    animation: fx-riak 2s infinite;
    transition: transform .3s ease;
}
.fx-putar:hover .fx-putar-ikon { transform: scale(1.08); }
.fx-putar-ikon svg { width: 18px; height: 18px; margin-left: 3px; }
.dark .fx-putar { color: #fff; }

/* ---------- 6. Gambar memantul pelan ---------- */
.fx-pantul { animation: fx-pantul 3.5s ease-in-out infinite alternate; }

/* ---------- 7. Parallax (Jarallax) ---------- */
.jarallax { position: relative; z-index: 0; }
.jarallax > .jarallax-img {
    position: absolute; object-fit: cover; top: 0; left: 0;
    width: 100%; height: 100%; z-index: -1;
}
.fx-parallax-lapis { position: absolute; inset: 0; z-index: 0; background: rgba(30, 58, 138, .86); }
.dark .fx-parallax-lapis { background: rgba(17, 24, 39, .88); }

/* ---------- 8. Odometer (angka bergulir) ---------- */
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
    font-family: inherit !important; line-height: 1.1; vertical-align: baseline;
}
.odometer .odometer-digit .odometer-value { text-align: center; }

/* ---------- Matikan efek ---------- */
@media (prefers-reduced-motion: reduce) {
    .fx-orn, .fx-lencana svg.fx-lencana-teks, .fx-putar-ikon, .fx-pantul { animation: none !important; }
    .fx-kilau:hover::after { animation: none; }
    .fx-btn::before { transition: none; }
}
.fx-mati .fx-orn, .fx-mati .fx-lencana { display: none !important; }
.fx-mati .fx-pantul, .fx-mati .fx-putar-ikon, .fx-mati .fx-kilau:hover::after { animation: none !important; }
.fx-mati .fx-btn::before { display: none; }