/* Kurban Satış Sistemi - kurumsal, mobil-first */
:root{
  --radius:16px;
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --shadow2:0 8px 18px rgba(2,6,23,.06);
  --m-header:56px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background:var(--bg);color:var(--text)
}
a{text-decoration:none;color:inherit}

.app-shell{display:flex;min-height:100vh}
.sidebar{width:260px;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 95%, #000 5%),var(--brand));color:#fff;position:sticky;top:0;align-self:flex-start;min-height:100vh;padding:18px 14px;border-right:1px solid rgba(255,255,255,.08)}
.sidebar-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sidebar-logo{display:flex;align-items:center;gap:12px}
.logo-mark{width:14px;height:14px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 6px rgba(180,136,0,.16)}
.sidebar-title{font-weight:800;letter-spacing:.2px}
.sidebar-sub{font-size:12px;opacity:.85;margin-top:2px}

.nav{display:flex;flex-direction:column;gap:8px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);transition:.15s}
.nav-item:hover{transform:translateY(-1px);background:rgba(255,255,255,.10)}
.nav-item.active{background:rgba(180,136,0,.22);border-color:rgba(180,136,0,.35)}
.nav-icon{width:22px;text-align:center}
.nav-label{font-weight:650;font-size:14px}
.sidebar-footer{margin-top:18px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);font-size:12px;opacity:.95}

.app-main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border);
  height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:12px
}
.topbar-center{display:flex;align-items:center;justify-content:center;flex:1}
.logo{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow2)}
.logo-text{font-weight:800}
.topbar-right{display:flex;align-items:center;gap:10px}
.user-chip{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--border)}
.user-avatar{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 14%, #fff 86%);color:var(--brand);font-weight:900}
.user-name{font-weight:700;font-size:13px;line-height:1.1}
.user-role{font-size:12px;color:var(--muted);margin-top:2px}

.container{width:100%;max-width:1200px;margin:18px auto;padding:0 16px}
.footer{padding:18px 16px;border-top:1px solid var(--border);color:var(--muted);font-size:12px}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow2);padding:16px}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.h1{font-size:20px;font-weight:900;margin:0}
.muted{color:var(--muted)}

.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid transparent;font-weight:800;cursor:pointer;transition:.15s}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-accent{background:var(--accent);color:#1f2937}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn-ghost:hover{background:rgba(15,23,42,.04)}

.icon-btn{display:none;border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:10px 12px;cursor:pointer}

.input, select, textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface);outline:none}
.input:focus, select:focus, textarea:focus{border-color:color-mix(in srgb,var(--brand) 40%, var(--border) 60%);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 12%, transparent 88%)}
.label{font-size:12px;color:var(--muted);margin-bottom:6px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1;min-width:240px}

.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;font-size:13px}
.table th{color:var(--muted);font-weight:800;background:color-mix(in srgb,var(--bg) 60%, #fff 40%)}

.alert{padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow2);margin-bottom:12px}
.alert-warn{border-color:color-mix(in srgb,var(--accent) 40%, var(--border) 60%);background:color-mix(in srgb,var(--accent) 10%, #fff 90%)}
.alert-ok{border-color:color-mix(in srgb,#16a34a 35%, var(--border) 65%);background:color-mix(in srgb,#16a34a 8%, #fff 92%)}
.alert-danger{border-color:color-mix(in srgb,#dc2626 35%, var(--border) 65%);background:color-mix(in srgb,#dc2626 8%, #fff 92%)}

.overlay{display:none;position:fixed;inset:0;background:rgba(2,6,23,.5);z-index:60}

@media (max-width: 900px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-110%);transition:.2s;z-index:70;box-shadow:var(--shadow)}
  .sidebar.open{transform:translateX(0)}
  .icon-btn{display:inline-flex}
  .overlay.show{display:block}
}

@media (max-width: 720px){
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
  .user-chip{display:none}
}

body.no-scroll{overflow:hidden}