/* Limon Saha tanıtım sayfası. Jetonlar CONTENT §3.2; renkler yalnız hex (spec §6.1: CSS'te renk anahtar kelimesi yok). */
@font-face { font-family: 'Figtree'; font-weight: 300 900; font-display: swap; src: url(/fonts/figtree-latin.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: 'Figtree'; font-weight: 300 900; font-display: swap; src: url(/fonts/figtree-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #FFFFFF; --raised: #F1F2F0; --text: #111311; --muted: #545955;
  --accent: #FFD83D; --on-accent: #111311; --accent-ink: #7A6000; --accent-hover: #FFE36E;
  --saha: #0F3D2A; --saha-step: #0A2E1F; --on-saha: #FFFFFF; --on-saha-muted: #C9D6CE;
  --ink-field: #111311; --on-ink-field: #F2F2F2; --ink-step: #262826;
  --danger: #B42318; --success: #1F7A45; --control-border: #8A8F8B;
  --team-mav: #3B82C4; --team-mav-ink: #3678B4; --team-trc: #F07A2E; --team-trc-ink: #B25A22;
  --focus: #111311; --focus-on-dark: #FFD83D;
  --saygi-panel: var(--ink-field); --saygi-disk: var(--saha);
  --xl: clamp(2.75rem, 5.6vw, 5.5rem); --l: clamp(2rem, 4vw, 3.75rem); --m: clamp(1.5rem, 2.5vw, 2.25rem); --body: 1.125rem; --s: 0.9375rem;
  --kenar: 2rem; --bosluk: clamp(7.5rem, 14vh, 12rem); --yaricap: 1.5rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111311; --raised: #1E1E1E; --text: #F2F2F2; --muted: #B4B4B4; --accent-ink: #FFD83D;
    --danger: #FF7A70; --success: #3FC07A; --control-border: #8C8C8C; --team-mav-ink: #3B82C4; --team-trc-ink: #F07A2E;
    --focus: #FFD83D; --saygi-panel: var(--saha); --saygi-disk: var(--ink-field);
  }
}
@media (max-width: 37.5rem) { :root { --body: 1.0625rem; --kenar: 1rem; --bosluk: 6rem; } }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: Figtree, system-ui, sans-serif; font-size: var(--body); font-weight: 500; line-height: 1.5; background: var(--bg); color: var(--text); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
h1, h2, h3 { text-wrap: balance; }
h2 { font-size: var(--l); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.hero :focus-visible, .ust :focus-visible, .odalar :focus-visible, .alt :focus-visible, .saygi :focus-visible, .sonuc :focus-visible, .mac :focus-visible { outline-color: var(--focus-on-dark); }
::selection { background: var(--accent); color: var(--on-accent); }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.atla { position: absolute; left: var(--kenar); top: 0.75rem; z-index: 10; padding: 0.75rem 1.25rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; transform: translateY(-200%); }
.atla:focus { transform: none; }

/* Birincil düğme: tek şekil, limon hap */
.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.75rem; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color .16s, transform .16s; }
.dugme:hover { background: var(--accent-hover); }
.dugme:active { transform: scale(0.98); }
.dugme--kucuk { min-height: 2.75rem; padding: 0 1.25rem; font-size: var(--s); }

/* Üst çubuk */
.ust { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem var(--kenar); background: var(--saha); color: var(--on-saha); }
.ust--hero { position: absolute; inset: 0 0 auto; z-index: 3; background: transparent; }
.ust__marka { display: inline-flex; align-items: center; min-height: 2.75rem; }
.ust__marka img { width: 9.5rem; }
.ust__linkler { display: flex; gap: 0.25rem; }
.ust__link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; font-weight: 700; text-decoration: none; border-radius: 999px; transition: background-color .16s; }
.ust__link:hover { background: var(--saha-step); }

