/**
 * form_widgets.css - Merkezi Form Widget Stilleri
 *
 * Tüm form inputları için tutarlı görünüm sağlar:
 * - Telefon, Email, URL input stilleri
 * - Flatpickr tarih seçici teması
 * - Validation feedback stilleri
 *
 * @version 2.0.0
 * @date 2026-01-22
 */

/* ==========================================================================
   CSS DEĞİŞKENLERİ
   ========================================================================== */

:root {
    /* Ana Renkler */
    --dp-primary: #0d6efd;
    --dp-primary-hover: #0a58ca;
    --dp-primary-light: rgba(13, 110, 253, 0.1);
    --dp-primary-subtle: #cfe2ff;

    /* Durum Renkleri */
    --dp-success: #198754;
    --dp-success-light: rgba(25, 135, 84, 0.1);
    --dp-danger: #dc3545;
    --dp-danger-light: rgba(220, 53, 69, 0.1);
    --dp-warning: #ffc107;

    /* Nötr Renkler */
    --dp-border: #dee2e6;
    --dp-border-focus: #86b7fe;
    --dp-text: #212529;
    --dp-text-muted: #6c757d;
    --dp-bg: #ffffff;
    --dp-bg-hover: #f8f9fa;

    /* Gölgeler */
    --dp-shadow-focus: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --dp-shadow-dropdown: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   GENEL INPUT STİLLERİ
   ========================================================================== */

/* Telefon, Email, URL inputları için ortak stiller */
.form-phone,
.form-email,
.form-url,
.form-date {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-phone:focus,
.form-email:focus,
.form-url:focus,
.form-date:focus {
    border-color: var(--dp-border-focus);
    box-shadow: var(--dp-shadow-focus);
}

/* Placeholder stilleri */
.form-phone::placeholder,
.form-email::placeholder,
.form-url::placeholder,
.form-date::placeholder {
    color: var(--dp-text-muted);
    opacity: 0.7;
}

/* ==========================================================================
   TELEFON INPUT
   ========================================================================== */

.form-phone,
input[type="tel"],
.phone-input {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    letter-spacing: 0.5px;
}

/* Maskelenmiş placeholder için */
.form-phone[data-dp-widget-phone="true"]::placeholder {
    font-family: inherit;
}

/* ==========================================================================
   EMAIL INPUT
   ========================================================================== */

.form-email,
input[type="email"] {
    text-transform: lowercase;
}

/* Email icon (opsiyonel) */
.input-group .form-email + .input-group-text i {
    color: var(--dp-text-muted);
}

/* ==========================================================================
   URL INPUT
   ========================================================================== */

.form-url,
input[type="url"],
.website-input {
    /* URL'ler için monospace */
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 0.9em;
}

/* URL prefix gösterimi */
.url-input-wrapper {
    position: relative;
}

.url-input-wrapper .url-prefix {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dp-text-muted);
    font-size: 0.875rem;
    pointer-events: none;
}

.url-input-wrapper .form-url {
    padding-left: 4rem;
}

/* ==========================================================================
   VALIDATION FEEDBACK
   ========================================================================== */

/* Valid state */
.form-phone.is-valid,
.form-email.is-valid,
.form-url.is-valid,
.form-date.is-valid {
    border-color: var(--dp-success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
}

/* Invalid state */
.form-phone.is-invalid,
.form-email.is-invalid,
.form-url.is-invalid,
.form-date.is-invalid {
    border-color: var(--dp-danger);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
}

/* Validation feedback mesajları */
.dp-validation-feedback {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.dp-validation-feedback.invalid-feedback {
    color: var(--dp-danger);
}

.dp-validation-feedback.valid-feedback {
    color: var(--dp-success);
}

/* ==========================================================================
   FLATPICKR TARİH SEÇİCİ - MODERN MİNİMAL TEMA (v2.1)
   Proje Indigo teması ile uyumlu, kolay yıl/ay seçimi
   ========================================================================== */

/* CSS Değişkenleri - Indigo Tema */
.flatpickr-calendar {
    --fp-primary: #6366f1;
    --fp-primary-hover: #4f46e5;
    --fp-primary-light: #eef2ff;
    --fp-primary-subtle: #e0e7ff;
    --fp-text: #1e293b;
    --fp-text-muted: #64748b;
    --fp-border: #e2e8f0;
    --fp-bg: #ffffff;
    --fp-bg-hover: #f8fafc;
    --fp-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.12);
}

/* Ana container */
.flatpickr-calendar {
    background: var(--fp-bg);
    border: 1px solid var(--fp-border);
    border-radius: 16px;
    box-shadow: var(--fp-shadow);
    font-family: inherit;
    padding: 16px;
    width: 320px;
}

.flatpickr-calendar.open {
    animation: dpFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    display: none;
}

@keyframes dpFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Ay/Yıl başlık alanı */
.flatpickr-months {
    padding: 0 0 12px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--fp-border);
}

.flatpickr-months .flatpickr-month {
    height: auto;
}

.flatpickr-current-month {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fp-text);
    padding: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    left: 0;
    position: relative;
}

