/* Personel ekranları (garson, mutfak, yönetim, giriş) — müşteri menüsüyle aynı dil:
   aydınlık uygulama düzeni, tek vurgu rengi (domates), Plus Jakarta Sans.
   Sayfanın kendi <style>'ından SONRA yüklenir, aynı seçicileri ezer. */
:root {
  --bg: #f5f5f4; --kart: #ffffff; --zemin: #f5f5f4; --yazi: #18181b; --soluk: #71717a; --cizgi: #e7e7e7;
  --vurgu: #e8432e; --vurgu-koyu: #c9341f; --vurgu-acik: #fdecea;
  --ana: #18181b; --ana-acik: #f0f0f0;
  --yesil: #15803d; --yesil-acik: #e8f5ec; --sari: #b45309; --sari-acik: #fef3e2;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: var(--font); --sans: var(--font);
  --golge: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .06);
}
body { background: var(--bg); font-family: var(--font); }
h1, h2, h3 { font-family: var(--font); font-weight: 800; letter-spacing: -.02em; }

/* üst çubuk: beyaz, logo karesi + ad */
.ust { background: #fff; color: var(--yazi); border-bottom: 1px solid var(--cizgi); padding: 12px 20px; position: sticky; top: 0; z-index: 20; }
.ust h1 { font-size: 19px; display: flex; align-items: center; gap: 10px; }
.ust h1::before { content: ''; width: 28px; height: 28px; border-radius: 9px; background: var(--vurgu); flex: none; }
.ust small { color: var(--soluk); opacity: 1; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ust .dugme.ikincil { background: var(--zemin); color: var(--yazi); border: 0; }
.sekmeler, .istasyonlar { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 14px; background: var(--zemin); border: 0; }
.sekmeler button, .istasyonlar button { padding: 8px 14px; border-radius: 10px; color: var(--soluk); font-weight: 700; }
.sekmeler button.aktif, .istasyonlar button.aktif { background: #fff; color: var(--yazi); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }

/* düğmeler, kartlar, çipler */
/* düğmeler basılabilir görünsün: dolu renk + alt gölge, basınca çöker */
.dugme { background: var(--vurgu); color: #fff; border-radius: 12px; font-weight: 800; box-shadow: 0 3px 0 var(--vurgu-koyu); transition: transform .08s, box-shadow .08s; }
.dugme:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--vurgu-koyu); }
.dugme.kucuk { min-height: 38px; font-size: 13px; padding: 0 14px; }
.dugme.ikincil { background: #fff; color: var(--yazi); border: 2px solid #d4d4d8; box-shadow: 0 3px 0 #e4e4e7; }
.dugme.ikincil:active { box-shadow: 0 1px 0 #e4e4e7; }
.dugme.vurgu { background: var(--yazi); color: #fff; box-shadow: 0 3px 0 #000; }
.ust .dugme.ikincil { border: 1.5px solid #d4d4d8; box-shadow: none; }
.kart { border: 1px solid var(--cizgi); border-radius: 18px; box-shadow: none; }
.cip { border-radius: 999px; font-weight: 700; }
.cip.secili { background: var(--yazi); border-color: var(--yazi); color: #fff; }
.cip.uyari { background: var(--vurgu-acik); border-color: #f6c6bf; color: var(--vurgu-koyu); }
.rozet { border-radius: 6px; font-weight: 800; }
.rozet.hazir { background: var(--yesil); color: #fff; }
.rozet.servis { background: var(--yesil-acik); color: var(--yesil); }
h2.baslik, .kategori-bas h2 { font-size: 20px; }
.sayi { background: var(--vurgu); color: #fff; }
.pencere { background: #fff; }
.bildirim { border-radius: 14px; }

/* giriş */
.giris { background: #fff; border: 1px solid var(--cizgi); border-radius: 24px; padding: 34px 28px; max-width: 360px; box-shadow: var(--golge); }
.giris h2 { font-size: 26px; }
.giris input { background: var(--zemin); border: 1.5px solid transparent; border-radius: 14px; }
.giris input:focus { border-color: var(--yazi); outline: none; }

/* garson: masa kutuları */
.masa { border: 1.5px solid var(--cizgi); border-radius: 18px; min-height: 120px; box-shadow: none; background: #fff; }
.masa .no { font-size: 30px; font-weight: 800; }
.masa .durum { font-weight: 700; }
.masa.bos { opacity: 1; background: #fafafa; border-style: dashed; }
.masa.bos .no { color: #c4c4c8; }
.masa.dolu { border-color: var(--yazi); }
.masa.yeni { background: var(--sari-acik); border-color: #f2b56b; }
.masa.yeni .durum { color: var(--sari); }
.masa.hazir { background: var(--yesil-acik); border-color: #7cc596; }
.masa.hazir .durum { color: var(--yesil); }
.masa.cagri-var { background: var(--vurgu-acik); border-color: var(--vurgu); animation: cagri 1.5s infinite; }
.masa.cagri-var .durum { color: var(--vurgu-koyu); }
@keyframes cagri { 50% { box-shadow: 0 0 0 6px rgba(232, 67, 46, .18); } }
.cagri { border-left: 0; position: relative; overflow: hidden; }
.cagri::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--vurgu); }
.cagri.hesap::before { background: var(--yazi); }

/* mutfak fişleri */
.fis { border: 1.5px solid var(--cizgi); }
.fis-bas { background: var(--zemin); border-bottom: 1px solid var(--cizgi); }
.fis-bas b { font-weight: 800; }
.kalem.hazir .tik { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.fis.gec { border-color: #f2b56b; }
.fis.cokgec { border-color: var(--vurgu); }
.fis.cokgec .sure { background: var(--vurgu); }

/* yönetim */
.ozet .kart { background: #fff; padding: 18px; }
.ozet b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.urun img, .urun .foto-yok { border-radius: 12px; }
.saatler div { background: var(--vurgu); }