:root{
  --bg:#0a0014;
  --glass:rgba(255,255,255,.06);
  --surface:rgba(18,0,38,.94);
  --card:rgba(26,0,51,.6);
  --border:rgba(166,77,255,.28);
  --accent:#a64dff;
  --accent2:#6b00cc;
  --text:#f2e6ff;
  --muted:#c8b3e6;
  --good:#2ecc71;
  --bad:#ff5c5c;
}
*{box-sizing:border-box}
html,body{height:100%}
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background: var(--bg) fixed url('../assets/res.jpg') center no-repeat;
  background-size: cover; /* Resmi sığdırır, boşluk kalabilir */
}

a{color:var(--text); text-decoration:none}
button{cursor:pointer}

/* ============ Layout ============ */
.layout{display:flex; min-height:100vh}

/* ============ Sidebar (slim rail -> full width on open) ============ */
.sidebar{
  position:fixed; inset:0 auto 0 0;   /* top:0; left:0; height:100vh */
  width:10px;                          /* Kapalıyken ince şerit */
  background:var(--surface);
  border-right:1px solid var(--border);
  overflow-x:hidden;
  transition:width .3s ease, padding .3s ease;
  z-index:1000;
  padding:0;                           /* Kapalıyken ped yok */
}
/* İçerik gizli (kapalıyken) */
.sidebar .brand,
.sidebar .menu{opacity:0; pointer-events:none; transition:opacity .2s}

/* Açık halde normal genişlik ve içerik görünür */
.sidebar.open{ width:260px; padding:60px 14px 14px 14px; }
.sidebar.open .brand,
.sidebar.open .menu{ opacity:1; pointer-events:auto; }

.brand{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.brand img{height:32px}
.brand .name{font-weight:900; letter-spacing:.25px}
.menu{display:flex; flex-direction:column; gap:6px}
.menu a{padding:10px 12px; border:1px solid transparent; border-radius:12px}
.menu a:hover{background:var(--glass); border-color:var(--border)}
.menu a.active{background:linear-gradient(135deg,var(--accent),var(--accent2)); border-color:transparent; color:#fff}

/* ============ Main / Topbar ============ */
.main{flex:1; width:100%; margin-left:10px; transition:margin-left .3s ease;}
/* Sidebar açılınca ana içerik itilsin (masaüstü) */
.sidebar.open + .main{ margin-left:260px; }

.topbar{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:rgba(18,0,38,.85); position:sticky; top:0; z-index:500;
  border-bottom:1px solid var(--border)
}
.burger,.back{padding:8px 12px; background:var(--glass); border:1px solid var(--border); border-radius:10px; color:var(--text)}
.title{font-weight:800; letter-spacing:.2px}

/* ============ Content ============ */
.container{max-width:1200px; margin:16px auto; padding:0 14px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.03)
}
.card .t{color:var(--muted); font-size:.85rem}
.card .v{font-size:1.45rem; font-weight:900; margin-top:6px}
.panel{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; margin:14px 0}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.grid .full{grid-column:1/-1}
label{display:block; color:var(--muted); font-size:.82rem; margin-bottom:6px}
input,select,button,textarea{width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:rgba(10,0,20,.55); color:var(--text)}
button.primary{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border-color:transparent; font-weight:900}
.table-wrap{overflow:auto; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.03)}
table{width:100%; border-collapse:collapse; min-width:860px; background:transparent}
th,td{padding:10px 8px; border-bottom:1px solid var(--border); text-align:left; background:transparent}
thead th{position:sticky; top:56px; background:rgba(26,0,51,.75); backdrop-filter: blur(4px)}
.small{font-size:.85rem; color:var(--muted)}

/* ============ Mobile tweaks ============ */
@media (max-width:1000px){
  /* Mobilde içerik üstüne overlay açılsın; ana içerik itilmesin */
  .main{ margin-left:0; }
  .sidebar{ width:0; }                 /* Şerit gizlensin istersen */
  .sidebar.open{ width:80vw; max-width:320px; }
  .sidebar.open + .main{ margin-left:0; }
  /* Karanlık arka plan (overlay) */
  .sidebar.open ~ .main::before{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:400;
  }
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){ .grid{grid-template-columns:1fr} }