/* ============================================
   📝 INPUTS — inputs.css
   Kullanım: <div class="form-group"> + <input class="form-input">
   ============================================ */

/* ── Form Group ── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ── Label ── */
.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-base);
  line-height: 1.4;
}

.form-label .required {
  color: var(--color-danger);
  margin-left: 2px;
}

/* ── Base Input ── */
.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-base);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  line-height: 1.5;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-placeholder);
}

.form-input:hover:not(:disabled):not(.input-error),
.form-select:hover:not(:disabled),
.form-textarea:hover:not(:disabled) {
  border-color: #94a3b8;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.15);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background-color: #f1f5f9;
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ── Boyutlar ── */
.input-sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

.input-lg {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  border-radius: var(--radius-lg);
}

/* ── Durum Renkleri ── */
.input-success {
  border-color: var(--color-success) !important;
}
.input-success:focus {
  box-shadow: 0 0 0 3px rgb(34 197 94 / 0.15) !important;
}

.input-error {
  border-color: var(--color-danger) !important;
}
.input-error:focus {
  box-shadow: 0 0 0 3px rgb(239 68 68 / 0.15) !important;
}

.input-warning {
  border-color: var(--color-warning) !important;
}
.input-warning:focus {
  box-shadow: 0 0 0 3px rgb(245 158 11 / 0.15) !important;
}

/* ── Mesajlar ── */
.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.form-error-msg {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-success-msg {
  font-size: var(--font-size-xs);
  color: var(--color-success);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Input Group (prefix/suffix) ── */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .form-input {
  flex: 1;
}

.input-group-prefix,
.input-group-suffix {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background-color: #f1f5f9;
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  transition: border-color var(--transition-fast);
}

.input-group-prefix {
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group-suffix {
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group .form-input:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.input-group .form-input:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.input-group .form-input:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group:focus-within .input-group-prefix,
.input-group:focus-within .input-group-suffix {
  border-color: var(--color-primary);
}

/* ── Input İcon ── */
.input-wrapper {
  position: relative;
}

.input-icon-left,
.input-icon-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.input-icon-left  { left: var(--space-3); }
.input-icon-right { right: var(--space-3); }

.has-icon-left  .form-input { padding-left: 2.5rem; }
.has-icon-right .form-input { padding-right: 2.5rem; }

/* ── Password Göster/Gizle ── */
.input-toggle-pass {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.input-toggle-pass:hover { color: var(--color-text-base); }

/* ── Floating Label ── */
.form-floating {
  position: relative;
}

.form-floating .form-input,
.form-floating .form-select {
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}

.form-floating .form-label {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  transform: translateY(-50%);
  font-size: var(--font-size-sm);
  color: var(--color-text-placeholder);
  pointer-events: none;
  transition: all var(--transition-base);
  transform-origin: left top;
  font-weight: var(--font-weight-normal);
}

.form-floating .form-input:focus ~ .form-label,
.form-floating .form-input:not(:placeholder-shown) ~ .form-label,
.form-floating .form-select:focus ~ .form-label {
  top: var(--space-2);
  transform: translateY(0) scale(0.80);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

/* ── Textarea ── */
.form-textarea {
  resize: vertical;
  min-height: 6rem;
}

.form-textarea.no-resize {
  resize: none;
}

/* ── Select ── */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* ── Character count ── */
.input-char-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: right;
}
.input-char-count.over-limit {
  color: var(--color-danger);
  font-weight: var(--font-weight-medium);
}

/* ── Search Input ── */
.input-search {
  border-radius: var(--radius-full);
  padding-left: 2.5rem;
}


/* ════════════════════════════════════════════
   📁 FILE INPUT
   ════════════════════════════════════════════ */

.form-file {
  display: block;
  width: 100%;
  font-size: var(--font-size-sm);
  color: var(--color-text-base);
  cursor: pointer;
}

.form-file::file-selector-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  margin-right: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.form-file::file-selector-button:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Drag & Drop alan */
.file-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background-color: #f8fafc;
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--transition-base),
    background-color var(--transition-base);
}

.file-dropzone:hover,
.file-dropzone.drag-over {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.file-dropzone input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.file-dropzone-icon {
  color: var(--color-text-muted);
  width: 2.5rem;
  height: 2.5rem;
}

.file-dropzone-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-base);
}

.file-dropzone-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.file-dropzone-hint span {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  cursor: pointer;
}


/* ════════════════════════════════════════════
   🎚 RANGE SLIDER
   ════════════════════════════════════════════ */

.form-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  outline: none;
  cursor: pointer;
  padding: 0;
  border: none;
  transition: background var(--transition-fast);
}

/* Track fill via JS inline style — see toggle.js */
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-sm);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.form-range::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
}

