.tab-content {
    animation: fadeIn 0.3s ease-in-out forwards;
}

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

.nav-btn.active {
    background-color: white;
    color: #047857;
    box-shadow: 0 2px 5px rgba(0,0,0,0.06);
    font-weight: 700;
}

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

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

.huruf-card {
    transition: all 0.2s ease;
}
.huruf-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(4, 120, 87, 0.15);
}
.huruf-card.active-huruf {
    border-color: #0d9488;
    background-color: #f0fdfa;
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.3);
}

.konsonan-btn {
    transition: all 0.2s ease;
}
.konsonan-btn.active-konsonan {
    background-color: #f59e0b;
    color: white;
    border-color: #d97706;
}