/* =============================================================================
   PanoSim — Stil dosyası
   Her şey .panosim kökü altında kapsüllenmiştir; başka bir siteye gömüldüğünde
   o sitenin stillerini bozmaz, ondan da etkilenmez.
   ============================================================================= */

.panosim {
  --bg:        #0e141b;
  --bg-2:      #151d26;
  --bg-3:      #1c2733;
  --line:      #2b3a49;
  --ink:       #e6edf3;
  --ink-dim:   #93a4b5;
  --ink-faint: #5f7386;
  --accent:    #f5a524;
  --ok:        #3fb950;
  --warn:      #e3b341;
  --err:       #f85149;
  --paper:     #fafbfc;
  --paper-ink: #1a222b;
  --grid:      #dfe6ec;

  --w-L1: #8a5a2b;
  --w-L2: #1c1c1c;
  --w-L3: #8e8e8e;
  --w-N:  #2f6fd0;
  --w-PE: #2e9e4f;
  --w-CTRL: #c0392b;
  --w-TURUNCU: #e07b1f;
  --w-SARI:    #d9b310;
  --w-MOR:     #7b4fb5;
  --w-LACIVERT: #233a86;
  --w-PEMBE:   #d9548f;
  --w-TURKUAZ: #1c9c9c;

  all: initial;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 560px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
.panosim *, .panosim *::before, .panosim *::after { box-sizing: border-box; }
.panosim { position: relative; }

/* Kablo rengi seçim menüsü */
.ps-cmenu {
  position: absolute; z-index: 40; width: 224px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 5px; box-shadow: 0 10px 28px rgba(0,0,0,.55);
}
.ps-cmenu-h {
  font-size: 10.5px; color: var(--ink-faint); padding: 5px 8px 7px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.ps-cmenu-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px; border: 0; background: transparent; border-radius: 6px;
  color: var(--ink); font-size: 12px; font-family: inherit; cursor: pointer;
  text-align: left;
}
.ps-cmenu-row:hover { background: var(--bg-3); }
.ps-cmenu-row.cur { background: var(--bg-3); font-weight: 600; }
.ps-cmenu-row.cur::after { content: '✓'; margin-left: auto; color: var(--accent); }
.ps-cmenu-row i {
  width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.25);
}
.ps-cmenu-row i.auto {
  background: linear-gradient(135deg,#8a5a2b 0 33%,#2f6fd0 33% 66%,#2e9e4f 66%);
}
.ps-devremenu { max-height: 70vh; overflow-y: auto; }
.ps-devremenu .ps-cmenu-row { display: block; }

.ps-cmenu-row.auto { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 9px; }

/* ---------------------------------------------------------------- Üst şerit */
.ps-top {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;

  /* TELEFONDA YATAY TAŞMA — `denetim/89 · 2`; yetki `denetim/92 · Sıra 2`.
     ÖLÇÜLDÜ: 412 px'te belge 1259 px'e uzuyor ve taşıran öğe ÇİZİM DEĞİL,
     bu şerit — `.ps-btn` düğmeleri tek satırda 1259 px'e kadar gidiyor ve
     belgeyi o genişliğe ZORLUYOR. Çizim 412 px'te zaten 196×663'e
     küçülmüştü; sorun onda değildi.

     İKİ İLAÇ DENENDİ, İKİSİ DE TAŞMAYI SIFIRLADI — seçim ÖLÇÜYLE yapıldı:

       flex-wrap: wrap    taşma 0, AMA 1366'daki çizim 700 → 668 px
                          (şerit masaüstünde de sarmalanıyor) ve telefonda
                          çizim 663 → 467'ye düşüyor
       overflow-x: auto   taşma 0, 1366'daki çizim 930×700 DEĞİŞMEDİ,
                          telefonda çizim 663 px kalıyor

     İkincisi seçildi. Sebebi tercih değil ölçüt: `89 · 2`nin KONTROL
     satırı "1366'daki çizim değişmemeli" diyor ve bunu yalnız ikincisi
     sağlıyor. Yan kazanç da öğrencinin lehine — telefonda devreye 663 px
     kalıyor, 467 değil; şerit kendi içinde kayıyor.

     `max-width: 100%` şeridin kabından taşmamasını garantiliyor.
     Açılır menü (`.ps-cmenu`) `.panosim`e göre konumlanıyor, bu şeridin
     ÇOCUĞU DEĞİL — kırpılmadığı ayrıca ölçüldü. */
  overflow-x: auto;
  max-width: 100%;
}
.ps-brand { display: flex; align-items: baseline; gap: 9px; }
.ps-brand b { font-size: 15px; letter-spacing: .3px; }
.ps-brand span { font-size: 11px; color: var(--ink-faint); }

.ps-tabs { display: flex; gap: 2px; background: var(--bg-3); padding: 3px; border-radius: 8px; }
.ps-tab {
  border: 0; background: transparent; color: var(--ink-dim);
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-family: inherit;
}
.ps-tab:hover { color: var(--ink); }
.ps-tab.active { background: var(--accent); color: #14181d; font-weight: 600; }

.ps-spacer { flex: 1; }

.ps-zoom { display: flex; gap: 4px; align-items: center; }
.ps-btn.sq { width: 30px; padding: 6px 0; text-align: center; font-size: 15px; line-height: 1; }

.ps-modes { display: flex; gap: 2px; background: var(--bg-3); padding: 3px; border-radius: 8px; }
.ps-mode {
  border: 0; background: transparent; color: var(--ink-dim);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
  font-family: inherit; display: flex; align-items: center; gap: 6px;
}
.ps-mode.active { background: #2d7ff9; color: #fff; font-weight: 600; }

.ps-btn {
  border: 1px solid var(--line); background: var(--bg-3); color: var(--ink);
  padding: 7px 13px; border-radius: 7px; cursor: pointer; font-size: 13px;
  font-family: inherit;
}
.ps-btn:hover { border-color: var(--accent); color: var(--accent); }
.ps-btn.primary { background: var(--accent); color: #14181d; border-color: var(--accent); font-weight: 600; }
.ps-btn.primary:hover { filter: brightness(1.08); color: #14181d; }

/* ------------------------------------------------------------------- Gövde */
.ps-body { display: flex; flex: 1; min-height: 0; }

/* Sol kütüphane */
.ps-lib {
  width: 178px; flex-shrink: 0; background: var(--bg-2);
  border-right: 1px solid var(--line); overflow-y: auto; padding: 10px;
}
.ps-lib h4 {
  margin: 12px 0 6px; font-size: 10px; letter-spacing: .9px;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
}
.ps-lib h4:first-child { margin-top: 0; }
.ps-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; margin-bottom: 3px;
  background: var(--bg-3); border: 1px solid transparent; border-radius: 6px;
  color: var(--ink-dim); font-size: 12px; cursor: pointer; text-align: left;
  font-family: inherit;
}
.ps-item:hover { border-color: var(--accent); color: var(--ink); }
.ps-item .dot { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }

/* Çizim alanı */
.ps-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.ps-views { flex: 1; min-height: 0; display: flex; }
.ps-view { flex: 1; min-width: 0; position: relative; overflow: auto; }
.ps-view.hidden { display: none; }
.ps-view + .ps-view { border-left: 1px solid var(--line); }
.ps-view { cursor: default; }
.ps-view.panning { cursor: grabbing; }
.panosim.mode-move .ps-view .el { cursor: move; }

.ps-paper { background: var(--paper); width: 100%; height: 100%; display: block; }
.ps-viewlabel {
  position: absolute; top: 8px; left: 10px; z-index: 5;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: #8496a6; background: rgba(255,255,255,.85);
  padding: 3px 8px; border-radius: 4px; pointer-events: none;
}

/* Sağ durum paneli */
.ps-side {
  width: 258px; flex-shrink: 0; background: var(--bg-2);
  border-left: 1px solid var(--line); overflow-y: auto; padding: 12px;
}
.ps-side h4 {
  margin: 14px 0 7px; font-size: 10px; letter-spacing: .9px;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
}
.ps-side h4:first-child { margin-top: 0; }

/* Çizim alanında yazı seçilmesin — sürükleme sırasında metin seçimi oluşuyordu */
.panosim svg { -webkit-user-select: none; user-select: none; }

.ps-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 8px; background: var(--bg-3); border-radius: 5px;
  margin-bottom: 3px; font-size: 12px;
}
.ps-row .k { color: var(--ink-dim); }
.ps-row .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.ps-row .v.on  { color: var(--ok); }
.ps-row .v.off { color: var(--ink-faint); }
.ps-row .v.bad { color: var(--err); }

/* Dikey satır: başlık üstte, seçenekler altta tam genişlikte */
.ps-row.col { flex-direction: column; align-items: stretch; gap: 5px; }

/* Üçlü seçim düğmesi (ör. malzeme aralığı) */
.ps-seg { display: flex; gap: 3px; }
.ps-seg button {
  flex: 1; padding: 5px 6px; font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--ink-dim); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 5px; cursor: pointer;
}
.ps-seg button:hover { color: var(--ink); border-color: var(--accent); }
.ps-seg button.on {
  color: #0b1220; background: var(--accent); border-color: var(--accent);
}

.ps-fault {
  padding: 9px 11px; border-radius: 6px; font-size: 12px; line-height: 1.45;
  background: rgba(248,81,73,.13); border: 1px solid rgba(248,81,73,.4);
  color: #ffb4ae; margin-bottom: 6px;
}
.ps-okmsg {
  padding: 9px 11px; border-radius: 6px; font-size: 12px;
  background: rgba(63,185,80,.12); border: 1px solid rgba(63,185,80,.35);
  color: #7ee787;
}

.ps-test { margin-top: 4px; }
.ps-test-row {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 5px 7px; font-size: 12px; border-radius: 5px; margin-bottom: 2px;
  background: var(--bg-3); line-height: 1.35;
}
.ps-test-row .mark { flex-shrink: 0; font-weight: 700; width: 14px; }
.ps-test-row.pass .mark { color: var(--ok); }
.ps-test-row.fail .mark { color: var(--err); }
.ps-test-row.fail { background: rgba(248,81,73,.1); }

.ps-hint { font-size: 11px; color: var(--ink-faint); line-height: 1.5; margin-top: 8px; }
.ps-hint kbd {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 3px;
  padding: 1px 5px; font-family: inherit; font-size: 10px;
}

/* Alt bilgi çubuğu */
.ps-status {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 14px; background: var(--bg-2);
  border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-dim);
  flex-shrink: 0;
}
.ps-status .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 20px; background: var(--bg-3);
}
.ps-status .pill i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint);
  display: inline-block;
}
.ps-status .pill.live i { background: var(--ok); box-shadow: 0 0 7px var(--ok); }
.ps-status .pill.bad i  { background: var(--err); box-shadow: 0 0 7px var(--err); }

