/* Yerleşim: üstte okul çubuğu, altında sekmeli çalışma alanı; çıktılar A4 önizleme olarak */
:root{
  --bg:#f3f5f4; --panel:#ffffff; --ink:#17221e; --muted:#5d6b66; --line:#d5ddd9;
  --accent:#0f6b52; --accent-ink:#ffffff; --soft:#e3efe9; --warn:#a4501b; --ok:#16794f; --danger:#b42318;
  --f-display:"Sora",system-ui,sans-serif; --f-body:"Figtree",system-ui,sans-serif;
  --f-print:"Roboto Condensed","Arial Narrow",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121816; --panel:#1b2420; --ink:#e4ece8; --muted:#97a69f; --line:#2f3b36;
  --accent:#4cc79c; --accent-ink:#0b1712; --soft:#1f3229; --warn:#f0a26b; --ok:#5fd39f; --danger:#f97066; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121816; --panel:#1b2420; --ink:#e4ece8; --muted:#97a69f; --line:#2f3b36;
  --accent:#4cc79c; --accent-ink:#0b1712; --soft:#1f3229; --warn:#f0a26b; --ok:#5fd39f; --danger:#f97066; color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body)}
[hidden]{display:none!important}
.app{max-width:1400px;margin:0 auto;padding:16px 16px 60px}
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-bottom:14px}
.topbar h1{font:700 20px/1.2 var(--f-display);margin:0;letter-spacing:-.01em}
.topbar .school{color:var(--muted);font-weight:600}
.topbar .sp{flex:1}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
h2{font:600 13px/1.3 var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
label.fld{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
label.chk{display:flex;flex-direction:row;align-items:center;gap:6px;font-size:14px;font-weight:500}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select{font:inherit;font-weight:400;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--ink);width:100%}
input[type=color]{width:44px;height:34px;border:1px solid var(--line);border-radius:7px;background:none;padding:2px}
.stack{display:flex;flex-direction:column;gap:10px}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.bar label.fld{min-width:120px;flex:0 1 auto}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start}
.btn{font:600 14px var(--f-body);border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:8px 14px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.danger{color:var(--danger)}
.btn.sm{padding:4px 9px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible,input:focus-visible,select:focus-visible,.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.drop{border:1.5px dashed var(--line);border-radius:10px;padding:16px;text-align:center;color:var(--muted);font-size:14px;transition:border-color .15s,background .15s}
.drop.over{border-color:var(--accent);background:var(--soft)}
.drop .btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tab{font:600 14px var(--f-body);background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;color:var(--muted);cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--ink)}
.clsbar{display:flex;flex-wrap:wrap;gap:6px}
.clsbar button{font:600 14px var(--f-body);padding:7px 14px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.clsbar button:hover{border-color:var(--accent)}
.clsbar button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.clsbar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tab[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.sec{display:flex;flex-direction:column;gap:14px}
.note{font-size:13px;color:var(--muted);margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--soft);color:var(--ink);font-variant-numeric:tabular-nums}
.chip.warn{color:var(--warn)} .chip.ok{color:var(--ok)}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;max-height:70vh}
table.list{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
table.list th,table.list td{padding:5px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;vertical-align:middle}
table.list th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--bg);position:sticky;top:0;z-index:1}
table.list tr.grp td{background:var(--soft);font-weight:700}
table.list td.acts{display:flex;gap:6px}
table.list input{padding:4px 6px;min-width:70px}
.thumb{width:32px;height:41px;object-fit:cover;border-radius:3px;display:block;background:var(--line);cursor:pointer}
.st-ok{color:var(--ok);font-weight:600}.st-no{color:var(--warn);font-weight:600}
.results{font-size:13px;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.results .ok{color:var(--ok)} .results .no{color:var(--warn)}
progress{width:100%;height:8px}
.previewbox{overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:14px;max-height:80vh}
.previewbox .pages{zoom:.62;display:flex;flex-direction:column;gap:10mm;align-items:center}
.previewbox .page{box-shadow:0 1px 6px rgba(0,0,0,.18)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px;z-index:50;max-width:calc(100% - 32px)}
.toast.err{background:var(--danger);color:#fff}
#printRoot{display:none}

/* Giriş */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.auth .panel{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px}
.auth h1{font:700 22px/1.2 var(--f-display);margin:0}
.auth .err{color:var(--danger);font-size:14px;margin:0;min-height:1.2em}

/* ---------- Basılı sayfa ---------- */
.page{width:210mm;height:297mm;background:#fff;color:#111;padding:7mm;overflow:hidden;font-family:var(--f-print)}
.gs-page{display:grid;grid-template-columns:1fr 1fr;gap:4mm}
table.gs{border-collapse:collapse;width:100%;table-layout:fixed;font-size:6.5pt}
table.gs td,table.gs th{border:.25mm solid #222;padding:0}
table.gs th{font-weight:700;line-height:1.05;text-align:center;font-size:6pt}
table.gs th.dn{font-size:7.5pt;text-decoration:underline}
.gs-hd{display:flex;align-items:center;gap:2mm;padding:1mm 1.5mm;height:13mm}
.gs-hd img{height:10mm;width:10mm;object-fit:contain}
.gs-hd .sn{flex:1;font-size:10pt;font-weight:700;text-align:center;line-height:1.1}
.gs-hd .yr{border-left:.25mm solid #222;padding-left:1.5mm;text-align:center;font-size:7pt;line-height:1.5;min-width:15mm}
.gs-hd .yr b{color:#b3261e;display:block}
.gs-hd .yr span{font-weight:700;font-size:8pt}
table.gs tr.r1{height:10.3mm}
table.gs tr.r2{height:4.6mm}
table.gs td.ph img{width:100%;height:14.8mm;object-fit:cover;display:block}
table.gs td.vn{vertical-align:middle}
table.gs td.vn div{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:700;font-size:6pt;line-height:1.05;max-height:14.6mm;overflow:hidden;margin:0 auto;word-break:break-word}
table.gs td.ort{font-size:6pt;font-weight:700;padding-left:1mm}
.gs-ders{font-size:7pt;padding:.8mm 1.5mm;text-align:left;font-weight:400}
.sl-page{display:flex;flex-direction:column;gap:5mm;padding:12mm 9mm}
.sl-hd{background:#cfdcec;border:.3mm solid #556;border-radius:2.5mm;text-align:center;font-weight:700;font-size:11pt;line-height:1.35;padding:2mm;font-family:Arial,sans-serif}
.sl-grid{display:grid;gap:4mm 3mm;justify-content:center}
.sl-it{display:flex;flex-direction:column;gap:1.5mm;min-width:0}
.sl-it .im{aspect-ratio:133/171;border:.3mm solid #556;background:#eee}
.sl-it .im img{width:100%;height:100%;object-fit:cover;display:block}
.sl-it .lb{background:#cfdcec;border:.3mm solid #556;border-radius:1.5mm;text-align:center;font-weight:700;font-size:7.5pt;line-height:1.15;padding:1mm .8mm;min-height:8.5mm;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif}
.cd-page{display:grid;grid-template-columns:repeat(2,85.6mm);grid-auto-rows:54mm;gap:4mm 6mm;justify-content:center;align-content:start;padding-top:6mm}
.card{width:85.6mm;height:54mm;border:.2mm dashed #999;border-radius:3mm;overflow:hidden;background:#fff;display:flex;flex-direction:column;font-family:var(--f-print);color:#111}
.card .ch{display:flex;align-items:center;gap:2mm;padding:1.6mm 2.5mm;height:12mm;border-bottom:.6mm solid var(--c)}
.card .ch img{height:9mm;width:9mm;object-fit:contain}
.card .cs{flex:1;text-align:center;font-weight:700;font-size:8.5pt;line-height:1.12;text-transform:uppercase}
.card .ct{background:var(--c);color:#fff;font-weight:700;font-size:7pt;text-align:center;padding:.8mm 0;letter-spacing:.03em}
.card .cb{flex:1;display:flex;gap:2.5mm;padding:2mm 2.5mm}
.card .cp{width:23.3mm;height:30mm;border:.3mm solid var(--c);flex:none;background:#eee}
.card .cp img{width:100%;height:100%;object-fit:cover;display:block}
.card .cf{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.card .f{display:grid;grid-template-columns:14mm 1fr;gap:1.2mm;align-items:center}
.card .f span{font-size:7pt;border:.25mm solid var(--c);border-radius:1mm;padding:.6mm 1mm}
.card .f b{font-size:8pt;border:.25mm solid var(--c);border-radius:1mm;padding:.6mm 1.2mm;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Okul rengi (--c) başlıklara açık tonla uygulanır */
.sl-hd,.sl-it .lb{background:color-mix(in srgb,var(--c,#5a7bb0) 18%,#fff)}
.gs-hd .yr b{color:var(--c,#b3261e)}

/* Belge başlığı: yoklama, imza, oturma planı */
.doc-page{display:flex;flex-direction:column;gap:3mm;padding:9mm 8mm}
.doc-hd{display:flex;align-items:center;gap:3mm;border:.3mm solid #333;border-radius:2mm;padding:2mm 3mm;background:color-mix(in srgb,var(--c,#5a7bb0) 12%,#fff)}
.doc-hd img{height:11mm;width:11mm;object-fit:contain}
.doc-hd .t{flex:1;display:flex;flex-direction:column;text-align:center;line-height:1.25}
.doc-hd .t b{font-size:11pt}
.doc-hd .t span{font-size:10pt;font-weight:700;letter-spacing:.04em}
.doc-hd .r{display:flex;flex-direction:column;align-items:center;border-left:.3mm solid #333;padding-left:3mm;min-width:24mm;line-height:1.3}
.doc-hd .r b{font-size:13pt}
.doc-hd .r span{font-size:8pt}
table.doc-t{border-collapse:collapse;width:100%;table-layout:fixed;font-size:7.5pt}
table.doc-t th,table.doc-t td{border:.2mm solid #333;padding:0 1mm;overflow:hidden;white-space:nowrap}
table.doc-t th{background:#eee;font-weight:700;text-align:center;height:6mm}
table.doc-t td.nm{text-align:left;font-weight:700}
table.doc-t td{text-align:center}
table.yk td{height:5.75mm}
table.yk th{font-size:6.5pt;padding:0}
table.yk .we{background:#d9d9d9}
table.ims td{height:7mm}
.board{border:.4mm solid #333;border-radius:1.5mm;text-align:center;font-weight:700;letter-spacing:.3em;padding:2mm;background:#2f4f3a;color:#fff;margin:0 25mm}
.desks{display:grid;gap:4mm 7mm}
.desk{display:grid;gap:1.5mm;border:.35mm solid #555;border-radius:1.5mm;padding:1.5mm;background:#faf7f0}
.seat{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.8mm;min-width:0;overflow:hidden}
.seat img{aspect-ratio:133/171;object-fit:cover;border:.25mm solid #888;max-width:100%}
.seat span{font-size:6.5pt;font-weight:700;text-align:center;line-height:1.1}
.lb-page{display:grid;grid-template-columns:repeat(3,70mm);grid-auto-rows:37.125mm;padding:0}
.lb-page.big{grid-template-columns:repeat(2,105mm);grid-auto-rows:74.25mm}
.lbl{border:.2mm dashed #bbb;display:flex;flex-direction:column;justify-content:center;gap:1mm;padding:3mm 5mm;overflow:hidden}
.lbl small{font-size:6.5pt;color:#555;font-weight:700;text-transform:uppercase}
.lbl b{font-size:12pt;line-height:1.1;color:var(--c,#111)}
.lbl span{font-size:8pt}
.lbl .ln{border-bottom:.25mm solid #333;padding-bottom:.5mm;margin-top:1mm}
.lbl.big{align-items:center;text-align:center;gap:3mm}
.lbl.big b{font-size:24pt}
.lbl.big span{font-size:11pt;font-weight:700}

/* Defter kapağı */
.kp-page{padding:10mm}
.kp-frame{height:100%;border:1.2mm double var(--c,#333);border-radius:3mm;padding:12mm 12mm 10mm;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5mm}
.kp-logo{height:28mm;width:28mm;object-fit:contain}
.kp-ust{font-size:11pt;font-weight:700;line-height:1.45;letter-spacing:.02em}
.kp-okul{font-size:20pt;font-weight:700;line-height:1.15;max-width:160mm;margin-top:3mm}
.kp-yil{font-size:12pt;font-weight:700;letter-spacing:.06em}
.kp-sinif{font-size:54pt;font-weight:700;line-height:1;padding:4mm 14mm;border:.8mm solid var(--c,#333);border-radius:3mm;color:var(--c,#111);margin-top:4mm}
.kp-tur{font-size:24pt;font-weight:700;letter-spacing:.08em}
.kp-grid{display:grid;gap:2mm 1.6mm;width:100%;margin-top:2mm}
.kp-grid div{display:flex;flex-direction:column;align-items:center;min-width:0}
.kp-grid img{width:100%;aspect-ratio:133/171;object-fit:cover;border:.2mm solid #999}
.kp-grid span{font-size:5.5pt;font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;max-width:100%}
.kp-sp{flex:1}
.kp-alt{margin-top:auto;width:100%;display:flex;justify-content:space-between;gap:12mm}
.kp-alt div{flex:1;display:flex;flex-direction:column;gap:2mm;text-align:center}
.kp-alt span{font-size:10pt;font-weight:700}
.kp-alt b{border-bottom:.3mm dotted #333;min-height:7mm;font-size:12pt;padding-bottom:1mm}

/* Sınav yerleşimi */
.sy-foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6mm;align-items:end;font-size:8.5pt;margin-top:3mm}
.sy-foot .sig{display:flex;flex-direction:column;gap:1mm;text-align:center;font-weight:700}
.sy-foot .sig b{border-bottom:.3mm dotted #333;height:8mm}
.sy-grid{display:grid;gap:3mm}
.sy-seat{border:.35mm solid #444;border-radius:1.5mm;padding:1.5mm 2mm;display:flex;flex-direction:column;justify-content:center;position:relative;background:#faf7f0;overflow:hidden}
.sy-seat i{position:absolute;top:1mm;right:1.5mm;font-style:normal;font-size:7pt;font-weight:700;color:#666}
.sy-seat b{font-size:8.5pt;line-height:1.15}
.sy-seat span{font-size:7pt;color:#333}
.sy-cards .sy-card{width:85.6mm;height:54mm;border:.25mm dashed #999;border-radius:3mm;padding:3mm 4mm;display:flex;flex-direction:column;gap:2mm;overflow:hidden}
.sy-card .hd{display:flex;align-items:center;gap:2mm;border-bottom:.5mm solid var(--c,#333);padding-bottom:1.5mm}
.sy-card .hd img{height:8mm;width:8mm;object-fit:contain}
.sy-card .hd div{display:flex;flex-direction:column;line-height:1.15}
.sy-card .hd b{font-size:7.5pt}
.sy-card .hd span{font-size:7pt;font-weight:700;color:var(--c,#333)}
.sy-card .nm{font-size:13pt;font-weight:700;line-height:1.1}
.sy-card .in{font-size:7.5pt}
.sy-card .pl{margin-top:auto;display:grid;grid-template-columns:2fr 1fr;gap:2mm}
.sy-card .pl div{border:.4mm solid var(--c,#333);border-radius:1.5mm;text-align:center;padding:1mm}
.sy-card .pl span{display:block;font-size:6.5pt;font-weight:700}
.sy-card .pl b{font-size:13pt}

/* Panel ekleri */
.banner{background:color-mix(in srgb,var(--warn) 15%,var(--panel));border:1px solid var(--warn);color:var(--ink);border-radius:8px;padding:8px 14px;margin-bottom:12px;font-weight:600}
.badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:99px;background:var(--warn);color:#fff;font-size:12px;line-height:20px;text-align:center}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.pgrid figure{margin:0;font-size:12px;display:flex;flex-direction:column;gap:4px}
.pgrid img{width:100%;aspect-ratio:133/171;object-fit:cover;border-radius:4px;border:1px solid var(--line);display:block}
.pgrid .kb{color:var(--warn)}
.pgrid .acts{display:flex;gap:4px}

/* Veli sayfası */
.veli{max-width:480px;margin:0 auto;padding:20px 16px 40px;display:flex;flex-direction:column;gap:14px}
.veli h1{font:700 20px/1.25 var(--f-display);margin:0}
.veli .preview{width:160px;aspect-ratio:133/171;object-fit:cover;border-radius:6px;border:1px solid var(--line);align-self:center}
.veli .done{background:color-mix(in srgb,var(--ok) 14%,var(--panel));border:1px solid var(--ok);border-radius:10px;padding:16px;font-weight:600}

/* Tanıtım */
.hero{max-width:980px;margin:0 auto;padding:48px 16px 24px;display:grid;gap:18px}
.hero h1{font:700 clamp(28px,5vw,44px)/1.1 var(--f-display);margin:0;letter-spacing:-.02em;text-wrap:balance;max-width:18ch}
.hero p{font-size:17px;color:var(--muted);max-width:60ch;margin:0}
.feat{max-width:980px;margin:0 auto;padding:12px 16px 48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.feat .panel h3{font:600 16px/1.3 var(--f-body);margin:0 0 6px}
.feat .panel p{margin:0;color:var(--muted);font-size:14px}

@page{size:A4 portrait;margin:0}
@media print{
  html,body{background:#fff}
  .app,.toast{display:none!important}
  #printRoot{display:block}
  #printRoot .page{break-after:page;box-shadow:none}
  #printRoot .page:last-child{break-after:auto}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}