/* =====================================================================
   BEP Studio — Tasarım Standardı (TEK KAYNAK), koyu tema
   Renk/boşluk/tipografi token'ları ve tüm kontrol görünümleri burada.
   Sayfalarda yalnızca bu sınıflar kullanılır.
   ===================================================================== */

:root{
  /* yüzeyler — nötr koyu gri (mavi/mor tonu yok) */
  --z0:#131313;        /* sayfa zemini */
  --z1:#1a1a1a;        /* panel */
  --z2:#212121;        /* panel içi yükselti */
  --z3:#2b2b2b;        /* hover */
  --cizgi:#2e2e2e;
  --cizgi2:#3d3d3d;
  --z0-saydam:rgba(19,19,19,.94);   /* tuval üstü katmanlar */
  /* metin */
  --yazi:#e8e8e8;
  --yazi2:#a6a6a6;
  --yazi3:#767676;
  /* arayüz vurgusu — nötr; anlam renkleri yalnız çizimde kullanılır */
  --vurgu:#d6d6d6;
  --vurgu-yazi:#141414;
  --vurgu-halka:rgba(214,214,214,.16);
  /* anlam renkleri (ÇİZİM öğeleri — ayırt edilebilirlik için renkli kalır) */
  --mavi:#5aa9ff;      /* kat */
  --turuncu:#ffa447;   /* zon (klimatize) */
  --mor:#c4b5fd;       /* duvar */
  --gok:#38bdf8;       /* pencere */
  --amber:#f59e0b;     /* kapı */
  --yesil:#3fb950;     /* onay / aktif mod */
  --yesil-z:#12301d;
  --sari:#d29922;      /* uyarı */
  --kirmizi:#f85149;   /* hata */
  --cam:#22d3ee;       /* yakalama */
  /* ölçü */
  --r:8px; --r2:12px;
  --b1:4px; --b2:8px; --b3:12px; --b4:16px; --b5:24px;
  --f:13.5px; --f-k:11.5px; --f-b:17px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{background:var(--z0)}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
     margin:0;color:var(--yazi);font-size:var(--f);
     -webkit-font-smoothing:antialiased}
a{color:var(--yazi);text-decoration:none}
a:hover{text-decoration:underline}
/* Sayfa genişliği: 1320px sabit sınır geniş ekranlarda solda ve sağda
   yüzlerce piksel boş bırakıyordu (BULGULAR §72). Artık ekranın
   neredeyse tamamı kullanılıyor; çok geniş monitörlerde de kenarda
   biraz nefes payı kalsın diye 96vw ile sınırlı. Uzun düz metinler
   ayrıca kendi max-width'leriyle (70ch) okunur kalıyor. */
main{max-width:min(1980px,96vw);margin:var(--b5) auto;padding:0 var(--b4)}
h2{font-size:var(--f-b);font-weight:650;letter-spacing:-.01em;margin:0 0 var(--b3)}
h3{font-size:14.5px;font-weight:650;color:var(--yazi);margin:var(--b5) 0 var(--b2)}
hr{border:0;border-top:1px solid var(--cizgi);margin:var(--b3) 0}

/* ---------- üst bar ---------- */
header.bep{background:var(--z1);border-bottom:1px solid var(--cizgi);
     padding:0 var(--b4);height:52px;display:flex;gap:var(--b4);align-items:center}
header.bep .logo{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--yazi);
     display:flex;align-items:center;gap:8px}
header.bep .logo::before{content:"";width:9px;height:9px;border-radius:2px;
     background:linear-gradient(135deg,var(--yazi2),var(--yazi3))}
header.bep a{color:var(--yazi2);font-weight:500;font-size:13px;padding:6px 2px}
header.bep a:hover{color:var(--yazi);text-decoration:none}
header.bep .sag{margin-left:auto;color:var(--yazi3);font-size:var(--f-k);font-family:var(--mono)}
/* Programı kapat (§170): konsol penceresi kaldırıldı, durdurmanın yolu bu.
   Sessiz durur — yanlışlıkla basılacak kadar göze girmesin. */
.kapat-dugme{background:none;border:1px solid var(--cizgi);border-radius:6px;
  color:var(--yazi3);font:inherit;font-size:12px;padding:4px 10px;cursor:pointer}
