/* Public (free, indexable) module: landing, gramer, Türkçe dilbilgisi, kelime,
   reference lists, seviye testi. Builds on the design system in site.css. */

/* Coral for small text: raw --accent is 2.7:1 on paper and the old 72% mix
   with --text was 4.5:1; --accent-strong mixed 85% with --text is 5.6:1 on
   paper, 5.4:1 on a 10% coral tint, and stays light in dark mode. */
:root {
  --accent-ink: color-mix(in srgb, var(--accent-strong) 85%, var(--text));
}

.h3 {
  font-size: 1.15rem;
  font-weight: 600;
}
.small {
  font-size: 0.88rem;
}
.pub-section {
  margin-top: var(--s-12);
}
/* Small link cards (eyebrow + title + one line) used under "Başvuru listeleri" etc. */
.link-cards .card h3 {
  margin: var(--s-1) 0 var(--s-1);
}
.link-cards .card p {
  margin: 0;
}

/* ---------- Page layout system (public pages) ----------
   One left edge for everything: header, breadcrumbs, page head and body all
   start at the container edge. The body is either
   (a) a full-width card grid (landing, /gramer, /kelime, pools, TR notes), or
   (b) .with-aside: a content column + a 300px side panel (topic, note, word
       lists, reference lists, level, placement, legal).
   Page heads are never centred in a narrow column. */
