/* Kurumsal Kategori Alanı */
.corporate-categories-section {
    background-color: var(--bg-color); /* Hafif gri arka plan */
    padding: 60px 0;
    position: relative;
    z-index: 1; /* Diğer öğelerin arkasında kalmaması için */
}

/* Mobil kaydırma ipucu için alt padding'i artırıyoruz */
@media (max-width: 767px) {
    .corporate-categories-section {
        padding-bottom: 80px; /* İpucu için yer açın */
    }
}

#product-partial-wrapper {
    min-height: 400px; /* Ürün kartlarının ortalama yüksekliğine göre ayarlanabilir */
    position: relative; /* Yükleniyor spinner'ı için */
    transition: opacity 0.3s ease-in-out; /* Geçiş efekti ekleyelim */
}

/* Yükleniyor durumunda overlay ve spinner */
.product-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--product-load); /* Açık renk overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0; /* Başlangıçta gizli */
    pointer-events: none; /* Üstteki elementlere tıklanabilirlik sağlar */
    transition: opacity 0.3s ease-in-out;
}

    .product-loading-overlay.show {
        opacity: 1; /* Gösterildiğinde opaklık */
        pointer-events: all; /* Gösterildiğinde tıklanabilirliği kapat */
    }

.product-loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--primary-color);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.corporate-categories-wrapper {
    position: relative;
    padding: 0 40px; /* Oklar için boşluk */
}

.corporate-categories-scroll-container {
    position: relative;
    display: flex; /* İçindeki grid'i ve butonları hizalamak için */
    align-items: center;
    justify-content: center; /* Grid'i ortala */
}

.corporate-categories-grid {
    display: flex; /* Kategorileri yan yana sırala */
    overflow-x: auto; /* Yatay kaydırma */
    -webkit-overflow-scrolling: touch; /* iOS'ta yumuşak kaydırma */
    scroll-behavior: smooth; /* Yumuşak kaydırma animasyonu */
    gap: 25px; /* Kategoriler arası boşluk */
    padding: 10px 0; /* Üst/alt padding, gölge için yer açar */
    scrollbar-width: none; /* Firefox için scrollbar'ı gizle */
    -ms-overflow-style: none; /* IE/Edge için scrollbar'ı gizle */
    flex-wrap: nowrap; /* Yeni satıra geçmesinler */
}

    /* Webkit (Chrome, Safari) için scrollbar'ı özelleştirme */
    .corporate-categories-grid::-webkit-scrollbar {
        height: 8px; /* Scrollbar yüksekliği */
        background-color: var(--bg-color); /* Scrollbar arka planı */
        border-radius: 4px;
    }

    .corporate-categories-grid::-webkit-scrollbar-thumb {
        background-color: var(--primary-color); /* Scrollbar rengi */
        border-radius: 4px;
        transition: background-color 0.3s ease;
    }

        .corporate-categories-grid::-webkit-scrollbar-thumb:hover {
            background-color: var(--secondary-color);
        }

/* Mobil cihazlarda scrollbar'ı daha belirgin hale getir */
@media (max-width: 767px) {
    .corporate-categories-grid::-webkit-scrollbar {
        display: block; /* Mobil'de göster */
        height: 6px; /* Daha ince */
    }

    .corporate-categories-grid::-webkit-scrollbar-thumb {
        background-color: rgba( var(--primary-rgb), 0.7 ); /* Mobil için biraz daha şeffaf olabilir */
    }
}

.corporate-category-item {
    flex-shrink: 0; /* Öğelerin küçülmesini engeller */
    background: var(--card-bg);
    border-radius: 12px; /* Daha yumuşak köşeler */
    padding: 25px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 180px; /* Minimum genişlik */
    border: 1px solid var(--border-color);
    text-decoration: none; /* Link alt çizgisi olmasın */
    color: var(--text-color); /* Varsayılan metin rengi */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Hafif bir gölge */
}

    .corporate-category-item:hover,
    .corporate-category-item.active {
        background: linear-gradient( 135deg, var(--primary-color) 0%, var(--secondary-color) 100% );
        transform: translateY(-8px); /* Daha belirgin kaldırma efekti */
        box-shadow: 0 15px 40px var(--hover-shadow);
        border-color: transparent; /* Aktif/hover durumunda çerçeve rengini kaldır */
    }

        .corporate-category-item:hover .category-icon,
        .corporate-category-item.active .category-icon {
            background: #fff;
            color: var(--primary-color);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .corporate-category-item:hover .category-title,
        .corporate-category-item.active .category-title,
        .corporate-category-item:hover .category-count,
        .corporate-category-item.active .category-count {
            color: #fff; /* Aktif/hover durumunda metin beyaz olsun */
        }

.category-icon {
    width: 65px;
    height: 65px;
    background: var(--icon-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px; /* Daha fazla boşluk */
    transition: all 0.3s ease;
    color: var(--primary-color); /* İkonun varsayılan rengi */
    font-size: 28px; /* Daha büyük ikon */
}

    .category-icon i {
        font-size: 28px;
        transition: all 0.3s ease;
    }

.category-title {
    font-size: 18px; /* Daha belirgin başlık */
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.category-count {
    font-size: 14px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    opacity: 0.8;
}

/* Kaydırma Butonları */
.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 10;
}

    .scroll-btn:hover {
        background: var(--secondary-color);
        transform: translateY(-50%) scale(1.1);
    }

    .scroll-btn.disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none; /* Tıklanmayı engeller */
        background: #ccc;
    }

.scroll-left {
    left: -60px;
}

.scroll-right {
    right: -60px;
}

/* Mobil Kaydırma İpucu */
.scroll-hint-mobile {
    display: none; /* Başlangıçta gizli, JS ile gösterilecek */
    position: absolute;
    bottom: 20px; /* Kategorilerin altında */
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    animation: pulse 1.5s infinite; /* Hafif bir animasyon */
    display: flex;
    align-items: center;
    gap: 8px; /* İkon ile metin arası boşluk */
}

    .scroll-hint-mobile i {
        font-size: 1rem;
    }

@keyframes pulse {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateX(-50%) scale(1.03);
        opacity: 0.9;
    }

    100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
}

