/* Sinvo arayüzü — tasarım sözleşmesi: tokenlar tek kaynak, üç yarıçap seviyesi, düz birincil düğme, gradyan yalnız logo/ilerleme. */
:root {
  --bg:#0B1020; --bg2:#111831; --panel:#161E36; --panel2:#1B2444; --line:#273055; --line2:#34407A;
  --fg:#F5F7FF; --muted:#8B95B5; --muted2:#5E6A8F;
  --mavi:#4CC9F0; --mor:#7C5CFF; --ok:#34D399; --warn:#FBBF24; --bad:#F87171; --on-mavi:#06111F;
  --acc:var(--mavi); --acc2:var(--mor);
  --r-ctl:8px; --r-box:12px; --r-stage:16px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --font:"Inter","Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
}
* { box-sizing:border-box; }
html { background:var(--bg); } html, body { min-height:100%; max-width:100%; overflow-x:hidden; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.45 var(--font); }
a { color:inherit; text-decoration:none; }
h1 { font-size:24px; font-weight:600; margin:0 0 var(--s2); letter-spacing:-.2px; } h2 { font-size:20px; font-weight:600; margin:var(--s4) 0 var(--s2); }
h3 { font-size:15px; font-weight:600; margin:var(--s4) 0 var(--s2); } h4 { font-size:15px; font-weight:600; margin:0; }
.label { font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.muted { color:var(--muted); } .hidden { display:none !important; } .grad { background:linear-gradient(135deg,var(--mavi),var(--mor)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ikonlar (Lucide sprite) */
.ic { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:-5px; }
.ic.sm { width:16px; height:16px; vertical-align:-3px; } .ic.mavi { color:var(--mavi); } .ic.mor { color:var(--mor); }

/* üst çubuk + mod gezinmesi */
header { display:flex; align-items:center; gap:var(--s4); padding:var(--s2) var(--s5); border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:5; min-height:56px; }
.brand { display:flex; align-items:center; gap:var(--s2); font-weight:800; font-size:18px; letter-spacing:-.3px; }
.modes-nav { display:flex; gap:var(--s1); flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
.modes-nav a { display:flex; align-items:center; gap:var(--s2); padding:8px 12px; border-radius:var(--r-ctl); color:var(--muted); font-weight:500; white-space:nowrap; border:1px solid transparent; }
.modes-nav a:hover { color:var(--fg); background:var(--panel); }
.modes-nav a.active { color:var(--fg); background:var(--panel2); border-color:var(--line); }
.modes-nav a.active .ic { color:var(--mavi); } .modes-nav a.active.mor-mode .ic { color:var(--mor); }
.secondary-nav { display:flex; gap:var(--s1); } .secondary-nav a { padding:8px 10px; border-radius:var(--r-ctl); color:var(--muted); font-size:14px; } .secondary-nav a:hover, .secondary-nav a.active { color:var(--fg); background:var(--panel); }
#userbox { display:flex; align-items:center; gap:var(--s2); } #userbox .who { font-size:13px; color:var(--muted); }

/* durum rozeti */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; padding:5px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); white-space:nowrap; }
.pill .dot { width:8px; height:8px; border-radius:50%; background:var(--muted2); } .pill.ok .dot { background:var(--ok); } .pill.bad .dot { background:var(--bad); } .pill.warn .dot { background:var(--warn); }

/* ekranlar ve paneller */
.screen { display:none; padding:var(--s5); max-width:1480px; margin:0 auto; } .screen.active { display:block; }
.screen.two { display:none; grid-template-columns:minmax(0,1fr) 520px; gap:var(--s4); } .screen.two.active { display:grid; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-box); padding:var(--s4) var(--s5); min-width:0; }
.panel > h3:first-child { margin-top:0; }
.right { display:flex; flex-direction:column; gap:var(--s3); }

/* düğmeler */
button, .btnlink { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); height:36px; padding:0 14px; border-radius:var(--r-ctl); border:1px solid var(--line); background:var(--panel2); color:var(--fg); font:inherit; font-weight:500; cursor:pointer; white-space:nowrap; }
button:hover, .btnlink:hover { border-color:var(--line2); } button:disabled { opacity:.45; cursor:default; }
button.primary { background:var(--mavi); border-color:var(--mavi); color:var(--on-mavi); font-weight:600; } button.primary:hover { filter:brightness(1.06); }
button.ghost { background:transparent; border-color:transparent; color:var(--muted); } button.ghost:hover { color:var(--fg); background:var(--panel); border-color:transparent; }
button.danger { background:transparent; border-color:var(--bad); color:var(--bad); }
button.tiny { height:28px; padding:0 10px; font-size:13px; }
.seg { display:inline-flex; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-ctl); padding:3px; margin-bottom:var(--s3); gap:2px; }
.seg button { height:30px; background:transparent; border:0; color:var(--muted); border-radius:6px; padding:0 12px; } .seg button.active { background:var(--panel2); color:var(--fg); }

