.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Arka planı koruyarak okunabilirliği artır */
.bg-dark-70 {
    background: rgba(15,15,15,0.8);
}


/* ForgotPassword */
.forgot-password-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.forgot-password-card {
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(15,15,15,0.8);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    max-width: 480px;
    width: 100%;
    padding: 32px 32px;
}

@media screen and (max-width: 425px) {
    .forgot-password-card {
        padding: 16px 16px;
    }
}
.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.icon-shield {
    font-size: 2.5rem;
    color: #ff7a00;
}

.forgot-password-card h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.forgot-password-card h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin: 16px 0 8px 0;
}

.forgot-password-card .description {
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 24px;
}

.alert-custom {
    display: flex;
    align-items: start;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid;
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.alert-success {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(134, 239, 172, 0.3);
    color: #86efac;
}

.alert-error {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(252, 165, 165, 0.3);
    color: #fca5a5;
}

.alert-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #f1f1f1;
    margin-bottom: 8px;
    display: block;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

    .input-with-icon .icon {
        position: absolute;
        left: 12px;
        color: #fff;
        font-size: 1.25rem;
        pointer-events: none;
    }

    .input-with-icon input {
        width: 100%;
        padding: 12px 16px 12px 44px;
        background-color: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.2);
        color: #fff;
        border-radius: 8px;
        font-size: 1rem;
        transition: all 0.2s;
    }

        .input-with-icon input:focus {
            outline: none;
            border-color: #ff7a00;
            box-shadow: 0 0 0 0.2rem rgba(255,122,0,0.25);
        }

        .input-with-icon input::placeholder {
            color: rgba(255,255,255,0.5);
        }

.btn-primary-custom {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(180deg,#ff8a00,#ff6000);
    color: #fff;
    border: none;
    border-radius: .7rem;
    box-shadow: 0 4px 12px rgba(255,96,0,.35);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 16px;
}

    .btn-primary-custom:hover {
        background: linear-gradient(180deg,#ff9500,#ff6a00);
    }

    .btn-primary-custom:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.3);
    }

.back-link {
    display: inline-block;
    margin-top: 16px;
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    text-decoration: underline;
    transition: color 0.2s;
}

    .back-link:hover {
        color: #ff7a00;
    }


.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    width: 100%;
    max-width: 536px;
}
@media screen and (max-width: 576px) {
    .login-container {
        padding: 10px;
        max-width: 100%;
    }
}

.login-card {
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(15,15,15,0.8);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    max-width: 576px;
    width: 100%;
    padding: 32px 32px;
}

@media screen and (max-width: 425px) {
    .login-card {
        padding: 16px 16px;
    }
}


/*ResetPassword*/

.reset-password-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.reset-password-card {
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(15,15,15,0.8);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    max-width: 520px;
    width: 100%;
    padding: 32px 32px;
}

@media screen and (max-width: 425px) {
    .reset-password-card {
        padding: 16px 16px;
    }
}

    .reset-password-card h1 {
        font-size: 1.875rem;
        font-weight: 900;
        color: #fff;
        margin: 0 0 8px 0;
        text-align: center;
    }

    .reset-password-card .description {
        color: rgba(255,255,255,0.85);
        font-size: 1rem;
        text-align: center;
        margin-bottom: 32px;
    }

.form-group {
    margin-bottom: 24px;
}

    .form-group label {
        font-size: 1rem;
        font-weight: 500;
        color: #f1f1f1;
        margin-bottom: 8px;
        display: block;
    }

.input-with-toggle {
    display: flex;
    align-items: stretch;
    background-color: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    transition: all 0.2s;
}

    .input-with-toggle:focus-within {
        border-color: #ff7a00;
        box-shadow: 0 0 0 0.2rem rgba(255,122,0,0.25);
    }

    .input-with-toggle input {
        flex: 1;
        border: none;
        padding: 14px 16px;
        border-radius: 8px 0 0 8px;
        font-size: 1rem;
        outline: none;
        background: transparent;
        color: #fff;
    }

        .input-with-toggle input::placeholder {
            color: rgba(255,255,255,0.5);
        }

    .input-with-toggle button {
        background: transparent;
        border: none;
        padding: 0 16px;
        color: rgba(255,255,255,0.7);
        cursor: pointer;
        border-radius: 0 8px 8px 0;
        transition: color 0.2s;
    }

        .input-with-toggle button:hover {
            color: #ff7a00;
        }

.password-strength {
    margin-top: 24px;
}

.strength-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.strength-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
}

.strength-value {
    font-size: 0.875rem;
    font-weight: 700;
}

    .strength-value.weak {
        color: #ff4d4d;
    }

    .strength-value.medium {
        color: #ffc107;
    }

    .strength-value.strong {
        color: #10b981;
    }

.strength-bars {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.strength-bar {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
    transition: background 0.3s;
}

    .strength-bar.active.weak {
        background: #ff4d4d;
    }

    .strength-bar.active.medium {
        background: #ffc107;
    }

    .strength-bar.active.strong {
        background: #10b981;
    }

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.requirement-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.7);
}

    .requirement-item i {
        font-size: 1rem;
        color: rgba(255,255,255,0.3);
    }

    .requirement-item.met i {
        color: #10b981;
    }

    .requirement-item.met {
        color: #10b981;
    }

