/* Bu bir CSS yorum satırıdır, tarayıcı bunu görmez */

/* Tüm sayfanın arka planını ve yazı tipini değiştirelim */
body {
    background-color: #f4f4f4; /* Çok açık bir gri arka plan */
    font-family: Arial, sans-serif; /* Yazı tipi */
    line-height: 1.6; /* Satır yüksekliği (okunabilirlik için) */
    margin: 0;
    padding: 0;
}
/* İçeriği ortalayacak ve maksimum genişlik verecek */
.container {
    width: 90%; /* Genişliği %90 olsun (mobil için iyi) */
    max-width: 960px; /* Ama en fazla 960 piksel olsun */
    margin: 0 auto; /* Bu sihirli koddur: Otomatik olarak ortalar */
}
    /* Sitenin ana konteyneri (içeriği ortalayalım) */
/* (Bunu ekleyebilmek için HTML'i birazdan güncelleyeceğiz ama şimdilik kalsın) */


/* Header (Üst Kısım) Alanı */
header {
    background-color: #333; /* Koyu gri arka plan */
    color: #ffffff; /* Beyaz yazı rengi */
    padding: 20px; /* İç boşluk */
    text-align: center; /* Yazıları ortala */
}

/* Menü Linkleri (a etiketleri) */
header nav ul li a {
    color: #ffffff; /* Menü linkleri beyaz olsun */
    text-decoration: none; /* Altındaki çizgiyi kaldır */
    font-weight: bold; /* Kalın yaz */
}

/* Menü listesini yan yana getirelim */
header nav ul {
    list-style: none; /* Baştaki noktaları kaldır */
    padding: 0;
}

header nav ul li {
    display: inline; /* Listeyi yan yana diz */
    margin: 0 15px; /* Her link arasına boşluk koy */
}

/* Ana İçerik Alanı */
main {
    padding: 20px; /* İçerik kenarlardan biraz içeride olsun */
}

/* Footer (Alt Kısım) Alanı */
footer {
    background-color: #333; /* Header ile aynı renk */
    color: #ffffff;
    text-align: center;
    padding: 10px;
    margin-top: 20px; /* Üstündeki içerikle arasına boşluk koy */
}
/* Arşiv Sayfası İçin Galeri Stilleri */
.gallery {
    display: flex; /* Resimleri yan yana dizmek için esnek kutu modelini kullan */
    flex-wrap: wrap; /* Eğer sığmazlarsa alt satıra geçsinler */
    gap: 15px; /* Resimler arasında 15 piksel boşluk bırak */
    justify-content: center; /* Resimleri ortala */
    margin-top: 20px; /* Galerinin üstüne biraz boşluk bırak */
}

.gallery img {
    max-width: 100%; /* Resimler kapsayıcılarından taşmasın */
    height: auto; /* Oranlarını koruyarak boyutu ayarla */
    border: 1px solid #ddd; /* Küçük bir kenarlık */
    padding: 5px; /* Kenarlık ile resim arasında boşluk */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Hafif gölge */
    transition: transform 0.3s ease; /* Fare üzerine geldiğinde yumuşak geçiş */
}

/* Fare resmin üzerine geldiğinde boyutu biraz büyütsün */
.gallery img:hover {
    transform: scale(1.05); /* %5 büyüt */
}