/* ============================================================
   OtoForm — genel stiller (tek doğruluk kaynağı)

   Palet: lacivert kabuk + lacivert birincil eylem + tek turuncu vurgu;
   kırmızı yalnız sil/iptal. Renk değişirse ŞU 6 YER elle eşlenir:
   App.razor (theme-color) · HesapDuzeni.razor (theme-color) ·
   Mobile index.html (theme-color + açılış ekranı) ·
   Platforms/Android/MainActivity.cs · Pdf/ServisFormuPdfUretici (PdfPalet).
   ============================================================ */

:root {
    /* ---- Marka ---- */
    --otoform-lacivert: #0C3060;            /* logonun laciverti */
    --otoform-marka-oto: #FFFFFF;           /* koyu kabukta "OTO" */
    --otoform-marka-form: #F0821E;          /* koyu kabukta "FORM" */

    /* ---- Kabuk (üst bar + sol menü) ---- */
    --otoform-kabuk: #0F2A4A;
    --otoform-kabuk-metin: #FFFFFF;
    --otoform-kabuk-metin-2: rgba(255, 255, 255, .72);
    --otoform-kabuk-metin-3: rgba(255, 255, 255, .48);
    --otoform-kabuk-kenar: rgba(255, 255, 255, .14);
    --otoform-kabuk-hover: rgba(255, 255, 255, .08);
    --otoform-kabuk-cip: rgba(255, 255, 255, .12);
    --otoform-kabuk-basili: rgba(255, 255, 255, .16);
    --otoform-kabuk-hover-kenar: rgba(255, 255, 255, .28);

    /* ---- Birincil eylem (vurgu) ---- */
    --otoform-vurgu: #1B4B82;               /* beyaz metinle 8.9:1 */
    --otoform-vurgu-koyu: #164070;          /* hover */
    --otoform-vurgu-basili: #113259;
    --otoform-vurgu-soluk: #E8EFF8;

    /* ---- Turuncu vurgu (şerit, aktif ray, sayaç) ---- */
    /* Marka kırmızısı — PDF'teki Vurgu/VurguAcik ile BİREBİR aynı değerler:
       kâğıt ile ekran aynı markayı göstersin. Marka HATLARI bu rengi taşır. */
    --otoform-kirmizi: #C81E1E;
    --otoform-kirmizi-acik: #E8797B;

    --otoform-turuncu: #E46C0C;             /* yüzey/çizgi/ikon için */
    --otoform-turuncu-metin: #B45309;       /* beyaz zeminde metin (4.9:1) */
    --otoform-turuncu-soluk: #FDF0E4;

    /* ---- Yüzeyler ---- */
    --otoform-zemin: #F5F7FA;               /* sayfa zemini */
    --otoform-yuzey: #FFFFFF;               /* kart */
    --otoform-yuzey-2: #F8FAFC;             /* iç blok, tablo başlığı, satır hover */
    --otoform-yuzey-3: #F1F5F9;             /* pasif / seçili kap */
    --otoform-perde: rgba(15, 23, 42, .38);
    --otoform-perde-koyu: rgba(15, 23, 42, .55);  /* fotoğraf üstü katman */

    /* ---- Kenarlıklar ---- */
    --otoform-kenar: #E2E8F0;
    --otoform-kenar-koyu: #CBD5E1;          /* input, çerçeveli düğme */
    --otoform-kenar-2: #94A3B8;             /* hover kenarı */
    --otoform-kenar-ince: #EEF2F6;

    /* ---- Metin (slate) ---- */
    --otoform-metin: #0F172A;
    --otoform-metin-2: #334155;
    --otoform-metin-3: #64748B;
    --otoform-metin-4: #94A3B8;             /* yalnız ipucu/placeholder */
    --otoform-metin-ters: #FFFFFF;

    /* ---- Anlamsal renkler ---- */
    --otoform-kirmizi: #DC2626;
    --otoform-kirmizi-koyu: #B91C1C;
    --otoform-kirmizi-kenar: #FCA5A5;
    --otoform-yesil: #15803D;               /* dolu düğme (beyazla 5:1) */
    --otoform-yesil-koyu: #166534;
    --otoform-yesil-kenar: #A7D8BC;
    --otoform-yesil-gecerli: #86C7A0;       /* geçerli form alanı */

    /* ---- Servis durumu ölçeği: zemin / metin / kenar ----
       Soluk pastel zemin + bir tık koyu kenar + koyu metin; PDF ile ortak. */
    --otoform-durum-acik-zemin: #EEF2F7;
    --otoform-durum-acik-metin: #334155;
    --otoform-durum-acik-kenar: #D8E0EA;

    --otoform-durum-devam-zemin: #FEF3C7;
    --otoform-durum-devam-metin: #92400E;
    --otoform-durum-devam-kenar: #FDE68A;

    --otoform-durum-tamam-zemin: #E6EDFD;
    --otoform-durum-tamam-metin: #1E40AF;
    --otoform-durum-tamam-kenar: #C9D8FB;

    --otoform-durum-teslim-zemin: #DCFCE7;
    --otoform-durum-teslim-metin: #166534;
    --otoform-durum-teslim-kenar: #BBF7D0;

    --otoform-durum-iptal-zemin: #FDECEC;
    --otoform-durum-iptal-metin: #991B1B;
    --otoform-durum-iptal-kenar: #F8D4D4;

    /* ---- Plaka (gerçek dünya nesnesi; arayüz paleti değişse de sabit) ---- */
    --plaka-metin: #14181D;
    --plaka-zemin: #FFFFFF;
    --plaka-cerceve: #26374F;
    --plaka-bant-ust: #1049B4;
    --plaka-bant-alt: #063089;

    /* ---- Gölge ---- */
    --otoform-golge-1: 0 1px 2px rgba(15, 23, 42, .05);
    --otoform-golge-2: 0 4px 12px rgba(15, 23, 42, .08);
    --otoform-golge-3: 0 12px 28px rgba(15, 23, 42, .14);
    --otoform-golge-hover: 0 2px 6px rgba(15, 23, 42, .08);
    --otoform-golge-ust: 0 -1px 3px rgba(15, 23, 42, .06);

    /* ---- Odak ---- */
    --otoform-odak: 0 0 0 3px rgba(27, 75, 130, .28);
    --otoform-odak-tehlike: 0 0 0 3px rgba(220, 38, 38, .18);

    /* ---- Katman ölçeği ---- */
    --z-yapiskan: 20;
    --z-kabuk: 1040;
    --z-perde: 1044;
    --z-cekmece: 1045;
    --z-hata: 1100;

    /* ---- Köşe ---- */
    --r-1: 6px;
    --r-2: 8px;
    --r-3: 10px;
    --r-4: 14px;

    /* ---- Boşluk (4px taban) ---- */
    --b1: 4px;
    --b2: 8px;
    --b3: 12px;
    --b4: 16px;
    --b5: 24px;
    --b6: 32px;

    /* ---- Tipografi ölçeği ---- */
    --yz-11: .6875rem;
    --yz-12: .75rem;
    --yz-13: .8125rem;
    --yz-14: .875rem;
    --yz-15: .9375rem;
    --yz-17: 1.0625rem;
    --yz-20: 1.25rem;
    --yz-24: 1.5rem;

    /* ---- Ölçüler ---- */
    --menu-genislik: 240px;
    --ust-bar-h: 56px;      /* mobil app bar; masaüstünde 64 (aşağıda) */
    --icerik-max: 1200px;
    --dokunma: 44px;

    /* Plaka / form no için dar sayısal yazı */
    --otoform-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
                    Consolas, "Liberation Mono", monospace;
}