/* form */
input, textarea, select { background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:var(--r-ctl); padding:8px 10px; font:inherit; width:100%; min-height:36px; }
select { appearance:none; padding-right:28px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B95B5' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 8px center; }
input[type=file] { padding:6px; } input[type=checkbox] { width:16px; height:16px; min-height:0; padding:0; accent-color:var(--mavi); vertical-align:-3px; margin:0 6px 0 0; } input[type=range] { padding:0; min-height:0; accent-color:var(--mavi); width:120px; }
.switch { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:var(--muted); }
.switch input[type=checkbox] { appearance:none; width:34px; height:20px; min-height:0; border-radius:999px; background:var(--line); border:0; position:relative; padding:0; cursor:pointer; margin:0; }
.switch input[type=checkbox]:checked { background:var(--mavi); } .switch input[type=checkbox]::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .15s; } .switch input[type=checkbox]:checked::after { transform:translateX(14px); }
.row { display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; margin:var(--s2) 0; } .row.between { justify-content:space-between; } .row.small { font-size:13px; color:var(--muted); }
.row.between div { display:flex; gap:6px; flex-wrap:wrap; }
meter { width:120px; height:12px; }

/* listeler */
.log { background:var(--bg); border:1px solid var(--line); border-radius:var(--r-box); padding:var(--s1); max-height:46vh; overflow:auto; } .log.tall { max-height:70vh; min-height:40vh; }
.log:empty::before, .log[data-empty]:empty::before { content:attr(data-empty); display:block; padding:var(--s5); color:var(--muted); text-align:center; font-size:14px; }
.entry { padding:10px; border-bottom:1px solid var(--line); cursor:pointer; border-radius:var(--r-ctl); } .entry:last-child { border-bottom:0; } .entry:hover { background:var(--panel); } .entry.current { background:var(--panel2); }
.entry .t { color:var(--muted); font-size:12px; margin-right:8px; font-variant-numeric:tabular-nums; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.chip { display:inline-flex; align-items:center; gap:4px; font:600 12px/1 var(--mono); padding:5px 8px; border-radius:6px; background:var(--panel2); color:var(--mavi); border:1px solid var(--line); cursor:pointer; }
.chip.marker { color:var(--mor); } .chip.number { color:var(--ok); }
.chip.missing { color:var(--muted); text-decoration:underline dotted; text-underline-offset:3px; } .chip.missing::before { content:"abc"; font:500 9px/1 var(--font); letter-spacing:.05em; text-decoration:none; color:var(--warn); border:1px solid var(--warn); border-radius:3px; padding:1px 3px; }
.chip.active { border-color:var(--fg); color:var(--fg); } .chip.low { opacity:.55; } .chip button { background:transparent; border:0; height:auto; padding:0 0 0 6px; color:var(--bad); }
.chip.done { border-color:var(--ok); color:var(--ok); } .chip.pending { border-color:var(--warn); color:var(--warn); } .chip.approved { border-color:var(--ok); color:var(--ok); } .chip.rejected { opacity:.5; }

/* avatar sahnesi */
.stage { position:relative; width:100%; aspect-ratio:1/1.2; max-height:70vh; border-radius:var(--r-stage); overflow:hidden; border:1px solid var(--line); background:var(--bg2); }
.stage canvas { width:100% !important; height:100% !important; display:block; } .stage.mini { aspect-ratio:1/1; max-height:40vh; margin-top:var(--s3); }
.stage .state { position:absolute; left:12px; top:12px; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; padding:5px 10px; border-radius:999px; background:rgba(11,16,32,.75); border:1px solid var(--line); color:var(--muted); }
.stage .state.on { color:var(--fg); border-color:var(--mavi); } .stage .state.on .dot { background:var(--mavi); animation:pulse 1s infinite; } .stage .state .dot { width:8px; height:8px; border-radius:50%; background:var(--muted2); }
@keyframes pulse { 50% { opacity:.35; } }
#letter, #learn-letter { position:absolute; right:16px; top:12px; font-size:72px; font-weight:800; color:#fff; text-shadow:0 4px 24px rgba(0,0,0,.6); pointer-events:none; }
#letter.marker, #learn-letter.marker { font-size:20px; color:var(--mor); left:0; right:0; text-align:center; top:14px; }
#avatar-note, #learn-note { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted); pointer-events:none; } #avatar-note:empty, #learn-note:empty { display:none; }
#caption, #learn-caption { min-height:48px; text-align:center; } #cap-main, #learn-cap-main { font:600 28px/1.2 var(--mono); letter-spacing:1px; display:block; } #cap-sub, #learn-cap-sub { font-size:13px; }
.video-player { width:100%; max-height:320px; background:#000; border-radius:var(--r-box); margin-top:var(--s2); display:none; }
.cam { position:relative; background:#000; border-radius:var(--r-stage); overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line); }
.cam video, .cam canvas { position:absolute; inset:0; width:100%; height:100%; transform:scaleX(-1); }
.cam .count { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:96px; font-weight:800; color:#fff; text-shadow:0 2px 12px #000; pointer-events:none; }
.badge { position:absolute; left:12px; top:12px; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:500; background:rgba(11,16,32,.75); border:1px solid var(--line); color:var(--muted); } .badge.on { color:var(--fg); border-color:var(--ok); }
.badge:empty { display:none; }
.cam.small { max-width:420px; margin:var(--s2) auto; }
.rec-ctl { display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s3); }
.bigtext { font-size:24px; line-height:1.5; min-height:72px; padding:var(--s3); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-box); margin-bottom:var(--s2); }
.bigtext:empty::before { content:"Henüz tanınan işaret yok. Kamerayı açıp ellerinizi bel üstüne kaldırın."; color:var(--muted); font-size:14px; }
.mic-state.partial { color:var(--mavi); font-style:italic; } .ok { color:var(--ok); } .warn { color:var(--warn); } .bad { color:var(--bad); }

/* öğrenme */
.level { margin:var(--s4) 0 var(--s2); } .level h4 { font-size:16px; } .level .goal { color:var(--muted); font-size:13px; margin:2px 0 var(--s2); }
.module { background:var(--bg); border:1px solid var(--line); border-radius:var(--r-box); padding:var(--s3) var(--s4); margin:var(--s2) 0; }
.module .mh { display:flex; justify-content:space-between; align-items:center; } .module .mh b { font-size:15px; font-weight:600; }
.bar { height:6px; background:var(--panel2); border-radius:3px; margin-top:var(--s2); overflow:hidden; } .bar i { display:block; height:100%; background:linear-gradient(90deg,var(--mavi),var(--mor)); }
.lesson-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:10px 6px; border-top:1px solid var(--line); cursor:pointer; border-radius:var(--r-ctl); }
.lesson-row:hover { background:var(--panel); } .lesson-row .tag { font-size:11px; font-weight:500; padding:2px 7px; border-radius:4px; background:var(--panel2); color:var(--muted); white-space:nowrap; }
.lesson-row .tag.bilgi { color:var(--mor); } .lesson-row .tag.isaret { color:var(--mavi); } .lesson-row .tag.karma { color:var(--ok); }
.lesson-row .st { font-size:12px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; } .lesson-row.done .st { color:var(--ok); }
.note { background:var(--panel2); border-left:3px solid var(--mor); padding:10px 12px; border-radius:var(--r-ctl); color:var(--fg); font-size:14px; }
.wordcard { background:var(--bg); border:1px solid var(--line); border-radius:var(--r-box); padding:var(--s4); text-align:center; margin:var(--s2) 0; }
#watch-word, #practice-word { font:600 32px/1.2 var(--mono); letter-spacing:1px; }
.card-info { background:var(--bg); border:1px solid var(--line); border-radius:var(--r-box); padding:var(--s5); min-height:180px; white-space:pre-line; line-height:1.6; }
.card-info h4 { margin:0 0 var(--s2); font-size:20px; color:var(--mavi); }
.options { display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); margin:var(--s2) 0; }
.options button { height:auto; padding:14px; font:600 16px var(--mono); background:var(--bg); white-space:normal; } .options.text button { grid-column:1/-1; font:500 15px var(--font); text-align:left; justify-content:flex-start; }
.options button.correct { border-color:var(--ok); color:var(--ok); } .options button.wrong { border-color:var(--bad); color:var(--bad); }
.result { min-height:28px; font-weight:600; margin-top:6px; } .result.ok { color:var(--ok); } .result.bad { color:var(--warn); }
.lm .cam.small { margin:var(--s2) auto; }

