/* ============================================================
   VTOL DRONE — Elektronik Sistem · HUD / Aerospace teması
   ============================================================ */
:root{
  --bg:#0a0a0a; --bg2:#0d0d0d; --panel:#141414; --panel2:#1b1714;
  --line:#262626; --line2:#3a2c18;
  --ink:#f2efe8; --ink-dim:#bdb3a4; --ink-mute:#8a7f6e;
  --cy:#ff8c1a; --cy-soft:#5a3a10;
  --amber:#ffb23f; --red:#ff5a52; --blue:#4aa8ff; --green:#56d364; --purple:#c77dff; --gray:#7d8aa0;
  --glow:0 0 0 1px rgba(255,140,26,.18), 0 8px 40px -12px rgba(255,140,26,.35);
  --radius:14px;
  --f-disp:"Chakra Petch",system-ui,sans-serif;
  --f-body:"Exo 2",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--f-body); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.5;
  background-image:
    radial-gradient(1200px 700px at 78% -8%, rgba(255,140,26,.10), transparent 60%),
    radial-gradient(1000px 600px at 8% 12%, rgba(255,140,26,.06), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(255,140,26,.05), transparent 60%),
    linear-gradient(180deg,#0a0a0a,#050505);
}
/* blueprint grid + grain overlays */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.32;
  background-image:
    linear-gradient(rgba(255,140,26,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,26,.035) 1px, transparent 1px);
  background-size:54px 54px; mask-image:radial-gradient(ellipse 100% 80% at 50% 30%, #000 45%, transparent 100%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:var(--cy);text-decoration:none}

/* ---------- HEADER ---------- */
header.hud{position:relative;z-index:3;padding:34px clamp(16px,4vw,56px) 10px;}
.kicker{font-family:var(--f-mono);font-size:12px;letter-spacing:.42em;color:var(--cy);
  text-transform:uppercase;display:flex;align-items:center;gap:12px;opacity:0;animation:fadeUp .7s .05s forwards}
.kicker::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--cy),transparent)}
h1{font-family:var(--f-disp);font-weight:700;letter-spacing:.01em;line-height:.98;
  font-size:clamp(30px,6.2vw,72px);margin:.18em 0 .1em;
  background:linear-gradient(180deg,#fff,#ffb45e 60%,#ff8c1a);
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;animation:fadeUp .8s .12s forwards}
h1 .accent{color:var(--amber);-webkit-text-fill-color:var(--amber)}
.sub{max-width:760px;color:var(--ink-dim);font-size:clamp(14px,1.5vw,17px);opacity:0;animation:fadeUp .8s .2s forwards}
.sub b{color:var(--ink)}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;opacity:0;animation:fadeUp .8s .28s forwards}
.tagrow .pill{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-dim);
  border:1px solid var(--line2);background:rgba(18,29,51,.6);padding:5px 11px;border-radius:999px}

/* ---------- LEGEND / FILTER BAR ---------- */
.legend{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:12px clamp(16px,4vw,56px);margin-top:14px;
  background:linear-gradient(180deg,rgba(7,11,20,.92),rgba(7,11,20,.55));
  backdrop-filter:blur(10px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.legend .lab{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--ink-mute);text-transform:uppercase;margin-right:4px}
.chip{cursor:pointer;user-select:none;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;
  display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line2);background:rgba(14,22,38,.7);color:var(--ink-dim);transition:.18s;white-space:nowrap}
.chip:hover{border-color:var(--c);color:var(--ink);transform:translateY(-1px)}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.chip.active{background:color-mix(in oklab,var(--c) 16%,transparent);border-color:var(--c);color:#fff;
  box-shadow:0 0 0 1px var(--c) inset, 0 0 16px -4px var(--c)}
.chip.reset{border-style:dashed}

/* ---------- STAGE ---------- */
.stage-wrap{position:relative;z-index:2;width:100%;overflow:hidden;margin:8px 0 0}
.stage-scaler{position:relative;transform-origin:top left}
.stage{position:relative;width:1560px;height:1070px}
svg.wires{position:absolute;inset:0;width:1560px;height:1070px;overflow:visible}

/* ZONE GROUP PANELS */
.zone{position:absolute;z-index:0;border:1px solid color-mix(in oklab,var(--zc) 26%,var(--line));
  border-radius:20px;background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in oklab,var(--zc) 7%,transparent), transparent 70%),
    rgba(10,16,30,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025); pointer-events:none}
.zone .zlab{position:absolute;top:0;left:20px;transform:translateY(-50%);
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--zc);background:#0a0f1b;padding:4px 13px;border:1px solid color-mix(in oklab,var(--zc) 40%,var(--line2));
  border-radius:999px;box-shadow:0 2px 10px -4px #000;white-space:nowrap}

