/* SİSTEM // H04 — shared cyber-brutalist activity skin.
   Content and interaction remain owned by each activity. */
.system-h04{
  --system-paper:#f4f1ea;
  --system-ink:#101723;
  --system-wine:#8e2f3f;
  --system-purple:#7548f5;
  --system-lime:#c9f227;
  --system-line:#b9b7b0;
  --system-grid:#10172312;
  --system-panel:#fffef9;
  --paper:var(--system-paper);
  --ink:var(--system-ink);
  --wine:var(--system-wine);
  --line:var(--system-line);
  --white:var(--system-panel);
  background-color:var(--system-paper);
  background-image:
    linear-gradient(var(--system-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--system-grid) 1px,transparent 1px);
  background-size:32px 32px;
}
.system-h04::before{
  content:'SYS.TIME  //  STATUS: MERAK AKTİF  //  NODE: H04';
  position:fixed;
  z-index:-1;
  inset:auto 18px 8px auto;
  color:#10172356;
  font:500 9px 'IBM Plex Mono',monospace;
  letter-spacing:.8px;
}
.system-h04 button,.system-h04 select{border-radius:0}
.system-h04 button:focus-visible,.system-h04 a:focus-visible,.system-h04 summary:focus-visible{
  outline:3px solid var(--system-purple);
  outline-offset:3px;
}
.system-h04 .masthead{
  min-height:76px;
  border-top:1px solid var(--system-ink);
  border-bottom:1px solid var(--system-ink);
  background:#f4f1eae8;
  position:relative;
}
.system-h04 .masthead::after{
  content:'SCN: 0004';
  position:absolute;
  right:0;
  bottom:-17px;
  font:500 9px 'IBM Plex Mono',monospace;
  letter-spacing:.7px;
}
.system-h04 .brand{font-family:'IBM Plex Mono',monospace;font-size:20px;letter-spacing:-1px;text-transform:uppercase}
.system-h04 .board-title{
  font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
  font-weight:700;
  letter-spacing:-.35px;
  text-transform:uppercase;
}
.system-h04 .board-title b{color:var(--system-wine)}
.system-h04 .board-title i{
  margin-left:14px;
  color:var(--system-purple);
  font:600 11px 'IBM Plex Mono',monospace;
  letter-spacing:.8px;
}
.system-h04 .text-button,.system-h04 #mode{
  border:1px solid var(--system-ink);
  background:var(--system-panel);
  color:var(--system-ink);
  padding:10px 13px;
  font-family:'IBM Plex Mono',monospace;
  font-weight:500;
}
.system-h04 .text-button:hover:not(:disabled),.system-h04 #mode:hover{
  background:var(--system-lime);
  border-color:var(--system-ink);
}
.system-h04 .intro h1{
  max-width:780px;
  font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:-2px;
}
.system-h04 .intro h1 em{color:var(--system-wine)}
.system-h04 .eyebrow,.system-h04 .mono{font-family:'IBM Plex Mono',monospace}
.system-h04 .eyebrow{color:var(--system-purple)}
.system-h04 .mission{border-left:1px solid var(--system-ink)}
.system-h04 .mission>.mono{color:var(--system-purple)}
.system-h04 .mission svg{stroke:var(--system-purple)}
.system-h04 .desk{
  border:1px solid var(--system-ink);
  border-radius:0;
  box-shadow:none;
  background:#fffef9ee;
  position:relative;
  overflow:hidden;
}
.system-h04 .desk::before{
  content:'';
  position:absolute;
  z-index:4;
  top:-1px;
  right:-1px;
  width:25px;
  height:25px;
  background:linear-gradient(45deg,transparent 48%,var(--system-ink) 49%,var(--system-ink) 52%,var(--system-paper) 53%);
  pointer-events:none;
}
.system-h04 .desk-top{
  min-height:84px;
  border-bottom:1px solid var(--system-ink);
  background:var(--system-panel);
  position:relative;
}
.system-h04 .desk-top::after{
  content:'STATUS / INPUT READY';
  position:absolute;
  left:30px;
  bottom:7px;
  color:#10172378;
  font:500 8px 'IBM Plex Mono',monospace;
  letter-spacing:.8px;
}
.system-h04 .desk h2,.system-h04 .notebook h2{
  font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.2px;
}
.system-h04 .progress-wrap{
  color:var(--system-ink);
  font-family:'IBM Plex Mono',monospace;
  text-transform:uppercase;
}
.system-h04 progress,.system-h04.board-mode progress{height:11px;border:1px solid var(--system-ink);background:#e2e0d9;border-radius:0;overflow:hidden}
.system-h04 progress::-webkit-progress-bar,.system-h04.board-mode progress::-webkit-progress-bar{background:#e2e0d9}
.system-h04 progress::-webkit-progress-value,.system-h04.board-mode progress::-webkit-progress-value{background:var(--system-lime)}
.system-h04 progress::-moz-progress-bar{background:var(--system-lime)}
.system-h04 .workspace{
  background-image:
    linear-gradient(#1017230b 1px,transparent 1px),
    linear-gradient(90deg,#1017230b 1px,transparent 1px);
  background-size:24px 24px;
}
.system-h04 .evidence-area,.system-h04.board-mode .evidence-area{
  background:var(--system-panel);
  border:2px solid var(--system-ink);
  border-radius:0;
  box-shadow:10px 10px 0 var(--system-purple);
  isolation:auto;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  transform:none;
}
.system-h04.board-mode .evidence-area>*{transform:none}
.system-h04.board-mode .evidence-area::before{
  content:'X_36.1749  Y_86.7676';
  position:absolute;
  z-index:2;
  inset:auto 13px 9px auto;
  border:0;
  background:transparent;
  color:#10172370;
  font:500 8px 'IBM Plex Mono',monospace;
  transform:none;
}
.system-h04.board-mode .evidence-area::after{display:none}
.system-h04 .case-label,.system-h04 .lab-card-label,
.system-h04.board-mode .case-label,.system-h04.board-mode .lab-card-label{
  display:block;
  position:absolute;
  z-index:3;
  left:18px;
  top:15px;
  padding:7px 12px;
  border:1px solid var(--system-ink);
  border-radius:0;
  background:var(--system-ink);
  color:var(--system-lime);
  box-shadow:none;
  font:600 11px 'IBM Plex Mono',monospace;
  letter-spacing:.8px;
}
.system-h04.board-mode .card-top{padding-left:128px}
.system-h04 .card-top{color:var(--system-ink);font-family:'IBM Plex Mono',monospace}
.system-h04 .drag-hint{color:var(--system-purple);font-weight:600}
.system-h04 .evidence{border-radius:0}
.system-h04 .evidence[aria-pressed=true]{
  outline:4px solid var(--system-lime);
  outline-offset:-4px;
  background:#fbffe9;
}
.system-h04 .illustration{
  background-image:radial-gradient(circle,#10172332 1px,transparent 1.5px);
  background-size:10px 10px;
}
.system-h04 .illustration .wash{fill:#7548f518}
.system-h04 .illustration .accent{stroke:var(--system-purple)}
.system-h04 #card-text{
  font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
  font-weight:700;
  letter-spacing:-.25px;
}
.system-h04 .select-hint{
  display:inline-block;
  color:var(--system-ink);
  background:var(--system-lime);
  padding:5px 9px;
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;
}
.system-h04 .card-nav{border-top:1px solid var(--system-ink);color:var(--system-ink);font-family:'IBM Plex Mono',monospace}
.system-h04 .card-nav button{border:1px solid var(--system-ink);border-radius:0;background:var(--system-panel)}
.system-h04 .card-nav button:hover:not(:disabled){background:var(--system-lime);border-color:var(--system-ink)}
.system-h04 .decision-area>p:first-child{
  color:var(--system-ink);
  font-family:'IBM Plex Mono',monospace;
  text-transform:uppercase;
}
.system-h04 .destination,.system-h04.board-mode .destination,
.system-h04.board-mode .category-grid .destination{
  position:relative;
  overflow:hidden;
  background:var(--system-panel);
  border:1px solid var(--system-ink);
  border-left-width:8px;
  border-radius:0;
  box-shadow:none;
  transform:none;
}
.system-h04 .destination::after{
  content:'↗';
  position:absolute;
  right:-1px;
  top:-1px;
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border:1px solid var(--system-ink);
  background:var(--system-panel);
  font:600 13px 'IBM Plex Mono',monospace;
}
.system-h04 .destination:hover,.system-h04 .destination.over,
.system-h04.board-mode .destination:hover,.system-h04.board-mode .destination.over,
.system-h04.board-mode .category-grid .destination:hover,.system-h04.board-mode .category-grid .destination.over{
  background:#f7ffd8;
  border-color:var(--system-ink);
  box-shadow:6px 6px 0 var(--system-lime);
  transform:translate(-3px,-3px);
  filter:none;
}
.system-h04 .destination strong{
  font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
  font-weight:700;
  text-transform:uppercase;
}
.system-h04 .destination small{color:#3f4650}
.system-h04 .destination .zone-icon,.system-h04.board-mode .destination .zone-icon{
  color:var(--system-ink)!important;
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;
}
.system-h04 .destination .key,.system-h04.board-mode .destination .key{
  border:1px solid var(--system-ink);
  border-radius:0;
  background:var(--system-ink);
  color:var(--system-panel);
}
.system-scan .destination[data-choice=ai]{border-left-color:var(--system-purple)}
.system-scan .destination[data-choice=plain]{border-left-color:var(--system-ink)}
.system-scan .destination[data-choice=discuss]{border-left-color:var(--system-wine);border-style:solid}
.system-map .category-grid [data-choice=definition]{border-color:var(--system-ink);border-left-color:var(--system-purple);background:var(--system-panel)}
.system-map .category-grid [data-choice=features]{border-color:var(--system-ink);border-left-color:#397ee8;background:var(--system-panel)}
.system-map .category-grid [data-choice=examples]{border-color:var(--system-ink);border-left-color:#55a86a;background:var(--system-panel)}
.system-map .category-grid [data-choice=nonexamples]{border-color:var(--system-ink);border-left-color:var(--system-wine);background:var(--system-panel)}
.system-h04 .keyboard-note{color:#10172380;font-family:'IBM Plex Mono',monospace}
.system-h04 .lab-model{gap:0;border:1px solid var(--system-ink)}
.system-h04 .lab-model span{
  min-width:0;
  border:0;
  border-right:1px solid var(--system-ink);
  border-radius:0;
  background:#e6e3dc;
  color:var(--system-ink);
  text-transform:uppercase;
}
.system-h04 .lab-model span:last-child{border-right:0}
.system-h04 .lab-model span.is-filled{background:var(--system-purple);color:white;border-color:var(--system-ink)}
.system-h04 .lab-model span.is-complete{background:var(--system-lime);color:var(--system-ink);transform:none}
.system-h04 .board-response,.system-h04.board-mode .board-response{
  position:relative;
  padding:34px;
  border:2px solid var(--system-ink);
  border-radius:0;
  background:var(--system-panel);
  box-shadow:10px 10px 0 var(--system-lime);
}
.system-h04 .board-response::after{
  content:'TARAMA SONUCU // AÇIKLAMA';
  position:absolute;
  right:15px;
  top:13px;
  color:#10172372;
  font:500 9px 'IBM Plex Mono',monospace;
}
.system-h04.board-mode .board-response #response-title{
  border:0;
  padding:0;
  color:var(--system-wine);
  transform:none;
  font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
  font-weight:700;
}
.system-h04 .primary,.system-h04.board-mode .board-response .primary{
  border:1px solid var(--system-ink);
  border-radius:0;
  background:var(--system-ink);
  color:white;
}
.system-h04 .primary:hover{background:var(--system-purple);border-color:var(--system-ink)}
.system-h04 .feedback{border-color:var(--system-ink);font-family:'IBM Plex Mono',monospace}
.system-h04 .feedback[data-tone=correct]{border-left:9px solid var(--system-lime)}
.system-h04 .feedback[data-tone=retry]{border-left:9px solid var(--system-wine)}
.system-h04 .feedback[data-tone=discuss]{border-left:9px solid var(--system-purple)}
.system-h04 .filters{border-color:var(--system-ink)}
.system-h04 .filters button[aria-pressed=true]{border-color:var(--system-purple);color:var(--system-purple)}
.system-h04 .entry{border-color:var(--system-line)}
.system-h04 .entry-number,.system-h04 .entry .tag{color:var(--system-purple)}
.system-h04 dialog{
  border:2px solid var(--system-ink);
  border-radius:0;
  background:var(--system-paper);
  box-shadow:12px 12px 0 var(--system-purple);
}
.system-h04 dialog::backdrop{background:#101723aa}
.system-h04 .drag-ghost{
  border:2px solid var(--system-ink);
  border-radius:0;
  background:var(--system-panel);
  box-shadow:8px 8px 0 var(--system-lime);
  font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
  font-weight:700;
}

@media(min-width:900px){
  .system-h04.board-mode .shell{padding:0 24px 18px}
  .system-h04.board-mode .masthead{min-height:72px}
  .system-h04.board-mode .board-title{
    margin-right:auto;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    font-size:clamp(20px,1.8vw,30px);
  }
  .system-h04.board-mode .board-title::before{display:none}
  .system-h04.board-mode .desk-top{padding:14px 22px 20px}
  .system-h04.board-mode .desk-top .eyebrow{display:block;margin:0 0 4px;font-size:10px}
  .system-h04.board-mode .desk-top h2{font-size:clamp(21px,1.8vw,30px);margin:0}
  .system-h04.board-mode .workspace{padding:20px;gap:28px}
  .system-h04.board-mode .progress-wrap{font-size:15px}
  .system-h04.board-mode #card-text{font-size:clamp(29px,2.4vw,43px)}
  .system-h04.board-mode .destination strong{font-size:clamp(23px,1.8vw,34px)}
  .system-h04.board-mode .destination small{font-size:clamp(15px,1.08vw,20px)}
}

@media(min-width:900px) and (max-height:800px){
  .system-h04.board-mode .masthead{min-height:58px}
  .system-h04.board-mode .desk-top{padding:9px 18px 16px;min-height:62px}
  .system-h04.board-mode .desk-top::after{left:18px;bottom:4px}
  .system-h04.board-mode .workspace{padding:14px;gap:22px}
  .system-h04.board-mode .evidence-area{box-shadow:7px 7px 0 var(--system-purple)}
  .system-h04.board-mode .destination{min-height:88px;padding:12px 16px}
  .system-h04.board-mode .illustration{height:92px;margin:2px auto}
  .system-h04.board-mode #card-text{font-size:32px}
  .system-h04.board-mode .lab-model span{font-size:9px;padding:4px 5px}
}

@media(max-width:1100px){
  .system-h04 .board-title i{display:none}
}

@media(max-width:899px){
  .system-h04{background-size:24px 24px}
  .system-h04.board-mode .board-title{
    width:100%;
    padding:8px 0;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .system-h04.board-mode .board-title::before{display:none}
  .system-h04 .desk-top::after{display:none}
  .system-h04.board-mode .evidence-area{box-shadow:6px 6px 0 var(--system-purple)}
  .system-h04.board-mode .card-top{padding-left:118px}
}

@media(max-width:600px){
  .system-h04 .masthead::after,.system-h04 .desk::before,.system-h04.board-mode .evidence-area::before{display:none}
  .system-h04 .board-title{font-size:21px!important}
  .system-h04 .desk-top{min-height:auto}
  .system-h04 .destination::after{display:none}
  .system-h04 .evidence-area,.system-h04.board-mode .evidence-area{clip-path:none;box-shadow:4px 4px 0 var(--system-purple)}
  .system-h04 .lab-model{grid-template-columns:1fr 1fr}
  .system-h04 .lab-model span:nth-child(2){border-right:0}
  .system-h04 .lab-model span:nth-child(-n+2){border-bottom:1px solid var(--system-ink)}
}

@media(prefers-reduced-motion:reduce){
  .system-h04 .destination{transition:none}
}