/* QR Menü — işletme paneli. Koyu yan menü, açık çalışma alanı. */

:root {
  --ink: #1A1D21;
  --ink2: #5B6470;
  --ink3: #8C95A1;
  --zemin: #F3F4F6;
  --kart: #FFFFFF;
  --cizgi: #E2E5E9;
  --cizgi2: #EEF0F2;
  --yan: #161B22;
  --yan-yazi: #C9D1D9;
  --vurgu: #E8590C;
  --vurgu-k: #C74A08;
  --vurgu-acik: #FFF1E7;
  --yesil: #2B8A3E;
  --kirmizi: #C92A2A;
  --yaricap: 12px;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0; background: var(--zemin); color: var(--ink);
  font: 15px/1.5 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
a { color: var(--vurgu-k); }
h1, h2 { margin: 0; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; font-weight: 800; }
h2 { font-size: 1.02rem; font-weight: 700; }
.sub { margin: 2px 0 0; color: var(--ink2); font-size: .86rem; }
.mono { font-family: var(--mono); }
.kucuk { font-size: .8rem; }
.soluk { color: var(--ink3); }
.ortali { text-align: center; }
.sag { text-align: right; }
.bos { color: var(--ink3); margin: 6px 0; }
.ipucu { color: var(--ink2); font-size: .83rem; margin: 10px 0 0; }

/* ── İskelet ─────────────────────────────────────────────────────────── */

.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

.side {
  background: var(--yan); color: var(--yan-yazi);
  padding: 18px 12px; display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 0; height: 100vh;
}
.venue { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.venue .av {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  background: var(--vurgu); color: #fff; font-weight: 800;
  display: grid; place-items: center; object-fit: contain;
}
.venue img.av { background: #fff; padding: 3px; }
.venue .t { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.venue .t b { color: #fff; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venue .t span { font-size: .76rem; color: #8B949E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a {
  color: var(--yan-yazi); text-decoration: none;
  padding: 9px 12px; border-radius: 9px; font-weight: 600; font-size: .92rem;
}
.side nav a:hover { background: #21262D; color: #fff; }
.side nav a[aria-current="page"] { background: var(--vurgu); color: #fff; }

.sidefoot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 0 12px; font-size: .84rem; }
.sidefoot a { color: var(--yan-yazi); text-decoration: none; }
.sidefoot a:hover { color: #fff; }
.imza { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #6E7681; margin-top: 8px; }

.main { padding: 26px 30px 60px; min-width: 0; max-width: 1240px; }

.phead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }

.grid { display: grid; gap: 16px; align-items: start; }
.g21 { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }

.kart {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  padding: 18px; margin-bottom: 16px;
}
.kart-bas { margin-bottom: 12px; }
.satir-arasi { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

.bildirim {
  padding: 11px 14px; border-radius: 10px; margin-bottom: 16px;
  background: #E7F0FA; border: 1px solid #C5D9EE; overflow-wrap: anywhere;
}
.bildirim.basari { background: #E6F4EA; border-color: #BFE0C8; }
.bildirim.hata   { background: #FCE8E8; border-color: #F2C2C2; }

/* ── Form öğeleri ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--vurgu);
  background: var(--vurgu); color: #fff; font: inherit; font-weight: 700; font-size: .9rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--vurgu-k); border-color: var(--vurgu-k); }
.btn.hayalet { background: var(--kart); color: var(--ink); border-color: var(--cizgi); }
.btn.hayalet:hover { background: var(--zemin); }
.btn.tehlike { color: var(--kirmizi); }
.btn.sm { height: 32px; padding: 0 11px; font-size: .82rem; border-radius: 8px; }
.btn.genis { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }

.ikon {
  width: 30px; height: 32px; border: 1px solid var(--cizgi); border-radius: 8px;
  background: var(--kart); color: var(--ink2); font: inherit; cursor: pointer;
}
.ikon:hover:not(:disabled) { background: var(--zemin); color: var(--ink); }
.ikon:disabled { opacity: .3; cursor: default; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], select, textarea {
  width: 100%; min-height: 40px; padding: 8px 11px;
  border: 1px solid var(--cizgi); border-radius: 10px; background: #fff;
  font: inherit; color: inherit;
}
input.mono { font-family: var(--mono); }
textarea { resize: vertical; }
input[type="color"] { width: 100%; height: 40px; padding: 3px; border: 1px solid var(--cizgi); border-radius: 10px; background: #fff; }
input[type="file"] { font: inherit; font-size: .84rem; width: 100%; min-width: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, .ikon:focus-visible {
  outline: 2px solid var(--vurgu); outline-offset: 1px;
}

.alan { display: block; }
.alan > span, .alan-baslik { display: block; font-size: .8rem; font-weight: 700; color: var(--ink2); margin-bottom: 4px; }
.alan em { font-style: normal; font-weight: 500; color: var(--ink3); }
.alt-alta { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.alt-alta > .btn { align-self: flex-start; }
.iki { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

.satir-form { display: flex; gap: 10px; }
.satir-form input { flex: 1; }

.tikler { display: flex; flex-direction: column; gap: 9px; }
.tikler label, .tik-tek { display: flex; gap: 9px; align-items: flex-start; font-size: .88rem; cursor: pointer; }
.tikler input, .tik-tek input { margin-top: 3px; accent-color: var(--vurgu); }
.tikler b { display: block; }
.tikler span { color: var(--ink2); }
.tikler span b { color: var(--ink); }
.tik-tek { margin-top: 8px; }

/* ── Rozetler ────────────────────────────────────────────────────────── */

.rozet {
  display: inline-block; padding: 1px 7px; border-radius: 6px; vertical-align: middle;
  background: var(--vurgu-acik); color: var(--vurgu-k);
  font-size: .7rem; font-weight: 700; letter-spacing: .03em;
}
.rozet.kirmizi { background: #FCE8E8; color: var(--kirmizi); }
.rozet.gri { background: var(--cizgi2); color: var(--ink2); }

/* ── Pano ────────────────────────────────────────────────────────────── */

.sayaclar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.sayac {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  padding: 14px 16px; text-decoration: none; color: inherit; display: flex; flex-direction: column;
}
.sayac b { font-family: var(--mono); font-size: 1.7rem; line-height: 1.2; }
.sayac span { color: var(--ink2); font-size: .82rem; }
.sayac.uyari b { color: var(--kirmizi); }

.adimlar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.adimlar li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.adimlar .isaret {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--cizgi);
  display: grid; place-items: center; font-size: .75rem; color: #fff;
}
.adimlar .tamam { color: var(--ink3); font-weight: 500; }
.adimlar .tamam .isaret { background: var(--yesil); border-color: var(--yesil); }

.satir-duz {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--cizgi2);
}
.kart.sonraki { border-style: dashed; background: transparent; }

/* ── QR ──────────────────────────────────────────────────────────────── */

.qr { width: 100%; max-width: 220px; margin: 0 auto; aspect-ratio: 1; display: grid; place-items: center; }
.qr svg { width: 100%; height: 100%; display: block; }
.qr-yedek { font-size: .68rem; color: var(--ink3); overflow-wrap: anywhere; text-align: center; }

/* ── Menü yönetimi ───────────────────────────────────────────────────── */

.islemler { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.islemler form { display: contents; }

.kategori { padding: 0; overflow: hidden; }
.kategori-bas {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: #FAFBFC; border-bottom: 1px solid var(--cizgi);
}
.kategori-bas .ad-form { display: flex; gap: 6px; flex: 1; min-width: 200px; }
.kategori-bas .ad-form input { font-weight: 800; font-size: 1rem; min-height: 32px; padding: 3px 9px; }
.kategori-bas .adet { color: var(--ink3); font-size: .82rem; white-space: nowrap; }
.kategori.pasif .kategori-bas { background: var(--cizgi2); }
.kategori.pasif .urun-satir { opacity: .55; }

.urun-satir {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--cizgi2);
}
.urun-satir .ad { flex: 1; min-width: 180px; }
.urun-satir .ad b { margin-right: 4px; }
.urun-satir .aciklama {
  display: block; color: var(--ink2); font-size: .82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch;
}
.urun-satir .fiyat { font-family: var(--mono); font-weight: 600; white-space: nowrap; min-width: 72px; text-align: right; }
.urun-satir.pasif > .ad, .urun-satir.pasif > .fiyat, .urun-satir.pasif > .kucuk-gorsel { opacity: .5; }
.urun-satir.tukendi .fiyat { text-decoration: line-through; color: var(--ink3); }

.kucuk-gorsel { width: 46px; height: 46px; flex: none; border-radius: 8px; object-fit: cover; display: block; }
.bos-gorsel { background: repeating-linear-gradient(45deg, var(--cizgi2), var(--cizgi2) 5px, #fff 5px, #fff 10px); border: 1px solid var(--cizgi); }

.urun-ekle {
  display: block; padding: 11px 16px; font-weight: 700; text-decoration: none; font-size: .9rem;
}
.urun-ekle:hover { background: var(--vurgu-acik); }

/* Ürün formu */
.urun-form { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; }
.form-sol { display: flex; flex-direction: column; gap: 14px; }
.form-alt { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--cizgi2); }

.gorsel-onizleme {
  aspect-ratio: 4 / 3; border: 1px dashed var(--cizgi); border-radius: 10px; margin-bottom: 10px;
  display: grid; place-items: center; overflow: hidden; color: var(--ink3); font-size: .84rem; background: #FAFBFC;
}
.gorsel-onizleme img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gorsel-onizleme.kare { aspect-ratio: 1; width: 104px; flex: none; margin: 0; }
.gorsel-onizleme.kare img { object-fit: contain; }
.logo-alan { display: flex; gap: 14px; align-items: flex-start; }
.logo-alan > div:last-child { flex: 1; min-width: 0; }

/* ── Masalar ─────────────────────────────────────────────────────────── */

.masa-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.masa-kart {
  border: 1px solid var(--cizgi); border-radius: 10px; padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.masa-kart .qr { max-width: 124px; }
.masa-ad { font-size: .98rem; }
.foy-mekan, .foy-not { display: none; }
.masa-islem { width: 100%; font-size: .82rem; }
.masa-islem summary { cursor: pointer; color: var(--vurgu-k); font-weight: 700; list-style: none; }
.masa-islem summary::-webkit-details-marker { display: none; }
.masa-islem[open] { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.masa-islem[open] summary { text-align: center; margin-bottom: 4px; }
.masa-islem .btn { width: 100%; }
.masa-islem form:not(.alt-alta) { display: contents; }
.masa-islem .alt-alta { gap: 6px; }
.masa-islem .alt-alta > .btn { align-self: stretch; }

/* ── Tablo ───────────────────────────────────────────────────────────── */

.tablo-sar { overflow-x: auto; }
.tablo { width: 100%; border-collapse: collapse; }
.tablo th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink3); padding: 0 10px 8px; }
.tablo th.sag { text-align: right; }
.tablo td { padding: 10px; border-top: 1px solid var(--cizgi2); vertical-align: middle; }
.tablo tr.pasif td { color: var(--ink3); }

/* ── Giriş ───────────────────────────────────────────────────────────── */

.giris-govde { display: grid; place-items: center; min-height: 100vh; padding: 20px; background: var(--yan); }
.giris-kart {
  width: 100%; max-width: 360px; background: var(--kart); border-radius: 16px; padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.giris-kart .sub { margin-top: -10px; }
.giris-kart .bildirim { margin: 0; }
.giris-kart .imza { text-align: center; color: var(--ink3); }

/* ── Dar ekran ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .app { display: block; }
  .side { position: static; height: auto; padding: 12px; gap: 10px; }
  .side nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .side nav::-webkit-scrollbar { display: none; }
  .side nav a { white-space: nowrap; }
  .sidefoot { flex-direction: row; gap: 16px; align-items: center; padding: 0 6px; }
  .sidefoot .imza { margin: 0 0 0 auto; }
  .main { padding: 18px 14px 50px; }
  .g21, .urun-form { grid-template-columns: minmax(0, 1fr); }
  .sayaclar { grid-template-columns: 1fr 1fr; }
  .satir-form { flex-direction: column; }
  .urun-satir .islemler { width: 100%; }
}

/* ── Yazdırma: yalnızca QR föyleri ───────────────────────────────────── */

@media print {
  @page { margin: 10mm; }
  body { background: #fff; }
  .side, .yazdirilmaz, .bildirim { display: none !important; }
  .app, .grid { display: block; }
  .main { padding: 0; max-width: none; }
  .kart { border: 0; padding: 0; margin: 0; }
  .masa-izgara { grid-template-columns: repeat(3, 1fr); gap: 6mm; }
  .masa-kart {
    border: 1px dashed #999; border-radius: 4mm; padding: 7mm 5mm; gap: 3mm;
    break-inside: avoid; margin-bottom: 6mm;
  }
  .masa-kart .qr { max-width: 42mm; }
  .foy-mekan { display: block; font-weight: 800; font-size: 12pt; }
  .masa-ad { font-size: 16pt; }
  .foy-not { display: block; font-size: 8.5pt; color: #444; }
  .qr-yedek { display: none; }
}

/* ── Tema, porsiyon, müşteri paneli (2. sürüm) ───────────────────────── */

.kategori-bas .ad-form { flex-wrap: wrap; }
.kategori-bas .ad-form input[name="ad"] { flex: 1 1 180px; width: auto; }
.kategori-bas .ad-form .not-girdi { flex: 2 1 260px; width: auto; font-weight: 500; font-size: .85rem; min-height: 32px; padding: 3px 9px; color: var(--ink2); }

.urun-satir .fiyat .porsiyon { display: block; font-size: .82rem; }
.urun-satir .fiyat .porsiyon em { font-style: normal; color: var(--ink3); font-family: 'Manrope', sans-serif; font-weight: 600; }

.porsiyon-alan { border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px 12px; }
.porsiyon-alan summary { cursor: pointer; font-weight: 700; font-size: .88rem; }
.porsiyon-alan summary em { font-style: normal; font-weight: 500; color: var(--ink3); }
.porsiyon-satirlar { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

.gorunen {
  margin: 0 6px; padding: 10px 12px; border-radius: 10px;
  background: #3B2A12; border: 1px solid #7A5418; display: flex; flex-direction: column; gap: 6px;
}
.gorunen span { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #F5C27A; }
.gorunen button {
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  color: #fff; font: inherit; font-weight: 700; font-size: .86rem;
}
.kucuk-secim { min-height: 32px; padding: 3px 8px; font-size: .84rem; width: auto; }

/* ── Canlı sipariş ekranı ────────────────────────────────────────────── */

.cagrilar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cagri {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 12px;
  background: #FFF4E5; border: 2px solid #F59F00; animation: cagri-nabiz 1.6s ease-in-out infinite;
}
.cagri.c-hesap { background: #E7F5FF; border-color: #1C7ED6; }
.cagri b { font-size: 1.05rem; }
.cagri small { color: var(--ink3); margin-left: 4px; }
@keyframes cagri-nabiz { 50% { box-shadow: 0 0 0 6px rgba(245, 159, 0, .18); } }
@media (prefers-reduced-motion: reduce) { .cagri { animation: none; } }

.sip-sutunlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.sip-sutun { background: #E9ECEF; border-radius: var(--yaricap); padding: 12px; min-height: 160px; }
.sip-sutun h2 { display: flex; align-items: center; gap: 8px; margin: 2px 4px 12px; font-size: .95rem; }
.sip-sutun h2 .adet {
  min-width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  background: var(--kart); font-size: .78rem; font-family: var(--mono);
}
.s-bekliyor { background: #FFF0E6; }
.s-bekliyor h2 .adet { background: var(--vurgu); color: #fff; }
.sip-sutun .bos { text-align: center; }

.sip-kart {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 10px; padding: 12px; margin-bottom: 10px;
  box-shadow: 0 2px 6px -4px rgba(0, 0, 0, .2);
}
.sip-kart.d-bekliyor { border-left: 4px solid var(--vurgu); }
.sip-kart header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.sip-masa { font-size: 1.15rem; font-weight: 800; }
.sip-zaman { font-family: var(--mono); font-size: .78rem; color: var(--ink3); }
.sip-kart ul { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.sip-kart li { padding: 3px 0; }
.sip-kart li em { font-style: normal; color: var(--vurgu-k); font-weight: 700; font-size: .82rem; }
.sip-kart li small { display: block; color: #B42318; font-weight: 600; margin-left: 22px; }
.sip-not { margin: 6px 0 0; padding: 6px 8px; border-radius: 6px; background: #FFF9DB; font-size: .84rem; }
.sip-kart footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sip-dugmeler { display: flex; gap: 6px; flex-wrap: wrap; }
.sip-dugmeler form { display: contents; }
#ses-ac.acik { border-color: var(--yesil); color: var(--yesil); }

.side nav a .rozet-say {
  float: right; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: #FA5252; color: #fff; font-size: .74rem; display: inline-grid; place-items: center;
}

/* Ürün formu: alerjen ve etiket seçimi */
.kod-secim { display: flex; flex-wrap: wrap; gap: 6px; }
.kod-secim label {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer;
  border: 1px solid var(--cizgi); border-radius: 8px; font-size: .84rem; background: #fff;
}
.kod-secim label:has(input:checked) { border-color: var(--vurgu); background: var(--vurgu-acik); }
.kod-secim input { accent-color: var(--vurgu); margin: 0; }
.kod-secim.alerjen label:has(input:checked) { border-color: var(--kirmizi); background: #FCE8E8; }
.kod-secim.alerjen input { accent-color: var(--kirmizi); }
.urun-satir .alerjen-not { display: block; font-size: .76rem; color: var(--kirmizi); }

@media (max-width: 1100px) { .sip-sutunlar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .s-hazir { grid-column: 1 / -1; } }
@media (max-width: 700px) { .sip-sutunlar { grid-template-columns: minmax(0, 1fr); } }
.giris-logo { width: 96px; height: 96px; object-fit: contain; margin: 0 auto 4px; }
.siparis-ozet { display: block; text-decoration: none; color: inherit; }
.uyari-yazi { margin: 0; font-weight: 700; color: var(--vurgu-k); }

/* ── Pano (3. sürüm): operasyon ekranı ───────────────────────────────── */

.pano-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.pano-yan .kart { margin-bottom: 14px; }
.pano-yan .qr { max-width: 160px; }
.g11 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Pano özeti beş sayaç taşır: sabit 4 sütunda beşincisi alt satıra tek başına düşüyordu. */
.sayaclar.ozet { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.sayaclar.ozet .sayac { gap: 2px; }
.sayaclar.ozet .sayac span { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); }
.sayaclar.ozet .sayac b { font-size: 1.75rem; }
.sayaclar.ozet .sayac small { color: var(--ink2); font-size: .78rem; }
.sayac.vurgulu { background: var(--yan); border-color: var(--yan); color: #fff; }
.sayac.vurgulu span, .sayac.vurgulu small { color: rgba(255, 255, 255, .7); }
.sayac.alarm { border-color: var(--vurgu); box-shadow: inset 0 0 0 1px var(--vurgu); }
.sayac.alarm b { color: var(--vurgu-k); }

/* Masa planı */
.masa-anahtar { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .74rem; color: var(--ink2); }
.masa-anahtar li { display: flex; align-items: center; gap: 5px; }
.masa-anahtar i { width: 10px; height: 10px; border-radius: 3px; background: var(--m-zemin); border: 1px solid var(--m-kenar); }
.bolge-ad { margin: 14px 0 8px; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.masa-plani { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.masa-kutu {
  min-height: 92px; padding: 10px; border-radius: 12px; text-decoration: none; color: var(--m-yazi, var(--ink));
  background: var(--m-zemin); border: 2px solid var(--m-kenar);
  display: flex; flex-direction: column; gap: 2px; transition: transform .15s;
}
.masa-kutu:hover { transform: translateY(-2px); }
.masa-kutu b { font-size: 1.5rem; line-height: 1.1; font-family: var(--mono); }
.masa-kutu span { font-size: .74rem; font-weight: 700; }
.masa-kutu small { margin-top: auto; font-size: .74rem; font-family: var(--mono); opacity: .85; }
.m-bos       { --m-zemin: #fff;    --m-kenar: var(--cizgi); --m-yazi: var(--ink3); }
.m-dolu      { --m-zemin: #EDF2FF; --m-kenar: #BAC8FF; }
.m-onaylandi { --m-zemin: #E6FCF5; --m-kenar: #63E6BE; }
.m-hazir     { --m-zemin: #D3F9D8; --m-kenar: #2F9E44; }
.m-bekliyor  { --m-zemin: #FFF4E6; --m-kenar: #FD7E14; }
.m-garson    { --m-zemin: #FFF3BF; --m-kenar: #F59F00; }
.m-hesap     { --m-zemin: #FFE3E3; --m-kenar: #E03131; }
.masa-kutu.m-bekliyor, .masa-kutu.m-garson, .masa-kutu.m-hesap { animation: cagri-nabiz 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .masa-kutu { animation: none !important; transition: none; } }

/* Saatlik grafik */
.saat-grafik { display: flex; align-items: stretch; gap: 3px; height: 170px; }
.saat-grafik .sutun { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.saat-grafik i { width: 100%; max-width: 26px; background: var(--vurgu); border-radius: 4px 4px 0 0; min-height: 2px; opacity: .85; }
.saat-grafik .simdi i { opacity: 1; box-shadow: 0 0 0 2px var(--vurgu-acik); }
.saat-grafik .deger { font-size: .68rem; font-family: var(--mono); color: var(--ink2); min-height: 14px; }
.saat-grafik .saat { font-size: .64rem; font-family: var(--mono); color: var(--ink3); margin-top: 4px; }
.saat-grafik .simdi .saat { color: var(--vurgu-k); font-weight: 700; }

/* En çok satanlar */
.en-cok { list-style: none; margin: 0; padding: 0; counter-reset: sira; }
.en-cok li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 70px 34px 84px; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--cizgi2); font-size: .88rem; }
.en-cok li::before { counter-increment: sira; content: counter(sira); font-family: var(--mono); color: var(--ink3); font-size: .78rem; }
.en-cok .ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.en-cok .cubuk { height: 6px; background: var(--cizgi2); border-radius: 3px; overflow: hidden; }
.en-cok .cubuk i { display: block; height: 100%; background: var(--vurgu); }
.en-cok b, .en-cok .soluk { text-align: right; font-size: .82rem; }

@media (max-width: 1150px) { .pano-duzen { grid-template-columns: minmax(0, 1fr); } .pano-yan { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } }
@media (max-width: 900px) { .g11 { grid-template-columns: minmax(0, 1fr); } .masa-plani { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); } }

/* ─────────────────────────────────────────────────────────────────────
   Salon, adisyon, personel ve raporlar (3. aşama)
   ───────────────────────────────────────────────────────────────────── */

.grid.tek { grid-template-columns: minmax(0, 560px); }
.salon-yan .kart { margin-bottom: 14px; }
/* Seçili masa plandan ayırt edilsin: kenarlık rengi durumdan geldiği için
   ayrımı gölge halkası yapıyor, yoksa hangi masaya baktığınız kaybolur. */
.masa-kutu.secili { box-shadow: 0 0 0 3px var(--ink); }

/* ── Adisyon kartı ──────────────────────────────────────────────────── */
.adisyon-sip { border-top: 1px solid var(--cizgi2); padding: 10px 0; }
.adisyon-sip.d-iptal { opacity: .5; text-decoration: line-through; }
.adisyon-sip.d-bekliyor { border-left: 3px solid var(--vurgu); padding-left: 9px; }
.adisyon-satir { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.adisyon-satir li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; font-size: .88rem; align-items: baseline; }
.adisyon-satir li b { font-family: var(--mono); color: var(--vurgu-k); }
.adisyon-satir li em { color: var(--ink2); font-style: normal; }
.adisyon-satir li small { grid-column: 2 / -1; color: var(--ink2); font-size: .8rem; }
.adisyon .sip-dugmeler { margin-top: 8px; }

.adisyon-toplam {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  border-top: 1px solid var(--cizgi); padding-top: 10px; margin-top: 10px; font-size: .9rem;
}
.adisyon-toplam span { color: var(--ink2); }
.adisyon-toplam b { font-size: 1.15rem; }
.adisyon-toplam.buyuk b { font-size: 1.5rem; color: var(--yesil); }

/* Ödeme yöntemi düğmeleri: her biri hesabı kapatır, bu yüzden yan yana ve eşit. */
.odeme-secim { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.odeme-secim .btn { justify-content: center; }

/* Garsonun masaya sipariş girdiği satırlar */
.gir-satir { display: grid; grid-template-columns: minmax(0, 1fr) 68px minmax(0, 90px); gap: 6px; }
.gir-satir select, .gir-satir input { min-width: 0; }

/* ── Personel tablosundaki işlem düğmeleri ─────────────────────────── */
.tablo .satir-form { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

/* ── Yıl şeridi ─────────────────────────────────────────────────────
   On iki ay tek satırda: hangi ayın ne getirdiği, aya girmeden görünür. */
.yil-serit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin-bottom: 16px; }
.yil-serit a {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1px;
  padding: 8px 6px 10px; border: 1px solid var(--cizgi); border-radius: 10px;
  background: var(--kart); text-decoration: none; color: var(--ink);
}
.yil-serit a span { font-size: .72rem; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .06em; }
.yil-serit a b { font-size: .84rem; }
.yil-serit a i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--vurgu-acik); z-index: 0; min-height: 2px; }
.yil-serit a span, .yil-serit a b { position: relative; z-index: 1; }
.yil-serit a.bos { color: var(--ink3); }
.yil-serit a.bos b { color: var(--ink3); }
.yil-serit a.secili { border-color: var(--vurgu); box-shadow: inset 0 0 0 1px var(--vurgu); }
.yil-serit a.secili b { color: var(--vurgu-k); }

/* Gün tablosunda ciro çubuğu — rakamın arkasında, okumayı bozmadan oranı gösterir */
.gun-cubuk {
  display: inline-block; vertical-align: middle; width: 52px; height: 6px; margin-right: 8px;
  border-radius: 3px; background: linear-gradient(to right, var(--vurgu) var(--o), var(--cizgi2) var(--o));
}

/* ── Ödeme dağılımı ────────────────────────────────────────────────── */
.odeme-satir {
  display: grid; grid-template-columns: minmax(0, 1fr) 54px auto; gap: 8px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--cizgi2); font-size: .86rem;
}
.odeme-satir:first-of-type { border-top: 0; }
.odeme-satir .cubuk { height: 6px; background: var(--cizgi2); border-radius: 3px; overflow: hidden; }
.odeme-satir .cubuk i { display: block; height: 100%; background: var(--yesil); }
.odeme-satir b { font-size: .86rem; }

@media (max-width: 900px) {
  .yil-serit { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gir-satir { grid-template-columns: minmax(0, 1fr) 62px; }
  .gir-satir input[name^="satir_not"] { grid-column: 1 / -1; }
}

/* ── Modüller (süper yönetici) ───────────────────────────────────────── */
.modul-satir { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--cizgi2); cursor: pointer; }
.modul-satir b { display: block; }
.modul-satir small { display: block; color: var(--ink2); font-size: .82rem; }
.modul-satir em { display: block; font-style: normal; font-size: .8rem; margin-top: 3px; }
.anahtar { position: relative; flex: none; width: 44px; height: 26px; margin-top: 2px; }
.anahtar input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.anahtar i { position: absolute; inset: 0; border-radius: 999px; background: var(--cizgi); transition: background .2s; pointer-events: none; }
.anahtar i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.anahtar input:checked + i { background: var(--yesil); }
.anahtar input:checked + i::after { transform: translateX(18px); }
.anahtar input:focus-visible + i { outline: 2px solid var(--vurgu); outline-offset: 2px; }