/* WIRES — faint baseline, lit on focus/filter */
svg.wires path.wire{fill:none;stroke-linecap:round;opacity:.14;transition:opacity .28s,stroke-width .2s}
svg.wires path.wire.mech{opacity:.2}
svg.wires path.wire.hot{opacity:.92;stroke-width:3.4;filter:drop-shadow(0 0 5px currentColor)}
svg.wires path.wire.dim{opacity:.035}
svg.wires path.flow{fill:none;stroke-linecap:round;stroke-dasharray:2 15;opacity:0;transition:opacity .28s}
svg.wires path.flow.hot{opacity:.95;animation:flow 1s linear infinite}
.wirelabel{opacity:0;transition:opacity .22s;pointer-events:none}
.wirelabel.show{opacity:1}
.wirelabel text{font-family:var(--f-mono);font-size:10.5px;fill:#eaf2ff}
.wirelabel .bg{fill:rgba(7,11,20,.9)}

/* SERVO OUTPUT BREAKOUT pills */
.servo-out{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;width:138px;height:30px;
  padding:0 10px;border-radius:8px;border:1px solid var(--line2);background:rgba(12,20,36,.78);
  font-family:var(--f-mono);font-size:10.5px;color:var(--ink);white-space:nowrap;
  box-shadow:0 4px 14px -8px #000}
.servo-out .od{width:7px;height:7px;border-radius:2px;background:#56d364;box-shadow:0 0 7px #56d364;flex:none}
.servo-out .oc{margin-left:auto;color:var(--ink-mute);font-size:9px;letter-spacing:.06em}
svg.wires path.wire.ostub{opacity:.4}

/* nodes */
.node{position:absolute;z-index:2;border-radius:var(--radius);border:1px solid var(--line2);
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  box-shadow:0 10px 30px -16px #000,0 1px 0 rgba(255,255,255,.03) inset;
  cursor:pointer;overflow:hidden;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s,opacity .3s,filter .3s;
  opacity:0;transform:translateY(14px) scale(.96);will-change:transform}
.node.in{animation:nodeIn .6s cubic-bezier(.2,.85,.25,1) forwards}
.node:hover{transform:translateY(-4px) scale(1.02);border-color:var(--cat);box-shadow:0 18px 44px -18px #000,0 0 0 1px var(--cat) inset,0 0 26px -8px var(--cat);z-index:9}
.node.dim{opacity:.2;filter:saturate(.35) brightness(.85)}
.node.lit{z-index:9;border-color:var(--cat);box-shadow:0 18px 44px -18px #000,0 0 0 1px var(--cat) inset,0 0 30px -8px var(--cat)}
.node .cat-bar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--cat);box-shadow:0 0 12px var(--cat)}
.node .ph{position:relative;height:58%;background:#0a1322;display:flex;align-items:center;justify-content:center;overflow:hidden}
.node .ph::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 18%,transparent 55%,rgba(7,11,20,.6))}
.node .ph img{width:100%;height:100%;object-fit:contain;padding:9px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.node .meta{padding:8px 10px 10px}
.node .nm{font-family:var(--f-disp);font-weight:600;font-size:14px;line-height:1.05;color:#fff;letter-spacing:.01em}
.node .sb{font-family:var(--f-mono);font-size:9.5px;color:var(--cat);letter-spacing:.03em;margin-top:3px;opacity:.95;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node .corner{position:absolute;top:7px;right:8px;font-family:var(--f-mono);font-size:9px;color:var(--ink-mute);
  border:1px solid var(--line2);border-radius:5px;padding:1px 5px;background:rgba(7,11,20,.6)}
.node.hub{box-shadow:0 0 0 1px var(--amber) inset,0 22px 60px -22px #000,0 0 50px -16px var(--amber)}
.node.hub .nm{font-size:18px}
.node.hub .ph{height:60%}
.node.warn .corner{color:var(--red);border-color:rgba(255,90,82,.5)}
.cat-guc{--cat:var(--amber)} .cat-itki{--cat:var(--blue)} .cat-kontrol{--cat:var(--green)}
.cat-sensor{--cat:#ffd54a} .cat-rc{--cat:var(--purple)} .cat-beyin{--cat:var(--amber)}

/* live ping on hub */
.ping{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--green);
  top:11px;left:11px;box-shadow:0 0 10px var(--green)}
.ping::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--green);animation:ping 1.8s ease-out infinite}

/* ---------- GROUND STRIP ---------- */
.ground{position:relative;z-index:2;padding:30px clamp(16px,4vw,56px) 10px}
.ground h2,.section-h{font-family:var(--f-disp);font-size:14px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-mute);display:flex;align-items:center;gap:14px;margin:0 0 16px}
.ground h2::after,.section-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.gcard{cursor:pointer;border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--panel2));transition:.2s;display:flex;gap:12px;align-items:center;padding:10px}
.gcard:hover{transform:translateY(-3px);border-color:var(--cy);box-shadow:0 14px 30px -16px #000,0 0 22px -10px var(--cy)}
.gcard img{width:74px;height:74px;object-fit:contain;background:#0a1322;border-radius:10px;padding:6px;flex:none}
.gcard .nm{font-family:var(--f-disp);font-weight:600;font-size:14px;color:#fff}
.gcard .sb{font-family:var(--f-mono);font-size:10px;color:var(--cy);margin-top:2px}
.gcard .tg{font-size:11.5px;color:var(--ink-dim);margin-top:5px}

/* ---------- DRAWER ---------- */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(4,7,13,.62);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:.3s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;z-index:50;height:100vh;width:min(560px,94vw);
  background:linear-gradient(180deg,#0b1322,#080d18);border-left:1px solid var(--line2);
  box-shadow:-30px 0 80px -30px #000;transform:translateX(102%);transition:transform .42s cubic-bezier(.3,.9,.25,1);
  display:flex;flex-direction:column;overflow:hidden}
.drawer.open{transform:translateX(0)}
.drawer .dhead{position:relative;flex:none;border-bottom:1px solid var(--line)}
.drawer .dhero{height:200px;background:#0a1322;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.drawer .dhero::after{content:"";position:absolute;inset:0;background:
  radial-gradient(80% 60% at 50% 0%,transparent,rgba(8,13,24,.85)),
  linear-gradient(180deg,transparent 60%,#0b1322)}
.drawer .dhero img{max-width:88%;max-height:88%;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.6))}
.drawer .gthumbs{position:absolute;bottom:10px;left:14px;z-index:3;display:flex;gap:7px}
.drawer .gthumbs img{width:42px;height:42px;object-fit:contain;background:rgba(7,11,20,.7);border:1px solid var(--line2);
  border-radius:8px;padding:3px;cursor:pointer;transition:.15s}
.drawer .gthumbs img:hover{border-color:var(--cy);transform:translateY(-2px)}
.dclose{position:absolute;top:14px;right:14px;z-index:5;width:38px;height:38px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line2);background:rgba(7,11,20,.7);color:var(--ink);font-size:20px;display:grid;place-items:center;transition:.18s}
.dclose:hover{border-color:var(--red);color:var(--red);transform:rotate(90deg)}
.dtitle{padding:16px 22px 14px}
.dbadge{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid var(--dc);color:var(--dc);
  background:color-mix(in oklab,var(--dc) 14%,transparent);display:inline-block}
.dtitle h3{font-family:var(--f-disp);font-weight:700;font-size:26px;margin:12px 0 2px;color:#fff;line-height:1.05}
.dtitle .dsub{font-family:var(--f-mono);font-size:12px;color:var(--dc)}
.dtitle .dtag{color:var(--ink-dim);margin-top:8px;font-size:14px}
.dchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.dchips span{font-family:var(--f-mono);font-size:11px;color:var(--ink);border:1px solid var(--line2);
  background:rgba(18,29,51,.7);border-radius:7px;padding:4px 9px}
.dbody{overflow-y:auto;padding:6px 22px 40px;flex:1}
.dbody::-webkit-scrollbar{width:9px}.dbody::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px}
.block{margin-top:18px}
.block .bh{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cy);
  display:flex;align-items:center;gap:9px;margin-bottom:8px}
.block .bh i{font-style:normal}
.block p{margin:0;color:var(--ink-dim);font-size:14.5px}
.block.warn .bh{color:var(--red)} .block.risk .bh{color:var(--amber)} .block.therm .bh{color:#ff8a5c}
ul.flat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
ul.flat li{position:relative;padding:8px 12px 8px 30px;background:rgba(18,29,51,.45);border:1px solid var(--line);
  border-radius:9px;font-size:13.5px;color:var(--ink-dim)}
ul.flat li::before{content:"";position:absolute;left:12px;top:14px;width:7px;height:7px;border-radius:2px;background:var(--accent,var(--cy));box-shadow:0 0 7px var(--accent,var(--cy))}
.block.warn ul.flat li::before{background:var(--red);box-shadow:0 0 7px var(--red)}
.block.risk ul.flat li::before{background:var(--amber);box-shadow:0 0 7px var(--amber)}

/* QA accordion */
.qa{margin-top:10px;display:flex;flex-direction:column;gap:9px}
.qitem{border:1px solid var(--line2);border-radius:11px;overflow:hidden;background:rgba(11,19,34,.6)}
.qitem .q{cursor:pointer;padding:13px 15px;display:flex;gap:11px;align-items:flex-start;font-weight:600;
  font-size:14px;color:#fff;font-family:var(--f-body)}
.qitem .q .qi{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-family:var(--f-mono);
  font-size:12px;color:var(--bg);background:var(--cy);font-weight:700;transition:.2s}
.qitem .q .arr{margin-left:auto;color:var(--ink-mute);transition:.25s;flex:none}
.qitem.open .q .arr{transform:rotate(180deg);color:var(--cy)}
.qitem .a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--ink-dim);font-size:13.5px}
.qitem .a > div{padding:0 15px 14px 48px}
.qitem.open .a{max-height:360px}

/* hint toast */
.hint{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:30;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--ink);
  background:rgba(11,19,34,.9);border:1px solid var(--line2);border-radius:999px;padding:9px 18px;
  box-shadow:0 10px 30px -12px #000;display:flex;gap:10px;align-items:center;animation:fadeUp .6s .9s both, bob 3.4s 1.6s ease-in-out infinite}
.hint .k{color:var(--cy)}
footer{position:relative;z-index:2;padding:26px clamp(16px,4vw,56px) 60px;color:var(--ink-mute);font-size:12.5px;
  font-family:var(--f-mono);border-top:1px solid var(--line);margin-top:26px}
footer b{color:var(--ink-dim)}

/* ---------- RISK FLAG BADGES (node) ---------- */
.node .flags{position:absolute;top:7px;left:8px;z-index:4;display:flex;gap:3px}
.node .flags .flag{width:21px;height:21px;border-radius:7px;display:grid;place-items:center;font-size:12px;
  background:rgba(7,11,20,.82);border:1px solid var(--line2);box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:help;
  transition:transform .15s}
.node:hover .flags .flag{transform:translateY(-1px) scale(1.08)}
.node.hub .flags{left:auto;right:54px}
.gcard .flag.sm{font-size:12px}

/* ---------- ICON LEGEND ---------- */
.iconlegend{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  padding:11px clamp(16px,4vw,56px);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,16,32,.5),transparent)}
.iconlegend .lab{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--ink-mute);text-transform:uppercase}
.iconlegend .ileg{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-dim)}
.iconlegend .ileg .ie{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:13px;
  background:rgba(14,22,38,.8);border:1px solid var(--line2)}

