/* General Reset */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #0f0f0f; color: #ffffff; }

/* Navigation */
.navbar { display: flex; justify-content: space-between; align-items: center; background-color: #1a1a1a; padding: 15px 50px; border-bottom: 2px solid #e50914; }
.logo { font-size: 24px; font-weight: bold; color: #e50914; }
.nav-links { list-style: none; display: flex; gap: 20px; }
.nav-links a { color: #ffffff; text-decoration: none; font-weight: 500; padding: 5px 10px; transition: color 0.3s; }
.nav-links a:hover, .nav-links a.active { color: #e50914; }

/* Hero Section */
.hero { text-align: center; padding: 60px 20px; background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%); }
.hero h1 { font-size: 36px; margin-bottom: 10px; }
.hero p { color: #aaaaaa; font-size: 18px; }

/* Media Grid Container */
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; }

/* Media Cards */
.media-card { background-color: #1e1e1e; border-radius: 8px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
.media-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(229, 9, 20, 0.2); }
.poster { width: 100%; height: 350px; object-fit: cover; border-bottom: 3px solid #e50914; }

.card-content { padding: 15px; display: flex; flex-direction: column; height: calc(100% - 350px); }
.card-content h3 { font-size: 18px; margin-bottom: 10px; color: #ffffff; }
.badge { display: inline-block; background-color: #333; color: #aaa; font-size: 12px; padding: 3px 8px; border-radius: 4px; margin-bottom: 10px; width: fit-content; text-transform: uppercase; }
.card-content p { font-size: 14px; color: #cccccc; margin-bottom: 20px; flex-grow: 1; }

/* Download Button */
.btn-download { display: block; text-align: center; background-color: #e50914; color: #ffffff; text-decoration: none; padding: 10px; border-radius: 4px; font-weight: bold; transition: background-color 0.3s; }
.btn-download:hover { background-color: #b20710; }