/* ============================================================
   NORA Çevre — BEKRA teknik çizim örneği (BETA)
   Ana sayfa (#teknik-cizim) ve SEVESO/BEKRA hizmet sayfası aynı dosyayı kullanır.
   Her şey .bcz altında kapsamlıdır; sitenin diğer stilleriyle çakışmaz.
   Yazı tipleri: Barlow Condensed (başlık), IBM Plex Mono (etiket/etiket kodları) — assets/fonts/, SIL OFL 1.1.
   Gövde metni sitenin kendi yazı tipidir (Inter).
   Kaynak: onizleme/bekra-cizim-kaynak/ (gen.py + uygulama.js + site_build.py).
   ============================================================ */

@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-ext-600.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-ext-400.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-ext-500.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- bölüm başlığındaki parçalar (sayfada, JS yüklenmeden de görünür) ---------- */
.bcz-rozet{display:inline-block;margin-bottom:var(--bo-3);font-size:9.5px;font-weight:800;letter-spacing:.9px;
  padding:5px 10px;border-radius:999px;color:var(--nane);background:rgba(62,230,160,.08);border:1px solid rgba(62,230,160,.3)}
.bcz-yontem{margin-top:var(--bo-3);font-size:12.5px;letter-spacing:.2px;color:var(--metin-silik)}
.bcz-alt{margin-top:var(--bo-5)}

/* ---------- kapsayıcı ---------- */
.bcz{
  --paper:#e5ece7;
  --sheet:#f4f8f5;
  --ink:#0e2230;
  --ink2:#3d5565;
  --signal:#2a6f97;
  --protect:#0b7a57;
  --protect-soft:#cfe9dc;
  --hazard:#c62a1f;
  --hazard-soft:#f6d8d3;
  --f-display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Consolas,'Courier New',monospace;
  position:relative;min-height:420px;
}
.bcz-yer{padding:var(--bo-7) 0;text-align:center;font-size:13px;color:var(--metin-silik)}

