*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:url(https://images.unsplash.com/photo-1741681603736-54fe2c38daab?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat center center fixed;background-size:cover;color:#eee;line-height:1.6;overflow-x:hidden}a{text-decoration:none;color:inherit}.navbar{position:fixed;top:0;width:100%;padding:20px 60px;display:flex;align-items:center;justify-content:space-between;background:#111111d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000}.navbar-logo{font-size:1.8rem;font-weight:700;color:#e50914}.navbar-menu{display:flex;gap:30px}.hamburger{display:none;cursor:pointer}.hamburger span{display:block;width:25px;height:3px;margin:5px;background:#ccc}.hamburger.active span{background:#ccc}.hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}#main-content{margin-top:80px}.hero{position:relative;height:90vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 20px}.hero-content{position:relative;max-width:700px}.hero h1{font-size:3.5rem;margin-bottom:20px;font-weight:500}.hero p{font-size:1.3rem;margin-bottom:30px;color:#ccc}.section{margin-top:-30px;padding:60px 80px;background-color:transparent}.section h2{margin-top:30px;font-size:2rem;margin-bottom:40px;text-align:center;letter-spacing:1px}.row{display:flex;gap:20px;overflow-x:auto;padding:14px 4px 10px;position:relative;z-index:0}.row-empty{text-align:center;color:#999;padding:24px 16px;font-size:1rem}.rating-filter-section{padding-top:20px;padding-bottom:20px;margin-top:40px}.rating-filter-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px}.rating-filter-bar label{font-size:1rem;color:#ccc;letter-spacing:.5px}.rating-filter-select{padding:10px 36px 10px 14px;min-width:180px;border:1px solid #333;border-radius:25px;background:#111;color:#fff;font-size:.95rem;cursor:pointer;outline:none}.rating-filter-select:focus{border-color:#e50914}.row::-webkit-scrollbar{height:6px}.row::-webkit-scrollbar-track{background:#222;border-radius:3px}.row::-webkit-scrollbar-thumb{background:#555;border-radius:3px}.movie-card{background-color:#222;border-radius:10px;overflow:visible;transition:transform .28s ease,box-shadow .28s ease,z-index 0s linear .28s;cursor:pointer;flex:0 0 220px;display:flex;flex-direction:column;position:relative;z-index:1}.movie-card--hover{transform:translateY(-8px) scale(1.06);box-shadow:0 16px 32px #000000bf;z-index:40;transition:transform .28s ease,box-shadow .28s ease,z-index 0s linear 0s}.movie-card-media{position:relative;overflow:hidden;border-radius:10px 10px 0 0;border-bottom:2px solid #111;aspect-ratio:2 / 3;flex-shrink:0}.movie-card-media img{width:100%;height:100%;object-fit:cover;display:block}.movie-card-preview{position:absolute;left:0;right:0;bottom:0;padding:28px 10px 10px;background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.55) 45%,transparent 100%);opacity:0;transition:opacity .22s ease;pointer-events:none;text-align:left}.movie-card--hover .movie-card-preview{opacity:1}.movie-card-preview-rating{display:inline-block;font-size:.75rem;font-weight:600;color:#b3e877;margin-bottom:4px}.movie-card-preview-genres{display:block;font-size:.68rem;color:#bbb;margin-bottom:6px;line-height:1.35}.movie-card-preview-text{font-size:.72rem;color:#eee;line-height:1.4;max-height:4.5em;overflow:hidden;margin:0}.movie-info{padding:10px;text-align:center;flex:1;min-height:0;overflow:hidden}.movie-info h3{font-size:1.1rem;margin-bottom:10px;letter-spacing:.5px}.movie-info p{font-size:.9rem;color:#aaa;margin-bottom:15px}.btn{display:inline-block;padding:8px 16px;background-color:#e50914;color:#fff;border:none;border-radius:20px;cursor:pointer;font-size:.9rem}.btn:hover{background-color:#f40612}.watchlist{padding:60px 80px;background-color:transparent;margin-top:-30px}.watchlist h2{margin-top:30px;text-align:center;font-size:2rem;margin-bottom:40px}.watchlist-controls{text-align:center;margin-bottom:40px}.watchlist-controls input{padding:10px;width:300px;border:1px solid #333;border-radius:25px;background:#111;color:#fff;margin-right:15px;outline:none}.watchlist-controls .btn-clear-all{margin-left:15px}.watchlist-items{display:flex;flex-wrap:wrap;gap:30px;justify-content:center}.watchlist-card{background-color:#222;padding:15px;border-radius:10px;max-width:220px;text-align:center;transition:transform .3s ease,box-shadow .3s ease}.watchlist-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0009}.watchlist-card img{width:100%;border-radius:8px;margin-bottom:10px}.details-view{padding:30px 80px;background-color:transparent}.details-container{display:flex;gap:20px;align-items:stretch}.left-panel{flex:0 0 70%;display:flex;flex-direction:column}.video-player{position:relative;width:100%;padding-bottom:60%}.video-player iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:8px}.left-panel .movie-info{margin-top:20px;width:100%}.right-panel{flex:0 0 30%;background-color:transparent;padding:20px;border-radius:8px;overflow-y:auto}.right-panel h2{font-size:1.5rem;margin-bottom:15px;text-align:center}.right-panel .suggestion-card{display:flex;gap:10px;margin-bottom:15px;padding:5px;cursor:pointer;border-radius:4px;transition:background-color .2s ease}.right-panel .suggestion-card:hover{background-color:#222}.right-panel .suggestion-card img{width:80px;height:45px;object-fit:cover;border-radius:4px}.right-panel .suggestion-card h4{font-size:1rem;margin:auto 0}.left-panel .movie-info h1{font-size:2rem;margin-bottom:10px}.left-panel .metadata{color:#777;font-size:.9rem;margin-bottom:20px}.left-panel .metadata span:not(:last-child):after{content:"•";margin:0 10px}.left-panel .movie-info p{font-size:1rem;color:#ccc}footer{text-align:center;padding:30px 20px;background-color:transparent;font-size:.9rem;letter-spacing:.5px}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;z-index:2000;align-items:center;justify-content:center}.modal-content{background:#181818;margin:4% auto;width:80%;max-width:850px;border-radius:10px;overflow:hidden;animation:modalOpen .3s ease;position:relative}@keyframes modalOpen{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.modal-body{display:flex;padding:30px;gap:30px}.modal-body img{width:300px;border-radius:8px}.modal-info{flex:1;color:#fff}.metadata{color:#777;margin:15px 0;font-size:.9rem}.metadata span:not(:last-child):after{content:"•";margin:0 10px}.modal-buttons{margin-top:25px;display:flex;gap:15px}.close{position:absolute;right:20px;top:20px;color:#fff;font-size:30px;cursor:pointer}.notification{position:fixed;top:80px;left:50%;transform:translate(-50%,-50%);background-color:#000000d9;color:#fff;padding:15px 30px;border-radius:8px;font-size:1rem;box-shadow:0 5px 15px #fff3;z-index:1050;display:none;animation:fadeInOut 3s ease-in-out;border:2px solid #e50914}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,-60%)}10%{opacity:1;transform:translate(-50%,-50%)}90%{opacity:1}to{opacity:0;transform:translate(-50%,-60%)}}@media (max-width: 669px){.navbar{padding:15px 20px}.watchlist-controls input{width:90%;margin-bottom:10px}.movie-card{flex:0 0 90%}.modal-content{width:95%;padding:10px}.modal-body{padding:10px}.hamburger{display:block;position:relative;z-index:1100}#navbar-menu{position:fixed;top:0;right:-250px;width:250px;height:100%;background:#111;transition:right .3s ease;display:flex;flex-direction:column;padding-top:60px;z-index:1000}#navbar-menu.active{height:100vh;right:0;background-color:#000001;color:#fff}#navbar-menu a{padding:1px 20px 6px;background-color:#000001;color:#fff;border-bottom:1px solid #333;opacity:0;transform:translate(20px);transition:opacity .3s ease,transform .3s ease}#navbar-menu a:last-child{border-bottom:none}#navbar-menu.active a{opacity:1;transform:translate(0)}.movie-card{flex:0 0 70%;margin:10px auto}.section{padding:40px 20px}.hero h1{font-size:2rem}.watchlist-controls input{width:100%;margin-bottom:10px}}@media (max-width: 997px){.modal-content{max-height:80%;max-width:95%}.modal-body img{display:none}.details-container{flex-direction:column}#details-suggestions{display:grid;gap:10px}}@media (max-width: 745px){.modal-content{max-height:90vh;overflow-y:auto}}html{scroll-behavior:smooth}
