/* ──────────────────────────────────────────────────────────────
   LOOR – style.css
   Modern Premium Dark Theme – 2025
   ──────────────────────────────────────────────────────────────── */

/* ──── Reset & Base ─────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* ── Sinematik Renk Paleti ── */
    --bg-primary: #0d0d0d;
    --bg-secondary: #151515;
    --bg-card: #181818;
    --bg-modal: #111111;
    --bg-input: rgba(255, 255, 255, 0.06);
    --bg-header: rgba(8, 8, 8, 0.60);
    --bg-header-scrolled: rgba(8, 8, 8, 0.96);
    --border-color: rgba(255, 255, 255, 0.07);
    --border-hover: rgba(255, 255, 255, 0.15);

    /* ── Vurgu: CineStream Sarı ── */
    --accent: #F5C518;
    --accent-2: #FFD700;
    --accent-hover: #e8b800;
    --accent-glow: rgba(245, 197, 24, 0.35);
    --accent-subtle: rgba(245, 197, 24, 0.08);

    /* ── Tipografi ── */
    --text-primary: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.45);
    --text-inverse: #000000;

    /* ── Gölgeler ── */
    --shadow-color: rgba(0, 0, 0, 0.80);
    --shadow: 0 8px 48px var(--shadow-color);
    --shadow-lg: 0 16px 56px rgba(0, 0, 0, 0.80);
    --shadow-card: 0 4px 28px rgba(0, 0, 0, 0.60);

    /* ── Renk Aksan ── */
    --green: #1fba72;
    --orange: #F5C518;
    --red: #c0392b;

    /* ── Şekil & Geçiş ── */
    --radius: 10px;
    --radius-lg: 16px;
    --transition: .25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-premium: .4s cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Glass ── */
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(20px);
}

/* Light theme */
[data-theme="light"] {
    --bg-primary: #f0f2f8;
    --bg-secondary: #e4e8f2;
    --bg-card: #ffffff;
    --bg-modal: #f8f9ff;
    --bg-input: rgba(0, 0, 0, 0.06);
    --bg-header: rgba(240, 242, 248, 0.90);
    --border-color: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.18);
    --text-primary: #0d0d1a;
    --text-muted: rgba(0, 0, 0, 0.45);
    --text-inverse: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.12);
    --glass-bg: rgba(0, 0, 0, 0.03);
    --glass-border: rgba(0, 0, 0, 0.07);
}

/* AMOLED theme */
[data-theme="amoled"] {
    --bg-primary: #000000;
    --bg-secondary: #050505;
    --bg-card: #090909;
    --bg-modal: #030303;
    --bg-input: rgba(255, 255, 255, 0.05);
    --bg-header: rgba(0, 0, 0, 0.95);
    --border-color: rgba(255, 255, 255, 0.06);
}

/* Blue theme */
[data-theme="blue"] {
    --bg-primary: #050d1a;
    --bg-secondary: #081020;
    --bg-card: #0a1428;
    --bg-modal: #06101e;
    --bg-input: rgba(100, 160, 255, 0.08);
    --bg-header: rgba(5, 13, 26, 0.90);
    --border-color: rgba(100, 160, 255, 0.12);
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-glow: rgba(59, 130, 246, 0.35);
    --accent-2: #60a5fa;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Ambient Background Glow ── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    will-change: auto;
    background:
        radial-gradient(ellipse 70% 45% at 15% 0%, rgba(245, 197, 24, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 55% 35% at 85% 100%, rgba(90, 70, 140, 0.04) 0%, transparent 55%);
}

/* ══════════════════════════════════════════════════════════════
   TAM EKRAN KATEGORÄ° ARKA PLAN SAHNESÄ°
══════════════════════════════════════════════════════════════ */
#category-bg-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* İki katman: çapraz fade için */
.category-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease;
    /* YavaÅŸ Ken Burns zoom efekti */
    /* animation: bgSceneZoom — removed for perf */
}

.category-bg-layer.active {
    opacity: 1;
}

@keyframes bgSceneZoom {
    from {
        transform: scale(1.0);
    }

    to {
        transform: scale(1.08);
    }
}

/* Koyu vignette – içerikleri okunabilir kılar */
#category-bg-vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.45) 40%,
            rgba(0, 0, 0, 0.55) 70%,
            rgba(0, 0, 0, 0.85) 100%),
        linear-gradient(to right,
            rgba(0, 0, 0, 0.3) 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.3) 100%);
}

/* Arka plan sahnesi aktifken body'yi şeffaflaştır */
body.has-category-bg {
    background-color: transparent;
}

/* Tüm sayfa içeriği arka planın önünde olsun */
header,
#auth-screen,
#profile-setup,
#featured-hero,
#genre-hero,
#category-bar,
#continue-panel,
#filter-panel,
.section-header,
#movie-container,
#scroll-sentinel,
#loader,
#toast-container,
#modal-overlay {
    position: relative;
    z-index: 10;
}

/* ── MOVIE GRID GİRİŞ ANİMASYONU ── */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#movie-container.slide-in .movie-card {
    opacity: 0;
    animation: slideInFromLeft 0.25s ease both;
}

#movie-container.slide-in .movie-card:nth-child(1) {
    animation-delay: 0.02s;
}

#movie-container.slide-in .movie-card:nth-child(2) {
    animation-delay: 0.04s;
}

#movie-container.slide-in .movie-card:nth-child(3) {
    animation-delay: 0.06s;
}

#movie-container.slide-in .movie-card:nth-child(4) {
    animation-delay: 0.08s;
}

#movie-container.slide-in .movie-card:nth-child(5) {
    animation-delay: 0.10s;
}

#movie-container.slide-in .movie-card:nth-child(6) {
    animation-delay: 0.12s;
}

#movie-container.slide-in .movie-card:nth-child(7) {
    animation-delay: 0.14s;
}

#movie-container.slide-in .movie-card:nth-child(8) {
    animation-delay: 0.16s;
}

#movie-container.slide-in .movie-card:nth-child(9) {
    animation-delay: 0.18s;
}

#movie-container.slide-in .movie-card:nth-child(10) {
    animation-delay: 0.20s;
}

#movie-container.slide-in .movie-card:nth-child(n+11) {
    animation-delay: 0.22s;
}

/* â"€â"€ HEADER â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 40px;
    background: var(--bg-header);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    flex-wrap: wrap;
    contain: layout;
    transition: background 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Scroll edilince glassmorphism aktif */
header.scrolled {
    background: var(--bg-header-scrolled);
    border-bottom-color: var(--glass-border);
    box-shadow: 0 1px 0 var(--glass-border), 0 8px 40px rgba(0, 0, 0, 0.5);
}

.logo {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
    color: var(--text-primary);
    cursor: default;
    user-select: none;
    text-transform: uppercase;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--accent);
    border-radius: 6px;
    flex-shrink: 0;
}

.logo-icon svg {
    width: 14px;
    height: 14px;
    fill: #000;
}

.logo span.logo-accent {
    color: var(--accent);
}

/* Nokta kaldırıldı – play icon var artık */
.logo::after {
    display: none;
}

@keyframes logoGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ── Arama İkonu (her zaman görünür) ── */
#search-icon-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: color var(--transition), background var(--transition);
    flex-shrink: 0;
}

#search-icon-btn:hover {
    color: var(--text-primary);
    background: var(--glass-bg);
}

/* Arama formu – gizlenebilir */
#search-form {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    overflow: hidden;
    flex: 1;
    max-width: 340px;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition),
        max-width var(--transition), opacity var(--transition);
    position: relative;
    backdrop-filter: blur(6px);
    opacity: 1;
}

#search-form.search-collapsed {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
    border-color: transparent;
    overflow: hidden;
    padding: 0;
    margin: 0;
    min-width: 0;
}

#search-form:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow), 0 4px 20px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.09);
}

#search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 9px 16px;
    font-size: .9rem;
    font-family: inherit;
    outline: none;
    min-width: 0;
}

#search-input::placeholder {
    color: var(--text-muted);
}

#search-form button[type="submit"] {
    background: var(--accent);
    border: none;
    color: #000;
    padding: 9px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background var(--transition), transform var(--transition);
    border-radius: 0 50px 50px 0;
    flex-shrink: 0;
    font-weight: 700;
}

#search-form button[type="submit"]:hover {
    background: var(--accent-hover);
}

.nav-tabs {
    display: flex;
    gap: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    align-items: center;
}

.nav-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 8px 20px;
    border-radius: 0;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    transition: color var(--transition), opacity var(--transition);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    position: relative;
}