@media (min-width: 768px) {
    :root {
        --ust-bar-h: 64px;
    }
}

/* ============================================================
   Tipografi
   ============================================================ */

html {
    -webkit-text-size-adjust: 100%;
}

html, body {
    /* system-ui: Windows'ta Segoe UI, MAUI WebView'de Roboto; ikisi de
       ı/İ/ğ/ş için tam kapsamlı. Web fontu yok — mobil çevrimdışı da açılır. */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, "Noto Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--otoform-metin);
    background-color: var(--otoform-zemin);
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--otoform-metin);
    margin: 0 0 var(--b3);
}

h1 { font-size: var(--yz-24); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
h2 { font-size: var(--yz-20); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
h3 { font-size: var(--yz-17); font-weight: 600; line-height: 1.4; }
h4, h5, h6 { font-size: var(--yz-15); font-weight: 600; line-height: 1.45; }

/* FocusOnNavigate her sayfa geçişinde h1'e odak verir; halka gerekmez. */
h1:focus,
h2:focus {
    outline: none;
}

/* Bağlantı rengi vurgu değildir; vurgu birincil eyleme ayrılmıştır. */
a {
    color: var(--otoform-metin-2);
    text-decoration: none;
}

a:hover {
    color: var(--otoform-metin);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Bootstrap 5.1 .fw-semibold tanımlamaz (5.3'te geldi); 600 ağırlık burada verilir. */
.fw-semibold {
    font-weight: 600;
}

small {
    font-size: var(--yz-12);
    line-height: 1.45;
    color: var(--otoform-metin-2);
}

.text-muted {
    color: var(--otoform-metin-3) !important;
}

/* Bölüm üstü etiket. Türkçe İ/ı bozulmasın diye CSS ile BÜYÜTÜLMEZ. */
.bolum-basligi {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 var(--b2);
    font-size: var(--yz-12);
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--otoform-metin-3);
    line-height: 1.3;
}

/* ============================================================
   Sayfa başlığı — başlık solda, eylemler sağda
   ============================================================ */

.sayfa-basligi {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--b3) var(--b4);
    margin: 0 0 var(--b5);
    padding-bottom: var(--b4);
    border-bottom: 1px solid var(--otoform-kenar);
}

.sayfa-basligi h1,
.sayfa-basligi h2 {
    margin: 0;
    font-size: var(--yz-24);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--otoform-metin);
}

.sayfa-basligi-alt {
    display: block;
    margin-top: var(--b1);
    font-size: var(--yz-12);
    font-weight: 400;
    color: var(--otoform-metin-3);
    font-variant-numeric: tabular-nums;
}

.sayfa-basligi-eylemler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--b2);
    margin-left: auto;
}

/* Geri bağlantısı: başlığın üstünde küçük, sessiz bir yön göstergesi. */
.sayfa-basligi-geri {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: var(--b1);
    font-size: var(--yz-13);
    font-weight: 600;
    color: var(--otoform-metin-3);
}

.sayfa-basligi-geri:hover {
    color: var(--otoform-metin);
    text-decoration: none;
}

/* Yapışkan başlık (form detayı): düzenin üst barının altına oturur. */
.sayfa-basligi.yapiskan {
    position: sticky;
    top: calc(var(--ust-bar-h) + env(safe-area-inset-top, 0px));
    z-index: var(--z-yapiskan);
    margin: 0 0 var(--b4);
    padding: .8rem 1rem;
    background: var(--otoform-yuzey);
    border: 1px solid var(--otoform-kenar);
    border-radius: var(--r-3);
    box-shadow: var(--otoform-golge-2);
}