.kapat-dugme:hover{color:var(--yazi);border-color:var(--cizgi2)}
.kapat-dugme.evet{color:#f85149;border-color:#5c2b2b}
.kapat-dugme.evet:hover{background:#3a1d1d;color:#ff8a80}
#kapat-onay{display:inline-flex;gap:6px;align-items:center;color:var(--yazi2)}
/* `display` vermek, `hidden` niteliğinin varsayılan `display:none`unu
   EZİYOR: iki durum aynı anda görünüyordu. JS testi `.hidden` özelliğini
   okuduğu için bunu göremedi, ekran görüntüsü yakaladı (§170). */
#kapat-alan [hidden]{display:none}
.kapandi{max-width:520px;margin:18vh auto;text-align:center;color:var(--yazi2)}
.kapandi h1{font-size:20px;color:var(--yazi);margin-bottom:8px}
/* Derleme damgası: hangi sürümün çalıştığı bir bakışta görünsün */
header.bep .sag .damga{color:var(--yazi2);border:1px solid var(--cizgi);
  border-radius:4px;padding:1px 5px;margin-left:2px}

/* ---------- yüzeyler ---------- */
.kart,.panel{background:var(--z1);border:1px solid var(--cizgi);border-radius:var(--r2)}
.kart{padding:var(--b4) 20px;margin-bottom:var(--b4)}
.panel{padding:var(--b3)}
/* Yan paneller geniş ekranda da okunur kalsın diye biraz genişliyor;
   kazanılan yerin çoğu ORTADAKİ önizlemeye gidiyor (BULGULAR §72). */
.duzen{display:grid;grid-template-columns:minmax(300px,22ch) 1fr minmax(330px,34ch);
       gap:var(--b3);align-items:start}

/* ---------- tipografi yardımcıları ---------- */
.rozet{font-size:var(--f-k);color:var(--yazi3)}
.not{color:var(--yazi2);font-size:12.5px;line-height:1.55}
.baslik-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
     color:var(--yazi3);font-weight:600;margin:0 0 var(--b2)}
.sayi{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tusk{display:inline-block;border:1px solid var(--cizgi2);border-bottom-width:2px;
     border-radius:4px;padding:1px 6px;font-family:var(--mono);font-size:11px;
     background:var(--z2);color:var(--yazi2)}

/* ---------- tablo ---------- */
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
   color:var(--yazi3);font-weight:600;padding:6px 10px;border-bottom:1px solid var(--cizgi)}
td{border-bottom:1px solid var(--cizgi);padding:9px 10px;vertical-align:top;color:var(--yazi)}
tr:last-child td{border-bottom:0}
td:first-child{color:var(--yazi2)}

/* ---------- düğmeler ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;justify-content:center;
     background:var(--z2);color:var(--yazi);border:1px solid var(--cizgi2);
     border-radius:7px;padding:7px 13px;font-size:13px;font-weight:500;
     cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s}
.btn:hover{background:var(--z3);border-color:var(--cizgi2);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.birincil{background:var(--vurgu);border-color:var(--vurgu);color:var(--vurgu-yazi);font-weight:600}
.btn.birincil:hover{filter:brightness(1.08);background:var(--vurgu)}
.btn.ikincil{background:transparent}
.btn.tehlike{color:var(--kirmizi);border-color:#4a2320}
.btn.tehlike:hover{background:#2a1614}
.btn.mini{font-size:11.5px;padding:3px 8px;border-radius:6px;gap:4px}
.btn.aktif{background:var(--yesil-z);border-color:var(--yesil);color:var(--yesil)}

/* ---------- form kontrolleri (input + select + textarea tek görünüm) ---------- */
.giris{width:100%;padding:7px 10px;border:1px solid var(--cizgi2);border-radius:7px;
     font-size:13px;background:var(--z0);color:var(--yazi);font-family:inherit}
.giris:focus{outline:none;border-color:var(--vurgu);box-shadow:0 0 0 3px var(--vurgu-halka)}
.giris::placeholder{color:var(--yazi3)}
input[type=number].giris{font-family:var(--mono)}
select.giris{appearance:none;cursor:pointer;padding-right:28px;
     background-image:linear-gradient(45deg,transparent 50%,var(--yazi2) 50%),
                      linear-gradient(135deg,var(--yazi2) 50%,transparent 50%);
     background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;
     background-size:5px 5px;background-repeat:no-repeat}
input[type=checkbox]{accent-color:var(--vurgu);width:15px;height:15px}
.alan{display:block;margin:var(--b2) 0}
.alan-etiket{display:block;font-size:var(--f-k);color:var(--yazi3);margin-bottom:4px}
.alan-satir{display:flex;gap:7px;align-items:center;margin:var(--b2) 0;font-size:13px}

/* ---------- kat/zon ağacı ---------- */
.agac .kat{border:1px solid var(--cizgi);border-radius:var(--r);padding:9px;
     margin-bottom:8px;background:var(--z2)}
.agac .kat.secili{border-color:var(--vurgu);box-shadow:0 0 0 1px var(--vurgu) inset}
.agac .zon{margin:6px 0 0 12px;padding:6px 8px;border:1px solid var(--cizgi);
     border-radius:6px;background:var(--z1)}
.agac .zon.secili{border-color:var(--turuncu)}
.agac .baslik{display:flex;justify-content:space-between;align-items:center;gap:6px}
.agac .ad{font-weight:600;letter-spacing:-.01em}

/* ---------- adım şeridi ---------- */
#adimlar{display:flex;gap:6px;margin-bottom:var(--b3);font-size:12px;flex-wrap:wrap}
#adimlar span{padding:5px 11px;border-radius:20px;background:var(--z1);
     border:1px solid var(--cizgi);color:var(--yazi3)}
#adimlar span.ok{background:var(--yesil-z);border-color:#1d4d2b;color:var(--yesil);font-weight:600}

/* ---------- kontrol listesi ---------- */
.kontrol ul{list-style:none;padding:0;margin:var(--b2) 0}
.kontrol li{margin:5px 0;font-size:12.5px;line-height:1.45;padding-left:16px;
     position:relative;color:var(--yazi2)}
