:root{
  --bg:#07070a;
  --bg2:#0c0c12;
  --card:#0f0f18;
  --line:rgba(255,165,0,.22);
  --line2:rgba(255,127,80,.16);
  --text:#f4f4f7;
  --muted:#b7b7c7;
  /* Tema rengi (departmana göre inline style ile değişir) */
  --orange:#00D2FF;
  --coral:#7be9ff;
  --accent2:#0088ff;
  --danger:#ff3b3b;
  --success:#2dff9a;
  --shadow: 0 0 24px color-mix(in srgb, var(--orange) 16%, transparent);
  --glow: 0 0 12px color-mix(in srgb, var(--orange) 55%, transparent), 0 0 30px color-mix(in srgb, var(--coral) 35%, transparent);
  --radius:14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  position:relative;
  background:
      radial-gradient(1200px 520px at 50% -15%, color-mix(in srgb, var(--orange) 20%, transparent), transparent 65%),
      radial-gradient(900px 420px at 8% 20%, color-mix(in srgb, var(--coral) 16%, transparent), transparent 60%),
      radial-gradient(900px 420px at 92% 30%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 62%),
      linear-gradient(180deg, var(--bg), #050508 60%, #030305);
  overflow-x:hidden;
}

/* Premium vignette + scanline (çok hafif) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% 20%, rgba(255,165,0,.10), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(0,0,0,.70), rgba(0,0,0,.90)),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.035),
      rgba(255,255,255,.035) 1px,
      transparent 1px,
      transparent 7px
    );
  opacity:.55;
  mix-blend-mode: screen;
}

.bg-grid{
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,165,0,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,165,0,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity:.95;
  mask-image: radial-gradient(circle at 50% 30%, #000 55%, transparent 100%);
}
.bg-grid::after{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,165,0,.06),
      rgba(255,165,0,.06) 1px,
      transparent 1px,
      transparent 8px
    );
  opacity:.25;
  filter: blur(.2px);
}
.bg-grid::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent, rgba(255,165,0,.08), transparent),
    linear-gradient(0deg, transparent, rgba(255,127,80,.06), transparent);
  opacity:.65;
  animation: bgPulse 9s ease-in-out infinite;
}
@keyframes bgPulse{
  0%,100%{transform:translate3d(0,0,0); filter: blur(0px);}
  50%{transform:translate3d(0,-10px,0); filter: blur(.35px);}
}

.container{
  width:min(1180px, calc(100% - 28px));
  margin: 22px auto 60px;
}

.layout-auth .auth-center{
  /* Tam dikey + yatay ortalama */
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 22px 14px;
  width:100%;
}
.auth-wrap{
  width: min(980px, 100%);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 920px){
  .auth-wrap{grid-template-columns: 1fr;}
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(5,5,8,.58);
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 40%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.topbar__inner{
  width:min(1180px, calc(100% - 28px));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 12px 0;
}

.brand{display:flex;align-items:center;gap:10px}
.brand__logo{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(255,165,0,.12), rgba(255,127,80,.08));
  border:1px solid color-mix(in srgb, var(--orange) 35%, transparent);
  box-shadow: var(--glow);
  font-family:var(--mono);
  letter-spacing:.06em;
  color:var(--orange);
  position:relative;
  overflow:hidden;
}
.brand__logo-fallback{position:relative; z-index:1;}

/* Departman logosu (mask ile tema rengine boyanır) */
.brand__logo[data-dept="LSPD"]{ --dept-logo: url('img/dept_lspd.svg'); }
.brand__logo[data-dept="BCSO"]{ --dept-logo: url('img/dept_bcso.svg'); }
.brand__logo[data-dept="LSSD"]{ --dept-logo: url('img/dept_lssd.svg'); }
.brand__logo[data-dept="EMS"] { --dept-logo: url('img/dept_ems.svg'); }
.brand__logo[data-dept="SAPS"]{ --dept-logo: url('img/dept_saps.svg'); }

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .brand__logo-fallback{opacity:0;}
  .brand__logo::after{
    content:"";
    position:absolute;
    inset:7px;
    background: var(--orange);
    -webkit-mask-image: var(--dept-logo);
    mask-image: var(--dept-logo);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--orange) 55%, transparent));
  }
}

