/* SPECIAL THEME – Dekor + Ticker/Footersafe (tam sürüm)
   - Dekorlar: cover (boşluk bırakmaz, bozulmaz; gerekirse kırpar)
   - Footer, ticker altında kalmaz ama dışarıdan “ekstra boşluk” oluşturmaz:
     ✅ margin-bottom YOK
     ✅ footer içinde padding-bottom VAR
*/

html,
body{
  margin: 0 !important;
  /* padding:0 YOK (ticker/footersafe ayarlarını öldürmesin) */
  overflow-x: hidden;
}

/* Ticker yüksekliği için fallback (ticker tarafında farklıysa burayı güncelle) */
:root{
  --wfx3-ticker-h: 32px;
}

body.special-theme-enabled{
  position: relative;
  z-index: 0;
  background-color: var(--special-theme-bg, #fff7e6);

  --st-top-offset: 134px;                 /* sarı header altı */
  --st-bottom-offset: var(--wfx3-ticker-h); /* ticker yüksekliği */

  --st-edge-bleed: 16px;
  --st-seam-bleed: 24px;

  --st-left-pos: center center;
  --st-right-pos: center center;

  --st-container-max: 100vw;
  --st-gutter: clamp(0px, calc((100% - var(--st-container-max)) / 2), 9999px);
  --st-decor-width: calc(var(--st-gutter) + var(--st-seam-bleed));
  --st-decor-height: calc(100vh - var(--st-top-offset) - var(--st-bottom-offset));

  /* ❌ body padding-bottom yok (boşluk yapmasın) */
  padding-bottom: 0 !important;
}

body.special-theme-enabled::before,
body.special-theme-enabled::after{
  content: "";
  position: fixed;
  top: var(--st-top-offset);
  bottom: var(--st-bottom-offset);
  height: var(--st-decor-height);

  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;

  z-index: -2;
  transform: translateZ(0);
}

/* Sol dekor */
body.special-theme-enabled::before{
  left: calc(var(--st-edge-bleed) * -1);
  width: calc(var(--st-decor-width) + var(--st-edge-bleed));
  background-image: var(--special-theme-left-image, none);
  background-position: var(--st-left-pos);
}

/* Sağ dekor */
body.special-theme-enabled::after{
  right: calc(var(--st-edge-bleed) * -1);
  width: calc(var(--st-decor-width) + var(--st-edge-bleed));
  background-image: var(--special-theme-right-image, none);
  background-position: var(--st-right-pos);
}

/* Merkez yüzey (container) */
body.special-theme-enabled .special-theme-surface{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: calc(var(--st-container-max) + (var(--st-seam-bleed) * 2));
  background: rgb(var(--background_color));
  pointer-events: none;
  z-index: -1;
}

/* ✅ KRİTİK: footer ticker altında kalmasın ama dışarıdan boşluk yapmasın */
body.special-theme-enabled footer.footer{
  margin-bottom: 0 !important;
  padding-bottom: calc(var(--wfx3-ticker-h) + env(safe-area-inset-bottom));
  position: relative;
  z-index: 1;
}

/* Breakpoints */
@media (min-width: 576px){ body.special-theme-enabled{ --st-container-max: 540px; } }
@media (min-width: 768px){ body.special-theme-enabled{ --st-container-max: 720px; } }
@media (min-width: 992px){ body.special-theme-enabled{ --st-container-max: 960px; } }
@media (min-width: 1200px){ body.special-theme-enabled{ --st-container-max: 1140px; } }
@media (min-width: 1400px){ body.special-theme-enabled{ --st-container-max: 1230px; } }
@media (min-width: 1600px){ body.special-theme-enabled{ --st-container-max: 1230px; } }

/* Mobile */
@media (max-width: 991.98px){
  body.special-theme-enabled{
    --st-top-offset: 80px;
    --st-bottom-offset: var(--wfx3-ticker-h);

    --st-edge-bleed: 0px;
    --st-seam-bleed: 0px;

    --st-left-pos: center center;
    --st-right-pos: center center;
  }

  body.special-theme-enabled .special-theme-surface{
    background: transparent;
  }

  body.special-theme-enabled.special-theme-mobile-bg-off,
  body.special-theme-enabled.special-theme-no-mobile{
    background-color: rgb(var(--background_color)) !important;
  }

  body.special-theme-enabled.special-theme-mobile-bg-off .special-theme-surface,
  body.special-theme-enabled.special-theme-no-mobile .special-theme-surface{
    background: rgb(var(--background_color));
  }

  body.special-theme-enabled.special-theme-mobile-decor-off::before,
  body.special-theme-enabled.special-theme-mobile-decor-off::after,
  body.special-theme-enabled.special-theme-no-mobile::before,
  body.special-theme-enabled.special-theme-no-mobile::after{
    content: none !important;
  }
}

/* Effects */
.special-theme-effects{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}

.special-theme-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 991.98px){
  body.special-theme-enabled.special-theme-mobile-effects-off .special-theme-effects,
  body.special-theme-enabled.special-theme-no-mobile .special-theme-effects{
    display: none !important;
  }
}

/*
  User request:
  Hide side decorations on portrait / medium widths (they don't fit).
  Keep them visible only on large desktop widths.
*/
@media (max-width: 1199.98px){
  body.special-theme-enabled::before,
  body.special-theme-enabled::after{
    content: none !important;
  }

  body.special-theme-enabled .special-theme-decor{
    display: none !important;
  }

  /*
    User request (Feb 2026):
    On <1200px widths, the side theme MUST be completely removed.
    Previously we removed the images but the body background stayed tinted ("pink" edges).
    Reset background to the normal site background and remove the surface/effects layers.
  */
  body.special-theme-enabled{
    background-color: rgb(var(--background_color)) !important;
  }

  body.special-theme-enabled .special-theme-surface{
    display: none !important;
  }

  body.special-theme-enabled .special-theme-effects{
    display: none !important;
  }
}