/* Custom styles for Toptanci website */

/* Main Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden; /* Yatay kaydırmayı engelle */
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive iframe */
.responsive-iframe-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
}

.responsive-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Responsive tables */
.responsive-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Slider */
.main-slider {
    position: relative;
    overflow: hidden;
}

.slide {
    transition: opacity 0.5s ease;
}

/* Product Cards */
.product-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

.product-card .discount-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #EF4444;
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.75rem;
}

/* Ürün kartı iyileştirmeleri */
.product-detail-link {
    position: relative;
    display: block;
}

.product-detail-link img {
    transition: transform 0.3s ease;
}

.product-detail-link:hover img {
    transform: scale(1.05);
}

/* Ürün kartı etiketleri için z-index ayarı */
.product-detail-link .absolute {
    z-index: 10;
}

/* Ürün açıklaması için scroll */
.product-description {
    max-height: 2rem;
    overflow: hidden;
    line-height: 1.2;
}

/* Responsive ürün kartı ayarları */
@media (max-width: 640px) {
    /* Mobil ürün kartları */
    .swiper-slide .bg-white.rounded-lg.shadow-md {
        height: 260px !important;
        max-height: 260px !important;
    }
    
    .swiper-slide .product-detail-link {
        height: 140px !important;
        max-height: 140px !important;
    }
    
    .swiper-slide .p-4 {
        padding: 10px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    
    .swiper-slide .product-description {
        max-height: 1.2rem !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        overflow: hidden !important;
        margin-bottom: 4px !important;
    }
    
    .swiper-slide h2 {
        font-size: 12px !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
        max-height: 2.4rem !important;
        overflow: hidden !important;
    }
    
    .swiper-slide .text-red-600 {
        font-size: 13px !important;
    }
    
    .swiper-slide .bg-blue-600 {
        padding: 8px 6px !important;
        font-size: 11px !important;
        margin-top: 4px !important;
    }
    
    .swiper-slide .text-center {
        margin-bottom: 4px !important;
    }
}

/* Tablet görünümü için düzeltmeler - 641px ile 768px arası */
@media (min-width: 641px) and (max-width: 768px) {
    /* Tablet ürün kartları - daha spesifik selectors */
    .grid .bg-white.rounded-lg.shadow-md,
    .swiper-slide .bg-white.rounded-lg.shadow-md {
        height: 320px !important;
        max-height: 320px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Resim container'ı için daha spesifik selector */
    .grid .product-detail-link.block,
    .swiper-slide .product-detail-link.block {
        height: 180px !important;
        max-height: 180px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    /* Resim wrapper div için ayarlar */
    .grid .product-detail-link .w-full.h-full,
    .swiper-slide .product-detail-link .w-full.h-full {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        width: 100% !important;
    }
    
    /* Gerçek resim için ayarlar */
    .grid .product-detail-link img,
    .swiper-slide .product-detail-link img {
        max-width: 90% !important;
        max-height: 90% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
    
    /* İçerik alanı ayarları */
    .grid .bg-white .p-4,
    .swiper-slide .bg-white .p-4 {
        padding: 12px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        min-height: 0 !important;
    }
    
    /* Ürün açıklaması */
    .grid .product-description,
    .swiper-slide .product-description {
        max-height: 2.4rem !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        overflow: hidden !important;
        margin-bottom: 8px !important;
    }
    
    /* Ürün başlığı */
    .grid .bg-white h3,
    .grid .bg-white h2,
    .swiper-slide .bg-white h3,
    .swiper-slide .bg-white h2 {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
        max-height: 3.9rem !important;
        overflow: hidden !important;
        font-weight: 600 !important;
    }
    
    /* Fiyat renkleri */
    .grid .text-red-600,
    .swiper-slide .text-red-600 {
        font-size: 15px !important;
        font-weight: 700 !important;
    }
    
    /* Butonlar */
    .grid .bg-blue-600,
    .swiper-slide .bg-blue-600 {
        padding: 10px 8px !important;
        font-size: 12px !important;
        margin-top: 6px !important;
    }
    
    /* Text center elementleri */
    .grid .text-center,
    .swiper-slide .text-center {
        margin-bottom: 6px !important;
    }
    
    /* Grid düzenlemesi için genel ayarlar */
    .grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
    }
    
    .grid-cols-5 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    .grid-cols-7 {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    /* İndirim etiketleri */
    .discount-badge,
    .absolute.bg-red-500,
    .absolute.bg-blue-500 {
        font-size: 10px !important;
        padding: 3px 5px !important;
        border-radius: 4px !important;
    }
    
    /* Stok etiketleri */
    .absolute.bg-green-500,
    .absolute.bg-red-600 {
        font-size: 10px !important;
        padding: 3px 5px !important;
    }
    
    /* Fiyat yazı boyutları */
    .text-lg {
        font-size: 15px !important;
    }
    
    .text-xl {
        font-size: 17px !important;
    }
    
    /* Buton padding ayarları */
    .px-4 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .py-2 {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    
    /* Truncate ve overflow ayarları */
    .truncate {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Hover efektleri */
    .product-detail-link:hover img {
        transform: scale(1.03) !important;
    }
}

/* Tablet görünümü için acil resim düzeltmesi */
@media (min-width: 641px) and (max-width: 768px) {
    /* Ana resim container - h-60 sınıfını override et */
    .product-detail-link.h-60 {
        height: 180px !important;
        min-height: 180px !important;
    }
    
    /* Resim kendisi için garanti ayarlar */
    .product-detail-link img {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }
    
    /* Container relative position */
    .product-detail-link.relative {
        position: relative !important;
        display: block !important;
    }
    
    /* Flexbox override for image container */
    .bg-white.rounded-lg.shadow-md {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 300px !important;
    }
    
    /* Flex grow for content area */
    .p-4.flex-grow {
        flex: 1 !important;
    }
}

/* Mobile Menu */
@media (max-width: 768px) {
    .mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 20;
        background-color: #1E40AF;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    
    /* Mobil görünümde daha büyük dokunma alanları */
    .mobile-menu a {
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Mobil görünümde daha büyük butonlar */
    button, .btn-primary, input[type="submit"] {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
    
    /* Mobil için form elemanlarında daha büyük dokunma alanları */
    input, select, textarea {
        font-size: 16px; /* iOS'da zoom sorununu önlemek için */
        padding: 0.75rem;
    }
    
    /* Mobil görünümde metinleri küçültme */
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    /* Mobil görünümde kartlar arası boşluklar */
    .gap-6 {
        gap: 1rem;
    }
}

/* Forms */
.form-input {
    display: block;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.form-input:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.btn-primary {
    display: inline-block;
    background-color: #1E40AF;
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: #1E3A8A;
}

/* Utilities */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

/* Product card styling */
.product-card {
    transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Discount badge */
.discount-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ef4444;
    color: white;
    padding: 4px 8px;
    font-weight: bold;
    border-radius: 9999px;
    font-size: 0.75rem;
}

/* Slider arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    color: #1e3a8a;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.slider-arrow:hover {
    background-color: #1e3a8a;
    color: white;
}

.slider-arrow.prev {
    left: 10px;
}

.slider-arrow.next {
    right: 10px;
}

/* Küçük ekranlar için slider içeriğini ayarla */
@media (max-width: 640px) {
    .main-slider .slide h2 {
        font-size: 1.5rem;
    }
    
    .main-slider .slide p {
        font-size: 0.875rem;
    }
    
    .slider-arrow {
        width: 30px;
        height: 30px;
    }
}

/* Custom animation for slider */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

/* Custom styling for form inputs */
input:focus, select:focus, textarea:focus {
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.2);
}

/* Admin panel specific styles */
.admin-sidebar {
    min-height: calc(100vh - 64px);
}

.admin-content {
    min-height: calc(100vh - 64px);
}

.admin-table th, .admin-table td {
    padding: 0.75rem 1rem;
}

.admin-table tbody tr:hover {
    background-color: #f3f4f6;
}

/* Ekran adaptiflikleri için stil eklentileri */
@media (max-width: 1023px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .grid {
        row-gap: 1.5rem;
    }
    
    .py-8 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    
    .py-12 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* Ekran okuyucular için yardımcı sınıflar */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Mobil menü için ek stiller */
.mobile-menu {
    display: none;
    width: 100%;
    background-color: #1E40AF;
    z-index: 30;
}

.mobile-menu.block {
    display: block;
}

.mobile-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu a:hover {
    background-color: #1E3A8A;
}

/* Mobil görünümde dropdown menüsü */
@media (max-width: 768px) {
    .mobile-menu-button {
        display: block;
    }
    
    .mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 50;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    
    /* Navbar'ın position özelliğini relative yap ki mobil menü doğru konumda olsun */
    nav.bg-blue-800 {
        position: relative;
    }
}

/* Modal Styles */
#productModal {
    backdrop-filter: blur(4px);
}

#productModal .bg-black {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Product Description Scrollable Area */
.product-description {
    max-height: 200px !important; /* 10 satır yaklaşık yükseklik - daha erken scroll */
    overflow-y: auto !important;
    padding-right: 8px !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #c1c1c1 #f1f1f1 !important;
}

/* Custom Scrollbar for Product Description */
.product-description::-webkit-scrollbar {
    width: 6px !important;
}

.product-description::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 3px !important;
}

.product-description::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 3px !important;
}

.product-description::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
}

/* Firefox için scrollbar stilleri */
.product-description {
    scrollbar-width: thin !important;
    scrollbar-color: #c1c1c1 #f1f1f1 !important;
}

/* Hosting uyumluluğu için daha güçlü seçiciler */
#productModal .product-description::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

#productModal .product-description::-webkit-scrollbar-track {
    background: #f8f9fa !important;
    border-radius: 4px !important;
    border: 1px solid #e9ecef !important;
}

#productModal .product-description::-webkit-scrollbar-thumb {
    background: #6c757d !important;
    border-radius: 4px !important;
    border: 1px solid #495057 !important;
}

#productModal .product-description::-webkit-scrollbar-thumb:hover {
    background: #495057 !important;
}

#productModal .product-description::-webkit-scrollbar-corner {
    background: #f8f9fa !important;
}

/* Firefox için daha güçlü kurallar */
#productModal .product-description {
    scrollbar-width: thin !important;
    scrollbar-color: #6c757d #f8f9fa !important;
}

