:root{
  --ink:#18212b; --muted:#64707d; --paper:#f3f4f1; --card:#fff; --line:#dde0da;
  --accent:#2c4bd6; --accent-ink:#fff;
  --expired:#b42318; --critical:#c2410c; --warning:#a16207; --safe:#2f7d4f; --unknown:#7b8794;
  --expired-bg:#fde8e6; --critical-bg:#ffedd9; --warning-bg:#fbf0c8; --safe-bg:#dff3e6; --unknown-bg:#eceff2;
  --r:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
h1,h2{margin:0;line-height:1.2}
h1{font-size:22px;font-weight:600}
h2{font-size:16px;font-weight:600;margin-bottom:14px}
.muted{color:var(--muted)} .small{font-size:13px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Üst çubuk */
.topbar{background:var(--card);border-bottom:1px solid var(--line)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:18px;padding-bottom:18px;flex-wrap:wrap}
.brand p{margin:2px 0 0;font-size:14px}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.actions form{margin:0}

/* Butonlar */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border:1px solid var(--line);background:var(--card);border-radius:8px;font-weight:500;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.btn:hover{border-color:#b9bfb6;background:#fafbf9}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:#2340bd}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink);background:#eceeea}
.btn.sm{padding:5px 10px;font-size:13px}
.btn.danger{color:var(--expired)}
.btn.danger:hover{background:var(--expired-bg);border-color:#f2b8b2}
.btn:disabled{opacity:.45;cursor:not-allowed}

main.wrap{padding-top:22px;padding-bottom:40px}

/* Bildirimler */
.notice{margin:0 0 14px;padding:11px 14px;border-radius:8px;border:1px solid var(--line);background:var(--card);font-size:14px}
.notice.ok{background:var(--safe-bg);border-color:#b7dfc5}
.notice.warn{background:var(--warning-bg);border-color:#ead68a}
.notice.error{background:var(--expired-bg);border-color:#f2b8b2}

/* Özet */
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;border-left-width:4px}
.stat .num{display:block;font-size:30px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.stat .lbl{font-size:13px;color:var(--muted)}
.s-expired{border-left-color:var(--expired)} .s-critical{border-left-color:var(--critical)}
.s-warning{border-left-color:var(--warning)} .s-safe{border-left-color:var(--safe)} .s-unknown{border-left-color:var(--unknown)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:18px}
.two{display:grid;grid-template-columns:1.1fr 1fr;gap:18px}
.two .card{margin-bottom:18px}

/* Kaydedici listesi */
.reg-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.reg-row{width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 12px;text-align:left;background:none;border:1px solid transparent;border-radius:8px;padding:8px 10px;cursor:pointer}
.reg-row:hover,.reg-row.on{background:#f3f5f1;border-color:var(--line)}
.reg-name{font-weight:600;overflow-wrap:anywhere}
.reg-count{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px}
.reg-bar{grid-column:1/-1;height:6px;background:#e9ece6;border-radius:3px;overflow:hidden}
.reg-bar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.reg-meta{grid-column:1/-1;font-size:13px;color:var(--muted)}
.urgent{color:var(--critical);margin-left:8px;font-weight:600}

/* 12 aylık takvim */
.months{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:190px}
.month{display:flex;flex-direction:column;align-items:center;height:100%;min-width:0}
.m-count{font-size:13px;font-weight:600;height:18px;font-variant-numeric:tabular-nums}
.m-bar{flex:1;width:100%;display:flex;align-items:flex-end;background:repeating-linear-gradient(to top,#eef0eb 0 1px,transparent 1px 25%);border-radius:4px}
.m-bar i{display:block;width:100%;background:var(--accent);border-radius:4px 4px 0 0}
.m-label{font-size:12px;color:var(--muted);margin-top:6px;text-align:center;line-height:1.1}
.m-label small{display:block;font-size:10px;opacity:.7}

/* Ekleme */
.add summary{cursor:pointer;font-weight:600}
.add-form{margin-top:14px;display:grid;gap:12px;max-width:560px}
label{display:grid;gap:6px;font-size:14px;font-weight:500}
input[type=text],input[type=password],input[type=search],input[type=date],textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
input:focus,textarea:focus{border-color:var(--accent)}
label.check{display:flex;gap:8px;align-items:flex-start;font-weight:400}
label.check input{margin-top:4px}

/* Tablo */
.table-card{padding:0;overflow:hidden}
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)}
.toolbar input[type=search]{max-width:290px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:13px}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
#shown{margin-left:auto}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:900px}
th{text-align:left;font-size:13px;font-weight:600;color:var(--muted);padding:11px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]:hover{color:var(--ink)}
th.asc::after{content:' ↑'} th.desc::after{content:' ↓'}
td{padding:13px 16px;border-bottom:1px solid #ecefe9;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbf8}
.d-name{display:block;font-weight:600;overflow-wrap:anywhere}
.sub{display:block;font-size:12px;color:var(--muted)}
.sub.note{font-style:italic}
.days{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;margin-right:4px}
.left-cell .sub{display:inline}
.meter{display:block;height:4px;width:110px;background:#e9ece6;border-radius:2px;margin-top:5px;overflow:hidden}
.meter i{display:block;height:100%;border-radius:2px;background:var(--safe)}
.st-expired .meter i{background:var(--expired)} .st-critical .meter i{background:var(--critical)} .st-warning .meter i{background:var(--warning)}
.st-expired .days{color:var(--expired)} .st-critical .days{color:var(--critical)}
.err{color:var(--expired);font-weight:500;cursor:help}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.b-expired{background:var(--expired-bg);color:var(--expired)} .b-critical{background:var(--critical-bg);color:var(--critical)}
.b-warning{background:var(--warning-bg);color:var(--warning)} .b-safe{background:var(--safe-bg);color:var(--safe)}
.b-unknown{background:var(--unknown-bg);color:#52606d}
.r{text-align:right} .nowrap{white-space:nowrap}
.empty{padding:32px;text-align:center;color:var(--muted);margin:0}
.foot{margin-top:6px}

/* İlerleme */
.progress-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:18px}
.progress-text{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px}
.track{height:8px;background:#e9ece6;border-radius:4px;overflow:hidden}
.fill{height:100%;width:0;background:var(--accent);transition:width .25s}

/* Diyalog */
dialog{border:0;border-radius:12px;padding:0;width:min(520px,calc(100% - 32px));box-shadow:0 20px 50px rgba(20,30,40,.25)}
dialog::backdrop{background:rgba(20,30,40,.45)}
.dlg-form{display:grid;gap:14px;padding:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px}

/* Giriş / kurulum */
body.auth{display:grid;place-items:center;min-height:100vh;padding:20px}
.auth-card{width:min(400px,100%);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px}
.auth-card form{display:grid;gap:14px;margin-top:16px}
.auth-card h1{margin-bottom:6px}

@media (max-width:980px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .two{grid-template-columns:1fr}
}
@media (max-width:520px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .wrap{padding:0 14px}
  .grid2{grid-template-columns:1fr}
  #shown{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}