@import url("responsive/mobile.css"); @import url("responsive/1152x864.css"); @import url("responsive/1280x1024.css");  @media screen and (max-width:767px) and (min-width:0) {  .button-1x {font-size: 11px;padding: 4px 10px;font-weight: normal !important;}  .button-2x {font-size: 12px;padding: 5px 25px;}  .button-3x {font-size: 13px;padding: 5px 25px;}  .button-4x {font-size: 13px;padding: 5px 25px;}  .button-5x {font-size: 13px;padding: 5px 40px;font-weight: 200;}  }  @font-face {  font-family: "Ionicons";font-display: swap ;font-weight: normal;  font-style: normal;  src: url("ionicons.eot");  src: url("ionicons.eot") format("embedded-opentype"), url("ionicons.ttf") format("truetype"), url("ionicons.woff") format("woff"), url("ionicons.svg") format("svg");  }  .ion-arrow-down-b:before, .ion-ios-checkmark-outline:before, .ion-bag:before, .ion-ios-location:before, .ion-ios-pricetags:before, .ion-ios-information-outline:before, .ion-ios-close-empty:before, .ion-calendar:before,.ion-close-round:before, .ion-ios-locked:before,.ion-ios-plus-empty:before, .ion-eye:before, .ion-backspace:before, .ion-alert-circled:before, .ion-heart:before, .ion-navicon-round:before{display: inline-block;font-family: "Ionicons";speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;text-rendering: auto;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}  .ion-navicon-round:before {content: "\f20d";}  .ion-arrow-down-b:before {content: "\f104";}  .ion-ios-checkmark-outline:before {content: "\f3fe";}  .ion-bag:before {content: "\f110";}  .ion-ios-location:before {content: "\f456";}  .ion-ios-pricetags:before {content: "\f48f";}  .ion-ios-close-empty:before {content: "\f404";}  .ion-ios-information-outline:before {content: "\f44c";}  .ion-calendar:before {content: "\f117";}  .ion-backspace:before {content: "\f3bf";}  .ion-alert-circled:before {content: "\f100";}  .ion-ios-locked:before {content: "\f458";}  .ion-heart:before {content: "\f141";}  .ion-eye:before {content: "\f133";}.ion-close-round:before{content:"\f129"}.ion-ios-plus-empty:before{content:"\f489"}

/* ============================================
   SAFARI / iOS RESPONSIVE FIX
   ============================================ */
/* Safari Flexbox Fix */
.d-flex {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.flex-wrap {
    -webkit-flex-wrap: wrap !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
}

.flex-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}

