/* Responsive Styles for Mobile, Tablet, TV */

/* Desktop: Hide visible-xs, Show hidden-xs */
.visible-xs {
    display: none !important;
}

/* Mobile First Approach */
@media (max-width: 767px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .col-md-3,
    .col-md-4,
    .col-md-6,
    .col-md-8,
    .col-md-12 {
        width: 100% !important;
        margin-bottom: 15px;
        padding-left: 0;
        padding-right: 0;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .general-box .head {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .general-box .head a {
        display: inline-block;
        white-space: nowrap;
    }

    /* Two-tab episode/favorites head: horizontal scroll on mobile */
    .general-box .tab-head-row {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .general-box .tab-head-row a {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        border-left: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    }

    .video-list-item {
        margin-bottom: 15px;
    }

    .video-list-item .content .d-flex {
        flex-direction: row;
        align-items: flex-start;
    }

    .video-list-item .content .img {
        width: 120px !important;
        height: 160px !important;
        margin-right: 12px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }

    .video-list-item .content .img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }

    .video-list-item .content .details {
        flex: 1 !important;
        min-width: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .video-list-item .title {
        font-size: 13px;
        padding: 8px 10px;
    }

    .video-list-item .content {
        padding: 10px;
    }

    .video-list-item .content .video-name {
        font-size: 13px;
        margin-bottom: 5px;
        line-height: 1.3;
    }

    .video-list-item .content .translate {
        font-size: 11px;
        margin-bottom: 3px;
        opacity: 0.8;
    }

    .video-list-item .content .tanslator {
        font-size: 11px;
        margin-bottom: 3px;
        line-height: 1.4;
    }

    .video-list-item .content .profile-link {
        font-size: 11px;
        margin-top: 5px;
        display: inline-block;
        word-break: break-all;
    }

    .video-list-item .content .time {
        font-size: 10px;
        margin-top: 5px;
        opacity: 0.7;
    }

    .video-list-item .content .interaction {
        margin-top: 8px;
        width: 100%;
        flex-shrink: 0;
        min-height: auto;
        max-height: none;
        overflow: visible;
    }

    .video-list-item .content .interaction a {
        font-size: 10px;
        padding: 4px 8px;
    }

    #player-area {
        min-height: 250px !important;
        padding-bottom: 56.25% !important;
    }

    #player-area iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }



    header .navbar {
        padding: 10px 0;
    }

    .mobile-menu {
        display: block !important;
        z-index: 9999;
    }

    .mobile-menu-toggle {
        cursor: pointer;
    }

    .mobile-sidebar {
        transform: translateX(-100%);
    }

    .mobile-sidebar-overlay {
        opacity: 0;
    }

    .hidden-xs {
        display: none !important;
    }

    .visible-xs {
        display: block !important;
    }

    .sidebar {
        margin-top: 20px;
    }

    /* Breadcrumb mobile fixes */
    .breadcrumb-container {
        padding: 10px 12px !important;
    }

    .breadcrumb-container nav {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .breadcrumb-item {
        font-size: 12px !important;
        padding: 4px 8px !important;
        max-width: 200px !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.3 !important;
    }

    .breadcrumb-current {
        font-size: 12px !important;
        padding: 4px 8px !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.3 !important;
    }

    .breadcrumb-current span {
        white-space: normal !important;
        word-break: break-word !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    /* Tags Mobile Styling */
    .tags .box {
        padding: 15px;
        margin-top: 15px;
    }

    .tags .box h4 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .tags .box p {
        font-size: 12px;
        margin-bottom: 15px;
        line-height: 1.4;
    }

    .tags .box a {
        font-size: 12px;
        padding: 8px 12px;
        margin-right: 5px;
        margin-bottom: 8px;
        display: inline-block;
    }

    /* Footer mobile */
    .footer-wrap {
        border-radius: 8px;
    }

    .footer-inner {
        min-height: 140px;
    }

    .footer-anime-img {
        width: 100%;
        background-position: right center;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.2) 5%, rgba(0,0,0,1) 35%);
        mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.2) 5%, rgba(0,0,0,1) 35%);
    }

    .footer-menu {
        min-width: 100%;
        padding: 15px 20px;
        background: linear-gradient(to right, rgba(35,37,44,0.85) 0%, rgba(35,37,44,0) 60%);
    }

    .footer-menu ul li a {
        font-size: 14px;
        text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        display: inline-block;
    }

    .footer-bar p {
        font-size: 11px;
    }
}

/* Tablet and Desktop (768px ve üstü) */
@media (min-width: 768px) {

    /* Container */
    .container {
        max-width: 1024px;
    }

    /* Grid düzeni - masaüstü gibi */
    .col-md-3 {
        width: 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        width: 33.333%;
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .col-md-6 {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-8 {
        width: 66.666%;
        flex: 0 0 66.666%;
        max-width: 66.666%;
    }

    /* Row düzeni */
    .row {
        display: flex;
        flex-wrap: wrap;
    }

    /* Header menüsünü göster */
    .hidden-xs {
        display: block !important;
    }

    header .navbar.hidden-xs {
        display: flex !important;
    }

    /* Bootstrap navbar collapse'ı devre dışı bırak - her zaman açık */
    .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    .navbar-toggler {
        display: none !important;
    }

    /* Navbar içeriği düzgün görünsün */
    .navbar-nav {
        flex-direction: row !important;
        display: flex !important;
    }

    .navbar-nav .nav-item {
        display: list-item !important;
    }

    /* Mobil menüyü gizle */
    .mobile-menu {
        display: none !important;
    }

    .visible-xs {
        display: none !important;
    }

    #player-area {
        min-height: 400px !important;
        padding-bottom: 56.25% !important;
    }

    #player-area iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .video-list-item .content .d-flex {
        flex-wrap: nowrap;
    }

    /* Sidebar sağda kalsın */
    .sidebar {
        margin-top: 0;
    }
}

/* TV / Large Screens */
@media (min-width: 1920px) {
    #player-area {
        min-height: 720px !important;
        padding-bottom: 56.25% !important;
    }

    #player-area iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .general-box .body {
        font-size: 1.1em;
    }

    .video-list-item {
        padding: 15px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {

    button,
    a,
    .clickable {
        min-height: 44px;
        min-width: 44px;
    }

    input,
    select,
    textarea {
        font-size: 16px;
        /* Prevents zoom on iOS */
    }
}

/* Landscape Mobile */
@media (max-width: 767px) and (orientation: landscape) {
    #player-area {
        min-height: 300px !important;
        padding-bottom: 56.25% !important;
    }

    #player-area iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .mobile-menu {
        padding: 5px 0;
    }
}

/* Print Styles */
@media print {

    .mobile-menu,
    header,
    .sidebar,
    .alts-list,
    button {
        display: none !important;
    }

    .content-body {
        margin: 0;
        padding: 0;
    }
}