.auth-sub-wrapper{ height: 100%;}
.auth-sub-wrapper.auth-wrapper-left{ width: 50%; background-image: url('../../images/login_bg.webp'); background-size:cover; position: relative; }
.auth-sub-wrapper.auth-wrapper-left:after{ content: ""; z-index: 1; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(255 255 255 / 82%); }
.auth-sub-wrapper.auth-wrapper-left>.in-content{ position: relative; z-index: 2; }
.auth-sub-wrapper.auth-wrapper-left .image-container{ letter-spacing: -5px; position: relative; text-align: left; width: 110px; height: 90px; display: inline-block; margin-bottom: var(--set-margin-bottom); }
.auth-sub-wrapper.auth-wrapper-left .image-container:after{ content: ""; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; background: url('../../images/yillik_tecrube_ekstra.png') center center no-repeat; background-size: cover; z-index: 3; }
.auth-sub-wrapper.auth-wrapper-left .image-container span{ position: relative; left: -5px; top: -20px; color: var(--color-main); z-index: 1; font-size: 80px; font-weight: bold; -webkit-text-stroke: 1px var(--color-white); }
.auth-sub-wrapper.auth-wrapper-left .image-container span+span{ margin-left: -5px; z-index: 2; }
.auth-sub-wrapper.auth-wrapper-left .prompt-wrapper h2{ font-weight: 600; color: var(--color-second); }
.auth-sub-wrapper.auth-wrapper-left .desc-wrapper{ font-size: var(--base-font-size-16); color: var(--color-main-81); }
.auth-sub-wrapper.auth-wrapper-left .desc-wrapper-slider{ font-size: var(--base-font-size-16); color: var(--color-second); }
.auth-sub-wrapper.auth-wrapper-left .button-to-register{ max-width: 350px; margin: 15px auto 30px; display: block; width: 100%; color: var(--color-white); background-color: var(--color-main); border-color: var(--color-main); transition: var(--css-transition-ease); }
.auth-sub-wrapper.auth-wrapper-left .button-to-register:hover{background-color: var(--color-main-hover); border-color: var(--color-main-hover); }
.auth-sub-wrapper.auth-wrapper-left .slider-side{ display: block; width: 100%; overflow: hidden; position: relative;}
.auth-sub-wrapper.auth-wrapper-left .slider-side .auth-slider{ margin: 0 auto;  position: relative; width: 100%; white-space: nowrap; max-width: 80%;}
.auth-sub-wrapper.auth-wrapper-left .slider-side .auth-slider .slick-next:before{ content: "\ea61"; font-family: var(--font-family-tabler)}
.auth-sub-wrapper.auth-wrapper-left .slider-side .auth-slider .slick-prev:before{ content: "\ea60"; font-family: var(--font-family-tabler)}
.auth-sub-wrapper.auth-wrapper-left .slider-side .auth-slider .slick-prev:before,
.auth-sub-wrapper.auth-wrapper-left .slider-side .auth-slider .slick-next:before{ color: var(--color-main); }
.auth-sub-wrapper.auth-wrapper-left .slider-side .auth-slider .slider-item{ width: 50%; height: auto; padding: 10px; display: inline-flex;  }
.auth-sub-wrapper.auth-wrapper-left .slider-side .auth-slider .slider-item .si-inner{ border: 2px solid var(--color-main); position: relative; overflow: hidden; width: 100%; height: 100px; border-radius: var(--bs-border-radius); background-color: var(--color-white);  }
.auth-sub-wrapper.auth-wrapper-left .slider-side .auth-slider .slider-item .si-inner .image-elm{ background-position: center center; background-size: auto 35%; background-repeat: no-repeat; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 27px) }
.auth-sub-wrapper.auth-wrapper-left .slider-side .auth-slider .slider-item .si-inner .text-side{ padding: 3px; text-align: center; position: absolute; bottom: 0; left: 0; width: 100%; background-color: var(--color-main); color: var(--color-white); }
.auth-sub-wrapper.auth-wrapper-left .slider-side .auth-slider::-webkit-scrollbar { width: 0; display: none; }
.auth-sub-wrapper.auth-wrapper-left .slider-side .auth-slider::-webkit-scrollbar-track { box-shadow: none; display: none; border-radius: 0;}
.auth-sub-wrapper.auth-wrapper-left .slider-side .auth-slider::-webkit-scrollbar-thumb { background: none; display: none; border-radius: 0;}
.auth-sub-wrapper.auth-wrapper-left .slider-side .auth-slider::-webkit-scrollbar-thumb:hover { background: none; display: none }