.form-range:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgb(99 102 241 / 0.2), var(--shadow-sm);
  transform: scale(1.1);
}

.form-range:focus-visible {
  outline: 3px solid rgb(99 102 241 / 0.3);
  outline-offset: 2px;
}

.form-range:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Range wrapper ile değer gösterimi */
.range-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.range-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.range-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  min-width: 2.5rem;
  text-align: center;
}

.range-limits {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}


/* ════════════════════════════════════════════
   🎨 COLOR PICKER
   ════════════════════════════════════════════ */

.form-color {
  -webkit-appearance: none;
  appearance: none;
  width: 3rem;
  height: 2.5rem;
  padding: 3px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.form-color:hover  { border-color: var(--color-primary); }
.form-color:focus  { outline: 3px solid rgb(99 102 241 / 0.2); }

.form-color::-webkit-color-swatch-wrapper { padding: 0; }
.form-color::-webkit-color-swatch         { border: none; border-radius: var(--radius-sm); }
.form-color::-moz-color-swatch            { border: none; border-radius: var(--radius-sm); }

/* Renk seçici + metin input kombinasyonu */
.color-input-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.color-input-group .form-color {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.5rem;
}

.color-input-group .form-input {
  flex: 1;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.05em;
}

/* Renk paleti seçici */
.color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.color-swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
  position: relative;
}

.color-swatch:hover {
  transform: scale(1.15);
  border-color: var(--color-text-base);
}

.color-swatch.selected {
  border-color: var(--color-text-base);
  transform: scale(1.1);
}

.color-swatch.selected::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.35);
}


/* ════════════════════════════════════════════
   📅 DATE / TIME INPUT
   ════════════════════════════════════════════ */

.form-date,
.form-time,
.form-datetime {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-family: inherit;
  color: var(--color-text-base);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.form-date:focus,
.form-time:focus,
.form-datetime:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.15);
}

.form-date::-webkit-calendar-picker-indicator,
.form-time::-webkit-calendar-picker-indicator,
.form-datetime::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  filter: invert(40%) sepia(60%) saturate(400%) hue-rotate(210deg);
}

.form-date::-webkit-calendar-picker-indicator:hover,
.form-time::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}


/* ════════════════════════════════════════════
   🔢 PIN / OTP INPUT
   ════════════════════════════════════════════ */

.otp-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.otp-input {
  width: 3rem;
  height: 3.25rem;
  text-align: center;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-base);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  caret-color: var(--color-primary);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.otp-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.2);
  background-color: var(--color-primary-light);
}

.otp-input.filled {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
}

.otp-input.otp-error {
  border-color: var(--color-danger);
  background-color: var(--color-danger-light);
  animation: otp-shake 300ms ease;
}

.otp-separator {
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  user-select: none;
  padding: 0 var(--space-1);
}

@keyframes otp-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60%  { transform: translateX(-4px); }
  40%, 80%  { transform: translateX(4px); }
}

/* Boyutlar */
.otp-group.otp-sm .otp-input { width: 2.5rem; height: 2.75rem; font-size: var(--font-size-lg); }
.otp-group.otp-lg .otp-input { width: 3.5rem; height: 3.75rem; font-size: 1.5rem; }


/* ════════════════════════════════════════════
   🏷 TAG / CHIP INPUT
   ════════════════════════════════════════════ */

.tag-input-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  cursor: text;
  min-height: 2.75rem;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.tag-input-wrapper:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.15);
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  user-select: none;
  animation: chip-in 150ms ease;
}