/* =============================================================================
   ŞEMA SEMBOLLERİ
   ============================================================================= */
.panosim .sym-txt { font-family: "Segoe UI", Arial, sans-serif; fill: var(--paper-ink); }
/* Etiketlerin arkasına kâğıt rengi halka: üzerinden kablo geçse de okunur kalır */
.panosim .dev-lbl, .panosim .pin-lbl, .panosim .rail-lbl,
.panosim .dev-sub, .panosim .note, .panosim .note-sm {
  paint-order: stroke fill;
  stroke: var(--paper);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.panosim .dev-lbl  { font-size: 13px; font-weight: 700; }
.panosim .dev-sub  { font-size: 10px; fill: #6a7c8c; }
.panosim .pin-lbl  { font-size: 9px;  fill: #7d8f9e; }
.panosim .rail-lbl { font-size: 11px; font-weight: 700; }
.panosim .motor-m   { font-size: 22px; font-weight: 700; }
.panosim .motor-sub { font-size: 11px; fill: #6a7c8c; }

.panosim .note    { font-size: 15px; font-weight: 700; fill: #55677a; letter-spacing: 1.6px; }
.panosim .note-sm { font-size: 11px; fill: #7d8f9e; letter-spacing: .3px; }

.panosim .lead   { stroke: #45535f; stroke-width: 1.8; fill: none; }
.panosim .blade  { stroke: #22303c; stroke-width: 2.4; fill: none; stroke-linecap: round;
                   transition: d .09s linear; }
.panosim .gang   { stroke: #8fa0ae; stroke-width: 1.3; stroke-dasharray: 3 3; fill: none; }
.panosim .sym-box  { fill: #fff; stroke: #22303c; stroke-width: 1.8; }
.panosim .sym-thin { stroke: #22303c; stroke-width: 1.4; fill: none; }
.panosim .node-dot { fill: #22303c; }
.panosim .junction { fill: #22303c; }

.panosim .rail { stroke-width: 2.6; fill: none; }
.panosim .rail-L1 { stroke: var(--w-L1); }
.panosim .rail-L2 { stroke: var(--w-L2); }
.panosim .rail-L3 { stroke: var(--w-L3); }
.panosim .rail-N  { stroke: var(--w-N); }
.panosim .rail-PE { stroke: var(--w-PE); stroke-dasharray: 9 4; }

/* Teller */
.panosim .wire { fill: none; stroke-width: 2.1; opacity: .32; transition: opacity .1s; }
.panosim .wire.live {
  opacity: 1; stroke-width: 2.6;
  filter: drop-shadow(0 0 2px rgba(255,205,60,.95)) drop-shadow(0 0 6px rgba(255,190,40,.6));
}
.panosim .wire-L1 { stroke: var(--w-L1); }
.panosim .wire-L2 { stroke: var(--w-L2); }
.panosim .wire-L3 { stroke: var(--w-L3); }
.panosim .wire-N  { stroke: var(--w-N); }
.panosim .wire-PE { stroke: var(--w-PE); }
.panosim .wire-CTRL { stroke: var(--w-CTRL); }
.panosim .wire-TURUNCU { stroke: var(--w-TURUNCU); }
.panosim .wire-SARI    { stroke: var(--w-SARI); }
.panosim .wire-MOR     { stroke: var(--w-MOR); }
.panosim .wire-LACIVERT { stroke: var(--w-LACIVERT); }
.panosim .wire-PEMBE   { stroke: var(--w-PEMBE); }
.panosim .wire-TURKUAZ { stroke: var(--w-TURKUAZ); }
.panosim .wire-hit { stroke: transparent; stroke-width: 7; fill: none; pointer-events: none; }
.panosim.mode-wire .wire-hit { pointer-events: stroke; cursor: pointer; }
.panosim.mode-wire .swire:hover .wire {
  stroke: #2d7ff9 !important; opacity: 1; stroke-width: 3.4;
  filter: drop-shadow(0 0 4px rgba(45,127,249,.9));
}

/* Pinler */
.panosim .pin { fill: transparent; stroke: transparent; stroke-width: 2; cursor: crosshair; }
.panosim.mode-wire .pin { fill: rgba(45,127,249,.16); stroke: #2d7ff9; }
.panosim.mode-wire .pin:hover { fill: rgba(45,127,249,.5); }
.panosim .pin.sel { fill: #2d7ff9 !important; stroke: #fff; }
/* Bara üzerindeki eşit aralıklı tutamaklar SADECE bağlanabilecek yerlerdir;
   gerçek ek noktasıyla karışmasın diye soluk ve incedir. */
.panosim.mode-wire .pin-rail { fill: rgba(45,127,249,.07); stroke: rgba(45,127,249,.38);
                               stroke-width: 1.2; }
.panosim.mode-wire .pin-rail:hover { fill: rgba(45,127,249,.5); stroke: #2d7ff9;
                                     stroke-width: 2; }
/* Telin baraya indiği GERÇEK ek noktası */
.panosim .rail-tap { fill: #22303c; stroke: #fff; stroke-width: 1.1; }

/* Bobin */
.panosim .coil-box { transition: fill .12s, stroke .12s; }
.panosim .coil-box.energized { fill: #ffe9c2; stroke: #d98b1f; }

/* Lambalar */
.panosim .lamp-glow { fill: transparent; opacity: 0; transition: opacity .12s; }
.panosim .lamp-glow.on { opacity: .55; }
.panosim .glow-yesil.on   { fill: #35d05a; }
.panosim .glow-kirmizi.on { fill: #ff5f56; }
.panosim .lamp-body { transition: fill .12s; }
.panosim .lamp-body.on.lamp-yesil   { fill: #4ade6a; stroke: #1f7a34; }
.panosim .lamp-body.on.lamp-kirmizi { fill: #ff6b60; stroke: #a32a20; }

/* Motor */
.panosim .motor-body.running { fill: #eaf7ec; stroke: #2e7d43; }
.panosim .motor-rot {
  fill: none; stroke: #2e7d43; stroke-width: 2; opacity: 0;
  transform-origin: center; transform-box: fill-box;
}
.panosim .motor-rot.spin { animation: ps-spin 1s linear infinite; }
.panosim .motor-rot.spin.rev { animation-direction: reverse; }

.panosim .tripped .blade { stroke: var(--err); }

@keyframes ps-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* =============================================================================
   PANO GÖRÜNÜMÜ
   ============================================================================= */
.panosim .p-txt { font-family: "Segoe UI", Arial, sans-serif; fill: #2b3742; }

/* Panodaki bütün yazılar BEYAZ ve koyu hâleli çizilir.
   Hâle (paint-order: stroke) sayesinde yazı, altından kablo veya koyu gövde
   geçse de okunur kalır — panoda hiçbir etiket kaybolmaz. */
.panosim .p-lbl, .panosim .p-lbl-sm, .panosim .p-lbl-xs,
.panosim .p-term, .panosim .p-cap, .panosim .p-tag,
.panosim .term-no, .panosim .cs-lbl {
  paint-order: stroke fill;
  stroke: rgba(10,14,18,.92);
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.panosim .p-lbl    { font-size: 13px; font-weight: 700; fill: #ffffff; }
.panosim .p-lbl-sm { font-size: 11px; font-weight: 700; fill: #f4f7fa; }
.panosim .p-lbl-xs { font-size: 9.5px; font-weight: 600; fill: #e3e9ef; }
/* RESET ve TEST yazıları yan yana "RESETTEST" gibi okunuyordu */
.panosim .p-lbl-xxs { font-size: 7.6px; font-weight: 600; fill: #e3e9ef; letter-spacing: .2px; }
.panosim .p-term   { font-size: 8.5px; font-weight: 600; fill: #eef2f6; }
.panosim .p-cap    { font-size: 9px; letter-spacing: 1.2px; font-weight: 600; fill: #eef2f6; }

.panosim .cabinet { fill: #9aa6b1; stroke: #6f7d89; stroke-width: 2; }
.panosim .plate   { fill: url(#plate); stroke: #aab6c1; }
.panosim .din-rail{ fill: #c3ccd4; stroke: #9aa6b1; }
.panosim .duct    { fill: #dfe4e9; stroke: #b8c2cb; }
/* DİKEY KANAL — plakanın sol ve sağ kenarı (MEHMET, 6 Eylül).
   Yatay kanalla aynı malzeme; ayrı sınıf, ölçüm ikisini ayırabilsin. */
.panosim .vduct   { fill: #dfe4e9; stroke: #b8c2cb; }
/* Kontaktörde ana bölüm ile yardımcı bölüm arasındaki kalıp dikişi */
.panosim .kont-seam { stroke: #1b2026; stroke-width: 1.1; opacity: .55; }
/* Yardımcı kontak ekleme düğmesi (MEHMET, 7 Eylül) */
.panosim .kont-ekle-kutu { fill: #3a444e; stroke: #8b97a3; stroke-width: 1; }
.panosim .kont-ekle-arti { stroke: #dbe3ea; stroke-width: 1.8; stroke-linecap: round; }
.panosim .kont-ekle:hover .kont-ekle-kutu { fill: #4d5a66; stroke: #cfd8e0; }
.panosim .ps-cmenu-row.pasif { opacity: .45; }
.panosim .duct-slot { stroke: #c8d1d8; stroke-width: 3; }
/* KABLO RAKORU — motor kablosunun pano dışına çıktığı nokta */
.panosim .rakor-govde { fill: #9aa4ad; stroke: #6d7780; stroke-width: 1.2; }
.panosim .rakor-somun { fill: #b3bcc4; stroke: #6d7780; stroke-width: 1.2; }
.panosim .rakor-agiz  { fill: #2f3740; stroke: #59636c; stroke-width: 1.2; }
.panosim .rakor-yazi  { font-size: 8px; font-weight: 700; fill: #6b7681; letter-spacing: .4px; }
.panosim .door    { fill: url(#metal); stroke: #7e8b97; stroke-width: 2; }

.panosim .clickable { cursor: pointer; }

/* Otomat */
.panosim .mcb-body  { fill: #f4f5f0; stroke: #b9beb6; }
.panosim .mcb-window{ fill: url(#mcbWin); }
.panosim .mcb-seam  { stroke: #d6dad2; stroke-width: 1; }
.panosim .term-slot { fill: #cdd3d8; stroke: #aeb7bf; }
/* MANDAL MAVİ — gerçek otomatta olduğu gibi; koyu pencerenin önünde
   ayırt edilebilsin (MEHMET, 6 Eylül: "ikisi de siyah, ayrıştırılamıyor").
   Üç kutup TEK GRUPTA taşınır, o yüzden geçiş grubun transform'unda. */
/* MANDAL — kalıp plastiği gibi: enine geçişli renk (soldan ışık),
   altında oyuğa düşen gölge, sol kenarda ince ışık, yüzünde tutma olukları.
   Düz dolgu "kalemle çizilmiş" duruyordu (MEHMET). Geçiş yok — gerçek
   otomat mandalı kaymaz, atar. */
.panosim .mcb-lever  { fill: url(#mcbLever); stroke: #133b7d; stroke-width: .7; }
.panosim .mcb-lever-golge { fill: #000; opacity: .38; pointer-events: none; }
.panosim .mcb-lever-kenar { fill: #cfe6ff; opacity: .5; pointer-events: none; }
.panosim .mcb-oluk   { fill: #0d2f63; opacity: .34; pointer-events: none; }
/* Serbest uçtaki PARLAMA — ayrı bir renk değil, ışığın yansıması.
   Beyazdan saydama iner; altındaki mavi görünmeye devam eder, o yüzden
   kenarlığı da yok (MEHMET: "ayrı bir çizim gibi durmasın"). */
.panosim .mcb-cap    { fill: url(#mcbGlossUst); stroke: none; pointer-events: none; }
.panosim .mcb-leverg.alt .mcb-cap { fill: url(#mcbGlossAlt); }
/* üç kutbu birleştiren bağ çubuğu — 3 fazlı otomatın imzası */
.panosim .mcb-tie    { fill: url(#mcbTie); stroke: #133b7d; stroke-width: .7; }
.panosim .mcb-tie-isik { fill: #bcd9ff; opacity: .42; pointer-events: none; }
/* KIRMIZI ALAN BİR OYUK — yüzeyin altında. Mandal oraya girip
   gözden kayboluyormuş gibi dursun (MEHMET).
   ağız: yuvanın çevresine düşen gölge · iç gölge: üst duvardan içeri
   düşen karanlık · yan: yuvanın duvarları · pah: alt kenarın ışığı. */
.panosim .mcb-oyuk-agiz   { fill: #000; opacity: .5; pointer-events: none; }
.panosim .mcb-flag        { fill: url(#mcbFlag); pointer-events: none; }
.panosim .mcb-oyuk-icgolge{ fill: url(#mcbOyuk); pointer-events: none; }
.panosim .mcb-oyuk-yan    { fill: #4a0f06; opacity: .55; pointer-events: none; }
.panosim .mcb-oyuk-pah    { fill: #ffb9ab; opacity: .32; pointer-events: none; }
/* mandalın oyuğa giren ucu — yüzeyin altına dalıyor */
.panosim .mcb-giris       { fill: url(#mcbGolgeAlt); pointer-events: none; }
.panosim .mcb-leverg.alt .mcb-giris { fill: url(#mcbGolgeUst); }
.panosim .mcb-body:hover { stroke: var(--accent); }
.panosim .tripped .mcb-flag { fill: #ff8c00; }
.panosim .tripped .mcb-lever { fill: #b06a1f; }

/* Kontaktör */
/* --- KONTAKTÖR KALIBI (MEHMET, 13 Eylül) -------------------------------
   Üç bant: açık gri klemens bloğu / koyu orta gövde / açık gri blok.    */
.panosim .kont-golge  { fill: #0b1116; opacity: .22; }
.panosim .kont-body   { fill: url(#kontOrta); stroke: #12171b; }
.panosim .kont-blok   { fill: url(#kontGri); stroke: #8d98a2; stroke-width: .8; }
.panosim .kont-blok.alt { fill: url(#kontGriTers); }
.panosim .kont-isik   { fill: url(#kontIsik); pointer-events: none; }
.panosim .kont-nervur { stroke: #10151a; stroke-width: 1.6; opacity: .45; }
.panosim .kont-dikis  { stroke: #0e1317; stroke-width: 1; opacity: .7; }
.panosim .kont-icgolge { fill: url(#kontIcGolge); pointer-events: none; }
.panosim .kont-icgolge.alt { fill: url(#kontIcGolgeAlt); }
.panosim .kont-basamak { stroke: #ffffff; stroke-width: .9; opacity: .38; }
.panosim .kont-yan.sol { fill: url(#kontYanSol); pointer-events: none; }
.panosim .kont-yan.sag { fill: url(#kontYanSag); pointer-events: none; }
.panosim .kont-face { fill: #383f47; stroke: #22282e; }
.panosim .kont-aux  { fill: url(#kontGri); stroke: #8d98a2; stroke-width: .8; }
.panosim .kont-aux-pencere { fill: url(#kontOrta); stroke: #141a1f; stroke-width: .8;
                             pointer-events: none; }
/* Eklediğim SÜS parçalarının hiçbiri dokunuşu yakalamamalı: `olc-dokunma`
   kapısı kırmızı yandı — tek parmakla kaydırma çalışmıyordu, çünkü kapak
   cihazlarının üstündeki koyu pencere parmağı yutuyordu. */
.panosim .kont-blok, .panosim .kont-golge, .panosim .kont-basamak,
.panosim .kont-nervur, .panosim .kont-dikis { pointer-events: none; }
/* Açık gri kalıbın üstündeki yazı koyu olur — beyaz okunmaz */
.panosim .p-tag.koyu { fill: #2b343d; }
.panosim .kont-arm  { fill: #6b7681; transition: y .07s; }
.panosim .pulled .kont-arm { fill: var(--accent); }
.panosim .kont-led  { fill: #3a424a; stroke: #23292f; }
.panosim .kont-led.on { fill: #ffb62e; stroke: #b87c14; filter: drop-shadow(0 0 5px #ffb62e); }

/* Termik */
.panosim .term-body { fill: #3b444d; stroke: #232a30; }
.panosim .dial { fill: #cfd6dc; stroke: #8d99a4; stroke-width: 2; }
.panosim .dial-needle { stroke: #d64533; stroke-width: 2; }
.panosim .btn-reset { fill: #4f7fd6; stroke: #2f5bab; }
.panosim .btn-test  { fill: #c9ced3; stroke: #98a1a9; }
.panosim .trip-flag { fill: #4a535c; transition: fill .12s; }
.panosim .trip-flag.on { fill: #ff8c00; }

/* Klemens */
.panosim .klemens { fill: #d8dee3; stroke: #a9b3bb; }
.panosim .klemens-screw { fill: #9aa4ad; }

/* Kapak butonları */
.panosim .pb-ring  { fill: #cfd6dc; stroke: #a3aeb8; }
.panosim .pb-bezel { fill: #3a4249; }
.panosim .pb-cap   { stroke: #23282d; stroke-width: 1.5; transition: r .06s, filter .1s; }
.panosim .pb-yesil   { fill: #2fa84f; }
.panosim .pb-kirmizi { fill: #d63a2b; }
.panosim .pb-sari    { fill: #d9a411; }
.panosim .pb-mavi    { fill: #2f6fd0; }
.panosim .pb-siyah   { fill: #2a2f36; }
.panosim .pb-beyaz   { fill: #dfe4e9; }
.panosim .pressed .pb-cap { r: 16; filter: brightness(.78); }
.panosim .pb-mark  { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.panosim .pb-mark-fill { fill: #fff; }

/* ACİL STOP — mantar başlık. Stop butonundan ayrılması gereken bir
   cihaz; kilitli kaldığı (basılı) hâli de bakışta belli olmalı, çünkü
   sim'de acil stop mandallı çalışıyor (basınca kilitlenir, tekrar
   basınca kurtulur). Basılıyken başlık küçülüp koyulaşıyor. */
.panosim .es-zemin  { fill: #e8c520; stroke: #a8890b; stroke-width: 1; }
.panosim .es-mantar { fill: #d0271b; stroke: #7d1610; stroke-width: 1.4;
                      transition: r .07s, filter .1s; }
.panosim .es-tepe   { fill: #e0392b; stroke: #a11d14; stroke-width: .8;
                      pointer-events: none; }
.panosim .es-ok     { fill: none; stroke: #fff; stroke-width: 1.9;
                      stroke-linecap: round; pointer-events: none; }
.panosim .es-ok-uc  { fill: #fff; pointer-events: none; }
.panosim .pressed .es-mantar { r: 27; filter: brightness(.74); }
.panosim .pressed .es-tepe   { r: 19; filter: brightness(.74); }

/* Kapak lambaları */
/* SİNYAL LAMBASI — yanan renk her renk için TANIMLI olmalı.
   MEHMET, 7 Eylül: "yıldızda çalışırken yıldız lambası yanmıyor."
   Sebebi buydu: yıldız lambası SARI, ama yalnız yeşil ve kırmızı için
   yanan renk yazılmıştı. Devre doğru çalışıyor, lambaya 'on' sınıfı da
   geliyordu; sarıda karşılığı olmadığı için lamba sönük görünüyordu. */
.panosim .pl-lens { fill: #4b545c; stroke: #2b3238; transition: fill .1s; }
.panosim .pl-lens.on.pl-yesil   { fill: #46e06a; }
.panosim .pl-lens.on.pl-kirmizi { fill: #ff5f4f; }
.panosim .pl-lens.on.pl-sari    { fill: #ffd23f; }
.panosim .pl-lens.on.pl-mavi    { fill: #4db4ff; }
.panosim .pl-lens.on.pl-beyaz   { fill: #f3f6fa; }
.panosim .lamp-halo { fill: transparent; opacity: 0; transition: opacity .12s; }
.panosim .lamp-halo.on { opacity: .5; }
.panosim .halo-yesil.on   { fill: #46e06a; }
.panosim .halo-kirmizi.on { fill: #ff5f4f; }
.panosim .halo-sari.on    { fill: #ffd23f; }
.panosim .halo-mavi.on    { fill: #4db4ff; }
.panosim .halo-beyaz.on   { fill: #f3f6fa; }

/* Motor */
.panosim .motor-shell { fill: #4a606f; stroke: #33454f; }
.panosim .motor-fin   { stroke: #5d7686; stroke-width: 2; }
.panosim .motor-box   { fill: #37474f; stroke: #263238; }
.panosim .motor-foot  { fill: #37474f; }
.panosim .motor-fanhouse { fill: #3e5260; stroke: #2b3a44; }
.panosim .motor-blade { fill: #7b93a3; }
.panosim .motor-shaft { fill: #b0bec5; }
.panosim .motor-wheel { fill: #546e7a; stroke: #37474f; }
.panosim .spoke { stroke: #90a4ae; stroke-width: 2.5; }
.panosim .motor-blades, .panosim .motor-spokes {
  transform-origin: center; transform-box: fill-box;
}
.panosim .motor-blades.spin, .panosim .motor-spokes.spin {
  animation: ps-spin .4s linear infinite;
}
.panosim .motor-blades.rev, .panosim .motor-spokes.rev { animation-direction: reverse; }
.panosim .running .motor-shell { fill: #3f6b58; }
.panosim .dir-arrow { stroke: #2e7d43; stroke-width: 2.5; fill: none; opacity: 0; }
.panosim .dir-arrow.on { opacity: 1; }
.panosim .dir-arrow.rev { transform: scaleX(-1); transform-origin: 155px 32px; }

/* ---------------------------------------------- Pano: klemens uçları + kablo */
/* --- VİDALI KLEMENS (MEHMET, 13 Eylül) ---------------------------------
   Düz gri kare + düz gri daire yerine: kalıp plastiğinin içine açılmış
   bir oyuk, oyuğun dibinde metal vida başı, üstünde tek parlama.
   `term-pad`/`term-screw` adları korunuyor; kablola ve seçili kuralları
   bu ikisine renk basıyor, öteki üç parça süs.                            */
.panosim .term-pad    { fill: #cbd4dc; stroke: #94a1ac; stroke-width: 1; }
.panosim .term-oyuk   { fill: url(#klemensOyuk); stroke: #5c6873;
                        stroke-width: .6; pointer-events: none; }
.panosim .term-screw  { fill: url(#klemensMetal); }
.panosim .term-yarik  { stroke: #43290d; stroke-width: 1.05; stroke-linecap: round;
                        opacity: .78; pointer-events: none; }
.panosim .term-parlama{ fill: #fff9ef; opacity: .68; pointer-events: none; }
/* Klemens renk kodu (MEHMET, 13 Eylül): NC sarı · NO yeşil ·
   lamba L kahverengi / N mavi. Yalnız YUVAyı boyar, vida pirinç kalır.
   Kablola ve seçili kuralları bu satırlardan SONRA geldiği için
   üzerine yazar — renk kodu kip renklerini gölgelemez. */
.panosim .term.uc-nc .term-pad { fill: #f2d24a; stroke: #a8860d; }
.panosim .term.uc-no .term-pad { fill: #7bd88f; stroke: #2f8b45; }
.panosim .term.uc-l  .term-pad { fill: #c98a4b; stroke: #7d4d1c; }
.panosim .term.uc-n  .term-pad { fill: #7fc3ea; stroke: #2c6d94; }
/* Kablola kipinde ve seçiliyken renk okunur kalsın: süs parçaları solar */
.panosim.mode-wire .term-oyuk,
.panosim .term.sel .term-oyuk   { opacity: .35; }
.panosim.mode-wire .term:hover .term-yarik,
.panosim.mode-wire .term:hover .term-parlama,
.panosim .term.sel .term-parlama { opacity: 0; }
.panosim .term-hit   { fill: transparent; stroke: transparent; pointer-events: none; }
.panosim .term-no    { font-size: 9px; fill: #ffffff; font-weight: 700; }

.panosim.mode-wire .term-hit { pointer-events: all; cursor: crosshair; }
.panosim.mode-wire .term .term-pad { fill: #cfe2ff; stroke: #2d7ff9; }
.panosim.mode-wire .term:hover .term-pad { fill: #2d7ff9; }
.panosim.mode-wire .term:hover .term-screw { fill: #fff; }
.panosim .term.sel .term-pad { fill: #ffb62e !important; stroke: #b87c14; }
.panosim .term.sel .term-screw { fill: #3a2a00; }

/* ---- Kablo: yuvarlak, üç boyutlu görünüm --------------------------------
   Gerçek bir kabloya bakınca üç şey görülür: plakaya düşen gölgesi, ışığın
   değmediği koyu kenarı ve üstündeki parlama. Üçü de aynı yolun üstüne
   ayrı kalınlıkta çizilir; böylece kablo yatay da olsa dikey de olsa
   silindir gibi durur. Işık sol üstten gelir — parlama o yöne kaydırılır. */
.panosim .pw { fill: none; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.panosim .pwire.live .pw { opacity: 1; stroke-width: 4.8; }
.panosim .pw.live { opacity: 1; stroke-width: 4.8; }

/* plakaya düşen gölge — kabloyu yüzeyden kaldırır */
.panosim .pw-shadow { fill: none; stroke: rgba(0,0,0,.22); stroke-width: 5.6;
                      stroke-linecap: round; stroke-linejoin: round;
                      transform: translate(1.1px, 1.7px); }
.panosim .pwire.live .pw-shadow { stroke-width: 6.2; }

/* koyu dış kenar — kablonun yuvarlaklığı buradan okunur */
.panosim .pw-rim { fill: none; stroke: rgba(0,0,0,.42); stroke-width: 5.7;
                   stroke-linecap: round; stroke-linejoin: round; }
.panosim .pwire.live .pw-rim { stroke-width: 6.3; }

/* geniş, yumuşak aydınlık — gövdenin ortasını kabartır */
.panosim .pw-hi { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 2.2;
                  stroke-linecap: round; stroke-linejoin: round;
                  transform: translate(-0.35px, -0.5px); pointer-events: none; }
.panosim .pwire.live .pw-hi { stroke: rgba(255,255,255,.2); stroke-width: 2.5; }

/* ince parlama çizgisi — ışık sol üstten gelir */
.panosim .pw-spec { fill: none; stroke: rgba(255,255,255,.55); stroke-width: .85;
                    stroke-linecap: round; stroke-linejoin: round;
                    transform: translate(-0.85px, -1.05px); pointer-events: none; }
.panosim .pwire.live .pw-spec { stroke: rgba(255,255,255,.7); stroke-width: .95; }
/* Enerjili kabloda sarı parlama */
.panosim .pw-glow {
  fill: none; stroke: #ffd24a; stroke-width: 11; stroke-linecap: round;
  stroke-linejoin: round; opacity: 0; filter: blur(5px); transition: opacity .15s;
}
.panosim .pw-glow.live { opacity: .5; }
.panosim .pw-L1 { stroke: var(--w-L1); }
.panosim .pw-L2 { stroke: var(--w-L2); }
.panosim .pw-L3 { stroke: var(--w-L3); }
.panosim .pw-N  { stroke: var(--w-N); }
.panosim .pw-PE { stroke: var(--w-PE); }
.panosim .pw-CTRL { stroke: var(--w-CTRL); }
.panosim .pw-TURUNCU { stroke: var(--w-TURUNCU); }
.panosim .pw-SARI    { stroke: var(--w-SARI); }
.panosim .pw-MOR     { stroke: var(--w-MOR); }
.panosim .pw-LACIVERT { stroke: var(--w-LACIVERT); }
.panosim .pw-PEMBE   { stroke: var(--w-PEMBE); }
.panosim .pw-TURKUAZ { stroke: var(--w-TURKUAZ); }
.panosim .pw-hit { fill: none; stroke: transparent; stroke-width: 7; pointer-events: none; }
.panosim.mode-wire .pw-hit { pointer-events: stroke; cursor: pointer; }
/* Üzerine gelinen kablo mavi yanar — dar tolerans sayesinde bitişik
   kablolar arasında doğru olan seçilir */
.panosim.mode-wire .pwire:hover .pw {
  stroke: #2d7ff9; stroke-width: 6.5;
  filter: drop-shadow(0 0 4px rgba(45,127,249,.9));
}
.panosim.mode-wire .pwire:hover .pw-shadow { stroke: rgba(45,127,249,.3); stroke-width: 12; transform: none; }
.panosim.mode-wire .pwire:hover .pw-glow { opacity: 0; }
/* seçili kabloda mavi net görünsün — kenar ve parlama çekilir */
.panosim.mode-wire .pwire:hover .pw-rim { opacity: 0; }
.panosim.mode-wire .pwire:hover .pw-hi,
.panosim.mode-wire .pwire:hover .pw-spec { opacity: .5; }

.panosim .inblock  { fill: #cbd3da; stroke: #a5b0ba; }
.panosim .bar      { stroke: #8d99a4; }
.panosim .bar-n    { fill: #7ea6de; }
.panosim .bar-pe   { fill: #7fc48f; }
.panosim .bar-screw{ fill: #4d5a66; }
.panosim .klem-L1 { fill: #c9b09a; } .panosim .klem-L2 { fill: #b4b4b4; }
.panosim .klem-L3 { fill: #cfcfcf; } .panosim .klem-N  { fill: #a9c4e8; }
.panosim .klem-PE { fill: #a8d8b4; }
.panosim .contact-block { fill: url(#kontGri); stroke: #8d98a2; stroke-width: .8; }
/* KÖPRÜ KONTAK — sabit kontaklar gümüş, köprü ve piston hareketli.
   Değdiğinde köprü yeşile döner: akım geçiyor demektir. */
.panosim .kp-sabit  { fill: #c9d2da; stroke: #7d8995; stroke-width: .7; }
.panosim .kp-piston { fill: #96a3ae; stroke: #67727c; stroke-width: .7; }
.panosim .kp-kopru  { fill: #dde4ea; stroke: #7d8995; stroke-width: .7; }
.panosim .kp-hareket { transition: transform .07s ease-out; }
/* Tabla inince AÇIK köprüler değer (yeşil), KAPALI köprüler ayrılır (gri).
   Ters köprü boştayken yeşildir — devre o an kapalıdır. */
.panosim .kp-kopru.ters { fill: #46d16b; stroke: #2f8b45; }
.panosim .kp-hareket.degdi .kp-kopru { fill: #46d16b; stroke: #2f8b45; }
.panosim .kp-hareket.degdi .kp-kopru.ters { fill: #dde4ea; stroke: #7d8995; }
.panosim .kont-coilblock { fill: url(#kontGri); stroke: #8d98a2; stroke-width: .8; }
.panosim .mcb-hit, .panosim .pb-hit { fill: transparent; }

/* Seçim ve silme */
.panosim .el.sel .sym-box,
.panosim .el.sel .lamp-body,
.panosim .el.sel .motor-body { stroke: #2d7ff9; stroke-width: 2.6; }
.panosim .el.sel { filter: drop-shadow(0 0 6px rgba(45,127,249,.75)); }
.ps-btn.wide { display: block; width: 100%; margin-top: 6px; text-align: left; }
.ps-btn.danger { border-color: rgba(248,81,73,.5); color: #ff9d95; }
.ps-btn.danger:hover { border-color: var(--err); color: #fff; background: rgba(248,81,73,.22); }
.panosim .p-mark { font-size: 9px; fill: #8b9199; font-weight: 700; }

.panosim .skin-img { }
.panosim .skin-frame { fill: none; stroke: #7e8b97; stroke-width: 1.5; opacity: .5; }
.panosim .pdev.sel .skin-frame { stroke: #2d7ff9; stroke-width: 2.5; opacity: 1; }

/* Menüde renk grubu başlığı */
.ps-cmenu-g {
  font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink-faint); padding: 7px 8px 3px;
}

/* Panoda seçili cihaz */
.panosim.mode-move .pdev { cursor: pointer; }
.panosim .pdev.sel { filter: drop-shadow(0 0 7px rgba(45,127,249,.95)); }
.panosim .pdev.sel .kont-body, .panosim .pdev.sel .term-body,
.panosim .pdev.sel .mcb-body, .panosim .pdev.sel .pb-ring,
.panosim .pdev.sel .motor-shell, .panosim .pdev.sel .bin-chip { stroke: #2d7ff9; stroke-width: 2.5; }
/* Elle yolu ayarlanmış kablo */
.panosim .pw.manual { stroke-dasharray: none; }
.panosim.mode-wire .pw.manual { filter: drop-shadow(0 0 2px rgba(45,127,249,.5)); }

/* Malzeme kutusu */
.panosim .bin { fill: #cbd3da; stroke: #a5b0ba; stroke-dasharray: 6 4; }
.panosim .bin-chip { fill: #3b444d; stroke: #232a30; }
.panosim .bin-item:hover .bin-chip { stroke: var(--accent); stroke-width: 2; }

/* Kontak sembolleri — cihazların üzerinde gerçekten açılıp kapanır */
.panosim .cs-lead  { stroke: #93a6b4; stroke-width: 1.6; fill: none; }
.panosim .cs-dot   { fill: #c3d0da; }
.panosim .cs-blade { stroke: #e6eef5; stroke-width: 2.8; fill: none; stroke-linecap: round; }
.panosim .cs-blade.closed { stroke: #4ade6a; filter: drop-shadow(0 0 3px rgba(74,222,106,.65)); }
.panosim .cs-bar   { stroke: #93a6b4; stroke-width: 2.2; }
.panosim .cs-lbl   { font-size: 9px; fill: #dbe3ea; font-weight: 700; letter-spacing: .4px; }

.panosim .kont-window { fill: url(#kontPencere); stroke: #12171b; }
.panosim .heater      { fill: #2b333a; stroke: #1b2126; }
.panosim .p-tag   { font-size: 8.5px; fill: #cfd8e0; font-weight: 600; letter-spacing: .5px; }
.panosim .p-state { font-size: 9px; font-weight: 700; fill: #7f8f9c; }
.panosim .p-state.on  { fill: #2e9e4f; }
.panosim .p-state.off { fill: #8a97a3; }
.panosim .p-state.bad { fill: #d64533; }
.panosim .pl-mini { fill: #5a646d; stroke: #39424a; }

/* Kablo rengi seçici */
.ps-colors { display: none; gap: 4px; align-items: center; margin-left: 8px; }
.panosim.mode-wire .ps-colors { display: flex; }
.ps-collbl { font-size: 11px; color: var(--ink-faint); margin-right: 2px; white-space: nowrap; }
.ps-col {
  width: 26px; height: 26px; border-radius: 6px; border: 2px solid rgba(255,255,255,.25);
  cursor: pointer; padding: 0; font-size: 8px; font-family: inherit; color: #cfd8e3;
}
.ps-col:hover { border-color: #fff; }
.ps-col.auto { background: var(--bg-3); border-color: var(--line); }
.ps-col.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }

/* Montaj görevi */
.ps-prog { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.ps-prog i { display: block; height: 100%; background: var(--ok); transition: width .2s; }
.ps-grp {
  display: flex; gap: 7px; align-items: center; font-size: 12px; font-weight: 600;
  padding: 5px 7px; background: var(--bg-3); border-radius: 5px; margin: 4px 0 2px;
}
.ps-grp.ok { color: var(--ok); }
.ps-grp .mark { width: 12px; }
.ps-conn {
  font-size: 11px; color: var(--ink-faint); padding: 2px 7px 2px 24px;
  display: flex; align-items: center; gap: 6px;
}
.ps-conn.ok { color: var(--ok); }
.ps-conn .sw { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.ps-conn .sw-L1 { background: #8a5a2b; } .ps-conn .sw-L2 { background: #444; }
.ps-conn .sw-L3 { background: #8e8e8e; } .ps-conn .sw-N  { background: #2f6fd0; }
.ps-conn .sw-PE { background: #2e9e4f; } .ps-conn .sw-CTRL { background: #c0392b; }
.ps-conn .sw-TURUNCU { background: #e07b1f; } .ps-conn .sw-SARI { background: #d9b310; }
.ps-conn .sw-MOR { background: #7b4fb5; } .ps-conn .sw-LACIVERT { background: #233a86; }
.ps-conn .sw-PEMBE { background: #d9548f; } .ps-conn .sw-TURKUAZ { background: #1c9c9c; }

/* Dar ekran */
@media (max-width: 1180px) {
  .panosim .ps-lib  { width: 148px; }
  .panosim .ps-side { width: 216px; }
}
/* 900 px altında malzeme kütüphanesi TAMAMEN GİZLENİYORDU — yani telefonda
   ve küçük tablette öğrenci devreye hiçbir malzeme ekleyemiyordu. Gizlemek
   çözüm değil; artık çekmece olarak açılıyor (aşağıdaki 1000 px bloğu). */

/* =============================================================================
   UYGULAMA FÖYÜ EKRANLARI  (seçim listesi + föy sayfası)
   ============================================================================= */
.panosim .ps-screen {
  position: absolute; inset: 0; z-index: 40;
  background: var(--bg); overflow: auto;
}
.panosim .ps-screen.hidden { display: none; }

.panosim .ps-f-wrap { max-width: 1180px; margin: 0 auto; padding: 22px 26px 60px; }
.panosim .ps-f-head h1 { margin: 0 0 4px; font-size: 22px; color: var(--ink); font-weight: 700; }
.panosim .ps-f-head p  { margin: 0 0 16px; font-size: 12.5px; color: var(--ink-faint);
                         max-width: 760px; line-height: 1.55; }

/* --- süzgeç çubuğu --- */
.panosim .ps-f-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px; border-radius: 9px; background: var(--panel);
  border: 1px solid var(--line); position: sticky; top: 0; z-index: 2;
}
.panosim .ps-f-sel, .panosim .ps-f-search {
  font: inherit; font-size: 12px; color: var(--ink);
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 8px; max-width: 300px;
}
.panosim .ps-f-search { min-width: 190px; flex: 1 1 190px; }
.panosim .ps-f-sel:focus, .panosim .ps-f-search:focus { outline: 2px solid var(--accent); }
.panosim .ps-f-chk { display: flex; align-items: center; gap: 6px;
                     font-size: 12px; color: var(--ink-dim); cursor: pointer; }

/* --- gruplar ve satırlar --- */
.panosim .ps-f-group {
  display: flex; align-items: baseline; gap: 10px;
  margin: 22px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--line);
}
.panosim .ps-f-gkod { font-size: 10px; letter-spacing: .08em; color: var(--accent);
                      background: rgba(74,144,226,.12); padding: 2px 6px; border-radius: 4px; }
.panosim .ps-f-gad  { font-size: 14px; font-weight: 600; color: var(--ink); }
.panosim .ps-f-gmod { font-size: 11px; color: var(--ink-faint); margin-left: auto; }

.panosim .ps-f-tbl { display: flex; flex-direction: column; gap: 2px; }
.panosim .ps-f-row {
  display: grid; grid-template-columns: 96px 1fr auto 92px;
  align-items: center; gap: 12px; padding: 8px 12px; border-radius: 7px;
  background: var(--panel); border: 1px solid transparent; cursor: pointer;
}
.panosim .ps-f-row:hover { border-color: var(--accent); background: var(--panel2); }
.panosim .ps-f-no  { font-size: 11px; color: var(--ink-faint); }
.panosim .ps-f-ad  { font-size: 13px; color: var(--ink); }
.panosim .ps-f-row.hazir .ps-f-ad { font-weight: 600; }
.panosim .ps-f-tags { display: flex; gap: 5px; }
.panosim .ps-f-tag {
  font-style: normal; font-size: 10px; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; white-space: nowrap;
}
.panosim .ps-f-tag.sim { color: var(--ok); border-color: rgba(46,158,79,.5);
                         background: rgba(46,158,79,.10); }
.panosim .ps-f-go { font-size: 11px; color: var(--accent); text-align: right; opacity: 0; }
.panosim .ps-f-row:hover .ps-f-go { opacity: 1; }
.panosim .ps-f-count { margin-top: 18px; font-size: 11px; color: var(--ink-faint); text-align: center; }
.panosim .ps-f-empty { padding: 40px; text-align: center; color: var(--ink-faint); font-size: 13px; }

/* =============================================================================
   FÖY SAYFASI — kâğıt görünümü
   ============================================================================= */
/* Föy, GERÇEK A4 yapraklarına bölünür (210 × 297 mm). Ekranda da yapraklar
   ayrı ayrı görünür; çıktı ekrandakiyle birebir aynıdır. */
.panosim .ps-f-wrap.foy { max-width: 860px; }
.panosim .foy-arac { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.panosim .foy-ipucu { font-size: 11px; color: var(--ink-faint); margin-right: 4px; }

.panosim .foy-kagitlar { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.panosim .foy-kagit {
  background: #fff; color: #14181d;
  width: 210mm; height: 297mm; overflow: hidden;
  padding: 14mm 13mm; box-sizing: border-box;
  font-size: 10.5pt; line-height: 1.42;
  box-shadow: 0 10px 34px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
}
.panosim .foy-kagit * { box-sizing: border-box; }
.panosim .foy-olcum { position: absolute; left: -10000px; top: 0; visibility: hidden;
                      height: auto; box-shadow: none; }

/* Her yaprağın üstündeki ince künye şeridi */
.panosim .foy-kagit-ust {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 7.5pt; color: #6b7783; border-bottom: .5pt solid #d8dee4;
  padding-bottom: 2mm; margin-bottom: 4mm; gap: 10mm;
}
.panosim .foy-kagit-ust span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panosim .foy-kagit-ust.gizli { display: none; }

/* Yaprağa sığmayan çizim bloğu: kutusunun İÇİNE ölçeklenir, dışına taşmaz.
   Yükseklik zinciri baştan sona belirli olmalı, yoksa SVG kutuyu aşar. */
.panosim .foy-sigdir {
  flex: 0 0 auto; display: flex; flex-direction: column; overflow: hidden;
}
.panosim .foy-sigdir > h2 { flex: 0 0 auto; }
.panosim .foy-sigdir .foy-cizim,
.panosim .foy-sigdir .foy-gorseller { flex: 1 1 auto; min-height: 0; display: flex;
                                      flex-direction: column; gap: 2mm; }
.panosim .foy-sigdir .foy-gorsel { flex: 1 1 auto; min-height: 0; display: flex;
                                   flex-direction: column; align-items: center; }
.panosim .foy-sigdir .foy-svgwrap { flex: 1 1 auto; min-height: 0; display: flex;
                                    justify-content: center; }
.panosim .foy-sigdir figcaption { flex: 0 0 auto; }
.panosim .foy-sigdir img,
.panosim .foy-sigdir svg {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  margin: 0 auto; display: block; object-fit: contain;
}
.panosim .foy-baslik {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 14px; border: 2px solid #14181d; padding: 10px 14px;
}
.panosim .foy-tip {
  font-size: 10px; letter-spacing: .16em; writing-mode: vertical-rl;
  transform: rotate(180deg); color: #55606c; align-self: stretch;
  display: flex; align-items: center;
}
.panosim .foy-baslik h1 {
  margin: 0; font-size: 12.5pt; font-weight: 700; line-height: 1.3;
  text-transform: none; letter-spacing: .01em;
}
.panosim .foy-no { text-align: center; border-left: 1px solid #c3cad2; padding-left: 14px; }
.panosim .foy-no span { display: block; font-size: 6.5pt; letter-spacing: .1em; color: #55606c; }
.panosim .foy-no b { display: block; font-size: 17pt; line-height: 1.1; }

.panosim .foy-kunye {
  display: flex; flex-wrap: wrap; gap: 3px 14px; margin: 6px 0 12px;
  font-size: 8pt; color: #55606c;
}
.panosim .foy-sec { margin-bottom: 12px; }
.panosim .foy-sec h2 {
  font-size: 9pt; letter-spacing: .09em; margin: 0 0 5px;
  color: #14181d; border-bottom: 1.6pt solid #14181d; padding-bottom: 2px;
}
.panosim .foy-sec p { margin: 0; font-size: 10pt; }
.panosim .foy-ul, .panosim .foy-ol { margin: 0; padding-left: 6mm; font-size: 10pt; }
.panosim .foy-ul li, .panosim .foy-ol li { margin-bottom: 3px; }

.panosim .foy-tbl { width: 100%; border-collapse: collapse; font-size: 9pt; }
.panosim .foy-tbl th, .panosim .foy-tbl td {
  border: .75pt solid #8d97a1; padding: 3px 6px; text-align: left; vertical-align: top;
}
.panosim .foy-tbl thead th { background: #eef1f4; font-size: 8.5pt; letter-spacing: .04em; }
.panosim .foy-tbl .num { text-align: center; white-space: nowrap; width: 18mm; }
.panosim .foy-tbl .sira { width: 7mm; text-align: center; color: #55606c; }
.panosim .foy-tbl .bos { background: #fafbfc; }
.panosim .foy-tbl .tot td { font-weight: 700; background: #eef1f4; }

.panosim .foy-degwrap { display: grid; grid-template-columns: 52mm 1fr; gap: 4mm; align-items: start; }
.panosim .foy-kimlik { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.panosim .foy-kimlik th, .panosim .foy-kimlik td {
  border: .75pt solid #8d97a1; padding: 2.5px 5px; text-align: left;
}
.panosim .foy-kimlik th { background: #eef1f4; font-size: 7.5pt; letter-spacing: .08em; }
.panosim .foy-kimlik .dot { color: #96a0aa; }
.panosim .foy-kimlik .dot::after { content: '……………………'; }
.panosim .foy-kaynak {
  margin-top: 8mm; padding-top: 5px; border-top: .75pt solid #d8dee4;
  font-size: 7.5pt; color: #6b7783;
}

/* --- Föydeki çizimler ve görseller --- */
.panosim .foy-gorseller { display: flex; flex-direction: column; gap: 4mm; }
.panosim .foy-gorsel { text-align: center; }
.panosim .foy-gorsel img {
  max-width: 100%; height: auto; border: .75pt solid #ccd3da; background: #fff;
}
.panosim .foy-gorsel figcaption { font-size: 7.5pt; color: #6b7783; margin-top: 2px; }

/* --- uygulamaya geçiş --- */
.panosim .foy-gecis {
  margin-top: 18px; padding: 18px 20px; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--line);
}
.panosim .foy-gecis h2 { margin: 0 0 4px; font-size: 14px; color: var(--ink); }
.panosim .foy-gecis-p { margin: 0 0 14px; font-size: 12px; color: var(--ink-faint);
                        max-width: 720px; line-height: 1.55; }
.panosim .ps-og { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 9px; }
.panosim .ps-og-l { width: 92px; font-size: 11px; color: var(--ink-faint); flex-shrink: 0; }
.panosim .ps-og-o { display: flex; align-items: center; gap: 6px;
                    font-size: 12px; color: var(--ink-dim); cursor: pointer; }
.panosim .ps-og-o:hover { color: var(--ink); }
.panosim .ps-btn.big { margin-top: 12px; padding: 10px 20px; font-size: 13px; }
.panosim .ps-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.panosim .ps-btn.primary:hover { filter: brightness(1.1); }
.panosim .ps-btn.disabled { opacity: .5; cursor: not-allowed; }

/* --- yazdırma: yalnız föy --- */
/* =============================================================================
   YAZDIRMA — A4 dikey
   Föy dışındaki her şey gizlenir; kâğıt kenar boşlukları @page ile verilir,
   böylece föyün kendi iç dolgusu sıfırlanır ve içerik tam A4'e oturur.
   ============================================================================= */
/* =============================================================================
   YAZDIRMA — A4 dikey
   İçerik zaten 210 × 297 mm'lik yapraklara bölünmüş durumda; burada sadece
   föy dışındaki her şey gizlenir ve her yaprak bir kâğıda basılır.
   Kenar boşlukları yaprağın kendi dolgusundan geldiği için @page sıfırdır —
   ekranda görünen ile çıktı birebir aynı olur.
   ============================================================================= */
@page { size: A4 portrait; margin: 0; }

@media print {
  html, body { background: #fff !important; height: auto !important;
               margin: 0 !important; padding: 0 !important; }
  .panosim, .panosim .ps-body { height: auto !important; display: block !important; }

  /* Föy dışında hiçbir şey basılmaz */
  .panosim .ps-top, .panosim .ps-lib, .panosim .ps-side, .panosim .ps-stage,
  .panosim .foy-arac, .panosim .foy-gecis, .panosim .ps-f-bar,
  .panosim .ps-f-head, .panosim .ps-f-rows, .panosim .ps-colors,
  .panosim .foy-cizim-secler { display: none !important; }

  .panosim .ps-screen { position: static !important; overflow: visible !important;
                        background: #fff !important; }
  .panosim .ps-f-wrap.foy { max-width: none; padding: 0; margin: 0; }
  .panosim .foy-kagitlar { display: block; gap: 0; }

  /* Her yaprak tam bir A4 sayfası */
  .panosim .foy-kagit {
    width: 210mm; height: 297mm; margin: 0; box-shadow: none;
    break-after: page; page-break-after: always;
    break-inside: avoid; page-break-inside: avoid;
  }
  .panosim .foy-kagit:last-child { break-after: auto; page-break-after: auto; }
  .panosim .foy-olcum { display: none !important; }

  /* Baskıda gri zeminler ve çizgiler net kalsın */
  .panosim .foy-tbl thead th, .panosim .foy-kimlik th,
  .panosim .foy-tbl .tot td, .panosim .sb-head { background: #edf0f3 !important;
                              -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .panosim .foy-tbl th, .panosim .foy-tbl td,
  .panosim .foy-kimlik th, .panosim .foy-kimlik td { border-color: #666 !important; }
  .panosim .foy-gorsel img { border-color: #999 !important; }
}

/* --- Sağ panelde aktif uygulama föyü --- */
.panosim .ps-foy { padding: 4px 10px 8px; }
.panosim .ps-foy-ad { font-size: 12px; color: var(--ink); line-height: 1.35; font-weight: 600; }
.panosim .ps-foy-kod { font-size: 10px; color: var(--ink-faint); margin-top: 2px; }
.panosim .ps-foy-btns { display: flex; gap: 6px; margin-top: 7px; }
.panosim .ps-btn.sm { padding: 3px 9px; font-size: 11px; }
.panosim .ps-foy-steps { max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
                         padding: 0 10px 6px; }
.panosim .ps-step {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: 11px; color: var(--ink-dim); line-height: 1.4;
  padding: 3px 0; cursor: pointer; border-top: 1px solid var(--line);
}
.panosim .ps-step:first-child { border-top: 0; }
.panosim .ps-step input { margin-top: 2px; flex-shrink: 0; }
.panosim .ps-step.done span { color: var(--ink-faint); text-decoration: line-through; }
.panosim .ps-note {
  margin: 6px 10px; padding: 7px 9px; border-radius: 6px;
  background: rgba(74,144,226,.10); border: 1px solid rgba(74,144,226,.35);
  font-size: 10.5px; color: var(--ink-dim); line-height: 1.45;
}
.panosim .ps-btn.accent { border-color: var(--accent); color: var(--accent); }

/* --- Föyde çizim kaynağı seçimi (modül çizimi / PanoSim çizimi) --- */
.panosim .foy-cizimsec h2 { display: flex; align-items: center; gap: 8px; }
.panosim .foy-cizim-secler { margin-left: auto; display: flex; gap: 4px; }
.panosim .foy-cizim-sec {
  font: inherit; font-size: 7.5pt; letter-spacing: 0; font-weight: 400;
  border: .75pt solid #b9c1ca; background: #fff; color: #55606c;
  border-radius: 3px; padding: 1px 7px; cursor: pointer;
}
.panosim .foy-cizim-sec.on { background: #22303c; border-color: #22303c; color: #fff; }
.panosim .foy-cizim { display: flex; flex-direction: column; gap: 4mm; }
.panosim .foy-svgwrap { width: 100%; border: .75pt solid #ccd3da; background: #fff; }
.panosim .foy-svg { width: 100%; height: auto; display: block; background: #fff; }
/* Föydeki şema kâğıda basılacak: her tel tam kontrastla, parlama olmadan */
.panosim .foy-svg .wire { opacity: 1; stroke-width: 1.7; filter: none !important; }
.panosim .foy-svg .wire.live { stroke-width: 1.7; filter: none !important; }
.panosim .foy-svg .rail { stroke-width: 1.9; }
.panosim .foy-svg .note { fill: #33414d; font-size: 13px; letter-spacing: 1px; }
.panosim .foy-svg .note-sm { fill: #55677a; }
.panosim .foy-svg .pin, .panosim .foy-svg .wire-hit { display: none; }
.panosim .foy-svg .dev-lbl { fill: #14181d; }
.panosim .foy-svg .pin-lbl { fill: #55606c; }
.panosim .foy-gorsel.sim figcaption { margin-top: 3px; }
@media print {
  .panosim .foy-cizim-secler { display: none !important; }
}
.panosim .foy-ref { font-size: 9pt; color: #55606c; font-style: italic; }

/* --- PanoSim'in kendi çizdiği sembol tablosu --- */
.panosim .sb-tbl { width: 100%; height: auto; display: block; background: #fff; }
.panosim .sb-frame { fill: none; stroke: #4a555f; stroke-width: 1.4; }
.panosim .sb-head  { fill: #eef1f4; stroke: none; }
.panosim .sb-grid  { stroke: #9aa4ad; stroke-width: .8; fill: none; }
.panosim .sb-l     { stroke: #14181d; stroke-width: 1.7; fill: none; stroke-linecap: round; }
.panosim .sb-d     { stroke: #8d97a1; stroke-width: 1.1; fill: none; stroke-dasharray: 3 3; }
.panosim .sb-b     { fill: #fff; stroke: #14181d; stroke-width: 1.7; }
.panosim .sb-o     { fill: #fff; stroke: #14181d; stroke-width: 1.4; }
.panosim .sb-h     { font: 700 11px system-ui, sans-serif; fill: #14181d; letter-spacing: .04em; }
.panosim .sb-t     { font: 400 12px system-ui, sans-serif; fill: #14181d; }
.panosim .sb-u     { font: 600 12px system-ui, sans-serif; fill: #33414d; }
.panosim .sb-n     { font: 400 9px system-ui, sans-serif; fill: #55606c; }
.panosim .sb-p     { font: 600 9.5px system-ui, sans-serif; fill: #33414d; }
.panosim .sb-m     { font: 700 15px system-ui, sans-serif; fill: #14181d; }

/* --- Zaman rölesi / paket şalter / sınır anahtarı --- */
.panosim .tr-dial { fill: #3a434d; stroke: #232a31; stroke-width: 1.4; }
.panosim .tr-pin  { stroke: #d9e2ea; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.panosim .cam-knob { fill: #e8ecef; stroke: #232a31; stroke-width: 1.2;
                     transition: transform .16s ease; }
.panosim .ls-arm  { stroke: #b9c1ca; stroke-width: 3.4; fill: none; stroke-linecap: round;
                    transition: d .1s linear; }
.panosim .ls-roll { fill: #8d97a1; stroke: #4a555f; stroke-width: 1.4; }
.panosim .pdev.pressed .ls-arm { stroke: #f0c14b; }
.panosim .foy-kaynak.sikisik { margin-top: 3mm; font-size: 6.5pt; }
.panosim .foy-kagit > .foy-kaynak { margin-top: auto; }
/* Zaman rölesi geri sayımı: uzaktan okunabilsin */
.panosim .tr-kalan { font-size: 12px; font-weight: 800; fill: #ffd66b;
  paint-order: stroke fill; stroke: rgba(10,14,18,.92); stroke-width: 3px; }
.panosim .pdev .kont-led.on ~ .tr-kalan { fill: #7ee08a; }

/* Darbe akım rölesinin mandalı — konumu gözle görünür */
.panosim .dr-mandal { fill: #8b9aa9; transition: x .16s; }
.panosim .dr-mandal.on { fill: var(--ok); }

/* =============================================================================
   HER EKRANDA ÇALIŞSIN — telefon · tablet · küçük monitör · dokunmatik
   MEHMET, 6 Eylül. Ölçülen kusurlar (rapor/63):
     · 412 px'te üst şerit 863 px taşıyor, 21 düğmenin 11'i ekran dışında
     · sol kütüphane 178 + sağ panel 258 = 436 px sabit; 412 px'lik ekranda
       çizime 196 px kalıyordu (ekranın %48'i)
     · sembollerin tutma alanı 13-17 px; parmakla dokunulamıyor
   ============================================================================= */

/* ---- dokunma: tarayıcı jestleri çizimi çalmasın ---- */
.panosim .ps-view { touch-action: none; }
.panosim .ps-lib, .panosim .ps-side { -webkit-overflow-scrolling: touch; }

/* ---- sembolün boş ortası da tutulabilsin (şema) ----
   Saydam; yalnız çalıştırma ve taşıma modunda fare/parmak yakalar.
   Kablolama modunda kapalı kalır ki uçlar (pin) tek tek seçilebilsin. */
.panosim .el-hit { fill: transparent; stroke: none; pointer-events: none; }
.panosim.mode-run .el-hit,
.panosim.mode-move .el-hit { pointer-events: all; }
.panosim.mode-run .el-hit { cursor: pointer; }

/* ---- kaba işaretleyici (parmak): tutma alanları büyür, görüntü değişmez ---- */
@media (pointer: coarse), (max-width: 1000px) {
  .panosim .wire-hit { stroke-width: 16; }
  .panosim .pw-hit   { stroke-width: 18; }
  .panosim .pin      { r: 9; }
  .panosim .ps-btn, .panosim .ps-tab, .panosim .ps-mode { min-height: 38px; }
  .panosim .ps-btn.sq { width: 38px; min-height: 38px; font-size: 17px; }
  .panosim .ps-item { padding: 11px 10px; }
  .panosim .ps-col { width: 30px; height: 30px; }
}

/* ---- "⋯ Daha fazla": geniş ekranda yok, dar ekranda menü ---- */
.panosim .ps-morewrap { display: contents; }
.panosim .ps-more, .panosim .ps-drawerbtn { display: none; }
.panosim .ps-btn.active { border-color: var(--accent); color: var(--accent); }

/* =============== TABLET ve KÜÇÜK MONİTÖR — 1180 px altı =============== */
@media (max-width: 1180px) {
  .panosim .ps-brand span { display: none; }          /* alt başlık yer kaplamasın */
  .panosim .ps-more { display: inline-block; }
  .panosim .ps-top { gap: 10px; padding: 8px 10px; }

  .panosim .ps-morewrap {
    display: none;
    position: absolute; z-index: 45; top: 52px; right: 10px; width: 232px;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
    padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.55);
  }
  .panosim.more-open .ps-morewrap { display: block; }
  .panosim .ps-morewrap .ps-btn {
    display: block; width: 100%; text-align: left; margin-bottom: 4px;
  }
  .panosim .ps-morewrap .ps-btn:last-child { margin-bottom: 0; }
}

/* =============== ÇEKMECELER — 1000 px altı ===============
   Kütüphane ve durum paneli çizimin ÜSTÜNE kayar; çizim tam genişlik alır. */
@media (max-width: 1000px) {
  .panosim .ps-drawerbtn { display: inline-block; }
  .panosim .ps-body { position: relative; }
  /* Şerit tek satıra sığmıyor: kaydırmak yerine SARILSIN — kaydırılabildiğini
     gösteren bir işaret yok, düğme gizli kalıyordu (768 px'te 2 düğme). */
  .panosim .ps-top { flex-wrap: wrap; overflow-x: visible; }

  /* Çekmeceler ekranın dışında beklerken belgeyi GENİŞLETMESİN —
     ölçüldü: overflow kapatılmadan belge 255 px yatay taşıyordu. */
  .panosim .ps-body { overflow: hidden; }
  .panosim .ps-lib, .panosim .ps-side {
    position: absolute; top: 0; bottom: 0; z-index: 30;
    width: 250px; max-width: 82vw;
    transition: transform .18s ease-out;
    box-shadow: 0 0 26px rgba(0,0,0,.5);
  }
  .panosim .ps-lib  { left: 0;  transform: translateX(-102%); }
  .panosim .ps-side { right: 0; transform: translateX(102%); }
  .panosim.lib-open  .ps-lib  { transform: translateX(0); }
  .panosim.side-open .ps-side { transform: translateX(0); }

  /* çekmece açıkken arkası koyulaşsın — nereye dokunacağı belli olsun */
  .panosim.lib-open .ps-stage::after,
  .panosim.side-open .ps-stage::after {
    content: ''; position: absolute; inset: 0; z-index: 20;
    background: rgba(0,0,0,.35);
  }
  .panosim .ps-stage { position: relative; }
}

/* =============== TELEFON — 640 px altı =============== */
@media (max-width: 640px) {
  /* ÜST ŞERİT İKİ SATIR OLUR.
     `denetim/89` geniş ekranda sarmalamayı reddetmişti — haklı: 1366'da
     çizimi 700'den 668'e düşürüyordu. Telefonda denge başka: tek satırda
     düğmelerin yarısı ekran dışında kalıyor, kaydırılabildiğini gösteren
     bir işaret de yok. İki satır ~40 px yükseklik alır; ölçüldü, çizime
     hâlâ ekranın yarısından fazlası kalıyor. Sarmalama YALNIZ burada. */
  .panosim .ps-top { flex-wrap: wrap; overflow-x: visible; }
  .panosim .ps-brand { display: none; }
  .panosim .ps-spacer { display: none; }
  .panosim .ps-brand b { font-size: 13px; }
  .panosim .ps-top { gap: 7px; padding: 7px 8px; }
  .panosim .ps-tab { padding: 6px 10px; font-size: 12px; }
  .panosim .ps-mode { padding: 6px 9px; font-size: 12px; }
  /* YAZILAR KALIR. Simgeye indirmeyi denedim: mod düğmeleri 18 px'e düştü,
     parmak için çok küçük (ölçüldü). Şerit zaten sarıldığı için yazıya yer
     var — öğrenci "Kablola"nın ne olduğunu düğmede okuyabilmeli. */
  .panosim .ps-mode, .panosim .ps-drawerbtn, .panosim .ps-more { min-width: 44px; }
  .panosim .ps-morewrap { top: 96px; right: 8px; left: 8px; width: auto; }

  /* iki görünüm yan yana telefona sığmaz — "İkisi" seçilse bile alt alta */
  .panosim .ps-views { flex-direction: column; }
  .panosim .ps-view + .ps-view { border-left: 0; border-top: 1px solid var(--line); }

  .panosim .ps-status { font-size: 10px; padding: 4px 8px; flex-wrap: wrap; }
  .panosim { min-height: 420px; }
}

/* ---- ÇEKİLEBİLİR BÖLME (ikili görünüm) ----------------------------------
   MEHMET: "ikili panele geçince genişlikler ayarlanabilir olsun."
   Mantık TesisatSim'deki `ts-bolme`den alındı; oraya dokunulmadı.
   Tutamak YALNIZ ikili görünümde görünür — tek panelli düzen değişmez. */
.panosim .ps-bolme { display: none; }
.panosim.gorunum-ikili .ps-bolme {
  display: block; flex: 0 0 6px; cursor: col-resize;
  background: var(--line); position: relative; touch-action: none;
}
.panosim.gorunum-ikili .ps-bolme::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 2px; height: 34px; margin: -17px 0 0 -1px; border-radius: 2px;
  background: var(--ink-faint); opacity: .6;
}
.panosim.gorunum-ikili .ps-bolme:hover { background: var(--accent); }
/* çekerken imleç kaymasın, altındaki çizim olayları yakalamasın */
.panosim.bolme-cekiliyor .ps-view { pointer-events: none; }
.panosim.bolme-cekiliyor { cursor: col-resize; user-select: none; }

/* Parmakla tutulabilsin diye tutamak dokunmatikte kalınlaşır */
@media (pointer: coarse), (max-width: 1000px) {
  .panosim.gorunum-ikili .ps-bolme { flex: 0 0 14px; }
}
/* Telefonda paneller ALT ALTA (.ps-views sütun) — dikey tutamak anlamsız */
@media (max-width: 640px) {
  .panosim.gorunum-ikili .ps-bolme { display: none; }
}