/* =====================================================================
   GÖNENİR POS — "Varlık Paneli" (serkangonenir) TEMASI
   ---------------------------------------------------------------------
   Yalnızca görünüm katmanı. HTML, JS veya PHP'ye dokunmaz.
   app.css'ten SONRA yüklenir; Tailwind CDN'in çalışma anında enjekte
   ettiği stilleri ezebilmesi için tüm kurallar `body:not(.bg-slate-900)`
   öneki ile yazılmıştır (özgüllük artışı). Bu önek aynı zamanda koyu
   zeminli Admin ve Kiosk ekranlarını temanın dışında bırakır.

   Sadece LIGHT mod. html[data-theme="dark"] olan ekranlara uygulanmaz.

   Kaynak: serkangonenir/assets/css/app.css (token, kabuk, bileşenler)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------------
   1. TOKEN — app.css değişkenlerini yeni paletle ez
   --------------------------------------------------------------------- */
html:not([data-theme="dark"]) {
  /* serkangonenir tokenları */
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-soft: #EFF4FF;
  --primary-ring: rgba(37, 99, 235, .18);

  --accent-gold: #D4A017;
  --accent-gold-soft: #FDF6E3;
  --accent-gold-strong: #B8860B;

  --success: #10B981;  --success-soft: #E7F8F1;
  --warning: #F59E0B;  --warning-soft: #FEF4E2;
  --danger:  #EF4444;  --danger-soft:  #FDECEC;
  --info:    #0EA5E9;  --info-soft:    #E6F6FE;
  --orange:  #F97316;  --orange-soft:  #FFF0E6;
  --violet:  #8B5CF6;  --violet-soft:  #F1EBFE;

  --text-1: #0F172A;
  --text-2: #475569;
  --text-3: #94A3B8;

  --surface: #FFFFFF;
  --surface-2: #FBFCFE;
  --surface-3: #F1F5F9;
  --bg: #F6F8FB;
  --border: #E6EAF0;
  --border-strong: #D5DCE6;
  --overlay: rgba(11, 18, 32, .48);

  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --shadow-raised: 0 2px 6px rgba(16,24,40,.06), 0 16px 40px rgba(16,24,40,.10);
  --shadow-pop: 0 12px 48px rgba(16,24,40,.18);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .14s;
  --dur: .24s;
  --dur-slow: .42s;

  --topbar-h: 60px;
  --tabbar-h: 62px;
  --content-max: 1200px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* app.css'in kendi değişkenleri (rgb üçlüsü) — .btn, .card, .form-input,
     .table, DataTables vb. bunları okuduğu için otomatik yeni palete geçer */
  --color-primary:  37  99 235;
  --color-accent:  212 160  23;
  --color-success:  16 185 129;
  --color-warning: 245 158  11;
  --color-error:   239  68  68;
  --bg-base:    246 248 251;
  --bg-surface: 255 255 255;
  --bg-subtle:  241 245 249;
  --text-primary:  15  23  42;
  --text-muted:    71  85 105;
  --border-color: 230 234 240;
  --radius: 10px;
  --shadow: var(--shadow-card);
  color-scheme: light;
}

/* ---------------------------------------------------------------------
   2. TABAN
   --------------------------------------------------------------------- */
body:not(.bg-slate-900) {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body:not(.bg-slate-900) .font-dm-sans,
body:not(.bg-slate-900) .font-bricolage,
body:not(.bg-slate-900) .font-display { font-family: var(--font); }
body:not(.bg-slate-900) .font-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

body:not(.bg-slate-900) h1, body:not(.bg-slate-900) h2, body:not(.bg-slate-900) h3 { letter-spacing: -.015em; }

/* Tailwind yazı ölçeği → serkangonenir ölçeği (13 / 14.5 / 15.5 / 17 / 20 / 26 / 30) */
body:not(.bg-slate-900) .text-\[10px\],
body:not(.bg-slate-900) .text-\[11px\] { font-size: 11.5px; }
body:not(.bg-slate-900) .text-xs   { font-size: 13px;   line-height: 1.4; }
body:not(.bg-slate-900) .text-sm   { font-size: 14.5px; line-height: 1.45; }
body:not(.bg-slate-900) .text-base { font-size: 15.5px; line-height: 1.5; }
body:not(.bg-slate-900) .text-lg   { font-size: 17px;   line-height: 1.34; font-weight: 600; letter-spacing: -.01em; }
body:not(.bg-slate-900) .text-xl   { font-size: 20px;   line-height: 1.3;  letter-spacing: -.015em; }
body:not(.bg-slate-900) .text-2xl  { font-size: 26px;   line-height: 1.22; letter-spacing: -.02em; }
body:not(.bg-slate-900) .text-3xl  { font-size: 30px;   line-height: 1.2;  letter-spacing: -.02em; }
body:not(.bg-slate-900) .font-semibold { font-weight: 600; }
body:not(.bg-slate-900) .font-bold { font-weight: 700; }
/* Rozet/etiket görevi gören küçük pill'ler yazı büyütmesinden muaf */
body:not(.bg-slate-900) span.text-xs.rounded-full,
body:not(.bg-slate-900) span.text-xs.rounded,
body:not(.bg-slate-900) span.text-xs.rounded-md,
body:not(.bg-slate-900) span.text-xs.rounded-lg,
body:not(.bg-slate-900) div.text-xs.rounded-full,
body:not(.bg-slate-900) .text-\[10px\].rounded,
body:not(.bg-slate-900) .text-\[11px\].rounded { font-size: 11.5px; font-weight: 650; letter-spacing: -.005em; }

body:not(.bg-slate-900) :focus-visible { outline: 3px solid var(--primary-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
body:not(.bg-slate-900) ::selection { background: var(--primary-ring); }

@media (pointer: fine) {
  body:not(.bg-slate-900) ::-webkit-scrollbar { width: 10px; height: 10px; }
  body:not(.bg-slate-900) ::-webkit-scrollbar-track { background: transparent; }
  body:not(.bg-slate-900) ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid var(--bg); }
  body:not(.bg-slate-900) ::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
}

/* ---------------------------------------------------------------------
   3. TAILWIND YARDIMCILARI → PALET EŞLEMESİ
   --------------------------------------------------------------------- */
/* Zemin */
body:not(.bg-slate-900) .bg-slate-50  { background-color: var(--bg); }
body:not(.bg-slate-900) .bg-slate-100 { background-color: var(--surface-3); }
body:not(.bg-slate-900) .bg-white     { background-color: var(--surface); }
body:not(.bg-slate-900) .hover\:bg-slate-50:hover  { background-color: var(--surface-2); }
body:not(.bg-slate-900) .hover\:bg-slate-100:hover { background-color: var(--surface-3); }

/* Kenarlık */
body:not(.bg-slate-900) .border-slate-100,
body:not(.bg-slate-900) .border-slate-200 { border-color: var(--border); }
body:not(.bg-slate-900) .border-slate-300 { border-color: var(--border-strong); }
body:not(.bg-slate-900) .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
body:not(.bg-slate-900) .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }

/* Metin */
body:not(.bg-slate-900) .text-slate-900,
body:not(.bg-slate-900) .text-slate-800 { color: var(--text-1); }
body:not(.bg-slate-900) .text-slate-700,
body:not(.bg-slate-900) .text-slate-600,
body:not(.bg-slate-900) .text-slate-500 { color: var(--text-2); }
body:not(.bg-slate-900) .text-slate-400 { color: var(--text-3); }
body:not(.bg-slate-900) .text-slate-300 { color: #CBD5E1; }

/* Primary (Tailwind config'den gelen dinamik indigo → mavi) */
body:not(.bg-slate-900) .bg-primary,
body:not(.bg-slate-900) .bg-indigo-500,
body:not(.bg-slate-900) .bg-indigo-600,
body:not(.bg-slate-900) .peer:checked ~ .peer-checked\:bg-primary { background-color: var(--primary); }
body:not(.bg-slate-900) .hover\:bg-primary\/90:hover,
body:not(.bg-slate-900) .hover\:bg-indigo-700:hover,
body:not(.bg-slate-900) .hover\:bg-indigo-600:hover,
body:not(.bg-slate-900) .hover\:bg-indigo-500:hover { background-color: var(--primary-hover); }

body:not(.bg-slate-900) .bg-primary\/10,
body:not(.bg-slate-900) .bg-primary\/5,
body:not(.bg-slate-900) .bg-indigo-50,
body:not(.bg-slate-900) .bg-indigo-50\/60,
body:not(.bg-slate-900) .bg-indigo-100,
body:not(.bg-slate-900) .peer:checked ~ .peer-checked\:bg-primary\/5 { background-color: var(--primary-soft); }
body:not(.bg-slate-900) .hover\:bg-primary\/10:hover,
body:not(.bg-slate-900) .hover\:bg-primary\/5:hover,
body:not(.bg-slate-900) .hover\:bg-indigo-50:hover,
body:not(.bg-slate-900) .hover\:bg-indigo-100:hover { background-color: var(--primary-soft); }

body:not(.bg-slate-900) .text-primary,
body:not(.bg-slate-900) .text-indigo-500,
body:not(.bg-slate-900) .text-indigo-600,
body:not(.bg-slate-900) .text-indigo-700,
body:not(.bg-slate-900) .text-indigo-800,
body:not(.bg-slate-900) .peer:checked ~ .peer-checked\:text-primary { color: var(--primary); }
body:not(.bg-slate-900) .hover\:text-primary:hover,
body:not(.bg-slate-900) .hover\:text-indigo-600:hover,
body:not(.bg-slate-900) .hover\:text-indigo-800:hover { color: var(--primary-hover); }
body:not(.bg-slate-900) .text-indigo-400 { color: #60A5FA; }
body:not(.bg-slate-900) .text-indigo-300 { color: #93C5FD; }

body:not(.bg-slate-900) .border-primary,
body:not(.bg-slate-900) .border-indigo-500,
body:not(.bg-slate-900) .border-indigo-400,
body:not(.bg-slate-900) .peer:checked ~ .peer-checked\:border-primary,
body:not(.bg-slate-900) .focus\:border-primary:focus { border-color: var(--primary); }
body:not(.bg-slate-900) .border-primary\/20,
body:not(.bg-slate-900) .border-indigo-200,
body:not(.bg-slate-900) .border-indigo-100 { border-color: #BFDBFE; }
body:not(.bg-slate-900) .hover\:border-primary\/50:hover,
body:not(.bg-slate-900) .hover\:border-primary\/40:hover,
body:not(.bg-slate-900) .hover\:border-indigo-300:hover,
body:not(.bg-slate-900) .hover\:border-indigo-400:hover { border-color: var(--primary); }

body:not(.bg-slate-900) .focus\:ring-primary\/30:focus,
body:not(.bg-slate-900) .focus\:ring-primary\/25:focus,
body:not(.bg-slate-900) .focus\:ring-primary\/40:focus,
body:not(.bg-slate-900) .focus\:ring-indigo-500:focus,
body:not(.bg-slate-900) .ring-indigo-300,
body:not(.bg-slate-900) .ring-indigo-500 { --tw-ring-color: var(--primary-ring); }
body:not(.bg-slate-900) .shadow-primary\/30,
body:not(.bg-slate-900) .shadow-primary\/25 { --tw-shadow-color: var(--primary-ring); }
body:not(.bg-slate-900) .from-indigo-600 { --tw-gradient-from: var(--primary) var(--tw-gradient-from-position); --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body:not(.bg-slate-900) .via-indigo-700 { --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--primary-hover) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body:not(.bg-slate-900) .to-violet-800 { --tw-gradient-to: #111A2E var(--tw-gradient-to-position); }

/* Durum renkleri (soft + metin) */
body:not(.bg-slate-900) .bg-green-50,  body:not(.bg-slate-900) .bg-green-100,  body:not(.bg-slate-900) .bg-emerald-50,  body:not(.bg-slate-900) .bg-emerald-100 { background-color: var(--success-soft); }
body:not(.bg-slate-900) .bg-red-50,    body:not(.bg-slate-900) .bg-red-100,    body:not(.bg-slate-900) .bg-rose-50 { background-color: var(--danger-soft); }
body:not(.bg-slate-900) .bg-yellow-50, body:not(.bg-slate-900) .bg-yellow-100, body:not(.bg-slate-900) .bg-amber-50, body:not(.bg-slate-900) .bg-amber-100, body:not(.bg-slate-900) .bg-orange-50 { background-color: var(--warning-soft); }
body:not(.bg-slate-900) .bg-blue-50,   body:not(.bg-slate-900) .bg-blue-100,   body:not(.bg-slate-900) .bg-sky-50 { background-color: var(--info-soft); }
body:not(.bg-slate-900) .bg-purple-50, body:not(.bg-slate-900) .bg-purple-100, body:not(.bg-slate-900) .bg-violet-50 { background-color: var(--violet-soft); }

body:not(.bg-slate-900) .text-green-600,  body:not(.bg-slate-900) .text-green-700,  body:not(.bg-slate-900) .text-emerald-600, body:not(.bg-slate-900) .text-emerald-700 { color: var(--success); }
body:not(.bg-slate-900) .text-red-500,    body:not(.bg-slate-900) .text-red-600,    body:not(.bg-slate-900) .text-red-700 { color: var(--danger); }
body:not(.bg-slate-900) .text-yellow-600, body:not(.bg-slate-900) .text-yellow-700, body:not(.bg-slate-900) .text-amber-600, body:not(.bg-slate-900) .text-amber-700, body:not(.bg-slate-900) .text-orange-600 { color: var(--warning); }
body:not(.bg-slate-900) .text-blue-600,   body:not(.bg-slate-900) .text-blue-700,   body:not(.bg-slate-900) .text-sky-600 { color: var(--info); }
body:not(.bg-slate-900) .text-purple-600, body:not(.bg-slate-900) .text-purple-700, body:not(.bg-slate-900) .text-violet-600 { color: var(--violet); }

body:not(.bg-slate-900) .bg-green-500,  body:not(.bg-slate-900) .bg-green-600,  body:not(.bg-slate-900) .bg-emerald-500 { background-color: var(--success); }
body:not(.bg-slate-900) .bg-red-500,    body:not(.bg-slate-900) .bg-red-600 { background-color: var(--danger); }
body:not(.bg-slate-900) .bg-yellow-500, body:not(.bg-slate-900) .bg-amber-500 { background-color: var(--warning); }
body:not(.bg-slate-900) .bg-blue-500,   body:not(.bg-slate-900) .bg-blue-600 { background-color: var(--info); }
body:not(.bg-slate-900) .hover\:bg-red-50:hover { background-color: var(--danger-soft); }
body:not(.bg-slate-900) .hover\:text-red-500:hover, body:not(.bg-slate-900) .hover\:text-red-600:hover { color: var(--danger); }
body:not(.bg-slate-900) .border-green-200, body:not(.bg-slate-900) .border-emerald-200 { border-color: color-mix(in srgb, var(--success) 22%, transparent); }
body:not(.bg-slate-900) .border-red-200 { border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
body:not(.bg-slate-900) .border-yellow-200, body:not(.bg-slate-900) .border-amber-200 { border-color: color-mix(in srgb, var(--warning) 22%, transparent); }
body:not(.bg-slate-900) .border-blue-200 { border-color: color-mix(in srgb, var(--info) 22%, transparent); }

/* Köşe yarıçapı ölçeği */
body:not(.bg-slate-900) .rounded     { border-radius: 6px; }
body:not(.bg-slate-900) .rounded-md  { border-radius: var(--radius-xs); }
body:not(.bg-slate-900) .rounded-lg  { border-radius: var(--radius-sm); }
body:not(.bg-slate-900) .rounded-xl  { border-radius: var(--radius-md); }
body:not(.bg-slate-900) .rounded-2xl { border-radius: var(--radius-lg); }
body:not(.bg-slate-900) .rounded-3xl { border-radius: 26px; }

/* Gölge ölçeği */
body:not(.bg-slate-900) .shadow-sm,
body:not(.bg-slate-900) .shadow { box-shadow: var(--shadow-card); }
body:not(.bg-slate-900) .shadow-md,
body:not(.bg-slate-900) .shadow-lg { box-shadow: var(--shadow-raised); }
body:not(.bg-slate-900) .shadow-xl,
body:not(.bg-slate-900) .shadow-2xl { box-shadow: var(--shadow-pop); }

/* ---------------------------------------------------------------------
   4. UYGULAMA KABUĞU — YAN MENÜ
   --------------------------------------------------------------------- */
body:not(.bg-slate-900) #main-sidebar,
body:not(.bg-slate-900) #mobile-sidebar {
  width: 260px;
  padding: 20px 16px 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
@media (min-width: 1180px) {
  body:not(.bg-slate-900) #main-sidebar { width: 276px; }
}
body:not(.bg-slate-900) #mobile-sidebar { width: 288px; }

/* Marka */
body:not(.bg-slate-900) #main-sidebar > div:first-child,
body:not(.bg-slate-900) #mobile-sidebar > div:first-child {
  padding: 0 8px 20px;
  border-bottom: 0;
  gap: 10px;
}
body:not(.bg-slate-900) #main-sidebar > div:first-child > div[style*="background-color"],
body:not(.bg-slate-900) #mobile-sidebar > div:first-child div[style*="background-color"] {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(140deg, var(--primary), var(--accent-gold)) !important;
  box-shadow: 0 6px 18px var(--primary-ring);
}
body:not(.bg-slate-900) #main-sidebar > div:first-child span.font-bricolage,
body:not(.bg-slate-900) #mobile-sidebar > div:first-child span.font-bricolage {
  font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--text-1);
}

/* Şube kutusu */
body:not(.bg-slate-900) #main-sidebar > div:nth-child(2).border-b,
body:not(.bg-slate-900) #mobile-sidebar > div:nth-child(2).border-b {
  padding: 0 4px 8px; border-bottom: 0;
}
body:not(.bg-slate-900) #main-sidebar > div:nth-child(2).border-b > div,
body:not(.bg-slate-900) #mobile-sidebar > div:nth-child(2).border-b > div {
  background: var(--surface-3); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-2);
}

/* Bağlantı listesi */
body:not(.bg-slate-900) #main-sidebar nav,
body:not(.bg-slate-900) #mobile-sidebar nav { padding: 0 0 16px; }

body:not(.bg-slate-900) #main-sidebar nav > a,
body:not(.bg-slate-900) #mobile-sidebar nav > a {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
body:not(.bg-slate-900) #main-sidebar nav > a svg,
body:not(.bg-slate-900) #mobile-sidebar nav > a svg { width: 19px; height: 19px; flex-shrink: 0; color: inherit; }
body:not(.bg-slate-900) #main-sidebar nav > a:hover,
body:not(.bg-slate-900) #mobile-sidebar nav > a:hover { background: var(--surface-3); color: var(--text-1); }
body:not(.bg-slate-900) #main-sidebar nav > a.bg-primary\/10,
body:not(.bg-slate-900) #mobile-sidebar nav > a.bg-primary\/10 {
  background: var(--primary-soft); color: var(--primary); font-weight: 600;
}
/* nav_item() etikete inline "color:black" basıyor — bağlantı rengini miras alsın */
body:not(.bg-slate-900) #main-sidebar nav > a .sidebar-label,
body:not(.bg-slate-900) #mobile-sidebar nav > a .sidebar-label { color: inherit !important; }

/* Rozet */
body:not(.bg-slate-900) #main-sidebar nav > a > span.ml-auto,
body:not(.bg-slate-900) #mobile-sidebar nav > a > span.ml-auto {
  font-size: 12px; font-weight: 600; padding: 1px 8px; min-width: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-3); color: var(--text-3);
}
body:not(.bg-slate-900) #main-sidebar nav > a.bg-primary\/10 > span.ml-auto,
body:not(.bg-slate-900) #mobile-sidebar nav > a.bg-primary\/10 > span.ml-auto { background: var(--surface); color: var(--primary); }

