:root{
  --ink:#1b2330;--muted:#64707e;--line:#dfe4ea;--bg:#f3f5f8;--card:#fff;--brand:#1f3a5f;--brand2:#2b5c99;
  --good:#1b8a3e;--goodbg:#e5f5ea;--warn:#b86e00;--warnbg:#fff3dd;--bad:#c62828;--badbg:#fde8e8;--info:#2457a8;--infobg:#e7eefb;
  --mute:#8a94a0;--mutebg:#eef1f4;--radius:10px;--shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:15px/1.45 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand2)}
.hidden{display:none!important}
.app{min-height:100%;display:flex;flex-direction:column}
/* ---- üst bar ---- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--brand);color:#fff;padding-top:calc(8px + env(safe-area-inset-top))}
.brand{font-weight:700;letter-spacing:.01em}
.spacer{flex:1}
.who{font-size:13px;opacity:.9;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{background:transparent;border:0;color:#fff;font-size:20px;padding:4px 8px;border-radius:6px;cursor:pointer;position:relative}
.iconbtn:hover{background:rgba(255,255,255,.12)}
.badge{position:absolute;top:-2px;right:-2px;background:#ff8f00;color:#000;font-size:11px;font-weight:700;border-radius:10px;padding:0 5px;line-height:16px}
.netdot{width:10px;height:10px;border-radius:50%;background:#3ad37a;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.netdot.off{background:#ff5252}
/* ---- nav ---- */
.nav{display:flex;gap:4px;padding:6px 10px;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto;position:sticky;top:48px;z-index:19}
.nav a{white-space:nowrap;text-decoration:none;color:var(--ink);padding:8px 12px;border-radius:8px;font-weight:500;font-size:14px}
.nav a.on{background:var(--infobg);color:var(--brand2)}
@media (max-width:700px){
  .nav{position:fixed;top:0;left:0;bottom:0;width:240px;flex-direction:column;padding:60px 10px 10px;border-right:1px solid var(--line);transform:translateX(-100%);transition:transform .2s;z-index:30}
  .nav.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
}
@media (min-width:701px){#navToggle{display:none}}
/* ---- içerik ---- */
.content{flex:1;padding:14px;max-width:1200px;width:100%;margin:0 auto}
h1{font-size:22px;margin:4px 0 12px}
h2{font-size:17px;margin:18px 0 8px}
h3{font-size:15px;margin:12px 0 6px}
p{margin:0 0 10px}
.sub{color:var(--muted);font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);margin-bottom:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.grid{display:grid;gap:12px}
.grid.kpi{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.kpi .v{font-size:26px;font-weight:700;line-height:1.1}
.kpi .l{font-size:12px;color:var(--muted);margin-top:2px}
.kpi.bad .v{color:var(--bad)} .kpi.warn .v{color:var(--warn)} .kpi.good .v{color:var(--good)}
/* ---- butonlar ---- */
.btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 14px;cursor:pointer;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:#f6f8fa}
.btn.primary{background:var(--brand2);border-color:var(--brand2);color:#fff}
.btn.primary:hover{background:#24508a}
.btn.good{background:var(--good);border-color:var(--good);color:#fff}
.btn.bad{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.warn{background:var(--warn);border-color:var(--warn);color:#fff}
.btn.sm{padding:6px 10px;font-size:13px}
.btn.block{width:100%;justify-content:center;padding:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* ---- form ---- */
label.f{display:block;margin-bottom:10px}
label.f span{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=datetime-local],select,textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:#fff}
textarea{min-height:70px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid #9cc0ef;border-color:var(--brand2)}
.err{color:var(--bad);font-size:13px;margin:6px 0}
.ok{color:var(--good);font-size:13px;margin:6px 0}
/* ---- etiketler ---- */
.tag{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px;background:var(--mutebg);color:var(--mute)}
.tag.bekliyor{background:var(--mutebg);color:#5b6570}
.tag.kontrolde{background:var(--infobg);color:var(--info)}
.tag.ret{background:var(--badbg);color:var(--bad)}
.tag.sartli{background:var(--warnbg);color:var(--warn)}
.tag.hazir{background:var(--goodbg);color:var(--good)}
.tag.teslim{background:#e3e8f5;color:#1f3a5f}
.tag.kritik{background:var(--badbg);color:var(--bad)}
.tag.major{background:var(--warnbg);color:var(--warn)}
.tag.minor{background:var(--infobg);color:var(--info)}
.tag.acik{background:var(--badbg);color:var(--bad)}
.tag.duzeltildi{background:var(--infobg);color:var(--info)}
.tag.kapandi{background:var(--goodbg);color:var(--good)}
.tag.reddedildi{background:var(--warnbg);color:var(--warn)}
.tag.iptal{background:var(--mutebg);color:var(--mute);text-decoration:line-through}
/* ---- tablo ---- */
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px;background:#fff}
th,td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;background:#fafbfc}
tr.click{cursor:pointer} tr.click:hover{background:#f6f8fa}
/* ---- ısı haritası ---- */
.heat{display:grid;gap:4px;margin-top:6px}
.heat .katrow{display:flex;gap:4px;align-items:center}
.heat .katlbl{width:32px;font-size:12px;color:var(--muted);text-align:right;margin-right:4px}
.cell{width:44px;height:32px;border-radius:6px;font-size:11px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;font-weight:600}
.cell.bekliyor{background:#b8c0c9;color:#333} .cell.kontrolde{background:#2b6cd4} .cell.ret{background:#d03b3b} .cell.sartli{background:#e08a2f} .cell.hazir{background:#1b8a3e} .cell.teslim{background:#1f3a5f}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:3px}
.bar{height:18px;background:var(--brand2);border-radius:4px;min-width:2px}
.barrow{display:grid;grid-template-columns:180px 1fr 40px;gap:8px;align-items:center;font-size:13px;margin:4px 0}
/* ---- kontrol ekranı ---- */
.mahaltabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;position:sticky;top:48px;background:var(--bg);z-index:5}
.mahaltabs button{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer}
.mahaltabs button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.mahaltabs button .n{background:var(--bad);color:#fff;border-radius:10px;padding:0 6px;margin-left:4px;font-size:11px}
.item{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.item .t{flex:1;min-width:0}
.item .t b{display:block;font-size:15px}
.item .t span{font-size:12px;color:var(--muted)}
.item .t .kr{color:var(--bad);font-weight:700;font-size:11px;margin-left:4px}
.item.bad{border-color:#f1b4b4;background:#fff8f8}
.item.na{opacity:.55}
.tri{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tri button{border:0;background:#fff;width:44px;height:40px;font-size:18px;cursor:pointer}
.tri button.on.ok{background:var(--goodbg);color:var(--good)}
.tri button.on.no{background:var(--badbg);color:var(--bad)}
.tri button.on.na{background:var(--mutebg);color:var(--mute)}
.sticky-bottom{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:10px;display:flex;gap:10px;align-items:center;margin:0 -14px -14px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.thumbs img{width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:pointer}
.thumbs .ph{position:relative}
.thumbs .ph button{position:absolute;top:-6px;right:-6px;border:0;background:var(--bad);color:#fff;border-radius:50%;width:20px;height:20px;font-size:12px;cursor:pointer}
.filebtn{display:inline-block}
.filebtn input{display:none}
/* ---- eksik kartı ---- */
.issue{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px}
.issue .hd{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.issue .hd b{font-size:15px}
.issue .meta{font-size:12px;color:var(--muted)}
.issue.overdue{border-left:4px solid var(--bad)}
.hist{font-size:12px;color:var(--muted);border-top:1px dashed var(--line);margin-top:8px;padding-top:6px}
/* ---- modal ---- */
.modal{position:fixed;inset:0;background:rgba(10,20,40,.5);display:flex;align-items:flex-end;justify-content:center;z-index:40}
.modal-box{background:#fff;width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:14px 14px 0 0;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
@media (min-width:701px){.modal{align-items:center}.modal-box{border-radius:14px}}
.modal-box h2{margin-top:0}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1b2330;color:#fff;padding:10px 16px;border-radius:8px;z-index:50;font-size:14px;max-width:90vw}
.toast.bad{background:var(--bad)} .toast.good{background:var(--good)}
/* ---- login ---- */
.login{max-width:380px;margin:10vh auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow)}
.login h1{margin:0 0 4px;font-size:22px}
/* ---- tutanak / yazdır ---- */
.tutanak{background:#fff;padding:24px;max-width:800px;margin:0 auto;border:1px solid var(--line)}
.tutanak table{font-size:13px}
.tutanak .imza{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:40px;text-align:center;font-size:13px}
.tutanak .imza div{border-top:1px solid #333;padding-top:6px}
@media print{.top,.nav,.noprint{display:none!important}.content{padding:0;max-width:none}.tutanak{border:0}body{background:#fff}}
.img-full{max-width:100%;max-height:80vh;display:block;margin:0 auto;border-radius:8px}
.small{font-size:12px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.pill-row{display:flex;gap:6px;flex-wrap:wrap}
.pill-row button{border:1px solid var(--line);background:#fff;border-radius:16px;padding:6px 12px;font-size:13px;cursor:pointer}
.pill-row button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.pill-row button.on.kritik{background:var(--bad);border-color:var(--bad)}
.pill-row button.on.major{background:var(--warn);border-color:var(--warn)}
.pill-row button.on.minor{background:var(--info);border-color:var(--info)}
.unitcard{cursor:pointer}
.unitcard:hover{border-color:#b9c7d8}
.unitcard .code{font-size:18px;font-weight:700}
.cnt{font-size:12px;color:var(--muted)}
.cnt b{color:var(--bad)}
#heat{display:flex;gap:28px;flex-wrap:wrap}