@font-face { font-family: "Layer Title"; src: url(layer-title.ttf) format("truetype"); font-display: swap; }
:root {
  --night: #1e1933; --night-2: #2a2347; --on-night: #f4effd; --on-night-soft: #b6acd8;
  --paper: #f3eee6; --paper-2: #e8e0d3; --ink: #2a2338; --ink-soft: #6a6180; --line: #d8cfc0;
  --gold: #f4b42b; --pink: #ff7aa8; --teal: #4fd0b0; --violet: #8f7bff; --link: #5b45d6;
  --title: "Layer Title", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 var(--body); }
a { color: var(--link); text-underline-offset: 2px; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* only the chosen language once the script has run */
html[data-lang="en"] [lang="tr"], html[data-lang="tr"] [lang="en"] { display: none; }

.bar { background: radial-gradient(120% 140% at 80% 0%, #3a2f63 0%, var(--night-2) 45%, var(--night) 100%); color: var(--on-night); }
.top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-family: var(--title); font-size: 19px; }
.brand img { border-radius: 8px; }
.lang { display: flex; gap: 2px; background: rgba(255,255,255,.08); border-radius: 999px; padding: 3px; }
.lang button { all: unset; cursor: pointer; font: 600 13px/1 var(--mono); padding: 7px 11px; border-radius: 999px; color: var(--on-night-soft); }
.lang button[aria-pressed="true"] { background: var(--on-night); color: var(--night); }
.lang button:focus-visible { outline: 2px solid var(--gold); }
.intro { padding: 26px 0 30px; }
.tag { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-night-soft); }
.edge { height: 21px; background: linear-gradient(var(--night) 0 0) top / 100% 5px no-repeat,
  repeating-linear-gradient(180deg, var(--violet) 0 4px, var(--teal) 4px 8px, var(--gold) 8px 12px, var(--pink) 12px 16px, transparent 16px); }

.doc { max-width: 760px; padding: 48px 0 80px; }
.doc h1 { font: 400 clamp(34px, 5vw, 50px)/1.05 var(--title); margin: 0 0 10px; text-wrap: balance; }
.doc h2 { font: 800 21px/1.3 var(--body); margin: 44px 0 10px; padding-top: 18px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.doc .meta { font: 500 14px/1.4 var(--mono); color: var(--ink-soft); margin: 0 0 28px; }
.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--ink-soft); }
.doc code { font: 600 .88em var(--mono); background: var(--paper-2); padding: 2px 6px; border-radius: 6px; }
.doc em { font-style: normal; background: var(--paper-2); padding: 1px 6px; border-radius: 6px; }
.doc article > p:first-of-type:not(.meta) { font-size: 19px; }
.doc article + article { margin-top: 64px; }
html[data-lang] .doc article + article { margin-top: 0; }

footer { border-top: 1px solid var(--line); padding: 28px 0 40px; font-size: 14px; color: var(--ink-soft); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 520px) { body { font-size: 16px; } .doc { padding-top: 32px; } }