/* Responsive Styles for Mobile */

@media (max-width: 768px) {
    /* Header moves to top on mobile - transparent with gradient, no blur */
    #sidebar-header {
        width: 100%;
        height: 70px;
        flex-direction: row;
        padding: 0 20px;
        border-right: none;
        border-bottom: none;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
        backdrop-filter: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
    }

    /* Menu icon on the left - smaller */
    #sidebar-header .menu-icon {
        margin-top: 0;
        margin-left: 0;
        margin-right: auto;
        order: -1;
        width: 28px;
        height: 28px;
    }
    
    #sidebar-header .menu-icon svg {
        width: 24px;
        height: 24px;
    }
    
    #sidebar-header .menu-icon svg line {
        stroke-width: 2.5;
    }

    /* Logo in the center */
    #sidebar-header .logo {
        margin-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    #sidebar-header .logo img {
        width: 38px;
        height: 38px;
    }

    /* Nav icons (search, login) on the right - smaller */
    #sidebar-header .nav-icons {
        flex-direction: row;
        gap: 14px;
        margin: 0;
        margin-left: auto;
    }

    #sidebar-header .nav-icon {
        width: 28px;
        height: 28px;
    }
    
    #sidebar-header .nav-icon svg {
        width: 18px;
        height: 18px;
    }
    
    #sidebar-header .nav-icon svg circle,
    #sidebar-header .nav-icon svg line,
    #sidebar-header .nav-icon svg path {
        stroke-width: 2.5;
    }

    /* Main content adjusts - no margin since header is transparent and overlays */
    #main-content {
        margin-left: 0;
        margin-top: 0;
        padding-top: 0;
    }

    /* Hero Section - fixed height for mobile */
    .hero-billboard {
        height: 500px;
        min-height: 500px;
        max-height: 500px;
        padding-top: 0;
        padding-bottom: 40px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    /* Poster background for mobile - show full posters without crop */
    .poster-background {
        gap: 10px;
        justify-content: center;
    }

    .poster-column {
        gap: 10px;
    }

    .poster-column img {
        width: 120px;
        height: auto;
        object-fit: contain;
        opacity: 0.5;
    }

    .hero-content-center {
        padding: 0 20px;
        max-width: 100%;
        width: 100%;
    }

    .hero-main-title {
        font-size: 2rem;
        font-weight: 900;
        margin-bottom: 10px;
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 0.9rem;
        margin-bottom: 20px;
        line-height: 1.4;
    }

    .hero-signup-form {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .hero-email-input {
        width: 100%;
        padding: 10px 16px 10px 24px;
        font-size: 0.9rem;
    }

    .hero-join-btn {
        width: 100%;
        padding: 10px 20px;
        font-size: 0.9rem;
        justify-content: center;
    }

    .hero-cancel-text {
        font-size: 0.8rem;
    }

    /* Carousel Section */
    .carousel-section {
        padding: 30px 20px;
    }

    .carousel-section .section-title {
        font-size: 1.4rem;
    }

    .carousel-track {
        gap: 12px;
    }

    .content-card {
        min-width: 135px;
        max-width: 135px;
        height: auto;
        border-radius: 4px;
        overflow: hidden;
    }
    
    /* Mobile: Show full poster without cropping */
    .content-card img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        aspect-ratio: 2/3;
        display: block;
    }
    
    /* Mobile: Reduce spacing between section title and content */
    .carousel-section .section-title {
        margin-bottom: 12px;
    }
    
    /* Mobile: Disable hover effects */
    .content-card:hover img {
        transform: none !important;
    }
    
    .content-card:hover .card-overlay {
        opacity: 0 !important;
    }
    
    /* Mobile: Smaller badge text */
    .content-card .card-badge {
        font-size: 0.55rem;
        padding: 3px 6px;
        white-space: nowrap;
        gap: 4px;
    }
    
    .content-card .card-badge img {
        width: 10px;
        height: 10px;
    }

    .carousel-prev,
    .carousel-next {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    /* Modals - positioned at top on mobile */
    .modal {
        padding: 25px 20px;
        width: 95%;
        max-height: 85vh;
        top: 60px !important;
        transform: translate(-50%, 0) !important;
    }
    
    .modal.active {
        animation: slideDownMobile 0.35s var(--transition-smooth) forwards !important;
    }
    
    @keyframes slideDownMobile {
        to {
            transform: translate(-50%, 0);
            opacity: 1;
        }
    }

    .modal-title {
        font-size: 1.6rem;
    }
    
    .form-group input,
    .form-group select {
        padding: 10px 14px;
        font-size: 0.85rem;
    }
    
    .btn-primary,
    .btn-secondary {
        padding: 10px 24px;
        font-size: 0.85rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
    
    /* Signup modal: Keep name fields side by side on mobile */
    #signup-modal .form-row {
        grid-template-columns: 1fr 1fr;
    }

    /* Side Menu - Full width on mobile */
    #side-menu {
        width: 100%;
        padding: 25px 25px 30px 25px;
        max-height: 100vh;
        max-height: 100dvh;
        height: 100vh;
        height: 100dvh;
    }
    
    .menu-header {
        margin-bottom: 25px;
        margin-top: 0;
        padding-top: 5px;
    }
    
    .menu-brand {
        font-size: 1.6rem;
        margin-bottom: 0;
    }
    
    .menu-tagline {
        font-size: 0.85rem;
    }
    
    .menu-content {
        margin-bottom: 15px;
        gap: 0;
    }
    
    .menu-link {
        font-size: 1.2rem;
        padding: 8px 18px;
    }
    
    .menu-link:hover {
        padding-left: 24px;
    }
    
    .menu-link.active {
        padding-left: 24px;
    }
    
    .menu-divider {
        margin: 15px 18px 12px 18px;
    }
    
    .menu-secondary {
        margin-bottom: 20px;
        gap: 2px;
    }
    
    .menu-secondary-link {
        font-size: 0.9rem;
        padding: 6px 18px;
    }
    
    .menu-secondary-link:hover {
        padding-left: 22px;
    }
    
    .menu-copyright {
        font-size: 0.65rem;
        padding: 0 18px;
        line-height: 1.4;
    }

    .top-content-item img {
        height: 180px;
    }

    /* Search Modal - positioned at top on mobile */
    #search-modal {
        width: 95%;
        padding: 25px 20px;
        top: 80px !important;
        transform: translate(-50%, 0) !important;
    }
    
    #search-modal.active {
        animation: slideDownMobile 0.35s var(--transition-smooth) forwards !important;
    }
    
    #search-modal .modal-title {
        font-size: 1.6rem;
    }
    
    #search-modal .modal-subtitle {
        font-size: 0.8rem;
    }
    
    #search-input {
        padding: 10px 40px 10px 14px !important;
        font-size: 0.85rem !important;
        height: auto;
        line-height: 1.5;
    }
    
    .search-icon {
        right: 12px;
        width: 16px;
        height: 16px;
    }
    
    #search-results {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Modal close button - outside modal, top right on mobile */
    .modal-close {
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
    
    .menu-close {
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }
    
    .modal-close svg {
        width: 18px;
        height: 18px;
    }
    
    .menu-close svg {
        width: 26px;
        height: 26px;
    }

    #search-input {
        font-size: 1rem;
        padding: 18px 60px 18px 24px;
    }

    #search-results {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Buttons */
    .btn-primary,
    .btn-secondary {
        padding: 12px 24px;
        font-size: 0.95rem;
    }

    /* Content Detail Page - Mobile */
    .detail-hero {
        height: 420px;
        min-height: 420px;
        max-height: 420px;
    }

    .detail-hero-content {
        bottom: 25px;
        left: 20px;
        right: 20px;
        max-width: 100%;
        display: flex;
        flex-direction: column;
    }

    .detail-hero-title {
        font-size: 2rem;
        line-height: 1.1;
    }

    .content-badge {
        font-size: 0.6rem;
        padding: 4px 8px;
        margin-top: 8px;
        margin-bottom: 8px;
        gap: 4px;
        max-width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .content-badge .badge-logo {
        width: 10px;
        height: 10px;
        flex-shrink: 0;
    }

    .detail-hero-meta {
        gap: 12px;
        margin: 12px 0 16px 0;
        font-size: 0.85rem;
    }

    .detail-hero-meta .maturity .maturity-icon {
        height: 22px;
    }

    .detail-hero-synopsis {
        font-size: 0.9rem;
        margin-bottom: 20px;
        line-height: 1.5;
    }

    /* Mobile: Content Detail Page Action Buttons */
    .detail-hero-actions {
        gap: 6px !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }

    .detail-btn-primary {
        height: 40px !important;
        width: 160px !important;
        padding: 0 12px !important;
        font-size: 0.8rem !important;
        border-left-width: 4px !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }

    .detail-btn-primary .btn-logo {
        width: 12px !important;
        height: 12px !important;
    }

    /* Show full text "Hemen İzle" on mobile */
    .detail-btn-primary .btn-text-full {
        display: inline !important;
    }

    .detail-btn-primary .btn-text-short {
        display: none !important;
    }

    /* Mobile: Icon-only secondary buttons */
    .detail-btn-secondary {
        height: 40px !important;
        width: 60px !important;
        padding: 0 !important;
        font-size: 0.85rem !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    /* Hide text on secondary buttons in mobile */
    .detail-btn-secondary .btn-text {
        display: none !important;
    }

    .detail-btn-secondary svg {
        margin: 0 !important;
        width: 20px !important;
        height: 20px !important;
    }
}

    /* Watch Page - Mobile: No changes needed, already full screen */

    .video-info {
        padding: 20px;
    }

    .video-header {
        flex-direction: column;
        gap: 15px;
    }

    .video-title {
        font-size: 1.5rem;
    }

    .video-meta {
        font-size: 0.85rem;
        gap: 8px;
    }

    .next-episode-btn {
        width: 100%;
        justify-content: center;
        height: 40px;
        font-size: 0.9rem;
    }

    .video-description {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .sidebar-header {
        padding: 20px;
    }

    .sidebar-title {
        font-size: 1.2rem;
    }

    .episodes-list {
        padding: 15px 20px;
        max-height: 500px;
    }

    .episode-item {
        gap: 12px;
        padding: 10px;
    }

    .episode-thumbnail {
        width: 100px;
    }

    .episode-number-title {
        font-size: 0.9rem;
    }

    .episode-name {
        font-size: 0.8rem;
    }

    .back-button-watch {
        width: 40px;
        height: 40px;
        top: 15px;
        left: 15px;
    }

    .back-button-watch svg {
        width: 20px;
        height: 20px;
    }


@media (max-width: 480px) {

    /* Disable hover on content cards - direct click to detail page */
    .content-card:hover .card-overlay {
        opacity: 0;
    }

    .content-card {
        cursor: pointer;
    }