/* =========================================================

   VISQO — SOL FİLTRE PANELİ PREMIUM

   ========================================================= */





/* Ana filtre kutusu */

.vq-movie-filter {

    position: relative;

    overflow: hidden;

    padding: 18px;

    border: 1px solid rgba(255,255,255,.075);

    border-radius: 20px;



    background:

        radial-gradient(

            circle at 100% 0,

            rgba(124,77,255,.10),

            transparent 34%

        ),

        linear-gradient(

            180deg,

            rgba(16,26,43,.96),

            rgba(9,15,25,.97)

        );



    box-shadow:

        0 24px 60px rgba(0,0,0,.22),

        inset 0 1px 0 rgba(255,255,255,.025);



    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

}



/* Sağ üst dekoratif halka */

.vq-movie-filter::after {

    content: "";

    position: absolute;



    width: 150px;

    height: 150px;



    right: -85px;

    top: -85px;



    border-radius: 50%;



    border: 1px solid rgba(139,92,246,.12);



    box-shadow:

        0 0 0 24px rgba(139,92,246,.025);



    pointer-events: none;

}



/* =========================================================

   FİLTRE BAŞLIĞI

   ========================================================= */



.vq-filter-heading {

    position: relative;

    z-index: 1;



    display: flex;

    align-items: center;

    justify-content: space-between;



    gap: 10px;



    padding-bottom: 15px;

    margin-bottom: 14px;



    border-bottom: 1px solid rgba(255,255,255,.055);

}



.vq-filter-heading-left {

    display: flex;

    align-items: center;

    gap: 9px;



    color: #f0f2f7;



    font-size: 12px;

    font-weight: 850;

}



.vq-filter-heading-left i {

    width: 28px;

    height: 28px;



    display: flex;

    align-items: center;

    justify-content: center;



    border: 1px solid rgba(139,92,246,.22);

    border-radius: 9px;



    background: rgba(124,77,255,.10);



    color: #a98aff;



    box-shadow:

        0 5px 18px rgba(124,77,255,.08);

}



.vq-filter-reset {

    color: #707d91 !important;



    font-size: 8px !important;

    font-weight: 800 !important;



    text-decoration: none !important;



    transition:

        color .2s ease,

        transform .2s ease;

}



.vq-filter-reset:hover {

    color: #a78bfa !important;

    transform: translateY(-1px);

}



/* =========================================================

   FİLTRE AÇ/KAPA

   ========================================================= */



.vq-four-filter-toggle {

    width: 100%;



    display: flex;

    align-items: center;

    justify-content: space-between;



    gap: 10px;



    padding: 11px 12px;



    border: 1px solid rgba(255,255,255,.06);

    border-radius: 11px;



    background: rgba(255,255,255,.025);



    color: #aeb8c8;



    font-size: 9px;

    font-weight: 800;



    cursor: pointer;



    transition:

        border-color .2s ease,

        background .2s ease,

        color .2s ease;

}



.vq-four-filter-toggle:hover {

    border-color: rgba(139,92,246,.24);



    background:

        linear-gradient(

            135deg,

            rgba(124,77,255,.10),

            rgba(124,77,255,.035)

        );



    color: #fff;

}



.vq-four-toggle-icon {

    color: #9c7aff;



    transition:

        transform .25s ease;

}



/* Açık durum kullanıyorsan */

.vq-four-filter-toggle.active .vq-four-toggle-icon {

    transform: rotate(180deg);

}



/* =========================================================

   FİLTRE PANELİ

   ========================================================= */



.vq-four-filter-panel {

    overflow: hidden;

}



/* Yıl / puan / dil gibi alanlar */

.vq-four-filter-grid {

    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 8px;



    padding: 10px 0 2px;

}



.vq-filter-single-label {

    display: block;



    margin-bottom: 5px;



    color: #58667a;



    font-size: 7px;

    font-weight: 900;



    letter-spacing: .8px;

}



.vq-filter-single select {

    width: 100%;

    height: 32px;



    padding: 0 8px;



    border: 1px solid rgba(255,255,255,.06);

    border-radius: 8px;



    outline: none;



    background: #0a111d;



    color: #aeb8c8;



    font-size: 8px;

    font-weight: 700;



    transition:

        border-color .2s ease,

        background .2s ease;

}



.vq-filter-single select:hover,

.vq-filter-single select:focus {

    border-color: rgba(139,92,246,.30);



    background: #0d1625;



    color: #fff;

}



/* =========================================================

   TÜR BUTONLARI

   ========================================================= */



.vq-filter-genres {

    display: flex;

    flex-wrap: wrap;



    gap: 6px;



    margin-top: 13px;

}



.vq-filter-genre {

    margin: 0 !important;



    cursor: pointer;

}



.vq-filter-genre input {

    position: absolute;



    opacity: 0;



    pointer-events: none;

}



.vq-filter-genre span {

    display: block;



    padding: 7px 8px;



    border: 1px solid rgba(255,255,255,.055);

    border-radius: 8px;



    background: rgba(255,255,255,.025);



    color: #768397;



    font-size: 8px;

    line-height: 1;

    font-weight: 750;



    transition:

        color .2s ease,

        border-color .2s ease,

        background .2s ease,

        box-shadow .2s ease,

        transform .2s ease;

}



.vq-filter-genre:hover span {

    color: #d7d0ed;



    border-color: rgba(139,92,246,.22);



    background: rgba(124,77,255,.07);



    transform: translateY(-1px);

}



/* Seçilmiş tür */

.vq-filter-genre input:checked + span {

    color: #fff;



    border-color: rgba(139,92,246,.42);



    background:

        linear-gradient(

            135deg,

            rgba(124,77,255,.22),

            rgba(124,77,255,.08)

        );



    box-shadow:

        0 0 20px rgba(124,77,255,.08),

        inset 0 1px 0 rgba(255,255,255,.035);

}



/* =========================================================

   MOBİL

   ========================================================= */



@media (max-width: 1050px) {



    .vq-discovery-filter-final {

        position: relative;

        top: auto;

    }



    .vq-movie-filter {

        padding: 15px;

    }



}



@media (max-width: 600px) {



    .vq-movie-filter {

        padding: 13px;



        border-radius: 16px;

    }



    .vq-filter-heading {

        padding-bottom: 12px;

        margin-bottom: 11px;

    }



    .vq-filter-heading-left {

        font-size: 11px;

    }



    .vq-filter-heading-left i {

        width: 26px;

        height: 26px;

    }



    .vq-four-filter-grid {

        grid-template-columns: 1fr 1fr;

        gap: 7px;

    }



    .vq-filter-genres {

        gap: 5px;

    }



    .vq-filter-genre span {

        padding: 6px 7px;

        font-size: 7px;

    }



}