/**
 * VIVA - Kapsamlı Mobil Düzeltmeler
 * ===================================
 * Tüm mobil uyumluluk sorunlarını çözen CSS
 * 
 * Hedef: kutahyacini.com.tr ve benzeri siteler
 * Tarih: 13 Ocak 2025
 * Versiyon: 1.0
 */

/* ===================================================================
   GENEL MOBİL AYARLAR
   =================================================================== */

/* Viewport ve temel ayarlar */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    -webkit-touch-callout: none;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* ===================================================================
   HEADER MOBİL DÜZELTMELERİ
   =================================================================== */

@media (max-width: 767px) {
    
    /* Üst bar - iletişim bilgileri */
    .header-ust-bar,
    .header-top-bar,
    .top-header {
        display: none !important; /* Mobilde gizle */
    }
    
    /* Logo düzeltmeleri */
    .header-logo,
    .site-logo,
    .logo {
        max-width: 140px !important;
        height: auto !important;
        margin: 10px auto !important;
        text-align: center !important;
    }
    
    .header-logo img,
    .site-logo img,
    .logo img {
        max-width: 100% !important;
        height: auto !important;
        max-height: 50px !important;
    }
    
    /* Header container */
    .header-main,
    .main-header {
        padding: 10px 15px !important;
        min-height: 60px !important;
    }
    
    /* Desktop menü gizle */
    .header-menu,
    .desktop-menu,
    .main-menu,
    .nav-menu {
        display: none !important;
    }
    
    /* Hamburger menü göster */
    .mobile-menu-button,
    .hamburger-menu,
    .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
    }
    
    /* Header ikonları */
    .header-icons,
    .header-actions {
        display: flex !important;
        gap: 10px !important;
        align-items: center !important;
    }
    
    .header-icons a,
    .header-actions a {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Arama kutusu */
    .header-search {
        width: 100% !important;
        padding: 10px 15px !important;
    }
    
    .header-search input {
        width: 100% !important;
        height: 44px !important;
        padding: 0 15px !important;
        font-size: 16px !important;
        border-radius: 0;
    }
}

/* ===================================================================
   HERO/BANNER MOBİL DÜZELTMELERİ
   =================================================================== */

@media (max-width: 767px) {
    
    .hero-section,
    .banner-section,
    .slider-section {
        min-height: 300px !important;
        padding: 40px 20px !important;
    }
    
    .hero-title,
    .banner-title,
    h1.main-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
        padding: 0 !important;
    }
    
    .hero-subtitle,
    .banner-subtitle,
    h2.subtitle {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
        padding: 0 !important;
    }
    
    .hero-button,
    .banner-button,
    .cta-button {
        width: 100% !important;
        max-width: 300px !important;
        height: 48px !important;
        font-size: 16px !important;
        margin: 10px auto !important;
        display: block !important;
    }
    
    /* Slider controls */
    .slider-controls,
    .carousel-controls {
        bottom: 20px !important;
    }
    
    .slider-dots,
    .carousel-indicators {
        display: flex !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    
    .slider-dot,
    .carousel-indicator {
        width: 10px !important;
        height: 10px !important;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.5) !important;
    }
    
    .slider-dot.active,
    .carousel-indicator.active {
        background: #ffffff !important;
        width: 24px !important;
        border-radius: 0;
    }
}

/* ===================================================================
   KATEGORİ KARTLARI - 2 SÜTUN GRİD
   =================================================================== */

@media (max-width: 767px) {
    
    /* Grid container */
    .category-grid,
    .categories-grid,
    .product-categories {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 15px !important;
    }
    
    /* Kategori kartı */
    .category-card,
    .category-item,
    .cat-box {
        width: 100% !important;
        min-height: 150px !important;
        padding: 15px !important;
        border-radius: 0;
        background: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        transition: all 0.3s ease !important;
    }
    
    .category-card:active,
    .category-item:active {
        transform: scale(0.98) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
    }
    
    /* Kategori resmi */
    .category-image,
    .cat-image {
        width: 100% !important;
        height: 120px !important;
        object-fit: cover !important;
        border-radius: 0;
        margin-bottom: 10px !important;
    }
    
    /* Kategori başlığı */
    .category-title,
    .cat-title {
        font-size: 14px !important;
        font-weight: 600 !important;
        text-align: center !important;
        line-height: 1.3 !important;
        color: #1a1a1a !important;
        margin: 0 !important;
    }
    
    /* Kategori sayısı */
    .category-count,
    .cat-count {
        font-size: 12px !important;
        color: #666666 !important;
        text-align: center !important;
        margin-top: 5px !important;
    }
}

