/* StemMaker Atölye – Laboratuvar */
.lab-intro{padding:32px 0 18px}
.lab-intro-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.lab-intro h1{margin-bottom:.25em}
.lab-intro h1::after{content:"";display:block;width:64px;height:5px;border-radius:5px;background:var(--orange);margin-top:14px}
.lab-intro .lead{margin:0;max-width:70ch}
.lab-small{display:none;align-items:center;gap:8px;margin:0;color:var(--muted);font-weight:700;font-size:.95rem}
.lab-wrap{padding:0 16px 56px}
.lab{max-width:1640px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;overflow:clip;display:flex;flex-direction:column}
.lab.is-full{position:fixed;inset:0;z-index:95;max-width:none;border-radius:0;margin:0}
body.lab-noscroll{overflow:hidden}
body.lab-noscroll .a11y,body.lab-noscroll .assistant{display:none}

/* Araç çubuğu */
.lab-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.lab-field{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem;color:var(--muted)}
.lab-select{font:700 .95rem var(--body);color:var(--text);background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:8px 30px 8px 10px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat;max-width:100%}
.lab-select:focus{outline:2px solid var(--blue);outline-offset:1px}
.lab-tabs{display:inline-flex;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:3px}
.lab-tabs button{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;font:800 .95rem var(--body);color:var(--muted);padding:7px 14px;border-radius:9px;cursor:pointer}
.lab-tabs button .ic{width:18px;height:18px}
.lab-tabs button.is-active{background:var(--navy);color:var(--surface)}
.lab-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.lab-run,.lab-stop{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:10px;padding:9px 16px;font:800 .98rem var(--body);cursor:pointer;color:#fff}
.lab-run{background:#1F8A4C}
.lab-run:hover{background:#176B3B}
.lab-stop{background:#C62828}
.lab-stop:hover{background:#9F1F1F}
.lab-stop:disabled{background:#B9C3CD;cursor:not-allowed}
.lab-run .ic,.lab-stop .ic{width:18px;height:18px}
.lab-status{font:700 .82rem ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);min-width:96px;text-align:center}
.lab-status[data-state="running"]{color:#1F8A4C;border-color:#9ED3B2}
.lab-status[data-state="running"]::before{content:"● ";animation:labblink 1s infinite}
@keyframes labblink{50%{opacity:.2}}
.lab-icon{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer}
.lab-icon .ic{width:20px;height:20px}
.lab-icon[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
#lab-mute .lab-mut{display:none}
#lab-mute[aria-pressed="true"] .lab-mut{display:inline}
#lab-mute[aria-pressed="true"] .lab-snd{display:none}

/* Izgara */
/* Laboratuvar ekran yüksekliğine sığar: sol editör tam boy, sağ sütun kendi içinde kayar */
.lab-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);height:calc(100vh - 79px - 70px - 44px);min-height:520px}
.lab.is-full .lab-grid{height:calc(100vh - 70px - 40px);min-height:0}
/* Editör sayfa kaydırılırken ekranda sabit kalır ve ekran yüksekliğini doldurur */
.lab-editor{position:relative;min-height:0;border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--surface)}
.lab-pane{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.lab-pane[hidden]{display:none}
.lab-blocks{flex:1;min-height:0}
.lab-tocode{position:absolute;right:16px;top:12px;z-index:5;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--surface);color:var(--navy);font:800 .9rem var(--body);padding:8px 12px;border-radius:10px;box-shadow:0 6px 16px rgba(15,36,56,.12);cursor:pointer}
.lab-tocode:hover{border-color:var(--navy)}
.lab-tocode .ic{width:18px;height:18px}
#lab-code-wrap .CodeMirror{flex:1;height:auto;min-height:0;font:14px/1.55 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;background:#FBFCFE}
.CodeMirror-gutters{background:#F1F5F9;border-right:1px solid var(--line)}
.lab-errline{background:#FDE8E8!important}
.lab-error{margin:0;padding:10px 14px;background:#FDECEC;color:#8A1C1C;border-bottom:1px solid #F5C2C2;font-weight:700;font-size:.95rem}
.lab-error[hidden]{display:none}

/* Sağ taraf */
.lab-side{display:flex;flex-direction:column;gap:14px;padding:14px;background:var(--bg);min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}
.lab-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px;min-width:0}
.lab-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.lab-card-head h2{font:800 .8rem/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-2);margin:0}
.lab-stage svg{display:block;width:100%;height:auto;background:#F7FAFC;background-image:radial-gradient(#D5DFE8 1px,transparent 1px);background-size:20px 20px;border-radius:12px;touch-action:none;user-select:none}
.lab-stage svg.is-dragging{cursor:grabbing}
.lab-drag{cursor:grab}
.lab-press{cursor:pointer}
.lab-ctext{font:800 15px var(--body);fill:#13202E}
.lab-cval{font:700 13px ui-monospace,Menlo,Consolas,monospace;fill:#4B5C6E}
.lab-hint{margin:8px 2px 0;font-size:.85rem;color:var(--muted);line-height:1.45}
.lab-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:0}
.lab-add{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.lab-add button{border:1.5px dashed #B9C7D6;background:var(--surface);color:var(--navy-2);font:800 .82rem var(--body);padding:6px 9px;border-radius:9px;cursor:pointer}
.lab-add button:hover{border-style:solid;border-color:var(--orange);color:var(--orange-d)}
.lab-comps{list-style:none;display:grid;gap:8px;max-height:300px;overflow:auto}
.lab-empty{color:var(--muted);font-size:.9rem;margin:0}
.lab-ci{border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.lab-ci-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.lab-ci-head strong{font-size:.92rem;flex:1}
.lab-ci-dot{width:12px;height:12px;border-radius:50%;flex:none}
.lab-ci-del{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer}
.lab-ci-del:hover{color:#C62828;border-color:#C62828}
.lab-ci-row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.lab-ci-row label{display:flex;flex-direction:column;gap:2px;font-size:.75rem;font-weight:800;color:var(--muted)}
.lab-ci-row .lab-select{font-size:.85rem;padding:5px 26px 5px 8px}
.lab-range{flex:1;min-width:120px}
.lab-range input{width:100%;accent-color:var(--orange)}
.lab-hold{border:0;background:var(--orange);color:#fff;font:800 .82rem var(--body);padding:7px 10px;border-radius:8px;cursor:pointer;user-select:none;touch-action:none}
.lab-hold.is-on{background:var(--orange-d)}
.lab-serial-card{display:flex;flex-direction:column}
.lab-serial{flex:1;margin:0;min-height:160px;max-height:340px;overflow:auto;background:#0F1A26;color:#B9F6CA;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;padding:10px 12px;border-radius:10px;white-space:pre-wrap;word-break:break-word}
.lab-warn{color:#FFD58A}
.lab-mini{border:1px solid var(--line);background:var(--surface);color:var(--muted);font:700 .8rem var(--body);padding:4px 9px;border-radius:8px;cursor:pointer}
.lab-note{margin:0;padding:10px 16px;font-size:.84rem;color:var(--muted);border-top:1px solid var(--line);background:var(--surface-2)}
.lab-soon{margin-top:24px}

/* Blockly yerleşimi */
.lab .blocklyToolboxDiv{background:#F1F5F9;border-right:1px solid var(--line)}
.lab .blocklyTreeRow{border-radius:0 10px 10px 0;margin-bottom:2px}
.lab .blocklyMainBackground{stroke:none}

@media (max-width:1240px){
  .lab-two{grid-template-columns:1fr}
}
@media (max-width:1100px){
  .lab-grid{grid-template-columns:1fr;height:auto;min-height:0}
  .lab-editor{height:560px;border-right:0;border-bottom:1px solid var(--line)}
  .lab-side{overflow:visible}
  .lab-two{grid-template-columns:1fr 1fr}
  .lab.is-full{overflow:auto}
}
@media (max-width:720px){
  .lab-small{display:flex}
  .lab-wrap{padding:0 8px 40px}
  .lab-bar{gap:10px}
  .lab-actions{margin-left:0;width:100%}
  .lab-two{grid-template-columns:1fr}
  .lab-editor{height:480px}
}
html.a11y-dark .lab-stage svg{background-color:#16222F;background-image:radial-gradient(#2C3F54 1px,transparent 1px)}
html.a11y-dark .lab-ctext{fill:#E7EEF5}
html.a11y-dark .lab-cval{fill:#AFC0D0}
html.a11y-dark #lab-code-wrap .CodeMirror{background:#101B27;color:#E7EEF5}
html.a11y-dark .CodeMirror-gutters{background:#16222F}

body.page-lab .assistant-label{display:none}
.lab .blocklyTreeLabel{color:#13202E}
.lab-icon[aria-pressed="true"]{color:var(--surface)}

/* Adımlar laboratuvarın üstünde, kısa */
.lab-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lab-steps li{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:.92rem;color:var(--muted);line-height:1.45}
.lab-steps span{flex:none;width:24px;height:24px;border-radius:50%;background:var(--orange);color:#fff;font:800 .8rem/24px var(--body);text-align:center}
/* Sayfa laboratuvara yaklaşınca onu ekrana tam oturtur */
@media (max-width:900px){.lab-steps{grid-template-columns:1fr}}
/* Editör araçları ve devre modları */
.lab-editor-tools{position:absolute;right:16px;top:12px;z-index:5;display:flex;gap:8px}
.lab-tool{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--surface);color:var(--navy);font:800 .88rem var(--body);padding:7px 11px;border-radius:10px;box-shadow:0 6px 16px rgba(15,36,56,.12);cursor:pointer}
.lab-tool:hover{border-color:var(--navy)}
.lab-tool .ic{width:17px;height:17px}
#lab-clear-blocks:hover{border-color:#C62828;color:#C62828}
.lab-circuit-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lab-seg{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;padding:2px;background:var(--surface)}
.lab-seg button{border:0;background:transparent;font:800 .82rem var(--body);color:var(--muted);padding:5px 10px;border-radius:8px;cursor:pointer}
.lab-seg button.is-active{background:var(--orange);color:#fff}
#lab-clear-circuit:hover{border-color:#C62828;color:#C62828}
.lab-pt{cursor:crosshair}
.lab-pt:hover{fill:rgba(46,134,171,.35)}
.lab-wire{cursor:pointer}
.lab-wire:hover .lab-wire-line{stroke-width:6;filter:brightness(1.15)}
.lab-conn{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:700;padding:3px 8px;border-radius:999px;border:1px solid}
.lab-conn b{font-weight:800}
.lab-conn.ok{color:#1F6B3B;border-color:#A8D8B9;background:#EEF8F1}
.lab-conn.no{color:#9A3412;border-color:#F5C6A5;background:#FFF4EC}
.lab-ci .lab-ci-row + .lab-ci-row{margin-top:6px}
@media (max-width:720px){.lab-editor-tools{flex-direction:column;align-items:flex-end}}

/* Masaüstünde laboratuvar bir uygulama gibi: sayfa kaymaz, laboratuvar ekranın kalanını doldurur */
@media (min-width:1101px){
  html:has(body.page-lab),body.page-lab{height:100%;overflow:hidden}
  body.page-lab{display:flex;flex-direction:column}
  body.page-lab #main{flex:1;min-height:0;display:flex;flex-direction:column}
  body.page-lab .lab-intro{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  body.page-lab .trust,body.page-lab .site-footer{display:none}
  body.page-lab .lab-wrap{flex:1;min-height:0;display:flex;padding:10px 12px 12px}
  body.page-lab .lab{flex:1;min-height:0;width:100%;max-width:none}
  body.page-lab .lab-grid{flex:1;height:auto;min-height:0}
  body.page-lab .lab.is-full .lab-grid{height:auto}
}
.lab{position:relative}
.lab-note{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lab-legal a{color:var(--muted)}
.lab-legal a:hover{color:var(--orange-d)}
.lab-helpbox{position:absolute;right:16px;top:64px;z-index:20;width:min(420px,calc(100% - 32px));background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(15,36,56,.24);padding:16px 18px}
.lab-helpbox[hidden]{display:none}
.lab-helpbox h2{font:800 1rem var(--body);margin:0 0 8px}
.lab-helpbox ol{margin:0 0 8px;padding-left:1.2em;color:var(--muted);font-size:.92rem;display:grid;gap:6px}
.lab-helpbox p{margin:0;font-size:.85rem;color:var(--muted)}
#lab-help[aria-expanded="true"]{background:var(--navy);color:var(--surface);border-color:var(--navy)}
@media (min-width:1101px){
  body.page-lab .lab-note{flex-wrap:nowrap;padding:8px 100px 8px 84px;align-items:center}
  body.page-lab .lab-note>span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.page-lab .lab-legal{white-space:nowrap;flex:none}
}

/* Devre yakınlaştırma */
.lab-stagebox{position:relative}
.lab-zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}
.lab-zoom button{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--navy);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px rgba(15,36,56,.12)}
.lab-zoom button:hover{border-color:var(--navy)}
.lab-zoom .ic{width:18px;height:18px}
.lab-stage svg{cursor:grab}
.lab-stage svg.is-panning{cursor:grabbing}