/* Hallmark · shape: short game page (anatomy: try) · genre: playful · theme: Hum (deal 2/3, seed turkish-online-trivia-quiz-404c·ad46db28·2026-11-10·r0) · redesign: full · draw: 81ba1c · job: try
 * hero: Stage (/), kept elsewhere · nav: edge-aligned · footer: mast · imagery: the product built (the question screen, same components as /yarisma/soru) · signature: the question card in card stock, the right answer pressed into mint
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette, spring on the primary action · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a leaderboard and rules could be any quiz; led with the game's own question screen and its 15-step ladder instead of the old stock globe */
/* Hallmark · waive 84 · the question screen exists only inside a POST-started session with a running 35 s timer · the hero is built from the same components the real /yarisma/soru page now uses */
/* Hallmark · waive 12 · posture: full-palette with the theme's declared spring · --ease-spring on the primary action only, per Hum */
/* Hallmark · answered F4 · the ink tab is a selection state, not a button recipe; one pear primary per page · answered 25 · the rule lines are one or two short sentences set as captions under display figures · answered F7 · inputs share one recipe by role */
/* Hallmark · dropped "Ana Sayfa" nav link (the logo links to /) · dropped the "Bilgi Yarışması" title beside the logo (now the home h1) · dropped the hero globe picture (still the og:image) · the guest image buttons and joker images are now text */
/* Hallmark · dropped the guest image buttons (btn_yarismakurallari.png, btn_uyeolun.png, btn_girisyapin.png) and basluk.gif · the same links are now text buttons with the same labels */
/* Hallmark · reworded the hidden "1." to "5." rank labels to visible rank numbers · kept: the __RequestVerificationToken fields are still rendered (2 on /yarisma); the record differs only by the per-request token value */
/* Hallmark · answered 44c, 77, 78 on /yarisma and /top100 · these are the game's app screens in the kept page frame, so their heads are item titles and there is no hero */
/* Hallmark · reworded "Listenin devamı için tıklayın" to "Listenin devamı" · 19 names "click here" · footer link brackets removed */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Chillax"; src: url("./fonts/chillax-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Chillax"; src: url("./fonts/chillax-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .1 0 0 0 9 -4.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .06' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .25 0 0 0 1.6 -.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.06'/%3E%3C/svg%3E");
  --tear: polygon(0% 2px, 2.94% 11.2px, 5.88% 4.9px, 8.82% 4.1px, 11.76% 9.3px, 14.71% 7.3px, 17.65% 5.3px, 20.59% 9.5px, 23.53% 9.6px, 26.47% 7.4px, 29.41% 8.8px, 32.35% 8.4px, 35.29% 10.2px, 38.24% 4.4px, 41.18% 5.7px, 44.12% 9.1px, 47.06% 9px, 50% 2.5px, 52.94% 8.8px, 55.88% 6.7px, 58.82% 11.2px, 61.76% 10.1px, 64.71% 3.2px, 67.65% 7.1px, 70.59% 11.2px, 73.53% 8.9px, 76.47% 8.4px, 79.41% 7.8px, 82.35% 11.1px, 85.29% 11.1px, 88.24% 5.7px, 91.18% 5.4px, 94.12% 10.4px, 97.06% 5.3px, 100% 3.5px, 100% calc(100% - 5px), 97.06% calc(100% - 6.3px), 94.12% calc(100% - 4.9px), 91.18% calc(100% - 11.4px), 88.24% calc(100% - 7.6px), 85.29% calc(100% - 9.3px), 82.35% calc(100% - 10.8px), 79.41% calc(100% - 2.6px), 76.47% calc(100% - 4.7px), 73.53% calc(100% - 7.6px), 70.59% calc(100% - 7.1px), 67.65% calc(100% - 6.2px), 64.71% calc(100% - 3.9px), 61.76% calc(100% - 11.1px), 58.82% calc(100% - 2.5px), 55.88% calc(100% - 5.7px), 52.94% calc(100% - 5.4px), 50% calc(100% - 8.6px), 47.06% calc(100% - 11.2px), 44.12% calc(100% - 7.1px), 41.18% calc(100% - 3.7px), 38.24% calc(100% - 6.1px), 35.29% calc(100% - 4.8px), 32.35% calc(100% - 5.6px), 29.41% calc(100% - 6.2px), 26.47% calc(100% - 5.3px), 23.53% calc(100% - 7.3px), 20.59% calc(100% - 8.1px), 17.65% calc(100% - 4.3px), 14.71% calc(100% - 11.1px), 11.76% calc(100% - 6.6px), 8.82% calc(100% - 10.6px), 5.88% calc(100% - 8.4px), 2.94% calc(100% - 8.3px), 0% calc(100% - 7.2px));
  --nav-h: 76px;
  --color-coral-soft: oklch(90% 0.06 22);
  --color-mint-soft: oklch(93% 0.06 152);
  --color-link-hover: oklch(40% 0.17 250);
}

