/* =============================================================================
   TesisatSim — Stil dosyası
   Her şey .tesisatsim kökü altında kapsüllenmiştir; başka bir siteye gömülünce
   o sitenin stillerini bozmaz, ondan da etkilenmez.
   ============================================================================= */

.tesisatsim {
  --bg:        #0f1419;
  --bg-2:      #161e27;
  --bg-3:      #1e2833;
  --cizgi:     #2c3b4a;
  --ink:       #e6edf3;
  --ink-soluk: #94a5b6;

  --ink-silik: #627687;
  --vurgu:     #f0a92b;
  /* KART yüzeyi (`denetim/101 · 3`): panel zemini `--bg` (#0f1419) ile
     ölçülmüş kontrastı 3,19 : 1 (eşik 3). Üstündeki `--ink` yazı 4,91 : 1
     (eşik 4,5). Bu bir TASARIM rengi; `--t-*` VERİ renkleri değişmedi. */
  --kart:      #55677d;
  --iyi:       #3fb950;
  --uyari:     #e3b341;
  --kotu:      #f85149;
  --kagit:     #fafbfc;
  --kagit-ink: #1a222b;
  --izgara:    #e0e7ed;

  --t-L:  #8a5a2b;
  --t-N:  #2f6fd0;
  --t-PE: #2e9e4f;
  --t-SORTI: #1c1c1c;
  --t-GRI: #8e8e8e;
  --t-KIRMIZI: #c0392b;
  --t-TURUNCU: #e07b1f;
  --t-MOR: #7b4fb5;
  --t-YESIL: #2aa84a;
  --t-SARI: #e3b505;
  --t-BEYAZ: #d8dee6;
  --t-PEMBE: #e0559b;

  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; position: relative;
  -webkit-font-smoothing: antialiased;
}
.tesisatsim *, .tesisatsim *::before, .tesisatsim *::after { box-sizing: border-box; }
.tesisatsim svg { -webkit-user-select: none; user-select: none; }

/* ------------------------------------------------------------------ ÜST ŞERİT */

/* DÖNÜŞ BUTONU (`denetim/81`) — bir bağlantıdır (`<a href>`), ama üst
   şeritteki öteki düğmelerle aynı görünür. Yalnız `?donus=` geçerli
   olduğunda DOM'a girer; parametresiz açılışta hiç yoktur. */

/* SORU ŞEMASI (`denetim/75 · 5`) — "bak-kapat-bağla".
   Şema gizlenince panel ve düğme KALIR; öğrenci geri açabilsin. */
.tesisatsim .ts-sema-gizle { position: absolute; right: 12px; top: 10px;
  z-index: 3; }
.tesisatsim .ts-kagit.sema-gizli { visibility: hidden; }

/* KESİT GÖRÜNÜMÜNDEKİ KUMANDA ŞERİDİ (`denetim/75 · 2`).
   Kesit sekmesinde devrenin anahtarına ulaşılamıyordu. Şerit, ikinci bir
   anahtar değil: devrenin kendi cihazlarını gösteren düğmeler. */
.ts-kagit-flo-kumanda-yok { }
.tesisatsim .fk-kumanda { position: absolute; left: 12px; bottom: 12px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  z-index: 3; max-width: calc(100% - 24px); }
.tesisatsim .fk-kumanda-lbl { font-size: 12px; opacity: .72; }
.tesisatsim .fk-kumanda:empty { display: none; }
.tesisatsim a.ts-donus { text-decoration: none; display: inline-flex;
  align-items: center; white-space: nowrap; }
.ts-ust {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--bg-2);
  border-bottom: 1px solid var(--cizgi); flex-shrink: 0;
}
.ts-marka { display: flex; align-items: baseline; gap: 9px; }
.ts-marka b { font-size: 15px; letter-spacing: .3px; }
.ts-marka span { font-size: 11px; color: var(--ink-silik); }
.ts-bosluk { flex: 1; }

.ts-sekmeler, .ts-modlar {
  display: flex; gap: 2px; background: var(--bg-3); padding: 3px; border-radius: 8px;
}
.ts-sekme, .ts-mod {
  border: 0; background: transparent; color: var(--ink-soluk);
  padding: 6px 13px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-family: inherit;
}
/* SEKME GİZLENEBİLİR — `denetim/75 · 1`.
   `App.floresanSekmesi()` sekmeye `gizli` sınıfını KOYUYORDU ama
   `.gizli` kuralı yalnız `.ts-renkler`, `.ts-gorunum` ve `.ts-foy` için
   yazılmıştı; düğmede karşılığı yoktu. Mantık vardı, kural yoktu:
   ölçüldü, `Floresan Kesiti` 20 devrenin 20'sinde görünüyordu, oysa
   floresan armatürü olan 1 devre var. */
.ts-sekme.gizli, .ts-mod.gizli { display: none; }

