/* ============================================================================
   OvaSoft — mobil ve dar ekran düzeltmeleri
   Paket derlenmiş olduğu için düzeltmeler burada, en son yüklenen katmanda
   toplanıyor. Kural sırası: önce ölçü (hero, bölüm boşlukları), sonra
   okunurluk (yazı tabanı), sonra dokunma hedefleri, en son kaydırmalı şeritler.
   Hiçbir içerik gizlenmiyor; yalnız yerleşimi değişiyor.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1) HERO — telefonda video 220 piksellik bir şeritti; marka anı görünmüyordu.
   Panel gerçek bir sahne yüksekliğine çıkıyor, metin videonun altında kendi
   zemininde duruyor.
   ------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .ova-hero-media {
    top: 0 !important;
    bottom: auto !important;
    height: clamp(300px, 46svh, 420px) !important;
    opacity: 1 !important;
  }

  .ova-hero-govde {
    min-height: 0 !important;
    padding-top: calc(clamp(300px, 46svh, 420px) - 56px) !important;
    padding-bottom: 28px !important;
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(clamp(300px, 46svh, 420px) - 150px),
      #f4f7fc calc(clamp(300px, 46svh, 420px) - 40px)
    ) !important;
  }

  /* Videonun üstündeki perde: üst kısım açık kalsın, alt uçta metne bağlansın */
  .ova-hero-scrim {
    background-image: linear-gradient(
      180deg,
      rgba(244, 247, 251, 0.30) 0%,
      rgba(244, 247, 251, 0.18) 42%,
      rgba(244, 247, 251, 0.55) 78%,
      rgba(244, 247, 251, 0.95) 100%
    ) !important;
  }

  .ova-hero h1 { font-size: 26px !important; }

  /* Rakam şeridi: dört hücre iki sıra hâlinde, daha sıkı */
  .ed-signature-cell { min-height: 0 !important; padding: 14px !important; }
  .ed-signature-grid { gap: 10px !important; }
}

/* ---------------------------------------------------------------------------
   2) BÖLÜM BOŞLUKLARI — masaüstü için yazılan 80–96 piksellik dikey boşluklar
   telefonda sayfayı iki katına çıkarıyordu.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  main .py-24,
  main .py-20,
  main section.py-24,
  main section.py-20 { padding-top: 44px !important; padding-bottom: 44px !important; }

  main .mt-20 { margin-top: 40px !important; }
  main .mt-14 { margin-top: 28px !important; }
  main .mt-12 { margin-top: 26px !important; }
  main .mt-10 { margin-top: 22px !important; }
  main .space-y-16 > * + * { margin-top: 44px !important; }

  .ova-yorum { padding-block: 44px !important; }
}

/* ---------------------------------------------------------------------------
   3) OKUNURLUK — 8–12 piksellik etiketler telefonda okunmuyordu.
   Tabanı 12 piksele çekiyoruz; harf aralığı da buna göre geri alınıyor.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  main .text-\[8px\],
  main .text-\[9px\],
  main .text-\[10px\] { font-size: 12px !important; letter-spacing: 0.06em !important; }

  main .text-\[11px\] { font-size: 12.5px !important; letter-spacing: 0.05em !important; }
  main .text-\[12px\] { font-size: 13px !important; }
  main .text-\[13px\] { font-size: 13.5px !important; }
  main .text-\[14px\] { font-size: 14.5px !important; }

  footer .text-\[10px\],
  footer .text-\[11px\],
  footer .text-\[12px\] { font-size: 12.5px !important; }

  .ova-yorum-etiket { font-size: 12px !important; }
  .ova-yorum-is { font-size: 12px !important; }
}

/* ---------------------------------------------------------------------------
   4) DOKUNMA HEDEFLERİ — gezinme ve altbilgi bağlantıları 20 piksel yüksekti,
   form alanları 24. Parmakla isabet alınmıyordu; iOS 16 pikselin altındaki
   alanlara odaklanınca sayfayı da yakınlaştırıyor.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  header a,
  header button,
  footer a { min-height: 44px; display: inline-flex; align-items: center; }

  footer li a { padding-block: 4px; }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  textarea { min-height: 112px !important; }

  label { font-size: 13.5px !important; }
}

/* ---------------------------------------------------------------------------
   5) ÇÖZÜM ALANLARI — dört kart her biri bir ekran boyundaydı (3.675 piksel).
   Yapışkan yığın telefonda hissedilmiyor; kartlar normal akışa alınıp
   içleri sıkıştırılıyor.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  main .sticky.flex.items-center[class*="min-h-"] {
    position: static !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 16px !important;
  }
}

/* ---------------------------------------------------------------------------
   6) ALT ÇUBUK — 73 piksellik tam genişlikte çubuk 28 ekranın hepsinde
   duruyordu. İnceltiliyor ve sayfa alt boşluğu ona göre ayarlanıyor.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .agency-page-bg { padding-bottom: 72px !important; }

  body > div > .agency-page-bg > .fixed.inset-x-0.bottom-0 {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  body > div > .agency-page-bg > .fixed.inset-x-0.bottom-0 a,
  body > div > .agency-page-bg > .fixed.inset-x-0.bottom-0 button {
    min-height: 46px !important;
  }
}

/* ---------------------------------------------------------------------------
   7) KAYDIRMALI ŞERİTLER — telefonda yan yana duran kart dizileri alt alta
   yığılınca her kart bir ekran oluyordu: ana sayfa 28 ekrana çıkmıştı.
   Kart dizileri parmakla yana kaydırılan şeritlere dönüyor. Hiçbir kart
   kaldırılmıyor; sonraki kartın kenarı görünerek şeridin devamı olduğu
   belli oluyor.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .ova-serit {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    gap: 14px !important;
    /* şerit sayfa kenarlarına kadar uzanır, kartlar hizada kalır */
    margin-inline: -20px !important;
    padding: 4px 20px 18px !important;
    scrollbar-width: none;
  }

  .ova-serit::-webkit-scrollbar { display: none; }

  .ova-serit > * {
    flex: 0 0 86% !important;
    max-width: 86% !important;
    min-width: 0 !important;
    scroll-snap-align: start;
    margin-top: 0 !important;
  }

  /* süsleme katmanları şeridin akışına girmesin */
  .ova-serit > .pointer-events-none,
  .ova-serit > .absolute { flex: 0 0 auto !important; max-width: none !important; }
}