/* Grid children may shrink below their content (wide tables scroll inside). */
.with-aside > * {
  min-width: 0;
}
/* Two columns from 900px (site.css default is 1024px, kept for app pages). */
@media (min-width: 900px) {
  .with-aside {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
  }
  .with-aside > aside {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
  }
}
@media (min-width: 1024px) {
  .with-aside {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}
/* Inside the content column every block shares the column's right edge
   (no 720px prose next to a full-width quiz). */
.with-aside .prose,
.with-aside .examples,
.with-aside .tr-box {
  max-width: none;
}
/* Long side navs scroll inside the sticky panel instead of running off-screen. */
@media (min-width: 900px) {
  .aside-scroll {
    max-height: calc(100vh - var(--header-h) - var(--s-8));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
.aside-stack {
  display: grid;
  gap: var(--s-4);
}
.aside-stack > .aside-cta {
  margin-top: 0;
}

/* ---------- Tile grid (numbered index cards: TR notes, word subcategories) ---------- */
.tile-grid {
  display: grid;
  gap: var(--s-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 640px) {
  .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.tile-grid > li {
  display: flex;
}
.tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.tile__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
}
.tile__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--text);
}
.tile__sub {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0;
}
.tile .chev {
  margin-left: auto;
}
.tile.card--link:hover .tile__title {
  color: var(--primary);
}
.tile.is-soon {
  opacity: 0.55;
}
/* Phones: compact row-like tiles (number | title + teaser | chevron). */
@media (max-width: 639px) {
  .tile-grid {
    gap: var(--s-3);
  }
  .tile {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    column-gap: var(--s-3);
    row-gap: 2px;
    align-items: baseline;
    padding: var(--s-4);
  }
  .tile__top {
    display: contents;
  }
  .tile__num {
    grid-area: 1 / 1;
  }
  .tile__title {
    grid-area: 1 / 2;
  }
  .tile__sub {
    grid-area: 2 / 2;
  }
  .tile .chev {
    grid-area: 1 / 3 / 3 / 4;
    align-self: center;
  }
}
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

/* ---------- Loop ring extras ---------- */
.loop-ring__dot {
  fill: var(--accent);
}
.loop-ring--accent .loop-ring__bar {
  stroke: var(--accent);
  stroke-width: 4;
}
.loop-ring--accent .loop-ring__track {
  stroke: color-mix(in srgb, var(--accent) 25%, transparent);
  stroke-width: 4;
}
.loop-ring--accent .loop-ring__dot {
  r: 3;
}
.loop-ring--success .loop-ring__bar {
  stroke: var(--success);
}
.loop-ring--sm .loop-ring__label {
  font-size: 11px;
}

/* ---------- Landing ---------- */
.pub-hero {
  display: grid;
  gap: var(--s-8);
  align-items: center;
  padding-block: var(--s-6) var(--s-4);
}
@media (min-width: 900px) {
  .pub-hero {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    padding-block: var(--s-10) var(--s-6);
  }
}
.pub-hero h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  max-width: 18ch;
}
.pub-hero__accent {
  color: var(--primary);
}
.pub-hero .lead {
  max-width: 60ch;
}
.pub-hero__cta {
  margin-top: var(--s-5);
}
/* Three figures on one line at every width, with an even gap between them. */
.pub-stats {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  column-gap: var(--s-10);
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
  color: var(--muted);
}
@media (max-width: 479px) {
  .pub-stats {
    column-gap: var(--s-6);
  }
}
@media (max-width: 359px) {
  .pub-stats {
    column-gap: var(--s-4);
    font-size: 0.92rem;
  }
}
.pub-stats strong {
  display: block;
  font-size: 1.5rem;
  color: var(--text);
}
.pub-hero__art {
  display: grid;
  place-items: center;
  position: relative;
  min-height: 300px;
  container-type: inline-size;
}
.pub-hero__mark {
  width: min(220px, 52vw);
  height: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--blue) 22%, transparent));
}
.pub-hero__orbit {
  /* Never wider than its column (it poked past the container at 900–1100px). */
  width: min(420px, 92vw, 100cqi);
  aspect-ratio: 1;
  --orbit-r: calc(min(420px, 92vw, 100cqi) / 2 - clamp(28px, 6vw, 64px) / 2);
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
/* One column: the art is a decoration under the CTAs, not a second screen. */
@media (max-width: 899px) {
  .pub-hero__art {
    min-height: 240px;
  }
  .pub-hero__mark {
    width: min(140px, 36vw);
  }
  .pub-hero__orbit {
    width: min(260px, 72vw, 100cqi);
    --orbit-r: calc(min(260px, 72vw, 100cqi) / 2 - clamp(28px, 6vw, 64px) / 2);
  }
}
.pub-hero__accent {
  color: var(--primary);
}
.hero-loop {
  width: min(280px, 70vw);
  height: auto;
  overflow: visible;
}
.hero-loop__track {
  fill: none;
  stroke: var(--border);
  stroke-width: 14;
}
.hero-loop__bar {
  fill: none;
  stroke: var(--blue);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 603;
  stroke-dashoffset: 120;
  animation: hero-fill 2.4s var(--ease) both;
}
.hero-loop__orbit {
  transform-origin: 120px 120px;
  animation: hero-orbit 9s linear infinite;
}
.hero-loop__orbit circle {
  fill: var(--orange);
}
.hero-loop__big {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0.12em;
  text-anchor: middle;
  fill: var(--text);
}
.hero-loop__small {
  font-family: var(--font-ui);
  font-size: 12px;
  text-anchor: middle;
  fill: var(--muted);
}
@keyframes hero-fill {
  from {
    stroke-dashoffset: 603;
  }
}
@keyframes hero-orbit {
  to {
    transform: rotate(360deg);
  }
}

.loop-steps {
  display: grid;
  gap: var(--s-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 768px) {
  .loop-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.loop-steps__num {
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}
.loop-steps h3 {
  margin-top: var(--s-2);
}
.loop-steps p {
  margin: 0;
  color: var(--muted);
}

.entry-grid {
  margin-top: var(--s-4);
}
.entry h3 {
  margin: var(--s-3) 0 var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.entry p {
  margin: 0;
}
.entry__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}
.entry--plus .entry__icon {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: color-mix(in srgb, var(--accent-strong) 85%, var(--text));
}

.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.plan-table th,
.plan-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.plan-table thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
}
.plan-table tbody tr:last-child > * {
  border-bottom: 0;
}
.plan-table tbody th {
  font-weight: 500;
}
.plan-table td {
  white-space: nowrap;
}
.plan-table .yes {
  color: var(--success-strong);
  font-weight: 600;
}
.plan-table .no {
  color: var(--muted);
}
/* Phones: values wrap instead of being cut off at the card edge. */
@media (max-width: 640px) {
  .plan-table {
    font-size: 0.9rem;
  }
  .plan-table th,
  .plan-table td {
    padding: var(--s-3);
  }
  .plan-table td {
    white-space: normal;
    width: 27%;
  }
}

.pub-cta {
  margin-top: var(--s-12);
  display: grid;
  gap: var(--s-6);
  padding: var(--s-8);
}
.pub-cta h2 {
  color: var(--on-deep);
}
@media (min-width: 900px) {
  .pub-cta {
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
  }
}
.pub-cta p:last-child {
  margin-bottom: 0;
}
@media (min-width: 900px) {
  .pub-cta__actions {
    justify-content: flex-end;
  }
}
.store-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.store-links > .store-soon {
  flex: 1 1 auto;
}

/* ---------- Gramer overview ---------- */
.level-grid {
  display: grid;
  gap: var(--s-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 720px) {
  .level-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1040px) {
  .level-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.level-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.level-card.is-mine {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}
.level-card__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  color: inherit;
  text-decoration: none;
}
.level-card__head:hover .level-card__title {
  color: var(--primary);
}
.level-card__head > span:nth-child(2) {
  flex: 1;
  display: grid;
}
.level-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
}
.level-card__sub {
  font-size: 0.88rem;
}
.level-card__cats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.level-card__cats a {
  display: inline-block;
  font-size: 0.82rem;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.level-card__cats a:hover {
  background: var(--primary-soft);
  color: var(--primary);
}
@media (pointer: coarse) {
  .level-card__cats a {
    padding: 7px 12px;
  }
}
.pub-note {
  margin-top: var(--s-8);
}
.pub-note p {
  margin: 0;
}

/* ---------- Gramer level ---------- */
.tabs__soon {
  padding: 10px 0 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--border);
  cursor: not-allowed;
}
.level-head {
  display: flex;
  gap: var(--s-6);
  align-items: flex-start;
  justify-content: space-between;
}
.level-head__ring {
  flex: none;
}
.cat-list {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-5);
}
.level-page .cat-list:first-child {
  margin-top: 0;
}
/* The category index only helps next to the list; on one column the cards
   themselves are the index. */
@media (max-width: 899px) {
  .level-page > aside {
    display: none;
  }
}
.aside-nav a:has(.aside-nav__count) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.aside-nav__count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}
.cat-card {
  padding: 0;
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.cat-card__head {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--s-5);
  border-bottom: 1px solid var(--border);
}
.cat-card__title {
  font-size: 1.3rem;
  margin: var(--s-2) 0 var(--s-1);
}
.cat-card__summary {
  margin: 0;
}
.topic-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.topic-rows > li + li {
  border-top: 1px solid var(--border);
}
.topic-rows .rows__title {
  font-family: var(--font-ui);
  font-weight: 500;
}
.tick {
  color: var(--success-strong);
  display: inline-flex;
}
.chev svg {
  width: 20px;
  height: 20px;
}

