:root { --bg-primary: #fff; --bg-secondary: #f9f9f9; --card-bg: #fff; --text-primary: #333; --text-secondary: #666; --accent-color: #2E7D32; --accent-hover: #1B5E20; --border-color: #eee; --wheel-bg: #f9f9f9; }

/* Karanlık mod renkleri */
body.dark-mode,
[data-theme="dark"] {
    --bg-primary: #222;
    --bg-secondary: #333;
    --card-bg: #2d2d2d;
    --text-primary: #f0f0f0;
    --text-secondary: #ccc;
    --accent-color: #4CAF50;
    --accent-hover: #66BB6A;
    --border-color: #444;
    --wheel-bg: #2d2d2d;
}

/* Karanlık mod için kart stilleri */
body.dark-mode .card,
[data-theme="dark"] .card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .card h3,
[data-theme="dark"] .card h3 {
    color: var(--text-primary);
}

body.dark-mode .card p,
[data-theme="dark"] .card p {
    color: var(--text-secondary);
}

body.dark-mode .card-icon,
[data-theme="dark"] .card-icon {
    background: linear-gradient(135deg, #388E3C 0%, #4CAF50 100%);
}

/* Karanlık mod için input stilleri */
body.dark-mode .input-add input,
body.dark-mode .search-box input,
[data-theme="dark"] .input-add input,
[data-theme="dark"] .search-box input {
    background-color: #444;
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-mode .input-list,
body.dark-mode .input-list {
    background-color: #444;
    border-color: var(--border-color);
}

body.dark-mode #name-list li,
[data-theme="dark"] #name-list li {
    background-color: #444;
    border-color: #555;
    color: #f0f0f0;
}

body.dark-mode .input-actions button,
body.dark-mode .input-actions button {
    background-color: #444;
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-mode .inputs-header h2,
body.dark-mode .inputs-section .input-list-title,
[data-theme="dark"] .inputs-header h2,
[data-theme="dark"] .inputs-section .input-list-title {
    color: var(--text-primary);
}

/* Karanlık mod için kazanan göstergesi */
body.dark-mode .winner-display,
[data-theme="dark"] .winner-display {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--accent-color);
}

body.dark-mode .winner-indicator,
[data-theme="dark"] .winner-indicator {
    background-color: var(--bg-secondary);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* Karanlık mod için özellikler kartları */
body.dark-mode .feature-card,
body.dark-mode .feature-card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .feature-card h3,
body.dark-mode .feature-card h3 {
    color: var(--text-primary);
}

body.dark-mode .feature-card p,
body.dark-mode .feature-card p,
body.dark-mode .feature-card ul li,
body.dark-mode .feature-card ul li {
    color: var(--text-secondary);
}

/* Karanlık mod için genel sayfalar */
body.dark-mode .container,
body.dark-mode .inputs-section,
[data-theme="dark"] .container,
[data-theme="dark"] .inputs-section {
    background-color: var(--card-bg);
    color: var(--text-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    border-color: var(--border-color);
}

/* Karanlık mod için kaydırma çubuğu */
body.dark-mode .input-list::-webkit-scrollbar-track,
body.dark-mode .input-list::-webkit-scrollbar-track {
    background: #444;
}

body.dark-mode .input-list::-webkit-scrollbar-thumb,
body.dark-mode .input-list::-webkit-scrollbar-thumb {
    background: var(--accent-color);
}

/* Footer linkler için karanlık mod */
body.dark-mode .main-footer,
body.dark-mode .main-footer {
    background-color: var(--bg-secondary);
}

body.dark-mode .footer-links a,
body.dark-mode .footer-links a {
    color: var(--text-primary);
}

body.dark-mode .copyright,
body.dark-mode .copyright {
    color: var(--text-secondary);
}

/* SEO linkleri için karanlık mod */
body.dark-mode .seo-links a,
body.dark-mode .seo-links a {
    background-color: var(--card-bg);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

/* Nasıl kullanılır bölümü için karanlık mod */
body.dark-mode .how-to-use,
body.dark-mode .how-to-use {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

body.dark-mode .how-to-use .section-header h2,
body.dark-mode .how-to-use .section-header h2 {
    color: var(--text-primary);
}

body.dark-mode .how-to-use .section-header p,
body.dark-mode .how-to-use .section-header p {
    color: var(--text-secondary);
}

body.dark-mode .feature-card,
body.dark-mode .step-card,
body.dark-mode .use-case-card,
body.dark-mode .benefit-card,
body.dark-mode .feature-card,
body.dark-mode .step-card,
body.dark-mode .use-case-card,
body.dark-mode .benefit-card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

body.dark-mode .feature-icon,
body.dark-mode .step-icon,
body.dark-mode .feature-icon,
body.dark-mode .step-icon {
    color: #4CAF50;
}

body.dark-mode .feature-card h3,
body.dark-mode .step-card h3,
body.dark-mode .use-case-card h3,
body.dark-mode .benefit-card h3,
body.dark-mode .feature-card h3,
body.dark-mode .step-card h3,
body.dark-mode .use-case-card h3,
body.dark-mode .benefit-card h3 {
    color: var(--text-primary);
}

body.dark-mode .feature-card p,
body.dark-mode .step-card p,
body.dark-mode .use-case-card p,
body.dark-mode .benefit-card p,
body.dark-mode .feature-card p,
body.dark-mode .step-card p,
body.dark-mode .use-case-card p,
body.dark-mode .benefit-card p {
    color: var(--text-secondary);
}

body.dark-mode .benefit-card ul li,
body.dark-mode .benefit-card ul li {
    color: var(--text-secondary);
}