/* Banner Izgarası vitrin — tüm temalar (class_prefix ile).
   Bölüm ve kutu seçicileri sınıf adının sonuna/boşluğa bağlı: [class*="-banner-grid"] alt öğeleri
   (__title, __item-title …) de yakalayıp onlara dolgu / koyu zemin veriyordu. */

/* Tüm banner blokları — alt boşluk */
section[class*="-banner-grid"],
section[class*="-discount-tiers"],
section[class*="-quick-banners"],
section[class*="-showcase--banner"],
.theme-quick-banners,
.agora-quick-banners,
.ustapazar-quick-banners {
    margin-bottom: 15px;
}

section[class*="-banner-grid"] {
    padding: clamp(1.5rem, 3vw, 2.75rem) 0;
}

[class*="-banner-grid__title"] {
    margin-bottom: 1.25rem;
}

[class*="-banner-grid__row"] {
    display: grid;
    gap: .75rem;
    align-items: start;
}

[class*="-banner-grid__row--1"] { grid-template-columns: 1fr; }
[class*="-banner-grid__row--2"] { grid-template-columns: 1fr; }
[class*="-banner-grid__row--3"] { grid-template-columns: 1fr; }
[class*="-banner-grid__row--4"] { grid-template-columns: 1fr; }

@media (min-width: 768px) {
    [class*="-banner-grid__row--2"] { grid-template-columns: repeat(2, 1fr); }
    [class*="-banner-grid__row--3"] { grid-template-columns: repeat(3, 1fr); }
    [class*="-banner-grid__row--4"] { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    [class*="-banner-grid__row--4"] { grid-template-columns: repeat(4, 1fr); }
}

[class$="-banner-grid__item"],
[class*="-banner-grid__item "] {
    position: relative;
    display: block;
    overflow: hidden;
    background: #111;
    color: #fff;
    text-decoration: none;
}

/* Görsel akışta kalsın → yükseklik doğal oranla otomatik (crop yok) */
[class$="-banner-grid__item"] > picture,
[class*="-banner-grid__item "] > picture {
    display: block;
    width: 100%;
}

[class*="-banner-grid__img"] {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .45s ease;
}

[class$="-banner-grid__item"]:hover [class*="-banner-grid__img"],
[class*="-banner-grid__item "]:hover [class*="-banner-grid__img"] {
    transform: scale(1.03);
}

[class*="-banner-grid__overlay"] {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.25rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .55));
}

/* Kutu bir <a>: genel link rengi (a:not(.btn)… { color: primary }) katmana miras kalmasın — renk tondan */
[class*="-banner-grid__overlay--light"] { color: #fff; }
[class*="-banner-grid__overlay--dark"] { color: #111; }

[class*="-banner-grid__item-title"] {
    font-size: clamp(.95rem, 1.6vw, 1.25rem);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

[class*="-banner-grid__item-sub"] {
    font-size: .8rem;
    opacity: .9;
}

[class*="-banner-grid__cta"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .35rem;
    min-height: 40px;
    padding: .5rem 1.15rem;
    background: #fff;
    color: #0a0a0a;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

[class*="-banner-grid--fullscreen"] [class*="-banner-grid__row"] {
    gap: 0;
}

[class*="-banner-grid--fullscreen"] [class*="-banner-grid__title"] {
    max-width: var(--sf-container-max, 1400px);
    margin-inline: auto;
    padding-inline: var(--sf-gutter, 1.25rem);
}

@media (prefers-reduced-motion: reduce) {
    [class*="-banner-grid__img"] {
        transition: none;
    }
}