.nav-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 1.5px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow), 0 0 20px var(--accent-glow);
    border-radius: 2px;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-btn:hover {
    color: var(--text-primary);
    opacity: 1;
}

.nav-btn:hover::after {
    width: 60%;
}

.nav-btn.active {
    color: var(--text-primary);
    background: transparent;
}

.nav-btn.active::after {
    width: 100%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow), 0 0 24px var(--accent-glow);
}

/* ══════════════════════════════════════════════════════════════
   PROFÄ°L SETUP EKRANI
══════════════════════════════════════════════════════════════ */
#profile-setup {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, .88);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: fadeIn .3s ease;
}

#profile-setup.hidden {
    display: none;
}

#profile-setup-box {
    background: var(--bg-modal);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 44px 52px;
    text-align: center;
    max-width: 540px;
    width: 92%;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.setup-logo {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 18px;
    color: var(--text-primary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

#profile-setup-box h2 {
    font-size: 1.7rem;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -0.4px;
}

#profile-setup-box p {
    color: var(--text-muted);
    font-size: .88rem;
    margin-bottom: 30px;
    line-height: 1.6;
}

#profile-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 22px;
}

.profile-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 16px 22px;
    border-radius: var(--radius);
    border: 2px solid var(--glass-border);
    transition: all var(--transition);
    background: var(--glass-bg);
    backdrop-filter: blur(6px);
}

.profile-item:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
    box-shadow: 0 8px 24px var(--accent-glow);
    background: var(--accent-subtle);
}

.profile-item-avatar {
    font-size: 2.6rem;
}

.profile-item span {
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}

#add-profile-btn {
    background: transparent;
    border: 1px dashed var(--border-hover);
    color: var(--text-muted);
    padding: 10px 26px;
    border-radius: 50px;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    font-family: inherit;
    transition: all var(--transition);
    margin-top: 6px;
}

#add-profile-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(229, 9, 20, 0.05);
}

#add-profile-form {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

#add-profile-form.hidden {
    display: none;
}

#new-profile-name {
    background: var(--bg-input);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 11px 18px;
    border-radius: 50px;
    font-size: .95rem;
    font-family: inherit;
    outline: none;
    width: 100%;
    max-width: 300px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

#new-profile-name:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

#avatar-picker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 320px;
}

.avatar-option {
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all var(--transition);
}

.avatar-option:hover {
    border-color: var(--border-hover);
    transform: scale(1.1);
}

.avatar-option.selected {
    border-color: var(--accent);
    background: rgba(229, 9, 20, .12);
    transform: scale(1.1);
}

#save-profile-btn {
    background: var(--accent);
    border: none;
    color: white;
    padding: 11px 32px;
    border-radius: 50px;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 700;
    font-family: inherit;
    transition: all var(--transition);
    box-shadow: 0 4px 16px var(--accent-glow);
}

#save-profile-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--accent-glow);
}

/* ══════════════════════════════════════════════════════════════
   AUTH EKRANI (Giriş / Kayıt Ol)
══════════════════════════════════════════════════════════════ */
#auth-screen {
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: rgba(0, 0, 0, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: fadeIn .3s ease;
}

#auth-screen.hidden {
    display: none;
}

#auth-box {
    background: var(--bg-modal);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 40px 44px;
    text-align: center;
    max-width: 420px;
    width: 92%;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
}

/* Auth Tabs */
.auth-tabs {
    display: flex;
    gap: 0;
    background: var(--bg-input);
    border-radius: 50px;
    padding: 4px;
    margin-bottom: 28px;
}

.auth-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 10px 0;
    border-radius: 50px;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 700;
    font-family: inherit;
    transition: all var(--transition);
}

.auth-tab.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 14px var(--accent-glow);
}

.auth-tab:not(.active):hover {
    color: var(--text-primary);
}

/* Auth Forms */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-form.hidden {
    display: none;
}

.auth-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-group input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 13px 18px 13px 44px;
    border-radius: var(--radius);
    font-size: .92rem;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.auth-input-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.auth-input-group input::placeholder {
    color: var(--text-muted);
}

.auth-input-icon {
    position: absolute;
    left: 14px;
    font-size: .95rem;
    opacity: .5;
    pointer-events: none;
}

.auth-toggle-pw {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: .95rem;
    opacity: .5;
    transition: opacity var(--transition);
    padding: 4px;
}

.auth-toggle-pw:hover {
    opacity: 1;
}

/* Submit button */
.auth-submit-btn {
    width: 100%;
    background: var(--accent);
    border: none;
    color: #fff;
    padding: 13px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: .95rem;
    font-weight: 700;
    font-family: inherit;
    transition: all var(--transition);
    box-shadow: 0 4px 16px var(--accent-glow);
    margin-top: 4px;
}

.auth-submit-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--accent-glow);
}

.auth-submit-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: var(--text-muted);
    font-size: .82rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--glass-border);
}

/* Google button */
.auth-google-btn {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 12px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all var(--transition);
}

.auth-google-btn:hover {
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}

.auth-google-btn svg {
    flex-shrink: 0;
}

/* Error message */
.auth-error {
    margin-top: 14px;
    padding: 10px 16px;
    background: rgba(192, 57, 43, .15);
    border: 1px solid rgba(192, 57, 43, .3);
    border-radius: var(--radius);
    color: #e74c3c;
    font-size: .84rem;
    font-weight: 600;
    text-align: center;
    white-space: pre-line;
    animation: fadeIn .2s ease;
}

.auth-error.hidden {
    display: none;
}

/* Loading spinner */
.auth-loading {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    backdrop-filter: blur(4px);
    z-index: 10;
}

.auth-loading.hidden {
    display: none;
}

.auth-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--glass-border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Popup logout button */

/* User photo in header (Google login) */
.header-profile-btn img.auth-photo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
}


/* ══════════════════════════════════════════════════════════════
   HEADER ACTIONS (Tema, Dil, Profil)
══════════════════════════════════════════════════════════════ */
.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.header-icon-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 7px 13px;
    border-radius: 50px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition);
    white-space: nowrap;
    position: relative;
    backdrop-filter: blur(6px);
}

.header-icon-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.badge {
    background: var(--accent);
    color: white;
    font-size: .6rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 50px;
    min-width: 17px;
    text-align: center;
    box-shadow: 0 2px 8px var(--accent-glow);
}

/* Dropdown menüler */
.lang-switcher,
.theme-switcher,
.profile-switcher {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    min-width: 170px;
    overflow: hidden;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.04);
    z-index: 500;
    animation: slideDown .18s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(6px);
}

.dropdown-menu.hidden {
    display: none;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dropdown-menu button,
.dropdown-menu hr {
    display: block;
    width: 100%;
}

.dropdown-menu button {
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 10px 16px;
    text-align: left;
    cursor: pointer;
    font-size: .84rem;
    font-weight: 600;
    font-family: inherit;
    transition: background var(--transition);
    letter-spacing: 0.1px;
}

.dropdown-menu button:hover {
    background: var(--glass-bg);
    color: var(--accent);
}

.dropdown-menu hr {
    border: none;
    border-top: 1px solid var(--glass-border);
    margin: 4px 0;
}

.profile-menu-item.active {
    color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════
   KATEGORÄ° HERO BANNER
══════════════════════════════════════════════════════════════ */
#genre-hero {
    position: relative;
    height: 280px;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
}

#genre-hero.hidden {
    display: none;
}

/* Slide'lar */
#genre-hero-slides {
    position: absolute;
    inset: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
    transform: scale(1.05);
    /* animation: heroZoom — removed for perf */
}

.hero-slide.active {
    opacity: 1;
}

@keyframes heroZoom {
    from {
        transform: scale(1.0);
    }

    to {
        transform: scale(1.08);
    }
}

/* Koyu gradient overlay */
#genre-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            rgba(0, 0, 0, .92) 0%,
            rgba(0, 0, 0, .65) 50%,
            rgba(0, 0, 0, .2) 100%), linear-gradient(to top,
            rgba(0, 0, 0, .8) 0%,
            transparent 60%);
    z-index: 1;
}

/* Tür rengi glow efekti */
#genre-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--hero-color, var(--accent));
    box-shadow: 0 0 20px 4px var(--hero-glow, rgba(229, 9, 20, .4));
    z-index: 3;
}

/* İçerik */
#genre-hero-content {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    padding: 0 40px;
    max-width: 600px;
    animation: heroContentIn .5s ease;
}

