:root{
  --bg: #f6f7fb;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #5b6474;
  --primary: #2563eb;     /* mavi */
  --primary-2: #7c3aed;   /* mor */
  --ring: 0 0 0 3px rgba(37,99,235,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 15px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(800px 400px at -10% -10%, #e9eef8, transparent),
    radial-gradient(900px 600px at 110% 10%, #eef2ff, transparent),
    linear-gradient(180deg, var(--bg), var(--bg));
  color:var(--text);
}
a{ color:#1d4ed8; text-decoration:none } 
a:hover{ text-decoration:underline }

.container{ max-width:1100px; margin:24px auto; padding:0 18px }

.header{ 
  position:sticky; top:0; z-index:30; 
  background: rgba(255,255,255,.7); 
  backdrop-filter: blur(10px); 
  border-bottom:1px solid rgba(15,23,42,.06) 
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px }
.brand .dot{ 
  width:10px; height:10px; border-radius:999px; 
  background:linear-gradient(135deg,var(--primary),var(--primary-2)); 
  box-shadow:0 0 24px rgba(124,58,237,.4) 
}

.nav{ display:flex; gap:8px; flex-wrap:wrap }
.nav a{ padding:8px 12px; border-radius:10px; border:1px solid rgba(15,23,42,.12); background:#fff; color:var(--text) }
.nav a.active{ background: linear-gradient(135deg,var(--primary),var(--primary-2)); border-color: transparent; color:#fff }

.main{ padding:18px 0 32px }

.grid{ display:grid; gap:16px }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width:900px){ .grid-3,.grid-2{ grid-template-columns:1fr } }

.card{
  background: var(--panel);
  border:1px solid rgba(15,23,42,.06);
  border-radius:16px;
  box-shadow: 0 6px 20px rgba(15,23,42,.06);
  padding:16px;
}
.card h3{ margin:.2rem 0 1rem 0 }

.kpis .kpi{ 
  padding:18px; border-radius:14px; background:#fff; 
  border:1px solid rgba(15,23,42,.06); box-shadow:0 4px 14px rgba(15,23,42,.05) 
}
.kpis .kpi .label{ color:var(--muted); font-size:13px }
.kpis .kpi .value{ font-size:28px; font-weight:700; margin-top:4px }

.input, select, .btn{
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:var(--text);
  padding:10px 12px; outline:none;
}
.input:focus, select:focus{ box-shadow: var(--ring); border-color: transparent }
.btn{ cursor:pointer; font-weight:600 }
.btn.primary{ background: linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; border-color: transparent }
.btn.ghost{ background:#fff }
.btn.danger{ background:#ef4444; border-color:#ef4444; color:#fff }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.form-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px }
@media (max-width:900px){ .form-row,.form-row-3{ grid-template-columns:1fr } }

/* Select üstü arama kutuları */
.select-search{ margin-bottom:8px }
.select-search input{ width:100% }

.table{ 
  width:100%; border-collapse:separate; border-spacing:0; 
  border:1px solid rgba(15,23,42,.08); border-radius:14px; overflow:hidden; background:#fff 
}
.table th,.table td{ padding:12px 12px; text-align:left; border-bottom:1px solid rgba(15,23,42,.06) }
.table th{ background:#f3f6fd; color:#334155; font-weight:600 }
.table tr:last-child td{ border-bottom:none }
.table tr:hover td{ background:#f8fafc }

.badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; border:1px solid rgba(148,163,184,.25) }
.badge.green{ background:#e8f5e9; color:#0b7a28; border-color:#c5e7cd }
.badge.yellow{ background:#fff7ed; color:#9a3412; border-color:#fde5d0 }
.badge.gray{ background:#eef2f7; color:#334155; border-color:#d5dbe6 }

.alert{ padding:10px 12px; border-radius:12px; margin:10px 0; border:1px solid }
.alert.error{ background:#fee2e2; border-color:#fecaca; color:#7f1d1d }
.alert.success{ background:#dcfce7; border-color:#bbf7d0; color:#14532d }

.footer{ color:#64748b; text-align:center; padding:24px 10px; border-top:1px solid rgba(15,23,42,.08); margin-top:24px }

.right{ display:flex; align-items:center; gap:8px }
.user{ color:#334155 }
.search{ display:flex; gap:8px }
.pagination{ display:flex; gap:8px; margin-top:10px }
.pagination a,.pagination span{ padding:6px 10px; border:1px solid rgba(15,23,42,.12); border-radius:10px; background:#fff }
.logo{ height:20px; opacity:.9 }
small.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color:#6366f1 }

/* Stok için belirgin görünüm */
.stock-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:56px; padding:6px 12px; border-radius:999px;
  font-weight:700; letter-spacing:.2px; font-variant-numeric: tabular-nums;
  border:1px solid transparent;
}
.stock-pill.ok{ background:#e8f5e9; color:#0b7a28; border-color:#c5e7cd }
.stock-pill.low{ background:#fff7ed; color:#9a3412; border-color:#fde5d0 }
.stock-pill.zero{ background:#eef2f7; color:#334155; border-color:#d5dbe6 }

/* Profile card */
.profile-card .text-lg{ font-size:20px; font-weight:700 }
.profile-card .muted{ color:#6b7280 }
.profile-card .profile-body{ padding:8px 12px }