/* ============================================================================
   ByChess bileşen katmanı — DECISIONS § 077 (önceki dil § 066, § 039)
   ----------------------------------------------------------------------------
   Tasarım dili andezit + pirinç: antrasit kabuk ve birincil aksiyon, pirinç
   ikincil vurgu (link, aktif sekme, koyu zeminde işaret), üçüncül mor yalnız
   veride ve tahtada. Saf beyaz yerine ılık kırık beyaz, keskin köşe, degrade
   yok, gölge yerine hairline kenar. Oswald başlık/etiket/düğme, Poppins gövde.

   Sıra: font → reset → yardımcı → bileşen → kabuk → ekrana özel.
   Yeni görsel kalıp gerektiğinde buraya SINIF ekle, şablona satır içi stil
   yazma (docs/DESIGN_SYSTEM.md).
   ========================================================================= */

/* --------------------------------------------------------------- yazı tipi
   Oswald (marka yazısı) değişken font, 200–700; latin + latin-ext tek dosyada
   altküme (Türkçe ğ/ş/İ/ı dahil). Kaynak TTF ve lisans aynı klasörde. */
@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("../fonts/Oswald/oswald-var.woff2") format("woff2");
}
/* Poppins (ikincil yazı: gövde, cümle, form) statik font; kullanılan beş
   ağırlık + normal italik. Kaynak TTF'lerden latin + latin-ext altkümesi
   (Türkçe ğ/ş/İ/ı ve ₺ dahil). Yerel servis ediliyor çünkü CSP dış font
   kaynağına izin vermiyor ve PWA çevrimdışıyken de doğru görünmeli (§ 033). */
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/Poppins/poppins-300.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/Poppins/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/Poppins/poppins-400i.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/Poppins/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/Poppins/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/Poppins/poppins-700.woff2") format("woff2");
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
  background: var(--surface-alt);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
/* `hidden` özniteliği her zaman gizlesin. Tarayıcının kendi kuralı zayıf:
   `.badge { display: inline-flex }` onu eziyordu; parti ekranında boş NAG
   hapı, canlı sınıfta herkese "Sıra sende!" rozeti görünüyordu. */
[hidden] { display: none !important; }
/* Form öğeleri tarayıcı varsayılanında sistem fontuna düşer; Poppins'i miras al. */
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--primary); text-decoration: underline; }

/* Başlıklar Oswald: dar, uzun, 600 ağırlık. Oswald zaten sıkı; gövdedeki
   eksi harf aralığı burada harfleri yapıştırır, aralık hafif artı. */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .005em;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* -------------------------------------------------------------------- ikon
   Emoji yerine SVG sprite (components/icons.html). Kontur rengi metinden
   miras alınır, böylece ikon her zeminde doğru renkte çıkar. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 1.15em; height: 1.15em;
  flex: none; display: inline-block; vertical-align: -.19em;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.ico-lg { width: 1.6em; height: 1.6em; }
.ico-xl { width: 2.2em; height: 2.2em; stroke-width: 1.5; }

/* --------------------------------------------------------------- yardımcı */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 1rem; }
.container-narrow { max-width: 820px; }
.stack > * + * { margin-top: 1rem; }
.row { display: flex; gap: .75rem; align-items: center; }
.row-between { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.muted { color: var(--text-muted); }
.small { font-size: var(--step--1); }
.big { font-size: var(--step-3); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.grow { flex: 1; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
/* Görünmez ama ekran okuyucu okur (grafiklerin tablo karşılığı). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-brand { color: var(--accent-text); }
.tnum { font-variant-numeric: tabular-nums; }

/* Bölüm etiketi — markanın imzası: Oswald versal, geniş harf aralığı, pirinç.
   Andezit gri bir arayüzde ikincil rengi taşıyan yer burası (§ 077).
   Oswald 11px'te 700 olunca harfler dolar; 600 yeter. */
.eyebrow {
  display: block;
  font-size: .69rem; font-weight: 800;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: .35rem;
}
/* Eski ad — aynı rengi zaten .eyebrow veriyor; şablonlar kırılmasın. */
.eyebrow-brand { color: var(--accent-text); }

/* Kare işaret — ByChess logosunun zemini (4px köşe). Rozet, seviye numarası,
   avatar. Eski altıgen (§ 039) logo değişince bırakıldı (§ 066). */
.hex { border-radius: var(--radius); }

/* ----------------------------------------------------------------- kart
   Ayrım aracı gölge değil kenar çizgisi: sayfa düz, kurumsal, okunur. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
}
.card-tight { padding: .75rem .9rem; }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.card-header h2, .card-header h3 { margin: 0; }
/* Vurgulu kart: şerit ve sert alt gölge değil (§ 067) — diğer kartlarla aynı
   ince çizgi, yalnız rengi andezit; bölüm etiketi pirinç. */
.card-accent { border-color: var(--primary); }
.card-accent .eyebrow { color: var(--accent-text); }
.card-link { display: block; color: inherit; }
.card-link:hover { color: inherit; text-decoration: none; border-color: var(--border-hover); }
/* Bitmiş kayıt: soluklaştırılmış kart değil, sayfa zemininde duran opak kart. */
.card-done { background: var(--surface-alt); }

/* --------------------------------------------------------------- buton
   4px köşe, düz dolgu, degrade yok. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: var(--tap-min); padding: .5rem 1.05rem;
  font: inherit; font-weight: 600; letter-spacing: .005em;
  border: 1px solid var(--primary); border-radius: var(--radius);
  background: var(--primary); color: var(--on-primary);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); text-decoration: none; }
.btn:active { background: var(--primary-active); border-color: var(--primary-active); }
/* Pasif buton soluklaştırılmaz; sayfa zemini + silik metinle opak (§ 048). */
.btn[disabled], .btn.is-disabled,
.btn[disabled]:hover, .btn.is-disabled:hover {
  background: var(--surface-alt); border-color: var(--border);
  color: var(--text-faint); cursor: not-allowed;
}

/* Kontur buton — ikincil aksiyon. */
.btn-ghost { background: transparent; color: var(--accent-text); border-color: var(--border-strong); }
.btn-ghost:hover { background: transparent; color: var(--accent-text); border-color: var(--primary); }
.btn-soft { background: var(--ink-600); color: var(--on-primary); border-color: var(--ink-600); }
.btn-soft:hover { background: var(--ink-700); color: var(--on-primary); border-color: var(--ink-700); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
.btn-success { background: var(--success); border-color: var(--success); }
.btn-success:hover { background: var(--success-hover); border-color: var(--success-hover); }
.btn-sm { min-height: 34px; padding: .25rem .65rem; font-size: var(--step--1); }
.btn-lg { min-height: var(--tap); padding: .85rem 1.7rem; font-size: var(--step-1); }
.btn-block { width: 100%; }
/* Çocuk arayüzünde küçük buton yok: her hedef en az 44px
   (docs/DESIGN_SYSTEM.md § Dokunma hedefleri). */
.kid .btn, .kid .btn-sm { min-height: var(--tap-min); }
.kid .chip, .kid .nag-picker .chip { min-height: var(--tap-min); }

/* ---------------------------------------------------------------- form */
label { display: block; font-weight: 600; font-size: var(--step--1); margin-bottom: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=search], input[type=url],
select, textarea {
  width: 100%; padding: .55rem .7rem; font: inherit;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  min-height: var(--tap-min);
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--primary); outline: none;
  box-shadow: inset 0 0 0 1px var(--primary);
}
.field + .field { margin-top: .9rem; }
.field-hint { font-size: .78rem; color: var(--text-muted); margin-top: .25rem; }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.check input { width: auto; min-height: 0; }

/* --------------------------------------------------------------- etiket
   Durum etiketi — hap formu burada semantik olarak doğru. */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .55rem; border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  background: var(--ink-700); color: var(--on-primary);
  white-space: nowrap;
}
.badge .ico { width: .95em; height: .95em; }
.badge-brand   { background: var(--primary); color: var(--on-primary); }
.badge-success { background: var(--success); color: var(--on-primary); }
.badge-danger  { background: var(--danger);  color: var(--on-primary); }
.badge-warning { background: var(--warning); color: var(--on-primary); }

/* ------------------------------------------------------------ ilerleme */
.progress {
  height: 6px; border-radius: var(--radius-xs);
  background: var(--surface-sunken); overflow: hidden;
}
.progress > span {
  display: block; height: 100%;
  background: var(--primary); transition: width .35s ease;
}
.progress-lg { height: 10px; }
.progress.is-low  > span { background: var(--danger); }
.progress.is-mid  > span { background: var(--warning); }
.progress.is-high > span { background: var(--success); }
/* Tamamlama çubuğu (ünite, ödev ilerlemesi): az ilerleme hata değildir,
   kırmızı/sarı yok — andezit, bitince yeşil. */
.progress.is-completion > span { background: var(--primary); }
.progress.is-completion.is-done > span { background: var(--success); }

/* --------------------------------------------------------------- tablo
   Dikey çizgi yok, satır ayracı hairline, başlık versal ve küçük. */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
table.data th, table.data td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--border); }
table.data th {
  font-size: .69rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking); color: var(--text-faint);
  border-bottom-color: var(--border-strong);
}
table.data tbody tr:hover { background: var(--surface-alt); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- istatistik
   Rakam iri Oswald, etiket küçük versal. */
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .85rem 1rem;
}
.stat-label {
  font-size: .69rem; color: var(--accent-text); font-weight: 800;
  text-transform: uppercase; letter-spacing: var(--eyebrow-tracking);
}
.stat-value {
  font-size: 1.85rem; font-weight: 800; line-height: 1.05;
  margin-top: .15rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.stat-sub { font-size: .78rem; color: var(--text-muted); }

/* -------------------------------------------------------------- avatar
   Kare, 4px köşe: logo zemininin arayüzdeki tekrarı. */
.avatar {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary);
  font-weight: 800; font-size: .78rem; letter-spacing: .02em;
}
.avatar-lg { width: 60px; height: 60px; flex-basis: 60px; font-size: 1.1rem; }
img.avatar { display: block; object-fit: cover; background: var(--surface-sunken); }

/* ----------------------------------------------------------- boş durum */
.empty {
  text-align: center; padding: 2.5rem 1rem; color: var(--text-muted);
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--surface);
}
.empty .empty-icon { color: var(--text-faint); margin: 0 auto .6rem; width: 34px; height: 34px; }

/* --------------------------------------------------------------- flash
   Opak beyaz zemin + durum renginde tam kenar ve yazı; soluk zemin yok (§ 067, § 090). */
.flash-area { position: sticky; top: 0; z-index: 40; }
.flash {
  display: flex; gap: .55rem; align-items: flex-start;
  padding: .7rem .9rem; margin-bottom: .6rem;
  border-radius: var(--radius); border: 1px solid transparent;
  font-weight: 500; font-size: var(--step-0);
}
.flash .ico { margin-top: .15em; }
.flash-error   { background: var(--surface); color: var(--danger);   border-color: var(--danger); }
.flash-success { background: var(--surface); color: var(--success);  border-color: var(--success); }
.flash-warning { background: var(--surface); color: var(--warning);  border-color: var(--warning); }
.flash-info    { background: var(--surface); color: var(--accent-text); border-color: var(--primary); }

/* ============================================================================
   KABUKLAR
   ========================================================================= */

/* ------------------------------------------- yetişkin (koç / yönetim) rayı
   Andezit, düz, degrade yok. Aktif satır: dolgu değil sol kenar işareti. */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 224px; flex: 0 0 224px;
  background: var(--ink-900); color: var(--on-ink);
  padding: 1rem .65rem 1rem; display: flex; flex-direction: column; gap: .1rem;
}
.sidebar .brand {
  display: flex; align-items: center; gap: .6rem;
  color: var(--paper);
  padding: .35rem .55rem 1.25rem;
}
.sidebar .brand:hover { color: var(--paper); text-decoration: none; }
/* Logo andezit zemine doğrudan basılır — kutu yok, kabuk logonun zemini. */
.logo-mark, .logo-word { flex: none; width: auto; fill: currentColor; }
/* Koyu kabukta logo İŞARETİ pirinç, yazı kırık beyaz (§ 077): redesign'ın
   imzası bu. Açık zeminde (beyaz kart, e-posta) işaret `currentColor` kalır. */
.sidebar .brand .logo-mark,
.parent-header .brand .logo-mark,
.site-brand .logo-mark,
.auth-brand .logo-mark { color: var(--on-ink-accent); }
.sidebar .brand .logo-mark { height: 30px; }
.sidebar .brand .logo-word { height: 21px; margin-top: 3px; }
.sidebar .nav-item {
  position: relative;
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .55rem; border-radius: var(--radius);
  color: var(--on-ink); font-weight: 500; font-size: var(--step-0);
  text-decoration: none; min-height: 38px;
}
.sidebar .nav-item .ico { color: var(--on-ink-faint); }
/* Üzerine gelme ve seçili satır andezit ölçeğinden opak birer ton —
   yarı saydam beyaz perde değil (§ 048). */
.sidebar .nav-item:hover { background: var(--ink-800); color: var(--paper); text-decoration: none; }
.sidebar .nav-item:hover .ico { color: var(--on-ink); }
.sidebar .nav-item.active { background: var(--ink-700); color: var(--paper); font-weight: 700; }
.sidebar .nav-item.active .ico { color: var(--on-ink-accent); }
/* Aktif işaret: logo zemininin küçük karesi, çizgi değil (§ 067). */
.sidebar .nav-item.active::before {
  content: ""; position: absolute; left: -.65rem; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; background: var(--on-ink-accent);
}
.sidebar .nav-section {
  font-size: .66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking); color: var(--on-ink-faint);
  padding: 1.1rem .55rem .35rem;
}
.sidebar .sidebar-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--ink-700); }
/* Logo satırı: sağda rayı daraltan düğme. */
.sidebar .sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .25rem; }
.sidebar .sidebar-toggle {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  background: none; border: 0; border-radius: var(--radius); cursor: pointer;
  color: var(--on-ink-faint);
}
.sidebar .sidebar-toggle:hover { background: var(--ink-800); color: var(--paper); }

/* Daraltılmış ray: yalnız ikon; etiket üzerine gelince/odakta yanda çıkar.
   Tercih tarayıcıda (localStorage), yalnız geniş ekranda geçerli. */
@media (min-width: 861px) {
  .shell.sidebar-collapsed .sidebar { width: 64px; flex-basis: 64px; }
  .shell.sidebar-collapsed .sidebar .sidebar-head { flex-direction: column; align-items: center; gap: 0; }
  .shell.sidebar-collapsed .sidebar .brand { justify-content: center; padding: .35rem 0 .5rem; }
  .shell.sidebar-collapsed .sidebar .brand .logo-word { display: none; }
  .shell.sidebar-collapsed .sidebar .nav-item { justify-content: center; }
  .shell.sidebar-collapsed .sidebar .nav-item > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .shell.sidebar-collapsed .sidebar .nav-section {
    font-size: 0; padding: 0; margin: .7rem .4rem .45rem; border-top: 1px solid var(--ink-700);
  }
  .shell.sidebar-collapsed .sidebar-toggle .ico { transform: rotate(180deg); }
  .shell.sidebar-collapsed .sidebar .nav-item::after {
    content: attr(data-label);
    position: absolute; left: calc(100% + .6rem); top: 50%; transform: translateY(-50%);
    z-index: 50; white-space: nowrap; pointer-events: none;
    background: var(--ink-900); color: var(--paper); border-radius: var(--radius);
    padding: .3rem .6rem; font-size: var(--step--1); font-weight: 500;
    display: none;
  }
  .shell.sidebar-collapsed .sidebar .nav-item:hover::after,
  .shell.sidebar-collapsed .sidebar .nav-item:focus-visible::after { display: block; }
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: .7rem 1.4rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.topbar h1 { font-size: var(--step-2); margin: 0; letter-spacing: -.02em; }
.page { padding: 1.4rem; flex: 1; }

@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: 100%; flex: none; flex-direction: row; overflow-x: auto;
    padding: .45rem .5rem; gap: .2rem; align-items: center;
  }
  .sidebar .brand { padding: .3rem .5rem; }
  .sidebar .brand .logo-word { display: none; }
  .sidebar .brand .logo-mark { height: 26px; }
  .sidebar .nav-section, .sidebar .sidebar-foot { display: none; }
  .sidebar .nav-item { white-space: nowrap; }
  .sidebar .nav-item.active::before { left: 50%; top: auto; bottom: -.4rem; margin: 0 0 0 -3px; }
  .sidebar .sidebar-head { flex: none; }
  .sidebar .sidebar-toggle { display: none; }
  .page { padding: 1rem; }
}

/* --------------------------------------------- öğrenci: mobil öncelikli
   Andezit düz başlık bandı (degrade YOK), düz alt kenar; sabit alt navigasyon. */
.kid { font-size: var(--step-1); padding-bottom: 80px; background: var(--surface-alt); }
.kid-header {
  position: relative;
  background: var(--ink-900); color: var(--paper);
  padding: 1.1rem 1rem 1.2rem;
}
.kid-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; max-width: 920px; margin: 0 auto; }
.kid-header-text { min-width: 0; flex: 1; }
.kid-header-actions { display: flex; align-items: center; gap: .4rem; flex: none; }
.kid-header a { color: var(--paper); }
.kid-header .hello { font-size: 1.3rem; font-weight: 800; margin: 0; letter-spacing: -.02em; color: var(--paper); }
.kid-header .sub { color: var(--on-ink); font-size: .88rem; margin: .1rem 0 0; }
.kid-header .icon-btn { color: var(--on-ink); padding: .4rem; display: grid; place-items: center; min-width: var(--tap-min); min-height: var(--tap-min); }
.kid-header .icon-btn:hover { color: var(--paper); }
.kid-main { padding: 1rem; max-width: 920px; margin: 0 auto; }
/* Ana sayfa bilgisayarda iki sütun; kabuk genişler, kenarlar boş kalmaz (§ 089). */
.kid-main.is-wide, .kid-header.is-wide .kid-header-row { max-width: 1240px; }
@media (min-width: 1080px) {
  .kid-dash-side > :first-child { margin-top: 0; }
  .kid-main.is-wide { padding: 1.5rem 1.5rem 2rem; }
  .kid-dash { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.5rem; align-items: start; }
  .kid-dash .tile { min-height: 150px; padding: 1.1rem; }
  .kid-dash .tile .tile-title { font-size: var(--step-2); }
  .kid-dash .practice-link { min-height: 96px; }
  .kid-dash-side .btn-row { flex-direction: column; }
  .kid-dash-side .btn-row .btn { justify-content: flex-start; }
}