/* gruplar / yönetim / hesap */
.grp { padding:10px; border-bottom:1px solid var(--line); cursor:pointer; display:flex; gap:10px; align-items:center; } .grp:hover { background:var(--panel); } .grp.active { background:var(--panel2); }
.grp .code { font:700 14px var(--mono); color:var(--mavi); letter-spacing:2px; } .grp .m { color:var(--muted); font-size:12px; flex:1; }
table.rep { width:100%; border-collapse:collapse; font-size:13px; } table.rep th, table.rep td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); } table.rep th { color:var(--muted); font-weight:500; }
.usage { display:flex; align-items:flex-end; gap:3px; height:110px; padding:var(--s2); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-box); }
.usage .d { flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; gap:1px; } .usage .t { background:var(--mavi); border-radius:2px 2px 0 0; min-height:1px; } .usage .u { background:var(--mor); min-height:1px; }
.contrib { display:flex; gap:10px; align-items:center; padding:10px; border-bottom:1px solid var(--line); } .contrib .g { font:700 14px var(--mono); color:var(--mavi); } .contrib .m { color:var(--muted); font-size:12px; flex:1; }
.contrib button.ok { color:var(--ok); } .contrib button.no { color:var(--bad); }
.urow { display:flex; gap:10px; align-items:center; padding:8px 10px; border-bottom:1px solid var(--line); font-size:14px; } .urow .m { color:var(--muted); flex:1; }
.badge-role { font-size:11px; padding:2px 7px; border-radius:4px; background:var(--panel2); color:var(--muted); } .badge-role.admin { color:var(--mor); }
.lexrow { display:flex; gap:10px; align-items:center; padding:6px 8px; border-bottom:1px solid var(--line); font-size:14px; } .lexrow code { color:var(--mavi); font-family:var(--mono); } .lexrow .m { color:var(--muted); flex:1; }
.fixbox { margin-top:8px; padding:10px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-ctl); display:flex; flex-direction:column; gap:6px; }

/* modal / toast */
.modal { position:fixed; inset:0; background:rgba(3,6,20,.7); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-stage); padding:var(--s5); width:min(420px,92vw); box-shadow:0 20px 60px rgba(3,6,20,.5); } .modal-card.wide { width:min(560px,92vw); } .ob { padding-left:20px; } .ob li { margin:6px 0; }
#toasts { position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:60; }
.toast { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--mavi); border-radius:var(--r-box); padding:10px 14px; min-width:240px; max-width:360px; box-shadow:0 8px 30px rgba(3,6,20,.45); }
.toast.ok { border-left-color:var(--ok); } .toast.bad { border-left-color:var(--bad); } .toast.warn { border-left-color:var(--warn); }

/* erişilebilirlik */
:focus-visible { outline:2px solid var(--mavi); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* küçük ekran */
@media (max-width:1000px) { .screen.two.active { grid-template-columns:1fr; } #screen-sign .avatar-panel { order:-1; } #screen-learn .avatar-panel { display:none; } #screen-learn.lesson-open .avatar-panel { display:flex; order:-1; } }
@media (max-width:700px) {
  header { padding:var(--s2) var(--s3); gap:var(--s2); flex-wrap:wrap; } .brand span { display:none; } .secondary-nav { display:none; } #health { margin-left:auto; }
  .modes-nav { order:3; flex:1 0 100%; } .modes-nav a { padding:8px 10px; font-size:13px; } .modes-nav a span { display:none; } .modes-nav a.active span { display:inline; }
  #userbox .who { display:none; } .screen { padding:var(--s3); } .stage { max-height:52vh; } .options { grid-template-columns:1fr; }
  .row.between { flex-direction:column; align-items:flex-start; } .seg { display:flex; width:100%; } .seg button { flex:1; padding:0 6px; font-size:13px; }
}