/* ===================================================================
   ÜRÜN KARTLARI - 2 SÜTUN GRİD
   =================================================================== */

@media (max-width: 767px) {

    /* Grid container */
    .product-grid,
    .products-grid,
    .urun-listesi,
    .products-right-products-area {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding: 10px 8px !important;
        justify-content: center !important;
    }

    /* Ürün kartı - 2 sütun layout */
    .product-card,
    .product-item,
    .urun-box,
    .product-main-box {
        width: calc(50% - 12px) !important;
        min-width: 145px !important;
        max-width: none !important;
        height: 320px !important;
        margin: 6px !important;
        padding: 6px !important;
        border-radius: 0;
        background: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        transition: all 0.3s ease !important;
        text-align: center !important;
        display: inline-block !important;
        vertical-align: top !important;
        flex: 0 0 auto !important;
    }

    /* Grid switcher class'larını mobilde iptal et */
    .products-right-products-area.grid-6 .product-main-box,
    .products-right-products-area:not(.grid-6) .product-main-box {
        width: calc(50% - 12px) !important;
        height: 320px !important;
        margin: 6px !important;
    }

    /* Ürün kartı içeriği */
    .product-main-box-in {
        height: 100% !important;
        min-height: 296px !important;
        padding: 6px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .products-right-products-area.grid-6 .product-main-box-in,
    .products-right-products-area:not(.grid-6) .product-main-box-in {
        min-height: 296px !important;
        padding: 6px !important;
    }

    /* Kapak fotoğrafı alanı - ÖNEMLİ DÜZELTME */
    .product-image,
    .urun-resim,
    .product-main-box-img {
        width: calc(100% - 12px) !important;
        height: 160px !important;
        margin: 6px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: #f8f8f8 !important;
        border-radius: 4px !important;
        object-fit: contain !important;
    }

    /* Grid switcher class'ları için de aynı */
    .products-right-products-area.grid-6 .product-main-box-img,
    .products-right-products-area:not(.grid-6) .product-main-box-img {
        width: calc(100% - 12px) !important;
        height: 160px !important;
        margin: 6px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: #f8f8f8 !important;
        border-radius: 4px !important;
    }

    /* Ürün resmi kendisi */
    .product-image-wrapper img,
    .urun-resim-wrapper img,
    .product-main-box-img img,
    .product-item-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    /* TÜM ürün görselleri ve konteynerleri için hizalama */
    .product-card img,
    .product-item img,
    .urun-box img,
    .product-main-box img,
    .products-grid img,
    .urun-listesi img {
        display: block !important;
        margin: 0 auto !important;
        text-align: center !important;
        object-fit: contain !important;
    }

    /* Ürün başlığı */
    .product-title,
    .urun-baslik,
    .product-main-box-baslik {
        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        color: #1a1a1a !important;
        margin: 4px 0 !important;
        min-height: 36px !important;
        max-height: 44px !important;
        padding: 4px 6px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .products-right-products-area.grid-6 .product-main-box-baslik,
    .products-right-products-area:not(.grid-6) .product-main-box-baslik {
        font-size: 11px !important;
        min-height: 36px !important;
        padding: 4px 6px !important;
    }

    /* Ürün kategorisi */
    .product-main-box-category {
        font-size: 10px !important;
        padding: 2px 0 !important;
    }

    /* Ürün rating */
    .product-main-box-rate {
        font-size: 12px !important;
        padding: 2px 0 !important;
    }

    /* Ürün fiyatı */
    .product-price,
    .urun-fiyat,
    .product-main-box-price h1 {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #000000 !important;
        margin: 4px 0 !important;
    }

    /* Sepete ekle butonu */
    .add-to-cart,
    .sepete-ekle {
        width: 100% !important;
        height: 40px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 0;
        background: #000000 !important;
        color: #ffffff !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    .add-to-cart:active,
    .sepete-ekle:active {
        transform: scale(0.95) !important;
        background: #333333 !important;
    }

    /* Link ve a etiketleri için */
    .product-card a,
    .product-item a,
    .urun-box a {
        display: inline-block !important;
        text-align: center !important;
    }
}

/* Küçük Mobil (max 480px) - 1 SÜTUN */
@media (max-width: 480px) {

    /* Ürün kartı - 1 sütun */
    .product-card,
    .product-item,
    .urun-box,
    .product-main-box {
        width: calc(100% - 12px) !important;
        min-width: auto !important;
        height: 360px !important;
        margin: 6px !important;
    }

    .products-right-products-area.grid-6 .product-main-box,
    .products-right-products-area:not(.grid-6) .product-main-box {
        width: calc(100% - 12px) !important;
        height: 360px !important;
    }

    .product-main-box-in {
        min-height: 336px !important;
    }

    .products-right-products-area.grid-6 .product-main-box-in,
    .products-right-products-area:not(.grid-6) .product-main-box-in {
        min-height: 336px !important;
    }

    /* Kapak fotoğrafı */
    .product-image,
    .urun-resim,
    .product-main-box-img {
        height: 180px !important;
        margin: 8px auto !important;
    }

    .products-right-products-area.grid-6 .product-main-box-img,
    .products-right-products-area:not(.grid-6) .product-main-box-img {
        height: 180px !important;
        margin: 8px auto !important;
    }

    /* Ürün başlığı */
    .product-main-box-baslik {
        font-size: 12px !important;
        min-height: 40px !important;
    }

    .products-right-products-area.grid-6 .product-main-box-baslik,
    .products-right-products-area:not(.grid-6) .product-main-box-baslik {
        font-size: 12px !important;
        min-height: 40px !important;
    }

    /* Ürün fiyatı */
    .product-main-box-price h1 {
        font-size: 16px !important;
    }
}

/* ===================================================================
   BUTONLAR - TOUCH-FRIENDLY
   =================================================================== */

@media (max-width: 767px) {
    
    /* Tüm butonlar */
    button,
    .btn,
    .button,
    input[type="submit"],
    input[type="button"],
    a.btn,
    a.button {
        min-height: 48px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        border-radius: 0;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
    }
    
    button:active,
    .btn:active,
    .button:active {
        transform: scale(0.95) !important;
    }
    
    /* Tam genişlik butonlar */
    .btn-block,
    .button-block,
    .full-width-button {
        width: 100% !important;
    }
    
    /* Buton grupları */
    .button-group,
    .btn-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
}

/* ===================================================================
   FORM ELEMANLARI
   =================================================================== */

@media (max-width: 767px) {
    
    /* Input alanları */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        width: 100% !important;
        height: 48px !important;
        padding: 0 15px !important;
        font-size: 16px !important; /* iOS zoom engellemek için */
        border: 1px solid #e0e0e0 !important;
        border-radius: 0;
        background: #ffffff !important;
        transition: all 0.3s ease !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    textarea {
        height: 120px !important;
        padding: 15px !important;
        resize: vertical !important;
    }
    
    /* Focus state */
    input:focus,
    textarea:focus,
    select:focus {
        border-color: #000000 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;
    }
    
    /* Form grupları */
    .form-group,
    .input-group {
        margin-bottom: 20px !important;
    }
    
    /* Label */
    label {
        display: block !important;
        margin-bottom: 8px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #1a1a1a !important;
    }
    
    /* Checkbox ve Radio */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
        margin-right: 10px !important;
        cursor: pointer !important;
    }
    
    /* Select dropdown */
    select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 15px center !important;
        padding-right: 40px !important;
    }
}

/* ===================================================================
   FOOTER MOBİL DÜZELTMELERİ
   =================================================================== */

@media (max-width: 767px) {
    
    /* Footer container */
    .footer,
    .site-footer {
        padding: 40px 20px 20px !important;
    }
    
    /* Footer sütunları */
    .footer-columns,
    .footer-widgets,
    .footer-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    .footer-column,
    .footer-widget,
    .footer-col {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 0 !important;
    }
    
    /* Footer başlıkları */
    .footer-title,
    .footer-heading,
    .widget-title {
        font-size: 16px !important;
        font-weight: 700 !important;
        margin-bottom: 15px !important;
        color: #1a1a1a !important;
    }
    
    /* Footer linkleri */
    .footer-links,
    .footer-menu {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .footer-links li,
    .footer-menu li {
        margin-bottom: 12px !important;
    }
    
    .footer-links a,
    .footer-menu a {
        display: block !important;
        padding: 8px 0 !important;
        font-size: 14px !important;
        color: #666666 !important;
        text-decoration: none !important;
        transition: color 0.3s ease !important;
    }
    
    .footer-links a:active,
    .footer-menu a:active {
        color: #000000 !important;
    }
    
    /* Sosyal medya */
    .footer-social,
    .social-links {
        display: flex !important;
        gap: 15px !important;
        justify-content: center !important;
        margin-top: 20px !important;
    }
    
    .footer-social a,
    .social-links a {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f5f5f5 !important;
        border-radius: 0;
        transition: all 0.3s ease !important;
    }
    
    .footer-social a:active,
    .social-links a:active {
        transform: scale(0.9) !important;
        background: #e0e0e0 !important;
    }
    
    /* Copyright */
    .footer-copyright,
    .copyright {
        text-align: center !important;
        padding: 20px 0 !important;
        margin-top: 30px !important;
        border-top: 1px solid #e0e0e0 !important;
        font-size: 13px !important;
        color: #666666 !important;
    }
}

/* ===================================================================
   TİPOGRAFİ MOBİL DÜZELTMELERİ
   =================================================================== */

@media (max-width: 767px) {
    
    /* Başlıklar */
    h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    
    h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    
    h3 {
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }
    
    h4 {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }
    
    h5, h6 {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 8px !important;
    }
    
    /* Paragraflar */
    p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }
    
    /* Linkler */
    a {
        color: inherit !important;
        text-decoration: none !important;
        transition: color 0.3s ease !important;
    }
    
    /* Liste */
    ul, ol {
        padding-left: 20px !important;
        margin-bottom: 15px !important;
    }
    
    li {
        margin-bottom: 8px !important;
        line-height: 1.6 !important;
    }
}

/* ===================================================================
   CONTAINER VE LAYOUT
   =================================================================== */

@media (max-width: 767px) {
    
    /* Container */
    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Row */
    .row {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
    
    /* Columns */
    [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Section spacing */
    section,
    .section {
        padding: 40px 0 !important;
    }
    
    /* Margin utilities */
    .mt-mobile { margin-top: 20px !important; }
    .mb-mobile { margin-bottom: 20px !important; }
    .my-mobile { margin-top: 20px !important; margin-bottom: 20px !important; }
    
    .pt-mobile { padding-top: 20px !important; }
    .pb-mobile { padding-bottom: 20px !important; }
    .py-mobile { padding-top: 20px !important; padding-bottom: 20px !important; }
}

/* ===================================================================
   BREADCRUMB
   =================================================================== */

@media (max-width: 767px) {
    
    .breadcrumb,
    .breadcrumbs {
        font-size: 12px !important;
        padding: 10px 15px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .breadcrumb-item,
    .breadcrumb a {
        display: inline-block !important;
        padding: 5px 8px !important;
        min-height: 32px !important;
    }
}

/* ===================================================================
   MODAL VE POPUP
   =================================================================== */

@media (max-width: 767px) {
    
    .modal,
    .popup {
        padding: 15px !important;
    }
    
    .modal-dialog,
    .popup-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 20px auto !important;
    }
    
    .modal-header,
    .popup-header {
        padding: 15px !important;
    }
    
    .modal-body,
    .popup-body {
        padding: 20px 15px !important;
    }
    
    .modal-footer,
    .popup-footer {
        padding: 15px !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .modal-footer button,
    .popup-footer button {
        width: 100% !important;
    }
}

/* ===================================================================
   TAB VE ACCORDION
   =================================================================== */

@media (max-width: 767px) {
    
    /* Tabs */
    .nav-tabs,
    .tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .nav-tabs li,
    .tabs li {
        flex: 0 0 auto !important;
    }
    
    .nav-tabs a,
    .tabs a {
        padding: 12px 20px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    
    /* Accordion */
    .accordion-header,
    .accordion-title {
        padding: 15px !important;
        font-size: 15px !important;
        min-height: 52px !important;
    }
    
    .accordion-body,
    .accordion-content {
        padding: 15px !important;
    }
}

/* ===================================================================
   TABLO
   =================================================================== */

@media (max-width: 767px) {
    
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    table {
        font-size: 13px !important;
    }
    
    th, td {
        padding: 10px 8px !important;
        white-space: nowrap !important;
    }
}

/* ===================================================================
   RESİM VE MEDYA
   =================================================================== */

@media (max-width: 767px) {
    
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    video,
    iframe {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Aspect ratio container */
    .video-container,
    .embed-responsive {
        position: relative !important;
        padding-bottom: 56.25% !important; /* 16:9 */
        height: 0 !important;
        overflow: hidden !important;
    }
    
    .video-container iframe,
    .embed-responsive iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ===================================================================
   PAGINATION
   =================================================================== */

@media (max-width: 767px) {
    
    .pagination {
        display: flex !important;
        justify-content: center !important;
        gap: 5px !important;
        flex-wrap: wrap !important;
    }
    
    .pagination a,
    .pagination span {
        min-width: 40px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
    }
}

/* ===================================================================
   UTILITY CLASSES
   =================================================================== */

@media (max-width: 767px) {
    
    /* Display utilities */
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
    
    /* Text alignment */
    .text-center-mobile { text-align: center !important; }
    .text-left-mobile { text-align: left !important; }
    .text-right-mobile { text-align: right !important; }
    
    /* Width utilities */
    .w-100-mobile { width: 100% !important; }
    .w-auto-mobile { width: auto !important; }
    
    /* Flex utilities */
    .flex-column-mobile {
        flex-direction: column !important;
    }
    
    .flex-wrap-mobile {
        flex-wrap: wrap !important;
    }
}

/* ===================================================================
   PERFORMANS OPTİMİZASYONLARI
   =================================================================== */

@media (max-width: 767px) {
    
    /* GPU acceleration */
    .animated,
    .transition {
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        will-change: transform !important;
    }
    
    /* Smooth scrolling */
    * {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ===================================================================
   ACCESSIBILITY
   =================================================================== */

@media (max-width: 767px) {
    
    /* Focus states */
    a:focus,
    button:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: 2px solid #000000 !important;
        outline-offset: 2px !important;
    }
    
    /* Skip to content */
    .skip-to-content {
        position: absolute !important;
        top: -40px !important;
        left: 0 !important;
        background: #000000 !important;
        color: #ffffff !important;
        padding: 8px 16px !important;
        text-decoration: none !important;
        z-index: 100 !important;
    }
    
    .skip-to-content:focus {
        top: 0 !important;
    }
}

/* ===================================================================
   PRINT STYLES
   =================================================================== */

@media print {
    .header,
    .footer,
    .sidebar,
    .mobile-menu,
    button,
    .no-print {
        display: none !important;
    }
}

/* ===================================================================
   REDUCE MOTION
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===================================================================
   KRİTİK MOBİL DÜZELTMELER - SLIDER, HAMBURGER, SIDEBAR
   =================================================================== */

@media (max-width: 767px) {

    /* ================================================================
       1. SLIDER BUTONLARI DÜZELTMESİ
       ================================================================ */

    /* Slider butonlarını göster - mobile.css'te display: none var */
    .swiper-button-next,
    .swiper-button-prev,
    .mobile-hero .swiper-button-next,
    .mobile-hero .swiper-button-prev {
        display: flex !important;
        width: 36px !important;
        height: 36px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        border-radius: 50% !important;
        color: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        z-index: 100 !important;
        top: 50% !important;
        margin-top: -18px !important;
    }

    /* Slider button positions */
    .swiper-button-prev {
        left: 10px !important;
    }

    .swiper-button-next {
        right: 10px !important;
    }

    /* Fixed header'in içindeki slider butonları için */
    #fixed-header-main .swiper-button-next,
    #fixed-header-main .swiper-button-prev {
        display: flex !important;
        background: rgba(0, 0, 0, 0.7) !important;
        z-index: 1000 !important;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 14px !important;
        color: #ffffff !important;
        font-weight: bold !important;
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background: rgba(0, 0, 0, 0.85) !important;
    }

    .swiper-button-next:active,
    .swiper-button-prev:active {
        background: rgba(0, 0, 0, 0.9) !important;
        transform: scale(0.95) !important;
    }

    /* Slider pagination dots */
    .swiper-pagination,
    .mobile-hero .swiper-pagination {
        bottom: 12px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }

    .swiper-pagination-bullet,
    .mobile-hero .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
        margin: 0 3px !important;
        background: rgba(255, 255, 255, 0.5) !important;
        opacity: 1 !important;
    }

    .swiper-pagination-bullet-active,
    .mobile-hero .swiper-pagination-bullet-active {
        background: #ffffff !important;
        width: 20px !important;
        border-radius: 4px !important;
    }

    /* ================================================================
       2. HAMBURGER MENÜ İKONU DÜZELTMESİ
       ================================================================ */

    /* Hamburger menu butonu */
    .mobile-menu-bar-button {
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
        border: none !important;
        background: transparent !important;
        outline: none !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px !important;
    }

    .mobile-menu-bar-button:focus {
        outline: none !important;
    }

    /* Nav icon container */
    #nav-icon1,
    #nav-icon2,
    #nav-icon3,
    #nav-icon4 {
        width: 30px !important;
        height: 20px !important;
        position: relative !important;
        margin: 0 !important;
        transform: rotate(0deg) !important;
        transition: all 0.3s ease-in-out !important;
        cursor: pointer !important;
    }

    /* Nav icon spans (hamburger lines) */
    #nav-icon1 span,
    #nav-icon3 span,
    #nav-icon4 span {
        display: block !important;
        position: absolute !important;
        height: 3px !important;
        width: 100% !important;
        background: #000000 !important;
        border-radius: 2px !important;
        opacity: 1 !important;
        left: 0 !important;
        transform: rotate(0deg) !important;
        transition: all 0.25s ease-in-out !important;
    }

    /* First line position */
    #nav-icon1 span:nth-child(1) {
        top: 0px !important;
    }

    /* Second line position */
    #nav-icon1 span:nth-child(2) {
        top: 8px !important;
    }

    /* Third line position */
    #nav-icon1 span:nth-child(3) {
        top: 16px !important;
    }

    /* Open state - first line */
    #nav-icon1.open span:nth-child(1) {
        top: 8px !important;
        transform: rotate(135deg) !important;
    }

    /* Open state - second line (hidden) */
    #nav-icon1.open span:nth-child(2) {
        opacity: 0 !important;
        left: -60px !important;
    }

    /* Open state - third line */
    #nav-icon1.open span:nth-child(3) {
        top: 8px !important;
        transform: rotate(-135deg) !important;
    }

    /* Mobile header right bars */
    .header-mobile-right-bars {
        display: flex !important;
        align-items: center !important;
    }

    /* ================================================================
       3. MOBİL MENÜ SIDEBAR DÜZELTMESİ
       ================================================================ */

    /* Mobile menu container - slideDown/slideUp compatible */
    .opening-mobile-menu-div {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 85% !important;
        max-width: 380px !important;
        height: 100% !important;
        max-height: 100vh !important;
        background: #ffffff !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important;
        border-top: none !important;
        text-align: left !important;
    }

    /* Mobile menu visible state (when slideDown is active) */
    .opening-mobile-menu-div[style*="display: block"],
    .opening-mobile-menu-div[style*="display: block;"] {
        display: block !important;
    }

    /* Mobile menu overlay */
    .mobile-menu-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9998 !important;
    }

    /* Smooth scroll */
    .opening-mobile-menu-div {
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }

    /* ================================================================
       4. MOBİL MENÜ İÇERİK DÜZELTMELERİ
       ================================================================ */

    /* Mobile menu social div */
    .mobile-menu-social-div {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid #EBEBEB !important;
        background: #f8f8f8 !important;
    }

    .mobile-menu-social-div-left {
        display: flex !important;
        gap: 10px !important;
    }

    .mobile-menu-social-div-left a {
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border-radius: 50% !important;
        color: #333333 !important;
        font-size: 16px !important;
        text-decoration: none !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    /* Mobile menu search area */
    .header-mobile-menu-search-area {
        padding: 15px 20px !important;
        border-bottom: 1px solid #EBEBEB !important;
    }

    .header-mobile-menu-search-area form {
        display: flex !important;
        gap: 8px !important;
    }

    .header-mobile-menu-search-area input[type="text"] {
        flex: 1 !important;
        padding: 10px 15px !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        font-size: 14px !important;
    }

    .header-mobile-menu-search-area button {
        padding: 10px 20px !important;
        background: #333333 !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 4px !important;
        font-size: 14px !important;
        cursor: pointer !important;
    }

    /* ================================================================
       5. MOBİL MENÜ LADDER (NAVIGATION) DÜZELTMELERİ
       ================================================================ */

    /* Ladder tree navigation */
    .ladder.tree {
        padding: 0 !important;
        margin: 0 !important;
    }

    .ladder.tree ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .ladder.tree > ul > li {
        border-bottom: 1px solid #EBEBEB !important;
    }

    .ladder.tree > ul > li > a {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 20px !important;
        color: #333333 !important;
        text-decoration: none !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        transition: background 0.2s ease !important;
    }

    .ladder.tree > ul > li > a:active {
        background: #f5f5f5 !important;
    }

    .ladder.tree > ul > li > a i[data-lucide] {
        font-size: 16px !important;
    }

    /* Submenu styles */
    .ladder.tree ul ul {
        display: none !important;
        background: #f8f8f8 !important;
    }

    .ladder.tree ul ul.active {
        display: block !important;
    }

    .ladder.tree ul ul li a {
        display: block !important;
        padding: 12px 20px 12px 35px !important;
        color: #555555 !important;
        text-decoration: none !important;
        font-size: 15px !important;
        border-bottom: 1px solid #eeeeee !important;
    }

    /* ================================================================
       6. MOBİL MENÜ SCROLLBAR DÜZELTMESİ
       ================================================================ */

    .opening-mobile-menu-div::-webkit-scrollbar {
        width: 4px !important;
    }

    .opening-mobile-menu-div::-webkit-scrollbar-track {
        background: #f5f5f5 !important;
    }

    .opening-mobile-menu-div::-webkit-scrollbar-thumb {
        background: #cccccc !important;
        border-radius: 2px !important;
    }

    /* ================================================================
       7. LANGUAGE DROPDOWN MOBİL DÜZELTMESİ
       ================================================================ */

    .dropdown-text-type-mobile-lang {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 12px !important;
        background: #ffffff !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        color: #333333 !important;
        font-size: 14px !important;
    }

    .dropdown-box-type-lang-show-2 {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        margin-top: 8px !important;
        background: #ffffff !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        min-width: 150px !important;
        z-index: 1000 !important;
    }

    .dropdown-box-type-lang-show-2 .dropdown-item {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 15px !important;
        color: #333333 !important;
        text-decoration: none !important;
        transition: background 0.2s ease !important;
    }

    .dropdown-box-type-lang-show-2 .dropdown-item:hover,
    .dropdown-box-type-lang-show-2 .dropdown-item:active {
        background: #f5f5f5 !important;
    }

    /* ================================================================
       8. EKSTRA MOBİL HEADER DÜZELTMELERİ
       ================================================================ */

    /* Fixed header'in mobilde düzgün çalışması için */
    #fixed-header-main {
        display: none !important;
    }

    /* Ana header mobilde düzgün görünmesi için */
    .header {
        position: relative !important;
    }
}

