.table-grid {
  padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; height: calc(100vh - 58px); overflow-y: auto; align-content: start;
}

/* KULLANICI İSTEĞİ: "ileri sipariş geldiğinde gel al masasına yönlendirecek"
   — Masalar ızgarasının ÜSTÜNDE, ayrı/dikkat çeken bir şerit (bkz.
   garson.html #advanceOrdersSection, js/garson.js). Sipariş yokken tamamen
   gizli (.hidden), var olunca görünür. */
.advance-orders-section { padding: 14px 20px 0; }
.advance-orders-title { font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .03em; }
.advance-orders-list { display: flex; flex-wrap: wrap; gap: 10px; }
.advance-order-card {
  border-radius: var(--radius-md); padding: 14px 16px; cursor: pointer; min-width: 180px;
  border: 1px solid var(--accent); background: var(--card); box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.advance-order-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.advance-order-card:active { transform: scale(.97); }
.advance-order-card .a-label { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.advance-order-card .a-time { font-size: 12px; color: var(--accent); font-weight: 600; margin-bottom: 4px; }
.advance-order-card .a-total { font-size: 12px; color: var(--text-muted); }
.table-card {
  border-radius: var(--radius-md); padding: 22px 14px; text-align: center; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* Kullanıcı isteği: Masalar sayfasındaki masa kartlarında da hub.html'deki
   ekran seçim kartlarıyla (.hub-card:hover, bkz. hub.css) AYNI mouse-hover
   efekti — kart hafifçe yukarı kalkar, gölge derinleşir, kenarlık vurgu
   rengine döner. Hem garson'un masa ekranında hem kasa'nın Masalar
   ekranında (ikisi de bu paylaşılan .table-card sınıfını kullanıyor)
   geçerli; dokunmatik ekranlarda (hover desteklenmiyorsa) hiçbir etkisi
   olmaz, sadece fare ile gezinen masaüstü kullanıcıları için. */
.table-card:hover {
  background: var(--card-hover); transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent);
}
.table-card:active { transform: scale(.97); }
/* Kullanıcı isteği: "açık masalar çift renk görünsün daha belirgin olması
   için" — dolu masalar artık tek renkli ince kenarlık yerine, sistemin
   genelinde "vurgulanmış/dikkat çeksin" için kullanılan AYNI iki renkli
   gradyan idiom'u (bkz. #openTablesBtn.tables-btn-has-open, style.css) ile
   gösteriliyor. Gradyan arka plan koyu metinle (#171200) daha okunur olduğu
   için t-name/t-status/t-total renkleri de bu kart özelinde koyu yapıldı. */
.table-card.dolu {
  border-color: transparent;
  background: linear-gradient(135deg, var(--btn-color), var(--btn-color2));
}
.table-card .t-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.table-card .t-status { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.table-card.dolu .t-name,
.table-card.dolu .t-status,
.table-card.dolu .t-total { color: #171200; }
.table-card.dolu .t-status { opacity: .78; }
.table-card .t-total { margin-top: 10px; font-weight: 700; font-size: 15px; }
/* Kullanıcı isteği: kasadan da masalara ürün eklenebilsin — sadece dolu
   masa kartlarında görünen küçük ikincil buton (bkz. public/js/app.js
   renderOpenTablesGrid). Karta tıklama davranışını (ödemeye geçme) ele
   geçirmesin diye tıklaması ayrıca durduruluyor (stopPropagation, JS
   tarafında), burada sadece görünüm. */
.table-card .t-add-item-btn {
  display: block; width: 100%; margin-top: 10px; padding: 7px 0;
  border-radius: var(--radius-sm, 6px); border: 1px solid var(--border);
  background: var(--bg-elevated, var(--card)); color: var(--text);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.table-card .t-add-item-btn:hover { border-color: var(--accent); color: var(--accent); }
.table-card .t-add-item-btn:active { transform: scale(.96); }

/* Dar ekranlarda (telefon) masa ızgarasını sıklaştır (adisyon ekranının kendi
   duyarlı düzeni aşağıda #orderScreen kuralları içinde ayrıca tanımlı). */
@media (max-width: 720px) {
  .table-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* Kullanıcı isteği: "garson ekranı için masa düzeni özelliği ekle" — en az bir
   masa için kayıtlı konum varsa (ya da "Düzenle" modundaysak, bkz. js/garson.js
   loadTables()) ızgara normal CSS grid akışından çıkıp serbest bir "kat planı"
   kabına dönüşür: kartlar mutlak konumlandırılır (left/top, kabın genişliğine/
   yüksekliğine göre YÜZDE — bkz. api/table_update_position.php), böylece
   personel masaları gerçek fiziksel düzenlerine benzer şekilde yerleştirebilir.
   Hiçbir masada kayıtlı konum yoksa (varsayılan/eski kurulumlar) bu sınıf hiç
   eklenmiyor — görünüm eskisiyle birebir aynı kalıyor. */
.table-grid.table-grid-freeform {
  display: block;
  position: relative;
  /* Kullanıcı isteği: "sığmayan içerik sağa sola kaydırınca çıkmasın" —
     kartlar left/top YÜZDE ile konumlandığı için (bkz. yukarıdaki not),
     kabın kenarına çok yakın yerleştirilmiş sabit-genişlikli bir kart dar
     ekranlarda taşabilir. Sayfa genelinde yatay kaydırma çubuğu çıkması
     yerine, taşma SADECE bu kabın İÇİNDE (kendi overflow'uyla) kalsın. */
  overflow: auto;
}
.table-grid-freeform .table-card {
  position: absolute;
  width: 150px;
  margin: 0;
}
/* Düzenle modu: tüm kartlar "taşınabilir" görünsün diye imleç değişir ve
   sürüklerken kafa karıştırmasın diye hover-kalkma efekti (.table-card:hover'ın
   transform'u) burada bilerek geçersiz kılınıyor. */
.table-card.layout-editing {
  cursor: grab;
}
.table-card.layout-editing:hover {
  transform: none;
}
.table-card.dragging {
  cursor: grabbing;
  z-index: 20;
  box-shadow: var(--shadow-lg);
  transition: none;
}

/* Büyük masaüstü/PC ekranlarında (ör. geniş monitör, 4K) kartların aşırı
   büyüyüp aralarında boşluk kalmasını engelle — üst sınır koy. */
@media (min-width: 1400px) {
  .table-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 200px)); justify-content: start; }
}

/* Kullanıcı isteği: "düzenleme modunda masa butonuna basınca yuvarlak kare
   yada dikdörtgen masa şekli değişsin bir de dikdörtgen masada yatay ve dikey
   yönü de değişsin" — masa şekli (bkz. js/garson.js cycleTableShape(),
   bin/migrate_v20260729_masa_sekli.php) SADECE serbest kat planında (Masa
   Düzeni) görsel bir fark yaratır; normal ızgara modunda hiç uygulanmaz
   (js/garson.js loadTables() bu sınıfları SADECE freeform iken ekliyor),
   yani hiçbir mevcut kurulumun normal ızgara görünümü DEĞİŞMEZ. Varsayılan
   "kare" şekli üstteki genel ".table-grid-freeform .table-card" kuralıyla
   (width:150px, otomatik yükseklik) zaten görsel olarak ayırt edilemeyecek
   kadar yakın olduğu için burada da ayrıca sabit bir kare boyut veriliyor —
   şekiller arası GEÇİŞ net görünsün diye. */
.table-grid-freeform .table-card.table-shape-kare,
.table-grid-freeform .table-card.table-shape-yuvarlak,
.table-grid-freeform .table-card.table-shape-dikdortgen-yatay,
.table-grid-freeform .table-card.table-shape-dikdortgen-dikey {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px;
}
.table-grid-freeform .table-card.table-shape-kare { width: 140px; height: 140px; }
.table-grid-freeform .table-card.table-shape-yuvarlak { width: 140px; height: 140px; border-radius: 50%; }
.table-grid-freeform .table-card.table-shape-dikdortgen-yatay { width: 200px; height: 110px; }
.table-grid-freeform .table-card.table-shape-dikdortgen-dikey { width: 110px; height: 200px; }

/* Kullanıcı isteği: "masa düzeni yapılırken başlık ekleme olsun" — serbest kat
   planına eklenen sürüklenebilir metin başlıkları (bkz. js/garson.js
   renderLabels()/initLabelDrag(), api/table_layout_label_*.php). Masa
   kartlarıyla AYNI mutlak-konum/yüzde deseni, ama kendi başına bir "kart"
   değil — sadece belirgin, okunaklı bir metin etiketi (ör. "Bahçe", "Salon"). */
.layout-label {
  position: absolute;
  padding: 4px 12px;
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-elevated, var(--card));
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  user-select: none;
  z-index: 5;
}
/* Düzenle modu kapalıyken sadece sade bir etiket — sürüklenemez, silinemez. */
.layout-label .layout-label-delete { display: none; }
.layout-label.layout-editing {
  cursor: grab;
  border-style: solid;
  border-color: var(--accent);
  color: var(--text);
}
.layout-label.layout-editing .layout-label-delete {
  display: inline-block;
  margin-left: 8px;
  font-weight: 800;
  color: var(--danger, #d33);
  cursor: pointer;
}
.layout-label.dragging {
  cursor: grabbing;
  z-index: 20;
  box-shadow: var(--shadow-lg);
  transition: none;
}

.kitchen-badge {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-left: 6px;
}
.kitchen-badge.yeni { background: #F2495C44; color: #ffb0b0; }
.kitchen-badge.hazirlaniyor { background: #f5a52444; color: #ffd28a; }
.kitchen-badge.hazir { background: #22C55E44; color: #a0f0c0; }
.kitchen-badge.servis_edildi { background: var(--border); color: var(--text-muted); }
.kitchen-badge.iptal { background: #F2495C; color: #fff; }

.cart-line.cancelled { opacity: 0.55; }
.cart-line.cancelled .line-top span:first-child { text-decoration: line-through; }
.cancel-item-btn {
  background: transparent; border: 1px solid var(--danger); color: var(--danger);
  border-radius: 6px; padding: 3px 8px; font-size: 11px; cursor: pointer; margin-left: 8px;
}
/* DÜZELTME (#219 — "masa ekranında müşteri seç ve adisyon notunun olduğu yerin
   genişliğini ayarla, alt kısımda sağa sola çekme bar çizgisi var, boşlukları
   kaldırırsan düzgün görünür"): kök neden bu kuraldaki `margin-right: 8px` idi.
   .bill-request-btn'in TEK kullanım yeri (#requestBillBtn / #ktRequestBillBtn,
   bkz. garson.html + index.html) her ikisinde de .side-btn ile birlikte,
   .garson-sidebar adlı DİKEY (column) bir menünün EN ALT/SON öğesi olarak
   kullanılıyor — background/border/padding/font-size zaten dosyada SONRA
   gelen .side-btn kuralı tarafından ezildiği için hiç görünmüyordu, ama
   margin-right:8px (muhtemelen eski, yatay bir araç çubuğu tasarımından kalma)
   hâlâ etkiliydi: son butonun sağına 8px "görünmez" boşluk ekleyip
   .garson-sidebar'ın (overflow-y:auto → CSS gereği overflow-x da auto'ya
   döner) scrollWidth'ini clientWidth'in 8px ÜZERİNE çıkarıyor, bu da menünün
   ALTINDA gereksiz bir yatay kaydırma çubuğu belirmesine yol açıyordu.
   margin-right kaldırıldı — iki kullanım yerinde de yatay bir bitişiklik
   ihtiyacı yok (aside her zaman tek sütun/dikey). */
.bill-request-btn {
  background: transparent; border: 1px solid var(--accent); color: var(--accent);
  border-radius: 8px; padding: 10px 16px; cursor: pointer; font-size: 14px;
}
.bill-request-btn.requested { background: var(--accent); color: var(--bg-elevated); font-weight: 700; }

#mergeModal label, #splitModal label, #customerModal label, #noteModal label {
  display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); margin: 12px 0;
}
#mergeModal select, #splitModal select, #customerModal input, #noteModal textarea {
  padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--text); font-size: 14px; font-family: inherit;
}
#noteModal textarea { resize: vertical; }
.hint-text { font-size: 12px; color: var(--text-muted); margin: 4px 0; }
.split-items-list { max-height: 240px; overflow-y: auto; margin: 10px 0; }
.split-item-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: 14px;
}
.split-item-row label { flex-direction: row !important; align-items: center; margin: 0 !important; color: var(--text) !important; }

/* ============================================================
   ADİSYON EKRANI — verilen referans görsele göre düz/keskin köşeli klasik
   POS görünümü (sadece #orderScreen içinde geçerli; kasa/index.html'in koyu
   teması ETKİLENMEZ — aynı .category-tab/.product-card/.cart-panel
   sınıflarını index.html de kullandığı için tüm kurallar #orderScreen ile
   önekleniyor, border-radius/box-shadow dahil TÜM global stiller burada
   sıfırlanıyor). İSTİSNA (kullanıcı isteği): .category-tab ve .product-card
   artık kasa ekranındaki gibi yumuşatılmış köşe + gölge + renklendirme
   kullanıyor (bkz. aşağıdaki "KATEGORİLER"/"ÜRÜNLER" blokları) — geri kalan
   her şey (sol menü, adisyon paneli, alt çubuk, tuş takımı gövdesi) hâlâ
   BİLEREK keskin köşeli/gölgesiz kalıyor, sadece bu iki buton türü değişti.
   ============================================================ */
#orderScreen {
  --gl-bg: #ffffff;
  --gl-grout: #dcdcdc;
  --gl-panel: #ffffff;
  --gl-border: #c7c7c7;
  --gl-text: #1a1a1a;
  --gl-muted: #6b7280;
  --gl-orange: #f5a300;
  --gl-orange-text: #1a1a1a;
  --gl-orange-active: #d98f00;
  --gl-green: #1f7a34;
  --gl-green-dark: #185f29;
  --gl-blue: #29a3e0;
  --gl-red: #b3554f;
  display: flex; flex-direction: column; background: var(--gl-bg); color: var(--gl-text);
}

#orderScreen .garson-body-wrap {
  flex: 1; min-height: 0; display: grid;
  /* PC + Tablet Yatay (901px ve üzeri) için akıcı (fluid) sütun genişlikleri —
     clamp() ile büyük masaüstü ekranlarında referans görseldeki sabit oranları
     (150/400/155px) korur, tablet-yatay gibi daha dar genişliklerde (ör. 1024px)
     sıkışmadan orantılı olarak daralır. Tablet Dikey ve Telefon katmanları
     aşağıdaki @media bloklarında bu sütunları tamamen yeniden düzenler. */
  grid-template-columns:
    clamp(110px, 11vw, 150px)
    clamp(280px, 30vw, 400px)
    clamp(110px, 11vw, 155px)
    1fr;
  grid-template-rows: 1fr;
  gap: 6px; padding: 6px 6px 0; background: var(--gl-bg);
}
/* NOT: .category-tabs ve .product-grid sınıfları global style.css'te (kasa/index.html
   düzeni için) sabit grid-column/grid-row değerleriyle tanımlı — bunlar buraya
   sızmasın diye 4 sütunu burada AÇIKÇA sabitliyoruz (auto-placement'a güvenmiyoruz). */
#orderScreen .garson-sidebar { grid-column: 1 / 2; grid-row: 1 / 2; }
#orderScreen .cart-panel { grid-column: 2 / 3; grid-row: 1 / 2; }
#orderScreen .category-tabs { grid-column: 3 / 4; grid-row: 1 / 2; }
#orderScreen .product-col { grid-column: 4 / 5; grid-row: 1 / 2; }
/* KULLANICI İSTEĞİ (#219 — DÜZELTME): "sol tarafta müşteri seç alanı sağa sola
   kayıyor" — CSS Grid'de bir grid öğesinin varsayılan `min-width: auto`'su,
   içeriğinin (ör. "Seçilenleri İptal Et" gibi normalde gizli/uzun bir buton
   metni görünür hale geldiğinde) min-content genişliği yukarıdaki clamp()
   sütun tanımından BÜYÜK çıkarsa, sütunu tanımlanan değerin ÖTESİNE
   GENİŞLETEBİLİR — bu, sütun genişliğinin (ve içindeki "Müşteri Seç" gibi
   width:100% butonların) durum değişimlerinde (ör. iptal seçimi başlayınca)
   sessizce kayması şeklinde yaşanan, CSS Grid'de bilinen bir davranıştır.
   min-width: 0 bu örtük büyümeyi keser, sütun HER ZAMAN yukarıdaki clamp()
   değerine sabit kalır — .side-btn'e eklenen overflow-wrap ile de (aşağıda)
   tek bir uzun kelimenin taşmaya zorlamasının önüne geçilir. */
