/* ============================================================
   Dijital Ticaret · Öğrenci Panosu
   Site ile aynı dil: koyu lacivert zemin, nane -> turkuaz gradyan,
   Sora (başlık) + Inter (metin), kart 18px / buton 12px / chip pill.
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #070b12;
  --bg-soft: #0a0f19;
  --surface: #0e1420;
  --surface-2: #131a29;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.15);
  --text: #f4f7fb;
  --muted: rgba(244, 247, 251, 0.64);
  --muted-2: rgba(244, 247, 251, 0.4);
  --accent: #34f0a8;
  --accent-2: #22c9d9;
  --accent-ink: #052016;
  --accent-tint: rgba(52, 240, 168, 0.1);
  --accent-line: rgba(52, 240, 168, 0.32);
  --danger: #ff8a8a;
  --danger-line: rgba(255, 107, 107, 0.4);
  --danger-tint: rgba(255, 107, 107, 0.1);
  --warn: #ffb36b;
  --grad: linear-gradient(135deg, #34f0a8 0%, #22c9d9 100%);
  --radius: 18px;
  --radius-btn: 12px;
  --font-display: "Sora", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Inter", "Avenir Next", "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- Tipografi ---------- */
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; }
.display { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; }
.h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.15; }
.h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.lead { color: var(--muted); font-size: 1.05rem; max-width: 60ch; }
.lead b { color: var(--text); font-weight: 600; }
.sub { color: var(--muted); font-size: 0.95rem; max-width: 60ch; }
.sub a { color: var(--accent); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.eyebrow i { font-size: 1.1rem; }
.hint { font-size: 0.8rem; color: var(--muted-2); line-height: 1.5; }
.dim { color: var(--muted-2); }
.link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; font-size: 0.9rem; }
.link.center { text-align: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); font-size: 0.78rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.chip i { color: var(--accent); }
.chip-xs { padding: 2px 8px; font-size: 0.68rem; vertical-align: middle; }
.st-active { border-color: var(--accent-line); color: #bdf7df; }
.st-invited { border-color: rgba(255, 179, 107, 0.4); color: #ffd3a6; }
.st-invited i { color: var(--warn); }
.st-suspended { border-color: var(--danger-line); color: #ffb3b3; }
.st-suspended i { color: var(--danger); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: var(--radius-btn);
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), filter 0.25s var(--ease), background 0.25s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn-primary { background: var(--grad); color: var(--accent-ink); box-shadow: 0 10px 30px rgba(52, 240, 168, 0.22); }
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(52, 240, 168, 0.32); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--text); background: rgba(255, 255, 255, 0.02); }
.btn-ghost:hover { border-color: var(--accent-line); transform: translateY(-2px); background: var(--accent-tint); }
.btn-danger { border: 1px solid var(--danger-line); color: var(--danger); background: var(--danger-tint); }
.btn-danger:hover { transform: translateY(-2px); background: rgba(255, 107, 107, 0.18); }
.btn-sm { padding: 9px 14px; font-size: 0.85rem; }
.btn i { font-size: 1.2em; }
.row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Kartlar ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card.pad { padding: 28px 26px; display: grid; gap: 16px; align-content: start; }
.card.pad > .h3 { margin-bottom: -4px; }
.narrow { max-width: 560px; }

/* ---------- Formlar ---------- */
.form { display: grid; gap: 14px; }
.form .btn { width: 100%; }
.form.inline { grid-template-columns: 1fr auto; align-items: center; }
.form.inline .btn { width: auto; }
.field { display: grid; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.field small { font-weight: 500; color: var(--muted-2); }
.input {
  width: 100%; padding: 13px 16px; border-radius: var(--radius-btn);
  border: 1px solid var(--line-strong); background: rgba(7, 11, 18, 0.6); color: var(--text);
  font: inherit; font-size: 0.98rem; font-weight: 400;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.input::placeholder { color: var(--muted-2); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.input[readonly] { color: var(--muted); background: rgba(255, 255, 255, 0.02); border-style: dashed; }
textarea.input { resize: vertical; min-height: 84px; line-height: 1.5; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.pw { position: relative; display: block; }
.pw .input { padding-right: 48px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.15rem; }
.pw-eye:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--muted); cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.check small { color: var(--muted-2); }
.msg { padding: 12px 14px; border-radius: 12px; font-size: 0.88rem; font-weight: 500; border: 1px solid var(--accent-line); background: var(--accent-tint); color: var(--text); line-height: 1.5; }
.msg.err { border-color: var(--danger-line); background: var(--danger-tint); color: #ffb3b3; }
.msg i { vertical-align: -2px; margin-right: 4px; }
.cf-turnstile { min-height: 65px; }

/* ---------- Tek seferlik mesaj ---------- */
.flash { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; margin-bottom: 24px; border: 1px solid var(--accent-line); background: linear-gradient(180deg, rgba(52, 240, 168, 0.1), rgba(52, 240, 168, 0.04)); font-size: 0.9rem; }
.flash.err { border-color: var(--danger-line); background: var(--danger-tint); }
.flash > i { font-size: 1.3rem; color: var(--accent); margin-top: 1px; }
.flash.err > i { color: var(--danger); }
.flash-body { display: grid; gap: 10px; min-width: 0; }
.flash-x { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.flash-x:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.linkbox { display: flex; gap: 8px; align-items: center; min-width: 0; }
.linkbox code { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; background: #060910; border: 1px solid var(--line); font-size: 0.78rem; color: #cfe3dc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkbox .btn { flex: none; }

/* ---------- Giriş sayfaları ---------- */
.auth { flex: 1; display: grid; place-items: center; padding: 40px 0; position: relative; }
.auth::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 400px at 20% 10%, rgba(52, 240, 168, 0.12), transparent 60%), radial-gradient(500px 400px at 85% 90%, rgba(34, 201, 217, 0.1), transparent 60%); }
.auth .wrap { position: relative; }
.auth-card { width: 100%; max-width: 460px; margin: 0 auto; padding: 36px 34px; display: grid; gap: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.auth-card .h2 { margin-top: 2px; }
.auth-card .form { margin-top: 6px; }
.auth-logo { margin-bottom: 10px; }
.auth-logo img { height: 24px; width: auto; }
.auth-foot { font-size: 0.82rem; color: var(--muted-2); line-height: 1.5; padding-top: 14px; border-top: 1px solid var(--line); }
.auth-foot a { color: var(--accent); font-weight: 600; }
.auth .row .btn { flex: 1; }

/* ---------- Üst menü ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(7, 11, 18, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.nav-inner { height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { height: 24px; width: auto; max-width: none; flex: none; }
.brand-tag { font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; color: var(--muted); padding-left: 12px; border-left: 1px solid var(--line-strong); white-space: nowrap; }
.nav-links { display: flex; gap: 20px; font-size: 0.92rem; font-weight: 500; color: var(--muted); }
.nav-links a { position: relative; padding: 4px 0; transition: color 0.2s; white-space: nowrap; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--grad); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.nav-links a:hover, .nav-links a.on { color: var(--text); }
.nav-links a.on::after, .nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-user { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 500; color: var(--muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user i { color: var(--accent); font-size: 1.2rem; flex: none; }

/* ---------- İç sayfalar ---------- */
.shell { flex: 1; padding: 44px 0 70px; }
.shell .wrap { max-width: 1000px; }
.shell-wide .wrap { max-width: 1100px; }
.hero { padding: 10px 0 36px; display: grid; gap: 14px; }
.hero .display { max-width: 16ch; }
.page-head { display: grid; gap: 8px; margin-bottom: 26px; }
.page-head .h2 { margin-top: 2px; }
.between { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.back:hover { color: var(--accent); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.stack { display: grid; gap: 22px; }
.mod { padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.mod > i { font-size: 1.9rem; color: var(--accent); margin-bottom: 4px; }
.mod p { color: var(--muted); font-size: 0.92rem; flex: 1; }
.mod-cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 0.86rem; font-weight: 600; color: var(--accent); margin-top: 6px; }
a.mod:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.mod.soon { opacity: 0.78; }
.mod.soon > i { color: var(--muted-2); }
.mod.soon .chip { align-self: flex-start; margin-top: 6px; }
.mod.soon .chip i { color: var(--warn); }

/* ---------- Yönetim ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.stat { display: grid; gap: 2px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); transition: border-color 0.25s var(--ease), background 0.25s var(--ease); }
.stat b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat span { font-size: 0.78rem; color: var(--muted); }
.stat:hover, .stat.on { border-color: var(--accent-line); background: var(--accent-tint); }
.toolbar { display: grid; grid-template-columns: 1fr 200px auto; gap: 10px; margin-bottom: 18px; }
.toolbar .input { padding: 11px 14px; font-size: 0.92rem; }
.table-card { overflow: hidden; }
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th { text-align: left; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.table td { padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--muted); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
.tlink { display: grid; gap: 2px; color: var(--text); }
.tlink b { font-weight: 600; }
.tlink small { color: var(--muted-2); font-size: 0.8rem; }
.tlink:hover b { color: var(--accent); }
.empty { text-align: center; padding: 40px 18px !important; color: var(--muted-2); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 0.88rem; }
.kv dt { color: var(--muted-2); font-weight: 500; }
.kv dd { color: var(--text); }
.actions { display: grid; gap: 10px; }
.actions .btn { width: 100%; }
.log { list-style: none; display: grid; gap: 10px; font-size: 0.86rem; }
.log li { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.log li:last-child { border-bottom: 0; padding-bottom: 0; }
.log time { color: var(--muted-2); font-size: 0.78rem; white-space: nowrap; }
.log span small { color: var(--muted-2); }
.log code { font-size: 0.72rem; color: var(--muted-2); }
.danger-zone { border-color: var(--danger-line); }
.danger-zone .h3 { color: var(--danger); }

/* ---------- Alt bilgi ---------- */
.foot { border-top: 1px solid var(--line); padding: 18px 0; font-size: 0.8rem; color: var(--muted-2); }
.foot .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.foot a:hover { color: var(--accent); }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .toolbar { grid-template-columns: 1fr 1fr; }
  .toolbar .btn { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .nav-inner { height: 62px; gap: 10px; }
  .brand-tag { display: none; }
  .brand-logo { height: 18px; }
  .nav-links { gap: 12px; font-size: 0.84rem; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 6px 0; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .nav-links::-webkit-scrollbar { display: none; }
  .brand { flex: none; }
  .nav-user { display: none; }
  .nav-cta .btn span { display: none; }
  .nav-cta .btn { padding: 9px 11px; }
  .shell { padding: 30px 0 50px; }
  .auth-card { padding: 28px 22px; }
  .card.pad { padding: 22px 18px; }
  .table thead { display: none; }
  .table tr { display: grid; gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .table td { display: flex; gap: 10px; padding: 2px 0; border: 0; font-size: 0.86rem; }
  .table td::before { content: attr(data-l); flex: 0 0 76px; color: var(--muted-2); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.9; }
  .table td:first-child::before { display: none; }
  .table .empty::before { display: none; }
  .log li { grid-template-columns: 1fr; gap: 2px; }
  .form.inline { grid-template-columns: 1fr; }
  .form.inline .btn { width: 100%; }
  .linkbox { flex-direction: column; align-items: stretch; }
  .linkbox code { white-space: normal; word-break: break-all; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Site Analizi (/analiz) ---------- */
.sa-last { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sa-chip b { font-family: var(--font-display); font-size: 1rem; color: var(--text); margin-right: 1px; }
.sa-chip.tone-good { border-color: var(--accent-line); } .sa-chip.tone-good b { color: var(--accent); }
.sa-chip.tone-mid { border-color: rgba(255,179,107,0.4); } .sa-chip.tone-mid b { color: var(--warn); }
.sa-chip.tone-low { border-color: var(--danger-line); } .sa-chip.tone-low b { color: var(--danger); }
.sa-inline-score { color: var(--text); }
.sa-cat-list { list-style: none; display: grid; gap: 8px; }
.sa-cat-list li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; font-size: 0.92rem; color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--line); }
.sa-cat-list li:last-child { border-bottom: 0; }
.sa-cat-list i { color: var(--accent); font-size: 1.2rem; }
.sa-cat-list b { font-family: var(--font-display); color: var(--text); }
.sa-history { margin-top: 26px; display: grid; gap: 12px; }
.sa-wait { gap: 14px; }
.sa-loading { display: flex; gap: 14px; align-items: center; }
.sa-loading strong { font-family: var(--font-display); font-weight: 600; display: block; }
.sa-spin { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 3px solid rgba(255,255,255,0.08); border-top-color: var(--accent); animation: saspin 0.9s linear infinite; }
@keyframes saspin { to { transform: rotate(360deg); } }
.sa-progress { list-style: none; display: grid; gap: 6px; font-size: 0.86rem; color: var(--muted); }
.sa-progress li { display: flex; gap: 8px; align-items: center; }
.sa-progress li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.sa-progress li:last-child { color: var(--text); }
.sa-chips { margin-top: 6px; }
.sa-summary { max-width: 72ch; margin-top: 6px; }
.chip-harper { border-color: rgba(239,162,171,0.45); color: #f3c2c8; }
.chip-harper i { color: #efa2ab; }
.sa-top { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 18px; margin-bottom: 18px; }
.sa-score-card { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; padding: 26px; border-color: var(--accent-line); background: linear-gradient(135deg, rgba(52,240,168,0.07), rgba(34,201,217,0.03)), var(--surface); }
.sa-ring { position: relative; width: 150px; height: 150px; }
.sa-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sa-ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.sa-ring-bg { stroke: rgba(255,255,255,0.08); }
.sa-ring-fg { stroke: var(--accent); }
.sa-ring.tone-mid .sa-ring-fg { stroke: var(--warn); }
.sa-ring.tone-low .sa-ring-fg { stroke: #ff6b6b; }
.sa-ring-text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-family: var(--font-display); }
.sa-ring-text strong { font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.sa-ring-text span { font-size: 0.76rem; color: var(--muted-2); font-weight: 600; }
.sa-score-copy { display: grid; gap: 12px; align-content: center; }
.sa-grade { display: inline-flex; align-items: center; width: max-content; padding: 6px 14px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--accent-tint); color: var(--accent); border: 1px solid var(--accent-line); }
.sa-grade.tone-mid, .sa-cat-score.tone-mid { color: var(--warn); }
.sa-grade.tone-mid { background: rgba(255,179,107,0.1); border-color: rgba(255,179,107,0.35); }
.sa-grade.tone-low, .sa-cat-score.tone-low { color: var(--danger); }
.sa-grade.tone-low { background: var(--danger-tint); border-color: var(--danger-line); }
.sa-verdict { font-size: 1.02rem; line-height: 1.5; }
.sa-wins { padding: 24px; display: grid; gap: 14px; align-content: start; }
.sa-wins-list { counter-reset: win; list-style: none; display: grid; gap: 10px; }
.sa-wins-list li { position: relative; padding-left: 38px; font-size: 0.93rem; line-height: 1.5; }
.sa-wins-list li::before { counter-increment: win; content: counter(win); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--grad); color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; }
.sa-wins .hint { border-top: 1px solid var(--line); padding-top: 12px; }
.sa-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sa-cat { padding: 22px; display: grid; gap: 14px; align-content: start; }
.sa-cat-top { display: flex; gap: 12px; align-items: center; }
.sa-cat-icon { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); border: 1px solid var(--accent-line); color: var(--accent); font-size: 1.3rem; }
.sa-cat-top .h3 { font-size: 1rem; }
.sa-cat-score { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.sa-cat-score small { font-size: 0.76rem; color: var(--muted-2); font-weight: 600; }
.sa-bar { height: 8px; border-radius: 8px; background: rgba(255,255,255,0.08); overflow: hidden; }
.sa-bar span { display: block; height: 100%; background: var(--grad); border-radius: 8px; }
.sa-crit { list-style: none; display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.sa-crit li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 0.85rem; }
.sa-crit-name { font-weight: 500; }
.sa-crit-pts { font-family: var(--font-display); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sa-crit li.full .sa-crit-pts { color: var(--accent); }
.sa-crit li.zero .sa-crit-pts { color: var(--danger); }
.sa-crit-note { grid-column: 1 / -1; font-size: 0.77rem; color: var(--muted-2); line-height: 1.45; }
.sa-findings-wrap { margin-top: 34px; display: grid; gap: 14px; }
.sa-prio-head { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 8px; }
.sa-prio-head small { font-weight: 600; color: var(--muted-2); }
.sa-prio-head.p-yuksek { color: var(--danger); } .sa-prio-head.p-orta { color: var(--warn); } .sa-prio-head.p-dusuk { color: #6fdbe6; }
.sa-findings { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sa-finding { padding: 22px; display: grid; gap: 10px; align-content: start; border-left: 3px solid var(--line-strong); }
.sa-finding.p-yuksek { border-left-color: #ff6b6b; } .sa-finding.p-orta { border-left-color: var(--warn); } .sa-finding.p-dusuk { border-left-color: var(--accent-2); }
.sa-finding-top .chip b { color: var(--text); margin-left: 2px; }
.sa-finding p { color: var(--muted); font-size: 0.92rem; }
.sa-finding p b { color: var(--text); font-weight: 600; }
.sa-harper { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(239,162,171,0.07); border: 1px solid rgba(239,162,171,0.28); font-size: 0.85rem; }
.sa-harper i { color: #efa2ab; flex: none; margin-top: 3px; }
.sa-strengths { margin-top: 18px; padding: 24px; display: grid; gap: 14px; }
.sa-strengths ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.sa-strengths li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 0.92rem; }
.sa-strengths li i { color: var(--accent); flex: none; margin-top: 3px; }
.sa-disclaimer { max-width: 72ch; margin: 22px auto 0; display: flex; gap: 8px; }
.sa-disclaimer i { color: var(--accent); flex: none; margin-top: 3px; }
.sa-log .chip { justify-self: end; }
@media (max-width: 1040px) { .sa-cats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .sa-top { grid-template-columns: 1fr; } .sa-findings { grid-template-columns: 1fr; } .sa-strengths ul { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sa-cats { grid-template-columns: 1fr; } .sa-score-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 22px 18px; } .sa-score-copy { justify-items: center; } .sa-score-copy .row { justify-content: center; } .sa-finding, .sa-cat, .sa-wins, .sa-strengths { padding: 18px 16px; } }
@media (prefers-reduced-motion: reduce) { .sa-spin { animation: none !important; } }
/* Çubuk genişlikleri: CSP inline stil yasakladığı için sınıf olarak (w-0 .. w-100) */
.w-0{width:0%}.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}.w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%}.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}.w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%}.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}.w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%}.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}.w-100{width:100%}

/* ============================================================
   Dersler (/dersler, /dersler/:slug) · kütüphane, oynatıcı, ders sayfası
   ============================================================ */
[hidden] { display: none !important; }
.shell-xl .wrap, .xl .nav .wrap, .xl .foot .wrap { max-width: 1320px; }
kbd { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: rgba(255,255,255,0.04); color: var(--text); }

/* ---------- Ortak parçalar ---------- */
.ds-bar { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.12); overflow: hidden; }
.ds-bar > span { display: block; height: 100%; background: var(--grad); border-radius: 4px; }
.ds-bar-lg { height: 8px; }
.ds-module-n { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.ds-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--surface-2); isolation: isolate; }
.ds-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease), filter 0.3s var(--ease); }
.ds-thumb-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.4rem; color: var(--muted-2); }
.ds-dur { position: absolute; right: 8px; bottom: 10px; padding: 3px 8px; border-radius: 7px; background: rgba(7,11,18,0.82); font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ds-thumb > .ds-bar { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0; background: rgba(255,255,255,0.18); }
.ds-thumb > .ds-bar > span { border-radius: 0; }
.ds-play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--accent-ink); font-size: 1.35rem; box-shadow: 0 12px 34px rgba(52,240,168,0.35); opacity: 0; transform: scale(0.85); transition: opacity 0.25s var(--ease), transform 0.35s var(--ease); }
.ds-done-badge, .ds-lock { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(7,11,18,0.85); border: 1px solid var(--accent-line); font-size: 0.7rem; font-weight: 700; color: #bdf7df; }
.ds-done-badge i { color: var(--accent); }
.ds-lock { border-color: var(--line-strong); color: var(--muted); }
.ds-lock i { color: var(--warn); }

/* ---------- Kütüphane ---------- */
.ds-head .between { align-items: flex-end; }
.ds-head .sub { margin-top: 4px; }
.ds-overall { min-width: 230px; padding: 16px 18px; display: grid; gap: 10px; }
.ds-overall-top { display: flex; align-items: baseline; gap: 8px; }
.ds-overall-top b { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; font-weight: 700; }
.ds-overall-top b small { font-size: 1rem; color: var(--muted-2); }
.ds-overall-top span { font-size: 0.85rem; color: var(--muted); }
.ds-resume { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 30px; align-items: center; padding: 18px; margin-bottom: 14px; border-color: var(--accent-line); background: linear-gradient(135deg, rgba(52,240,168,0.07), rgba(34,201,217,0.02) 60%), var(--surface); }
.ds-resume-copy { display: grid; gap: 12px; align-content: center; padding: 6px 12px 6px 0; }
.ds-resume-copy .row { margin-top: 4px; }
.ds-resume-media:hover .ds-play, .ds-card:hover .ds-play { opacity: 1; transform: scale(1); }
.ds-resume-media:hover img, .ds-card:hover .ds-thumb img { transform: scale(1.04); }
.ds-thumb-big .ds-play { opacity: 1; transform: scale(1); width: 64px; height: 64px; margin: -32px 0 0 -32px; font-size: 1.6rem; }
.ds-allDone { grid-template-columns: 1fr; padding: 26px; }
.ds-module { margin-top: 38px; }
.ds-module-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ds-module-head .h3 { font-size: 1.3rem; margin-top: 2px; }
.ds-module-head .sub { margin-top: 4px; font-size: 0.9rem; }
.ds-module-head .chips { margin-top: 0; }
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.ds-card { display: flex; flex-direction: column; gap: 12px; padding: 10px; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
a.ds-card:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
a.ds-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ds-card-body { display: grid; gap: 4px; padding: 0 6px 8px; }
.ds-n { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.ds-n i { color: var(--accent); vertical-align: -2px; }
.ds-card-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.3; letter-spacing: -0.01em; }
.ds-card-sum { font-size: 0.86rem; color: var(--muted); line-height: 1.5; }
.ds-card.soon { opacity: 0.62; }
.ds-card.soon .ds-thumb img { filter: grayscale(0.7) brightness(0.7); }

/* ---------- Ders sayfası ---------- */
.ds-watch { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; align-items: start; margin-top: 6px; }
.ds-main { min-width: 0; }
.ds-keys { margin-top: 10px; font-size: 0.8rem; color: var(--muted-2); }
.ds-keys summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.ds-keys summary::-webkit-details-marker { display: none; }
.ds-keys summary:hover { color: var(--text); }
.ds-keys ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.ds-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-top: 18px; }
.ds-title-copy { display: grid; gap: 8px; min-width: 0; }
.ds-title .chips { margin-top: 4px; }
.ds-title form { flex: none; }
.ds-title .btn.ds-done { border-color: var(--accent-line); background: var(--accent-tint); color: #bdf7df; }
.ds-title .btn.ds-done i { color: var(--accent); }

.ds-tabs { margin-top: 26px; }
.ds-tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ds-tab-bar::-webkit-scrollbar { display: none; }
.ds-tabs:not(.tabs-on) .ds-tab-bar { display: none; }
.ds-tab-bar button { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 12px 14px; font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; color: var(--muted); white-space: nowrap; border-radius: 10px 10px 0 0; transition: color 0.2s, background 0.2s; }
.ds-tab-bar button:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.ds-tab-bar button[aria-selected="true"] { color: var(--text); }
.ds-tab-bar button[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad); }
.ds-tab-bar button i { font-size: 1.1rem; color: var(--accent); }
.ds-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,0.07); font-size: 0.72rem; line-height: 20px; text-align: center; color: var(--muted); }
.ds-panel { padding: 22px 0 6px; display: grid; gap: 14px; align-content: start; }
.ds-tabs:not(.tabs-on) .ds-panel + .ds-panel { border-top: 1px solid var(--line); margin-top: 10px; }
.tabs-on .ds-panel-h { display: none; }
.ds-panel-h { font-size: 1.1rem; }
.ds-panel > p { color: var(--muted); max-width: 74ch; }
.ds-sub { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; margin-top: 10px; }
.ds-sub i { color: var(--accent); font-size: 1.15rem; }
.ds-learn { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.ds-learn li { display: flex; gap: 10px; font-size: 0.93rem; color: var(--muted); }
.ds-learn i { color: var(--accent); flex: none; margin-top: 3px; }
.ds-steps { list-style: none; counter-reset: st; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 6px; }
.ds-steps li { counter-increment: st; position: relative; padding: 11px 12px 11px 50px; font-size: 0.93rem; color: var(--muted); border-radius: 11px; }
.ds-steps li + li { border-top: 1px solid var(--line); }
.ds-steps li::before { content: counter(st); position: absolute; left: 12px; top: 10px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--grad); color: var(--accent-ink); font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; }
.ds-steps b { color: var(--text); font-weight: 600; }
.ds-tips { display: flex; gap: 12px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(255,179,107,0.35); background: rgba(255,179,107,0.06); }
.ds-tips > i { color: var(--warn); font-size: 1.3rem; flex: none; }
.ds-tips b { font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warn); }
.ds-tips ul { list-style: none; display: grid; gap: 6px; margin-top: 6px; font-size: 0.92rem; color: var(--muted); }
.ds-tips li { position: relative; padding-left: 14px; }
.ds-tips li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--warn); }
.ds-links { list-style: none; display: grid; gap: 8px; }
.ds-links a { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); transition: border-color 0.2s; }
.ds-links a:hover { border-color: var(--accent-line); }
.ds-links i { color: var(--accent); font-size: 1.2rem; }
.ds-links span { display: grid; font-weight: 600; font-size: 0.92rem; }
.ds-links small { font-weight: 400; color: var(--muted-2); font-size: 0.78rem; }