/* ---------- Topic page ---------- */
.topic h1 {
  margin-top: var(--s-2);
}
.topic__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  font-size: 0.92rem;
  margin-bottom: var(--s-6);
}
.topic__meta a {
  color: var(--muted);
}
.topic__section {
  margin-top: var(--s-10);
}
.section-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-4);
}
.prose {
  max-width: var(--reading);
  font-size: 1.05rem;
}
.prose p,
.prose ul,
.prose ol {
  margin: 0 0 var(--s-4);
}
.prose strong {
  color: var(--primary);
}
.prose em {
  color: var(--muted);
}
/* Block display lets wide tables scroll; max-content keeps the white surface
   hugging the cells instead of stretching as an empty panel to the right. */
.prose table {
  width: max-content;
  max-width: 100%;
  border-collapse: collapse;
  margin: var(--s-4) 0 var(--s-6);
  font-size: 0.95rem;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  display: block;
  overflow-x: auto;
}
.prose th,
.prose td {
  border: 1px solid var(--border);
  padding: var(--s-2) var(--s-3);
  text-align: left;
  vertical-align: top;
}
.prose th {
  background: var(--surface-2);
  font-weight: 600;
}
/* A key/value table written in markdown has an empty header row: drop it
   instead of showing a blank stripe. */
