*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:#111;color:#f5f5f5;-webkit-font-smoothing:antialiased;min-height:100vh;position:relative}body:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:#b3001e;box-shadow:0 0 30px #b3001e;z-index:100}h1,h2,h3{font-family:Bebas Neue,sans-serif;letter-spacing:2px}a{text-decoration:none;color:inherit}.loading,.error{display:flex;justify-content:center;align-items:center;min-height:100vh;font-size:1.5rem;font-weight:700;background-color:#111;color:#fc0}.home-container{padding:45px 40px;max-width:1600px;margin:0 auto}.home-container header h1{font-size:2.5rem;margin-bottom:30px;text-align:left;font-weight:800;letter-spacing:-1px;border-bottom:3px solid #b3001e;padding-bottom:10px;display:inline-block;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5)}.movies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:40px}.movie-card{position:relative;overflow:hidden;border-radius:8px;background-color:#1a1a1a;box-shadow:0 4px 15px #0009;transition:transform .3s ease,box-shadow .3s ease;aspect-ratio:2 / 3}.movie-card img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease,filter .3s ease}.movie-info{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.95) 80%);padding:40px 20px 20px;opacity:0;transition:opacity .3s ease;display:flex;flex-direction:column;justify-content:flex-end}.movie-info h3{font-size:1.6rem;line-height:1;margin-bottom:5px;color:#fff}.movie-info p{font-size:.85rem;color:#ccc}.movie-card:hover{transform:scale(1.03);box-shadow:0 10px 25px #b3001e80}.movie-card:hover img{transform:scale(1.05);filter:brightness(.7)}.movie-card:hover .movie-info{opacity:1}@media (max-width: 600px){.home-container{padding:45px 40px}.movies-grid{grid-template-columns:repeat(autofill,minmax(120px,1fr));gap:40px}.home-container header h1{font-size:1.8rem;margin-bottom:25px}.movie-info{padding:15px 8px 8px}.movie-info h3{font-size:1.2rem}.movie-info p{font-size:1rem}}.movie-detail-page{min-height:100vh;position:relative;background-color:#111}.back-button{position:absolute;top:30px;left:30px;z-index:10;background-color:#ffffff1a;padding:10px 20px;border-radius:50px;font-weight:600;font-size:.9rem;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:background-color .2s,transform .2s;border:1px solid rgba(255,255,255,.2)}.back-button:hover{background-color:#b3001e;color:#fff;transform:translate(-3px)}.detail-hero{min-height:100vh;display:flex;align-items:flex-end;position:relative;padding:60px 40px}.backdrop-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}.detail-hero:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(17,17,17,.3) 0%,rgba(17,17,17,.9) 90%);z-index:2}.detail-content{position:relative;z-index:3;display:flex;gap:40px;max-width:1200px;margin:0 auto;width:100%;align-items:flex-end}.poster-img{width:300px;border-radius:10px;box-shadow:0 10px 30px #000000b3;border:1px solid rgba(255,255,255,.1)}.text-side{flex:1;padding-bottom:20px}.text-side h1{font-size:3rem;font-weight:800;margin-bottom:10px;line-height:1.1}.tagline{color:#f34;font-size:1.2rem;margin-bottom:20px}.meta-info{display:flex;gap:20px;margin-bottom:25px;font-size:1rem;background:rgba(0,0,0,.4);padding:8px 15px;border-radius:6px;width:fit-content}.text-side h2{font-size:1.4rem;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px;color:#b3b3b3}.overview{font-size:1.1rem;line-height:1.6;color:#e0e0e0;max-width:800px}@media (max-width: 900px){.detail-content{flex-direction:column;align-items:center;text-align:center}.detail-hero{padding:120px 20px 40px}.poster-img{width:200px}.meta-info{margin:0 auto 25px}.text-side h1{font-size:2rem}}.app-layout{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1}.global-header{background-color:#0b0b0b;border-bottom:2px solid #b3001e;padding:20px 40px;position:sticky;top:0;z-index:1000;box-shadow:0 4px 20px #000c}.header-content{max-width:1600px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.global-header .logo{font-family:Bebas Neue,sans-serif;font-size:2.5rem;font-weight:400;letter-spacing:2px;color:#fff;display:flex;align-items:center;gap:10px}.premium-tag{font-size:.65rem;background-color:#b3001e;color:#fff;padding:3px 6px;border-radius:4px;letter-spacing:2px;font-weight:700;vertical-align:middle}.header-nav{display:flex;gap:30px}.header-nav a{font-family:Bebas Neue,sans-serif;font-size:1.3rem;letter-spacing:1px;color:#ccc;transition:color .2s}.header-nav a:hover{color:#f34}.global-footer{background-color:#0b0b0b;border-top:1px solid rgba(255,255,255,.05);padding:30px 40px;text-align:center;margin-top:40px}.footer-content{max-width:1600px;margin:0 auto;color:#888;font-size:.9rem}.footer-subtext{font-size:.75rem;color:#555;margin-top:8px;text-transform:uppercase;letter-spacing:1px}@media (max-width: 600px){.global-header{padding:15px 20px}.header-content{flex-direction:column;gap:12px}.global-header .logo{font-size:2.5rem}.header-nav{gap:20px}}.buy-ticket-btn{font-family:Bebas Neue,sans-serif;font-size:1.5rem;letter-spacing:1px;background-color:#b3001e;color:#fff;border:none;padding:12px 35px;margin-top:30px;border-radius:4px;cursor:pointer;box-shadow:0 4px 15px #b3001e66;transition:background-color .2s,transform .2s}.buy-ticket-btn:hover{background-color:#d60024;transform:translateY(-2px)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000d9;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:2000}.modal-container{background-color:#1a1a1a;border:2px solid #b3001e;border-radius:12px;padding:40px;max-width:500px;width:90%;position:relative;box-shadow:0 10px 40px #000000e6;color:#fff}.close-modal-btn{position:absolute;top:15px;right:20px;background:none;border:none;color:#888;font-size:2rem;cursor:pointer}.close-modal-btn:hover{color:#fff}.modal-booking h2{font-size:2rem;margin-bottom:5px;color:#fff}.salong-info{color:#b3001e;font-weight:600;margin-bottom:30px}.ticket-picker{display:flex;justify-content:space-between;align-items:center;background:#262626;padding:20px;border-radius:8px;margin-bottom:25px;border:1px solid rgba(255,255,255,.05)}.picker-label-side{display:flex;flex-direction:column;gap:4px}.picker-label-side label{font-family:Bebas Neue,sans-serif;font-size:1.4rem;letter-spacing:1px;color:#fff}.price-per-ticket{font-size:.8rem;color:#888}.counter-box{display:flex;align-items:center;gap:20px;background-color:#111;padding:5px 10px;border-radius:50px}.counter-btn{background:#b3001e;color:#fff;border:none;width:32px;height:32px;border-radius:50%;font-size:1.2rem;font-weight:700;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color .2s,transform .1s}.counter-btn:hover:not(:disabled){background-color:#d60024;transform:scale(1.05)}.counter-btn:disabled{background-color:#333;color:#666;cursor:not-allowed}.ticket-amount{font-size:1.5rem;font-weight:800;color:#fff;min-width:25px;text-align:center}.price-info{display:flex;justify-content:space-between;font-size:1.2rem;font-weight:700;margin-bottom:30px;padding:0 5px}.confirm-purchase-btn,.done-btn{font-family:Bebas Neue,sans-serif;font-size:1.4rem;width:100%;background-color:#b3001e;color:#fff;border:none;padding:12px;border-radius:6px;cursor:pointer;letter-spacing:1px}.success-badge{background-color:#2e7d32;color:#fff;width:fit-content;padding:5px 12px;border-radius:20px;font-size:.85rem;font-weight:700;margin:0 auto 15px}.modal-ticket-success h2{font-size:1.8rem;margin-bottom:20px}.cinema-ticket{background-color:#fff6e5;color:#111;border-radius:8px;margin:20px 0;box-shadow:0 8px 20px #0006;overflow:hidden;position:relative;text-align:left}.cinema-ticket:before,.cinema-ticket:after{content:"";position:absolute;top:40px;width:20px;height:20px;background-color:#1a1a1a;border-radius:50%;z-index:5}.cinema-ticket:before{left:-10px}.cinema-ticket:after{right:-10px}.ticket-header{background-color:#b3001e;color:#fff;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px dashed #fff6e5}.ticket-header h3{font-size:1.4rem;letter-spacing:1px}.ticket-body{padding:20px}.ticket-body h4{font-family:Bebas Neue,sans-serif;font-size:1.8rem;margin-bottom:10px;color:#111;letter-spacing:1px}.ticket-body p{font-size:.9rem;margin-bottom:5px;color:#444}.ticket-code{margin-top:15px;font-size:1rem!important;border-top:1px solid rgba(0,0,0,.1);padding-top:10px}.ticket-qr{padding:0 20px 20px;display:flex;justify-content:center}.barcode{width:100%;height:40px;background:repeating-linear-gradient(90deg,#111,#111 2px,transparent 2px,transparent 7px,#111 7px,#111 9px,transparent 9px,transparent 12px)}.ticket-instructions{font-size:.8rem;color:#888;margin-bottom:20px}
