:root{
  --bg:#f4f5f7; --card:#fff; --text:#1d2129; --muted:#6b7280; --line:#e6e8ee; --soft:#f7f8fa;
  --accent:#f27a1a; --accent-d:#d9650a; --accent-soft:#fff1e6;
  --good:#16a34a; --good-soft:#e8f7ee; --bad:#dc2626; --bad-soft:#fdecec; --warn:#b45309; --warn-soft:#fff8e6;
  --blue:#2563eb; --blue-soft:#e8efff; --violet:#6250d6; --violet-soft:#efe9ff;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.08);
  --yan:228px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font:14px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg);-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
.num{font-variant-numeric:tabular-nums}
.sp{flex:1}

/* giriş */
#girisEkrani{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(160deg,#fff4ea,#f4f5f7 55%)}
.giris-kart{width:min(380px,100%);background:#fff;border-radius:18px;box-shadow:0 12px 40px rgba(16,24,40,.12);padding:28px 26px}
.giris-kart .logo{width:48px;height:48px;border-radius:13px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:24px;margin-bottom:14px}
.giris-kart h1{margin:0;font-size:22px}
.giris-kart p{margin:4px 0 20px;color:var(--muted);font-size:13.5px}
.alan{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.alan label{font-size:12.5px;font-weight:600;color:var(--muted)}
.alan input,.alan select,.alan textarea{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;outline:none;width:100%}
.alan input:focus,.alan select:focus,.alan textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hata{background:var(--bad-soft);color:var(--bad);border-radius:9px;padding:8px 11px;font-size:13px;margin-bottom:12px}

/* iskelet */
#uygulama{display:flex;min-height:100vh}
.yan{width:var(--yan);flex:none;background:#1d2129;color:#e7e9ee;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.yan .marka{display:flex;align-items:center;gap:10px;padding:16px 16px 18px}
.yan .marka i{width:34px;height:34px;border-radius:9px;background:var(--accent);display:grid;place-items:center;font-style:normal;font-size:17px}
.yan .marka b{display:block;font-size:15px}
.yan .marka small{color:#9aa3b5;font-size:11.5px}
.menu{display:flex;flex-direction:column;gap:2px;padding:0 9px}
.menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:#aab2c2;text-decoration:none;font-weight:600}
.menu a:hover{background:#2a3040;color:#fff}
.menu a.on{background:#353c4f;color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.menu a .r{margin-left:auto;background:var(--accent);color:#fff;border-radius:999px;font-size:11px;padding:0 7px}
.yan .alt{margin-top:auto;padding:12px 14px;border-top:1px solid #333a4b;font-size:12.5px;color:#aab2c2}
.yan .alt b{color:#fff;display:block}
.yan .alt button{background:none;border:0;color:#aab2c2;padding:3px 0;font-size:12.5px}
.yan .alt button:hover{color:#fff}
main{flex:1;min-width:0}
.ust{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:10px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ust h2{margin:0;font-size:17px}
.ust .k{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:4px 11px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.ust .k b{color:var(--text);font-size:13.5px}
.ust .k.tik{cursor:pointer}
.ust .k.tik:hover{border-color:var(--accent)}
.ust .k.kirmizi b{color:var(--bad)}
.icerik{padding:16px 20px 110px;max-width:1500px}
.alt-menu{display:none}

/* ortak */
.kart{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.pad{padding:14px 16px}
.btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 13px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-weight:600}
.btn:hover{border-color:#c9cdd6}
.btn.p{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.p:hover{background:var(--accent-d)}
.btn.sm{padding:4px 10px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:default}
.seg{display:flex;background:#e9ebef;border-radius:10px;padding:3px;overflow-x:auto}
.seg button{border:0;background:none;color:#4b5563;padding:6px 12px;border-radius:8px;font-size:13px;font-weight:600;white-space:nowrap}
.seg button.on{background:#fff;color:var(--accent-d);box-shadow:var(--shadow)}
.cubuk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.cubuk input,.cubuk select{border:1px solid var(--line);border-radius:9px;padding:7px 10px;background:#fff;outline:none;max-width:100%}
.cubuk input[type=search]{min-width:240px;flex:1}
.cubuk input:focus,.cubuk select:focus{border-color:var(--accent)}
.etk{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap;background:#eef0f4;color:#4b5563}
.etk.g{background:var(--good-soft);color:var(--good)} .etk.r{background:var(--bad-soft);color:var(--bad)}
.etk.w{background:var(--warn-soft);color:var(--warn)} .etk.b{background:var(--blue-soft);color:var(--blue)} .etk.v{background:var(--violet-soft);color:var(--violet)}
.d-yeni{background:var(--accent-soft);color:var(--accent-d)} .d-hazirlaniyor{background:var(--blue-soft);color:var(--blue)}
.d-faturalandi{background:var(--violet-soft);color:var(--violet)} .d-kargoda{background:#e0f2fe;color:#0369a1}
.d-teslim{background:var(--good-soft);color:var(--good)} .d-iptal{background:var(--bad-soft);color:var(--bad)}
.bos{text-align:center;color:var(--muted);padding:40px 10px}
.daha{text-align:center;padding:12px}
.ozetsatir{font-size:13px;color:var(--muted);margin-bottom:8px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ozetsatir b{color:var(--text)}
.lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.cp{font-size:11.5px;font-weight:600;border-radius:6px;padding:1px 7px;background:#fff;border:1px solid var(--line);white-space:nowrap;display:inline-block}
.cp.bd{background:#1d2129;color:#fff;border-color:#1d2129;font-size:12.5px;padding:1px 9px}
.cp.ds{background:var(--violet-soft);border-color:transparent;color:var(--violet)}
.cp.ad2{background:var(--bad);color:#fff;border-color:var(--bad)}
.rk{display:inline-block;width:9px;height:9px;border-radius:50%;border:1px solid rgba(0,0,0,.15);margin-right:4px;vertical-align:-1px}
.mdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--mc);margin-right:5px;vertical-align:0}
#toastlar{position:fixed;right:16px;top:68px;display:flex;flex-direction:column;gap:8px;z-index:30;max-width:calc(100vw - 32px)}
.tst{background:#fff;border:1px solid var(--line);border-left:4px solid var(--mc,var(--accent));border-radius:11px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:10px 14px;min-width:260px;animation:gir .3s ease-out;font-size:13px}
.tst b{display:block}
@keyframes gir{from{transform:translateX(30px);opacity:0}}
.modal{position:fixed;inset:0;background:rgba(15,20,30,.45);display:grid;place-items:center;z-index:25;padding:16px}
.modal .kart{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto}
.modal h3{margin:0 0 12px}
.onizle{position:fixed;z-index:28;pointer-events:none;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.3);background:#fff;padding:4px}
.onizle img{width:280px;height:400px;object-fit:cover;border-radius:9px;display:block}
table.tb{width:100%;border-collapse:collapse;font-size:13px}
.tb th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--soft);white-space:nowrap}
.tb td{padding:8px 10px;border-bottom:1px solid #f0f1f4;vertical-align:middle}
.tb td.s,.tb th.s{text-align:right;font-variant-numeric:tabular-nums}
.tablo-kap{overflow-x:auto}

/* mağaza çipleri, durum sekmeleri */
.mags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.mag{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:7px 13px;box-shadow:var(--shadow);font-weight:600}
.mag .n{font-size:12px;font-weight:700;color:var(--muted);background:var(--soft);border-radius:999px;padding:1px 8px}
.mag.on{border-color:var(--mc);box-shadow:0 0 0 2px color-mix(in srgb,var(--mc) 25%,transparent)}
.mag.off{opacity:.45}
.mag .dot{width:10px;height:10px;border-radius:50%;background:var(--mc)}
.sekme{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:12px;overflow-x:auto}
.sekme button{border:0;background:none;padding:9px 13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.sekme button b{font-weight:700;margin-left:5px;background:#eef0f4;color:#4b5563;border-radius:999px;padding:0 7px;font-size:12px}
.sekme button.on{color:var(--accent-d);border-bottom-color:var(--accent)}
.sekme button.on b{background:var(--accent);color:#fff}

/* panel: mağaza kartları */
.mkartlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:16px}
.mkart{background:#fff;border:1px solid var(--line);border-top:5px solid var(--mc);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;cursor:pointer}
.mkart:hover{box-shadow:0 6px 20px rgba(16,24,40,.1)}
.mkart h3{margin:0 0 8px;font-size:16px;display:flex;align-items:center;gap:8px}
.mkart .ana{font-size:26px;font-weight:700}
.mkart .ana small{font-size:13px;color:var(--muted);font-weight:400;margin-left:4px}
.mkart .ic{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.mkart .ic b{color:var(--text);font-size:14px}
.mkart .ic .kirmizi b{color:var(--bad)}
.mkart .sn{margin-top:10px;font-size:11.5px;color:var(--muted)}
.mkart .sn.hata{background:none;padding:0;margin-bottom:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:11px 14px}
.kpi .l{font-size:12px;color:var(--muted)} .kpi .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.kpi .h{font-size:12px;color:var(--muted)} .kpi.kirmizi .v{color:var(--bad)}
.iki{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kart h3{margin:0 0 10px;font-size:15px}
.kart h3 small{font-weight:400;color:var(--muted);font-size:12.5px;margin-left:6px}
.lej{display:flex;gap:14px;font-size:12.5px;color:var(--muted);margin:-4px 0 8px}
.lej i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.lej i.cizgi{height:2px;width:14px;border-radius:0;vertical-align:3px;background:#6b7280}
.sut{display:flex;align-items:flex-end;height:190px;gap:3px;border-bottom:1px solid #d6d9e0;position:relative;padding-left:38px}
.sut .gl{position:absolute;left:38px;right:0;border-top:1px solid #eceef2}
.sut .gl span{position:absolute;left:-38px;top:-8px;width:32px;text-align:right;font-size:11px;color:var(--muted)}
.sut .c{flex:1;height:100%;position:relative;display:flex;justify-content:center;align-items:flex-end;z-index:1}
.sut .c:hover{background:rgba(42,120,214,.06)}
.sut .c i{width:min(22px,70%);background:#2a78d6;border-radius:4px 4px 0 0;display:block}
.sut .c u{position:absolute;left:16%;right:16%;height:2px;background:#6b7280}
.xek{display:flex;gap:3px;padding-left:38px;font-size:11px;color:var(--muted);margin-top:4px}
.xek span{flex:1;text-align:center}
.yt .r{display:grid;grid-template-columns:120px 1fr 60px;gap:10px;align-items:center;font-size:13px;padding:4px 0}
.yt .r .b{height:12px} .yt .r .b i{display:block;height:100%;background:#2a78d6;border-radius:0 4px 4px 0;min-width:2px}
.yt .r .n{text-align:right;font-variant-numeric:tabular-nums}
.mini{display:inline-block;width:56px;height:6px;background:#eef0f4;border-radius:3px;margin-left:6px;vertical-align:middle;overflow:hidden}
.mini i{display:block;height:100%;background:#2a78d6}
#ipucu{position:fixed;z-index:29;background:#1d2129;color:#fff;font-size:12.5px;padding:7px 10px;border-radius:8px;pointer-events:none;white-space:pre}

/* sipariş kartı */
.sip{background:#fff;border:1px solid var(--line);border-left:4px solid var(--mc);border-radius:12px;box-shadow:var(--shadow);margin-bottom:10px;display:grid;grid-template-columns:34px 230px 1fr 160px}
.sip.sec{background:#fffaf5;border-color:#f8c79c;border-left-color:var(--mc)}
.sip.coklu{border-left-width:8px;border-left-style:double}
.sip .cb{display:flex;justify-content:center;padding-top:16px}
.sip .cb input{width:18px;height:18px;cursor:pointer;accent-color:var(--accent)}
.sip .bilgi{padding:12px 10px;border-right:1px solid #f0f1f4;font-size:12.5px;color:var(--muted);min-width:0}
.sip .bilgi .mg{font-weight:700;color:var(--mc);font-size:12px}
.sip .bilgi .no{font-weight:700;color:var(--text);font-size:14px}
.sip .bilgi .alici{color:var(--text);font-weight:600;margin-top:4px}
.sip .kal{padding:10px 12px;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start;min-width:0}
.sip .sag{padding:12px;border-left:1px solid #f0f1f4;text-align:right;font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.sip .sag .tt{font-size:16px;font-weight:700;color:var(--text)}
.sip .bant{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 12px;font-size:12.5px;font-weight:700;border-bottom:1px solid var(--line)}
.sip .bant button{border:1px solid currentColor;background:#fff;color:inherit;border-radius:7px;padding:1px 9px;font-size:12px;font-weight:700}
.bant.coklu{background:#efe9ff;color:#4c3bb5} .bant.bolunmus{background:var(--bad-soft);color:var(--bad)}
.bant.musteri{background:#fff4e5;color:#9a4a00} .bant.iade{background:#fde8f0;color:#a31d56}
.bant .ilr{width:110px;height:7px;background:#fff;border-radius:99px;overflow:hidden;border:1px solid #d9d0ff;display:inline-block;vertical-align:middle}
.bant .ilr i{display:block;height:100%;background:#6250d6}
.kl{display:flex;gap:10px;width:min(330px,100%);background:var(--soft);border-radius:10px;padding:6px;position:relative}
.kl img{width:78px;height:104px;object-fit:cover;border-radius:8px;background:#e9ebef;flex:none;cursor:zoom-in}
.kl .ad{font-size:12.5px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kl .oz{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.kl .sira{position:absolute;left:4px;top:4px;background:#1d2129;color:#fff;font-size:11px;font-weight:800;border-radius:6px;padding:1px 6px}
.kl.top{outline:2px solid var(--good);background:var(--good-soft)}
.kl .tb2{margin-top:5px;border:1px solid var(--line);background:#fff;border-radius:7px;padding:3px 9px;font-size:12px;font-weight:700;color:#4b5563}
.kl.top .tb2{background:var(--good);border-color:var(--good);color:#fff}
.sepet{display:flex;flex-direction:column;align-items:center;background:#6250d6;color:#fff;border-radius:10px;padding:5px 12px;line-height:1}
.sepet small{font-size:10px;letter-spacing:1px;opacity:.85} .sepet b{font-size:24px}
.termin{border-radius:8px;padding:4px 8px;font-size:11.5px;line-height:1.3;text-align:right;background:var(--soft)}
.termin b{display:block;font-size:12.5px}
.termin.yakin{background:var(--warn-soft);color:var(--warn)} .termin.gec{background:var(--bad-soft);color:var(--bad)} .termin.ok{background:var(--good-soft);color:var(--good)}
.bas{font-size:11.5px;color:var(--good);font-weight:600}
.toplu{position:fixed;left:calc(50% + var(--yan) / 2);transform:translateX(-50%);bottom:16px;background:#1d2129;color:#fff;border-radius:14px;padding:9px 11px 9px 16px;display:flex;align-items:center;gap:7px;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:20;flex-wrap:wrap;max-width:calc(100vw - var(--yan) - 32px)}
.toplu .btn{background:#2c313c;border-color:#3b4150;color:#fff;padding:7px 10px}
.toplu .btn:hover{background:#3b4150} .toplu .btn.p{background:var(--accent);border-color:var(--accent)}
.toplu .x{color:#9aa1ad;background:none;border:0;padding:6px}

/* ayırma, pano */
.izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.gk{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.gk .gr{display:grid;gap:2px;height:180px;background:#e9ebef}
.gk .gr img{width:100%;height:100%;object-fit:cover;min-height:0;cursor:zoom-in}
.gk .gr.n1{grid-template-columns:1fr} .gk .gr.n2{grid-template-columns:1fr 1fr}
.gk .gr.n3,.gk .gr.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr} .gk .gr.n3 img:first-child{grid-row:span 2}
.gk .ic{padding:11px 13px;display:flex;flex-direction:column;gap:8px;flex:1}
.gk .bs{font-weight:700;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gk .sy{display:flex;align-items:baseline;gap:8px;color:var(--muted);font-size:12.5px}
.gk .sy b{font-size:22px;color:var(--text)}
.bdn{display:flex;flex-wrap:wrap;gap:5px}
.bdn button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:3px 0 3px 9px;font-weight:700;font-size:12.5px;display:inline-flex;align-items:center;gap:7px}
.bdn button span{background:#1d2129;color:#fff;border-radius:0 7px 7px 0;padding:3px 8px;margin:-3px 0}
.bdn button:hover span{background:var(--accent)}
.gk .alt{display:flex;gap:6px;margin-top:auto;flex-wrap:wrap}
.pano{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.pk{background:#fff;border:1px solid var(--line);border-top:5px solid var(--mc);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.pk.tamam{border-color:var(--good);box-shadow:0 0 0 2px var(--good-soft)}
.pk .ust2{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid #f0f1f4}
.pk .ust2 .bl{flex:1;min-width:0;font-size:12.5px;color:var(--muted)} .pk .ust2 .bl b{color:var(--text)}
.pk .kalem{display:flex;gap:9px;align-items:center;padding:7px 12px;border-bottom:1px solid #f4f5f7;cursor:pointer}
.pk .kalem img{width:46px;height:60px;object-fit:cover;border-radius:7px;flex:none}
.pk .kalem .tik{width:26px;height:26px;border-radius:7px;border:2px solid #c9cdd6;flex:none;display:grid;place-items:center;font-weight:900;color:#fff}
.pk .kalem.top{background:#f3fbf6} .pk .kalem.top .tik{background:var(--good);border-color:var(--good)}
.pk .kalem .ad{flex:1;min-width:0;font-size:12.5px} .pk .kalem .ad div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk .alt2{padding:9px 12px;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;margin-top:auto}
.pk .alt2 .ilr{flex:1;height:8px;background:#eef0f4;border-radius:99px;overflow:hidden} .pk .alt2 .ilr i{display:block;height:100%;background:#6250d6}
.pk.tamam .alt2{color:var(--good)} .pk.tamam .alt2 .ilr i{background:var(--good)}
.pk .uyari{font-size:11.5px;font-weight:700;padding:4px 12px;color:var(--bad);background:var(--bad-soft)}

/* ürünler */
.uk{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:grid;grid-template-columns:120px 1fr;overflow:hidden}
.uk img{width:120px;height:100%;min-height:160px;object-fit:cover;background:#e9ebef;cursor:zoom-in}
.uk .ic{padding:10px 12px;min-width:0}
.uk .bs{font-weight:700;font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.uk .meta{font-size:12px;color:var(--muted);margin:3px 0 6px}
.uk .rakam{display:flex;gap:12px;font-size:12.5px;color:var(--muted);margin-bottom:6px;flex-wrap:wrap}
.uk .rakam b{color:var(--text)}
.vary{display:flex;flex-wrap:wrap;gap:4px}
.vary span{font-size:11.5px;border:1px solid var(--line);border-radius:6px;padding:1px 6px;white-space:nowrap}
.vary span.t{background:var(--bad-soft);border-color:#f6c9c9;color:var(--bad)} .vary span.a{background:var(--warn-soft);border-color:#f4dfb0;color:var(--warn)}
.urun-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:12px}

/* sorular */
.iki-panel{display:grid;grid-template-columns:minmax(300px,1fr) minmax(340px,1.1fr);gap:14px;align-items:start}
.liste{display:flex;flex-direction:column;gap:8px}
.sk{background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px;display:flex;gap:10px;cursor:pointer;box-shadow:var(--shadow);border-left:4px solid var(--mc)}
.sk.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.sk img{width:46px;height:58px;object-fit:cover;border-radius:7px;flex:none;background:#eef0f4}
.sk .ic{flex:1;min-width:0}
.sk .soru{font-size:13.5px;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sure{font-size:12px;color:var(--muted)} .sure.gec{color:var(--bad);font-weight:700}
.detay{position:sticky;top:70px;padding:16px 18px}
.balon{background:var(--soft);border-radius:12px;padding:10px 12px;font-size:14px;white-space:pre-wrap;margin:6px 0}
.balon.cvp{background:var(--blue-soft)}
.sabl{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.sabl button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:4px 10px;font-size:12.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sabl button:hover{border-color:var(--accent)}
textarea.cevap{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;resize:vertical;min-height:110px;outline:none}
textarea.cevap:focus{border-color:var(--accent)}
.geri{display:none}

/* barkod okutma */
.okut-satir{display:flex;gap:8px}
.okut-satir input{flex:1;font-size:22px;padding:12px 14px;border:2px solid var(--accent);border-radius:12px;outline:none;font-variant-numeric:tabular-nums;min-width:0}
#kameraKap{margin-top:10px} #kameraKap video{width:100%;max-height:320px;background:#000;border-radius:10px;display:block;margin-bottom:8px}
.b-yok{background:var(--bad-soft);color:var(--bad);font-size:16px}
.b-alarm{background:var(--bad);color:#fff;font-size:20px;font-weight:800;text-align:center;padding:12px;border-radius:10px 10px 0 0}
.b-bilgi{background:#e0f2fe;color:#0369a1;font-weight:700;padding:9px 16px}
.bsonuc .bant{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 16px;font-size:13px;font-weight:700}
.bsonuc .bant button{border:1px solid currentColor;background:#fff;color:inherit;border-radius:7px;padding:1px 9px;font-size:12px}
.b-ust{display:flex;gap:16px;padding:16px;flex-wrap:wrap}
.b-kalem{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:0 16px 16px}
.b-kalem .bk{background:var(--soft);border-radius:12px;padding:8px;position:relative;display:flex;flex-direction:column;gap:6px}
.b-kalem .bk img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:9px;background:#e9ebef}
.b-kalem .bk .ad{font-weight:700;font-size:13px}
.b-kalem .bk .oz{display:flex;gap:5px;flex-wrap:wrap}
.b-kalem .bk .cp.bd{font-size:17px;padding:2px 12px}
.b-kalem .bk .sira{position:absolute;left:12px;top:12px;background:#1d2129;color:#fff;font-weight:800;border-radius:7px;padding:2px 8px;font-size:13px}
.b-kalem .bk.top{outline:3px solid var(--good);background:var(--good-soft)}
.b-kalem .tb2{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px;font-weight:700}
.b-kalem .bk.top .tb2{background:var(--good);color:#fff;border-color:var(--good)}
.b-gecmis{display:flex;gap:12px;padding:6px 4px;border-bottom:1px solid #f0f1f4;font-size:13px;cursor:pointer}
.b-gecmis:hover{background:var(--soft)}
/* raporlar */
.kpi .h .artis{color:var(--good);font-weight:700} .kpi .h .azalis{color:var(--bad);font-weight:700}
.isi{display:grid;grid-template-columns:34px repeat(24,1fr);gap:2px;font-size:11px;color:var(--muted)}
.isi i{display:block;aspect-ratio:1.4;border-radius:3px;min-height:14px}
.isi .gs{align-self:center} .isi .hs{text-align:center}

/* telefon / tablet */
@media (max-width:1100px){
  .sip{grid-template-columns:34px 200px 1fr}
  .sip .sag{grid-column:2/-1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;border-left:0;border-top:1px solid #f0f1f4;text-align:left}
  .iki{grid-template-columns:1fr}
}
@media (max-width:860px){
  :root{--yan:0px}
  .yan{display:none}
  .alt-menu{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:22;background:#1d2129;padding:6px 4px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
  .alt-menu a{flex:1;text-align:center;color:#aab2c2;text-decoration:none;font-size:10.5px;font-weight:600;padding:4px 0;position:relative}
  .alt-menu a i{display:block;font-style:normal;font-size:19px;line-height:1.3}
  .alt-menu a.on{color:#fff}
  .alt-menu a .r{position:absolute;top:0;left:55%;background:var(--accent);color:#fff;border-radius:999px;font-size:10px;padding:0 5px}
  .ust{padding:8px 12px}
  .ust .k:not(.mobil){display:none}
  .icerik{padding:12px 12px 150px}
  .sip{grid-template-columns:30px 1fr}
  .sip .bilgi{border-right:0}
  .sip .kal{grid-column:1/-1;padding-top:0}
  .sip .sag{grid-column:1/-1}
  .kl{width:100%}
  .toplu{left:8px;right:8px;transform:none;bottom:66px;max-width:none;border-radius:12px;padding:8px}
  .toplu .btn{padding:6px 8px;font-size:12.5px}
  .iki-panel{grid-template-columns:1fr}
  .iki-panel.detayda .liste-kap{display:none}
  .iki-panel:not(.detayda) .detay{display:none}
  .detay{position:static}
  .geri{display:inline-flex}
  .b-kalem{grid-template-columns:1fr 1fr}
  .okut-satir input{font-size:18px}
  .urun-izgara{grid-template-columns:1fr}
  .uk{grid-template-columns:96px 1fr} .uk img{width:96px}
  .cubuk input[type=search]{min-width:0;width:100%}
  .cubuk{gap:6px}
  .cubuk select{flex:1 1 calc(50% - 6px);min-width:0;font-size:13px;padding:6px 8px}
  .mags{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin-bottom:8px}
  .mag{flex:none;padding:5px 10px;font-size:13px}
  .mkartlar{grid-template-columns:1fr 1fr}
  .mkart .ana{font-size:21px}
  .onizle{display:none!important}
}
@media (max-width:520px){ .mkartlar{grid-template-columns:1fr} .yt .r{grid-template-columns:90px 1fr 50px} }

/* kâr: şelale, düzenleme alanları, ülke */
.selale{display:flex;flex-direction:column;gap:7px}
.sl{display:grid;grid-template-columns:130px 1fr 110px 52px;gap:8px;align-items:center;font-size:12.5px}
.sl .b{position:relative;height:16px;background:#f4f5f7;border-radius:4px}
.sl .b i{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--good)}
.sl .b i.top{background:#2a78d6} .sl .b i.eksi{background:#e8836b}
.sl .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600} .sl .o{text-align:right;color:var(--muted);font-size:11.5px}
input.ui{border:1px solid var(--line);border-radius:7px;padding:5px 7px;text-align:right;font-variant-numeric:tabular-nums}
input.ui.degisti{background:#fff8e6;border-color:#e0a32e} input.ui.hatali{background:var(--bad-soft);border-color:var(--bad)}
.ulke{font-size:12px;font-weight:600;color:#6250d6}
@media (max-width:860px){.sl{grid-template-columns:96px 1fr 90px}.sl .o{display:none}}