/* ── GENEL GÖRÜNÜRLÜK İYİLEŞTİRMESİ ── */
:root {
  --text-primary: #f5f5f5;
  --text-secondary: #aaaaaa;
  --text-muted: #777777;
  --bg-card: #1a1a1a;
  --bg-row: #181818;
  --bg-row-hover: #232323;
  --border-color: #2a2a2a;
}

/* Tablo satırları daha belirgin */
.orders tbody tr, #orders-body tr {
  border-bottom: 1px solid #222 !important;
  background: #181818 !important;
}
.orders tbody tr:hover, #orders-body tr:hover {
  background: #232323 !important;
}
.orders tbody td, #orders-body td {
  color: #f0f0f0 !important;
  font-size: 14px !important;
}
.orders thead th {
  background: #1e1e1e !important;
  color: #aaa !important;
  border-bottom: 1px solid #333 !important;
}

/* Masa kartları daha belirgin */
.table-sm {
  border: 1px solid #282828 !important;
  background: #181818 !important;
}
.table-sm .tname {
  color: #f0f0f0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.table-sm .tsub {
  color: #888 !important;
}

/* Payment panel */
.payment-panel, .paybox {
  background: #141414 !important;
}
#sum-total { color: #ffffff !important; font-size: 26px !important; }
#sum-remaining { color: #ef4444 !important; }

/* No orders mesajı */
.no-orders { color: #666 !important; font-size: 14px !important; }

/* Form elemanları */
input[type=text], input[type=number], input[type=date], select {
  color: #f0f0f0 !important;
  background: #1e1e1e !important;
  border: 1px solid #333 !important;
}
input::placeholder { color: #555 !important; }

/* Genel metin rengi */
body { color: #f0f0f0 !important; }
label { color: #aaa !important; }

/* ───────────────────────────────── */

/* v-premium-2026 — PREMIUM DARK TEMA */
/* =========================================================
   PREMIUM DARK TEMA — Lacivert & Altın / Lüks & Modern
   ========================================================= */

:root {
    --bg: #0a0a0a !important;
    --bg-panel: #0e0404 !important;
    --text-main: #f0f4ff !important;
    --text-muted: #7a8aaa !important;
    --border: #1e2a3a !important;
    --primary: #f59e0b !important;
    --primary-hover: #fbbf24 !important;
    --topbar-bg: #0a0303 !important;
    --topbar-ink: #f0f4ff !important;
}

body, html, .main-wrap, .content-wrapper {
    background: #0a0a0a !important;
    color: #f0f4ff !important;
    color-scheme: dark !important;
}

.card, .panel, .box, .white-bg, .modal-content {
    background: #0c1018 !important;
    color: #f0f4ff !important;
    border: 1px solid #1e2a3a !important;
}
/* =========================================================
   ROYALPOS - CORE STYLE
   Temizlenmiş + Full Responsive (Kasa + Garson + Mutfak)
   ========================================================= */

/* ---------- ROOT & GENEL RENKLER ---------- */

/* =========================================================
   ROYAL BLACK (TEK ROOT) - Mavilik yok, tam siyah/antrasit
   ========================================================= */
:root{
  --bg:#0a0a0a;
  --brand:#0a0303;
  --accent:#f59e0b;
  --accent2:#38bdf8;
  --ink:#f0f4ff;
  --line:#1e2a3a;

  --panelW:34vw;

  --cash:#22c55e;
  --card:#f59e0b;
  --close:#ef4444;
  --transfer:#a78bfa;

  --masa-bg:#0f0f0f;
  --panel-bg:#0f0f0f;
  --modal-bg:#050505ee;

  /* Menü kartı tema renkleri */
  --menu-card-bg: #0e0404;
  --menu-card-border: rgba(239,68,68,0.18);
  --menu-card-title: #f0f4ff;
  --menu-card-price: #f59e0b;
  --menu-card-btn-bg: #f59e0b;
  --menu-card-btn-hover-bg: #fbbf24;
  --menu-card-btn-text: #ffffff;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  background:radial-gradient(circle at top, #130404 0%, #0a0a0a 60%, #050505 100%);
  color:var(--ink);
}

/* Yatay kayma olmasın */
body,html{
  overflow-x:hidden;
}

/* ---------- TOPBAR / BRAND ---------- */

/* -------- TOPBAR (tema uyumlu) -------- */

.topbar{
  background:var(--topbar-bg,
    linear-gradient(90deg,
      #121212,
      #130404 40%,
      #121212 100%)
  );
  color:var(--topbar-ink,#f0f4ff);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 14px;
  box-shadow: 0 1px 0 rgba(56,189,248,0.1), 0 4px 24px rgba(0,0,0,0.6);
  position:sticky;
  top:0;
  z-index:50;
  flex-wrap:wrap;
  row-gap:6px;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.logo{
  height:42px;
  max-height:42px;
  width:auto;
  max-width:170px;
  object-fit:contain;
  border-radius:8px;
}

.brand-main{
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:16px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-sub{
  font-size:10px;
  text-transform:uppercase;
  opacity:.8;
  letter-spacing:.15em;
}

/* Menü */
.menu{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.menu a,
.menu button{
  border:none;
  background:transparent;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  padding:5px 8px;
  border-radius:999px;
  cursor:pointer;
}

.menu a:hover,
.menu button:hover{
  background:rgba(255,255,255,.08);
}

.menu-clock{
  font-size:11px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(15,23,42,0.55);
  border:1px solid rgba(148,163,184,0.5);
  color:#f9fafb;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* Tema dropdown */

.theme-dropdown{
  position:relative;
  display:inline-block;
}

.theme-btn{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:6px 16px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
}

.theme-btn i{
  font-size:11px;
}

.theme-menu{
  position:absolute;
  top:115%;
  right:0;
  background:#020617;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
  padding:4px;
  display:none;
  min-width:140px;
  z-index:9999;
}

.theme-dropdown.open .theme-menu{
  display:block;
}

.theme-option{
  display:block;
  width:100%;
  padding:8px 10px;
  border:none;
  background:transparent;
  color:#e5e7eb;
  text-align:left;
  border-radius:8px;
  font-size:13px;
  cursor:pointer;
}

.theme-option:hover{
  background:rgba(255,255,255,.08);
}

/* ---------- ALAN CHIPS ---------- */

.chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:8px 16px 0;
  border-bottom:1px solid var(--chips-border,#222);
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 12px;
  background:var(--chip-bg,#151515);
  border-radius:999px;
  border:1px solid var(--chip-border,var(--line));
  font-size:12px;
  font-weight:500;
  color:var(--chip-ink,var(--ink));
  cursor:pointer;
}

.chip::before{
  content:'●';
  font-size:8px;
  color:#ff8533;
}

.chip.active,
.chip:hover{
  background:#38bdf8;
  color:#060912;
  border-color:rgba(56,189,248,0.6);
  box-shadow:0 3px 9px rgba(0,0,0,.12);
}


/* ---------- ANA LAYOUT ---------- */

.main-wrap{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:12px 16px 110px;
}

#tables-section{
  flex:1;
}

.tables-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:16px;
  padding:4px;
}

/* ---------- MASA KARTLARI ---------- */

.table-sm{
  position:relative;
  padding:16px 14px 14px;
  border-radius:18px;
  background: linear-gradient(145deg, #0d1a2e 0%, #080f1e 50%, #050c18 100%);
  border:1px solid rgba(56,189,248,0.15);
  display:flex;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
  color:#e5e7eb;
  box-shadow:
    0 4px 6px rgba(0,0,0,0.5),
    0 12px 32px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
  overflow:hidden;
}

/* Üst parlama efekti */
.table-sm::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.4), transparent);
  opacity:0;
  transition: opacity .2s;
}
.table-sm:hover::before{ opacity:1; }

/* Köşe dekor */
.table-sm::after{
  content:"";
  position:absolute;
  top:-30px; right:-30px;
  width:80px; height:80px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(56,189,248,0.06) 0%, transparent 70%);
  pointer-events:none;
}

.table-sm.free{
  background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 50%, #0a0a12 100%);
  border-color: rgba(100,116,139,0.2);
  box-shadow:
    0 4px 6px rgba(0,0,0,0.4),
    0 12px 28px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.table-sm.busy{
  background: linear-gradient(145deg, #0a1a10 0%, #061410 50%, #030e08 100%);
  border-color: rgba(34,197,94,0.4);
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.2),
    0 4px 20px rgba(34,197,94,0.1),
    0 12px 32px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(34,197,94,0.06);
}

.table-sm:hover{
  transform:translateY(-4px) scale(1.025);
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.4),
    0 8px 30px rgba(56,189,248,0.12),
    0 20px 50px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.tname{
  font-weight:800;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#f1f5f9;
  letter-spacing:0.3px;
}

.tname i{
  color:#38bdf8;
  font-size:13px;
  filter: drop-shadow(0 0 6px rgba(56,189,248,0.4));
}

.tsub,.tstatus{
  font-size:10px;
  color:#64748b;
  letter-spacing:0.5px;
  text-transform:uppercase;
}

.tamount{
  color:#f59e0b;
  font-weight:700;
}



/* ========================================================= */
/*                 ★ MASA DOLU (occupied) STİLİ ★           */
/* ========================================================= */
.table-sm.occupied {
  background: linear-gradient(145deg, #2a0a0a 0%, #1a0505 50%, #0f0303 100%) !important;
  box-shadow:
    0 0 0 1px rgba(239,68,68,0.5),
    0 4px 20px rgba(239,68,68,0.2),
    0 12px 36px rgba(0,0,0,0.75),
    inset 0 1px 0 rgba(255,100,100,0.08) !important;
  transform:translateY(-1px);
  border:1px solid rgba(239,68,68,0.45) !important;
}

.table-sm.occupied::after{
  background: radial-gradient(circle, rgba(239,68,68,0.08) 0%, transparent 70%);
}

.table-sm.occupied:hover{
  box-shadow:
    0 0 0 1px rgba(239,68,68,0.7),
    0 8px 28px rgba(239,68,68,0.3),
    0 20px 50px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,100,100,0.1) !important;
}

/* Dolu masadaki yazılar beyaz görünsün */
.table-sm.occupied .tname,
.table-sm.occupied .tname i,
.table-sm.occupied .tsub,
.table-sm.occupied .tstatus,
.table-sm.occupied .ttotal {
  color:#fff !important;
}

.table-sm.occupied .tname i{
  color:#fca5a5 !important;
  filter: drop-shadow(0 0 6px rgba(239,68,68,0.6)) !important;
}

/* ---------- ÖDEME PANELİ ---------- */

.payment-panel{
  background:var(--panel-bg);
  color:var(--ink);
  border-radius:18px;
  border:1px solid rgba(56,189,248,0.12);
  box-shadow:-16px 0 40px rgba(0,0,0,.9);
  padding:12px;
  width:var(--panelW);
  flex-shrink:0;
  max-height:calc(100vh - 110px);
  overflow:auto;
}

.pp-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}

.pp-label{
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#D0B89D;
}

.pp-table{
  font-size:17px;
  font-weight:700;
}

/*
  Çok sipariş eklenince sağ panel (masanın sepeti) sayfayı aşağı uzatmasın.
  Küçük laptop/telefon ekranlarında kaydırmalı alan olsun.
*/
.orders{
  max-height:38vh;
  overflow:auto;
  border-radius:12px;
}

.orders table{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
  background:transparent;
}

.orders th,
.orders td{
  padding:8px;
  border-bottom:1px solid #2f2320;
  text-align:center;
  font-size:13px;
  color:var(--ink);
}

/* VIP temalara uyumlu hale getirildi */
.orders thead{
  background:var(--brand);
}

.orders thead th{position:sticky;top:0;z-index:2;}

.orders tbody tr:nth-child(even){background:var(--masa-bg);}
.orders tbody tr:nth-child(odd){background:var(--bg);}

.paybox{
  background:var(--panel-bg);
  border-radius:14px;
  border:1px solid var(--line);
  padding:10px;
  margin-top:10px;
}

.paybox .total{
  margin:4px 0;
  font-size:14px;
}

.paybox .pay-grid{
  display:flex;
  gap:8px;
  margin-top:6px;
}

.paybox .pay-col{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.paybox label{
  font-size:13px;
  font-weight:600;
}

.paybox input[type=number]{
  width:100%;
  padding:6px 8px;
  border-radius:6px;
  border:1px solid #3c2e23;
  background:#050303;
  color:var(--ink);
}

.paybox .form-row{
  display:flex;
  gap:8px;
  margin-top:8px;
}

.paybox .form-row .btn{
  flex:1;
  text-align:center;
}

/* ---------- BUTONLAR ---------- */

.btn{
  border:none;
  border-radius:8px;
  padding:8px 14px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  background:var(--accent);
  color:#ffffff;
  box-shadow:0 8px 18px rgba(0,0,0,.7);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.btn.small{
  padding:6px 10px;
  font-size:13px;
}

.btn.cash{
  background:var(--cash);
}

.btn.card{
  background:var(--card);
  color:#140b06;
}

.btn.transfer{
  background:#403027;
  color:var(--ink);
}

.btn.close,
.btn.danger{
  background:var(--close);
  color:#fff;
}

.btn.btn-ghost{
  background:transparent;
  border:1px solid #444;
  color:var(--ink);
  box-shadow:none;
}

.btn:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

/* ---------- MENU MODAL ---------- */

.menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  display:none;
  z-index:40;
}

.menu-overlay.open{
  display:block;
}

.menu-modal{
  position:fixed;
  top:72px;
  bottom:100px;
  left:16px;
  right:calc(var(--panelW) + 24px);
  background:#070f1c;
  border-radius:20px;
  border:1px solid rgba(56,189,248,0.15);
  box-shadow:0 18px 40px rgba(0,0,0,.9);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  color:var(--ink);
}

.stick{
  position:sticky;
  top:0;
  background:inherit;
  padding-bottom:6px;
}

.tabbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:6px 0 8px;
  border-bottom:1px solid var(--line);
}

.tab{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(56,189,248,0.15);
  background:rgba(56,189,248,0.06);
  font-size:12px;
  font-weight:500;
  color:rgba(255,255,255,0.5);
  cursor:pointer;
  white-space:nowrap;
  transition:all .18s ease;
}

.tab:hover{
  background:rgba(56,189,248,0.15);
  border-color:rgba(56,189,248,0.35);
  color:#fff;
}

.tab.active{
  background:#38bdf8;
  color:#060912;
  border-color:#38bdf8;
  font-weight:700;
}

.search-wrap{
  padding:4px 2px 8px;
}

.search-wrap input{
  width:100%;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#050303;
  color:var(--ink);
  font-size:13px;
}

/* Favori / Hızlı Kısayollar (Menü üstü) */
.quickbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 2px 10px;
}
.quickbar.hidden{ display:none; }
.quick-btn{
  border:1px solid #262626;
  background:#0f0f0f;
  color:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.quick-btn:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(239,68,68,0.15);
}
.quick-btn .qprice{
  color:var(--accent);
  font-weight:700;
}

/* Ürün grid */

.product-grid{
  flex:1;
  overflow-y:auto;
  padding:10px;
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important;
  grid-auto-rows:195px !important;
  gap:9px;
  align-content:start;
  background:#060e1a;
}

.product-grid::-webkit-scrollbar{ width:4px; }
.product-grid::-webkit-scrollbar-thumb{ background:rgba(56,189,248,0.25); border-radius:2px; }

/* Ürün kartı */

.product-card{
  background:#0c1320;
  border:1px solid rgba(56,189,248,0.12);
  border-radius:14px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:160px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .18s ease;
}

.product-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.4), transparent);
  opacity:0;
  transition:opacity .2s;
}

.product-card:hover{
  border-color:rgba(56,189,248,0.35);
  background:#0f1828;
  transform:translateY(-2px);
}

.product-card:hover::before{ opacity:1; }

.product-card.low-stock{
  border-color:rgba(239,68,68,0.25);
}

.product-card.out-of-stock{
  opacity:0.4;
  pointer-events:none;
}

.product-card.has-items{
  border-color:rgba(245,158,11,0.5);
  background:#0f1820;
}

.product-card.has-items::before{
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  opacity:1;
}

/* Ürün resmi alanı */
.pc-img-wrap{
  width:100%;
  height:80px;
  border-radius:10px;
  overflow:hidden;
  background:rgba(56,189,248,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:1px solid rgba(56,189,248,0.08);
}

.pc-img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.pc-no-img{
  font-size:28px;
  opacity:0.5;
}

.product-title,
.product-card .p-title{
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  color:#f0f4ff;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.product-info{
  display:none;
}

.product-price{
  display:block;
  font-size:15px;
  font-weight:800;
  color:#f59e0b;
  margin-top:2px;
}

.product-stock-badge{
  font-size:10px;
  font-weight:600;
  color:rgba(255,255,255,0.3);
  letter-spacing:0.04em;
}

.product-stock-badge.low{ color:#ef4444; }
.product-stock-badge.out{ color:#ef4444; }

.product-card button{
  margin-top:auto;
  background:#f59e0b;
  color:#060912;
  padding:8px 12px;
  border-radius:10px;
  border:none;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:background .15s ease, transform .15s ease;
  width:100%;
  font-family:inherit;
}

.product-card button:hover{
  background:#fbbf24;
  transform:translateY(-1px);
}

.product-card button:active{
  transform:scale(0.95);
}


/* ---------- OVERLAY / ADMIN / RAPOR ---------- */

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  z-index:60;
}

.overlay.open{
  display:block;
}

.modal{
  position:fixed;
  top:76px;
  bottom:104px;
  left:24px;
  right:24px;
  background:#0e0404;
  border-radius:16px;
  padding:14px;
  overflow:auto;
  border:1px solid rgba(255,255,255,0.08);
  color:#e5e7eb;
  box-shadow:0 18px 45px rgba(0,0,0,0.7);
}

.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.admin-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0;
}

.admin-tabs .tab{
  background:#130404;
  color:#e5e7eb;
}

.admin-pane{
  background:#0e0404;
  border-radius:16px;
  padding:12px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 12px 26px rgba(0,0,0,0.6);
}

.form-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:8px;
}

.form-row input,
.form-row select{
  padding:6px 8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.1);
  background:#130404;
  color:#e5e7eb;
  font-size:13px;
}

.list{
  list-style:none;
  margin:10px 0 0;
  padding:0;
}

.list li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  margin-bottom:8px;
  border-radius:12px;
  background:#130404;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
  font-size:13px;
}

