/* ============================================================
   QRSystema — ortak tasarım sistemi
   Kağıt/fiş estetiği: krem zemin, mürekkep metin, domates vurgu
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#F6F1E7;
  --paper-2:#EDE6D8;
  --paper-3:#E3DAC7;
  --white:#FFFDF9;
  --ink:#17161A;
  --ink-2:#34323B;
  --ink-3:#5C5966;
  --muted:#8A8694;
  --line:#D8D0BF;
  --line-2:#C7BEA9;
  --accent:#E4572E;
  --accent-2:#F07A55;
  --accent-ink:#B23F1B;
  --accent-soft:#FBE3D9;
  --sage:#4E7C63;
  --sage-soft:#DCE9E0;
  --mustard:#E0AE3A;
  --mustard-soft:#F7EBC8;
  --sky:#3B6E9C;
  --sky-soft:#DBE7F2;
  --plum:#7A4D8C;
  --plum-soft:#EADFF0;
  --danger:#C2362B;

  --font-display:'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body:'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --r-sm:6px;
  --r:12px;
  --r-lg:20px;
  --shadow-sm:0 1px 0 rgba(23,22,26,.06), 0 1px 2px rgba(23,22,26,.06);
  --shadow:0 2px 4px rgba(23,22,26,.05), 0 12px 28px -12px rgba(23,22,26,.22);
  --shadow-lg:0 30px 60px -24px rgba(23,22,26,.35);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
/* overscroll-behavior-y: telefonda sayfanin tepesindeyken parmagi asagi
   cekmek tarayicinin "yenile" hareketini tetikliyordu. Adisyon girerken ya da
   siparis onaylarken sayfanin kendiliginden yenilenmesi is kaybina yol aciyor;
   bu yuzden kapatildi. Normal kaydirma etkilenmez. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overscroll-behavior-y:contain}
body{overscroll-behavior-y:contain}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.1;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--accent);color:#fff}

/* Yardımcılar */
.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em}
.display i,.display em{font-style:italic;font-weight:400}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--accent)}
.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:12px}
.hide{display:none!important}
.flex{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.grow{flex:1}
.wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:10px}
.right{text-align:right}
.center{text-align:center}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Yatay çizgi & perforasyon */
.rule{height:1px;background:var(--line);border:0;margin:0}
.perf{height:0;border:0;border-top:2px dashed var(--line-2);margin:0}

/* ---------- Butonlar ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 16px;border-radius:999px;
  font-weight:600;font-size:14px;line-height:1;
  border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:transform .15s var(--ease),background .15s,color .15s,border-color .15s,box-shadow .15s;
  white-space:nowrap;
}
.btn:hover{background:var(--ink-2);border-color:var(--ink-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.accent:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--paper-2);border-color:var(--ink)}
.btn.soft{background:var(--paper-2);border-color:var(--paper-2);color:var(--ink)}
.btn.soft:hover{background:var(--paper-3);border-color:var(--paper-3)}
.btn.sage{background:var(--sage);border-color:var(--sage);color:#fff}
.btn.danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.btn.danger:hover{background:var(--danger);color:#fff}
.btn.sm{height:32px;padding:0 12px;font-size:13px}
.btn.lg{height:50px;padding:0 24px;font-size:15px}
.btn.icon{width:40px;padding:0}
.btn.icon.sm{width:32px}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn svg{width:16px;height:16px}

/* ---------- Form ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.field .hint{font-size:12px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}
.input,.select,.textarea{
  width:100%;height:42px;padding:0 14px;
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-sm);
  outline:0;transition:border-color .15s,box-shadow .15s;
}
.textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical;line-height:1.5}
.select{appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2334323B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;}
.input:focus,.select:focus,.textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(23,22,26,.08)}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.input.mono{font-family:var(--font-mono);font-size:14px}
.input-group{display:flex;align-items:center;gap:0}
.input-group .input{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.input-group .addon{
  height:42px;display:inline-flex;align-items:center;padding:0 12px;
  border:1.5px solid var(--line);border-left:0;border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--paper-2);color:var(--ink-3);font-size:13px;white-space:nowrap;
}
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.check input{width:18px;height:18px;accent-color:var(--accent);margin:0}
/* toggle */
.toggle{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle .knob{width:40px;height:22px;border-radius:999px;background:var(--line-2);position:relative;transition:background .2s;flex:none}
.toggle .knob::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.toggle input:checked + .knob{background:var(--sage)}
.toggle input:checked + .knob::after{transform:translateX(18px)}
/* Klavye odağı: giriş sıfır boyutlu ve görünmez, odak halkası yoktu (yalnız Tasarım stüdyosunda vardı). */
.toggle input:focus-visible + .knob{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:640px){.toggle{min-height:40px}}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.form-grid .full,.form-grid .span2{grid-column:1/-1}
/* Üç sütunlu küçük alan ızgarası (fiyat/kalori/gramaj). Satır içi style="grid-template-columns:…"
   telefonda yukarıdaki tek sütun kuralını eziyor ve fiyat kutusu 57 px'e sıkışıyordu. */
.form-grid.form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.form-grid.form-grid-3{grid-template-columns:1fr}}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ---------- Kartlar ---------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);
}
.card.pad{padding:20px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-head h3{font-size:15px;font-weight:600}
.card-body{padding:20px}
.card-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Fiş görünümlü kart */
.receipt{
  background:var(--white);border:1px solid var(--line);border-radius:4px;
  box-shadow:var(--shadow);position:relative;font-family:var(--font-mono);font-size:13px;
}
.receipt::before,.receipt::after{
  content:"";position:absolute;left:0;right:0;height:8px;
  background:radial-gradient(circle at 6px 0, transparent 5px, var(--white) 5.5px) 0 0/12px 8px repeat-x;
}
.receipt::before{top:-8px;transform:rotate(180deg)}
.receipt::after{bottom:-8px}
.receipt .r-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
.receipt .r-sep{border-top:1px dashed var(--line-2);margin:8px 0}

/* ---------- Rozetler ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  background:var(--paper-2);color:var(--ink-2);
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.badge.plain::before{display:none}
.badge.sage{background:var(--sage-soft);color:var(--sage)}
.badge.accent{background:var(--accent-soft);color:var(--accent-ink)}
.badge.mustard{background:var(--mustard-soft);color:#8A6412}
.badge.sky{background:var(--sky-soft);color:var(--sky)}
.badge.plum{background:var(--plum-soft);color:var(--plum)}
.badge.ink{background:var(--ink);color:var(--paper)}
.badge.danger{background:#F6D9D6;color:var(--danger)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--sage);display:inline-block;flex:none}
.dot.accent{background:var(--accent)}.dot.mustard{background:var(--mustard)}.dot.sky{background:var(--sky)}.dot.muted{background:var(--line-2)}
.dot.pulse{box-shadow:0 0 0 0 rgba(78,124,99,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(78,124,99,.55)}70%{box-shadow:0 0 0 8px rgba(78,124,99,0)}100%{box-shadow:0 0 0 0 rgba(78,124,99,0)}}

/* Damga */
.stamp{
  display:inline-block;padding:4px 10px;border:2px solid var(--accent);color:var(--accent);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border-radius:4px;transform:rotate(-6deg);opacity:.9;
}

/* ---------- Tablo ---------- */
.table{width:100%;font-size:14px}
.table th{
  text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--paper)}
