/* 1. Container'ı modern ve yuvarlak yap */
.dx-texteditor, .dx-texteditor-input-container {
    background: #f4f5f5 !important; /* Tailwind: bg-gray-50 */
    border: 2px solid transparent !important;
    border-radius: 1rem !important;   /* rounded-2xl */
    padding: 0 !important;
    box-shadow: none !important;
    transition: border 0.3s, box-shadow 0.3s, background 0.3s;
  }
  
  /* 2. Input iç padding, yazı tipi */
  .dx-texteditor-input {
    background: transparent !important;
    font-size: 1rem !important;
    color: #1f2937 !important;  /* Tailwind: text-gray-800 */
    border: none !important;
    outline: none !important;
    width: 100% !important;
    box-shadow: none !important;
    position: relative;
    padding: 10px !important;
    border-radius: 1rem !important;
  }
  
  /* 3. Focus olduğunda kutu efekti */
  .dx-texteditor.dx-state-focused, .dx-texteditor:focus-within {
    background: #fff !important;
    border-color: #ef4444 !important; /* Tailwind: border-red-500 */
    box-shadow: 0 0 0 4px #fee2e2 !important; /* focus:ring-4 focus:ring-red-100 */
  }
  
  /* 4. Floating label görseli için input'un öncesine bir label koymamız lazım, bunu pseudo ile yapamayız.
  Ama devexpress "placeholder"ı destekler, placeholder'ı yukarı hareket ettirmek için trick: */
  
  .dx-texteditor-input::placeholder {
    color: transparent !important; /* Kayan label için gerçek placeholder görünmez */
    transition: all 0.3s;
  }
  
  /* 5. Kayan label: Custom bir elementle, ya da placeholder hack ile simüle edilir */
  /* Aşağıdaki örnek: dx-texteditor-input-container'da "data-label" attribute'u varmış gibi eklersek: */
  .dx-texteditor-input-container[data-label] {
    position: relative;
  }
  .dx-texteditor-input-container[data-label]::before {
    content: attr(data-label);
    position: absolute;
    left: 1.25rem; /* px-5 */
    top: 1.1rem;
    color: #6b7280; /* Tailwind: text-gray-500 */
    font-size: 1rem;
    font-weight: 400;
    pointer-events: none;
    transition: all 0.3s;
  }
  
  .dx-texteditor-input:focus + .dx-texteditor-input-container[data-label]::before,
  .dx-texteditor-input:not(:placeholder-shown) + .dx-texteditor-input-container[data-label]::before {
    top: 0.4rem;
    left: 1.25rem;
    color: #ef4444;
    font-size: 0.88rem;
    font-weight: 600;
  }
  
  /* 6. İkon eklemek için: */
  .dx-texteditor-input[icon-left] {
    padding-left: 2.5rem !important; /* icon varsa daha fazla padding */
  }
  .dx-texteditor-input-container .dx-icon {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    width: 1.3rem; height: 1.3rem;
    pointer-events: none;
  }

  .dx-texteditor-input-container .dx-icon + .dx-texteditor-input {
    padding-left: 1.5rem !important; /* icon varsa daha fazla padding */
  } 
  
  
  /* 7. Border hover efekti */
  .dx-texteditor:hover {
    border-color: #ef4444 !important;
  }
  
  /* 8. Hata durumu için örnek */
  .dx-texteditor.dx-invalid {
    border-color: #dc2626 !important; /* red-600 */
    background: #fef2f2 !important;
  }

  .dx-texteditor.dx-editor-underlined::after,
  .dx-texteditor.dx-state-focused::before{
    border-bottom: 0 !important;
  }

  /* 9. Label */
  .dx-texteditor-label{
    padding-left: 10px !important;
  }
  .dx-editor-underlined.dx-texteditor-with-floating-label.dx-texteditor-empty .dx-texteditor-label{
    font-size: 13px !important;
    height: 16px !important;
    line-height: 16px !important;
  }
  .dx-editor-underlined.dx-texteditor-with-floating-label .dx-texteditor-label{
    font-size: 11px !important;
    height: 12px !important;
    line-height: 12px !important;
  }

  .dx-texteditor-label .dx-label {
    color: var(--dx-input-title-text);
    font-weight: bold;
    display: flex;
  }

  .dx-dropdowneditor-input-wrapper .dx-placeholder{
    padding-left: 10px !important;
  }
  
  /* Placeholder ve floating için:
   - input'un placeholder'ı boş olmayacak,
   - ilk açılışta floating label alt tarafta gözükecek,
   - input focus/filled ise yukarı kayacak
  Yukarıdaki gibi data-label ile pseudo-label verilebilir.
  Yoksa, input'un hemen üstüne/önüne bir <label> koymak en sağlıklısı.
  */