/**
 * Layout Mobile CSS
 * Genel layout yapıları için mobil uyumluluk
 */

/* ========================================
   GLOBAL LAYOUT FIXES
   ======================================== */

@media (max-width: 768px) {
    /* Main Content Area */
    .site-main {
        padding: 20px 0 !important;
    }
    
    /* Content Wrapper */
    .content-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    /* Main Content */
    .main-content {
        width: 100% !important;
        order: 1 !important;
    }
    
    /* Sidebar */
    .sidebar {
        width: 100% !important;
        order: 2 !important;
    }
    
    /* Grid Layouts */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Flex Layouts */
    .flex-row {
        flex-direction: column !important;
        gap: 15px !important;
    }
}

/* ========================================
   ARCHIVE PAGES - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .archive-header {
        padding: 20px 0 !important;
        margin-bottom: 20px !important;
    }
    
    .archive-title {
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }
    
    .archive-description {
        font-size: 14px !important;
    }
    
    .archive-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .post-card {
        display: flex !important;
        flex-direction: row !important;
        gap: 15px !important;
        padding: 15px !important;
    }
    
    .post-card-image {
        width: 120px !important;
        height: 100px !important;
        flex-shrink: 0 !important;
    }
    
    .post-card-content {
        flex: 1 !important;
    }
    
    .post-card-title {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }
    
    .post-card-excerpt {
        display: none !important;
    }
    
    .post-card-meta {
        font-size: 12px !important;
    }
}

@media (max-width: 600px) {
    .archive-title {
        font-size: 20px !important;
    }
    
    .post-card {
        padding: 12px !important;
    }
    
    .post-card-image {
        width: 100px !important;
        height: 80px !important;
    }
    
    .post-card-title {
        font-size: 14px !important;
    }
    
    .post-card-meta {
        font-size: 11px !important;
    }
}

/* ========================================
   SINGLE POST - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .single-post-header {
        padding: 20px 0 !important;
    }
    
    .single-post-title {
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    
    .single-post-meta {
        flex-direction: column !important;
        gap: 10px !important;
        font-size: 13px !important;
    }
    
    .single-post-featured-image {
        margin: 20px 0 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    .single-post-content {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }
    
    .single-post-content h2 {
        font-size: 22px !important;
        margin-top: 25px !important;
        margin-bottom: 15px !important;
    }
    
    .single-post-content h3 {
        font-size: 20px !important;
        margin-top: 20px !important;
        margin-bottom: 12px !important;
    }
    
    .single-post-content p {
        margin-bottom: 15px !important;
    }
    
    .single-post-content img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
        margin: 15px 0 !important;
    }
    
    .single-post-tags {
        margin: 25px 0 !important;
        padding: 15px 0 !important;
    }
    
    .tag-link {
        font-size: 12px !important;
        padding: 6px 12px !important;
        margin: 4px !important;
    }
    
    .social-share {
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin: 20px 0 !important;
    }
    
    .share-btn {
        font-size: 13px !important;
        padding: 8px 15px !important;
    }
}

@media (max-width: 600px) {
    .single-post-title {
        font-size: 22px !important;
    }
    
    .single-post-content {
        font-size: 15px !important;
    }
    
    .single-post-content h2 {
        font-size: 20px !important;
    }
    
    .single-post-content h3 {
        font-size: 18px !important;
    }
}

/* ========================================
   COMMENTS - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .comments-area {
        margin-top: 30px !important;
        padding: 20px 0 !important;
    }
    
    .comments-title {
        font-size: 22px !important;
        margin-bottom: 20px !important;
    }
    
    .comment-list {
        padding: 0 !important;
    }
    
    .comment {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    .comment-author-avatar {
        width: 50px !important;
        height: 50px !important;
    }
    
    .comment-avatar {
        width: 50px !important;
        height: 50px !important;
    }
    
    .comment-author {
        font-size: 15px !important;
    }
    
    .comment-metadata {
        font-size: 12px !important;
    }
    
    .comment-text {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    .comment-reply-link {
        font-size: 13px !important;
        padding: 6px 12px !important;
    }
    
    .comment-form {
        padding: 20px 15px !important;
    }
    
    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form input[type="url"],
    .comment-form textarea {
        font-size: 15px !important;
        padding: 12px !important;
    }
    
    .comment-form textarea {
        min-height: 120px !important;
    }
    
    .submit-btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 600px) {
    .comments-title {
        font-size: 20px !important;
    }
    
    .comment {
        padding: 12px !important;
    }
    
    .comment-author-avatar {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ========================================
   SEARCH PAGE - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .search-header {
        padding: 20px 0 !important;
    }
    
    .search-title {
        font-size: 22px !important;
    }
    
    .search-query {
        font-size: 18px !important;
    }
    
    .search-results-count {
        font-size: 14px !important;
    }
    
    .search-results {
        margin-top: 20px !important;
    }
    
    .search-result-item {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    .search-result-title {
        font-size: 18px !important;
    }
    
    .search-result-excerpt {
        font-size: 14px !important;
    }
}

/* ========================================
   404 PAGE - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .error-404 {
        padding: 40px 0 !important;
        text-align: center !important;
    }
    
    .error-404-title {
        font-size: 80px !important;
    }
    
    .error-404-subtitle {
        font-size: 24px !important;
    }
    
    .error-404-text {
        font-size: 15px !important;
    }
    
    .error-404-search {
        max-width: 100% !important;
        margin: 30px 0 !important;
    }
}

@media (max-width: 600px) {
    .error-404-title {
        font-size: 60px !important;
    }
    
    .error-404-subtitle {
        font-size: 20px !important;
    }
}

/* ========================================
   BREADCRUMB - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .breadcrumb {
        font-size: 12px !important;
        padding: 10px 0 !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .breadcrumb::-webkit-scrollbar {
        height: 4px !important;
    }
}

/* ========================================
   WIDGETS - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .widget {
        margin-bottom: 25px !important;
        padding: 20px 15px !important;
        border-radius: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .widget-title {
        font-size: 18px !important;
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
    }
    
    .widget ul {
        padding: 0 !important;
    }
    
    .widget li {
        padding: 8px 0 !important;
        font-size: 14px !important;
    }
    
    .widget-recent-posts .recent-post {
        display: flex !important;
        gap: 12px !important;
        padding: 10px 0 !important;
    }
    
    .widget-recent-posts .recent-post-thumb {
        width: 70px !important;
        height: 70px !important;
        flex-shrink: 0 !important;
    }
    
    .widget-recent-posts .recent-post-title {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    .widget-recent-posts .recent-post-date {
        font-size: 11px !important;
    }
    
    /* Futbol Enleri Widget - Mobilde tam genişlik */
    .futbol-enleri-module {
        width: 100% !important;
        max-width: 100% !important;
        margin: 60px 0 20px 0 !important; /* ÜST BOŞLUK: 60px */
        padding: 0 !important;
    }
    
    .futbol-enleri-module .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    /* Puan Durumu Widget Cards - Mobilde tam genişlik */
    .home-puan-durumu-module {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
        padding: 15px 0 !important;
    }
    
    /* Widget içindeki modüller için genel düzeltme */
    .widget .futbol-enleri-module,
    .widget .home-puan-durumu-module,
    aside .futbol-enleri-module,
    aside .home-puan-durumu-module,
    .sidebar .futbol-enleri-module,
    .sidebar .home-puan-durumu-module {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding: 15px 15px !important;
    }
    
    .widget .futbol-enleri-module .container,
    .widget .home-puan-durumu-module .container,
    aside .futbol-enleri-module .container,
    aside .home-puan-durumu-module .container,
    .sidebar .futbol-enleri-module .container,
    .sidebar .home-puan-durumu-module .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
}

