/* Custom CSS tambahan untuk transisi dan efek visual */
.tab-content {
    animation: fadeIn 0.3s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Navigasi Tab Active States */
.nav-btn.active {
    background-color: white;
    color: #4f46e5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.nav-btn:not(.active) {
    color: rgba(255, 255, 255, 0.85);
}

.nav-btn:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Simulasi Button States */
.sim-pill.active-sim {
    border-color: #4f46e5;
    background-color: #e0e7ff;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

/* Animasi khusus untuk visual simulasi sendi */
@keyframes hingeMotion {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(-45deg); }
    100% { transform: rotate(0deg); }
}

@keyframes ballMotion {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(15px, -10px) scale(1.05); }
    66% { transform: translate(-10px, 10px) scale(0.95); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes spinMotion {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(60deg); }
    100% { transform: rotate(0deg); }
}

@keyframes slideMotion {
    0% { transform: translateX(0); }
    50% { transform: translateX(12px); }
    100% { transform: translateX(0); }
}

.anim-engsel {
    animation: hingeMotion 2s infinite ease-in-out;
    transform-origin: top center;
}

.anim-peluru {
    animation: ballMotion 2.5s infinite ease-in-out;
}

.anim-putar {
    animation: spinMotion 2s infinite ease-in-out;
    transform-origin: center;
}

.anim-geser {
    animation: slideMotion 1.5s infinite ease-in-out;
}