/* ---------- CUBE PORT MAP ---------- */
.portMap{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(10,16,32,.5)}
.portMap .pmhead{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line2);
  background:linear-gradient(90deg,rgba(255,178,63,.10),transparent)}
.portMap .pmcount{font-family:var(--f-disp);font-weight:700;font-size:15px;color:var(--amber)}
.portMap .pmnote{font-family:var(--f-mono);font-size:11px;color:var(--ink-mute)}
.portMap table{border-collapse:collapse;width:100%;font-size:13.5px}
.portMap th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);
  text-align:left;padding:10px 16px;border-bottom:1px solid var(--line2)}
.portMap td{padding:10px 16px;border-bottom:1px solid var(--line);color:var(--ink)}
.portMap tr:last-child td{border-bottom:none}
.portMap tr:hover td{background:rgba(255,140,26,.05)}
.portMap tr.free td{color:var(--ink-mute)}
.portMap td.port{font-family:var(--f-mono);font-weight:700;color:#fff;white-space:nowrap}
.portMap tr.free td.port{color:var(--ink-mute);font-weight:500}
.portMap .pdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);margin-right:9px;vertical-align:middle}
.portMap td.mono{font-family:var(--f-mono);color:var(--ink-dim);font-size:12px}
.portMap .emptytag{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink-mute);
  border:1px solid var(--line2);border-radius:5px;padding:1px 6px;margin-right:4px}

/* ---------- CABLE REFERENCE CARDS ---------- */
.cableRef{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.cableRef .crd{border:1px solid var(--line2);border-left:4px solid var(--c);border-radius:12px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));padding:13px 15px}
.cableRef .crh{font-family:var(--f-disp);font-weight:600;font-size:14px;color:#fff;display:flex;align-items:center;gap:9px;margin-bottom:7px}
.cableRef .cdot{width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 9px var(--c)}
.cableRef p{margin:0;color:var(--ink-dim);font-size:12.8px;line-height:1.45}

/* ---------- CONNECTION LIST TABLE ---------- */
.connList{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:rgba(10,16,32,.5)}
.connList table{border-collapse:collapse;width:100%;min-width:680px;font-size:13px}
.connList th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--line2);background:rgba(14,22,38,.6)}
.connList td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:middle}
.connList tr:last-child td{border-bottom:none}
.connList tr:hover td{background:rgba(255,140,26,.05)}
.connList td.arrow,.connList td.mono{font-family:var(--f-mono);color:var(--ink-dim)}
.connList td.arrow{color:var(--cy);text-align:center;font-weight:700}
.connList .ttag{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11.5px;
  padding:3px 9px;border-radius:999px;border:1px solid var(--c);color:#fff;background:color-mix(in oklab,var(--c) 13%,transparent);white-space:nowrap}
.connList .tdot{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 7px var(--c)}

/* ---------- DRAWER FLAGS ---------- */
.dflags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.dflags .dflag{font-family:var(--f-mono);font-size:11px;color:var(--ink);border:1px solid var(--line2);
  background:rgba(7,11,20,.5);border-radius:999px;padding:4px 10px;cursor:help}

/* ---------- keyframes ---------- */
@keyframes flow{to{stroke-dashoffset:-18}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes nodeIn{to{opacity:1;transform:none}}
@keyframes ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ---------- SHOPPING / SATIN ALMA (fiyatsız) ---------- */
.shopping{display:flex;flex-direction:column;gap:16px}
.shop-legend{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-mute);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.prib{display:inline-block;font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;
  color:#08101e;background:var(--p);border-radius:5px;padding:2px 7px;box-shadow:0 0 10px -3px var(--p)}
.shop-box{border:1px solid var(--line2);border-left:4px solid var(--cy);border-radius:14px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));padding:14px 18px}
.shop-box .sbh{font-family:var(--f-disp);font-weight:600;font-size:15px;color:#fff;margin-bottom:10px}
.shop-box .sbh span{font-family:var(--f-mono);font-size:11px;color:var(--ink-mute);font-weight:400}
.shop-boxlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:7px 22px}
.shop-boxlist li{font-size:13px;color:var(--ink-dim);padding-left:14px;position:relative;line-height:1.4}
.shop-boxlist li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--cy);box-shadow:0 0 7px var(--cy)}
.shop-boxlist li b{color:#fff;font-weight:600;margin-right:6px}
.shop-boxlist li span{color:var(--ink-dim)}
.shop-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px}
.shop-grp{border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,var(--panel),var(--panel2))}
.shop-grp .sgh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line2);
  font-family:var(--f-disp);font-weight:600;font-size:14.5px;color:#fff;background:rgba(14,22,38,.5)}
