/* Equipment Section */
.equipment {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    padding-bottom: 100px;
    width: 100%;
    margin: 0 auto;
    gap: 30px;
}

.equip-card img {
    width: 100%;
    max-width: 450px;
    border-radius: 16px;
    filter: grayscale(100%);
    object-fit: cover;
}

/* Tablet ≤1024px */
@media (max-width:1024px){
    .equipment {
        justify-content: space-between;
        padding-left: 50px;
        padding-right: 50px;
        gap: 25px;
        max-width: 1200px; /* hero ile uyumlu */
        margin: 0 auto;
    }

    @media (orientation: portrait) {
        .equip-card {
            flex: 0 0 calc(50% - 12.5px);
            display: none;
        }
        .equip-card.active {
            display: block;
        }
    }

    @media (orientation: landscape) {
        .equip-card {
            flex: 0 0 calc(50% - 12.5px);
            display: block;
        }
    }

    .equip-card img {
        max-width: 100%;
        height: auto;
    }
}

/* Telefon ≤740px */
@media (max-width:740px){
    .equipment {
        padding-left: 10px;   /* Her durumda sağ-sol 10px */
        padding-right: 10px;
        gap: 15px;
        max-width: 100%;      /* Küçük ekranlarda tam genişlik */
        margin: 0 auto;
    }

    /* Dikey: 2 görsel yan yana */
    @media (orientation: portrait) {
        .equip-card {
            flex: 0 0 calc(50% - 5px);
            display: none; /* JS ile active gösterilecek */
        }
    }

    /* Yatay: 3 görsel yan yana */
    @media (orientation: landscape) {
        .equip-card {
            flex: 0 0 calc(33.33% - 13.33px);
            display: none; /* JS ile active gösterilecek */
        }
    }

    .equip-card img {
        max-width: 100%;
        height: auto;
    }
}

/* Desktop ve büyük ekran ≥1025px */
@media (min-width:1025px) {
    .equipment {
        display: flex;
        justify-content: space-between;   /* Görseller arasındaki boşluk eşit */
        flex-wrap: nowrap;                 /* Satır değişmesin */
        padding-left: 100px;               /* hero ile hizalı */
        padding-right: 100px;
        max-width: 1600px;                 /* hero ile aynı maksimum genişlik */
        margin: 0 auto;
        gap: 30px;
    }

    .equip-card.desktop {
        flex: 0 1 calc((100% - 2 * 30px) / 3); /* 3 görsel eşit, gap dahil */
        max-width: calc((1600px - 2 * 30px) / 3); /* hero max-width ile sınırla */
    }

    .equip-card.desktop img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 16px;
    }
}

/* Desktop – merdiven efekti */
@media (min-width:1025px) {
    .equip-card.desktop:nth-child(1) {
        margin-top: 50px;
    }

    .equip-card.desktop:nth-child(2) {
        margin-top: 0px;
    }

    .equip-card.desktop:nth-child(3) {
        margin-top: -50px;
    }
}

/* Tablet – 2’li merdiven efekti */
@media (max-width:1024px) and (min-width:741px) {
    .equipment > .equip-card.tablet:nth-child(4) {
        margin-top: 25px;
    }

    .equipment > .equip-card.tablet:nth-child(5) {
        margin-top: -25px;
    }
}

/* Mobile portrait – 2’li merdiven efekti */
@media (max-width:740px) and (orientation: portrait) {
    .equipment > .equip-card.mobile:nth-child(6) {
        margin-top: 25px;
    }

    .equipment > .equip-card.mobile:nth-child(7) {
        margin-top: -25px;
    }
}

/* Mobile landscape – 3’lü merdiven efekti */
@media (max-width:740px) and (orientation: landscape) {
    .equipment > .equip-card.mobile:nth-child(6) {
        margin-top: 25px;
    }

    .equipment > .equip-card.mobile:nth-child(7) {
        margin-top: 0px;
    }

    .equipment > .equip-card.mobile:nth-child(8) {
        margin-top: -25px;
    }
}