@keyframes chip-in {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.tag-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-primary);
  padding: 0;
  line-height: 1;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.tag-chip-remove:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.tag-input-field {
  flex: 1;
  min-width: 5rem;
  border: none;
  outline: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-base);
  background: transparent;
  padding: 2px var(--space-1);
  font-family: inherit;
}

.tag-input-field::placeholder {
  color: var(--color-text-placeholder);
}

/* Chip varyantları */
.tag-chip.chip-secondary { background-color: #f1f5f9; color: var(--color-secondary); }
.tag-chip.chip-success   { background-color: var(--color-success-light); color: var(--color-success-hover); }
.tag-chip.chip-danger    { background-color: var(--color-danger-light);  color: var(--color-danger-hover); }
.tag-chip.chip-warning   { background-color: var(--color-warning-light); color: var(--color-warning-hover); }


/* ════════════════════════════════════════════
   ⭐ RATING INPUT
   ════════════════════════════════════════════ */

.rating-group {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--space-1);
  width: fit-content;
}

.rating-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.rating-group label {
  cursor: pointer;
  font-size: 1.75rem;
  color: #d1d5db;
  transition: color var(--transition-fast), transform var(--transition-fast);
  line-height: 1;
}

.rating-group label::before {
  content: '★';
}

/* Seçili ve hover */
.rating-group input:checked ~ label,
.rating-group label:hover,
.rating-group label:hover ~ label {
  color: var(--color-warning);
}

.rating-group label:hover {
  transform: scale(1.15);
}

/* Boyutlar */
.rating-sm label { font-size: 1.25rem; }
.rating-lg label { font-size: 2.25rem; }


/* ════════════════════════════════════════════
   📊 PROGRESS / STEP FORM
   ════════════════════════════════════════════ */

.form-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  margin-bottom: var(--space-8);
}

.step-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1.25rem;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: var(--color-border);
  transition: background-color var(--transition-slow);
}

.step-item.completed:not(:last-child)::after {
  background-color: var(--color-primary);
}

.step-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  position: relative;
  z-index: 1;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
}

.step-item.active   .step-circle {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-light);
}

.step-item.completed .step-circle {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.step-label {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-align: center;
}

.step-item.active    .step-label { color: var(--color-primary); }
.step-item.completed .step-label { color: var(--color-text-base); }


/* ════════════════════════════════════════════
   🔁 INPUT NUMBER (Artı/Eksi)
   ════════════════════════════════════════════ */

.number-input-group {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.number-input-group:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.15);
}

.number-input-group .form-input {
  border: none;
  border-radius: 0;
  text-align: center;
  -moz-appearance: textfield;
  box-shadow: none !important;
  padding: var(--space-2) var(--space-3);
}

.number-input-group .form-input::-webkit-outer-spin-button,
.number-input-group .form-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  background-color: #f1f5f9;
  border: none;
  cursor: pointer;
  color: var(--color-text-base);
  font-size: 1.25rem;
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  user-select: none;
}

.number-btn:hover:not(:disabled) {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.number-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ════════════════════════════════════════════
   🔍 AUTOCOMPLETE / DATALIST
   ════════════════════════════════════════════ */

.autocomplete-wrapper {
  position: relative;
}

.autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  max-height: 15rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base),
    transform var(--transition-base);
}

.autocomplete-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.autocomplete-item {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-base);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  gap: var(--space-2);
}

.autocomplete-item:hover,
.autocomplete-item.focused {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.autocomplete-item mark {
  background: none;
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.autocomplete-empty {
  padding: var(--space-4) var(--space-3);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}


/* ════════════════════════════════════════════
   📋 FORM LAYOUT YARDIMCIları
   ════════════════════════════════════════════ */

.form-grid {
  display: grid;
  gap: var(--space-5);
}

.form-grid-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
.form-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 640px) {
  .form-grid-2,
  .form-grid-3,
  .form-grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .form-grid-3,
  .form-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

.form-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.form-row > * { flex: 1; }

.form-col-auto { flex: 0 0 auto; }
.form-col-2    { flex: 0 0 calc(50% - var(--space-2)); }
.form-col-3    { flex: 0 0 calc(33.33% - var(--space-3)); }

/* Fieldset */
.form-fieldset {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

.form-legend {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  padding: 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Divider */
.form-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--space-4) 0;
}

.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}