:root{
  color-scheme:light;
  --bg:#F2F4F1;--surface:#FFFFFF;--surface-2:#F7F8F6;--ink:#17201D;--ink-2:#4A5752;--ink-3:#77837E;--line:#DCE1DD;--line-2:#C9D0CB;
  --accent:#0F6B57;--accent-ink:#FFFFFF;--accent-soft:#E2EFEA;
  --warn:#9A5F06;--warn-soft:#FBEFD8;--ok:#1C7439;--ok-soft:#E1F2E6;--bad:#B3261E;--bad-soft:#FBE5E3;--info:#2D5B99;--info-soft:#E3EBF6;
  --shadow:0 1px 2px rgba(20,32,28,.06),0 8px 24px rgba(20,32,28,.06);
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;--bg:#101513;--surface:#171F1C;--surface-2:#1D2622;--ink:#E6ECE9;--ink-2:#B2BDB8;--ink-3:#84908B;--line:#2B3632;--line-2:#3A4742;
  --accent:#4DB597;--accent-ink:#0A1411;--accent-soft:#193830;
  --warn:#E3A84B;--warn-soft:#382B12;--ok:#5EC27F;--ok-soft:#163322;--bad:#F07A70;--bad-soft:#3C1C1A;--info:#83AAE2;--info-soft:#1A2940;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14.5px;line-height:1.5}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
@media (max-width:600px){.wrap{padding-inline:16px}}
h1,h2,h3{text-wrap:balance;margin:0;line-height:1.25}
h1{font-size:24px;font-weight:700;letter-spacing:-.01em}
h2{font-size:20px;font-weight:600}
h3{font-size:15px;font-weight:600}
p{margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.lbl{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
a{color:var(--accent)}

/* giriş ekranları */
.auth{min-height:100vh;display:grid;place-items:center;padding:32px 16px}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:28px;display:grid;gap:18px}
.auth-card form{display:grid;gap:14px}
.auth-brand{display:flex;gap:12px;align-items:center}
.auth-alt{text-align:center;color:var(--ink-2);font-size:13.5px}
.linkbtn{appearance:none;border:0;background:none;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* üst bar */
.top{background:var(--surface);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:38px;height:38px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.04em;flex:none}
.b1{font-weight:700;font-size:17px;letter-spacing:-.01em}
.b2{font-size:12.5px;color:var(--ink-3)}
.who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.who .nm{font-weight:600}
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:500;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.chip.role{background:var(--accent-soft);border-color:transparent;color:var(--accent)}

/* sekmeler */
.tabs-scroll{overflow-x:auto;border-bottom:1px solid var(--line);background:var(--surface)}
.tabs{display:flex;gap:4px}
.tab{appearance:none;border:0;background:none;font:inherit;color:var(--ink-2);padding:12px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;align-items:center;gap:8px;font-weight:500}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.count{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--warn);color:var(--surface);font-size:11.5px;font-weight:700;display:inline-grid;place-items:center;font-family:var(--mono)}

main{padding-block:24px 64px;display:grid;gap:20px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:0}
.panel-h{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.panel-h p{color:var(--ink-2);margin-top:4px;max-width:65ch}
.panel-b{padding:20px;display:grid;gap:18px}
.panel-f{padding:14px 20px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 10px 10px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* formlar */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:860px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.grid4,.grid3,.grid2{grid-template-columns:1fr}}
.field{display:grid;gap:5px;min-width:0}
.field>span{font-size:12.5px;font-weight:500;color:var(--ink-2)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{
  width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:7px;padding:8px 10px;min-height:38px}
textarea{min-height:76px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
input[readonly]{background:var(--surface-2);color:var(--ink-2)}
.ro{padding:8px 10px;border-radius:7px;background:var(--surface-2);border:1px solid var(--line);min-height:38px;overflow-wrap:anywhere}

.btn{appearance:none;font:inherit;font-weight:600;border-radius:7px;padding:8px 14px;min-height:38px;cursor:pointer;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;gap:6px;justify-content:center;white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.btn.bad{color:var(--bad);border-color:var(--bad)}
.btn.ghost{border-color:transparent;background:none;color:var(--ink-2)}
.btn.ghost:hover{color:var(--ink);background:var(--surface-2)}
.btn.sm{min-height:30px;padding:4px 10px;font-size:13px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* kalemler */
.items{display:grid;gap:10px}
.item{display:grid;grid-template-columns:150px minmax(0,1.6fr) 96px 120px 36px;gap:10px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.item .newname{grid-column:2 / span 3}
@media (max-width:760px){.item{grid-template-columns:1fr 1fr}.item .prod,.item .newname{grid-column:1 / -1}.item .x{grid-column:2;justify-self:end}}
.item-no{font-family:var(--mono);font-size:12px;color:var(--ink-3)}

/* durum */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.p-warn{background:var(--warn-soft);color:var(--warn)}
.p-ok{background:var(--ok-soft);color:var(--ok)}
.p-bad{background:var(--bad-soft);color:var(--bad)}
.p-info{background:var(--info-soft);color:var(--info)}
.p-acc{background:var(--accent-soft);color:var(--accent)}
.p-mute{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
.tag-urgent{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bad)}

/* talep kartları */
.list{display:grid;gap:10px}
.card{border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.card-h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;padding:14px 16px;cursor:pointer;width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit;border-radius:9px}
.card-h:hover{background:var(--surface-2)}
.card-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--ink-2)}
.card-meta .no{color:var(--ink);font-weight:500}
.card-sum{grid-column:1 / -1;color:var(--ink);overflow-wrap:anywhere}
.card-b{border-top:1px solid var(--line);padding:16px;display:grid;gap:16px}
.card.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.step{display:grid;gap:6px;font-size:12.5px;color:var(--ink-3)}
.step .bar{height:4px;border-radius:2px;background:var(--line)}
.step.done{color:var(--ok)}.step.done .bar{background:var(--ok)}
.step.now{color:var(--warn);font-weight:600}.step.now .bar{background:var(--warn)}
.step.fail{color:var(--bad);font-weight:600}.step.fail .bar{background:var(--bad)}

.hist{display:grid;gap:8px;font-size:13px;margin:0;padding:0;list-style:none}
.hist li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px}
.hist time{color:var(--ink-3);font-family:var(--mono);font-size:12px}
@media (max-width:520px){.hist li{grid-template-columns:1fr;gap:0}}

.note{padding:10px 12px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);font-size:13.5px}
.note.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.note.bad{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
.note.info{background:var(--info-soft);border-color:transparent;color:var(--info)}
.note.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.note b{font-weight:600}
.pre{white-space:pre-wrap}
.secret{font-family:var(--mono);font-size:18px;font-weight:500;letter-spacing:.04em;color:var(--ink);background:var(--surface);border:1px dashed var(--line-2);border-radius:6px;padding:4px 10px;user-select:all}

/* satın alma */
.split{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.fbtn{appearance:none;font:inherit;font-size:13px;font-weight:500;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);padding:5px 11px;border-radius:99px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.fbtn[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.fbtn .n{font-family:var(--mono);font-size:12px;opacity:.75}
.fin{border:1px dashed var(--line-2);border-radius:9px;padding:16px;display:grid;gap:14px;background:var(--surface-2)}
.fin-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.offer{display:grid;grid-template-columns:28px minmax(0,1fr) 150px 36px;gap:8px;align-items:center}
@media (max-width:520px){.offer{grid-template-columns:28px minmax(0,1fr) 36px}.offer .amt{grid-column:2}}
.big{font-size:22px;font-weight:600;font-family:var(--mono);font-variant-numeric:tabular-nums}
.band{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px}
.chain{display:grid;gap:8px}
.chain-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;font-size:13.5px}
@media (max-width:520px){.chain-row{grid-template-columns:1fr;gap:2px}}

/* kullanıcılar */
.users td{vertical-align:middle}
.users select{min-width:170px}
.checks{display:flex;gap:12px;flex-wrap:wrap;font-size:13px}
.checks label{display:flex;gap:6px;align-items:center;cursor:pointer;white-space:nowrap}
.cat-block{display:grid;gap:8px}
.prods{display:flex;flex-wrap:wrap;gap:6px}
.prod-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border-radius:99px;border:1px solid var(--line);background:var(--surface-2);font-size:13px}
.prod-chip.custom{border-style:dashed}
.prod-chip button{appearance:none;border:0;background:none;color:var(--ink-3);cursor:pointer;border-radius:50%;width:22px;height:22px;font-size:15px;line-height:1}
.prod-chip button:hover{color:var(--bad);background:var(--bad-soft)}

.chip.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.inv{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.inv li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:8px 10px;border-radius:7px;background:var(--surface);border:1px solid var(--line)}
.inv a{font-weight:500;overflow-wrap:anywhere}
.inv li>.faint{font-size:12.5px;margin-right:auto}
.upload{position:relative;display:inline-flex}
.upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.upload input:focus-visible+.btn{outline:2px solid var(--accent);outline-offset:1px}
/* raporlar */
.rep-head{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.seg{display:flex;gap:6px}
.rep-nav{gap:4px}
.rep-label{min-width:170px;text-align:center;font-size:15px}
a.btn{text-decoration:none}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px;display:grid;gap:4px}
.tile-v{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2;overflow-wrap:anywhere}
.tile .faint{font-size:12.5px}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:28px}
.chart{margin:0;display:grid;gap:12px;min-width:0}
.chart figcaption{display:grid;gap:2px}
.chart figcaption p{font-size:12.5px}
.chart-body{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:180px auto;column-gap:8px;row-gap:6px}
.chart-y{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-block:-7px}
.chart-plot{position:relative;border-bottom:1px solid var(--line-2)}
.chart-grid{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.chart-grid i{border-top:1px dashed var(--line)}
.chart-grid i:last-child{border-top:0}
.chart-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px}
.bar-col{flex:1;height:100%;display:flex;align-items:flex-end;position:relative;outline:none;min-width:0}
.bar{width:100%;max-width:44px;margin-inline:auto;background:var(--accent);border-radius:4px 4px 0 0;transition:filter .12s}
.bar.zero{height:0}
.bar-col:hover .bar,.bar-col:focus-visible .bar{filter:brightness(1.15)}
.bar-col:hover,.bar-col:focus-visible{background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:4px}
.tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--surface);font-size:12px;padding:5px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;display:grid;gap:1px;text-align:center;z-index:2}
.tip b{font-variant-numeric:tabular-nums}
.bar-col:hover .tip,.bar-col:focus-visible .tip{opacity:1}
.bar-col:first-child .tip{left:0;transform:none}
.bar-col:last-child .tip{left:auto;right:0;transform:none}
.chart-x{grid-column:2;display:flex;gap:2px;font-size:11px;color:var(--ink-3)}
.chart-x span{flex:1;text-align:center;white-space:nowrap;overflow:visible;min-width:0}
.rep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:20px;align-items:start}
.stack{display:flex;gap:2px;height:14px;border-radius:4px;overflow:hidden}
.stack span.p-warn,.sw.p-warn{background:var(--warn)}
.stack span.p-info,.sw.p-info{background:var(--info)}
.stack span.p-ok,.sw.p-ok{background:var(--ok)}
.stack span.p-bad,.sw.p-bad{background:var(--bad)}
.stack span.p-mute,.sw.p-mute{background:var(--ink-3)}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.legend li{display:flex;align-items:center;gap:8px}
.legend b{margin-left:auto;font-weight:600}
.sw{width:10px;height:10px;border-radius:3px;flex:none}
.share{display:inline-block;width:60px;height:6px;border-radius:3px;background:var(--line);vertical-align:middle;overflow:hidden}
.share i{display:block;height:100%;background:var(--accent);border-radius:3px}
.empty{padding:28px 16px;text-align:center;color:var(--ink-3);border:1px dashed var(--line-2);border-radius:9px}

/* satın alma formu belgesi */
.overlay{position:fixed;inset:0;background:rgba(10,16,14,.55);display:grid;place-items:start center;overflow-y:auto;padding:32px 16px;z-index:20}
.doc{background:var(--surface);color:var(--ink);width:100%;max-width:820px;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:32px;display:grid;gap:22px}
@media (max-width:520px){.doc{padding:20px}}
.doc-h{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:14px}
.doc-h h2{font-size:22px;letter-spacing:.02em;text-transform:uppercase}
.doc-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px}
@media (max-width:620px){.doc-kv{grid-template-columns:1fr 1fr}}
.doc-kv div{display:grid;gap:2px}
.doc-kv b{font-weight:500}
.sign{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:620px){.sign{grid-template-columns:1fr}}
.sign>div{border-top:1px solid var(--ink);padding-top:8px;display:grid;gap:2px;font-size:13px}
.stamp{display:inline-block;border:2px solid var(--ok);color:var(--ok);padding:1px 8px;border-radius:4px;font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-2deg);justify-self:start}
.stamp.na{border-color:var(--ink-3);color:var(--ink-3)}
.doc-actions{display:flex;justify-content:flex-end;gap:10px}

#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:8px;font-weight:500;box-shadow:var(--shadow);max-width:calc(100% - 32px);z-index:30}
.boot{padding:40px 20px;color:var(--ink-3)}

@media print{
  body{background:#fff}
  body.printing #root>*:not(.overlay){display:none}
  .overlay{position:static;background:none;padding:0}
  .doc{box-shadow:none;max-width:none;padding:0}
  .doc-actions,#toast{display:none!important}
}
@media (prefers-reduced-motion:no-preference){.card-b,.panel{animation:rise .18s ease-out}@keyframes rise{from{transform:translateY(3px);opacity:.6}to{transform:none;opacity:1}}}