/* Genel Konteyner Ayarları */
.project-container {
    max-width: 1240px; /* Konteyner genişliği */
    margin: 40px auto; /* Ortalamak için */
    padding: 0 20px; /* Sağ ve sol kenar boşluğu */
    display: flex;
    flex-direction: column; /* Tüm öğeleri alt alta yerleştir */
    align-items: center; /* Ortalamak için */
    color: rgb(0, 0, 0); /* Yazı rengi */
}

/* Başlık Ayarları */
.project-title {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

/* İlk Görsel Ayarları */
.project-main-image {
    width: 100%; /* Genişliği konteynere uydur */
    max-width: 1200px; /* Maksimum genişlik */
    max-height: 600px; /* Maksimum yükseklik */
    object-fit: contain; /* Görüntüyü tam sığdır */
    border-radius: 10px; /* Köşeleri yuvarlat */
    margin-bottom: 20px;
}

/* Açıklama Metni Ayarları */
.project-description {
    font-size: 18px;
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 20px;
    max-width: 1200px; /* Metin genişliğini sınırla */
}

/* Alt Görseller Alanı */
.project-extra-images {
    display: flex;
    flex-direction: column; /* Alt alta yerleştir */
    gap: 20px; /* Görseller arasında boşluk */
    width: 100%; /* Genişliği konteynere uydur */
    height: 100%;
    align-items: center; /* Görselleri ortala */
}

.extra-image {
    width: 100%; /* Genişliği konteynere uydur */
    max-width: 1200px; /* Maksimum genişlik */
    max-height: 600px; /* Maksimum yükseklik */
    object-fit: contain; /* Görüntüyü tam sığdır */
    border-radius: 10px; /* Köşeleri yuvarlat */
}

/* Responsive Tasarım: Tablet ve Mobil için */
@media (max-width: 1024px) { /* Tablet Ekranlar */
    .project-title {
        font-size: 24px;
    }

    .project-description {
        font-size: 16px;
    }

    .project-main-image,
    .extra-image {
        max-width: 100%; /* Tablet ekranlarda tam genişlik */
    }
}

@media (max-width: 768px) { /* Mobil Ekranlar */
    .project-title {
        font-size: 20px;
    }

    .project-description {
        font-size: 14px;
        text-align: left; /* Mobilde sola hizalı metin */
    }

    .project-main-image,
    .extra-image {
        max-width: 100%; /* Mobil ekranlarda tam genişlik */
    }
}