/* pushnav.css — Mobil web: iOS tarzı "itme / geri" (push / pop) sayfa geçişi (Kişilerim)
 *
 * Mantık (pushnav.js ile birlikte):
 *   - #mobile-account içinde iki TAM SAYFA yığılır: .ma-page-root (başlık + sekmeler + liste) ve .ma-page-detail
 *     (geri çubuğu + kişi / kıyafet / profil görseli formu).
 *   - Kişiye, kıyafete, "+ Kıyafet Ekle" veya "+ Yeni Kişi Ekle"ye basınca detay sayfa SAĞDAN kayarak gelir, kök sayfa
 *     yaklaşık 1/3 hızla (genişliğin ~%33'ü kadar) sola gider ve hafifçe kararır. Geri dönüşte tersi olur.
 *   - Hareket yalnızca transform / opacity ile yapılır (GPU). Durum, #mobile-account üzerindeki data-nav özniteliğinde:
 *       root      kök sayfa görünür (detay gizli)        pushing   detay sağdan geliyor
 *       detail    detay görünür (kök gizli)              popping   detay sağa gidiyor
 *       dragging  parmakla kenardan sürükleniyor         releasing parmak bırakıldı, kalan yol tamamlanıyor
 *
 * ESKİ DÜZEN (liste altında form) silinmedi: .ma-push sınıfı yoksa aşağıdaki kuralların hiçbiri etkili olmaz
 * (pushnav.js içinde PUSH_NAV_ENABLED = false ya da adrese ?nav=classic eklemek yeterli).
 */

/* ---- Eski düzende yeni parçalar görünmez / yer kaplamaz ---- */
.ma-page-root { display: contents; }
.ma-page-detail, .ma-dim { display: none; }

/* ---- Yeni düzen ---- */
.mobile-account.ma-push {
  --ma-dir: 1;                                   /* RTL (Arapça) için -1 */
  --ma-dur: 540ms;                               /* iOS push: ~0.35 sn hissi, yavaşlayarak oturan yay benzeri eğri */
  --ma-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ma-parallax: 0.3333;                         /* alttaki sayfa, üsttekinin 1/3'ü kadar yol alır */
  --ma-dim: 0.10;                                /* alttaki sayfanın en çok kararması */
  --ma-nav-h: 48px;
  overflow: hidden;
  overflow: clip;                                /* programatik kaydırma (scrollIntoView/focus) ekran dışı sayfayı açığa çıkarmasın */
}
:root[dir="rtl"] .mobile-account.ma-push { --ma-dir: -1; }

.ma-push .ma-page {
  position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0;
  background: #fff;
  transition: transform var(--ma-dur) var(--ma-ease);
}
.ma-push .ma-page-detail {
  transform: translate3d(calc(100% * var(--ma-dir)), 0, 0);
}
/* Detay sayfanın ön kenarındaki yumuşak gölge (UINavigationController'daki gibi) */
.ma-push .ma-page-detail::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 18px; inset-inline-start: -18px; pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.12));
}
:root[dir="rtl"] .ma-push .ma-page-detail::before { background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.12)); }

/* Alttaki sayfayı karartan örtü (iki sayfanın arasında) */
.ma-push .ma-dim {
  display: block; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--ma-dim)); opacity: 0; pointer-events: none;
  transition: opacity var(--ma-dur) var(--ma-ease);
}

/* Açık (detay yolda ya da ekranda): uç konumlar. Geçiş bu iki durum arasında oynar. */
.ma-push.ma-open .ma-page-root { transform: translate3d(calc(var(--ma-parallax) * -100% * var(--ma-dir)), 0, 0); }
.ma-push.ma-open .ma-page-detail { transform: translate3d(0, 0, 0); }
.ma-push.ma-open .ma-dim { opacity: 1; }

