/* ===== ANIMASI GLOBAL ===== */

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide In Animation */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Bounce Animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Shake Animation */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Rotate Animation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ===== ANIMASI SIDEBAR ===== */
.sidebar {
    animation: slideInLeft 0.5s ease-out;
}

.sidebar .nav-link {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.sidebar .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.sidebar .nav-link:hover::before {
    left: 100%;
}

.sidebar .nav-link:hover {
    transform: translateX(5px);
    background: rgba(255,255,255,0.1);
}

/* ===== ANIMASI CARD ===== */
.card {
    animation: fadeIn 0.6s ease-out;
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.stat-card {
    animation: fadeIn 0.8s ease-out;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 30px rgba(16, 185, 129, 0.3);
}

/* ===== ANIMASI TOMBOL ===== */
.btn {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn:active {
    transform: translateY(0);
}

/* ===== ANIMASI FORM ===== */
.form-control {
    transition: all 0.3s ease;
}

.form-control:focus {
    transform: scale(1.02);
    box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.25);
}

.form-group {
    animation: fadeIn 0.5s ease-out;
}

/* ===== ANIMASI TABLE ===== */
.table tbody tr {
    animation: fadeIn 0.4s ease-out;
    transition: all 0.3s ease;
}

.table tbody tr:hover {
    transform: scale(1.01);
    background: rgba(16, 185, 129, 0.05);
}

/* ===== ANIMASI LOADING ===== */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(16, 185, 129, 0.3);
    border-radius: 50%;
    border-top-color: #10b981;
    animation: rotate 1s ease-in-out infinite;
}

/* ===== ANIMASI RFID SCANNER ===== */
.rfid-scanner {
    animation: pulse 2s infinite;
}

.rfid-scanner.scanning {
    animation: pulse 0.5s infinite;
}

/* ===== ANIMASI NOTIFIKASI ===== */
.alert {
    animation: slideInRight 0.5s ease-out;
}

.alert.show {
    animation: bounce 0.6s ease-out;
}

/* ===== ANIMASI MODAL ===== */
.modal {
    animation: fadeIn 0.3s ease-out;
}

.modal-dialog {
    animation: slideInRight 0.4s ease-out;
}

/* ===== ANIMASI DROPDOWN ===== */
.dropdown-menu {
    animation: fadeIn 0.3s ease-out;
}

.dropdown-item {
    transition: all 0.3s ease;
}

.dropdown-item:hover {
    transform: translateX(5px);
    background: rgba(16, 185, 129, 0.1);
}

/* ===== ANIMASI BADGE ===== */
.badge {
    transition: all 0.3s ease;
}

.badge:hover {
    transform: scale(1.1);
}

/* ===== ANIMASI ICON ===== */
.fas, .far, .fab {
    transition: all 0.3s ease;
}

.btn:hover .fas,
.btn:hover .far,
.btn:hover .fab {
    transform: scale(1.2);
}

/* ===== ANIMASI PROGRESS BAR ===== */
.progress-bar {
    transition: width 0.6s ease;
}

/* ===== ANIMASI TOOLTIP ===== */
.tooltip {
    animation: fadeIn 0.3s ease-out;
}

/* ===== ANIMASI PAGINATION ===== */
.pagination .page-link {
    transition: all 0.3s ease;
}

.pagination .page-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ===== ANIMASI RESPONSIVE ===== */
@media (max-width: 768px) {
    .sidebar {
        animation: slideInLeft 0.3s ease-out;
    }
    
    .card {
        animation: fadeIn 0.4s ease-out;
    }
}

/* ===== ANIMASI DELAY ===== */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }

/* ===== ANIMASI UTILITY CLASSES ===== */
.animate-fadeIn { animation: fadeIn 0.6s ease-out; }
.animate-slideInLeft { animation: slideInLeft 0.5s ease-out; }
.animate-slideInRight { animation: slideInRight 0.5s ease-out; }
.animate-bounce { animation: bounce 0.6s ease-out; }
.animate-pulse { animation: pulse 2s infinite; }
.animate-shake { animation: shake 0.5s ease-out; }
.animate-rotate { animation: rotate 1s linear infinite; }

/* ===== ANIMASI HOVER EFFECTS ===== */
.hover-lift:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.hover-rotate:hover {
    transform: rotate(5deg);
    transition: all 0.3s ease;
}

/* ===== ANIMASI LOADING SPINNER ===== */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(16, 185, 129, 0.3);
    border-top: 4px solid #10b981;
    border-radius: 50%;
    animation: rotate 1s linear infinite;
}

/* ===== ANIMASI SUCCESS CHECKMARK ===== */
@keyframes checkmark {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.checkmark {
    animation: checkmark 0.6s ease-out;
}

/* ===== ANIMASI ERROR X ===== */
@keyframes errorX {
    0% {
        transform: scale(0) rotate(0deg);
    }
    50% {
        transform: scale(1.2) rotate(180deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}

.error-x {
    animation: errorX 0.6s ease-out;
}