#orderScreen .garson-sidebar,
#orderScreen .cart-panel,
#orderScreen .category-tabs,
#orderScreen .product-col { min-width: 0; }

/* SOL AKSİYON MENÜSÜ — düz beyaz butonlar, ince gri kenarlık, keskin köşe */
#orderScreen .garson-sidebar {
  display: flex; flex-direction: column; gap: 5px; overflow-y: auto;
}
#orderScreen .side-btn {
  background: var(--gl-panel); color: var(--gl-text); border: 1px solid var(--gl-border);
  border-radius: 0; padding: 16px 6px; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; text-align: center; width: 100%; line-height: 1.3;
  /* #219 — bkz. yukarıdaki min-width:0 yorumu: tek bir uzun kelime (ör.
     "Seçilenleri") sütunu zorlayıp genişletemesin diye gerekirse kelime
     içinden de kırılabilsin. */
  overflow-wrap: break-word;
}
#orderScreen .side-btn:active { background: #eef0f2; }
#orderScreen .side-btn.side-btn-disabled,
#orderScreen .side-btn:disabled { color: #b7bcc4; cursor: not-allowed; background: var(--gl-panel); }
#orderScreen .side-btn.side-btn-disabled:active,
#orderScreen .side-btn:disabled:active { background: var(--gl-panel); }
#orderScreen .side-btn.bill-request-btn.requested {
  background: var(--gl-orange); color: var(--gl-orange-text); border-color: var(--gl-orange); font-weight: 700;
}
/* Müşteri/Not atanmışsa ilgili sol menü butonunu vurgula (dolu olduğunu belli et). */
#orderScreen .side-btn.side-btn-set {
  background: var(--gl-orange); color: var(--gl-orange-text); border-color: var(--gl-orange); font-weight: 700;
}