/* Hero: dev limon halka, içinde Limo (CONTENT §4.2) */
.hero { position: relative; min-height: max(100svh, 40rem); display: grid; align-items: center; background: var(--saha); color: var(--on-saha); overflow: hidden; }
.hero__sahne { position: absolute; inset: 0; }
.hero__halka { position: absolute; width: 100vh; height: 100vh; left: calc(86vw - 50vh); top: 10vh; border: 12vh solid var(--accent); border-radius: 50%; }
.hero__limo { position: absolute; width: 62vh; height: 62vh; left: calc(86vw - 31vh); top: 29vh; }
.hero__poster, .cerceve__poster { width: 100%; height: 100%; object-fit: contain; }
.hero__metin { position: relative; z-index: 2; padding: 7rem var(--kenar) 4rem; max-width: min(46rem, 52vw, calc(86vw - 50vh - 2rem)); }
.hero h1 { font-size: var(--xl); font-weight: 800; line-height: 0.98; letter-spacing: -0.03em; }
.hero__cumle { margin-top: 2.25rem; max-width: 34rem; font-size: 1.25rem; }
.hero .dugme { margin-top: 2rem; }
.hero__not { margin-top: 1.125rem; font-size: var(--s); color: var(--on-saha-muted); }
.limo-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .24s; }
.limo-canvas.hazir { opacity: 1; }

