/* ============================================================
   Kerzz POS — hero mockup stylesheet
   Değerler pos.kerzz.cloud kaynağından birebir alındı:
   preset: kerzz-red (@kerzz/ui-theme), light theme, web density
   ============================================================ */
:root {
  --primary: #ef5343;
  --primary50: #fef3f2;
  --primary100: #fee4e2;
  --primary200: #fececa;
  --primary300: #fcaba4;
  --primary400: #f87b6f;
  --primary600: #dc3525;
  --primary700: #b9291b;
  --bg: #f8fafc;      /* light.bg  = slate50  */
  --card: #f1f5f9;    /* light.card = slate100 */
  --elev: #e2e8f0;    /* cardElevated = slate200 */
  --border: #e2e8f0;
  --borderL: #f1f5f9;
  --text: #1e293b;    /* slate800 */
  --text2: #475569;   /* slate600 */
  --muted: #94a3b8;   /* slate400 */
  --white: #fff;
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  --emerald50: #ecfdf5;
  --emerald100: #d1fae5;
  --emerald400: #34d399;
  --emerald500: #10b981;
  --emerald700: #047857;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

.pos {
  width: 1280px;
  height: 720px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.25;
}

.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.screen { position: absolute; inset: 0; display: flex; opacity: 0; visibility: hidden;
          transition: opacity .28s ease; }
.pos[data-screen="tables"]  .s-tables,
.pos[data-screen="order"]   .s-order,
.pos[data-screen="payment"] .s-payment { opacity: 1; visibility: visible; }

/* ─────────────── Sidebar (ServiceMenu.tsx) ─────────────── */
.sidebar {
  width: 280px; flex: none; display: flex; flex-direction: column;
  background: var(--card); border-right: 1px solid var(--border);
}
.sb-logo {
  height: 64px; display: flex; align-items: center; justify-content: center;
  padding: 0 16px 0 16px; padding-right: 48px; border-bottom: 1px solid var(--border);
  position: relative;
}
.sb-logo img { width: 140px; height: auto; display: block; }
.sb-logo .toggle { position: absolute; right: 8px; top: 0; bottom: 0; display: flex;
  align-items: center; padding: 8px; color: var(--text2); }
.sb-menu { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.sb-item {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px; border-radius: 1px; color: var(--text); font-size: 14px; font-weight: 400;
}
.sb-item.active { background: var(--primary); color: var(--white); font-weight: 600;
  box-shadow: 0 4px 6px rgba(0,0,0,.1); }
.sb-item .ic { width: 20px; height: 20px; }
.sb-group { display: flex; align-items: center; gap: 8px; min-height: 48px;
  padding: 10px; color: var(--text); font-size: 14px; font-weight: 500; }
.sb-group .sp { flex: 1; }
.sb-foot { padding: 12px 0; text-align: center; border-top: 1px solid var(--border); }
.sb-foot b { display: block; font-size: 12px; font-weight: 500; color: var(--text);
  margin-bottom: 2px; }
.sb-foot span { font-size: 10px; color: var(--muted); }

/* ─────────────── Header (Header.tsx) ─────────────── */
.right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hdr {
  height: 64px; flex: none; display: flex; align-items: center; padding: 0 16px;
  background: var(--card); border-bottom: 1px solid var(--border); gap: 8px;
}
.hdr-left { display: flex; align-items: center; gap: 8px; }
.rest-sel { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.rest-sel span { font-size: 15px; font-weight: 600; color: var(--text); }
.socket-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--success);
  margin-left: 6px; }
.hdr .sp { flex: 1; }
.hdr-right { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; background: #f8fafc;
  display: flex; align-items: center; justify-content: center; color: var(--text); }
.rates { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px;
  background: #f8fafc; font-size: 11px; color: var(--text2); font-weight: 600; }
.rates i { font-style: normal; color: var(--muted); font-weight: 500; }
.sync { display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px;
  background: rgba(34,197,94,.12); color: #15803d; font-size: 11px; font-weight: 600; }
.sync .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--success); }
.flag { font-size: 18px; }
.avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--primary);
  color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center;
  justify-content: center; }
.back-btn { width: 36px; height: 36px; border-radius: 8px; background: #f8fafc;
  display: flex; align-items: center; justify-content: center; color: var(--text); }
.hdr-title { font-size: 15px; font-weight: 600; color: var(--text); }