@keyframes heroContentIn {
    from {
        opacity: 0;
        transform: translateY(calc(-50% + 20px));
    }

    to {
        opacity: 1;
        transform: translateY(-50%);
    }
}

#genre-hero-icon {
    font-size: 3rem;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
    /* animation: iconBounce — removed for perf */
}

@keyframes iconBounce {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-6px) rotate(3deg);
    }
}

#genre-hero-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
    line-height: 1;
    /* Tür renginde alt çizgi efekti */
    background: linear-gradient(90deg, var(--hero-color, var(--accent)), transparent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#genre-hero-desc {
    font-size: .92rem;
    color: rgba(255, 255, 255, .8);
    line-height: 1.5;
    margin-bottom: 14px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
    max-width: 460px;
}

#genre-hero-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hero-tag {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .9);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
    transition: all var(--transition);
}

.hero-tag:hover {
    background: var(--hero-color, var(--accent));
    border-color: var(--hero-color, var(--accent));
    color: white;
}

/* Slide dots */
#genre-hero-dots {
    position: absolute;
    bottom: 14px;
    right: 20px;
    z-index: 3;
    display: flex;
    gap: 6px;
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .2);
    cursor: pointer;
    transition: all var(--transition);
    padding: 0;
}

.hero-dot.active {
    background: var(--hero-color, var(--accent));
    border-color: var(--hero-color, var(--accent));
    width: 22px;
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════
   KATEGORİ ÇUBUĞU
══════════════════════════════════════════════════════════════ */
#category-bar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 0 28px;
    position: relative;
}

/* Sağ soluk efekti – scroll göstergesi */
#category-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to left, var(--bg-secondary), transparent);
    pointer-events: none;
    z-index: 1;
}

#category-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 12px 0;
    scrollbar-width: none;
}

#category-list::-webkit-scrollbar {
    display: none;
}

.cat-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 7px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all .2s ease;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* Tür rengini hover'da kullan */
.cat-btn:hover {
    border-color: var(--cat-accent, var(--accent));
    color: var(--cat-accent, var(--accent));
    background: color-mix(in srgb, var(--cat-accent, var(--accent)) 10%, transparent);
}

.cat-btn.active {
    background: var(--cat-accent, var(--accent));
    border-color: var(--cat-accent, var(--accent));
    color: white;
    box-shadow: 0 0 12px var(--cat-accent, var(--accent));
}

/* ══════════════════════════════════════════════════════════════
   DEVAM ET PANELÄ°
══════════════════════════════════════════════════════════════ */

#continue-panel {
    background: rgba(0, 0, 0, .15);
    border-bottom: 1px solid var(--glass-border);
    padding: 20px 32px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#continue-panel.hidden {
    display: none;
}

#continue-panel .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 14px;
    margin-bottom: 16px;
}

#continue-panel .section-header h2 {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

#close-continue-panel {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: .7rem;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

#close-continue-panel:hover {
    border-color: var(--accent);
    color: var(--accent);
}

#continue-list {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

#continue-list::-webkit-scrollbar {
    display: none;
}

/* Minimal Continue Card */
.continue-card {
    flex-shrink: 0;
    width: 200px;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: var(--bg-card);
    border: 1px solid transparent;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.continue-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
}

/* Poster */
.continue-card-poster {
    position: relative;
    width: 100%;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: #0a0a0f;
}

.continue-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.continue-card:hover .continue-card-poster img {
    transform: scale(1.03);
}

/* Gradient overlay at bottom of poster */
.continue-card-poster::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, var(--bg-card), transparent);
    pointer-events: none;
}

/* Play icon */
.continue-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0;
    transition: opacity .2s ease;
}

.continue-card:hover .continue-play-icon {
    opacity: 1;
}

.continue-play-icon svg {
    width: 40px;
    height: 40px;
    color: rgba(255, 255, 255, .9);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .6));
}

/* Title (below poster) */
.continue-card-title {
    padding: 10px 10px 4px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Progress bar */
.continue-progress {
    height: 3px;
    margin: 0 10px 10px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.continue-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--accent);
    transition: width .4s ease;
}

/* Remove button */
.continue-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, .7);
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .6);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    opacity: 0;
    z-index: 3;
    backdrop-filter: blur(4px);
}

.continue-card:hover .continue-remove {
    opacity: 1;
}

.continue-remove:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════
   RESUME BAR (Player altında, modal içi)
══════════════════════════════════════════════════════════════ */
#resume-bar {
    position: relative;
    background: linear-gradient(90deg, rgba(229, 9, 20, .12), var(--bg-modal));
    border-top: 1px solid rgba(229, 9, 20, .3);
    border-bottom: 1px solid #222;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    animation: fadeInUp .3s ease;
    overflow: hidden;
}

#resume-bar.hidden {
    display: none;
}

/* İnce ilerleme çubuğu - barın altında */
#resume-progress-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent);
    transition: width .5s ease;
    border-radius: 0 2px 2px 0;
}

#resume-label {
    font-size: .82rem;
    color: var(--text-muted);
    flex: 1;
    font-weight: 500;
}

#resume-btn {
    background: var(--accent);
    border: none;
    color: white;
    padding: 7px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
    transition: background var(--transition);
    white-space: nowrap;
}

#resume-btn:hover {
    background: var(--accent-hover);
}

#resume-dismiss {
    background: transparent;
    border: 1px solid #444;
    color: var(--text-muted);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    flex-shrink: 0;
}

#resume-dismiss:hover {
    background: #333;
    border-color: #666;
    color: white;
}

/* ══════════════════════════════════════════════════════════════
   BENZERİ İÇERİKLER
══════════════════════════════════════════════════════════════ */
#similar-section {
    margin-top: 4px;
}

#similar-section h4 {
    font-size: .88rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    font-weight: 600;
}

#similar-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}

.similar-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    width: 90px;
    cursor: pointer;
    transition: transform .12s ease;
    will-change: transform;
}

.similar-card:hover {
    transform: translateY(-4px);
}

.similar-poster-wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.similar-card img {
    width: 90px;
    height: 130px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.similar-title {
    font-size: .72rem;
    font-weight: 600;
    color: #ddd;
    text-align: center;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── FILTER PANEL ─────────────────────────────────────────── */
#filter-panel {
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--glass-border);
    padding: 10px 32px;
    backdrop-filter: blur(6px);
}

.filter-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label {
    font-size: .68rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.filter-group select,
#sort-select {
    background: var(--bg-input);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 8px 14px;
    border-radius: 50px;
    font-size: .84rem;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    min-width: 140px;
    appearance: none;
    -webkit-appearance: none;
    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='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.filter-group select:focus,
#sort-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

#clear-filters {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 50px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    transition: all var(--transition);
    white-space: nowrap;
    align-self: flex-end;
}

#clear-filters:hover {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent);
}

/* Filtre grupları başlangıçta gizli */
#genre-group,
#year-group,
#lang-group,
#rating-group {
    display: none;
}

/* ── SECTION HEADER ───────────────────────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 32px 12px;
    flex-wrap: wrap;
    contain: layout;
    gap: 12px;
}

#section-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    position: relative;
    display: inline-block;
}

#section-title::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 2px;
    box-shadow: 0 0 10px var(--accent-glow);
    transition: width .5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#section-title.neon-line::after {
    width: 100%;
}

.result-count {
    font-size: .8rem;
    color: var(--text-muted);
    font-weight: 500;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 4px 12px;
    border-radius: 50px;
}

#sort-select {
    background: var(--bg-input);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 8px 32px 8px 14px;
    border-radius: 50px;
    font-size: .84rem;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
    -webkit-appearance: none;
    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='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

#sort-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* â"€â"€ MOVIE GRID â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
#movie-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 28px;
    padding: 20px 40px 80px;
    contain: layout;
}

.no-result {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    font-size: 1.05rem;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* ── Scroll fade-up — kaldırıldı (performans) ── */
.movie-card.fade-up {
    opacity: 1;
}

/* â"€â"€ MOVIE CARD â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
.movie-card {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    position: relative;
    contain: layout style;
    box-shadow: var(--shadow-card);
    will-change: transform;
}

.movie-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--accent-glow);
    border-color: rgba(245, 197, 24, 0.25);
}

.card-poster {
    position: relative;
    overflow: hidden;
}

.card-poster img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
}

.movie-card:hover .card-poster img {
    transform: none;
}

/* Card glow — kaldırıldı (GPU yükü, kasma nedeni) */
.card-glow {
    display: none;
}

