/* CEZVE KDS — tablet/PC tam ekran, premium koyu tema (lacivert + turkuaz),
   2 metreden okunur. Durum renkleri işlevsel: amber=hazırlanıyor, yeşil=hazır,
   kırmızı=gecikti. */
/* v3 madde 15: AÇIK tema — gündüz ışığında okunabilirlik (tüm yüzeyler) */
:root {
  --zemin: #f4f6f9;
  --panel: #ffffff;
  --kart: #ffffff;
  --kart-ust: #eef1f6;
  --metin: #161b26;
  --soluk: #64748b;
  --cizgi: #e2e7ef;
  --turkuaz: #f97316;
  --sari: #f59e0b;
  --yesil: #16a34a;
  --kirmizi: #dc2626;
  --mavi: #2563eb;
  --grad: linear-gradient(135deg, #f97316, #ea580c);
  --grad-koyu: #ffffff;
  --radius: 12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1000px 620px at 88% -8%, rgba(249, 115, 22, .06), transparent 60%),
    var(--zemin);
  color: var(--metin); font-size: 16px;
  overflow: hidden; user-select: none;
}
button { font: inherit; border: none; cursor: pointer; background: none; color: inherit; }
input { font: inherit; }

/* ---------- giriş ---------- */
.giris {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; gap: 16px; padding: 32px; text-align: center;
}
.giris .logo {
  font-size: 52px; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;
  background: var(--grad); border-radius: 28px; box-shadow: 0 12px 36px rgba(249, 115, 22, .3);
}
.giris h1 { font-size: 26px; }
.giris p { color: var(--soluk); max-width: 420px; }
.giris input {
  width: 100%; max-width: 440px; padding: 16px 18px; border-radius: var(--radius);
  border: 1.5px solid var(--cizgi); background: var(--panel); color: var(--metin);
  font-size: 17px; text-align: center; letter-spacing: .05em;
}
.giris input:focus { outline: 2px solid var(--turkuaz); }
.btn {
  padding: 15px 40px; border-radius: var(--radius); background: var(--grad); color: var(--grad-koyu);
  font-size: 17px; font-weight: 800; box-shadow: 0 4px 16px rgba(249, 115, 22, .22);
}
.btn:disabled { opacity: .5; }

/* ---------- üst çubuk ---------- */
.bar {
  display: flex; align-items: center; gap: 14px; padding: 12px 20px;
  background: var(--panel); border-bottom: 1px solid var(--cizgi);
}
.bar .istasyon { font-size: 21px; font-weight: 800; }
.bar .kafe { color: var(--soluk); font-size: 15px; }
.bar .bosluk { flex: 1; }
.durum-nokta { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--soluk); }
.durum-nokta::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--yesil); }
.durum-nokta.kopuk::before { background: var(--sari); animation: yanip 1s infinite; }
@keyframes yanip { 50% { opacity: .3; } }
.bar-btn { padding: 9px 16px; border-radius: 10px; background: var(--kart); color: var(--soluk); font-size: 14px; font-weight: 600; border: 1px solid var(--cizgi); }