body { background: var(--grain), var(--fibre), var(--color-paper); font-weight: 500; font-size: 1.0625rem; }
b, strong { font-weight: 600; }
a { color: var(--color-accent-2); }
a:hover { color: var(--color-link-hover); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
mark { background: color-mix(in oklab, var(--color-accent) 60%, transparent); color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding-inline: 0.12em; border-radius: 4px; }

/* ---- Controls: card stock that presses down ---------------------------------------------- */
.btn, .dugme {
  --edge: 5px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock);
  background: var(--grain), var(--fibre), var(--color-card); color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge);
  font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer;
  margin-bottom: var(--space-xs);
  transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap), background-color var(--dur-short) var(--ease-snap);
}
.btn:hover, .dugme:hover { --edge: 7px; translate: 0 -2px; color: var(--color-ink); }
.btn:active, .dugme:active { --edge: 1px; translate: 0 4px; }
.btn:focus-visible, .dugme:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { --edge: 1px; translate: 0 4px; background: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--birincil {
  background: var(--grain), var(--fibre), var(--color-accent); color: var(--color-accent-ink);
  box-shadow: 0 var(--edge) 0 0 var(--color-accent-deep), 2px calc(var(--edge) + 4px) 10px -3px color-mix(in oklab, var(--color-ink) 32%, transparent);
  transition-timing-function: var(--ease-spring);
}
.btn--buyuk { min-height: 52px; padding: 0 var(--space-xl); font-size: var(--text-lg); }
.link-buton { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--color-accent-2); text-decoration: underline; text-underline-offset: 0.16em; }
.link-buton:hover { color: var(--color-link-hover); }
.link-buton:active { translate: 0 1px; }
.link-buton:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.lnk1, .lnk2 { color: var(--color-accent-2); }

/* ---- Skip link -------------------------------------------------------------------------------- */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); color: var(--color-paper); }

