/* ==========================================================================
   FERRON · teklif / iletişim formu (form.css) — templates/partials/quote-form.php yükler
   Yumuşak, oval alanlar · sonuç kutuları · alan hataları · dosya ekleme alanı
   ========================================================================== */

/* ---------------------------------------------------------------- Alanlar */
.form { display: block; }
.qform__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.qform.is-sent .qform__body { display: none; }
.form-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 6px; align-content: start; }
.field > label, .field__label { font-weight: 600; font-size: .875rem; color: var(--navy-900); margin: 0; }
.req { color: var(--danger); }
.field__opt { font-weight: 400; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  background: #fff; color: var(--ink); font-size: 1rem; line-height: 1.4; transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.select { padding-inline-end: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6984' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px; }
[dir="rtl"] .select { background-position: left 16px center; }
.input::placeholder, .textarea::placeholder { color: var(--subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--blue-200); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: var(--ring); }
.form-note { margin: 0; font-size: .8125rem; color: var(--muted); line-height: 1.5; }
.qform__req { margin-bottom: -4px; }
.hp-field { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-hint { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--muted); }
.field-err { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.45; color: var(--danger); }
.field-err .icon { flex: none; margin-top: 3px; }
.field-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 14px; font-size: .875rem; line-height: 1.45; color: var(--navy-800); background: var(--blue-50); border-radius: var(--r-sm); }
.field-note .icon { flex: none; margin-top: 3px; color: var(--blue-500); }
.qform .input[aria-invalid="true"], .qform .textarea[aria-invalid="true"], .qform .select[aria-invalid="true"] { border-color: var(--danger); background: #FFF6F5; }
.qform .input[aria-invalid="true"]:focus, .qform .textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(194, 54, 47, .2); }
.form-consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.form-consent input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--navy-900); }
.qform .field--consent .form-consent { font-size: .8125rem; font-weight: 400; line-height: 1.5; color: var(--muted); }
.field--consent.is-invalid .form-consent { padding: 12px; border-radius: var(--r-sm); background: #FFF6F5; border: 1px solid #F0C2BF; }
.qform [type="submit"] { width: 100%; }
@media (min-width: 640px) { .qform [type="submit"] { width: auto; min-width: 240px; } }

/* ---------------------------------------------------------------- Sonuç kutuları */
.qform-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 22px; border-radius: var(--r-lg); font-size: .9375rem; line-height: 1.55; scroll-margin-top: calc(var(--header-h) + 40px); }
.qform-box:focus { outline: 2px solid currentColor; outline-offset: 3px; }
.qform-box:focus:not(:focus-visible) { outline: none; }
.qform-box__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; }
.qform-box__icon .icon { width: 26px; height: 26px; }
.qform-box__body { display: grid; gap: 8px; align-content: start; }
.qform-box__body p { margin: 0; }
.qform-box__title { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
.qform-box__meta { display: flex; align-items: center; gap: 8px; font-size: .875rem; opacity: .9; }
.qform-box__warn { padding: 8px 12px; border-radius: var(--r-sm); font-size: .875rem; font-weight: 600; color: #8A2A25; background: #FFF0EE; }
.qform-box--ok { color: #0F4D33; background: #EAF7F0; border: 1px solid #BFE5CF; }
.qform-box--ok .qform-box__icon { background: #fff; color: var(--success); }
.qform-ref { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px; width: max-content; max-width: 100%; padding: 8px 14px; border-radius: var(--r-pill); background: #fff; font-size: .8125rem; font-weight: 600; color: var(--text); }
.qform-ref strong { font-family: var(--font-display); font-size: 1.375rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.qform-box__again { margin-top: 4px; color: #0F4D33; }
.qform-box--err { color: #8A2A25; background: #FFF4F3; border: 1px solid #F0C2BF; }
.qform-box--err .qform-box__icon { background: #fff; color: var(--danger); }
.qform-box__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.qform-box__list a { color: #8A2A25; }
.qform-box + .qform__body { margin-top: 20px; }

/* ---------------------------------------------------------------- Dosya ekleme */
.qform-files { gap: 8px; }
.dropzone { position: relative; display: grid; gap: 4px; padding: 22px 16px; text-align: center; background: var(--soft); border: 1.5px dashed var(--line-2); border-radius: var(--r-md); transition: border-color .2s, background-color .2s, box-shadow .2s; }
.dropzone__input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.qform .dropzone__label { display: grid; justify-items: center; gap: 4px; font-size: .875rem; font-weight: 400; color: var(--text); cursor: pointer; }
.dropzone__icon { width: 30px; height: 30px; color: var(--blue-500); transition: transform .2s var(--ease); }
.dropzone__title { font-weight: 700; font-family: var(--font-display); font-size: .9375rem; color: var(--ink); }
.dropzone__text { max-width: calc(44 * var(--ch-body)); font-size: .8125rem; line-height: 1.45; color: var(--muted); }
.dropzone__meta { margin: 4px 0 0; font-size: .75rem; color: var(--subtle); }
.dropzone:hover, .dropzone.is-over { border-color: var(--blue-400); background: var(--blue-50); }
.dropzone:hover .dropzone__icon, .dropzone.is-over .dropzone__icon { transform: translateY(-3px); }
.dropzone:focus-within { border-color: var(--blue-500); box-shadow: var(--ring); }
.qform-files.is-invalid .dropzone { border-color: var(--danger); background: #FFF6F5; }
.file-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.file-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 48px; padding: 4px 4px 4px 14px; border-radius: var(--r-sm); font-size: .875rem; background: #fff; border: 1px solid var(--line); }
.file-item__icon { color: var(--blue-500); }
.file-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text); }
.file-item__size { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.file-item__x { display: grid; place-items: center; width: 40px; height: 40px; color: var(--muted); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.file-item__x:hover, .file-item__x:focus-visible { color: #fff; background: var(--navy-900); }
.file-item.is-bad { border-color: #F0C2BF; background: #FFF6F5; }
.file-item.is-bad .file-item__icon, .file-item.is-bad .file-item__size { color: var(--danger); }

/* ---------------------------------------------------------------- Koyu zemin (gerekirse) */
.qform.on-dark .field > label, .qform.on-dark .field__label { color: #fff; }
.qform.on-dark .field-hint, .qform.on-dark .form-note, .qform.on-dark .field__opt { color: rgba(255, 255, 255, .65); }
.qform.on-dark .dropzone { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .25); }
.qform.on-dark .dropzone__title { color: #fff; }

@media (max-width: 479px) {
  .qform-box { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .qform-box__icon { display: none; }
  .file-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .file-item__size { display: none; }
}