.auth-sub-wrapper.auth-wrapper-right{ width: 50%; background: #f9f8f5; }
.auth-wrapper-right .auth-wrapper-inner{ width: 100%; height: 100%; display: grid; place-items: center; overflow-y: auto; overflow-x: hidden; position: relative; z-index: 100; }
.auth-wrapper-inner .auth-form-div{width: 446px; max-width: calc(100% - 80px); position: relative; z-index: 11; margin-left: auto; margin-right: auto; padding-top: 50px; padding-bottom: 50px;}
.auth-wrapper-inner .auth-form-head{ width: 100%; margin-bottom: 26px; }
.auth-wrapper-inner .auth-form-head .auth-form-head-top{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.auth-wrapper-inner .auth-form-head h2{ color: var(--color-main); font-size: 32px; font-style: normal; font-weight: 600; line-height: 125%; margin-bottom: 8px; }
.auth-wrapper-inner .auth-form-head p{ color: var(--color-main-81); }
.auth-wrapper-inner .auth-form-head p .phone-number{ font-weight: 600; }
.auth-wrapper-inner .auth-form-el{ width: 100%; margin-bottom: 24px; }
.auth-wrapper-inner .auth-form-el label{ font-size: 16px;}
.auth-wrapper-inner .auth-form-el .input-group{ position: relative; display: flex; align-items: center; width: 100%; }
.auth-wrapper-inner .auth-form-el .form-control{ flex-grow: 1; border: 1px solid var(--color-main-border); height: 46px; padding: 11px 16px 11px 48px; outline: 2px solid transparent; transition: .2s ease-in-out; border-radius: 0.375rem!important; }
.auth-wrapper-inner .auth-form-el .form-control:focus{ box-shadow: none; border-color: var(--color-main); caret-color: var(--color-main); }
.auth-wrapper-inner .auth-form-el .input-group i{ z-index: 5; color: rgba(118, 177, 23, .7); font-size: 20px; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
.auth-wrapper-inner .auth-form-el .form-control:focus+i{ color: var(--color-second); }
.auth-wrapper-inner .auth-form-el .input-group .password-toggle-icon{ z-index: 5; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); left: auto; right: 16px; }
.auth-wrapper-inner .auth-form-el .input-group .password-toggle-icon i{ left: 0; }
.auth-wrapper-inner .auth-form-el .form-control.is-invalid{ border-color: var(--bs-danger); }
.auth-wrapper-inner .auth-form-el .form-control.is-invalid+i+.password-toggle-icon{right: 30px;}
.auth-wrapper-inner .auth-form-el .checkbox-group{ margin-bottom: var(--set-margin-bottom); display: flex; align-items: center; justify-content: space-between;}
.auth-wrapper-inner .auth-form-el .checkbox-group input{ width: 20px; height: 20px; cursor: pointer; margin-right: 10px; border: 2px solid var(--color-main-border); background-color: transparent; margin-top: 1px;  }
.auth-wrapper-inner .auth-form-el .checkbox-group input:checked{ background-color: var(--color-main); border-color: var(--color-main); }
.auth-wrapper-inner .auth-form-el .checkbox-group input,
.auth-wrapper-inner .auth-form-el .checkbox-group label{ cursor: pointer}
.auth-wrapper-inner .auth-form-el .checkbox-group .forgot-password{ color: var(--color-main); font-size: var(--base-font-size-16) }
.auth-wrapper-inner .auth-form-el .checkbox-group .form-check{ margin-bottom: 0; }
.auth-wrapper-inner .auth-form-el .btn-auth{ padding: 10px 15px; width: 100%; border-color: var(--color-main); background-color: var(--color-main); display: block; }
.auth-wrapper-inner .auth-form-el .btn-auth:hover,
.auth-wrapper-inner .auth-form-el .btn-auth:active,
.auth-wrapper-inner .auth-form-el .btn-auth:focus{ background-color: var(--color-main-hover); border-color: var(--color-main-hover)}
.auth-wrapper-inner .login-type-wrapper{ z-index: 1; position: relative; border-radius: var(--bs-border-radius); background-color: #595958; }
.auth-wrapper-inner .login-type-wrapper:after{ content: ""; transition: var(--css-transition-ease); border-radius: var(--bs-border-radius); position: absolute; z-index: 2; background: var(--color-second); width: calc(50% - 10px); top: 5px; left: 5px; height: calc(100% - 10px)}
.auth-wrapper-inner .login-type-wrapper.with-sms:after{ left: calc(50% + 5px); }
.auth-wrapper-inner .login-type-wrapper .btn{ z-index: 3; padding: 14px; background-color: transparent; border-color: transparent; color: var(--color-white) }
.auth-wrapper-inner .auth-form-el .button-group .btn-auth{ width: calc(50% - 2px); display: inline-block;}
.auth-wrapper-inner .auth-form-el .button-group .btn-auth.warning{ background-color: var(--color-red); border-color: var(--color-red)  }
.auth-wrapper-inner .auth-form-el .button-group .btn-auth.go-back{ background-color: var(--bs-danger); border-color: var(--bs-danger) }
.auth-wrapper-inner .auth-form-el .checkbox-group.no-cursor{ margin-bottom: var(--set-margin-bottom-15) }
.auth-wrapper-inner .auth-form-el .checkbox-group.no-cursor .form-check{ display: flex; }
.auth-wrapper-inner .auth-form-el .checkbox-group.no-cursor label{ cursor: default; font-size: var(--base-font-size-14); color: var(--color-main-81); }
.auth-wrapper-inner .firm-list-group{ width: 100%; position: relative; height: auto; margin-bottom: var(--set-margin-bottom-15);}
.auth-wrapper-inner .firm-list-group .left-side{ padding-right: var(--set-margin-bottom-15); }
.auth-wrapper-inner .firm-list-group .avatar-side{ border-radius: var(--bs-border-radius); display: flex; width: 100%; height: 100%; background-color: var(--color-second); color: var(--color-white); justify-content: center; align-items: center; font-size: 3em; }
.auth-wrapper-inner .firm-list-group .firm-list-inner{ padding: 15px; display: flex; background-color: var(--color-white); border: 1px solid var(--color-main-border); border-radius: var(--bs-border-radius)  }
.auth-wrapper-inner .firm-list-group .firm-list-inner span{ display: block; width: 100%;}
.auth-wrapper-inner .firm-list-group .firm-list-inner span.account_text{ font-size: var(--base-font-size-12); color: var(--color-main-81) }
.auth-wrapper-inner .firm-list-group .firm-list-inner span.firm_account_name{ font-weight: 600; }
.auth-wrapper-inner .btns-side-inner .form-label{ font-weight: 600; font-size: var(--base-font-size-12); margin-bottom: 0; }
.auth-wrapper-inner .btns-side-inner .form-label.pending-status{ color: var(--bs-danger) }
.auth-wrapper-inner .btns-side-inner .date{ font-size: var(--base-font-size-12); color: var(--color-main-81); display: block; width: 100%; }
.auth-wrapper-inner .btns-side-inner a.btn{ margin-top: 5px; font-size: var(--base-font-size-14); font-weight: 600; background-color: var(--color-main); border-color: var(--color-main); }
.auth-wrapper-inner .auth-form-el .input-group.with-tel-code .form-control{ padding-left: 120px; position: relative; z-index: 1;}
.auth-wrapper-inner .auth-form-el .input-group.with-tel-code .btn-tel-no{ z-index: 2; position: absolute; width: 70px; left: 45px; display: inline-flex; flex-direction: column; padding: 0; border: 0; height: 46px; justify-content: center; align-items: start;}
.auth-wrapper-inner .auth-form-el .input-group.with-tel-code .btn-tel-no::after{ position: absolute; right: 0; }
.auth-wrapper-inner .auth-form-el .input-group.with-tel-code .dropdown-menu{ border-color: var(--color-main-border); }
.auth-wrapper-inner .auth-form-el .input-group.with-tel-code .dropdown-menu li a{ display: flex; flex-direction: column;}
.auth-wrapper-inner .auth-form-el .input-group.with-tel-code .btn-tel-no .info,
.auth-wrapper-inner .auth-form-el .input-group.with-tel-code .dropdown-menu li a .info{ text-align: left; font-size: 10px; line-height: 10px; color: var(--color-main-81); width: 56px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-wrapper-inner .auth-form-el .input-group.with-tel-code .dropdown-menu li a .info{ width: 100%}


/* sms page boxes */
.input-container { position: relative; margin-bottom: 20px; }
.real-input { position: absolute; left: -9999px; opacity: 0; width: 1px; height: 1px; z-index: -1; }
.visual-inputs { display: flex; justify-content: center; gap: 10px; position: relative; cursor: text; }
.visual-box { width: 50px; height: 50px; border: 2px solid #d1d5db; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; background: white; transition: all 0.2s ease; position: relative; user-select: none; }
.visual-box.active { border-color: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1); background: #f0fdf4; }
.visual-box.filled { border-color: #4ade80; background: #f0fdf4; color: #16a34a; }
.visual-box.error { border-color: #ef4444; background: #fef2f2; animation: shake 0.3s ease; }
.visual-box.cursor::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 24px; background: #4ade80; animation: blink 1s infinite; }
.mobile-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; border: none; outline: none; font-size: 18px; letter-spacing: 32px; text-indent: 12px; color: transparent; caret-color: transparent; cursor: default; z-index: 1; }
.mobile-overlay:focus { outline: none; caret-color: transparent; }
.real-input { position: absolute; left: -9999px; opacity: 0; width: 1px; height: 1px; z-index: -1; caret-color: transparent; }
.real-input:focus { caret-color: transparent; }
.progress-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 30px; }
.progress-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5e7eb; transition: all 0.3s ease; }
.progress-dot.filled { background: #4ade80; transform: scale(1.2); }
.buttons { display: flex; gap: 12px; }
/*.btn { flex: 1; padding: 14px 20px; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden; }*/
/*.btn:disabled { opacity: 0.5; cursor: not-allowed; }*/
/*.btn-back { background: #ef4444; color: white; }*/
/*.btn-back:hover:not(:disabled) { background: #dc2626; transform: translateY(-1px); }*/
/*.btn-submit { background: #4ade80; color: white; }*/
/*.btn-submit:hover:not(:disabled) { background: #22c55e; transform: translateY(-1px); }*/
/*.btn-submit:disabled { background: #9ca3af; }*/
.loading { display: none; width: 20px; height: 20px; border: 2px solid transparent; border-top: 2px solid white; border-radius: 50%; animation: spin 1s linear infinite; }

@media (max-width: 480px) {
    .visual-box { width: 45px; height: 45px; font-size: 16px; }
    .visual-inputs { gap: 8px; }
    .mobile-overlay { letter-spacing: 28px; text-indent: 10px; }
}

@supports (-webkit-touch-callout: none) {
    .mobile-overlay { font-size: 16px; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}


@media screen and (min-width: 992px) {
    #kvkk_modal .modal-dialog{ max-width: 900px }
}

@media screen and (max-width: 992px) {
    .auth-wrapper{ flex-direction: column; background-color: #f9f8f5 }
    .auth-sub-wrapper.auth-wrapper-left{ width: 100%; height: 230px; }
    .auth-sub-wrapper.auth-wrapper-right{ width: 100%; height: calc(100% - 230px); }
    .auth-sub-wrapper.auth-wrapper-left .slider-side{ display: none; }
    .auth-sub-wrapper.auth-wrapper-left .prompt-wrapper h2{ font-size: var(--base-font-size-16); }
    .auth-sub-wrapper.auth-wrapper-left .image-container span{ font-size: 58px;}
    .auth-sub-wrapper.auth-wrapper-left .image-container{ margin-bottom: 5px; width: 70px; height: 58px; }
    .auth-sub-wrapper.auth-wrapper-left .desc-wrapper{ font-size: var(--base-font-size-14); }
    .auth-wrapper-inner .auth-form-head .auth-form-head-top{ margin-bottom: 15px;}
    .auth-wrapper-inner .auth-form-head .auth-form-head-top a img{ max-width: 150px; }
    .auth-wrapper-inner .auth-form-head h2{ font-size: 18px; }
    .auth-wrapper-inner .auth-form-head p{ margin-bottom: 0;}
    .auth-wrapper-inner .auth-form-head{ margin-bottom: 10px;}
    .auth-wrapper-inner .auth-form-div{ padding-top: 10px; padding-bottom: 10px;}

}

@media screen and (max-width: 460px) {
    .auth-wrapper-inner .auth-form-div{ max-width: 300px; }
    .auth-sub-wrapper.auth-wrapper-left{ width: 100%; height: 180px; }
    .auth-sub-wrapper.auth-wrapper-right{ width: 100%; height: calc(100vh - 200px); }
    .auth-wrapper-inner .login-type-wrapper .btn{ font-size: var(--base-font-size-14); }
    .auth-wrapper-inner .auth-form-el label{ margin-bottom: 5px; font-size: var(--base-font-size-14); }
    .auth-wrapper-inner .auth-form-el .form-control{ height: 36px; font-size: var(--base-font-size-14); }
    .auth-sub-wrapper.auth-wrapper-left .image-container{ display: none; }
    .auth-sub-wrapper.auth-wrapper-left .button-to-register{ margin: 5px auto; }
    .auth-wrapper-inner .firm-list-group .left-side{ display: none; }
    .auth-wrapper-inner .firm-list-group .text-side,
    .auth-wrapper-inner .firm-list-group .buttons-side{ width: 50%; }
    .auth-wrapper-inner .btns-side-inner a.btn{ padding: 5px 7px; font-size: var(--base-font-size-12)}
    .auth-wrapper-inner .firm-list-group .firm-list-inner span{ font-size: var(--base-font-size-12) }
    body{ background-color: #f9f8f5; }
    .auth-wrapper-right .auth-wrapper-inner{ place-items: self-start}
}