*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Khand', var(--font-body); font-weight: 700;    /* Khand panelin ana UI fontu */
  font-size: var(--fs-14); color: var(--ink-text);
  background: var(--paper); -webkit-font-smoothing: antialiased;
}
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-s); }
::selection { background: rgba(27,117,187,.22); }

h1,h2,h3 { margin: 0; font-weight: 700; }
.display { font-family: var(--font-display); letter-spacing: .01em; }
.mono { font-family: var(--font-mono); font-size: .93em; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-12); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* ---------------- yerleşim ---------------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: linear-gradient(180deg, var(--ink) 0%, #052E2B 100%);   /* petrol ailesinde koyulaşma — mavi YOK */
  color: #DAE6E2; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.brand { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.brand .logo {
  font-family: var(--font-display); font-size: 22px; line-height: 1; color: #fff;
  letter-spacing: .03em; display:flex; align-items:baseline; gap:8px;
}
.nav { padding: var(--sp-2) var(--sp-2) var(--sp-6); flex: 1; }
.nav-grup { margin: var(--sp-4) var(--sp-2) var(--sp-1); font-size: var(--fs-11);
  letter-spacing: .09em; text-transform: uppercase; color: #9FB5AE; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; margin: 1px 0; border: 0; border-radius: var(--r-s);
  background: transparent; color: #D7E3DF; font: inherit; font-size: var(--fs-13);
  cursor: pointer; text-align: left; position: relative;
}
.nav-item:hover { background: rgba(255,255,255,.07); color:#fff; }
.nav-item.aktif { background: rgba(255,255,255,.10); color: #fff; font-weight: 600; }
.nav-item.aktif::before { content:''; position:absolute; left:-8px; top:6px; bottom:6px;
  width:3px; border-radius:2px; background: var(--ind); }
.nav-item .say {
  margin-left: auto; background: rgba(255,255,255,.14); color:#fff;
  font-size: var(--fs-11); padding: 1px 7px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums;
}
.nav-item .say.sicak { background: var(--warn); }  /* dikkat = amber; kırmızı yalnız kritik */
.nav-item.alt { padding-left: 30px; font-size: var(--fs-12); }
.nav-ayrac { height:1px; background: rgba(255,255,255,.10); margin: var(--sp-3) var(--sp-2); }
.sidebar .kullanici { padding: var(--sp-3) var(--sp-4); border-top: 1px solid rgba(255,255,255,.10);
  font-size: var(--fs-12); color:#B9CCC6; display:flex; align-items:center; gap:10px; }
.sidebar .kullanici .avatar { width:30px;height:30px;border-radius:50%;background:var(--primary);
  color:#fff;display:grid;place-items:center;font-weight:700; flex: none; }
.sidebar .kullanici button { margin-left:auto; }

.icerik { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-6);
  position: sticky; top: 0; z-index: 20;
}
.topbar .baslik { font-family: var(--font-display); font-size: var(--fs-26); color: var(--ink); letter-spacing:.01em; }
.topbar .sag { margin-left: auto; display:flex; gap: var(--sp-2); align-items:center; }
main { padding: var(--sp-6); max-width: 1560px; width: 100%; }

@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Khand tek ağırlık (Bold) ana UI fontudur; okunabilirlik istisnaları: */
.tablo td, .small, .muted, .girdi, textarea, select, .ozellik-listesi dd,
.toast, .kart .small, p { font-family: var(--font-body); font-weight: 400; }
.tablo td b, .small b, p b { font-weight: 600; }
.mono, .mono * { font-family: var(--font-mono) !important; font-weight: 400; }
.badge { font-family: 'Khand', var(--font-body); font-weight: 700; letter-spacing: .02em; }
label { font-family: 'Khand', var(--font-body); font-weight: 700; }
.btn { font-family: 'Khand', var(--font-body); font-weight: 700; letter-spacing: .02em; }
th { font-family: 'Khand', var(--font-body); font-weight: 700; }
.nav-item, .nav-grup { font-family: 'Khand', var(--font-body); }
/* -------- gerçek marka: amblem + sade UI başlığı (logo taklidi DEĞİL) -------- */
.marka { display:flex; align-items:center; gap:10px; }
.marka img { width:34px; height:38px; object-fit:contain; flex:0 0 auto; }
.marka .marka-ad { font-family:'Khand', var(--font-body); font-weight:700; font-size:17px; line-height:1.05; color:#fff; }
.marka .marka-alt { font-size:11px; color:#9FBAB4; letter-spacing:.12em; text-transform:uppercase; }