/* Akademi LMS — theme.css · sanat yönü "Berrak Öğrenme"
   Açık/gri zemin, indigo + turkuaz, yuvarlak form, bol ilerleme göstergesi.
   Koyu tema: gece mavisi. Ham hex YALNIZCA :root ve tema bloklarındadır. */
/* 1. jetonlar */
:root {
  color-scheme:light;
  --bg:#f7f8fc;
  --bg-soft:#eef1fb;
  --surface:#ffffff;
  --surface-2:#eef1fb;
  --surface-3:#f9fafe;
  --border:#e3e7f3;
  --border-strong:#ccd3e8;
  --text:#131829;
  --text-soft:#5a6480;
  --text-mute:#8b94ad;
  --primary:#4f46e5;
  --primary-hover:#4338ca;
  --primary-soft:#eceafd;
  --primary-contrast:#ffffff;
  --accent:#14b8a6;
  --accent-soft:#d7f5f0;
  --accent-contrast:#04302b;
  --accent-ink:#04302b;
  --success:#12925c;
  --success-soft:#dcf5e9;
  --warning:#f59e0b;
  --warning-soft:#fdf0d5;
  --danger:#dc2f43;
  --danger-soft:#fce4e7;
  --info:#2563eb;
  --info-soft:#e3ecff;
  --ring-track:#e3e7f3;
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgb(19 24 41 / .05), 0 2px 8px rgb(79 70 229 / .06);
  --shadow:0 10px 30px rgb(79 70 229 / .10);
  --shadow-lg:0 24px 60px rgb(79 70 229 / .16);
  --shadow-ring:0 0 0 4px rgb(79 70 229 / .16);
  --font-display:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  /* 1.22 oranlı ölçek, taban 15.5px */
  --step--1:.8125rem;
  --step-0:.96875rem;
  --step-1:1.125rem;
  --step-2:1.3125rem;
  --step-3:clamp(1.4rem, 1.25rem + .6vw, 1.65rem);
  --step-4:clamp(1.65rem, 1.4rem + 1.1vw, 2.1rem);
  --step-5:clamp(2rem, 1.6rem + 1.9vw, 2.75rem);
  --step-6:clamp(2.35rem, 1.75rem + 2.9vw, 3.5rem);
  --container:1200px;
  --header-height:74px;
  --gap:24px;
  --chart-1:#4f46e5;
  --chart-2:#14b8a6;
  --chart-3:#f59e0b;
  --chart-4:#8b5cf6;
  --chart-5:#2563eb;
  --chart-6:#ec4899;
  /* Renkli zemin üstü sabit kontrast (temadan bağımsız) */
  --on-accent:#ffffff;
  --on-accent-soft:rgb(255 255 255 / .88);
  --on-accent-faint:rgb(255 255 255 / .14);
  --scrim:rgb(11 16 32 / .58);
  --scrim-strong:rgb(10 12 24 / .74);
  --stage-bg:#0b1020;
  --mask:#000000;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0b1020;
  --bg-soft:#101731;
  --surface:#131a2e;
  --surface-2:#1a2340;
  --surface-3:#172038;
  --border:#27314f;
  --border-strong:#35426a;
  --text:#eef1fa;
  --text-soft:#a4aecb;
  --text-mute:#7c87a6;
  --primary:#7c74ff;
  --primary-hover:#918bff;
  --primary-soft:#232a55;
  --primary-contrast:#0b1020;
  --accent:#2dd4bf;
  --accent-soft:#12352f;
  --accent-contrast:#04211d;
  --accent-ink:#2dd4bf;
  --success:#34d399;
  --success-soft:#113526;
  --warning:#fbbf24;
  --warning-soft:#3a2c0d;
  --danger:#f87171;
  --danger-soft:#3b1a1f;
  --info:#60a5fa;
  --info-soft:#16264a;
  --ring-track:#27314f;
  --shadow-sm:0 1px 2px rgb(0 0 0 / .34), 0 2px 8px rgb(0 0 0 / .28);
  --shadow:0 12px 34px rgb(0 0 0 / .42);
  --shadow-lg:0 26px 66px rgb(0 0 0 / .52);
  --shadow-ring:0 0 0 4px rgb(124 116 255 / .26);
  --chart-1:#7c74ff;
  --chart-2:#2dd4bf;
  --chart-3:#fbbf24;
  --chart-4:#a78bfa;
  --chart-5:#60a5fa;
  --chart-6:#f472b6;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --bg:#0b1020;
    --bg-soft:#101731;
    --surface:#131a2e;
    --surface-2:#1a2340;
    --surface-3:#172038;
    --border:#27314f;
    --border-strong:#35426a;
    --text:#eef1fa;
    --text-soft:#a4aecb;
    --text-mute:#7c87a6;
    --primary:#7c74ff;
    --primary-hover:#918bff;
    --primary-soft:#232a55;
    --primary-contrast:#0b1020;
    --accent:#2dd4bf;
    --accent-soft:#12352f;
    --accent-contrast:#04211d;
    --accent-ink:#2dd4bf;
    --success:#34d399;
    --success-soft:#113526;
    --warning:#fbbf24;
    --warning-soft:#3a2c0d;
    --danger:#f87171;
    --danger-soft:#3b1a1f;
    --info:#60a5fa;
    --info-soft:#16264a;
    --ring-track:#27314f;
    --shadow-sm:0 1px 2px rgb(0 0 0 / .34), 0 2px 8px rgb(0 0 0 / .28);
    --shadow:0 12px 34px rgb(0 0 0 / .42);
    --shadow-lg:0 26px 66px rgb(0 0 0 / .52);
    --shadow-ring:0 0 0 4px rgb(124 116 255 / .26);
    --chart-1:#7c74ff;
    --chart-2:#2dd4bf;
    --chart-3:#fbbf24;
    --chart-4:#a78bfa;
    --chart-5:#60a5fa;
    --chart-6:#f472b6;
  }
}
/* 2. taban katman */
.brand-mark, .icon-btn,
.avatar, .cat-icon,
.feature-icon, .attachment-icon,
.stat-tile-icon, .lesson-banner-icon,
.step-no, .certificate-seal,
.empty-state .empty-icon, .curriculum-index,
.quiz-no, .quiz-option .letter,
.progress-ring, .player-lesson .tick {
  display:grid; place-items:center; flex:0 0 auto;
}
body { background:var(--bg); color:var(--text); font-size:var(--step-0); line-height:1.7; }
h1, h2, h3, h4, h5 { font-family:var(--font-display); letter-spacing:-.018em; color:var(--text); }
h1 { font-size:var(--step-5); }
h2 { font-size:var(--step-4); }
h3 { font-size:var(--step-3); }
h4 { font-size:var(--step-2); }
h5 { font-size:var(--step-1); }
a { color:var(--primary); }
a:hover { color:var(--primary-hover); }
:focus-visible { outline:3px solid var(--primary); outline-offset:2px; border-radius:6px; }
::selection { background:var(--primary-soft); color:var(--text); }
.muted { color:var(--text-soft); }
.mute { color:var(--text-mute); }
.tiny { font-size:var(--step--1); }
.strong { font-weight:700; }
.nowrap { white-space:nowrap; }
.center { text-align:center; }
.mono { font-family:var(--font-mono); }
.section { padding:clamp(48px, 6vw, 88px) 0; }
.section-tight { padding:clamp(32px, 4vw, 56px) 0; }
.section-soft { background:var(--bg-soft); }
.section-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; }
.section-head h2 { margin-bottom:6px; }
.section-head p { color:var(--text-soft); max-width:62ch; margin:0; }
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:var(--step--1);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:10px;
}
.eyebrow svg { color:var(--accent); }
/* 3. düğmeler */
.btn {
  --btn-bg:var(--primary);
  --btn-fg:var(--primary-contrast);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font:inherit;
  font-weight:650;
  line-height:1.25;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .22s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover { color:var(--btn-fg); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn:active { transform:translateY(0); }
.btn-primary { --btn-bg:var(--primary); --btn-fg:var(--primary-contrast); }
.btn-primary:hover { background:var(--primary-hover); }
.btn-accent { --btn-bg:var(--accent); --btn-fg:var(--accent-contrast); }
.btn-soft { --btn-bg:var(--primary-soft); --btn-fg:var(--primary); border-color:transparent; }
.btn-outline { --btn-bg:transparent; --btn-fg:var(--text); border-color:var(--border-strong); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.btn-ghost { --btn-bg:transparent; --btn-fg:var(--text-soft); }
.btn-ghost:hover { background:var(--surface-2); color:var(--text); box-shadow:none; transform:none; }
.btn-danger { --btn-bg:var(--danger); --btn-fg:var(--on-accent); }
.btn-sm { padding:8px 15px; font-size:var(--step--1); gap:6px; }
.btn-lg { padding:15px 30px; font-size:var(--step-1); }
.btn-block { width:100%; }
.btn[disabled], .btn.is-loading { opacity:.6; pointer-events:none; }
.btn-icon { padding:0; width:42px; height:42px; border-radius:var(--radius-pill); flex:0 0 auto; }
.btn-icon.btn-sm { width:34px; height:34px; }
/* 4. rozet / etiket */
.badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border-radius:var(--radius-pill);
  background:var(--surface-2);
  color:var(--text-soft);
  font-size:var(--step--1);
  font-weight:650;
  line-height:1.5;
  white-space:nowrap;
}
.badge-primary { background:var(--primary-soft); color:var(--primary); }
.badge-accent { background:var(--accent-soft); color:var(--accent-ink); }
.badge-warn { background:var(--warning-soft); color:var(--warning); }
.badge-ok { background:var(--success-soft); color:var(--success); }
.badge-info { background:var(--info-soft); color:var(--info); }
.badge-danger { background:var(--danger-soft); color:var(--danger); }
.chip {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--text-soft);
  font-size:var(--step--1);
  font-weight:600;
  text-decoration:none;
  transition:border-color .18s ease, color .18s ease, background-color .18s ease;
}
.chip:hover, .chip.is-active { border-color:var(--primary); background:var(--primary-soft); color:var(--primary); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.meta-list {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 16px;
  color:var(--text-soft);
  font-size:var(--step--1);
  list-style:none;
  padding:0;
  margin:0;
}
.meta-list li { display:inline-flex; align-items:center; gap:6px; }
.meta-list svg { color:var(--text-mute); flex:0 0 auto; }
/* 5. yıldızlar */
.stars { display:inline-flex; gap:2px; vertical-align:-2px; }
.star { color:var(--border-strong); position:relative; line-height:0; }
.star::before { content:""; position:absolute; inset:0; width:var(--fill, 0%); overflow:hidden; color:var(--warning); }
.rating-inline { display:inline-flex; align-items:center; gap:7px; font-size:var(--step--1); font-weight:650; }
.rating-value { color:var(--warning); }
.rating-count { color:var(--text-mute); font-weight:500; }
/* 6. kartlar */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.panel {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:clamp(20px, 3vw, 30px);
  box-shadow:var(--shadow-sm);
}
.panel + .panel { margin-top:20px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.panel-head h2, .panel-head h3 { margin:0; }
/* 7. ızgara */
.grid { display:grid; gap:var(--gap); }
.grid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width:1080px) {
  .grid-4 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:860px) {
  .grid-3, .grid-4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns:minmax(0, 1fr); }
  :root { --gap:18px; }
}
.row-between { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
/* 8. başlık */
.site-header {
  position:sticky;
  top:0;
  z-index:60;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .25s ease, transform .25s ease;
}
.site-header.is-stuck { box-shadow:var(--shadow-sm); }
.header-inner { display:flex; align-items:center; gap:18px; min-height:var(--header-height); }
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.06rem;
  letter-spacing:-.02em;
  color:var(--text);
  text-decoration:none;
  flex:0 0 auto;
}
.brand:hover { color:var(--text); }
.brand-mark {
  width:38px;
  height:38px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  color:var(--on-accent);
  flex:0 0 auto;
}
.brand-name small {
  display:block;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-mute);
  line-height:1;
  margin-top:2px;
}
.main-nav { display:flex; align-items:center; gap:2px; margin-inline-start:8px; }
.nav-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 13px;
  border-radius:var(--radius-pill);
  color:var(--text-soft);
  font-weight:600;
  font-size:var(--step-0);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .18s ease, color .18s ease;
}
.nav-link:hover { background:var(--surface-2); color:var(--text); }
.nav-link.is-active { color:var(--primary); background:var(--primary-soft); }
.header-tools { display:flex; align-items:center; gap:8px; margin-inline-start:auto; }
.header-search { position:relative; flex:1 1 250px; max-width:320px; min-width:0; }
.header-search input {
  width:100%;
  padding:10px 14px 10px 40px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--surface-3);
  color:var(--text);
  font:inherit;
  font-size:var(--step--1);
}
.header-search input:focus { border-color:var(--primary); box-shadow:var(--shadow-ring); outline:none; }
.header-search svg {
  position:absolute;
  inset-inline-start:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-mute);
  pointer-events:none;
}
.icon-btn {
  width:40px;
  height:40px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--text-soft);
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.icon-btn:hover { color:var(--primary); border-color:var(--primary); }
.theme-toggle .icon-moon { display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display:block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display:none; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display:block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display:none; }
}
.nav-toggle { display:none; }
.avatar-btn {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:5px 14px 5px 5px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--text);
  font:inherit;
  font-weight:650;
  font-size:var(--step--1);
  text-decoration:none;
  transition:border-color .18s ease;
}
.avatar-btn:hover { border-color:var(--primary); color:var(--text); }
/* mobil menü */
@media (max-width:1024px) {
  .main-nav {
    position:fixed;
    inset:var(--header-height) 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    margin:0;
    padding:16px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-lg);
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
    max-height:calc(100dvh - var(--header-height));
    overflow-y:auto;
  }
  .main-nav.is-open { transform:none; opacity:1; visibility:visible; }
  .nav-link { padding:12px 14px; border-radius:var(--radius); }
  .nav-toggle { display:grid; order:9; }
  .header-search { display:none; }
}
@media (max-width:560px) {
  .brand-name span { display:none; }
  .brand-name small { margin-top:0; }
  .avatar-btn .avatar-btn-name { display:none; }
  .avatar-btn { padding:5px; }
}
/* 9. avatarlar */
.avatar {
  width:40px;
  height:40px;
  border-radius:var(--radius-pill);
  background:var(--primary-soft);
  color:var(--primary);
  font-weight:800;
  font-size:.82rem;
  overflow:hidden;
  letter-spacing:.02em;
}
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar-sm { width:32px; height:32px; font-size:.72rem; }
.avatar-lg { width:64px; height:64px; font-size:1.1rem; }
.avatar-xl { width:104px; height:104px; font-size:1.7rem; }
.avatar.tone-1 { background:var(--primary-soft); color:var(--primary); }
.avatar.tone-2 { background:var(--accent-soft); color:var(--accent-ink); }
.avatar.tone-3 { background:var(--warning-soft); color:var(--warning); }
.avatar.tone-4 { background:var(--info-soft); color:var(--info); }
.avatar.tone-5 { background:var(--success-soft); color:var(--success); }
.avatar.tone-6 { background:var(--danger-soft); color:var(--danger); }
/* 10. ilerleme dili */
.progress-bar { position:relative; height:8px; border-radius:var(--radius-pill); background:var(--ring-track); overflow:hidden; }
.progress-bar > span {
  display:block;
  height:100%;
  width:var(--value, 0%);
  border-radius:inherit;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  transition:width .8s cubic-bezier(.2, .8, .3, 1);
}
.progress-bar.is-full > span { background:linear-gradient(90deg, var(--success), var(--accent)); }
.progress-bar.thin { height:5px; }
.progress-ring {
  position:relative;
  width:var(--size, 92px);
  height:var(--size, 92px);
  border-radius:50%;
  background:
    conic-gradient(var(--primary) calc(var(--value, 0) * 1%), var(--ring-track) 0);
  transition:background .9s cubic-bezier(.2, .8, .3, 1);
}
.progress-ring::after { content:""; position:absolute; inset:9px; border-radius:50%; background:var(--surface); }
.progress-ring.is-full { background:conic-gradient(var(--success) calc(var(--value, 0) * 1%), var(--ring-track) 0); }
.progress-ring.on-soft::after { background:var(--bg-soft); }
.progress-ring-value {
  position:relative;
  z-index:1;
  font-family:var(--font-display);
  font-weight:800;
  font-size:.98rem;
  letter-spacing:-.02em;
  line-height:1.1;
  text-align:center;
}
.progress-ring-value small {
  display:block;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-mute);
}
.progress-ring.sm { --size:56px; }
.progress-ring.sm::after { inset:6px; }
.progress-ring.sm .progress-ring-value { font-size:.78rem; }
.progress-ring.sm .progress-ring-value small { display:none; }
.progress-note {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:var(--step--1);
  color:var(--text-soft);
  margin-top:7px;
}
/* rozet — tamamlanan bölüm için */
.merit {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:var(--radius-pill);
  background:var(--success-soft);
  color:var(--success);
  font-weight:700;
  font-size:var(--step--1);
}
.merit svg { color:currentColor; }
@keyframes merit-pop {
  0% { transform:scale(.6); opacity:0; }
  60% { transform:scale(1.12); opacity:1; }
  100% { transform:scale(1); }
}
.merit.is-new { animation:merit-pop .5s cubic-bezier(.2, 1.2, .3, 1) both; }
/* 11. formlar */
.field { margin-bottom:16px; }
.field > label { display:block; margin-bottom:7px; font-weight:650; font-size:var(--step--1); color:var(--text); }
.input, .select,
.textarea, input[type="text"].input,
input[type="email"].input {
  width:100%;
  padding:12px 15px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--text);
  font:inherit;
  font-size:var(--step-0);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.textarea { min-height:128px; resize:vertical; line-height:1.65; }
