/* ============================================================
   ANASAYFA BUTON GÖRSELLERİ (slider altı) — web/mobil ayrı yapı + KOMPAKT düzen
   ------------------------------------------------------------
   Markup: includes/promo_buttons.php · Yönetim: Backoffice > Ayarlar > Anasayfa Butonları
   • .pb-web  → masaüstü yapısı, .pb-mob → mobil yapısı (≤700px; mevcut mobil kırılımıyla aynı)
   • classic  → eski .promo-banners-grid kuralları (theme.css) aynen geçerli; burada yalnızca
                mobilde AYRI mobil görseli olan kart (.pb-own) kırpılmadan kendi oranında durur.
   • compact  → .pb-compact: .pb-row satırları; satırdaki kartlar flex-grow = görsel oranı olduğundan
                EŞİT yükseklikte, görsel kırpılmaz/esnemez. Satır genişliği, kart yüksekliği
                üst sınırı (--pb-cap) ile sınırlanır (çok dik görseller devleşmesin).
   theme.css / theme.purple.css / theme.red.css'ten SONRA yüklenir.
   ============================================================ */

.promo-banners-section .pb-mob { display: none; }
@media (max-width: 700px) {
    .promo-banners-section .pb-web { display: none; }
    .promo-banners-section .pb-mob { display: block; }
}

/* ── classic: ayrı mobil görseli olan kart kırpılmaz ── */
@media (max-width: 700px) {
    html body[data-page="index.php"] .promo-banners-section .promo-banner-item.pb-own {
        height: auto !important;
    }
    html body[data-page="index.php"] .promo-banners-section .promo-banner-item.pb-own .promo-banner-link {
        height: auto !important;
    }
    html body[data-page="index.php"] .promo-banners-section .promo-banner-item.pb-own .promo-banner-image {
        height: auto !important;
        object-fit: contain !important;
    }
    html body[data-page="index.php"] .promo-banners-section .pb-mob .promo-banners-grid { align-items: start !important; }
}

/* ── compact ── */
.promo-banners-section .pb-compact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.promo-banners-section .pb-row {
    --pb-gap: 12px;
    --pb-cap: 300px;                       /* küçük kart satırı: en çok bu yükseklik */
    display: flex;
    gap: var(--pb-gap);
    width: 100%;
    margin: 0 auto;
    max-width: min(100%, calc(var(--pb-cap) * var(--pb-sum, 4) + (var(--pb-n, 4) - 1) * var(--pb-gap)));
}
.promo-banners-section .pb-row--large { --pb-cap: 420px; }

.promo-banners-section .pb-card {
    flex: var(--pb-r, 1) 1 0%;             /* genişlik ∝ oran  →  satırda eşit yükseklik */
    min-width: 0;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
    transition: transform .25s ease, filter .25s ease;
    -webkit-tap-highlight-color: transparent;
}
.promo-banners-section .pb-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--pb-r, auto);
    object-fit: cover;                     /* oran birebir olduğundan kırpma olmaz; yalnızca yuvarlama farkı */
    -webkit-user-select: none;
    user-select: none;
}
@media (hover: hover) {
    .promo-banners-section .pb-card:hover { transform: translateY(-3px); filter: brightness(1.06); }
}
.promo-banners-section .pb-card:focus-visible { outline: 2px solid var(--primary, #c9a97d); outline-offset: 2px; }

@media (max-width: 700px) {
    .promo-banners-section .pb-compact { gap: 8px; }
    .promo-banners-section .pb-row { --pb-gap: 8px; }
    .promo-banners-section .pb-card { border-radius: 10px; }
}


/* ============================================================
   BUTON BOYUTU (Backoffice > Anasayfa Butonları > Buton Boyutu — web / mobil ayrı)
   ------------------------------------------------------------
   Yalnızca boyut %100'den farklıysa .pb-scaled + --pb-s (0.50–1.15) basılır; %100'de bu bölüm devreye girmez.
   Düzen (web 4'lü, mobil 2'li ızgara / kompakt satırlar) HİÇBİR boyutta değişmez: sütun sayısı sabit kalır.
   Bölüm kutusunun genişliği = s × normal genişlik olur, ortalanır:
     • s < 1  → kutu daralır, kartlar orantılı küçülür (ortada durur)
     • s > 1  → kutu bölümün yan boşluklarına taşar (--pb-bleed ile sınırlı, ekran dışına çıkmaz), kartlar orantılı büyür
   ============================================================ */
.promo-banners-section .pb-scaled {
    --pb-bleed: 40px;                                   /* web: bölüm yan boşlukları (2 × 20px) */
    position: relative;
    left: 50%;
    width: min(calc(var(--pb-s) * 100%), calc(100% + var(--pb-bleed)));
    max-width: none;
    transform: translateX(-50%);
}
@media (max-width: 700px) {
    .promo-banners-section .pb-scaled { --pb-bleed: 48px; }   /* mobil: kenarlara ~6px kalana dek */
    /* classic mobil: sabit 96px kart yüksekliği de aynı oranda ölçeklenir (ayrı mobil görselli kartlar kendi oranında kalır) */
    html body[data-page="index.php"] .promo-banners-section .pb-scaled .promo-banner-item {
        height: calc(96px * var(--pb-s)) !important;
    }
    html body[data-page="index.php"] .promo-banners-section .pb-scaled .promo-banner-item.pb-own {
        height: auto !important;
    }
}
/* kompakt: satır yüksekliği üst sınırı da boyutla birlikte ölçeklenir (aksi halde büyütme sınırda kalır) */
.promo-banners-section .pb-scaled .pb-row { --pb-cap: calc(300px * var(--pb-s)); }
.promo-banners-section .pb-scaled .pb-row--large { --pb-cap: calc(420px * var(--pb-s)); }