.table .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}
.table th.num{text-align:right}
.table-wrap{overflow-x:auto}

/* ---------- Avatar ---------- */
.avatar{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:14px;
  background:var(--ink);color:var(--paper);
}
.avatar.sm{width:26px;height:26px;font-size:11px}
.avatar.lg{width:48px;height:48px;font-size:18px}
.avatar.sq{border-radius:var(--r-sm)}
.avatar.sage{background:var(--sage)}.avatar.accent{background:var(--accent)}.avatar.sky{background:var(--sky)}.avatar.plum{background:var(--plum)}.avatar.mustard{background:var(--mustard);color:var(--ink)}

/* ---------- Sekmeler ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tabs button{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;font-size:14px;font-weight:500;color:var(--ink-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
/* Düğme sekmelerde simge metnin üstüne düşüyordu (svg{display:block} sıfırlaması). */
.tabs button svg{width:16px;height:16px;flex:none}
.tabs button.active{color:var(--ink);border-bottom-color:var(--accent)}
/* BAĞLANTI SEKMELERİ (1 Ekim 2026, sahip bildirdi: "şubelerim ve yetkililer butonları iç içe geçiyor,
   dış çizgileri yok"). İşletmelerim/Yetkililer, Yazarkasa & cihazlar, Sosyal/Bilgi sayfaları ve
   Entegrasyon üst başlığının altında <nav class="tabs"><a>…</a></nav> kullanıyor; oysa yalnız
   `.tabs button` için kural vardı, bağlantılar çıplak yazı olarak sıkışıyordu. Sayfalar arası geçiş
   olduğu için altı çizgili sekme yerine çerçeveli hap düğme: seçili olan dolu, diğerleri çizgili. */
nav.tabs{border-bottom:0;flex-wrap:wrap;gap:8px}
nav.tabs>a{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;
  border:1.5px solid var(--line-2);border-radius:999px;background:var(--white);
  font-size:14px;font-weight:500;color:var(--ink-3);white-space:nowrap;
  transition:border-color .15s,background-color .15s,color .15s}
