/* Hata Mesajı Konteyneri */
.input-hata-mesaji {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: #FEE2E2;
    border-left: 4px solid #EF4444;
    font-size: 0.875rem;
    line-height: 1.25;
    animation: hataGirisAnimasyonu 0.3s ease-in-out;
}

/* Hata Giriş Animasyonu */
@keyframes hataGirisAnimasyonu {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hata Mesajı Gizlendiğinde */
.input-hata-mesaji.hidden {
    display: none;
}

/* Input Hata Durumu */
.border-red-500 {
    border-color: #EF4444 !important;
}

.focus\:ring-red-500:focus {
    --tw-ring-color: #EF4444;
    --tw-ring-offset-shadow: 0 0 0 0 rgba(239, 68, 68, 0.2);
}

/* Input Başarı Durumu */
.border-gray-200 {
    border-color: #E5E7EB;
}

.focus\:ring-sp-green:focus {
    --tw-ring-color: #059669;
    --tw-ring-offset-shadow: 0 0 0 0 rgba(5, 150, 105, 0.2);
}

/* Hata Mesajı Renkleri */
.text-red-500 {
    color: #EF4444;
}

/* Input Focus Durumu Geçişleri */
input,
select,
textarea {
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Hata Mesajı İkon Animasyonu */
.input-hata-mesaji::before {
    content: '⚠️';
    margin-right: 0.5rem;
    animation: ikonTitresim 0.5s ease-in-out infinite;
}

@keyframes ikonTitresim {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(5deg);
    }
}

/* Responsive Ayarlar */
@media (max-width: 768px) {
    .input-hata-mesaji {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
}

/* Erişilebilirlik - Odaklanma Durumu */
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #059669;
    outline-offset: 2px;
}

/* Hata Mesajı Odaklanma Durumu */
.input-hata-mesaji:focus {
    outline: none;
}

/* Input Placeholder Stilleri */
input::placeholder,
textarea::placeholder {
    color: #9CA3AF;
    opacity: 0.7;
}

/* Hata Durumunda Placeholder */
input.border-red-500::placeholder,
textarea.border-red-500::placeholder {
    color: #EF4444;
    opacity: 0.6;
}

/* Select Option Stilleri */
select option {
    padding: 0.5rem;
}

/* Validasyon Başarı Mesajı */
.input-basarili-mesaji {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: #D1FAE5;
    border-left: 4px solid #059669;
    color: #065F46;
    font-size: 0.875rem;
    animation: basariGirisAnimasyonu 0.3s ease-in-out;
}

@keyframes basariGirisAnimasyonu {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Submit Butonu Hata Durumu */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading Durumu */
button.loading {
    position: relative;
    pointer-events: none;
}

button.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    margin-top: -0.5rem;
    margin-left: -0.5rem;
    border: 2px solid #FFFFFF;
    border-top-color: transparent;
    border-radius: 50%;
    animation: yukleniyorAnimasyonu 1s linear infinite;
}

@keyframes yukleniyorAnimasyonu {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Input Validasyon İkonu */
.input-validasyon-ikonu {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #059669;
    font-size: 1rem;
    pointer-events: none;
}

/* Hata Durumunda İkon */
.input-validasyon-ikonu.hata-durumu {
    color: #EF4444;
}

/* Form Grubü Hata Durumu */
.form-grubu-hata {
    border: 2px solid #EF4444;
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: #FEF2F2;
}

/* Form Grubü Başarı Durumu */
.form-grubu-basarili {
    border: 2px solid #059669;
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: #D1FAE5;
}

/* Hata Mesajı Kapatma Butonu */
.hata-mesaji-kapat {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    background: none;
    border: none;
    color: #EF4444;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

.hata-mesaji-kapat:hover {
    color: #B91C1C;
}

/* Input Validasyon Tooltip */
.input-validasyon-tooltip {
    position: relative;
}

.input-validasyon-tooltip::after {
    content: attr(data-validasyon-mesaji);
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: #1F2937;
    color: #FFFFFF;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.input-validasyon-tooltip:hover::after {
    opacity: 1;
}



/* Azaltılmış Hareket */
@media (prefers-reduced-motion: reduce) {

    .input-hata-mesaji,
    .input-basarili-mesaji {
        animation: none;
    }

    .input-hata-mesaji::before {
        animation: none;
    }
}