/* ============================================================
   HITITBET REGISTER - REFERANS TASARIM
   ============================================================ */

#modalOverlay {
  background: rgba(2, 10, 14, .76) !important;
  backdrop-filter: blur(2px);
}

#registerModal.register-v2 {
  position: relative;

  width: 352px !important;
  max-width: calc(100vw - 20px) !important;
  max-height: 96vh;

  margin: 0 !important;
  padding: 26px 28px 0 !important;

  overflow-y: auto;

  border: 1px solid #33475f !important;
  border-radius: 4px !important;

  background: #1b2738 !important;
  color: #fff !important;

  box-shadow:
    0 12px 40px rgba(0,0,0,.48) !important;
}

/* scrollbar */
#registerModal::-webkit-scrollbar {
  width: 5px;
}

#registerModal::-webkit-scrollbar-thumb {
  background: #3a4c63;
  border-radius: 10px;
}

/* ============================================================
   KAPATMA
   ============================================================ */

#registerModal .modal-close {
  position: absolute !important;

  top: 10px !important;
  right: 13px !important;

  width: 30px !important;
  height: 30px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  background: transparent !important;

  color: #fff !important;

  font-size: 31px !important;
  font-weight: 200 !important;
  line-height: 1 !important;

  cursor: pointer !important;
}

/* ============================================================
   LOGO
   ============================================================ */

.reg-logo {
  width: 100%;

  margin: 4px 0 17px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.reg-logo img {
  display: block !important;

  width: 205px !important;
  height: 56px !important;

  margin: 0 !important;

  object-fit: contain !important;
}

/* ============================================================
   ADIMLAR
   ============================================================ */

.reg-step {
  display: none;
}

.reg-step.active {
  display: block;
}

.reg-intro {
  margin: 0 0 27px !important;

  color: #8396b1 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.48 !important;

  text-align: center !important;
}

/* ============================================================
   INPUT ORTAK
   ============================================================ */

.reg-field {
  position: relative;

  margin: 0 0 10px !important;
}

.reg-field input,
.reg-field select {
  width: 100% !important;
  height: 36px !important;

  margin: 0 !important;
  padding: 0 35px !important;

  border: 1px solid #3d4f67 !important;
  border-radius: 5px !important;

  outline: 0 !important;

  background: #223046 !important;
  color: #fff !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;

  box-shadow: none !important;
}

.reg-field input::placeholder {
  color: #6f829d !important;
  opacity: 1 !important;
}

.reg-field select {
  padding-left: 15px !important;
  color: #6f829d !important;
}

.reg-field input:focus,
.reg-field select:focus {
  border-color: #28ce70 !important;

  box-shadow:
    0 0 0 1px #28ce70 !important;
}

/* ============================================================
   INPUT SOL IKONLARI
   ============================================================ */

.reg-field::before {
  position: absolute;

  left: 11px;
  top: 8px;

  z-index: 2;

  color: #8598b4;

  font-size: 16px;
  line-height: 20px;

  pointer-events: none;
}

/* kullanıcı */
.reg-field:has(#regUsername)::before {
  content: "♟";
}

/* şifre */
.reg-field:has(#regPassword)::before,
.reg-field:has(#regPasswordAgain)::before {
  content: "⚿";
}

/* güvenlik cevabı */
.reg-field:has(#regSecurityAnswer)::before {
  content: "⌁";
}

/* selectlerde ikon olmasın */
.reg-field:has(select)::before {
  content: "";
}

/* ============================================================
   HATA
   ============================================================ */

.reg-field input.invalid,
.reg-field select.invalid {
  border-color: #ff5364 !important;

  box-shadow:
    0 0 0 1px #ff5364 !important;
}

.reg-error {
  min-height: 0 !important;

  margin: 4px 0 0 !important;

  color: #ff6675 !important;

  font-size: 10px !important;
  line-height: 1.25 !important;

  text-align: left !important;
}

/* ============================================================
   LOGIN LINK
   ============================================================ */

.reg-login-text {
  margin: 18px 0 0 !important;

  color: #8395af !important;

  font-size: 12px !important;
  line-height: 20px !important;

  text-align: center !important;
}

.reg-login-text button {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;
  color: #14c99a !important;

  font-size: 12px !important;
  font-weight: 700 !important;

  cursor: pointer !important;
}

/* ============================================================
   SONRAKI
   ============================================================ */

#registerNextButton {
  width: 100% !important;
  height: 45px !important;

  margin: 44px 0 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 4px !important;

  background: #34445c !important;
  color: #99a9bf !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;

  cursor: pointer !important;
}

#registerNextButton:hover {
  background: #3b4c65 !important;
}

