/* --- 1. Modern Fontlar --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --md-text-font: "Inter", sans-serif;
    --md-code-font: "JetBrains Mono", monospace;
    /* Geçişlerin yumuşak olması için */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- 2. LIGHT MODE ÖZEL AYARLARI (Sorun Çözücü) --- */
[data-md-color-scheme="default"] {
    /* Header Yazılarını ve İkonlarını Koyu Yap */
    --md-primary-fg-color: #2c3e50;      /* Koyu Lacivert */
    --md-primary-fg-color--light: #34495e;
    --md-primary-fg-color--dark: #1a252f;
    --md-primary-bg-color: #ffffff;

    /* Link Renkleri */
    --md-accent-fg-color: #ff5722;       /* Turuncu vurgu */

    /* Header Arka Planı (Hafif Şeffaf Beyaz) */
    --md-header-bg-color: rgba(255, 255, 255, 0.85);

    /* Arama Çubuğu Arka Planını Belirginleştir */
    --md-search-bg-color: rgba(0, 0, 0, 0.05);
}

/* --- 3. DARK MODE AYARLARI (Premium Görünüm) --- */
[data-md-color-scheme="slate"] {
    --md-header-bg-color: rgba(15, 23, 42, 0.8); /* Koyu Slate Şeffaf */
    --md-default-bg-color: transparent; /* Arka planı CSS'ten alsın */
}

/* --- 4. ARKA PLANLAR (BACKGROUNDS) --- */

/* Arka planı sabitle ki scroll yaparken kaysın (Parallax etkisi) */
body {
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

/* Light Mode Arka Planı: Temiz, Gri Mikro Grid */
[data-md-color-scheme="default"] body {
    background-color: #f8f9fa;
    background-image: linear-gradient(#e5e7eb 1px, transparent 1px),
    linear-gradient(to right, #e5e7eb 1px, transparent 1px);
    background-size: 30px 30px; /* Grid karelerinin boyutu */
}

/* Dark Mode Arka Planı: Derin Uzay / Cyberpunk Gradient */
[data-md-color-scheme="slate"] body {
    background-color: #0f172a; /* Slate 900 */
    background-image:
            radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
            radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%),
            radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
}

/* --- 5. İÇERİK KUTUSU (Okunabilirlik İçin) --- */
/* Arka plan desenli olduğu için yazıların altına hafif bir kart koyalım */
.md-main__inner {
    margin-top: 1rem;
}

.md-content {
    /* İçerik alanına hafif bir zemin ve radius ver */
    background: var(--md-default-bg-color); /* Temaya göre değişir */
    border-radius: 16px;
    padding: 1.5rem;
}

/* Light mode'da içerik kutusu beyaz olsun */
[data-md-color-scheme="default"] .md-content {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
}

/* Dark mode'da içerik kutusu hafif koyu olsun */
[data-md-color-scheme="slate"] .md-content {
    background: rgba(30, 41, 59, 0.6); /* Yarı saydam */
    backdrop-filter: blur(10px);        /* Buzlu cam efekti */
    border: 1px solid rgba(255,255,255,0.05);
}

/* --- 6. HEADER & SEARCH DÜZELTMELERİ --- */

/* Header Bluru */
.md-header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* Light Mode'da Arama Çubuğu Girişi */
[data-md-color-scheme="default"] .md-search__input {
    background-color: rgba(0, 0, 0, 0.05);
    color: #333;
}
[data-md-color-scheme="default"] .md-search__icon {
    color: #555 !important; /* Büyüteç ikonu gri olsun */
}

/* Proje Başlığı (Title) Tasarımı */
.md-header__title {
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* --- 7. Gradient Başlıklar (H1) --- */
h1 {
    font-weight: 800;
    background: -webkit-linear-gradient(45deg, #FF5722, #FFC107);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

[data-md-color-scheme="slate"] h1 {
    background: -webkit-linear-gradient(45deg, #818cf8, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- 8. Kartlar (Anasayfa İçin) --- */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.card {
    /* Kart renklerini temaya göre otomatik ayarla */
    background: var(--md-default-bg-color);
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Light mode kart arka planı */
[data-md-color-scheme="default"] .card {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Dark mode kart arka planı */
[data-md-color-scheme="slate"] .card {
    background: rgba(255,255,255,0.03);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.2);
    border-color: var(--md-accent-fg-color);
}

.card h3 {
    margin-top: 0;
    color: var(--md-primary-fg-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Tablo Tasarımı */
.md-typeset table:not([class]) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}