/* ==========================================================================
   LensFuzyon.com — MOBILE FIXES
   --------------------------------------------------------------------------
   Bu dosya style.css ve banner.css'ten SONRA yüklenir.
   Amaç: masaüstü görünümü hiç değiştirmeden mobil (360–640px) ve
   yatay telefon / küçük tablet (≤1024px) deneyimini düzeltmek.

   Kural: buradaki her kural bir @media bloğu içindedir; ≥1025px'te
   hiçbir şey değişmez.
   ========================================================================== */


/* ==========================================================================
   1) NAVİGASYON KIRILMA NOKTASI  (≤1024px)
   --------------------------------------------------------------------------
   SORUN: style.css'te .nav-links yalnızca ≤640px'te gizleniyor, hamburger
   yalnızca ≤640px'te görünüyordu. Masaüstü menüsünün gerçek genişliği
   ~1150px olduğu için 641–1024px arasında (yatay telefon, küçük tablet)
   menü logonun üstüne biniyor / ekrandan taşıyordu.
   ÇÖZÜM: eşiği 1024px'e çekiyoruz.
   ========================================================================== */
@media (max-width: 1024px) {
  .nav-links {
    display: none !important;
  }

  .hamburger {
    display: flex !important;
    /* Dokunma hedefi ≥44px (WCAG 2.5.5 / Apple HIG) */
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .navbar {
    padding: 0 var(--space-lg);
  }

  /* Megamenü mobilde hiç render edilmesin (width:max-content taşma yapıyordu) */
  .megamenu-dropdown {
    display: none !important;
  }
}


/* ==========================================================================
   2) MOBİL MENÜ — kaydırılabilirlik ve erişilebilirlik
   --------------------------------------------------------------------------
   SORUN: .mobile-menu inset:0 + justify-content:center + overflow yok.
   6 üst seviye link + 2 akordeon (6 ve 9 alt link) açıldığında içerik
   ekrana sığmıyor, taşan kısma ULAŞILAMIYORDU. Ayrıca menü z-index:999,
   navbar 1000 ve ticker 1100 olduğu için üstteki linkler navbar'ın
   altında kalıyordu.
   ========================================================================== */
@media (max-width: 1024px) {
  .mobile-menu {
    /* Ticker (40px) + navbar (72px) altından başla */
    top: calc(var(--banner-height, 40px) + var(--nav-height, 72px));
    padding: var(--space-lg) var(--space-lg) calc(var(--space-2xl) + 40px);
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;

    /* Kaydırılabilir yap */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .mobile-menu a,
  .mobile-menu .mobile-dropdown-btn {
    /* 2rem Bebas Neue çok yer kaplıyordu */
    font-size: 1.35rem;
    letter-spacing: 2px;
    text-align: left;
    /* Dokunma hedefi */
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-menu .mobile-dropdown-btn {
    font-family: var(--font-display);
    justify-content: space-between;
    width: 100%;
  }

  .mobile-dropdown-content {
    padding-left: 14px;
    margin: 6px 0 12px;
  }

  .mobile-dropdown-content a {
    font-family: var(--font-body);
    font-size: 0.95rem !important;
    letter-spacing: 0;
    min-height: 44px;
    border-bottom: none;
    padding: 6px 0 !important;
  }

  /* Teklif Al butonu liste görünümünden çıksın */
  .mobile-menu a.btn-cta {
    justify-content: center;
    border-bottom: none;
    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: 0.5px;
    padding: 14px 18px;
    margin-top: var(--space-lg);
  }
}

/* Çok kısa ekranlar (yatay telefon) — daha da sıkı */
@media (max-width: 1024px) and (max-height: 480px) {
  .mobile-menu a,
  .mobile-menu .mobile-dropdown-btn {
    font-size: 1.1rem;
    min-height: 42px;
  }
}


/* ==========================================================================
   3) HERO — mobil tarayıcı adres çubuğu (100vh sorunu)
   --------------------------------------------------------------------------
   SORUN: 100vh mobil Chrome/Safari'de adres çubuğunu hesaba katmaz;
   hero'nun altı kesilir ve scroll'da zıplama olur.
   ÇÖZÜM: svh/dvh destekleyen tarayıcılarda onu kullan (progressive).
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-slider {
    min-height: 75svh;
    max-height: 600px;
  }

  .slider-track {
    height: 75svh;
    max-height: 600px;
  }
}

@media (max-width: 640px) {
  .hero-slide {
    padding: calc(var(--banner-height, 40px) + var(--nav-height, 72px) + var(--space-sm))
             var(--space-lg)
             calc(var(--space-xl) + 10px);
    justify-content: flex-end;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-title {
    font-size: clamp(1.85rem, 8.5vw, 2.6rem);
    letter-spacing: 1px;
    /* Uzun Türkçe kelimeler taşmasın */
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  .hero-subtitle {
    font-size: 0.95rem;
    max-width: 100%;
    margin-bottom: var(--space-lg);
  }

  .hero-badge {
    font-size: 0.75rem;
    padding: 6px 14px;
    margin-bottom: var(--space-lg);
  }

  /* Slider okları floating butonlarla çakışıyordu → sola al ve küçült */
  .slider-nav {
    bottom: var(--space-xl);
    right: auto;
    left: var(--space-lg);
    gap: var(--space-md);
  }

  .slider-arrow {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }

  /* "Scroll" göstergesi mobilde gereksiz ve slider okları ile çakışıyor */
  .hero-scroll {
    display: none;
  }

  /* Dev blur orb performans + taşma kaynağı */
  .orb-1 {
    width: 320px;
    height: 320px;
    filter: blur(60px);
  }
}


/* ==========================================================================
   4) YATAY TAŞMA (horizontal overflow) GİDERME
   --------------------------------------------------------------------------
   SORUN: minmax(280–340px, …) kullanan grid'ler 320–390px ekranlarda
   tek kolonu viewport'tan geniş yapıyordu. body'de overflow-x:clip
   olduğu için kullanıcı kaydıramıyor, içerik KESİLİYORDU.
   ========================================================================== */
@media (max-width: 640px) {
  .services-grid,
  .blog-grid,
  .team-grid,
  .urunler-grid,
  .pdetail-feats-grid,
  .eticaret-pricing-grid {
    grid-template-columns: 1fr !important;
  }

  .urunler-grid {
    justify-content: stretch;
  }

  .pdetail-price-box {
    min-width: 0;
    width: 100%;
    display: block;
    padding: 20px 18px;
    text-align: center;
  }

  /* Genel taşma kalkanı */
  img,
  video,
  iframe,
  canvas,
  pre,
  blockquote {
    max-width: 100%;
  }

  pre,
  code {
    overflow-x: auto;
    word-break: break-word;
  }

  /* Uzun URL / e-posta adresleri satırı taşırmasın */
  p, li, td, th, dd, .section-subtitle {
    overflow-wrap: break-word;
  }
}

/* Geniş karşılaştırma tablosu — yatay kaydırma ipucu */
@media (max-width: 768px) {
  .urun-compare-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}


/* ==========================================================================
   5) FORMLAR — iOS otomatik yakınlaştırma (auto-zoom) engeli
   --------------------------------------------------------------------------
   SORUN: iOS Safari, font-size < 16px olan bir input'a odaklanınca
   sayfayı zorla yakınlaştırır ve geri uzaklaştırmaz. Sitedeki tüm
   input'lar 0.9–0.95rem (14.4–15.2px) idi.
   ========================================================================== */
@media (max-width: 1024px) {
  .form-group input,
  .form-group select,
  .form-group textarea,
  .urun-search input,
  .urun-sort,
  .chatbot-input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-form-wrapper {
    padding: var(--space-lg);
  }

  .form-submit {
    min-height: 48px;
  }

  /* Ürünler araç çubuğu tek kolon */
  .urun-search {
    width: 100%;
  }

  .urun-search input {
    width: 100%;
    flex: 1;
    min-width: 0;
  }

  .urun-sort {
    width: 100%;
  }
}


/* ==========================================================================
   6) SABİT (fixed) ELEMANLARIN ÇAKIŞMASI
   --------------------------------------------------------------------------
   SORUN: chatbot (z:9999), floating social (z:9998) ve çerez banner'ı
   (z:10000) hepsi sağ altta. Mobilde çerez banner'ı diğer ikisini
   tamamen kapatıyordu; ayrıca :hover ile genişleyen chatbot butonu
   dokunmatikte açık kalıyordu.
   ========================================================================== */
@media (max-width: 640px) {
  .cookie-banner {
    padding: var(--space-md) var(--space-lg);
    gap: var(--space-md);
  }

  .cookie-banner p {
    font-size: 0.8rem;
  }

  .cookie-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }

  .cookie-accept,
  .cookie-reject {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
  }

  /* Çerez banner'ı açıkken alttaki butonları yukarı it */
  body:has(.cookie-banner.show) .chatbot-widget {
    bottom: calc(var(--space-xl) + 110px);
  }

  body:has(.cookie-banner.show) .floating-social-buttons {
    bottom: calc(var(--space-xl) + 180px);
  }

  .chatbot-toggle {
    min-width: 52px;
    min-height: 52px;
    padding: 12px;
    justify-content: center;
  }

  /* Sohbet paneli tam ekran (style.css'te var) — kapatma alanı güvenli */
  .chatbot-panel {
    max-height: 100svh;
    height: 100svh;
  }

  /* WhatsApp balonu dar ekranda taşmasın */
  .wa-bubble {
    max-width: 150px;
    font-size: 0.75rem;
  }
}

/* Dokunmatik cihazlarda :hover kilitlenmesini önle */
@media (hover: none) {
  .chatbot-toggle:hover {
    max-width: 60px;
    transform: none;
  }

  .chatbot-toggle:hover .chatbot-text {
    opacity: 0;
  }

  .service-card:hover,
  .blog-card:hover,
  .team-card:hover,
  .process-card:hover,
  .urun-card:hover,
  .eticaret-plan-card:hover {
    transform: none;
  }

  .service-card:hover .service-img-preview img,
  .blog-card:hover img {
    transform: none;
  }

  .btn-cta:hover,
  .form-submit:hover,
  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none;
  }
}