.shop-grp .sgi{font-size:16px}
.shop-grp .sgc{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--ink-mute);
  border:1px solid var(--line2);border-radius:999px;padding:1px 9px}
.shop-grp table{border-collapse:collapse;width:100%;font-size:12.8px}
.shop-grp td{padding:8px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.shop-grp tr:last-child td{border-bottom:none}
.shop-grp tr:hover td{background:rgba(255,140,26,.05)}
.shop-grp td.sn{color:#fff;font-weight:500;width:42%}
.shop-grp td.sq{font-family:var(--f-mono);color:var(--cy);font-size:11.5px;white-space:nowrap}
.shop-grp td.sp{white-space:nowrap}
.shop-grp td.snote{color:var(--ink-dim);font-size:12px}
@media(max-width:520px){.shop-groups{grid-template-columns:1fr}.shop-grp td.snote{display:none}}

/* ============================================================
   APP SHELL — Sidebar · Topbar · Views   (login + siparişler)
   ============================================================ */
:root{ --topbar-h:56px; --sidebar-w:220px; }

/* ---------- LAYOUT ---------- */
body{ }
.appmain{ margin-left:var(--sidebar-w); min-height:100vh; position:relative; z-index:2; }

/* ---------- SIDEBAR ---------- */
.sidebar{
  position:fixed; top:0; left:0; width:var(--sidebar-w); height:100vh; z-index:60;
  display:flex; flex-direction:column; gap:6px; padding:16px 12px;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border-right:1px solid var(--line2);
}
.sb-brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 16px; border-bottom:1px solid var(--line); margin-bottom:10px; }
.sb-mark{ font-size:22px; color:var(--cy); text-shadow:0 0 14px var(--cy); }
.sb-kicker{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em; color:var(--ink-mute); text-transform:uppercase; }
.sb-title{ font-family:var(--f-disp); font-weight:700; font-size:16px; color:#fff; }

.sb-nav{ display:flex; flex-direction:column; gap:4px; }
.nav-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  font-family:var(--f-body); font-size:14px; font-weight:500; color:var(--ink-dim);
  background:transparent; border:1px solid transparent; border-radius:10px; padding:10px 12px; transition:.16s;
}
.nav-item .ni-ic{ width:18px; text-align:center; font-size:14px; opacity:.9; }
.nav-item:hover{ background:rgba(255,140,26,.07); color:var(--ink); }
.nav-item.active{
  color:#fff; background:color-mix(in oklab,var(--cy) 14%,transparent);
  border-color:color-mix(in oklab,var(--cy) 40%,transparent);
  box-shadow:0 0 0 1px color-mix(in oklab,var(--cy) 22%,transparent) inset;
}
.sb-spacer{ flex:1; }

.sb-user{ border-top:1px solid var(--line); padding-top:12px; }
.sbu-info{ display:flex; align-items:center; gap:10px; padding:0 4px 10px; }
.sbu-avatar{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none;
  font-family:var(--f-disp); font-weight:700; color:var(--bg);
  background:linear-gradient(135deg,var(--cy),#c25f08);
}
.sbu-label{ font-weight:600; color:#fff; font-size:13.5px; }
.sbu-role{ font-family:var(--f-mono); font-size:10px; color:var(--ink-mute); letter-spacing:.04em; }
.sb-logout{
  width:100%; cursor:pointer; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em;
  color:var(--red); background:rgba(255,90,82,.08); border:1px solid color-mix(in oklab,var(--red) 40%,transparent);
  border-radius:9px; padding:8px; transition:.16s;
}
.sb-logout:hover{ background:rgba(255,90,82,.16); color:#fff; }

/* ---------- TOPBAR ---------- */
.topbar{
  position:sticky; top:0; z-index:30; height:var(--topbar-h);
  display:flex; align-items:center; gap:14px; padding:0 clamp(16px,3vw,32px);
  background:linear-gradient(180deg,rgba(7,11,20,.94),rgba(7,11,20,.7));
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.sb-toggle{
  display:none; cursor:pointer; font-size:18px; color:var(--ink); background:transparent;
  border:1px solid var(--line2); border-radius:8px; width:38px; height:34px; line-height:1;
}
.tb-title{ font-family:var(--f-disp); font-weight:600; font-size:16px; color:#fff; }
.tb-user{ margin-left:auto; font-family:var(--f-mono); font-size:12px; color:var(--ink-dim);
  border:1px solid var(--line2); border-radius:999px; padding:5px 12px; }

/* legend sticks just under topbar */
.appmain .legend{ top:var(--topbar-h); }

/* ---------- RESPONSIVE (off-canvas under 860px) ---------- */
@media(max-width:860px){
  .appmain{ margin-left:0; }
  .sb-toggle{ display:block; }
  .sidebar{ transform:translateX(-100%); transition:transform .22s ease; box-shadow:0 0 60px rgba(0,0,0,.6); }
  body.sb-open .sidebar{ transform:translateX(0); }
  body.sb-open::after{ /* keep grain */ }
  body.sb-open .appmain::before{
    content:""; position:fixed; inset:0; z-index:55; background:rgba(3,6,12,.55); backdrop-filter:blur(1px);
  }
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-body{ display:grid; place-items:center; min-height:100vh; padding:24px; }
.login-card{
  position:relative; z-index:3; width:100%; max-width:380px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line2); border-radius:18px; padding:30px 28px 24px;
  box-shadow:var(--glow);
}
.login-brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.lb-mark{ font-size:26px; color:var(--cy); text-shadow:0 0 16px var(--cy); }
.lb-kicker{ font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; color:var(--ink-mute); text-transform:uppercase; }
.lb-title{ font-family:var(--f-disp); font-weight:700; font-size:18px; color:#fff; }
.login-h1{ font-family:var(--f-disp); font-weight:700; font-size:26px; color:#fff; margin:0 0 18px; }
.login-field{ display:block; margin-bottom:14px; }
.login-field span{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  color:var(--ink-mute); text-transform:uppercase; margin-bottom:6px; }
.login-field input{
  width:100%; font-family:var(--f-body); font-size:15px; color:var(--ink);
  background:var(--bg2); border:1px solid var(--line2); border-radius:10px; padding:11px 13px; transition:.16s;
}
.login-field input:focus{ outline:none; border-color:var(--cy);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--cy) 22%,transparent); }
.login-error{ min-height:18px; color:var(--red); font-size:13px; font-weight:500; margin:2px 0 8px; }
.login-btn{
  width:100%; cursor:pointer; font-family:var(--f-disp); font-weight:600; font-size:15px; letter-spacing:.03em;
  color:var(--bg); background:linear-gradient(135deg,var(--cy),#c25f08);
  border:none; border-radius:11px; padding:12px; transition:.16s;
}
.login-btn:hover{ filter:brightness(1.08); box-shadow:0 0 22px -6px var(--cy); }
.login-btn:active{ transform:translateY(1px); }
.login-note{ margin:18px 0 0; font-size:11.5px; line-height:1.6; color:var(--ink-mute);
  border-top:1px solid var(--line); padding-top:14px; text-align:center; }
.login-note b{ color:var(--cy); }

/* ============================================================
   SİPARİŞLER (orders dashboard) — fiyatsız
   ============================================================ */
#ordersRoot{ padding:clamp(16px,3vw,32px); }
.ord-head h2{ font-family:var(--f-disp); font-weight:700; font-size:22px; color:#fff; margin:0 0 4px; }
.ord-sub{ color:var(--ink-mute); font-size:13px; margin:0 0 20px; max-width:680px; }

.ord-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; max-width:640px; }
.ord-stat{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line2); border-left:3px solid var(--ac); border-radius:13px; padding:14px 16px;
}
.os-val{ font-family:var(--f-disp); font-weight:700; font-size:30px; color:#fff; line-height:1; }
.os-lab{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:6px; }

.ord-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; margin-bottom:18px;
  background:rgba(14,22,38,.5); border:1px solid var(--line); border-radius:13px; padding:14px; }
.ord-form input, .ord-form select{
  font-family:var(--f-body); font-size:14px; color:var(--ink);
  background:var(--bg2); border:1px solid var(--line2); border-radius:9px; padding:9px 11px;
}
.ord-form input:focus, .ord-form select:focus{ outline:none; border-color:var(--cy); }
#ordItem{ flex:2 1 180px; }
#ordQty{ flex:1 1 90px; }
#ordStatus{ flex:1 1 150px; }
#ordNote{ flex:2 1 160px; }
.ord-add{
  cursor:pointer; font-family:var(--f-disp); font-weight:600; font-size:14px; color:var(--bg);
  background:linear-gradient(135deg,var(--green),#37a34a); border:none; border-radius:9px; padding:9px 16px;
}
.ord-add:hover{ filter:brightness(1.08); }
.ord-import{
  cursor:pointer; font-family:var(--f-mono); font-size:12px; letter-spacing:.03em; color:var(--cy);
  background:rgba(255,140,26,.08); border:1px solid color-mix(in oklab,var(--cy) 40%,transparent);
  border-radius:9px; padding:9px 14px;
}
.ord-import:hover{ background:rgba(255,140,26,.16); color:#fff; }

.ord-tablewrap{ overflow-x:auto; border:1px solid var(--line2); border-radius:14px;
  background:linear-gradient(180deg,var(--panel),var(--panel2)); }
.ord-table{ border-collapse:collapse; width:100%; font-size:13px; min-width:640px; }
.ord-table th{ text-align:left; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-mute); padding:11px 14px; border-bottom:1px solid var(--line2);
  background:rgba(14,22,38,.6); }
.ord-table td{ padding:9px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.ord-table tr:last-child td{ border-bottom:none; }
.ord-table tr:hover td{ background:rgba(255,140,26,.04); }
.oc-item{ color:#fff; font-weight:500; }
.oc-qty{ font-family:var(--f-mono); color:var(--cy); font-size:12px; white-space:nowrap; }
.oc-date{ font-family:var(--f-mono); color:var(--ink-dim); font-size:11.5px; white-space:nowrap; }
.oc-note{ color:var(--ink-dim); font-size:12.5px; }
.ord-empty{ text-align:center; color:var(--ink-mute); padding:24px; font-style:italic; }

.ord-status-sel{
  font-family:var(--f-mono); font-size:11.5px; font-weight:500; color:#fff; cursor:pointer;
  background:color-mix(in oklab,var(--sc) 16%,var(--bg2)); border:1px solid var(--sc); border-radius:999px;
  padding:5px 10px; transition:.16s;
}
.ord-status-sel:focus{ outline:none; box-shadow:0 0 0 2px color-mix(in oklab,var(--sc) 35%,transparent); }
.ord-status-sel option{ background:var(--panel); color:var(--ink); }
.ord-del{
  cursor:pointer; font-size:13px; color:var(--red); line-height:1;
  background:transparent; border:1px solid color-mix(in oklab,var(--red) 35%,transparent);
  border-radius:8px; width:28px; height:28px;
}
.ord-del:hover{ background:rgba(255,90,82,.16); color:#fff; }

@media(max-width:560px){ .ord-stats{ grid-template-columns:1fr; } }

/* ---------- Siparişler: inline düzenlenebilir alanlar (9 kolon) ---------- */
.ord-table{ min-width:1040px; }
.ord-table td{ padding:5px 9px; }
.oc-in{ width:100%; min-width:64px; background:transparent; border:1px solid transparent; border-radius:7px;
  color:var(--ink); font-family:var(--f-body); font-size:12.5px; padding:5px 7px; transition:border-color .15s, background .15s, box-shadow .15s; }
.oc-in::placeholder{ color:var(--ink-mute); opacity:.55; }
.oc-in:hover{ border-color:var(--line2); }
.oc-in:focus{ outline:none; border-color:var(--cy); background:rgba(255,140,26,.06);
  box-shadow:0 0 0 2px color-mix(in oklab,var(--cy) 22%,transparent); }
.oc-item .oc-in{ color:#fff; font-weight:500; min-width:130px; }
.oc-qty .oc-in{ font-family:var(--f-mono); color:var(--cy); min-width:52px; text-align:center; }
.oc-tracking .oc-in{ font-family:var(--f-mono); color:var(--amber); min-width:90px; }
.oc-receiver .oc-in{ color:var(--green); min-width:90px; }
.oc-orderer .oc-in{ color:var(--ink); min-width:90px; }
.oc-note .oc-in{ color:var(--ink-dim); min-width:110px; }

/* ============ SİPARİŞLER v2 — fotoğraf + düzgün dropdown + düzen ============ */
#ordersRoot .ord-head h2{ font-family:var(--f-disp); font-size:24px; margin:0 0 6px; color:#fff; }
#ordersRoot .ord-sub{ color:var(--ink-dim); font-size:13px; max-width:880px; line-height:1.5; }
.ord-form{ display:flex; flex-wrap:wrap; gap:9px; margin:16px 0; }
.ord-form input, .ord-form select{ background:var(--panel2); border:1px solid var(--line2); border-radius:9px;
  color:var(--ink); font-family:var(--f-body); font-size:13px; padding:9px 12px; }
.ord-form input:focus, .ord-form select:focus{ outline:none; border-color:var(--cy); box-shadow:0 0 0 2px color-mix(in oklab,var(--cy) 22%,transparent); }
.ord-add{ cursor:pointer; background:linear-gradient(180deg,#5fe07a,#37b257); border:none; color:#06140b; font-weight:700;
  font-family:var(--f-disp); padding:9px 18px; border-radius:9px; }
.ord-add{ background:linear-gradient(180deg,#5fe07a,#37b257); }
.ord-add:hover{ filter:brightness(1.07); }

/* tablo */
.ord-tablewrap{ overflow-x:auto; border:1px solid var(--line2); border-radius:16px; background:rgba(10,16,30,.55); }
.ord-table{ border-collapse:separate; border-spacing:0; width:100%; min-width:1120px; font-size:13px; }
.ord-table thead th{ position:sticky; top:0; z-index:1; text-align:left; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute); padding:11px 12px;
  background:#0d1626; border-bottom:1px solid var(--line2); }
.ord-table td{ padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.ord-table tbody tr:hover td{ background:rgba(255,140,26,.045); }
.ord-table tbody tr:last-child td{ border-bottom:none; }

/* foto hücresi */
.oc-photo{ width:62px; }
.ord-thumb{ width:48px; height:48px; object-fit:contain; background:#0a1322; border:1px solid var(--line2);
  border-radius:10px; padding:3px; cursor:pointer; display:block; transition:.15s; }
.ord-thumb:hover{ border-color:var(--cy); transform:scale(1.04); }
.ord-thumb.empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  color:var(--ink-mute); font-size:15px; font-weight:700; border-style:dashed; line-height:1; }
.ord-thumb.empty span{ font-size:8px; font-weight:500; letter-spacing:.05em; }

/* parça hücresi: kaynak etiketi + isim + alt not */
.oc-item{ min-width:240px; }
.oc-src{ display:inline-block; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.08em; padding:1px 6px;
  border-radius:5px; margin-bottom:3px; border:1px solid var(--line2); }
.oc-src.oc-bom{ color:#7fd0ff; border-color:#27506e; } .oc-src.oc-mal{ color:#ffcf6b; border-color:#5a4626; }
.oc-src.oc-man{ color:#9fb2d0; }
.oc-in{ width:100%; background:transparent; border:1px solid transparent; border-radius:7px; color:var(--ink);
  font-family:var(--f-body); font-size:12.5px; padding:4px 7px; transition:.15s; }
.oc-in::placeholder{ color:var(--ink-mute); opacity:.5; }
.oc-in:hover{ border-color:var(--line2); }
.oc-in:focus{ outline:none; border-color:var(--cy); background:rgba(255,140,26,.06); box-shadow:0 0 0 2px color-mix(in oklab,var(--cy) 20%,transparent); }
.oc-in.big{ font-weight:600; color:#fff; font-size:13.5px; }
.oc-in.sub{ font-size:11px; color:var(--ink-dim); margin-top:1px; }
.oc-qty .oc-in{ font-family:var(--f-mono); color:var(--cy); text-align:center; min-width:50px; }
.oc-tracking .oc-in{ font-family:var(--f-mono); color:var(--amber); min-width:92px; }
.oc-receiver .oc-in{ color:var(--green); min-width:92px; }
.oc-orderer .oc-in{ min-width:92px; }
.oc-date{ font-family:var(--f-mono); color:var(--ink-mute); font-size:11px; white-space:nowrap; }

/* DURUM — sistem dropdown'u (ok'lu, renkli) */
.oc-status{ white-space:nowrap; }
.oc-status .seldot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:middle;
  box-shadow:0 0 7px currentColor; }
.ord-status-sel{ -webkit-appearance:none; appearance:none; cursor:pointer; font-family:var(--f-mono); font-size:11.5px;
  color:#fff; background:color-mix(in oklab,var(--sc) 15%,#0d1626); border:1px solid var(--sc); border-radius:999px;
  padding:6px 28px 6px 12px; min-width:138px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23cfe0f5' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; }
.ord-status-sel:focus{ outline:none; box-shadow:0 0 0 2px color-mix(in oklab,var(--sc) 35%,transparent); }
.ord-status-sel option{ background:var(--panel); color:var(--ink); }
.ord-status-sel.new{ --sc:var(--line2); min-width:150px; }

/* sil */
.ord-del{ width:28px; height:28px; border-radius:8px; cursor:pointer; border:1px solid var(--line2);
  background:rgba(255,90,82,.06); color:var(--red); font-size:13px; }
.ord-del:hover{ border-color:var(--red); background:rgba(255,90,82,.16); }

/* stat kartları */
.ord-stats{ display:flex; gap:12px; flex-wrap:wrap; margin:4px 0 2px; }
.ord-stat{ flex:1; min-width:130px; border:1px solid var(--line2); border-left:4px solid var(--ac); border-radius:13px;
  background:linear-gradient(180deg,var(--panel),var(--panel2)); padding:13px 16px; }
.ord-stat .os-val{ font-family:var(--f-disp); font-weight:700; font-size:26px; color:#fff; }
.ord-stat .os-lab{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-top:2px; }
.ord-empty{ text-align:center; color:var(--ink-mute); padding:26px; }

/* ============================================================
   SİPARİŞLER v3 — SİYAH ÜZERİNE TURUNCU tema · Manrope font
   ÖZEL dropdown (sistem <select> yok) · kategori/durum filtre · arama
   Tüm kurallar #ordersRoot altına SCOPED — şema görünümü etkilenmez
   ============================================================ */
:root{
  --or:#ff8c1a; --or2:#ffa033; --or-soft:rgba(255,140,26,.14);
  --ord-bg:#0a0a0a; --ord-surf:#111111; --ord-surf2:#161616;
  --ord-line:#262626; --ord-line2:#333333;
  --ord-ink:#f3f0ec; --ord-dim:#b8b2a8; --ord-mute:#7d7669;
  --f-ord:"Manrope",system-ui,sans-serif;
}

/* görünüm bölgesini siyahla kapla (gradient sızmasın) */
section[data-view="siparisler"]{ background:var(--ord-bg); min-height:100%; }
#ordersRoot{ font-family:var(--f-ord); color:var(--ord-ink); padding:clamp(16px,3vw,34px); position:relative; z-index:1; }

#ordersRoot .ord-head h2{ font-family:var(--f-ord); font-weight:800; letter-spacing:-.01em; font-size:26px; margin:0 0 6px; color:#fff; }
#ordersRoot .ord-head h2::after{ content:""; display:block; width:54px; height:3px; margin-top:8px; border-radius:3px;
  background:linear-gradient(90deg,var(--or),var(--or2)); }
#ordersRoot .ord-sub{ color:var(--ord-dim); font-size:13px; max-width:880px; line-height:1.55; }
#ordersRoot .ord-sub b{ color:var(--or2); font-weight:700; }

/* stat kartları */
#ordersRoot .ord-stats{ display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 6px; }
#ordersRoot .ord-stat{ flex:1; min-width:140px; border:1px solid var(--ord-line); border-left:4px solid var(--ac);
  border-radius:13px; background:linear-gradient(180deg,var(--ord-surf),var(--ord-surf2)); padding:14px 18px; }
#ordersRoot .ord-stat .os-val{ font-family:var(--f-ord); font-weight:800; font-size:28px; color:#fff; }
#ordersRoot .ord-stat .os-lab{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ord-mute); margin-top:2px; }

/* ---------- araç çubuğu: kategori + durum + arama ---------- */
.ord-toolbar{ display:flex; flex-wrap:wrap; gap:14px 18px; align-items:flex-end; margin:18px 0 6px;
  padding:14px 16px; border:1px solid var(--ord-line); border-radius:14px;
  background:linear-gradient(180deg,var(--ord-surf),#0d0d0d); }
.ord-tool{ display:flex; flex-direction:column; gap:6px; min-width:200px; }
.ord-tool.grow{ flex:1; min-width:240px; }
.ord-tlab{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ord-mute); }
.ord-slot{ display:inline-block; }

/* arama kutusu */
.ord-search{ display:flex; align-items:center; gap:8px; background:#0c0c0c; border:1px solid var(--ord-line2);
  border-radius:10px; padding:0 10px; transition:border-color .15s, box-shadow .15s; }
.ord-search:focus-within{ border-color:var(--or); box-shadow:0 0 0 3px var(--or-soft); }
.ord-search .os-ic{ color:var(--or); font-size:16px; line-height:1; }
.ord-search input{ flex:1; background:transparent; border:none; outline:none; color:var(--ord-ink);
  font-family:var(--f-ord); font-size:13.5px; padding:10px 0; }
.ord-search input::placeholder{ color:var(--ord-mute); }
.ord-search .os-clear{ border:none; background:transparent; color:var(--ord-mute); cursor:pointer; font-size:12px; padding:4px; }
.ord-search .os-clear:hover{ color:var(--or2); }

/* ---------- ekle formu ---------- */
#ordersRoot .ord-form{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin:16px 0; }
#ordersRoot .ord-form input{ background:#0c0c0c; border:1px solid var(--ord-line2); border-radius:10px;
  color:var(--ord-ink); font-family:var(--f-ord); font-size:13px; padding:10px 13px; }
#ordersRoot .ord-form input::placeholder{ color:var(--ord-mute); }
#ordersRoot .ord-form input:focus{ outline:none; border-color:var(--or); box-shadow:0 0 0 3px var(--or-soft); }
#ordersRoot .ord-add{ cursor:pointer; background:linear-gradient(180deg,var(--or2),var(--or)); border:none; color:#160a00;
  font-family:var(--f-ord); font-weight:800; font-size:13px; padding:10px 20px; border-radius:10px;
  box-shadow:0 6px 18px -8px rgba(255,140,26,.7); }
#ordersRoot .ord-add:hover{ filter:brightness(1.08); }

/* ---------- tablo ---------- */
#ordersRoot .ord-tablewrap{ overflow-x:auto; border:1px solid var(--ord-line); border-radius:16px; background:#0c0c0c; margin-top:6px; }
#ordersRoot .ord-table{ border-collapse:separate; border-spacing:0; width:100%; min-width:1180px; font-size:13px; }
#ordersRoot .ord-table thead th{ position:sticky; top:0; z-index:3; text-align:left; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--or2); padding:12px 13px;
  background:#141414; border-bottom:1px solid var(--ord-line2); }
#ordersRoot .ord-table td{ padding:8px 13px; border-bottom:1px solid var(--ord-line); vertical-align:middle; }
#ordersRoot .ord-table tbody tr:hover td{ background:rgba(255,140,26,.05); }
#ordersRoot .ord-table tbody tr:last-child td{ border-bottom:none; }

/* foto hücresi */
#ordersRoot .oc-photo{ width:62px; }
#ordersRoot .ord-thumb{ width:48px; height:48px; object-fit:contain; background:#000; border:1px solid var(--ord-line2);
  border-radius:10px; padding:3px; cursor:pointer; display:block; transition:.15s; }
#ordersRoot .ord-thumb:hover{ border-color:var(--or); transform:scale(1.05); }
#ordersRoot .ord-thumb.empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  color:var(--ord-mute); font-size:15px; font-weight:700; border-style:dashed; line-height:1; }
#ordersRoot .ord-thumb.empty span{ font-size:8px; font-weight:600; letter-spacing:.05em; }
#ordersRoot .ord-thumb.empty:hover{ color:var(--or2); }

/* parça hücresi */
#ordersRoot .oc-item{ min-width:240px; }
#ordersRoot .oc-src{ display:inline-block; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.08em; padding:1px 6px;
  border-radius:5px; margin-bottom:3px; border:1px solid var(--ord-line2); }
#ordersRoot .oc-src.oc-bom{ color:var(--or2); border-color:#4a3315; } #ordersRoot .oc-src.oc-mal{ color:#e0c07a; border-color:#473a1a; }
#ordersRoot .oc-src.oc-man{ color:var(--ord-dim); }
#ordersRoot .oc-in{ width:100%; background:transparent; border:1px solid transparent; border-radius:7px; color:var(--ord-ink);
  font-family:var(--f-ord); font-size:12.5px; padding:5px 7px; transition:.15s; }
#ordersRoot .oc-in::placeholder{ color:var(--ord-mute); opacity:.6; }
#ordersRoot .oc-in:hover{ border-color:var(--ord-line2); }
#ordersRoot .oc-in:focus{ outline:none; border-color:var(--or); background:rgba(255,140,26,.06); box-shadow:0 0 0 2px var(--or-soft); }
#ordersRoot .oc-in.big{ font-weight:700; color:#fff; font-size:13.5px; }
#ordersRoot .oc-in.sub{ font-size:11px; color:var(--ord-dim); margin-top:1px; }
#ordersRoot .oc-qty .oc-in{ font-family:var(--f-mono); color:var(--or2); text-align:center; min-width:50px; }
#ordersRoot .oc-tracking .oc-in{ font-family:var(--f-mono); color:#e0c07a; min-width:92px; }
#ordersRoot .oc-receiver .oc-in{ color:var(--green); min-width:92px; }
#ordersRoot .oc-orderer .oc-in{ min-width:92px; color:var(--ord-dim); }
#ordersRoot .oc-date{ font-family:var(--f-mono); color:var(--ord-mute); font-size:11px; white-space:nowrap; }

/* kategori etiketi (satırda) */
#ordersRoot .oc-cat{ white-space:nowrap; }
#ordersRoot .cat-tag{ display:inline-block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.04em;
  padding:3px 8px; border-radius:999px; color:var(--or2); border:1px solid #3a2a12; background:rgba(255,140,26,.07); }

/* sil */
#ordersRoot .ord-del{ width:28px; height:28px; border-radius:8px; cursor:pointer; border:1px solid var(--ord-line2);
  background:rgba(255,90,82,.06); color:var(--red); font-size:13px; }
#ordersRoot .ord-del:hover{ border-color:var(--red); background:rgba(255,90,82,.16); }

/* boş / eşleşme yok durumları */
#ordersRoot .ord-empty{ text-align:center; color:var(--ord-mute); padding:30px; font-size:13.5px; }
.ord-nomatch{ text-align:center; color:var(--ord-mute); padding:28px; font-size:13.5px; }

/* ============================================================
   ÖZEL DROPDOWN (.dd) — sistem <select> yerine div tabanlı
   ============================================================ */
.dd{ position:relative; display:inline-block; font-family:var(--f-ord); }
.dd-btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; width:100%;
  background:#0c0c0c; border:1px solid var(--ord-line2); border-radius:10px; color:var(--ord-ink);
  font-family:var(--f-ord); font-size:12.5px; font-weight:600; padding:9px 12px; transition:border-color .15s, box-shadow .15s; }
.dd-btn:hover{ border-color:var(--or); }
.dd-btn:focus-visible{ outline:none; border-color:var(--or); box-shadow:0 0 0 3px var(--or-soft); }
.dd .dd-lab{ flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dd .dd-ph{ color:var(--ord-mute); }
.dd .dd-caret{ color:var(--or2); font-size:10px; transition:transform .18s; }
.dd-btn[aria-expanded="true"] .dd-caret{ transform:rotate(180deg); }
.dd .dd-dot{ width:9px; height:9px; border-radius:50%; flex:none; box-shadow:0 0 7px currentColor; }
.dd .dd-cnt{ font-family:var(--f-mono); font-size:10px; color:var(--ord-mute); background:#1c1c1c; border-radius:999px;
  padding:1px 7px; flex:none; }

/* renkli durum butonu (satır/yeni) */
.dd.dd-row .dd-btn, .dd.dd-new .dd-btn, .dd.dd-statf.has-color .dd-btn{
  border-color:var(--sc, var(--ord-line2)); background:color-mix(in oklab, var(--sc,#222) 12%, #0c0c0c); }
.dd.dd-row, .dd.dd-statf, .dd.dd-cat{ min-width:150px; }
.dd.dd-row{ min-width:158px; }
.dd-pill .dd-btn{ border-radius:999px; }

/* menü */
/* position + koordinatlar JS'te fixed olarak atanır (taşan kapsayıcı menüyü kırpmasın) */
.dd-menu{ position:fixed; z-index:9000; width:max-content; max-width:280px;
  background:#141414; border:1px solid var(--ord-line2); border-radius:12px; padding:5px;
  box-shadow:0 16px 44px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(255,140,26,.08);
  display:none; max-height:320px; overflow:auto; }
.dd-menu.open{ display:block; animation:ddIn .14s ease; }
@keyframes ddIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.dd-opt{ display:flex; align-items:center; gap:9px; width:100%; cursor:pointer; text-align:left;
  background:transparent; border:none; border-radius:8px; color:var(--ord-ink);
  font-family:var(--f-ord); font-size:12.5px; font-weight:600; padding:8px 10px; }
.dd-opt .dd-lab{ flex:1; }
.dd-opt:hover{ background:var(--or-soft); color:#fff; }
.dd-opt.sel{ background:color-mix(in oklab, var(--or) 20%, #141414); color:#fff; }
.dd-opt.sel::after{ content:"✓"; color:var(--or2); font-size:11px; margin-left:4px; }
.dd-opt .dd-cnt{ background:#222; }

/* satır içi durum dropdownı tabloda taşmasın */
#ordersRoot .oc-status{ white-space:nowrap; }
#ordersRoot .oc-status .dd-menu{ min-width:170px; }

@media(max-width:680px){
  #ordersRoot .ord-stats{ flex-direction:column; }
  .ord-tool, .ord-tool.grow{ min-width:100%; }
}