/* Hover overlay */
.card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.movie-card:hover .card-overlay {
    opacity: 1;
}

.play-btn {
    background: rgba(255, 255, 255, 0.92);
    color: #0c0b10;
    border: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
    transform: scale(0.85);
    opacity: 0;
}

.movie-card:hover .play-btn {
    transform: scale(1);
    opacity: 1;
}

.play-btn:hover {
    background: var(--accent);
    color: #000;
    box-shadow: 0 4px 20px var(--accent-glow);
    transform: scale(1.06) !important;
}

/* Rating badge — minimal köşe entegrasyonu */
.rating-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    backdrop-filter: blur(8px);
    letter-spacing: 0.4px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rating-badge.green {
    color: #1fba72;
    border-color: rgba(31, 186, 114, 0.3);
}

.rating-badge.orange {
    color: var(--accent-2);
    border-color: rgba(200, 146, 42, 0.3);
}

.rating-badge.red {
    color: #e05252;
    border-color: rgba(224, 82, 82, 0.3);
}

/* Rating ring */
.rating-ring-wrap {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    z-index: 3;
}

.rating-ring-wrap svg {
    transform: rotate(-90deg);
    width: 34px;
    height: 34px;
}

.rating-ring-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 2.5;
}

.rating-ring-fill {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.rating-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .58rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}

/* Card info — slide-up info panel */
.card-info {
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bg-card);
}

/* Sabit başlık alanı */
.card-info-static {
    padding: 12px 13px 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.card-title {
    font-size: .83rem;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.05px;
    color: var(--text-primary);
}

.card-year {
    font-size: .72rem;
    color: var(--text-muted);
    white-space: nowrap;
    font-weight: 500;
}

/* Info panel — her zaman görünür, hover'da sadece opacity */
.card-expand {
    padding: 6px 13px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-card);
    border-top: 1px solid var(--glass-border);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.movie-card:hover .card-expand {
    opacity: 1;
}

.card-expand-genre {
    font-size: .66rem;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-expand-overview {
    font-size: .70rem;
    color: var(--text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Duplicate stiller yukarıda modernize edildi ── */

/* body::after artık body::before olarak taşındı (dosya başı) */

/* Toast stilleri yukarıda tanımlandı — bu duplicate kaldırıldı */

/* ══════════════════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════════════════ */
#modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    /* Arka plan render'ını kes ama scroll çalışsın */
    contain: layout style;
}

#modal-overlay.hidden {
    display: none;
}

#modal {
    background: var(--bg-modal);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.05);
    width: 100%;
    max-width: 920px;
    overflow: hidden;
    animation: modalPop .15s ease-out;
    margin: auto;
}

@keyframes modalPop {
    from {
        transform: translateY(16px) scale(0.98);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

#modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 26px 16px;
    border-bottom: 1px solid var(--glass-border);
    gap: 12px;
    background: linear-gradient(180deg, rgba(245, 197, 24, 0.06) 0%, transparent 100%);
    position: relative;
}

#modal-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    border-radius: var(--radius-lg) 0 0 0;
}

#modal-movie-title {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.4px;
}

#modal-movie-meta {
    color: var(--text-muted);
    font-size: .84rem;
    margin-top: 6px;
    font-weight: 500;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#toggle-details-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    padding: 7px 14px;
    border-radius: 50px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    font-family: inherit;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
    white-space: nowrap;
}

#toggle-details-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

#close-modal {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

#close-modal:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    box-shadow: 0 0 14px var(--accent-glow);
}

/* ── SEARCH SUGGESTIONS ───────────────────────────────────── */
#search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    overflow: hidden;
    z-index: 300;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.04);
    max-height: 360px;
    overflow-y: auto;
    backdrop-filter: blur(6px);
    animation: slideDown .18s cubic-bezier(0.4, 0, 0.2, 1);
}

#search-suggestions.hidden {
    display: none;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background var(--transition);
    border-bottom: 1px solid var(--glass-border);
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background: var(--glass-bg);
}

.suggestion-item img {
    width: 36px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.sug-no-img {
    width: 36px;
    height: 54px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1rem;
    flex-shrink: 0;
}

.sug-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sug-title {
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.1px;
}

.sug-year {
    font-size: .73rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ── INFINITE SCROLL SENTINEL ─────────────────────────────── */
#scroll-sentinel {
    height: 1px;
    width: 100%;
}

/* ── GLOBAL LOADER ────────────────────────────────────────── */
#loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px;
    color: var(--text-muted);
    font-size: .88rem;
    font-weight: 500;
}

#loader.hidden {
    display: none;
}

.spinner {
    width: 36px;
    height: 36px;
    border: 2.5px solid var(--glass-border);
    border-top-color: var(--accent);
    border-right-color: var(--accent-2);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    flex-shrink: 0;
    box-shadow: 0 0 16px var(--accent-glow);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── TOAST BİLDİRİMLER ────────────────────────────────────── */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: rgba(18, 18, 28, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 0;
    border-radius: var(--radius);
    font-size: .86rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.04);
    transform: translateX(72px);
    opacity: 0;
    transition: transform .35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity .35s ease;
    max-width: 320px;
    pointer-events: auto;
    overflow: hidden;
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

/* Renkli üst şerit */
.toast::before {
    content: '';
    display: block;
    height: 3px;
    width: 100%;
    border-radius: var(--radius) var(--radius) 0 0;
}

.toast-info::before {
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

.toast-error::before {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.toast-success::before {
    background: linear-gradient(90deg, var(--green), #10b981);
}

.toast-body {
    padding: 11px 16px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.toast-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.toast-info {
    border-left: none;
}

.toast-error {
    border-left: none;
}

.toast-success {
    border-left: none;
}

/* ══════════════════════════════════════════════════════════════
   MODAL & PLAYER
══════════════════════════════════════════════════════════════ */

/* ── Overlay ──────────────────────────────────────────────── */
#modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, .85);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    animation: fadeIn .2s ease;
}

#modal-overlay.hidden {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── Modal Box ────────────────────────────────────────────── */
#modal {
    background: var(--bg-modal);
    border-radius: 14px;
    box-shadow: 0 24px 80px var(--shadow-color), 0 0 0 1px var(--border-color);
    width: 100%;
    max-width: 900px;
    overflow: hidden;
    animation: slideUp .25s ease;
    margin: auto;
}

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ── Modal Header ─────────────────────────────────────────── */
#modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

#modal-movie-title {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
}

#modal-movie-meta {
    color: var(--text-muted);
    font-size: .88rem;
    margin-top: 5px;
}

#close-modal {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition), transform var(--transition);
}

#close-modal:hover {
    background: var(--accent);
    color: var(--text-inverse);
    transform: rotate(90deg);
}

/* ── Player Wrapper ────────────────────────────────────────── */
#player-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
}

/* Fullscreen: player-wrapper tam ekran olunca */
#player-wrapper:fullscreen,
#player-wrapper:-webkit-full-screen,
#player-wrapper:-moz-full-screen,
#player-wrapper:-ms-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    aspect-ratio: unset !important;
    overflow: visible !important;
}

#player-wrapper:fullscreen #iframe-player-wrap,
#player-wrapper:-webkit-full-screen #iframe-player-wrap,
#player-wrapper:fullscreen #hls-player-wrap,
#player-wrapper:-webkit-full-screen #hls-player-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

#player-wrapper:fullscreen #embed-frame,
#player-wrapper:-webkit-full-screen #embed-frame,
#player-wrapper:fullscreen #hls-video,
#player-wrapper:-webkit-full-screen #hls-video {
    width: 100% !important;
    height: 100% !important;
}

#player-wrapper:fullscreen .plyr,
#player-wrapper:-webkit-full-screen .plyr {
    width: 100% !important;
    height: 100% !important;
}

/* Plyr fullscreen z-index düzeltmesi */
.plyr--fullscreen-enabled:fullscreen,
.plyr--fullscreen-enabled:-webkit-full-screen {
    z-index: 10000 !important;
}

/* ── HLS Video ────────────────────────────────────────────── */
#hls-player-wrap {
    width: 100%;
    height: 100%;
}

#hls-player-wrap.hidden {
    display: none;
}

#hls-video {
    width: 100%;
    height: 100%;
    display: block;
}

/* Plyr overrides */
.plyr {
    width: 100%;
    height: 100%;
    --plyr-color-main: var(--accent);
    --plyr-video-background: #000;
}

/* ── Iframe Wrap ──────────────────────────────────────────── */
#iframe-player-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#iframe-player-wrap.hidden {
    display: none;
}