/* ==========================================================================
   7) TİPOGRAFİ, BOŞLUK VE DOKUNMA HEDEFLERİ
   ========================================================================== */
@media (max-width: 640px) {
  .container {
    padding: 0 var(--space-lg);
  }

  section {
    padding: 2rem 0;
  }

  .section-title {
    font-size: clamp(1.5rem, 6vw, 2.1rem);
    letter-spacing: 1px;
  }

  .section-subtitle {
    font-size: 0.95rem;
  }

  .section-label {
    font-size: 0.7rem;
    letter-spacing: 2px;
  }

  .logo-text {
    font-size: 1.3rem;
    letter-spacing: 2px;
  }

  /* Ticker mobilde daha sık dönsün, yazı küçülsün */
  .ticker-item {
    padding: 0 var(--space-lg);
    font-size: 0.68rem;
    letter-spacing: 0.5px;
  }

  /* Tüm tıklanabilir öğelerde gecikmesiz dokunma */
  a,
  button,
  .dot,
  .faq-q,
  [role="button"] {
    touch-action: manipulation;
  }

  /* Slider noktaları çok küçüktü (12x4px) — dokunma alanı büyütüldü */
  .dot {
    height: 6px;
    position: relative;
  }

  .dot::after {
    content: "";
    position: absolute;
    inset: -16px -6px;
  }

  .faq-q {
    font-size: 0.95rem;
    padding: 16px 18px;
    min-height: 48px;
  }

  .faq-a p {
    padding: 0 18px 18px;
  }
}

