/*
 * visQo katalog (Filmler / Diziler / Platform) modern katman.
 * catalog-v680.css ve sayfa içi stillerin ÜSTÜNE yüklenir; yalnızca görünümü değiştirir.
 * Seçiciler "html body ..." ile başlar: eski kurallardaki !important'ları ezmek için.
 */

/* ---------- Yerleşim: yapışkan filtre paneli, nefes alan ızgara ---------- */
@media (min-width: 1100px) {
    html body .vq-catalog-shell .vq-discovery-layout-final {
        grid-template-columns: 272px minmax(0, 1fr) !important;
        gap: 30px !important;
        align-items: start !important;
    }
    html body .vq-catalog-shell .vq-discovery-filter-final {
        position: sticky !important;
        top: 96px !important;
        max-height: calc(100vh - 112px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .15) transparent;
    }
    html body .vq-catalog-shell .vq-movie-grid,
    html body .vq-platforms-page .vq-movie-grid {
        grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)) !important;
        gap: 26px 18px !important;
    }
}

/* ---------- Filtre paneli: cam kart, büyük ve dokunulabilir hap'lar ---------- */
html body .vq-catalog-shell .vq-movie-filter {
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    padding: 20px 18px !important;
}
html body .vq-catalog-shell .vq-filter-heading {
    margin-bottom: 16px !important;
}
html body .vq-catalog-shell .vq-filter-reset {
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .06) !important;
    color: rgba(255, 255, 255, .7) !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: background .2s, color .2s;
}
html body .vq-catalog-shell .vq-filter-reset:hover {
    background: rgba(168, 85, 247, .18) !important;
    color: #fff !important;
}
html body .vq-catalog-shell .vq-filter-genres {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 16px 0 !important;
}
html body .vq-catalog-shell .vq-filter-genre {
    margin: 0 !important;
    cursor: pointer;
}
html body .vq-catalog-shell .vq-filter-genre input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
html body .vq-catalog-shell .vq-filter-genre span {
    display: inline-flex !important;
    align-items: center !important;
    padding: 7px 13px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    color: rgba(255, 255, 255, .8) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
html body .vq-catalog-shell .vq-filter-genre:hover span {
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: #fff !important;
}
html body .vq-catalog-shell .vq-filter-genre input:checked + span {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(139, 92, 246, .38) !important;
}
html body .vq-catalog-shell .vq-filter-genre input:focus-visible + span {
    outline: 2px solid #c4b5fd;
    outline-offset: 2px;
}
html body .vq-catalog-shell .vq-four-filter-toggle,
html body .vq-catalog-shell .vq-filter-mood-toggle {
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    transition: background .2s, border-color .2s;
}
html body .vq-catalog-shell .vq-four-filter-toggle:hover,
html body .vq-catalog-shell .vq-filter-mood-toggle:hover {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(168, 85, 247, .35) !important;
}

/* ---------- Sonuç başlığı: büyük başlık, sayaç hap'ı, sıralama ---------- */
html body .vq-catalog-shell .vq-movie-results {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap;
    margin: 0 0 24px !important;
    padding: 0 0 18px !important;
    background: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body .vq-catalog-shell .vq-catalog-results-kicker {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    background: linear-gradient(90deg, #a78bfa, #f0abfc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}
html body .vq-catalog-shell .vq-catalog-results-title h2 {
    font-size: clamp(24px, 2.4vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    color: #fff !important;
    margin: 0 !important;
}
html body .vq-catalog-shell .vq-movie-result-info {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: rgba(168, 85, 247, .14) !important;
    border: 1px solid rgba(168, 85, 247, .3) !important;
    color: #e9d5ff !important;
    font-size: 12px !important;
}
html body .vq-catalog-shell .vq-movie-result-info strong {
    color: #fff !important;
}
html body .vq-catalog-shell .vq-movie-sort {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-width: 190px;
    height: 42px !important;
    padding: 0 40px 0 16px !important;
    border-radius: 999px !important;
    background-color: rgba(255, 255, 255, .06) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}
html body .vq-catalog-shell .vq-movie-sort:hover,
html body .vq-catalog-shell .vq-movie-sort:focus {
    border-color: rgba(168, 85, 247, .5) !important;
    background-color: rgba(255, 255, 255, .09) !important;
    outline: none;
}
html body .vq-catalog-shell .vq-movie-sort option {
    background: #111827;
    color: #fff;
}

/* ---------- Kartlar: çerçevesiz poster, yumuşak gölge, üzerine gelince canlanma ---------- */
html body .vq-catalog-shell .vq-movie-card,
html body .vq-platforms-page .vq-movie-card {
    display: block !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 16px !important;
    overflow: visible !important;
    padding: 0 !important;
    text-decoration: none !important;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1) !important;
}
html body .vq-catalog-shell .vq-movie-poster,
html body .vq-platforms-page .vq-movie-poster {
    position: relative !important;
    aspect-ratio: 2 / 3;
    height: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #0f1420 !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35) !important;
    transition: box-shadow .3s, border-color .3s !important;
}
html body .vq-catalog-shell .vq-movie-poster img,
html body .vq-platforms-page .vq-movie-poster img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1) !important;
}
html body .vq-catalog-shell .vq-movie-poster::after,
html body .vq-platforms-page .vq-movie-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 8, 15, 0) 45%, rgba(5, 8, 15, .88) 100%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
html body .vq-catalog-shell .vq-movie-cta,
html body .vq-platforms-page .vq-movie-cta {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(124, 58, 237, .45);
    opacity: 0;
    transform: translate(-50%, 10px);
    transition: opacity .3s, transform .3s;
    pointer-events: none;
}
html body .vq-catalog-shell .vq-movie-rating,
html body .vq-platforms-page .vq-movie-rating {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    z-index: 2;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: rgba(8, 10, 18, .62) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .14) !important;
    color: #ffd84d !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}
html body .vq-catalog-shell .vq-movie-info,
html body .vq-platforms-page .vq-movie-info {
    padding: 12px 2px 0 !important;
    background: none !important;
    border: 0 !important;
}
html body .vq-catalog-shell .vq-movie-name,
html body .vq-platforms-page .vq-movie-name {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    white-space: normal !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
    color: #f4f4f8 !important;
    transition: color .2s;
}
html body .vq-catalog-shell .vq-movie-meta,
html body .vq-platforms-page .vq-movie-meta {
    display: flex !important;
    gap: 8px !important;
    margin-top: 5px !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, .5) !important;
}
html body .vq-catalog-shell .vq-movie-meta span + span::before,
html body .vq-platforms-page .vq-movie-meta span + span::before {
    content: "•";
    margin-right: 8px;
    opacity: .6;
}
@media (hover: hover) {
    html body .vq-catalog-shell .vq-movie-card:hover,
    html body .vq-platforms-page .vq-movie-card:hover {
        transform: translateY(-6px) !important;
    }
    html body .vq-catalog-shell .vq-movie-card:hover .vq-movie-poster,
    html body .vq-platforms-page .vq-movie-card:hover .vq-movie-poster {
        border-color: rgba(168, 85, 247, .55) !important;
        box-shadow: 0 18px 40px rgba(124, 58, 237, .28) !important;
    }
    html body .vq-catalog-shell .vq-movie-card:hover .vq-movie-poster img,
    html body .vq-platforms-page .vq-movie-card:hover .vq-movie-poster img {
        transform: scale(1.07) !important;
    }
    html body .vq-catalog-shell .vq-movie-card:hover .vq-movie-poster::after,
    html body .vq-platforms-page .vq-movie-card:hover .vq-movie-poster::after,
    html body .vq-catalog-shell .vq-movie-card:hover .vq-movie-cta,
    html body .vq-platforms-page .vq-movie-card:hover .vq-movie-cta {
        opacity: 1;
    }
    html body .vq-catalog-shell .vq-movie-card:hover .vq-movie-cta,
    html body .vq-platforms-page .vq-movie-card:hover .vq-movie-cta {
        transform: translate(-50%, 0);
    }
    html body .vq-catalog-shell .vq-movie-card:hover .vq-movie-name,
    html body .vq-platforms-page .vq-movie-card:hover .vq-movie-name {
        color: #d8b4fe !important;
    }
}
html body .vq-catalog-shell .vq-movie-card:focus-visible,
html body .vq-platforms-page .vq-movie-card:focus-visible {
    outline: 2px solid #c4b5fd;
    outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
    html body .vq-catalog-shell .vq-movie-card,
    html body .vq-catalog-shell .vq-movie-poster img,
    html body .vq-platforms-page .vq-movie-card,
    html body .vq-platforms-page .vq-movie-poster img {
        transition: none !important;
    }
}