:root {
  --bg: #f4f1ea;
  --surface: #ffffff;
  --text: #1f2328;
  --muted: #6b6f76;
  --border: #ddd8cc;
  --floor: #ebe6da;
  --wall: #3b3f46;
  --finish: #2f9e6b;
  --accent: #3a63d8;
  --accent-text: #ffffff;
  --danger: #d6453d;
  --success: #2f9e6b;
  --robot: #f0a531;
  --robot-dark: #2b2d31;
  --chip: #e6ecfb;
  --chip-active: #ffd27a;
  --loop: #8a4fd1;
  --loop-bg: #f5effc;
  --loop-border: #d9c7f1;
  --loop-ring: rgba(138, 79, 209, 0.25);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15171b;
    --surface: #1f2228;
    --text: #e8e9ec;
    --muted: #9aa0a8;
    --border: #33373f;
    --floor: #2a2e35;
    --wall: #0b0c0e;
    --finish: #3fbf84;
    --accent: #6d8ff0;
    --accent-text: #0e1117;
    --danger: #ff6b62;
    --success: #4fd394;
    --robot: #f4b44c;
    --robot-dark: #15171b;
    --chip: #2a3350;
    --chip-active: #8a6a1f;
    --loop: #b48cf0;
    --loop-bg: #261f33;
    --loop-border: #45385c;
    --loop-ring: rgba(180, 140, 240, 0.3);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #15171b;
  --surface: #1f2228;
  --text: #e8e9ec;
  --muted: #9aa0a8;
  --border: #33373f;
  --floor: #2a2e35;
  --wall: #0b0c0e;
  --finish: #3fbf84;
  --accent: #6d8ff0;
  --accent-text: #0e1117;
  --danger: #ff6b62;
  --success: #4fd394;
  --robot: #f4b44c;
  --robot-dark: #15171b;
  --chip: #2a3350;
  --chip-active: #8a6a1f;
  --loop: #b48cf0;
  --loop-bg: #261f33;
  --loop-border: #45385c;
  --loop-ring: rgba(180, 140, 240, 0.3);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.45; }

.app {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  gap: 16px;
}

@media (min-width: 820px) {
  .app {
    grid-template-columns: 1fr 340px;
    grid-template-areas: "top top" "stage editor";
    align-items: start;
  }
  .top { grid-area: top; }
  .stage { grid-area: stage; }
  .editor { grid-area: editor; }
}

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; }
h2 { margin: 0; font-size: 1rem; }

.levels { display: flex; gap: 6px; flex-wrap: wrap; }

.level-btn {
  min-width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 600;
}
.level-btn.done { border-color: var(--success); color: var(--success); }
.level-btn.current { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

.stage, .editor {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
}

.level-name { margin-bottom: 12px; color: var(--muted); font-weight: 500; }

/* Pano: hücre boyutu ekran genişliğine göre küçülür. */
.board {
  --cell: min(56px, calc((100vw - 66px) / var(--cols, 7)));
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-auto-rows: var(--cell);
  width: max-content;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
}

@media (min-width: 820px) {
  .board { --cell: min(56px, calc(520px / var(--cols, 7))); }
}

.cell { background: var(--floor); box-shadow: inset 0 0 0 0.5px var(--border); }
.cell.wall { background: var(--wall); box-shadow: none; }
.cell.finish {
  background:
    repeating-conic-gradient(var(--finish) 0 25%, transparent 0 50%) 0 0 / 50% 50%,
    var(--floor);
}

.robot {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cell);
  height: var(--cell);
  padding: calc(var(--cell) * 0.1);
  transform:
    translate(calc(var(--x, 0) * var(--cell)), calc(var(--y, 0) * var(--cell)))
    rotate(calc(var(--rot, 0) * 1deg));
  transition: transform var(--speed, 380ms) ease-in-out;
  pointer-events: none;
}
.robot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.robot-body { fill: var(--robot); }
.robot-head { fill: var(--robot); stroke: var(--robot-dark); stroke-width: 1.5; }
.robot-eye { fill: var(--robot-dark); }
.robot-wheel { fill: var(--robot-dark); }
.robot.won .robot-body { fill: var(--success); }

