:root {
  /* Sidebar SAF DÜZ SİYAH (kullanıcı 2026-07-12: "turuncu efekt kalksın, solid düz siyah") —
     sıcak kahve alt ton ve turuncu aksan kaldırıldı, menü monokrom. */
  --sidebar-bg: #000000;
  --sidebar-hover: rgba(255,255,255,0.06);
  --sidebar-active: rgba(255,255,255,0.09);
  --sidebar-text: #94a0b2;
  --sidebar-text-hover: #d3dae3;
  --sidebar-text-active: #ffffff;
  --sidebar-border: rgba(255,255,255,0.07);
  --sidebar-w: 252px;
  /* Masa durumları için yumuşak yeşil/kırmızı tonlar. Yeşil KOYULAŞTIRILDI
     (kullanıcı 2026-07-11: "her yerdeki yeşil daha dark olsun"). */
  --sweet-green: #17724a;
  --sweet-green-dk: #115538;
  --sweet-green-lt: rgba(23,114,74,0.12);
  --sweet-green-bd: rgba(23,114,74,0.5);
  /* Kırmızı ailesi VERMİLYON'a kaydı (kullanıcı 2026-07-13: "daha bir kırmızı,
     biraz turuncuya kaçan ton") — hue ~8°, eski #b0262f/#cb323d ailesinin yerini aldı. */
  --sweet-red: #d64530;
  --sweet-red-dk: #c9351d;
  --sweet-red-lt: rgba(214,69,48,0.1);
  --sweet-red-bd: rgba(214,69,48,0.5);
  /* MASA DURUMU — kartlar DOLGULU ama %50 SAYDAM (kullanıcı 2026-07-13: "çok dolgulu
     oluyor, opacity'i %50 azalt"): Dolu=vermilyon, Boş=yeşil, alpha 0.5. Açık temada
     dolgu pastele düştüğü için yazı BEYAZ DEĞİL, durumun KOYU MÜREKKEBİ (-ink).
     Rezerve kehribar ve DOLGUSUZ kalır (ayrışsın).
     -bg/-bd/-ink/-chip = dolgulu kart; -fg/-soft/-solid diğer ekranlardaki rozet/butonlar için. */
  /* YENİ HİYERARŞİ (kullanıcı 2026-07-20: "alışkanlıkları değiştiririz, yeter ki hoş olsun"):
     DOLU = güçlü vermilyon dolgu (bağırır — para/iş var), BOŞ = SESSİZ nötr yüzey + ince
     yeşil fısıltı kenar + yeşil rozet (arka planda durur). Renk semantiği (yeşil=boş,
     kırmızı=dolu) korunur; şiddet duruma göre ayrışır. */
  /* Kemik beyaz (kullanıcı 2026-07-20: "light'ta beyaz çok fazla") — boş kart krem yüzey. */
  --masa-empty-bg: #f6f1e7;
  --masa-empty-bd: rgba(23,114,74,0.28);
  --masa-empty-ink: #526071;
  --masa-empty-fg: #26775a;
  --masa-empty-soft: rgba(23,114,74,0.14);
  /* DOLU v4 (kullanıcı 2026-07-20: tuğla da "hâlâ bağırıyor") — KOYU kırmızı + hafif
     şeffaflık: derin, sakin, yine net ayrışır. Beyaz mürekkep, iki temada AYNI taban. */
  /* DOLU v6 — "kızgın kart" (kullanıcı 2026-07-20: dolgu slabı olmasın): çok hafif
     kırmızı tint + belirgin kırmızı kenar + KOYU KIRMIZI mürekkep — kırmızılık dolgudan
     değil kenar+içerikten. */
  --masa-full-bg: rgba(220,38,28,0.16);
  --masa-full-bd: rgba(178,24,16,0.8);
  --masa-full-ink: #8f1d12;
  --masa-full-fg: #a52a15;
  --masa-full-soft: #f2c9bd;
  --masa-full-solid: #a52a15;
  /* Opak dolgu üstündeki rozet kapsülü — hafif beyaz tint, yazı beyaz (inherit). */
  --masa-onfill-chip: rgba(255,255,255,0.22);
  /* Duraklatılmış masa vurgusu — İKİ TEMADA DA parlak kehribar (kullanıcı 2026-07-13:
     "dark'taki sarıyı light'ta da kullan"); üstünde koyu ikon. */
  --masa-paused-accent: #e8b64c;
  --masa-paused-ink: #2b2005;
  /* Rezerve = kehribar/sarı (dolgusuz, çerçeve anlatır) */
  --masa-resv-bg: #fdfbf6;
  --masa-resv-bd: #f0e2bc;
  --masa-resv-fg: #96700c;
  --masa-resv-soft: #f6ebc9;
  /* Panel ana vurgu = VERMİLYON KIRMIZI (kullanıcı 2026-07-13: "daha bir kırmızı,
     turuncuya kaçan" — tatlı kırmızı #b0262f ailesi hue ~8°'ye kaydırıldı; iki mod
     aynı ailede). Değişken adları tarihsel (brand-orange);
     tanıtım/müşteri turuncusu #ee6c1a KALIR. */
  --brand-orange: #c9351d;
  --brand-orange-dk: #a52a15;
  --brand-orange-lt: rgba(201,53,29,0.1);
  --primary: var(--brand-orange);
  --primary-lt: var(--brand-orange-lt);
  --primary-dk: var(--brand-orange-dk);
  --primary-fg: #ffffff;
  /* Bootstrap'ın kendi primary'si de markaya çekilsin (*-subtle / *-emphasis / border-primary-subtle mavi kalmasın) */
  --bs-primary: #c9351d;
  --bs-primary-rgb: 201,53,29;
  --bs-primary-text-emphasis: #a52a15;
  --bs-primary-bg-subtle: #fae7e0;
  --bs-primary-border-subtle: #eec6b8;
  /* LIGHT mod = musteri menusu "kemik/krem" estetigi: sicak krem zemin + yuzen sicak-beyaz kartlar. */
  --body-bg: #f4efe5;             /* kemik/krem zemin */
  --bg-surface: #fdfbf6;          /* yuzen kartlar/paneller — temiz sicak beyaz */
  --bg-surface-secondary: #f2ece1;/* kart-ici ikincil (cizgili tablo, input, hover) — grimsi krem */
  --border-color: #e7ded0;        /* ince sicak kenar */
  --border-color-light: #efe7d8;  /* daha acik sicak kenar */
  --border-translucent: rgba(120,92,40,0.10);
  --text: #1e2633;
  --text-secondary: #626d7d;
  --text-muted: #7e8896;
  --text-disabled: #c0c7cf;
  --blue: #066fd1;
  --azure: #4299e1;
  --green: #278f38;
  --lime: #74b816;
  --yellow: #f59f00;
  --orange: #f76707;
  --red: #c23434;
  --pink: #d6336c;
  --purple: #ae3ec9;
  --indigo: #4263eb;
  --cyan: #17a2b8;
  --green-lt: rgba(47,179,68,0.06);
  --red-lt: rgba(214,57,57,0.06);
  --yellow-lt: rgba(245,159,0,0.06);
  --blue-lt: rgba(6,111,209,0.06);
  --azure-lt: rgba(66,153,225,0.06);
  --purple-lt: rgba(174,62,201,0.06);
  --cyan-lt: rgba(23,162,184,0.06);
  /* KÖŞE YUVARLAKLIĞI SİSTEMİ (kullanıcı 2026-07-11): paneldeki TÜM border-radius'lar
     bu çarpanla ölçeklenir (pill/999px hariç). 1 = eski görünüm; Moda için 0.65 = daha
     keskin kutular. Tek satırdan sistem geneli artırılıp azaltılır. */
  --radius-scale: 0.65;
  --radius: calc(6px * var(--radius-scale));
  --radius-sm: calc(4px * var(--radius-scale));
  --radius-lg: calc(8px * var(--radius-scale));
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  /* Sicak (kahve-tonlu) yumusak golge — kemik zemin uzerinde "yuzen/kabarik" kart hissi. */
  --shadow: 0 1px 2px rgba(70,55,35,0.05), 0 6px 16px -10px rgba(70,55,35,0.18);
  --shadow-card: 0 0 0 1px var(--border-translucent), 0 1px 2px rgba(70,55,35,0.05), 0 6px 16px -10px rgba(70,55,35,0.18);
  /* Belirgin "yüzen" gölge — öne çıkan paneller/kartlar için (bilgi paneli, adisyon/kategori kartları). */
  --shadow-float: 0 2px 6px rgba(70,55,35,0.07), 0 18px 38px -14px rgba(70,55,35,0.30);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;
  --font-size: 0.875rem;
  --line-height: 1.4286;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
}

