/* RESET & BODY */
body{margin:0;padding:0;font-family:Arial,sans-serif;background:#000;color:#fff;overflow-x:hidden;}

/* HEADER NETFLIX STYLE */
header{width:100%;background:rgba(0,0,0,0.85);position:sticky;top:0;z-index:100;}
.header-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:10px 25px;}
header .logo{font-size:28px;font-weight:bold;color:#e50914;}
header nav{display:flex;align-items:center;position:relative;}
.menu{display:flex;gap:20px;}
.menu a{color:#fff;text-decoration:none;font-size:16px;}
.menu .login-btn{font-weight:bold;border:1px solid #fff;padding:4px 12px;border-radius:4px;}
.menu-toggle{display:none;font-size:28px;color:#fff;cursor:pointer;}

/* HERO */
.hero{width:100%;height:500px;position:relative;overflow:hidden;}
.hero-video{width:100%;height:100%;object-fit:cover;filter:brightness(40%);position:absolute;top:0;left:0;}
.hero-content{position:absolute;top:50%;left:50px;transform:translateY(-50%);z-index:2;max-width:600px;}
.hero-title{font-size:48px;font-weight:bold;margin-bottom:10px;}
.hero-desc{font-size:20px;margin-bottom:20px;}
.hero-btn{padding:12px 25px;font-size:18px;max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#e50914;border:none;color:#fff;cursor:pointer;border-radius:4px;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000 25%,transparent 60%);z-index:1;}

/* CONTROLS */
.controls-section{display:flex;align-items:center;gap:10px;padding:15px 25px;flex-wrap:wrap;}
.search-bar{padding:6px 12px;border-radius:4px;border:none;background:#333;color:#fff;flex:1;min-width:150px;max-width:300px;}
.search-bar::placeholder{color:#aaa;}

/* SECTION TITLE */
.section-title{font-size:24px;font-weight:bold;margin:25px 25px 10px 25px;}

/* CAROUSEL */
.carousel-wrapper{position:relative;margin-bottom:30px;}
.carousel{display:flex;overflow-x:auto;overflow-y:hidden;padding:15px 25px;gap:12px;scrollbar-width:none;}
.carousel::-webkit-scrollbar{display:none;}
.film-card{min-width:170px;height:260px;border-radius:6px;overflow:hidden;flex-shrink:0;cursor:pointer;background:#111;position:relative;}
.film-card img{width:100%;height:100%;object-fit:cover;}
.scroll-left,.scroll-right{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);border:none;color:#fff;font-size:24px;padding:5px 10px;cursor:pointer;display:none;border-radius:4px;z-index:2;}
.carousel-wrapper:hover .scroll-left,.carousel-wrapper:hover .scroll-right{display:block;}
.scroll-left{left:5px;}
.scroll-right{right:5px;}

/* POP-UP DETAIL */
#filmDetailModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.9);justify-content:center;align-items:center;z-index:300;}
.detail-content{background:#111;padding:20px;border-radius:6px;max-width:900px;width:90%;color:#fff;position:relative;}
.detail-content .icon-close{position:absolute;top:15px;right:15px;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;}
.detail-flex{display:flex;gap:20px;flex-wrap:wrap;}
.detail-flex img{width:200px;border-radius:6px;}
.detail-info{flex:1;}

/* WATCH PLAYER */
#watchPlayerContainer{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000;z-index:400;}
#watchPlayerContainer video{width:100%;height:100%;object-fit:contain;}
#closePlayer{position:absolute;top:10px;right:10px;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;z-index:410;}
#skipAdBtn{position:absolute;top:20px;right:20px;padding:8px 12px;background:#e50914;border:none;color:#fff;cursor:pointer;border-radius:4px;z-index:500;display:none;}
#currentTimeDisplay{position:absolute;bottom:20px;left:20px;font-size:16px;color:#fff;background:rgba(0,0,0,.5);padding:3px 6px;border-radius:4px;}

/* FOOTER */
footer{background:#111;padding:25px;color:#fff;}
footer .footer-content{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;}
footer .footer-logo{font-size:20px;font-weight:bold;margin-bottom:10px;}
footer .footer-links{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:10px;}
footer .footer-links a,footer .footer-social a{color:#fff;text-decoration:none;}
footer .footer-social{display:flex;gap:10px;}
footer .footer-social img{width:24px;height:24px;}

/* MOBILE */
@media(max-width:768px){
  .menu{display:none;flex-direction:column;background:#111;position:absolute;top:50px;right:0;width:200px;padding:10px;border-radius:6px;}
  .menu.active{display:flex;}
  .menu-toggle{display:block;}
  footer .footer-content{flex-direction:column;align-items:center;text-align:center;gap:10px;}
  footer .footer-links{justify-content:center;}
  footer .footer-social{justify-content:center;}
  .hero{height:300px;}
  .hero-title{font-size:26px;}
  .hero-desc{font-size:14px;}
  .film-card{min-width:130px;height:200px;}
}

/* SMALL MOBILE */
@media(max-width:480px){
  .film-card{min-width:110px;height:170px;}
  .hero{height:220px;}
  .hero-title{font-size:20px;}
  .hero-desc{font-size:12px;}
}