.ds-time { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--accent-tint); border: 1px solid var(--accent-line); color: var(--accent); font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
button.ds-time { cursor: pointer; transition: background 0.2s; }
button.ds-time:hover { background: rgba(52,240,168,0.2); }
.ds-time i { font-size: 0.7rem; }
.ds-chapters { list-style: none; display: grid; gap: 4px; }
.ds-chapters button { width: 100%; display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 11px 14px; border-radius: 12px; border: 1px solid transparent; font-size: 0.93rem; color: var(--muted); transition: background 0.2s, border-color 0.2s, color 0.2s; }
.ds-chapters button:hover { background: rgba(255,255,255,0.03); color: var(--text); }
.ds-chapters button > i { opacity: 0; color: var(--accent); transition: opacity 0.2s; }
.ds-chapters button:hover > i { opacity: 1; }
.ds-chapters button .ds-time { justify-self: start; }
.ds-chapters button.on { background: var(--accent-tint); border-color: var(--accent-line); color: var(--text); }
.ds-chapters button.on > i { opacity: 1; }

.ds-files { list-style: none; display: grid; gap: 10px; }
.ds-file { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); transition: border-color 0.2s, transform 0.25s var(--ease); }
.ds-file:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.ds-file-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); border: 1px solid var(--accent-line); color: var(--accent); font-size: 1.5rem; }
.ds-file-copy { display: grid; gap: 2px; min-width: 0; }
.ds-file-copy b { font-weight: 600; font-size: 0.95rem; }
.ds-file-copy small { color: var(--muted-2); font-size: 0.78rem; }
.ds-file .btn { pointer-events: none; }