.list li span:first-child{
  display:flex;
  align-items:center;
  gap:8px;
}

.list li span:first-child::before{
  content:'';
  width:11px;
  height:11px;
  border-radius:3px;
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,0.25);
}

.list .btn.small{
  padding:4px 9px;
  font-size:11px;
  border-radius:999px;
}

/* Rapor grid */

.report-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}

.card{
  background:#0f0f0f;
  border:1px solid #1f2937;
  border-radius:10px;
  padding:12px;
  box-shadow:0 2px 4px rgba(0,0,0,0.3);
}

.card-title{
  font-size:13px;
  color:#9ca3af;
  margin-bottom:4px;
}

.card-value{
  font-size:20px;
  font-weight:700;
  color:#f9fafb;
}

.report-table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}

.report-table th,
.report-table td{
  padding:8px;
  border:1px solid #374151;
  font-size:13px;
}

/* Rapor footer */

.report-footer{
  margin-top:15px;
  padding-top:10px;
  border-top:1px solid rgba(156,163,175,0.4);
  text-align:center;
  font-size:12px;
  color:#e5e7eb;
}

.report-footer .rf-main{
  font-weight:600;
}

.report-footer .rf-sub{
  font-size:11px;
  opacity:.9;
}

/* ---------- LOG PANEL ---------- */

.log-panel{
  position:fixed;
  left:8px;
  right:8px;
  bottom:6px;
  background:#272524;
  color:#fff;
  padding:6px 12px;
  border-radius:10px;
  box-shadow:0 -2px 6px rgba(0,0,0,.25);
  border:1px solid #86664e;
  z-index:45;
}

.log-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
}

.log-title{
  font-weight:700;
}

#log-list{
  max-height:60px;
  overflow:auto;
  font-size:12px;
}


/* ---------- GARSON HAZIR SİPARİŞ PANELİ ---------- */

.waiter-ready-panel{
  position:fixed;
  right:16px;
  top:80px;
  max-width:280px;
  background:#0f0f0f;
  color:#f9fafb;
  padding:6px 10px;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.45);
  border:1px solid rgba(248,250,252,0.25);
  z-index:48;
}

.waiter-ready-list{
  max-height:260px;
  overflow:auto;
  margin-top:4px;
}

.waiter-ready-item{
  background:rgba(15,23,42,0.96);
  border-radius:10px;
  padding:6px 8px;
  border:1px solid rgba(55,65,81,0.85);
  margin-bottom:4px;
  font-size:12px;
}

.waiter-ready-item .wr-title{
  font-weight:600;
}

.waiter-ready-item .wr-meta{
  font-size:11px;
  opacity:.9;
}

/* Toast tarzı hızlı popup'lar */
.waiter-toast-container{
  position:fixed;
  right:16px;
  bottom:80px;
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:60;
}

.waiter-toast{
  min-width:220px;
  max-width:260px;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#022c22;
  font-size:12px;
  box-shadow:0 16px 40px rgba(22,163,74,0.65);
  opacity:0.98;
}

/* Sadece garson modunda göster */
body:not(.waiter-mode) .waiter-ready-panel,
body:not(.waiter-mode) .waiter-toast-container{
  display:none;
}

/* ---------- NOTIFY PANEL (GARSON SİPARİŞLERİ) ---------- */

.notify-panel{
  position:fixed;
  right:16px;
  bottom:80px;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:320px;
  z-index:50;
}

.notify-box{
  background:rgba(15,23,42,0.96);
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(248,250,252,0.25);
  box-shadow:0 10px 25px rgba(0,0,0,0.45);
  color:#f9fafb;
  font-size:13px;
}

/* ---------- WAITER ORDER ALT PANEL ---------- */

.waiter-order-modal{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  pointer-events:none;
}

.waiter-order-modal .waiter-order-inner{
  margin:0 auto;
  max-width:480px;
  background:#020617;
  border-radius:18px 18px 0 0;
  padding:12px 14px 16px;
  box-shadow:0 -18px 40px rgba(0,0,0,0.8);
  transform:translateY(105%);
  transition:transform 0.25s ease-out;
  color:#e5e7eb;
}

.waiter-order-modal.open{
  pointer-events:auto;
}

.waiter-order-modal.open .waiter-order-inner{
  transform:translateY(0);
}

.wo-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}

.wo-list{
  max-height:50vh;
  overflow-y:auto;
}

/* Sadece garson ekranında göster */
body:not(.waiter-mode) .waiter-order-modal{
  display:none;
}

/* ---------- MUTFAK EKRANI ---------- */

.kitchen-body{
  background:#000;
  color:#fff;
  font-family:inherit;
}

.kitchen-main{
  padding:16px;
}

.kitchen-orders{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}

.k-card{
  background:#1b1b1b;
  border-radius:12px;
  padding:12px 14px;
  box-shadow:0 4px 10px rgba(0,0,0,0.5);
}

/* Durum renkleri */
.k-item.k-pending{background:#4b3f22;}
.k-item.k-preparing{background:#244057;}
.k-item.k-ready{background:#25522f;}

/* ---------- GARSON MODU (waiter-mode) ---------- */

.waiter-mode #payment-panel{
  display:none !important;
}

.waiter-mode #go-admin,
.waiter-mode #go-report{
  display:none !important;
}

.waiter-mode #tables-section{
  width:100% !important;
}

.waiter-mode #notify-panel,
.waiter-mode .print-btn,
.waiter-mode #log-panel,
.waiter-mode .panel-container{
  display:none !important;
}

/* ---------- PRINT ---------- */

@media print{
  @page{margin:0;}
  body{margin:0;}
  header,.topbar,.log-panel,.notify-panel,.payment-panel,.chips{display:none !important;}
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

/* Tablet */
@media (max-width:1200px){
  :root{ --panelW:40vw; }
  .product-grid{ grid-template-columns:repeat(3,1fr); }
  .report-grid{ grid-template-columns:repeat(2,1fr); }
}

/* Küçük tablet */
@media (max-width:900px){
  :root{ --panelW:48vw; }
  .tables-grid{ grid-template-columns:repeat(3,1fr); }
  .product-grid{ grid-template-columns:repeat(2,1fr); }

  .menu-modal{
    top:60px;
    left:8px;
    right:8px;
    bottom:80px;
    border-radius:14px;
  }
}

/* Telefon */
@media (max-width:700px){

  .topbar{
    padding:6px 8px;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }

  .main-wrap{
    flex-direction:column;
    padding:8px 8px 90px;
  }

  #tables-section{
    margin-right:0;
  }

  .payment-panel{
    position:relative;
    width:100%;
    max-width:100%;
    top:auto;
    right:auto;
    bottom:auto;
    height:auto;
    max-height:none;
    border-radius:16px 16px 12px 12px;
    margin-top:6px;
  }

  .tables-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }

  .product-grid{
    grid-template-columns:1fr;
  }

  .menu-modal{
    top:60px;
    left:0;
    right:0;
    bottom:0;
    border-radius:0;
  }

  .waiter-order-modal .waiter-order-inner{
    max-width:100%;
  }
}

/* Çok küçük telefon */
@media (max-width:480px){
  .tables-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .paybox .form-row{
    flex-wrap:wrap;
  }

  .paybox .form-row .btn{
    flex:1 1 48%;
    font-size:12px;
    padding:6px 4px;
  }
}
/* ============================================================
   FISTIK FINAL FIX — SADECE GARSON MENÜSÜNÜ POS GİBİ YAPAR
   POS TARAFA DOKUNMAZ
   ============================================================ */

/* GARSON MODALI MENÜ OVERLAY */
body.waiter-mode #menu-overlay .menu-box,
body.waiter-mode #menu-overlay {
    background: #0a0303 !important;
}

/* ÜRÜN GRIDİ — POS İLE AYNI GÖRÜNÜM */
body.waiter-mode #product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
    gap: 18px !important;
    padding: 10px !important;
}

/* ÜRÜN KARTI — POS STİLİ */
body.waiter-mode #product-grid .product-card {
    background: #0f0f0f !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    padding: 18px !important;
    box-shadow: 0 0 18px rgba(0,0,0,0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 200px !important;
    transition: .2s ease !important;
}

body.waiter-mode #product-grid .product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.6) !important;
}

/* BAŞLIK */
body.waiter-mode .product-card .p-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #fff !important;
}

/* META (Stok, fiyat) */
body.waiter-mode .product-card .p-meta {
    font-size: 14px !important;
    color: #cbd5f5 !important;
}

/* BUTON */
body.waiter-mode .product-card .p-actions button {
    background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
    color: #fff !important;
    border-radius: 8px !important;
    width: 100% !important;
    padding: 9px !important;
    font-weight: 700 !important;
}
/* ============================================================
   FISTIK FINAL FIX — POS TARAFI MENÜ MODALINI DÜZELTİR
   GARSON TARAFI ETKİLENMEZ
   ============================================================ */

/* POS MENÜ OVERLAY TAM EKRAN */
body:not(.waiter-mode) #menu-overlay.open {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-top: 40px !important;
    background: rgba(0,0,0,0.8) !important;
}

/* POS MENÜ KUTUSU */
body:not(.waiter-mode) #menu-overlay .menu-box {
    width: 95% !important;
    max-width: 1700px !important;
    height: 90vh !important;
    background: #0b0b0b !important;
    border-radius: 14px !important;
    padding: 25px !important;
    overflow-y: auto !important;
    box-shadow: 0 0 25px rgba(0,0,0,0.6) !important;
}

/* ÜRÜN GRİDİ (GARSON İLE AYNI) */
body:not(.waiter-mode) #product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
    gap: 18px !important;
    padding: 10px !important;
}

/* ÜRÜN KARTI */
body:not(.waiter-mode) #product-grid .product-card {
    background: #0f0f0f !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 200px !important;
    transition: .2s ease !important;
}

/* Hover */
body:not(.waiter-mode) #product-grid .product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.6) !important;
}

/* Başlık */
body:not(.waiter-mode) .product-card .p-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #fff !important;
}

/* Meta */
body:not(.waiter-mode) .product-card .p-meta {
    font-size: 14px !important;
    color: #cbd5f5 !important;
}

/* Sepete butonu */
body:not(.waiter-mode) .product-card .p-actions button {
    background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
    color: #fff !important;
    padding: 9px !important;
    width: 100% !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}


/* =========================================================
   ROYALPOS THEME-AWARE OVERRIDES (DÜZELTİLMİŞ)
   ========================================================= */

/* Temaya göre genel arkaplan ve yazı rengi */
body{
  background:var(--bg);
  color:var(--ink);
}

/* ---------------- TOPBAR (TEMA UYUMLU) ---------------- */

