/* Kategori görsel biçimi: Firma Bilgileri > Menü Teması > Kategori Görseli (firmalar_.kategoriGorsel).
   body[data-katgorsel] = "kare" (1:1, varsayılan) ya da "yatay" (16:9).
   Kategori kutuları sabit oranlı olur ve görsel object-fit: cover ile ortalanır; ızgarada farklı oranlı görseller satırları kaydırmaz.
   Yalnızca .kat-liste içindeki kategori kutularına uygulanır (menu.cshtml, urunkategori.cshtml); ürün listeleri etkilenmez.
   kategori.css'ten (kapak, editoryal, hikaye) sonra yüklenir; "kare"de o düzenlerin kendi ölçüleri aynen korunur. */

/* ── Izgara (varsayılan) ───────────────────────────────────────── */
body[data-katgorsel="kare"] .kat-liste .menu3 img,
body[data-katgorsel="yatay"] .kat-liste .menu3 img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}
body[data-katgorsel="kare"] .kat-liste .menu3 img { aspect-ratio: 1 / 1; }
body[data-katgorsel="yatay"] .kat-liste .menu3 img { aspect-ratio: 16 / 9; }

/* Yatay ızgarada kategori adı görselin üstüne değil altına gelir: afişteki yazı ve ürün kapanmasın */
body[data-katgorsel="yatay"]:not([data-kategori="kapak"]):not([data-kategori="hikaye"]) .kat-liste .menu3 h2 {
    position: static;
    /* Firmanın site rengi satır içi stilden gelir; boşsa yazı beyaz zeminde kaybolmasın */
    background: var(--site-rengi, #333);
}

/* ── Liste görünümü (ızgara/liste düğmesi) ─────────────────────── */
body[data-katgorsel="kare"] .kat-liste .menu03 img,
body[data-katgorsel="kare"] .kat-liste .menu03 .urunback1 {
    flex-shrink: 0;
    width: 30%;
    max-width: 30%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
body[data-katgorsel="yatay"] .kat-liste .menu03 img,
body[data-katgorsel="yatay"] .kat-liste .menu03 .urunback1 {
    flex-shrink: 0;
    width: 42%;
    max-width: 42%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ── Kapak kartları: yatayda görselin tamamı (16:9) görünür ────── */
body[data-kategori="kapak"][data-katgorsel="yatay"] #menu .kat-liste .menu3 img {
    height: auto;
    aspect-ratio: 16 / 9;
}

/* ── Hikaye: yatayda dikey kart yerine geniş 16:9 kart ─────────── */
body[data-kategori="hikaye"][data-katgorsel="yatay"] #menu .kat-liste .menu3 {
    flex: 0 0 86% !important;
    width: 86% !important;
    max-width: 86% !important;
}
body[data-kategori="hikaye"][data-katgorsel="yatay"] #menu .kat-liste .menu3 img {
    height: auto;
    aspect-ratio: 16 / 9;
}
body[data-kategori="hikaye"][data-katgorsel="yatay"] #menu .kat-liste .menu3 h2 {
    padding: 36px 16px 14px;
    font-size: 18px;
}

/* ── Editoryal liste: yatayda yuvarlak yerine 16:9 küçük görsel ── */
body[data-kategori="editoryal"][data-katgorsel="yatay"] #menu .kat-liste .menu03 .urunback1,
body[data-kategori="editoryal"][data-katgorsel="yatay"] #menu .kat-liste .menu03 img {
    width: 96px !important;
    max-width: 96px !important;
    height: 54px !important;
    border-radius: 10px !important;
}
body[data-kategori="editoryal"][data-katgorsel="kare"] #menu .kat-liste .menu03 img {
    width: 64px !important;
    max-width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
}