/* Defter Studio — tek stil dosyası. Renkler token olarak; koyu tema varsayılan, açık tema destekli. */
:root {
  --bg: #0f1115; --pane: #181a20; --card: #20232b; --card2: #262a33; --line: #2e323d;
  --fg: #e8eaf0; --muted: #9aa0ad; --accent: #8ab4ff; --accent-fg: #0b1a33; --accent-soft: #1d2d4d;
  --ok: #5fd39a; --no: #ff7b7b; --warn: #f2c94c; --chip: #2a2e38;
  --mm-node: #262a33; --mm-root: #34405a;
  --r: 14px; --shadow: 0 10px 40px rgba(0,0,0,.45);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f3f4f7; --pane: #ffffff; --card: #f6f7fa; --card2: #eceef3; --line: #e1e4ea;
    --fg: #1b1d22; --muted: #646b78; --accent: #2f5fd0; --accent-fg: #fff; --accent-soft: #e5edff;
    --chip: #eceef3; --mm-node: #ffffff; --mm-root: #dfe8ff; --shadow: 0 10px 40px rgba(20,30,60,.15);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f3f4f7; --pane: #ffffff; --card: #f6f7fa; --card2: #eceef3; --line: #e1e4ea;
  --fg: #1b1d22; --muted: #646b78; --accent: #2f5fd0; --accent-fg: #fff; --accent-soft: #e5edff;
  --chip: #eceef3; --mm-node: #ffffff; --mm-root: #dfe8ff; --shadow: 0 10px 40px rgba(20,30,60,.15);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--fg); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.boot { display: grid; place-items: center; height: 100vh; color: var(--muted); }
.muted { color: var(--muted); } .small { font-size: 13px; } .center { text-align: center; justify-content: center; }
.grow { flex: 1; } .row { display: flex; align-items: center; } .gap { gap: 8px; } .wrap { flex-wrap: wrap; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.link { background: none; border: 0; color: var(--accent); padding: 0; text-decoration: underline; }

/* Düğmeler */
.btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 16px; border: 1px solid var(--line); background: var(--card2); white-space: nowrap; }
.btn:hover { filter: brightness(1.12); }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 600; }
.btn.ghost { background: transparent; }
.btn.outline { background: transparent; border-color: var(--line); }
.btn.danger { background: #5a1f24; border-color: #7a2a31; color: #ffd7d7; }
.btn.small { padding: 5px 11px; font-size: 13px; }
.btn.wide { width: 100%; justify-content: center; padding: 10px; }
.btn.on { background: var(--accent-soft); border-color: var(--accent); }
.btn:disabled { opacity: .6; cursor: default; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: var(--fg); }
.icon-btn:hover { background: var(--chip); }
.icon-btn.small { width: 28px; height: 28px; }
.icon-btn.round { border-radius: 50%; background: var(--chip); }
.icon-btn.big { width: 64px; height: 64px; border: 1px solid var(--line); }
.icon-btn.accent { color: var(--accent); }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--chip); border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.chip.on { border-color: var(--accent); background: var(--accent-soft); }
.chip.ghosty { background: transparent; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.dot.ok { background: var(--ok); } .dot.bad { background: var(--no); } .dot.skip { background: var(--warn); }
.input { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.input.small { width: auto; padding: 6px 10px; font-size: 13px; }
textarea.input { resize: vertical; }
textarea.code { font: 13px/1.5 ui-monospace, Consolas, monospace; min-height: 55vh; }

/* Üst çubuk */
.topbar { height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 650; font-size: 18px; }
.logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.sep { color: var(--muted); }
.nb-name { font-size: 18px; font-weight: 500; margin: 0; padding: 4px 8px; border-radius: 8px; max-width: 46vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nb-name:hover, .nb-name:focus { background: var(--card); outline: none; }
.status-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; cursor: pointer; max-width: 38vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Ana sayfa */
.home { max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; }
.home-head { display: flex; align-items: end; gap: 16px; margin-bottom: 22px; }
.home-head h1 { margin: 0; font-size: 30px; font-weight: 600; }
.home-head > div { flex: 1; }
.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.nb-card { position: relative; min-height: 190px; background: var(--pane); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; text-align: left; }
.nb-card:hover { border-color: var(--accent); }
.nb-card.new { align-items: center; justify-content: center; color: var(--accent); border-style: dashed; background: transparent; }
.nb-emoji { font-size: 34px; }
.nb-title { font-size: 17px; font-weight: 600; flex: 1; }
.nb-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.nb-card:hover .nb-actions, .nb-card:focus-within .nb-actions { opacity: 1; }

/* Defter düzeni */
.nb { position: relative; display: grid; grid-template-columns: minmax(250px, 1fr) minmax(360px, 2fr) minmax(300px, 1.25fr); gap: 14px; padding: 0 14px 14px; height: calc(100vh - 60px); }
.pane { background: var(--pane); border-radius: 18px; padding: 14px; overflow: auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.pane-head { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.pane-head h2 { font-size: 16px; font-weight: 500; margin: 0; }
.mobile-tabs { display: none; }
.empty { text-align: center; padding: 20px 10px; color: var(--muted); }

/* Kaynaklar */
.src-search { display: flex; gap: 6px; padding: 6px; }
.src-search .input { border: 0; background: transparent; }
.src-all { display: flex; align-items: center; padding: 6px 4px; font-size: 14px; }
.src-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.src { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 10px; }
.src:hover { background: var(--card); }
.src-ic { font-size: 10px; font-weight: 700; color: #ff8a80; border: 1px solid currentColor; border-radius: 5px; padding: 1px 4px; min-width: 32px; text-align: center; }
.src-ic.web { color: #80cbc4; } .src-ic.youtube { color: #ff5252; } .src-ic.audio { color: #ce93d8; } .src-ic.text { color: #90caf9; } .src-ic.docx { color: #64b5f6; }
.src-title { flex: 1; text-align: left; background: none; border: 0; padding: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.src .icon-btn { opacity: 0; } .src:hover .icon-btn, .src:focus-within .icon-btn { opacity: 1; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.src-text { white-space: pre-wrap; font: 13px/1.6 ui-monospace, Consolas, monospace; background: var(--card); padding: 14px; border-radius: 10px; max-height: 60vh; overflow: auto; }
.dropzone { border: 2px dashed var(--line); border-radius: 16px; padding: 30px; display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--muted); cursor: pointer; }
.dropzone.over, .dropzone:hover { border-color: var(--accent); color: var(--fg); }
.add-src { display: grid; gap: 18px; }
.add-row { display: grid; gap: 8px; } .add-row h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.search-res { list-style: none; padding: 0; display: grid; gap: 10px; }
.chk { display: flex; gap: 10px; align-items: flex-start; }

/* Sohbet */
.chat-pane { padding-bottom: 8px; }
.chat-log { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 4px 4px 10px; }
.summary p { margin-top: 0; }
.msg { max-width: 100%; }
.msg.user { align-self: flex-end; background: var(--card2); border-radius: 18px 18px 4px 18px; padding: 10px 16px; max-width: 80%; white-space: pre-wrap; }
.msg.assistant { padding: 2px 4px; }
.msg.error { color: var(--no); background: color-mix(in srgb, var(--no) 10%, transparent); padding: 10px 14px; border-radius: 12px; }
.msg-actions { display: flex; gap: 4px; margin-top: 4px; opacity: .7; }
.msg-actions:hover { opacity: 1; }
.dots { animation: blink 1.2s infinite; letter-spacing: 3px; color: var(--muted); }
@keyframes blink { 50% { opacity: .3; } }
.composer { display: flex; align-items: flex-end; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 8px 8px 8px 16px; }
.chat-input { flex: 1; border: 0; background: transparent; resize: none; outline: none; padding: 6px 0; max-height: 180px; }
.src-count { padding-bottom: 8px; white-space: nowrap; }
.send-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; flex: none; }
.disclaimer { text-align: center; margin: 2px 0 0; }

/* Markdown */
.md { line-height: 1.65; overflow-wrap: anywhere; }
.md h1 { font-size: 24px; } .md h2 { font-size: 20px; margin-top: 1.4em; } .md h3 { font-size: 17px; }
.md table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 14px; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.md th { background: var(--card2); }
.md code { background: var(--card2); padding: 1px 5px; border-radius: 5px; }
.md pre { background: var(--card2); padding: 12px; border-radius: 10px; overflow: auto; }
.md blockquote { border-left: 3px solid var(--accent); margin: 10px 0; padding: 2px 14px; color: var(--muted); }
.cite { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin: 0 2px; border-radius: 999px; border: 0; background: var(--chip); color: var(--fg); font-size: 11px; font-weight: 600; vertical-align: 2px; }
.cite:hover { background: var(--accent); color: var(--accent-fg); }
.cite-pop { position: fixed; z-index: 90; width: min(420px, 92vw); max-height: 300px; overflow: auto; background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); font-size: 13.5px; }
.cite-pop-head { margin-bottom: 6px; color: var(--muted); }
.cite-pop-text { white-space: pre-wrap; }

/* Studio */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); text-align: left; font-size: 13.5px; min-height: 74px; }
.tile:hover { border-color: var(--accent); background: var(--card2); }
.t-podcast { --c: #8ab4ff; } .t-slides { --c: #f48fb1; } .t-video { --c: #80cbc4; } .t-mindmap { --c: #b39ddb; } .t-report { --c: #f6c26b; }
.t-flashcards { --c: #ffd54f; } .t-quiz { --c: #81d4fa; } .t-infographic { --c: #c5e1a5; } .t-table { --c: #90caf9; } .t-note { --c: #bdbdbd; }
.tile svg, .art-ic svg { color: var(--c); }
.art-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.art-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 12px; cursor: pointer; text-align: left; background: none; border: 0; width: 100%; }
.art-row:hover { background: var(--card); }
.art-row.error { background: color-mix(in srgb, var(--no) 8%, transparent); cursor: default; }
.art-row.running { cursor: default; }
.art-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--card2); flex: none; font-weight: 700; color: var(--no); }
.art-ic.spin svg { animation: pulse 1.4s ease-in-out infinite; color: var(--accent); }
@keyframes pulse { 50% { opacity: .35; transform: scale(.9); } }
.art-main { flex: 1; min-width: 0; }
.art-title { font-size: 14px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.note-btn { align-self: center; margin-top: auto; position: sticky; bottom: 0; box-shadow: var(--shadow); flex: none; }
.art-list { padding-bottom: 8px; }
.menu { position: fixed; z-index: 80; background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: var(--shadow); min-width: 220px; }
.menu-i { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 8px; text-align: left; }
.menu-i:hover { background: var(--chip); } .menu-i.danger { color: var(--no); }

/* Görüntüleyici: orta ve sağ paneli kaplar */
.viewer { position: absolute; top: 0; right: 14px; bottom: 14px; left: calc((100% - 28px) * 0.235 + 28px); background: var(--pane); border-radius: 18px; padding: 16px 20px; overflow: auto; z-index: 5; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
.viewer.full { position: fixed; inset: 0; border-radius: 0; z-index: 60; }
.viewer-head { display: flex; align-items: center; gap: 4px; }
.crumb { font-size: 15px; }
.viewer-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.viewer-title h2 { margin: 0; font-size: 24px; font-weight: 500; outline: none; border-radius: 8px; padding: 2px 6px; }
.viewer-title h2:focus { background: var(--card); }
.viewer-body { flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; }
.viewer-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.md-edit { min-height: 60vh; font: 14px/1.6 ui-monospace, Consolas, monospace; }

/* Modal */
.modal-back { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; }
.modal { background: var(--pane); border-radius: 22px; width: min(560px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: var(--shadow); border: 1px solid var(--line); }
.modal.wide { width: min(980px, 100%); }
.modal-head { display: flex; align-items: center; padding: 18px 20px 8px; }
.modal-head h2 { flex: 1; margin: 0; font-size: 21px; font-weight: 500; }
.modal-body { padding: 8px 20px 16px; overflow: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
.cust { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; } .field > label { font-weight: 500; }
.field.inline { grid-template-columns: 1fr; }
.opt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.opt-card { text-align: left; border-radius: 18px; border: 1px solid var(--line); background: transparent; padding: 14px 16px; display: grid; gap: 6px; position: relative; }
.opt-card b { font-weight: 500; font-size: 16px; }
.opt-card span { font-size: 13.5px; color: var(--muted); }
.opt-card.on { background: var(--accent-soft); border-color: var(--accent); }
.opt-card.on::after { content: '✓'; position: absolute; top: 12px; right: 14px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); font-size: 12px; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; width: fit-content; }
.seg button { border: 0; background: transparent; padding: 7px 16px; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--card2); font-weight: 600; }
.seg button.on::before { content: '✓ '; }
.settings h3 { margin: 18px 0 8px; font-size: 16px; }
.settings h3:first-child { margin-top: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ok-t { color: var(--ok); }
.versions { display: grid; gap: 8px; }
.ver { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.ver.cur { background: var(--accent-soft); }
.pick { display: grid; gap: 4px; }
#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; }
.toast { background: var(--card2); border: 1px solid var(--line); padding: 10px 18px; border-radius: 12px; box-shadow: var(--shadow); animation: up .2s; max-width: 90vw; }
.toast.error { border-color: var(--no); } .toast.ok { border-color: var(--ok); }
@keyframes up { from { transform: translateY(10px); opacity: 0; } }
.fatal { padding: 30px; color: var(--no); white-space: pre-wrap; }

/* ---------- Podcast ---------- */
.podcast { display: flex; flex-direction: column; gap: 12px; max-width: 900px; width: 100%; margin: 0 auto; }
.player { display: grid; gap: 8px; }
.player-title { font-weight: 600; font-size: 16px; }
.seek { width: 100%; accent-color: var(--accent); }
.player-row { display: flex; align-items: center; font-size: 13px; }
.time { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); }
.player-ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; }
.play-btn { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; }
.transcript { display: flex; flex-direction: column; gap: 4px; }
.tline { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.tline:hover { background: var(--card); }
.tline.on { background: var(--accent-soft); }
.tline-who { font-weight: 600; font-size: 13px; color: var(--accent); }
.tline.b .tline-who { color: #f6c26b; }
.transcript.editing .tline-text { outline: 1px dashed var(--line); border-radius: 6px; padding: 2px 6px; cursor: text; }

/* ---------- Slaytlar ---------- */
.slides-view { display: flex; flex-direction: column; gap: 10px; }
.stage-wrap { width: 100%; max-width: 1100px; margin: 0 auto; }
.deck { aspect-ratio: 16/9; width: 100%; border-radius: 14px; overflow: hidden; container-type: inline-size; cursor: pointer; }
.deck.editing { cursor: text; outline: 2px dashed var(--accent); }
.slide { position: relative; width: 100%; height: 100%; padding: 6cqw 7cqw; display: flex; flex-direction: column; justify-content: center; background: var(--s-bg); color: var(--s-fg); }
.slide h1 { font-size: 5.4cqw; margin: 0 0 1.4cqw; line-height: 1.1; }
.slide h2 { font-size: 3.6cqw; margin: 0 0 2cqw; line-height: 1.15; display: flex; gap: 1.4cqw; align-items: center; }
.slide h3 { font-size: 2.3cqw; margin: 0 0 1cqw; color: var(--s-acc); }
.slide ul { margin: 0; padding-left: 3cqw; font-size: 2.15cqw; display: grid; gap: 1cqw; }
.slide li::marker { color: var(--s-acc); }
.slide .s-sub { font-size: 2.3cqw; opacity: .8; margin: 0; }
.slide .s-body { font-size: 2cqw; opacity: .9; margin: 0 0 1.6cqw; }
.slide .s-icon { font-size: 7cqw; margin-bottom: 1cqw; }
.slide .s-num { position: absolute; right: 2.4cqw; bottom: 1.8cqw; font-size: 1.4cqw; opacity: .5; }
.L-title { background: var(--s-hero) !important; }
.s-stat { display: flex; align-items: baseline; gap: 2cqw; margin-bottom: 2cqw; }
.s-stat-v { font-size: 8cqw; font-weight: 800; color: var(--s-acc); line-height: 1; }
.s-stat-l { font-size: 2.3cqw; max-width: 40cqw; }
.s-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.s-col { background: var(--s-card); border-radius: 1.4cqw; padding: 2.4cqw; }
.slide blockquote { font-size: 4cqw; margin: 0 0 2cqw; border-left: .6cqw solid var(--s-acc); padding-left: 3cqw; font-weight: 600; }
.theme-ocean { --s-bg: #0d3b5e; --s-hero: linear-gradient(135deg, #0b2f4d, #13698f); --s-fg: #fff; --s-acc: #5fe0d0; --s-card: rgba(255,255,255,.08); }
.theme-paper { --s-bg: #f6f1e7; --s-hero: linear-gradient(135deg, #f6f1e7, #eadfc8); --s-fg: #2b2622; --s-acc: #c2410c; --s-card: rgba(0,0,0,.05); font-family: Georgia, serif; }
.theme-night { --s-bg: #12141b; --s-hero: radial-gradient(circle at 20% 20%, #273256, #12141b 70%); --s-fg: #f1f2f6; --s-acc: #8ab4ff; --s-card: rgba(255,255,255,.06); }
.theme-sunset { --s-bg: #2b1838; --s-hero: linear-gradient(135deg, #ff7e5f, #8e3b8f); --s-fg: #fff6ee; --s-acc: #ffd166; --s-card: rgba(255,255,255,.1); }
.thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; }
.thumb { flex: none; width: 150px; aspect-ratio: 16/9; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; container-type: inline-size; background: none; }
.thumb.on { border-color: var(--accent); }
.thumb .slide { pointer-events: none; }
.notes { white-space: pre-wrap; max-width: 1100px; margin: 0 auto; width: 100%; }

/* ---------- Video ---------- */
.video-view { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.video-frame { max-width: 100%; border-radius: 14px; overflow: hidden; background: #000; }
.video-canvas { display: block; max-width: 100%; max-height: 66vh; width: auto; height: auto; }
.video-frame:not(.portrait) .video-canvas { width: min(1000px, 100%); }
.video-view .player { width: 100%; max-width: 1000px; }
.video-view .player-ctrl { justify-content: flex-start; flex-wrap: wrap; }

/* ---------- Zihin haritası ---------- */
.mm-view { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 460px; }
.mm-stage { position: relative; flex: 1; min-height: 460px; background: var(--bg); border-radius: 14px; overflow: hidden; }
.mm-svg { width: 100%; height: 100%; position: absolute; inset: 0; cursor: grab; touch-action: none; }
.mm-node { cursor: pointer; } .mm-node:hover rect { filter: brightness(1.25); }
.mm-tog { cursor: pointer; }
.mm-zoom { position: absolute; right: 12px; bottom: 12px; display: grid; gap: 8px; }
.mm-info { position: absolute; left: 12px; bottom: 12px; max-width: 360px; }
.mm-info p { margin: 6px 0; }

/* ---------- Rapor ---------- */
.report-grid { display: grid; grid-template-columns: 230px 1fr; gap: 24px; }
.toc { position: sticky; top: 0; align-self: start; display: grid; gap: 2px; font-size: 13.5px; border-right: 1px solid var(--line); padding-right: 12px; max-height: 70vh; overflow: auto; }
.toc a { color: var(--muted); text-decoration: none; padding: 5px 8px; border-radius: 8px; }
.toc a:hover { background: var(--card); color: var(--fg); }
.toc .toc-h3 { padding-left: 20px; }
.report-body { max-width: 860px; }
.embed { margin: 14px 0; }

/* ---------- Bilgi kartları ---------- */
.fc-view { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.fc-card { width: min(640px, 100%); min-height: 380px; border-radius: 26px; background: var(--card2); border: 1px solid var(--line); padding: 22px 28px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: transform .25s; }
.fc-card.flipped { background: var(--card); }
.fc-card:active { transform: scale(.99); }
.fc-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; }
.fc-text { flex: 1; display: flex; align-items: center; font-size: clamp(22px, 3vw, 34px); line-height: 1.3; }
.fc-hint { text-align: center; }
.fc-explain { font-size: 14px; }
.fc-ctrl { display: flex; gap: 26px; align-items: center; }
.fc-score { display: inline-flex; align-items: center; gap: 6px; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 18px; }
.fc-score.ok { color: var(--ok); } .fc-score.no { color: var(--no); }

/* ---------- Test ---------- */
.quiz { max-width: 820px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.q-top { display: flex; align-items: center; }
.q-text { font-size: 20px; line-height: 1.5; margin: 0; font-weight: 600; }
.q-opts { display: grid; gap: 10px; }
.q-opt { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); font-size: 16px; }
.q-opt:hover:not(:disabled) { border-color: var(--accent); }
.q-opt.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--card)); }
.q-opt.wrong { border-color: var(--no); background: color-mix(in srgb, var(--no) 12%, var(--card)); }
.q-opt.dim { opacity: .6; }
.q-opt:disabled { cursor: default; color: var(--fg); }
.q-letter { font-weight: 600; min-width: 22px; }
.q-mark { margin-left: auto; }
.q-explain.ok { border-color: var(--ok); } .q-explain.no { border-color: var(--no); }
.q-bottom { display: flex; align-items: center; gap: 8px; }
.q-hint { display: flex; gap: 8px; align-items: center; }
.score { display: grid; gap: 12px; }
.big-score { font-size: 42px; font-weight: 400; }
.big-label { font-size: 22px; }
.meter { height: 34px; background: var(--card2); border-radius: 999px; overflow: hidden; }
.meter > div { height: 100%; background: var(--accent); border-radius: 999px; min-width: 34px; }
.q-list { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.attempts { display: flex; gap: 10px; align-items: flex-end; height: 90px; }
.att { display: grid; justify-items: center; gap: 4px; }
.att-bar { width: 26px; background: var(--accent); border-radius: 6px 6px 2px 2px; }

/* ---------- İnfografik ---------- */
.info-view { display: flex; flex-direction: column; gap: 10px; }
.info-wrap { display: flex; justify-content: center; }
.info-poster { --p-bg: #f1f7fd; --p-fg: #102a43; --p-acc: #1e88e5; --p-card: #fff; --p-line: #cfe3f7;
  background: var(--p-bg); color: var(--p-fg); border-radius: 18px; padding: 32px; display: grid; gap: 22px; width: 100%; max-width: 1150px; font-family: system-ui, sans-serif; }
.info-poster.o-portrait { max-width: 640px; } .info-poster.o-square { max-width: 820px; }
.info-poster header { text-align: center; } .info-poster h1 { margin: 0; font-size: clamp(22px, 3vw, 36px); }
.info-poster header p { margin: 6px 0 0; opacity: .75; }
.ip-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ip-stat { background: var(--p-acc); color: #fff; border-radius: 16px; padding: 16px; text-align: center; }
.ip-stat .v { font-size: 26px; font-weight: 800; } .ip-stat .l { font-size: 13px; opacity: .9; }
.ip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.o-portrait .ip-grid { grid-template-columns: 1fr; }
.ip-box { display: flex; gap: 14px; background: var(--p-card); border: 2px solid var(--p-line); border-radius: 18px; padding: 16px; }
.ip-ic { font-size: 34px; width: 58px; height: 58px; display: grid; place-items: center; background: var(--p-bg); border-radius: 14px; flex: none; }
.ip-box h3 { margin: 0 0 4px; font-size: 17px; } .ip-box p { margin: 0; font-size: 14px; line-height: 1.45; }
.ip-tl { display: flex; gap: 0; overflow-x: auto; border-top: 3px solid var(--p-acc); padding-top: 12px; }
.ip-tl-i { flex: 1; min-width: 130px; padding: 0 8px; position: relative; }
.ip-tl-i::before { content: ''; position: absolute; top: -20px; left: 8px; width: 13px; height: 13px; border-radius: 50%; background: var(--p-acc); }
.ip-tl-i .d { font-weight: 700; font-size: 14px; } .ip-tl-i .t { font-size: 13px; }
.ip-cmp { border-collapse: collapse; width: 100%; background: var(--p-card); border-radius: 14px; overflow: hidden; font-size: 14px; }
.ip-cmp th, .ip-cmp td { padding: 10px 12px; border-bottom: 1px solid var(--p-line); text-align: left; }
.ip-cmp thead th { background: var(--p-acc); color: #fff; }
.info-poster footer { text-align: center; font-weight: 700; font-size: 17px; background: var(--p-card); border-radius: 14px; padding: 12px; border: 2px dashed var(--p-acc); }
.t-sketch { --p-bg: #fbfaf6; --p-fg: #1d1d1f; --p-acc: #2f6f9f; --p-card: #fff; --p-line: #1d1d1f; font-family: "Comic Sans MS", "Patrick Hand", system-ui; }
.t-sketch .ip-box { border-style: dashed; }
.t-kawaii { --p-bg: #fff4fa; --p-fg: #5b3a5e; --p-acc: #f48fb1; --p-card: #fff; --p-line: #ffd1e6; }
.t-night { --p-bg: #11131a; --p-fg: #eef0f6; --p-acc: #6b8cff; --p-card: #1b1f2a; --p-line: #2b3245; }
.t-paper { --p-bg: #f4efe6; --p-fg: #2b2622; --p-acc: #b45309; --p-card: #fbf8f2; --p-line: #e3d6bf; font-family: Georgia, serif; }

/* ---------- Tablo ---------- */
.table-view { display: flex; flex-direction: column; gap: 10px; }
.dtable-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.dtable { border-collapse: collapse; width: 100%; font-size: 14px; }
.dtable th, .dtable td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.dtable thead th { position: sticky; top: 0; background: var(--card2); }
.dtable tbody tr:hover { background: var(--card); }
.th-btn { background: none; border: 0; padding: 0; font-weight: 600; text-align: left; }
.ref-col { width: 60px; }
.dtable td[contenteditable] { outline: 1px dashed var(--line); }

/* Yazdırma (PDF) */
#print-root { display: none; }
@media print {
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing #print-root { display: block; }
  .print-deck .slide { width: 100%; aspect-ratio: 16/9; height: auto; page-break-after: always; break-after: page; container-type: inline-size; }
  .print-deck { container-type: inline-size; }
  @page { margin: 10mm; }
  .print-report { color: #000; } .print-report .cite { background: #eee; color: #000; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Duyarlı düzen: tablet ve telefon */
@media (max-width: 1050px) {
  .mobile-tabs { display: flex; gap: 6px; padding: 0 14px 10px; }
  .mobile-tabs .tab { flex: 1; border: 1px solid var(--line); background: var(--pane); border-radius: 999px; padding: 8px; }
  .mobile-tabs .tab.on { background: var(--accent-soft); border-color: var(--accent); }
  .nb { grid-template-columns: 1fr; height: calc(100vh - 110px); }
  .nb .pane { display: none; }
  .nb[data-pane="sources"] .sources-pane, .nb[data-pane="chat"] .chat-pane, .nb[data-pane="studio"] .studio-pane { display: flex; }
  .viewer { left: 14px; }
  .report-grid { grid-template-columns: 1fr; } .toc { display: none; }
  .hide-sm { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  .status-pill { display: none; }
}
@media (max-width: 560px) {
  .topbar { padding: 0 10px; gap: 4px; } .brand-t { display: none; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .viewer { padding: 12px; }
  .fc-ctrl { gap: 10px; } .icon-btn.big { width: 52px; height: 52px; }
  .home-head { flex-direction: column; align-items: stretch; }
  .tline { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- 0.2: öğrenme merkezi, yeni araçlar ---------- */
.t-memory { --c: #ff8a65; } .t-teach { --c: #4db6ac; } .t-speedread { --c: #fff176; }
.hub-tabs { display: flex; gap: 6px; padding: 0 16px 6px; max-width: 1180px; margin: 0 auto; overflow-x: auto; }
.hub-tabs .tab { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg); text-decoration: none; white-space: nowrap; font-size: 14px; }
.hub-tabs .tab.on { background: var(--accent-soft); border-color: var(--accent); }
.status-pill.xp { text-decoration: none; color: var(--fg); }
.pop { animation: pop .45s; } @keyframes pop { 40% { transform: scale(1.04); } }
.shake { animation: shake .35s; } @keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 120; }
@media (prefers-reduced-motion: reduce) { .pop, .shake { animation: none; } }
.chip.combo { border-color: var(--warn); }
.chip.warn { border-color: var(--no); color: var(--no); }
.q-opt.picked { border-color: var(--accent); background: var(--accent-soft); }
.q-map { display: flex; flex-wrap: wrap; gap: 6px; }
.q-dot { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); font-size: 12px; }
.q-dot.done { background: var(--accent-soft); } .q-dot.on { border-color: var(--accent); border-width: 2px; }
.meter { position: relative; } .meter.thin { height: 10px; } .meter-target { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--fg); border-radius: 2px; }
.topic-bars { display: grid; gap: 8px; } .tb { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr 50px; gap: 10px; align-items: center; font-size: 14px; }
.tb-v { text-align: right; font-variant-numeric: tabular-nums; }
.att-bar.pass, .wk-bar.pass { background: var(--ok); }
.skip { font-size: 12px; font-weight: 700; }
.spk-A .tline-who, .chip.spk-A b { color: #8ab4ff; } .spk-B .tline-who, .chip.spk-B b { color: #f6c26b; }
.spk-C .tline-who, .chip.spk-C b { color: #81c784; } .spk-D .tline-who, .chip.spk-D b { color: #f48fb1; }
.spk-E .tline-who, .chip.spk-E b { color: #ce93d8; } .spk-F .tline-who, .chip.spk-F b { color: #80cbc4; }
/* Bugün */
.today { display: grid; gap: 14px; }
.today-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.stat-big { display: grid; gap: 8px; } .sb-v { font-size: 28px; font-weight: 700; }
.week { display: flex; gap: 6px; align-items: flex-end; height: 100px; }
.wk { flex: 1; display: grid; justify-items: center; gap: 4px; } .wk-bar { width: 100%; max-width: 26px; background: var(--accent); border-radius: 5px 5px 2px 2px; }
.plan { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.plan li { display: flex; gap: 12px; align-items: flex-start; } .plan-e { font-size: 22px; }
.ready { display: grid; gap: 6px; } .ready-row { display: flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; padding: 8px; border-radius: 10px; flex-wrap: wrap; }
.ready-row:hover { background: var(--card2); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.badge { text-align: center; padding: 10px; border-radius: 12px; border: 1px dashed var(--line); opacity: .45; }
.badge.got { opacity: 1; border-style: solid; border-color: var(--warn); } .be { font-size: 30px; }
/* Öğrenme bilimi */
.science .lead { font-size: 17px; max-width: 70ch; }
.sci-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 14px 0; }
.sci { display: flex; gap: 14px; } .sci-ic { font-size: 32px; } .sci h3 { margin: 0 0 6px; } .sci p { margin: 0 0 6px; }
.note-myth { border-color: var(--warn); }
/* Hafıza */
.memory { display: flex; flex-direction: column; gap: 12px; }
.mem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mem-card { display: grid; gap: 6px; } .mem-emoji { font-size: 34px; } .mem-fact { font-size: 17px; font-weight: 600; }
.mem-mn { color: var(--accent); } .mem-img { font-style: italic; }
.palace { display: grid; gap: 12px; } .palace-path { display: flex; flex-wrap: wrap; gap: 6px; }
.pstop { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); }
.pstop.done { background: var(--accent-soft); } .pstop.on { border: 2px solid var(--accent); }
.palace-stop h2 { margin: 6px 0; } .palace-scene { font-size: 17px; line-height: 1.6; }
.story p { font-size: 17px; line-height: 1.75; white-space: pre-wrap; }
/* Öğreterek öğren */
.teach { display: grid; grid-template-columns: 260px 1fr; gap: 16px; }
.teach-list { display: grid; gap: 4px; align-content: start; }
.teach-topic { display: flex; gap: 8px; align-items: center; text-align: left; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); }
.teach-topic.on { border-color: var(--accent); background: var(--accent-soft); }
.score-dot { min-width: 34px; text-align: center; border-radius: 999px; padding: 2px 6px; font-size: 12px; background: var(--chip); }
.score-dot.ok { background: var(--ok); color: #062; } .score-dot.mid { background: var(--warn); color: #432; } .score-dot.low { background: var(--no); color: #400; }
.teach-main { display: grid; gap: 10px; align-content: start; min-width: 0; } .teach-q { font-size: 17px; }
.teach-input { min-height: 160px; } .btn.on { border-color: var(--no); }
.ring { --p: 0; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; flex: none; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--card2) 0); }
.ring b { background: var(--card); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; }
.teach-res h4 { margin: 10px 0 4px; } .teach-res.ok h4 { color: var(--ok); } .teach-res.mid h4 { color: var(--warn); } .teach-res.no h4 { color: var(--no); }
/* Hızlı okuma */
.speedread { display: flex; flex-direction: column; gap: 12px; } .sr-ctl input[type=range] { width: 180px; accent-color: var(--accent); }
.sr-stage { display: grid; gap: 10px; }
.sr-frame { position: relative; height: 160px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.sr-guide { position: absolute; left: 50%; top: 18px; bottom: 18px; width: 2px; background: var(--line); }
.sr-word { font-size: clamp(28px, 5vw, 48px); font-weight: 600; letter-spacing: .5px; } .orp { color: var(--no); }
.sr-text { font-size: 18px; line-height: 1.9; max-width: 70ch; max-height: 55vh; overflow: auto; }
.pw.lit { background: var(--accent-soft); border-radius: 4px; }
.schulte { display: grid; grid-template-columns: repeat(5, 64px); gap: 6px; justify-content: center; }
.sc { height: 64px; font-size: 22px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); }
.sc.done { background: var(--accent-soft); color: var(--muted); }
.sr-res { display: flex; gap: 30px; flex-wrap: wrap; }
/* Klavye */
.typing { display: grid; gap: 12px; max-width: 980px; margin: 0 auto; }
.ty-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.ty-stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; display: grid; } .ty-stat b { font-size: 22px; font-variant-numeric: tabular-nums; } .ty-stat span { font-size: 12px; color: var(--muted); }
.ty-box { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; cursor: text; }
.ty-text { font: 24px/1.6 ui-monospace, Consolas, monospace; word-break: break-word; }
.ty-text .ok { color: var(--ok); } .ty-text .cur { background: var(--accent); color: var(--accent-fg); border-radius: 3px; }
.ty-input { position: absolute; opacity: 0; inset: 0; width: 100%; }
.ty-kb { display: grid; gap: 6px; justify-content: center; user-select: none; }
.ty-row { display: flex; gap: 6px; justify-content: center; } .ty-row.r1 { margin-left: 22px; } .ty-row.r2 { margin-left: 34px; } .ty-row.r3 { margin-left: 10px; }
.ty-key { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 9px; font: 600 16px ui-monospace, monospace; color: #111; border-bottom: 3px solid rgba(0,0,0,.25); transition: transform .08s; }
.ty-key.space { width: 300px; } .ty-key.next { outline: 3px solid var(--fg); transform: translateY(-2px); } .ty-key.hit { transform: scale(.92); } .ty-key.miss { background: var(--no) !important; }
.f-L1, .sw.f-L1 { background: #f48fb1; } .f-L2 { background: #ffcc80; } .f-L3 { background: #fff59d; } .f-L4 { background: #a5d6a7; }
.f-R4 { background: #80deea; } .f-R3 { background: #90caf9; } .f-R2 { background: #b39ddb; } .f-R1 { background: #ef9a9a; } .f-TH { background: #e0e0e0; }
.ty-legend { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.ty-weak { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 760px) { .teach { grid-template-columns: 1fr; } .ty-key { width: 26px; height: 34px; font-size: 12px; } .ty-key.space { width: 160px; } .ty-row { gap: 3px; } .ty-row.r1, .ty-row.r2, .ty-row.r3 { margin-left: 0; } .schulte { grid-template-columns: repeat(5, 52px); } .sc { height: 52px; } }
.conn { display: grid; gap: 12px; } .conn-steps { display: grid; gap: 10px; padding-left: 20px; margin: 0; } .conn pre { margin: 6px 0; white-space: pre-wrap; word-break: break-all; }
.err-bar { background: color-mix(in srgb, var(--no) 10%, transparent); border-radius: 12px; padding: 6px 10px; }
.voice-up { border-color: var(--accent); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ocr-chip { display: block; font-size: 11px; color: var(--warn); }
.diag.warn { border-color: var(--warn); } .diag.no { border-color: var(--no); }

/* ===== 0.3.0: ses ayarları, soru bankası, doğrulama, yeni slayt düzenleri, dinleyerek öğren, pomodoro, yöntemler ===== */
.voice-settings .vsec { border: 1px solid var(--line); border-radius: var(--r); margin: 8px 0; background: var(--card2); }
.voice-settings .vsec > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; list-style: revert; }
.voice-settings .vsec > .grid2 { padding: 0 14px 14px; }
.span2 { grid-column: 1 / -1; }
.stack { display: grid; gap: 8px; }
.w100 { width: 100%; }
.voice-up ol { margin: 6px 0 10px; padding-left: 20px; display: grid; gap: 4px; }
.bank { display: grid; gap: 8px; margin: 10px 0; border-left: 4px solid var(--c, #81d4fa); --c: #81d4fa; }
.bank-nums { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.bank-nums b { font-size: 16px; }
.small-in { width: auto; padding: 4px 8px; font-size: 13px; }
.count-in { width: 90px; }
.ok-chip { border-color: var(--ok); color: var(--ok); }
.warn-chip { border-color: var(--warn); color: var(--warn); }
.q-src { margin-top: 10px; }
.q-src blockquote, .fc-src { margin: 4px 0 0; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 6px; font-style: italic; }
.fc-src { margin-top: 10px; font-size: 13px; }
.slide .s-tl { display: grid; gap: 1.1cqw; border-left: .4cqw solid var(--s-acc); padding-left: 2.4cqw; font-size: 2cqw; }
.slide .s-tl .s-step { display: grid; grid-template-columns: 14cqw 1fr; gap: 1.6cqw; }
.slide .s-proc { display: grid; gap: 1.1cqw; font-size: 2cqw; padding-left: 3cqw; }
.slide .s-proc .s-step b { color: var(--s-acc); margin-right: 1cqw; }
.slide .s-chart { display: grid; gap: 1cqw; font-size: 1.9cqw; margin-bottom: 1.4cqw; }
.slide .s-bar { display: grid; grid-template-columns: 24cqw 1fr 12cqw; gap: 1.2cqw; align-items: center; }
.slide .s-bar-t { height: 2.4cqw; background: color-mix(in srgb, var(--s-fg) 12%, transparent); border-radius: 1cqw; overflow: hidden; }
.slide .s-bar-f { display: block; height: 100%; background: var(--s-acc); border-radius: 1cqw; }
.slide .s-bar-v { font-weight: 700; text-align: right; }
.slide .s-table { border-collapse: collapse; font-size: 1.8cqw; width: 100%; }
.slide .s-table th, .slide .s-table td { border-bottom: .15cqw solid color-mix(in srgb, var(--s-fg) 25%, transparent); padding: .8cqw 1.2cqw; text-align: left; }
.slide .s-table th { color: var(--s-acc); }
.t-listen { --c: #b39ddb; }
.listen { display: grid; gap: 12px; }
.listen .big-label { font-size: 20px; line-height: 1.5; }
.dict-res.ok { border-color: var(--ok); } .dict-res.no { border-color: var(--warn); }
.w-ok { color: var(--ok); } .w-miss { color: var(--no); text-decoration: underline wavy; }
.transcript.blurred .tline-text { filter: blur(5px); transition: filter .2s; }
.transcript.blurred .tline.on .tline-text, .transcript.blurred .tline:hover .tline-text { filter: none; }
.status-pill.pomo { cursor: pointer; font-variant-numeric: tabular-nums; }
.status-pill.pomo.on { border-color: var(--no); color: var(--no); }
.status-pill.pomo.brk { border-color: var(--ok); color: var(--ok); }
.methods { margin-top: 28px; }
.methods section { margin: 18px 0; }
.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.m-item p { margin: 6px 0; }
.ev { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; margin: 0 4px; white-space: nowrap; }
.ev-y { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
.ev-o { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.ev-d { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.ev-m { background: color-mix(in srgb, var(--no) 20%, transparent); color: var(--no); }
@media (max-width: 640px) { .voice-settings .grid2 { grid-template-columns: 1fr; } .slide .s-bar { grid-template-columns: 30cqw 1fr 14cqw; } }
.art-tools { margin: 6px 2px -4px; align-items: center; }
.art-tools .icon-btn:hover, .pane-head .icon-btn:hover { color: var(--no); }
.mastery .zen { font-size: 18px; font-style: italic; border-left: 4px solid var(--accent); margin: 8px 0 12px; padding: 8px 14px; background: var(--accent-soft); border-radius: 8px; }

/* ===== 0.4.0: ses kütüphanesi, ses kadrosu, lokal model yöneticisi ===== */
.voice-settings .vsec > .vpad { padding: 0 14px 14px; }
.vl-audio { width: 100%; height: 36px; }
.vl-row, .mm-row { display: grid; gap: 8px; }
.cast-i { width: 22px; text-align: center; }
.mm-row.dim { opacity: .55; }
.mm-warn { color: var(--warn); }
.mm h4 { margin: 14px 0 0; }
.mm code { word-break: break-all; opacity: .8; }
.mm-try { border-top: 1px solid var(--line); padding-top: 8px; }

/* ---- Yapay zeka görselleri (0.5.0): slayt, infografik ---- */
.slide.has-img { overflow: hidden; }
.slide .s-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.slide .s-veil { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.15) 100%); }
.slide.L-title.has-img { background: #000 !important; color: #fff; }
.slide.L-title.has-img .s-inner { position: relative; z-index: 1; text-shadow: 0 .2cqw .8cqw rgba(0,0,0,.55); }
.slide .s-pic { position: absolute; right: 4.5cqw; top: 14%; bottom: 12%; width: 32%; height: auto; object-fit: cover; border-radius: 2cqw; border: .35cqw solid var(--s-acc); box-shadow: 0 .8cqw 2.4cqw rgba(0,0,0,.35); z-index: 0; }
.slide.has-img:not(.L-title) .s-inner { max-width: 60%; position: relative; z-index: 1; }
.print-deck .slide .s-bg, .print-deck .slide .s-pic { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.info-poster .ip-hero { width: 100%; max-height: 240px; object-fit: cover; border-radius: 18px; margin-bottom: 14px; border: 2px solid var(--p-line); }
.info-poster.o-portrait .ip-hero { max-height: 200px; }
.ip-ic.has-img { padding: 0; overflow: hidden; width: 72px; height: 72px; }
.ip-ic.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== 0.8.0: Ses stüdyosu, sade bulut anahtarları, podcast karakter paneli ===== */
.vsec { border: 1px solid var(--line); border-radius: var(--r); margin: 6px 0; background: var(--card2); }
.vsec > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; list-style: revert; }
.vsec > .vpad { padding: 0 14px 14px; }
.vsec > .grid2 { padding: 0 14px 14px; }
.studio h3 { margin: 18px 0 2px; font-size: 17px; }
.studio .cast-row { align-items: center; }
.prov { display: grid; gap: 6px; }
.prov-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px; align-items: center; }
.prov-name { font-weight: 600; font-size: 14px; }
.prov-more { padding: 8px 0 6px; }
@media (max-width: 640px) { .prov-row { grid-template-columns: 1fr auto; } .prov-name { grid-column: 1 / -1; } .prov-more { grid-template-columns: 1fr; } }
.tline-who { display: grid; gap: 4px; align-content: start; }
.tline-sel { font: inherit; font-size: 12px; padding: 2px 4px; border-radius: 6px; border: 1px solid var(--line); background: var(--card2); color: inherit; max-width: 100%; }
.tline-play { border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 13px; padding: 0 4px; justify-self: start; }
.cast-panel { border: 1px solid var(--line); border-radius: var(--r); padding: 4px 12px; background: var(--card2); }
.cast-panel > summary { cursor: pointer; padding: 8px 0; font-weight: 600; }
.cast-panel .cast-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 4px 0; }
@media (max-width: 640px) { .tline-who { grid-template-columns: 1fr auto; } }

/* Sunucu motor durumu, kadro seçici, alıştırma sesi düğmesi */
.engine-bad, .chip.engine-bad { color: var(--no); border-color: var(--no); }
.engine-ok { color: var(--ok); }
.engines { margin: 4px 0; }
.design-why { margin: 0; }
.err-detail pre { white-space: pre-wrap; word-break: break-word; margin: 4px 0 0; max-height: 160px; overflow: auto; }
.cast-pick { padding: 12px; gap: 8px; }
.cast-pick-row { align-items: center; padding: 2px 0; }
.cast-pick-row input[type=checkbox] { width: 18px; height: 18px; }
.icon-btn.muted-fx { opacity: .45; }
.tline-sel optgroup { font-style: normal; }
.cast-pick-row select { min-width: 160px; }