/* Grup başlığı */
body:not(.bg-slate-900) #main-sidebar nav p.uppercase,
body:not(.bg-slate-900) #mobile-sidebar nav p.uppercase {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  color: var(--text-3); padding: 16px 12px 8px;
}
body:not(.bg-slate-900) #main-sidebar nav > div.pt-3,
body:not(.bg-slate-900) #mobile-sidebar nav > div.pt-3 { padding: 0; }

/* Alt kullanıcı kutusu */
body:not(.bg-slate-900) #main-sidebar > div.border-t,
body:not(.bg-slate-900) #mobile-sidebar > div.border-t {
  margin: 0 -16px; padding: 12px 16px; border-color: var(--border);
}
body:not(.bg-slate-900) #main-sidebar > div.border-t > div,
body:not(.bg-slate-900) #mobile-sidebar > div.border-t > div { border-radius: var(--radius-sm); }
body:not(.bg-slate-900) #main-sidebar > div.border-t .rounded-full,
body:not(.bg-slate-900) #mobile-sidebar > div.border-t .rounded-full {
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--surface-3); color: var(--text-2); font-weight: 700; font-size: 13px;
}
body:not(.bg-slate-900) #main-sidebar > div.border-t p.text-sm,
body:not(.bg-slate-900) #mobile-sidebar > div.border-t p.text-sm { font-size: 14px; font-weight: 600; }
body:not(.bg-slate-900) #main-sidebar > div.border-t p.text-xs,
body:not(.bg-slate-900) #mobile-sidebar > div.border-t p.text-xs { font-size: 12px; color: var(--text-3); }

/* Mobil çekmece kapatma düğmesi */
body:not(.bg-slate-900) #mobile-sidebar > div:first-child > button {
  width: 36px; height: 36px; padding: 0; line-height: 0;
  border-radius: 11px; color: var(--text-2);
}
body:not(.bg-slate-900) #mobile-sidebar > div:first-child > button:hover { background: var(--surface-3); color: var(--text-1); }

/* Mobil arka plan perdesi */
body:not(.bg-slate-900) #app-layout > .bg-black\/50 { background: var(--overlay); }

/* ---------------------------------------------------------------------
   5. UYGULAMA KABUĞU — ÜST ÇUBUK
   --------------------------------------------------------------------- */
body:not(.bg-slate-900) #app-layout > div > header {
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  gap: 12px;
  /* z-index verilmez: header bir flex öğesi olduğu için z-index onu
     mobil çekmecenin (z-30) üstüne çıkarıyordu */
}
@media (min-width: 1024px) {
  body:not(.bg-slate-900) #app-layout > div > header { padding: 0 24px; }
}
body:not(.bg-slate-900) #app-layout > div > header h1 {
  font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: var(--text-1);
}
body:not(.bg-slate-900) #app-layout > div > header h1 + p { font-size: 12px; color: var(--text-3); margin-top: 0; }

/* Simge düğmeleri (menü, bildirim, avatar) */
/* display'e dokunulmaz: hamburger düğmesi lg:hidden ile gizleniyor */
body:not(.bg-slate-900) #app-layout > div > header button.p-2 {
  width: 40px; height: 40px; padding: 0;
  line-height: 0;
  border-radius: 12px; color: var(--text-2);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
body:not(.bg-slate-900) #app-layout > div > header button.p-2 svg { width: 21px; height: 21px; }
body:not(.bg-slate-900) #app-layout > div > header button.p-2:hover { background: var(--surface-3); color: var(--text-1); }
body:not(.bg-slate-900) #app-layout > div > header button.p-2:active { transform: scale(.92); }

/* Şube değiştirici */
body:not(.bg-slate-900) #app-layout > div > header button.border {
  height: 36px; padding: 0 13px; border-radius: var(--radius-xs);
  border-color: var(--border-strong); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--text-1);
}
body:not(.bg-slate-900) #app-layout > div > header button.border:hover { border-color: var(--text-3); background: var(--surface); }

/* Avatar düğmesi */
body:not(.bg-slate-900) #app-layout > div > header .rounded-full.bg-indigo-100 {
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--surface-3); color: var(--text-2); font-weight: 700; font-size: 13px;
}

/* Açılır menüler */
body:not(.bg-slate-900) #app-layout > div > header .absolute.bg-white {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-raised);
  padding: 6px;
  margin-top: 8px;
}
body:not(.bg-slate-900) #app-layout > div > header .absolute.bg-white > a,
body:not(.bg-slate-900) #app-layout > div > header .absolute.bg-white > div > a {
  border-radius: var(--radius-xs); font-size: 14px; font-weight: 500; color: var(--text-2);
}
body:not(.bg-slate-900) #app-layout > div > header .absolute.bg-white > a:hover,
body:not(.bg-slate-900) #app-layout > div > header .absolute.bg-white > div > a:hover { background: var(--surface-3); color: var(--text-1); }
body:not(.bg-slate-900) #app-layout > div > header .absolute.bg-white .text-red-600 { color: var(--danger); }
body:not(.bg-slate-900) #app-layout > div > header .absolute.bg-white .text-red-600:hover { background: var(--danger-soft); }

/* ---------------------------------------------------------------------
   6. İÇERİK ALANI
   --------------------------------------------------------------------- */
/* Tam genişlik ekranlar (POS / Masa haritası → .p-0) dokunulmaz.
   Diğer sayfalarda içerik 1200px'e sınırlanır ve ortalanır;
   bu, kaydırma alanını daraltmadan padding ile yapılır. */
body:not(.bg-slate-900) #app-layout main.overflow-y-auto:not(.p-0) {
  padding: 16px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 24px);
  animation: gp-page-in var(--dur-slow) var(--ease-out) backwards;
}
@media (min-width: 900px) {
  body:not(.bg-slate-900) #app-layout main.overflow-y-auto:not(.p-0) {
    padding: 24px max(24px, calc((100% - var(--content-max)) / 2)) 40px;
  }
}
@keyframes gp-page-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Sayfa içi başlıklar */
body:not(.bg-slate-900) #app-layout main h1.text-2xl,
body:not(.bg-slate-900) #app-layout main h2.text-2xl { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
@media (min-width: 900px) {
  body:not(.bg-slate-900) #app-layout main h1.text-2xl { font-size: 27px; }
}
body:not(.bg-slate-900) #app-layout main h2.font-semibold,
body:not(.bg-slate-900) #app-layout main h3.font-semibold { font-weight: 700; letter-spacing: -.01em; }

/* Flash mesajları → uyarı bandı */
body:not(.bg-slate-900) #app-layout main > .mb-4.rounded-lg.border {
  border-radius: var(--radius-md);
  padding: 13px 16px;
  font-size: 13.5px; font-weight: 500;
  gap: 12px;
}
body:not(.bg-slate-900) #app-layout main > .mb-4.rounded-lg.border svg { width: 19px; height: 19px; }
body:not(.bg-slate-900) #app-layout main > .bg-green-50 { color: var(--success); }
body:not(.bg-slate-900) #app-layout main > .bg-red-50 { color: var(--danger); }

/* ---------------------------------------------------------------------
   7. BİLEŞENLER
   --------------------------------------------------------------------- */
/* Kart */
body:not(.bg-slate-900) .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
body:not(.bg-slate-900) .card-header { padding: 16px 20px; border-bottom-color: var(--border); }
body:not(.bg-slate-900) .card-title { font-family: var(--font); font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
body:not(.bg-slate-900) .card.p-4 { padding: 16px; }
body:not(.bg-slate-900) .card.p-5 { padding: 16px; }
body:not(.bg-slate-900) .card.p-6 { padding: 20px; border-radius: var(--radius-lg); }
body:not(.bg-slate-900) a.card:hover,
body:not(.bg-slate-900) .card.cursor-pointer:hover { box-shadow: var(--shadow-raised); border-color: var(--border-strong); }

/* Tailwind ile elle yapılmış kartlar (bg-white + border + rounded) */
body:not(.bg-slate-900) .bg-white.border.rounded-xl,
body:not(.bg-slate-900) .bg-white.border.rounded-2xl,
body:not(.bg-slate-900) .bg-white.rounded-xl.shadow-sm,
body:not(.bg-slate-900) .bg-white.rounded-xl.shadow,
body:not(.bg-slate-900) .bg-white.rounded-2xl.shadow-sm,
body:not(.bg-slate-900) .bg-white.rounded-2xl.shadow {
  border: 1px solid var(--border); box-shadow: var(--shadow-card);
}

/* Gösterge simge kutuları (dashboard: w-9 h-9 rounded-lg bg-*-50) */
body:not(.bg-slate-900) .card .w-9.h-9.rounded-lg,
body:not(.bg-slate-900) .card .w-10.h-10.rounded-lg,
body:not(.bg-slate-900) .card .w-10.h-10.rounded-xl,
body:not(.bg-slate-900) .card .w-12.h-12.rounded-xl { border-radius: 13px; }
body:not(.bg-slate-900) .card .w-8.h-8.rounded-full { }

/* Buton */
body:not(.bg-slate-900) .btn {
  gap: 8px;
  height: 46px; padding: 0 18px;
  border-radius: var(--radius-sm);
  font-size: 14.5px; font-weight: 650; letter-spacing: -.01em;
  border: 1px solid transparent;
  white-space: nowrap; user-select: none;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
body:not(.bg-slate-900) .btn:active { transform: scale(.97); }
body:not(.bg-slate-900) .btn:disabled { opacity: .6; }
body:not(.bg-slate-900) .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 14px var(--primary-ring); }
body:not(.bg-slate-900) .btn-primary:hover { background: var(--primary-hover); }
body:not(.bg-slate-900) .btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text-1); }
body:not(.bg-slate-900) .btn-secondary:hover { background: var(--surface); border-color: var(--text-3); }
body:not(.bg-slate-900) .btn-ghost { background: transparent; color: var(--text-2); }
body:not(.bg-slate-900) .btn-ghost:hover { background: var(--surface-3); color: var(--text-1); }
body:not(.bg-slate-900) .btn-danger { background: var(--danger); color: #fff; }
body:not(.bg-slate-900) .btn-success { background: var(--success); color: #fff; }
body:not(.bg-slate-900) .btn svg { width: 18px; height: 18px; }
body:not(.bg-slate-900) .btn-sm { height: 36px; padding: 0 13px; font-size: 13px; border-radius: var(--radius-xs); }
body:not(.bg-slate-900) .btn-sm svg { width: 16px; height: 16px; }
body:not(.bg-slate-900) .btn-lg { height: 52px; padding: 0 24px; font-size: 15.5px; border-radius: var(--radius-md); }
body:not(.bg-slate-900) .btn-xl { height: 56px; padding: 0 28px; font-size: 16px; border-radius: var(--radius-md); }

/* Tailwind ile yapılmış primary butonlar */
body:not(.bg-slate-900) button.bg-primary,
body:not(.bg-slate-900) a.bg-primary,
body:not(.bg-slate-900) button.bg-indigo-600,
body:not(.bg-slate-900) a.bg-indigo-600 { box-shadow: 0 4px 14px var(--primary-ring); font-weight: 600; letter-spacing: -.01em; }

/* Formlar */
body:not(.bg-slate-900) .form-input,
body:not(.bg-slate-900) .form-select,
body:not(.bg-slate-900) .form-textarea {
  min-height: 46px;
  padding: 11px 14px;
  font-size: 15px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-1);
}
body:not(.bg-slate-900) .form-input.h-9,
body:not(.bg-slate-900) .form-select.h-9 { height: 40px; min-height: 40px; padding-top: 7px; padding-bottom: 7px; font-size: 14px; }
body:not(.bg-slate-900) .form-input::placeholder,
body:not(.bg-slate-900) .form-textarea::placeholder { color: var(--text-3); }
body:not(.bg-slate-900) .form-input:hover,
body:not(.bg-slate-900) .form-select:hover,
body:not(.bg-slate-900) .form-textarea:hover { border-color: var(--border-strong); }
body:not(.bg-slate-900) .form-input:focus,
body:not(.bg-slate-900) .form-select:focus,
body:not(.bg-slate-900) .form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-ring);
}
body:not(.bg-slate-900) .form-input.error,
body:not(.bg-slate-900) .form-select.error,
body:not(.bg-slate-900) .form-textarea.error { border-color: var(--danger); background: var(--danger-soft); }
body:not(.bg-slate-900) .form-input[readonly] { background: var(--surface-3); color: var(--text-2); }
body:not(.bg-slate-900) .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
body:not(.bg-slate-900) .form-label { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
body:not(.bg-slate-900) .form-hint { font-size: 12px; color: var(--text-3); }
body:not(.bg-slate-900) .form-error { font-size: 12px; font-weight: 500; color: var(--danger); }
body:not(.bg-slate-900) .form-checkbox,
body:not(.bg-slate-900) input[type="checkbox"],
body:not(.bg-slate-900) input[type="radio"] { accent-color: var(--primary); }

/* Tailwind ile yapılmış girdiler (border + rounded-lg + focus:ring) */
body:not(.bg-slate-900) input.border.rounded-lg:not([type="checkbox"]):not([type="radio"]),
body:not(.bg-slate-900) select.border.rounded-lg,
body:not(.bg-slate-900) textarea.border.rounded-lg,
body:not(.bg-slate-900) input.border.rounded-xl:not([type="checkbox"]):not([type="radio"]),
body:not(.bg-slate-900) select.border.rounded-xl,
body:not(.bg-slate-900) textarea.border.rounded-xl {
  border-width: 1.5px; border-color: var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-1);
  min-height: 42px; font-size: 14.5px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
body:not(.bg-slate-900) input.border.rounded-lg:focus,
body:not(.bg-slate-900) select.border.rounded-lg:focus,
body:not(.bg-slate-900) textarea.border.rounded-lg:focus,
body:not(.bg-slate-900) input.border.rounded-xl:focus,
body:not(.bg-slate-900) select.border.rounded-xl:focus,
body:not(.bg-slate-900) textarea.border.rounded-xl:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring);
  --tw-ring-shadow: 0 0 #0000;
}

/* Ayarlar: seçim kutuları (peer-checked) */
body:not(.bg-slate-900) .peer ~ .rounded-xl.border,
body:not(.bg-slate-900) .peer ~ .rounded-lg.border { border-width: 1.5px; font-weight: 600; }
body:not(.bg-slate-900) .cursor-pointer.bg-slate-50.rounded-xl { background: var(--surface-2); border: 1px solid var(--border); }

/* Anahtar (Tailwind peer toggle) */
body:not(.bg-slate-900) .peer:checked ~ .peer-checked\:bg-primary.rounded-full { background: var(--primary); }

/* Tablo */
body:not(.bg-slate-900) .table { font-size: 13.5px; }
body:not(.bg-slate-900) .table th {
  padding: 11px 16px;
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--text-2); background: var(--surface-2); border-bottom-color: var(--border);
}
body:not(.bg-slate-900) .table td { padding: 12px 16px; border-bottom-color: var(--border); }
body:not(.bg-slate-900) .table tbody tr:hover { background: var(--surface-2); }
body:not(.bg-slate-900) .table-wrapper { border-radius: var(--radius-md); }

/* Tailwind ile yapılmış tablolar */
body:not(.bg-slate-900) table thead th.uppercase,
body:not(.bg-slate-900) table thead th.text-xs {
  text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--text-2);
}
body:not(.bg-slate-900) table thead.bg-slate-50,
body:not(.bg-slate-900) table thead tr.bg-slate-50,
body:not(.bg-slate-900) table thead th.bg-slate-50 { background: var(--surface-2); }
body:not(.bg-slate-900) table tbody tr.hover\:bg-slate-50:hover { background: var(--surface-2); }

/* Rozet */
body:not(.bg-slate-900) .badge {
  height: 24px; padding: 0 9px; gap: 5px;
  font-size: 11.5px; font-weight: 600; letter-spacing: -.005em;
  background: var(--surface-3); color: var(--text-2);
}
body:not(.bg-slate-900) .badge svg { width: 13px; height: 13px; }
body:not(.bg-slate-900) .badge-primary { background: var(--primary-soft); color: var(--primary); }
body:not(.bg-slate-900) .badge-success, body:not(.bg-slate-900) .badge.bg-green-100 { background: var(--success-soft); color: var(--success); }
body:not(.bg-slate-900) .badge-warning, body:not(.bg-slate-900) .badge.bg-yellow-100 { background: var(--warning-soft); color: var(--warning); }
body:not(.bg-slate-900) .badge-danger,  body:not(.bg-slate-900) .badge.bg-red-100 { background: var(--danger-soft); color: var(--danger); }
body:not(.bg-slate-900) .badge-info,    body:not(.bg-slate-900) .badge.bg-blue-100 { background: var(--info-soft); color: var(--info); }

/* Küçük satır içi etiketler (rounded + px-1.5 py-0.5) */
body:not(.bg-slate-900) .inline-flex.rounded.px-1\.5,
body:not(.bg-slate-900) span.rounded.px-1\.5.py-0\.5,
body:not(.bg-slate-900) span.rounded-full.px-2.py-0\.5,
body:not(.bg-slate-900) span.rounded-full.px-2\.5.py-0\.5 { border-radius: var(--radius-pill); font-weight: 600; }

/* Sekmeler (Ayarlar vb. — Tailwind ile yapılmış) */
body:not(.bg-slate-900) .bg-slate-100.rounded-lg.p-1,
body:not(.bg-slate-900) .bg-slate-100.rounded-xl.p-1 { background: var(--surface-3); border-radius: var(--radius-sm); padding: 4px; gap: 2px; }
body:not(.bg-slate-900) .bg-slate-100.p-1 > button,
body:not(.bg-slate-900) .bg-slate-100.p-1 > a { border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
body:not(.bg-slate-900) .bg-slate-100.p-1 > button.bg-white,
body:not(.bg-slate-900) .bg-slate-100.p-1 > a.bg-white { color: var(--text-1); box-shadow: 0 1px 3px rgba(16,24,40,.10); }

/* Boş durum */
body:not(.bg-slate-900) .text-center .w-16.h-16.rounded-2xl.bg-slate-100,
body:not(.bg-slate-900) .text-center .w-12.h-12.rounded-full.bg-slate-100 { background: var(--surface-3); color: var(--text-3); }

/* Modal / drawer (Alpine) */
body:not(.bg-slate-900) .fixed.inset-0.bg-black\/50,
body:not(.bg-slate-900) .fixed.inset-0.bg-black\/40,
body:not(.bg-slate-900) .fixed.inset-0.bg-slate-900\/50 { background: var(--overlay); }
body:not(.bg-slate-900) .fixed .bg-white.rounded-2xl.shadow-2xl,
body:not(.bg-slate-900) .fixed .bg-white.rounded-xl.shadow-2xl,
body:not(.bg-slate-900) .fixed .bg-white.rounded-2xl.shadow-xl,
body:not(.bg-slate-900) .fixed .bg-white.rounded-xl.shadow-xl {
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); border: 1px solid var(--border);
}

/* Toastify */
body:not(.bg-slate-900) .toastify {
  font-family: var(--font); font-size: 14px; font-weight: 500;
  border-radius: var(--radius-md); box-shadow: var(--shadow-raised);
  padding: 12px 16px;
}

/* Flatpickr */
body:not(.bg-slate-900) .flatpickr-calendar {
  font-family: var(--font);
  border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-raised);
}
body:not(.bg-slate-900) .flatpickr-day.selected,
body:not(.bg-slate-900) .flatpickr-day.selected:hover,
body:not(.bg-slate-900) .flatpickr-day.startRange,
body:not(.bg-slate-900) .flatpickr-day.endRange { background: var(--primary); border-color: var(--primary); }
body:not(.bg-slate-900) .flatpickr-day.today { border-color: var(--primary); }

