/* ===================================================== */
/* AUTH-DARK.CSS – Sadece Dark Mode                      */
/* Yeni CSS Yapısı ve Değişkenlere Uyumlu Renk Paleti    */
/* ===================================================== */

/* --- Dark Mode Renk Değişkenleri (Değişkenleri Geçersiz Kılma) --- */
html[data-theme="dark"] {
    /* Genel Arkaplan ve Metin Renkleri */
    --background-light: #0d1117; /* Ana Arkaplan (GitHub Dark) */
    --card-bg: #161b22;         /* Kart/Kapsayıcı Arkaplanı */
    --text-color: #c9d1d9;      /* Ana Metin Rengi */
    --secondary-text: #8b949e;  /* İkincil Metin Rengi */
    
    /* Input ve Kenarlık Renkleri */
    --input-bg: #21262d;        /* Input Arkaplanı */
    --border-color: #30363d;    /* Kenarlık Rengi */
    
    /* Buton/Link Renkleri (Primary korundu) */
    --primary-color: #58a6ff;   /* Mavi tonu biraz açıldı (Okunurluk) */
    --primary-hover: #448fcc;
    
    /* Gölge */
    --shadow-base: 0 4px 18px rgba(0, 0, 0, 0.5); /* Gölge daha belirgin */
    --shadow-hover: 0 6px 25px rgba(0, 0, 0, 0.6);
}

/* --- Temel HTML/Body Değişiklikleri --- */
html[data-theme="dark"] body {
    background: var(--background-light);
    color: var(--text-color);
}

/* --- Ana Kutu (Auth Formu) --- */
html[data-theme="dark"] .auth-container {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-base);
}
html[data-theme="dark"] .auth-container:hover {
    box-shadow: var(--shadow-hover);
}

/* --- Başlık --- */
html[data-theme="dark"] .auth-title { 
    color: #ffffff; /* Beyaz renk, daha iyi kontrast */
}

/* --- Input Grubu --- */
html[data-theme="dark"] .input-group label { 
    color: var(--secondary-text); 
}

html[data-theme="dark"] .input-group input,
html[data-theme="dark"] .input-group select {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

/* Placeholder Rengi */
html[data-theme="dark"] .input-group input::placeholder { 
    color: #6e7681; 
}

/* Select Input Ok Simgesi (SVG Base64) */
html[data-theme="dark"] .input-group select {
    /* Ok rengini açık griye (c9d1d9) ayarlayan SVG */
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="%238b949e" d="M7 10l5 5 5-5z"/%3E%3C/svg%3E');
}

/* --- Ayrıştırıcılar ve Linkler --- */
html[data-theme="dark"] .social-box p {
    color: var(--secondary-text);
}
/* "Veya" çizgi rengini karanlık moda uyumla */
html[data-theme="dark"] .social-box p::before,
html[data-theme="dark"] .social-box p::after {
    background: #30363d;
}

html[data-theme="dark"] .split-links a {
    color: var(--primary-color);
}

/* --- Yardımcı Kutular (Sonuç/Hata/Timer) --- */
html[data-theme="dark"] #resultBox.success { background: #1f3922; color: #7ad07a; border-color: #384e3a; }
html[data-theme="dark"] #resultBox.error  { background: #3d1c1c; color: #ff6060; border-color: #552727; }
html[data-theme="dark"] #debugOtp       { background: #3c3016; color: #ffeb95; border-color: #574c2e; }
html[data-theme="dark"] #timerBox       { color: #ff91c4; background: #2f1d24; border-color: #4b363e; }


/* --- Sabit Öğeler (Theme Toggle, Dil Seçici, Sosyal Butonlar) --- */
html[data-theme="dark"] .theme-toggle-btn,
html[data-theme="dark"] .lang-selector,
html[data-theme="dark"] .lang-dropdown,
html[data-theme="dark"] .social-btn {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
    box-shadow: none; /* Dark mode'da sabit elementlerde aşırı gölgeyi kaldırma */
}

/* Hover Efektleri */
html[data-theme="dark"] .theme-toggle-btn:hover,
html[data-theme="dark"] .lang-selector:hover,
html[data-theme="dark"] .social-btn:hover,
html[data-theme="dark"] .lang-item:hover { 
    background: #30363d; /* Daha koyu bir hover rengi */
    border-color: #40464f;
}

/* Ok Rengi */
html[data-theme="dark"] .lang-selector .arrow {
    border-color: var(--secondary-text); /* Ok rengini değiştirdik */
}