.ds-note-form { display: grid; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.ds-note-form .field > span { color: var(--text); }
.ds-note-form .row { align-items: center; }
.ds-notes { list-style: none; display: grid; gap: 8px; }
.ds-note { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 12px 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.ds-note p { font-size: 0.93rem; line-height: 1.55; padding-top: 1px; overflow-wrap: anywhere; }
.ds-note.new { animation: dsNew 1.2s var(--ease); }
@keyframes dsNew { from { border-color: var(--accent); background: var(--accent-tint); } }
.ds-icon-btn { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--muted-2); }
.ds-icon-btn:hover { color: var(--danger); background: var(--danger-tint); }
.ds-notes-empty { padding: 6px 2px; }

.ds-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.ds-pn { display: grid; gap: 4px; padding: 16px 18px; transition: border-color 0.25s, transform 0.25s var(--ease); }
.ds-pn:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.ds-pn .hint { display: inline-flex; align-items: center; gap: 6px; }
.ds-pn b { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.ds-pn-next { text-align: right; justify-items: end; }

.ds-side { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; padding: 16px; display: grid; gap: 12px; align-content: start; scrollbar-width: thin; }
.ds-side-head { display: grid; gap: 6px; padding: 4px 6px 12px; border-bottom: 1px solid var(--line); }
.ds-side-head b { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.ds-list { list-style: none; display: grid; gap: 4px; }
.ds-li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid transparent; transition: background 0.2s, border-color 0.2s; }
a.ds-li:hover { background: rgba(255,255,255,0.03); }
.ds-li.on { background: var(--accent-tint); border-color: var(--accent-line); }
.ds-li-icon { font-size: 1.25rem; color: var(--muted-2); margin-top: 1px; }
.ds-li.done .ds-li-icon, .ds-li.on .ds-li-icon { color: var(--accent); }
.ds-li-copy { display: grid; gap: 3px; min-width: 0; }
.ds-li-title { font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.ds-li-meta { font-size: 0.76rem; color: var(--muted-2); }
.ds-li .ds-bar { height: 3px; margin-top: 4px; }
.ds-li.soon { opacity: 0.55; }
.ds-li.soon .ds-li-icon { color: var(--warn); font-size: 1.1rem; }
.ds-side-all { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--accent); padding: 8px 6px 2px; border-top: 1px solid var(--line); }
.ds-admin-log li { grid-template-columns: 110px 1fr auto; }

/* ---------- Oynatıcı ---------- */
.pl { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,0.45); user-select: none; -webkit-user-select: none; }
.pl-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.pl:not(.pl-on) .pl-ui { display: none; }
.pl-on .pl-video { cursor: pointer; }
.pl.idle, .pl.idle .pl-video { cursor: none; }
.pl-video::cue { background: rgba(7,11,18,0.82); color: #fff; font-family: var(--font-body); font-size: 1.05em; line-height: 1.4; }
.pl-cc { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); width: max-content; max-width: 86%; display: grid; justify-items: center; gap: 4px; text-align: center; pointer-events: none; transition: bottom 0.3s var(--ease); }
.pl-cc span { padding: 5px 12px; border-radius: 8px; background: rgba(4,7,12,0.82); color: #fff; font-size: clamp(0.85rem, 1.7vw, 1.3rem); font-weight: 500; line-height: 1.4; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.pl:not(.idle) .pl-cc, .pl:not(.is-playing) .pl-cc { bottom: 88px; }
.pl.is-fs .pl-cc span { font-size: clamp(1.1rem, 2.2vw, 2rem); }
.pl-ui { position: absolute; inset: 0; pointer-events: none; }
.pl-ui > * { pointer-events: auto; }

.pl-big { position: absolute; left: 50%; top: 50%; width: 82px; height: 82px; margin: -41px 0 0 -41px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--accent-ink); font-size: 2rem; box-shadow: 0 18px 50px rgba(52,240,168,0.4); transition: transform 0.3s var(--ease), opacity 0.25s var(--ease); }
.pl-big:hover { transform: scale(1.07); }
.pl-big i { margin-left: 4px; }
.pl.is-playing .pl-big, .pl.is-ended .pl-big, .pl.is-wait .pl-big { opacity: 0; pointer-events: none; transform: scale(0.8); }
.pl.is-started:not(.is-playing) .pl-big { width: 68px; height: 68px; margin: -34px 0 0 -34px; font-size: 1.7rem; background: rgba(7,11,18,0.72); color: var(--text); box-shadow: none; border: 1px solid var(--line-strong); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pl-spin { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.15); border-top-color: var(--accent); animation: saspin 0.8s linear infinite; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.pl.is-wait .pl-spin { opacity: 1; }
.pl-pulse { position: absolute; left: 50%; top: 20%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; padding: 14px 18px; border-radius: 16px; background: rgba(7,11,18,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; opacity: 0; pointer-events: none; }
.pl-pulse i { font-size: 1.7rem; color: var(--accent); }
.pl-pulse.go { animation: plPulse 0.75s var(--ease); }
@keyframes plPulse { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); } }
.pl-toast { position: absolute; left: 14px; top: 14px; max-width: calc(100% - 28px); display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(7,11,18,0.85); border: 1px solid var(--line-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 0.85rem; box-shadow: 0 12px 30px rgba(0,0,0,0.4); }
.pl-toast i { color: var(--accent); font-size: 1.1rem; }
.pl-toast b { font-family: var(--font-display); }
.pl-toast button { padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line-strong); font-size: 0.78rem; font-weight: 600; }
.pl-toast button:hover { border-color: var(--accent-line); color: var(--accent); }

.pl-end { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(4,7,12,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pl-end-card { display: grid; gap: 10px; justify-items: center; text-align: center; max-width: 420px; padding: 24px 26px; border-radius: 18px; border: 1px solid var(--line-strong); background: rgba(14,20,32,0.92); }
.pl-end-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.pl-end-card .row { justify-content: center; margin-top: 4px; }

.pl-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 8px; background: linear-gradient(180deg, transparent, rgba(4,7,12,0.55) 40%, rgba(4,7,12,0.88)); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.pl.idle .pl-bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
.pl.idle .pl-toast { opacity: 0; }
.pl-seek { position: relative; height: 20px; display: flex; align-items: center; cursor: pointer; touch-action: none; outline: none; }
.pl-track { position: relative; width: 100%; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.2); overflow: hidden; transition: height 0.15s; }
.pl-seek:hover .pl-track, .pl-seek.drag .pl-track, .pl-seek:focus-visible .pl-track { height: 6px; }
.pl-seek:focus-visible { box-shadow: 0 0 0 2px var(--accent-line); border-radius: 6px; }
.pl-buf, .pl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.pl-buf { background: rgba(255,255,255,0.28); }
.pl-fill { background: var(--grad); }
.pl-marks { position: absolute; left: 0; right: 0; top: 50%; height: 8px; transform: translateY(-50%); pointer-events: none; }
.pl-marks span { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: rgba(4,7,12,0.85); }
.pl-knob { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(52,240,168,0.35); transform: scale(0); transition: transform 0.15s var(--ease); pointer-events: none; }
.pl-seek:hover .pl-knob, .pl-seek.drag .pl-knob, .pl-seek:focus-visible .pl-knob { transform: scale(1); }
.pl-tip { position: absolute; bottom: 24px; left: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 1px; padding: 6px 10px; border-radius: 9px; background: rgba(7,11,18,0.92); border: 1px solid var(--line-strong); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; }
.pl-tip b { font-family: var(--font-display); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.pl-tip span { font-size: 0.72rem; color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.pl-tip span:empty { display: none; }
.pl-seek.hover .pl-tip { opacity: 1; }
.pl-row { display: flex; align-items: center; gap: 2px; margin-top: 2px; min-width: 0; }
.pl-btn { position: relative; width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 1.35rem; transition: background 0.2s, color 0.2s; }
.pl-btn:hover { background: rgba(255,255,255,0.1); }
.pl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pl-btn small { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -38%); font-size: 0.5rem; font-weight: 700; font-family: var(--font-display); pointer-events: none; }
.pl-btn.on { color: var(--accent); }
.pl-btn.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 7px; height: 2px; border-radius: 2px; background: var(--accent); }
.pl-speed { width: auto; min-width: 44px; padding: 0 8px; font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-vol { display: flex; align-items: center; }
.pl-vol input { width: 0; opacity: 0; height: 4px; margin: 0; transition: width 0.25s var(--ease), opacity 0.2s, margin 0.25s; appearance: none; -webkit-appearance: none; border-radius: 4px; cursor: pointer; background: linear-gradient(90deg, var(--accent) var(--v, 100%), rgba(255,255,255,0.25) var(--v, 100%)); }
.pl-vol:hover input, .pl-vol:focus-within input { width: 76px; opacity: 1; margin: 0 8px 0 2px; }
.pl-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.pl-vol input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.pl-time { margin-left: 8px; font-family: var(--font-display); font-size: 0.84rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-sep { margin: 0 5px; color: var(--muted-2); }
.pl-chapter { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line-strong); font-size: 0.82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pl-chapter:empty { display: none; }
.pl-grow { flex: 1; }
.pl-menu-wrap { position: relative; }
.pl-menu { position: absolute; right: 0; bottom: 48px; display: grid; min-width: 120px; padding: 6px; border-radius: 12px; background: rgba(14,20,32,0.96); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px rgba(0,0,0,0.5); }
.pl-menu button { padding: 8px 12px; border-radius: 8px; text-align: left; font-size: 0.86rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-menu button:hover { background: rgba(255,255,255,0.07); }
.pl-menu button[aria-checked="true"] { color: var(--accent); }
.pl-menu button[aria-checked="true"]::after { content: " ✓"; }
.pl.is-fs { border-radius: 0; border: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.pl.is-fs .pl-video::cue { font-size: 1.4em; }

@media (max-width: 1100px) {
  .ds-watch { grid-template-columns: 1fr; }
  .ds-side { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .ds-resume { grid-template-columns: 1fr; gap: 16px; padding: 12px; }
  .ds-resume-copy { padding: 0 6px 6px; }
  .ds-overall { width: 100%; }
  .ds-learn { grid-template-columns: 1fr; }
  .ds-title { flex-direction: column; gap: 14px; }
  .ds-title form, .ds-title .btn { width: 100%; }
  .ds-prevnext { grid-template-columns: 1fr; }
  .ds-pn-next { text-align: left; justify-items: start; }
  .ds-keys { display: none; }
  .ds-tab-bar button { padding: 12px 10px; font-size: 0.86rem; }
  .ds-tab-bar button i { display: none; }
  .ds-file { grid-template-columns: 44px 1fr; }
  .ds-file .btn { display: none; }
  .ds-chapters button { grid-template-columns: 64px 1fr; }
  .ds-chapters button > i { display: none; }
  .ds-watch { margin-left: -16px; margin-right: -16px; }
  .ds-main > :not(.pl) { margin-left: 16px; margin-right: 16px; }
  .ds-side { margin: 0 16px; }
  .pl { border-radius: 0; border-left: 0; border-right: 0; }
  .pl-bar { padding: 30px 6px 4px; }
  .pl-btn { width: 36px; height: 36px; font-size: 1.2rem; }
  .pl-chapter, .pl-vol input, [data-act=pip] { display: none; }
  .pl-time { font-size: 0.76rem; margin-left: 4px; }
  .pl-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-spin { animation: none !important; }
}

/* ============================================================
   Yönetim paneli (14 Ekim 2026)
   ============================================================ */
.subnav { display: flex; gap: 4px; flex-wrap: wrap; margin: -10px 0 26px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.subnav a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px; font-size: 0.86rem; font-weight: 600; color: var(--muted); transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.subnav a i { font-size: 1.05rem; }
.subnav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.subnav a.on { color: var(--accent-ink); background: var(--grad); }
.subnav a.on i { color: var(--accent-ink); }
.stats-6 { grid-template-columns: repeat(6, 1fr); }
.stats-4 { grid-template-columns: repeat(4, 1fr); }
.stat.warn { border-color: rgba(255, 179, 107, 0.4); }
.stat.warn b { color: var(--warn); }
.warn-text { color: var(--warn); font-weight: 600; }
.mt { margin-top: 22px; }
.row-skip td { opacity: 0.55; }
.input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem; }
.input-sm { padding: 9px 12px; font-size: 0.86rem; }
.grid-2.tight { gap: 14px; }
fieldset.field { border: 0; min-width: 0; }
.check-grid { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.check-grid .check { align-items: center; }
.check-grid .check input { margin-top: 0; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted-2); border: 1px solid transparent; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); }
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.04); }
.icon-btn i { font-size: 1rem; }

/* Etiketler (gruplar) */
.tags { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; border: 1px solid; white-space: nowrap; }
.tag-mint { color: #bdf7df; border-color: var(--accent-line); background: var(--accent-tint); }
.tag-teal { color: #b6ecf3; border-color: rgba(34, 201, 217, 0.4); background: rgba(34, 201, 217, 0.1); }
.tag-amber { color: #ffd3a6; border-color: rgba(255, 179, 107, 0.4); background: rgba(255, 179, 107, 0.1); }
.tag-rose { color: #f3c2c8; border-color: rgba(239, 162, 171, 0.45); background: rgba(239, 162, 171, 0.1); }
.tag-violet { color: #d5c5ff; border-color: rgba(167, 139, 250, 0.45); background: rgba(167, 139, 250, 0.1); }
.tag-slate { color: var(--muted); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.03); }
a.tag:hover { filter: brightness(1.15); }
.color-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.color-opt { cursor: pointer; }
.color-opt input { position: absolute; opacity: 0; pointer-events: none; }
.color-opt .tag { padding: 6px 12px; font-size: 0.78rem; opacity: 0.55; transition: opacity 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.color-opt input:checked + .tag { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }
.color-opt input:focus-visible + .tag { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Liste: filtreler + toplu işlem */
.filters { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.filters .input { padding: 11px 14px; font-size: 0.9rem; }
.filters .row { grid-column: 1 / -1; justify-content: flex-end; align-items: center; }
.bulk { display: grid; gap: 8px; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; }
.bulk-bar .check { align-items: center; margin-right: auto; white-space: nowrap; }
.bulk-bar .check input { margin-top: 0; }
.bulk-bar .input-sm { width: auto; min-width: 150px; }
.bulk-bar input[name="onay"] { max-width: 160px; }
.bulk > .hint { margin: -2px 0 6px; }
.table-wrap { overflow-x: auto; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table th.num { text-align: right; }
.tbl-check { width: 44px; padding-right: 0 !important; }
.tbl-check input { width: 16px; height: 16px; accent-color: var(--accent); vertical-align: middle; }
.chips-tight { gap: 6px; margin-top: 0; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; font-size: 0.85rem; color: var(--muted); }
.toolbar-3 { grid-template-columns: 2fr 1.4fr 1fr auto; }

/* Özet */
.feed li { grid-template-columns: 90px 1fr; }
.rank { list-style: none; display: grid; gap: 12px; }
.rank li { display: grid; grid-template-columns: 1fr 120px auto; gap: 12px; align-items: center; font-size: 0.86rem; }
.rank-name { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-bar { display: inline-block; vertical-align: middle; width: 120px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.rank-bar span { display: block; height: 100%; border-radius: 999px; background: var(--grad); }
.rank b { font-family: var(--font-display); font-size: 0.95rem; }
.rank b small { color: var(--muted-2); font-weight: 500; }

/* Detay */
.notes { list-style: none; display: grid; gap: 12px; margin-top: 16px; }
.notes li { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.note-head { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--muted-2); margin-bottom: 4px; }
.note-head b { color: var(--muted); font-weight: 600; }
.note-head form { margin-left: auto; }
.notes p { font-size: 0.9rem; white-space: pre-wrap; }
.sess { list-style: none; display: grid; gap: 10px; }
.sess li { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 0.86rem; }
.sess li:last-child { border-bottom: 0; padding-bottom: 0; }
.sess li > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sess small { color: var(--muted-2); font-size: 0.76rem; }
.sess form { flex: none; }
.lesson-actions { display: inline-flex; align-items: center; gap: 4px; justify-self: end; }
.lesson-actions form { display: contents; }
.mod-block { margin-bottom: 18px; }
.mod-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px 6px; }
.sess-page { grid-template-columns: 2fr 1fr; }

@media (max-width: 1100px) {
  .stats-6 { grid-template-columns: repeat(3, 1fr); }
  .filters { grid-template-columns: 1fr 1fr; }
  .toolbar-3 { grid-template-columns: 1fr 1fr; }
  .sess-page { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .subnav { gap: 2px; padding: 4px; }
  .subnav a { padding: 8px 10px; font-size: 0.8rem; }
  .stats-6, .stats-4 { grid-template-columns: 1fr 1fr; }
  .filters { grid-template-columns: 1fr; }
  .bulk-bar .check { margin-right: 0; width: 100%; }
  .bulk-bar .input-sm { flex: 1 1 140px; }
  .table-select tr { grid-template-columns: 24px 1fr; }
  .table-select td.tbl-check { grid-row: 1 / span 6; padding: 4px 0 !important; align-items: start; }
  .table-select td.tbl-check::before, .table-select td:nth-child(2)::before { display: none; }
  .table .num { text-align: left; }
  .rank li { grid-template-columns: 1fr auto; }
  .rank-bar { display: none; }
  .feed li { grid-template-columns: 1fr; }
}

/* ---------- Teklif Asistanı (views-teklif.js) ---------- */
.ta-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 20px; }
.ta-opt { padding: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem; color: var(--muted); }
.ta-opt b { color: var(--text); font-weight: 600; }
.ta-opt.chosen { border-color: var(--accent-line); }
.ta-opt form, .ta-opt > .btn { margin-top: auto; }
.ta-opt-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ta-code { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin-bottom: 20px; scroll-margin-top: 90px; }
.ta-code > .card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ta-code-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ta-code-head code { font-size: 0.82rem; color: var(--accent); }
.ta-code-box { position: relative; }
.ta-code-box [data-copy] { position: absolute; top: 10px; right: 10px; }
.ta-code-box pre { max-height: 460px; overflow: auto; padding: 16px; padding-top: 48px; border-radius: 12px; border: 1px solid var(--line); background: #05080d; font-size: 0.78rem; line-height: 1.55; color: #c9d4e3; white-space: pre; }
.ta-steps { padding-left: 20px; display: grid; gap: 8px; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 860px) { .ta-code { grid-template-columns: minmax(0, 1fr); } }
.ta-opts > *, .sa-chips .chip { min-width: 0; } .sa-chips .chip { white-space: normal; }