/* Mobile Responsive Fixes for Jewelry Theme */

/* Header ve Logo Düzeltmeleri */
.tf-header {
    padding: 10px 0 !important;
}

.tf-header .container {
    padding-left: 15px;
    padding-right: 15px;
}

.logo-site {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 !important;
    height: 100%;
}

.logo-site img {
    max-height: 70px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

@media (min-width: 768px) {
    .logo-site img {
        max-height: 80px !important;
    }
}

@media (min-width: 992px) {
    .logo-site img {
        max-height: 90px !important;
    }
}

@media (min-width: 1200px) {
    .logo-site img {
        max-height: 100px !important;
    }
}

/* Header row spacing düzeltmesi */
.tf-header .row {
    margin-left: -10px;
    margin-right: -10px;
}

.tf-header .row > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

/* Logo column genişliği - Sadece PC'de sabit genişlik */
@media (min-width: 1200px) {
    .tf-header .col-xl-2.col-md-4.col-6 {
        width: 11.666667% !important;
        flex: 0 0 11.666667%;
        max-width: 11.666667%;
    }
}

/* Mobil ve tablet'te otomatik genişlik */
@media (max-width: 1199px) {
    .tf-header .col-xl-2.col-md-4.col-6 {
        width: auto !important;
        flex: 0 0 auto;
        max-width: none;
    }
}

/* Navigation menu spacing düzeltmesi */
.box-navigation .box-nav-menu {
    gap: 15px !important;
    padding-left: 0 !important;
}

@media (min-width: 1200px) {
    .box-navigation .box-nav-menu {
        gap: 20px !important;
    }
}

.box-navigation .item-link {
    line-height: 50px !important;
    padding: 0 4px !important;
    font-size: 14px;
}

@media (min-width: 992px) {
    .box-navigation .item-link {
        line-height: 60px !important;
    }
}

@media (min-width: 1200px) {
    .box-navigation .item-link {
        line-height: 70px !important;
        font-size: 15px;
    }
}

/* Header sağ taraf boşluğu */
.tf-header .col-xl-2.col-md-4.col-3 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Mobil menü butonu */
.btn-mobile-menu {
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Genel Mobil Düzeltmeleri */
@media (max-width: 767px) {
    /* Container padding düzeltmesi */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Body overflow düzeltmesi */
    body {
        overflow-x: hidden;
        width: 100%;
    }

    /* Tüm section'lar için padding düzeltmesi */
    section {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Resimlerin responsive olması */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Başlık font boyutları */
    h1 {
        font-size: 28px !important;
        line-height: 1.3;
    }

    h2 {
        font-size: 24px !important;
        line-height: 1.3;
    }

    h3 {
        font-size: 20px !important;
    }

    h4 {
        font-size: 18px !important;
    }

    /* Butonlar için minimum dokunma alanı */
    .btn, button, a.btn {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
        font-size: 16px;
    }

    /* Top header mobilde */
    .top-header {
        padding: 8px 0;
        font-size: 12px;
    }

    .top-header .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .top-header .contact-info {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .top-header .contact-info span {
        margin-right: 0;
        margin-bottom: 5px;
    }

    .top-header .social-links {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .top-header .social-links a {
        margin-left: 0;
    }

    /* Text overflow düzeltmeleri */
    p, span, div {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Swiper slider düzeltmeleri */
    .swiper {
        padding: 0 15px;
    }

    .swiper-slide {
        width: 100%;
    }

    /* Form elemanları */
    input, textarea, select {
        font-size: 16px !important; /* iOS zoom önleme */
        padding: 12px 15px;
        width: 100%;
    }

    /* Tablo responsive */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Hero banner mobilde */
    .hero-banner {
        padding: 20px 0;
    }

    .hero-banner .img_item {
        height: 300px;
    }

    /* Product cards mobilde */
    .card_product-wrapper {
        margin-bottom: 20px;
    }

    .product-img {
        width: 100%;
    }

    /* Banner sections mobilde */
    .banner_V07,
    .banner_V05,
    .box_image--V01 {
        margin-bottom: 20px;
    }

    .banner_V07 .image img,
    .banner_V05 .image img,
    .box_image--V01 img {
        width: 100%;
        height: auto;
    }
}

/* Küçük ekranlar için ek düzeltmeler */
@media (max-width: 575px) {
    /* Container daha küçük padding */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Başlık boyutları daha da küçült */
    h1 {
        font-size: 24px !important;
    }

    h2 {
        font-size: 20px !important;
    }

    h3 {
        font-size: 18px !important;
    }

    /* Butonlar tam genişlik */
    .btn, .btn-primary, .btn-secondary {
        width: 100%;
        display: block;
        text-align: center;
        margin-bottom: 15px;
    }

    /* Top header küçük ekranlarda */
    .top-header {
        font-size: 11px;
        padding: 6px 0;
    }

    .top-header .contact-info span {
        font-size: 11px;
    }

    /* Hero banner küçük ekranlarda */
    .hero-banner .img_item {
        height: 250px;
    }

    /* Spacing düzeltmeleri */
    .row {
        margin-left: -10px;
        margin-right: -10px;
    }

    .row > [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Tablet düzeltmeleri */
@media (min-width: 576px) and (max-width: 991px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    h1 {
        font-size: 36px !important;
    }

    h2 {
        font-size: 28px !important;
    }

    .top-header .container {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Touch device iyileştirmeleri */
@media (hover: none) and (pointer: coarse) {
    /* Dokunmatik cihazlar için buton boyutları */
    .btn, button, a.btn {
        min-height: 48px;
        padding: 14px 24px;
    }

    /* Link'ler için daha büyük tıklama alanı */
    a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Menu item'lar için daha büyük alan */
    .nav-link, .menu-item a {
        padding: 15px 20px;
        min-height: 48px;
    }

    /* Product card tıklama alanı */
    .card_product-wrapper a {
        min-height: 44px;
    }
}

/* Landscape orientation düzeltmeleri */
@media (max-width: 767px) and (orientation: landscape) {
    .hero-banner {
        padding: 15px 0;
    }

    .hero-banner .img_item {
        height: 200px;
    }

    section {
        padding: 30px 0;
    }
}

/* iOS Safari özel düzeltmeleri */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 767px) {
        input, textarea, select {
            font-size: 16px !important;
        }

        /* iOS'ta viewport düzeltmesi */
        body {
            -webkit-text-size-adjust: 100%;
        }
    }
}

/* Smooth scrolling mobilde */
@media (max-width: 767px) {
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
}

/* Image lazy loading için placeholder */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Swiper pagination mobilde daha görünür */
@media (max-width: 767px) {
    .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0 5px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 35px;
        height: 35px;
    }
}

/* Product grid mobilde */
@media (max-width: 767px) {
    .product-grid,
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .card_product-wrapper {
        width: 100%;
    }
}

/* Carousel mobilde */
@media (max-width: 767px) {
    .carousel-item img {
        width: 100%;
        height: auto;
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 40px;
        height: 40px;
    }
}

/* Navigation menu mobilde */
@media (max-width: 991px) {
    .navbar {
        padding: 10px 0;
    }

    .navbar-brand img {
        max-height: 40px;
    }

    .navbar-toggler {
        padding: 8px 12px;
        font-size: 18px;
    }
}

/* Footer mobilde */
@media (max-width: 767px) {
    footer {
        padding: 30px 0 20px;
    }

    .footer-section {
        margin-bottom: 30px;
    }

    .footer-links {
        flex-direction: column;
    }
}

/* Modal mobilde */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .modal-content {
        padding: 20px 15px;
    }
}

/* Product detail page mobilde */
@media (max-width: 767px) {
    .product-detail-image {
        margin-bottom: 20px;
    }

    .product-detail-info {
        padding: 20px 0;
    }

    .product-gallery {
        margin-top: 20px;
    }

    .product-gallery img {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Shopping cart mobilde */
@media (max-width: 767px) {
    .cart-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .cart-item-image {
        width: 100%;
        margin-bottom: 15px;
    }

    .cart-item-details {
        width: 100%;
    }

    .cart-summary {
        margin-top: 20px;
    }
}

/* Checkout form mobilde */
@media (max-width: 767px) {
    .checkout-form {
        padding: 20px 15px;
    }

    .checkout-form .form-group {
        margin-bottom: 20px;
    }

    .checkout-form input,
    .checkout-form select,
    .checkout-form textarea {
        width: 100%;
        padding: 12px 15px;
    }
}

/* Search bar mobilde */
@media (max-width: 767px) {
    .search-bar {
        width: 100%;
        margin-bottom: 15px;
    }

    .search-input {
        width: 100%;
        padding: 12px 15px;
    }
}

/* Filter sidebar mobilde */
@media (max-width: 991px) {
    .filter-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: white;
        z-index: 1050;
        transition: left 0.3s ease;
        overflow-y: auto;
        padding: 20px;
    }

    .filter-sidebar.active {
        left: 0;
    }

    .filter-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1049;
    }

    .filter-overlay.active {
        display: block;
    }
}

/* Category menu mobilde */
@media (max-width: 991px) {
    .category-menu {
        display: none;
    }

    .category-menu.mobile-active {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        z-index: 1050;
        overflow-y: auto;
        padding: 20px;
    }
}

/* Price display mobilde */
@media (max-width: 767px) {
    .product-price {
        font-size: 20px;
    }

    .product-price-old {
        font-size: 16px;
    }
}

/* Badge ve label mobilde */
@media (max-width: 767px) {
    .badge,
    .label {
        font-size: 11px;
        padding: 4px 8px;
    }
}

/* Loading spinner mobilde */
@media (max-width: 767px) {
    .spinner,
    .loading {
        width: 40px;
        height: 40px;
    }
}

/* Toast notifications mobilde */
@media (max-width: 767px) {
    .toast {
        width: calc(100% - 30px);
        max-width: 100%;
        margin: 0 15px;
    }
}

/* Zoom functionality mobilde */
@media (max-width: 767px) {
    .zoom-container {
        touch-action: pan-x pan-y;
    }

    .zoom-image {
        max-width: 100%;
        height: auto;
    }
}

/* PhotoSwipe gallery mobilde */
@media (max-width: 767px) {
    .pswp__img {
        max-width: 100%;
        height: auto;
    }
}

/* Infinite scroll mobilde */
@media (max-width: 767px) {
    .infinite-scroll-loader {
        padding: 20px;
        text-align: center;
    }
}