/* =====================================================================
   SERYAPI B2B - Bootstrap 5 mobil / tablet uyum katmanı
   ---------------------------------------------------------------------
   - ana.master içinde style.css ve sayfa stillerinden SONRA yüklenir.
   - Masaüstü (>= 992px) görünümüne dokunmaz; kuralların neredeyse
     tamamı max-width medya sorguları içindedir.
   - Not: html font-size 10px olduğu için 1rem = 10px.
   ===================================================================== */


/* ---------------------------------------------------------------------
   GENEL
   --------------------------------------------------------------------- */
/* Footer satırı: masaüstünde eski sabit yükseklik korunur */
.footer-row {
    width: 100%;
}

@media (min-width: 992px) {
    .footer-row {
        height: 300px;
    }
}


/* ---------------------------------------------------------------------
   KÜÇÜK MASAÜSTÜ / BÜYÜK TABLET YATAY (1200px - 1399px)
   Kategori menüsü 4rem aralıkla sığmıyor, son kategori ekran dışına taşıyordu.
   --------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .header-nav .header-nav-menu .menu-list {
        gap: 1rem;
    }
}


/* ---------------------------------------------------------------------
   TABLET (YATAY DAHİL) VE ALTI (< 1200px)
   Masaüstü başlığı (hover menüler, tek satır kategori menüsü) 1200px altına
   sığmıyor ve dokunmatikte çalışmıyor; bu aralıkta mobil başlık kullanılır
   (ana.master: d-xl-none / d-xl-block).
   --------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .mobile-menu {
        position: sticky;
        top: 0;
        z-index: 1030;
        /* şablondaki rgba(174,28,154,.08) renginin opak karşılığı: kaydırırken içerik arkadan görünmesin */
        background-color: #f9edf7;
    }

    .mobile-menu-header {
        min-height: 5.6rem;
    }

        .mobile-menu-header .btn {
            padding: 1.2rem;
        }

        /* logo, sağda iki ikon olsa da tam ortada kalsın */
        .mobile-menu-header .mobile-header-logo {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .mobile-menu-header .mobil-arama-btn {
            line-height: 0;
            padding: 1rem 1.2rem;
        }

    /* mobil arama alanı */
    .mobil-arama {
        display: flex;
        gap: .8rem;
        padding: .4rem .4rem 1rem;
    }

        .mobil-arama .form-control {
            height: 4.4rem;
            border-radius: 3rem;
            padding: 0 1.8rem;
            font-size: 16px; /* iOS odaklanınca yakınlaştırmasın */
            border: 1px solid #e3d3e0;
        }

        .mobil-arama .shop-btn {
            margin: 0;
            padding: 0 2.2rem;
            height: 4.4rem;
            flex-shrink: 0;
        }

            .mobil-arama .shop-btn::after {
                display: none;
            }
}


/* ---------------------------------------------------------------------
   TABLET VE ALTI (< 992px)
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* Hero / banner: sabit yükseklik yerine görsel oranı (2:1) */
    .hero {
        height: auto;
        aspect-ratio: 2 / 1;
    }

        .hero .swiper-slide {
            padding: 0;
        }

        .hero .swiper-pagination-bullets {
            bottom: 1rem;
        }

    /* Footer */
    .footer .footer-section {
        padding: 3rem 1.5rem 1rem;
    }

        .footer .footer-section .logo {
            margin-bottom: 2rem;
        }

    /* Ürün listesi: sıralama alanı */
    .product-sidebar-section .product-sorting-section {
        flex-wrap: wrap;
        gap: 1rem;
    }

    /* Ürün listesi: filtre aç/kapa butonu */
    .filtre-toggle {
        margin: 0 0 1.5rem 0;
        width: 100%;
    }

        .filtre-toggle::after {
            display: none;
        }

    /* Profil: sekme içerikleri tam genişlik */
    .user-dashboard .nav-content {
        width: 100%;
    }

    /* Sipariş detay modalı (profil) */
    .support-ticket .modal-wrapper .modal-main {
        width: 95% !important;
        height: 80% !important;
    }
}


/* ---------------------------------------------------------------------
   SADECE TABLET (768px - 1199px)
   --------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* g-5 satırların negatif kenar boşluğu ekran dışına taşmasın */
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}


