/* =========================================================
   VISQO — BUZLU CAM (frosted glass): butonlar, modallar, menüler, toast'lar  (v8.99.24)
   Sayfa arka planı ve sayfa panelleri/kartları kendi halinde. Film/dizi detay sayfaları movie.css'te kendi cam yüzeyine sahip;
   buraya dahil değil. Admin sayfaları kapsam dışı. Sayfa içi <style> blokları sonradan geldiği için `html body` önekiyle ve
   !important ile yazıldı.

   Buton dili (detay sayfasındaki Fragman / Listeye Ekle / Takip Ediliyor referansı):
   - nötr buton: üstten alta hafif ışık degradesi, yarı saydam koyu zemin, ince çerçeve, blur, iç parlama
   - seçili / aktif: mor tonlu cam (ışık + mor degrade, mor çerçeve, hafif mor gölge)
   - hero eylem düğmesi: beyaz tonlu cam
   - büyük mor ana eylem düğmeleri (Satın al, Kaydet…) degradesini korur, yalnızca cam parlaması ve çerçeve alır
   ========================================================= */

:root {
    --vq-glass-bg-strong: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03) 55%), rgba(12, 16, 28, .68);
    --vq-glass-border-strong: 1px solid rgba(255, 255, 255, .13);
    --vq-glass-blur: blur(22px) saturate(1.45);
    --vq-glass-blur-strong: blur(30px) saturate(1.55);
    --vq-glass-shadow-strong: 0 24px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1);

    --vq-btn-glass: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)), rgba(16, 20, 32, .38);
    --vq-btn-glass-hover: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)), rgba(16, 20, 32, .38);
    --vq-btn-border: 1px solid rgba(255, 255, 255, .15);
    --vq-btn-blur: blur(18px) saturate(1.5);
    --vq-btn-shadow: 0 8px 24px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .14);
    --vq-btn-accent: linear-gradient(180deg, rgba(167, 139, 250, .5), rgba(109, 40, 217, .34)), rgba(24, 16, 48, .42);
    --vq-btn-accent-border: 1px solid rgba(216, 180, 254, .5);
    --vq-btn-accent-shadow: 0 8px 26px rgba(124, 58, 237, .32), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* ---- 1) Nötr butonlar, çipler, arama / seçim alanları ---- */