.align-items-center {
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

.justify-content-center {
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.justify-content-between {
    -webkit-box-pack: justify !important;
    -webkit-justify-content: space-between !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

/* Safari gap property fix */
.gap-1, .gap-2, .gap-3, .gap-4, .gap-5 {
    gap: inherit;
}

/* iOS Safari 100vh fix */
@supports (-webkit-touch-callout: none) {
    body {
        min-height: -webkit-fill-available;
    }
    
    .full-height, .vh-100 {
        min-height: -webkit-fill-available;
    }
}

/* Safari smooth scrolling */
html {
    -webkit-overflow-scrolling: touch;
}

/* Safari input zoom fix */
@media (max-width: 767px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

@media screen and (max-width:1700px) and (min-width:1500px) {
    .slider-main-div-in{
        width: 1450px !important;
    }
}

@media screen and (max-width:1499px) and (min-width:1400px) {
    .slider-main-div-in{
        width: 1350px !important;
    }
}

@media screen and (max-width:1370px) and (min-width:1330px) {
    .slider-main-div-in{
        width: 1320px !important;
    }
}

@media screen and (max-width:1369px) and (min-width:1250px) {
    .kayan-banner-main-inside,
    .slider-main-div-in{
        width: 98% !important;
    }
}
@media screen and (max-width:1155px) and (min-width:999px) {
    .kayan-banner-main-inside{
        width: 93% !important;
    }
}
@media screen and (max-width:766px) and (min-width:0) {
    .slider_text_inside_box_h{
        font-size: 22px !important ;
        line-height: 25px !important;
        margin-bottom: 5px !important;
    }
    .slider_text_inside_box_s{
        font-size: 16px !important ;
        line-height: 19px !important;
        margin-bottom: 10px !important;
    }
    .slider_text_inside_box_button{
        margin-top: 15px !important;
    }
    .taksitler-boxes-new{
        width: 100%;
    }
}

/* Mobile cihazlarda ürün kutusu düzenlemeleri */
@media screen and (max-width:767px) and (min-width:0) {
    
    /* Mobilde fotoğraf üstündeki tüm ikon butonları gizle */
    .cat-detail-products-box-cart-1 {
        display: none !important;
    }
    
    /* Mobilde alt kısımdaki favori ve karşılaştırma ikonlarını gizle */
    .cat-detail-products-box-cart-2 .product-fav-go,
    .cat-detail-products-box-cart-2 .product-fav-del,
    .cat-detail-products-box-cart-2 .product-compare,
    .cat-detail-products-box-cart-2 .product-compare-exit,
    .cat-detail-products-box-cart-2 .compare-href,
    .cat-detail-products-box-cart-2 a {
        display: none !important;
    }
    
    /* Sepete ekle butonunu tam genişlik yap ve sadece yazı göster */
    .cat-detail-products-box-cart-2 {
        display: flex;
        justify-content: center;
        padding: 10px;
    }
    
    .cat-detail-products-box-cart-2 form {
        width: 100%;
    }
    
    .cat-detail-products-box-cart-2 button[name="addtocart"],
    .cat-detail-products-box-cart-2 form button {
        width: 100%;
        padding: 12px 15px;
        font-size: 13px;
        background: var(--jov-primary, #1a3a5c);
        color: #fff;
        border: none;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.5px;
    }
    
    /* Sepete ekle butonundaki ikonu gizle, sadece yazı kalsın */
    .cat-detail-products-box-cart-2 button i,
    .cat-detail-products-box-cart-2 form button i {
        display: none !important;
    }
}

/* =========================================
   KATEGORİ SAYFASI - TABLET RESPONSIVE
   (768px - 991px)
   ========================================= */
@media (min-width: 768px) and (max-width: 991px) {
    /* Kategori sidebar'ı gizle */
    .cat-detail-main-div .sidebar,
    .cat-detail-left-area,
    .category-sidebar {
        display: none;
    }
    
    /* Ürün grid tam genişlik */
    .cat-detail-right-area,
    .category-content {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    /* 3 ürün yan yana */
    .cat-detail-products-box {
        width: 31.33%;
        margin: 1%;
    }
    
    .cat-detail-products-box-big {
        width: 31.33%;
        margin: 1%;
    }
    
    .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;
    }
    
    .pcName {
        font-size: 13px;
        line-height: 1.3;
    }
    
    .pcPrices {
        font-size: 14px;
    }
    
    /* Filtre butonu tablet'te göster */
    .category-filter-mobile-btn {
        display: flex !important;
    }
}

/* =========================================
   KATEGORİ SAYFASI - BÜYÜK EKRANLAR
   (1400px+)
   ========================================= */
@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;
    }
    
    .cat-detail-main-div .cat-detail-products-box {
        padding: 15px;
    }
}

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

/* =========================================
   FOOTER - TABLET RESPONSIVE
   ========================================= */
@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-module-box-social {
        justify-content: center;
    }
    
    .footer-iletisim-bilgileri {
        text-align: center;
    }
}

/* =========================================
   SEPET/ÖDEME - TABLET RESPONSIVE  
   ========================================= */
/* Sadece küçük tablet ve mobilde alt alta */
@media (max-width: 767px) {
    .teslimat-main-div {
        flex-direction: column;
    }
    
    .teslimat-sol-taraf,
    .teslimat-sag-taraf {
        width: 100%;
        max-width: 100%;
    }
    
    .teslimat-sag-taraf {
        margin-top: 30px;
    }
}

/* =========================================
   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;
    }
}

/* =========================================
   SMALL TABLET / LARGE MOBILE - 2 ÜRÜN YAN YANA
   (576px - 767px)
   ========================================= */
@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%;
    }
}

/* =========================================
   FOOTER - BÜYÜK EKRANLAR
   ========================================= */

/* 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;
    }
}

/* 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;
    }
}

/* =========================================
   TİCARET KUTULARI 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;
    }
}

/* =========================================
   ÜRÜN DETAY SAYFASI 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;
    }
}

/* =========================================
   KATEGORİ SAYFASI - BÜYÜK EKRANLAR
   ========================================= */

@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;
    }
}

/* =========================================
   SEPET/ÖDEME - BÜYÜK EKRANLAR
   ========================================= */

@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 KATEGORİLER 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
   ========================================= */

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

/* =========================================
   BUTTON 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;
}

/* =========================================
   ÖZEL TEKLİFLER SAYFASI 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);
    }
}

/* =========================================
   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;
    }
}

/* =========================================
   STICKY HEADER - WEB & MOBİL
   ========================================= */

/* Header sticky yapısı */
.header-main-div {
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Scroll edildiğinde gölge efekti */
.header-main-div.scrolled {
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

/* Desktop header için */
.desktop-header-area {
    background: inherit;
}

/* Mobil header sticky */
.header-mobile-view {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: inherit;
}

/* Mobil bar sticky */
.web-header-mobile-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Body padding - header yüksekliği kadar boşluk (isteğe bağlı) */
/* Eğer header içerik üstüne binerse bu kuralı aktif edin */
/*
body.has-sticky-header {
    padding-top: 80px;
}

@media (max-width: 991px) {
    body.has-sticky-header {
        padding-top: 60px;
    }
}
*/

/* Sticky header animasyonu - scroll up/down */
.header-main-div.header-hidden {
    transform: translateY(-100%);
}

.header-main-div.header-visible {
    transform: translateY(0);
}

/* Top header (üst bar) - sticky header'da gizlenebilir */
.header-main-div.scrolled .topheader-desktop-main-div,
.header-main-div.scrolled .topheader-html-main {
    display: none;
}

/* Sticky header compact mod - scroll edildiğinde küçült */
.header-main-div.scrolled .header-desktop-main-div-in {
    min-height: 60px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.header-main-div.scrolled .header-desktop-logo-div img {
    max-height: 45px;
    transition: max-height 0.3s ease;
}

/* Mobil sticky compact */
@media (max-width: 991px) {
    .header-main-div.scrolled .header-mobile-view {
        padding: 5px 0;
    }
}