/* ---------------------------------------------------------------------
   MOBİL (< 768px)
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* ---- Ürün kartları (anasayfa, ürün listesi) ---- */
    .product-wrapper {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 0 1rem 0;
    }

        .product-wrapper .product-img,
        .best-product .product-wrapper .product-img {
            height: 15rem;
            padding: 1rem;
            flex-shrink: 0;
        }

        .product-wrapper .product-info {
            margin: 0 1rem;
            align-items: stretch;
            text-align: center;
            gap: .6rem;
            flex: 1 1 auto;
        }

            .product-wrapper .product-info .ratings {
                display: none;
            }

        .product-wrapper .product-details {
            font-size: 1.4rem;
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-word;
        }

        .product-wrapper .price span {
            font-size: 1.5rem;
        }

        .product-wrapper .form-select {
            font-size: 1.3rem;
            padding: .5rem 2.4rem .5rem .8rem;
            background-position: right .6rem center;
        }

        .product-wrapper .product-cart-btn {
            position: static;
            margin: 1rem 1rem 0;
        }

            .product-wrapper .product-cart-btn .product-btn {
                display: block;
                width: 100%;
                text-align: center;
                border-radius: 3rem;
                padding: 1rem;
                font-size: 1.4rem;
            }

                .product-wrapper .product-cart-btn .product-btn span {
                    display: none;
                }

        /* Mobilde hover yok; büyüteç ikonlarını gizle */
        .product-wrapper .product-img .product-cart-items {
            display: none;
        }

    /* "En Çok Satanlar" şablonda mobilde gizliydi; diğer kartlarla aynı düzende göster */
    .top-selling {
        display: block;
    }

    .top-selling-section .product-wrapper {
        height: 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 0 0 1rem 0;
    }

        .top-selling-section .product-wrapper .product-img {
            width: auto;
            height: 15rem;
            background: transparent;
        }

            .top-selling-section .product-wrapper .product-img img {
                object-fit: contain;
            }

        .top-selling-section .product-wrapper .product-info {
            margin: 0 1rem;
            flex: 1 1 auto;
            align-items: stretch;
        }

        .top-selling-section .product-wrapper .price {
            justify-content: center;
        }

    /* "Kampanyalı Ürünler" kartları */
    .best-product {
        padding-bottom: 4rem;
    }

        .best-product .product-wrapper {
            height: 100%;
        }

        .best-product .best-product-section .product-info {
            margin: 0 1rem;
        }

            .best-product .best-product-section .product-info .product-details {
                font-size: 1.4rem;
            }

    .section-title h5 {
        font-size: 2.2rem;
    }

    /* ---- Breadcrumb ---- */
    .blog-bradcrum {
        flex-wrap: wrap;
        row-gap: .4rem;
    }

    /* ---- Ürün listesi sıralama ---- */
    .product-sidebar-section .product-sorting-section .product-sorting {
        width: 100%;
        justify-content: space-between;
    }

        .product-sidebar-section .product-sorting-section .product-sorting .form-select {
            width: auto;
            flex: 1 1 auto;
        }

    /* ---- Ürün detay ---- */
    .product-info-content h5 {
        font-size: 2.2rem;
    }

    .product-info-content .product-quantity {
        flex-wrap: wrap;
        gap: 1rem;
    }

        .product-info-content .product-quantity .shop-btn {
            margin: 0;
        }

    /* ana görsel: sabit 60rem yerine kare alan */
    .product-info-img .product-top {
        height: auto;
        aspect-ratio: 1 / 1;
    }

        .product-info-img .product-top .product-image-zoom img {
            height: 100%;
            object-fit: contain;
        }

    .product-bottom {
        margin-top: 1rem;
    }

    /* ---- Giriş / Kayıt ---- */
    .login-section .review-form {
        width: 100%;
        max-width: 51.2rem;
        height: auto;
        padding: 2.5rem 2rem;
    }

        .login-section .review-form .comment-title {
            margin-top: 1rem;
            margin-bottom: 2rem;
        }

    /* ---- Sepet: tablo -> kart görünümü ---- */
    .sepet-tablo,
    .sepet-tablo tbody,
    .sepet-tablo tr,
    .sepet-tablo td {
        display: block;
        width: 100% !important;
    }

        .sepet-tablo .table-top-row {
            display: none;
        }

        .sepet-tablo .table-row.ticket-row {
            position: relative;
            background: #fff;
            border: 1px solid #eee;
            border-radius: 1rem;
            margin-bottom: 1.2rem;
            padding: 1rem 1.2rem;
        }

        .sepet-tablo td.table-wrapper {
            min-width: 0;
            padding: .6rem 0 !important;
            text-align: right !important;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            border: 0;
        }

            .sepet-tablo td.table-wrapper[data-label]::before {
                content: attr(data-label);
                font-size: 1.3rem;
                font-weight: 600;
                color: #797979;
                text-align: left;
                flex-shrink: 0;
            }

            .sepet-tablo td.table-wrapper .heading {
                font-size: 1.4rem;
            }

            .sepet-tablo td.table-wrapper.wrapper-product {
                padding-right: 3rem !important;
            }

                .sepet-tablo td.table-wrapper.wrapper-product .wrapper {
                    display: flex;
                    align-items: center;
                    gap: 1rem;
                    text-align: left;
                }

                .sepet-tablo td.table-wrapper.wrapper-product .wrapper-img {
                    width: 6rem;
                    height: 6rem;
                    flex-shrink: 0;
                }

            /* sil butonu sağ üst köşe */
            .sepet-tablo td.table-wrapper.sil-hucre {
                position: absolute;
                top: .6rem;
                right: .6rem;
                width: auto !important;
                padding: .6rem !important;
            }

    .product-cart .cart-section {
        overflow: visible;
        border: 0;
    }

    .wishlist-btn.cart-btn {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 1.5rem;
    }

        .wishlist-btn.cart-btn .shop-btn {
            width: 100%;
        }

        .wishlist-btn.cart-btn .clean-btn {
            text-align: center;
        }

    /* Sepet / ödeme adım sekmeleri */
    .product-detail-section .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

        .product-detail-section .nav-tabs .nav-link {
            white-space: nowrap;
            font-size: 1.4rem;
            padding: 1rem 1.2rem;
        }

    /* ---- Formlar ---- */
    .account-inner-form {
        flex-direction: column;
        gap: 0;
    }

    .review-form .shop-btn,
    .login-btn .shop-btn {
        max-width: 100%;
    }

    /* iOS'ta odaklanınca yakınlaştırmayı engelle */
    input.form-control,
    select.form-select,
    textarea.form-control {
        font-size: 16px;
    }

    /* ---- Profil ---- */
    .user-profile-section .review-form .shop-btn {
        width: 100%;
        text-align: center;
    }

    .blog-heading .heading {
        font-size: 3rem;
    }
}


/* ---------------------------------------------------------------------
   KÜÇÜK TELEFONLAR (< 400px)
   --------------------------------------------------------------------- */
@media (max-width: 399.98px) {
    .product-wrapper .product-img,
    .best-product .product-wrapper .product-img {
        height: 12rem;
    }

    .product-wrapper .product-details {
        font-size: 1.3rem;
    }
}