/* Reels Responsive Layout & Touch Fixes */

/* Masaüstü Varsayılan (5 item) */
.reels-track {
    display: flex;
    gap: 15px;
    /* Boşluğu azalttık */
    cursor: grab;
    /* Mouse imleci */
}

.reels-track:active {
    cursor: grabbing;
}

.reel-item {
    /* 5 tane sığacak: (100% / 5) - gap payı */
    flex: 0 0 calc(20% - 12px) !important;
    max-width: calc(20% - 12px) !important;
    user-select: none;
}

.reel-thumbnail {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9/16;
    /* Dikey oran */
}

/* Tablet (Small) */
@media (max-width: 991px) {
    .reel-item {
        /* 3 tane sığacak */
        flex: 0 0 calc(33.333% - 10px) !important;
        max-width: calc(33.333% - 10px) !important;
    }
}

/* Mobil (Extra Small) */
@media (max-width: 767px) {
    .reels-slider-wrapper {
        padding: 0 10px !important;
    }

    .reels-track {
        gap: 10px;
    }

    .reel-item {
        /* 2 tane sığacak: (100% / 2) - gap payı */
        flex: 0 0 calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
    }
}

/* Ad Reels Responsive (Aynısını Reklam Slider için de uyguluyoruz) */
.ad-reels-track {
    gap: 15px;
    cursor: grab;
}

.ad-reels-track:active {
    cursor: grabbing;
}

.ad-reel-item {
    flex: 0 0 calc(20% - 12px) !important;
    max-width: calc(20% - 12px) !important;
    user-select: none;
}

.ad-reel-thumbnail {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9/16;
}

@media (max-width: 991px) {
    .ad-reel-item {
        flex: 0 0 calc(33.333% - 10px) !important;
        max-width: calc(33.333% - 10px) !important;
    }
}

@media (max-width: 767px) {
    .ad-reels-slider-wrapper {
        padding: 0 10px !important;
    }

    .ad-reels-track {
        gap: 10px;
    }

    .ad-reel-item {
        flex: 0 0 calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
    }
}
/* Reels Overlay (Siyah Karartý) */
.reel-overlay, .ad-reel-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%) !important;
    display: flex !important;
    align-items: center; justify-content: center;
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.4s ease;
    z-index: 2;
}

/* Hover durumunda karartýyý biraz aç */
.reel-item:hover .reel-overlay, .ad-reel-item:hover .ad-reel-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Siyah Beyaz (Grayscale) Efekt */
.reel-thumbnail video, .ad-reel-thumbnail video,
.reel-thumbnail img, .ad-reel-thumbnail img {
    filter: grayscale(100%) !important;
    transition: filter 0.4s ease !important;
}

/* Hoverda Renkli Olan */
.reel-item:hover video, .ad-reel-item:hover video,
.reel-item:hover img, .ad-reel-item:hover img {
    filter: grayscale(0%) !important;
}

/* Overlay'i kaldýr (Siyahlýk yerine grayscale kullanýlýyor) */
.reel-overlay, .ad-reel-overlay {
    background: transparent !important;
    /* Play butonu görünsün diye display açýk kalabilir ama arka plan þeffaf */
}

/* Play Butonu Tasarýmý (Sarý) */
.reel-play-btn, .ad-reel-play-btn {
    background: rgba(255, 188, 0, 0.9) !important; /* Sarý zemin */
    border: 2px solid #ffbc00 !important;
    box-shadow: 0 0 15px rgba(255, 188, 0, 0.4) !important;
}

.reel-play-btn i, .ad-reel-play-btn i {
    color: #000000 !important; /* Siyah ikon */
    margin-left: 3px; /* Optik dengeleme */
}

/* FAQ Play Butonu Sarý */
.ai-faq-video a { background-color: #ffbc00 !important; border-color: #ffbc00 !important; }
.ai-faq-video a:hover { background-color: #e5a900 !important; }
.ai-faq-video a svg path { fill: #000000 !important; }

/* Mobile Performance Optimizations */
@media (max-width: 767px) {
    .reel-thumbnail,
    .ad-reel-thumbnail {
        min-height: 280px;
        max-height: 400px;
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    }
    
    .reel-thumbnail video,
    .reel-thumbnail img,
    .ad-reel-thumbnail video,
    .ad-reel-thumbnail img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    
    /* Lazy video placeholder styling */
    .lazy-video:not([src]) {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    }
}

/* Loading animation for lazy videos */
.lazy-video {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    transition: opacity 0.3s ease;
}

.lazy-video.loaded {
    opacity: 1;
}