/* Body için arka plan resmi ve ayarlar */

*{
    font-family: "Poppins", sans-serif;
}

body {
    background: url('../images/arkaplan.jpg') no-repeat center center fixed;
    background-size: cover;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh; /* Tam ekran yüksekliği */
    display: flex; /* Flexbox kullanarak container'ı ortalamak için */
    justify-content: center; /* Yatay olarak ortalar */
    align-items: center; /* Dikey olarak ortalar */
}

/* Ortadaki container */
.who-us-container {
    opacity: 0; /* Görünmez başlar */
    background-color: rgba(245, 245, 245, 0.7); /* Gri tonlarında transparan arka plan */
    border-radius: 15px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Solda resim, sağda metin */
    width: 80%;
    backdrop-filter: blur(5px);
    transform: translateY(30px);
    transition: all 0.8s ease;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Hafif gölge */
    margin-top: 12%;
}


.who-us-container.show {
    opacity: 1; /* Görünür hale gelir */
    transform: translateY(0); /* Normal pozisyonuna gelir */
}

/* Container üzerine gelince blur efekti */
.who-us-container:hover {
    backdrop-filter: blur(20px);
    background-color: rgba(245, 245, 245, 0.7); /* Hover sırasında daha şeffaf */
}

/* Soldaki resim */
.who-us-container img {
    max-width: 30%; /* Resmin boyutunu ayarladık */
    border-radius: 10px;
    margin-right: 45px; /* Resim ile metin arasında makul bir boşluk */
}

/* Sağ taraftaki içerik */
.who-us-content {
    flex-grow: 1; /* İçeriğin kalan alanı kaplaması için */
    text-align: justify; 
}

/* Başlık */
.who-us-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Açıklama metni */
.who-us-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Sosyal medya ikonları */
.social-icons {
    display: flex;
    justify-content: flex-end; /* İkonları en sağa hizalar */
    gap: 15px;
    margin-top: 20px;
}

/* İkonlar üzerine gelince renk değişimi */
.social-icons i {
    font-size: 1.8rem;
    color: #333;
    transition: color 0.3s;
}

.social-icons i:hover {
    color: #007bff;
}

/* Responsive düzen */
@media (max-width: 768px) {
    body {
        height: auto;
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 100px; /* Navbar ile içerik arasındaki boşluğu artırdık */
    }

    .who-us-container {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        width: 90%; /* Mobilde biraz daha genişlik */
        margin: 20px 25px; /* Mobilde üstten ve alttan boşluk */
    }

    .who-us-container img {
        max-width: 80%;
        margin-bottom: 20px;
        margin-right: 0; /* Mobilde sağ boşluğu kaldırıyoruz */
    }

    .who-us-content {
        text-align: center;
        max-width: 100%;
    }

    .social-icons {
        justify-content: center;
        margin-top: 20px;
    }
}

/* Yatay mobil ekranlar için medya sorgusu */
@media (max-width: 950px) and (orientation: landscape) {

    body{
        margin-top: 30% !important;
    }


    .who-us-container {
        flex-direction: column; /* İçeriği dikey düzenle */
        text-align: center;
        padding: 15px;
        width: 90%;
        margin: 20px 0;
        transform: none; /* Yatay modda animasyon olmadan sabit kalır */
        
    }

    .who-us-container img {
        max-width: 25%; /* Resmi küçült */
        margin: 10px auto; /* Ortala ve boşluk bırak */
    }

    .who-us-content h1 {
        text-align: center;
        font-size: 2rem; /* Başlık boyutunu küçült */
    }

    .who-us-content p {
        font-size: 1rem; /* Metin boyutunu küçült */
        line-height: 1.4; /* Satır aralığını küçült */
    }

    .social-icons i {
        font-size: 1.5rem; /* Sosyal medya ikonlarını küçült */
    }
}