/* ---- Nav: edge-aligned ----------------------------------------------------------------------- */
.ust__ic { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.logo { display: inline-flex; align-items: center; gap: var(--space-sm); flex: none; min-height: 44px; border-radius: var(--radius-input); color: var(--color-ink); text-decoration: none; }
.logo:hover { color: var(--color-ink); }
.logo:hover .logo__isaret i.dogru { translate: 0 2px; box-shadow: 0 1px 0 0 var(--color-mint-deep); }
.logo__isaret { display: grid; grid-template-columns: repeat(2, 14px); gap: var(--space-2xs); }
.logo__isaret i { display: block; height: 14px; border-radius: 4px; background: var(--grain), var(--color-accent); box-shadow: 0 3px 0 0 var(--color-accent-deep); transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
.logo__isaret i.dogru { background: var(--grain), var(--color-mint); box-shadow: 0 3px 0 0 var(--color-mint-deep); }
.logo__ad { font: 600 1.625rem/1 var(--font-display); letter-spacing: var(--tracking-display); white-space: nowrap; }
.ust__menu { display: flex; align-items: center; gap: var(--space-lg); min-width: 0; }
.menu-dugme { display: none; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-stock); background: var(--grain), var(--color-card); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-rule), 0 4px 0 0 var(--color-edge); font-weight: 600; cursor: pointer; transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
.menu-dugme:hover { translate: 0 -1px; }
.menu-dugme:active { translate: 0 3px; box-shadow: inset 0 0 0 1px var(--color-rule), 0 1px 0 0 var(--color-edge); }
.menu-dugme:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.menu-dugme[aria-expanded="true"] { background: var(--color-ink); color: var(--color-paper); box-shadow: none; translate: 0 3px; }
.ust__linkler { display: flex; align-items: center; gap: var(--space-3xs) var(--space-md); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.ust__linkler a, .ust__linkler .link-buton { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); text-decoration: none; font-size: var(--text-md); white-space: nowrap; }
.ust__linkler a:hover, .ust__linkler .link-buton:hover { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--color-accent-deep); }
.ust__linkler a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--color-accent-deep); }
.ust__uye { display: flex; align-items: center; gap: var(--space-xs); }
.ust__uye .btn { min-height: 44px; padding: 0 var(--space-md); margin-bottom: var(--space-2xs); }
.uye-adi { font-weight: 600; color: var(--color-ink); max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.satir-ici { display: inline; margin: 0; }

/* ---- Hero (home): Stage ---------------------------------------------------------------------- */
.giris { min-height: calc(100dvh - var(--nav-h)); display: grid; align-items: center; padding-block: var(--space-xl) var(--space-2xl); }
.giris__ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.giris h1 { font-size: clamp(3rem, 5.4vw + 0.5rem, 5.75rem); line-height: 1.02; max-width: 9ch; }
.giris .lead { margin-top: var(--space-lg); max-width: 30ch; color: var(--color-ink-2); }
.giris__eylem { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

/* The question screen, as the game draws it. Shared by the hero sample and /yarisma/soru. */
.sahne { position: relative; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-sugar); }
.sahne::before { content: ""; position: absolute; inset: auto var(--space-lg) calc(-1 * var(--space-sm)) var(--space-2xl); height: var(--space-lg); border-radius: var(--radius-card); background: var(--grain), var(--color-kraft); z-index: -1; filter: var(--shadow-paper); }
.kart { position: relative; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); filter: var(--shadow-paper); }
.kart--duz { filter: none; box-shadow: var(--shadow-card); }

.merdiven { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.merdiven li { display: grid; place-items: center; height: 34px; border-radius: 10px; background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--color-rule); }
.merdiven li.d { background: var(--grain), var(--color-mint); color: var(--color-ink); box-shadow: none; }
.merdiven li.y { background: var(--grain), var(--color-accent-3); color: var(--color-ink); box-shadow: none; }
.merdiven li.simdi { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }

.gostergeler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0; }
.gosterge { display: flex; flex-direction: column; gap: var(--space-3xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-stock); background: var(--color-paper-2); }
.gosterge__ad { font-size: var(--text-sm); color: var(--color-muted); }
.gosterge__deger { font: 600 var(--text-2xl)/1.05 var(--font-display); color: var(--color-ink); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-display); }
.gosterge--sure .gosterge__deger { color: var(--color-ink); }
.gosterge--sure.az { background: var(--color-coral-soft); }

.soru-metin { margin: 0 0 var(--space-lg); max-width: 32ch; font-size: clamp(1.5rem, 1.4vw + 0.9rem, 2.125rem); line-height: 1.15; }
.secenekler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); }
.secenek {
  --edge: 5px;
  display: flex; align-items: center; gap: var(--space-sm);
  min-height: 64px; padding: var(--space-sm) var(--space-md); border: 0; border-radius: var(--radius-stock);
  background: var(--grain), var(--fibre), var(--color-card); color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge);
  font: 600 var(--text-lg)/1.2 var(--font-body); text-align: left; overflow-wrap: break-word; min-width: 0; cursor: pointer;
  margin-bottom: var(--space-xs);
  transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap);
}
.secenek__harf { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-sm); }
button.secenek:hover { --edge: 7px; translate: 0 -2px; }
button.secenek:active { --edge: 1px; translate: 0 4px; }
button.secenek:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
button.secenek:disabled { --edge: 1px; translate: 0 4px; background: var(--color-paper-2); color: var(--color-muted); cursor: not-allowed; }
.secenek--bos { visibility: hidden; }
.secenek--dogru { --edge: 1px; translate: 0 4px; background: var(--grain), var(--fibre), var(--color-mint); box-shadow: 0 var(--edge) 0 0 var(--color-mint-deep); }
.secenek--dogru .secenek__harf { background: var(--color-ink); color: var(--color-paper); }
div.secenek { cursor: default; }