.select {
  appearance:none;
  padding-inline-end:40px;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  cursor:pointer;
}
.input:focus, .select:focus,
.textarea:focus { outline:none; border-color:var(--primary); box-shadow:var(--shadow-ring); }
.input::placeholder, .textarea::placeholder { color:var(--text-mute); }
.field-help { margin-top:6px; font-size:var(--step--1); color:var(--text-mute); }
.field-error { margin-top:6px; font-size:var(--step--1); color:var(--danger); font-weight:600; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color:var(--danger); }
.check { display:flex; align-items:flex-start; gap:10px; font-size:var(--step--1); color:var(--text-soft); cursor:pointer; line-height:1.55; }
.check input[type="checkbox"], .check input[type="radio"] { width:19px; height:19px; margin:1px 0 0; accent-color:var(--primary); flex:0 0 auto; cursor:pointer; }
.input-inline { display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
.input-inline .input { flex:1 1 200px; }
.form-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 18px; }
.form-grid .full { grid-column:1 / -1; }
@media (max-width:620px) {
  .form-grid { grid-template-columns:minmax(0, 1fr); }
}
/* uyarı kutuları */
.alert {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 18px;
  border-radius:var(--radius);
  background:var(--surface-2);
  color:var(--text);
  font-size:var(--step--1);
  line-height:1.6;
  margin-bottom:18px;
}
.alert svg { flex:0 0 auto; margin-top:2px; }
.alert-ok { background:var(--success-soft); color:var(--success); }
.alert-warn { background:var(--warning-soft); color:var(--warning); }
.alert-danger { background:var(--danger-soft); color:var(--danger); }
.alert-info { background:var(--info-soft); color:var(--info); }
.alert strong { color:inherit; }
/* 12. kahraman */
.hero {
  position:relative;
  padding:clamp(46px, 7vw, 96px) 0 clamp(40px, 5vw, 72px);
  overflow:hidden;
  background:
    radial-gradient(900px 460px at 12% -10%, var(--primary-soft), transparent 62%),
    radial-gradient(700px 420px at 92% 8%, var(--accent-soft), transparent 60%),
    var(--bg);
}
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(currentColor 1px, transparent 1px);
  background-size:26px 26px;
  color:var(--border-strong);
  opacity:.3;
  mask-image:linear-gradient(180deg, transparent, var(--mask) 30%, transparent 92%);
  pointer-events:none;
}
.hero-inner {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  align-items:center;
  gap:clamp(28px, 4vw, 56px);
}
.hero h1 { font-size:var(--step-6); margin-bottom:16px; line-height:1.1; }
.hero h1 em {
  font-style:normal;
  background:linear-gradient(120deg, var(--primary), var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-lead { font-size:var(--step-1); color:var(--text-soft); max-width:54ch; margin-bottom:26px; }
.hero-search {
  display:flex;
  gap:8px;
  padding:8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow);
  max-width:560px;
}
.hero-search .input { border:0; background:transparent; box-shadow:none; padding-inline-start:18px; }
.hero-search .input:focus { box-shadow:none; }
.hero-stats { display:flex; flex-wrap:wrap; gap:12px 30px; margin-top:28px; padding-top:24px; border-top:1px solid var(--border); }
.hero-stat strong {
  display:block;
  font-family:var(--font-display);
  font-size:var(--step-3);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.15;
  color:var(--text);
}
.hero-stat span { font-size:var(--step--1); color:var(--text-soft); }
.hero-media { position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4 / 3; }
.hero-media img { width:100%; height:100%; object-fit:cover; }
.hero-float {
  position:absolute;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  font-size:var(--step--1);
  font-weight:650;
  max-width:240px;
}
.hero-float.tl { top:18px; inset-inline-start:18px; }
.hero-float.br { bottom:18px; inset-inline-end:18px; }
.hero-float small { display:block; font-weight:500; color:var(--text-soft); }
@media (max-width:980px) {
  .hero-inner { grid-template-columns:minmax(0, 1fr); }
  .hero-media { order:-1; aspect-ratio:16 / 9; }
  .hero-float { display:none; }
}
/* 13. kurs kartı */
.course-card {
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .26s ease, border-color .22s ease;
  height:100%;
}
.course-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--primary) 40%, var(--border)); }
.course-cover { position:relative; aspect-ratio:16 / 10; background:var(--surface-2); overflow:hidden; }
.course-cover img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.course-card:hover .course-cover img { transform:scale(1.05); }
.course-badges { position:absolute; top:12px; inset-inline-start:12px; display:flex; flex-wrap:wrap; gap:6px; max-width:calc(100% - 24px); }
.course-badges .badge { background:var(--surface); box-shadow:var(--shadow-sm); }
.course-duration {
  position:absolute;
  bottom:12px;
  inset-inline-end:12px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  background:var(--scrim-strong);
  color:var(--on-accent);
  font-size:var(--step--1);
  font-weight:650;
}
.course-body { display:flex; flex-direction:column; gap:10px; padding:18px 20px 20px; flex:1 1 auto; }
.course-eyebrow {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:var(--step--1);
  color:var(--text-mute);
  font-weight:600;
}
.course-eyebrow a { color:var(--primary); text-decoration:none; }
.course-title { font-size:var(--step-1); line-height:1.35; margin:0; }
.course-title a {
  color:var(--text);
  text-decoration:none;
  background-image:linear-gradient(var(--primary), var(--primary));
  background-size:0 2px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .3s ease, color .2s ease;
}
.course-title a:hover { color:var(--primary); background-size:100% 2px; }
.course-instructor { display:flex; align-items:center; gap:8px; font-size:var(--step--1); color:var(--text-soft); }
.course-instructor a { color:var(--text-soft); text-decoration:none; font-weight:600; }
.course-instructor a:hover { color:var(--primary); }
.course-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.price { display:flex; align-items:baseline; gap:8px; }
.price-now { font-family:var(--font-display); font-size:var(--step-2); font-weight:800; letter-spacing:-.03em; color:var(--text); }
.price-now.is-free { color:var(--accent); }
.price-old { font-size:var(--step--1); color:var(--text-mute); text-decoration:line-through; }
/* 14. kategori / eğitmen kartı */
.cat-card {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  text-decoration:none;
  color:var(--text);
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .24s ease, border-color .22s ease;
  height:100%;
}
.cat-card:hover {
  transform:translateY(-3px);
  color:var(--text);
  border-color:color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow:var(--shadow);
}
.cat-icon {
  width:48px;
  height:48px;
  border-radius:var(--radius);
  background:var(--primary-soft);
  color:var(--primary);
}
.cat-card:nth-child(6n+2) .cat-icon { background:var(--accent-soft); color:var(--accent-ink); }
.cat-card:nth-child(6n+3) .cat-icon { background:var(--warning-soft); color:var(--warning); }
.cat-card:nth-child(6n+4) .cat-icon { background:var(--info-soft); color:var(--info); }
.cat-card:nth-child(6n+5) .cat-icon { background:var(--success-soft); color:var(--success); }
.cat-card h3 { font-size:var(--step-1); margin:0; }
.cat-card p { color:var(--text-soft); font-size:var(--step--1); margin:0; }
.cat-card .cat-count {
  margin-top:auto;
  padding-top:12px;
  font-size:var(--step--1);
  font-weight:700;
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.teacher-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:26px 22px;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  height:100%;
  transition:transform .22s ease, box-shadow .24s ease;
}
.teacher-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.teacher-card h3 { font-size:var(--step-1); margin:0; }
.teacher-card h3 a { color:var(--text); text-decoration:none; }
.teacher-card h3 a:hover { color:var(--primary); }
.teacher-card .teacher-title { font-size:var(--step--1); color:var(--primary); font-weight:650; }
.teacher-card p { font-size:var(--step--1); color:var(--text-soft); margin:0; }
.teacher-stats {
  display:flex;
  gap:18px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--border);
  width:100%;
  justify-content:center;
}
.teacher-stats div { font-size:var(--step--1); color:var(--text-soft); }
.teacher-stats strong { display:block; font-size:var(--step-1); color:var(--text); font-weight:800; }
/* 15. adımlar / özellik */
.step-card {
  position:relative;
  padding:26px 24px 24px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  height:100%;
}
.step-no {
  width:44px;
  height:44px;
  margin-bottom:14px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  color:var(--on-accent);
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.05rem;
}
.step-card h3 { font-size:var(--step-1); margin-bottom:8px; }
.step-card p { color:var(--text-soft); font-size:var(--step--1); margin:0; }
.feature-row { display:flex; align-items:flex-start; gap:14px; padding:16px 0; }
.feature-row + .feature-row { border-top:1px solid var(--border); }
.feature-icon {
  width:40px;
  height:40px;
  border-radius:12px;
  background:var(--primary-soft);
  color:var(--primary);
  flex:0 0 auto;
}
.feature-row h4 { font-size:var(--step-0); margin-bottom:3px; }
.feature-row p { font-size:var(--step--1); color:var(--text-soft); margin:0; }
/* 16. müfredat akordeonu */
.curriculum { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); }
.curriculum-section + .curriculum-section { border-top:1px solid var(--border); }
.curriculum-trigger {
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:16px 20px;
  border:0;
  background:var(--surface-3);
  color:var(--text);
  font:inherit;
  text-align:start;
  cursor:pointer;
  transition:background-color .18s ease;
}
.curriculum-trigger:hover { background:var(--surface-2); }
.curriculum-trigger .chev { color:var(--text-mute); transition:transform .25s ease; flex:0 0 auto; margin-inline-start:auto; }
.curriculum-trigger.is-open .chev { transform:rotate(180deg); }
.curriculum-index {
  width:30px;
  height:30px;
  border-radius:9px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:var(--step--1);
  font-weight:800;
  flex:0 0 auto;
}
.curriculum-title { font-weight:700; font-size:var(--step-0); line-height:1.4; }
.curriculum-meta { font-size:var(--step--1); color:var(--text-mute); font-weight:500; }
.curriculum-panel { overflow:hidden; height:0; transition:height .28s ease; }
.curriculum-panel[hidden] { display:block; }
.lesson-line {
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 20px 11px 24px;
  border-top:1px solid var(--border);
  font-size:var(--step--1);
  color:var(--text-soft);
  text-decoration:none;
}
a.lesson-line:hover { background:var(--surface-3); color:var(--text); }
.lesson-line .lesson-type { color:var(--text-mute); flex:0 0 auto; }
.lesson-line .lesson-name { flex:1 1 auto; min-width:0; color:var(--text); font-weight:550; }
.lesson-line .lesson-time { color:var(--text-mute); flex:0 0 auto; }
.lesson-line.is-locked .lesson-name { color:var(--text-soft); font-weight:500; }
.lesson-line.is-done .lesson-type { color:var(--success); }
/* 17. kurs detay */
.course-hero {
  background:linear-gradient(180deg, var(--bg-soft), var(--bg));
  padding:clamp(28px, 4vw, 48px) 0 clamp(32px, 4vw, 52px);
  border-bottom:1px solid var(--border);
}
.course-hero h1 { font-size:var(--step-5); margin-bottom:12px; }
.course-hero .lead { font-size:var(--step-1); color:var(--text-soft); max-width:68ch; }
.breadcrumbs {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  list-style:none;
  padding:0;
  margin:0 0 16px;
  font-size:var(--step--1);
  color:var(--text-mute);
}
.breadcrumbs a { color:var(--text-soft); text-decoration:none; }
.breadcrumbs a:hover { color:var(--primary); }
.breadcrumbs li + li::before { content:"/"; margin-inline-end:6px; color:var(--border-strong); }
.detail-layout { display:grid; grid-template-columns:minmax(0, 1fr) 372px; gap:34px; align-items:start; }
@media (max-width:1080px) {
  .detail-layout { grid-template-columns:minmax(0, 1fr); }
}
.buy-card {
  position:sticky;
  top:calc(var(--header-height) + 18px);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.buy-card-media { position:relative; aspect-ratio:16 / 10; background:var(--surface-2); }
.buy-card-media img { width:100%; height:100%; object-fit:cover; }
.buy-card-body { padding:22px; }
.buy-price { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.buy-price .price-now { font-size:var(--step-4); }
.buy-includes { list-style:none; padding:0; margin:20px 0 0; border-top:1px solid var(--border); padding-top:16px; }
.buy-includes li { display:flex; align-items:center; gap:10px; padding:6px 0; font-size:var(--step--1); color:var(--text-soft); }
.buy-includes svg { color:var(--primary); flex:0 0 auto; }
.outcome-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 24px; list-style:none; padding:0; margin:0; }
.outcome-grid li { display:flex; align-items:flex-start; gap:10px; font-size:var(--step-0); color:var(--text-soft); line-height:1.6; }
.outcome-grid svg { color:var(--accent); flex:0 0 auto; margin-top:4px; }
@media (max-width:720px) {
  .outcome-grid { grid-template-columns:minmax(0, 1fr); }
}
.list-check { list-style:none; padding:0; margin:0; }
.list-check li { display:flex; align-items:flex-start; gap:10px; padding:7px 0; color:var(--text-soft); }
.list-check svg { color:var(--primary); flex:0 0 auto; margin-top:5px; }
/* puan dağılımı */
.rating-summary { display:grid; grid-template-columns:168px minmax(0, 1fr); gap:26px; align-items:center; }
@media (max-width:620px) {
  .rating-summary { grid-template-columns:minmax(0, 1fr); }
}
.rating-big { text-align:center; padding:18px; border-radius:var(--radius-lg); background:var(--surface-3); }
.rating-big strong {
  display:block;
  font-family:var(--font-display);
  font-size:2.7rem;
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--warning);
}
.rating-rows { display:grid; gap:8px; }
.rating-row {
  display:grid;
  grid-template-columns:54px minmax(0, 1fr) 40px;
  align-items:center;
  gap:12px;
  font-size:var(--step--1);
  color:var(--text-soft);
}
.review-item { padding:20px 0; border-top:1px solid var(--border); }
.review-item:first-child { border-top:0; padding-top:0; }
.review-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.review-head strong { font-size:var(--step-0); }
.review-item h4 { font-size:var(--step-0); margin-bottom:6px; }
.review-item p { color:var(--text-soft); margin:0; }
/* 18. oynatıcı sayfası */
.player-shell { display:grid; grid-template-columns:340px minmax(0, 1fr); min-height:calc(100dvh - var(--header-height)); align-items:start; }
.player-aside {
  position:sticky;
  top:var(--header-height);
  height:calc(100dvh - var(--header-height));
  overflow-y:auto;
  background:var(--surface);
  border-inline-end:1px solid var(--border);
  scrollbar-width:thin;
}
.player-aside-head { position:sticky; top:0; z-index:2; padding:18px 20px; background:var(--surface); border-bottom:1px solid var(--border); }
.player-aside-head h2 { font-size:var(--step-0); margin-bottom:10px; line-height:1.4; }
.player-aside-head h2 a { color:var(--text); text-decoration:none; }
.player-aside-head h2 a:hover { color:var(--primary); }
.player-main { padding:clamp(20px, 3vw, 38px) clamp(16px, 3vw, 44px) 64px; min-width:0; }
.player-sec-title {
  padding:14px 20px 8px;
  font-size:var(--step--1);
  font-weight:750;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-mute);
}
.player-lesson {
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:10px 20px;
  color:var(--text-soft);
  font-size:var(--step--1);
  text-decoration:none;
  border-inline-start:3px solid transparent;
  transition:background-color .16s ease, color .16s ease;
}
.player-lesson:hover { background:var(--surface-3); color:var(--text); }
.player-lesson.is-current { background:var(--primary-soft); border-inline-start-color:var(--primary); color:var(--primary); font-weight:650; }
.player-lesson .tick {
  width:19px;
  height:19px;
  margin-top:2px;
  border-radius:50%;
  border:1.6px solid var(--border-strong);
  color:transparent;
  flex:0 0 auto;
}
.player-lesson.is-done .tick { background:var(--success); border-color:var(--success); color:var(--on-accent); }
.player-lesson .lesson-text { flex:1 1 auto; min-width:0; line-height:1.45; }
.player-lesson .lesson-sub { display:block; font-size:11.5px; color:var(--text-mute); font-weight:500; margin-top:2px; }
.lesson-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.lesson-head h1 { font-size:var(--step-4); margin-bottom:8px; }
.lesson-stage { border-radius:var(--radius-lg); overflow:hidden; margin-bottom:26px; border:1px solid var(--border); background:var(--surface); }
.lesson-stage-video { aspect-ratio:16 / 9; background:var(--stage-bg); }
.lesson-stage-video iframe, .lesson-stage-video video { width:100%; height:100%; border:0; display:block; }
.lesson-banner {
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 22px;
  background:linear-gradient(120deg, var(--primary-soft), var(--accent-soft));
  color:var(--text);
}
.lesson-banner .lesson-banner-icon {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:14px;
  background:var(--surface);
  color:var(--primary);
  flex:0 0 auto;
}
.lesson-banner strong { display:block; font-size:var(--step-0); }
.lesson-banner span { font-size:var(--step--1); color:var(--text-soft); }
.lesson-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding:18px 0;
  margin-top:26px;
  border-top:1px solid var(--border);
}
.lesson-actions .spacer { margin-inline-start:auto; }
/* okunur metin gövdesi */
.prose { max-width:74ch; color:var(--text-soft); font-size:1.0125rem; line-height:1.78; }
.prose > * + * { margin-top:1.05em; }
.prose h2 { font-size:var(--step-2); color:var(--text); margin-top:1.7em; }
.prose h3 { font-size:var(--step-1); color:var(--text); margin-top:1.5em; }
.prose h4 { font-size:var(--step-0); color:var(--text); margin-top:1.35em; }
.prose ul, .prose ol { padding-inline-start:1.35em; }
.prose li + li { margin-top:.4em; }
.prose strong { color:var(--text); font-weight:700; }
.prose a { text-decoration:underline; text-underline-offset:3px; }
.prose code {
  padding:2px 6px;
  border-radius:6px;
  background:var(--surface-2);
  color:var(--primary);
  font-family:var(--font-mono);
  font-size:.875em;
}
.prose pre {
  padding:16px 18px;
  border-radius:var(--radius);
  background:var(--surface-2);
  border:1px solid var(--border);
  overflow-x:auto;
  font-family:var(--font-mono);
  font-size:.86rem;
  line-height:1.65;
}
.prose pre code { background:none; padding:0; color:var(--text); }
.prose blockquote {
  margin-inline-start:0;
  padding:4px 0 4px 18px;
  border-inline-start:3px solid var(--primary);
  color:var(--text);
  font-style:italic;
}
.prose table { width:100%; border-collapse:collapse; font-size:var(--step--1); }
.prose th, .prose td { padding:9px 12px; border:1px solid var(--border); text-align:start; }
.prose th { background:var(--surface-2); color:var(--text); font-weight:700; }
.prose img { border-radius:var(--radius); }
.prose hr { border:0; border-top:1px solid var(--border); margin:2em 0; }
/* sekmeler */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:22px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab {
  padding:11px 16px;
  border:0;
  border-bottom:2px solid transparent;
  background:none;
  color:var(--text-soft);
  font:inherit;
  font-weight:650;
  font-size:var(--step-0);
  cursor:pointer;
  white-space:nowrap;
  transition:color .18s ease, border-color .18s ease;
}
.tab:hover { color:var(--text); }
.tab.is-active { color:var(--primary); border-bottom-color:var(--primary); }
.tab-panel { display:none; }
.tab-panel.is-active { display:block; animation:boga-fade-in .28s ease both; }
/* ekler */
.attachment {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  text-decoration:none;
  color:var(--text);
  transition:border-color .18s ease, transform .18s ease;
}
.attachment + .attachment { margin-top:10px; }
.attachment:hover { border-color:var(--primary); transform:translateX(3px); color:var(--text); }
.attachment-icon {
  width:42px;
  height:42px;
  border-radius:12px;
  background:var(--primary-soft);
  color:var(--primary);
  flex:0 0 auto;
}
.attachment strong { display:block; font-size:var(--step-0); }
.attachment span { font-size:var(--step--1); color:var(--text-mute); }
/* soru-cevap */
.qa-item { padding:18px 0; border-top:1px solid var(--border); }
.qa-item:first-child { border-top:0; padding-top:0; }
.qa-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.qa-body { color:var(--text-soft); margin:0; }
.qa-answer {
  display:flex;
  gap:12px;
  margin-top:14px;
  padding:14px 16px;
  border-radius:var(--radius);
  background:var(--surface-3);
  border-inline-start:3px solid var(--accent);
}
.qa-answer p { margin:0; color:var(--text-soft); font-size:var(--step--1); }
.qa-answer strong { font-size:var(--step--1); }
@media (max-width:1024px) {
  .player-shell { grid-template-columns:minmax(0, 1fr); }
  .player-aside { position:static; height:auto; max-height:60vh; border-inline-end:0; border-bottom:1px solid var(--border); }
}
/* 19. quiz */
.quiz-question { padding:22px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
.quiz-question + .quiz-question { margin-top:16px; }
.quiz-question > h3 { display:flex; gap:12px; font-size:var(--step-1); line-height:1.45; margin-bottom:16px; }
.quiz-no {
  width:30px;
  height:30px;
  border-radius:9px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:var(--step--1);
  font-weight:800;
  flex:0 0 auto;
}
.quiz-option {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:13px 16px;
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  color:var(--text-soft);
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}
.quiz-option + .quiz-option { margin-top:9px; }
.quiz-option:hover { border-color:var(--primary); background:var(--surface-3); }
.quiz-option input { position:absolute; opacity:0; pointer-events:none; }
.quiz-option .letter {
  width:26px;
  height:26px;
  border-radius:8px;
  border:1.5px solid var(--border-strong);
  background:var(--surface);
  font-size:var(--step--1);
  font-weight:800;
  color:var(--text-soft);
  transition:inherit;
}
.quiz-option:has(input:checked) { border-color:var(--primary); background:var(--primary-soft); color:var(--text); }
.quiz-option:has(input:checked) .letter { background:var(--primary); border-color:var(--primary); color:var(--primary-contrast); }
.quiz-option:has(input:focus-visible) { outline:3px solid var(--primary); outline-offset:2px; }
.quiz-option.is-correct { border-color:var(--success); background:var(--success-soft); color:var(--text); }
.quiz-option.is-correct .letter { background:var(--success); border-color:var(--success); color:var(--on-accent); }
.quiz-option.is-wrong { border-color:var(--danger); background:var(--danger-soft); color:var(--text); }
.quiz-option.is-wrong .letter { background:var(--danger); border-color:var(--danger); color:var(--on-accent); }
.quiz-explain {
  margin-top:14px;
  padding:13px 16px;
  border-radius:var(--radius);
  background:var(--surface-3);
  border-inline-start:3px solid var(--info);
  font-size:var(--step--1);
  color:var(--text-soft);
}
.quiz-score {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  padding:26px;
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.quiz-score .progress-ring { --size:118px; }
.quiz-score h2 { margin-bottom:6px; }
/* 20. sertifika */
.certificate {
  position:relative;
  max-width:940px;
  margin:0 auto;
  padding:clamp(30px, 5vw, 60px);
  border-radius:var(--radius-xl);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  text-align:center;
}
.certificate::before {
  content:"";
  position:absolute;
  inset:14px;
  border:2px solid color-mix(in srgb, var(--primary) 34%, transparent);
  border-radius:var(--radius-lg);
  pointer-events:none;
}
.certificate::after {
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:0;
  width:100%;
  height:7px;
  background:linear-gradient(90deg, var(--primary), var(--accent), var(--warning));
}
.certificate-seal {
  width:76px;
  height:76px;
  margin:0 auto 18px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  color:var(--on-accent);
}
.certificate-kicker { font-size:var(--step--1); font-weight:750; letter-spacing:.22em; text-transform:uppercase; color:var(--text-mute); }
.certificate h1 { font-size:clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); margin:10px 0 22px; }
.certificate-name {
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 1.1rem + 2.4vw, 2.5rem);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--primary);
  padding-bottom:10px;
  border-bottom:2px solid var(--border);
  display:inline-block;
  margin-bottom:18px;
}
.certificate-course { font-size:var(--step-2); font-weight:700; margin-bottom:8px; }
.certificate-meta {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px 36px;
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid var(--border);
  text-align:center;
}
.certificate-meta div { font-size:var(--step--1); color:var(--text-mute); }
.certificate-meta strong { display:block; font-size:var(--step-0); color:var(--text); }
.certificate-code {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 18px;
  margin-top:22px;
  border-radius:var(--radius-pill);
  background:var(--surface-2);
  font-family:var(--font-mono);
  font-size:var(--step-0);
  font-weight:700;
  letter-spacing:.08em;
}
.verify-state {
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 22px;
  border-radius:var(--radius-lg);
  margin-bottom:26px;
  font-weight:650;
}
.verify-state.ok { background:var(--success-soft); color:var(--success); }
.verify-state.bad { background:var(--danger-soft); color:var(--danger); }
/* 21. öğrenci paneli kabuğu */
.dash-layout { display:grid; grid-template-columns:244px minmax(0, 1fr); gap:30px; align-items:start; }
.dash-nav {
  position:sticky;
  top:calc(var(--header-height) + 18px);
  display:grid;
  gap:3px;
  padding:14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.dash-nav a {
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 13px;
  border-radius:var(--radius);
  color:var(--text-soft);
  font-weight:600;
  font-size:var(--step-0);
  text-decoration:none;
  transition:background-color .16s ease, color .16s ease;
}
.dash-nav a:hover { background:var(--surface-2); color:var(--text); }
.dash-nav a.is-active { background:var(--primary-soft); color:var(--primary); }
.dash-nav a .count { margin-inline-start:auto; font-size:var(--step--1); color:var(--text-mute); font-weight:700; }
.dash-nav a.is-active .count { color:var(--primary); }
@media (max-width:900px) {
  .dash-layout { grid-template-columns:minmax(0, 1fr); }
  .dash-nav { position:static; grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; scrollbar-width:none; }
  .dash-nav a .count { display:none; }
}
.stat-tile {
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.stat-tile-icon {
  width:44px;
  height:44px;
  border-radius:13px;
  background:var(--primary-soft);
  color:var(--primary);
  flex:0 0 auto;
}
.stat-tile.tone-accent .stat-tile-icon { background:var(--accent-soft); color:var(--accent-ink); }
.stat-tile.tone-warn .stat-tile-icon { background:var(--warning-soft); color:var(--warning); }
.stat-tile.tone-ok .stat-tile-icon { background:var(--success-soft); color:var(--success); }
.stat-tile strong {
  display:block;
  font-family:var(--font-display);
  font-size:var(--step-3);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.15;
}
.stat-tile span { font-size:var(--step--1); color:var(--text-soft); }
.enrol-card {
  display:grid;
  grid-template-columns:150px minmax(0, 1fr) auto;
  gap:18px;
  align-items:center;
  padding:16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.enrol-card + .enrol-card { margin-top:14px; }
.enrol-card .enrol-cover { border-radius:var(--radius); overflow:hidden; aspect-ratio:16 / 10; background:var(--surface-2); }
.enrol-card .enrol-cover img { width:100%; height:100%; object-fit:cover; }
.enrol-card h3 { font-size:var(--step-1); margin-bottom:6px; }
.enrol-card h3 a { color:var(--text); text-decoration:none; }
.enrol-card h3 a:hover { color:var(--primary); }
@media (max-width:760px) {
  .enrol-card { grid-template-columns:100px minmax(0, 1fr); }
  .enrol-card > .enrol-actions { grid-column:1 / -1; }
}
@media (max-width:460px) {
  .enrol-card { grid-template-columns:minmax(0, 1fr); }
  .enrol-card .enrol-cover { max-width:190px; }
}
.note-card {
  padding:18px 20px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.note-card + .note-card { margin-top:14px; }
.note-card .note-body { white-space:pre-wrap; color:var(--text-soft); margin:10px 0 0; }
/* 22. katalog */
.catalog-layout { display:grid; grid-template-columns:268px minmax(0, 1fr); gap:30px; align-items:start; }
.filter-panel {
  position:sticky;
  top:calc(var(--header-height) + 18px);
  padding:20px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.filter-group + .filter-group { margin-top:20px; padding-top:20px; border-top:1px solid var(--border); }
.filter-group > h3 {
  font-size:var(--step--1);
  font-weight:750;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-mute);
  margin-bottom:11px;
}
.filter-group .check + .check { margin-top:9px; }
.filter-group .check span { flex:1 1 auto; }
.filter-group .check .count { color:var(--text-mute); font-size:11.5px; }
@media (max-width:940px) {
  .catalog-layout { grid-template-columns:minmax(0, 1fr); }
  .filter-panel { position:static; }
}
.catalog-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; }
.catalog-bar .select { width:auto; min-width:190px; padding-block:9px; }
.empty-state {
  text-align:center;
  padding:clamp(40px, 6vw, 72px) 24px;
  background:var(--surface);
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-lg);
}
.empty-state .empty-icon {
  width:64px;
  height:64px;
  margin:0 auto 16px;
  border-radius:20px;
  background:var(--surface-2);
  color:var(--text-mute);
}
.empty-state h3 { font-size:var(--step-2); margin-bottom:8px; }
.empty-state p { color:var(--text-soft); max-width:46ch; margin:0 auto 18px; }
/* sayfalama */
.pagination { display:flex; justify-content:center; align-items:center; gap:6px; flex-wrap:wrap; margin-top:36px; }
.pagination-list { display:flex; align-items:center; gap:6px; flex-wrap:wrap; list-style:none; padding:0; margin:0; }
.pagination-list a, .pagination-list span {
  display:grid;
  place-items:center;
  min-width:42px;
  height:42px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--text-soft);
  font-weight:650;
  font-size:var(--step--1);
  text-decoration:none;
  transition:border-color .18s ease, color .18s ease;
}
.pagination-list a:hover { border-color:var(--primary); color:var(--primary); }
.pagination-list .is-current { background:var(--primary); border-color:var(--primary); color:var(--primary-contrast); }
.pagination-list .is-off { opacity:.4; }
.pagination-list .is-gap { border-color:transparent; background:none; }
.pagination { flex-direction:column; }
.pagination-info { order:2; text-align:center; font-size:var(--step--1); color:var(--text-mute); margin-top:10px; }
/* 23. blog */
.post-card {
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  height:100%;
  transition:transform .22s ease, box-shadow .24s ease;
}
.post-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.post-cover { aspect-ratio:16 / 9; background:var(--surface-2); overflow:hidden; }
.post-cover img { width:100%; height:100%; object-fit:cover; }
.post-body { padding:20px; display:flex; flex-direction:column; gap:9px; flex:1 1 auto; }
.post-card h3 { font-size:var(--step-1); line-height:1.4; margin:0; }
.post-card h3 a { color:var(--text); text-decoration:none; }
.post-card h3 a:hover { color:var(--primary); }
.post-card p { color:var(--text-soft); font-size:var(--step--1); margin:0; }
.post-card .post-foot { margin-top:auto; padding-top:12px; border-top:1px solid var(--border); }
.post-hero { padding:clamp(30px, 4vw, 56px) 0 0; }
.post-hero h1 { font-size:var(--step-5); margin:14px 0; }
.post-figure { border-radius:var(--radius-xl); overflow:hidden; margin:28px 0; box-shadow:var(--shadow); }
.post-figure img { width:100%; display:block; }
/* 24. CTA / bülten / alt bilgi */
.cta-band {
  position:relative;
  padding:clamp(40px, 5vw, 68px) clamp(24px, 4vw, 56px);
  border-radius:var(--radius-xl);
  background:linear-gradient(125deg, var(--primary), color-mix(in srgb, var(--accent) 68%, var(--primary)));
  color:var(--on-accent);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.cta-band::after {
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(var(--on-accent) 1.2px, transparent 1.2px);
  background-size:22px 22px;
  opacity:.12;
  pointer-events:none;
}
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { color:var(--on-accent); font-size:var(--step-4); margin-bottom:10px; }
.cta-band p { color:var(--on-accent-soft); max-width:58ch; margin:0 0 24px; }
.cta-band .btn-primary { background:var(--on-accent); color:var(--primary); }
.cta-band .btn-outline { border-color:var(--on-accent-soft); color:var(--on-accent); }
.cta-band .btn-outline:hover { border-color:var(--on-accent); color:var(--on-accent); background:var(--on-accent-faint); }
.newsletter-form { display:flex; gap:10px; flex-wrap:wrap; max-width:480px; }
.newsletter-form .input { flex:1 1 220px; border-color:transparent; }
.site-footer {
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:clamp(40px, 5vw, 64px) 0 24px;
  margin-top:clamp(40px, 5vw, 72px);
}
.footer-grid { display:grid; grid-template-columns:1.6fr repeat(3, minmax(0, 1fr)); gap:32px; }
@media (max-width:900px) { .footer-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px) { .footer-grid { grid-template-columns:minmax(0, 1fr); } }
.footer-col h3 {
  font-size:var(--step--1);
  font-weight:750;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--text-mute);
  margin-bottom:14px;
}
.footer-col ul { list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.footer-col a { color:var(--text-soft); text-decoration:none; font-size:var(--step-0); }
.footer-col a:hover { color:var(--primary); }
.footer-about p { color:var(--text-soft); font-size:var(--step--1); max-width:42ch; margin:14px 0 18px; }
.social-row { display:flex; gap:8px; }
.footer-bottom {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid var(--border);
  font-size:var(--step--1);
  color:var(--text-mute);
}
.footer-bottom nav { display:flex; flex-wrap:wrap; gap:6px 18px; }
.footer-bottom a { color:var(--text-mute); text-decoration:none; }
.footer-bottom a:hover { color:var(--primary); }
/* 25. bildirim / modal */
.toast-stack {
  position:fixed;
  inset-block-end:24px;
  inset-inline-end:24px;
  z-index:200;
  display:grid;
  gap:10px;
  max-width:min(360px, calc(100vw - 32px));
}
.toast {
  position:relative;
  padding:14px 42px 14px 18px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  color:var(--text);
  font-size:var(--step--1);
  font-weight:600;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease;
}
.toast.is-visible { opacity:1; transform:none; }
.toast::before { content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; border-radius:var(--radius) 0 0 var(--radius); background:var(--info); }
.toast-success::before { background:var(--success); }
.toast-error::before { background:var(--danger); }
.toast-warning::before { background:var(--warning); }
.toast-close {
  position:absolute;
  top:8px;
  inset-inline-end:10px;
  width:26px;
  height:26px;
  border:0;
  border-radius:50%;
  background:none;
  color:var(--text-mute);
  font-size:19px;
  line-height:1;
  cursor:pointer;
}
.toast-close:hover { color:var(--text); background:var(--surface-2); }
.modal {
  position:fixed;
  inset:0;
  z-index:180;
  display:grid;
  place-items:center;
  padding:20px;
  background:var(--scrim);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .22s ease;
}
.modal.is-open { opacity:1; }
.modal-box {
  width:min(560px, 100%);
  max-height:88dvh;
  overflow-y:auto;
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:26px;
  transform:translateY(14px) scale(.98);
  transition:transform .22s ease;
}
.modal.is-open .modal-box { transform:none; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.modal-head h2 { font-size:var(--step-2); margin:0; }
.modal-foot { display:flex; gap:10px; justify-content:flex-end; margin-top:22px; flex-wrap:wrap; }
/* yukarı çık */
[data-to-top] {
  position:fixed;
  inset-block-end:24px;
  inset-inline-start:24px;
  z-index:90;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  box-shadow:var(--shadow);
}
[data-to-top].is-visible { opacity:1; visibility:visible; transform:none; }
/* 26. konfeti */
.confetti-layer { position:fixed; inset:0; z-index:210; pointer-events:none; overflow:hidden; }
.confetti-piece {
  position:absolute;
  top:-14px;
  width:9px;
  height:15px;
  border-radius:2px;
  opacity:.95;
  animation:confetti-fall var(--dur, 2.6s) cubic-bezier(.25, .5, .5, 1) forwards;
}
@keyframes confetti-fall {
  0% { transform:translate3d(0, -20px, 0) rotate(0deg); opacity:1; }
  100% { transform:translate3d(var(--dx, 0), 105vh, 0) rotate(var(--rot, 540deg)); opacity:.1; }
}
/* 27. yazdırma */
@media print {
  .site-header,
  .site-footer,
  .no-print,
  [data-to-top] { display:none !important; }
  body { background:#ffffff; }
  .certificate { box-shadow:none; border:1px solid #cccccc; max-width:100%; page-break-inside:avoid; }
}
/* 28. azaltılmış hareket */
@media (prefers-reduced-motion:reduce) {
  .btn:hover,
  .course-card:hover,
  .post-card:hover,
  .teacher-card:hover,
  .cat-card:hover,
  .attachment:hover { transform:none; }
  .course-card:hover .course-cover img { transform:none; }
  .confetti-layer { display:none; }
  .progress-bar > span, .progress-ring { transition:none; }
  .merit.is-new { animation:none; }
}