/* Öğrenci aksiyon karoları (§ 095). Tek kutu stili: kartla aynı beyaz zemin,
   aynı nötr ince kenar, alt gölge/çizgi yok. Aile rengi yalnız dolu ikon
   karesinde. Dolu mor birincil karo kalktı — sayfada dört ayrı kutu stili
   gibi duruyordu. */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem .75rem; }
.tile {
  --tile-accent: var(--fam-ink);
  position: relative;
  min-height: 112px; padding: .9rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: .6rem;
  border: 1px solid var(--box-border);
  border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  text-decoration: none;
  transition: border-color .12s;
}
.tile:hover { text-decoration: none; color: var(--text); border-color: var(--primary); }
.tile:active { border-color: var(--primary); background: var(--surface-alt); }
.tile .tile-icon {
  width: 44px; height: 44px; padding: 9px; flex: none; box-sizing: border-box;
  stroke-width: 1.8; border-radius: var(--radius);
  background: var(--tile-accent); color: var(--paper);
}
.tile .tile-title { font-weight: 700; font-size: var(--step-1); letter-spacing: -.01em; display: block; }
.tile .tile-sub { font-size: .8rem; color: var(--text-muted); display: block; line-height: 1.35; }

.tile-violet, .tile-plum, .tile-purple, .tile-primary { --tile-accent: var(--fam-violet); }
.tile-gold  { --tile-accent: var(--fam-gold); }
.tile-pine, .tile-teal { --tile-accent: var(--fam-pine); }
.tile-clay  { --tile-accent: var(--fam-clay); }
.tile-brand { --tile-accent: var(--fam-ink); }

/* Bildirim noktası: bekleyen iş varsa ikonun köşesinde kırmızı yuvarlak +
   sayı. Opak, kırık beyaz halkalı (§ 089). */
.tile-icon-wrap { position: relative; display: inline-flex; align-self: flex-start; }
.notif-dot {
  position: absolute; top: -7px; right: -9px; min-width: 22px; height: 22px; padding: 0 5px;
  display: inline-grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--danger); color: var(--paper); box-shadow: 0 0 0 2px var(--paper);
  font-size: .72rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}

/* Oyun ve pratik şeridi: karonun küçük kardeşi, aynı kutu stili. */
/* Üç ya da dört bağlantı: sığdığı kadar yan yana, kalanı alt satıra (§ 100). */
.practice-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: .75rem; }
.practice-link {
  --tile-accent: var(--fam-ink);
  min-height: var(--tap); padding: .7rem .5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid var(--box-border);
  border-radius: var(--radius); background: var(--surface);
  color: var(--text); font-weight: 700; text-decoration: none;
  transition: border-color .12s;
}
.practice-link:hover { color: var(--text); text-decoration: none; border-color: var(--primary); }
.practice-link:active { border-color: var(--primary); background: var(--surface-alt); }
.practice-link .ico {
  width: 38px; height: 38px; padding: 8px; box-sizing: border-box; stroke-width: 1.8;
  border-radius: var(--radius); background: var(--tile-accent); color: var(--paper);
}
.practice-gold { --tile-accent: var(--fam-gold); }
.practice-clay { --tile-accent: var(--fam-clay); }
.practice-pine { --tile-accent: var(--fam-pine); }
.practice-violet { --tile-accent: var(--fam-violet); }

/* Yatay tam genişlik karo (canlı ders duyurusu gibi) */
.tile-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: var(--tap); }
.tile-wide .tile-icon { width: 40px; height: 40px; padding: 8px; }

/* Öğrenci alt navigasyonu */
.kid-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; background: var(--surface); border-top: 1px solid var(--border-strong);
  padding: 0 .25rem calc(env(safe-area-inset-bottom, 0px));
}
.kid-nav a {
  flex: 1; min-height: var(--tap); padding: .4rem 0 .35rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-muted); font-size: .68rem; font-weight: 600;
  text-decoration: none; position: relative;
}
.kid-nav a .ico { width: 22px; height: 22px; }
.kid-nav .tab-icon { position: relative; display: inline-flex; }
.kid-nav .notif-dot { top: -6px; right: -12px; min-width: 18px; height: 18px; font-size: .64rem; padding: 0 4px; }
.kid-nav a:hover { text-decoration: none; color: var(--text); }
.kid-nav a.active { color: var(--accent-text); }
/* Aktif sekme: üstte çizgi değil, logo zemininin karesi (§ 067); etiketle
   aynı pirinç renkte (§ 077). */
.kid-nav a.active::before {
  content: ""; position: absolute; top: 0; left: 50%; margin-left: -4px;
  width: 8px; height: 8px; background: var(--accent-text);
}

/* Seri göstergesi — andezit bantta dolu kırık beyaz çip, ikonu pirinç. Cam efekti
   (yarı saydam beyaz + ince beyaz kenar) değil, opak ve okunaklı (§ 048). */
.streak {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--paper); border: 0;
  border-radius: var(--radius); padding: .3rem .6rem;
  font-weight: 800; font-size: .85rem; color: var(--ink-900);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.streak .ico { color: var(--accent-text); }

/* --------------------------------------------------------------- veli */
.parent-header {
  background: var(--ink-900); color: var(--paper);
  padding: .75rem 1.4rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.parent-header .brand { display: flex; align-items: center; gap: .5rem; color: var(--paper); }
.parent-header .brand:hover { color: var(--paper); text-decoration: none; }
.parent-header .brand .logo-mark { height: 26px; }
.parent-header .brand .logo-word { height: 18px; margin-top: 3px; }
.parent-header a { color: var(--on-ink); }
.parent-header a:hover { color: var(--paper); }
.parent-main { max-width: 940px; margin: 0 auto; padding: 1.4rem 1rem 3rem; }

/* ---------------------------------------------------------- giriş ekranı
   Ortalanmış degradeli kart yerine iki panel: solda andezit marka alanı,
   sağda form. Mobilde marka bandı üste iner. */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-brand {
  background: var(--ink-900); color: var(--paper);
  padding: 3rem;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand .logo-mark { align-self: flex-start; height: 76px; margin-bottom: 1.5rem; }
/* h1 logonun yazısını taşır (ekran okuyucu "ByChess" okur). */
.auth-brand h1 { margin: 0 0 .7rem; line-height: 0; color: var(--paper); }
.auth-brand h1 .logo-word { height: 3.1rem; }
.auth-brand .auth-club {
  color: var(--on-ink-accent); font-family: var(--font-display); font-weight: 500;
  font-size: 1rem; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; margin: 0;
}
.auth-brand .auth-tag { color: var(--on-ink); max-width: 34ch; margin: 1.4rem 0 0; font-weight: 300; font-size: 1.05rem; }

.auth-panel {
  background: var(--surface-paper);
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 1.5rem;
}
.auth-card { width: 100%; max-width: 360px; }
.auth-card > h2 { font-size: var(--step-2); margin-bottom: 1.3rem; }
.auth-switch { margin-top: 1rem; font-size: var(--step--1); }

@media (max-width: 860px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-brand { padding: 1.75rem 1.25rem 1.5rem; }
  .auth-brand .logo-mark { height: 48px; margin-bottom: 1rem; }
  .auth-brand h1 .logo-word { height: 2.1rem; }
  .auth-brand .auth-club { font-size: .85rem; }
  .auth-brand .auth-tag { display: none; }
  .auth-panel { padding: 1.75rem 1.25rem 3rem; align-items: flex-start; }
}

/* PIN girişi — büyük, ayrık haneler */
.pin-input {
  font-size: 2rem !important; letter-spacing: .7em;
  text-align: center; padding-left: .7em !important;
  font-weight: 700; min-height: 64px !important;
}

/* ============================================================================
   PUZZLE TAHTASI
   ========================================================================= */
.board-wrap {
  position: relative; width: 100%; max-width: 560px; margin: 0 auto;
  border-radius: var(--radius); overflow: hidden;
  border: 2px solid var(--border-strong); transition: border-color .15s;
}
.board-wrap.is-correct { border-color: var(--success); }
.board-wrap.is-wrong { border-color: var(--danger); }
/* Taşların z-index'i (10, sürüklenen 9999) tahtanın içinde kalsın; yoksa
   üstteki işaret ve terfi paneli taşların altında kalıyor. */
g-chess-board {
  width: 100%; aspect-ratio: 1 / 1; display: block; isolation: isolate;
  --square-color-light: var(--board-light);
  --square-color-dark: var(--board-dark);
  --square-color-light-hover: var(--board-highlight);
  --square-color-dark-hover: var(--board-highlight);
}
.board-flash {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 4;
}
/* Tahtanın üstüne renkli perde çekilmez: ortada dolu bir kare işaret,
   kırık beyaz halkayla tahtadan ayrılır. Kenar zaten yeşil/kırmızı (§ 048). */
.board-flash .ico {
  width: 88px; height: 88px; padding: 16px; stroke-width: 2.6;
  border-radius: var(--radius); color: var(--paper);
  outline: 3px solid var(--paper);
}
.board-flash.show { opacity: 1; }
.board-flash.ok .ico { background: var(--success); }
.board-flash.no .ico { background: var(--danger); }

@keyframes board-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.board-shake { animation: board-shake .4s; }

.promo-dialog {
  position: absolute; inset: 0; z-index: 5;
  display: none; place-items: center;
}
.promo-dialog.show { display: grid; }
/* Karartma perdesi yok: tahta görünür kalır, seçim paneli andezit
   çerçeveyle öne çıkar (§ 048). Katman yine tahtaya tıklamayı keser. */
.promo-dialog .promo-inner {
  display: flex; gap: .4rem; background: var(--surface-paper);
  padding: .7rem; border-radius: var(--radius);
  border: 3px solid var(--ink-900); box-shadow: var(--shadow-lg);
}
.promo-dialog button {
  width: 60px; height: 60px; font-size: 2.1rem; cursor: pointer; line-height: 1;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
}
.promo-dialog button:hover { background: var(--soft-bg); border-color: var(--primary); }

.puzzle-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); align-items: start; }
@media (max-width: 900px) { .puzzle-layout { grid-template-columns: 1fr; } }

/* Özel puzzle bestecisi: solda tahta, sağda form. */
.composer {
  display: grid; gap: 1.25rem;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .composer { grid-template-columns: 1fr; } }
.composer-ok    { color: var(--success); }
.composer-warn  { color: var(--warning); }
.composer-error { color: var(--danger); }

.theme-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.theme-chips .chip {
  padding: .25rem .65rem; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: .8rem; font-weight: 600; cursor: pointer; color: var(--text);
}
.theme-chips .chip.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* ============================================================================
   KÜÇÜK GRAFİKLER — components/charts.html + static/js/charts.js
   Günlük sütun ve puan çizgisi. Değer tooltip'te değil çizim alanının
   üstündeki şeritte (`chart-readout`) yazar: telefonda parmak, işaret ettiği
   çubuğu kapatmasın. Seçili gün o şeride ince bir kılavuz çizgiyle bağlanır.
   ========================================================================= */
.chart {
  --chart-band: 1.75rem;  /* değer şeridi */
  --chart-h: 104px;       /* çizim alanı */
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "y stage" ". x";
  column-gap: .5rem; margin: 0; position: relative;
}
.chart-y {
  grid-area: y; position: relative; min-width: 1.2rem;
  margin-top: var(--chart-band); height: var(--chart-h);
  font-size: .69rem; line-height: 1; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.chart-y span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.chart-stage { grid-area: stage; position: relative; min-width: 0; padding-top: var(--chart-band); }
.chart-readout {
  position: absolute; top: 0; left: 0; margin: 0;
  display: flex; align-items: baseline; gap: .35rem;
  font-size: var(--step--1); line-height: 1.3; white-space: nowrap;
}
.chart-readout.is-end { left: auto; right: 0; }   /* JS'siz: son gün sağda */
.chart-readout-label { color: var(--text-muted); }
.chart-readout-value { color: var(--text); font-weight: 700; }
.chart-plot {
  position: relative; height: var(--chart-h);
  cursor: crosshair; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.chart-plot:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.chart-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--border); pointer-events: none; }
/* Kılavuz: değer etiketinin altından tabana. */
.chart-guide {
  position: absolute; top: calc(1.35rem - var(--chart-band)); bottom: 0;
  width: 1px; margin-left: -.5px; background: var(--border-strong); pointer-events: none;
}
.chart-x {
  grid-area: x; display: flex; justify-content: space-between; gap: .5rem;
  margin-top: .3rem; font-size: .69rem; color: var(--text-faint);
}

/* Sütun: her gün eşit bir dilim ve dilimin tamamı dokunma hedefi; boyalı
   çubuk içinde ortalı, en fazla 24px, komşusundan 2px zemin boşluğuyla ayrı. */
.chart-cols { position: absolute; inset: 0; display: flex; border-bottom: 1px solid var(--border-strong); }
.chart-col { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; }
.chart-bar {
  width: calc(100% - 2px); max-width: 24px;
  background: var(--chart-mark); border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.chart-bar.is-empty { height: 3px; background: var(--border-strong); border-radius: 0; }
.chart-col.is-active .chart-bar { background: var(--chart-mark-active); }

/* Çizgi: 2px, altında %10'luk alan; seçili noktada 8px nokta + 2px zemin halkası. */
.chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.chart-area { fill: var(--soft-bg); stroke: none; }
.chart-line {
  fill: none; stroke: var(--chart-mark); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.chart-dot {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--chart-mark-active); box-shadow: 0 0 0 2px var(--surface); pointer-events: none;
}

/* ============================================================================
   CANLI SINIF (Faz 2 § 1)
   ========================================================================= */
.live-layout {
  display: grid; gap: 1.25rem;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .live-layout { grid-template-columns: 1fr; } }

/* Ok/daire katmanı tahtanın üstünde; tıklamalar tahtaya geçsin. */
.board-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3;
}

.live-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.live-tools .check { font-size: .85rem; }
.live-tools .btn:disabled { cursor: default; }

/* Tahta sekmeleri (§ 060): yalnız koçta. Sığmayan sekme alt satıra sarar —
   yatay kaydırma sekmeleri gözden saklıyordu. */