.ts-sekme:hover, .ts-mod:hover { color: var(--ink); }
.ts-sekme.secili { background: var(--vurgu); color: #14181d; font-weight: 600; }
.ts-mod.secili { background: #2d7ff9; color: #fff; font-weight: 600; }

.ts-btn {
  border: 1px solid var(--cizgi); background: var(--bg-3); color: var(--ink);
  padding: 7px 13px; border-radius: 7px; cursor: pointer; font-size: 13px;
  font-family: inherit;
}
.ts-btn:hover { border-color: var(--vurgu); color: var(--vurgu); }
.ts-btn.vurgu { background: var(--vurgu); color: #14181d; border-color: var(--vurgu); font-weight: 600; }
.ts-btn.vurgu:hover { filter: brightness(1.08); color: #14181d; }
.ts-btn.kare { width: 30px; padding: 6px 0; text-align: center; font-size: 15px; line-height: 1; }
.ts-btn.genis { display: block; width: 100%; margin-bottom: 5px; text-align: left; font-size: 12px; }
.ts-zoom { display: flex; gap: 4px; align-items: center; }

/* kablo renkleri */
.ts-renkler {
  display: flex; align-items: center; gap: 5px; width: 100%;
  padding-top: 8px; border-top: 1px solid var(--cizgi);
}
.ts-renkler.gizli { display: none; }
.ts-renklbl { font-size: 11px; color: var(--ink-silik); margin-right: 4px; }
.ts-renk {
  width: 26px; height: 20px; border-radius: 4px; cursor: pointer;
  border: 2px solid transparent; padding: 0; font-size: 9px; font-weight: 700;
  color: #fff; font-family: inherit;
}
.ts-renk.oto { background: linear-gradient(135deg,#8a5a2b 0 33%,#2f6fd0 33% 66%,#2e9e4f 66%); }
.ts-renk.secili { border-color: var(--vurgu); }

/* --------------------------------------------------------------------- GÖVDE */
.ts-govde { display: flex; flex: 1; min-height: 0; }

.ts-kutuphane {
  width: 186px; flex-shrink: 0; background: var(--bg);
  border-right: 1px solid var(--cizgi); overflow-y: auto; padding: 10px;
}
.ts-yan h4 {
  margin: 12px 0 6px; font-size: 10px; letter-spacing: .9px;
  text-transform: uppercase; color: var(--ink-silik); font-weight: 600;
}
.ts-yan h4:first-child { margin-top: 0; }

/* ---------------------------------------------------- AÇILIR-KAPANIR PANEL
   `denetim/101` · MEHMET: *"renkler birbirine çok yakın... aşağı doğru
   uzayıp gidiyor... gruba tıklayınca o grubun malzemeleri açılsın.
   Arka planla ayrışmak önemli."*

   ÖLÇÜLEN KONTRAST (WCAG bağıl parlaklık · `_paneltest.js` sayıyor):

       panel zemini   --bg    #0f1419
       kart zemini    --kart  #55677d     kart / panel     3,19 : 1  (≥3)
       kart yazısı    --ink   #e6edf3     yazı / kart      4,91 : 1  (≥4,5)
       başlık yazısı  --ink   #e6edf3     yazı / kart      4,91 : 1
       açık başlık    --vurgu #f0a92b     açık / kapalı    2,88 : 1
       açık başlığın yazısı --bg          yazı / açık      9,18 : 1

   YENİ TASARIM RENGİ SAYISI: 1 (`--kart`). Panelin geri kalanı var olan
   belirteçleri kullanıyor — `denetim/100 · 5` tasarım rengine 12 eşiği
   koyduğu için buraya beyaz ve iki yarı saydam rozet rengi konmuş, sonra
   ÖLÇÜLÜP geri alındı (18 → 21 → 19).

   `101 · 3 · 4` — AYRIM YALNIZ RENKLE DEĞİL. Grup başlığı ile malzeme
   kartı AYNI zemini paylaşıyor; birbirinden renkle değil BİÇİMLE ayrılıyor:

       grup başlığı   tam genişlik · BÜYÜK HARF · kalın · ▸/▾ oku · sayı rozeti
       malzeme kartı  12 px içeri · sol kenarda 2 px ray · normal yazı · nokta

   Renk körü bir öğrenci ve projeksiyon perdesi ikisini yine ayırır: ok
   işareti, girinti ve kenar rayı renkten bağımsızdır. */
.op-baslik {
  margin: 0 0 8px; font-size: 10px; letter-spacing: .9px;
  text-transform: uppercase; color: var(--ink-soluk); font-weight: 600;
}
.op-grup { margin-bottom: 6px; }

/* ARAMA KUTUSU (`denetim/104 · 4b`) — *"Gruplama ne kadar iyi olursa olsun
   bir öğrenci yanlış yerde arar; arama kutusu o durumu kurtarır."*
   Yeni renk KULLANMIYOR: zemin `--bg-3`, çerçeve `--cizgi`, yazı `--ink`,
   ipucu yazısı `--ink-soluk` — hepsi var olan belirteçler. İlk sürümde
   biçimlendirmemiştim ve tarayıcının kendi beyazı TASARIM rengi sayısını
   19 → 20 yapmıştı; ölçü yakaladı (`denetim/100 · 5`).
   Yazı/zemin 12,6 : 1 · ipucu yazısı/zemin 5,9 : 1. */
.op-ara {
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  padding: 6px 8px; border: 1px solid var(--cizgi); border-radius: 6px;
  background: var(--bg-3); color: var(--ink);
  font-family: inherit; font-size: 12px;
}
.op-ara::placeholder { color: var(--ink-soluk); }
.op-ara:focus { outline: none; border-color: var(--vurgu); }
.op-bos {
  padding: 10px 8px; font-size: 11.5px; color: var(--ink-soluk);
  text-align: center;
}

.op-grup-bas {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 8px 9px; border: 1px solid var(--cizgi); border-radius: 6px;
  background: var(--kart); color: var(--ink);
  font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  cursor: pointer; text-align: left;
}
.op-grup-bas .op-ok { width: 10px; flex-shrink: 0; font-size: 10px; }
.op-grup-bas .op-grup-ad { flex: 1; min-width: 0; }
.op-grup-bas .op-sayi {
  flex-shrink: 0; min-width: 18px; padding: 1px 5px; border-radius: 9px;
  background: var(--bg); color: var(--ink);
  font-size: 10px; font-weight: 700; text-align: center;
}
/* AÇIK grup: renk DEĞİŞİR ama tek başına taşımıyor — ok ▸ → ▾ döner,
   altında gövde açılır, yazı zemini terse çevrilir. */
.op-grup-bas.acik {
  background: var(--vurgu); color: var(--bg); border-color: var(--vurgu);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.op-grup-bas.acik .op-sayi { background: var(--bg); color: var(--ink); }
.op-grup-bas:hover { border-color: var(--vurgu); }

.op-grup-govde {
  padding: 6px 0 2px 12px; border-left: 2px solid var(--vurgu);
  margin-left: 6px;
}
.op-oge {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; margin-bottom: 4px;
  background: var(--kart); border: 1px solid transparent; border-radius: 4px;
  color: var(--ink); font-size: 12px; cursor: pointer; text-align: left;
  font-family: inherit; font-weight: 400;
}
.op-oge:hover { border-color: var(--vurgu); }
.op-oge .op-nokta {
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--vurgu); flex-shrink: 0;
}
.op-oge .op-oge-ad { flex: 1; min-width: 0; }
.op-ipucu {
  margin-top: 12px; font-size: 11px; line-height: 1.55; color: var(--ink-soluk);
  border-top: 1px solid var(--cizgi); padding-top: 10px;
}

.ts-sahne { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.ts-gorunumler { flex: 1; min-height: 0; display: flex; }
.ts-gorunum { flex: 1; min-width: 0; position: relative; overflow: hidden; }
.ts-gorunum.gizli { display: none; }
.ts-gorunum + .ts-gorunum { border-left: 1px solid var(--cizgi); }
.ts-gorunum.suruklenir { cursor: grabbing; }

/* ÇEKİLEBİLİR BÖLME (`denetim/75 · 4`). Tutamak yalnız ikili görünümde
   görünür; tek panelli görünümde `display:none` olduğu için o düzen
   hiç etkilenmez (kontrol ölçümü: "değişmedi"). */
.ts-bolme { display: none; }
.gorunum-ikili .ts-bolme {
  display: block; flex: 0 0 6px; cursor: col-resize;
  background: var(--cizgi); position: relative; touch-action: none;
}
.gorunum-ikili .ts-bolme::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 2px; height: 34px; margin: -17px 0 0 -1px; border-radius: 2px;
  background: var(--ink-silik); opacity: .55;
}
.gorunum-ikili .ts-bolme:hover { background: var(--vurgu); }
.bolme-cekiliyor .ts-gorunum { pointer-events: none; }
.bolme-cekiliyor { cursor: col-resize; user-select: none; }

/* Dar ekranda paneller alt alta iniyor; orada tutamak yatay olmaz —
   gizlenir ve oran uygulanmaz (`@media (max-width: 900px)` bloğunda). */
.ts-kagit { background: var(--kagit); width: 100%; height: 100%; display: block; }
.ts-gorunum-lbl {
  position: absolute; top: 8px; left: 10px; z-index: 5;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: #7d90a1; background: rgba(255,255,255,.88);
  padding: 3px 8px; border-radius: 4px; pointer-events: none;
}

.ts-yan {
  width: 268px; flex-shrink: 0; background: var(--bg-2);
  border-left: 1px solid var(--cizgi); overflow-y: auto; padding: 12px;
}
.ts-satir {
  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;
}
.ts-satir.dikey { flex-direction: column; align-items: stretch; gap: 5px; }
.ts-satir .k { color: var(--ink-soluk); }
.ts-satir .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.ts-satir .v.iyi { color: var(--iyi); }
.ts-satir .v.kotu { color: var(--kotu); }

.ts-secim { display: flex; gap: 3px; }
.ts-secim button {
  flex: 1; padding: 5px 6px; font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--ink-soluk); background: var(--bg-2);
  border: 1px solid var(--cizgi); border-radius: 5px; cursor: pointer;
}
.ts-secim button:hover { color: var(--ink); border-color: var(--vurgu); }
.ts-secim button.on { color: #0b1220; background: var(--vurgu); border-color: var(--vurgu); }

.ts-slider { width: 100%; }

.ts-not {
  font-size: 11.5px; line-height: 1.5; color: var(--ink-soluk);
  background: var(--bg-3); border-radius: 6px; padding: 8px 10px; margin-bottom: 4px;
}
.ts-ipucu {
  margin-top: 12px; font-size: 11px; line-height: 1.55; color: var(--ink-silik);
  border-top: 1px solid var(--cizgi); padding-top: 10px;
}
.ts-ariza {
  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;
}
.ts-ok {
  padding: 8px 11px; border-radius: 6px; font-size: 12px;
  background: rgba(63,185,80,.12); border: 1px solid rgba(63,185,80,.35);
  color: #7ee787; margin-bottom: 6px;
}
.ts-grup {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ink-silik); margin: 8px 0 3px;
}
.ts-gorev {
  font-size: 11.5px; padding: 4px 8px; border-radius: 4px; margin-bottom: 2px;
  color: var(--ink-soluk); background: var(--bg-3);
  font-variant-numeric: tabular-nums;
}
.ts-gorev.tamam { color: #7ee787; }
.ts-gorev.hata { color: #ffb4ae; }
.ts-sayac { color: var(--vurgu); }

.ts-durumcubugu {
  display: flex; align-items: center; gap: 14px; flex-shrink: 0;
  padding: 7px 14px; background: var(--bg-2); border-top: 1px solid var(--cizgi);
  font-size: 11.5px; color: var(--ink-soluk);
}
.ts-durumcubugu .pil { display: flex; align-items: center; gap: 6px; }
.ts-durumcubugu .pil i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-silik);
}
.ts-durumcubugu .pil.canli i { background: var(--iyi); box-shadow: 0 0 6px var(--iyi); }
.ts-durumcubugu .pil.kotu i { background: var(--kotu); box-shadow: 0 0 6px var(--kotu); }

.ts-mesaj {
  position: absolute; left: 50%; bottom: 54px; transform: translateX(-50%) translateY(10px);
  background: #0b1118; border: 1px solid var(--cizgi); color: var(--ink);
  padding: 9px 16px; border-radius: 8px; font-size: 12.5px; max-width: 620px;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  box-shadow: 0 8px 26px rgba(0,0,0,.5); z-index: 30;
}
.ts-mesaj.goster { opacity: 1; transform: translateX(-50%) translateY(0); }

.ts-menu {
  position: absolute; z-index: 40; width: 330px; max-height: 70vh; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--cizgi);
  border-radius: 9px; padding: 5px; box-shadow: 0 10px 28px rgba(0,0,0,.55);
}
.ts-menu-h {
  font-size: 10.5px; color: var(--ink-silik); padding: 5px 8px 7px;
  border-bottom: 1px solid var(--cizgi); margin-bottom: 4px;
}
.ts-menu-satir {
  display: block; width: 100%; padding: 7px 9px; border: 0; background: transparent;
  border-radius: 6px; color: var(--ink); font-size: 12.5px; font-family: inherit;
  cursor: pointer; text-align: left;
}
.ts-menu-satir:hover { background: var(--bg-3); }
/* Hazır Devre menüsünde bölüm başlığı ("Yeni eklenenler" · "Bütün devreler") */
.ts-menu-bolum {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--vurgu); padding: 8px 9px 3px;
}

/* =============================================================================
   AÇIK ŞEMA
   ============================================================================= */
.ts-kagit .as-txt { font-size: 12px; fill: var(--kagit-ink); font-family: inherit; }
.ts-kagit .hat-lbl { font-size: 11px; font-weight: 700; fill: #33414f; }
.ts-kagit .cihaz-lbl { font-size: 13px; font-weight: 700; fill: #16202a; }
.ts-kagit .cihaz-alt { font-size: 10.5px; fill: #5b6b7b; }
/* --- AÇIK ŞEMA · RAY DÜZENİ (MEB Görsel 2.64 vb.) --- */
.ts-kagit .ray-uc { fill: #fff; stroke: #26323d; stroke-width: 1.7; }
.ts-kagit .ray-uc.ray-n { stroke: var(--t-N); }

/* ------------------------------------------- 1. PARTİ · GERÇEKÇİ SEMBOLLER
   `denetim/110`. Yeni TASARIM rengi eklenmiyor — hepsi var olan
   belirteçler ya da mevcut kâğıt/izgara tonları. `denetim/100 · 5`
   tasarım rengi sayısını 19'da tutuyor; ölçüsü `_odaktest.js`te. */
.ts-kagit .s-klemens-blok { fill: var(--kagit-ink); opacity: .10; stroke: none; }
.ts-kagit .s-klemens-agzi { fill: var(--kagit-ink); opacity: .42; stroke: none; }
.ts-kagit .s-klemens-vida { stroke: var(--kagit); stroke-width: 1.6; fill: none; }

.ts-kagit .s-armatur-taban   { fill: var(--kagit-ink); opacity: .35; stroke: none; }
.ts-kagit .s-armatur-govde   { fill: none; stroke: var(--kagit-ink); stroke-width: 2; }
.ts-kagit .s-armatur-difuzor { fill: var(--kagit-ink); opacity: .12;
                               stroke: var(--kagit-ink); stroke-width: 1;
                               transition: fill .14s, opacity .14s; }
/* Yanan difüzör SARI (18 Eylül, MEHMET'in kararı). Önce buz mavisiydi,
   sonra camgöbeğine çekildi; ikisi de tahtada zayıf kaldı. Sarının zeminden
   renk farkı (ΔE) 61,7, camgöbeğininki 34,9 — sayfa mavimsi-beyaz olduğu
   için mavi aile zemine karışıyor. */
.ts-kagit .s-armatur-difuzor.yaniyor { fill: #ffc61a; opacity: 1;
                                       stroke: #a5730a; stroke-width: 1.4; }
/* yanan difüzörün ışık çizgileri beyaza döner — gri kalmasın */
.ts-kagit .s-armatur-difuzor.yaniyor ~ .s-armatur-cizgi { stroke: #ffffff;
                                                          opacity: .9; }
.ts-kagit .s-armatur-cizgi   { stroke: var(--kagit-ink); stroke-width: 1;
                               opacity: .45; fill: none; }

.ts-kagit .s-modul-govde     { fill: none; stroke: var(--kagit-ink); stroke-width: 2; }
.ts-kagit .s-modul-anten     { stroke: var(--kagit-ink); stroke-width: 2; fill: none; }
.ts-kagit .s-modul-anten-uc  { fill: var(--kagit-ink); stroke: none; }
.ts-kagit .s-modul-dugme     { fill: none; stroke: var(--kagit-ink); stroke-width: 1.5; }
.ts-kagit .s-modul-led       { fill: var(--kagit-ink); opacity: .5; stroke: none; }
.ts-kagit .s-modul-kablo     { stroke: var(--kagit-ink); stroke-width: 2.2;
                               stroke-linecap: round; fill: none; opacity: .75; }
.ts-kagit .ray-uc.ray-l { stroke: var(--t-KIRMIZI); }
.ts-kagit .ray-harf { font-size: 22px; font-weight: 700; font-family: Georgia, 'Times New Roman', serif; }
.ts-kagit .ray-harf.ray-n { fill: var(--t-N); }
.ts-kagit .ray-harf.ray-l { fill: var(--t-KIRMIZI); }
.ts-kagit .ray-baslik { font-size: 14px; font-weight: 700; fill: #16202a; letter-spacing: .04em; }
.ts-kagit .ray-ad { font-size: 12.5px; fill: #16202a; }
/* --- KAPALI ŞEMA · LİNYE DÜZENİ --- */
.ts-kagit .k-linye { stroke-width: 2.4; }
.ts-kagit .k-cikis { fill: #fff; stroke: #26323d; stroke-width: 1.7; }
.ts-kagit .k-baslik { font-size: 14px; font-weight: 700; fill: #16202a; letter-spacing: .04em; }
.ts-kagit .k-sayi { font-size: 11px; font-weight: 700; fill: #16202a; }

.ts-kagit .ray-uc.ray-pe { stroke: var(--t-PE); }
.ts-kagit .ray-toprak { stroke: var(--t-PE); stroke-width: 2; fill: none; }
/* sıva altı anahtarın modüldeki daire gövdesi */
.ts-kagit .anahtar-daire { fill: none; stroke: #1c1c1c; stroke-width: 2; }

.ts-kagit .cihaz-durum { font-size: 10.5px; font-weight: 700; fill: #574107; }
.ts-kagit .cihaz-durum.uyari { fill: #b3261e; }

/* --- ÖLÇÜ ALETLERİ (0.23.0) ---
   Çember içinde alet harfi (A · V · W); okunan değer altında yazar.
   Taşma ve kademe uyarıları kırmızıdır — gerçek alette de ibre dayanır. */
.ts-kagit .olcu-govde { fill: #fff; stroke: #17202c; stroke-width: 2.2; }
.ts-kagit .olcu-harf  { fill: #17202c; font-weight: 800; text-anchor: middle;
                        font-family: Georgia, 'Times New Roman', serif; }
.ts-kagit .olcu-deger { font-size: 11px; font-weight: 700; fill: #1a4d8f;
                        text-anchor: middle; }
.ts-kagit .olcu-deger.uyari { fill: #b3261e; }

/* --- AYDINLATMA ARMATÜRÜ (0.26.0) --- */
.ts-kagit .armatur-govde { fill: #fff; stroke: #17202c; stroke-width: 2.2; }
.ts-kagit .armatur-govde.yaniyor { fill: #ffe08a; }
.ts-kagit .armatur-direk { stroke: #5b6572; stroke-width: 5; stroke-linecap: round;
                           fill: none; }
.ts-kagit .armatur-duvar { stroke: #5b6572; stroke-width: 4; stroke-linecap: round; }
.ts-kagit .armatur-uyari { font-size: 10px; font-weight: 700; fill: #8a6a12;
                           text-anchor: middle; }
.ts-kagit .armatur-uyari.tehlike { fill: #b3261e; }
.ts-kagit .uc-lbl { font-size: 9.5px; fill: #6b7b8b; }
.ts-kagit .not { font-size: 11px; fill: #7b8b9b; letter-spacing: .4px; }

.ts-kagit .hat { stroke-width: 2.2; fill: none; }
.ts-kagit .hat-L  { stroke: var(--t-L); }
.ts-kagit .hat-N  { stroke: var(--t-N); }
.ts-kagit .hat-PE { stroke: var(--t-PE); stroke-dasharray: 12 7; }
/* zil trafosunun 12 V ikincil hatları */
.ts-kagit .hat-Z1 { stroke: var(--t-KIRMIZI); stroke-width: 2.6; }
.ts-kagit .hat-Z2 { stroke: var(--t-GRI); stroke-width: 2.6; }
.ts-kagit .hat-L1 { stroke: var(--t-L); }
.ts-kagit .hat-L2 { stroke: var(--t-SORTI); }
.ts-kagit .hat-L3 { stroke: var(--t-GRI); }

.ts-kagit .iletken { stroke: #23303c; stroke-width: 1.7; fill: none; }
.ts-kagit .ince { stroke: #23303c; stroke-width: 1.2; fill: none; }
.ts-kagit .kuplaj { stroke: #7c8a98; stroke-width: 1.2; stroke-dasharray: 3 3; fill: none; }
.ts-kagit .kutu { fill: #fff; stroke: #23303c; stroke-width: 1.7; }
.ts-kagit .nokta { fill: #23303c; }
.ts-kagit .bicak { stroke: #23303c; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.ts-kagit .bicak.kapali { stroke: #14803a; }

.ts-kagit .klemens-govde { fill: #eef2f6; stroke: #9aa9b8; stroke-width: 1.3; }
.ts-kagit .klemens-delik { fill: #fff; stroke: #4a5b6b; stroke-width: 1.4; }
.ts-kagit .klemens-koprü { stroke: #9aa9b8; stroke-width: 1.6; stroke-dasharray: 4 3; fill: none; }

.ts-kagit .lamba-govde.yaniyor { fill: #fff3c4; stroke: #b3891b; }
.ts-kagit .lamba-isik { fill: #ffd54a; opacity: 0; transition: opacity .12s; }
.ts-kagit .kutu.yaniyor { fill: #fff3c4; stroke: #b3891b; }
.ts-kagit .kutu.enerjili { fill: #d6f2dd; }

/* Kablo dönüşleri 90 derece KESKİN olmalı — yuvarlak birleşim köşede
   "kuş gözü" yapıyordu. */
.ts-kagit .tel-oz { fill: none; stroke-width: 2.6; stroke-linecap: butt;
  stroke-linejoin: miter; stroke-miterlimit: 6; }
.ts-kagit .tel-hale { fill: none; stroke-width: 8; stroke: transparent;
  stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 6; }
.ts-kagit .tel-vurus { fill: none; stroke: transparent; stroke-width: 13; pointer-events: stroke; }
.ts-kagit .tel-hale.canli { stroke: rgba(240,169,43,.36); }

/* İLETKEN VURGUSU — kimliğe bağlı (`denetim/46 · 3`).
   Bir iletken ekranda tek çizgi değildir: buat içindeki eki, klemens
   ucu, boru içindeki bölümü ayrı `path`lerdir ama aynı `data-tel`
   kimliğini taşır. Vurgu o kimliğe bağlandığı için üzerine gelince
   parçaların HEPSİ birden belirginleşir — MEHMET'in istediği
   "ekleriyle beraber" budur.
   Sıfırdan çizim yok: her telin altındaki geniş saydam hale yolu
   zaten duruyordu, yalnız görünür yapılıyor. */
.ts-kagit .tel-vurgulu .tel-hale,
.ts-kagit .tel-vurgulu .m-tel-hale,
.ts-kagit .tel-vurgulu .s-tel-hale { stroke: rgba(240,169,43,.55); }
.ts-kagit .tel-vurgulu .tel-oz,
.ts-kagit .tel-vurgulu .m-tel-oz,
.ts-kagit .tel-vurgulu .s-tel-oz,
.ts-kagit .tel-vurgulu .s-tel-ozk { filter: brightness(1.35); }
.ts-kagit .tel-vurgulu.tel-ek { filter: brightness(1.35); }
/* Her rengin İKİ seçicisi var, ikisi de gerekli:
     .tel-KIRMIZI .tel-oz      → renk ÜST düğümde, tel ALT düğümde (şerit)
     .tel-KIRMIZI.tel-sembol   → renk ve tel AYNI düğümde (sembol içi parça)
   Aradaki fark bir boşluk ile bir nokta ve gözden kaçıyor: sembol içindeki
   parça tek düğüme `class="tel-sembol tel-KIRMIZI"` diye yazılınca torun
   seçici tutmadı, yola hiçbir kural stroke vermedi ve iletken GÖRÜNMEDİ —
   üç tel de çemberin üstünde bitiyordu. Renk listesi tek yerde dursun diye
   iki biçim aynı kuralda toplandı; yeni renk eklenince iki yer güncellenmez. */
.ts-kagit .tel-L .tel-oz,  .ts-kagit .tel-L.tel-sembol  { stroke: var(--t-L); }
.ts-kagit .tel-N .tel-oz,  .ts-kagit .tel-N.tel-sembol  { stroke: var(--t-N); }
.ts-kagit .tel-PE .tel-oz, .ts-kagit .tel-PE.tel-sembol { stroke: var(--t-PE); }
.ts-kagit .tel-SORTI .tel-oz, .ts-kagit .tel-SORTI.tel-sembol { stroke: var(--t-SORTI); }
.ts-kagit .tel-GRI .tel-oz, .ts-kagit .tel-GRI.tel-sembol { stroke: var(--t-GRI); }
.ts-kagit .tel-KIRMIZI .tel-oz, .ts-kagit .tel-KIRMIZI.tel-sembol { stroke: var(--t-KIRMIZI); }
.ts-kagit .tel-TURUNCU .tel-oz, .ts-kagit .tel-TURUNCU.tel-sembol { stroke: var(--t-TURUNCU); }
.ts-kagit .tel-MOR .tel-oz, .ts-kagit .tel-MOR.tel-sembol { stroke: var(--t-MOR); }
.ts-kagit .tel-YESIL .tel-oz, .ts-kagit .tel-YESIL.tel-sembol { stroke: var(--t-YESIL); }
.ts-kagit .tel-SARI .tel-oz, .ts-kagit .tel-SARI.tel-sembol { stroke: var(--t-SARI); }
.ts-kagit .tel-BEYAZ .tel-oz, .ts-kagit .tel-BEYAZ.tel-sembol
                              { stroke: var(--t-BEYAZ); stroke-width: 2.9; }
/* PEMBE yalnız açık şemanın ray düzeninde iletken ayırmak için kullanılır —
   kablo rengi listesinde yoktur (modülde de bir kablo cinsi değildir). */
.ts-kagit .tel-PEMBE .tel-oz, .ts-kagit .tel-PEMBE.tel-sembol { stroke: var(--t-PEMBE); }
.ts-kagit .tel-PEMBE .tel-ek, .ts-kagit circle.tel-PEMBE { fill: var(--t-PEMBE); }

.ts-kagit .uc-nokta { fill: #fff; stroke: #33414f; stroke-width: 1.5; }
.ts-kagit .uc-vurus { fill: transparent; }
.ts-kagit .uc.bekliyor .uc-nokta { fill: var(--vurgu); stroke: #8a5f08; r: 6; }
.mod-kablola .ts-kagit .uc { cursor: crosshair; }
.mod-kablola .ts-kagit .uc:hover .uc-nokta { fill: var(--vurgu); }
.mod-kablola .ts-kagit .tel:hover .tel-oz { stroke-width: 4; }
.mod-calistir .ts-kagit .tiklanir { cursor: pointer; }

/* =============================================================================
   MONTAJ (GERÇEK TESİSAT)
   ============================================================================= */
.ts-kagit .m-txt { font-size: 12px; fill: #16202a; font-family: inherit; }
.ts-kagit .m-lbl { font-size: 12px; font-weight: 700; fill: #16202a;
  paint-order: stroke fill; stroke: rgba(255,255,255,.9); stroke-width: 3px; }
.ts-kagit .m-lbl-xs { font-size: 9.5px; fill: #cfd9e3;
  paint-order: stroke fill; stroke: rgba(12,18,24,.85); stroke-width: 2.6px; }
/* `denetim/121 · 2` — plançete görünümü DÖRDÜNCÜ görünüm olarak
   ölçüye girince iki yazı daha eşiğin altında çıktı: başlık 2,43:1,
   durum yazısı 3,47:1. Aynı kusur sınıfı, ayrı dosyada duruyordu. */
.ts-kagit .m-baslik { font-size: 10.5px; letter-spacing: 1.2px; fill: #1c2731;
  text-transform: uppercase; }
/* UÇ (KLEMENS) NUMARASI — `denetim/114 · 5`
   MEHMET: *"okunmuyor; kalın ve küçük."* Ölçüldü: kontrast 1,00:1 —
   rakam GÖRÜNMÜYORDU. Sebep bir renk seçimi değil, bir EZİLMEYDİ:
   burada `fill: #eef3f8` (açık) yazıyordu ama aşağıdaki
   `.ts-kagit .s-txt { fill: #16202a }` aynı özgüllükte ve DAHA SONRA
   geldiği için rakamı KOYU yapıyordu. Hale ise koyu kalmıştı —
   koyu rakam, koyu halenin içinde kayboluyordu.
   Düzeltme: seçici `text.uc-no` ile özgüllüğü artırıldı (artık
   ezilmiyor), rakam KOYU + hale AÇIK ve İNCE, punto 10 → 11,
   kalınlık 700 → 600 ("ince ve kontrastlı", `114 · 5`).
   Hale kalın bir zemin değil (2,2 px): teli örtmesin (`KRITERLER 0d`). */
.ts-kagit text.uc-no { font-size: 10.5px; font-weight: 600; fill: #16202a;
  paint-order: stroke fill; stroke: rgba(255,255,255,.94); stroke-width: 2.2px; }

/* TELİN ÜSTÜNDE KALAN NUMARA — KURAL ÇIKARILDI, SEBEBİ ÖLÇÜLÜ
   (`denetim/93` · `rapor/121 § 2`).

   `rapor/119`da "hale kuralı eklendi" diye yazdım; DOĞRUSU şu:
   hale ZATEN VARDI — yukarıdaki `text.uc-no` kuralında
   `paint-order: stroke` ve `stroke: rgba(255,255,255,.94)` 2,2 px.
   Benim eklediğim, telin üstünde kalanlara daha kalın (2,6 px) ve tam
   opak bir hale vermekti. Negatif denemede ölçüldü: kural
   kapatıldığında manşet ölçü (`5f` okunmayan numara) 0'da,
   `5e` kontrastı 16,5:1'de KALDI — ölçülen kazancı YOK.
   Ölçmediğim kazancı olan kuralı kodda tutmuyorum.

   `tel-ustunde` SINIFI duruyor: görünüşü değiştirmiyor ama telin
   altında kalan numarayı işaretliyor ve `5e` onu bu sınıftan
   sayıyor. */

.ts-kagit .m-durum { font-size: 10.5px; font-weight: 700; fill: #574107;
  paint-order: stroke fill; stroke: rgba(255,255,255,.9); stroke-width: 3px; }
.ts-kagit .m-durum.uyari { fill: #b3261e; }

.ts-kagit .m-plancete { fill: #f3f6f9; stroke: #c9d4de; stroke-width: 2; }
.ts-kagit .m-tablo { fill: #e7edf3; stroke: #b3c1cf; stroke-width: 1.6; }
.ts-kagit .m-tavan { fill: #eef3f8; stroke: #c4d0db; stroke-width: 1.6; stroke-dasharray: 8 6; }
.ts-kagit .m-duvar { fill: #edf1f5; stroke: #c4d0db; stroke-width: 1.6; }
.ts-kagit .m-kutu { fill: #e4e9ee; stroke: #bcc8d4; stroke-width: 1.4; stroke-dasharray: 6 5; }
.ts-kagit .m-kanal { stroke: #cbd6e1; stroke-width: 12; stroke-linecap: round; opacity: .55; }

.ts-kagit .m-kutu-kutu { fill: #2b3846; stroke: #47586a; stroke-width: 1.2; }
.ts-kagit .m-kutu-oge { cursor: pointer; }
.ts-kagit .m-kutu-oge:hover .m-kutu-kutu { stroke: var(--vurgu); }

.ts-kagit .m-sebeke { fill: #263341; stroke: #3d4f61; stroke-width: 1.5; }
.ts-kagit .m-bara { stroke: rgba(0,0,0,.35); stroke-width: 1; }
.ts-kagit .m-otomat { fill: #2a3542; stroke: #46586a; stroke-width: 1.4; }
.ts-kagit .m-otomat-pencere { fill: #1b232c; }
.ts-kagit .m-kol { fill: #b9c5d1; }
.ts-kagit .acik .m-kol { fill: var(--iyi); }
.ts-kagit .atmis .m-kol { fill: var(--kotu); }
.ts-kagit .m-hit { fill: transparent; }

.ts-kagit .m-buat { fill: #2f3d4c; stroke: #4d6073; stroke-width: 1.6; }
.ts-kagit .m-buat-kapak { fill: #e8edf2; opacity: .25; }
.ts-kagit .m-klemens { fill: #1d2630; stroke: #445667; stroke-width: 1; }
.ts-kagit .m-klemens-delik { fill: #0d1219; stroke: #7b8fa2; stroke-width: 1.2; }
/* Klemensin İÇİNDEKİ köprü: dört delik elektriksel olarak tek düğümdür
   (`denetim/46 · 2`). Buat kapağı zaten saydam; asıl eksik olan bu
   iç bağlantının hiç çizilmemesiydi. */
.ts-kagit .m-klemens-kopru { stroke: #9fb3c6; stroke-width: 3; stroke-linecap: round; opacity: .85; }
.ts-kagit .m-klemens-kopru.tel-vurgulu { stroke: #f0a92b; opacity: 1; }

/* Vurgu katmanı — malzemelerin ÜSTÜNDE (`denetim/58 · 5`).
   Telin altta kalan parçası burada bir kopya olarak görünür; fare
   çekilince kopya silinir ve o nokta yine örtülü olur. */
.ts-kagit .kat-telvurgu { pointer-events: none; }
/* SAYDAMLIK — `KRITERLER 0d.4` · `denetim/118 · C`:
   *"fare üzerindeyken tel malzemenin ÜSTÜNE çıkar ama %50-60 saydam
   olur"*. Eskiden `opacity: .95` idi; ölçüldü (`_saydamtest.js`):
   ekranda alfa 0,95-1,02, yani malzeme tel altında TAMAMEN kayboluyordu.
   0,45 = %55 saydam, istenen bandın (%50-60) ortası. Ölçü CSS'teki
   sayıyı okumuyor, ekrandaki karışım oranını hesaplıyor — ana öğedeki
   bir opaklık ya da filtre de bu yolla yakalanır. */
.ts-kagit .tel-vurgu-kopya { fill: none; stroke-width: 5;
  /* MEHMET, 7 Eylul: "saydamlik fazla olmus %20 artir."
     .45 -> .54. Olculen alfa 0,54-0,62; `KRITERLER 0d.4`un bandi
     0,40-0,50 idi, urun sahibinin istegiyle 0,40-0,64e genisletildi
     (`_saydamtest.js`te gerekcesiyle yazili). Karar denetcide. */
  stroke-linecap: round; stroke-linejoin: round; opacity: .54;
  filter: drop-shadow(0 0 3px rgba(240,169,43,.9)); }

.ts-kagit .m-anahtar-cerceve { fill: #e9eef3; stroke: #b6c3cf; stroke-width: 1.6; }
.ts-kagit .m-anahtar-kapak { fill: #f7f9fb; stroke: #cad4de; stroke-width: 1.2; }
.ts-kagit .m-tus { fill: #dfe6ed; stroke: #b8c4d0; stroke-width: 1; }
.ts-kagit .m-tus.acik { fill: #ffe9a8; stroke: #d9a91b; }
.ts-kagit .m-buton-kapak { fill: #d8e0e8; stroke: #9fb0bf; stroke-width: 1.4; }
.ts-kagit .basili .m-buton-kapak { fill: #ffd76b; stroke: #c9971a; }
.ts-kagit .m-dimmer-kadran { fill: #e3eaf1; stroke: #a9b8c6; stroke-width: 1.5; }
.ts-kagit .m-dimmer-ibre { stroke: #33414f; stroke-width: 3; stroke-linecap: round; }
.ts-kagit .m-sensor-lens { fill: #cfd9e3; stroke: #8fa1b2; stroke-width: 1.4; }
.ts-kagit .basili .m-sensor-lens { fill: #ffe08a; stroke: #c9971a; }
.ts-kagit .m-ince { stroke: #7a8b9b; stroke-width: 1.1; fill: none; }
.ts-kagit .m-kuyruk { stroke: #93a3b3; stroke-width: 2; fill: none; }

.ts-kagit .m-askı { stroke: #7d8d9d; stroke-width: 3; }
.ts-kagit .m-duy { fill: #cdd7e1; stroke: #94a5b6; stroke-width: 1.3; }
.ts-kagit .m-ampul { fill: #eceff3; stroke: #a8b6c3; stroke-width: 1.5; }
.ts-kagit .m-ampul.yaniyor { fill: #ffe07a; stroke: #d19b12; }
.ts-kagit .m-flaman { stroke: #b09040; stroke-width: 1.4; fill: none; }
.ts-kagit .m-lamba-hale { fill: #ffd54a; opacity: 0; transition: opacity .14s; }
.ts-kagit .m-armatur { fill: #dde4eb; stroke: #a9b8c6; stroke-width: 1.4; }
.ts-kagit .m-tup { fill: #eef2f6; stroke: #b6c3cf; stroke-width: 1.2; }
.ts-kagit .m-tup.yaniyor { fill: #eaf6ff; stroke: #7fb6d9; }

.ts-kagit .m-priz-kapak { fill: #f2f5f8; stroke: #b6c3cf; stroke-width: 1.5; }
.ts-kagit .m-priz-kapak.enerjili { fill: #ddf3e2; stroke: #57a86c; }
.ts-kagit .m-priz-delik { fill: #2a3542; }
.ts-kagit .m-priz-tirnak { stroke: #8fa1b2; stroke-width: 3.5; stroke-linecap: round; }

.ts-kagit .m-zil-kapak { fill: #d7dee6; stroke: #97a7b7; stroke-width: 1.5; }
.ts-kagit .caliyor .m-zil-kapak { fill: #ffe08a; stroke: #c9971a; }
.ts-kagit .m-zil-taban { fill: #b9c5d1; }
.ts-kagit .m-zil-toka { fill: #8b9aa9; }
.ts-kagit .caliyor .m-zil-toka { fill: #c97b1a; }
.ts-kagit .m-kilit { fill: #cfd8e1; stroke: #94a5b6; stroke-width: 1.5; }
.ts-kagit .m-kilit-dil { fill: #8b9aa9; transition: x .18s; }
.ts-kagit .acik .m-kilit-dil { fill: var(--iyi); }
.ts-kagit .m-sayac-ekran { fill: #0e1a14; stroke: #2f4a3c; stroke-width: 1; }
.ts-kagit .m-sayac-yazi { font-size: 11px; font-weight: 700; fill: #6ee7a8;
  font-family: ui-monospace, Menlo, Consolas, monospace; }
.ts-kagit .m-acil { fill: #c0392b; stroke: #7d2318; stroke-width: 2; }
.ts-kagit .acik .m-acil { fill: #e05a4a; }
.ts-kagit .m-trafo { fill: #2f3d4c; stroke: #4d6073; stroke-width: 1.5; }
.ts-kagit .m-trafo-sargi { stroke: #93a3b3; stroke-width: 2.4; fill: none; }
.ts-kagit .m-led { fill: #3a4756; }
.ts-kagit .m-led.on { fill: #ffc93c; }
.ts-kagit .m-kontak-bicak { stroke: #93a3b3; stroke-width: 2.6; fill: none; stroke-linecap: round; }
.ts-kagit .m-kontak-bicak.kapali { stroke: var(--iyi); }
.ts-kagit .m-nokta { fill: #93a3b3; }

.ts-kagit .uc-pabuc { fill: #b9c5d1; stroke: #7d8d9d; stroke-width: 1; }
.ts-kagit .uc-vida { fill: #e8eef4; stroke: #6b7d8e; stroke-width: 1.2; }
.ts-kagit .uc-vurus { fill: transparent; }
.ts-kagit .m-uc.bekliyor .uc-vida { fill: var(--vurgu); stroke: #8a5f08; }
.mod-kablola .ts-kagit .m-uc { cursor: crosshair; }
.mod-kablola .ts-kagit .m-uc:hover .uc-vida { fill: var(--vurgu); }
.mod-calistir .ts-kagit .tiklanir { cursor: pointer; }

.ts-kagit .m-tel-oz { fill: none; stroke-width: 4; stroke-linecap: butt;
  stroke-linejoin: miter; stroke-miterlimit: 6; }
.ts-kagit .m-tel-hale { fill: none; stroke-width: 10; stroke: transparent;
  stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 6; }
.ts-kagit .m-tel-vurus { fill: none; stroke: transparent; stroke-width: 15; pointer-events: stroke; }
.ts-kagit .m-tel-hale.canli { stroke: rgba(240,169,43,.4); }
.ts-kagit .m-tel.tel-L .m-tel-oz  { stroke: var(--t-L); }
.ts-kagit .m-tel.tel-N .m-tel-oz  { stroke: var(--t-N); }
.ts-kagit .m-tel.tel-PE .m-tel-oz { stroke: var(--t-PE); }
.ts-kagit .m-tel.tel-SORTI .m-tel-oz { stroke: var(--t-SORTI); }
.ts-kagit .m-tel.tel-GRI .m-tel-oz { stroke: var(--t-GRI); }
.ts-kagit .m-tel.tel-KIRMIZI .m-tel-oz { stroke: var(--t-KIRMIZI); }
.ts-kagit .m-tel.tel-TURUNCU .m-tel-oz { stroke: var(--t-TURUNCU); }
.ts-kagit .m-tel.tel-MOR .m-tel-oz { stroke: var(--t-MOR); }
.ts-kagit .m-tel.tel-YESIL .m-tel-oz { stroke: var(--t-YESIL); }
.ts-kagit .m-tel.tel-SARI .m-tel-oz { stroke: var(--t-SARI); }
.ts-kagit .m-tel.tel-BEYAZ .m-tel-oz { stroke: var(--t-BEYAZ); }
/* PEMBE açık şemanın ray düzeninden gelir; karşılığı olmadan bir tel bu
   katmanda siyaha düşerdi (`renk jetonu` ölçüsü). */
.ts-kagit .m-tel.tel-PEMBE .m-tel-oz { stroke: var(--t-PEMBE); }
.mod-kablola .ts-kagit .m-tel:hover .m-tel-oz { stroke-width: 6; }


/* =============================================================================
   KAPALI ŞEMA (TESİSAT PLANI)
   ============================================================================= */
.ts-kagit .k-txt { font-size: 12px; fill: #16202a; font-family: inherit; }
.ts-kagit .k-lbl { font-size: 12px; font-weight: 700; fill: #16202a; }
.ts-kagit .k-lbl-xs { font-size: 9.5px; fill: #6b7b8b; }
.ts-kagit .k-baslik { font-size: 10.5px; letter-spacing: 1.2px; fill: #3e4e5b;
  text-transform: uppercase; }
.ts-kagit .k-not { font-size: 10.5px; fill: #7b8b9b; }

.ts-kagit .k-oda { fill: #fdfdfe; stroke: #33414f; stroke-width: 2.4; }
/* MEB modülündeki tesisat hattı kesik-noktalı çizilir: kablonun boru içinde
   izleyeceği yolu gösterir. */
.ts-kagit .k-hat { stroke: #23303c; stroke-width: 1.8; fill: none;
  stroke-dasharray: 13 4 2.5 4; }
.ts-kagit .k-hat.k-besleme { stroke-width: 3; stroke-dasharray: 10 5; }
/* Linye düzeninde (basit devreler) modül hattı DÜZ çizgidir — Görsel 2.64 */
.ts-kagit .k-hat.k-duz { stroke-dasharray: none; }
/* kapalı şemada koruma iletkeni ayrı hat (TEE0901 föy 28 · Görsel 2.76 — yeşil) */
.ts-kagit .k-hat.k-pe { stroke: #1f9d55; stroke-dasharray: none; }
.ts-kagit .k-centik { stroke: #23303c; stroke-width: 1.5; }
.ts-kagit .k-sembol { fill: #fff; stroke: #23303c; stroke-width: 1.9; }
.ts-kagit .k-dolu { fill: #23303c; stroke: none; }
.ts-kagit .k-sembol-bos { fill: none; stroke: #23303c; stroke-width: 1.6; }
.ts-kagit .k-buat { fill: #fff; stroke: #1f9d55; stroke-width: 2.4; }
.ts-kagit .k-kalin { stroke: #23303c; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.ts-kagit .k-ince { stroke: #23303c; stroke-width: 1.3; fill: none; }
/* Anahtar kolu köşeli kırılır (Görsel 2.51); yuvarlak uç şekli bozuyordu. */
.ts-kagit .k-anahtar-kol { stroke-linecap: butt; stroke-linejoin: miter; }
/* Floresan armatürü kapalı şemada kalın çubukla gösterilir (Görsel 2.51/20) */
.ts-kagit .k-floresan-govde { stroke: #23303c; stroke-width: 6; fill: none;
  stroke-linecap: butt; }
.ts-kagit .am-txt { font-family: inherit; fill: #16202a; }
.ts-kagit .am-kusak-cizgi { stroke: #c3d0dc; stroke-width: 1.2; fill: none;
  stroke-dasharray: 12 8; }
.ts-kagit .am-kusak-lbl { font-size: 10px; letter-spacing: 1.1px; fill: #7d8fa1;
  font-weight: 600; text-transform: uppercase; }
.ts-kagit .am-baslik { font-size: 12px; letter-spacing: 1.4px; fill: #4a5f74;
  font-weight: 700; text-transform: uppercase; }
.ts-kagit .am-not { font-size: 10px; fill: #8697a8; }
.ts-kagit .k-oda-dis { fill: #eef2f6; stroke: #33414f; stroke-width: 2.2; }
.ts-kagit .k-kolon { stroke: #23303c; stroke-width: 2.6; fill: none; }
.ts-kagit .k-kolon-plan { stroke: #23303c; stroke-width: 1.8; fill: none;
  stroke-dasharray: 16 5 3 5; }
.ts-kagit .k-kapi-bosluk { fill: #fdfdfe; stroke: none; }
.ts-kagit .k-kapi { stroke: #33414f; stroke-width: 2.2; fill: none; }
.ts-kagit .k-kapi-yay { stroke: #8d9daa; stroke-width: 1.1; fill: none;
  stroke-dasharray: 4 4; }
.ts-kagit .k-hat.zayif { stroke-dasharray: 13 4 2.5 4; }
.ts-kagit .k-hat-lbl { font-size: 10px; font-weight: 600; fill: #2c4a63;
  paint-order: stroke fill; stroke: rgba(253,253,254,.95); stroke-width: 3.4px; }
.ts-kagit .k-cizelge { font-size: 10.5px; fill: #34424f;
  font-family: ui-monospace, Menlo, Consolas, monospace; }
.ts-kagit .k-ok { fill: #23303c; stroke: none; }

/* =============================================================================
   UYGULAMA FÖYLERİ
   ============================================================================= */
.ts-foy {
  position: absolute; inset: 0; z-index: 60; overflow-y: auto;
  background: #10161d;
}
.ts-foy.gizli { display: none; }

.tf-ust {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 18px 26px; background: var(--bg-2); border-bottom: 1px solid var(--cizgi);
  position: sticky; top: 0; z-index: 5;
}
.tf-ust h2 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.tf-ust p { margin: 0; font-size: 12px; color: var(--ink-silik); }
.tf-ust-btn { display: flex; gap: 8px; flex-shrink: 0; }

/* --- föyler arası gezinme ------------------------------------------------ */
.tf-gez {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: var(--bg-3); border: 1px solid var(--cizgi);
  border-radius: 8px; padding: 4px 6px; margin-top: 2px;
}
.tf-ok {
  background: var(--bg); border: 1px solid var(--cizgi); color: var(--ink);
  border-radius: 6px; width: 30px; height: 28px; font-size: 13px; line-height: 1;
  cursor: pointer; font-family: inherit; padding: 0;
}
.tf-ok:hover:not([disabled]) { border-color: var(--vurgu); color: var(--vurgu); }
.tf-ok[disabled] { opacity: .3; cursor: default; }
.tf-gez-sayi {
  font-size: 11px; color: var(--ink-silik); min-width: 54px; text-align: center;
  font-variant-numeric: tabular-nums;
}

.tf-altgez {
  display: flex; align-items: stretch; gap: 10px; justify-content: space-between;
  width: 210mm; max-width: calc(100% - 40px); margin: -18px auto 0; padding: 0 0 40px;
}
.tf-alt-ok { flex: 1; text-align: left; display: flex; flex-direction: column;
  gap: 3px; padding: 9px 13px; min-width: 0; }
.tf-altgez > .tf-alt-ok:last-child { text-align: right; align-items: flex-end; }
.tf-alt-ok .y { font-size: 11px; color: var(--ink-silik); letter-spacing: .4px; }
.tf-alt-ok .a { font-size: 12px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tf-alt-ok:hover:not([disabled]) .a { color: var(--vurgu); }
.tf-alt-ok[disabled] { opacity: .35; cursor: default; }

.tf-araclar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 26px; background: var(--bg-3); border-bottom: 1px solid var(--cizgi);
}
.tf-arama, .tf-sec {
  background: var(--bg); border: 1px solid var(--cizgi); color: var(--ink);
  border-radius: 6px; padding: 7px 11px; font-size: 13px; font-family: inherit;
}
.tf-arama { width: 260px; }
.tf-sec { max-width: 330px; }
.tf-onay { font-size: 12px; color: var(--ink-soluk); display: flex;
  align-items: center; gap: 6px; cursor: pointer; }
.tf-sayi { margin-left: auto; font-size: 12px; color: var(--ink-silik); }

.tf-liste { padding: 14px 26px 40px; }
.tf-liste h3 {
  margin: 20px 0 8px; font-size: 11px; letter-spacing: .9px; text-transform: uppercase;
  color: var(--ink-silik); font-weight: 600;
}
.tf-oge {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 9px 12px; margin-bottom: 4px; font-family: inherit; font-size: 13px;
  background: var(--bg-2); border: 1px solid var(--cizgi); border-radius: 7px;
  color: var(--ink-soluk); cursor: pointer;
}
.tf-oge:hover { border-color: var(--vurgu); color: var(--ink); }
.tf-oge.devreli { border-left: 3px solid var(--iyi); }
.tf-oge .tf-no {
  min-width: 44px; font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--ink-silik);
}
.tf-oge .tf-ad { flex: 1; }
.tf-oge .tf-etiket { font-size: 11px; color: var(--ink-silik); }
.tf-oge.devreli .tf-etiket { color: var(--iyi); }

/* ------------------------------------------------------------- A4 SAYFALAR */
.tf-sayfa { padding: 0 0 40px; }
.tf-kagitlar { display: flex; flex-direction: column; align-items: center;
  gap: 18px; padding: 22px 0 40px; }
.tf-kagit {
  width: 210mm; height: 297mm; background: #fff; color: #14181d;
  padding: 14mm; display: flex; flex-direction: column;
  box-shadow: 0 6px 26px rgba(0,0,0,.45); overflow: hidden;
  font-size: 10.5pt; line-height: 1.42;
}
.tf-kagit-ust {
  display: flex; justify-content: space-between; font-size: 8pt; color: #6b7b8b;
  border-bottom: 1px solid #cfd8e1; padding-bottom: 3mm; margin-bottom: 4mm;
  flex-shrink: 0; height: 9mm;
}
.tf-kagit-ic { flex: 1; min-height: 0; overflow: hidden; }
.tf-kagit-alt {
  flex-shrink: 0; text-align: center; font-size: 8pt; color: #8b9aa9;
  border-top: 1px solid #cfd8e1; padding-top: 2.5mm; margin-top: 3mm;
}
.tf-olcer {
  position: absolute; left: -9999px; top: 0; width: 180mm; visibility: hidden;
  font-size: 10.5pt; line-height: 1.42; color: #14181d;
}

.tf-kagit h2, .tf-olcer h2 {
  font-size: 11pt; margin: 5mm 0 2mm; letter-spacing: .5px;
  border-bottom: 1.5px solid #33414f; padding-bottom: 1mm; color: #16202a;
}
.tf-ust-tablo, .tf-tablo {
  width: 100%; border-collapse: collapse; margin-bottom: 3mm; font-size: 9.5pt;
}
.tf-ust-tablo th, .tf-ust-tablo td, .tf-tablo th, .tf-tablo td {
  border: 1px solid #4a5b6b; padding: 1.6mm 2.2mm; text-align: left; vertical-align: top;
}
.tf-ust-tablo th, .tf-tablo th { background: #eef2f6; font-size: 8.5pt;
  letter-spacing: .3px; white-space: nowrap; }
.tf-ust-tablo td.ad { font-weight: 700; }
.tf-ust-tablo td.no { font-weight: 700; text-align: center; width: 22mm; }
.tf-tablo td.no, .tf-tablo th.no { width: 10mm; text-align: center; }
.tf-tablo td.p, .tf-tablo th.p { width: 18mm; text-align: center; }
.tf-tablo tr.toplam td { font-weight: 700; background: #f4f7fa; }
.tf-ogr td.bos { min-width: 34mm; }

/* 1-5 derecelendirme ölçeği (modüldeki biçim) */
.tf-deg-not { margin: 0 0 1.5mm; font-size: 8.5pt; line-height: 1.45; }
.tf-derece-blok { break-inside: avoid; page-break-inside: avoid; margin-bottom: 3mm; }
.tf-derece { margin-bottom: 0; }
.tf-derece th.ust {
  text-align: center; font-weight: 700; font-size: 9.5pt; letter-spacing: .5px;
}
.tf-derece th.aciklama {
  background: #f7f9fb; font-weight: 400; font-size: 8pt; white-space: normal;
}
.tf-derece td.d, .tf-derece th.d { width: 7mm; text-align: center; }
.tf-derece-alt { margin-top: -1px; font-size: 8.5pt; }
.tf-derece-alt td { width: 50%; }
.tf-derece-alt td.sag { text-align: right; }

/* GÖZLEM LİSTESİ (TA1005 · `olcek: "kontrol"`). Kitapta puan sütunu YOK,
   evet/hayır var; 1-5 ölçeği gibi göstermek kitapta olmayan bir
   puanlama uydurmak olurdu (`denetim/38 · 3`). */
.tf-gozlem { margin-bottom: 0; }
.tf-gozlem th.ust {
  text-align: center; letter-spacing: .04em; font-weight: 700;
}
.tf-gozlem td.d, .tf-gozlem th.d { width: 14mm; text-align: center; }

.tf-amac { margin: 2mm 0 3mm; }
.tf-liste-ul { margin: 0 0 3mm 5mm; padding: 0; }
.tf-liste-ul li { margin-bottom: 1mm; }
.tf-adim { display: flex; gap: 2.5mm; margin-bottom: 1.4mm; }
.tf-adim .n { min-width: 6mm; font-weight: 700; color: #4a5b6b; }

.tf-cizim {
  border: 1px solid #cfd8e1; border-radius: 3px; background: #fff;
  margin: 2mm 0 4mm; padding: 2mm; height: 78mm; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tf-cizim .tf-svg { width: 100%; height: 100%; background: #fff; }

/* ------------------------------------------------- DAR EKRAN (TELEFON) ---
   ÖLÇÜLDÜ (`denetim/69 · 2`, `YAYIN-DURUMU.md`): 412 px pencerede çizim
   alanı 0 × 0 idi — öğretmen araç çubuğunu, kütüphaneyi ve paneli
   görüyor, SİMÜLASYONU GÖRMÜYORDU.

   Sebep tahmin edilmedi, kutu kutu ölçüldü:

       .ts-govde (flex satır)   412 px
         .ts-kutuphane   186 px   flex: 0 0 auto   ← küçülmüyor
         .ts-sahne         0 px   flex: 1 1 0%     ← tek küçülen O
         .ts-yan         268 px   flex: 0 0 auto   ← küçülmüyor
                         -----
       iki sabit sütun   454 px  >  412 px pencere

   Yani kusur çizimde değil: iki sabit sütun pencereden geniş ve
   küçülebilen tek kutu çizimdi.

   ÇÖZÜM: dar ekranda satır DEĞİL sütun diz, ve ÇİZİM ÖNCE gelsin.
   Paneller çizimin altına iner, kendi içlerinde kayar. Masaüstü
   düzenine dokunulmaz — kural yalnız bu medya sorgusunun içindedir,
   kontrol ölçümü de bunu doğruluyor (1366 px'de çizim 911 × 640,
   değişmedi). */
@media (max-width: 900px) {
  .ts-govde { flex-direction: column; }

  /* Çizim önce: `order` ile, DOM sırasını değiştirmeden. */
  .ts-sahne     { order: 1; width: 100%; flex: 1 1 auto; min-height: 58vh; }
  .ts-yan       { order: 2; width: 100%; max-height: 34vh;
                  border-left: 0; border-top: 1px solid var(--cizgi); }
  .ts-kutuphane { order: 3; width: 100%; max-height: 34vh;
                  border-right: 0; border-top: 1px solid var(--cizgi); }

  /* Yan yana iki görünüm dar ekrana sığmaz; alt alta iner. */
  .ts-gorunumler { flex-direction: column; }
  /* Sütun dizilimde dikey tutamak anlamsız — gizlenir ve paneller
     kendi paylarına döner (`denetim/75 · 4`). */
  .gorunum-ikili .ts-bolme { display: none; }
  .gorunum-ikili .ts-gorunum { flex: 1 1 0% !important; }
  .ts-gorunum + .ts-gorunum {
    border-left: 0; border-top: 1px solid var(--cizgi); }

  /* Araç çubuğu dar ekranda tek satırda taşıyordu; sarsın. */
  .ts-arac { flex-wrap: wrap; }

  /* Sekme şeridi 412 px pencerede 458 px'e taşıyordu (ölçüldü) ve sayfayı
     YATAY KAYDIRIYORDU. Sekmeler sarmaz — yedi görünüm alt alta inince
     ekranın yarısını yer — kendi içinde KAYDIRILIR. */
  .ts-sekmeler { overflow-x: auto; flex-wrap: nowrap; max-width: 100%;
                 -webkit-overflow-scrolling: touch; }
  .ts-sekme { flex: 0 0 auto; }
}

@media print {
  body { background: #fff !important; }
  .tesisatsim > *:not(.ts-foy) { display: none !important; }
  .ts-foy { position: static !important; overflow: visible !important;
    background: #fff !important; height: auto !important; }
  .yazdirma-gizle, .tf-araclar, .tf-liste { display: none !important; }
  .tf-sayfa { padding: 0 !important; }
  .tf-kagitlar { gap: 0 !important; padding: 0 !important; display: block !important; }
  .tf-kagit { box-shadow: none; page-break-after: always; break-after: page;
    width: 210mm; height: 297mm; margin: 0 !important; }
  .tf-kagit:last-child { page-break-after: auto; break-after: auto; }
}
@page { size: A4 portrait; margin: 0; }

/* =============================================================================
   EĞİTİM SETİ (varsayılan uygulama alanı)
   ============================================================================= */
.ts-kagit .s-txt { font-family: inherit; fill: #16202a; }
.ts-kagit .s-lbl { font-size: 12px; font-weight: 700; fill: #16202a;
  paint-order: stroke fill; stroke: rgba(255,255,255,.92); stroke-width: 3px; }
.ts-kagit .s-lbl-xs { font-size: 9.5px; fill: #46586a;
  paint-order: stroke fill; stroke: rgba(255,255,255,.9); stroke-width: 2.6px; }
.ts-kagit .s-baslik { font-size: 11px; letter-spacing: 1.4px; fill: #313f4a;
  text-transform: uppercase; font-weight: 600; }
.ts-kagit .s-marka { font-size: 10.5px; letter-spacing: 1.2px; fill: #10181f; }
.ts-kagit .s-sira-lbl { font-size: 10px; letter-spacing: 1px; fill: #232e37;
  font-weight: 600; }
.ts-kagit .s-bos { font-size: 10px; letter-spacing: 1.5px; fill: #060a0e; }
.ts-kagit .s-durum { font-size: 10.5px; font-weight: 700; fill: #574107;
  paint-order: stroke fill; stroke: rgba(255,255,255,.92); stroke-width: 3px; }
.ts-kagit .s-durum.uyari { fill: #b3261e; }

/* eğitim setinde ölçü aleti: kadran çemberi + alet harfi */
.ts-kagit .s-olcu-govde { fill: #fff; stroke: #17202c; stroke-width: 2; }
.ts-kagit .s-olcu-harf  { fill: #17202c; font-weight: 800; text-anchor: middle;
                          font-family: Georgia, 'Times New Roman', serif; }
.ts-kagit .s-lbl.koyu { fill: #16202b; stroke: rgba(255,255,255,.9); }
.ts-kagit .s-lbl-xs.koyu { fill: #0f1720; stroke: rgba(255,255,255,.96); }
.ts-kagit .s-boru-sayi { font-size: 10px; font-weight: 700; fill: #2d3c47;
  paint-order: stroke fill; stroke: rgba(250,251,252,.95); stroke-width: 3px; }
.ts-kagit .s-kanal-sayi { font-size: 10px; font-weight: 700; fill: #1d272e; }

/* --- gövde ve panolar --- */
.ts-kagit .s-govde { fill: #eef2f6; stroke: #c2cedb; stroke-width: 2.5; }
.ts-kagit .s-panoUyg { fill: #f7f9fb; stroke: #ccd8e3; stroke-width: 1.6; }
/* Besleme panosu AÇIK GRİ: malzemelerin biçimi koyu zeminde seçilemiyordu. */
.ts-kagit .s-pano { fill: #eef2f6; stroke: #b9c6d3; stroke-width: 2; }
.ts-kagit .s-yuva-lbl { font-size: 10.5px; font-weight: 600; fill: #384856;
  letter-spacing: .3px; }
.ts-kagit .s-yuva { fill: #f7f9fb; stroke: #c9d5e0; stroke-width: 1.2;
  stroke-dasharray: 7 5; }
.ts-kagit .s-pano ~ * .s-bos { fill: #97a8b8; }
.ts-kagit .s-kutu { fill: #e6ecf2; stroke: #c2cedb; stroke-width: 1.4;
  stroke-dasharray: 6 5; }

/* --- kasalar ---
   BOŞ kasa geri çekilir, DOLU kasa öne çıkar: öğrenci malzemenin nerede
   olduğunu tek bakışta görsün. Eskiden ikisi neredeyse aynı renkteydi. */
/* BOŞ kasanın içi saydamdır: malzeme yoksa borudan geçen kablo görünür —
   gerçek boş buat kutusunda da kablo içeriden geçerken görülür. */
.ts-kagit .s-kasa-govde { fill: none; stroke: #cbd7e2; stroke-width: 1.3; }
.ts-kagit .s-kasa-ic { fill: none; stroke: #dde6ee; stroke-width: 1; }
.ts-kagit .s-kasa.dolu .s-kasa-govde { fill: #fff; stroke: #52687d;
  stroke-width: 2.4; }
.ts-kagit .s-kasa.dolu .s-kasa-ic { fill: #fff; stroke: #b7c6d4; stroke-width: 1.2; }
.ts-kagit .s-kasa-hit { fill: transparent; }
.ts-kagit .s-tutamak { fill: transparent; stroke: none; pointer-events: all; }
.mod-tasi .ts-kagit .s-tutamak { cursor: grab; }
.mod-tasi .ts-kagit .s-kasa.dolu:hover .s-tutamak { fill: rgba(63,185,80,.14);
  stroke: var(--iyi); stroke-width: 1.6; stroke-dasharray: 5 4; }
.mod-tasi .ts-kagit .s-kasa:not(.dolu):hover .s-tutamak { fill: rgba(240,169,43,.12); }
.mod-calistir .ts-kagit .s-kasa.dolu .s-tutamak { cursor: pointer; }
.ts-kagit .s-kasa.hedef .s-kasa-govde { stroke: var(--vurgu); stroke-width: 2.8; }
.ts-kagit .s-kasa.hedef:not(.dolu) .s-kasa-ic { fill: #fff6e2; }
.ts-kagit .s-kasa.elde .s-kasa-govde { stroke: var(--iyi); stroke-width: 3.2; }
.mod-tasi .ts-kagit .s-kasa-hit, .ts-kagit .s-kasa.hedef .s-kasa-hit { cursor: pointer; }
.ts-kagit .s-kasa:not(.dolu):hover .s-kasa-govde { stroke: var(--vurgu); }

/* --- boru hatları --- */
/* Boş kanal geri planda kalır; içinden kablo geçen kanal belirginleşir. */
.ts-kagit .s-boru-dis { stroke: #c3d0dc; stroke-width: 25; stroke-linecap: round;
  opacity: .34; fill: none; }
.ts-kagit .s-boru-dis.dolu { stroke: #8ea3b8; opacity: .95; }
.ts-kagit .s-boru { stroke: #f0f4f8; stroke-width: 20; stroke-linecap: round;
  opacity: 1; fill: none; }
.ts-kagit .s-boru.dolu { stroke: #f4f7fa; }
.ts-kagit .s-boru.cevre { stroke: #f2f5f9; }

/* --- besleme panosu cihazları --- */
.ts-kagit .s-bara { stroke: rgba(0,0,0,.32); stroke-width: 1; }
.ts-kagit .s-sayac { fill: #dfe7ee; stroke: #8b9dae; stroke-width: 1.6; }
.ts-kagit .s-sayac-ekran { fill: #0e1a14; stroke: #2f4a3c; stroke-width: 1; }
.ts-kagit .s-sayac-yazi { font-size: 11px; font-weight: 700; fill: #6ee7a8;
  font-family: ui-monospace, Menlo, Consolas, monospace; }
.ts-kagit .s-otomat { fill: #e3eaf1; stroke: #8b9dae; stroke-width: 1.5; }
.ts-kagit .s-otomat-pencere { fill: #cbd6e1; }
.ts-kagit .s-kol { fill: #46566a; transition: y .16s; }
.ts-kagit .acik .s-kol { fill: var(--iyi); }
.ts-kagit .atmis .s-kol { fill: var(--kotu); }

/* ---- OTOMATIN MANDALI — PanoSim'in tasarımı (MEHMET, 7 Eylül) ------------
   *"otomatik sigorta tasarımı PanoSim'deki gibi olsun."*
   PanoSim OKUNDU, oraya tek karakter yazılmadı. Düz dolgu yerine geçişli
   renk: mandal enine silindir gibi (ışık soldan), pencere içeriye doğru
   koyulaşan bir oyuk, kırmızı işaret SABİT ve mandal onun içine girer.
   Ölçüler TesisatSim'in gövdesine göre yarıya indirildi (PanoSim 30×112,
   burada 40×56). */
.ts-kagit .s-mcb-kol { fill: url(#ts-mcbKol); stroke: #133b7d; stroke-width: .55;
                       transition: y .16s; }
/* TAM SİYAH DEĞİL, BİLEREK KONMUŞ KOYU — `_tustest 5`in işareti korunsun.
   O denetim "kuralı unutulmuş öge" arıyor ve işareti `rgb(0,0,0)`. Gölge
   için saf siyah yazmak, unutulmuş bir ögeyle aynı imzayı taşır ve
   denetimi körleştirir; iki ton koyu lacivert görünümü değiştirmiyor. */
.ts-kagit .s-mcb-kol-golge { fill: #06101f; opacity: .34; pointer-events: none;
                             transition: y .16s; }
.ts-kagit .s-mcb-kol-kenar { fill: #cfe6ff; opacity: .5; pointer-events: none;
                             transition: y .16s; }
.ts-kagit .s-mcb-oluk { fill: #0d2f63; opacity: .34; pointer-events: none;
                        transition: y .16s; }
/* Serbest uçtaki PARLAMA — ayrı bir renk değil, ışık yansıması: beyazdan
   saydama iner, altındaki mavi görünmeye devam eder. */
.ts-kagit .s-mcb-cap { fill: url(#ts-mcbParlakUst); stroke: none;
                       pointer-events: none; transition: y .16s; }
.ts-kagit .s-mcb-kolg.alt .s-mcb-cap { fill: url(#ts-mcbParlakAlt); }
/* Mandalın oyuğa GİRDİĞİ uç karanlığa dalıyormuş gibi koyulaşır. */
.ts-kagit .s-mcb-giris { fill: url(#ts-mcbGirisAlt); pointer-events: none;
                         transition: y .16s; }
.ts-kagit .s-mcb-kolg.alt .s-mcb-giris { fill: url(#ts-mcbGirisUst); }
/* Oyuk ve içindeki kırmızı işaret — sabit, mandal onun içine girer. */
.ts-kagit .s-mcb-oyuk-agiz    { fill: #050a12; opacity: .5; pointer-events: none; }
.ts-kagit .s-mcb-isaret       { fill: url(#ts-mcbIsaret); pointer-events: none; }
.ts-kagit .s-mcb-oyuk-icgolge { fill: url(#ts-mcbOyuk); pointer-events: none; }
.ts-kagit .s-mcb-oyuk-yan     { fill: #4a0f06; opacity: .55; pointer-events: none; }
.ts-kagit .s-mcb-oyuk-pah     { fill: #ffb9ab; opacity: .32; pointer-events: none; }
.ts-kagit .atmis .s-mcb-isaret { fill: #ff8c00; }
.ts-kagit .atmis .s-mcb-kol    { fill: #b06a1f; }
/* Pencere de PanoSim'deki gibi içeri koyulaşan bir oyuk olsun. */
.ts-kagit .s-otomat-pencere { fill: url(#ts-mcbPencere); }
.ts-kagit .s-acil { fill: #c0392b; stroke: #7d2318; stroke-width: 2; }
.ts-kagit .acik .s-acil { fill: #e05a4a; }
.ts-kagit .s-trafo { fill: #e3eaf1; stroke: #8b9dae; stroke-width: 1.6; }
.ts-kagit .s-trafo-sargi { stroke: #46566a; stroke-width: 2.4; fill: none; }
.ts-kagit .s-akimtrafo { fill: none; stroke: #46566a; stroke-width: 3; }
.ts-kagit .s-akimtrafo-ic { fill: #f7f9fb; stroke: #46566a; stroke-width: 2; }
.ts-kagit .s-setpriz { fill: #e9eef3; stroke: #b6c3cf; stroke-width: 1.5; }

/* --- kasaya monte malzemeler --- */
.ts-kagit .s-hale { fill: url(#ts-hale); opacity: 0; transition: opacity .14s;
                    pointer-events: none; }
/* Floresan ve LED SOĞUK BEYAZ yanar; akkor ampul sarı. Işığın rengi
   malzemeyi ayırt eden bilgidir (MEHMET, 14 Eylül). */
.ts-kagit .s-hale-soguk { fill: url(#ts-haleSoguk); }
/* AKKOR AMPUL — cam, kovan, flaman (13 Eylül, MEHMET: "gerçekçi olsun").
   Yanık/sönük farkı DÖRT yerden okunuyor: camın dolgusu, camın kenarı,
   flamanın rengi/kalınlığı ve hale. Tek renk değişimi yetmiyordu. */
.ts-kagit .s-ampul { fill: #eef2f6; fill-opacity: .82; stroke: #9fb0be;
                     stroke-width: 1.5; transition: fill .14s, stroke .14s; }
.ts-kagit .s-ampul.yaniyor { fill: url(#ts-camYanik); fill-opacity: 1; stroke: #cf9a10; }
.ts-kagit .s-cam-parlama { fill: none; stroke: #ffffff; stroke-width: 2.6;
                           stroke-linecap: round; opacity: .75; }
.ts-kagit .s-duy-boyun { fill: #b9c4cd; stroke: #7d8fa1; stroke-width: 1; }
.ts-kagit .s-duy-dis { stroke: #8fa0ae; stroke-width: .9; fill: none; opacity: .8; }
.ts-kagit .s-flaman-mil { stroke: #b8c2c9; stroke-width: 1.6; fill: none;
                          stroke-linecap: round; }
.ts-kagit .s-flaman-ayak { stroke: #98a7b4; stroke-width: 1.1; fill: none;
                           stroke-linecap: round; }
.ts-kagit .s-flaman { stroke: #98a7b4; stroke-width: 1.3; fill: none;
                      stroke-linejoin: round; stroke-linecap: round;
                      transition: stroke .14s, stroke-width .14s; }
/* flaman ve destek telleri camın KARDEŞİ — cam yanınca ikisi de kızarır */
.ts-kagit .s-ampul.yaniyor ~ .s-flaman { stroke: #e0521c; stroke-width: 2; }
.ts-kagit .s-ampul.yaniyor ~ .s-flaman-ayak { stroke: #c98a2a; }
.ts-kagit .s-ampul.yaniyor ~ .s-flaman-mil { stroke: #d8b877; }

/* ANAHTAR MEKANİZMASI — kesit. Öğrenci akımın L'den hangi sortiye
   gittiğini şekilden okur; durum artık yalnız yazıda değil. */
/* MEKANİZMA TIKLAMA YUTMAZ — `_kablolamatest 1d` (`117 · 2`) yakaladı:
   oda dikdörtgeni bir klemens ucunun (e1:1) üstüne düşüyor ve tıklanan
   uç yerine kendisi en üstteki öge oluyordu. Bu parçalar süstür; tıklamayı
   `s-tus-hit` ve `s-tutamak` alır. */
.ts-kagit .s-mek-oda,
.ts-kagit .s-mek-uc,
.ts-kagit .s-bicak,
.ts-kagit .s-bicak > * { pointer-events: none; }
.ts-kagit .s-mek-oda { fill: #e7edf3; stroke: #aebbc7; stroke-width: 1; }
.ts-kagit .s-mek-uc { fill: #cfd9e2; stroke: #7d8fa1; stroke-width: 1.1; }
.ts-kagit .s-mek-uc.faz { fill: #a9743f; stroke: #6d4520; }
.ts-kagit .s-mek-uc.sorti { fill: #cbd5de; stroke: #6f8091; }
.ts-kagit .s-bicak-kapali,
.ts-kagit .s-bicak-acik { stroke: #8a5a2b; stroke-width: 2.6; fill: none;
                          stroke-linecap: round; }
.ts-kagit .s-bicak-acik { display: none; }
.ts-kagit .s-bicak.acik .s-bicak-kapali { display: none; }
.ts-kagit .s-bicak.acik .s-bicak-acik { display: block; stroke: #b5651d; }
/* Sönük tüp tebeşir grisi, yanan tüp soğuk beyaz — eskiden ikisi de
   neredeyse aynı beyazdı, yandığı anlaşılmıyordu. */
.ts-kagit .s-tup { fill: #c6d2da; stroke: #8d9ca8; stroke-width: 1.3;
                   transition: fill .14s, stroke .14s; }
/* Yanan tüp de SARI — armatürle aynı aile; floresanda zeminden renk farkı
   33,4 → 65,4. İçindeki beyaz çekirdek DEĞİŞMEDİ: küçük ölçekte ışığı
   okutan şey odur. */
.ts-kagit .s-tup.yaniyor { fill: #ffc61a; stroke: #a5730a; stroke-width: 1.6; }
/* yanan tüpün içindeki beyaz çekirdek — sönükken yok */
.ts-kagit .s-tup-cekirdek { fill: #ffffff; opacity: 0; transition: opacity .14s; }
.ts-kagit .s-tup.yaniyor ~ .s-tup-cekirdek { opacity: .95; }
.ts-kagit .s-armatur { fill: #dde4eb; stroke: #a9b8c6; stroke-width: 1.4; }
.ts-kagit .s-zil-kapak { fill: #d7dee6; stroke: #97a7b7; stroke-width: 1.6; }
.ts-kagit .caliyor .s-zil-kapak { fill: #ffe08a; stroke: #c9971a; }
/* ZİL KUBBESİ — kuralı hiç yazılmamıştı, varsayılanla SİYAH çiziliyordu
   (`denetim/123 · 1` ailesi). Renk yeni değil: tabanının çizgi tonu. */
/* ZİL BUTONU PANELİ — isimlikli satırlar + klemens şeridi */
.ts-kagit .s-grup-parlak { fill: #ffffff; opacity: .55; }
.ts-kagit .s-grup-isimlik { fill: #fbfcfd; stroke: #8f959a; stroke-width: .9; }
.ts-kagit .s-grup-yazi { stroke: #3a4046; stroke-width: 2; fill: none; }
.ts-kagit .s-grup-oyuk { fill: #c9ced3; stroke: #a9aeb3; stroke-width: .7; }
.ts-kagit .s-grup-klemens { fill: #c6cbcf; stroke: #98a0a6; stroke-width: .9; }
.ts-kagit .s-grup-klemens-goz { fill: #eef1f3; stroke: #98a0a6; stroke-width: .6; }
.ts-kagit .s-grup-vida { fill: #cfd5da; stroke: #5d666e; stroke-width: .5; }

/* FLORESAN ARMATÜR — reflektör sac + duy kapakları */
.ts-kagit .s-flo-sac { fill: #aeb8c0; stroke: #7a848c; stroke-width: 1; }
.ts-kagit .s-flo-parlak { stroke: #e8edf1; stroke-width: 1.6; fill: none; opacity: .9; }
.ts-kagit .s-flo-golge { stroke: #6d767e; stroke-width: 1.2; fill: none; }
.ts-kagit .s-flo-duy { fill: #8e99a2; stroke: #69737b; stroke-width: .8; }

/* OTOMATIN ÖN YÜZ ETİKETİ — gerçek cihazdaki baskı alanı */
.ts-kagit .s-otomat-etiket { fill: #eef2f5; stroke: #b7c0c8; stroke-width: .5; }
.ts-kagit .s-otomat-etiket-cizgi { stroke: #b7c0c8; stroke-width: .8; fill: none; }

/* KAPI OTOMATİĞİ — koyu döküm gövde, yatay kaburgalar, mercek */
.ts-kagit .s-kapi-govde { fill: #4a4f55; stroke: #2c3035; stroke-width: 1.2; }
.ts-kagit .s-kapi-kulak { fill: #9aa2aa; stroke: #6d757d; stroke-width: .9; }
.ts-kagit .s-kapi-vida { fill: #b9c1c9; stroke: #5d666e; stroke-width: .6; }
.ts-kagit .s-kapi-kaburga { fill: #3a3f45; }
.ts-kagit .s-kapi-mercek-yuva { fill: #6f767d; stroke: #2c3035; stroke-width: 1; }
.ts-kagit .s-kapi-mercek { fill: #c9d1d8; stroke: #5d666e; stroke-width: .8;
                           transition: fill .14s, stroke .14s; }
.ts-kagit .acik .s-kapi-mercek { fill: #ffd76b; stroke: #c9971a; }
/* Mandal: enerjide hızla içeri çekilir, kesilince yayla sekerek çıkar */
.ts-kagit .s-kapi-dil { fill: #c3cad1; stroke: #5d666e; stroke-width: .9;
                        transition: transform .38s cubic-bezier(.3, 1.9, .5, 1); }
.ts-kagit .acik .s-kapi-dil { transform: translateX(-13px);
                              transition: transform .1s ease-in; }
@media (prefers-reduced-motion: reduce) {
  .ts-kagit .s-kapi-dil, .ts-kagit .acik .s-kapi-dil { transition: none; }
}

/* KAPI ZİLİ — dikdörtgen duvar gövdesi, eğik ızgara, isimlik, ses işareti */
.ts-kagit .s-zil-govde { fill: #f2f5f7; stroke: #aab3ba; stroke-width: 1.2; }
.ts-kagit .s-zil-kenar { stroke: #ffffff; stroke-width: 1.8; fill: none; }
.ts-kagit .s-zil-dilim { stroke: #b7c0c7; stroke-width: 1.8; fill: none;
                         stroke-linecap: round; }
.ts-kagit .s-zil-dilim-koyu { stroke: #33414f; stroke-width: 2.4; fill: none;
                              stroke-linecap: round; }
.ts-kagit .s-zil-isimlik { fill: #e6eaee; stroke: #c1c9cf; stroke-width: .6; }
/* Ses işareti yalnız enerji gelince görünür; titreyen de yalnız odur. */
.ts-kagit .s-zil-ses { opacity: 0; transition: opacity .12s; }
.ts-kagit .s-zil-ses.duyuluyor { opacity: 1;
                                 animation: ts-titre .09s linear infinite; }
.ts-kagit .s-zil-dalga { stroke: #c8871a; stroke-width: 2.2; fill: none;
                         stroke-linecap: round; }
@keyframes ts-titre {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-1.1px, .5px); }
  75%      { transform: translate(1.1px, -.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .ts-kagit .s-zil-ses.duyuluyor { animation: none; }
}
/* MOTOR DÖNMESİ (TA1005 1.6 · MEHMET, 24 Eylül): kesikli halka motor
   enerjiliyken döner. Tam çember olduğu için kutusu merkezde — fill-box
   dönüş merkezini motorun ekseninde tutar. */
.ts-kagit .motor-rotor { fill: none; stroke: #7a8794; stroke-width: 2.2;
  stroke-dasharray: 7 5; opacity: .35; transform-box: fill-box;
  transform-origin: center; }
.ts-kagit .motor-rotor.donuyor { stroke: var(--iyi, #2f9e4f); opacity: 1;
  animation: ts-don .8s linear infinite; }
@keyframes ts-don { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ts-kagit .motor-rotor.donuyor { animation: none; }
}
.ts-kagit .s-kilit { fill: #cfd8e1; stroke: #94a5b6; stroke-width: 1.6; }
.ts-kagit .s-kilit-dil { fill: #8b9aa9; transition: x .18s; }
.ts-kagit .acik .s-kilit-dil { fill: var(--iyi); }
/* SIVA ÜSTÜ BUAT — iş emri 2026-09-15 · 2. madde. Geçişler `tanimlarKur`da
   tek tanım; tanım yoksa (geçişi kurmayan bir görünüm) düz yedek renk. */
/* Biçim MEHMET'in gönderdiği gerçek buat fotoğrafından; renk onun
   düzeltmesiyle sönük koyu kahve ("çok turuncu olmasın, siyahta doku
   belli olmaz"). */
.ts-kagit .s-buat { fill: url(#ts-buatGovde) #a67256; stroke: #57331f; stroke-width: 1.6; }
.ts-kagit .s-buat-ic { fill: url(#ts-buatIc) #9a6a4f; stroke: #57331f; stroke-width: 1.2; }
.ts-kagit .s-buat-boru { fill: #a26f52; stroke: #57331f; stroke-width: 1;
                         pointer-events: none; }
.ts-kagit .s-buat-boru-isik { stroke: #dbb096; stroke-width: 2.4; opacity: .85; fill: none;
                              stroke-linecap: round; pointer-events: none; }
.ts-kagit .s-buat-taban { fill: none; stroke: #86573f; stroke-width: 1.2; pointer-events: none; }
.ts-kagit .s-buat-vida { fill: #2e1b10; stroke: #d2a68a; stroke-width: .7; pointer-events: none; }
.ts-kagit .s-buat-parlak { stroke: #e4bca2; stroke-width: 1.6; opacity: .8; fill: none;
                           stroke-linecap: round; pointer-events: none; }
/* BUAT DÜZENİ DİŞLİSİ — "Buat Düzeni" panelini açar (MEHMET, 21 Eylül).
   Yalnız Taşı ve Kablola kiplerinde anlamlı; Çalıştır kipinde gizlenir —
   bu bir eylem ENGELLEMESİ değil (`AGENTS · 2a`'nın `ariza` kipi gibi),
   yalnızca hangi kipte göründüğü, o yüzden kod dalı değil CSS. */
.ts-kagit .s-buat-ayar { cursor: pointer; }
.ts-kagit .s-buat-ayar-zemin { fill: #2e1b10; stroke: #d2a68a; stroke-width: 1; opacity: .85; }
.ts-kagit .s-buat-ayar-ikon { font-size: 13px; fill: #e4bca2; pointer-events: none; }
.mod-calistir .ts-kagit .s-buat-ayar { display: none; }
.ts-kagit .s-klemens.lustr { fill: url(#ts-klemensGovde) #efebe3; stroke: #8b7f70;
                             stroke-width: 1; }
.ts-kagit .s-klemens-bolme { stroke: #a8998a; stroke-width: 1; fill: none;
                             pointer-events: none; }

/* TAVAN LAMBASI — iş emri 2026-09-15 · 3. madde. `e27` işaretli seçiciler
   yalnız bu lambayı boyar (özgüllük 0,3,0 → eski `s-duy`/`s-ampul`
   kurallarını dosyadaki sıradan bağımsız ezer). Yanınca ışık CAMIN İÇİNDE:
   MEHMET'in kararı "içi parlasın + hafif hale". */
/* 15 Eylül: MEHMET'in iki ampul resmine göre — şeffaf cam, gümüş E27 kovan,
   cam mil. Tavan göbeği ve bakalit duy kaldırıldı. */
.ts-kagit .s-duy-boyun.e27 { fill: #2b2d31; stroke: #151619; stroke-width: 1; }
.ts-kagit .s-duy.e27 { fill: url(#ts-kovanMetal) #c3c8cd; stroke: #5d636a; stroke-width: 1; }
.ts-kagit .s-kasa .s-duy-dis { stroke: #6c737a; stroke-width: 1.1; opacity: .9; }
.ts-kagit .s-ampul.e27 { fill: url(#ts-camBerrak) #eef1f4; fill-opacity: 1; stroke: #a3abb3; }
.ts-kagit .s-kasa .s-flaman-mil { stroke: #d9dfe4; stroke-width: 3.4; }
.ts-kagit .s-ampul.e27.yaniyor { fill: url(#ts-camYanik) #ffe485; fill-opacity: 1; stroke: #d39a28; }
.ts-kagit .s-ampul-isik { fill: url(#ts-camIsik) #fff4c4; opacity: 0; transition: opacity .14s;
                          pointer-events: none; }
.ts-kagit .s-ampul.yaniyor ~ .s-ampul-isik { opacity: 1; }
.ts-kagit .s-hale.s-hale-hafif { fill: url(#ts-haleHafif); }
.ts-kagit .s-klemens { fill: #46586a; stroke: #2b3846; stroke-width: 1.1; }
/* KLEMENS ETİKETİ DE HALE ALIR (`denetim/145 · 3`).
   Öteki bütün yazı sınıflarında hale VARDI (`s-lbl` 3 px · `s-lbl-xs`
   2,6 · `s-durum` 3 · `uc-no` 2,2); halesiz tek sınıf buydu — ve
   `_etikettest`in "MANDAL AŞILDI" örneklerinde en çok görünen yazı da
   `K1` · `K2` idi. MEHMET'in cümlesi ikisini birden söylüyordu:
   *"...tam kablo yolunda duruyor ve kablo geçince üzerine denk
   geliyor. kapalı açık yazısıda aynı şekilde."* Kusur "kablonun
   üstünde olmak" değil, OKUNMAMAK. */
.ts-kagit .s-klemens-lbl { font-size: 8.5px; font-weight: 700; fill: #26323b;
  paint-order: stroke fill; stroke: rgba(255,255,255,.94); stroke-width: 2.2px; }
.ts-kagit .s-anahtar-cerceve { fill: url(#ts-anahtarKasa); stroke: #b3a488;
                                stroke-width: 1.6; }
/* çerçevenin iç bizeli — kabartma hissini veren beyaz ince hat */
.ts-kagit .s-anahtar-bizel { fill: none; stroke: #ffffff; stroke-width: 1.2;
                             opacity: .55; }
/* tuşun üstündeki tip simgesi */
.ts-kagit .s-tus-simge { fill: none; stroke: #8d7f66; stroke-width: 1.6;
                         stroke-linecap: round; stroke-linejoin: round;
                         pointer-events: none; }
.ts-kagit .s-tus-simge.dolu { fill: #8d7f66; stroke: none; }
/* ROCKER TUŞ — `denetim/112 · 3`. Tuş plakadan AYRI görünecek:
   çevresinde boşluk, kendi çerçevesi, ve BASILI KENAR şeridi.
   Şerit kapalıyken üstte, açıkken altta durur — konum değişimi renkten
   bağımsız okunur (renk körlüğü · projeksiyon perdesi, `101 · 3 · 4`). */
/* TUŞ 3 BOYUTLU (13 Eylül) — üstte ışık, altta gölge. Düz dolgu
   "gerçek bir buton gibi" görünmüyordu. */
.ts-kagit .s-tus { fill: url(#ts-tusYuz); stroke: #b3a488; stroke-width: 1; }
.ts-kagit .s-tus.acik { fill: url(#ts-tusAcik); stroke: #c9950f; }
/* TIKLAMA YÜZEYİ GÖRÜNMEZDİR (`denetim/123 · 1`).
   `114 · 2`de her tuşa kendi tıklama alanı konuldu ama bu sınıfa HİÇ
   KURAL YAZILMADI: SVG'de varsayılan dolgu SİYAHTIR, yüzey tuşun
   üstüne siyah bir dikdörtgen olarak bindi. MEHMET *"komütatör ve
   üçlü anahtar öyle siyah kalıyor, bir tepki yok"* dedi; ölçüldü
   (`_tustest.js`): tuş karesinin ortalama parlaklığı tek tuşluda 225,
   çok tuşluda 79. Yüzey artık saydam ama tıklanabilir. */
.ts-kagit .s-tus-hit { fill: transparent; }

/* DUY — aynı kusurun ikinci örneği (`denetim/123 · 1`).
   `s-duy` sınıfına da hiç kural yazılmamıştı; lambanın duyu SVG
   varsayılanıyla SİYAH bir dikdörtgen olarak çiziliyordu. Renk
   yeni değil: kasa gövdesinin çizgi rengi (`#52687d`) ve dolgusu
   (`#e8eef4`, tuşla aynı) — `105 · 4`ün 19 renk sayısı değişmiyor. */
.ts-kagit .s-duy { fill: #e8eef4; stroke: #52687d; stroke-width: 1.2; }
.ts-kagit .s-tus-basik { fill: #7d8fa1; opacity: .30; }
/* tuş 30 → 13 inceldi (mekanizma odası açıldı); şeridin gideceği yol da
   23'ten 6'ya indi, yoksa gölge tuşun dışına taşıyordu. */
.ts-kagit .s-tus.acik + .s-tus-basik { transform: translateY(6px); opacity: .38; }
/* Süs çizgileri tıklamayı yutmasın — oyuk çizgisi bir ucun üstüne
   denk gelince uç tıklanamaz oluyordu (`_kablolamatest 1d` 18/20). */
.ts-kagit .s-tus-oyuk { stroke: #b6c3cf; stroke-width: 1; fill: none;
                        pointer-events: none; }
.ts-kagit .s-tus-basik { pointer-events: none; }
.ts-kagit .s-tus-oyukAlan { fill: #5d6b79; opacity: .55; pointer-events: none; }

/* SIVA ÜSTÜ ANAHTAR AİLESİ — iş emri 2026-09-15. Düz renk + ince çizgi +
   tek koyu ton; gradyan, gölge, filtre YOK (tahta bilgisayarı eski).
   Tuş dolgusu açıkken DE aynı: durum RENKTEN değil basılı yarının
   yerinden okunuyor. Dolgu #eef0f0 bilerek `_tustest` kanal kuralının
   #e8eef4'üne yakın seçildi — kanal kuralı rengi değil şeridi söndürdüğünde
   farkın düştüğünü görebilsin. */
/* 15 Eylül akşam — MEHMET düz rengi reddetti ("kağıt çizim gibi"). Kapak ve
   tuş gövdesi `<defs>`teki TEK geçiş tanımını kullanıyor; tuşun kendisi
   (`s-tus`) yalnız koyu gömme kenarı, dolgusu saydam. Aşağıdaki düz
   `s-tus` dolgu kuralları dolgu-saydamlığı 0 ile görünmez kalıyor. */
.ts-kagit .s-anahtar-cerceve.sivaustu { fill: url(#ts-sivaKasa); stroke: #c29380;
                                        stroke-width: 1.4; }
.ts-kagit .s-tus-govde { fill: url(#ts-sivaTus); stroke: none; pointer-events: none; }
.ts-kagit .s-tus.sivaustu,
.ts-kagit .s-tus.sivaustu.acik { fill-opacity: 0; stroke: #4f3a31 !important;
                                 stroke-width: 1.2; }
.ts-kagit .s-tus-parlak { stroke: #fff2ea; stroke-width: 2; opacity: .95; fill: none;
                          stroke-linecap: round; pointer-events: none; }
.ts-kagit .s-tus.acik + .s-tus-basik + .s-tus-parlak { transform: translateY(-33px); }
.ts-kagit .s-anahtar-bizel.sivaustu { stroke: #d6d3ca; stroke-width: 1;
                                      opacity: 1; pointer-events: none; }
.ts-kagit .s-sivaustu-taban { fill: #d7a893; pointer-events: none; }
.ts-kagit .s-kablo-girisi   { fill: #7a5646; pointer-events: none; }
.ts-kagit .s-vida-kapak     { pointer-events: none; }
.ts-kagit .s-tus.sivaustu,
.ts-kagit .s-tus.sivaustu.acik { fill: #eef0f0; stroke: #9a978d; stroke-width: 1.1; }
.ts-kagit .s-tus-basik.sivaustu { fill: url(#ts-sivaGolge); opacity: 1; }
.ts-kagit .s-tus.acik + .s-tus-basik.sivaustu { transform: translateY(20px); opacity: 1; }
.ts-kagit .s-tus-mentese { stroke: #c4c6c4; stroke-width: 1; fill: none;
                           pointer-events: none; }

/* KASA TİPLERİ — `denetim/112 · 2`: çerçeve cihaza göre, herkese aynı değil */
.ts-kagit .s-ray-profil  { fill: #cbd7e2; stroke: #9fb0c0; stroke-width: 1; }
.ts-kagit .s-pano-govde  { fill: #fff; stroke: #52687d; stroke-width: 1.6; }
.ts-kagit .s-tavan-cizgi { stroke: #52687d; stroke-width: 2.4; fill: none; }
.ts-kagit .s-tavan-aski  { fill: #cbd7e2; stroke: #9fb0c0; stroke-width: 1; }
.ts-kagit .s-buat-sinir  { fill: none; stroke: #b7c6d4; stroke-width: 1.4;
                           stroke-dasharray: 5 5; }

/* --------------------------------------------- 2. PARTİ · RAY CİHAZLARI
   `denetim/106 · 7` + `113 · 3`. Yeni TASARIM rengi eklenmiyor; hepsi
   var olan kâğıt tonlarından türüyor (tasarım rengi 19'da kalmalı). */
.ts-kagit .s-ray-klemens { fill: var(--kagit-ink); opacity: .38; stroke: none; }
.ts-kagit .s-ray-kertik  { fill: none; stroke: var(--kagit-ink); stroke-width: 1.6;
                           opacity: .55; }
.ts-kagit .s-test-dugme  { fill: #fff; stroke: var(--kagit-ink); stroke-width: 1.4; }
.ts-kagit .s-test-yazi   { font-size: 8px; font-weight: 700; fill: var(--kagit-ink);
                           text-anchor: middle; }
.ts-kagit .s-kutup-kol   { fill: none; stroke: var(--kagit-ink); stroke-width: 1;
                           opacity: .45; }
.ts-kagit .s-ortak-bara  { fill: var(--kagit-ink); opacity: .55; stroke: none; }
.ts-kagit .s-sayac-kapak { fill: none; stroke: var(--kagit-ink); stroke-width: 1.2;
                           opacity: .6; }
.ts-kagit .s-muhur       { fill: var(--kagit-ink); opacity: .45; stroke: none; }
.ts-kagit .s-faz-isik    { fill: none; stroke: var(--kagit-ink); stroke-width: 1.3; }
.ts-kagit .s-kablo-girisi{ fill: var(--kagit-ink); opacity: .30; stroke: none; }
.ts-kagit .s-arka-uc     { fill: var(--kagit-ink); opacity: .38; stroke: none; }
.ts-kagit .s-buton { fill: #d8e0e8; stroke: #9fb0bf; stroke-width: 1.5; }
.ts-kagit .basili .s-buton { fill: #ffd76b; stroke: #c9971a; }
.ts-kagit .s-buton.acik { fill: #ffd76b; stroke: #c9971a; }
.ts-kagit .s-dimmer { fill: #e3eaf1; stroke: #a9b8c6; stroke-width: 1.5; }
.ts-kagit .s-dimmer-ibre { stroke: #33414f; stroke-width: 3; stroke-linecap: round;
  fill: none; transition: transform .2s; }
.ts-kagit .s-sensor { fill: #cfd9e3; stroke: #8fa1b2; stroke-width: 1.5; }
.ts-kagit .s-sensor-hale { fill: transparent; }
/* --- ayırt edici yüzler (13 Eylül) — `_benzerliktest` ölçtü, çizim
   ayrıldı. Ayırt edici uydurulmadı, cihazın kendi gerçeği çizildi. --- */
.ts-kagit .s-dimmer-govde { fill: #eef3f8; stroke: #a9b8c6; stroke-width: 1.4; }
.ts-kagit .s-dimmer-cizik { stroke: #7a8b9b; stroke-width: 1.3; stroke-linecap: round; }
.ts-kagit .s-sensor-dilim { stroke: #7e909f; stroke-width: 1.1; fill: none; opacity: .85; }
.ts-kagit .s-sensor-isin  { stroke: #9aa9b7; stroke-width: 1.2; fill: none;
                            stroke-dasharray: 3 2.5; }
.ts-kagit .s-buton-bilezik { fill: #cbd6e0; stroke: #8fa1b2; stroke-width: 1.5; }
.ts-kagit .s-buton-cani { fill: #6b7b8a; stroke: none; }
.ts-kagit .s-olcu-skala  { fill: none; stroke: #33414f; stroke-width: 1.4; }
.ts-kagit .s-olcu-taksim { stroke: #33414f; stroke-width: 1.2; fill: none; }
.ts-kagit .s-olcu-bobin  { fill: none; stroke: #6d7f90; stroke-width: 1.4; }
.ts-kagit .s-olcu-ibre   { stroke: #b8341f; stroke-width: 1.8; stroke-linecap: round;
                           fill: none; }
.ts-kagit .s-olcu-mil    { fill: #33414f; stroke: none; }
.ts-kagit .s-bicak-yol { fill: none; stroke: #b9a88f; stroke-width: 1.2;
                         stroke-dasharray: 2.5 2.5; pointer-events: none; }
.ts-kagit .s-reed        { fill: #8b9aa8; }
.ts-kagit .s-reed.etkin  { fill: #b8341f; }
.ts-kagit .basili .s-sensor-hale { fill: rgba(255,214,90,.45); }
/* TOPRAKLI PRİZ — iş emri 2026-09-15 · 4. madde; anahtar ailesiyle aynı sıva
   üstü seri. ENERJİ canlı katmandır (AGENTS · 2): eskiden yuva yeşile
   boyanıyordu, şimdi yuvanın KENARI yeşil yanıyor — gerçek priz renk
   değiştirmez, ama öğrenci enerjinin prize geldiğini görmeli. */
/* 15 Eylül: BİÇİM MEHMET'in gönderdiği gömme priz resminden, RENK anahtar
   ailesinin şeftalisi ("prizi şeftali yap"). Pirinç toprak yayı ve metal
   orta vida resimdeki gibi kaldı. */
.ts-kagit .s-anahtar-cerceve.priz-kare { fill: url(#ts-prizCerceve) #efcbbb; stroke: #b08270;
                                         stroke-width: 1.2; }
.ts-kagit .s-priz-plaka { fill: url(#ts-prizPlaka) #dcb3a1; stroke: #b28a78; stroke-width: .8;
                          pointer-events: none; }
.ts-kagit .s-priz-yaka { fill: url(#ts-prizYaka) #e9bfad; stroke: #8f6a5a; stroke-width: 1;
                         pointer-events: none; }
.ts-kagit .s-priz { fill: url(#ts-prizYuva) #cc9f8b; stroke: #6f4f41; stroke-width: 1; }
.ts-kagit .s-priz.enerjili { stroke: #2f9e4f; stroke-width: 2.4; }
.ts-kagit .s-priz-delik { fill: #2a1d18; stroke: #8a6a5c; stroke-width: .7; pointer-events: none; }
.ts-kagit .s-priz-toprak { fill: url(#ts-pirinc) #d4ad44; stroke: #6f5213; stroke-width: .7;
                           pointer-events: none; }
.ts-kagit .s-priz-vida { fill: url(#ts-kovanMetal) #c3c8cd; stroke: #5d636a; stroke-width: .6;
                         pointer-events: none; }
.ts-kagit .s-priz-vida-yarik { stroke: #4b5157; stroke-width: .7; fill: none; pointer-events: none; }

/* 6. MADDE — MEHMET'in gönderdiği ürün resimlerinden (16 Eylül). `gercek`
   işaretli kurallar eski kâğıt tonu kurallarını (`--kagit-ink`, "yeni
   tasarım rengi eklenmiyor") sıradan bağımsız ezer: o kısıt MEHMET'in
   gerçek görünüm isteğinden önceydi. Eski kurallar silinmedi. */
/* SAYAÇ — gri yarı saydam gövde, LCD, mavi/kırmızı düğme, optik göz,
   şeffaf klemens kapağı, kırmızı mühür */
.ts-kagit .s-sayac.gercek { fill: url(#ts-sayacKasa) #a9aeb3; fill-opacity: .94;
                            stroke: #5d6368; stroke-width: 1.4; }
.ts-kagit .s-sayac-plaka { fill: url(#ts-sayacPlaka) #dfe2e4; stroke: #9aa0a5;
                           stroke-width: .8; pointer-events: none; }
.ts-kagit .s-sayac-ekran.gercek { fill: url(#ts-sayacLcd) #b9c1a8; stroke: #3f453c;
                                  stroke-width: 1.1; }
.ts-kagit .s-sayac-yazi.gercek { font-size: 9px; fill: #1f2a1c; }
.ts-kagit .s-sayac-mavi { fill: #2f6fd0; stroke: #1b3f7a; stroke-width: .8; pointer-events: none; }
.ts-kagit .s-sayac-kirmizi { fill: #c8352b; stroke: #7a1c15; stroke-width: .7; pointer-events: none; }
.ts-kagit .s-sayac-optik { fill: #a4aaaf; stroke: #62686d; stroke-width: 1.4;
                           stroke-dasharray: 1.2 1; pointer-events: none; }
.ts-kagit .s-faz-isik.gercek { fill: #3a3f44; stroke: #1f2327; stroke-width: .5; opacity: 1; }
.ts-kagit .s-sayac-kapak.gercek { fill: #eef2f5; fill-opacity: .45; stroke: #7c8388;
                                  stroke-width: 1; opacity: 1; }
.ts-kagit .s-sayac-klemens { fill: #2d3034; stroke: #16181a; stroke-width: .6; pointer-events: none; }
.ts-kagit .s-sayac-vida { fill: #b7bcc1; stroke: #5d6368; stroke-width: .5; pointer-events: none; }
.ts-kagit .s-muhur.gercek { fill: #b8412f; stroke: #6d2016; stroke-width: .5; opacity: 1; }
/* KAPI ZİLİ — beyaz kutu, sağ yüz gölgede, çapraz ses yarıkları */
.ts-kagit .s-zil-govde.gercek { fill: url(#ts-zilGovde) #f4f5f6; stroke: #a9aeb3; stroke-width: 1.1; }
.ts-kagit .s-zil-yan { fill: #cfd3d7; opacity: .75; pointer-events: none; }
.ts-kagit .s-zil-dilim.gercek { stroke: #cfd3d7; stroke-width: 2; }
.ts-kagit .s-zil-dilim-koyu.gercek { stroke: #2b2f33; stroke-width: 2; }
.ts-kagit .s-zil-isimlik.gercek { fill: #ffffff; stroke: #b3b8bd; stroke-width: .7; }
/* ZİL BUTONU / BUTON PANELİ — gri gövde, koyu başlıklar, klipsli isimlik.
   Basılınca buton sarı (canlı katman) — `.basili`/`.acik` kuralları 0,4,0
   özgüllükte, `.s-buton.panel` gri kuralını ezsin diye. */
.ts-kagit .s-anahtar-cerceve.zilpanel { fill: url(#ts-panelOrta) #d3d6d8; stroke: #85898d;
                                        stroke-width: 1.2; }
.ts-kagit .s-panel-bas { fill: url(#ts-panelBas) #a4a8ac; stroke: #7d8185; stroke-width: .8;
                         pointer-events: none; }
.ts-kagit .s-panel-klips { fill: #cfd2d5; stroke: #7a7e82; stroke-width: .7; pointer-events: none; }
.ts-kagit .s-panel-isimlik { fill: url(#ts-isimlik) #f4f6f8; stroke: #8a8f94; stroke-width: 1.3;
                             pointer-events: none; }
.ts-kagit .s-panel-isimlik-klips { fill: #3d4145; pointer-events: none; }
.ts-kagit .s-buton.panel { fill: #c3c7cb; stroke: #6f7479; stroke-width: 1; }
.ts-kagit .basili .s-buton.panel,
.ts-kagit .s-buton.panel.acik { fill: #ffd76b; stroke: #c9971a; }

/* TERMİK = KOMPAKT ŞALTER (MCCB) — MEHMET'in 16 Eylül fotoğrafları: tek koyu
   gövde, gri klemens kapakları, büyük artı vidalar, siyah yuvada TEK mavi kol
   (ON üstte, OFF altta), beyaz etiket plakası, test düğmesi. */
.ts-kagit .s-mccb-govde { fill: url(#ts-mccbGovde) #eef0f1; stroke: #8a9198; stroke-width: 1.2; }
.ts-kagit .s-mccb-ayar-serit { fill: #c7ccd1; stroke: #8a9198; stroke-width: .7; pointer-events: none; }
.ts-kagit .s-mccb-ayar { fill: #eceef0; stroke: #5d646b; stroke-width: .8; pointer-events: none; }
.ts-kagit .s-mccb-ayar-ok { stroke: #3a4046; stroke-width: 1.1; fill: none; stroke-linecap: round;
                            pointer-events: none; }
.ts-kagit .s-mccb-kapak { fill: url(#ts-mccbKapak) #9aa0a6; stroke: #6c7278; stroke-width: 1; }
.ts-kagit .s-mccb-vida { fill: url(#tm-celik) #c3c8cd; stroke: #565d64; stroke-width: .7;
                         pointer-events: none; }
.ts-kagit .s-mccb-yarik { stroke: #2f353a; stroke-width: 1.3; fill: none; pointer-events: none; }
.ts-kagit .s-mccb-etiket { fill: #f4f6f8; stroke: #9aa0a6; stroke-width: .7; pointer-events: none; }
.ts-kagit .s-mccb-etiket-cizgi { stroke: #b7bdc3; stroke-width: .9; fill: none; pointer-events: none; }
.ts-kagit .s-mccb-yuva { fill: #16191c; stroke: #0c0e10; stroke-width: 1; pointer-events: none; }
.ts-kagit .s-mccb-kol { fill: url(#ts-mccbKol) #3f72d6; stroke: #21458f; stroke-width: .9;
                        transition: y .16s; }
.ts-kagit .s-mccb-yazi { font-size: 7px; font-weight: 700; fill: #ffffff; text-anchor: middle;
                         pointer-events: none; }
.ts-kagit .s-mccb-yazi.koyu { fill: #eceef0; }
.ts-kagit .s-mccb-test { fill: #d23b2c; stroke: #7d1e14; stroke-width: .8; pointer-events: none; }
/* AKIM TRAFOSU (bara tipi) — siyah gövde, içinden geçen bakır bara, cıvata
   delikleri, beyaz etiket, şeffaf kapaklı S1/S2 klemensleri */
.ts-kagit .s-trafo.akim-gercek { fill: url(#ts-atGovde) #31363b; stroke: #121417; stroke-width: 1.4; }
.ts-kagit .s-akimtrafo-bara { fill: url(#ts-bakir) #c07f3c; stroke: #7a4414; stroke-width: .8;
                              pointer-events: none; }
.ts-kagit .s-akimtrafo-ic.gercek { fill: #2a2e33; stroke: #8f5622; stroke-width: 1; }
.ts-kagit .s-at-etiket { fill: #f4f6f8; stroke: #9aa0a6; stroke-width: .7; pointer-events: none; }
.ts-kagit .s-at-etiket-cizgi { stroke: #b7bdc3; stroke-width: .9; fill: none; pointer-events: none; }
.ts-kagit .s-ray-klemens.gercek { fill: #dfe4e8; fill-opacity: .8; stroke: #6b7177;
                                  stroke-width: .8; opacity: 1; }
.ts-kagit .s-akimtrafo-vida { fill: url(#tm-celik) #b7bcc1; stroke: #3f454b; stroke-width: .6;
                              pointer-events: none; }
.ts-kagit .s-din { fill: #2b3846; stroke: #47586a; stroke-width: 1.4; }
.ts-kagit .s-led { fill: #b7c3cf; }
.ts-kagit .s-led.on { fill: #ffc93c; }
.ts-kagit .s-ince { stroke: #7a8b9b; stroke-width: 1.2; fill: none; }

/* --- malzeme kutusu --- */
.ts-kagit .s-kutu-kutu { fill: #2b3846; stroke: #47586a; stroke-width: 1.2; }
.ts-kagit .s-kutu-oge { cursor: pointer; }
.ts-kagit .s-kutu-oge .s-lbl { fill: #eef3f8;
  stroke: rgba(12,18,24,.85); stroke-width: 2.6px; }
.ts-kagit .s-kutu-oge .s-lbl-xs { fill: #a9bccd;
  stroke: rgba(12,18,24,.85); stroke-width: 2.4px; }
.ts-kagit .s-kutu-oge:hover .s-kutu-kutu { stroke: var(--vurgu); }
.ts-kagit .s-kutu-oge.secili .s-kutu-kutu { stroke: var(--vurgu); stroke-width: 2.4;
  fill: #4a3a12; }
/* kutunun kendisi bırakma hedefi: elde malzeme varken belirginleşir */
.ts-kagit .s-panokanal { fill: #dde5ed; stroke: #c3d0dd; stroke-width: 1.2; }
.ts-kagit .s-kutu-hedef { fill: transparent; stroke: none; pointer-events: all; }
.mod-tasi .ts-kagit .s-kutu-hedef, .mod-calistir .ts-kagit .s-kutu-hedef { cursor: pointer; }
.ts-kagit .s-kutu-hedef.hedef { fill: rgba(240,169,43,.10);
  stroke: var(--vurgu); stroke-width: 1.6; stroke-dasharray: 6 5; }

/* --- teller --- */
/* KILAVUZ ÇİZGİSİ — uç numarasını ucuna bağlar (`denetim/153 · 2`).
   Numara ayırma geçişleri yüzünden ucundan 12 birimden fazla
   uzaklaştıysa çizilir; gerçek pano çiziminde etiketler böyle bağlanır.

   İLETKEN SANILMAYACAK (`153 · 2 · 6`) — üç ayrı güvence:
     kalinlik  1   (telin yarisi 2; ondan da ince)
     renk      #6d7f92 — TEL PALETINDE YOK. Palet: #8a5a2b · #2f6fd0 ·
               #2e9e4f · #1c1c1c · #8e8e8e · #c0392b · #e07b1f ·
               #7b4fb5 · #2aa84a · #e3b505 · #d8dee6 · #e0559b
     desen     kesikli — hicbir iletken kesikli cizilmiyor
   Üçü birden olmasa "ince gri tel" sanılabilirdi. */
.ts-kagit .s-uc-kilavuz {
  stroke: #6d7f92; stroke-width: 1; stroke-dasharray: 3 2;
  fill: none; pointer-events: none; opacity: .9;
}

/* ---- DÖNÜŞÜN KÖŞESİ BOYANSIN — MEHMET, 8 Eylül --------------------------
   *"kablo dönüşlerindeki kusurlar hâlâ devam ediyor."*

   Tel ÜÇ ayrı yol olarak çizilir: gövde (`kat-tel`) ve iki kuyruk
   (`kat-teluc`). `donus.js` ölçtü: 352 birleşimin **61'inde** gövde ile
   kuyruk 90° DÖNEREK birleşiyor. İki uç da `butt` olduğu için dönüşün dış
   köşesinde (yarım kalınlık)² kadar bir kare HİÇ BOYANMIYOR — MEHMET'in
   gösterdiği çentik bu.

   UÇ `square` OLDU. Neden `round` DEĞİL: `round` köşeyi doldurur ama
   köşenin ÖTESİNE yarım kalınlık yuvarlak bir kulak taşırır — resmini
   aldım, kulak göründü, `_settest`in "kuş gözü yok" ölçütünün tarif
   ettiği şeyin ta kendisi. `square` ise gövdeyi w/2 ileri, kuyruğu w/2
   geri taşır ve ikisinin birleşimi TAM OLARAK `miter` köşenin kapladığı
   kareyi verir: köşe dolu, taşan kulak yok, dönüş keskin kalır.
   Uzattığı iki yer de zararsız:
     · gövdenin iki ucu da zaten birleşim — uzama tam istenen yere gider;
     · kuyruğun serbest ucunda pabuç var (r 4,2 > yarım kalınlık 2).
   YALNIZ UÇ DEĞİŞTİ. KÖŞE (`linejoin`) `miter` KALDI: `_settest`in
   *"kablo dönüşleri keskin (kuş gözü yok)"* ölçütü yürürlükte ve dönüşün
   keskinliği bu programın kendi kararı. Yuvarlak köşeyi denedim, ölçüt
   kırmızı yandı, ÖLÇÜTÜ DEĞİL DEĞİŞİKLİĞİ geri aldım (`denetim/93`).
   Boyanmayan köşe zaten bir UÇ sorunuydu — tek yolun içindeki köşeler
   `miter` ile hep doluydu. */
/* UÇTAKİ ÜST KOPYANIN ÖZÜ AYRI SINIFTA — `s-tel-ozk`.
   MEHMET, 8 Eylül: kablo tek parça, malzemelerin ALTINDAN geçiyor;
   yalnız klemens çevresinde aynı yolun kırpılmış kopyası ÜSTE çiziliyor
   ki hangi iletkenin hangi vidada olduğu görünsün (7 Eylül kuralı).

   O kopya bir İLETKEN DEĞİL, aynı iletkenin ikinci çizimidir. Ölçülerin
   hepsi `path.s-tel-oz` seçiyor; kopya da o sınıfı taşısaydı her kablo
   üç kez sayılırdı ve binme · çakışma · geçiş sayıları şişerdi
   (ölçüldü: geçiş 15 → 45). Bu yüzden kopyanın özü `s-tel-ozk`:
   GÖRÜNÜMÜ birebir aynı, ADI farklı. Böylece tek bir ölçü dosyasına
   bile dokunmadan sayımlar doğru kalır — ölçüyü değiştirip değişikliği
   geçirmek yerine, çizim kendi hakkında doğruyu söylüyor. */
.ts-kagit .s-tel-ozk { fill: none; stroke-width: 4; stroke-linecap: square;
  stroke-linejoin: miter; stroke-miterlimit: 6; stroke: var(--t-SORTI);
  pointer-events: none; }
.ts-kagit .s-tel-oz { fill: none; stroke-width: 4; stroke-linecap: square;
  stroke-linejoin: miter; stroke-miterlimit: 6; stroke: var(--t-SORTI); }
.ts-kagit .s-tel-hale { fill: none; stroke-width: 11; stroke: transparent;
  stroke-linecap: square; stroke-linejoin: miter; stroke-miterlimit: 6; }
.ts-kagit .s-tel-vurus { fill: none; stroke: transparent; stroke-width: 18;
  pointer-events: none; }
/* Kablola modunda kablonun tutma alanı geniş olsun: 4 px'lik çizgiyi tam
   tutturmak gerekmesin, kablo kolayca sürüklenebilsin. */
.mod-kablola .ts-kagit .s-tel-vurus { pointer-events: stroke; cursor: grab; }
.mod-kablola .ts-kagit .s-tel:active .s-tel-vurus { cursor: grabbing; }
.ts-kagit .s-tel-hale.canli { stroke: rgba(240,169,43,.4); }
.ts-kagit .kat-teluc .s-tel-oz { stroke-width: 4; }

/* ---- KABLO ÜÇ BOYUTLU GÖRÜNSÜN — MEHMET, 7 Eylül -------------------------
   *"kabloların tıpkı PanoSim'deki gibi gerçek kablo gibi görünmesini
   istiyorum."*

   PanoSim'in tarifi OKUNDU, oraya TEK KARAKTER YAZILMADI. Orada gerçek
   kabloya bakınca görülen üç şey aynı yolun üstüne ayrı kalınlıkta çizilir:
   plakaya düşen gölge · ışığın değmediği koyu kenar · üstündeki parlama.
   Işık sol üstten gelir, parlama o yöne kaydırılır.

   8 EYLÜL — MEHMET: *"kablo dönüşlerindeki kusurlar hâlâ devam ediyor."*
   PanoSim'i YENİDEN OKUDUM ve yukarıdaki ilk sürümün PanoSim'i YANLIŞ
   aktardığını gördüm. PanoSim'in gerçek tarifi (`css` 503-506):

        .pw         w 4   yuvarlak uç + yuvarlak köşe
        .pw-shadow  w 5   rgba(0,0,0,.14)   KAYDIRMA YOK

   Yani gölge özden **yalnız 0,5 birim** taşar ve **kaydırılmaz** — çepeçevre
   bir hâledir, düşen bir gölge değil. İlk sürümüm gölgeyi 5,3 yapıp
   (1,05 · 1,62) kaydırmıştı: `donus.js` ile ölçüldü, gölge özün dış
   kenarını **2,58 birim** aşıyordu — oysa özün yarıçapı 2. Dönüşün dış
   köşesinde bu, telin yanında ayrı duran sert kenarlı gri bir L olarak
   görünür; MEHMET'in gösterdiği kusurlardan biri budur.

   ARTIK: kaydırma yok; ışık yönü yalnız ÖZÜN İÇİNDEKİ parlamada kalır.
        golge  oz + 1,4   (taşma 0,70)   alfa .13
        kenar  oz + 0,7   (taşma 0,35)   alfa .30 — gölgenin İÇİNDE
        isik / parlama    özün İÇİNDE (taşma negatif), kaydırma korunur */
.ts-kagit .s-tel-golge, .ts-kagit .s-tel-kenar,
.ts-kagit .s-tel-isik,  .ts-kagit .s-tel-parlama {
  fill: none; stroke-linecap: square; stroke-linejoin: miter;
  stroke-miterlimit: 6; pointer-events: none;
}
.ts-kagit .s-tel-golge   { stroke: rgba(0,0,0,.13); stroke-width: 5.4; }
.ts-kagit .s-tel-kenar   { stroke: rgba(0,0,0,.30); stroke-width: 4.7; }
.ts-kagit .s-tel-isik    { stroke: rgba(255,255,255,.15); stroke-width: 2.1;
                           transform: translate(-0.33px, -0.48px); }
.ts-kagit .s-tel-parlama { stroke: rgba(255,255,255,.55); stroke-width: .8;
                           transform: translate(-0.81px, -1px); }
/* Kuyruklar daha ince çizilir (öz 3,4); katmanları da aynı oranda iner. */
.ts-kagit .kat-teluc .s-tel-golge   { stroke-width: 5.4; }
.ts-kagit .kat-teluc .s-tel-kenar   { stroke-width: 4.7; }
.ts-kagit .kat-teluc .s-tel-isik    { stroke-width: 2.1; }
.ts-kagit .kat-teluc .s-tel-parlama { stroke-width: .8; }
/* Vurgulanan kabloda kabartma güçlenir — üstüne gelince daha da yuvarlak. */
.ts-kagit .tel-vurgulu .s-tel-parlama { stroke: rgba(255,255,255,.72); }
.ts-kagit .s-tel-pabuc { stroke: rgba(255,255,255,.9); stroke-width: 1.3; }
.ts-kagit .s-tel.tel-L .s-tel-pabuc { fill: var(--t-L); }
.ts-kagit .s-tel.tel-N .s-tel-pabuc { fill: var(--t-N); }
.ts-kagit .s-tel.tel-PE .s-tel-pabuc { fill: var(--t-PE); }
.ts-kagit .s-tel.tel-SORTI .s-tel-pabuc { fill: var(--t-SORTI); }
.ts-kagit .s-tel.tel-GRI .s-tel-pabuc { fill: var(--t-GRI); }
.ts-kagit .s-tel.tel-KIRMIZI .s-tel-pabuc { fill: var(--t-KIRMIZI); }
.ts-kagit .s-tel.tel-TURUNCU .s-tel-pabuc { fill: var(--t-TURUNCU); }
.ts-kagit .s-tel.tel-MOR .s-tel-pabuc { fill: var(--t-MOR); }
.ts-kagit .s-tel.tel-YESIL .s-tel-pabuc { fill: var(--t-YESIL); }
.ts-kagit .s-tel.tel-SARI .s-tel-pabuc { fill: var(--t-SARI); }
.ts-kagit .s-tel.tel-BEYAZ .s-tel-pabuc { fill: var(--t-BEYAZ); }
/* PEMBE ilk kez kapiOtoZil'de sette kullanıldı (kapı otomatiği teli);
   pabucu kuralsız kalıp siyah çiziliyordu (`_tustest 5`). */
.ts-kagit .s-tel.tel-PEMBE .s-tel-pabuc { fill: var(--t-PEMBE); }
/* KABLOLA KİPİNDE MALZEME GÖVDESİ TIKLAMAYI KAPMAZ — MEHMET, 7 Eylül.
   Kablolar malzemelerin ALTINDAN geçiyor (buat hariç, `rapor/134 § 2`).
   O zaman malzemenin gövdesi kablonun tıklamasını kapıyor ve
   tıklanabilirlik 20/20 → 11/20 düşüyordu (kapatanlar ölçüldü:
   `s-anahtar-cerceve` · `s-tus` · `s-klemens-blok` · `s-tutamak`).
   KABLOLA kipinde öğrenci gövdeye değil UÇLARA ve KABLOLARA tıklar;
   gövde o kipte hedef olmaktan çıkıyor. Uçlar `kat-uc`ta ve her
   zaman en üstte, kablolar altta ama artık önlerinde engel yok.
   Öteki kiplerde (çalıştır · taşı) gövde eskisi gibi hedeftir. */
.mod-kablola .ts-kagit .kat-eleman .s-anahtar-cerceve,
.mod-kablola .ts-kagit .kat-eleman .s-tus,
.mod-kablola .ts-kagit .kat-eleman .s-klemens-blok,
.mod-kablola .ts-kagit .kat-eleman .s-klemens,
.mod-kablola .ts-kagit .kat-eleman .s-tutamak,
/* DOLU kasanin ic yuzeyi de: uzerinde malzeme varken kablola kipinde
   tiklanacak sey kasa degil, ucu ya da kablodur. BOS kasa haric —
   oraya malzeme yerlestirmek icin tiklanir. */
.mod-kablola .ts-kagit .kat-eleman [data-kasa-dev] .s-kasa-ic,
.mod-kablola .ts-kagit .kat-eleman [data-kasa-dev] .s-kasa-govde { pointer-events: none; }
.ts-kagit .kat-teluc { pointer-events: none; }
.mod-kablola .ts-kagit .kat-teluc { pointer-events: auto; }
.ts-kagit .s-tel.tel-L .s-tel-oz  { stroke: var(--t-L); }
.ts-kagit .s-tel.tel-N .s-tel-oz  { stroke: var(--t-N); }
.ts-kagit .s-tel.tel-PE .s-tel-oz { stroke: var(--t-PE); }
.ts-kagit .s-tel.tel-SORTI .s-tel-oz { stroke: var(--t-SORTI); }
.ts-kagit .s-tel.tel-GRI .s-tel-oz { stroke: var(--t-GRI); }
.ts-kagit .s-tel.tel-KIRMIZI .s-tel-oz { stroke: var(--t-KIRMIZI); }
.ts-kagit .s-tel.tel-TURUNCU .s-tel-oz { stroke: var(--t-TURUNCU); }
.ts-kagit .s-tel.tel-MOR .s-tel-oz { stroke: var(--t-MOR); }
.ts-kagit .s-tel.tel-YESIL .s-tel-oz { stroke: var(--t-YESIL); }
.ts-kagit .s-tel.tel-SARI .s-tel-oz { stroke: var(--t-SARI); }
.ts-kagit .s-tel.tel-BEYAZ .s-tel-oz { stroke: var(--t-BEYAZ); }
.ts-kagit .s-tel.tel-PEMBE .s-tel-oz { stroke: var(--t-PEMBE); }
/* UÇTAKİ ÜST KOPYANIN RENKLERİ — KAYNAKTAN üretildi.
   İLK YAZIMDA ÜÇ RENK ATLANMIŞTI (L · N · PE): kaynak satırlarında
   `.s-tel-oz` ile `{` arasında İKİ boşluk var, benim kalıbım bir boşluk
   arıyordu. Renk kuralı eşleşmeyince `stroke` geçersiz kalıyor, çekirdek
   çizilmiyor ve altındaki koyu kenar görünüyor:
   MEHMET, 8 Eylül: *"mavi kablodaki gibi maviden siyaha dönme olayları
   var."* Mavi = nötr (`tel-N`) idi. */
.ts-kagit .s-tel.tel-L .s-tel-ozk { stroke: var(--t-L); }
.ts-kagit .s-tel.tel-N .s-tel-ozk { stroke: var(--t-N); }
.ts-kagit .s-tel.tel-PE .s-tel-ozk { stroke: var(--t-PE); }
.ts-kagit .s-tel.tel-SORTI .s-tel-ozk { stroke: var(--t-SORTI); }
.ts-kagit .s-tel.tel-GRI .s-tel-ozk { stroke: var(--t-GRI); }
.ts-kagit .s-tel.tel-KIRMIZI .s-tel-ozk { stroke: var(--t-KIRMIZI); }
.ts-kagit .s-tel.tel-TURUNCU .s-tel-ozk { stroke: var(--t-TURUNCU); }
.ts-kagit .s-tel.tel-MOR .s-tel-ozk { stroke: var(--t-MOR); }
.ts-kagit .s-tel.tel-YESIL .s-tel-ozk { stroke: var(--t-YESIL); }
.ts-kagit .s-tel.tel-SARI .s-tel-ozk { stroke: var(--t-SARI); }
.ts-kagit .s-tel.tel-BEYAZ .s-tel-ozk { stroke: var(--t-BEYAZ); }
.ts-kagit .s-tel.tel-PEMBE .s-tel-ozk { stroke: var(--t-PEMBE); }
.mod-kablola .ts-kagit .s-tel:hover .s-tel-oz { stroke-width: 6; }
.mod-kablola .ts-kagit .s-tel:hover .s-tel-ozk { stroke-width: 6; }


/* Zil buton grubu — giriş paneli (eğitim seti) */
.ts-kagit .s-grup-satir { fill: #f4f7fa; stroke: #b9c6d2; stroke-width: 1; }
.ts-kagit .s-grup-vurus { fill: transparent; stroke: none; }
.mod-calistir .ts-kagit .s-grup-vurus { cursor: pointer; }
.mod-calistir .ts-kagit .s-grup-vurus:hover { fill: rgba(240,169,43,.16); }


/* Açık şema — zil buton grubu kutusu (MEB Görsel 2.45) */
.ts-kagit .am-grup-kutu { fill: none; stroke: #4a5a6a; stroke-width: 1.4; }
.ts-kagit .am-grup-lbl { font-size: 12px; font-weight: 600; fill: #2c4a63; }
.ts-kagit .tel-ek { fill: #23303c; stroke: none; }
.ts-kagit .tel-ek.tel-N { fill: var(--t-N); }
.ts-kagit .tel-ek.tel-L { fill: var(--t-L); }
.ts-kagit .tel-ek.tel-PE { fill: var(--t-PE); }
.ts-kagit .tel-ek.tel-SORTI { fill: var(--t-SORTI); }
.ts-kagit .tel-ek.tel-GRI { fill: var(--t-GRI); }
.ts-kagit .tel-ek.tel-KIRMIZI { fill: var(--t-KIRMIZI); }
.ts-kagit .tel-ek.tel-TURUNCU { fill: var(--t-TURUNCU); }
.ts-kagit .tel-ek.tel-MOR { fill: var(--t-MOR); }
.ts-kagit .tel-ek.tel-YESIL { fill: var(--t-YESIL); }
.ts-kagit .tel-ek.tel-SARI { fill: var(--t-SARI); }
.ts-kagit .tel-ek.tel-BEYAZ { fill: var(--t-BEYAZ); }
/* cihaz içi fabrika köprüsü — kablo değildir, daha ince çizilir */
.ts-kagit .tel-ic .tel-oz { stroke-width: 1.9; stroke-dasharray: 6 3; }
/* Zil butonu — modüldeki daire içinde kontak */
.ts-kagit .buton-daire { fill: none; stroke: #23303c; stroke-width: 1.8; }
/* Açık şemanın arkasındaki borular — kapalı şemadaki boru düzeninin aynısı */
.ts-kagit .am-borular { pointer-events: none; }
.ts-kagit .am-boru { stroke: #e6ecf2; fill: none; stroke-linecap: butt; }

/* =============================================================================
   TIKLAMA KATMANLARI
   ---------------------------------------------------------------------------
   Uç vuruş daireleri ve etiketler cihazların ÜSTÜNDEKİ katmanlarda duruyor.
   SVG'de saydam dolgu da tıklama yakalar; bu yüzden çalıştır/taşı modunda
   bu katmanlar tıklamayı geçirir, yalnız kablola modunda uçlar tıklanır.
   ============================================================================= */
.ts-kagit .kat-etiket, .ts-kagit .kat-not, .ts-kagit .kat-kusak,
.ts-kagit .kat-boru { pointer-events: none; }
.ts-kagit .kat-uc { pointer-events: none; }
.mod-kablola .ts-kagit .kat-uc { pointer-events: auto; }
.ts-kagit text { pointer-events: none; }
.ts-kagit .kat-tel { pointer-events: none; }
.mod-kablola .ts-kagit .kat-tel { pointer-events: auto; }
/* cihaz gövdeleri her modda tıklanır kalsın */
.ts-kagit .s-kasa-hit, .ts-kagit .m-hit, .ts-kagit .s-kutu-oge,
.ts-kagit .tiklanir { pointer-events: all; }
/* şemada sembolün görünmez tutma yüzeyi — içi boş sembolün ortasına da
   tıklanabilsin diye konur (zil buton grubunun her bloğu ayrı ayrı) */
.ts-kagit .eleman-vurus { fill: transparent; stroke: none; pointer-events: all; }

.tf-cizimsecim { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin: 0 0 10px; background: var(--bg-2);
  border: 1px solid var(--cizgi); border-radius: 8px; }
.tf-cizimsecim .k { font-size: 11px; color: var(--ink-silik); }

.mod-tasi .ts-kagit .kat-tel { pointer-events: auto; }
.mod-calistir .ts-kagit .kat-tel { pointer-events: auto; }

/* ARIZA KİPİ (`denetim/58 · 1`, MEHMET'in kararı).
   Teller ve uçlar TIKLANIR — usta boşta kalan ucu arar, kopuk dönüşü
   uçtan bulur — ama hiçbir şey DEĞİŞTİRİLEMEZ: kablo sürüklenmez,
   malzeme taşınmaz. `calistir` kipi tek başına yetmiyordu: orada uç
   katmanı ölü (ölçüldü — `mod-calistir` ile 8/39 hedef, uç katmanı da
   açılınca 29/39). Sürükleme kancaları bu kipte bağlanmaz. */
.mod-ariza .ts-kagit .kat-tel { pointer-events: auto; }
.mod-ariza .ts-kagit .kat-uc { pointer-events: auto; }
.mod-ariza .ts-kagit .tel-vurus,
.mod-ariza .ts-kagit .m-tel-vurus,
.mod-ariza .ts-kagit .s-tel-vurus { pointer-events: stroke; }
.mod-ariza .ts-kagit .tel, .mod-ariza .ts-kagit .m-tel,
.mod-ariza .ts-kagit .s-tel { cursor: pointer; }
.mod-ariza .ts-kagit .uc, .mod-ariza .ts-kagit .m-uc { cursor: pointer; }
.mod-ariza .ts-kagit .s-tutamak, .mod-ariza .ts-kagit .s-kasa-hit {
  cursor: default; }
.mod-tasi .ts-kagit .s-tel { cursor: grab; }
.mod-tasi .ts-kagit .s-tel:active { cursor: grabbing; }
.ts-kagit .s-tel.sekilli .s-tel-oz { stroke-dasharray: none; }
.mod-tasi .ts-kagit .s-tel:hover .s-tel-oz { stroke-width: 6; }

/* =============================================================================
   KABLO RENGİ SEÇİM MENÜSÜ  (kabloya tıklayınca açılır)
   ============================================================================= */
.tesisatsim { position: relative; }
.ts-cmenu {
  position: absolute; z-index: 60; width: 238px;
  background: var(--bg-2); border: 1px solid var(--cizgi);
  border-radius: 9px; padding: 5px; box-shadow: 0 10px 28px rgba(0,0,0,.55);
}
.ts-cmenu-h {
  font-size: 10.5px; color: var(--ink-silik); padding: 5px 8px 7px;
  border-bottom: 1px solid var(--cizgi); margin-bottom: 4px;
}
.ts-cmenu-g {
  font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink-silik); padding: 6px 8px 3px;
}
.ts-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;
}
.ts-cmenu-row:hover { background: var(--bg-3); }
.ts-cmenu-row.cur { background: var(--bg-3); font-weight: 600; }
.ts-cmenu-row.cur::after { content: '✓'; margin-left: auto; color: var(--vurgu); }
.ts-cmenu-row i {
  width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.25);
}
.ts-cmenu-row i.auto {
  background: linear-gradient(135deg,#8a5a2b 0 33%,#2f6fd0 33% 66%,#2e9e4f 66%);
}
.ts-cmenu-row.sil { margin-top: 4px; border-top: 1px solid var(--cizgi);
  padding-top: 9px; color: var(--kotu); }
.ts-cmenu-row i.sil { background: var(--kotu); border-color: transparent; }

/* Kablo vuruş şeridi: hangi modda hangi katmanın tıklanacağını belirler.
   pointer-events çocukta ayrı verildiği için katman kuralı yetmez. */
/* Çalıştır modunda da kablo izlenebilsin: boru içindeki GÖVDE tıklamaya
   duyarlıdır (malzemelerin üstünü kapatmaz), klemense giden kuyruklar değil.
   Gövdeye gelince kablonun bütün parçaları birlikte kalınlaşır. */
.mod-kablola .ts-kagit .kat-tel .s-tel-vurus,
.mod-kablola .ts-kagit .kat-teluc .s-tel-vurus,
.mod-tasi .ts-kagit .kat-tel .s-tel-vurus,
.mod-calistir .ts-kagit .kat-tel .s-tel-vurus { pointer-events: stroke; }

/* Kablo çekme önizlemesi ve vurgu */
.ts-kagit .kat-onizleme { pointer-events: none; }
.ts-kagit .s-onizleme { fill: none; stroke: var(--vurgu); stroke-width: 3.5;
  stroke-dasharray: 9 6; stroke-linejoin: miter; stroke-linecap: butt;
  opacity: .95; }
.ts-kagit .s-onizleme-nokta { fill: var(--vurgu); opacity: .75; }
.ts-kagit .kat-tel .s-tel.vurgu .s-tel-oz { stroke-width: 8; }
.ts-kagit .kat-teluc .s-tel.vurgu .s-tel-oz { stroke-width: 6.5; }
.mod-kablola .ts-kagit .s-tel.vurgu .s-tel-oz { stroke-width: 8; }
.mod-calistir .ts-kagit .s-tel.vurgu .s-tel-oz { stroke-width: 8; }
.mod-calistir .ts-kagit .kat-teluc .s-tel.vurgu .s-tel-oz { stroke-width: 6.5; }
.mod-calistir .ts-kagit .s-tel { cursor: help; }
.ts-kagit .s-tel.vurgu .s-tel-hale { stroke: rgba(240,169,43,.55); stroke-width: 15; }
.ts-kagit .s-tel.vurgu .s-tel-pabuc { r: 6; }

.ts-kagit .kutu-bos { fill: none; stroke: #23303c; stroke-width: 1.7; }

/* =============================================================================
   FÖYDE MODÜLÜN ORİJİNAL SAYFALARI (geçici karşılaştırma bölümü)
   ============================================================================= */
.tesisatsim .tf-modul-bas { margin: 0 0 4mm; }
.tesisatsim .tf-modul-bas h2 { margin: 0; }
.tesisatsim .tf-modul-not { margin: 1mm 0 0; font-size: 9pt; color: #5b6b7b; }
.tesisatsim .tf-modul-sayfa { margin: 0; width: 100%; }
/* Modül sayfası bir A4'ün tamamını kaplar. Yükseklik SABİT verilir: hem
   taşmayı engeller hem de resim yüklenmeden ölçüm doğru çıkar. */
.tesisatsim .tf-modul-sayfa { text-align: center; }
.tesisatsim .tf-modul-sayfa img {
  display: block; margin: 0 auto;
  height: 232mm; width: auto; max-width: 100%;
  object-fit: contain; background: #fff;
  border: 1px solid #c9d3dd;
}
.tesisatsim .tf-modul-sayfa.ilk img { height: 216mm; }
.tesisatsim .tf-modul-sayfa figcaption {
  margin-top: 1.5mm; font-size: 8.5pt; color: #5b6b7b; text-align: center;
}
.tesisatsim .tf-yok {
  margin: 2mm 0; padding: 3mm; font-size: 9.5pt; color: #7a5b12;
  background: #fdf6e3; border-left: 3px solid #e0b93a;
}

/* föy çıkarılırken oluşmuş parça kayıt */
.tesisatsim .tf-oge.parca { opacity: .5; }
.tesisatsim .tf-oge.parca::after { content: ' · parça kayıt'; color: #b3261e; font-size: 11px; }
.tesisatsim .tf-parca {
  margin: 2mm 0; padding: 3mm; font-size: 9.5pt; color: #8a2318;
  background: #fdeeec; border-left: 3px solid #d0453a;
}

/* MODÜL NOTU — kitabın kendi hatası. Uyarıdan (tf-parca) AYRI renk:
   o bizim verimizin kusuru, bu KİTABIN kusuru; ikisi karışmamalı. */
.tesisatsim .tf-modulnot {
  margin: 2mm 0; padding: 3mm; font-size: 9.5pt; color: #6b4a00;
  background: #fdf6e3; border-left: 3px solid #c8940a;
}

/* floresan armatürünün bileşik sembolü (MEB Görsel 2.69) */
.ts-kagit .flo-cerceve { fill: none; stroke: #c05a9a; stroke-width: 1.4;
  stroke-dasharray: 7 5; }
.ts-kagit .flo-balast { fill: #1c1c1c; stroke: #1c1c1c; }
/* elektronik balast gövdesi mekanikten ayırt edilsin (0.24.0) */
.ts-kagit .flo-balast.elektronik { fill: #2c3f57; stroke: #17202c; }
.ts-kagit .flo-yazi { font-size: 10px; fill: #16202a; }
.ts-kagit .flo-klemens { fill: #f2f4f7; stroke: #16202a; stroke-width: 1.2; }
.ts-kagit .flo-klemens-vida { fill: #fff; stroke: #16202a; stroke-width: 1.3; }

/* =============================================================================
   FLORESAN KESİTİ — çalışma ilkesi canlandırması
   Bu görünüm devre simülasyonu değildir; anlatım amaçlıdır.
   ============================================================================= */
.tesisatsim .fk-derin-btn { position: absolute; top: 12px; right: 16px; z-index: 3; }
.tesisatsim .ts-gorunum { position: relative; }

.ts-kagit .fk-cam { fill: #f7fbff; stroke: #9fb3c6; stroke-width: 2.4; }
.ts-kagit .fk-parlama { fill: #fff; opacity: 0; transition: opacity .12s; }
.ts-kagit .fk-parlama.yanik { fill: #fff6cf; opacity: .95; }
.ts-kagit .fk-fosfor { fill: #e6ecf2; stroke: none; transition: fill .12s; }
.ts-kagit .fk-fosfor.yanik { fill: #ffe89a; }

.ts-kagit .fk-flaman-tel { stroke: #7f8fa0; stroke-width: 2.2; fill: none; }
.ts-kagit .fk-uc { stroke: #46566a; stroke-width: 2.6; fill: none; }
.ts-kagit .fk-sarim { stroke: #8a97a5; stroke-width: 3; fill: none; transition: stroke .12s; }
.ts-kagit .fk-sarim.isinik { stroke: #d98b2b; }
.ts-kagit .fk-sarim.kor { stroke: #f05a28; stroke-width: 4; }

.ts-kagit .fk-argon { fill: #c9d8e6; stroke: #9fb3c6; stroke-width: 1; }
.ts-kagit .fk-civa { fill: #cfc4e8; stroke: #6b52a8; stroke-width: 1.4; }
.ts-kagit .fk-civa.uyarilmis { fill: #b79cf0; stroke: #4a2f9c; stroke-width: 2; }
.ts-kagit .fk-atom-ad { font-size: 8.5px; fill: #3d2d6b; font-weight: 700; }

.ts-kagit .fk-elektron-nokta { fill: #1e6fd9; stroke: #0d3f80; stroke-width: 1; }
.ts-kagit .fk-uv { stroke: #7b3fd4; stroke-width: 2; stroke-dasharray: 4 3; fill: none; }
.ts-kagit .fk-gorunur { stroke: #f0b429; stroke-width: 2.2; fill: none;
  stroke-linecap: round; opacity: .85; }

.ts-kagit .fk-kutu { fill: #fff; stroke: #46566a; stroke-width: 1.8; }
.ts-kagit .fk-kutu-ad { font-size: 11px; font-weight: 700; fill: #23303c;
  letter-spacing: .6px; }
.ts-kagit .fk-kutu-not { font-size: 9.5px; fill: #6b7f92; }
.ts-kagit .fk-starter-cam { fill: #f4f7fa; stroke: #7f8fa0; stroke-width: 1.6; }
.ts-kagit .fk-neon { fill: #eceff3; stroke: none; transition: fill .1s; }
.ts-kagit .fk-neon.yanik { fill: #ff7a3d; }
.ts-kagit .fk-kontak { stroke: #23303c; stroke-width: 2.6; fill: none;
  stroke-linecap: round; }

.ts-kagit .fk-ad { font-size: 11px; fill: #5b6d80; letter-spacing: .3px; }
.ts-kagit .fk-evre { font-size: 20px; font-weight: 800; fill: #16202a;
  letter-spacing: .4px; }
.ts-kagit .fk-not { font-size: 12.5px; fill: #46566a; }
.ts-kagit .fk-zincir { font-size: 12.5px; font-weight: 600; fill: #3d2d6b; }
.ts-kagit .fk-gos-ad { font-size: 11px; fill: #46566a; }
.ts-kagit .fk-uyari { font-size: 10.5px; fill: #8697a8; font-style: italic; }

/* Açık şema — modül düzeninde anahtar (MEB Görsel 2.51/1, 2.64):
   uçlar içi boş halka, kontak bıçağı kalın siyah çubuktur. */
.ts-kagit .uc-halka { fill: #fff; stroke: #16202a; stroke-width: 1.8; }
/* Modülde kontak bıçağı her durumda SİYAHtır; kapalıyken yeşile dönmez. */
.ts-kagit .bicak.ray { stroke-width: 5; stroke-linecap: round; }
.ts-kagit .bicak.ray.kapali { stroke: #16202a; }
/* Buton çubukları (Görsel 2.51/13) bıçaktan ince, uçları küt. */
.ts-kagit .bicak.buton.ray { stroke-width: 3.6; stroke-linecap: butt; }
/* Hareket sensörünün uç adları (Görsel 2.51/17: Rgiriş · Mp · Rçıkış) */
.ts-kagit .sensor-uc { font-size: 10px; fill: #16202a; }
.ts-kagit .sensor-alt { font-size: 7px; }
/* İmpuls rölesi kutusu ve uç hücreleri (Görsel 2.71 · 2.51/5) */
.ts-kagit .role-kutu { fill: none; stroke: #16202a; stroke-width: 1.6; }
.ts-kagit .role-uc { font-size: 9px; fill: #16202a; }
/* Komütatörün ortak çubuğu (Görsel 2.66): bıçaktan ince */
.ts-kagit .kom-cubuk { stroke: #16202a; stroke-width: 2.6; fill: none; }


/* armatür seçicisi beş seçenekli — alt alta sığsın (0.26.0) */
.ts-secim.dikeyler { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ts-onay { display: flex; align-items: center; gap: 7px; font-size: 12px;
           color: #cfd8e3; padding: 6px 2px; cursor: pointer; }
.ts-ipucu.kucuk { font-size: 11px; padding: 6px 8px; margin-top: 2px; }


/* --- YENİ KUMANDA SEMBOLLERİ (0.27.0) --- */
.ts-kagit .renk-nokta { fill: #fff; stroke: #17202c; stroke-width: 1.4; }
.ts-kagit .renk-nokta.secili { stroke-width: 2.2; }
.ts-kagit .renk-nokta.r-kirmizi.secili { fill: #d93025; }
.ts-kagit .renk-nokta.r-yesil.secili   { fill: #1e8e3e; }
.ts-kagit .renk-nokta.r-mavi.secili    { fill: #1a73e8; }
.ts-kagit .ses-hoparlor { fill: #17202c; stroke: #17202c; stroke-width: 1.4;
                          stroke-linejoin: round; }
.ts-kagit .dokun-nokta { fill: #17202c; }
.ts-kagit .ince.soluk { opacity: .45; }

/* --- KABLOSUZ DİMMER MODÜLÜ (0.28.0) --- */
.ts-kagit .kablosuz-anten { stroke: #17202c; stroke-width: 1.8; fill: none;
                            stroke-linecap: round; }
.ts-kagit .kablosuz-goz { fill: #17202c; stroke: #17202c; stroke-width: 1.2; }
.ts-kagit .kablosuz-govde { fill: #fff; }
.ts-kagit .kablosuz-ayirac { stroke: #9aa9b8; stroke-width: 1.2;
                             stroke-dasharray: 3 3; fill: none; }
.ts-kagit .kablosuz-yazi { font-size: 8px; fill: #6b7c8d; letter-spacing: .5px;
                           text-anchor: middle; }


/* --- KARŞILAŞTIRMA TABLOSU (0.29.0) — föylerin Tablo 3.10/3.12/3.14'ü --- */
.tesisatsim .ts-tablo { margin: 6px 0 8px; overflow-x: auto; }
.tesisatsim .ts-tablo table { width: 100%; border-collapse: collapse;
                              font-size: 11px; }
.tesisatsim .ts-tablo th { text-align: right; font-weight: 600; padding: 3px 4px;
                           color: #8fa3b8; border-bottom: 1px solid #2c3a4b;
                           font-size: 10px; line-height: 1.15; }
.tesisatsim .ts-tablo th:first-child,
.tesisatsim .ts-tablo td:first-child { text-align: left; }
.tesisatsim .ts-tablo td { text-align: right; padding: 3px 4px;
                           border-bottom: 1px solid #1e2836; color: #cdd9e6; }
.tesisatsim .ts-tablo tr.on td { background: #1d2b3d; color: #ffd479;
                                 font-weight: 600; }
.tesisatsim .ts-secim i { font-style: normal; opacity: .55; font-size: 10px; }
/* kablosuz modülün uç adları — Görsel 8.134'teki gibi kutunun içinde yazılı */
.ts-kagit .kablosuz-uc { font-size: 8.5px; fill: #5b6b7c; text-anchor: middle;
                         font-weight: 600; letter-spacing: .2px; }

/* Sembolün içindeki iletken parçası — telin renginde ama ŞERİT değil.
   Modülde renkli tel çemberin içine girip uçta biter (Görsel 2.68). Ayrı
   sınıfta durması gerekiyor: şerit denetimleri (_sematest · _cakisma ·
   _baglantitest) yalnız .tel-oz ölçer, bu parça onlara karışmamalı.

   ADI `tel-ic` DEĞİL: o ad 897. satırda BAŞKA bir anlamda — cihaz içi
   fabrika köprüsünün kapsayıcısı — zaten kullanılıyordu. İki anlamı bir
   adda toplamak bugün zarar vermiyordu ama bir gün o kural tutar ve açık
   şemadaki iletkenler sebepsiz kesik çizgiye dönerdi.
   Rengi 315. satırdaki blokta, AYNI DÜĞÜM seçicisiyle geliyor. */
.ts-kagit .tel-sembol { fill: none; stroke-width: 2.4; stroke-linecap: round;
                        stroke-linejoin: round; }

/* GERİ AL — `denetim/100 · 3`. Kip şeridinin yanında ama AYRI kapta:
   kipler bir DURUM seçer, geri alma bir EYLEMdir; kip sayılırsa üç simin
   kip listesi ayrışır ve `0g.3 · 6` haksız yere kırmızı yanar. */
.ts-geri { display: flex; align-items: center; margin-left: 6px; }
.ts-geri .ts-geribtn { white-space: nowrap; }
.ts-geri .ts-geribtn[disabled] { opacity: .38; cursor: default; }

/* =============================================================================
   İŞ SAYFASI (`is.html`) — IS-EMRI-KD-1, 2 Ekim
   -----------------------------------------------------------------------------
   Buradaki HER kural `.is-sayfasi` altında. O sınıfı yalnız iş sayfası yazar
   (`tesisat-app.js` · `isModu`); öğretmen sayfasında (`index.html`) hiçbiri
   tutmaz — `_test/_kd1-ogretmen.js` bunu görüntünün baytıyla ölçer.
   ============================================================================= */

/* "DEVREYİ TEST ET" — MEHMET: "butonu varlığını hissettirmiyor; çocukların
   test etmeleri gerektiğini hissetmesi lazım." Şeritteki tek YEŞİL dolgu
   (kipler mavi, vurgu sarı), en sağda tek başına, 48 px. */
.is-sayfasi .ts-btn.is-test {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 22px; margin-left: auto;
  font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  background: #2ecc71; border: 2px solid #2ecc71; color: #06200f;
  border-radius: 10px;
}
.is-sayfasi .ts-btn.is-test:hover { color: #06200f; filter: brightness(1.1); }
/* Nabız: en az bir kablo çekilince yavaş, kablo sayısı çözümdekine ulaşınca
   hızlı. Zemin rengi DEĞİŞMEZ (kontrast sabit kalsın); atan şey halka ve boy. */
.is-sayfasi .ts-btn.is-test.nabiz { animation: is-nabiz 2.2s ease-in-out infinite; }
.is-sayfasi .ts-btn.is-test.nabiz.hazir { animation-duration: .8s; border-color: #fff; }
/* İpucu düğmenin İÇİNDE, yazının üstünde: dışarı taşan bir balon 412 px'te
   kablo rengi düğmelerinin üstüne biniyordu (ekran görüntüsünde görüldü).
   Düğme baştan 56 px olduğu için satır eklenince şerit zıplamaz. */
.is-sayfasi .ts-btn.is-test.nabiz.hazir::before {
  content: '👇  Bitti mi? Şimdi dene';
  font-size: 12px; font-weight: 600; margin-bottom: 2px;
}
@keyframes is-nabiz {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(46, 204, 113, .75); }
  50%      { transform: scale(1.07); box-shadow: 0 0 0 11px rgba(46, 204, 113, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .is-sayfasi .ts-btn.is-test.nabiz { animation: none; border-color: #fff; }
}

/* "ŞEMAYA BAK" — parmakla basılabilir boy; şema açıkken sarı çerçeve. */
.is-sayfasi .ts-btn.is-sema { min-height: 40px; font-size: 14px; white-space: nowrap; }
.is-sayfasi .ts-btn.is-sema.acik { border-color: var(--vurgu); color: var(--vurgu); }

/* Onay kutusu — küçük, ortada; arkası karartılır ki arkadaki sete basılmasın. */
.is-sayfasi .is-onay {
  position: absolute; inset: 0; z-index: 40; display: flex;
  align-items: center; justify-content: center; background: rgba(5, 9, 13, .6);
}
.is-sayfasi .is-onay-kutu {
  max-width: 330px; margin: 16px; padding: 20px 20px 18px; text-align: center;
  background: var(--bg-2); border: 1px solid var(--cizgi); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.is-sayfasi .is-onay-kutu p { margin: 0 0 16px; font-size: 16px; line-height: 1.4; }
.is-sayfasi .is-onay-kutu .ts-btn { min-height: 44px; min-width: 112px; margin: 0 5px; font-size: 15px; }
.is-sayfasi .is-onay-kutu .is-onay-bak {
  background: var(--vurgu); border-color: var(--vurgu); color: #14181d; font-weight: 700; }

/* ŞEMA AÇIKKEN — solda çözülmüş açık şema, sağda öğrencinin seti.
   · Öğretmenin "bak-kapat-bağla" düğmesi burada yok: aç/kapa şeritteki düğmede.
   · Şema salt bakılır. Eylemi KOD kapatıyor (`yenidenKur` · `acikKanca`);
     buradaki `pointer-events` yalnız yanıltıcı el/artı imlecini kaldırır.
   · Geniş ekranda malzeme kütüphanesi gizlenir: malzemeler zaten yerinde,
     o 190 px sete kalsın (şema kapanınca geri gelir). */
.is-sayfasi .ts-sema-gizle { display: none; }
.is-sayfasi svg.sema-salt * { pointer-events: none; }
@media (min-width: 901px) {
  .is-sayfasi.gorunum-ikili .ts-kutuphane { display: none; }
}

/* ---- IS-EMRI-KD-2 §2 · ŞEMA KENDİ BÖLMESİNE SIĞAR (yalnız iş sayfası) ----
   Şemanın boyunu `isSemaSigdir` piksel olarak yazar; bölme taşarsa KENDİ
   içinde kayar (parmakla da). Şema her devrede SOLDA (KD-3 §1). */
.is-sayfasi .ts-gorunum.is-sema-bolme {
  overflow: auto; background: var(--kagit);
  -webkit-overflow-scrolling: touch;
}
.is-sayfasi .ts-gorunum.is-sema-bolme > svg { margin: 0 auto; flex: none; }
/* "AÇIK ŞEMA — MODÜL DÜZENİ" yazısı şemanın sol üstünü örtüyordu; öğrenciye
   bir şey söylemiyor, 30 px'lik payı sete bırakıldı. */
.is-sayfasi .ts-gorunum.is-sema-bolme > .ts-gorunum-lbl { display: none; }

/* ---- IS-EMRI-KD-2 §3 · bağlantı listesi şema açılana kadar kapalı ---- */
.is-sayfasi .ts-gorev.is-liste-kapali { color: var(--ink-soluk); font-style: italic; }
.is-sayfasi .ts-gorunum.is-sema-bolme.kayar::after {
  content: '↔  şemanın devamı için kaydır';
  position: sticky; left: 8px; bottom: 6px; display: inline-block; margin-top: -28px;
  padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 600;
  background: rgba(22, 30, 39, .85); color: #fff; pointer-events: none;
}

/* ---- IS-EMRI-KD-5 · PARMAKLA YAKINLAŞTIRMA (yalnız iş sayfası) ----
   Tarayıcının kendi sayfa yakınlaştırması yalnız ÇİZİM ALANINDA kapalı;
   hareketi dokunmaKur yönetir. Set yakın değilken dikey kaydırma sayfaya
   kalır (telefonda sağ panele inebilmek için); yakınken tek parmak seti
   kaydırır. Şema bölmesi tek parmakla tarayıcının kaydırmasıyla kayar. */
.is-sayfasi .ts-gorunum { touch-action: pan-y; }
.is-sayfasi .ts-gorunum.yakin { touch-action: none; }
.is-sayfasi .ts-gorunum.is-sema-bolme { touch-action: pan-x pan-y; }

/* ---- IS-EMRI-KD-6 · ANAHTARIN ORTAK UCU BELİRGİN (eğitim seti) ----
   Ortak ucun pabucu ve mekanizmadaki ortak bara AYNI kahverengi (dönme
   noktasının rengi); ikisinde de "L" yazar. Uç numarasının yazı stili
   (koyu rakam + açık hale) DEĞİŞMEZ — okunurluk ölçüsü ona bağlı. */
.ts-kagit .uc-ortak .uc-pabuc { fill: #a9743f; stroke: #5b3a1a; stroke-width: 1.8; }
.ts-kagit .uc-ortak .uc-vida { fill: #f1dcc3; stroke: #5b3a1a; }
.ts-kagit .s-mek-ortak { fill: none; stroke: #a9743f; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ts-kagit text.s-mek-ortak-lbl { font-size: 7.5px; font-weight: 800; fill: #5b3a1a;
  text-anchor: middle; pointer-events: none; }

/* ---- IS-EMRI-KD-7 · TELEFONDA KABLO RENGİ EKRANI ÇALIŞMA ALANINI ÖRTMEZ ----
   MEHMET (telefonda): "kablo çekerken kablo rengi ekranı açılınca ekranın çoğu
   yeri kapanıyor." Ölçüldü: örten şey, çekilmiş bir kabloya dokununca açılan
   renk MENÜSÜYDÜ (`ts-cmenu`) — 238 px en, ~480 px boy, 13 satırlık dikey
   liste; setin görünen payı 412×900'de %54 → %34, 360×740'ta %53 → %21.
   Dar ekranda ve yalnız iş sayfasında menü ekranın ALT KENARINA yaslanan tek
   satırlık, yana kayan bir şerit olur: aynı 11 renk + Oto + Sök, her biri
   40 px dokunma hedefi; seti hiç örtmez. Üst şeritteki renk satırı da tek
   satır/40 px olur, marka yazısı gizlenir ve sete %62 boy verilir. */
@media (max-width: 900px) {
  .is-sayfasi .ts-marka { display: none; }
  .is-sayfasi .ts-sahne { min-height: 62vh; }
  .is-sayfasi .ts-renkler { flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    -webkit-overflow-scrolling: touch; }
  .is-sayfasi .ts-renklbl { display: none; }
  .is-sayfasi .ts-renk { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 7px;
    font-size: 11px; }

  .is-sayfasi .ts-cmenu {
    position: fixed; left: 0 !important; top: auto !important; right: 0; bottom: 0;
    width: auto; display: flex; align-items: center; gap: 6px; overflow-x: auto;
    padding: 6px 8px; border-radius: 12px 12px 0 0; -webkit-overflow-scrolling: touch;
  }
  .is-sayfasi .ts-cmenu-h, .is-sayfasi .ts-cmenu-g { display: none; }
  .is-sayfasi .ts-cmenu-row {
    flex: 0 0 auto; width: auto; min-width: 40px; height: 40px; padding: 0;
    justify-content: center; gap: 0; font-size: 0;
  }
  .is-sayfasi .ts-cmenu-row i { width: 32px; height: 32px; border-radius: 7px; }
  .is-sayfasi .ts-cmenu-row.cur { background: transparent; }
  .is-sayfasi .ts-cmenu-row.cur::after { content: none; }
  .is-sayfasi .ts-cmenu-row.cur i { outline: 3px solid var(--vurgu); outline-offset: 1px; }
  /* Oto ve Sök başta ve yazılı: ikisi renk değil EYLEM */
  .is-sayfasi .ts-cmenu-row.auto, .is-sayfasi .ts-cmenu-row.sil {
    order: -1; padding: 0 10px; gap: 6px; margin-top: 0; border-top: 0;
    background: var(--bg-3);
  }
  .is-sayfasi .ts-cmenu-row.auto i, .is-sayfasi .ts-cmenu-row.sil i { width: 18px; height: 18px; }
  .is-sayfasi .ts-cmenu-row.auto::after { content: 'Oto'; font-size: 13px; font-weight: 600; }
  .is-sayfasi .ts-cmenu-row.sil::after { content: 'Sök'; font-size: 13px; font-weight: 600; }
}

/* ---- IS-EMRI-KD-8 §2 · BUATA KLEMENS EKLEME düğmesi (yalnız iş sayfası) ----
   Buatın üstündeki dişli 1366'da 12 px, 412'de 5 px ölçüldü; panelde parmakla
   basılabilir bir düğme aynı paneli açar. */
.is-sayfasi .ts-yan [data-buat-ac] { min-height: 40px; }

/* =============================================================================
   IS-EMRI-KD-9 · TESTTEN SONRA EKRAN AÇIK KALIR (yalnız iş sayfası)
   -----------------------------------------------------------------------------
   Sonuç şeridi üst şeridin hemen altında; [Dükkâna dön] 48 px ve hep görünür
   (şerit kaymaz, set onun altında kalır). "Çekilişimi göster" açıkken setin
   kendi telleri soluklaşır, renkli kopya en üst katmanda çizilir.
   ============================================================================= */
.is-sayfasi .is-serit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; flex-shrink: 0;
  padding: 8px 16px; background: #12301f; border-bottom: 2px solid #2ecc71; color: #eafff2;
}
.is-sayfasi .is-serit.gizli { display: none; }
.is-sayfasi .is-serit.yanlis { background: #3a1616; border-bottom-color: #f85149; color: #ffecec; }
.is-sayfasi .is-serit-yazi { flex: 1 1 320px; min-width: 0; line-height: 1.35; }
.is-sayfasi .is-serit-1 { font-size: 16px; }
.is-sayfasi .is-serit-1 b { font-size: 17px; }
.is-sayfasi .is-serit-2 { font-size: 13px; opacity: .9; }
.is-sayfasi .is-serit-3 { font-size: 13px; color: #ffd98a; }
.is-sayfasi .is-serit-dugme { display: flex; gap: 8px; flex-wrap: wrap; }
.is-sayfasi .is-serit-dugme .ts-btn { min-height: 48px; padding: 0 16px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.is-sayfasi .ts-btn.is-don { background: var(--vurgu); border-color: var(--vurgu); color: #14181d; min-width: 150px; }
.is-sayfasi .ts-btn.is-don:hover { color: #14181d; filter: brightness(1.08); }
.is-sayfasi .ts-btn.is-cekilis-btn.acik { border-color: #fff; color: #fff; }

.is-sayfasi .is-cekilis-liste { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.is-sayfasi .ck-anahtar { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; }
.is-sayfasi .ck-a::before { content: ''; display: inline-block; width: 22px; height: 0; margin-right: 5px;
  vertical-align: middle; border-top: 4px solid #2ecc71; }
.is-sayfasi .ck-a.baska::before { border-top-color: #8aa2b8; }
.is-sayfasi .ck-a.kusur::before { border-top: 6px solid #ff8a1f; }
.is-sayfasi .ck-a.yanlis::before { border-top: 6px dashed #ff5148; }
.is-sayfasi .ck-a.ustayol::before { border-top: 2px dashed #fff; }
.is-sayfasi .ck-bos { font-size: 14px; font-weight: 600; }
.is-sayfasi .ts-btn.ck-satir { min-height: 40px; font-size: 13px; text-align: left; border-left: 6px solid #ff8a1f; }
.is-sayfasi .ts-btn.ck-satir.yanlis { border-left-color: #ff5148; }
.is-sayfasi .ts-btn.ck-satir.secili { background: #fff; color: #14181d; }
.is-sayfasi .ck-aciklama { flex: 1 1 100%; font-size: 13px; color: #fff; }

.is-sayfasi.is-cekilis .ts-kagit .kat-tel, .is-sayfasi.is-cekilis .ts-kagit .kat-teluc { opacity: .28; }
.is-sayfasi .ck-katman { pointer-events: none; }
.is-sayfasi .ck-katman path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.is-sayfasi .ck-tel.ck-usta { stroke: #19a34a; stroke-width: 5; }
.is-sayfasi .ck-tel.ck-baska { stroke: #6f8aa3; stroke-width: 5; }
.is-sayfasi .ck-tel.ck-kusur { stroke: #f47b00; stroke-width: 9; }
.is-sayfasi .ck-tel.ck-yanlis { stroke: #e02b20; stroke-width: 9; }
.is-sayfasi .ck-tel.ck-eksik { stroke: #e02b20; stroke-width: 5; stroke-dasharray: 12 9; }
.is-sayfasi .ck-tel.ck-eksik.secili { stroke-dasharray: 24 20; }
.is-sayfasi .ck-tel.secili { stroke-width: 13; filter: drop-shadow(0 0 5px rgba(0, 0, 0, .7)); }
.is-sayfasi .ck-usta-alt { stroke: #14181d; stroke-width: 5; }
.is-sayfasi .ck-usta-yol { stroke: #fff; stroke-width: 2.5; stroke-dasharray: 9 7; }
.is-sayfasi .ck-usta-alt.secili { stroke-width: 9; }
.is-sayfasi .ck-usta-yol.secili { stroke-width: 5; }
.is-sayfasi .ck-etiket { font-size: 15px; font-weight: 800; text-anchor: middle;
  paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; fill: #9a4a00; }
.is-sayfasi .ck-etiket.yanlis { fill: #a3140c; }

@media (max-width: 900px) {
  .is-sayfasi .is-serit { padding: 6px 8px; gap: 6px 8px; }
  .is-sayfasi .is-serit-1 { font-size: 14px; } .is-sayfasi .is-serit-1 b { font-size: 15px; }
  .is-sayfasi .is-serit-2, .is-sayfasi .is-serit-3 { font-size: 12px; }
  .is-sayfasi .is-serit-dugme { flex: 1 1 100%; }
  .is-sayfasi .is-serit-dugme .ts-btn { flex: 1 1 0; padding: 0 8px; font-size: 14px; min-width: 0; }
}