:root{--bg:#f3f5f9;--card:#fff;--tx:#161b26;--mut:#6a7385;--acc:#2455d6;--acc2:#e8eefc;--ok:#15803d;--okbg:#e5f6ea;--bad:#c62828;--badbg:#fdeaea;--warn:#b45309;--warnbg:#fff3df;--line:#e4e8ef;--sh:0 1px 2px rgba(20,30,60,.06),0 4px 14px rgba(20,30,60,.05)}
@media(prefers-color-scheme:dark){:root{--bg:#0e1117;--card:#181c25;--tx:#e9edf5;--mut:#9aa4b8;--acc:#6b9bff;--acc2:#1d2740;--ok:#4ade80;--okbg:#14301f;--bad:#ff7b7b;--badbg:#3a1c1c;--warn:#fbbf24;--warnbg:#38290f;--line:#2a303c;--sh:none}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.hide{display:none!important}
a{color:var(--acc);text-decoration:none}
h1{font-size:22px;margin:0 0 4px}h2{font-size:17px;margin:0 0 10px}h3{font-size:15px;margin:0 0 6px}
.mut{color:var(--mut)}.small{font-size:13px}.right{text-align:right}.center{text-align:center}
/* üst bar */
.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top)}
.top-in{max-width:1040px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--tx)}
.logo{width:28px;height:28px;border-radius:8px;background:var(--acc);color:#fff;display:grid;place-items:center;font-size:16px}
nav,.tabs{scrollbar-width:none}nav::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto}
nav a{padding:7px 12px;border-radius:8px;color:var(--mut);font-weight:600;white-space:nowrap}
nav a.on{background:var(--acc2);color:var(--acc)}
main{max-width:1040px;margin:0 auto;padding:16px 16px calc(40px + env(safe-area-inset-bottom))}
/* kart, buton, form */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:var(--sh)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.between{justify-content:space-between}
.grow{flex:1}
button,.btn{appearance:none;border:0;background:var(--acc);color:#fff;font:600 14px inherit;font-family:inherit;padding:10px 14px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
button.sec,.btn.sec{background:transparent;color:var(--acc);border:1px solid var(--line)}
button.danger{background:var(--badbg);color:var(--bad)}
button.ghost{background:transparent;color:var(--mut);padding:6px 8px}
button.sm{padding:6px 10px;font-size:13px}
button:disabled{opacity:.5}
button.big{font-size:16px;padding:14px 18px}
input,select,textarea{font:inherit;color:var(--tx);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
input[type=checkbox]{width:auto}
input:focus,select:focus{outline:2px solid var(--acc);outline-offset:-1px}
label.f{display:block;font-size:13px;color:var(--mut);margin:10px 0 4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px}
@media(max-width:520px){nav a{padding:7px 8px;font-size:14px}.top-in{gap:6px}.brand span:last-child{max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.stat{background:var(--acc2);border-radius:12px;padding:12px}
.stat b{display:block;font-size:24px;line-height:1.1}.stat span{font-size:12px;color:var(--mut)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600;color:var(--tx);cursor:pointer}
.chip.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:10px 0 14px;overflow-x:auto}
.tabs a{padding:10px 14px;color:var(--mut);font-weight:600;border-bottom:3px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--acc);border-color:var(--acc)}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600}
.tag.ok{background:var(--okbg);color:var(--ok)}.tag.bad{background:var(--badbg);color:var(--bad)}.tag.warn{background:var(--warnbg);color:var(--warn)}.tag.gr{background:var(--acc2);color:var(--mut)}
.empty{text-align:center;color:var(--mut);padding:26px 10px}
/* tablo */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{font-size:12px;color:var(--mut);text-transform:none;font-weight:600;background:transparent}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td.lk{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}td.lk:hover{background:var(--acc2)}
tr.click{cursor:pointer}tr.click:hover{background:var(--acc2)}
/* liste kartı */
.list{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.item{display:block;color:var(--tx);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--sh)}
.item:hover{border-color:var(--acc)}
.item.sk{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:12px;line-height:1.3}
.sk-t{min-width:0}.sk-t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* modal */
#modal,#scanLayer,#printLayer{position:fixed;inset:0;z-index:50;background:rgba(10,14,22,.55);overflow:auto;-webkit-overflow-scrolling:touch}
.sheet{background:var(--card);max-width:560px;margin:5vh auto;border-radius:16px;padding:18px;width:calc(100% - 24px)}
.sheet.wide{max-width:760px}
#scanLayer{background:var(--bg)}
#scanLayer .in{max-width:640px;margin:0 auto;padding:12px 16px calc(30px + env(safe-area-inset-bottom))}
.stage{position:relative;background:#000;border-radius:12px;overflow:hidden}
.stage video,.stage canvas{display:block;width:100%;height:auto}
.stage .ov{position:absolute;inset:0}
.big-no{font:700 30px/1 ui-monospace,Menlo,monospace;letter-spacing:2px}
.agrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.aq{border:1px solid var(--line);border-radius:8px;padding:3px 0;text-align:center;font-size:12px;color:var(--mut)}
.aq b{display:block;font-size:18px;color:var(--tx)}.aq.blank b{color:var(--mut)}.aq.multi{border-color:var(--bad)}.aq.multi b{color:var(--bad)}
/* cevap anahtarı */
.key{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 18px}
@media(max-width:560px){.key{grid-template-columns:1fr}}
.kr{display:flex;align-items:center;gap:6px}
.kr .q{width:26px;text-align:right;color:var(--mut);font-weight:600}
.opt{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:var(--card);color:var(--tx);padding:0;justify-content:center;font-size:15px}
.opt.on{background:var(--acc);border-color:var(--acc);color:#fff}
.opt.iptal.on{background:var(--warn);border-color:var(--warn)}
/* grafik */
.bar{fill:var(--acc)}.bar.warn{fill:#d97706}.bar.bad{fill:#dc2626}.bar.ok{fill:#16a34a}
svg text{fill:var(--mut);font-size:11px}
.mini{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--line);min-width:90px}
.mini i{display:block;height:100%}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#222;color:#fff;padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;z-index:99;max-width:90%}
#toast.on{opacity:1}#toast.err{background:#b3261e}
.login-box{max-width:380px;margin:12vh auto;padding:0 16px}
/* ===== A4 RAPOR ===== */
#printLayer{background:#6b7280}
.pbar{position:sticky;top:0;background:var(--card);padding:10px 14px;display:flex;gap:8px;z-index:3;border-bottom:1px solid var(--line)}
.a4{background:#fff;color:#000;width:210mm;min-height:297mm;margin:12px auto;padding:14mm 13mm;box-shadow:0 2px 12px rgba(0,0,0,.3);font-size:11pt;line-height:1.35}
.a4 h1{font-size:16pt;margin:0}.a4 h2{font-size:12pt;margin:12px 0 6px}
.a4 .meta{color:#444;font-size:10pt;margin:2px 0 10px}
.a4 table{font-size:9.5pt}.a4 th,.a4 td{padding:3px 5px;border-bottom:1px solid #ccc;color:#000}
.a4 th{background:#eef1f6;color:#333;border-bottom:1px solid #999}
.a4 .stats{grid-template-columns:repeat(5,1fr)}.a4 .stat{background:#eef1f6}.a4 .stat span{color:#444}
.a4 svg text{fill:#333}
.a4 .head{display:flex;justify-content:space-between;border-bottom:2px solid #000;padding-bottom:6px;margin-bottom:8px}
.a4 .foot{margin-top:12px;font-size:8.5pt;color:#555}
.a4 .ok{color:#15803d}.a4 .bd{color:#b91c1c}
@media(max-width:820px){.a4{transform-origin:top left;zoom:.45}}
/* renkli cevap tablosu */
.a4 *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.a4.tight{padding:10mm 10mm}
.mtitle{font-weight:700;font-size:11pt;margin-bottom:2px}.mnote{font-size:7.5pt;color:#555;margin-bottom:6px}
table.mx{table-layout:fixed;border-collapse:collapse;width:100%;font-size:7.5pt}
table.mx th,table.mx td{border:1px solid #b7b7b7;padding:1.5px 1px;text-align:center;white-space:nowrap;overflow:hidden;color:#000}
table.mx th{background:#1f4e78;color:#fff;font-weight:700}
table.mx .l{text-align:left;padding-left:3px}
table.mx tr.mk td{background:#ffff00;color:#0000ff;font-weight:700}
table.mx tr.mk td.l{color:#000}
table.mx tr.ms td{background:#fff}table.mx tr.ms td.l{background:#d9e1f2;font-weight:700}
table.mx .mk-d{background:#c6efce}table.mx .mk-y{background:#ffc7ce}
table.mx .mk-low{color:#c00000;font-weight:700}
table.mx .mut{color:#777}
table.mx.sik{font-size:9pt}table.mx.sik td,table.mx.sik th{padding:3px 4px}
.a4 table.cmp td,.a4 table.cmp th{padding:1.5px 5px}
.a4.tight .stat{padding:5px 10px}.a4.tight .stat b{font-size:15pt}.a4.tight .head{margin-bottom:4px}
.zbox{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.zb{border-radius:10px;padding:8px 10px;font-size:13px}.zb b{font-size:20px}
.zb.z{background:var(--badbg)}.zb.o{background:var(--warnbg)}.zb.k{background:var(--okbg)}
.zl{margin-top:4px;display:flex;flex-wrap:wrap;gap:2px 8px;font-size:13px;font-weight:600}.zl small{font-weight:400;opacity:.75;margin-left:1px}
@media(max-width:560px){.zbox{grid-template-columns:1fr}}
.a4 .zbox{gap:6px}.a4 .zb{font-size:9pt;color:#000;padding:5px 8px}.a4 .zb b{font-size:13pt}.a4 .zl{font-size:9pt}
.a4 .zb.z{background:#ffc7ce}.a4 .zb.o{background:#fff2cc}.a4 .zb.k{background:#c6efce}
@page{size:A4;margin:0}
@media print{
  body>*:not(#printLayer){display:none!important}
  #printLayer{position:static!important;background:#fff!important;overflow:visible!important}
  .pbar{display:none!important}
  .a4{margin:0;box-shadow:none;width:210mm;min-height:297mm;page-break-after:always;zoom:1!important}
  .a4:last-child{page-break-after:auto}
}

/* taşma koruması (telefonda kamera ekranı) */
#scanLayer{overflow-x:hidden}#scanLayer .in{width:100%;max-width:640px;overflow-x:hidden}
.stage{max-width:100%}.stage video{max-width:100%;object-fit:contain}.row>*{min-width:0}