/*
 * Global Responsive Styles
 * Tablet ve büyük monitörler için responsive düzenlemeler
 * Breakpoints: 
 *   - Extra large (xxl): 1600px+
 *   - Large (xl): 1200px - 1599px  
 *   - Medium (lg): 992px - 1199px
 *   - Tablet (md): 768px - 991px
 *   - Mobile (sm): 576px - 767px
 *   - Small Mobile (xs): 0 - 575px
 */

/* =========================================
   GLOBAL CONTAINER IMPROVEMENTS
   ========================================= */

/* Büyük ekranlar için container genişliği - SADECE KATEGORİ SAYFALARI */
@media (min-width: 1400px) {
    .category-page-wrapper .container,
    .cat-detail-main-container .container {
        max-width: 1320px;
    }
}

@media (min-width: 1600px) {
    .category-page-wrapper .container,
    .cat-detail-main-container .container {
        max-width: 1500px;
    }
}

@media (min-width: 1920px) {
    .category-page-wrapper .container,
    .cat-detail-main-container .container {
        max-width: 1700px;
    }
}

/* Container fluid padding - SADECE KATEGORİ SAYFALARI */
.category-page-wrapper .container-fluid,
.cat-detail-main-container .container-fluid {
    padding-left: 3%;
    padding-right: 3%;
}

@media (min-width: 1600px) {
    .category-page-wrapper .container-fluid,
    .cat-detail-main-container .container-fluid {
        padding-left: 5%;
        padding-right: 5%;
    }
}

@media (min-width: 1920px) {
    .category-page-wrapper .container-fluid,
    .cat-detail-main-container .container-fluid {
        padding-left: 8%;
        padding-right: 8%;
    }
}

/* =========================================
   HEADER RESPONSIVE
   ========================================= */

/* Desktop Header - Large screens */
@media (min-width: 1600px) {
    .header-desktop-main-div-in {
        max-width: 1500px;
        margin: 0 auto;
    }
    
    .header-desktop-logo-div img {
        height: 65px;
        max-width: 280px;
    }
    
    .header-desktop-search1 {
        max-width: 500px;
    }
    
    .top-level-menu > li > a {
        padding: 15px 20px;
        font-size: 15px;
    }
}

@media (min-width: 1920px) {
    .header-desktop-main-div-in {
        max-width: 1700px;
    }
    
    .header-desktop-logo-div img {
        height: 70px;
        max-width: 300px;
    }
    
    .header-desktop-search1 {
        max-width: 600px;
    }
}

/* Header - Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .header-desktop-main-div-in {
        padding: 10px 20px;
    }
    
    .header-desktop-logo-div img {
        height: 45px;
        max-width: 180px;
    }
    
    .header-desktop-search1 {
        max-width: 250px;
    }
    
    .header-desktop-navbutton-box a {
        font-size: 12px;
        padding: 5px;
    }
    
    .top-level-menu > li > a {
        padding: 12px 12px;
        font-size: 13px;
    }
}

/* =========================================
   NAVIGATION MENU RESPONSIVE
   ========================================= */

@media (min-width: 1600px) {
    .top-level-menu-main-div-in {
        max-width: 1500px;
        margin: 0 auto;
    }
}

@media (min-width: 1920px) {
    .top-level-menu-main-div-in {
        max-width: 1700px;
    }
}

/* Tablet menu */
@media (min-width: 768px) and (max-width: 991px) {
    .top-level-menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .top-level-menu::-webkit-scrollbar {
        display: none;
    }
    
    .top-level-menu > li > a {
        white-space: nowrap;
    }
}

/* =========================================
   PRODUCT GRID RESPONSIVE
   ========================================= */

/* Ürün kartları - Büyük ekranlar */
@media (min-width: 1400px) {
    .cat-detail-products-box {
        width: 18.5%;
        margin: 0.75%;
    }
    
    .cat-detail-products-box-big {
        width: 23.5%;
    }
}

@media (min-width: 1600px) {
    .cat-detail-products-box {
        width: 18.5%;
        margin: 0.75%;
    }
    
    .cat-detail-products-box-h {
        font-size: 15px;
        min-height: 45px;
    }
    
    /* Sadece kategori sayfası ürün kartları */
    .cat-detail-main-div .product-card,
    .cat-detail-main-div .cat-detail-products-box {
        padding: 15px;
    }
}

@media (min-width: 1920px) {
    .cat-detail-products-box {
        width: 15.1%;
        margin: 0.6%;
    }
}