/* Seçili ürünleri toplu iptal butonu (bkz. garson.js) — en az 1 seçim olmadan
   gizli, kırmızı vurgu (yıkıcı bir işlem olduğu belli olsun). */
#orderScreen .cancel-selected-btn {
  background: #fdeaea; color: #b23b3b; border-color: #f0b8b8; font-weight: 700;
  flex: 0 0 auto; margin: 6px 0;
}
#orderScreen .cancel-selected-btn.hidden { display: none; }
#orderScreen .cancel-selected-btn:active { background: #f8d5d5; }
/* Kullanıcı isteği: checkbox yerine tıklamalı çoklu seçim — ödeme ekranındaki
   ".pay-item-selectable"/".selected" deseniyle (bkz. payment-screen.css) aynı
   fikir: iptal edilebilir (yeni/hazırlanıyor) satırlar tıklanabilir imleç +
   hafif hover ile işaretlenir, seçiliyken belirgin bir arka plan/kenarlık alır. */
#orderScreen .cart-line.cart-line-cancelable {
  cursor: pointer; border-radius: 6px; padding: 10px 8px; margin: 0 -8px; transition: background .1s ease;
}
#orderScreen .cart-line.cart-line-cancelable:hover { background: #f5f5f5; }
#orderScreen .cart-line.cart-line-cancelable.selected {
  background: #fdeaea; box-shadow: inset 0 0 0 1px #f0b8b8;
}