/* DataTables — app.css tokenları ile otomatik; birkaç ölçü dokunuşu */
body:not(.bg-slate-900) .dataTables_wrapper .dataTables_filter input,
body:not(.bg-slate-900) .dataTables_wrapper .dataTables_length select { border-radius: var(--radius-xs); border-width: 1.5px; min-height: 34px; }
body:not(.bg-slate-900) .dataTables_wrapper .dataTables_filter input:focus,
body:not(.bg-slate-900) .dataTables_wrapper .dataTables_length select:focus { box-shadow: 0 0 0 4px var(--primary-ring); }
body:not(.bg-slate-900) .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--radius-xs); font-weight: 600; }

/* ---------------------------------------------------------------------
   8. POS / MASA / MUTFAK — sadece yüzey dokunuşları
   --------------------------------------------------------------------- */
body:not(.bg-slate-900) .product-card {
  border-width: 1px; border-color: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body:not(.bg-slate-900) .product-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-raised); transform: translateY(-2px); }
body:not(.bg-slate-900) .product-card:active { transform: scale(.975); }

body:not(.bg-slate-900) .table-map { background: var(--surface-3); border-color: var(--border); border-radius: var(--radius-lg); }
body:not(.bg-slate-900) .table-card { font-weight: 600; }
body:not(.bg-slate-900) .table-card.shape-square,
body:not(.bg-slate-900) .table-card.shape-rectangle { border-radius: var(--radius-md); }

body:not(.bg-slate-900) .kitchen-col { border-radius: var(--radius-md); }
body:not(.bg-slate-900) .kitchen-ticket { border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }

/* ---------------------------------------------------------------------
   9. MOBİL ALT SEKME ÇUBUĞU
   --------------------------------------------------------------------- */
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--border);
}
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 > div { height: var(--tabbar-h); max-width: 560px; margin: 0 auto; }
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 a,
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 button {
  gap: 3px; padding: 6px 2px; color: var(--text-3);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 a svg,
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 button svg { width: 22px; height: 22px; stroke-width: 1.9; }
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 a span,
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 button span { font-size: 10.5px; font-weight: 600; }
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 a.text-indigo-600 { color: var(--primary); }
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 a:active,
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 button:active { transform: scale(.94); }

/* ---------------------------------------------------------------------
   10. GİRİŞ / KAYIT EKRANLARI (layouts/auth.php)
   --------------------------------------------------------------------- */
/* Sol tanıtım paneli: marka lacivert zemin + altın/mavi ışıklar */
body:not(.bg-slate-900) > .min-h-screen.flex > .bg-gradient-to-br {
  background: linear-gradient(135deg, #111A2E 0%, #18233F 55%, #0B1220 100%);
  position: relative; overflow: hidden;
}
body:not(.bg-slate-900) > .min-h-screen.flex > .bg-gradient-to-br::before {
  content: ''; position: absolute; top: -120px; right: -80px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,23,.30), transparent 68%);
}
body:not(.bg-slate-900) > .min-h-screen.flex > .bg-gradient-to-br::after {
  content: ''; position: absolute; bottom: -160px; left: -100px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.36), transparent 68%);
}
body:not(.bg-slate-900) > .min-h-screen.flex > .bg-gradient-to-br > * { position: relative; z-index: 1; }
body:not(.bg-slate-900) > .min-h-screen.flex > .bg-gradient-to-br .text-indigo-100 { color: rgba(255,255,255,.72); }
body:not(.bg-slate-900) > .min-h-screen.flex > .bg-gradient-to-br .bg-white\/20 { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }

/* Sağ form paneli */
body:not(.bg-slate-900) > .min-h-screen.flex > .bg-white { background: var(--bg); }
body:not(.bg-slate-900) > .min-h-screen.flex .max-w-md h1,
body:not(.bg-slate-900) > .min-h-screen.flex .max-w-md h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
body:not(.bg-slate-900) > .min-h-screen.flex .max-w-md > .bg-white,
body:not(.bg-slate-900) > .min-h-screen.flex .max-w-md > form.bg-white,
body:not(.bg-slate-900) > .min-h-screen.flex .max-w-md > div.card {
  border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
body:not(.bg-slate-900) > .min-h-screen.flex .lg\:hidden .bg-indigo-600 {
  background: linear-gradient(140deg, var(--primary), var(--accent-gold));
  border-radius: 12px; box-shadow: 0 6px 18px var(--primary-ring);
}

/* ---------------------------------------------------------------------
   11. ERİŞİLEBİLİRLİK
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body:not(.bg-slate-900) *, body:not(.bg-slate-900) *::before, body:not(.bg-slate-900) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------------
   12. SAYFA ÖZEL — serkangonenir bileşenlerinin birebir karşılıkları
   --------------------------------------------------------------------- */

/* 12a. Dashboard üst istatistik satırı → HERO KART (koyu lacivert) + STAT PİLLERİ */
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 {
  position: relative; overflow: hidden;
  padding: 20px;
  gap: 12px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #111A2E 0%, #18233F 60%, #0B1220 100%);
  color: #fff;
  box-shadow: var(--shadow-raised);
}
@media (min-width: 900px) {
  body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 { padding: 24px; }
}
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6::before {
  content: ''; position: absolute; top: -80px; right: -60px; z-index: 0;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,23,.30), transparent 68%);
}
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6::after {
  content: ''; position: absolute; bottom: -110px; left: -70px; z-index: 0;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.36), transparent 68%);
}
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .card {
  position: relative; z-index: 1;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff;
}
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .card .mb-3 { margin-bottom: 4px; }
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .card p.text-sm {
  font-size: 11.5px; font-weight: 550; color: rgba(255,255,255,.62);
}
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .card p.text-2xl {
  font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #fff; margin-top: 0;
}
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .card p.text-2xl.text-yellow-600 { color: #FCD34D; }
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .card p.text-xs {
  font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.6); margin-top: 2px;
}
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .card .w-9.h-9 {
  width: 34px; height: 34px; border-radius: 11px;
  background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.16);
}
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .card .w-9.h-9 svg { color: #fff; width: 17px; height: 17px; min-width: 17px; flex: 0 0 17px; }

/* 12b. Kart içi ikon kutuları → .icon-box (42px, 13px köşe, yumuşak zemin) */
body:not(.bg-slate-900) .card .w-9.h-9.rounded-lg,
body:not(.bg-slate-900) .card .w-10.h-10.rounded-lg,
body:not(.bg-slate-900) .card .w-10.h-10.rounded-xl { width: 42px; height: 42px; border-radius: 13px; }
body:not(.bg-slate-900) .card .w-9.h-9.rounded-lg svg,
body:not(.bg-slate-900) .card .w-10.h-10.rounded-lg svg,
body:not(.bg-slate-900) .card .w-10.h-10.rounded-xl svg { width: 21px; height: 21px; }
body:not(.bg-slate-900) .card .w-8.h-8.rounded-lg { border-radius: 11px; }
body:not(.bg-slate-900) .card .w-8.h-8.rounded-full { width: 34px; height: 34px; }

/* 12c. Hızlı Erişim kutucukları → .menu-tile */
body:not(.bg-slate-900) .card .grid > a.flex.flex-col.items-center.rounded-lg.p-3 {
  align-items: flex-start; gap: 10px;
  min-height: 118px; padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--surface) !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body:not(.bg-slate-900) .card .grid > a.flex.flex-col.items-center.rounded-lg.p-3::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(160deg, transparent 55%, color-mix(in srgb, currentColor 10%, transparent));
}
body:not(.bg-slate-900) .card .grid > a.flex.flex-col.items-center.rounded-lg.p-3:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-raised); border-color: var(--border-strong);
  background: var(--surface) !important;
}
body:not(.bg-slate-900) .card .grid > a.flex.flex-col.items-center.rounded-lg.p-3:active { transform: scale(.975); }
body:not(.bg-slate-900) .card .grid > a.flex.flex-col.items-center.rounded-lg.p-3 > svg {
  width: 42px; height: 42px; padding: 10px; border-radius: 13px; flex-shrink: 0;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
body:not(.bg-slate-900) .card .grid > a.flex.flex-col.items-center.rounded-lg.p-3 > span {
  margin-top: auto; font-size: 15px; font-weight: 650; letter-spacing: -.012em; color: var(--text-1);
}
body:not(.bg-slate-900) .card .grid > a.flex.flex-col.items-center.rounded-lg.p-3 > svg.text-indigo-600 { color: var(--primary); }
body:not(.bg-slate-900) .card .grid > a.flex.flex-col.items-center.rounded-lg.p-3 > svg.text-green-600 { color: var(--success); }
body:not(.bg-slate-900) .card .grid > a.flex.flex-col.items-center.rounded-lg.p-3 > svg.text-purple-600 { color: var(--violet); }
body:not(.bg-slate-900) .card .grid > a.flex.flex-col.items-center.rounded-lg.p-3 > svg.text-blue-600 { color: var(--info); }
body:not(.bg-slate-900) .card .grid > a.flex.flex-col.items-center.rounded-lg.p-3 > svg.text-yellow-600,
body:not(.bg-slate-900) .card .grid > a.flex.flex-col.items-center.rounded-lg.p-3 > svg.text-amber-600 { color: var(--accent-gold-strong); }

/* 12d. KPI kutuları (Siparişler vb: .card.p-4.text-center) → .kpi */
body:not(.bg-slate-900) .card.p-4.text-center {
  background: var(--surface-2); border-radius: var(--radius-sm); box-shadow: none; padding: 12px;
}
body:not(.bg-slate-900) .card.p-4.text-center > .text-xs {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3);
}
body:not(.bg-slate-900) .card.p-4.text-center > .text-xl,
body:not(.bg-slate-900) .card.p-4.text-center > .font-bold { font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: 3px; }

/* 12e. Bölüm başlıkları (h3 küçük büyük harf) → .nav-group-title ölçüsü */
body:not(.bg-slate-900) #app-layout main h3.text-xs.uppercase.tracking-wider,
body:not(.bg-slate-900) #app-layout main p.text-xs.uppercase.tracking-wider,
body:not(.bg-slate-900) #app-layout main h4.text-xs.uppercase.tracking-wider {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; color: var(--text-3);
}

/* 12f. Filtre çipleri (POS kategori sekmeleri, listelerdeki pill butonlar) → .chip-filter */
body:not(.bg-slate-900) #app-layout main .min-w-max > button.rounded-lg.text-xs.font-medium,
body:not(.bg-slate-900) #app-layout main .min-w-max > template + button.rounded-lg.text-xs.font-medium {
  height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2);
  font-size: 13px; font-weight: 600;
  transition: all var(--dur-fast) var(--ease);
}
body:not(.bg-slate-900) #app-layout main .min-w-max > button.rounded-lg.text-xs.font-medium:hover {
  border-color: var(--border-strong); color: var(--text-1); background: var(--surface);
}
body:not(.bg-slate-900) #app-layout main .min-w-max > button.rounded-lg.text-xs.font-medium.bg-primary,
body:not(.bg-slate-900) #app-layout main .min-w-max > button.rounded-lg.text-xs.font-medium.text-white {
  background: var(--text-1); border-color: var(--text-1); color: var(--surface);
}
body:not(.bg-slate-900) #app-layout main .min-w-max { gap: 8px; padding: 10px 0; }
body:not(.bg-slate-900) #app-layout main .min-w-max .opacity-60 { opacity: .55; }

/* 12g. POS ürün kartları → .card-tap */
body:not(.bg-slate-900) .product-card-btn {
  border-radius: var(--radius-md);
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body:not(.bg-slate-900) .product-card-btn:hover:not(:disabled) {
  transform: translateY(-2px); box-shadow: var(--shadow-raised); border-color: var(--border-strong) !important;
}
body:not(.bg-slate-900) .product-card-btn:active:not(:disabled) { transform: scale(.975); }
body:not(.bg-slate-900) .product-card-btn:disabled { background: var(--surface-2) !important; }
body:not(.bg-slate-900) .product-card-btn > .rounded-t-xl { border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--surface-3); }
body:not(.bg-slate-900) .product-card-btn p.font-medium { font-weight: 600; color: var(--text-1); }
body:not(.bg-slate-900) .product-card-btn p.font-bold.text-primary { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
body:not(.bg-slate-900) .product-card-btn .min-w-5.h-5.rounded-full { font-size: 11px; font-weight: 700; }

/* POS sepet paneli */
body:not(.bg-slate-900) #app-layout main.p-0 .lg\:w-96.bg-white { border-left: 1px solid var(--border); }
body:not(.bg-slate-900) #app-layout main.p-0 .border-b.border-slate-100 { border-color: var(--border); }

/* 12h. MASA KARTLARI → .menu-tile / .card-tap görünümü (durum rengi korunur) */
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 { gap: 12px; padding: 4px; }
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group {
  border-width: 1px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  font-weight: 700; letter-spacing: -.01em;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group.rounded-full { border-radius: 50%; }
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group:active { transform: scale(.975); }

/* boş masa */
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group.bg-gray-500\/10 {
  background: var(--surface); border-color: var(--border); color: var(--text-1);
}
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group.bg-gray-500\/10:hover { border-color: var(--border-strong); }
/* servis hazır */
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group.bg-amber-500\/10 {
  background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); color: #B45309;
}
/* dolu masa */
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group.bg-green-900 {
  background: linear-gradient(140deg, #10B981, #059669); border-color: transparent; color: #fff;
  box-shadow: 0 8px 22px rgba(16,185,129,.28), 0 2px 6px rgba(16,24,40,.14);
}
/* masa adı yazı ölçüsü */
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > span.font-bold.text-2xl { font-size: 22px; }
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > span.font-bold.text-lg { font-size: 20px; font-weight: 700; }
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > span.font-bold.text-sm { font-size: 15px; }
/* süre rozeti */
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > .-top-2.rounded-full {
  font-size: 11px; font-weight: 700; padding: 1px 8px; box-shadow: var(--shadow-card);
}
/* kalem sayısı rozeti */
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > .-bottom-2.rounded-full {
  background: var(--danger); border: 2px solid var(--surface); width: 22px; height: 22px; font-size: 11px;
}
/* misafir adı etiketi (inline stil beyaz zemin) */
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > span[style*="border-radius"] {
  font-size: 13px !important; font-weight: 700 !important; padding: 2px 8px; letter-spacing: -.01em;
}
/* masa haritası araç çubuğu boyut seçici */
body:not(.bg-slate-900) #app-layout main.p-0 .sm\:flex.border.rounded-lg.overflow-hidden { border-radius: var(--radius-sm); border-color: var(--border-strong); }
body:not(.bg-slate-900) #app-layout main.p-0 .sm\:flex.border.rounded-lg.overflow-hidden > button { height: 36px; font-size: 13px; font-weight: 600; }
body:not(.bg-slate-900) #app-layout main.p-0 .sm\:flex.border.rounded-lg.overflow-hidden > button.bg-slate-800 { background: var(--text-1); }

/* 12i. Ayarlar: canlı önizleme ve sekme çubuğu */
body:not(.bg-slate-900) #app-layout main .border-b.border-slate-200 > nav.flex,
body:not(.bg-slate-900) #app-layout main nav.flex.gap-1.bg-slate-100 { padding: 4px; gap: 2px; background: var(--surface-3); border-radius: var(--radius-sm); }

/* 12j. Uyarı bandı kartı (Deneme süresi vb. bg-yellow-50 / bg-amber-50 kutular) */
body:not(.bg-slate-900) #app-layout main .card .bg-yellow-50.rounded-lg,
body:not(.bg-slate-900) #app-layout main .card .bg-amber-50.rounded-lg,
body:not(.bg-slate-900) #app-layout main .card .bg-yellow-50.rounded-xl,
body:not(.bg-slate-900) #app-layout main .card .bg-amber-50.rounded-xl {
  border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--warning) 22%, transparent); padding: 13px 16px;
}

/* 12k. Boş durum */
body:not(.bg-slate-900) #app-layout main .text-center.py-16 > p.text-slate-400,
body:not(.bg-slate-900) #app-layout main .text-center.py-12 > p.text-slate-400,
body:not(.bg-slate-900) #app-layout main .text-center.py-10 > p.text-slate-400 { font-size: 13.5px; color: var(--text-2); }
body:not(.bg-slate-900) #app-layout main .text-center .w-16.h-16.rounded-2xl,
body:not(.bg-slate-900) #app-layout main .text-center .w-16.h-16.rounded-full {
  width: 132px; height: 132px; border-radius: 50%;
  background: var(--surface-3) !important; color: var(--primary);
  box-shadow: inset 0 0 0 10px var(--surface), inset 0 0 0 11px var(--border);
}
body:not(.bg-slate-900) #app-layout main .text-center .w-16.h-16.rounded-2xl svg,
body:not(.bg-slate-900) #app-layout main .text-center .w-16.h-16.rounded-full svg { width: 34px; height: 34px; color: var(--primary); }

/* Mobilde masa kartları 3 sütun doldurur (sabit w-28 yerine akışkan) */
@media (max-width: 639.98px) {
  body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 { gap: 10px; padding: 2px; }
  body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group {
    width: calc((100% - 20px) / 3) !important; height: auto; aspect-ratio: 1 / 1;
  }
}

/* Dar filtre seçicilerinde metin kırpılmasın */
body:not(.bg-slate-900) .form-select.h-9 { padding-right: 32px; background-position: right 10px center; font-size: 13.5px; }

/* ---------------------------------------------------------------------
   13. MASA SİPARİŞ PANELİ (tables/_order_panel.php)
   Panelde çok sayıda inline stil var (siyah kategori butonları, kırmızı
   fiyat, siyah/yeşil rozetler, !important arka planlar). CSS'in inline
   !important'ı ezemediği yerlerde şu teknikler kullanılır:
     • background !important  → box-shadow: inset (arka planın üstüne boyar)
     • color !important       → -webkit-text-fill-color
     • border-radius !important → clip-path: inset(0 round r)
   --------------------------------------------------------------------- */

/* Panel çerçevesi */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10).overflow-hidden.z-10.flex.flex-col {
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); border: 1px solid var(--border);
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10).overflow-hidden.z-10 > .flex.flex-col.h-full { background: var(--surface); }

