:root { --primary: #e50914; --bg: #0b0b0b; }
body { margin: 0; background: var(--bg); color: white; font-family: 'Cairo', sans-serif; direction: rtl; }
.navbar { position: fixed; width: 100%; padding: 20px 4%; display: flex; justify-content: space-between; z-index: 100; background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent); box-sizing: border-box; }
.logo { color: var(--primary); font-size: 24px; font-weight: bold; }
.hero { height: 80vh; background-size: cover; background-position: center; display: flex; align-items: center; padding: 0 4%; position: relative; }
.hero-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(to right, black, transparent); }
.hero-content { position: relative; z-index: 10; max-width: 500px; }
.hero-content h1 { font-size: 48px; margin: 0; }
.btn-play { background: white; color: black; border: none; padding: 12px 30px; font-weight: bold; cursor: pointer; border-radius: 4px; margin-top: 20px; }
.main-content { padding: 40px 4%; margin-top: -50px; position: relative; }
.slider { display: flex; gap: 15px; overflow-x: auto; scrollbar-width: none; padding: 20px 0; }
.card { min-width: 200px; position: relative; transition: 0.3s; cursor: pointer; border-radius: 8px; overflow: hidden; }
.card:hover { transform: scale(1.05); }
.card img { width: 100%; height: 300px; object-fit: cover; }
.quality-tag { position: absolute; top: 10px; left: 10px; background: var(--primary); font-size: 10px; padding: 3px 7px; border-radius: 3px; font-weight: bold; }
.video-overlay { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.95); z-index: 1000; justify-content: center; align-items: center; }
.video-container { width: 80%; aspect-ratio: 16/9; }
.video-container iframe { width: 100%; height: 100%; }
.close-btn { position: absolute; top: 20px; right: 20px; font-size: 40px; cursor: pointer; }
.rating-tag {
    position: absolute;
    top: 10px;
    right: 10px; /* ستكون على اليمين والجودة على اليسار */
    background: rgba(0, 0, 0, 0.8);
    color: #f5c518;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
    z-index: 2;
}