/* Giriş cümlesi, satır içi daireler */
.giris { padding: var(--bosluk) var(--kenar); }
.giris__cumle { text-wrap: balance; max-width: 62%; margin-inline: auto; text-align: center; font-size: var(--m); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.disk { display: inline-block; width: 0.85em; height: 0.85em; border-radius: 50%; vertical-align: -0.1em; margin-inline: 0.06em; }
.disk--mavi { background: var(--team-mav); }
.disk--turuncu { background: var(--team-trc); }
.disk--limo { background: var(--saha); object-fit: cover; object-position: 50% 22%; transform: scale(1); }

/* Odalar: büyütülmüş oda anahtarı; durum :has(:checked) ile, JS olmadan da (L1-K5) */
.odalar { --alan: var(--saha); --yazi: var(--on-saha); --adim: var(--saha-step); background: var(--alan); color: var(--yazi); overflow: hidden; transition: background-color .2s, color .2s; }
.odalar:has(#oda-turuncu:checked) { --alan: var(--ink-field); --yazi: var(--on-ink-field); --adim: var(--ink-step); }
.odalar:has(#oda-konuk:checked) { --alan: var(--accent); --yazi: var(--on-accent); --adim: #F2C71E; }
.odalar__ic { min-height: 0; display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: 2rem; padding: 6rem 0 6rem var(--kenar); }
.oda { display: none; }
.odalar:has(#oda-mavi:checked) .oda--mavi, .odalar:has(#oda-turuncu:checked) .oda--turuncu, .odalar:has(#oda-konuk:checked) .oda--konuk { display: block; }
.oda__baslik { font-size: var(--m); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.oda__cumle { margin-top: 1.25rem; max-width: 30rem; }
.sekmeler { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; font-size: var(--s); font-weight: 700; }
.sekmeler li { padding: 0.5rem 1rem; border-radius: 1.25rem; background: var(--adim); }
.sekmeler li:first-child { background: var(--accent); color: var(--on-accent); }
.odalar:has(#oda-konuk:checked) .sekmeler li:first-child { background: var(--ink-field); color: var(--on-ink-field); }
.hak { display: block; margin-top: 0.25rem; font-size: 0.8125rem; font-weight: 600; opacity: 0.9; }
.nokta { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; margin-right: 0.4em; vertical-align: -0.02em; }
.nokta--mavi { background: var(--team-mav); }
.nokta--turuncu { background: var(--team-trc); }
.anahtar { justify-self: end; width: 46vw; margin-right: -9vw; border: 0; padding: 0.35em; display: grid; gap: 0.25em; font-size: clamp(1.75rem, 5.2vh, 3.25rem); font-weight: 800; letter-spacing: -0.02em;
  background: var(--adim); border-radius: 1.6em; }
.anahtar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.anahtar label { display: flex; align-items: center; min-height: 2.6em; padding: 0 0.9em; border-radius: 1.3em; cursor: pointer; transition: background-color .2s, color .2s; }
.anahtar label:hover { background: color-mix(in srgb, var(--yazi) 10%, transparent); }
.anahtar input:checked + label { background: var(--accent); color: var(--on-accent); }
.odalar:has(#oda-konuk:checked) .anahtar input:checked + label { background: var(--ink-field); color: var(--on-ink-field); }
/* odak halkası hapın dışında, izde: koyu izde beyaz, Konuk'un limon izinde mürekkep */
.anahtar input:focus-visible + label { outline: 3px solid var(--yazi); outline-offset: 3px; }

/* Maç boyunca: yakın çekim panosu */
.pano { padding: var(--bosluk) var(--kenar); }
.pano__ic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 6.5rem; gap: 0.5rem; }
.karo { position: relative; overflow: hidden; border-radius: var(--yaricap); padding: 1.25rem; display: flex; flex-direction: column; justify-content: flex-end; }
.karo--baslik { grid-column: 1 / 7; grid-row: 1 / 3; justify-content: flex-start; padding: 1.25rem 1.25rem 1.25rem 0; overflow: visible; }
.karo--tepki { grid-column: 7 / 13; grid-row: 1 / 3; }
.karo--tahmin { grid-column: 1 / 7; grid-row: 3 / 8; }
.karo--devre { grid-column: 7 / 10; grid-row: 3 / 8; }
.karo--an { grid-column: 10 / 13; grid-row: 3 / 5; }
/* üç sıra: balon, saat ve '12 yanıt' hapı altyazı şeridinin üstünde kalır */
.karo--yanit { grid-column: 10 / 13; grid-row: 5 / 8; }
.karo--rozet { grid-column: 1 / 7; grid-row: 8 / 11; }
.karo--tablo { grid-column: 7 / 13; grid-row: 8 / 11; }
.karo--raised { background: var(--raised); color: var(--text); }
.karo--saha { background: var(--saha); color: var(--on-saha); }
.karo--ink { background: var(--ink-field); color: var(--on-ink-field); }
.karo--limon { background: var(--accent); color: var(--on-accent); }
.karo figcaption { position: relative; z-index: 1; font-size: var(--s); margin: 0 -1.25rem -1.25rem; padding: 0.75rem max(1.25rem, calc(100% - 26rem)) 1.25rem 1.25rem; background: inherit; }
.karo figcaption strong { display: block; font-size: var(--body); font-weight: 700; }
/* yakın çekim: metin karoda kırılır, hap ve çip sıraları kırılmaz ve sağ kenardan taşar (CONTENT §4.5) */
.parca { position: absolute; top: 1.25rem; left: 1.25rem; right: 1.25rem; font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.secenek, .hap, .cipler span, .tepki { flex: none; white-space: nowrap; }
.parca__soru { font-size: 1.15em; }
.parca__not { margin-top: 0.6em; font-size: 0.8em; color: var(--accent-ink); }
.karo--saha .parca__not { color: var(--accent); }
.secenekler, .cipler { display: flex; gap: 0.35em; margin-top: 0.6em; }
.secenek, .cipler span, .hap { display: inline-flex; align-items: center; padding: 0.35em 0.8em; border-radius: 999px; background: var(--bg); font-size: 0.8em; }
.karo--saha .secenek { background: var(--saha-step); }
.secenek--secili, .cip--secili { background: var(--accent) !important; color: var(--on-accent); }
.parca--tahmin { font-size: clamp(2rem, 3vw, 3.25rem); }
.parca--devre { font-size: clamp(2rem, 3.2vw, 3.25rem); }
.sistem { display: inline-block; padding: 0.45em 0.9em; border-radius: 1em; background: var(--ink-step); }
.sistem b { margin-left: 0.4em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.parca--tepki { display: flex; gap: 0.4em; font-size: clamp(2.25rem, 3.6vw, 3.5rem); font-variant-numeric: tabular-nums; }
.tepki { display: inline-flex; align-items: center; gap: 0.25em; padding: 0.25em 0.6em 0.25em 0.3em; border-radius: 999px; background: var(--on-accent); color: var(--accent); }
.tepki img { width: 1.4em; height: 1.4em; }
.balon { display: inline-flex; flex-direction: column; padding: 0.55em 0.9em; border-radius: 0.9em 0.9em 0.9em 0.2em; background: var(--bg); font-size: 0.85em; }
.balon__ad { font-size: 0.7em; color: var(--team-mav-ink); }
.balon__saat { align-self: flex-end; font-size: 0.6em; color: var(--muted); font-variant-numeric: tabular-nums; }
.parca--an { font-size: clamp(1.25rem, 1.7vw, 1.75rem); }
.parca--yanit { display: grid; justify-items: start; font-size: clamp(1.5rem, 2vw, 2rem); }
.parca--yanit .hap { margin-top: 0.4em; background: var(--accent); color: var(--on-accent); }
.parca--rozet { display: flex; align-items: center; gap: 0.4em; font-size: clamp(2.25rem, 3.4vw, 3.5rem); }
.rozet { flex: none; width: 2em; height: 3em; }
.parca--tablo { font-size: clamp(1.75rem, 2.6vw, 2.75rem); }
.sira { width: max-content; }
.sira { display: flex; gap: 1.2em; align-items: baseline; margin-top: 0.5em; padding: 0.5em 0.9em; border-radius: 0.8em; background: var(--bg); font-variant-numeric: tabular-nums; }

/* Lafı Limo'ya bırak */
.limo { padding: var(--bosluk) var(--kenar); }
.limo__ic { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.limo__cumle { margin-top: 1.5rem; max-width: 34rem; }
.satirlar { margin-top: 2.5rem; display: grid; gap: 0.25rem; }
.satirlar button { display: grid; grid-template-columns: 4.5rem 1fr; column-gap: 1.25rem; align-items: center; width: 100%; padding: 0.75rem 1rem 0.75rem 0.75rem; border: 0; border-radius: var(--yaricap);
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: color .24s, background-color .24s, transform .16s; }
.satirlar button img { grid-row: 1 / 3; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--saha); object-fit: cover; }
.satir__ad { font-size: var(--m); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.satir__metin { font-size: var(--s); color: var(--muted); }
.satirlar button[aria-pressed="true"] { background: var(--raised); }
.satirlar:has(button:hover) button:not(:hover) .satir__ad { color: var(--muted); }
.satirlar button:active { transform: scale(0.98); }
.limo__sahne { position: sticky; top: 8vh; display: grid; justify-items: center; }
.cerceve { position: relative; width: min(35rem, 40vw); aspect-ratio: 1; border-radius: 50%; background: var(--saha); border: calc(min(35rem, 40vw) * 0.12) solid var(--accent); overflow: hidden; }
.cerceve__poster { position: absolute; inset: 0; }
.durdur { position: absolute; z-index: 2; right: 0.75rem; bottom: 0.75rem; min-height: 2.75rem; padding: 0 1.1rem; border: 2px solid var(--accent); border-radius: 999px; background: var(--saha); color: var(--on-saha); font: inherit; font-size: var(--s); font-weight: 700; cursor: pointer; }
.durdur--durdu { background: var(--accent); color: var(--on-accent); }
/* Limo'nun kutusu 86vw'de ortalı; düğme ortada durursa yatay masaüstünde de ekranda kalır */
.hero .durdur { right: 50%; bottom: 6%; transform: translateX(50%); }
.cerceve .durdur { right: 50%; bottom: 7%; transform: translateX(50%); }
.hero__poster, .cerceve__poster { transition: opacity .24s; }
:has(> .limo-canvas.hazir) > .hero__poster, :has(> .limo-canvas.hazir) > .cerceve__poster { opacity: 0; }

/* Maç günü: dört alan, aynı kart */
.mac { display: grid; grid-template-columns: repeat(4, 1fr); }
.mac__alan { position: relative; min-height: 64svh; padding: 2.5rem 1.5rem; display: flex; flex-direction: column; }
.mac__alan--saha { background: var(--saha); color: var(--on-saha); }
.mac__alan--limon { background: var(--accent); color: var(--on-accent); }
.mac__alan--ink { background: var(--ink-field); color: var(--on-ink-field); }
.mac__alan--acik { background: #F1F2F0; color: #111311; }
.mac h2 { position: absolute; top: 2.5rem; left: 1.5rem; }
.kart { margin-top: 7.5rem; width: min(18rem, 100%); padding: 1rem; border-radius: 1rem; background: #FFFFFF; color: #111311; font-size: var(--s); font-weight: 600; display: grid; gap: 0.5rem; font-variant-numeric: tabular-nums; }
.kart__ust b { margin-left: 0.3em; white-space: nowrap; }
.kart__ust--saat { display: flex; justify-content: space-between; gap: 0.5em; }
.kart__durum { font-weight: 800; }
.kart__cipler, .kart__alt { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.8125rem; }
.kart__cipler span { padding: 0.2rem 0.6rem; border-radius: 999px; background: #F1F2F0; }
.kart__alt { flex-direction: column; gap: 0.15rem; color: #545955; }
.kart__limon { font-size: 1.25rem; font-weight: 800; color: #1F7A45; }
.mac__cumle { margin-top: auto; font-size: var(--m); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }

/* Saygı: iç panel, daire portre */
.saygi { padding: var(--bosluk) 1.25rem; }
.saygi__panel { position: relative; display: grid; grid-template-columns: 63fr 37fr; min-height: 100svh; border-radius: var(--yaricap); background: var(--saygi-panel); color: var(--on-ink-field); overflow: hidden; }
.saygi__sol { padding: 3.5rem; display: flex; flex-direction: column; }
.saygi__portre { position: relative; margin-top: auto; margin-bottom: -7.6vw; width: 38vw; aspect-ratio: 1; border-radius: 50%; background: var(--saygi-disk); border: 4.56vw solid var(--accent); overflow: hidden; }
.saygi__portre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.saygi__sag { padding: 3.5rem 3.5rem 3.5rem 0; display: flex; flex-direction: column; gap: 3rem; align-items: flex-start; }
.saygi__blok { max-width: 18.75rem; }
.saygi__blok h3 { font-size: var(--body); font-weight: 700; }
.saygi__blok p { margin-top: 0.5rem; }
.saygi__not { font-size: var(--s); color: var(--on-saha-muted); margin-bottom: -2rem; }

/* Sık sorulanlar */
.sss { padding: var(--bosluk) var(--kenar); }
.sss__ic { display: grid; grid-template-columns: 4fr 8fr; gap: 2rem; align-items: start; }
.sss h2 { position: sticky; top: 6rem; }
.sss__liste { display: grid; gap: 0.5rem; }
.sss details { border-radius: var(--yaricap); background: var(--raised); transition: background-color .2s; }
.sss summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; padding: 1rem 1.5rem; font-weight: 700; cursor: pointer; list-style: none; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: ''; flex: none; width: 1rem; height: 1rem; border-radius: 50%; border: 3px solid currentColor; transition: background-color .2s; }
.sss details[open] { background: var(--accent); color: var(--on-accent); }
.sss details[open] summary::after { background: currentColor; }
.sss details p { padding: 0 1.5rem 1.5rem; max-width: 52ch; }

/* Liste: form ya da kapalı durum */
.liste { padding: var(--bosluk) var(--kenar); }
.kapali, #liste-formu { max-width: 60rem; }
.kapali p { margin-top: 1.25rem; font-size: var(--m); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; max-width: 32ch; }
.kapali__linkler { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.kapali__linkler a { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.5rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; transition: background-color .16s; }
.kapali__linkler a:hover { background: var(--accent-hover); }
.alanlar { display: grid; grid-template-columns: 3fr 2fr; gap: 1rem; margin-top: 2rem; }
.alan label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.alan input { width: 100%; min-height: 3.5rem; padding: 0 1.25rem; border: 2px solid var(--control-border); border-radius: 999px; background: var(--raised); color: var(--text); font: inherit; }
.alan input[aria-invalid="true"] { border-color: var(--danger); }
.hata { margin-top: 0.4rem; color: var(--danger); font-size: var(--s); font-weight: 700; }
/* satırın tamamı hedef (en az 44 px); hata etiketin altında, metinle hizalı */
.kutu { display: flex; flex-wrap: wrap; gap: 0 0.75rem; align-items: center; margin-top: 0.5rem; }
.kutu input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--saha); }
.kutu label { flex: 1; padding-block: 0.6rem; font-weight: 700; }
.kutu .hata { flex-basis: 100%; margin: 0 0 0 2.25rem; }
.onay { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border: 0; border-radius: var(--yaricap); background: var(--raised); }
.onay legend { float: left; width: 100%; font-weight: 800; }
.onay__metin { clear: both; padding-top: 0.5rem; font-size: var(--s); }
#liste-formu .dugme { margin-top: 2rem; }
.liste__not { margin-top: 1rem; font-size: var(--s); color: var(--muted); max-width: 40rem; }
.tuzak { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Alt bilgi: Saha alanı, limon işareti büyük */
.alt { position: relative; overflow: hidden; background: var(--saha); color: var(--on-saha); padding: 5rem var(--kenar) 3rem; min-height: 36rem; }
.alt__ic { position: relative; z-index: 1; max-width: 46rem; display: grid; gap: 2.5rem; justify-items: start; }
.alt__bloklar { display: flex; flex-wrap: wrap; gap: 2.5rem 4rem; }
.alt__baslik { font-size: var(--body); font-weight: 800; letter-spacing: 0; margin-bottom: 0.5rem; }
.alt__blok a { display: inline-block; padding: 0.55rem 0; }
.alt__yasal { display: grid; gap: 0.35rem; font-size: var(--s); color: var(--on-saha-muted); }
.alt__isaret { position: absolute; width: 70vw; max-width: none; right: -14vw; bottom: -24vw; pointer-events: none; }

/* Metin ve sonuç sayfaları */
.belge { max-width: 44rem; padding: 4rem var(--kenar) var(--bosluk); }
.belge h1 { font-size: var(--l); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 2rem; }
.belge p + p { margin-top: 1rem; }
.sonuc { min-height: 60svh; padding: 4rem var(--kenar) 6rem; background: var(--saha); color: var(--on-saha); }
.sonuc h1 { font-size: var(--l); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; max-width: 18ch; }
.sonuc p { margin-top: 1.5rem; max-width: 40rem; font-size: 1.25rem; }
.sonuc p:has(.dugme) { margin-top: 2rem; }
.sonuc-sayfasi .ust, .metin-sayfasi .ust { background: var(--saha); }

/* Bölüm girişleri: yalnız destekleyen tarayıcıda, içerik her durumda görünür */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .giris__cumle, .oda__baslik, .oda__cumle, .karo, .limo h2, .limo__cumle, .satirlar li, .mac__cumle, .kart, .saygi h2, .saygi__blok, .sss h2, .sss details, .liste h2, .kapali p, .alanlar {
      animation: yuksel linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    .karo:nth-child(2n), .satirlar li:nth-child(2n), .saygi__blok:nth-child(2), .sss details:nth-child(2n) { animation-range: entry 8% entry 48%; }
  }
}
@keyframes yuksel { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__poster { animation: belir .6s ease-out both; }
}
@keyframes belir { from { opacity: 0; transform: translateY(1rem) scale(0.97); } }

/* Koyu temada mürekkep alanlar sayfa zemininden (#111311) bir adım ayrılır; taban kurallardan sonra gelmeli */
@media (prefers-color-scheme: dark) {
  .karo--ink, .mac__alan--ink { background: var(--ink-step); }
  .karo--ink .sistem { background: #3A3D3A; }
  .odalar:has(#oda-turuncu:checked) { --alan: var(--ink-step); --adim: #3A3D3A; }
}

/* Telefon (CONTENT §7) */
@media (max-width: 47.5rem), (max-aspect-ratio: 1/1) {
  .ust__link--genis { display: none; }
  .ust__marka img { width: 8rem; }
  /* halka metnin altında akışta: kısa telefonda da CTA ve 18+ satırı halkanın üstüne düşmez */
  .hero { --d: min(130vw, 82svh); min-height: 0; align-items: start; }
  .hero__sahne { position: relative; inset: auto; height: calc(var(--d) * 0.86); margin-top: 2rem; }
  .hero__halka { width: var(--d); height: var(--d); left: calc(50% - var(--d) / 2); top: 0; border-width: calc(var(--d) * 0.12); }
  .hero__limo { width: calc(var(--d) * 0.71); height: calc(var(--d) * 0.71); left: calc(50% - var(--d) * 0.355); top: calc(var(--d) * 0.12); }
  .hero__metin { max-width: none; padding-top: 13svh; padding-bottom: 0; }
  .hero h1 { font-size: 11.5vw; }
  .hero__cumle { margin-top: 1.25rem; font-size: var(--body); }
  .hero .dugme { margin-top: 1.5rem; }
  .giris__cumle { max-width: none; text-align: left; font-size: 1.5rem; }
  .odalar__ic { grid-template-columns: 1fr; padding: 4rem var(--kenar); min-height: 0; align-content: start; }
  .anahtar { order: -1; justify-self: stretch; width: auto; margin: 0; grid-template-columns: repeat(3, 1fr); font-size: var(--s); padding: 0.3rem; border-radius: 999px; }
  .anahtar label { min-height: 4.5rem; padding: 0 0.6rem; justify-content: center; text-align: center; line-height: 1.2; border-radius: 999px; }
  .pano { padding-inline: var(--kenar); }
  .pano__ic { grid-template-columns: 1fr 1fr; grid-auto-rows: 28vw; gap: 0.375rem; }
  .pano__ic > .karo { grid-column: span 1 !important; grid-row: span 2 !important; }
  .pano__ic > .karo--baslik, .pano__ic > .karo--tahmin, .pano__ic > .karo--tepki, .pano__ic > .karo--tablo { grid-column: 1 / -1 !important; }
  .pano__ic > .karo { grid-row: span 3 !important; }
  .pano__ic > .karo--tepki, .pano__ic > .karo--tablo { grid-row: span 2 !important; }
  .pano__ic > .karo--baslik { grid-row: span 1 !important; padding: 0; justify-content: flex-end; }
  .karo { padding: 1rem; }
  .parca { top: 1rem; left: 1rem; right: 1rem; }
  .parca--an { font-size: 1.25rem; }
  .parca--rozet { flex-direction: column; align-items: flex-start; font-size: 1.625rem; }
  .parca--tepki { font-size: 2.25rem; }
  .parca--yanit { font-size: 1.375rem; }
  .parca--tablo { font-size: 1.25rem; }
  .sira { width: auto; gap: 0.7em; }
  .parca--tahmin { font-size: 1.875rem; }
  .parca--devre { font-size: 1.75rem; }
  .karo figcaption strong { font-size: 1rem; }
  .karo figcaption { font-size: 0.875rem; margin: 0 -1rem -1rem; padding: 0.6rem 1rem 1rem; }
  .limo__ic { grid-template-columns: 1fr; }
  .limo__sahne { display: none; }
  .satirlar .cerceve { width: 78vw; margin: 0.75rem auto 1rem; border-width: 9.36vw; }
  .mac { grid-template-columns: 1fr; }
  .mac__alan { min-height: 0; padding: 2.5rem var(--kenar); }
  .mac h2 { position: static; margin-bottom: 1.5rem; order: -2; }
  .mac__cumle { order: -1; margin-top: 0; }
  .kart { margin-top: 1.5rem; }
  .saygi { padding-inline: 0.625rem; }
  .saygi__panel { grid-template-columns: 1fr; min-height: 0; }
  .saygi__sol { display: contents; }
  .saygi h2 { padding: 2.5rem 1.5rem 0; }
  .saygi__sag { padding: 2rem 1.5rem 2.5rem; }
  .saygi__portre { order: 1; justify-self: center; width: 86vw; border-width: 10.3vw; margin: 0 0 -21.5vw; }
  .saygi__not { margin-bottom: 0; }
  .sss__ic { grid-template-columns: 1fr; }
  .sss h2 { position: static; }
  .sss summary { min-height: 4rem; padding: 1rem 1.25rem; }
  .sss details p { padding: 0 1.25rem 1.25rem; }
  .alanlar { grid-template-columns: 1fr; }
  #liste-formu .dugme { width: 100%; }
  .alt { min-height: 0; padding-bottom: 60vw; }
  .alt__bloklar { gap: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
  .alt__isaret { width: 100vw; right: -12vw; bottom: -36vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01s !important; animation: none !important; }
}