.video-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 100px;
    overflow: hidden;
}

.video-fixed {
    width: 100%;
    max-width: 280px;
    max-height: 420px;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

        .video-banner video:hover {
            transform: scale(1.02);
        }

@media screen and (max-width: 768px) {
    .video-banner {
        flex-direction: column;
        align-items: center;
    }

        .video-banner video {
            max-width: 90%;
        }
}

.popup-h {
    max-height: 800px; /* veya 50vh */
    overflow-y: auto;
}

@media (max-width: 768px) {
    .popup-h {
        max-height: 300px;
    }
}

/* Kart üstünde hover efektleri */
.topbar-product-card {
    position: relative;
    overflow: hidden;
}

    .topbar-product-card .product-button,
    .topbar-product-card .wishlistadd {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .25s ease, transform .25s ease;
        pointer-events: none;
    }

    .topbar-product-card:hover .product-button,
    .topbar-product-card:hover .wishlistadd,
    .topbar-product-card:focus-within .product-button,
    .topbar-product-card:focus-within .wishlistadd {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Butonların ortalanması (desktop için) */
    .topbar-product-card .product-button {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        gap: .5rem;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }

    /* Wishlist kalbi sağ üstte dursun */
    .topbar-product-card .wishlistadd {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
    }

    /* Hover’da hafif karartma (opsiyonel) */
    .topbar-product-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.0);
        transition: background .25s ease;
        z-index: 1;
    }

    .topbar-product-card:hover::after,
    .topbar-product-card:focus-within::after {
        background: rgba(0,0,0,.08);
    }

/* Mobilde butonlar zaten d-lg-none ile farklı; onun görünürlüğünü bozma */
@media (max-width: 991.98px) {
    .topbar-product-card .product-button {
        display: none !important;
    }
}