/* ================================================
   Global Scroll-Lock + Responsive Fullscreen Layout
   ================================================ */

:root {
  --vh: 1vh;
}

/* 🔒 Kaydırmayı tamamen engelle */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  position: fixed;
  inset: 0;
}

/* Tüm içeriği saran sabit katman */
#lock {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  /* touch-action: none;  ← bunu kaldır */
  overscroll-behavior: contain; /* sadece üstte yenileme izni verir */
  background: #000;
}

/* ================================================
   INTRO VİDEO
   ================================================ */
#intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  overflow: hidden;
  transition: opacity 0.8s ease;
}

#intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 0;
}

#intro video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  transform: translateZ(0);
  will-change: opacity;
}

/* ================================================
   ANA EKRAN (HERO)
   ================================================ */
.hero {
  display: block;
  z-index: 10;
  background-color: #000;
  background-image: url('BG.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  transition: opacity 0.8s ease;
}

.hero[hidden] {
  display: none;
}

/* Dikey ekran için farklı arka plan */
@media (max-aspect-ratio: 4/3) {
  .hero {
    background-image: url('BG_mobile.png?v=999');
  }
}

/* ================================================
   Mobil ince ayarlar
   ================================================ */
@media (max-width: 480px) {
  #intro video {
    object-position: 30% 50%;
  }
  .hero {
    background-position: 30% center;
  }
}