/* Modal responsive adjustments */
@media (max-width: 768px) {
    .product-description,
    #productModal .product-description,
    #productModalContent .product-description {
        max-height: 75px !important; /* 6 satır için daha kesin sınır (12px * 6 + padding = 75px) */
        font-size: 0.75rem !important; /* 12px - kompakt yazı */
        line-height: 12px !important; /* Çok kompakt line-height */
        padding: 2px !important; /* Minimal padding */
        overflow-y: auto !important; /* Scroll'u zorla aktif et */
        word-break: break-word !important; /* Uzun kelimeleri böl */
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        background-color: #f9fafb !important;
        margin-bottom: 16px !important;
    }
    
    /* Mobilde ürün modal başlığının yazı boyutunu küçült - Daha güçlü seçici */
    #productModal #productModalContent h2,
    #productModal .text-xl,
    #productModal .md\\:text-3xl {
        font-size: 1.125rem !important; /* 18px - daha küçük */
        line-height: 1.3 !important;
    }
    
    /* Modal genel yazı boyutlarını küçült */
    #productModal .text-2xl {
        font-size: 1.25rem !important;
    }
    
    #productModal .text-3xl {
        font-size: 1.5rem !important;
    }
    
    /* Modal kapatma butonu - TÜM CIHAZLAR İÇİN */
    #productModal button[onclick="closeProductDetails()"] {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        width: 40px !important;
        height: 40px !important;
        background-color: #ffffff !important;
        border: 3px solid #374151 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
        z-index: 100001 !important;
        transition: all 0.2s ease !important;
        color: #374151 !important;
        cursor: pointer !important;
        font-family: "Font Awesome 6 Free" !important;
    }
    
    #productModal button[onclick="closeProductDetails()"] i {
        font-size: 20px !important;
        color: #374151 !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }
    
    #productModal button[onclick="closeProductDetails()"]:hover {
        background-color: #f87171 !important;
        border-color: #dc2626 !important;
        transform: scale(1.1) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
    }
    
    #productModal button[onclick="closeProductDetails()"]:hover i {
        color: #ffffff !important;
    }
    
    #productModal button[onclick="closeProductDetails()"]:active {
        transform: scale(0.95) !important;
        background-color: #dc2626 !important;
    }
    
    /* Mobil cihazlarda kapatma butonu - DÜZELTİLMİŞ */
    @media (max-width: 640px) {
        #productModal button[onclick="closeProductDetails()"] {
            position: fixed !important;
            top: 15px !important;
            right: 15px !important;
            width: 44px !important;
            height: 44px !important;
            border-width: 4px !important;
            z-index: 999999 !important;
            background-color: #ffffff !important;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7) !important;
        }
        
        #productModal button[onclick="closeProductDetails()"] i {
            font-size: 22px !important;
            color: #374151 !important;
        }
        
        /* Modal container'ının z-index'ini de ayarla */
        #productModal {
            z-index: 999998 !important;
        }
        
        /* Modal content'in üst padding'ini artır */
        #productModalContent {
            padding-top: 60px !important;
        }
    }
    
    /* Tablet için özel ayarlar */
    @media (min-width: 641px) and (max-width: 1024px) {
        #productModal button[onclick="closeProductDetails()"] {
            top: 12px !important;
            right: 12px !important;
            width: 42px !important;
            height: 42px !important;
        }
        
        #productModal button[onclick="closeProductDetails()"] i {
            font-size: 21px !important;
        }
    }
}

