@font-face{font-family:'Big Shoulders Display';font-style:normal;font-display:swap;font-weight:800;src:url('/_lab/yazi/big-shoulders-display-latin-ext-800-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-display:swap;font-weight:800;src:url('/_lab/yazi/big-shoulders-display-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-display:swap;font-weight:400;src:url('/_lab/yazi/literata-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Literata';font-style:normal;font-display:swap;font-weight:400;src:url('/_lab/yazi/literata-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-display:swap;font-weight:700;src:url('/_lab/yazi/literata-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Literata';font-style:normal;font-display:swap;font-weight:700;src:url('/_lab/yazi/literata-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  color-scheme: light dark;
  --zemin: #f4f6f8;
  --murekkep: #16191f;
  --turkuaz: #0e5e66;
  --turkuaz-metin: #0e5e66;
  --turkuaz-alan-metin: #ffffff;
  --yuzey: #ffffff;
  --soluk: #4a5360;
  --turuncu: #e2661a;
  --font-baslik: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-metin: 'Literata', Georgia, serif;
  --yazi-xs: 0.875rem;
  --yazi-sm: 0.9375rem;
  --yazi-govde: 1.1875rem;
  --yazi-lede: 1.3125rem;
  --yazi-h2: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  --yazi-dev: clamp(3.25rem, 1.4rem + 6.6vw, 8.5rem);
  --aralik-1: 0.25rem;
  --aralik-2: 0.5rem;
  --aralik-3: 1rem;
  --aralik-4: 1.5rem;
  --aralik-5: 2.5rem;
  --aralik-6: clamp(2.5rem, 2rem + 3vw, 5rem);
  --kenar: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --olcu: 68ch;
  --kap: 78rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #0f1317;
    --murekkep: #e9edf1;
    --yuzey: #171d23;
    --soluk: #a3aeba;
    --turkuaz-metin: #5cc3cc;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--font-metin);
  font-size: var(--yazi-govde);
  line-height: 1.7;
  hyphens: auto;
}

h1, h2 { font-family: var(--font-baslik); font-weight: 800; line-height: 1.06; hyphens: manual; margin: 0; }
p { margin: 0; }
a { color: var(--turkuaz-metin); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 3px; }

:focus-visible { outline: 3px solid var(--turkuaz-metin); outline-offset: 3px; }

.kap { width: min(100% - 2 * var(--kenar), var(--kap)); margin-inline: auto; }

.atla {
  position: absolute; left: var(--aralik-3); top: -4rem; z-index: 10;
  padding: var(--aralik-2) var(--aralik-3); background: var(--murekkep); color: var(--zemin);
}
.atla:focus { top: var(--aralik-3); }

.ust { display: flex; align-items: baseline; gap: var(--aralik-4); padding-block: var(--aralik-4); }
.marka { font-family: var(--font-baslik); font-weight: 800; font-size: 1.875rem; line-height: 1; color: inherit; text-decoration: none; }
.ust a.ana { margin-inline-start: auto; font-size: 1.0625rem; }

/* Düz renk alanı: DESIGN.md'nin "cesaretin harcandığı tek yer". Gradient ve gölge yok. */
.alan { background: var(--turkuaz); color: var(--turkuaz-alan-metin); padding-block: var(--aralik-6); }
.alan h1 { font-size: var(--yazi-dev); line-height: 1.04; }
.alan p { margin-block-start: var(--aralik-3); max-width: 50ch; font-size: var(--yazi-lede); line-height: 1.5; }

.liste { list-style: none; margin: 0; padding: 0; }
.satir {
  display: grid; gap: var(--aralik-4); padding-block: var(--aralik-5);
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: start;
  border-block-end: 1px solid color-mix(in srgb, var(--soluk) 40%, transparent);
}
.satir:last-child { border-block-end: 0; }
.kapak { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--yuzey); }
.satir h2 { font-size: var(--yazi-h2); }
.satir h2 a { color: inherit; text-decoration: none; }
.satir h2 a:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 0.12em; }
.satir p { margin-block-start: var(--aralik-2); max-width: var(--olcu); }
.tur { margin: var(--aralik-3) 0 0; font-size: var(--yazi-sm); color: var(--soluk); }
.tur dt { display: inline; }
.tur dd { display: inline; margin: 0; }
.tur dt::after { content: ': '; }
.bos { padding-block: var(--aralik-6); color: var(--soluk); }

.alt { padding-block: var(--aralik-5); color: var(--soluk); font-size: var(--yazi-sm); }

@media (max-width: 40rem) {
  .satir { grid-template-columns: minmax(0, 1fr); gap: var(--aralik-3); }
}