/*
 * Form tabanı (docs/04-tasarim-sistemi.md §6.6) — HER SAYFADA YÜKLENMEZ.
 *
 * Formlu sayfa kendi view'ında, sayfa CSS'inden ÖNCE bağlar:
 *     @section Styles {
 *         <link rel="stylesheet" href="~/css/bilesenler/form.css" asp-append-version="true" />
 *         <link rel="stylesheet" href="~/css/sayfalar/<sayfa>.css" asp-append-version="true" />
 *     }
 * Bağlayan sayfa kendi CSS'indeki yerel .form-control/.form-select tanımlarını siler (yalnız
 * yerleşim kalır). Açılır listeler <select data-ozel-secim> ile (css/bilesenler/ozel-secim.css).
 *
 * Doğrulama: jQuery Validate / unobtrusive sınıfları (.input-validation-error,
 * .field-validation-error, .field-validation-valid, .validation-summary-errors) ve
 * [aria-invalid="true"] desteklenir — sınıf adları değişmez.
 *
 * İşaretleme:
 *   <div class="form-alan">
 *     <label class="form-label" for="Eposta">E-posta</label>
 *     <input class="form-control" id="Eposta" … aria-describedby="Eposta-yardim Eposta-hata" />
 *     <p class="form-yardim" id="Eposta-yardim">…</p>
 *     <span class="field-validation-valid" id="Eposta-hata" data-valmsg-for="Eposta"></span>
 *   </div>
 *   İsteğe bağlı alan: <label …>Vergi no <span class="form-istege-bagli">(isteğe bağlı)</span></label>
 *   İki sütun (≥768): <div class="form-izgara"> … </div>
 *   Bölmeli seçim: <div class="secim-bolmeli" role="radiogroup"> <input type="radio" class="btn-check"
 *                  id="a" …><label for="a">Online</label> … </div>
 */

/* ── Alan düzeni ──────────────────────────────────────────────────────── */

.form-alan {
    display: flex;
    flex-direction: column;
    gap: var(--form-etiket-arasi);
    margin-bottom: var(--form-alan-arasi);
}

.form-izgara {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--b-4);
}

@media (min-width: 768px) {
    .form-izgara {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-izgara > .form-alan-tam {
        grid-column: 1 / -1;
    }
}

.form-grup-arasi {
    margin-top: var(--b-8);
}

/* ── Etiket, yardım, isteğe bağlı ─────────────────────────────────────── */

.form-label {
    margin-bottom: 0;
    color: var(--renk-metin);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-arayuz);
}

.form-istege-bagli {
    color: var(--renk-metin-soluk);
    font-weight: var(--t-normal);
}

.form-yardim,
.form-text {
    margin: 0;
    color: var(--renk-metin-soluk);
    font-size: var(--t-sm);
    line-height: var(--t-satir-arayuz);
}

/* ── Girdi, seçim, metin alanı: tek yükseklik ─────────────────────────── */

.form-control,
.form-select {
    min-height: var(--form-yukseklik);
    padding: 10px 14px;
    border: var(--kenar-guclu);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey);
    color: var(--renk-metin);
    font-family: var(--t-aile);
    font-size: var(--t-md);          /* 16px: iOS odakta yakınlaştırmasın */
    font-weight: var(--t-normal);
    line-height: var(--t-satir-arayuz);
    transition: border-color var(--sure-hizli) ease, box-shadow var(--sure-hizli) ease;
}

.form-select {
    padding-right: 40px;
    background-position: right 14px center;
}

textarea.form-control {
    min-height: calc(var(--form-yukseklik) * 2.5);
    line-height: var(--t-satir-govde);
    resize: vertical;
}

.form-control::placeholder {
    color: var(--renk-metin-soluk);
    opacity: 1;
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
    border-color: var(--gri-400);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--renk-marka);
    outline: 0;
    box-shadow: var(--odak-halkasi);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--renk-yuzey-vurgu);
    color: var(--renk-metin-ikincil);
    cursor: not-allowed;
    opacity: 1;
}

/* Girdi + ek (birim, düğme) */
.input-group > .form-control,
.input-group > .form-select {
    min-height: var(--form-yukseklik);
}

.input-group-text {
    border: var(--kenar-guclu);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey-ikincil);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
}