.jokerler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-lg); }
.jokerler__ad { color: var(--color-muted); font-size: var(--text-sm); }
.joker { display: flex; align-items: center; gap: var(--space-xs); }
.joker form { display: contents; }
.joker .btn { min-height: 44px; padding: 0 var(--space-md); margin-bottom: var(--space-2xs); }
.joker__yok { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-stock); background: var(--color-paper-3); color: var(--color-muted); font-weight: 600; text-decoration: line-through; text-decoration-thickness: 2px; }
.joker__ornek { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-stock); background: var(--grain), var(--color-card); color: var(--color-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--color-rule), 0 5px 0 0 var(--color-edge); margin-bottom: var(--space-2xs); }
.joker__not { font-size: var(--text-sm); color: var(--color-muted); }
.joker-mesaj { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-coral-soft); color: var(--color-ink); font-weight: 600; }

.halkoyu { margin-top: var(--space-lg); }
.halkoyu__not { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 60ch; }
.halkoyu table { width: 100%; margin-top: var(--space-sm); border-collapse: collapse; font-size: var(--text-sm); }
.halkoyu td { padding: var(--space-xs) var(--space-xs) var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); vertical-align: middle; }
.halkoyu td.num { width: 4.5em; text-align: right; font-weight: 600; }
.halkoyu .oluk { width: 50%; }
.halkoyu .bar { height: 14px; border-radius: var(--radius-pill); background: var(--grain), var(--color-accent-3); min-width: 2px; }