/* Başlığın sağındaki sessiz eylem ("Tümünü Gör") */
.baslik-eylem {
    font-size: var(--yz-13);
    font-weight: 600;
    color: var(--otoform-metin-2);
    text-decoration: none;
    padding: .3rem .5rem;
    margin-right: -.5rem;
    border-radius: var(--r-1);
    white-space: nowrap;
}

.baslik-eylem::after {
    content: " \203A";
}

.baslik-eylem:hover,
.baslik-eylem:focus {
    color: var(--otoform-metin);
    background-color: var(--otoform-yuzey-3);
    text-decoration: none;
}

/* ============================================================
   Kart — tek ilkel: Bootstrap .card, OtoForm diliyle
   ============================================================ */

.card {
    background-color: var(--otoform-yuzey);
    border: 1px solid var(--otoform-kenar);
    border-radius: var(--r-3);
    box-shadow: var(--otoform-golge-1);
}

.card-header {
    padding: .8rem 1.1rem;
    background-color: transparent;
    border-bottom: 1px solid var(--otoform-kenar);
    border-radius: var(--r-3) var(--r-3) 0 0;
    font-size: var(--yz-14);
    font-weight: 600;
    letter-spacing: -.005em;
    text-transform: none;   /* Türkçe İ/ı: başlık büyük harfe çevrilmez */
    color: var(--otoform-metin);
}

.card-body {
    padding: 1rem 1.1rem;
}

/* Kart içinde ikincil blok (özet kutusu, toplam kutusu) */
.ic-kutu {
    background-color: var(--otoform-yuzey-2);
    border: 1px solid var(--otoform-kenar);
    border-radius: var(--r-2);
    padding: .85rem 1rem;
}

/* Tıklanabilir kart */
.card[role="button"] {
    cursor: pointer;
}

.card[role="button"]:hover {
    border-color: var(--otoform-kenar-2);
    box-shadow: var(--otoform-golge-hover);
}

a.card {
    color: inherit;
    text-decoration: none;
}

/* Kenarlıklı satır listesi (Panel "Son İşlemler", Bildirimler, Lisans Uyarıları) */
.liste-karti {
    background-color: var(--otoform-yuzey);
    border: 1px solid var(--otoform-kenar);
    border-radius: var(--r-3);
    box-shadow: var(--otoform-golge-1);
    overflow: hidden;
}

.liste-karti > * + * {
    border-top: 1px solid var(--otoform-kenar);
}

/* ============================================================
   Düğmeler
     btn-primary          dolu lacivert — sayfada tek birincil eylem
     btn-outline-primary  beyaz + lacivert (güçlü ikincil: Filtrele, Düzenle)
     btn-outline-secondary beyaz + gri (ikincil)
     btn-link             zeminsiz
     btn-danger / btn-outline-danger   yıkıcı
     btn-success / btn-outline-success WhatsApp / onay
   ============================================================ */

.btn {
    --btn-y: 40px;
    min-height: var(--btn-y);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .45rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--r-2);
    font-size: var(--yz-15);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.005em;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .14s ease, border-color .14s ease,
                color .14s ease, box-shadow .14s ease;
}

/* Dokunmatik: küçük ekranda hedefler en az 44px */
@media (max-width: 767.98px) {
    .btn { --btn-y: 44px; }
    .btn-sm { --btn-y: 38px; }
}

.btn-sm {
    --btn-y: 34px;
    padding: .3rem .7rem;
    font-size: var(--yz-13);
    font-weight: 600;
    border-radius: var(--r-1);
}

/* Yalnız ikonlu düğme: metni olmadığı için aria-label/title zorunludur. */
.btn-ikon {
    --btn-y: 34px;
    min-width: 34px;
    padding: .3rem;
    gap: 0;
}

@media (max-width: 767.98px) {
    .btn-ikon {
        --btn-y: 44px;
        min-width: 44px;
    }
}

.btn:focus,
.btn:focus-visible,
.btn:active:focus {
    outline: none;
    box-shadow: var(--otoform-odak);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    opacity: .48;
    box-shadow: none;
    cursor: not-allowed;
}

/* ---- Birincil: dolu lacivert ---- */
.btn-primary {
    color: var(--otoform-metin-ters);
    background-color: var(--otoform-vurgu);
    border-color: var(--otoform-vurgu);
}

.btn-primary:hover,
.btn-primary:focus {
    color: var(--otoform-metin-ters);
    background-color: var(--otoform-vurgu-koyu);
    border-color: var(--otoform-vurgu-koyu);
    text-decoration: none;
}

.btn-primary:active {
    color: var(--otoform-metin-ters);
    background-color: var(--otoform-vurgu-basili);
    border-color: var(--otoform-vurgu-basili);
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--otoform-metin-ters);
    background-color: var(--otoform-vurgu);
    border-color: var(--otoform-vurgu);
}

/* ---- Güçlü ikincil: beyaz + lacivert ---- */
.btn-outline-primary {
    color: var(--otoform-vurgu);
    background-color: var(--otoform-yuzey);
    border-color: var(--otoform-vurgu);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: var(--otoform-vurgu-koyu);
    background-color: var(--otoform-vurgu-soluk);
    border-color: var(--otoform-vurgu-koyu);
    text-decoration: none;
}

.btn-outline-primary:active {
    color: var(--otoform-vurgu-basili);
    background-color: var(--otoform-vurgu-soluk);
    border-color: var(--otoform-vurgu-basili);
}