/* Modal content max height to prevent overflow */
#productModalContent {
    max-height: 80vh;
    overflow-y: auto;
}

/* Ensure modal doesn't exceed viewport */
#productModal .bg-white {
    max-height: 85vh;
    overflow-y: auto;
}

/* Kategori sidebar'ı için padding ve boşluk ayarları */
.mobile-sidebar {
    padding-bottom: 60px !important; /* En altta boşluk alanı ekle */
}

/* Desktop'ta da sidebar'ın altında boşluk olsun */
@media (min-width: 1024px) {
    .mobile-sidebar {
        padding-bottom: 40px !important;
    }
}

/* Kategori listesi için ek boşluk */
.category-list {
    padding-bottom: 50px; /* Kategori listesinin altında ekstra boşluk */
}

/* Kategori sidebar scroll alanı iyileştirmesi */
#categoriesSidebar .space-y-1 {
    padding-bottom: 60px; /* Son kategoriden sonra 60px boşluk */
}

/* Mobil cihazlarda daha fazla boşluk */
@media (max-width: 1023px) {
    #categoriesSidebar .space-y-1 {
        padding-bottom: 80px !important; /* Mobilde daha fazla boşluk */
    }
}

/* Mobil Modal İyileştirmeleri - Çok Kompakt */
@media (max-width: 768px) {
    /* Modal boyutlandırması - daha küçük */
    #productModal .bg-white {
        max-width: 92vw !important;
        max-height: 80vh !important;
        margin: 2vh auto !important;
        border-radius: 10px !important;
    }
    
    /* Modal içerik alanı - minimal padding */
    #productModalContent {
        padding: 8px !important;
        max-height: calc(80vh - 16px) !important;
        overflow-y: auto !important;
    }
    
    /* Grid düzeni - daha az gap */
    #productModalContent .grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    /* Ürün resmi alanı - daha küçük */
    #productModalContent .main-product-image {
        height: 140px !important;
        object-fit: contain !important;
        padding: 4px !important;
    }
    
    /* Ürün başlığı - daha küçük */
    #productModalContent h2 {
        font-size: 0.95rem !important; /* 15px */
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        font-weight: 600 !important;
    }
    
    /* Ürün açıklaması - çok kompakt */
    #productModalContent .product-description {
        max-height: 80px !important;
        overflow-y: auto !important;
        font-size: 0.75rem !important; /* 12px */
        line-height: 1.3 !important;
        padding: 6px !important;
        margin-bottom: 10px !important;
        background-color: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
    }
    
    /* Stok durumu - minimal margin */
    #productModalContent .my-2 {
        margin: 6px 0 !important;
    }
    
    /* Stok badge'i küçültme */
    #productModalContent .my-2 span {
        font-size: 0.7rem !important; /* 11px */
        padding: 3px 6px !important;
    }
    
    /* Fiyat alanı - çok minimal margin */
    #productModalContent .mb-4:has(.text-2xl) {
        margin-bottom: 6px !important;
    }
    
    /* Fiyat yazı boyutları - çok küçültülmüş */
    #productModalContent .text-2xl {
        font-size: 1.1rem !important; /* 18px */
    }
    
    #productModalContent .text-3xl {
        font-size: 1.3rem !important; /* 21px */
    }
    
    /* Eskì fiyat çizgili - küçük */
    #productModalContent .line-through {
        font-size: 0.9rem !important; /* 14px */
    }
    
    /* İndirim etiketleri - mini */
    #productModalContent .absolute .inline-block {
        font-size: 0.65rem !important; /* 10px */
        padding: 1px 4px !important;
        margin-bottom: 2px !important;
    }
    
    /* Fiyat altı bilgi texti - minimal spacing */
    #productModalContent .text-xs {
        font-size: 0.65rem !important; /* 10px */
        margin-top: 2px !important;
        margin-bottom: 4px !important;
    }
    
    #productModalContent .text-sm {
        font-size: 0.7rem !important; /* 11px */
        margin-top: 2px !important;
        margin-bottom: 4px !important;
    }
    
    /* Fiyat satırları arasındaki boşlukları minimize et */
    #productModalContent .flex:has(.text-2xl),
    #productModalContent .flex:has(.text-3xl) {
        margin-bottom: 2px !important;
    }
    
    /* "Size Özel Fiyat" gibi metinlerin margin'ını küçült */
    #productModalContent .mt-1,
    #productModalContent .mt-2 {
        margin-top: 2px !important;
    }
    
    /* Fiyat bölümünün genel spacing'i */
    #productModalContent .mb-6 {
        margin-bottom: 8px !important;
    }
    
    /* Sadece adet seçimi için minimal düzenleme */
    #productModalContent input#product-quantity {
        width: 40px !important;
        font-size: 0.75rem !important;
        padding: 4px !important;
        height: 28px !important;
    }
    
    #productModalContent label[for="quantity"] {
        font-size: 0.75rem !important;
    }
    
    /* Adet +/- butonları */
    #productModalContent button[onclick*="quantity"] {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
        height: 28px !important;
    }
    
    /* Mobilde fiyat ve adet yan yana düzeni - basit seçici */
    #productModalContent div[class*="flex"][class*="flex-col"][class*="md:flex-row"] {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }
    
    /* Fiyat alanı - flex-1 sınıfını hedefle */
    #productModalContent div[class*="flex-1"] {
        flex: 1 !important;
        min-width: 0 !important;
        margin-right: 8px !important;
    }
    
    /* Adet seçimi container'ı - daha spesifik */
    #productModalContent div[class*="flex"][class*="items-center"]:has(label[for="quantity"]) {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    /* Sepete ekle butonu - çok küçük */
    #productModalContent .bg-green-500,
    #productModalContent .bg-gray-400 {
        padding: 8px 12px !important;
        font-size: 0.75rem !important; /* 12px */
        font-weight: 600 !important;
        border-radius: 6px !important;
        height: 36px !important;
    }
    
    /* Icon boyutları küçültme */
    #productModalContent .fas {
        font-size: 0.75rem !important;
    }
    
    /* Alt kısım için minimal margin */
    #productModalContent .mt-auto {
        margin-top: 10px !important;
    }
    
    /* Scrollbar daha ince */
    #productModalContent .product-description::-webkit-scrollbar {
        width: 3px !important;
    }
    
    #productModalContent .product-description::-webkit-scrollbar-thumb {
        background: #cbd5e0 !important;
        border-radius: 1px !important;
    }
    
    /* Uyarı mesajları - mini */
    #productModalContent .bg-red-100 {
        padding: 6px 8px !important;
        font-size: 0.65rem !important; /* 10px */
        margin-bottom: 8px !important;
    }
    
    /* Resim container'ının border'ını incelt */
    #productModalContent .border {
        border-width: 1px !important;
    }
    
    /* Space-y sınıflarını minimize et */
    #productModalContent .space-y-2 > * + * {
        margin-top: 3px !important;
    }
    
    #productModalContent .space-y-4 > * + * {
        margin-top: 4px !important;
    }
    
    /* Flex column arasındaki boşlukları minimize et */
    #productModalContent .flex-col > * + * {
        margin-top: 4px !important;
    }
    
    /* Ana div'ler arasındaki boşlukları azalt */
    #productModalContent > div > div {
        margin-bottom: 4px !important;
    }
    
    /* Modal'ın genel yüksekliğini biraz daha azalt */
    #productModal .bg-white {
        max-height: 78vh !important;
    }
    
    #productModalContent {
        max-height: calc(78vh - 16px) !important;
    }
}

