/* ══════════════════════════════════════════════════════════════════════
   responsive.css — JAPANnow Projesi
   optimizasyon-agent — 2026-06-14
   Mobile-first breakpoint sistemi ve mobil düzeltmeler
   Animasyon stilleri: animations.css (animasyon-agent)
   Renk/tipografi: main.css / design.css (tasarim-agent)
══════════════════════════════════════════════════════════════════════ */

/* ══ GLOBAL MOBİL DÜZELTMELER ══ */

/* Sabit genişlik / overflow koruması — tüm sayfalarda */
*, *::before, *::after {
  box-sizing: border-box;
}

img, video {
  max-width: 100%;
}

/* ══ TOUCH-ACTION: YATAY SCROLL KİLİTLEME ÖNLEMESİ ══ */
/* Scroll container'lara pan-y: yalnızca dikey scroll izni verir,
   yatay kaydırmaları engeller ve tarayıcının doğal scroll'unu bloke etmez */
@media (max-width: 768px) {
  html, body {
    touch-action: pan-y;
    overscroll-behavior-y: contain;
  }

  /* Yatay scroll gerektiren bileşenler: kendi ekseni açık */
  .oi-path-container,
  .notes-track,
  .ticker-track {
    touch-action: pan-x;
  }
}

/* ══ iOS SVH FIX — Hero bölümleri ══ */
/* 100vh iOS Safari'de address bar yüksekliğini hesaba katmaz */
/* Bu dosya üzerinden override: fullscrean.css, okul-hero.css, hizmetler-hero.css, kurslar.css */
.video-hero-wrap {
  min-height: 100svh;
}

.srv-hero {
  min-height: 100svh;
}

.oi-hero {
  min-height: 100svh;
}

.kurs-hero-wrap {
  min-height: 100svh;
}

/* about sayfası sticky hero — 100vh içinde kalması gerektiği için svh değiştirilmez,
   ama sticky öğe svh ile güncellenir */
.about-hero-sticky {
  min-height: 100svh;
}

/* ══ SRV-VIDEO-STRIP GENİŞLİK FIX ══ */
/* hizmetler-comp.css'teki width:130% taşıyor */
.srv-video-strip video {
  width: 100%;
}

/* ══ NOTE-CARD SABİT GENİŞLİK FIX ══ */
/* notes.css'te width: 380px sabit — mobilde taşıyor */
.note-card {
  width: 380px;
  max-width: 100%;
}

/* ══ CONTACT CONTENT — 88vw SORUNSALLAŞTIRICI ══ */
/* Küçük ekranlarda 88vw yeterli padding bırakmıyor */
@media (max-width: 480px) {
  .contact-content-sec {
    max-width: 100%;
    padding: 0 5vw;
  }
}

/* ══ CONTACT HERO — ÇAKIŞAN PADDING DÜZELTMESİ ══ */
/* contact.css'deki 992px media query 160px üstüne indiyor,
   ama 769px–992px arası hâlâ 160px kalır.
   Bu blok 768px'e kadar olan aralığı daha küçük padding'e çeker. */
@media (max-width: 768px) {
  .contact-hero-sec {
    /* contact.css'deki @media(992px) 160px değerini override eder */
    padding-top: 130px;
    padding-bottom: 60px;
  }
}

/* ══ iOS INPUT ZOOM — 480px–768px ARASI EKSİK ══ */
/* main.css'teki 768px kuralı !important kullanıyor (16px);
   responsive.css'in 480px kuralı sadece küçük mobili kapsar.
   480px–768px arası için ayrıca tanımlandı. */
@media (min-width: 481px) and (max-width: 768px) {
  input, textarea, select {
    font-size: max(16px, 1rem);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   REDUCED MOTION — Erişilebilirlik
══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  /* Kayan bantlar durdurul */
  .notes-track {
    animation: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ticker-track {
    animation: none;
  }

  .oi-tips-track {
    animation: none;
  }

  .social-ticker-track {
    animation: none;
  }

  /* Reveal animasyonları anında göster */
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .title-reveal span {
    transform: none;
    transition: none;
  }

  /* Video-row animasyonlar */
  .video-row {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Grid video — scale/blur animasyonsuz */
  .grid-video {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  /* Kanji float animasyonu */
  .kd-char {
    animation: none;
  }

}

/* ══ MOBİL PERFORMANS OPTİMİZASYONLARI ══ */
/* Dokunmatik cihazlarda backdrop-filter ve will-change GPU yükünü azalt */
@media (hover: none) and (pointer: coarse) {
  /* Nav stuck: blur kaldır — opak arka plan yeterli */
  nav.stuck {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(247, 245, 240, 0.98);
  }

  /* Mobil nav paneli: blur kaldır */
  .mobile-nav-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(247, 245, 240, 0.99);
  }

  /* Cursor elementleri dokunmatik cihazda gizle — GPU layer tasarrufu */
  #cur-dot,
  #cur-ring {
    display: none;
    will-change: auto;
  }

  /* Logo ve hero katmanlarında will-change devre dışı */
  .central-logo,
  .k-bg-layer,
  .about-bg-layer {
    will-change: auto;
  }
}