/*
 * Vvveb sayfa yardımcıları — tuval ve yayınlanan sayfada ORTAK.
 *
 * Vvveb'in hazır bölümleri arka plan görselini/videosunu bölümün arkasına
 * yerleştirir (".background-container"). Bu kurallar upstream'de demo temasının
 * stil dosyasında yaşıyor; biz o dosyayı kullanmadığımız için arka plan
 * görseli 16×16 kopuk ikon olarak kalıyordu. Hem editör tuvali hem yayın
 * sayfası bu dosyayı yükler, böylece ikisi birebir aynı görünür.
 *
 * Stiller `.sl-page` altında kapsanır: Bootstrap gibi global sızıntı olmasın.
 */

/*
 * Sayfa gövdesi tabanı. Tuvalde bu kurallar iframe'in <body>'sine, yayınlanan
 * sayfada uygulamanın <body>'sine uygulanır; ikisi de aynı başlangıç noktasından
 * başlar. Sayfanın kendi CSS'i (body{...}) sonra geldiği için onu ezer.
 */
html {
  background: #fff;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #fff;
  color: #212529;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

/* Tuvalde görseller satır içi (tarayıcı varsayılanı / Bootstrap), yayınlanan
   sayfada Tailwind preflight onları blok yapıyor; aynı yerleşim için eşitle. */
:where(.sl-page) img {
  display: inline;
}

/* Tailwind preflight tüm öğelere tema kenarlık rengi veriyor; tuvalde
   varsayılan `currentColor`. Kenarlık rengi belirtmeyen öğeler için eşitle. */
:where(.sl-page) *,
:where(.sl-page) *::before,
:where(.sl-page) *::after {
  border-color: currentColor;
}

.sl-page .background-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.sl-page .background-container > img,
.sl-page .background-container > video,
.sl-page .background-container > .iframe-container,
.sl-page .background-container > .iframe-container > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* Bölüm, arka plan katmanını kapsasın. */
.sl-page section:has(> .background-container),
.sl-page header:has(> .background-container),
.sl-page footer:has(> .background-container) {
  position: relative;
  overflow: hidden;
}

/* İçerik arka planın üstünde kalsın. */
.sl-page section > .background-container ~ * {
  position: relative;
  z-index: 1;
}