/* =====================================================================
   POPPINS — SUNUCUDA GÖMÜLÜ
   ---------------------------------------------------------------------
   Eskiden app.css sadece "font-family: Poppins" diyordu ama yazı tipini
   HİÇBİR YERDEN yüklemiyordu. Poppins kurulu olmayan cihazlarda (yani
   telefonların ve tabletlerin tamamında) sistem yazı tipine düşüyordu.
   Türkçe ş/ğ/ı ile Almanca ä/ö/ü/ß bazen farklı yazı tiplerinden gelip
   birbirine uymuyordu — "karakterler kötü görünüyor" dediğin şey buydu.

   İki alt küme yükleniyor:
     poppins-NNN.woff2      latin      (a-z, ä ö ü ß, €, ç, ı)
     poppins-ext-NNN.woff2  latin-ext  (ş ğ Ş Ğ İ)
   unicode-range sayesinde tarayıcı ikinci dosyayı ancak o karakterler
   sayfada geçiyorsa indirir. Hepsi toplam 80 KB, bir kez iner.

   GOOGLE FONTS'TAN ÇEKMİYORUZ. İki sebep:
     1) Almanya'da mahkemeler, ziyaretçinin IP'sini Google'a gönderdiği
        için Google Fonts'u onaysız gömmeyi KVKK/DSGVO ihlali saydı.
     2) PWA çevrimdışı açıldığında dışarıdan yazı tipi inemez.
   ===================================================================== */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/poppins-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/poppins-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/poppins-ext-500.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/poppins-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/poppins-ext-600.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/poppins-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/poppins-ext-700.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/poppins-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/poppins-ext-800.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/poppins-800.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#FBF7F0; --surface:#FFFFFF; --surface-2:#F3EDE2;
  --ink:#2E1B10; --ink-soft:#5B4535; --muted:#8A7969;
  --gold:#B58A3C; --gold-soft:#F0E3C7;
  --brand:#3E2416; --brand-ink:#2E1B10; --brand-text:#F4EADD; --field:#FDFBF7;
  --green:#2C7A4E; --red:#C4452F; --blue:#1A73E8; --amber:#D98324;
  --line:rgba(46,27,16,.12); --shadow:0 2px 10px rgba(46,27,16,.08);
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font-family:inherit;font-size:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;
  border-radius:13px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-weight:600;cursor:pointer;text-decoration:none}   /* <a class="btn"> altı çizili görünmesin */
.btn:active{transform:scale(.98)}

/* GERİ düğmesi — ok CSS ile çiziliyor.
   Eskiden içinde &larr; (←) yazıyordu. O karakter Poppins'te yok; her
   cihaz başka bir yedek yazı tipinden getiriyor, kalınlığı ve hizası
   düğmeden düğmeye değişiyordu. Kenarlıkla çizilen ok her yerde aynı. */
.btn-back{position:relative;font-size:0}
.btn-back::before{content:"";position:absolute;left:50%;top:50%;
  width:9px;height:9px;border-left:2.2px solid currentColor;border-bottom:2.2px solid currentColor;
  transform:translate(-20%,-50%) rotate(45deg)}
.btn-back::after{content:"";position:absolute;left:50%;top:50%;
  width:13px;height:2.2px;background:currentColor;transform:translate(-45%,-50%)}