[data-theme=dark] {
  /* GERÇEK SİYAH (kullanıcı 2026-07-12: "genel dark siyah olsun" — yönetim ekranı yeterince
     koyu değildi): zemin ve kart içleri saf siyaha bir tık mesafede; ayrım ince çerçevelerde. */
  --body-bg: #050507;
  --bg-surface: #0a0b0d;
  --bg-surface-secondary: #111318;
  --border-color: rgba(255,255,255,0.09);
  --border-color-light: rgba(255,255,255,0.05);
  --border-translucent: rgba(255,255,255,0.08);
  --text: #e9eaee;
  --text-secondary: #b6b9c2;
  --text-muted: #8d9099;
  --text-disabled: #5a5e68;
  /* Sidebar dark modda da SAF SİYAH (kullanıcı 2026-07-12, monokrom menü). */
  --sidebar-bg: #000000;
  --sidebar-border: rgba(255,255,255,0.07);
  --sidebar-hover: rgba(255,255,255,0.06);
  --sidebar-text: #94a0b2;
  --sidebar-text-hover: #d3dae3;
  --sidebar-active: rgba(255,255,255,0.09);
  /* Koyu modda vurgu = VERMİLYONUN aydınlık tonu (2026-07-13: iki mod aynı hue'da,
     turuncuya kaçan kırmızı) — siyah zeminde okunsun diye bir tık açık. */
  --brand-orange: #d64530;
  --brand-orange-dk: #c9351d;
  --brand-orange-lt: rgba(214,69,48,0.16);
  --bs-primary: #d64530;
  --bs-primary-rgb: 214,69,48;
  --bs-primary-text-emphasis: #ea9282;
  --bs-primary-bg-subtle: #2d0e07;
  --bs-primary-border-subtle: #5e2313;
  --sweet-green-lt: rgba(23,114,74,0.2);
  --sweet-red-lt: rgba(214,69,48,0.18);
  /* Masa durumu — dark'ta da %50 SAYDAM DOLGU (kullanıcı 2026-07-13 "opacity %50 azalt"):
     siyah zeminle karışıp derin/mat tona düşer; yazı beyaz kalabilir. */
  /* Dolu = light ile AYNI vermilyon dolgu (kullanıcı 2026-07-20: "iki modda aynı renk");
     dark'ta yazı beyaz, kenar bir tık parlak. */
  /* Boş = dark'ta TAM SİYAH iç (kullanıcı 2026-07-20) + ince yeşil kenar. */
  --masa-empty-bg: #08090c;
  --masa-empty-bd: rgba(23,114,74,0.4);
  --masa-empty-ink: #97a0ad;
  --masa-empty-fg: #4aa578;
  --masa-empty-soft: rgba(23,114,74,0.18);
  /* Dolu v6 — "kızgın kart": tam siyaha yakın zemin üstünde hafif kırmızı tint +
     parlak kırmızı kenar + AÇIK KIRMIZI mürekkep (dolgu yok, kenar+içerik konuşur). */
  --masa-full-bg: rgba(225,45,32,0.06);
  --masa-full-bd: rgba(240,82,62,0.7);
  --masa-full-ink: #ffb3a8;
  --masa-full-fg: #e88d7c;
  --masa-full-soft: rgba(214,69,48,0.3);
  --masa-full-solid: #a52a15;
  --masa-onfill-chip: rgba(255,255,255,0.16);
  /* Rezerve — dark kehribar (dolgusuz, çerçeve anlatır) */
  --masa-resv-bg: #07080b;
  --masa-resv-bd: rgba(232,182,76,0.32);
  --masa-resv-fg: #e8b64c;
  --masa-resv-soft: rgba(232,182,76,0.18);
  --green-lt: rgba(47,179,68,0.16);
  --red-lt: rgba(214,57,57,0.16);
  --yellow-lt: rgba(245,159,0,0.16);
  --blue-lt: rgba(6,111,209,0.18);
  --azure-lt: rgba(66,153,225,0.16);
  --purple-lt: rgba(174,62,201,0.16);
  --cyan-lt: rgba(23,162,184,0.16);
  --shadow: rgba(0,0,0,0.4) 0 2px 4px 0;
  --shadow-card: 0 0 0 1px var(--border-translucent), rgba(0,0,0,0.3) 0 2px 4px 0;
  --shadow-float: 0 2px 6px rgba(0,0,0,0.4), 0 20px 42px -16px rgba(0,0,0,0.72);
}