/* Form geçerliyse yeşil görünüm - JS sonradan ekleyebilir */
#registerNextButton.ready {
  background: #1b9d75 !important;
  color: #fff !important;
}

/* ============================================================
   NOKTALAR
   ============================================================ */

.reg-dots {
  margin: 14px 0 13px !important;

  display: flex !important;
  justify-content: center !important;

  gap: 8px !important;
}

.reg-dots span {
  width: 11px !important;
  height: 11px !important;

  border: 2px solid #40546c !important;
  border-radius: 50% !important;

  background: transparent !important;
}

.reg-dots span.active {
  border-color: #1fca98 !important;
  background: #1fca98 !important;
}

/* ============================================================
   CANLI SOHBET
   ============================================================ */

#registerModal::after {
  content: "Canlı Sohbet";

  display: flex;

  width: calc(100% + 56px);
  height: 44px;

  margin: 0 -28px;

  align-items: center;
  justify-content: center;

  border-top: 1px solid #32445b;

  color: #8396b1;

  font-size: 12px;
  font-weight: 400;
}

/* ============================================================
   ADIM 2 AYARLARI
   ============================================================ */

.reg-section-title {
  margin: 2px 0 15px !important;

  color: #18c899 !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  text-align: left !important;
}

.reg-contact-title {
  margin-top: 23px !important;
}

.reg-two-column {
  display: grid !important;
  grid-template-columns: 1fr 85px !important;

  gap: 20px !important;

  margin: 8px 0 0 !important;
}

.reg-two-column label {
  display: block !important;

  margin: 0 0 9px !important;

  color: #1ac898 !important;

  font-size: 13px !important;
  font-weight: 700 !important;
}

.reg-two-column select {
  width: 100% !important;
  height: 36px !important;

  padding: 0 12px !important;

  border: 1px solid #3d4f67 !important;
  border-radius: 4px !important;

  background: #223046 !important;
  color: #fff !important;
}

.reg-check {
  margin: 11px 0 !important;

  display: flex !important;
  align-items: flex-start !important;

  gap: 10px !important;

  color: #fff !important;

  font-size: 11px !important;
  line-height: 1.45 !important;
}

.reg-check input {
  margin-top: 2px !important;

  accent-color: #20c99a !important;
}

.reg-recaptcha-demo {
  height: 76px !important;

  margin: 15px 0 20px !important;
  padding: 0 18px !important;

  display: flex !important;
  align-items: center !important;

  gap: 12px !important;

  border: 1px solid #5b5b5b !important;
  border-radius: 3px !important;

  background: #272727 !important;
}

.reg-recaptcha-check {
  color: #00ca8b !important;
  font-size: 32px !important;
}

.reg-recaptcha-demo strong {
  margin-left: auto !important;

  color: #ddd !important;

  font-size: 9px !important;
}

.reg-bottom-buttons {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  gap: 20px !important;
}

.reg-back-button,
#registerCreateButton {
  height: 45px !important;

  margin: 0 !important;

  border: 0 !important;
  border-radius: 4px !important;

  color: #fff !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  cursor: pointer !important;
}

.reg-back-button {
  background: #34445b !important;
}

#registerCreateButton {
  background: #1b9d75 !important;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 430px) {

  #registerModal.register-v2 {
    width: calc(100vw - 14px) !important;

    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #registerModal::after {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
  }

  .reg-logo img {
    width: 190px !important;
  }
}


/* REGISTER LOGO FIX */

#registerModal .reg-logo {
  margin: 2px 0 14px !important;
}

#registerModal .reg-logo img {
  width: 230px !important;
  height: 62px !important;

  object-fit: contain !important;

  background: transparent !important;

  border: 0 !important;
  box-shadow: none !important;
}