.prose thead:not(:has(th:not(:empty))) {
  display: none;
}
.prose blockquote {
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--primary-soft);
  border-left: 3px solid var(--primary);
}
.prose blockquote p:last-child {
  margin-bottom: 0;
}
.prose h2,
.prose h3 {
  margin-top: var(--s-8);
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 5px;
}
.prose--sm {
  font-size: 0.98rem;
}
.prose--sm p:last-child {
  margin-bottom: 0;
}
.prose--sm strong {
  color: var(--accent-ink);
}
.tr-box {
  margin-top: var(--s-6);
  max-width: var(--reading);
}
.tr-box .callout__label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.examples {
  display: grid;
  gap: var(--s-3);
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--reading);
}
.ex-card__row {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  justify-content: space-between;
}
.ex-card .example__en {
  margin: 0;
  font-weight: 600;
  border-left: 3px solid var(--accent);
  padding-left: var(--s-3);
}
.ex-card .example__tr {
  margin: var(--s-1) 0 0;
  padding-left: calc(var(--s-3) + 3px);
}
.ex-card__note {
  display: inline-block;
  margin-top: var(--s-3);
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-ink);
}
.play-btn {
  flex: none;
  /* 44px target; the negative margin keeps the old 36px footprint in rows. */
  width: 44px;
  height: 44px;
  margin-block: -4px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  cursor: pointer;
}
.play-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.related .rows__item {
  padding-block: var(--s-3);
}
.related .rows__title {
  font-family: var(--font-ui);
  font-weight: 500;
}
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: var(--s-10);
}
.pager__link {
  display: grid;
  gap: 2px;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.pager__link:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.pager__link--next {
  text-align: right;
  grid-column: 2;
}
/* Phones: one full-width link per row (a half-width card wrapped every title). */
@media (max-width: 559px) {
  .pager {
    grid-template-columns: minmax(0, 1fr);
  }
  .pager > span:empty {
    display: none;
  }
  .pager__link--next {
    grid-column: 1;
  }
}
.topic-aside {
  display: grid;
  gap: var(--s-4);
}
/* The card's label sits on the stack rhythm (no extra paragraph margin). */
.topic-aside .card > .eyebrow {
  margin-bottom: 0;
}
/* Helper line sits close under its button but keeps the stack rhythm. */
.topic-aside .muted.small {
  margin: var(--s-2) 0 0;
}
.aside-nav ol {
  list-style: none;
  padding: 0;
  margin: var(--s-2) 0 0;
  display: grid;
  gap: 2px;
}
.aside-nav a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
}
.aside-nav a:hover {
  background: var(--surface-2);
}
@media (pointer: coarse) {
  .aside-nav a {
    padding-block: 10px;
  }
}
.aside-nav a[aria-current="page"] {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.aside-cta {
  display: grid;
  gap: 4px;
  margin-top: var(--s-4);
  font-weight: 600;
}

/* ---------- Quiz islands (deep focus panel, like the mobile practice) ---------- */
/* In dark mode --deep is almost the page colour; a hairline keeps the panel's
   edge visible (invisible on the light navy panel). */
.card--deep {
  border-color: color-mix(in srgb, var(--on-deep) 9%, transparent);
}
.practice,
.wordquiz {
  padding: var(--s-6);
}
.practice-fallback p:last-child {
  margin: 0;
}
.quiz__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.quiz__titles {
  flex: 1;
  display: grid;
}
.quiz__prompt {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.35;
  margin: var(--s-6) 0 var(--s-2);
}
.quiz__word {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-5) 0 var(--s-1);
}
.quiz__prompt--word {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
}
.quiz__tr {
  color: color-mix(in srgb, var(--on-deep) 65%, transparent);
  margin: 0 0 var(--s-5);
}
/* The gap: a soft slot with a solid baseline (never raw underscores). */
.practice .blank {
  display: inline-block;
  min-width: 3.4em;
  height: 1.15em;
  margin: 0 0.12em;
  vertical-align: -0.2em;
  border-bottom: 3px solid color-mix(in srgb, var(--on-deep) 85%, transparent);
  border-radius: 6px 6px 2px 2px;
  background: rgb(255 255 255 / 9%);
}
.practice .blank.is-filled {
  height: auto;
  min-width: 0;
  padding: 0 0.3em;
  vertical-align: baseline;
  font-weight: 700;
  color: var(--success);
  border-bottom-color: var(--success);
  background: color-mix(in srgb, var(--success) 16%, transparent);
}
.practice .blank.is-filled.is-wrong {
  color: #ffd2bf;
  border-bottom-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.quiz__explain {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border-left: 3px solid var(--success);
  background: rgb(255 255 255 / 6%);
}
.quiz__explain.is-wrong {
  border-left-color: var(--danger);
}
.quiz__explain p {
  margin: 0;
}
.quiz__explain p + p {
  margin-top: var(--s-2);
}
.quiz__verdict {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
}
.quiz__explain.is-correct .quiz__verdict {
  color: var(--success);
}
.quiz__explain.is-wrong .quiz__verdict {
  color: #ff8f93;
}
.quiz__verdict strong {
  color: var(--on-deep);
}
.quiz__explain-tr {
  font-style: italic;
  color: color-mix(in srgb, var(--on-deep) 80%, transparent);
}
.quiz__explain-why {
  font-size: 0.95rem;
  color: var(--on-deep);
}
/* No-JS / crawler fallback: every question with its options (no answers). */
.practice-list {
  margin: 0;
  padding: 0 0 0 1.4em;
  display: grid;
  gap: var(--s-5);
}
.practice-list .quiz__prompt {
  margin: 0 0 var(--s-3);
  font-size: 1.2rem;
}
.choice--static {
  cursor: default;
}
.card--deep .choice.choice--static:hover:not([disabled]) {
  border-color: rgb(255 255 255 / 16%);
}
.card--deep .choice {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 16%);
  color: var(--on-deep);
}
.card--deep .choice:hover:not([disabled]) {
  border-color: rgb(255 255 255 / 45%);
}
.card--deep .choice__key {
  border-color: rgb(255 255 255 / 30%);
  color: color-mix(in srgb, var(--on-deep) 75%, transparent);
}
.card--deep .choice.is-correct {
  background: color-mix(in srgb, var(--success) 18%, transparent);
  border-color: var(--success);
}
.card--deep .choice.is-wrong {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  border-color: var(--danger);
}
.quiz__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.quiz__feedback {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 1.4em;
}
.quiz__feedback.is-correct {
  color: var(--success);
}
/* On the deep panel: --danger is 4.47:1 on #12163a; the verdict's pink is 8:1. */
.quiz__feedback.is-wrong {
  color: #ff8f93;
}
.quiz__kbd {
  margin-left: 4px;
  background: transparent;
  color: inherit;
  opacity: 0.6;
}
.quiz__hint {
  margin: var(--s-4) 0 0;
  font-size: 0.8rem;
  color: color-mix(in srgb, currentColor 60%, transparent);
}
.card--deep .kbd {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 20%);
  color: inherit;
}
@media (hover: none) {
  .quiz__hint,
  .quiz__kbd {
    display: none;
  }
}
.quiz--done,
.quiz--intro {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--s-2);
}
.quiz--intro {
  text-align: left;
  justify-items: stretch;
}
.quiz--done h3,
.quiz--intro h3 {
  color: var(--on-deep);
  margin: var(--s-2) 0 0;
}
.quiz__note {
  margin: 0;
  color: color-mix(in srgb, var(--on-deep) 75%, transparent);
}
.card--deep .quiz__note a {
  color: #fff;
}
.quiz__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
  margin-top: var(--s-4);
}
.quiz__ghost {
  --btn-fg: var(--on-deep);
}
.quiz__missed {
  list-style: none;
  padding: 0;
  margin: var(--s-2) 0 0;
  text-align: left;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--on-deep) 80%, transparent);
  max-height: 180px;
  overflow: auto;
  width: 100%;
}
.quiz__missed li {
  padding: 4px 0;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}
