.footer-container {
    display: flex;
    flex-direction: column; /* İkonları logonun üstüne dizer */
    align-items: center;
    gap: 20px; /* İkonlar ve logo arasındaki boşluk */
}

.social-icons {
    display: flex;
    gap: 25px; /* İkonların kendi aralarındaki boşluk */
}

.social-icons a {
    color: #000; /* İkon rengi (siyah) */
    font-size: 40px; /* İkon boyutu */
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover Efekti */
.social-icons a:hover {
    color: #555; /* Üzerine gelince renk değişimi */
    transform: scale(1.2); /* Hafif büyüme efekti */
}

.main-header {
    width: 100%;
    padding: 20px 0;
    background-color: #ffffff; /* Temiz bir beyaz arka plan */
    border-bottom: 1px solid #eaeaea; /* Hafif bir ayrım çizgisi, estetik bir dokunuş */
    display: flex;
    justify-content: center; /* Logoyu yatayda tam merkeze alır */
    align-items: center;
}

/* Header Logosu için Dinamik Ölçeklendirme */
.header-logo {
    width: 25vw; /* Ekran genişliğinin %25'i kadar yer kaplar */
    min-width: 150px; /* Çok küçük ekranlarda kaybolmasını engeller */
    max-width: 400px; /* Dev ekranlarda çok yayılmasını engeller */
    height: auto;
    transition: opacity 0.3s ease;
}

/* Footer Logosu için Dinamik Ölçeklendirme */
.footer-logo {
    width: 40vw; 
    min-width: 250px; 
    max-width: 600px; /* Biraz daha büyütebiliriz demiştin */
    height: auto;
    display: block;
    
    /* Simetri Protokolü: Görseli sağa kaydırarak çizgiyi merkeze çeker */
    transform: translateX(14%); /* Bu değeri çizgi tam ortaya gelene kadar %3, %5 veya %7 gibi deneyebilirsin */
}

/* Mobil Cihazlar İçin İnce Ayar (Media Query) */
@media (max-width: 768px) {
    .header-logo {
        width: 40vw; /* Mobilde logonun görünürlüğünü artır */
    }
    .footer-logo {
        width: 70vw; /* Mobilde daha geniş durması için */
    }
}
.content-wrapper {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.image-container {
    display: flex;
    flex-direction: column; /* Alt alta dizilim */
    gap: 30px; /* Görseller arası dikey boşluk */
    width: 90%;
    max-width: 800px; /* Çok yayılıp sistemi bozmasın */
}

.layered-card {
    text-decoration: none;
    display: block;
    border-radius: 20px; /* Kenarları yuvarlatma */
    overflow: hidden; /* Görselin köşeleri taşmasın */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Katman efekti (gölge) */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.layered-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Hover Efekti: Mouse üzerine gelince büyüme */
.layered-card:hover {
    transform: scale(1.05); /* %5 büyüme */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); /* Üstte durma hissini artırır */
    z-index: 10; /* Diğer elementlerin üzerine çıkar */
}
.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    gap: 80px; /* Gruplar arası boşluğu biraz daha artırdım, ferahlık iyidir */
}

/* Üstteki dikey afişler */
.vertical-group {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 95%; /* Kenarlara daha yakın (%90'dan %95'e çıktı) */
    max-width: 1200px; /* Maksimum genişliği 800'den 1200'e yükselttim */
}

/* Alttaki 2'li grid afişler */
.grid-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    width: 95%; /* Kenarlara daha yakın */
    max-width: 1200px; /* Maksimum genişliği 1200'e yükselttim */
}

/* Kartların içindeki resimlerin tam oturması için */
.layered-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Resimlerin kutuyu tam doldurmasını sağlar */
}