/*modal*/
.customModalContainer {
  display: none;
  position: fixed; /* fixed */
  height: 100vh; /* h-dvh */
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  z-index: 1000; /* z-[1000] */
  overflow-y: auto;
  padding: 3rem 0.625rem; /* py-12 px-2.5 */
  inset: 0; /* inset-0 */
  transition: all 0.3s ease; /* transition-custom */
  background-color: rgba(0, 0, 0, 0.8); /* bg-[rgba(0,0,0,.8)] */
}
.customModalContainer.show {
  display: flex;
}
.customModal {
  overflow: hidden; /* overflow-hidden */
  max-width: 32rem; /* max-w-lg */
  border-radius: 0.75rem; /* rounded-xl */
  border: 1px solid white; /* border border-solid border-white */
  background-color: white; /* bg-white */
  width: 100%; /* w-full */
  position: relative;
}
.customModalSecond {
  max-width: 820px;
}
.customModalSecond button.closeBtn {
  position: absolute;
  right: 16px;
  z-index: 4;
  top: 16px;
}
.customModalHeader {
  display: flex; /* flex */
  align-items: center; /* items-center */
  justify-content: space-between; /* justify-between */
  padding: 1.25rem; /* p-5 */
  border-bottom: 1px solid #ddd; /* border-b border-solid border-[#ddd] */
}
.customModalHeader h4 {
  color: #22212a;
  font-weight: 600; /* font-semibold */
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
}
.customModalHeader button {
  color: #22212a; /* text-[#731982] */
  transition: all 0.3s ease; /* transition-custom */
  z-index: 3; /* z-[3] */
  background: transparent;
}
.customModalHeader button:hover {
  color: #731982; /* hover:text-[#731982] */
}

.customModalBody {
  width: 100%;
  padding: 20px;
  position: relative;
}
.customModalBodySecond {
  padding-top: 32px;
}

.responseMessageOne {
  position: absolute;
  background-color: white; /* bg-white */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%; /* w-full */
  height: 100%; /* h-full */
  display: flex;
  flex-direction: column; /* flex-col */
  padding: 0.75rem; /* p-3 */
  align-items: center; /* items-center */
  z-index: 2; /* z-[2] */
  gap: 0.75rem; /* space-y-3 */
  justify-content: center; /* justify-center */
  text-align: center; /* text-center */
}
.responseMessageOne .icon {
  font-size: 2.25rem /* 36px */;
  line-height: 2.5rem /* 40px */;
      margin: 0 auto;
}
.responseMessageOne .text {
  font-weight: 500;
  text-align:center;
  font-size: 1.125rem /* 18px */;
  font-family: "Montserrat", sans-serif;
  line-height: 1.75rem /* 28px */;
}
.mail_call .mail_call_wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 14px;
}
.mail_call .mail_call_wrapper input {
  min-height: 3rem; /* min-h-12 */
  display: flex;
  align-items: center; /* items-center */
  padding: 0.75rem; /* p-3 */
  border-radius: 0.375rem; /* rounded-md */
  border: 1px solid #ddd; /* border border-solid border-[#ddd] */
  outline: none; /* outline-none */
}
.mail_call .mail_call_wrapper button {
  display: flex;
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  min-height: 3.5rem; /* min-h-14 */
  color: white; /* text-white */
  font-weight: 500; /* font-medium */
  font-size: 1rem; /* text-base */
  border-radius: 0.375rem; /* rounded-md */
  min-width: 11.25rem; /* min-w-[180px] */
  background-color: #731982; /* bg-pigmentIndigo-900 (pigment indigo shade) */
  padding: 0.75rem 1.5rem; /* p-3 px-6 */
  transition: all 0.3s; /* transition-custom */
}
.mail_call .mail_call_wrapper button:hover {
  background-color: #721982ab;
}

