/* Genel alan */
#mcx9-wrap {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 500 !important;
  color: #111 !important;
}

.mcx9-title {
  text-align: center !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 3vw, 36px) !important; /* biraz küçültüldü */
  margin: 6px 0 50px !important;
  color: rgb(111, 111, 111) !important; /* hafif gri */
}
.mcx9-title .mcx9-light {
  font-weight: 300 !important; /* light */
}

/* Grid düzeni */
.mcx9-grid {
  display: grid !important;
  gap: 28px !important;
  grid-template-columns: 1fr !important;
}
@media (min-width: 980px) {
  .mcx9-grid {
    grid-template-columns: 55% 45% !important;
    align-items: start !important;
  }
}

/* Global margin override */
#mcx9-wrap .mcx9-input,
#mcx9-wrap .mcx9-area,
#mcx9-wrap select {
  margin: 0 !important;
}

/* Floating label alanları */
#mcx9-wrap .mcx9-float {
  position: relative !important;
  margin: 0 0 26px !important;
}

.mcx9-input,
.mcx9-area {
  width: 100% !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  border-bottom: 2px solid #d7d7d7 !important;
  padding: 16px 8px 10px 0 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  transition: border-color 0.18s !important;
  font-weight: 500 !important;
}
.mcx9-input:focus,
.mcx9-area:focus {
  border-bottom-color: #111 !important;
}

.mcx9-label {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: rgba(0, 0, 0, 0.201) !important;
  transition: all 0.18s ease !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

.mcx9-input::placeholder,
.mcx9-area::placeholder {
  color: rgba(0, 0, 0, 0.4) !important; /* gri ve daha silik */
  opacity: 0.6 !important; /* şeffaflık */
}

/* Mobilde placeholder fontları küçültme */
@media (max-width: 600px) {
  .mcx9-label {
    font-size: 14px !important;
  }
  .mcx9-input:focus + .mcx9-label,
  .mcx9-input:not(:placeholder-shown) + .mcx9-label,
  .mcx9-area:focus + .mcx9-label,
  .mcx9-area:not(:placeholder-shown) + .mcx9-label {
    font-size: 11px !important;
  }
}

.mcx9-input:focus + .mcx9-label,
.mcx9-input:not(:placeholder-shown) + .mcx9-label,
.mcx9-area:focus + .mcx9-label,
.mcx9-area:not(:placeholder-shown) + .mcx9-label {
  top: 0 !important;
  transform: translateY(-100%) !important;
  font-size: 12px !important;
  color: #111 !important;
}

/* Mesaj alanı auto-resize */
.mcx9-area {
  min-height: 60px !important;
  resize: none !important;
  overflow: hidden !important;
  padding-top: 16px !important;
}

/* Sağ taraf */
.mcx9-side {
  padding-left: 40px !important;
}
@media (max-width: 979px) {
  .mcx9-side {
    padding-left: 0 !important;
  }
}

.mcx9-side-title {
  font-weight: 500 !important;
  margin-bottom: 12px !important;
}

.mcx9-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  position: relative !important;
  z-index: 1 !important;
}

.mcx9-chip {
  border: none !important;
  background: #eee !important;
  color: #111 !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: transform 0.12s ease, background 0.18s ease, box-shadow 0.18s ease !important;
  font-weight: 500 !important;
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}
.mcx9-chip:hover {
  background: #e9e8e7 !important;
  color: #000 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
  transform: scale(1.04) !important;
}
.mcx9-chip:active {
  transform: translateY(1px) !important;
}
.mcx9-chip[aria-pressed="true"] {
  background: #111 !important;
  color: #fff !important;
}

/* Mesaj kutusu sarmalayıcı: 2 sütunu kapla ve ortala */
.mcx9-error-wrap {
  display: flex !important;
  justify-content: center !important;
  grid-column: 1 / -1 !important; /* grid'in iki sütununu da kapsar */
}

/* Hata / Başarı mesajı (buton üstü, ortalı) */
.mcx9-error {
  display: none !important;
  font-size: 14px !important;
  text-align: center !important;
  margin: 12px 0 16px !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;

  background: #f8f7f6 !important;  /* soft arka plan */
  color: #cfcfcf !important;        /* soft yazı    */
  font-weight: 600 !important;
}
.mcx9-error.active { display: block !important; }
.mcx9-error.success {
  background: #f8f7f6 !important;
  color: #cfcfcf !important;
  box-shadow: 0 2px 8px rgba(46,125,50,0.12) !important;
}

/* Gönder butonu ve yükleme animasyonu */
.mcx9-actions {
  grid-column: 1 / -1 !important;
  text-align: center !important;
}
.mcx9-btn {
  appearance: none !important;
  border: 0 !important;
  background: #000 !important;
  color: #fff !important;
  padding: 10px 50px !important;
  font-size: 21px !important;
  cursor: pointer !important;
  transition: opacity 0.18s, transform 0.02s !important;
  font-weight: 500 !important;
}
.mcx9-btn:hover { opacity: 0.92 !important; }
.mcx9-btn:active { transform: translateY(1px) !important; }

/* disabled + hafif oynama */
@keyframes mcx9-wiggle {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-2px); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}
.mcx9-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.mcx9-btn.is-loading {
  animation: mcx9-wiggle 0.8s ease-in-out infinite;
}

/* Geçersiz alan vurgusu */
.mcx9-invalid { border-bottom-color: #a8a8a8 !important; }