:root{
  --bg: #0b1020; --bg-2: #0f1428; --panel: #121933; --panel-2: #1a244a;
  --text: #e7eaf6; --muted: #a8b0c6; --primary: #4f7fff; --primary-2: #3a6fff;
  --success: #21c07a; --warn: #ffb02e; --danger: #ff5d5d; --border: #2a355f;
  --shadow: 0 8px 24px rgba(0,0,0,.25); --radius: 16px;
  --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  --fs-1: 14px; --fs-2: 13px; --fs-3: 12px; --pad-1: 16px; --pad-2: 12px; --pad-3: 8px; --container: 1200px;
}
html,body{height:100%} *{box-sizing:border-box}
body{margin:0; color:var(--text); background:linear-gradient(180deg, var(--bg), var(--bg-2));
  font: 400 var(--fs-1)/1.55 var(--font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.container{max-width:var(--container); margin:0 auto; padding: 0 20px;}
.page{padding: 28px 0 56px; position: relative; z-index: 1;}
.bg-decor{position: fixed; inset: -20vmax; z-index: 0; pointer-events:none;
  background: radial-gradient(60vmax 60vmax at 80% 10%, rgba(79,127,255,.18), transparent 60%),
             radial-gradient(50vmax 50vmax at 10% 80%, rgba(33,192,122,.12), transparent 60%);
  filter: blur(20px) saturate(120%);}
.site-header{ position: sticky; top:0; z-index:10; backdrop-filter:saturate(150%) blur(10px);
  background: linear-gradient(180deg, rgba(18,25,51,.9), rgba(18,25,51,.6));
  border-bottom:1px solid rgba(255,255,255,.06);}
.header-inner{ display:flex; align-items:center; gap:18px; min-height:64px; }
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
.brand-mark{display:grid; place-items:center; width:34px; height:34px; border-radius:12px; background:linear-gradient(135deg,var(--primary),#6ea2ff);}
.logo{width:18px; height:18px; color:white}
.brand-text{font-weight:700; letter-spacing:.2px}
.main-nav{display:flex; gap:8px; flex:1; align-items:center}
.nav-link{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:12px; color:var(--muted); text-decoration:none}
.nav-link:hover{background-color:rgba(255,255,255,.06); color:#fff}
.icon{width:18px; height:18px; display:block}
.user-box{display:flex; align-items:center; gap:10px}
.user-chip{display:flex; align-items:center; gap:8px; padding:6px 10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.07); border-radius:999px}
.avatar{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--primary); color:#fff; font:600 12px var(--font)}
.user-name{max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.site-footer{border-top:1px solid rgba(255,255,255,.06); background:rgba(18,25,51,.6); position:sticky; bottom:0; z-index:5; backdrop-filter:blur(8px)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; min-height:56px}
.footer-actions{display:flex; gap:8px}
.btn{--btn-bg: var(--primary); --btn-fg:#ffff; --btn-bd: transparent; --btn-pad:8px 12px;
  display:inline-flex; align-items:center; gap:8px; padding:var(--btn-pad);
  border-radius:12px; border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  text-decoration:none; cursor:pointer; transition:.2s ease; box-shadow: none;}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{--btn-bg: rgba(255,255,255,.06); --btn-fg:#eaf1ff; --btn-bd: rgba(255,255,255,.08)}
.btn.quiet{--btn-bg: transparent; --btn-fg: var(--muted); --btn-bd: rgba(255,255,255,.1)}
.btn.quiet:hover{background:rgba(255,255,255,.06); color:#fff}
.btn.danger{--btn-bg: var(--danger)}
.btn.success{--btn-bg: var(--success)}
.btn.small{--btn-pad:6px 10px; border-radius:10px; font-size: var(--fs-2)}
.grid{display:grid; gap:16px}
@media (min-width: 860px){ .grid{grid-template-columns: repeat(3, minmax(0,1fr))} }
.section{background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);}
.section > header{font-weight:600; margin-bottom:10px; color:#fff}
.kpi-grid{display:grid; gap:12px; grid-template-columns: repeat(2,minmax(0,1fr))}
@media (min-width: 860px){ .kpi-grid{grid-template-columns: repeat(4,minmax(0,1fr))} }
.kpi{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:14px 16px; box-shadow: var(--shadow);}
.kpi h4{margin:0 0 8px; font:600 var(--fs-2)/1.45 var(--font); color:#fff}
.kpi .val{font:700 22px/1 var(--font)}
label{display:grid; gap:6px; color:#d6dbf2; font-weight:500; font-size: var(--fs-2)}
input, select, textarea{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background:#0f152f; color:#e8edff; outline:none; transition:border-color .2s ease, background .2s ease;}
input:focus, select:focus, textarea:focus{border-color: var(--primary)}
textarea{min-height:120px}
.btn-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
details{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:12px 14px; box-shadow: var(--shadow)}
details > summary{cursor:pointer; font-weight:600; color:#fff; margin:4px 0 10px}
details[open] > summary{margin-bottom:12px}
table{width:100%; border-collapse:separate; border-spacing:0; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.06); border-radius:16px; overflow:hidden; box-shadow: var(--shadow);}
thead th{ text-align:left; font:600 var(--fs-2)/1.3 var(--font); color:#cfd6ef; background: rgba(255,255,255,.05); padding:12px}
tbody td{ padding:10px 12px; border-top:1px solid rgba(255,255,255,.06); font-size: var(--fs-2) }
tbody tr:hover{ background: rgba(79,127,255,.06) }
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; letter-spacing:.2px}
.small{font-size: var(--fs-3); color: var(--muted)}
.bar{height:8px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden}
.bar > span{display:block; height:100%; background:linear-gradient(90deg, var(--success), var(--primary));}
[role="alert"]{background:rgba(255,93,93,.12); border:1px solid rgba(255,93,93,.35); color:#ffd7d7;
  padding:12px 14px; border-radius:12px;}
body.dense .kpi{padding:10px 12px}
body.dense .kpi .val{font-size:18px}
body.dense input, body.dense select, body.dense textarea{padding:8px 10px; border-radius:10px}
body.dense .btn{padding:6px 10px}
body.dense thead th{padding:10px}
body.dense tbody td{padding:8px 10px}
html[data-theme="light"]{
  --bg: #f6f8ff; --bg-2: #eef2ff; --panel: #ffffff; --panel-2: #f8faff;
  --text: #192038; --muted:#59627a; --primary:#325dff; --primary-2:#244bdb;
  --success:#12a366; --warn:#cc8a00; --danger:#e54848; --border:#dde3ff; --shadow: 0 8px 24px rgba(7,20,60,.06);
}
html[data-theme="light"] .site-header{ background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.6)); border-bottom:1px solid rgba(22,34,78,.08) }
html[data-theme="light"] .user-chip{ background:#fff; border-color:#e9ecff }
html[data-theme="light"] .nav-link:hover{ background: rgba(50,93,255,.08) }
html[data-theme="light"] .section{ background: #fff; border-color:#e9ecff }
html[data-theme="light"] .kpi{ background: #fff; border-color:#e9ecff }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea{
  background:#fff; border-color:#dfe5ff; color:#111b3a; }
html[data-theme="light"] table{ background:#fff; border-color:#e9ecff }
html[data-theme="light"] thead th{ background:#f6f8ff; color:#20315a }
html[data-theme="light"] tbody tr:hover{ background: rgba(50,93,255,.06) }
html[data-theme="light"] [role="alert"]{ background:#ffeaea; border-color:#ffd4d4; color:#8b0f0f }
hr{border:none; height:1px; background:rgba(255,255,255,.1); margin:18px 0}
a{color:var(--primary)}

/* --- V3 Ek Stil: Satır Detayı (liste için) --- */
tr.row-details { display: none; }
tr.row-details.open { display: table-row; }
.row-details > td { background: rgba(0,0,0,.05); padding: 12px 14px; }
html[data-theme="light"] .row-details > td { background: rgba(50,93,255,.06); }
.table-hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
tr.clickable-row { cursor: pointer; }
tr.clickable-row:hover { filter: brightness(1.03); }

/* --- V4: Dashboard tablo sabitlemeleri --- */
.table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; }
table.tbl{ table-layout: fixed; }
table.tbl th, table.tbl td{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl .col-id{ width: 64px; }
.tbl .col-date{ width: 180px; }
.tbl .col-phone{ width: 140px; }
.tbl .col-name{ width: 160px; }
.tbl .col-konu{ width: 160px; }
.tbl .col-birim{ width: 160px; }
.tbl .col-sorun{ width: 180px; }
.tbl .col-user{ width: 160px; }
td.mono{ white-space: nowrap; }
@media (max-width: 860px){
  .tbl .col-date{ width: 150px; }
  .tbl .col-phone{ width: 120px; }
  .tbl .col-name{ width: 140px; }
}

/* --- V5: Modal --- */
.modal-backdrop{ position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); z-index:1000; padding:20px; }
.modal-backdrop.open{ display:flex; }
.modal{
  width: min(92vw, 820px);
  max-height: 85vh;
  overflow:auto;
  background: var(--panel);
  border:1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  box-shadow: var(--shadow);
  color: var(--text);
}
html[data-theme="light"] .modal{ background:#fff; border-color:#e9ecff }
.modal header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08);
}
html[data-theme="light"] .modal header{ border-color:#eef2ff }
.modal .modal-title{ font-weight: 700; }
.modal .modal-body{ padding:16px; display:grid; gap:10px }
.modal .kv{ display:grid; grid-template-columns: 140px 1fr; gap:8px 10px; }
.modal .kv div:nth-child(odd){ color: var(--muted) }
.modal .desc-box{
  white-space: pre-wrap;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:12px;
}
.modal .actions{ display:flex; gap:8px; justify-content:flex-end; padding:0 16px 16px }
.modal .close{ border:none; background:transparent; color:var(--muted); cursor:pointer; }
.modal .close:hover{ color:#fff }