/* 13a. Üst bilgi şeridi → hero kart (lacivert) */
body .bg-\[\#0d1117\] {
  background: linear-gradient(135deg, #111A2E 0%, #18233F 60%, #0B1220 100%);
  position: relative; overflow: hidden;
}
body .bg-\[\#0d1117\]::before {
  content: ''; position: absolute; top: -90px; right: -60px; z-index: 0;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,23,.28), transparent 68%);
}
body .bg-\[\#0d1117\]::after {
  content: ''; position: absolute; bottom: -120px; left: -60px; z-index: 0;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.34), transparent 68%);
}
body .bg-\[\#0d1117\] > * { position: relative; z-index: 1; }
body .bg-\[\#0d1117\] .rounded-2xl.bg-indigo-500\/20 {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); border-radius: 16px;
}
body .bg-\[\#0d1117\] .text-indigo-300 { color: #fff; }
body .bg-\[\#0d1117\] h2 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
body .bg-\[\#0d1117\] .bg-slate-800 { background: rgba(255,255,255,.10); color: rgba(255,255,255,.7); }
body .bg-\[\#0d1117\] .text-slate-500 { color: rgba(255,255,255,.62); }
body .bg-\[\#0d1117\] .text-amber-400 { color: #FCD34D; }
body .bg-\[\#0d1117\] .bg-slate-800\/70,
body .bg-\[\#0d1117\] .bg-slate-700\/60 {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14); border-radius: 12px;
}
body .bg-\[\#0d1117\] .bg-slate-800\/70:hover,
body .bg-\[\#0d1117\] .bg-slate-700\/60:hover { background: rgba(255,255,255,.14); }
body .bg-\[\#0d1117\] .bg-slate-700\/60 { color: rgba(255,255,255,.82); width: 40px; height: 40px; }

/* Mobil sekmeler (Ürünler / Sipariş) */
body .md\:hidden.border-b > button.border-indigo-500 { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* 13b. Kategori butonları → chip-filter (Alpine :style siyah/mavi arka planı ezilir) */
body .md\:grid[style*="repeat(7"] { gap: 8px; padding: 12px 12px 10px; }
body .md\:grid[style*="repeat(7"] > button,
body [x-ref="catBar"] > button {
  height: 40px; padding: 0 12px !important;
  background: var(--surface) !important; color: var(--text-2) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill) !important;
  clip-path: inset(0 round var(--radius-pill));
  box-shadow: none !important;
  font-size: 13.5px; font-weight: 600;
  transition: all var(--dur-fast) var(--ease);
}
body .md\:grid[style*="repeat(7"] > button:hover,
body [x-ref="catBar"] > button:hover { border-color: var(--border-strong); color: var(--text-1) !important; }
body .md\:grid[style*="repeat(7"] > button[style*="0065ff"],
body [x-ref="catBar"] > button[style*="0065ff"] {
  background: var(--text-1) !important; color: var(--surface) !important; border-color: var(--text-1);
}

/* 13c. Arama + adet satırı */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) input.rounded-xl.bg-slate-50 {
  height: 42px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--surface); font-size: 14.5px;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) input.rounded-xl.bg-slate-50:focus {
  border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring); --tw-ring-shadow: 0 0 #0000;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .w-8.h-8.rounded-lg.border { width: 36px; height: 36px; border-radius: var(--radius-xs); border-color: var(--border-strong); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .border-indigo-400.bg-indigo-50 {
  height: 36px; border-radius: var(--radius-xs); border-color: var(--primary); background: var(--primary-soft); color: var(--primary);
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button.h-8.px-2.rounded-lg.border { height: 36px; border-radius: var(--radius-xs); font-size: 12.5px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button.h-8.px-2.rounded-lg.border.bg-amber-500 { background: var(--accent-gold); border-color: var(--accent-gold); color: #1A1206; }

/* 13d. Ürün kutucukları → card-tap */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] { gap: 10px; padding: 2px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button {
  min-height: 84px; padding: 12px 10px;
  background: var(--surface); box-shadow: var(--shadow-card);
  border-width: 1px !important; border-color: var(--border) !important;
  border-radius: var(--radius-md) !important;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button:hover:not(:disabled) {
  transform: translateY(-2px); box-shadow: var(--shadow-raised); border-color: var(--border-strong) !important; background: var(--surface);
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button:active:not(:disabled) { transform: scale(.975); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button > p.font-semibold {
  text-transform: none !important; font-size: 13.5px; font-weight: 600; color: var(--text-1); letter-spacing: -.01em;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button > p.font-black {
  -webkit-text-fill-color: var(--primary);      /* inline color:red!important'ı ezer */
  font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 6px;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button > .aspect-square { border-radius: var(--radius-sm); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .overflow-y-auto.p-2\.5.bg-slate-50 { background: var(--bg); padding: 12px; }

/* 13e. Sipariş sütunu */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .md\:w-\[350px\] { width: 380px; border-left: 1px solid var(--border); }
@media (max-width: 767.98px) { body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .md\:w-\[350px\] { width: 100%; border-left: 0; } }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .px-3.py-2.border-b.bg-slate-50 { background: var(--surface-2); padding: 10px 14px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .px-3.py-2.border-b.bg-slate-50 > span.uppercase { font-size: 11px; letter-spacing: .09em; color: var(--text-3); font-weight: 700; }

/* Özet (kırmızı) ve Yazdır (mavi) — inline background:!important üstüne inset gölge ile boyanır */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[title="Kategoriye göre özet"],
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[title="Adisyon Yazdır"] {
  height: 34px; padding: 0 12px; border-radius: var(--radius-xs); gap: 6px;
  box-shadow: inset 0 0 0 100px var(--surface-3);
  color: var(--text-1) !important;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[title="Kategoriye göre özet"]:hover,
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[title="Adisyon Yazdır"]:hover { box-shadow: inset 0 0 0 100px var(--primary-soft); color: var(--primary) !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[title="Kategoriye göre özet"] span,
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[title="Adisyon Yazdır"] span { color: inherit !important; font-weight: 600 !important; font-size: 13px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[title="Kategoriye göre özet"] svg,
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[title="Adisyon Yazdır"] svg { color: inherit; width: 16px; height: 16px; }

/* Kalem satırları */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] { padding: 8px 10px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] > div[data-item-id] {
  border-radius: var(--radius-sm) !important; margin: 0 0 8px !important;
  background: var(--surface); box-shadow: var(--shadow-card);
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] > div[data-item-id].bg-yellow-100 { background: var(--accent-gold-soft); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] > div[data-item-id] > .px-3.py-2\.5 { padding: 12px 14px; border-radius: inherit; }
/* Ürün adı: inline "font-family: math; 17px" ezilir */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] p[style*="math"] {
  font-family: var(--font) !important; font-size: 15px !important; font-weight: 650 !important; letter-spacing: -.01em; color: var(--text-1) !important;
}
/* Adet × fiyat: kırmızı → text-2 */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] p.text-xs[style*="math"] {
  font-size: 13px !important; font-weight: 500 !important; color: var(--text-2) !important; margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
/* Kişi + saat rozetleri (siyah / yeşil) → gri çip */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] span[style*="#000000"],
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] span[style*="#00a146"] {
  background: var(--surface-3) !important; color: var(--text-2) !important;
  font-size: 11.5px !important; font-weight: 600 !important; padding: 2px 8px !important; margin-top: 6px !important;
  line-height: 18px;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] span[style*="#000000"] { border-radius: 99px 0 0 99px !important; margin-right: 0 !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] span[style*="#00a146"] { border-radius: 0 99px 99px 0 !important; color: var(--text-3) !important; border-left: 1px solid var(--border); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] p.text-sm.font-black { font-size: 15px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* Kalem aksiyonları: lacivert/siyah/bordo → soft */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .flex.border-t > button {
  border-radius: var(--radius-xs) !important; margin: 4px !important; padding: 10px 0; gap: 4px;
  font-weight: 600;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .flex.border-t > button.bg-blue-800 { background: var(--primary-soft); color: var(--primary); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .flex.border-t > button.bg-black { background: var(--violet-soft); color: var(--violet); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .flex.border-t > button.bg-red-800 { background: var(--danger-soft); color: var(--danger); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .flex.border-t > button:hover { filter: brightness(.96); color: inherit; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .flex.border-t > button span { font-size: 12.5px !important; }

/* Toplam bloğu */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .border-t.border-slate-200.bg-white.px-3 { padding: 14px 16px 16px; border-color: var(--border); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .border-t.border-slate-200.bg-white.px-3 .text-xs[style*="13px"] { color: var(--text-2) !important; font-weight: 500 !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .border-t-2.border-slate-900 { border-top: 1px solid var(--border) !important; padding-top: 10px; margin-top: 6px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .border-t-2.border-slate-900 > span:first-child { font-size: 12px; letter-spacing: .06em; color: var(--text-2); font-weight: 700; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .border-t-2.border-slate-900 > span:last-child { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text-1); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .rounded-lg[style*="fffac3"] { background: var(--accent-gold-soft) !important; border-radius: var(--radius-xs); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .rounded-lg[style*="fffac3"] span { color: var(--accent-gold-strong); }

/* Aksiyon butonları: Ödeme / Kaydet / Masayı Taşı / İkram / İptal */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.h-11,
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.h-10 {
  height: 46px; border-radius: var(--radius-sm); font-size: 14.5px !important; font-weight: 650 !important; letter-spacing: -.01em; gap: 8px;
  border: 1px solid transparent;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button svg { width: 18px; height: 18px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.bg-indigo-600 { background: var(--primary); box-shadow: 0 4px 14px var(--primary-ring); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.bg-indigo-600:hover { background: var(--primary-hover); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button[style*="green"] { background: var(--success) !important; color: #fff !important; border-color: transparent; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.bg-violet-50 { background: var(--surface); border-color: var(--border-strong); color: var(--text-1); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.bg-violet-50:hover { border-color: var(--text-3); background: var(--surface); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.bg-black { background: var(--violet-soft); color: var(--violet); border-color: transparent; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.bg-black:hover { background: color-mix(in srgb, var(--violet-soft) 85%, var(--violet)); color: var(--violet); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.bg-red-900 { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.bg-red-900:hover { background: var(--danger); color: #fff; }

/* Boş sipariş durumu */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .w-20.h-20.rounded-2xl.bg-slate-100 {
  width: 132px; height: 132px; border-radius: 50%; background: var(--surface-3); color: var(--primary);
  box-shadow: inset 0 0 0 10px var(--surface), inset 0 0 0 11px var(--border);
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .w-20.h-20.rounded-2xl.bg-slate-100 svg { width: 34px; height: 34px; color: var(--primary); }

/* 13f. Ödeme / numpad alt pencereleri */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[style*="fill-available"] {
  height: 44px; padding: 0 14px !important; border-radius: var(--radius-sm); border-width: 1.5px; font-weight: 600; font-size: 14px;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .flex.flex-wrap[style*="gap:4px"] { gap: 8px !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) input[style*="fffbeb"] {
  background: var(--accent-gold-soft) !important; border: 1.5px solid color-mix(in srgb, var(--accent-gold) 45%, var(--border)) !important;
  border-radius: var(--radius-sm) !important; min-height: 44px;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .rounded-xl.bg-indigo-600 { background: var(--primary); border-radius: var(--radius-sm); }

/* Ödeme paneli başlığı (yeşil gradient) → lacivert hero; onay butonu → success */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .from-emerald-600.to-teal-600 {
  background: linear-gradient(135deg, #111A2E 0%, #18233F 60%, #0B1220 100%); padding: 14px 16px;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .from-emerald-600.to-teal-600 h3 { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button.h-14.rounded-xl.bg-green-600 {
  height: 52px; border-radius: var(--radius-md); background: var(--success); font-weight: 650; font-size: 15.5px; box-shadow: 0 4px 14px rgba(16,185,129,.25);
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button.h-14.rounded-xl.bg-green-600:hover { background: #059669; }

/* ---------------------------------------------------------------------
   14. SİPARİŞ PANELİ — YÜKSEK KONTRAST (düşük kaliteli monitörler için)
   Bölüm 13'ün biçim dilini korur; renk tokenlarını panel kökünde
   koyulaştırır, yazıları büyütür/kalınlaştırır, pastel butonları dolgulu yapar.
   --------------------------------------------------------------------- */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10).overflow-hidden.z-10 {
  --text-2: #1E293B;          /* gri metin → koyu */
  --text-3: #334155;          /* soluk gri → okunur */
  --border: #B6C2D2;          /* açık çizgi → belirgin */
  --border-strong: #8A98AD;
  --surface-3: #E2E8F0;
  --primary-soft: #DBE7FF;
  --shadow-card: 0 1px 2px rgba(16,24,40,.08), 0 6px 18px rgba(16,24,40,.10);
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10).overflow-hidden.z-10 { font-size: 16px; }

/* Kategori çipleri: büyük, kalın, koyu kenarlıklı */
body .md\:grid[style*="repeat(7"] > button,
body [x-ref="catBar"] > button {
  height: 44px; font-size: 15px; font-weight: 700; color: #0F172A !important;
  border: 1.5px solid var(--border-strong);
}
body .md\:grid[style*="repeat(7"] > button[style*="0065ff"],
body [x-ref="catBar"] > button[style*="0065ff"] {
  background: #0F172A !important; color: #fff !important; border-color: #0F172A;
}

/* Arama / adet */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) input.rounded-xl.bg-slate-50 { height: 46px; font-size: 16px; font-weight: 500; color: #0F172A; border-color: var(--border-strong); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) input.rounded-xl.bg-slate-50::placeholder { color: #64748B; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .w-8.h-8.rounded-lg.border,
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .border-indigo-400.bg-indigo-50,
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button.h-8.px-2.rounded-lg.border { height: 40px; min-width: 40px; font-size: 15px; font-weight: 700; color: #0F172A; border-width: 1.5px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .border-indigo-400.bg-indigo-50 { color: #1D4ED8; border-color: #1D4ED8; }

/* Ürün kutucukları: büyük ad + koyu mavi kalın fiyat */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button {
  min-height: 96px; border: 1.5px solid var(--border-strong) !important;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button > p.font-semibold {
  font-size: 15px; font-weight: 700; color: #0F172A; line-height: 1.25;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button > p.font-black {
  -webkit-text-fill-color: #1D4ED8; font-size: 17px; font-weight: 800; margin-top: 8px;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button:disabled { opacity: .55 !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button .text-red-400 { color: #B91C1C; font-size: 12px; }

/* Sipariş sütunu başlığı ve Özet/Yazdır: koyu dolgulu */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .px-3.py-2.border-b.bg-slate-50 > span.uppercase { font-size: 12.5px; color: #0F172A; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[title="Kategoriye göre özet"],
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[title="Adisyon Yazdır"] {
  height: 38px; box-shadow: inset 0 0 0 100px #1E293B; color: #fff !important;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[title="Kategoriye göre özet"]:hover,
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[title="Adisyon Yazdır"]:hover { box-shadow: inset 0 0 0 100px #0F172A; color: #fff !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[title="Kategoriye göre özet"] span,
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[title="Adisyon Yazdır"] span { font-size: 14px; font-weight: 700 !important; }

/* Kalem satırları: büyük ad, kalın fiyat, koyu çipler */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] > div[data-item-id] { box-shadow: var(--shadow-card), inset 0 0 0 1px var(--border); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] p[style*="math"] { font-size: 18px !important; font-weight: 800 !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] p.text-xs[style*="math"] { font-size: 16px !important; font-weight: 700 !important; color: #1D4ED8 !important; margin-top: 4px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] p.text-sm.font-black { font-size: 18px; font-weight: 800; color: #0F172A; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] span[style*="#000000"],
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] span[style*="#00a146"] {
  background: #1E293B !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important; padding: 3px 10px !important; line-height: 20px;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] span[style*="#00a146"] { background: #047857 !important; color: #fff !important; border-left: 0; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .w-2.h-2.rounded-full { width: 10px; height: 10px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .flex.border-t > button { padding: 12px 0; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .flex.border-t > button.bg-blue-800 { background: #1D4ED8; color: #fff; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .flex.border-t > button.bg-black { background: #6D28D9; color: #fff; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .flex.border-t > button.bg-red-800 { background: #B91C1C; color: #fff; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .flex.border-t > button.bg-violet-100 { background: #EDE9FE; color: #5B21B6; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .flex.border-t > button span { font-size: 14px !important; font-weight: 700 !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .flex.border-t > button svg { width: 20px; height: 20px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .flex.border-t > button:hover { filter: brightness(1.08); color: #fff; }

/* Toplam bloğu */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .border-t.border-slate-200.bg-white.px-3 .text-xs[style*="13px"] { font-size: 15px !important; color: #0F172A !important; font-weight: 600 !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .border-t-2.border-slate-900 { border-top: 2px solid #0F172A !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .border-t-2.border-slate-900 > span:first-child { font-size: 14px; color: #0F172A; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .border-t-2.border-slate-900 > span:last-child { font-size: 30px; font-weight: 800; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .rounded-lg[style*="fffac3"] { background: #FDE68A !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .rounded-lg[style*="fffac3"] span { color: #0F172A; font-size: 15px; font-weight: 800; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .text-emerald-600 { color: #047857; font-weight: 600; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .text-amber-600 { color: #B45309; font-weight: 700; }

/* Aksiyon butonları: dolgulu, büyük, kalın */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.h-11,
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.h-10 { height: 50px; font-size: 16px !important; font-weight: 700 !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button svg { width: 20px; height: 20px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.bg-indigo-600 { background: #1D4ED8; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button[style*="green"] { background: #047857 !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.bg-violet-50 { background: #fff; border: 1.5px solid #0F172A; color: #0F172A; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.bg-violet-50:hover { background: #F1F5F9; border-color: #0F172A; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.bg-black { background: #6D28D9; color: #fff; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.bg-black:hover { background: #5B21B6; color: #fff; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.bg-violet-100 { background: #EDE9FE; color: #5B21B6; border-color: #7C3AED; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.bg-red-900 { background: #B91C1C; color: #fff; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.bg-red-900:hover { background: #991B1B; color: #fff; }

/* Ödeme paneli: yöntem butonları ve toplam kutuları */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[style*="fill-available"] { height: 48px; font-size: 16px; font-weight: 700; color: #0F172A; border: 1.5px solid var(--border-strong); }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button[style*="fill-available"].bg-primary { background: #1D4ED8; color: #fff; border-color: #1D4ED8; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) input[style*="fffbeb"] { font-size: 16px; font-weight: 600; color: #0F172A; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .from-emerald-600.to-teal-600 ~ * .text-slate-400,
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .from-emerald-600.to-teal-600 ~ * .text-slate-500 { color: #1E293B; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) button.h-14.rounded-xl.bg-green-600 { height: 56px; font-size: 17px; font-weight: 800; background: #047857; }

/* Mobil sekmeler */
body .md\:hidden.border-b > button { font-size: 15px; font-weight: 700; color: #1E293B; }

/* Başlık şeridi metinleri */
body .bg-\[\#0d1117\] .text-slate-500,
body .bg-\[\#0d1117\] .text-slate-500.italic { color: rgba(255,255,255,.82); }
body .bg-\[\#0d1117\] .text-xs { font-size: 14px; font-weight: 600; }
body .bg-\[\#0d1117\] .bg-slate-800 { color: rgba(255,255,255,.9); font-size: 12.5px; }

/* ---------------------------------------------------------------------
   15. TÜM PROJE — YÜKSEK KONTRAST KATMANI
   serkangonenir biçim dili korunur; renkler düşük kaliteli monitörlerde
   okunacak şekilde koyulaştırılır, yazılar bir tık kalınlaşır.
   Bu bölüm dosyanın sonunda olduğu için önceki tokenları ezer.
   --------------------------------------------------------------------- */
html:not([data-theme="dark"]) {
  --text-2: #1E293B;            /* ikincil metin: gri → koyu */
  --text-3: #475569;            /* soluk metin → okunur gri */
  --border: #C3CCD9;            /* kart/çizgi kenarlığı belirgin */
  --border-strong: #94A3B8;
  --surface-2: #F8FAFC;
  --surface-3: #E2E8F0;
  --bg: #EEF2F7;                /* zemin bir tık koyu → beyaz kartlar öne çıkar */
  --primary: #1D4ED8;           /* mavi koyulaştı */
  --primary-hover: #1E40AF;
  --primary-soft: #DBE7FF;
  --primary-ring: rgba(29, 78, 216, .22);
  --success: #047857;  --success-soft: #D1FAE5;
  --warning: #B45309;  --warning-soft: #FEF3C7;
  --danger:  #B91C1C;  --danger-soft:  #FEE2E2;
  --info:    #0369A1;  --info-soft:    #E0F2FE;
  --orange:  #C2410C;  --orange-soft:  #FFEDD5;
  --violet:  #6D28D9;  --violet-soft:  #EDE9FE;
  --accent-gold-strong: #92400E;
  --shadow-card: 0 1px 2px rgba(16,24,40,.08), 0 6px 18px rgba(16,24,40,.10);

  /* app.css değişkenleri */
  --color-primary:  29  78 216;
  --color-success:   4 120  87;
  --color-warning: 180  83   9;
  --color-error:   185  28  28;
  --bg-base:    238 242 247;
  --text-muted:    30  41  59;
  --border-color: 195 204 217;
}

/* Metin yardımcıları: hepsi bir kademe koyu */
body:not(.bg-slate-900) .text-slate-700,
body:not(.bg-slate-900) .text-slate-600,
body:not(.bg-slate-900) .text-slate-500 { color: #1E293B; }
body:not(.bg-slate-900) .text-slate-400 { color: #475569; }
body:not(.bg-slate-900) .text-slate-300 { color: #64748B; }
body:not(.bg-slate-900) ::placeholder { color: #64748B !important; }
body:not(.bg-slate-900) .form-input::placeholder,
body:not(.bg-slate-900) .form-textarea::placeholder { color: #64748B; }

/* Ağırlıklar: normal → orta, orta → yarı kalın */
body:not(.bg-slate-900) .font-medium { font-weight: 600; }
body:not(.bg-slate-900) .form-label { color: #0F172A; font-weight: 700; }
body:not(.bg-slate-900) .form-input, body:not(.bg-slate-900) .form-select, body:not(.bg-slate-900) .form-textarea { border-color: #94A3B8; font-weight: 500; color: #0F172A; }
body:not(.bg-slate-900) input.border.rounded-lg, body:not(.bg-slate-900) select.border.rounded-lg, body:not(.bg-slate-900) textarea.border.rounded-lg,
body:not(.bg-slate-900) input.border.rounded-xl, body:not(.bg-slate-900) select.border.rounded-xl, body:not(.bg-slate-900) textarea.border.rounded-xl { border-color: #94A3B8; color: #0F172A; }

/* Kartlar: belirgin kenarlık */
body:not(.bg-slate-900) .card,
body:not(.bg-slate-900) .product-card-btn,
body:not(.bg-slate-900) .card .grid > a.flex.flex-col.items-center.rounded-lg.p-3 { border-color: #C3CCD9; }

/* Tablo başlıkları ve satır metinleri */
body:not(.bg-slate-900) .table th,
body:not(.bg-slate-900) table thead th.uppercase,
body:not(.bg-slate-900) table thead th.text-xs { color: #0F172A; font-weight: 700; font-size: 12.5px; background: #EEF2F7; }
body:not(.bg-slate-900) .table td { color: #0F172A; }

/* Rozetler / çipler: koyu metin, kalın */
body:not(.bg-slate-900) .badge,
body:not(.bg-slate-900) span.text-xs.rounded-full,
body:not(.bg-slate-900) span.text-xs.rounded,
body:not(.bg-slate-900) span.text-xs.rounded-md,
body:not(.bg-slate-900) span.text-xs.rounded-lg,
body:not(.bg-slate-900) div.text-xs.rounded-full { font-size: 12px; font-weight: 700; }
body:not(.bg-slate-900) .text-green-600,  body:not(.bg-slate-900) .text-green-700,  body:not(.bg-slate-900) .text-emerald-600, body:not(.bg-slate-900) .text-emerald-700 { color: #047857; }
body:not(.bg-slate-900) .text-red-500,    body:not(.bg-slate-900) .text-red-600,    body:not(.bg-slate-900) .text-red-700 { color: #B91C1C; }
body:not(.bg-slate-900) .text-yellow-600, body:not(.bg-slate-900) .text-yellow-700, body:not(.bg-slate-900) .text-amber-600, body:not(.bg-slate-900) .text-amber-700, body:not(.bg-slate-900) .text-orange-600 { color: #B45309; }
body:not(.bg-slate-900) .text-blue-600,   body:not(.bg-slate-900) .text-blue-700,   body:not(.bg-slate-900) .text-sky-600 { color: #0369A1; }
body:not(.bg-slate-900) .text-purple-600, body:not(.bg-slate-900) .text-purple-700, body:not(.bg-slate-900) .text-violet-600 { color: #6D28D9; }
body:not(.bg-slate-900) .text-indigo-400 { color: #3B82F6; }
body:not(.bg-slate-900) .text-indigo-300 { color: #60A5FA; }

/* Dolgulu durum renkleri (arka plan olarak kullanılanlar) beyaz yazıyla okunur kalsın */
body:not(.bg-slate-900) .bg-green-500,  body:not(.bg-slate-900) .bg-green-600,  body:not(.bg-slate-900) .bg-emerald-500 { background-color: #059669; }
body:not(.bg-slate-900) .bg-red-500,    body:not(.bg-slate-900) .bg-red-600 { background-color: #DC2626; }
body:not(.bg-slate-900) .bg-yellow-500, body:not(.bg-slate-900) .bg-amber-500 { background-color: #D97706; }
body:not(.bg-slate-900) .bg-blue-500,   body:not(.bg-slate-900) .bg-blue-600 { background-color: #0284C7; }

/* Yan menü */
body:not(.bg-slate-900) #main-sidebar nav > a,
body:not(.bg-slate-900) #mobile-sidebar nav > a { color: #1E293B; font-weight: 600; font-size: 15px; }
body:not(.bg-slate-900) #main-sidebar nav p.uppercase,
body:not(.bg-slate-900) #mobile-sidebar nav p.uppercase { color: #475569; font-size: 11.5px; }
body:not(.bg-slate-900) #main-sidebar nav > a > span.ml-auto,
body:not(.bg-slate-900) #mobile-sidebar nav > a > span.ml-auto { background: #CBD5E1; color: #0F172A; }
body:not(.bg-slate-900) #main-sidebar > div.border-t p.text-xs,
body:not(.bg-slate-900) #mobile-sidebar > div.border-t p.text-xs { color: #475569; }

/* Üst çubuk */
body:not(.bg-slate-900) #app-layout > div > header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
body:not(.bg-slate-900) #app-layout > div > header h1 + p { color: #475569; font-weight: 600; }
body:not(.bg-slate-900) #app-layout > div > header button.p-2 { color: #1E293B; }

/* Alt sekme çubuğu */
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 a,
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 button { color: #475569; }
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 a span,
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 button span { font-size: 11.5px; font-weight: 700; }

/* Dashboard hero pilleri: beyaz üstü etiketler daha parlak */
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .card {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.26);
}
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .card p.text-sm { color: rgba(255,255,255,.92); font-size: 13px; font-weight: 600; }
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .card p.text-xs { color: rgba(255,255,255,.85); font-size: 12.5px; }
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .card p.text-2xl { font-size: 26px; font-weight: 800; }

/* KPI kutuları */
body:not(.bg-slate-900) .card.p-4.text-center > .text-xs { color: #1E293B; font-size: 11.5px; font-weight: 700; }
body:not(.bg-slate-900) .card.p-4.text-center { border-color: #C3CCD9; background: #fff; }

/* Bölüm başlıkları */
body:not(.bg-slate-900) #app-layout main h3.text-xs.uppercase.tracking-wider,
body:not(.bg-slate-900) #app-layout main p.text-xs.uppercase.tracking-wider,
body:not(.bg-slate-900) #app-layout main h4.text-xs.uppercase.tracking-wider { color: #334155; font-size: 12px; }

/* Butonlar */
body:not(.bg-slate-900) .btn { font-weight: 700; }
body:not(.bg-slate-900) .btn-secondary { border-color: #64748B; color: #0F172A; }
body:not(.bg-slate-900) .btn-ghost { color: #1E293B; }
body:not(.bg-slate-900) .btn-primary { background: #1D4ED8; }
body:not(.bg-slate-900) .btn-primary:hover { background: #1E40AF; }

/* POS: kategori çipleri, ürün kartı yazıları */
body:not(.bg-slate-900) #app-layout main .min-w-max > button.rounded-lg.text-xs.font-medium { color: #0F172A; border-color: #94A3B8; border-width: 1.5px; font-size: 14px; font-weight: 700; height: 38px; }
body:not(.bg-slate-900) .product-card-btn p.font-medium { font-size: 14px; font-weight: 700; color: #0F172A; }
body:not(.bg-slate-900) .product-card-btn p.font-bold.text-primary { font-size: 16px; font-weight: 800; color: #1D4ED8; }
body:not(.bg-slate-900) .product-card-btn .text-slate-300 { color: #64748B; }
body:not(.bg-slate-900) .product-card-btn .text-amber-500 { color: #B45309; font-weight: 700; }
body:not(.bg-slate-900) .product-card-btn .text-red-400 { color: #B91C1C; font-weight: 700; }

/* Masa kartları */
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group.bg-gray-500\/10 { border-color: #94A3B8; border-width: 1.5px; color: #0F172A; }
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group.bg-green-900 { background: linear-gradient(140deg, #059669, #047857); }
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group.bg-amber-500\/10 { background: #FDE68A; border-color: #B45309; color: #78350F; }
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > span.font-bold.text-2xl { font-weight: 800; }

/* Sipariş paneli kökü zaten koyulaştırıldı (Bölüm 14); ürün alanı zemini */
body:not(.bg-slate-900) .rounded-2xl.shadow-2xl .overflow-y-auto.p-2\.5.bg-slate-50 { background: #EEF2F7; }

/* Uyarı bantları */
body:not(.bg-slate-900) #app-layout main > .bg-green-50 { color: #065F46; border-color: #6EE7B7; font-weight: 600; }
body:not(.bg-slate-900) #app-layout main > .bg-red-50 { color: #991B1B; border-color: #FCA5A5; font-weight: 600; }

/* DataTables alt/üst yazıları */
body:not(.bg-slate-900) .dataTables_wrapper .dataTables_info,
body:not(.bg-slate-900) .dataTables_wrapper .dataTables_length label,
body:not(.bg-slate-900) .dataTables_wrapper .dataTables_filter label { color: #1E293B; font-weight: 600; }

/* Giriş ekranı */
body:not(.bg-slate-900) > .min-h-screen.flex .max-w-md p.text-slate-500,
body:not(.bg-slate-900) > .min-h-screen.flex .text-slate-500 { color: #1E293B; }

/* ---------------------------------------------------------------------
   16. BOYUT OPTİMİZASYONU — koyulaştırmayla dengeli, bir kademe büyük ölçek
   --------------------------------------------------------------------- */
body:not(.bg-slate-900) { font-size: 16px; }
body:not(.bg-slate-900) .text-\[10px\],
body:not(.bg-slate-900) .text-\[11px\] { font-size: 12px; }
body:not(.bg-slate-900) .text-xs   { font-size: 13.5px; line-height: 1.4; }
body:not(.bg-slate-900) .text-sm   { font-size: 15px;   line-height: 1.45; }
body:not(.bg-slate-900) .text-base { font-size: 16px;   line-height: 1.5; }
body:not(.bg-slate-900) .text-lg   { font-size: 18px; }
body:not(.bg-slate-900) .text-xl   { font-size: 21px; }
body:not(.bg-slate-900) .text-2xl  { font-size: 27px; }
body:not(.bg-slate-900) .text-3xl  { font-size: 32px; }
body:not(.bg-slate-900) .badge,
body:not(.bg-slate-900) span.text-xs.rounded-full,
body:not(.bg-slate-900) span.text-xs.rounded,
body:not(.bg-slate-900) span.text-xs.rounded-md,
body:not(.bg-slate-900) span.text-xs.rounded-lg,
body:not(.bg-slate-900) div.text-xs.rounded-full { font-size: 12.5px; height: 26px; padding: 0 10px; }

/* Kabuk */
body:not(.bg-slate-900) #main-sidebar nav > a,
body:not(.bg-slate-900) #mobile-sidebar nav > a { font-size: 15.5px; padding: 11px 12px; }
body:not(.bg-slate-900) #main-sidebar nav > a svg,
body:not(.bg-slate-900) #mobile-sidebar nav > a svg { width: 20px; height: 20px; }
body:not(.bg-slate-900) #main-sidebar > div:first-child span.font-bricolage,
body:not(.bg-slate-900) #mobile-sidebar > div:first-child span.font-bricolage { font-size: 16px; }
body:not(.bg-slate-900) #app-layout > div > header h1 { font-size: 19px; }
body:not(.bg-slate-900) #app-layout > div > header h1 + p { font-size: 13px; }
body:not(.bg-slate-900) #app-layout main h1.text-2xl { font-size: 27px; }
@media (min-width: 900px) { body:not(.bg-slate-900) #app-layout main h1.text-2xl { font-size: 29px; } }
body:not(.bg-slate-900) .card-title,
body:not(.bg-slate-900) #app-layout main h3.font-semibold { font-size: 17px; }

/* Form ve buton */
body:not(.bg-slate-900) .form-input, body:not(.bg-slate-900) .form-select, body:not(.bg-slate-900) .form-textarea { font-size: 16px; min-height: 48px; }
body:not(.bg-slate-900) .form-input.h-9, body:not(.bg-slate-900) .form-select.h-9 { height: 42px; min-height: 42px; font-size: 14.5px; }
body:not(.bg-slate-900) .form-label { font-size: 14px; }
body:not(.bg-slate-900) .btn { height: 48px; font-size: 15.5px; }
body:not(.bg-slate-900) .btn-sm { height: 38px; font-size: 14px; }
body:not(.bg-slate-900) .btn-lg { height: 54px; font-size: 16.5px; }

/* Tablo */
body:not(.bg-slate-900) .table { font-size: 14.5px; }
body:not(.bg-slate-900) .table th { font-size: 13px; padding: 12px 16px; }
body:not(.bg-slate-900) .table td { padding: 13px 16px; }

/* Dashboard menü kutuları */
body:not(.bg-slate-900) .card .grid > a.flex.flex-col.items-center.rounded-lg.p-3 > span { font-size: 16px; font-weight: 700; }
body:not(.bg-slate-900) .card .grid > a.flex.flex-col.items-center.rounded-lg.p-3 > svg { width: 46px; height: 46px; padding: 11px; }

/* KPI */
body:not(.bg-slate-900) .card.p-4.text-center > .text-xs { font-size: 12px; }
body:not(.bg-slate-900) .card.p-4.text-center > .text-xl { font-size: 24px; font-weight: 800; }

/* POS */
body:not(.bg-slate-900) #app-layout main .min-w-max > button.rounded-lg.text-xs.font-medium { height: 40px; font-size: 14.5px; padding: 0 16px; }
body:not(.bg-slate-900) .product-card-btn p.font-medium { font-size: 14.5px; }
body:not(.bg-slate-900) .product-card-btn p.font-bold.text-primary { font-size: 17px; }

/* Masa kartları */
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > span.font-bold.text-2xl { font-size: 24px; }
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > span.font-bold.text-lg { font-size: 22px; }
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > span.font-bold.text-sm { font-size: 16px; }
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > .-top-2.rounded-full { font-size: 12px; }
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > .absolute.bottom-1 span { font-size: 11px !important; font-weight: 700; opacity: .9; }

/* Mobil alt sekme */
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 a svg,
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 button svg { width: 24px; height: 24px; }
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 a span,
body:not(.bg-slate-900) #app-layout > nav.fixed.bottom-0 button span { font-size: 12px; }

/* ---------------------------------------------------------------------
   17. KİOSK — serkangonenir KOYU paleti (html[data-theme=dark] tokenları)
   Kiosk müşteri/garson ekranı koyu kalır; siyah yerine lacivert yüzeyler,
   #4F86F7 mavi, #22304C kenarlıklar. Sipariş paneli (Bölüm 13–14) kiosk
   içinde açık ve yüksek kontrastlı görünür.
   --------------------------------------------------------------------- */
body.bg-slate-900 {
  --k-bg: #0B1220; --k-surface: #131C2E; --k-surface-2: #162034; --k-surface-3: #1B2740;
  --k-border: #22304C; --k-border-strong: #2E3E5E;
  --k-text-1: #E8EDF6; --k-text-2: #A3B0C4; --k-text-3: #8A98B4;
  --k-primary: #4F86F7; --k-primary-hover: #6D9CFA; --k-primary-soft: #16233E;
  --k-success: #34D399; --k-warning: #FBBF24; --k-danger: #F87171;
  --k-shadow: 0 2px 6px rgba(0,0,0,.34), 0 16px 40px rgba(0,0,0,.44);
  background: var(--k-bg); color: var(--k-text-1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.bg-slate-900 *:not(.font-mono):not(svg):not(path) { font-family: inherit; }
body.bg-slate-900 .font-mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
body.bg-slate-900 #kioskApp { background: var(--k-bg) !important; }

/* Üst bar */
body.bg-slate-900 #kioskApp > div:first-child {
  background: var(--k-surface) !important; border-bottom: 1px solid var(--k-border); padding: 12px 20px; min-height: 60px;
}
body.bg-slate-900 #kioskApp > div:first-child p.text-2xl { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
body.bg-slate-900 #kioskApp .text-slate-400 { color: var(--k-text-2); }
body.bg-slate-900 #kioskApp .text-slate-300 { color: var(--k-text-1); }
body.bg-slate-900 #kioskApp .text-xs { font-size: 13px; font-weight: 600; }
body.bg-slate-900 #kioskApp .text-sm { font-size: 15px; }
body.bg-slate-900 #kioskApp .bg-green-400 { background: var(--k-success); }
body.bg-slate-900 #kioskApp > div:first-child a.rounded-lg {
  height: 38px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  background: var(--k-surface-3); border: 1px solid var(--k-border-strong); color: var(--k-text-1);
}
body.bg-slate-900 #kioskApp > div:first-child a.rounded-lg:hover { background: var(--k-danger); border-color: var(--k-danger); color: #fff; }

/* Bölüm filtresi → chip-filter (koyu) */
body.bg-slate-900 #kioskApp .scrollbar-hide { background: var(--k-bg) !important; padding: 10px 20px; gap: 8px; }
body.bg-slate-900 #kioskApp .scrollbar-hide > button {
  height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
  background: var(--k-surface); color: var(--k-text-2); border: 1px solid var(--k-border-strong);
}
body.bg-slate-900 #kioskApp .scrollbar-hide > button:hover { color: var(--k-text-1); background: var(--k-surface-3); }
body.bg-slate-900 #kioskApp .scrollbar-hide > button.bg-indigo-500 { background: var(--k-text-1); color: var(--k-bg); border-color: var(--k-text-1); }

/* Masa kartları */
body.bg-slate-900 #kioskApp .h-full.w-full.grid { gap: 12px !important; }
body.bg-slate-900 #kioskApp .h-full.w-full.grid > button {
  border-radius: 16px; border-width: 1px; box-shadow: var(--k-shadow);
  font-weight: 800; letter-spacing: -.01em;
  transition: transform .14s cubic-bezier(.22,.61,.36,1), box-shadow .24s, border-color .24s, filter .14s;
}
body.bg-slate-900 #kioskApp .h-full.w-full.grid > button:hover { filter: none; transform: translateY(-2px); border-color: var(--k-text-3); }
body.bg-slate-900 #kioskApp .h-full.w-full.grid > button:active { transform: scale(.975); }
body.bg-slate-900 #kioskApp .h-full.w-full.grid > button .opacity-60 { opacity: .9; font-weight: 600; }
body.bg-slate-900 #kioskApp .h-full.w-full.grid > button .opacity-50 { opacity: .85; font-weight: 600; }
/* boş */
body.bg-slate-900 #kioskApp .h-full.w-full.grid > button.bg-gray-500\/10 { background: var(--k-surface); border-color: var(--k-border-strong); color: var(--k-text-1); }
body.bg-slate-900 #kioskApp .h-full.w-full.grid > button.bg-gray-500\/10 .bg-gray-400 { background: var(--k-text-3); }
/* hazır */
body.bg-slate-900 #kioskApp .h-full.w-full.grid > button.bg-amber-500\/10 { background: #2C2410; border-color: var(--k-warning); color: var(--k-warning); }
/* dolu (view içi <style> !important'ı özgüllükle ezilir) */
body.bg-slate-900 #kioskApp .h-full.w-full.grid > button.bg-green-900 {
  background: linear-gradient(140deg, #059669, #047857) !important; border-color: #10B981; color: #fff;
  box-shadow: 0 8px 22px rgba(16,185,129,.28), var(--k-shadow);
}
body.bg-slate-900 #kioskApp .h-full.w-full.grid > button span[style*="border-radius:20px"] {
  font-size: 15px !important; font-weight: 800 !important; padding: 2px 10px; border-radius: 999px !important;
}
body.bg-slate-900 #kioskApp .text-indigo-400 { color: var(--k-primary); }

/* PIN modalı */
body.bg-slate-900 #kioskApp .rounded-3xl.shadow-2xl {
  background: var(--k-surface) !important; border: 1px solid var(--k-border); border-radius: 22px; box-shadow: 0 12px 48px rgba(0,0,0,.55);
}
body.bg-slate-900 #kioskApp .rounded-3xl.shadow-2xl h2 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
body.bg-slate-900 #kioskApp .rounded-3xl.shadow-2xl .bg-indigo-500\/20 { background: var(--k-primary-soft); border: 1px solid var(--k-border-strong); }
body.bg-slate-900 #kioskApp .rounded-3xl.shadow-2xl .text-indigo-300 { color: var(--k-primary); }
body.bg-slate-900 #kioskApp .rounded-3xl.shadow-2xl .w-12.h-12.rounded-xl { width: 52px; height: 52px; border-radius: 14px; }
body.bg-slate-900 #kioskApp .rounded-3xl.shadow-2xl .w-12.h-12.rounded-xl.border-slate-600 { border-color: var(--k-border-strong); background: var(--k-surface-3); }
body.bg-slate-900 #kioskApp .rounded-3xl.shadow-2xl .w-12.h-12.rounded-xl.border-indigo-400 { border-color: var(--k-primary); background: var(--k-primary-soft); }
body.bg-slate-900 #kioskApp .rounded-3xl.shadow-2xl .grid-cols-3 > button {
  height: 60px; border-radius: 14px; font-size: 22px; font-weight: 700;
  background: var(--k-surface-3); color: var(--k-text-1); border: 1px solid var(--k-border);
}
body.bg-slate-900 #kioskApp .rounded-3xl.shadow-2xl .grid-cols-3 > button:hover { background: var(--k-border); }
body.bg-slate-900 #kioskApp .rounded-3xl.shadow-2xl .grid-cols-3 > button.bg-slate-600 { background: var(--k-border-strong); }
body.bg-slate-900 #kioskApp .rounded-3xl.shadow-2xl .grid-cols-3 > button.bg-indigo-500 { background: var(--k-primary); border-color: var(--k-primary); color: #fff; box-shadow: 0 4px 14px rgba(79,134,247,.35); }
body.bg-slate-900 #kioskApp .rounded-3xl.shadow-2xl .grid-cols-3 > button.bg-indigo-500:hover { background: var(--k-primary-hover); }
body.bg-slate-900 #kioskApp .rounded-3xl.shadow-2xl .bg-red-500\/20 { background: #2E1717; border-color: #7F1D1D; }
body.bg-slate-900 #kioskApp .rounded-3xl.shadow-2xl .text-red-400 { color: var(--k-danger); font-weight: 600; }
body.bg-slate-900 #kioskApp .rounded-3xl.shadow-2xl .px-6.pb-6 > button.bg-slate-700,
body.bg-slate-900 #kioskApp .rounded-2xl.shadow-2xl button.bg-slate-700 {
  height: 48px; padding: 0; border-radius: 12px; font-size: 15px; font-weight: 600;
  background: var(--k-surface-3); color: var(--k-text-1); border: 1px solid var(--k-border-strong);
}

/* Onay diyaloğu */
body.bg-slate-900 #kioskApp .bg-slate-800.border.rounded-2xl {
  background: var(--k-surface); border-color: var(--k-border); border-radius: 22px; box-shadow: 0 12px 48px rgba(0,0,0,.55);
}
body.bg-slate-900 #kioskApp .bg-slate-800.border.rounded-2xl h3 { font-size: 19px; font-weight: 700; }
body.bg-slate-900 #kioskApp .bg-slate-800.border.rounded-2xl p { font-size: 15px; color: var(--k-text-2); }
body.bg-slate-900 #kioskApp .bg-slate-800.border.rounded-2xl button { height: 48px; padding: 0; border-radius: 12px; font-size: 15px; font-weight: 700; }
body.bg-slate-900 #kioskApp .bg-slate-800.border.rounded-2xl button.bg-indigo-600 { background: var(--k-primary); }
body.bg-slate-900 #kioskApp .bg-slate-800.border.rounded-2xl button.bg-red-600 { background: #DC2626; }
body.bg-slate-900 #kioskApp .bg-slate-800.border.rounded-2xl .bg-indigo-500\/20 { background: var(--k-primary-soft); }
body.bg-slate-900 #kioskApp .bg-slate-800.border.rounded-2xl .bg-red-500\/20 { background: #2E1717; }
body.bg-slate-900 #kioskApp .bg-black\/80, body.bg-slate-900 #kioskApp .bg-black\/70, body.bg-slate-900 #kioskApp .bg-black\/60 { background: rgba(4,8,16,.72); }

/* Kiosk içindeki sipariş paneli: açık zemin, koyu metin (body'nin beyaz yazısını devralmasın) */
body.bg-slate-900 .bg-white.shadow-2xl.z-10 { color: #0F172A; border-radius: 22px; border: 1px solid var(--k-border-strong); }
body.bg-slate-900 .bg-white.shadow-2xl.z-10 .text-slate-400 { color: #475569; }
body.bg-slate-900 .bg-white.shadow-2xl.z-10 .text-slate-500 { color: #1E293B; }
body.bg-slate-900 .bg-white.shadow-2xl.z-10 .text-slate-300 { color: #64748B; }
body.bg-slate-900 .bg-white.shadow-2xl.z-10 .bg-slate-50 { background: #F8FAFC; }
body.bg-slate-900 .bg-white.shadow-2xl.z-10 .border-slate-100,
body.bg-slate-900 .bg-white.shadow-2xl.z-10 .border-slate-200 { border-color: #C3CCD9; }
body.bg-slate-900 .bg-white.shadow-2xl.z-10 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 10px; font-size: 15.5px; font-weight: 700; }
body.bg-slate-900 .bg-white.shadow-2xl.z-10 .btn-primary { background: #1D4ED8; color: #fff; }
body.bg-slate-900 .bg-white.shadow-2xl.z-10 .text-emerald-600 { color: #047857; }
body.bg-slate-900 .bg-white.shadow-2xl.z-10 .text-amber-600 { color: #B45309; }

/* Kiosk içindeki panel başlığı (lacivert şerit): metinler açık kalır — Bölüm 17 koyu-metin kuralını ezer */
body.bg-slate-900 .bg-white.shadow-2xl.z-10 .bg-\[\#0d1117\] .text-slate-500,
body.bg-slate-900 .bg-white.shadow-2xl.z-10 .bg-\[\#0d1117\] .text-slate-500.italic,
body.bg-slate-900 .bg-white.shadow-2xl.z-10 .bg-\[\#0d1117\] .text-slate-400 { color: rgba(255,255,255,.88); }
body.bg-slate-900 .bg-white.shadow-2xl.z-10 .bg-\[\#0d1117\] .bg-slate-800 { color: #fff; background: rgba(255,255,255,.14); }
body.bg-slate-900 .bg-white.shadow-2xl.z-10 .bg-\[\#0d1117\] .text-white { color: #fff; }
body.bg-slate-900 .bg-white.shadow-2xl.z-10 .bg-\[\#0d1117\] .text-amber-300 { color: #FCD34D; }
/* Ana uygulamadaki panel başlığı da aynı parlaklıkta */
body .bg-\[\#0d1117\] .text-slate-500, body .bg-\[\#0d1117\] .text-slate-400 { color: rgba(255,255,255,.88); }
body .bg-\[\#0d1117\] .bg-slate-800 { color: #fff; background: rgba(255,255,255,.14); }

/* ---------------------------------------------------------------------
   18. DENETİM DÜZELTMELERİ (kontrast < 4.5 veya yazı < 12px çıkan yerler)
   --------------------------------------------------------------------- */
/* Yan menü grup başlıkları 11.5 → 12.5px */
body:not(.bg-slate-900) #main-sidebar nav p.uppercase,
body:not(.bg-slate-900) #mobile-sidebar nav p.uppercase { font-size: 12.5px; color: #334155; }
/* Masa kartı: garson adı ve kalem rozeti */
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > .absolute.bottom-1 span { font-size: 12px !important; opacity: 1; }
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > .absolute.bottom-1 svg { opacity: 1; }
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group.bg-green-900 { background: linear-gradient(140deg, #047857, #065F46); }
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > .-bottom-2.rounded-full { width: 24px; height: 24px; font-size: 12px; }
/* Kiosk masa kartı: dolu → daha koyu yeşil, yazılar tam opak */
body.bg-slate-900 #kioskApp .h-full.w-full.grid > button.bg-green-900 { background: linear-gradient(140deg, #047857, #065F46) !important; }
body.bg-slate-900 #kioskApp .h-full.w-full.grid > button .opacity-60,
body.bg-slate-900 #kioskApp .h-full.w-full.grid > button .opacity-50 { opacity: 1; }
body.bg-slate-900 #kioskApp .rounded-3xl.shadow-2xl .grid-cols-3 > button.bg-indigo-500 { background: #2563EB; border-color: #2563EB; }
/* POS: sepet boş yazısı (slate-200 beyaz üstünde görünmezdi), yıldız, harf yer tutucu */
body:not(.bg-slate-900) .text-slate-200 { color: #475569; }
body:not(.bg-slate-900) .bg-amber-400 { background-color: #B45309; }
body:not(.bg-slate-900) .product-card-btn .opacity-40,
body:not(.bg-slate-900) .product-card .opacity-40 { opacity: .85; }
/* Genel: opacity-60/50 ile soluklaştırılmış metinler */
body:not(.bg-slate-900) .opacity-60 { opacity: .85; }
body:not(.bg-slate-900) .opacity-50 { opacity: .8; }
body:not(.bg-slate-900) .opacity-40 { opacity: .75; }
body:not(.bg-slate-900) .opacity-30 { opacity: .65; }
/* Renkli tutarlar */
body:not(.bg-slate-900) .text-rose-600, body:not(.bg-slate-900) .text-rose-500 { color: #BE123C; }
body:not(.bg-slate-900) .text-amber-600, body:not(.bg-slate-900) .text-amber-500 { color: #92400E; }
body:not(.bg-slate-900) .text-orange-600, body:not(.bg-slate-900) .text-orange-500 { color: #9A3412; }
body:not(.bg-slate-900) [style*="color:red"], body:not(.bg-slate-900) [style*="color: red"] { -webkit-text-fill-color: #B91C1C; }
/* Ayarlar canlı önizleme kartı */
body:not(.bg-slate-900) .text-white\/70 { color: rgba(255,255,255,.92); }
body:not(.bg-slate-900) .text-white\/80 { color: rgba(255,255,255,.95); }
/* Pasif rozet / pasif kart (opacity ile soluklaştırılan) */
body:not(.bg-slate-900) .badge.bg-slate-100.text-slate-500 { color: #1E293B; background: #CBD5E1; }
/* Kategori harf kutusu (tenant rengi zemin, beyaz harf) → kalın + gölge */
body:not(.bg-slate-900) .w-9.h-9.rounded-xl[style*="background"] { font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
/* Siparişler: 11px etiketler */
body:not(.bg-slate-900) .text-\[11px\], body:not(.bg-slate-900) .text-\[10px\], body:not(.bg-slate-900) .text-\[9px\] { font-size: 12px; }

/* ---------------------------------------------------------------------
   19. ADMİN PANELİ (layouts/admin.php — super_admin, koyu)
   serkangonenir koyu paleti: #0B1220 / #131C2E / #22304C / #4F86F7
   --------------------------------------------------------------------- */
html[data-theme="dark"] body.bg-slate-900.text-slate-100 {
  --a-bg: #0B1220; --a-surface: #131C2E; --a-surface-2: #162034; --a-surface-3: #1B2740;
  --a-border: #22304C; --a-border-strong: #2E3E5E;
  --a-text-1: #E8EDF6; --a-text-2: #B4BFD2; --a-text-3: #8A98B4;
  --a-primary: #4F86F7; --a-primary-hover: #6D9CFA; --a-primary-soft: #16233E;
  background: var(--a-bg); color: var(--a-text-1); font-size: 15px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased;
}
html[data-theme="dark"] body.bg-slate-900 .font-dm-sans,
html[data-theme="dark"] body.bg-slate-900 .font-bricolage { font-family: inherit; }
/* Yan menü */
html[data-theme="dark"] body.bg-slate-900 aside.w-60 { width: 260px; background: var(--a-surface); border-color: var(--a-border); padding: 20px 16px 0; }
html[data-theme="dark"] body.bg-slate-900 aside.w-60 > div:first-child { padding: 0 8px 20px; border: 0; gap: 10px; }
html[data-theme="dark"] body.bg-slate-900 aside.w-60 .w-7.h-7.bg-indigo-600 {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(140deg, var(--a-primary), #E5B93C); box-shadow: 0 6px 18px rgba(79,134,247,.28);
}
html[data-theme="dark"] body.bg-slate-900 aside.w-60 > div:first-child p.text-sm { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
html[data-theme="dark"] body.bg-slate-900 aside.w-60 > div:first-child p.text-xs { font-size: 11.5px; color: var(--a-text-3); }
html[data-theme="dark"] body.bg-slate-900 aside.w-60 nav { padding: 0; }
html[data-theme="dark"] body.bg-slate-900 aside.w-60 nav > a {
  padding: 10px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--a-text-2);
}
html[data-theme="dark"] body.bg-slate-900 aside.w-60 nav > a:hover { background: var(--a-surface-3); color: var(--a-text-1); }
html[data-theme="dark"] body.bg-slate-900 aside.w-60 nav > a.bg-indigo-600 { background: var(--a-primary-soft); color: var(--a-primary); font-weight: 600; }
html[data-theme="dark"] body.bg-slate-900 aside.w-60 > div.border-t { margin: 0 -16px; padding: 12px 16px; border-color: var(--a-border); }
html[data-theme="dark"] body.bg-slate-900 aside.w-60 > div.border-t a { border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--a-text-2); }
html[data-theme="dark"] body.bg-slate-900 aside.w-60 > div.border-t a:hover { background: var(--a-surface-3); color: var(--a-text-1); }
html[data-theme="dark"] body.bg-slate-900 aside.w-60 > div.border-t a.text-red-400 { color: #F87171; }
/* Üst çubuk */
html[data-theme="dark"] body.bg-slate-900 header.h-14 { height: 60px; background: var(--a-surface); border-color: var(--a-border); padding: 0 24px; }
html[data-theme="dark"] body.bg-slate-900 header.h-14 h1 { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
html[data-theme="dark"] body.bg-slate-900 header.h-14 .bg-indigo-900 { background: var(--a-primary-soft); color: var(--a-primary); font-weight: 600; border: 1px solid var(--a-border-strong); }
/* İçerik */
html[data-theme="dark"] body.bg-slate-900 main.overflow-y-auto { padding: 24px max(24px, calc((100% - 1200px) / 2)) 40px; }
html[data-theme="dark"] body.bg-slate-900 .bg-slate-800.border.rounded-xl,
html[data-theme="dark"] body.bg-slate-900 .bg-slate-800.rounded-xl {
  background: var(--a-surface); border-color: var(--a-border); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.32);
}
html[data-theme="dark"] body.bg-slate-900 .bg-slate-700\/40 { background: var(--a-surface-3); border-radius: 10px; }
html[data-theme="dark"] body.bg-slate-900 .divide-slate-700\/50 > :not([hidden]) ~ :not([hidden]) { border-color: var(--a-border); }
html[data-theme="dark"] body.bg-slate-900 .border-slate-700 { border-color: var(--a-border); }
html[data-theme="dark"] body.bg-slate-900 .border-slate-800 { border-color: var(--a-border); }
html[data-theme="dark"] body.bg-slate-900 .text-slate-400 { color: var(--a-text-2); }
html[data-theme="dark"] body.bg-slate-900 .text-slate-500 { color: var(--a-text-3); }
html[data-theme="dark"] body.bg-slate-900 .text-slate-300 { color: var(--a-text-1); }
html[data-theme="dark"] body.bg-slate-900 .text-indigo-400, html[data-theme="dark"] body.bg-slate-900 .text-indigo-300 { color: var(--a-primary); }
html[data-theme="dark"] body.bg-slate-900 .bg-indigo-900\/50 { background: var(--a-primary-soft); }
html[data-theme="dark"] body.bg-slate-900 .text-xs { font-size: 13px; }
html[data-theme="dark"] body.bg-slate-900 .text-sm { font-size: 14.5px; }
html[data-theme="dark"] body.bg-slate-900 .text-xl { font-size: 22px; letter-spacing: -.02em; }
/* Tablo */
html[data-theme="dark"] body.bg-slate-900 th.text-xs.uppercase { font-size: 12px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--a-text-2); background: var(--a-surface-2); padding: 11px 16px; }
html[data-theme="dark"] body.bg-slate-900 td.px-4.py-3 { padding: 12px 16px; }
html[data-theme="dark"] body.bg-slate-900 tbody tr:hover { background: var(--a-surface-2); }
/* Form ve butonlar */
html[data-theme="dark"] body.bg-slate-900 .bg-slate-700.border.rounded-lg,
html[data-theme="dark"] body.bg-slate-900 select.bg-slate-700, html[data-theme="dark"] body.bg-slate-900 input.bg-slate-700 {
  background: var(--a-surface-3); border: 1.5px solid var(--a-border-strong); border-radius: 10px; min-height: 44px; font-size: 15px; color: var(--a-text-1);
}
html[data-theme="dark"] body.bg-slate-900 .bg-slate-700.border.rounded-lg:focus { border-color: var(--a-primary); box-shadow: 0 0 0 4px rgba(79,134,247,.28); --tw-ring-shadow: 0 0 #0000; }
html[data-theme="dark"] body.bg-slate-900 label.text-xs.font-medium { font-size: 13px; font-weight: 600; color: var(--a-text-2); margin-bottom: 6px; }
html[data-theme="dark"] body.bg-slate-900 button.bg-indigo-600, html[data-theme="dark"] body.bg-slate-900 a.bg-indigo-600 {
  background: var(--a-primary); border-radius: 10px; height: 44px; font-weight: 650; font-size: 14.5px; box-shadow: 0 4px 14px rgba(79,134,247,.28);
}
html[data-theme="dark"] body.bg-slate-900 button.bg-indigo-600:hover { background: var(--a-primary-hover); }
html[data-theme="dark"] body.bg-slate-900 button.bg-slate-700, html[data-theme="dark"] body.bg-slate-900 a.bg-slate-700 {
  background: var(--a-surface-3); border: 1px solid var(--a-border-strong); border-radius: 10px; height: 44px; font-weight: 600; font-size: 14.5px; color: var(--a-text-1);
}
html[data-theme="dark"] body.bg-slate-900 button.bg-slate-700:hover { background: var(--a-border); }
html[data-theme="dark"] body.bg-slate-900 .rounded-full.text-xs { font-weight: 650; }
html[data-theme="dark"] body.bg-slate-900 .bg-green-900\/30 { background: #10291F; border-color: #065F46; color: #34D399; border-radius: 16px; }
html[data-theme="dark"] body.bg-slate-900 .bg-red-900\/30 { background: #2E1717; border-color: #7F1D1D; color: #F87171; border-radius: 16px; }
html[data-theme="dark"] body.bg-slate-900 .bg-black\/60 { background: rgba(4,8,16,.72); }
html[data-theme="dark"] body.bg-slate-900 .fixed .bg-slate-800 { border-radius: 22px; box-shadow: 0 12px 48px rgba(0,0,0,.55); }
/* Admin kaydırma çubuğu */
html[data-theme="dark"] body.bg-slate-900 ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] body.bg-slate-900 ::-webkit-scrollbar-thumb { background: var(--a-border-strong); border-radius: 99px; border: 3px solid var(--a-bg); }

/* ---------------------------------------------------------------------
   20. QR MENÜ (layouts/menu.php — müşteri telefonu)
   İşletmenin seçtiği tema (dark/elegant/colorful/bistro) ve renkleri korunur;
   varsayılan/minimal temada serkangonenir kart dili + Inter + okunur ölçek.
   --------------------------------------------------------------------- */
body[class^="theme-"] { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
body[class^="theme-"]:not(.theme-dark):not(.theme-elegant):not(.theme-colorful):not(.theme-bistro) {
  --c-surface: #F6F8FB;
  --c-border: #C3CCD9;
  --c-muted: #1E293B;
  --c-card-bg: #FFFFFF;
  --c-card-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08), 0 0 0 1px #C3CCD9;
  --radius-card: 16px;
  --c-bg: #EEF2F7;
}
body[class^="theme-"] .menu-header__title { font-weight: 800; letter-spacing: -.02em; text-shadow: 0 1px 3px rgba(0,0,0,.25); }
body[class^="theme-"] .menu-header__desc { font-weight: 500; opacity: 1; }
body[class^="theme-"] .menu-search__input { min-height: 48px; font-size: 16px; font-weight: 500; border-width: 1.5px; }
body[class^="theme-"] .cat-pill { height: 40px; font-size: 14.5px; font-weight: 700; }
body[class^="theme-"] .section-header__name { font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
body[class^="theme-"] .section-header__count { font-size: 12.5px; font-weight: 700; }
body[class^="theme-"] .product-card__name { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
body[class^="theme-"] .product-card__desc { font-size: 13.5px; font-weight: 500; }
body[class^="theme-"] .product-card__price { font-size: 17px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body[class^="theme-"] .modal-sheet__name { font-size: 20px; font-weight: 800; }
body[class^="theme-"] .modal-sheet__price { font-size: 22px; font-weight: 800; }
body[class^="theme-"] .modal-sheet__desc { font-size: 15px; }
body[class^="theme-"] .wifi-card__pass { font-size: 15px; font-weight: 700; }
body[class^="theme-"] .menu-footer__brand { opacity: 1; font-size: 13px; font-weight: 600; }
body[class^="theme-"] .no-results { font-size: 15px; font-weight: 600; }
/* Admin yan menü ikonları: w-4.5 geçerli Tailwind sınıfı değil, ikon ölçüsüz kalıyordu */
html[data-theme="dark"] body.bg-slate-900 aside.w-60 nav > a svg { width: 19px; height: 19px; flex-shrink: 0; }
html[data-theme="dark"] body.bg-slate-900 aside.w-60 > div.border-t a svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Admin denetim düzeltmeleri */
html[data-theme="dark"] body.bg-slate-900 .text-slate-600, html[data-theme="dark"] body.bg-slate-900 .text-slate-700 { color: var(--a-text-3); }
html[data-theme="dark"] body.bg-slate-900 .text-red-500, html[data-theme="dark"] body.bg-slate-900 .text-red-400 { color: #FCA5A5; }
html[data-theme="dark"] body.bg-slate-900 .text-green-400, html[data-theme="dark"] body.bg-slate-900 .text-emerald-400 { color: #6EE7B7; }
html[data-theme="dark"] body.bg-slate-900 .text-amber-400, html[data-theme="dark"] body.bg-slate-900 .text-yellow-400 { color: #FCD34D; }
html[data-theme="dark"] body.bg-slate-900 button.bg-indigo-600, html[data-theme="dark"] body.bg-slate-900 a.bg-indigo-600 { background: #2563EB; }
html[data-theme="dark"] body.bg-slate-900 button.bg-indigo-600:hover, html[data-theme="dark"] body.bg-slate-900 a.bg-indigo-600:hover { background: #1D4ED8; }
html[data-theme="dark"] body.bg-slate-900 aside.w-60 > div:first-child p.text-xs { font-size: 12.5px; color: var(--a-text-2); }
html[data-theme="dark"] body.bg-slate-900 .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #2563EB; border-color: #2563EB; }
html[data-theme="dark"] body.bg-slate-900 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .6; }
html[data-theme="dark"] body.bg-slate-900 .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] body.bg-slate-900 .dataTables_wrapper .dataTables_length label,
html[data-theme="dark"] body.bg-slate-900 .dataTables_wrapper .dataTables_filter label { color: var(--a-text-2); }

/* ---------------------------------------------------------------------
   21. İNCE / KÜÇÜK YAZI YOK — taban: min 14px, min 500 ağırlık
   Düşük kaliteli monitörlerde 400 ağırlık ve 13px altı metin kayboluyor.
   --------------------------------------------------------------------- */
body:not(.bg-slate-900) { font-weight: 500; }
body:not(.bg-slate-900) .font-normal, body:not(.bg-slate-900) .font-light, body:not(.bg-slate-900) .font-thin { font-weight: 500; }
body:not(.bg-slate-900) .font-medium { font-weight: 600; }
body:not(.bg-slate-900) .italic { font-style: normal; font-weight: 500; }

/* Yazı ölçeği tabanı yükseldi */
body:not(.bg-slate-900) .text-\[9px\], body:not(.bg-slate-900) .text-\[10px\], body:not(.bg-slate-900) .text-\[11px\] { font-size: 13px; font-weight: 600; }
body:not(.bg-slate-900) .text-xs   { font-size: 14px;   line-height: 1.4;  font-weight: 500; }
body:not(.bg-slate-900) .text-sm   { font-size: 15.5px; line-height: 1.45; }
body:not(.bg-slate-900) .text-base { font-size: 16.5px; }
body:not(.bg-slate-900) .text-xs.font-semibold, body:not(.bg-slate-900) .text-xs.font-bold { font-weight: 700; }

/* Soluk metin sınıfları → koyu */
body:not(.bg-slate-900) .text-slate-400 { color: #334155; font-weight: 500; }
body:not(.bg-slate-900) .text-slate-300 { color: #475569; font-weight: 500; }
body:not(.bg-slate-900) .text-slate-500, body:not(.bg-slate-900) .text-slate-600 { color: #1E293B; }
body:not(.bg-slate-900) .text-gray-400, body:not(.bg-slate-900) .text-gray-500 { color: #334155; }

/* Rozetler / pill'ler: 13px kalın, 28px yüksek */
body:not(.bg-slate-900) .badge,
body:not(.bg-slate-900) span.text-xs.rounded-full,
body:not(.bg-slate-900) span.text-xs.rounded,
body:not(.bg-slate-900) span.text-xs.rounded-md,
body:not(.bg-slate-900) span.text-xs.rounded-lg,
body:not(.bg-slate-900) div.text-xs.rounded-full { font-size: 13px; font-weight: 700; height: 28px; padding: 0 11px; line-height: 28px; }
body:not(.bg-slate-900) .badge svg { width: 14px; height: 14px; }

/* Tablo hücreleri */
body:not(.bg-slate-900) .table { font-size: 15.5px; }
body:not(.bg-slate-900) .table td { font-size: 15.5px; font-weight: 500; padding: 14px 16px; }
body:not(.bg-slate-900) .table th,
body:not(.bg-slate-900) table thead th.uppercase,
body:not(.bg-slate-900) table thead th.text-xs { font-size: 14px; font-weight: 700; }
body:not(.bg-slate-900) .table td .text-xs, body:not(.bg-slate-900) table td .text-xs { font-size: 14px; font-weight: 500; color: #334155; }
body:not(.bg-slate-900) .table td .font-medium, body:not(.bg-slate-900) table td .font-medium { font-weight: 700; }

/* Kart alt yazıları, form ipuçları */
body:not(.bg-slate-900) .form-hint, body:not(.bg-slate-900) .form-error { font-size: 13.5px; font-weight: 600; }
body:not(.bg-slate-900) .form-label { font-size: 14.5px; }
body:not(.bg-slate-900) .form-input, body:not(.bg-slate-900) .form-select, body:not(.bg-slate-900) .form-textarea { font-weight: 600; }
body:not(.bg-slate-900) .form-input::placeholder, body:not(.bg-slate-900) .form-textarea::placeholder,
body:not(.bg-slate-900) input::placeholder { color: #475569 !important; font-weight: 500; }

/* Yan menü: rol etiketi, şube kutusu, grup başlıkları */
body:not(.bg-slate-900) #main-sidebar > div.border-t p.text-xs,
body:not(.bg-slate-900) #mobile-sidebar > div.border-t p.text-xs { font-size: 13.5px; font-weight: 600; color: #334155; }
body:not(.bg-slate-900) #main-sidebar > div:nth-child(2).border-b > div,
body:not(.bg-slate-900) #mobile-sidebar > div:nth-child(2).border-b > div { font-size: 13.5px; font-weight: 700; color: #1E293B; }
body:not(.bg-slate-900) #main-sidebar nav p.uppercase,
body:not(.bg-slate-900) #mobile-sidebar nav p.uppercase { font-size: 13px; font-weight: 800; color: #334155; }
body:not(.bg-slate-900) #main-sidebar nav > a,
body:not(.bg-slate-900) #mobile-sidebar nav > a { font-weight: 600; }

/* Üst çubuk alt başlık, sayfa alt başlıkları */
body:not(.bg-slate-900) #app-layout > div > header h1 + p { font-size: 14px; font-weight: 600; color: #334155; }
body:not(.bg-slate-900) #app-layout main h1 + p, body:not(.bg-slate-900) #app-layout main h2 + p { font-size: 15px; font-weight: 500; color: #1E293B; }

/* Dashboard hero pil etiketleri */
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .card p.text-sm { font-size: 14px; font-weight: 700; color: #fff; }
body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .card p.text-xs { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.9); }

/* KPI etiketleri */
body:not(.bg-slate-900) .card.p-4.text-center > .text-xs { font-size: 12.5px; font-weight: 800; color: #1E293B; }

/* POS ürün kartı stok yazısı, sepet alt yazıları */
body:not(.bg-slate-900) .product-card-btn p.text-xs { font-size: 13px; font-weight: 600; }
body:not(.bg-slate-900) #app-layout main.p-0 .text-xs { font-weight: 600; }

/* Masa kartı garson adı */
body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > .absolute.bottom-1 span { font-size: 13px !important; font-weight: 700; }

/* Kiosk (koyu): ince yazı yok */
body.bg-slate-900 { font-weight: 500; }
body.bg-slate-900 #kioskApp .text-xs { font-size: 14px; font-weight: 600; }
body.bg-slate-900 #kioskApp .text-sm { font-size: 15.5px; font-weight: 600; }
body.bg-slate-900 #kioskApp .text-slate-400 { color: #C7D0E0; }
body.bg-slate-900 #kioskApp .h-full.w-full.grid > button .opacity-60,
body.bg-slate-900 #kioskApp .h-full.w-full.grid > button .opacity-50 { font-weight: 700; }
/* Admin (koyu) */
html[data-theme="dark"] body.bg-slate-900 .text-xs { font-size: 14px; font-weight: 600; }
html[data-theme="dark"] body.bg-slate-900 .text-sm { font-size: 15.5px; }
html[data-theme="dark"] body.bg-slate-900 .text-slate-400 { color: #C7D0E0; }
html[data-theme="dark"] body.bg-slate-900 .text-slate-500 { color: #A3B0C4; }
/* Sipariş paneli içi zaten kalın; ince kalan birkaç yer */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .text-xs { font-size: 14px; font-weight: 600; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .text-\[10px\],
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .text-\[9px\] { font-size: 13px !important; font-weight: 700; }

/* ---------------------------------------------------------------------
   22. RAPORLAR — Veresiye sipariş listesi tek seferde görünsün
   Ödeme yöntemi panellerinde tablo kutusu max-h-72 (288px) ile kaydırılıyor.
   Veresiye listesi diğerlerinden farklı olarak 6. sütun ("Müşteri") içerir;
   :has() ile yalnızca o kutunun yükseklik sınırı kaldırılır.
   --------------------------------------------------------------------- */
body:not(.bg-slate-900) #app-layout main .max-h-72.overflow-y-auto:has(> table > thead > tr > th:nth-child(6)) {
  max-height: none; overflow-y: visible;
}

/* ---------------------------------------------------------------------
   23. İKONLU GİRDİLER — .form-input padding'i Tailwind pl-*/pr-* sınıflarını
   eziyordu; ikon placeholder üstüne biniyordu. İkon payı geri verilir.
   --------------------------------------------------------------------- */
body:not(.bg-slate-900) .form-input.pl-5,  body:not(.bg-slate-900) input.border.pl-5  { padding-left: 38px !important; }
body:not(.bg-slate-900) .form-input.pl-6,  body:not(.bg-slate-900) input.border.pl-6  { padding-left: 40px !important; }
body:not(.bg-slate-900) .form-input.pl-7,  body:not(.bg-slate-900) input.border.pl-7  { padding-left: 42px !important; }
body:not(.bg-slate-900) .form-input.pl-8,  body:not(.bg-slate-900) input.border.pl-8  { padding-left: 44px !important; }
body:not(.bg-slate-900) .form-input.pl-9,  body:not(.bg-slate-900) input.border.pl-9  { padding-left: 46px !important; }
body:not(.bg-slate-900) .form-input.pl-10, body:not(.bg-slate-900) input.border.pl-10 { padding-left: 48px !important; }
body:not(.bg-slate-900) .form-input.pl-11, body:not(.bg-slate-900) input.border.pl-11 { padding-left: 52px !important; }
body:not(.bg-slate-900) .form-input.pl-12, body:not(.bg-slate-900) input.border.pl-12 { padding-left: 56px !important; }
body:not(.bg-slate-900) .form-input.pr-8,  body:not(.bg-slate-900) input.border.pr-8  { padding-right: 42px !important; }
body:not(.bg-slate-900) .form-input.pr-9,  body:not(.bg-slate-900) input.border.pr-9  { padding-right: 46px !important; }
body:not(.bg-slate-900) .form-input.pr-10, body:not(.bg-slate-900) input.border.pr-10 { padding-right: 50px !important; }
body:not(.bg-slate-900) .form-input.pr-12, body:not(.bg-slate-900) input.border.pr-12 { padding-right: 56px !important; }
/* Girdi içindeki ikonu dikeyde ortala ve sol boşluğu 14px'e sabitle */
body:not(.bg-slate-900) .relative > svg.absolute.left-2,
body:not(.bg-slate-900) .relative > svg.absolute.left-2\.5,
body:not(.bg-slate-900) .relative > svg.absolute.left-3 { left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; }
body:not(.bg-slate-900) .relative > svg.absolute.right-2,
body:not(.bg-slate-900) .relative > svg.absolute.right-2\.5,
body:not(.bg-slate-900) .relative > svg.absolute.right-3 { right: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; }
/* Sipariş paneli araması */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) input.rounded-xl.bg-slate-50 { padding-left: 42px !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .relative > svg.absolute.left-2\.5 { left: 14px; width: 18px; height: 18px; }

/* ---------------------------------------------------------------------
   24. MOBİL DÜZELTMELERİ (< 768px)
   --------------------------------------------------------------------- */
/* Sipariş paneli: ürün kutucukları grid hücresini doldurmuyordu (button min-content'e büzülüyor) */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button { width: 100%; min-width: 0; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button > p { width: 100%; min-width: 0; overflow-wrap: anywhere; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button > p.font-black { white-space: nowrap; }

@media (max-width: 767.98px) {
  /* Panel: arama + adet + porsiyon satırı sığmıyordu → sar */
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .flex-shrink-0.px-3.py-2.bg-white.border-b.flex.items-center.gap-2 { flex-wrap: wrap; row-gap: 8px; }
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .flex-shrink-0.px-3.py-2.bg-white.border-b.flex.items-center.gap-2 > .relative.flex-1 { flex: 1 1 100%; }
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button { min-height: 92px; padding: 10px 8px; }
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button > p.font-semibold { font-size: 14px; }
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .grid[style*="minmax(100px"] > button > p.font-black { font-size: 16px; }
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .md\:hidden.border-b > button { height: 48px; }
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="catBar"] > button { height: 40px; padding: 0 12px !important; font-size: 14px; }
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .bg-\[\#0d1117\] h2 { font-size: 19px; }
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.h-11,
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.h-10 { height: 48px; font-size: 15px !important; }
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .border-t-2.border-slate-900 > span:last-child { font-size: 26px; }
}

@media (max-width: 639.98px) {
  /* Sayfa başlığı ve aksiyon butonları */
  body:not(.bg-slate-900) #app-layout main h1.text-2xl { font-size: 24px; }
  body:not(.bg-slate-900) .btn { height: 44px; padding: 0 14px; font-size: 14.5px; }
  body:not(.bg-slate-900) .btn-sm { height: 38px; padding: 0 12px; font-size: 13.5px; }
  body:not(.bg-slate-900) .btn-lg { height: 50px; }
  /* Başlık satırındaki buton grubu tam genişlik, eşit bölünsün */
  body:not(.bg-slate-900) #app-layout main > .flex.flex-col > .flex.items-center.gap-2:has(> .btn),
  body:not(.bg-slate-900) #app-layout main > .flex.flex-wrap > .flex.items-center.gap-2:has(> .btn),
  body:not(.bg-slate-900) #app-layout main > .flex > .flex.gap-2:has(> .btn) { display: flex; flex-wrap: wrap; width: 100%; }
  body:not(.bg-slate-900) #app-layout main > .flex > .flex.gap-2:has(> .btn) > .btn { flex: 1 1 calc(50% - 4px); }

  /* Kartlar ve tablolar kompakt */
  body:not(.bg-slate-900) .card.p-5, body:not(.bg-slate-900) .card.p-6 { padding: 14px; }
  body:not(.bg-slate-900) .card-header { padding: 12px 14px; }
  body:not(.bg-slate-900) .card-body { padding: 14px; }
  body:not(.bg-slate-900) .table th, body:not(.bg-slate-900) table thead th { padding: 10px 10px; font-size: 13px; }
  body:not(.bg-slate-900) .table td, body:not(.bg-slate-900) table td { padding: 11px 10px; font-size: 14.5px; }
  body:not(.bg-slate-900) .table td .btn-sm { height: 36px; width: 36px; padding: 0; }

  /* Form kontrolleri */
  body:not(.bg-slate-900) .form-input, body:not(.bg-slate-900) .form-select, body:not(.bg-slate-900) .form-textarea { min-height: 46px; font-size: 15.5px; }
  body:not(.bg-slate-900) .form-select { padding-right: 30px; background-position: right 10px center; }
  body:not(.bg-slate-900) .form-select.h-9 { font-size: 13.5px; padding-left: 10px; padding-right: 26px; background-position: right 8px center; }
  body:not(.bg-slate-900) .form-input.h-9 { font-size: 14px; padding-left: 10px; }
  body:not(.bg-slate-900) .form-label { font-size: 14px; }

  /* KPI kutuları */
  body:not(.bg-slate-900) .card.p-4.text-center { padding: 10px; }
  body:not(.bg-slate-900) .card.p-4.text-center > .text-xs { font-size: 11.5px; letter-spacing: .03em; }
  body:not(.bg-slate-900) .card.p-4.text-center > .text-xl { font-size: 21px; }

  /* Dashboard hero */
  body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 { padding: 14px; gap: 10px; }
  body:not(.bg-slate-900) #app-layout main > .grid.grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .card p.text-2xl { font-size: 24px; }
  body:not(.bg-slate-900) .card .grid > a.flex.flex-col.items-center.rounded-lg.p-3 { min-height: 104px; padding: 12px; }

  /* Rozetler tablo içinde sarmasın */
  body:not(.bg-slate-900) .badge, body:not(.bg-slate-900) span.text-xs.rounded-full { font-size: 12.5px; height: 26px; line-height: 26px; padding: 0 9px; }

  /* Ayarlar: sekme çubuğu yatay kaydırma */
  body:not(.bg-slate-900) #app-layout main nav.flex, body:not(.bg-slate-900) #app-layout main .flex.overflow-x-auto { -webkit-overflow-scrolling: touch; scrollbar-width: none; }

  /* Üst çubuk */
  body:not(.bg-slate-900) #app-layout > div > header h1 { font-size: 18px; }
}
@media (max-width: 767.98px) {
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .flex-shrink-0.px-3.py-2.bg-white.border-b.flex.items-center.gap-2 > .flex.items-center.gap-1 { flex: 1 1 100%; flex-wrap: wrap; row-gap: 6px; }
}

/* ---------------------------------------------------------------------
   25. RAPORLAR — Ödeme yöntemi kartları (Nakit / Kart / Veresiye / IBAN…)
   İnce çizgilerle bölünmüş hücreler yerine ayrı, belirgin kartlar.
   --------------------------------------------------------------------- */
body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x {
  gap: 12px; padding: 16px;
  background: var(--surface-2);
}
body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x > :not([hidden]) ~ :not([hidden]) { border-width: 0; }
body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x > div {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x > div:hover {
  background: var(--surface); transform: translateY(-2px); box-shadow: var(--shadow-raised); border-color: var(--border-strong);
}
/* Açık olan kart mavi çerçeveli */
body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x > div:has(svg.rotate-180) {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring), var(--shadow-card);
}
/* İkon kutusu, ad, tutar, alt yazı, çubuk */
body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x > div .w-8.h-8.rounded-lg { width: 42px; height: 42px; border-radius: 13px; }
body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x > div .w-8.h-8.rounded-lg svg { width: 21px; height: 21px; }
body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x > div .flex.items-center.gap-2.mb-3 { gap: 10px; margin-bottom: 14px; }
body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x > div span.text-sm { font-size: 16px; font-weight: 700; color: #0F172A; }
body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x > div > svg.w-4.h-4,
body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x > div .flex > svg.w-4.h-4 { width: 20px; height: 20px; color: #334155; }
body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x > div p.text-xl { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-family: var(--font); }
body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x > div p.text-xs { font-size: 14px; font-weight: 600; color: #334155; margin-top: 4px; }
body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x > div .h-1\.5 { height: 8px; margin-top: 12px; background: #E2E8F0; }
/* Renkli ikon kutuları daha doygun */
body:not(.bg-slate-900) .card[x-data*="openSpm"] .bg-green-100  { background: #D1FAE5; color: #047857; }
body:not(.bg-slate-900) .card[x-data*="openSpm"] .bg-blue-100   { background: #DBEAFE; color: #1D4ED8; }
body:not(.bg-slate-900) .card[x-data*="openSpm"] .bg-purple-100 { background: #EDE9FE; color: #6D28D9; }
body:not(.bg-slate-900) .card[x-data*="openSpm"] .bg-amber-100  { background: #FEF3C7; color: #B45309; }
body:not(.bg-slate-900) .card[x-data*="openSpm"] .bg-red-100    { background: #FEE2E2; color: #B91C1C; }
body:not(.bg-slate-900) .card[x-data*="openSpm"] .bg-teal-100   { background: #CCFBF1; color: #0F766E; }
body:not(.bg-slate-900) .card[x-data*="openSpm"] .bg-pink-100   { background: #FCE7F3; color: #BE185D; }
/* Açılan sipariş listesi paneli */
body:not(.bg-slate-900) .card[x-data*="openSpm"] .border-t.border-slate-100 > .px-5.py-3.bg-slate-50 { padding: 12px 20px; background: var(--surface-2); }
body:not(.bg-slate-900) .card[x-data*="openSpm"] .border-t.border-slate-100 > .px-5.py-3.bg-slate-50 span.text-sm { font-size: 15.5px; font-weight: 700; }
@media (max-width: 639.98px) {
  body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x { gap: 10px; padding: 12px; }
  body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x > div { padding: 12px 14px; }
  body:not(.bg-slate-900) .card[x-data*="openSpm"] > .grid.divide-x > div p.text-xl { font-size: 22px; }
}

/* ---------------------------------------------------------------------
   26. TABLO İÇİ OKUNURLUK — hücre metinleri, alt satırlar, rozetler
   (Siparişler/Ürünler/Müşteriler… tüm listeler)
   --------------------------------------------------------------------- */
body:not(.bg-slate-900) table th { font-size: 14.5px; font-weight: 800; color: #0F172A; letter-spacing: 0; text-transform: none; }
body:not(.bg-slate-900) table td { font-size: 16px; font-weight: 600; color: #0F172A; }
body:not(.bg-slate-900) table td a { font-weight: 700; }
body:not(.bg-slate-900) table td .text-sm { font-size: 16px; font-weight: 600; }
body:not(.bg-slate-900) table td .text-xs { font-size: 15px; font-weight: 600; color: #1E293B; }
body:not(.bg-slate-900) table td .text-\[9px\],
body:not(.bg-slate-900) table td .text-\[10px\],
body:not(.bg-slate-900) table td .text-\[11px\] { font-size: 14.5px; font-weight: 600; }
body:not(.bg-slate-900) table td .text-slate-400,
body:not(.bg-slate-900) table td .text-slate-300,
body:not(.bg-slate-900) table td .text-slate-500 { color: #1E293B; }
body:not(.bg-slate-900) table td .font-mono { font-size: 15.5px; font-weight: 700; }
body:not(.bg-slate-900) table td .font-bold, body:not(.bg-slate-900) table td .font-semibold { font-weight: 700; }
body:not(.bg-slate-900) table td .text-base { font-size: 17px; font-weight: 700; }
/* Hücre içi rozet ve etiketler */
body:not(.bg-slate-900) table td .badge,
body:not(.bg-slate-900) table td span.rounded-full,
body:not(.bg-slate-900) table td span.rounded,
body:not(.bg-slate-900) table td span.rounded-md,
body:not(.bg-slate-900) table td span.rounded-lg { font-size: 14px; font-weight: 700; height: 30px; line-height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; }
body:not(.bg-slate-900) table td span.rounded-full .w-1\.5, body:not(.bg-slate-900) table td span.rounded-full .w-2 { width: 8px; height: 8px; }
/* Personel/kasiyer baş harfi kutusu */
body:not(.bg-slate-900) table td .w-6.h-6.rounded-full { width: 32px; height: 32px; }
body:not(.bg-slate-900) table td .w-6.h-6.rounded-full span { font-size: 14px !important; }
body:not(.bg-slate-900) table td .w-8.h-8.rounded-lg { width: 36px; height: 36px; }
/* Satır iç boşluğu */
body:not(.bg-slate-900) table td.px-4.py-3, body:not(.bg-slate-900) .table td { padding: 14px 16px; }
/* Tablo altı özet çubuğu ("2 sipariş · 2 açık · tahsil edildi") */
body:not(.bg-slate-900) .card > .px-4.py-3.border-t.text-xs,
body:not(.bg-slate-900) .card > .bg-slate-50\/60.border-t { font-size: 15px; font-weight: 600; color: #0F172A; padding: 14px 16px; }
body:not(.bg-slate-900) .card > .bg-slate-50\/60.border-t span { color: #0F172A; }
/* Sipariş kartındaki küçük etiketler (Masa Servisi, Ödenmedi vb.) */
body:not(.bg-slate-900) table td .inline-flex.text-\[11px\], body:not(.bg-slate-900) table td .inline-flex.text-\[10px\] { font-size: 14px; height: 30px; padding: 0 12px; border-radius: 999px; }
/* Filtre kartı üst etiketleri */
body:not(.bg-slate-900) .form-label.text-xs { font-size: 14.5px; }
body:not(.bg-slate-900) .card .bg-primary\/5.text-xs { font-size: 14.5px; font-weight: 700; }
@media (max-width: 639.98px) {
  body:not(.bg-slate-900) table td { font-size: 15px; }
  body:not(.bg-slate-900) table td .text-xs, body:not(.bg-slate-900) table td .text-\[10px\], body:not(.bg-slate-900) table td .text-\[11px\] { font-size: 14px; }
  body:not(.bg-slate-900) table td .badge, body:not(.bg-slate-900) table td span.rounded-full, body:not(.bg-slate-900) table td span.rounded { font-size: 13px; height: 28px; line-height: 28px; padding: 0 10px; }
  body:not(.bg-slate-900) table td.px-4.py-3, body:not(.bg-slate-900) .table td { padding: 12px 10px; }
}
/* Bölüm 26 istisnası: boyut sınıfı taşıyan küçük "nokta" span'ları rozet değildir */
body:not(.bg-slate-900) table td span.rounded-full:is(.w-1, .w-1\.5, .w-2, .w-2\.5, .w-3, .w-3\.5) {
  font-size: 0; height: auto; line-height: 0; padding: 0; display: inline-block; gap: 0;
}
body:not(.bg-slate-900) table td span.rounded-full.w-2 { width: 10px; height: 10px; }
body:not(.bg-slate-900) table td span.rounded-full.w-1\.5 { width: 8px; height: 8px; }
body:not(.bg-slate-900) table td span.rounded-full.w-3, body:not(.bg-slate-900) table td span.rounded-full.w-3\.5 { width: 12px; height: 12px; }
body:not(.bg-slate-900) table td span.rounded-full.w-2\.5 { width: 10px; height: 10px; }
/* Bölüm 26 düzeltme: rozetler satır kırmasın; ödeme sütunu daralmasın */
body:not(.bg-slate-900) table td .badge,
body:not(.bg-slate-900) table td span.rounded-full:not(:is(.w-1, .w-1\.5, .w-2, .w-2\.5, .w-3, .w-3\.5)),
body:not(.bg-slate-900) table td span.rounded,
body:not(.bg-slate-900) table td span.rounded-md,
body:not(.bg-slate-900) table td span.rounded-lg { white-space: nowrap; height: auto; min-height: 30px; line-height: 1.2; padding: 4px 12px; }
body:not(.bg-slate-900) table td span.rounded > span { white-space: nowrap; }
/* Ödeme sütunu: "Kalan: …" ve yöntem satırları tek satır */
body:not(.bg-slate-900) table td .space-y-1 { min-width: 220px; }
body:not(.bg-slate-900) table td .space-y-1 > div { gap: 10px; }
body:not(.bg-slate-900) table td .space-y-1 > div > span:last-child { white-space: nowrap; }
body:not(.bg-slate-900) table td .space-y-1 .border-t { padding-top: 6px; margin-top: 4px; border-color: var(--border); }
/* "Kalan:" yazısı */
body:not(.bg-slate-900) table td .space-y-1 .text-\[10px\].text-slate-400 { font-size: 14px; font-weight: 700; color: #B45309; }
/* Tutar sütunu kırılmasın */
body:not(.bg-slate-900) table td.text-right p, body:not(.bg-slate-900) table td.text-right span { white-space: nowrap; }

/* ---------------------------------------------------------------------
   27. SİPARİŞ PANELİ — KATEGORİ BUTONLARI (dolgulu, büyük, belirgin)
   Çerçeveli pill yerine dolgulu kutu: gri zemin + koyu yazı, aktif lacivert.
   --------------------------------------------------------------------- */
body .md\:grid[style*="repeat(7"] { gap: 10px; padding: 12px 12px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
body .md\:grid[style*="repeat(7"] > button,
body [x-ref="catBar"] > button {
  height: 52px; padding: 0 14px !important;
  background: #E2E8F0 !important; color: #0F172A !important;
  border: 1.5px solid #B6C2D2;
  border-radius: 12px !important;
  clip-path: inset(0 round 12px);
  box-shadow: 0 1px 2px rgba(16,24,40,.06) !important;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
body .md\:grid[style*="repeat(7"] > button:hover,
body [x-ref="catBar"] > button:hover { background: #CBD5E1 !important; color: #0F172A !important; border-color: #94A3B8; }
body .md\:grid[style*="repeat(7"] > button:active,
body [x-ref="catBar"] > button:active { transform: scale(.97); }
body .md\:grid[style*="repeat(7"] > button svg,
body [x-ref="catBar"] > button svg { width: 18px; height: 18px; }
/* Aktif kategori: lacivert dolgu, beyaz yazı, mavi ışıklı gölge */
body .md\:grid[style*="repeat(7"] > button[style*="0065ff"],
body [x-ref="catBar"] > button[style*="0065ff"] {
  background: #111A2E !important; color: #fff !important; border-color: #111A2E;
  box-shadow: 0 6px 16px rgba(37,99,235,.28) !important;
}
/* Mobil yatay çubuk */
body [x-ref="catBar"] { gap: 8px; padding: 10px 12px; background: var(--surface-2); }
body [x-ref="catBar"] > button { height: 46px; font-size: 15px; min-width: 0; }
@media (max-width: 767.98px) {
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="catBar"] > button { height: 46px; padding: 0 14px !important; font-size: 15px; }
}

/* ---------------------------------------------------------------------
   28. MASA HARİTASI — masaüstünde masalar tam genişliğe eşit dağılır
   Sabit w-28 kartlar yerine akışkan grid; her kart hücreyi doldurur.
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
  body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px; padding: 4px;
  }
  body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group {
    width: 100% !important; height: auto; min-height: 0; aspect-ratio: 1 / 1;
  }
  /* Dikdörtgen şekil (!w-36): 2 hücre genişlik */
  body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group.\!w-36 { grid-column: span 2; aspect-ratio: 2 / 1; }
  /* Masa adı ölçeği hücreyle büyüsün */
  body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > span.font-bold { font-size: clamp(20px, 2vw, 30px); }
}
@media (min-width: 1280px) {
  body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
}
@media (min-width: 1600px) {
  body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
/* Harita alanı kenar boşluğu */
body:not(.bg-slate-900) #app-layout main.p-0 .flex-1.overflow-y-auto.p-4 { padding: 16px 20px; }

/* ---------------------------------------------------------------------
   29. MASA HARİTASI — tek ekrana sığdır (kaydırma yok)
   Bölüm 28'in üstüne: satırlar da konteyner yüksekliğine eşit bölünür;
   kare oranı kaldırılır, tüm masalar görünür alanı doldurur.
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
  body:not(.bg-slate-900) #app-layout main.p-0 .flex-1.overflow-y-auto.p-4 {
    display: flex; flex-direction: column; overflow: hidden; padding: 12px 16px;
  }
  /* Bölüm sarmalayıcıları (x-for section) dikeyde alanı paylaşır */
  body:not(.bg-slate-900) #app-layout main.p-0 .flex-1.overflow-y-auto.p-4 > .mb-6,
  body:not(.bg-slate-900) #app-layout main.p-0 .flex-1.overflow-y-auto.p-4 > div:has(> .flex-wrap.gap-1) {
    flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; margin-bottom: 8px;
  }
  body:not(.bg-slate-900) #app-layout main.p-0 .flex-1.overflow-y-auto.p-4 > .mb-6 > h3 { flex: 0 0 auto; }
  body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 {
    flex: 1 1 0; min-height: 0;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 12px; padding: 2px;
  }
  body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group {
    aspect-ratio: auto; height: 100%; min-height: 64px;
  }
  body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group.\!w-36 { aspect-ratio: auto; }
  body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 > button.border-2.group > span.font-bold { font-size: clamp(18px, 1.8vw, 28px); }
}
@media (min-width: 1280px) {
  body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
}
@media (min-width: 1600px) {
  body:not(.bg-slate-900) #app-layout main.p-0 .mb-6 > .flex-wrap.gap-1 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ---------------------------------------------------------------------
   30. SİPARİŞ PANELİ — arama/adet/porsiyon satırı dar pencerede düzgün sarsın
   (< 1200px genişlikte katalog alanı daralınca öğeler dağılıyordu)
   --------------------------------------------------------------------- */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .flex-shrink-0.px-3.py-2.bg-white.border-b.flex.items-center.gap-2 {
  flex-wrap: wrap; row-gap: 8px; padding: 10px 12px;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .flex-shrink-0.px-3.py-2.bg-white.border-b.flex.items-center.gap-2 > .relative.flex-1 {
  flex: 1 1 260px; min-width: 200px;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .flex-shrink-0.px-3.py-2.bg-white.border-b.flex.items-center.gap-2 > .flex.items-center.gap-1 {
  flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-start; gap: 8px; row-gap: 8px;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .flex-shrink-0.px-3.py-2.bg-white.border-b.flex.items-center.gap-2 > .flex.items-center.gap-1 > * {
  flex: 0 0 auto;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .flex-shrink-0.px-3.py-2.bg-white.border-b.flex.items-center.gap-2 .border-indigo-400.bg-indigo-50 {
  min-width: 52px; width: auto; padding: 0 12px;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .flex-shrink-0.px-3.py-2.bg-white.border-b.flex.items-center.gap-2 button.h-8.px-2.rounded-lg.border {
  width: auto; padding: 0 14px;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .flex-shrink-0.px-3.py-2.bg-white.border-b.flex.items-center.gap-2 .w-px.h-6 { height: 28px; margin: 0 4px; }

/* ---------------------------------------------------------------------
   31. SİPARİŞ PANELİ — sağ liste kompakt (bir bakışta daha çok kalem)
   Kalem kartı 3 satırdan 2 satıra iner: [ad ……… tutar] / [adet×fiyat  kişi·saat]
   --------------------------------------------------------------------- */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] { padding: 6px 8px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] > div[data-item-id] { margin: 0 0 6px !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] > div[data-item-id] > .px-3.py-2\.5 { padding: 8px 10px; gap: 8px; }
/* Durum noktası daha küçük */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .w-2.h-2.rounded-full { width: 8px; height: 8px; }
/* Ürün adı */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] p[style*="math"] { font-size: 15.5px !important; line-height: 1.25; }
/* Adet × fiyat satırı ile kişi/saat çipleri aynı satırda */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] p.text-xs[style*="math"] {
  display: inline-block; font-size: 14px !important; margin-top: 2px; margin-right: 8px; vertical-align: middle;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] p.text-xs[style*="math"] + p.flex {
  display: inline-flex; margin-top: 2px; vertical-align: middle;
}
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] span[style*="#000000"],
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] span[style*="#00a146"] {
  font-size: 11.5px !important; padding: 1px 7px !important; margin-top: 0 !important; line-height: 17px;
}
/* Tutar */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] p.text-sm.font-black { font-size: 16px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] .flex-shrink-0.text-right svg.w-3.h-3 { margin-top: 0; }
/* İptal/ikram bilgi satırları */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] p.flex.items-center.gap-1.mt-0\.5 { margin-top: 2px; }

/* Üst başlık şeridi ve toplam bloğu daha az yer kaplasın */
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .bg-\[\#0d1117\] > .px-4.pt-4.pb-2 { padding: 10px 16px 6px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .bg-\[\#0d1117\] > .px-4.pb-3 { padding-bottom: 8px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .bg-\[\#0d1117\] .w-12.h-12.rounded-2xl { width: 40px; height: 40px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .bg-\[\#0d1117\] .bg-slate-800\/70 { padding: 6px 12px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .border-t.border-slate-200.bg-white.px-3 { padding: 10px 14px 12px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .border-t.border-slate-200.bg-white.px-3 .space-y-1 { margin-bottom: 8px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .border-t-2.border-slate-900 > span:last-child { font-size: 24px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.h-11,
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.h-10 { height: 42px; font-size: 15px !important; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 { row-gap: 6px; }
body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 > * + * { margin-top: 6px; }

/* Kısa ekranlarda (yükseklik < 820px) daha da sıkı */
@media (max-height: 819.98px) {
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] > div[data-item-id] > .px-3.py-2\.5 { padding: 6px 10px; }
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) [x-ref="orderItemsList"] p[style*="math"] { font-size: 14.5px !important; }
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.h-11,
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .space-y-2 button.h-10 { height: 38px; font-size: 14px !important; }
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .bg-\[\#0d1117\] h2 { font-size: 18px; }
  body :is(.rounded-2xl.shadow-2xl, .bg-white.shadow-2xl.z-10) .md\:grid[style*="repeat(7"] > button { height: 44px; font-size: 15px; }
}