@charset "UTF-8";
/* ============================================================================
   OVASOFT.TR — hero-film.css
   Taşınan hero sinema mekaniğinin biçimleri. Kaynak: araclar/ova-film.css
   (bizim kodumuz), eski React paketinin sınıflarından arındırılarak
   yeniden yazıldı.

   KALDIRILANLAR
     · .ed-signature / .ed-signature-grid / .ed-signature-cell bağımlılığı
       (eski üründen devir). Şeridin yüksekliği artık ada değil,
       `--ova-strip-h` değişkenine bağlı; şerit yoksa 0 px kabul edilir.
     · Tailwind kalıntısı yardımcı sınıflar ve --tm-* / --font-display
       değişkenleri. Yerine ova.css'in jetonları kullanılıyor.
     · Müşteri sözü (.ova-yorum*) bölümünün tamamı — o bölüm yeni sitede
       basılmıyor (02 §5: altı yorum da uydurma).
     · Cam/bulanıklık filtreleri: hiçbir kural kullanmıyor.

   SÖZLEŞME (JS bu adları ve değişkenleri kullanır)
     Sınıf   : .ova-hero .ova-hero-govde .ova-hero-media .ova-hero-pin
               .ova-hero-uyku .ova-hero-sik .ova-hero-poster .ova-hero-serit
               .ova-ekran .ova-ekran-ic .ova-ekran-logo .ova-ekran-yazi
               .ova-ekran-satir .ova-ustte .ova-ortu
               .ova-word-mask .ova-word .ova-word-accent .ova-type-scene
     Değişken: --ova-pin-top --ova-pin-h --ova-strip-h --ova-kucult
               --ova-ekran-x/-y/-w/-h --ova-ekran-yazi --ova-ekran-bosluk
               --ova-ekran-logo --ova-ekran-isik --ova-ortu-x --ova-ortu-y
               --logo-o --logo-y --satir-o --satir-y
               --word-p --word-y --word-rotate --type-progress

   YAZIM: mobil öncelikli. Taban stil 390 px'in stilidir; kilit, monitör
   ekranı ve ızgara örtüsü yalnızca `min-width:1024px` içinde açılır.
   ========================================================================= */


/* ===========================================================================
   1. HERO KABUĞU — taban (kilitsiz, normal akış)
   1024 px altında hiçbir kilit yok: hero doğal yüksekliğinde biter.
   ======================================================================== */
.ova-hero{
  position:relative;
  background:var(--yuzey-4);
  isolation:isolate;
  overflow:clip;
}

.ova-hero-govde{
  position:relative;
  z-index:var(--z-icerik, 1);
  min-height:0;
  height:auto;
  transform:none;              /* --ova-kucult yalnız kilitte devreye girer */
  padding-top:0;
  padding-bottom:0;
}

/* Medya paneli: mobilde metnin altında duran normal bir blok */
.ova-hero-media{
  position:relative;
  margin-top:24px;
  border-radius:var(--r-6, 16px);
  overflow:hidden;
  background:var(--koyu, #0d243e);
}
.ova-hero-media picture{ display:block; }
.ova-hero-media video,
.ova-hero-media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
}
.ova-hero-media video{
  transform:translateZ(0);     /* kare geçişlerinde yeniden boyama olmasın */
  backface-visibility:hidden;
}

/* Poster: yalnızca video gizlendiğinde görünür (azaltılmış hareket / <1024) */
.ova-hero-poster{ display:none; }

/* Kilit sınıfları taban durumda etkisiz kalır (JS <1024'te eklemez;
   eklense bile burada nötrlenir) */
.ova-hero-pin{
  position:static;
  height:auto;
  top:auto;
}
.ova-hero-uyku{ visibility:visible; }
.ova-hero-sik{ }

/* Hero'nun altındaki ince şerit (varsa). Yüksekliğini JS ölçüp
   --ova-strip-h'ye yazar; şerit basılmazsa değişken 0 px kalır. */
.ova-hero-serit{
  position:relative;
  z-index:var(--z-icerik, 1);
}

