/* ==========================================================================
   YÖNETİM BİLEŞENİ — FORM
   Alan, etiket, yardım metni, satır içi hata, anahtar, yükleme alanı,
   yapışkan kaydet çubuğu.
   ========================================================================== */

.ay-form { display: grid; gap: var(--s5); min-width: 0; }
.ay-alanlar { display: grid; gap: var(--s4); }
.ay-alanlar--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ay-alanlar--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .ay-alanlar--2, .ay-alanlar--3 { grid-template-columns: 1fr; }
}
.ay-alan--tam { grid-column: 1 / -1; }

.ay-alan { display: grid; gap: 6px; min-width: 0; }
.ay-alan__etiket {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--f-sm);
  font-weight: 700;
  color: var(--metin);
}
.ay-alan__etiket abbr { color: var(--kirmizi-500); text-decoration: none; font-weight: 800; }
.ay-alan__ops {
  font-size: var(--f-mic);
  font-weight: 600;
  color: var(--metin-4);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ay-girdi {
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--r-sm);
  color: var(--metin);
  font-size: var(--f-sm);
  outline: none;
  appearance: none;
  transition: border-color var(--t2), box-shadow var(--t2), background var(--t2);
}
.ay-girdi::placeholder { color: var(--metin-4); }
.ay-girdi:hover:not(:disabled):not([readonly]) { border-color: var(--metin-4); }
.ay-girdi:focus {
  border-color: var(--kirmizi-500);
  box-shadow: 0 0 0 3px var(--kirmizi-sis);
}
.ay-girdi:disabled, .ay-girdi[readonly] {
  background: var(--yuzey-2);
  color: var(--metin-3);
  cursor: not-allowed;
}
textarea.ay-girdi { min-height: 94px; resize: vertical; line-height: 1.6; }
select.ay-girdi {
  cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23838D9B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.4 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.ay-girdi--sayi { font-variant-numeric: tabular-nums; }

/* Ön/son ekli alan */
.ay-alan__sarmal { display: flex; align-items: stretch; }
.ay-alan__sarmal .ay-girdi { border-radius: 0; }
.ay-alan__sarmal > :first-child { border-start-start-radius: var(--r-sm); border-end-start-radius: var(--r-sm); }
.ay-alan__sarmal > :last-child { border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm); }
.ay-alan__ek {
  display: grid;
  place-items: center;
  padding-inline: 11px;
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi-koyu);
  font-size: var(--f-sm);
  font-weight: 700;
  color: var(--metin-3);
  white-space: nowrap;
}
.ay-alan__sarmal .ay-girdi + .ay-alan__ek { border-inline-start: 0; }
.ay-alan__ek + .ay-girdi { border-inline-start: 0; }

.ay-alan__ipucu { font-size: var(--f-xs); color: var(--metin-3); line-height: 1.5; }
.ay-alan__sayac { font-size: var(--f-xs); color: var(--metin-4); text-align: right; font-variant-numeric: tabular-nums; }

/* Hata durumu */
.ay-alan.is-hatali .ay-girdi { border-color: var(--hata-500); background: var(--hata-sis); }
.ay-alan.is-hatali .ay-girdi:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .14); }
.ay-alan__hata {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: var(--f-xs);
  font-weight: 600;
  color: var(--hata-600);
  line-height: 1.45;
}
.ay-alan__hata .ay-ikon { width: 13px; height: 13px; flex: none; margin-top: 1px; }

/* Onay kutusu / radyo satırı */
.ay-secim {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px var(--s3);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t2), background var(--t2);
}
.ay-secim:hover { border-color: var(--cizgi-koyu); }
.ay-secim input { margin-top: 1px; }
.ay-secim__soz { display: grid; gap: 1px; min-width: 0; }
.ay-secim__ad { font-size: var(--f-sm); font-weight: 700; color: var(--metin); }
.ay-secim__alt { font-size: var(--f-xs); color: var(--metin-3); line-height: 1.45; }
.ay-secim:has(input:checked) { border-color: var(--kirmizi-500); background: var(--kirmizi-sis); }
.ay-secim:has(input:focus-visible) { outline: 2px solid var(--kirmizi-500); outline-offset: 2px; }

.ay-radyo {
  appearance: none;
  width: 17px; height: 17px;
  border: 1.5px solid var(--cizgi-koyu);
  border-radius: 50%;
  background: var(--yuzey);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  transition: border-color var(--t1);
}
.ay-radyo::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--kirmizi-500);
  transform: scale(0);
  transition: transform var(--t1) var(--e-cik);
}
.ay-radyo:checked { border-color: var(--kirmizi-500); }
.ay-radyo:checked::after { transform: scale(1); }

