/* app.css — single global bundle (tokens + base + scroll-reveal + components).
   Generated by concatenation; this is now the source of truth. Edit here. */

/* ===================== css\tokens.css ===================== */


:root {
  --c-primary: #29a3dd;
  --c-primary-dark: #1c82b8;
  --c-primary-light: #5cbce8;
  --c-secondary: #006398;

  --c-surface: oklch(95.5% 0.013 233);
  --c-on-surface: #182025;
  --c-on-surface-variant: oklch(42% 0.022 240);
  --c-surface-lowest: oklch(97.5% 0.009 233);
  --c-surface-low: oklch(93% 0.016 233);
  --c-surface-container: oklch(91% 0.018 233);
  --c-surface-high: oklch(89% 0.02 233);
  --c-surface-highest: oklch(87% 0.022 233);
  --c-outline: oklch(54% 0.022 236);
  --c-outline-variant: oklch(83% 0.024 236);
  --c-primary-container: #5cbce8;
  --c-on-primary-container: #06384e;
  --c-primary-fixed: #cfeaf8;
  --c-primary-fixed-dim: #7fc6ea;
  --c-secondary-container: #cde5ff;
  --c-on-secondary-container: #004b75;
  --c-error: oklch(57% 0.19 27);
}
:root[data-theme="dark"] {
  --c-primary: #29a3dd;
  --c-primary-dark: #1c82b8;
  --c-primary-light: #5cbce8;
  --c-secondary: #006398;

  --c-surface:           oklch(12% 0.010 250);
  --c-on-surface:        oklch(91% 0.012 235);
  --c-on-surface-variant: oklch(72% 0.022 240);
  --c-surface-lowest:    oklch(8%  0.006 250);
  --c-surface-low:       oklch(15% 0.012 250);
  --c-surface-container: oklch(19% 0.014 250);
  --c-surface-high:      oklch(24% 0.016 250);
  --c-surface-highest:   oklch(29% 0.018 250);
  --c-outline:           oklch(50% 0.040 245);
  --c-outline-variant:   oklch(33% 0.025 248);
  --c-primary-container: #06384e;
  --c-on-primary-container: #cfeaf8;
  --c-primary-fixed: #06384e;
  --c-primary-fixed-dim: #7fc6ea;
  --c-secondary-container: #004b75;
  --c-on-secondary-container: #cde5ff;
  --c-error: oklch(70% 0.17 27);
}

/* Fallback palette for browsers / in-app WebViews WITHOUT oklch() support.
   Without this, every surface/text token is invalid-at-use and collapses to
   defaults — making light and dark look identical (notably on older mobile
   browsers). These hex values are exact conversions of the oklch tokens, so
   browsers that DO support oklch ignore this block and render unchanged. */
@supports not (color: oklch(0% 0 0)) {
  :root {
    --c-surface: #e8f2f8;
    --c-on-surface-variant: #434f58;
    --c-surface-lowest: #f1f8fc;
    --c-surface-low: #deeaf1;
    --c-surface-container: #d6e4eb;
    --c-surface-high: #cedde6;
    --c-surface-highest: #c7d7e1;
    --c-outline: #63717a;
    --c-outline-variant: #b9cad5;
    --c-error: #d03833;
  }
  :root[data-theme="dark"] {
    --c-surface: #040609;
    --c-on-surface: #dae3e8;
    --c-on-surface-variant: #99a7b1;
    --c-surface-lowest: #010203;
    --c-surface-low: #080c10;
    --c-surface-container: #0f141a;
    --c-surface-high: #1a2027;
    --c-surface-highest: #252c34;
    --c-outline: #506679;
    --c-outline-variant: #2b3742;
    --c-error: #f66d62;
  }
}

/* ===================== css\base.css ===================== */


:root, body { color-scheme: light; }
:root[data-theme="dark"], :root[data-theme="dark"] body { color-scheme: dark; }

html {
  min-block-size: 100%;
  background: var(--c-surface);
}
body {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 0%,
      oklch(from var(--c-primary) l c h / 0.05),
      transparent 60%
    ),
    linear-gradient(
      180deg in oklch,
      oklch(95.5% 0.014 233) 0%,
      oklch(97% 0.011 233) 60%,
      oklch(95% 0.015 233) 100%
    );
  background-attachment: fixed;
  color: var(--c-on-surface);
  transition: background-color .25s ease, color .25s ease;
}
body > main {
  flex: 1 0 auto;
}
body > footer {
  flex-shrink: 0;
}
:root[data-theme="dark"] body {

  background:
    radial-gradient(
      ellipse 80% 60% at 50% 0%,
      oklch(from var(--c-primary) l c h / 0.06),
      transparent 60%
    ),
    linear-gradient(
      180deg in oklch,
      oklch(12% 0.010 250) 0%,
      oklch(9% 0.007 250) 60%,
      oklch(12% 0.012 250) 100%
    );
  background-attachment: fixed;
}

body .bg-white { background-color: var(--c-surface-lowest); }
body .hover\:bg-surface-container-low:hover { background-color: var(--c-surface-low); }

.theme-toggle {
  position: fixed;
  bottom: 88px;
  right: 1.5rem;
  z-index: 60;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-surface-lowest);
  border: 1px solid var(--c-surface-container);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--c-primary);
  transition: transform .25s ease, background .2s, color .2s, border-color .2s;
}
.theme-toggle:hover { transform: translateY(-2px) rotate(15deg); background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
/* Theme-toggle sun/moon cross-fade — /css icon-swap technique, driven by
   data-theme instead of data-state. Stacks both icons and cross-fades with
   blur + scale + a quarter-turn so the swap feels alive. */
:root {
  --icon-swap-dur: 200ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  grid-area: 1 / 1; /* stack both in the same cell */
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
/* Light: moon shown (click → dark); sun parked, blurred + shrunk + rotated. */
.theme-toggle .icon-moon { opacity: 1; filter: blur(0); transform: none; }
.theme-toggle .icon-sun  { opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(var(--icon-swap-start-scale)) rotate(-90deg); }
/* Dark: sun shown (click → light); moon parked. */
:root[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 1; filter: blur(0); transform: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(var(--icon-swap-start-scale)) rotate(90deg); }

/* In-bar variant — theme toggle relocated into the top-bar action cluster
   (e.g. deneme.html, where the fixed bottom-right toggle overlapped the
   question map). Drops the fixed positioning and matches the header's round
   icon buttons. Keeps the .theme-toggle class so the sun/moon swap still works. */
.theme-toggle--bar {
  position: static;
  inset: auto;
  inline-size: 40px;
  block-size: 40px;
  box-shadow: none;
  border: 0;
  background: oklch(from var(--c-primary) l c h / 0.1);
  flex-shrink: 0;
}
.theme-toggle--bar:hover { transform: none; background: var(--c-primary); color: #fff; }

/* Mobile menu drawer — /css panel-reveal technique: backdrop fades in, the
   panel slides in from the left. mobile-menu.js toggles .is-open and only
   adds .hidden after the close finishes. */
:root {
  --panel-open-dur: 320ms;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
#mobile-menu {
  opacity: 0;
  transition: opacity var(--panel-open-dur) var(--panel-ease);
}
#mobile-menu.is-open { opacity: 1; }
#mobile-menu > div {
  transform: translateX(-100%);
  transition: transform var(--panel-open-dur) var(--panel-ease);
  will-change: transform;
  /* Panels ship with an inline `bg-white` utility, which left the drawer white
     (and its on-surface links unreadable) in dark mode. The #id selector
     outranks the .bg-white class, so this themes the drawer in both modes. */
  background: var(--c-surface);
  border-inline-end: 1px solid var(--c-outline-variant);
}
#mobile-menu.is-open > div { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  #mobile-menu, #mobile-menu > div { transition: none !important; }
}

/* Number pop-in — /css verbatim. Each digit re-enters with a blurred slide
   when a figure updates (wired on the package price in packages.js). */
:root {
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
}
@keyframes t-digit-pop-in {
  0%   {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}
.t-digit-group {
  display: inline-flex;
  align-items: baseline;
}
.t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}
@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit { animation: none !important; }
}

/* Form validation feedback — /css error-shake keyframe applied site-wide via
   :user-invalid (fires only AFTER the user has interacted with a field), plus
   a brand error border. No JS; dormant on fields without validation rules. */
:root {
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes t-input-shake {
  0%      { transform: translateX(0);                                animation-timing-function: var(--shake-ease); }
  28.57%  { transform: translateX(var(--shake-distance));            animation-timing-function: var(--shake-ease); }
  57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57%  { transform: translateX(var(--shake-overshoot));           animation-timing-function: var(--shake-ease); }
  100%    { transform: translateX(0); }
}
input:user-invalid,
textarea:user-invalid,
select:user-invalid {
  border-color: var(--c-error);
  animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
}
input:user-invalid:focus,
textarea:user-invalid:focus,
select:user-invalid:focus {
  outline-color: var(--c-error);
}
label:has(+ input:user-invalid),
label:has(+ textarea:user-invalid) { color: var(--c-error); }

@media (prefers-reduced-motion: reduce) {
  input:user-invalid, textarea:user-invalid, select:user-invalid { animation: none !important; }
}

/* Page-entrance reveal — <main> content gently fades + rises on load. Hook
   class `page-enter` is on every page's <main>. `backwards` fill (not forwards)
   so NO transform lingers afterwards — keeps position:fixed children intact.
   Non-layout, reduced-motion-safe. */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter {
  animation: page-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@media (prefers-reduced-motion: reduce) {
  .page-enter { animation: none !important; }
}

/* Filter / tab content reveal — when cards or panels become visible after a
   filter change or tab switch they stagger-fade up (Disney follow-through).
   Wired by browse.js / lil-tabs.js / exams-filter.js / tabset.js via the
   .t-revealing class + a per-item --reveal-delay. `to: transform none` so
   nothing lingers. */
@keyframes t-reveal {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.t-revealing {
  animation: t-reveal 0.4s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms) both;
}
@media (prefers-reduced-motion: reduce) {
  .t-revealing { animation: none !important; }
}

/* Header notification dot — pops in on load (/css notification-badge feel). */
@keyframes notif-dot-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.notif-dot {
  transform-origin: center;
  animation: notif-dot-pop 0.5s cubic-bezier(0.34, 1.36, 0.64, 1) 0.35s backwards;
}
@media (prefers-reduced-motion: reduce) {
  .notif-dot { animation: none !important; }
}

/* ===== notifications dropdown (header bell) ===== */
.notif { position: relative; }
.notif-menu {
  position: absolute;
  inset-block-start: calc(100% + 0.55rem);
  inset-inline-end: 0;
  inline-size: min(21rem, calc(100vw - 1.5rem));
  background: var(--c-surface-lowest);
  border: 1px solid var(--c-outline-variant);
  border-radius: 1rem;
  box-shadow: 0 12px 40px -12px oklch(from var(--c-primary) l c h / 0.35), 0 4px 12px -6px oklch(0% 0 0 / 0.15);
  overflow: hidden;
  z-index: 80;
  transform-origin: top right;
  animation: notif-pop 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.notif-menu[hidden] { display: none; }
@keyframes notif-pop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
.notif-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1rem;
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 0.95rem;
  color: var(--c-on-surface);
  border-block-end: 1px solid var(--c-outline-variant);
}
.notif-menu__badge {
  font-size: 0.68rem; font-weight: 700;
  color: var(--c-primary); background: var(--brand-soft);
  padding: 0.12rem 0.5rem; border-radius: 999px;
}
.notif-item {
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.7rem 1rem;
  border-block-end: 1px solid var(--c-outline-variant);
  transition: background 0.15s ease;
}
.notif-item:hover { background: var(--brand-soft); }
.notif-item.is-unread { background: oklch(from var(--c-primary) l c h / 0.06); }
.notif-item__ic {
  inline-size: 2.1rem; block-size: 2.1rem; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 0.6rem;
  background: var(--brand-soft); color: var(--brand-ink);
}
.notif-item__ic .material-symbols-outlined { font-size: 1.2rem; }
.notif-item__bd { display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; }
.notif-item__tx { font-size: 0.82rem; line-height: 1.4; color: var(--c-on-surface); }
.notif-item__tm { font-size: 0.68rem; color: var(--c-on-surface-variant); font-family: 'JetBrains Mono', monospace; }
.notif-menu__all {
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 0.8rem;
  font-weight: 700; font-size: 0.85rem;
  color: var(--c-primary);
  transition: background 0.15s ease;
}
.notif-menu__all:hover { background: var(--brand-soft); }

body { font-family: 'Inter', sans-serif; }
.headline { font-family: 'Manrope', sans-serif; }
.label-mono { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }

/* LinkedIn-style page eyebrow — small uppercase mono label above a heading.
   Site-wide primitive (base.css is on every page); pair above any <h1>/<h2>. */
.lil-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin: 0 0 0.5rem;
}
:root[data-theme="dark"] .lil-eyebrow { color: var(--c-primary-light); }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1; }

.custom-scrollbar::-webkit-scrollbar { height: 8px; width: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #dcc2ae; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #ff920a; }

.slide-fade { transition: opacity 0.6s ease; }

/* Accessibility: visible keyboard focus on every interactive element + smooth
   in-page anchor scrolling (disabled under reduced-motion). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
html { scroll-behavior: smooth; }

/* ───────────────────────────────────────────────────────────────
   QOL polish layer — soft site-wide UX touches. Feel only, no layout
   changes. Loaded on every page via base.css.
   ─────────────────────────────────────────────────────────────── */

/* Crisp font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Brand-tinted text selection */
::selection { background: oklch(from var(--c-primary) l c h / 0.22); }

/* Form controls (checkbox, radio, range) inherit the brand accent */
:root { accent-color: var(--c-primary); }

/* Branded scrollbars site-wide (default; .custom-scrollbar keeps its own) */
* { scrollbar-color: var(--c-outline-variant) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--c-outline-variant);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-primary); background-clip: content-box; }

/* Pointer affordances + tidy touch feedback */
button:not(:disabled), [role="button"]:not(:disabled), summary, label[for], select { cursor: pointer; }
:disabled { cursor: not-allowed; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Soft colour feedback on plain text links (0-specificity: never overrides components) */
a:where(:not([class])) { transition: color .18s ease; }

/* Keep anchor targets clear of the sticky header when jumping in-page */
:target { scroll-margin-top: 5.5rem; }

/* Baseline smooth interaction timing — 0-specificity (:where) + base loads
   before component CSS, so any component transition always wins over this. */
:where(a, button, input, select, textarea, summary, [role="button"]) {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .2s ease;
}

/* Softer placeholders */
:where(input, textarea)::placeholder { color: var(--c-on-surface-variant); opacity: .6; }

/* Dark mode: the Tailwind forms plugin defaults <input> backgrounds to #fff via
   [type='…'] attribute selectors, which beats token utility classes and reads as a
   white box in dark mode (textareas/selects use lower-specificity element selectors,
   so they already flip). Re-assert dark surfaces for text-like inputs. :where() keeps
   the type list at 0 specificity so a component's own .class rule (e.g. .ai-chat-input)
   can still override when needed. */
:root[data-theme="dark"] input:where([type="text"],[type="email"],[type="password"],[type="search"],[type="tel"],[type="url"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="time"],[type="week"]),
:root[data-theme="dark"] input:not([type]) {
  background-color: var(--c-surface-container);
  border-color: var(--c-outline-variant);
  color: var(--c-on-surface);
}
:root[data-theme="dark"] input:where([type="text"],[type="email"],[type="password"],[type="search"],[type="tel"],[type="url"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="time"],[type="week"])::placeholder {
  color: var(--c-on-surface-variant);
}

/* Gentle tactile press — applies only where a component defines no :active of its own */
:where(button, [role="button"], .exam-btn, .plan-cta):active:not(:disabled) { transform: translateY(1px); }

/* Nicer underline spacing wherever links are underlined */
a { text-underline-offset: 0.15em; }

/* Lining numerals so dynamic figures (prices, stats) don't jitter in width */
.label-mono, .plan-price, .plan-period, .stat-num, [class*="price"] { font-variant-numeric: tabular-nums; }

/* Typographic niceties — balanced headings, no orphan last lines in body copy.
   0-specificity so any component/Tailwind wrap setting wins. */
:where(h1, h2, h3, .headline) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }

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

/* Print: drop the chrome, ink-friendly black-on-white, links readable.
   Helps the legal/policy pages (KVKK, sözleşmeler) and exam results print clean. */
