/* =========================================================================
   Hero — statik temadaki "Sahne" varyantının (slider-1.css) kopyası.

   Dosyanın gövdesi DEĞİŞTİRİLMEDİ; sonuna yalnızca video slaytının
   kuralları eklendi. Tema güncellenirse gövde yeniden kopyalanabilir.
   ========================================================================= */

/* =========================================================================
   TEKNOLES — Slider varyantı 1: "Sahne"
   Tam genişlikte makine fotoğrafı + yavaş yakınlaşma (Ken Burns),
   sol altta metin, sağda dikey slayt sayacı, sağ altta küçük resimler.
   Yalnızca style.css'teki değişkenlere dayanır; tek başına taşınabilir.
   ========================================================================= */

.hero1 {
  position: relative;
  overflow: hidden;
  background: var(--graphite);
  color: var(--white);
  min-height: min(780px, calc(100vh - 126px));
  display: grid;
  align-items: center;
  padding: 4rem 0 7rem;
}

/* ---- fotoğraf katmanı ---- */
.hero1__stage { position: absolute; inset: 0; }
.hero1__shot {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .9s ease;
}
.hero1__shot.is-active { opacity: 1; }
.hero1__shot img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.12); transform-origin: 60% 45%;
}
.hero1__shot.is-active img { animation: hero1Zoom var(--slide-ms, 8000ms) linear forwards; }
@keyframes hero1Zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero1.is-paused .hero1__shot.is-active img { animation-play-state: paused; }

/* Metni okunur kılan karartma — soldan sağa açılan perde */
.hero1__stage::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(29,34,38,.95) 0%, rgba(29,34,38,.86) 32%, rgba(29,34,38,.28) 66%, rgba(29,34,38,.62) 100%),
    linear-gradient(to top, rgba(29,34,38,.85) 0%, transparent 42%);
}

/* ---- metin ---- */
.hero1__inner { position: relative; z-index: 2; }
.hero1__copy { max-width: 46rem; }
.hero1__slide { display: none; }
.hero1__slide.is-active { display: block; }
.hero1__slide.is-active > * { animation: hero1In .55s cubic-bezier(.2, .7, .3, 1) both; }
.hero1__slide.is-active > *:nth-child(2) { animation-delay: .07s; }
.hero1__slide.is-active > *:nth-child(3) { animation-delay: .13s; }
.hero1__slide.is-active > *:nth-child(4) { animation-delay: .19s; }
@keyframes hero1In { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero1__code {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: var(--fs-md); font-weight: 800; color: var(--orange);
  font-variation-settings: "wdth" 125; letter-spacing: .02em;
  margin-bottom: 1.1rem;
}
.hero1__code::before { content: ""; width: 34px; height: 3px; background: var(--orange); }
.hero1 h1, .hero1 h2 {
  font-size: var(--fs-3xl); font-weight: 800; line-height: 1.02;
  font-variation-settings: "wdth" 115; letter-spacing: -.02em; max-width: 14ch;
  text-wrap: balance;
}
.hero1__text { color: #D6DBDE; font-size: var(--fs-md); max-width: 48ch; margin: 1.4rem 0 2.2rem; }
.hero1__actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ---- dikey sayaç ---- */
.hero1__count {
  position: absolute; z-index: 2; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  font-variant-numeric: tabular-nums;
}
.hero1__now { font-size: 2.6rem; font-weight: 800; line-height: 1; font-variation-settings: "wdth" 115; }
.hero1__track { width: 2px; height: 130px; background: rgba(255,255,255,.22); position: relative; }
/* JS her slayt değişiminde bu öğeyi yeniden oluşturup animasyonu baştan başlatır */
.hero1__track i { position: absolute; inset: 0 0 auto; background: var(--orange); height: 0;
                  animation: hero1Fill var(--slide-ms, 8000ms) linear forwards; }
.hero1.is-paused .hero1__track i { animation-play-state: paused; }
@keyframes hero1Fill { to { height: 100%; } }
@keyframes hero1FillX { to { width: 100%; } }
.hero1__all { font-size: var(--fs-sm); color: var(--steel-light); }

/* ---- gezinme: oklar + küçük resimler, sağ altta tek grup
       (sol alt, sabit iletişim butonlarına ayrılmıştır) ---- */
.hero1__nav {
  position: absolute; z-index: 2; right: var(--gutter); bottom: 3.2rem;
  display: flex; align-items: center; gap: 1.1rem;
}
.hero1__thumbs { display: flex; gap: .55rem; }
.hero1__thumbs button {
  width: 92px; height: 68px; padding: 0; border: 2px solid rgba(255,255,255,.28);
  border-radius: var(--r-sm); overflow: hidden; background: var(--graphite-2);
  transition: border-color .25s, transform .25s;
}
.hero1__thumbs img { width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: opacity .25s; }
.hero1__thumbs button:hover img { opacity: .9; }
.hero1__thumbs button.is-active { border-color: var(--orange); transform: translateY(-5px); }
.hero1__thumbs button.is-active img { opacity: 1; }

/* ---- ok tuşları ---- */
.hero1__arrows { display: flex; gap: .5rem; }
.hero1__arrows button {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.3); background: rgba(29,34,38,.4);
  color: var(--white); border-radius: 50%; transition: background .2s, border-color .2s;
}
.hero1__arrows button:hover { background: var(--orange); border-color: var(--orange); }
.hero1__arrows svg { width: 20px; height: 20px; }

@media (max-width: 980px) {
  .hero1 { min-height: 0; padding: 3rem 0 8.5rem; }
  .hero1__count { top: auto; bottom: 3.4rem; left: var(--gutter); right: auto; transform: none;
                  flex-direction: row; align-items: center; gap: .7rem; }
  .hero1__now { font-size: var(--fs-lg); }
  .hero1__track { width: 70px; height: 2px; }
  .hero1__track i { inset: 0 auto 0 0; height: 100%; width: 0; animation-name: hero1FillX; }
  .hero1__arrows { display: none; }
  .hero1__thumbs { bottom: 3.2rem; }
  .hero1__thumbs button { width: 62px; height: 48px; }
}
@media (max-width: 560px) {
  .hero1__thumbs { display: none; }
  .hero1 { padding-bottom: 6.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero1__shot.is-active img { animation: none; transform: scale(1); }
  .hero1__slide.is-active > * { animation: none; }
  .hero1__track i { animation: none !important; height: 100%; }
}


/* -------------------------------------------------------------------------
   VİDEO SLAYT — .NET tarafında eklendi.

   Statik temada video ayrı bir varyanttı (slider-4). Burada aynı slider
   içinde bir slayt görsel, bir başkası video olabiliyor; hangisi olduğunu
   kaydın dosya alanı belirliyor.

   Video, görselin durduğu yerde ve aynı kırpma kurallarıyla duruyor
   (object-fit: cover), böylece slaytlar arası geçişte boyut oynamıyor.
   ------------------------------------------------------------------------- */
.hero1__shot video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Poster görseli videonun ARKASINDA duruyor: video indirilmediğinde
   (mobil, hareket azaltma) ya da henüz yüklenmediğinde görünen bu.
   Videonun kendi poster özniteliği de veriliyor; ikisi birlikte
   yüklenme anındaki boş kareyi kapatıyor. */
.hero1__shot img + video { z-index: 2; }