/* ─────────────── TableGroups.tsx ─────────────── */
.groups { height: 72px; flex: none; display: flex; align-items: center;
  padding: 0 16px 6px; background: var(--card); border-bottom: 1px solid var(--border); gap: 12px; }
.grp {
  display: flex; align-items: center; padding: 8px 16px; border-radius: 999px;
  background: var(--elev);
}
.grp .nm { font-size: 14px; font-weight: 600; color: var(--text); }
.grp .occ { display: flex; flex-direction: column; align-items: center; margin-left: 8px; gap: 3px; }
.grp .bdg { padding: 2px 8px; min-width: 24px; border-radius: 999px; background: var(--borderL);
  font-size: 12px; font-weight: 600; color: var(--text2); text-align: center; }
.grp .bar { width: 52px; height: 5px; border-radius: 1px; background: var(--borderL);
  overflow: hidden; margin: 2px 4px; }
.grp .bar i { display: block; height: 5px; background: var(--primary300); }
.grp.active { background: var(--primary); }
.grp.active .nm { color: var(--white); }
.grp.active .bdg { background: rgba(0,0,0,.35); color: var(--white); }
.grp.active .bar { background: rgba(0,0,0,.25); }
.grp.active .bar i { background: var(--white); }

/* ─────────────── TableGrid.tsx / TableCard.tsx ─────────────── */
.grid { flex: 1; padding: 16px; display: flex; flex-wrap: wrap;
  align-content: flex-start; gap: 10px; background: var(--bg); }
