/* ==========================================================================
   BÖLÜM ARKAPLANLARI  —  theme/assets/section-bg.css
   --------------------------------------------------------------------------
   Buradaki hiçbir şey elle ayarlanmaz. Görsel, şeffaflık, bulanıklık, karartma
   ve çerçeve/hover efekti admin panelinden (Anasayfa Bölümleri) seçilir ve
   sunucu tarafında her bölümün etrafına sarılan .sm-bgwrap div'ine CSS
   değişkeni olarak basılır (bkz. src/view/engine.js — render_component).

   Arkaplan atanmamış bölüm için sunucu bu div'i HİÇ ÜRETMEZ; yani ayar
   yapılmayan bölümlerin HTML'i de görünümü de bire bir eskisi gibi kalır.

   Tamamen geri almak için: master.njk'deki bu dosyanın <link> satırını sil.
   ========================================================================== */

/* ---------------------------------------------------------------- 1) sarmal */
.sm-bgwrap {
  position: relative;
  isolation: isolate;          /* karışım modları sayfaya taşmasın */
  /* Varsayılanlar — sunucu inline style ile üzerine yazar. */
  --sbg-op: .35;
  --sbg-blur: 0px;
  --sbg-pos: center;
  --sbg-size: cover;
  --sbg-scrim: .35;
  --sbg-radius: 0px;
}

/* Görsel katmanı. Ayrı bir ::before olarak duruyor ki bölümün kendi içeriği
   (açılır menüler, tooltip'ler) şeffaflaşmasın — opacity yalnız resme uygulanır. */
.sm-bgwrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background-image: var(--sbg-img);
  background-position: var(--sbg-pos);
  background-size: var(--sbg-size);
  background-repeat: var(--sbg-repeat, no-repeat);
  opacity: var(--sbg-op);
  filter: blur(var(--sbg-blur));
  transition: opacity .5s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}

/* Karartma perdesi: yazılar her görselin üstünde okunur kalsın diye.
   Koyu temada siyaha, açık temada beyaza doğru. */
.sm-bgwrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(4, 6, 12, calc(var(--sbg-scrim) * 1.15)) 0%,
              rgba(4, 6, 12, calc(var(--sbg-scrim) * .70)) 45%,
              rgba(4, 6, 12, calc(var(--sbg-scrim) * 1.15)) 100%);
  transition: background .5s ease;
}
html[data-sm-theme="light"] .sm-bgwrap::after {
  background: linear-gradient(180deg,
              rgba(255, 255, 255, calc(var(--sbg-scrim) * 1.15)) 0%,
              rgba(255, 255, 255, calc(var(--sbg-scrim) * .70)) 45%,
              rgba(255, 255, 255, calc(var(--sbg-scrim) * 1.15)) 100%);
}

/* Kenarlarda sert kesik olmasın: görsel yukarı ve aşağı doğru eriyerek bitsin. */
.sm-bgwrap--fade::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* ------------------------------------------------- 2) çerçeve + hover efekti */
/* Sadece panelden "çerçeve + hover" işaretlenmiş bölümlerde açılır. */
.sm-bgwrap--fx {
  --sbg-radius: 28px;
  border-radius: var(--sbg-radius);
  padding: 6px clamp(6px, 1.2vw, 18px);
  margin: 1.25rem 0;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1),
              box-shadow .55s cubic-bezier(.22, 1, .36, 1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .07) inset,
    0 18px 46px -22px rgba(0, 0, 0, .70),
    0 2px 10px -4px rgba(0, 0, 0, .40);
}
/* Cam kenar çizgisi + üstten hafif parlama. Ayrı bir katman değil, ::after'a
   ekleniyor ki fazladan DOM düğümü olmasın. */
.sm-bgwrap--fx::after {
  border: 1px solid rgba(255, 255, 255, .10);
}
html[data-sm-theme="light"] .sm-bgwrap--fx {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .90) inset,
    0 18px 44px -24px rgba(28, 42, 88, .34),
    0 2px 10px -5px rgba(28, 42, 88, .20);
}
html[data-sm-theme="light"] .sm-bgwrap--fx::after {
  border-color: rgba(28, 42, 88, .12);
}

/* Hover yalnız gerçek fareli cihazlarda — dokunmatikte "yapışık hover" olmasın. */
@media (hover: hover) and (pointer: fine) {
  .sm-bgwrap--fx:hover {
    transform: translateY(-3px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .12) inset,
      0 34px 74px -26px rgba(0, 0, 0, .82),
      0 4px 16px -6px rgba(0, 0, 0, .50);
  }
  html[data-sm-theme="light"] .sm-bgwrap--fx:hover {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .95) inset,
      0 34px 70px -28px rgba(28, 42, 88, .40),
      0 4px 16px -7px rgba(28, 42, 88, .26);
  }
  /* Görsel hover'da hem biraz belirginleşir hem çok hafif yakınlaşır. */
  .sm-bgwrap--fx:hover::before {
    opacity: calc(var(--sbg-op) + .12);
    transform: scale(1.03);
  }
}

/* Hareket azaltma tercihini olduğu gibi kabul ediyoruz. */
@media (prefers-reduced-motion: reduce) {
  .sm-bgwrap::before,
  .sm-bgwrap::after,
  .sm-bgwrap--fx { transition: none !important; }
  .sm-bgwrap--fx:hover { transform: none; }
  .sm-bgwrap--fx:hover::before { transform: none; }
}

/* -------------------------------------------------------------- 3) mobilde */
/* Küçük ekranda kenar boşluğu ve yuvarlaklık azaltılıyor, görsel biraz
   sönükleştiriliyor: dar ekranda yazı/arkaplan kontrastı daha kritik. */
@media (max-width: 767.98px) {
  .sm-bgwrap--fx { --sbg-radius: 18px; margin: .85rem 0; padding: 4px 6px; }
  .sm-bgwrap::before { opacity: calc(var(--sbg-op) * .82); }
}

/* ------------------------------------------------ 4) sabit (parallax) görsel */
/* Panelde "sayfa kaydırılırken sabit dursun" seçilirse. iOS'ta background-attachment:
   fixed desteklenmediği için orada kendiliğinden normal davranışa döner. */
.sm-bgwrap--fixed::before {
  background-attachment: fixed;
}