/* --- GENEL AYARLAR --- */
.ozel-banner-module .custombanner-grid {
    display: grid;
    gap: 15px;
    width: 100%;
    --calculated-h: var(--banner-base-h, 300px);

}
 
.ozel-banner-module .custombanner-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    height: 100%;
    width: 100%;
    background-clip: padding-box;
    clip-path: inset(0 round var(--radius-sm));
}

.ozel-banner-module .custombanner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.3s ease;
}

.ozel-banner-module .custombanner-grid.layout_1 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-column: 1 / span 3;
}

.ozel-banner-module .custombanner-grid.layout_1 .item-0 {
    grid-column: 1 / span 3;
}

.ozel-banner-module .custombanner-grid.layout_2 {
    grid-template-columns: 1fr 1fr;
}

.ozel-banner-module .custombanner-grid.layout_3 {
    grid-template-columns: 1fr 1fr;
}

.ozel-banner-module .custombanner-grid.layout_3 .item-0 {
    grid-row: 1 / span 2;
    /* Sol blok iki satırı kaplar */
    height: 100%;
}


/* Layout 4: 2x2 Izgara */
.ozel-banner-module .custombanner-grid.layout_4 {
    grid-template-columns: 1fr 1fr;
}


/* Layout 5: 1 Sol (Büyük), 1 Sağ Üst, 2 Sağ Alt */
/* Zor bir layout, hizalama için gap hesabı şart */
.ozel-banner-module .custombanner-grid.layout_5 {
    grid-template-columns: 2fr 1fr 1fr;
}

/* Sol Büyük Blok (Item 0) */
.ozel-banner-module .custombanner-grid.layout_5 .item-0 {
    grid-column: 1;
    grid-row: 1 / span 2;
}

/* Sağ Üst (Item 1) - İki sütuna yayılır */
.ozel-banner-module .custombanner-grid.layout_5 .item-1 {
    grid-column: 2 / span 2;
    grid-row: 1;
}

/* Sağ Alt Sol (Item 2) */
.ozel-banner-module .custombanner-grid.layout_5 .item-2 {
    grid-column: 2;
    grid-row: 2;
}

/* Sağ Alt Sağ (Item 3) */
.ozel-banner-module .custombanner-grid.layout_5 .item-3 {
    grid-column: 3;
    grid-row: 2;
}


/* Layout 6: 3 Eşit Sütun (Kısa Bannerlar) */
.ozel-banner-module .custombanner-grid.layout_6 {
    grid-template-columns: 1fr 1fr 1fr;
}


/* --- MOBİL UYUMLULUK --- */
@media(max-width: 1024px) {
    .ozel-banner-module .custombanner-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
        height: auto !important;
    }

    /* Tüm layoutlar için item ayarları */
    .ozel-banner-module .custombanner-grid .custombanner-item {
        width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !important;
        height: auto !important;
    }

    /* Layout 1 için özel durum (alt kutular çok küçük olmasın) */
    .ozel-banner-module .custombanner-grid.layout_1 .custombanner-item {
        height: auto !important;
    }

    .ozel-banner-module .custombanner-grid.layout_1 .item-0 {
        height: auto !important;
    }
}