:root {
  --krem: #FAF6EE; --krem-koyu: #F1EADB; --lacivert: #1B2A4A;
  --lacivert-60: #5A6478; --altin: #C9A227; --altin-soft: #E7D9A8;
  --nazar: #2B7DBB; --cizgi: #E4DCC9; --beyaz: #FFFFFF;
  --dogru: #2E7D5B; --yanlis: #B3384B;
  --m-root: #1B2A4A; --m-tense: #C9A227; --m-person: #2E7D74;
  --m-case: #C0603B; --m-poss: #6B4E8E; --m-neg: #B3384B; --m-q: #5A6B7A;
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", -apple-system, "Segoe UI", sans-serif;
  --radius: 14px; --radius-pill: 999px;
  --shadow-soft: 0 10px 30px rgba(27, 42, 74, 0.08);
}
.m-root, .m-tense, .m-person, .m-case, .m-poss, .m-neg, .m-q {
  text-decoration: underline dotted 1.5px; text-underline-offset: 3px;
}
.m-root { color: var(--m-root); } .m-tense { color: var(--m-tense); }
.m-person { color: var(--m-person); } .m-case { color: var(--m-case); }
.m-poss { color: var(--m-poss); } .m-neg { color: var(--m-neg); } .m-q { color: var(--m-q); }
.renksiz .m-root, .renksiz .m-tense, .renksiz .m-person,
.renksiz .m-case, .renksiz .m-poss, .renksiz .m-neg, .renksiz .m-q { color: inherit; }

/* Dark mode (gece): flip the token values, every component follows.
   State lives in JS memory only until Supabase, so it resets per page load. */
.gece {
  --krem: #10192B; --krem-koyu: #1B2740; --lacivert: #EDE7D8;
  --lacivert-60: #9BA6BC; --cizgi: #2A3A5C; --beyaz: #16233C;
  --altin: #D4AF37; --altin-soft: #8A742F;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* Ders Odası / Dil Bankası toggle (shared, morphs across pages).
   Navy capsule; the active side is a white pill with icon + label,
   the inactive side is an icon-only button. */
.ds-toggle {
  display: inline-flex; align-items: center; gap: 0.2rem;
  background: var(--lacivert); border-radius: var(--radius-pill); padding: 0.25rem;
  font-size: 0.8125rem; white-space: nowrap; view-transition-name: dstoggle;
}
.ds-toggle .seg {
  display: inline-flex; align-items: center; gap: 0.45rem; line-height: 1;
  border-radius: var(--radius-pill); padding: 0.4rem 0.7rem;
  color: var(--krem); text-decoration: none;
}
.ds-toggle .seg.on {
  background: var(--beyaz); color: var(--lacivert); font-weight: 700; padding: 0.4rem 1rem;
}
.ds-toggle a.seg:hover { background: rgba(255, 255, 255, 0.16); }
.gece .ds-toggle a.seg:hover { background: rgba(0, 0, 0, 0.18); }

/* Site footer: legend + quick links (shared) · same voice as the in-page notes */
.site-foot { border-top: 1px solid var(--cizgi); margin-top: 3rem; padding: 1.1rem clamp(1rem, 3vw, 2.5rem) 1.6rem; text-align: center; }
.site-foot .legend { font-size: 0.75rem; color: var(--lacivert-60); line-height: 1.8; }
.site-foot .legend b { color: var(--lacivert-60); }
.site-foot .quick { font-size: 0.75rem; color: var(--lacivert-60); margin-top: 0.4rem; }
.site-foot .quick a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--altin); }

/* Page transitions (View Transitions API — no-op where unsupported).
   The wordmark carries its own name so it stays anchored while the page fades. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.22s ease both; }
::view-transition-new(root) { animation: vt-in 0.3s ease both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}