:root{
  --teal:#025959;
  --teal-dark:#013a3a;
  --teal-deep:#012b2b;
  --ink:#16201f;
  --muted:#647573;
  --line:#e6ecea;
  --soft:#f5f8f7;
  --bg:#f0f3f2;
  --white:#ffffff;
  --accent:#c9a14a;
  --danger:#b4453a;
  --ok:#1f7a5a;
  --radius:14px;
  --shadow:0 1px 2px rgba(1,43,43,.04), 0 8px 30px rgba(1,43,43,.06);
  --font:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,"Noto Sans",Roboto,Arial,sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--teal); text-decoration:none; }
svg.ic{ width:20px; height:20px; stroke:currentColor; stroke-width:1.7; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Giriş ekranı ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%, #06403f 0%, #012b2b 60%, #001d1d 100%);
  padding:24px;
}
.login-card{
  width:100%; max-width:360px; background:var(--white);
  border-radius:20px; padding:44px 36px 36px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  text-align:center;
}
.login-card .logo{ height:54px; margin-bottom:28px; }
.login-card form{ display:flex; flex-direction:column; gap:14px; }
.field-pass{ position:relative; }
.field-pass .lock{ position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--muted); }
.login-card input{
  width:100%; padding:14px 14px 14px 44px; font-size:15px;
  border:1.5px solid var(--line); border-radius:12px; outline:none;
  transition:border-color .15s, box-shadow .15s; font-family:var(--font);
}
.login-card input:focus{ border-color:var(--teal); box-shadow:0 0 0 4px rgba(2,89,89,.10); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 18px; font-size:15px; font-weight:600; font-family:var(--font);
  border:none; border-radius:12px; cursor:pointer;
  background:var(--teal); color:#fff; transition:background .15s, transform .05s;
}
.btn:hover{ background:var(--teal-dark); }
.btn:active{ transform:translateY(1px); }
.btn.block{ width:100%; }
.btn.ghost{ background:transparent; color:var(--teal); border:1.5px solid var(--line); }
.btn.ghost:hover{ background:var(--soft); }
.btn.sm{ padding:8px 14px; font-size:13.5px; border-radius:10px; }
.btn.ok{ background:var(--ok); }
.btn.ok:hover{ filter:brightness(.94); }
.btn.warn{ background:transparent; color:var(--danger); border:1.5px solid #ecd4d1; }
.btn.warn:hover{ background:#fbf2f1; }
.login-err{ color:var(--danger); font-size:13.5px; margin-top:-2px; }

/* ---------- Uygulama kabuğu ---------- */
.topbar{
  background:var(--white); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.topbar .inner{
  max-width:1040px; margin:0 auto; padding:0 24px;
  height:64px; display:flex; align-items:center; gap:28px;
}
.topbar .brand{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--teal-dark);
  letter-spacing:.3px; }
.topbar .brand img{ height:26px; }
.topbar nav{ display:flex; gap:4px; margin-left:8px; }
.topbar nav a{
  display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px;
  color:var(--muted); font-weight:500; font-size:14.5px;
}
.topbar nav a:hover{ background:var(--soft); color:var(--ink); }
.topbar nav a.active{ background:var(--soft); color:var(--teal); font-weight:600; }
.topbar .spacer{ flex:1; }
.topbar .logout{ color:var(--muted); display:flex; align-items:center; gap:7px; font-size:14px; }
.topbar .logout:hover{ color:var(--danger); }

.container{ max-width:1040px; margin:0 auto; padding:32px 24px 60px; }
.page-head{ margin-bottom:24px; }
.page-head h1{ margin:0 0 4px; font-size:23px; font-weight:700; letter-spacing:-.2px; }
.page-head p{ margin:0; color:var(--muted); font-size:14.5px; }

/* ---------- Kart ---------- */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-head{ display:flex; align-items:center; gap:10px; padding:18px 24px; border-bottom:1px solid var(--line);
  color:var(--teal); font-weight:600; font-size:13.5px; letter-spacing:.6px; text-transform:uppercase; }
.card-body{ padding:24px; }

/* ---------- Form ---------- */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-field{ display:flex; flex-direction:column; gap:7px; }
.form-field label{ font-size:13px; font-weight:600; color:var(--muted); letter-spacing:.3px; }
.form-field .hint{ font-weight:400; color:#9aa8a6; }
.form-field input, .form-field select{
  padding:12px 14px; font-size:14.5px; font-family:var(--font);
  border:1.5px solid var(--line); border-radius:11px; outline:none; background:var(--white);
  transition:border-color .15s, box-shadow .15s; color:var(--ink);
}
.form-field input:focus, .form-field select:focus{
  border-color:var(--teal); box-shadow:0 0 0 4px rgba(2,89,89,.10);
}
.section-title{ display:flex; align-items:center; gap:9px; margin:28px 0 14px; font-size:13px;
  font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--teal); }
.section-title .ln{ flex:1; height:1px; background:var(--line); }

/* Kalem satırları */
.lines{ display:flex; flex-direction:column; gap:12px; }
.line-row{ display:grid; grid-template-columns:1fr 120px 130px 44px; gap:12px; align-items:end; }
.line-row .price{ text-align:right; font-weight:600; color:var(--teal-dark); padding:12px 6px; font-size:14.5px; }
.icon-btn{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line); background:var(--white); border-radius:11px; cursor:pointer; color:var(--muted);
}
.icon-btn:hover{ border-color:#ecd4d1; color:var(--danger); background:#fbf2f1; }
.add-line{ margin-top:14px; }

/* Toplam önizleme */
.totbar{
  margin-top:24px; display:flex; justify-content:flex-end; gap:30px; align-items:center;
  background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:16px 22px;
}
.totbar .t{ text-align:right; }
.totbar .t .k{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.totbar .t .v{ font-size:16px; font-weight:600; }
.totbar .t.grand .v{ font-size:21px; color:var(--teal); font-weight:700; }

.actions{ margin-top:26px; display:flex; justify-content:flex-end; gap:12px; }

/* ---------- Tablo (kullanıcılar) ---------- */
.utable{ width:100%; border-collapse:collapse; }
.utable th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
  padding:12px 16px; border-bottom:1px solid var(--line); font-weight:600; }
.utable td{ padding:14px 16px; border-bottom:1px solid var(--line); font-size:14.5px; vertical-align:middle; }
.utable tr:last-child td{ border-bottom:none; }
.uname{ font-weight:600; }
.uhandle{ color:var(--muted); font-size:13px; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
  font-size:12.5px; font-weight:600; }
.badge.pending{ background:#fff6e8; color:#9a6a12; }
.badge.approved{ background:#e8f6ef; color:var(--ok); }
.badge.rejected{ background:#fbeeec; color:var(--danger); }
.badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.row-actions{ display:flex; gap:8px; justify-content:flex-end; }

.tabs{ display:flex; gap:6px; margin-bottom:18px; }
.tabs a{ padding:8px 16px; border-radius:999px; font-size:14px; color:var(--muted); border:1px solid var(--line); background:#fff; }
.tabs a.active{ background:var(--teal); color:#fff; border-color:var(--teal); }

.empty{ text-align:center; padding:50px 20px; color:var(--muted); }
.empty svg{ width:40px; height:40px; stroke:var(--line); stroke-width:1.5; margin-bottom:10px; }

.flash{ padding:12px 16px; border-radius:11px; font-size:14px; margin-bottom:18px; }
.flash.ok{ background:#e8f6ef; color:var(--ok); }
.flash.err{ background:#fbeeec; color:var(--danger); }

@media (max-width:720px){
  .grid2{ grid-template-columns:1fr; }
  .line-row{ grid-template-columns:1fr 80px 90px 40px; gap:8px; }
  .topbar nav a span{ display:none; }
}