/* Çok küçük ekranlar için (iPhone SE, vb.) - Ultra Kompakt */
@media (max-width: 375px) {
    #productModal .bg-white {
        max-width: 95vw !important;
        max-height: 75vh !important;
        margin: 1vh auto !important;
    }
    
    #productModalContent {
        padding: 6px !important;
        max-height: calc(75vh - 12px) !important;
    }
    
    /* Resim daha küçük */
    #productModalContent .main-product-image {
        height: 120px !important;
    }
    
    /* Başlık mini */
    #productModalContent h2 {
        font-size: 0.85rem !important; /* 14px */
        margin-bottom: 6px !important;
    }
    
    /* Açıklama daha küçük */
    #productModalContent .product-description {
        max-height: 60px !important;
        font-size: 0.65rem !important; /* 10px */
        padding: 4px !important;
        margin-bottom: 8px !important;
    }
    
    /* Fiyatlar mini */
    #productModalContent .text-2xl {
        font-size: 0.95rem !important; /* 15px */
    }
    
    #productModalContent .text-3xl {
        font-size: 1.1rem !important; /* 18px */
    }
    
    /* Eski fiyat */
    #productModalContent .line-through {
        font-size: 0.75rem !important; /* 12px */
    }
    
    /* Adet input ve butonlar */
    #productModalContent input[type="number"] {
        width: 35px !important;
        height: 24px !important;
        font-size: 0.65rem !important;
    }
    
    #productModalContent .flex button {
        padding: 1px 4px !important;
        height: 24px !important;
        font-size: 0.65rem !important;
    }
    
    /* Sepete ekle butonu mini */
    #productModalContent .bg-green-500,
    #productModalContent .bg-gray-400 {
        padding: 6px 8px !important;
        font-size: 0.65rem !important; /* 10px */
        height: 32px !important;
    }
    
    /* Stok badge mini */
    #productModalContent .my-2 span {
        font-size: 0.6rem !important; /* 9px */
        padding: 2px 4px !important;
    }
    
    /* Küçük ekranlarda daha minimal spacing */
    #productModalContent .mb-4:has(.text-2xl) {
        margin-bottom: 4px !important;
    }
    
    #productModalContent .mb-6 {
        margin-bottom: 6px !important;
    }
    
    /* Küçük ekranlarda daha küçük boyutlar */
    #productModalContent input#product-quantity {
        width: 35px !important;
        height: 26px !important;
        font-size: 0.7rem !important;
    }
    
    #productModalContent label[for="quantity"] {
        font-size: 0.7rem !important;
    }
    
    #productModalContent button[onclick*="quantity"] {
        height: 26px !important;
        font-size: 0.7rem !important;
        padding: 2px 6px !important;
    }
    
    #productModalContent .mt-auto {
        margin-top: 6px !important;
    }
    
    /* Fiyat altı metinler için minimal spacing */
    #productModalContent .text-xs,
    #productModalContent .text-sm {
        margin-top: 1px !important;
        margin-bottom: 2px !important;
    }
}