.play-btn--deep {
  color: #fff;
}
.play-btn--deep:hover {
  background: rgb(255 255 255 / 12%);
}
.card--deep .loop-ring__label {
  fill: var(--on-deep);
}

/* ---------- Kelime ---------- */
.pool-grid {
  display: grid;
  gap: var(--s-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 860px) {
  .pool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pool-card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: 100%;
}
.pool-card.is-soon {
  opacity: 0.6;
}
.pool-card__text {
  flex: 1;
  display: grid;
}
.pool-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}
.pool-card__band {
  color: var(--primary);
  font-weight: 700;
}
.rows__item.is-soon {
  opacity: 0.55;
}
.word-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.word-table th,
.word-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.word-table thead th {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  position: sticky;
  top: 0;
}
.word-table tbody tr:last-child > * {
  border-bottom: 0;
}
.word-table tbody tr:hover {
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.word-table tbody th {
  font-family: var(--font-display);
  font-weight: 600;
  white-space: nowrap;
}
.word-link {
  border: 0;
  background: none;
  /* Taller hit area without moving the row. */
  padding: 10px 0;
  margin: -10px 0;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  text-decoration: underline dotted color-mix(in srgb, var(--primary) 50%, transparent);
  text-underline-offset: 4px;
}
.word-link:hover {
  color: var(--primary);
}
.senses {
  display: block;
  font-size: 0.82rem;
  color: var(--accent-ink);
}
.pos {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.col-ex {
  color: var(--muted);
  font-family: var(--font-read);
}
.col-play {
  width: 48px;
  text-align: right;
}
.ref-meaning {
  display: block;
  font-family: var(--font-ui);
  color: var(--text);
  font-size: 0.9rem;
}
.ref-example {
  display: block;
  font-style: italic;
}
@media (max-width: 640px) {
  .word-table .col-pos,
  .word-table .col-ex {
    display: none;
  }
  .word-table th,
  .word-table td {
    padding: var(--s-3);
  }
}
/* Phrasal verbs on phones: each row becomes a small card (phrase + Turkish +
   listen on top, the English meaning and the tappable example below) instead
   of dropping the meaning/example column like the word tables do. */
@media (max-width: 640px) {
  .pv-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .pv-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s-2);
    padding: var(--s-3);
    border-bottom: 1px solid var(--border);
  }
  .pv-table tbody tr:last-child {
    border-bottom: 0;
  }
  .pv-table tbody tr > * {
    display: block;
    padding: 0;
    border-bottom: 0;
  }
  .pv-table tbody th {
    grid-column: 1;
    grid-row: 1;
    white-space: normal;
  }
  .pv-table tbody td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .pv-table tbody .col-play {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: auto;
  }
  .pv-table tbody .col-ex {
    display: block;
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: var(--s-2);
  }
}
/* Irregular verbs on phones: V1 · V2 · V3 on one line, the Turkish meaning
   under them and listen on the right (the 4-column table pushed Türkçe — the
   column learners need most — out of view). */
