/* ============================================================
   GRATIS POS — Stiller
   ============================================================ */
:root{
  --bg:#f4f5f7;--panel:#fff;--panel2:#f0f1f4;--border:#e2e4ea;
  --text:#1c2024;--muted:#6b7280;--accent:#e3007e;--accent2:#ff5a9e;
  --green:#1aa55d;--blue:#3b82f6;--r:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Tahoma,system-ui,sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased}

/* ---------- Login ---------- */
.login-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2))}
.login-box{background:#fff;border-radius:18px;padding:38px 34px;width:340px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.login-logo{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:grid;place-items:center;font-size:32px;font-weight:900;color:#fff;margin:0 auto 16px}
.login-box h1{font-size:24px;letter-spacing:2px}
.login-sub{color:var(--muted);font-size:13px;margin-bottom:20px}
.login-box input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:9px;font-size:14px;margin-bottom:10px}
.login-box input:focus{outline:none;border-color:var(--accent)}
.login-btn{width:100%;padding:13px;border:none;border-radius:9px;font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));cursor:pointer;margin-top:6px}
.login-err{background:#fde8e8;color:#9b1c1c;padding:10px;border-radius:8px;font-size:13px;margin-bottom:12px}

/* ---------- Topbar ---------- */
.topbar{height:54px;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 1px 6px rgba(0,0,0,.04);
  display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:1px;font-size:18px}
.brand .logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:grid;place-items:center;color:#fff;font-weight:900;font-size:16px}
.brand .sub{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:0}
.top-right{display:flex;align-items:center;gap:12px}
.cust-btn{background:var(--accent);color:#fff;border:none;border-radius:7px;padding:8px 13px;font-size:13px;font-weight:600;cursor:pointer}
.lang-group{display:flex;gap:6px;align-items:center}
.lang-sel{background:var(--panel2);border:1px solid var(--border);border-radius:7px;padding:7px 9px;font-size:13px;cursor:pointer}
.ticket-sel{background:#fff;border-color:var(--accent);color:var(--accent)}
.user-chip{display:flex;align-items:center;gap:8px;font-size:13px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.logout-btn{background:none;border:1px solid var(--border);border-radius:7px;padding:7px 11px;font-size:12px;color:var(--muted);cursor:pointer}

/* ---------- Layout ---------- */
.shell{display:flex;height:calc(100vh - 54px)}
.sidebar{width:82px;background:var(--panel);border-right:1px solid var(--border);padding:10px 0;display:flex;flex-direction:column;gap:4px}
.navbtn{margin:0 8px;padding:11px 0;border-radius:9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--muted);font-size:10px;border:1px solid transparent}
.navbtn .ni{font-size:20px}
.navbtn:hover{background:var(--panel2);color:var(--text)}
.navbtn.active{background:linear-gradient(135deg,rgba(227,0,126,.12),rgba(255,90,158,.08));color:var(--accent);border-color:rgba(227,0,126,.25);font-weight:600}
.main{flex:1;overflow:auto;padding:18px}
.loading{color:var(--muted);font-size:14px}

/* ---------- Dashboard ---------- */
.page-title{font-size:22px;font-weight:700;margin-bottom:16px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.clabel{color:var(--muted);font-size:12px;margin-bottom:8px}
.cval{font-size:26px;font-weight:800}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.panel h3{font-size:14px;margin-bottom:12px}
.lowrow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px}
.lowrow:last-child{border:none}
.badge{background:rgba(227,0,126,.12);color:var(--accent);padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700}
.placeholder{text-align:center;padding:60px 20px;color:var(--muted)}
.placeholder .pem{font-size:48px;margin-bottom:12px}
.placeholder h2{font-size:20px;color:var(--text);margin-bottom:6px}

/* ---------- POS ---------- */
.pos{display:grid;grid-template-columns:1fr 380px;gap:14px;height:100%}
.pos-left{display:flex;flex-direction:column;gap:12px;min-height:0}
.search{background:var(--panel);border:1px solid var(--border);border-radius:9px;padding:12px 14px;font-size:14px}
.search:focus{outline:none;border-color:var(--accent)}
.cats{display:flex;gap:8px;flex-wrap:wrap}
.cat{background:var(--panel);border:1px solid var(--border);padding:7px 14px;border-radius:20px;font-size:13px;cursor:pointer;color:var(--muted)}
.cat.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.products{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;align-content:start;padding-right:4px}
.prod{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:12px;cursor:pointer;text-align:center;transition:.12s}
.prod:hover{transform:translateY(-2px);border-color:var(--accent)}
.prod.oos{opacity:.45}
.pemoji{font-size:30px;margin-bottom:6px}
.pn{font-size:12px;font-weight:600;line-height:1.2;margin-bottom:3px}
.pp{font-size:13px;color:var(--accent);font-weight:700}
.ps{font-size:10px;color:var(--muted);margin-top:3px}

/* cart */
.cart{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);display:flex;flex-direction:column;min-height:0}
.cart-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:15px}
.cart-head span{font-size:12px;color:var(--muted)}
.cart-items{flex:1;overflow:auto;padding:8px 12px}
.cart-empty{display:grid;place-items:center;height:100%;color:var(--muted);font-size:13px;text-align:center}
.ci{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--border)}
.cie{font-size:22px}
.cii{flex:1}.cin{font-size:13px;font-weight:600}.cip{font-size:11px;color:var(--muted)}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:var(--panel2);cursor:pointer;font-size:14px}
.qty span{width:22px;text-align:center;font-size:13px}
.cil{width:62px;text-align:right;font-weight:700;font-size:13px}
.cart-foot{padding:14px 16px;border-top:1px solid var(--border)}
.trow{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:7px}
.trow.grand{font-size:20px;font-weight:800;color:var(--text);margin-top:8px}
.pay{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.b{border:none;border-radius:9px;padding:13px;font-size:14px;font-weight:700;cursor:pointer}
.b-cash{background:var(--panel2);border:1px solid var(--border)}
.b-card{background:var(--blue);color:#fff}
.b-pay{background:linear-gradient(135deg,var(--green),#138a4c);color:#fff;grid-column:1/-1;padding:15px;font-size:16px}

/* ---------- Ödeme penceresi (modal) ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(2px)}
.modal{background:#fff;width:380px;max-width:92vw;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-head{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;padding:16px 20px;font-size:18px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.modal-x{background:none;border:none;color:#fff;font-size:26px;cursor:pointer;line-height:1}
.modal-body{padding:20px}
.pay-total{display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--muted);margin-bottom:16px}
.pay-total b{font-size:30px;color:var(--text)}
.pay-methods{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px}
.pm{padding:12px 6px;border:1px solid var(--border);border-radius:9px;background:var(--panel2);font-size:13px;font-weight:600;cursor:pointer}
.pm.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.pay-label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
.pay-input{width:100%;padding:14px;border:1px solid var(--border);border-radius:9px;font-size:22px;font-weight:700;text-align:right}
.pay-input:focus{outline:none;border-color:var(--accent)}
.quick-cash{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}
.quick-cash button{flex:1;min-width:64px;padding:9px;border:1px solid var(--border);border-radius:8px;background:#fff;font-size:13px;font-weight:600;cursor:pointer}
.quick-cash button:hover{border-color:var(--accent);color:var(--accent)}
.pay-change{display:flex;justify-content:space-between;align-items:center;background:var(--panel2);border-radius:9px;padding:12px 14px;margin-top:8px}
.pay-change b{font-size:24px;color:var(--green)}
.pay-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:16px 0}
.pay-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px}

/* ---------- Stok modülü ---------- */
.stock-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.stock-actions{display:flex;gap:8px}
.b-pri{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:11px 16px;font-size:14px;font-weight:700;cursor:pointer}
.b-out{background:#fff;color:var(--accent);border:1px solid var(--accent);border-radius:9px;padding:11px 16px;font-size:14px;font-weight:700;cursor:pointer}
.stock-table{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.st-row{display:grid;grid-template-columns:44px 1fr 70px 70px 70px 80px 90px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--border);font-size:14px}
.st-row:last-child{border:none}
.st-head{background:var(--panel2);font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase}
.st-emoji{font-size:22px}
.st-name{display:flex;flex-direction:column;overflow:hidden}
.st-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-name small{color:var(--muted);font-size:11px}
.st-num{text-align:right;font-weight:600}
.st-num.low{color:var(--accent)}
.st-act{display:flex;gap:6px;justify-content:flex-end}
.st-act button{width:30px;height:30px;border:1px solid var(--border);background:var(--panel2);border-radius:7px;cursor:pointer;font-size:14px}
.st-act button:hover{border-color:var(--accent);color:var(--accent)}
.qs-prod{font-size:16px;margin-bottom:14px}
.qs-line{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:12px}
.qs-quick{display:flex;gap:7px;margin:10px 0}
.qs-quick button{flex:1;padding:9px;border:1px solid var(--border);border-radius:8px;background:#fff;font-weight:600;cursor:pointer}
.qs-quick button:hover{border-color:var(--accent);color:var(--accent)}
.se-log{max-height:200px;overflow:auto;margin:14px 0;font-size:13px}
.se-log div{padding:6px 0;border-bottom:1px solid var(--border)}
.se-ok{color:var(--green);font-weight:600}
.se-err{color:var(--accent)}
.pf-body{max-height:70vh;overflow:auto}
.pf-in{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:9px;font-size:14px;margin-bottom:4px}
.pf-in:focus{outline:none;border-color:var(--accent)}
.pf-in:disabled{background:var(--panel2);color:var(--muted)}
.pf-row{display:flex;gap:12px;margin:0}
.pf-row>div{flex:1}
.pf-price input{padding:11px 8px}

/* ---------- Satışlar / İade ---------- */
.sl-row{display:grid;grid-template-columns:1.2fr 1.3fr 1fr 90px 110px 110px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--border);font-size:13px}
.sl-row:last-child{border:none}
.sl-head{background:var(--panel2);font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase}
.sl-row .r{text-align:right}.sl-row .c{text-align:center}
.sbadge{font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600}
.sb-ok{background:rgba(26,165,93,.12);color:var(--green)}
.sb-ref{background:rgba(227,0,126,.12);color:var(--accent)}
.sb-part{background:rgba(245,158,11,.15);color:#b45309}
.sb-can{background:#eee;color:#888}
.sl-act{display:flex;gap:5px;justify-content:flex-end}
.sl-act button{width:30px;height:30px;border:1px solid var(--border);background:var(--panel2);border-radius:7px;cursor:pointer;font-size:13px}
.sl-act button:hover{border-color:var(--accent)}
.rf-list{margin:10px 0;max-height:40vh;overflow:auto}
.rf-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.rf-item.rf-done{opacity:.5}
.rf-name{display:flex;flex-direction:column;font-size:14px;font-weight:600}
.rf-name small{color:var(--muted);font-weight:400;font-size:11px}
.rf-qty{display:flex;align-items:center;gap:8px}
.rf-qty button{width:28px;height:28px;border:1px solid var(--border);background:var(--panel2);border-radius:7px;cursor:pointer;font-size:15px}
.rf-qty span{min-width:24px;text-align:center;font-weight:700}
.rf-done-tag{color:var(--green);font-weight:700}
.rf-reasons{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 10px}
.rf-reasons button{padding:7px 12px;border:1px solid var(--border);border-radius:20px;background:#fff;font-size:12px;cursor:pointer;color:var(--muted)}
.rf-reasons button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.sales-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}

/* ---------- Personel ---------- */
.stf-row{display:grid;grid-template-columns:1.4fr 1.2fr 110px 70px 120px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--border);font-size:14px}
.stf-row:last-child{border:none}
.stf-head{background:var(--panel2);font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase}
.stf-row.stf-off{opacity:.45}
.stf-row .c{text-align:center}.stf-row .r{text-align:right}
.stf-row small{color:var(--muted)}
.stf-act{display:flex;gap:5px;justify-content:flex-end}
.stf-act button{width:30px;height:30px;border:1px solid var(--border);background:var(--panel2);border-radius:7px;cursor:pointer;font-size:13px}
.stf-act button:hover{border-color:var(--accent)}
.stf-act .stf-del:hover{border-color:#e3342f;color:#e3342f}
.dot-on{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--green)}
.dot-off{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ccc}
.perm-grid{display:grid;grid-template-columns:1fr 90px 90px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--border);font-size:14px}
.perm-grid.perm-head{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase}
.perm-grid .c{text-align:center}
.perm-grid input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);cursor:pointer}
.perm-note{font-size:12px;color:var(--muted);margin:14px 0;background:var(--panel2);padding:10px;border-radius:8px}

/* ---------- Mobil mod ---------- */
#mobMode{position:fixed;inset:0;background:var(--bg);z-index:250;display:flex;flex-direction:column}
#mobQty,#mobUnk{z-index:500!important}
.mob-head{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;padding:16px 18px;display:flex;justify-content:space-between;align-items:center}
.mob-title{font-size:18px;font-weight:800}
.mob-x{background:rgba(255,255,255,.2);border:none;color:#fff;font-size:24px;width:36px;height:36px;border-radius:9px;cursor:pointer}
.mob-actions{display:flex;gap:8px;overflow-x:auto;padding:12px;background:#fff;border-bottom:1px solid var(--border)}
.mob-act{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--panel2);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.mob-act span{font-size:20px}
.mob-scan{padding:14px}
.mob-cam{position:relative;width:100%;max-width:280px;margin:0 auto;border-radius:12px;overflow:hidden;background:#000;height:200px}
.mob-cam video{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.mob-laser{position:absolute;left:10%;right:10%;top:50%;height:2px;background:#ff2d55;box-shadow:0 0 8px #ff2d55;animation:laser 1.6s ease-in-out infinite}
@keyframes laser{0%,100%{transform:translateY(-30px)}50%{transform:translateY(30px)}}
.mob-cam:empty{height:0}
.mob-scan-btns{margin:12px auto;max-width:400px}
.mob-scan-btns button{width:100%}
.mob-manual{display:flex;gap:8px;max-width:400px;margin:0 auto}
.mob-manual input{flex:1;padding:12px 14px;border:1px solid var(--border);border-radius:9px;font-size:15px}
.mob-manual input:focus{outline:none;border-color:var(--accent)}
.mob-manual button{padding:0 18px;font-size:18px}
.mob-log{flex:1;overflow:auto;padding:14px;font-size:14px}
.mob-log div{padding:10px 12px;border-bottom:1px solid var(--border);background:#fff;border-radius:8px;margin-bottom:6px}
.mob-ok{color:var(--green);font-weight:600}
.mob-err{color:var(--accent);font-weight:600}
.mob-stock{display:flex;justify-content:space-between;background:var(--panel2);border-radius:9px;padding:10px 14px;font-size:14px;margin-bottom:12px}
.qs-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.qs-act{padding:11px;border:1px solid var(--border);border-radius:9px;background:#fff;font-size:13px;font-weight:600;cursor:pointer}
.qs-act.active{background:var(--accent);color:#fff;border-color:var(--accent)}
#cust{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;text-align:center;padding:40px}
#cust.has{justify-content:flex-start;background:var(--bg);color:var(--text);padding:0}
.cs-logo{width:90px;height:90px;border-radius:22px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:44px;font-weight:900;margin-bottom:20px}
.cs-logo.sm{width:46px;height:46px;border-radius:12px;font-size:24px;margin:0}
.cs-welcome{font-size:30px;font-weight:300}
.cs-brand{font-size:60px;font-weight:900;letter-spacing:4px;margin-bottom:14px}
.cs-empty{font-size:18px;opacity:.8}
.cs-head{width:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:flex;align-items:center;gap:14px;padding:18px 30px;font-size:26px;font-weight:800;letter-spacing:2px}
.cs-list{flex:1;width:100%;overflow:auto;padding:18px 30px}
.cs-item{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--border)}
.cs-ie{font-size:34px}
.cs-in{flex:1;text-align:left;font-size:20px;font-weight:600}
.cs-in span{display:block;font-size:15px;color:var(--muted);font-weight:400;margin-top:2px}
.cs-il{font-size:22px;font-weight:800}
.cs-total{width:100%;background:#fff;border-top:3px solid var(--accent);padding:24px 30px;display:flex;justify-content:space-between;align-items:center}
.cs-tl{font-size:24px;font-weight:600;color:var(--muted)}
.cs-ta{font-size:52px;font-weight:900;color:var(--accent)}
.cs-check{width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:70px;margin-bottom:24px}
.cs-thanks{font-size:54px;font-weight:900;margin-bottom:8px}
.cs-paid{font-size:32px;font-weight:300;margin-bottom:20px}
.cs-seeyou{font-size:22px;opacity:.85}

/* mobil uyum */
@media(max-width:820px){
  .pos{grid-template-columns:1fr}
  .cart{position:fixed;inset:auto 0 0 0;max-height:55vh;border-radius:14px 14px 0 0;z-index:50}
  .sidebar{width:64px}
  .user-chip,.logout-btn{display:none}
  .cust-btn span{display:none}
  /* stok tablosu: fiyat sütununu gizle, depo/raf/toplam kalsın */
  .st-row{grid-template-columns:36px 1fr 50px 50px 50px 70px}
  .st-row .st-num:nth-child(6){display:none}
  .stock-actions{width:100%}
  .b-out,.b-pri{flex:1}
  /* satış tablosu: tarih ve kasiyer gizle */
  .sl-row{grid-template-columns:1fr 80px 90px 90px}
  .sl-row>span:nth-child(2),.sl-row>span:nth-child(3){display:none}
  /* personel tablosu: kullanıcı adı gizle */
  .stf-row{grid-template-columns:1fr 90px 60px 110px}
  .stf-row>span:nth-child(2){display:none}
}