.App{text-align:center;min-height:100vh;background:linear-gradient(135deg,#040405,#0e0c12,#1e293b)}.app-container{max-width:1200px;margin:0 auto;padding:20px}.app-header{margin-bottom:40px;color:#fff;position:relative}.home-button{position:absolute;top:0;left:0;background:#0a0a0a1a;border:2px solid rgba(111,99,99,.2);color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:6px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.home-button:hover{background:#fff3;border-color:#fff6;transform:translateY(-2px)}.home-button:active{transform:translateY(0)}.header-content{padding-top:20px}.header-content h1{font-size:3rem;margin-bottom:10px;font-weight:700}.header-content p{font-size:1.2rem;color:#d1d5db;max-width:600px;margin:0 auto}@media (max-width: 768px){.home-button{position:static;margin-bottom:20px;align-self:flex-start}.app-header{display:flex;flex-direction:column;align-items:flex-start}.header-content{padding-top:0;width:100%;text-align:center}.header-content h1{font-size:2rem}.header-content p{font-size:1rem}}.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-content{background:#1e293b;border:1px solid #374151;border-radius:16px;max-width:900px;width:100%;max-height:90vh;overflow-y:auto;position:relative}.modal-header{position:relative}.backdrop-container{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:16px 16px 0 0}.backdrop-image{width:100%;height:100%;object-fit:cover}.backdrop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,#1e293b 0%,transparent 50%,transparent 100%)}.close-button{position:absolute;top:16px;right:16px;background:#00000080;color:#fff;border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;font-size:18px}.close-button:hover{background:#000000b3}.modal-body{padding:24px}.loading-container{text-align:center;padding:40px}.loading-text{color:#fff;font-size:18px}.movie-details{color:#fff}.details-layout{display:flex;gap:24px;margin-bottom:32px}.poster-section{flex:0 0 200px}.detail-poster{width:100%;border-radius:12px}.info-section{flex:1;display:flex;flex-direction:column;gap:16px}.title-section{margin-bottom:8px}.detail-title{font-size:2rem;font-weight:700;margin-bottom:8px}.tagline{color:#9ca3af;font-style:italic;font-size:16px}.meta-info{display:flex;flex-wrap:wrap;gap:16px;font-size:14px}.rating-info{display:flex;align-items:center;gap:4px;color:#fbbf24}.rating-score{font-weight:600}.vote-count{color:#9ca3af}.meta-item{display:flex;align-items:center;gap:4px;color:#d1d5db}.genres{display:flex;flex-wrap:wrap;gap:8px}.genre-badge{background:#374151;color:#d1d5db;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500}.overview{color:#d1d5db;line-height:1.6;font-size:16px}.financial-info{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:14px}.financial-item{display:flex;flex-direction:column;gap:4px}.financial-label{color:#9ca3af}.financial-value{color:#fff;font-weight:600}.trailers-section{border-top:1px solid #374151;padding-top:24px}.trailers-title{font-size:1.5rem;font-weight:600;margin-bottom:16px}.trailers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.trailer-card{background:#374151;border:1px solid #4b5563;border-radius:8px;padding:16px;display:flex;align-items:center;justify-content:space-between}.trailer-info{flex:1}.trailer-name{color:#fff;font-weight:500;margin-bottom:4px}.trailer-type{color:#9ca3af;font-size:14px}.official-badge{color:#10b981;font-weight:600}.watch-button{background:#dc2626;color:#fff;border:none;border-radius:6px;padding:8px 16px;display:flex;align-items:center;gap:4px;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s ease}.watch-button:hover{background:#b91c1c}.error-message{text-align:center;color:#ef4444;padding:40px;font-size:18px}@media (max-width: 768px){.modal-content{margin:10px;max-height:95vh}.details-layout{flex-direction:column}.poster-section{flex:none;align-self:center}.detail-title{font-size:1.5rem}.financial-info,.trailers-grid{grid-template-columns:1fr}}.movie-search{max-width:1200px;margin:0 auto}.search-form{margin-bottom:40px}.search-container{display:flex;gap:10px;max-width:600px;margin:0 auto}.search-input-container{position:relative;flex:1}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:16px}.search-input{width:100%;padding:12px 12px 12px 40px;border:2px solid rgba(255,255,255,.2);border-radius:8px;background:#ffffff1a;color:#fff;font-size:16px;outline:none;transition:all .3s ease}.search-input::placeholder{color:#9ca3af}.search-input:focus{border-color:#7c3aed;background:#ffffff26}.search-button{padding:12px 24px;background:#4b3b66;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.search-button:hover:not(:disabled){background:#282828;transform:translateY(-1px)}.search-button:disabled{opacity:.6;cursor:not-allowed}.section{margin-bottom:50px}.section-title{color:#fff;font-size:2rem;font-weight:700;margin-bottom:30px;text-align:left}.movies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-bottom:40px}.movie-card{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:12px;overflow:hidden;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.movie-card:hover{background:#fff3;transform:translateY(-5px);box-shadow:0 10px 25px #0000004d}.movie-poster-container{position:relative;aspect-ratio:2 / 3;overflow:hidden}.movie-poster{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.movie-card:hover .movie-poster{transform:scale(1.05)}.no-poster{width:100%;height:100%;background:#374151;display:flex;align-items:center;justify-content:center;color:#9ca3af}.movie-rating{position:absolute;top:8px;right:8px;background:#fbbf24;color:#000;padding:4px 8px;border-radius:20px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px}.movie-info{padding:16px;color:#fff}.movie-title{font-size:16px;font-weight:600;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.movie-year{display:flex;align-items:center;gap:4px;color:#9ca3af;font-size:14px;margin-bottom:8px}.movie-overview{font-size:14px;color:#d1d5db;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.load-more-container{text-align:center}.load-more-button{padding:12px 24px;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.2);border-radius:8px;font-size:16px;cursor:pointer;transition:all .3s ease}.load-more-button:hover:not(:disabled){background:#ffffff1a;border-color:#fff6}.load-more-button:disabled{opacity:.6;cursor:not-allowed}.loading-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-bottom:40px}.movie-card-skeleton{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:12px;overflow:hidden;animation:pulse 2s infinite}.skeleton-poster{aspect-ratio:2 / 3;background:#ffffff1a}.skeleton-content{padding:16px}.skeleton-title{height:20px;background:#ffffff1a;border-radius:4px;margin-bottom:8px}.skeleton-year{height:16px;background:#ffffff1a;border-radius:4px;margin-bottom:8px;width:60%}.skeleton-overview{height:12px;background:#ffffff1a;border-radius:4px;margin-bottom:4px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (max-width: 768px){.search-container{flex-direction:column}.movies-grid,.loading-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px}.section-title{font-size:1.5rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0f172a;color:#fff}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1e293b}::-webkit-scrollbar-thumb{background:#475569;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#64748b}
