@media (max-width: 1024px) {
    .nav-container { padding: 0 1.5rem; }
    .content-card { width: 100%; }
    .content-card img { height: 100%; }
    .hero-banner { height: 60vh; padding: 2rem; }
    .hero-content h1 { font-size: 2.5rem; }
    .section-title { font-size: 1.5rem; }
    .slider-btn { width: 40px; height: 40px; }
}

@media (max-width: 768px) {
    .nav-container { flex-direction: column; gap: 1rem; padding: 0 1rem; }
    .nav-logo h1 { font-size: 1.5rem; }
    .nav-search { width: 100%; max-width: 100%; }
    .hero-banner { height: 50vh; padding: 1.5rem; margin-top: 140px; }
    .hero-content h1 { font-size: 2rem; }
    .hero-content p { font-size: 1rem; display:none;}
    .hero-buttons { flex-direction: column; }
    .btn { width: 100%; justify-content: center; }
    .content-section { padding: 1rem; }
    .content-card { width: 140px; }
    .content-card img { height: 220px; }
    .card-title { font-size: 0.9rem; }
    .slider-btn { width: 35px; height: 35px; opacity: 0.8; }
    .slider-container:hover .slider-btn { opacity: 0.8; }
    .modal-content { width: 95%; }
    .detail-backdrop { height: 250px; }
    .detail-info { padding: 1rem; }
    .detail-title { font-size: 1.5rem; }
    .detail-meta { flex-direction: column; gap: 0.5rem; }
    .player-container { width: 100%; }
    .player-modal.active { padding: 1rem; }
    .player-controls { padding: 1rem; }
    .tv-controls { flex-direction: column; }
    .server-selector { flex-direction: column; align-items: stretch; }
    .download-btn { width: 100%; }
    .footer-links { flex-direction: column; gap: 1rem; }
    .section-title { font-size: 1.3rem; }
}

@media (max-width: 480px) {
    .nav-logo h1 { font-size: 1.2rem; }
    .nav-search input { font-size: 0.85rem; padding: 0.6rem 0.8rem; }
    .hero-banner { height: 40vh; margin-top: 150px; }
    .hero-content h1 { font-size: 1.5rem; }
    .hero-content p { font-size: 0.9rem;  display:none;}
    .content-card { width: 120px; }
    .content-card img { height: 180px; }
    .section-title { font-size: 1.1rem; }
    .slider-btn { width: 30px; height: 30px; }
    .detail-title { font-size: 1.2rem; }
    .modal-close, .player-close { width: 35px; height: 35px; font-size: 1.5rem; }
    .footer { padding: 2rem 1rem; }
}

@media (max-width: 768px) and (orientation: landscape) {
    .hero-banner { height: 100vh; }
    .navbar { padding: 0.5rem 0; }
}

@media (min-width: 1920px) {
    .nav-container, .content-section { max-width: 1800px; }
    .content-card { width: 220px; }
    .hero-content h1 { font-size: 3.5rem; }
    .section-title { font-size: 2rem; }
}