/* ── Hata durumu ──────────────────────────────────────────────────────── */

.form-control.input-validation-error,
.form-select.input-validation-error,
.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"],
.ozel-secim.hatali .ozel-secim-dugme {
    border-color: var(--renk-hata);
}

.form-control.input-validation-error:focus,
.form-select.input-validation-error:focus,
.form-control[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus {
    box-shadow: var(--odak-halkasi);
}

/* Hata metni yardım metninin yerini alır; simgeli (renk tek başına anlam taşımaz). */
.field-validation-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 0;
    color: var(--renk-hata);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-arayuz);
}

.field-validation-error::before {
    content: "\f332";                 /* bootstrap-icons: exclamation-circle-fill */
    flex: none;
    font-family: bootstrap-icons;
    font-weight: var(--t-normal);
    line-height: inherit;
}

/* Hata yokken boş doğrulama alanı yer (ve alan arası boşluk) kaplamasın. */
.field-validation-valid:empty {
    display: none;
}

.form-alan:has(.field-validation-error) .form-yardim {
    display: none;
}

.validation-summary-errors {
    margin-bottom: var(--form-alan-arasi);
    padding: var(--b-3) var(--b-4);
    border-left: 3px solid var(--renk-hata);
    border-radius: var(--r-orta);
    background-color: var(--renk-hata-zemin);
    color: var(--renk-hata);
    font-size: var(--t-sm);
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: var(--b-4);
}

/* ── Onay kutusu ve radyo ─────────────────────────────────────────────── */

/* Kutu 20px; tıklanabilir alan satırın tamamı (≥44px). */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--b-3);
    min-height: 44px;
    margin-bottom: 0;
    padding: 10px 0;
    padding-left: 0;
}

.form-check .form-check-input {
    float: none;
    flex: none;
    margin: 2px 0 0;
    border: var(--kenar-guclu);
    background-color: var(--renk-yuzey);
    cursor: pointer;
}

.form-check:not(.form-switch) .form-check-input {
    width: 20px;
    height: 20px;
}

.form-check:not(.form-switch) .form-check-input[type="checkbox"] {
    border-radius: var(--r-kucuk);
}

.form-check-input:checked {
    border-color: var(--renk-marka);
    background-color: var(--renk-marka);
}

.form-check-input:focus {
    border-color: var(--renk-marka);
    box-shadow: var(--odak-halkasi);
}

.form-check-input.input-validation-error,
.form-check-input[aria-invalid="true"] {
    border-color: var(--renk-hata);
}

.form-check-label {
    color: var(--renk-metin);
    font-size: var(--t-md);
    line-height: var(--t-satir-arayuz);
    cursor: pointer;
}

.form-check-input:disabled,
.form-check-input:disabled ~ .form-check-label {
    cursor: not-allowed;
    opacity: .45;
}

/* ── Bölmeli seçim (Online / Fiziki / Hibrit, Bireysel / Kurumsal) ────── */

.secim-bolmeli {
    display: flex;
    gap: var(--b-1);
    padding: var(--b-1);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey-vurgu);
}

.secim-bolmeli > input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.secim-bolmeli > label {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: var(--b-2);
    min-height: 38px;
    margin: 0;
    padding: 0 var(--b-3);
    border-radius: var(--r-kucuk);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--sure-hizli), color var(--sure-hizli), box-shadow var(--sure-hizli);
}

.secim-bolmeli > input[type="radio"]:checked + label {
    background-color: var(--renk-yuzey);
    color: var(--renk-metin);
    box-shadow: var(--golge-1);
}

.secim-bolmeli > input[type="radio"]:focus-visible + label {
    outline: var(--odak-cizgi);
    outline-offset: 2px;
}

.secim-bolmeli > input[type="radio"]:disabled + label {
    cursor: not-allowed;
    opacity: .45;
}

/* ── Gönder satırı ────────────────────────────────────────────────────── */

.form-eylemler {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--b-3);
    margin-top: var(--b-6);
}

@media (max-width: 767.98px) {
    .form-eylemler {
        flex-direction: column-reverse;
    }

    .form-eylemler > .otocars-btn,
    .form-eylemler > .primary-btn1 {
        width: 100%;
    }
}