[data-theme=dark] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

[data-theme=dark] .topbar {
  background: rgba(12, 13, 17, 0.85);
}

[data-theme=dark] .tb-btn .dot {
  border-color: var(--bg-surface);
}

[data-theme=dark] .sidebar-user .avatar .online {
  border-color: var(--sidebar-bg);
}

.theme-toggle .theme-icon-light {
  display: none;
}

.theme-toggle .theme-icon-dark {
  display: block;
}

[data-theme=dark] .theme-toggle .theme-icon-light {
  display: block;
}

[data-theme=dark] .theme-toggle .theme-icon-dark {
  display: none;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  font-size: var(--font-size);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height);
  color: var(--text);
  background: var(--body-bg);
  /* Sayfa govdesi ASLA yatay kaydirilmaz (mobilde saga-sola pan biter); genis icerik kendi
     kutusunda kayar (.table-responsive). 'clip' scroll-container olusturmaz, dikey davranis
     degismez — off-canvas sidebar (translateX) veya tasan tek bir oge tum sayfayi surukleyemez. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: calc(3px * var(--radius-scale, 1));
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:where(svg):not([width]):not([height]) {
  width: 1em;
  height: 1em;
}

@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0s;
  }
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 8px 14px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 150ms ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.nav-link:focus-visible {
  outline-color: var(--primary);
  outline-offset: -2px;
}

.search-box input:focus-visible {
  outline: none;
}

#main-content:focus {
  outline: none;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  /* 130: karartma perdesi (120) ve mobil alt kısayol barı (100) üstünde —
     çekmece açılınca alt bar da perdeyle buzlanır, sidebar en önde kalır. */
  z-index: 130;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 220ms cubic-bezier(0.2, 0, 0, 1);
}

