/* ===========================================================
   ASC · Okçu kare dizisi — bağımsız sürüm
   Ferhatlar Okulları. Tek bağımlılığı yok; herhangi bir sayfaya
   asc-okcu.css + asc-okcu.js ikilisiyle eklenir.
   =========================================================== */

.asc-okcu{
  --asc-yukseklik: 320vh;   /* sekansın kaç ekran boyu kaydırmayla oynayacağı */
  --asc-zemin: #050D18;
  position: relative;
  height: var(--asc-yukseklik);
  background: var(--asc-zemin);
  margin: 0;
  padding: 0;
}
@media (max-width: 900px){ .asc-okcu{ --asc-yukseklik: 250vh } }
@media (max-width: 560px){ .asc-okcu{ --asc-yukseklik: 225vh } }

/* Dar bir içerik sütununun içindeyken bile ekranı boydan boya kaplar.
   Temanız zaten tam genişlik veriyorsa bu sınıfı kaldırın. */
.asc-okcu--tam-genislik{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.asc-okcu-sahne{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--asc-zemin);
}

.asc-okcu-sahne > canvas{
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .6s ease;
}
.asc-okcu.asc-hazir .asc-okcu-sahne > canvas{ opacity: 1 }

/* Kenarları karartan sinematik maske */
.asc-okcu-vinyet{
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 45%, transparent 30%, rgba(5,13,24,.55) 100%),
    linear-gradient(to bottom, rgba(5,13,24,.75) 0%, transparent 26%, transparent 62%, rgba(5,13,24,.9) 100%);
}

/* İsteğe bağlı metin katmanı — içine kendi başlığınızı koyabilirsiniz */
.asc-okcu-icerik{
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center;
  padding: 0 24px; pointer-events: none;
  color: #fff;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.asc-okcu-icerik > *{ pointer-events: auto }
.asc-okcu-satir{
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  opacity: 0; visibility: hidden;
  will-change: opacity, transform;
}
/* Tema başlık renklerini ezmek için renk açıkça verilir */
.asc-okcu .asc-okcu-satir h2{
  margin: 0;
  font-size: clamp(30px, 5.6vw, 78px);
  font-weight: 600; line-height: 1.14; letter-spacing: -.035em;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0,0,0,.55);
}
.asc-okcu .asc-okcu-satir p{
  margin: 18px auto 0; max-width: 56ch;
  font-size: clamp(14.5px, 1.5vw, 18px);
  color: rgba(255,255,255,.88);
  text-shadow: 0 2px 20px rgba(0,0,0,.7);
}

/* Kaydırma ipucu */
.asc-okcu-ipucu{
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: opacity .4s; pointer-events: none;
}
.asc-okcu-ipucu i{
  display: block; width: 1px; height: 34px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.8));
  animation: asc-okcu-damla 1.9s ease-in-out infinite;
}
@keyframes asc-okcu-damla{
  0%,100%{ transform: scaleY(.35); opacity:.4 }
  50%{ transform: scaleY(1); opacity:1 }
}
@media (max-width: 900px){ .asc-okcu-ipucu{ bottom: 18px } }

/* Yükleme çubuğu */
.asc-okcu-yukleme{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(220px, 46vw); height: 2px;
  background: rgba(255,255,255,.14); border-radius: 2px; overflow: hidden;
  transition: opacity .4s ease;
}
.asc-okcu-yukleme i{
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #C9A227, #E8CE7A);
  transition: width .25s ease;
}
.asc-okcu.asc-hazir .asc-okcu-yukleme{ opacity: 0; pointer-events: none }

/* Hareketi azalt tercihi: sekans tek kareye iner, sayfa kısalır */
@media (prefers-reduced-motion: reduce){
  .asc-okcu{ --asc-yukseklik: 100vh }
  .asc-okcu-ipucu i{ animation: none }
}