:root{
  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sh-sm:0 2px 8px rgba(var(--shadow-rgb),.28);
  --sh-md:0 8px 24px rgba(var(--shadow-rgb),.40);
  --sh-glow:0 0 0 1px var(--accent-soft), 0 6px 20px rgba(var(--shadow-rgb),.30);
  --font-ui:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-num:'JetBrains Mono','SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
  --safe-t:env(safe-area-inset-top); --safe-b:env(safe-area-inset-bottom);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg-0:#0b1120; --bg-1:#0f172a; --bg-2:#162132; --bg-3:#1e293b;
  --surface:#1e293b; --raised:#243349;
  --border:#334155; --border-2:#3f516b;
  --text-0:#e2e8f0; --text-1:#cbd5e1; --text-2:#94a3b8; --text-3:#64748b;
  --accent:#f59e0b; --accent-hi:#fbbf24; --accent-soft:rgba(245,158,11,.16); --on-accent:#1a1206;
  --ok:#22c55e; --danger:#ef4444; --blue:#60a5fa; --info:#38bdf8;
  --shadow-rgb:2,6,23;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg-0:#f1f5f9; --bg-1:#f8fafc; --bg-2:#eef2f7; --bg-3:#e2e8f0;
  --surface:#ffffff; --raised:#ffffff;
  --border:#dbe3ec; --border-2:#c2cdda;
  --text-0:#0f172a; --text-1:#334155; --text-2:#64748b; --text-3:#94a3b8;
  --accent:#d97706; --accent-hi:#b45309; --accent-soft:rgba(217,119,6,.12); --on-accent:#ffffff;
  --ok:#15a34a; --danger:#dc2626; --blue:#2563eb; --info:#0284c7;
  --shadow-rgb:15,23,42;
}
:root{
  --bg:var(--bg-1); --bg2:var(--bg-2); --card:var(--surface); --line:var(--border);
  --txt:var(--text-0); --muted:var(--text-2); --accent2:var(--accent-hi);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:var(--font-ui);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.app-shell{min-height:100vh; padding:calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b))}
.muted{color:var(--muted)}
.center{text-align:center}