.board-tab-list { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.board-tab {
  display: inline-flex; align-items: center; flex: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
}
.board-tab:hover { border-color: var(--border-hover); }
.board-tab.is-active { background: var(--primary); border-color: var(--primary); color: var(--text-inverse); }
.board-tab-label {
  min-height: 34px; max-width: 14rem; padding: .3rem .65rem;
  border: 0; background: none; color: inherit; cursor: pointer;
  font: inherit; font-size: var(--step--1); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-tab.is-active .board-tab-label { cursor: text; }
.board-tab-close {
  display: grid; place-items: center; width: 28px; min-height: 34px; padding: 0;
  border: 0; border-left: 1px solid var(--border); background: none; color: inherit; cursor: pointer;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.board-tab.is-active .board-tab-close { border-left-color: var(--primary-hover); }
.board-tab-close .ico { width: 14px; height: 14px; }
.board-tab-close:hover { background: var(--danger); color: var(--paper); }
.board-tab-rename {
  width: 10rem; min-height: 34px; padding: .25rem .5rem; margin: 0;
  font-size: var(--step--1); border: 0; border-radius: var(--radius);
}

/* Canlı ders notasyonu (§ 060): tahtanın altında, kendi içinde kayar. */
.live-notation .move-list { position: relative; max-height: 9.5rem; }
.kid .live-notation .move-list { max-height: 12rem; }
.live-move-label { font-variant-numeric: tabular-nums; }
.live-history-note { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; color: var(--warning); }

/* Canlı yayın göstergesi — yanıp sönen nokta yerine sabit, sakin işaret. */
.live-dot { display: inline-flex; align-items: center; gap: .35rem; color: var(--danger); font-weight: 700; }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
/* Kırmızı rozetin içinde kırmızı yazı + kırmızı nokta okunmuyordu: dolu
   rozette yazı ve nokta rozetin kendi ön plan rengini (kırık beyaz) alır. */
.badge.live-dot { color: var(--on-primary); }
.badge.live-dot::before { background: currentColor; }

.video-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  border-radius: var(--radius); overflow: hidden; background: var(--surface-sunken);
  border: 1px solid var(--border);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed:fullscreen, .video-embed:-webkit-full-screen { aspect-ratio: auto; border-radius: 0; }
.video-expand {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--ink-900); color: var(--paper); border: 0; border-radius: var(--radius);
}
/* Dar ekranda Daily'nin ızgarası küçülüp yalnız kendi kamerayı gösterebiliyor
   (§ 045); daha fazla boy tanıyıp tam ekran düğmesini öne çıkarıyoruz. */
@media (max-width: 640px) {
  .video-embed { aspect-ratio: 3 / 4; }
}

.participant-list { list-style: none; margin: 0; padding: 0; }
.participant {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: var(--step-0);
}
.participant:last-child { border-bottom: 0; }
.participant.is-away { color: var(--text-faint); }

.chat-log {
  max-height: 240px; overflow-y: auto; font-size: .87rem;
  background: var(--surface-sunken); border-radius: var(--radius); padding: .5rem .6rem;
}
.chat-line { margin-bottom: .35rem; overflow-wrap: anywhere; }
.chat-line .chat-who { font-weight: 700; }
.chat-line.is-coach .chat-who { color: var(--accent-text); }
.chat-line .chat-at { font-size: .7rem; color: var(--text-faint); margin-left: .35rem; }

/* Tahta düzenleyici (§ 058): tahtanın üstünde ve altında taş paleti
   (Lichess board editor gibi), altında sıra/rok/FEN paneli. */
.editor-spares {
  display: flex; justify-content: center; gap: .25rem;
  width: 100%; max-width: 560px; margin: .5rem auto 0; padding: .25rem;
  background: var(--surface-sunken); border-radius: var(--radius);
}
.editor-spare {
  flex: 1 1 0; min-width: 0; max-width: 64px; height: 56px; min-height: var(--tap-min);
  display: grid; place-items: center; padding: .2rem; cursor: pointer;
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius);
  touch-action: none; /* paletten sürüklerken sayfa kaymasın */
}
.editor-spare img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.editor-spare .ico { width: 22px; height: 22px; }
.editor-spare:hover { border-color: var(--border-hover); }
.editor-spare:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.editor-spare.is-selected {
  border: 2px solid var(--primary); background: var(--soft-bg); color: var(--soft-text);
}
.board-wrap.is-editing { border-color: var(--primary); }
.board-wrap.is-editing g-chess-board { touch-action: none; }
.board-wrap.is-painting g-chess-board { cursor: crosshair; }
.editor-ghost { position: fixed; z-index: 1000; pointer-events: none; }

.board-editor-title { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: .4rem; }
.editor-options { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: .6rem; }
.editor-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.editor-field legend { font-weight: 600; font-size: var(--step--1); margin-bottom: .35rem; padding: 0; }
.editor-castling { display: grid; grid-template-columns: repeat(2, auto); gap: .35rem 1.25rem; }
.editor-field .check { font-size: .87rem; margin: 0; }
.editor-field .check:has(input:disabled) { color: var(--text-faint); }
#editor-fen { font-family: var(--font-mono); font-size: .8rem; }
.editor-msg { margin: .5rem 0 0; font-size: .85rem; color: var(--text-muted); }
.editor-msg.is-error { color: var(--danger); font-weight: 600; }

/* Hazır pozisyonlar (§ 057): canlı derste seçici + koç panelindeki liste. */
#position-note { margin-top: .5rem; color: var(--text); }
.position-picker-list { max-height: 460px; overflow-y: auto; margin-top: .6rem; padding-right: .25rem; }
.position-group + .position-group { margin-top: .75rem; }
.position-group-title {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin: 0 0 .4rem;
}
.position-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.position-pick {
  display: flex; flex-direction: column; gap: .3rem; min-height: var(--tap-min);
  padding: .4rem; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.position-pick:hover { border-color: var(--border-hover); background: var(--surface-alt); }
.position-pick:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.position-pick.is-active { border-color: var(--primary); background: var(--soft-bg); }
/* Mini tahta yalnız görsel; tıklama düğmeye gitsin. */
.position-pick-board { display: block; pointer-events: none; border-radius: var(--radius-xs); overflow: hidden; }
.position-pick-title { font-size: .82rem; font-weight: 700; line-height: 1.25; }
.position-pick-meta { font-size: .72rem; color: var(--text-muted); }

/* Hazır açılışlar (§ 082): seçicide ve listede hamle dizisi. Notasyon
   rakam ağırlıklı, tek aralıklı yazıyla hizalı okunuyor. */
.opening-group + .opening-group { margin-top: .75rem; }
.opening-moves { font-family: var(--font-mono); font-size: .72rem; line-height: 1.5; }
.position-pick-meta.opening-moves { color: var(--text-muted); word-break: break-word; }
.position-card .opening-moves { color: var(--text); margin-top: .25rem; }

/* Canlı derste puana göre puzzle (§ 084): puan kutusu ve yalnız koça
   görünen çözüm. Çözüm açılana kadar kapalı — koç ekranını paylaşıyor
   olabilir. */
/* Genel `input[type=number]` %100 genişlikte; puan kutusu dar kalsın. */
input.puzzle-rating-input {
  width: 6rem; flex: 0 0 auto; text-align: center; font-weight: 700;
}
.puzzle-solution {
  margin-top: .6rem; padding: .6rem;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.puzzle-solution-moves {
  font-family: var(--font-mono); font-size: .85rem; line-height: 1.6;
  word-break: break-word; margin-top: .4rem;
}

.position-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.position-card {
  display: flex; flex-direction: column; gap: .5rem; padding: .6rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.position-card .board-wrap { border-width: 1px; }
.position-card .position-body { flex: 1; }
.position-actions { flex-wrap: wrap; }

/* ============================================================================
   TAKVİM / YOKLAMA (Faz 2 § 2)
   ========================================================================= */
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }
@media (max-width: 860px) { .week-grid { grid-template-columns: 1fr; } }
.week-day {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .55rem; min-height: 118px;
}
.week-day.is-today { border-color: var(--primary); }
.week-day.is-today h4 { color: var(--accent-text); }
.week-day h4 {
  font-size: .66rem; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking);
  color: var(--text-faint); font-weight: 800; margin-bottom: .45rem;
}
.lesson-chip {
  display: block; padding: .35rem .45rem; margin-bottom: .3rem;
  border-radius: var(--radius); border: 1px solid var(--soft-border);
  background: var(--soft-bg); color: var(--soft-text);
  font-size: .78rem; font-weight: 600; text-decoration: none;
}
.lesson-chip:hover { background: var(--soft-bg-hover); text-decoration: none; color: var(--soft-text); }
.lesson-chip.is-cancelled {
  background: var(--surface-sunken); color: var(--text-muted);
  border-color: var(--border); text-decoration: line-through;
}
.lesson-chip .lesson-time { display: block; font-weight: 800; font-variant-numeric: tabular-nums; }

.att-picker { display: flex; gap: .25rem; flex-wrap: wrap; }
.att-picker input { position: absolute; opacity: 0; width: 0; height: 0; }
.att-picker label {
  margin: 0; padding: .3rem .6rem; border-radius: var(--radius);
  border: 1px solid var(--border-strong); font-size: .8rem; cursor: pointer;
  background: var(--surface); font-weight: 600;
}
.att-picker input:checked + label { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.att-picker input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ============================================================================
   MÜFREDAT (Faz 2 § 3)
   ========================================================================= */
.level-card {
  display: flex; gap: .85rem; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .8rem .9rem;
  text-decoration: none; color: var(--text);
}
.level-card:hover { border-color: var(--border-hover); text-decoration: none; color: var(--text); }
.level-card-main {
  display: flex; gap: .85rem; align-items: center; flex: 1 1 auto;
  text-decoration: none; color: var(--text); min-width: 0;
}
.level-card-main:hover { text-decoration: none; color: var(--text); }
.level-move { display: flex; flex-direction: column; gap: .2rem; }
.level-move .btn { padding: .1rem .45rem; line-height: 1.2; min-height: 0; }
.level-move .btn[disabled] { cursor: default; }
/* Kilitli: %50 soluk kart değil — sayfa zemini, kesik kenar, silik metin.
   Kart opak kalır; iki temada da etkin karttan geride durur (§ 048). */
.level-card.is-locked {
  pointer-events: none; background: var(--surface-alt);
  border-style: dashed; border-color: var(--border-strong); color: var(--text-faint);
}
.level-card.is-locked .muted { color: var(--text-faint); }
/* Seviye numarası kare — logo zemininin tekrarı. */
.level-num {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--radius);
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
  background: var(--primary); color: var(--on-primary);
}
.level-card.is-locked .level-num { background: var(--border-strong); color: var(--surface); }

.unit-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .3rem; border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--text); min-height: var(--tap-min);
}
.unit-row:last-child { border-bottom: 0; }
.unit-row:hover { color: var(--text); text-decoration: none; background: var(--surface-alt); }
.unit-row.is-locked { pointer-events: none; color: var(--text-faint); }
.unit-row.is-locked .muted { color: var(--text-faint); }
.unit-mark { width: 1.5rem; text-align: center; color: var(--text-faint); flex: none; }
.unit-mark.is-done { color: var(--success); }

.quiz-question { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
.quiz-option { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .1rem; font-weight: 500; }
.quiz-option input { width: auto; min-height: 0; margin-top: .3rem; }
.quiz-result.is-ok { color: var(--success); font-weight: 700; }
.quiz-result.is-no { color: var(--danger); font-weight: 700; }
.quiz-board { max-width: 340px; margin: 0; }
.quiz-move { display: flex; gap: .5rem; align-items: flex-end; }
.quiz-move .field { flex: 1; margin: 0; }

/* Ünite içeriği (Markdown). "Unutma" kutusu blockquote ile yazılır. */
.lesson h3 { margin-top: 1.4rem; }
.lesson h3:first-child { margin-top: 0; }
.lesson ul, .lesson ol { padding-left: 1.3rem; }
.lesson li { margin: .2rem 0; }
.lesson blockquote {
  margin: 1.2rem 0 0; padding: .8rem 1rem;
  background: var(--primary); color: var(--paper);
  border-radius: var(--radius);
}
.lesson blockquote strong { color: var(--on-ink-accent); }
.lesson blockquote p { margin: 0; }
.lesson table { border-collapse: collapse; margin: .6rem 0; }
.lesson th, .lesson td { padding: .35rem .8rem; border-bottom: 1px solid var(--border); text-align: left; }

/* "Öğrenci görünümü" önizlemesi (§ 098): koçun yazdığı Markdown, öğrenci
   sayfasındaki gibi — sayfa zemininde açık kart, öğrenci punto ölçeğinde. */
.md-field { margin-top: .35rem; }
.md-preview {
  margin-top: .6rem; padding: .7rem;
  background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.md-preview .card { margin: 0; font-size: var(--step-1); }
.md-preview .lesson-board { max-width: 260px; }

/* Ünite içeriğindeki diyagram: `[tahta: FEN | açıklama]` (§ 041) */
.lesson-board { margin: 1rem 0; max-width: 320px; }
.lesson-board .board-wrap { border-width: 1px; }
.lesson-board figcaption {
  font-size: .82rem; color: var(--text-muted); margin-top: .4rem; line-height: 1.4;
}

/* ============================================================================
   ROZETLER (Faz 2 § 6)
   ========================================================================= */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .75rem; }

/* Rozet madalyası (§ 089) — components/badge_medal.html. Renk ailesi
   `fam-*`: dolu madalya, koyu çember, içte açık halka, altta iki kuyruklu
   kurdele ve opak taş gölgesi. Degrade ve saydamlık yok; hacim tonlardan. */
.fam-violet { --m: var(--fam-violet); --m-soft: var(--fam-violet-soft); --m-deep: var(--fam-violet-deep); }
.fam-gold   { --m: var(--fam-gold);   --m-soft: var(--fam-gold-soft);   --m-deep: var(--fam-gold-deep); }
.fam-pine   { --m: var(--fam-pine);   --m-soft: var(--fam-pine-soft);   --m-deep: var(--fam-pine-deep); }
.fam-clay   { --m: var(--fam-clay);   --m-soft: var(--fam-clay-soft);   --m-deep: var(--fam-clay-deep); }
.fam-ink    { --m: var(--fam-ink);    --m-soft: var(--fam-ink-soft);    --m-deep: var(--fam-ink-deep); }
.medal-card {
  text-align: center; padding: .9rem .5rem .8rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--box-border);
}
.medal-wrap { position: relative; display: block; width: 64px; height: 84px; margin: 0 auto .3rem; }
/* Kurdele kuyruğu: içi boş kutu, iki yan kenarlık dolu, alt kenarlık yok
   (renksiz) — ucu V çentikli şerit çıkar. clip-path yok (§ 066 testi). */
.medal-wrap::before, .medal-wrap::after {
  content: ""; position: absolute; top: 46px; width: 0; height: 30px;
  border-style: solid; border-width: 0 8px 8px;
}
.medal-wrap::before { left: 13px; border-color: var(--m-deep) var(--m-deep) transparent; transform: rotate(16deg); }
.medal-wrap::after  { right: 13px; border-color: var(--m) var(--m) transparent; transform: rotate(-16deg); }
.medal {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--m); border: 3px solid var(--m-deep);
  box-shadow: inset 0 0 0 3px var(--m), inset 0 0 0 5px var(--m-soft), 0 4px 0 var(--m-deep);
}
.medal .medal-icon { width: 30px; height: 30px; stroke-width: 2; color: var(--paper); }
.medal-card .badge-title { font-weight: 700; font-size: .82rem; line-height: 1.25; color: var(--text); }
.medal-card .badge-desc { font-size: .7rem; color: var(--text-muted); margin-top: .15rem; }
.medal-card.is-new { border-color: var(--m); box-shadow: inset 0 0 0 1px var(--m); }
/* Kilitli: gri, kurdelesiz, kesik kenar — opak, soluk değil (§ 048). */
.medal-card.is-locked { background: var(--surface-alt); border: 1px dashed var(--border-strong); box-shadow: none; }
.medal-card.is-locked .medal-wrap { height: 64px; }
.medal-card.is-locked .medal-wrap::before, .medal-card.is-locked .medal-wrap::after { display: none; }
.medal-card.is-locked .medal { background: var(--surface-sunken); border: 3px dashed var(--border-strong); box-shadow: none; }
.medal-card.is-locked .medal .medal-icon { color: var(--text-faint); }
.medal-card.is-locked .badge-title, .medal-card.is-locked .badge-desc { color: var(--text-faint); }

/* Yeni rozet bildirimi (öğrenci paneli) */
.badge-toast {
  display: flex; gap: .7rem; align-items: center;
  background: var(--surface); border: 1px solid var(--primary);
  border-left-width: 3px; color: var(--text);
  border-radius: var(--radius); padding: .75rem .9rem; font-weight: 600;
}
.badge-toast .badge-icon { width: 26px; height: 26px; color: var(--accent-text); flex: none; }
/* Aileli bildirim: küçük dolu madalya, kenar ailenin renginde (§ 089). */
.badge-toast[class*="fam-"] { border-color: var(--m); border-left-width: 1px; background: var(--m-soft); box-shadow: 0 3px 0 var(--m-deep); }
.badge-toast[class*="fam-"] .badge-icon {
  width: 42px; height: 42px; padding: 8px; box-sizing: border-box; border-radius: 50%;
  background: var(--m); color: var(--paper); stroke-width: 2; box-shadow: 0 0 0 2px var(--m-deep);
}

/* ============================================================================
   MAÇ ANALİZİ (Faz 3 § 1)
   ========================================================================= */
.analysis-layout {
  display: grid; gap: 1.25rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .analysis-layout { grid-template-columns: 1fr; } }

/* Salt-okunur görünüm (öğrenci + veli) — components/analysis_viewer.html.
   Dar ekranda tek sütun: künye → değerlendirme → tahta → düğmeler → not →
   hamleler. 760px üstünde tahta solda, sağda künye → düğmeler → not →
   değerlendirme → hamleler; tahta ekran yüksekliğine sığar ve kaydırınca
   yerinde kalır. Eskiden tahta 560px tam genişlikteydi, not onun altında
   kalıyordu: her hamlede aşağı kaydırıp geri çıkmak gerekiyordu. */
.analysis-view {
  --av-chrome: 2rem;  /* yapışkan tahtanın üst/alt payı */
  display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "info" "board" "controls" "note" "moves";
}
.analysis-view.has-summary {
  grid-template-areas: "info" "summary" "board" "controls" "note" "moves";
}
.kid .analysis-view { --av-chrome: calc(2rem + var(--tap)); } /* sabit alt menü */
.av-info     { grid-area: info; }
.av-summary  { grid-area: summary; }
.av-board    { grid-area: board; }
.av-controls { grid-area: controls; }
.av-note     { grid-area: note; }
.av-moves    { grid-area: moves; }
@media (min-width: 760px) {
  .analysis-view {
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "board info"
      "board controls"
      "board note"
      "board moves";
    align-items: start;
  }
  /* Değerlendirme bir kez okunur; hamle hamle okunan not onun üstünde. */
  .analysis-view.has-summary {
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
      "board info"
      "board controls"
      "board note"
      "board summary"
      "board moves";
  }
  .av-board { position: sticky; top: 1rem; }
  .av-board .board-wrap {
    max-width: min(560px, calc(100vh - var(--av-chrome)));
    max-width: min(560px, calc(100dvh - var(--av-chrome)));
  }
}

/* Hamle listesi — satranç notasyonu gibi akar */
.move-list {
  display: flex; flex-wrap: wrap; gap: .1rem .25rem;
  align-items: baseline; max-height: 340px; overflow-y: auto;
  font-variant-numeric: tabular-nums;
}
.move-list .move-num { color: var(--text-faint); font-size: .8rem; margin-left: .3rem; font-weight: 600; }
.move-list .move-num:first-child { margin-left: 0; }
.move-list .move {
  font: inherit; font-size: .9rem; font-weight: 600;
  padding: .12rem .32rem; border-radius: var(--radius-xs);
  border: 1px solid transparent; background: transparent; color: var(--text);
  cursor: pointer; min-height: 0;
}
.move-list .move:hover { background: var(--surface-sunken); }
.move-list .move.has-note { color: var(--accent-text); text-decoration: underline dotted; }
.move-list .move.is-key { background: var(--warning); color: var(--paper); }
.move-list .move.is-active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* Hamle değerlendirme işaretleri (!!, ?, …) */
.nag-picker { display: flex; flex-wrap: wrap; gap: .3rem; }
.nag-picker .chip {
  min-width: var(--tap-min); min-height: 34px; font-weight: 800;
  padding: .25rem .55rem; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); cursor: pointer;
}
.nag-picker .chip:hover { border-color: var(--primary); }
.nag-picker .chip.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* Öğrenci tarafında hamle düğmeleri daha büyük (dokunma hedefi) */
.kid .move-list .move { min-height: var(--tap-min); padding: .2rem .5rem; font-size: 1rem; }

/* ------------------------------------------------- sıralama tablosu (§ 038) */
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-row {
  display: flex; align-items: center; gap: .75rem;
  min-height: var(--tap-min); padding: .5rem .25rem;
  border-top: 1px solid var(--border);
}
.rank-row:first-child { border-top: none; }
.rank-row.is-me {
  background: var(--soft-bg); border: 1px solid var(--primary); border-radius: var(--radius);
  padding-left: .55rem; padding-right: .55rem;
}
.rank-no {
  flex: 0 0 2.1rem; text-align: center;
  font-weight: 800; font-size: 1rem; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.rank-row.is-top .rank-no { color: var(--accent-text); }
.rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rank-score { flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ hata sayfası */
.error-page {
  min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem;
  background: var(--ink-900); color: var(--paper); text-align: center;
}
.error-page .error-code {
  font-size: 5.5rem; font-weight: 800; line-height: 1;
  letter-spacing: -.05em; color: var(--on-ink-accent); margin: 0;
}
.error-page h1 { color: var(--paper); font-size: var(--step-3); margin: .6rem 0 .4rem; }
.error-page p { color: var(--on-ink); max-width: 46ch; margin: 0 auto 1.4rem; }
.error-page .error-code .ico { margin: 0 auto; color: var(--on-ink-accent); }
/* Andezit zeminde andezit buton kaybolur: tek çıkış butonu kırık beyaz dolgu. */
.error-page .btn { background: var(--paper); border-color: var(--paper); color: var(--ink-900); }
.error-page .btn:hover { background: var(--paper-hover); border-color: var(--paper-hover); color: var(--ink-900); }

/* Puzzle geri bildirimi — ikon sprite'tan takas edilir (puzzles/play.html). */
.feedback-icon {
  width: 44px; height: 44px; margin: 0 auto .5rem; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--text-faint); transition: color .15s;
}
.feedback-icon.is-ok   { color: var(--success); }
.feedback-icon.is-no   { color: var(--danger); }
.feedback-icon.is-hint { color: var(--warning); }
/* Açılışta ikon yerine sıra dairesi: siyahta dolu, beyazda kırık beyaz dolgu. */
.feedback-icon.is-turn { color: var(--text); stroke-width: 1.4; }
.feedback-turn {
  margin: 0 0 .15rem; font-family: var(--font-display); font-size: 1.6rem;
  font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text);
}

