/* ============================================
   BilnetOyun - Admin Paneli
   ============================================ */
:root {
    --a-bg: #0f1220;
    --a-card: #1a1f33;
    --a-card2: #232a42;
    --a-border: #313a5a;
    --a-text: #e8ebf5;
    --a-muted: #9aa3c0;
    --a-accent: #8E7BC4;
    --a-accent2: #5B4A8A;
    --a-green: #2ecc71;
    --a-red: #e74c3c;
    --a-amber: #f1c40f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: radial-gradient(1200px 600px at 50% -10%, #1c2138 0%, var(--a-bg) 60%);
    color: var(--a-text);
    min-height: 100vh;
    line-height: 1.45;
    padding: 24px 16px 60px;
}

.wrap { max-width: 760px; margin: 0 auto; }

/* ── Giriş ── */
.login-box {
    max-width: 380px;
    margin: 8vh auto 0;
    background: var(--a-card);
    border: 1px solid var(--a-border);
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.login-box h1 { font-size: 1.3rem; margin-bottom: 4px; }
.login-box .sub { color: var(--a-muted); font-size: 0.85rem; margin-bottom: 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.78rem; color: var(--a-muted); margin-bottom: 6px; }
.field input {
    width: 100%; padding: 11px 13px; border-radius: 10px;
    border: 1px solid var(--a-border); background: var(--a-card2);
    color: var(--a-text); font-size: 0.95rem;
}
.field input:focus { outline: none; border-color: var(--a-accent); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: none; border-radius: 10px; cursor: pointer;
    font-family: inherit; font-weight: 700; font-size: 0.9rem;
    padding: 11px 16px; color: #fff; transition: filter .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn:hover { filter: brightness(1.08); }
.btn-primary { background: linear-gradient(135deg, var(--a-accent2), var(--a-accent)); width: 100%; }
.btn-ghost { background: var(--a-card2); border: 1px solid var(--a-border); color: var(--a-text); }
.btn-danger { background: linear-gradient(135deg, #c0392b, var(--a-red)); }
.btn-sm { padding: 7px 11px; font-size: 0.78rem; }

.err { color: var(--a-red); font-size: 0.82rem; margin-top: 10px; min-height: 1em; }

/* ── Panel ── */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 10px; }
.topbar h1 { font-size: 1.25rem; }
.topbar .who { color: var(--a-muted); font-size: 0.8rem; }

.card {
    background: var(--a-card); border: 1px solid var(--a-border);
    border-radius: 14px; padding: 18px; margin-bottom: 16px;
}
.card h2 { font-size: 1rem; margin-bottom: 4px; }
.card .hint { color: var(--a-muted); font-size: 0.8rem; margin-bottom: 14px; }

.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.stat {
    background: var(--a-card2); border: 1px solid var(--a-border); border-radius: 12px;
    padding: 12px 16px; min-width: 120px;
}
.stat .n { font-size: 1.6rem; font-weight: 800; color: var(--a-amber); }
.stat .l { font-size: 0.74rem; color: var(--a-muted); }
.per-game { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 0.85rem; }
.per-game .pg-name { color: var(--a-text); }
.per-game .pg-stars { color: var(--a-amber); font-weight: 700; text-align: right; }
.per-game .empty { color: var(--a-muted); font-size: 0.82rem; }

/* Kilit listesi */
.bulk { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.lock-list { display: flex; flex-direction: column; gap: 8px; }
.lock-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--a-card2); border: 1px solid var(--a-border);
    border-radius: 10px; padding: 9px 12px;
}
.lock-row .lr-name { flex: 1; font-weight: 600; font-size: 0.9rem; }
.lock-row .lr-tag { font-size: 0.66rem; color: var(--a-muted); background: #2c3354; padding: 2px 7px; border-radius: 6px; margin-left: 6px; }
.lock-row .lr-th { color: var(--a-muted); font-size: 0.78rem; white-space: nowrap; }
.seg { display: inline-flex; border: 1px solid var(--a-border); border-radius: 8px; overflow: hidden; }
.seg button {
    border: none; background: var(--a-card); color: var(--a-muted);
    font-family: inherit; font-size: 0.74rem; font-weight: 700;
    padding: 6px 10px; cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--a-border); }
.seg button.on-auto.active { background: #394264; color: #fff; }
.seg button.on-unlock.active { background: var(--a-green); color: #06210f; }
.seg button.on-lock.active { background: var(--a-red); color: #fff; }

.sound-seg { display: inline-flex; gap: 8px; }

.toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
    background: #111; border: 1px solid var(--a-border); color: #fff;
    padding: 11px 18px; border-radius: 10px; font-size: 0.85rem;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50;
    max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok { border-color: var(--a-green); }
.toast.bad { border-color: var(--a-red); }

.hidden { display: none !important; }
.back-link { display: inline-block; margin-top: 10px; color: var(--a-muted); font-size: 0.82rem; text-decoration: none; }
.back-link:hover { color: var(--a-text); }