/* ---- Leaderboards (home) --------------------------------------------------------------------- */
.liderler { padding-block: var(--section-gap-s) var(--section-gap); }
.liderler__ic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.liderler__bas { grid-column: 1 / span 4; position: sticky; top: var(--space-xl); }
.liderler__bas .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.liderler__govde { grid-column: 5 / span 8; }
.sekmeler { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: var(--radius-stock); background: var(--color-paper-3); margin-bottom: var(--space-lg); }
.sekmeler button { white-space: nowrap; min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: 12px; background: transparent; color: var(--color-ink-2); font-weight: 600; cursor: pointer; transition: background-color var(--dur-short) var(--ease-snap), color var(--dur-short) var(--ease-snap); }
.sekmeler button:hover { background: var(--color-paper-2); color: var(--color-ink); }
.sekmeler button:active { translate: 0 1px; }
.sekmeler button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.sekmeler button[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }
html:not(.js) .sekmeler { display: none; }
.lider-panel + .lider-panel { margin-top: var(--space-2xl); }
.js .lider-panel + .lider-panel { margin-top: 0; }
.lider-panel h3 { margin-bottom: var(--space-md); }
.lider { width: 100%; border-collapse: collapse; font-size: var(--text-lg); }
.lider td { height: 64px; padding: 0 var(--space-md) 0 0; border-bottom: 1px solid var(--color-rule); vertical-align: middle; }
.lider tr:first-child td { border-top: 1px solid var(--color-rule); }
.lider .sira { width: 3.5rem; font: 600 var(--text-xl)/1 var(--font-display); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.lider tr:first-child .sira { color: var(--color-ink); }
.lider .ad { font-weight: 600; overflow-wrap: anywhere; }
.lider .bos { color: var(--color-muted); font-weight: 500; }
.lider .puan { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lider .puan b { font-size: var(--text-xl); }
.lider .puan small { margin-left: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.lider-panel__devam { margin-top: var(--space-md); }

/* ---- Rules as figures on the pear field ------------------------------------------------------- */
.kurallar { position: relative; padding-block: calc(var(--section-gap-s) + var(--space-sm)); background: var(--grain), var(--fibre), var(--color-accent); color: var(--color-accent-ink); clip-path: var(--tear); }
.kurallar h2 { max-width: 18ch; }
.rakamlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.rakamlar > li { padding-inline: var(--space-lg); border-left: 1px solid color-mix(in oklab, var(--color-ink) 22%, transparent); }
.rakamlar > li:first-child { padding-left: 0; border-left: 0; }
.rakam { display: block; font: 600 clamp(3.5rem, 5vw + 1rem, 6rem)/0.95 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.rakam__birim { display: block; margin-top: var(--space-xs); font-size: var(--text-title); font-weight: 600; }
.rakamlar p { margin-top: var(--space-md); max-width: 30ch; color: var(--color-ink-2); }
.kurallar__alt { margin-top: var(--space-2xl); }
.kurallar a { color: var(--color-ink); text-decoration-thickness: 2px; }
.kurallar a:hover { color: var(--color-ink-2); }

/* ---- Close: categories as a statement --------------------------------------------------------- */
.kapanis { padding-block: var(--section-gap) var(--section-gap-l); }
.kapanis__ic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.kapanis__cumle { grid-column: 1 / span 9; font-size: var(--text-display-s); line-height: 1.08; max-width: 24ch; }
.kapanis__eylem { grid-column: 10 / span 3; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }

/* ---- Footer: mast ----------------------------------------------------------------------------- */
.alt { padding-block: var(--space-3xl) var(--space-xl); background: var(--grain), var(--fibre), var(--color-ink); color: var(--color-paper); clip-path: polygon(0% 8px, 6% 2px, 13% 9px, 21% 3px, 29% 10px, 37% 4px, 46% 8px, 54% 1px, 62% 9px, 70% 3px, 79% 10px, 87% 4px, 94% 9px, 100% 3px, 100% 100%, 0% 100%); }
.alt__marka { display: block; font: 600 clamp(2rem, 8.5vw, 7.5rem)/0.95 var(--font-display); letter-spacing: -0.04em; white-space: nowrap; color: var(--color-paper); text-decoration: none; overflow-wrap: break-word; min-width: 0; }
.alt__marka:hover { color: var(--color-accent); }
.alt__satir { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid color-mix(in oklab, var(--color-paper) 22%, transparent); }
.alt__linkler { grid-column: 1 / span 7; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.alt__linkler a { display: inline-flex; min-height: 32px; align-items: center; color: var(--color-paper); text-decoration: none; }
.alt__linkler a:hover { color: var(--color-accent); text-decoration: underline; }
.alt__linkler a:focus-visible, .alt__marka:focus-visible { outline-color: var(--color-accent); }
.alt__hak { grid-column: 8 / span 5; font-size: var(--text-sm); color: color-mix(in oklab, var(--color-paper) 78%, var(--color-ink)); max-width: 52ch; }
.alt__hak p + p { margin-top: var(--space-xs); }

/* ---- Content pages (kept layout, new system) -------------------------------------------------- */
.icerik { padding-block: var(--space-2xl) var(--section-gap-s); }
.icerik__kagit { max-width: 980px; padding: var(--space-2xl) var(--space-2xl) var(--space-3xl); border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); box-shadow: var(--shadow-card); }
.icerik_baslik, h1.icerik_baslik { margin: 0 0 var(--space-xl); font-size: var(--text-display-s); line-height: 1.05; max-width: 22ch; }
.icerik__kagit h2 { margin: var(--space-xl) 0 var(--space-xs); font-size: var(--text-title); line-height: 1.25; max-width: 48ch; }
.icerik__kagit p { margin-bottom: var(--space-sm); }
.icerik__kagit p, .icerik__kagit li { max-width: 68ch; }
.icerik_metin { color: var(--color-ink-2); }
.yasal-metin { line-height: 1.65; }

.tablo-kap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.liste { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.liste th { padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: 2px solid var(--color-ink); text-align: left; font-weight: 600; font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; }
.liste td { padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.liste tr.ilk3 td { background: color-mix(in oklab, var(--color-accent) 28%, transparent); }
.liste tr.ilk3 td:first-child { padding-left: var(--space-xs); }
.liste td.sayi, .liste th.sayi { text-align: right; font-variant-numeric: tabular-nums; }
.liste td.etiket { width: 13rem; color: var(--color-ink-2); }
.liste td.buyuk-puan { font: 600 var(--text-2xl)/1 var(--font-display); color: var(--color-ink); }
.top-menu { margin-bottom: var(--space-lg); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-stock); background: var(--color-paper-2); line-height: 2; }
.top-menu a { white-space: nowrap; }
.top-menu a.secili { font-weight: 600; color: var(--color-ink); text-decoration-thickness: 2px; text-decoration-color: var(--color-accent-deep); }
.not { color: var(--color-muted); }

.form { max-width: 560px; }
.form .satir { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--space-md); align-items: center; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.form .formalanadi { font-weight: 600; color: var(--color-ink-2); }
.form input[type=text], .form input[type=email], .form input[type=password], .form input[type=number], .form select, .form textarea {
  width: 100%; min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input);
  background: var(--color-card); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: 1px;
  transition: border-color var(--dur-short) var(--ease-snap);
}
.form textarea { padding-block: var(--space-sm); min-height: 160px; }
.form select { width: auto; max-width: 100%; }
.form select + select { margin-left: var(--space-2xs); }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--color-ink-2); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline-color: var(--color-focus); }
.form input:disabled, .form select:disabled, .form textarea:disabled { background: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; }
.form input[aria-invalid="true"], .form .input-validation-error { border-color: var(--color-error); }
.form .gonder { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--space-md); padding-top: var(--space-lg); }
.form .gonder > * { grid-column: 2; justify-self: start; }
.form .gonder input[type=submit], .form .gonder button { --edge: 5px; min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); background: var(--grain), var(--fibre), var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 var(--edge) 0 0 var(--color-accent-deep); font-weight: 600; cursor: pointer; transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
.form .gonder input[type=submit]:hover, .form .gonder button:hover { --edge: 7px; translate: 0 -2px; }
.form .gonder input[type=submit]:active, .form .gonder button:active { --edge: 1px; translate: 0 4px; }
.form .gonder input[type=submit]:focus-visible, .form .gonder button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.form .gonder input[type=submit]:disabled, .form .gonder button:disabled { --edge: 1px; background: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; }
.form input[type=checkbox], .ben-bilirim input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--color-ink); vertical-align: middle; }
.zorunlu { color: var(--color-error); }
.field-validation-error, .text-danger { color: var(--color-error); font-size: var(--text-sm); }
.hata-kutu, .bilgi-kutu { margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); color: var(--color-ink); }
.hata-kutu { background: var(--color-coral-soft); }
.bilgi-kutu { background: var(--color-mint-soft); }

