/* ==========================================================================
   Teklif / iletişim formu (form.css) — templates/partials/quote-form.php yükler
   Sonuç kutuları · alan hataları · dosya ekleme alanı · açık ve koyu zemin
   Yalnızca base.css tokenları; boşluklar 8px ölçeğinden.
   ========================================================================== */

/* ---------------------------------------------------------------- Sonuç kutuları */
.qform-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2); padding: var(--s-3); border: 1px solid; border-left-width: 4px; border-radius: var(--radius); font-size: 15px; line-height: 1.55; scroll-margin-top: calc(var(--header-h) + var(--s-3)); }
.qform-box:focus { outline: 2px solid currentColor; outline-offset: 3px; }
.qform-box:focus:not(:focus-visible) { outline: none; }
.qform-box__icon .icon { width: 28px; height: 28px; }
.qform-box__body { display: grid; gap: var(--s-1); align-content: start; }
.qform-box__body p { margin: 0; }
.qform-box__title { font-family: var(--font-display); font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; }
.qform-box__meta { display: flex; align-items: center; gap: var(--s-1); font-size: 14px; opacity: .9; }
.qform-box__warn { padding: var(--s-1) var(--s-2); font-size: 14px; font-weight: 600; color: var(--red-700); background: var(--red-50); border: 1px solid #F4B9BC; }

.qform-box--ok { color: #16532C; background: #EEF8F1; border-color: #B7E0C4; border-left-color: #15803D; }
.qform-box--ok .qform-box__icon { color: #15803D; }
.qform-ref { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1); width: max-content; max-width: 100%; padding: var(--s-1) var(--s-2); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text); background: var(--surface); border: 1px dashed #7CBF92; }
.qform-ref strong { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.qform-box__again { margin-top: var(--s-1); color: #16532C; font-weight: 600; }

.qform-box--err { color: var(--red-700); background: var(--red-50); border-color: #F4B9BC; border-left-color: var(--red); }
.qform-box--err .qform-box__icon { color: var(--red); }
.qform-box__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.qform-box__list a { display: inline-block; padding: 2px 0; color: var(--red-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.qform-box__list a:hover { text-decoration-thickness: 2px; }
.qform-box__list strong { font-weight: 600; }

/* Başarıdan sonra alanlar gizli ("Yeni talep" bağlantısı geri açar) */
.qform.is-sent .qform__body { display: none; }
.qform__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }

/* ---------------------------------------------------------------- Alanlar */
/* Yan yana alanlarda ipucu/hata metni bir sütunu uzatınca diğer sütundaki kutu esnemesin */
.qform .field { align-content: start; }
.field-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-soft); }
.field-err { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--red-700); }
.field-err .icon { flex: none; margin-top: 3px; }
.field-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: var(--s-1) 12px; font-size: 14px; line-height: 1.45; color: var(--text); background: var(--steel-100); border-left: 3px solid var(--steel-600); }
.field-note .icon { flex: none; margin-top: 3px; color: var(--steel-700); }
.field__opt { font-weight: 400; color: var(--text-soft); }
.qform .field__label { margin: 0; }

.qform .input[aria-invalid="true"], .qform .textarea[aria-invalid="true"], .qform .select[aria-invalid="true"] { border-color: var(--red); background: var(--red-50); box-shadow: inset 3px 0 0 var(--red); }
.qform .input[aria-invalid="true"]:focus, .qform .textarea[aria-invalid="true"]:focus { border-color: var(--red-700); box-shadow: inset 3px 0 0 var(--red), 0 0 0 3px rgba(225, 31, 38, .22); }
.field--consent.is-invalid .form-consent { padding: 12px; background: var(--red-50); border: 1px solid #F4B9BC; border-left: 3px solid var(--red); }
.form-consent input { width: 18px; height: 18px; }
/* KVKK onayı .field içinde: base.css'teki kalın alan etiketi stilini almasın */
.qform .field--consent .form-consent { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--text-soft); }

/* ---------------------------------------------------------------- Dosya ekleme */
.qform-files { gap: var(--s-1); }
.dropzone { position: relative; display: grid; gap: 4px; padding: var(--s-3) var(--s-2); text-align: center; background: var(--surface); border: 1.5px dashed var(--line-strong); border-radius: var(--radius); transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); }
.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: 14px; font-weight: 400; color: var(--text); cursor: pointer; }
.dropzone__icon { width: 32px; height: 32px; color: var(--red); transition: transform var(--t-fast) var(--ease); }
.dropzone__title { font-weight: 600; font-size: 16px; color: var(--text); }
.dropzone__text { max-width: calc(44 * var(--ch-body)); font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.dropzone__meta { margin: 4px 0 0; font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--text-soft); }
.dropzone:hover, .dropzone.is-over { border-color: var(--graphite); background: var(--steel-50); }
.dropzone:hover .dropzone__icon, .dropzone.is-over .dropzone__icon { transform: translateY(-3px); }
.dropzone.is-over { border-style: solid; box-shadow: 0 0 0 3px rgba(225, 31, 38, .18); }
.dropzone:focus-within { border-color: var(--graphite); box-shadow: 0 0 0 3px rgba(225, 31, 38, .28); }
.qform-files.is-invalid .dropzone { border-color: var(--red); background: var(--red-50); }