html body :is(
    /* genel */
    .vq-create-btn, .vyra-new, .vq-personal-button, .profile-card-social-stat, .vq-list-remove,
    .vqs-btn:not(.primary), .vqig-btn:not(.primary), .vqm-btn.ghost, .vqs-share, .vqg-share,
    .vqt10-arrow, .vq-random-shuffle, .vq-help-pill,
    /* katalog (filmler / diziler) */
    .mv-btn--ghost, .mv-icon-btn, .mv-search, .mv-select, .mv-segment,
    .mv-chip span, .mv-chip--all:not(.is-on),
    /* akış, profil, VYRA, vMarket, birlikte */
    .fd-chip:not(.is-on), .profile-social-btn, .vq-profile-library-tab:not(.is-active), .vqac-btn,
    .vyra-prompt, .vyra-platform-btn, .vqm-select, .vqs-select, .vqm-tab:not(.is-on), .vqs-seg,
    /* modal düğmeleri */
    .swal2-styled.swal2-cancel, .swal2-styled.swal2-deny
) {
    background: var(--vq-btn-glass) !important;
    border: var(--vq-btn-border) !important;
    color: #fff;
    -webkit-backdrop-filter: var(--vq-btn-blur);
    backdrop-filter: var(--vq-btn-blur);
    box-shadow: var(--vq-btn-shadow) !important;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
html body :is(
    .vq-create-btn, .vyra-new, .vq-personal-button, .profile-card-social-stat, .vq-list-remove,
    .vqs-btn:not(.primary), .vqig-btn:not(.primary), .vqm-btn.ghost, .vqs-share, .vqg-share,
    .vqt10-arrow, .vq-random-shuffle,
    .mv-btn--ghost, .mv-icon-btn, .mv-search, .mv-select, .mv-chip span, .mv-chip--all:not(.is-on),
    .fd-chip:not(.is-on), .profile-social-btn, .vq-profile-library-tab:not(.is-active), .vqac-btn,
    .vyra-prompt, .vyra-platform-btn, .vqm-select, .vqs-select, .vqm-tab:not(.is-on), .vqs-seg,
    .swal2-styled.swal2-cancel, .swal2-styled.swal2-deny
):hover {
    background: var(--vq-btn-glass-hover) !important;
    border-color: rgba(255, 255, 255, .26) !important;
}
/* Seçim alanları (select) metni açık, ok işareti korunur */
html body :is(.mv-select select, .vqm-select, .vqs-select) { color: #fff !important; }

/* ---- 2) Seçili / aktif durum: mor tonlu cam ---- */
html body :is(
    .mv-chip--all.is-on, .mv-chip input:checked + span, .mv-segment input:checked + span,
    .fd-chip.is-on, .vq-profile-library-tab.is-active, .vqm-tab.is-on,
    .vqs-seg button[aria-pressed="true"], .vq-search-page-form button
) {
    background: var(--vq-btn-accent) !important;
    border: var(--vq-btn-accent-border) !important;
    color: #fff !important;
    -webkit-backdrop-filter: var(--vq-btn-blur);
    backdrop-filter: var(--vq-btn-blur);
    box-shadow: var(--vq-btn-accent-shadow) !important;
}

/* ---- 3) Hero eylem düğmesi ("Filme git") ve hero etiketleri ---- */
html body .mv-spotlight .mv-btn--primary {
    background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .12)), rgba(20, 24, 38, .34) !important;
    border: 1px solid rgba(255, 255, 255, .3) !important;
    color: #fff !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .32) !important;
}
html body .mv-spotlight .mv-btn--primary:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .18)), rgba(20, 24, 38, .34) !important; }
html body .mv-spotlight .mv-btn--primary i { color: #c4b5fd; }
html body .mv-spotlight-meta > span, html body .mv-spotlight-meta > .mv-tag {
    height: 30px !important;
    border-radius: 999px !important;
    background: var(--vq-btn-glass) !important;
    border: var(--vq-btn-border) !important;
    -webkit-backdrop-filter: var(--vq-btn-blur);
    backdrop-filter: var(--vq-btn-blur);
    box-shadow: var(--vq-btn-shadow) !important;
}
html body .mv-spotlight-meta > .mv-star { background: linear-gradient(180deg, rgba(245, 197, 66, .22), rgba(245, 197, 66, .08)), rgba(30, 24, 10, .38) !important; border-color: rgba(245, 197, 66, .42) !important; }

/* ---- 4) Katalog hero'sunun alt kenarı sayfa rengine bulanıklaşarak erir (çizgi belli olmaz) ---- */
html body .mv-spotlight::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: min(300px, 44%);
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(9, 14, 23, 0) 0%, rgba(9, 14, 23, .42) 45%, rgba(9, 14, 23, .86) 78%, #090e17 100%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .55) 38%, #000 82%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .55) 38%, #000 82%);
}
html body .mv-spotlight-inner { position: relative; z-index: 1; }

/* ---- 5) Büyük mor ana eylem düğmeleri: degrade korunur, cam parlaması + çerçeve ---- */
html body :is(.mv-drawer .mv-btn--primary, .vqm-btn:not(.ghost):not(.ok):not(.muted), .vqig-btn.primary) {
    border: 1px solid rgba(255, 255, 255, .24) !important;
    box-shadow: 0 10px 30px rgba(124, 58, 237, .36), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}