@media print {
  .site-header,
  footer,
  #mobile-menu,
  #theme-toggle,
  a[aria-label="WhatsApp"],
  .exam-topbar,
  .exam-side,
  .profile-sidebar { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }
  .page-enter { animation: none !important; }
  main, .container, .profile-shell, .profile-content { max-inline-size: none !important; }
  *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
  a { color: #000 !important; text-decoration: underline; }
  /* Avoid awkward breaks inside cards/headings */
  .profile-card, article, figure, table { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}


/* ===================== css\components\scroll-reveal.css ===================== */
/* scroll-reveal.css — Disney-12-principles scroll motion (index_3).
   Scroll-DRIVEN via animation-timeline: view()/scroll() — no JS, no scroll
   hijack, interpolates smoothly at every scroll position (Solid Drawing),
   runs on the compositor (60fps). Fully guarded by @supports +
   prefers-reduced-motion (instant reveals, no parallax). */

/* Pose-to-pose: one clear "hidden" pose, one "revealed" pose. */
@keyframes sr-rise {
  from { opacity: 0; transform: translateY(30px); }   /* hidden */
  to   { opacity: 1; transform: none; }                /* revealed */
}
@keyframes sr-rise-sm {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
/* Arcs / Secondary action: gentle drift against the scroll for a parallax accent. */
@keyframes sr-parallax {
  from { transform: translateY(-14px); }
  to   { transform: translateY(20px); }
}

@media (prefers-reduced-motion: no-preference) {

  /* HERO (above the fold) — Staging + Anticipation + Follow-through.
     A staged load-in in reading order; Slow-Out easing (ease-out) so each
     line settles. `backwards` fill leaves no lingering transform. */
  .hv3-hero .hv3-eyebrow,
  .hv3-hero .hv3-title,
  .hv3-hero .hv3-sub,
  .hv3-hero .hv3-cta,
  .hv3-hero .hv3-stats {
    animation: sr-rise-sm 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  .hv3-hero .hv3-title { animation-delay: 0.08s; }
  .hv3-hero .hv3-sub   { animation-delay: 0.16s; }
  .hv3-hero .hv3-cta   { animation-delay: 0.24s; }
  .hv3-hero .hv3-stats { animation-delay: 0.32s; }

  @supports (animation-timeline: view()) {

    /* BELOW-FOLD SECTIONS — Staging: each content row reveals in reading
       order (top→bottom) as it enters. Anticipation: starts at ~entry 2%
       (slightly visible) and completes by ~cover 24% (before full view, so
       scroll can continue). Straight-ahead→pose-to-pose: scroll position
       interpolates hidden→revealed. */
    .sr-section > .container > * {
      animation: sr-rise linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 24%;
    }

    /* Structure-agnostic fallback: a section with no direct .container reveals
       as one block (coarser staging, still smooth). :has() keeps it safe on
       any page's markup. Tall above-the-fold sections resolve to 100% at load,
       so content is never hidden. */
    .sr-section:not(:has(> .container)) {
      animation: sr-rise linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 22%;
    }

    /* CARD GROUPS — Follow-through & Overlapping: each item triggers a beat
       later than the last (staggered ranges) so a row "combs" in. */
    .sr-stagger > * {
      animation: sr-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
    .sr-stagger > *:nth-child(2)   { animation-range: entry 4%  cover 26%; }
    .sr-stagger > *:nth-child(3)   { animation-range: entry 8%  cover 30%; }
    .sr-stagger > *:nth-child(4)   { animation-range: entry 12% cover 34%; }
    .sr-stagger > *:nth-child(n+5) { animation-range: entry 16% cover 38%; }

    /* PARALLAX — Arcs: a decorative element drifts against the scroll.
       Real-time, fractional ratio, linked 1:1 to the root scroll. */
    .sr-parallax {
      animation: sr-parallax linear both;
      animation-timeline: scroll(root);
      will-change: transform;
    }
  }
}

/* Appeal / accessibility: reward exploration, never obstruct. Users who ask
   for reduced motion get instant content, no parallax — nothing above is in
   the no-preference block, so this needs no override. */

/* ===================== css\components\site-header.css ===================== */


.site-header {
  position: sticky;
  top: 0;
  z-index: 50;

  border-block-end: 1px solid oklch(from var(--c-primary) l c h / 0.12);
  box-shadow: 0 1px 0 0 oklch(from var(--c-primary) l c h / 0.04),
              0 4px 20px -10px oklch(from var(--c-primary) l c h / 0.08);
  transition: border-color 0.25s ease;
}
/* Glass tint + blur live on a ::before layer, NOT on .site-header itself.
   backdrop-filter on the header made it the containing block for its
   position:fixed #mobile-menu drawer, trapping the drawer at header height
   (~64px) on phones so the menu links spilled below with no background.
   Keeping the blur on ::before preserves the glass while letting the fixed
   drawer size to the viewport. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: oklch(97% 0.012 233 / 0.88);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  pointer-events: none;
}
:root[data-theme="dark"] .site-header::before {
  background: oklch(19% 0.013 250 / 0.85);
}
:root[data-theme="dark"] .site-header {
  border-block-end: 1px solid oklch(from var(--c-primary) l c h / 0.18);
  box-shadow: 0 1px 0 0 oklch(0% 0 0 / 0.2),
              0 4px 20px -10px oklch(0% 0 0 / 0.4);
}

/* Scroll-driven elevation — shadow deepens over the first 120px of scroll so
   the header detaches cleanly from content. Shadow-only (no layout shift);
   keeps the static base shadow at the top via the implicit `from`. */
@supports (animation-timeline: scroll()) {
  @keyframes site-header-elevate {
    to { box-shadow: 0 1px 0 0 oklch(from var(--c-primary) l c h / 0.06),
                     0 10px 30px -12px oklch(from var(--c-primary) l c h / 0.22); }
  }
  @keyframes site-header-elevate-dark {
    to { box-shadow: 0 1px 0 0 oklch(0% 0 0 / 0.3),
                     0 12px 32px -12px oklch(0% 0 0 / 0.55); }
  }
  .site-header {
    animation: site-header-elevate linear both;
    animation-timeline: scroll(root);
    animation-range: 0 120px;
  }
  :root[data-theme="dark"] .site-header { animation-name: site-header-elevate-dark; }
}


/* ===================== css\components\hero.css ===================== */


@property --hero-hue {
  syntax: '<number>';
  inherits: false;
  initial-value: 50;
}

.hero-modern {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse 80% 50% at 50% 0%,
      oklch(from white l c h / 0.22),
      transparent 65%
    ),
    linear-gradient(
      180deg in oklch,
      var(--c-primary) 0%,
      var(--c-primary-dark) 100%
    );
  color: white;
  padding-inline: clamp(1.25rem, 2vw, 2rem);
  padding-block: clamp(5rem, 12vw + 2rem, 14rem);
  container: hero / inline-size;
}

:root[data-theme="dark"] .hero-modern {

  background:
    radial-gradient(
      ellipse 80% 50% at 50% 0%,
      oklch(from var(--c-primary) calc(l * 0.5) c h / 0.55),
      transparent 60%
    ),
    oklch(12% 0.015 var(--hero-hue));
}

.hero-deco {
  position: absolute;
  inset-inline: 0;
  z-index: -10;
  pointer-events: none;
  transform: translateZ(0);
  overflow: hidden;
  filter: blur(72px);
}
.hero-deco--top    { top: -10rem; }
.hero-deco--bottom { top: calc(100% - 13rem); }
@media (min-width: 640px) {
  .hero-deco--top    { top: -20rem; }
  .hero-deco--bottom { top: calc(100% - 30rem); }
}

.hero-poly {
  position: relative;
  aspect-ratio: 1155 / 678;
  width: 36.125rem;
  margin-inline: auto;

  opacity: 0.5;
  background: linear-gradient(
    to top right in oklch,
    var(--c-primary-fixed),
    oklch(from white l c h / 0.95)
  );
  clip-path: polygon(
    74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%,
    80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%,
    47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%,
    17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%
  );
}
:root[data-theme="dark"] .hero-poly {

  opacity: 0.42;
  background: linear-gradient(
    to top right in oklch,
    var(--c-primary-light),
    var(--c-primary-fixed-dim, var(--c-primary))
  );
}
.hero-deco--top .hero-poly {
  left: calc(50% - 11rem);
  translate: -50%;
  rotate: 30deg;
}
.hero-deco--bottom .hero-poly {
  left: calc(50% + 3rem);
  translate: -50%;
}
@media (min-width: 640px) {
  .hero-poly { width: 72.1875rem; }
  .hero-deco--top    .hero-poly { left: calc(50% - 30rem); }
  .hero-deco--bottom .hero-poly { left: calc(50% + 36rem); }
}

.hero-inner {
  max-inline-size: 48rem;
  margin-inline: auto;
  text-align: center;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  padding: 0.3rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: oklch(from white l c h / 0.88);
  background: oklch(from white l c h / 0.06);
  border: 1px solid oklch(from white l c h / 0.14);
  backdrop-filter: blur(8px);
  transition: border-color 0.25s, background 0.25s;
}
.hero-pill:hover { border-color: oklch(from white l c h / 0.28); background: oklch(from white l c h / 0.1); }
.hero-pill-link {
  font-weight: 700;
  color: var(--c-primary-fixed);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.hero-pill-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.hero-title {
  margin-block-start: 2rem;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 1.5rem + 4vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: white;
  text-wrap: balance;
  max-inline-size: 22ch;
  margin-inline: auto;
}

.hero-title-accent {
  background: linear-gradient(
    90deg in oklch,
    var(--c-primary-fixed),
    var(--c-primary-light)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  margin-block-start: 2rem;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  font-weight: 500;
  color: oklch(from white l c h / 0.78);
  text-wrap: pretty;
  max-inline-size: 52ch;
  margin-inline: auto;
}

.hero-cta-row {
  margin-block-start: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: 0.875rem;
  background: var(--c-primary);
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 14px 30px -12px oklch(from var(--c-primary) l c h / 0.6);
  transition: background 0.2s, transform 0.2s, box-shadow 0.25s;
}
.hero-cta-primary:hover {
  background: var(--c-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px oklch(from var(--c-primary) l c h / 0.7);
}
.hero-cta-primary:focus-visible {
  outline: 2px solid var(--c-primary-fixed);
  outline-offset: 3px;
}

.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s, gap 0.2s;
}
.hero-cta-secondary:hover {
  color: var(--c-primary-fixed);
  border-color: oklch(from var(--c-primary-fixed) l c h / 0.4);
  gap: 0.7rem;
}

@supports (animation-timeline: view()) {
  .hero-inner > * {
    animation: hero-rise 0.7s cubic-bezier(.2,.7,.2,1) both;
  }
  .hero-inner > *:nth-child(2) { animation-delay: 0.08s; }
  .hero-inner > *:nth-child(3) { animation-delay: 0.16s; }
  .hero-inner > *:nth-child(4) { animation-delay: 0.24s; }
}
@keyframes hero-rise {
  from { opacity: 0; translate: 0 1rem; }
  to   { opacity: 1; translate: 0 0; }
}

@container hero (width < 640px) {
  .hero-title  { font-size: clamp(2rem, 8cqi, 2.75rem); }
  .hero-cta-row { gap: 1rem; }
}


/* ===================== css\components\stats.css ===================== */


.stats-modern {
  position: relative;
  isolation: isolate;

  background:
    linear-gradient(
      to bottom in oklch,
      var(--c-primary-dark) 0%,
      oklch(from var(--c-primary-dark) calc(l * 0.82) c h) 100%
    );
  color: white;
  padding-block: clamp(4rem, 8vw + 1rem, 8rem);
  padding-inline: clamp(1.25rem, 2vw, 2rem);
  container: stats / inline-size;
}
:root[data-theme="dark"] .stats-modern {
  background:
    linear-gradient(
      to bottom in oklch,
      oklch(12% 0.015 250) 0%,
      oklch(10% 0.012 250) 100%
    );
}

.stats-inner {
  max-inline-size: 80rem;
  margin-inline: auto;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem 2rem;
  text-align: center;
  margin: 0;
}
@container stats (width >= 768px) {
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.stats-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-inline-size: 20rem;
  margin-inline: auto;
}

.stats-label {
  order: 2;
  font-size: 1rem;
  line-height: 1.6;
  color: oklch(from white l c h / 0.6);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
}

.stats-value {
  order: 1;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: white;
  margin: 0;
  text-shadow: 0 2px 12px oklch(0% 0 0 / 0.18);
}
:root[data-theme="dark"] .stats-value {
  background: linear-gradient(
    180deg in oklch,
    white 0%,
    oklch(from var(--c-primary-fixed) l c h / 0.85) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

@supports (animation-timeline: view()) {
  .stats-item {
    animation: stats-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}
@keyframes stats-rise {
  from { opacity: 0; translate: 0 1.5rem; }
  to   { opacity: 1; translate: 0 0; }
}


/* ===================== css\components\lil-tabs.css ===================== */
/* lil-tabs.css — LinkedIn "Explore courses" tab bar.
   A row of tabs with a 1px underline track and a primary active indicator.
   Scrolls horizontally on narrow screens. Depends only on tokens.css.
   Paired JS: js/lil-tabs.js. Expected DOM:
     <div class="lil-tabs" data-tabs role="tablist">
       <button class="lil-tab" role="tab" aria-selected="true"  data-cat="all">Tümü</button>
       <button class="lil-tab" role="tab" aria-selected="false" data-cat="bakanlik">Bakanlıklar</button>
       …
     </div>
   The JS toggles aria-selected and shows/hides [data-rail] cards whose
   data-cat matches (cat "all" shows everything). */

.lil-tabs {
  display: flex;
  gap: 0.25rem;
  border-block-end: 1px solid oklch(from var(--c-on-surface) l c h / 0.12);
  margin-block-end: 1.75rem;

  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lil-tabs::-webkit-scrollbar { display: none; }
:root[data-theme="dark"] .lil-tabs { border-color: oklch(from white l c h / 0.14); }

.lil-tab {
  flex: 0 0 auto;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0.85rem 1.25rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-on-surface-variant);
  white-space: nowrap;
  position: relative;
  /* underline indicator drawn just over the track line */
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.lil-tab:hover { color: var(--c-on-surface); }
.lil-tab:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; border-radius: 0.25rem; }

.lil-tab[aria-selected="true"] {
  color: var(--c-primary);
  border-block-end-color: var(--c-primary);
}
:root[data-theme="dark"] .lil-tab[aria-selected="true"] { color: var(--c-primary-light); border-block-end-color: var(--c-primary-light); }

@media (prefers-reduced-motion: reduce) {
  .lil-tab { transition: none !important; }
}

/* ===================== css\components\lcard.css ===================== */
/* ==========================================================================
   lcard.css — GYS Academy course-card & layout library
   Original learning-platform UI patterns (catalog / progress / featured /
   path / row). Pure CSS thumbnails, no images, no JS.

   Themed for this project: the token layer ALIASES the gysuds design tokens
   (css/tokens.css) so cards follow the existing orange/cream palette AND the
   manual [data-theme="dark"] toggle. Per-card thumbnail color: set
   style="--card: oklch(L C H)" on the .lcard.
   ========================================================================== */

@layer tokens, lcard-base, lcard-layout, lcard-components, lcard-utils;

/* ---------------------------------------------------------------- tokens -- */
@layer tokens {
  :root {
    /* Brand — aliased to the gysuds primary so it matches site-wide */
    --brand:        var(--c-primary);
    --brand-strong: var(--c-primary-dark);
    --brand-soft:   oklch(from var(--c-primary) 95% 0.05 h);
    --brand-ink:    oklch(from var(--c-primary) 47% 0.13 h);

    /* Review / "gözden geçirilecek" accent — amber, deliberately off the
       brand-blue hue so the reviewed state never reads as the brand color. */
    --review: oklch(68% 0.17 70);

    /* Surfaces & text — aliased to gysuds tokens (they flip in dark mode) */
    --bg:        var(--c-surface);
    --surface:   var(--c-surface-lowest);
    --surface-2: var(--c-surface-container);
    --line:      var(--c-outline-variant);
    --ink:   var(--c-on-surface);
    --ink-2: var(--c-on-surface-variant);
    --ink-3: oklch(from var(--c-on-surface-variant) l c h / 0.78);

    /* Shape & depth */
    --radius:    16px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px oklch(30% 0.03 60 / .06), 0 1px 3px oklch(30% 0.03 60 / .07);
    --shadow-md: 0 8px 20px oklch(30% 0.03 60 / .12), 0 2px 6px oklch(30% 0.03 60 / .07);
    --shadow-lg: 0 22px 48px oklch(30% 0.04 60 / .18);

    --ease-out: cubic-bezier(.2, .7, .3, 1);
  }

  /* Dark mode: surfaces/ink already flip via the gysuds tokens above; only
     the two brand-derived tints need their own dark values. */
  :root[data-theme="dark"] {
    --brand-soft: oklch(from var(--c-primary) 42% 0.075 h);
    --brand-ink:  oklch(from var(--c-primary) 88% 0.09 h);
    --review:     oklch(80% 0.15 78);
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / .4);
    --shadow-md: 0 10px 26px oklch(0% 0 0 / .5);
    --shadow-lg: 0 22px 48px oklch(0% 0 0 / .6);
  }
}

/* ------------------------------------------------------------- base bits -- */
@layer lcard-base {
  /* scoped, non-invasive — the site's base.css/Tailwind own <body>, <a>, etc. */
  .lcard *, .lcard *::before, .lcard *::after { box-sizing: border-box; }
  .lcard :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
  }
  .lcard img { max-width: 100%; display: block; }
}

/* ---------------------------------------------------------------- layout -- */
@layer lcard-layout {
  .lsection { margin-block: clamp(2rem, 5vw, 3.5rem); }
  .lsection__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1.25rem;
  }
  .lsection__title { font-size: clamp(1.15rem, 2.4vw, 1.55rem); letter-spacing: -0.01em; }
  .lsection__link { color: var(--brand-ink); font-weight: 600; font-size: .9rem; white-space: nowrap; }
  .lsection__link:hover { text-decoration: underline; }

  /* Responsive auto-fill grids */
  .lgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: clamp(1rem, 2.4vw, 1.5rem);
  }
  .lgrid--paths { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
  .lgrid--rows  { grid-template-columns: 1fr; gap: .85rem; }
  .lgrid--featured { grid-auto-flow: dense; }
}

/* ------------------------------------------------------------ components -- */
@layer lcard-components {

  /* ---- base card ---- */
  .lcard {
    --card: oklch(62% 0.15 250);
    container: lcard / inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: clip;
    box-shadow: var(--shadow-sm);
    transition:
      transform .25s var(--ease-out),
      box-shadow .25s var(--ease-out),
      border-color .25s;
  }
  .lcard:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
  }

  /* ---- thumbnail (CSS-generated) ---- */
  .lcard__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    isolation: isolate;
    color: #fff;
    background:
      linear-gradient(135deg,
        oklch(from var(--card) calc(l + .07) c h),
        oklch(from var(--card) calc(l - .15) c calc(h + 32)));
  }
  .lcard__thumb img { width: 60%; height: 60%; object-fit: contain; filter: drop-shadow(0 2px 8px oklch(0% 0 0 / .25)); }
  /* real, swappable per-card thumbnail — a true DOM element (unlike the ::after texture),
     so each card's image can be selected and changed individually. Reuses the .lcard__thumb img
     sizing above; when a card carries one, it replaces the CSS-generated glyph. */
  .lcard__thumb-img { position: relative; z-index: 1; }
  .lcard__thumb:has(.lcard__thumb-img) .lcard__thumb-glyph { display: none; }
  .lcard__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, oklch(100% 0 0 / .18) 1px, transparent 0);
    background-size: 15px 15px;
    mix-blend-mode: soft-light;
    opacity: .55;
  }
  .lcard__thumb-glyph {
    font-size: clamp(1.8rem, 9cqi, 3rem);
    font-weight: 800;
    letter-spacing: .01em;
    opacity: .96;
    text-shadow: 0 2px 10px oklch(0% 0 0 / .25);
  }

  .lcard__thumb-tag,
  .lcard__thumb-badge { position: absolute; z-index: 2; }
  .lcard__thumb-tag {
    inset-block-start: .6rem;
    inset-inline-start: .6rem;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-ink);
    background: oklch(100% 0 0 / .92);
    padding: .24rem .5rem;
    border-radius: 6px;
  }
  .lcard__thumb-badge {
    inset-block-end: .6rem;
    inset-inline-start: .6rem;
    font-size: .72rem;
    font-weight: 600;
    color: #fff;
    background: var(--ink-3);
    padding: .2rem .46rem;
    border-radius: 6px;
    backdrop-filter: blur(4px);
  }

  /* hover play affordance */
  .lcard__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    background: oklch(20% 0.03 60 / 0);
    transition: background .25s var(--ease-out);
  }
  .lcard:hover .lcard__play { background: oklch(20% 0.03 60 / .22); }
  .lcard__play svg {
    width: 48px; height: 48px;
    opacity: 0;
    transform: scale(.82);
    filter: drop-shadow(0 2px 8px oklch(0% 0 0 / .35));
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
  }
  .lcard:hover .lcard__play svg { opacity: 1; transform: scale(1); }
  /* logo-only card media (index exams rail) */
  .lcard_logo {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    padding: .75rem;
    background: var(--surface);
  }
  .lcard_logo img {
    max-inline-size: 38.4%;
    max-block-size: 40%;
    width: auto; height: auto;
    object-fit: contain;
    transition: transform .25s var(--ease-out);
  }
  .lcard:hover .lcard_logo img { transform: scale(1.05); }

  #exams-rail-track .lcard_logo {
    aspect-ratio: auto;   /* drop the short 32/7 band so the logo box can be 118px tall */
    padding: 1rem 1.25rem; /* breathing room around the logo (~16px top/bottom, ~20px sides) */
    display: block;       /* was grid+place-items:center, which shrank the img to its intrinsic size */
  }
  #exams-rail-track .lcard_logo img {
    inline-size: 100%;       /* span the full card width (original behaviour) */
    block-size: 118px;       /* taller logo region (was ~77px) */
    max-inline-size: 100%;
    max-block-size: 118px;   /* override base .lcard_logo img max-block-size:40% */
    object-fit: contain;     /* logo stays centered + undistorted */
    display: block;          /* no inline-image baseline gap */
    margin: 0;               /* no wasted top/bottom whitespace */
  }
  #exams-rail-track .lcard__thumb-badge {
    position: static;           /* out of the logo box -> above the title, never on the seal */
    align-self: flex-start;
    inset: auto;
    margin: 0;
    background: var(--brand-soft);
    color: var(--brand-ink);
    backdrop-filter: none;
  }

  /* ---- body ---- */
  .lcard__body {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex: 1;
    padding: 1rem 1rem 1.15rem;
  }
  .lcard__tag {
    align-self: flex-start;
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brand-ink);
    background: var(--brand-soft);
    padding: .28rem .56rem;
    border-radius: 999px;
  }
  .lcard__title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink);
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .lcard__title a { color: inherit; text-decoration: none; }
  .lcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

  .lcard__by   { font-size: .85rem; color: var(--ink-3); }
  .lcard__desc {
    font-size: .9rem;
    color: var(--ink-2);
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .lcard__meta {
    margin-block-start: auto;
    padding-block-start: .4rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    font-size: .8rem;
    color: var(--ink-2);
  }
  .lcard__meta-item { display: inline-flex; align-items: center; gap: .32rem; }
  .lcard__meta svg  { width: 15px; height: 15px; opacity: .75; }

  /* ---- star rating (pure CSS) ---- */
  .lrating { font-weight: 600; color: var(--ink); }
  .lstars {
    --pct: 90%;
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: .92rem;
    letter-spacing: .05em;
    background: linear-gradient(90deg,
      var(--brand) var(--pct),
      color-mix(in oklab, var(--ink-3) 38%, transparent) var(--pct));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .lstars::before { content: "\2605\2605\2605\2605\2605"; }

  /* ---- progress ---- */
  .lcard__progress { display: flex; flex-direction: column; gap: .4rem; margin-block-start: .25rem; }
  .lprogress { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
  .lprogress > i {
    display: block;
    height: 100%;
    width: var(--p, 40%);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand), var(--brand-strong));
  }
  .lcard__progress-label { display: flex; justify-content: space-between; font-size: .76rem; color: var(--ink-2); }

  /* ---- buttons ---- */
  .lbtn {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .85rem;
    color: #fff;
    background: var(--brand);
    border: 0;
    border-radius: 9px;
    padding: .52rem .95rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, transform .08s;
  }
  .lbtn:hover  { background: var(--brand-strong); }
  .lbtn:active { transform: translateY(1px); }
  .lbtn--ghost { color: var(--brand-ink); background: transparent; border: 1px solid var(--line); }
  .lbtn--ghost:hover { background: var(--brand-soft); }
  /* white "İncele" button: orange text on white with a thin orange stroke */
  .lbtn--incele { color: var(--brand); background: #fff; border: 0.5px solid var(--brand); }
  .lbtn--incele:hover { background: var(--brand-soft); }
  /* card action row: Satın Al + İncele side by side */
  .lcard__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-self: flex-start; }

  /* ---- skill pills ---- */
  .lpills { display: flex; flex-wrap: wrap; gap: .4rem; }
  .lpill {
    position: relative;
    z-index: 2;
    font-size: .72rem;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: .22rem .52rem;
    border-radius: 7px;
  }

  /* ---------------------------- VARIANTS ---------------------------- */
  .lcard--progress .lcard__thumb-tag { color: #fff; background: var(--brand); }

  .lcard--path .lcard__thumb { aspect-ratio: 5 / 2; }
  .lcard--path .lcard__thumb-glyph { font-size: clamp(1.6rem, 7cqi, 2.4rem); }

  @container lcard (min-width: 440px) {
    .lcard--featured { flex-direction: row; }
    .lcard--featured .lcard__thumb { aspect-ratio: auto; flex: 0 0 46%; }
    .lcard--featured .lcard__body { justify-content: center; gap: .65rem; }
  }

  .lcard--row { flex-direction: row; }
  .lcard--row .lcard__thumb { aspect-ratio: auto; flex: 0 0 clamp(120px, 28%, 190px); }
  .lcard--row .lcard__body { padding: .8rem 1rem; gap: .4rem; }
  .lcard--row .lcard__title { font-size: .98rem; -webkit-line-clamp: 1; }
  @media (width <= 480px) {
    .lcard--row { flex-direction: column; }
    .lcard--row .lcard__thumb { flex-basis: auto; aspect-ratio: 16 / 9; }
  }
}

/* ------------------------------------------------------------- utilities -- */
@layer lcard-utils {
  .span-2 { grid-column: span 2; }
  @media (width <= 620px) { .span-2 { grid-column: span 1; } }

  @media (prefers-reduced-motion: reduce) {
    .lcard, .lcard * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .lcard:hover { transform: none; }
  }
}

/* -------------------------------------------------- media premium banner -- */
/* Promo strip on the video / podcast / library browse pages. Icon + copy on
   the left, upgrade CTA pinned to the right; wraps on narrow screens. Tokens
   come from the @layer tokens block above, so it tracks light/dark. */
.media-premium-banner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-block-end: 0;
  padding: 0.45rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--brand-soft);
}
.media-premium-banner > .material-symbols-outlined {
  flex-shrink: 0;
  font-size: 1.35rem;
  color: var(--brand);
}
.media-premium-banner-text {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.45rem;
  min-inline-size: 0;
}
.media-premium-banner-text strong {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
}
.media-premium-banner-text small {
  color: var(--ink-3);
  font-size: 0.83rem;
  line-height: 1.35;
}
.media-premium-banner-cta {
  flex-shrink: 0;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s var(--ease-out);
}
.media-premium-banner-cta:hover { background: var(--brand-strong); }
@media (max-width: 640px) {
  .media-premium-banner { flex-wrap: wrap; }
  .media-premium-banner-cta { margin-inline-start: 0; width: 100%; justify-content: center; }
}

/* ===================== css\components\feat-card.css ===================== */

/* feat-card.css — feature cards (about-us, specifications, index Özellikler)
   Skin: flat lcard surface. lcard.css tokens are always in scope.
   Layout/sizing/grid preserved exactly; only visual skin changed. */

/* --feat-glow @property and its radial-gradient halos removed per spec. */

.feat-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 1.25rem;
  padding: 2rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    transform 0.35s cubic-bezier(.2, .7, .2, 1),
    box-shadow 0.45s ease;
}

.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
}

/* Icon tile — surface-2 bg, brand-soft tint on hover */
.feat-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand-ink);
  border: 1px solid var(--line);
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.feat-card:hover .feat-icon {
  background: var(--brand);
  color: #fff;
  transform: rotate(-6deg) scale(1.05);
}

.feat-title {
  font-family: 'Manrope', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}