.mail_sender_3 span.title {
  color: #758494;
  font-size: 1rem; /* 16px */
  font-family: "Tahoma", sans-serif;
  font-weight: 500; /* Medium */
  margin-bottom: 1.25rem; /* 20px */
  display: block;
}
.mail_sender_3_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* İki sütun */
  gap: 0.75rem; /* 12px */
}
.mail_sender_3 .input_fields {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}
.input_fields input {
  min-height: 60px;
  width: 100%;
  padding: 0.75rem 1.5rem; /* p-3 px-6 */
  color: #758494;
  border: 1px solid #758494;
  border-radius: 0.375rem; /* rounded-md */
}
.input_field_2 [type="number"] + .value-control {
  position: absolute;
  right: 10px;
  top: 0;
  padding: 0;
  height: 100%;
  bottom: 0;
  width: 36px;
  font-size: 36px;
  font-weight: 300;
  background: transparent;
  display: block;
  color: #BFBFBF;
}
/* WebKit and Blink */
.input_field_2 [type="number"]::-webkit-outer-spin-button,
.input_field_2 [type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.input_field_2 [type="number"] {
  -moz-appearance: textfield;
}
.input_fields label {
  position: absolute;
  font-family: "Tahoma", sans-serif;
  left: 1.5rem; /* left-6 */
  color: #758494;
}
.input_fields label b {
  margin-left: 0.125rem;
  color: #f87171;
}
.input_fields input:focus {
  outline: none;
}
.input_fields span {
  color: #758494;
  position: absolute;
  right: 0.75rem; /* 12px */
}
.input_fields .label {
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;

  color: #758494;
  pointer-events: none;
}
.input_fields input:focus + .label,
.input_fields input:valid + .label {
  top: 0em;
  left: 0.875rem;
  transform: translateY(50%);
  font-size: 10px;
  color: #758494;
}
.input_fields input:invalid + .label,
.input_fields input:valid + .label {
  color: #758494;
}

.input_fields input:invalid + .label + span {
  color: #758494 !important;
}

.input_fields input:valid + .label + span {
  color: #009a5c !important;
}
.input_fields_one {
  grid-column: span 2; /* Kolonlar arası yayılma */
}
.input_fields label[for="phone_number"] {
  display: none;
}
.input_fields_textarea {
  grid-column: span 2;
}
.mail_sender3_information {
  display: flex;
  align-items: center;
  gap: 0 0.75rem; /* 12px */
  grid-column: span 2;
}
.mail_sender3_information .switch_area {
  color: #434c5d;
  font-family: "Tahoma", sans-serif;
  font-size: 10px;
  line-height: 1rem; /* 16px */
}
.mail_sender3_information_second {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  grid-column: span 2;
  max-width: 36rem; /* 576px */
}
.mail_sender3_information_second label {
  cursor: pointer;
  color: white;
}
.mail_sender3_information_second label input {
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  accent-color: #009a5c;
  width: 1rem; /* 16px */
  height: 1rem; /* 16px */
}

.mail_sender3_information_second .content {
  color: #434c5d;
  font-family: Tahoma, sans-serif;
  font-size: 10px;
  line-height: 1rem; /* 16px */
}
.mail_sender3_information_second .content a {
  color: #029b42;
}
.mail_sender3_information_second .content a b {
  margin-left: 4px;
  color: #f87171;
}
.mail_sender_3_grid button {
  font-family: Tahoma, sans-serif;
  font-weight: 500;
  max-width: 100%; /* 384px */
  width: 100%;
  min-height: 60px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #029b42;
  color: white;
  transition: all 0.3s ease-in-out;
  grid-column: span 2;
}
.responseMessage8 {
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: white;
  z-index: 1000;
  gap: 12px; /* space-y-3 (12px boşluq) */
}
@media (min-width: 640px) {
  .mail_sender_3_grid button {
    grid-column: span 1;
  }
}
@media (min-width: 768px) {
  .input_fields_one {
    grid-column: span 1; /* Daha böyük ekranlarda 1 kolon */
  }
  .mail_sender3_information .switch_area {
    font-size: 1rem; /* 16px */
  }
  .mail_sender3_information_second label input {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
  }
  .mail_sender_3_grid button {
    max-width: 24rem;
  }
}
@media screen and (min-width: 1024px) {
  .mail_sender3_information_second .content {
    font-size: 16px;
  }
  .mail_sender_3_grid button {
    grid-column: span 2;
  }
}
/*modal*/

/* switch */
.switch {
  position: relative;
  height: 1.5rem;
  width: 3rem;
  cursor: pointer;
  appearance: none;
  flex-shrink: 0;
  -webkit-appearance: none;
  border-radius: 9999px;
  background-color: rgba(100, 116, 139, 0.377);
  transition: all 0.3s ease;
}

.switch:checked {
  background-color: #009a5c;
}

.switch::before {
  position: absolute;
  content: "";
  left: calc(1.5rem - 1.6rem);
  top: calc(1.5rem - 1.6rem);
  display: block;
  height: 1.6rem;
  width: 1.6rem;
  cursor: pointer;
  border: 1px solid rgba(100, 116, 139, 0.527);
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 3px 10px rgba(100, 116, 139, 0.327);
  transition: all 0.3s ease;
}

.switch:checked:before {
  transform: translateX(100%);
  border-color: #009a5c;
}
label {
  transition: 0.3s ease-in-out;
}

.input_fields {
  z-index: 2;
}
.input_fields .label {
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;

  color: #758494;
  pointer-events: none;
}
.input_fields input:focus + .label,
.input_fields input:valid + .label {
  top: 0em;
  left: 0.875rem;
  transform: translateY(50%);
  font-size: 10px;
  color: #758494;
}
.input_fields input:invalid + .label,
.input_fields input:valid + .label {
  color: #758494;
}

.input_fields input:invalid + .label + span {
  color: #758494 !important;
}

.input_fields input:valid + .label + span {
  color: #009a5c !important;
}
/* Tabs Container */
.tabs {
  width: 100%;
}

/* Tabs Navigation */
.tabs-nav {
  position: relative;
  padding: var(--tabs-nav-padding);
  border-radius: var(--tab-border-radius);
  margin-bottom: 1rem;
  isolation: isolate;
}
.tab-button {
  all: unset;
  position: relative;
  padding: var(--tab-padding);
  font-size: var(--tab-font-size);
  font-weight: var(--tab-font-weight);
  color: #758494;
  border-radius: var(--tab-border-radius);
  cursor: pointer;
  transition: color var(--transition-duration) var(--transition-timing);
  text-align: center;
  white-space: nowrap;
  z-index: 1;
}
.tab-button:hover {
  color: #009a5c;
}
.tab-button[aria-selected="false"] {
  border: 1px solid #ddd;
}
.tab-button[aria-selected="true"] {
  color: #009a5c;
  border: 1px solid #009a5c;
}

/* Tab Panels */
.tab-panel {
  padding: 0.5rem 0;
  background: transparent;
  border-radius: var(--tab-border-radius);
  display: none;
  transform-origin: top;
  animation: slideIn var(--transition-duration) var(--transition-timing);
}

.tab-panel[aria-hidden="false"] {
  display: block;
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* second modal */
.modalContent[data-content] h3 {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  text-align: center;
  font-size: 20px;
  line-height: 1.2;
  color: #22212a;
  margin-bottom: 15px;
}
.modalContent[data-content] p {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
  color: #22212a;
  margin-bottom: 12px;
}
.modalContent[data-content] nav {
  margin-bottom: 10px;
}
.modalContent[data-content] nav ul {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.modalContent[data-content] {
  display: none;
}
.modalContent[data-content].active {
  display: block;
}
.modalContent[data-content] nav ul li {
  border-radius: 100px;
  height: 24px;
  background: #efefef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
  line-height: 1.2;
  color: #bfbfbf;
}
.modalContent[data-content] nav ul li.active {
  background: #029b42;
  color: #fff;
}
.modalContent[data-content] nav ul li.correct {
  color: #029b42;
}
.modalContent[data-content="0"] fieldset {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 20px;
  row-gap: 10px;
  margin-bottom: 10px;
}
.modalContent[data-content="0"] fieldset .input_field_2 {
  display: flex;
  flex-direction: column;
}
.modalContent[data-content] fieldset .input_field_2 span {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.1;
  display: block;
  padding-left: 0;
  margin-bottom: 10px;
  color: #22212a;
}
.modalContent[data-content] p.price-label {
  text-align: center;
  font-size: 16px;
  line-height: 120.02%;
  color: #696969;
  font-weight: 600;
  margin: 20px auto;
}
.modalContent[data-content] p.price-label strong {
  color: #22212a;
  font-weight: 700;
  margin-left: 5px;
}
.input_field_2_labels {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  color: #bfbfbf;
}
.input_field_2_labels svg {
  position: absolute;
  left: 20px;
}
.input_field_2_labels input,
.input_field_2_labels .input-wrap {
  height: 50px;
  border: 1.5px solid;
  border-color: #bfbfbf;
  border-radius: 68px;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  width: 100%;
  outline: none;
  font-size: 14px;
  line-height: 1.2;
  padding: 0 20px 0 52px;
  color: #bfbfbf;
}
.input_field_2_labels .input-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  gap: 16px;
}
.modalContent[data-content] .input_field_2_labels .input-wrap > span {
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  flex: 0 1 auto;
  color: #757575;
  pointer-events: none;
  user-select: none;
}
fieldset  .input_field_2_labels .input-wrap input {
  border: none;
  width: auto;
  flex: 0 1 auto;
  padding: 0;
}
.input_field_2_labels input:valid + svg {
  color: #029b42;
}
.modalContent[data-content] fieldset .input_field_2 .input-wrapspan {
  padding-left: 0;
}
.input_field_2_labels.success input,.input_field_2_labels input:valid, .input_field_2_labels.success .input-wrap  {
  border-color: #029b42;
  color: #029b42;
}
.input_field_2_labels.error input,
.input_field_2_labels.error .input-wrap {
  border-color: #e55b5b;
  color: #e55b5b;
}
.input_field_2_labels.error {
  color: #e55b5b;
}
.input_field_2_labels.success,
.input_field_2_labels.success .input-wrap  {
  color: #029b42;
}
.radio_inputs.error {
  accent-color: #e55b5b;
}
button{
    cursor: pointer;
}
.modalContent[data-content="0"]
  fieldset
  .input_field_2
  label
  input.error
  .modalContent[data-content="0"]
  fieldset
  .input_field_2 {
  grid-column: span 1 / span 1;
}

.modalContent[data-content="0"] fieldset .input_field_2[data-type="check"] {
  display: flex;
  align-items: center;
  /* gap: 12px; */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: #22212a;
}
.modalContent[data-content="0"] fieldset .input_field_2[data-type="check"] {
  flex-direction: unset;
}
.modalContent[data-content="0"]
  fieldset
  .input_field_2[data-type="check"]
  span {
  margin-left: 10px;
  margin-bottom: 0;
}
.modalContent[data-content="0"] button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 25px;
  gap: 10px;
  height: 50px;
  background: #731982;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  transition: 0.3s ease-in-out;
  font-size: 14px;
  line-height: 1.2%;
  width: 100%;
  color: #ffffff;
  border-radius: 68px;
}
.modalContent[data-content="0"] button[disabled="true"] {
  background: gray;
}
.modalContent[data-content="0"] button:hover {
  opacity: 0.8;
}
.modalContent[data-content="0"] .content {
  display: flex;
  align-items: center;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  line-height: 110%;
  color: #22212a;
  justify-content: center;
  margin-top: 10px;
}
.modalContent[data-content="0"] .content svg {
  margin-right: 10px;
  flex-shrink: 0;
}
.modalContent[data-content="0"] .content a {
  color: currentColor;
  text-decoration: underline;
}

.modalContent[data-content="1"] fieldset ul {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  margin-bottom: 10px;
}

.modalContent[data-content="1"] fieldset ul label {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  display:block;
  line-height: 1.2;
  color: #22212a;
}
.modalContent[data-content="1"] fieldset ul label.success{
    color:#029b42;
}
.modalContent[data-content="1"] fieldset ul label.error{
    color:#e55b5b;
}
.modalContent[data-content="1"] fieldset ul label input {
  width: 16px;
  height: 16px;
  accent-color: #22212a;
  margin-right: 5px;
  flex-shrink: 0;
}
.modalContent[data-content="1"] fieldset ul label span {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  padding-left:5px;
  font-size: 12px;
  line-height: 1.2;
  color: #999999;
}
.modalContent[data-content] .next_prev {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 20px;
  row-gap: 10px;
  margin-top: 20px;
}
.modalContent[data-content] .next_prev button {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  transition: 0.3s ease-in-out;
  height: 50px;
  justify-content: center;
}
.modalContent[data-content] .next_prev button.prevBtn {
  max-width: 100%;
  width: 100%;
  border: 1.5px solid #731982;
  border-radius: 68px;
}
.modalContent[data-content] .next_prev button.nextBtn {
  max-width: 100%;
  width: 100%;
  height: 54px;
  background: #731982;
  color: #fff;
  border-radius: 68px;
}
.modalContent[data-content] .next_prev button.nextBtn:hover {
  background: #7219829f;
}
.closeResponseButton {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width:700px;
  padding: 16.7px 25px;
  gap: 10px;
  min-height: 50px;
  margin:0 auto;
  background: #731982;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  transition: 0.3s ease-in-out;
  font-size: 14px;
  line-height: 1.2;
  width: 100%;
  color: #ffffff;
  border-radius: 68px;
}
.responseIcon3 img {
  margin: 0 auto;
  width:100px;
  height:100px;
}
#responseMessage3{
    padding:40px 20px 60px;
    align-items:flex-start;
}
#responseText3text2 {
    text-align:start;
      color: #22212a;
     font-family: 'Montserrat';
   font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    max-width:700px;
    margin:0 auto;
    color: #22212A;
}
#responseText3text2 h5{
  font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