.offline-serit { background: var(--sari); color: #1a1200; text-align: center; font-weight: 700; font-size: 14px; padding: 6px; }

/* ---------- iki sütun (v3: "Hazırla" adımı kalktı) ---------- */
.pano {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  padding: 14px 16px; height: calc(100vh - 61px); overflow: hidden;
}

/* v3 madde 16: yoğunluk modu şeridi */
.yogun-serit {
  background: linear-gradient(90deg, #f59e0b, #ef4444); color: #1a0d00;
  text-align: center; font-weight: 800; font-size: 14.5px; padding: 7px;
}
.yogun-serit:not([hidden]) ~ .pano { height: calc(100vh - 61px - 34px); }

/* v3 madde 11: fiş numarası — tezgah eşleştirmesi */
.fis-no { font-size: 19px; font-weight: 800; color: var(--turkuaz); vertical-align: middle; }
.fis-mini { font-size: 13px; font-weight: 700; color: var(--soluk); }
.hiz-rozet {
  font-size: 12.5px; font-weight: 800; color: #1a0d00;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-radius: 999px; padding: 2px 8px; vertical-align: middle;
}
.sutun { display: flex; flex-direction: column; min-height: 0; }
.sutun-baslik {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px;
  font-size: 17px; font-weight: 800; letter-spacing: .03em;
}
.sutun-baslik .sayi { background: var(--kart); border-radius: 999px; padding: 2px 12px; font-size: 15px; color: var(--soluk); }
.sutun-baslik.sirada { color: var(--soluk); }
.sutun-baslik.hazirlaniyor { color: var(--sari); }
.sutun-baslik.hazir { color: var(--yesil); }
.sutun-icerik { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }
.sutun-icerik::-webkit-scrollbar { width: 4px; }
.sutun-icerik::-webkit-scrollbar-thumb { background: var(--cizgi); border-radius: 4px; }

/* ---------- kalem kartı ---------- */
.kalem {
  background: var(--kart); border-radius: var(--radius); padding: 14px 16px;
  border: 1px solid var(--cizgi); border-left: 5px solid var(--cizgi); position: relative;
}
.kalem.k-sirada { border-left-color: var(--soluk); }
.kalem.k-hazirlaniyor { border-left-color: var(--sari); }
.kalem.k-hazir { border-left-color: var(--yesil); }
.kalem.gecikti { border-left-color: var(--kirmizi); box-shadow: 0 0 0 2px var(--kirmizi); animation: uyari 1.4s infinite; }
@keyframes uyari { 50% { box-shadow: 0 0 0 2px transparent; } }

.kalem-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.masa-no { font-size: 30px; font-weight: 900; letter-spacing: .01em; } /* barista 2 metreden okur */
.sure { font-size: 17px; font-weight: 700; color: var(--soluk); font-variant-numeric: tabular-nums; }
.kalem.gecikti .sure { color: var(--kirmizi); }

.urun-satir { font-size: 19px; font-weight: 700; margin-top: 5px; }
.urun-satir .adet { color: var(--turkuaz); }
.not { margin-top: 5px; font-size: 14.5px; color: var(--sari); background: rgba(251, 191, 36, .1); border-radius: 8px; padding: 5px 10px; }
.opsiyonlar { margin-top: 4px; font-size: 13.5px; color: var(--soluk); }

/* v2: masa kartı içindeki kalem satırları */
.kalem-satiri {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px dashed var(--cizgi);
}
.kalem-satiri:last-of-type { border-bottom: none; }
.kalem-bilgi { flex: 1; min-width: 0; }
.mini-aksiyon {
  padding: 9px 14px; border-radius: 9px; font-size: 14px; font-weight: 800;
  flex-shrink: 0; transition: transform .06s;
}
.mini-aksiyon:active { transform: scale(.96); }
.mini-aksiyon.basla { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1200; }
.mini-aksiyon.hazir-btn { background: linear-gradient(135deg, #34d399, #10b981); color: #04120b; }
.tasiyici-bekle { font-size: 13px; color: var(--soluk); flex-shrink: 0; }

.kalem-alt { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.aksiyon {
  flex: 1; padding: 14px; border-radius: 10px; font-size: 16.5px; font-weight: 800;
  text-align: center; transition: transform .06s;
}
.aksiyon:active { transform: scale(.97); }
.aksiyon.basla { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1200; }
.aksiyon.hazir-btn { background: linear-gradient(135deg, #34d399, #10b981); color: #04120b; }
.garson-sec {
  flex: 1; padding: 13px 10px; border-radius: 10px; background: var(--panel);
  color: var(--metin); border: 1.5px solid var(--cizgi); font-size: 15px; font-weight: 600;
}
.ustlendi {
  flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: var(--panel); border-radius: 10px; font-weight: 700; font-size: 15px;
}
.renk-nokta { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.iptal-btn { width: 42px; height: 46px; border-radius: 10px; background: var(--panel); color: var(--soluk); font-size: 18px; flex-shrink: 0; }

.bos-sutun { text-align: center; color: var(--cizgi); font-size: 15px; padding: 40px 10px; }

/* ---------- iptal sheet ---------- */
.perde { position: fixed; inset: 0; background: rgba(3, 7, 16, .68); z-index: 40; }
.sheet {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 50;
  background: var(--panel); border: 1px solid var(--cizgi); border-radius: 16px;
  width: min(440px, 92vw); padding: 22px; box-shadow: 0 10px 30px rgba(15, 23, 42, .15);
}
.sheet h2 { font-size: 20px; margin-bottom: 6px; }
.sheet .alt-yazi { color: var(--soluk); font-size: 14px; margin-bottom: 14px; }
.neden-btn {
  display: block; width: 100%; padding: 15px; background: var(--kart); border-radius: 10px;
  font-size: 16px; font-weight: 600; margin-bottom: 9px; text-align: left; border: 1px solid var(--cizgi);
}
.pin-alan {
  width: 100%; padding: 14px; border-radius: 10px; border: 1.5px solid var(--kirmizi);
  background: var(--zemin); color: var(--metin); font-size: 18px; text-align: center;
  letter-spacing: .3em; margin: 8px 0 12px;
}
.kapat-btn { width: 100%; padding: 13px; color: var(--soluk); font-weight: 600; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--kart-ust); color: var(--metin); padding: 13px 24px; border-radius: 999px;
  font-size: 15px; font-weight: 700; z-index: 90; border: 1px solid rgba(249, 115, 22, .4);
  box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
}

@media (max-width: 700px) { .pano { grid-template-columns: 1fr; overflow-y: auto; } .sutun { min-height: auto; } }

/* ==================== RUNNER EKRANI EKLERİ (v6 M8/M15) ==================== */
.pano.tek-sutun { grid-template-columns: 1fr; overflow-y: auto; }
.pano.tek-sutun .sutun-icerik { max-width: 860px; margin: 0 auto; width: 100%; }

.cagri-serit {
  background: linear-gradient(90deg, #f97316, #f59e0b); color: #1a0d00;
  text-align: center; font-weight: 800; font-size: 15px; padding: 8px;
}

.sefer {
  background: var(--panel); border: 1px solid var(--cizgi); border-radius: 14px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.sefer-baslik { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sefer-no {
  font-size: 15px; font-weight: 900; letter-spacing: .06em; color: var(--grad-koyu);
  background: var(--grad); border-radius: 8px; padding: 4px 12px;
}
.sefer-bolge { font-size: 16px; font-weight: 800; }
.sefer-adet { font-size: 13.5px; color: var(--soluk); font-weight: 700; }
.sefer .bosluk { flex: 1; }
.sefer .aksiyon { flex: 0 0 auto; padding: 10px 18px; font-size: 15px; }
.aksiyon.ikincil { background: var(--kart-ust); color: var(--metin); border: 1px solid var(--cizgi); }
.neden-btn.secili { border-color: var(--turkuaz); box-shadow: 0 0 0 1px var(--turkuaz); }

/* ---------- fiş: ekranda gizli, yalnız yazdırmada görünür (80mm) ---------- */
.fis-alani { display: none; }

@media print {
  body > *:not(.fis-alani) { display: none !important; }
  body { overflow: visible; background: #fff; }
  .fis-alani { display: block !important; width: 72mm; color: #000; }
  .fis { padding: 4mm 2mm; font-family: 'Courier New', monospace; font-size: 12px; }
  .fis-baslik { text-align: center; font-weight: 700; font-size: 13px; }
  .fis-masa { text-align: center; font-weight: 900; font-size: 22px; margin: 2mm 0 1mm; }
  .fis-meta { text-align: center; font-size: 11px; }
  .fis-cizgi { border-top: 1px dashed #000; margin: 2mm 0; }
  .fis-satir { font-size: 14px; font-weight: 700; padding: 1mm 0; }
  .fis-ops { font-size: 11px; padding-left: 4mm; }
  .fis-kes { page-break-after: always; }
}