@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Özel Stil Sınıfları */
@layer base {
    html {
        @apply scroll-smooth;
    }
    
    body {
        @apply bg-gray-900 text-gray-100;
    }
}

@layer components {
    /* Butonlar */
    .btn {
        @apply inline-flex items-center justify-center px-6 py-3 font-medium rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900;
    }
    
    .btn-primary {
        @apply bg-primary text-white hover:bg-red-600 focus:ring-primary;
    }
    
    .btn-secondary {
        @apply bg-secondary text-white hover:bg-teal-500 focus:ring-secondary;
    }
    
    .btn-outline {
        @apply border-2 border-gray-600 text-gray-300 hover:bg-gray-800 hover:border-gray-500;
    }
    
    .btn-gradient {
        @apply bg-gradient-to-r from-primary to-secondary text-white hover:shadow-lg transform hover:scale-105;
    }
    
    /* Kartlar */
    .card {
        @apply bg-gray-800 rounded-xl shadow-lg border border-gray-700 overflow-hidden;
    }
    
    .card-hover {
        @apply hover:shadow-2xl hover:border-gray-600 transform hover:-translate-y-1 transition-all duration-300;
    }
    
    /* Form Elemanları */
    .form-input {
        @apply w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-gray-100 placeholder-gray-500 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary focus:ring-opacity-50;
    }
    
    .form-label {
        @apply block text-sm font-medium text-gray-300 mb-2;
    }
    
    /* Gradient Arka Planlar */
    .gradient-bg {
        @apply bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900;
    }
    
    .hero-gradient {
        background: linear-gradient(135deg, #1A1A2E 0%, #0F0F1E 100%);
    }
    
    /* Animasyonlar */
    .animate-float {
        animation: float 6s ease-in-out infinite;
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
    }
    
    /* Glow Efektleri */
    .glow {
        @apply shadow-lg;
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
    }
    
    .glow-secondary {
        box-shadow: 0 0 20px rgba(78, 205, 196, 0.5);
    }
    
    /* İstatistik Kartları */
    .stat-card {
        @apply bg-gradient-to-br from-gray-800 to-gray-900 p-6 rounded-xl border border-gray-700;
    }
    
    /* Navigasyon */
    .nav-link {
        @apply text-gray-300 hover:text-white transition-colors duration-200 font-medium;
    }
    
    .nav-link-active {
        @apply text-primary font-semibold;
    }
    
    /* Müzik Player */
    .music-player {
        @apply bg-gray-800 rounded-lg p-4 border border-gray-700;
    }
    
    .progress-bar {
        @apply w-full h-2 bg-gray-700 rounded-full overflow-hidden;
    }
    
    .progress-fill {
        @apply h-full bg-gradient-to-r from-primary to-secondary transition-all duration-300;
    }
}

/* Özel Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-900;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-700 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-600;
}

/* Karanlık Tema Geçişleri */
.dark-transition {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Grafik Stilleri */
.chart-container {
    @apply bg-gray-800 rounded-xl p-6 border border-gray-700;
}

/* Tablo Stilleri */
.data-table {
    @apply w-full text-left;
}

.data-table thead {
    @apply bg-gray-800 border-b border-gray-700;
}

.data-table th {
    @apply px-6 py-4 text-xs font-medium text-gray-400 uppercase tracking-wider;
}

.data-table td {
    @apply px-6 py-4 text-sm text-gray-300;
}

.data-table tbody tr {
    @apply border-b border-gray-800 hover:bg-gray-800/50 transition-colors;
}

/* Badge'ler */
.badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
}

.badge-success {
    @apply bg-green-900/50 text-green-400 border border-green-800;
}

.badge-warning {
    @apply bg-yellow-900/50 text-yellow-400 border border-yellow-800;
}

.badge-danger {
    @apply bg-red-900/50 text-red-400 border border-red-800;
}

.badge-info {
    @apply bg-blue-900/50 text-blue-400 border border-blue-800;
}

/* Loading Spinner */
.spinner {
    @apply inline-block w-8 h-8 border-4 border-gray-700 border-t-primary rounded-full animate-spin;
}

/* Backdrop Blur */
.backdrop-blur-dark {
    backdrop-filter: blur(10px);
    background-color: rgba(17, 24, 39, 0.8);
}

/* Dashboard Modern Styles */
.btn-hero {
    @apply px-8 py-4 rounded-xl font-semibold text-white transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl;
}

.btn-hero-outline {
    @apply px-8 py-4 rounded-xl font-semibold border-2 transition-all duration-300 transform hover:scale-105;
}

.glass-card {
    @apply backdrop-blur-md bg-white/5 border border-white/10 rounded-xl p-4 transition-all duration-300 hover:bg-white/10;
}

.accelerator-card {
    @apply relative bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-2xl overflow-hidden transition-all duration-300 hover:border-primary/50;
}

.accelerator-icon {
    @apply relative w-16 h-16 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center;
}

.modern-card {
    @apply bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-2xl overflow-hidden transition-all duration-300 hover:border-gray-600/50;
}

.card-header {
    @apply flex items-center justify-between p-6 border-b border-gray-700/50;
}

.card-title {
    @apply text-xl font-semibold text-white flex items-center;
}

.btn-small {
    @apply text-sm text-primary hover:text-secondary transition-colors;
}

.metric-card {
    @apply flex items-center space-x-4 p-4 bg-gray-900/50 rounded-xl border border-gray-700/30 transition-all duration-300 hover:border-gray-600/50 hover:bg-gray-800/50;
}

.metric-icon {
    @apply w-12 h-12 rounded-lg flex items-center justify-center text-white text-lg;
}

.metric-value {
    @apply text-2xl font-bold text-white;
}

.metric-label {
    @apply text-sm text-gray-400;
}

.metric-change {
    @apply text-xs font-medium;
}

.metric-change.positive {
    @apply text-green-400;
}

.metric-change.negative {
    @apply text-red-400;
}

.song-item {
    @apply p-4 bg-gray-900/30 rounded-xl border border-gray-700/30 transition-all duration-300 hover:bg-gray-800/50 hover:border-gray-600/50;
}

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

.status-yayinda {
    @apply bg-green-500/20 text-green-400 border border-green-500/30;
}

.status-beklemede {
    @apply bg-yellow-500/20 text-yellow-400 border border-yellow-500/30;
}

.status-reddedildi {
    @apply bg-red-500/20 text-red-400 border border-red-500/30;
}

.empty-state {
    @apply text-center py-12;
}

.empty-icon {
    @apply w-16 h-16 bg-gray-700/50 rounded-full flex items-center justify-center text-3xl text-gray-500 mx-auto mb-4;
}

.empty-title {
    @apply text-xl font-semibold text-white mb-2;
}

.empty-description {
    @apply text-gray-400 mb-6;
}

.balance-card {
    @apply relative bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl overflow-hidden border border-primary/30;
}

.balance-bg {
    @apply absolute inset-0 bg-gradient-to-br from-primary/10 to-secondary/5;
}

.balance-icon {
    @apply w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center text-white;
}

.btn-balance {
    @apply w-full bg-white/20 backdrop-blur-sm text-white font-semibold py-3 rounded-lg transition-all duration-300 hover:bg-white/30;
}

.btn-balance-disabled {
    @apply w-full bg-gray-600/30 text-gray-400 font-semibold py-3 rounded-lg cursor-not-allowed;
}

.quick-action {
    @apply flex items-center space-x-4 p-4 bg-gray-900/30 rounded-xl border border-gray-700/30 transition-all duration-300 hover:bg-gray-800/50 hover:border-gray-600/50 group;
}

.quick-action-icon {
    @apply w-10 h-10 rounded-lg flex items-center justify-center;
}

.quick-action-title {
    @apply font-medium text-white group-hover:text-primary transition-colors;
}

.quick-action-desc {
    @apply text-sm text-gray-400;
}

.achievement {
    @apply flex items-center space-x-3;
}

.achievement-icon {
    @apply w-10 h-10 rounded-lg border-2 border-gray-600 flex items-center justify-center text-gray-500 transition-all duration-300;
}

.achievement-icon.achieved {
    @apply border-yellow-400 bg-yellow-400/20 text-yellow-400;
}

.achievement-title {
    @apply font-medium text-white;
}

.achievement-desc {
    @apply text-sm text-gray-400;
}