/* Pattern overlay (fallback-first), place this AFTER your other CSS links */
:root{
  --page-bg: #F6EFE4;                 /* gets overridden by inline :root if present */
  --pattern-size: 300px auto;
  --pattern-opacity: .12;             /* 0.05 – 0.20 arası önerilir */
}

/* Base background on html */
html{ background: var(--page-bg); }
body{ position: relative; background: none; }

/* Fallback: real background-image tiling with opacity */
body::before{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url('../img/bg-pattern.svg'); /* relative to assets/css/ */
  background-repeat: repeat;
  background-size: var(--pattern-size);
  opacity: var(--pattern-opacity);
}

/* If mask-image is supported, use it for crisp single-color control */
@supports ((mask-image: url('x')) or (-webkit-mask-image: url('x'))){
  :root{
    --pattern-color: rgba(0,0,0,.10);          /* pattern ink color */
  }
  body::before{
    background-image: none;
    opacity: 1;
    background: var(--pattern-color);
    -webkit-mask-image: url('../img/bg-pattern.svg');
    -webkit-mask-repeat: repeat;
    -webkit-mask-size: var(--pattern-size);
            mask-image: url('../img/bg-pattern.svg');
            mask-repeat: repeat;
            mask-size: var(--pattern-size);
  }
}

/* Ensure content stays above the overlay */
header, main, footer, .section { position: relative; z-index: 1; }