/* ---- İkincil: beyaz + gri kenar ---- */
.btn-outline-secondary {
    color: var(--otoform-metin);
    background-color: var(--otoform-yuzey);
    border-color: var(--otoform-kenar-koyu);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--otoform-metin);
    background-color: var(--otoform-yuzey-3);
    border-color: var(--otoform-kenar-2);
    text-decoration: none;
}

.btn-outline-secondary:active {
    color: var(--otoform-metin);
    background-color: var(--otoform-yuzey-3);
    border-color: var(--otoform-kenar-koyu);
}

/* ---- Sessiz ---- */
.btn-link {
    color: var(--otoform-metin-2);
    background-color: transparent;
    border-color: transparent;
    font-weight: 600;
    text-decoration: none;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--otoform-metin);
    background-color: var(--otoform-yuzey-2);
    text-decoration: none;
}

/* ---- Yıkıcı ---- */
.btn-danger {
    color: var(--otoform-metin-ters);
    background-color: var(--otoform-kirmizi);
    border-color: var(--otoform-kirmizi);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    color: var(--otoform-metin-ters);
    background-color: var(--otoform-kirmizi-koyu);
    border-color: var(--otoform-kirmizi-koyu);
}

.btn-danger:focus,
.btn-outline-danger:focus {
    box-shadow: var(--otoform-odak-tehlike);
}

.btn-outline-danger {
    color: var(--otoform-kirmizi-koyu);
    background-color: var(--otoform-yuzey);
    border-color: var(--otoform-kirmizi-kenar);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    color: var(--otoform-metin-ters);
    background-color: var(--otoform-kirmizi);
    border-color: var(--otoform-kirmizi);
}

/* ---- WhatsApp / onay yeşili ---- */
.btn-success {
    color: var(--otoform-metin-ters);
    background-color: var(--otoform-yesil);
    border-color: var(--otoform-yesil);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    color: var(--otoform-metin-ters);
    background-color: var(--otoform-yesil-koyu);
    border-color: var(--otoform-yesil-koyu);
}

.btn-outline-success {
    color: var(--otoform-yesil-koyu);
    background-color: var(--otoform-yuzey);
    border-color: var(--otoform-yesil-kenar);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    color: var(--otoform-metin-ters);
    background-color: var(--otoform-yesil);
    border-color: var(--otoform-yesil);
}

/* Bitişik grupta odaklanan öğe komşu kenarlığın üstünde kalsın */
.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .btn:focus {
    z-index: 3;
}

/* ============================================================
   Form kontrolleri — iki yoğunluk: varsayılan + tablo içi -sm
   ============================================================ */

.form-control,
.form-select {
    min-height: 42px;
    padding: .5rem .75rem;
    font-size: var(--yz-15);
    line-height: 1.4;
    color: var(--otoform-metin);
    background-color: var(--otoform-yuzey);
    border: 1px solid var(--otoform-kenar-koyu);
    border-radius: var(--r-2);
    box-shadow: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}

/* Küçük ekranda 16px altı yazı sayfayı zumlatır; alanlar da büyür. */
@media (max-width: 767.98px) {
    .form-control,
    .form-select {
        min-height: 46px;
        font-size: 1rem;
    }
}

.form-control::placeholder {
    color: var(--otoform-metin-4);
}

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--otoform-kenar-2);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    outline: none;
    border-color: var(--otoform-vurgu);
    box-shadow: var(--otoform-odak);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--otoform-yuzey-2);
    color: var(--otoform-metin-2);
    border-color: var(--otoform-kenar);
}

.form-control-sm,
.form-select-sm {
    min-height: 36px;
    padding: .3rem .55rem;
    font-size: var(--yz-13);
    border-radius: var(--r-1);
}

textarea.form-control {
    min-height: 96px;
    line-height: 1.55;
}

input[type="date"].form-control,
input[type="number"].form-control,
input[type="tel"].form-control {
    font-variant-numeric: tabular-nums;
}

.form-label {
    display: block;
    font-size: var(--yz-13);
    font-weight: 600;
    color: var(--otoform-metin);
    margin-bottom: .35rem;
}

.form-text {
    display: block;
    font-size: var(--yz-12);
    line-height: 1.5;
    color: var(--otoform-metin-3);
    margin-top: .3rem;
}

/* Blazor EditForm doğrulama sınıfları (işaretlemede görünmez; framework basar) */
.valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: var(--otoform-yesil-gecerli);
}

.invalid,
.form-control.invalid,
.form-select.invalid {
    outline: none;
    border-color: var(--otoform-kirmizi);
    background-image: none;
}

.invalid:focus,
.form-control.invalid:focus,
.form-select.invalid:focus {
    border-color: var(--otoform-kirmizi);
    box-shadow: var(--otoform-odak-tehlike);
}

.validation-message {
    display: block;
    color: var(--otoform-kirmizi-koyu);
    font-size: var(--yz-12);
    font-weight: 500;
    line-height: 1.45;
    margin-top: .3rem;
}

/* Doğrulama özeti (ValidationSummary). Bileşen hata olmasa da <ul>'u çizdiği
   için :empty ile gizlenir; aksi hâlde formun üstünde sürekli boş bir kırmızı
   kutu dururdu. Yalnız tek bölüm düzenlenirken kullanılır: hata gizli bir
   bölümdeyse alan yanındaki mesaj çizilmez ve Kaydet sessiz kalırdı. */
.validation-errors {
    margin: 0 0 var(--b3);
    padding: var(--b3) var(--b4);
    list-style: none;
    background-color: var(--otoform-durum-iptal-zemin);
    border: 1px solid var(--otoform-durum-iptal-kenar);
    border-radius: var(--r-2);
}