.brand__title{font-weight:800;letter-spacing:.12em;font-size:12px}
.brand__subtitle{color:var(--muted);font-size:11px;margin-top:2px}

.nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.nav__link{
  color:var(--text);
  text-decoration:none;
  padding:8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all .15s ease;
  font-size: 13px;
}
.nav__link:hover{
  border-color: color-mix(in srgb, var(--orange) 40%, transparent);
  box-shadow: var(--shadow);
  color: var(--orange);
}
.nav__link--admin{
  border-color: color-mix(in srgb, var(--orange) 55%, transparent);
  color: var(--orange);
}

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.tabs__link{
  text-decoration:none;
  color: var(--text);
  border: 1px solid rgba(255,165,0,.18);
  background: rgba(255,165,0,.05);
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 13px;
  transition: all .15s ease;
}
.tabs__link:hover{box-shadow: var(--shadow); color: var(--orange); border-color: rgba(255,165,0,.35);}
.tabs__link.is-active{
  border-color: rgba(255,165,0,.55);
  box-shadow: var(--glow);
  color: var(--orange);
}

.subnav{
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 28%, transparent);
  background: rgba(5,5,8,.45);
  backdrop-filter: blur(10px);
}
.subnav__inner{
  width:min(1180px, calc(100% - 28px));
  margin:0 auto;
  display:flex;
  gap:10px;
  padding: 10px 0;
  overflow:auto;
}
.subnav__link{
  flex: 0 0 auto;
  text-decoration:none;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--orange) 28%, transparent);
  background: color-mix(in srgb, var(--orange) 7%, transparent);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  transition: all .15s ease;
}
.subnav__link:hover{box-shadow: var(--shadow); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 55%, transparent);}

.topbar__right{display:flex;align-items:center;gap:10px}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  text-decoration:none;
  color: var(--text);
  background: color-mix(in srgb, var(--orange) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--orange) 28%, transparent);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.chip:hover{box-shadow: var(--shadow); color: var(--orange);}

.card{
  background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 7%, transparent), color-mix(in srgb, var(--coral) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--orange) 28%, transparent);
  border-radius: var(--radius);
  box-shadow: 0 0 0 rgba(0,0,0,0), var(--shadow);
  padding: 18px;
}
.card + .card{margin-top:16px}

.grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
}
@media (max-width: 920px){
  .grid{grid-template-columns: 1fr;}
  .nav{display:none}
}

h1,h2,h3{margin:0 0 12px}
h1{font-size:22px;letter-spacing:.04em}
h2{font-size:16px;letter-spacing:.06em;color:var(--orange)}
h3{font-size:14px;color:var(--text);opacity:.95}
.muted{color:var(--muted);font-size:12px}

.btn{
  appearance:none;
  border: 1px solid color-mix(in srgb, var(--orange) 65%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--orange) 18%, transparent), color-mix(in srgb, var(--coral) 10%, transparent));
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.03em;
  transition: all .16s ease;
  box-shadow: var(--shadow);
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--glow);}
.btn:active{transform: translateY(0px); opacity:.95;}
.btn--ghost{
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
}
.btn--danger{
  border-color: rgba(255,59,59,.55);
  background: rgba(255,59,59,.08);
}
.btn--success{
  border-color: rgba(45,255,154,.5);
  background: rgba(45,255,154,.07);
}
.btn--small{padding:8px 10px; border-radius: 10px; font-size: 12px;}

.form{
  display:grid;
  gap:12px;
}
label{font-size:12px;color:var(--muted)}
input,select,textarea{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--orange) 28%, transparent);
  background: rgba(0,0,0,.28);
  color: var(--text);
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea{min-height: 140px; resize: vertical;}
input:focus,select:focus,textarea:focus{
  border-color: color-mix(in srgb, var(--orange) 70%, transparent);
  box-shadow: var(--glow);
}

