/* ============================================================
   FORM KİTİ — tüm ekranlarda ortak kontrol ölçüsü
   ------------------------------------------------------------
   Ölçü referansı depo tahsilat formudur. Her ekranın kendi
   min-height/padding yazması yerine burada tek yerden türetilir;
   input, select, textarea, combo ve butonlar aynı yükseklikten
   gelir, yan yana dizildiklerinde kendiliğinden hizalanır.

   site.css'ten SONRA yüklenir. Bağlama özel yatay padding'ler
   (ikonlu input, para eki vb.) iki sınıflı seçicilerle yazıldığı
   için özgüllük gereği burayı ezmeye devam eder; bu dosya yalnız
   dikey ölçüyü ve ortak görünümü sahiplenir.
   ============================================================ */

:root {
    /* Kontrol yükseklikleri */
    /* Mobil alt navigasyon yazısı; tüm sayfalarda tek yerden değişir. */
    --alt-nav-font: 0.85rem;
    --alt-nav-ikon: 20px;

    --kontrol-h: 38px;
    --kontrol-h-sm: 32px;
    --kontrol-h-lg: 46px;

    /* Dikey padding — yükseklikle uyumlu kalsın diye ayrı token */
    --kontrol-py: .5rem;
    --kontrol-py-sm: .3rem;
    --kontrol-py-lg: .7rem;

    --kontrol-px: .9rem;
    --kontrol-radius: 10px;

    /* Alan etiketi ile kutu arası */
    --alan-etiket-bosluk: .42rem;

    /* Sık kullanılan alan genişlikleri */
    --gen-kisa: 8rem;
    --gen-tutar: 13rem;
    --gen-orta: 18rem;
}

/* ---------- Girdi kutuları ---------- */
.form-control,
.custom-date-trigger {
    min-height: var(--kontrol-h);
    padding-block: var(--kontrol-py);
    border-radius: var(--kontrol-radius);
}

/* Metin alanı yüksekliğini satır sayısı belirler; min-height ona göre. */
textarea.form-control { min-height: calc(var(--kontrol-h) * 2); }

/* Select'in iç metni input'la aynı hizada dursun. */
select.form-control { padding-block: calc(var(--kontrol-py) - 1px); }

.field label { margin-bottom: var(--alan-etiket-bosluk); }

/* ---------- Butonlar ---------- */
.btn {
    min-height: var(--kontrol-h);
    padding-block: var(--kontrol-py);
    border-radius: var(--kontrol-radius);
    line-height: 1.2;
}

.btn-sm { min-height: var(--kontrol-h-sm); padding-block: var(--kontrol-py-sm); font-size: .85rem; }
.btn-lg { min-height: var(--kontrol-h-lg); padding-block: var(--kontrol-py-lg); font-size: 1rem; }

/* Form altındaki eylem çubuğunda butonlar birbiriyle aynı boyda olur;
   btn-lg orada da yükseklik ailesinin dışına çıkmaz. */
.form-actions .btn { min-height: var(--kontrol-h-lg); }

/* Eylem çubuğunda bağlantı ve düğme aynı görünür: <a> metni kendiliğinden
   dikeyde ortalanmadığı için yükseklikleri tutsa da hizaları kayıyordu. */
.form-actions .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ---------- Yoğun bağlamlar ---------- */
/* Taban ölçü zaten modal formundan geliyor; diyaloglara ayrıca küçültme
   uygulanmaz. Daha da dar gereken yere bu sınıf elle verilir. */
.kompakt {
    --kontrol-h: var(--kontrol-h-sm);
    --kontrol-py: var(--kontrol-py-sm);
    --alan-etiket-bosluk: .28rem;
}

/* Diyalog altındaki eylem butonları form altındakiyle aynı boyda. */
.rental-dialog-actions .btn { min-height: var(--kontrol-h-lg); }

/* ---------- Alan genişlikleri ---------- */
/* Sayfaya özel tek kullanımlık sınıf yerine ortak ölçüler. */
.gen-kisa { width: var(--gen-kisa); }
.gen-tutar { width: var(--gen-tutar); }
.gen-orta { width: var(--gen-orta); }
.gen-tam { width: 100%; }

@media (max-width: 560px) {
    .gen-kisa, .gen-tutar, .gen-orta { width: 100%; }
}

/* ---------- Dokunmatik ---------- */
/* Mobilde parmak hedefi büyür, yazı 16px altına inmez (iOS otomatik
   yakınlaştırmasını engeller). Ölçü yine tek yerden gelir. */
@media (max-width: 767px) {
    :root {
        --kontrol-h: 42px;
        --kontrol-py: .55rem;
        --kontrol-h-lg: 48px;
    }

    .form-control,
    .custom-date-trigger { font-size: 16px; line-height: 1.25; }
}