.validation-errors:empty {
    display: none;
}

.validation-errors .validation-message {
    margin-top: 0;
}

.validation-errors li + li {
    margin-top: .25rem;
}

.form-check-input {
    border-color: var(--otoform-kenar-koyu);
}

/* Seçim bir eylemdir; işaret vurgu rengini alır. */
.form-check-input:checked {
    background-color: var(--otoform-vurgu);
    border-color: var(--otoform-vurgu);
}

.form-check-label {
    font-size: var(--yz-14);
    color: var(--otoform-metin);
}

/* ============================================================
   Tablolar
   ============================================================ */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--otoform-metin);
    --bs-table-accent-bg: transparent;
    --bs-border-color: var(--otoform-kenar);
    margin-bottom: 0;
    color: var(--otoform-metin);
    font-size: var(--yz-14);
    border-color: var(--otoform-kenar);
}

/* Başlık BÜYÜK HARFE ÇEVRİLMEZ (Türkçe İ/ı). */
.table > thead th {
    padding: .6rem .75rem;
    font-size: var(--yz-12);
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--otoform-metin-2);
    background-color: var(--otoform-yuzey-2);
    white-space: nowrap;
    border-top: 0;
    border-bottom: 1px solid var(--otoform-kenar);
}

.table > tbody > tr > td {
    padding: .72rem .75rem;
    vertical-align: middle;
    border-top: 0;
    border-bottom: 1px solid var(--otoform-kenar);
}

.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

/* Bootstrap hover'ı accent değişkeni üzerinden boyanır. */
.table-hover > tbody > tr:hover {
    --bs-table-accent-bg: var(--otoform-yuzey-3);
    color: var(--otoform-metin);
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table tr[role="button"] {
    cursor: pointer;
}

.table tr[role="button"]:focus-visible {
    outline: 2px solid var(--otoform-vurgu);
    outline-offset: -2px;
}

/* Satır sonu eylem sütunu */
.tablo-eylemler {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--b1);
    white-space: nowrap;
}

.table th.tablo-eylemler-basligi,
.table td.tablo-eylemler-hucresi {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.table > tbody > tr:hover .tablo-eylemler .btn {
    border-color: var(--otoform-kenar-koyu);
}

/* ============================================================
   Rozetler — tek sistem; Enums.cs Renk() bu adları döndürür
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .5rem;
    font-size: var(--yz-12);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    border: 1px solid transparent;
    border-radius: var(--r-1);
    white-space: nowrap;
    vertical-align: middle;
}

.rozet-acik {                                   /* Açık */
    background-color: var(--otoform-durum-acik-zemin);
    color: var(--otoform-durum-acik-metin);
    border-color: var(--otoform-durum-acik-kenar);
}

.rozet-devam {                                  /* Devam Ediyor / Kısmi Ödendi */
    background-color: var(--otoform-durum-devam-zemin);
    color: var(--otoform-durum-devam-metin);
    border-color: var(--otoform-durum-devam-kenar);
}

.rozet-tamam {                                  /* Tamamlandı */
    background-color: var(--otoform-durum-tamam-zemin);
    color: var(--otoform-durum-tamam-metin);
    border-color: var(--otoform-durum-tamam-kenar);
}

.rozet-teslim {                                 /* Teslim Edildi / Ödendi / Aktif */
    background-color: var(--otoform-durum-teslim-zemin);
    color: var(--otoform-durum-teslim-metin);
    border-color: var(--otoform-durum-teslim-kenar);
}

.rozet-iptal {                                  /* İptal / Ödenmedi / Süresi doldu */
    background-color: var(--otoform-durum-iptal-zemin);
    color: var(--otoform-durum-iptal-metin);
    border-color: var(--otoform-durum-iptal-kenar);
}

.rozet-kimlik {                                 /* sınıflandırma: Bireysel, Personel, Pasif */
    background-color: var(--otoform-yuzey-3);
    color: var(--otoform-metin-2);
    border-color: var(--otoform-kenar);
}

.rozet-vurgu {                                  /* Kurumsal, Yönetici, Parça */
    background-color: var(--otoform-vurgu-soluk);
    color: var(--otoform-vurgu);
    border-color: #C9D8FB;
}

.rozet-sayac {                                  /* menü/başlık sayaçları */
    background-color: var(--otoform-turuncu-metin);
    color: var(--otoform-metin-ters);
    border-color: transparent;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Plaka — gerçek TR plakası: beyaz zemin, solda mavi "TR" bandı
   Üç boy aynı kuralları paylaşır; ölçü --plaka-bant/--plaka-tr ile.
   ============================================================ */

.plaka,
.plaka-buyuk,
.plaka-kutu {
    --plaka-bant: 1.15rem;
    --plaka-tr: .5rem;

    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: var(--otoform-mono);
    text-transform: uppercase;   /* plakada Türkçe harf yoktur */
    font-variant-numeric: tabular-nums;
    color: var(--plaka-metin);
    background-color: var(--plaka-zemin);
    border: 1px solid var(--plaka-cerceve);
    overflow: hidden;
    line-height: 1.35;
    white-space: nowrap;
}

.plaka::before,
.plaka-buyuk::before,
.plaka-kutu::before {
    content: "TR";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--plaka-bant);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: .08rem;
    background: linear-gradient(180deg, var(--plaka-bant-ust) 0%, var(--plaka-bant-alt) 100%);
    color: #FFFFFF;
    font-family: var(--otoform-mono);
    font-size: var(--plaka-tr);
    font-weight: 700;
    line-height: 1;
}