.sidebar-brand {
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.brand-icon {
  width: 28px;
  height: 28px;
  background: var(--primary);
  border-radius: calc(6px * var(--radius-scale, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 13px;
}

.brand-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.2px;
}

.brand-name small {
  font-weight: 400;
  color: var(--sidebar-text);
  font-size: 13px;
  margin-left: 2px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.sidebar-nav::-webkit-scrollbar {
  width: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: calc(3px * var(--radius-scale, 1));
}

.nav-group {
  padding: 0 8px;
  margin-bottom: 2px;
}

.nav-label {
  padding: 16px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  /* Grup başlıkları: menü isimlerinden (--sidebar-text) biraz daha AÇIK beyaz. */
  color: #e3e9f1;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 14px;
  border-radius: var(--radius-lg);
  color: var(--sidebar-text);
  font-size: 13px;
  font-weight: var(--font-weight-normal);
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms, color 140ms;
  margin-bottom: 2px;
  min-height: 36px;
}

.nav-link:hover {
  color: var(--sidebar-text-hover);
  background: var(--sidebar-hover);
  text-decoration: none;
}

/* AKTİF ÖĞE — MONOKROM (kullanıcı 2026-07-12): turuncu→kırmızı degrade aksan kaldırıldı;
   vurgu nötr beyaz tint + beyaz sol çizgi, ikon metin rengini takip eder. */
.nav-link.active {
  color: var(--sidebar-text-active);
  background: var(--sidebar-active);
  font-weight: var(--font-weight-medium);
}

.nav-link.active::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: calc(3px * var(--radius-scale, 1));
  /* Aktif sol çizgi TEMA RENGİNDE (kullanıcı 2026-07-12; beyazdı). */
  background: var(--primary);
}

/* İkonlar currentColor kullanır; renk nav-link rengini takip eder (monokrom). */
.nav-link .icon {
  width: 18px;
  height: 18px;
  opacity: 0.7;
  flex-shrink: 0;
}

.nav-link:hover .icon {
  opacity: 0.95;
}

.nav-link.active .icon {
  /* Seçili sayfada YALNIZ İKON tema renginde (kullanıcı 2026-07-12); yazı beyaz kalır. */
  color: var(--primary);
  opacity: 1;
}

.nav-link .badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: calc(3px * var(--radius-scale, 1));
  line-height: 1.6;
}

.badge-red {
  background: rgba(214, 57, 57, 0.15);
  color: #f87171;
}

.badge-teal {
  background: var(--primary-lt);
  color: var(--primary);
}

.badge-blue {
  background: rgba(66, 153, 225, 0.12);
  color: #60a5fa;
}

.nav-tree {
  display: flex;
  flex-direction: column;
}

.nav-toggle {
  background: transparent;
  border: 0;
  font: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.nav-toggle .nav-text {
  flex: 1;
}

.nav-chev {
  margin-left: auto;
  opacity: 0.55;
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), opacity 120ms;
  flex-shrink: 0;
}

.nav-toggle:hover .nav-chev {
  opacity: 0.9;
}

.nav-tree.open > .nav-toggle .nav-chev {
  transform: rotate(90deg);
  opacity: 1;
}

.nav-tree.has-active > .nav-toggle {
  color: var(--sidebar-text-hover);
}

.nav-tree.has-active > .nav-toggle .icon {
  opacity: 0.85;
}

.nav-tree .nav-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms cubic-bezier(0.2, 0, 0, 1);
}

