@media (max-width: 1024px) {
    .hero-content { max-width: 70%; }
    .hero-title { font-size: 3rem; }
    .row-title { font-size: 1.6rem; }
    .results-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 768px) {
    nav {
        padding: 10px 4%;
        flex-wrap: wrap;
        gap: 8px;
    }
    .logo img {
    height: 50px;
    max-width: 135px;
    }
    .hamburger { display: flex; }
    .nav-right {
        width: 100%;
        order: 3;
    }
    .search-box {
        width: 100%;
        border-radius: 8px;
        padding: 7px 10px 7px 14px;
    }
    .search-box input { font-size: 0.9rem; }

    .nav-links {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -280px;
        width: 270px;
        height: 100vh;
        background: #141414;
        z-index: 999;
        padding: 70px 0 20px;
        gap: 0;
        transition: left 0.3s ease;
        overflow-y: auto;
        border-right: 1px solid #2a2a2a;
    }
    .nav-links.mobile-open { left: 0; }
    .nav-links li { width: 100%; }
    .nav-links li a {
        display: block;
        padding: 14px 24px;
        font-size: 1rem;
        border-bottom: 1px solid #222;
    }

    .nav-genre-item { position: static; }
    .genre-nav-trigger { justify-content: space-between; width: 100%; }
    .genre-dropdown {
        position: static;
        transform: none;
        border: none;
        border-radius: 0;
        min-width: unset;
        max-height: 0;
        overflow: hidden;
        box-shadow: none;
        background: #1a1a1a;
        padding: 0;
        display: block;
        transition: max-height 0.3s ease;
    }
    .genre-dropdown::before { display: none; }
    .nav-genre-item.open .genre-dropdown { max-height: 500px; overflow-y: auto; }
    .genre-dropdown-inner { grid-template-columns: 1fr 1fr; }
    .genre-dropdown a { padding: 10px 16px; font-size: 0.88rem; border-bottom: 1px solid #222; }

    .hero {
        height: auto;
        min-height: unset;
        background: var(--background-color);
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 120px 5% 24px;
        gap: 0;
    }

    .hero::after { display: none; }

    .hero-content {
        max-width: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2;
        position: relative;
    }

    #hero-mobile-poster {
        width: 72%;
        max-width: 280px;
        aspect-ratio: 2/3;
        object-fit: cover;
        border-radius: 12px;
        display: block;
        box-shadow: 0 16px 48px rgba(0,0,0,0.7);
        margin-bottom: 20px;
    }

    .hero-title {
        font-size: clamp(1.6rem, 4vw, 2.2rem);
        font-weight: 900;
        text-align: center;
        margin-bottom: 6px;
        line-height: 1.2;
        text-shadow: none;
        display: none;
    }
    
    .hero-description {
        font-size: 0.78rem;
        line-height: 1.5;
        margin-bottom: 18px;
        color: rgba(255,255,255,0.65);
        text-shadow: none;
        text-align: center;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-width: 340px;
        display: none;
    }

    .hero-btns {
        gap: 10px;
        width: 100%;
        max-width: 320px;
    }

    .hero-btns .btn {
        flex: 1;
        justify-content: center;
        padding: 11px 10px;
        font-size: 0.88rem;
        border-radius: 8px;
    }

    #hero-info-btn { gap: 5px; }

    #hero-trailer-wrap iframe,
    #hero-yt-player,
    #hero-yt-player iframe { display: none; }
    #hero-trailer-controls { display: none; }

    .detail-banner { height: 300px; }
    .detail-info { grid-template-columns: 1fr; padding: 25px; gap: 20px; }
    .detail-main h2 { font-size: 2rem; }
    .detail-sidebar { display: block; border-top: 1px solid #404040; padding-top: 20px; }

    .episode-item { grid-template-columns: 30px 120px 1fr; gap: 15px; padding: 15px 20px; }
    .episode-index { font-size: 1.2rem; }
    .season-tabs { padding: 0 20px; gap: 15px; overflow-x: auto; }

    .top10-wrapper {
        width: 170px;
        overflow: visible;
    }
    .top10-number {
        font-size: 4.5rem;
        -webkit-text-stroke: 1.5px #484848;
        color: #141414;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        line-height: 1;
        z-index: 0;
    }
    .top10-wrapper .poster { margin-left: 35px; width: 85px; }
    .top10-wrapper .home-card { width: 85px !important; margin-left: 35px !important; }
    .poster-wrapper:not(.top10-wrapper) { width: 150px; }
    .row-title { font-size: 1.5rem; }

    .controls-container {
        min-height: 110px;
        padding-bottom: env(safe-area-inset-bottom, 8px);
    }

    .progress-controls { padding: 0 14px 10px; }

    .progress-bar { height: 3px; margin: 0 8px; }
    .progress-bar:hover { height: 3px; }

    .time-remaining { font-size: 11px; min-width: 60px; }

    .controls {
        padding: 0 6px 6px;
        gap: 0;
        justify-content: space-around;
    }

    .controls .title { display: none; }

    .controls button {
        width: 48px;
        height: 48px;
        padding: 10px;
        border-radius: 50%;
    }

    .controls .play-pause {
        width: 56px;
        height: 56px;
        background: rgba(255,255,255,0.15);
        border-radius: 50%;
        padding: 12px;
    }

    #detail-view { padding: 0; }
    .detail-container { width: 100%; min-height: 100vh; border-radius: 0; }

    .results-page { padding: 120px 4% 40px; }
    .results-heading { font-size: 1.3rem; }
    .results-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px 8px; }
    .results-filter-bar { gap: 7px; padding-bottom: 14px; margin-bottom: 16px; flex-wrap: nowrap; }
    .results-sort { flex-shrink: 0; margin-left: auto; }

    .result-card-overlay { opacity: 0 !important; }
    .home-card-overlay   { opacity: 0 !important; }

    .home-card:hover {
        transform: none !important;
        box-shadow: none !important;
        z-index: auto !important;
        transition: none !important;
    }
    .home-card:hover .home-card-overlay { opacity: 0 !important; }
    .genre-card-row:hover { transform: none !important; }
    .row-arrow { display: none !important; }
    .btn-play:hover { background-color: white !important; }
    .btn-info:hover { background-color: rgba(109,109,110,0.7) !important; }
    .rc-btn-play:hover { background: #fff !important; }
    .rc-btn-info:hover { background: rgba(109,109,110,0.65) !important; }
    .poster-wrapper:has(.home-card):hover { z-index: auto !important; }
    .row-title { font-size: 1.1rem; }
}

@media (max-width: 480px) {
    .results-grid { grid-template-columns: repeat(3, 1fr); gap: 10px 6px; }
}

@media (orientation: landscape) {
    .controls-container {
        position: absolute;
        bottom: 0;
        width: 100%;
        min-height: 38vh;
    }
    .controls button svg { width: 60%; height: 100%; }
}

@media (max-width: 768px) and (orientation: landscape) {
    .controls button { width: clamp(28px, 7vw, 44px); height: clamp(28px, 7vw, 44px); }
}