.btn-primary{background:var(--gold);border-color:var(--gold);color:#fff}
.btn-green{background:var(--green);border-color:var(--green);color:#fff}
.btn-lg{width:100%;min-height:56px;font-size:17px;font-weight:700}
.alert{padding:12px 14px;border-radius:12px;background:#FBE9E5;color:#8E2D1C;font-size:14px;font-weight:600;margin-bottom:14px}

/* Giriş */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-card{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:26px 22px}
.login-brand{text-align:center;font-size:22px;font-weight:700;color:var(--gold)}
.login-h1{margin:6px 0 18px;text-align:center;font-size:17px;font-weight:600;color:var(--muted)}
/* PIN kutusu artık yazı alanı DEĞİL, sadece nokta gösteren bir kutu.
   Odaklanamadığı için Android klavyesi açılmıyor ve tarayıcı parola
   yöneticisi burada kaydedecek bir alan bulamıyor. */
.pin-display{display:flex;align-items:center;justify-content:center;
  width:100%;height:60px;text-align:center;font-size:26px;letter-spacing:.35em;
  border-radius:14px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink);margin-bottom:16px;
  -webkit-user-select:none;user-select:none;overflow:hidden}
.pin-display .pin-ph{color:var(--muted);opacity:.5}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.key{height:62px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-size:22px;font-weight:600;cursor:pointer}
.key-soft{background:var(--surface-2);color:var(--muted)}
.login-lang{margin-top:16px;text-align:center;font-size:13px;color:var(--muted)}
.login-lang a{color:var(--gold);text-decoration:none;font-weight:600;padding:0 6px}

/* Üst çubuk */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px));background:var(--surface);border-bottom:1px solid var(--line)}
.topbar h1{margin:0;font-size:18px;font-weight:700}
.topbar .spacer{margin-left:auto}
.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;font-size:13px;font-weight:600;background:var(--surface-2);color:var(--ink-soft)}
.pill-on{background:#E9F3EC;color:#1F5C39}
.pill-off{background:#FBE9E5;color:#8E2D1C}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:block}

/* Masa ızgarası */
.wrap{max-width:960px;margin:0 auto;padding:16px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-weight:600;cursor:pointer;white-space:nowrap}
.chip[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
/* Durum açıklama şeridi — kasa ve garson ekranı ortak kullanır */
.legend{display:flex;flex-wrap:wrap;gap:16px;padding:6px 2px 14px;font-size:13px;color:var(--ink-soft)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.sw{width:15px;height:15px;border-radius:5px;display:block;border:2px solid transparent}
.sw-free{background:#F1EBE0;border-color:#DCD3C6}
.sw-cooking{background:#FDF1DF;border-color:#E8A33D}
.sw-ready{background:#E4F4EA;border-color:#2C7A4E}
.sw-served{background:#EAEFF5;border-color:#5D7A9B}
.sw-late{background:#FBE3DE;border-color:#C4452F}

.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}

/* Masa kartı: durum renkleri kasa ekranıyla aynı dili konuşur.
   Zemin + kenarlık + sol şerit birlikte değişir, uzaktan bakışta zemin yeter. */
.tcard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:5px;min-height:118px;
  padding:14px 14px 14px 20px;border-radius:16px;border:2px solid #E4DACB;background:var(--surface);
  text-align:left;cursor:pointer;transition:transform .12s ease}
.tcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:transparent}
.tcard:active{transform:scale(.985)}
.tcard .tl{font-size:19px;font-weight:700;line-height:1.15}
/* Saat · süre · kişi sayısı.
   Düz metinken dar kartta "6" üstte "Gäste" altta kalıyordu ve dakika ile
   kişi sayısı yan yana iki çıplak rakam gibi okunuyordu.
   Her parça kendi içinde bölünmez; yer kalmazsa parça bütün olarak alta
   iner. Kişi sayısı rozet, böylece dakikayla karışmıyor. */
.tcard .tm{display:flex;flex-wrap:wrap;align-items:center;gap:3px 7px;
  font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.5}
.tcard .tm .tmi{white-space:nowrap}
.tcard .tm .tmi + .tmi::before{content:"\00b7";margin-right:7px;opacity:.5}
.tcard .tm .tmg{padding:1px 8px;border-radius:999px;background:rgba(0,0,0,.055);
  font-weight:700;color:var(--ink-soft)}
/* Rozetten önce nokta olmasın. Seçici .tmi + .tmi::before kuralından
   daha baskın olmalı, yoksa o kural kazanıyor ve rozetin solunda
   boşlukta duran bir nokta kalıyor. */
.tcard .tm .tmi + .tmi.tmg::before{content:none;margin-right:0}
.tcard.late .tm .tmg,.tcard.cooking .tm .tmg,
.tcard.ready .tm .tmg,.tcard.served .tm .tmg{background:rgba(255,255,255,.6)}
.tcard .ts{font-size:12.5px;font-weight:700}
.tcard .tt{margin-top:auto;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}

.tcard.free{min-height:96px;background:var(--surface-2);border-color:transparent;box-shadow:none}
.tcard.free .tl,.tcard.free .tt{color:#A5937F}

.tcard.cooking{background:#FDF1DF;border-color:#E8A33D}
.tcard.cooking::before{background:#E8A33D}
.tcard.cooking .tl,.tcard.cooking .tt{color:#5A3A0C}
.tcard.cooking .ts{color:#8A5A12}

.tcard.ready{background:#E4F4EA;border-color:#2C7A4E}
.tcard.ready::before{background:#2C7A4E}
.tcard.ready .tl,.tcard.ready .tt{color:#14402A}
.tcard.ready .ts{color:#1F5C39}

.tcard.served{background:#EAEFF5;border-color:#5D7A9B}
.tcard.served::before{background:#5D7A9B}
.tcard.served .tl,.tcard.served .tt{color:#1F3350}
.tcard.served .ts{color:#2D4A6B}

.tcard.late{background:#FBE3DE;border-color:#C4452F;border-width:3px;padding-left:19px}
.tcard.late::before{background:#C4452F}
.tcard.late .tl,.tcard.late .tt{color:#6E2114}
.tcard.late .ts{color:#8E2D1C}

/* Masanın sahibi olan garson. Başkasının masasıysa göze çarpsın. */
.towner{font-size:12px;font-weight:700;opacity:.75}
.towner.other{display:inline-block;align-self:flex-start;padding:2px 9px;border-radius:999px;
  background:rgba(196,69,47,.15);color:#8E2D1C;opacity:1}

/* Başkasının masasına sipariş girerken çıkan uyarı şeridi */
.ownwarn{display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:12px 14px;border-radius:14px;
  background:#FBE9E5;border:1px solid #F0CFC8;color:#8E2D1C;font-size:14px;font-weight:600;line-height:1.4}

/* Masa kartında istasyon satırları — mutfak ve bar ayrı ayrı okunur */
/* İSTASYON SATIRI — iki satır
   Üstte ne olduğu, altta kaç tanesi bittiği ve kaç dakikadır beklediği.
   Telefonda kart içi 140px; "Mutfak · Hazırlanıyor 12 dk" tek satıra
   178px ister, 11 puntoda bile 162px. Tek satır sığmıyor, o yüzden alt
   satır bilerek var — kelime ortasından bölünen bozuk sarma değil. */
.trow{display:block;font-size:12px;font-weight:700;line-height:1.3}
.trow .tline{display:flex;align-items:center;gap:6px;min-width:0}
.trow .tn{min-width:0}
.trow .tdot{width:8px;height:8px;box-sizing:border-box;border-radius:50%;
  flex:0 0 auto;background:currentColor}
.trow.cook{color:#8A5A12}
.trow.rdy{color:#1F5C39}
.trow.lt{color:#8E2D1C}
/* Alt satır noktanın hizasından başlar (8px nokta + 6px boşluk). */
.trow .tmeta{display:flex;align-items:baseline;gap:5px;margin-top:1px;
  padding-left:14px;font-variant-numeric:tabular-nums}
.trow .tnum{font-size:12px;font-weight:800}
/* Bitmiş ürün varsa sayı yeşil: garson alabileceği bir şey olduğunu
   kelimeyi okumadan görür. */
.trow .tnum.has{color:#1F5C39}
.trow .tsep{font-style:normal;font-weight:600;opacity:.45}
.trow .tw{font-weight:600;opacity:.75;white-space:nowrap}

.tlate{position:absolute;top:8px;right:8px;padding:3px 9px;border-radius:999px;
  background:#C4452F;color:#fff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
  box-shadow:0 2px 8px rgba(196,69,47,.45);animation:lateblink 1.6s ease-in-out infinite}
@keyframes lateblink{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.tlate{animation:none}}

/* Rozetler renkli zemin üstünde de okunsun */
.badges{display:flex;gap:5px;flex-wrap:wrap}
.badge{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.72);color:#6B4A1E;border:1px solid rgba(46,27,16,.10)}
.badge-red{background:#C4452F;color:#fff;border-color:transparent}
.badge-green{background:#2C7A4E;color:#fff;border-color:transparent}

/* Menü listesi */
.cat-title{margin:20px 0 8px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ilist{display:flex;flex-direction:column;gap:8px}
.irow{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);text-align:left;cursor:pointer}
.irow.out{opacity:.45}
.irow .n{flex-grow:1;min-width:0;font-weight:600}
.irow .d{font-size:12.5px;color:var(--muted);font-weight:400}
.irow .p{font-weight:700;color:var(--gold);white-space:nowrap}
.irow .q{min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:var(--brand);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.searchbox{width:100%;height:48px;padding:0 14px;border-radius:13px;border:1px solid var(--line);background:var(--surface)}

/* Sepet çubuğu */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:12px;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(46,27,16,.08)}
.cartbar .sum{font-size:20px;font-weight:700}
.cartbar .cnt{font-size:12.5px;color:var(--muted)}

/* Alt sayfa (modal) */
.sheet-bg{position:fixed;inset:0;z-index:50;background:rgba(24,14,8,.5);display:none}
.sheet-bg.on{display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;max-height:86vh;overflow-y:auto;background:var(--bg);border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .25s ease}
.sheet.on{transform:translateY(0)}
.sheet h2{margin:0 0 4px;font-size:19px;font-weight:700}
.sheet .sub{margin:0 0 14px;font-size:13.5px;color:var(--muted)}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.opt{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:600;cursor:pointer}
.opt[aria-pressed="true"]{background:var(--gold-soft);border-color:var(--gold);color:#6B4A1E}
.qtyrow{display:flex;align-items:center;gap:14px;margin:14px 0}
.qtybtn{width:52px;height:52px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-size:24px;font-weight:600;cursor:pointer}
.qtyval{flex-grow:1;text-align:center;font-size:24px;font-weight:700}
.ta{width:100%;min-height:70px;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--surface);resize:none}
.sheet-actions{display:flex;gap:10px;margin-top:14px}
.sheet-actions .btn{flex:1}
.crow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.cedit{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:6px 8px;margin-left:-8px;border:0;border-radius:10px;background:transparent;text-align:left;cursor:pointer}
.cedit:active{background:var(--surface-2)}
.cname{font-weight:600}
.cnote{color:var(--red);font-weight:600;font-size:12.5px}
.clater{font-size:12.5px;color:var(--muted)}
.cedit-hint{font-size:11px;color:var(--gold);font-weight:600}
.btn-red{background:#FBE9E5;border-color:#F0CFC8;color:#8E2D1C}
.crow:last-of-type{border-bottom:0}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:60;padding:13px 20px;border-radius:14px;background:var(--brand-ink);color:#fff;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s}
.toast.on{opacity:1}

/* ==================================================================
   KİMLİK, PANEL VE MOBİL DÜZEN
   ================================================================== */

/* ---------- Üst çubuktaki kullanıcı kapsülü ----------
   Her ekranda kimin cihazda olduğu görünsün: yanlış PIN'le yanlış
   ekrana düşüldüğünde bu tek bakışta anlaşılır. */
.ubar{position:relative;display:inline-flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;
  border-radius:999px;background:var(--surface-2);color:var(--ink);max-width:46vw}
/* Baş harf artık düğme: telefonda ona dokununca tam ad ve rol açılıyor.
   Tarayıcının kendi düğme görünümü sıfırlanıyor. */
.uav{border:0;font-family:inherit;cursor:pointer;padding:0}
.uav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* İlk ad — masaüstünde tam ad zaten yazdığı için gizli. */
.ufirst{display:none;font-size:13.5px;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}
.uav{width:32px;height:32px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:800;background:var(--brand);color:#fff}
.utxt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.utxt b{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.utxt span{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.ubar-waiter  .uav{background:var(--gold)}
.ubar-kitchen .uav{background:#C97B1E}
.ubar-bar     .uav{background:#1F7F96}
.ubar-cashier .uav{background:#2C7A4E}
.ubar-admin   .uav{background:#6D4BC4}
.ubar-dark{background:rgba(255,255,255,.12);color:#F4EADD}
.ubar-dark .utxt span{color:rgba(244,234,221,.7)}

.btn-icon{min-height:44px;width:44px;padding:0}
.btn-icon svg{width:20px;height:20px}

/* ---------- Yönetim paneli ---------- */
body.hubpage{background:var(--bg)}
.topbar-admin{background:var(--brand);border-bottom:0;color:var(--brand-text)}
.topbar-admin .btn{background:rgba(255,255,255,.12);border-color:transparent;color:#F4EADD}
.brandmark{width:40px;height:40px;flex:0 0 auto;border-radius:12px;background:var(--gold);color:var(--brand-ink);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;letter-spacing:.02em}
.brandtxt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brandtxt b{font-size:16px;font-weight:700}
.brandtxt span{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

.hub{max-width:920px;margin:0 auto;padding:20px 16px 56px}
.hubh{margin:26px 0 2px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hubh:first-of-type{margin-top:8px}
.hubp{margin:0 0 14px;font-size:13.5px;color:var(--muted)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{display:flex;flex-direction:column;gap:3px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:13px 15px;text-decoration:none;color:var(--ink)}
.stat b{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.stat .sk{font-size:11.5px;font-weight:600;color:var(--muted)}
.stat-gold{background:var(--gold-soft);border-color:#E3D0A8}
.stat-gold b{color:#6B4A1E}
.stat-warn{background:#F3EBFE;border:2px solid #7C3AED}
.stat-warn b{color:#5B21B6}
.stat-warn .sk{color:#6D4BC4}

.links{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
/* Panel sırası: "Sırala" modu (index.php). Normalde kartlar sabit. */
.dashh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dashh .hubh{margin-right:auto}
.dash-btn{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.dash-btn.on{background:var(--ink);color:#fff;border-color:transparent}
.dash-hint{display:none;margin:0 0 10px;padding:9px 12px;border-radius:12px;background:#E4EEF5;color:#1F5570;font-size:13px}
body.dash-edit .dash-hint{display:block}
.links.dash-on [data-k]{cursor:grab;outline:2px dashed color-mix(in srgb,var(--ink) 25%,transparent);outline-offset:-2px;animation:dashw 1.6s ease-in-out infinite}
.links.dash-on [data-k]:nth-child(2n){animation-delay:.3s}
@keyframes dashw{0%,100%{transform:rotate(0)}25%{transform:rotate(-.4deg)}75%{transform:rotate(.4deg)}}
.dash-ghost{opacity:.35}.dash-chosen{box-shadow:0 12px 30px rgba(0,0,0,.2)}
.slink{display:flex;align-items:center;gap:13px;padding:15px;border-radius:16px;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);
  transition:transform .12s ease}
.slink:active{transform:scale(.99)}
.slink .si{width:44px;height:44px;flex:0 0 auto;border-radius:13px;display:flex;align-items:center;
  justify-content:center;background:var(--surface-2);color:var(--ink-soft)}
.slink .si svg{width:23px;height:23px}
.slink .st{display:flex;flex-direction:column;gap:2px;min-width:0}
.slink .st b{font-size:16px;font-weight:700}
.slink .st span{font-size:12.5px;color:var(--muted);line-height:1.35}

.sl-waiter   .si{background:#F5E9D2;color:#8A5A12}
.sl-kitchen  .si{background:#FDEEDB;color:#A9701C}
.sl-bar      .si{background:#DFF0F5;color:#15687C}
.sl-pos      .si{background:#E4F4EA;color:#1F5C39}
.sl-menu     .si{background:#F3EBFE;color:#5B21B6}
.sl-stats    .si{background:#E7EFF9;color:#1B5AA8}
.sl-report   .si{background:#FBE9E5;color:#8E2D1C}
.sl-users    .si{background:#EFEAF7;color:#4B3A7A}
.sl-settings .si{background:#EDEAE4;color:#5B4535}
.sl-pin      .si{background:#F1EBE0;color:#6B4A1E}

/* ---------- Ödendi ama masa kapatılmadı ----------
   Kasiyerin unutmaması gereken tek iş bu, bu yüzden kendi rengi var. */
.tcard.paid,.pcard.paid{background:#F3EBFE;border-color:#7C3AED}
.tcard.paid::before,.pcard.paid::before{background:#7C3AED}
.tcard.paid .tl,.tcard.paid .tt,.pcard.paid .pl,.pcard.paid .pt{color:#3F1D75}
.tcard.paid .ts,.pcard.paid .pstate{color:#5B21B6}
.sw-paid{background:#F3EBFE;border-color:#7C3AED}
.closehint{position:absolute;top:8px;right:8px;padding:3px 9px;border-radius:999px;background:#7C3AED;
  color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 2px 8px rgba(124,58,237,.45);animation:lateblink 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.closehint{animation:none}}
.pill-warn{background:#7C3AED;color:#fff}

/* ---------- Menü: kategori şeridi ve renkler ---------- */
.menuhead{position:sticky;top:0;z-index:20;margin:0 -16px 12px;padding:10px 16px 8px;
  background:var(--bg);border-bottom:1px solid var(--line)}
.srch{position:relative}
.srch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:19px;height:19px;
  stroke:var(--muted);fill:none;stroke-width:2;pointer-events:none}
.srch input{width:100%;height:52px;padding:0 14px 0 42px;border-radius:14px;border:2px solid var(--line);
  background:var(--surface);font-size:16px;font-weight:600}
.srch input:focus{outline:none;border-color:var(--gold);background:#fff}
.catnav{display:flex;gap:7px;overflow-x:auto;margin-top:9px;padding-bottom:2px;scrollbar-width:none}
.catnav::-webkit-scrollbar{display:none}
.catbtn{flex:0 0 auto;min-height:38px;padding:0 13px;border-radius:999px;border:1.5px solid currentColor;
  background:transparent;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.catsec{scroll-margin-top:118px}
.cathead{display:flex;align-items:center;gap:9px;margin:18px 0 8px}
.cathead .cbar{width:4px;height:18px;border-radius:2px;background:currentColor}
.cathead b{font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.irow{border-left:4px solid transparent}
.irow .p{color:inherit}

/* ---------- Mobil: üst çubuk ve açıklama şeridi sıkışsın ---------- */
@media (max-width:720px){
  .topbar{gap:8px;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top,0px))}
  .topbar h1{font-size:16px}
  .ubar{padding:4px 10px 4px 4px;max-width:52vw}
  .uav{width:28px;height:28px;font-size:13px}
  .utxt b{font-size:12.5px}
  .utxt span{font-size:10px}
  .btn{min-height:42px;padding:0 13px}
  .btn-icon{width:42px}
  .pill{padding:5px 10px;font-size:12px}

  /* Açıklama şeridi SARSIN, yatay kaydırmasın.
     Eskiden tek satırda yatay kaydırmalıydı: ekranda "Hazır – servis"in
     yarısı görünüyor, arkasındaki üç açıklama hiç görünmüyordu. Kaydırma
     çubuğu da gizli olduğu için orada devamı olduğu anlaşılmıyordu.
     İki satıra sarmak hepsini gösteriyor ve daha derli toplu duruyor. */
  .legend{flex-wrap:wrap;overflow:visible;gap:7px 14px;padding:8px 2px 10px;margin:0;
    font-size:12px}
  /* flex:0 1 — uzun açıklama cümlesi gerekirse daralıp sarsın.
     "0 0" iken masalar ekranındaki uzun cümle ekrandan taşıyordu. */
  .legend span{flex:0 1 auto;min-width:0}
  .sw{width:13px;height:13px}

  .wrap{padding:12px}
  .tgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .links{grid-template-columns:1fr}
  .menuhead{margin:0 -12px 10px;padding:8px 12px 7px}
  .catsec{scroll-margin-top:112px}
}
@media (max-width:400px){
  .tgrid{grid-template-columns:repeat(2,1fr)}
}

/* Ses düğmesi: kapalıyken çizik, açıkken dalgalar */
#btnSound .snd-on{display:none}
#btnSound .snd-off{display:inline}
#btnSound.on .snd-on{display:inline}
#btnSound.on .snd-off{display:none}
#btnSound.on{background:var(--gold-soft);border-color:#E3D0A8;color:#6B4A1E}

.oempty-light{padding:30px 16px;text-align:center;color:var(--muted);font-size:14.5px;
  border:1px dashed var(--line);border-radius:16px}

/* Yönetim sayfaları için ortak tablo/form görünümü */
.adm{max-width:1000px;margin:0 auto;padding:18px 16px 56px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
.card > h2{margin:0 0 14px;font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.fld{display:block;font-size:13px;font-weight:600;margin:12px 0 5px}
.inp,.adm input[type=text],.adm input[type=number],.adm select,.adm textarea{
  width:100%;min-height:46px;padding:10px 13px;border-radius:12px;border:1px solid var(--line);
  background:var(--field);font-size:15px}
.adm textarea{min-height:64px;resize:vertical}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.ok{padding:11px 14px;border-radius:12px;background:#E9F3EC;color:#1F5C39;font-weight:600;font-size:14px;margin-bottom:14px}
.rowline{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rowline:last-child{border-bottom:0}
.rowline.off{opacity:.45}
.rowmain{flex:1 1 200px;min-width:0}
.rowmain b{display:block;font-size:15.5px}
.rowmain span{font-size:12px;color:var(--muted)}
.tagv{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.tagv.k{background:#FDEEDB;color:#A9701C}
.tagv.b{background:#DFF0F5;color:#15687C}
.tagv.out{background:#FBE9E5;color:#8E2D1C}
.price{font-weight:800;font-variant-numeric:tabular-nums;min-width:82px;text-align:right}
.btn-sm{min-height:38px;padding:0 12px;font-size:13.5px;border-radius:10px}
.catbar{display:flex;align-items:center;gap:9px;margin:22px 0 6px}
.catbar .cbar{width:5px;height:20px;border-radius:3px}
.catbar b{font-size:15px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
@media (max-width:640px){.g2,.g3{grid-template-columns:1fr}.price{min-width:66px}}

/* ---------- Sürükle-bırak sıralama ----------
   Tutamak (.drag) olmadan sürükleme başlamaz: dokunmatikte listeyi parmakla
   kaydırırken kartın yanlışlıkla taşınmaması için. */
/* Tutamak simgesi CSS ile ÇİZİLİYOR, harf olarak yazılmıyor.
   İçindeki ✥ karakteri Poppins'te yok; her cihaz onu başka bir yedek
   yazı tipinden getiriyordu ve tutamak her telefonda farklı görünüyordu.
   Altı noktalı ızgara her yerde birebir aynı çizilir. */
.drag{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:30px;min-height:30px;border-radius:8px;background:var(--surface-2);color:var(--muted);
  font-size:0;line-height:1;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.drag::before{content:"";width:10px;height:14px;
  background-image:radial-gradient(currentColor 1.5px,transparent 1.6px);
  background-size:5px 4.7px;background-position:center}
.drag:active{cursor:grabbing;background:var(--gold-soft);color:#6B4A1E}
.sortghost{opacity:.35}
.sortchosen{box-shadow:0 8px 22px rgba(46,27,16,.22)}
.sortbox{min-height:34px}
.sorttip{position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);z-index:80;
  padding:11px 18px;border-radius:13px;background:#2C7A4E;color:#fff;font-size:14px;font-weight:700;
  box-shadow:0 6px 20px rgba(46,27,16,.25);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.sorttip.show{opacity:1;transform:translate(-50%,0)}
.sorttip.bad{background:var(--red)}

/* ---------- Allerjen / katkı maddesi seçimi ---------- */
.codegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:7px}
.codebox{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;
  border:1px solid var(--line);background:var(--field);cursor:pointer;line-height:1.25}
.codebox.on{border-color:var(--gold);background:var(--gold-soft)}
.codebox input{width:19px;height:19px;flex:0 0 auto;margin:0;accent-color:var(--gold)}
.codebox b{flex:0 0 auto;min-width:19px;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.codebox span{font-size:12.5px;color:var(--ink-soft);min-width:0}
.tagv.code{background:#E7EFF9;color:#1B5AA8;letter-spacing:.06em}
@media (max-width:520px){.codegrid{grid-template-columns:1fr 1fr}.codebox span{font-size:11.5px}}

/* Allerjen klasör sayfası — yazdırma */
.amatrix{width:100%;border-collapse:collapse;font-size:13px}
.amatrix th,.amatrix td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.amatrix th{background:var(--surface-2);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em}
.amatrix td.c{font-weight:800;letter-spacing:.08em;white-space:nowrap}
.amatrix tr.cat td{background:var(--gold-soft);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.legendbox{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 18px;font-size:12.5px}
.legendbox div{padding:2px 0}
.legendbox b{display:inline-block;min-width:22px;font-weight:800}
@media print{
  .noprint{display:none !important}
  body{background:#fff}
  .adm{max-width:none;padding:0}
  .card{box-shadow:none;border:0;padding:0;margin:0 0 14px}
  .amatrix th,.amatrix td{border-color:#999}
  .amatrix tr.cat td{background:#eee}
}

/* ---------- Açılır/kapanır düzenleme panelleri ----------
   Hepsi birden açık durunca ekran karışıyordu; artık sadece ihtiyacın
   olanı açıyorsun. Düzenlenen ürün/kategori kendiliğinden açık gelir. */
.acc{margin-bottom:12px;border:1px solid var(--line);border-radius:18px;background:var(--surface);
  box-shadow:var(--shadow);overflow:hidden}
.acc > summary{display:flex;align-items:center;gap:10px;padding:15px 18px;cursor:pointer;
  font-size:14.5px;font-weight:700;color:var(--ink);list-style:none;user-select:none}
.acc > summary::-webkit-details-marker{display:none}
.acc > summary::before{content:"+";flex:0 0 auto;width:24px;height:24px;border-radius:8px;
  background:var(--gold-soft);color:#6B4A1E;font-size:16px;font-weight:800;line-height:24px;text-align:center}
.acc[open] > summary::before{content:"–"}
.acc[open] > summary{border-bottom:1px solid var(--line)}
.acc > .card{margin:0;border:0;border-radius:0;box-shadow:none}

/* ---------- Listede anlık fiyat ---------- */
.pquick{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}
/* .adm input[type=text] kuralı width:100% veriyor ve seçici gücü daha yüksek;
   bu yüzden burada .adm ile başlayan daha güçlü bir seçici kullanılıyor. */
.adm .pquick .pin{width:78px;min-width:78px;min-height:38px;padding:6px 9px;border-radius:10px;
  border:1px solid var(--line);background:var(--field);font-size:14.5px;font-weight:800;
  text-align:right;font-variant-numeric:tabular-nums}
.adm .pquick .pin:focus{outline:2px solid var(--gold);outline-offset:1px;background:#fff}
.adm .pquick .pin.saved{border-color:var(--green);background:#E9F3EC}
.adm .pquick .pin:disabled{opacity:.5}
.pquick b{font-weight:800;color:var(--gold)}

/* Çöp kutusu: yazı yerine simge. Dokunma alanı küçülmüyor, sadece
   genişlik daralıyor — menü satırındaki beş denetim böyle tek satıra
   sığıyor. */
/* =====================================================================
   KAÇ KİŞİ OTURDU — garson masa ekranı
   ---------------------------------------------------------------------
   İsteğe bağlı. Dokunulmazsa "–" kalır ve hiçbir yerde görünmez.
   Düğmeler 40 piksel: eldiven veya ıslak parmakla da basılabilsin.
   ===================================================================== */
.grow{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:9px 13px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.grow .glbl{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.grow .gbtn{width:40px;height:40px;flex:0 0 auto;border:1px solid var(--line);
  border-radius:11px;background:#fff;color:var(--ink);
  font-size:19px;font-weight:700;line-height:1;cursor:pointer}
.grow .gbtn:active{background:var(--surface-2)}
.grow .gval{min-width:34px;text-align:center;font-size:19px;font-weight:800;
  font-variant-numeric:tabular-nums}

/* =====================================================================
   İZ BIRAKAN FİLİGRAN
   ---------------------------------------------------------------------
   Ekranın üstünde duran, okumayı engellemeyen çapraz yazı. Dokunmayı
   kesmez (pointer-events:none), seçilemez, yazdırmada da çıkar.
   Opaklık bilerek çok düşük: ekranda fark edilmez ama ekran görüntüsünde
   okunur. Yüksek olsaydı garson bütün gün rahatsız olurdu.
   ===================================================================== */
/* Dış kutu SADECE kırpar: ekran boyunda, taşmaz.
   Döndürme içteki katmanda — dışarıda olsaydı kutunun kendisi eğilip
   ekranı taşırır, bazı tarayıcılarda yatay kaydırma çubuğu çıkarırdı. */
.wmark{position:fixed;inset:0;z-index:9000;overflow:hidden;
  pointer-events:none;user-select:none;-webkit-user-select:none}
/* İç katman bilerek ekrandan büyük: döndürülünce köşeler boş kalmasın. */
.wmi{position:absolute;inset:-30%;
  display:flex;flex-wrap:wrap;align-content:center;justify-content:center;
  gap:46px 38px;transform:rotate(-24deg);
  font-size:11.5px;font-weight:600;letter-spacing:.09em;white-space:nowrap;
  color:#000;opacity:.045}
@media print{.wmi{opacity:.14}}

/* Satır sonu işareti sadece telefonda iş görür (bkz. 560px bloğu). */
.acts .brk{display:none}
.btn-trash{width:38px;min-width:38px;padding:0;
  display:inline-flex;align-items:center;justify-content:center}
.btn-trash svg{width:17px;height:17px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Ürün satırı: ad solda, düğmeler sağda tek blok halinde kalsın —
   dört düğme ayrı ayrı alt satıra kaymasın. */
.rowline .rowmain{flex:1 1 150px}
.rowline > form{flex:0 0 auto}
@media (max-width:560px){
  .adm .pquick .pin{width:70px;min-width:70px}
  .rowline{gap:7px}
}

/* ---------- Garson ekranı: masa notu ve ürün notları ----------
   Garson masaya girince ne yapıldığını görsün, ama menü sıkışmasın:
   bilgi varsa şerit çizilir, yoksa hiç yer kaplamaz. */
.tcard .tnote{margin-top:5px;padding:5px 8px;border-radius:9px;background:#FFF6E2;
  border-left:3px solid var(--gold);color:#6B4A1E;font-size:12px;line-height:1.35;
  text-align:left;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Rezervasyon: boş masada "📖 19:30 · Müller · 4" (garson ve kasa ekranı) */
.tres{margin-top:6px;padding:4px 8px;border-radius:9px;background:#E4EEF5;color:#1F5570;border-left:3px solid #1E8FC4;
  font-size:12px;font-weight:700;line-height:1.3;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tinfo{margin:0 0 12px;border:1px solid var(--line);border-radius:14px;background:#FFF9EE;overflow:hidden}
.tinfo > summary{display:flex;align-items:center;gap:7px;padding:11px 14px;cursor:pointer;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6B4A1E;list-style:none}
.tinfo > summary::-webkit-details-marker{display:none}
.tinfo > summary::before{content:"!";flex:0 0 auto;width:19px;height:19px;border-radius:50%;
  background:var(--gold);color:#fff;font-size:12px;line-height:19px;text-align:center;letter-spacing:0}
.tinfo > summary b{margin-left:auto;font-size:12px;color:var(--muted)}
.tinote{margin:0 14px 10px;font-size:14px;color:var(--ink);line-height:1.45}
.tilist{margin:0;padding:0 14px 12px 30px;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.tilist li{margin:3px 0}
.tilist b{color:var(--ink)}
.movebtn{margin:0 0 14px}

/* ---------- Masa değiştir / birleştir penceresi ----------
   Müşteri başka masaya geçtiğinde hesap oraya taşınır; hedef masa doluysa
   iki hesap birleştirilir. Liste zaten yüklü masa verisinden kurulur. */
.moveover{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(46,27,16,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.movebox{width:100%;max-width:640px;max-height:88vh;overflow:auto;background:var(--surface);
  border-radius:22px 22px 0 0;padding:20px 18px calc(22px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -8px 34px rgba(46,27,16,.28)}
.movebox h3{margin:0 0 14px;font-size:17px;font-weight:700}

/* ---------- İptal sebebi penceresi ---------- */
.cancelwhat{display:flex;align-items:baseline;gap:12px;margin:0 0 12px;padding:10px 13px;
  border-radius:12px;background:var(--surface-2);font-size:14.5px}
.cancelwhat span{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
/* Mutfaktan çıkmış ürün uyarısı: kasadaki kişi ne sildiğini bastığı an görsün. */
.cancelwarn{margin:0 0 12px;padding:10px 13px;border-radius:12px;
  background:var(--red-soft,#FBE9E5);border:1px solid rgba(196,69,47,.35);
  color:#8E2D1C;font-size:13px;font-weight:600;line-height:1.45}
.crlist{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.crbtn{min-height:48px;padding:0 15px;text-align:left;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);color:var(--ink);
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.crbtn[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#fff}
#cnotewrap{margin-bottom:12px}
.crfoot{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.btn-red[disabled]{opacity:.4}
.movehint{margin:16px 0 7px;font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.movegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.movecell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:60px;padding:8px 6px;border-radius:14px;border:1px solid var(--line);
  background:var(--field);color:var(--ink);font-size:14.5px;font-weight:700;cursor:pointer}
.movecell:active{transform:scale(.97)}
.movecell.busy{background:#FBEFD8;border-color:#E3C58A;color:#6B4A1E}
.movecell span{font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.movecell.busy span{color:#8A5A12}
@media (min-width:700px){
  .moveover{align-items:center}
  .movebox{border-radius:22px;max-height:80vh}
}

/* ---------- KABUL BEKLİYOR ----------
   Sipariş mutfağa/bara düştü ama henüz "Annehmen" yapılmadı.
   Bilerek "hazırlanıyor"dan farklı bir ton: kesik çerçeve = kimse
   üstüne almadı. Garson bunu görünce istasyona seslenebilir. */
.tcard.waiting,.pcard.waiting{background:#FBF4E6;border-color:#C9A227;border-style:dashed}
.tcard.waiting::before,.pcard.waiting::before{background:#C9A227}
.tcard.waiting .tl,.tcard.waiting .tt{color:#6B5210}
.tcard.waiting .ts{color:#8A6D14}
.sw-waiting{background:#FBF4E6;border-color:#C9A227;border-style:dashed}
.trow.wait{color:#8A6D14}
/* KABUL EDİLMEDİ: içi boş halka. "bekliyor" ile "hazırlanıyor" renkleri
   birbirine çok yakındı (#8A6D14 / #8A5A12); şekil farkı bakar bakmaz
   anlaşılıyor, renk farkı anlaşılmıyordu. */
.trow.wait .tdot{background:transparent;border:2px solid #C9A227}

/* Gönderilmemiş sipariş varsa bağlantı rozeti sarı yanar — "her şey yolunda"
   görüntüsü vermesin, garson masadan ayrılmadan fark etsin. */
.pill-wait{background:#FBF4E6;color:#6B5210}
.pill-wait .dot{background:#C9A227}


/* ---------------------------------------------------------------
   GARSON · BU MASADA NE VAR
   Masaya girince menünün üstünde açılır şerit. Kapalıyken tek satır
   yer kaplar; açıkken masaya oturduğundan beri gelen her şey görünür.
   Sadece okunur — iptal düğmesi bilerek yok.
   --------------------------------------------------------------- */
.ordbox{margin:0 0 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.ordbox>summary{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 14px;cursor:pointer;
  font-size:14px;font-weight:700;color:var(--ink);list-style:none}
.ordbox>summary::-webkit-details-marker{display:none}
.ordbox>summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:0 0 auto;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px)}
.ordbox[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.ordbox>summary .oh{color:var(--ink-soft);font-weight:600}
.ordbox>summary .on{min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:var(--gold);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.ordbox>summary .ot{font-size:13px;font-weight:700;color:var(--gold);margin-left:4px}
.ordbox .onote{margin:0;padding:10px 14px;background:var(--gold-soft);color:#6B4A1E;font-size:13px;font-weight:600}
.ordbox .olist{list-style:none;margin:0;padding:0 0 4px}
.ordbox .olist li{display:flex;align-items:baseline;gap:9px;padding:9px 14px;border-top:1px solid var(--line);font-size:14px}
.ordbox .olist .q{flex:0 0 auto;min-width:26px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ordbox .olist .n{flex:1 1 auto;min-width:0;font-weight:600}
.ordbox .olist .n .nt{display:block;font-style:normal;font-size:12.5px;font-weight:600;color:var(--gold)}
.ordbox .olist .s{flex:0 0 auto;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.ordbox .olist .t{flex:0 0 auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
/* ALDIM düğmesi — tabağı alan garson buradan işaretler.
   Hazır durumdaki ürün için yeşil: garson alacağını gözle bulur. */
.ordbox .olist .tookbtn{flex:0 0 auto;min-height:32px;padding:0 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.ordbox .olist .tookbtn.rdy{background:var(--green);border-color:var(--green);color:#fff}
.ordbox .olist .tookbtn:disabled{opacity:.45}
.ordbox .olist li.o-wait .s{background:#F1EBE0;color:#6B5A48}
.ordbox .olist li.o-work .s{background:#FDF1DF;color:#8A5A12}
.ordbox .olist li.o-ok .s{background:#E4F4EA;color:#1F5C39}
.ordbox .olist li.o-done .s{background:#EAEFF5;color:#42566E}
.ordbox .olist li.o-done .n{color:var(--muted);font-weight:500}
/* Servisi alan kişinin adı, durum rozetinin içinde. */
.ordbox .olist .stook{font-weight:800}
.ordbox .ofoot{margin:0;padding:9px 14px 12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}


/* ---------------------------------------------------------------
   PANEL · MENÜ EKRANI, KATLANIR KATEGORİ PANELLERİ
   Kategoriler kapalı gelir: liste kısalır, sürükleme mesafesi kısalır
   ve kapalı bir kategorinin içine yanlışlıkla bir şey bırakılamaz.
   Sıralamanın asıl yolu ▲ ▼ oklarıdır — tek dokunuş, kaza yok.

   Sınıf adı .cgroup: .catsec garson ekranında menü kategorileri için
   zaten kullanılıyor, ikisi karışmasın.
   --------------------------------------------------------------- */
.mtools{display:flex;gap:8px;margin:0 0 14px}
.cgroup{scroll-margin-top:80px}
.cgroup .catbody{display:none}
.cgroup.open .catbody{display:block}
.cgroup.moved > .catbar{animation:catmoved .9s ease}
@keyframes catmoved{
  0%{background:var(--gold-soft)}
  70%{background:var(--gold-soft)}
  100%{background:transparent}
}
.catbar .ctog{flex:0 0 auto;width:28px;height:28px;padding:0;border:0;border-radius:8px;
  background:var(--surface-2);color:var(--muted);cursor:pointer;position:relative}
.catbar .ctog::before{content:"";position:absolute;left:10px;top:9px;width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s}
.cgroup.open .catbar .ctog::before{transform:rotate(45deg);top:7px}
.catbar .cname{display:flex;align-items:center;gap:9px;min-height:36px;padding:0 4px;
  border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left}
.catbar .cname b{font-size:15px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
/* Oklar da CSS ile çiziliyor. ▲ ▼ karakterleri Poppins'te yok; yedek
   yazı tipinden geldiklerinde boyutları ve hizaları cihazdan cihaza
   değişiyordu. Kenarlıkla çizilen üçgen her yerde aynı. */
.catbar .mvpair{display:inline-flex;gap:4px;flex:0 0 auto}
.catbar .mv{position:relative;width:36px;height:36px;padding:0;border:1px solid var(--line);
  border-radius:9px;background:var(--surface);color:var(--ink-soft);font-size:0;
  line-height:1;cursor:pointer}
.catbar .mv::before{content:"";position:absolute;left:50%;top:50%;width:0;height:0;
  border-left:5.5px solid transparent;border-right:5.5px solid transparent}
.catbar .mv[data-dir="up"]::before{border-bottom:6.5px solid currentColor;transform:translate(-50%,-62%)}
.catbar .mv[data-dir="dn"]::before{border-top:6.5px solid currentColor;transform:translate(-50%,-38%)}
.catbar .mv:active{background:var(--gold-soft);color:#6B4A1E}


/* =====================================================================
   MOBİL DÜZEN — 560 piksel ve altı
   ---------------------------------------------------------------------
   Sistemin asıl cihazları tablet: mutfak, bar ve kasa duvarda ya da
   tezgâhta durur. Ama yönetici çoğu zaman telefondan giriyor ve orada
   her şey birbirine giriyordu: butonlar alt satıra kayıyor, her satır
   başka hizada duruyordu.

   BURADAKİ TEK KURAL: bir satırda ya HER ŞEY yan yana sığar, ya da
   butonlar TAMAMI birlikte alt satıra iner ve solda hizalanır. Yarım
   kayma yok. Kazara sarma yok.

   Bunu `.acts` sarmalayıcısı sağlıyor: butonlar tek bir kutunun içinde,
   o kutu ya sığar ya da bütün olarak alta geçer.
   ===================================================================== */
@media (max-width:560px){

  /* ---------- Ölçüler: parmakla basılabilir ama yer kaplamayan ---------- */
  .btn{min-height:42px;padding:0 13px;font-size:14px;border-radius:11px}
  .btn-sm{min-height:36px;padding:0 11px;font-size:13px;border-radius:10px}
  .btn-lg{min-height:50px;font-size:16px}
  .btn-icon{width:42px;min-width:42px;padding:0}
  .tagv,.tag{font-size:10.5px;padding:3px 8px}

  /* ---------- Üst çubuk ---------- */
  .topbar{gap:8px;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .topbar h1{font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pill{padding:6px 10px;font-size:12px}
  /* ---------- Kim giriş yaptı ----------
     Dükkânda çok personel var, tabletler ortak. Yanlış kişinin
     oturumunda sipariş girilirse ciro yanlış garsona yazılır.

     Üst çubukta kalan boş yeri ölçtüm: garson 98px, kasa 44px,
     mutfak/bar 0px. O yüzden telefonda İLK AD satır içinde duruyor
     (garson ve kasada yer var), tam ad + rol ise baş harfe dokununca
     çubuğun altında açılıyor. Açılma saf CSS — başka yere dokununca
     odak gider ve kendiliğinden kapanır. */
  .ufirst{display:inline-block;font-size:13px;max-width:92px}
  .ubar .utxt{
    position:absolute;top:100%;right:0;z-index:60;margin-top:7px;
    display:none;padding:8px 12px;border-radius:12px;text-align:right;
    background:var(--brand-ink);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.28);
  }
  .ubar .utxt b{overflow:visible;font-size:13.5px}
  .ubar .utxt span{color:rgba(255,255,255,.72)}
  .ubar:focus-within .utxt{display:flex}

  /* Bağlantı rozeti: her şey yolundayken sadece yeşil nokta.
     "Bağlı" yazısı dar ekranda başlığı sıkıştırıyordu ve zaten hiçbir
     şey söylemiyor. AMA çevrimdışıyken ve bekleyen sipariş varken yazı
     GÖRÜNÜR kalır — orada okunacak gerçek bir bilgi var
     ("2 bekleyen sipariş"), onu gizlemek tehlikeli olurdu. */
  .topbar #net.pill-on{padding:0;width:26px;height:26px;border-radius:50%;
    justify-content:center;gap:0;flex:0 0 auto}
  .topbar #net.pill-on .nettxt{display:none}

  /* ---------- "Bu masada" şeridi ----------
     Rozete istasyon adı eklenince ("Mutfak · hazırlanıyor") ürün adına
     kalan yer daraldı ve uzun adlar üç satıra bölünüyordu. Rozet biraz
     küçültüldü: ad iki satırda kalıyor, liste düzenli duruyor. */
  .ordbox .olist li{gap:7px;padding:8px 11px;font-size:13.5px}
  .ordbox .olist .s{font-size:10.5px;padding:2px 7px}
  .ordbox .olist .t{font-size:11px}
  .ordbox .olist .tookbtn{min-height:30px;padding:0 9px;font-size:11.5px}

  /* ---------- Menü satırı: beş denetim tek satırda ----------
     Ölçtüm: 390 pikselde düğmeler 363 piksel yer istiyor, kutu 327.
     Silme simgeye döndü (-39px), fiyat kutusu daraldı, düğme yazıları
     bir punto küçüldü. Toplam ~45 piksel kazanç — 360 pikselde bile
     tek satırda kalıyor. Dokunma yüksekliği 36 pikselin altına
     inmiyor, yanlış tuşa basma riski artmıyor. */
  .adm .acts{gap:6px}
  .adm .acts .btn-sm{padding:0 9px;font-size:12.5px}
  .adm .acts .btn-trash{width:36px;min-width:36px;padding:0}
  /* İKİ SATIR, BİLEREK.
     Üstte fiyat kutusu ve silme; altta üç günlük düğme.

     Fiyat bir düğme değil, yazı kutusu — düğmelerin arasında durması hem
     karıştırıyordu hem de satırı taşırıyordu. Silme de yıkıcı bir işlem,
     "Gizle"nin hemen yanında olmamalı. İkisini üst satıra alınca alttaki
     üç düğme Almanca uzun kelimelerle bile ("Ausverkauft", "Verbergen")
     360 pikselde sığıyor.

     Satır sayısı artmıyor: eskiden de "Sil" tek başına alta düşüyordu —
     sadece düzensizdi. flex-basis %60: fiyat kutusu üst satırı doldurup
     silmeyi sağa itiyor, geri kalan üç düğme alta geçmek zorunda kalıyor. */
  .adm .acts .pquick{flex:0 0 auto;gap:3px}
  .adm .acts .delform{margin-left:auto}       /* silme en sağa */
  .adm .acts .brk{display:block;flex:0 0 100%;height:0}   /* zorunlu satır sonu */
  .adm .pquick .pin{width:78px;min-width:78px;padding:6px 9px}

  /* Kişi sayacı: telefonda yazı küçülür, düğme ölçüsü korunur. */
  .grow{gap:8px;padding:8px 11px;margin-bottom:10px}
  .grow .glbl{font-size:12.5px}
  .grow .gbtn{width:38px;height:38px;font-size:18px}
  .grow .gval{font-size:17.5px;min-width:30px}

  /* ---------- Masa kartı: istasyon satırı ---------- */
  .trow{font-size:11.5px}
  .trow .tnum{font-size:11.5px}
  .trow .tw{font-size:11px}
  .trow .tmeta{padding-left:13px;gap:4px}

  /* ---------- Kart ve sayfa boşlukları ---------- */
  .pg{padding:14px 12px 44px}
  .card{padding:14px;border-radius:16px;margin-bottom:12px}
  .wrap{padding:12px}

  /* =====================================================================
     SATIR DÜZENİ — personel, menü ürünleri, her yerde aynı mantık
     ===================================================================== */
  .rowline,.urow{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px;
    padding:11px 0;
  }
  /* İsim her zaman ilk satırı tek başına alır: kırpılmaz, sıkışmaz. */
  .rowline .rowmain,.urow .uname{flex:1 1 100%;min-width:0;margin-bottom:2px}
  .rowline .rowmain b,.urow .uname b{font-size:15px;line-height:1.3}
  .rowline .rowmain span,.urow .uname span{font-size:12px}

  /* Butonlar TEK kutuda ve hep birlikte alt satırda, solda hizalı. */
  .rowline .acts,.urow .acts{
    display:flex;flex-wrap:wrap;align-items:center;gap:7px;
    flex:1 1 100%;margin-top:2px;
  }
  .rowline .acts .btn,.urow .acts .btn{flex:0 0 auto}
  .rowline > form,.urow > form,.acts > form{display:inline-flex;margin:0}

  /* =====================================================================
     MENÜ — kategori panelleri kendi renginde çerçevede
     ===================================================================== */
  .cgroup{
    border:1px solid var(--line);border-left:4px solid currentColor;
    border-radius:14px;background:var(--surface);margin-bottom:10px;overflow:hidden;
  }
  .cgroup .catbar{
    display:flex;flex-wrap:wrap;align-items:center;gap:7px;
    margin:0;padding:10px 12px;
  }
  /* 1. satır: tutamak · aç-kapat · isim · adet */
  .catbar .drag{width:32px;height:32px;flex:0 0 auto}
  .catbar .ctog{width:30px;height:30px;flex:0 0 auto}
  .catbar .cbar{display:none}          /* renk zaten çerçevede */
  .catbar .cname{flex:1 1 auto;min-width:0;min-height:32px;padding:0}
  .catbar .cname b{font-size:13.5px;letter-spacing:.02em}
  .catbar .spacer{display:none}
  /* 2. satır: oklar ve butonlar, hepsi bir arada */
  .catbar .mvpair{order:10;flex:0 0 auto}
  .catbar .mv{width:38px;height:38px}
  .catbar > .btn,.catbar > form{order:11}
  .catbar > .btn-sm{min-height:38px}
  .cgroup .catbody{border-top:1px solid var(--line)}
  .cgroup .catbody > .card{border-radius:0;padding:4px 12px !important}
  .mtools .btn{flex:1 1 0}

  /* =====================================================================
     AYARLAR
     ===================================================================== */
  .inrow{flex-wrap:wrap;gap:8px}
  .inrow input{width:88px;height:44px;font-size:16px}
  .inrow .def{margin-left:0;flex:1 1 100%;order:10}
  .swrow input{width:20px;height:20px}
  .pushgrid{grid-template-columns:1fr 1fr;gap:8px}

  /* Panel: yükleme eksik kartı */
  .hcard{padding:13px 14px}
  .hcard td:first-child{width:64px;font-size:10px}
  .hcard table{font-size:12px}
}

/* ---------- Çok dar telefonlar ---------- */
@media (max-width:380px){
  .btn{padding:0 11px;font-size:13.5px}
  .btn-sm{padding:0 9px;font-size:12.5px}
  .catbar .cname b{font-size:12.5px}
  .rowline .rowmain b,.urow .uname b{font-size:14.5px}
}

/* =====================================================================
   SERVA — marka, lisans ve modül öğeleri
   ===================================================================== */


.login-mark{width:68px;height:68px;margin:0 auto 6px;border-radius:20px;background:var(--brand);color:var(--brand-text);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;letter-spacing:.03em;overflow:hidden}



.sl-tables   .si{background:#DCEFE8;color:#1B6B55}
.sl-allergen .si{background:#FBEFD8;color:#8A5A12}
.sl-reset    .si{background:#FBE9E5;color:#8E2D1C}
.sl-floor    .si{background:#E3EEFB;color:#1D4E89}
.sl-qr       .si{background:#EAF4E4;color:#3B6B1F}
.sl-design   .si{background:#FCE7F3;color:#9D174D}
.sl-export   .si{background:#E6F4F1;color:#0F766E}
.sl-key      .si{background:var(--gold-soft);color:var(--brand)}
.sl-bell     .si{background:#FEF3C7;color:#92400E}

.slink{position:relative}
.slink.is-locked{background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 12px,var(--surface-2) 12px,var(--surface-2) 13px)}
.slink.is-locked .si{filter:grayscale(.85);opacity:.6}
.slink.is-locked .st b{color:var(--ink-soft)}
.lockpill{flex:0 0 auto;margin-left:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:4px;padding:3px 9px 3px 7px;
  border-radius:999px;background:var(--brand);color:var(--brand-text);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.lockpill svg{width:12px;height:12px}
.lockpill.lp-vendor{background:var(--gold-soft);color:var(--brand);padding:4px}
/* Kilitli kart: etiket köşede durur, başlığı sıkıştırmaz; altında tek seferlik fiyat */
.slink.is-locked{align-items:flex-start;padding-top:38px}
.slink.is-locked .lockpill{position:absolute;top:11px;right:11px;margin:0}
.slink .st .lprice{display:inline-flex;align-items:baseline;gap:5px;margin-top:6px;font-size:14px;font-weight:800;color:var(--ink)}
.slink .st .lprice small{font-size:11px;font-weight:700;color:var(--muted)}

.vendorbar{display:flex;align-items:center;gap:13px;margin:0 0 16px;padding:13px 15px;border-radius:16px;text-decoration:none;
  background:linear-gradient(120deg,var(--brand),var(--brand-ink));color:var(--brand-text);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.vb-ic{width:40px;height:40px;flex:0 0 auto;border-radius:12px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.vb-ic svg{width:22px;height:22px}
.vb-t{display:flex;flex-direction:column;min-width:0;flex:1}
.vb-t b{font-size:15px}
.vb-t span{font-size:12.5px;opacity:.8;line-height:1.35}
.vb-st{flex:0 0 auto;font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.16);white-space:nowrap}
.vb-ok{background:#2C7A4E;color:#fff}.vb-warn{background:#D98324;color:#fff}
.vb-grace,.vb-expired,.vb-invalid,.vb-domain,.vb-revoked,.vb-missing{background:#C4452F;color:#fff}
.okline{margin:-6px 0 14px;padding:10px 13px;border-radius:12px;background:#E9F3EC;color:#1F5C39;font-size:13px;font-weight:600}

.upteaser{display:flex;gap:13px;align-items:center;margin-top:18px;padding:15px 16px;border-radius:16px;
  background:var(--gold-soft);border:1px dashed var(--gold);color:var(--brand)}
.upteaser b{display:block;font-size:15px}
.upteaser span{font-size:13px;opacity:.85;line-height:1.4}
.ut-ic{width:40px;height:40px;flex:0 0 auto;border-radius:12px;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center}
.ut-ic svg{width:22px;height:22px}
.hubfoot{margin:30px 0 0;text-align:center;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:.7}

/* Lisans uyarı şeridi (her ekranın en üstünde) */
.licbar{display:block;position:sticky;top:0;z-index:80;padding:9px 14px;text-align:center;font-size:13px;font-weight:700;
  text-decoration:none;color:#fff;background:#D98324}
.licbar-bad{background:#C4452F}
.licbar-demo{background:var(--brand);color:var(--brand-text);letter-spacing:.06em}

/* Kilit ekranı */
.lockcard{text-align:center}
.lockp{font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin:0 0 16px}
.lockv{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;background:var(--surface-2);font-size:14px}
.lockv a{color:var(--gold);font-weight:700;text-decoration:none}

/* Modül satın alınmamış — tanıtım sayfası */
.upsell{max-width:560px;margin:0 auto;padding:40px 18px 60px;text-align:center}
.up-ic{position:relative;width:88px;height:88px;margin:0 auto 18px;border-radius:26px;background:var(--gold-soft);
  color:var(--brand);display:flex;align-items:center;justify-content:center}
.up-ic > svg{width:44px;height:44px}
.up-lock{position:absolute;right:-8px;bottom:-8px;width:36px;height:36px;border-radius:50%;background:var(--brand);color:var(--brand-text);
  display:flex;align-items:center;justify-content:center;border:3px solid var(--bg)}
.up-lock svg{width:17px;height:17px}
.up-kicker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--gold)}
.upsell h2{margin:6px 0 10px;font-size:26px;line-height:1.2}
.upsell > p{margin:0 0 24px;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.up-box{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-align:left}
.up-box > b{font-size:15px}
.up-box > span{font-size:13.5px;color:var(--muted);line-height:1.5}
.up-contact{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.up-contact > b{width:100%;font-size:14px}
.upsell{max-width:640px}
.up-why{display:flex;flex-direction:column;gap:5px;text-align:left;padding:16px 18px;margin:0 0 14px;border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 14%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line))}
.up-why b{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.up-why span{font-size:15.5px;line-height:1.55;color:var(--ink);font-weight:600}
.up-plus{text-align:left;padding:16px 18px;margin:0 0 14px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.up-plus > b{display:block;font-size:15px;margin-bottom:10px}
.up-plus ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.up-plus li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--ink)}
.up-ck{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#2C9A5A;color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-top:1px;box-shadow:0 2px 6px rgba(44,154,90,.35)}
.up-price{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;text-align:left;padding:16px 18px;margin:0 0 14px;border-radius:18px;
  background:var(--brand);color:var(--brand-text)}
.up-price div{display:flex;flex-direction:column}
.up-price span{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.up-price b{font-size:30px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.up-price em{font-style:normal;font-size:13px;line-height:1.45;opacity:.9;flex:1 1 220px}

/* Menü editörü — fotoğraf yükleme */
.imgprev{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.imgprev img{width:84px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.imgprev label{font-size:13px;display:flex;gap:6px;align-items:center}
.filein{width:100%;padding:10px;border:1px dashed var(--line);border-radius:12px;background:var(--field);font:inherit;font-size:13px}
.sl-counter .si{background:#EDE7F6;color:#5B3FA8}

/* Panel üst çubuğu: DE / TR dil düğmesi */
.langsw{display:inline-flex;border-radius:999px;background:rgba(255,255,255,.12);padding:3px;flex:0 0 auto}
.langsw a{padding:6px 10px;border-radius:999px;font-size:12.5px;font-weight:800;text-decoration:none;color:inherit;opacity:.75}
.langsw a.on{background:var(--brand-text);color:var(--brand);opacity:1}

/* Sistem sahibinin imzası (panel ve misafir menüsü altı) */
.vcredit{margin:28px 0 0;text-align:center;font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.vcredit a{color:inherit;text-decoration:none}
.vcredit b{font-weight:700;color:var(--ink-soft)}

/* LOGO KUTUSU — logonun şekline uyar.
   Yükseklik sabit, genişlik logonun oranına göre (en fazla sınır kadar).
   Arka plan Tasarım → "Logo arka planı" ayarından gelir (satır içi stil). */
.brandmark.has-logo{width:auto;min-width:40px;max-width:160px;height:40px;padding:4px 8px;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.brandmark.has-logo img{height:100%;width:auto;max-width:144px;object-fit:contain;display:block}
.brandmark.has-logo.logo-clear{padding:0;box-shadow:none}
.brandmark.has-logo.logo-clear img{max-width:160px}
.login-mark.has-logo{width:auto;min-width:74px;max-width:260px;height:84px;padding:8px 14px;border-radius:20px}
.login-mark.has-logo img{height:100%;width:auto;max-width:232px;object-fit:contain;display:block}
.login-mark.has-logo.logo-clear{padding:0}
@media (max-width:420px){
  .brandmark.has-logo{max-width:120px}
  .brandmark.has-logo img{max-width:104px}
}

/* logofix.js zıt arka plan verdiyse */
.brandmark.has-logo.logo-fixed{padding:4px 8px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.login-mark.has-logo.logo-fixed{padding:8px 14px}

.vcredit a{display:inline-flex;align-items:center;gap:8px}
.vcredit-logo{height:20px;width:auto;display:inline-block;vertical-align:middle}
/* Sevgiyle yapıldı */
.madewith{display:block;margin:8px auto 0;max-width:640px;padding:0 12px;text-align:center;
  font-size:11.5px;font-weight:400;line-height:1.6;color:var(--muted);letter-spacing:.01em;text-wrap:balance}
.vcredit + .madewith{margin-top:6px}
.madewith:first-child{margin-top:26px}
.mw-k{white-space:nowrap}
/* QR menüde üç dil birden basılır, sayfanın diline göre biri görünür */
.mw-multi .mw-l{display:none}
html[lang="de"] .mw-multi .mw-l[data-l="de"],html[lang="tr"] .mw-multi .mw-l[data-l="tr"],html[lang="en"] .mw-multi .mw-l[data-l="en"]{display:inline}
.mw-heart{color:#E0435A;display:inline-block;vertical-align:-1px;margin:0 1px;line-height:0;animation:mwbeat 2.4s ease-in-out infinite;transform-origin:center}
@keyframes mwbeat{0%,62%,100%{transform:scale(1)}70%{transform:scale(1.22)}78%{transform:scale(1)}86%{transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){.mw-heart{animation:none}}
@media print{.madewith{display:none}}

/* ---------- Kullanıcı rozeti: telefonda sadece fotoğraf / baş harf ----------
   Dokununca adı ve rolü açılır. Uzun adlar üst çubuğu sıkıştırmasın. */
.uav.has-photo{padding:0;overflow:hidden;background:var(--surface-2)}
.uav img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.brandtxt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
@media (max-width:720px){
  .ufirst{display:none!important}
  .ubar{padding:0;gap:0;background:transparent!important;max-width:none}
  .ubar .uav{width:38px;height:38px;font-size:15px;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
  .ubar .utxt{position:absolute;top:100%;right:0;z-index:60;margin-top:8px;display:none;padding:9px 13px;border-radius:12px;text-align:right;
    background:var(--brand-ink);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.28);min-width:140px;max-width:70vw}
  .ubar .utxt b{overflow:visible;white-space:normal;font-size:14px}
  .ubar .utxt span{color:rgba(255,255,255,.75)}
  .ubar:focus-within .utxt{display:flex}
  .topbar-admin .langsw{display:none}
  .topbar-admin .brandmark.has-logo{max-width:44vw}
  .brandtxt b{max-width:36vw}
}
/* Rozetten profile: masaüstünde ada tıklanır, telefonda açılan kutuda bağlantı */
.utxt .uname{color:inherit;text-decoration:none}
.utxt .uname:hover b{text-decoration:underline}
.utxt .uplink{display:none}
/* Vardiya planı: masaüstünde de ad altında küçük bağlantı; okunmamış varsa avatarda kırmızı nokta */
.utxt .uplan{display:block;font-size:11px;font-weight:700;color:inherit;text-decoration:none;opacity:.85;white-space:nowrap}
.uplan-n{display:inline-block;min-width:17px;padding:0 5px;border-radius:999px;background:#E0435A;color:#fff !important;font-size:10.5px;text-align:center;line-height:17px}
.ubar:has(.uplan-n) .uav{position:relative;overflow:visible}
.ubar:has(.uplan-n) .uav::after{content:"";position:absolute;top:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:#E0435A;box-shadow:0 0 0 2px #fff}
@media (max-width:720px){
  .ubar .utxt:hover{display:flex}
  .ubar .utxt .uplink{display:block;margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.18);color:#fff;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
}
/* Panelin altında: yasal açıklama */
.legalnote{margin:26px 0 6px;padding:12px 14px;border-radius:14px;border:1px dashed var(--line);background:var(--surface);color:var(--muted);font-size:12.5px;line-height:1.5}
.legalnote b{display:block;color:var(--ink);font-size:12.5px;margin-bottom:2px}
/* Panelin altında, telefonda: bayraklı dil seçimi */
.langbot{display:none}
@media (max-width:720px){
  /* 3 dil tek satırda kalır, alt satıra düşmez */
  .langbot{display:flex;flex-wrap:nowrap;justify-content:center;gap:8px;margin:22px 0 4px}
  .langbot a{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:800;font-size:13.5px;white-space:nowrap;min-width:0}
  .langbot a.on{border-color:var(--gold);background:var(--gold-soft)}
  .langbot img{width:26px;height:26px;border-radius:50%;display:block;flex:0 0 auto}
  .langbot .ls{display:none}
}
/* Dar telefon (≤ 380 px): tam ad yerine DE / TR / EN */
@media (max-width:380px){
  .langbot .lf{display:none}
  .langbot .ls{display:inline}
  .langbot a{padding-right:11px}
}
/* Sistem sahibi şeridi: gizle düğmesi */
.vendorwrap{position:relative}
.vb-x{position:absolute;right:8px;top:8px;z-index:2;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:inherit;font-size:16px;cursor:pointer;line-height:1}

/* ---------- Giriş ekranı telefonda tam sığsın, kaymasın ----------
   100vh telefonda adres çubuğunu da sayıyordu: kart ekrandan taşıyor,
   parmakla aşağı-yukarı oynuyordu. Artık görünen yükseklik (dvh)
   kullanılıyor, sayfa sabit; tuşlar ve logo ekran boyuna göre küçülüyor. */
html:has(.login-body){height:100%;overflow:hidden;overscroll-behavior:none}
.login-body{position:fixed;inset:0;min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain;
  padding:max(12px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom));touch-action:manipulation}
.login-card{margin:auto}
@media (max-width:720px), (max-height:760px){
  .login-card{padding:clamp(14px,2.6dvh,26px) 18px;border-radius:20px}
  .login-mark{width:clamp(48px,8dvh,68px);height:clamp(48px,8dvh,68px);margin-bottom:4px}
  .login-mark.has-logo{height:clamp(48px,9dvh,84px);padding:6px 12px}
  .login-brand{font-size:clamp(17px,2.6dvh,22px)}
  .login-h1{margin:2px 0 clamp(8px,1.6dvh,18px);font-size:clamp(14px,2dvh,17px)}
  .pin-display{height:clamp(42px,6.6dvh,60px);margin-bottom:clamp(8px,1.4dvh,16px);font-size:clamp(20px,3.2dvh,26px)}
  .keypad{gap:clamp(6px,1.1dvh,10px);margin-bottom:clamp(8px,1.4dvh,16px)}
  .key{height:clamp(44px,7.4dvh,62px);font-size:clamp(19px,2.8dvh,22px)}
  .login-card .btn-lg{min-height:clamp(46px,6.6dvh,56px)}
  .login-lang{margin-top:clamp(6px,1.2dvh,16px)}
}

/* ---- Yönetim paneli: premium kartlar, renkli ve taşınabilir gruplar ---- */
.hub .slink{position:relative;border-radius:18px;border:1px solid var(--line);background:var(--surface);
  box-shadow:0 1px 2px rgba(20,20,30,.04),0 8px 22px -16px rgba(20,20,30,.22);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.hub .slink:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(20,20,30,.05),0 18px 34px -16px rgba(20,20,30,.3)}
.hub .slink .st b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;letter-spacing:-.01em}
.grpbox{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.grp{--gc:#5B6472;border-radius:24px;padding:4px 14px 14px;border:1px solid color-mix(in srgb,var(--gc) 16%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--gc) 7%,var(--surface)) 0,var(--surface) 150px);
  box-shadow:0 1px 2px rgba(20,20,30,.03),0 16px 38px -26px color-mix(in srgb,var(--gc) 60%,transparent)}
.grp-s{--gc:#1F8A57}.grp-m{--gc:#7045D6}.grp-f{--gc:#1C66C4}.grp-p{--gc:#C86A17}.grp-r{--gc:#0E8796}.grp-x{--gc:#5B6472}
.grp>summary.grph{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;margin:0;padding:12px 2px;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em;user-select:none}
.grp>summary::-webkit-details-marker{display:none}
.grp>summary .gic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff;
  background:linear-gradient(145deg,color-mix(in srgb,var(--gc) 70%,#fff),var(--gc));box-shadow:0 6px 14px -6px color-mix(in srgb,var(--gc) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.grp>summary .gic svg{width:17px;height:17px}
.grp>summary small{font-size:11.5px;font-weight:800;color:var(--gc);background:color-mix(in srgb,var(--gc) 12%,var(--surface));border-radius:99px;padding:2px 9px}
.grp>summary .gchev{margin-left:auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--gc) 9%,var(--surface));transition:transform .2s}
.grp>summary .gchev::before{content:"";width:8px;height:8px;border-right:2px solid var(--gc);border-bottom:2px solid var(--gc);transform:translateY(-2px) rotate(45deg)}
.grp:not([open])>summary .gchev{transform:rotate(-90deg)}
.grp:not([open]){padding-bottom:4px}
.grp .ggrip{display:none;color:var(--muted);font-size:15px;letter-spacing:-3px;cursor:grab;padding:4px 6px 4px 0}
.dash-edit .grp .ggrip{display:inline-block}
.dash-edit .grp{outline:2px dashed color-mix(in srgb,var(--gc) 35%,transparent);outline-offset:3px}
.grp .links{padding:0 0 2px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.grp .slink{align-items:center;gap:14px;padding:15px 16px 15px 15px;min-height:104px;border-color:color-mix(in srgb,var(--gc) 13%,var(--line));
  background:radial-gradient(130% 110% at 100% 0%,color-mix(in srgb,var(--gc) 8%,transparent),transparent 58%),var(--surface)}
.grp .slink:hover{border-color:color-mix(in srgb,var(--gc) 40%,var(--line));box-shadow:0 2px 4px rgba(20,20,30,.05),0 20px 36px -18px color-mix(in srgb,var(--gc) 65%,transparent)}
.grp .slink::after{content:"";position:absolute;right:14px;top:16px;width:7px;height:7px;border-top:2px solid var(--gc);border-right:2px solid var(--gc);transform:rotate(45deg) translate(-4px,4px);opacity:0;transition:opacity .2s,transform .2s}
.grp .slink:hover::after{opacity:.9;transform:rotate(45deg)}
.grp .slink .si{width:48px;height:48px;border-radius:15px;flex:0 0 auto;color:#fff!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--gc) 62%,#fff),var(--gc))!important;
  box-shadow:0 10px 20px -10px color-mix(in srgb,var(--gc) 85%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.grp .slink .si svg{width:23px;height:23px}
.grp .slink .st{flex:1;min-width:0;gap:4px;padding-right:10px}
.grp .slink .st b{font-size:14.5px;font-weight:750;color:var(--ink)}
.grp .slink .st span{font-size:12.5px;line-height:1.45;color:var(--muted)}
.grp .lockpill{position:absolute;top:10px;right:10px;margin:0}
@media (max-width:520px){.grp{padding:2px 10px 10px;border-radius:20px}.grp .links{grid-template-columns:1fr;gap:10px}.grp .slink{min-height:0;padding:13px 14px}.grp .slink .si{width:44px;height:44px;border-radius:13px}}
.lockgrp{margin-top:22px;border:1px dashed var(--line);border-radius:16px;padding:4px 14px;background:var(--surface)}
.lockgrp summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 0}
.lockgrp summary::-webkit-details-marker{display:none}
.lockgrp summary .ut-ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#FFF4E0;color:#8A5A12;flex:0 0 auto}
.lockgrp summary .ut-ic svg{width:19px;height:19px}
.lockgrp summary b{display:block;font-size:14.5px}.lockgrp summary small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.lockgrp[open] summary{border-bottom:1px solid var(--line);margin-bottom:12px}
.lockgrp .links{margin-bottom:12px}

/* Happy hour fiyatı (garson ekranı): eski fiyat üstü çizili, altında indirimli fiyat */
.hhp{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.hhp s{font-size:.8em;font-weight:600;color:var(--muted);text-decoration-color:#D8342B;text-decoration-thickness:2px}
.hhp b{color:#D8342B;font-weight:800;white-space:nowrap}