.plaka {
    font-size: var(--yz-13);
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: var(--r-1);
    padding: .16rem .45rem .16rem calc(var(--plaka-bant) + .3rem);
}

.plaka-buyuk {
    --plaka-bant: 1.45rem;
    --plaka-tr: .625rem;

    font-size: var(--yz-17);
    font-weight: 700;
    letter-spacing: .05em;
    border-radius: var(--r-2);
    padding: .24rem .6rem .24rem calc(var(--plaka-bant) + .4rem);
}

/* Detay ekranındaki en büyük boy: bloktur ve ortalanır. */
.plaka-kutu {
    --plaka-bant: 2rem;
    --plaka-tr: .8125rem;

    display: block;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .1em;
    border-radius: var(--r-2);
    padding: .5rem .35rem .5rem calc(var(--plaka-bant) + .35rem);
}

.plaka-kutu::before {
    padding-bottom: .15rem;
}

@media (max-width: 575.98px) {
    .plaka-kutu {
        font-size: 1.25rem;
    }
}

/* Form numarası: plakayla aynı aileden, kutusuz */
.form-no-metin {
    font-family: var(--otoform-mono);
    font-size: var(--yz-13);
    font-weight: 600;
    /* Form no belgenin kimliğidir; PDF'teki form no ile aynı kırmızı. */
    color: var(--otoform-kirmizi);
    white-space: nowrap;
}

/* Kalan borç: sayfadaki tek kırmızı. Olumsuz bir sinyaldir — tahsil
   edilmemiş tutar tabloda ve kartta gözle taranabilsin (Cari Hesap,
   İstatistikler, Form Detay ortak kullanır). Sıfır kalanda sınıf
   verilmez, rakam olağan metin rengiyle kalır. */
.kalan-borc {
    color: var(--otoform-kirmizi-koyu);
}

/* Tahsilat ölçeği — Cari Hesap'ta üç sayı yan yana okunur: yapılan iş (koyu
   yeşil), eline geçen (açık yeşil), eksik kalan (kırmızı, .kalan-borc). Renk
   sırası anlamı taşıdığı için ikisi de paletten alınır.

   DAHA AÇIK bir yeşil denenmemeli: kart satırları 13 punto ve beyaz üstünde
   4.5:1 metin eşiğinin altına düşen bir ton okunaksız olur. İki yeşil arasındaki
   fark bu yüzden ölçülüdür. */
.tutar-toplam {
    /* Koyu yeşil, KALIN. İnce çizgide bu ton siyaha çalıyordu; kalınlık gövdeyi
       büyütünce renk okunur hâle geliyor. Çözüm tonu açmak değil kalınlaştırmak:
       daha açık bir yeşil 4.5:1 eşiğinin altına düşerdi. */
    color: var(--otoform-yesil-koyu);
    font-weight: 700;
}

/* Tahsil edilen tutar: toplamla AYNI yeşil, ayrım yalnız kalınlıkta. Zeminli
   etiket denendi ve kaldırıldı — iki sayı aynı satırda okunuyor, zemin ikisini
   ayrı ağırlıkta iki nesne gibi gösteriyordu. İnce gövde "gelen para"yı kalın
   olan "yapılan iş"in yanında ikincil okutuyor. */
.tutar-tahsil {
    color: var(--otoform-yesil-koyu);
    font-weight: 400;
}

/* ============================================================
   Etiket / değer listesi (detay kartları)
   ============================================================ */

.bilgi-liste {
    display: grid;
    grid-template-columns: minmax(7.5rem, 40%) 1fr;
    gap: .3rem .75rem;
    margin: 0;
}

.bilgi-liste dt {
    color: var(--otoform-metin-3);
    font-weight: 500;
    font-size: var(--yz-13);
}

.bilgi-liste dd {
    margin: 0;
    color: var(--otoform-metin);
    font-size: var(--yz-14);
    word-break: break-word;
}

@media (max-width: 575.98px) {
    .bilgi-liste {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .bilgi-liste dt {
        margin-top: .5rem;
    }
}

/* Çok satırlı serbest metin (şikâyet, işlem, not) */
.metin-govde {
    white-space: pre-wrap;
    color: var(--otoform-metin);
    line-height: 1.55;
}

/* Boş / belirtilmemiş değer */
.bos-deger {
    color: var(--otoform-metin-3);
    font-style: italic;
}

.metin-sonuk {
    color: var(--otoform-metin-3);
    font-size: var(--yz-14);
}

/* Başlık altındaki açıklama paragrafı (Bildirimler, Lisans Uyarıları, Firma Ayarları). */
.sayfa-aciklama {
    margin-bottom: var(--b4);
    max-width: 68ch;
    font-size: var(--yz-13);
    color: var(--otoform-metin-3);
}

/* ============================================================
   Arama alanı — ikon alanın içinde
   ============================================================ */

.arama-satiri {
    max-width: 620px;
}

.arama-kutusu {
    position: relative;
}

.arama-ikon {
    position: absolute;
    left: .7rem;
    top: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    color: var(--otoform-metin-4);
    pointer-events: none;
}

.arama-kutusu .arama-alani {
    padding-left: 2.4rem;
}

.arama-kutusu:focus-within .arama-ikon {
    color: var(--otoform-vurgu);
}

/* Liste üstü özet ve sayfalama konumu */
.liste-ozeti,
.sayfa-konumu {
    font-size: var(--yz-13);
    color: var(--otoform-metin-3);
    font-variant-numeric: tabular-nums;
}

.sayfa-konumu {
    white-space: nowrap;
}

/* ============================================================
   Boş durum · yükleniyor
   ============================================================ */

.bos-durum {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .45rem;
    padding: 3rem 1.25rem;
    color: var(--otoform-metin-2);
}

/* Yalnız ölçü: ton, BosDurum'un geçtiği .ikon-kutu-* modifiyerinden gelir. */
.bos-durum .ikon-kutu {
    width: 48px;
    height: 48px;
    margin-bottom: var(--b2);
}

.bos-durum-baslik {
    margin: 0;
    font-size: var(--yz-17);
    font-weight: 600;
    color: var(--otoform-metin);
}

.bos-durum-metin {
    margin: 0;
    max-width: 40ch;
    font-size: var(--yz-14);
    line-height: 1.55;
    color: var(--otoform-metin-2);
}

.bos-durum .btn {
    margin-top: var(--b4);
}

/* Kart içinde duran boş durum */
.bos-durum.bos-liste {
    background-color: var(--otoform-yuzey);
    border: 1px solid var(--otoform-kenar);
    border-radius: var(--r-3);
    box-shadow: var(--otoform-golge-1);
}

.yukleniyor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 3rem 1rem;
    font-size: var(--yz-14);
    color: var(--otoform-metin-2);
}

