/*
 * Dekoratif tuval katmanları.
 *
 * Tuvaller içeriğin arkasında durur, erişilebilirlik ağacından çıkarılır ve
 * JavaScript kapalıyken hiç görünmez. Hiçbiri düzeni etkilemez: kap zaten
 * kendi yüksekliğine sahiptir, tuval üzerine mutlak konumla serilir.
 */

.ec-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ec-field__canvas {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* Tuval barındıran bölümler konumlandırma bağlamı kurar ve içeriği
   tuvalin üstüne alır. */
.s-services,
.s-stats,
.s-process,
.s-service__head,
.s-service__cta,
.s-notfound {
  position: relative;
}

 /* Tuval dışındaki içerik tuvalin üstünde kalır. `.ec-field` bu kuraldan
    dışlanır; aksi hâlde mutlak konumu ezilir ve tuval akışa girer. */
.s-services > .u-container,
.s-stats > .u-container,
.s-process > .u-container,
.s-service__head > *:not(.ec-field),
.s-service__cta > *:not(.ec-field),
.s-notfound > .u-container {
  position: relative;
  z-index: 1;
}

/* Ters renkli bantta tuval bandın kendi zeminini aşmaz. */
.s-stats .ec-field,
.s-service__cta .ec-field {
  border-radius: inherit;
}

/* Hareket azaltma isteğinde tuval tek kare çizilir; ayrıca opaklık düşürülür
   çünkü donmuş bir desen dikkat dağıtmamalıdır. */
@media (prefers-reduced-motion: reduce) {
  .ec-field {
    opacity: 0.4;
  }
}