.btn-update {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(180deg,#ff8a00,#ff6000);
    color: #fff;
    border: none;
    border-radius: .7rem;
    box-shadow: 0 4px 12px rgba(255,96,0,.35);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 24px;
}

    .btn-update:hover:not(:disabled) {
        background: linear-gradient(180deg,#ff9500,#ff6a00);
    }

    .btn-update:disabled {
        background: rgba(255,255,255,0.12);
        cursor: not-allowed;
        box-shadow: none;
    }

.text-danger {
    color: #ff4d4d;
    font-size: 0.875rem;
    margin-top: 4px;
    display: block;
}

@media (max-width: 576px) {
    .requirements-grid {
        grid-template-columns: 1fr;
    }
}

/* SignupForm */

ul.contract-items li {
    list-style-position: outside;
}

/* tema değişkenleri – koyu zemin uyumu */
:root {
    --pw-bg: #1f1f27;
    --pw-fg: #e7e7ee;
    --pw-muted: #a9a9b6;
    --pw-border: rgba(255,255,255,0.12);
    --pw-border-focus: #7c9cff;
    --pw-shadow-focus: 0 0 0 .25rem rgba(124,156,255,.15);
    --pw-invalid: #ff6b6b;
}

/* input-group birleşik görünüm */
.password-wrapper {
    background: var(--pw-fg);
    border: 1px solid var(--pw-border);
    border-radius: .75rem;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    /* yalnızca iç kontrollerin kenarlıklarını gizleyip kapsayıcıya bırakıyoruz */
    .password-wrapper .form-control,
    .password-wrapper .btn {
        border: none;
        background: transparent;
        color: var(--pw-fg);
        height: 44px;
        box-shadow: none !important;
    }

/* input padding; sağda buton olduğu için rahat yazım */
.password-input {
    padding-left: 14px;
    padding-right: 12px;
}

/* göz butonu – kare, merkezli ikon */
.password-toggle {
    width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--pw-border);
    cursor: pointer;
}

#btn-pass {
    color: var(--pw-bg);
}

.password-toggle i {
    font-size: 16px;
    opacity: .9;
}

.password-toggle:hover i {
    opacity: 1;
}

/* focus & invalid haller */
.password-wrapper:focus-within {
    border-color: var(--pw-border-focus);
    box-shadow: var(--pw-shadow-focus);
}

.input-validation-error,
.password-input.parsley-error {
    /* parsley veya tag helper invalid olduğunda kapsayıcıyı kırmızıya çekelim */
}

    .input-validation-error ~ .password-toggle,
    .password-input.parsley-error ~ .password-toggle {
        border-left-color: var(--pw-invalid);
    }

.password-input.parsley-error,
.password-wrapper:has(.password-input.parsley-error) {
    border-color: var(--pw-invalid) !important;
    box-shadow: 0 0 0 .2rem rgba(255,107,107,.12) !important;
}

/* placeholder rengi */
.password-input::placeholder {
    color: var(--pw-muted);
    opacity: .85;
}
/********************************************************************/

/* VerifyResetCode */

.verify-code-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.verify-code-card {
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(15,15,15,0.8);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    max-width: 560px;
    width: 100%;
    padding: 32px 32px;
}

@media screen and (max-width: 425px) {
    .verify-code-card {
        padding: 16px 16px;
    }
}


.header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

    .header-icon i {
        font-size: 2.5rem;
        color: #ff7a00;
    }

    .header-icon span {
        font-size: 1.5rem;
        font-weight: 700;
        color: #fff;
    }

.verify-code-card h2 {
    font-size: 1.875rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 12px 0;
    text-align: center;
}

.verify-code-card .description {
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 24px;
}

.masked-email {
    font-weight: 600;
    color: #ffb357;
}

.code-input-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 24px 0;
}

.code-input {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 8px;
    transition: all 0.2s;
}

    .code-input:focus {
        outline: none;
        border-color: #ff7a00;
        background-color: rgba(255,255,255,0.15);
        box-shadow: 0 0 0 0.2rem rgba(255,122,0,0.25);
    }

    .code-input::-webkit-inner-spin-button,
    .code-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.error-message {
    text-align: center;
    color: #ff4d4d;
    font-size: 0.875rem;
    margin: 16px 0;
    min-height: 21px;
}

.btn-verify {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(180deg,#ff8a00,#ff6000);
    color: #fff;
    border: none;
    border-radius: .7rem;
    box-shadow: 0 4px 12px rgba(255,96,0,.35);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: all 0.2s;
    margin: 16px 0;
}

    .btn-verify:hover {
        background: linear-gradient(180deg,#ff9500,#ff6a00);
    }

    .btn-verify:disabled {
        background: rgba(255,255,255,0.12);
        cursor: not-allowed;
        box-shadow: none;
    }

.resend-section {
    text-align: center;
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    margin: 16px 0;
}

.resend-link {
    color: #ff7a00;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

    .resend-link:hover {
        text-decoration: underline;
        color: #ff9500;
    }

.countdown-timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: rgba(255,255,255,0.85);
}

.countdown-box {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 700;
    color: #ffb357;
    min-width: 48px;
    text-align: center;
}

.footer-text {
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
    margin-top: 32px;
}

@media (max-width: 576px) {
    .code-input {
        width: 40px;
        height: 48px;
        font-size: 1.25rem;
    }

    .code-input-container {
        gap: 8px;
    }
}

/********************************************************************/