@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
:root { --main-color: #14294C; --main-color-hover: #4A76FC; --main-font-family: 'Urbanist'; }
* { outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/*reset Css*/
body { font-family: 'Urbanist', sans-serif; margin: 0; padding: 0; /*font-size: 0.8rem;*/overflow:hidden; }
input { font-family: 'Urbanist', sans-serif; }
a{text-decoration:none;}
ol, ul { padding: 0px; margin: 0px; list-style: none; }
.ticiContainerPartner{ width: 100%; max-width: 100%; padding: 0px 40px; }
#loginPage { width: 100%; height: 100vh; background-image: url('/img/newloginbg.png'); background-repeat: no-repeat; background-size: cover; background-position: center; }
.loginWrapper { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding-left: 20%; }
.loginBox { width: 100%; max-width: 740px; min-height: 460px; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 4px 50px 0px #4A76FC80; border-radius: 24px; padding: 60px; }
.loginLogo { width: 100%; text-align: center; margin-bottom: 40px; display: flex;justify-content:center; align-items: center; gap: 10px; font-weight: 700; font-size: 40px; color: #14294C ;}
.loginLogo img { margin: 0; }
.inputGroup { }
.inputGroup input { }
.form-wrapper { width: 100%; }
.form-group { position: relative; margin-bottom:16px;float:left;width:100%; }
.form-group .form-label, .label-small { font-weight: 600; font-size: 15px; line-height: 150%; color: #14294C ;margin-bottom:6px;display:block;float:left;width:100%;}
.form-input, .input-main { position: relative; padding: 5px 16px 5px 16px; width: 100%; outline: 0; transition: box-shadow 150ms ease-out; border: 1px solid #DDE2E8; border-radius: 16px; height: 51px; font-size: 18px; letter-spacing: 0; color: #4A5568; font-weight: 500; box-shadow: 0px 1px 2px 0px #0000000D; }
.form-input:focus { box-shadow: none; }
.form-input.filled { box-shadow: none; }
.form-input::placeholder { letter-spacing: -0.32px; color: #A1A9B7; }
.focused .form-input { border-color: #192849; }
.containerCheck { display: flex; position: relative; padding-left: 0; margin-bottom: 16px;float:left;width:100%; cursor: pointer; -moz-user-select: none; -ms-user-select: none; user-select: none; letter-spacing: 0; color: #14294C; font-size: 14px; font-weight: 400; line-height: 22px; font-family: 'Urbanist'; flex-direction: row-reverse; justify-content: start; gap: 8px; }
.containerCheck input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark {height: 20px; width: 20px; background-color: #fff; border: 1px solid #DDE2E8; border-radius: 5px;display:flex;align-items:center;justify-content:center; }
.containerCheck:hover input ~ .checkmark { /* background-color: #15284B; */ }
.containerCheck input:checked ~ .checkmark { background-color: var(--main-color-hover); border-color: var(--main-color-hover); }
.checkmark:after { content: ""; position: absolute; display: none; }
.containerCheck input:checked ~ .checkmark:after { display: block; }
.containerCheck .checkmark:after, span.checkmark.newcheck:after { content: '\f00c'; font-family: 'FontAwesome'; color: #fff; font-size: 12px; font-weight: 300;display:block; }
.loginButton, .btn-main {float:left;width:100%; font-family: 'Urbanist'; width: 100%; border: 0; background: var(--main-color) 0% 0% no-repeat padding-box; border-radius: 16px; line-height: 49px; letter-spacing: 0; color: #FFFFFF; font-size: 18px; transition: all .4s ease; cursor: pointer; display: block; text-align: center; font-weight: 600; padding:0;}
.loginButton:hover, .btn-main:hover{ background: var(--main-color-hover) 0% 0% no-repeat padding-box; }
.closeLabel{ position: absolute; right: 16px; bottom: 17px; cursor: pointer; }
.showButton{ position: absolute; right: 16px; bottom: 17px; }

.loginTabWrapper { float: left; width: 100%; display: flex; overflow: hidden;padding-top:20px; }
.loginTabWrapper > div { min-width: 100%; transition:transform .8s; transform: translateX(-100%); float: left;opacity:0;visibility:hidden; }
.loginTabWrapper > div.active { transform: translateX(0); opacity:1;visibility:visible;}
.loginTabWrapper > div.dealerSaveBox { transform: translateX(100%); }
.loginTabWrapper > div.dealerSaveBox.active { transform: translateX(-100%); }
.loginTabHead { float: left; width: 100%; display: flex; align-items: center;margin:0; }
.loginTabBtn { width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; height: 66px; font-weight: 600; font-size: 18px; line-height: 130%; color: #9CA3AF; font-family: var(--main-font-family); cursor: pointer;position:relative; }
.loginTabBtn.active { color: #14294C; }
.loginTabBtn:after { content: ''; width: 0; height: 1px; background: #14294C ;transition:1s;left:0;bottom:0;position:absolute;}
.loginTabBtn.active:after{width:100%;}
.loginTabBtn:nth-child(2):after { left: auto; right: 0; }
.intl-tel-input { float: left; width: 100%; }
/* Basit, temiz stil (Ticimax benzeri) */
.bayi-card { max-width: 100%; background: #fff; margin: auto;float:left;width:100%; }
.d-none { display: none !important; }
.bayi-card h1 { color: #000000; font-weight: 500; font-size: 22px; line-height: 130%; margin: 12px 0; }
.bayi-card small { font-weight: 400; font-size: 18px; line-height: 130%; color: #3B4555; margin: 0 0 16px; display: block; }
body .intl-tel-input .selected-flag { padding-left: 16px; width: 50px; }
body .intl-tel-input .flag-container:hover .selected-flag { border-radius: 16px 0 0 16px; }
body .intl-tel-input input, .intl-tel-input input[type=text], body .intl-tel-input input[type=tel] { padding-left: 56px !important; }
/* OTP */
.otp-container { display: flex; gap: 24px; justify-content: center; margin: 0 0 16px;float:left;width:100%; }
.otp-input { width: 100%; aspect-ratio: 1; text-align: center; font-size: 18px; border-radius: 20px; border: 1px solid #DDE2E8; font-weight: 500; color: #14294C; }
.otp-input:focus { outline: none; border-color: #4c6fff; box-shadow: 0 0 8px rgba(76,111,255,0.12); }
.step span { font-size: 13px; margin-top: 6px; color: #8a8fa3; }
.step.active span { color: #2b6eef; font-weight: 600; }
.step.done span { color: #1aa156; font-weight: 600; }
.circle { width: 32px; height: 32px; border-radius: 50%; background: #e8eef9; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.step.active .circle { background: #2b6eef; color: #fff; }
.step.done .circle { background: #1aa156; color: #fff; }
.step .check { font-size: 20px; }
.line { width: 100%; height: 2px; background: #e4e8f3; }
.step-body { margin-top: 20px; }
.input-main:focus { border-color: #2b6eef; }
.step-buttons { display: flex; justify-content: space-between; margin-top: 15px; }
.btn-outline { border: 2px solid #2b6eef; background: #fff; color: #2b6eef; padding: 10px 26px; border-radius: 10px; font-size: 15px; cursor: pointer; }
.btn-outline:hover { background: #eef3ff; }
.stepper { display: flex; justify-content: space-between; margin-bottom: 30px;align-items:center;gap:16px; }
.step-circle { font-size: 14px; width: 32px; height: 32px; margin: auto; border-radius: 50%; background: #D1D5DB; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; transition: 0.3s; color: #3B4555;margin:0; }
.step-circle.active { background: #4A76FC;color:#fff; }
.step-circle.done { background: #28a745; }
.back-btn { cursor: pointer; border: 1px solid #C9D8FF !important; background-color: #14294C05 !important; color: #3B4555 !important; transition: .3s !important; padding: 0; border-radius: 16px;width:100%;font-size:15px;font-weight:600;font-family:'Urbanist'; }
.back-btn:hover { border-color: var(--main-color) !important; color: var(--main-color) !important; background-color: #14294C05 !important; }
.button-container { display: flex;margin-top:24px; float:left;width:100%;gap:24px;}
.resend-link { float: left; width: 100%; text-align: center; margin: 36px 0 0; font-family: Urbanist; font-size: 18px; line-height: 130%; color: #4A5568; }
.resend-link a, .resend-link span { color: #4A76FC; opacity: 1 !important; font-weight: 500 !important; }
.loginTrueIcon { text-align: center; margin: 0; display: block; }
h3.validatetitle { text-align: center; font-family: Urbanist; font-weight: 600; font-size: 28px; line-height: 130%; color: #3CBF61; margin: 16px 0; display: block; }
div#step4 p, div#step6 p { display: block; font-family: Urbanist; font-weight: 400; font-size: 18px; line-height: 130%; text-align: center; color: #4A5568; margin: 0 0 12px; }
body:has(div#step4:not(.d-none)) .loginTabHead,
body:has(div#step5:not(.d-none)) .loginTabHead,
body:has(div#step6:not(.d-none)) .loginTabHead { display: none; }
.warning-text { line-height: 20px; margin-top: 10px; color: red; }
.step { display: flex; align-items: center; gap: 8px; font-family: Urbanist; font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0px; vertical-align: middle; color: #3B4555; }
.step:has(.step-circle.active) { color: #4A76FC }
.stepBar { float: left; width: 100%; background: #D1D5DB; height: 1px; flex: 1; }
.stepBar.active,.stepper:has(.step-circle.done) .stepBar { background: #4A76FC; }
.formFlex { float: left; width: 100%; display: flex; align-items: start; gap: 24px; }
.formFlex > div { width: 100%; }

body .select2-container { cursor: pointer; }
body .select2-selection--single { padding: 0; height: 44px; line-height: 42px; border: 1px solid #DDE2E8; border-radius: 16px; }
body .select2-selection--single .select2-selection__rendered { padding: 0 12px !important; font-family: Urbanist; font-weight: 500; font-size: 13.3px; line-height: 150%; color: #4A5568; }
body .select2-selection--single:not([class*=bg-]) { width: 100%; }
body .select2-container--focus .select2-selection--single:not([class*=bg-]):not([class*=border-]), body .select2-container--open .select2-selection--single:not([class*=bg-]):not([class*=border-]) { border-color: var(--main-color-hover); box-shadow: none; }
body .select2-selection--single .select2-selection__arrow:after { font-size: 20px; color: #14294C; font-weight: 300; right: 12px; }
.card-wrapper > div { float: left; width: 100%; }
.card-wrapper { float: left; width: 100%; }
.bayi-card > div { float: left; width: 100%; }
body .select2-dropdown,body .intl-tel-input .country-list { box-shadow: 0px 4px 6px -4px #0000001A; border: 1px solid #E5E7EB; border-radius: 16px; padding: 12px; }
body .select2-search--dropdown { padding: 0; margin: 0 0 12px; }
body .select2-search--dropdown:after { left: 10px; }
body .select2-search--dropdown .select2-search__field { padding-left: 20px; }
body .select2-results > .select2-results__options { padding: 0 10px 0 0; }
body .select2-results > .select2-results__options::-webkit-scrollbar, body .intl-tel-input .country-list::-webkit-scrollbar { width: 6px; }
body .select2-results > .select2-results__options::-webkit-scrollbar-track, body .intl-tel-input .country-list::-webkit-scrollbar-track { background: #F4F6F8; border-radius: 10px; }
body .select2-results > .select2-results__options::-webkit-scrollbar-thumb, body .intl-tel-input .country-list::-webkit-scrollbar-thumb { background: #8693A6; border-radius: 10px; }
body .select2-container--open .select2-dropdown--below:not([class*=bg-]) { border-radius: 0 !important; top: 0; }
body .select2-results__option.select2-results__option--highlighted { background: #4A76FC; color: #fff; }
body .select2-results__option[aria-selected=true] { background: #14294C; }
textarea#signupadres { padding-top: 13px; width: 100% !important; min-height: 51px; }
.btn-home { display: flex; justify-content: center; align-items: center; gap: 12px; }
body:has(.dealerSaveBox.form-wrapper.active) .loginTabWrapper:has(ul.country-list.hide) { overflow: hidden; }
body:has(.dealerSaveBox.form-wrapper.active) .loginTabWrapper:has(ul.country-list:not(.hide)) { overflow: visible; }

.loginBox { max-height: 90%; overflow: auto; }
.loginBox::-webkit-scrollbar { width: 0; height: 0; }
div#step5 .form-input, div#step5 .input-main { height: 44px; font-size: 13.3px; }
textarea#signupadres { min-height: 44px; }

div#step5:not(.d-none) { }

.loginBox:has(div#step5:not(.d-none)) .loginBack { display: flex !important; }
.loginBack { font-family: Urbanist; font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0px; vertical-align: middle; color: #111827; transition: .5s; gap: 24px; margin: 0 0 32px; }
/*.loginBack:before { content: '\f060'; font-family: 'FontAwesome'; font-size: 16px; }*/
.loginBox:has(div#step5:not(.d-none)) .loginLogo { margin: 0 0 16px; }
/*.loginBack:hover { gap: 12px; }*/
.taxNoInfo { color: var(--main-color-hover); float: left; width: 100%; display: flex; align-items: start; gap: 5px; text-align: left; font-weight: 500; margin-top: 8px; }
.taxNoInfo img { margin-top: -2px; }

.form-group:has(.newcheck) > div:not(.button-container) { display: flex; gap: 5px; }
.form-group:has(.newcheck) > div:not(.button-container) > input { width: 20px; height: 20px; margin: 0; opacity: 0; z-index: 2; position: relative; cursor: pointer; }
span.checkmark.newcheck { position: absolute; left: 0; top: 0; }
.form-group:has(input:checked) span.checkmark.newcheck { background-color: var(--main-color-hover); border-color: var(--main-color-hover); }

.loginTrueIcon img { margin: 0 auto; }
textarea#signupadres { min-height: 80px !important; }
body .select2-container--default .select2-search--dropdown { }
div#agreementModalContent h1 { font-size: 24px; font-weight: 600; color: var(--main-color); position: absolute; top: 34px; }
div#agreementModal button.close { font-size: 0; line-height: 26px; display: flex; }
div#agreementModal button.close:after { content: '\f00d'; font-family: 'FontAwesome'; font-size: 20px; font-weight: 300; line-height: 26px; }
div#agreementModalContent > div > p { font-weight: 500; color: var(--main-color); text-align: left !important; }
div#agreementModalContent .section p { line-height: 1.5; }
@media screen and (max-width:1024px) {
    .loginWrapper { justify-content: center; padding: 0; }
    .loginLogo img { max-width: 100px; }
    .loginLogo { font-size: 15px; margin: 20px 0; }
    .loginBox { width: 90%; padding: 12px; border-radius: 12px;min-height:auto; }
    .loginTabBtn { height: 40px; font-size: 15px; }
    .form-group .form-label, .label-small { font-size: 13px; }
    .form-group { margin: 0 0 12px; }
    .containerCheck { margin: 0 0 12px; }
    .form-input, .input-main { height: 44px; border-radius: 12px; font-size: 14px;padding:5px 12px; }
    .showButton { bottom: 12px; }
    .bayi-card h1 { font-size: 16px; margin: 6px 0; }
    .bayi-card small { font-size: 14px; margin: 0 0 12px; }
    .button-container { margin-top: 8px;gap:12px; }
    .loginButton, .btn-main { line-height: 42px; border-radius: 12px; font-size: 14px; }
    .otp-container { gap: 6px; margin: 0 0 12px; }
    .otp-input { font-size: 14px; border-radius: 12px; }
    .back-btn { border-radius: 12px; font-size: 14px; }
    .resend-link { margin: 12px 0 0; font-size: 14px; }
    h3.validatetitle { font-size: 20px; margin: 12px 0; }
    .loginTrueIcon img { max-width: 40px; }
    div#step4 p, div#step6 p { font-size: 14px; }
    .step > div:last-child { display: none; }
    .stepper { gap: 12px; margin: 0 0 24px; }
    .formFlex { flex-wrap: wrap; gap: 0; }
    body .select2-selection--single .select2-selection__rendered { padding: 0 12px !important; font-size: 13px; }
    body .select2-selection--single { height: 44px; line-height: 44px; border-radius: 12px; }
    body .select2-selection--single .select2-selection__arrow:after { right: 12px; font-size: 17px; }
    textarea#signupadres { min-height: 44px; padding-top: 12px; }
    body .intl-tel-input .flag-container:hover .selected-flag{border-radius:12px 0 0 12px;}
    body .intl-tel-input .selected-flag { padding-left: 12px; }
    .loginBack { margin: 0 0 12px; gap: 16px; font-size: 15px; }
    .loginBack:before { font-size: 13px; }
    .loginBack:hover { gap: 6px; }
    .loginBox:has(div#step5:not(.d-none)) .loginLogo { margin: 15px 0 0; }
}
@media screen and (max-width:767px) {
    div#agreementModalContent h1 { font-size: 16px; top: 12px; line-height: 27px; }
    div#agreementModal .panel-body { padding: 0 12px; }
    div#agreementModalContent > div > p { font-size: 13px; }
}
@media screen and (max-width:450px) {
}