/* Atölyenin kendisi de derlemesiz HTML + CSS + JavaScript'tir. */
@font-face { font-family: Space; src: url('assets/space-grotesk.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: Plex; src: url('assets/ibm-plex-mono.woff2') format('woff2'); font-display: swap; }
:root { --paper:#f6f3eb; --white:#fffdf8; --ink:#211e19; --muted:#625c52; --line:#d9d2c5; --orange:#bc3c1b; --code:#211f1b; --green:#316044; --serif:Georgia,'Times New Roman',serif; --sans:Space,'Segoe UI',Arial,sans-serif; --mono:Plex,Consolas,monospace; }
* { box-sizing:border-box; }
html { scroll-padding-top:100px; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.75 var(--sans); }
a { color:var(--orange); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
button,input,textarea,select { font:inherit; color:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--orange); outline-offset:4px; }
button,input,select { min-height:44px; }
input,textarea,select { border:1px solid var(--line); border-radius:2px; background:var(--white); padding:9px 12px; max-width:100%; }
button { border:1px solid var(--ink); border-radius:2px; background:transparent; padding:8px 18px; line-height:1.5; }
button:hover { background:#e9e2d5; }
.primary { background:var(--orange); border-color:var(--orange); color:#fff; }
.primary:hover { background:#973016; }
.quiet { border-color:var(--line); }
.quiet[aria-pressed=true] { background:#e9e2d5; border-color:var(--ink); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:14px; top:-80px; z-index:50; background:var(--ink); color:#fff; padding:10px 20px; }
.skip-link:focus { top:10px; }
.topbar { min-height:82px; padding:16px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); background:var(--paper); }
.brand { color:var(--ink); text-decoration:none; font-size:21px; letter-spacing:-.6px; white-space:nowrap; }
.spark { color:var(--orange); font-size:33px; vertical-align:middle; margin-right:10px; }
.brand-divider { color:#8c8375; padding:0 9px; }
.brand-sub { font-size:18px; }
.topbar nav { display:flex; gap:30px; }
.topbar nav a { color:var(--ink); font-size:14px; text-decoration:none; padding:8px 0; }
.topbar nav a { min-height:44px; display:inline-flex; align-items:center; }
main[tabindex]:focus-visible { outline:none; }
.topbar nav a[aria-current] { color:var(--orange); text-decoration:underline; }
.workspace { display:grid; grid-template-columns:266px minmax(0,1fr); min-height:calc(100vh - 150px); }
.sidebar { border-right:1px solid var(--line); padding:30px 22px; position:sticky; top:0; max-height:100vh; align-self:start; overflow-y:auto; scrollbar-width:thin; }
.search-label { display:block; color:var(--muted); font:11px var(--mono); text-transform:uppercase; letter-spacing:1px; margin:0 0 10px; }
#lesson-search { width:100%; font-size:13px; }
.course-progress { margin:24px 0 28px; font:11px/1.6 var(--mono); color:var(--muted); }
progress { display:block; width:100%; height:3px; margin-top:10px; border:0; background:var(--line); accent-color:var(--orange); }
progress::-webkit-progress-bar { background:var(--line); }
progress::-webkit-progress-value { background:var(--orange); }
.nav-group { margin:25px 0 7px; font:10px/1.6 var(--mono); letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); }
.lesson-link { display:flex; align-items:baseline; gap:10px; padding:9px 10px; margin:1px -10px; color:var(--ink); text-decoration:none; font-size:13px; line-height:1.55; border-left:2px solid transparent; }
.lesson-link:hover { background:#ebe5d9; }
.lesson-link[aria-current] { border-left-color:var(--orange); background:#ece4d7; color:var(--orange); }
.lesson-num { font:11px var(--mono); color:var(--muted); flex:0 0 22px; }
.lesson-link.done .lesson-num { color:var(--green); }
.rail-note { font-size:12px; line-height:1.8; color:var(--muted); margin-top:36px; border-top:1px solid var(--line); padding-top:18px; }
.course-toggle { display:none; }
main { min-width:0; padding:46px 56px 70px; max-width:1260px; width:100%; margin:0 auto; }
.breadcrumb { font:11px/1.7 var(--mono); letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin:0 0 20px; }
h1,h2,h3,p { margin-top:0; }
h1 { font:normal clamp(36px,4.3vw,64px)/1.08 var(--serif); letter-spacing:-2px; max-width:950px; margin-bottom:20px; }
.lead { max-width:780px; color:var(--muted); font-size:18px; line-height:1.75; margin-bottom:30px; }
.lesson-tabs { display:flex; gap:26px; border-bottom:1px solid var(--line); margin:30px 0 36px; }
.lesson-tabs button { font-size:14px; border:0; border-radius:0; padding:12px 0; background:transparent; border-bottom:2px solid transparent; }
.lesson-tabs button[aria-selected=true] { color:var(--orange); border-color:var(--orange); }
.objectives { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:0 0 30px; border-bottom:1px solid var(--line); margin-bottom:36px; }
.objective { font-size:14px; line-height:1.65; }
.objective span { display:block; color:var(--orange); font:11px var(--mono); margin-bottom:10px; }
.prose { max-width:850px; }
.prose section { margin:0 0 36px; }
h2 { font:normal 31px/1.25 var(--serif); letter-spacing:-.5px; margin-bottom:18px; }
h3 { font-size:18px; line-height:1.4; margin-bottom:14px; }
.prose p,.prose ul,.prose ol { margin-bottom:18px; }
li { padding-left:3px; margin:5px 0; }
code { font: .85em/1.65 var(--mono); background:#eae3d7; padding:2px 5px; border-radius:2px; overflow-wrap:anywhere; }
pre { margin:20px 0; padding:22px; background:var(--code); color:#f7eddc; overflow:auto; max-width:100%; border-radius:2px; tab-size:2; font:12px/1.9 var(--mono); }
pre code { font:inherit; background:none; padding:0; overflow-wrap:normal; }
.callout { border-left:2px solid var(--orange); padding:12px 20px; background:#efe8dc; font-size:14px; line-height:1.8; margin:22px 0; }
.source-reference { display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:14px; margin:34px 0; }
.source-reference small { display:block; color:var(--muted); font-size:12px; }
.references { color:var(--muted); font-size:13px; margin-top:32px; }
.references ul { padding-left:20px; }
.lesson-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:26px; margin-top:44px; }
.step-links { display:flex; gap:22px; align-items:center; font-size:14px; }
.note-inline { margin-top:40px; }
.note-inline label { display:block; font-size:14px; margin-bottom:9px; }
.note-inline textarea { width:100%; min-height:100px; font-size:14px; }
.small { font-size:13px; color:var(--muted); }
.workbench { margin:28px 0; border:1px solid var(--line); }
.workbench-bar { padding:12px 16px; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
.workbench-bar h3 { font:12px var(--mono); margin:0; }
.workbench-actions { display:flex; flex-wrap:wrap; gap:8px; }
.workbench-actions button { font-size:12px; padding:8px 12px; }
.editor-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.editor-side { min-width:0; background:var(--code); color:#f7eddc; }
.editor-tabs { display:flex; gap:6px; padding:8px 14px 0; border-bottom:1px solid #4c473e; }
.editor-tabs button { color:#ccc2b2; border:0; border-bottom:2px solid transparent; border-radius:0; font:11px var(--mono); padding:12px 10px; }
.editor-tabs button:hover { background:#34302a; }
.editor-tabs button[aria-selected=true] { color:#fff6e8; border-color:#ee8b69; }
#code-editor { display:block; resize:vertical; background:var(--code); color:#f7eddc; border:0; border-radius:0; padding:20px; width:100%; height:350px; min-height:200px; font:12px/1.8 var(--mono); white-space:pre; tab-size:2; overflow:auto; }
.preview-side { min-width:0; background:#fff; }
.preview-label { padding:12px 18px; border-bottom:1px solid var(--line); font:11px/1.8 var(--mono); color:var(--muted); }
.preview-side iframe { display:block; border:0; width:100%; height:350px; background:#fff; }
.console-output { padding:12px 18px; border-top:1px solid var(--line); font:11px/1.8 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; max-height:170px; overflow:auto; color:var(--green); background:var(--white); }
.console-output.error { color:#a22d1c; }
.run-hint { margin:0; padding:8px 18px; border-top:1px solid var(--line); background:#f5e4d9; color:#7a2a12; font-size:13px; }
.term-help { font-size:13px; color:var(--muted); }
.prose button.term { min-height:0; padding:0; border:0; border-radius:0; background:none; font:inherit; line-height:inherit; color:inherit; text-decoration:underline dotted var(--orange); text-decoration-thickness:2px; text-underline-offset:4px; cursor:help; }
.prose button.term:hover,.prose button.term[aria-expanded=true] { background:#efe2d2; }
.term-def { margin:-6px 0 18px; padding:10px 16px; border-left:2px solid var(--green); background:#e9eee4; font-size:14px; line-height:1.7; max-width:850px; }
li > .term-def { margin:8px 0 4px; }
.instructions { font-size:15px; }
.task { margin-top:36px; padding-top:28px; border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); padding:14px 0; margin:10px 0; }
summary { cursor:pointer; font-size:14px; min-height:30px; }
details p,details pre { margin-top:16px; }
.quiz-question { padding:28px 0; border-bottom:1px solid var(--line); }
.quiz-question fieldset { border:0; margin:0; padding:0; min-width:0; }
.quiz-question legend { font-size:18px; margin-bottom:18px; max-width:850px; }
.quiz-option { display:flex; gap:12px; align-items:baseline; padding:10px 12px; margin:6px 0; border:1px solid var(--line); max-width:850px; cursor:pointer; font-size:15px; }
.quiz-option:has(input:checked) { background:#ede3d3; border-color:var(--orange); }
.quiz-option input { min-height:0; accent-color:var(--orange); }
.quiz-feedback { padding:12px 16px; border-left:2px solid var(--orange); background:#efe8dc; margin-top:16px; font-size:15px; max-width:850px; }
.quiz-feedback.correct { border-color:var(--green); background:#e6ece4; }
.lab { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; margin:22px 0 38px; }
.lab-controls { display:flex; gap:22px; flex-wrap:wrap; align-items:end; margin:22px 0; }
.lab-controls label { font-size:13px; display:flex; flex-direction:column; gap:7px; min-width:160px; }
.lab-controls input[type=range] { padding:0; min-height:30px; accent-color:var(--orange); }
.lab-visual { padding:24px; background:#ece5d8; overflow:hidden; }
.lab-readout { font:12px/1.9 var(--mono); padding-top:16px; overflow-wrap:anywhere; }
.progress-track { height:7px; background:#d1c8b9; margin:15px 0 30px; }
.progress-fill { height:100%; background:var(--orange); width:0; }
.moving-spark { width:28px; height:28px; background:var(--orange); border-radius:50%; }
.film-window { width:100%; overflow:hidden; border:1px solid #b9ad99; }
.film-strip { display:flex; width:300%; }
.film-frame { flex:0 0 33.333333%; padding:22px; min-height:150px; background:#e4d7c2; border-right:1px solid #b9ad99; font:normal 40px var(--serif); }
.film-frame:nth-child(2) { background:#d2be9e; }.film-frame:nth-child(3) { background:#bda686; }
.film-frame small { display:block; font:14px/1.7 var(--sans); margin-top:12px; }
.lab canvas,.lab svg { display:block; width:100%; max-width:700px; height:auto; background:var(--white); border:1px solid var(--line); }
.lab svg text { font:13px var(--mono); fill:var(--muted); }
#scene-preview { display:block; width:100%; height:430px; border:1px solid var(--line); background:#f4efe6; }
.explorer-toolbar { display:flex; flex-wrap:wrap; gap:14px; align-items:end; margin:26px 0; }
.explorer-toolbar label { display:flex; flex-direction:column; gap:6px; font-size:13px; }
.explorer-toolbar input { width:260px; }
.source-view { padding:18px 0; max-height:68vh; overflow:auto; scroll-behavior:auto; }
.source-line { display:block; padding:0 20px; min-width:max-content; }
.line-number { color:#9e9380; display:inline-block; width:46px; user-select:none; font-size:10px; }
.source-line.match { background:#65391f; color:#fff5dd; }
.glossary-search { width:100%; max-width:580px; margin:10px 0 30px; }
.glossary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; }
.glossary-item { padding:18px 0; border-top:1px solid var(--line); }
.glossary-item dt { font:normal 23px var(--serif); margin-bottom:8px; }
.glossary-item dd { margin:0; color:var(--muted); font-size:14px; }
.notes-list section { margin:25px 0; padding-bottom:24px; border-bottom:1px solid var(--line); }
.notes-list textarea { width:100%; min-height:110px; font-size:14px; }
.backup-actions { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0; }
.file-label { display:inline-flex; align-items:center; padding:8px 18px; min-height:44px; border:1px solid var(--ink); cursor:pointer; font-size:14px; }
.file-label:focus-within { outline:3px solid var(--orange); outline-offset:4px; }
.warning { color:#a22d1c; border-left:2px solid #a22d1c; padding:10px 16px; background:#f6e5dd; font-size:14px; }
.storage-warning { margin:16px 24px; }
.site-footer { border-top:1px solid var(--line); padding:22px 32px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:12px; color:var(--muted); }
.no-script { padding:40px; max-width:850px; margin:0 auto; }
table { border-collapse:collapse; width:100%; font-size:14px; margin:20px 0; }
th,td { text-align:left; vertical-align:top; padding:12px; border-bottom:1px solid var(--line); }
/* Telefonda öğrenme: aşağıdaki parçalar yalnız dar veya dokunmatik ekranlarda görünür. */
.tabbar,.pane-switch,.keybar { display:none; }
.lesson-tabs { position:sticky; top:0; z-index:6; background:var(--paper); }
.source-view.wrap { white-space:pre-wrap; }
.source-view.wrap .source-line { display:grid; grid-template-columns:46px minmax(0,1fr); min-width:0; overflow-wrap:anywhere; }
.update-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:14px; padding:10px 10px 10px 18px; background:var(--ink); color:#fff6e8; font-size:14px; box-shadow:0 6px 24px rgba(33,30,25,.25); max-width:calc(100% - 32px); }
.update-toast[hidden] { display:none; }
.keybar { gap:4px; padding:6px 8px; overflow-x:auto; background:#2b2823; border-bottom:1px solid #4c473e; scrollbar-width:none; }
.keybar button { flex:0 0 auto; min-width:42px; min-height:40px; padding:0 10px; border:1px solid #4c473e; border-radius:2px; background:#34302a; color:#f7eddc; font:15px/1 var(--mono); touch-action:manipulation; }
.keybar button:active { background:#4c473e; }
@media (pointer:coarse) { .keybar { display:flex; } }
@media (min-width:1700px) { main { padding-top:60px; } }
@media (max-width:1150px) { .workspace { grid-template-columns:235px minmax(0,1fr); } main { padding:36px 34px 60px; }.topbar nav { gap:20px; }.editor-grid { grid-template-columns:1fr; }.preview-side { border-top:1px solid var(--line); }#code-editor { height:270px; }.preview-side iframe { height:310px; } }
@media (max-width:800px) {
  .topbar { padding:12px 20px; display:block; }.brand { font-size:20px; }.topbar nav { margin-top:10px; justify-content:space-between; gap:14px; }.topbar nav a { font-size:12px; }
  .workspace { display:block; }.sidebar { position:static; max-height:none; border-right:0; padding:0; border-bottom:1px solid var(--line); }.course-toggle { display:flex; justify-content:space-between; width:100%; padding:13px 22px; border:0; text-align:left; font-size:13px; }.course-toggle:hover { background:#ece5d8; }#course-list { display:none; padding:20px 24px; max-height:65vh; overflow:auto; }#course-list.is-open { display:block; }
  main { padding:30px 22px 50px; }h1 { font-size:43px; letter-spacing:-1.3px; }.lead { font-size:16px; }.breadcrumb { font-size:10px; }.objectives { grid-template-columns:1fr; gap:18px; }.objective span { display:inline-block; margin:0 10px 0 0; }.lesson-tabs { gap:25px; margin:24px 0 28px; }.lesson-tabs button { font-size:13px; }.prose { font-size:15px; }h2 { font-size:28px; }pre { padding:18px; font-size:11px; }.workbench-bar { padding:12px; }.workbench-actions { gap:6px; }.workbench-actions button { font-size:11px; padding:7px 10px; }.glossary { grid-template-columns:1fr; }.site-footer { padding:20px 22px; }.lesson-footer { align-items:start; flex-direction:column; }.step-links { justify-content:space-between; width:100%; font-size:13px; }.lab-controls label { min-width:130px; flex:1; }.lab-visual { padding:14px; }.film-frame { font-size:30px; }.quiz-option { font-size:14px; }.explorer-toolbar input { width:100%; }.explorer-toolbar label { width:100%; }.explorer-toolbar select { width:100%; }
}
@media (max-width:800px) {
  body { padding-bottom:calc(62px + env(safe-area-inset-bottom)); }
  .topbar { display:flex; min-height:0; padding:calc(10px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left)); }
  .topbar nav { display:none; }
  .spark { font-size:28px; margin-right:8px; }
  .tabbar { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--paper); border-top:1px solid var(--line); padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .tabbar a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:58px; color:var(--muted); font-size:11px; line-height:1.2; text-decoration:none; }
  .tabbar svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .tabbar a[aria-current] { color:var(--orange); }
  .update-toast { bottom:calc(72px + env(safe-area-inset-bottom)); }
  /* iPhone, 16 pikselden küçük yazılı alana odaklanınca sayfayı yakınlaştırır. */
  input,select,textarea,#lesson-search,#code-editor,.note-inline textarea,.notes-list textarea { font-size:16px; }
  .lesson-tabs { margin:20px -22px 24px; padding:0 22px; }
  .lesson-tabs button { min-height:48px; }
  .pane-switch { display:flex; border-bottom:1px solid var(--line); background:var(--white); }
  .pane-switch button { flex:1; border:0; border-bottom:2px solid transparent; border-radius:0; font:12px var(--mono); letter-spacing:.5px; }
  .pane-switch button[aria-selected=true] { color:var(--orange); border-color:var(--orange); }
  .pane-switch button.fresh::after { content:" •"; color:var(--orange); }
  /* Gizli bölme display:none olmaz: öyle gizlenen önizleme iframe'i yeniden gösterilince Chrome'da boş kalıyordu. */
  .editor-grid { position:relative; overflow:hidden; }
  .workbench[data-pane=code] .preview-side,.workbench[data-pane=result] .editor-side { position:absolute; top:0; left:0; width:100%; visibility:hidden; pointer-events:none; }
  .preview-side { border-top:0; }
  .preview-label { display:none; }
  .keybar { display:flex; }
  #code-editor { height:min(42vh,380px); padding:14px; line-height:1.6; }
  .preview-side iframe { height:min(62vh,520px); }
  .workbench-bar { padding:8px 10px; }
  .workbench-bar h3 { display:none; }
  .workbench-actions { width:100%; flex-wrap:wrap; }
  .workbench-actions button { min-height:40px; }
  .workbench-actions #run-code { margin-left:auto; }
  .run-hint { font-size:13px; }
  #scene-preview { height:auto; aspect-ratio:4 / 3; }
  .source-view { max-height:none; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }
@media (max-width:480px) { h1 { font-size:36px; } }
@media print { .topbar,.sidebar,.lesson-tabs,.workbench,.lab,.lesson-footer,.note-inline,.site-footer,.backup-actions { display:none; }.workspace { display:block; }body { background:#fff; color:#000; }main { padding:0; max-width:none; }.prose { max-width:none; }pre { white-space:pre-wrap; background:#f2f2f2; color:#000; }.objectives { display:block; }.references { break-inside:avoid; } }