/* Tablet - 3 ürün yan yana */
@media (min-width: 768px) and (max-width: 991px) {
    .cat-detail-products-box {
        width: 31.33%;
        margin: 1%;
    }
    
    .cat-detail-products-box-big {
        width: 31.33%;
        margin: 1%;
    }
    
    .cat-detail-products-box {
        margin-bottom: 20px;
    }
    
    .cat-detail-products-box-h {
        font-size: 13px;
        min-height: 36px;
        line-height: 1.3;
    }
    
    .cat-detail-products-box-fiyat {
        font-size: 14px;
        padding: 0 10px 10px 10px;
    }
    
    .cat-detail-products-box-info {
        padding: 0 10px;
    }
    
    .pcName {
        font-size: 13px;
        line-height: 1.3;
    }
    
    .pcPrices {
        font-size: 14px;
    }
}

/* Small tablet / large mobile - 2 ürün yan yana */
@media (min-width: 576px) and (max-width: 767px) {
    .cat-detail-products-box {
        width: 48%;
        margin: 1%;
    }
    
    .cat-detail-products-box-big {
        width: 48%;
        margin: 1%;
    }
}

/* =========================================
   HOMEPAGE SLIDER RESPONSIVE
   ========================================= */

@media (min-width: 1600px) {
    .introBlock .container-fluid,
    .slider-main-area {
        padding: 0 5%;
    }
}

@media (min-width: 1920px) {
    .introBlock .container-fluid,
    .slider-main-area {
        padding: 0 8%;
    }
}

/* Tablet slider */
@media (min-width: 768px) and (max-width: 991px) {
    .introBlock .container-fluid {
        padding: 0 15px;
    }
    
    .slider-categories {
        display: none;
    }
}

/* =========================================
   FEATURED PRODUCTS SLIDER RESPONSIVE
   ========================================= */

@media (min-width: 1600px) {
    .featured-products-slider .slick-slide {
        padding: 0 15px;
    }
    
    .featured-slider-container {
        padding: 0 5%;
    }
}