.kontrol li::before{position:absolute;left:0;top:0}
.kontrol .hata{color:#ff9d97}
.kontrol .hata::before{content:"×";color:var(--kirmizi);font-weight:700}
.kontrol .uyari{color:#e8c169}
.kontrol .uyari::before{content:"!";color:var(--sari);font-weight:700}
.kontrol .bilgi{color:#f0a35e}
.kontrol .bilgi::before{content:"i";color:var(--turuncu,#e07b39);font-weight:700}
.kontrol .temiz{color:var(--yesil)}
.kontrol .temiz::before{content:"✓"}

/* ---------- önizleme tuvali (sayfa) ---------- */
#tuval{width:100%;background:var(--z0);border:1px solid var(--cizgi);
     border-radius:var(--r);display:block}
.arac{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:var(--b2)}
#durum{font-size:12.5px;color:var(--yazi2);min-height:18px;margin-top:7px;font-family:var(--mono)}

/* =====================================================================
   TAM EKRAN ÇİZİM PENCERESİ
   ===================================================================== */
.cz{position:fixed;inset:0;z-index:900;background:var(--z0);color:var(--yazi);
    display:flex;flex-direction:column;font-size:13px}
.cz-ust{display:flex;align-items:center;gap:12px;padding:0 var(--b3);height:46px;
    background:var(--z1);border-bottom:1px solid var(--cizgi)}
.cz-ust .ad{font-weight:650;font-size:14px;letter-spacing:-.01em}
.cz-ust .etiket{background:var(--yesil-z);color:var(--yesil);border:1px solid #1d4d2b;
    border-radius:6px;padding:3px 9px;font-size:11.5px;font-weight:600}
.cz-govde{flex:1;display:flex;min-height:0}
.cz-sol{width:52px;background:var(--z1);border-right:1px solid var(--cizgi);
    display:flex;flex-direction:column;gap:3px;padding:8px 5px;overflow-y:auto}
.cz-sag{width:238px;background:var(--z1);border-left:1px solid var(--cizgi);
    padding:var(--b3);overflow-y:auto;position:relative;flex-shrink:0}
/* §200: yalnız Malzeme ayarla aracı aktifken panel genişliği elle
   ayarlanabiliyor; sürüklenen kenar burada. */
.cz-sag.genisletilebilir{flex-shrink:0}
.cz-sag-tutamak{position:absolute;left:0;top:0;bottom:0;width:6px;
    cursor:ew-resize;z-index:5}
.cz-sag-tutamak:hover{background:var(--vurgu,#4c8dff);opacity:.35}
.cz-malzeme .not{margin:6px 0}
.cz-malzeme-ayar{display:flex;gap:10px;flex-wrap:wrap;background:var(--z0);
    border:1px solid var(--cizgi);border-radius:var(--r2);padding:8px;margin-bottom:8px}
.cz-malzeme-ayar label{display:flex;flex-direction:column;gap:3px;font-size:11px;
    color:var(--soluk,#9aa1ad)}
.cz-malzeme-ayar input{width:100px}
.cz-malzeme-dropdown{position:absolute;left:0;right:0;top:100%;margin-top:2px;
    background:var(--z1);border:1px solid var(--cizgi);border-radius:var(--r2);
    max-height:220px;overflow-y:auto;z-index:20;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.cz-malzeme-dropdown .cz-oge{cursor:pointer;padding:5px 8px}
.cz-malzeme-dropdown .cz-oge:hover{background:var(--z2,rgba(255,255,255,.06))}
/* Tuvalde sürüklerken tarayıcı metin seçmesin: SVG etiketleri ve üstteki
   ipucu/şerit kutuları mavi seçim alıyordu ve çizim kesiliyordu. */
.cz-tuval{flex:1;position:relative;min-width:0;background:var(--z0);
  user-select:none;-webkit-user-select:none;touch-action:none}
.cz-tuval svg{width:100%;height:100%;display:block;cursor:crosshair;
  user-select:none;-webkit-user-select:none}
.cz-tuval svg text,.cz-tuval svg tspan{user-select:none;-webkit-user-select:none;
  pointer-events:none}
.cz-alt{display:flex;align-items:center;gap:var(--b3);padding:0 var(--b3);height:34px;
    background:var(--z1);border-top:1px solid var(--cizgi);color:var(--yazi3);
    font-size:11.5px;flex-wrap:nowrap;overflow:hidden}
.cz-alt .kutu{color:var(--yazi);font-family:var(--mono);font-variant-numeric:tabular-nums}
.cz-alt .dik{color:var(--yesil);font-weight:700}

/* araç düğmesi */
.cz-arac{width:42px;height:42px;border-radius:8px;border:1px solid transparent;
    background:transparent;color:var(--yazi2);font-size:17px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;position:relative}
.cz-arac:hover{background:var(--z3);color:var(--yazi)}
.cz-arac.secili{background:var(--yesil-z);border-color:#1d4d2b;color:var(--yesil)}
.cz-arac .kis{position:absolute;right:4px;bottom:2px;font-size:8.5px;opacity:.6;
    font-family:var(--mono)}
.cz-ayirac{height:1px;background:var(--cizgi);margin:5px 4px}
.cz-arac:disabled{opacity:.32;cursor:default}
.cz-arac:disabled:hover{background:transparent;color:var(--yazi2)}
/* Alt/üst kat izdüşümü düğmeleri: açıkken tuvalde kullanılan rengin
   aynısıyla yanar — hangi gölgenin hangi düğmeden geldiği okunsun. */
.cz-arac.iz-alt.secili{background:#3a0f37;border-color:#6b1a64;color:#e879f9}
.cz-arac.iz-ust.secili{background:#0b3a35;border-color:#12564e;color:#2dd4bf}

/* sağ panel */
.cz-baslik{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--yazi3);
    margin:var(--b4) 0 var(--b2);font-weight:600}
.cz-baslik:first-child{margin-top:0}
.cz-satir{display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:5px 8px;border-radius:6px;cursor:pointer;color:var(--yazi2);font-size:12.5px}
.cz-satir:hover{background:var(--z2)}
.cz-satir.acik{color:var(--yazi)}
.cz-satir.acik b{color:var(--cam)}
.cz-satir.kapali{color:var(--yazi3)}
.cz-liste{display:flex;flex-direction:column;gap:3px}
.cz-oge{padding:7px 9px;border-radius:7px;background:var(--z2);border:1px solid var(--cizgi);
    cursor:pointer;font-size:12.5px}
.cz-oge:hover{border-color:var(--cizgi2)}
.cz-oge.aktif{border-color:var(--yesil);background:var(--yesil-z)}
.cz-oge .kucuk{font-size:11px;color:var(--yazi3);margin-top:2px;font-family:var(--mono)}
.cz-dugme{width:100%;padding:8px;border-radius:7px;border:1px solid var(--cizgi2);
    background:var(--z2);color:var(--yazi);cursor:pointer;font-size:12.5px;
    margin-top:6px;font-family:inherit}
.cz-dugme:hover{background:var(--z3)}
.cz-dugme.ana{background:var(--yesil-z);border-color:#1d4d2b;color:var(--yesil);font-weight:600}
.cz-dugme.kirmizi{color:var(--kirmizi);border-color:#4a2320}

/* tuval üstü kutular */
/* ipucu kutusu tuval tıklamalarını engellememeli */
.cz-ipucu{position:absolute;left:var(--b3);top:var(--b3);background:var(--z0-saydam);
    border:1px solid var(--cizgi);border-radius:var(--r);padding:9px 13px;
    max-width:440px;line-height:1.5;color:var(--yazi2);font-size:12.5px;
    backdrop-filter:blur(6px);pointer-events:none;user-select:none}
.cz-ipucu b{color:var(--yazi)}
/* Kutunun kendisi tıklamayı geçiriyor (pointer-events:none) ki tuvalde
   çizimi engellemesin. İÇİNDEKİ bağlantılar bunun istisnası: "bir adım
   geri"/"iptal" tıklanamıyordu, tıklama tuvale düşüp hizalama noktası
   olarak yorumlanıyordu (BULGULAR §87.1). */
.cz-ipucu a{pointer-events:auto;color:var(--vurgu);text-decoration:underline;
    cursor:pointer;user-select:none}
.cz-ipucu kbd{background:var(--z2);border:1px solid var(--cizgi2);border-bottom-width:2px;
    border-radius:4px;padding:0 5px;font-family:var(--mono);font-size:10.5px;color:var(--yazi2)}
/* Tuvalin sağ üst köşesi: kat geçiş okları + seçim kutusu yan yana.
   Okların yeri seçim kutusu açılıp kapandıkça KAYMAMALI, o yüzden ikisi de
   tek bir esnek satırda duruyor (BULGULAR §112). */
.cz-ust-sag{position:absolute;right:var(--b3);top:var(--b3);display:flex;
    gap:8px;align-items:flex-start;pointer-events:none;
    /* Hedef seçici dördüncü kutu olarak katıldı; dar ekranda yan yana
       sığmayınca tuvalin üstünü kaplamasın diye alt satıra iniyor. */
    flex-wrap:wrap;justify-content:flex-end;max-width:min(70%,760px)}
.cz-ust-sag>*{pointer-events:auto}
/* ÇİZİM HEDEFİ seçici — yalnız hedef isteyen araçlarda görünür (§164).
   Hedef yokken sarı: araç seçili ama tuvale tıklamak bir şey yapmayacak. */
.cz-hedef{background:var(--z0-saydam);border:1px solid var(--cizgi2);
    border-radius:var(--r);backdrop-filter:blur(6px);padding:5px 9px;
    font-size:11.5px;color:var(--yazi2);display:flex;gap:8px;align-items:center}
.cz-hedef.gerekli{border-color:var(--sari);color:var(--sari)}
.cz-hedef .e{font-weight:600;white-space:nowrap}
/* .giris `width:100%` taşıyor; rozet içinde içeriğe göre daralsın. */
.cz-hedef select{width:auto;min-width:150px;max-width:230px;
    padding:3px 6px;font-size:11.5px;margin:0}
.cz-secim-bilgi{background:var(--z0-saydam);
    border:1px solid var(--yesil);border-radius:var(--r);padding:8px 12px;color:var(--yesil);
    font-size:12.5px;backdrop-filter:blur(6px)}
/* Açık izdüşümlerin rozeti — kat geçişinin hemen altında durur. */
.cz-izdusum-rozet{background:var(--z0-saydam);border:1px solid var(--cizgi2);
    border-radius:var(--r);backdrop-filter:blur(6px);padding:5px 9px;
    font-size:11.5px;color:var(--yazi2);display:flex;gap:8px;align-items:center}
.cz-izdusum-rozet .alt{color:#e879f9;font-weight:600}
.cz-izdusum-rozet .ust{color:#2dd4bf;font-weight:600}
.cz-kat-gecis{background:var(--z0-saydam);border:1px solid var(--cizgi2);
    border-radius:var(--r);backdrop-filter:blur(6px);display:flex;
    align-items:center;gap:2px;padding:4px 6px}
.cz-kat-gecis .ad{font-size:12px;color:var(--yazi2);padding:0 6px;
    white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.cz-kat-gecis button{background:none;border:1px solid transparent;color:var(--yazi);
    border-radius:6px;width:26px;height:26px;font-size:14px;cursor:pointer;line-height:1}
.cz-kat-gecis button:hover:not(:disabled){background:var(--z2);border-color:var(--cizgi2)}
.cz-kat-gecis button:disabled{opacity:.28;cursor:default}
.cz-giris{position:absolute;left:50%;bottom:var(--b4);transform:translateX(-50%);
    background:var(--z1);border:1px solid var(--sari);border-radius:var(--r);
    padding:9px 13px;display:flex;gap:9px;align-items:center;color:var(--yazi)}
.cz-giris input{width:120px;padding:6px 9px;border-radius:6px;border:1px solid var(--cizgi2);
    background:var(--z0);color:var(--yazi);font-size:14px;font-family:var(--mono)}
.cz-giris input:focus{outline:none;border-color:var(--sari)}

/* cephe (elevation) editörü */
.cz-cephe{position:absolute;left:0;right:0;bottom:0;height:52%;background:var(--z1);
    border-top:1px solid var(--cizgi2);display:flex;flex-direction:column}
.cz-cephe .ust{display:flex;align-items:center;gap:10px;padding:0 var(--b3);height:40px;
    background:var(--z2);border-bottom:1px solid var(--cizgi)}
.cz-cephe .tuval{flex:1;min-height:0;padding:8px 12px;background:var(--z0)}
.cz-cephe svg{width:100%;height:100%;display:block}
.cz-cephe .alt{display:flex;align-items:center;gap:8px;padding:9px var(--b3);
    background:var(--z2);border-top:1px solid var(--cizgi);flex-wrap:wrap}
.cz-cephe .alan-mini{display:flex;align-items:center;gap:5px}
.cz-cephe .alan-mini span{font-size:10.5px;color:var(--yazi3);text-transform:uppercase;
    letter-spacing:.06em}
.cz-cephe input{width:76px;padding:5px 7px;border-radius:6px;border:1px solid var(--cizgi2);
    background:var(--z0);color:var(--yazi);font-family:var(--mono);font-size:12.5px}
.cz-cephe input:focus{outline:none;border-color:var(--vurgu)}
.cz-bosluk{cursor:grab}
.cz-bosluk:active{cursor:grabbing}
.cz-bosluk:hover{filter:brightness(1.3)}

/* =====================================================================
   SİHİRBAZ — "tek ekranda tek karar" akışı
   Resmî kılavuzun adım sırasını birebir izler; her ekran kullanıcıdan
   yalnız kendi kararını ister, gerisini program doldurur.
   ===================================================================== */

.sh{display:grid;grid-template-columns:236px 1fr;gap:var(--b4);align-items:start}

/* --- adım rayı --- */
.sh-ray{position:sticky;top:var(--b3);background:var(--z1);border:1px solid var(--cizgi);
        border-radius:var(--r2);padding:var(--b2)}
.sh-ray a{display:flex;gap:9px;align-items:flex-start;padding:8px 9px;border-radius:7px;
          color:var(--yazi2);font-size:12.5px;line-height:1.35}
.sh-ray a:hover{background:var(--z2);text-decoration:none;color:var(--yazi)}
.sh-ray a.aktif{background:var(--z3);color:var(--yazi);font-weight:600}
.sh-ray a.kilitli{opacity:.45;pointer-events:none}
.sh-ray .no{flex:none;width:20px;height:20px;border-radius:50%;background:var(--z3);
            border:1px solid var(--cizgi2);display:grid;place-items:center;
            font-size:11px;font-weight:700;color:var(--yazi3)}
.sh-ray a.aktif .no{background:var(--vurgu);color:var(--vurgu-yazi);border-color:var(--vurgu)}
.sh-ray a.tamam .no{background:var(--yesil-z);border-color:var(--yesil);color:var(--yesil)}
.sh-ray .alt{display:block;font-size:11px;color:var(--yazi3);font-weight:400}

/* --- adım gövdesi --- */
.sh-govde{min-width:0}
.sh-baslik{margin:0 0 2px;font-size:20px;font-weight:650;letter-spacing:-.02em}
.sh-alt{color:var(--yazi2);font-size:13px;margin:0 0 var(--b4);line-height:1.55;max-width:70ch}
.sh-kart{background:var(--z1);border:1px solid var(--cizgi);border-radius:var(--r2);
         padding:var(--b4);margin-bottom:var(--b3)}
.sh-kart > .baslik-k{margin-top:0}

/* soru satırı: solda ne sorulduğu, sağda cevap */
.sh-soru{display:grid;grid-template-columns:210px 1fr;gap:var(--b3);align-items:start;
         padding:11px 0;border-bottom:1px solid var(--cizgi)}
.sh-soru:last-child{border-bottom:0}
.sh-soru > .etiket{padding-top:7px}
.sh-soru > .etiket b{display:block;font-weight:600;font-size:13px}
/* `:not(.yardim)` ŞART: bu kural etiketin İÇİNDEKİ HER span'i blok yapıyordu,
   `?` rozeti de (inline-flex) ona takılıp alt satıra düşüyordu — özgüllük
   .sh-soru>.etiket span (0,0,2,1) > .yardim (0,0,1,0) (BULGULAR §139). */
.sh-soru > .etiket span:not(.yardim){display:block;font-size:11.5px;
                        color:var(--yazi3);margin-top:2px;line-height:1.4}
.sh-soru .cevap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sh-soru .cevap .giris{max-width:340px}
.sh-soru .cevap .giris.kisa{max-width:150px}

/* --- alt çubuk --- */
.sh-alt-cubuk{display:flex;gap:var(--b2);align-items:center;margin-top:var(--b4);
              padding-top:var(--b3);border-top:1px solid var(--cizgi)}
.sh-alt-cubuk .sag{margin-left:auto;display:flex;gap:var(--b2);align-items:center}

/* --- canlı durum şeridi --- */
.sh-durum{display:flex;gap:var(--b4);flex-wrap:wrap;align-items:center;
          background:var(--z1);border:1px solid var(--cizgi);border-radius:var(--r);
          padding:9px var(--b3);margin-bottom:var(--b3);font-size:12.5px}
.sh-durum b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--yazi)}
.sh-durum .ayrac{width:1px;height:16px;background:var(--cizgi2)}
.sh-durum .iyi{color:var(--yesil)}
.sh-durum .kotu{color:var(--kirmizi)}
.sh-durum .orta{color:var(--sari)}

/* --- liste kartları (kat / bölge / sistem) --- */
.sh-satir{display:flex;gap:var(--b3);align-items:center;padding:11px var(--b3);
          border:1px solid var(--cizgi);border-radius:var(--r);background:var(--z2);
          margin-bottom:8px}
.sh-satir .ad{font-weight:600;min-width:120px}
.sh-satir .bilgi{color:var(--yazi3);font-size:12px}
.sh-satir .sag{margin-left:auto;display:flex;gap:6px;align-items:center}
.sh-satir.eksik{border-color:#5e2733}
.sh-satir .kucuk-plan{flex:none;width:56px;height:44px;background:var(--z0);
          border:1px solid var(--cizgi);border-radius:5px}

/* --- kontrol listesi (düzelt düğmeli) --- */
.sh-hata{display:flex;gap:var(--b3);align-items:flex-start;padding:10px var(--b3);
         border-left:3px solid var(--kirmizi);background:var(--z2);border-radius:0 var(--r) var(--r) 0;
         margin-bottom:7px;font-size:12.5px;line-height:1.45}
.sh-hata.uyari{border-left-color:var(--sari)}
.sh-hata.bilgi{border-left-color:var(--turuncu,#e07b39)}
.sh-hata .metin{flex:1}
.sh-hata .neden{display:block;color:var(--yazi3);font-size:11.5px;margin-top:3px}
.sh-hata .btn{flex:none}
/* Başarı bildirimi: kaydetme sonrası "bir şey olmadı" hissini kaldırır. */
.sh-bilgi{display:flex;gap:var(--b3);align-items:flex-start;padding:10px var(--b3);
         border-left:3px solid var(--yesil,#22c55e);background:var(--z2);
         border-radius:0 var(--r) var(--r) 0;margin-bottom:7px;font-size:12.5px;
         line-height:1.45}

/* --- boş durum --- */
.sh-bos{text-align:center;padding:var(--b5) var(--b4);color:var(--yazi2);
        border:1px dashed var(--cizgi2);border-radius:var(--r2);background:var(--z1)}
.sh-bos .buyuk{font-size:15px;color:var(--yazi);font-weight:600;margin-bottom:6px}

/* --- sürükle-bırak alanı --- */
.sh-birak{border:2px dashed var(--cizgi2);border-radius:var(--r2);padding:var(--b5);
          text-align:center;background:var(--z1);cursor:pointer;transition:border-color .15s}
.sh-birak:hover,.sh-birak.uzerinde{border-color:var(--vurgu);background:var(--z2)}
.sh-birak .buyuk{font-size:15px;font-weight:600;color:var(--yazi)}
.sh-birak .kucuk{font-size:12px;color:var(--yazi3);margin-top:6px}

@media(max-width:960px){
  .sh{grid-template-columns:1fr}
  .sh-ray{position:static}
  .sh-soru{grid-template-columns:1fr;gap:6px}
}

/* ---------------------------------------------------------- KÜTÜPHANE SEÇİCİ
   İki katmanlı seçim: sık kullanılanlar açılır listede, tamamı bu panelde.
   (static/bep/kutuphane.js) */
.kt-panel{display:none;position:fixed;z-index:60;border:1px solid var(--cizgi2);
  border-radius:6px;background:var(--z1);padding:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.55)}
.kt-panel.acik{display:block}
.kt-arama{width:100%}
.kt-durum{font-size:12px;color:var(--yazi3);margin:6px 2px}
.kt-sonuc{max-height:260px;overflow:auto}
.kt-satir{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;
  background:none;border:0;border-radius:4px;color:var(--yazi);
  padding:6px 8px;cursor:pointer;font:inherit;font-size:13px}
.kt-satir:hover{background:var(--z2)}
.kt-etiket{flex:1}
.kt-ek{color:var(--yazi3);font-size:12px;white-space:nowrap}
/* Malzemenin ölçülen kullanım yeri: duvar / döşeme / çatı / tavan */
.kt-tur{color:var(--yazi3);font-size:11px;white-space:nowrap;
  border:1px solid var(--cizgi);border-radius:10px;padding:1px 7px}
.kt-ac{align-self:center;white-space:nowrap}
/* Sık kullanılan kayıt (resmî projelerde ölçülen kullanım) yeşil. */
.kt-satir.sik .kt-etiket{color:var(--yesil,#22c55e)}
.kt-satir.sik .kt-etiket::before{content:'● ';font-size:10px}
option.sik{color:#22c55e}
.sik-not{color:var(--yesil,#22c55e)}

/* ---------------------------------------------------------- alan yardımı */
/* "?" düğmesi ve açtığı balon. İçerik /api/yardim/<anahtar>/ ile gelir. */
.yardim{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;border:1px solid var(--cizgi);
  background:var(--kart2,#1b1e26);color:var(--soluk,#9aa1ad);
  font-size:11px;font-weight:700;cursor:pointer;margin-left:5px;
  user-select:none;line-height:1;vertical-align:middle}
.yardim:hover{border-color:var(--vurgu,#4c8dff);color:var(--vurgu,#4c8dff)}
.yardim-balon{position:fixed;z-index:9999;width:min(460px,calc(100vw - 24px));
  max-height:min(70vh,560px);overflow:auto;background:var(--kart,#171a21);
  border:1px solid var(--cizgi);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);font-size:13px;line-height:1.55}
.yardim-balon .y-bas{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 12px;border-bottom:1px solid var(--cizgi);
  position:sticky;top:0;background:var(--kart,#171a21)}
.yardim-balon .y-kapat{background:none;border:0;color:var(--soluk,#9aa1ad);
  font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.yardim-balon .y-kapat:hover{color:var(--yazi,#e6e8ec)}
.yardim-balon .y-govde{padding:10px 12px}
.yardim-balon p{margin:0 0 8px}
.yardim-balon ul{margin:0 0 8px 16px;padding:0}
.yardim-balon li{margin-bottom:4px}
.yardim-balon .y-kutu{overflow-x:auto;margin:10px 0}
.yardim-balon table{border-collapse:collapse;width:100%;font-size:12px}
.yardim-balon th,.yardim-balon td{padding:4px 8px;
  border-bottom:1px solid var(--cizgi);text-align:left;white-space:nowrap}
.yardim-balon th{color:var(--soluk,#9aa1ad);font-weight:600}
.yardim-balon td.sayi{text-align:right;font-variant-numeric:tabular-nums}
.yardim-balon .y-not{color:var(--soluk,#9aa1ad);font-size:11.5px;
  border-top:1px solid var(--cizgi);padding-top:8px;margin:10px 0 0}

/* ------------------------------------------- çizim: sağ tık menüsü */
/* Tarayıcının kendi menüsü çizimde işe yaramıyordu; yerine bağlama göre
   değişen komutlar. En üstte "bölge ekle ve çiz" var. */
.cz-menu{position:absolute;z-index:60;min-width:230px;padding:4px;
  background:var(--z0-saydam,rgba(23,26,33,.97));border:1px solid var(--cizgi);
  border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.5)}
.cz-menu-bas{padding:6px 10px 7px;font-size:11px;letter-spacing:.02em;
  color:var(--soluk,#9aa1ad);border-bottom:1px solid var(--cizgi);margin-bottom:4px}
.cz-menu-oge{display:flex;align-items:center;gap:9px;width:100%;
  padding:7px 10px;border:0;border-radius:7px;background:none;cursor:pointer;
  color:var(--yazi,#e6e8ec);font:inherit;font-size:13px;text-align:left}
.cz-menu-oge:hover{background:var(--kart2,#1b1e26)}
.cz-menu-oge.tehlike{color:var(--kirmizi,#f85149)}
.cz-menu-oge .i{width:16px;text-align:center;opacity:.85}
.cz-menu-oge .kis{margin-left:auto;font-size:11px;color:var(--soluk,#9aa1ad);
  font-family:var(--mono,Consolas,monospace)}
.cz-menu-ayirac{height:1px;background:var(--cizgi);margin:4px 6px}
.cz-giris input.etkin{border-color:var(--vurgu);
  box-shadow:0 0 0 2px var(--vurgu-halka)}
.cz-giris-onizleme{color:var(--vurgu);font-weight:600;
  font-family:var(--mono,Consolas,monospace);font-size:12px}

/* ------------------------------------------ çizim: sıradaki adım şeridi */
.cz-sonraki{position:absolute;left:50%;transform:translateX(-50%);
  bottom:var(--b3,14px);z-index:40;display:flex;align-items:center;gap:12px;
  padding:9px 12px;background:var(--z0-saydam,rgba(23,26,33,.96));
  border:1px solid var(--vurgu);border-radius:11px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:min(720px,92%)}
/* Ölçü kutusu açıkken şerit onun üstüne çıksın — üst üste biniyorlardı. */
.cz-sonraki.yukari{bottom:calc(var(--b3,14px) + 72px)}
.cz-sonraki .s-no{display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--vurgu);
  color:var(--vurgu-yazi);font-size:12px;font-weight:700;flex:0 0 auto;line-height:1}
.cz-sonraki .s-metin{display:flex;flex-direction:column;gap:1px;min-width:0}
.cz-sonraki .s-metin b{font-size:13px}
.cz-sonraki .s-metin span{font-size:11.5px;color:var(--soluk,#9aa1ad)}
/* sağ tık menüsünde adım durumu */
.cz-menu-oge .d{width:13px;text-align:center;font-size:11px;flex:0 0 auto}
.cz-menu-oge.d-bitti{opacity:.55}
.cz-menu-oge.d-bitti .d{color:var(--yesil,#3fb950)}
.cz-menu-oge.d-simdi{background:var(--vurgu-halka);font-weight:600}
.cz-menu-oge.d-simdi .d{color:var(--vurgu)}
.cz-menu-oge.d-bekliyor .d{color:var(--soluk,#9aa1ad)}

/* çizim: sınır ihlali uyarısı */
.cz-uyari{position:absolute;left:50%;transform:translateX(-50%);top:var(--b3,14px);
  z-index:45;display:flex;align-items:center;gap:12px;padding:9px 12px;
  background:var(--z0-saydam,rgba(23,26,33,.97));border:1px solid var(--kirmizi,#f85149);
  border-radius:11px;box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:min(760px,94%)}
.cz-uyari b{color:var(--kirmizi,#f85149);font-size:13px;white-space:nowrap}
.cz-uyari span{font-size:11.5px;color:var(--soluk,#9aa1ad)}

/* çalışma ekranı üst çubuğu: sihirbaza dönüş */
.cl-ust{display:flex;align-items:center;gap:12px;margin:4px 0 10px}
.cl-ust h2{font-size:19px}

/* kat satırındaki "no" girişi */
.kat-no{display:inline-flex;align-items:center;gap:4px;margin-left:6px;
  font-size:11px;color:var(--soluk,#9aa1ad)}
.kat-no input{width:52px;padding:2px 5px;font-family:var(--mono,Consolas,monospace);
  font-size:12px;text-align:center;background:var(--kart2,#1b1e26);
  color:var(--yazi,#e6e8ec);border:1px solid var(--cizgi);border-radius:6px}

/* çizim: bölge tipi şeridi (zon çizilirken üstte) */
.cz-zontip{position:absolute;left:50%;transform:translateX(-50%);top:var(--b3,14px);
  z-index:44;display:flex;align-items:center;gap:8px;padding:7px 11px;
  background:var(--z0-saydam,rgba(23,26,33,.97));border:1px solid var(--cizgi);
  border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.35);font-size:12px}
.cz-zontip>span:first-child{color:var(--soluk,#9aa1ad)}
.cz-zontip .kural{color:var(--soluk,#9aa1ad);font-size:11px}
.cz-cip{padding:4px 10px;border-radius:14px;border:1px solid var(--cizgi);
  background:var(--kart2,#1b1e26);color:var(--yazi,#e6e8ec);cursor:pointer;
  font:inherit;font-size:12px}
.cz-cip:hover{border-color:var(--vurgu)}
.cz-cip.secili{background:var(--vurgu);color:var(--vurgu-yazi);border-color:var(--vurgu)}

/* Çizimde bir nesneye tıklayınca açılan Özellikler kutusu: kullanıcı tipi
   sağ paneli aramadan, nesnenin üstünde değiştirsin. */
.cz-ozellik{position:absolute;z-index:60;width:288px;
  background:var(--z0-saydam,rgba(23,26,33,.98));border:1px solid var(--cizgi);
  border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.45);font-size:12px}
/* Başlık çubuğu SÜRÜKLEME KOLU (§174): kutu tıklanan yerin yanında açılıyor
   ve çoğu zaman bakılmak istenen yeri örtüyordu. */
.cz-ozellik .o-bas{display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px;border-bottom:1px solid var(--cizgi);
  cursor:move;user-select:none;touch-action:none}
.cz-ozellik .o-bas button{cursor:pointer}
.cz-ozellik .o-govde{padding:9px 10px;display:flex;flex-direction:column;gap:8px;
  max-height:340px;overflow:auto}
.cz-ozellik .o-satir{display:flex;flex-direction:column;gap:4px}
.cz-ozellik .o-etiket{color:var(--soluk,#9aa1ad);font-size:11px}
.cz-ozellik .o-cipler{display:flex;flex-wrap:wrap;gap:5px}
.cz-ozellik .o-onay{display:flex;align-items:center;gap:6px}
.cz-ozellik .o-not{color:var(--soluk,#9aa1ad);font-size:11px;line-height:1.4;
  border-top:1px solid var(--cizgi);padding-top:7px}
.cz-ozellik .o-adaylar{display:flex;gap:4px}
.cz-ozellik .o-adaylar .cz-cip{padding:2px 7px;font-size:10px}
.cz-ozellik.ortada{left:50%;top:50%;transform:translate(-50%,-50%);width:320px}

/* Yapı bileşenleri: PDF taslağı penceresi ve öğe tipi dağılımı (§77)
   NOT: ilk sürüm var(--kart) kullanıyordu — böyle bir değişken YOK, bu
   yüzden pencerenin arkası saydam kalıyordu. Yüzeyler --z1/--z2. */
.yb-pencere{width:min(1400px,94vw);max-height:88vh;padding:0;overflow:hidden;
  border:1px solid var(--cizgi2);border-radius:var(--r2);
  background:var(--z1);color:var(--yazi);
  box-shadow:0 24px 64px rgba(0,0,0,.6)}
.yb-pencere::backdrop{background:rgba(0,0,0,.72)}
/* Üç şerit: sabit başlık · KAYDIRILAN gövde · sabit ayak. Önce başlık
   position:sticky idi ve kaydırırken kayıyordu. */
/* height değil MAX-height: tek bileşenlik taslak için kocaman boş
   pencere açılmasın, yedi bileşende de ayak ekrandan taşmasın. */
.yb-pencere > form{display:flex;flex-direction:column;max-height:88vh;min-height:0}
.yb-pencere-bas{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  flex:0 0 auto;padding:12px 18px;background:var(--z2);
  border-bottom:1px solid var(--cizgi)}
.yb-pencere-govde{flex:1 1 auto;min-height:0;overflow-y:auto;
  overscroll-behavior:contain;padding:16px 18px}
.yb-pencere-govde .sh-kart{background:var(--z2)}
.yb-pencere-ayak{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  flex:0 0 auto;padding:12px 18px;background:var(--z2);
  border-top:1px solid var(--cizgi)}
.yb-ekle-satir{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}

/* Sayı kutularında yukarı/aşağı okları gizle (BULGULAR §102). Oklar hem
   yer kaplıyor hem kazara tıklanınca değeri sessizce değiştiriyordu; ayrıca
   kutunun üstünde tekerlek çevirmek de değeri değiştiriyor (o @wheel.prevent
   ile kapatıldı). */
.giris[type=number]{appearance:textfield;-moz-appearance:textfield}
.giris[type=number]::-webkit-outer-spin-button,
.giris[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}

/* 3B temsili görünüm penceresi (BULGULAR §107) */
.cz-uc3b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1100px,88vw);height:min(760px,84vh);z-index:40;
  background:var(--z1);border:1px solid var(--cizgi2);border-radius:var(--r2);
  box-shadow:0 24px 64px rgba(0,0,0,.6);display:flex;flex-direction:column}
.cz-uc3b .bas{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:10px 14px;background:var(--z2);border-bottom:1px solid var(--cizgi);
  border-radius:var(--r2) var(--r2) 0 0}
.cz-uc3b .govde{flex:1 1 auto;min-height:0;padding:10px;overflow:hidden}
.cz-uc3b .govde svg{display:block}

/* ---------- ONAY KUTUSU (BULGULAR §173) ----------
   Tarayıcının confirm() kutusunun yerine. Küçük, ortada, programın kendi
   diliyle. Perde arkayı karartıyor ki soru gözden kaçmasın. */
.bep-onay-perde{position:fixed;inset:0;z-index:10000;display:flex;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(3,7,14,.62);backdrop-filter:blur(3px);
  animation:bep-onay-gir .12s ease-out}
.bep-onay{background:var(--z1);border:1px solid var(--cizgi2);
  border-radius:12px;padding:20px 22px 16px;max-width:420px;width:100%;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  animation:bep-onay-kutu .14s cubic-bezier(.2,.9,.3,1.2)}
.bep-onay h2{font-size:15px;font-weight:650;color:var(--yazi);margin:0 0 6px}
.bep-onay p{font-size:13.5px;line-height:1.55;color:var(--yazi2);margin:0;
  white-space:pre-line}
.bep-onay-dugmeler{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.bep-onay-dugmeler button{font:inherit;font-size:13px;font-weight:600;
  padding:8px 16px;border-radius:8px;cursor:pointer;border:1px solid var(--cizgi2);
  background:var(--z2);color:var(--yazi2)}
.bep-onay-dugmeler button:hover{color:var(--yazi);border-color:var(--yazi3)}
.bep-onay-dugmeler button:focus-visible{outline:2px solid var(--vurgu);
  outline-offset:2px}
.bep-onay-evet{background:var(--vurgu);border-color:var(--vurgu);color:#fff}
.bep-onay-evet:hover{filter:brightness(1.1);color:#fff}
.bep-onay-evet.tehlike{background:#a1291f;border-color:#c0392b;color:#fff}
.bep-onay-evet.tehlike:hover{background:#c0392b;color:#fff}
@keyframes bep-onay-gir{from{opacity:0}to{opacity:1}}
@keyframes bep-onay-kutu{from{opacity:0;transform:translateY(8px) scale(.97)}
  to{opacity:1;transform:none}}
/* Hareket azaltma tercihi: kutu yine çıksın ama zıplamasın. */
@media (prefers-reduced-motion:reduce){
  .bep-onay-perde,.bep-onay{animation:none}
}

/* ---------- MEKANİK HAZIR SETLER (BULGULAR §176) ----------
   Seçim zincirini tek tıkla dolduran adlandırılmış setler. Alanların
   ÜSTÜNDE duruyor: kullanıcı önce "hangi sistem" desin, sonra ayrıntıya
   insin. Sessiz durur — otomatik bir şey yapmadığı belli olsun. */
.mk-setler{display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  margin:6px 0 10px;padding-left:12px;border-left:2px solid var(--cizgi2)}
.mk-set-etiket{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--yazi3);font-weight:600;margin-right:2px}
.mk-set-kaydet{margin-left:auto}

/* ---------- SAĞ PANEL: KATLANABİLİR BÖLÜMLER (BULGULAR §177) ----------
   Eskiden her bölüm hep açıktı; yalnız Yakalama 11 tam satır kaplıyor ve
   asıl iş gören "Çizilecek öğe" listesi en alta itiliyordu. */
.cz-bolum-bas{display:flex;align-items:center;justify-content:space-between;
  gap:8px;cursor:pointer;user-select:none;margin:14px 0 6px;padding:4px 2px;
  font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--yazi3);font-weight:600;border-bottom:1px solid var(--cizgi)}
.cz-bolum-bas:first-child{margin-top:0}
.cz-bolum-bas:hover{color:var(--yazi2)}
/* Ok, açık/kapalı durumu bir bakışta belli etsin. */
.cz-bolum-bas>span:first-child::before{content:"▾ ";font-size:11px}
.cz-bolum-bas.kapali>span:first-child::before{content:"▸ "}
/* Özet: bölümü AÇMADAN durumu görebilmek için. */
.cz-bolum-bas .ozet{text-transform:none;letter-spacing:0;font-weight:500;
  color:var(--yazi3);font-size:10.5px;font-family:var(--mono)}
.cz-bolum-bas:not(.kapali) .ozet{color:var(--cizgi2)}
/* Yakalama rozetleri: dokuz tür on bir satır yerine üç sıraya sığıyor. */
.cz-rozetler{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.cz-rozet{font:inherit;font-size:11px;padding:3px 7px;border-radius:6px;
  cursor:pointer;background:var(--z2);color:var(--yazi3);
  border:1px solid var(--cizgi)}
.cz-rozet:hover{border-color:var(--cizgi2);color:var(--yazi2)}
.cz-rozet.acik{color:var(--cam);border-color:#1d4b52;background:#0e2b30}
.cz-rozet:disabled{opacity:.35;cursor:not-allowed}