/* Genel Ayarlar */
html, body {
    margin: 0; /* Sayfanın etrafındaki boşlukları kaldır */
    padding: 0; /* Sayfanın etrafındaki iç boşlukları kaldır */
    height: 100%; /* Yüksekliği tam ekran yap */
    font-family: 'Arial', sans-serif; /* Yazı tipi ayarı */
    color: #333; /* Yazı rengi */
    background-color: #f0f4f8; /* Arka plan rengi */
    display: flex; /* Flexbox düzeni kullan */
    flex-direction: column; /* Elemanları dikeyde hizala */
    min-height: 100vh; /* Sayfa yüksekliğini tam ekran yap */
    overflow-x: hidden; /* Yatay kaydırmayı engelle */
    transition: all 0.3s ease; /* Geçiş animasyonları */
}

/* Ana İçerik */
main {
    flex: 1; /* Ana içeriğin esnemesine izin ver */
    display: flex; /* Flexbox düzeni kullan */
    flex-direction: column; /* Elemanları dikeyde hizala */
    align-items: center; /* İçerikleri merkezle */
    justify-content: center; /* İçerikleri merkezle */
    padding: 20px; /* İç boşluk */
    transition: padding 0.3s ease; /* İç boşluk geçiş animasyonu */
}

/* Modal */
.modal {
    display: none; /* Başlangıçta gizli */
    position: fixed; /* Ekranın üstüne sabit */
    z-index: 1000; /* Diğer içeriklerin üstünde */
    left: 0;
    top: 0;
    width: 100%; /* Tüm genişlik */
    height: 100%; /* Tüm yükseklik */
    overflow: auto; /* Kaydırma alanı */
    background-color: rgba(0, 0, 0, 0.5); /* Yarı saydam arka plan */
}

.modal-content {
    background-color: #fefefe; /* Beyaz arka plan */
    margin: 15% auto; /* Üstten 15%, merkezde */
    padding: 20px; /* İç boşluk */
    border: 1px solid #888; /* Kenarlık */
    width: 80%; /* Genişlik */
    max-width: 600px; /* Maksimum genişlik */
    border-radius: 8px; /* Köşe yuvarlama */
}

.close {
    color: #aaa; /* Kapatma simgesi rengi */
    float: right; /* Sağda konumlandır */
    font-size: 28px; /* Yazı boyutu */
    font-weight: bold; /* Kalın yazı tipi */
}

.close:hover,
.close:focus {
    color: black; /* Üzerine gelindiğinde renk değişimi */
    text-decoration: none; /* Alt çizgi kaldır */
    cursor: pointer; /* İmleç değiştirme */
}

/* Header */
header {
    background: #ffffff; /* Arka plan rengi */
    color: #333; /* Yazı rengi */
    padding: 10px 30px; /* İç boşluk */
    width: 100%; /* Genişlik */
    display: flex; /* Flexbox düzeni kullan */
    justify-content: space-between; /* Sol ve sağ elemanları hizala */
    align-items: center; /* Elemanları ortala */
    border-bottom: 1px solid #e1e5eb; /* Alt kenar sınırı */
    transition: all 0.3s ease; /* Geçiş animasyonları */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Gölge efekti */
    box-sizing: border-box; /* Kutunun toplam genişliğini hesapla */
}

header h1 {
    margin: 0; /* Kenar boşluklarını kaldır */
    font-size: 1.75em; /* Yazı boyutu */
    letter-spacing: 1px; /* Harf aralığı */
    font-weight: bold; /* Kalın yazı tipi */
    transition: font-size 0.3s ease; /* Yazı boyutu geçiş animasyonu */
}

/* Ana Bölümler */
section {
    padding: 40px; /* İç boşluk */
    width: 100%; /* Genişlik */
    max-width: 700px; /* Maksimum genişlik */
    background: #ffffff; /* Arka plan rengi */
    border-radius: 8px; /* Köşe yuvarlama */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Gölge efekti */
    margin: 30px 0; /* Dış boşluk */
    transition: all 0.3s ease; /* Geçiş animasyonları */
    box-sizing: border-box; /* Kutunun toplam genişliğini hesapla */
}

/* Footer */
footer {
    background: #ffffff; /* Arka plan rengi */
    color: #333; /* Yazı rengi */
    text-align: center; /* Metni ortala */
    padding: 15px 30px; /* İç boşluk */
    width: 100%; /* Genişlik */
    border-top: 1px solid #e1e5eb; /* Üst kenar sınırı */
    transition: all 0.3s ease; /* Geçiş animasyonları */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* Gölge efekti */
    box-sizing: border-box; /* Kutunun toplam genişliğini hesapla */
}

/* Sosyal Medya */
.social-media {
    display: flex; /* Flexbox düzeni kullan */
    justify-content: center; /* Sosyal medya ikonlarını merkezle */
    margin-bottom: 10px; /* Alt boşluk */
    box-sizing: border-box; /* Kutunun toplam genişliğini hesapla */
}