/* ---------------------------------------------------------------------------
   8) ÇÖZÜM KARTLARI — görsel yarısı telefonda 240 pikseldi, metinle birlikte
   kart bir ekranı aşıyordu.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  main .sticky.flex.items-center[class*="min-h-"] article > .grid > .flex.flex-col.justify-center { padding: 22px !important; }
  main .sticky.flex.items-center[class*="min-h-"] article > .grid > .relative[class*="min-h-"] { min-height: 150px !important; }
}

/* Şerit konum noktaları */
.ova-nokta-sirasi { display: none; }

@media (max-width: 1023px) {
  .ova-nokta-sirasi {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin: -4px 0 4px;
  }

  .ova-nokta {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(24, 103, 209, 0.22);
    transition: width 0.2s ease, background 0.2s ease;
  }

  .ova-nokta-etkin { width: 20px; background: #1867d1; }

  /* Koyu zeminli bölümlerde noktalar görünsün */
  .ova-yorum .ova-nokta { background: rgba(255, 255, 255, 0.28); }
  .ova-yorum .ova-nokta-etkin { background: #fff; }
}


/* Tablette şerit iki kart gösterir: sütunlar zaten iki, ölçü korunuyor */
@media (min-width: 640px) and (max-width: 1023px) {
  .ova-serit > * { flex: 0 0 46% !important; max-width: 46% !important; min-width: 0 !important; }
  .ova-serit { scroll-padding-left: 32px; margin-inline: -32px !important; padding-inline: 32px !important; }
}

/* ---------------------------------------------------------------------------
   9) MASAÜSTÜ DİKEY RİTİM — bölüm araları 96–128 piksele kadar çıkıyor,
   sayfa 18 ekrana uzuyordu. Boşluk kompozisyonu bozmadan sıkılaştırılıyor.
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  main section.py-24,
  main .py-24 { padding-top: 72px !important; padding-bottom: 72px !important; }

  main .sm\:py-32 { padding-top: 80px !important; padding-bottom: 80px !important; }
  main .py-20 { padding-top: 64px !important; padding-bottom: 64px !important; }
  main .mt-20 { margin-top: 64px !important; }
  main .space-y-16 > * + * { margin-top: 72px !important; }
  .ova-yorum { padding-block: 76px !important; }
}

/* ---------------------------------------------------------------------------
   10) HERO İLK EKRAN — "Sizi Arayalım" düğmesi ilk ekranın altında kalıyordu.
   Sahne bir tık kısalıyor, metin blokları arasındaki boşluklar toparlanıyor;
   böylece video, başlık ve çağrı aynı ekranda bitiyor.
   ------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .ova-hero-media { height: clamp(250px, 34svh, 330px) !important; }

  .ova-hero-govde {
    padding-top: calc(clamp(250px, 34svh, 330px) - 44px) !important;
    padding-bottom: 20px !important;
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(clamp(250px, 34svh, 330px) - 130px),
      rgba(244, 247, 252, 0.72) calc(clamp(250px, 34svh, 330px) - 70px),
      #f4f7fc calc(clamp(250px, 34svh, 330px) - 24px)
    ) !important;
  }

  .ova-hero-govde .agency-chip { margin-top: 0 !important; }
  .ova-hero-govde h1 { margin-top: 14px !important; }
  .ova-hero-govde h1 + p { margin-top: 12px !important; }
  .ova-hero-govde > div > p:first-of-type + p { margin-top: 10px !important; }
  .ova-hero-govde .mt-5 { margin-top: 12px !important; }
  .ova-hero-govde .mt-6 { margin-top: 14px !important; }
  .ova-hero-govde .mt-8 { margin-top: 18px !important; }
  .ova-hero-govde .min-h-\[56px\] { min-height: 0 !important; }
}

/* ---------------------------------------------------------------------------
   11) ENTEGRASYON LOGOLARI — kutular 56, 108, 132 ve 168 piksel arasında
   gelişigüzel değişiyor, içlerindeki logolar 18–30 piksele düşüyordu; şerit
   bozuk bir ızgara gibi görünüyordu. Kutu ve logo ölçüsü tek değere çekiliyor.
   ------------------------------------------------------------------------- */
.integ-tile {
  width: 118px !important;
  height: 60px !important;
  min-width: 118px !important;
  flex: 0 0 118px !important;
}

.integ-tile img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72% !important;
  height: 56% !important;
  object-fit: contain;
}

@media (max-width: 639px) {
  .integ-tile {
    width: 96px !important;
    height: 52px !important;
    min-width: 96px !important;
    flex: 0 0 96px !important;
  }
}

/* Dar ekranda süsleme katmanlarından kalan 1 piksellik yatay kayma kapanır.
   "clip" seçildi: "hidden" yapışkan bölümleri bozuyor, clip bozmuyor. */
@media (max-width: 1023px) {
  .agency-page-bg { overflow-x: clip; }
}

/* ---------------------------------------------------------------------------
   12) KALAN DOKUNMA HEDEFLERİ — KVKK onay kutusu 13×13 pikseldi, hap biçimli
   bağlantılar 34. Metin içindeki satır içi bağlantılara dokunulmuyor: onlara
   yükseklik vermek satırı bozar.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  input[type="checkbox"],
  input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    flex: 0 0 22px;
  }

  main a[class*="rounded-full"],
  main a[class*="rounded-xl"],
  main a[class*="rounded-2xl"],
  main button[class*="rounded-full"] { min-height: 40px; }

  main nav a { padding-block: 10px; }
}

/* Oklu metin bağlantıları (bir satırlık çağrılar) parmak payı kazanır.
   Hap biçimli düğmeler dışarıda: onların kendi yüksekliği zaten var. */
@media (max-width: 1023px) {
  main a:not([class*="rounded"]):has(> svg) { padding-block: 9px; }
}

/* ---------------------------------------------------------------------------
   13) KAYDIRMA MALİYETİ
   Sayfa 14.000 piksel; tarayıcı görünmeyen bölümleri de boyuyordu. İki kural
   kaydırmanın takılmasını kaldırıyor:
   Süsleme amaçlı dev bulanık daireler telefonda kaldırılıyor: her biri 90
   piksellik canlı filtre demek ve dar ekranda görsel katkısı yok.
   (content-visibility denendi, geri alındı: sayfa yüksekliği tahminle
   hesaplandığı için kaydırma çubuğu oynuyordu — takılmanın kendisi.)
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  main [class*="blur-3xl"],
  main [class*="blur-2xl"],
  main [class*="blur-[90px]"],
  main [class*="blur-[80px]"] { display: none !important; }
}