/* Projelerim Bölümü */
.projelerimiz-page {
    background-color: transparent;
}

.projects-section-proje {
    font-family: Arial, sans-serif;
    padding: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column; /* İçeriği dikey olarak sıralar */
    background: url("/images/logo/ok.jpg") no-repeat center center;
    background-size: cover;
    align-items: center;
    width: 100vw;
}

/* Header arkaplan resmi */
.header-background {
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    height: 400px; /* Üstte belirgin bir alan kaplasın */
    background: url('/images/logo/projeler.jpg') no-repeat center center/cover; /* Görseli ekle */
    z-index: -1;
}

.projects-section-proje h1 {
    font-size: 2.5rem;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 500;
    margin-bottom: 15px;
    color: #333;
}

/* Grid Yapısı */
.projects-grid-proje {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-content: center; /* Grid elemanlarını ortala */
    width: 100%; /* Genişlik tamamen kapsansın */
    max-width: 1200px; /* İçeriği sınırla */
    margin: 0 auto; /* Merkeze hizalama */
}

/* Proje Kutusu */
.project-item-proje {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 3px solid gold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 250px; /* Kartların yüksekliğini sabit tut */
}

.project-item-proje img {
    width: 100%; /* Görselin genişliğini kutunun genişliğine ayarla */
    height: 100%; /* Görselin yüksekliğini kutunun yüksekliğine ayarla */
    display: block;
    transition: transform 0.6s ease;
}

.project-item-proje:hover img {
    transform: scale(1.1); /* Hover durumunda görsel büyütme */
}

/* Overlay (Ãœst Katman) */
.project-overlay-proje {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4));
    color: #fff;
    padding: 15px;
    text-align: left; /* Yazıyı sola hizala */
    display: flex; /* İkon ve yazıyı yan yana diz */
    align-items: center; /* İkon ve yazıyı dikey olarak ortala */
    gap: 10px; /* İkon ile yazı arasında boşluk */
    flex-direction: row-reverse; /* İkon solda, yazı sağda */
}

.project-item-proje:hover .project-overlay-proje {
    transform: translateY(0); /* Hover durumunda overlay görünür */
}

/* Proje Başlığı */
.project-overlay-proje h3 {
    font-size: 1rem;
    margin: 0;
    flex: 1; /* Yazı genişlikte esnesin */
}

/* Ä°kon */
.project-overlay-proje .icon-proje {
    font-size: 1.5rem;
    color: gold; /* Ä°kon rengi */
    flex-shrink: 0; /* İkon boyutu küçülmesin */
}

@media (max-width: 768px) {
    .projects-grid-proje {
        grid-template-columns: repeat(2, 1fr); /* Mobilde 2 sütun */
    }
}

@media (max-width: 480px) {
    .projects-grid-proje {
        grid-template-columns: repeat(1, 1fr); /* Daha küçük cihazlarda 1 sütun */
    }
}

/* Devam Eden Projeler Başlığı */
.ongoing-projects-section {
    margin-top: 40px;
    width: 100%;
    padding-left: 20px; /* Sol boşluk eklendi */
    max-width: 1200px; /* Maksimum genişlik sınırı */
    margin-left: auto; /* Otomatik sol margin */
    margin-right: auto; /* Otomatik sağ margin */
}

.section-title {
    font-size: 2.2rem;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 15px;
}

.section-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background-color: gold;
}

/* Proje Tipi Stilleri */
.project-type {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #fff;
}

.project-type span {
    font-size: 0.9rem;
    font-weight: 500;
}

.project-type .separator {
    color: gold;
    font-weight: bold;
}

.project-type .project-category {
    color: #fff;
}