/* =========================================
   MOBILE RESPONSIVENESS OVERRIDES
   ========================================= */

@media (max-width: 768px) {

    /* --- Navbar Improvements --- */
    .navbar {
        justify-content: space-between;
        padding: 10px 15px;
        position: relative;
    }

    /* Ensure menu toggle is visible */
    .menu-toggle {
        display: block !important;
        font-size: 1.5rem;
        cursor: pointer;
        z-index: 1001;
    }

    /* Horizontal Scrolling for Mobile Lists */
    /* Target common grid containers */
    .series-grid,
    .webtoon-grid,
    .content-grid,
    .list-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 15px !important;
        padding: 10px 5px 20px 5px !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        justify-content: flex-start !important;
    }

    /* Adjust cards for horizontal scroll */
    .series-card,
    .content-card,
    .list-item {
        flex: 0 0 140px !important;
        width: 140px !important;
        scroll-snap-align: start;
        margin-bottom: 0 !important;
    }

    /* Scrollbar styling */
    .series-grid::-webkit-scrollbar,
    .webtoon-grid::-webkit-scrollbar {
        height: 6px;
    }

    .series-grid::-webkit-scrollbar-thumb,
    .webtoon-grid::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
    }

    /* Fix Listem (My List) Overflow */
    .my-list-grid,
    #profile-watchlist {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        /* switch to 2 columns for better fit */
        gap: 15px !important;
        padding-bottom: 20px;
        overflow-x: hidden !important;
        /* Disable horizontal scroll if checking list vertically */
        /* If user wants horizontal scroll, specific logic needed, but 'Listem' usually implies grid */
    }

    #profile-watchlist .series-card {
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
    }

    .my-list-item {
        width: 100% !important;
    }

    /* Profile Section Header Fix */
    .profile-cover {
        height: 150px !important;
        /* Smaller cover on mobile */
    }

    .profile-info-section {
        margin-top: -30px !important;
        /* Less overlap */
        padding: 15px !important;
        /* Ensure it clears header if pushed up too much? 
           Actually, the issue is user avatar pushing UP out of view if parent negative margin is too high. 
           We reduce overlap. */
    }

    .profile-info-section img[alt*="avatar"] {
        width: 80px !important;
        height: 80px !important;
        border-width: 3px !important;
    }

    .profile-info-section h1 {
        font-size: 1.4rem !important;
        margin-top: 5px !important;
    }

    .profile-section h2 {
        font-size: 1.3rem !important;
    }

    .profile-section>div:first-child {
        /* The header container with text and select */
        flex-direction: row;
        flex-wrap: wrap;
        /* efficient wrapping */
        gap: 10px;
    }

    #watchlist-category-filter {
        width: auto !important;
        font-size: 0.9rem !important;
        padding: 5px 10px !important;
    }

    .my-list-item {
        width: 100% !important;
    }

    /* Menu Spacing Fix */
    .mobile-menu-items {
        padding-top: 10px !important;
        display: flex !important;
        /* Override inline display:none */
        flex-direction: column !important;
    }

    /* Mobile Menu Dropdown */
    .nav-links {
        display: none;
        position: fixed;
        top: 62px;
        left: 0;
        width: 100%;
        background-color: rgba(10, 10, 15, 0.98);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        flex-direction: column;
        padding: 15px 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        z-index: 1000;
        border-bottom: 1px solid rgba(139, 92, 246, 0.15);
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        animation: mobileMenuSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes mobileMenuSlide {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Force Nav Links to show up in Mobile Menu */
    .nav-links.active>a,
    .nav-links.show>a {
        display: block !important;
        /* Ensure they are not hidden */
        padding: 12px 0;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: var(--text-primary);
        font-size: 1rem;
    }

    /* Icons for main links (optional, added via CSS if HTML doesn't have them) */
    .nav-links.active>a::before,
    .nav-links.show>a::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        margin-right: 10px;
        width: 20px;
        display: inline-block;
        text-align: center;
        color: var(--accent-color);
    }

    /* Assign Icons via nth-child or href matching (Simplest hack without changing HTML structure widely) */
    .nav-links>a[href*="ana-sayfa"]::before {
        content: "\f015";
    }

    /* fa-house */
    .nav-links>a[href*="diziler"]::before {
        content: "\f008";
    }

    /* fa-film */
    .nav-links>a[href*="webtoons"]::before {
        content: "\f518";
    }

    /* fa-book-open */
    .nav-links>a[href*="Lobby"]::before {
        content: "\f519";
    }

    /* fa-tower-broadcast */
    .nav-links>a[href*="blog"]::before {
        content: "\f1ea";
    }

    /* fa-newspaper */
    .nav-links>a[href*="takvim"]::before {
        content: "\f073";
    }

    /* fa-calendar */

    /* Hide the normal desktop flex layout when in mobile dropdown mode */
    .nav-links.active,
    .nav-links.show {
        display: flex !important;
        align-items: stretch !important;
        /* Full width items */
    }

    /* Support both active and show classes */
    .nav-links.active,
    .nav-links.show {
        display: flex !important;
    }

    /* Hide desktop features in header to prevent overflow */
    .nav-features {
        display: none !important;
    }

    .nav-links a {
        padding: 15px 0;
        font-size: 1.1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        width: 100%;
        text-align: center;
    }

    /* --- Hero Slider --- */
    .hero-content {
        flex-direction: column-reverse !important;
        /* Image on top? Or Text on top? Usually Image top or Text top. */
        /* Let's keep text on top for readability or standard hero layout */
        /* Actually user said "modern-layout" often puts content left, image right. */
        /* On mobile: Content bottom, Image top usually works better for "Poster" look. */
    }

    .hero-content.modern-layout {
        flex-direction: column !important;
        padding: 20px 15px !important;
        text-align: center;
    }

    /* Fix Global Overflow */
    body,
    html {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    .hero-info {
        width: 100% !important;
        padding-right: 0 !important;
        margin-top: 20px;
    }

    .hero-title {
        font-size: 1.6rem !important;
        line-height: 1.3;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        max-width: 100%;
        padding: 0 5px;
    }

    .hero-description {
        font-size: 0.95rem !important;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        overflow: hidden;
        margin: 15px 0;
    }

    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-poster-wrapper {
        width: 100% !important;
        max-width: 280px;
        /* Don't be too huge */
        margin: 0 auto;
        height: auto !important;
    }

    .hero-poster-3d {
        transform: none !important;
        /* Disable 3D tilt on mobile for performance/layout */
    }

    /* --- Content Grids --- */
    .browse-grid,
    .webtoons-grid,
    .latest-grid,
    .content-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        /* 2 columns is standard for mobile content apps */
        gap: 10px !important;
        padding: 10px;
    }

    .content-card {
        min-height: 200px;
        /* Adjust height */
    }

    /* --- Detailed View --- */
    .detail-modal-content {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
    }

    .detail-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .detail-poster-wrapper {
        width: 160px !important;
        margin-right: 0 !important;
        margin-bottom: 20px;
    }

    .detail-info {
        width: 100% !important;
    }

    .detail-meta-tags,
    .detail-actions {
        justify-content: center;
    }

    /* --- Admin Panel --- */
    .admin-dashboard-modern {
        display: flex;
        flex-direction: column;
    }

    .stats-grid-modern {
        grid-template-columns: 1fr !important;
        /* Stack stats */
    }

    .admin-sidebar-navigation {
        flex-direction: row !important;
        overflow-x: auto;
        /* Scrollable tabs */
        white-space: nowrap;
        padding-bottom: 5px;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--border-color);
        width: 100%;
    }

    .sidebar-item {
        margin-bottom: 0 !important;
        margin-right: 10px;
        padding: 8px 15px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.05);
    }

    .sidebar-item.active {
        background: var(--accent-color);
    }

    /* Quick Actions */
    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Modals */
    .modal-content {
        width: 95% !important;
        margin: 10px;
    }

    /* --- Detailed View Tabs & Ratings Fixes --- */
    .detail-nav-tabs {
        justify-content: center !important;
        /* Center the tabs */
        flex-wrap: wrap !important;
        /* Allow wrapping if needed */
        gap: 10px !important;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 20px;
    }

    .nav-tab {
        padding: 10px 15px !important;
        /* Adjust padding for mobile */
        font-size: 0.95rem !important;
        flex: 0 0 auto !important;
        /* Prevent tabs from stretching too much */
    }

    .rating-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        /* Center the rating content */
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        overflow: hidden;
        /* Prevent overflow */
        padding: 20px 0;
    }

    .rating-stars {
        display: flex !important;
        justify-content: center !important;
        font-size: 1.5rem !important;
        /* Slightly smaller stars for mobile fit */
        margin: 10px 0 !important;
        flex-wrap: wrap;
    }
}