.social-media a {
    color: #0070c9; /* Sosyal medya linklerinin rengi */
    margin: 0 10px; /* Yan boşluklar */
    font-size: 1.5em; /* Yazı boyutu */
    transition: color 0.3s ease, transform 0.3s ease; /* Renk ve ölçek geçiş animasyonları */
}

.social-media a:hover {
    color: #005999; /* Üzerine gelindiğinde renk değişimi */
    transform: scale(1.2); /* Üzerine gelindiğinde ölçek büyütme */
}

/* Projeler Listesi */
#projects ul {
    list-style: none; /* Madde işareti kaldır */
    padding: 0; /* İç boşluk kaldır */
    margin: 0; /* Dış boşluk kaldır */
    transition: all 0.3s ease; /* Geçiş animasyonları */
    box-sizing: border-box; /* Kutunun toplam genişliğini hesapla */
}

#projects ul li {
    margin: 15px 0; /* Dış boşluk */
    transition: margin 0.3s ease; /* Dış boşluk geçiş animasyonu */
}

#projects ul li a {
    color: #333; /* Yazı rengi */
    text-decoration: none; /* Alt çizgi kaldır */
    font-weight: normal; /* Normal yazı tipi */
    transition: color 0.3s ease; /* Renk geçiş animasyonu */
}

#projects ul li a:hover {
    color: #0070c9; /* Üzerine gelindiğinde renk değişimi */
}

/* Gizlilik Politikası */
#privacy-policy {
    padding: 40px; /* İç boşluk */
    width: 100%; /* Genişlik */
    max-width: 700px; /* Maksimum genişlik */
    background: #ffffff; /* Arka plan rengi */
    border-radius: 8px; /* Köşe yuvarlama */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Gölge efekti */
    margin: 30px 0; /* Dış boşluk */
    transition: all 0.3s ease; /* Geçiş animasyonları */
    box-sizing: border-box; /* Kutunun toplam genişliğini hesapla */
}

#privacy-policy h2 {
    margin-top: 0; /* Üst kenar boşluğu kaldır */
    font-size: 1.6em; /* Yazı boyutu */
    font-weight: bold; /* Kalın yazı tipi */
    transition: font-size 0.3s ease; /* Yazı boyutu geçiş animasyonu */
}

#privacy-content {
    line-height: 1.8; /* Satır yüksekliği */
    transition: line-height 0.3s ease; /* Satır yüksekliği geçiş animasyonu */
}

/* Fade-in Animasyonu */
.fade-in {
    opacity: 0; /* Başlangıçta görünmez */
    transform: translateY(20px); /* Hafif aşağıdan yukarıya kaydırma */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Opaklık ve konum geçiş animasyonları */
}

.fade-in.visible {
    opacity: 1; /* Görünür hale gelme */
    transform: translateY(0); /* Orijinal konuma döndürme */
}

/* Mobil Duyarlı Tasarım */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Flex yönünü dikey yap */
        align-items: flex-start; /* Elemanları sola hizala */
        padding: 10px; /* Daha az iç boşluk */
    }

    section {
        margin: 10px; /* Daha az dış boşluk */
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.5em; /* Küçük ekranlarda daha küçük yazı boyutu */
    }

    .social-media a {
        font-size: 1.2em; /* Sosyal medya ikonları için daha küçük boyut */
    }
}

/* Duyarlı Resimler ve Medya */
img {
    max-width: 100%; /* Resimleri kapsayıcıya uydur */
    height: auto; /* Yüksekliği otomatik ayarla */
    border-radius: 8px; /* Resimlere köşe yuvarlama */
}

/* Varsayılan tema (açık tema) */
body {
    background-color: #f0f4f8; /* Açık arka plan */
    color: #333; /* Yazı rengi */
}

/* Karanlık tema */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1e1e1e; /* Karanlık arka plan */
        color: #ddd; /* Açık yazı rengi */
    }

    header, section, footer, .modal-content, #privacy-policy {
        background-color: #2a2a2a; /* Koyu arka plan */
        color: #ddd; /* Açık yazı rengi */
        border-color: #444; /* Kenarlık rengi */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Daha koyu gölge */
    }

    header h1, #projects ul li a, #privacy-policy h2 {
        color: #fff; /* Başlıklar için beyaz renk */
    }

    .social-media a {
        color: #4dabf7; /* İkonlar için daha açık bir mavi */
    }

    .social-media a:hover {
        color: #82caff; /* Hover durumunda daha parlak mavi */
    }

    .close {
        color: #ccc; /* Kapatma simgesi rengi */
    }

    .close:hover,
    .close:focus {
        color: #fff; /* Üzerine gelindiğinde beyaz */
    }

    img {
        border-radius: 8px; /* Karanlık temada da resim köşe yuvarlaması korunur */
    }
}