.feat-body {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
  max-inline-size: 38ch;
}

/* CTA — ghost button matching .lbtn--ghost */
.feat-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.05rem;
  border-radius: 9px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--brand-ink);
  align-self: start;
  justify-self: start;
  transition: background 0.2s, border-color 0.2s, color 0.2s, gap 0.2s ease;
}
.feat-cta:hover,
.feat-card:hover .feat-cta {
  background: var(--brand-soft);
  border-color: color-mix(in oklab, var(--brand) 30%, var(--line));
  gap: 0.75rem;
}

/* AI-accent feature cards — mark yapay-zekâ powered features (index, specifications).
   On-brand only: filled brand icon tile + a small "Yapay Zekâ" pill badge. */
.feat-card--ai .feat-icon {
  background: var(--brand);
  color: #fff;
  border-color: transparent;
}
.feat-badge {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-ink);
  background: var(--brand-soft);
  border: 1px solid color-mix(in oklab, var(--brand) 30%, var(--line));
}
.feat-badge .material-symbols-outlined { font-size: 0.95rem; }

/* Whole-card link: pages with body.feat-cards-linked make each feat-card
   clickable to its CTA target via a stretched ::after overlay (index, specifications). */
body.feat-cards-linked .feat-section .feat-card { cursor: pointer; }
body.feat-cards-linked .feat-section .feat-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Tokens flip automatically in dark mode — no manual dark overrides needed. */

@media (hover: none), (pointer: coarse) {
  .feat-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--line);
  }
}

/* ===================== css\components\plan-card.css ===================== */

/* plan-card.css — pricing / package cards (package-list2, index)
   Skin: free card → flat lcard surface; premium card → brand gradient (kept)
   with normalized radius + shadow-lg. lcard.css tokens always in scope.
   Layout/sizing/flex/gap/padding preserved exactly. */

.plan-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 2.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(.2, .7, .2, 1),
    box-shadow 0.45s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}

/* ---- Free tier — flat lcard surface ---- */
.plan-card--free {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.plan-card--free:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
  box-shadow: var(--shadow-md);
}

/* ---- Premium tier — brand gradient emphasis (kept), radius + shadow normalised ---- */
.plan-card--premium {
  background:
    linear-gradient(
      155deg in oklch,
      var(--brand) 0%,
      var(--brand-strong) 100%
    );
  color: #fff;
  border: 1px solid oklch(from #fff l c h / 0.18);
  box-shadow:
    inset 0 1px 0 0 oklch(from #fff l c h / 0.25),
    var(--shadow-lg);
}
.plan-card--premium::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(
      ellipse 60% 40% at 50% 0%,
      oklch(from #fff l c h / 0.18),
      transparent 60%
    ),
    radial-gradient(
      ellipse 80% 60% at 100% 100%,
      oklch(from var(--brand-strong) l c h / 0.4),
      transparent 70%
    );
  pointer-events: none;
}
.plan-card--premium:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 0 oklch(from #fff l c h / 0.3),
    var(--shadow-lg);
}
@container (min-width: 768px) {
  .plan-card--premium { scale: 1.04; }
  .plan-card--premium:hover { scale: 1.06; translate: 0 -4px; transform: none; }
}

/* ---- Badge (on premium card) ---- */
.plan-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 0.3rem 0.8rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  color: #fff;
  background: oklch(from #fff l c h / 0.2);
  backdrop-filter: blur(6px);
  border: 1px solid oklch(from #fff l c h / 0.35);
}

/* ---- Labels ---- */
.plan-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  display: block;
  margin-block-end: 0.5rem;
}
.plan-card--free    .plan-label { color: var(--brand-ink); }
.plan-card--premium .plan-label { color: oklch(from #fff l c h / 0.75); }

/* ---- Name & price ---- */
.plan-name {
  font-family: 'Manrope', sans-serif;
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1;
  margin: 0;
}

.plan-price {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(2.25rem, 1.5rem + 2vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  margin-block-start: 1rem;
}
.plan-period {
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.65;
}

/* ---- Feature list ---- */
.plan-features {
  list-style: none;
  padding: 0;
  margin-block: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  flex-grow: 1;
}
.plan-feat {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
.plan-feat .material-symbols-outlined { flex-shrink: 0; }

.plan-card--free .plan-feat--yes .material-symbols-outlined {
  color: var(--brand);
  font-variation-settings: 'FILL' 1;
}
.plan-card--free .plan-feat--no .material-symbols-outlined {
  color: var(--ink-3);
}
.plan-card--free .plan-feat--no { color: var(--ink-3); text-decoration: line-through; }

.plan-card--premium .plan-feat .material-symbols-outlined {
  color: #fff;
  font-variation-settings: 'FILL' 1;
}

/* ---- CTA buttons ---- */
.plan-cta {
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: 9px;
  text-align: center;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

/* Ghost — matches .lbtn--ghost */
.plan-cta--outline {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--brand-ink);
}
.plan-cta--outline:hover {
  background: var(--brand-soft);
  border-color: color-mix(in oklab, var(--brand) 30%, var(--line));
}

/* Solid — on the white-surface premium card, stays white+brand-dark */
.plan-cta--solid {
  background: #fff;
  color: var(--brand-strong);
  box-shadow: 0 10px 22px -10px oklch(0% 0 0 / 0.25);
}
.plan-cta--solid:hover {
  background: oklch(from #fff l c h / 0.92);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px oklch(0% 0 0 / 0.35);
}

/* Tokens flip automatically in dark mode — no manual dark overrides needed.
   The premium gradient is colour-token-based (--brand / --brand-strong) so it
   also adapts automatically. The solid CTA uses literal #fff because the premium
   card background is always the brand gradient regardless of theme. */

@media (prefers-reduced-motion: reduce) {
  .plan-card, .plan-cta { transition: none !important; transform: none !important; }
}

/* ===================== css\components\review-card.css ===================== */

/* review-card.css — testimonial cards (comments-list, index)
   Skin: flat lcard surface. lcard.css tokens always in scope.
   Layout/slider/scroll mechanics preserved exactly. */

.review-card {
  --cards-visible: 1;
  flex: 0 0 calc((100% - (var(--cards-visible) - 1) * 1.5rem) / var(--cards-visible));
  padding: 1.75rem;
  border-radius: var(--radius);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;

  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.3s cubic-bezier(.2, .7, .2, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
@media (min-width: 768px)  { .review-card { --cards-visible: 2; } }
@media (min-width: 1024px) { .review-card { --cards-visible: 3; } }

.review-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
  box-shadow: var(--shadow-md);
}

/* Tokens flip automatically in dark mode — dark overrides for review-card removed. */

/* ---- Stars ---- */
.review-stars {
  display: inline-flex;
  gap: 0.05rem;
  color: oklch(82% 0.17 85);
  margin-inline-start: -0.25rem;
}
.review-stars .material-symbols-outlined { font-variation-settings: 'FILL' 1; }

/* ---- Content ---- */
.review-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
  margin-block-start: 0.75rem;
  color: var(--ink);
}

.review-body {
  font-style: italic;
  line-height: 1.6;
  margin: 0;
  margin-block-start: 0.75rem;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---- Meta row ---- */
.review-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--line);
}

.review-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.review-name {
  font-weight: 700;
  font-size: 0.875rem;
  display: block;
  color: var(--ink);
}
.review-org {
  color: var(--brand-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
}
.review-date {
  margin-inline-start: auto;
  color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
}

@media (prefers-reduced-motion: reduce) {
  .review-card { transition: none !important; transform: none !important; }
}

/* ---- Slider shell (layout only — no skin changes) ---- */
.reviews-slider {
  position: relative;
  isolation: isolate;
}
.reviews-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block-end: 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reviews-track::-webkit-scrollbar { display: none; }

/* ---- Nav buttons — lbtn-style, token-driven ---- */
.reviews-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--brand-ink);
  border: 1px solid var(--line);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    opacity 0.25s ease;
}
.reviews-nav:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  transform: translateY(-50%) scale(1.06);
}
.reviews-nav:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.reviews-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.reviews-nav--prev { left: 0.5rem; }
.reviews-nav--next { right: 0.5rem; }
@media (min-width: 1024px) {
  .reviews-nav--prev { left: -1.5rem; }
  .reviews-nav--next { right: -1.5rem; }
}

/* Tokens flip automatically in dark mode — dark overrides for reviews-nav removed. */

@media (prefers-reduced-motion: reduce) {
  .reviews-track { scroll-behavior: auto; }
  .reviews-nav { transition: none !important; }
}

/* ---- Features carousel (mirrors reviews-slider) ---- */
.feat-slider { position: relative; isolation: isolate; }
.feat-track {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block-end: 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.feat-track::-webkit-scrollbar { display: none; }
.feat-track > .feat-card {
  flex: 0 0 auto;
  inline-size: min(22rem, 84%);
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  /* exactly 3 cards per view (track gap is 2rem => 2 gaps between 3 cards) */
  .feat-track > .feat-card { inline-size: calc((100% - 4rem) / 3); }
}
@media (prefers-reduced-motion: reduce) {
  .feat-track { scroll-behavior: auto; }
}
/* Özellikler slider — phone: full-width card; move arrows to a centered row
   below the card so they no longer overlap the content (desktop untouched) */
@media (max-width: 767px) {
  .feat-track { gap: 1rem; }
  .feat-track > .feat-card { inline-size: 100%; }
  .feat-slider { padding-block-end: 4rem; }
  .reviews-nav {
    top: auto; bottom: 0.75rem; transform: none;
    inline-size: 2.75rem; block-size: 2.75rem;
  }
  .reviews-nav:hover { transform: scale(1.06); }
  .reviews-nav--prev { left: calc(50% - 3.25rem); right: auto; }
  .reviews-nav--next { right: calc(50% - 3.25rem); left: auto; }
}

/* ---- Home exam filter: wide kurum dropdown + search that grows on focus ---- */
.home-search {
  flex: 1 1 0%;        /* 25% of the row, alongside the 3-part (75%) kurum select */
  min-inline-size: 0;
}
@media (max-width: 767px) {
  .home-search { inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .home-search { transition: none; }
}

/* index home filter: explicit 1250px row + 52px-tall controls (desktop ≥768px). */
@media (min-width: 768px) {
  body.page-index .home-filter { inline-size: 1250px; max-inline-size: 100%; margin-inline: auto; }
  body.page-index #home-exam-kurum { block-size: 52px; }
  body.page-index #home-exam-search { block-size: 52px; }
}

/* ===================== css\components\faq.css ===================== */


:root { interpolate-size: allow-keywords; }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.faq-item[open] {
  border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
  box-shadow: var(--shadow-md);
}

.faq-q {
  list-style: none;
  cursor: pointer;
  padding: 1.5rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  user-select: none;
  transition: background 0.2s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { background: var(--brand-soft); }

.faq-q .material-symbols-outlined {
  color: var(--brand);
  transition: rotate 0.3s ease;
  flex-shrink: 0;
}
.faq-item[open] .faq-q .material-symbols-outlined { rotate: 180deg; }

.faq-a {
  padding: 0 1.75rem 1.5rem;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
.faq-a a { color: var(--brand-ink); font-weight: 700; }
.faq-a a:hover { text-decoration: underline; }

@supports selector(::details-content) {
  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-item::details-content { transition: none !important; }
}

/* yardim.html — help-center filter chips + search empty state */
.help-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 1.25rem;
}
.help-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.help-chip:hover { border-color: color-mix(in oklab, var(--brand) 40%, var(--line)); color: var(--brand-ink); }
.help-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.help-count {
  margin-inline-start: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--c-on-surface-variant);
}
.faq-item[hidden] { display: none; }
.help-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-2);
  text-wrap: pretty;
}
.help-empty[hidden] { display: none; }
.help-empty .material-symbols-outlined {
  display: block;
  margin: 0 auto 0.5rem;
  font-size: 2.5rem;
  color: var(--brand);
}

@media (prefers-reduced-motion: reduce) {
  .feat-card, .feat-card * { transition: none !important; transform: none !important; }
}

.feat-section {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(
      ellipse 70% 50% at 50% 0%,
      oklch(from var(--c-primary) l c h / 0.04),
      transparent 70%
    );
}

/* ===================== css\components\exam-card.css ===================== */


.exams-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
@container (min-width: 640px) { .exams-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1024px) { .exams-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.exams-section { container: exams / inline-size; }

.exam-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;

  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.3s cubic-bezier(.2,.7,.2,1),
    box-shadow 0.3s ease;
}
.exam-card:hover {
  border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.exam-card__logo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  background: var(--brand-soft);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--brand-ink);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.exam-card__logo img { inline-size: 80%; block-size: 80%; object-fit: contain; }

.exam-card__title {
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  color: inherit;
  text-wrap: balance;
  min-block-size: 3lh;
  margin: 0;
}

.exam-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-block-start: auto;
}
.exam-btn {
  text-align: center;
  padding: 0.55rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, translate 0.2s ease;
}
.exam-btn--ghost {
  background: transparent;
  color: var(--brand-ink);
  border: 1px solid var(--line);
}
.exam-btn--ghost:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.exam-btn--primary {
  background: var(--brand);
  color: white;
  border: 1px solid var(--brand);
}
.exam-btn--primary:hover {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
  translate: 0 -1px;
}

.exam-card--all {
  grid-template-rows: 1fr auto 1fr;
  text-align: center;
  align-items: center;
  background:
    radial-gradient(
      ellipse 80% 80% at 50% 50%,
      var(--brand-soft),
      transparent 70%
    ),
    var(--surface);
  border-style: dashed;
}
.exam-card--all .exam-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
  margin-inline: auto;
}
.exam-card--all .exam-card__title {
  text-align: center;
  min-block-size: 0;
  color: var(--brand-ink);
}
.exam-card--all .exam-card__sub {
  color: var(--ink-2);
  font-size: 0.8rem;
  margin: 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .exam-card { transition: none !important; transform: none !important; }
}

/* ===================== css\components\lesson.css ===================== */
/* lesson.css — LinkedIn-Learning-style course/lesson player.
   Video hero, pure-CSS tabbed panels, and a curriculum list. Depends on
   the lcard token aliases (--surface/--line/--radius/--brand/--ink*…).
   No JS: tabs use a radio/:checked sibling pattern; sections use <details>. */

/* ---- Video / lesson hero -------------------------------------------- */
.lesson-video {
  --lv: oklch(58% 0.15 256);
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    linear-gradient(135deg,
      oklch(from var(--lv) calc(l + .07) c h),
      oklch(from var(--lv) calc(l - .15) c calc(h + 32)));
}
.lesson-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, oklch(100% 0 0 / .15) 1px, transparent 0);
  background-size: 16px 16px;
  mix-blend-mode: soft-light;
  opacity: .5;
}
.lesson-video__play {
  position: relative;
  z-index: 1;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: oklch(100% 0 0 / .16);
  border: 2px solid oklch(100% 0 0 / .55);
  backdrop-filter: blur(4px);
  color: #fff;
  transition: transform .25s var(--ease-out), background .25s;
}
.lesson-video__play:hover { transform: scale(1.08); background: oklch(100% 0 0 / .26); }
.lesson-video__play svg { width: 2rem; height: 2rem; margin-inline-start: .2rem; }
.lesson-video__bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(to top, oklch(0% 0 0 / .6), transparent);
  font-size: .85rem;
}
.lesson-video__bar .material-symbols-outlined { font-size: 1.2rem; }

/* ---- Tabs (pure CSS) ------------------------------------------------ */
.lesson-tabs__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lesson-tabs__nav {
  display: flex;
  gap: .25rem;
  border-block-end: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.lesson-tabs__nav::-webkit-scrollbar { display: none; }
.lesson-tab {
  flex: 0 0 auto;
  padding: .85rem 1.1rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  transition: color .2s, border-color .2s;
}
.lesson-tab:hover { color: var(--ink); }
.lesson-panel { display: none; padding-block-start: 1.5rem; }

#lt1:checked ~ .lesson-tabs__nav label[for="lt1"],
#lt2:checked ~ .lesson-tabs__nav label[for="lt2"],
#lt3:checked ~ .lesson-tabs__nav label[for="lt3"] { color: var(--brand); border-block-end-color: var(--brand); }
#lt1:checked ~ .lesson-panels #panel1,
#lt2:checked ~ .lesson-panels #panel2,
#lt3:checked ~ .lesson-panels #panel3 { display: block; }
.lesson-tabs__radio:focus-visible ~ .lesson-tabs__nav label[for="lt1"] { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ---- Curriculum sidebar -------------------------------------------- */
.lesson-rail {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: clip;
}
.lesson-rail__head { padding: 1.1rem 1.25rem; border-block-end: 1px solid var(--line); }
.lesson-rail__progress { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-block-start: .6rem; }
.lesson-rail__progress > i { display: block; height: 100%; width: var(--p, 35%); border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-strong)); }

.lesson-sec { border-block-end: 1px solid var(--line); }
.lesson-sec:last-child { border-block-end: 0; }
.lesson-sec > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.25rem;
  font-weight: 700;
  color: var(--ink);
  font-size: .92rem;
}
.lesson-sec > summary::-webkit-details-marker { display: none; }
.lesson-sec > summary .lesson-sec__chev { margin-inline-start: auto; transition: transform .2s var(--ease-out); color: var(--ink-3); }
.lesson-sec[open] > summary .lesson-sec__chev { transform: rotate(180deg); }
.lesson-sec__meta { font-weight: 500; color: var(--ink-3); font-size: .8rem; }

.lesson-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1.25rem .65rem 1.5rem;
  font-size: .88rem;
  color: var(--ink-2);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.lesson-item:hover { background: var(--surface-2); color: var(--ink); }
.lesson-item__icon { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; display: grid; place-items: center; }
.lesson-item__icon .material-symbols-outlined { font-size: 1.2rem; }
.lesson-item__dur { margin-inline-start: auto; color: var(--ink-3); font-size: .78rem; font-variant-numeric: tabular-nums; }
.lesson-item--done .lesson-item__icon { color: var(--brand); }
.lesson-item--current {
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-weight: 600;
  box-shadow: inset 3px 0 0 0 var(--brand);
}
.lesson-item--current .lesson-item__icon { color: var(--brand); }
.lesson-item--locked { color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .lesson-video__play, .lesson-sec__chev { transition: none; }
}

/* ===================== css\components\message.css ===================== */
.message-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1rem;
  flex-wrap: wrap;
}

