*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#f4f6fa;color:#1f2937}
a{color:#2d6cdf;text-decoration:none}
a:hover{text-decoration:underline}

.topbar{display:flex;justify-content:space-between;align-items:center;background:#1f2937;color:#fff;padding:12px 20px;flex-wrap:wrap;gap:10px}
.topbar-head{display:contents}
.topbar .brand{font-weight:700;font-size:18px;letter-spacing:.5px}
.topbar .brand span{opacity:.6;font-weight:400;margin-left:4px}
.topbar nav{display:flex;gap:4px;flex-wrap:wrap}
.topbar nav a{color:#cbd5e1;padding:8px 12px;border-radius:6px;font-size:14px}
.topbar nav a:hover{background:#374151;text-decoration:none;color:#fff}
.topbar nav a.active{background:#2d6cdf;color:#fff}
.topbar nav a.logout{background:#b91c1c;color:#fff}
.topbar nav a.logout:hover{background:#991b1b}

/* Hamburger — masaüstünde gizli */
.menu-toggle{
  display:none;
  background:transparent;border:0;cursor:pointer;
  width:40px;height:40px;padding:10px;
  flex-direction:column;justify-content:space-between;
}
.menu-toggle span{
  display:block;width:20px;height:2px;background:#fff;
  border-radius:2px;
  transition:transform .22s ease, opacity .22s ease;
}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.wrap{max-width:1100px;margin:24px auto;padding:0 20px}
h1{margin:0 0 16px;font-size:22px}
h2{font-size:18px;margin:22px 0 10px}

.card{background:#fff;border-radius:10px;padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:18px}

.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:10px 8px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:middle}
.table th{background:#f9fafb;font-weight:600;font-size:13px;color:#374151;text-transform:uppercase;letter-spacing:.4px}
.table tr:hover td{background:#fafbfc}

.btn{display:inline-block;background:#2d6cdf;color:#fff;border:0;border-radius:6px;padding:8px 14px;font-size:14px;cursor:pointer;text-decoration:none}
.btn:hover{background:#1e54b9;text-decoration:none;color:#fff}
.btn-sm{padding:5px 10px;font-size:13px}
.btn-danger{background:#b91c1c}.btn-danger:hover{background:#991b1b}
.btn-success{background:#16a34a}.btn-success:hover{background:#15803d}
.btn-warn{background:#d97706}.btn-warn:hover{background:#b45309}
.btn-ghost{background:#e5e7eb;color:#111}.btn-ghost:hover{background:#d1d5db;color:#000}

.form-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.form-row > *{flex:1}
label{font-size:13px;color:#374151;font-weight:600;display:block;margin-bottom:4px}
input[type=text],input[type=password],input[type=number],input[type=email],select,textarea{
  width:100%;padding:9px 11px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;font-family:inherit;background:#fff
}
input:focus,select:focus,textarea:focus{outline:2px solid #2d6cdf;outline-offset:-1px;border-color:transparent}

.flash{padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:14px}
.flash-success{background:#e6f9ee;color:#155724;border-left:4px solid #28a745}
.flash-error{background:#fde2e2;color:#721c24;border-left:4px solid #dc3545}
.flash-info{background:#e0ecff;color:#1e3a8a;border-left:4px solid #2d6cdf}

.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.pill-platinum{background:#e0e7ef;color:#243047}
.pill-gold{background:#fef3c7;color:#78350f}
.pill-silver{background:#f1f5f9;color:#475569}
.pill-pending{background:#fef3c7;color:#92400e}
.pill-active{background:#dcfce7;color:#166534}
.pill-rejected{background:#fee2e2;color:#991b1b}
.pill-suspended{background:#fee2e2;color:#991b1b}

.thumb{width:110px;height:62px;object-fit:cover;border-radius:4px;background:#eee}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.stat{background:#fff;border-radius:10px;padding:18px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.stat .n{font-size:26px;font-weight:700;color:#1f2937}
.stat .l{font-size:13px;color:#6b7280;margin-top:4px}

.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#1f2937}
.login-box{background:#fff;padding:32px 28px;border-radius:10px;width:340px;max-width:92vw;box-shadow:0 4px 18px rgba(0,0,0,.2)}
.login-box h1{text-align:center;margin:0 0 20px}
.login-box .btn{width:100%;padding:11px}

@media(max-width:820px){
  .topbar{padding:10px 14px;flex-wrap:wrap}
  .topbar-head{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px}
  .topbar .brand{font-size:17px}
  .menu-toggle{display:flex}
  .topbar nav{
    display:none;
    flex-basis:100%;flex-direction:column;gap:2px;
    padding-top:10px;margin-top:4px;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .topbar nav.open{display:flex}
  .topbar nav a{
    width:100%;padding:11px 14px;font-size:14px;border-radius:6px;
  }
}
@media(max-width:600px){
  .table{font-size:13px}
  .table th,.table td{padding:7px 5px}
  .thumb{width:70px;height:42px}
}