/* Tailwind CSS via CDN - Fallback styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

/* Custom styles untuk aplikasi */
.gradient-bg-blue {
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
}

.gradient-bg-green {
    background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
}

.btn-primary {
    @apply bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out;
}

.btn-secondary {
    @apply bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out;
}

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

.form-input-error {
    @apply border-red-500;
}

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

.nav-link {
    @apply text-sm text-gray-500 hover:text-gray-700 transition duration-150 ease-in-out;
}

/* Progress Steps */
.progress-step {
    @apply flex flex-col items-center relative;
}

.progress-step-circle {
    @apply w-10 h-10 rounded-full flex items-center justify-center mb-2 relative z-10;
}

.progress-step-completed {
    @apply bg-blue-600 text-white;
}

.progress-step-current {
    @apply bg-gray-300 border-2 border-gray-400;
}

.progress-step-pending {
    @apply bg-gray-200 border-2 border-gray-300;
}

.progress-line {
    @apply absolute top-5 h-0.5 bg-gray-200;
}

.progress-line-active {
    @apply bg-blue-600;
}

/* Status Badge */
.status-badge {
    @apply text-xs px-3 py-1 rounded-full font-medium;
}

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

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

.status-badge-info {
    @apply bg-blue-100 text-blue-800;
}

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

/* Landing Page Styles */
.navbar-gradient {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}

.hero-gradient {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.logo-circle {
    @apply w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center shadow-lg;
}

.logo-inner {
    @apply w-12 h-12 bg-white rounded-full flex items-center justify-center;
}

.logo-emblem {
    @apply w-8 h-8 bg-gradient-to-br from-yellow-400 via-green-500 to-blue-600 rounded-full flex items-center justify-center;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Mobile menu animation */
.mobile-menu-enter {
    @apply opacity-0 transform -translate-y-2;
}

.mobile-menu-enter-active {
    @apply opacity-100 transform translate-y-0 transition-all duration-200;
}

.mobile-menu-exit {
    @apply opacity-100 transform translate-y-0;
}

.mobile-menu-exit-active {
    @apply opacity-0 transform -translate-y-2 transition-all duration-200;
}