/* Tema CSS Değişkenleri */
:root {
    --primary-50: rgb(239 246 255);
    --primary-100: rgb(219 234 254);
    --primary-300: rgb(147 197 253);
    --primary-400: rgb(96 165 250);
    --primary-500: rgb(59 130 246);
    --primary-600: rgb(37 99 235);
    --primary-700: rgb(29 78 216);
}

[data-theme="green"] {
    --primary-50: rgb(240 253 244);
    --primary-100: rgb(220 252 231);
    --primary-300: rgb(134 239 172);
    --primary-400: rgb(74 222 128);
    --primary-500: rgb(34 197 94);
    --primary-600: rgb(22 163 74);
    --primary-700: rgb(21 128 61);
}

[data-theme="purple"] {
    --primary-50: rgb(250 245 255);
    --primary-100: rgb(243 232 255);
    --primary-300: rgb(196 181 253);
    --primary-400: rgb(167 139 250);
    --primary-500: rgb(168 85 247);
    --primary-600: rgb(147 51 234);
    --primary-700: rgb(126 34 206);
}

[data-theme="orange"] {
    --primary-50: rgb(255 247 237);
    --primary-100: rgb(254 237 213);
    --primary-300: rgb(253 186 116);
    --primary-400: rgb(251 146 60);
    --primary-500: rgb(249 115 22);
    --primary-600: rgb(234 88 12);
    --primary-700: rgb(194 65 12);
}

[data-theme="red"] {
    --primary-50: rgb(254 242 242);
    --primary-100: rgb(254 226 226);
    --primary-300: rgb(252 165 165);
    --primary-400: rgb(248 113 113);
    --primary-500: rgb(239 68 68);
    --primary-600: rgb(220 38 38);
    --primary-700: rgb(185 28 28);
}

[data-theme="teal"] {
    --primary-50: rgb(240 253 250);
    --primary-100: rgb(204 251 241);
    --primary-300: rgb(94 234 212);
    --primary-400: rgb(45 212 191);
    --primary-500: rgb(20 184 166);
    --primary-600: rgb(13 148 136);
    --primary-700: rgb(15 118 110);
}

[data-theme="pink"] {
    --primary-50: rgb(253 242 248);
    --primary-100: rgb(252 231 243);
    --primary-300: rgb(244 114 182);
    --primary-400: rgb(240 101 149);
    --primary-500: rgb(236 72 153);
    --primary-600: rgb(219 39 119);
    --primary-700: rgb(190 24 93);
}

/* Tema Sınıfları */
.theme-primary { background-color: var(--primary-500) !important; }
.theme-primary-600 { background-color: var(--primary-600) !important; }
.theme-primary-700 { background-color: var(--primary-700) !important; }
.theme-primary-hover:hover { background-color: var(--primary-600) !important; }
.theme-primary-text { color: var(--primary-600) !important; }
.theme-border-color { border-color: var(--primary-600) !important; }

/* Timer Tema */
.timer-theme { 
    background-color: var(--primary-50) !important; 
    color: var(--primary-700) !important; 
    border: 1px solid var(--primary-100) !important;
}

/* Radio Button */
.theme-radio {
    accent-color: var(--primary-600) !important;
    color: var(--primary-600) !important;
}

.theme-radio:focus {
    outline: none !important;
    box-shadow: none !important;
    --tw-ring-shadow: none !important;
}

.theme-radio:checked {
    background-color: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
}

/* Seçili Şık Stilleri */
.option-background-full {
    background-color: transparent;
    transition: all 0.2s ease;
}

.option-item.selected {
    background-color: var(--primary-50) !important;
}

.dark .option-item.selected {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

.option-item.selected .option-letter {
    background-color: var(--primary-600) !important;
    color: white !important;
}

.dark .option-item.selected .option-letter {
    background-color: var(--primary-500) !important;
    color: white !important;
}

/* Scroll engelleme */
.no-scroll {
    overflow: hidden !important;
}

/* Dark Mode Tema Renkleri */
.dark .theme-primary-600 { background-color: var(--primary-500) !important; }
.dark .theme-primary-700 { background-color: var(--primary-600) !important; }
.dark .theme-primary-hover:hover { background-color: var(--primary-500) !important; }
.dark .theme-primary-text { color: var(--primary-400) !important; }
.dark .theme-border-color { border-color: var(--primary-500) !important; }

/* Büyük Font */
.large-font { font-size: 1.125rem !important; }
.large-font h1 { font-size: 2rem !important; }
.large-font h2 { font-size: 1.75rem !important; }
.large-font h3 { font-size: 1.5rem !important; }

/* Animasyon Azaltma */
.reduce-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* Global transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Quiz card hover efektleri */
.quiz-card {transition: all 0.3s ease;}
.quiz-card:hover {transform: translateY(-2px);box-shadow: 0 10px 25px rgba(0,0,0,0.1);}

/* Class cards */
.class-card {transition: box-shadow 0.3s ease;}
.class-card:hover {box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);}

/* Loading spinner */
.spinner {
    border: 3px solid #f3f4f6;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive navigation */
@media (max-width: 768px) {
    .mobile-menu {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    .mobile-menu.active {
        transform: translateX(0);
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}



/* Tab System CSS */
.tab-button {border-bottom-color: transparent;color: #6B7280;}
.tab-button:hover {color: #3B82F6;border-bottom-color: #E5E7EB;}
.tab-button.active {color: #3B82F6;border-bottom-color: #3B82F6;}
.dark .tab-button {color: #9CA3AF;}
.dark .tab-button:hover {color: #60A5FA;border-bottom-color: #374151;}
.dark .tab-button.active {color: #60A5FA;border-bottom-color: #60A5FA;}
.tab-panel {animation: fadeIn 0.3s ease-in-out;}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar gizle */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Scroll butonları */
#scroll-left, #scroll-right {
    transition: opacity 0.3s ease;
}

#tab-container {
    scroll-behavior: smooth;
}

/* Alert animations */
.alert {
    animation: slideInDown 0.3s ease-out;
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Sonuç Sayfası Özel Stiller */
.selected-correct {background-color: var(--primary-50) !important;}
.dark .selected-correct {background-color: rgba(59, 130, 246, 0.1) !important;}
.selected-correct .option-letter {background-color: var(--primary-600) !important;color: white !important;}
.dark .selected-correct .option-letter {background-color: var(--primary-500) !important;color: white !important;}
.selected-wrong {background-color: rgba(239, 68, 68, 0.05) !important;}
.dark .selected-wrong {background-color: rgba(239, 68, 68, 0.1) !important;}
.selected-wrong .option-letter {background-color: rgb(220, 38, 38) !important;color: white !important;}