.topbar{
  /* Temaya göre otomatik değişsin */
  background:var(--topbar-bg,
      linear-gradient(90deg,
        var(--topbar-left,#121212),
        var(--topbar-mid,#1a0a00) 40%,
        var(--topbar-right,#121212) 100%)
  );
  color:var(--topbar-ink,#fff);
}

.topbar .brand-main,
.topbar .brand-sub{
  color:var(--topbar-ink,#fff);
}

.menu a,
.menu button{
  color:var(--topbar-ink,#fff);
}

.menu a:hover,
.menu button:hover{
  background:rgba(255,255,255,0.08);
}


/* ---------------- MASA KARTLARI ---------------- */

.table-sm{
  background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 50%, #0a0a12 100%);
  border-color: rgba(239,68,68,0.18);
  color:var(--ink,#fff);
  transition:0.25s cubic-bezier(.34,1.56,.64,1);
}

.table-sm.busy{
  background: linear-gradient(145deg, #1f1a00 0%, #141000 50%, #0a0a00 100%);
}

.table-sm.free{
  background: linear-gradient(145deg, #141420 0%, #0c0c18 50%, #080810 100%);
}


/* ---------------- ÖDEME PANELİ ---------------- */

.payment-panel{
  background:var(--panel-bg,#0b1120);
  color:var(--ink,#fff);
  border-color:var(--line,#1e293b);
}


/* ---------------- MODAL & MENÜ ---------------- */

.menu-modal,
.modal{
  background:var(--modal-bg,rgba(15,23,42,0.98));
  color:var(--ink,#fff);
}


/* ---------------- ANA BUTONLAR (KASA) ---------------- */

.btn{
  border-radius:999px;
  color:#111;
  font-weight:600;
}

.btn.close{
  background:var(--close,#ef4444);
  color:#fff;
}
.btn.partial{
  background:linear-gradient(135deg,#7f1d1d,#b91c1c) !important; border-color:rgba(239,68,68,0.3) !important;
}
.btn.cash{
  background:var(--cash,#22c55e);
}
.btn.card{
  background:var(--card,#38bdf8);
}
/* --------- Tema Galerisi UI --------- */

.theme-gallery-toggle{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:140;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(15,23,42,0.92);
  color:#f9fafb;
  border:1px solid rgba(148,163,184,0.6);
  font-size:13px;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}
.theme-gallery-toggle span{
  font-size:16px;
}

.theme-gallery-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.78);
  display:none;
  z-index:150;
}
.theme-gallery-overlay.open{
  display:flex;
  align-items:center;
  justify-content:center;
}

.theme-gallery-panel{
  background:#020617;
  border-radius:18px;
  padding:18px;
  width:min(880px, 96vw);
  max-height:80vh;
  overflow:auto;
  box-shadow:0 24px 60px rgba(0,0,0,0.95);
  border:1px solid rgba(148,163,184,0.8);
}
.theme-gallery-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.theme-gallery-header h3{
  margin:0;
  font-size:16px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#e5e7eb;
}
.theme-gallery-close{
  background:none;
  border:none;
  color:#9ca3af;
  font-size:18px;
  cursor:pointer;
}

.theme-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;
}
.theme-card{
  border-radius:14px;
  padding:10px;
  background:radial-gradient(circle at top,#1f2937,#020617);
  border:1px solid rgba(148,163,184,0.6);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.theme-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,0.95);
  border-color:#38bdf8;
}
.theme-swatch{
  height:34px;
  border-radius:10px;
  background:linear-gradient(90deg,var(--swatch-1),var(--swatch-2));
}
.theme-name{
  font-size:13px;
  font-weight:600;
  color:#e5e7eb;
}
.theme-desc{
  font-size:11px;
  color:#9ca3af;
}


/* =========================================================
   ROYALPOS v2 ELITE — THEME AWARE OVERRIDES
   ========================================================= */

/* Gövdeyi temaya bağla */
body{
  background:var(--bg) !important;
  color:var(--ink) !important;
}

/* Topbar ve menü */

.topbar .brand-main,
.topbar .brand-sub{
  color:var(--ink) !important;
}
.menu a,
.menu button{
  color:var(--ink) !important;
}

/* Masa kartları */
.table-sm{
  background:var(--masa-bg,var(--bg)) !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
}

/* Ödeme paneli */
.payment-panel{
  background:var(--panel-bg,var(--bg)) !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
}

/* Modal / Menü */
.menu-modal,
.modal,
.waiter-order-inner{
  background:var(--modal-bg,rgba(15,23,42,0.98)) !important;
  color:var(--ink) !important;
}

/* Buton ana renkleri */
.btn.cash{
  background:var(--cash,#22c55e) !important;
}
.btn.card{
  background:var(--card,#38bdf8) !important;
}
.btn.close{
  background:var(--close,#ef4444) !important;
}
.btn.partial{
  background:linear-gradient(135deg,#7f1d1d,#b91c1c) !important; border-color:rgba(239,68,68,0.3) !important;
}




/* ---------- GARSON ROLES / ROLES BADGE ---------- */
.waiter-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:10px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.8);
  background:radial-gradient(circle at top,#0b1120 0%,#020617 55%,#020617 100%);
  font-size:12px;
  color:#e5e7eb;
  box-shadow:0 4px 12px rgba(0,0,0,0.6);
}

/* ---------- GARSON RAPOR SAYFASI ---------- */
.waiter-report-body{
  min-height:100vh;
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at top,#0b1120 0%,#020617 45%,#020617 100%);
  color:#e5e7eb;
}

.wr-container{
  max-width:960px;
  margin:32px auto;
  padding:0 16px 32px;
}

.wr-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
}

.wr-title{
  font-size:24px;
  font-weight:600;
}

.wr-sub{
  font-size:13px;
  opacity:0.8;
}

.wr-back{
  text-decoration:none;
}

.wr-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin-bottom:24px;
}

.wr-card{
  border-radius:14px;
  padding:14px 16px;
  background:radial-gradient(circle at top,#0f0f0f 0%,#020617 55%,#020617 100%);
  border:1px solid rgba(148,163,184,0.7);
  box-shadow:0 10px 24px rgba(0,0,0,0.85);
}

.wr-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  opacity:0.75;
  margin-bottom:4px;
}

.wr-value{
  font-size:20px;
  font-weight:600;
}

.wr-products{
  border-radius:14px;
  padding:16px 18px 20px;
  background:radial-gradient(circle at top,#020617 0%,#020617 55%,#020617 100%);
  border:1px solid rgba(148,163,184,0.6);
  box-shadow:0 10px 24px rgba(0,0,0,0.85);
}

.wr-products h3{
  font-size:16px;
  margin:0 0 10px;
}

.wr-products table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.wr-products th,
.wr-products td{
  padding:6px 4px;
  border-bottom:1px solid rgba(15,23,42,0.9);
}

.wr-products th{
  text-align:left;
  font-weight:500;
  opacity:0.8;
}

.wr-products td:nth-child(2),
.wr-products td:nth-child(3){
  text-align:right;
}

/* ---------- YENİ SETTINGS SAYFASI İÇİN ARKA PLAN ---------- */
.settings-body{
  min-height:100vh;
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at top,#0b1120 0%,#020617 45%,#020617 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.settings-card{
  width:100%;
  max-width:520px;
  background:radial-gradient(circle at top left,#020617 0%,#020617 55%,#020617 100%);
  border-radius:18px;
  padding:24px 26px 22px;
  box-shadow:0 18px 40px rgba(0,0,0,0.9);
  border:1px solid rgba(148,163,184,0.7);
  color:#e5e7eb;
}

.settings-card h2{
  font-size:20px;
  margin:0 0 4px;
}

.settings-card .sub{
  font-size:12px;
  opacity:0.72;
  margin-bottom:18px;
}

.settings-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.settings-grid label{
  font-size:12px;
  opacity:0.8;
  margin-bottom:2px;
}

.settings-grid input{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(148,163,184,0.7);
  padding:7px 10px;
  background:#020617;
  color:#e5e7eb;
}

.settings-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:16px;
}


/* ==== ULTRA MUTFAK TASARIMI (ROYALPOS) ==== */

.kitchen-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kitchen-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kitchen-main {
  padding: 16px;
}

.kitchen-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.kitchen-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kitchen-filter {
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.04);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.kitchen-filter.active {
  background: #00c896;
  border-color: #00c896;
  color: #000;
  transform: translateY(-1px);
}

.kitchen-orders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.kitchen-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.7);
  font-size: 14px;
}

.kitchen-card {
  background: radial-gradient(circle at top left, rgba(0,200,150,0.16), transparent 55%),
              radial-gradient(circle at bottom right, rgba(0,0,0,0.7), #050608);
  border-radius: 18px;
  padding: 12px 12px 10px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 22px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kitchen-card-warning {
  border-color: #ffc857;
  box-shadow: 0 0 0 1px rgba(255,200,87,0.35), 0 10px 24px rgba(0,0,0,0.65);
}

.kitchen-card-critical {
  border-color: #ff5d73;
  box-shadow: 0 0 0 1px rgba(255,93,115,0.5), 0 10px 26px rgba(0,0,0,0.8);
}

.kitchen-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
}

.kitchen-card-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kitchen-card-table {
  font-weight: 600;
  font-size: 15px;
}

.kitchen-card-time {
  font-size: 12px;
  opacity: 0.75;
}

.kitchen-card-header-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.kitchen-chip {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.85);
}

.kitchen-chip-time {
  border-color: rgba(0,200,150,0.7);
  background: rgba(0,200,150,0.12);
  color: #a7ffdf;
}

.kitchen-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.kitchen-item-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 12px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.04);
}

.kitchen-item-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 60%;
}

.kitchen-item-name {
  font-size: 14px;
  font-weight: 500;
}

.kitchen-item-note {
  font-size: 12px;
  opacity: 0.8;
}

.kitchen-item-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.kitchen-status {
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  margin-bottom: 2px;
}

.status-pending {
  border-color: #ffc857;
  background: rgba(255,200,87,0.16);
  color: #ffe9ac;
}

.status-preparing {
  border-color: #4da3ff;
  background: rgba(77,163,255,0.16);
  color: #c4e0ff;
}

.status-ready {
  border-color: #00c896;
  background: rgba(0,200,150,0.18);
  color: #a7ffdf;
}

/* Genel kitchen buton stili */
.kitchen-btn {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 13px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.07s ease;
}

.kitchen-btn.pill {
  font-size: 12px;
  padding: 6px 12px;
}

.kitchen-btn.small {
  font-size: 11px;
  padding: 4px 10px;
}

.kitchen-btn.ghost {
  background: transparent;
  border-style: dashed;
}

.kitchen-btn.primary {
  border-color: #4da3ff;
  background: rgba(77,163,255,0.18);
}

.kitchen-btn.success {
  border-color: #00c896;
  background: rgba(0,200,150,0.22);
}

.kitchen-btn.muted,
.kitchen-btn.muted:hover {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.7);
}

.kitchen-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.5);
}

@media (max-width: 768px) {
  .kitchen-main {
    padding: 10px;
  }
  .kitchen-orders {
    grid-template-columns: minmax(0, 1fr);
  }
  .kitchen-card {
    padding: 10px 10px 8px;
  }
  .kitchen-item-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .kitchen-item-info {
    max-width: 100%;
  }
  .kitchen-item-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
/* === ÖDEME PANELİ – TEMA DESTEKLİ === */
.payment-panel{
  background:var(--panel-bg);
  color:var(--ink);
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow:0 0 30px rgba(0,0,0,0.65);
}

.paybox input[type=number],
.paybox input[type=text]{
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--line);
}

.order-summary{
  background:var(--panel-bg);
  color:var(--ink);
  border-radius:12px;
  border:1px solid var(--line);
}

.order-summary .summary-row{
  background:transparent;
  color:var(--ink);
}

.order-summary .summary-row strong{
  color:var(--ink);
}

.orders th,
.orders td{
  color:var(--ink);
  background:transparent;
}

.orders thead{
  background:transparent;
}

/* =============== TEMA DROPDOWN ULTRA FIX =================== */

/* Açılır menünün kutusu */
.theme-select select,
#theme-select,
select.theme-picker {
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 14px !important;
    padding: 8px 12px;
    font-weight: 500;
}

/* Açılmış menü (dropdown listesi) */
select.theme-picker option {
    background: rgba(20, 20, 20, 0.85) !important;
    color: #fff !important;
    padding: 10px;
}

/* Üzerine gelindiğinde seçenek görünür kalsın */
select.theme-picker option:hover {
    background: rgba(255, 255, 255, 0.20) !important;
    color: #fff !important;
}

/* Açılır liste Mac/Apple hissiyatı */
select.theme-picker:focus {
    outline: none !important;
    border-color: rgba(255,255,255,0.45) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.25) !important;
}
#notify-panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 260px;
    z-index: 9999;
}

.notify-item {
    background: #00a86b;
    color: white;
    padding: 12px;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    animation: fadeIn 0.3s ease;
    font-size: 15px;
}

@keyframes fadeIn {
    from { transform: translateY(20px); opacity:0; }
    to   { transform: translateY(0); opacity:1; }
}



/* =========================================================
   FISTIK CORPORATE SHARP THEME OVERRIDES
   - Köşeler keskin (border-radius:0)
   - Kartlar, modal, ödeme paneli ve popup tam tema renklerine bağlı
   ========================================================= */

.menu-modal,
.modal{
  background: var(--modal-bg, #020617) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  border-radius: 0 !important;
}

.product-card{
  background: var(--card, var(--panel-bg, #020617)) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 0 rgba(0,0,0,0.5) !important;
}

.product-card .p-meta{
  color: var(--ink) !important;
}

.product-card .p-actions button{
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 0 !important;
}

/* Ödeme paneli, kartlar, masalar keskin köşeli */
.payment-panel,
.order-summary,
.paybox,
.table-sm,
.card,
.btn,
.search-wrap input,
.area-tabs .area-tab,
.tab,
.chip,
.theme-menu,
.log-panel,
.notify-panel{
  border-radius: 0 !important;
}

/* Arka planlar da tema renkleriyle uyumlu kalsın */
.order-summary,
.paybox{
  background: var(--panel-bg, #020617) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}



/* Logo + RoyalPOS text */
.logo-group{display:flex;align-items:center;gap:10px;margin-right:20px;}
.logo-img{height:40px;width:auto;object-fit:contain;filter:none!important;}
.logo-text{font-size:24px;font-weight:600;color:#bfc2c7;font-family:'Poppins',sans-serif;}
/* --- LOGO ORTALAMA DÜZENİ (Fıstık) --- */

header.topbar {
    position: relative;
}

.logo-group {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
}

.logo-img {
    height: 38px;
}

.logo-text {
    font-size: 24px;
    font-weight: 600;
    color: #bfc2c7;
}
/* === DESKTOP LOGO ORTALAMA === */
@media (min-width: 768px) {
    header.topbar {
        position: relative;
    }

    .logo-group {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 10;
    }
}

/* === MOBİL DÜZEN (logo sola geçer, menü taşmaz) === */
@media (max-width: 767px) {
    .logo-group {
        position: relative;
        left: 0;
        transform: none;
        margin-left: 10px;
        margin-top: 5px;
        display: flex;
        gap: 8px;
    }

    .logo-img {
        height: 28px;
    }

    .logo-text {
        font-size: 20px;
    }
}
/* ================================
   PREMIUM GOLD LOGO EFFECT
   ================================ */

.logo {
  height: 38px;
  width: 38px;
  object-fit: cover;
  border-radius: 8px;

  /* ALTIN GRADIENT ÇERÇEVE */
  padding: 2px;
  background: linear-gradient(135deg, #ef4444, #f6e27a, #e05a00);

  /* IŞIK / GLOW */
  box-shadow:
    0 0 8px rgba(239,68,68, 0.6),
    0 0 12px rgba(239,68,68, 0.35),
    0 0 18px rgba(239,68,68, 0.25);

  /* HAFİF PARLAMA ANİMASYONU */
  animation: logoGlow 3s infinite alternate ease-in-out;
}

/* PARLAMA ANİMASYONU */
@keyframes logoGlow {
  from {
    box-shadow:
      0 0 6px rgba(239,68,68, 0.5),
      0 0 10px rgba(239,68,68, 0.3);
    transform: scale(1);
  }
  to {
    box-shadow:
      0 0 14px rgba(246, 226, 122, 0.8),
      0 0 24px rgba(184, 134, 11, 0.55);
    transform: scale(1.05);
  }
}



/* VIP FULL – theme transition animation */
body.theme-fade-out {
  opacity: 0;
  transition: opacity 0.22s ease-out;
}
body.theme-fade-in {
  opacity: 1;
  transition: opacity 0.26s ease-in;
}

/* Example of using grid size for tables */
body[data-grid="large"] .tables-grid .table-card {
  transform: scale(1.02);
}
body[data-grid="small"] .tables-grid .table-card {
  transform: scale(0.92);
}

/* Icon styling examples */
body[data-icon="gold"] .icon,
body[data-icon="gold"] .waiter-badge i {
  color:#facc15;
}
body[data-theme="vip-emerald-neon"] .icon {
    text-shadow:0 0 6px rgba(56,189,248,.8);
}
body[data-icon="purple"] .icon {
  text-shadow:0 0 6px rgba(168,85,247,.8);
}

/* Logo sizing examples */
body[data-logo="large-gold"] .logo {
  width:180px;
  filter:drop-shadow(0 0 12px rgba(250,204,21,.75));
}
body[data-logo="medium-neon"] .logo {
  width:140px;
  filter:drop-shadow(0 0 10px rgba(56,189,248,.75));
}
body[data-logo="small-gold"] .logo {
  width:110px;
  filter:drop-shadow(0 0 6px rgba(250,204,21,.6));
}

.logo{width:165px!important;filter:drop-shadow(0 0 10px rgba(255,215,0,0.55));}

.log-panel,.log-header,.log-title{color:var(--ink,#3a2f1d)!important;}
.log-panel{background:var(--panel-bg,rgba(255,252,245,0.9))!important;}
/* --- VIP Tema Buton Fix --- */

.transfer-btn{
    background:var(--panel-bg) !important;
    color:var(--ink) !important;
    border:1px solid var(--line) !important;
    border-radius:10px;
}

.transfer-btn.disabled{
    opacity:.4 !important;
    pointer-events:none !important;
}
/* --- VIP Logo Fix --- */

.logo,
.nav-logo img,
.brand-logo,
.logo-img{
    height:42px !important;
    max-height:42px !important;
    width:auto !important;
    max-width:170px !important;
    object-fit:contain !important;
}
/* --- VIP: Transfer Butonları Tema Fix --- */

/* Hem "Kalanı Nakite Aktar" hem "Kalanı Karta Aktar" için */
button.transfer-btn,
.transfer-btn,
button[data-action="transfer"],
button[data-type="transfer"]{
    background: var(--panel-bg) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* Pasif / disabled hali */
button.transfer-btn.disabled,
.transfer-btn.disabled{
    background: var(--panel-bg) !important;
    color: var(--ink) !important;
    opacity: 0.35 !important;
    pointer-events: none !important;
}
/* --- VIP: btn-dark zorla tema uyumlu hale getir --- */

button.btn-dark,
.btn-dark{
    background: var(--panel-bg) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
}

/* disabled hali */
button.btn-dark.disabled,
.btn-dark.disabled{
    opacity: .35 !important;
    background: var(--panel-bg) !important;
    color: var(--ink) !important;
}
/* --- VIP: Kalanı Nakite/Karta Aktar Button Fix --- */

button.transfer,
.btn.transfer,
.transfer {
    background: var(--panel-bg) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* disabled hali */
button.transfer.disabled,
.btn.transfer.disabled,
.transfer.disabled {
    opacity: .35 !important;
    background: var(--panel-bg) !important;
    color: var(--ink) !important;
}
/* --- VIP: Admin Modal Tema Fix --- */

/* Modal genel kutu */
.modal {
    background: var(--panel-bg) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
}

/* Modal header */
.modal-header {
    background: var(--panel-bg) !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--line) !important;
}

/* Admin tab bar */
.admin-tabs {
    background: var(--panel-bg) !important;
    border-bottom: 1px solid var(--line) !important;
}

.admin-tabs .tab {
    background: var(--panel-bg) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
}

.admin-tabs .tab.active {
    background: var(--brand) !important;
    color: #fff !important;
}

/* İç liste */
.admin-pane {
    background: var(--panel-bg) !important;
    color: var(--ink) !important;
}

/* Liste item */
.list li {
    background: var(--bg) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
}

/* Inputlar */
.admin-pane input,
.admin-pane select {
    background: var(--bg) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
}

/* Sil butonu */
.list button {
    background: var(--panel-bg) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
}
/* ===============================
   VIP DARK UI FIX (Doğru)
   =============================== */
body[data-theme="vip-black-royale"],
body[data-theme="vip-emerald-neon"],
body[data-theme="vip-midnight-lux"],
body[data-theme="vip-deep-space-blue"],
body[data-theme="vip-carbon-fiber"],
body[data-theme="vip-galaxy-purple"],
body[data-theme="vip-ruby-metal"],
body[data-theme="vip-olive-dark-gold"],
body[data-theme="vip-steel-grey-luxury"],
body[data-theme="vip-onyx-matte-black"],
body[data-theme="vip-copper-metal"] {
    --topbar-bg: #0c0f16;
    --topbar-text: #ffffff;
    --dropdown-bg: #0f0f0f;
    --dropdown-text: #e5e7eb;
}
/* ===============================
   VIP LIGHT UI FIX (Doğru)
   =============================== */
body[data-theme="vip-marble-white-gold"],
body[data-theme="vip-frost-white"],
body[data-theme="vip-rose-gold"],
body[data-theme="vip-gold-sunset"],
body[data-theme="vip-pearl-silver"],
body[data-theme="vip-teal-neon-wave"],
body[data-theme="vip-royal-brown-coffee"],
body[data-theme="vip-neon-ice"],
body[data-theme="vip-crystal-mint"] {
    --topbar-bg: #ffffff;
    --topbar-text: #130404;
    --dropdown-bg: #ffffff;
    --dropdown-text: #333333;
}
/* ===============================
   VIP UI COMPONENT BINDING
   =============================== */
.header,
.navbar,
.topbar {
    background: var(--topbar-bg) !important;
    color: var(--topbar-text) !important;
}

.header * {
    color: var(--topbar-text) !important;
}

/* Theme dropdown menu */
.theme-menu {
    background: var(--dropdown-bg) !important;
    color: var(--dropdown-text) !important;
    border: 1px solid rgba(255,255,255,0.15);
}

.theme-menu .theme-option {
    background: transparent !important;
    color: var(--dropdown-text) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.theme-menu .theme-option:hover {
    background: rgba(255,255,255,0.07) !important;
}
/* ====== GLOBAL FIX ====== */
html, body {
    min-height: 100%;
    height: auto;
    background: var(--bg-main);
}

body {
    background: linear-gradient(
        180deg,
        #0b3d2e 0%,
        #06251c 100%
    );
    background-attachment: fixed;
}
/* =========================================================
   EMPTY STATE LAYOUT FIX (BOZMADAN)
   Masa yokken tema ve grid çökmesini engeller
   ========================================================= */

/* Sayfa her zaman tam yüksekliği alsın */
html, body {
  min-height: 100%;
}

/* Ana içerik alanı */
.main-wrap {
  min-height: calc(100vh - 120px); /* topbar + chips */
  align-items: stretch;
}

/* Masa alanı */
#tables-section {
  min-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
}

/* Grid alanı boşken de alan kaplasın */
.tables-grid {
  flex: 1;
}

/* Hiç masa yokken görünmez dolgu */
.tables-grid:empty::after {
  content: "";
  display: block;
  height: 100%;
}

/* Arka planın altı siyaha düşmesin */
body {
  background-attachment: scroll !important;
}
/* =========================================================
   EMPTY STATE / MASA YOKKEN LAYOUT FIX (SON ve DOĞRU)
   ========================================================= */

/* Sayfa çökmesin */
html, body {
  min-height: 100%;
}

/* Ana gövde her zaman tam alan */
.main-wrap {
  min-height: calc(100vh - 120px);
  align-items: stretch;
  width: 100%;
}

/* Masa alanı tam genişlik */
#tables-section {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Grid boş olsa bile alan kaplasın */
.tables-grid {
  flex: 1;
  width: 100%;
}

/* Masa yokken görünmez dolgu */
.tables-grid:empty::after {
  content: "";
  display: block;
  height: 100%;
}

/* TEK ALAN VARSA (Bahçe vs) chip bar gizlensin */
.chips:has(.chip:only-child) {
  display: none;
}

/* ===============================
   MASA YOKSA → ÖDEME PANELİ KAPANIR
   =============================== */

body.no-table-selected .payment-panel {
  display: none !important;
}

/* Panel kapalıyken menü tam açılsın */
body.no-table-selected .menu-modal {
  right: 16px !important;
}
/* =========================================================
   EMPTY STATE LAYOUT FIX (BOZMADAN)
   Masa yokken tema çökmesini engeller
   ========================================================= */

/* Sayfa her zaman tam yüksekliği alsın */
html, body {
  min-height: 100%;
}

/* Ana içerik alanı çökmesin */
.main-wrap {
  min-height: calc(100vh - 120px); /* topbar + chips payı */
  align-items: stretch;
}

/* Masa alanı boşken de yüksekliğini korusun */
#tables-section {
  min-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
}

/* Grid boş olsa bile alanı doldursun */
.tables-grid {
  flex: 1;
}

/* Hiç masa yoksa görünmez dolgu (layout fix) */
.tables-grid:empty::after {
  content: "";
  display: block;
  height: 100%;
}

/* Arka planın altı siyaha düşmesini engelle */
body {
  background-attachment: scroll !important;
}
.tables-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:16px;
  align-content:flex-start;
}
/* ===============================
   MASA / ALAN BOŞKEN LAYOUT FIX
   =============================== */

/* Alan sekmeleri tekse gizle */
.chips:has(.chip:only-child) {
  display: none;
}

/* Ana layout her zaman tam genişlik */
.main-wrap {
  width: 100%;
}

/* Masa alanı her durumda genişlesin */
#tables-section {
  flex: 1 1 100%;
  min-width: 0;
}

/* Masa yoksa grid tüm alanı kaplasın */
.tables-grid:empty {
  min-height: calc(100vh - 200px);
  width: 100%;
}

/* Grid boşken görünmez dolgu */
.tables-grid:empty::after {
  content: "";
  display: block;
  flex: 1;
}
/* =========================================================
   SABİT MASA KARTI BOYUTU (İÇERİKTEN BAĞIMSIZ)
   ========================================================= */

/* Masa kartı ana kutusu */
.table-card,
.masa,
.table {
  width: 180px;          /* 👉 orta boy genişlik */
  height: 120px;         /* 👉 SABİT yükseklik */
  flex: 0 0 180px;       /* grid içinde sabit kalsın */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  box-sizing: border-box;
}

/* Masa adı */
.table-card .table-name,
.masa .table-name,
.table .table-name {
  max-width: 100%;
  padding: 0 8px;

  font-size: 16px;
  font-weight: 600;
  text-align: center;

  /* 🔥 UZUN İSİMLERİ KIRP */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Masa alt bilgileri (tutar, durum vs.) */
.table-card .table-info,
.masa .table-info,
.table .table-info {
  font-size: 13px;
  margin-top: 6px;
  white-space: nowrap;
}
.dashboard-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin:20px;
}

.stat-card{
  background:#020617;
  border:1px solid #1e293b;
  border-radius:14px;
  padding:18px;
  color:white;
  font-size:16px;
}

.stat-card strong{
  font-size:28px;
  display:block;
  margin-top:6px;
}

.stat-card.green{border-left:5px solid #22c55e}
.stat-card.orange{border-left:5px solid #f97316}
.stat-card.gold{border-left:5px solid #ef4444}
.stat-card.blue{border-left:5px solid #38bdf8}
.dashboard-btn{
  background:#020617;
  border:1px solid #38bdf8;
  color:#38bdf8;
}

.dashboard-btn:hover{
  background:#38bdf8;
  color:#020617;
}
/* ===============================
   ADMIN TOP BAR (Ürün Yönetimi)
   =============================== */

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}

/* Sol taraf: başlık */
.top h2{
  margin:0;
  white-space:nowrap;
}

/* Sağ taraf: butonlar */
.top a.btn{
  margin-left:8px;
}

/* Butonları sağa toplamak için */
.top > a{
  display:inline-flex;
}
/* ===============================
   ADMIN PRODUCTS TOP BAR FIX
   =============================== */
.top-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:20px 20px 14px 20px;
}

.top-bar h2{
  margin:0;
  font-size:28px;
  font-weight:800;
}

/* Sadece bu buton normal boyutta olsun */
.top-bar .btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  height:auto;
  width:auto;
}

/* Senin mevcut .btn mavi ise buna gerek yok,
   ama güvenli olsun diye ekliyorum */
.btn-primary{
  background:#0b5cff;
  color:#fff;
  border:0;
  text-decoration:none;
}
.dashboard-cards{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:20px;
    margin-top:20px;
}

.dash-card{
    background:linear-gradient(180deg,#0f172a,#020617);
    border:1px solid #1e293b;
    border-radius:14px;
    padding:18px;
    color:white;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.dash-card.green{
    border-left:5px solid #22c55e;
}

.dash-card.blue{
    border-left:5px solid #38bdf8;
}

.dash-title{
    font-size:14px;
    opacity:.8;
    margin-bottom:8px;
}

.dash-value{
    font-size:26px;
    font-weight:700;
}
/* ===============================
   LAPTOP POS SCALE FIX (SAFE)
   =============================== */

@media (max-width: 1600px) {
  body {
    zoom: 0.90;
  }
}

@media (max-width: 1366px) {
  body {
    zoom: 0.82;
  }
}
/* Laptop ödeme paneli daraltma */
@media (max-width: 1366px) {
  :root{
    --panelW: 30vw;
  }
}
/* ===============================
   ADMIN - KATEGORİLER LAPTOP FIX
   =============================== */
@media (max-width: 1366px) {
  .admin-categories,
  .category-list,
  .categories {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
  }
}
/* ===============================
   POS MENÜ GRID LAPTOP FIX
   =============================== */
@media (max-width: 1366px) {
  .menu-grid,
  .product-grid,
  .items-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px;
  }

  .menu-item,
  .product-card {
    padding: 10px !important;
    font-size: 14px !important;
  }
}
/* =========================================
   POS MENU GRID – LAPTOP SAME AS DESKTOP
   ========================================= */

/* Laptop ve küçük ekranlar */
@media (max-width: 1366px) {

  /* Menü ürün grid’i */
  .menu-grid,
  .product-grid,
  .items-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Menü kartları */
  .menu-item,
  .product-card {
    padding: 12px !important;
    border-radius: 14px;
  }

  .menu-item h4,
  .product-card h4 {
    font-size: 15px !important;
  }

  .menu-item p,
  .product-card p {
    font-size: 13px !important;
  }

  .menu-item button,
  .product-card button {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
}
/* ===============================
   MENU RESPONSIVE FORCE FIX
   Laptop / Small Screen
   =============================== */

@media (max-width: 1440px) {

  /* Menü açıkken içindeki tüm kartlar */
  #menu-overlay * {
    box-sizing: border-box;
  }

  /* Ürün kartlarını ZORLA küçült */
  #menu-overlay button,
  #menu-overlay .card,
  #menu-overlay .product,
  #menu-overlay .item,
  #menu-overlay div[onclick],
  #menu-overlay [role="button"] {
    max-width: 32% !important;
    min-width: 32% !important;
    flex: 0 0 32% !important;
  }

}

/* Daha küçük laptoplar */
@media (max-width: 1280px) {
  #menu-overlay button,
  #menu-overlay .card,
  #menu-overlay .product,
  #menu-overlay .item,
  #menu-overlay div[onclick],
  #menu-overlay [role="button"] {
    max-width: 48% !important;
    min-width: 48% !important;
    flex: 0 0 48% !important;
  }
}
/* ===============================
   TOPBAR LAPTOP ALIGN FIX
   =============================== */

@media (max-width: 1440px) {

  header.topbar,
  .topbar {
    width: 100%;
    max-width: 100%;
  }

  .topbar > *,
  .topbar-inner,
  .topbar-content {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .topbar {
    display: flex;
    justify-content: center !important;
  }

}
@media (max-width: 1440px) {
  .topbar-inner {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* ===============================
   MENU CATEGORY BUTTONS (TABBAR)
   =============================== */

.tabbar{
  display: flex;
  gap: 12px;
  padding: 10px 12px;
}

.tabbar button{
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.15);
  background: linear-gradient(180deg, #111, #0a0a0a);
  color: #ddd;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
}

/* Hover */
.tabbar button:hover{
  background: linear-gradient(180deg, #1b1b1b, #0f0f0f);
  color: #fff;
  transform: translateY(-1px);
}

/* Aktif kategori */
.tabbar button.active{
  background: linear-gradient(180deg, #ef4444, #b8895b);
  color: #130404;
  border-color: #e6b98a;
  box-shadow: 0 6px 18px rgba(212,163,115,.35);
}
#menu-close{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 18px;
  transition: all .2s ease;
}

#menu-close:hover{
  background: #e74c3c;
  border-color: #e74c3c;
  transform: scale(1.05);
}
/* TOPBAR SOL BLOK FIX */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;              /* logo ile yazı arası */
  padding-left: 14px;     /* en sola yasla */
  min-width: unset;       /* boşluk engelleyici */
}

.topbar-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.topbar-title {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.topbar-title .title-main {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.topbar-title .title-sub {
  font-size: 11px;
  opacity: 0.7;
}
/* ===== TOPBAR GERÇEK SOL YASLAMA ===== */
.topbar,
.topbar > .container {
  max-width: 100% !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.topbar > .container {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* logo + yazı bloğu */
.topbar .left,
.topbar-left {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

/* logo */
.topbar img,
.topbar .logo,
.topbar-logo {
  margin-left: 0 !important;
}
/* ===== TOPBAR LOGO TAM SOLA YASLA ===== */
header.topbar {
  justify-content: flex-start !important;
}

/* logo + yazı bloğu */
header.topbar .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  padding-left: 12px !important;
}

/* logo */
header.topbar .logo {
  margin-left: 0 !important;
}

/* yazı varsa */
header.topbar .brand-text {
  margin-left: 8px !important;
}
.smart-comment-card{
  margin-top:18px;
  background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(59,130,246,0.10));
  border:1px solid rgba(148,163,184,0.22);
  border-radius:16px;
  padding:16px 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.smart-comment-title{
  font-size:15px;
  font-weight:800;
  color:#e5e7eb;
  margin-bottom:8px;
}

.smart-comment-text{
  font-size:14px;
  line-height:1.55;
  color:rgba(226,232,240,0.95);
}
.status-badge{
    font-weight:700;
    font-size:14px;
    margin-bottom:8px;
}

.smart-comment-card.status-success{
    border-left:5px solid #2ecc71;
}

.smart-comment-card.status-warning{
    border-left:5px solid #f1c40f;
}

.smart-comment-card.status-danger{
    border-left:5px solid #e74c3c;
}
/* --- SİYAH TEMA DÜZELTMELERİ --- */

/* 1. TÜM ARKA PLANLARI KOYULAŞTIR */
body, html, .content-wrapper {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* 2. SOL MENÜ VE ÜST BAR (Lacivert sorunu buradadır) */
.main-sidebar, .main-header, .navbar, .sidebar-dark-primary {
    background-color: #000000 !important; /* Tam Siyah */
    background-image: none !important;    /* Varsa mavi geçişleri kaldır */
    border-bottom: 1px solid #333;        
}

/* 3. LOGO KISMI */
.brand-link {
    background-color: #000000 !important;
    border-bottom: 1px solid #333 !important;
}

/* 4. KARTLAR VE KUTULAR (Beyaz/Mavi kalmasın) */
.card, .info-box, .small-box {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border: 1px solid #333 !important;
}

/* 5. TABLO BAŞLIKLARI */
.table {
    background-color: #1e1e1e !important;
    color: #fff !important;
}
.table thead th {
    background-color: #000000 !important;
    border-color: #444 !important;
}

/* 6. AÇILIR MENÜLER */
.dropdown-menu, .modal-content {
    background-color: #1e1e1e !important;
    border: 1px solid #444 !important;
}
.dropdown-item {
    color: #fff !important;
}
.dropdown-item:hover {
    background-color: #333 !important;
}
/* ==========================================================
   🏆 PREMIUM MENÜ TASARIMI (GOLD & DARK)
   ========================================================== */

/* 1. Menü Penceresi (Modal) Arka Planı */
.menu-modal {
    background-color: #0f0f0f !important; /* Çok derin siyah */
    border: 1px solid #333;
}

/* 2. Kategori Butonları (Üst Taraf) */
/* Kaba dikdörtgenler yerine şık hap (pill) şekli */
.tabbar {
    padding: 15px 5px;
    gap: 10px;
}

.tabbar .tab {
    background-color: #130404 !important; /* Koyu gri zemin */
    color: #bbb !important;                /* Hafif gri yazı */
    border: 1px solid #333 !important;
    border-radius: 50px !important;        /* Tam yuvarlak köşeler */
    padding: 10px 25px !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

/* Seçili Kategori veya Üzerine Gelince */
.tabbar .tab.active, .tabbar .tab:hover {
    background: linear-gradient(135deg, #ef4444, #b5952f) !important; /* Altın Gradyan */
    color: #000 !important;  /* Siyah yazı (okunabilirlik için) */
    border-color: #ef4444 !important;
    box-shadow: 0 0 15px rgba(239,68,68, 0.4); /* Hafif altın parlaması */
    transform: translateY(-2px);
}

/* 3. Ürün Kartları (Izgara Düzeni) */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Kartları orantılı dizer */
    gap: 20px;
    padding: 20px;
}

/* Tekil Ürün Kartı */
.product-card {
    background-color: #130404 !important;
    border: 1px solid #333 !important;
    border-radius: 15px !important;
    padding: 20px !important;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

/* Karta Mouse ile Gelince */
.product-card:hover {
    border-color: #ef4444 !important; /* Kenarlar altın olur */
    transform: translateY(-5px);      /* Hafif yukarı kalkar */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    background-color: #222 !important;
}

/* Ürün Resmi (Varsa) */
.product-card img {
    border-radius: 10px;
    margin-bottom: 10px;
    object-fit: cover;
    border: 1px solid #333;
}

/* Ürün İsmi */
.product-card h4, .product-card .pc-title {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600;
    margin: 10px 0 5px 0;
    line-height: 1.4;
}

/* Ürün Fiyatı ve Stok Bilgisi */
.product-card p {
    color: #aaa !important;
    font-size: 13px !important;
    margin-bottom: 15px;
}
/* Fiyatın kendisi daha vurgulu olsun */
.product-card p b, .product-card .price-tag {
    color: #ef4444 !important; /* Altın Rengi */
    font-size: 18px !important;
    font-weight: 700;
    display: block;
    margin-top: 5px;
}

/* 4. "Sepete Ekle" Butonu */
.product-card button {
    background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
}

.product-card button:hover {
    background: linear-gradient(135deg, #f87171, #ffa055) !important;
    color: #fff !important;
}

/* Arama Kutusu Güzelleştirme */
#product-search {
    background-color: #130404 !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    border-radius: 50px;
    padding: 10px 20px;
}
#product-search:focus {
    border-color: #ef4444 !important;
    outline: none;
}
/* ==========================================================
   ✅ TEMA UYUMLULUK MOTORU (BOZULMALARI ÖNLER)
   ========================================================== */

/* 1. Body Arka Planı: Sabit renk yerine değişken kullan */
body, html {
    background: var(--bg) !important;
    color: var(--ink) !important;
    min-height: 100vh;
}

/* 2. Kartlar ve Paneller: Temaya göre renk alsın */
.payment-panel, .product-card, .modal, .menu-modal, .admin-pane, .card {
    background: var(--panel-bg, #130404) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
}

/* 3. Menü Ürün Kartları: Tema renklerini zorunlu kıl */
.product-card .p-title, .product-card h4 {
    color: var(--ink) !important;
}

.product-card .product-price, .price-tag {
    color: var(--accent) !important; /* Tema altınsa altın, maviyse mavi olur */
}

/* 4. Butonlar: Temanın vurgu rengini al */
.btn-primary, .product-card button, .tab.active {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
}

/* 5. Sabit Lacivert/Siyah Kırıcı: Lacivert kalan yerleri temizle */
.main-sidebar, .navbar, .topbar {
    background: var(--topbar-bg, var(--bg)) !important;
    border-color: var(--line) !important;
}
/* =========================================================
   SADECE MASA KARTLARI GÖRSEL MAKYAJ (İŞLEYİŞ AYNI)
   ========================================================= */

.table-sm {
  /* Temel Şekil ve Cam Efekti */
  min-height: 130px !important;
  border-radius: 20px !important; /* Daha yuvarlak ve modern köşeler */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(8px); /* Arka planı hafif bulandırır (Cam efekti) */
  
  /* Derinlik ve Gölge */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 
              0 4px 6px -2px rgba(0, 0, 0, 0.2),
              inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}

/* Masa Üzerine Gelince Parlama */
.table-sm:hover {
  transform: translateY(-5px) scale(1.03) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6) !important;
  z-index: 10;
}

/* Masa Adı (Vurgulu) */
.tname {
  font-size: 18px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Masa Alt Bilgisi (Tutar vs) */
.ttotal, .tamount {
  background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.06));
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 14px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(239,68,68,0.25);
  color: #ef4444;
  text-align: center;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* BOŞ MASA */
.table-sm.free {
  background: linear-gradient(145deg, #141420 0%, #0c0c18 50%, #080810 100%) !important;
}

/* DOLU MASA: Kırmızı gradient */
.table-sm.occupied, .table-sm.busy {
  background: linear-gradient(145deg, #2a0a0a, #1a0505) !important;
  border-color: rgba(239,68,68,0.45) !important;
}

/* Masa Numarası Süslemesi (Opsiyonel: Sol üstte küçük bir numara efekti) */
.table-sm::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -20%;
  width: 50%;
  height: 50%;
  background: rgba(255, 255, 255, 0.03);
  transform: rotate(45deg);
  pointer-events: none;
}
.table-sm {
  background: var(--masa-bg) !important;
  border: none !important;
  border-radius: 30px !important; /* Çok yuvarlak köşeler */
  box-shadow: 10px 10px 20px rgba(0,0,0,0.2), -5px -5px 15px rgba(255,255,255,0.02) !important;
}

.table-sm:hover {
  transform: scale(1.05) !important;
  background: var(--accent) !important; /* Hoverda tema rengine bürünme */
  color: #000 !important;
}

.tamount {
  background: rgba(255,255,255,0.1) !important;
  border: none !important;
  font-size: 11px !important;
  color: var(--accent) !important;
}
.table-sm {
  background: linear-gradient(145deg, #1e293b, #0f172a) !important;
  border: 1px solid rgba(239,68,68, 0.3) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.1) !important;
  overflow: hidden;
}

/* Dolu masada altın-kırmızı geçişi */
.table-sm.occupied {
  background: linear-gradient(135deg, #800000 0%, #4a0000 100%) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 20px rgba(239,68,68, 0.2) !important;
}

.tname {
  color: #f3f4f6 !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
}
.table-sm {
  background: var(--masa-bg) !important;
  border-radius: 30px !important;
  box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.4), 
              -8px -8px 16px rgba(255, 255, 255, 0.02) !important;
  border: none !important;
}

.table-sm.occupied {
  background: #ef4444 !important;
  box-shadow: inset 6px 6px 12px #b91c1c, 
              inset -6px -6px 12px #f87171 !important;
}
/* Topbar'ı sola yaslamak için güncelleme */
.topbar {
  justify-content: flex-start !important; /* Her şeyi sola çek */
  gap: 30px; /* Logo ile menü arasında boşluk bırak */
}

/* Menü listesini sola yasla */
.menu {
  justify-content: flex-start !important;
  margin-right: auto; /* Saat ve Tema butonunu en sağda bırakmak istersen bunu kullan */
}
/* Menü linkleri için modern efektler */
.menu a, 
.menu button {
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.3s ease-in-out !important;
  position: relative;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.1); /* Hafif yazı derinliği */
}

/* Üzerine gelince (Hover) efekti */
.menu a:hover, 
.menu button:hover {
  color: var(--accent) !important; /* Tema vurgu rengine dönüşsün */
  text-shadow: 0 0 10px var(--accent), 0 0 20px rgba(255, 255, 255, 0.2); /* Parlama efekti */
  transform: translateY(-1px); /* Hafif yukarı kalkma */
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Aktif sayfa alt çizgisi efekti */
.menu a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--accent);
  transition: width 0.3s ease;
}

.menu a:hover::after {
  width: 100%; /* Üzerine gelince alt çizgi uzasın */
}
/* Satış Butonu Özel Efekt */
.menu .btn-success, [data-page="pos"] {
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* QR Admin Butonu Özel Efekt */
.menu .btn-primary, .qr-admin-btn {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4) !important;
  border: none !important;
}
/* Menü Yazı Efektleri */
.menu a, .menu button {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 8px 15px !important;
    border-radius: 8px !important;
}

/* Hover (Üzerine Gelince) Efekti */
.menu a:hover, .menu button:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important; /* Cam efekti */
    text-shadow: 0 0 15px var(--accent, #ef4444), 0 0 25px rgba(255, 255, 255, 0.3);
    transform: translateY(-2px); /* Çok hafif yukarı zıplama */
}

/* "Satış" Butonuna Özel Glow (Yeşil Parlama) */
.menu a.active, .menu .btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4) !important;
    color: white !important;
}
/* =========================================================
   NAVBAR ELEMENT RE-POSITIONING (FULL LEFT)
   ========================================================= */

/* 1. Barın ana taşıyıcısını serbest bırak */
header.topbar, .topbar {
    display: flex !important;
    justify-content: flex-start !important; /* Boşlukları sona atar */
    padding: 0 15px !important;
    gap: 0 !important;
}

/* 2. Logo Grubu: Genişliğini sabit tut, sağa boşluk ver */
.brand, .logo-group, .brand-main {
    display: flex !important;
    align-items: center !important;
    margin-right: 30px !important; /* Menü ile arasındaki mesafe */
    flex: 0 0 auto !important;
}

/* 3. MENÜ BUTONLARI: Zorla sola yasla */
.menu {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important; /* Kalan boşluğu doldurur */
    margin-left: 0 !important;
    margin-right: auto !important; /* Diğer her şeyi (saat vb) sağa iter */
}

/* 4. Saat ve Tema Grubu: Bunları en sağ köşeye kilitle */
.theme-dropdown, 
.menu-clock, 
.theme-btn {
    margin-left: 15px !important; /* Aralarındaki boşluk */
    flex: 0 0 auto !important;
}

/* =========================================================
   YAZI EFEKTLERİ (MODERN GLOW)
   ========================================================= */

.menu a, .menu button {
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 700 !important;
    transition: all 0.25s ease !important;
    position: relative !important;
}

/* Parlama efekti */
.menu a:hover, .menu button:hover {
    color: var(--accent, #ef4444) !important;
    text-shadow: 0 0 10px var(--accent, #ef4444), 0 0 20px rgba(255,255,255,0.2) !important;
    transform: scale(1.05) !important;
}
/* =========================================================
   RESPONSIVE NAVBAR & LEFT ALIGNMENT ENGINE
   ========================================================= */

/* 1. Genel Bar Yapısı - Otomatik Ölçekleme */
header.topbar, .topbar {
    display: flex !important;
    flex-wrap: nowrap !important; /* Satır kırılmasını önle */
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 0 1.5% !important; /* Ekran genişliğine göre dinamik padding */
    gap: 0 !important;
    min-height: 60px;
}

/* 2. Logo ve Yazı Bloğu - Sabit Kalır */
.brand, .logo-group {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-right: clamp(10px, 3vw, 40px) !important; /* Ekrana göre boşluğu ayarlar */
}

/* 3. ANA MENÜ - Dinamik Sola Yaslama ve Ölçekleme */
.menu {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: clamp(4px, 1vw, 12px) !important; /* Buton arası boşluk ekrana göre daralır */
    flex: 1 1 auto !important; /* Kalan boşluğu yönetir */
    margin-left: 0 !important;
    margin-right: auto !important;
    overflow-x: auto; /* Küçük ekranlarda taşarsa kaydırılabilir yapar */
    scrollbar-width: none; /* Scroll barı gizle */
}

/* 4. Menü Yazıları ve Efektler - Ekran Boyutuna Duyarlı */
.menu a, .menu button {
    white-space: nowrap !important; /* Yazıların alt satıra geçmesini önler */
    font-size: clamp(11px, 0.9vw, 14px) !important; /* Yazı boyutu ekrana göre büyür/küçülür */
    padding: clamp(5px, 0.6vw, 10px) clamp(8px, 1vw, 16px) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease-in-out !important;
}

/* 5. Sağ Taraf (Tema & Saat) - Daima En Sağda */
.theme-dropdown, .menu-clock {
    flex: 0 0 auto !important;
    margin-left: 10px !important;
}

/* =========================================================
   LAPTOP & KÜÇÜK EKRANLAR İÇİN ÖZEL DÜZELTME (1366px ve altı)
   ========================================================= */
@media (max-width: 1400px) {
    .brand-sub, .title-sub {
        display: none !important; /* Yer kazanmak için alt başlıkları gizle */
    }
    .logo, .logo-img {
        height: 32px !important; /* Logoyu küçült */
    }
}

/* Menü Butonları Glow (Parlama) Efekti */
.menu a:hover {
    color: var(--accent, #ef4444) !important;
    text-shadow: 0 0 12px var(--accent), 0 0 24px rgba(255,255,255,0.2) !important;
    transform: translateY(-1px) !important;
}
.payment-panel {
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%) !important;
    border-radius: 20px !important;
}

.orders thead th {
    background: linear-gradient(90deg, #334155, #1e293b) !important;
    color: #94a3b8 !important;
}

.paybox input {
    border: 2px solid #334155 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5) !important;
}

.paybox input:focus {
    border-color: #38bdf8 !important;
    background: #000 !important;
}

/* Tutar Alanı Parlaması */
.paybox .total {
    background: linear-gradient(90deg, #f97316, #ef4444) !important;
    color: #fff !important;
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.6); }
    100% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.4); }
}
/* =========================================================
   SEÇENEK 1: KURUMSAL MAT (FLAT DESIGN)
   ========================================================= */

.payment-panel {
    background: #18181b !important; /* Tam mat koyu gri */
    border: 1px solid #27272a !important;
    border-radius: 12px !important;
    box-shadow: none !important; /* Gölge yok */
    padding: 24px !important;
}

/* Başlık */
.pp-header {
    border-bottom: 2px solid #27272a;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.pp-table {
    color: #e4e4e7 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
}

/* Tablo */
.orders table {
    background: #27272a !important;
    border-radius: 8px;
}

.orders th {
    background: #3f3f46 !important;
    color: #a1a1aa !important;
    font-weight: 600;
}

.orders td {
    border-bottom: 1px solid #3f3f46 !important;
    color: #d4d4d8 !important;
}

/* Ödeme Alanı */
.paybox {
    background: transparent !important;
    border: 1px dashed #3f3f46 !important;
    border-radius: 8px;
    margin-top: 15px;
}

.paybox .total {
    background: #27272a !important;
    color: #fff !important;
    font-size: 20px !important;
    border-radius: 6px;
    padding: 12px;
    text-align: center;
}

/* Sade Butonlar */
.btn {
    border-radius: 6px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: background 0.2s !important;
}

.btn.cash { background: #16a34a !important; color: white !important; }
.btn.card { background: #0284c7 !important; color: white !important; }
.btn.close { background: #dc2626 !important; color: white !important; }
.btn:hover { filter: brightness(1.1); }
/* =========================================================
   LOG PANEL - CYBER TERMINAL STYLE
   ========================================================= */

.log-panel {
    background: rgba(10,10,10,0.97) !important;
    border: 1px solid rgba(239,68,68,0.2) !important;
    border-top: 2px solid rgba(239,68,68,0.5) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 10px 16px !important;
    box-shadow: 0 -6px 24px rgba(239,68,68,0.08), 0 -2px 8px rgba(0,0,0,0.6) !important;
}

.log-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(239,68,68,0.1) !important;
}

.log-title {
    color: #ef4444 !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
}
.log-title::before {
    content: "● " !important;
    color: #ef4444 !important;
    animation: log-pulse 1.5s ease-in-out infinite !important;
}
@keyframes log-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

#log-list {
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    color: #ccc !important;
    max-height: 72px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(239,68,68,0.3) transparent !important;
}
#log-list::-webkit-scrollbar { width: 4px !important; }
#log-list::-webkit-scrollbar-thumb { background: rgba(239,68,68,0.3) !important; border-radius: 4px !important; }

#log-list div {
    padding: 3px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
}
#log-list div:last-child { border-bottom: none !important; }
#log-list div::before { content: "" !important; }
/* =========================================================
   MODERN CHIPS (MEKAN SEKMELERİ)
   ========================================================= */

/* Sekme şeridi */
.chips {
    border-bottom: none !important; /* Alt çizgiyi kaldır */
    padding: 10px 20px !important;
    gap: 12px !important;
}

/* Sekme butonları */
.chip {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50px !important; /* Tam yuvarlak köşeler (Hap şekli) */
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important; /* Pasif renk */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Pasifken üzerine gelince */
.chip:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

/* Aktif (Seçili) Sekme */
.chip.active {
    background: var(--accent, #ef4444) !important; /* Tema rengi */
    color: #000 !important; /* Siyah yazı */
    border-color: var(--accent, #ef4444) !important;
    box-shadow: 0 0 15px var(--accent, #ef4444) !important; /* Neon Parlama */
    font-weight: 800 !important;
    transform: scale(1.05) !important;
}

/* Solundaki noktayı kaldır (Modern görünümde gerek yok) */
.chip::before {
    display: none !important;
}
/* =========================================================
   AMBIENT BACKGROUND (ATMOSFERİK IŞIK)
   ========================================================= */

body {
    /* Merkeze doğru hafif açılan, kenarlarda kararan derin yapı */
    background: radial-gradient(circle at 50% 0%, #1e293b 0%, #0f172a 40%, #020617 100%) !important;
    background-attachment: fixed !important; /* Scroll yaparken oynamasın */
}
/* =========================================================
   SCROLLBAR FIX (KAYDIRMA ÇUBUĞU DÜZELTME)
   ========================================================= */

/* Tüm site genelinde */
::-webkit-scrollbar {
    width: 6px !important; /* Çok ince */
    height: 6px !important;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important; /* Şeffaf gri */
    border-radius: 10px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4) !important; /* Üzerine gelince belirginleşsin */
}
/* Google Fonts - Inter (Modern UI Fontu) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body, html, button, input, select, textarea {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased !important; /* Yazıları pürüzsüzleştirir */
    -moz-osx-font-smoothing: grayscale !important;
}
/* =========================================================
   CLICK ANIMATION (FİZİKSEL BASMA HİSSİ)
   ========================================================= */

/* Tüm butonlar, kartlar ve tıklanabilir öğeler için */
.btn, .chip, .menu a, .menu button, .table-sm, .product-card button {
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), 
                background 0.2s ease, 
                box-shadow 0.2s ease !important;
}

/* Tıklama anı (Active State) */
.btn:active, .chip:active, .menu a:active, .menu button:active, .table-sm:active {
    transform: scale(0.96) !important; /* Hafifçe küçül */
    filter: brightness(0.9); /* Hafifçe karar */
}
/* =========================================================
   SMOOTH MODAL ENTRY (SÜZÜLEN PENCERELER)
   ========================================================= */

/* Animasyon Tanımı */
@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Ödeme Paneli ve Modallara Uygula */
.payment-panel, .modal, .menu-modal {
    animation: slideUpFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
/* =========================================================
   MODERN TOAST NOTIFICATIONS (BİLDİRİMLER)
   ========================================================= */

/* Bildirim Kutusu (Varsayımsal sınıf: .toast veya .alert) */
.toast, .alert-box, .notify-item {
    background: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideInRight 0.4s ease forwards !important;
}

/* Başarılı İşlem (Yeşil Kenar) */
.toast.success, .notify-item.success {
    border-left: 4px solid #10b981 !important;
}

/* Hata (Kırmızı Kenar) */
.toast.error, .notify-item.error {
    border-left: 4px solid #ef4444 !important;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
/* =========================================================
   LOGO TEXT EFFECT - ROYAL GOLD LUXURY
   ========================================================= */

/* ROYAL Yazısı (Ana Başlık) */
.brand-main {
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important; /* Yazı içini boşaltıp gradyanı gösterir */
    font-weight: 900 !important;
    font-size: 26px !important;
    letter-spacing: 1px !important;
    text-shadow: 0 2px 10px rgba(179, 135, 40, 0.3) !important;
    font-family: 'Inter', sans-serif !important;
}

/* Alt Yazı (Premium Cafe...) */
.brand-sub {
    color: #ef4444 !important; /* Mat Altın */
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 4px !important; /* Harfleri iyice açarak premium hava katar */
    text-transform: uppercase !important;
    margin-top: 2px !important;
    opacity: 0.9 !important;
}
/* =========================================================
   LOGO TEXT EFFECT - CINEMATIC MODERN
   ========================================================= */

/* ROYAL Yazısı */
.brand-main {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    letter-spacing: 2px !important; /* Harfleri biraz ayır */
    text-shadow: 0 10px 30px rgba(255, 255, 255, 0.4) !important; /* Arkaya büyük ışık */
}

/* Alt Yazı */
.brand-sub {
    background: linear-gradient(90deg, transparent, #fff, transparent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255,255,255,0.6);
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 6px !important; /* Çok geniş aralık */
    text-transform: uppercase !important;
}
/* =========================================================
   ADMIN PANEL - NEON GRID
   ========================================================= */

.modal {
    background: #050505 !important;
    border: 2px solid #333 !important;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.1) !important;
}

/* Sekmeler */
.admin-tabs .tab.active {
    background: #00f2ff !important; /* Neon Cyan */
    color: #000 !important;
    box-shadow: 0 0 15px #00f2ff !important;
    font-weight: 900 !important;
}

/* Listeler */
.list li {
    background: #0a0a0a !important;
    border: 1px solid #222 !important;
    border-left: 3px solid #333 !important;
    color: #00f2ff !important; /* Neon yazı */
    font-family: 'Courier New', monospace !important;
}

.list li:hover {
    border-left-color: #00f2ff !important;
    background: #111 !important;
}

/* Inputlar */
.form-row input {
    background: #000 !important;
    border: 1px solid #333 !important;
    color: #00f2ff !important;
    font-family: 'Courier New', monospace !important;
}

.form-row input:focus {
    border-color: #00f2ff !important;
}
/* =========================================================
   REPORT PANEL - HIGH CONTRAST
   ========================================================= */

.report-grid .card {
    background: #000 !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
}

.card-title { color: #888 !important; }
.card-value { color: #fff !important; font-family: 'Courier New', monospace !important; }

/* Tablo */
.report-table th {
    background: #333 !important;
    color: #fff !important;
}

.report-table tr:nth-child(even) {
    background: #111 !important;
}

.report-table td {
    border: 1px solid #222 !important;
    color: #ddd !important;
}
/* =========================================================
   REPORT PANEL - GLASS ANALYTICS
   ========================================================= */

/* Kartlar */
.report-grid .card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    text-align: center !important;
}

.card-value {
    font-size: 32px !important;
    font-weight: 300 !important; /* İnce ve Zarif */
    color: #fff !important;
}

/* Tablo */
.report-table {
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.report-table th {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    padding: 12px !important;
}

.report-table td {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding: 12px !important;
    color: #cbd5e1 !important;
}

.report-table tr:last-child td {
    border-bottom: none !important;
}
/* =========================================================
   SETTINGS PAGE - MODERN GLASS TECH
   ========================================================= */

.settings-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 30px !important;
    padding: 40px !important;
    max-width: 750px !important;
    width: 100% !important;
}

/* Başlıklar */
.settings-card h2 {
    background: linear-gradient(90deg, #fff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800 !important;
}

/* Güvenlik Kutusu */
.security-box {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px dashed rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
}

/* Inputlar */
.settings-grid input {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #fff !important;
    height: 48px !important;
    padding-left: 15px !important;
}

.settings-grid input:focus {
    background: rgba(0, 0, 0, 0.5) !important;
    border-color: #38bdf8 !important; /* Neon Mavi */
}

/* Kaydet Butonu */
.settings-actions button {
    background: #38bdf8 !important;
    color: #000 !important;
    border-radius: 50px !important; /* Hap şeklinde buton */
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.4) !important;
}
/* =========================================================
   DASHBOARD - MODERN GLASS CARDS
   ========================================================= */

.dashboard-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 20px !important;
}

/* Cam Efektli Kartlar */
.stat-card {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    padding: 20px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
    text-align: center !important; /* Ortalanmış yazı */
    min-height: 150px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* İkon veya Başlık */
.stat-card strong {
    color: rgba(255,255,255,0.6) !important;
    font-size: 12px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding-bottom: 8px !important;
}

/* Değerler */
.stat-card span {
    font-size: 32px !important;
    font-weight: 300 !important; /* İnce ve zarif font */
    color: #fff !important;
}

/* Ciro Alanı */
.dashboard-right-panel {
    background: rgba(0,0,0,0.2) !important;
    border-radius: 20px !important;
    padding: 20px !important;
}
/* =========================================================
   ROYAL PREMIUM ÜRÜN KARTI (YENİ TASARIM)
   ========================================================= */

.royal-product-card {
    background: #121212 !important; /* Mat Siyah Kutu */
    border: 1px solid #333 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 180px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
    margin-bottom: 20px !important; /* Kartlar birbirine yapışmasın */
}

/* Üzerine gelince Altın Işıltı */
.royal-product-card:hover {
    transform: translateY(-5px) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 10px 30px rgba(239,68,68, 0.2) !important;
}

/* Kategori Etiketi */
.badge-category {
    font-size: 10px !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    background: rgba(255,255,255,0.1) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

/* Stok Durumu */
.badge-stock {
    font-size: 11px !important;
    color: #22c55e !important; /* Yeşil */
    font-weight: bold !important;
    float: right !important;
}
.badge-stock.critical { color: #ef4444 !important; } /* Kırmızı */

/* Ürün Başlığı */
.product-title {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 15px 0 5px 0 !important;
    text-align: center !important;
}

/* Fiyat */
.product-price {
    color: #ef4444 !important; /* Altın */
    font-size: 22px !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin-bottom: 15px !important;
    text-shadow: 0 0 10px rgba(239,68,68, 0.3) !important;
}

/* Sepete Ekle Butonu */
.btn-add-cart {
    width: 100% !important;
    background: linear-gradient(135deg, #ef4444, #e05a00) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 800 !important;
    padding: 10px !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
}

.royal-product-card:hover .btn-add-cart {
    box-shadow: 0 0 15px rgba(239,68,68, 0.5) !important;
}
/* =========================================================
   ROYAL KARE IZGARA SİSTEMİ (Küçültme & Dizme)
   ========================================================= */

/* 1. Ürünlerin Yan Yana Dizilmesi İçin Grid Ayarı */
#product-grid {
    display: grid !important;
    /* Ekran genişliğine göre sığdığı kadar kutu koy (En az 160px genişliğinde) */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; 
    gap: 15px !important; /* Kutular arası boşluk */
    padding: 10px !important;
}

/* 2. KARE KART TASARIMI (Simsiyah & Altın Efektli) */
.royal-product-card {
    /* Renk ve Şekil */
    background: #000000 !important; /* Tam Siyah */
    border: 1px solid #222 !important; /* Çok silik gri çerçeve */
    aspect-ratio: 1 / 1 !important; /* KARE OLMAYA ZORLA */
    border-radius: 12px !important;
    
    /* İçerik Düzeni */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 12px !important;
    
    /* Efektler */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.8) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Hover (Üzerine Gelince) - Hafif Altın Parlama */
.royal-product-card:hover {
    transform: translateY(-5px) !important;
    border-color: #ef4444 !important; /* Altın Çerçeve */
    box-shadow: 0 0 20px rgba(239,68,68, 0.15) !important; /* Altın Işık */
    background: #080808 !important; /* Çok hafif aç */
}

/* Üst Kısım (Stok) */
.card-header {
    display: flex !important;
    justify-content: flex-end !important; /* Sağa yasla */
    font-size: 10px !important;
}
.badge-stock { color: #2ecc71 !important; font-weight: bold !important; }
.badge-stock.critical { color: #e74c3c !important; }
.badge-category { display: none !important; } /* Yer kaplamasın diye kategoriyi gizledik */

/* Orta Kısım (İsim ve Fiyat) */
.card-body {
    text-align: center !important;
    flex-grow: 1 !important; /* Boşluğu doldur */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

.product-title {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.3 !important;
}

.product-price {
    color: #ef4444 !important; /* Altın Rengi */
    font-size: 18px !important;
    font-weight: 800 !important;
    text-shadow: 0 0 10px rgba(239,68,68, 0.2) !important;
}

/* Alt Kısım (Buton - Sadece Hoverda Çıksın veya Küçük Dursun) */
.card-footer {
    margin-top: auto !important;
}

.btn-add-cart {
    width: 100% !important;
    background: transparent !important; /* İçi boş olsun */
    border: 1px solid #ef4444 !important; /* Altın Çizgi */
    color: #ef4444 !important;
    padding: 6px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    transition: 0.3s !important;
}

.royal-product-card:hover .btn-add-cart {
    background: #ef4444 !important; /* Üzerine gelince içi dolsun */
    color: #000 !important;
}
/* =========================================================
   MENÜ ARKAPLANI DÜZELTME (LACİVERTİ YOK ET)
   ========================================================= */

/* 1. Menü Penceresinin Ana Rengi (Simsiyah) */
.menu-modal, .modal-content, .modal {
    background-color: #000000 !important; /* O lacivert rengi siler, tam siyah yapar */
    border: 1px solid #333 !important; /* İnce koyu gri kenarlık */
    box-shadow: 0 0 50px rgba(0,0,0,0.9) !important; /* Derin gölge */
}

/* 2. Menünün Üst Başlığı (Masa Adı Yazan Yer) */
.modal-header {
    background-color: #050505 !important; /* Siyaha çok yakın gri */
    border-bottom: 1px solid #222 !important;
}

/* 3. Arama Kutusu ve Kategori Alanı (Yapışkan Üst Kısım) */
.stick {
    background-color: #000000 !important;
    border-bottom: 1px solid #222 !important;
}

/* 4. Arama Kutusunun Kendisi */
#product-search {
    background: #121212 !important; /* Mat siyah */
    color: #fff !important;
    border: 1px solid #333 !important;
}

#product-search:focus {
    border-color: #ef4444 !important; /* Tıklayınca altın olsun */
    box-shadow: 0 0 10px rgba(239,68,68, 0.2) !important;
}

/* 5. Arkadaki Yarı Saydam Perde (Overlay) */
.menu-overlay, .overlay {
    background: rgba(0, 0, 0, 0.9) !important; /* Mavimsi değil, siyah transparan */
    backdrop-filter: blur(5px) !important; /* Arkası hafif bulanıklaşsın */
}

/* 6. Kategori Butonları (Tabs) */
.tab {
    background: transparent !important;
    border: 1px solid #333 !important;
    color: #888 !important;
}

.tab.active {
    background: #ef4444 !important; /* Seçili olan ALTIN */
    color: #000 !important; /* Yazısı SİYAH */
    border-color: #ef4444 !important;
    font-weight: bold !important;
}
/* =========================================================
   ANTİ-YEŞİL KORUMA KODU (HER ŞEYİ SİYAH/ALTIN YAPAR)
   ========================================================= */

/* 1. Header (Üst Bar) Rengini Zorla */
.topbar, header, nav {
    background: #000000 !important;
    border-bottom: 1px solid #333 !important;
}

/* 2. O Yeşil Butonları (Satış, Masa vb.) Altın Yap */
#go-sales, #go-cashier, #go-kitchen, .btn-success, .btn-primary {
    background: linear-gradient(135deg, #ef4444, #e05a00) !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 0 0 10px rgba(239,68,68, 0.3) !important;
    font-weight: bold !important;
}

/* 3. "Tamamını Nakit Öde" gibi Yeşil Dev Butonlar */
.btn.cash, .btn.card, #btn-cash, #btn-card {
    background: #121212 !important;
    border: 1px solid #ef4444 !important;
    color: #ef4444 !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
}
.btn.cash:hover, .btn.card:hover {
    background: #ef4444 !important;
    color: #000 !important;
}

/* 4. Seçili Alan (Bahçe/Teras) Butonları */
.chip.active {
    background: #ef4444 !important;
    color: #000 !important;
    border-color: #ef4444 !important;
    font-weight: bold !important;
}
.chip {
    background: #111 !important;
    color: #888 !important;
    border: 1px solid #333 !important;
}

/* 5. "Adizyon Yazdır" Butonu */
#btn-print-receipt {
    background: #333 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
}
/* =========================================================
   ADMIN PANELİ - ÜRÜN YÖNETİMİ (ROYAL TASARIM)
   ========================================================= */

/* 1. Ürün Ekleme Formundaki Kutular (Kategori, Ad, Fiyat, Stok) */
#prod-cat, #prod-name, #prod-price, #prod-stock {
    background: #0a0a0a !important;      /* Simsiyah Zemin */
    border: 1px solid #333 !important;   /* Koyu Gri Çerçeve */
    color: #ef4444 !important;           /* Altın Yazı */
    padding: 10px 15px !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    transition: 0.3s !important;
}

/* Kutulara tıklayınca parlasın */
#prod-cat:focus, #prod-name:focus, #prod-price:focus, #prod-stock:focus {
    border-color: #ef4444 !important;    /* Altın Çerçeve */
    outline: none !important;
    box-shadow: 0 0 10px rgba(239,68,68, 0.2) !important;
}

/* Placeholder (Silik yazı) Rengi */
#prod-cat::placeholder, #prod-name::placeholder, 
#prod-price::placeholder, #prod-stock::placeholder {
    color: #555 !important;
}

/* 2. "Ürün Ekle" Butonu */
#add-product {
    background: linear-gradient(135deg, #ef4444, #e05a00) !important; /* Altın Gradyan */
    color: #000 !important;
    font-weight: 900 !important;
    border: none !important;
    text-transform: uppercase !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    box-shadow: 0 0 15px rgba(239,68,68, 0.2) !important;
    cursor: pointer !important;
}
#add-product:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(239,68,68, 0.4) !important;
}

/* 3. Aşağıdaki Ürün Listesi (Mevcut Ürünler) */
#product-list li {
    background: #111 !important;         /* Satır Rengi */
    border: 1px solid #222 !important;
    color: #eee !important;              /* Ürün Adı Rengi */
    padding: 12px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
}

/* Listedeki Fiyat ve Stok Rakamları */
#product-list li strong {
    color: #ef4444 !important;           /* Rakamlar Altın Olsun */
    font-family: 'Courier New', monospace !important;
    font-size: 15px !important;
}

/* 4. Listedeki Küçük Butonlar (+, -, Sil, Düzenle) */
#product-list button, #product-list a.btn {
    background: transparent !important;
    border: 1px solid #444 !important;
    color: #aaa !important;
    margin-left: 5px !important;
    transition: 0.2s !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
}

/* Sil Butonu (Kırmızımsı ama şık) */
#product-list button[data-del] {
    border-color: #962525 !important;
    color: #e74c3c !important;
}
#product-list button[data-del]:hover {
    background: #c0392b !important;
    color: #fff !important;
    border-color: #c0392b !important;
}

/* Artı/Eksi ve Düzenle Butonları (Altın) */
#product-list button[data-plus], 
#product-list button[data-minus],
#product-list a.btn {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}
#product-list button[data-plus]:hover, 
#product-list button[data-minus]:hover,
#product-list a.btn:hover {
    background: #ef4444 !important;
    color: #000 !important;
}

/* =========================================================
   WAITER MENU FIX (boyut + menü içinde sipariş özeti)
   - Garson ekranında ürün kartları/menü butonları çok büyümesin
   - Menü açıkken masadaki siparişler altta anlık görünsün
   ========================================================= */

/* Varsayılan gizli (kasa ekranında görünmez) */
.menu-order-summary{ display:none; }

/* Garson modunda ödeme paneli gizli olduğu için menü modalı tam genişlik olsun */
body.waiter-mode .menu-modal{ right:16px !important; }

/* Garson modunda ürün grid boyutunu POS ile uyumlu yap */
body.waiter-mode #product-grid{
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 15px !important;
  padding: 10px !important;
}

/* Garson modunda kartları biraz küçült */
body.waiter-mode .royal-product-card{ padding: 12px !important; }
body.waiter-mode .product-title{ font-size: 14px !important; }
body.waiter-mode .product-price{ font-size: 18px !important; }
body.waiter-mode .btn-add-cart{ font-size: 11px !important; padding: 6px !important; }

/* Menü içi sipariş özeti (sadece garson) */
body.waiter-mode .menu-order-summary{
  display:block;
  background:#050505;
  border-top:1px solid #222;
  padding:10px 12px;
}

body.waiter-mode .menu-order-summary .mos-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

body.waiter-mode .menu-order-summary .mos-title{
  font-weight:700;
  font-size:13px;
  color:#fff;
}

body.waiter-mode .menu-order-summary .mos-sub{
  font-size:12px;
  opacity:0.9;
  color:#ef4444;
  margin-top:2px;
}

body.waiter-mode .menu-order-summary .mos-list{
  margin-top:8px;
  max-height:160px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}

body.waiter-mode .menu-order-summary .mos-empty{
  font-size:13px;
  opacity:0.8;
  padding:6px 2px;
}

body.waiter-mode .menu-order-summary .mos-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:1px solid #222;
  border-radius:10px;
  background:#0b0b0b;
}

body.waiter-mode .menu-order-summary .mos-name{
  flex:1;
  font-size:13px;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.waiter-mode .menu-order-summary .mos-qty{
  width:34px;
  text-align:center;
  font-weight:700;
  color:#ef4444;
}

body.waiter-mode .menu-order-summary .mos-btn{
  border:1px solid #333;
  background:#111;
  color:#fff;
  border-radius:8px;
  padding:4px 8px;
  font-size:12px;
}

body.waiter-mode .menu-order-summary .mos-btn:hover{ filter:brightness(1.1); }
body.waiter-mode .menu-order-summary .mos-btn.del{ color:#ff6b6b; border-color:#3a1f1f; }

/* =========================================================
   ÜRÜN GÖRSELİ + GARSON MENÜSÜ KOMPAKT DÜZELTME (SON)
   - Garson menüsünde kartlar büyümesin
   - Ürün görselleri menüde görünsün
   ========================================================= */

/* Ürün görseli (kasa + garson) */
.product-thumb-wrap{
  width:100%;
  height:78px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #1f1f1f;
  background:#0b0b0b;
  margin-bottom:8px;
}

.product-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Garson modunda daha kompakt */
body.waiter-mode #product-grid{
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 10px !important;
}

body.waiter-mode .royal-product-card{
  /* kare zorlamayı kaldır, daha kısa kart */
  aspect-ratio: auto !important;
  min-height: 150px !important;
  padding: 10px !important;
}

body.waiter-mode .product-thumb-wrap{ height:62px; margin-bottom:6px; }
body.waiter-mode .product-title{ font-size: 13px !important; margin: 6px 0 4px 0 !important; }
body.waiter-mode .product-price{ font-size: 16px !important; margin-bottom: 8px !important; }
body.waiter-mode .btn-add-cart{ font-size: 11px !important; padding: 6px 8px !important; }

/* =========================================================
   MENU / GARSON UI - v6 HOTFIX
   - Kasa ve garson menüsü: kartlar ekrana sığsın, butonlar görünsün
   - Menü kapatma (✕) her zaman üstte ve tıklanabilir olsun
   - Garson sipariş modalında (Siparişleri Aç) kapatma butonu siparişlerin altında kalmasın
   ========================================================= */

/* Menü modal temel yerleşim (çakışan eski kuralları bastır) */
#menu-overlay .menu-modal{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

/* Menü header her zaman en üstte ve tıklanabilir */
#menu-overlay .menu-modal .modal-header{
  position:relative !important;
  z-index:200 !important;
  flex:0 0 auto !important;
}

/* Menü kapatma butonu: her zaman sağ üstte, üstte, tıklanır */
#menu-close{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  z-index:300 !important;
  pointer-events:auto !important;
}

/* Kategori + arama kısmı header altında kalsın */
#menu-overlay .menu-modal .stick{
  position:relative !important;
  z-index:120 !important;
  flex:0 0 auto !important;
}

/* Ürün grid: modal içinde kaydırılabilir alan */
#menu-overlay #product-grid{
  flex:1 1 auto !important;
  overflow:auto !important;
  min-height:0 !important; /* flex overflow için şart */
}

/* Garson menüsündeki sipariş özeti: altta kalsın ama üstteki kapatmayı ezmesin */
#menu-overlay .menu-order-summary{
  flex:0 0 auto !important;
  z-index:110 !important;
}

/* ---------------------------------------------------------
   KART BOYUTLARI (Kasa + Garson)
   --------------------------------------------------------- */

/* KASA / NORMAL: daha kompakt ve buton görünür */
body:not(.waiter-mode) #product-grid{
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 12px !important;
  padding: 12px !important;
}

/* Garson: biraz daha küçük */
body.waiter-mode #product-grid{
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 10px !important;
  padding: 10px !important;
}

/* Büyük ekranlarda daha çok sütun (kartlar büyümesin) */
@media (min-width: 1600px){
  body:not(.waiter-mode) #product-grid{ grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) !important; }
  body.waiter-mode #product-grid{ grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)) !important; }
}

/* Kartlar: kare zorlamayı kaldır, eşit ve kompakt */
.royal-product-card{
  aspect-ratio:auto !important;
  min-height: 175px !important;
  padding: 10px 10px 12px !important;
}

body.waiter-mode .royal-product-card{
  min-height: 160px !important;
  padding: 8px 8px 10px !important;
}

/* Buton kesin görünür (bazı eski temalar gizleyebiliyor) */
.btn-add-cart{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* Görsel alanı: kart içinde net görünsün */
.product-thumb-wrap{ height:70px !important; }
body.waiter-mode .product-thumb-wrap{ height:60px !important; }

/* ---------------------------------------------------------
   GARSON: "Siparişleri Aç" alt modalı - header üstte kalsın
   --------------------------------------------------------- */

.waiter-order-modal .waiter-order-inner{
  display:flex !important;
  flex-direction:column !important;
  max-height: 80vh !important;
}

.wo-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background: #020617 !important;
  padding: 4px 0 10px 0 !important;
}

.wo-list{
  flex: 1 1 auto !important;
  max-height: none !important;
  overflow:auto !important;
  min-height: 0 !important;
}

/* v6 ek: Kart içeriği yukarı hizalansın, buton altta kalsın (Sepete Ekle görünür) */
.royal-product-card .card-body{ justify-content:flex-start !important; }
.royal-product-card .card-footer{ margin-top:auto !important; }

/* =========================================================
   v7 MENÜ DÜZELTME
   - Kategori az ürün olsa bile kartlar büyümesin (Çaylar vb.)
   - Tüm kategorilerde eşit kart boyutu (Kruvasan vb. uzama yok)
   - Garson menüsünde masaya dön butonu
   - Masadaki siparişler alanı daha temiz ve kullanışlı
   ========================================================= */

/* Garson modunda menü daha fazla yüksekliğe sığsın */
body.waiter-mode #menu-overlay .menu-modal{ bottom: 16px !important; right: 16px !important; }

/* Menü header her zaman üstte kalsın */
#menu-overlay .menu-modal .modal-header{
  position: sticky !important;
  top: 0 !important;
  background: #050505 !important;
}

/* Ürün grid: kartlar sabit genişlikte kalsın, az ürün olunca büyümesin */
#menu-overlay #product-grid{
  display: grid !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
}

body:not(.waiter-mode) #menu-overlay #product-grid{
  grid-template-columns: repeat(auto-fill, minmax(150px, 150px)) !important;
}

body.waiter-mode #menu-overlay #product-grid{
  grid-template-columns: repeat(auto-fill, minmax(135px, 135px)) !important;
}

@media (min-width: 1600px){
  body:not(.waiter-mode) #menu-overlay #product-grid{ grid-template-columns: repeat(auto-fill, minmax(145px, 145px)) !important; }
  body.waiter-mode #menu-overlay #product-grid{ grid-template-columns: repeat(auto-fill, minmax(125px, 125px)) !important; }
}

/* Kartlar: eşit yükseklik, boşluklar temiz */
#menu-overlay .royal-product-card{
  aspect-ratio: auto !important;
  height: 178px !important;
  min-height: unset !important;
  margin: 0 !important;
}

body.waiter-mode #menu-overlay .royal-product-card{
  height: 162px !important;
}

/* Kart içi tipografi: isim 2 satırı geçmesin, taşma olmasın */
#menu-overlay .product-title{
  font-size: 13px !important;
  line-height: 1.25 !important;
  margin: 6px 0 4px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 32px !important;
}

#menu-overlay .product-price{
  font-size: 16px !important;
  margin: 0 0 8px 0 !important;
}

