/* Custom styles untuk LMS Lite */
.btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200;
}

.btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
}

.btn-secondary {
    @apply btn bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
}

.btn-success {
    @apply btn bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-outline {
    @apply btn border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500;
}

.card {
    @apply bg-white overflow-hidden shadow rounded-lg;
}

.card-header {
    @apply px-4 py-5 sm:px-6 border-b border-gray-200;
}

.card-body {
    @apply px-4 py-5 sm:p-6;
}

.form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-error {
    @apply text-red-600 text-sm mt-1;
}

.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
    @apply badge bg-primary-100 text-primary-800;
}

.badge-success {
    @apply badge bg-green-100 text-green-800;
}

.badge-warning {
    @apply badge bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply badge bg-red-100 text-red-800;
}

.badge-gray {
    @apply badge bg-gray-100 text-gray-800;
}

/* Loading spinner */
.spinner {
    @apply animate-spin rounded-full h-4 w-4 border-b-2 border-primary-600;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Animations */
@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float 6s ease-in-out infinite;
    animation-delay: 2s;
}

.animate-float-slow {
    animation: float 8s ease-in-out infinite;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.animate-fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

.hover-lift {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

.animate-bounce-slow {
    animation: bounce 2s infinite;
}

.animate-pulse-slow {
    animation: pulse 3s infinite;
}

.hover-glow {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.cta-bounce {
    transition: transform 0.2s ease;
}

.cta-bounce:hover {
    transform: scale(1.05);
}

/* Ripple Effect */
@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
}