.message-tab-row {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.message-tab {
  padding: 0.5rem 1.1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease, color 0.2s ease;
}
.message-tab:hover { color: var(--brand-ink); background: var(--brand-soft); }
.message-tab[aria-current="page"],
.message-tab.is-active {
  background: var(--brand);
  color: #fff;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.message-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.message-item:hover {
  border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
  box-shadow: var(--shadow-md);
  transform: translateX(2px);
}

.message-item.is-unread {
  background:
    linear-gradient(135deg in oklch,
      var(--brand-soft) 0%,
      var(--surface) 60%
    );
  border-color: color-mix(in oklab, var(--brand) 35%, var(--line));
}
.message-item.is-unread .message-from { font-weight: 800; }
.message-item.is-unread::before {
  content: "";
  position: absolute;
}

.message-avatar {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.message-body {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.message-from {
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.message-subject {
  font-size: 0.85rem;
  color: var(--ink);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-preview {
  font-size: 0.8rem;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--ink-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.message-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px dashed var(--line);
  color: var(--ink-2);
}
.message-empty .material-symbols-outlined {
  font-size: 3rem;
  color: var(--brand);
  opacity: 0.65;
}
.message-empty p { margin-block-start: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  .message-item { transition: none !important; transform: none !important; }
}

/* ===================== css\components\profile.css ===================== */
.profile-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .profile-shell {
    grid-template-columns: 18rem 1fr;
    align-items: start;
  }
}

.profile-sidebar {
  position: sticky;
  top: 5rem;
  align-self: start;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.profile-sidebar-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-inline: 0.5rem;
  margin-block-end: 0.75rem;
}

.profile-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, gap 0.18s ease;
}
.profile-nav a:hover {
  background: var(--brand-soft);
  color: var(--brand-ink);
}
.profile-nav a[aria-current="page"] {
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}
.profile-nav a[aria-current="page"]:hover {
  background: var(--brand-strong);
  color: #fff;
}
.profile-nav .material-symbols-outlined {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.profile-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.profile-card {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.profile-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1rem;
}
.profile-card-title {
  font-family: 'Manrope', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.profile-card-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  border-radius: 9px;
  color: var(--brand-ink);
  background: transparent;
  border: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.profile-card-edit:hover {
  background: var(--brand-soft);
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.profile-avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--brand-ink);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.profile-meta-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
}
.profile-meta-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-2);
}
.profile-meta-row .material-symbols-outlined { font-size: 1rem; }

.profile-value {
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.5;
}
.profile-value.is-muted { color: var(--ink-3); font-style: italic; }

.profile-danger {
  border-color: oklch(from #ba1a1a l c h / 0.35);
  background:
    linear-gradient(
      135deg in oklch,
      oklch(from #ba1a1a l c h / 0.04) 0%,
      transparent 60%
    ),
    var(--surface);
}
/* Dark: danger gradient needs a stronger tint that tokens can't express; title
   lightens to readable red on dark surface. */
:root[data-theme="dark"] .profile-danger {
  background:
    linear-gradient(
      135deg in oklch,
      oklch(from #ba1a1a l c h / 0.08) 0%,
      transparent 60%
    ),
    var(--surface);
}
.profile-danger .profile-card-title { color: #ba1a1a; }
:root[data-theme="dark"] .profile-danger .profile-card-title { color: oklch(72% 0.16 28); }

/* ===================== css\components\auth.css ===================== */
.auth-shell {
  min-block-size: calc(100dvh - 5rem);
  display: grid;
  place-items: center;
  padding-block: clamp(2rem, 6vw, 4rem);
  padding-inline: 1rem;
}

.auth-card {
  inline-size: 100%;
  max-inline-size: 32rem;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* contact page: let the cards fill their grid columns. The 32rem cap (NOT any
   margin) is what left a ~190px gap between the form and the info column. */
body.page-contact .auth-card { max-inline-size: none; }

.auth-title {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

.auth-sub {
  margin-block-start: 0.5rem;
  color: var(--ink-2);
  font-size: 0.95rem;
  text-wrap: pretty;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-start: 1.75rem;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.auth-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.auth-input,
.auth-select {
  inline-size: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.auth-input::placeholder { color: var(--ink-3); opacity: 0.7; }
.auth-input:focus,
.auth-select:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: var(--brand);
  background: var(--surface);
}
.auth-input:user-invalid {
  border-color: #ba1a1a;
}
.auth-select:disabled { opacity: 0.5; cursor: not-allowed; }

textarea.auth-input {
  min-block-size: 7rem;
  resize: vertical;
  line-height: 1.5;
  font-family: inherit;
}

.auth-row {
  display: grid;
  gap: 1rem;
}
@media (min-width: 540px) {
  .auth-row--two { grid-template-columns: 1fr 1fr; }
}

.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin-block-start: 0.25rem;
}
.auth-check input[type="checkbox"] {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin-block-start: 0.15rem;
  accent-color: var(--brand);
  flex-shrink: 0;
}
.auth-check a {
  color: var(--brand-ink);
  font-weight: 600;
}
.auth-check a:hover { text-decoration: underline; }

.auth-submit {
  margin-block-start: 0.5rem;
  inline-size: 100%;
  padding: 0.95rem 1.5rem;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.auth-submit:hover {
  background: var(--brand-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.auth-submit:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.auth-foot {
  margin-block-start: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.auth-foot a {
  color: var(--brand-ink);
  font-weight: 700;
}
.auth-foot a:hover { text-decoration: underline; }

.auth-divider {
  margin-block: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--line);
}

.auth-google {
  inline-size: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.85rem 1.5rem;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.auth-google:hover {
  background: color-mix(in oklab, var(--ink) 6%, var(--surface));
  border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.auth-google:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.auth-google__ic { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .auth-submit, .auth-google, .auth-input, .auth-select { transition: none !important; transform: none !important; }
}

/* ===================== css\components\result.css ===================== */
/* result.css — exam-result visuals.
   Conic score ring and per-subject breakdown bars.
   Uses the lcard token aliases (--surface/--line/--brand/--ink*…). */

/* ---- Score ring (pure CSS, conic + masked) -------------------------- */
.score-ring {
  --val: 78;
  --ring-size: 9.5rem;
  position: relative;
  inline-size: var(--ring-size);
  block-size: var(--ring-size);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.score-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--val) * 1%), var(--surface-2) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 70%, #000 71%);
          mask: radial-gradient(farthest-side, transparent 70%, #000 71%);
}
.score-ring__inner { position: relative; z-index: 1; text-align: center; line-height: 1.1; }
.score-ring__num { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 2rem; color: var(--ink); }
.score-ring__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; }

/* ---- Stat pills (doğru / yanlış / boş) ------------------------------ */
.result-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: .85rem 1rem;
  text-align: center;
}
.result-stat__num { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1; }
.result-stat__label { font-size: .72rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-block-start: .3rem; }
.result-stat--ok  .result-stat__num { color: oklch(58% 0.15 150); }
.result-stat--no  .result-stat__num { color: #ba1a1a; }
.result-stat--na  .result-stat__num { color: var(--ink-3); }

/* ---- Per-subject breakdown bars ------------------------------------- */
.result-bar { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; align-items: center; margin-block: .9rem; }
.result-bar__name { font-weight: 600; color: var(--ink); font-size: .92rem; }
.result-bar__val  { font-size: .82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.result-bar__track { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.result-bar__fill  { height: 100%; width: var(--p, 50%); border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-strong)); }
.result-bar--low .result-bar__fill { background: linear-gradient(90deg, #e8843c, #ba1a1a); }


/* ===================== css\components\deneme.css ===================== */
.exam-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .exam-shell {
    grid-template-columns: 1fr 18rem;
    align-items: start;
  }
}

.exam-topbar {
  position: sticky;
  top: 5rem;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  margin-block-end: 1.25rem;
}

.exam-topbar-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
}
.exam-topbar-meta .material-symbols-outlined {
  color: var(--brand);
  font-size: 1.25rem;
}
.exam-progress {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}
.exam-progress strong {
  color: var(--brand);
  font-weight: 800;
}

.exam-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 1rem;
  color: var(--brand);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.exam-timer.is-low {
  background: oklch(from #ba1a1a l c h / 0.12);
  color: #ba1a1a;
  animation: exam-pulse 1.2s ease-in-out infinite;
}
@keyframes exam-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.exam-question-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.exam-question-card {
  padding: 1.1rem 1.5rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 11rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.exam-question-card.is-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--shadow-md);
}

.exam-question-no {
  inline-size: 1.9rem;
  block-size: 1.9rem;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.exam-mark-review--inline {
  margin-inline-start: auto;
  font-size: 0.8rem;
}

/* Per-question action buttons (favorite / report) + review toggle */
.exam-q-actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.exam-q-actions .exam-mark-review { font-size: 0.8rem; }

.exam-q-action {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.exam-q-action:hover { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand); }
.exam-q-action:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.exam-q-action .material-symbols-outlined { font-size: 1.15rem; }

.exam-q-action[data-q-fav].is-active {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--brand-soft);
}
.exam-q-action[data-q-report].is-active {
  color: #ba1a1a;
  border-color: #ba1a1a;
  background: oklch(from #ba1a1a l c h / 0.1);
}
.exam-q-action.is-active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }

/* favorite button with a notification-style badge (count on the top-right) */
.exam-q-fav { position: relative; overflow: visible; }
.exam-q-fav-count {
  position: absolute;
  inset-block-start: -0.7rem;
  inset-inline-end: -0.7rem;
  min-inline-size: 1.05rem;
  block-size: 1.05rem;
  padding: 0 0.28rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0 0 2px var(--surface);
  pointer-events: none;
}
.exam-q-fav.is-active .exam-q-fav-count { background: var(--brand-strong); }

.exam-report {
  margin-block-start: 1.1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.exam-report-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  margin-block-end: 0.7rem;
}
.exam-report-reasons { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-block-end: 0.7rem; }
.exam-report-reason {
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.exam-report-reason:hover { border-color: var(--brand); color: var(--brand-ink); }
.exam-report-reason.is-sel { background: var(--brand); color: #fff; border-color: var(--brand); }
.exam-report-note {
  inline-size: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.5;
  resize: vertical;
  margin-block-end: 0.7rem;
}
.exam-report-note:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.exam-report-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.exam-report-cancel,
.exam-report-send {
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.exam-report-cancel { background: transparent; border-color: var(--line); color: var(--ink-2); }
.exam-report-cancel:hover { background: var(--surface); border-color: var(--ink-3); }
.exam-report-send { background: var(--brand); color: #fff; }
.exam-report-send:hover:not(:disabled) { background: var(--brand-strong); }
.exam-report-send:disabled { opacity: 0.45; cursor: not-allowed; }

.exam-report-done {
  margin-block-start: 0.85rem;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #16a34a;
}
.exam-report-done:not([hidden]) { display: flex; }
.exam-report-done .material-symbols-outlined { font-size: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  .exam-q-action, .exam-report-reason, .exam-report-cancel, .exam-report-send { transition: none !important; }
}

.exam-question-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-block-end: 0.55rem;
}
.exam-question-meta-tag {
  padding: 0.2rem 0;
  background: transparent;
  color: var(--brand);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.exam-question-text {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}

.exam-options {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.exam-option {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.85rem;
  align-items: center;
  padding: 4px 1rem;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.18s ease;
}
.exam-option:hover {
  background: var(--brand-soft);
  transform: translateX(2px);
}

.exam-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.exam-option:has(input:checked) {
  background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
}
.exam-option:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.exam-option-letter {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0.4px solid currentColor;
  color: var(--brand-ink);
  font-family: inherit;
  font-weight: inherit;
  font-size: 1rem;
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.exam-option:has(input:checked) .exam-option-letter {
  color: var(--brand);
}
/* Opt-in: gray (not brand) highlight for the picked answer option.
   Add the `exam-gray-pick` class to <body> on pages that want it. */
body.exam-gray-pick .exam-option:has(input:checked) {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--ink-2);
}
body.exam-gray-pick .exam-option:has(input:checked) .exam-option-letter {
  color: var(--ink);
}

.exam-option-text {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}

/* Soru ID — sits to the left of the favorite / report actions */
.exam-question-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted, var(--ink));
  opacity: 0.7;
  white-space: nowrap;
  margin-inline-end: 0.15rem;
}

/* "Çözümü göster" — bottom-right of each question card */
.exam-question-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.8rem;
}
.exam-solution-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand);
  background: transparent;
  color: var(--brand-ink);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.exam-solution-btn:hover {
  background: var(--brand);
  color: #fff;
}
/* Revealed solution module — drops in below the card, same theme */
.exam-solution {
  margin-block-start: 1rem;
  padding: 1.1rem 1.35rem;
  border-radius: var(--radius-md, 0.75rem);
  background: var(--brand-soft);
  box-shadow: inset 4px 0 0 var(--brand);
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.6;
  animation: exam-solution-in 0.22s ease;
}
@keyframes exam-solution-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.exam-solution-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-block-end: 0.6rem;
}
.exam-solution-label .material-symbols-outlined { font-size: 1.1rem; }
.exam-solution-answer {
  font-size: 0.95rem;
  color: var(--ink);
  margin-block-end: 0.5rem;
}
.exam-solution-answer strong {
  display: inline-grid;
  place-items: center;
  inline-size: 1.7rem;
  block-size: 1.7rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  margin-inline-start: 0.35rem;
  vertical-align: middle;
}
.exam-solution-body {
  margin: 0;
  color: var(--ink);
}
.exam-solution-btn.is-active {
  background: var(--brand);
  color: #fff;
}

.exam-nav-row {
  margin-block-start: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.exam-mark-review {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-2);
  cursor: pointer;
}
.exam-mark-review input[type="checkbox"] {
  inline-size: 1rem;
  block-size: 1rem;
  accent-color: var(--brand);
}

.exam-nav-actions { display: flex; gap: 0.5rem; }

.exam-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.exam-btn--ghost {
  background: transparent;
  color: var(--brand-ink);
  border-color: var(--line);
}
.exam-btn--ghost:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.exam-btn--primary {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}
.exam-btn--primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.exam-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.exam-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  /* Sit below the sticky topbar (header 5rem + topbar ~5.3rem) so it never overlaps the timer. */
  top: 11rem;
  align-self: start;
}

.exam-side-card {
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.exam-side-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-block-end: 0.75rem;
}

.exam-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
  /* Show a 5x3 window; scroll inside for the rest. */
  max-block-size: 9rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline-end: 0.3rem;
  scrollbar-width: thin;
  scrollbar-color: var(--brand) transparent;
}
.exam-grid::-webkit-scrollbar { width: 6px; }
.exam-grid::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 3px; }
.exam-grid::-webkit-scrollbar-track { background: transparent; }
.exam-grid-cell {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.exam-grid-cell:hover { transform: scale(1.06); }
.exam-grid-cell.is-answered {
  background: var(--brand-soft);
  color: var(--brand-ink);
  border-color: var(--brand);
}
.exam-grid-cell.is-reviewed {
  background: oklch(from var(--review) l c h / 0.18);
  color: var(--review);
  border-color: oklch(from var(--review) l c h / 0.4);
}
.exam-grid-cell.is-current {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}

.exam-legend { display: flex; flex-direction: column; gap: 0.45rem; }
.exam-legend-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--ink-2);
}
.exam-legend-swatch {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: 0.2rem;
  flex-shrink: 0;
}
.exam-legend-swatch--answered { background: var(--brand-soft); border: 1px solid var(--brand); }
.exam-legend-swatch--reviewed { background: oklch(from var(--review) l c h / 0.3); border: 1px solid oklch(from var(--review) l c h / 0.5); }
.exam-legend-swatch--current { background: var(--brand); }
.exam-legend-swatch--blank { background: var(--surface-2); border: 1px solid var(--line); }

.exam-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--ink);
}
.exam-summary-row + .exam-summary-row { margin-block-start: 0.3rem; }
.exam-summary-row strong { font-family: 'JetBrains Mono', monospace; }

.exam-submit {
  inline-size: 100%;
  padding: 0.85rem 1rem;
  border-radius: 9px;
  background: var(--brand);
  color: white;
  border: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.exam-submit:hover { background: var(--brand-strong); transform: translateY(-1px); }

/* ---- deneme: watermark, answer feedback, AI button, topbar takeover ---- */
.exam-q-watermark {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--ink);
  opacity: 0.16;
  margin-block: 0.35rem 0.55rem;
  user-select: none;
}

/* right answer = green, chosen wrong answer = red */
.exam-options .exam-option.is-correct {
  background: color-mix(in oklab, #16a34a 14%, var(--surface));
  box-shadow: inset 3px 0 0 #16a34a;
}
.exam-options .exam-option.is-correct .exam-option-letter { color: #16a34a; }
.exam-options .exam-option.is-wrong {
  background: color-mix(in oklab, #ba1a1a 12%, var(--surface));
  box-shadow: inset 3px 0 0 #ba1a1a;
}
.exam-options .exam-option.is-wrong .exam-option-letter { color: #ba1a1a; }

/* question-map cells follow the same right/wrong colours */
.exam-grid-cell.is-correct { background: #16a34a; color: #fff; border-color: #16a34a; }
.exam-grid-cell.is-wrong { background: #ba1a1a; color: #fff; border-color: #ba1a1a; }
.exam-legend-swatch--correct { background: #16a34a; }
.exam-legend-swatch--wrong { background: #ba1a1a; }

/* review (eye) toggle active state — amber, distinct from the brand-blue
   favorite toggle so the two actions never read as the same colour. */
.exam-q-action[data-q-review].is-active {
  color: var(--review);
  border-color: var(--review);
  background: oklch(from var(--review) l c h / 0.14);
}

/* "Yapay Zeka ile Analiz" button — left of "Çözümü göster", shown with the solution */
.exam-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.exam-ai-btn:hover { filter: brightness(1.08); }
.exam-ai-btn[hidden] { display: none; }

/* ===== ai-mock: shared fake-AI stream pattern =====
   Two surfaces use the same "düşünüyor → word-by-word stream" mock:
   konu-calis ("Yapay Zeka ile Özetle", .kc-ai*) and deneme ("Yapay Zeka ile
   Analiz", .exam-ai*). Both reuse @keyframes kc-dot / kc-blink and the
   .kc-ai__cursor element so the streaming cursor stays identical. */
.exam-ai-btn[aria-busy="true"] { opacity: 0.85; cursor: progress; }
.exam-ai-btn:disabled { cursor: progress; }
/* one-time analysis done: stays passive, no hover/brightness */
.exam-ai-btn.is-done { cursor: default; opacity: 0.7; filter: none; }
.exam-ai-btn.is-done:hover { filter: none; }
.exam-ai-dots { display: none; align-items: center; gap: 3px; }
.exam-ai-btn[aria-busy="true"] .exam-ai-dots { display: inline-flex; }
.exam-ai-btn[aria-busy="true"] > svg { display: none; }
.exam-ai-dots i {
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: kc-dot 1s ease-in-out infinite;
}
.exam-ai-dots i:nth-child(2) { animation-delay: 0.15s; }
.exam-ai-dots i:nth-child(3) { animation-delay: 0.3s; }
.exam-ai-out {
  margin-block-start: 0.9rem;
  padding: 1.05rem 1.3rem;
  border-radius: var(--radius-md, 0.75rem);
  background: var(--brand-soft);
  box-shadow: inset 4px 0 0 var(--brand);
  color: var(--c-on-surface);
  font-size: 0.95rem;
  line-height: 1.7;
  animation: exam-solution-in 0.22s ease;
}
.exam-ai-out[hidden] { display: none; }

/* ===== exam-modal: in-page confirm/alert dialog (replaces native popups) ===== */
.exam-modal {
  border: none;
  padding: 0;
  border-radius: 1.25rem;
  inline-size: min(30rem, calc(100vw - 2rem));
  background: var(--c-surface-lowest);
  color: var(--c-on-surface);
  box-shadow: 0 24px 60px -20px oklch(0% 0 0 / 0.45);
}
.exam-modal::backdrop { background: oklch(0% 0 0 / 0.5); backdrop-filter: blur(2px); }
.exam-modal[open] { animation: exam-modal-in 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes exam-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
.exam-modal__card { padding: 1.75rem; text-align: center; }
.exam-modal__icon {
  inline-size: 3.25rem; block-size: 3.25rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-ink);
}
.exam-modal__icon .material-symbols-outlined { font-size: 1.7rem; }
.exam-modal__title {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.25rem;
  color: var(--c-on-surface); margin: 0 0 0.4rem;
}
.exam-modal__msg {
  color: var(--c-on-surface-variant); font-size: 0.95rem; line-height: 1.6;
  margin: 0 0 1.5rem; text-wrap: pretty;
}
.exam-modal__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.exam-modal__btn {
  font-family: inherit; font-weight: 700; font-size: 0.9rem;
  padding: 0.65rem 1.4rem; border-radius: 0.75rem;
  cursor: pointer; border: 1px solid transparent;
  transition: filter 0.15s ease, background 0.15s ease;
}
.exam-modal__btn--primary { background: var(--c-primary); color: #fff; }
.exam-modal__btn--primary:hover { filter: brightness(1.08); }
.exam-modal__btn--ghost { background: transparent; border-color: var(--c-outline-variant); color: var(--c-on-surface); }
.exam-modal__btn--ghost:hover { background: var(--c-surface-container); }
.exam-modal__btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .exam-modal[open] { animation: none; } }

/* topbar: finish button sits to the left of the timer */
.exam-topbar-right { display: flex; align-items: center; gap: 0.7rem; margin-inline-start: auto; }
.exam-finish-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-sm);
  border: 0;
  background: var(--brand);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.exam-finish-btn:hover { background: var(--brand-strong); }

/* topbar logo — only shown once the topbar takes over the header */
.exam-topbar-logo { display: none; flex-shrink: 0; align-items: center; }
.exam-topbar-logo img { block-size: 1.9rem; inline-size: auto; }

/* after scrolling, the exam topbar replaces the site header row */
.site-header { transition: transform 0.2s ease, background 0.25s ease, border-color 0.25s ease; }
body.exam-scrolled .site-header { transform: translateY(-100%); }
body.exam-scrolled .exam-topbar { top: 0; border-radius: 0 0 var(--radius) var(--radius); }
body.exam-scrolled .exam-topbar-logo { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
  .exam-timer.is-low,
  .exam-option,
  .exam-grid-cell { animation: none !important; transition: none !important; transform: none !important; }
}

/* ===================== otomatik-deneme ===================== */
/* Auto-test builder (otomatik-deneme-olustur.html). Three-step progressive
   disclosure: criteria radiogroup -> mock-query preview (skeleton -> stats)
   -> confirm banner with BAŞLA. All tokens from the lcard family above;
   theme flips come free via --surface/--ink/--brand/--review. The card glow
   is driven by a registered @property so it can transition smoothly. */

@property --od-glow {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.od {
  container: od / inline-size;     /* criteria grid responds to the content column, not the viewport */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* --- panels (one per step) --- */
.od-panel {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.od-stephead {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-block-end: 1.25rem;
}
.od-stepnum {
  flex-shrink: 0;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.95rem;
}
.od-h {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--ink);
  line-height: 1.2;
  text-wrap: balance;
}
.od-sub {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* --- step 1: criteria radiogroup --- */
.od-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@container od (width > 32rem) { .od-grid { grid-template-columns: repeat(2, 1fr); } }
@container od (width > 52rem) { .od-grid { grid-template-columns: repeat(3, 1fr); } }

.od-crit {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1.5px solid var(--line);
  cursor: pointer;
  isolation: isolate;
  transition: border-color 0.18s var(--ease-out), transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), --od-glow 0.3s var(--ease-out);
}
/* visually-hidden native radio keeps full keyboard + a11y semantics */
.od-crit input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* brand glow overlay (DESIGN.md hover recipe) */
.od-crit::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: radial-gradient(120% 120% at 50% 0%, oklch(from var(--brand) l c h / calc(var(--od-glow) * 0.5)) 0%, transparent 70%);
  transition: opacity 0.3s var(--ease-out);
}
.od-crit:hover {
  --od-glow: 30%;
  border-color: oklch(from var(--brand) l c h / 0.5);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.od-crit-ic {
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border-radius: 0.7rem;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-ink);
  transition: background 0.18s ease, color 0.18s ease;
}
.od-crit-ic .material-symbols-outlined { font-size: 1.5rem; }
.od-crit-body { display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; }
.od-crit-tt {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
}
.od-crit-desc { font-size: 0.82rem; color: var(--ink-3); text-wrap: pretty; }
.od-crit-check {
  color: var(--brand);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.od-crit-check .material-symbols-outlined { font-size: 1.5rem; font-variation-settings: 'FILL' 1; }

/* selected state — :has() lifts the whole card */
.od-crit:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: var(--shadow-md);
}
.od-crit:has(input:checked) .od-crit-ic { background: var(--brand); color: #fff; }
.od-crit:has(input:checked) .od-crit-check { opacity: 1; transform: scale(1); }
.od-crit:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* --- step 2: preview (skeleton + stats) --- */
.od-stats,
.od-skel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@container od (width > 36rem) {
  .od-stats,
  .od-skel { grid-template-columns: repeat(2, 1fr); }
}
.od-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--line);
}
.od-stat--wide { grid-column: 1 / -1; }
.od-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.od-stat-value {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ink);
  line-height: 1.1;
}
.od-stat-value span[data-od-prev],
.od-stat-value span[data-od-count] { font-variation-settings: normal; }
.od-stat-name { font-size: 1.25rem; text-wrap: balance; }
.od-stat-diff { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.15rem; }

/* difficulty segment bar — colour tracks level (green / amber / red) */
.od-diff { display: inline-flex; gap: 4px; }
.od-diff-seg { inline-size: 1.4rem; block-size: 0.42rem; border-radius: 0.21rem; background: var(--line); transition: background 0.2s ease; }
.od-diff[data-level="1"] { --od-diff-c: #16a34a; }
.od-diff[data-level="2"] { --od-diff-c: var(--review); }
.od-diff[data-level="3"] { --od-diff-c: #ba1a1a; }
.od-diff[data-level="1"] .od-diff-seg:nth-child(-n+1),
.od-diff[data-level="2"] .od-diff-seg:nth-child(-n+2),
.od-diff[data-level="3"] .od-diff-seg:nth-child(-n+3) { background: var(--od-diff-c); }

/* skeleton shimmer */
.od-skel-tile {
  block-size: 4.4rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(100deg, var(--bg) 30%, var(--surface-2) 50%, var(--bg) 70%);
  background-size: 200% 100%;
  animation: od-shimmer 1.1s linear infinite;
}
.od-skel-tile--wide { grid-column: 1 / -1; }
@keyframes od-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* --- step 3: confirm --- */
.od-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  background: linear-gradient(160deg in oklch, var(--brand-soft), var(--surface));
  border-color: oklch(from var(--brand) l c h / 0.35);
}
.od-confirm-ic {
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  margin-block-end: 0.2rem;
}
.od-confirm-ic .material-symbols-outlined { font-size: 1.7rem; }
.od-confirm-q {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink);
  text-wrap: balance;
  max-inline-size: 28ch;
}
.od-confirm-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.od-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: 0.5rem;
}
.od-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.od-back:hover { border-color: var(--brand); color: var(--brand-ink); }
.od-back .material-symbols-outlined { font-size: 1.1rem; }

.od-start {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 1.7rem;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow: 0 6px 18px -8px oklch(from var(--brand) l c h / 0.7);
  transition: transform 0.18s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.18s ease, --od-glow 0.3s var(--ease-out);
}
.od-start::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  z-index: -1;
  background: radial-gradient(120% 160% at 50% 0%, oklch(from var(--brand) l c h / calc(var(--od-glow) * 0.8)) 0%, transparent 70%);
}
.od-start:hover {
  --od-glow: 45%;
  background: var(--brand-strong);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px oklch(from var(--brand) l c h / 0.8);
}
.od-start:active { transform: translateY(0); }
.od-start .material-symbols-outlined { font-size: 1.2rem; }

/* --- reveal animation for steps 2 & 3 --- */
.od-reveal[hidden] { display: none; }
.od-reveal {
  animation: od-rise 0.4s var(--ease-out) both;
}
@keyframes od-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* --- fallbacks (DESIGN.md mandatory) --- */
@media (hover: none), (pointer: coarse) {
  .od-crit:hover { transform: none; box-shadow: none; --od-glow: 0%; }
  .od-crit:hover .od-crit-ic { background: var(--brand-soft); color: var(--brand-ink); }
  .od-start:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .od-crit,
  .od-start,
  .od-skel-tile,
  .od-reveal,
  .od-crit-check { animation: none !important; transition: none !important; transform: none !important; }
}

/* ===================== soru-sec ===================== */
/* "Karışık / Konulardan / Yanlış / Favori Soru Çöz" config pages
   (karisik-soru.html, soru-coz-sec.html). Reuses the otomatik-deneme
   .od panel/step/confirm structure; adds the cascade-filter selects and the
   question-count radio-card grid. Theme flips come free via the lcard tokens. */
.ssec-fields { display: flex; flex-direction: column; gap: 1rem; }
.ssec-field { display: flex; flex-direction: column; gap: 0.4rem; }
.ssec-field > label {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
}
.ssec-field > label .ssec-optional {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.78em;
  color: var(--ink-3);
}
.ssec-select {
  inline-size: 100%;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1.5px solid var(--line);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.ssec-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px oklch(from var(--brand) l c h / 0.18);
}
.ssec-select:disabled { opacity: 0.5; cursor: not-allowed; }

.ssec-counts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}
@container od (width > 32rem) { .ssec-counts { grid-template-columns: repeat(4, 1fr); } }
.ssec-count {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 1.1rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1.5px solid var(--line);
  cursor: pointer;
  transition: border-color 0.18s var(--ease-out), transform 0.18s var(--ease-out), background 0.18s var(--ease-out);
}
.ssec-count input { position: absolute; opacity: 0; pointer-events: none; }
.ssec-count-n { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--ink); line-height: 1; }
.ssec-count-l { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.ssec-count:hover { border-color: oklch(from var(--brand) l c h / 0.5); transform: translateY(-2px); }
.ssec-count:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.ssec-count:has(input:checked) .ssec-count-n { color: var(--brand-ink); }
.ssec-count:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

/* the start CTA is a <button> here (form submit), not an <a> */
button.od-start { border: 0; cursor: pointer; }

@media (hover: none), (pointer: coarse) {
  .ssec-count:hover { border-color: var(--line); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ssec-count, .ssec-select { transition: none !important; transform: none !important; }
}

/* ===================== profile-overview ===================== */
/* Compact single-card profile summary (member-profile.html): identity + action
   buttons (left), info fields (middle, 2-col), institution seal (right).
   Responds to its own width via @container; theme flips via lcard tokens. */
.po-card {
  container: po / inline-size;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.po-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--ink);
  text-align: center;
  padding-block-end: 1.25rem;
  margin-block-end: 1.5rem;
  border-block-end: 1px solid var(--line);
}
.po-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
@container po (width > 60rem) { .po-grid { grid-template-columns: 17rem minmax(0, 1fr) 13rem; } }

/* identity + actions */
.po-id { display: flex; flex-direction: column; gap: 1.25rem; }
.po-id-top { display: flex; align-items: center; gap: 1rem; padding-block-end: 1.25rem; border-block-end: 1px solid var(--line); }
.po-avatar {
  inline-size: 4.5rem; block-size: 4.5rem; flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-ink);
  overflow: hidden;
}
.po-avatar .material-symbols-outlined { font-size: 2.4rem; }
.po-id-name { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1rem; color: var(--ink); }
.po-id-rows { display: flex; flex-direction: column; gap: 0.15rem; margin-block-start: 0.3rem; }
.po-id-row { font-size: 0.82rem; color: var(--ink-2); }
.po-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.po-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  inline-size: 100%;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--brand); color: #fff;
  font-family: inherit; font-weight: 700; font-size: 0.9rem;
  border: 0; cursor: pointer; text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}
.po-btn .material-symbols-outlined { font-size: 1.15rem; }
.po-btn:hover { background: var(--brand-strong); transform: translateY(-1px); }
.po-btn--danger { background: var(--c-error); }
.po-btn--danger:hover { background: oklch(from var(--c-error) calc(l * 0.92) c h); }

/* info fields (middle column responds to its own width) */
.po-fieldswrap { container: pof / inline-size; }
.po-fields { display: grid; grid-template-columns: 1fr; gap: 0.85rem; }
@container pof (width > 22rem) { .po-fields { grid-template-columns: repeat(2, 1fr); } }
.po-field { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); padding: 0.8rem 1rem; }
.po-field-label { font-size: 0.8rem; font-weight: 600; color: var(--brand-ink); }
.po-field-value { margin-block-start: 0.2rem; font-size: 0.95rem; color: var(--ink); }
.po-field-value strong { font-weight: 800; }

/* institution seal */
.po-seal {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
  padding: 1.5rem 1rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.85rem; text-align: center; block-size: 100%;
}
.po-seal-badge {
  inline-size: 5rem; block-size: 5rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--c-error); color: var(--c-error);
}
.po-seal-badge .material-symbols-outlined { font-size: 2.6rem; }
.po-seal-caption { font-size: 0.85rem; font-weight: 600; color: var(--brand-ink); text-wrap: balance; }

@media (hover: none), (pointer: coarse) { .po-btn:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .po-btn { transition: none !important; transform: none !important; } }

/* ===================== stat-tables ===================== */
/* member statistics tables (statistics.html): deneme attempts + per-subject
   topic stats with a color-coded conic-gradient success ring. Token-driven,
   theme-adaptive; horizontally scrollable on narrow screens. */
.stat-table-wrap {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.stat-table { inline-size: 100%; border-collapse: collapse; font-size: 0.88rem; }
.stat-table th, .stat-table td { padding: 0.7rem 0.85rem; text-align: center; white-space: nowrap; }
.stat-table thead th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-2);
  background: var(--bg);
  border-block-end: 1px solid var(--line);
}
.stat-table tbody td { color: var(--ink); border-block-end: 1px solid var(--line); }
.stat-table tbody tr:last-child td { border-block-end: 0; }
.stat-table tbody tr:hover td { background: var(--brand-soft); }
.stat-table td.stat-td-name { text-align: start; white-space: normal; min-inline-size: 13rem; font-weight: 600; }
.stat-num-ok { color: oklch(58% 0.14 150); font-weight: 700; }
.stat-num-no { color: var(--c-error); font-weight: 700; }
.stat-link {
  display: inline-flex; align-items: center; gap: 0.25rem;
  color: var(--brand-ink); font-weight: 700; font-size: 0.82rem;
  background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit;
  text-decoration: none;
}
.stat-link:hover { text-decoration: underline; }
.stat-link--reset { color: var(--c-error); }

/* color-coded success ring (replaces the source's monochrome #fff ring) */
.stat-ring {
  --val: 0; --ring: var(--brand);
  inline-size: 3rem; block-size: 3rem; margin-inline: auto;
  border-radius: 50%;
  display: grid; place-items: center;
  position: relative;
  font-size: 0.72rem; font-weight: 700; color: var(--ink);
  background: conic-gradient(var(--ring) calc(var(--val) * 1%), var(--c-outline-variant) 0);
}
.stat-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.stat-ring > span { position: relative; z-index: 1; }
.stat-ring--low  { --ring: var(--c-error); }
.stat-ring--mid  { --ring: oklch(72% 0.15 75); }
.stat-ring--high { --ring: oklch(60% 0.15 150); }

.stat-reset-all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.7rem 1.2rem; border-radius: var(--radius-sm);
  background: oklch(from var(--c-error) l c h / 0.1);
  color: var(--c-error); border: 1px solid oklch(from var(--c-error) l c h / 0.3);
  font-family: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer;
  transition: background 0.18s ease;
}
.stat-reset-all .material-symbols-outlined { font-size: 1.15rem; }
.stat-reset-all:hover { background: oklch(from var(--c-error) l c h / 0.18); }
@media (prefers-reduced-motion: reduce) { .stat-table tbody tr:hover td, .stat-reset-all { transition: none !important; } }

/* ===================== deneme-list ===================== */
/* "Sistem Deneme Sınavları" card grid (sistem-denemeleri.html): each deneme is
   a card with soru/süre chips, a Sınava Gir CTA and a previous-stats link.
   Token-driven, theme-adaptive, auto-fill responsive. */
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; }
.dcard {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.dcard:hover {
  border-color: color-mix(in oklab, var(--brand) 35%, var(--line));
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.dcard-title {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.05rem;
  color: var(--ink); text-align: center; text-wrap: balance;
  padding-block-end: 0.9rem; border-block-end: 1px solid var(--line);
}
.dcard-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.dcard-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--line);
  font-size: 0.82rem; font-weight: 600; color: var(--ink-2);
}
.dcard-chip .material-symbols-outlined { font-size: 1.05rem; color: var(--brand); }
.dcard-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.7rem 1rem; border-radius: var(--radius-sm);
  background: var(--brand); color: #fff; font-weight: 700; font-size: 0.9rem;
  text-decoration: none; transition: background 0.18s ease, transform 0.18s ease;
}
.dcard-go .material-symbols-outlined { font-size: 1.1rem; }
.dcard-go:hover { background: var(--brand-strong); transform: translateY(-1px); }
.dcard-stat { text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--brand-ink); text-decoration: none; }
.dcard-stat:hover { text-decoration: underline; }
@media (hover: none), (pointer: coarse) { .dcard:hover { transform: none; } .dcard-go:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .dcard, .dcard-go { transition: none !important; transform: none !important; } }