/* Desktop için menü gizleme */
@media (min-width: 768px) {
    .opening-mobile-menu-div {
        display: none !important;
    }

    .mobile-menu-overlay {
        display: none !important;
    }

    .mobile-menu-bar-button {
        display: none !important;
    }
}

/* ===================================================================
   EKSTRA MOBİL DÜZELTMELER - GENEL SİTE İYİLEŞTİRMELERİ
   =================================================================== */

@media (max-width: 767px) {

    /* ================================================================
       HEADER DÜZELTMELERİ
    ================================================================ */

    /* Ana header mobilde düzgün görünmesi için */
    .header {
        position: relative !important;
        background: #ffffff !important;
        z-index: 1000 !important;
    }

    .header-mobile-main {
        padding: 15px 0 !important;
    }

    /* Header logo */
    .header-mobile-logo img {
        max-height: 50px !important;
        width: auto !important;
    }

    /* Header social icons */
    .header-social-icons {
        display: none !important;
    }

    /* ================================================================
       FOOTER DÜZELTMELERİ
    ================================================================ */

    /* Footer mobile spacing */
    .footer {
        padding: 30px 0 !important;
    }

    .footer-section {
        margin-bottom: 20px !important;
    }

    /* Footer columns */
    .footer-column {
        width: 100% !important;
        margin-bottom: 20px !important;
        padding: 0 15px !important;
    }

    /* ================================================================
       BUTTON DÜZELTMELERİ
    ================================================================ */

    /* Tüm butonlar mobilde düzgün görünsün */
    .btn,
    button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px !important;
        padding: 10px 20px !important;
        font-size: 16px !important;
        touch-action: manipulation !important;
    }

    /* Primary buttons */
    .btn-primary {
        background: #333333 !important;
        color: #ffffff !important;
        border: none !important;
    }

    .btn-primary:active {
        background: #000000 !important;
        transform: scale(0.98) !important;
    }

    /* ================================================================
       FORM DÜZELTMELERİ
    ================================================================ */

    /* Input fields */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 10px 15px !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
    }

    /* Focus states */
    input:focus,
    textarea:focus,
    select:focus {
        outline: 2px solid #333333 !important;
        outline-offset: 1px !important;
        border-color: #333333 !important;
    }

    /* ================================================================
       CARD/BOX DÜZELTMELERİ
    ================================================================ */

    /* Kart container'lar */
    .card,
    .box,
    .content-box {
        border-radius: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        margin-bottom: 15px !important;
    }

    /* Card images */
    .card img,
    .box img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ================================================================
       TYPOGRAPHY DÜZELTMELERİ
    ================================================================ */

    /* Başlıklar */
    h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

    h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    h4 {
        font-size: 16px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    /* Paragraflar */
    p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
    }

    /* ================================================================
       SPACING & MARGIN DÜZELTMELERİ
    ================================================================ */

    /* Container'lar */
    .container,
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Section'lar */
    section {
        padding: 30px 0 !important;
    }

    /* Row'lar */
    .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }

    /* Column'lar */
    [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-bottom: 15px !important;
    }

    /* ================================================================
       TABLE DÜZELTMELERİ
    ================================================================ */

    /* Tablolar */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block !important;
    }

    thead tr {
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }

    tr {
        margin-bottom: 15px !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
    }

    td {
        border: none !important;
        border-bottom: 1px solid #eee !important;
        position: relative !important;
        padding-left: 50% !important;
        text-align: left !important;
    }

    td:before {
        position: absolute !important;
        top: 12px !important;
        left: 15px !important;
        width: 45% !important;
        padding-right: 10px !important;
        white-space: nowrap !important;
        text-align: left !important;
        font-weight: bold !important;
        content: attr(data-label) !important;
    }

    /* ================================================================
       DROPDOWN DÜZELTMELERİ
    ================================================================ */

    /* Dropdown menüler */
    .dropdown-menu {
        position: static !important;
        width: 100% !important;
        margin-top: 5px !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    /* Dropdown item'lar */
    .dropdown-item {
        padding: 12px 20px !important;
        font-size: 16px !important;
        border-bottom: 1px solid #eee !important;
    }

    /* ================================================================
       MODAL DÜZELTMELERİ
    ================================================================ */

    /* Modal'lar */
    .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        height: 100vh !important;
    }

    .modal-content {
        height: 100% !important;
        border: none !important;
        border-radius: 0 !important;
    }

    .modal-body {
        padding: 20px !important;
        overflow-y: auto !important;
    }

    /* ================================================================
       ACCORDION DÜZELTMELERİ
    ================================================================ */

    /* Accordion */
    .accordion-item {
        margin-bottom: 10px !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
    }

    .accordion-header {
        min-height: 44px !important;
        padding: 12px 15px !important;
        background: #f8f8f8 !important;
    }

    .accordion-body {
        padding: 15px !important;
    }

    /* ================================================================
       TOAST/NOTIFICATION DÜZELTMELERİ
    ================================================================ */

    /* Alert/Toast mesajları */
    .alert,
    .toast,
    .notification {
        padding: 15px 20px !important;
        margin-bottom: 15px !important;
        border-radius: 4px !important;
        font-size: 14px !important;
    }

    /* ================================================================
       PAGINATION DÜZELTMELERİ
    ================================================================ */

    /* Sayfalama */
    .pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
    }

    .page-link {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
    }

    /* ================================================================
       SOCIAL ICONS DÜZELTMELERİ
    ================================================================ */

    /* Social icons */
    .social-icons a,
    .social-links a {
        width: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
    }

    /* ================================================================
       BADGE/TAG DÜZELTMELERİ
    ================================================================ */

    /* Badge'ler */
    .badge,
    .tag {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }
}