.alert{
  padding: 12px 14px;
  border-radius: 14px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.alert--danger{
  background: rgba(255,59,59,.10);
  border-color: rgba(255,59,59,.35);
}
.alert--success{
  background: rgba(45,255,154,.08);
  border-color: rgba(45,255,154,.30);
}

.table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.20);
}
.table th,.table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,165,0,.12);
  vertical-align: top;
  font-size: 13px;
}
.table th{
  text-align:left;
  color: var(--orange);
  font-size: 12px;
  letter-spacing:.08em;
  font-family: var(--mono);
}
.table tr:hover td{background: rgba(255,165,0,.04);}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row--between{justify-content:space-between}
.pill{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,165,0,.06);
  font-size: 12px;
}
.pill--danger{border-color: rgba(255,59,59,.4); background: rgba(255,59,59,.08);}
.pill--success{border-color: rgba(45,255,154,.35); background: rgba(45,255,154,.07);}
.pill--muted{border-color: rgba(183,183,199,.25); background: rgba(183,183,199,.06); color:var(--muted);}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){
  .split{grid-template-columns: 1fr;}
}

.hr{
  height:1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
  margin: 14px 0;
}

.footer{
  border-top: 1px solid var(--line);
  background: rgba(5,5,8,.55);
}
.footer__inner{
  width:min(1180px, calc(100% - 28px));
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding: 16px 0;
}
.footer__left{display:flex; align-items:center; gap:12px;}
.footer__right{display:flex; align-items:center; gap:10px;}

/* Nomercy footer logosu (tema rengine yakın görünüm) */
.nm-logo{
  width: 110px;
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--orange) 55%, transparent));
}
/* Departmana göre hafif renklendirme */
.dept-lspd .nm-logo{ filter: brightness(0) saturate(100%) invert(69%) sepia(30%) saturate(4700%) hue-rotate(157deg) brightness(103%) contrast(104%) drop-shadow(0 0 14px color-mix(in srgb, var(--orange) 55%, transparent)); }
.dept-bcso .nm-logo{ filter: brightness(0) saturate(100%) invert(77%) sepia(44%) saturate(1750%) hue-rotate(4deg) brightness(106%) contrast(104%) drop-shadow(0 0 14px color-mix(in srgb, var(--orange) 55%, transparent)); }
.dept-lssd .nm-logo{ filter: brightness(0) saturate(100%) invert(77%) sepia(44%) saturate(1750%) hue-rotate(4deg) brightness(106%) contrast(104%) drop-shadow(0 0 14px color-mix(in srgb, var(--orange) 55%, transparent)); }
.dept-ems  .nm-logo{ filter: brightness(0) saturate(100%) invert(22%) sepia(94%) saturate(5170%) hue-rotate(324deg) brightness(106%) contrast(106%) drop-shadow(0 0 14px color-mix(in srgb, var(--orange) 55%, transparent)); }
.dept-saps .nm-logo{ filter: brightness(0) saturate(100%) invert(40%) sepia(95%) saturate(2460%) hue-rotate(187deg) brightness(104%) contrast(105%) drop-shadow(0 0 14px color-mix(in srgb, var(--orange) 55%, transparent)); }

/* Son dakika şeridi */
.ticker{
  position: sticky;
  top: 68px;
  z-index: 49;
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 30%, transparent);
  background: rgba(5,5,8,.62);
  backdrop-filter: blur(10px);
}
@media (max-width: 980px){
  .ticker{ top: 58px; }
}
.ticker__inner{
  width:min(1180px, calc(100% - 28px));
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 0;
  overflow:hidden;
}
.ticker__label{
  flex: 0 0 auto;
  font-family: var(--mono);
  font-weight: 900;
  letter-spacing: .16em;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #000;
  background: linear-gradient(135deg, var(--orange), var(--coral));
  box-shadow: var(--glow);
}
.ticker__marquee{position:relative; overflow:hidden; flex: 1 1 auto;}
.ticker__track{
  display:inline-flex;
  gap: 0;
  white-space: nowrap;
  will-change: transform;
  animation: tickerMove 18s linear infinite;
  font-weight: 800;
  letter-spacing: .02em;
}
.ticker__track span{padding-right: 32px; color: var(--text); opacity: .92;}
@keyframes tickerMove{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

.code{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--orange);
}

