/* ==========================================================================
   BASE.CSS - CSS Değişkenleri, Reset ve Temel Stiller
   ========================================================================== */

/* Temel stil ayarları - Açık Tema */
:root {
    --primary-color: #2e7d32; /* Koyu yeşil - eğitim teması için */
    --secondary-color: #1b5e20; /* Daha koyu yeşil */
    --accent-color: #ffeb3b; /* Canlı sarı - vurgu rengi */
    --accent-hover: #fdd835; /* Sarı hover rengi */
    /* FALLBACK DEĞERLER (color-mix desteklenmeyen tarayıcılar için) */
    --light-bg: #f8f8f8; /* Fallback açık zemin */
    --border-color: #e0e0e0; /* Fallback kenarlık */
    
    /* TÜRETİLMİŞ DEĞİŞKENLER - tema rengine bağlı (modern tarayıcılar) */
    --light-bg: color-mix(in srgb, var(--primary-color) 10%, var(--white)); /* Tema'ya bağlı açık zemin */
    --border-color: color-mix(in srgb, var(--primary-color) 22%, var(--white)); /* Tema'ya bağlı kenarlık */
    
    --dark-bg: #1b5e20; /* Koyu arka plan (tema ile override edilebilir) */
    --text-color: #263238; /* Koyu metin rengi */
    --light-text: #546e7a; /* Açık metin rengi */
    --success-color: #4CAF50; /* Başarı rengi */
    --warning-color: #FF9800; /* Uyarı rengi */
    --danger-color: #F44336; /* Tehlike rengi */
    --white: #ffffff; /* Beyaz */
    --black: #000000; /* Siyah */
    --header-bg: var(--primary-color); /* Header = tema rengi */
    --header-text: #ffffff; /* Header metin rengi */
    --footer-bg: var(--secondary-color); /* Footer = ikincil tema rengi */
    --button-bg: #ffeb3b; /* Buton arka plan rengi */
    --button-text: #263238; /* Buton metin rengi */
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --transition: all 0.3s cubic-bezier(.25,.8,.25,1);

    /* Türetilmiş birincil tonlar (tema değişince otomatik güncellenir) */
    --primary-5:  color-mix(in srgb, var(--primary-color) 5%,  var(--white));
    --primary-10: color-mix(in srgb, var(--primary-color) 10%, var(--white));
    --primary-15: color-mix(in srgb, var(--primary-color) 15%, var(--white));
    --primary-20: color-mix(in srgb, var(--primary-color) 20%, var(--white));

    /* Tema geçiş efektleri */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* TEMA RENK ALTERNATİFLERİ - tema seçimi için */
.blue-theme {
    --primary-color: #1976d2;
    --secondary-color: #1565c0;
    /* Türetilmiş değişkenler mavi temaya göre güncellenir */
    --light-bg: color-mix(in srgb, var(--primary-color) 10%, var(--white));
    --border-color: color-mix(in srgb, var(--primary-color) 22%, var(--white));
    --primary-5:  color-mix(in srgb, var(--primary-color) 5%,  var(--white));
    --primary-10: color-mix(in srgb, var(--primary-color) 10%, var(--white));
    --primary-15: color-mix(in srgb, var(--primary-color) 15%, var(--white));
    --primary-20: color-mix(in srgb, var(--primary-color) 20%, var(--white));
}

.purple-theme {
    --primary-color: #7b1fa2;
    --secondary-color: #6a1b9a;
    /* Türetilmiş değişkenler mor temaya göre güncellenir */
    --light-bg: color-mix(in srgb, var(--primary-color) 10%, var(--white));
    --border-color: color-mix(in srgb, var(--primary-color) 22%, var(--white));
    --primary-5:  color-mix(in srgb, var(--primary-color) 5%,  var(--white));
    --primary-10: color-mix(in srgb, var(--primary-color) 10%, var(--white));
    --primary-15: color-mix(in srgb, var(--primary-color) 15%, var(--white));
    --primary-20: color-mix(in srgb, var(--primary-color) 20%, var(--white));
}

.orange-theme {
    --primary-color: #f57c00;
    --secondary-color: #ef6c00;
    /* Türetilmiş değişkenler turuncu temaya göre güncellenir */
    --light-bg: color-mix(in srgb, var(--primary-color) 10%, var(--white));
    --border-color: color-mix(in srgb, var(--primary-color) 22%, var(--white));
    --primary-5:  color-mix(in srgb, var(--primary-color) 5%,  var(--white));
    --primary-10: color-mix(in srgb, var(--primary-color) 10%, var(--white));
    --primary-15: color-mix(in srgb, var(--primary-color) 15%, var(--white));
    --primary-20: color-mix(in srgb, var(--primary-color) 20%, var(--white));
}

.red-theme {
    --primary-color: #d32f2f;
    --secondary-color: #c62828;
    /* Türetilmiş değişkenler kırmızı temaya göre güncellenir */
    --light-bg: color-mix(in srgb, var(--primary-color) 10%, var(--white));
    --border-color: color-mix(in srgb, var(--primary-color) 22%, var(--white));
    --primary-5:  color-mix(in srgb, var(--primary-color) 5%,  var(--white));
    --primary-10: color-mix(in srgb, var(--primary-color) 10%, var(--white));
    --primary-15: color-mix(in srgb, var(--primary-color) 15%, var(--white));
    --primary-20: color-mix(in srgb, var(--primary-color) 20%, var(--white));
}

/* Karanlık Tema Renkleri */
.dark-theme {
    --primary-color: #66bb6a; /* Karanlık tema için birincil */
    --secondary-color: #4caf50;
    --accent-color: #ffc107;
    --accent-hover: #ffb300;
    /* Dark theme fallbacks */
    --light-bg: #2a2a2a; /* Fallback koyu zemin */
    --border-color: #404040; /* Fallback koyu kenarlık */
    
    /* Dark theme türetilmiş renkler */
    --light-bg: color-mix(in srgb, var(--primary-color) 14%, var(--dark-bg));
    --border-color: color-mix(in srgb, var(--primary-color) 28%, var(--dark-bg));
    
    --dark-bg: #1e1e1e;
    --text-color: #e0e0e0;
    --light-text: #b0b0b0;
    --success-color: #66bb6a;
    --warning-color: #ffc107;
    --danger-color: #f44336;
    --white: #121212; /* Ana arka plan (dark) */
    --black: #ffffff; /* Ters metin rengi */
    --header-bg: var(--primary-color); /* Header = tema rengi */
    --header-text: #e0e0e0;
    --footer-bg: var(--secondary-color); /* Footer = ikincil tema rengi */
    --button-bg: #ffc107;
    --button-text: #1e1e1e;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);

    /* Türetilmiş tonlar (dark) */
    --primary-5:  color-mix(in srgb, var(--primary-color) 8%,  var(--white));
    --primary-10: color-mix(in srgb, var(--primary-color) 12%, var(--white));
    --primary-15: color-mix(in srgb, var(--primary-color) 16%, var(--white));
    --primary-20: color-mix(in srgb, var(--primary-color) 20%, var(--white));
}

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body temel stilleri */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white);
    font-size: 14px;
    transition: var(--theme-transition);
}

/* Mobil menü açık olduğunda body scroll'u engelle */
body.mobile-menu-open {
    overflow: hidden;
}

/* Container temel stili */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Responsive container */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    /* Mobilde tüm ana container içerikleri aynı hizalamada */
    .two-column .container,
    .two-column > .container {
        padding: 0 15px !important;
    }
    
    /* Ana içerik ve sidebar aynı padding ile hizalansın */
    .two-column .main-content .sozluk-container,
    .two-column .side-content .sidebar,
    .two-column .side-content > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}