@media (min-width: 1920px) {
    .featured-slider-container {
        padding: 0 8%;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .featured-products-slider .slick-slide {
        padding: 0 8px;
    }
}

/* =========================================
   FOOTER RESPONSIVE
   ========================================= */

/* Footer base fix */
.footer-module-inside-area {
    width: 100%;
    max-width: 1280px;
    padding: 0 20px;
    box-sizing: border-box;
}

@media (min-width: 1600px) {
    .footer-module-inside-area {
        max-width: 1500px;
        margin: 0 auto;
    }
    
    .footer-1-area {
        width: 450px;
    }
    
    .footer-4-area {
        width: 200px;
    }
}

@media (min-width: 1920px) {
    .footer-module-inside-area {
        max-width: 1700px;
    }
    
    .footer-1-area {
        width: 500px;
    }
    
    .footer-4-area {
        width: 220px;
    }
}

/* Tablet footer */
@media (min-width: 768px) and (max-width: 991px) {
    .footer-module-inside-area {
        flex-wrap: wrap;
        max-width: 100%;
        padding: 0 30px;
    }
    
    .footer-module-box {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 30px;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    .footer-module-box.footer-1-area {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        text-align: center;
        margin-bottom: 40px;
    }
    
    .footer-1-area .footer-module-box-logo {
        display: flex;
        justify-content: center;
    }
    
    .footer-1-area .footer-module-box-telif {
        width: 100%;
        text-align: center;
        margin: 0 auto 20px auto;
        max-width: 500px;
    }
    
    .footer-module-box-social {
        justify-content: center;
    }
    
    .footer-iletisim-bilgileri {
        text-align: center;
    }
    
    .footer-4-area {
        width: auto;
    }
    
    .footer-module-header-text {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    .footer-module-links-div a {
        font-size: 12px;
        margin-bottom: 8px;
    }
}

/* Small tablet / landscape mobile */
@media (min-width: 576px) and (max-width: 767px) {
    .footer-module-inside-area {
        padding: 0 20px;
    }
    
    .footer-module-box {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 25px;
        padding: 0 10px;
    }
    
    .footer-module-box.footer-1-area {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        text-align: center;
    }
    
    .footer-1-area {
        width: 100%;
    }
    
    .footer-4-area {
        width: auto;
    }
}

/* Mobile footer */
@media (max-width: 575px) {
    .footer-module-inside-area {
        padding: 0 15px;
        flex-direction: column;
    }
    
    .footer-module-box {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        margin-bottom: 25px;
        text-align: center;
    }
    
    .footer-1-area {
        width: 100%;
    }
    
    .footer-4-area {
        width: 100%;
    }
    
    .footer-module-box-social {
        justify-content: center;
    }
    
    .footer-module-box-logo {
        display: flex;
        justify-content: center;
    }
    
    .footer-module-box-telif {
        width: 100%;
        text-align: center;
    }
    
    .footer-iletisim-bilgileri {
        text-align: center;
    }
}

/* =========================================
   TRUST/INFO BOX RESPONSIVE
   ========================================= */

@media (min-width: 1600px) {
    .ticaret-kutulari-inside {
        max-width: 1500px;
        margin: 0 auto;
    }
    
    .ticaret-kutu-box {
        padding: 25px 30px;
    }
}

@media (min-width: 1920px) {
    .ticaret-kutulari-inside {
        max-width: 1700px;
    }
}

/* Tablet info box */
@media (min-width: 768px) and (max-width: 991px) {
    .ticaret-kutulari-inside {
        flex-wrap: wrap;
    }
    
    .ticaret-kutu-box {
        flex: 0 0 50%;
        max-width: 50%;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        padding: 20px;
    }
    
    .ticaret-kutu-box:nth-child(odd) {
        border-right: 1px solid #e0e0e0;
    }
    
    .ticaret-kutu-box:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

/* =========================================
   PRODUCT DETAIL PAGE RESPONSIVE
   ========================================= */

@media (min-width: 1600px) {
    .urun-detay-main {
        max-width: 1500px;
        margin: 0 auto;
    }
}

@media (min-width: 1920px) {
    .urun-detay-main {
        max-width: 1700px;
    }
}

/* Tablet product detail */
@media (min-width: 768px) and (max-width: 991px) {
    .urun-detay-main {
        padding: 20px;
    }
    
    .product-detail-image-area {
        margin-bottom: 30px;
    }
    
    .product-detail-info-area {
        padding-left: 0;
    }
}

/* =========================================
   CATEGORY PAGE RESPONSIVE
   ========================================= */

@media (min-width: 1600px) {
    .category-detail-main-div {
        max-width: 1500px;
        margin: 0 auto;
    }
}

@media (min-width: 1920px) {
    .category-detail-main-div {
        max-width: 1700px;
    }
}

/* Tablet kategori */
@media (min-width: 768px) and (max-width: 991px) {
    .category-sidebar {
        display: none;
    }
    
    .category-content {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .category-filter-mobile-btn {
        display: flex !important;
    }
}

/* =========================================
   CART/CHECKOUT RESPONSIVE
   ========================================= */

@media (min-width: 1600px) {
    .sepet-main-area,
    .checkout-main-area {
        max-width: 1500px;
        margin: 0 auto;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .sepet-main-area,
    .checkout-main-area {
        padding: 20px;
    }
    
    .sepet-table-responsive {
        overflow-x: auto;
    }
}

/* =========================================
   SLIDER CATEGORIES RESPONSIVE
   ========================================= */

@media (min-width: 1600px) {
    .slider-categories {
        width: 280px;
    }
    
    .categories-menus {
        width: 280px;
    }
    
    .categories-menus > li > .categories_st_side,
    .categories-menus > li > .categories_mega_side {
        left: 280px;
    }
}

/* =========================================
   MODAL RESPONSIVE - Large screens
   ========================================= */

@media (min-width: 1600px) {
    .modal-xl {
        max-width: 1400px;
    }
    
    .modal-lg {
        max-width: 1000px;
    }
}

/* =========================================
   TYPOGRAPHY RESPONSIVE
   ========================================= */

@media (min-width: 1600px) {
    body {
        font-size: 16px;
    }
    
    h1, .h1 {
        font-size: 2.8rem;
    }
    
    h2, .h2 {
        font-size: 2.2rem;
    }
    
    h3, .h3 {
        font-size: 1.8rem;
    }
}

@media (min-width: 1920px) {
    body {
        font-size: 17px;
    }
    
    h1, .h1 {
        font-size: 3rem;
    }
    
    h2, .h2 {
        font-size: 2.4rem;
    }
}

/* Tablet typography */
@media (min-width: 768px) and (max-width: 991px) {
    body {
        font-size: 14px;
    }
    
    h1, .h1 {
        font-size: 1.8rem;
    }
    
    h2, .h2 {
        font-size: 1.5rem;
    }
    
    h3, .h3 {
        font-size: 1.3rem;
    }
}

/* =========================================
   BUTTONS RESPONSIVE
   ========================================= */

@media (min-width: 1600px) {
    .btn-lg {
        padding: 15px 35px;
        font-size: 18px;
    }
}

/* Tablet buttons */
@media (min-width: 768px) and (max-width: 991px) {
    .btn {
        padding: 8px 15px;
        font-size: 13px;
    }
}

/* =========================================
   FORM ELEMENTS RESPONSIVE
   ========================================= */

@media (min-width: 1600px) {
    .form-control {
        padding: 12px 18px;
        font-size: 16px;
    }
    
    .form-control-lg {
        padding: 15px 20px;
        font-size: 18px;
    }
}

/* =========================================
   IMAGE RESPONSIVE
   ========================================= */

img {
    max-width: 100%;
    height: auto;
}

/* =========================================
   MOBILE AND SAFARI BASE FIXES
   ========================================= */
html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

img,
video,
iframe,
embed,
object {
    max-width: 100%;
}

@media (max-width: 767px) {
    .container,
    .container-fluid {
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .row {
        margin-left: -7px;
        margin-right: -7px;
    }

    [class*="col-"] {
        padding-left: 7px;
        padding-right: 7px;
    }

    input,
    select,
    textarea,
    .form-control,
    .custom-select {
        max-width: 100%;
    }

    .table-responsive,
    .table-responsive-tablet {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive > table,
    .table-responsive-tablet > table {
        min-width: 600px;
    }

    .modal-dialog {
        width: auto;
        max-width: calc(100% - 20px);
        margin: 10px auto;
    }

    .btn,
    button,
    input[type="submit"] {
        max-width: 100%;
        white-space: normal;
    }

    .footer-module-inside-area,
    .ticaret-kutulari-inside {
        width: 100%;
        max-width: 100%;
    }
}

/* =========================================
   SECTIONS SPACING RESPONSIVE
   ========================================= */

@media (min-width: 1600px) {
    section,
    .section-padding {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media (min-width: 1920px) {
    section,
    .section-padding {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

/* Tablet spacing */
@media (min-width: 768px) and (max-width: 991px) {
    section,
    .section-padding {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* =========================================
   SPECIAL OFFERS PAGE RESPONSIVE
   ========================================= */

@media (min-width: 1600px) {
    .special-offers-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 1920px) {
    .special-offers-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .special-offers-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

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

@media (min-width: 1600px) {
    .breadcrumb-area {
        padding: 20px 0;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .breadcrumb {
        font-size: 12px;
        padding: 10px 0;
    }
}

/* =========================================
   TABLE RESPONSIVE
   ========================================= */

@media (min-width: 768px) and (max-width: 991px) {
    .table-responsive-tablet {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =========================================
   INSTAGRAM FEED RESPONSIVE
   ========================================= */

@media (min-width: 1600px) {
    .instagram-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .instagram-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =========================================
   ABOUT PAGE STORY RESPONSIVE
   ========================================= */

@media (min-width: 1600px) {
    .stories-container {
        gap: 20px;
    }
    
    .story-item {
        width: 90px;
        height: 90px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .stories-container {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 15px;
    }
    
    .story-item {
        flex-shrink: 0;
    }
}

/* =========================================
   UTILITY CLASSES FOR RESPONSIVE
   ========================================= */

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .hide-tablet {
        display: none !important;
    }
    
    .show-tablet {
        display: block !important;
    }
    
    .show-tablet-flex {
        display: flex !important;
    }
}

/* Show on large screens only */
@media (min-width: 1600px) {
    .show-xxl {
        display: block !important;
    }
    
    .hide-xxl {
        display: none !important;
    }
}

/* Text alignment responsive */
@media (min-width: 768px) and (max-width: 991px) {
    .text-tablet-center {
        text-align: center !important;
    }
    
    .text-tablet-left {
        text-align: left !important;
    }
}

/* Margin/Padding utilities for tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .mt-tablet-0 { margin-top: 0 !important; }
    .mb-tablet-0 { margin-bottom: 0 !important; }
    .pt-tablet-0 { padding-top: 0 !important; }
    .pb-tablet-0 { padding-bottom: 0 !important; }
    .p-tablet-3 { padding: 1rem !important; }
    .m-tablet-3 { margin: 1rem !important; }
}

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

@media print {
    .header-main-div,
    .footer-module-main-div,
    .ticaret-kutulari-main,
    .fixed-foot-navigation {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
    }
    
    .container {
        max-width: 100% !important;
    }
}