#menu-overlay .product-thumb-wrap{
  height: 62px !important;
  margin-bottom: 6px !important;
}

body.waiter-mode #menu-overlay .product-thumb-wrap{ height: 56px !important; }

#menu-overlay .btn-add-cart{
  font-size: 11px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
}

/* --- Masadaki siparişler (garson menüsü alt bar) --- */
body:not(.waiter-mode) #menu-order-summary{ display: none !important; }

body.waiter-mode #menu-order-summary{
  background: rgba(0,0,0,0.55) !important;
  border-top: 1px solid #262626 !important;
  padding: 10px !important;
}

body.waiter-mode #menu-order-summary .mos-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: 10px !important;
}

body.waiter-mode #menu-order-summary .mos-actions{
  display:flex !important;
  gap: 8px !important;
}

body.waiter-mode #mos-back{
  border-color: rgba(239,68,68,0.55) !important;
  color: #ef4444 !important;
}

body.waiter-mode #menu-order-summary .mos-list{
  max-height: 128px !important;
  overflow: auto !important;
  padding-top: 8px !important;
}

body.waiter-mode #menu-order-summary .mos-item{
  display:grid !important;
  grid-template-columns: 1fr auto auto auto auto !important;
  gap: 8px !important;
  align-items:center !important;
  padding: 8px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.03) !important;
  margin-bottom: 8px !important;
}

