/* ============================================================================
   OvaSoft — özel bölümler: hero sinematik kilidi, monitör ekranı ve yorumlar
   Hero kendi ölçüsünde kalır: solda metin kolonu, sağda video paneli.
   Kaydırma paneldeki iki parçayı tek film gibi sarar; kamera son sahnede
   monitöre yaklaşınca OvaSoft markası ve slogan, videoya gömülü değil
   gerçek HTML olarak monitör ekranının içinde tek tek belirir.
   Ölçüler ova-film.js tarafından yazılır.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Sinematik kilit: tarayıcının kendi sticky'si. Kaydırma sırasında JS hiçbir
   şey taşımadığı için bölüm piksel piksel sabit kalır, titremez.
   ------------------------------------------------------------------------- */
.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 (flex yok): mx-auto ile 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 metin kolonu ölçüsünde küçülür: yerleşim aynı kalır,
   kolon transform ile bir tık ufalır (bkz. ova-film.js → --ova-kucult). */
.ova-hero-pin > .ova-hero-govde {
  transform: scale(var(--ova-kucult, 1));
  transform-origin: left center;
}

/* Dar 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 .ed-signature-grid { padding: 0.4rem 0 0.5rem; gap: 0.55rem; }
.ova-hero-sik .ed-signature-cell { min-height: 5.4rem; padding: 0.75rem 0.9rem; }

/* Kilitli hero'da video paneli, altındaki rakam şeridinin üstünde biter.
   Panel şeridin arkasına uzandığında kare boşuna kırpılıyor ve monitörün
   masası şeridin altında kalıyordu; sınır şeride çekilince kare neredeyse
   hiç kırpılmadan, masa ve klavyeyle birlikte görünüyor. */
@media (min-width: 1024px) {
  .ova-hero-media { bottom: var(--ova-strip-h, 0px); }
}

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

/* Kilitten sonraki bölümler hero'nun üzerine kayarak açılır */
.ova-ustte { position: relative; z-index: 1; }

/* Hero'nun üzerine kayan ilk blok: sayfa zeminini birebir taşır */
.ova-ortu {
  background-color: var(--tm-bg);
  background-image: linear-gradient(var(--tm-teal-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--tm-teal-line) 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, 0.28),
              0 -1px 0 0 rgba(24, 103, 209, 0.10);
}

/* Kaydırmayla sarılan videolar: kare geçişlerinde yeniden boyama olmasın */
#ovaHeroVideo video {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ---------------------------------------------------------------------------
   Monitör ekranı — panelin içinde, ova-film.js'in ölçtüğü dikdörtgen.
   Kaydırma ilerledikçe önce marka, sonra birinci satır, sonra ikinci satır
   yerine oturur; geri kaydırınca aynı sırayla çekilir.
   ------------------------------------------------------------------------- */
.ova-ekran {
  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);
  display: flex;
  align-items: center;
  justify-content: center;
  /* optik merkez: tam ortanın bir tık üstü */
  padding: 0 7% 7%;
  pointer-events: none;
  z-index: 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, 0.55));
}

.ova-ekran-yazi {
  margin: 0;
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 560;
  font-size: var(--ova-ekran-yazi, 22px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 18px rgba(6, 18, 38, 0.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, 0.95); }

/* Ekranın kendi ışığı: yazı belirdikçe cam biraz canlanır */
.ova-ekran::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 42%,
              rgba(24, 103, 209, 0.22) 0%,
              rgba(24, 103, 209, 0.06) 45%,
              rgba(24, 103, 209, 0) 72%);
  opacity: var(--ova-ekran-isik, 0);
}

/* Dar ekranda panel metnin arkasına düşüyor: monitör yazısı basılmıyor */
@media (max-width: 1023px) {
  .ova-ekran { display: none; }
}


/* ============================================================================
   Müşteri sözü — OvaSoft'a özgü bölüm.
   Sonsuz kayan yorum nehri yerine sabit bir ızgara: okunur, hafif ve
   kaydırmada hiçbir şey hareket etmiyor. Stok yüz fotoğrafı yok; kimlik
   baş harflerden kuruluyor.
   ========================================================================= */
.ova-yorum {
  position: relative;
  padding: clamp(56px, 8vh, 104px) 0;
  background-color: #F4F7FB;
}

.ova-yorum-ic {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 clamp(20px, 4vw, 40px);
}

.ova-yorum-etiket {
  margin: 0;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #1867d1;
}

.ova-yorum-baslik {
  margin: 14px 0 0;
  max-width: 19ch;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: clamp(1.85rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: #1f2329;
}

.ova-yorum-baslik span { color: #1867d1; }

.ova-yorum-alt {
  margin: 16px 0 0;
  max-width: 54ch;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: #545961;
}

.ova-yorum-liste {
  margin: clamp(30px, 4vh, 48px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1023px) { .ova-yorum-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .ova-yorum-liste { grid-template-columns: minmax(0, 1fr); } }

.ova-yorum-kart {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(20px, 2vw, 28px);
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(24, 103, 209, 0.12);
  box-shadow: 0 10px 28px -22px rgba(15, 32, 55, 0.5);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 260ms ease;
}

.ova-yorum-kart:hover {
  transform: translateY(-3px);
  border-color: rgba(24, 103, 209, 0.28);
  box-shadow: 0 22px 44px -26px rgba(15, 32, 55, 0.45);
}

.ova-yorum-metin {
  margin: 0;
  flex: 1;
  font-size: clamp(0.94rem, 1.05vw, 1rem);
  line-height: 1.62;
  color: #2c3037;
}

.ova-yorum-kimlik {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(24, 103, 209, 0.1);
}

.ova-yorum-harf {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(140deg, #1485fd 0%, #075cda 55%, #03319b 100%);
  color: #fff;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ova-yorum-kimlik b {
  display: block;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 650;
  color: #1f2329;
}

.ova-yorum-kimlik i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 0.8rem;
  color: #6b7280;
}

.ova-yorum-is {
  margin: 0;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(24, 103, 209, 0.08);
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  color: #1248ac;
}

@media (prefers-reduced-motion: reduce) {
  .ova-yorum-kart { transition: none; }
  .ova-yorum-kart:hover { transform: none; }
}