/* ============================================================
   VTOL DRONE — SİSTEM ATLASI  ·  "Field Manual" estetiği
   Sıcak kâğıt zemin · keskin ızgara · tek turuncu sinyal vurgusu
   Bu sayfa style.css'ten SONRA yüklenir ve şema görünümünü
   tamamen yeniden giydirir. (#ordersRoot kendi temasında kalır.)
   ============================================================ */
:root{
  --paper:#eae4d8;
  --paper-2:#e3dccc;
  --card:#faf7f1;
  --card-2:#f4efe5;
  --tile:#ffffff;
  --ink:#1a1712;
  --ink-2:#544d40;
  --ink-3:#8a8173;
  --ink-4:#a89e8c;
  --rule:#d6cfbe;
  --rule-2:#c4bba4;
  --rule-3:#b3a98e;
  --accent:#ff5a1f;
  --accent-d:#d4430d;
  --accent-soft:rgba(255,90,31,.10);
  --ok:#1f9e55;

  --f-disp:"Space Grotesk",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;

  --rail:268px;
  --shadow:0 1px 2px rgba(40,33,20,.05),0 14px 34px -22px rgba(40,33,20,.35);
  --shadow-lg:0 2px 4px rgba(40,33,20,.06),0 30px 60px -28px rgba(40,33,20,.45);
}

