/* Lingopane sitesi. Dis kaynak yok: yazi tipleri sistemden (Windows'ta Bahnschrift + Segoe UI), izleyici yok. */
:root {
  --paper: #eef3fa;
  --ink: #0e1b33;
  --blue: #1f6fe0;
  --deep: #123e96;
  --amber: #e8a33d;
  --card: #ffffff;
  --muted: #52607a;
  --display: Bahnschrift, "DIN Alternate", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Code", Consolas, ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1.0625rem/1.6 var(--body);
}
a { color: var(--deep); text-underline-offset: 0.18em; }
a:focus-visible, input:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.wrap { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; }

/* ust serit */
.top { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; }
.brand { display: flex; align-items: center; gap: 0.6rem; font: 600 1.25rem var(--display); color: var(--ink); text-decoration: none; }
.brand img { width: 2rem; height: 2rem; }
.langs { display: flex; gap: 0.25rem; font: 600 0.875rem var(--display); letter-spacing: 0.06em; }
.langs a { padding: 0.35rem 0.6rem; border-radius: 0.4rem; text-decoration: none; color: var(--muted); }
.langs a[aria-current] { background: var(--ink); color: #fff; }

/* giris */
h1 {
  margin: 2.5rem 0 1rem;
  font: 600 clamp(2.6rem, 8vw, 5.4rem)/0.96 var(--display);
  font-stretch: 78%;
  letter-spacing: -0.01em;
  max-width: 12ch;
  text-wrap: balance;
}
.lead { max-width: 38rem; margin: 0 0 2rem; font-size: 1.1875rem; color: var(--muted); }

/* gosterim: alttaki slayt orijinal, ustundeki cam levhanin altinda ceviri */
.demo { container-type: inline-size; position: relative; --x: 62; }
.stage { position: relative; aspect-ratio: 16 / 9; border-radius: 1.2cqw; overflow: hidden; box-shadow: 0 1.5rem 3rem -1.5rem rgba(14, 27, 51, 0.55); }
.slide {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: 22cqw repeat(3, 8cqw) 1fr; align-items: center;
  padding: 0 7cqw;
  background: var(--ink); color: #fff;
  font: 400 2.9cqw/1.2 var(--body);
}
.slide p { margin: 0; white-space: nowrap; }
.slide .title { align-self: end; padding-bottom: 3cqw; font: 600 4.6cqw/1.05 var(--display); font-stretch: 85%; border-left: 0.9cqw solid var(--amber); padding-left: 2cqw; }
.slide .item::before { content: "–"; margin-right: 1.5cqw; color: var(--amber); }
.slide .foot { align-self: end; padding-bottom: 3.5cqw; font-size: 1.9cqw; letter-spacing: 0.04em; opacity: 0.65; }
.slide.pane {
  clip-path: inset(0 calc(100% - var(--x) * 1%) 0 0);
  background: linear-gradient(120deg, #17305f, #1b4aa8);
}
.edge {
  position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%);
  width: 0.5cqw; margin-left: -0.25cqw; background: #fff; opacity: 0.9; pointer-events: none;
}
.edge::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 3.4cqw; height: 3.4cqw;
  transform: translate(-50%, -50%); border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 0.5cqw rgba(31, 111, 224, 0.45);
}
.slider { display: block; width: 100%; margin: 1rem 0 0.25rem; accent-color: var(--blue); }
.hint { margin: 0; font-size: 0.875rem; color: var(--muted); }

/* durum */
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 2.5rem 0 0; }
.badge { padding: 0.7rem 1.1rem; border-radius: 0.6rem; background: var(--deep); color: #fff; font: 600 1.0625rem var(--display); }
.status span:last-child { color: var(--muted); }

/* bolumler */
section { margin: 5rem 0 0; }
h2 { margin: 0 0 1.5rem; font: 600 clamp(1.6rem, 4vw, 2.2rem)/1.1 var(--display); font-stretch: 85%; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); gap: 1.75rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.facts h3 { margin: 0 0 0.35rem; padding-top: 0.9rem; border-top: 3px solid var(--ink); font: 600 1.1875rem var(--display); }
.facts p { margin: 0; color: var(--muted); }

.keys { display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1.5rem; margin: 0; }
.keys dt { font: 0.9375rem var(--mono); white-space: nowrap; }
.keys dd { margin: 0; color: var(--muted); }
kbd { padding: 0.15rem 0.45rem; border: 1px solid #b9c6dc; border-bottom-width: 2px; border-radius: 0.35rem; background: var(--card); font: inherit; }

.langlist { display: grid; grid-template-columns: max-content 1fr; gap: 0.75rem 1.5rem; margin: 0; }
.langlist dt { font: 600 1rem var(--display); }
.langlist dd { margin: 0; color: var(--muted); }
.note { max-width: 44rem; margin: 1.25rem 0 0; font-size: 0.9375rem; color: var(--muted); }

/* yazi sayfasi (gizlilik) */
.doc { max-width: 44rem; }
.doc h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); max-width: none; }
.doc h2 { margin: 2.5rem 0 0.75rem; font-size: 1.4rem; }
.doc li { margin-bottom: 0.4rem; }
.draft { padding: 0.9rem 1.1rem; border-left: 5px solid var(--amber); background: var(--card); }

footer { margin: 6rem 0 0; padding: 1.5rem 0 3rem; border-top: 1px solid #c9d4e6; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.9375rem; color: var(--muted); }

@media (max-width: 34rem) {
  .keys, .langlist { grid-template-columns: 1fr; gap: 0.15rem; }
  .keys dd, .langlist dd { margin-bottom: 0.75rem; }
}