/* ========================================
   TABLES - MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Genel tablo kuralları - özel tablolar hariç */
    table:not(.evy-table):not(.evd-table):not(.evk-table):not(.puan-table):not(.pd2-table):not(.fikstur-table):not(.evos-table):not(.gk-table):not(.ak-table):not(.kgk-table):not(.edf-table):not(.evfo-table):not(.evdo-table):not(.ev-table):not(.cs-table) {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    table:not(.evy-table):not(.evd-table):not(.evk-table):not(.puan-table):not(.pd2-table):not(.fikstur-table):not(.evos-table):not(.gk-table):not(.ak-table):not(.kgk-table):not(.edf-table):not(.evfo-table):not(.evdo-table):not(.ev-table):not(.cs-table) thead {
        display: none !important;
    }
    
    table:not(.evy-table):not(.evd-table):not(.evk-table):not(.puan-table):not(.pd2-table):not(.fikstur-table):not(.evos-table):not(.gk-table):not(.ak-table):not(.kgk-table):not(.edf-table):not(.evfo-table):not(.evdo-table):not(.ev-table):not(.cs-table) tbody,
    table:not(.evy-table):not(.evd-table):not(.evk-table):not(.puan-table):not(.pd2-table):not(.fikstur-table):not(.evos-table):not(.gk-table):not(.ak-table):not(.kgk-table):not(.edf-table):not(.evfo-table):not(.evdo-table):not(.ev-table):not(.cs-table) tr,
    table:not(.evy-table):not(.evd-table):not(.evk-table):not(.puan-table):not(.pd2-table):not(.fikstur-table):not(.evos-table):not(.gk-table):not(.ak-table):not(.kgk-table):not(.edf-table):not(.evfo-table):not(.evdo-table):not(.ev-table):not(.cs-table) td {
        display: block !important;
        width: 100% !important;
    }
    
    table:not(.evy-table):not(.evd-table):not(.evk-table):not(.puan-table):not(.pd2-table):not(.fikstur-table):not(.evos-table):not(.gk-table):not(.ak-table):not(.kgk-table):not(.edf-table):not(.evfo-table):not(.evdo-table):not(.ev-table):not(.cs-table) tr {
        margin-bottom: 15px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        padding: 10px !important;
    }
    
    table:not(.evy-table):not(.evd-table):not(.evk-table):not(.puan-table):not(.pd2-table):not(.fikstur-table):not(.evos-table):not(.gk-table):not(.ak-table):not(.kgk-table):not(.edf-table):not(.evfo-table):not(.evdo-table):not(.ev-table):not(.cs-table) td {
        text-align: left !important;
        padding: 8px !important;
        position: relative !important;
        padding-left: 50% !important;
    }
    
    table:not(.evy-table):not(.evd-table):not(.evk-table):not(.puan-table):not(.pd2-table):not(.fikstur-table):not(.evos-table):not(.gk-table):not(.ak-table):not(.kgk-table):not(.edf-table):not(.evfo-table):not(.evdo-table):not(.ev-table):not(.cs-table) td:before {
        content: attr(data-label) !important;
        position: absolute !important;
        left: 10px !important;
        font-weight: bold !important;
    }
}