.tcard {
  width: 178px; height: 105px; padding: 16px; border-radius: 8px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: rgba(239,83,67,.4); position: relative;
}
.tcard.occupied { background: rgba(239,83,67,.7); }
.tcard .th { display: flex; align-items: center; justify-content: space-between; }
.tcard .tname { font-size: 14px; font-weight: 600; color: #0f172a; }
.tcard.occupied .tname { color: var(--text); }
.tcard .thr { display: flex; align-items: center; gap: 4px; }
.tcard .sdot { width: 10px; height: 10px; border-radius: 5px; background: #94a3b8; }
.tcard .sdot.new { background: var(--success); }
.tcard .sdot.wait { background: var(--warning); }
.tcard .sdot.long { background: var(--error); }
.tcard .bcount { min-width: 20px; height: 20px; padding: 0 4px; border-radius: 4px;
  background: var(--warning); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.tcard .tnum { font-size: 28px; font-weight: 700; text-align: center; color: #0f172a; }
.tcard .amt { flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--text); }
.tcard .tf { display: flex; align-items: center; justify-content: space-between; }
.tcard .cap { display: flex; align-items: center; gap: 3px; font-size: 12px; color: #0f172a; }
.tcard .cap .ic { width: 12px; height: 12px; }
.tcard .stat { font-size: 12px; font-weight: 600; color: #0f172a; }
.tcard.occupied .cap { color: var(--text); font-size: 11px; font-weight: 500; }
.tcard .tfr { display: flex; align-items: center; gap: 4px; }
.tcard .dur { font-size: 10px; font-weight: 600; color: var(--text);
  background: #e2e8f0; border-radius: 4px; padding: 2px 4px; }
.tcard .tn2 { font-size: 12px; color: var(--text); }
.tcard.pressed { transform: scale(.97); }
.tcard.newtable { background: transparent; border: 2px dashed var(--elev);
  align-items: center; justify-content: center; color: var(--muted); gap: 6px; }
.tcard.newtable .lbl { font-size: 12px; font-weight: 600; }

/* ─────────────── OrderScreen ─────────────── */
.content { flex: 1; display: flex; min-height: 0; }
.leftpanel { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.divider { width: 8px; flex: none; background: var(--bg); display: flex;
  align-items: center; justify-content: center; }
.divider i { width: 2px; height: 34px; border-radius: 2px; background: var(--elev); }

/* CategoryList.tsx */
.catbar { background: var(--card); border-bottom: 1px solid var(--border); overflow: hidden; }
.catlist { display: flex; gap: 8px; padding: 8px 12px 0; }
.cat { width: 120px; height: 60px; display: flex; align-items: center; gap: 8px;
  padding: 8px; border-radius: 12px; background: var(--card); flex: none; }
.catbar .cat { background: #f1f5f9; }
.cat .cimg { width: 32px; height: 32px; border-radius: 6px; background: var(--primary200);
  display: flex; align-items: center; justify-content: center; color: var(--primary);
  font-size: 12px; font-weight: 700; }
.cat .ctxt { flex: 1; min-width: 0; }
.cat .cname { font-size: 11px; font-weight: 500; color: var(--text); margin-bottom: 2px; }
.cat .ccount { font-size: 10px; color: var(--text2); }
.cat.active { background: var(--primary); }
.cat.active .cname { color: var(--white); }
.cat.active .ccount { color: var(--primary100); }
.cat.active .cimg { background: var(--primary400); color: #fff; }
.subbar { display: flex; align-items: center; padding: 8px 8px 0 12px; gap: 8px;
  background: var(--bg); border-bottom: 1px solid var(--border); overflow: hidden; }
.subcat { width: 100px; height: 44px; display: flex; align-items: center; gap: 8px;
  padding: 8px; border-radius: 12px; background: #f1f5f9; flex: none; }
.subcat .ctxt { flex: 1; min-width: 0; }
.subcat .cname { font-size: 10px; font-weight: 500; color: var(--text); }
.subcat.active { background: var(--primary); }
.subcat.active .cname { color: var(--white); }

/* ProductSearchBar.tsx */
.searchwrap { padding-bottom: 8px; border-bottom: 1px solid var(--border); background: var(--bg); }
.search { display: flex; align-items: center; gap: 8px; margin: 8px 8px 0;
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); }
.search .ic { width: 16px; height: 16px; color: var(--muted); }
.search span { font-size: 14px; color: var(--muted); }

/* ProductGrid.tsx */
.products { flex: 1; padding: 12px; display: flex; flex-wrap: wrap; gap: 12px;
  align-content: flex-start; overflow: hidden; }
.pcard { width: 140px; height: 180px; border-radius: 12px; overflow: hidden;
  background: var(--card); border: 1px solid var(--borderL); display: flex; flex-direction: column; }
.pcard .pimg { height: 100px; display: flex; align-items: center; justify-content: center;
  background: var(--elev); color: var(--muted); }
.pcard .pimg .ic { width: 32px; height: 32px; }
.pcard .pimg.photo { background-size: cover; background-position: center; }
/* Çizim kendi arka planını taşıyor, kutuyu tamamen doldurur */
.pcard .pimg.dish { padding: 0; background: none; }
.pcard .pimg.dish svg.dish { width: 100%; height: 100%; display: block; }
.pcard .pinfo { flex: 1; padding: 8px; display: flex; flex-direction: column;
  justify-content: space-between; }
.pcard .pname { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text); }
.pcard .pprice { font-size: 14px; font-weight: 700; color: var(--primary600);
  font-variant-numeric: tabular-nums; }
.pcard.pressed { transform: scale(.96); }

/* Sağ panel */
.rightpanel { width: 480px; flex: none; display: flex; background: var(--bg); }
.ordersection { width: 390px; flex: none; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); overflow: hidden; background: var(--bg); }

/* OrderHeader.tsx */
.oh { padding: 8px 12px 0; border-bottom: 1px solid var(--border); background: var(--card); }
.oh .mainrow { display: flex; align-items: center; padding-bottom: 8px; }
.oh .left { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.oh .svc { display: flex; align-items: center; gap: 5px; }
.oh .svc .ic { width: 16px; height: 16px; color: var(--primary); }
.oh .svclbl { font-size: 13px; font-weight: 600; color: var(--text); }
.oh .sep { width: 1px; height: 12px; background: var(--border); }
.oh .tbl { font-size: 13px; font-weight: 700; color: var(--text); }
.oh .guests { display: flex; align-items: center; gap: 3px; padding: 2px 6px;
  border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.oh .guests .ic { width: 13px; height: 13px; color: var(--primary); }
.oh .guests span { font-size: 12px; font-weight: 600; }
.oh .who { display: flex; align-items: center; gap: 3px; }
.oh .who .ic { width: 13px; height: 13px; color: var(--primary); }
.oh .who span { font-size: 11px; color: var(--text2); }
.oh .cnt { font-size: 11px; color: var(--text2); }
.oh .sort { display: flex; align-items: center; gap: 3px; padding: 4px 8px;
  border-radius: 6px; background: #f8fafc; border: 1px solid var(--border); }
.oh .sort span { font-size: 11px; color: var(--text2); font-weight: 500; }

/* OrderItemList / OrderItemRow */
.items { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 8px;
  overflow: hidden; background: var(--bg); }
.irow { min-height: 80px; border-radius: 8px; padding: 12px 12px 12px 8px;
  border: 1px solid var(--border); background: var(--card); display: flex; flex-direction: column; }
.irow.isnew { background: var(--emerald50); border-color: var(--emerald400);
  border-left: 3px solid var(--emerald500); }
.irow .toprow { display: flex; align-items: flex-start; gap: 8px; }
.irow .radio { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--border);
  margin-top: 2px; flex: none; display: flex; align-items: center; justify-content: center; }
.irow.isnew .radio { border-color: var(--emerald500); }
.irow .iname { flex: 1; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--text); }
.irow .qty { font-size: 13px; font-weight: 500; min-width: 36px; text-align: center; }
.irow .tot { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.irow .botrow { display: flex; align-items: center; margin-top: 4px; padding-left: 28px; gap: 8px; }
.irow .newb { background: var(--emerald100); color: var(--emerald700); font-size: 9px;
  font-weight: 700; padding: 1px 5px; border-radius: 4px; letter-spacing: .3px; }
.irow .fill { flex: 1; }
.irow .kdv { font-size: 10px; color: var(--muted); min-width: 60px; text-align: right; }
.irow .unit { font-size: 11px; font-weight: 500; color: var(--primary600);
  font-variant-numeric: tabular-nums; }
.irow .usertime { margin-top: 3px; padding-left: 28px; font-size: 9px; color: var(--muted); }
.irow .modrow { display: flex; align-items: center; gap: 8px; margin-left: 20px; margin-top: -2px;
  min-height: 36px; padding: 8px 12px; border-radius: 8px; background: #f8fafc;
  border-left: 2px solid var(--primary200); }
.irow .modrow .mi { width: 16px; text-align: center; font-size: 11px; color: var(--primary400); }
.irow .modrow .mn { flex: 1; font-size: 11px; color: #475569; }
.irow .modrow .mp { font-size: 11px; font-weight: 500; color: #64748b; }
.items .empty { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; color: var(--muted); }
.items .empty .ic { width: 40px; height: 40px; }
.items .empty span { font-size: 13px; }

/* OrderSummary.tsx */
.summary { padding: 12px 16px; border-top: 1px solid var(--border); background: var(--card);
  display: flex; flex-direction: column; gap: 8px; }
.summary .r { display: flex; align-items: center; justify-content: space-between; }
.summary .lbl { font-size: 13px; color: var(--text2); }
.summary .val { font-size: 13px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; }
.summary .hr { height: 1px; background: var(--border); }
.summary .tlbl { font-size: 15px; font-weight: 700; color: var(--text); }
.summary .tval { font-size: 20px; font-weight: 700; color: var(--primary600);
  font-variant-numeric: tabular-nums; }

/* BottomActions.tsx */
.bactions { display: flex; gap: 8px; padding: 8px 12px 12px; border-top: 1px solid var(--border);
  background: var(--elev); }
.bactions .b { flex: 1; height: 48px; border-radius: 12px; border: 1px solid var(--borderL);
  background: var(--elev); display: flex; align-items: center; justify-content: center;
  color: var(--text); }
.bactions .b .ic { width: 22px; height: 22px; }
.bactions .b.cancel { background: rgba(239,68,68,.1); color: var(--error); }
.bactions .b.complete { background: rgba(34,197,94,.1); color: var(--success); }
.bactions .b.dis { opacity: .4; }
.bactions .b.hot { box-shadow: 0 0 0 3px rgba(239,83,67,.35); }

/* SideActionsPanel.tsx */
.sideacts { width: 90px; flex: none; border-left: 1px solid var(--border);
  background: var(--card); padding: 8px; display: flex; flex-direction: column; gap: 8px;
  overflow: hidden; }
.sideacts .sa { padding: 8px 4px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--text); }
.sideacts .sa .ic { width: 18px; height: 18px; }
.sideacts .sa span { font-size: 10px; font-weight: 600; text-align: center; line-height: 1.15; }
.sideacts .sa.danger { color: var(--error); }
.sideacts .sa.success { color: var(--success); }
.sideacts .sa.dis { opacity: .4; }

/* ─────────────── PaymentScreen (TabletPaymentLayout) ─────────────── */
.pay-content { flex: 1; display: flex; min-height: 0; background: var(--bg); }
.pcol-left { width: calc((100% - 16px) * .33); flex: none; display: flex; flex-direction: column; }
.pcol-mid { width: calc((100% - 16px) * .33); flex: none; display: flex; flex-direction: column;
  background: var(--card); }
.pcol-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.bil { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.bil .btabs { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: var(--card); border-bottom: 1px solid var(--border); }
.bil .btab { padding: 6px 14px; border-radius: 999px; background: var(--elev);
  font-size: 12px; font-weight: 600; color: var(--text2); }
.bil .btab.active { background: var(--primary); color: #fff; }
.bil .blist { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 8px;
  overflow: hidden; }
.bitem { display: flex; align-items: center; gap: 10px; padding: 12px;
  border: 1px solid var(--borderL); border-radius: 8px; background: var(--card); }
.bitem .cbx { width: 20px; height: 20px; border-radius: 4px; border: 2px solid var(--border);
  flex: none; display: flex; align-items: center; justify-content: center; }
.bitem.sel .cbx { background: var(--primary); border-color: var(--primary); color: #fff; }
.bitem .binfo { flex: 1; min-width: 0; }
.bitem .bname { font-size: 13px; font-weight: 600; color: var(--text); }
.bitem .qbadge { padding: 3px 8px; border-radius: 6px; background: var(--elev);
  font-size: 11px; font-weight: 600; color: var(--text2); }
.bitem .bprice { font-size: 14px; font-weight: 700; color: var(--text); min-width: 92px;
  text-align: right; font-variant-numeric: tabular-nums; }
.bitem.paid { opacity: .55; }
.bitem .paidb { padding: 2px 6px; border-radius: 4px; background: var(--emerald100);
  color: var(--emerald700); font-size: 9px; font-weight: 700; }
.bfoot { padding: 12px; border-top: 1px solid var(--border); background: var(--card); }
.bfoot .hint { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.bfoot .trow { display: flex; align-items: center; justify-content: space-between; }
.bfoot .tl { font-size: 14px; font-weight: 600; color: var(--text2); }
.bfoot .ta { font-size: 22px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; }
.lactions { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border);
  background: var(--card); }
.lactions .lb { flex: 1; height: 44px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text2); }
.lactions .lb .ic { width: 16px; height: 16px; }
.lactions .lb.print { color: var(--error); }

/* PaymentHistory */
.phist { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.phist .ptitle { font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 2px; }
.phist .pempty { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; color: var(--muted); }
.phist .pempty .ic { width: 34px; height: 34px; }
.phist .pempty span { font-size: 12px; }
.pitem { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--borderL); }
.pitem .pic { width: 32px; height: 32px; border-radius: 8px; background: #eff6ff;
  color: var(--info); display: flex; align-items: center; justify-content: center; }
.pitem .pic .ic { width: 16px; height: 16px; }
.pitem .pinf { flex: 1; }
.pitem .pn { font-size: 13px; font-weight: 600; color: var(--text); }
.pitem .pt { display: flex; align-items: center; gap: 3px; font-size: 10px; color: var(--muted); }
.pitem .pt .ic { width: 10px; height: 10px; }
.pitem .pa { font-size: 14px; font-weight: 700; color: var(--success);
  font-variant-numeric: tabular-nums; }
.pitem.pending { border-color: var(--primary200); background: var(--primary50); }
.pitem.pending .pa { color: var(--primary600); }

/* NumPad */
.numpad { border-radius: 12px; overflow: hidden; margin: 0 12px 12px; background: var(--bg);
  border: 1px solid var(--border); }
.numpad .disp { padding: 16px; border-bottom: 1px solid var(--border); background: var(--card); }
.numpad .disp .dl { font-size: 12px; text-align: right; color: var(--text2); }
.numpad .disp .dv { font-size: 24px; font-weight: 700; text-align: right; margin-top: 4px;
  color: var(--text); font-variant-numeric: tabular-nums; }
.numpad .grid3 { padding: 8px; }
.numpad .row3 { display: flex; gap: 8px; margin-bottom: 8px; }
.numpad .nb { flex: 1; height: 48px; border-radius: 8px; background: var(--card);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  font-weight: 600; color: var(--text); }
.numpad .acts { display: flex; gap: 8px; padding: 8px; padding-top: 0; }
.numpad .ab { flex: 1; height: 48px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; gap: 6px; background: var(--card); }
.numpad .ab.back { background: rgba(239,68,68,.1); color: var(--error); }
.numpad .ab.cash { background: rgba(239,83,67,.1); color: var(--primary); }
.numpad .ab.disc { background: rgba(245,158,11,.12); color: var(--warning);
  font-size: 13px; font-weight: 600; }

/* PaymentTypeGrid */
.ptypes { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ptypes .tt { font-size: 14px; font-weight: 600; color: var(--text); padding: 8px 16px; }
.ptypes .pgrid { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.ptype { width: 48.5%; display: flex; align-items: center; gap: 4px; padding: 16px 8px;
  border-radius: 8px; border: 2px solid var(--border); background: var(--card); }
.ptype .pic { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center;
  justify-content: center; }
.ptype .pnm { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.ptype.hot { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(239,83,67,.2); }
.ractions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px;
  border-top: 1px solid var(--border); background: var(--card); }
.ractions .rb { height: 52px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; gap: 6px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); background: var(--bg); color: var(--text2); }
.ractions .rb .ic { width: 16px; height: 16px; }
.ractions .rb.save { background: var(--primary); border-color: var(--primary); color: #fff; }
.ractions .rb.close { background: var(--success); border-color: var(--success); color: #fff; }
.ractions .rb.dis { opacity: .45; }
.ractions .rb.hot { box-shadow: 0 0 0 4px rgba(34,197,94,.28); }

/* ─────────────── Cursor + efektler ─────────────── */
.cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 60;
  transform: translate(-4px,-2px); transition: transform .62s cubic-bezier(.5,.05,.2,1);
  pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.cursor.click .ring { animation: ring .45s ease-out; }
.ring { position: absolute; left: -8px; top: -8px; width: 34px; height: 34px;
  border-radius: 999px; border: 2px solid var(--primary); opacity: 0; }
@keyframes ring { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }

.toast { position: absolute; left: 50%; top: 22px; transform: translate(-50%, -18px);
  background: #16a34a; color: #fff; padding: 12px 20px; border-radius: 10px;
  font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.2); opacity: 0; transition: all .3s ease; z-index: 70; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   Hero — Kerzz POS masaya servis akışı, monitör ekranına giydirilmiş
   Sahne 1500 × 844 (fotoğrafın 3000 × 1688 ölçüsünün yarısı) çizilir,
   kapsayıcıya göre ölçeklenir.
   ============================================================ */
.kz-hero {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  aspect-ratio: 3000 / 1688;
  overflow: hidden;
  background: #fdfaf7;
}
.kz-stage {
  position: absolute;
  left: 0; top: 0;
  width: 1500px;
  height: 844px;
  transform-origin: 0 0;
}
.kz-photo {
  position: absolute; inset: 0;
  width: 1500px; height: 844px;
  display: block;
  user-select: none; -webkit-user-drag: none;
}
/* Monitör ekranı — POS UI perspektife oturtulur */
.kz-screen {
  position: absolute; left: 0; top: 0;
  width: 1280px; height: 720px;
  transform-origin: 0 0;
  transform: var(--kz-matrix);
  overflow: hidden;
  backface-visibility: hidden;
}
.kz-screen .pos {
  transform: translateZ(0);
  box-shadow: none;
}
/* Cam / yansıma katmanı — aynı perspektifte */
.kz-glass {
  position: absolute; left: 0; top: 0;
  width: 1280px; height: 720px;
  transform-origin: 0 0;
  transform: var(--kz-matrix);
  pointer-events: none;
  background:
    linear-gradient(104deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.07) 18%,
      rgba(255,255,255,0)   34%,
      rgba(255,255,255,0)   72%,
      rgba(255,255,255,.05) 100%),
    linear-gradient(180deg, rgba(255,247,238,.10), rgba(12,16,28,.07));
  mix-blend-mode: screen;
}
.kz-vignette {
  position: absolute; left: 0; top: 0;
  width: 1280px; height: 720px;
  transform-origin: 0 0;
  transform: var(--kz-matrix);
  pointer-events: none;
  background: radial-gradient(120% 90% at 30% 20%,
    rgba(0,0,0,0) 40%, rgba(10,12,20,.10) 100%);
}

@media (prefers-reduced-motion:reduce){ .cursor{ transition:none } .ring{ animation:none !important }