/* ---------- pafta ---------- */
.bcz-sheet{background:var(--sheet);color:var(--ink);font:400 15px/1.5 var(--f-body);border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);box-shadow:0 30px 70px -28px rgba(0,0,0,.65)}
.bcz :focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.bcz-bar{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(14,34,48,.16)}
.bcz-grp{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bcz-grp.bcz-r{margin-left:auto}
.bcz-grp.bcz-pg{margin-right:4px}
.bcz-lab{font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin-right:6px}
.bcz-chip{font:500 12.5px/1 var(--f-mono);letter-spacing:.04em;padding:9px 12px;min-height:36px;background:transparent;border:1px solid rgba(14,34,48,.5);color:var(--ink);cursor:pointer;border-radius:2px;transition:background .15s,color .15s,border-color .15s}
.bcz-chip:hover{background:rgba(14,34,48,.07)}
.bcz-chip[aria-pressed=true]{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.bcz-chip.bcz-pr[aria-pressed=true]{background:var(--signal);border-color:var(--signal);color:#fff}
.bcz-chip.bcz-lay[aria-pressed=true]{background:var(--protect);border-color:var(--protect);color:#fff}
.bcz-chip.bcz-lay::before{content:"";display:inline-block;width:8px;height:8px;border:1.5px solid currentColor;margin-right:8px;vertical-align:baseline;background:transparent}
.bcz-chip.bcz-lay[aria-pressed=true]::before{background:#fff;border-color:#fff}
.bcz-pan{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bcz .pid{display:block;width:100%;height:auto;min-width:860px}
.bcz .pid[hidden]{display:none}
.bcz-risk{display:none;width:100%;align-items:center;gap:10px;font:500 12px/1.3 var(--f-mono);letter-spacing:.03em;color:var(--ink2)}
.bcz-risk .bcz-rb{color:#fff;font-weight:600;letter-spacing:.08em;padding:5px 8px;transition:background .4s}
.bcz-hint{display:none;font:500 11px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);padding:8px 14px 0}

/* ---------- çizim içi ---------- */
.bcz .pid text{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em;fill:var(--ink)}
.bcz .pid .disp{font-family:var(--f-display);font-weight:600;letter-spacing:.03em}
.bcz .pid .mut{fill:var(--ink2)}
.bcz .pid .frame{fill:none;stroke:var(--ink);stroke-width:1.2}
.bcz .pid .frame.o{stroke-width:.8}
.bcz .pid .zone{font-size:8.5px;fill:var(--ink2);text-anchor:middle;dominant-baseline:central}
.bcz .pid .eq{fill:var(--sheet);stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.bcz .pid .pipe{fill:none;stroke:var(--ink);stroke-width:3}
.bcz .pid .pipe.th{stroke-width:2}
.bcz .pid .thin{fill:none;stroke:var(--ink);stroke-width:1.1}
.bcz .pid .dim{fill:none;stroke:var(--ink2);stroke-width:1}
.bcz .pid .sig{fill:none;stroke:var(--signal);stroke-width:1.3;stroke-dasharray:5 4}
.bcz .pid .bub{fill:var(--sheet);stroke:var(--signal);stroke-width:1.4}
.bcz .pid .bubl{fill:none;stroke:var(--signal);stroke-width:1.1}
.bcz .pid .bt{font-size:7.5px;text-anchor:middle;fill:var(--signal);dominant-baseline:central;letter-spacing:0}
.bcz .pid .vv{fill:var(--sheet);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.bcz .pid .arrow{fill:var(--ink)}
.bcz .pid .liq{fill:rgba(42,111,151,.13);stroke:none}
.bcz .pid .lvl{fill:none;stroke:var(--signal);stroke-width:1.1}
.bcz .pid .wall{fill:rgba(14,34,48,.16);stroke:var(--ink);stroke-width:1.4}
.bcz .pid .jk{fill:rgba(42,111,151,.13);stroke:var(--ink);stroke-width:1}
.bcz .pid .wsr{fill:none;stroke:var(--signal);stroke-width:1.3;stroke-dasharray:4 3}
.bcz .pid .particle{fill:var(--signal);opacity:0;transition:opacity .6s 2.6s}
.bcz .pid.drawn .particle{opacity:.9}
.bcz .pid .a{text-anchor:middle}
.bcz .pid .b{font-weight:500}
.bcz .pid .big{font-size:20px}
.bcz .pid .mid{font-size:15px}

/* koruma katmanları */
.bcz .pid .lay.on .bub,.bcz .pid .lay.on .vv,.bcz .pid .lay.on .wall{stroke:var(--protect);fill:var(--protect-soft)}
.bcz .pid .lay.on .sig,.bcz .pid .lay.on .bubl,.bcz .pid .lay.on .wsr,.bcz .pid .lay.on .dim,.bcz .pid .lay.on .thin{stroke:var(--protect)}
.bcz .pid .lay.on .bt,.bcz .pid .lay.on text{fill:var(--protect)}
.bcz .pid .lay .bub,.bcz .pid .lay .vv,.bcz .pid .lay .wall,.bcz .pid .lay .sig,.bcz .pid .lay text{transition:fill .35s,stroke .35s}
/* tehlike bölgesi */
.bcz .pid .hz{fill:var(--hazard-soft);fill-opacity:.55;stroke:var(--hazard);stroke-width:1.4;stroke-dasharray:6 4;opacity:0;transition:opacity .3s}
.bcz .pid .hz.on{opacity:1}
/* düğümler */
.bcz .pid .node{cursor:pointer;outline:none}
.bcz .pid .node .disc{fill:var(--ink);stroke:var(--sheet);stroke-width:2.4;transition:fill .2s}
.bcz .pid .node text{fill:var(--sheet);font:600 10px var(--f-mono);letter-spacing:.02em;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.bcz .pid .node .ring{fill:none;stroke:var(--hazard);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.bcz .pid .node .foc{fill:none;stroke:var(--signal);stroke-width:2.4;stroke-dasharray:3 3;opacity:0}
.bcz .pid .node:focus-visible .foc{opacity:1}
.bcz .pid .node.sel .disc{fill:var(--hazard)}
.bcz .pid .node:hover .disc{fill:#17384d}
.bcz .pid .node.sel:hover .disc{fill:var(--hazard)}
.bcz .pid.hint .node:not(.sel) .ring{animation:bcz-pulse 2.6s ease-out infinite}
.bcz .pid.hint .node[data-n="2"] .ring{animation-delay:.5s}
.bcz .pid.hint .node[data-n="3"] .ring{animation-delay:1s}
@keyframes bcz-pulse{0%{transform:scale(1);opacity:.75}100%{transform:scale(2.2);opacity:0}}

/* risk matrisi (çizimin içinde) */
.bcz .pid .mxc{stroke:#f4f8f5;stroke-width:1.2}
.bcz .pid .dotg{transition:transform .65s cubic-bezier(.45,0,.15,1)}
.bcz .pid .dotg .halo{transition:fill .4s}
.bcz .pid .dotg .core{stroke:#fff;stroke-width:1.8;transition:fill .4s}
.bcz .pid .chipbg{transition:fill .4s}
.bcz .pid .chiptx{fill:#fff;font-weight:600;font-size:9px;letter-spacing:.08em}

/* çizilme efekti (JS çalışırsa) */
.bcz.bcz-js .pid .draw{stroke-dasharray:1;stroke-dashoffset:1}
.bcz.bcz-js .pid.drawn .draw{stroke-dashoffset:0;transition:stroke-dashoffset 1.25s cubic-bezier(.55,.05,.2,1) var(--d,0s)}
.bcz.bcz-js .pid .fade{opacity:0}
.bcz.bcz-js .pid.drawn .fade{opacity:1;transition:opacity .6s ease var(--d,0s)}

/* ---------- HAZOP kartı ---------- */
.bcz-card{border-top:1px solid rgba(14,34,48,.22);padding:clamp(16px,2.2vw,26px)}
.bcz-card h3{margin:0;font:600 clamp(26px,3vw,36px)/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.bcz-sub{margin:0 0 6px;font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.bcz-ncode{display:inline-block;font:600 12px/1 var(--f-mono);background:var(--hazard);color:#fff;padding:5px 7px;margin-right:10px;vertical-align:middle;letter-spacing:.04em}
.bcz-devs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 16px}
.bcz-dev{font:500 12.5px/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;padding:10px 12px;min-height:38px;background:transparent;border:1px solid rgba(14,34,48,.5);color:var(--ink);cursor:pointer;border-radius:2px}
.bcz-dev:hover{background:rgba(14,34,48,.07)}
.bcz-dev[aria-pressed=true]{background:var(--hazard);border-color:var(--hazard);color:#fff}
.bcz-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--ink)}
.bcz-col{padding:14px 14px 4px 0;position:relative}
.bcz-col+.bcz-col{padding-left:18px;border-left:1px solid rgba(14,34,48,.25)}
.bcz-col+.bcz-col::before{content:"";position:absolute;left:-5px;top:14px;width:9px;height:9px;border-top:1.5px solid var(--ink);border-right:1.5px solid var(--ink);transform:rotate(45deg);background:var(--sheet)}
.bcz-col h4{margin:0 0 8px;font:500 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.bcz-col.bcz-k h4{color:var(--protect)}
.bcz-col ul{margin:0;padding:0;list-style:none}
.bcz-col li{font-size:14.5px;line-height:1.45;margin:0 0 9px;padding-left:12px;position:relative}
.bcz-col li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1.5px;background:var(--ink)}
.bcz-col.bcz-k li::before{background:var(--protect)}
.bcz-col.bcz-k li small{font:500 11px/1 var(--f-mono);letter-spacing:.03em;color:var(--ink2)}
.bcz-col.bcz-k li.bcz-cr{transition:color .25s}
.bcz-col.bcz-k li.bcz-cr.on{color:#075c42;font-weight:600}
.bcz-rec{margin:8px 0 0;padding:12px 14px;background:rgba(11,122,87,.09);border-left:3px solid var(--protect);font-size:14.5px}
.bcz-rec b{font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--protect);display:block;margin-bottom:5px}
.bcz-note{margin:14px 0 0;font:500 11px/1.45 var(--f-mono);letter-spacing:.04em;color:var(--ink2)}
.bcz-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bcz-foot{margin:var(--bo-4) 0 0;max-width:68ch;font-size:12.5px;line-height:1.55;color:var(--metin-silik)}

@media (max-width:720px){
  .bcz-hint{display:block}
  .bcz-risk{display:flex;flex-wrap:wrap}
  .bcz-cols{grid-template-columns:1fr}
  .bcz-col+.bcz-col{padding-left:0;border-left:0;border-top:1px solid rgba(14,34,48,.25);margin-top:6px}
  .bcz-col+.bcz-col::before{display:none}
  .bcz-grp.bcz-r{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .bcz *,.bcz *::before,.bcz *::after{animation:none!important;transition:none!important}
  .bcz.bcz-js .pid .draw{stroke-dashoffset:0}
  .bcz.bcz-js .pid .fade{opacity:1}
  .bcz .pid .particle{display:none}
}