#embed-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: #000;
}

/* ── Iframe Tıklama Koruması ──────────────────────────────── */
/*
   İlk 3 saniye iframe üzerine şeffaf bir katman koyar.
   Bu katman reklam yönlendirmelerini engeller.
   Kullanıcı tıklayınca katman kalkar ve normal etkileşim başlar.
*/
#iframe-click-guard {
    position: absolute;
    inset: 0;
    z-index: 5;
    cursor: pointer;
    background: transparent;
    transition: background 0.1s ease;
}

#iframe-click-guard:active {
    background: rgba(245, 197, 24, 0.1) !important;
}

#iframe-click-guard.removed {
    display: none !important;
    pointer-events: none;
}

/* Iframe Fullscreen Butonu */
#iframe-fullscreen-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 20;
    background: rgba(0, 0, 0, .7);
    border: 1px solid rgba(255, 255, 255, .25);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: all var(--transition);
    opacity: 0;
}

#iframe-player-wrap:hover #iframe-fullscreen-btn {
    opacity: 1;
}

#iframe-fullscreen-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* Şeffaf koruyucu katman: istem dışı tıklamaları (reklam yönlendirmesi) engelle */
#iframe-shield {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* sadece görsel – play butonu çalışsın */
}

/* ══════════════════════════════════════════════════════════════
   DETAY PANELÄ°
══════════════════════════════════════════════════════════════ */
.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#toggle-details-btn {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #ccc;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    transition: all var(--transition);
    white-space: nowrap;
}

#toggle-details-btn:hover,
#toggle-details-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

#detail-panel {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #222;
    animation: slideDown .3s ease;
}

#detail-panel.hidden {
    display: none;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#detail-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    filter: blur(2px) brightness(.25);
    z-index: 0;
}

#detail-content {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 20px;
    padding: 20px 22px;
}

#detail-left {
    flex-shrink: 0;
}

#detail-poster {
    transition: opacity .25s ease;
    opacity: 1;
    width: 100px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
    display: block;
}

#detail-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

#detail-overview {
    font-size: .88rem;
    color: #ddd;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#detail-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.genre-tag {
    background: rgba(229, 9, 20, .15);
    border: 1px solid rgba(229, 9, 20, .3);
    color: #ff6b6b;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 600;
}

#detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: .8rem;
    color: var(--text-muted);
}

#detail-stats span:not(:empty) {
    background: #222;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid #333;
}

/* Cast kartları */
#detail-cast-section h4,
#detail-crew-section h4 {
    font-size: .88rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 600;
}

#detail-cast {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}

.cast-card:hover img {
    border-color: var(--accent) !important;
}

.cast-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    width: 72px;
    cursor: default;
}

.cast-card img {
    width: 60px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #2a2a2a;
    transition: border-color var(--transition);
}

.cast-card:hover img {
    border-color: var(--accent);
}

.cast-name {
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    color: #eee;
}

.cast-char {
    font-size: .65rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#detail-crew {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.crew-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1e1e1e;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 6px 10px;
}

.crew-item img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.crew-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crew-name {
    font-size: .78rem;
    font-weight: 700;
    color: #eee;
}

.crew-job {
    font-size: .7rem;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════
   SEZON / BÖLÜM SEÇİCİ
══════════════════════════════════════════════════════════════ */
#season-bar {
    background: #111;
    border-bottom: 1px solid #222;
    padding: 12px 22px;
}

#season-bar.hidden {
    display: none;
}

.season-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
}

.season-select-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.season-select-group label {
    font-size: .72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.season-select-group select {
    background: #1e1e1e;
    border: 1px solid #3a3a3a;
    color: var(--text-primary);
    padding: 7px 12px;
    border-radius: 8px;
    font-size: .88rem;
    cursor: pointer;
    outline: none;
    min-width: 200px;
    transition: border-color var(--transition);
}

.season-select-group select:focus {
    border-color: var(--accent);
}

#episode-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 22px;
    min-width: 160px;
}

.ep-name {
    font-size: .88rem;
    font-weight: 700;
    color: #eee;
}

.ep-meta {
    font-size: .78rem;
    color: var(--text-muted);
}

.ep-overview {
    font-size: .78rem;
    color: #aaa;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bölüm Listesi (Toggle) */
#toggle-episode-list {
    margin-top: 10px;
    background: #1e1e1e;
    border: 1px solid #3a3a3a;
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    transition: all var(--transition);
    display: block;
}

#toggle-episode-list:hover {
    border-color: var(--accent);
    color: var(--accent);
}

#episode-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}

#episode-list.hidden {
    display: none;
}

.ep-card {
    display: flex;
    gap: 12px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
}

.ep-card:hover {
    border-color: #555;
    background: #222;
}

.ep-card-active {
    border-color: var(--accent) !important;
    background: rgba(229, 9, 20, .08) !important;
}

.ep-card img {
    width: 140px;
    height: 80px;
    object-fit: cover;
    flex-shrink: 0;
}

.ep-card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    justify-content: center;
}

.ep-card-num {
    font-size: .72rem;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.ep-card-title {
    font-size: .88rem;
    font-weight: 700;
    color: #eee;
}

.ep-card-meta {
    font-size: .74rem;
    color: var(--text-muted);
}

.ep-card-overview {
    font-size: .74rem;
    color: #888;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   SAHNE OYUNCU OVERLAY (Prime Video tarzı)
══════════════════════════════════════════════════════════════ */
#scene-cast-overlay {
    position: absolute;
    bottom: 64px;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .7) 100%);
    padding: 16px 20px 20px;
    z-index: 20;
    animation: fadeInUp .3s ease;
}

#scene-cast-overlay.hidden {
    display: none;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#scene-cast-header {
    font-size: .78rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 10px;
}

#scene-cast-list {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.scene-actor {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: 8px 12px 8px 8px;
    backdrop-filter: blur(4px);
    transition: all var(--transition);
    cursor: default;
}

.scene-actor:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .25);
}

.scene-actor img {
    width: 44px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.scene-actor-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.scene-actor-name {
    font-size: .84rem;
    font-weight: 700;
    color: white;
}

.scene-actor-char {
    font-size: .74rem;
    color: rgba(255, 255, 255, .6);
    font-style: italic;
}

#scene-cast-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: white;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: .78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}

#scene-cast-close:hover {
    background: var(--accent);
}

#scene-cast-trigger {
    position: absolute;
    bottom: 70px;
    right: 14px;
    background: rgba(0, 0, 0, .7);
    border: 1px solid rgba(255, 255, 255, .2);
    color: white;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    transition: all var(--transition);
    backdrop-filter: blur(4px);
}

#scene-cast-trigger:hover {
    background: var(--accent);
    transform: scale(1.1);
}

#scene-cast-trigger.hidden {
    display: none;
}

/* ── Auto Switch Bar ──────────────────────────────────────── */
#auto-switch-bar {
    background: linear-gradient(90deg, #1a1200, #1e1e1e);
    border-top: 1px solid #f5a62340;
    padding: 8px 22px;
    font-size: .82rem;
    color: var(--orange);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeIn .3s ease;
}

#auto-switch-bar.hidden {
    display: none;
}

/* ── Player Loader ────────────────────────────────────────── */
#player-loader {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .82);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 10;
    color: var(--text-muted);
    font-size: .9rem;
}

/* Player spinner – büyük ve belirgin */
.player-spinner {
    width: 52px;
    height: 52px;
    border: 4px solid #2a2a2a;
    border-top-color: var(--accent);
    border-right-color: #f5a623;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

#skip-loader {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #ccc;
    padding: 7px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    transition: all var(--transition);
    margin-top: 4px;
}

#skip-loader:hover {
    background: rgba(255, 255, 255, .2);
    color: white;
}

#skip-loader.hidden {
    display: none;
}

/* ── Provider Bar ─────────────────────────────────────────── */
#provider-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 22px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.provider-label {
    font-size: .82rem;
    color: var(--text-muted);
    white-space: nowrap;
    font-weight: 600;
}

#provider-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.provider-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition);
}

.provider-btn:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
    background: var(--glass-bg);
}

.provider-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-inverse);
}

/* ── Provider Sağlık Göstergeleri ──────────────────────────── */
.health-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.health-dot-green {
    background: #1fba72;
    box-shadow: 0 0 5px rgba(31, 186, 114, 0.6);
}

.health-dot-yellow {
    background: #f39c12;
    box-shadow: 0 0 5px rgba(243, 156, 18, 0.6);
}

