/* ============================================================
   SİTE ARKAPLAN GÖRSELİ — SABİT, TEK PARÇA
   ------------------------------------------------------------
   Backoffice > Ayarlar > "Site arkaplan görseli" (site_background_image).
   Eskiden görsel <body>'ye dikeyde TEKRAR EDEN (repeat-y) bir arkaplan
   olarak veriliyordu: sayfa uzadıkça görsel alt alta döşeniyor, birleşim
   yerlerinde "parça parça" görünüyor ve sayfayla birlikte kayıyordu.

   Şimdi görsel, ekrana sabitlenmiş TEK bir katmanda (html::before)
   çizilir: ekranı her zaman kırpma/esnetme olmadan kaplar (cover), sayfa
   kaydırıldıkça yerinde durur — sanki arkaplan her yerde aynıymış gibi.
   Katman position:fixed olduğundan iOS/Android'de "background-attachment:
   fixed" kaynaklı kasma / yok sayılma sorunu yoktur.

   Koyu katman (okunabilirlik) aynı katmanın üst gradyanıdır; oranı
   tasarıma göre değişkenlerle gelir. theme.css / theme.purple.css /
   theme.red.css'ten SONRA yüklenir; Gold / Purple / Red hepsinde çalışır.
   ============================================================ */

html {
    --zt-bgfx-img: var(--site-bg-image, url('/assets/images/anasayfa.webp'));
    --zt-bgfx-rgb: 0, 0, 0;
    --zt-bgfx-ov: 0.45;
    --zt-bgfx-use: var(--zt-bgfx-img);
}
html[data-design="purple"] {
    --zt-bgfx-img: var(--site-bg-image, none);
    --zt-bgfx-rgb: 6, 2, 14;
    --zt-bgfx-ov: var(--zt-bg-overlay, 0);
}
html[data-design="red"] {
    --zt-bgfx-img: var(--site-bg-image, none);
    --zt-bgfx-rgb: 3, 2, 2;
    --zt-bgfx-ov: var(--zt-bg-overlay, 0);
}

/* ── MOBİL ──────────────────────────────────────────────────────
   1) Backoffice'den "Mobil Arkaplan Görseli" yüklendiyse (header.php
      --zt-bgfx-img-m değişkenini tanımlar) telefonda o kullanılır.
   2) Yüklenmediyse ve web görseli yataysa, header.php aşağıdaki
      "ambient" kurallarını ekler (bkz. header.php: ztBgAmbient):
      geniş görsel dikey ekranda ortadan kırpılıp (çoğu zaman düz siyah
      kalan merkez) gösterilmek yerine ekrana yumuşakça oturtulur; kenar
      ışıkları/renkleri telefonda da görünür. */
@media (max-width: 768px) {
    html { --zt-bgfx-use: var(--zt-bgfx-img-m, var(--zt-bgfx-img)); }
}

/* Zemin rengi html'de; görsel katmanı onun üstünde, tüm içeriğin altında */
html::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;            /* mobilde adres çubuğu açılıp kapanınca görsel zıplamasın */
    z-index: -1;
    pointer-events: none;
    background-color: transparent;
    background-image:
        linear-gradient(rgba(var(--zt-bgfx-rgb), var(--zt-bgfx-ov)), rgba(var(--zt-bgfx-rgb), var(--zt-bgfx-ov))),
        var(--zt-bgfx-use);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: 100% 100%, cover;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* body artık şeffaf: altındaki sabit katman görünsün (eski tekrarlı arkaplan kapatılır) */
html body,
html[data-design="purple"] body,
html[data-design="red"] body,
html body.livechat-open,
html body.modal-open {
    background-color: transparent !important;
    background-image: none !important;
    background-attachment: scroll !important;
}
html body::before,
html body::after {
    display: none !important;
    content: none !important;
}