/* ADİSYON PANELİ (masa/durum başlığı + ürün listesi + toplam) — düz, gölgesiz */
#orderScreen .cart-panel {
  background: var(--gl-panel); border: 1px solid var(--gl-border); border-radius: 0;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
#orderScreen .cart-head {
  background: #e2e2e2; padding: 10px 12px; border-bottom: 1px solid var(--gl-border); font-size: 14px;
}
#orderScreen .cart-head-line { margin-bottom: 2px; }
#orderScreen .cart-head-line:last-child { margin-bottom: 0; }
#orderScreen .cart-head.cart-status,
#orderScreen .cart-status { color: var(--gl-muted); font-size: 13px; }
#orderScreen #orderCustomerLine, #orderScreen #orderNoteLine {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#orderScreen .cart-items { flex: 1; overflow-y: auto; padding: 10px 14px; background: #fff; }
#orderScreen .cart-line { border-bottom: 1px solid #eee; padding: 10px 0; }
#orderScreen .cart-line .line-top { color: var(--gl-text); }
#orderScreen .cart-line .line-opts { color: var(--gl-muted); }
/* KULLANICI İSTEĞİ: eklenmiş ürünün varyasyonunu değiştirme butonu ("✎") —
   satır tutarının hemen solunda, küçük/dikkat çekmeyen bir simge. */
#orderScreen .cart-line-edit-variation-btn {
  background: var(--gl-orange); color: var(--gl-orange-text); border: none; border-radius: 6px;
  width: 22px; height: 22px; font-size: 12px; line-height: 1; cursor: pointer; margin-right: 6px;
  vertical-align: middle;
}
#orderScreen .cart-line-edit-variation-btn:active { background: var(--gl-orange-active); }
#orderScreen .cart-total {
  border-top: 1px solid var(--gl-border); padding: 10px 12px; color: var(--gl-muted);
  background: #f2f2f2;
}
#orderScreen .cart-total strong { color: var(--gl-green); }

/* KATEGORİLER — kullanıcı isteği: kasa ekranındaki (js/app.js, style.css
   .category-tab) gibi renklendirilmiş, köşeleri yumuşatılmış ve gölgeli. Düzenin
   ŞEKLİ (dikey sütun, aynı grid hücresi — bkz. yukarıdaki .garson-body-wrap
   grid-column/grid-row kuralları) DEĞİŞMEDİ; sadece buton "chrome"u (renk/köşe/
   gölge) kasa'nınkiyle aynı DİLİ konuşacak şekilde güncellendi. Kasa'nın kendi
   var(--card)/var(--border) (koyu tema) değerleri yerine BİLEREK bu ekranın kendi
   --gl-panel/--gl-border/--gl-muted eşdeğerleri kullanılıyor — #orderScreen dosya
   başındaki nottaki gibi kasıtlı olarak global koyu/açık tema sisteminden bağımsız
   kalmaya devam ediyor (aksi halde beyaz adisyon ekranının ortasında koyu bir kart
   uyumsuz dururdu); renk/köşe/gölge DİLİ birebir kasa ile aynı. */