/* category accents tuned for paper */
.cat-guc{--cat:#cf8709}.cat-itki{--cat:#2a6fdb}.cat-kontrol{--cat:#1f9e55}
.cat-sensor{--cat:#a98700}.cat-rc{--cat:#8a4fd6}.cat-beyin{--cat:#e0590f}

/* ---------- RESET-ish over old sheet ---------- */
html,body{background:var(--paper) !important;}
body{
  font-family:var(--f-body) !important; color:var(--ink) !important;
  background-image:none !important; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* fine paper grid + vignette */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:1 !important;
  background-image:
    linear-gradient(rgba(26,23,18,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,23,18,.035) 1px,transparent 1px) !important;
  background-size:30px 30px !important;
  mask-image:radial-gradient(ellipse 120% 100% at 50% 0%,#000 55%,transparent 100%) !important;
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5 !important;
  background:radial-gradient(1200px 700px at 88% -12%,rgba(255,90,31,.05),transparent 60%) !important;
  background-image:radial-gradient(1200px 700px at 88% -12%,rgba(255,90,31,.05),transparent 60%) !important;
}
a{color:var(--accent-d);}
::selection{background:var(--accent);color:#fff;}

/* ============================================================
   SIDEBAR — açık kâğıt komuta rayı
   ============================================================ */
.appmain{ margin-left:var(--rail) !important; }
.sidebar{
  width:var(--rail) !important; padding:22px 16px 18px !important; gap:3px;
  background:linear-gradient(180deg,#f3efe6,#ebe5d8) !important;
  border-right:1px solid var(--rule-2) !important; box-shadow:none !important;
}
.sidebar::after{ display:none !important; }
.sb-brand{
  align-items:center; gap:13px; padding:4px 6px 18px !important;
  border-bottom:1px solid var(--rule) !important; margin-bottom:16px;
}
.sb-brand > div{ min-width:0; }
.sb-mark{
  display:grid !important; place-items:center; flex:none;
  width:40px; height:40px; border-radius:11px; font-size:18px !important;
  color:#fff !important; text-shadow:none !important;
  background:linear-gradient(150deg,#ff7a3d,var(--accent)) !important;
  box-shadow:0 6px 16px -6px rgba(255,90,31,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.sb-kicker{
  white-space:nowrap; font-family:var(--f-mono) !important; font-size:8.5px !important;
  letter-spacing:.22em !important; line-height:1 !important; margin-bottom:6px;
  color:var(--ink-3) !important; text-transform:uppercase;
}
.sb-title{
  font-family:var(--f-disp) !important; font-weight:700 !important;
  font-size:16px !important; line-height:1.02 !important; letter-spacing:-.01em;
  color:var(--ink) !important; text-shadow:none !important;
}
.sb-nav{ gap:4px; padding-top:2px; }
.sb-nav::before{
  content:"GÖRÜNÜMLER"; display:block; font-family:var(--f-mono);
  font-size:9px; letter-spacing:.24em; color:var(--ink-4); padding:2px 11px 10px;
}
.nav-item{
  position:relative; overflow:hidden; gap:12px !important;
  padding:11px 13px !important; border-radius:10px !important;
  font-family:var(--f-body) !important; font-size:13.5px !important; font-weight:600;
  color:var(--ink-2) !important; background:transparent !important;
  border:1px solid transparent !important; transition:background .16s,color .16s,transform .16s;
}
.nav-item .ni-ic{ width:20px; font-size:15px !important; color:var(--ink-3) !important; transition:transform .16s; }
.nav-item::before{
  content:""; position:absolute; left:0; top:50%; width:3px; height:17px;
  border-radius:0 4px 4px 0; background:var(--accent); box-shadow:0 0 10px rgba(255,90,31,.5);
  transform:translateY(-50%) scaleY(0); transition:transform .22s cubic-bezier(.2,.85,.25,1);
}
.nav-item:hover{ background:rgba(26,23,18,.05) !important; color:var(--ink) !important; transform:translateX(2px); }
.nav-item:hover .ni-ic{ transform:scale(1.08); color:var(--ink-2) !important; }
.nav-item.active{
  color:var(--accent-d) !important; background:var(--accent-soft) !important;
  border-color:rgba(255,90,31,.28) !important; box-shadow:none !important;
}
.nav-item.active .ni-ic{ color:var(--accent) !important; }
.nav-item.active::before{ transform:translateY(-50%) scaleY(1); }

.sb-user{ border-top:1px solid var(--rule) !important; padding-top:14px; }
.sbu-info{
  align-items:center; gap:11px; padding:10px 11px !important;
  border:1px solid var(--rule) !important; border-radius:12px;
  background:var(--card) !important; margin-bottom:10px;
}
.sbu-avatar{
  position:relative; width:36px !important; height:36px !important; border-radius:10px !important;
  background:linear-gradient(150deg,#ff7a3d,var(--accent)) !important; color:#fff !important;
  box-shadow:0 4px 12px -5px rgba(255,90,31,.6) !important; font-family:var(--f-disp) !important;
}
.sbu-avatar::after{
  content:""; position:absolute; right:-2px; bottom:-2px; width:10px; height:10px; border-radius:50%;
  background:var(--ok); box-shadow:0 0 0 2.5px var(--card);
}
.sbu-label{ font-family:var(--f-disp) !important; font-weight:600; font-size:13.5px; color:var(--ink) !important; }
.sbu-role{ white-space:nowrap; font-family:var(--f-mono) !important; color:var(--ink-3) !important; letter-spacing:.04em; }
.sb-logout{
  border-radius:10px !important; padding:9px !important; letter-spacing:.08em !important;
  font-family:var(--f-mono) !important; color:var(--accent-d) !important;
  background:transparent !important; border:1px solid var(--rule-2) !important; transition:.16s;
}
.sb-logout:hover{ background:var(--accent-soft) !important; border-color:rgba(255,90,31,.4) !important; color:var(--accent-d) !important; }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  height:62px !important; gap:16px !important;
  background:rgba(238,228,216,.82) !important; backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--rule-2) !important;
}
.sb-toggle{ color:var(--ink) !important; border:1px solid var(--rule-2) !important; background:var(--card) !important; }
.tb-title{
  font-family:var(--f-disp) !important; font-weight:600; color:var(--ink) !important;
  white-space:nowrap; position:relative; padding-left:17px; letter-spacing:-.005em;
}
.tb-title::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:2px; background:var(--accent); transform:translateY(-50%) rotate(45deg);
}
.tb-user{
  display:inline-flex !important; align-items:center; gap:9px; margin-left:auto;
  font-family:var(--f-mono) !important; font-size:11.5px; letter-spacing:.04em;
  color:var(--ink-2) !important; padding:6px 13px !important; border-radius:999px;
  background:var(--card) !important; border:1px solid var(--rule-2) !important;
}
.tb-user::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 3px rgba(31,158,85,.16); animation:atPulse 2.6s ease-in-out infinite;
}
@keyframes atPulse{0%,100%{box-shadow:0 0 0 3px rgba(31,158,85,.16)}50%{box-shadow:0 0 0 5px rgba(31,158,85,.05)}}

/* ============================================================
   MASTHEAD (yeni)
   ============================================================ */
.mast{
  position:relative; z-index:2; padding:48px clamp(20px,4vw,60px) 30px;
  border-bottom:1px solid var(--rule-2);
}
.mast-grid{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px; align-items:end; max-width:1320px; }
.mast-kicker{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent-d); display:flex; align-items:center; gap:13px; animation:atUp .6s .05s both;
}
.mast-kicker::before{ content:""; width:30px; height:2px; background:var(--accent); }
.mast-title{
  font-family:var(--f-disp); font-weight:700; letter-spacing:-.03em; line-height:.96;
  font-size:clamp(38px,6.6vw,82px); margin:.2em 0 .26em; color:var(--ink);
  animation:atUp .7s .12s both;
}
.mast-title em{ font-style:normal; color:var(--accent); }
.mast-lede{
  max-width:620px; color:var(--ink-2); font-size:clamp(15px,1.5vw,17.5px); line-height:1.62;
  margin:0; animation:atUp .7s .2s both;
}
.mast-lede b{ color:var(--ink); font-weight:600; }
.mast-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; animation:atUp .7s .28s both; }
.mast-tags .pill{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.02em; color:var(--ink-2);
  background:var(--card); border:1px solid var(--rule-2); border-radius:999px; padding:6px 13px; transition:.16s;
}
.mast-tags .pill:hover{ border-color:var(--rule-3); color:var(--ink); transform:translateY(-1px); }

/* stats stack */
.mast-stats{
  display:grid; grid-template-columns:repeat(2,minmax(120px,1fr)); gap:1px;
  background:var(--rule-2); border:1px solid var(--rule-2); border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow); animation:atUp .7s .34s both; min-width:300px;
}
.mast-stat{ background:var(--card); padding:16px 18px 14px; }
.mast-stat .v{ font-family:var(--f-disp); font-weight:700; font-size:30px; line-height:1; color:var(--ink); letter-spacing:-.02em; }
.mast-stat .v small{ font-size:15px; color:var(--ink-3); font-weight:600; }
.mast-stat .l{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:7px; }
.mast-stat.accent .v{ color:var(--accent-d); }

@keyframes atUp{from{transform:translateY(16px)}to{transform:none}}
/* güvenli dinlenme durumu — animasyon çalışmazsa içerik yine görünür */
.mast-kicker,.mast-title,.mast-lede,.mast-tags,.mast-stats{opacity:1;}

/* ============================================================
   SLAB / BÖLÜM ÇERÇEVESİ
   ============================================================ */
.ground, .slab{ position:relative; z-index:2; padding:42px clamp(20px,4vw,60px) 0 !important; max-width:1320px; }
.slab.last{ padding-bottom:10px !important; }
.ground h2, .slab-head{
  font-family:var(--f-mono) !important; font-size:11px !important; letter-spacing:.26em !important;
  text-transform:uppercase; color:var(--ink-3) !important; display:flex; align-items:center; gap:14px; margin:0 0 20px !important;
}
.ground h2::before{
  content:""; width:9px; height:9px; flex:none; border-radius:2px; background:var(--accent);
  transform:rotate(45deg); box-shadow:none !important;
}
.ground h2::after, .slab-head::after{ content:""; flex:1; height:1px; background:var(--rule-2) !important; }
.slab-head .n{ font-family:var(--f-mono); color:var(--accent-d); }

/* ============================================================
   COMPONENT CATALOG (yeni)
   ============================================================ */
.catalog{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:16px; }
.cc{
  position:relative; cursor:pointer; background:var(--card); border:1px solid var(--rule);
  border-radius:14px; overflow:hidden; transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s;
  display:flex; flex-direction:column; box-shadow:var(--shadow);
}
.cc:hover{ transform:translateY(-4px); border-color:var(--rule-3); box-shadow:var(--shadow-lg); }
.cc-tile{ position:relative; aspect-ratio:4/3; background:var(--tile); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cc-tile img{ width:100%; height:100%; object-fit:contain; padding:16px; transition:transform .3s; }
.cc:hover .cc-tile img{ transform:scale(1.05); }
.cc-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 70%,rgba(26,23,18,.04)); pointer-events:none; }
.cc-cat{
  position:absolute; top:11px; left:11px; font-family:var(--f-mono); font-size:9px; font-weight:600;
  letter-spacing:.12em; color:#fff; background:var(--cat,#888); padding:3px 8px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.cc-flags{ position:absolute; top:9px; right:9px; display:flex; gap:4px; }
.cc-flags .fl{
  width:23px; height:23px; display:grid; place-items:center; font-size:12px; border-radius:7px;
  background:rgba(255,255,255,.92); border:1px solid var(--rule); box-shadow:0 2px 5px rgba(0,0,0,.1);
}
.cc-meta{ padding:13px 14px 15px; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:3px; flex:1; }
.cc-nm{ font-family:var(--f-disp); font-weight:600; font-size:15.5px; color:var(--ink); line-height:1.12; letter-spacing:-.01em; }
.cc-sb{ font-family:var(--f-mono); font-size:10.5px; color:var(--cat,var(--ink-3)); letter-spacing:.01em; }
.cc-tag{ font-size:12.5px; color:var(--ink-2); line-height:1.4; margin-top:5px; text-wrap:pretty; }
.cc-foot{ margin-top:auto; padding-top:11px; display:flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; color:var(--ink-4); text-transform:uppercase; }
.cc-foot .arr{ margin-left:auto; color:var(--cat,var(--ink-3)); font-size:13px; transition:transform .2s; }
.cc:hover .cc-foot .arr{ transform:translateX(3px); }

/* ============================================================
   FİLTRE ÇUBUĞU (kablo türü) + RİSK SİMGELERİ
   ============================================================ */
.maptools{ max-width:1320px; padding:0 clamp(20px,4vw,60px); position:relative; z-index:2; }
.legend{
  position:static !important; backdrop-filter:none !important; display:flex; flex-wrap:wrap; gap:9px;
  align-items:center; padding:0 0 14px !important; margin:0 !important;
  background:none !important; border:none !important; border-bottom:1px solid var(--rule-2) !important;
}
.legend .lab{ font-family:var(--f-mono) !important; font-size:10px !important; letter-spacing:.2em; color:var(--ink-3) !important; text-transform:uppercase; margin-right:4px; }
.chip{
  cursor:pointer; user-select:none; font-family:var(--f-mono) !important; font-size:11px !important;
  display:flex; align-items:center; gap:7px; padding:6px 12px !important; border-radius:999px !important;
  border:1px solid var(--rule-2) !important; background:var(--card) !important; color:var(--ink-2) !important; transition:.16s;
}
.chip:hover{ border-color:var(--c) !important; color:var(--ink) !important; transform:translateY(-1px); }
.chip .dot{ width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:none !important; }
.chip.active{
  background:color-mix(in oklab,var(--c) 14%,#fff) !important; border-color:var(--c) !important; color:var(--ink) !important;
  box-shadow:0 0 0 1px var(--c) inset !important;
}
.chip.reset{ border-style:dashed !important; }

.iconlegend{
  display:grid !important; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px;
  padding:16px 0 4px !important; background:none !important; border:none !important;
}
.iconlegend .lab{ grid-column:1/-1; font-family:var(--f-mono) !important; font-size:10px !important; letter-spacing:.22em; color:var(--ink-3) !important; text-transform:uppercase; margin-bottom:2px; }
.iconlegend .ileg{
  display:flex; align-items:center; gap:12px; padding:10px 13px; border:1px solid var(--rule);
  border-radius:11px; background:var(--card); font-size:12.5px; line-height:1.32; color:var(--ink-2);
  transition:.16s;
}
.iconlegend .ileg:hover{ border-color:var(--rule-3); transform:translateY(-2px); box-shadow:var(--shadow); }
.iconlegend .ileg .ie{ width:32px; height:32px; flex:none; font-size:15px; border-radius:9px; background:var(--card-2) !important; border:1px solid var(--rule) !important; display:grid; place-items:center; }

/* ============================================================
   STAGE / SİSTEM HARİTASI — mühendislik çizimi çerçevesi
   ============================================================ */
.stage-wrap{
  position:relative; z-index:2; margin:20px 0 0 !important;
  width:100% !important; border:1px solid var(--rule-2); border-radius:16px; overflow:hidden;
  background:
    linear-gradient(rgba(26,23,18,.045) 1px,transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg,rgba(26,23,18,.045) 1px,transparent 1px) 0 0/26px 26px,
    var(--card);
  box-shadow:var(--shadow);
}
/* corner ticks + title block */
.stage-wrap::before{
  content:"FIG. 01 — CUBE ORANGE+ MERKEZLİ BAĞLANTI HARİTASI";
  position:absolute; top:0; left:0; z-index:5; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em;
  color:var(--ink-3); background:var(--card); padding:7px 13px; border-right:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2); border-radius:0 0 10px 0;
}
.stage{ background:transparent !important; }

/* WIRES — paper-tuned visibility */
svg.wires path.wire{ opacity:.22 !important; }
svg.wires path.wire.mech{ opacity:.3 !important; }
svg.wires path.wire.hot{ opacity:1 !important; stroke-width:3.4; filter:drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
svg.wires path.wire.dim{ opacity:.06 !important; }
.wirelabel .bg{ fill:var(--ink) !important; stroke-opacity:.25 !important; }
.wirelabel text{ fill:#fff !important; }

/* ZONES */
.zone{
  border:1px dashed color-mix(in oklab,var(--zc) 50%,var(--rule-2)) !important;
  background:radial-gradient(120% 100% at 50% 0%,color-mix(in oklab,var(--zc) 8%,transparent),transparent 70%), rgba(255,255,255,.35) !important;
  box-shadow:none !important;
}
.zone .zlab{
  color:color-mix(in oklab,var(--zc) 50%,#000) !important; background:var(--card) !important;
  border:1px solid color-mix(in oklab,var(--zc) 45%,var(--rule-2)) !important; box-shadow:var(--shadow) !important;
}

/* NODES */
.node{ opacity:1 !important; }
.node{
  border:1px solid var(--rule) !important; border-radius:13px !important;
  background:var(--card) !important; box-shadow:var(--shadow) !important;
}
.node:hover{
  border-color:var(--cat) !important;
  box-shadow:0 2px 4px rgba(40,33,20,.06),0 20px 40px -20px rgba(40,33,20,.5),0 0 0 1px var(--cat) inset !important;
}
.node.lit{ border-color:var(--cat) !important; box-shadow:0 20px 40px -20px rgba(40,33,20,.5),0 0 0 1.5px var(--cat) inset !important; }
.node.dim{ opacity:.32 !important; filter:saturate(.6) !important; }
.node .cat-bar{ height:3px !important; box-shadow:none !important; }
.node .ph{ background:var(--tile) !important; height:60% !important; }
.node .ph::after{ display:none !important; }
.node .ph img{ filter:none !important; padding:11px !important; }
.node .meta{ border-top:1px solid var(--rule); }
.node .nm{ font-family:var(--f-disp) !important; color:var(--ink) !important; letter-spacing:-.01em; }
.node .sb{ color:var(--cat) !important; }
.node .corner{
  color:var(--ink-3) !important; border:1px solid var(--rule-2) !important; background:rgba(255,255,255,.85) !important;
}
.node.hub{ box-shadow:0 0 0 1.5px var(--accent) inset,0 22px 48px -22px rgba(255,90,31,.55) !important; }
.node.hub .nm{ font-size:18px; }
.node .flags .flag{ background:rgba(255,255,255,.94) !important; border:1px solid var(--rule) !important; box-shadow:0 2px 5px rgba(0,0,0,.1) !important; }
.node.warn .corner{ color:var(--accent-d) !important; border-color:rgba(255,90,31,.4) !important; }
.ping{ background:var(--ok) !important; box-shadow:0 0 8px rgba(31,158,85,.6) !important; }
.ping::after{ border-color:var(--ok) !important; }

/* SERVO OUT pills */
.servo-out{
  background:var(--card) !important; border:1px solid var(--rule-2) !important; color:var(--ink) !important;
  box-shadow:var(--shadow) !important;
}
.servo-out .oc{ color:var(--ink-3) !important; }

/* ============================================================
   PORT MAP
   ============================================================ */
.portMap, .connList{
  border:1px solid var(--rule-2) !important; border-radius:14px !important; overflow:hidden;
  background:var(--card) !important; box-shadow:var(--shadow) !important;
}
.portMap .pmhead{
  background:linear-gradient(90deg,var(--accent-soft),transparent) !important; border-bottom:1px solid var(--rule-2) !important;
}
.portMap .pmcount{ font-family:var(--f-disp) !important; color:var(--accent-d) !important; white-space:nowrap; }
.portMap .pmnote{ color:var(--ink-3) !important; }
.portMap th, .connList th{
  font-family:var(--f-mono) !important; color:var(--ink-3) !important; background:var(--card-2) !important;
  border-bottom:1px solid var(--rule-2) !important;
}
.portMap td, .connList td{ color:var(--ink) !important; border-bottom:1px solid var(--rule) !important; }
.portMap tr:hover td, .connList tr:hover td{ background:var(--accent-soft) !important; }
.portMap tr.free td{ color:var(--ink-3) !important; }
.portMap td.port{ font-family:var(--f-mono) !important; color:var(--ink) !important; }
.portMap td.mono, .connList td.mono{ font-family:var(--f-mono) !important; color:var(--ink-2) !important; }
.portMap .emptytag{ color:var(--ink-3) !important; border:1px solid var(--rule-2) !important; }
.connList td.arrow{ color:var(--accent-d) !important; }
.connList .ttag{ color:var(--ink) !important; background:color-mix(in oklab,var(--c) 13%,#fff) !important; border:1px solid var(--c) !important; }

/* ============================================================
   CABLE REFERENCE CARDS
   ============================================================ */
.cableRef .crd{
  border:1px solid var(--rule) !important; border-left:4px solid var(--c) !important; border-radius:12px !important;
  background:var(--card) !important; box-shadow:var(--shadow) !important;
}
.cableRef .crh{ font-family:var(--f-disp) !important; color:var(--ink) !important; }
.cableRef p{ color:var(--ink-2) !important; }

/* ============================================================
   GROUND CARDS
   ============================================================ */
.gcard{
  border:1px solid var(--rule) !important; border-radius:13px !important; background:var(--card) !important;
  box-shadow:var(--shadow) !important;
}
.gcard:hover{ border-color:var(--rule-3) !important; box-shadow:var(--shadow-lg) !important; }
.gcard img{ background:var(--tile) !important; border-radius:10px; }
.gcard .nm{ font-family:var(--f-disp) !important; color:var(--ink) !important; }
.gcard .sb{ color:var(--accent-d) !important; }
.gcard .tg{ color:var(--ink-2) !important; }

/* ============================================================
   DRAWER — açık panel
   ============================================================ */
.scrim{ background:rgba(40,33,20,.28) !important; backdrop-filter:blur(3px) !important; }
.drawer{
  background:var(--card) !important; border-left:1px solid var(--rule-2) !important;
  box-shadow:-30px 0 80px -30px rgba(40,33,20,.5) !important;
}
.drawer .dhead{ border-bottom:1px solid var(--rule) !important; }
.drawer .dhero{ height:220px !important; background:var(--tile) !important; }
.drawer .dhero::after{ display:none !important; }
.drawer .dhero img{ filter:none !important; }
.drawer .gthumbs img{ background:var(--card) !important; border:1px solid var(--rule-2) !important; }
.drawer .gthumbs img:hover{ border-color:var(--accent) !important; }
.dclose{
  background:var(--card) !important; border:1px solid var(--rule-2) !important; color:var(--ink) !important;
}
.dclose:hover{ border-color:var(--accent) !important; color:var(--accent-d) !important; }
.dbadge{
  color:#fff !important; background:var(--dc) !important; border:1px solid var(--dc) !important;
  font-family:var(--f-mono) !important;
}
.dtitle h3{ font-family:var(--f-disp) !important; color:var(--ink) !important; letter-spacing:-.015em; }
.dtitle .dsub{ font-family:var(--f-mono) !important; color:var(--dc) !important; }
.dtitle .dtag{ color:var(--ink-2) !important; }
.dchips span{ font-family:var(--f-mono) !important; color:var(--ink) !important; background:var(--card-2) !important; border:1px solid var(--rule-2) !important; }
.dbody::-webkit-scrollbar-thumb{ background:var(--rule-2) !important; }
.block .bh{ font-family:var(--f-mono) !important; color:var(--accent-d) !important; }
.block p{ color:var(--ink-2) !important; }
.block.warn .bh{ color:#c0392b !important; } .block.risk .bh{ color:var(--accent-d) !important; } .block.therm .bh{ color:#c2410c !important; }
ul.flat li{ background:var(--card-2) !important; border:1px solid var(--rule) !important; color:var(--ink-2) !important; }
.dflags .dflag{ color:var(--ink-2) !important; background:var(--card-2) !important; border:1px solid var(--rule-2) !important; }
.qitem{ border:1px solid var(--rule-2) !important; background:var(--card-2) !important; }
.qitem .q{ color:var(--ink) !important; font-family:var(--f-body) !important; }
.qitem .q .qi{ background:var(--accent) !important; color:#fff !important; }
.qitem .q .arr{ color:var(--ink-3) !important; }
.qitem.open .q .arr{ color:var(--accent-d) !important; }
.qitem .a{ color:var(--ink-2) !important; }

/* ============================================================
   FOOTER + HINT
   ============================================================ */
footer{
  max-width:1320px; color:var(--ink-3) !important; border-top:1px solid var(--rule-2) !important;
  font-family:var(--f-mono) !important; margin-top:46px !important;
}
footer b{ color:var(--ink-2) !important; }
.hint{
  display:none !important; /* alt ipucu balonu — her yerde gizli */
  background:var(--ink) !important; border:1px solid var(--ink) !important; color:#f3ede0 !important;
  box-shadow:0 14px 36px -16px rgba(40,33,20,.6) !important; font-family:var(--f-mono) !important;
}
.hint .k{ color:var(--accent) !important; }
.hint b{ color:#fff !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .mast-grid{ grid-template-columns:1fr; gap:30px; }
  .mast-stats{ grid-template-columns:repeat(4,1fr); }
}
@media(max-width:860px){
  .appmain{ margin-left:0 !important; }
  .sidebar{ transform:translateX(-100%); }
  body.sb-open .sidebar{ transform:translateX(0); }
  .mast-stats{ grid-template-columns:repeat(2,1fr); min-width:0; }
}
@media(max-width:520px){
  .catalog{ grid-template-columns:1fr 1fr; gap:11px; }
  .cc-meta{ padding:11px; }
}

/* ============================================================
   SİPARİŞLER — açık atlas temasına geçiş
   orders paleti (style.css'teki v3 değişkenleri) yeniden tanımlanır,
   sonra sabit-kodlanmış koyu zeminler tek tek ezilir.
   .dd-* menüleri body'ye fixed eklenir → küresel olarak ele alınır.
   ============================================================ */
:root{
  --or:#ff5a1f; --or2:#c8430f; --or-soft:rgba(255,90,31,.12);
  --ord-bg:#eae4d8; --ord-surf:#faf7f1; --ord-surf2:#f4efe5;
  --ord-line:#d6cfbe; --ord-line2:#c4bba4;
  --ord-ink:#1a1712; --ord-dim:#544d40; --ord-mute:#8a8173;
}
section[data-view="siparisler"]{ background:var(--paper) !important; }
#ordersRoot{ color:var(--ink) !important; }
#ordersRoot .ord-head h2{ color:var(--ink) !important; }
#ordersRoot .ord-sub{ color:var(--ink-2) !important; }
#ordersRoot .ord-sub b{ color:var(--or2) !important; }

/* stat kartları */
#ordersRoot .ord-stat{ background:linear-gradient(180deg,var(--card),var(--card-2)) !important; border-color:var(--rule) !important; box-shadow:var(--shadow) !important; }
#ordersRoot .ord-stat .os-val{ color:var(--ink) !important; }
#ordersRoot .ord-stat .os-lab{ color:var(--ink-3) !important; }

/* araç çubuğu + arama + form */
#ordersRoot .ord-toolbar{ background:linear-gradient(180deg,var(--card),var(--card-2)) !important; border-color:var(--rule) !important; box-shadow:var(--shadow) !important; }
#ordersRoot .ord-tlab{ color:var(--ink-3) !important; }
#ordersRoot .ord-search{ background:#fff !important; border-color:var(--rule-2) !important; }
#ordersRoot .ord-search:focus-within{ border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft) !important; }
#ordersRoot .ord-search input{ color:var(--ink) !important; }
#ordersRoot .ord-search input::placeholder{ color:var(--ink-3) !important; }
#ordersRoot .ord-search .os-ic{ color:var(--accent-d) !important; }
#ordersRoot .ord-form{ background:linear-gradient(180deg,var(--paper-2),#dbd2c0) !important; border:1px solid var(--rule-2) !important; box-shadow:var(--shadow) !important; }
#ordersRoot .ord-form input{ background:#fff !important; border-color:var(--rule-2) !important; color:var(--ink) !important; }
#ordersRoot .ord-form input::placeholder{ color:var(--ink-3) !important; }
#ordersRoot .ord-form input:focus{ border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft) !important; }
#ordersRoot .ord-add{ background:linear-gradient(180deg,#ff7a3d,var(--accent)) !important; color:#fff !important; box-shadow:0 6px 16px -8px rgba(255,90,31,.6) !important; }

/* tablo */
#ordersRoot .ord-tablewrap{ background:var(--card) !important; border-color:var(--rule-2) !important; box-shadow:var(--shadow) !important; }
#ordersRoot .ord-table thead th{ background:var(--card-2) !important; color:var(--or2) !important; border-bottom-color:var(--rule-2) !important; }
#ordersRoot .ord-table td{ border-bottom-color:var(--rule) !important; color:var(--ink) !important; }
#ordersRoot .ord-table tbody tr:hover td{ background:var(--accent-soft) !important; }

/* foto hücresi → beyaz tile */
#ordersRoot .ord-thumb{ background:var(--tile) !important; border-color:var(--rule-2) !important; }
#ordersRoot .ord-thumb.empty{ color:var(--ink-3) !important; }
#ordersRoot .ord-thumb:hover{ border-color:var(--accent) !important; }

/* parça / kaynak / kategori etiketleri */
#ordersRoot .oc-src{ border-color:var(--rule-2) !important; }
#ordersRoot .oc-src.oc-bom{ color:var(--or2) !important; }
#ordersRoot .oc-src.oc-mal{ color:#a8780f !important; }
#ordersRoot .oc-src.oc-man{ color:var(--ink-3) !important; }
#ordersRoot .cat-tag{ color:var(--or2) !important; border-color:var(--rule-2) !important; background:var(--accent-soft) !important; }

/* inline alanlar */
#ordersRoot .oc-in{ color:var(--ink) !important; }
#ordersRoot .oc-in::placeholder{ color:var(--ink-3) !important; }
#ordersRoot .oc-in:hover{ border-color:var(--rule-2) !important; }
#ordersRoot .oc-in:focus{ border-color:var(--accent) !important; background:var(--accent-soft) !important; box-shadow:0 0 0 2px var(--accent-soft) !important; }
#ordersRoot .oc-in.big{ color:var(--ink) !important; }
#ordersRoot .oc-in.sub{ color:var(--ink-2) !important; }
#ordersRoot .oc-qty .oc-in{ color:var(--or2) !important; }
#ordersRoot .oc-tracking .oc-in{ color:#a8780f !important; }
#ordersRoot .oc-receiver .oc-in{ color:var(--ok) !important; }
#ordersRoot .oc-orderer .oc-in{ color:var(--ink-2) !important; }
#ordersRoot .oc-date{ color:var(--ink-3) !important; }

/* sil + boş durumlar */
#ordersRoot .ord-del{ border-color:var(--rule-2) !important; }
#ordersRoot .ord-empty, .ord-nomatch{ color:var(--ink-3) !important; }

/* ÖZEL DROPDOWN (.dd*) — body'ye fixed eklenir, küresel ez */
.dd-btn{ background:#fff !important; border-color:var(--rule-2) !important; color:var(--ink) !important; }
.dd-btn:hover{ border-color:var(--accent) !important; }
.dd .dd-ph{ color:var(--ink-3) !important; }
.dd .dd-caret{ color:var(--or2) !important; }
.dd .dd-cnt{ background:var(--card-2) !important; color:var(--ink-3) !important; }
.dd .dd-dot{ box-shadow:none !important; }
.dd.dd-row .dd-btn, .dd.dd-new .dd-btn, .dd.dd-statf.has-color .dd-btn{
  background:color-mix(in oklab,var(--sc,#999) 14%,#fff) !important; color:var(--ink) !important; }
.dd-menu{ background:var(--card) !important; border-color:var(--rule-2) !important; box-shadow:var(--shadow-lg) !important; }
.dd-opt{ color:var(--ink) !important; }
.dd-opt:hover{ background:var(--accent-soft) !important; color:var(--ink) !important; }
.dd-opt.sel{ background:color-mix(in oklab,var(--accent) 15%,#fff) !important; color:var(--ink) !important; }
.dd-opt.sel::after{ color:var(--accent-d) !important; }
.dd-opt .dd-cnt{ background:var(--card-2) !important; }

/* ============================================================
   LOGIN — açık atlas teması (login.html artık atlas.css yükler)
   ============================================================ */
.login-body{ background:radial-gradient(1100px 560px at 50% -8%, #f2ece0, var(--paper)) !important; color:var(--ink) !important; }
.login-card{
  background:var(--card) !important; border:1px solid var(--rule-2) !important;
  box-shadow:var(--shadow-lg) !important; border-radius:18px !important;
}
.lb-mark{
  display:grid !important; place-items:center; width:44px; height:44px; border-radius:13px;
  font-size:20px !important; color:#fff !important; text-shadow:none !important;
  background:linear-gradient(150deg,#ff7a3d,var(--accent)) !important;
  box-shadow:0 6px 16px -6px rgba(255,90,31,.6);
}
.lb-kicker{ font-family:var(--f-mono) !important; color:var(--ink-3) !important; }
.lb-title{ font-family:var(--f-disp) !important; font-weight:700; color:var(--ink) !important; }
.login-h1{ font-family:var(--f-disp) !important; font-weight:700; color:var(--ink) !important; letter-spacing:-.02em; }
.login-field span{ font-family:var(--f-mono) !important; color:var(--ink-3) !important; }
.login-field input{
  background:#fff !important; border:1px solid var(--rule-2) !important; color:var(--ink) !important;
  font-family:var(--f-body) !important;
}
.login-field input:focus{ border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft) !important; }
.login-error{ color:#c0392b !important; }
.login-btn{
  font-family:var(--f-disp) !important; color:#fff !important;
  background:linear-gradient(150deg,#ff7a3d,var(--accent)) !important;
}
.login-btn:hover{ box-shadow:0 10px 26px -8px rgba(255,90,31,.6) !important; filter:brightness(1.03); }
.login-note{ color:var(--ink-3) !important; border-top:1px solid var(--rule) !important; }
.login-note b{ color:var(--accent-d) !important; }

/* ============================================================
   EDİTÖR — düzenle modu, alt araç çubuğu, sürükleme, ekleme modalı
   (paper teması; tüm renkler atlas değişkenlerinden)
   ============================================================ */
/* topbar düzenle butonu */
.tb-edit{
  font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:.03em;
  color:var(--accent-d); background:var(--card); border:1px solid var(--rule-2);
  border-radius:9px; padding:7px 13px; cursor:pointer; margin-left:auto; white-space:nowrap;
}
.tb-edit:hover{ background:var(--accent-soft); border-color:var(--accent); }
body.editing .tb-edit{ background:linear-gradient(150deg,#ff7a3d,var(--accent)); color:#fff; border-color:transparent; }

/* düzenleme modunda node'lar sürüklenebilir */
body.editing .node{ cursor:grab; }
body.editing .node:hover{ box-shadow:0 0 0 2px var(--accent) inset, var(--shadow-lg); }
body.editing .node.dragging{ cursor:grabbing; z-index:50; box-shadow:0 0 0 2px var(--accent-d) inset, 0 18px 40px -16px rgba(40,33,20,.5); }
body.dragging-node{ user-select:none; cursor:grabbing; }
.node.custom .cat-bar{ background:linear-gradient(90deg,#ff7a3d,var(--accent)) !important; }

/* yeni eklenen katalog kartı rozet */
.cc.custom .cc-tile::before{
  content:"YENİ"; position:absolute; top:8px; left:8px; z-index:3;
  font-family:var(--f-mono); font-size:9px; font-weight:700; letter-spacing:.08em;
  color:#fff; background:var(--accent); padding:2px 7px; border-radius:6px;
}

/* alt araç çubuğu */
.edit-bar{
  position:fixed; left:var(--rail); right:0; bottom:0; z-index:120;
  display:none; align-items:center; gap:12px; padding:12px 22px;
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border-top:1px solid var(--rule-2); box-shadow:0 -10px 30px -18px rgba(40,33,20,.5);
}
body.editing .edit-bar{ display:flex; }
.edit-bar .eb-hint{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); }
.edit-bar .eb-grow{ flex:1; }
.edit-bar .eb-status{ font-family:var(--f-mono); font-size:12px; color:var(--accent-d); min-width:90px; text-align:right; }
.eb-btn{
  font-family:var(--f-disp); font-size:13px; font-weight:600; cursor:pointer;
  border-radius:9px; padding:9px 16px; border:1px solid var(--rule-2); background:var(--tile); color:var(--ink);
}
.eb-btn.add{ color:var(--accent-d); border-color:var(--accent); background:var(--accent-soft); }
.eb-btn.add:hover{ background:#fff; }
.eb-btn.ghost{ background:transparent; color:var(--ink-3); }
.eb-btn.ghost:hover{ color:var(--ink); border-color:var(--rule-3); }
.eb-btn.save{ background:linear-gradient(150deg,#ff7a3d,var(--accent)); color:#fff; border-color:transparent; }
.eb-btn.save.hot{ box-shadow:0 8px 20px -8px rgba(255,90,31,.7); animation:ebpulse 1.6s ease-in-out infinite; }
@keyframes ebpulse{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.12);} }
.eb-btn:disabled{ opacity:.5; cursor:default; }

@media (max-width:980px){ .edit-bar{ left:0; padding:10px 14px; gap:8px; flex-wrap:wrap; } .edit-bar .eb-hint{ display:none; } }

/* ekleme modalı */
.ed-modal{ position:fixed; inset:0; z-index:240; display:none; }
.ed-modal.open{ display:block; }
.ed-scrim{ position:absolute; inset:0; background:rgba(40,33,20,.42); backdrop-filter:blur(2px); }
.ed-panel{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(720px,94vw); max-height:90vh; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--rule-2); border-radius:18px;
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.ed-phead{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--rule); }
.ed-phead h3{ margin:0; font-family:var(--f-disp); font-weight:700; color:var(--ink); font-size:18px; }
.ed-x{ border:none; background:none; font-size:24px; line-height:1; color:var(--ink-3); cursor:pointer; }
.ed-x:hover{ color:var(--accent-d); }
.ed-pbody{ padding:18px 20px; overflow:auto; display:flex; flex-direction:column; gap:13px; }
.ed-grid{ display:flex; gap:12px; flex-wrap:wrap; }
.ed-f{ display:flex; flex-direction:column; gap:5px; flex:1 1 160px; }
.ed-f.grow{ flex:2 1 240px; }
.ed-f > span{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.ed-f input, .ed-f select, .ed-f textarea{
  font-family:var(--f-body); font-size:14px; color:var(--ink);
  background:#fff; border:1px solid var(--rule-2); border-radius:9px; padding:9px 11px; width:100%;
}
.ed-f textarea{ resize:vertical; }
.ed-f input:focus, .ed-f select:focus, .ed-f textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.ed-flags-row{ display:flex; flex-direction:column; gap:6px; }
.ed-lab, .ed-sech > span{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.ed-flags{ display:flex; flex-wrap:wrap; gap:8px 14px; }
.ed-flag{ font-family:var(--f-body); font-size:13px; color:var(--ink-2); display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.ed-sec{ border:1px dashed var(--rule-2); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:9px; }
.ed-sech{ display:flex; align-items:center; justify-content:space-between; }
.ed-add-row{ font-family:var(--f-mono); font-size:11px; color:var(--accent-d); background:var(--accent-soft); border:1px solid var(--accent); border-radius:7px; padding:4px 9px; cursor:pointer; }
.ed-add-row:hover{ background:#fff; }
.ed-conn, .ed-qa{ display:flex; gap:8px; align-items:center; }
.ed-conn .ec-target, .ed-conn .ec-cable{ font-family:var(--f-body); font-size:13px; color:var(--ink); background:#fff; border:1px solid var(--rule-2); border-radius:8px; padding:7px 9px; }
.ed-conn .ec-target{ flex:1.4; min-width:0; }
.ed-conn .ec-cable{ flex:1; min-width:0; }
.ed-conn .ec-label, .ed-qa .eq-q, .ed-qa .eq-a{ flex:1; min-width:0; font-family:var(--f-body); font-size:13px; color:var(--ink); background:#fff; border:1px solid var(--rule-2); border-radius:8px; padding:7px 9px; }
.ec-del{ flex:none; width:30px; height:30px; border-radius:8px; border:1px solid var(--rule-2); background:var(--card-2); color:var(--ink-3); cursor:pointer; font-size:16px; line-height:1; }
.ec-del:hover{ color:#c0392b; border-color:#c0392b; }
.ed-pfoot{ display:flex; align-items:center; gap:10px; padding:14px 20px; border-top:1px solid var(--rule); }
.ed-pfoot .ed-err{ flex:1; color:#c0392b; font-family:var(--f-mono); font-size:12px; }

/* ---- editör v2: toggle konumu, zone & board düzenleme ---- */
/* düzenle butonu şema harita başlığının yanında (topbar'da değil) */
/* FIX: overflow:hidden floated butonların üstünü kesiyordu → visible + flex.
   .ground h2 zaten flex (satır 226) ama burada overflow:hidden ile eziliyordu;
   visible yap, flex/hizalama özelliklerini garanti et. */
.ground h2{ overflow:visible; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tb-edit.schema-edit, .tb-edit.cat-add{ float:none; margin:-3px 0 0 auto; }
.tb-edit.cat-add{ color:var(--accent-d); margin-left:10px; }

/* zone düzenleme modu */
body.editing .zone{ cursor:grab; }
body.editing .zone:hover{ outline:2px dashed var(--accent); outline-offset:-1px; }
body.editing .zone.dragging{ cursor:grabbing; outline:2px solid var(--accent-d); z-index:1 !important; }
/* zone yeniden boyutlandırma tutamacı */
.zone-rs{ display:none; position:absolute; right:-6px; bottom:-6px; width:15px; height:15px;
  background:var(--accent); border:2px solid #fff; border-radius:3px; cursor:nwse-resize; z-index:4;
  box-shadow:0 2px 6px -1px rgba(40,33,20,.5); }
body.editing .zone-rs{ display:block; }
/* zone sil (sadece custom) */
.zone-del{ display:none; position:absolute; top:-10px; right:-10px; width:22px; height:22px;
  align-items:center; justify-content:center; font-size:15px; line-height:1; color:#fff;
  background:#c0392b; border:2px solid #fff; border-radius:50%; cursor:pointer; z-index:5;
  box-shadow:0 2px 6px -1px rgba(40,33,20,.5); }
body.editing .zone.custom .zone-del{ display:flex; }

/* board (figür ekranı) yeniden boyutlandırma tutamacı */
.board-rs{ display:none; position:absolute; right:8px; bottom:8px; width:20px; height:20px;
  background:var(--accent-d); border:2px solid #fff; border-radius:5px; cursor:nwse-resize; z-index:45;
  box-shadow:0 3px 9px -2px rgba(40,33,20,.6); }
.board-rs::after{ content:"⤡"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:13px; }
body.editing .board-rs{ display:block; }

/* + Bölge butonu */
.eb-btn.add2{ color:#8a4fd6; border-color:#c9a9ee; background:rgba(138,79,214,.10); }
.eb-btn.add2:hover{ background:#fff; }

/* FIX: kablo SVG katmanı dekoratif — pointer olaylarını yakalamasın ki
   altındaki zone'lar (taşı/boyutlandır/sil tutamaçları) tıklanabilsin.
   Node'lar svg'nin üstünde olduğundan etkilenmez. */
svg.wires{ pointer-events:none !important; }

/* FIX-2: .zone normalde pointer-events:none (dekoratif). Edit modunda AÇ ki
   zone'lar sürüklenip boyutlandırılabilsin. Node'lar zone'un üstünde olduğundan
   (DOM'da sonra) boş zone alanı→zone, node üstü→node olarak doğru çalışır. */
body.editing .zone{ pointer-events:auto !important; }
body.editing .zone .zlab{ pointer-events:auto; }
body.editing .zone .zone-rs, body.editing .zone .zone-del{ pointer-events:auto; }

/* ---- bölge adı düzenle butonu (✎) ---- */
.zone-edit{ display:none; position:absolute; top:-11px; right:-11px; width:22px; height:22px;
  align-items:center; justify-content:center; font-size:12px; line-height:1; color:#fff;
  background:var(--accent); border:2px solid #fff; border-radius:50%; cursor:pointer; z-index:5;
  box-shadow:0 2px 6px -1px rgba(40,33,20,.5); }
body.editing .zone-edit{ display:flex; }
.zone.custom .zone-edit{ right:18px; }      /* custom'da sil butonuna yer aç */
.zone.custom .zone-del{ right:-11px; }

/* ---- ÖZEL dialog (prompt/confirm yerine) ---- */
.dz-dialog{ position:fixed; inset:0; z-index:300; opacity:0; transition:opacity .15s; }
.dz-dialog.open{ opacity:1; }
.dz-dialog .dzd-scrim{ position:absolute; inset:0; background:rgba(40,33,20,.45); backdrop-filter:blur(2px); }
.dz-dialog .dzd-panel{
  position:absolute; top:42%; left:50%; transform:translate(-50%,-50%) scale(.96);
  width:min(420px,92vw); background:var(--card); border:1px solid var(--rule-2);
  border-radius:16px; box-shadow:var(--shadow-lg); padding:22px 22px 18px; transition:transform .16s;
}
.dz-dialog.open .dzd-panel{ transform:translate(-50%,-50%) scale(1); }
.dz-dialog .dzd-title{ font-family:var(--f-disp); font-weight:700; font-size:17px; color:var(--ink); }
.dz-dialog .dzd-msg{ font-family:var(--f-body); font-size:14px; color:var(--ink-2); margin-top:7px; line-height:1.5; }
.dz-dialog .dzd-input{
  width:100%; margin-top:14px; font-family:var(--f-body); font-size:15px; color:var(--ink);
  background:#fff; border:1px solid var(--rule-2); border-radius:10px; padding:11px 13px;
}
.dz-dialog .dzd-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.dz-dialog .dzd-btns{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.dz-dialog .dzd-btn{ font-family:var(--f-disp); font-weight:600; font-size:13.5px; cursor:pointer;
  border-radius:9px; padding:9px 16px; border:1px solid var(--rule-2); background:var(--tile); color:var(--ink); }
.dz-dialog .dzd-btn.cancel{ background:transparent; color:var(--ink-3); }
.dz-dialog .dzd-btn.cancel:hover{ color:var(--ink); border-color:var(--rule-3); }
.dz-dialog .dzd-btn.ok{ background:linear-gradient(150deg,#ff7a3d,var(--accent)); color:#fff; border-color:transparent; }
.dz-dialog .dzd-btn.ok:hover{ filter:brightness(1.05); }
.dz-dialog .dzd-btn.ok.danger{ background:linear-gradient(150deg,#e05a4a,#c0392b); }

/* ---- toast bildirim ---- */
.dz-toast{ position:fixed; left:50%; bottom:84px; transform:translate(-50%,12px); z-index:320;
  font-family:var(--f-body); font-size:14px; font-weight:600; color:#fff;
  background:#1a1712; border-radius:11px; padding:11px 20px; box-shadow:var(--shadow-lg);
  opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; max-width:88vw; }
.dz-toast.show{ opacity:1; transform:translate(-50%,0); }
.dz-toast.ok{ background:linear-gradient(150deg,#1f9e55,#157a40); }
.dz-toast.err{ background:linear-gradient(150deg,#e05a4a,#b5341f); }

/* ============================================================
   EDİTÖR v3 — component ✎, bağlantı editörü, katalog filtre,
   renk paleti, seçim, grid, sipariş butonu
   ============================================================ */
/* node / katalog kartı ✎ düzenle butonu (edit modunda) */
/* NOT: .node zaten position:absolute (style.css) — relative YAPMA, şema layout'u çöker.
   .node-edit absolute child'ı zaten absolute ata'ya göre konumlanır. */
.cc{ position:relative; }
.node-edit, .cc-edit{
  display:none; position:absolute; top:-9px; right:-9px; z-index:6;
  width:22px; height:22px; align-items:center; justify-content:center;
  font-size:12px; line-height:1; color:#fff; cursor:pointer;
  background:var(--accent); border:2px solid #fff; border-radius:50%;
  box-shadow:0 2px 6px -1px rgba(40,33,20,.5); padding:0;
}
.cc-edit{ top:8px; right:8px; }
body.editing .node-edit{ display:flex; }
body.editing .cc-edit{ display:flex; }
/* katalog kartlarını düzenlemek için: ✎ butonu kart üstüne gelince DE görünür
   (edit modunu ayrıca açmaya gerek yok — tıklayınca düzenleyici kendi açılır) */
.cc:hover .cc-edit, .cc:focus-within .cc-edit{ display:flex; }
.cc-edit:hover, .node-edit:hover{ filter:brightness(1.08); }

/* seçim highlight (klavye ile taşıma için) */
body.editing .node.selected{ outline:3px solid var(--accent-d) !important; outline-offset:2px; box-shadow:0 0 0 7px var(--accent-soft) !important; z-index:8 !important; }
body.editing .zone.selected{ outline:3px solid var(--accent-d) !important; outline-offset:-1px; box-shadow:0 0 0 6px var(--accent-soft) inset !important; }

/* bağlantı listesi editörü */
.conn-tools{ display:none; margin:0 0 10px; }
body.editing .conn-tools{ display:block; }
.conn-add{
  font-family:var(--f-mono); font-size:11.5px; color:var(--accent-d); cursor:pointer;
  background:var(--accent-soft); border:1px solid var(--accent); border-radius:8px; padding:6px 12px;
}
.conn-add:hover{ background:#fff; }
th.conn-act, td.conn-act{ display:none; width:1%; white-space:nowrap; }
body.editing th.conn-act, body.editing td.conn-act{ display:table-cell; }
.conn-edit, .conn-del{
  width:24px; height:24px; margin-left:4px; cursor:pointer; font-size:12px; line-height:1;
  border-radius:7px; border:1px solid var(--rule-2); background:var(--card); color:var(--ink-2);
}
.conn-edit:hover{ color:var(--accent-d); border-color:var(--accent); }
.conn-del:hover{ color:#c0392b; border-color:#c0392b; }

/* katalog arama + filtre toolbar */
.cat-filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 16px; }
.cat-search{
  flex:2 1 240px; font-family:var(--f-body); font-size:14px; color:var(--ink);
  background:#fff; border:1px solid var(--rule-2); border-radius:10px; padding:10px 13px;
}
.cat-search:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.cat-sel{
  flex:1 1 150px; font-family:var(--f-body); font-size:13.5px; color:var(--ink);
  background:var(--card); border:1px solid var(--rule-2); border-radius:10px; padding:10px 11px;
}
.cat-sel:focus{ outline:none; border-color:var(--accent); }
.cat-count{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); margin-left:auto; }
.cat-empty{ grid-column:1/-1; padding:30px; text-align:center; color:var(--ink-3); font-family:var(--f-mono); }

/* renk paleti (bölge modalı) */
.dzd-swlabel{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin:14px 0 7px; }
.dzd-swatches{ display:flex; flex-wrap:wrap; gap:8px; }
.dzd-sw{ width:30px; height:30px; border-radius:9px; border:2px solid #fff; cursor:pointer; padding:0;
  box-shadow:0 0 0 1px var(--rule-2); position:relative; }
.dzd-sw.sel{ box-shadow:0 0 0 2px var(--ink); transform:scale(1.06); }
.dzd-sw.custom{ display:grid; place-items:center; background:linear-gradient(135deg,#fff,#eee); color:var(--ink-3); font-size:16px; overflow:hidden; }
.dzd-sw.custom input[type=color]{ position:absolute; inset:0; opacity:0; cursor:pointer; border:none; }
.dzd-sw.custom span{ pointer-events:none; }

/* conn modal satırları */
.dzd-row{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.dzd-row label{ flex:0 0 84px; font-family:var(--f-mono); font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.dzd-row select, .dzd-row input{
  flex:1; min-width:0; font-family:var(--f-body); font-size:14px; color:var(--ink);
  background:#fff; border:1px solid var(--rule-2); border-radius:9px; padding:9px 11px;
}
.dzd-row select:focus, .dzd-row input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* grid toggle aktif */
.eb-btn.on{ color:var(--accent-d); border-color:var(--accent); background:var(--accent-soft); }

/* drawer 'siparişe ekle' */
.d-order{
  margin-top:14px; font-family:var(--f-disp); font-weight:600; font-size:13px; cursor:pointer;
  color:#fff; background:linear-gradient(150deg,#ff7a3d,var(--accent)); border:none;
  border-radius:10px; padding:10px 16px; box-shadow:0 6px 16px -8px rgba(255,90,31,.6);
}
.d-order:hover{ filter:brightness(1.05); }

/* ============================================================
   EDİTÖR v4 — özel dropdown, durum rozetleri, pano notu,
   hizalama kılavuzu, wire tıklama, yazdırma (interlock arayüzleri)
   Tüm renkler paper değişkenlerinden; native <select> kullanılmaz.
   ============================================================ */

/* ---- 2) ÖZEL DROPDOWN (.dz-dd) — paper temalı ---- */
.dz-dd{ position:relative; display:inline-flex; min-width:140px; }
.dz-dd-btn{
  display:flex; align-items:center; gap:8px; width:100%;
  font-family:var(--f-body); font-size:13.5px; color:var(--ink); cursor:pointer;
  background:var(--card); border:1px solid var(--rule-2); border-radius:9px;
  padding:9px 11px; text-align:left; transition:border-color .14s, box-shadow .14s;
}
.dz-dd-btn:hover{ border-color:var(--rule-3); }
.dz-dd.open .dz-dd-btn{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.dz-dd-caret{ margin-left:auto; flex:none; color:var(--ink-3); font-size:11px; transition:transform .16s; }
.dz-dd.open .dz-dd-caret{ transform:rotate(180deg); color:var(--accent-d); }
.dz-dd-menu{
  display:none; position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:260;
  max-height:260px; overflow:auto; padding:5px;
  background:var(--card); border:1px solid var(--rule-2); border-radius:11px;
  box-shadow:var(--shadow-lg);
}
.dz-dd.open .dz-dd-menu{ display:block; }   /* .open wrapper'da (catalog.js) */
.dz-dd-opt{
  display:flex; align-items:center; gap:8px; width:100%;
  font-family:var(--f-body); font-size:13.5px; color:var(--ink); cursor:pointer;
  background:transparent; border:none; border-radius:7px; padding:8px 10px; text-align:left;
}
.dz-dd-opt:hover{ background:var(--accent-soft); color:var(--ink); }
.dz-dd-opt.sel{ background:color-mix(in oklab,var(--accent) 14%,#fff); color:var(--accent-d); }

/* ---- 3) DURUM ROZETLERİ — node + kart, renk sınıfları ---- */
/* renk kodları: planned gri, ordered turuncu, installed mavi, tested yeşil */
.st-planned{   --stc:#94a3b8; }
.st-ordered{   --stc:var(--accent); }
.st-installed{ --stc:#4aa8ff; }
.st-tested{    --stc:#1f9e55; }

/* node üzerinde sağ-alt küçük yuvarlak rozet + kısa metin */
.node .node-status{
  position:absolute; right:6px; top:6px; z-index:5;
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--f-mono); font-size:9px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-2); line-height:1;
  background:rgba(255,255,255,.92); border:1px solid var(--rule-2); border-radius:999px;
  padding:3px 8px 3px 6px; box-shadow:0 2px 5px rgba(40,33,20,.12);
}
.node .node-status::before{
  content:""; flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--stc,var(--ink-4)); box-shadow:0 0 0 2px color-mix(in oklab,var(--stc,var(--ink-4)) 22%,transparent);
}
/* durumu olan node'da rozet görünsün */
.node.st-planned .node-status,
.node.st-ordered .node-status,
.node.st-installed .node-status,
.node.st-tested .node-status{ display:inline-flex; }

/* katalog kartında durum rozeti */
.cc .cc-status{
  display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
  font-family:var(--f-mono); font-size:9.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2); line-height:1;
  background:color-mix(in oklab,var(--stc,var(--ink-4)) 12%,var(--card-2));
  border:1px solid color-mix(in oklab,var(--stc,var(--ink-4)) 40%,var(--rule-2));
  border-radius:999px; padding:3px 9px 3px 7px; margin-top:6px;
}
.cc .cc-status::before{
  content:""; flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--stc,var(--ink-4));
}

/* ---- 4) PANO NOTU (.board-note) — post-it görünümü ---- */
.board-note{
  position:absolute; z-index:42; min-width:96px; max-width:200px;
  font-family:var(--f-body); font-size:12.5px; line-height:1.4; color:#4a3f1e;
  background:linear-gradient(180deg,#fff7c8,#ffec99);
  border:1px solid #e8d56a; border-radius:3px;
  padding:10px 11px 9px; box-shadow:0 6px 16px -8px rgba(40,33,20,.45), 0 1px 0 rgba(255,255,255,.6) inset;
  transform:rotate(-1deg);
}
.board-note .bn-text{
  width:100%; min-height:32px; resize:none; border:none; background:transparent;
  font-family:inherit; font-size:inherit; line-height:inherit; color:inherit;
  outline:none; overflow:hidden;
}
.board-note .bn-text::placeholder{ color:#a99a55; }
.board-note .bn-del{
  display:none; position:absolute; top:-9px; right:-9px; width:20px; height:20px;
  align-items:center; justify-content:center; font-size:13px; line-height:1; color:#fff;
  background:#c0392b; border:2px solid #fff; border-radius:50%; cursor:pointer; padding:0;
  box-shadow:0 2px 6px -1px rgba(40,33,20,.5);
}
/* edit modunda taşınabilir + sil butonu görünür */
body.editing .board-note{ cursor:move; }
body.editing .board-note .bn-del{ display:flex; }
body.editing .board-note .bn-text{ cursor:move; }
body.editing .board-note .bn-text:focus{ cursor:text; }

/* ---- 5) HİZALAMA KILAVUZU (.guide) ---- */
.guide{ position:absolute; background:var(--accent); z-index:40; pointer-events:none; }
.guide.v{ width:1px; }
.guide.h{ height:1px; }

/* ---- 6) WIRE TIKLAMA — edit modunda path.wire tıklanabilir ---- */
/* NOT: svg.wires normalde pointer-events:none (satır 752). Edit modunda
   path.wire'ı ayrı ayrı tıklanabilir yap (stroke üstü). */
body.editing svg.wires{ pointer-events:none; }
body.editing svg.wires path.wire{ pointer-events:stroke; cursor:pointer; }

/* ---- 8) @media print — yazdırırken sadece şema board görünür ---- */
@media print{
  .sidebar, .topbar, .edit-bar, .mast, .legend, .iconlegend,
  footer, .dz-dialog, .ed-modal, .dz-toast, .maptools, .hint,
  .conn-tools, .cat-filters{ display:none !important; }

  html, body{ background:#fff !important; }
  body::before, body::after{ display:none !important; }

  .appmain{ margin-left:0 !important; }
  .ground, .slab{ padding:0 !important; max-width:none !important; }
  .stage-wrap{
    margin:0 !important; border:1px solid #999 !important; box-shadow:none !important;
    page-break-inside:avoid; break-inside:avoid;
  }
  /* yalnızca şema board görünür kalsın; node rozetleri yazdırılsın */
  .node, .zone, svg.wires{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ---- FIX: node — resim KALAN alanı doldursun (büyük kalsın), yazı kesilmesin ----
   .cat-bar/.flags/.corner/.ping absolute → tek akış elemanı .ph + .meta.
   flex column: .ph flex:1 (mümkün olan en büyük), .meta doğal yükseklik (kırpılmaz). */
.node{ display:flex !important; flex-direction:column; }
.node .ph{ flex:1 1 auto; height:auto !important; min-height:46px; }
.node .meta{ flex:0 0 auto; padding:6px 10px 8px !important; }
.node .meta .nm{ line-height:1.12 !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.node .meta .sb{ margin-top:2px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- FIX: Eksik parça paneli (satır düzeni) ---- */
.dz-dialog .dzd-panel.dz-wide{ width:min(560px,94vw); }
.dz-miss-list{ max-height:56vh; overflow:auto; display:flex; flex-direction:column; gap:7px; margin-top:12px; padding-right:2px; }
.dz-miss-row{ display:flex; align-items:center; gap:12px; padding:8px 10px;
  border:1px solid var(--rule); border-radius:10px; background:var(--card-2); }
.dz-miss-row.done{ opacity:.5; }
.dz-miss-nm{ flex:1; min-width:0; font-family:var(--f-body); font-size:14px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dz-miss-add{ flex:none; padding:6px 13px !important; font-size:12.5px !important; }
.dz-miss-empty{ padding:22px; text-align:center; color:var(--ink-3); font-family:var(--f-mono); font-size:13px; }

/* ---- Dışa aktar paneli ---- */
.dz-export-opts{ display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.dz-export-opts .dzd-btn{ width:100%; text-align:left; }

/* ============================================================
   PHASE 2 — kağıt-temalı ek stiller
   (zoom kontrol #6, port düzenleyici #4, maliyet #9, rapor)
   Sadece dosya sonuna eklenir; mevcut kurallar değişmez.
   ============================================================ */

/* ---- [ZOOM #6] #stageWrap içinde sağ-alt yüzen zoom buton grubu ---- */
.zoom-ctl{
  position:absolute; right:16px; bottom:16px; z-index:60;
  display:flex; flex-direction:column; gap:7px;
  padding:7px; border-radius:14px;
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid var(--rule-2); box-shadow:var(--shadow);
}
/* yuvarlak/kare kağıt butonlar — .eb-btn deseni temel alınır */
.zoom-in, .zoom-out, .zoom-reset{
  width:38px; height:38px; display:grid; place-items:center;
  font-family:var(--f-disp); font-size:18px; font-weight:600; line-height:1;
  cursor:pointer; color:var(--ink);
  border:1px solid var(--rule-2); border-radius:10px; background:var(--tile);
  transition:border-color .14s, background .14s, color .14s, transform .12s;
}
.zoom-reset{ font-size:13px; font-family:var(--f-mono); border-radius:10px; }
.zoom-in:hover, .zoom-out:hover, .zoom-reset:hover{
  color:var(--accent-d); border-color:var(--accent); background:var(--accent-soft);
}
.zoom-in:active, .zoom-out:active, .zoom-reset:active{ transform:scale(.94); }
.zoom-in:disabled, .zoom-out:disabled, .zoom-reset:disabled{ opacity:.45; cursor:default; }
@media (max-width:980px){
  .zoom-ctl{ right:10px; bottom:10px; }
  .zoom-in, .zoom-out, .zoom-reset{ width:34px; height:34px; }
}

/* ---- [PORT #4] port satırı içi düzenle/sil + üst '+ Port' butonu ---- */
/* satır içi küçük ✎/× butonları — .conn-edit/.conn-del deseni */
.pm-edit, .pm-del{
  display:none;
  width:24px; height:24px; margin-left:4px; cursor:pointer; font-size:12px; line-height:1;
  border-radius:7px; border:1px solid var(--rule-2); background:var(--card); color:var(--ink-2);
  vertical-align:middle;
}
.pm-edit:hover{ color:var(--accent-d); border-color:var(--accent); }
.pm-del:hover{ color:#c0392b; border-color:#c0392b; }
/* '+ Port' ekle butonu — .conn-add deseni */
.pm-add{
  display:none;
  font-family:var(--f-mono); font-size:11.5px; color:var(--accent-d); cursor:pointer;
  background:var(--accent-soft); border:1px solid var(--accent); border-radius:8px; padding:6px 12px;
  margin-bottom:10px;
}
.pm-add:hover{ background:#fff; }
/* sadece düzenleme modunda görünür */
body.editing .pm-edit, body.editing .pm-del{ display:inline-flex; place-items:center; }
body.editing .pm-add{ display:inline-block; }

/* ---- [MALİYET #9] katalog fiyat rozeti + drawer chips satırı ---- */
/* katalog kartında küçük fiyat rozeti — turuncu vurgu (.cc-cat konumlandırması benzeri) */
.cc-price{
  position:absolute; bottom:11px; right:11px;
  font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.02em;
  color:#fff; background:linear-gradient(150deg,#ff7a3d,var(--accent));
  border:1px solid var(--accent-d); border-radius:8px;
  padding:3px 9px; box-shadow:0 2px 6px rgba(255,90,31,.35); z-index:2;
}
/* drawer'da maliyet chips satırı — .dchips span stiline benzer */
.d-cost{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.d-cost span{
  font-family:var(--f-mono); font-size:12px; color:var(--ink);
  background:var(--card-2); border:1px solid var(--rule-2); border-radius:8px;
  padding:5px 11px; letter-spacing:.01em;
}
.d-cost span.dc-price{ color:var(--accent-d); border-color:var(--accent); background:var(--accent-soft); }

/* ---- [RAPOR] kağıt-temalı rapor düzeni ---- */
#reportRoot{ max-width:1180px; margin:0 auto; padding:0 4px 60px; }
.rep-head{
  display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap;
  padding:22px 0 18px; margin-bottom:6px; border-bottom:2px solid var(--rule-2);
}
.rep-head .rep-titles{ flex:1; min-width:0; }
.rep-kicker{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-d); display:flex; align-items:center; gap:11px;
}
.rep-kicker::before{ content:""; width:26px; height:2px; background:var(--accent); }
.rep-title{
  font-family:var(--f-disp); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(26px,4vw,40px); color:var(--ink); margin:.18em 0 .1em;
}
.rep-sub{ font-family:var(--f-mono); font-size:12px; color:var(--ink-3); letter-spacing:.02em; }

/* PDF indir butonu — .eb-btn.save deseni */
.rep-print{
  font-family:var(--f-disp); font-size:13.5px; font-weight:600; cursor:pointer;
  border-radius:10px; padding:10px 18px; border:1px solid transparent;
  background:linear-gradient(150deg,#ff7a3d,var(--accent)); color:#fff;
  box-shadow:0 8px 20px -10px rgba(255,90,31,.6); transition:filter .14s, transform .12s;
}
.rep-print:hover{ filter:brightness(1.06); }
.rep-print:active{ transform:scale(.97); }

/* bölüm başlığı */
.rep-section{ margin-top:30px; }
.rep-section > h2{
  font-family:var(--f-disp); font-weight:600; font-size:15px; letter-spacing:.01em;
  color:var(--ink); margin:0 0 13px; display:flex; align-items:center; gap:9px;
}
.rep-section > h2::before{
  content:""; width:7px; height:7px; border-radius:2px;
  background:var(--accent); transform:rotate(45deg);
}

/* kart ızgarası */
.rep-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px;
}
/* maliyet özeti kartı */
.rep-card{
  background:var(--card); border:1px solid var(--rule-2); border-radius:14px;
  padding:16px 17px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.rep-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent);
}
.rep-card .rc-label{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.rep-card .rc-value{
  font-family:var(--f-disp); font-weight:700; font-size:26px; color:var(--ink);
  margin-top:7px; line-height:1.05; letter-spacing:-.01em;
}
.rep-card .rc-value em{ font-style:normal; color:var(--accent-d); }
.rep-card .rc-foot{ font-family:var(--f-mono); font-size:11px; color:var(--ink-3); margin-top:5px; }
.rep-card.accent::before{ background:linear-gradient(180deg,#ff7a3d,var(--accent)); width:4px; }
.rep-card.accent .rc-value{ color:var(--accent-d); }

/* tablolar */
.rep-table{
  width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--rule-2); border-radius:12px; overflow:hidden;
}
.rep-table th, .rep-table td{
  text-align:left; padding:10px 14px; font-size:13px; border-bottom:1px solid var(--rule);
}
.rep-table thead th{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); background:var(--card-2); font-weight:600;
}
.rep-table tbody td{ font-family:var(--f-body); color:var(--ink-2); }
.rep-table tbody td:first-child{ color:var(--ink); font-weight:500; }
.rep-table tbody tr:last-child td{ border-bottom:none; }
.rep-table tbody tr:hover{ background:var(--card-2); }
.rep-table td.rep-num{ font-family:var(--f-mono); color:var(--ink); text-align:right; }
.rep-table td.rep-num em{ font-style:normal; color:var(--accent-d); font-weight:600; }
/* tablo içi kablo türü renk noktası */
.rep-swatch{
  display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:8px;
  vertical-align:-1px; border:1px solid rgba(26,23,18,.18);
}
/* eksik parça listesi (chip dizisi) */
.rep-miss{ display:flex; flex-wrap:wrap; gap:8px; }
.rep-miss span{
  font-family:var(--f-mono); font-size:12px; color:var(--ink-2);
  background:var(--card-2); border:1px solid var(--rule-2); border-radius:8px; padding:5px 11px;
}
.rep-empty{
  font-family:var(--f-mono); font-size:13px; color:var(--ink-3);
  padding:18px; text-align:center; background:var(--card-2);
  border:1px dashed var(--rule-2); border-radius:12px;
}
@media (max-width:680px){
  .rep-head{ padding:16px 0 14px; }
  .rep-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
}

/* ---- @media print — rapor/zoom için ek yazdırma kuralları ---- */
@media print{
  .sidebar, .topbar, .zoom-ctl, .rep-print,
  .edit-bar, #editToggle{ display:none !important; }

  html, body{ background:#fff !important; }
  body::before, body::after{ display:none !important; }

  /* rapor tam genişlik, kenar boşlukları sade */
  #reportRoot{ max-width:none !important; margin:0 !important; padding:0 !important; }

  /* zemin beyaz + kutu gölgeleri sadeleştir */
  .rep-card, .rep-table{
    box-shadow:none !important; background:#fff !important;
    border-color:#bbb !important;
  }
  .rep-section{ page-break-inside:avoid; break-inside:avoid; }
  .rep-table thead th, .rep-table tbody tr:hover{ background:#f4f4f4 !important; }
  .rep-card, .rep-table, .rep-swatch{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
}

/* ============================================================
   ENTEGRASYON — report.js'in ürettiği sınıf adlarını (rep-cards/
   rep-card-val/rep-block/rep-h3/rep-list...) yukarıdaki rapor temasıyla
   eşle. (Paralel ajanlar farklı sınıf adları kullandı; köprüleniyor.)
   ============================================================ */
.rep-head-txt{ flex:1; min-width:0; }

/* maliyet kartı ızgarası + kart içeriği (val üstte, label altta) */
.rep-cards{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px; margin-top:4px;
}
.rep-card-val{
  font-family:var(--f-disp); font-weight:700; font-size:26px; color:var(--ink);
  line-height:1.05; letter-spacing:-.01em;
}
.rep-card-lab{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-top:7px;
}

/* bölüm + başlık (rep-section/h2 deseniyle aynı görünüm) */
.rep-block{ margin-top:30px; }
.rep-h3{
  font-family:var(--f-disp); font-weight:600; font-size:15px; letter-spacing:.01em;
  color:var(--ink); margin:0 0 13px; display:flex; align-items:center; gap:9px;
}
.rep-h3::before{
  content:""; width:7px; height:7px; border-radius:2px;
  background:var(--accent); transform:rotate(45deg);
}
.rep-count{
  font-family:var(--f-mono); font-size:11px; font-weight:600; color:var(--accent-d);
  background:var(--accent-soft); border:1px solid var(--accent); border-radius:999px;
  padding:1px 9px; margin-left:4px;
}
.rep-note{ font-family:var(--f-mono); font-size:12px; color:var(--ink-3); margin:6px 0 10px; }

/* tablo toplam satırı + kablo renk noktası */
.rep-table tr.rep-total td{
  border-top:2px solid var(--rule-2); font-weight:700; color:var(--ink);
  background:var(--card-2);
}
.rep-dot{
  display:inline-block; width:11px; height:11px; border-radius:50%;
  margin-right:9px; vertical-align:middle; box-shadow:0 0 0 1px rgba(0,0,0,.08) inset;
}

/* eksik parça listesi */
.rep-list{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.rep-li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 13px; border:1px solid var(--rule); border-radius:10px; background:var(--card-2);
}
.rep-li-name{ color:var(--ink); font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rep-li-status{ flex:none; font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); }

/* drawer maliyet chip'i (app.js .dc-chip) — .d-cost span zaten temel stili verir */
.d-cost .dc-chip:first-child{ color:var(--accent-d); border-color:var(--accent); background:var(--accent-soft); }

@media print{
  .rep-cards, .rep-block{ page-break-inside:avoid; break-inside:avoid; }
  .rep-li{ background:#fff !important; border-color:#bbb !important; }
}

/* ============================================================
   AYARLAR — Koyu tema · yoğunluk · animasyon · ayarlar sayfası
   (theme.js <html> üzerine data-theme/data-density/data-motion yazar;
    --accent/--accent-d/--accent-soft + fontları inline ayarlar.)
   ============================================================ */

/* ---- KOYU TEMA: kâğıt token'larını sıcak-koyu değerlerle ez ---- */
:root[data-theme="dark"]{
  --paper:#191512; --paper-2:#13100d;
  --card:#221d18; --card-2:#1b1712; --tile:#2a241d;
  --ink:#f1ece2; --ink-2:#c6bdac; --ink-3:#8f8675; --ink-4:#6e6657;
  --rule:#352f28; --rule-2:#443d34; --rule-3:#554d42;
  --ok:#3fbf6f;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 14px 34px -22px rgba(0,0,0,.7);
  --shadow-lg:0 2px 4px rgba(0,0,0,.55),0 30px 60px -28px rgba(0,0,0,.8);
}
/* koyu: ince ızgara açık-saydam, sıcak vignette korunur */
:root[data-theme="dark"] body::before{
  background-image:
    linear-gradient(rgba(240,235,225,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,235,225,.035) 1px,transparent 1px) !important;
}
:root[data-theme="dark"] body::after{ opacity:.6 !important; }
/* koyu: kategori renklerini biraz parlat (okunurluk) */
:root[data-theme="dark"] .cat-guc{--cat:#f0a623}
:root[data-theme="dark"] .cat-itki{--cat:#5b9bf0}
:root[data-theme="dark"] .cat-kontrol{--cat:#46c47d}
:root[data-theme="dark"] .cat-sensor{--cat:#e8c64a}
:root[data-theme="dark"] .cat-rc{--cat:#b483ee}
:root[data-theme="dark"] .cat-beyin{--cat:#ff7a3d}
/* koyu: sabit beyaz yüzeyleri token'a çek */
:root[data-theme="dark"] .cc-tile,
:root[data-theme="dark"] .node .ph{ background:var(--card-2); }
:root[data-theme="dark"] .dz-dialog .dzd-panel,
:root[data-theme="dark"] .ed-modal .ed-panel,
:root[data-theme="dark"] .drawer{ background:var(--card); color:var(--ink); }
/* koyu: kenar menü + topbar sabit krem zeminleri koyuya çek (yoksa
   açık ink ↔ krem zemin = okunmaz) */
:root[data-theme="dark"] .sidebar{
  background:linear-gradient(180deg,#1d1813,#15110d) !important;
  border-right-color:var(--rule-2) !important;
}
:root[data-theme="dark"] .topbar{ background:color-mix(in srgb,var(--paper) 88%,transparent) !important; }
:root[data-theme="dark"] .nav-item:hover{ background:rgba(240,235,225,.06) !important; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select{ background:var(--card-2); color:var(--ink); border-color:var(--rule-2); }
:root[data-theme="dark"] ::selection{ color:#1a1410; }

/* ---- YOĞUNLUK: sıkışık → boşlukları kıs ---- */
:root[data-density="compact"] .ground{ padding-top:18px !important; padding-bottom:18px !important; }
:root[data-density="compact"] .mast{ padding-top:18px !important; padding-bottom:14px !important; }
:root[data-density="compact"] .catalog{ gap:12px !important; }
:root[data-density="compact"] .cc-meta{ padding:9px 11px !important; }
:root[data-density="compact"] .rep-block,
:root[data-density="compact"] .set-block{ margin-top:18px !important; }
:root[data-density="compact"] .set-row{ padding:12px 0 !important; }

/* ---- ANİMASYON: azaltılmış ---- */
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after{
  animation-duration:.001ms !important; animation-iteration-count:1 !important;
  transition-duration:.001ms !important; scroll-behavior:auto !important;
}

/* ============================================================
   AYARLAR SAYFASI (#settingsRoot · settings.js)
   ============================================================ */
#settingsRoot{ max-width:880px; margin:0 auto; padding:0 4px 60px; }
.set-head{ padding:22px 0 18px; border-bottom:2px solid var(--rule-2); margin-bottom:8px; }
.set-kicker{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-d); display:flex; align-items:center; gap:11px;
}
.set-kicker::before{ content:""; width:26px; height:2px; background:var(--accent); }
.set-title{ font-family:var(--f-disp); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(26px,4vw,38px); color:var(--ink); margin:.18em 0 .12em; }
.set-sub{ font-family:var(--f-mono); font-size:12px; color:var(--ink-3); letter-spacing:.02em; max-width:640px; }

.set-block{ margin-top:14px; background:var(--card); border:1px solid var(--rule-2);
  border-radius:16px; padding:6px 20px; box-shadow:var(--shadow); }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px 0; border-bottom:1px solid var(--rule); flex-wrap:wrap; }
.set-row:last-child{ border-bottom:none; }
.set-row-col{ flex-direction:column; align-items:stretch; }
.set-label{ display:flex; flex-direction:column; gap:3px; }
.set-label b{ font-family:var(--f-disp); font-weight:600; font-size:15px; color:var(--ink); }
.set-label span{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); }

/* segmentli seçici */
.set-seg{ display:inline-flex; background:var(--card-2); border:1px solid var(--rule-2);
  border-radius:11px; padding:3px; gap:2px; }
.set-seg-btn{ font-family:var(--f-disp); font-weight:600; font-size:13px; cursor:pointer;
  border:none; background:transparent; color:var(--ink-2); padding:8px 15px; border-radius:8px;
  display:inline-flex; align-items:center; gap:7px; transition:background .14s,color .14s; }
.set-seg-btn .set-seg-ic{ font-size:14px; }
.set-seg-btn:hover{ color:var(--ink); }
.set-seg-btn.on{ background:var(--accent); color:#fff; box-shadow:0 4px 12px -6px var(--accent); }

/* vurgu rengi swatch'ları */
.set-accents{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.set-sw{ width:30px; height:30px; border-radius:50%; cursor:pointer; padding:0;
  background:var(--sw); border:2px solid var(--rule-2); position:relative; transition:transform .12s; }
.set-sw:hover{ transform:scale(1.12); }
.set-sw.on{ border-color:var(--ink); box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--sw); }
.set-sw-custom{ display:inline-flex; align-items:center; justify-content:center;
  background:var(--card-2); border-style:dashed; }
.set-sw-custom span{ color:var(--ink-3); font-size:16px; font-weight:700; line-height:1; }
.set-sw-custom.on{ border-style:solid; border-color:var(--ink); box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--sw); background:var(--sw); }
.set-sw-custom.on span{ color:#fff; }
.set-sw-custom input[type=color]{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }

/* yazı tipi kartları */
.set-fonts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-top:6px; }
.set-font{ cursor:pointer; text-align:left; background:var(--card-2); border:1.5px solid var(--rule-2);
  border-radius:12px; padding:13px 14px; display:flex; flex-direction:column; gap:3px; transition:border-color .14s,transform .12s; }
.set-font:hover{ transform:translateY(-2px); border-color:var(--rule-3); }
.set-font.on{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.set-font-name{ font-size:14px; font-weight:700; color:var(--ink); }
.set-font-note{ font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3); }
.set-font-prev{ font-size:20px; color:var(--ink-2); margin-top:6px; letter-spacing:.01em; }

/* alt: sıfırla + kaydedildi */
.set-foot{ display:flex; align-items:center; gap:14px; margin-top:18px; }
.set-reset{ font-family:var(--f-disp); font-weight:600; font-size:13px; cursor:pointer;
  background:var(--card); border:1px solid var(--rule-2); color:var(--ink-2); padding:9px 16px; border-radius:10px; transition:.14s; }
.set-reset:hover{ color:var(--ink); border-color:var(--rule-3); }
.set-saved{ font-family:var(--f-mono); font-size:12px; color:var(--ok); opacity:0; transform:translateY(2px); transition:.2s; }
.set-saved.show{ opacity:1; transform:none; }

@media (max-width:640px){
  .set-row{ flex-direction:column; align-items:stretch; }
  .set-seg{ width:100%; }
  .set-seg-btn{ flex:1; justify-content:center; }
}

/* ---- Sipariş fiyat sütunu (#9 sipariş akışı) ---- */
#ordersRoot .oc-price{ white-space:nowrap; }
#ordersRoot .oc-price .oc-in{ max-width:92px; color:var(--accent-d) !important; font-family:var(--f-mono); font-weight:600; }
#ordersRoot .ord-form #ordPrice{ max-width:120px; }

/* ============================================================
   KOYU TEMA — sipariş ekranı + dropdown beyaz zeminleri düzelt
   (#ordersRoot/.dd-* paper kuralları #fff sabitliyordu → koyuda beyaz kalıyordu)
   ============================================================ */
:root[data-theme="dark"] #ordersRoot .ord-search{ background:var(--card-2) !important; }
:root[data-theme="dark"] #ordersRoot .ord-form input{ background:var(--card-2) !important; }
:root[data-theme="dark"] #ordersRoot .ord-form{ background:linear-gradient(180deg,var(--card),var(--card-2)) !important; }
:root[data-theme="dark"] .dd-btn{ background:var(--card-2) !important; }
:root[data-theme="dark"] .dd.dd-row .dd-btn,
:root[data-theme="dark"] .dd.dd-new .dd-btn,
:root[data-theme="dark"] .dd.dd-statf.has-color .dd-btn{
  background:color-mix(in oklab, var(--sc,#888) 26%, var(--card-2)) !important; color:var(--ink) !important;
}
:root[data-theme="dark"] .dd-opt.sel{ background:color-mix(in oklab, var(--accent) 26%, var(--card-2)) !important; }
:root[data-theme="dark"] .login-field input{ background:var(--card-2) !important; }
:root[data-theme="dark"] #ordersRoot .ord-thumb{ background:var(--card-2) !important; }
/* sipariş "firma" sütunu */
#ordersRoot .oc-firma .oc-in{ color:var(--ink-2) !important; min-width:90px; }

/* ============================================================
   FATURALAR paneli (#invoicesRoot · invoices.js) — kağıt + koyu uyumlu
   ============================================================ */
#invoicesRoot{ max-width:1000px; margin:0 auto; padding:0 4px 60px; }
.inv-head{ padding:22px 0 16px; border-bottom:2px solid var(--rule-2); margin-bottom:14px; }
.inv-kicker{ font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-d); display:flex; align-items:center; gap:11px; }
.inv-kicker::before{ content:""; width:26px; height:2px; background:var(--accent); }
.inv-title{ font-family:var(--f-disp); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(26px,4vw,38px); color:var(--ink); margin:.18em 0 .12em; }
.inv-sub{ font-family:var(--f-mono); font-size:12px; color:var(--ink-3); letter-spacing:.02em; }
.inv-sub b{ color:var(--accent-d); }

.inv-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.inv-chip{ font-family:var(--f-disp); font-weight:600; font-size:12.5px; cursor:pointer;
  background:var(--card); border:1px solid var(--rule-2); color:var(--ink-2);
  padding:8px 14px; border-radius:999px; transition:.14s; }
.inv-chip:hover{ color:var(--ink); border-color:var(--rule-3); }
.inv-chip.on{ background:var(--accent); color:#fff; border-color:transparent; box-shadow:0 4px 12px -6px var(--accent); }
.inv-search{ display:flex; align-items:center; gap:7px; margin-left:auto; min-width:200px; flex:1;
  background:var(--card); border:1px solid var(--rule-2); border-radius:11px; padding:8px 13px; }
.inv-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.inv-search .inv-sic{ color:var(--accent-d); }
.inv-search input{ flex:1; min-width:0; border:none; background:transparent; outline:none;
  color:var(--ink); font-family:var(--f-body); font-size:13.5px; }
.inv-search input::placeholder{ color:var(--ink-3); }

.inv-list{ display:flex; flex-direction:column; gap:9px; }
.inv-row{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--card); border:1px solid var(--rule-2); border-radius:13px; padding:13px 16px;
  box-shadow:var(--shadow); transition:border-color .14s; }
.inv-row.has{ border-left:3px solid var(--ok); }
.inv-row:hover{ border-color:var(--rule-3); }
.inv-info{ min-width:0; }
.inv-name{ font-family:var(--f-disp); font-weight:600; font-size:14.5px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inv-meta{ display:flex; align-items:center; gap:12px; margin-top:5px; flex-wrap:wrap; }
.inv-stat{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:11px; color:var(--ink-2); }
.inv-stat .inv-dot{ width:8px; height:8px; border-radius:50%; background:var(--c,#888); }
.inv-firma{ font-family:var(--f-mono); font-size:11px; color:var(--ink-3); }
.inv-actions{ display:flex; align-items:center; gap:8px; flex:none; }
.inv-btn{ font-family:var(--f-disp); font-weight:600; font-size:12.5px; cursor:pointer;
  background:var(--card-2); border:1px solid var(--rule-2); color:var(--ink-2); padding:8px 13px; border-radius:9px; transition:.14s; }
.inv-btn:hover{ color:var(--ink); border-color:var(--rule-3); }
.inv-btn.up{ background:linear-gradient(150deg,#ff7a3d,var(--accent)); color:#fff; border-color:transparent; }
.inv-btn.up:hover{ filter:brightness(1.06); color:#fff; }
.inv-btn.danger:hover{ color:#fff; background:#c0392b; border-color:#c0392b; }
.inv-view{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-disp); font-weight:600; font-size:12.5px;
  color:var(--accent-d); background:var(--accent-soft); border:1px solid var(--accent); padding:8px 13px; border-radius:9px; text-decoration:none; }
.inv-view:hover{ background:var(--accent); color:#fff; }
.inv-empty{ font-family:var(--f-mono); font-size:13px; color:var(--ink-3); padding:30px; text-align:center;
  background:var(--card-2); border:1px dashed var(--rule-2); border-radius:13px; }
@media (max-width:600px){
  .inv-row{ flex-direction:column; align-items:stretch; }
  .inv-actions{ flex-wrap:wrap; }
  .inv-search{ margin-left:0; width:100%; }
}

/* ============================================================
   KOYU TEMA — şema (SVG kablo etiketi · bölge · node köşe/flag)
   açık-tema renkleri koyu zeminde patlıyordu; token/koyu değerlere çek.
   ============================================================ */
:root[data-theme="dark"] .wirelabel .bg{ fill:var(--tile) !important; stroke-opacity:.6 !important; }
:root[data-theme="dark"] .wirelabel text{ fill:var(--ink) !important; }
:root[data-theme="dark"] .zone{
  background:radial-gradient(120% 100% at 50% 0%,color-mix(in oklab,var(--zc) 16%,transparent),transparent 70%), rgba(255,255,255,.03) !important;
}
:root[data-theme="dark"] .zone .zlab{
  color:color-mix(in oklab,var(--zc) 55%,#fff) !important; background:var(--card-2) !important;
}
:root[data-theme="dark"] .node .corner{ background:rgba(0,0,0,.4) !important; color:var(--ink-2) !important; }
:root[data-theme="dark"] .node .flags .flag{ background:rgba(255,255,255,.12) !important; border-color:var(--rule-2) !important; box-shadow:none !important; }
:root[data-theme="dark"] .servo-out{ background:var(--card-2) !important; }

/* ---- Listeden bileşen yerleştir paneli (#dzPickList · editor.js) ---- */
.dz-pick-list{ max-height:56vh; overflow:auto; display:flex; flex-direction:column; gap:6px; margin-top:12px; padding-right:2px; }
.dz-pick-row{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:var(--card-2); border:1px solid var(--rule); border-radius:10px; padding:8px 11px; transition:border-color .12s,transform .1s; }
.dz-pick-row:hover{ border-color:var(--accent); transform:translateX(2px); }
.dz-pick-img{ width:38px; height:38px; object-fit:contain; flex:none; background:var(--tile); border:1px solid var(--rule-2); border-radius:8px; padding:2px; }
.dz-pick-nm{ flex:1; min-width:0; font-family:var(--f-body); font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dz-pick-tag{ flex:none; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-d); background:var(--accent-soft); border:1px solid var(--accent); border-radius:999px; padding:2px 8px; }

/* ---- Node (bileşen) resize tutamacı — edit modunda, sağ-alt köşe ---- */
.node-rs{ display:none; position:absolute; right:3px; bottom:3px; width:15px; height:15px;
  background:var(--accent); border:2px solid #fff; border-radius:4px; cursor:nwse-resize; z-index:9;
  box-shadow:0 1px 4px rgba(0,0,0,.35); }
.node-rs::after{ content:""; }
body.editing .node-rs{ display:block; }
:root[data-theme="dark"] .node-rs{ border-color:#15110d; }