:root {
  --paper: #FAF8F4; --surface: #FFFFFF; --sunken: #F2EEE7; --ink: #1B1A18; --muted: #57534E;
  --border: #E4DED4; --primary: #26338A; --brass: #8F6512;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F1217; --surface: #171B22; --sunken: #1E232C; --ink: #ECEDEF; --muted: #B4B9C2;
    --border: #2A303B; --primary: #A3AEFF; --brass: #E6B450;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}
main { max-width: 960px; margin: 0 auto; padding: 24px 16px 64px; }
header { justify-content: space-between; display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
header a { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
header strong { font-size: 22px; letter-spacing: -0.01em; }
.isaret { width: 36px; height: 36px; }
.isaret path { stroke: var(--primary); }
.isaret circle { fill: var(--brass); }
h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 8px; }
h2 { font-size: 20px; line-height: 1.3; margin: 32px 0 8px; }
p, li { color: var(--ink); }
.soluk { color: var(--muted); font-size: 15px; }
ul { padding-left: 22px; }
li { margin: 6px 0; }
a { color: var(--primary); }
.kartlar { display: grid; gap: 12px; margin: 24px 0; }
.kart { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.kart h2 { margin: 0 0 4px; font-size: 17px; }
.kart p { margin: 0; color: var(--muted); font-size: 15px; }
footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--border); }
footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
details { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin: 10px 0; }
summary { font-weight: 600; cursor: pointer; }
details p { margin: 10px 0 0; color: var(--muted); }
html { scroll-behavior: smooth; }
.atla { position: absolute; left: 16px; top: -80px; background: var(--surface); padding: 12px; z-index: 3; }
.atla:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 5px; }
.ust-destek { font-size: 15px; font-weight: 600; }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 64px 0 80px; }
.hero h1 { font-size: clamp(38px, 5.2vw, 60px); letter-spacing: -.045em; line-height: 1.06; }
.giris { font-size: 20px; color: var(--muted); max-width: 42ch; }
.etiket { color: var(--brass); font-size: 11px; font-weight: 750; letter-spacing: .15em; }
.eylemler { display: flex; align-items: flex-start; flex-direction: column; gap: 14px; margin-top: 28px; }
.dugme { display: inline-flex; gap: 24px; align-items: center; background: var(--primary); color: var(--paper); text-decoration: none; border-radius: 12px; padding: 13px 20px; font-weight: 650; font-size: 15px; }
.oyun-ornek { border: 1px solid var(--border); background: var(--surface); border-radius: 24px; padding: 26px; box-shadow: 0 16px 40px #1b1a1808; }
.ornek-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--brass); }
.ornek-satir { display: flex; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--border); }
.sira { color: var(--brass); font-size: 24px; font-weight: 350; }
.ornek-satir strong { font-size: 18px; }
.ornek-satir p { margin: 3px 0 0; font-size: 14px; color: var(--muted); }
.ornek-alt { color: var(--muted); margin: 20px 0 0; font-size: 12px; }
.ozellikler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ozellikler .kart { border-radius: 18px; padding: 24px; }
.numara { color: var(--brass); font-size: 10px; font-weight: 650; letter-spacing: .12em; }
h3 { font-size: 19px; line-height: 1.3; margin: 24px 0 10px; }
.bolum { margin-top: 0; font-size: 32px; letter-spacing: -.025em; }
.gunluk { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-block: 1px solid var(--border); margin-top: 48px; padding: 32px 0; }
.gunluk h2 { margin-top: 0; font-size: 26px; }
.gunluk p { max-width: 44ch; }
.terim { display: flex; gap: 6px; }
.terim span { display: grid; place-items: center; width: 42px; height: 48px; border-radius: 8px; background: var(--primary); color: var(--paper); font-weight: 700; }
.sade { max-width: 640px; margin-top: 48px; }
.sade p { color: var(--muted); }
.taslak { font-size: 13px; padding: 12px 16px; margin-bottom: 20px; color: var(--ink); background: var(--sunken); border: 1px dashed var(--brass); border-radius: 10px; }
@media (max-width: 700px) { main { padding-inline: 20px; } .hero { grid-template-columns: 1fr; padding: 24px 0 48px; gap: 28px; } .hero h1 { font-size: 46px; } .ozellikler { grid-template-columns: 1fr; } .ozellikler .kart { padding: 22px; } h3 { margin-top: 12px; } .gunluk { flex-direction: column; align-items: flex-start; } .giris { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }