:root{
  --navy-950:#0a1220; --navy-900:#0d1830; --blue-600:#c31f2e; --blue-500:#dc2b3b;
  --gold-500:#e8a33d; --gold-400:#f0b969; --gray-200:#e4e9f0; --gray-300:#d7dee8;
  --gray-500:#7789a0; --off:#f7f9fc; --green-600:#1e8e3e; --green-50:#eaf7ee;
  --sidebar-w:246px;
  --shadow-sm:0 1px 2px rgba(10,18,32,.05), 0 1px 3px rgba(10,18,32,.06);
  --shadow-md:0 8px 24px rgba(10,18,32,.10);
  --radius-lg:16px; --radius-md:12px; --radius-sm:8px;
}
*{box-sizing:border-box;}
body{
  margin:0; padding:0;
  font-family:'Inter','Segoe UI',system-ui,Arial,sans-serif;
  background:var(--off); color:var(--navy-900);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{color:var(--navy-950); font-weight:800; letter-spacing:-.01em;}
a{color:inherit;}

/* ================= Login / Portal giris ekrani ================= */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(circle at 20% 10%, rgba(232,163,61,.08), transparent 40%),
             radial-gradient(circle at 85% 90%, rgba(195,31,46,.06), transparent 45%), var(--off);}
.login-card{background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:38px; width:100%; max-width:380px;}
.login-card h1{font-size:21px; margin-bottom:6px;}
.login-card .subtitle{color:var(--gray-500); font-size:13px; margin-bottom:22px; line-height:1.6;}
label{display:block; font-size:12.5px; font-weight:700; margin:14px 0 6px; color:var(--navy-900);}