/* ---- Game screens ----------------------------------------------------------------------------- */
.oyun { padding-block: var(--space-xl) var(--section-gap-s); }
.oyun__ic { max-width: 980px; }
.oyun .kart { filter: none; box-shadow: var(--shadow-card); }
.oyun__bas { margin-bottom: var(--space-lg); }
.oyun__bas h1 { font-size: var(--text-display-s); }
.oyun__bas p { margin-top: var(--space-sm); color: var(--color-ink-2); }
.uyari { margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-sm); max-width: 60ch; }
.baslaAlert { margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-coral-soft); font-weight: 600; }

.kategori-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.kategori-grid button {
  --edge: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 132px; padding: var(--space-md); border: 0; border-radius: var(--radius-stock);
  background: var(--grain), var(--fibre), var(--color-card); color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge);
  font-weight: 600; font-size: var(--text-md); cursor: pointer; margin-bottom: var(--space-xs);
  transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap);
}
.kategori-grid button img { width: 56px; height: 56px; }
.kategori-grid button:hover { --edge: 7px; translate: 0 -2px; }
.kategori-grid button:active { --edge: 1px; translate: 0 4px; }
.kategori-grid button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.kategori-grid button:disabled { --edge: 1px; color: var(--color-muted); cursor: not-allowed; }
.ayir { margin: var(--space-xl) 0 var(--space-md); border: 0; border-top: 1px solid var(--color-rule); }
.ayir + h2 { font-size: var(--text-title); }

