/* ==========================================================================
   Proje: HIZIRBEY Portal
   Paket: HIZIRBEY Design System
   Bileşen: Form Builder
   Dosya: themes/default/assets/css/hds/components/form/fields.css
   Açıklama: Field, FieldGroup, FormSection ve form action yerleşimleri.
   Mimari: Form Builder layout katmanı.
   Yazar: Mehmet Kalli
   Oluşturuldu: 03.08.2026 01:15
   Ownership: Public Field, FieldGroup, FormSection and action layout
   Contract: .hds-field*, .hds-field-group*, .hds-form-section*(--panel), .hds-form__actions, .hds-form--inline-actions, .hds-form--auto-submit, .hds-form--actions-start, .hds-form--section-grid, .hds-form-section--wide, .hds-form-section--divided
   Güncellendi: 26.10.2026 (bölüm ızgarası, geniş ve ayraçlı bölüm)
   Sürüm: 1.5.0
========================================================================== */

/* =========================================================================
 * >>> Form Builder Layout
 * ========================================================================= */

/*
 * Native hidden state.
 *
 * HDS form bileşenlerinin display:grid/flex kuralları HTML hidden
 * attribute'unun görünürlük davranışını ezmemelidir.
 */
.hds-form [hidden] {
  display: none !important;
}