/* "Beyaz oynar / Siyah oynar" — tahtanın altında, iki renkte ayrı ayrı
   tanınsın diye siyahta hap da koyulaşır. */
.turn-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: var(--tap-min); padding: .3rem .9rem .3rem .55rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
}
.turn-pill .disc { width: 1.35em; height: 1.35em; }
.turn-pill[data-side="black"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.turn-pill[data-side="black"] .disc { color: var(--ink-900); stroke: var(--paper); }

/* ------------------------------------------------ öğrenci paneli (ekrana özel) */
/* Canlı ders duyurusu — kırmızı kenar ve başlık, beyaz zemin. Andezit birincil
   karoyla yarışmaz; "canlı" rengi evrensel olarak kırmızı. */
.tile-live { --tile-accent: var(--danger); }
.tile-live .tile-title { color: var(--danger); }

/* Bugün + sıralama şeridi: iri rakam + küçük versal etiket —
   iri 800 rakam, küçük versal etiket, arada hairline. */
.today-strip {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--surface); border: 1px solid var(--box-border); border-radius: var(--radius);
}
.today-cell { padding: .9rem 1rem; display: flex; flex-direction: column; min-width: 0; color: var(--text); }
.today-cell + .today-cell { border-left: 1px solid var(--border); }
.today-cell .eyebrow { display: flex; align-items: center; gap: .3rem; }
.today-num {
  font-size: 2.1rem; font-weight: 800; line-height: 1.05; letter-spacing: -.035em;
  color: var(--accent-text); font-variant-numeric: tabular-nums; margin-bottom: .15rem;
}
.today-link { text-decoration: none; }
.today-link:hover { background: var(--surface-alt); text-decoration: none; color: var(--text); }

.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Öğrenci ana sayfası tek kutu stili (§ 095): duyuru kartı, bugün şeridi,
   karolar, pratik şeridi, rozet/ödev kartı ve kısayollar aynı beyaz zemin +
   aynı ince nötr kenar. Vurgulu kartın koyu kenarı, kısayolların saydam
   zemini burada kalkar. */
.kid-dash .card, .kid-dash .card-accent { border-color: var(--box-border); }
.kid-dash .card-link:hover { border-color: var(--primary); }
.kid-dash .card .card { background: var(--surface); }
.kid-dash .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--box-border); }
.kid-dash .btn-ghost .ico { color: var(--accent-text); }
.kid-dash .btn-ghost:hover { background: var(--surface); color: var(--text); border-color: var(--primary); }
.mb-2 { margin-bottom: 1rem; }

/* Genel çip — dönem/filtre seçimi. Bölümlü kontrol gibi: aktif olan dolu. */
.chip-row { display: flex; gap: .35rem; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: .25rem .75rem; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: var(--step--1); font-weight: 600; color: var(--text); text-decoration: none;
}
.chip:hover { border-color: var(--primary); color: var(--text); text-decoration: none; }
.chip.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.kid .chip-row .chip { min-height: var(--tap-min); }

/* ============================================================================
   KOORDİNAT PRATİĞİ (§ 042) — student/coordinates.html
   Tahta gchessboard değil, 64 hücrelik düz ızgara: taş yok, yalnız kareler;
   dokunuşu doğrudan hücreden okumak web bileşeninin olaylarından basit.
   ========================================================================= */
.coord-layout {
  display: grid; gap: 1.25rem; align-items: start;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
  grid-template-areas: "play panel";
}
.coord-play { grid-area: play; min-width: 0; }
.coord-panel { grid-area: panel; min-width: 0; }
/* Telefonda ayar kartı tahtanın üstünde; tur başlayınca gizlenir. */
@media (max-width: 900px) {
  .coord-layout { grid-template-columns: 1fr; grid-template-areas: "panel" "play"; }
}

.coord-hud { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: .5rem; }
.coord-hud .eyebrow { margin-bottom: .1rem; }
.coord-ask { flex: 1; min-width: 0; }
.coord-target {
  display: block; font-size: 2.6rem; font-weight: 800; line-height: 1;
  letter-spacing: -.02em; color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.coord-count { text-align: right; }
.coord-count strong {
  display: block; font-size: 1.6rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.coord-timer { margin-bottom: .6rem; }
.coord-timer > span { transition: width .1s linear; }
.coord-timer.is-low > span { background: var(--danger); }

.coord-board {
  display: grid; grid-template-columns: repeat(8, 1fr);
  width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin: 0 auto;
  border: 2px solid var(--border-strong); border-radius: var(--radius); overflow: hidden;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Tur sırasında tahtada kaydırma/yakınlaştırma yok: her dokunuş bir cevap. */
.coord-board.is-playing { touch-action: none; cursor: pointer; }
/* 375px'te kare 44px'in altına düşmesin: tahta kenar boşluğunu da kullanır. */
@media (max-width: 480px) {
  .coord-board { width: calc(100% + 2rem); max-width: none; margin: 0 -1rem; border-radius: 0; border-left: 0; border-right: 0; }
}
.coord-sq { position: relative; transition: box-shadow .12s; }
.coord-sq.is-light { background: var(--board-light); }
.coord-sq.is-dark { background: var(--board-dark); }
.coord-sq.is-target { box-shadow: inset 0 0 0 999px var(--board-highlight), inset 0 0 0 3px var(--primary); }
.coord-sq.is-hit { box-shadow: inset 0 0 0 999px var(--board-hit); }
.coord-sq.is-miss { box-shadow: inset 0 0 0 999px var(--board-miss); }
.coord-sq.is-answer { box-shadow: inset 0 0 0 999px var(--board-hit), inset 0 0 0 3px var(--success); }
.coord-lbl {
  position: absolute; font-size: .68rem; font-weight: 800; line-height: 1;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.coord-sq.is-light .coord-lbl { color: var(--board-dark); }
.coord-sq.is-dark .coord-lbl { color: var(--board-light); }
.coord-lbl-file { right: 3px; bottom: 3px; }
.coord-lbl-rank { left: 3px; top: 3px; }
.coord-board.show-labels .coord-lbl { opacity: 1; }

.coord-options { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .75rem; }
.coord-option {
  min-height: var(--tap); font: inherit; font-size: 1.5rem; font-weight: 800;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text); cursor: pointer;
  touch-action: manipulation; transition: background .12s, border-color .12s;
}
.coord-option:hover { border-color: var(--primary); }
.coord-option.is-hit { background: var(--success); border-color: var(--success); color: var(--paper); }
.coord-option.is-miss { background: var(--danger); border-color: var(--danger); color: var(--paper); }
.coord-option.is-answer { background: var(--success); border-color: var(--success); color: var(--paper); }

.coord-result-num { margin: .1rem 0 .2rem; font-size: 1rem; color: var(--text-muted); }
.coord-result-num strong {
  font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.coord-record { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--success); }
.coord-mistakes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.coord-mistakes li {
  font-size: var(--step--1); padding: .2rem .5rem; border-radius: var(--radius);
  background: var(--surface-sunken); color: var(--text-muted);
}
.coord-mistakes li strong { color: var(--text); }

/* Kare haritası: son turlarda kare kare isabet. Renk + kalın/çizgili ad. */
.sq-map {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  max-width: 320px; aspect-ratio: 1 / 1;
}
.sq-cell {
  display: grid; place-items: center; border-radius: var(--radius-xs);
  font-size: .62rem; font-weight: 600; color: var(--text-faint);
}
.sq-cell.is-none, .sq-swatch.is-none { background: var(--surface-sunken); }
.sq-cell.is-good, .sq-swatch.is-good { background: var(--success-soft); }
.sq-cell.is-good { color: var(--success); }
.sq-cell.is-mid, .sq-swatch.is-mid { background: var(--warning-soft); }
.sq-cell.is-mid { color: var(--warning); font-weight: 700; }
.sq-cell.is-weak, .sq-swatch.is-weak { background: var(--danger-soft); }
.sq-cell.is-weak { color: var(--danger); font-weight: 800; text-decoration: underline; }
.sq-legend { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: var(--step--1); color: var(--text-muted); }
.sq-legend li { display: flex; align-items: center; gap: .35rem; }
.sq-swatch { width: 12px; height: 12px; border-radius: var(--radius-xs); display: inline-block; }
.coord-weak { list-style: none; margin: 0; padding: 0; }
.coord-weak li {
  display: flex; align-items: center; gap: .75rem; min-height: var(--tap-min);
  border-top: 1px solid var(--border);
}
.coord-weak li:first-child { border-top: 0; }
.coord-weak-sq { font-size: 1.3rem; font-weight: 800; min-width: 2.2rem; }

/* Koç/veli kartındaki rekor tablosu */
.coord-records td, .coord-records th { text-align: center; }
.coord-records th:first-child, .coord-records td:first-child { text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .coord-sq, .coord-lbl, .coord-option, .coord-timer > span { transition: none; }
}


/* ============================================================================
   BULMACA TIRMANIŞI (DECISIONS § 100)
   Süresiz, basamak basamak yükselen bulmaca serisi. Panel iki yerde:
   kendi sayfası ve canlı derste sınıf yarışı — bu yüzden ölçüler kabından
   gelir, sabit genişlik yok.
   ========================================================================= */
.rush-layout {
  display: grid; gap: 1.25rem; align-items: start;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
}
@media (max-width: 900px) { .rush-layout { grid-template-columns: 1fr; } }

.rush-board { max-width: 560px; margin-inline: auto; }
.rush.is-compact .rush-board { max-width: 460px; }

/* HUD: iri "çözülen", yanında canlar, altında basamak/puan/rekor. */
.rush-hud {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: .6rem;
}
.rush-score { display: flex; flex-direction: column; }
.rush-num {
  font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em;
  color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.rush-lives { display: flex; gap: .3rem; }
.rush-life { display: inline-flex; }
.rush-life .ico { width: 30px; height: 30px; }
/* Dolu can: ailenin renginde opak dolgu. Giden can: yalnız kontur, soluk
   değil gri — yarı saydamlık yok (kural 16). */
.rush-life.is-full .ico { fill: var(--fam-clay); stroke: var(--fam-clay); }
.rush-life.is-lost .ico { fill: none; stroke: var(--stone-300); }

.rush-meta {
  display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 0 auto;
}
.rush-meta > div { display: flex; flex-direction: column; }
.rush-meta dt {
  font-size: .66rem; font-weight: 800; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: var(--eyebrow-tracking);
}
.rush-meta dd {
  margin: 0; font-size: 1.25rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rush-note { min-height: 1.5rem; margin: .6rem 0 0; font-weight: 600; }
.rush-note.is-ok { color: var(--success); }
.rush-note.is-no { color: var(--danger); }

.rush-actions { margin-top: .75rem; }
.rush-result-num { margin: .1rem 0 .2rem; font-size: 1rem; color: var(--text-muted); }
.rush-result-num strong {
  font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.rush-record { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--success); }

.rush-rules { list-style: none; margin: .4rem 0 .6rem; padding: 0; }
.rush-rules li {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .35rem 0; border-top: 1px solid var(--border);
}
.rush-rules li:first-child { border-top: 0; }
.rush-rules .ico { margin-top: .15rem; color: var(--accent-text); }

/* Rekor/ortalama üçlüsü: profil, koç kartı ve veli panelinde aynı. */
.rush-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.rush-stat {
  display: flex; flex-direction: column; padding: .6rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.rush-stat strong {
  font-size: 1.7rem; font-weight: 800; line-height: 1.1;
  color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.rush-stat .rush-stat-date { font-size: 1rem; color: var(--text); }
@media (max-width: 520px) {
  .rush-stats { grid-template-columns: 1fr 1fr; }
  .rush-meta { margin-left: 0; }
}

/* Canlı derste yarış: koçun tablosu + öğrencinin duyuru şeridi (§ 100). */
.rush-race-note {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0; font-weight: 600;
}
.rush-board-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.rush-board-list li {
  display: flex; align-items: center; gap: .6rem; min-height: var(--tap-min);
  border-top: 1px solid var(--border);
}
.rush-board-list li:first-child { border-top: 0; }
.rush-board-rank {
  min-width: 1.8rem; font-weight: 800; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.rush-board-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rush-board-solved { font-weight: 800; font-variant-numeric: tabular-nums; }
.rush-board-list li.is-me { background: var(--soft-bg); }

/* ============================================================================
   OYUNCULAR ARASI SATRANÇ (DECISIONS § 047)
   ========================================================================= */
.play-layout {
  display: grid; gap: 1.25rem;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .play-layout { grid-template-columns: 1fr; } }
.play-board-col { width: 100%; max-width: 560px; margin: 0 auto; }

/* Oyuncu şeridi: tahtanın üstünde rakip, altında sen. Saat sağda, iri. */
.play-strip { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; }
.play-strip .avatar { width: 32px; height: 32px; flex-basis: 32px; font-size: .7rem; }
.ps-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ps-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-side {
  font-size: .66rem; font-weight: 800; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: var(--eyebrow-tracking);
}
.play-strip.is-turn .ps-side { color: var(--accent-text); }
.ps-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--text-faint); }
.ps-dot.is-online { background: var(--success); }
.ps-clock {
  min-width: 5.4ch; padding: .35rem .7rem; border-radius: var(--radius);
  font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -.01em;
  text-align: right; font-variant-numeric: tabular-nums;
  background: var(--surface-sunken); color: var(--text-muted);
}
.ps-clock.is-running { background: var(--ink-900); color: var(--text-inverse); }
.ps-clock.is-low { background: var(--danger); color: var(--text-inverse); }

/* Kare işaretleri gchessboard slotunda, taşın altında (play-room.js). */
g-chess-board > .sq-mark { display: block; width: 100%; height: 100%; pointer-events: none; }
.sq-last { background: var(--board-last-move); }
.sq-premove { background: var(--board-premove); }
.sq-check { box-shadow: inset 0 0 0 4px var(--danger); background: var(--board-check); }
.board-wrap.is-my-turn { border-color: var(--primary); }
.board-wrap.is-history { border-color: var(--warning); }

.play-moves {
  display: grid; grid-template-columns: 2.4rem 1fr 1fr; gap: 2px 0;
  max-height: 320px; overflow-y: auto; font-variant-numeric: tabular-nums;
}
.pm-num { padding: .3rem .4rem; text-align: right; font-size: .8rem; color: var(--text-faint); }
.pm-move {
  padding: .3rem .5rem; border: 0; border-radius: var(--radius-xs);
  background: none; font: inherit; font-weight: 600; color: var(--text);
  text-align: left; cursor: pointer;
}
.pm-move:hover:not(:disabled) { background: var(--soft-bg); }
.pm-move.is-current { background: var(--primary); color: var(--text-inverse); }
.pm-move.is-pending { color: var(--text-faint); font-style: italic; }
.pm-move:disabled { cursor: default; }
.pm-empty { grid-column: 1 / -1; }
.kid .pm-move { min-height: 36px; }

.play-offer { align-items: center; flex-wrap: wrap; margin-bottom: 0; }
.play-offer .btn { flex: 0 0 auto; }
.play-actions .btn { flex: 1 1 auto; }

.play-result { border-color: var(--border-strong); }
.play-result[data-outcome="win"] { border-color: var(--success); }
.play-result[data-outcome="loss"] { border-color: var(--danger); }
.play-result[data-outcome="draw"] { border-color: var(--primary); }
.play-result h2 { font-size: var(--step-3); }
.play-result[data-outcome="win"] h2 { color: var(--success); }
.play-result #rematch-box:empty { display: none; }

.play-facts { display: grid; gap: .35rem; margin: 0; }
.play-facts div { display: flex; justify-content: space-between; gap: 1rem; }
.play-facts dt { font-size: var(--step--1); color: var(--text-muted); }
.play-facts dd { margin: 0; font-weight: 600; text-align: right; }
.score-line { display: inline-flex; gap: .6rem; font-size: var(--step--1); }
.said-log { max-height: 140px; }
.phrase-row .chip { font: inherit; font-size: .85rem; cursor: pointer; }

/* Görüntülü sohbet (§ 050): P2P, iki oyuncu arası, sunucudan medya geçmez. */
.video-tiles { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink-900); aspect-ratio: 4 / 3; }
.video-tiles video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ink-900); }
#video-remote { position: relative; }
#video-local {
  position: absolute; right: .5rem; bottom: .5rem; width: 30%; max-width: 120px; height: auto;
  aspect-ratio: 4 / 3; border-radius: var(--radius-xs); border: 2px solid var(--paper); transform: scaleX(-1);
}
.play-video-call { text-align: center; }

/* Lobi ve yeni oyun formu */
.play-lobby {
  display: grid; gap: 1.25rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .play-lobby { grid-template-columns: 1fr; } }
.play-fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.play-fieldset legend { margin-bottom: .5rem; padding: 0; }
.tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .4rem; }
.tc-option, .color-pick label { position: relative; margin: 0; cursor: pointer; font-weight: inherit; }
.tc-option input, .color-pick input { position: absolute; opacity: 0; pointer-events: none; }
.tc-option span {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: var(--tap); padding: .4rem; text-align: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface);
}
.tc-option strong { font-size: var(--step-1); font-weight: 800; }
.tc-option small { font-size: .7rem; font-weight: 600; color: var(--text-muted); }
.tc-option input:checked + span,
.color-pick input:checked + span {
  border-color: var(--primary); background: var(--soft-bg);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.tc-option input:focus-visible + span,
.color-pick input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.tc-custom { display: none; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .6rem; }
.play-form:has(input[value="ozel"]:checked) .tc-custom { display: grid; }
.color-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.color-pick span {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: var(--tap-min); padding: .3rem; font-weight: 600;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface);
}
/* Renk seçimi ve "kim oynar": şah glifi yerine sade daire (i-disc-*). */
.ico.disc { width: 1.25em; height: 1.25em; stroke-width: 1.6; }

