*{ font-family: "Poppins", sans-serif; }

#registerForm .input-with-icon{ position:relative }
#registerForm .input-with-icon > i{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:#94a3b8; font-size:16px; pointer-events:none;
}
#registerForm .input-with-icon input{
  padding-left:44px;
  padding-right:44px;
}
#registerForm .toggle-pass{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:#94a3b8; font-size:18px;
  cursor:pointer; padding:4px; line-height:1; outline:none;
  -webkit-tap-highlight-color:transparent;
}
#registerForm .toggle-pass i{
  position: static !important; left:auto !important; right:auto !important;
  top:auto !important; transform:none !important;
}
#registerForm .toggle-pass:focus,
#registerForm .toggle-pass:active,
#registerForm .toggle-pass:focus-visible{
  background:transparent; box-shadow:none; outline:none;
}

#registerForm .seg-label{display:block;font-weight:600;margin:0 0 8px;color:#111827}
#registerForm .seg-group{
  display:flex;
  gap:6px;
  padding:6px;
  background:#f3f4f6;
  border-radius:14px;
  border:1px solid #e5e7eb;
}
#registerForm .seg-option{
  flex:1;
  height:44px;
  border-radius:10px;
  background:transparent;
  color:#6b7280;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
  font-size:14px;
  font-weight:600;
  gap:8px;
}
#registerForm .seg-option i{
  font-size:14px;
}
#registerForm .seg-option:hover{color:#111827}
#registerForm .seg-option.is-active{
  background:#ffffff;
  color:#e60000;
  box-shadow:0 6px 16px rgba(230,0,0,.15);
}
#registerForm .seg-option:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(230,0,0,.2)}

.modal{display:none;position:fixed;z-index:999;padding-top:50px;left:0;top:0;width:100%;height:100%;overflow:auto;background:rgba(0,0,0,0.6)}
.modal-content{background:#fff;margin:auto;padding:20px;border-radius:10px;width:80%;height:80%;max-width:600px;position:relative}
.close{color:#aaa;position:absolute;top:10px;right:20px;font-size:28px;cursor:pointer}
#approveBtn[disabled]{opacity:.5;cursor:not-allowed}

.otp-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:99999;align-items:center;justify-content:center}
.otp-backdrop.show{display:flex}
.otp-card{background:#fff;color:#111;border-radius:16px;width:min(85vw,420px);padding:18px 16px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.otp-title{margin:4px 0 6px;font-weight:800;font-size:18px}
.otp-sub{margin:0 0 12px;color:#475569;font-size:13px}
.otp-input{width:180px;height:48px;text-align:center;font-size:22px;border-radius:10px;border:1px solid #e5e7eb;outline:none}
.otp-input:focus{border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.25)}
.otp-info{font-size:12px;color:#64748b;margin:8px 0}
.otp-actions{display:flex;gap:10px;justify-content:center;margin-top:10px}
.btn-ghost{background:#fff;color:#111;border:1px solid #e5e7eb;padding:10px 14px;border-radius:10px;cursor:pointer}
.btn-primary{background:#000;color:#fff;border:0;padding:10px 14px;border-radius:10px;cursor:pointer}
.otp-error{color:#b91c1c;font-size:12px;min-height:14px;margin-top:6px}
.otp-timer{font-weight:600}

.success-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  z-index:99999;
  align-items:center;
  justify-content:center;
}
.success-backdrop.show{display:flex}
.success-card{
  background:#fff;
  color:#111;
  border-radius:18px;
  width:min(85vw,380px);
  padding:26px 22px;
  text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.success-icon{
  color:#22c55e;
  font-size:44px;
  margin-bottom:8px;
}
.success-title{
  font-size:20px;
  font-weight:800;
  margin-bottom:6px;
}
.success-sub{
  font-size:13px;
  color:#64748b;
}

.alert{display:none;position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:600px;padding:15px;z-index:9999;color:#fff;font-weight:bold;text-align:center;border-radius:0 0 8px 8px;animation:slideDown .5s ease-out forwards;box-shadow:0 4px 8px rgba(0,0,0,.2)}
.alert.error{background:#e74c3c}.alert.success{background:#2ecc71}
@keyframes slideDown{from{top:-60px;opacity:0}to{top:0;opacity:1}}

.kvkk-form-field{margin-top:15px}
.kvkk-checkbox-wrapper{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#333;line-height:1.4;cursor:pointer}
.kvkk-checkbox-wrapper input[type="checkbox"]{margin-top:4px;flex-shrink:0;width:18px;height:18px;accent-color:red;cursor:pointer}
.kvkk-checkbox-text{display:inline-block;margin-bottom:10px}

.seg-hint{
  margin-top:8px;
  font-size:12px;
  color:#6b7280;
}

.seg-tooltip{
  position:fixed;
  left:0;
  top:0;
  max-width:260px;
  background:#111827;
  color:#fff;
  font-size:12px;
  line-height:1.4;
  padding:10px 12px;
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.2);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease;
  pointer-events:none;
  z-index:9999;
}

.seg-tooltip.show{
  opacity:1;
  transform:translateY(0);
}

.register-page .right{
  align-items:flex-start;
  padding-top:40px;
}

@media (max-width: 768px) {
  .register-page .right{
    padding-top:20px;
  }
}