/* 0. GLOBAL DEĞİŞKENLER */
:root {
    --bg-deep: #05070a;
    --bg-card: #0d1117;
    --accent: #3b82f6;
    --border: #1e293b;
    --text-dim: #7d8590;
    --text-light: #e6edf3;
    --gold: #ffca28;
}

/* 1. RESET VE SERBEST AKIŞ */
html, body {
    /* Tüm engelleri kaldırıyoruz, sayfa doğal genişliğinde kalsın */
    margin: 0;
    padding: 0;
    background-color: var(--bg-deep);
    min-width: fit-content; /* İçerik ne kadar genişse body o kadar olsun */
}

body {
    color: var(--text-light);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    display: flex;
    flex-direction: column;
}

/* 2. HEADER - SENİNLE BERABER KAYAN YAPI */
.user-navigation { 
    background: var(--bg-card); 
    padding: 10px 20px; 
    border-bottom: 1px solid var(--border); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    
    /* Burası kritik: Ekranın genişliği ne olursa olsun header hep görünür kalır */
    width: 100%;
    min-width: 100%; 
    box-sizing: border-box;
    
    position: sticky;
    left: 0; /* Sağa kaysan bile header'ın sol başı ekrana yapışır */
    top: 0;
    z-index: 1000;
}

/* 3. KONTEYNER (3 Sütunlu Sabit Yapın) */
.container {
    /* Buraya dokunmuyoruz, index.php içindeki genişlik neyse o kalsın */
    padding: 25px 15px;
    box-sizing: border-box;
}

