/* ============================================================
   MOBİL DÜZELTME — Fotoğraf Edit
   ============================================================ */
@media (max-width: 768px) {

  /* Ana wrapper: dikey sıralama */
  .flex.h-screen,
  .flex.min-h-screen,
  [class*="flex"][class*="h-screen"] {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
  }

  /* Sol ve sağ paneller: tam genişlik, auto yükseklik */
  .w-\[300px\],
  .w-\[400px\],
  .w-64,
  .w-56,
  .w-52,
  .w-48 {
    width: 100% !important;
    max-height: none !important;
    overflow-y: visible !important;
    flex-shrink: 0 !important;
  }

  /* Flex-1 alanlar (orta kanvas) tam genişlik */
  .flex-1 {
    width: 100% !important;
    min-height: 300px !important;
  }

  /* Canvas alanı - makul yükseklik */
  .h-\[600px\],
  .h-\[400px\] {
    height: 280px !important;
  }

  /* Navbar: küçük, kaydırılabilir */
  header,
  nav,
  [class*="border-b"][class*="flex"][class*="items-center"] {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 6px 8px !important;
  }

  /* Toolbar butonları küçül */
  header button,
  nav button {
    padding: 4px 6px !important;
    font-size: 11px !important;
    min-width: 32px !important;
  }

  /* Panel başlıkları kompakt */
  .text-2xl { font-size: 1rem !important; }
  .text-3xl { font-size: 1.2rem !important; }
  .text-4xl { font-size: 1.4rem !important; }

  /* Paneller arası boşluk azalt */
  .p-6 { padding: 12px !important; }
  .p-4 { padding: 10px !important; }
  .p-3 { padding: 8px !important; }
  .gap-8 { gap: 12px !important; }
  .gap-5 { gap: 8px !important; }
  .gap-4 { gap: 6px !important; }

  /* Slider'lar tam genişlik */
  [data-radix-slider-root] {
    width: 100% !important;
  }

  /* Upload zone küçük */
  .upload-zone {
    min-height: 80px !important;
    padding: 12px !important;
  }

  /* Katmanlar listesi kısa tut */
  .max-h-64 {
    max-height: 140px !important;
  }

  /* Gizlenmiş panellerin scroll'u */
  .overflow-y-auto {
    max-height: 250px !important;
  }

  /* Ana layout'u sütunsal yap */
  .flex.flex-row,
  [class*="flex-row"] {
    flex-direction: column !important;
  }

  /* Sabit yükseklikli panelleri kaldır */
  .h-full {
    height: auto !important;
  }

  /* Renk paleti grid küçült */
  .grid-cols-4 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}