.hds-form-builder {
  display: grid;
  gap: var(--hds-form-gap, 24px);
}
.hds-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.hds-field__label {
  color: var(--hds-field-label-color, #263b4a);
  font-size: 14px;
  font-weight: 700;
}
.hds-field__required {
  margin-left: 4px;
  color: #b42318;
}
.hds-field__control {
  min-width: 0;
}
/*
 * ---> Field Leading Icon
 *
 * Field::icon() ile verilen dekoratif semantic ikon kontrolün soluna
 * yerleşir; tıklamayı engellemez, metin ikonun sağından başlar.
 */
.hds-field--with-icon .hds-field__control {
  position: relative;
}
.hds-field__icon {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: #66757f;
  pointer-events: none;
  transform: translateY(-50%);
}
.hds-field__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hds-field--with-icon .hds-input,
.hds-field--with-icon .hds-select {
  padding-left: 38px;
}
/* <--- Field Leading Icon */
/*
 * ---> Field Leading Component (opt-in, Field::leading)
 * Kontrolün başında küçük HDS component (ör. Visual); dikey ortalı,
 * tıklamayı engellemez. Boyut: --hds-field-leading-size.
 */
.hds-field--with-leading .hds-field__control {
  position: relative;
}
.hds-field__leading {
  position: absolute;
  top: 50%;
  left: 9px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--hds-field-leading-size, 1.5rem);
  height: var(--hds-field-leading-size, 1.5rem);
  pointer-events: none;
  transform: translateY(-50%);
}
/* Başlangıçtaki HDS Visual yuvaya oturur; kontrol yüksekliği değişmez (T4.4b). */
.hds-field--with-leading .hds-field__leading .hds-visual {
  --hds-visual-size: var(--hds-field-leading-size, 1.5rem);
  --hds-visual-radius: 0.3rem;
}
.hds-field--with-leading .hds-input,
.hds-field--with-leading .hds-select {
  padding-left: calc(var(--hds-field-leading-size, 1.5rem) + 17px);
}
/* <--- Field Leading Component */
.hds-field__help {
  color: #66757f;
  font-size: 12px;
  line-height: 1.4;
}
.hds-field__error {
  color: #b42318;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.is-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.hds-field--choice {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 8px;
}
.hds-field--choice .hds-field__control {
  /* Flex: tek kutucuk satır yüksekliği payı almadan oturur (DOCTYPE, 20.10.2026). */
  display: flex;
  grid-column: 1;
  padding-top: 2px;
}
.hds-field--choice .hds-field__label {
  grid-column: 2;
  font-weight: 500;
  cursor: pointer;
}
.hds-field--choice .hds-field__help,
.hds-field--choice .hds-field__error {
  grid-column: 2;
}
.hds-field-group {
  display: grid;
  grid-template-columns: repeat(var(--hds-field-columns, 1), minmax(0, 1fr));
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.hds-field-group.columns-1 {
  --hds-field-columns: 1;
}
.hds-field-group.columns-2 {
  --hds-field-columns: 2;
}
.hds-field-group.columns-3 {
  --hds-field-columns: 3;
}
.hds-field-group.columns-4 {
  --hds-field-columns: 4;
}
.hds-field-group.gap-sm {
  gap: 8px;
}
.hds-field-group.gap-md {
  gap: 16px;
}
.hds-field-group.gap-lg {
  gap: 24px;
}
.hds-field-group__legend {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  color: #263b4a;
  font-weight: 700;
}
.hds-form-section {
  display: grid;
  gap: 16px;
}
.hds-form-section__header {
  display: grid;
  gap: 4px;
}
.hds-form-section__title {
  margin: 0;
  color: #263b4a;
  font-size: 18px;
}
.hds-form-section__description {
  margin: 0;
  color: #66757f;
}
.hds-form-section__body {
  display: grid;
  gap: 16px;
}
/* >>> Panel (FormSection::panel() · 21.10.2026)
   Kart görünümlü bölüm; başlıkta ikon (titleIcon) solda, başlık + açıklama yanında. */
.hds-form-section--panel {
  box-sizing: border-box;
  min-width: 0;
  padding: 20px 22px 22px;
  border: 1px solid #e3e8ee;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.hds-form-section--panel > .hds-form-section__header {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8edf2;
}
.hds-form-section--panel .hds-form-section__title-icon {
  display: inline-grid;
  place-items: center;
  color: var(--hds-form-section-icon-color, #c58b2b);
}
.hds-form-section--panel .hds-form-section__title-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}
.hds-form-section--panel .hds-form-section__title {
  font-size: 20px;
}
.hds-form-section--panel .hds-form-section__description {
  font-size: 14px;
}
.hds-form-section--panel > .hds-form-section__header:not(:has(> .hds-form-section__title-icon)) {
  grid-template-columns: minmax(0, 1fr);
}
.hds-form-section--panel > .hds-form-section__header:has(> .hds-form-section__description) > .hds-form-section__title-icon {
  grid-row: span 2;
}
/* <<< Panel */
.hds-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .hds-field-group.columns-2,
  .hds-field-group.columns-3,
  .hds-field-group.columns-4 {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Dar ekranda eylemler alt alta, tam genişlik. inlineActions() formları (T3.3b)
     bu kuralı almaz, masaüstündeki gibi yan yana kalır; :where seçici gücünü korur. */
  .hds-form__actions:where(:not(.hds-form--inline-actions *)) {
    align-items: stretch;
    flex-direction: column;
  }
  /* Not + düğme (align('between')) gibi gruplarda tam genişlik düğme alt satıra iner. */
  .hds-form__actions:where(:not(.hds-form--inline-actions *)) .hds-action-group {
    flex-wrap: wrap;
  }
  .hds-form__actions:where(:not(.hds-form--inline-actions *)) .hds-action-group,
  .hds-form__actions:where(:not(.hds-form--inline-actions *)) .hds-action-group__item,
  .hds-form__actions:where(:not(.hds-form--inline-actions *)) .hds-button {
    width: 100%;
  }
}
/* <<< Form Builder Layout */

/* >>> Auto Submit (Form::autoSubmit() · T4.4b, 2026-10-19)
   auto-submit.js formu .is-enhanced yapınca eylemler gizlenir (alan değişince
   form kendiliğinden gönderilir); JS yoksa eylemler görünür kalır. */
.hds-form--auto-submit.is-enhanced .hds-form__actions {
  display: none;
}
/* <<< Auto Submit */

/* >>> Actions start (Form::actionsStart() · T4.5)
   Izgaralı filtre satırlarında eylemler başa ve alta hizalı. */
.hds-form--actions-start > .hds-form__actions {
  align-self: end;
  justify-content: flex-start;
}
/* <<< Actions start */

/* >>> Section grid (Form::sectionGrid() · 26.10.2026)
   Bölümler ızgarada; sütun düzeni --hds-form-section-grid-template kancası.
   Geniş bölüm (FormSection::wide()) ve eylemler tam satır; eylemlerin üstünde ayraç. */
.hds-form--section-grid {
  grid-template-columns: var(--hds-form-section-grid-template, repeat(2, minmax(0, 1fr)));
  align-items: stretch;
}
.hds-form--section-grid > .hds-form-section--wide,
.hds-form--section-grid > .hds-form__actions {
  grid-column: 1 / -1;
}
.hds-form--section-grid > .hds-form__actions {
  padding-top: 14px;
  border-top: 1px solid #e3e8ee;
}
@media (max-width: 64rem) {
  .hds-form--section-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* <<< Section grid */

/* >>> Divided (FormSection::divided() · 26.10.2026)
   Seçenek listesi: ardışık alanlar arasında ince ayraç, anahtar etiketleri kalın. */
.hds-form-section--divided > .hds-form-section__body > .hds-field--switch > .hds-field__label {
  font-weight: 700;
}
.hds-form-section--divided > .hds-form-section__body > .hds-field + .hds-field {
  padding-top: 16px;
  border-top: 1px solid #e8edf2;
}
/* <<< Divided */