/* scheduled / live status box (Türkiye Geneli denemeler) */
.dcard-live {
  margin-block-start: auto;
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1rem; border-radius: var(--radius-sm); text-align: center;
  background: oklch(62% 0.14 150 / 0.12);
  border: 1px solid oklch(62% 0.14 150 / 0.32);
}
.dcard-live-date { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.85rem; color: oklch(46% 0.12 150); }
.dcard-live-status { font-size: 0.8rem; color: var(--ink-2); }
.dcard-live-status strong { color: oklch(46% 0.12 150); }
:root[data-theme="dark"] .dcard-live-date,
:root[data-theme="dark"] .dcard-live-status strong { color: oklch(80% 0.14 150); }
.dcard-live .dcard-go { margin-block-start: 0.2rem; }
.dcard-live--soon { background: oklch(72% 0.15 75 / 0.12); border-color: oklch(72% 0.15 75 / 0.32); }
.dcard-live--soon .dcard-live-date, .dcard-live--soon .dcard-live-status strong { color: oklch(52% 0.13 70); }
:root[data-theme="dark"] .dcard-live--soon .dcard-live-date,
:root[data-theme="dark"] .dcard-live--soon .dcard-live-status strong { color: oklch(82% 0.14 78); }
.dcard-live--ended { background: oklch(from var(--c-on-surface-variant) l c h / 0.08); border-color: var(--line); }
.dcard-live--ended .dcard-live-date, .dcard-live--ended .dcard-live-status strong { color: var(--ink-2); }

/* One-line page footer variant.
   index.html keeps its full landing footer via .sr-section. */
footer.bg-primary.text-white:not(.sr-section) {
  font-size: 0.82rem;
}
footer.bg-primary.text-white.pt-20:not(.sr-section) {
  padding-block-start: 0;
}
footer.bg-primary.text-white:not(.sr-section) > .container.py-8 {
  padding-block: 0.7rem;
}
footer.bg-primary.text-white:not(.sr-section) > .container > .grid {
  display: none;
}
footer.bg-primary.text-white:not(.sr-section) .border-t.border-white\/10 {
  padding-block: 0.7rem;
  gap: 0.75rem;
  border-block-start: 0;
}
footer.bg-primary.text-white:not(.sr-section) .border-t.border-white\/10,
footer.bg-primary.text-white:not(.sr-section) > .container.py-8 {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
footer.bg-primary.text-white:not(.sr-section) .border-t.border-white\/10 > *,
footer.bg-primary.text-white:not(.sr-section) > .container.py-8 > * {
  order: 0;
}
footer.bg-primary.text-white:not(.sr-section) .border-t.border-white\/10 .flex,
footer.bg-primary.text-white:not(.sr-section) > .container.py-8 .flex {
  gap: 1rem;
}
footer.bg-primary.text-white:not(.sr-section) .text-xs {
  font-size: 0.72rem;
}
@media (width < 640px) {
  footer.bg-primary.text-white:not(.sr-section) .border-t.border-white\/10,
  footer.bg-primary.text-white:not(.sr-section) > .container.py-8 {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
}

/* ===================== konu-calis ===================== */
/* konu-calis.html enhancements: progressive material reveal (chips gated by
   per-ders availability), collapsible curriculum sidebar (CSS grid transition,
   localStorage), the "Yapay Zeka ile Özetle" fake-stream panel, and the Geri
   Bildirim native <dialog> + toast. All tokens from the lcard family; theme
   flips come free. JS module: js/otomatik... no — js/konu-calis.js IIFE. */

@property --kc-glow {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
/* Typed length so the sidebar column can actually animate — a plain
   `transition: grid-template-columns` with fr units freezes in Chrome. */
@property --kc-aside-w {
  syntax: '<length>';
  inherits: false;
  initial-value: 360px;
}

/* --- progressive reveal helper --- */
.kc-reveal-anim { animation: kc-rise 0.35s var(--ease-out) both; }
@keyframes kc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- material chips (availability-gated) --- */
.kc-materials__eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-inline: 0.4rem;
  margin: 0.15rem 0 0.6rem;
}
.kc-materials__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.kc-mat {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.85rem;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), --kc-glow 0.3s var(--ease-out);
}
.kc-mat::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: radial-gradient(120% 140% at 50% 0%, oklch(from var(--brand) l c h / calc(var(--kc-glow) * 0.5)) 0%, transparent 70%);
}
.kc-mat:hover {
  --kc-glow: 35%;
  border-color: oklch(from var(--brand) l c h / 0.5);
  background: var(--brand-soft);
  color: var(--brand-ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.kc-mat__ic { font-size: 1.2rem; color: var(--brand); transition: color 0.18s ease; }
.kc-mat:hover .kc-mat__ic { color: var(--brand-ink); }
.kc-mat__count {
  min-inline-size: 1.3rem;
  text-align: center;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
}
/* disabled / empty material — desaturated, no interaction */
.kc-mat.is-empty {
  opacity: 0.5;
  filter: grayscale(0.8);
  cursor: not-allowed;
  pointer-events: none;
}
.kc-mat.is-empty .kc-mat__count { background: var(--surface-2); color: var(--ink-3); }
/* active material — the one whose content is loaded below */
.kc-mat.is-active {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-ink);
  box-shadow: var(--shadow-md);
}
.kc-mat.is-active .kc-mat__ic { color: var(--brand-ink); }
.kc-mat.is-active .kc-mat__count { background: var(--brand); color: #fff; }

/* --- collapsible layout (desktop only) --- */
.kc-aside__toggle { display: none; }   /* hidden on mobile; the aside just stacks */
.kc-aside__rail { display: none; }     /* collapsed-only vertical card; desktop only */
.kc-layout > * { min-inline-size: 0; }  /* allow lesson column content to shrink on mobile */

@media (min-width: 1024px) {
  .kc-layout {
    grid-template-columns: 1fr var(--kc-aside-w);
    transition: --kc-aside-w 0.25s var(--ease-out);
  }
  .kc-layout.is-sidebar-collapsed { --kc-aside-w: 64px; }

  .kc-aside { position: relative; }
  .kc-aside__toggle {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: -1rem;
    transform: translateY(-50%);   /* vertical middle of the sidebar's content-facing edge */
    z-index: 5;
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s var(--ease-out);
  }
  .kc-aside__toggle:hover { background: var(--brand-soft); color: var(--brand-ink); }
  .kc-aside__toggle .material-symbols-outlined { font-size: 1.2rem; transition: transform 0.25s var(--ease-out); }

  .kc-aside__body { transition: opacity 0.2s ease; }

  /* thin vertical "tab" card — shown only when collapsed, whole thing clickable */
  .kc-aside__rail {
    inline-size: 3.5rem;
    min-block-size: 11.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding-block: 1rem;
    margin-inline: auto;
    border: 1px solid oklch(from var(--brand) l c h / 0.22);
    border-radius: 999px;
    background:
      linear-gradient(180deg,
        oklch(from var(--brand) l c h / 0.12),
        transparent 42%),
      var(--surface);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s var(--ease-out);
  }
  .kc-aside__rail:hover {
    border-color: oklch(from var(--brand) l c h / 0.5);
    background: var(--brand-soft);
    box-shadow: var(--shadow-lg);
  }
  .kc-aside__rail-icon {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 0.45rem 1.1rem oklch(from var(--brand) l c h / 0.28);
  }
  .kc-aside__rail-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--ink-2);
    white-space: nowrap;
    transition: color 0.18s ease;
  }
  .kc-aside__rail:hover .kc-aside__rail-text { color: var(--brand-ink); }

  /* collapsed: body hides, the vertical rail card takes over. */
  .kc-layout.is-sidebar-collapsed .kc-aside {
    --kc-rail-static-y: clamp(8.875rem, 15.5vw, 15rem);
    position: relative;
    inset-block-start: auto;
    display: flex;
    justify-content: center;
    align-self: start;
    padding-block-start: var(--kc-rail-static-y);
  }
  .kc-layout.is-sidebar-collapsed .kc-aside__body { display: none; }
  .kc-layout.is-sidebar-collapsed .kc-aside__rail { display: inline-flex; flex-direction: column; }
  .kc-layout.is-sidebar-collapsed .kc-aside__toggle {
    inset-block-start: calc(var(--kc-rail-static-y) + 5.75rem);
    inset-inline-start: calc(50% - 2.25rem);
    transform: translate(-50%, -50%);
    border-color: oklch(from var(--brand) l c h / 0.36);
    background: var(--surface);
    color: var(--brand-ink);
    box-shadow: 0 0.55rem 1.3rem oklch(from var(--brand) l c h / 0.2);
  }
  .kc-layout.is-sidebar-collapsed .kc-aside__toggle:hover {
    background: var(--brand);
    color: #fff;
  }
  .kc-layout.is-sidebar-collapsed .kc-aside__toggle .material-symbols-outlined { transform: rotate(180deg); }
}

/* --- "Yapay Zeka ile Özetle" stream panel --- */
.kc-ai { margin-block-end: 0.5rem; }
.kc-ai__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.18s ease, transform 0.08s ease, box-shadow 0.18s ease;
}
.kc-ai__btn:hover { background: var(--brand-strong); box-shadow: var(--shadow-md); }
.kc-ai__btn:active { transform: translateY(1px); }
.kc-ai__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.kc-ai__btn[aria-busy="true"] { opacity: 0.9; cursor: progress; }
.kc-ai__dots { display: none; align-items: center; gap: 3px; }
.kc-ai__btn[aria-busy="true"] .kc-ai__dots { display: inline-flex; }
.kc-ai__btn[aria-busy="true"] .material-symbols-outlined { display: none; }
/* one-time summary done: stays passive */
.kc-ai__btn.is-done { opacity: 0.7; cursor: default; filter: none; }
.kc-ai__btn.is-done:hover { filter: none; }
.kc-ai__dots i {
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: kc-dot 1s ease-in-out infinite;
}
.kc-ai__dots i:nth-child(2) { animation-delay: 0.15s; }
.kc-ai__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes kc-dot { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.7); } 40% { opacity: 1; transform: scale(1); } }

.kc-ai__out {
  margin-block-start: 1rem;
  padding: 1.1rem 1.35rem;
  border-radius: var(--radius-md, 0.75rem);
  background: var(--brand-soft);
  box-shadow: inset 4px 0 0 var(--brand);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.7;
  max-inline-size: 48rem;
}
.kc-ai__out[hidden] { display: none; }
.kc-ai__cursor {
  display: inline-block;
  inline-size: 0.5ch;
  margin-inline-start: 1px;
  background: var(--brand);
  color: transparent;
  animation: kc-blink 1s step-end infinite;
}
@keyframes kc-blink { 50% { opacity: 0; } }

/* --- Geri Bildirim tab-bar action button --- */
.lesson-tab--action {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  border-block-end: 2px solid transparent;
  background: none;
  color: var(--brand-ink);
  font-weight: 700;
}
.lesson-tab--action:hover { color: var(--brand); }

