/* ============================================
   FORM FIELDS — site genelinde tek form alanı standardı
   input / select / textarea ve etiketleri her sayfada aynı görünsün.
   Hem editorial (partials.head) hem eski layout'lar (layouts.app/guest)
   bu dosyayı en son yükler; sayfa içi stil yazmak yerine token'ları kullanın.
   ============================================ */

:root {
    /* Ödeme (BiletBank) formu görünümü: krem zemin, sıcak kahve çerçeve ve etiketler */
    --form-field-bg:           #f5f2ec;
    --form-field-bg-focus:     #ffffff;
    --form-field-border-width: 1.5px;
    --form-field-border:       rgba(42,31,20,.15);
    --form-field-border-hover: rgba(42,31,20,.28);
    --form-field-focus:        #0d47a1;
    --form-field-focus-ring:   rgba(13,71,161,.12);
    --form-field-text:         #2a1f14;
    --form-field-placeholder:  #8a7a6a;
    --form-field-invalid:      #dc2626;
    --form-field-disabled-bg:  #ede4d3;
    --form-label-color:        #6b5d4e;
    --form-required-color:     #6b5d4e;
}

/* Tek form alanı standardı (ödeme formu görünümü): input, select ve textarea
   sitenin her yerinde aynı görünsün. Sayfa içi override yazmak yerine bu
   token'ları kullanın. */
.form-input,
.form-control,
.form-select {
    width: 100%;
    border: var(--form-field-border-width) solid var(--form-field-border);
    border-radius: var(--radius, 12px);
    padding: 10px 14px;
    min-height: 46px;
    font-size: 16px; /* iOS zoom önleme */
    line-height: 1.4;
    color: var(--form-field-text);
    background-color: var(--form-field-bg);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    font-family: var(--font-sans, "Instrument Sans", -apple-system, sans-serif);
}
textarea.form-input,
textarea.form-control { min-height: 110px; resize: vertical; line-height: 1.5; }
.form-input::placeholder,
.form-control::placeholder { color: var(--form-field-placeholder); }
.form-input:hover,
.form-control:hover,
.form-select:hover { border-color: var(--form-field-border-hover); }
.form-input:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--form-field-focus);
    box-shadow: 0 0 0 3px var(--form-field-focus-ring);
    background-color: var(--form-field-bg-focus);
}
.form-input.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--form-field-invalid); }
.form-input:disabled,
.form-control:disabled,
.form-select:disabled { background-color: var(--form-field-disabled-bg); color: var(--form-field-placeholder); cursor: not-allowed; }
/* Restore Tailwind pl-*/pr-* utilities that the padding shorthand above overrides */
.form-input.pl-8  { padding-left: 2rem; }
.form-input.pl-10 { padding-left: 2.5rem; }
.form-input.pl-12 { padding-left: 3rem; }
.form-input.pr-8  { padding-right: 2rem; }
.form-input.pr-10 { padding-right: 2.5rem; }

.form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--form-label-color);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
}
.form-label.required::after { content: " *"; margin-left: 0; color: var(--form-required-color); }
.form-label i { color: var(--form-field-focus); font-size: 13px; }

/* Klavye odağı: halka yerine kutu gölgesi */
.form-input:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: none !important;
    border-color: var(--form-field-focus) !important;
    box-shadow: 0 0 0 3px var(--form-field-focus-ring) !important;
}

/* Select: her yerde aynı ok ikonu, metnin üstüne binmesin */
.form-select,
select.form-input,
select.form-control {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    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='%236b5d4e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 10px;
}
select.form-input[multiple],
select.form-control[multiple],
.form-select[multiple],
select.form-input[size]:not([size="1"]),
.form-select[size]:not([size="1"]) { padding-right: 14px; background-image: none; }