/* ============================================================================
   MERHABOX FİLİGRAN — ürün görselinin sağ alt köşesine marka imzası
   ----------------------------------------------------------------------------
   Bu dosya GEÇİCİ bir köprüdür. Filigran kalıcı olarak dosyaların İÇİNE
   işlenir (Api reposu: .github/workflows/apply-image-watermark.yml); o iş
   bittiğinde BU DOSYA VE ONA GİDEN <link> SATIRLARI SİLİNMELİ — aksi halde
   işlenmiş görselin üzerine ikinci bir filigran biner ve çift görünür.

   Neden ayrı dosya: kaldırmak tek dosya + 4 link satırı silmek demek olsun.
   merhabox.css / otodevi-modern.css içine serpiştirilseydi geri alma riskli
   bir temizlik işine dönerdi.

   Neden `:has()`: görseli OLMAYAN ürünlerin yer tutucusuna ("görsel yakında"
   kutusu, zaten Merhabox yazıyor) filigran basılmamalı. Koşul işaretlemede
   zaten var ama `:has()` sayesinde view'lara hiç dokunmadan ayırt edilebiliyor.
   Tarayıcı `:has()` bilmiyorsa kuralın tamamı düşer; filigran görünmez, sayfa
   bozulmaz — güvenli başarısızlık.

   KAPSAM — bilinçli olarak yalnız görselin BÜYÜK gösterildiği kaplar:
     vitrin  .mbx-card__media   ürün kartı (masaüstü + mobil, 4:3)
     vitrin  .mbx-gallery__main ürün detayı ana görseli (masaüstü + mobil)
     panel   .spc-media         B2B ürün arama kartı (4:3)
     panel   .sl-main           "Ürünü Satışa Aç" ana görseli
   Kapsam dışı: 62 px'lik satır küçük görselleri (sp-thumb, sl-thumb,
   mbx-gallery__thumb) — o ölçekte filigran okunmaz, yalnız gürültü olur;
   ve admin "Ürün Kartı > Resim Galerisi" — yönetici dosyanın GERÇEK halini
   görmeli (hangi dosyaya filigran işlendiğini oradan ayırt edecek), sahte bir
   katman onu yanıltırdı.
   ============================================================================ */

:root {
  /* Saydam zeminli wordmark (teal "merha" + amber "box"). Beyaz zeminli
     ürün fotoğraflarında okunur; koyu fotoğraflarda aşağıdaki beyaz
     drop-shadow halesi ayırıyor. */
  --mbx-wm-img: url('/Content/img/logos/merhabox_min.png');
  --mbx-wm-ratio: 2244 / 675;   /* merhabox_min.png'nin gerçek oranı */
  --mbx-wm-size: 26%;           /* kabın genişliğine göre */
  --mbx-wm-min: 44px;
  --mbx-wm-max: 128px;
  --mbx-wm-inset: 5%;
  --mbx-wm-opacity: .5;
}

/* Bu iki kap kendi stil dosyalarında konumlandırılmamış (biri `display:flex`,
   diğeri `display:grid`); filigranın dayanacağı bir referans gerekiyor.
   ⚠ Atlanırsa `position:absolute` en yakın konumlanmış ATAYA tutunur: filigran
   kutudan kaçıp sayfanın sağ kenarında başıboş durur (denemede yaşandı);
   `overflow:hidden` de onu kırpmaz, çünkü artık o kabın içinde değildir.
   .mbx-card__media ve .spc-media'da `position:relative` zaten var. */
.mbx-gallery__main,
.sl-main { position: relative; }

.mbx-card__media:has(> img)::after,
.mbx-gallery__main:has(> img)::after,
.spc-media:has(.spc-img)::after,
.sl-main:not(.is-empty)::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--mbx-wm-inset);
  bottom: var(--mbx-wm-inset);
  width: clamp(var(--mbx-wm-min), var(--mbx-wm-size), var(--mbx-wm-max));
  aspect-ratio: var(--mbx-wm-ratio);
  background: var(--mbx-wm-img) center / contain no-repeat;
  opacity: var(--mbx-wm-opacity);
  /* Koyu/renkli fotoğraflarda wordmark kaybolmasın diye beyaz hale.
     Kutu/pil çizmek yerine hale: filigran gibi dursun, etiket gibi değil.
     Üç katman üst üste: tek bir drop-shadow siyah zeminde teal harfleri
     ayırmaya yetmiyordu (denemede ölçüldü); katmanlar birikerek harf
     kenarında opak bir kontur oluşturuyor. */
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 1))
          drop-shadow(0 0 2px rgba(255, 255, 255, .95))
          drop-shadow(0 0 5px rgba(255, 255, 255, .65));
  pointer-events: none;   /* kartın tamamı bir bağlantı; tıklamayı yutmamalı */
  z-index: 3;             /* görselin üstünde, rozetlerle çakışmaz (onlar sol üstte) */
}

/* "Ürünü Satışa Aç" galerisinde görsel yokken kap `.is-empty` sınıfını alır;
   oradaki "Görsel yok" metninin üstüne filigran basılmaz (yukarıdaki :not). */

/* Telefonda kart iki sütuna düşüyor: kap ~170 px'e iniyor, %26 → 44 px'lik
   alt sınıra dayanır ve orantısız büyük durur. Bu ölçekte biraz küçült. */
@media (max-width: 575.98px) {
  .mbx-card__media:has(> img)::after,
  .spc-media:has(.spc-img)::after {
    --mbx-wm-min: 38px;
    --mbx-wm-opacity: .45;
  }
}

/* LİSTE GÖRÜNÜMÜ (mobil) — filigran YOK.
   Orada görsel kutusu 104 px'e iniyor: 38 px'lik alt sınır kutunun üçte birini
   kaplar ve okunmaz. Üstelik rozet yığını liste görünümünde ALTA alınmış
   (merhabox.css'teki "ROZET GORSELI EZIYORDU" notu) — filigran tam onun üstüne
   binerdi. Bu ölçekte marka zaten kartın kendisinde görünüyor. */
html.mbx-view-list .mbx-mobile .mbx-grid--2 .mbx-card__media::after { content: none; }

/* Yazdırmada filigran gereksiz mürekkep; ayrıca sipariş/teklif çıktılarında
   ürün görselinin üstünü kapatmamalı. */
@media print {
  .mbx-card__media::after,
  .mbx-gallery__main::after,
  .spc-media::after,
  .sl-main::after { display: none !important; }
}