/* --- feedback modal (native dialog) --- */
.kc-modal {
  margin: auto;
  inline-size: min(34rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.kc-modal::backdrop {
  background: oklch(0% 0 0 / 0.5);
  backdrop-filter: blur(3px);
}
.kc-modal[open] { animation: kc-modal-in 0.2s var(--ease-out); }
@keyframes kc-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.kc-modal__card { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; }
.kc-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kc-modal__title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--ink); }
.kc-modal__close {
  display: grid; place-items: center;
  inline-size: 2rem; block-size: 2rem;
  border: 0; border-radius: 0.5rem;
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.kc-modal__close:hover { background: var(--surface-2); color: var(--ink); }
.kc-modal__radios { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kc-modal__label { font-size: 0.82rem; font-weight: 700; color: var(--ink-2); padding: 0; }
.kc-radio {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border-radius: 0.7rem;
  border: 1.5px solid var(--line);
  background: var(--bg);
  font-size: 0.85rem; font-weight: 600; color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.kc-radio__ic { font-size: 1.1rem; }
.kc-radio input { position: absolute; opacity: 0; pointer-events: none; }
.kc-radio:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.kc-radio:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.kc-modal__textarea {
  inline-size: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 0.92rem;
  resize: vertical;
}
.kc-modal__textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.kc-modal__actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-block-start: 0.4rem; }

/* --- toast --- */
.kc-toast {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: max-content;
  max-inline-size: calc(100vw - 2rem);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.kc-toast[hidden] { display: none; }
.kc-toast.is-visible { opacity: 1; transform: none; }

/* --- mandatory fallbacks (DESIGN.md) --- */
@media (hover: none), (pointer: coarse) {
  .kc-mat:hover { transform: none; box-shadow: none; --kc-glow: 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .kc-layout,
  .kc-aside__body,
  .kc-aside__toggle .material-symbols-outlined,
  .kc-mat,
  .kc-reveal-anim,
  .kc-modal[open],
  .kc-toast,
  .kc-ai__cursor,
  .kc-ai__dots i,
  .exam-ai-dots i,
  .exam-ai-out { transition: none !important; animation: none !important; }
  .kc-ai__cursor { opacity: 1; }
}

/* ==================================================================== */
/* Konu-çalış media viewers — audio / infographic / pdf / interactive / */
/* flashcards. Token-driven, theme-adaptive, replace the lesson-video.  */
/* ==================================================================== */

/* ---- shared success/error tints (local) ---- */
.kc-view { --ok: oklch(58% 0.13 150); --ok-soft: oklch(95% 0.04 150); --no: var(--c-error); }
[data-theme="dark"] .kc-view { --ok: oklch(72% 0.14 150); --ok-soft: oklch(30% 0.05 150); }

/* ---- Audio (podcastler) -------------------------------------------- */
.kc-audio {
  display: flex; gap: 1.25rem; align-items: center;
  padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(135deg, oklch(from var(--brand) 96% .04 h), var(--c-surface-lowest));
}
[data-theme="dark"] .kc-audio { background: linear-gradient(135deg, oklch(from var(--brand) 28% .05 h), var(--c-surface-lowest)); }
.kc-audio__art {
  flex: 0 0 auto; inline-size: 5.5rem; block-size: 5.5rem; border-radius: 1.25rem;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--c-primary), var(--c-primary-dark));
  box-shadow: var(--shadow-md);
}
.kc-audio__art .material-symbols-outlined { font-size: 2.6rem; }
.kc-audio__body { flex: 1; min-inline-size: 0; }
.kc-audio__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); font-weight: 700; margin-block-end: .35rem; }
.kc-audio__title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.12rem; color: var(--ink); margin-block-end: .85rem; line-height: 1.2; }
.kc-audio__player { inline-size: 100%; block-size: 2.5rem; }
.kc-audio__meta { margin-block-start: .7rem; font-size: .8rem; color: var(--ink-2); display: flex; gap: 1.1rem; flex-wrap: wrap; }
.kc-audio__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.kc-audio__meta .material-symbols-outlined { font-size: 1rem; }
@media (max-width: 560px) { .kc-audio { flex-direction: column; align-items: stretch; text-align: center; } .kc-audio__art { margin-inline: auto; } .kc-audio__meta { justify-content: center; } }

/* ---- Infographic (infografikler) ----------------------------------- */
.kc-info { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--c-surface-lowest); }
.kc-info__stage { position: relative; min-block-size: 24rem; max-block-size: 72vh; overflow: auto; display: grid; place-items: center; padding: 1.5rem; background: var(--c-surface-low); }
.kc-info__page { display: none; inline-size: 100%; max-inline-size: 34rem; }
.kc-info__page.is-active { display: block; }
.kc-info__img { inline-size: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); display: block; }
.kc-info__ph {
  inline-size: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .85rem; text-align: center; padding: 2rem;
  color: #fff; background: linear-gradient(150deg, oklch(from var(--brand) calc(l + .05) c h), oklch(from var(--brand) calc(l - .14) c calc(h + 28)));
}
.kc-info__ph .material-symbols-outlined { font-size: 3rem; opacity: .9; }
.kc-info__ph-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.25rem; }
.kc-info__ph-sub { font-size: .85rem; opacity: .85; max-inline-size: 22ch; }
.kc-info__bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .85rem 1rem; border-block-start: 1px solid var(--line); }
.kc-info__cap { font-size: .85rem; color: var(--ink-2); margin-inline-end: auto; }
.kc-info__rail { display: flex; gap: .6rem; overflow-x: auto; padding: .8rem 1rem; border-block-start: 1px solid var(--line); scrollbar-width: thin; }
.kc-info__thumb {
  flex: 0 0 auto; inline-size: 4rem; block-size: 5.3rem; border-radius: .5rem; cursor: pointer;
  border: 2px solid var(--line); background: var(--c-surface-low); color: var(--ink-3);
  display: grid; place-items: center; padding: 0; transition: border-color .2s, transform .2s;
}
.kc-info__thumb .material-symbols-outlined { font-size: 1.5rem; }
.kc-info__thumb:hover { transform: translateY(-2px); }
.kc-info__thumb.is-active { border-color: var(--brand); color: var(--brand); }

/* ---- PDF presentation (sunular) ------------------------------------ */
.kc-pdf { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--c-surface-lowest); }
.kc-pdf__stage { position: relative; aspect-ratio: 16 / 10; background: var(--c-surface-low); }
.kc-pdf__slide {
  position: absolute; inset: 0; display: none; flex-direction: column; justify-content: center;
  gap: 1rem; padding: clamp(1.5rem, 4vw, 3rem); text-align: start;
  background: linear-gradient(150deg, var(--c-surface-lowest), var(--c-surface-low));
}
.kc-pdf__slide.is-active { display: flex; animation: kc-fade .35s var(--ease-out); }
.kc-pdf__kicker { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.kc-pdf__h { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem); line-height: 1.12; color: var(--ink); text-wrap: balance; }
.kc-pdf__list { display: flex; flex-direction: column; gap: .6rem; max-inline-size: 46ch; }
.kc-pdf__list li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-2); font-size: clamp(.9rem, .85rem + .3vw, 1.05rem); }
.kc-pdf__list .material-symbols-outlined { color: var(--brand); font-size: 1.2rem; flex: 0 0 auto; margin-block-start: .1rem; }
.kc-pdf__bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .75rem 1rem; border-block-start: 1px solid var(--line); }
.kc-pdf__counter { font-family: 'JetBrains Mono', monospace; font-size: .85rem; color: var(--ink-2); }
.kc-pdf__btn {
  inline-size: 2.4rem; block-size: 2.4rem; border-radius: .6rem; border: 1px solid var(--line);
  background: var(--c-surface-lowest); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.kc-pdf__btn:hover { background: var(--brand-soft); color: var(--brand-ink); border-color: oklch(from var(--brand) l c h / .4); }
.kc-pdf__btn:disabled { opacity: .4; cursor: not-allowed; }
@keyframes kc-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Interactive module (etkileşimli içerik) ----------------------- */
.imod { display: flex; flex-direction: column; gap: 1.75rem; }
.imod__scorebar {
  position: sticky; inset-block-start: 0; z-index: 5; display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: oklch(from var(--c-surface-lowest) l c h / .92); backdrop-filter: blur(8px);
}
.imod__scorebar-ic { inline-size: 2.4rem; block-size: 2.4rem; border-radius: .7rem; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: 0 0 auto; }
.imod__track { flex: 1; block-size: .55rem; border-radius: 999px; background: var(--c-surface-high); overflow: hidden; }
.imod__bar { block-size: 100%; inline-size: 0; border-radius: 999px; background: linear-gradient(90deg, var(--c-primary), var(--c-primary-dark)); transition: inline-size .5s var(--ease-out); }
.imod__score { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: .85rem; color: var(--brand); white-space: nowrap; }
.imod-sec { border: 1px solid var(--line); border-radius: var(--radius); background: var(--c-surface-lowest); padding: 1.25rem 1.35rem 1.5rem; }
.imod-sec__head { display: flex; align-items: center; gap: .6rem; margin-block-end: .35rem; }
.imod-sec__n { inline-size: 1.8rem; block-size: 1.8rem; border-radius: .5rem; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: .9rem; flex: 0 0 auto; }
.imod-sec__title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.imod-sec__check { color: var(--ok); font-size: 1.4rem; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .3s; margin-inline-start: auto; }
.imod-sec.is-done .imod-sec__check { opacity: 1; transform: scale(1); }
.imod-sec.is-done .imod-sec__title { color: var(--ok); }
.imod-sec__hint { font-size: .82rem; color: var(--ink-3); margin-block-end: 1rem; }

/* tabs */
.imod-tabs__nav { display: flex; gap: .25rem; overflow-x: auto; border-block-end: 1px solid var(--line); scrollbar-width: none; }
.imod-tabs__nav::-webkit-scrollbar { display: none; }
.imod-tab { flex: 0 0 auto; padding: .65rem 1rem; font-weight: 600; font-size: .88rem; color: var(--ink-2); cursor: pointer; white-space: nowrap; border: 0; background: none; border-block-end: 2px solid transparent; margin-block-end: -1px; transition: color .2s, border-color .2s; }
.imod-tab:hover { color: var(--ink); }
.imod-tab.is-active { color: var(--brand); border-block-end-color: var(--brand); }
.imod-panel { display: none; padding-block-start: 1.1rem; }
.imod-panel.is-active { display: block; animation: kc-fade .3s var(--ease-out); }
.imod-panel h4 { font-weight: 800; color: var(--brand); margin-block-end: .4rem; }
.imod-panel p { color: var(--ink-2); line-height: 1.6; margin-block-end: .5rem; }
.imod-note { background: var(--brand-soft); color: var(--brand-ink); border-inline-start: 3px solid var(--brand); border-radius: .5rem; padding: .7rem .85rem; font-size: .85rem; display: flex; gap: .5rem; }
.imod-note .material-symbols-outlined { font-size: 1.1rem; flex: 0 0 auto; }

/* flip cards */
.imod-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.imod-flip { block-size: 10rem; perspective: 1000px; cursor: pointer; background: transparent; border: 0; padding: 0; font: inherit; text-align: inherit; }
.imod-flip__inner { position: relative; inline-size: 100%; block-size: 100%; transform-style: preserve-3d; transition: transform .6s; }
.imod-flip.is-flipped .imod-flip__inner { transform: rotateY(180deg); }
.imod-flip__face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: 1rem; text-align: center; box-shadow: var(--shadow-sm); }
.imod-flip__face--front { background: var(--c-surface-lowest); border: 1px solid oklch(from var(--brand) l c h / .4); color: var(--ink); }
.imod-flip__face--front .material-symbols-outlined { font-size: 2.2rem; color: var(--brand); }
.imod-flip__face--front .imod-flip__t { font-weight: 800; }
.imod-flip__face--front .imod-flip__hint { font-size: .7rem; color: var(--ink-3); }
.imod-flip__face--back { background: linear-gradient(145deg, var(--c-primary), var(--c-primary-dark)); color: #fff; transform: rotateY(180deg); font-size: .85rem; line-height: 1.4; }

/* cloze + sort shared chips */
.imod-pool { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; padding: 1rem; background: var(--c-surface-low); border: 1px solid var(--line); border-radius: var(--radius-sm); min-block-size: 3.5rem; margin-block-end: 1.25rem; }
.imod-chip { user-select: none; cursor: grab; background: var(--c-primary); color: #fff; padding: .5rem .9rem; border-radius: .5rem; font-weight: 700; font-size: .85rem; box-shadow: var(--shadow-sm); transition: opacity .2s; }
.imod-chip:active { cursor: grabbing; }
.imod-chip.is-placed { cursor: default; }
.imod-cloze__text { font-size: 1.05rem; line-height: 2.2; color: var(--ink); }
.imod-drop { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 7rem; block-size: 2.4rem; vertical-align: middle; margin: 0 .25rem; padding: 0 .5rem; border-radius: .4rem; border: 2px dashed var(--c-outline); background: var(--c-surface-low); transition: background .25s, border-color .25s; }
.imod-drop.is-filled { border-style: solid; border-color: transparent; background: var(--ok); color: #fff; font-weight: 700; }
.imod-drop.is-over { border-color: var(--brand); background: var(--brand-soft); }
.imod-shake { animation: imod-shake .45s ease-in-out; }
@keyframes imod-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* true/false sort */
.imod-sort { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.imod-zone { border-radius: var(--radius-sm); border: 2px solid; padding: 1rem; min-block-size: 12rem; display: flex; flex-direction: column; gap: .5rem; }
.imod-zone--true { background: var(--ok-soft); border-color: oklch(from var(--ok) l c h / .4); }
.imod-zone--false { background: oklch(from var(--c-error) l c h / .1); border-color: oklch(from var(--c-error) l c h / .4); }
.imod-zone.is-over { outline: 2px dashed var(--brand); outline-offset: 2px; }
.imod-zone__h { text-align: center; font-weight: 800; padding-block-end: .5rem; border-block-end: 1px solid oklch(from var(--ink) l c h / .12); display: flex; align-items: center; justify-content: center; gap: .4rem; }
.imod-zone--true .imod-zone__h { color: var(--ok); }
.imod-zone--false .imod-zone__h { color: var(--c-error); }
.imod-sort__pool { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-block-start: 1rem; padding: 1rem; background: var(--c-surface-low); border: 1px solid var(--line); border-radius: var(--radius-sm); min-block-size: 4rem; }
.imod-sitem { user-select: none; cursor: grab; background: var(--c-surface-lowest); color: var(--ink); border: 1px solid var(--line); padding: .6rem .8rem; border-radius: .5rem; font-size: .85rem; font-weight: 600; box-shadow: var(--shadow-sm); }
.imod-sitem:active { cursor: grabbing; }
.imod-sitem.is-placed { inline-size: 100%; box-shadow: none; border-inline-start: 4px solid; cursor: default; }
.imod-sitem.placed-true { border-inline-start-color: var(--ok); color: var(--ok); }
.imod-sitem.placed-false { border-inline-start-color: var(--c-error); color: var(--c-error); }

/* slides */
.imod-slides { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--c-surface-lowest); }
.imod-slides__stage { min-block-size: 11rem; display: grid; place-items: center; text-align: center; padding: 2rem 1.5rem; }
.imod-slides__t { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--brand); margin-block-end: .6rem; }
.imod-slides__b { color: var(--ink-2); line-height: 1.6; max-inline-size: 50ch; }
.imod-slides__foot { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; background: var(--c-surface-low); border-block-start: 1px solid var(--line); }
.imod-slides__nav { background: none; border: 0; font-weight: 700; color: var(--brand); cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; }
.imod-slides__nav:disabled { opacity: .3; cursor: not-allowed; }
.imod-slides__nav--done { color: var(--ok); }
.imod-dots { display: flex; gap: .4rem; }
.imod-dot { inline-size: .55rem; block-size: .55rem; border-radius: 999px; background: var(--c-outline); opacity: .5; transition: inline-size .25s, opacity .25s, background .25s; }
.imod-dot.is-active { opacity: 1; inline-size: 1.4rem; background: var(--brand); }

/* scenario */
.imod-scn { background: var(--brand-soft); border: 1px solid oklch(from var(--brand) l c h / .25); border-radius: var(--radius-sm); padding: 1rem 1.15rem; margin-block-end: 1.1rem; }
.imod-scn__h { font-weight: 800; color: var(--brand-ink); margin-block-end: .35rem; display: flex; gap: .4rem; align-items: center; }
.imod-scn__p { color: var(--ink-2); font-style: italic; }
.imod-q { font-weight: 700; color: var(--ink); margin-block-end: .9rem; }
.imod-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.imod-opt { display: flex; align-items: center; gap: .75rem; text-align: start; inline-size: 100%; padding: .85rem 1rem; border-radius: .6rem; border: 2px solid var(--line); background: var(--c-surface-lowest); color: var(--ink-2); font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s; }
.imod-opt:hover { border-color: oklch(from var(--brand) l c h / .5); }
.imod-opt__k { inline-size: 2rem; block-size: 2rem; flex: 0 0 auto; border-radius: 999px; background: var(--c-surface-high); color: var(--ink-2); display: grid; place-items: center; font-weight: 800; }
.imod-opt.is-correct { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.imod-opt.is-correct .imod-opt__k { background: var(--ok); color: #fff; }
.imod-opt.is-wrong { background: oklch(from var(--c-error) l c h / .1); border-color: var(--c-error); }
.imod-opt:disabled { cursor: not-allowed; }
.imod-feedback { margin-block-start: 1rem; padding: .85rem 1rem; border-radius: .6rem; background: var(--ok-soft); border: 1px solid oklch(from var(--ok) l c h / .4); color: var(--ok); font-size: .9rem; display: none; }
.imod-feedback.is-shown { display: block; animation: kc-fade .3s var(--ease-out); }
@media (max-width: 560px) { .imod-sort, .imod-opts { grid-template-columns: 1fr; } }

/* completion overlay */
.imod-done { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: oklch(0% 0 0 / .5); backdrop-filter: blur(5px); }
.imod-done.is-open { display: flex; animation: kc-fade .3s var(--ease-out); }
.imod-done__card { background: var(--c-surface-lowest); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; max-inline-size: 22rem; inline-size: 100%; text-align: center; box-shadow: var(--shadow-md); }
.imod-done__ic { inline-size: 4.5rem; block-size: 4.5rem; border-radius: 999px; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; margin: 0 auto 1rem; }
.imod-done__ic .material-symbols-outlined { font-size: 2.4rem; }
.imod-done__score { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 2rem; color: var(--brand); margin: .5rem 0 1.25rem; }

/* ---- Flashcards (bilgi kartları) ----------------------------------- */
.flash { display: flex; flex-direction: column; gap: 1.25rem; max-inline-size: 34rem; margin-inline: auto; inline-size: 100%; }
.flash__progress { display: flex; flex-direction: column; gap: .45rem; }
.flash__pinfo { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.flash__track { position: relative; inline-size: 100%; block-size: .6rem; border-radius: 999px; background: var(--c-surface-high); cursor: pointer; }
.flash__bar { block-size: 100%; inline-size: 10%; border-radius: 999px; background: linear-gradient(90deg, var(--c-primary), var(--c-primary-dark)); transition: inline-size .4s ease; }
.flash__thumb { position: absolute; inset-block-start: 50%; inline-size: 1.1rem; block-size: 1.1rem; border-radius: 999px; background: var(--c-primary); border: 2px solid var(--c-surface-lowest); transform: translate(-50%, -50%); cursor: grab; box-shadow: var(--shadow-sm); }
.flash__thumb:active { cursor: grabbing; }
.flash__meta { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; }
.flash__scene { position: relative; perspective: 1400px; inline-size: 100%; }
/* stacked-deck backing peeking below the active card */
.flash__scene::before, .flash__scene::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); background: var(--c-surface-low); border: 1px solid var(--line); z-index: 0; }
.flash__scene::before { transform: translateY(9px) scale(.965); opacity: .7; }
.flash__scene::after { transform: translateY(18px) scale(.93); opacity: .4; }
.flash__swiper { position: relative; z-index: 1; touch-action: pan-y; user-select: none; -webkit-user-select: none; will-change: transform, opacity; }
.flash__card { position: relative; inline-size: 100%; min-block-size: 18rem; transform-style: preserve-3d; transition: transform .4s cubic-bezier(.2,.8,.2,1); cursor: pointer; }
.flash__card.is-flipped { transform: rotateY(180deg); }
.flash__face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius); padding: 1.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; text-align: center; box-shadow: var(--shadow-md); overflow: auto; }
.flash__face::before { font-family: 'JetBrains Mono', monospace; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.flash__face--front { background: var(--c-surface-lowest); border: 1px solid var(--line); color: var(--ink); font-size: 1.15rem; font-weight: 600; line-height: 1.5; }
.flash__face--front::before { content: "Soru"; color: var(--brand); }
.flash__face--back { background: linear-gradient(160deg, var(--ok-soft), var(--c-surface-lowest)); border: 1px solid oklch(from var(--ok) l c h / .45); color: var(--ink); font-size: 1.2rem; font-weight: 700; line-height: 1.5; transform: rotateY(180deg); }
.flash__face--back::before { content: "Cevap"; color: var(--ok); }
.flash__card.is-read .flash__face--front { border-color: var(--brand); }
.flash__badge { position: absolute; inset-block-start: .9rem; inset-inline-end: 1rem; font-size: .68rem; font-weight: 700; background: var(--brand); color: #fff; padding: .2rem .6rem; border-radius: 999px; display: none; }
.flash__card.is-read .flash__face--front .flash__badge { display: inline-block; }
.flash__tip { text-align: center; font-size: .82rem; color: var(--ink-3); }
.flash__nav { display: flex; gap: .75rem; }
.flash__btn { flex: 1; padding: .85rem; border-radius: .75rem; border: 1px solid var(--line); background: var(--c-surface-lowest); color: var(--ink); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; transition: background .2s, transform .15s, color .2s; }
.flash__btn:hover { background: var(--brand-soft); transform: translateY(-2px); }
.flash__btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.flash__btn--help { flex: 0 0 auto; inline-size: 3rem; color: var(--brand); }
.flash__btn--next { background: var(--c-primary); color: #fff; border-color: transparent; }
.flash__btn--next:hover { background: var(--c-primary-dark); }
.flash__btn--help.is-restart { background: var(--ok); color: #fff; border-color: transparent; inline-size: auto; padding-inline: 1rem; }

@media (hover: none), (pointer: coarse) {
  .kc-info__thumb:hover, .kc-pdf__btn:hover, .flash__btn:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .imod-flip__inner, .flash__card, .flash__swiper, .imod__bar, .flash__bar,
  .imod-panel, .imod-feedback, .kc-pdf__slide, .imod-done, .imod-sec__check { transition: none !important; animation: none !important; }
  .imod-shake { animation: none !important; }
}

/* click-to-place selection + flashcards help modal */
.imod-chip.is-sel, .imod-sitem.is-sel { outline: 2px solid var(--brand); outline-offset: 2px; }
.flash-modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: oklch(0% 0 0 / .45); backdrop-filter: blur(4px); }
.flash-modal.is-open { display: flex; animation: kc-fade .25s var(--ease-out); }
.flash-modal__box { background: var(--c-surface-lowest); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; max-inline-size: 24rem; inline-size: 100%; box-shadow: var(--shadow-md); }
.flash-modal__box h3 { font-family: 'Manrope', sans-serif; font-weight: 800; color: var(--ink); margin-block-end: 1rem; text-align: center; }
.flash-modal__box ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; margin-block-end: 1.25rem; padding: 0; }
.flash-modal__box li { font-size: .9rem; color: var(--ink-2); display: flex; gap: .5rem; align-items: center; }
.flash-modal__box li .material-symbols-outlined { font-size: 1.1rem; color: var(--brand); }

/* index.html exams rail — fixed-width lcards, centered grid (partial rows stay centered, no left-align/over-stretch) */
#exams-rail-track {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 19rem));
  justify-content: center;
}
/* center the card content (badge, title, kurum, rating, buttons) */
#exams-rail-track .lcard__body { align-items: center; text-align: center; gap: .5rem; }
#exams-rail-track .lcard__thumb-badge { align-self: center; }
#exams-rail-track .lcard__tag { align-self: center; }
#exams-rail-track .lcard__meta { justify-content: center; }
#exams-rail-track .lcard__actions { align-self: center; justify-content: center; inline-size: 100%; }
#exams-rail-track .lcard__actions .lbtn { flex: 1; justify-content: center; }
/* meta-chip row (soru / deneme counts) */
.lcard__chips { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.lcard__chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; color: var(--ink-2); background: var(--c-surface-low); border: 1px solid var(--line); padding: .25rem .6rem; border-radius: 999px; }
.lcard__chip .material-symbols-outlined { font-size: .95rem; color: var(--brand); }

/* ============================================================ */
/* UI/UX polish pass — anchor offset, button tactility,         */
/* scroll-reveal for cards (progressive enhancement).           */
/* ============================================================ */

/* in-page anchor jumps clear the sticky header */
html { scroll-padding-block-start: 5.5rem; }

/* tactile lift on primary buttons (press settles back) */
.lbtn { transition: transform .18s var(--ease-out), background .2s, box-shadow .2s, border-color .2s; }
.lbtn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px -12px oklch(from var(--c-primary) l c h / .6); }
.lbtn:active { transform: translateY(0); }
@media (hover: none), (pointer: coarse) { .lbtn:hover { transform: none; box-shadow: none; } }

/* scroll-reveal for cards — uses the independent `translate` property so each
   component's hover `transform` keeps working; only when supported + motion allowed.
   Cards already in view on load settle to their end (visible) state — no flash. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .lcard, .dcard, .review-card {
      animation: card-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 16%;
    }
    /* the marquee animates its own track — don't reveal-animate cards inside it */
    .review-marquee .review-card { animation: none; translate: none; opacity: 1; }
    @keyframes card-reveal {
      from { opacity: 0; translate: 0 22px; }
      to   { opacity: 1; translate: 0 0; }
    }
  }
}