.nav-tree.open .nav-sub {
  grid-template-rows: 1fr;
}

.nav-tree .nav-sub > .nav-sub-inner {
  overflow: hidden;
  min-height: 0;
  position: relative;
  padding: 4px 0 4px 28px;
}

.nav-tree .nav-sub > .nav-sub-inner::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--sidebar-border);
}

.nav-tree.open .nav-sub > .nav-sub-inner::before {
  background: rgba(255, 255, 255, 0.1);
}

.nav-sublink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--sidebar-text);
  border-radius: var(--radius-sm);
  text-decoration: none;
  position: relative;
  margin: 1px 0;
  transition: background 120ms, color 120ms, transform 120ms;
}

.nav-sublink::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--sidebar-border);
  transform: translateY(-50%);
  transition: background 120ms, width 120ms;
}

.nav-sublink:hover {
  color: var(--sidebar-text-hover);
  background: var(--sidebar-hover);
  text-decoration: none;
}

.nav-sublink:hover::before {
  background: rgba(255, 255, 255, 0.25);
}

.nav-sublink.active {
  color: var(--sidebar-text-active);
  background: var(--sidebar-active);
  font-weight: var(--font-weight-medium);
}
.nav-sublink.active::before {
  background: var(--primary);
  width: 12px;
  left: -13px;
}

.nav-sublink .badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: calc(3px * var(--radius-scale, 1));
  line-height: 1.6;
}

.sidebar-footer {
  border-top: 1px solid var(--sidebar-border);
  padding: 8px;
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: background 120ms;
  cursor: pointer;
}

.sidebar-user:hover {
  background: var(--sidebar-hover);
}

.sidebar-user .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dk));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}