.play-row { display: flex; align-items: center; gap: .75rem; }
.play-outcome {
  display: inline-flex; flex-direction: column; align-items: center; flex: 0 0 4.6rem;
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.play-outcome .ico { width: 22px; height: 22px; }
.play-outcome.is-win { color: var(--success); }
.play-outcome.is-loss { color: var(--danger); }
.play-outcome.is-draw, .play-outcome.is-none { color: var(--text-muted); }

.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li + li { border-top: 1px solid var(--border); }
.plain-list a { padding: .55rem 0; color: inherit; }
.plain-list a:hover { color: var(--accent-text); text-decoration: none; }
.linklike {
  padding: 0; border: 0; background: none; font: inherit;
  color: var(--accent-text); text-decoration: underline; cursor: pointer;
}

.versus-card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; text-align: center; }

/* ============================================================================
   ÖĞREN MODU — taş hareketi + yıldız toplama (DECISIONS § 051)
   ========================================================================= */
.learn-hud { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: .6rem; }
.learn-hud .eyebrow { margin-bottom: .1rem; }
.learn-goal { flex: 1; min-width: 0; }
.learn-goal strong { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.25; }
.learn-count { text-align: right; }
.learn-count strong {
  display: block; font-size: 1.6rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Tahta .coord-board ızgarasını paylaşır. Satırlar da eşit bölünür: hücre
   içeriği (taş/yıldız) satırı uzatamaz, içerik mutlak konumda durur. */
.learn-board { grid-template-rows: repeat(8, 1fr); }
/* Masaüstünde tahta ekrana sığsın: alttaki gezinme çubuğunun arkasında kalmasın. */
@media (min-width: 481px) {
  .learn-board { max-width: min(560px, max(340px, 100dvh - 17rem)); }
}
.learn-sq { position: relative; min-width: 0; min-height: 0; transition: box-shadow .12s; }
.learn-sq.is-light { background: var(--board-light); }
.learn-sq.is-dark { background: var(--board-dark); }
.learn-sq.is-illegal { box-shadow: inset 0 0 0 999px var(--board-miss); }
.learn-sq.is-collected { box-shadow: inset 0 0 0 999px var(--board-hit); }

/* Taş: puzzle/oyun tahtasındaki gchessboard setinin (cburnett) aynısı. */
.learn-piece {
  position: absolute; inset: 6%; pointer-events: none;
  background: center / contain no-repeat;
}
.learn-piece.wp { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45'%3E%3Cpath d='M22.5 9c-2.21 0-4 1.79-4 4 0 .89.29 1.71.78 2.38C17.33 16.5 16 18.59 16 21c0 2.03.94 3.84 2.41 5.03-3 1.06-7.41 5.55-7.41 13.47h23c0-7.92-4.41-12.41-7.41-13.47 1.47-1.19 2.41-3 2.41-5.03 0-2.41-1.33-4.5-3.28-5.62.49-.67.78-1.49.78-2.38 0-2.21-1.79-4-4-4z' style='opacity:1;fill:%23fff;fill-opacity:1;fill-rule:nonzero;stroke:%23000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1'/%3E%3C/svg%3E"); }
.learn-piece.wn { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45'%3E%3Cg style='opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:%23000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M22 10c10.5 1 16.5 8 16 29H15c0-9 10-6.5 8-21' style='fill:%23fff;stroke:%23000' transform='translate(0 .3)'/%3E%3Cpath d='M24 18c.38 2.91-5.55 7.37-8 9-3 2-2.82 4.34-5 4-1.042-.94 1.41-3.04 0-3-1 0 .19 1.23-1 2-1 0-4.003 1-4-4 0-2 6-12 6-12s1.89-1.9 2-3.5c-.73-.994-.5-2-.5-3 1-1 3 2.5 3 2.5h2s.78-1.992 2.5-3c1 0 1 3 1 3' style='fill:%23fff;stroke:%23000' transform='translate(0 .3)'/%3E%3Cpath d='M9.5 25.5a.5.5 0 1 1-1 0 .5.5 0 1 1 1 0z' style='fill:%23000;stroke:%23000' transform='translate(0 .3)'/%3E%3Cpath d='M15 15.5a.5 1.5 0 1 1-1 0 .5 1.5 0 1 1 1 0z' transform='rotate(30 13.94 15.65)' style='fill:%23000;stroke:%23000'/%3E%3C/g%3E%3C/svg%3E"); }
.learn-piece.wb { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45'%3E%3Cg style='opacity:1;fill:none;fill-rule:evenodd;fill-opacity:1;stroke:%23000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' transform='translate(0 .6)'%3E%26gt;%3Cg style='fill:%23fff;stroke:%23000;stroke-linecap:butt'%3E%3Cpath d='M9 36c3.39-.97 10.11.43 13.5-2 3.39 2.43 10.11 1.03 13.5 2 0 0 1.65.54 3 2-.68.97-1.65.99-3 .5-3.39-.97-10.11.46-13.5-1-3.39 1.46-10.11.03-13.5 1-1.35.49-2.32.47-3-.5 1.35-1.46 3-2 3-2z'/%3E%3Cpath d='M15 32c2.5 2.5 12.5 2.5 15 0 .5-1.5 0-2 0-2 0-2.5-2.5-4-2.5-4 5.5-1.5 6-11.5-5-15.5-11 4-10.5 14-5 15.5 0 0-2.5 1.5-2.5 4 0 0-.5.5 0 2z'/%3E%3Cpath d='M25 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 1 1 5 0z'/%3E%3C/g%3E%3Cpath d='M17.5 26h10M15 30h15m-7.5-14.5v5M20 18h5' style='fill:none;stroke:%23000;stroke-linejoin:miter'/%3E%3C/g%3E%3C/svg%3E"); }
.learn-piece.wr { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45'%3E%3Cg style='opacity:1;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:%23000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M9 39h27v-3H9v3zm3-3v-4h21v4H12zm-1-22V9h4v2h5V9h5v2h5V9h4v5' style='stroke-linecap:butt' transform='translate(0 .3)'/%3E%3Cpath d='m34 14.3-3 3H14l-3-3'/%3E%3Cpath d='M31 17v12.5H14V17' style='stroke-linecap:butt;stroke-linejoin:miter' transform='translate(0 .3)'/%3E%3Cpath d='m31 29.8 1.5 2.5h-20l1.5-2.5'/%3E%3Cpath d='M11 14h23' style='fill:none;stroke:%23000;stroke-linejoin:miter' transform='translate(0 .3)'/%3E%3C/g%3E%3C/svg%3E"); }
.learn-piece.wq { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45'%3E%3Cg style='fill:%23fff;stroke:%23000;stroke-width:1.5;stroke-linejoin:round'%3E%3Cpath d='M9 26c8.5-1.5 21-1.5 27 0l2.5-12.5L31 25l-.3-14.1-5.2 13.6-3-14.5-3 14.5-5.2-13.6L14 25 6.5 13.5 9 26z'/%3E%3Cpath d='M9 26c0 2 1.5 2 2.5 4 1 1.5 1 1 .5 3.5-1.5 1-1 2.5-1 2.5-1.5 1.5 0 2.5 0 2.5 6.5 1 16.5 1 23 0 0 0 1.5-1 0-2.5 0 0 .5-1.5-1-2.5-.5-2.5-.5-2 .5-3.5 1-2 2.5-2 2.5-4-8.5-1.5-18.5-1.5-27 0z'/%3E%3Cpath d='M11.5 30c3.5-1 18.5-1 22 0M12 33.5c6-1 15-1 21 0' style='fill:none'/%3E%3Ccircle cx='6' cy='12' r='2'/%3E%3Ccircle cx='14' cy='9' r='2'/%3E%3Ccircle cx='22.5' cy='8' r='2'/%3E%3Ccircle cx='31' cy='9' r='2'/%3E%3Ccircle cx='39' cy='12' r='2'/%3E%3C/g%3E%3C/svg%3E"); }
.learn-piece.wk { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45'%3E%3Cg style='fill:none;fill-opacity:1;fill-rule:evenodd;stroke:%23000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M22.5 11.63V6M20 8h5' style='fill:none;stroke:%23000;stroke-linejoin:miter'/%3E%3Cpath d='M22.5 25s4.5-7.5 3-10.5c0 0-1-2.5-3-2.5s-3 2.5-3 2.5c-1.5 3 3 10.5 3 10.5' style='fill:%23fff;stroke:%23000;stroke-linecap:butt;stroke-linejoin:miter'/%3E%3Cpath d='M12.5 37c5.5 3.5 14.5 3.5 20 0v-7s9-4.5 6-10.5c-4-6.5-13.5-3.5-16 4V27v-3.5c-2.5-7.5-12-10.5-16-4-3 6 6 10.5 6 10.5v7' style='fill:%23fff;stroke:%23000'/%3E%3Cpath d='M12.5 30c5.5-3 14.5-3 20 0m-20 3.5c5.5-3 14.5-3 20 0m-20 3.5c5.5-3 14.5-3 20 0' style='fill:none;stroke:%23000'/%3E%3C/g%3E%3C/svg%3E"); }
/* Siyah taşlar: alınması gereken hedefler (§ 061). */
.learn-piece.bp { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45'%3E%3Cpath d='M22.5 9c-2.21 0-4 1.79-4 4 0 .89.29 1.71.78 2.38C17.33 16.5 16 18.59 16 21c0 2.03.94 3.84 2.41 5.03-3 1.06-7.41 5.55-7.41 13.47h23c0-7.92-4.41-12.41-7.41-13.47 1.47-1.19 2.41-3 2.41-5.03 0-2.41-1.33-4.5-3.28-5.62.49-.67.78-1.49.78-2.38 0-2.21-1.79-4-4-4z' style='opacity:1;fill:%23000;fill-opacity:1;fill-rule:nonzero;stroke:%23000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1'/%3E%3C/svg%3E"); }
.learn-piece.bn { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45'%3E%3Cg style='opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:%23000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M22 10c10.5 1 16.5 8 16 29H15c0-9 10-6.5 8-21' style='fill:%23000;stroke:%23000' transform='translate(0 .3)'/%3E%3Cpath d='M24 18c.38 2.91-5.55 7.37-8 9-3 2-2.82 4.34-5 4-1.042-.94 1.41-3.04 0-3-1 0 .19 1.23-1 2-1 0-4.003 1-4-4 0-2 6-12 6-12s1.89-1.9 2-3.5c-.73-.994-.5-2-.5-3 1-1 3 2.5 3 2.5h2s.78-1.992 2.5-3c1 0 1 3 1 3' style='fill:%23000;stroke:%23000' transform='translate(0 .3)'/%3E%3Cpath d='M9.5 25.5a.5.5 0 1 1-1 0 .5.5 0 1 1 1 0z' style='fill:%23fff;stroke:%23fff' transform='translate(0 .3)'/%3E%3Cpath d='M15 15.5a.5 1.5 0 1 1-1 0 .5 1.5 0 1 1 1 0z' transform='rotate(30 13.94 15.65)' style='fill:%23fff;stroke:%23fff'/%3E%3Cpath d='m24.55 10.4-.45 1.45.5.15c3.15 1 5.65 2.49 7.9 6.75S35.75 29.06 35.25 39l-.05.5h2.25l.05-.5c.5-10.06-.88-16.85-3.25-21.34-2.37-4.49-5.79-6.64-9.19-7.16l-.51-.1z' style='fill:%23fff;stroke:none' transform='translate(0 .3)' stroke='none'/%3E%3C/g%3E%3C/svg%3E"); }
.learn-piece.bb { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45'%3E%3Cg style='opacity:1;fill:none;fill-rule:evenodd;fill-opacity:1;stroke:%23000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1'%3E%3Cg style='fill:%23000;stroke:%23000;stroke-linecap:butt'%3E%3Cpath d='M9 36.6c3.39-.97 10.11.43 13.5-2 3.39 2.43 10.11 1.03 13.5 2 0 0 1.65.54 3 2-.68.97-1.65.99-3 .5-3.39-.97-10.11.46-13.5-1-3.39 1.46-10.11.03-13.5 1-1.35.49-2.32.47-3-.5 1.35-1.46 3-2 3-2z'/%3E%3Cpath d='M15 32.6c2.5 2.5 12.5 2.5 15 0 .5-1.5 0-2 0-2 0-2.5-2.5-4-2.5-4 5.5-1.5 6-11.5-5-15.5-11 4-10.5 14-5 15.5 0 0-2.5 1.5-2.5 4 0 0-.5.5 0 2z'/%3E%3Cpath d='M25 8.6a2.5 2.5 0 1 1-5 0 2.5 2.5 0 1 1 5 0z'/%3E%3C/g%3E%3Cpath d='M17.5 26h10M15 30h15m-7.5-14.5v5M20 18h5' style='fill:none;stroke:%23fff;stroke-linejoin:miter' transform='translate(0 .6)'/%3E%3C/g%3E%3C/svg%3E"); }
.learn-piece.br { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45'%3E%3Cg style='opacity:1;fill:%23000;fill-opacity:1;fill-rule:evenodd;stroke:%23000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M9 39h27v-3H9v3zm3.5-7 1.5-2.5h17l1.5 2.5h-20zm-.5 4v-4h21v4H12z' style='stroke-linecap:butt' transform='translate(0 .3)'/%3E%3Cpath d='M14 29.5v-13h17v13H14z' style='stroke-linecap:butt;stroke-linejoin:miter' transform='translate(0 .3)'/%3E%3Cpath d='M14 16.5 11 14h23l-3 2.5H14zM11 14V9h4v2h5V9h5v2h5V9h4v5H11z' style='stroke-linecap:butt' transform='translate(0 .3)'/%3E%3Cpath d='M12 35.5h21m-20-4h19m-18-2h17m-17-13h17M11 14h23' style='fill:none;stroke:%23fff;stroke-width:1;stroke-linejoin:miter' transform='translate(0 .3)'/%3E%3C/g%3E%3C/svg%3E"); }
.learn-piece.bq { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45'%3E%3Cg style='fill:%23000;stroke:%23000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round'%3E%3Cpath d='M9 26c8.5-1.5 21-1.5 27 0l2.5-12.5L31 25l-.3-14.1-5.2 13.6-3-14.5-3 14.5-5.2-13.6L14 25 6.5 13.5 9 26z' style='stroke-linecap:butt;fill:%23000'/%3E%3Cpath d='M9 26c0 2 1.5 2 2.5 4 1 1.5 1 1 .5 3.5-1.5 1-1 2.5-1 2.5-1.5 1.5 0 2.5 0 2.5 6.5 1 16.5 1 23 0 0 0 1.5-1 0-2.5 0 0 .5-1.5-1-2.5-.5-2.5-.5-2 .5-3.5 1-2 2.5-2 2.5-4-8.5-1.5-18.5-1.5-27 0z'/%3E%3Cpath d='M11.5 30c3.5-1 18.5-1 22 0M12 33.5c6-1 15-1 21 0'/%3E%3Ccircle cx='6' cy='12' r='2'/%3E%3Ccircle cx='14' cy='9' r='2'/%3E%3Ccircle cx='22.5' cy='8' r='2'/%3E%3Ccircle cx='31' cy='9' r='2'/%3E%3Ccircle cx='39' cy='12' r='2'/%3E%3Cpath d='M11 38.5a35 35 1 0 0 23 0' style='fill:none;stroke:%23000;stroke-linecap:butt'/%3E%3Cpath d='M11 29a35 35 1 0 1 23 0m-21.5 2.5h20m-21 3a35 35 1 0 0 22 0m-23 3a35 35 1 0 0 24 0' style='fill:none;stroke:%23fff'/%3E%3C/g%3E%3C/svg%3E"); }

/* Siyah şah: yalnız sınav tahtasında (§ 076); öğren modunda siyah şah yok. */
.learn-piece.bk { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45'%3E%3Cg style='fill:none;fill-opacity:1;fill-rule:evenodd;stroke:%23000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M22.5 11.63V6' style='fill:none;stroke:%23000;stroke-linejoin:miter'/%3E%3Cpath d='M22.5 25s4.5-7.5 3-10.5c0 0-1-2.5-3-2.5s-3 2.5-3 2.5c-1.5 3 3 10.5 3 10.5' style='fill:%23000;fill-opacity:1;stroke-linecap:butt;stroke-linejoin:miter'/%3E%3Cpath d='M12.5 37c5.5 3.5 14.5 3.5 20 0v-7s9-4.5 6-10.5c-4-6.5-13.5-3.5-16 4V27v-3.5c-2.5-7.5-12-10.5-16-4-3 6 6 10.5 6 10.5v7' style='fill:%23000;stroke:%23000'/%3E%3Cpath d='M20 8h5' style='fill:none;stroke:%23000;stroke-linejoin:miter'/%3E%3Cpath d='M32 29.5s8.5-4 6.03-9.65C34.15 14 25 18 22.5 24.5v2.1-2.1C20 18 10.85 14 6.97 19.85 4.5 25.5 13 29.5 13 29.5' style='fill:none;stroke:%23fff'/%3E%3Cpath d='M12.5 30c5.5-3 14.5-3 20 0m-20 3.5c5.5-3 14.5-3 20 0m-20 3.5c5.5-3 14.5-3 20 0' style='fill:none;stroke:%23fff'/%3E%3C/g%3E%3C/svg%3E"); }

/* Seçim: seçili taşın karesi, gidebileceği karelerde nokta, yenecek taşta
   halka. Noktalar sunucunun `dests`inden gelir (§ 061). */
.learn-board.is-playing .learn-sq.is-own { cursor: pointer; }
.learn-sq.is-selected { box-shadow: inset 0 0 0 999px var(--board-select); }
.learn-dot {
  position: absolute; inset: 36%; z-index: 1; border-radius: 50%; pointer-events: none;
  background: var(--board-dest);
}
.learn-capture {
  position: absolute; inset: 4%; z-index: 1; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 5px var(--board-dest);
}
.learn-sq.is-attacker { box-shadow: inset 0 0 0 999px var(--board-attacker); }
.learn-sq.is-nudge .learn-piece { animation: learn-nudge .35s ease-in-out 2; }
@keyframes learn-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12%); }
}
.learn-hint {
  min-height: 1.5rem; margin: .45rem 0 0; text-align: center;
  font-weight: 700; color: var(--text-muted);
}
.learn-hint.is-warn { color: var(--danger); }

/* Yıldız: dolu altın, koyu kenarlı; yerinde hafifçe nefes alır. */
.learn-star-icon {
  position: absolute; inset: 20%; width: 60%; height: 60%; pointer-events: none;
  fill: var(--star-fill); stroke: var(--star-edge); stroke-width: 1.4;
  animation: learn-star-breathe 2.4s ease-in-out infinite;
}
@keyframes learn-star-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .learn-sq { transition: none; }
  .learn-star-icon, .learn-sq.is-nudge .learn-piece { animation: none; }
}

/* Sonuç paneli akışta tahtanın altında kalınca kısa ekranda "Sıradaki
   seviye" düğmesi görünmüyordu, kaydırmak gerekiyordu. Artık alt menünün
   üstüne sabit oturur: seviye bitince düğme her cihazda ekranda. */
.learn-result {
  position: fixed; left: 0; right: 0; z-index: 31;
  bottom: var(--learn-dock-bottom, var(--tap));
  width: 100%; max-width: 560px; margin: 0 auto;
  max-height: calc(100dvh - var(--learn-dock-bottom, var(--tap)) - 4rem); overflow-y: auto;
  text-align: center; box-shadow: 0 -4px 0 var(--lift);
}
@media (max-width: 600px) {
  .learn-result { border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; }
}
.learn-result .btn-row .btn { flex: 1 1 auto; }
.learn-result-stars { display: flex; gap: .3rem; justify-content: center; margin: .5rem 0; }
.learn-result-stars .ico { width: 40px; height: 40px; color: var(--border-strong); stroke-width: 1.4; }
.learn-result-stars .ico.is-on { fill: var(--star-fill); stroke: var(--star-edge); }

/* Seviye haritası: 160 girdi kart olarak sığmaz, küçük numaralı jetonlar. */
.learn-piece-group + .learn-piece-group { margin-top: 1.1rem; }
.learn-piece-heading { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.learn-piece-heading .ico { width: 22px; height: 22px; color: var(--accent-text); }
.learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: .4rem; }
.learn-tile {
  display: grid; place-items: center; gap: .1rem; min-height: var(--tap-min);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  font-weight: 800; font-size: .85rem; text-decoration: none; color: var(--text); padding: .3rem 0;
}
.learn-tile:hover { border-color: var(--border-hover); text-decoration: none; color: var(--text); }
/* Kazanılan yıldız dolu ve iri, kazanılmayan yalnız soluk çerçeve: 1 ile 3
   yıldız telefonda bir bakışta ayrılsın (sonuç ekranındaki yıldızla aynı dil). */
.learn-tile .learn-tile-stars { display: flex; gap: 1px; }
.learn-tile .learn-tile-stars .ico { width: 15px; height: 15px; color: var(--border-strong); stroke-width: 1.4; }
.learn-tile .learn-tile-stars .ico.is-on { fill: var(--star-fill); stroke: var(--star-edge); }
.learn-tile.is-locked {
  pointer-events: none; background: var(--surface-alt);
  border-style: dashed; border-color: var(--border-strong); color: var(--text-faint);
}
.learn-tile.is-locked .ico { color: var(--text-faint); }
.versus-side, .versus-score { display: flex; flex-direction: column; align-items: center; gap: .4rem; }

/* ============================================================================
   SEVİYE TESPİT SINAVI (DECISIONS § 051)
   ----------------------------------------------------------------------------
   Sınav ekranı çocuk arayüzünde: tek kart, iri hedefler, dikkat dağıtan
   kenar bilgisi yok. Rapor yetişkin (koç/veli) arayüzünde: veri yoğun.
   Yarı saydam dolgu yok (§ 048), degrade yok, ikon sprite'tan.
   ========================================================================= */

/* --- sınav ekranı ------------------------------------------------------- */
.assess-hud {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: .75rem; margin-bottom: .4rem;
}
.assess-hud strong { font-size: var(--step-1); font-variant-numeric: tabular-nums; }

.assess-prompt {
  font-size: var(--step-2); font-weight: 700; line-height: 1.3;
  letter-spacing: -.01em; margin: 0 0 1rem;
}

.assess-prompt-row { display: flex; gap: .6rem; align-items: flex-start; justify-content: space-between; }
.assess-prompt-row .btn { flex-shrink: 0; min-height: var(--tap); }

/* Kare sorusu / tahtalı şık: FEN'den çizilen tahta (§ 076). Öğren modunun
   ızgarasını ve taş setini paylaşır; seçim, doğru ve yanlış kare opak tonla. */
.assess-board { margin-bottom: 1rem; }
/* Telefonda tahta kartın ve sayfanın kenar boşluğunu da kullanır: 375px'te
   kare 44px dokunma hedefinin altına düşmesin (kural 4). */
@media (max-width: 480px) {
  .card .assess-board {
    width: calc(100% + 4.5rem + 2px); margin-left: calc(-2.25rem - 1px); margin-right: 0;
  }
}
.assess-board .learn-sq.is-picked { box-shadow: inset 0 0 0 999px var(--board-select), inset 0 0 0 3px var(--primary); }
/* Seçili karede dolu işaret: koyu karede renk farkı tek başına az okunuyor. */
.assess-board .learn-sq.is-picked::after {
  content: ""; position: absolute; right: 8%; top: 8%; width: 24%; height: 24%; z-index: 2;
  border-radius: 50%; background: var(--primary); border: 2px solid var(--paper);
}
.assess-board .learn-sq.is-answer { box-shadow: inset 0 0 0 999px var(--board-hit), inset 0 0 0 3px var(--success); }
.assess-board .learn-sq.is-miss { box-shadow: inset 0 0 0 999px var(--board-miss); }
.assess-board .coord-lbl { opacity: 1; }
.assess-board .learn-sq.is-light .coord-lbl { color: var(--board-dark); }
.assess-board .learn-sq.is-dark .coord-lbl { color: var(--board-light); }
.assess-board.is-playing .learn-sq { cursor: pointer; }

/* Karar kartı görünür alana kaydırılırken alttaki sabit gezinme çubuğunun
   (öğrenci düzeni, 80px) arkasında kalmasın. */
#exam-feedback, #exam-run { scroll-margin-bottom: 96px; scroll-margin-top: 1rem; }

.assess-tips { list-style: none; margin: 0 0 1rem; padding: 0; }
.assess-tips li { display: flex; gap: .5rem; align-items: flex-start; }
.assess-tips li + li { margin-top: .45rem; }
.assess-tips .ico { flex-shrink: 0; color: var(--accent-text); margin-top: .15rem; }

.assess-options { display: grid; gap: .6rem; }
.assess-option {
  display: block; width: 100%; text-align: left;
  min-height: var(--tap); padding: .8rem 1rem;
  font: inherit; font-weight: 600; line-height: 1.35;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  cursor: pointer;
}
.assess-option:hover { border-color: var(--primary); background: var(--soft-bg); }
/* Seçilen şık: karar sunucudan gelene kadar yalnız "bunu seçtim" demektir,
   doğru/yanlış rengi taşımaz (§ 032). */
.assess-option.is-picked { border-color: var(--primary); background: var(--soft-bg); }
.assess-option[disabled] { cursor: default; color: var(--text-muted); }

.assess-verdict-line { font-size: var(--step-1); font-weight: 800; }
.assess-verdict-line.is-ok { color: var(--success); }
.assess-verdict-line.is-no { color: var(--danger); }

.assess-steps { margin: 0 0 1rem; padding-left: 1.1rem; }
.assess-steps li + li { margin-top: .5rem; }
.assess-steps span { display: block; }

.assess-history { list-style: none; margin: .3rem 0 0; padding: 0; }
.assess-history li {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; padding: .5rem 0;
}
.assess-history li + li { border-top: 1px solid var(--border); }

.assess-kid-items { list-style: none; margin: .3rem 0 0; padding: 0; }
.assess-kid-items li { display: flex; gap: .5rem; align-items: flex-start; padding: .4rem 0; }
.assess-kid-items li + li { border-top: 1px solid var(--border); }
.assess-kid-items li.is-ok .ico { color: var(--success); }
.assess-kid-items li.is-no .ico { color: var(--danger); }

/* --- rapor -------------------------------------------------------------- */
.assess-level {
  font-size: var(--step-4); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.1; margin-bottom: .6rem;
}
.assess-figures {
  display: grid; gap: 1rem; margin-top: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.assess-figures .stat-value { display: block; }
.assess-figures .stat-sub { display: block; }

.assess-start { display: flex; gap: .45rem; align-items: center; font-size: var(--step-1); }
.assess-start .ico { color: var(--accent-text); flex-shrink: 0; }

/* Beceri haritası (§ 076): durum ikon rengiyle ve rozetle, kenar şeridi yok (§ 067). */
.skill-map { list-style: none; margin: .3rem 0 0; padding: 0; }
.skill-row { display: flex; gap: .6rem; align-items: center; padding: .5rem 0; }
.skill-row + .skill-row { border-top: 1px solid var(--border); }
.skill-row .skill-icon .ico { width: 22px; height: 22px; }
.skill-row.is-tam .skill-icon { color: var(--success); }
.skill-row.is-yok .skill-icon { color: var(--danger); }
.skill-row.is-belirsiz .skill-icon { color: var(--warning); }
.skill-row.is-sorulmadi .skill-icon, .skill-row.is-sorulmadi strong { color: var(--text-muted); }
.skill-row.is-start { border: 1px solid var(--primary); border-radius: var(--radius); padding: .5rem .6rem; }
.skill-row.is-start + .skill-row { border-top: 0; }
.skill-evidence { color: var(--text-muted); white-space: nowrap; }

.assess-advice { margin: 0; padding-left: 1.1rem; }
.assess-advice li + li { margin-top: .45rem; }

.assess-items td { vertical-align: top; }

/* ------------------------------------------------------------- KVKK metni
   Girişsiz açılan hukuki metin (DECISIONS § 054): veli kabuğunun bandı,
   altında tek sütun okuma alanı. Yazdırılınca yalnız metin kalır. */
.legal { max-width: 760px; margin: 0 auto; padding: 1.8rem 1rem 4rem; line-height: 1.65; }
.legal h1 { margin: .2rem 0 .3rem; }
.legal h2 { margin: 2rem 0 .6rem; }
.legal ul, .legal ol { padding-left: 1.2rem; }
.legal li + li { margin-top: .3rem; }
.legal-kicker {
  margin: 0; color: var(--accent-text); font-weight: 700;
  font-size: var(--step--1); letter-spacing: .02em;
}
.legal-facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: 0; }
.legal-facts dt { font-weight: 700; }
.legal-facts dd { margin: 0; }
.legal-table td { vertical-align: top; }
.legal-table td:first-child { font-weight: 700; white-space: nowrap; }
.legal-table tbody tr:hover { background: none; }
.legal-rule { border: 0; border-top: 1px solid var(--border); margin: 2.8rem 0 2rem; }
.legal-links { margin-top: 1.4rem; font-size: var(--step--1); }

@media print {
  .parent-header { display: none; }
  .legal { max-width: none; padding: 0; }
}

/* ============================================================================
   TANITIM SAYFASI, BİREYSEL ÜYE, GİRİŞ EKLERİ (§ 069, § 070)
   ----------------------------------------------------------------------------
   İki renk: andezit (`--ink-900`/`--primary` ve ölçeği) ve kırık beyaz
   (`--paper`, `--surface`); vurgu pirinç (`--on-ink-accent`, `--accent-text`).
   Yeşil/mor dolgu yok. Telefon çerçevesi bir cihaz çizimi olduğu için 4px
   kuralının tek istisnası.
   ========================================================================= */

/* --- düğme varyantları: andezit zemin üstünde -------------------------- */
.btn-paper { background: var(--paper); border-color: var(--paper); color: var(--ink-900); }
.btn-paper:hover { background: var(--paper-hover); border-color: var(--paper-hover); color: var(--ink-900); }
.btn-paper:active { background: var(--paper-active); border-color: var(--paper-active); }
.btn-on-ink { background: transparent; border-color: var(--on-ink-faint); color: var(--paper); }
.btn-on-ink:hover { background: var(--ink-800); border-color: var(--paper); color: var(--paper); }

/* Google düğmesi: beyaz zemin, koyu metin; "G" marka kuralıyla kendi renginde. */
.btn-google { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-google:hover { background: var(--soft-bg); border-color: var(--primary); color: var(--text); }
.btn-google .google-g { width: 18px; height: 18px; }

/* --- iletişim düğmeleri ------------------------------------------------- */
.contact-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.contact-on-ink .btn { background: var(--paper); border-color: var(--paper); color: var(--ink-900); }
.contact-on-ink .btn:hover { background: var(--paper-hover); border-color: var(--paper-hover); color: var(--ink-900); }
.contact-on-ink .btn-ghost { background: transparent; border-color: var(--on-ink-faint); color: var(--paper); }
.contact-on-ink .btn-ghost:hover { background: var(--ink-800); border-color: var(--paper); color: var(--paper); }

/* --- giriş ekranı ekleri ------------------------------------------------ */
.auth-home { display: flex; flex-direction: column; color: var(--paper); }
.auth-home:hover { color: var(--paper); text-decoration: none; }
.auth-divider {
  display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0;
  color: var(--text-faint); font-size: var(--step--1);
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }

.consent-card {
  background: var(--surface); border: 1px solid var(--primary);
  border-radius: var(--radius); padding: 1.1rem 1.15rem;
}
.consent-card .eyebrow { display: flex; align-items: center; gap: .35rem; }
.consent-card p { font-size: var(--step--1); }

.consent-check {
  display: flex; gap: .6rem; align-items: flex-start;
  font-weight: 400; font-size: var(--step--1); line-height: 1.45;
  padding: .7rem .8rem; margin: 0 0 .5rem;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  cursor: pointer; min-height: var(--tap-min);
}
.consent-check:hover { border-color: var(--primary); }
.consent-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--primary); }

.profile-chip {
  display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem;
  padding: .7rem .85rem; background: var(--soft-bg);
  border: 1px solid var(--soft-border); border-radius: var(--radius);
}
.profile-chip > span { display: flex; flex-direction: column; min-width: 0; }
.profile-chip strong, .profile-chip .small { overflow-wrap: anywhere; }
.profile-chip .ico { color: var(--accent-text); width: 22px; height: 22px; }

.check-list { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.check-list li { display: flex; gap: .5rem; align-items: flex-start; }
.check-list li + li { margin-top: .45rem; }
.check-list .ico { color: var(--accent-text); margin-top: .2em; stroke-width: 2.2; }

/* --- bireysel üye paneli ------------------------------------------------ */
.club-invite h2 { margin-bottom: .4rem; }
.club-invite .contact-buttons { margin-top: .9rem; }
.price-line { margin: .1rem 0 .7rem; }
.price-line strong { font-family: var(--font-display); font-size: var(--step-4); font-weight: 500; color: var(--accent-text); }
.steps-list { margin: 0 0 1rem; padding-left: 1.2rem; }
.steps-list li + li { margin-top: .35rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.1rem; margin: .4rem 0 1rem; font-size: var(--step--1); }
.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.expired-card { text-align: center; }
.expired-card .expired-icon { width: 44px; height: 44px; margin: .2rem auto .7rem; color: var(--accent-text); stroke-width: 1.5; }
.expired-card .steps-list { text-align: left; max-width: 26rem; margin: 0 auto 1.1rem; }
.expired-card .contact-buttons { justify-content: center; }

/* --- tanıtım sayfası: kabuk --------------------------------------------- */
.site { background: var(--surface-alt); font-size: var(--step-1); }
/* Yapışkan başlık bölüm başlığını örtmesin. */
.site section[id], .site article[id] { scroll-margin-top: 72px; }
.site-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding-inline: 1.25rem; }

.site-header { background: var(--ink-900); color: var(--paper); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--ink-800); }
.site-header-row { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.site-brand { display: flex; align-items: center; gap: .55rem; color: var(--paper); }
.site-brand:hover { color: var(--paper); text-decoration: none; }
.site-brand .logo-mark { height: 30px; width: auto; }
.site-brand .logo-word { height: 22px; width: auto; margin-top: 3px; }
.site-nav { display: flex; gap: 1.3rem; margin-left: auto; }
.site-nav a, .site-login { color: var(--on-ink); font-size: .95rem; }
.site-nav a:hover, .site-login:hover { color: var(--paper); text-decoration: none; }
.site-header-actions { display: flex; align-items: center; gap: 1rem; }
.site-login { min-height: var(--tap-min); display: inline-flex; align-items: center; }

.site-hero { background: var(--ink-900); color: var(--paper); overflow: hidden; }
.site-hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center;
  padding-block: 4rem 3.5rem;
}
.site-kicker {
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking); color: var(--on-ink-accent); font-size: .85rem; margin-bottom: .9rem;
}
.site-hero h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.05; color: var(--paper); margin-bottom: 1.2rem; max-width: 15ch; }
.site-lead { color: var(--on-ink); font-weight: 300; font-size: 1.1rem; max-width: 52ch; }
.site-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.8rem 0 1rem; }
.site-note { color: var(--on-ink); font-size: var(--step--1); margin: 0 0 .35rem; }
.site-note a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.site-note a:hover { color: var(--on-ink-accent); }
.site-hero-phone { display: flex; justify-content: center; }

.site-section { padding-block: 4.5rem; }
.site-white { background: var(--surface); }
.site-ink { background: var(--ink-900); color: var(--paper); }
.site-ink .site-h2 { color: var(--paper); }
.site-h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.1; max-width: 22ch; margin-bottom: 1.2rem; }
.site-h3 {
  font-size: var(--step-1); margin: 2.4rem 0 1rem; color: var(--text-muted);
  display: flex; align-items: center; gap: .8rem;
}
.site-h3::after { content: ""; flex: 1; border-top: 1px solid var(--border-strong); }

.site-about { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: start; }
.site-about p { color: var(--text-muted); }
.site-about strong { color: var(--text); }

.site-figures {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 3rem 0 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface);
}
.site-figures > div { padding: 1.3rem 1.2rem; }
.site-figures > div + div { border-left: 1px solid var(--border); }
.site-figures dt { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 500; line-height: 1; color: var(--accent-text); }
.site-figures dd { margin: .4rem 0 0; color: var(--text-muted); font-size: var(--step--1); }

.site-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.site-feature {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 1.2rem 1.15rem; position: relative;
}
/* Köşedeki iki karelik tahta işareti — öğrenci karosunun imzası (§ 067). */
.site-feature::after {
  content: ""; position: absolute; top: 1rem; right: calc(1rem + 8px);
  width: 8px; height: 8px; background: var(--primary); box-shadow: 8px 8px 0 var(--primary);
}
.site-feature-icon { width: 30px; height: 30px; color: var(--accent-text); stroke-width: 1.6; margin-bottom: .9rem; }
.site-feature h4 { font-size: var(--step-1); margin-bottom: .35rem; }
.site-feature p { color: var(--text-muted); font-size: var(--step--1); margin: 0; }

.site-phones {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2.5rem;
}
.site-phone-item { display: flex; flex-direction: column; align-items: center; }
.site-phone-item p { color: var(--on-ink); font-size: var(--step--1); text-align: center; max-width: 28ch; margin: 1.1rem 0 0; }
.site-phone-item strong { color: var(--paper); }

.site-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; align-items: stretch; }
.site-plan {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
}
.site-plan h3 { font-size: var(--step-3); margin-bottom: .6rem; }
.site-price { margin: 0; display: flex; align-items: baseline; gap: .35rem; }
.site-price strong { font-family: var(--font-display); font-size: 3rem; font-weight: 500; line-height: 1; color: var(--accent-text); }
.site-price span { color: var(--text-muted); }
.site-price-note { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); font-size: .8rem; color: var(--accent-text); margin: .5rem 0 1.2rem; }
.site-plan-ink { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper); }
.site-plan-ink h3 { color: var(--paper); }
.site-plan-ink .eyebrow { color: var(--on-ink-accent); }
.site-plan-ink .check-list .ico { color: var(--on-ink-accent); }
.site-plan-club { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); font-size: .8rem; color: var(--on-ink); margin: 0 0 1.2rem; }
.site-plan-lead { color: var(--on-ink); font-size: var(--step--1); }

