/* ============================================================
   OYUN ALTI GÖRSEL BUTONLARI (anasayfa, "En Popüler Canlı Casino" altı)
   ------------------------------------------------------------
   Markup: includes/game_banners.php · Yönetim: Backoffice > Ayarlar > Anasayfa Butonları > Oyun Altı Butonları
   • .gb-web / .gb-mob: ≤700px'te biri gösterilir.
   • Satırdaki kartların flex-grow'u görsel oranına eşit → satırda EŞİT yükseklik, görsel kırpılmaz/esnemez.
   • Satır genişliği, kart yüksekliği üst sınırıyla (--gb-cap) sınırlanır: az sayıda dik görsel devleşmez.
   ============================================================ */
.gb-section { padding: 8px 0 28px; }
.gb-section .gb-mob { display: none; }
@media (max-width: 700px) {
    .gb-section .gb-web { display: none; }
    .gb-section .gb-mob { display: block; }
    .gb-section.gb-no-mob { display: none; }
}
@media (min-width: 701px) {
    .gb-section.gb-no-web { display: none; }
}

.gb-section .gb-rows { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gb-section .gb-row {
    --gb-gap: 14px;
    --gb-cap: 380px;
    display: flex;
    gap: var(--gb-gap);
    width: 100%;
    max-width: min(100%, calc(var(--gb-cap) * var(--gb-sum, 4) + (var(--gb-n, 4) - 1) * var(--gb-gap)));
}
.gb-section .gb-card {
    flex: var(--gb-r, 1) 1 0%;
    min-width: 0;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: none;
    text-decoration: none;
    transition: transform .25s ease, filter .25s ease;
    -webkit-tap-highlight-color: transparent;
}
.gb-section .gb-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--gb-r, auto);
    object-fit: cover;               /* oran birebir olduğundan kırpma olmaz */
    -webkit-user-select: none;
    user-select: none;
}
@media (hover: hover) {
    .gb-section .gb-card:hover { transform: translateY(-4px); filter: brightness(1.08); }
}
.gb-section .gb-card:focus-visible { outline: 2px solid var(--primary, #c9a97d); outline-offset: 3px; }

@media (max-width: 700px) {
    .gb-section { padding: 4px 0 22px; }
    .gb-section .gb-rows { gap: 8px; }
    .gb-section .gb-row { --gb-gap: 8px; --gb-cap: 420px; }
    .gb-section .gb-card { border-radius: 8px; }
}