/* Gerak dan hiasan: ilustrasi persona, adegan jalur belajar, hiasan hero. Semua gerak berhenti bila prefers-reduced-motion. */
.u .ilus { display: block; width: 100%; height: auto; overflow: visible; }
.u .ilus * { transform-box: fill-box; transform-origin: center; }

/* Hero */
.hero { position: relative; }
.hero-hiasan-wadah { position: absolute; right: 2%; bottom: 8px; width: min(300px, 32vw); pointer-events: none; z-index: 0; }
.hero-hiasan-wadah .ilus { width: 100%; height: auto; }
.hero .wadah { position: relative; z-index: 1; }
@media (max-width: 760px) { .hero-hiasan-wadah { width: 150px; opacity: .55; right: 0; } }

/* Persona */
.u .grid.grid-persona, .u #untuk-siapa .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.u .kartu-persona { align-items: flex-start; transition: transform .25s ease, box-shadow .25s ease; }
.u .persona-ilus { width: 112px; height: 112px; margin: -4px 0 6px; background: var(--biru-muda); border-radius: 50%; padding: 6px; transition: transform .3s ease; }
.u .kartu-persona:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(18,48,79,.14); }
.u .kartu-persona:hover .persona-ilus { transform: rotate(-4deg) scale(1.06); }
.u .kartu-persona:nth-child(3n+2) .persona-ilus { background: #FFF1D6; }
.u .kartu-persona:nth-child(3n) .persona-ilus { background: #DDF3E6; }

/* Jalur */
.jalur-kartu { position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.jalur-kartu:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(18,48,79,.14); }
.jalur-ilus { width: 104px; height: 104px; margin: 0 0 8px; }
.jalur-ilus .ilus { width: 100%; height: 100%; overflow: visible; }
.jalur-ilus .ilus * { transform-box: fill-box; transform-origin: center; }
.jalur-kartu:hover .jalur-ilus { animation: fun-lompat .6s ease; }

/* Kartu lain */
.u .kartu { transition: transform .25s ease, box-shadow .25s ease; }
.u .kartu.kutipan:hover, .u .kartu-harga:hover { transform: translateY(-4px); }
.u .stat { transition: transform .25s ease; }
.u .stat:hover { transform: translateY(-4px) rotate(-1deg); }

@keyframes fun-naik { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes fun-naik2 { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes fun-goyang { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes fun-putar { to { transform: rotate(360deg); } }
@keyframes fun-kedip { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes fun-lompat { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-12px) scale(1.06); } 60% { transform: translateY(0) scale(.97); } }

@media (prefers-reduced-motion: no-preference) {
  .ilus .g-bob { animation: fun-naik 3.2s ease-in-out infinite; }
  .ilus .g-bob2 { animation: fun-naik2 4.2s ease-in-out infinite; }
  .ilus .g-goyang { animation: fun-goyang 3.6s ease-in-out infinite; }
  .ilus .g-putar { animation: fun-putar 9s linear infinite; }
  .ilus .g-kedip { animation: fun-kedip 5s ease-in-out infinite; }
  .kartu-persona:nth-child(even) .ilus .g-bob, .jalur-kartu:nth-child(even) .ilus .g-bob { animation-delay: -1.2s; }
  .kartu-persona:nth-child(3n) .ilus .g-goyang { animation-delay: -1.8s; }
  .hero-hiasan-wadah .g-bob { animation-duration: 4s; }
}
@media (prefers-reduced-motion: reduce) {
  .u .kartu, .jalur-kartu, .u .stat, .u .persona-ilus { transition: none; }
}