:root{
  --turkuaz:#66C1BE;
  --turkuaz-koyu:#4fa9a6;
  --gri:#B2B2B2;
  --acik-gri:#DADADA;
  --zemin:#f5f6f6;
  --beyaz:#ffffff;
  --metin:#2f3536;
  --kirmizi:#d9534f;
  --yesil:#4f9d69;
  --sari:#e0a800;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',Roboto,Arial,sans-serif;background:var(--zemin);color:var(--metin);font-size:14px}
a{color:var(--turkuaz-koyu);text-decoration:none}
a:hover{text-decoration:underline}

/* Üst bar */
.topbar{background:var(--turkuaz);color:#fff;padding:0 22px;display:flex;align-items:center;justify-content:space-between;height:56px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.topbar .brand{font-weight:700;font-size:17px;letter-spacing:.3px;display:flex;align-items:center;gap:10px}
.topbar .brand .logo{width:30px;height:30px;border-radius:7px;background:#fff;color:var(--turkuaz);display:flex;align-items:center;justify-content:center;font-weight:800}
.topbar .user{font-size:13px;opacity:.95}
.topbar .user a{color:#fff;margin-left:14px;font-weight:600}

.layout{display:flex;min-height:calc(100vh - 56px)}
.sidebar{width:210px;background:var(--beyaz);border-right:1px solid var(--acik-gri);padding:14px 0}
.sidebar a{display:block;padding:11px 22px;color:var(--metin);font-weight:600;border-left:3px solid transparent}
.sidebar a:hover{background:var(--zemin);text-decoration:none}
.sidebar a.active{border-left-color:var(--turkuaz);color:var(--turkuaz-koyu);background:#eefbfa}
.content{flex:1;padding:24px 30px;max-width:1200px}

/* Nav rozeti (Beklemede / Onaylar sayısı) */
.nav-badge{display:inline-block;min-width:18px;padding:0 6px;margin-left:4px;
  font-size:11px;line-height:18px;text-align:center;border-radius:9px;
  background:var(--turkuaz);color:#fff;font-weight:700}
.sidebar a.active .nav-badge{background:var(--turkuaz-koyu)}

/* Sekmeler (Onaylanmış / Beklemede) */
.tabs{display:flex;gap:4px;margin:6px 0 16px;border-bottom:1px solid var(--acik-gri)}
.tabs .tab{padding:8px 16px;font-weight:600;color:var(--metin);
  border:1px solid transparent;border-bottom:none;border-radius:7px 7px 0 0}
.tabs .tab:hover{background:var(--zemin);text-decoration:none}
.tabs .tab.active{background:var(--beyaz);border-color:var(--acik-gri);
  color:var(--turkuaz-koyu);margin-bottom:-1px}

h1{font-size:21px;margin:0 0 4px} h2{font-size:16px;margin:22px 0 10px;color:var(--turkuaz-koyu)}
.sub{color:#777;margin:0 0 18px;font-size:13px}

.card{background:#fff;border:1px solid var(--acik-gri);border-radius:10px;padding:18px;margin-bottom:18px}

table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden}
th,td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--acik-gri);font-size:13px}
th{background:var(--acik-gri);color:#444;font-weight:700;white-space:nowrap}
tr:hover td{background:#fafbfb}
td.num,th.num{text-align:right;white-space:nowrap}

.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:700}
.b-pending{background:#fff3cd;color:#8a6d00}
.b-paid{background:#e1f3e8;color:var(--yesil)}
.b-carried{background:#e7e7e7;color:#666}
.b-cancelled{background:#f3d6d6;color:#a33}
.b-approved{background:#e1f3e8;color:var(--yesil)}
.b-appr-pending{background:#fff3cd;color:#8a6d00}
.b-rejected{background:#f3d6d6;color:#a33}
.b-overdue{background:#f9d6d6;color:#c0392b}

.btn{display:inline-block;background:var(--turkuaz);color:#fff;border:none;padding:9px 16px;border-radius:7px;font-weight:700;cursor:pointer;font-size:13px}
.btn:hover{background:var(--turkuaz-koyu);text-decoration:none;color:#fff}
.btn.sec{background:var(--gri)} .btn.sec:hover{background:#9a9a9a}
.btn.danger{background:var(--kirmizi)} .btn.danger:hover{background:#c33}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.ghost{background:#fff;color:var(--turkuaz-koyu);border:1px solid var(--turkuaz)}

form .row{margin-bottom:13px}
label{display:block;font-weight:600;margin-bottom:5px;font-size:13px}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--gri);border-radius:7px;font-size:13px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--turkuaz)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.hint{font-size:12px;color:#888;margin-top:3px}

.flash{padding:11px 15px;border-radius:8px;margin-bottom:14px;font-weight:600}
.flash.ok{background:#e1f3e8;color:var(--yesil)}
.flash.error{background:#f7dede;color:#b03a36}

/* Rapor kartları */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px}
.stat{background:#fff;border:1px solid var(--acik-gri);border-top:3px solid var(--turkuaz);border-radius:10px;padding:15px}
.stat .k{font-size:12px;color:#777;font-weight:600}
.stat .v{font-size:20px;font-weight:800;margin-top:4px;color:var(--metin)}
.stat .n{font-size:11.5px;color:#999;margin-top:2px}

.filters{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:16px}
.filters .row{margin:0}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}

/* Login */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,var(--turkuaz),var(--acik-gri))}
.login-box{background:#fff;padding:34px;border-radius:14px;width:340px;box-shadow:0 10px 40px rgba(0,0,0,.18)}
.login-box .logo{width:54px;height:54px;border-radius:12px;background:var(--turkuaz);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;margin:0 auto 14px}
.login-box h2{text-align:center;margin:0 0 4px;color:var(--metin)}
.login-box p{text-align:center;color:#888;margin:0 0 20px;font-size:13px}

.approval-flow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.approval-flow .step{padding:6px 12px;border-radius:8px;border:1px solid var(--acik-gri);font-size:12.5px;font-weight:600}
.muted{color:#999}

/* Tablo araçları: canlı filtre + tıklayarak sıralama */
.table-tools{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.table-tools .js-filter{flex:1;min-width:200px;max-width:360px;padding:8px 12px;border:1px solid var(--acik-gri);border-radius:8px;font-size:13px}
table.js-table th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
table.js-table th[data-sort]:hover{background:rgba(102,193,190,.18)}
table.js-table th .arr{color:var(--turkuaz);font-size:11px}

/* Yönetilen liste etiketleri (segment/alt tür/kanal) */
.taglist{display:inline-flex;align-items:center;gap:6px;background:var(--acik-gri);border-radius:16px;padding:4px 6px 4px 12px;font-size:13px;font-weight:600;color:var(--metin)}
.taglist .x{border:none;background:#fff;color:var(--kirmizi);border-radius:50%;width:20px;height:20px;cursor:pointer;font-weight:800;line-height:1;font-size:14px}
.taglist .x:hover{background:var(--kirmizi);color:#fff}
.chk{display:inline-flex;align-items:center;gap:6px;background:#f4f6f6;border:1px solid var(--acik-gri);border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer}
.chk input{width:auto;margin:0}
h3{font-size:15px;margin:14px 0 4px;color:var(--metin)}