/* Ay seçici dropdown */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--fp-bg);
    border: 1px solid var(--fp-border);
    border-radius: 8px;
    padding: 6px 28px 6px 12px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--fp-text);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    transition: all 0.15s ease;
    min-width: 110px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    border-color: var(--fp-primary);
    background-color: var(--fp-primary-light);
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus {
    outline: none;
    border-color: var(--fp-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Yıl input - numInputWrapper içinde */
.flatpickr-current-month .numInputWrapper {
    width: auto;
    position: relative;
    display: inline-flex;
    align-items: center;
}

.flatpickr-current-month input.cur-year {
    background: var(--fp-bg);
    border: 1px solid var(--fp-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--fp-text);
    width: 72px;
    text-align: center;
    transition: all 0.15s ease;
    -moz-appearance: textfield;
}

.flatpickr-current-month input.cur-year::-webkit-outer-spin-button,
.flatpickr-current-month input.cur-year::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.flatpickr-current-month input.cur-year:hover {
    border-color: var(--fp-primary);
    background-color: var(--fp-primary-light);
}

.flatpickr-current-month input.cur-year:focus {
    outline: none;
    border-color: var(--fp-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Yıl yukarı/aşağı okları - GÖSTERİLİYOR */
.flatpickr-current-month .numInputWrapper span {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 50%;
    border: none;
    background: var(--fp-bg-hover);
    cursor: pointer;
    position: absolute;
    right: 1px;
    opacity: 1;
    transition: all 0.15s ease;
}

.flatpickr-current-month .numInputWrapper span.arrowUp {
    top: 1px;
    border-radius: 0 7px 0 0;
    border-bottom: 1px solid var(--fp-border);
}

.flatpickr-current-month .numInputWrapper span.arrowDown {
    bottom: 1px;
    border-radius: 0 0 7px 0;
}

.flatpickr-current-month .numInputWrapper span:hover {
    background: var(--fp-primary-light);
}

.flatpickr-current-month .numInputWrapper span::after {
    content: '';
    border: solid var(--fp-text-muted);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
}

.flatpickr-current-month .numInputWrapper span.arrowUp::after {
    transform: rotate(-135deg);
    margin-top: 2px;
}

.flatpickr-current-month .numInputWrapper span.arrowDown::after {
    transform: rotate(45deg);
    margin-bottom: 2px;
}

/* Yıl input hover'da okları göster */
.flatpickr-current-month .numInputWrapper:hover span,
.flatpickr-current-month .numInputWrapper input:focus ~ span {
    opacity: 1;
}

/* Ay navigasyon okları (sol/sağ) */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 8px;
    fill: var(--fp-text-muted);
    color: var(--fp-text-muted);
    border-radius: 8px;
    transition: all 0.15s ease;
    position: static;
    height: auto;
    top: auto;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: var(--fp-primary-light);
    fill: var(--fp-primary);
    color: var(--fp-primary);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 14px;
    height: 14px;
}

/* Haftanın günleri başlığı */
.flatpickr-weekdays {
    background: transparent;
    padding: 8px 0;
    height: auto;
}

.flatpickr-weekday {
    color: var(--fp-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Günler grid */
.flatpickr-days {
    width: 100%;
}

.dayContainer {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 4px 0;
}

/* Gün hücreleri */
.flatpickr-day {
    max-width: 38px;
    height: 38px;
    line-height: 38px;
    border-radius: 10px;
    color: var(--fp-text);
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.15s ease;
    border: none;
    margin: 2px;
}

.flatpickr-day:hover {
    background: var(--fp-primary-light);
    border: none;
}

/* Bugün */
.flatpickr-day.today {
    background: transparent;
    border: 2px solid var(--fp-primary) !important;
    color: var(--fp-primary);
    font-weight: 700;
}

.flatpickr-day.today:hover {
    background: var(--fp-primary-light);
}

/* Seçili gün */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.today {
    background: linear-gradient(135deg, var(--fp-primary) 0%, var(--fp-primary-hover) 100%);
    border: none !important;
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Devre dışı günler */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--fp-text-muted);
    opacity: 0.4;
    background: transparent;
    text-decoration: line-through;
}

/* Önceki/sonraki ay günleri */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--fp-text-muted);
    opacity: 0.4;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: var(--fp-bg-hover);
}

/* Aralık seçimi */
.flatpickr-day.inRange {
    background: var(--fp-primary-light);
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: linear-gradient(135deg, var(--fp-primary) 0%, var(--fp-primary-hover) 100%);
    color: white;
}

.flatpickr-day.startRange {
    border-radius: 10px 0 0 10px;
}

.flatpickr-day.endRange {
    border-radius: 0 10px 10px 0;
}

/* Hafta numaraları */
.flatpickr-weekwrapper .flatpickr-weekday {
    color: var(--fp-text-muted);
}

.flatpickr-weekwrapper span.flatpickr-day {
    color: var(--fp-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

/* ==========================================================================
   INPUT GROUP İÇİN DÜZELTMELER
   ========================================================================== */

.input-group .form-phone,
.input-group .form-email,
.input-group .form-url,
.input-group .form-date {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .input-group-text {
    background: var(--dp-bg-hover);
    border-color: var(--dp-border);
    color: var(--dp-text-muted);
}

/* ==========================================================================
   DARK MODE DESTEĞİ (OPSİYONEL)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --dp-bg: #212529;
        --dp-bg-hover: #343a40;
        --dp-text: #f8f9fa;
        --dp-text-muted: #adb5bd;
        --dp-border: #495057;
    }
}

/* ==========================================================================
   BUGÜN BUTONU (OPSİYONEL)
   ========================================================================== */

.flatpickr-calendar .flatpickr-today-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    border: none;
    border-top: 1px solid var(--fp-border);
    background: transparent;
    color: var(--fp-primary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 0 0 12px 12px;
}

.flatpickr-calendar .flatpickr-today-btn:hover {
    background: var(--fp-primary-light);
}

/* ==========================================================================
   TIME PICKER STİLLERİ
   ========================================================================== */

.flatpickr-time {
    border-top: 1px solid var(--fp-border);
    margin-top: 8px;
    padding-top: 12px;
}

.flatpickr-time input {
    font-size: 1.1rem !important;
    font-weight: 600;
    color: var(--fp-text);
}

.flatpickr-time .numInputWrapper {
    background: var(--fp-bg-hover);
    border-radius: 8px;
}

.flatpickr-time .flatpickr-time-separator {
    color: var(--fp-text-muted);
    font-weight: 600;
}

.flatpickr-time .flatpickr-am-pm {
    background: var(--fp-primary-light);
    color: var(--fp-primary);
    border-radius: 8px;
    font-weight: 600;
}

/* ==========================================================================
   MOBİL UYUMLULUK
   ========================================================================== */

@media (max-width: 576px) {
    .flatpickr-calendar {
        width: 100%;
        max-width: calc(100vw - 2rem);
        padding: 12px;
        border-radius: 12px;
    }

    .flatpickr-day {
        max-width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 0.8rem;
        margin: 1px;
        border-radius: 8px;
    }

    .flatpickr-current-month {
        font-size: 0.85rem;
        flex-wrap: wrap;
        gap: 6px;
    }

    .flatpickr-current-month .flatpickr-monthDropdown-months {
        min-width: 90px;
        padding: 5px 24px 5px 10px;
        font-size: 0.85rem;
    }

    .flatpickr-current-month input.cur-year {
        width: 64px;
        padding: 5px 8px;
        font-size: 0.85rem;
    }

    .flatpickr-months .flatpickr-prev-month,
    .flatpickr-months .flatpickr-next-month {
        padding: 6px;
    }

    .flatpickr-weekday {
        font-size: 0.65rem;
    }
}

/* ==========================================================================
   ANİMASYONLAR
   ========================================================================== */

/* Focus animasyonu */
@keyframes dpFocusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(13, 110, 253, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    }
}

.form-phone:focus,
.form-email:focus,
.form-url:focus,
.form-date:focus {
    animation: dpFocusPulse 0.3s ease-out;
}

/* Validation shake animasyonu */
@keyframes dpShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.is-invalid {
    animation: dpShake 0.3s ease-out;
}