/* ÜRÜN AÇIKLAMASI BOŞLUK SORUNU DÜZELTMESİ - ACİL */

/* Product description wrapper'ın yarattığı gereksiz boşluğu kaldır */
.bestSellersSwiper .swiper-slide .product-description-wrapper,
.discountedSwiper .swiper-slide .product-description-wrapper {
    margin-bottom: 8px !important;
    max-height: 60px !important;
    overflow: hidden !important;
}

/* Product description için kompakt ayarlar */
.bestSellersSwiper .swiper-slide .product-description,
.discountedSwiper .swiper-slide .product-description {
    max-height: 40px !important;
    overflow: hidden !important;
    padding: 4px 6px !important;
    margin-bottom: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 4px !important;
    background-color: #f9fafb !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
}

/* P-4 container'ının spacing'ini minimize et */
.bestSellersSwiper .swiper-slide .p-4,
.discountedSwiper .swiper-slide .p-4 {
    padding: 8px !important;
    gap: 4px !important;
    min-height: 180px !important;
}

/* H-80 kart yüksekliğini override et */
.bestSellersSwiper .swiper-slide .h-80,
.discountedSwiper .swiper-slide .h-80 {
    height: 300px !important;
    max-height: 300px !important;
}

/* Mt-auto container'ının spacing'ini düzelt */
.bestSellersSwiper .swiper-slide .mt-auto,
.discountedSwiper .swiper-slide .mt-auto {
    margin-top: 8px !important;
    padding-top: 0 !important;
    min-height: 70px !important;
}