/* Oturmuş durumlar: dönüşüm yok (alt öğelerin fixed/odak davranışı bozulmasın), gizlenen sayfa tamamen gizli */
.ma-push[data-nav="root"] .ma-page-root,
.ma-push[data-nav="detail"] .ma-page-detail { transform: none; }
.ma-push[data-nav="root"] .ma-page,
.ma-push[data-nav="detail"] .ma-page,
.ma-push[data-nav="root"] .ma-dim,
.ma-push[data-nav="detail"] .ma-dim { transition: none; }
.ma-push[data-nav="root"] .ma-page-detail { visibility: hidden; }
.ma-push[data-nav="detail"] .ma-page-root { visibility: hidden; }

/* Parmakla sürüklerken geçiş yok (konumu JS satır içi verir) */
.ma-push[data-nav="dragging"] .ma-page,
.ma-push[data-nav="dragging"] .ma-dim { transition: none !important; }

/* Geçiş sürerken katmanlar GPU'ya alınır; dokunuşlar kapalı (çift dokunuşla iki kez itmeyi önler) */
.ma-push[data-nav="pushing"] .ma-page, .ma-push[data-nav="popping"] .ma-page,
.ma-push[data-nav="dragging"] .ma-page, .ma-push[data-nav="releasing"] .ma-page { will-change: transform; }
.ma-push:not([data-nav="root"]):not([data-nav="detail"]) .ma-page { pointer-events: none; }

/* ---- Detay sayfanın geri çubuğu (iOS navigasyon çubuğu) ---- */
.ma-push .ma-nav {
  flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; box-sizing: border-box;
  height: calc(var(--ma-nav-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 6px 0;
  background: #fff; border-bottom: 1px solid var(--line);
}
.ma-back {
  justify-self: start; display: inline-flex; align-items: center; gap: 3px; max-width: 100%; min-height: 44px; padding: 0 10px 0 4px;
  background: none; border: 0; font: inherit; font-size: 1.05rem; color: #578a89; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ma-back svg { width: 13px; height: 22px; flex: 0 0 auto; }
.ma-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-back:active { opacity: 0.4; }
:root[dir="rtl"] .ma-back svg { transform: scaleX(-1); }
.ma-nav-title { margin: 0; max-width: 62vw; text-align: center; font-size: 1.05rem; font-weight: 700; color: #17201d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-nav-side { display: block; }

/* Detay sayfanın kayan gövdesi: taşınan form (.auth-grid-right) kart değil, sayfa içeriği gibi görünür */
.ma-push .ma-detail-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 18px 16px calc(36px + env(safe-area-inset-bottom));
}
.ma-push .ma-detail-body > .auth-grid-right {
  max-width: 640px; margin: 0 auto; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
}
/* Başlık geri çubuğunda zaten yazıyor: formun kendi "Yeni Kişi / Kişi Bilgilerini Düzenle" başlığı tekrar etmesin */
.ma-push .ma-detail-body #um-profile-title { display: none; }

/* Sol kenardan geri kaydırma bölgesi (geri çubuğunun altında; düğmeyi kapatmaz). 16px: sayfa içeriği kenardan 16px içeride başlar, bölge
   içeriğe taşmaz. pushnav.js yalnızca kullanılabilirken .on sınıfını verir (iOS Safari'de kenarı Safari yönettiği için orada boş durur). */
.ma-edge {
  position: absolute; top: calc(var(--ma-nav-h) + env(safe-area-inset-top)); bottom: 0; inset-inline-start: 0; width: 16px; z-index: 6;
  touch-action: none; pointer-events: none;
}
.ma-edge.on { pointer-events: auto; }

/* Liste kartına dokunma geri bildirimi (iOS satır vurgusu) */
.ma-push #my-models-content .um-card { -webkit-tap-highlight-color: transparent; }
.ma-push #my-models-content .um-card:active { background: #f3f8f6; }

/* Hareketi azalt: kısa, paralaks'sız geçiş */
@media (prefers-reduced-motion: reduce) {
  .mobile-account.ma-push { --ma-dur: 160ms; --ma-parallax: 0; }
}