.health-dot-red {
    background: #e74c3c;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.6);
}

.provider-btn.provider-dead {
    opacity: 0.35;
}

.provider-btn.provider-dead:hover {
    opacity: 0.55;
}

.p-badge {
    font-size: .68rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: .3px;
}

.badge-green {
    background: rgba(70, 211, 105, .2);
    color: var(--green);
    border: 1px solid rgba(70, 211, 105, .4);
}

.badge-red {
    background: rgba(229, 9, 20, .2);
    color: #ff6b6b;
    border: 1px solid rgba(229, 9, 20, .4);
}

#quality-info {
    margin-left: auto;
    font-size: .8rem;
    color: var(--green);
    font-weight: 600;
}

/* ── Player Notice ────────────────────────────────────────── */
#player-notice {
    padding: 10px 22px;
    font-size: .8rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   DEVAM ET PANELİ – modernize
══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   MODAL AÇIKKEN GPU OPTİMİZASYONU
   Sadece gerçek GPU yük kaynakları kapatılır.
   Film kartları ve görünürlük'e dokunulmaz.
══════════════════════════════════════════════════════════════ */

/* 1) will-change rezervasyonlarını serbest bırak */
body.modal-open .movie-card {
    will-change: auto;
}

body.modal-open .continue-card {
    will-change: auto;
}

body.modal-open .continue-card-poster img {
    will-change: auto;
}

body.modal-open .similar-card {
    will-change: auto;
}

/* 2) Arka plan sahnesini dondur */
body.modal-open #category-bg-scene {
    visibility: hidden;
}

body.modal-open .hero-slide {
    animation: none !important;
}

/* 3) Tüm backdrop-filter'ları kapat (en büyük GPU yük) */
body.modal-open header,
body.modal-open #search-form,
body.modal-open #filter-panel,
body.modal-open #continue-panel,
body.modal-open .header-icon-btn,
body.modal-open .dropdown-menu,
body.modal-open .profile-item,
body.modal-open .continue-remove,
body.modal-open .continue-card,
body.modal-open .rating-badge,
body.modal-open #search-suggestions,
body.modal-open .toast,
body.modal-open .hero-tag,
body.modal-open .scene-actor,
body.modal-open #scene-cast-trigger,
body.modal-open #iframe-fullscreen-btn,
body.modal-open #category-bar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 4) grain animasyonunu durdur */
body.modal-open #hbo-grain {
    animation: none !important;
}

/* 5) Ambient glow kapat */
body.modal-open::after {
    display: none;
}

/* 6) Arka plan içeriğini render pipeline'dan çıkar – GPU boşalır */
/* NOT: content-visibility:hidden kullanılmıyor – modal kapandığında
   filmler gizli kalıyordu. Bunun yerine visibility:hidden kullanılır
   ancak bu da sorunluydu, bu blok devre dışı bırakıldı. */
/* body.modal-open #movie-container     { content-visibility: hidden; } */
/* body.modal-open #genre-hero          { content-visibility: hidden; } */
/* body.modal-open #continue-panel      { content-visibility: hidden; } */
/* body.modal-open #filter-panel        { content-visibility: hidden; } */
/* body.modal-open .section-header      { content-visibility: hidden; } */
/* body.modal-open #category-bar        { content-visibility: hidden; } */

/* 7) Modal overlay kendi compositor katmanında izole çalışsın */
#modal-overlay {
    isolation: isolate;
}

/* ── iframe GPU hızlandırma: kendi compositor katmanında çalışır ── */
#iframe-player-wrap,
#embed-frame {
    transform: translateZ(0);
}

/* ── HBO tarzı görsel efektler ─────────────────────────────── */
/* Film grain overlay */
#hbo-grain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
    animation: grainShift 0.3s steps(1) infinite;
    mix-blend-mode: overlay;
}

@keyframes grainShift {
    0% {
        background-position: 0 0;
    }

    10% {
        background-position: -10px -20px;
    }

    20% {
        background-position: 15px 5px;
    }

    30% {
        background-position: -5px 25px;
    }

    40% {
        background-position: 20px -10px;
    }

    50% {
        background-position: -15px 15px;
    }

    60% {
        background-position: 10px -25px;
    }

    70% {
        background-position: -20px 10px;
    }

    80% {
        background-position: 5px 20px;
    }

    90% {
        background-position: -25px -5px;
    }

    100% {
        background-position: 0 0;
    }
}

/* Scanline overlay */
#hbo-scanlines {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom,
            transparent 0px,
            transparent 2px,
            rgba(0, 0, 0, 0.03) 2px,
            rgba(0, 0, 0, 0.03) 4px);
    mix-blend-mode: multiply;
}

/* Hafif vignette – köşeleri karartan sinematik efekt */
#hbo-vignette {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
            transparent 55%,
            rgba(0, 0, 0, 0.35) 100%);
}

/* ── Kategori çubuğu modernize ─────────────────────────────── */
#category-bar {
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid var(--glass-border);
    padding: 0 32px;
    position: relative;
    backdrop-filter: blur(6px);
}

#category-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), transparent);
    pointer-events: none;
    z-index: 1;
}

#category-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 12px 0;
    scrollbar-width: none;
}

#category-list::-webkit-scrollbar {
    display: none;
}

.cat-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    padding: 7px 18px;
    border-radius: 50px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    letter-spacing: .15px;
}

.cat-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    transition: left .4s ease;
    pointer-events: none;
}

.cat-btn:hover::before {
    left: 160%;
}

.cat-btn:hover {
    border-color: var(--cat-accent, var(--accent));
    color: var(--cat-accent, var(--accent));
    background: color-mix(in srgb, var(--cat-accent, var(--accent)) 10%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cat-accent, var(--accent)) 25%, transparent);
}

.cat-btn.active {
    background: var(--cat-accent, var(--accent));
    border-color: var(--cat-accent, var(--accent));
    color: white;
    box-shadow: 0 0 18px color-mix(in srgb, var(--cat-accent, var(--accent)) 45%, transparent),
        0 4px 16px rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
}

.cat-btn.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%);
    background-size: 200% 100%;
    /* animation: catShimmer — removed for perf */
}

@keyframes catShimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    header {
        padding: 10px 16px;
        gap: 10px;
    }

    #movie-container {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 14px;
        padding: 12px 16px 40px;
    }

    .section-header {
        padding: 16px 16px 10px;
    }

    #category-bar {
        padding: 0 16px;
    }

    #filter-panel {
        padding: 10px 16px;
    }

    .filter-row {
        gap: 8px;
    }

    .filter-group select {
        min-width: 120px;
        font-size: .82rem;
    }
}

@media (max-width: 640px) {

    /* Hero Banner mobil */
    #genre-hero {
        height: 200px;
    }

    #genre-hero-content {
        padding: 0 20px;
        max-width: 100%;
    }

    #genre-hero-icon {
        font-size: 2rem;
        margin-bottom: 4px;
    }

    #genre-hero-title {
        font-size: 1.5rem;
    }

    #genre-hero-desc {
        font-size: .8rem;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero-tag {
        font-size: .68rem;
        padding: 3px 8px;
    }

    #genre-hero-dots {
        bottom: 8px;
        right: 12px;
    }

    /* Kategori bar mobil */
    #category-bar {
        padding: 0 16px;
    }

    header {
        padding: 12px 16px;
        gap: 10px;
    }

    .logo {
        font-size: 1.2rem;
    }

    .nav-tabs {
        order: 3;
        width: 100%;
    }

    #search-form {
        flex: 1;
        max-width: 100%;
    }

    /* Detay paneli mobil */
    #detail-content {
        flex-direction: column;
    }

    #detail-poster {
        width: 80px;
    }

    #detail-cast {
        gap: 8px;
    }

    .cast-card {
        width: 60px;
    }

    .cast-card img {
        width: 50px;
        height: 68px;
    }

    /* Sezon seçici mobil */
    .season-row {
        flex-direction: column;
        gap: 10px;
    }

    .season-select-group select {
        min-width: unset;
        width: 100%;
    }

    #episode-info {
        padding-top: 0;
    }

    .ep-card img {
        width: 100px;
        height: 60px;
    }

    /* Sahne oyuncu overlay mobil */
    #scene-cast-list {
        gap: 8px;
    }

    .scene-actor {
        padding: 6px 10px 6px 6px;
    }

    .scene-actor img {
        width: 36px;
        height: 46px;
    }

    #scene-cast-trigger {
        bottom: 60px;
        width: 34px;
        height: 34px;
        font-size: .95rem;
    }

    #movie-container {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
        padding: 10px 16px 30px;
    }

    .section-header {
        padding: 16px 16px 8px;
    }

    #modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    #modal {
        border-radius: 14px 14px 0 0;
        max-height: 96vh;
        overflow-y: auto;
    }

    #modal-movie-title {
        font-size: 1.1rem;
    }

    #provider-bar {
        padding: 10px 14px;
    }

    .provider-btn {
        font-size: .74rem;
        padding: 5px 9px;
    }

    #player-notice {
        padding: 8px 14px;
        font-size: .75rem;
    }

    #auto-switch-bar {
        padding: 7px 14px;
        font-size: .76rem;
    }

    #toast-container {
        bottom: 16px;
        right: 16px;
        left: 16px;
    }

    .toast {
        max-width: 100%;
    }

    .filter-group select {
        min-width: 100px;
        font-size: .8rem;
        padding: 6px 8px;
    }

    #clear-filters {
        padding: 6px 10px;
        font-size: .78rem;
    }
}

