/* ===================================================================
   Menü ürün görselleri — yer tutucu ve görselsiz (metin) düzen.

   İki durum için:
   1) Menüde birkaç ürünün görseli yok  → .menu-gorsel-yok baş harf kutusu.
      (Eskiden aynı jenerik default.jpg onlarca kez tekrarlanıyordu.)
   2) İşletme hiç görsel kullanmıyor    → body.menu-gorselsiz, kart düzeni
      tipografik liste düzenine döner; görsel alanları hiç basılmaz.

   Bu dosya her menü sayfasında yüklenir; 2. bölüm yalnızca body üzerinde
   .menu-gorselsiz sınıfı varsa devreye girer.
   =================================================================== */

/* ── 1) Görseli olmayan tek tük ürünler: baş harf yer tutucusu ──────
   Seçici bilerek `div.menu-gorsel-yok`: yer tutucu, görselin CSS sınıfını da
   (ör. .t6-card-img) devraldığı için temanın kendi arka planı aynı ağırlıkta
   kalıyor ve sonra yüklendiği için kazanıyordu. Etiket adı ağırlığı artırır. */
/* Ölçü kuralları bilerek DÜŞÜK ağırlıkta: yer tutucu, yerini aldığı görselin
   sınıfını da taşır (ör. .t6-card-img 84x84). O sınıf sonra yüklendiği için
   kendi ölçüsünü dayatır; buradaki 100% yalnızca sınıfsız kullanımda geçerlidir. */
.menu-gorsel-yok {
    width: 100%;
    height: 100%;
}

div.menu-gorsel-yok {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    background: linear-gradient(135deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .10));
    color: rgba(0, 0, 0, .32);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    overflow: hidden;
}

div.menu-gorsel-yok span {
    /* Yüzde birim font-size'da kapsayıcının değil, üst yazı boyutunun yüzdesi
       olduğu için burada viewport tabanlı ölçek kullanılır. */
    font-size: clamp(20px, 2.4vw, 36px);
    user-select: none;
}

/* Koyu temalarda (2 ve 7) yer tutucu da koyu zeminle uyumlu olmalı */
div.t7-card-img.menu-gorsel-yok,
.theme-dark div.menu-gorsel-yok {
    background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .13));
    color: rgba(255, 255, 255, .38);
}

/* Küçük kare thumbnail'lerde (liste satırı temaları) köşe yuvarlaklığı korunur */
div.t3-product-thumb.menu-gorsel-yok,
div.t4-product-thumb.menu-gorsel-yok,
div.t5-product-thumb.menu-gorsel-yok {
    border-radius: 12px;
    flex-shrink: 0;
}

/* ── 2) Görselsiz mod: tüm görsel alanları kapanır ────────────────── */
body.menu-gorselsiz .product-img,
body.menu-gorselsiz .product-image,
body.menu-gorselsiz .product-image-wrap,
body.menu-gorselsiz .detail-image,
body.menu-gorselsiz .t3-product-thumb,
body.menu-gorselsiz .t4-product-thumb,
body.menu-gorselsiz .t5-product-thumb,
body.menu-gorselsiz .t6-card-img,
body.menu-gorselsiz .t7-card-img,
body.menu-gorselsiz .t3-detail-img,
body.menu-gorselsiz .t4-detail-img,
body.menu-gorselsiz .t5-detail-img,
body.menu-gorselsiz .t6-detail-img,
body.menu-gorselsiz .t7-detail-img,
body.menu-gorselsiz .detail-image-box img {
    display: none !important;
}

/* Tema 1 (Düz/Liste) — ad solda, fiyat sağda tek satır.
   .product-details normalde dikey kolon (ad üstte, fiyat altta); görsel
   kalkınca kartın içi boş kalmasın diye yatay düzene alınır. */
body.menu-gorselsiz .product-item {
    padding: 13px 15px;
    align-items: center;
}
body.menu-gorselsiz .product-details {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
body.menu-gorselsiz .product-main {
    flex: 1 1 auto;
    min-width: 0;
}
body.menu-gorselsiz .product-price {
    flex: 0 0 auto;
    margin-top: 0;
    white-space: nowrap;
}

/* Tema 2 (Koyu/Izgara) — ızgara korunur, kart yalnızca metinden oluşur */
body.menu-gorselsiz .product-card {
    min-height: 0;
}
body.menu-gorselsiz .product-info {
    padding: 14px;
}
body.menu-gorselsiz .product-title {
    margin: 0 0 4px;
}

/* Tema 3/4/5 — satır düzeni zaten var; küçük görsel kalkınca boşluk toparlanır */
body.menu-gorselsiz .t3-product-row,
body.menu-gorselsiz .t4-product-row,
body.menu-gorselsiz .t5-product-row {
    padding-left: 14px;
}
body.menu-gorselsiz .t3-product-body,
body.menu-gorselsiz .t4-product-body,
body.menu-gorselsiz .t5-product-body {
    padding-top: 13px;
    padding-bottom: 13px;
}

/* Tema 6/7 — kart zaten yatay satır; görsel kalkınca iç boşluk düzeltilir */
body.menu-gorselsiz .t6-card,
body.menu-gorselsiz .t7-card {
    padding: 12px 14px;
}
body.menu-gorselsiz .t6-card-body,
body.menu-gorselsiz .t7-card-body {
    flex: 1 1 auto;
    min-width: 0;
}
/* Görsel kalkınca ada yer açılır; ürün adı üç noktayla kesilmesin */
body.menu-gorselsiz .t6-card-name,
body.menu-gorselsiz .t7-card-name,
body.menu-gorselsiz .t3-product-name,
body.menu-gorselsiz .t4-product-name,
body.menu-gorselsiz .t5-product-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Ürün detay sayfası — görsel yokken içerik yukarı çeker */
body.menu-gorselsiz .product-detail,
body.menu-gorselsiz .detail-wrap {
    display: block;
}
body.menu-gorselsiz .detail-info,
body.menu-gorselsiz .detail-info-box {
    padding-top: 8px;
}

/* ── <picture> sarmalayıcısı yerleşimi etkilemesin ──────────────────
   Görseller WebP yan kopyası varsa helper::picture() ile <picture> içine
   sarılıyor (bkz. config/helper.php). display:contents sarmalayıcının kutu
   üretmesini engeller; flex/grid ebeveynler <img>'i doğrudan çocuk gibi
   görmeye devam eder, mevcut hiçbir kural bozulmaz. */
picture { display: contents; }