.yukleniyor p {
    margin: 0;
}

/* Bekleme bir durum değildir: spinner nötr renktedir. */
.spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 2px;
    color: var(--otoform-metin-3);
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* ============================================================
   Uyarı kutuları
   ============================================================ */

.alert {
    border-radius: var(--r-2);
    border-width: 1px;
    padding: .85rem 1rem;
    font-size: var(--yz-14);
    line-height: 1.5;
}

.alert-danger {
    background-color: var(--otoform-durum-iptal-zemin);
    border-color: var(--otoform-durum-iptal-kenar);
    color: var(--otoform-durum-iptal-metin);
}

.alert-warning {
    background-color: var(--otoform-durum-devam-zemin);
    border-color: var(--otoform-durum-devam-kenar);
    color: var(--otoform-durum-devam-metin);
}

.alert-success {
    background-color: var(--otoform-durum-teslim-zemin);
    border-color: var(--otoform-durum-teslim-kenar);
    color: var(--otoform-durum-teslim-metin);
}

.alert-info {
    background-color: var(--otoform-durum-tamam-zemin);
    border-color: var(--otoform-durum-tamam-kenar);
    color: var(--otoform-durum-tamam-metin);
}


/* ============================================================
   Modal — tek pencere dili (Bootstrap JS yok, Blazor açar/kapar)
   ============================================================ */

.modal.show {
    background: var(--otoform-perde);
}

.modal-content {
    border: 1px solid var(--otoform-kenar);
    border-radius: var(--r-4);
    box-shadow: var(--otoform-golge-3);
}

.modal-header,
.modal-footer {
    border-color: var(--otoform-kenar);
}

.modal-title {
    font-size: var(--yz-17);
    font-weight: 600;
}

.modal-footer .btn {
    min-height: 44px;
}

/* ============================================================
   İkon sistemi — <Ikon Ad="..."/> satır içi SVG; renk currentColor
   ============================================================ */

.ikon {
    display: inline-block;
    vertical-align: -.125em;
    flex: 0 0 auto;
    pointer-events: none;    /* düğme/satır içindeki ikon tıklamayı yutmasın */
}

.ikon-sonuk {
    color: var(--otoform-metin-4);
}

/* Dairesel soluk zemin + ikon: istatistik kartı, boş durum, satır avatarı. */
.ikon-kutu {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--otoform-vurgu-soluk);
    color: var(--otoform-vurgu);
}

/* Tonlar rozet ölçeğiyle aynı ailedendir. */
.ikon-kutu-vurgu  { background-color: var(--otoform-vurgu-soluk);          color: var(--otoform-vurgu); }
.ikon-kutu-teslim { background-color: var(--otoform-durum-teslim-zemin);   color: var(--otoform-durum-teslim-metin); }
.ikon-kutu-iptal  { background-color: var(--otoform-durum-iptal-zemin);    color: var(--otoform-durum-iptal-metin); }
.ikon-kutu-turuncu { background-color: var(--otoform-turuncu-soluk);       color: var(--otoform-turuncu-metin); }

.ikon-kutu-notr {
    background-color: var(--otoform-yuzey-2);
    color: var(--otoform-metin-3);
    box-shadow: inset 0 0 0 1px var(--otoform-kenar);
}

/* ============================================================
   Avatar + kimlik bloğu (üst bar)
   Baş harfler C# tarafında Türkçe kültürle büyütülür; CSS ile değil.
   ============================================================ */

.avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--otoform-vurgu-soluk);
    color: var(--otoform-vurgu);
    font-size: var(--yz-12);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
}

.kimlik-blok {
    display: inline-flex;
    align-items: center;
    gap: var(--b2);
    min-width: 0;
}