.sonuc { text-align: left; }
.sonuc--dogru { background: var(--grain), var(--fibre), var(--color-mint-soft); }
.sonuc--yanlis { background: var(--grain), var(--fibre), var(--color-coral-soft); }
.sonuc__baslik { margin: var(--space-lg) 0 var(--space-sm); font-size: var(--text-display-s); line-height: 1.02; max-width: 22ch; }
.sonuc__cevap { font-size: var(--text-lead); }
.sonuc__cevap b { font-size: var(--text-xl); }
.ben-bilirim { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-card); }
.ben-bilirim label { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; cursor: pointer; }
/* "Ben Bilirim" choice on the answer page: the whole box is clickable; checkbox left, title and
   explanation stacked on the right so nothing drifts out of line when the text wraps. */
.ben-bilirim--sec { display: flex; align-items: flex-start; gap: var(--space-sm); max-width: 560px; margin: var(--space-md) 0 0; cursor: pointer; border: 2px solid transparent; transition: border-color .15s, background-color .15s; }
.ben-bilirim--sec input[type=checkbox] { flex: none; margin: 1px 0 0; }
.ben-bilirim__metin { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.ben-bilirim__baslik { font-size: var(--text-lead); line-height: 1.25; }
.ben-bilirim__aciklama { color: var(--color-muted); line-height: 1.4; }
.ben-bilirim__aciklama b { color: var(--color-ink); }
.ben-bilirim--sec:hover { border-color: var(--color-edge); }
.ben-bilirim--sec:has(input:checked) { border-color: var(--color-accent-deep); background: var(--color-fringe); }
.ben-bilirim--sec:has(input:focus-visible) { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }
.devam { margin: var(--space-lg) 0 var(--space-sm); }
.devam .ben-bilirim--sec + button, .devam .ben-bilirim--sec + .btn { margin-top: var(--space-md); }
.siradaki { margin-top: var(--space-sm); }
.bitis { margin-top: var(--space-lg); font-size: var(--text-lead); }
.bitis b { font: 600 var(--text-3xl)/1 var(--font-display); }
.kaydet { max-width: 520px; margin: var(--space-lg) 0; padding: var(--space-lg); border-radius: var(--radius-stock); background: var(--color-card); }
.kaydet h2 { font-size: var(--text-title); margin-bottom: var(--space-xs); }
.eylemler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.istatistik { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 70ch; }
.sonuc-bar { display: inline-block; height: 12px; border-radius: var(--radius-pill); vertical-align: middle; margin-right: var(--space-xs); max-width: calc(100% - 40px); }
.sonuc-bar--d { background: var(--grain), var(--color-mint-deep); }
.sonuc-bar--y { background: var(--grain), var(--color-accent-3); }
.paylas img { display: inline-block; vertical-align: middle; }

/* ---- Cookie notice (cookie_policy.js) --------------------------------------------------------- */
#cookiePolicyw { position: fixed; left: var(--space-md); right: var(--space-md); bottom: var(--space-md); z-index: var(--z-toast); max-width: 760px; padding: var(--space-md) 72px var(--space-md) var(--space-lg); border-radius: var(--radius-stock); background: var(--grain), var(--color-ink); color: var(--color-paper); box-shadow: var(--shadow-card); font-size: var(--text-sm); line-height: 1.5; }
#cookiePolicyw p { margin: 0; }
#cookiePolicyw a { color: var(--color-accent); font-weight: 600; }
#cookiePolicyw button { position: absolute; right: var(--space-md); top: 50%; translate: 0 -50%; width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xl); line-height: 1; cursor: pointer; transition: background-color var(--dur-short) var(--ease-snap); }
#cookiePolicyw button:hover { background: var(--color-card); }
#cookiePolicyw button:active { translate: 0 calc(-50% + 1px); }
#cookiePolicyw button:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* ---- Under 60rem: stack ----------------------------------------------------------------------- */
@media (max-width: 60rem) {
  :root { --nav-h: 64px; }
  .ust__ic { flex-wrap: wrap; padding-block: var(--space-sm); gap: 0 var(--space-md); min-height: var(--nav-h); }
  .logo__ad { font-size: 1.375rem; }
  .js .menu-dugme { display: inline-flex; }
  .ust__menu { flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: var(--space-md); padding: var(--space-md) 0 var(--space-lg); }
  .js .ust__menu:not(.acik) { display: none; }
  .ust__menu .ust__linkler { flex-direction: column; align-items: stretch; gap: 0; }
  .ust__menu .ust__linkler li { border-bottom: 1px solid var(--color-rule); }
  .ust__menu .ust__linkler a, .ust__menu .ust__linkler .link-buton { min-height: 52px; width: 100%; font-size: var(--text-lg); }
  .ust__uye { flex-wrap: wrap; }
  nav.ust__uye { flex-direction: column; align-items: stretch; }
  .uye-adi { max-width: none; padding-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
  .giris { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .giris__ic { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .liderler__ic, .kapanis__ic, .alt__satir { grid-template-columns: minmax(0, 1fr); }
  .liderler__bas, .liderler__govde, .kapanis__cumle, .kapanis__eylem, .alt__linkler, .alt__hak { grid-column: 1 / -1; }
  .liderler__bas { position: static; }
  .rakamlar { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .rakamlar > li:nth-child(3) { padding-left: 0; border-left: 0; }
  .kategori-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icerik__kagit { padding: var(--space-xl) var(--space-lg) var(--space-2xl); }
}
@media (max-width: 40rem) {
  body { font-size: var(--text-md); }
  .sahne { padding: var(--space-sm); }
  .kart { padding: var(--space-lg) var(--space-md); }
  .merdiven { gap: var(--space-3xs); }
  .merdiven li { height: 26px; border-radius: 6px; font-size: 0.6875rem; }
  .gostergeler { gap: var(--space-xs); }
  .gosterge { padding: var(--space-xs) var(--space-sm); }
  .gosterge__ad { font-size: var(--text-xs); }
  .gosterge__deger { font-size: var(--text-xl); }
  .secenekler { grid-template-columns: minmax(0, 1fr); }
  .rakamlar { grid-template-columns: minmax(0, 1fr); }
  .rakamlar > li { padding: var(--space-lg) 0 0; border-left: 0; border-top: 1px solid color-mix(in oklab, var(--color-ink) 22%, transparent); }
  .rakamlar > li:first-child { border-top: 0; padding-top: 0; }
  .lider { font-size: var(--text-md); }
  .lider .sira { width: 2.5rem; }
  .form .satir { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .form .gonder { grid-template-columns: minmax(0, 1fr); }
  .form .gonder > * { grid-column: 1; }
  .sekmeler button { padding: 0 var(--space-md); }
  .liste .mobil-gizle { display: none; }
  .icerik__kagit { padding: var(--space-lg) var(--space-md) var(--space-xl); border-radius: var(--radius-stock); }
  #cookiePolicyw { padding: var(--space-sm) var(--space-2xl) var(--space-sm) var(--space-md); }
  #cookiePolicyw button { right: var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .dugme, .secenek, .kategori-grid button, .form .gonder input[type=submit], .form .gonder button { transition: background-color var(--dur-short) linear; }
  .btn:hover, .dugme:hover, button.secenek:hover, .kategori-grid button:hover { translate: none; }
}