/* ==========================================================================
   tepe-fon — karşılama ekranı arka plan katmanı

   Yazı görselin üstünde durur; perde katmanı okunurluğu garanti eder.
   Her site kendi --fon-perde ve --fon-vurgu değerini ezerek kendi
   rengine çeker; buradaki değerler yalnızca güvenli varsayılan.
   ========================================================================== */

.fonlu{position:relative;isolation:isolate}
.fonlu > :not(.fon):not(.fon__nokta){position:relative;z-index:1}

.fon{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  --fon-blur:0px;
  --fon-perde:rgba(10,10,12,.68);
  --fon-perde-2:rgba(10,10,12,.9);
}
.fon__kare{
  position:absolute;inset:calc(var(--fon-blur) * -2.2);
  background-size:cover;background-position:50% 45%;
  filter:blur(var(--fon-blur));
  opacity:0;transition:opacity 1.5s cubic-bezier(.4,0,.2,1),transform 9s linear;
  transform:scale(1.06);
  will-change:opacity;
}
/* Ken Burns: açık kare yavaşça yaklaşır, kapanırken geri döner.
   Görseller arasında sert bir kesme yerine sürekli bir hareket kalıyor. */
.fon__kare.acik{opacity:1;transform:scale(1.14)}

.fon__perde{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,var(--fon-perde-2) 0%,var(--fon-perde) 42%,var(--fon-perde-2) 100%),
    var(--fon-perde);
}

/* --------------------------------------------------------------- noktalar */
/* Sağ kenar demo gezgin paneline denk geliyor; noktalar sola alındı. */
.fon__nokta{
  position:absolute;z-index:2;left:clamp(1.25rem,5vw,5.5rem);
  bottom:clamp(1.25rem,4vw,3rem);
  display:flex;gap:.5rem;
}
.fon__nokta button{
  width:26px;height:3px;padding:0;border:0;cursor:pointer;
  background:rgba(255,255,255,.28);transition:background .35s,width .35s;
}
.fon__nokta button:hover{background:rgba(255,255,255,.6)}
.fon__nokta button[aria-selected="true"]{
  background:var(--fon-vurgu,#fff);width:40px;
}
.fon__nokta button:focus-visible{outline:2px solid var(--fon-vurgu,#fff);outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .fon__kare{transition:opacity .3s;transform:none}
  .fon__kare.acik{transform:none}
}