.comment{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,165,0,.18);
  background: rgba(0,0,0,.22);
}
.comment + .comment{margin-top:10px}
.comment__meta{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}
.comment__text{white-space:pre-wrap;line-height:1.45}

/* İç Tüzük Tree View */
.tree{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tree .tree{margin-top:6px;padding-left:14px;border-left:1px dashed color-mix(in srgb, var(--orange) 28%, transparent)}
.tree__item{position:relative}
.tree__details{border-radius:12px}
.tree__summary{
  list-style:none;
  cursor:pointer;
}
.tree__summary::-webkit-details-marker{display:none}
.tree__summary::before{
  content:"▸";
  color: var(--muted);
  display:inline-block;
  width:18px;
  transform: translateY(-1px);
  margin-right:2px;
}
.tree__details[open] > .tree__summary::before{
  content:"▾";
  color: var(--orange);
}
.tree__link{
  display:block;
  text-decoration:none;
  color:var(--text);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(0,0,0,.14);
  transition: all .15s ease;
}
.tree__link:hover{
  border-color: color-mix(in srgb, var(--orange) 40%, transparent);
  box-shadow: var(--shadow);
  color: var(--orange);
}
.tree__item.is-active > .tree__link{
  border-color: color-mix(in srgb, var(--orange) 60%, transparent);
  box-shadow: var(--glow);
  color: var(--orange);
}

/* Chat */
.chatbox{
  height: 520px;
  overflow:auto;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--orange) 28%, transparent);
  background:
    radial-gradient(900px 300px at 50% -10%, color-mix(in srgb, var(--orange) 12%, transparent), transparent 60%),
    rgba(0,0,0,.18);
}
.msg{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--orange) 18%, transparent);
  background: rgba(0,0,0,.22);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.msg--mine{
  border-color: color-mix(in srgb, var(--orange) 55%, transparent);
  background: color-mix(in srgb, var(--orange) 12%, rgba(0,0,0,.18));
  box-shadow: var(--shadow);
}
.msg + .msg{margin-top:10px}
.msg__meta{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.msg__text{white-space:pre-wrap;line-height:1.45}

/* Rütbe / Ödül */
.insignia{
  width:56px;
  height:56px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent);
  background: rgba(0,0,0,.25);
  object-fit: cover;
  box-shadow: var(--shadow);
}
.insignia--tiny{
  width:34px;
  height:34px;
  border-radius: 12px;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.badge-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
}
.badge{
  width: 120px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--orange) 28%, transparent);
  background: color-mix(in srgb, var(--orange) 6%, rgba(0,0,0,.20));
  padding: 10px;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.badge:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--orange) 55%, transparent);
}
.badge img{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--orange) 22%, transparent);
  background: rgba(0,0,0,.22);
  object-fit: cover;
  display:block;
}
.badge__label{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--text);
  opacity: .92;
}

.staff-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .staff-grid{grid-template-columns: 1fr;}
}
.staff-card{
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--orange) 28%, transparent);
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.10));
  padding: 14px;
}
.staff-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.staff-card__name{font-weight:900;margin-bottom:4px}

/* Accordion (Birimler vb.) */
.accordion{display:grid;gap:10px}
.accordion--nested{
  margin-top: 10px;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--orange) 18%, transparent);
}
.acc{
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--orange) 22%, transparent);
  background: rgba(0,0,0,.14);
  overflow:hidden;
}
.acc--sub{
  border-color: color-mix(in srgb, var(--orange) 16%, transparent);
  background: rgba(0,0,0,.10);
}
.acc__sum{
  list-style:none;
  cursor:pointer;
  padding: 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.acc__sum::-webkit-details-marker{display:none}
.acc__sum::after{
  content:"+";
  color: var(--muted);
  font-weight:900;
  font-family: var(--mono);
}
.acc[open] > .acc__sum::after{
  content:"–";
  color: var(--orange);
}
.acc__body{padding: 0 12px 12px}