.page-link {
    background: var(--card-bg);
    color: var(--text-color);
}

    .page-link:hover, .page-link:focus {
        box-shadow: none;
        background: var(--hover-flag);
        color: var(--text-color);
    }

.page-item.active .page-link {
    background: var(--primary-color);
    color: var(--text-color);
    border-color: var(--primary-color);
}

.page-item.disabled .page-link {
    pointer-events: none;
    opacity: 0.5;
    background: var(--page-link-disable);
    color: var(--input-bg);
}
/* Product Card */
.product-card {
    background: var(--card-bg);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid var(--border-color);
}

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

.product-image {
    position: relative;
    overflow: hidden;
    height: 250px;
}

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.5s ease;
    }

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.btn-view {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .btn-view:hover {
        background: var(--secondary-color);
        transform: scale(1.1);
    }

.product-content {
    padding: 20px;
}

.product-tag {
    display: inline-block;
    background: var(--primary-color);
    color: #fff;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 12px;
    margin-bottom: 15px;
}

.product-content h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--text-color);
}

.product-content p {
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.btn-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

    .btn-link i {
        margin-left: 5px;
        transition: all 0.3s ease;
    }

    .btn-link:hover {
        color: var(--secondary-color);
    }

        .btn-link:hover i {
            transform: translateX(5px);
        }

/* Feature Card */
.feature-card {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid var(--border-color);
}

    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    }

.feature-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient( 135deg, var(--primary-color) 0%, var(--secondary-color) 100% );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

    .feature-icon i {
        font-size: 28px;
        color: #fff;
    }

.feature-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--text-color);
}

.feature-card p {
    color: var(--text-secondary);
}
/* Responsive Styles */
@media (max-width: 1200px) {
    .corporate-category-item {
        min-width: 160px;
        padding: 20px 15px; /* Daha az padding */
    }

    .category-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
        margin-bottom: 15px;
    }

    .category-title {
        font-size: 16px;
        max-width: 120px;
        margin: auto;
    }

    .category-count {
        font-size: 13px;
    }

    .scroll-left {
        left: -50px; /* Butonları içeri çek */
    }

    .scroll-right {
        right: -50px; /* Butonları içeri çek */
    }
}
/* Responsive Styles */
@media (max-width: 991px) {
    .corporate-categories-wrapper {
        padding: 0 20px; /* Daha az boşluk */
    }

    .corporate-category-item {
        min-width: 140px; /* Biraz daha küçült */
        padding: 18px 12px;
    }

    .category-icon {
        width: 55px;
        height: 55px;
        font-size: 22px;
        margin-bottom: 12px;
    }

    .category-title {
        font-size: 15px;
    }

    .category-count {
        font-size: 12px;
    }

    .scroll-btn {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .scroll-left {
        left: -5px; /* Butonları biraz daha içeri çek */
    }

    .scroll-right {
        right: -5px; /* Butonları biraz daha içeri çek */
    }

    /* Mobil ipucu responsive ayarı */
    .scroll-hint-mobile {
        bottom: -12px; /* Daha az alt boşluk */
        padding: 6px 12px;
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .corporate-categories-wrapper {
        padding: 0 10px; /* Mobil için daha az boşluk */
    }

    .corporate-categories-grid {
        gap: 15px;
        justify-content: flex-start; /* Mobil'de sola hizala */
        /* Webkit scrollbar mobil için zaten yukarıda tanımlıydı, burada override etmiyoruz */
    }

    .corporate-category-item {
        min-width: 120px; /* Daha da küçült */
        padding: 15px 10px;
    }

    .category-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .category-title {
        font-size: 13px;
    }

    .category-count {
        font-size: 11px;
    }

    .scroll-btn {
        display: none !important; /* Mobil'de kaydırma butonlarını tamamen gizle */
    }
}

@media (max-width: 575px) {
    .corporate-categories-section {
        padding-top: 40px;
        padding-bottom: 60px; /* Mobil ipucu için yeterli boşluk bırakın */
    }

    .corporate-categories-grid {
        gap: 10px;
    }

    .corporate-category-item {
        min-width: 100px; /* En küçük mobil cihazlar için */
        padding: 12px 8px;
    }

    .category-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
        margin-bottom: 8px;
    }

    .category-title {
        font-size: 12px;
    }

    .category-count {
        font-size: 10px;
    }
}