.sidebar-user .avatar .online {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  background: var(--green);
  border: 2px solid var(--sidebar-bg);
  border-radius: 50%;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-info .name {
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* İŞLETME YAZISI (kullanıcı 2026-07-12): müşteri menüsü başlığındaki "MODA CAFE · MASA 1"
   dilinin büyüğü — versal, geniş harf aralığı; yuvarlak "M" avatarının yerini aldı. */
.sidebar-wordmark {
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-info .role {
  color: var(--sidebar-text);
  font-size: 11px;
  line-height: 1.2;
}

.sidebar-user .more-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--sidebar-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 120ms;
}

.sidebar-user:hover .more-btn {
  opacity: 1;
}

.topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  height: 56px;
  background: rgba(253, 251, 246, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 90;
  transition: left 220ms cubic-bezier(0.2, 0, 0, 1);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 auto;
}

/* Topbar'a taşınan sayfa başlığı (page-header yerine) — başlık üstte, açıklama altında,
   ikisi de tek satır + taşarsa üç nokta. .topbar önekli seçici Bootstrap'ın dev h1 boyutunu ezer. */
/* Açıklama (subtitle) webte BAŞLIĞIN SAĞINDA tek satır (kullanıcı 2026-07-11);
   uzunsa küçük fontta "..." ile kısalır; mobilde tamamen gizli (aşağıdaki media). */
.topbar-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.topbar .topbar-heading {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* El yazısı (Caveat) eğik glifin mürekkebi kutudan taşar — son harf (ör. "i" noktası)
     kırpılmasın diye sağda nefes payı (kullanıcı 2026-07-11). */
  padding-right: 6px;
  max-width: 100%;
}
/* Başlık İKONU — aktif sayfanın yan menü ikonu: ÇİZGİ KARAKTER tarzı (kullanıcı
   2026-07-11): daha iri, kalın YUVARLAK uçlu çizgiler + hafif eğim — Caveat el
   yazısıyla aynı oyunbaz dil. Çip yok, yalnız turuncu çizgiler. */
.topbar-heading .topbar-title-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  background: none;
  color: var(--brand-orange);
  vertical-align: -4px;
  transform: rotate(-6deg);
}
.topbar-heading .topbar-title-ico .icon { width: 21px; height: 21px; opacity: 1; }
.topbar-heading .topbar-title-ico svg {
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Başlık İLK KELİMESİ — müşteri menüsü el yazısı (Caveat) + turuncu→koyu kırmızı degrade
   (kullanıcı 2026-07-11): "Kasa / Masa Seçimi" → el yazısı "Kasa" + normal "Masa Seçimi". */
.topbar-heading .topbar-script {
  font-family: var(--hm-script, "Caveat", cursive);
  font-size: 1.55em;
  font-weight: 700;
  line-height: 1;
  margin-right: 7px;
  vertical-align: -2px;
  color: var(--brand-orange);
  background: linear-gradient(90deg, var(--brand-orange), #a52c22);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* background-clip:text yalnız KUTUYU boyar — Caveat'ın kutu dışına taşan son harf
     kuyruğu boyasız (şeffaf) kalıp "kırpık" görünüyordu; sağ dolgu kutuyu büyütür. */
  padding-right: 0.14em;
}
/* Başlığın kalan kelimeleri de İLK KELİMEYLE AYNI turuncu degrade efektinde
   (kullanıcı 2026-07-12: "tüm kelimeleri turuncu yap" — tema renginde kalan kısım kalktı). */
.topbar-heading .topbar-script-rest {
  font-family: var(--hm-script, "Caveat", cursive);
  font-size: 1.55em;
  font-weight: 700;
  line-height: 1;
  vertical-align: -2px;
  color: var(--brand-orange);
  background: linear-gradient(90deg, var(--brand-orange), #a52c22);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Son harf kuyruğu boyasız kalmasın (bkz. .topbar-script notu). */
  padding-right: 0.14em;
}

.topbar-subtitle {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.sidebar-toggle {
  flex-shrink: 0;
  display: inline-flex;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 120ms, color 120ms;
}

.sidebar-toggle:hover {
  background: var(--body-bg);
  color: var(--text);
}

.sidebar-toggle svg {
  width: 18px;
  height: 18px;
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* 120: topbar (90) + mobil alt bar (100) perdenin ALTINDA (buzlanır); sidebar 130 önde. */
  z-index: 120;
  opacity: 1;
  transition: opacity 180ms ease;
}

.sidebar-backdrop[hidden] {
  display: none;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 13px;
  color: var(--text-muted);
}

.breadcrumb .current {
  color: var(--text);
  font-weight: var(--font-weight-medium);
}

.breadcrumb .sep {
  color: var(--text-disabled);
}

.search-box {
  position: relative;
  width: 240px;
}

.search-box input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 32px;
  background: var(--body-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}

.search-box input::placeholder {
  color: var(--text-disabled);
}

.search-box input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-lt);
}

.search-box .s-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.search-box kbd {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 5px;
  font-family: inherit;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: calc(3px * var(--radius-scale, 1));
  line-height: 18px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  max-width: 65%;
}

/* Topbar'a taşınan istatistik rozetleri (page-actions yerine) */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
/* Rozetler buton (btn-sm) yuksekligiyle esitlenir — rozet + buton yan yana hizali grup gorunur. */
.topbar-actions .badge {
  display: inline-flex;
  align-items: center;
  height: 31px;
  padding: 0 12px;
  font-size: 12.5px;
  border-radius: calc(8px * var(--radius-scale, 1));
}
.topbar-actions::-webkit-scrollbar { height: 4px; }
.topbar-actions::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: calc(4px * var(--radius-scale, 1)); }
.topbar-actions .badge { white-space: nowrap; }

.tb-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 120ms, color 120ms;
  position: relative;
}

.tb-btn:hover {
  background: var(--body-bg);
  color: var(--text);
}

.tb-btn svg {
  width: 18px;
  height: 18px;
}

.tb-btn.tb-docs {
  width: auto;
  height: 32px;
  padding: 0 12px;
  gap: 6px;
  margin-right: 6px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}

.tb-btn.tb-docs:hover {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary-dk, var(--primary));
}

.tb-btn.tb-docs svg {
  width: 15px;
  height: 15px;
}

.tb-btn .dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  background: var(--red);
  border: 1.5px solid white;
  border-radius: 50%;
}

