/*
 * Motta — Storefront Mobile + Tablet Polish
 * v20260519-v2800-faz3 Agent M1
 *
 * Yüklenir: /siparis/{tenantSlug} (motta-customizer.css'ten SONRA)
 * Kapsam: storefront customizer responsive ince ayar, touch UX, iOS safe-area
 *
 * Strateji:
 *   - Mevcut motta-customizer.css'i geçersiz KILMAZ; sadece breakpoint override + touch hints ekler.
 *   - Tüm seçiciler `.motta-order-page` body class'ı altında scope edilir (cross-page sızıntı yok).
 *   - prefers-reduced-motion ile motion guard.
 *   - iOS safe-area-inset bottom-bar elementlerinde.
 *
 * Sınıf eşlemesi (mevcut customizer'dan):
 *   .mc-stage           → ana sahne (canvas + sidebar wrapper)
 *   .mc-grid            → vitrin grid wrapper
 *   .mc-grid__cards     → kart konteyneri (data-cols ile sütun sayısı)
 *   .mc-card            → tek tasarım kartı
 *   .mc-view-toggle     → front/back tab grubu
 *   .mc-view-toggle__btn → tek tab butonu
 *   .mc-canvas          → SVG composite canvas
 *   .mc-action          → ikon/aksiyon butonları
 *   .mc-btn             → birincil button türevi (varsa)
 */