/* flash */
.flash-wrap{position:fixed; top:calc(10px + var(--safe-t)); left:0; right:0; z-index:50; display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 12px}
.flash{background:#7c2d12; border:1px solid var(--accent); color:#fde68a; padding:10px 16px; border-radius:12px; max-width:420px; width:100%; text-align:center; font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* auth */
.auth-page{max-width:420px; margin:0 auto; display:flex; flex-direction:column; gap:18px; padding-top:6vh}
.brand{text-align:center; margin-bottom:4px}
.brand-logo{font-size:40px; font-weight:800; letter-spacing:3px; color:var(--accent2)}
.brand-sub{color:var(--muted); font-size:13px; letter-spacing:2px; text-transform:uppercase; margin-top:2px}
.device-chip{align-self:center; background:var(--bg2); border:1px solid var(--line); color:var(--muted); padding:6px 14px; border-radius:999px; font-size:13px}

.inp{width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--txt); padding:15px 16px; border-radius:14px; font-size:16px; outline:none}
.inp:focus{border-color:var(--accent)}
.btn-primary{width:100%; background:var(--accent); color:#1a1206; border:none; padding:16px; border-radius:14px; font-size:17px; font-weight:700; cursor:pointer}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{display:inline-block; background:var(--bg2); border:1px solid var(--line); color:var(--txt); padding:14px 18px; border-radius:14px; text-decoration:none; font-weight:600}
.user-area{display:flex; flex-direction:column; gap:12px}
.auth-links{text-align:center; color:var(--muted); font-size:14px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.auth-links a{color:var(--blue); text-decoration:none}

/* PIN pad */
.pin-area{display:flex; flex-direction:column; align-items:center; gap:22px}
.pin-dots{display:flex; gap:18px}
.pin-dots span{width:16px; height:16px; border-radius:50%; border:2px solid var(--line); background:transparent; transition:.12s}
.pin-dots span.on{background:var(--accent); border-color:var(--accent)}
.pin-pad{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:100%; max-width:320px}
.pin-key{height:72px; font-size:26px; font-weight:600; background:var(--bg2); color:var(--txt); border:1px solid var(--line); border-radius:18px; cursor:pointer}
.pin-key:active{background:var(--bg-2); transform:translateY(1px)}
.pin-clear{color:var(--danger)}
.pin-ok{background:var(--accent); color:#1a1206; border-color:var(--accent)}
.pin-input{text-align:center; letter-spacing:14px; font-size:28px}

/* device select */
.device-grid{display:grid; grid-template-columns:1fr; gap:12px; margin:8px 0 16px}
.device-card{display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px; background:var(--bg2); border:2px solid var(--line); border-radius:16px; color:var(--txt); cursor:pointer; font-size:16px; font-weight:600}
.device-card small{color:var(--muted); font-weight:400}
.device-card.sel{border-color:var(--accent); background:#27201040}
.dc-ico{font-size:28px}
.sube-box{margin-bottom:16px; display:flex; flex-direction:column; gap:8px}

/* panel */
.panel-page{max-width:680px; margin:0 auto}
.topbar{display:flex; justify-content:space-between; align-items:center; padding:8px 0 14px; border-bottom:1px solid var(--line); margin-bottom:18px}
.tb-name{font-weight:700; font-size:17px}
.tb-sub{color:var(--muted); font-size:13px; text-transform:capitalize}
.tb-out{color:var(--blue); text-decoration:none; font-size:14px; background:var(--bg2); border:1px solid var(--line); padding:8px 14px; border-radius:10px}
.hero h1{font-size:22px; margin:6px 0}
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:18px 0}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px}
.card-ico{font-size:26px}
.card-t{font-weight:700; margin-top:6px}
.card-d{color:var(--muted); font-size:13px; margin-top:4px}
.card.done{border-color:var(--ok)}
.card.next{border-color:var(--accent)}
.card.soon{opacity:.75}
.actions{margin-top:8px; display:flex; gap:10px; flex-wrap:wrap}

@media (max-width:380px){ .cards{grid-template-columns:1fr} }

/* ── Menü Yönetimi ───────────────────────────────────────── */
.small{font-size:13px}
.card-link{text-decoration:none; color:var(--txt); display:block}
.co-switch{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.co-switch label{color:var(--muted); font-size:14px; white-space:nowrap}
.co-switch .inp{padding:10px 12px}

.menu-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:16px; align-items:start}
@media (max-width:720px){ .menu-grid{grid-template-columns:1fr} }
.m-col{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px}
.m-col-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.m-col-head h3{margin:0; font-size:16px}
.btn-mini{background:var(--accent); color:#1a1206; border:none; padding:8px 14px; border-radius:10px; font-weight:700; cursor:pointer; font-size:14px}

.m-row{display:flex; align-items:center; gap:10px; padding:10px 8px; border-bottom:1px solid var(--line)}
.m-row:last-child{border-bottom:none}
.m-row-main{flex:1; min-width:0}
.m-row-t{font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.m-row-d{color:var(--muted); font-size:12px; margin-top:2px}
.kat-dot{width:12px; height:12px; border-radius:50%; flex:none; display:inline-block}
.badge{font-size:11px; padding:1px 7px; border-radius:999px; vertical-align:middle}
.badge.pasif{background:#3f1d1d; color:#fca5a5; border:1px solid #7f1d1d}
.badge.sube{background:#3f2d10; color:#fcd34d; border:1px solid #7c5310}
.badge.tukendi{background:#3f1d1d; color:#fca5a5; border:1px solid #7f1d1d}
.ic-btn{background:transparent; border:1px solid var(--line); border-radius:9px; padding:6px 9px; cursor:pointer; font-size:15px}
.ic-btn.danger{border-color:#7f1d1d}
.ic-btn:active{transform:translateY(1px)}
.grup-baslik{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin:14px 0 4px; font-weight:700}

/* modal */
.modal-bg{position:fixed; inset:0; background:rgba(2,6,23,.7); display:none; align-items:flex-start; justify-content:center; z-index:80; padding:24px 12px; overflow-y:auto}
.modal-bg.show{display:flex}
.modal{background:var(--bg2); border:1px solid var(--line); border-radius:18px; width:100%; max-width:440px; padding:18px; margin-top:6vh}
.modal-head{display:flex; justify-content:space-between; align-items:center; font-size:17px; font-weight:700; margin-bottom:14px}
.modal-head .x{background:transparent; border:none; color:var(--muted); font-size:26px; line-height:1; cursor:pointer}
.modal form{display:flex; flex-direction:column; gap:10px}
.modal label{font-size:13px; color:var(--muted); margin-bottom:-4px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.row2 > div{display:flex; flex-direction:column; gap:6px}
.inp.color{height:48px; padding:6px; cursor:pointer}
.chk{display:flex; align-items:center; gap:8px; color:var(--txt); font-size:15px}
.chk input{width:20px; height:20px}

/* ── Ürün Seçenekleri ───────────────────────────────────── */
.sec-head{margin:12px 0}
.grup-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; margin-bottom:14px}
.grup-card-head{display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:6px}
.grup-ad-wrap{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.grup-ad{font-weight:700; font-size:16px}
.grup-acts{display:flex; gap:6px; flex:none}
.badge.tip{background:#1e3a5f; color:#bfdbfe; border:1px solid #2b5079}
.badge.zorunlu{background:#3f2d10; color:#fcd34d; border:1px solid #7c5310}
.btn-mini.ghost{background:transparent; color:var(--accent2); border:1px dashed var(--line); margin-top:8px}

/* ── Masa Düzeni (Faz 1a) ───────────────────────────────── */
.head-btns{display:flex; gap:6px}
.btn-mini.ghost2{background:transparent; color:var(--accent2); border:1px solid var(--line)}
.masa-wrap{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 12px}
.masa-chip{display:flex; align-items:center; gap:8px; background:var(--bg2); border:1px solid var(--line); padding:8px 10px; border-radius:12px}
.masa-chip .mc-ad{font-weight:600; font-size:14px}
.masa-chip .mc-acts{display:flex; gap:4px}
.ic-btn.sm{padding:3px 7px; font-size:12px}
.masa-chip.sekil-yuvarlak{border-radius:999px; padding-left:14px; padding-right:14px}
.masa-chip.sekil-dikdortgen{min-width:118px; justify-content:space-between}

/* ── Adisyon: masa listesi (Faz 1b) ─────────────────────── */
.durum-legend{display:flex; gap:16px; margin:6px 0 14px; font-size:13px; color:var(--muted)}
.durum-legend i.lg{display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:5px; vertical-align:middle}
.lg.bos{background:var(--bg2); border:1px solid var(--line)}
.lg.acik{background:var(--accent)}
.lg.hesap{background:var(--danger)}
.salon-baslik{font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; font-weight:700; margin:14px 0 8px}
.masa-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:10px; margin-bottom:8px}
.masa-kart{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:74px; background:var(--bg2); border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--txt); padding:8px; text-align:center}
.masa-kart .mk-ad{font-weight:700; font-size:16px; word-break:break-word}
.masa-kart .mk-tut{font-size:12px; color:var(--muted)}
.masa-kart.acik{border-color:var(--accent); background:#27201040}
.masa-kart.acik .mk-tut{color:var(--accent2)}
.masa-kart.hesap{border-color:var(--danger); background:#3f1d1d55}
.masa-kart.hesap .mk-tut{color:#fca5a5}
.masa-kart.sekil-yuvarlak{border-radius:50%}
.masa-kart:active{transform:translateY(1px)}
.bos-uyari{display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:36px}

/* ── Adisyon: sipariş ekranı ─────────────────────────────── */
.adisyon-ekran{max-width:1100px; margin:0 auto}
.adisyon-wrap{display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start}
.urun-pane{min-width:0}
.arama{margin-bottom:10px}
.kat-tabs{display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; margin-bottom:10px; -webkit-overflow-scrolling:touch}
.kat-tab{flex:none; background:var(--bg2); border:1px solid var(--line); color:var(--txt); padding:9px 14px; border-radius:999px; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap}
.kat-tab.aktif{background:var(--accent); color:#1a1206; border-color:var(--accent)}
.urun-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:10px}
.urun-btn{display:flex; flex-direction:column; gap:6px; min-height:74px; justify-content:space-between; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; cursor:pointer; color:var(--txt)}
.urun-btn:active{transform:translateY(1px); border-color:var(--accent)}
.u-ad{font-weight:600; font-size:14px; line-height:1.25}
.u-fiy{font-size:13px; color:var(--accent2); font-weight:700; display:flex; justify-content:space-between; align-items:center}
.u-opt{color:var(--muted); font-size:12px; margin-left:6px}
.urun-btn.tukendi{border-color:#7f1d1d}
.u-tukendi{font-size:10px; padding:1px 6px; border-radius:999px; background:#3f1d1d; color:#fca5a5; border:1px solid #7f1d1d; margin-left:6px; vertical-align:middle; white-space:nowrap}

.siparis-pane{background:var(--card); border:1px solid var(--line); border-radius:16px; display:flex; flex-direction:column; position:sticky; top:12px; max-height:calc(100vh - 24px)}
.sp-head{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); font-weight:700}
.sp-kapat{display:none; background:transparent; border:none; color:var(--muted); font-size:24px; cursor:pointer}
.satir-list{flex:1; overflow-y:auto; min-height:80px}
.sat-row{display:flex; align-items:flex-start; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line)}
.sat-row:last-child{border-bottom:none}
.sat-main{flex:1; min-width:0}
.sat-ad{font-weight:600; font-size:14px}
.sat-badge{font-size:10px; padding:1px 6px; border-radius:999px; background:#3f2d10; color:#fcd34d; border:1px solid #7c5310; margin-left:4px; vertical-align:middle; white-space:nowrap}
.sat-badge.sent{background:#0f2e1a; color:#86efac; border-color:#166534}
.sat-ozet{font-size:12px; color:var(--muted); margin-top:2px}
.sat-alt{font-size:12px; color:var(--muted); margin-top:2px}
.sat-tut{font-weight:700; font-size:14px; white-space:nowrap}
.sat-tut.ikram{color:var(--muted)}
.sat-tut.ikram s{opacity:.7}
.sat-badge.ikram{background:#3f2d10; color:#fcd34d; border-color:#7c5310}
.sat-row.ikram{background:rgba(124,83,16,.08)}
.sat-acts{display:flex; gap:6px; margin-top:6px; flex-wrap:wrap}
.sat-act{background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:8px; padding:4px 8px; font-size:11px; line-height:1.2; cursor:pointer}
.sat-act.ikram{color:#fcd34d; border-color:#7c5310}
.sat-act.iade{color:#fca5a5; border-color:#7f1d1d}
.sat-x{background:transparent; border:1px solid var(--line); color:var(--danger); border-radius:8px; width:28px; height:28px; font-size:16px; line-height:1; cursor:pointer; flex:none}
.sat-row.sent{opacity:.92}
.neden-bos{background:var(--card); border:1px dashed var(--line); border-radius:12px; padding:16px; margin-top:8px}
.neden-bos p{margin:0 0 6px}
.sp-foot{border-top:1px solid var(--line); padding:14px 16px; display:flex; flex-direction:column; gap:10px}
.sp-toplam{display:flex; justify-content:space-between; align-items:center; font-size:15px}
.sp-toplam b{font-size:20px; color:var(--accent2)}
.sp-btns{display:flex; gap:8px}
.sp-btns .btn-primary{flex:1}
.btn-ghost.sm{padding:11px 14px; font-size:14px}
#hesapBtn.aktif{border-color:var(--danger); color:#fca5a5}

.mobil-bar{display:none}

/* seçenek popup içi */
.sec-body{max-height:50vh; overflow-y:auto; padding:4px 2px}
.sec-grup{padding:10px 0; border-bottom:1px solid var(--line)}
.sec-grup:last-child{border-bottom:none}
.sec-grup.eksik{outline:1px solid var(--danger); border-radius:10px; padding:8px; background:#3f1d1d22}
.sec-grup-ad{font-weight:700; font-size:14px; margin-bottom:6px}
.sec-zor{color:var(--danger)}
.sec-opt{display:flex; align-items:center; gap:10px; padding:9px 4px; font-size:15px; cursor:pointer}
.sec-opt input{width:20px; height:20px; flex:none}
.sec-fiy{color:var(--accent2); font-size:13px}
.sec-foot{display:flex; gap:10px; align-items:center; margin-top:12px}
.adet-step{display:flex; align-items:center; border:1px solid var(--line); border-radius:12px; overflow:hidden; flex:none}
.adet-step button{width:42px; height:46px; background:var(--bg2); border:none; color:var(--txt); font-size:22px; cursor:pointer}
.adet-step span{min-width:40px; text-align:center; font-weight:700; font-size:16px}
.sec-foot .btn-primary{flex:1}

@media (max-width:860px){
  .adisyon-wrap{grid-template-columns:1fr}
  .siparis-pane{position:fixed; left:0; right:0; bottom:0; top:auto; max-height:80vh; border-radius:18px 18px 0 0; transform:translateY(110%); transition:transform .25s; z-index:70; box-shadow:0 -10px 30px rgba(0,0,0,.5)}
  .siparis-pane.acik{transform:translateY(0)}
  .sp-kapat{display:block}
  .urun-pane{padding-bottom:74px}
  .mobil-bar{display:flex; align-items:center; gap:12px; position:fixed; left:12px; right:12px; bottom:calc(12px + var(--safe-b)); background:var(--accent); color:#1a1206; padding:14px 18px; border-radius:14px; font-weight:700; z-index:60; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.4)}
  .mb-count{background:#1a1206; color:var(--accent2); min-width:26px; height:26px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:13px}
  .mb-tut{flex:1}
  .mb-git{font-size:15px}
}

/* ── Yerleşim Planı editörü (Faz 2) ─────────────────────── */
.plan-bar{display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap}
.plan-bar .inp{width:auto; min-width:150px; padding:9px 12px}
#editTools{display:inline-flex; gap:8px}
.btn-mini.ok{background:var(--ok); color:#04210f}
.btn-mini.aktif{outline:2px solid var(--accent2)}
.plan-ipucu{margin:0 0 8px}
.plan-link-row{margin:0 0 14px}
.plan-canvas-wrap{overflow:auto; border:1px solid var(--line); border-radius:14px; background:var(--bg2); -webkit-overflow-scrolling:touch}
.plan-canvas{position:relative; width:880px; height:560px;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:40px 40px; background-position:-1px -1px}
.masa-node{position:absolute; display:flex; align-items:center; justify-content:center; background:#27201055; border:2px solid var(--accent); border-radius:12px; color:var(--txt); font-weight:700; font-size:14px; user-select:none; -webkit-user-select:none; touch-action:none; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.3)}
.masa-node.sekil-yuvarlak{border-radius:50%}
.masa-node.sel{outline:2px solid var(--accent2); outline-offset:2px; z-index:5}
.masa-node .mn-ad{pointer-events:none; padding:2px; text-align:center; word-break:break-word; line-height:1.15}
.masa-node .rsz{position:absolute; right:-2px; bottom:-2px; width:18px; height:18px; background:var(--accent2); border:2px solid var(--bg); border-radius:5px; cursor:nwse-resize}
.plan-sel{display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.plan-sel b{font-size:15px}
.sel-sekil{display:flex; gap:6px}
.sek-btn{background:var(--bg2); border:1px solid var(--line); color:var(--txt); padding:7px 11px; border-radius:9px; font-size:13px; cursor:pointer}
.sek-btn.aktif{background:var(--accent); color:#1a1206; border-color:var(--accent)}
.plan-toast{position:fixed; left:50%; transform:translateX(-50%) translateY(20px); bottom:calc(24px + var(--safe-b)); background:#04210f; border:1px solid var(--ok); color:#86efac; padding:12px 20px; border-radius:12px; font-weight:600; opacity:0; transition:.3s; z-index:90; pointer-events:none}
.plan-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ── Adisyon servis görünümü: Plan/Liste (Faz 2b) ───────── */
.view-toggle{display:flex; gap:8px; margin:4px 0 12px}
.view-tab{flex:1; background:var(--bg2); border:1px solid var(--line); color:var(--txt); padding:10px; border-radius:12px; font-weight:600; cursor:pointer}
.view-tab.aktif{background:var(--accent); color:#1a1206; border-color:var(--accent)}
.plan-salon-sel{width:auto; min-width:150px; margin-bottom:10px; padding:9px 12px}
.floor-node{position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:2px solid var(--line); border-radius:12px; background:var(--bg2); color:var(--txt); font-weight:700; text-decoration:none; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.3); padding:2px; text-align:center}
.floor-node.sekil-yuvarlak{border-radius:50%}
.floor-node .fn-ad{font-size:14px; word-break:break-word; line-height:1.1}
.floor-node .fn-tut{font-size:11px; color:var(--muted)}
.floor-node.acik{border-color:var(--accent); background:#27201040}
.floor-node.acik .fn-tut{color:var(--accent2)}
.floor-node.hesap{border-color:var(--danger); background:#3f1d1d55}
.floor-node.hesap .fn-tut{color:#fca5a5}
.floor-node:active{transform:translateY(1px)}

/* sipariş footer: iki ghost buton eşit genişlik */
.sp-btns .btn-ghost{flex:1; text-align:center}

/* ── Ödeme ekranı (Faz 3a) ──────────────────────────────── */
.odeme-wrap{display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start}
@media (max-width:760px){ .odeme-wrap{grid-template-columns:1fr} }
.odeme-ozet{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px}
.oz-row{display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:15px}
.oz-row b{font-size:18px}
.oz-row .ok{color:var(--ok)}
.oz-row.kalan{border-top:1px solid var(--line); margin-top:4px; padding-top:10px}
.oz-row.kalan b{font-size:24px; color:var(--accent2)}
.oz-row.ustu b{color:#86efac}
.odeme-list-wrap{background:var(--card); border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden}
.odeme-list-head{padding:10px 14px; border-bottom:1px solid var(--line); font-weight:700; font-size:14px}
.ode-row{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line)}
.ode-row:last-child{border-bottom:none}
.ode-y{flex:1; font-weight:600; font-size:15px}
.ode-t{font-weight:700; font-size:15px; white-space:nowrap}
.odeme-sag{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:10px}
.odeme-sag label{font-size:13px; color:var(--muted)}
.odeme-sag .inp{font-size:20px; text-align:right; font-weight:700}
.hizli-tutar{display:flex; gap:8px}
.ht-btn{flex:1; background:var(--bg2); border:1px solid var(--line); color:var(--txt); padding:11px; border-radius:10px; font-weight:600; cursor:pointer}
.ht-btn:active{transform:translateY(1px)}
.yontem-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px}
.yontem-btn{padding:15px 10px; border-radius:12px; border:1px solid var(--line); background:var(--bg2); color:var(--txt); font-weight:700; cursor:pointer; font-size:15px}
.yontem-btn:active{transform:translateY(1px)}
.yontem-btn.y-nakit{border-color:var(--ok); color:#86efac}
.yontem-btn.y-kredi_karti{border-color:var(--blue); color:#bfdbfe}

/* ── Gün Sonu (Faz 3b) ──────────────────────────────────── */
.gs-filtre{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.gs-filtre .inp{width:auto; min-width:150px; padding:10px 12px}
.gs-ozet-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
@media (max-width:560px){ .gs-ozet-cards{grid-template-columns:1fr} }
.gs-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px}
.gs-card-l{color:var(--muted); font-size:13px}
.gs-card-v{font-size:24px; font-weight:800; color:var(--accent2); margin-top:4px}
.gs-card:first-child .gs-card-v{color:var(--accent2)}
.gs-blok{background:var(--card); border:1px solid var(--line); border-radius:14px; margin-bottom:14px; overflow:hidden}
.gs-blok-head{padding:12px 14px; border-bottom:1px solid var(--line); font-weight:700; font-size:15px}
.gs-tablo{width:100%; border-collapse:collapse}
.gs-tablo td{padding:11px 14px; border-bottom:1px solid var(--line); font-size:15px}
.gs-tablo tr:last-child td{border-bottom:none}
.gst-ad{font-weight:600}
.gst-adet{color:var(--muted); font-size:13px; text-align:center; white-space:nowrap}
.gst-tutar{text-align:right; font-weight:700; white-space:nowrap}
.gs-tablo tr.sifir td{opacity:.45}
.gs-tablo tr.gst-toplam td{border-top:2px solid var(--line); font-weight:800; background:var(--bg-2)}
.gs-tablo tr.gst-toplam .gst-tutar{color:var(--accent2); font-size:17px}
.gs-kapanis-list{max-height:340px; overflow-y:auto}
.gs-kap-row{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line)}
.gs-kap-row:last-child{border-bottom:none}
.gk-masa{flex:1; font-weight:600}
.gk-saat{color:var(--muted); font-size:13px}
.gk-tutar{font-weight:700; white-space:nowrap}

/* ── Raporlar: dönem rozeti + saatlik bar (eklenti) ───────── */
.gs-rozet{font-size:12px; font-weight:700; margin-left:6px; padding:1px 6px; border-radius:8px; white-space:nowrap}
.gs-rozet.up{color:#34d399; background:#05291d}
.gs-rozet.down{color:#f87171; background:#2a0f0f}
.gs-saatlik{padding:8px 14px 12px}
.gs-bar-row{display:flex; align-items:center; gap:10px; padding:4px 0}
.gs-bar-row.sifir{opacity:.45}
.gs-bar-saat{width:26px; flex:none; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.gs-bar-track{flex:1; height:14px; background:var(--bg-2); border:1px solid var(--line); border-radius:7px; overflow:hidden}
.gs-bar{display:block; height:100%; background:var(--accent); border-radius:7px; min-width:2px}
.gs-bar-val{flex:none; font-size:12px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
@media (max-width:560px){ .gs-bar-val{font-size:11px} }

/* ── Kasa döngüsü: Gün başı / Gün sonu ──────────────────── */
.gs-kasa{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px}
.gs-kasa.acik{border-color:#f59e0b66; box-shadow:0 0 0 1px #f59e0b22}
.gs-kasa-head{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.gs-kasa-head h2{font-size:17px; font-weight:800; margin:0}
.gs-durum{font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px; white-space:nowrap}
.gs-durum.acik{color:#34d399; background:#05291d}
.gs-durum.kapali{color:var(--muted); background:var(--bg-2)}
.gs-kasa-meta{color:var(--muted); font-size:13px; margin-bottom:12px; line-height:1.6}
.gs-kasa-meta b{color:var(--txt)}
.gs-field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.gs-field label{font-size:13px; color:var(--muted); font-weight:600}
.gs-field .inp{padding:12px 14px; font-size:16px}
.gs-mutabakat{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0}
@media (max-width:480px){ .gs-mutabakat{grid-template-columns:1fr} }
.gs-mut-cell{background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:12px}
.gs-mut-l{color:var(--muted); font-size:12px}
.gs-mut-v{font-size:20px; font-weight:800; margin-top:4px; font-variant-numeric:tabular-nums}
.gs-mut-v.beklenen{color:var(--accent2)}
.gs-fark{text-align:center; padding:12px; border-radius:12px; font-weight:800; font-size:17px; margin:6px 0 12px; background:var(--bg-2); border:1px solid var(--line)}
.gs-fark.arti{color:#34d399}
.gs-fark.eksi{color:#f87171}
.gs-fark.sifir{color:var(--muted)}
.gs-btn-ac, .gs-btn-kapat{display:block; width:100%; padding:14px; border:none; border-radius:12px; font-size:16px; font-weight:800; cursor:pointer; background:var(--accent); color:#1a1205}
.gs-btn-kapat{background:#f59e0b}
.gs-btn-kapat:disabled{opacity:.5; cursor:not-allowed}
.gs-uyari{display:flex; align-items:center; gap:8px; padding:12px 14px; border-radius:12px; background:#2a0f0f; border:1px solid #f8717155; color:#fca5a5; font-weight:700; font-size:14px; margin-bottom:12px}

/* ── Yönetim: Roller (Faz 4a) ───────────────────────────── */
.rol-bar{margin-bottom:12px}
.rol-list{display:flex; flex-direction:column; gap:8px}
.rol-row{display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.rol-main{flex:1; min-width:0}
.rol-ad{font-weight:700; font-size:15px}
.rol-sis{font-size:10px; padding:1px 7px; border-radius:999px; background:#1e293b; color:var(--muted); border:1px solid var(--line); margin-left:4px; vertical-align:middle}
.rol-yetki{font-size:13px; color:var(--muted); margin-top:2px}
.modal.modal-lg{max-width:520px; width:100%; max-height:88vh; overflow-y:auto}
.yetki-baslik{font-weight:700; font-size:14px; margin:14px 0 6px; color:var(--accent2)}
.yetki-grup{border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:10px; background:var(--bg2)}
.yetki-grup-ad{display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin-bottom:6px}
.grp-tumu{background:transparent; border:none; color:var(--accent2); font-size:12px; cursor:pointer; text-decoration:underline}
.yetki-chk{display:flex; align-items:center; gap:10px; padding:8px 2px; font-size:14px; cursor:pointer}
.yetki-chk input{width:18px; height:18px; flex:none}

/* ── Cila katmanı (görsel tutarlılık + dokunmatik + erişilebilirlik) ──────── */

/* Erişilebilir, tutarlı odak halkası — yalnız klavye/odak için (dokunmada çıkmaz) */
:where(button, a, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--accent2); outline-offset:2px; border-radius:8px;
}
.inp:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px #f59e0b33 }

/* Dokunmatik POS: ikon butonları için min. dokunma hedefi + net basış geri bildirimi */
.ic-btn{ min-width:38px; min-height:38px; display:inline-flex; align-items:center; justify-content:center; transition:background .12s, border-color .12s, transform .06s }
.ic-btn:active{ background:var(--bg-2) }
.ic-btn.danger:active{ background:#3f1d1d }
.ic-btn.sm{ min-width:30px; min-height:30px }

/* Silme/kaldır (×) butonları biraz daha tıklanabilir + geri bildirim */
.sat-x:active{ background:#3f1d1d; transform:translateY(1px) }

/* Kart ve link-kartlarda hafif yükselme + basış hissi */
.card{ transition:border-color .12s, transform .06s, box-shadow .12s }
.card-link:active{ transform:translateY(1px) }
.card.done:active, .card.next:active{ box-shadow:0 4px 16px rgba(0,0,0,.35) }

/* Tek elle / başparmak: birincil ve hayalet butonlarda tutarlı basış */
.btn-mini{ transition:filter .12s, transform .06s; min-height:38px }
.btn-mini:active{ transform:translateY(1px); filter:brightness(.94) }
.btn-ghost:active{ transform:translateY(1px); background:var(--bg-2) }

/* Hızlı tutar / ödeme yöntemi tuşları — dokunmatik hedefi büyüt, seçili hissi */
.ht-btn{ min-height:46px; transition:background .12s, transform .06s }
.ht-btn:active{ background:var(--bg-2) }
.yontem-btn{ min-height:54px; transition:filter .12s, transform .06s }
.yontem-btn:active{ filter:brightness(1.1) }
.yontem-btn.y-nakit:active{ background:#0f2e1a }
.yontem-btn.y-kredi_karti:active{ background:#0f2440 }
/* Yemek kartları: nakit/kredi'den görsel olarak ayrışan, kendi içinde tutarlı grup (amber ton) */
.yontem-btn.y-sodexo, .yontem-btn.y-multinet, .yontem-btn.y-setcard,
.yontem-btn.y-edenred, .yontem-btn.y-metropol, .yontem-btn.y-tokenflex{
  border-color:#7c5310; color:var(--accent2)
}
.yontem-btn.y-sodexo:active, .yontem-btn.y-multinet:active, .yontem-btn.y-setcard:active,
.yontem-btn.y-edenred:active, .yontem-btn.y-metropol:active, .yontem-btn.y-tokenflex:active{
  background:#3f2d10
}

/* Kategori sekmeleri / görünüm sekmeleri: dokunma hedefi ve momentum kaydırma */
.kat-tab{ min-height:40px; display:inline-flex; align-items:center }
.kat-tab:active{ transform:translateY(1px) }
.view-tab{ min-height:44px; transition:transform .06s }
.view-tab:active{ transform:translateY(1px) }

/* Boş-durum metinleri biraz daha nefes alsın */
.bos-uyari .muted{ font-size:15px }

/* Topbar geri linki: dokunulabilir alan + basış */
.tb-out{ display:inline-flex; align-items:center; min-height:38px; transition:background .12s }
.tb-out:active{ background:var(--bg-2) }

/* Modal başlığındaki × tuşu için daha rahat dokunma alanı */
.modal-head .x{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; margin:-6px -6px -6px 0 }
.modal-head .x:active{ background:var(--bg-2) }

/* Modal: yumuşak giriş animasyonu */
@keyframes modalIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:translateY(0) } }
.modal-bg.show .modal{ animation:modalIn .16s ease-out }

/* ── Faz 5: Ürün-şube ayar ekranı cilası ─────────────────────────────────── */
/* Toplu bar gerçekten yatay dizilsin (.sec-head tek başına flex değildi) */
.toplu-bar{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 }
.toplu-bar .btn-mini{ flex:1; min-width:140px }
.btn-mini.ghost{ background:transparent; color:var(--accent2); border:1px solid var(--line) }
.btn-mini.ghost:active{ background:var(--bg-2) }

/* Şube kartı: "menüde / gizli" durumunu kart kenarıyla da belli et */
.grup-card[data-bid]{ transition:border-color .15s }
.grup-card.gizli{ border-color:#7f1d1d; background:#3f1d1d22 }
.badge.sube.gizli-badge{ background:#3f1d1d; color:#fca5a5; border-color:#7f1d1d }
.stok-row{ border-top:1px solid var(--line); margin-top:10px; padding-top:10px }

/* Faz 5 menü rozeti: "N şube" ve "tükendi" ile birlikte düzgün sarılma */
.m-row-t{ display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.m-row-t .badge{ flex:none }

/* ── Dar ekran (≈380px ve altı) ince ayar ──────────────────────────────── */
@media (max-width:400px){
  /* Menü satırında 4 aksiyon ikonu sıkışmasın */
  .m-row{ gap:6px; padding:10px 4px }
  .ic-btn{ min-width:36px; padding:6px }
  /* Ödeme yöntemleri tek sütuna düşmesin ama biraz nefes alsın */
  .yontem-btn{ padding:14px 8px; font-size:14px }
}

/* ── Ayarlar (Faz 5b) — gs-blok kalıbı üzerine, koyu-amber, mobil-öncelikli ── */
.ay-form{ display:block }
.ay-body{ padding:14px; display:flex; flex-direction:column; gap:10px }
.ay-body label:not(.chk){ font-size:13px; color:var(--muted); margin-bottom:-4px }
.ay-body .btn-primary{ margin-top:4px }
.ay-rozet{ float:right; font-size:11px; font-weight:600; color:var(--accent);
  border:1px solid var(--accent); border-radius:999px; padding:2px 9px }

/* ── Yönetim Merkezi (hub) — NarPOS tarzı sekme + sidebar (ADIM 1) ─────────── */
.panel-page.hub-page{ max-width:1000px }

.hub-tabs{
  display:flex; gap:8px; overflow-x:auto; white-space:nowrap;
  -webkit-overflow-scrolling:touch; padding-bottom:10px; margin-bottom:14px;
  border-bottom:1px solid var(--line); scrollbar-width:thin;
}
.hub-tab{
  flex:0 0 auto; display:inline-block; text-decoration:none;
  background:var(--bg2); border:1px solid var(--line); color:var(--txt);
  padding:9px 18px; border-radius:12px; font-size:15px; font-weight:600;
}
.hub-tab.aktif{ background:var(--accent); color:#0f172a; border-color:var(--accent) }

.hub-body{ display:grid; grid-template-columns:200px 1fr; gap:14px; align-items:start }
.hub-content{ min-width:0 }

.hub-sidebar{ display:flex; flex-direction:column; gap:6px }
.hub-side-link{
  display:block; text-decoration:none; color:var(--txt);
  background:var(--card); border:1px solid var(--line);
  border-left:3px solid transparent; border-radius:10px;
  padding:10px 12px; font-size:14px;
}
.hub-side-link .hsl-t{ display:block; font-weight:600 }
.hub-side-link .hsl-d{ display:block; font-size:11px; color:var(--muted); margin-top:2px }
.hub-side-link.aktif{ border-left:3px solid var(--accent2); background:#f59e0b1a }
.hub-side-link.pasif{ opacity:.45; cursor:default }

@media(max-width:719px){
  .hub-body{ display:block }
  .hub-sidebar{
    flex-direction:row; overflow-x:auto; white-space:nowrap;
    -webkit-overflow-scrolling:touch; gap:8px; margin-bottom:14px; padding-bottom:6px;
  }
  .hub-side-link{ flex:0 0 auto; border-left:none; border-top:3px solid transparent }
  .hub-side-link.aktif{ border-left:none; border-top:3px solid var(--accent2) }
}

/* ── mono rakamlar (tabular-nums) ── */
.sp-toplam b,.sat-tut,.mb-tut,.u-fiy,.oz-row b,.ode-t,.odeme-sag .inp,.gs-card-v,
.gs-mut-v,.gs-fark,.gst-tutar,.gst-adet,.gst-ort,.gk-tutar,.mk-tut,.fn-tut,
.gs-bar-saat,.gs-bar-val,.pin-input,.adet-step span,.kisi-step input{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
}

/* ── tema değiştirici butonu ── */
.tema-btn{position:fixed;z-index:120;top:calc(10px + var(--safe-t));right:calc(10px + env(safe-area-inset-right,0px));
  width:42px;height:42px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-2);color:var(--text-1);border:1px solid var(--border);box-shadow:var(--sh-sm);
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s,transform .06s;}
.tema-btn:active{transform:translateY(1px);background:var(--bg-3)}
.tema-btn:hover{border-color:var(--border-2)}
.tema-ic{display:block}