.tb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-dk));
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: white;
  margin-left: 6px;
  cursor: pointer;
  padding: 0;
  transition: transform 120ms;
}

.tb-avatar:hover {
  transform: scale(1.06);
}

/* PROGRAM PENCERESI (2026-07-31): kabuk = ust bar + IC scroll'lu icerik + altta SABIT
   durum cubugu (footer). Body asla kaymaz; kaydirma .page-wrapper icindedir. */
.main {
  margin-left: var(--sidebar-w);
  padding-top: 56px;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: margin-left 220ms cubic-bezier(0.2, 0, 0, 1);
}

.page-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* SIKI KENARLAR (kullanici 2026-08-01): ust bara ne kadar yakinsa sol menuye ve
     alt cubuga da o kadar — gereksiz bos alan yok (tum sayfalar). */
  padding: 8px 10px 10px;
}

.page-header {
  margin-bottom: 20px;
}

.page-pretitle {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
}

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.page-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Durum cubugu: kompakt, HEP gorunur (scroll sonunda degil) — 36px sabit. */
/* TAM GENISLIK DURUM CUBUGU (kullanici 2026-08-01): footer artik .main icinde degil —
   ekranin en altini SOLDAN SAGA (side menunun da altina) kaplar; icerik/side menu
   36px alt payla ustunde biter (yalniz masaustu; telefonda footer zaten gizli). */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1041;
  height: 36px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  /* Footer HER temada KOYU (kullanici 2026-08-01): side menuyle ayni zemin — light
     temada beyaz serit koyu menunun altindan gecince sirsiyordu. Logo hep beyaz varyant. */
  color: var(--sidebar-text);
  border-top: 1px solid var(--sidebar-border);
  background: var(--sidebar-bg);
}
.footer .footer-logo-light { display: none !important; }
.footer .footer-logo-dark { display: block !important; }
@media (min-width: 769px) {
  .main { padding-bottom: 36px; }
  .sidebar { padding-bottom: 36px; }
}
.footer-logo { height: 15px; width: auto; display: block; opacity: 0.9; }
html:not([data-theme="dark"]) .footer-logo-dark { display: none; }
[data-theme="dark"] .footer-logo-light { display: none; }

.footer a {
  color: var(--primary);
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 220ms ease;
    will-change: transform;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main {
    margin-left: 0;
  }
  .topbar {
    left: 0;
    padding: 0 12px;
  }
  .topbar .breadcrumb,
  .topbar .search-box,
  .topbar .tb-notifications,
  .topbar .tb-messages,
  .topbar-subtitle {
    display: none;
  }
  .topbar { padding: 0 12px; gap: 8px; }
  /* Başlık mobilde TAM görünsün: biraz daha alan + bir tık küçük font (2026-07-11). */
  .topbar .topbar-heading { font-size: 13px; max-width: 64vw; }
  /* Sag bolge kalan TUM alani kullanir: aksiyonlar (rozet + buton) hamburger'in hemen
     yanindan baslar (SOLA yaslanir), sistem ikonlari (zil/tema/avatar) sagda kalir —
     kirpilma/kaydirma olmadan tam gorunur, dengeli bir arac cubugu gorunumu. */
  .topbar-right { max-width: none; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .topbar-actions { overflow-x: visible; flex-shrink: 1; }
  .topbar-compact-m .topbar-actions { margin-right: auto; }
  .topbar .tb-avatar {
    width: 32px;
    height: 32px;
  }
  .page-wrapper {
    padding: 12px;
  }
  body.sidebar-open {
    overflow: hidden;
  }
  body.sidebar-rail .sidebar {
    width: var(--sidebar-w);
  }
}
@media (min-width: 769px) {
  .sidebar-backdrop {
    display: none !important;
  }
}
/* Orta aralık: sidebar açıkken (252px) içerik alanı daraldığından yatay
   padding'i kıs, içerik daha fazla yer bulsun. */
@media (min-width: 769px) and (max-width: 1199px) {
  .page-wrapper {
    padding: 8px 10px 10px;
  }
}
@media (min-width: 769px) {
  body.sidebar-rail {
    --sidebar-w: 64px;
  }
  body.sidebar-rail .sidebar {
    overflow: visible;
  }
  /* Rail'de nav scroll konteyneri (overflow-y:auto) yatay ekseni de auto yapıp
     tooltip'ler (::after, left:100%+12px) yüzünden alta yatay scroll çıkarıyordu.
     Rail'de nav'ı visible yap: scrollbar gitsin, tooltip'ler dışarı taşabilsin. */
  body.sidebar-rail .sidebar-nav {
    overflow: visible;
  }
  body.sidebar-rail .sidebar-brand {
    padding: 0;
    justify-content: center;
  }
  body.sidebar-rail .brand-name {
    display: none;
  }
  /* Rail modda hesap başlığında YALNIZ hamburger kalır — avatar (M) ve isim/rol gizli
     (kullanıcı 2026-07-11: "web'te bu M burada ne arıyor"). */
  body.sidebar-rail .hm-account { justify-content: center; padding: 0; gap: 0; }
  body.sidebar-rail .hm-account .avatar,
  body.sidebar-rail .hm-account .sidebar-user-info { display: none; }
  body.sidebar-rail .hm-account .hm-burger { margin-left: 0; }
  body.sidebar-rail .nav-group {
    padding: 0 8px;
  }
  body.sidebar-rail .nav-label {
    display: none;
  }
  body.sidebar-rail .nav-link {
    justify-content: center;
    gap: 0;
    padding: 8px;
    position: relative;
  }
  body.sidebar-rail .nav-link .nav-text,
  body.sidebar-rail .nav-link .badge {
    display: none;
  }
  body.sidebar-rail .nav-chev {
    display: none;
  }
  body.sidebar-rail .nav-tree .nav-sub {
    display: none;
  }
  body.sidebar-rail .sidebar-user {
    padding: 8px;
    justify-content: center;
  }
  body.sidebar-rail .sidebar-user-info,
  body.sidebar-rail .sidebar-user .more-btn {
    display: none;
  }
  body.sidebar-rail .nav-link[data-rail-label]::after {
    content: attr(data-rail-label);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--text);
    color: var(--bg-surface);
    font-size: 11.5px;
    font-weight: var(--font-weight-medium);
    padding: 5px 9px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms, transform 120ms;
    z-index: 110;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  }
  body.sidebar-rail .nav-link[data-rail-label]:hover::after,
  body.sidebar-rail .nav-link[data-rail-label]:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
  body.sidebar-rail .sidebar-toggle svg {
    transform: rotate(180deg);
  }
  .sidebar-toggle svg {
    transition: transform 200ms ease;
  }
}