/* 4. RÜTBE RENKLERİ VE LOGO (Eksiksiz) */
.logo { font-weight: 900; font-size: 1.2rem; letter-spacing: -0.5px; text-decoration: none !important; color: #ffffff !important; flex-shrink: 0; }
.logo .dot { color: var(--accent) !important; }
.logo .beta-tag { color: var(--text-dim) !important; font-size: 0.6rem; margin-left: 5px; text-transform: uppercase; }

.kriter-box, .kriter-card { background: var(--bg-card); padding: 15px 20px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 10px; }
.rank-admin { color: #f85149 !important; }   
.rank-mod { color: #3fb950 !important; }     
.rank-plus { color: #f1c40f !important; }    
.rank-user { color: var(--accent) !important; }

/* =========================================
   GECE/GÜNDÜZ MODU EKLENTİLERİ 
========================================= */

/* GÜNDÜZ MODU (Light Mode) PALETİ */
[data-theme="light"] {
    --bg-deep: #f8fafc; /* Ferah kırık beyaz fon */
    --bg-card: #ffffff; /* Tam beyaz kartlar */
    --accent: #2563eb;  /* Mavi vurgunun gündüz hali */
    --border: #e2e8f0;  /* İnce gri çerçeveler */
    --text-dim: #64748b; /* Soluk metinler */
    
    /* Senin orijinal değişkenin: Gündüzleri koyu antrasit gri olacak */
    --text-light: #0f172a; 
}

/* Gündüz modunda logonun siyah/koyu olması için */
[data-theme="light"] .logo { color: #0f172a !important; }

/* Renkler değişirken aniden patlamaması için 0.3 saniyelik yumuşak geçiş */
body, .user-navigation, .kriter-box, .kriter-card, .interaction-box, .profile-card {
    transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

/* 5. MOBİL İÇİN TEK KURAL: KİLİDİ PATLAT */
@media (max-width: 1024px) {
    html, body {
        overflow-x: visible !important; /* Sağa kaydırmaya sonuna kadar izin ver */
        overflow-y: visible !important; /* Aşağı kaydırma kilidini aç */
    }
}

/* =========================================
   GECE/GÜNDÜZ MODU İNATÇI BEYAZ METİN DÜZELTMESİ 
========================================= */

/* Eğer gündüz modundaysak, içine sabit "beyaz" yazılmış tüm önemli kart ve yazıları KOYU yap */
[data-theme="light"] body,
[data-theme="light"] .kriter-box,
[data-theme="light"] .kriter-card,
[data-theme="light"] .kriter-card h3,
[data-theme="light"] .interaction-box,
[data-theme="light"] .profile-card,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] .user-result-card,
[data-theme="light"] .kriter-box a,
[data-theme="light"] .interaction-box a {
    color: var(--text-light) !important;
}

/* Header'daki Arama Barı Gündüz Modu Uyumu */
[data-theme="light"] .main-search-header {
    background-color: var(--bg-deep) !important;
    color: var(--text-light) !important;
    border-color: var(--border) !important;
}

/* Arama barı içine yazılan yazının rengi (placeholder) */
[data-theme="light"] .main-search-header::placeholder {
    color: var(--text-dim) !important;
}

/* Yorum yazma kutularının iç arka planları */
[data-theme="light"] input, 
[data-theme="light"] textarea {
    background-color: var(--bg-deep) !important;
    border-color: var(--border) !important;
}

/* =========================================
   GÜNDÜZ MODU KAPSAMLI ARKA PLAN DÜZELTMELERİ
   (Inline HTML stillerini ezmek için güçlendirilmiş)
========================================= */

/* Popüler, Eğilimler, Tüm Kartlar ve Yıldızlı Kartların arkaplanını ferah beyaza zorla */
[data-theme="light"] .pop-radar,
[data-theme="light"] .trend-box,
[data-theme="light"] .interaction-box,
[data-theme="light"] .kriter-box,
[data-theme="light"] .yildiz-card,
[data-theme="light"] .modal-content {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* Popüler kutusunun içindeki başlık, dropdown arka planları */
[data-theme="light"] .pop-radar div,
[data-theme="light"] .trend-box h3 {
    border-bottom-color: var(--border) !important;
}

[data-theme="light"] select {
    background-color: var(--bg-deep) !important;
    color: var(--text-light) !important;
    border-color: var(--border) !important;
}

/* Satırların ve Modal içindeki alanların arka plan düzeltmesi */
[data-theme="light"] .vs-input {
    background-color: var(--bg-deep) !important;
    color: var(--text-light) !important;
}

/* Popüler listesindeki yazıları koyulaştır */
[data-theme="light"] .pop-radar a div {
    color: var(--text-light) !important;
}

/* FOOTER DÜZELTMELERİ */
[data-theme="light"] footer {
    background-color: #f1f5f9 !important; /* Saf beyaz değil, göze batmayan çok açık bir gri */
    border-top-color: var(--border) !important;
}

[data-theme="light"] .footer-section h4 {
    color: var(--text-light) !important;
}

[data-theme="light"] .footer-bottom p,
[data-theme="light"] .footer-bottom span,
[data-theme="light"] .footer-bottom a {
    color: var(--text-dim) !important;
}

/* Footer içindeki simgelerin Gündüz modunda netleşmesi */
[data-theme="light"] .footer-bottom a[style*="color: #fff;"] {
    color: var(--text-light) !important;
}

/* Footer üst çizgisini düzelt */
[data-theme="light"] .footer-bottom {
    border-top-color: var(--border) !important;
}

/* =========================================
   KART ÜZERİNE GELİNCE (HOVER) OLUŞAN KARARMA DÜZELTMESİ
========================================= */

/* 1. Gece Modu (Dark Mode) Hover - Yazıları yutmayan ferah koyu ton */
.kriter-card:hover,
.yildiz-card:hover {
    background-color: #1c2128 !important; /* Eski kapkara renk yerine şık ve aydınlık bir antrasit */
    border-color: var(--accent) !important;
}

/* 2. Gündüz Modu (Light Mode) Hover - Ferah, zarif ve açık ton */
[data-theme="light"] .kriter-card:hover,
[data-theme="light"] .yildiz-card:hover {
    background-color: #f1f5f9 !important; /* Gündüz modunda çok zarif, hafif bir buz grisi tepkisi */
    border-color: var(--accent) !important;
}

/* Gündüz modunda hover olunca içindeki başlığın rengi siyah kalmaya devam etsin */
[data-theme="light"] .kriter-card:hover h3,
[data-theme="light"] .yildiz-card:hover div {
    color: var(--text-light) !important;
}

/* =========================================
   KRİTERYUM (ALTIN KARTLAR) GÜNDÜZ MODU DÜZELTMESİ
========================================= */

/* Kriteryum sayfasındaki altın kartların arka planını ve yazı rengini ez */
[data-theme="light"] .gold-card {
    background-color: var(--bg-card) !important;
    border-color: rgba(255, 202, 40, 0.5) !important;
}

/* Başlıkları (vs yazan yeri) siyah yap */
[data-theme="light"] .gold-card h2 {
    color: var(--text-light) !important;
}

/* Hover (üzerine gelince) efektinde başlık yine altın sarısı olsun */
[data-theme="light"] .gold-card a:hover h2 {
    color: #f59e0b !important; /* Gündüz modunda sarı daha koyu (amber) olsun ki okunsun */
}

/* O okunmayan yorum (kritik) metnini koyulaştır ve opasiteyi kaldır */
[data-theme="light"] .gold-card .card-content-wrapper div {
    color: var(--text-light) !important;
    opacity: 1 !important; /* Solukluğu kaldır ki net okunsun */
}

/* Uzun yazıları kesen o yarım saydam efekti (fade-out) gündüz moduna uyarla */
[data-theme="light"] .card-content-wrapper.fade-out::after {
    background: linear-gradient(transparent, var(--bg-card)) !important;
}

/* Yıl seçme menüsünün arka planı */
[data-theme="light"] select {
    background-color: var(--bg-card) !important;
    color: #d97706 !important; /* Altın sarısı yerine gündüz okunacak koyu amber */
    border-color: rgba(217, 119, 6, 0.4) !important;
}

/* =========================================
   ARŞİV SAYFASI (GÜNDÜZ MODU) DÜZELTMELERİ
========================================= */

/* Sol Menü ve Sağ İstatistik Kutularının Zeminini Ferahlat */
[data-theme="light"] .archive-nav, 
[data-theme="light"] .archive-stats {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* Sol Menüdeki Yıl (Akordeon) Başlıklarını Aydınlat ve Yazıyı Koyu Yap */
[data-theme="light"] .year-trigger {
    background-color: #f1f5f9 !important; /* Çok hafif bir gri tonu */
    border-color: var(--border) !important;
}
[data-theme="light"] .year-trigger span {
    color: var(--text-light) !important;
}

/* Ortadaki Düello Kartlarının Başlıklarını Siyah Yap */
[data-theme="light"] .archive-card h3 {
    color: var(--text-light) !important;
}

/* 1. OY SAYISI ROZETİ DÜZELTMESİ (Kara Deliği Yok Et) */
[data-theme="light"] .vote-badge {
    background-color: #f1f5f9 !important; /* Gündüz modunda temiz bir rozet */
    border-color: #cbd5e1 !important;
    color: var(--accent) !important;
}

/* 2. DÖNEMİN ODAKLARI ETİKET BULUTU DÜZELTMESİ */
[data-theme="light"] .archive-tag {
    background-color: #f1f5f9 !important; /* Karanlık etiketi ferah beyaz yap */
    border-color: var(--border) !important;
    color: var(--text-light) !important; /* Etiket içindeki yazıyı koyu yap */
}

/* Etiketin üzerine gelindiğindeki şıklık gündüz de korunsun */
[data-theme="light"] .archive-tag:hover {
    background-color: #e2e8f0 !important;
    border-color: var(--accent) !important;
}

/* Sayfalama (Pagination) butonlarının arka planı */
[data-theme="light"] .pg-link {
    background-color: var(--bg-card) !important;
    color: var(--text-light) !important;
    border-color: var(--border) !important;
}

/* =========================================
   PROFİL SAYFASI (GÜNDÜZ MODU) BİO VE MESAJ DÜZELTMELERİ
========================================= */

/* Profil Sayfasındaki Biyo Metnini Okunabilir Yap */
[data-theme="light"] #bio-display {
    color: var(--text-light) !important;
    opacity: 1 !important; /* Gündüz modunda metni netleştir */
}

/* Profil Biyo Düzenleme Formu İçindeki Yazılar */
[data-theme="light"] #bio-form p {
    color: var(--accent) !important;
}

[data-theme="light"] #bio-form textarea,
[data-theme="light"] #bio-form input {
    background-color: var(--bg-deep) !important;
    border-color: var(--border) !important;
    color: var(--text-light) !important;
}

/* Ziyaretçi Defterindeki Mesaj Kutuları */
[data-theme="light"] .messages > div {
    background-color: var(--bg-deep) !important; /* Mesaj arka planını kırık beyaz yap */
    border-color: var(--border) !important;
}

[data-theme="light"] .messages > div > div:nth-child(2) {
    color: var(--text-light) !important; /* Mesajın içeriğini antrasit gri yap */
}

/* Defter Kapalı Uyarı Kutusunu Düzenle */
[data-theme="light"] div[style*="background: rgba(248, 81, 73, 0.05);"] {
    background: rgba(248, 81, 73, 0.1) !important;
    border-color: rgba(248, 81, 73, 0.4) !important;
}
[data-theme="light"] p[style*="color: #f85149;"] {
    opacity: 1 !important;
}

/* =========================================
   REHBER / SSS SAYFASI (GÜNDÜZ MODU) DÜZELTMELERİ
========================================= */

/* Rehber Kutularının (Section) Arka Planını Ferahlat */
[data-theme="light"] .guide-section {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* SSS Akordeon - Sorular (Koyu Yap) ve Çizgiler */
[data-theme="light"] .faq-item {
    border-bottom-color: var(--border) !important;
}
[data-theme="light"] .faq-question {
    color: var(--text-light) !important;
}
/* SSS Cevapları - Opasiteyi hafifletip okunabilir kıl */
[data-theme="light"] .faq-answer {
    color: var(--text-dim) !important; 
}

/* Adım Kutuları - Numaralar ve Başlıklar */
[data-theme="light"] .step-num {
    background-color: #f1f5f9 !important; /* Simsiyah yerine ferah açık gri rozet */
    border-color: #cbd5e1 !important;
    color: var(--accent) !important;
}
[data-theme="light"] .step-text b {
    color: var(--text-light) !important; /* Adım başlıklarını koyu yap */
}

/* Güvenlik Rozetinin (Beta V0.8.4) Gündüz Modu */
[data-theme="light"] .security-badge {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

/* =========================================
   DÜELLO DETAY SAYFASI (GÜNDÜZ MODU) DÜZELTMELERİ
========================================= */

/* 1. Yıldızlı Kritiklerin O İnatçı Siyah Gradientini Kırık Beyaza Çevir */
[data-theme="light"] .comment-box[style*="linear-gradient"] {
    background: linear-gradient(145deg, #ffffff, #f1f5f9) !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.1) !important;
    border-color: var(--accent) !important;
}

/* "KRITERYA. ONAYLI" ibaresindeki o görünmez olan beyaz noktayı koyulaştır */
[data-theme="light"] .comment-box span[style*="color:#fff;"] {
    color: var(--text-light) !important;
}

/* 2. Oylama Butonları (+1 / Taraf Seçme Butonları) */
[data-theme="light"] .btn-vote {
    background-color: var(--bg-card) !important;
    color: var(--text-light) !important;
    border-color: var(--border) !important;
}
[data-theme="light"] .btn-vote:hover {
    background-color: #e2e8f0 !important; /* Gündüz modunda buton tepkisi */
    border-color: var(--accent) !important;
}

/* 3. Yorum Yapma ve Düzenleme Kutuları (Textarea) */
[data-theme="light"] textarea,
[data-theme="light"] .edit-textarea {
    background-color: var(--bg-deep) !important;
    color: var(--text-light) !important;
    border-color: var(--border) !important;
}
[data-theme="light"] textarea:focus,
[data-theme="light"] .edit-textarea:focus {
    border-color: var(--accent) !important;
    background-color: #ffffff !important;
}

/* 4. Alt Cevaplar (Reply) Kutusunun Arka Planı ve Çizgileri */
[data-theme="light"] .reply-container {
    background-color: #f8fafc !important; /* Ana yorumdan bir tık farklı açık ferah gri */
    border-color: var(--border) !important;
}
[data-theme="light"] .reply-container > div {
    border-bottom-color: var(--border) !important;
}

/* 5. Up/Down Oy Rozeti (Vote Pill) */
[data-theme="light"] .vote-pill {
    background-color: var(--bg-deep) !important;
    border-color: var(--border) !important;
}
[data-theme="light"] .vote-pill span {
    color: var(--text-light) !important;
}

/* Yoruma tıklanınca oluşan parlama (Target) efektinin gündüz uyumu */
[data-theme="light"] div:target {
    background-color: #f0f9ff !important; /* Çok hafif buz mavisi parlama */
}