.site-steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.site-steps li { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 1.3rem 1.2rem; }
.site-step-no {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 1rem;
  background: var(--primary); color: var(--paper); border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 500; font-size: 1.25rem;
}
.site-steps h4 { font-size: var(--step-1); margin-bottom: .35rem; }
.site-steps p { color: var(--text-muted); font-size: var(--step--1); margin: 0; }

.site-faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; }
.site-faq details { border-top: 1px solid var(--border-strong); }
.site-faq details:last-child { border-bottom: 1px solid var(--border-strong); }
.site-faq summary {
  list-style: none; cursor: pointer; padding: 1rem 2.2rem 1rem 0; position: relative;
  font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); min-height: var(--tap-min);
}
.site-faq summary::-webkit-details-marker { display: none; }
.site-faq summary::after {
  content: "+"; position: absolute; right: .3rem; top: .8rem;
  font-size: 1.4rem; line-height: 1; color: var(--accent-text);
}
.site-faq details[open] summary::after { content: "−"; }
.site-faq details p { color: var(--text-muted); margin: 0 0 1.1rem; }

.site-footer { background: var(--ink-900); color: var(--on-ink); padding-top: 3rem; padding-bottom: 1.5rem; }
.site-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.site-footer-club { margin: .8rem 0 0; font-size: var(--step--1); max-width: 26ch; }
.site-footer-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); font-size: .8rem; color: var(--on-ink-faint); margin: 0 0 .7rem; }
.site-footer-list { list-style: none; padding: 0; margin: 0; }
.site-footer-list a { color: var(--paper); display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; font-size: var(--step--1); }
.site-footer-list a:hover { color: var(--on-ink-accent); }
.site-footer-bottom { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--ink-700); font-size: .8rem; color: var(--on-ink-faint); }