body.waiter-mode #menu-order-summary .mos-name{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

body.waiter-mode #menu-order-summary .mos-btn{
  min-width: 34px !important;
  height: 30px !important;
  border-radius: 10px !important;
}

/* =========================================================
   v8 HOTFIX: Görsel eklenince "SEPETE EKLE" bozulmasın +
   Garson sipariş özeti daha düzgün görünsün
   ========================================================= */

/* Ürün kartı: buton tek satır, taşma yok */
#menu-overlay .btn-add-cart{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  padding: 8px 10px !important;
}

/* Görseli olan ürünlerde footer görünürlüğü garanti */
#menu-overlay .royal-product-card{
  overflow: hidden !important;
}

/* Kart yüksekliği: görsel eklenince alttaki buton kesilmesin */
#menu-overlay .royal-product-card{ height: 190px !important; }
body.waiter-mode #menu-overlay .royal-product-card{ height: 176px !important; }

/* Garson menüsü: "Masadaki Siparişler" görünümü */
body.waiter-mode #menu-order-summary .mos-item{
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

body.waiter-mode #menu-order-summary .mos-controls{
  display:flex !important;
  align-items:center !important;
  gap: 6px !important;
}

body.waiter-mode #menu-order-summary .mos-icon,
body.waiter-mode #menu-order-summary .mos-btn{
  min-width: 34px !important;
  height: 30px !important;
  border-radius: 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight: 800 !important;
}