#orderScreen .category-tabs {
  /* ÖNEMLİ — flex-wrap/max-height/align-content BURADA AÇIKÇA SIFIRLANIYOR:
     kasa ekranı için style.css'e sonradan eklenen ".category-tabs"
     (2 satıra sarma) kuralı "flex-wrap: wrap", "max-height: 142px" ve
     "align-content: flex-start" içeriyor — bu üç özellik BU kural
     tarafından üzerine yazılmadığı sürece (CSS cascade özellik bazında
     çalışır, kural bazında değil) buradaki "flex-direction: column" ile
     birleşip listeyi TEK dikey sütun yerine, 142px'te bir yeni "sütuna"
     sarılan çok sütunlu/yatay-görünümlü bir düzene çeviriyordu (gerçek
     bir regresyon — kullanıcı "dikey kategoriler yatay olmuş, görünmüyor"
     diye bildirdi, kök nedeni buydu). flex-wrap: nowrap + max-height: none
     ile garson'un TEK sütunlu, kendi yüksekliği kadar (contain'de flex:1
     ile zaten sınırlı) dikey listesi eskisi gibi çalışıyor. */
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px;
  max-height: none; overflow-y: auto; overflow-x: hidden;
  padding: 4px; border: none; background: transparent;
}
/* KULLANICI İSTEĞİ (DEĞİŞİKLİK GEÇMİŞİ): pasif/seçili-olmayan kategori
   butonları eskiden nötr gri/beyazdı ("background: var(--gl-panel); color:
   var(--gl-muted);") — kullanıcı "seçili olmayan butonlar sistemde kullanılan
   çift renk olsun sarı turuncu gibi" istedi. Sistemin genelinde zaten kurulu
   olan iki-tonlu gradyan idiom'u (bkz. #openTablesBtn.tables-btn-has-open,
   #openTablesBackBtn, .table-card.dolu, style.css) BURADA DA uygulanıyor:
   linear-gradient(var(--btn-color), var(--btn-color2)) — admin özelleştirmezse
   bunlar sırasıyla ana renk/ikincil renge (varsayılan #f5a524 turuncu/sarı,
   #d9662a koyu turuncu) eşittir, TAM istenen "sarı turuncu" görünümü. Koyu
   gradyan zemin üzerinde okunabilirlik için metin rengi de idiom'un geri kalanı
   gibi #171200 (koyu) yapıldı. SEÇİLİ kategori (.category-tab.active) yeşil
   olarak AYNEN KALDI — kullanıcı SADECE pasif butonları değiştirmek istedi. */
#orderScreen .category-tab {
  /* KULLANICI İSTEĞİ: kategori yazıları ve butonu biraz büyütüldü (eskiden
     font-size:13px, padding:14px 6px). */
  background: linear-gradient(135deg, var(--btn-color), var(--btn-color2)); color: #171200;
  border: 1px solid var(--gl-border); border-radius: 12px;
  padding: 16px 8px; font-size: 15px; font-weight: 600; text-align: center; white-space: normal;
  box-shadow: 0 2px 6px rgba(0,0,0,.10); transition: transform .1s ease, border-color .15s ease;
}
#orderScreen .category-tab.active {
  background: var(--gl-green); color: #fff; border-color: var(--gl-green); font-weight: 700;
  box-shadow: 0 3px 10px rgba(31,122,52,.35);
}
#orderScreen .category-tab:active { transform: scale(.97); }

/* ÜRÜNLER — aynı gerekçeyle (yukarıdaki kategori notuna bakın) kasa'nınkine
   benzer yumuşak köşeli/gölgeli kart görünümü; yeşil düz blok yerine nötr
   (beyaz) kart + ince kenarlık. Fiyat artık burada HİÇ render edilmiyor (bkz.
   js/garson.js renderProductGrid() — "sadece ürün eklenince görünsün" isteği),
   bu yüzden .price kuralı burada kasıtlı olarak KALDIRILDI (ölü kod değil —
   js hiç .price div'i oluşturmuyor). */
#orderScreen .product-col {
  display: flex; flex-direction: column; min-height: 0; gap: 6px;
}
#orderScreen .product-grid {
  flex: 1; padding: 4px; margin: 0; overflow-y: auto; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; background: transparent;
}
#orderScreen .product-card {
  /* KULLANICI İSTEĞİ: ürün butonu biraz büyütüldü (style.css'teki temel
     .product-card padding:12px 10px yerine burada override edildi). */
  background: var(--gl-panel); color: var(--gl-text); border: 1px solid var(--gl-border); border-radius: 12px;
  padding: 15px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.10); transition: transform .1s ease, border-color .15s ease;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
#orderScreen .product-card:active { background: #f2f2f2; transform: scale(.97); }
#orderScreen .product-card .name {
  /* KULLANICI İSTEĞİ: ürün adı yazısı biraz büyütüldü (style.css'teki temel
     .product-card .name font-size:14px yerine burada override edildi). */
  color: var(--gl-text); margin-bottom: 0; min-height: 0; font-size: 15px;
}

/* Kullanıcı isteği: tuş takımı orantılı olarak KÜÇÜLTÜLDÜ — eskiden çok yer
   kaplayıp ürün ızgarasını (üstteki #orderScreen .product-grid, flex:1) sıkıştırıp
   ürünlerin görünmesini engelliyordu. Düzenin ŞEKLİ (üstte ürünler, altta tuş
   takımı) DEĞİŞMEDİ — sadece tuş takımının kendi iç dolgu/font boyutları küçültüldü,
   böylece flex:0 0 auto olan yüksekliği azalıp product-grid'e daha fazla alan kaldı. */
