/* lovelodyX giriş ekranı — vote ve draw için TEK dosya.
* Bu dosyanın iki kopyası var ve bayt bayt aynı olmak zorunda:
 *   vote.lovelodyx.com/admin/assets/llx-login.css
 *   draw.lovelodyx.com/asset/llx-login.css
 * (vote admin/login.test.php farkı yakalar). Kendi kendine yeter: Bootstrap'e
 * bağlı değil. Yalnızca .llx-login* sınıfları hedeflenir. */

:root {
    --lg-canvas: #f2f3f7;
    --lg-surface: #ffffff;
    --lg-hairline: #d9dce3;
    --lg-edge: #7d8699;
    --lg-text: #333333;
    --lg-muted: #5f6470;
    --lg-accent: #3378e8;
    --lg-fill: #2e6cd1;
    --lg-fill-hover: #2960ba;
    --lg-ink: #2b64c2;
    --lg-danger: #b3261e;
    --lg-danger-bg: #fdecea;
    --lg-ok: #1b6e3c;
    --lg-ok-bg: #e8f5ec;
    --lg-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
}
html[data-llx-theme='dark'] {
    --lg-canvas: #0f1626;
    --lg-surface: #16203a;
    --lg-hairline: #2c3d66;
    --lg-edge: #8592b0;
    --lg-text: #f5f7fb;
    --lg-muted: #9aa5bb;
    --lg-accent: #5f9bff;
    --lg-fill: #2e6cd1;
    --lg-fill-hover: #3170cc;
    --lg-ink: #9dc2ff;
    --lg-danger: #ffb4ab;
    --lg-danger-bg: #3a1d1f;
    --lg-ok: #8fd4a6;
    --lg-ok-bg: #16301f;
    --lg-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3);
}

html { background: var(--lg-canvas); }
body.llx-login-page {
    margin: 0;
    padding: 16px;
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lg-canvas);
    color: var(--lg-text);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}
body.llx-login-page * { box-sizing: border-box; }

/* Kart */
.llx-login {
    width: 300px;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 24px;
    background: var(--lg-surface);
    border: 1px solid var(--lg-hairline);
    border-radius: 10px;
    box-shadow: var(--lg-shadow);
}

/* Logo: dosya beyaz mürekkep — açık zeminde siyaha, koyuda olduğu gibi */
.llx-login-logo {
    display: block;
    height: 26px;
    width: auto;
    margin: 0 auto 18px;
    filter: brightness(0);
}
html[data-llx-theme='dark'] .llx-login-logo { filter: none; }

.llx-login-title {
    margin: 0 0 16px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--lg-text);
}

/* Alanlar */
.llx-login-input {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 12px;
    padding: 8px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--lg-text);
    background: var(--lg-surface);
    border: 1px solid var(--lg-edge);
    border-radius: 6px;
    box-shadow: none;
}
.llx-login-input:focus {
    outline: 2px solid var(--lg-accent);
    outline-offset: 1px;
    border-color: var(--lg-accent);
    box-shadow: none;
}

.llx-login-check { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
.llx-login-check label { margin: 0; color: var(--lg-text); font-size: 14px; }

/* Düğme */
.llx-login-btn {
    display: block;
    width: 100%;
    float: none;
    height: auto;
    padding: 8px 12px;
    font: inherit;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background: var(--lg-fill);
    border: 1px solid var(--lg-fill);
    border-radius: 6px;
    box-shadow: none;
    text-shadow: none;
    cursor: pointer;
}
.llx-login-btn:hover { background: var(--lg-fill-hover); border-color: var(--lg-fill-hover); color: #fff; }
.llx-login-btn:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 2px; }

/* Bildirimler */
.llx-login-alert {
    margin: 0 0 16px;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid transparent;
    border-left-width: 1px;
    border-radius: 6px;
    box-shadow: none;
    color: var(--lg-ok);
    background: var(--lg-ok-bg);
    border-color: var(--lg-ok);
}
.llx-login-alert.is-error {
    color: var(--lg-danger);
    background: var(--lg-danger-bg);
    border-color: var(--lg-danger);
}
.llx-login-alert a { color: inherit; }

/* Bağlantılar */
.llx-login-links {
    margin: 16px 0 0;
    padding: 0;
    text-align: center;
    font-size: 13px;
}

.llx-login a { color: var(--lg-ink); }
.llx-login a:hover { text-decoration: underline; }

.llx-login-note { margin: 0 0 12px; color: var(--lg-muted); font-size: 13px; }

/* Tema düğmesi */
.llx-login-theme {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--lg-muted);
    cursor: pointer;
}
.llx-login-theme:hover { background: var(--lg-hairline); color: var(--lg-text); }
.llx-login-theme:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 2px; }
.llx-login-theme .llx-theme-icon { width: 18px; height: 18px; }
.llx-login-theme .llx-theme-icon--sun { display: none; }
html[data-llx-theme='dark'] .llx-login-theme .llx-theme-icon--sun { display: block; }
html[data-llx-theme='dark'] .llx-login-theme .llx-theme-icon--moon { display: none; }
.llx-login-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--lg-fill); }
.llx-login-input { margin-bottom: 12px; }
.llx-login-note.is-center { text-align: center; margin-bottom: 16px; text-wrap: balance; }