.file-list { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.file-list[hidden] { display: none; }
.file-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-1); min-height: var(--s-5); padding: 4px 4px 4px 12px; font-size: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--graphite); }
.file-item__icon { color: var(--steel-600); }
.file-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text); }
.file-item__size { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-soft); white-space: nowrap; }
.file-item__x { display: grid; place-items: center; width: var(--s-5); height: var(--s-5); color: var(--text-muted); background: none; border: 0; border-radius: var(--radius); cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast); }
.file-item__x:hover, .file-item__x:focus-visible { color: #fff; background: var(--graphite); }
.file-item.is-bad { border-color: #F4B9BC; border-left-color: var(--red); background: var(--red-50); }
.file-item.is-bad .file-item__icon, .file-item.is-bad .file-item__size { color: var(--red-700); }

/* ---------------------------------------------------------------- Koyu zemin (sektör, ürün, hizmet teklif bölümleri) */
.qform.on-dark .field-hint, .qform.on-dark .field__opt, .qform.on-dark .dropzone__meta { color: var(--on-dark-muted); }
.qform.on-dark .field__label { color: var(--on-dark); }
.qform.on-dark .field-err { color: #FF9EA1; }
.qform.on-dark .field-note { color: var(--on-dark); background: var(--graphite-3); border-left-color: var(--steel-400); }
.qform.on-dark .field-note .icon { color: var(--steel-300); }
.qform.on-dark .input[aria-invalid="true"], .qform.on-dark .textarea[aria-invalid="true"] { background: #2A1517; border-color: #FF6B70; box-shadow: inset 3px 0 0 #FF6B70; }
.qform.on-dark .field--consent.is-invalid .form-consent { background: #2A1517; border-color: #7A2A2E; border-left-color: #FF6B70; }
.qform.on-dark .dropzone { background: var(--graphite-2); border-color: var(--steel-700); }
.qform.on-dark .dropzone__title { color: var(--on-dark); }
.qform.on-dark .dropzone__text { color: var(--on-dark-muted); }
.qform.on-dark .dropzone:hover, .qform.on-dark .dropzone.is-over { background: var(--graphite-3); border-color: var(--steel-400); }
.qform.on-dark .dropzone:focus-within { border-color: var(--steel-300); }
.qform.on-dark .qform-files.is-invalid .dropzone { background: #2A1517; border-color: #FF6B70; }
.qform.on-dark .file-item { background: var(--graphite-2); border-color: var(--steel-800); border-left-color: var(--steel-400); }
.qform.on-dark .file-item__name { color: var(--on-dark); }
.qform.on-dark .file-item__size, .qform.on-dark .file-item__icon { color: var(--on-dark-muted); }
.qform.on-dark .file-item__x { color: var(--on-dark-muted); }
.qform.on-dark .file-item__x:hover, .qform.on-dark .file-item__x:focus-visible { color: var(--ink); background: var(--on-dark); }
.qform.on-dark .file-item.is-bad { background: #2A1517; border-color: #7A2A2E; border-left-color: #FF6B70; }
.qform.on-dark .file-item.is-bad .file-item__icon, .qform.on-dark .file-item.is-bad .file-item__size { color: #FF9EA1; }
.qform.on-dark .form-note a { color: var(--on-dark); }
.qform.on-dark .field--consent .form-consent { color: var(--on-dark-muted); }

@media (max-width: 479px) {
  .qform-box { grid-template-columns: minmax(0, 1fr); padding: var(--s-2); }
  .qform-box__icon { display: none; }
  .file-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .file-item__size { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dropzone__icon { transition: none; } }