nav.tabs>a .ico,nav.tabs>a svg{width:16px;height:16px;flex:none}
nav.tabs>a:hover{border-color:var(--ink-3);color:var(--ink)}
nav.tabs>a.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
nav.tabs>a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg{display:inline-flex;background:var(--paper-2);border-radius:999px;padding:3px;gap:2px}
.seg button{padding:6px 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--ink-3)}
.seg button.active{background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm)}

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(23,22,26,.45);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:100;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.modal-backdrop.open{opacity:1;pointer-events:auto}
.modal{
  width:100%;max-width:560px;max-height:calc(100vh - 40px);overflow:auto;
  background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  transform:translateY(12px) scale(.98);transition:transform .25s var(--ease);
}
.modal-backdrop.open .modal{transform:none}
.modal.wide{max-width:820px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0}
.modal-head h3{font-family:var(--font-display);font-size:22px;font-weight:600}
.modal-body{padding:20px 24px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:0 24px 24px}

/* ---------- Toast ---------- */
.toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:200;pointer-events:none}
.toast{
  background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;font-size:13px;font-weight:500;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;
  animation:toastIn .25s var(--ease);
}
.toast.ok::before{content:"";width:8px;height:8px;border-radius:50%;background:#7BC79A}
.toast.warn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mustard)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Boş durum ---------- */
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.empty .display{font-size:20px;color:var(--ink-2);margin-bottom:6px}

/* ---------- Dropdown ---------- */
.menu-pop{
  position:absolute;right:0;top:calc(100% + 6px);min-width:180px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:6px;z-index:50;
}
.menu-pop button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:4px;font-size:13px}
.menu-pop button:hover{background:var(--paper-2)}
.menu-pop button.danger{color:var(--danger)}

/* ---------- İlerleme ---------- */
.bar{height:6px;background:var(--paper-2);border-radius:999px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--ink);border-radius:999px}
.bar.accent > i{background:var(--accent)}
.bar.sage > i{background:var(--sage)}

/* ---------- Kaydırma çubuğu ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px;border:3px solid var(--paper)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Azaltılmış hareket ----------
   Burada eskiden bütün animasyonları ve geçişleri !important ile kesen
   tek bir kural vardı. Windows'ta "animasyon efektleri" kapalı olan
   kullanıcıda sitede hiçbir hareket görünmüyordu: kayan şerit, canlı
   konsol sunumu, düşen yemek dokusu, yükleniyor çarkları, hepsi ölüydü.

   İşletme sahibinin kararıyla bu kural kaldırıldı. Sitedeki hareketin
   tamamı yavaş, küçük genlikli ve soluk; ekranı kaplayan ya da hızlı
   kayan bir şey yok. Yükleniyor çarkı gibi işlev taşıyan göstergelerin
   durması ayrıca zarar veriyordu.

   Geri almak gerekirse tek yapılacak şey bu bloğu eski haline çevirmek:
     @media (prefers-reduced-motion:reduce){
       *,*::before,*::after{animation-duration:.01ms!important;
         animation-iteration-count:1!important;transition-duration:.01ms!important}
     }
   -------------------------------------------------------------------- */

/* ---- Telefon: satira sigmayan serit bilesenleri ---- */
@media (max-width:640px){
  /* Sekmeler ve donem secici kirilmaz; sayfayi itmek yerine kendi icinde kaysin */
  .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none;white-space:nowrap}
  /* bağlantı sekmeleri telefonda alt alta kırılmaz, yan yana sığar ya da kayar */
  nav.tabs{flex-wrap:nowrap;padding-bottom:2px}
  nav.tabs>a{flex:none}
  .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button,.seg a{flex:none;white-space:nowrap}
  .seg a{min-height:40px;align-items:center}
  /* Panelde .btn.sm dokunma hedefi 32 px'ti; telefonda 40 px (kabuk dışı sayfalara dokunmaz). */
  .shell .btn.sm{height:40px}
  .shell .btn.icon.sm{width:40px}
  /* Kart altligindaki aciklama ve dugmeler dar ekranda alt alta gecsin */
  .card-foot{flex-wrap:wrap}
  .card-foot > .flex{flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
}

/* ---- Canli baglanti seridi (js/qrs/canli.js) ----
   Kopukken gorunur, baglaninca kaybolur. Siparisler ekranindaki .sp-conn ile ayni gorunum.
   app.css yuklenmeyen tam ekran sayfalar (mutfak, POS) icin [hidden] burada da kapatiliyor.
   .yuzen: yapiskan ust cubuklu mutfak ekranlarinda altta yuzer, yerlesimi itmez. */
.canli-serit{display:flex;align-items:center;gap:8px;background:var(--danger);color:#fff;border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:14px;font-weight:600;line-height:1.35;min-width:0;overflow-wrap:anywhere}
.canli-serit[hidden]{display:none!important}
.canli-serit .d{flex:none;width:8px;height:8px;border-radius:50%;background:#fff;animation:canliNabiz 1s ease-in-out infinite}
.canli-serit.bant{border-radius:0;margin:0;flex:none}
.canli-serit.yuzen{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));margin:0;z-index:95;box-shadow:0 8px 24px rgba(0,0,0,.35)}
@keyframes canliNabiz{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.canli-serit .d{animation:none}}