/* Kod Laboratuvarı — sayfa-özel stil (pages/kod-lab.html) */
:root {
  --kl-zemin: #0f1a1d;
  --kl-yuzey: #162529;
  --kl-yuzey2: #1d3035;
  --kl-metin: #e9f1f2;
  --kl-soluk: #9fb4b8;
  --kl-cizgi: #f0b84a;
  --kl-tuval-zemin: #0d1b1f;
  --kl-vurgu: #0f6b7c;
  --kl-basari: #2e8b57;
  --kl-uyari: #b7791f;
  --kl-hata: #b83232;
  --kl-kenar: #2a4248;
}
[data-theme="light"] {
  --kl-zemin: #f5f7f7;
  --kl-yuzey: #ffffff;
  --kl-yuzey2: #eef3f3;
  --kl-metin: #13272b;
  --kl-soluk: #4f666b;
  --kl-cizgi: #b7791f;
  --kl-tuval-zemin: #fffdf7;
  --kl-kenar: #cfdcdd;
}
body { background: var(--kl-zemin); color: var(--kl-metin); }
.atla { position: absolute; left: -9999px; }
.atla:focus { left: 1rem; top: 1rem; background: var(--kl-yuzey); padding: .5rem; z-index: 999; }

.kl { max-width: 1180px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.kl-baslik h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; margin: .25rem 0 .5rem; }
.kl-etiket { color: var(--kl-cizgi); font-size: .85rem; letter-spacing: .04em; margin: 0; }
.kl-giris { color: var(--kl-soluk); max-width: 62ch; margin: 0 0 1.25rem; }

.kl-duzen { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.kl-dersler, .kl-calisma { background: var(--kl-yuzey); border: 1px solid var(--kl-kenar); border-radius: 14px; padding: 1rem; }
.kl-dersler h2 { font-size: 1rem; margin: 0 0 .5rem; }
.kl-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.kl-ders-dugme {
  width: 100%; text-align: left; min-height: 44px; padding: .55rem .7rem; border-radius: 10px;
  border: 1px solid var(--kl-kenar); background: var(--kl-yuzey2); color: var(--kl-metin); cursor: pointer; font: inherit;
}
.kl-ders-dugme.aktif { border-color: var(--kl-cizgi); box-shadow: inset 3px 0 0 var(--kl-cizgi); }
.kl-ders-dugme.bitti { color: var(--kl-basari); }
.kl-ders-dugme:focus-visible, .kl-dugme:focus-visible, .kl-editor:focus-visible { outline: 3px solid var(--kl-cizgi); outline-offset: 2px; }
.kl-not { color: var(--kl-soluk); font-size: .85rem; margin: .9rem 0 0; }

.kl-ders-baslik { font-size: 1.25rem; margin: 0 0 .4rem; }
.kl-gorev { background: var(--kl-yuzey2); border-left: 4px solid var(--kl-cizgi); padding: .7rem .9rem; border-radius: 8px; margin-bottom: 1rem; }
.kl-etiket-satir { display: block; font-weight: 600; margin-bottom: .35rem; }
.kl-editor {
  width: 100%; box-sizing: border-box; min-height: 260px; resize: vertical; padding: .9rem;
  font: 15px/1.55 ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
  background: #0b1416; color: #e6f2f0; border: 1px solid var(--kl-kenar); border-radius: 10px; tab-size: 2;
}
[data-theme="light"] .kl-editor { background: #fbfcfc; color: #13272b; }
.kl-ipucu { color: var(--kl-soluk); font-size: .85rem; margin: .5rem 0 0; }
.kl-ipucu code { background: var(--kl-yuzey2); padding: .05rem .35rem; border-radius: 4px; }

.kl-eylemler { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0; }
.kl-dugme {
  min-height: 44px; padding: .55rem 1rem; border-radius: 10px; border: 1px solid var(--kl-kenar);
  background: var(--kl-yuzey2); color: var(--kl-metin); font: inherit; cursor: pointer;
}
.kl-dugme-birincil { background: var(--kl-vurgu); border-color: var(--kl-vurgu); color: #fff; font-weight: 600; }
.kl-dugme[hidden] { display: none; }

.kl-durum { min-height: 1.5rem; padding: .1rem 0; font-weight: 500; }
.kl-durum.basari { color: var(--kl-basari); }
.kl-durum.uyari { color: var(--kl-uyari); }
.kl-durum.hata { color: var(--kl-hata); }

.kl-cikti-kutu h3, .kl-cizim-kutu h3 { font-size: .95rem; margin: 1rem 0 .4rem; color: var(--kl-soluk); }
.kl-cikti {
  margin: 0; min-height: 3.5rem; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  background: #0b1416; color: #e6f2f0; border-radius: 10px; padding: .8rem; border: 1px solid var(--kl-kenar);
  font: 14px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}
[data-theme="light"] .kl-cikti { background: #fbfcfc; color: #13272b; }
.kl-tuval { width: 100%; height: auto; max-width: 520px; display: block; border-radius: 10px; border: 1px solid var(--kl-kenar); background: var(--kl-tuval-zemin); }

@media (max-width: 860px) {
  .kl-duzen { grid-template-columns: 1fr; }
  .kl-dersler { order: 2; }
  .kl-calisma { order: 1; }
}
@media (max-width: 420px) {
  .kl { padding-inline: 16px; }
  .kl-dersler, .kl-calisma { padding: .8rem; }
}

/* İpucu, çözüm kutusu ve ilerleme (sürüm 20261019) */
.kl-ipucu-kutu { margin: .8rem 0 0; padding: .7rem .9rem; border-radius: 10px; border-left: 4px solid var(--kl-cizgi); background: var(--kl-yuzey2); white-space: pre-wrap; font: 14px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.kl-ipucu-kutu[hidden] { display: none; }
.kl-ilerleme { margin: .8rem 0 0; color: var(--kl-soluk); font-size: .9rem; }