/* Anahtar */
.ay-anahtar { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.ay-anahtar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ay-anahtar__ray {
  width: 38px; height: 22px;
  border-radius: var(--r-pill);
  background: var(--cizgi-koyu);
  position: relative;
  flex: none;
  transition: background var(--t2) var(--e-std);
}
.ay-anahtar__ray::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--g1);
  transition: transform var(--t2) var(--e-cik);
}
.ay-anahtar input:checked + .ay-anahtar__ray { background: var(--basari-500); }
.ay-anahtar input:checked + .ay-anahtar__ray::after { transform: translateX(16px); }
.ay-anahtar input:disabled + .ay-anahtar__ray { opacity: .5; cursor: not-allowed; }
.ay-anahtar input:focus-visible + .ay-anahtar__ray { outline: 2px solid var(--kirmizi-500); outline-offset: 2px; }
.ay-anahtar__yazi { font-size: var(--f-sm); font-weight: 600; color: var(--metin-2); }

/* Görsel yükleme alanı */
.ay-yukle {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: var(--s6);
  border: 1.5px dashed var(--cizgi-koyu);
  border-radius: var(--r-md);
  background: var(--yuzey-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t2), background var(--t2);
}
.ay-yukle:hover { border-color: var(--kirmizi-500); background: var(--kirmizi-sis); }
.ay-yukle .ay-ikon { width: 24px; height: 24px; color: var(--metin-4); }
.ay-yukle b { font-size: var(--f-sm); color: var(--metin); }
.ay-yukle span { font-size: var(--f-xs); color: var(--metin-3); }

.ay-onizleme {
  position: relative;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--yuzey-2);
  aspect-ratio: 4 / 3;
}
.ay-onizleme img { width: 100%; height: 100%; object-fit: cover; }
.ay-onizleme__sil {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--cizgi);
  color: var(--hata-500);
}
.ay-onizleme__sil:hover { background: #fff; }
.ay-onizleme__sil .ay-ikon { width: 15px; height: 15px; }

/* Etiket girişi */
.ay-etiketler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 8px;
  min-height: 38px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--r-sm);
  background: var(--yuzey);
}
.ay-etiketler:focus-within { border-color: var(--kirmizi-500); box-shadow: 0 0 0 3px var(--kirmizi-sis); }
.ay-etiket {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 5px 0 9px;
  background: var(--yuzey-3);
  border-radius: var(--r-xs);
  font-size: var(--f-xs);
  font-weight: 700;
  color: var(--metin-2);
}
.ay-etiket button { display: grid; place-items: center; color: var(--metin-4); }
.ay-etiket button:hover { color: var(--hata-500); }
.ay-etiket .ay-ikon { width: 12px; height: 12px; }
.ay-etiketler input {
  flex: 1;
  min-width: 90px;
  border: 0;
  outline: none;
  font-size: var(--f-sm);
  background: transparent;
}

/* Yapışkan kaydet çubuğu */
.ay-kaydet-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  margin: 0 calc(var(--oluk) * -1) calc(var(--s9) * -1);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--cizgi);
  flex-wrap: wrap;
}
.ay-kaydet-bar__bilgi {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--f-xs);
  color: var(--metin-3);
}
.ay-kaydet-bar__bilgi .ay-ikon { width: 15px; height: 15px; }
.ay-kaydet-bar__aks { display: flex; gap: 8px; margin-inline-start: auto; flex-wrap: wrap; }

/* Form geneli uyarı */
.ay-form-uyari {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px var(--s4);
  background: var(--hata-sis);
  border: 1px solid rgba(220, 38, 38, .28);
  border-radius: var(--r-sm);
  color: var(--hata-600);
  font-size: var(--f-sm);
  font-weight: 600;
}
.ay-form-uyari .ay-ikon { width: 17px; height: 17px; flex: none; }
.ay-form-basari {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px var(--s4);
  background: var(--basari-sis);
  border: 1px solid rgba(21, 163, 74, .28);
  border-radius: var(--r-sm);
  color: var(--basari-600);
  font-size: var(--f-sm);
  font-weight: 600;
}
.ay-form-basari .ay-ikon { width: 17px; height: 17px; flex: none; }

/* Sıralanabilir satır listesi (kategori, opsiyon) */
.ay-sirali { display: grid; gap: 6px; }
.ay-sirali__oge {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 10px var(--s3);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-sm);
  min-width: 0;
}
.ay-sirali__tut {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  color: var(--metin-4);
  cursor: grab;
  flex: none;
}
.ay-sirali__tut .ay-ikon { width: 15px; height: 15px; }
.ay-sirali__oge.is-tasiniyor { opacity: .5; border-style: dashed; }