#orderScreen .qty-keypad {
  background: var(--gl-panel); border: 1px solid var(--gl-border); border-radius: 0; padding: 4px; flex: 0 0 auto;
}
#orderScreen .qty-keypad-row { display: flex; gap: 4px; margin-bottom: 4px; }
#orderScreen .qty-keypad-display {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 700; text-align: center; color: var(--gl-text);
  background: #fff; border: 1px solid var(--gl-border); border-radius: 0; padding: 5px; font-family: inherit;
}
#orderScreen .qty-keypad-side-btn {
  flex: 0 0 32px; border: 1px solid var(--gl-border); border-radius: 0; background: var(--gl-panel);
  font-size: 14px; cursor: pointer; color: var(--gl-text);
}
#orderScreen .qty-keypad-side-btn.qty-keypad-clear { color: var(--gl-red); }
#orderScreen .qty-keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
#orderScreen .qty-key {
  padding: 8px; font-size: 14px; font-weight: 600; border-radius: 0; border: 1px solid var(--gl-border);
  background: var(--gl-panel); color: var(--gl-text); cursor: pointer; font-family: inherit;
}
#orderScreen .qty-key:active { background: var(--gl-blue); color: #fff; border-color: var(--gl-blue); }
#orderScreen .qty-key.qty-key-disabled { color: #c7cbd1; cursor: not-allowed; }
#orderScreen .qty-key.qty-key-disabled:active { background: var(--gl-panel); color: #c7cbd1; }
#orderScreen .qty-key.qty-key-back { color: var(--gl-red); }

/* ALT ÇUBUK — düz beyaz çubuk, gölgesiz, sadece üst kenarlık */
/* KULLANICI İSTEĞİ (DÜZELTME, 3. tur) — "masa ekranındaki kapat ve ödeme
   butonlarını en sağ köşeye al garson kısmında da kapat butonunu en sağa
   al": önceki turda bu çubuk, butonların SAĞ kenarını dikey kategori
   listesinin altına denk getirmek için 4 sütunlu bir grid kullanıyordu
   (.bb-center kategori sütununa kadar kaplayıp sağa yaslanıyordu) — ama bu,
   .product-col (1fr, en sağdaki asıl ürün sütunu) BOŞ kaldığı için butonları
   ekranın GERÇEK sağ köşesine değil, ürün sütununun SOLUNA oturtuyordu.
   Kullanıcı artık "kategori sütununun altı" değil, DOĞRUDAN "en sağ köşe"
   istiyor — bu yüzden karmaşık grid hizalaması tamamen kaldırıldı, yerine
   basit bir flex çubuk geldi: .bb-left sabit genişlikte solda, .bb-center
   `flex:1` ile KALAN TÜM boşluğu kaplar ve `justify-content:flex-end` ile
   içeriğini bu boşluğun en sağına yaslar — sonuç, buton grubunun (Ödeme +
   Kapat, ya da garson tarafında sadece Kapat) sağ kenarı çubuğun/ekranın
   gerçek sağ köşesine oturur. Bu tasarım genişlikten bağımsız çalıştığı için
   601-900px (tablet dikey) aralığındaki eski "mutlak ortalama" istisnası da
   artık gereksiz — kaldırıldı (aşağıdaki tablet dikey bloğuna bakın). */
#orderScreen .garson-bottombar {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 8px 12px; margin-top: 6px; background: var(--gl-panel); border-top: 1px solid var(--gl-border);
}
#orderScreen .bb-left {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 13px; color: var(--gl-muted);
}
/* js/branding.js periyodik ping ile bu class'ı ekler/kaldırır (gerçek bağlantı durumu). */
#orderScreen .bb-status.conn-lost { color: var(--gl-red); font-weight: 700; }
/* Kullanıcı isteği: son çıkan (açılan) adisyonun no + tarih/saat bilgisi —
   bağlantı durumu satırının hemen altında, daha soluk/küçük ikinci bir satır. */
#orderScreen .bb-last-order { font-size: 11px; color: var(--gl-muted); opacity: .8; }
#orderScreen .bb-center {
  flex: 1 1 auto;
  display: flex; gap: 10px; justify-content: flex-end;
}
#orderScreen .bb-btn {
  padding: 12px 28px; border-radius: 0; font-size: 15px; font-weight: 700; cursor: pointer; border: 1px solid var(--gl-border);
  font-family: inherit;
}
#orderScreen .bb-btn-pay { background: var(--gl-panel); color: var(--gl-text); }
#orderScreen .bb-btn-pay:active { background: #f0f0f0; }
#orderScreen .bb-btn-close { background: var(--gl-red); color: #fff; border-color: var(--gl-red); }
#orderScreen .bb-btn-close:active { background: #99433e; }
#orderScreen .bb-link {
  background: transparent; border: none; color: var(--gl-muted); text-decoration: underline; cursor: pointer;
  font-family: inherit; font-size: 13px; padding: 0;
}
#orderScreen .bb-staff { font-weight: 600; color: var(--gl-text); }

