:root {
  --bg: #f7f7f9; --surface: #ffffff; --ink: #1f2937; --muted: #6b7280; --line: #e5e7eb;
  --code-bg: #f6f8fa; --code-line: #d0d7de; --code-ink: #24292f;
  --out-bg: #111827; --out-ink: #e5e7eb; --inline-code: #b42318; --inline-code-bg: #f3f4f6;
  --k: #0000ff; --t: #267f99; --s: #a31515; --c: #2e7d32; --n: #098658;
  --bad: #dc2626; --good: #16a34a;
  --g-creational: #1d4ed8; --g-structural: #047857; --g-behavioral: #6d28d9; --g-solid: #c2410c;
  --g-creational-l: #eff6ff; --g-structural-l: #ecfdf5; --g-behavioral-l: #f5f3ff; --g-solid-l: #fff7ed;
  --accent: #1d4ed8; --accent-l: #eff6ff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115; --surface: #171a21; --ink: #e5e7eb; --muted: #9ca3af; --line: #2a2f3a;
    --code-bg: #1e1e1e; --code-line: #333a45; --code-ink: #d4d4d4;
    --out-bg: #0a0c10; --inline-code: #ff9b8f; --inline-code-bg: #262b35;
    --k: #569cd6; --t: #4ec9b0; --s: #ce9178; --c: #6a9955; --n: #b5cea8;
    --g-creational: #60a5fa; --g-structural: #34d399; --g-behavioral: #a78bfa; --g-solid: #fb923c;
    --g-creational-l: #172036; --g-structural-l: #0f2a22; --g-behavioral-l: #221a3a; --g-solid-l: #2e1d10;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1115; --surface: #171a21; --ink: #e5e7eb; --muted: #9ca3af; --line: #2a2f3a;
  --code-bg: #1e1e1e; --code-line: #333a45; --code-ink: #d4d4d4;
  --out-bg: #0a0c10; --inline-code: #ff9b8f; --inline-code-bg: #262b35;
  --k: #569cd6; --t: #4ec9b0; --s: #ce9178; --c: #6a9955; --n: #b5cea8;
  --g-creational: #60a5fa; --g-structural: #34d399; --g-behavioral: #a78bfa; --g-solid: #fb923c;
  --g-creational-l: #172036; --g-structural-l: #0f2a22; --g-behavioral-l: #221a3a; --g-solid-l: #2e1d10;
  color-scheme: dark;
}
.g-creational { --accent: var(--g-creational); --accent-l: var(--g-creational-l); }
.g-structural { --accent: var(--g-structural); --accent-l: var(--g-structural-l); }
.g-behavioral { --accent: var(--g-behavioral); --accent-l: var(--g-behavioral-l); }
.g-solid      { --accent: var(--g-solid);      --accent-l: var(--g-solid-l); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
a { color: var(--accent); }
code, pre { font-family: ui-monospace, Consolas, "Cascadia Code", Menlo, monospace; }
p code, li code, h3 code, .callout code, .desc code, .intent code {
  font-size: .88em; color: var(--inline-code); background: var(--inline-code-bg);
  padding: .1em .35em; border-radius: 4px; overflow-wrap: anywhere;
}
button { font: inherit; cursor: pointer; }
.theme {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  width: 40px; height: 40px; border-radius: 10px; font-size: 18px; flex: none;
}

/* ---------------------------------------------------------- ana sayfa */
.site-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-head-inner {
  max-width: 860px; margin: 0 auto; padding: 28px 16px 22px;
  display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
}
.site-head h1 { margin: 0 0 6px; font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.2; }
.site-head p { margin: 0; color: var(--muted); }
.index { max-width: 860px; margin: 0 auto; padding: 0 16px 48px; }
.search-wrap {
  position: sticky; top: 0; z-index: 5; background: var(--bg);
  padding: 14px 0 10px; display: flex; align-items: center; gap: 10px;
}
#search {
  flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; outline: none;
}
#search:focus { border-color: var(--g-creational); box-shadow: 0 0 0 3px var(--g-creational-l); }
.count { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.legend-note { color: var(--muted); font-size: .85rem; }
.group { margin-top: 26px; }
.group h2 { margin: 0 0 4px; font-size: 1.15rem; }
.group-desc { margin: 0 0 12px; color: var(--muted); font-size: .92rem; }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.item {
  display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 12px; padding: 12px 14px; transition: transform .12s, box-shadow .12s;
}
.item:hover, .item:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 14px rgb(0 0 0 / .08); outline: none; }
.idx { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; padding-top: 1px; }
.txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.name { font-weight: 700; }
.tr { color: var(--muted); font-size: .9rem; }
.desc {
  font-size: .88rem; margin-top: 4px; color: var(--ink); opacity: .85;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat {
  flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--accent);
  background: var(--accent-l); border-radius: 999px; padding: 3px 9px;
}
.empty { text-align: center; color: var(--muted); padding: 40px 0; }
@media (max-width: 520px) {
  .item { position: relative; }
  .item .cat { position: absolute; top: 12px; right: 12px; }
  .item .name { padding-right: 92px; }
  .idx { display: none; }
}

