/* ═══════════════════════════════════════════
   MOBİL TASARIM — Instagram tarzı responsive
   ═══════════════════════════════════════════ */

/* Mobil viewport */
@media (max-width: 768px) {

  /* ── Sol sidebar'ı gizle (244px sabit nav'lar) ── */
  nav[class*="pp-sidebar"],
  nav[class*="pp-nav"],
  nav[style*="width:244px"],
  nav[style*="width: 244px"] {
    display: none !important;
  }

  /* ── Sağ sidebar (öneriler/footer) gizle ── */
  aside[style*="width:320px"],
  aside[style*="width: 320px"],
  aside[style*="width:300px"],
  aside.hide-scroll {
    display: none !important;
  }

  /* ── İçeriği ortala (main genişliği sınırla) ── */
  main {
    max-width: 470px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* ── Main content'in sol margin'ini sıfırla ── */
  [style*="margin-left:244px"],
  [style*="margin-left: 244px"],
  main[style*="margin-left"],
  div[style*="margin-left:244px"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 70px !important; /* alt nav için boşluk */
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Mobil header (üst bar) ── */
  body::before {
    content: '🎉 Parti Pazarı';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 50px;
    background: #fff;
    border-bottom: 1px solid #dbdbdb;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: #262626;
    z-index: 999;
    letter-spacing: -0.3px;
  }
  body { padding-top: 50px !important; }

  /* ── Product grid: 2 kolon ── */
  .grid-explore {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 3px !important;
  }
  .grid-explore .tile {
    aspect-ratio: 1 !important;
    border-radius: 4px;
  }
  .tile-overlay { opacity: 1 !important; background: linear-gradient(180deg,transparent 60%,rgba(0,0,0,.75)) !important; }
  .tile-name { font-size: 12px !important; }
  .tile-price { font-size: 11px !important; padding: 1px 6px !important; }

  /* ── Post modal (post.php) — full-width dik dizilim ── */
  /* Dış wrapper (margin-left:244px, padding:20px) */
  div[style*="margin-left:244px"][style*="min-height:100vh"][style*="padding:20px"] {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    display: block !important;
  }
  /* İç modal kutusu */
  div[style*="display:flex"][style*="min-height:600px"],
  div[style*="display:flex"][style*="max-width:1100px"] {
    flex-direction: column !important;
    max-height: none !important;
    min-height: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    background: #fff !important;
  }
  /* Modal'ın iki yarısı (resim ve panel) */
  div[style*="display:flex"][style*="min-height:600px"] > div,
  div[style*="display:flex"][style*="max-width:1100px"] > div {
    width: 100% !important;
    max-height: none !important;
    min-width: 0 !important;
    border-left: none !important;
    border-top: 1px solid #dbdbdb !important;
    flex: none !important;
  }
  div[style*="display:flex"][style*="min-height:600px"] > div:first-child,
  div[style*="display:flex"][style*="max-width:1100px"] > div:first-child {
    aspect-ratio: 1;
    border-top: none !important;
    background: #000 !important;
  }
  div[style*="display:flex"][style*="min-height:600px"] > div:first-child img,
  div[style*="display:flex"][style*="max-width:1100px"] > div:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-height: none !important;
  }

  /* ── Profile.php avatar + bilgi ── */
  div[style*="display:flex;align-items:flex-start;gap:40px"],
  div[style*="display:flex; align-items:flex-start"][style*="gap:40px"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    text-align: center;
  }

  /* ── Kategori filtreleri yatay kaydırılabilir ── */
  div[style*="display:flex"][style*="gap:8px"][style*="overflow-x:auto"],
  div[style*="display:flex"][style*="overflow-x:auto"] {
    -webkit-overflow-scrolling: touch;
  }

  /* ── Genel padding düzeltmeleri ── */
  main { padding: 8px !important; }
  .a-content { padding: 12px !important; }

  /* ── WhatsApp butonu konumunu alt nav üstüne taşı ── */
  [class*="whatsapp"], [id*="whatsapp"],
  a[href*="wa.me"], a[href*="whatsapp"] {
    bottom: 75px !important;
  }

  /* ── Tablo'lar yatay scroll ── */
  table { font-size: 12px; }
  .a-table th, .a-table td { padding: 8px 6px !important; }

  /* ── Form inputs daha küçük ── */
  input, textarea, select { font-size: 16px !important; /* iOS zoom önle */ }

  /* ── Card / liste öğeleri ── */
  article, .post-card { border-radius: 0 !important; border-left: none !important; border-right: none !important; }
}

/* ═══════════════════════════════════════════
   MOBİL ALT NAVIGATION (Instagram tarzı)
   ═══════════════════════════════════════════ */
nav.m-bottom-nav {
  display: none;
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 60px;
  background: #fff !important;
  border-top: 1px solid #dbdbdb !important;
  z-index: 99999 !important;
  justify-content: space-around;
  align-items: center;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.m-bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  color: #262626;
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  gap: 3px;
  transition: color .15s;
  border-radius: 8px;
}
.m-bottom-nav a:active { background: #f0f0f0; }
.m-bottom-nav a.active { color: #0095f6; }
.m-bottom-nav a svg { width: 24px; height: 24px; }
.m-bottom-nav a.m-add {
  background: linear-gradient(135deg,#a855f7,#ec4899);
  color: #fff;
  border-radius: 12px;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  margin: 0 6px;
}
.m-bottom-nav a.m-add svg { width: 26px; height: 26px; stroke: #fff; }

@media (max-width: 768px) {
  nav.m-bottom-nav { display: flex !important; }
}