@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

body {
    min-height: 100vh;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    display: -webkit-flex; /* Safari için ek destek */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #bfbebe;
}

.seo-hidden {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.company-container {
    display: -webkit-flex; /* Safari için ek destek */
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 20px;
}

.company-card {
    background-color: #f5f5f5;
    width: 30%; /* Kart genişliğini %30 olarak ayarladık, çünkü 3 firma var */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    display: -webkit-flex; /* Safari desteği */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Üstten başlatır */
    align-items: center; /* Yatayda ortalar */
    height: auto; /* Tüm kartların aynı boyutta olmasını sağlar */
}

.company-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.company-logo {
    width: 300px;
    height: auto; /* Yükseklik genişliğe göre otomatik ayarlanacak */
    margin-bottom: -70px;
    margin-top: -50px;
    display: block;
}

.company-video {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: 15px;
}

@media (max-width: 1100px) {
    .company-logo {
        width: 220px;
        height: auto;
        margin-bottom: -50px;
        margin-top: -40px;
        display: block;
    }
    .company-card {
        padding: 15px;
    }
}

@media (max-width: 1000px) {
    .company-container {
        display: -webkit-flex; /* Safari için ek destek */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px; /* Kartlar arasındaki boşluk */
        margin-top: 20px;
    }
    
    .company-card {
        flex: 1 1 calc(50% - 10px); /* İki kart yan yana olacak şekilde genişlik ayarı */
        max-width: 45%; /* Kart genişlik sınırı */
        aspect-ratio: 1 / 1; /* Kartın kare görünmesini sağlamak için oran */
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        display: -webkit-flex; /* Safari desteği */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .company-container .company-card:nth-child(3) {
        flex: 1 1 100%; /* Üçüncü kart tüm satıra yayılsın */
        max-width: 45%; /* Ortalanmış daha geniş kart */
    }

    .company-card img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
        margin-bottom: -20px;
        margin-top: -30px;
    }
}
@media (max-width: 840px) {
    .company-logo {
        width: 150px ;
    }
    .company-video {
        width: 100%;
        height: auto;
        border-radius: 5px;
        margin-top: 10px;
    }
    .company-card {
        padding: 10px ;
        flex: 1 1 100%; /* Kartlar tüm genişliği kaplasın */
        min-width: unset; /* Min genişliği kaldır */
    }
}
@media (max-width: 600px) {
    .company-card {
        width: 80%; /* Küçük ekranlar için tam genişlik */
        margin-bottom: 20px;
    }
    .company-card img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
        margin-bottom: -50px;
        margin-top: -20px;
    }
}