/* Başlık ile açıklama arasındaki boşluğu azalt */
.bestSellersSwiper .swiper-slide h2,
.discountedSwiper .swiper-slide h2 {
    margin-bottom: 4px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    max-height: 2.4rem !important;
}

/* Link container'ının margin'ını küçült */
.bestSellersSwiper .swiper-slide .p-4 > a,
.discountedSwiper .swiper-slide .p-4 > a {
    margin-bottom: 4px !important;
}

/* Fiyat container'ının margin'ını azalt */
.bestSellersSwiper .swiper-slide .text-center,
.discountedSwiper .swiper-slide .text-center {
    margin-bottom: 4px !important;
}

/* Button'ın üst margin'ını kaldır */
.bestSellersSwiper .swiper-slide button,
.discountedSwiper .swiper-slide button {
    margin-top: 0 !important;
}

/* Flex-grow ile alt alanda daha az alan kaplasın */
.bestSellersSwiper .swiper-slide .flex-grow,
.discountedSwiper .swiper-slide .flex-grow {
    flex-grow: 0.8 !important;
}

/* Ana Sayfa Slider İyileştirmeleri - DÜZELTME */
/* En Çok Satanlar ve İndirimli Ürünler Slider'ları için resim düzeltmeleri */

/* Swiper slide içindeki ürün kartları */
.bestSellersSwiper .swiper-slide,
.discountedSwiper .swiper-slide {
    height: auto !important;
}