/* Çok dar telefonlar (≤380px) */
@media (max-width: 380px) {
  .counters-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }

  .counter-item {
    padding: var(--space-md) var(--space-sm);
  }

  .counter-number {
    font-size: 2rem;
  }

  .hero-title {
    font-size: clamp(2rem, 11vw, 2.8rem);
  }

  .navbar {
    padding: 0 var(--space-md);
  }

  .container {
    padding: 0 var(--space-md);
  }

  .btn-cta {
    padding: 8px 14px;
    font-size: 0.78rem;
  }
}


/* ==========================================================================
   8) MODAL / LIGHTBOX — mobilde tam ekran ve güvenli kapatma
   ========================================================================== */
@media (max-width: 640px) {
  .urun-modal-content {
    width: calc(100% - 20px);
    max-height: 88svh;
    margin: 6vh auto;
    padding: 22px 16px;
  }

  .urun-modal-close {
    width: 44px;
    height: 44px;
    top: 10px;
    right: 10px;
  }

  .service-modal-content,
  .lightbox-content {
    max-width: 94%;
  }

  .lightbox-close {
    width: 44px;
    height: 44px;
  }

  .lightbox-prev {
    left: 12vw;
  }

  .lightbox-next {
    right: 12vw;
  }
}


/* ==========================================================================
   9) FOOTER
   ========================================================================== */
@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
  }

  .footer-grid a {
    display: inline-block;
    padding: 6px 0;
  }
}


/* ==========================================================================
   10) GÜVENLİ ALAN (notch / home indicator) — iPhone X ve üzeri
   ========================================================================== */
@supports (padding: max(0px)) {
  @media (max-width: 640px) {
    .cookie-banner {
      padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
    }

    .chatbot-widget,
    .floating-social-buttons {
      right: max(var(--space-xl), env(safe-area-inset-right));
    }

    .mobile-menu {
      padding-bottom: max(calc(var(--space-2xl) + 40px), env(safe-area-inset-bottom));
    }
  }
}