.status { min-height: 1.5em; margin: 12px 0 0; text-align: center; font-weight: 600; }
.status.success { color: var(--success); }
.status.error { color: var(--danger); }

.palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.cmd-btn {
  height: 52px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-weight: 600;
}
.cmd-btn span { font-size: 1.2em; }
.cmd-btn.loop-btn { border-color: var(--loop); color: var(--loop); }

.target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--loop-bg);
  color: var(--loop);
  font-size: 0.85rem;
  font-weight: 600;
}
.target[hidden] { display: none; }
.target button {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--loop);
  border-radius: 8px;
  background: var(--surface);
  color: var(--loop);
  font-weight: 600;
}

.program-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 18px 0 8px;
}
.count { color: var(--muted); font-variant-numeric: tabular-nums; }
.count.full { color: var(--danger); }

.program {
  list-style: none;
  margin: 0;
  padding: 10px;
  min-height: 64px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.program:empty::before {
  content: "Yukarıdaki butonlarla komut ekleyin";
  color: var(--muted);
  font-size: 0.9rem;
  margin: auto;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--chip);
  font-size: 0.9rem;
}
.chip small { color: var(--muted); font-size: 0.75em; }
.chip.active { background: var(--chip-active); }

.program li { display: block; }
.program .loop-item { flex-basis: 100%; }

.loop {
  border: 2px solid var(--loop-border);
  border-radius: 12px;
  background: var(--loop-bg);
  overflow: hidden;
}
.loop.selected { border-color: var(--loop); box-shadow: 0 0 0 3px var(--loop-ring); }
.loop.active { border-color: var(--chip-active); }

.loop-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
}
.loop-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--loop);
  color: var(--accent-text);
  font-weight: 600;
  font-size: 0.9rem;
}
.loop-title small { opacity: 0.75; font-size: 0.75em; }
.loop-count {
  width: 56px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-align: center;
}
.loop-times { color: var(--muted); font-size: 0.9rem; }
.loop-iter { margin-left: auto; color: var(--loop); font-weight: 700; font-variant-numeric: tabular-nums; }
.loop-remove {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}

.loop-body {
  list-style: none;
  margin: 0;
  padding: 6px 6px 8px 14px;
  min-height: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid var(--loop-border);
}
.loop-body:empty::before {
  content: "Döngüye blok eklemek için başlığa dokunun";
  color: var(--muted);
  font-size: 0.8rem;
  align-self: center;
}
.loop.selected .loop-body:empty::before { content: "Yukarıdan blok seçin"; }

.hint { margin: 6px 0 0; color: var(--muted); font-size: 0.8rem; }

.controls { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; margin-top: 16px; }
.controls button, .next { height: 48px; border-radius: 12px; font-weight: 700; }
.ghost { border: 1px solid var(--border); background: transparent; }
.run, .next { border: 0; background: var(--accent); color: var(--accent-text); letter-spacing: 0.04em; }
.next { width: 100%; margin-top: 8px; background: var(--success); }

@media (prefers-reduced-motion: reduce) {
  .robot { transition: none; }
}

/* --- Sürükle-bırak --- */
[data-drag] { touch-action: none; user-select: none; -webkit-user-select: none; }
.chip[data-drag], .loop-title { cursor: grab; }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

.drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  margin: 0;
  list-style: none;
  pointer-events: none;
  opacity: 0.9;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
}
.drag-source { opacity: 0.35; }

.drop-marker {
  display: block;
  width: 4px;
  height: 36px;
  border-radius: 2px;
  background: var(--accent);
  list-style: none;
}
.drop-marker.wide { width: 100%; height: 4px; flex-basis: 100%; }