/* ============================================================
   TABLET DİKEY (601px–900px): garsonun elinde dikey tuttuğu bir tablet
   (ör. iPad 768px, Android tablet ~800px). Telefon gibi TEK sütuna
   indirmek yerine, genişliği daha iyi kullanan 2 sütunlu bir hibrit
   düzen kullanılır: sol dar sütunda aksiyon menüsü (üstte) + kategori
   listesi (altta, dikey — masaüstüyle aynı), sağ geniş sütunda adisyon
   paneli (üstte) + ürünler/tuş takımı (altta). Adet tuş takımı masaüstüyle
   aynı 3 sütunlu (klasik hesap makinesi) düzende kalır — dikey tablette
   telefondaki gibi yükseklik kısıtı yok. */
@media (max-width: 900px) and (min-width: 601px) {
  #orderScreen .garson-body-wrap {
    grid-template-columns: 150px 1fr;
    grid-template-rows: 36vh 1fr;
    grid-template-areas:
      "sidebar    cart"
      "categories products";
    gap: 8px; padding: 8px 8px 0;
  }
  #orderScreen .garson-sidebar { grid-area: sidebar; }
  #orderScreen .cart-panel { grid-area: cart; }
  #orderScreen .category-tabs { grid-area: categories; }
  #orderScreen .product-col { grid-area: products; }
  /* Daha büyük dokunma hedefleri — tablet parmakla kullanılır, fare değil. */
  #orderScreen .side-btn { padding: 18px 8px; font-size: 14px; }
  #orderScreen .category-tab { padding: 18px 8px; font-size: 15px; }
  #orderScreen .product-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
  /* NOT: eskiden burada bu genişlik için ayrı bir "mutlak ortalama" istisnası
     vardı (kategori sütununun altına hizalama bu genişlikte uygulanamadığı
     için) — artık ana kural "en sağ köşeye yasla" olduğundan (yukarıdaki
     .garson-bottombar/.bb-left/.bb-center — basit flex + flex:1 + justify-
     content:flex-end) bu her genişlikte zaten doğru çalışıyor, ayrı bir
     istisnaya gerek kalmadı. */
  #orderScreen .bb-left { flex: 0 0 190px; }
}

/* ============================================================
   TELEFON (≤600px): dar genişlik + kısıtlı yükseklik — tüm bölümler
   tek sütunda alt alta dizilir, adet tuş takımı yatayda 6 sütuna
   sıkıştırılır (dikey yerden tasarruf için).
   ============================================================ */
@media (max-width: 600px) {
  #orderScreen .garson-body-wrap {
    grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr; padding: 6px 6px 0;
  }
  /* Geniş ekran için sabitlenen açık grid-column/grid-row yerleşimini burada sıfırla —
     dar ekranda tek sütuna, doğal (auto) sıraya dönsün. */
  #orderScreen .garson-sidebar,
  #orderScreen .cart-panel,
  #orderScreen .category-tabs,
  #orderScreen .product-col { grid-column: 1 / 2; grid-row: auto; }
  /* Sol menü butonları .side-btn'nin varsayılan width:100%'ü yüzünden basit bir
     flex-wrap ile alt alta dizilmeye devam eder (her biri satırın tamamını
     kaplar) — telefonda bu, adisyonu görmeden önce ~250px'lik dikey yer
     kaplardı. Bunun yerine kompakt bir 3 sütunlu ızgaraya al. */
  #orderScreen .garson-sidebar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; overflow-y: visible; }
  #orderScreen .side-btn { width: auto; padding: 10px 4px; font-size: 11px; line-height: 1.2; }
  #orderScreen .cart-panel { max-height: 26vh; }
  #orderScreen .category-tabs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; }
  #orderScreen .category-tab { flex: 0 0 auto; padding: 10px 14px; }
  #orderScreen .qty-keypad-grid { grid-template-columns: repeat(6, 1fr); }
  /* Dar telefon genişliğinde alt çubuk tek sütuna döner (bilgi üstte, butonlar
     altta) — KULLANICI İSTEĞİ ("en sağ köşeye al") burada da uygulanır:
     butonlar artık ortalanmıyor, en sağa yaslanıyor (bilgi satırı kendi
     ortalanmış hizasında kalır, bu telefon genişliğinde değişmedi). */
  #orderScreen .garson-bottombar { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
  #orderScreen .bb-left { flex: 0 0 auto; align-items: center; }
  #orderScreen .bb-center { justify-content: flex-end; }
}