/* reviews marquee — continuous auto-scroll to the left, pause on hover/focus */
.review-marquee { overflow: hidden; padding-block: .5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.review-marquee__track { display: flex; gap: 1.5rem; inline-size: max-content; animation: review-marquee 70s linear infinite; }
.review-marquee:hover .review-marquee__track, .review-marquee:focus-within .review-marquee__track { animation-play-state: paused; }
.review-marquee .review-card { flex: 0 0 21rem; inline-size: 21rem; }
@keyframes review-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .review-marquee .review-card { flex-basis: 17rem; inline-size: 17rem; } }
@media (prefers-reduced-motion: reduce) {
  .review-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .review-marquee__track { animation: none; }
}

/* ============================================================ */
/* Mobile hardening — applies on every page via the shared bundle */
/* ============================================================ */
/* stop mobile browsers from auto-inflating text; clip stray horizontal
   overflow (overflow:clip keeps the sticky header working, unlike hidden). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
/* never let an oversized media element push the page wider than the screen */
img, svg, video { max-inline-size: 100%; }
/* iOS Safari zooms in when a focused control's font-size is < 16px — on phones
   bump form controls to 16px so focusing a filter/search/field never zooms. */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
}

/* dark mode: "İncele" button defaults to its hover fill (no glaring white base) */
:root[data-theme="dark"] .lbtn--incele { background: var(--brand-soft); }

/* ===== breadcrumb trail (Konum) — clickable path on sequenced pages ===== */
.crumbs-nav { padding-block: 1.1rem 0; }
.crumbs { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; font-size: .82rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.crumbs::-webkit-scrollbar { display: none; }
.crumbs li { display: inline-flex; align-items: center; white-space: nowrap; }
.crumbs li + li::before { content: "\203A"; margin-inline: .4rem; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; transition: color .15s ease; }
.crumbs a:hover { color: var(--brand); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ===== otomatik-deneme — single-row preview + compact layout (fits without scroll) ===== */
.od-stats--row { grid-template-columns: 1fr; gap: 1rem; }
@container od (width > 34rem) { .od-stats--row { grid-template-columns: repeat(3, 1fr); } }
.od-stats--row .od-stat { padding: 0.9rem 1rem; justify-content: center; }
.od-stats--row .od-stat-name { font-size: 1.05rem; }
.od { gap: 0.9rem; }
.od-panel { padding: 1.1rem 1.25rem; }
.od-stephead { margin-block-end: 0.75rem; }
.od-crit { padding: 0.7rem 0.95rem; }
/* tighter step-3 confirm panel so it fits without scrolling */
.od-confirm { gap: 0.35rem; padding: 0.85rem 1.1rem; }
.od-confirm-ic { inline-size: 2.3rem; block-size: 2.3rem; margin-block-end: 0; }
.od-confirm-ic .material-symbols-outlined { font-size: 1.35rem; }
.od-confirm-q { font-size: 1.02rem; }
.od-confirm-meta { font-size: 0.82rem; }
.od-confirm-actions { margin-block-start: 0.3rem; }

/* soru-coz-sec — Ders → Ünite → Bölüm share one row and reveal progressively */
@media (min-width: 640px) {
  .ssec-fields { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .ssec-fields .ssec-field { flex: 1 1 12rem; min-inline-size: 0; }
}
.ssec-field[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ssec-field.is-revealed { animation: ssec-reveal .25s var(--ease-out); }
}
@keyframes ssec-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* ===== deneme.html exam tweaks ===== */
/* "made by AI" header inside the analiz output */
.exam-ai-head { display: flex; align-items: center; gap: .4rem; font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin-block-end: .55rem; padding-block-end: .45rem; border-block-end: 1px solid oklch(from var(--brand) l c h / .25); }
.exam-ai-head .material-symbols-outlined { font-size: 1rem; }
/* keep the floating WhatsApp + theme-toggle buttons from covering content */
[data-deneme] { padding-block-end: 5rem; }
/* collapsible question-map (right) sidebar */
.exam-side-toggle { display: none; }
@media (min-width: 1024px) {
  .exam-side-toggle { display: inline-grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: .6rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
  .exam-side-toggle:hover { background: var(--brand-soft); color: var(--brand-ink); border-color: oklch(from var(--brand) l c h / .4); }
  .exam-side-toggle.is-active { background: var(--brand); color: #fff; border-color: transparent; }
  .exam-shell.is-side-collapsed { grid-template-columns: 1fr; }
  .exam-shell.is-side-collapsed .exam-side { display: none; }
}

/* ===================== konu-table ===================== */
/* "Konu Çalış" lesson list on package-list2.html. A redesign of the legacy
   raw <table>: a card with expandable per-ders rows (native <details>) that
   reveal the ünite/bölüm tree; counts on the right; total footer. Tokens only. */
.kct-card {
  max-inline-size: 64rem;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: clip;
}
.kct-head {
  padding: 1.5rem 1.5rem 1.25rem;
  border-block-end: 1px solid var(--line);
  background: linear-gradient(160deg in oklch, var(--brand-soft), var(--surface));
}
.kct-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(1.3rem, 3vw, 1.6rem); color: var(--ink); }
.kct-hint {
  margin-block-start: 0.5rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; color: var(--ink-2); text-wrap: pretty;
}
.kct-hint .material-symbols-outlined { font-size: 1.15rem; color: var(--brand); flex-shrink: 0; }

.kct-row {
  display: grid;
  grid-template-columns: 1fr 5.5rem 6.5rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.25rem;
}
.kct-row--head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); background: var(--bg); border-block-end: 1px solid var(--line);
}
.kct-col-num { text-align: center; font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.kct-col-num--accent { color: var(--brand-ink); font-weight: 700; }
.kct-col-ders { display: inline-flex; align-items: center; gap: 0.55rem; min-inline-size: 0; }

.kct-ders { border-block-end: 1px solid var(--line); }
.kct-ders > summary { cursor: pointer; list-style: none; transition: background 0.15s ease; }
.kct-ders > summary::-webkit-details-marker { display: none; }
.kct-ders > summary:hover { background: var(--brand-soft); }
.kct-ders > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.kct-chev { font-size: 1.2rem; color: var(--ink-3); flex-shrink: 0; transition: transform 0.2s var(--ease-out); }
.kct-ders[open] > summary .kct-chev { transform: rotate(90deg); }
.kct-ders-ic { font-size: 1.25rem; color: var(--brand); flex-shrink: 0; }
.kct-ders-link { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 0.88rem; color: var(--ink); text-decoration: none; line-height: 1.25; }
.kct-ders-link:hover { color: var(--brand); text-decoration: underline; }

/* konu-calis-design4 in-page "Konulara Çalış" table: leaf rows omit the chevron,
   so pad to keep the header alignment; compact PDF download button per row. */
[data-kc-konu-table] .kct-row--leaf .kct-col-ders { padding-inline-start: 1.8rem; }
[data-kc-konu-table] .kct-ders-link { cursor: pointer; }
.kct-pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  block-size: 2rem;
  padding-inline: 0.7rem;
  border-radius: 0.5rem;
  color: var(--brand);
  border: 1px solid var(--line);
  text-decoration: none;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kct-pdf:hover { background: var(--brand-soft); border-color: color-mix(in oklab, var(--brand) 35%, var(--line)); }
.kct-pdf .material-symbols-outlined { font-size: 1.05rem; }

/* leaf ders (no ünite/bölüm) — plain row, chevron hidden for alignment */
.kct-row--leaf { border-block-end: 1px solid var(--line); }
.kct-row--leaf .kct-chev { visibility: hidden; }

/* the ünite / bölüm tree */
.kct-tree { list-style: none; margin: 0; padding: 0.3rem 1.25rem 0.9rem 3.55rem; background: var(--bg); }
.kct-tree ul { list-style: none; margin: 0; padding-inline-start: 1.5rem; }
.kct-unite, .kct-konu { display: flex; align-items: flex-start; gap: 0.45rem; padding-block: 0.28rem; line-height: 1.35; text-wrap: pretty; }
.kct-unite { color: var(--ink); font-weight: 600; font-size: 0.84rem; }
.kct-konu { color: var(--ink-2); font-weight: 400; font-size: 0.82rem; }
.kct-unite > .material-symbols-outlined { font-size: 1.05rem; color: var(--brand); flex-shrink: 0; margin-block-start: 0.05rem; }
.kct-konu > .material-symbols-outlined { font-size: 1rem; color: var(--ink-3); flex-shrink: 0; margin-block-start: 0.05rem; }

.kct-row--total { background: var(--brand-soft); color: var(--brand-ink); }
.kct-row--total .kct-col-ders { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 0.92rem; padding-inline-start: 1.8rem; }
.kct-row--total .kct-col-num { color: var(--brand-ink); font-weight: 800; }

@media (max-width: 600px) {
  .kct-row { grid-template-columns: 1fr 3.2rem 3.2rem; padding-inline: 0.85rem; gap: 0.25rem; }
  .kct-row--head { font-size: 0.58rem; }
  .kct-tree { padding-inline-start: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kct-chev, .kct-ders > summary { transition: none !important; }
}

/* ===================== member-profile-x ===================== */
/* Redesigned member-profile.html: a brand banner-hero with an overlapping
   avatar + premium badge + actions, then grouped key/value info cards.
   (Alternative to the legacy single po-card grid.) Tokens only. */
.mpx { display: flex; flex-direction: column; gap: 1.5rem; }
/* member-profile: the "Profil Bilgilerim" h1 sits inline at the top of the
   content column, so drop the sidebar to line its top up with the banner card
   (not the title text). Offset = h1 block height at lg:
   mt-1 .25rem + text-3xl line-height 2.25rem + mb-5 1.25rem = 3.75rem. */
@media (min-width: 1024px) {
  body.page-member-profile .profile-sidebar { margin-block-start: 3.75rem; }
}
.mpx-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-ink); }

.mpx-banner {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: clip;
}
.mpx-banner-bg {
  block-size: 6rem;
  background: linear-gradient(135deg in oklch, var(--brand), var(--brand-strong));
}
/* Only the avatar overlaps the blue strip; the name/contact sit BELOW it on the
   card surface so the text never fights the avatar or sits on the low-contrast blue. */
.mpx-id {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  padding: 0.85rem 1.5rem 0;
}
.mpx-avatar {
  position: relative;
  margin-block-start: -3rem;   /* only the avatar overlaps the blue strip */
  inline-size: 6rem;
  block-size: 6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-ink);
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
  text-decoration: none;
}
.mpx-avatar > .material-symbols-outlined { font-size: 3rem; }
.mpx-avatar-edit {
  position: absolute;
  inset-block-end: 0; inset-inline-end: 0;
  inline-size: 2rem; block-size: 2rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  border: 2px solid var(--surface);
  transition: transform 0.18s var(--ease-out);
}
.mpx-avatar-edit .material-symbols-outlined { font-size: 1.1rem; }
.mpx-avatar:hover .mpx-avatar-edit { transform: scale(1.1); }
.mpx-id-text { padding-block-end: 0.4rem; min-inline-size: 0; }
.mpx-id-name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--ink);
  line-height: 1.15;
}
.mpx-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-ink);
  font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700;
}
.mpx-badge .material-symbols-outlined { font-size: 1rem; font-variation-settings: 'FILL' 1; }
.mpx-id-sub { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; margin-block-start: 0.4rem; }
.mpx-id-sub > span { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--ink-2); }
.mpx-id-sub .material-symbols-outlined { font-size: 1.05rem; color: var(--brand); }