@media (max-width: 380px) {
    #movie-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group select {
        min-width: unset;
        width: 100%;
    }
}

/* Popup açılış animasyonu */
@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(-8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ════════════════════════════════════════════════════════════════
   FILM KARTI — Afiş Odaklı Minimal Tasarım
   ════════════════════════════════════════════════════════════════ */

/* Kartlar sadece afiş + ince başlık/yıl */
.movie-card {
    border-radius: 16px;
    /* Prompt: 16px köşe */
    border: none;
    /* Daha minimal */
    background: transparent;
    box-shadow: none;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
}

/* Hover: %5 büyüme */
.movie-card:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

/* Poster alanı */
.card-poster {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.card-poster img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
    border-radius: 16px;
    transition: filter 0.28s ease;
}

/* Hover overlay: şeffaf katmanda özet */
.card-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.7) 40%,
            rgba(0, 0, 0, 0.2) 70%,
            transparent 100%);
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.movie-card:hover .card-poster::after {
    opacity: 1;
}

/* Hover overlay — özet metin */
.card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 14px;
    opacity: 0;
    transition: opacity 0.28s ease;
    z-index: 2;
    background: transparent;
}

.movie-card:hover .card-overlay {
    opacity: 1;
}

/* Overlay içindeki play butonu */
.play-btn {
    display: none;
    /* Overlay'daki play gizli, yerine özet var */
}

/* Overlay summary text (JS ile eklenecek) */
.card-overlay-summary {
    font-size: .73rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-overlay-play {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 5px;
}

.card-overlay-play:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* Film info altında — sadece başlık ve yıl, çok ince */
.card-info {
    background: transparent;
    padding: 0;
}

.card-info-static {
    padding: 8px 4px 0;
    gap: 2px;
}

.card-title {
    font-size: .78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    -webkit-line-clamp: 1;
    letter-spacing: 0;
}

.card-year {
    font-size: .68rem;
    color: rgba(255, 255, 255, 0.38);
    font-weight: 400;
}

/* Expand kısmını (özet metnini) kaldır — artık hover overlay'da */
.card-expand {
    display: none !important;
}

/* Rating badge — tutuldu ama biraz soluklaştırıldı */
.rating-badge {
    opacity: 0.8;
}

/* Rating ring — tutuldu */
.rating-ring-wrap {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.movie-card:hover .rating-ring-wrap {
    opacity: 1;
}

/* ── Section başlığı hiyerarşisi ── */
#section-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.result-count {
    font-size: .72rem;
    color: var(--text-muted);
    background: transparent;
    border: none;
    padding: 0;
    opacity: 0.6;
}

/* ── Hero Banner (Ana sayfa öne çıkan film) ── */
#featured-hero {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    margin-bottom: 0;
}

#featured-hero.hidden {
    display: none;
}

#featured-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
    transition: background-image 0.8s ease;
}

#featured-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0.1) 100%),
        linear-gradient(to top, rgba(12, 11, 16, 1) 0%, transparent 30%);
}

#featured-hero-content {
    position: absolute;
    bottom: 48px;
    left: 48px;
    max-width: 520px;
    z-index: 2;
    animation: heroContentIn 0.5s ease;
}

#featured-hero-title {
    font-size: 2.6rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.8px;
    margin-bottom: 12px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8);
}


#featured-hero-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: white;
    padding: 10px 26px;
    border-radius: 50px;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.22s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#featured-hero-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Mobil: hero daha küçük */
@media (max-width: 600px) {
    #featured-hero {
        height: 260px;
    }

    #featured-hero-content {
        bottom: 24px;
        left: 20px;
        max-width: 90%;
    }

    #featured-hero-title {
        font-size: 1.5rem;
    }

    .settings-popup {
        width: 260px;
        right: -8px;
    }
}

/* ══════════════════════════════════════════════════════════════
   POPUP MENÜ — Modern Minimal
══════════════════════════════════════════════════════════════ */
.popup-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 260px;
    background: rgba(16, 15, 24, 0.92);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.03);
    z-index: 600;
    overflow: hidden;
    animation: popupSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top right;
    padding: 6px 0;
}

.popup-menu.hidden {
    display: none;
}

/* ── Profile Header — tek tıklanabilir blok ── */
.popup-profile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 2px 6px;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: calc(100% - 12px);
    text-align: left;
    font-family: inherit;
    transition: background .18s ease;
}

.popup-profile-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.popup-avatar {
    font-size: 1.6rem;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    overflow: hidden;
}

.popup-avatar img.auth-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}

.popup-profile-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.popup-profile-info #profile-name-label {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popup-profile-sub {
    font-size: .68rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.popup-profile-sub svg {
    opacity: .5;
}

.popup-profile-chevron {
    color: var(--text-muted);
    opacity: .4;
    flex-shrink: 0;
    transition: opacity .18s ease;
}

.popup-profile-header:hover .popup-profile-chevron {
    opacity: .8;
}

/* ── Divider ── */
.popup-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 4px 14px;
}

/* ── Menu Items ── */
.popup-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 12px);
    margin: 0 6px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    padding: 10px 12px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    transition: background .15s ease, color .15s ease;
    text-align: left;
}

.popup-menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.popup-menu-item.hidden {
    display: none;
}

/* SVG Icons in menu items */
.popup-svg-icon {
    flex-shrink: 0;
    opacity: .5;
}

.popup-menu-item:hover .popup-svg-icon {
    opacity: .8;
}

/* Badge */
.popup-badge {
    background: var(--accent);
    color: white;
    font-size: .6rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 50px;
    min-width: 16px;
    text-align: center;
    margin-left: auto;
}

.popup-badge.hidden {
    display: none;
}

/* ── Group ── */
.popup-menu-group {
    padding: 10px 16px 8px;
}

.popup-group-label {
    font-size: .6rem;
    color: rgba(255, 255, 255, .25);
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

/* ── Theme Dots ── */
.popup-theme-grid {
    display: flex;
    gap: 8px;
}

.popup-theme-btn {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    padding: 3px;
    transition: all .18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-theme-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.popup-theme-btn.active {
    border-color: var(--accent);
}

.popup-theme-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.12);
    display: block;
}

.popup-theme-btn.active .popup-theme-dot {
    border-color: transparent;
}

/* ── Language Toggle ── */
.popup-lang-row {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 3px;
}

.popup-lang-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 6px 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 700;
    font-family: inherit;
    transition: all .18s ease;
    text-align: center;
}

.popup-lang-btn:hover {
    color: var(--text-primary);
}

.popup-lang-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

/* ── Logout ── */
.popup-logout-btn {
    color: #d4737a !important;
}

.popup-logout-btn .popup-svg-icon {
    stroke: #d4737a;
    opacity: .7;
}

.popup-logout-btn:hover {
    background: rgba(212, 115, 122, .08) !important;
}

.popup-logout-btn:hover .popup-svg-icon {
    opacity: 1;
}



/* Featured Hero – CineStream Style */
#featured-hero-genres {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.featured-genre-tag {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    opacity: 0.9;
}

.featured-genre-tag:not(:last-child)::after {
    content: '·';
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

#featured-hero-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    font-size: .88rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.hero-meta-rating {
    color: var(--accent);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.hero-meta-sep {
    color: rgba(255, 255, 255, 0.25);
}

/* Featured Hero summary fix */
#featured-hero-summary {
    font-size: .9rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
    margin-bottom: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
    max-width: 500px;
}