input[type=text], input[type=password], input[type=number], input[type=file],
textarea, select{
  width:100%; padding:10px 13px; border:1px solid var(--gray-300); border-radius:var(--radius-sm);
  font-size:13.5px; font-family:inherit; color:var(--navy-950); background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{resize:vertical; min-height:100px; line-height:1.6;}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus,
textarea:focus, select:focus{
  outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(232,163,61,.15);
}
input[type=checkbox]{width:16px; height:16px; accent-color:var(--blue-600); vertical-align:middle;}
input[type=file]{padding:8px 10px; font-size:12.5px; cursor:pointer;}

.btn{
  display:inline-block; margin-top:20px; background:var(--blue-600); color:#fff; border:none;
  padding:12px 22px; border-radius:var(--radius-sm); font-weight:700; font-size:14px; cursor:pointer;
  width:100%; text-align:center; text-decoration:none; transition:background .15s ease, transform .1s ease;
}
.btn:hover{background:var(--blue-500);}
.btn:active{transform:translateY(1px);}

.alert{padding:12px 14px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:14px; border:1px solid transparent;}
.alert-error{background:#fdecec; color:var(--blue-600); border-color:#f6c6c6;}
.alert-success{background:var(--green-50); color:var(--green-600); border-color:#c8ecd3;}

/* ================= Panel iskeleti ================= */
.app-shell{display:flex; min-height:100vh;}

.sidebar{
  width:var(--sidebar-w); background:var(--navy-950); color:#fff; padding:24px 14px;
  flex:none; position:sticky; top:0; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column;
}
.sidebar .brand{
  font-weight:800; font-size:15.5px; margin:6px 10px 24px; color:#fff; letter-spacing:.01em;
  display:flex; align-items:center; gap:9px;
}
.sidebar .brand .brand-dot{width:9px; height:9px; border-radius:50%; background:var(--gold-500); flex:none;
  box-shadow:0 0 0 4px rgba(232,163,61,.18);}

.sidebar nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.sidebar nav a{
  display:flex; align-items:center; gap:11px;
  color:rgba(255,255,255,.62); text-decoration:none;
  padding:10px 12px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600;
  border-left:3px solid transparent; transition:background .15s ease, color .15s ease;
}
.sidebar nav a .nav-ic{display:inline-flex; flex:none; opacity:.72; transition:opacity .15s ease;}
.sidebar nav a:hover{background:rgba(255,255,255,.06); color:#fff;}
.sidebar nav a:hover .nav-ic{opacity:1;}
.sidebar nav a.active{background:rgba(232,163,61,.12); color:#fff; border-left-color:var(--gold-500);}
.sidebar nav a.active .nav-ic{opacity:1; color:var(--gold-500);}
.sidebar nav a .badge{
  margin-left:auto; background:var(--blue-500); color:#fff; font-size:10.5px; font-weight:800;
  padding:2px 7px; border-radius:20px; line-height:1.5;
}
.nav-sep{height:1px; background:rgba(255,255,255,.09); margin:14px 6px;}
.sidebar nav a.nav-external{color:rgba(255,255,255,.55);}
.sidebar nav a.nav-logout{color:#ff9a9a;}
.sidebar nav a.nav-logout:hover{background:rgba(255,60,60,.1); color:#ffb3b3;}

.main{flex:1; padding:30px 38px 60px; min-width:0;}

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:26px; padding-bottom:18px; border-bottom:1px solid var(--gray-200);
  flex-wrap:wrap; gap:10px;
}
.topbar h2{font-size:19px;}
.topbar .user{font-size:12.5px; color:var(--gray-500); display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--gray-200); border-radius:30px; padding:6px 14px 6px 6px;}
.topbar .user b{color:var(--navy-950); font-size:13px;}
.topbar .user .role-line{display:flex; flex-direction:column; line-height:1.35;}
.topbar .user .avatar{
  width:32px; height:32px; border-radius:50%; background:var(--navy-950); color:var(--gold-500);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex:none;
}

.card{background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:24px; margin-bottom:20px; box-shadow:var(--shadow-sm);}
.card h3{font-size:14.5px; font-weight:800;}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:8px;}
.stat-link{text-decoration:none; color:inherit; display:block;}
.stat-link .card{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.stat-link:hover .card{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--gray-300);}
.stat{position:relative; padding:20px 20px 20px 22px; display:flex; flex-direction:column; gap:10px;}
.stat::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:0 3px 3px 0; background:var(--gold-500); opacity:.85;}
.stat.stat-alert::before{background:var(--blue-600);}
.stat-ic{
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(232,163,61,.12); color:var(--gold-500); flex:none;
}
.stat-alert .stat-ic{background:rgba(195,31,46,.1); color:var(--blue-600);}
.stat b{display:block; font-size:24px; color:var(--navy-950); line-height:1.15;}
.stat span.stat-label{font-size:12px; color:var(--gray-500); font-weight:600;}
.stat.stat-alert{background:#fffaf9; border-color:#f6c6c6;}

/* ---- Bolum basligi (stat grid ile alt kartlar arasindaki ayrim icin) ---- */
.section-title{font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-500); margin:26px 0 12px;}

.logout-link{color:var(--blue-600); font-size:13px; text-decoration:none; font-weight:600;}

/* ---- Ortak yardimci siniflar (sayfalar arasinda paylasilir) ---- */
.hint{color:var(--gray-500); font-size:12.5px; line-height:1.6;}
.field{margin-bottom:16px;}
.field label{margin-top:0;}

.small-btn{
  display:inline-block; font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:var(--radius-sm);
  border:1px solid var(--gray-300); background:#fff; color:var(--navy-900); cursor:pointer;
  text-decoration:none; transition:background .15s ease, border-color .15s ease;
}
.small-btn:hover{background:var(--off); border-color:var(--gray-500);}
.small-btn.danger{color:var(--blue-600); border-color:#f6c6c6;}
.small-btn.danger:hover{background:#fdecec;}
.small-btn.primary{background:var(--blue-600); border-color:var(--blue-600); color:#fff;}
.small-btn.primary:hover{background:var(--blue-500);}

.status-pill{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:20px;}
.status-on{background:var(--green-50); color:var(--green-600);}
.status-off{background:#fdecec; color:var(--blue-600);}

.url-box{display:flex; gap:8px; align-items:center; background:var(--off); border:1px solid var(--gray-200); border-radius:var(--radius-sm); padding:10px 12px; font-size:13px; font-family:monospace; margin-top:10px; word-break:break-all;}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:left; padding:10px 10px; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--gray-500); border-bottom:2px solid var(--gray-200);}
td{text-align:left; padding:12px 10px; border-bottom:1px solid var(--gray-200); vertical-align:middle;}
tbody tr:hover{background:var(--off);}

/* ================= Responsive ================= */
@media (max-width:980px){
  .app-shell{flex-direction:column;}
  .sidebar{
    width:100%; height:auto; position:relative; padding:14px 16px;
    flex-direction:row; align-items:center; overflow-x:auto;
  }
  .sidebar .brand{margin:0 14px 0 0; flex:none;}
  .sidebar nav{flex-direction:row; flex:none;}
  .sidebar nav a{white-space:nowrap; border-left:none; border-bottom:3px solid transparent;}
  .sidebar nav a.active{border-left:none; border-bottom-color:var(--gold-500);}
  .nav-sep{width:1px; height:22px; margin:0 6px;}
  .main{padding:22px 18px 50px;}
}