:root{
  --bg:#070a10;
  --card:#0b111a;
  --text:#e8eef9;
  --muted:#a7b3c7;
  --blue:#1f8cff;
  --border:rgba(255,255,255,.06);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
[data-theme="light"]{
  --bg:#f6f8fc;
  --card:#ffffff;
  --text:#0b1324;
  --muted:#5d6b85;
  --blue:#1466ff;
  --border:rgba(10,20,40,.10);
  --shadow:0 10px 30px rgba(10,20,40,.12);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(900px 500px at 20% 35%, rgba(31,140,255,.25), transparent 60%),
              radial-gradient(700px 400px at 80% 70%, rgba(0,255,194,.10), transparent 60%),
              var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:22px}
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:18px;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background:rgba(8,12,18,.75);
  backdrop-filter: blur(14px);
}
[data-theme="light"] .topbar{background:rgba(255,255,255,.75)}
.logo{font-weight:800;letter-spacing:.5px}
.logo span{color:var(--blue)}
.nav{display:flex;gap:14px;align-items:center;margin-left:14px}
.nav>a{padding:10px 10px;border-radius:10px;color:var(--muted)}
.nav>a:hover{background:var(--border);color:var(--text)}
.right{margin-left:auto;display:flex;gap:10px;align-items:center}
.btn{
  padding:10px 14px;border-radius:12px;
  background:var(--blue);color:white;font-weight:700;border:0;cursor:pointer;
  box-shadow: var(--shadow);
}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border);box-shadow:none}
.btn.ghost:hover{background:var(--border)}
.flash{padding:12px 14px;border-radius:14px;margin:12px 0;border:1px solid var(--border)}
.flash.ok{background:rgba(0,255,194,.08)}
.flash.err{background:rgba(255,60,80,.08)}
.card{
  background:rgba(10,16,24,.72);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:18px;
}
[data-theme="light"] .card{background:rgba(255,255,255,.90)}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:center;margin-top:12px}
.h1{font-size:52px;line-height:1.05;margin:0}
.h1 .accent{color:var(--blue)}
.p{color:var(--muted);font-size:18px;line-height:1.6;margin:14px 0 0}
.search{
  display:flex;gap:10px;margin-top:18px
}
.search input{
  flex:1;padding:14px 14px;border-radius:14px;border:1px solid var(--border);
  background:rgba(0,0,0,.25);color:var(--text);outline:none
}
[data-theme="light"] .search input{background:rgba(20,40,80,.06)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.tile{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  text-align:center;
  color:var(--muted);
}
.tile:hover{transform:translateY(-2px);transition:.15s; color:var(--text)}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;background:rgba(31,140,255,.15);border:1px solid var(--border);color:var(--text);font-size:12px}
.footer{
  padding:22px 18px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:12px;color:var(--muted)
}
.footer .links a{margin-left:10px;color:var(--muted)}
.footer .links a:hover{color:var(--text)}
/* Dropdown - mouse kapanma fix (köprü) */
.dropdown{position:relative}
.dropbtn{
  background:transparent;border:0;color:var(--muted);cursor:pointer;
  padding:10px 10px;border-radius:10px;font-weight:600;
  display:flex;gap:8px;align-items:center
}
.dropbtn:hover{background:var(--border);color:var(--text)}
.dropmenu{
  position:absolute;top:100%;left:0;
  min-width:220px;
  padding-top:10px; /* köprü */
  display:none;
}
.dropmenu > a, .dropmenu .dmgroup a{
  display:block;
  background:var(--card);
  border:1px solid var(--border);
  margin-top:-1px;
  padding:12px 12px;
  color:var(--text);
}
.dropmenu > a:hover, .dropmenu .dmgroup a:hover{background:rgba(31,140,255,.10)}
.dropdown:hover .dropmenu{display:block}
.chev{opacity:.7}
.userdd .dropmenu{left:auto;right:0;min-width:260px}
.userdd .dropmenu.wide{min-width:280px}
.dmgroup{border-radius:14px;overflow:hidden;margin-bottom:10px}
.dropmenu .danger{color:#ff3c50}
.userbtn{display:flex;gap:10px;align-items:center}
.usericon{font-size:18px}
.uinfo{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.uname{font-weight:700;color:var(--text)}
.ubalance{font-size:12px;color:var(--muted)}
/* tables */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;color:var(--muted)}
.table th{color:var(--text);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>.card{flex:1;min-width:280px}
.form{display:grid;gap:10px}
.form input,.form select,.form textarea{
  padding:12px 12px;border-radius:14px;border:1px solid var(--border);
  background:rgba(0,0,0,.25);color:var(--text);outline:none
}
[data-theme="light"] .form input,[data-theme="light"] .form select,[data-theme="light"] .form textarea{background:rgba(20,40,80,.06)}
.form label{color:var(--muted);font-size:13px}
.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.small{font-size:12px;color:var(--muted)}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .h1{font-size:40px}
}