/* CSS Custom Properties (Değişkenler) */

/* Koyu Tema (Varsayılan) */
.dark-theme {
    /* Ana Renkler */
    --bg-primary: #0a191e;      /* Koyu Safir Yeşili */
    --bg-secondary: #122b2a;    /* Koyu Orman Yeşili */
    --card-bg: #103737;         /* Petrol Yeşili */
    --card-bg-alt: #122b2a;     /* Koyu Orman Yeşili */
    --border-color: #2a4c4b;    /* Koyu Camgöbeği */
    
    /* Metin Renkleri */
    --text-primary: #e6f2f2;    /* Nane Beyazı */
    --text-secondary: #a0c4c4;  /* Soluk Aqua */
    --text-disabled: #607d7c;   /* Gri-Yeşil */
    
    /* Accent ve Brand Renkleri */
    --accent-color: #2dd4bf;    /* Parlak Turkuaz */
    --accent-hover: #14b8a6;    /* Turkuaz */
    --accent-color-alpha: rgba(45, 212, 191, 0.2);
    
    /* Form Stilleri */
    --input-bg: #1a1a2e;
    --input-border: #2a2a3e;
    
    /* Durum Renkleri */
    --success-color: #10b981;
    --success-hover: #059669;
    --warning-color: #f59e0b;
    --warning-hover: #d97706;
    --danger-color: #ef4444;
    --danger-hover: #dc2626;
    
    /* Gölgeler */
    --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-large: 0 8px 25px rgba(0, 0, 0, 0.5);
    
    /* Gradient'ler */
    --gradient-primary: linear-gradient(135deg, var(--accent-color) 0%, #8b5cf6 100%);
    --gradient-success: linear-gradient(135deg, var(--success-color) 0%, #34d399 100%);
}

/* Açık Tema */
.light-theme {
    /* Ana Renkler */
    --bg-primary: #f0fdfa;      /* Nane Kremi */
    --bg-secondary: #e6f7f5;    /* Açık Nane */
    --card-bg: #ffffff;
    --card-bg-alt: #e6f7f5;     /* Açık Nane */
    --border-color: #cce8e4;    /* Soluk Yeşil Mavi */
    
    /* Metin Renkleri */
    --text-primary: #0d1c1a;    /* Koyu Deniz Yeşili */
    --text-secondary: #4a7c74;  /* Orta Ton Yeşil */
    --text-disabled: #8aa6a2;   /* Gri Nane */
    
    /* Accent ve Brand Renkleri */
    --accent-color: #2dd4bf;    /* Parlak Turkuaz */
    --accent-hover: #14b8a6;    /* Turkuaz */
    --accent-color-alpha: rgba(45, 212, 191, 0.1);
    
    /* Form Stilleri */
    --input-bg: #ffffff;
    --input-border: #e2e8f0;
    
    /* Durum Renkleri */
    --success-color: #10b981;
    --success-hover: #059669;
    --warning-color: #f59e0b;
    --warning-hover: #d97706;
    --danger-color: #ef4444;
    --danger-hover: #dc2626;
    
    /* Gölgeler */
    --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-large: 0 8px 25px rgba(0, 0, 0, 0.2);
    
    /* Gradient'ler */
    --gradient-primary: linear-gradient(135deg, var(--accent-color) 0%, #8b5cf6 100%);
    --gradient-success: linear-gradient(135deg, var(--success-color) 0%, #34d399 100%);
}

/* ==================================================== */
/*  Açık Tema İçin Metin Renk Güncellemeleri (Okunabilirlik)  */
/* ==================================================== */
/* Kart ve modal içindeki başlık, paragraf vb. elemanların
   varsayılan metin rengini açık temada koyu tona çevirir.  */
.light-theme .card h1,
.light-theme .card h2,
.light-theme .card h3,
.light-theme .card h4,
.light-theme .card h5,
.light-theme .card h6,
.light-theme .card p,
.light-theme .card span,
.light-theme .card li,
.light-theme .card label,
.light-theme .modal-content h1,
.light-theme .modal-content h2,
.light-theme .modal-content h3,
.light-theme .modal-content h4,
.light-theme .modal-content h5,
.light-theme .modal-content h6,
.light-theme .modal-content p,
.light-theme .modal-content span,
.light-theme .modal-content li,
.light-theme .modal-content label {
    color: var(--text-primary) !important;
}

.light-theme .card .text-secondary,
.light-theme .modal-content .text-secondary {
    color: var(--text-secondary) !important;
}

/* Tema Geçiş Animasyonları */
* {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* Google Button için özel stil (açık temada) */
.light-theme .google-btn {
    background: #ffffff;
    color: #333333;
    border-color: var(--border-color);
}

.light-theme .google-btn:hover {
    background: #f8f9fa;
    box-shadow: var(--shadow-medium);
}

/* Açık temada loading spinner */
.light-theme .loading-spinner {
    border-color: var(--border-color);
    border-top-color: var(--accent-color);
}

/* Açık temada progress bar */
.light-theme .progress-fill {
    background: linear-gradient(90deg, var(--success-color) 0%, var(--accent-color) 100%);
}

/* Seçim stilleri */
::selection {
    background-color: var(--accent-color);
    color: white;
}

::-moz-selection {
    background-color: var(--accent-color);
    color: white;
}

/* Scrollbar Stilleri (Webkit) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-secondary);
}

/* Focus Stilleri */
input:focus,
select:focus,
button:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Erişilebilirlik: Reduce Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* High Contrast Mode Desteği */
@media (prefers-contrast: high) {
    .dark-theme {
        --border-color: #4a4a6a;
        --text-secondary: #e0e0ff;
    }
    
    .light-theme {
        --border-color: #a0a0a0;
        --text-secondary: #2a2a2a;
    }
}

/* Print Stilleri */
@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    
    .loading-screen,
    .user-actions,
    .timer-controls {
        display: none !important;
    }
}

/* Dark Mode için özel medya query */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
    }
}