#featured-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Sarı İzle butonu */
.featured-play-btn {
    background: var(--accent);
    border: none;
    color: #000;
    padding: 11px 28px;
    border-radius: 50px;
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.22s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px var(--accent-glow);
    letter-spacing: 0.3px;
}

.featured-play-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px var(--accent-glow);
}

/* Ghost Detay butonu */
.featured-detail-btn {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: white;
    padding: 11px 24px;
    border-radius: 50px;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.22s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.featured-detail-btn:hover {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* ── Erişilebilirlik: Azaltılmış hareket tercihi ── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #hbo-grain {
        animation: none;
    }

    .movie-card {
        will-change: auto;
    }
}

/* ══════════════════════════════════════════════════════════════
   POPUP MENÜ – YENİ TASARIM
══════════════════════════════════════════════════════════════ */

/* Header profil butonu */
.header-profile-btn {
    background: #e67e22;
    /* Daha sade turuncu/kirmizi tonu */
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 8px;
    transition: transform var(--transition);
    position: relative;
}

.header-profile-btn:hover {
    transform: scale(1.07);
}

.header-profile-btn .profile-initial-avatar {
    color: #fff;
    /* Beyaz metin */
}

/* Baş harf avatar */
.profile-initial-avatar {
    font-size: .95rem;
    font-weight: 800;
    color: #000;
    line-height: 1;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    font-family: inherit;
}

/* Popup menü kapsayıcı */
.popup-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 260px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
    z-index: 600;
    overflow: hidden;
    animation: popupSlideDown .2s cubic-bezier(0.16, 1, 0.3, 1);
    padding-bottom: 4px;
}

.popup-menu.hidden {
    display: none;
}

@keyframes popupSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Profil başlık */
.popup-profile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 4px;
    transition: background .15s ease;
}

.popup-profile-header:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Popup baş harf avatar */
.popup-initial-avatar {
    width: 42px;
    height: 42px;
    background: var(--accent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: #000;
    flex-shrink: 0;
    font-family: inherit;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    line-height: 1;
}

.popup-initial-avatar img.auth-photo {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: cover;
}

.popup-profile-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.popup-profile-name {
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.popup-profile-sub {
    font-size: .75rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

/* Ayırıcı */
.popup-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 6px 0;
}

/* Bölüm */
.popup-section {
    padding: 8px 16px;
}

.popup-section.hidden {
    display: none;
}

.popup-section-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 8px;
}

/* Devam Et listesi */
.popup-continue-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.popup-continue-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    width: 100%;
}

.popup-continue-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.popup-continue-num {
    font-size: .72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    min-width: 14px;
    flex-shrink: 0;
}

.popup-continue-title {
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Tema Toggle Switches ── */
.popup-theme-toggles {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.popup-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 2px 0;
}

.popup-toggle-label {
    font-size: .84rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.popup-toggle-switch {
    position: relative;
    width: 40px;
    height: 22px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background .2s ease;
    flex-shrink: 0;
    padding: 0;
}

.popup-toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), background .2s ease;
}

.popup-toggle-switch.active {
    background: var(--accent);
}

.popup-toggle-switch.active::after {
    transform: translateX(18px);
    background: #000;
}

/* ── Dil Butonları ── */
.popup-lang-row {
    display: flex;
    gap: 8px;
}

.popup-lang-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.5px;
    transition: all .15s ease;
}

.popup-lang-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
}

.popup-lang-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ── Çıkış Butonu ── */
.popup-logout-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 24px);
    margin: 4px 12px 8px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: .84rem;
    font-weight: 600;
    font-family: inherit;
    text-align: left;
    transition: color .15s ease, background .15s ease;
}

.popup-logout-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

/* ══════════════════════════════════════════════════════════════
   KATEGORİLER POPUP
══════════════════════════════════════════════════════════════ */

/* Nav Kategoriler buton */
.nav-kategori-wrap {
    position: relative;
}

.nav-kategori-btn {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-chevron {
    transition: transform .2s ease;
    opacity: 0.6;
}

.nav-kategori-wrap.open .nav-chevron {
    transform: rotate(180deg);
}

/* Kategoriler popup */
.kategori-popup {
    position: absolute;
    top: calc(100% + 16px);
    left: 0;
    width: 300px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
    z-index: 600;
    overflow: hidden;
    animation: popupSlideDown .2s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 12px;
}

.kategori-popup.hidden {
    display: none;
}

.kategori-popup-header {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    padding: 0 4px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 10px;
}

.kategori-popup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.kategori-genre-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    text-align: left;
    transition: all .15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kategori-genre-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.kategori-genre-btn.active {
    background: var(--accent-subtle);
    border-color: rgba(245, 197, 24, 0.3);
    color: var(--accent);
}

/* ── Listem Nav butonu ── */
.nav-listem-btn {
    position: relative;
}

#continue-count {
    position: absolute;
    top: -4px;
    right: -8px;
    background: var(--accent);
    color: #000;
    font-size: .58rem;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 50px;
    min-width: 15px;
    text-align: center;
}

/* Profile wrap - popup icin position context */
.header-profile-wrap {
    position: relative;
    display: flex;
    align-items: center;
}


/* ── Header Right (Arama + Profil Grubu) ───────────────────── */
.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.header-search-wrap {
    display: flex;
    align-items: center;
    gap: 0;
}

.header-icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    border: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .18s, color .18s;
    flex-shrink: 0;
}

.header-icon-circle:hover {
    background: rgba(255, 255, 255, .13);
    color: var(--text-primary);
}

/* Collapsible arama formu */
#search-form.search-collapsed {
    width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: width .25s ease, opacity .2s ease;
    margin: 0;
    padding: 0;
}

#search-form:not(.search-collapsed) {
    width: 220px;
    opacity: 1;
    pointer-events: all;
    transition: width .25s ease, opacity .2s ease;
    position: relative;
}

#search-form:not(.search-collapsed) #search-input {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: .88rem;
    outline: none;
}

#search-form:not(.search-collapsed) #search-input:focus {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), .08);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* nav-tabs: normal flex (no margin-left auto since header-right handles right alignment) */
header .nav-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 auto 0 20px;
}

/* ── Listem Sayfasi ────────────────────────────────────────── */
.listem-page {
    position: fixed;
    inset: 0;
    top: 60px;
    /* below header */
    background: var(--bg-primary);
    z-index: 200;
    overflow-y: auto;
    padding: 0 28px 48px;
    animation: listemSlideIn .25s ease;
}

@keyframes listemSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.listem-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    margin-bottom: 28px;
}

.listem-title {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.listem-subtitle {
    font-size: .85rem;
    color: var(--text-secondary);
    margin: 0;
}

.listem-close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    border: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .18s, color .18s;
}

.listem-close-btn:hover {
    background: rgba(255, 255, 255, .14);
    color: var(--text-primary);
}

.listem-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 0;
    color: var(--text-secondary);
    text-align: center;
}

.listem-empty p {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.listem-empty span {
    font-size: .85rem;
    margin: 0;
}

.listem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
}

@media (max-width: 600px) {
    .listem-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 14px;
    }
}

.listem-card {
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-secondary);
    transition: transform .2s;
}

.listem-card:hover {
    transform: translateY(-4px);
}

.listem-card-poster {
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: #1a1a2e;
}

.listem-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}

.listem-card:hover .listem-card-poster img {
    transform: scale(1.04);
}

.listem-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
}

.listem-card:hover .listem-card-overlay {
    opacity: 1;
}

.listem-play-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

.listem-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, .18);
}

.listem-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
}

.listem-remove-btn {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .65);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .18s, background .18s;
}

.listem-card:hover .listem-remove-btn {
    opacity: 1;
}

.listem-remove-btn:hover {
    background: rgba(220, 50, 50, .85);
}

.listem-card-info {
    padding: 10px 10px 12px;
}

.listem-card-title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.listem-card-meta {
    font-size: .72rem;
    color: var(--text-secondary);
}

.hidden {
    display: none !important;
}
/* --- Player Overlay (Popup Kalkanı) --- */
#player-wrapper {
    position: relative; /* Overlay'in iframe üzerinde durması için şart */
}

.player-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Hafif karartma */
    z-index: 50; /* iframe'in üstünde olmalı */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.player-overlay.hidden {
    display: none;
    pointer-events: none;
}

.player-overlay .play-icon {
    background: var(--accent); /* Sitenin sarı rengi */
    color: #000;
    padding: 15px 35px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    transition: transform 0.2s ease;
}

.player-overlay:hover .play-icon {
    transform: scale(1.05);
}