@media (max-width: 640px) {
  .irr-table thead tr,
  .irr-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 44px;
    column-gap: var(--s-2);
    align-items: center;
    padding: var(--s-3);
    border-bottom: 1px solid var(--border);
  }
  .irr-table thead tr {
    background: var(--surface-2);
  }
  .irr-table tbody tr:last-child {
    border-bottom: 0;
  }
  .irr-table tr > * {
    display: block;
    padding: 0;
    border-bottom: 0;
  }
  .irr-table tbody tr > * {
    overflow-wrap: anywhere;
  }
  .irr-table thead th {
    background: none;
  }
  /* "V1 · V2 · V3" alone fits the narrow columns; the lead explains them. */
  .irr-table .irr-hint {
    display: none;
  }
  .irr-table thead th:nth-child(4) {
    display: none;
  }
  .irr-table tbody th {
    white-space: normal;
  }
  .irr-table tbody .irr-tr {
    grid-column: 1 / 4;
    grid-row: 2;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.9rem;
  }
  .irr-table tbody .col-play {
    grid-column: 4;
    grid-row: 1 / span 2;
    width: auto;
  }
}
/* Phrasal verbs on wide screens: the meaning + example column gets the room. */
@media (min-width: 641px) {
  .pv-table .col-ex {
    width: 46%;
  }
}
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.filter-bar .input {
  flex: 1;
}
.filter-count {
  font-size: 0.85rem;
  white-space: nowrap;
}
.filter-bar .input {
  min-width: 0;
  text-overflow: ellipsis;
}