/* Kilitten sonra gelen bloklar: mobilde özel bir şey yapmaz */
.ova-ustte{ position:relative; z-index:1; }
.ova-ortu{ background-color:var(--yuzey-2, #f6f8fc); }


/* ===========================================================================
   2. MONİTÖR EKRANI — taban: basılmaz
   Dar pencerede panel metnin arkasına düşüyor, monitör yazısı okunmuyor.
   ======================================================================== */
.ova-ekran{ display:none; }


/* ===========================================================================
   3. MASAÜSTÜ (≥1024 px) — sinematik kilit açılır
   Kilit tarayıcının kendi sticky'si ile kurulur; JS hiçbir şeyi taşımaz,
   yalnızca --ova-* değişkenlerini yazar.
   ======================================================================== */
@media (min-width:1024px){

  /* --- 3.1 Kilit ------------------------------------------------------- */
  .ova-hero-pin{
    position:sticky;
    top:var(--ova-pin-top, 0px);
    z-index:0;
    height:var(--ova-pin-h, auto);
  }

  /* Metin sütunu, şeridin üstünde kalan alanı doldurur.
     Bölümün akışına dokunulmuyor; ortalanan genişlik korunuyor. */
  .ova-hero-pin > .ova-hero-govde{
    min-height:0;
    height:calc(100% - var(--ova-strip-h, 0px));
    padding-top:clamp(48px, 7vh, 112px);
    padding-bottom:clamp(20px, 4vh, 72px);
    /* Kısa pencerede kolon bir tık ufalır (bkz. ova-film.js → --ova-kucult) */
    transform:scale(var(--ova-kucult, 1));
    transform-origin:left center;
  }

  /* Dar/kısa pencerede kilitli sahne: ölçüler sıkışır, hiçbir şey kırpılmaz */
  .ova-hero-sik > .ova-hero-govde{
    padding-top:clamp(20px, 3vh, 64px);
    padding-bottom:clamp(12px, 2vh, 36px);
  }
  .ova-hero-sik .ova-hero-serit{ padding-block:6px; }

  /* Kilitli hero'da video paneli, altındaki şeridin üstünde biter:
     kare kırpılmıyor, monitörün masası şeridin altında kalmıyor. */
  .ova-hero-media{
    position:absolute;
    top:0;
    right:0;
    bottom:var(--ova-strip-h, 0px);
    margin-top:0;
    border-radius:0;
    width:min(54%, 900px);
  }
  /* <picture> satır içi bir sarmalayıcıdır; yüksekliği kendiliğinden panelin
     boyuna uzamaz ve poster panelin üst yarısında asılı kalırdı. Panele
     oturtuluyor ki alt tarafta koyu bir boşluk kalmasın. */
  .ova-hero-media picture{
    position:absolute;
    inset:0;
    display:block;
  }
  .ova-hero-media video,
  .ova-hero-media img{
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
  }

  /* Metin sütunu, mutlak konumlu medya panelinin SOLUNDA kalır.
     Bu sınır olmadan h1 panelin altına giriyor ve son kelime okunmuyordu
     (1440 px'te ölçüldü: h1 sağ kenarı 770 px, panel sol kenarı 634 px). */
  .ova-hero-govde > .hero-etiket,
  .ova-hero-govde > .hero-baslik,
  .ova-hero-govde > .hero-ozet,
  .ova-hero-govde > .hero-eylem,
  .ova-hero-govde > .hero-not{
    max-width:min(600px, calc(46vw - 96px));
  }

  /* Kilit bitip hero tamamen örtüldüğünde katmanı boşalt */
  .ova-hero-uyku{ visibility:hidden; }

  /* --- 3.2 Hero'nun üzerine kayan ilk blok ----------------------------- */
  /* Sayfa zeminini ve ızgara dokusunu birebir taşır; gradyan değil, çizgi. */
  .ova-ortu{
    background-color:var(--yuzey-4, #f4f7fb);
    background-image:
      linear-gradient(var(--izgara-cizgi, rgba(24,103,209,.18)) 1px, transparent 1px),
      linear-gradient(90deg, var(--izgara-cizgi, rgba(24,103,209,.18)) 1px, transparent 1px);
    background-size:80px 80px, 80px 80px;
    background-position:
      var(--ova-ortu-x, 0px) var(--ova-ortu-y, 0px),
      var(--ova-ortu-x, 0px) var(--ova-ortu-y, 0px);
    box-shadow:
      0 -28px 60px -26px rgba(15,32,55,.28),
      0 -1px 0 0 rgba(24,103,209,.10);
  }

  /* --- 3.3 Monitör ekranı ---------------------------------------------- */
  /* ova-film.js'in kare kare ölçtüğü dikdörtgen. Kaydırma ilerledikçe
     önce marka, sonra birinci satır, sonra ikinci satır yerine oturur. */
  .ova-ekran{
    display:flex;
    position:absolute;
    left:var(--ova-ekran-x, 0px);
    top:var(--ova-ekran-y, 0px);
    width:var(--ova-ekran-w, 0px);
    height:var(--ova-ekran-h, 0px);
    align-items:center;
    justify-content:center;
    padding:0 7% 7%;           /* optik merkez: tam ortanın bir tık üstü */
    pointer-events:none;
    z-index:var(--z-ekran, 2);
  }

  .ova-ekran-ic{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--ova-ekran-bosluk, 18px);
    text-align:center;
  }

  .ova-ekran-logo{
    display:block;
    width:auto;
    height:var(--ova-ekran-logo, 40px);
    opacity:var(--logo-o, 0);
    transform:translate3d(0, var(--logo-y, 14px), 0);
    filter:drop-shadow(0 2px 14px rgba(6,18,38,.55));
  }

  .ova-ekran-yazi{
    margin:0;
    font-family:var(--yt-baslik, 'Syne', system-ui, sans-serif);
    font-weight:600;
    font-size:var(--ova-ekran-yazi, 22px);
    line-height:1.18;
    letter-spacing:-0.02em;
    color:rgba(255,255,255,.94);
    text-shadow:0 1px 18px rgba(6,18,38,.5);
  }

  .ova-ekran-satir{
    display:block;
    opacity:var(--satir-o, 0);
    transform:translate3d(0, var(--satir-y, 14px), 0);
  }
  .ova-ekran-satir[data-satir="2"]{ color:rgba(201,223,252,.95); }

  /* Ekranın kendi ışığı: yazı belirdikçe cam canlanır.
     Tek renk ailesinden radyal ışık — mor-mavi gradyan değil. */
  .ova-ekran::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(120% 90% at 50% 42%,
               rgba(24,103,209,.22) 0%,
               rgba(24,103,209,.06) 45%,
               rgba(24,103,209,0) 72%);
    opacity:var(--ova-ekran-isik, 0);
  }

  /* --- 3.4 Kelime kelime dizilen başlık -------------------------------- */
  .ova-word-mask{
    display:inline-block;
    overflow:hidden;
    vertical-align:bottom;
  }
  .ova-word{
    display:inline-block;
    opacity:var(--word-p, 0);
    transform:translate3d(0, var(--word-y, 110%), 0) rotate(var(--word-rotate, 8deg));
    transform-origin:left bottom;
    will-change:transform;
  }
  .ova-word-accent .ova-word{ color:var(--birincil, #1867d1); }
  .ova-type-scene .ova-ekran-yazi{ opacity:var(--type-progress, 1); }
}


/* ===========================================================================
   4. AZALTILMIŞ HAREKET — kilit tamamen kapanır, video yerine poster
   ======================================================================== */
@media (prefers-reduced-motion:reduce){
  .ova-hero-pin{
    position:static !important;
    height:auto !important;
    top:auto !important;
  }
  .ova-hero-pin > .ova-hero-govde{
    height:auto;
    transform:none;
  }
  .ova-hero-uyku{ visibility:visible !important; }
  .ova-hero-media{
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    margin-top:24px;
    border-radius:var(--r-6, 16px);
  }
  .ova-hero-media video{ display:none !important; }
  .ova-hero-poster{ display:block; }
  .ova-hero-media img{ aspect-ratio:16/10; height:auto; }
  .ova-ekran{ display:none !important; }
  .ova-ortu{ box-shadow:none; }
  .ova-word{ opacity:1; transform:none; }
}


/* ===========================================================================
   5. YAZDIRMA — film kağıda gitmez, poster gider
   ======================================================================== */
@media print{
  .ova-hero-pin{ position:static !important; height:auto !important; }
  .ova-hero-govde{ transform:none !important; height:auto !important; }
  .ova-hero-uyku{ visibility:visible !important; }
  .ova-hero-media{ position:static !important; width:auto !important; }
  .ova-hero-media video{ display:none !important; }
  .ova-hero-poster{ display:block; }
  .ova-ekran{ display:none !important; }
  .ova-ortu{ background-image:none !important; box-shadow:none !important; }
}