.mpx-actions {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  padding: 1.25rem 1.5rem 1.5rem;
}
.mpx-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 0.85rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.mpx-btn .material-symbols-outlined { font-size: 1.15rem; color: var(--brand); }
.mpx-btn:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.mpx-btn:hover .material-symbols-outlined { color: var(--brand-ink); }
.mpx-btn--danger { color: #ba1a1a; }
.mpx-btn--danger .material-symbols-outlined { color: #ba1a1a; }
.mpx-btn--danger:hover { border-color: #ba1a1a; background: oklch(from #ba1a1a l c h / 0.08); color: #ba1a1a; }
.mpx-btn--danger:hover .material-symbols-outlined { color: #ba1a1a; }

.mpx-groups { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .mpx-groups { grid-template-columns: 1fr 1fr; } }
.mpx-group {
  padding: 1.4rem 1.5rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.mpx-group-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--ink);
  padding-block-end: 0.9rem; margin-block-end: 0.6rem;
  border-block-end: 1px solid var(--line);
}
.mpx-group-title .material-symbols-outlined { font-size: 1.3rem; color: var(--brand); }
.mpx-fields { margin: 0; display: flex; flex-direction: column; }
.mpx-field {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  padding-block: 0.7rem;
  border-block-end: 1px dashed var(--line);
}
.mpx-field:last-child { border-block-end: 0; }
.mpx-field dt { font-size: 0.82rem; color: var(--ink-3); font-weight: 500; }
.mpx-field dd { margin: 0; font-size: 0.9rem; color: var(--ink); font-weight: 600; text-align: end; }
.mpx-field dd .material-symbols-outlined { font-size: 1.1rem; color: var(--brand); vertical-align: text-bottom; }
.mpx-pill {
  display: inline-flex; align-items: center;
  padding: 0.15rem 0.6rem; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 0.75rem; font-weight: 700;
}

@media (max-width: 560px) {
  .mpx-id { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .mpx-id-name { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mpx-avatar-edit, .mpx-btn { transition: none !important; }
}

/* ===================== css\components\ai-chat.css ===================== */
/* ai-chat.css — the single floating button site-wide: a (simulated) AI chat
   assistant. FAB at the block/inline end; clicking toggles a panel that greets,
   takes a question, shows "Düşünüyor…", then streams a canned Turkish answer
   word-by-word (same fake-AI feel as the exam / konu-çalış streams). Tokens
   only, theme-adaptive. Selectors: [data-ai-chat] root, [data-ai-chat-open],
   [data-ai-chat-close], [data-ai-chat-panel], [data-ai-chat-body],
   [data-ai-chat-form], [data-ai-chat-input]. Paired JS: ai-chat.js. */
.ai-chat {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: 60;
}
.ai-chat-fab {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: linear-gradient(145deg in oklch, var(--c-primary), var(--c-primary-dark));
  color: #fff;
  box-shadow: 0 14px 30px -12px oklch(from var(--c-primary) l c h / 0.6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ai-chat-fab .material-symbols-outlined { font-size: 1.6rem; }
.ai-chat-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 18px 38px -14px oklch(from var(--c-primary) l c h / 0.7); }

.ai-chat-panel {
  position: absolute;
  inset-block-end: calc(100% + 0.85rem);
  inset-inline-end: 0;
  inline-size: min(23rem, calc(100vw - 3rem));
  block-size: min(31rem, calc(100dvh - 7rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.1rem;
  background: var(--c-surface-lowest);
  border: 1px solid var(--c-outline-variant);
  box-shadow: 0 24px 60px -24px oklch(0% 0 0 / 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.7,.2,1), visibility .22s;
}
.ai-chat.is-open .ai-chat-panel { opacity: 1; visibility: visible; transform: none; }

.ai-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(145deg in oklch, var(--c-primary), var(--c-primary-dark));
  color: #fff;
}
.ai-chat-head__title { display: inline-flex; align-items: center; gap: 0.45rem; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 0.98rem; }
.ai-chat-head__title .material-symbols-outlined { font-size: 1.2rem; }
.ai-chat-close { border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 0.6rem; transition: background .2s ease; }
.ai-chat-close:hover { background: oklch(from #fff l c h / 0.18); }

.ai-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--c-surface);
}
.ai-chat-msg {
  max-inline-size: 85%;
  padding: 0.6rem 0.85rem;
  border-radius: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-chat-msg--ai { align-self: flex-start; background: var(--c-surface-container); color: var(--c-on-surface); border-end-start-radius: 0.3rem; }
.ai-chat-msg--user { align-self: flex-end; background: var(--c-primary); color: #fff; border-end-end-radius: 0.3rem; }
.ai-chat-msg--typing { color: var(--c-on-surface-variant); font-style: italic; }

.ai-chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-block-start: 1px solid var(--c-outline-variant);
  background: var(--c-surface-lowest);
}
.ai-chat-input {
  flex: 1;
  min-inline-size: 0;
  padding: 0.6rem 0.85rem;
  border-radius: 0.75rem;
  border: 1px solid var(--c-outline-variant);
  background: var(--c-surface);
  color: var(--c-on-surface);
  font: inherit;
  font-size: 0.9rem;
}
.ai-chat-input:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; border-color: var(--c-primary); }
.ai-chat-send { flex-shrink: 0; inline-size: 2.6rem; border: 0; border-radius: 0.75rem; background: var(--c-primary); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s ease; }
.ai-chat-send:hover { background: var(--c-primary-dark); }
.ai-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

:root[data-theme="dark"] .ai-chat-panel { background: var(--c-surface-low); border-color: oklch(from white l c h / 0.1); }
:root[data-theme="dark"] .ai-chat-msg--ai { background: var(--c-surface-high); }

@media (hover: none), (pointer: coarse) {
  .ai-chat-fab:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-chat-fab, .ai-chat-panel { transition: none; }
}

/* ===================== css\components\learner-reviews.css ===================== */
/* learner-reviews.css — "Kullanıcı Yorumları" ratings + reviews feed (LinkedIn-
   Learning-style): average rating + stars, 5→1 star breakdown bars, filter/sort
   pills, review cards (initials avatar + name/role + stars + date + text +
   Yararlı/Bildir), "Daha fazla" button. Static/demo content. Tokens only,
   theme-adaptive. Sits at the bottom of the dashboard profile-content. Prefix .lr-* */
.lr-feed { margin-block-start: 2.5rem; padding-block-start: 2rem; border-block-start: 1px solid var(--line); }
.lr-feed__heading { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--ink); margin: 0 0 1.5rem; }

.lr-meta { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: 1fr; align-items: start; margin-block-end: 1.75rem; }
@media (min-width: 720px) { .lr-meta { grid-template-columns: auto 1fr; } }

.lr-average { font-family: 'Manrope', sans-serif; margin: 0; }
.lr-average b { font-size: 2rem; font-weight: 800; color: var(--ink); }
.lr-average span { font-size: 0.95rem; color: var(--ink-2); font-weight: 500; }
.lr-stars { display: inline-flex; color: var(--brand); line-height: 1; }
.lr-stars .material-symbols-outlined { font-size: 1.3rem; font-variation-settings: 'FILL' 1; }
.lr-stars .is-empty { color: var(--line); }
.lr-count { display: block; margin-block-start: 0.35rem; font-size: 0.8rem; color: var(--ink-2); }

.lr-breakdown { display: flex; flex-direction: column; gap: 0.45rem; min-inline-size: 0; }
.lr-bar-row { display: grid; grid-template-columns: 4.5rem 1fr 2.5rem; align-items: center; gap: 0.75rem; }
.lr-bar-row > span:first-child { font-size: 0.8rem; color: var(--ink-2); }
.lr-bar-row > span:last-child { font-size: 0.8rem; color: var(--ink-2); text-align: end; }
.lr-bar { inline-size: 100%; block-size: 0.9rem; border: 0; border-radius: 999px; background: var(--surface-2); overflow: hidden; appearance: none; -webkit-appearance: none; }
.lr-bar::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
.lr-bar::-webkit-progress-value { background: var(--brand); border-radius: 999px; }
.lr-bar::-moz-progress-bar { background: var(--brand); border-radius: 999px; }

.lr-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block-end: 0.5rem; }
.lr-controls__group { display: inline-flex; align-items: center; gap: 0.5rem; }
.lr-controls__label { font-size: 0.8rem; color: var(--ink-2); }
.lr-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.lr-pill:hover { background: var(--brand-soft); border-color: oklch(from var(--brand) l c h / 0.4); }
.lr-pill .material-symbols-outlined { font-size: 1.1rem; }

.lr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lr-card { padding-block: 1.25rem; border-block-start: 1px solid var(--line); display: grid; gap: 0.55rem; }
.lr-card:first-child { border-block-start: 0; }
.lr-card__person { display: flex; align-items: center; gap: 0.75rem; }
.lr-avatar { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 0.9rem; color: #fff; background: linear-gradient(145deg in oklch, var(--brand), var(--c-primary-dark)); }
.lr-name { font-weight: 700; color: var(--ink); font-size: 0.95rem; line-height: 1.2; }
.lr-role { font-size: 0.8rem; color: var(--ink-2); }
.lr-card__rating { display: flex; align-items: center; gap: 0.75rem; }
.lr-card__rating .material-symbols-outlined { font-size: 1.1rem; }
.lr-date { font-size: 0.78rem; color: var(--ink-2); }
.lr-card__text { font-size: 0.9rem; line-height: 1.6; color: var(--ink); margin: 0; max-inline-size: 70ch; }
.lr-card__actions { display: flex; align-items: center; gap: 1.5rem; margin-block-start: 0.15rem; }
.lr-action { display: inline-flex; align-items: center; gap: 0.35rem; background: transparent; border: 0; padding: 0; color: var(--ink-2); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: color 0.2s ease; }
.lr-action:hover { color: var(--brand); }
.lr-action .material-symbols-outlined { font-size: 1.05rem; }

.lr-morebtn { display: inline-flex; align-items: center; gap: 0.4rem; margin-block-start: 1.25rem; padding: 0.55rem 1.1rem; border-radius: 0.7rem; border: 1px solid var(--line); background: var(--surface); color: var(--brand-ink); font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.lr-morebtn:hover { background: var(--brand-soft); border-color: oklch(from var(--brand) l c h / 0.4); }

:root[data-theme="dark"] .lr-bar { background: var(--c-surface-high); }
:root[data-theme="dark"] .lr-bar::-webkit-progress-bar { background: var(--c-surface-high); }
@media (prefers-reduced-motion: reduce) { .lr-pill, .lr-action, .lr-morebtn { transition: none; } }

/* ===================== css\components\panel-head.css ===================== */
/* On sidebar (profile-shell) pages the centered page-title header must sit
   above the CONTENT column (the 1fr right side) — not the whole page, not the
   sidebar. We select the centered title block that is the immediate previous
   sibling of .profile-shell and, on desktop only (where the 2-col layout
   exists), offset it by the sidebar width + gap so `text-center` centers it
   over the content column. `body` prefix outranks the Tailwind max-w/mx-auto
   utilities on the same element — no !important needed. */
@media (min-width: 1024px) {
  body .text-center:has(+ .profile-shell) {
    max-inline-size: none;
    margin-inline: 0;
    padding-inline-start: calc(18rem + 2rem); /* profile-shell sidebar (18rem) + gap (2rem) */
  }
}

/* ===================== css\components\responsive-fixes.css ===================== */
/* Mobile refinements from the page-by-page responsive audit. */

/* Exam topbar: on narrow phones, wrap + shrink so logo/progress/theme-toggle/
   finish/timer don't overflow the row (deneme / deneme-sistem / deneme-turkiye). */
@media (max-width: 560px) {
  .exam-topbar { flex-wrap: wrap; gap: 0.5rem 0.6rem; padding-inline: 0.85rem; }
  .exam-topbar-right { gap: 0.5rem; }
  .exam-finish-btn { padding-inline: 0.7rem; font-size: 0.8rem; }
}

/* Panel / account sidebar on phones + tablets: the vertical nav used to stack
   above the content and fill the first screen. Turn it into a compact, horizontally
   scrollable tab-strip at the top, so content sits right beneath it. Desktop
   (>=1024px) keeps the vertical sidebar. */
@media (max-width: 1023px) {
  /* minmax(0,1fr) + min-inline-size:0 let the single grid column shrink to the
     viewport: without them the horizontal nav's nowrap pills forced the whole
     profile-shell to ~1011px (massive horizontal overflow on phones). */
  .profile-shell { grid-template-columns: minmax(0, 1fr); }
  .profile-shell > .profile-sidebar, .profile-shell > .profile-content { min-inline-size: 0; }
  .profile-sidebar { position: static; padding: 0.5rem; }
  .profile-sidebar-title { display: none; }
  .profile-nav { flex-direction: row; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding-block-end: 0.15rem; }
  .profile-nav::-webkit-scrollbar { display: none; }
  .profile-nav a { flex-shrink: 0; white-space: nowrap; }
}

/* Long unbreakable values (e.g. email) in member-profile key/value cards. */
.mpx-field dd { overflow-wrap: anywhere; }

/* Guard the 1fr title cell in the dashboard "ld" launcher rows. */
.ld-tt { min-inline-size: 0; }

/* Notifications dropdown on phones: anchored to the bell (which sits mid-right
   in the header cluster) it spilled off the left edge. Make it a full-width
   sheet under the header instead. Relies on .site-header no longer creating a
   containing block (blur moved to ::before), so position:fixed = viewport. */
@media (max-width: 640px) {
  .notif-menu {
    position: fixed;
    inset-block-start: 4.5rem;
    inset-inline: 0.75rem;
    inline-size: auto;
    max-block-size: calc(100dvh - 5.5rem);
    overflow-y: auto;
  }
}

/* ===================== css\components\ders-select.css ===================== */
/* ders-select.css — searchable, scrollable multi-select for large ders lists
   (karışık soru). Scales to 30+ items: type to filter, scroll the capped list,
   "Tümünü seç" (selects the currently filtered items) / "Temizle", live count.
   Tokens only. Selectors: [data-dsel] root, [data-dsel-search], [data-dsel-list],
   .dsel-item, [data-dsel-all]/-none, [data-dsel-count]. Paired JS: ders-select.js. */
.dsel { display: flex; flex-direction: column; gap: 0.6rem; }
.dsel-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dsel-search { position: relative; flex: 1 1 12rem; min-inline-size: 0; }
.dsel-search > .material-symbols-outlined { position: absolute; inset-inline-start: 0.6rem; inset-block-start: 50%; transform: translateY(-50%); color: var(--ink-2); font-size: 1.2rem; pointer-events: none; }
.dsel-search input { inline-size: 100%; padding-block: 0.55rem; padding-inline: 2.2rem 0.75rem; border-radius: 0.7rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.9rem; }
.dsel-search input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.dsel-act { padding: 0.45rem 0.8rem; border-radius: 0.7rem; border: 1px solid var(--line); background: var(--surface); color: var(--brand-ink); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.dsel-act:hover { background: var(--brand-soft); border-color: oklch(from var(--brand) l c h / 0.4); }
.dsel-list { max-block-size: 17rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.4rem; border: 1px solid var(--line); border-radius: 0.8rem; background: var(--surface); }
.dsel-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.6rem; border-radius: 0.55rem; cursor: pointer; font-size: 0.9rem; color: var(--ink); transition: background 0.15s ease; }
.dsel-item:hover { background: var(--brand-soft); }
.dsel-item:has(input:checked) { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.dsel-item input { accent-color: var(--brand); inline-size: 1.05rem; block-size: 1.05rem; flex-shrink: 0; }
.dsel-item[hidden] { display: none; }
.dsel-foot { margin: 0; font-size: 0.8rem; color: var(--ink-2); }
.dsel-foot b { color: var(--brand-ink); }
@media (prefers-reduced-motion: reduce) { .dsel-item, .dsel-act { transition: none; } }

/* ===================== deneme QoL + home no-results (batch) ===================== */
/* "Çözüme oranı" — small pie + text, styled like the Soru ID (no background) */
.exam-question-rate {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 600;
  color: var(--muted, var(--ink)); opacity: 0.7;
  white-space: nowrap; margin-inline-end: 0.4rem;
}
/* tiny pie chart filled to the solve rate (--rate is 0–100) */
.exam-rate-pie {
  inline-size: 0.85rem; block-size: 0.85rem; flex: 0 0 auto;
  border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--rate, 0) * 1%), var(--brand-soft) 0);
}
/* once the topbar takes over, the soru-haritası only clears the topbar (no top gap) */
body.exam-scrolled .exam-side { top: 5.75rem; }
/* compact Bilgi / side cards */
.exam-side-card { padding: 0.85rem 1rem; }
.exam-side-title { margin-block-end: 0.5rem; }
.exam-summary-row { font-size: 0.82rem; }
.exam-summary-row + .exam-summary-row { margin-block-start: 0.15rem; }
/* compact legend — wrap into columns instead of one tall stack */
.exam-legend { display: flex; flex-wrap: wrap; flex-direction: row; gap: 0.22rem 0.7rem; }
.exam-legend-row { font-size: 0.72rem; gap: 0.32rem; }
.exam-legend-swatch { inline-size: 0.62rem; block-size: 0.62rem; }

/* ===== deneme — phone-only layout (desktop/tablet untouched) ===== */
@media (max-width: 640px) {
  /* question cards take (near) full width */
  body [data-deneme] { padding-inline: 0.5rem; }
  .exam-question-card { padding-inline: 1rem; }

  /* meta: number + tag on line 1; rate/id left + action buttons right on line 2 */
  .exam-question-meta { row-gap: 0.4rem; }
  .exam-q-actions { margin-inline-start: 0; inline-size: 100%; gap: 0.35rem; }
  .exam-q-actions .exam-q-action:first-of-type { margin-inline-start: auto; }
  .exam-question-id { margin-inline-end: 0; }

  /* options stick to the left (drop the leading indent) */
  .exam-option { padding-inline-start: 0; }
}

/* home search no-results empty state */
.home-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.5rem; max-inline-size: 30rem; margin: 0 auto 1.5rem; padding: 2.5rem 1.5rem;
  border-radius: var(--radius); border: 1.5px dashed var(--line); background: var(--bg);
}
.home-empty.hidden { display: none; }
.home-empty__ic {
  inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink);
  margin-block-end: 0.25rem;
}
.home-empty__ic .material-symbols-outlined { font-size: 1.75rem; }
.home-empty__title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.home-empty__sub { font-size: 0.88rem; color: var(--ink-2); text-wrap: pretty; }

/* ===================== message expand (mesaj kutusu) ===================== */
.message-row { display: flex; flex-direction: column; }
.message-item {            /* now a <button>: reset + add chevron column */
  inline-size: 100%;
  font: inherit;
  text-align: start;
  cursor: pointer;
  grid-template-columns: auto 1fr auto auto;
}
.message-chevron { color: var(--ink-3); transition: transform 0.2s var(--ease-out); }
.message-item.is-open .message-chevron { transform: rotate(180deg); }
.message-item.is-open { border-end-start-radius: 0; border-end-end-radius: 0; }
.message-full {
  border: 1px solid var(--line);
  border-block-start: 0;
  border-end-start-radius: var(--radius);
  border-end-end-radius: var(--radius);
  background: var(--surface);
  padding: 0 1.25rem 1.1rem;
  animation: message-full-in 0.22s var(--ease-out);
}
.message-full[hidden] { display: none; }
@keyframes message-full-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.message-full__text {
  color: var(--ink-2); font-size: 0.92rem; line-height: 1.6;
  padding-block: 0.9rem; margin-block-end: 0.4rem;
  border-block-start: 1px dashed var(--line);
}
.message-full__reply {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  background: var(--brand); color: #fff; font-weight: 600; font-size: 0.85rem; text-decoration: none;
  transition: background 0.18s ease;
}
.message-full__reply:hover { background: var(--brand-strong); }
.message-full__reply .material-symbols-outlined { font-size: 1.1rem; }
@media (prefers-reduced-motion: reduce) {
  .message-chevron, .message-full { transition: none !important; animation: none !important; }
}

/* ===================== deneme: keep question cards clear of the AI chat button ===================== */
/* The floating AI-chat launcher sits bottom-right; when the question list is
   full-width (single column or side collapsed) the cards ran under it. Reserve
   room on the right so the card ends right where the AI button starts. */
@media (max-width: 1023px) {
  .exam-question-list { padding-inline-end: 4rem; }
}
.exam-shell.is-side-collapsed .exam-question-list { padding-inline-end: 4rem; }
/* phones: cards go full width — drop the AI-button right reservation */
@media (max-width: 640px) {
  .exam-question-list,
  .exam-shell.is-side-collapsed .exam-question-list { padding-inline-end: 0; }
}

/* ===================== konu-calis: içerik chips in one row ===================== */
/* Fit the 7 material chips on a single row; horizontal-scroll when too narrow
   (graceful 2-row fallback isn't needed — the row scrolls on small screens). */
.kc-materials__grid {
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0.4rem;
  margin-block-start: 0.75rem;     /* breathing room above the içerik buttons */
  padding-block: 0.55rem 0.35rem;  /* top room so the hover lift/shadow isn't clipped */
  scrollbar-width: thin;
  scrollbar-color: var(--brand) transparent;
}
.kc-materials__grid::-webkit-scrollbar { height: 6px; }
.kc-materials__grid::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 3px; }
.kc-materials__grid .kc-mat {
  flex-shrink: 0;
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  gap: 0.4rem;
}
.kc-materials__grid .kc-mat__ic { font-size: 1.05rem; }
.kc-materials__grid .kc-mat__label { white-space: nowrap; }

/* ===================== mobile burger menu — branded drawer (all pages) ===================== */
#mobile-menu { background: oklch(0% 0 0 / 0.5); backdrop-filter: blur(3px); }
/* the sliding panel (overrides Tailwind bg-white / w-72 / p-6) */
body #mobile-menu > div {
  inline-size: 17.5rem;
  padding: 1.25rem 0.9rem;
  background: var(--c-surface-lowest);
  border-inline-end: 1px solid oklch(from var(--c-primary) l c h / 0.16);
  border-start-end-radius: 1.4rem;
  border-end-end-radius: 1.4rem;
  box-shadow: 24px 0 60px -22px oklch(0% 0 0 / 0.45);
}
/* subtle brand wash at the top of the panel */
body #mobile-menu > div {
  background-image: linear-gradient(180deg, oklch(from var(--c-primary) l c h / 0.08), transparent 22%);
}
/* header row (logo + close): divider under it */
#mobile-menu > div > .flex:first-child {
  margin-block-end: 1rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--c-outline-variant);
}
#close-mobile-menu {
  inline-size: 2.25rem; block-size: 2.25rem; border-radius: 999px;
  display: grid; place-items: center;
  background: oklch(from var(--c-primary) l c h / 0.1);
  transition: background 0.18s;
}
#close-mobile-menu:hover { background: oklch(from var(--c-primary) l c h / 0.2); }
/* nav links → padded rows with a brand hover pill */
#mobile-menu nav { gap: 0.2rem; }
body #mobile-menu nav > a {
  display: flex; align-items: center; gap: 0.65rem;
  margin: 0; padding: 0.72rem 0.85rem; border-radius: 0.7rem;
  font-weight: 600; font-size: 0.98rem; color: var(--c-on-surface);
  transition: background 0.18s, color 0.18s, transform 0.12s;
}
#mobile-menu nav > a::after {
  content: "\203A";
  margin-inline-start: auto;
  font-size: 1.25rem; font-weight: 700; line-height: 1;
  color: var(--c-outline); opacity: 0.55;
  transition: transform 0.18s, color 0.18s, opacity 0.18s;
}
#mobile-menu nav > a:hover,
#mobile-menu nav > a:focus-visible {
  background: oklch(from var(--c-primary) l c h / 0.1);
  color: var(--c-primary);
}
#mobile-menu nav > a:active { transform: scale(0.985); }
#mobile-menu nav > a:hover::after,
#mobile-menu nav > a:focus-visible::after {
  color: var(--c-primary); opacity: 1; transform: translateX(2px);
}
/* logout (last link) — separated + danger tint */
body #mobile-menu nav > a:last-child {
  margin-block-start: 0.5rem; padding-block-start: 1rem;
  border-block-start: 1px solid var(--c-outline-variant);
  border-radius: 0 0 0.7rem 0.7rem;
  color: #ba1a1a;
}
body #mobile-menu nav > a:last-child:hover { background: oklch(from #ba1a1a l c h / 0.1); color: #ba1a1a; }
body #mobile-menu nav > a:last-child::after { content: none; }
@media (prefers-reduced-motion: reduce) {
  #mobile-menu nav > a, #mobile-menu nav > a::after, #close-mobile-menu { transition: none; }
}

/* ===================== konu-calis-design4 — phone layout (desktop untouched) ===================== */
/* section-switcher dropdown: hidden on desktop, replaces the nav on phones */
.profile-nav-select { display: none; }

@media (max-width: 767px) {
  /* panel menu -> a single compact dropdown (was a cluttered pill grid) */
  .profile-nav { display: none; }
  .profile-sidebar { padding: 0; margin-block-end: 0.85rem; }
  .profile-nav-select {
    display: block; inline-size: 100%;
    padding: 0.72rem 2.4rem 0.72rem 0.95rem; border-radius: 0.9rem;
    background-color: color-mix(in oklab, var(--c-primary) 9%, var(--c-surface-lowest));
    border: 1px solid oklch(from var(--c-primary) l c h / 0.32);
    color: var(--c-primary-dark); font-weight: 800; font-size: 0.98rem;
    appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c82b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1.15rem;
  }
  .profile-nav-select:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

  /* Filtrele card — much smaller: drop the head, put label + select on one line */
  .profile-content > div:has(#mf-ders) { padding: 0.8rem; margin-block-end: 0.75rem; }
  .profile-content > div:has(#mf-ders) > .flex { gap: 0.5rem; }
  .profile-content > div:has(#mf-ders) > .flex > div:first-child { display: none; }
  .profile-content > div:has(#mf-ders) .flex-1.min-w-0 { display: flex; align-items: center; gap: 0.7rem; }
  label[for="mf-ders"], label[for="mf-unite"], label[for="mf-konu"] { margin: 0; flex: 0 0 2.9rem; font-size: 0.8rem; }
  #mf-ders, #mf-unite, #mf-konu { flex: 1; min-inline-size: 0; padding-block: 0.5rem; }
  #mf-clear { align-self: flex-end; }

  /* içerik picker: 2-col grid instead of left-right scrolling (already good) */
  .kc-materials__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; overflow: visible; }
  .kc-materials__grid .kc-mat { flex-shrink: 1; padding: 0.6rem 0.7rem; }
  .kc-materials__grid .kc-mat__label { white-space: normal; line-height: 1.2; }
}

/* ===================== scroll-reveal removed (2026-07-01) =====================
   The scroll-driven reveal (sections/cards fading+rising as you scroll) was
   distracting on long pages. Disable it entirely — content shows statically.
   Kept: header shadow-on-scroll and the one-time hero load-in. */
.sr-section > .container > *,
.sr-section:not(:has(> .container)),
.sr-stagger > *,
.sr-parallax,
.stats-item {
  animation: none !important;
  animation-timeline: auto !important;
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
}

/* ===================== learner-reviews select controls + içerikler passive ===================== */
/* native <select> styled to match .lr-pill, with a chevron */
.lr-select {
  appearance: none; -webkit-appearance: none;
  padding-inline-end: 1.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 1rem;
}
.lr-empty { padding-block: 1.5rem; color: var(--ink-2); font-size: 0.9rem; text-align: center; }

/* içerikler grid shown but passive until a Ders is picked */
.kc-materials.is-passive { opacity: 0.85; }
.kc-materials.is-passive .kc-mat { pointer-events: none; }

/* konu-calis: collapse the empty gap between içerikler and reviews while the
   material viewer is hidden (nothing selected yet). Normal spacing returns
   once a material opens (viewer no longer [hidden]). */
.kc-materials:has(+ [data-kc-content][hidden]) { margin-block-end: 0.5rem; }
[data-kc-content][hidden] + .lr-feed { margin-block-start: 0.75rem; }

/* ===================== logged-out top-bar auth buttons ===================== */
.auth-nav { display: inline-flex; align-items: center; gap: 0.5rem; }
.auth-nav__btn {
  display: inline-flex; align-items: center; line-height: 1; white-space: nowrap;
  padding: 0.42rem 0.95rem; border-radius: 999px;
  font-size: 0.85rem; font-weight: 700; text-decoration: none;
  background: var(--c-primary); color: #fff; transition: background 0.18s ease;
}
.auth-nav__btn:hover { background: var(--c-primary-dark); }
.auth-nav__btn--ghost { background: transparent; color: var(--c-primary); border: 1px solid oklch(from var(--c-primary) l c h / 0.4); }
.auth-nav__btn--ghost:hover { background: oklch(from var(--c-primary) l c h / 0.1); }
@media (max-width: 420px) { .auth-nav { gap: 0.35rem; } .auth-nav__btn { padding: 0.38rem 0.7rem; font-size: 0.78rem; } }

/* ============================================================================
   Global micro-interactions (light) — 2026-07
   All selectors use :where() so they sit at 0 specificity: component styles
   always win, these only fill gaps. Motion is reduced-motion-guarded.
   Applies to every page.
   ============================================================================ */

/* Consistent brand focus ring wherever a component defines none (a11y + polish) */
:where(a[href], button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* form fields: soft brand glow on focus (only where a component sets none) */
:where(input, select, textarea):focus-visible {
  box-shadow: 0 0 0 3px oklch(from var(--c-primary) l c h / 0.16);
}

@media (prefers-reduced-motion: no-preference) {
  /* smooth in-page anchor scrolling */
  html { scroll-behavior: smooth; }

  /* smooth base transition for common interactive cards/tiles/rows/buttons */
  :where(.feat-card, .exam-card, .pkg-card, .lcard, .institution-card, .notif-item,
         .lr-card, .kc-mat, .lesson-tab, .lbtn, .mpx-btn, .auth-submit, .exam-q-action,
         .lr-action, .lr-morebtn, .reviews-nav, .act-submit, .kc-ai__btn, .exam-question-card,
         .kc-mat, .mpx-avatar) {
    transition: transform .2s ease, box-shadow .22s ease, background-color .18s ease,
                border-color .18s ease, opacity .18s ease;
  }

  /* hover lift + soft brand shadow for clickable cards */
  :where(.feat-card, .exam-card, .pkg-card, .lcard, .institution-card, .notif-item):hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -16px oklch(from var(--c-primary) l c h / 0.4);
  }

  /* hover lift + shadow for buttons (adds on top of the component colour change) */
  :where(.lbtn, .auth-submit, .mpx-btn, .act-submit, .kc-ai__btn):hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 22px -10px oklch(from var(--c-primary) l c h / 0.55);
  }

  /* header round icon buttons: subtle hover pop */
  :where(.site-header a[class*="rounded-full"], .site-header button[class*="rounded-full"]) {
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
  }
  :where(.site-header a[class*="rounded-full"], .site-header button[class*="rounded-full"]):hover {
    transform: scale(1.08);
  }

  /* tactile press on buttons + a tiny icon squish */
  :where(button, .lbtn, .auth-submit, .mpx-btn, [role="button"]):active { transform: translateY(1px); }
  :where(button, a, label) > .material-symbols-outlined { transition: transform .16s ease; }
  :where(button, a, label):active > .material-symbols-outlined { transform: scale(.9); }
}