.bestSellersSwiper .swiper-slide .bg-white,
.discountedSwiper .swiper-slide .bg-white {
    height: 300px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Slider'daki ürün resim container'ları */
.bestSellersSwiper .product-detail-link,
.discountedSwiper .product-detail-link {
    height: 140px !important;
    min-height: 140px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Slider'daki resim wrapper */
.bestSellersSwiper .product-detail-link .w-full.h-full,
.discountedSwiper .product-detail-link .w-full.h-full {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
    background-color: #f9fafb !important;
}

/* Slider'daki asıl resimler */
.bestSellersSwiper .product-detail-link img,
.discountedSwiper .product-detail-link img {
    max-width: 90% !important;
    max-height: 90% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transition: transform 0.3s ease !important;
}

/* Hover efekti */
.bestSellersSwiper .product-detail-link:hover img,
.discountedSwiper .product-detail-link:hover img {
    transform: scale(1.05) !important;
}

/* Slider içindeki ürün bilgi alanları */
.bestSellersSwiper .p-4,
.discountedSwiper .p-4 {
    padding: 12px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 220px !important;
    height: auto !important;
}

/* Slider'daki ürün başlıkları */
.bestSellersSwiper .p-4 h2,
.discountedSwiper .p-4 h2 {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
    max-height: 2.6rem !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}

/* Slider'daki ürün açıklamaları */
.bestSellersSwiper .p-4 .product-description,
.discountedSwiper .p-4 .product-description {
    font-size: 12px !important;
    line-height: 1.2 !important;
    max-height: 2.4rem !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    color: #6b7280 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* SLIDER İÇİNDEKİ GERÇEK MT-AUTO CONTAINER - ZORUNLU GÖRÜNÜR */
.bestSellersSwiper .swiper-slide .mt-auto,
.discountedSwiper .swiper-slide .mt-auto,
.bestSellersSwiper .p-4 .mt-auto,
.discountedSwiper .p-4 .mt-auto {
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-height: 90px !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* SLIDER İÇİNDEKİ GERÇEK FİYAT ALANLARI - ZORUNLU GÖRÜNÜR */
.bestSellersSwiper .swiper-slide .mt-auto .text-center,
.discountedSwiper .swiper-slide .mt-auto .text-center,
.bestSellersSwiper .p-4 .mt-auto .text-center,
.discountedSwiper .p-4 .mt-auto .text-center {
    margin-bottom: 8px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 40px !important;
    text-align: center !important;
}

/* SLIDER İÇİNDEKİ GERÇEK FİYAT DEĞERLERİ - ZORUNLU GÖRÜNÜR */
.bestSellersSwiper .swiper-slide .text-red-600,
.discountedSwiper .swiper-slide .text-red-600,
.bestSellersSwiper .swiper-slide .text-gray-500,
.discountedSwiper .swiper-slide .text-gray-500,
.bestSellersSwiper .mt-auto .text-red-600,
.discountedSwiper .mt-auto .text-red-600,
.bestSellersSwiper .mt-auto .text-gray-500,
.discountedSwiper .mt-auto .text-gray-500 {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* SLIDER İÇİNDEKİ GERÇEK BUTONLAR - ZORUNLU GÖRÜNÜR */
.bestSellersSwiper .swiper-slide .mt-auto button,
.discountedSwiper .swiper-slide .mt-auto button,
.bestSellersSwiper .p-4 .mt-auto button,
.discountedSwiper .p-4 .mt-auto button,
.bestSellersSwiper .swiper-slide .product-detail-btn,
.discountedSwiper .swiper-slide .product-detail-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin-top: 4px !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 40px !important;
    background-color: #2563eb !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

/* HOVER EFEKTİ BUTONLAR */
.bestSellersSwiper .swiper-slide .mt-auto button:hover,
.discountedSwiper .swiper-slide .mt-auto button:hover,
.bestSellersSwiper .swiper-slide .product-detail-btn:hover,
.discountedSwiper .swiper-slide .product-detail-btn:hover {
    background-color: #1d4ed8 !important;
}

/* Slider içindeki link'lerin yanyana gelmesini engellemek */
.bestSellersSwiper .p-4 > a,
.discountedSwiper .p-4 > a {
    display: block !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

/* Responsive ayarlar - Mobil */
@media (max-width: 640px) {
    .bestSellersSwiper .swiper-slide .bg-white,
    .discountedSwiper .swiper-slide .bg-white {
        height: 380px !important;
    }
    
    .bestSellersSwiper .product-detail-link,
    .discountedSwiper .product-detail-link {
        height: 140px !important;
        min-height: 140px !important;
    }
    
    .bestSellersSwiper .p-4,
    .discountedSwiper .p-4 {
        padding: 8px !important;
        min-height: 200px !important;
    }
    
    .bestSellersSwiper .p-4 h2,
    .discountedSwiper .p-4 h2 {
        font-size: 12px !important;
        max-height: 2.4rem !important;
    }
    
    .bestSellersSwiper .p-4 .product-description,
    .discountedSwiper .p-4 .product-description {
        font-size: 10px !important;
        max-height: 2rem !important;
    }
    
    .bestSellersSwiper .p-4 .mt-auto,
    .discountedSwiper .p-4 .mt-auto {
        min-height: 80px !important;
    }
}

/* Responsive ayarlar - Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
    .bestSellersSwiper .swiper-slide .bg-white,
    .discountedSwiper .swiper-slide .bg-white {
        height: 400px !important;
    }
    
    .bestSellersSwiper .product-detail-link,
    .discountedSwiper .product-detail-link {
        height: 160px !important;
        min-height: 160px !important;
    }
    
    .bestSellersSwiper .p-4,
    .discountedSwiper .p-4 {
        min-height: 210px !important;
    }
}

/* Responsive ayarlar - Desktop */
@media (min-width: 1025px) {
    .bestSellersSwiper .swiper-slide .bg-white,
    .discountedSwiper .swiper-slide .bg-white {
        height: 440px !important;
    }
    
    .bestSellersSwiper .product-detail-link,
    .discountedSwiper .product-detail-link {
        height: 200px !important;
        min-height: 200px !important;
    }
    
    .bestSellersSwiper .p-4,
    .discountedSwiper .p-4 {
        min-height: 220px !important;
    }
    
    .bestSellersSwiper .p-4 h2,
    .discountedSwiper .p-4 h2 {
        font-size: 16px !important;
    }
    
    .bestSellersSwiper .p-4 .product-description,
    .discountedSwiper .p-4 .product-description {
        font-size: 13px !important;
    }
    
    .bestSellersSwiper .swiper-slide .text-red-600,
    .discountedSwiper .swiper-slide .text-red-600,
    .bestSellersSwiper .swiper-slide .text-gray-500,
    .discountedSwiper .swiper-slide .text-gray-500 {
        font-size: 16px !important;
    }
}

/* ULTRA SPESİFİK FİYAT VE BUTON DÜZELTME - GARANTİ */

/* JavaScript ile oluşturulan gerçek fiyat elementleri */
.bestSellersSwiper .swiper-slide .text-lg,
.discountedSwiper .swiper-slide .text-lg,
.bestSellersSwiper .swiper-slide .font-bold,
.discountedSwiper .swiper-slide .font-bold,
.bestSellersSwiper .mt-auto .text-lg,
.discountedSwiper .mt-auto .text-lg,
.bestSellersSwiper .mt-auto .font-bold,
.discountedSwiper .mt-auto .font-bold {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #dc2626 !important;
}

/* JavaScript ile oluşturulan line-through fiyat */
.bestSellersSwiper .swiper-slide .line-through,
.discountedSwiper .swiper-slide .line-through,
.bestSellersSwiper .mt-auto .line-through,
.discountedSwiper .mt-auto .line-through {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 12px !important;
    color: #6b7280 !important;
    text-decoration: line-through !important;
}

/* JavaScript ile oluşturulan fiyat container flex */
.bestSellersSwiper .swiper-slide .flex.items-center,
.discountedSwiper .swiper-slide .flex.items-center,
.bestSellersSwiper .mt-auto .flex.items-center,
.discountedSwiper .mt-auto .flex.items-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 4px 0 !important;
}

/* JavaScript ile oluşturulan w-full bg-blue-600 buton */
.bestSellersSwiper .swiper-slide .w-full.bg-blue-600,
.discountedSwiper .swiper-slide .w-full.bg-blue-600,
.bestSellersSwiper .mt-auto .w-full.bg-blue-600,
.discountedSwiper .mt-auto .w-full.bg-blue-600 {
    width: 100% !important;
    background-color: #2563eb !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 12px !important;
    min-height: 40px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: center !important;
    transition: background-color 0.2s ease !important;
}

.bestSellersSwiper .swiper-slide .w-full.bg-blue-600:hover,
.discountedSwiper .swiper-slide .w-full.bg-blue-600:hover {
    background-color: #1d4ed8 !important;
}

/* Flexbox container'lar için garantiler */
.bestSellersSwiper .swiper-slide .flex-col,
.discountedSwiper .swiper-slide .flex-col {
    display: flex !important;
    flex-direction: column !important;
}

.bestSellersSwiper .swiper-slide .flex-grow,
.discountedSwiper .swiper-slide .flex-grow {
    flex-grow: 1 !important;
}

/* Text size garantileri */
.bestSellersSwiper .swiper-slide .text-xs,
.discountedSwiper .swiper-slide .text-xs {
    font-size: 10px !important;
}

.bestSellersSwiper .swiper-slide .text-sm,
.discountedSwiper .swiper-slide .text-sm {
    font-size: 12px !important;
}

/* Hover ve Shadow efektleri */
.bestSellersSwiper .swiper-slide .shadow-md,
.discountedSwiper .swiper-slide .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.bestSellersSwiper .swiper-slide .hover\\:shadow-lg:hover,
.discountedSwiper .swiper-slide .hover\\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}