/* Kuran Sayılar Sayfası Özel Stilleri */

/* Sayı Kartları */
.number-card {
    @apply bg-white dark:bg-gray-700 rounded-lg p-4 border-2 border-transparent 
           transition-all duration-300 cursor-pointer shadow-sm;
}

.number-card:hover {
    @apply border-blue-500 shadow-lg transform scale-105;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
}

.number-card.single-occurrence {
    @apply bg-gradient-to-br from-yellow-50 to-orange-50 
           dark:from-yellow-900/20 dark:to-orange-900/20;
}

.number-card.single-occurrence:hover {
    @apply border-yellow-500;
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.15);
}

.number-card.divisible-by-19 {
    @apply bg-gradient-to-br from-green-50 to-emerald-50 
           dark:from-green-900/20 dark:to-emerald-900/20;
}

.number-card.divisible-by-19:hover {
    @apply border-green-500;
    box-shadow: 0 10px 25px rgba(34, 197, 94, 0.15);
}

.number-card .number {
    @apply text-2xl font-bold text-gray-800 dark:text-white mb-2;
}

.number-card .info {
    @apply text-sm text-gray-600 dark:text-gray-400;
}

.number-card .badge {
    @apply inline-block px-2 py-1 text-xs font-semibold rounded-full mt-2;
}

.badge.single {
    @apply bg-yellow-200 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-200;
}

.badge.multiple {
    @apply bg-blue-200 text-blue-800 dark:bg-blue-800 dark:text-blue-200;
}

.badge.divisible {
    @apply bg-green-200 text-green-800 dark:bg-green-800 dark:text-green-200;
}

/* Filtre Butonları */
.filter-btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
}

.filter-btn:hover {
    @apply transform scale-105;
}

.filter-btn.active {
    @apply bg-indigo-600 text-white shadow-lg;
}

.filter-btn:not(.active) {
    @apply bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300;
}

.filter-btn:not(.active):hover {
    @apply bg-gray-300 dark:bg-gray-500;
}

/* Kesir Kartları */
.fraction-card {
    @apply transition-all duration-300 cursor-pointer;
}

.fraction-card:hover {
    @apply transform scale-105 shadow-lg;
    box-shadow: 0 8px 20px rgba(251, 146, 60, 0.15);
}

.fraction-card:active {
    @apply transform scale-95;
}

/* Modal Stilleri */
#numberModal {
    backdrop-filter: blur(5px);
}

#numberModal .bg-white {
    @apply shadow-2xl;
}

/* Animasyonlar */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.pulse-animation {
    animation: pulse 2s infinite;
}

/* Chart Container */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

/* Responsive Ayarları */
@media (max-width: 768px) {
    .number-card {
        @apply p-3;
    }
    
    .number-card .number {
        @apply text-xl;
    }
    
    .filter-btn {
        @apply px-3 py-2 text-sm;
    }
}

/* Dark Mode Özel Ayarları */
@media (prefers-color-scheme: dark) {
    .number-card {
        @apply border-gray-600;
    }
    
    .number-card:hover {
        @apply border-blue-400;
    }
}

/* Loading Animation */
.loading {
    @apply opacity-50 pointer-events-none;
}

.loading::after {
    content: '';
    @apply absolute inset-0 bg-gray-100 dark:bg-gray-700 rounded-lg;
    animation: pulse 1.5s infinite;
}

/* Highlight Effects */
.highlight-19 {
    @apply bg-gradient-to-r from-blue-500 to-purple-600 text-white px-2 py-1 rounded font-bold;
}

.math-expression {
    @apply bg-gray-100 dark:bg-gray-700 px-3 py-2 rounded-lg font-mono text-lg;
}

/* Stat Cards */
.stat-card {
    @apply bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg transition-all duration-300;
}

.stat-card:hover {
    @apply shadow-xl transform translateY(-2px);
}

.stat-number {
    @apply text-3xl font-bold text-blue-600 dark:text-blue-400;
}

.stat-label {
    @apply text-gray-600 dark:text-gray-400 text-sm font-medium;
}

/* Special Effects */
.golden-ratio {
    background: linear-gradient(45deg, #FFD700, #FFA500, #FF8C00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sacred-number {
    @apply relative;
}

.sacred-number::before {
    content: '✨';
    @apply absolute -left-6 top-0 text-yellow-500;
    animation: pulse 2s infinite;
}