/* ---- 6) Açılır menüler ve paneller ---- */
html body :is(
    .vqh-profile-menu, .vqh-mobile-menu, .vqh-genres-modal, .vq-notification-panel, .vq-feedback-menu, .vq-search-panel,
    .vq-msg-menu, .vq-list-menu, .vq-genres-panel, .vq-genres-modal, .visqo-emoji-panel, .vq-global-daily-panel,
    .vq-vibe-score-popover, .vq-content-search-popup, .vq-qd-panel, .vq-personal-score-panel, .vq-ra-panel, .vq-cc-panel,
    .vq-four-filter-panel, .vq-genre-new-panel, .vq-episodes-panel, .vqa-panel, .vqf-panel, .vq-u-panel, .vq-ob-panel,
    .vq-tabsheet, .vqm-panel, .vqh-search-field, .vqh-search-x
) {
    background: var(--vq-glass-bg-strong) !important;
    border: var(--vq-glass-border-strong) !important;
    -webkit-backdrop-filter: var(--vq-glass-blur-strong);
    backdrop-filter: var(--vq-glass-blur-strong);
    box-shadow: var(--vq-glass-shadow-strong) !important;
}
/* Üst çubuğun (kendisi backdrop-filter'lı) içindeki menüler: tarayıcı backdrop-filter'ı en yakın "backdrop root" ata kadar
   örnekler, yani menü sayfayı değil yalnızca çubuğun içini bulanıklaştırabilir. Bu menülerde zemin daha opak tutulur. */
html body :is(.vqh-profile-menu, .vqh-mobile-menu, .vq-notification-panel, .vq-search-panel, .vq-feedback-menu, .vq-msg-menu, .vqh-genres-modal) {
    background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025) 55%), rgba(11, 15, 26, .9) !important;
}

/* ---- 7) Modallar: cam diyalog + bulanık perde (katalog filtre çekmecesi dahil) ---- */
html body :is(
    .vq-list-modal-box, .vq-home-detail-dialog, .vq-collection-dialog, .vq-reason-dialog, .vq-mood-trailer-dialog,
    .vq-u-dialog, .vq-modern-modal .vq-modern-modal-box, .vq-ce-modal, .vq-avatar-crop-modal, .vq-follow-list-modal,
    .vq-together-modal > div, .vq-video-modal > div, .mv-drawer,
    .swal2-popup, .vq-swal-popup, .vq-ob-swal-popup
) {
    background: var(--vq-glass-bg-strong) !important;
    border: var(--vq-glass-border-strong) !important;
    -webkit-backdrop-filter: var(--vq-glass-blur-strong);
    backdrop-filter: var(--vq-glass-blur-strong);
    box-shadow: var(--vq-glass-shadow-strong) !important;
    color: #eef2f7;
}
html body .mv-drawer-foot { background: rgba(8, 11, 20, .32) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html body :is(
    .vq-list-modal, .vq-list-overlay, .vq-home-detail-modal, .vq-collection-modal, .vq-reason-modal, .vq-mood-trailer-modal,
    .vq-modern-modal, .vq-u-modal, .vq-ce-video-modal, .vq-together-modal, .vq-video-modal, .vq-preview-overlay,
    .vqh-genres-overlay, .swal2-container, .mv-drawer-backdrop
) {
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
}
html body .swal2-container.swal2-backdrop-show, html body .swal2-container { background: rgba(4, 6, 12, .46) !important; }

/* ---- 8) Bildirim / toast'lar ---- */
html body :is(.vq-swal-toast, .swal2-toast, .vqegg-toast, .vq-message-toast, .vqm-toast, .vq-vm-toast, .vq-u-toast, .vq-toast, .vq-feedback-toast) {
    background: var(--vq-glass-bg-strong) !important;
    border: var(--vq-glass-border-strong) !important;
    -webkit-backdrop-filter: var(--vq-glass-blur);
    backdrop-filter: var(--vq-glass-blur);
    box-shadow: var(--vq-glass-shadow-strong) !important;
}

/* ---- 9) Modal içi form alanları: cam içinde hafif çukur ---- */
html body :is(.vq-modern-modal-input, .swal2-input, .swal2-textarea) {
    background: rgba(0, 0, 0, .26) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    color: #eef2f7 !important;
}

/* backdrop-filter desteklemeyen tarayıcıda cam yüzeyler okunur kalsın */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html body :is(.vqh-profile-menu, .vq-notification-panel, .vq-search-panel, .swal2-popup, .vq-list-modal-box, .vq-home-detail-dialog, .mv-drawer) {
        background: rgba(14, 18, 30, .94) !important;
    }
}

/* Arama ve seçim alanlarında odak halkası (nötr çerçeve kuralı !important olduğu için burada da !important) */
html body :is(.mv-search, .mv-select):focus-within { border-color: rgba(192, 132, 252, .6) !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, .18), var(--vq-btn-shadow) !important; }