body.waiter-mode #menu-order-summary .mos-qty{
  min-width: 34px !important;
  text-align:center !important;
  font-weight: 800 !important;
}

body.waiter-mode #menu-order-summary .mos-del,
body.waiter-mode #menu-order-summary .mos-btn.del{
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,80,80,0.35) !important;
  background: rgba(255,0,0,0.12) !important;
  color: #ff9a9a !important;
  font-weight: 800 !important;
}



/* === WAITER MODE: ekran temizligi (panel gizleme) === */
body.waiter-mode .waiter-ready-panel{display:none !important;}
body.waiter-mode .log-panel{display:none !important;}

/* =========================================================
   PROFESYONEL MASA KARTLARI (V10)
   - süre / ürün adedi / garson rozetleri
   ========================================================= */
.table-sm .tmeta{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:8px;
}

.table-sm .badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.4px;
  line-height:1;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  text-transform:uppercase;
}

.table-sm .badge i{font-size:10px; opacity:.85;}

.table-sm .badge-busy{
  font-weight:800;
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.4);
  color:#ef4444;
}
.table-sm.occupied .badge-busy{
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.4);
  color:#fca5a5;
}
.table-sm .badge-free{
  font-weight:700;
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.3);
  color:#86efac;
}

.table-sm .badge-soft{
  font-weight:600;
  opacity:.9;
}

