*{ margin: 0; padding: 0; box-sizing: border-box;}

html, body{ min-height: 100%;}

body{ background-color: #edf0f2; font-family: 'Rubik', sans-serif; padding: 50px 0;}

.mb-0{ margin-bottom: 0px !important;}
.mb-1{ margin-bottom: 5px !important;}
.mb-2{ margin-bottom: 10px !important;}
.mb-3{ margin-bottom: 15px !important;}
.mb-4{ margin-bottom: 20px !important;}
.mb-5{ margin-bottom: 25px !important;}
.mb-6{ margin-bottom: 30px !important;}
.mb-7{ margin-bottom: 35px !important;}
.mb-8{ margin-bottom: 40px !important;}
.mb-9{ margin-bottom: 45px !important;}
.mb-10{ margin-bottom: 50px !important;}
.mt-0{ margin-top: 0px !important;}
.mt-1{ margin-top: 5px !important;}
.mt-2{ margin-top: 10px !important;}
.mt-3{ margin-top: 15px !important;}
.mt-4{ margin-top: 20px !important;}
.mt-5{ margin-top: 25px !important;}
.mt-6{ margin-top: 30px !important;}
.mt-7{ margin-top: 35px !important;}
.mt-8{ margin-top: 40px !important;}
.mt-9{ margin-top: 45px !important;}
.mt-10{ margin-top: 50px !important;}

/* NOTIFICATION */
#notice-container{ position: fixed; right: 20px; top: 60px; z-index: 30; display: flex; flex-direction: column; gap: 7px;}
#notice-container > div{ opacity: 0; transform: translateY(-100px); transition: all .5s ease; position: relative; overflow: hidden; max-width: 300px; display: flex; align-items: center; gap: 10px; padding: 10px 10px 15px; border-radius: 3px 3px;}
#notice-container > div.go{ transition: all .7s ease; transform: translateX(100%) !important; opacity: 0 !important;}
#notice-container > div.active{ opacity: 1; transform: translateY(0);}
#notice-container > div p{ font-size: 12px; font-weight: 600;}
#notice-container > div span{ cursor: pointer; font-size: 20px; height: 20px; width: 20px; background-color: /*#21b621*/ transparent; border-radius: 50%; /*padding-left: 3.8px;*/ text-align: end; line-height: 1.1;}
#notice-container > div .timer{ position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; transition: all 3s linear;}
#notice-container > div.time .timer{ width: 0px;}

#notice-container > div.success{ background-color: #7ce456; color: #002000;}
#notice-container > div.success span{ color: #0f3700;}
#notice-container > div.success .timer{ background-color: #185b00;}
#notice-container > div.warning{ background-color: #dfe456; color: #1d2000;}
#notice-container > div.warning span{ color: #373500;}
#notice-container > div.warning .timer{ background-color: #757100;}
#notice-container > div.danger{ background-color: #e45656; color: #200000;}
#notice-container > div.danger span{ color: #370000;}
#notice-container > div.danger .timer{ background-color: #6a0000;}


.f-c{ display: flex; align-items: center; gap: 15px; justify-content: center;}
.f-c > button{ margin: 0;}
.f-c > button{ margin: 0;}

.seller-form{ padding: 30px; border-radius: 10px; background-color: white; width: calc(100% - 20px); max-width: 1000px; margin: 0 auto;}
.seller-form > form{}
:where(.seller-form, .c-form) h1{ font-size: 23px; margin-bottom: 30px; color: #042736; font-weight: 600;}
:where(.seller-form, .c-form) h2{ font-size: 19px; margin-bottom: 30px; color: #042736; font-weight: 600;}
:where(.seller-form, .c-form) h2 + p{ font-size: 13px; color: #495057; font-weight: 400;}
:where(.seller-form, .c-form) h3{ font-size: 14px; margin-bottom: 30px; color: #042736; font-weight: 500;}
:where(.seller-form, .c-form) h3 + p{ font-size: 12px; color: #495057; font-weight: 400;}
:where(.seller-form, .c-form) ._1{ display: grid; grid-template-columns: 1fr; gap: 10px 30px;}
:where(.seller-form, .c-form) ._2{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px;}
:where(.seller-form, .c-form) ._3{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 30px;}
:where(.seller-form, .c-form) .c-input{ position: relative;}
:where(.seller-form, .c-form) .c-input.disabled > div :where(input, select){ background-color: #f1f2f4; pointer-events: none;}
:where(.seller-form, .c-form) .c-input label{ margin-bottom: 5px; display: inline-block; color: #6e7787; font-size: 12px; font-weight: 500; line-height: 1.45;}
:where(.seller-form, .c-form) .c-input > div{ padding: 1px; overflow: hidden; position: relative;}
:where(.seller-form, .c-form) .c-input > div::after{ transition: all .2s ease; opacity: 0; pointer-events: none; color: #b80a0a; font-size: 18px; content: '\f00d'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); right: -15px;}
:where(.seller-form, .c-form) .c-input.textarea > div::after{ transform: translateY(0); top: 10px;}
:where(.seller-form, .c-form) .c-input > div :where(input, select, textarea){ transition: all .2s ease; outline: 1px solid #d5d9e1; height: 40px; color: #495057!important; padding: 11px 40px 11px 15px; font-size: 14px; width: 100%; border: none; border-radius: 5px;}
:where(.seller-form, .c-form) .c-input.select > div::before{ content: '\f107'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; display: inline-block; position: absolute; top: 50%; right: 15px; color: #495057; transform: translateY(-50%);}
:where(.seller-form, .c-form) .c-input > div select{ -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: '';}
:where(.seller-form, .c-form) .c-input > div :where(input, textarea)::placeholder{ opacity: .8;}
:where(.seller-form, .c-form) .c-input > div textarea{ height: 80px; resize: none; font-family: inherit;}
:where(.seller-form, .c-form) .c-input.error > div::after{ right: 15px; opacity: 1;}
:where(.seller-form, .c-form) .c-input.select.error > div::after{ right: 35px; opacity: 1;}
:where(.seller-form, .c-form) .c-input.error > div :where(input, select, textarea){ outline-color: #b80a0a;}
:where(.seller-form, .c-form) .c-input .err-txt{ margin-top: 1px; display: block; transition: all .2s ease; opacity: 0; color: #b80a0a; font-size: 12px;}
:where(.seller-form, .c-form) .c-input .info-txt{ margin-top: 3px; line-height: 1.2; display: inline-block; transition: all .2s ease; color: #5a636d; font-size: 11px;}
:where(.seller-form, .c-form) .c-input.error .err-txt{ opacity: 1;}
:where(.seller-form, .c-form) .c-input.approved label{ color: #08c208;}
:where(.seller-form, .c-form) .c-input.approved > div::before{ width: 17px; height: 17px; font-size: 12px; background-color: #08c208; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: white; content: '\f00c'; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-family: 'FONT AWESOME 5 FREE'; font-weight: 900;}
:where(.seller-form, .c-form) .c-input.approved > div :where(input, select, textarea){ outline-color: #08c208;}
:where(.seller-form, .c-form) .c-input.waiting label{ color: #ef9527;}
:where(.seller-form, .c-form) .c-input.waiting label + a{ position: absolute; right: 0; top: 3px; font-size: 13px; font-weight: 500; text-decoration: none; color: #d47500;}
:where(.seller-form, .c-form) .c-input.waiting label + a:hover{ text-decoration: underline;}
:where(.seller-form, .c-form) .c-input.waiting > div::before{ font-size: 17px; color: #ef9527; content: '\f1d8'; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-family: 'FONT AWESOME 5 FREE'; font-weight: 900;}
:where(.seller-form, .c-form) .c-input.waiting > div :where(input, select, textarea){ outline-color: #d17e18;}


.seller-form .bottom{ display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 30px;}
.seller-form .bottom .cb{ border-radius: 7px; margin-bottom: 20px; position: relative; display: flex; align-items: center;}
.seller-form .bottom .cb input[type="checkbox"]{ margin-right: 17px; width: 1px; height: 1px; position: relative;}
.seller-form .bottom .cb input[type="checkbox"]::before{ cursor: pointer; transition: all .2s ease; content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 12px; color: white; width: 15px; height: 15px; border-radius: 3px; border: 1px solid #6e7787; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.seller-form .bottom .cb input[type="checkbox"]:checked::before{ background-color: #273142;}
.seller-form .bottom .cb label{ font-size: 14px; color: #273142;}
.seller-form .bottom .cb.error label{ transition: all .2s ease; font-size: 14px; color: #bc1b1b;}
.seller-form .bottom .cb.error label a{ transition: all .2s ease; font-size: 14px; color: #db0c0c;}
.seller-form .bottom .cb.error input[type="checkbox"]::before{ border-color: #db0c0c;}
.seller-form .bottom .cb label a{ color: #273142; font-weight: 500; text-decoration: none;}
.seller-form .bottom .cb label a:hover{ text-decoration: underline;}
.form-btn{ margin: 0 auto; display: block; cursor: pointer; transition: all .2s ease; width: 300px; height: 40px; border-radius: 7px; background-color: #273142; color: white; font-size: 13px; font-weight: 600; border: 1px solid #273142;}
.form-btn.gray{ background-color: #b9bdc4; color: #ffffff; border: 1px solid #b9bdc4;}
.form-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 10px -7px rgba(0, 0, 0, .7); background-color: white; color: #273142;}
.form-btn.gray:hover{ box-shadow: 0 8px 10px -7px rgba(0, 0, 0, .7); color: #90959d;}
.form-btn:active{ transform: translateY(0); box-shadow: none;}

.c-radios{ display: grid; grid-template-columns: 1fr 1fr;}
.c-radio{ display: flex; align-items: center;}
.c-radio input[type="radio"]{ margin-right: 7px; width: 1; height: 1px; position: relative;}
.c-radio input[type="radio"]::before{ cursor: pointer; background-color: white; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px white, 0 0 0 3px #273142; transition: all .2s ease; content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-block;}
.c-radio input[type="radio"]:checked::before{ background-color: #273142;}
.c-radio label{ cursor: pointer; font-size: 12px; font-weight: 500; color: #4a5260;}




.create-password{ padding: 30px; border-radius: 10px; background-color: white; width: calc(100% - 20px); max-width: 500px; margin: 0 auto;}
.create-password .password-control{ width: 100%;}
.create-password .password-control:not(.new){ margin-bottom: 15px;}
.create-password .password-control small{ display: inline-block; margin-bottom: 15px; font-size: 12px; font-weight: 500; color: #333;}
.create-password .password-control > div{ display: none; align-items: center; justify-content: space-between; margin-top: 8px;}
.create-password .password-control.active > div{ display: flex;}
.create-password .password-control > div span{ display: none; width: 40px; font-size: 12px; font-weight: 700;}
.create-password .password-control.low > div span.low-txt{ display: inline-block; color: #7e0606;}
.create-password .password-control.mid > div span.mid-txt{ display: inline-block; color: #a66306;}
.create-password .password-control.high > div span.high-txt{ display: inline-block; color: #019301;}
.create-password .password-control > div .bar{ position: relative; width: 85%; height: 6px; background-color: #ececec; border-radius: 10px;}
.create-password .password-control > div .bar::before{ content: ''; transition: all .35s linear; position: absolute; left: 0; top: 0; width: 0; z-index: 2; height: 6px; border-radius: 10px;}
.create-password .password-control.low > div .bar::before{ width: 20%; background-color: #d90707;}
.create-password .password-control.mid > div .bar::before{ width: 50%; background-color: #c29c02;}
.create-password .password-control.high > div .bar::before{ width: 100%; background-color: #1fc202;}


.default-container{ padding: 30px; border-radius: 10px; background-color: white; width: calc(100% - 20px); max-width: 1000px; margin: 0 auto;}
.default-container:not(:last-child){ margin-bottom: 20px;}


.steps-area{ display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .07);}
.steps-area > a{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-decoration: none;}
.steps-area > a > span{ display: flex; align-items: center; justify-content: center; border: 2px solid #70777e; color: #70777e; font-size: 13px; width: 30px; font-weight: 500; height: 30px; border-radius: 50%;}
.steps-area > a > b{ font-size: 13px; color: #757d85; font-weight: 500;}
.steps-area{}
.steps-area .steps{ position: relative; width: 100%; max-width: 600px; margin: 15px auto; display: flex; align-items: baseline; justify-content: space-between;}
.steps-area .steps::before{ content: ''; display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); top: 7px; width: calc(100% - (60px * 2)); height: 2px; background-color: #c6c6c6;}
.steps-area .steps::after{ content: ''; display: inline-block; position: absolute; left: 60px; top: 7px; width: 0px; height: 2px; background-color: #273142; z-index: 2;}
.steps-area .steps._1::after{ width: 0%;}
.steps-area .steps._2::after{ width: calc(50% - 60px);}
.steps-area .steps._3::after{ width: calc(100% - 120px);}
.steps-area .steps > div{ position: relative; z-index: 3; display: flex; gap: 5px; align-items: center; width: 120px; justify-content: center; flex-direction: column;}
.steps-area .steps > div .circle{ width: 16px; height: 16px; border-radius: 50%;  background-color: white; border: 1px solid #c6c6c6;}
.steps-area .steps._1 > div:nth-child(1) .circle,
.steps-area .steps._2 > div:nth-child(1) .circle,
.steps-area .steps._3 > div:nth-child(1) .circle,
.steps-area .steps._4 > div:nth-child(1) .circle{ background-color: #273142; border-color: #273142;}
.steps-area .steps._1 > div:nth-child(1) span,
.steps-area .steps._2 > div:nth-child(1) span,
.steps-area .steps._3 > div:nth-child(1) span,
.steps-area .steps._4 > div:nth-child(1) span{color: #273142;}
.steps-area .steps._2 > div:nth-child(2) .circle,
.steps-area .steps._3 > div:nth-child(2) .circle,
.steps-area .steps._4 > div:nth-child(2) .circle{ background-color: #273142; border-color: #273142;}
.steps-area .steps._2 > div:nth-child(2) span,
.steps-area .steps._3 > div:nth-child(2) span,
.steps-area .steps._4 > div:nth-child(2) span{color: #273142;}
.steps-area .steps._3 > div:nth-child(3) .circle,
.steps-area .steps._4 > div:nth-child(3) .circle{ background-color: #273142; border-color: #273142;}
.steps-area .steps._3 > div:nth-child(3) span,
.steps-area .steps._4 > div:nth-child(3) span{color: #273142;}
.steps-area .steps._4 > div:nth-child(4) .circle{ background-color: #273142; border-color: #273142;}
.steps-area .steps._4 > div:nth-child(4) span{color: #273142;}
.steps-area .steps > div span{ font-size: 11px; font-weight: 500; text-align: center;}

.diff-return-storage-area,
.diff-shipment-storage-area{ display: none;}
.diff-return-storage-area.active,
.diff-shipment-storage-area.active{ display: block;}


@media screen and (max-width: 768px) {
    .steps-area .steps > div{ width: 100px;}
    .steps-area .steps::before{ width: calc(100% - (50px * 2));}
    .steps-area .steps::after{ left: 50px;}
    .steps-area .steps._2::after{ width: calc(50% - 50px);}
    .steps-area .steps._3::after{ width: calc(100% - 100px);}
    .default-container{ padding: 20px 15px;}
    :where(.seller-form, .c-form) h1{ font-size: 20px; margin-bottom: 20px;}
    :where(.seller-form, .c-form) ._2{ grid-template-columns: 1fr;}
    :where(.seller-form, .c-form) ._3{ grid-template-columns: 1fr;}
    .f-c{ flex-direction: column-reverse;}
    .f-c > button{ margin-top: 0 !important;}
}




/* MODAL */
.modalx{ opacity: 0; pointer-events: none; transition: all .3s ease; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.6); z-index: 25; display: flex; align-items: center; justify-content: center;}
.modalx.active{ opacity: 1; pointer-events: all;}
.modalx .modalx-container{ transition: all .4s ease; opacity: 0; transform: translateY(100px); width: calc(100% - 20px); max-width: 450px; max-height: 90vh; height: 600px; background-color: white; border-radius: 7px; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);}
.modalx.a-height .modalx-container{ max-height: unset; height: auto;}
.modalx .modalx-container.md{ height: 90vh; max-width: 650px;}
.modalx.active .modalx-container{ opacity: 1; transform: translateY(0);}
.modalx .modalx-container .header{ position: relative; height: 50px; border-bottom: 1px solid #ddd; display: flex; align-items: center; justify-content: center;}
.modalx .modalx-container .header h5{ font-size: 18px; font-weight: 600;}
.modalx .modalx-container .header span{ cursor: pointer; font-weight: 600; font-size: 30px; position: absolute; right: 20px;}
.modalx .modalx-container .header span:hover{ color: rgb(74, 0, 0);}
.modalx .modalx-container .header span:has(i){ font-size: unset; line-height: 1; top: 50%; transform: translateY(-50%);}
.modalx .modalx-container .header span:has(i) i{ font-size: 18px;}
.modalx .modalx-container .body{ padding: 15px; height: calc(100% - 50px);}
.modalx .modalx-container .body .txt-area{ font-size: 13px; background-color: #f0f0f0; border-radius: 10px; padding: 15px; height: 100%;}
.modalx .modalx-container .body .txt-area > div{ padding-right: 15px; overflow-y: auto; height: 100%;}
.modalx .modalx-container .body .txt-area > div::-webkit-scrollbar{ border-radius: 6px; width: 6px; background-color: #ddd;}
.modalx .modalx-container .body .txt-area > div::-webkit-scrollbar-thumb{ border-radius: 6px; background-color: #344558;}


/* LOGIN MODAL */
.modalx-container form{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 0;}
.modalx-container form .phone-label{ color: rgba(0, 0, 0, .6); font-weight: 600; font-size: 12px; position: relative; display: inline-block; margin-bottom: 10px; width: 100%;}
.modalx-container form .phone-label::before{ content: ''; display: inline-block; width: 100%; height: .1px; background-color: rgba(0, 0, 0, .3); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.modalx-container form .phone-label span{ background-color: white; padding-right: 10px; position: relative; z-index: 2;}
.modalx-container form .input-area{ position: relative; transition: all .2s ease; background-color: #eaeff2; display: flex; gap: 5px; border: 1px solid #eaeff2; padding: 2px 10px; height: 45px; width: 280px; border-radius: 8px;}
.modalx-container form .input-area.err{ border-color: #273142; background-color: rgba(9, 49, 66, .1); color: rgba(9, 49, 66, .9);}
.modalx-container form .input-area.err input{ color: rgba(9, 49, 66, 1);}
.modalx-container form .input-area.err input::placeholder{ color: rgba(9, 49, 66, .6);}
.modalx-container form .input-area::before{ transition: all .2s ease; content: 'Eksik Telefon Numarası'; position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%) translateY(-20px); opacity: 0; color: #273142; font-size: 11px; font-weight: 600;}
.modalx-container form .input-area.err::before{ transform: translateX(-50%) translateY(0px); opacity: 1;}
/* .modalx-container form:not(.code) .input-area:focus-within { box-shadow: 0 0 10px 0 #c9334c2b; background-color: white;} */
.modalx-container form .input-area .select-area{ position: relative; display: flex; align-items: center; justify-content: center;}
.modalx-container form .input-area .select-area > label{ display: flex; align-items: center; justify-content: center;}
.modalx-container form .input-area .select-area > label > img{ width: 27px;}
.modalx-container form .input-area .select-area > select{ position: absolute; left: 0; width: 27px; opacity: 0;}
.modalx-container form .input-area .select-area > select option{ }
.modalx-container form .input-area > input{ background-color: transparent; width: 100%; border: none; padding: 0 5px;}
.modalx-container form .input-area > input:focus{ outline: none;}
.modalx-container form > button{ cursor: pointer; transition: all .2s ease; width: 280px; height: 45px; border-radius: 8px; border: none; margin-top: 30px; background-color: #273142; font-weight: 600; color: #fff;}
.modalx-container form.code > button{ margin-top: 20px;}
.modalx-container form > button:hover{ background-color: #042736;}
.modalx-container form .agreement{ width: 280px; margin-top: 10px;}
.modalx-container form .agreement p { color: rgba(0, 0, 0, 1); font-size: 10px; font-weight: 500;}
.modalx-container form .agreement p a{ font-weight: 700; text-decoration: none; color: rgba(0, 0, 0, .8);}
.modalx-container form .agreement p a:hover{ text-decoration: underline;}


.code-input-area{ transition: all .4s ease; overflow: hidden; height: 0px;}
.modalx-container form.code .code-input-area{ height: 135px;}
.code-input-area > div{ transition: all .4s ease; padding: 0 10px; transform: translateY(-135px) scale(.5); margin-top: 20px; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.modalx-container form.code .code-input-area > div{ transform: translateY(0px) scale(1);}
.code-input-area > div::before{ transition: all .2s ease; content: 'Hatalı Kod Girdiniz'; position: absolute; left: 50%; bottom: -25px; white-space: nowrap; transform: translateX(-50%) translateY(-20px); opacity: 0; color: #9e2727; font-size: 12px; font-weight: 600;}
.code-input-area.err > div::before{ transform: translateX(-50%) translateY(0px); opacity: 1;}
.code-input-area > div > label{ font-size: 14px; font-weight: 600;}
.code-input-area > div > .countdown{ color: rgba(0, 0, 0, .8);}
.code-input-area > div > .countdown .time{ font-size: 14px; font-weight: 600;}
.code-input-area > div > .countdown .colon{}
.code-input-area > div .code-input{ display: inline-block; position: relative;  margin-top: 5px;}
.code-input-area > div .code-input > div{ bottom: 7px; position: absolute; width: 17px; height: 1px; background-color: rgba(0, 0, 0, .4);}
.code-input-area > div .code-input > div.u1{ left: 25px;}
.code-input-area > div .code-input > div.u2{ left: 46px;}
.code-input-area > div .code-input > div.u3{ left: 68px;}
.code-input-area > div .code-input > div.u4{ left: 89px;}
.code-input-area > div .code-input input{ margin-top: 0; line-height: 1; color: rgba(0, 0, 0, .6); transition: all .2s ease; background-color: #eaeff2; border: 1px solid #eaeff2; padding: 3px 12px 3px 26px; border-radius: 8px; width: 130px; font-size: 20px; letter-spacing: 10px; height: 45px;}
.code-input-area.err > div .code-input input{ border-color: #b11525; background-color: rgb(228 7 7 / 10%); color: rgb(66 9 9 / 90%);}
.code-input-area.err > div .code-input > div{ background-color: rgb(66 9 9 / 90%);}
.code-input-area > div .code-input input:focus-visible{ box-shadow: 0 0 10px 0 #99a1ad; background-color: white; outline: none;}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
input[type=number] { -moz-appearance: textfield;}