Nexberry — Pattern: Breakpoints

Pattern — Responsive Breakpoints

Token tablosu (Tailwind hizalı)

Token	Min width	Cihaz	Layout davranışı
`sm`	`640px`	Mobil yatay / küçük tablet	Single col → 2 col grid mümkün
`md`	`768px`	Tablet portrait	Sidebar drawer'a düşer; 2-3 col grid
`lg`	`1024px`	Tablet landscape / küçük laptop	Panel sidebar açık (240px); 3-4 col grid
`xl`	`1280px`	Standart laptop · panel default	Tüm panel layout target — sidebar + main + detail
`2xl`	`1536px`	Geniş ekran	Max content width 1440px; etrafı padding

Layout davranış serisi — sipariş panosu

sm · 360

Tek kolon kart liste
Sidebar drawer
Detay full-screen

md · 768

2 kolon kanban
Sidebar collapse
Detail bottom sheet

lg · 1024

3 kolon kanban
Sidebar 240px
Detail side panel

xl · 1280 (target)

5 kolon kanban
Sidebar 240px + Main + Detail
Tüm aksiyonlar tek bakışta

Panel target: xl. Mobile-friendly ama mobile-first değil — operatör masabaşı ekranında sipariş yönetir. Marketing landing aksine: mobile-first (sm → xl büyür).

Container & gutter

Breakpoint	Container max	Side padding	Grid gutter
`sm`	100%	`16px`	`12px`
`md`	720px	`24px`	`16px`
`lg`	960px	`32px`	`20px`
`xl`	1200px	`40px`	`24px`
`2xl`	1440px	`48px`	`24px`