/* =========================================
   BİZ KİMİZ BÖLÜMÜ TAM CSS KODLARI
   ========================================= */

/* 1. Genel Yerleşim ve Kapsayıcılar */
.padding-large {
    padding: 20px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.padding-small {
    padding: 0px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.testimonial-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px;
}

/* 1. Kolon Genişlikleri (Resim daha az, metin daha çok yer kaplasın) */
.testimonial-image-col {
    flex: 0 1 35%;
    min-width: 280px;
    display: flex;
    justify-content: center; /* Resmi kolonun içinde ortalar */
}

.testimonial-text-col {
    flex: 1; /* Metin geniş alanı kaplasın */
    min-width: 300px;
}

/* 2. Resim ve Parallax Çerçeve Ayarları */
.testimonial-image {
    width: 100%;
    max-width: 340px;
    /* İŞTE BURASI DEĞİŞTİ: 2/3 yerine 3/4 yaptık. 
       Böylece genişlik aynı kalırken yükseklik bir tık azaldı. 
       Eğer biraz daha kısaltmak isterseniz 4 / 5 yazabilirsiniz. */
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

    .testimonial-image img.parallax-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* İŞTE BURASI: Resme kaymak için daha fazla alan verdik */
        height: 160%;
        object-fit: cover;
        object-position: top;
        will-change: transform;
    }

/* 3. Metin Stilleri */
.section-header .title span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
    font-weight: 600;
}

.section-header .section-title {
    font-size: 48px;
    font-weight: 900;
    color: #333;
    margin-top: 10px;
    margin-bottom: 30px;
}

.testimonials-inner q {
    font-size: 15px; /* Yazılar 15px'e küçültüldü */
    line-height: 1.8;
    color: #666;
    display: block;
    font-style: italic;
    text-align: justify; /* Yazılar iki yana yaslandı (jilet gibi duracak) */
}

/* 4. Yazıların Yavaşça Dökülme Animasyonları */
.animate-on-scroll .section-header,
.animate-on-scroll .testimonials-inner {
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.animate-on-scroll.is-visible .section-header {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.animate-on-scroll.is-visible .testimonials-inner {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}