* {
    font-family: "Poppins";
}

body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #EB5C18;
    background: -webkit-linear-gradient(45deg, #4158d0, #EB5C18);
    background: -o-linear-gradient(45deg, #4158d0, #EB5C18);
    background: -moz-linear-gradient(45deg, #4158d0, #EB5C18);
    background: linear-gradient(45deg, #4158d0, #EB5C18);
    height: 100vh;
}

.head {
    text-align: center;
    margin-bottom: 20px;
    /* Opsiyonel: Başlık ile diğer içerik arasına boşluk ekler */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    /* Gölge efekti: yatay ofset, dikey ofset, bulanıklık, renk */

}

.head h2 {
    font-size: 24px;
    color: #333;
    font-weight: 600;
    /* Kalın font */
    text-transform: uppercase;
    margin-bottom: 0%;
    /* Tüm harfleri büyük harfe çevir */
}

#error-message {
    text-align: center;
    color:#EB5C18;
    font-size: 13px;
}

.screen-1 {
    background: #f1f7fe;
    padding: 3%;
    display: flex;
    flex-direction: column;
    border-radius: 30px;
    box-shadow: 0 0 0.5em #e6e9f9;
    gap: 1em;
    align-items:flex;
}

.screen-1 .logo {
    align-self: center;
    width: 60%;
    height: 60%;
}


.screen-1 .email {
    background: white;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    padding: 3%;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    border-radius: 20px;
    color: #4d4d4d;
    margin: 0%;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.screen-1 .email input {
    outline: none;
    border: none;
    width: 80%;
}

.screen-1 .email input::-moz-placeholder {
    color: black;
    font-size: 0.9em;
}

.screen-1 .email input:-ms-input-placeholder {
    color: black;
    font-size: 0.9em;

}

.screen-1 .email input::placeholder {
    color: black;
    font-size: 0.9em;
    opacity: 0.5;
}

.screen-1 .email ion-icon {
    color: #4d4d4d;
}

.screen-1 .password {
    background: white;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    padding: 3%;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    border-radius: 20px;
    color: #4d4d4d;
    margin: 0%;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    /* Gölge efekti: yatay ofset, dikey ofset, bulanıklık, renk */

}

.screen-1 .password input {
    outline: none;
    border: none;
    margin-right: auto;
    font-size: 0.9em;
    opacity: 0.5;
    width: 80%;

}

.screen-1 .password input::-moz-placeholder {
    color: black;
    font-size: 0.9em;
}

.screen-1 .password input:-ms-input-placeholder {
    color: black;
    font-size: 0.9em;
}

.screen-1 .password input::placeholder {
    color: black;
    font-size: 0.9em;
    opacity: 0.5;
}

.screen-1 .password ion-icon {
    color: #4d4d4d;
    margin-bottom: 1%;
    margin-right: 2%;
}

.screen-1 .password .sec-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.screen-1 .password input[type="password"] {
    flex: 1;
}

.screen-1 .password .show-hide {
    position: relative;
    cursor: pointer;
}

.screen-1 .login {
    padding: 1em;
    background: #3e4684;
    color: white;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    margin-top: 1.5em;
}

.screen-1 .footer {
    display: flex;
    font-size: 0.7em;
    color: #5e5e5e;
    gap: 14em;
    padding-bottom: 10em;
}

.screen-1 .footer span {
    cursor: pointer;
}

button {
    cursor: pointer;
}