/* ---------- Seviye testi ---------- */
.placement-start {
  display: flex;
  gap: var(--s-6);
  align-items: center;
  flex-wrap: wrap;
}
.placement-start > div {
  flex: 1;
  min-width: 240px;
}
.placement-start ul {
  padding-left: 1.2em;
}
.placement-q {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6);
}
.placement-q__prompt {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.35;
  margin: var(--s-4) 0 var(--s-2);
}
/* The gap on the light card: same soft slot as the practice cloze (never raw underscores). */
.placement-q__prompt .blank {
  display: inline-block;
  min-width: 3.4em;
  height: 1.15em;
  margin: 0 0.12em;
  vertical-align: -0.2em;
  border-bottom: 3px solid var(--primary);
  border-radius: 6px 6px 2px 2px;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}
.placement-q__foot {
  display: flex;
  justify-content: flex-end;
}
.placement-q .quiz__hint {
  color: var(--muted);
}
.placement-result {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--s-2);
  padding: var(--s-8) var(--s-6);
}
.placement-result h2 {
  color: var(--primary);
  margin: 0;
}
.placement-result .muted {
  max-width: 52ch;
}
.placement-result__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-2);
}
.level-defs {
  display: grid;
  gap: var(--s-3);
  margin: 0;
}
.level-defs dt {
  font-weight: 600;
  display: flex;
  gap: var(--s-2);
  align-items: center;
}
.level-defs dd {
  margin: 2px 0 0;
  color: var(--muted);
}

.placement-start p:last-child {
  margin-bottom: 0;
}
.placement-how {
  margin-top: var(--s-10);
}
/* Narrow content column next to the side panel: stack the three steps. */
@media (min-width: 900px) and (max-width: 1023px) {
  .placement-how .loop-steps {
    grid-template-columns: 1fr;
  }
}
.placement-page .level-defs {
  gap: var(--s-4);
}
.placement-page .level-defs dd {
  font-size: 0.92rem;
}

/* ---------- Error pages (404/429/5xx) ---------- */
.error-page {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: var(--s-12) 0 var(--s-8);
}
.error-page__mark {
  width: 72px;
  height: 72px;
  margin-bottom: var(--s-4);
}
.error-page .lead {
  margin-inline: auto;
  max-width: 52ch;
}
.error-page__actions {
  margin-top: var(--s-4);
}
/* Island-built action rows follow the global .actions pattern on phones
   (equal-width buttons instead of a ragged centred stack). */
@media (max-width: 479px) {
  .placement-result__actions,
  .quiz__actions,
  .error-page__actions {
    justify-self: stretch;
  }
  .placement-result__actions > *,
  .quiz__actions > * {
    flex: 1 1 auto;
  }
}

/* ---------- Legal pages ---------- */
/* Bold text in legal copy is emphasis, not a link: keep it ink, not blue. */
.legal strong {
  color: var(--text);
}

/* ---------- Print (grammar/reference pages are printable) ---------- */
@media print {
  .play-btn,
  .filter-bar,
  .tabs,
  .crumbs,
  .notice,
  .topic-aside,
  .with-aside > aside {
    display: none !important;
  }
  .with-aside {
    display: block;
  }
  .prose,
  .examples,
  .tr-box {
    max-width: none;
  }
  .prose strong,
  .prose--sm strong {
    color: #000;
  }
  .example,
  .card,
  .table-wrap {
    border-color: #bbb;
    break-inside: avoid;
  }
  .word-table .col-pos,
  .word-table .col-ex {
    display: table-cell !important;
  }
  a {
    color: #000;
    text-decoration: none;
  }
}

.topic-loop-state {
  margin: 0;
}