/* ==========================================================================
   IC Nükleer Teknoloji — Katmanlı banner (CMS hero-layered)

   Yapı ve keyframe adları CMS banner entegrasyon dokümanının referans
   uygulamasıyla (§4.7) ve panel editörüyle BİREBİR aynıdır: panelde görülen ile
   sitede çıkan eşleşsin diye. HTML'i App\Libraries\BannerLayerRenderer üretir.
   ========================================================================== */

/* Sahne: slaytın tamamını kaplar. cqw birimi için container-type ŞART. */
.vtl-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  container-type: inline-size;
}

.vtl-layer {
  position: absolute;
  transform-origin: center center;
  transform:
    translate(var(--vtl-ax, 0), var(--vtl-ay, 0))
    translate3d(var(--vtl-px, 0px), var(--vtl-py, 0px), 0)
    rotate(var(--vtl-rot, 0deg));
}

.vtl-layer.is-full-bleed {
  inset: 0;
  --vtl-ax: 0;
  --vtl-ay: 0;
}

/* Animasyonlar slayt etkin olana (ve açılış perdesi kalkana) kadar bekler */
.vtl-anim,
.vtl-loop {
  width: 100%;
  height: 100%;
  animation-play-state: paused;
}

.is-loaded .hero-image.active .vtl-anim,
.is-loaded .hero-image.active .vtl-loop,
.is-loaded .vtl-stage--static .vtl-anim,
.is-loaded .vtl-stage--static .vtl-loop {
  animation-play-state: running;
}

.vtl-img,
.vtl-shape,
.vtl-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.vtl-img {
  max-width: none;
}

/* Tipografi katman kutusundan gelir. `.vtl-stage .vtl-text` bilerek iki sınıflı:
   sitenin `.hero h1` kuralı katmandaki bir H1'in boyutunu/rengini ezmesin. */
.vtl-stage .vtl-text {
  max-width: none;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-wrap: wrap;
  word-break: break-word;
}

/* Yalnız bağlantılı katman tıklanır; şeffaf üst katman alttaki linki yutmasın */
.vtl-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

/* Buton katmanı: kutu hizalamayı taşır, buton içeriği kadar yer kaplar */
.vtl-btn-wrap {
  width: 100%;
}

.vtl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  transition: filter 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.vtl-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.vtl-btn--ghost:hover {
  filter: none;
  text-decoration: underline;
}

span.vtl-btn {
  cursor: default;
}

span.vtl-btn:hover {
  filter: none;
  transform: none;
}

.vtl-btn-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Giriş efektleri */
@keyframes vtl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vtl-fade-up { from { opacity: 0; transform: translateY(var(--vtl-d, 40px)); } to { opacity: 1; transform: none; } }
@keyframes vtl-fade-down { from { opacity: 0; transform: translateY(calc(var(--vtl-d, 40px) * -1)); } to { opacity: 1; transform: none; } }
@keyframes vtl-fade-left { from { opacity: 0; transform: translateX(calc(var(--vtl-d, 40px) * -1)); } to { opacity: 1; transform: none; } }
@keyframes vtl-fade-right { from { opacity: 0; transform: translateX(var(--vtl-d, 40px)); } to { opacity: 1; transform: none; } }
@keyframes vtl-zoom-in { from { opacity: 0; transform: scale(var(--vtl-si, .8)); } to { opacity: 1; transform: none; } }
@keyframes vtl-zoom-out-settle { from { opacity: 0; transform: scale(var(--vtl-s, 1.4)); } to { opacity: 1; transform: none; } }
@keyframes vtl-slide-right { from { transform: translateX(var(--vtl-d, 40px)); } to { transform: none; } }
@keyframes vtl-slide-left { from { transform: translateX(calc(var(--vtl-d, 40px) * -1)); } to { transform: none; } }
@keyframes vtl-slide-up { from { transform: translateY(var(--vtl-d, 40px)); } to { transform: none; } }
@keyframes vtl-blur-in { from { opacity: 0; filter: blur(18px); } to { opacity: 1; filter: blur(0); } }
@keyframes vtl-wipe-left { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes vtl-wipe-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }

/* Sürekli hareket */
@keyframes vtl-ken-burns { from { transform: scale(1); } to { transform: scale(calc(1 + var(--vtl-a, 8) / 100)); } }
@keyframes vtl-ken-burns-out { from { transform: scale(calc(1 + var(--vtl-a, 8) / 100)); } to { transform: scale(1); } }
@keyframes vtl-zoom-slow-in { from { transform: scale(1); } to { transform: scale(calc(1 + var(--vtl-a, 8) / 100)); } }
@keyframes vtl-zoom-slow-out { from { transform: scale(calc(1 + var(--vtl-a, 8) / 100)); } to { transform: scale(1); } }
@keyframes vtl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--vtl-a, 8) * -1px)); } }
@keyframes vtl-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(calc(1 + var(--vtl-a, 8) / 200)); } }
@keyframes vtl-sway { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(calc(var(--vtl-a, 8) * 1px)); } }

@media (prefers-reduced-motion: reduce) {
  .vtl-anim,
  .vtl-loop {
    animation: none !important;
  }

  .vtl-layer {
    --vtl-px: 0px;
    --vtl-py: 0px;
  }
}

/* --------------------------------------------------------------------------
   Ana sayfa hero'suyla birleşme
   -------------------------------------------------------------------------- */

/* Katmanlı slayt kendi arka planını ve hareketini katmanlarla çizer: sitenin
   slayt süzülmesi, filtresi ve taşma payı (inset -4%) burada yok. */
.hero-image.hero-layered {
  inset: 0;
  background: none;
  filter: none;
  transform: none;
  animation: none;
}

/* Görünmeyen slaytın butonu üstteki slaytın yerine tıklanmasın */
.hero-image:not(.active) .vtl-link,
.hero-image:not(.active) .vtl-btn {
  pointer-events: none;
}

/* Etkin slayt katmanlıysa sitenin aydınlatma katmanı, ızgarası, yörüngeleri ve
   metin bloğu çekilir — bunları artık slaytın kendi katmanları çiziyor. */
.hero.is-layered-active .hero-shade,
.hero.is-layered-active .technical-grid,
.hero.is-layered-active .ambient-orbit,
.hero.is-layered-active .hero-content {
  display: none;
}

/* Alanın kalıcı katmanları: slaytların üstünde, header'ın altında */
.hero-sticky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Yükseklik: alan ayarı "tam ekran" değilse kanvas oranı (CMS §4.6) */
.hero.is-ratio {
  min-height: 0;
  aspect-ratio: var(--hero-ratio, 1920 / 1080);
}

.hero.has-max-height {
  max-height: var(--hero-max-height, none);
}

/* Masaüstünde kapalı ama mobilde açıkça istenen ok/sayfalama */
.hero-nav.is-desktop-hidden,
.hero-progress.is-desktop-hidden {
  display: none;
}

@media (max-width: 768px) {
  .hero.is-ratio {
    aspect-ratio: var(--hero-ratio-mobile, var(--hero-ratio, 1920 / 1080));
  }

  .hero.hide-nav-mobile .hero-nav,
  .hero.hide-pager-mobile .hero-progress {
    display: none;
  }

  .hero.show-nav-mobile .hero-nav {
    display: flex;
  }

  .hero.show-pager-mobile .hero-progress {
    display: flex;
  }
}