/* --- telefon çizimi ------------------------------------------------------ */
.phone {
  margin: 0; width: 270px; max-width: 100%; flex: none;
  padding: 10px; background: var(--stone-800); border-radius: 30px;
  box-shadow: 0 10px 0 var(--ink-700);
}
.site-white .phone, .site-section:not(.site-ink) .phone { box-shadow: 0 10px 0 var(--lift); }
.phone-screen {
  border-radius: 21px; overflow: hidden; background: var(--surface-alt);
  display: flex; flex-direction: column; aspect-ratio: 9 / 17;
  font-size: 11px; line-height: 1.35; color: var(--text);
}
.mock-header { background: var(--ink-900); color: var(--paper); padding: 26px 12px 10px; }
.mock-hello { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.mock-sub { display: block; color: var(--on-ink); font-size: 10px; }
.mock-body { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.mock-status {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  background: var(--surface); border: 1px solid var(--primary); border-radius: var(--radius);
  font-weight: 600; font-size: 10.5px;
}
.mock-status .ico { color: var(--accent-text); }
.mock-board {
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); aspect-ratio: 1;
  border: 2px solid var(--border-strong); border-radius: var(--radius); overflow: hidden;
}
.mock-sq { position: relative; aspect-ratio: 1; min-width: 0; background: var(--board-light); display: grid; place-items: center; }
.mock-sq.is-dark { background: var(--board-dark); }
.mock-sq.is-mark { box-shadow: inset 0 0 0 100px var(--board-highlight); }
.mock-sq img { width: 88%; height: 88%; }
.mock-sq .mock-star { width: 70%; height: 70%; fill: var(--paper); stroke: var(--primary); stroke-width: 2; }
.mock-row { display: flex; gap: 6px; align-items: center; }
.mock-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 30px; border-radius: var(--radius); background: var(--primary); color: var(--paper);
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
}
.mock-btn.is-ghost { background: var(--surface); color: var(--accent-text); border: 1px solid var(--border-strong); }
.mock-stars .ico { width: 20px; height: 20px; stroke: var(--primary); }
.mock-stars .ico.is-on { fill: var(--primary); }
.mock-count { margin-left: auto; font-family: var(--font-display); font-weight: 500; color: var(--text-muted); }
.mock-strip { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); }
.mock-strip > span { padding: 7px 9px; display: flex; flex-direction: column; }
.mock-strip > span + span { border-left: 1px solid var(--border); }
.mock-strip em, .mock-card em { font-style: normal; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: 8.5px; color: var(--text-faint); }
.mock-strip strong { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.1; color: var(--accent-text); }
.mock-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 9px; }
.mock-bars { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-top: 5px; }
.mock-bars span { flex: 1; min-height: 2px; background: var(--chart-mark); }
.mock-bars span:nth-last-child(2) { background: var(--chart-mark-active); }
.mock-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mock-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 58px;
  padding: 8px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: 0 2px 0 var(--lift);
}
.mock-tile .ico { width: 18px; height: 18px; color: var(--accent-text); }
.mock-tile b { font-family: var(--font-display); font-weight: 600; font-size: 11.5px; }
.mock-tile.is-primary { background: var(--primary); border-color: var(--primary); color: var(--paper); box-shadow: 0 2px 0 var(--lift-primary); }
.mock-tile.is-primary .ico { color: var(--paper); }
.mock-nav { display: flex; background: var(--surface); border-top: 1px solid var(--border-strong); }
.mock-nav > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 9px; font-family: var(--font-display); font-size: 8.5px; color: var(--text-muted); position: relative; }
.mock-nav .ico { width: 15px; height: 15px; }
.mock-nav .is-active { color: var(--accent-text); }
.mock-nav .is-active::before { content: ""; position: absolute; top: 0; left: 50%; margin-left: -3px; width: 6px; height: 6px; background: var(--primary); }

/* --- herkese açık seviye tespit sınavı (§ 105) ---------------------------- */
.exam-wrap { max-width: 46rem; }
.test-hero { padding-block: 3.5rem 3rem; }
.test-hero h1 { max-width: 18ch; }
.test-points { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; color: var(--on-ink); font-size: var(--step--1); }
.test-points li { display: flex; gap: .45rem; align-items: center; }
.test-points .ico { color: var(--on-ink-accent); stroke-width: 2.2; }
.test-features { grid-template-columns: repeat(3, 1fr); }
.lead-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form .field label { color: var(--paper); }
.lead-form .flash { margin-bottom: .75rem; }
.lead-form input[type=text], .lead-form input[type=tel] { width: 100%; }
.lead-form .btn { margin-top: .9rem; }
.site-plan-ink .contact-buttons { margin-bottom: .5rem; }
.site-plan-ink a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.site-plan-ink .btn { text-decoration: none; }
@media (max-width: 820px) {
  .test-features { grid-template-columns: 1fr; }
}

/* --- tanıtım sayfası: dar ekran ---------------------------------------- */
@media (max-width: 1000px) {
  .site-nav { display: none; }
  .site-header-actions { margin-left: auto; }
  .site-features { grid-template-columns: repeat(2, 1fr); }
  .site-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .site-hero-grid, .site-about, .site-plans, .site-faq-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .site-hero-grid { padding-block: 2.6rem 2.8rem; }
  .site-section { padding-block: 3.2rem; }
  .site-figures { grid-template-columns: 1fr 1fr; }
  .site-figures > div:nth-child(3) { border-left: 0; }
  .site-figures > div:nth-child(n+3) { border-top: 1px solid var(--border); }
  .site-steps { grid-template-columns: 1fr; }
  /* Telefonlar yan yana kaydırılır; sayfa gövdesi yatay kaymaz. */
  .site-phones {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.25rem;
    margin-inline: -1.25rem; padding: .5rem 1.25rem 1.5rem;
  }
  .site-phone-item { scroll-snap-align: center; flex: none; width: 250px; }
}
@media (max-width: 520px) {
  /* Marka adı telefonda da okunsun (§ 078): yazıyı gizlemek yerine küçültüp
     başlık satırını sıkıyoruz — tepede yalnız taç işareti kalınca sayfanın
     kimin olduğu görünmüyordu. */
  .site-header-row { gap: .8rem; min-height: 58px; }
  .site-brand { gap: .4rem; }
  .site-brand .logo-mark { height: 26px; }
  .site-brand .logo-word { height: 17px; margin-top: 2px; }
  .site-header-actions { gap: .7rem; }
  .site-login { font-size: .9rem; }
  .site-features { grid-template-columns: 1fr; }
  .site-cta .btn { width: 100%; }
  .site-footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .site-hero-phone .phone { width: 240px; }
}

/* ============================================================================
   OSWALD KATMANI (§ 066)
   ----------------------------------------------------------------------------
   Marka yazısı yalnız kısa metinde: başlık, bölüm etiketi, düğme, menü, çip,
   iri rakam. Cümle, soru metni, form alanı, isim Poppins'te kalır — Oswald dar
   ve uzun, çocuk için uzun metinde zor okunur. Dosyanın sonunda duruyor ki
   bileşenlerin `font: inherit`'i ve gövde için ayarlanmış eksi harf aralığı
   buradan ezilsin; ağırlıklar Oswald'ın 200–700 aralığına göre.
   ========================================================================= */

/* İri rakam ve başlık: 600, aralık hafif artı. */
.big, .stat-value, .topbar h1, .kid-header .hello, .tile .tile-title,
.today-num, .coord-target, .coord-count strong, .coord-result-num strong,
.coord-weak-sq, .coord-option, .ps-clock, .assess-level, .assess-verdict-line,
.error-page .error-code, .learn-count strong, .level-num, .rank-no,
.tc-option strong, .lesson-chip .lesson-time, .pin-input, .site-hero h1, .site-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .005em;
}
.pin-input { letter-spacing: .7em; }
.stat-value, .today-num, .coord-target, .coord-result-num strong, .assess-level { font-weight: 500; }
.error-page .error-code { font-weight: 500; }

/* Versal bölüm etiketi: 600, geniş aralık (her kural kendi aralığını tutar). */
.eyebrow, table.data th, .stat-label, .sidebar .nav-section, .week-day h4,
.ps-side, .play-outcome, .legal-kicker, .coord-lbl {
  font-family: var(--font-display);
  font-weight: 600;
}
.eyebrow, table.data th, .stat-label { font-size: .75rem; }

/* Etkileşim: düğme, çip, menü, rozet, sekme. */
.btn, .chip, .badge, .avatar, .streak, .board-tab,
.sidebar .nav-item, .kid-nav a, .practice-link {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .02em;
}
.btn { font-size: 1rem; }
.btn-sm { font-size: var(--step--1); }
.btn-lg { font-size: var(--step-2); }
.kid-nav a { font-size: .78rem; }
.sidebar .nav-item { font-size: 1rem; }
.sidebar .nav-item.active, .avatar, .streak { font-weight: 600; }

/* Ders kaydında hamle listesi (§ 086): videoyu o ana sarar. */
.replay-moments { max-height: 14rem; }
.kid .replay-moments .move { min-height: 44px; min-width: 44px; }

/* ============================================================================
   BULMACA HAVUZU (yönetim) — dilim çipleri ve kısa histogram
   ========================================================================= */
.slice-grid {
  list-style: none; margin: .5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .35rem;
}
.slice-grid li {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: .3rem .4rem; min-height: 2rem; font-size: .8rem; font-weight: 600;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius);
}
.slice-grid li.is-extra { background: var(--soft-bg); border-color: var(--soft-border); color: var(--soft-text); }
.slice-grid small { font-size: .7rem; font-weight: 500; }
.hist { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-top: .5rem; }
.hist-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .25rem; }
.hist-bar { display: block; width: 100%; max-width: 28px; background: var(--chart-mark); border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.hist-col:hover .hist-bar { background: var(--chart-mark-active); }
.hist-col small { font-size: .62rem; color: var(--text-faint); }

/* ============================================================================
   SINIF KARTI — seviye işareti + hoca fotoğrafı (§ 088)
   ========================================================================= */
.level-mark {
  flex: none; width: 46px; height: 46px; border-radius: var(--radius);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: var(--font-display); line-height: 1;
}
.level-mark b { font-size: 1.35rem; font-weight: 600; }
.level-mark.tier-0 { background: var(--surface-alt); color: var(--text-faint); border: 1px dashed var(--border-strong); }
.level-mark.tier-1 { background: var(--level-1-bg); color: var(--level-1-fg); }
.level-mark.tier-2 { background: var(--level-2-bg); color: var(--level-2-fg); }
.level-mark.tier-3 { background: var(--level-3-bg); color: var(--level-3-fg); }
.level-pips { display: flex; gap: 3px; }
.level-pips i { width: 5px; height: 5px; border-radius: 1px; border: 1px solid currentColor; }
.level-pips i.on { background: currentColor; }
.level-mark.is-small { width: 36px; height: 36px; gap: 2px; }
.level-mark.is-small b { font-size: 1.05rem; }
.level-mark.is-small .level-pips i { width: 4px; height: 4px; }

.class-card { display: flex; flex-direction: column; gap: .7rem; }
.class-card-top { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.class-card-top strong { display: block; font-size: var(--step-1); line-height: 1.25; }
.class-card-coach {
  display: flex; align-items: center; gap: .6rem;
  padding-top: .7rem; border-top: 1px solid var(--border);
}
.class-card-coach .avatar { width: 40px; height: 40px; flex-basis: 40px; }
.class-card-coach > span { min-width: 0; }

/* ============================================================================
   TAHTA GÖRÜNÜMÜ SEÇİCİ (§ 088) — components/board_prefs.html
   ========================================================================= */
.board-prefs summary {
  display: flex; align-items: center; gap: .5rem; min-height: var(--tap-min);
  cursor: pointer; font-weight: 600; list-style: none;
}
.board-prefs summary::-webkit-details-marker { display: none; }
.board-prefs summary::after { content: ""; margin-left: auto; width: .5rem; height: .5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.board-prefs[open] summary::after { transform: rotate(-135deg); }
.pref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: .4rem; margin-top: .35rem; }
.pref-opt {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  min-height: var(--tap-min); padding: .35rem .2rem; cursor: pointer;
  background: var(--surface); color: var(--text); font: inherit;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
}
.pref-opt:hover { border-color: var(--border-hover); }
.pref-opt[aria-checked="true"] { border-color: var(--primary); background: var(--soft-bg); box-shadow: inset 0 0 0 1px var(--primary); }
.pref-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pref-opt small { font-size: .7rem; font-weight: 600; }
.pref-swatch { display: grid; grid-template-columns: 1fr 1fr; width: 34px; height: 34px; border-radius: var(--radius-xs); overflow: hidden; }
.pref-swatch i:nth-child(1), .pref-swatch i:nth-child(4) { background: var(--board-light); }
.pref-swatch i:nth-child(2), .pref-swatch i:nth-child(3) { background: var(--board-dark); }
.pref-piece { position: relative; display: block; width: 34px; height: 34px; background: var(--board-dark); border-radius: var(--radius-xs); }
.pref-piece img { position: absolute; inset: 6%; width: 88%; height: 88%; }

/* ------------------------------------------------ mobil uygulama (§ 093)
   Uygulama sayfayı kenardan kenara çizer (`viewport-fit=cover`). Durum
   çubuğunun altı hep andezit bir şerit; içerik onun altından başlar.
   Android güvenli alanı Capacitor `--safe-area-inset-*` olarak yazar,
   iOS `env()` verir; tarayıcıda ikisi de 0. */
:root {
  --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}
.kid-nav { padding-bottom: var(--sab); }
.native, .native body { overscroll-behavior: none; }
.native body { padding-top: var(--sat); -webkit-tap-highlight-color: transparent; }
.native body:not(.kid) { padding-bottom: var(--sab); }
.native body.kid { padding-bottom: calc(80px + var(--sab)); }
.native body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--sat); background: var(--ink-900);
}
.native .flash-area { top: var(--sat); }
/* Uygulamada yazı seçimi ve uzun basma menüsü yalnız okunacak metinde. */
.native .kid-nav, .native .kid-header, .native .parent-header, .native .auth-brand,
.native .btn, .native .tile, .native g-chess-board, .native .icon-btn {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.native img { -webkit-touch-callout: none; }
.native .auth-wrap { min-height: calc(100vh - var(--sat) - var(--sab)); }
.native .auth-brand { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.native-only { display: none !important; }
.native .native-only { display: revert !important; }
.native .web-only { display: none !important; }

/* Apple ile giriş (§ 093): Apple'ın kuralı — siyah zemin, beyaz logo ve
   yazı, Google düğmesiyle aynı boyda. */
.btn-apple { background: var(--apple-black); border-color: var(--apple-black); color: var(--paper); }
.btn-apple:hover, .btn-apple:active { background: var(--apple-black); border-color: var(--apple-black); color: var(--paper); }
.btn-apple .apple-logo { width: 17px; height: 17px; fill: currentColor; margin-top: -2px; }
.native-login { display: grid; gap: .6rem; }
.native-login .btn.is-busy { cursor: progress; }
.native-login .btn.is-busy span { visibility: hidden; }
.native-login .btn.is-busy::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: native-spin .7s linear infinite;
}
.native-login .btn { position: relative; }
@keyframes native-spin { to { transform: rotate(360deg); } }
.danger-zone { border-color: var(--danger); }

/* Dil çubuğu (§ 101): iki parçalı TR / EN anahtarı. Seçili parça opak dolgu,
   diğeri düz kenar — yarı saydamlık yok (kural 16). `lang-switch-ink` koyu
   kabuk içindir (öğrenci başlığı, veli bandı, koç rayı). */
.lang-switch { display: inline-flex; flex: none; border: 1px solid var(--border-strong);
  border-radius: var(--radius); overflow: hidden; font-family: var(--font-display);
  font-size: var(--step--1); line-height: 1; }
.lang-switch > a, .lang-switch > span { padding: .45rem .5rem; min-width: 2.2rem;
  min-height: var(--tap-min); display: grid; place-items: center; letter-spacing: .04em; }
.lang-switch > a { color: var(--text-muted); background: var(--surface); text-decoration: none; }
.lang-switch > a:hover { color: var(--text); background: var(--surface-alt); }
.lang-switch > .lang-on { background: var(--stone-500); color: var(--text-inverse); }
.lang-switch-ink { border-color: var(--ink-600); }
.lang-switch-ink > a { color: var(--on-ink); background: var(--ink-800); }
.lang-switch-ink > a:hover { color: var(--paper); background: var(--ink-700); }
.lang-switch-ink > .lang-on { background: var(--paper); color: var(--ink-900); }
/* Öğrenci kabuğunda dokunma hedefi 44px, ama başlık bandını büyütmesin. */
.kid-header .lang-switch > a, .kid-header .lang-switch > span { min-height: 2.1rem; }
/* Koç rayı daraltılınca dil çubuğu da ortalanır. */
.sidebar-foot .lang-switch { margin: .35rem .6rem .5rem; }
.sidebar-collapsed .sidebar-foot .lang-switch { flex-direction: column; margin: .35rem auto .5rem; }
/* Giriş kartında sağ üstte. */
.auth-lang { display: flex; justify-content: flex-end; margin-bottom: .4rem; }
/* Hukuki metinlerde çeviri uyarısı (§ 101): bağlayıcı olan Türkçe metin. */
.legal-note { margin: .6rem 0 1.4rem; padding: .7rem .9rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--surface-alt); font-size: var(--step--1);
  color: var(--text-muted); }