.table-sm .twaiter{
  margin-top:7px;
  font-size:11px;
  opacity:.8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:95%;
  color:#94a3b8;
  letter-spacing:0.2px;
}

/* Mini toplam satırı (brüt/ödenen/kalan) */
.table-sm .tmini{
  margin-top:10px;
  display:flex;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  font-size:11px;
}
.table-sm .tmini span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#94a3b8;
}
.table-sm .tmini span i{ color:#ef4444; font-size:10px; }

/* Doluluk barı */
.table-sm .tprogress{
  width:90%;
  height:4px;
  margin:10px auto 2px auto;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
}
.table-sm .tprogress .tbar{
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg, #ef4444 0%, #ef4444 50%, #f97316 100%);
  box-shadow: 0 0 8px rgba(239,68,68,0.5);
  transition: width 0.6s cubic-bezier(.34,1.56,.64,1);
}

/* =========================================================
   FORCE DARK BLACK THEME OVERRIDES (FULL SİYAH)
   - Mavi/lacivert tonları tamamen kapatılır.
   - Sistemi bozmadan sadece renk/kontrast günceller.
   ========================================================= */

:root{
  --bg:#050505 !important;
  --brand:#0b0b0b !important;
  --ink:#f5f5f5 !important;
  --line:#262626 !important;
  --masa-bg:#0f0f0f !important;
  --panel-bg:#101010 !important;
  --modal-bg:rgba(0,0,0,.78) !important;

  --accent:#ef4444 !important;        /* altın */
  --cash:#22c55e !important;
  --card:#9ca3af !important;          /* kart butonu gri */
  --close:#ef4444 !important;
  --transfer:#f97316 !important;

  --topbar-bg:#000000 !important;
  --topbar-ink:#ffffff !important;
}

html,body{
  background:#050505 !important;
  color:var(--ink) !important;
}

/* Radial gradient / mavi parlamayı kapat */
html,body{
  background-image:none !important;
}

/* Genel panel/kart */
.card,.panel,.box,.white-bg,.modal,.modal-content,.menu-modal,.payment-panel{
  background:#101010 !important;
  border-color:#2a2a2a !important;
}

/* Topbar */
.topbar{background:#000 !important;}
.menu a,.menu button{color:#fff !important;}
.menu-clock{background:#0b0b0b !important;border-color:#2a2a2a !important;}

/* Masa kartları */
.table-card,.masa,.table{
  background:#0f0f0f !important;
  border:1px solid #2a2a2a !important;
  box-shadow:0 10px 26px rgba(0,0,0,.55) !important;
}
.table-card:hover{transform:translateY(-2px) !important;}

/* Dolu/aktif vurgular altın */
.table-card.active,.table-card.selected,.masa.active,.table.active{
  border-color:rgba(239,68,68,.75) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.6), 0 0 0 2px rgba(239,68,68,.25) inset !important;
}

/* Menü modal ürün kartları */
.product-card, .product-item{
  background:#0f0f0f !important;
  border-color:#2a2a2a !important;
}

/* Input / select */
input,select,textarea{
  background:#0b0b0b !important;
  color:#fff !important;
  border:1px solid #2a2a2a !important;
}
input::placeholder,textarea::placeholder{color:#9ca3af !important;}

/* Butonlar */
.btn{background:#130404 !important;border:1px solid #2a2a2a !important;color:#fff !important;}
.btn:hover{background:#222 !important;}
.btn.cash{background:rgba(34,197,94,.18) !important;border-color:rgba(34,197,94,.5) !important;color:#eafff2 !important;}
.btn.card{background:rgba(156,163,175,.18) !important;border-color:rgba(156,163,175,.5) !important;}
.btn.close{background:rgba(239,68,68,.16) !important;border-color:rgba(239,68,68,.55) !important;}
.btn.transfer{background:rgba(239,68,68,.16) !important;border-color:rgba(239,68,68,.55) !important;}

/* Tabbar / chips */
.tabbar .tab,.chip{background:#0b0b0b !important;border-color:#2a2a2a !important;color:#fff !important;}
.tabbar .tab.active,.chip.active{border-color:rgba(239,68,68,.75) !important;}

/* Rapor/istatistik kartlarındaki mavi tonları kapat */
.stat-card,.dashboard-btn{background:#0f0f0f !important;border-color:#2a2a2a !important;color:#fff !important;}
.dashboard-btn:hover{filter:brightness(1.05) !important;}

/* Progress bar mavi kısmı altın */
.progress .bar,
.progress-bar,
.fill{
  background:linear-gradient(90deg, rgba(239,68,68,.95), rgba(239,68,68,.55)) !important;
}

/* =====================================================
   UI TUNING (v11) - Üst menü sağa yasla + genel ölçek küçültme
   ===================================================== */

@media (min-width: 900px){
  .topbar{ flex-wrap:nowrap; padding:6px 12px; }
  .menu{ margin-left:auto; justify-content:flex-end; gap:10px; }
}

.menu a,
.menu button{ font-size:12px; padding:4px 7px; }

/* Masaları biraz küçült */
.tables-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.tables-grid{ padding:0 12px 14px; box-sizing:border-box; }
.table-sm{ padding:10px 8px 8px; border-radius:12px; }
.tname{ font-size:13px; }
.tsub,.tstatus{ font-size:10px; }


/* =====================================================
   v12 FIX — Masa kartlari urun artsa bile UZAMASIN
   - occupied/free hepsi ayni sabit yukseklik
   - ic elemanlar tasarsa gizle / ellipsis
   ===================================================== */

.table-sm{
  height:186px !important;
  max-height:186px !important;
  overflow:hidden !important;
}

/* Icerik yuksekligi sabitken alt bar/hedefler asagi tasmasin */
.table-sm .tprogress,
.table-sm .ttotal{
  margin-top:auto !important;
}

/* Baslik/alt metinler buyuyup karti itmesin */
.table-sm .tname{ 
  font-size:14px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.table-sm .tsub,
.table-sm .tstatus{ 
  font-size:10px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Rozetler cok olursa 2 satiri gecmesin */
.table-sm .tmeta{
  max-height:34px !important;
  overflow:hidden !important;
}

/* Brüt/Ödenen/Kalan alani tasarsa gizle */
.table-sm .tmini{
  max-height:44px !important;
  overflow:hidden !important;
}

/* =====================================================

   v19 WAITer UX FIX
   - Garson menüsünde seçili masa başlığı kaybolmasın
   - Menü başlığı sabit (sticky) kalsın
   ===================================================== */

/* Menü modal başlığı üstte sabit kalsın (özellikle dar ekranda scroll olunca) */
.menu-modal .modal-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(6px);
}

/* Masa adı satırı her zaman görünür ve taşarsa ellipsis */
#menu-table-name{
  display:inline-block;
  max-width: 70vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* Garson modunda masa kartı başlığı asla kaybolmasın */
.table-sm{ display:flex; flex-direction:column; }
.table-sm .tname{ flex: 0 0 auto; }
/* =====================================================
v13 FIX — Masa kartı yazıları BOZULMASIN
   - Dosyada eski denemelerden kalan .table-sm tekrarları var.
   - En sonda güçlü bir "final override" ile layout'u sabitliyoruz.
   ===================================================== */

.tables-grid .table-sm{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  padding:10px 10px 9px !important;
  border-radius:18px !important;
  height:186px !important;
  max-height:186px !important;
  overflow:hidden !important;
  border:1px solid rgba(239,68,68,0.18) !important;
  background:var(--masa-bg, #0b0b0b) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.65) !important;
  transform:none !important;
}

.tables-grid .table-sm:hover{
  transform:translateY(-2px) !important;
}

.tables-grid .table-sm.occupied,
.tables-grid .table-sm.busy{
  background: linear-gradient(135deg, #a01818 0%, #4a0000 100%) !important;
  border-color: rgba(255,255,255,0.18) !important;
}

.tables-grid .table-sm .tname{
  font-size:14px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.tables-grid .table-sm .tsub,
.tables-grid .table-sm .tstatus,
.tables-grid .table-sm .twaiter{
  font-size:10px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.tables-grid .table-sm .tmeta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  max-height:32px !important;
  overflow:hidden !important;
}

.tables-grid .table-sm .tmini{
  display:grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap:6px !important;
  max-height:44px !important;
  overflow:hidden !important;
}

.tables-grid .table-sm .tprogress,
.tables-grid .table-sm .ttotal{
  margin-top:auto !important;
}

/* =====================================================
   v13 FIX — Menüde görsel gelince "SEPETE EKLE" aşağı kaymasın
   ===================================================== */

#menu-overlay .royal-product-card{
  display:flex !important;
  flex-direction:column !important;
  height:190px !important;
}

#menu-overlay .royal-product-card .card-body{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;
}

#menu-overlay .product-thumb-wrap{
  height:72px !important;
  flex:0 0 72px !important;
  overflow:hidden !important;
  border-radius:12px !important;
}

#menu-overlay .product-thumb{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* =====================================================
   v14 FIX — TOPBAR menü butonları her ekranda EN SAĞA
   (dosyada eski "justify-content:center" override'ı vardı)
   ===================================================== */

@media (max-width: 5000px){
  header.topbar,
  .topbar{
    width:100% !important;
    max-width:100% !important;
    justify-content:space-between !important;
  }
  .topbar > *{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .menu{
    margin-left:auto !important;
    justify-content:flex-end !important;
  }
}

/* =====================================================
   v14 FIX — Masa kartı yazıları daha NET görünsün
   - daha kalın font
   - hafif gölge (kontrast)
   - rozet/alt yazı opaklık düzeltme
   ===================================================== */

.tables-grid .table-sm,
.tables-grid .table-sm *{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tables-grid .table-sm .tname{
  font-weight:800 !important;
  letter-spacing:0.02em !important;
  color:#ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.85) !important;
}

.tables-grid .table-sm .tsub,
.tables-grid .table-sm .tstatus,
.tables-grid .table-sm .twaiter{
  font-weight:700 !important;
  opacity:1 !important;
  color:rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.75) !important;
}

.tables-grid .table-sm .tmeta .chip,
.tables-grid .table-sm .tmeta span{
  font-weight:800 !important;
}


#menu-overlay .royal-product-card .card-footer{
  margin-top:auto !important;
}

#menu-overlay .btn-add-cart{
  white-space:nowrap !important;
  line-height:1 !important;
}




/* v16 TABLE TOTAL VISIBILITY — masa tutarı net görünsün, taşma olmasın */
.tables-grid .table-sm .tmini span{
  font-size:11px !important;
  padding:6px 6px !important;
  border-radius:10px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.tables-grid .table-sm .ttotal{
  margin-top:6px !important;
  padding:8px 10px !important;
  border-radius:14px !important;
  font-size:13px !important;
  font-weight:900 !important;
  text-align:center !important;
  background:rgba(0,0,0,0.35) !important;
  border:1px solid rgba(255,255,255,0.18) !important;
  text-shadow:0 2px 8px rgba(0,0,0,0.7) !important;
}


/* =====================================================
   v16 FIX — Masa kartı netlik + tutar görünürlük
   - Dolu masada da büyük 'Masa Tutarı' göster
   - Grid kenarlardan kesilmesin
   - Hiçbir yazı taşmasın (ellipsis)
   ===================================================== */

.tables-grid{
  padding: 0 12px 16px !important;
}

.tables-grid .table-sm{
  height:186px !important;
  max-height:186px !important;
}

.tables-grid .table-sm .tname{
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.7) !important;
}

.tables-grid .table-sm .tmeta .badge{
  font-weight: 800 !important;
}

.tables-grid .table-sm .tmini span{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:11px !important;
  padding:6px 8px !important;
  border-radius:12px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.tables-grid .table-sm .ttotal{
  flex: 0 0 auto !important;
  margin-top: 6px !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.75) !important;
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

/* =====================================================
   v17 RESPONSIVE MASA KARTLARI
   - Kucuk/buyuk ekranda masa kartlari otomatik olceklenir
   - Icerik kaybolmasin: rozetler + mini toplam + masa tutari her zaman gorunsun
   ===================================================== */

/* Grid kolonlari ekrana gore esnek */
.tables-grid{
  grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 12vw, 185px), 1fr)) !important;
  gap: clamp(10px, 1vw, 14px) !important;
  padding-left: clamp(10px, 1.2vw, 18px) !important;
  padding-right: clamp(10px, 1.2vw, 18px) !important;
}

/* Kart: esnek boy + net layout */
.tables-grid .table-sm{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  padding: clamp(8px, 1vw, 12px) clamp(7px, 0.9vw, 10px) !important;
  height: clamp(160px, 18vw, 210px) !important;
  max-height: clamp(160px, 18vw, 210px) !important;
  overflow:hidden !important;
}

/* Basliklar */
.tables-grid .table-sm .tname{
  font-size: clamp(12px, 1.05vw, 16px) !important;
  line-height: 1.12 !important;
}
.tables-grid .table-sm .tsub,
.tables-grid .table-sm .tstatus{
  font-size: clamp(9px, 0.85vw, 12px) !important;
  line-height: 1.05 !important;
}

/* Rozetler: 2 satira kadar goster, kaybolmasin */
.tables-grid .table-sm .tmeta{
  margin-top: clamp(4px, 0.6vw, 8px) !important;
  gap: clamp(4px, 0.6vw, 7px) !important;
  max-height: none !important;
  overflow: visible !important;
}
.tables-grid .table-sm .badge{
  font-size: clamp(9px, 0.8vw, 12px) !important;
  padding: clamp(3px, 0.5vw, 6px) clamp(6px, 0.7vw, 10px) !important;
}

/* Garson ismi */
.tables-grid .table-sm .twaiter{
  font-size: clamp(10px, 0.9vw, 12px) !important;
}

/* Mini toplam (brut/odenen/kalan) - kaybolmasin */
.tables-grid .table-sm .tmini{
  margin-top: clamp(6px, 0.8vw, 10px) !important;
  gap: clamp(6px, 0.9vw, 10px) !important;
  max-height: none !important;
  overflow: visible !important;
}
.tables-grid .table-sm .tmini span{
  font-size: clamp(9px, 0.8vw, 12px) !important;
  padding: clamp(3px, 0.55vw, 6px) clamp(6px, 0.75vw, 10px) !important;
}

/* Alt bar + masa tutari her zaman altta gorunsun */
.tables-grid .table-sm .tprogress{
  flex: 0 0 auto !important;
  margin-top: auto !important;
  width: 94% !important;
  height: clamp(7px, 0.8vw, 10px) !important;
}

.tables-grid .table-sm .ttotal{
  flex: 0 0 auto !important;
  margin-top: clamp(6px, 0.8vw, 10px) !important;
  padding: clamp(7px, 0.9vw, 10px) clamp(8px, 1vw, 12px) !important;
  font-size: clamp(12px, 1vw, 15px) !important;
  border-radius: clamp(12px, 1.4vw, 16px) !important;
}

/* Cok kucuk ekran: daha az rozet, daha kompakt */
@media (max-width: 720px){
  .tables-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
  .tables-grid .table-sm{ height: 180px !important; max-height: 180px !important; }
  .tables-grid .table-sm .tmini{ gap: 6px !important; }
}

/* 1366 ve altinda (laptop) daha sikistirma */
@media (max-width: 1400px){
  .tables-grid .table-sm{ height: 188px !important; max-height: 188px !important; }
}

/* Buyuk ekranlarda biraz daha ferah */
@media (min-width: 1700px){
  .tables-grid .table-sm{ height: 220px !important; max-height: 220px !important; }
  .tables-grid{ grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; }
}



/* ===== WAITER MODE LAYOUT FIX (mobilde masalar tam görünsün) ===== */
body.waiter-mode .payment-panel{
  display:none !important;
}
body.waiter-mode .main-wrap{
  flex-direction:column;
  padding:12px 12px 90px;
}
body.waiter-mode #tables-section{
  width:100%;
}

/* Garson menüsünde seçili masa başlığı hep görünsün */
body.waiter-mode .menu-modal .modal-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}

/* Not alanı ve hızlı butonlar üstte kalsın */
body.waiter-mode .menu-modal .stick{
  position: sticky;
  top: 64px;
  z-index: 40;
  backdrop-filter: blur(8px);
}

/* Masa kartları: içerik artsa da başlık kaybolmasın */
.table-card,
.masa,
.table{
  height:auto !important;
  min-height:120px;
  padding-top:14px;
  padding-bottom:14px;
}


/* Garson not alanı (katlanır) */
.note-toggle{ margin-left:8px; padding:8px 10px; }
.note-box.collapsed{ display:none; }



/* === FIX: Masa kartlarında yazı taşmasın, tutar kaymasın === */
.table-sm{overflow:hidden}
.tname, .tsub, .tstatus{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.table-sm .tamount{
  margin-top:auto; /* tutarı kartın altına sabitle */
}
/* Kart içi elemanlar büyürse taşmayı gizle */
.table-sm *{min-width:0}



/* Kitchen satır durum renkleri (başlangıçta bekliyor görünsün) */
.kitchen-item-row.kitchen-item-pending { background: rgba(0,0,0,0.45); }
.kitchen-item-row.kitchen-item-preparing { background: rgba(77,163,255,0.12); border-color: rgba(77,163,255,0.22); }
.kitchen-item-row.kitchen-item-ready { background: rgba(0,200,150,0.14); border-color: rgba(0,200,150,0.26); }

/* Garson/masa kartlarında içerik bozulmasını engelle */
.table-card, .table-tile, .table-box, .table-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.table-card .table-header, .table-card .header, .table-card h3, .table-card .title, .table-card .table-name {
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-card .table-body, .table-card .content, .table-card .mid, .table-card .stats {
  flex: 1 1 auto;
  min-height: 0;
}
.table-card .table-total, .table-card .total, .table-card .amount, .table-card .price, .table-card .sum {
  margin-top: auto; /* en alta sabitle */
  flex: 0 0 auto;
}

/* =====================================================
   v20 FIX — KASA + GARSON: Ürün arttıkça MASA KARTI BOZULMASIN
   Not: Kartın altındaki "progress" ve "toplam" artık ABSOLUTE.
        Böylece orta bölüm kaç satıra çıkarsa çıksın, alttakiler kaybolmaz.
   ===================================================== */

/* Kart ölçüsü sabit + alt alanı rezerve et */
.tables-grid .table-sm{
  position: relative !important;
  overflow: hidden !important;
  /* progress + toplam için yer */
  padding-bottom: 70px !important;
}

/* Brüt/Ödenen/Kalan: 3 kolon, taşarsa ellipsis */
.tables-grid .table-sm .tmini{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
  gap: 6px !important;
}
.tables-grid .table-sm .tmini span{
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Alt progress bar her zaman altta (toplamın üstünde) */
.tables-grid .table-sm .tprogress{
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 48px !important;
  margin: 0 !important;
  width: auto !important;
}

/* Büyük toplam her zaman en altta */
.tables-grid .table-sm .ttotal{
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  margin: 0 !important;
  width: auto !important;
}

/* Rozetler kalabalıklaşırsa kartı şişirmesin */
.tables-grid .table-sm .tmeta{
  max-height: 40px !important;
  overflow: hidden !important;
}

/* Çok uzun garson adı / alan adı taşmasın */
.tables-grid .table-sm .tsub,
.tables-grid .table-sm .twaiter{
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* =====================================================
   v20 FIX — KASA + GARSON: Ürün arttıkça MASA KARTI BOZULMASIN
   Sorun: Ürün adedi büyüdükçe/uzun tutarlar gelince kart içi satırlar
   alt kısımdaki bar + toplamı aşağı itiyor, sabit yükseklikte de yazılar
   "kaybolmuş" gibi görünüyordu.

   Çözüm:
   - Alt progress + toplamı ABSOLUTE ile karta kilitle
   - Alt kısma yer aç (padding-bottom)
   - Mini toplam satırını 3 sütun grid + ellipsis (satır büyümesin)
   ===================================================== */

/* Alt alanı her zaman görünür yap */
.tables-grid .table-sm{
  position: relative !important;
  padding-bottom: 68px !important; /* progress + toplam için yer */
}

/* Mini toplam satırı büyüyüp kartı itmesin */
.tables-grid .table-sm .tmini{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
  gap: 6px !important;
}
.tables-grid .table-sm .tmini span{
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Progress bar her zaman toplamın üstünde sabit dursun */
.tables-grid .table-sm .tprogress{
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 46px !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 2 !important;
}

/* Masa tutarı her zaman en altta görünsün */
.tables-grid .table-sm .ttotal{
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  margin: 0 !important;
  z-index: 3 !important;
}
/* ---- Masa Taşı / Birleştir (UI) ---- */
.pp-actions{display:flex; gap:6px; align-items:center;}
.pp-action{
  min-width:36px; padding:7px 10px; font-size:15px; line-height:1; border-radius:10px;
  background:rgba(239,68,68,0.08) !important;
  border:1px solid rgba(239,68,68,0.25) !important;
  color:#f87171 !important;
  transition:all .18s ease;
}
.pp-action:hover{
  background:rgba(239,68,68,0.18) !important;
  border-color:rgba(239,68,68,0.5) !important;
  color:#fff !important;
  box-shadow:0 0 12px rgba(239,68,68,0.2);
  transform:translateY(-1px);
}

.dialog-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index: 9999; }
.dialog{ width:min(520px, 92vw); background:rgba(20,20,20,.96); border:1px solid rgba(255,255,255,.08); border-radius:16px; box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.dialog-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 10px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.dialog-title{font-weight:700; letter-spacing:.2px;}
.dialog-body{padding:14px;}
.dialog-row{display:flex; flex-direction:column; gap:8px; margin-bottom:10px;}
.dialog-row label{opacity:.9; font-size:13px;}
.dialog-row select{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.25); color:#fff; }
.dialog-hint{opacity:.75; font-size:12px; line-height:1.35;}
.dialog-footer{ display:flex; gap:10px; justify-content:flex-end; padding:0 14px 14px 14px; }

/* ⚡ Low Power Mode */
.low-power *, .low-power *::before, .low-power *::after{ animation: none !important; transition: none !important; }

/* ============================================================
   GARSON MENÜ - TEMİZ VE FONKSİYONEL
   NOT: Menü açık/kapalı durumları index.html'deki inline CSS ile kontrol ediliyor
   ============================================================ */

/* Ana sayfa scroll ayarları */
html, body {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Garson ana ekran */
body.waiter-mode .main-wrap, 
body.waiter-mode .content-wrapper {
    height: auto;
    overflow: visible;
    display: block;
    padding-bottom: 120px;
}

/* Menü overlay - temel stil (açık/kapalı durumlar index.html'de) */
#menu-overlay {
    display: none;
}


/* =========================================================
   GARSON MOBILE SPLIT VIEW FIX
   - Telefonda menü tam ekran + sağda "Masadaki Siparişler"
   - Ürünler 2'li grid
   ========================================================= */
#menu-overlay .menu-body{ display:flex; flex:1; min-height:0; }
#menu-overlay .menu-body #product-grid{ min-height:0; }
#menu-overlay .menu-body #menu-order-summary{ min-height:0; }

/* Dokunmatik / telefonlarda: menü modal tam genişlik, sağ panel görünür */
@media (max-width: 900px), (pointer: coarse) {
  #menu-overlay .menu-modal{
    top: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    border-radius: 16px !important;
  }

  /* Ürünler 2 kolon */
  #menu-overlay #product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 10px !important;
  }

  /* Sipariş paneli sağda */
  #menu-overlay #menu-order-summary{
    display: block !important;
    width: 42%;
    min-width: 170px;
    max-width: 340px;
    border-left: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.25);
  }
  #menu-overlay #menu-order-summary .mos-head{
    position: sticky;
    top: 0;
    background: rgba(10,10,10,0.95);
    z-index: 2;
  }
  #menu-overlay #menu-order-summary .mos-list{
    height: calc(100% - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Eskiden sağda duran "Garson Girişi" butonu telefonda görünmesin */
  #go-waiter{ display:none !important; }
}

/* Çok dar telefonlarda (portrait): sipariş paneli alta iner ama görünür kalır */
@media (max-width: 520px) {
  #menu-overlay .menu-body{ flex-direction: column; }
  #menu-overlay #menu-order-summary{
    width: 100% !important;
    max-width: none !important;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    height: 40%;
  }
  #menu-overlay #product-grid{ height: 60%; }
}


/* =========================
   Vision UI - Masa Animasyon
   ========================= */
@keyframes pulseBusy {
  0%   { box-shadow: 0 0 0 1px rgba(239,68,68,0.85), 0 0 18px rgba(239,68,68,0.35); transform: translateY(0); }
  50%  { box-shadow: 0 0 0 1px rgba(239,68,68,0.95), 0 0 28px rgba(239,68,68,0.65); transform: translateY(-1px); }
  100% { box-shadow: 0 0 0 1px rgba(239,68,68,0.85), 0 0 18px rgba(239,68,68,0.35); transform: translateY(0); }
}
@keyframes pulseWarn {
  0%   { box-shadow: 0 0 0 1px rgba(239,68,68,0.55), 0 0 18px rgba(239,68,68,0.22); }
  50%  { box-shadow: 0 0 0 1px rgba(239,68,68,0.85), 0 0 30px rgba(239,68,68,0.55); }
  100% { box-shadow: 0 0 0 1px rgba(239,68,68,0.55), 0 0 18px rgba(239,68,68,0.22); }
}
.table-sm.busy{
  animation: pulseBusy 2.4s ease-in-out infinite;
}
.table-sm.warn{
  animation: pulseWarn 1.8s ease-in-out infinite;
  border-color: rgba(239,68,68,0.35) !important;
}
.table-sm.danger{
  animation: pulseWarn 1.1s ease-in-out infinite;
  border-color: rgba(239,68,68,0.55) !important;
}


/* =========================================================
   FIRE ORANGE — Ek Modern Stiller
   ========================================================= */
.topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239,68,68,0.6) 30%, rgba(248,113,113,0.9) 50%, rgba(239,68,68,0.6) 70%, transparent);
}
.table-sm:hover {
  box-shadow: 0 0 0 1px rgba(239,68,68,0.4), 0 4px 20px rgba(239,68,68,0.15) !important;
  transition: box-shadow 0.2s ease;
}
.btn-primary, button[type="submit"].primary, .btn.primary {
  background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
  color: #fff !important;
  border: none !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: rgba(239,68,68,0.6) !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.12) !important;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0303; }
::-webkit-scrollbar-thumb { background: rgba(239,68,68,0.35); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(239,68,68,0.6); }
.chip.active {
  background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
  box-shadow: 0 2px 12px rgba(239,68,68,0.35) !important;
  color: #fff !important;
}
.logo { filter: drop-shadow(0 0 10px rgba(239,68,68,0.55)); }


/* ── SEPETE EKLE BUTONU — TURUNCU OVERRIDE ── */
.product-card button,
.product-card .p-actions button,
body.waiter-mode .product-card .p-actions button,
body:not(.waiter-mode) .product-card .p-actions button {
  background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(239,68,68,0.3) !important;
}
.product-card button:hover,
.product-card .p-actions button:hover {
  background: linear-gradient(135deg, #f87171, #ffa055) !important;
  box-shadow: 0 4px 16px rgba(239,68,68,0.45) !important;
}
/* Ürün fiyat rengi */
.product-card .p-price,
.product-card [class*="price"],
.product-card [class*="Price"] {
  color: #ef4444 !important;
}
/* Kategori chip / tab turuncu */
.product-card .p-category,
.p-cat-badge {
  background: rgba(239,68,68,0.12) !important;
  color: #f87171 !important;
  border-color: rgba(239,68,68,0.25) !important;
}


/* ================================================================
   KESIN TURUNCU OVERRIDE — EN YÜKSEK ÖNCELİK
   ================================================================ */

/* Sepete Ekle butonu */
.product-card button,
.product-card .p-actions button,
body.waiter-mode .product-card .p-actions button,
body:not(.waiter-mode) .product-card .p-actions button {
  background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(239,68,68,0.25) !important;
  transition: all 0.15s ease !important;
}
.product-card button:hover,
.product-card .p-actions button:hover {
  background: linear-gradient(135deg, #ff8533, #ffaa55) !important;
  box-shadow: 0 4px 18px rgba(239,68,68,0.45) !important;
  color: #ffffff !important;
}

/* Ürün fiyat rengi */
.product-card .p-price,
.p-price { color: #ef4444 !important; }

/* Tema accent rengi her yerde */
:root {
  --accent: #ef4444 !important;
  --primary: #ef4444 !important;
}

/* Ana butonlar */
.btn.primary,
.btn-primary,
button.primary {
  background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
  color: #fff !important;
  border: none !important;
}

/* Chip aktif */
.chip.active {
  background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
  color: #fff !important;
  border-color: rgba(239,68,68,0.5) !important;
  box-shadow: 0 2px 12px rgba(239,68,68,0.3) !important;
}

/* ============================================================
   LAPTOP ÖDEME PANELİ KÜÇÜLTME FİX
   Nakit / Kart / Veresiye / Ürün Seç butonları sığsın
   ============================================================ */

/* Genel: payment-panel padding'i azalt */
.payment-panel {
  padding: 10px !important;
}

/* paybox padding azalt */
.paybox {
  padding: 8px !important;
  margin-top: 8px !important;
}

/* Toplam tutar alanı */
.paybox .total {
  font-size: 16px !important;
  padding: 8px !important;
}

/* Form-row: butonların bulunduğu satırlar */
.paybox .form-row {
  gap: 5px !important;
  margin-top: 6px !important;
}

/* Nakit / Kart / Veresiye / Ürün Seç / Gelişmiş / Adisyon / İptal butonları */
.paybox .form-row .btn {
  padding: 7px 6px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  min-height: 34px !important;
  line-height: 1.2 !important;
}

/* Sadakat Kartı butonu (pp-header içinde) */
.pp-header .btn,
.pp-header button {
  padding: 5px 8px !important;
  font-size: 11px !important;
}

/* Laptop (≤1366px) için ek daralma */
@media (max-width: 1366px) {
  .payment-panel {
    padding: 8px !important;
  }

  .paybox {
    padding: 6px !important;
    margin-top: 6px !important;
  }

  .paybox .total {
    font-size: 15px !important;
    padding: 6px 8px !important;
  }

  .paybox .form-row {
    gap: 4px !important;
    margin-top: 5px !important;
  }

  .paybox .form-row .btn {
    padding: 6px 4px !important;
    font-size: 11px !important;
    min-height: 30px !important;
    border-radius: 5px !important;
    box-shadow: none !important;
  }

  /* pp-header (Seçilen Masa + Sadakat Kartı) */
  .pp-header {
    padding-bottom: 6px !important;
    margin-bottom: 8px !important;
  }

  .pp-table {
    font-size: 14px !important;
  }

  /* Ürün tablosu satırları */
  .orders th,
  .orders td {
    padding: 5px 4px !important;
    font-size: 11px !important;
  }
}