/* Product Categories Section Styles - Mosaic Bento Layout */
.product-categories-section {
    padding: 80px 0;
    background-color: #fff;
}

.product-categories-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Custom Container Width for Desktop */
@media (min-width: 1500px) {
    .product-categories-section .container {
        max-width: 1450px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}



.product-categories-header .section-description {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
}

/* Mosaic Grid Layout */
.product-categories-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    padding: 0 15px;
}

@media (min-width: 768px) {
    .product-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 280px;
    }
}

@media (min-width: 1024px) {
    .product-categories-grid {
        /* 
           GELİŞMİŞ GRID AYARLARI (12 Sütünlu Sistem)
           Burada "sütun" (column) mantığı ile % ayarları yapabilirsiniz.
           Toplam genişlik 12 birimdir.
           
           GENİŞLİK (Width):
           - span 12 = %100 Genişlik (Tam Ekran)
           - span 8  = %66  Genişlik (İki Kat)
           - span 6  = %50  Genişlik (Yarım)
           - span 4  = %33  Genişlik (Üçte bir - Normal)
           - span 3  = %25  Genişlik (Çeyrek)

           YÜKSEKLİK (Height):
           - Temel satır yüksekliği 50px'dir.
           - span 9  = Yaklaşık 450px yükseklik (Normal Kare)
           - span 19 = Yaklaşık 950px yükseklik (2 Kat - Uzun)
        */

        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: 50px;
        /* Her birim kare yüksekliği 50px */
        gap: 20px;
        grid-auto-flow: row;
    }

    /* KUTU 1 */
    .product-category-card:nth-child(1) {
        grid-column: span 4;
        /* %33 Genişlik */
        grid-row: span 6;
        /* ~450px Yükseklik */
    }

    /* KUTU 2 (ORTA - UZUN OLAN) */
    .product-category-card:nth-child(2) {
        grid-column: span 4;
        /* %33 Genişlik */
        grid-row: span 11;
        /* ~950px Yükseklik (2 kat + boşluk) */
    }

    /* KUTU 3 */
    .product-category-card:nth-child(3) {
        grid-column: span 4;
        /* %33 Genişlik */
        grid-row: span 6;
        /* ~450px Yükseklik */
    }

    /* KUTU 4 */
    .product-category-card:nth-child(4) {
        grid-column: span 4;
        /* %33 Genişlik */
        grid-row: span 5;
        /* ~450px Yükseklik */
    }

    /* KUTU 5 */
    .product-category-card:nth-child(5) {
        grid-column: span 4;
        /* %33 Genişlik */
        grid-row: span 5;
        /* ~450px Yükseklik */
    }

    /* KUTU 6 (GENİŞ OLAN) */
    .product-category-card:nth-child(6) {
        grid-column: span 9;
        /* %66 Genişlik (2 birim) */
        grid-row: span 6;
        /* ~450px Yükseklik */
    }

    /* KUTU 7 */
    .product-category-card:nth-child(7) {
        grid-column: span 3;
        /* %33 Genişlik */
        grid-row: span 6;
        /* ~450px Yükseklik */
    }
}

.product-category-card {
    display: block;
    position: relative;
    text-decoration: none;
    overflow: hidden;
    /* border-radius: 4px; Remove border radius for sharper look if desired */
    height: 100%;
    width: 100%;
    min-height: 250px;
    /* Fallback */
}

.product-category-card__image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f0f0f0;
}

.product-category-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-category-card:hover .product-category-card__image {
    transform: scale(1.05);
}

/* Overlay & Content */
.product-category-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    /* Adjusted from 100% to auto based on user feedback */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    display: flex;
    flex-direction: row;
    /* Icon and text side-by-side */
    justify-content: center;
    /* Center horizontally */
    align-items: flex-end;
    /* Bottom alignment */
    padding: 40px 20px 20px 20px;
    /* Top padding for gradient fade */
    z-index: 2;
    gap: 12px;
    /* Space between text and icon */
}

.product-category-card__title {
    font-size: 1.25rem;
    /* Standardized size */
    font-weight: 500;
    color: #fff;
    margin: 0;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
}

.product-category-card__icon {
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.product-category-card__icon svg {
    width: 20px;
    height: 20px;
}

.product-category-card:hover .product-category-card__icon {
    transform: translate(3px, 3px);
    /* Move diagonally down-right */
}