/* ─── 1. Touch-friendly hit targets (Mobile ≤768px) ──────────────────── */
@media (max-width: 768px) {
  body.motta-order-page .mc-btn,
  body.motta-order-page .mc-action,
  body.motta-order-page [data-action],
  body.motta-order-page [data-view-btn],
  body.motta-order-page .mc-view-toggle__btn,
  body.motta-order-page .mc-size-chart-modal__close {
    min-height: 44px;          /* iOS HIG: 44pt minimum */
    min-width: 44px;
    touch-action: manipulation; /* 300ms tap-delay kaldırılır */
  }

  /* Native tıklama dikdörtgenini gizle */
  body.motta-order-page button,
  body.motta-order-page [role="button"],
  body.motta-order-page [data-action] {
    -webkit-tap-highlight-color: transparent;
  }

  body.motta-order-page .mc-grid {
    padding-left: 8px;
    padding-right: 8px;
  }

  body.motta-order-page .mc-grid__cards {
    gap: 8px;
  }

  body.motta-order-page .mc-card {
    padding: 12px;
  }

  /* Vitrin başlık alanı mobilde daha kompakt */
  body.motta-order-page .mc-grid__toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ─── 2. Küçük mobil ekran (≤480px): Tek sütun zorlaması ──────────────── */
@media (max-width: 480px) {
  body.motta-order-page .mc-grid__cards[data-cols="3"],
  body.motta-order-page .mc-grid__cards[data-cols="5"],
  body.motta-order-page .mc-grid__cards[data-cols="7"] {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  body.motta-order-page .mc-view-toggle {
    width: 100%;
  }

  body.motta-order-page .mc-view-toggle__btn {
    flex: 1;
    font-size: 14px;
  }
}

/* ─── 3. Tablet 768-1024px ince ayar ─────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  body.motta-order-page .mc-grid {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Tablet kart sayısı: 3'lü grid auto-fill ile esner */
  body.motta-order-page .mc-grid__cards[data-cols="5"],
  body.motta-order-page .mc-grid__cards[data-cols="7"] {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
  }

  /* Stage canvas tabletde max genişlik (yan boşluklar görünür) */
  body.motta-order-page .mc-stage {
    max-width: 100%;
  }

  body.motta-order-page .mc-canvas {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  body.motta-order-page .mc-grid__toolbar {
    gap: 12px;
  }

  /* Sticky tab/CTA tabletde okunaklı kalsın */
  body.motta-order-page .mc-view-toggle__btn {
    font-size: 14px;
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ─── 4. iOS safe-area-inset (notch / home indicator) ────────────────── */
/* v3100 DEV-C: .mc-bottom-bar / .mc-fab / .mc-sticky-cta / .mc-grid__sticky-bottom
   şu an customizer.js'te kullanılmıyor — sticky-CTA backlog'u için forward-compat hook.
   [data-sticky-bottom] selector tüm yeni eklemelerin path'i. */
body.motta-order-page .mc-bottom-bar,
body.motta-order-page .mc-fab,
body.motta-order-page .mc-sticky-cta,
body.motta-order-page .mc-grid__sticky-bottom,
body.motta-order-page [data-sticky-bottom] {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

body.motta-order-page .mc-size-chart-modal__content,
body.motta-order-page [data-sheet] {
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* Üst safe-area (notch / dynamic island) — sticky toolbar varsa */
body.motta-order-page .mc-grid__brief,
body.motta-order-page [data-sticky-top] {
  padding-top: calc(8px + env(safe-area-inset-top));
}

/* ─── 5. Touch swipe görsel state'leri ────────────────────────────────── */
body.motta-order-page .mc-stage[data-swipe="active"] {
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.motta-order-page .mc-canvas[data-swipe-feedback="left"] {
  transform: translateX(-12px);
  opacity: 0.85;
}

body.motta-order-page .mc-canvas[data-swipe-feedback="right"] {
  transform: translateX(12px);
  opacity: 0.85;
}

/* ─── 6. prefers-reduced-motion guard ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.motta-order-page .mc-stage[data-swipe],
  body.motta-order-page .mc-canvas[data-swipe-feedback] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  body.motta-order-page .mc-card,
  body.motta-order-page .mc-mode {
    animation: none !important;
    transition: none !important;
  }
}

/* ─── 7. Mobil scroll davranışı ──────────────────────────────────────── */
@media (max-width: 768px) {
  body.motta-order-page {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain; /* Pull-to-refresh tetiklenmesin */
  }

  /* Renk paleti / swatch grid mobilde yatay kaydırma */
  body.motta-order-page .mc-swatch-grid,
  body.motta-order-page [data-swatch-scroll] {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  body.motta-order-page .mc-swatch-grid > *,
  body.motta-order-page [data-swatch-scroll] > * {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

/* ─── 8. Landscape mobile (low-height) için stage küçültme ───────────── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  body.motta-order-page .mc-canvas {
    max-height: 60vh;
  }

  body.motta-order-page .mc-grid__brief {
    display: none; /* Yatayda ekran çok dar, brief gizlenir */
  }
}

/* ─── 9. Pointer:fine vs coarse — hover state'leri sadece mouse'ta ───── */
@media (pointer: coarse) {
  body.motta-order-page .mc-card:hover,
  body.motta-order-page .mc-btn:hover,
  body.motta-order-page .mc-action:hover {
    /* Coarse pointer (touch) hover'ı çoğunlukla istenmeyen yan etki yaratır */
    transform: none;
  }
}

/* ─── 10. Modal & sheet ekranı mobilde tam ekran ─────────────────────── */
@media (max-width: 600px) {
  body.motta-order-page .mc-size-chart-modal__content {
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    margin-top: auto;
    max-height: 88vh;
    overflow-y: auto;
  }

  body.motta-order-page .mc-size-chart-modal {
    align-items: flex-end;
  }
}

/* ─── 11. Yüksek DPI ekranlar — keskin border ────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body.motta-order-page .mc-card,
  body.motta-order-page .mc-view-toggle__btn {
    border-width: 0.5px;
  }
}

/* ─── 12. Erişilebilirlik: keyboard focus mobilde belirgin kalsın ──── */
@media (max-width: 1024px) {
  body.motta-order-page button:focus-visible,
  body.motta-order-page [data-action]:focus-visible,
  body.motta-order-page [data-view-btn]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}