/* ========================================
   FORMS - MOBILE
   ======================================== */

@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px !important;
        width: 100% !important;
    }
    
    button,
    input[type="submit"],
    input[type="button"] {
        font-size: 15px !important;
        padding: 12px 20px !important;
        width: 100% !important;
    }
    
    .form-row {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .form-group {
        margin-bottom: 15px !important;
    }
    
    label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
}

/* ========================================
   IMAGES & MEDIA - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .wp-caption {
        max-width: 100% !important;
    }
    
    .wp-caption-text {
        font-size: 12px !important;
        padding: 8px !important;
    }
    
    .alignleft,
    .alignright {
        float: none !important;
        display: block !important;
        margin: 15px auto !important;
    }
    
    .gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .gallery-item {
        margin: 0 !important;
    }
}

@media (max-width: 600px) {
    .gallery {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   UTILITY CLASSES - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .text-center-mobile {
        text-align: center !important;
    }
    
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
    
    .full-width-mobile {
        width: 100% !important;
    }
    
    .no-padding-mobile {
        padding: 0 !important;
    }
    
    .no-margin-mobile {
        margin: 0 !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
    
    /* Optimize images */
    img {
        image-rendering: -webkit-optimize-contrast !important;
    }
}

/* ========================================
   ACCESSIBILITY - MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Larger tap targets */
    a,
    button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Better focus states */
    a:focus,
    button:focus,
    input:focus,
    textarea:focus {
        outline: 2px solid #e74c3c !important;
        outline-offset: 2px !important;
    }
}