.kimlik-blok-metin {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.kimlik-blok-ad {
    font-size: var(--yz-13);
    font-weight: 600;
    color: var(--otoform-metin);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kimlik-blok-rol {
    font-size: var(--yz-11);
    color: var(--otoform-metin-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   Giriş / kurulum ekranları (web SSR + mobil aynı blok)
   ============================================================ */

.hesap-govde {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--b6) var(--b4);
    background-color: var(--otoform-kabuk);
    background-image:
        radial-gradient(circle at 15% 10%, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 45%),
        radial-gradient(circle at 85% 90%, rgba(228, 108, 12, .10) 0%, rgba(228, 108, 12, 0) 50%);
}

.hesap-kabuk {
    width: 100%;
    max-width: 430px;
}

.hesap-kart {
    background: var(--otoform-yuzey);
    border: 1px solid var(--otoform-kenar);
    border-radius: var(--r-4);
    box-shadow: var(--otoform-golge-3);
    padding: var(--b6) var(--b5) var(--b5);
}

.hesap-logo {
    display: block;
    height: 96px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto var(--b4);
}

.hesap-marka {
    margin: 0;
    text-align: center;
    font-size: var(--yz-20);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--otoform-lacivert);
}

.hesap-alt-baslik {
    margin: 4px 0 0;
    text-align: center;
    font-size: var(--yz-14);
    color: var(--otoform-metin-2);
}

/* Marka çizgisi: kırmızı tek vurgu (PDF'teki marka şeridiyle aynı renk). */
.hesap-ayrac {
    height: 3px;
    width: 54px;
    margin: var(--b4) auto var(--b5);
    border-radius: 2px;
    background: var(--otoform-kirmizi);
}

.hesap-kart .btn-primary {
    width: 100%;
    min-height: 48px;
}

.hesap-uyari {
    font-size: var(--yz-14);
}

.hesap-bilgi {
    font-size: var(--yz-14);
    line-height: 1.5;
    color: var(--otoform-metin-2);
    background: var(--otoform-yuzey-2);
    border: 1px solid var(--otoform-kenar);
    border-radius: var(--r-2);
    padding: var(--b3) var(--b4);
    margin-bottom: var(--b5);
}

.hesap-dipnot {
    margin: var(--b5) 0 0;
    text-align: center;
    font-size: var(--yz-12);
    line-height: 1.6;
    color: rgba(255, 255, 255, .55);
}

@media (max-width: 400px) {
    .hesap-kart {
        padding: var(--b5) var(--b4) var(--b4);
    }

    .hesap-logo {
        height: 72px;
    }
}

/* Oturum öncesi düzen kabı (BosDuzen) */
.bos-duzen {
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--otoform-kabuk);
}


/* ============================================================
   Mikro etkileşim — 140ms, yalnız renk/kenar/gölge; öğe zıplamaz
   ============================================================ */

.card,
.liste-karti,
.table > tbody > tr,
.avatar,
.ikon-kutu {
    transition: background-color .14s ease, border-color .14s ease,
                box-shadow .14s ease, color .14s ease;
}

/* ============================================================
   Odak görünürlüğü — klavye için şart
   ============================================================ */

:focus-visible {
    outline: 2px solid var(--otoform-vurgu);
    outline-offset: 2px;
}

.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: none;
}

.btn:focus-visible {
    outline: 2px solid var(--otoform-vurgu);
    outline-offset: 2px;
    box-shadow: var(--otoform-odak);
}

/* ============================================================
   Hareket azaltma tercihi
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    /* Dönmeyen bekleme göstergesi "donmuş" görünür — tek istisna. */
    .spinner-border {
        animation-duration: 1.1s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ============================================================
   Yazdırma
   ============================================================ */

@media print {
    .yan-menu,
    .ust-bar,
    .hizli-cubuk {
        display: none !important;
    }

    .card {
        box-shadow: none;
        border: 1px solid var(--otoform-kenar-koyu);
    }
}

/* Klavye açıkken mobil alt çubuk gizlenir; :has desteklenmiyorsa yok sayılır. */
html:has(input:focus, textarea:focus, select:focus) .hizli-cubuk {
    display: none;
}

/* ---------------- Blazor hata şeridi ----------------
   Bilerek izolasyonsuz: hem MainLayout hem BosDuzen kullanır. */

#blazor-error-ui {
    background: var(--otoform-durum-devam-zemin);
    color: var(--otoform-durum-devam-metin);
    bottom: 0;
    box-shadow: var(--otoform-golge-ust);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: var(--z-hata);
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    color: inherit;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
    text-decoration: underline;
}

/* ============================================================
   Servis kalemleri — hem detay (salt okunur) hem düzenle ekranı
   kullandığı için kapsamlı CSS'te değil burada durur
   ============================================================ */

/* Sütun genişlikleri yüzdedir: sabit px verilince dar dizüstü ekranında
   tablo taşıyordu. Sıra: Tip, Açıklama, Miktar, Birim, Birim Fiyat,
   İnd.%, KDV%, Tutar. Açıklama sütunu kalanı alır. */
.kalem-tablo th:nth-child(1) { width: 12%; }
.kalem-tablo th:nth-child(3) { width: 9%; }
.kalem-tablo th:nth-child(4) { width: 10%; }
.kalem-tablo th:nth-child(5) { width: 13%; }
.kalem-tablo th:nth-child(6) { width: 7%; }
.kalem-tablo th:nth-child(7) { width: 7%; }
.kalem-tablo th:nth-child(8) { width: 13%; }

.kalem-kart {
    border: 1px solid var(--otoform-kenar);
    border-radius: var(--r-3);
    background: var(--otoform-yuzey);
    padding: .8rem;
}

/* Yeni kalem satırı: kesikli çerçeve onu mevcut kalemlerden ayırır. */
.yeni-kalem {
    border: 1px dashed var(--otoform-kenar-koyu);
}

/* Dokunma hedefi: tabloda 38px yeterli, karttaki alanlar telefonla
   doldurulduğu için 44px'e çıkar. */
.kalem-tablo .form-control,
.kalem-tablo .form-select {
    min-height: 38px;
}

.kalem-kart .form-control,
.kalem-kart .form-select,
.yeni-kalem .form-control,
.yeni-kalem .form-select {
    min-height: 44px;
}