font-size: 20px;
line-height: 1.2;
margin-bottom:20px;
/* or 38px */
text-align: center;

color: #22212A;
}
#responseText3text2 br[data-number=1]{
    display:inline;
}
@media screen and (min-width: 768px) {
  .modalContent[data-content] .next_prev {
    grid-template-columns: repeat(2, 1fr);
  }
  .modalContent[data-content] .next_prev:not(:has(.nextBtn)) {
    grid-template-columns: auto;
  }
  .modalContent[data-content="1"] fieldset ul {
    row-gap: 20px;
    margin-bottom: 20px;
  }
  .modalContent[data-content] fieldset .input_field_2 span {
    padding-left: 20px;
  }
  .modalContent[data-content] p.price-label {
    font-size: 20px;
  }
}

@media screen and (min-width: 1024px) {
  .modalContent[data-content] h3 {
    font-size: 32px;
    text-align: start;
  }
  #responseText3text2 br[data-number=1]{
    display:none;
}
#responseMessage3{
    padding:40px 32px 60px;
}
.responseIcon3 img {
  width:130px;
  height:130px;
}
#responseText3text2 {
    font-size:17px;
}
#responseText3text2 h5{
font-size: 32px;
}
.closeResponseButton {
        padding: 19px 25px;
         min-height: 54px;
}
  .modalContent[data-content] nav ul li {
    height: 30px;
    font-size: 12px;
  }
  .modalContent[data-content="0"] button {
    height: 54px;
  }
  .input_field_2_labels input {
    height: 54px;
  }
  .modalContent[data-content] nav {
    margin-bottom: 20px;
  }
  .modalContent[data-content] nav {
    margin-bottom: 30px;
  }
  .modalContent[data-content] p {
    font-size: 16px;
    margin-bottom: 32px;
    text-align: start;
  }
  .modalContent[data-content] nav ul {
    grid-template-columns: repeat(2, 1fr);
  }
  .customModalBodySecond {
    padding: 32px 40px;
  }
  .modalContent[data-content="0"] fieldset {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
    margin-bottom: 20px;
  }
  .modalContent[data-content="0"] .content {
    margin-top: 15px;
  }
  .modalContent[data-content="0"] fieldset .input_field_2[data-type] {
    grid-column: span 2 / span 2;
  }
  .modalContent[data-content] .next_prev button {
    height: 54px;
  }
}