/* ---- Mobil alt kısayol barı — panelin "uygulama" hali (yalnız ≤768px) ---- */
.hm-mobile-tabbar { display: none; }
@media (max-width: 768px) {
  .hm-mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100; /* topbar(90) üstü; sidebar(200) + karartma(110) açılınca barı örter */
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
    padding: 6px 8px calc(env(safe-area-inset-bottom) + 6px);
    background: rgba(253, 251, 246, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-color);
  }
  [data-theme=dark] .hm-mobile-tabbar {
    background: rgba(12, 13, 17, 0.92); /* derin siyah aile (lacivert kaldırıldı) */
  }
  .hm-mtab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 2px;
    border-radius: calc(10px * var(--radius-scale, 1));
    color: var(--text-muted);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.1;
    transition: color 150ms ease, transform 100ms ease;
  }
  .hm-mtab:active { transform: scale(0.94); }
  .hm-mtab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hm-mtab.active { color: var(--primary); font-weight: 700; }
  /* Bar içeriği örtmesin: sayfa altına bar yüksekliği kadar boşluk; footer gereksizleşir. */
  body.has-mobile-tabbar .page-wrapper {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }
  body.has-mobile-tabbar .footer { display: none; }
}

/* Modal açıkken (body.hm-modal-open — bkz components/modal.tsx) telefonda panel çerçevesi
   gizlenir: üst bar + alt kısayol barı görünmez, modal tam odak olur (kullanıcı kararı). */
@media (max-width: 768px) {
  body.hm-modal-open .topbar,
  body.hm-modal-open .hm-mobile-tabbar {
    visibility: hidden;
  }
}

/* MODAL GÖVDESİ (2026-07-21, .hm-modal-body — bkz components/modal.tsx): tek kolonlu
   d-grid yığınlarında kolon genişliği içerikten (max-content) değil konteynerden gelsin.
   Yoksa nowrap bir satır (örn. stok hareket geçmişi) kolonu büyütüyor, telefonda tüm
   modal içeriği sağdan kırpılıyordu. minmax(0,1fr) = "kolon daima modala sığ". */
.hm-modal-body .d-grid {
  grid-template-columns: minmax(0, 1fr);
}