/* Minimal Auth Page Design */

.auth-page {
    background-color: #f9fafb;
    /* Clean/Professional Background */
    background-image: none;
    /* Remove gradients */
    font-family: 'Inter', sans-serif;
}

.auth-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
}

.auth-shell {
    width: 100%;
    max-width: 400px;
    /* Slightly narrower for focus */
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    /* Consistent with settings card */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    /* Softer shadow */
    padding: 2.1rem 1.75rem;
}

.auth-brand {
    display: block;
    /* Center brand */
    text-align: center;
    margin-bottom: 1.4rem;
}

.auth-brand img {
    height: 36px;
    /* Match settings logo size roughly */
    width: auto;
}

.auth-shell h1 {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: -0.02em;
}

.auth-hint {
    margin: -0.2rem 0 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.auth-form label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    display: block;
}

.turnstile-container {
    display: flex;
    justify-content: center;
    margin: 0 0 1rem;
}

.auth-form input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    /* Tighter radius */
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
    background: #fff;
}

.auth-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.auth-inline-action {
    display: flex;
    justify-content: flex-end;
    margin-top: -0.15rem;
}

.auth-inline-link {
    color: var(--primary);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.auth-inline-link:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

.auth-inline-link.is-disabled {
    opacity: 0.65;
    pointer-events: none;
    text-decoration: none;
}

.auth-btn {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.6rem 1rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.auth-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-btn-primary {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    box-shadow: none;
}

.auth-btn-primary:hover:not(:disabled) {
    background: var(--primary);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

.auth-btn-google {
    background: #ffffff;
    color: var(--text-primary);
    border-color: #cbd5e1;
    /* Slightly darker border for visibility */
    font-weight: 600;
    /* Slightly bolder text */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
}

.auth-btn-google:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #94a3b8;
    color: var(--text-primary);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

.auth-divider {
    margin: 1.1rem 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    position: relative;
    font-weight: 500;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: var(--border);
}

.auth-divider::before {
    left: 0;
}

.auth-divider::after {
    right: 0;
}

.auth-switch {
    margin-top: 1.1rem;
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-primary);
    /* Dark text */
    font-weight: 400;
    /* Normal weight */
}

.auth-switch a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    /* Slightly bold for link, or normal as requested? User said 'blue link', didn't specify weight for link explicitly but usually links distinguish themselves. Re-reading user request: "siyah ve linksiz, font-weight:normal olsun... Yanına 'Login' text'i koyalım link bunda olsun mavi olsun." - imply link is also normal? or simply distinguishable. I'll stick to 500 which is standard for links here, or 400 if strictly normal. Let's start with 500 to match button weight.*/
    margin-left: 0.3rem;
    /* Space between text and link */
    transition: color 0.2s;
}

.auth-switch a:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

.auth-message {
    margin-top: 1rem;
    min-height: 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
}

.auth-message.is-success {
    color: #16a34a;
}

.auth-message.is-error {
    color: #e11d48;
}

.auth-message.is-info {
    color: #475569;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .auth-shell {
        padding: 1.6rem 1.2rem;
        box-shadow: none;
        border: none;
        background: transparent;
    }

    .auth-main {
        align-items: flex-start;
        padding-top: 2.4rem;
    }
}