/* "Neler Yapıyoruz" Bölümü (Flexbox Tabanlı Yeni Yapı) */
#neler-yapiyoruz{
    background-color: #fff;
    color: #000;
}
.services-layout {
    display: flex;
    flex-direction: column; /* Ana satırları dikey olarak hizala */
    gap: 15px; /* Satırlar arası boşluk */
}

.services-row {
    display: flex; /* Satır içindeki elemanları yatay olarak hizala */
    gap: 15px; /* Sütunlar arası boşluk */
}

.services-column {
    display: flex;
    flex-direction: column; /* İç içe sütundaki elemanları dikey olarak hizala */
    gap: 15px; /* Dikey sütun içindeki elemanların arası boşluk */
    flex: 1; /* Sütunun genişliğini diğerleriyle eşit ayarla */
}

.service-item {
    background-color: var(--card-bg-color);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    /* Tüm kutuların satırda aynı yüksekliğe esnemesini sağlar */
    display: flex;
}

/* Bu kuralı bulun ve 'cover' değerini 'contain' olarak değiştirin */
.service-item img,video {
    width: 100%;
    height: 100%;
    /* ÇÖZÜM: Tüm resimlerin kutuyu doldurması için 'cover' kullanıyoruz */
    object-fit: cover;
    transition: opacity 0.4s ease-in-out;
}
/* ======================================================= */
/* Neler Yapıyoruz - SADECE SEÇİLEN GÖRSELLERDE Hover Efekti */
/* ======================================================= */

/* Sadece hover efekti olan kutuların içindeki resimleri üst üste bindiriyoruz.
   Bu sayede tek resimli kutuların düzeni bozulmaz. */
/* ================================================================= */
/* Neler Yapıyoruz - GÖRSEL YERLEŞİMİ VE HOVER EFEKTİ (FİNAL SÜRÜM) */
/* ================================================================= */

/* TÜM hizmet kutularındaki görseller için ortak temel kural */
.service-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* TÜM resimlerin kırpılmadan görünmesini sağlar */
    transition: opacity 0.4s ease-in-out;
}

/* Sadece hover efekti olan kutuları, içindeki resimleri üst üste bindirmek için hazırlıyoruz */
.service-item.has-hover-effect {
    position: relative; /* Bu satır zaten .service-item içinde vardı, teyit amaçlıdır */
}
/* Sadece hover efekti olan kutuların içindeki resimleri üst üste bindiriyoruz */
.service-item.has-hover-effect img {
    position: absolute;
    top: 0;
    left: 0;
}

/* Hover efekti olan kutulardaki ikinci resmi başlangıçta gizliyoruz */
.service-item.has-hover-effect img:last-child {
    opacity: 0;
}

/* Fare, hover efekti olan bir kutunun üzerine geldiğinde... */
.service-item.has-hover-effect:hover img:last-child {
    /* ...ikinci resmi görünür yapıyoruz. */
    opacity: 1;
}

.service-item.has-hover-effect:hover img:first-child {
    /* ...ilk resmi de gizliyoruz. */
    opacity: 0;
}

/* -- Kutu Boyutlandırmaları -- */

/* SATIR 1 */
.item-influencer {
    flex: 1; /* 1 birim genişlik */
    min-height: 280px;
}
.item-graphic-design {
    flex: 2; /* 2 birim genişlik (Influencer'ın 2 katı) */
}

/* SATIR 2 */
.item-social-media {
    flex: 1; /* 1 birim genişlik */
    min-height: 500px;
}
/* .services-column zaten flex: 1 olarak ayarlandı */
.item-marketplaces {
    flex: 2; /* Üstündeki dikey boşluğu doldurur */
}
.item-web-design {
    flex: 2; /* Üstündeki dikey boşluğun 2 katını doldurur */
}
.item-photography {
    flex: 1; /* 1 birim genişlik */
}

/* SATIR 3 */
.item-brand-identity {
    flex: 2; /* 2 birim genişlik */
    min-height: 280px;
}
.item-ad-management {
    flex: 1; /* 1 birim genişlik */
}


/* ========================================================== */
/* Neler Yapıyoruz - MOBİL GÖRÜNÜM DÜZELTMESİ (TEK SÜTUN)     */
/* ========================================================== */

@media (max-width: 768px) {

    /* 1. Ana satırları ve iç sütunları dikey (alt alta) diziyoruz. */
    .services-row, .services-column {
        flex-direction: column;
        gap: 20px; /* Elemanlar arası dikey boşluk */
    }

    /* 2. ÇÖZÜM: Dikey dizilen her bir elemanın tam genişliği kaplamasını sağlıyoruz. */
    /* Bu kural, sıkışma sorununu çözer. */
    .services-row > .service-item,
    .services-row > .services-column {
        width: 100%;
        /* Masaüstünden gelen flex değerlerini sıfırlıyoruz */
        flex: auto;
    }
    
    /* 3. Tüm kutular için standart bir yükseklik belirliyoruz. */
    .service-item {
        min-height: 300px; 
    }

    /* 4. Ana kapsayıcıdaki boşluğu da düzenliyoruz */
    /* Boşlukları 10px olarak ayarlıyoruz */
    .services-layout,
    .services-row,
    .services-column {
        gap: 10px;
    }
}