/* ---------------------------------------------------------- konu sayfası */
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; padding: 10px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.home {
  display: inline-flex; align-items: center; text-decoration: none; font-weight: 600;
  color: #fff; background: var(--accent); padding: 9px 16px; border-radius: 10px;
}
.home.bottom { margin: 28px 0 8px; }
.topic { max-width: 860px; margin: 0 auto; padding: 18px 16px 40px; }
.hero { background: var(--accent); color: #fff; border-radius: 16px 16px 0 0; padding: 22px 20px; }
:root[data-theme="dark"] .hero, :root[data-theme="dark"] .home { color: #0f1115; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero, :root:not([data-theme="light"]) .home { color: #0f1115; }
}
.eyebrow { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.hero h1 { margin: 4px 0 2px; font-size: clamp(1.7rem, 7vw, 2.5rem); line-height: 1.15; }
.subtitle { margin: 0; font-size: 1.05rem; }
.intent {
  margin: 0 0 8px; background: var(--accent-l); border-radius: 0 0 16px 16px;
  padding: 14px 20px; font-style: italic;
}
.part { margin-top: 30px; }
.part-head {
  display: flex; align-items: center; gap: 12px; padding-bottom: 8px; margin-bottom: 14px;
  border-bottom: 2px solid var(--accent);
}
.badge {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px;
  background: var(--accent); color: var(--surface); font-weight: 800; font-size: 1.2rem;
}
.part-head h2 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.part-head p { margin: 0; color: var(--muted); font-size: .85rem; }
.part h3 { color: var(--accent); font-size: 1.08rem; margin: 22px 0 8px; }
.part h3.step { color: var(--ink); }
.step .num { color: var(--accent); }
.part p { margin: 0 0 12px; }
.part ul, .part ol { margin: 0 0 12px; padding-left: 1.4em; }
.part li { margin-bottom: 4px; }
.callout {
  background: var(--accent-l); border-left: 4px solid var(--accent); border-radius: 8px;
  padding: 12px 14px; margin: 10px 0 16px;
}
.summary { margin-top: 22px; }
.tag { font-size: .75rem; font-weight: 800; padding: 2px 8px; border-radius: 6px; color: #fff; vertical-align: 2px; }
.tag.bad { background: var(--bad); }
.tag.good { background: var(--good); }
.code {
  position: relative; background: var(--code-bg); border: 1px solid var(--code-line);
  border-radius: 10px; margin: 8px 0 16px;
}
.code.bad { border-color: var(--bad); border-left-width: 4px; }
.code.good { border-color: var(--good); border-left-width: 4px; }
.code pre { margin: 0; padding: 14px; overflow-x: auto; color: var(--code-ink); font-size: 13px; line-height: 1.5; }
.code pre code { font-size: inherit; }
.copy {
  position: absolute; top: 6px; right: 6px; font-size: .75rem; padding: 4px 9px;
  color: var(--muted); background: var(--surface); border: 1px solid var(--code-line); border-radius: 6px;
  opacity: .9;
}
.copy.done { color: var(--good); border-color: var(--good); }
.output {
  background: var(--out-bg); color: var(--out-ink); border-radius: 10px; padding: 14px;
  margin: 8px 0 16px; font-size: 13px; line-height: 1.5; overflow-x: auto;
}
.k { color: var(--k); } .t { color: var(--t); } .s { color: var(--s); }
.c { color: var(--c); font-style: italic; } .n { color: var(--n); }
@media (max-width: 520px) {
  body { font-size: 15.5px; }
  .code pre, .output { font-size: 12px; }
  .hero { padding: 18px 16px; }
  .intent { padding: 12px 16px; }
}