/* Reset & Base */
* {margin:0;padding:0;box-sizing:border-box;}
body {background:#141414;color:#fff;font-family:Arial,sans-serif;overflow-x:hidden;}
a {text-decoration:none;color:inherit;}

/* HEADER */
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 30px;
  position:fixed;
  width:100%;
  top:0;
  z-index:1000;
  background: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0));
}
.logo {font-size:28px;color:#e50914;font-weight:bold;}
nav a {margin-left:20px;opacity:0.8;}
nav a:hover {opacity:1;}

/* Search */
.search-container {
  display:flex;
  align-items:center;
  background:rgba(255,255,255,0.1);
  padding:6px 12px;
  border-radius:4px;
}
.search-container input {
  background:none;
  border:none;
  color:#fff;
  width:140px;
}
.search-container input:focus {outline:none;}
.search-container i {font-size:16px;opacity:0.7;}

/* HERO */
.hero {
  height:60vh;
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  align-items:flex-end;
  padding:50px 30px;
}
.hero::after {
  content:"";
  position:absolute;
  width:100%;
  height:200px;
  bottom:0;
  background:linear-gradient(to top, #141414, transparent);
}
.hero-content {
  position:relative;
  z-index:2;
  max-width:500px;
}
.hero h1 {font-size:36px;margin-bottom:10px;}
.hero p {font-size:14px;margin-bottom:15px;}

/* ROWS & MOVIES */
.row {
  margin-top:40px;
  padding:0 20px;
  position:relative;
}
.row h2 {margin-bottom:10px;font-size:18px;}
.movie-row {
  display:flex;
  overflow-x:auto;
  gap:8px;
  scroll-behavior:smooth;
  padding-bottom:10px;
}
.movie-row::-webkit-scrollbar {height:8px;}
.movie-row::-webkit-scrollbar-thumb {background:#333;border-radius:10px;}

.movie {
  min-width:140px;
  height:200px;
  background-size:cover;
  background-position:center;
  border-radius:4px;
  transition:transform 0.2s;
  position:relative;
  cursor:pointer;
}
.movie:hover {transform:scale(1.05);}
.movie::after {
  content:'\f04b';
  font-family: "Font Awesome 5 Free";
  font-weight:900;
  position:absolute;
  font-size:24px;
  color:#fff;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s;
}
.movie:hover::after {opacity:1;}

/* Arrows */
.row .arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.5);
  border:none;
  color:#fff;
  font-size:24px;
  cursor:pointer;
  padding:6px 12px;
  border-radius:50%;
  z-index:10;
  display:none;
}
.row:hover .arrow {display:block;}
.row .arrow-left {left:0;}
.row .arrow-right {right:0;}
@media(max-width:768px){.row .arrow {display:block;}}

/* MODAL */
.modal {
  display:none;
  position:fixed;
  z-index:2000;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background:rgba(0,0,0,0.8);
}
.modal-content {
  background:#222;
  margin:5% auto;
  padding:20px;
  border-radius:8px;
  max-width:700px;
  position:relative;
}
.close {
  color:#fff;
  position:absolute;
  top:10px;
  right:20px;
  font-size:28px;
  font-weight:bold;
  cursor:pointer;
}
.close:hover {color:#e50914;}
.trailer-container iframe {width:100%;height:360px;border:none;border-radius:4px;}

/* FOOTER */
footer {
  text-align:center;
  padding:30px;
  color:#777;
  font-size:13px;
  margin-top:40px;
}

/* RESPONSIVE */
@media(max-width:768px){
  .hero h1 {font-size:24px;}
  .hero p {display:none;}
  .movie {min-width:120px;height:170px;}
  .search-container input {width:100px;}
  .trailer-container iframe {height:200px;}
}