.legal-note a { color: var(--accent-text); }

/* Nakit akışı grafiği (ofis, § 103): opak dolgu, gerçekleşen dolu / beklenen kenarlıklı. */
.subtabs { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.subtabs a { padding: .5rem .9rem; border-bottom: 2px solid transparent; color: var(--text-muted); text-decoration: none; }
.subtabs a.active { color: var(--accent-text); border-bottom-color: var(--accent-text); font-weight: 600; }
.cf-chart { width: 100%; height: auto; display: block; }
.cf-chart text { font-family: inherit; font-size: 11px; fill: var(--text-muted); }
.cf-chart .cf-grid { stroke: var(--border); stroke-width: 1; }
.cf-chart .cf-zero { stroke: var(--border-strong); stroke-width: 1.5; }
.cf-chart .cf-in { fill: var(--success); }
.cf-chart .cf-out { fill: var(--danger); }
.cf-chart .cf-in-due { fill: var(--surface); stroke: var(--success); stroke-width: 1.5; }
.cf-chart .cf-out-due { fill: var(--surface); stroke: var(--danger); stroke-width: 1.5; }
.cf-chart .cf-line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; }
.cf-chart .cf-dot { fill: var(--surface); stroke: var(--primary); stroke-width: 2; }
.cf-chart .cf-now { fill: var(--surface-alt); }
.cf-chart .cf-cur { font-weight: 700; fill: var(--text); }
.cf-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--text-muted); margin-top: .5rem; }
.cf-legend i { display: inline-block; width: .9rem; height: .9rem; margin-right: .35rem; vertical-align: -2px; border: 1.5px solid transparent; }
.cf-legend .k-in { background: var(--success); border-color: var(--success); }
.cf-legend .k-in-due { background: var(--surface); border-color: var(--success); }
.cf-legend .k-out { background: var(--danger); border-color: var(--danger); }
.cf-legend .k-out-due { background: var(--surface); border-color: var(--danger); }
.cf-legend .k-line { background: var(--primary); border-color: var(--primary); height: .2rem; vertical-align: .25rem; }

/* ------------------------------------------------------------- yoklama işareti
   Dolu renkli kare: geldi yeşil, gelmedi kırmızı, geç sarı, izinli nötr
   (§ 104). Yarı saydam dolgu yok (§ 016). */
.att-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 4px;
  color: var(--on-primary); font-weight: 700; line-height: 1;
}
.att-mark .ico { width: 1rem; height: 1rem; }
.att-present { background: var(--success); }
.att-absent  { background: var(--danger); }
.att-late    { background: var(--warning); }
.att-excused { background: var(--text-muted); }
.att-none    { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
.att-strip { display: flex; gap: .3rem; flex-wrap: wrap; }
.att-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--text-muted); }
.att-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.att-legend .att-mark { width: 1.1rem; height: 1.1rem; }
.att-legend .att-mark .ico { width: .7rem; height: .7rem; }

/* ============================================================================
   OYUN DEDEKTİFİ (§ 108) — rapor, "laboratuvar" ilerleme ekranı, bulmaca kitabı
   Renk kuralları aynı: opak dolgu, degrade yok, yarı saydam katman yok.
   Veri çubukları üçüncül mor (`--chart-mark`), sonuç şeridi durum renkleri.
   ========================================================================= */
.xr-hero {
  background: var(--ink-900); color: var(--paper);
  border-radius: var(--radius); padding: 1.25rem 1.25rem 1.1rem;
}
.xr-hero h1, .xr-hero h2 { color: var(--paper); margin: 0; }
.xr-hero .eyebrow { color: var(--on-ink-accent); }
.xr-hero-meta { color: var(--on-ink); font-size: var(--step--1); margin: .35rem 0 0; }
.xr-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-top: 1rem; }
.xr-hero-stat { background: var(--ink-800); border: 1px solid var(--ink-600); border-radius: var(--radius); padding: .7rem .8rem; }
.xr-hero-stat .stat-label { color: var(--on-ink-faint); }
.xr-hero-stat .stat-value { color: var(--paper); }
.xr-hero-stat .stat-value .unit { font-size: 1rem; color: var(--on-ink-accent); margin-left: .15rem; }
.xr-hero-stat .stat-sub { color: var(--on-ink); }

.xr-section { margin-top: 1.25rem; }
.xr-section > .card + .card, .xr-section .grid + .card { margin-top: 1rem; }
.xr-section-head { display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 .85rem; }
.xr-section-head .ico { width: 40px; height: 40px; padding: 8px; flex: none; border-radius: var(--radius); background: var(--primary); color: var(--paper); }
.xr-section-head h2 { margin: 0; }
.xr-section-head p { margin: .15rem 0 0; color: var(--text-muted); font-size: var(--step--1); }

/* Güçlü yanlar / çalışılacaklar / hedefler: dolu ikon karesi + metin. */
.xr-list { list-style: none; padding: 0; margin: 0; }
.xr-list li { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0; }
.xr-list li + li { border-top: 1px solid var(--border); }
.xr-list .xr-mark {
  width: 34px; height: 34px; padding: 7px; flex: none; border-radius: var(--radius);
  background: var(--fam-ink); color: var(--paper); box-sizing: border-box;
}
.xr-list.is-good .xr-mark { background: var(--fam-pine); }
.xr-list.is-work .xr-mark { background: var(--fam-clay); }
.xr-list.is-goal .xr-mark { background: var(--fam-gold); }

/* Yatay çubuk: etiket — çubuk — değer. */
.xr-row { display: grid; grid-template-columns: minmax(96px, 9rem) 1fr auto; gap: .6rem; align-items: center; padding: .35rem 0; }
.xr-row-label { font-size: var(--step--1); font-weight: 600; }
.xr-row-value { font-size: var(--step--1); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.xr-bar { height: 12px; border-radius: var(--radius-xs); background: var(--surface-sunken); overflow: hidden; }
.xr-bar > span { display: block; height: 100%; background: var(--chart-mark); }
.xr-bar.is-good > span { background: var(--success); }
.xr-bar.is-bad > span { background: var(--danger); }

/* Galibiyet / beraberlik / mağlubiyet şeridi: renk tek başına anlam taşımasın,
   altında sayılı açıklama var. */
.xr-wdl { display: flex; height: 14px; border-radius: var(--radius-xs); overflow: hidden; background: var(--surface-sunken); }
.xr-wdl > span { display: block; height: 100%; }
.xr-wdl .w { background: var(--success); }
.xr-wdl .d { background: var(--border-hover); }
.xr-wdl .l { background: var(--danger); }
.xr-wdl-legend { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .8rem; color: var(--text-muted); margin-top: .35rem; }
.xr-wdl-legend i { display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.xr-wdl-legend .w { background: var(--success); }
.xr-wdl-legend .d { background: var(--border-hover); }
.xr-wdl-legend .l { background: var(--danger); }

/* Statik tahta + oklar: en iyi hamle yeşil (primary), oynanan kırmızı. */
.xr-board { max-width: 340px; width: 100%; margin: 0 auto; }
.xr-board .board-wrap { max-width: 340px; }
.xr-board g-chess-board { --arrow-color-primary: var(--shape-green); --arrow-color-secondary: var(--shape-red); }
.xr-board figcaption, .xr-board .xr-board-cap { font-size: var(--step--1); color: var(--text-muted); margin-top: .45rem; }
.xr-moment { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 1.1rem; align-items: start; }
@media (max-width: 720px) { .xr-moment { grid-template-columns: 1fr; } .xr-board { margin: 0 auto; } }
.xr-line { font-family: var(--font-mono); font-size: .86rem; color: var(--text-muted); word-break: break-word; }
.xr-arrow-key { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .78rem; color: var(--text-muted); margin-top: .4rem; }
.xr-arrow-key i { display: inline-block; width: 1.1rem; height: 4px; margin-right: .3rem; vertical-align: 3px; }
.xr-arrow-key .best { background: var(--shape-green); }
.xr-arrow-key .played { background: var(--shape-red); }

/* Evreler: üç kart; en zayıf evre kırmızı, en güçlü yeşil tam kenar (§ 067). */
.xr-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; }
.xr-phase { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: .9rem 1rem; }
.xr-phase.is-weak { border-color: var(--danger); }
.xr-phase.is-strong { border-color: var(--success); }
.xr-phase h3 { margin: 0 0 .35rem; font-size: var(--step-1); }
.xr-phase .xr-phase-num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.xr-phase .xr-phase-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); }
.xr-phase.is-weak .xr-phase-tag { color: var(--danger); }
.xr-phase.is-strong .xr-phase-tag { color: var(--success); }

/* Desen satırı: ikon karesi, ad, ipucu, bulma çubuğu. */
.xr-motif { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(90px, 160px); gap: .7rem; align-items: center; padding: .6rem 0; }
.xr-motif + .xr-motif { border-top: 1px solid var(--border); }
.xr-motif > .ico { width: 40px; height: 40px; padding: 8px; border-radius: var(--radius); background: var(--fam-violet); color: var(--paper); box-sizing: border-box; }
.xr-motif strong { display: block; }
.xr-motif .xr-motif-tip { font-size: var(--step--1); color: var(--text-muted); display: block; line-height: 1.4; }
.xr-motif .xr-motif-score { text-align: right; font-size: var(--step--1); }
.xr-motif .xr-motif-score .xr-bar { margin-top: .3rem; }
@media (max-width: 560px) {
  .xr-motif { grid-template-columns: 36px 1fr; }
  .xr-motif .xr-motif-score { grid-column: 1 / -1; text-align: left; }
}
.xr-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.xr-chip {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 34px;
  padding: .25rem .7rem; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); font-size: var(--step--1); font-weight: 600;
}
.xr-chip b { font-family: var(--font-display); font-weight: 600; color: var(--accent-text); }

/* "Bu ne demek?" — veliye açıklama. Çocukta kapalı kutu, velide açık paragraf. */
.xr-explain { margin-top: .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.xr-explain > summary { cursor: pointer; padding: .6rem .8rem; font-weight: 600; font-size: var(--step--1); color: var(--accent-text); min-height: var(--tap-min); display: flex; align-items: center; gap: .4rem; }
.xr-explain > div { padding: 0 .9rem .8rem; font-size: var(--step--1); color: var(--text); }
.xr-explain-open { margin-top: .9rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); font-size: var(--step--1); }
.xr-explain-open .eyebrow { margin-bottom: .2rem; }
.xr-explain p, .xr-explain-open p { margin: 0 0 .5rem; }
.xr-explain p:last-child, .xr-explain-open p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- laboratuvar
   İlerleme ekranı: tahtada motorun o an baktığı pozisyon + en iyi hamle oku,
   sayaçlar, aşamalar, bulgular akışı. Tarama çizgisi opak pirinç bir çizgi. */
.xr-lab { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 820px) { .xr-lab { grid-template-columns: 1fr; } }
.xr-lab .board-wrap { border-color: var(--ink-900); border-width: 3px; }
/* Motorun önerdiği hamle: tahtadaki işaretler üçüncül mor (§ 077). */
.xr-lab g-chess-board { --arrow-color-primary: var(--chart-mark-active); }
.xr-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--on-ink-accent); z-index: 3; pointer-events: none; animation: xr-scan 2.4s linear infinite; }
@keyframes xr-scan { from { top: 0; } to { top: calc(100% - 3px); } }
.xr-lab.is-idle .xr-scan { display: none; }
@media (prefers-reduced-motion: reduce) { .xr-scan { animation: none; display: none; } }
.xr-lab-label { font-size: var(--step--1); color: var(--text-muted); margin-top: .5rem; text-align: center; font-variant-numeric: tabular-nums; }
.xr-counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.xr-counter { background: var(--ink-900); color: var(--paper); border-radius: var(--radius); padding: .7rem .8rem; }
.xr-counter .stat-label { color: var(--on-ink-faint); }
.xr-counter .xr-counter-num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--paper); }
.xr-counter .xr-counter-sub { font-size: .75rem; color: var(--on-ink); }
.xr-counter.is-wide { grid-column: 1 / -1; }
.xr-counter.is-wide .xr-counter-num { color: var(--on-ink-accent); font-size: 2.1rem; }
.xr-stages { list-style: none; padding: 0; margin: 0; }
.xr-stages li { display: flex; gap: .6rem; align-items: center; padding: .45rem 0; color: var(--text-faint); font-size: var(--step--1); }
.xr-stages li .ico { width: 28px; height: 28px; padding: 5px; border-radius: var(--radius); border: 1px dashed var(--border-strong); box-sizing: border-box; flex: none; }
.xr-stages li.is-done { color: var(--text); }
.xr-stages li.is-done .ico { background: var(--success); border: 1px solid var(--success); color: var(--paper); }
.xr-stages li.is-active { color: var(--text); font-weight: 700; }
.xr-stages li.is-active .ico { background: var(--primary); border: 1px solid var(--primary); color: var(--on-ink-accent); }
.xr-feed { list-style: none; padding: 0; margin: 0; max-height: 300px; overflow-y: auto; }
.xr-feed li { display: flex; gap: .55rem; align-items: flex-start; padding: .45rem 0; font-size: var(--step--1); }
.xr-feed li + li { border-top: 1px solid var(--border); }
.xr-feed li .ico { flex: none; color: var(--accent-text); margin-top: .1em; }
.xr-feed li.is-new { animation: xr-pop .35s ease-out; }
@keyframes xr-pop { from { transform: translateY(-4px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .xr-feed li.is-new { animation: none; } }

/* ------------------------------------------------------------ bulmaca kitabı */
.xr-chapter-head { display: flex; gap: .7rem; align-items: center; }
.xr-chapter-head > .ico { width: 44px; height: 44px; padding: 9px; border-radius: var(--radius); background: var(--fam-violet); color: var(--paper); box-sizing: border-box; flex: none; }
.xr-chapter-head.is-own > .ico { background: var(--fam-gold); }
.xr-pages { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.xr-page {
  width: var(--tap-min); height: var(--tap-min); display: inline-grid; place-items: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface);
  color: var(--text); font-family: var(--font-display); font-weight: 600; text-decoration: none; cursor: pointer;
}
.xr-page:hover { border-color: var(--primary); text-decoration: none; color: var(--text); }
.xr-page.is-solved { background: var(--success); border-color: var(--success); color: var(--paper); }
.xr-page.is-found { border: 2px solid var(--success); color: var(--success); }
.xr-page.is-revealed { border: 2px solid var(--warning); color: var(--warning); }
.xr-page.is-current { outline: 3px solid var(--accent-text); outline-offset: 1px; }
.xr-page .ico { width: 18px; height: 18px; }
.xr-book-legend { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .78rem; color: var(--text-muted); margin-top: .6rem; }
.xr-book-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.xr-book-legend .xr-page { width: 1.1rem; height: 1.1rem; font-size: .6rem; cursor: default; }
.xr-story { border: 2px solid var(--fam-gold); border-radius: var(--radius); background: var(--surface); padding: .8rem .9rem; }
.xr-story .eyebrow { color: var(--accent-text); }