html,body,#root{width:100%;min-height:100vh;margin:0;padding:0}body{overflow-x:hidden}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;min-height:100vh}body{color:#fff;background:#05010f;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}.container{background:#05010f;width:100vw;min-height:100vh;padding:40px}.container h1{color:#ff3b3b;margin-bottom:30px;font-size:55px}.search-container{width:100%;margin-bottom:45px}.search-input{color:#fff;background:#181818;border:none;border-radius:18px;outline:none;width:100%;margin-bottom:25px;padding:20px;font-size:18px}.genre-list{flex-wrap:wrap;gap:15px;display:flex}.genre-btn{color:#fff;cursor:pointer;background:#232323;border:none;border-radius:999px;padding:12px 24px;font-size:16px;transition:all .3s}.genre-btn:hover,.genre-btn.active{background:#ff3b3b}.film-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:30px;width:100%;display:grid}.film-card{cursor:pointer;background:#151515;border-radius:22px;width:100%;transition:all .3s;overflow:hidden}.film-card:hover{transform:translateY(-8px)}.film-card img{object-fit:cover;width:100%;height:380px}.film-info{padding:18px}.film-info h2{margin-bottom:12px;font-size:30px}.description{color:#bdbdbd;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;margin-bottom:15px;font-size:15px;line-height:1.7;display:-webkit-box;overflow:hidden}.detail{color:#ffd54f;font-size:18px;font-weight:700}.modal-overlay{z-index:999;background:#000000d9;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;display:flex;position:fixed;top:0;left:0}.modal-content{background:#1c1c1c;border-radius:25px;width:700px;max-width:95%;max-height:90vh;position:relative;overflow-y:auto}.modal-image{object-fit:cover;width:100%;height:500px}.modal-content h2{padding:25px 25px 10px;font-size:40px}.modal-content p{margin-bottom:14px;padding:0 25px;font-size:18px}.modal-description{color:#ccc;line-height:1.8;padding-bottom:35px!important}.close-btn{color:#fff;cursor:pointer;background:#000000b3;border:none;border-radius:50%;width:45px;height:45px;font-size:20px;position:absolute;top:15px;right:15px}.rekom-title{padding:20px 25px 10px;font-size:28px}.rekom-list{gap:15px;padding:20px;display:flex;overflow-x:auto}.rekom-card{cursor:pointer;min-width:140px;transition:all .3s}.rekom-card:hover{transform:scale(1.05)}.rekom-card img{object-fit:cover;border-radius:14px;width:100%;height:190px}.rekom-card p{text-align:center;margin-top:10px;font-size:15px}.hero{margin-bottom:40px}.brand{color:#fff;margin-bottom:6px;font-size:30px;font-weight:600}.title{color:#ff4d4d;letter-spacing:2px;margin:0 0 25px;font-weight:700;font-size:50px!important}