@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-primary:#0a0a0f;--glass-bg:#ffffff0f;--glass-border:#ffffff1a;--glass-border-hover:#ffffff38;--glass-blur:blur(20px) saturate(1.5);--glass-shadow:0 8px 32px #00000080;--glass-shine:inset 0 1px 0 #ffffff1f;--accent-primary:#7c3aed;--text-primary:#f1f1f6;--text-secondary:#9999b3;--text-muted:#555570;--text-accent:#c084fc;--btn-primary-bg:#7c3aedd9;--btn-primary-hover:#a855f7f2;--input-bg:#ffffff0d;--input-border:#ffffff1a;--input-focus:#7c3aedb3;--input-text:#f1f1f6;--input-placeholder:#555570;--nav-bg:#0a0a0fd9;--nav-border:#ffffff12;--star-color:#f59e0b;--border-radius-sm:8px;--border-radius-md:12px;--border-radius-lg:18px}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,Segoe UI,sans-serif}body{background-color:var(--bg-primary);color:var(--text-primary);overflow-x:hidden}::-webkit-scrollbar{background:0 0;width:0}*{scrollbar-width:none;-ms-overflow-style:none}a{text-decoration:none}span{color:var(--text-accent)}.nav{z-index:100;background:var(--nav-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--nav-border);color:var(--text-primary);justify-content:space-between;align-items:center;gap:1rem;width:100%;padding:.85rem 1.5rem;display:flex;position:sticky;top:0}.logo{color:var(--text-primary);letter-spacing:-.3px;white-space:nowrap;flex-shrink:0;font-size:1.2rem;font-weight:700}.input-content{flex:1;align-items:center;max-width:360px;margin-left:auto;display:flex}.input-content input{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--border-radius-sm) 0 0 var(--border-radius-sm);color:var(--input-text);border-right:none;outline:none;flex:1;min-width:0;padding:.5rem .9rem;font-size:.85rem;transition:border-color .2s}.input-content input::placeholder{color:var(--input-placeholder)}.input-content input:focus{border-color:var(--input-focus)}.input-content .searchbtn{border-radius:0 var(--border-radius-sm) var(--border-radius-sm) 0;border:1px solid var(--input-focus);background:var(--btn-primary-bg);color:#fff;cursor:pointer;white-space:nowrap;outline:none;flex-shrink:0;padding:.5rem .9rem;font-size:.85rem;font-weight:600;transition:background .2s}.input-content .searchbtn:hover{background:var(--btn-primary-hover)}.hero{background-image:url(/hero-banner.png);background-position:50%;background-size:cover;width:100%;height:75vh;min-height:420px;position:relative}.hero:after{content:"";background:linear-gradient(to top, var(--bg-primary), transparent);width:100%;height:200px;position:absolute;bottom:0;left:0}.overlay{width:100%;height:100%;color:var(--text-primary);background:linear-gradient(90deg,#000000f2 15%,#000000b3 40%,#0006 60%,#000c 100%);flex-direction:column;justify-content:flex-end;padding:0 2rem 3rem;display:flex;position:relative}.hero-content{max-width:560px}.overlay h1{letter-spacing:-1px;text-shadow:0 0 40px #7c3aed4d;margin-bottom:1rem;font-size:clamp(1.8rem,5vw,3rem);font-weight:700;line-height:1.15}.overlay p{color:var(--text-secondary);max-width:480px;padding-bottom:1.5rem;font-size:clamp(.85rem,2vw,1rem);line-height:1.6}.container{max-width:1300px;margin:auto}.Home-page-cards{flex-direction:column;width:100%;padding-top:3rem;display:flex}.Home-page-cards h1{padding-left:1.5rem;font-size:clamp(1.2rem,3vw,1.6rem)}.movies-row-cards{scrollbar-width:thin;scrollbar-color:var(--accent-primary) transparent;align-items:stretch;gap:16px;width:100%;padding:1rem 1.5rem 1.5rem;display:flex;overflow-x:auto}.movies-row-cards::-webkit-scrollbar{height:4px}.movies-row-cards::-webkit-scrollbar-track{background:0 0}.movies-row-cards::-webkit-scrollbar-thumb{background:var(--accent-primary);border-radius:10px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;width:100%;padding:1.5rem;display:grid}.card{border-radius:var(--border-radius-lg);background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow), var(--glass-shine);text-align:center;flex-shrink:0;width:160px;transition:transform .3s,border-color .3s,box-shadow .3s;position:relative;overflow:hidden}.movies-row-cards .card{width:160px}.card-grid .card{width:100%}.card:before{content:"";z-index:2;pointer-events:none;background:linear-gradient(90deg,#0000,#ffffff4d,#0000);height:1px;position:absolute;top:0;left:10%;right:10%}.card:hover{border-color:var(--glass-border-hover);transform:translateY(-6px);box-shadow:0 20px 50px #000000a6,inset 0 1px #ffffff2e}.loading-txt{color:#c084fc;text-align:center;padding:2rem}.card img{aspect-ratio:2/3;object-fit:cover;border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0;width:100%;display:block}.card-content{color:var(--text-primary);background:0 0;padding:.75rem 1rem 1rem}.card-content h3{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:.85rem;font-weight:600;overflow:hidden}.card-content p,.card-content span{color:var(--text-muted);font-size:.75rem}.card-content .rating{color:var(--star-color);font-size:.8rem;font-weight:600}.backdrop{background-position:50%;background-size:cover;align-items:center;min-height:100vh;display:flex;position:relative}.backdrop:before{content:"";background:linear-gradient(90deg,#000000f2,#0009,#000000d9);position:absolute;inset:0}.detail-container{z-index:2;color:#fff;flex-direction:row;align-items:flex-start;gap:3rem;width:100%;padding:4rem 3rem;display:flex;position:relative}.poster-section img{border-radius:20px;width:260px;display:block;box-shadow:0 0 30px #00000080}.info-section{flex:1;max-width:700px}.info-section h1{margin-bottom:16px;font-size:clamp(1.8rem,4vw,3.5rem);line-height:1.1}.info-section p{color:#cfcfcf;line-height:1.8}.tagline{color:#c084fc;margin-bottom:16px;font-size:1rem;font-style:italic}.genres{flex-wrap:wrap;gap:8px;margin:16px 0;display:flex}.genres span{color:#f5c518;background:#1f1f1f;border-radius:20px;padding:6px 14px;font-size:.8rem}.movie-meta{color:#d1d1d1;flex-wrap:wrap;gap:16px;margin:20px 0;font-size:.9rem;display:flex}.back-btn{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--border-radius-sm);color:var(--text-primary);cursor:pointer;margin-bottom:1.5rem;padding:8px 16px;font-size:.85rem;transition:border-color .2s;display:inline-block}.back-btn:hover{border-color:var(--glass-border-hover)}.trailer-btn{color:#fff;cursor:pointer;background:#7c3aed;border:none;border-radius:10px;margin-bottom:24px;padding:12px 24px;font-size:.9rem;font-weight:600;transition:background .2s;display:inline-block}.trailer-btn:hover{background:var(--btn-primary-hover)}.cast-heading{margin-bottom:1rem;padding-top:2rem}.cast-container{scrollbar-width:thin;scrollbar-color:var(--accent-primary) transparent;gap:16px;width:100%;padding-bottom:10px;display:flex;overflow-x:auto}.cast-container::-webkit-scrollbar{height:4px}.cast-container::-webkit-scrollbar-thumb{background:var(--accent-primary);border-radius:10px}.cast-card{text-align:center;flex-shrink:0;min-width:100px}.cast-card img{object-fit:cover;border:2px solid #ffffff1a;border-radius:50%;width:80px;height:80px;margin:0 auto 8px;display:block}.cast-card p{color:var(--text-secondary);font-size:.75rem}.trailer-section{margin-top:40px}.trailer-section iframe{aspect-ratio:16/9;border:none;border-radius:16px;width:100%;max-width:700px;box-shadow:0 0 40px #00000080}@media (width<=900px){.nav{padding:.75rem 1rem}.logo{font-size:1rem}.input-content{max-width:100%}.overlay{padding:0 1.25rem 2rem}.hero-content{max-width:100%}.Home-page-cards h1{padding-left:1rem}.movies-row-cards{padding:1rem 1rem 1.2rem}.card-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;padding:1rem}.movies-row-cards .card{width:140px}.detail-container{flex-direction:column;gap:1.5rem;padding:2rem 1.25rem}.poster-section img{width:200px;margin:0 auto}.info-section{max-width:100%}.backdrop{align-items:flex-start;padding-top:1rem}.backdrop:before{background:#000000e0}}@media (width<=480px){.nav{flex-wrap:nowrap}.input-content input{font-size:.8rem}.hero{height:60vh;min-height:360px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.movies-row-cards .card{width:130px}.poster-section img{width:150px}}
