/* MaaNaa Mobile Foundation
 * Centralized mobile fixes — applies across all pages.
 * Mobile-first overrides for touch targets, iOS zoom, readable text, overflow safety.
 * Loaded after main.css to take precedence.
 */

/* ──────────────────────────────────────────────────────────────
 * 1. Global mobile safety
 * ────────────────────────────────────────────────────────────── */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

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

/* Tablo taşmalarını engelle */
table {
  max-width: 100%;
}

/* ──────────────────────────────────────────────────────────────
 * 2. iOS form zoom kilidi (mobil viewport)
 *    Inputlar ≥16px olmazsa Safari focus'ta auto-zoom yapar.
 * ────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
 * 3. Touch target minimum (44x44 — WCAG 2.5.5)
 * ────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Genel link/buton min-height (inline metin link'leri hariç tut) */
  .btn,
  button,
  input[type="submit"],
  input[type="button"],
  .nav-link {
    min-height: 44px;
  }

  /* Hamburger butonları — kare 44x44 tap area */
  .manaa-hamburger,
  .hero-hamburger,
  .hero-gb__hamburger,
  .hero-3c__menu,
  .menu-toggle {
    min-width: 44px;
    min-height: 44px;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  /* Hamburger çizgilerini ortala — width/height büyüdüğünde içerideki
   * çizgi konteynerinin sola hizalanmaması için flex item'ı ortala */
  .manaa-hamburger {
    align-items: center !important;
  }

  /* Footer link satırları — daha rahat tap (44px) */
  .manaa-footer__links li {
    margin-bottom: 0;
  }
  .manaa-footer__links a {
    min-height: 44px;
    padding-block: 8px;
    align-items: center !important;
  }

  /* Footer iletişim listesi (telefon/mail link'leri) */
  .manaa-footer__contact-list a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  /* Menü overlay linkleri — proje listesi tap target */
  .manaa-menu-overlay__group ul li a,
  .manaa-menu-overlay__pages li a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Proje kartı / liste linkleri */
  .project-card a,
  .card-link {
    min-height: 44px;
    padding-block: 8px;
  }

  /* Hero-3c (ana sayfa) — küçük linkler */
  .hero-3c__lang a {
    padding: 12px 4px;
    display: inline-block;
  }

  .hero-3c__projects-all,
  .hero-3c__brand-cta {
    min-height: 44px;
    padding-block: 12px;
    display: inline-flex;
    align-items: center;
  }

  /* Hero-3c proje listesi link'leri (Etiler, Levent vb. kart linkleri) */
  .hero-3c__projects-list a,
  .hero-3c__project-item a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* İletişim sayfası — ofis tel/email linkleri ve harita kartları */
  .contact-office__link,
  .contact-gmap__card-link {
    min-height: 44px;
    padding-block: 10px;
    display: inline-flex !important;
    align-items: center;
  }

  /* Footer alt CTA bağlantıları (Telefon/E-posta inline text linkleri için
   * yine tap-friendly genişletme) */
  .manaa-footer__contact-list li a {
    min-height: 36px;
    padding-block: 6px;
  }
}

/* ──────────────────────────────────────────────────────────────
 * 4. Minimum okunabilir metin
 *    Desktop'taki dekoratif 9-12px etiketler mobilde büyütülür.
 * ────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  body {
    font-size: 16px;
  }

  /* Genel olarak çok küçük inline metinleri 12px tabanına çek */
  small,
  .small,
  .eyebrow,
  .label,
  .caption,
  .meta {
    font-size: max(12px, 0.75em);
  }

  /* Uppercase eyebrow / etiket sınıfları — mobilde minimum 11px
   * (letter-spacing yüksek olduğundan 11px okunabilir kalır) */
  .hero-3c__brand-year,
  .hero-3c__family-quote-sig,
  .hero-3c__project-loc,
  .cap-slide__vertical,
  .hp-video__eyebrow,
  .hp-video__play-label,
  .hp-lifestyle__item-prefix,
  .hp-lifestyle__item-location,
  .manaa-footer__title,
  .manaa-footer__link-sub,
  .manaa-footer__contact-label,
  .manaa-footer__bottom-inner p,
  .kr-label,
  .kr-hero__badge-text,
  .mf-label,
  .mf-eyebrow,
  .mf-hero__badge-text,
  .mf-highlight__label,
  .mf-lifecycle__label,
  .contact-eyebrow,
  .contact-hero__badge-text,
  .contact-bar__label,
  .section-label,
  .pp-eyebrow,
  .sp-label,
  .sp-eyebrow,
  .sp-story__float-label,
  .sp-features__item-label,
  .ofh-content__label,
  .ofh-content__feature-label,
  .sp-ftags__item,
  .sp-ftags__item span,
  .prj-card__badge,
  .prj-card__location,
  .prj-card__type,
  .cap-slide__image-label,
  .cap-slide__image-label span {
    font-size: 11px !important;
    letter-spacing: 0.14em;
  }

  /* hero-3c__brand-tag — biraz daha büyük (alt başlık) */
  .hero-3c__brand-tag {
    font-size: 12px !important;
  }

  /* Hero brand kolonu — mobilde 70vh zorlamasını kaldır
   * (CTA butondan sonra büyük boş alan oluşmasını engelle) */
  .hero-3c__brand {
    min-height: 0 !important;
    padding: 4rem 2rem 3rem !important;
  }

  /* Cap-slide mobile: featured image yoksa görsel div'ini gizle
   * (Aksi halde 460px boş alan açığa çıkıyor) */
  .cap-slide-m__image:not(:has(img)) {
    display: none;
  }

  /* Flex parent default stretch — slide'lar farklı içerikli olsa bile her biri
   * kendi yüksekliğinde dursun (boş slide diğerlerine uydurulup boşluk açmasın) */
  .cap-slides__mobile {
    align-items: flex-start !important;
  }
}

/* ──────────────────────────────────────────────────────────────
 * 5. Container padding — row neg-margin ile birebir uyumlu kalmalı
 *    (1.5rem container gutter = -12px row margin)
 *    Mobilde varsayılan 1.5rem korunuyor; aksi halde 2px overflow oluşur.
 * ────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────
 * 6. Newsletter satırı: çok dar viewportta dikey stack
 *    (320-360px arası input+buton yan yana sığmıyor)
 * ────────────────────────────────────────────────────────────── */

@media (max-width: 380px) {
  .hp-newsletter__row {
    flex-direction: column;
    gap: 8px;
  }
  .hp-newsletter__input {
    border-radius: 50px;
    border-right: 1px solid #ddd;
    width: 100%;
  }
  .hp-newsletter__submit {
    border-radius: 50px;
    justify-content: center;
    width: 100%;
  }
}

/* ──────────────────────────────────────────────────────────────
 * 7. Yardımcı: aşırı uzun başlıkları kırılabilir yap
 * ────────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
  h1, h2, h3 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
}