:root {
  --primary: #178582;
  --primary-dark: #0f6360;
  --sidebar: #12202e;
  --sidebar-hover: #1d3141;
  --bg: #faf9f5;
  --card: #ffffff;
  --text: #1b2733;
  --muted: #7c8894;
  --border: #eceae3;
  --success: #178582;
  --warning: #d9a400;
  --danger: #cf3a3a;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 250px;
  background: var(--sidebar);
  color: #cdd9ec;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .brand {
  padding: 20px 20px 16px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.sidebar .brand small { font-weight: 400; color: #8496a6; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.sidebar .nav-section { padding: 16px 22px 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: #6d7f8f; font-weight: 600; }
.sidebar a.nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 14px; margin: 1px 10px; border-radius: 9px;
  color: #b8c4cf; text-decoration: none; font-size: 13.5px;
}
.sidebar a.nav-link:hover { background: var(--sidebar-hover); color: #fff; }
.sidebar a.nav-link.active { background: rgba(23,133,130,.18); color: #fff; box-shadow: inset 3px 0 0 var(--primary); }
.sidebar .nav-link .ic { width: 20px; text-align: center; font-size: 14px; opacity: .9; }

.sidebar { display: flex; flex-direction: column; }
.sidebar nav { flex: 1; overflow-y: auto; padding-bottom: 8px; }
.sidebar .brand { display: flex; align-items: center; gap: 11px; }
.logo-badge { width: 34px; height: 34px; border-radius: 10px; background: #2f5f7a; color: #cfe6ee;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex: none; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); }
.side-avatar { width: 32px; height: 32px; border-radius: 50%; background: #2f5f7a; color: #cfe6ee;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.side-user-info { color: #cfd8e0; font-size: 12.5px; line-height: 1.25; flex: 1; min-width: 0; }
.side-user-info small { color: #7c8f9e; font-size: 11px; }
.side-logout { color: #93a3b1; font-size: 12px; font-weight: 600; }
.side-logout:hover { color: #fff; text-decoration: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: transparent; border-bottom: none;
  padding: 16px 30px 0; display: flex; align-items: center; justify-content: space-between;
}
.topbar .user-box { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.content { padding: 20px 30px 34px; flex: 1; }

/* Cards */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(20,30,40,.04); }
.card h2, .card h3 { margin-top: 0; }
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 700px) { .grid-4,.grid-3,.grid-2 { grid-template-columns: 1fr; } .sidebar{width:64px;} .sidebar .brand small,.sidebar .nav-section,.sidebar .nav-link span.lbl{display:none;} }

.stat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.stat .num { font-size: 26px; font-weight: 700; }
.stat .lbl { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.stat.danger { border-left: 4px solid var(--danger); }
.stat.warning { border-left: 4px solid var(--warning); }
.stat.success { border-left: 4px solid var(--success); }
.stat.primary { border-left: 4px solid var(--primary); }

/* Page header */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.page-head h1 { margin: 0; font-size: 22px; }
.page-head .sub { color: var(--muted); font-size: 13px; }

/* Tables */
table.tbl { width: 100%; border-collapse: collapse; background: var(--card); }
table.tbl th, table.tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
table.tbl th { background: #faf9f5; color: #7c8894; font-weight: 600; white-space: nowrap; font-size: 12px; }
table.tbl tr:hover td { background: #faf9f4; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
/* Cok kolonlu tablolar icin kompakt gorunum (tek sayfaya sigsin) */
table.tbl.tight th, table.tbl.tight td { padding: 5px 7px; font-size: 12px; }
table.tbl.tight .badge { padding: 2px 6px; font-size: 10px; }
table.tbl.tight .row-actions { gap: 3px; }
table.tbl.tight .act { padding: 3px 6px; font-size: 11px; }

/* Badges */
.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.badge.success { background: #d1f0dd; color: #146c43; }
.badge.warning { background: #fff0d2; color: #9a6500; }
.badge.danger { background: #fbd6da; color: #b02a37; }
.badge.muted { background: #eceef1; color: #555; }

/* Buttons */
.btn { display: inline-block; padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; font-size: 13px; cursor: pointer; font-weight: 600; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); text-decoration: none; }
.btn-light { background: #fff; border-color: var(--border); color: var(--text); }
.btn-light:hover { background: #f3f4f6; text-decoration: none; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #bb2d3b; text-decoration: none; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* Forms */
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: #374151; }
.form-row .req { color: var(--danger); }
.form-row input[type=text], .form-row input[type=date], .form-row input[type=password],
.form-row input[type=number], .form-row select, .form-row textarea, .form-row input[type=file] {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; font-family: inherit; background: #fff;
}
.form-row textarea { min-height: 80px; resize: vertical; }
.form-row .help { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* Alerts */
.alert { padding: 11px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13.5px; }
.alert.ok { background: #d1f0dd; color: #146c43; border: 1px solid #a3e0bd; }
.alert.error { background: #fbd6da; color: #b02a37; border: 1px solid #f1aeb5; }
.alert.info { background: #cfe2ff; color: #084298; border: 1px solid #9ec5fe; }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0f2747, #1b3a63); }
.login-card { background: #fff; border-radius: 14px; padding: 34px; width: 360px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.login-card h1 { font-size: 20px; margin: 0 0 4px; }
.login-card p.sub { color: var(--muted); font-size: 13px; margin: 0 0 22px; }

.muted { color: var(--muted); }
.text-danger { color: var(--danger); }
.mono { font-family: "Consolas", monospace; white-space: pre-wrap; word-break: break-word; }
.ai-box { background: #f8faff; border: 1px solid #cfe2ff; border-radius: 8px; padding: 14px; font-size: 13px; white-space: pre-wrap; line-height: 1.55; }
.empty { text-align: center; color: var(--muted); padding: 30px; }
.flex { display: flex; gap: 10px; align-items: center; }
.flex-between { display:flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.gap { gap: 8px; }
.mt { margin-top: 16px; }
.inline-form { display: inline; }

/* Liste ekrani satir islem cubugu (Ac / Duzenle / Pasife Al / Sil / Kayit ekle) */
.row-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end;
  flex-wrap: nowrap; white-space: nowrap; }
.act { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px;
  border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--text);
  font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease; }
.act:hover { background: #f3f4f6; text-decoration: none; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.act .ic { font-size: 13px; line-height: 1; }
.act-primary { color: var(--primary); border-color: #bcd3ff; background: #f2f7ff; }
.act-primary:hover { background: #e2edff; }
.act-warn { color: #9a6500; border-color: #f1d79a; background: #fff9ec; }
.act-warn:hover { background: #fcefd2; }
.act-success { color: #146c43; border-color: #b7e4c7; background: #f0fbf4; }
.act-success:hover { background: #dcf5e6; }
.act-danger { color: #b02a37; border-color: #f0c2c7; background: #fff6f7; }
.act-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.act-divider { width: 1px; height: 20px; background: var(--border); margin: 0 3px; flex: none; }
.act-count { background: var(--primary); color: #fff; border-radius: 10px;
  padding: 0 7px; font-size: 11px; font-weight: 700; margin-left: 2px; }
.act-select { padding: 6px 10px; border: 1px solid #bcd3ff; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--primary); background: #f2f7ff;
  cursor: pointer; max-width: 150px; font-family: inherit; }
.act-select:hover { background: #e2edff; }

/* Grafikler (tamamen yerel - harici kutuphane yok) */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.85); } 100% { opacity: 1; transform: scale(1); } }
@keyframes shimmer { 0% { background-position: -180px 0; } 100% { background-position: 220px 0; } }
@keyframes spinIn { from { transform: rotate(-90deg) scale(.9); opacity: .3; } to { transform: rotate(0) scale(1); opacity: 1; } }

.stat { animation: fadeUp .5s ease both; transition: transform .2s, box-shadow .2s; }
.stat:nth-child(2) { animation-delay: .07s; }
.stat:nth-child(3) { animation-delay: .14s; }
.stat:nth-child(4) { animation-delay: .21s; }
.stat:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(13,110,253,.12); }

.donut-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.donut { position: relative; width: 168px; height: 168px; flex-shrink: 0; animation: spinIn .8s ease both; }
.donut svg { width: 168px; height: 168px; display: block; transform: rotate(-90deg); }
.donut-svg .seg { transition: stroke-dasharray 1.1s cubic-bezier(.34,1.2,.4,1); }
.hole { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.hole .big { font-size: 32px; font-weight: 800; line-height: 1; color: var(--text); }
.hole .lbl { font-size: 11px; color: var(--muted); margin-top: 3px; }
.legend { list-style: none; padding: 0; margin: 0; font-size: 13.5px; min-width: 180px; }
.legend li { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; animation: fadeUp .5s ease both; }
.legend li:nth-child(2) { animation-delay: .12s; }
.legend li:nth-child(3) { animation-delay: .24s; }
.legend .dot { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.legend b { margin-left: auto; font-size: 15px; }

.barrow { margin-bottom: 12px; animation: fadeUp .45s ease both; }
.barrow:last-child { margin-bottom: 0; }
.barrow .lab { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
.barrow .lab a { color: var(--text); font-weight: 500; }
.bartrack { background: #eef1f5; border-radius: 7px; height: 18px; overflow: hidden; }
.bar { height: 100%; border-radius: 7px; min-width: 3px; width: 0;
  background: linear-gradient(90deg, #0d6efd, #58a6ff);
  background-size: 200px 100%;
  transition: width 1.1s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 1px 4px rgba(13,110,253,.25); }
.bar.anim-shine { animation: shimmer 1.4s linear 1; }

/* ===== Power BI tarzi rapor gorselleri ===== */
:root {
  --pbi1:#118DFF; --pbi2:#12239E; --pbi3:#E66C37; --pbi4:#6B007B;
  --pbi5:#E044A7; --pbi6:#744EC2; --pbi7:#D9B300; --pbi8:#D64550; --pbi9:#197278;
}
.pbi-head { background: linear-gradient(100deg,#0f2747,#1b3a63); color:#fff;
  border-radius:10px; padding:16px 20px; margin-bottom:16px; display:flex;
  justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  animation: fadeUp .5s ease both; }
.pbi-head h1 { margin:0; font-size:20px; }
.pbi-head .sub { color:#9fb4d4; font-size:12.5px; margin-top:2px; }
.pbi-head .stamp { font-size:12px; color:#cdd9ec; }

.pbi-card { background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:20px 22px; box-shadow:0 1px 2px rgba(20,30,40,.04); animation: fadeUp .5s ease both; margin-bottom:16px; }
.pbi-card h4 { margin:0 0 14px; font-size:13px; color:#3b4452; font-weight:600;
  display:flex; align-items:center; gap:8px; }
.pbi-card h4 .accent { width:4px; height:15px; border-radius:2px; background:var(--pbi1); display:inline-block; }

/* KPI kartlari */
.kpi { background:#fff; border:1px solid #e6e9ef; border-radius:8px; padding:14px 16px;
  box-shadow:0 1px 3px rgba(16,30,54,.06); position:relative; overflow:hidden;
  animation: fadeUp .5s ease both; transition: transform .2s, box-shadow .2s; }
.kpi:hover { transform: translateY(-4px); box-shadow:0 10px 24px rgba(16,30,54,.12); }
.kpi:nth-child(2){animation-delay:.07s;} .kpi:nth-child(3){animation-delay:.14s;} .kpi:nth-child(4){animation-delay:.21s;}
.kpi .ico { position:absolute; right:12px; top:12px; font-size:22px; opacity:.18; }
.kpi .num { font-size:30px; font-weight:800; line-height:1; }
.kpi .lbl { color:var(--muted); font-size:12.5px; margin-top:6px; }
.kpi .strip { position:absolute; left:0; top:0; bottom:0; width:5px; }
.kpi.k-danger .strip{background:var(--danger);} .kpi.k-danger .num{color:var(--danger);}
.kpi.k-warning .strip{background:var(--warning);} .kpi.k-warning .num{color:#b8860b;}
.kpi.k-primary .strip{background:var(--pbi1);} .kpi.k-primary .num{color:var(--pbi1);}
.kpi.k-success .strip{background:var(--success);} .kpi.k-success .num{color:var(--success);}

/* Dikey sutun grafigi (column chart) */
.colchart { display:flex; align-items:flex-end; gap:12px; padding-top:6px; }
.col { flex:1; display:flex; flex-direction:column; align-items:center; min-width:0; }
.colbarwrap { height:170px; width:100%; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:center; }
.colval { font-size:12.5px; font-weight:700; margin-bottom:5px; color:#3b4452; }
.colbar { width:62%; max-width:50px; height:0; border-radius:5px 5px 0 0;
  transition: height 1.05s cubic-bezier(.22,1,.36,1); box-shadow:0 -1px 4px rgba(0,0,0,.06) inset; }
.collabel { margin-top:9px; font-size:11.5px; color:#5b6678; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.colaxis { border-top:1px solid #e6e9ef; margin-top:-9px; }

/* Gorev / eksiklik takibi */
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 700px){ .row-2 { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; border-radius:14px; padding:4px 10px; font-size:12px; }

.bulkbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:#f1f5fb; border:1px solid var(--border); border-radius:8px; padding:8px 10px; margin-bottom:10px; }
.bulkbar input[type=text]{ padding:5px 8px; border:1px solid var(--border); border-radius:6px; }

/* KPI karti tiklanabilir link */
.kpi-link { text-decoration: none; color: inherit; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.kpi-link:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }

/* Ekli belge onizleme (thumbnail) */
.doc-thumb-wrap { position: relative; width: 240px; max-width: 100%; }
.doc-thumb {
  width: 240px; max-width: 100%; height: 320px; display: block;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
  object-fit: contain; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
embed.doc-thumb { pointer-events: none; }
.doc-thumb-overlay { position: absolute; inset: 0; display: block; cursor: zoom-in; border-radius: 8px; }
.doc-thumb-overlay:hover { box-shadow: 0 0 0 2px var(--primary, #2b6cb0) inset; }

/* ===== Hatirlatma popup ===== */
.rem-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 2000;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.rem-modal { background: #fff; width: 100%; max-width: 720px; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden; animation: remPop .18s ease; }
@keyframes remPop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.rem-head { display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 20px; background: linear-gradient(135deg,#1f3864,#2b6cb0); color: #fff; }
.rem-bell { font-size: 20px; }
.rem-count { display: inline-block; background: #fff; color: #1f3864; font-weight: 700;
  border-radius: 999px; padding: 1px 10px; font-size: 13px; margin-left: 6px; }
.rem-sub { font-size: 12px; opacity: .85; margin-top: 3px; font-weight: 400; }
.rem-x { background: transparent; border: none; color: #fff; font-size: 20px; cursor: pointer; line-height: 1; }
.rem-body { padding: 14px 20px; max-height: 60vh; overflow-y: auto; }
.rem-ship { margin-bottom: 14px; }
.rem-ship-title { font-weight: 700; color: #1f3864; padding: 6px 0; border-bottom: 2px solid #e6ebf5; margin-bottom: 6px; }
.rem-pill { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.rem-pill.danger { background: #ffd9de; color: #9c0006; }
.rem-pill.warning { background: #fff0c2; color: #9c6500; }
.rem-pill.note { background: #dbeafe; color: #1e40af; }
.rem-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px;
  margin: 4px 0; text-decoration: none; color: #1f2937; font-size: 14px; border: 1px solid transparent; }
.rem-item.danger { background: #fff5f6; border-color: #f5c2c7; }
.rem-item.warning { background: #fffbeb; border-color: #f5e2a6; }
.rem-item.note { background: #f5f8ff; border-color: #cfe0fb; }
.rem-item:hover { filter: brightness(.97); }
.rem-ico { font-size: 16px; }
.rem-empty { text-align: center; padding: 24px; color: #059669; font-weight: 600; }
.rem-add { margin-top: 8px; padding: 12px; background: #f7f9fc; border: 1px dashed #c7d2e5; border-radius: 10px; }
.rem-add-title { font-weight: 600; color: #334155; margin-bottom: 8px; font-size: 13px; }
.rem-add-row { display: flex; gap: 6px; flex-wrap: wrap; }
.rem-add-row select, .rem-add-row input[type=text], .rem-add-row input[type=date] {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; }
.rem-add-row input[type=text] { flex: 1; min-width: 160px; }
.rem-foot { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-top: 1px solid #eef1f6; background: #fafbfe; }
.rem-check { font-size: 13px; color: #64748b; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.btn-xs { padding: 2px 8px; font-size: 12px; }