/* =====================================================================
   Kuruyemiş tasarım sistemi — bileşenler
   tokenlar.css ve yuzeyler.css'ten SONRA yüklenir.
   Bootstrap bileşenleri (btn, form-control, form-select, form-check,
   input-group, table, badge, alert) yeniden şekillendirilir; ek olarak
   kendi sınıflarımız: btn-hayalet, btn-ikon, rozet, tablo-kart,
   sekmeler, kabuk, yan-menu, alt-gezinme, ikon.
   Canlandırma yalnızca transform ve opacity ile yapılır.
   ===================================================================== */

/* ---------- İkon ---------- */
.ikon {
    width: var(--ikon-boyut);
    height: var(--ikon-boyut);
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Kendiliğinden sütunlanan ızgaralar (medya sorgusu gerektirmez) ---------- */
/* --izgara-min ile en dar sütun genişliği ayarlanır. */
.izgara-otomatik,
.form-izgara {
    display: grid;
    gap: var(--bosluk-3) var(--bosluk-4);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--izgara-min, 14rem), 100%), 1fr));
}

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

/* =====================================================================
   BUTONLAR
   ===================================================================== */
.btn {
    --btn-golge: var(--yukselti-1);
    --btn-parlak: none;
    --bs-btn-padding-x: var(--bosluk-4);
    --bs-btn-padding-y: var(--bosluk-2);
    --bs-btn-font-family: var(--yazi-aile);
    --bs-btn-font-size: var(--yazi-dugme);
    --bs-btn-font-weight: var(--kalinlik-yari-kalin);
    --bs-btn-line-height: 1.25;
    --bs-btn-border-radius: var(--yaricap-md);
    --bs-btn-disabled-opacity: 0.55;
    --bs-btn-focus-box-shadow: var(--btn-golge);
    --bs-btn-active-shadow: var(--yukselti-basili);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bosluk-2);
    min-height: var(--kontrol-yukseklik);
    box-shadow: var(--btn-golge);
    background-image: var(--btn-parlak);
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    transition: transform var(--sure-anlik) var(--egri-standart);
}

/* app.css'teki odak gölgesini geçersiz kıl; odak halkası outline ile */
.btn:focus,
.btn:active:focus {
    box-shadow: var(--btn-golge);
}

.btn:focus-visible,
.btn:active:focus-visible,
.btn.active:focus-visible {
    outline: 3px solid var(--odak-halka-renk);
    outline-offset: 2px;
    box-shadow: var(--btn-golge);
}

/* Basılı: içeri çöker — 1 px aşağı, gölge içe döner */
.btn:active,
.btn.active,
.btn[aria-pressed="true"],
.btn-check:checked + .btn {
    --btn-golge: var(--yukselti-basili);
    --btn-parlak: var(--btn-parlak-basili, none);
    transform: translateY(var(--basili-asagi));
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    --btn-golge: none;
    --btn-parlak: none;
    transform: none;
}

/* Birincil — fıstık yeşili */
.btn-primary {
    --bs-btn-color: var(--renk-birincil-uzerinde);
    --bs-btn-bg: var(--renk-birincil);
    --bs-btn-border-color: var(--renk-birincil-basili);
    --bs-btn-hover-color: var(--renk-birincil-uzerinde);
    --bs-btn-hover-bg: var(--renk-birincil-hover);
    --bs-btn-hover-border-color: var(--renk-birincil-basili);
    --bs-btn-active-color: var(--renk-birincil-uzerinde);
    --bs-btn-active-bg: var(--renk-birincil-basili);
    --bs-btn-active-border-color: var(--renk-birincil-basili);
    --bs-btn-disabled-color: var(--renk-birincil-uzerinde);
    --bs-btn-disabled-bg: var(--renk-birincil);
    --bs-btn-disabled-border-color: var(--renk-birincil);
    --btn-parlak: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 60%);
    --btn-parlak-basili: linear-gradient(180deg, rgb(0 0 0 / 0.1), rgb(0 0 0 / 0) 55%);
    --btn-golge:
        inset 0 1px 0 rgb(255 255 255 / 0.22),
        0 1px 2px rgb(var(--golge-rgb) / calc(0.12 * var(--golge-carpan))),
        0 4px 10px -4px color-mix(in srgb, var(--renk-birincil) 70%, transparent);
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

/* İkincil — yükseltilmiş nötr yüzey */
.btn-secondary,
.btn-outline-secondary,
.btn-light {
    --bs-btn-color: var(--renk-metin);
    --bs-btn-bg: var(--renk-yuzey-yukselmis);
    --bs-btn-border-color: var(--renk-cizgi-guclu);
    --bs-btn-hover-color: var(--renk-metin);
    --bs-btn-hover-bg: color-mix(in srgb, var(--renk-yuzey-yukselmis), var(--renk-metin) 5%);
    --bs-btn-hover-border-color: var(--renk-cizgi-alan);
    --bs-btn-active-color: var(--renk-metin);
    --bs-btn-active-bg: var(--renk-yuzey-cukur);
    --bs-btn-active-border-color: var(--renk-cizgi-alan);
    --bs-btn-disabled-color: var(--renk-metin);
    --bs-btn-disabled-bg: var(--renk-yuzey-yukselmis);
    --bs-btn-disabled-border-color: var(--renk-cizgi);
    --btn-parlak: linear-gradient(180deg, var(--isik-ust), rgb(255 255 255 / 0) 70%);
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

/* Çerçeveli birincil — tablo satırı eylemleri ("Düzenle") */
.btn-outline-primary {
    --bs-btn-color: var(--renk-birincil-metin);
    --bs-btn-bg: var(--renk-yuzey-yukselmis);
    --bs-btn-border-color: var(--renk-cizgi-guclu);
    --bs-btn-hover-color: var(--renk-birincil-zayif-metin);
    --bs-btn-hover-bg: var(--renk-birincil-zayif);
    --bs-btn-hover-border-color: var(--renk-birincil);
    --bs-btn-active-color: var(--renk-birincil-zayif-metin);
    --bs-btn-active-bg: var(--renk-birincil-zayif);
    --bs-btn-active-border-color: var(--renk-birincil);
    --bs-btn-disabled-color: var(--renk-birincil-metin);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--renk-cizgi);
    --btn-parlak: linear-gradient(180deg, var(--isik-ust), rgb(255 255 255 / 0) 70%);
}

/* Tehlike — dolu */
.btn-danger {
    --bs-btn-color: var(--renk-hata-dolu-uzerinde);
    --bs-btn-bg: var(--renk-hata-dolu);
    --bs-btn-border-color: var(--renk-hata-dolu-hover);
    --bs-btn-hover-color: var(--renk-hata-dolu-uzerinde);
    --bs-btn-hover-bg: var(--renk-hata-dolu-hover);
    --bs-btn-hover-border-color: var(--renk-hata-dolu-hover);
    --bs-btn-active-color: var(--renk-hata-dolu-uzerinde);
    --bs-btn-active-bg: var(--renk-hata-dolu-hover);
    --bs-btn-active-border-color: var(--renk-hata-dolu-hover);
    --bs-btn-disabled-color: var(--renk-hata-dolu-uzerinde);
    --bs-btn-disabled-bg: var(--renk-hata-dolu);
    --bs-btn-disabled-border-color: var(--renk-hata-dolu);
    --btn-parlak: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0) 60%);
    --btn-parlak-basili: linear-gradient(180deg, rgb(0 0 0 / 0.1), rgb(0 0 0 / 0) 55%);
    --btn-golge:
        inset 0 1px 0 rgb(255 255 255 / 0.2),
        0 1px 2px rgb(var(--golge-rgb) / calc(0.12 * var(--golge-carpan))),
        0 4px 10px -4px color-mix(in srgb, var(--renk-hata-dolu) 65%, transparent);
}

/* Tehlike — çerçeveli ("Sil") */
.btn-outline-danger {
    --bs-btn-color: var(--renk-hata);
    --bs-btn-bg: var(--renk-yuzey-yukselmis);
    --bs-btn-border-color: var(--renk-cizgi-guclu);
    --bs-btn-hover-color: var(--renk-hata-metin);
    --bs-btn-hover-bg: var(--renk-hata-zayif);
    --bs-btn-hover-border-color: var(--renk-hata);
    --bs-btn-active-color: var(--renk-hata-metin);
    --bs-btn-active-bg: var(--renk-hata-zayif);
    --bs-btn-active-border-color: var(--renk-hata);
    --bs-btn-disabled-color: var(--renk-hata);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--renk-cizgi);
    --btn-parlak: linear-gradient(180deg, var(--isik-ust), rgb(255 255 255 / 0) 70%);
}

/* Hayalet — çerçevesiz, gölgesiz; ikincil eylemler ve araç çubukları */
.btn-hayalet {
    --btn-golge: none;
    --bs-btn-color: var(--renk-birincil-metin);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--renk-birincil-zayif-metin);
    --bs-btn-hover-bg: var(--renk-birincil-zayif);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--renk-birincil-zayif-metin);
    --bs-btn-active-bg: var(--renk-birincil-zayif);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--renk-birincil-metin);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-link {
    --btn-golge: none;
    --bs-btn-color: var(--renk-birincil-metin);
    --bs-btn-hover-color: var(--renk-birincil-hover);
    --bs-btn-active-color: var(--renk-birincil-hover);
}

.btn-link:active {
    transform: none;
}

/* Boyutlar */
.btn-sm {
    --bs-btn-padding-y: var(--bosluk-1);
    --bs-btn-padding-x: var(--bosluk-3);
    --bs-btn-font-size: var(--yazi-sm);
    --bs-btn-border-radius: var(--yaricap-sm);
    min-height: var(--kontrol-yukseklik-sm);
}

.btn-lg {
    --bs-btn-padding-y: var(--bosluk-3);
    --bs-btn-padding-x: var(--bosluk-6);
    --bs-btn-font-size: var(--yazi-lg);
    --bs-btn-border-radius: var(--yaricap-lg);
    min-height: var(--kontrol-yukseklik-lg);
}

/* Yalnızca ikonlu kare buton; erişilebilir ad aria-label ile verilmeli */
.btn-ikon {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    width: var(--kontrol-yukseklik);
}

.btn-sm.btn-ikon { width: var(--kontrol-yukseklik-sm); }
.btn-lg.btn-ikon { width: var(--kontrol-yukseklik-lg); }

/* =====================================================================
   FORM ALANLARI
   ===================================================================== */
.form-label {
    margin-bottom: var(--bosluk-1);
    font-size: var(--yazi-sm);
    font-weight: var(--kalinlik-yari-kalin);
    color: var(--renk-metin);
}

.form-text {
    margin-top: var(--bosluk-1);
    font-size: var(--yazi-sm);
    color: var(--renk-metin-soluk);
}

/* Çukur alan: içe gölge, alan kenarı ≥3:1 */
.form-control,
.form-select {
    min-height: var(--kontrol-yukseklik);
    padding: var(--kontrol-dolgu-y) var(--bosluk-3);
    font-family: var(--yazi-aile);
    font-size: var(--yazi-md); /* telefonda 16 px: iOS'ta odakta yakınlaştırmayı önler */
    font-weight: var(--kalinlik-normal);
    color: var(--renk-metin);
    background-color: var(--renk-alan-zemin);
    border: 1px solid var(--renk-cizgi-alan);
    border-radius: var(--yaricap-md);
    box-shadow: var(--yukselti-cukur);
    transition: none;
}

.form-select {
    --bs-form-select-bg-img: var(--ikon-secim-ok);
    padding-right: 2.5rem;
    background-position: right var(--bosluk-3) center;
    background-size: 16px 12px;
}

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

.form-control:focus,
.form-select:focus {
    color: var(--renk-metin);
    background-color: var(--renk-alan-zemin);
    border-color: var(--renk-odak);
    outline: 3px solid var(--odak-halka-yumusak);
    outline-offset: 0;
    box-shadow: var(--yukselti-cukur);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    color: var(--renk-metin-devre-disi);
    background-color: var(--renk-alan-devre-disi);
    border-color: var(--renk-cizgi);
    box-shadow: none;
    opacity: 1;
}

.form-control[readonly] {
    color: var(--renk-metin-ikincil);
}

.form-control-sm,
.form-select-sm {
    min-height: var(--kontrol-yukseklik-sm);
    padding-top: var(--bosluk-1);
    padding-bottom: var(--bosluk-1);
    font-size: var(--yazi-sm);
    border-radius: var(--yaricap-sm);
}

.form-control-lg,
.form-select-lg {
    min-height: var(--kontrol-yukseklik-lg);
    font-size: var(--yazi-lg);
    border-radius: var(--yaricap-lg);
}

/* Sayı alanı: sağa yaslı, tabular rakam */
.form-control.rakam,
input[type="number"].form-control {
    font-variant-numeric: tabular-nums;
    text-align: end;
}

/* Hata durumu: Bootstrap .is-invalid ve Blazor'ın .invalid sınıfı */
.form-control.is-invalid,
.form-select.is-invalid,
.form-control.invalid,
.form-select.invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: var(--renk-hata);
    background-color: color-mix(in srgb, var(--renk-hata-zayif) 45%, var(--renk-alan-zemin));
    outline: none;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.form-control.invalid:focus,
.form-select.invalid:focus {
    border-color: var(--renk-hata);
    outline: 3px solid color-mix(in srgb, var(--renk-hata) 30%, transparent);
    box-shadow: var(--yukselti-cukur);
}

/* Blazor'ın .valid.modified yeşil çerçevesini kaldır (gürültü); odak halkası korunur */
.valid.modified:not([type=checkbox]):not(:focus) {
    outline: none;
}

.form-control.valid.modified:focus,
.form-select.valid.modified:focus {
    outline: 3px solid var(--odak-halka-yumusak);
}

.validation-message,
.invalid-feedback {
    margin-top: var(--bosluk-1);
    font-size: var(--yazi-sm);
    font-weight: var(--kalinlik-orta);
    color: var(--renk-hata);
}

.validation-errors {
    padding-left: var(--bosluk-5);
    color: var(--renk-hata);
}

/* Giriş grubu ("kg", "₺") */
.input-group-text {
    min-height: var(--kontrol-yukseklik);
    font-size: var(--yazi-sm);
    font-weight: var(--kalinlik-orta);
    color: var(--renk-metin-ikincil);
    background-color: var(--renk-yuzey-cukur);
    border: 1px solid var(--renk-cizgi-alan);
    border-radius: var(--yaricap-md);
}

.input-group-sm > .input-group-text {
    min-height: var(--kontrol-yukseklik-sm);
    border-radius: var(--yaricap-sm);
}

.input-group > .form-control:focus,
.input-group > .form-select:focus {
    z-index: 5;
}

/* Onay kutusu ve radyo: satır en az 44 px, etiket tıklanabilir */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    min-height: var(--dokunma-min);
    padding-left: 0;
    margin-bottom: 0;
}

.form-check .form-check-input {
    float: none;
    margin: 0;
}

.form-check-inline {
    display: inline-flex;
    margin-right: var(--bosluk-5);
}

.form-check-label {
    cursor: pointer;
    /* Tıklanabilir etiket tek başına en az 44 px yüksek olsun (dokunma hedefi) */
    display: inline-flex;
    align-items: center;
    min-height: var(--dokunma-min);
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-color: var(--renk-alan-zemin);
    border: 1.5px solid var(--renk-cizgi-alan);
    box-shadow: var(--yukselti-cukur);
    cursor: pointer;
    transition: none;
}

.form-check-input[type=checkbox] {
    border-radius: var(--yaricap-xs);
}

.form-check-input:checked {
    background-color: var(--renk-birincil);
    border-color: var(--renk-birincil);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2);
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: var(--ikon-onay);
}

.form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: var(--ikon-radyo);
}

.form-check-input:focus {
    border-color: var(--renk-cizgi-alan);
    box-shadow: var(--yukselti-cukur);
}

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

.form-check-input:focus-visible {
    outline: 3px solid var(--odak-halka-renk);
    outline-offset: 2px;
}

.form-check-input:disabled {
    opacity: 0.5;
}

.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
    color: var(--renk-metin-devre-disi);
    opacity: 1;
}

.form-check-input.is-invalid,
.form-check-input.invalid {
    border-color: var(--renk-hata);
}

/* Kaba işaretçide (dokunmatik) küçük kontroller de 44 px */
@media (pointer: coarse) {
    .btn-sm,
    .form-control-sm,
    .form-select-sm,
    .input-group-sm > .input-group-text {
        min-height: var(--dokunma-min);
    }

    .btn-sm.btn-ikon {
        width: var(--dokunma-min);
    }
}

/* =====================================================================
   TABLO — geniş kapsayıcıda tablo, dar kapsayıcıda kart listesi
   Kullanım: <div class="tablo-kapsayici"><table class="table tablo-kart">…
   Her <td> data-etiket="Sütun adı" taşır; başlık hücresi .hucre-baslik.
   ===================================================================== */
.table {
    --bs-table-color: var(--renk-metin);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--renk-cizgi);
    --bs-table-striped-color: var(--renk-metin);
    --bs-table-striped-bg: color-mix(in srgb, var(--renk-yuzey-cukur) 55%, transparent);
    --bs-table-hover-color: var(--renk-metin);
    --bs-table-hover-bg: color-mix(in srgb, var(--renk-birincil) 7%, transparent);
    --bs-table-active-color: var(--renk-metin);
    --bs-table-active-bg: color-mix(in srgb, var(--renk-birincil) 12%, transparent);
    font-variant-numeric: tabular-nums;
}

.table > :not(caption) > * > * {
    padding: var(--bosluk-3) var(--bosluk-3);
}

.table-sm > :not(caption) > * > * {
    padding: var(--bosluk-2) var(--bosluk-2);
}

.table > thead {
    --bs-table-bg: var(--renk-yuzey-cukur);
}

.table > thead th {
    font-size: var(--yazi-xs);
    font-weight: var(--kalinlik-yari-kalin);
    letter-spacing: var(--harf-etiket);
    text-transform: uppercase;
    color: var(--renk-metin-ikincil);
    white-space: nowrap;
    border-bottom: 1px solid var(--renk-cizgi-guclu);
}

.table > tfoot > tr > * {
    font-weight: var(--kalinlik-kalin);
    border-top: 2px solid var(--renk-cizgi-guclu);
    border-bottom-width: 0;
}

.table > :not(:first-child) {
    border-top: 0;
}

.tablo-kapsayici {
    container: tablo / inline-size;
}

/* Yüzey içinde tablo: köşeler yuvarlak; geniş tablo kendi içinde yatay kayar */
.tablo-yuzey {
    /* Mutlak konumlu iç öğeler (.visually-hidden başlık metni gibi) kaydırma alanının dışına,
       sayfaya taşmasın: konumlandırma kapsayıcısı tablonun kendisi olsun */
    position: relative;
    overflow-x: auto;
    /* overflow-x: auto tek başına dikeyi de auto yapar; gereksiz dikey kaydırma çubuğu çıkmasın */
    overflow-y: hidden;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yaricap-lg);
    box-shadow: var(--yukselti-2);
}

.tablo-yuzey > .table,
.tablo-yuzey .table:last-child {
    margin-bottom: 0;
}

@container tablo (min-width: 40.0625rem) {
    .tablo-yuzey .table > :last-child > tr:last-child > * {
        border-bottom-width: 0;
    }
}

@container tablo (max-width: 40rem) {
    .tablo-yuzey:has(.tablo-kart) {
        overflow: visible;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .tablo-kart > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .tablo-kart,
    .tablo-kart > tbody,
    .tablo-kart > tfoot {
        display: block;
    }

    .tablo-kart > tbody > tr,
    .tablo-kart > tfoot > tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: var(--bosluk-3);
        padding: var(--bosluk-1) var(--bosluk-4);
        background: var(--renk-yuzey);
        border: 1px solid var(--renk-cizgi);
        border-radius: var(--yaricap-lg);
        box-shadow: var(--yukselti-2);
    }

    .tablo-kart > tfoot > tr {
        background: var(--renk-yuzey-cukur);
        box-shadow: var(--yukselti-cukur);
    }

    .tablo-kart > :not(caption) > * > * {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--bosluk-3);
        min-width: 0;
        padding: var(--bosluk-2) 0;
        text-align: end;
        background: transparent;
        box-shadow: none;
        border-top: 0;
        border-bottom: 1px solid var(--renk-cizgi);
        overflow-wrap: anywhere;
    }

    .tablo-kart > :not(caption) > * > *:last-child {
        border-bottom: 0;
    }

    .tablo-kart > :not(caption) > * > *::before {
        content: attr(data-etiket);
        flex-shrink: 0;
        max-width: 50%;
        text-align: start;
        /* Etiket, hücrenin yazı tipini (ör. .kod eş genişlikli) devralmasın */
        font-family: var(--yazi-aile);
        white-space: normal;
        font-size: var(--yazi-sm);
        font-weight: var(--kalinlik-orta);
        color: var(--renk-metin-ikincil);
    }

    .tablo-kart > :not(caption) > * > *:not([data-etiket])::before,
    .tablo-kart > :not(caption) > * > *[data-etiket=""]::before {
        content: none;
    }

    /* Değeri boş hücre kart görünümünde yer kaplamasın (etiketli olsa da) */
    .tablo-kart > :not(caption) > * > *:empty {
        display: none;
    }

    /* Kartın başlığı: en üste alınır, etiketsiz ve büyük */
    .tablo-kart .hucre-baslik {
        order: -1;
        justify-content: flex-start;
        padding-top: var(--bosluk-3);
        font-size: var(--yazi-md);
        font-weight: var(--kalinlik-kalin);
        text-align: start;
    }

    .tablo-kart .hucre-islem {
        justify-content: flex-end;
        flex-wrap: wrap;
        padding-bottom: var(--bosluk-3);
    }

    .tablo-kart.table-hover > tbody > tr:hover > * {
        --bs-table-bg-state: transparent;
    }

    .tablo-kart > tfoot > tr > * {
        border-top: 0;
    }

    /* Form tablosu (satır içi düzenleme): alan, etiketin yanında kalan genişliği alır */
    .tablo-kart > tbody > tr > td:has(> :is(.form-control, .form-select, .input-group)) {
        align-items: center;
    }

    .tablo-kart > tbody > tr > td > :is(.form-control, .form-select, .input-group) {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 65%;
    }
}

/* =====================================================================
   ROZETLER
   ===================================================================== */
.rozet {
    --rozet-zemin: var(--renk-yuzey-cukur);
    --rozet-metin: var(--renk-metin-ikincil);
    --rozet-kenar: var(--renk-cizgi);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1875rem 0.5625rem;
    font-size: var(--yazi-xs);
    font-weight: var(--kalinlik-yari-kalin);
    line-height: 1.25;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--rozet-metin);
    background: var(--rozet-zemin);
    border: 1px solid var(--rozet-kenar);
    border-radius: var(--yaricap-tam);
}

.rozet-birincil { --rozet-zemin: var(--renk-birincil-zayif); --rozet-metin: var(--renk-birincil-zayif-metin); --rozet-kenar: color-mix(in srgb, var(--renk-birincil) 35%, transparent); }
.rozet-basari   { --rozet-zemin: var(--renk-basari-zayif);   --rozet-metin: var(--renk-basari-metin);   --rozet-kenar: var(--renk-basari-kenar); }
.rozet-uyari    { --rozet-zemin: var(--renk-uyari-zayif);    --rozet-metin: var(--renk-uyari-metin);    --rozet-kenar: var(--renk-uyari-kenar); }
.rozet-hata     { --rozet-zemin: var(--renk-hata-zayif);     --rozet-metin: var(--renk-hata-metin);     --rozet-kenar: var(--renk-hata-kenar); }
.rozet-bilgi    { --rozet-zemin: var(--renk-bilgi-zayif);    --rozet-metin: var(--renk-bilgi-metin);    --rozet-kenar: var(--renk-bilgi-kenar); }
.rozet-vurgu    { --rozet-zemin: var(--renk-vurgu-zayif);    --rozet-metin: var(--renk-vurgu-metin);    --rozet-kenar: color-mix(in srgb, var(--renk-vurgu) 35%, transparent); }
/* Kavram rozeti: .rozet .rozet-kavram .kavram-fason */
.rozet-kavram   { --rozet-zemin: var(--kavram-zemin); --rozet-metin: var(--kavram-metin); --rozet-kenar: var(--kavram-kenar); }

/* Durum noktası (renk tek başına anlam taşımaz; metin her zaman var) */
.rozet-nokta::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

/* Bootstrap .badge → rozet görünümü (text-bg-* !important kullandığı için !important gerekir) */
.badge {
    --bs-badge-padding-x: 0.5625rem;
    --bs-badge-padding-y: 0.1875rem;
    --bs-badge-font-size: var(--yazi-xs);
    --bs-badge-font-weight: var(--kalinlik-yari-kalin);
    --bs-badge-border-radius: var(--yaricap-tam);
    line-height: 1.25;
    border: 1px solid transparent;
}

.badge.text-bg-primary   { color: var(--renk-birincil-zayif-metin) !important; background-color: var(--renk-birincil-zayif) !important; border-color: color-mix(in srgb, var(--renk-birincil) 35%, transparent); }
.badge.text-bg-success   { color: var(--renk-basari-metin) !important; background-color: var(--renk-basari-zayif) !important; border-color: var(--renk-basari-kenar); }
.badge.text-bg-warning   { color: var(--renk-uyari-metin) !important; background-color: var(--renk-uyari-zayif) !important; border-color: var(--renk-uyari-kenar); }
.badge.text-bg-danger    { color: var(--renk-hata-metin) !important; background-color: var(--renk-hata-zayif) !important; border-color: var(--renk-hata-kenar); }
.badge.text-bg-info      { color: var(--renk-bilgi-metin) !important; background-color: var(--renk-bilgi-zayif) !important; border-color: var(--renk-bilgi-kenar); }
.badge.text-bg-secondary,
.badge.text-bg-light     { color: var(--renk-metin-ikincil) !important; background-color: var(--renk-yuzey-cukur) !important; border-color: var(--renk-cizgi); }

/* =====================================================================
   UYARILAR (Bootstrap .alert)
   ===================================================================== */
.alert {
    --bs-alert-padding-x: var(--bosluk-4);
    --bs-alert-padding-y: var(--bosluk-3);
    --bs-alert-border-radius: var(--yaricap-lg);
    border-inline-start-width: 4px;
    box-shadow: var(--yukselti-1);
}

.alert-success { border-inline-start-color: var(--renk-basari); }
.alert-warning { border-inline-start-color: var(--renk-uyari); }
.alert-danger  { border-inline-start-color: var(--renk-hata); }
.alert-info    { border-inline-start-color: var(--renk-bilgi); }

.alert .alert-heading {
    margin-bottom: var(--bosluk-1);
    font-size: var(--yazi-md);
    font-weight: var(--kalinlik-kalin);
    color: inherit;
}

/* İkonlu uyarı: <div class="alert alert-info uyari-ikonlu"><svg class="ikon"/><div>…</div></div> */
.uyari-ikonlu {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--bosluk-3);
    align-items: start;
}

.uyari-ikonlu > .ikon {
    margin-top: 0.1rem;
}

.uyari-ikonlu p:last-child {
    margin-bottom: 0;
}

/* =====================================================================
   SEKMELER — çukur ray içinde yükselen seçili sekme
   <div class="sekmeler" role="tablist"><button class="sekme" role="tab" aria-selected="true">…
   ===================================================================== */
.sekmeler {
    display: inline-flex;
    gap: 2px;
    max-width: 100%;
    padding: 3px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--renk-yuzey-cukur);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yaricap-md);
    box-shadow: var(--yukselti-cukur);
}

.sekme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bosluk-2);
    min-height: var(--kontrol-yukseklik-sm);
    padding: 0 var(--bosluk-4);
    font: inherit;
    font-size: var(--yazi-sm);
    font-weight: var(--kalinlik-yari-kalin);
    white-space: nowrap;
    color: var(--renk-metin-ikincil);
    background: transparent;
    border: 1px solid transparent;
    border-radius: calc(var(--yaricap-md) - 3px);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform var(--sure-anlik) var(--egri-standart);
}

.sekme:hover {
    color: var(--renk-metin);
}

.sekme[aria-selected="true"],
.sekme[aria-pressed="true"],
.sekme.active {
    color: var(--renk-metin);
    background: var(--renk-yuzey-yukselmis);
    border-color: var(--renk-cizgi);
    box-shadow: var(--yukselti-1);
}

.sekme:active {
    transform: translateY(var(--basili-asagi));
}

.sekme:focus-visible {
    outline: 3px solid var(--odak-halka-renk);
    outline-offset: 1px;
}

@media (pointer: coarse) {
    .sekme {
        min-height: var(--dokunma-min);
    }
}

/* Bootstrap nav-pills (Hesabım menüsü): dokunma hedefi + token renkleri */
.nav-pills {
    gap: var(--bosluk-1);
}

.nav-pills .nav-link {
    display: flex;
    align-items: center;
    min-height: var(--dokunma-min);
    font-weight: var(--kalinlik-orta);
    color: var(--renk-metin-ikincil);
    border-radius: var(--yaricap-md);
}

.nav-pills .nav-link:hover {
    color: var(--renk-metin);
    background: var(--renk-yuzey-cukur);
}

.nav-pills .nav-link.active {
    color: var(--renk-birincil-zayif-metin);
    background: var(--renk-birincil-zayif);
    box-shadow: var(--yukselti-basili);
}

/* =====================================================================
   UYGULAMA KABUĞU — dar: üst çubuk + içerik + alt gezinme
                     geniş (≥ 48rem kapsayıcı): yan menü + üst çubuk + içerik
   <div class="kabuk"><div class="kabuk-duzen">
       <aside class="yan-menu">…</aside>
       <header class="kabuk-ust cam">…</header>
       <main class="kabuk-icerik">…</main>
       <nav class="alt-gezinme cam">…</nav>
   </div></div>
   ===================================================================== */
.kabuk {
    container: kabuk / inline-size;
}

.kabuk-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "ust"
        "icerik"
        "alt";
    min-block-size: var(--kabuk-yukseklik);
    background: var(--renk-zemin);
    color: var(--renk-metin);
}

.kabuk-duzen > .yan-menu { grid-area: yan; }
.kabuk-duzen > .kabuk-ust { grid-area: ust; }
.kabuk-duzen > .kabuk-icerik { grid-area: icerik; }
.kabuk-duzen > .alt-gezinme { grid-area: alt; }

.kabuk-ust {
    position: sticky;
    top: 0;
    z-index: var(--katman-yapiskan);
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    min-height: calc(var(--ust-cubuk-yukseklik) + var(--guvenli-ust));
    padding: var(--guvenli-ust) calc(var(--bosluk-4) + var(--guvenli-sag)) 0 calc(var(--bosluk-4) + var(--guvenli-sol));
    border-width: 0 0 1px;
    border-style: solid;
    border-color: var(--renk-cizgi);
}

/* Telefonda üst çubuk sığsın (marka, Yardım, Maliyet hesapla, 3D, çıkış): aralıklar daralır */
@container kabuk (max-width: 26rem) {
    .kabuk-ust {
        gap: var(--bosluk-1);
        padding-right: calc(var(--bosluk-2) + var(--guvenli-sag));
        padding-left: calc(var(--bosluk-2) + var(--guvenli-sol));
    }
}

.kabuk-ust-baslik {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    font-size: var(--yazi-lg);
    font-weight: var(--kalinlik-kalin);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kabuk-icerik {
    min-width: 0;
    padding: var(--bosluk-4) calc(var(--bosluk-4) + var(--guvenli-sag)) var(--bosluk-6) calc(var(--bosluk-4) + var(--guvenli-sol));
}

@container kabuk (min-width: 48rem) {
    .kabuk-duzen {
        grid-template-columns: var(--yan-menu-genislik) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "yan ust"
            "yan icerik";
    }

    .kabuk-ust {
        padding-left: var(--bosluk-8);
        padding-right: calc(var(--bosluk-8) + var(--guvenli-sag));
    }

    .kabuk-icerik {
        padding: var(--bosluk-6) calc(var(--bosluk-8) + var(--guvenli-sag)) var(--bosluk-10) var(--bosluk-8);
    }
}

/* ---------- Yan menü (geniş) ---------- */
.yan-menu {
    display: none;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 0;
    align-self: start;
    block-size: var(--kabuk-yukseklik);
    overflow-y: auto;
    padding: calc(var(--bosluk-4) + var(--guvenli-ust)) var(--bosluk-3) calc(var(--bosluk-4) + var(--guvenli-alt)) calc(var(--bosluk-3) + var(--guvenli-sol));
    color: var(--renk-yanmenu-metin);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--renk-yanmenu-zemin-acik) 55%, transparent), transparent 40%),
        var(--renk-yanmenu-zemin);
    box-shadow:
        inset -1px 0 0 var(--renk-yanmenu-kenar),
        6px 0 18px -10px rgb(var(--golge-rgb) / calc(0.3 * var(--golge-carpan)));
    scrollbar-width: thin;
}

@container kabuk (min-width: 48rem) {
    .yan-menu {
        display: flex;
    }
}

.yan-menu :focus-visible {
    outline-color: var(--renk-yanmenu-isaret);
}

.yan-menu-marka {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    min-height: var(--dokunma-min);
    margin-bottom: var(--bosluk-3);
    padding: 0 var(--bosluk-2);
    font-size: var(--yazi-lg);
    font-weight: var(--kalinlik-kalin);
    letter-spacing: var(--harf-baslik);
    color: #FFFFFF;
    text-decoration: none;
}

.yan-menu-marka:hover {
    color: #FFFFFF;
}

/* Marka işareti: küçük 3B "fıstık" küpü */
/* Marka işareti: uygulama ikonunun küçük hali (tek fıstık, img/ikon/marka.png, 64 px = 2x) */
.marka-isaret {
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    background: url("../../img/ikon/marka.png") center / contain no-repeat;
}

.yan-menu-baslik {
    padding: var(--bosluk-4) var(--bosluk-3) var(--bosluk-1);
    font-size: var(--yazi-2xs);
    font-weight: var(--kalinlik-yari-kalin);
    letter-spacing: var(--harf-etiket);
    text-transform: uppercase;
    color: var(--renk-yanmenu-soluk);
}

.yan-menu-baglanti {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    width: 100%;
    min-height: var(--dokunma-min);
    padding: 0 var(--bosluk-3);
    font: inherit;
    font-size: var(--yazi-sm);
    font-weight: var(--kalinlik-orta);
    text-align: start;
    text-decoration: none;
    color: var(--renk-yanmenu-metin);
    background: none;
    border: 0;
    border-radius: var(--yaricap-md);
    cursor: pointer;
    transition: transform var(--sure-anlik) var(--egri-standart);
}

.yan-menu-baglanti:hover {
    color: #FFFFFF;
    background: rgb(255 255 255 / 0.07);
}

.yan-menu-baglanti:active {
    transform: translateY(var(--basili-asagi));
}

.yan-menu-baglanti.active,
.yan-menu-baglanti[aria-current="page"] {
    color: #FFFFFF;
    font-weight: var(--kalinlik-kalin);
    background: var(--renk-yanmenu-aktif);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.09),
        0 1px 2px rgb(0 0 0 / 0.3);
}

.yan-menu-baglanti.active::before,
.yan-menu-baglanti[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-block: 18%;
    inset-inline-start: 0;
    width: 4px;
    border-radius: var(--yaricap-tam);
    background: var(--renk-yanmenu-isaret);
}

.yan-menu-alt {
    margin-top: auto;
    padding-top: var(--bosluk-4);
    border-top: 1px solid rgb(255 255 255 / 0.08);
}

/* ---------- Alt gezinme (dar) ---------- */
.alt-gezinme {
    position: sticky;
    bottom: 0;
    z-index: var(--katman-alt-gezinme);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--bosluk-1);
    padding: var(--bosluk-1) calc(var(--bosluk-2) + var(--guvenli-sag)) calc(var(--bosluk-1) + var(--guvenli-alt)) calc(var(--bosluk-2) + var(--guvenli-sol));
    border-width: 1px 0 0;
    border-style: solid;
    border-color: var(--renk-cizgi);
    box-shadow: 0 -8px 24px -14px rgb(var(--golge-rgb) / calc(0.25 * var(--golge-carpan)));
}

@container kabuk (min-width: 48rem) {
    .alt-gezinme {
        display: none;
    }
}

.alt-gezinme-oge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 3.5rem;
    min-width: var(--dokunma-min);
    padding: var(--bosluk-1) 0;
    font-size: var(--yazi-xs);
    font-weight: var(--kalinlik-yari-kalin);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: var(--renk-metin-ikincil);
    border-radius: var(--yaricap-md);
    touch-action: manipulation;
}

.alt-gezinme-oge:hover {
    color: var(--renk-metin);
}

.alt-gezinme-ikon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 1.875rem;
    border-radius: var(--yaricap-tam);
    transition: transform var(--sure-hizli) var(--egri-yay);
}

.alt-gezinme-oge:active .alt-gezinme-ikon {
    transform: scale(0.92);
}

.alt-gezinme-oge.active,
.alt-gezinme-oge[aria-current="page"] {
    color: var(--renk-birincil-metin);
}

.alt-gezinme-oge.active .alt-gezinme-ikon,
.alt-gezinme-oge[aria-current="page"] .alt-gezinme-ikon {
    color: var(--renk-birincil-zayif-metin);
    background: var(--renk-birincil-zayif);
    box-shadow: var(--yukselti-basili);
}

.alt-gezinme-oge:focus-visible {
    outline: 3px solid var(--odak-halka-renk);
    outline-offset: -3px;
}

/* =====================================================================
   ZORLANMIŞ RENKLER (Windows yüksek karşıtlık)
   ===================================================================== */
@media (forced-colors: active) {
    .btn,
    .sekme,
    .rozet,
    .badge,
    .alt-gezinme-oge {
        border: 1px solid ButtonText;
    }

    .sekme[aria-selected="true"],
    .alt-gezinme-oge[aria-current="page"],
    .alt-gezinme-oge.active,
    .yan-menu-baglanti.active,
    .yan-menu-baglanti[aria-current="page"] {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }

    .kart-egik::after {
        display: none;
    }
}

/* =====================================================================
   YÜKSEK KONTRAST TERCİHİ
   ===================================================================== */
@media (prefers-contrast: more) {
    .form-control:focus,
    .form-select:focus {
        outline-color: var(--renk-odak);
    }

    .btn-hayalet {
        --bs-btn-border-color: currentColor;
    }

    .sekme[aria-selected="true"],
    .sekme[aria-pressed="true"] {
        border-color: var(--renk-metin);
    }
}

/* =====================================================================
   SADE MOD — tek sütun, büyük hedefli giriş ekranları (Stok Girişi, hızlı firma ekleme…)
   Yoğun masaüstü ölçeği burada uygulanmaz: her cihazda en az 48 px hedef, 17 px alan yazısı.
   <div class="sade"> <div class="sade-soru"> <label class="sade-baslik">Kaç kilo?</label> … </div> </div>
   ===================================================================== */
.sade {
    --dokunma-min: 48px;
    --kontrol-yukseklik: 52px;
    --kontrol-yukseklik-sm: 48px;
    --kontrol-dolgu-y: 0.625rem;
    --yazi-md: 1.0625rem;
    --yazi-sm: 0.9375rem;
    --yazi-dugme: 1.0625rem;
    --ikon-boyut: 1.25rem;

    display: grid;
    gap: var(--bosluk-5);
    max-width: 36rem;
    font-size: var(--yazi-md);
}

.sade-soru {
    display: grid;
    gap: var(--bosluk-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.sade-baslik {
    margin: 0;
    padding: 0;
    float: none;
    font-size: 1.1875rem;
    font-weight: var(--kalinlik-kalin);
    letter-spacing: var(--harf-baslik);
    color: var(--renk-metin);
}

.sade-ipucu {
    margin: 0;
    font-size: var(--yazi-sm);
    color: var(--renk-metin-ikincil);
}

.sade .form-control.sade-buyuk {
    min-height: 3.75rem;
    font-size: 1.5rem;
    font-weight: var(--kalinlik-yari-kalin);
}

/* Seçim düğmeleri: grup / ürün / depo. Seçili olan basılı görünür (aria-pressed). */
.secim-dugmeleri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: var(--bosluk-2);
}

.secim-dugmesi {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: var(--bosluk-2) var(--bosluk-3);
    font: inherit;
    font-weight: var(--kalinlik-yari-kalin);
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
    color: var(--renk-metin);
    background: var(--renk-yuzey-yukselmis);
    border: 1px solid var(--renk-cizgi-guclu);
    border-radius: var(--yaricap-md);
    box-shadow: var(--yukselti-1);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform var(--sure-anlik) var(--egri-standart);
}

.secim-dugmesi:hover {
    border-color: var(--renk-cizgi-alan);
}

.secim-dugmesi:active {
    transform: translateY(var(--basili-asagi));
}

.secim-dugmesi[aria-pressed="true"] {
    color: var(--renk-birincil-zayif-metin);
    background: var(--renk-birincil-zayif);
    border: 2px solid var(--renk-birincil);
    box-shadow: var(--yukselti-basili);
}

.secim-dugmesi:focus-visible {
    outline: 3px solid var(--odak-halka-renk);
    outline-offset: 2px;
}

.secim-liste {
    grid-template-columns: minmax(0, 1fr);
}

.secim-liste .secim-dugmesi {
    justify-content: flex-start;
    text-align: start;
}

/* Seçilmiş değer özeti: "Antep fıstığı › Kavrulmuş   [Değiştir]" */
.sade-secili {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    min-height: var(--kontrol-yukseklik);
    padding: var(--bosluk-2) var(--bosluk-2) var(--bosluk-2) var(--bosluk-4);
    font-weight: var(--kalinlik-yari-kalin);
    color: var(--renk-birincil-zayif-metin);
    background: var(--renk-birincil-zayif);
    border: 1px solid color-mix(in srgb, var(--renk-birincil) 35%, transparent);
    border-radius: var(--yaricap-md);
}

.sade-secili > :first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sade-toplam {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bosluk-3);
    padding: var(--bosluk-3) var(--bosluk-4);
    background: var(--renk-yuzey-cukur);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yaricap-md);
    box-shadow: var(--yukselti-cukur);
}

.sade-toplam strong {
    font-size: 1.375rem;
    font-variant-numeric: tabular-nums;
}

.sade .btn-sade-ana {
    width: 100%;
    min-height: 3.75rem;
    font-size: 1.1875rem;
}

/* Başarı ekranı */
.sade-basari {
    display: grid;
    justify-items: center;
    gap: var(--bosluk-3);
    padding: var(--bosluk-6) var(--bosluk-4);
    text-align: center;
    background: var(--renk-basari-zayif);
    color: var(--renk-basari-metin);
    border: 1px solid var(--renk-basari-kenar);
    border-radius: var(--yaricap-lg);
    box-shadow: var(--yukselti-2);
}

.sade-basari-isaret {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    color: var(--renk-yuzey);
    background: var(--renk-basari);
    box-shadow: var(--yukselti-2);
}

.sade-basari-isaret .ikon {
    width: 2.5rem;
    height: 2.5rem;
    stroke-width: 2.5;
}

.sade-basari-metin {
    margin: 0;
    font-size: 1.25rem;
    font-weight: var(--kalinlik-kalin);
    text-wrap: balance;
}

.sade-dugmeler {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--bosluk-3);
    width: 100%;
}

/* Adım adım ekran (Stok Girişi): her ekranda tek soru. Üstte AdimGostergesi (bölüm çubuğu, "2 / 5 · Firma", seçilenler);
   altta İleri / Geri. Renk sayfanın hareket renginden (.hareket-giris → yeşil). */
.adim-gostergesi {
    display: grid;
    gap: var(--bosluk-2);
}

.adim-cubuk {
    display: flex;
    gap: var(--bosluk-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.adim-cubuk li {
    flex: 1 1 0;
    height: 6px;
    border-radius: 3px;
    background: var(--renk-cizgi);
}

.adim-cubuk li.gecti {
    background: color-mix(in srgb, var(--hareket-ana, var(--renk-birincil)) 50%, var(--renk-cizgi));
}

.adim-cubuk li.etkin {
    background: var(--hareket-ana, var(--renk-birincil));
}

.adim-yazi {
    margin: 0;
    font-size: var(--yazi-sm);
    font-weight: var(--kalinlik-yari-kalin);
    color: var(--renk-metin-ikincil);
}

.adim-ozet {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-2);
}

/* Seçilenlerin kısa özeti: dokununca o soruya döner */
.adim-cip {
    min-height: 2.75rem;
    max-width: 100%;
    padding: 0 var(--bosluk-3);
    font: inherit;
    font-size: var(--yazi-sm);
    text-align: start;
    overflow-wrap: anywhere;
    color: var(--renk-metin);
    background: var(--renk-yuzey-cukur);
    border: 1px solid var(--renk-cizgi);
    border-radius: 999px;
    cursor: pointer;
    touch-action: manipulation;
}

.adim-cip:hover {
    border-color: var(--renk-cizgi-guclu);
}

/* Değiştirilemeyen bilgi (Stok Çıkışı: ikinci üründen sonra depo sabit) */
.adim-cip-sabit {
    display: inline-flex;
    align-items: center;
    cursor: default;
    color: var(--renk-metin-ikincil);
}

.adim-cip-sabit:hover {
    border-color: var(--renk-cizgi);
}

.adim-cip:focus-visible {
    outline: 3px solid var(--odak-halka-renk);
    outline-offset: 2px;
}

.adim-akisi .adim-baslik,
.adim-akisi .vade-secimi > .sade-baslik {
    font-size: 1.5rem;
}

/* Başlığa programla odaklanılır (klavye açılmasın); fareyle tıklamada halka çıkmasın */
.adim-akisi .adim-baslik:focus:not(:focus-visible) {
    outline: none;
}

.adim-baslik label {
    margin: 0;
    font: inherit;
}

.adim-secenekler,
.adim-alt {
    display: grid;
    gap: var(--bosluk-3);
}

.adim-geri {
    justify-self: start;
    min-width: 8rem;
}

/* Kontrol ekranı: "Kimden aldınız? Yıldız Tarım [Değiştir]" satırları */
.kontrol-liste {
    margin: 0;
}

.kontrol-satir {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px var(--bosluk-3);
    padding: var(--bosluk-3) 0;
    border-bottom: 1px solid var(--renk-cizgi);
}

.kontrol-satir dt {
    grid-column: 1;
    font-size: var(--yazi-sm);
    font-weight: var(--kalinlik-normal);
    color: var(--renk-metin-ikincil);
}

.kontrol-satir dd {
    grid-column: 1;
    margin: 0;
    font-weight: var(--kalinlik-yari-kalin);
    overflow-wrap: anywhere;
}

.kontrol-satir > .btn {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.kontrol-ek {
    grid-column: 1 / -1;
}

.sepet-dugmeler {
    display: flex;
    gap: var(--bosluk-2);
}

/* Katlanır bölüm: "Diğer bilgiler" */
.katlanir {
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yaricap-md);
    background: var(--renk-yuzey);
}

.katlanir > summary {
    display: flex;
    align-items: center;
    min-height: var(--dokunma-min);
    padding: 0 var(--bosluk-4);
    font-weight: var(--kalinlik-yari-kalin);
    color: var(--renk-birincil-metin);
    cursor: pointer;
}

.katlanir > .katlanir-govde {
    display: grid;
    gap: var(--bosluk-3);
    padding: var(--bosluk-2) var(--bosluk-4) var(--bosluk-4);
}

/* Küçük pencere (hızlı firma ekleme). Dar ekranda alttan açılan tam genişlik sayfa. */
.pencere-ortu {
    position: fixed;
    inset: 0;
    z-index: var(--katman-ust);
    display: grid;
    align-items: end;
    justify-items: center;
    padding: 0;
    background: rgb(0 0 0 / 0.45);
}

.pencere {
    width: min(100%, 30rem);
    max-height: 100dvh;
    overflow-y: auto;
    padding: var(--bosluk-5) calc(var(--bosluk-4) + var(--guvenli-sag)) calc(var(--bosluk-5) + var(--guvenli-alt)) calc(var(--bosluk-4) + var(--guvenli-sol));
    background: var(--renk-yuzey);
    color: var(--renk-metin);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yaricap-xl) var(--yaricap-xl) 0 0;
    box-shadow: var(--yukselti-4);
}

@media (min-width: 40rem) {
    .pencere-ortu {
        align-items: center;
        padding: var(--bosluk-4);
    }

    .pencere {
        border-radius: var(--yaricap-xl);
    }
}

.pencere-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-3);
    margin-bottom: var(--bosluk-4);
}

.pencere-baslik h2 {
    margin: 0;
    font-size: var(--yazi-xl);
}

/* =====================================================================
   YAZDIRMA — fiş gibi sayfalar: kabuk (menü, üst çubuk, alt gezinme) ve düğmeler gizlenir
   ===================================================================== */
@media print {
    .yan-menu,
    .kabuk-ust,
    .alt-gezinme,
    .icerige-gec,
    .yazdirma-gizle,
    #blazor-error-ui,
    #components-reconnect-modal {
        display: none !important;
    }

    .kabuk-duzen {
        display: block;
        min-block-size: 0;
        background: #fff;
    }

    .kabuk-icerik {
        padding: 0 !important;
    }

    html,
    body {
        background: #fff !important;
        color: #000 !important;
    }

    @page {
        margin: 8mm;
    }
}

/* =====================================================================
   HAREKET RENK DİLİ — giriş yeşil ↓, çıkış kehribar ↑, transfer mavi →
   Rozet, kutucuk şeridi, büyük düğme ve sayfa başlığı aynı sınıfı kullanır:
   <span class="rozet rozet-hareket hareket-giris">↓ Giriş</span>
   ===================================================================== */
.hareket-giris    { --hareket-ana: var(--renk-basari); --hareket-zayif: var(--renk-basari-zayif); --hareket-metin: var(--renk-basari-metin); --hareket-kenar: var(--renk-basari-kenar); }
.hareket-cikis    { --hareket-ana: var(--renk-uyari);  --hareket-zayif: var(--renk-uyari-zayif);  --hareket-metin: var(--renk-uyari-metin);  --hareket-kenar: var(--renk-uyari-kenar); }
.hareket-transfer { --hareket-ana: var(--renk-bilgi);  --hareket-zayif: var(--renk-bilgi-zayif);  --hareket-metin: var(--renk-bilgi-metin);  --hareket-kenar: var(--renk-bilgi-kenar); }

.rozet-hareket {
    --rozet-zemin: var(--hareket-zayif);
    --rozet-metin: var(--hareket-metin);
    --rozet-kenar: var(--hareket-kenar);
}

/* Sayfa başlığındaki renkli ikon: <h1 class="hareket-baslik hareket-giris"><span class="hareket-isaret">…</span> Stok Girişi</h1> */
.hareket-baslik {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
}

.hareket-isaret {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--yaricap-md);
    color: var(--hareket-metin);
    background: var(--hareket-zayif);
    border: 1px solid var(--hareket-kenar);
}

.hareket-isaret .ikon {
    width: 1.375rem;
    height: 1.375rem;
}

/* Ana sayfadaki büyük "Mal geldi / Mal çıktı" düğmeleri */
.hareket-dugmesi {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    min-height: 4.5rem;
    padding: var(--bosluk-3) var(--bosluk-4);
    font-size: var(--yazi-lg);
    font-weight: var(--kalinlik-kalin);
    color: var(--hareket-metin);
    text-decoration: none;
    background: var(--hareket-zayif);
    border: 1px solid var(--hareket-kenar);
    border-inline-start: 6px solid var(--hareket-ana);
    border-radius: var(--yaricap-lg);
    box-shadow: var(--yukselti-1);
    touch-action: manipulation;
    transition: transform var(--sure-anlik) var(--egri-standart);
}

.hareket-dugmesi:hover {
    color: var(--hareket-metin);
    box-shadow: var(--yukselti-2);
}

.hareket-dugmesi:active {
    transform: translateY(var(--basili-asagi));
}

.hareket-dugmesi .ikon {
    width: 1.75rem;
    height: 1.75rem;
}

.hareket-dugmesi small {
    display: block;
    font-size: var(--yazi-sm);
    font-weight: var(--kalinlik-normal);
}

/* =====================================================================
   EKSİK SORU — "Stoğa ekle"ye basıldığında boş kalan soru kırmızı çerçeveyle işaretlenir
   ===================================================================== */
.sade-soru.soru-eksik {
    padding: var(--bosluk-3);
    background: color-mix(in srgb, var(--renk-hata-zayif) 55%, transparent);
    border: 2px solid var(--renk-hata);
    border-radius: var(--yaricap-md);
}

.soru-eksik-not {
    margin: 0;
    font-size: var(--yazi-sm);
    font-weight: var(--kalinlik-yari-kalin);
    color: var(--renk-hata);
}

/* =====================================================================
   DOKUNMA ALANLARI — telefonda metin bağlantıları da en az 44 px
   ===================================================================== */
@media (pointer: coarse) {
    .geri-baglanti,
    .dokunma-baglanti {
        display: inline-flex;
        align-items: center;
        min-height: var(--dokunma-min);
    }
}

/* =====================================================================
   "DAHA FAZLA" — telefon alt menüsünden açılan sayfa listesi (popover; JS gerekmez)
   ===================================================================== */
.daha-fazla {
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 85dvh;
    margin: 0;
    padding: var(--bosluk-4) calc(var(--bosluk-4) + var(--guvenli-sag)) calc(var(--bosluk-5) + var(--guvenli-alt)) calc(var(--bosluk-4) + var(--guvenli-sol));
    overflow-y: auto;
    color: var(--renk-metin);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yaricap-xl) var(--yaricap-xl) 0 0;
    box-shadow: var(--yukselti-4);
}

.daha-fazla::backdrop {
    background: rgb(0 0 0 / 0.45);
}

.daha-fazla-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--bosluk-3);
}

.daha-fazla-baslik h2 {
    margin: 0;
    font-size: var(--yazi-lg);
}

.daha-fazla-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bosluk-2);
}

.daha-fazla-oge {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    min-height: 3.5rem;
    padding: var(--bosluk-2) var(--bosluk-3);
    font-weight: var(--kalinlik-yari-kalin);
    color: var(--renk-metin);
    text-decoration: none;
    background: var(--renk-yuzey-yukselmis);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yaricap-md);
    box-shadow: var(--yukselti-1);
}

.daha-fazla-oge:hover {
    color: var(--renk-metin);
}

.daha-fazla-oge.active {
    color: var(--renk-birincil-zayif-metin);
    background: var(--renk-birincil-zayif);
}

.daha-fazla-oge .ikon {
    flex-shrink: 0;
    color: var(--renk-birincil-metin);
}

.alt-gezinme-oge.alt-gezinme-dugme {
    font: inherit;
    font-size: var(--yazi-xs);
    font-weight: var(--kalinlik-yari-kalin);
    background: none;
    border: 0;
    cursor: pointer;
}

/* Çıkış formu "Daha fazla" listesinde diğer öğelerle aynı ızgara hücresine oturur */
.daha-fazla-liste .cikis-formu {
    display: contents;
}

button.daha-fazla-oge {
    width: 100%;
    font: inherit;
    font-weight: var(--kalinlik-yari-kalin);
    text-align: start;
    cursor: pointer;
}

.hareket-dugmeleri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--bosluk-3);
    margin-bottom: var(--bosluk-5);
}

/* Son kullanılanlar — sade girişte arama kutusunun altındaki hızlı seçim düğmeleri */
.son-kullanilanlar {
    display: flex;
    flex-direction: column;
    gap: var(--bosluk-2);
    margin-top: var(--bosluk-2);
}

.son-kullanilanlar-baslik {
    font-size: var(--yazi-sm);
    font-weight: var(--kalinlik-yari-kalin);
    color: var(--renk-metin-ikincil);
}

/* =====================================================================
   SEPET — çok ürünlü giriş/çıkışta listeye eklenen ürünler (SepetListesi)
   ===================================================================== */
.sepet {
    padding: var(--bosluk-3) var(--bosluk-4);
    background: var(--renk-yuzey-yukselmis);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yaricap-lg);
    box-shadow: var(--yukselti-1);
}

.sepet-baslik {
    margin: 0 0 var(--bosluk-2);
    font-size: var(--yazi-lg);
}

.sepet-adet {
    color: var(--renk-metin-ikincil);
    font-weight: var(--kalinlik-normal);
}

.sepet-liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sepet-kalem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "ad tutar"
        "hesap cikar";
    align-items: center;
    gap: 2px var(--bosluk-3);
    padding: var(--bosluk-2) 0;
    border-bottom: 1px solid var(--renk-cizgi);
}

.sepet-ad { grid-area: ad; font-weight: var(--kalinlik-yari-kalin); }
.sepet-hesap { grid-area: hesap; font-size: var(--yazi-sm); color: var(--renk-metin-ikincil); }
.sepet-tutar { grid-area: tutar; text-align: end; }
.sepet-cikar { grid-area: cikar; justify-self: end; }

.sepet-toplam {
    display: flex;
    justify-content: space-between;
    gap: var(--bosluk-3);
    padding-top: var(--bosluk-2);
    font-size: var(--yazi-lg);
}

.sade-basari .sepet {
    width: 100%;
    text-align: start;
}

.sepete-ekle {
    width: 100%;
    margin-top: var(--bosluk-3);
}

/* Seçim düğmesindeki küçük not ("224 kg var") — UrunSecici */
.secim-dugmesi .secim-alt {
    display: block;
    font-size: var(--yazi-sm);
    font-weight: var(--kalinlik-normal);
    color: var(--renk-metin-ikincil);
}

/* İşlem (Faz 5): lila — şablon ekranındaki fason renginden. Giriş yeşil, çıkış kehribar, transfer mavi ile karışmaz. */
.hareket-islem { --hareket-ana: var(--renk-fason-metin); --hareket-zayif: var(--renk-fason-zemin); --hareket-metin: var(--renk-fason-metin); --hareket-kenar: var(--renk-fason-kenar); }

/* =====================================================================
   FİŞ — yazdırılabilir belgeler (giriş/çıkış fişi, işlem fişi, transfer fişi, makbuz). Kağıt gibi:
   koyu temada da beyaz. Dar (80 mm termal yazıcıya sığar), A4'te sol üstte çıkar. FisCercevesi bileşeni.
   ===================================================================== */
.fis-araclari {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-2);
    margin-bottom: var(--bosluk-4);
}

/* Fiş: kağıt gibi, temadan bağımsız (koyu temada da beyaz) */
.fis {
    position: relative;
    max-width: 24rem;
    padding: var(--bosluk-5) var(--bosluk-4);
    color: #111;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: var(--yaricap-sm);
    box-shadow: var(--yukselti-2);
    font-size: 0.9375rem;
    line-height: 1.4;
}

.fis-ust {
    display: grid;
    justify-items: center;
    gap: 2px;
    text-align: center;
    padding-bottom: var(--bosluk-3);
    border-bottom: 1px dashed #999;
}

.fis-firma {
    font-size: 1.125rem;
}

.fis-baslik {
    margin: var(--bosluk-2) 0 0;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: #111;
}

.fis-bilgi,
.fis-toplam {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px var(--bosluk-3);
    margin: var(--bosluk-3) 0;
}

.fis-bilgi dt,
.fis-toplam dt {
    font-weight: 600;
}

.fis-bilgi dd,
.fis-toplam dd {
    margin: 0;
    text-align: end;
    overflow-wrap: anywhere;
}

.fis-tablo {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.fis-tablo th,
.fis-tablo td {
    padding: 4px 2px;
    border-bottom: 1px dashed #bbb;
    vertical-align: top;
}

.fis-tablo th {
    font-size: 0.8125rem;
    text-align: start;
    border-bottom: 1px solid #333;
}

.fis-tablo .sag {
    text-align: end;
    white-space: nowrap;
}

.fis-toplam {
    padding-top: var(--bosluk-2);
    border-top: 1px solid #333;
}

.fis-toplam dt:first-of-type,
.fis-toplam dd:first-of-type {
    font-size: 1.125rem;
    font-weight: 800;
}

.fis-imza {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bosluk-4);
    margin-top: var(--bosluk-6);
}

.fis-imza div {
    padding-top: var(--bosluk-8);
    border-bottom: 1px solid #333;
    font-size: 0.8125rem;
    text-align: center;
}

.fis-imza span {
    display: block;
    transform: translateY(1.4em);
}

.fis-alt {
    margin-top: var(--bosluk-6);
    font-size: 0.75rem;
    color: #555;
    text-align: center;
}

.fis-iptal-damga {
    margin: var(--bosluk-3) 0 0;
    padding: var(--bosluk-1);
    font-weight: 800;
    letter-spacing: 0.15em;
    text-align: center;
    color: #b0232c;
    border: 2px solid #b0232c;
}

@media print {
    .fis {
        max-width: 80mm;
        padding: 0;
        border: 0;
        box-shadow: none;
        font-size: 11pt;
    }
}

/* Fişte ara başlık (Giden mal / Gelen mal) ve uzun yazı (yazıyla tutar, not) */
.fis-ara-baslik {
    margin: var(--bosluk-3) 0 var(--bosluk-1);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #111;
}

.fis-yazi {
    margin: var(--bosluk-2) 0 0;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.fis-buyuk-tutar {
    margin: var(--bosluk-3) 0 0;
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Kilo numaratörü (KiloNumarator): kilo kutusunun altında 1.000 · 100 · 10 · 1 sütunları, üstte +, altta −.
   Klavyesiz kilo girişi; basılı tutunca tekrar eder (kuruyemis.js). Eldivenli parmak için büyük düğme. */
.kilo-numarator {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--bosluk-2);
    margin-top: var(--bosluk-2);
}

.numarator-sutun {
    display: grid;
    gap: var(--bosluk-1);
}

.numarator-dugme {
    min-height: calc(var(--dokunma-min) + 4px);
    padding: 0 var(--bosluk-1);
    font-weight: var(--kalinlik-yari-kalin);
    font-variant-numeric: tabular-nums;
    border-radius: var(--yaricap-md);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    white-space: nowrap;
}

.numarator-dugme span {
    margin-inline-end: 2px;
    font-weight: var(--kalinlik-kalin);
}

.numarator-arti {
    color: var(--renk-birincil-zayif-metin);
    background: var(--renk-birincil-zayif);
    border: 1px solid var(--renk-birincil);
}

.numarator-eksi {
    color: var(--renk-metin);
    background: var(--renk-yuzey-yukselmis);
    border: 1px solid var(--renk-cizgi-guclu);
}

.numarator-dugme:active:not(:disabled) {
    transform: scale(0.96);
}

.numarator-dugme:disabled {
    opacity: 0.45;
}

.numarator-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-2);
    min-height: var(--dokunma-min);
}

/* Fare tekerleği ipucu yalnızca fareli cihazda (telefonda gereksiz) */
@media (hover: none) {
    .numarator-fare {
        display: none;
    }
}

.numarator-alt-dugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-2);
    margin-left: auto;
}

/* Rakam penceresi (RakamPenceresi): "Rakam tuşları" düğmesiyle açılır, kilo sorusunun altında durur.
   Yalnızca rakam, virgül, Sil, Temizle ve Tamam; hesap tuşu yok. Telefon tuş takımı düzeni (1-2-3 üstte). */
.rakam-kap {
    position: relative;
}

.rakam-perde {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: color-mix(in srgb, var(--renk-metin) 12%, transparent);
}

.rakam-penceresi {
    position: absolute;
    top: var(--bosluk-1);
    left: 0;
    z-index: 1041;
    width: min(19rem, 100%);
    padding: var(--bosluk-3);
    border: 1px solid var(--renk-cizgi-guclu);
    border-radius: var(--yaricap-lg);
    background: var(--renk-yuzey-yukselmis);
    box-shadow: var(--yukselti-3);
}

.rakam-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--bosluk-2);
}

.rakam-kapat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dokunma-min);
    height: var(--dokunma-min);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--renk-metin-ikincil);
}

.rakam-ekran {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--bosluk-2);
    margin-bottom: var(--bosluk-3);
    padding: var(--bosluk-2) var(--bosluk-3);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yaricap-md);
    background: var(--renk-yuzey);
}

.rakam-deger {
    min-height: 2.2rem;
    font-size: 1.6rem;
    font-weight: var(--kalinlik-kalin);
    overflow-wrap: anywhere;
}

.rakam-birim {
    color: var(--renk-metin-ikincil);
    font-weight: var(--kalinlik-yari-kalin);
}

.rakam-izgara {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bosluk-2);
}

.rakam-tus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bosluk-1);
    min-height: 3.25rem;
    border: 1px solid var(--renk-cizgi-guclu);
    border-radius: var(--yaricap-md);
    background: var(--renk-yuzey);
    color: var(--renk-metin);
    font-size: 1.35rem;
    font-weight: var(--kalinlik-yari-kalin);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: var(--yukselti-1);
}

.rakam-tus:active {
    transform: scale(0.95);
}

.rakam-tus-sil {
    color: var(--renk-hata);
    font-size: 1.1rem;
}

.rakam-tus-tamam {
    grid-column: span 2;
    border-color: var(--renk-birincil);
    background: var(--renk-birincil);
    color: var(--renk-birincil-uzerinde);
    font-size: 1.15rem;
}

/* Telefonda pencere alt kenara yapışık açılır (telefon klavyesi gibi): hep tam görünür, alt menünün üstünde kalır */
@media (max-width: 36rem) {
    .rakam-penceresi {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        border-radius: var(--yaricap-lg) var(--yaricap-lg) 0 0;
        padding-bottom: calc(var(--bosluk-3) + env(safe-area-inset-bottom, 0px));
    }

    .rakam-tus {
        min-height: 3rem;
    }
}

/* =====================================================================
   VADE — veresiyede ödeme günü (VadeSecimi), firma kartındaki genel vade ve Vadesi Gelenler sayfası.
   Gecikmiş kırmızı, bu hafta kehribar; renk tek başına değil, rozette "12 gün geçti" yazar.
   ===================================================================== */
.vade-dugmeleri {
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
}

.vade-tarih,
.vade-gun {
    max-width: 14rem;
}

.vade-yonleri {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vade-yonleri .secim-dugmesi {
    display: flex;
    flex-direction: column;
    gap: var(--bosluk-1);
}

.vade-yonleri small {
    font-weight: var(--kalinlik-normal);
    color: var(--renk-metin-ikincil);
}

.vade-ozet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--bosluk-3);
    margin: var(--bosluk-4) 0;
}

.vade-ozet-kutu {
    display: grid;
    gap: var(--bosluk-1);
    padding: var(--bosluk-3) var(--bosluk-4);
    color: inherit;
    text-decoration: none;
    border-left: 4px solid var(--renk-cizgi-guclu);
}

.vade-ozet-deger {
    font-size: 1.35rem;
    font-weight: var(--kalinlik-kalin);
}

.vade-ozet-deger small,
.vade-ozet-alt {
    font-size: var(--yazi-sm, 0.875rem);
    color: var(--renk-metin-ikincil);
}

.vade-ozet-kutu.vade-gecikmis { border-left-color: var(--renk-hata); }
.vade-ozet-kutu.vade-bu-hafta { border-left-color: var(--renk-uyari); }
.vade-ozet-kutu.vade-sonra    { border-left-color: var(--renk-bilgi); }

.vade-grup {
    margin-top: var(--bosluk-5);
    scroll-margin-top: 4.5rem;
}

.vade-grup-baslik {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--bosluk-2) var(--bosluk-3);
}

.vade-grup.vade-gecikmis .vade-grup-baslik { color: var(--renk-hata-metin); }

.vade-liste {
    display: grid;
    gap: var(--bosluk-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vade-kalem {
    display: grid;
    gap: var(--bosluk-1);
    padding: var(--bosluk-3) var(--bosluk-4);
}

.vade-gecikmis .vade-kalem {
    border-color: var(--renk-hata-kenar);
}

.vade-kalem-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bosluk-2);
}

.vade-tutar {
    font-size: 1.15rem;
}

.vade-kalem-bilgi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bosluk-2);
    color: var(--renk-metin-ikincil);
}

.vade-aciklama {
    color: var(--renk-metin-ikincil);
    overflow-wrap: anywhere;
}

.vade-kalem-dugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-2);
    margin-top: var(--bosluk-1);
}

/* Çek bilgileri (CekGirisi) ve Çekler sayfası */
.cek-girisi {
    display: grid;
    gap: var(--bosluk-3);
}

.cek-satiri {
    display: grid;
    gap: var(--bosluk-2);
    padding: var(--bosluk-3);
    border: 1px solid var(--renk-cizgi-guclu);
    border-radius: var(--yaricap-lg);
    background: var(--renk-yuzey-yukselmis);
}

.cek-satiri-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-2);
}

.cek-satiri-alanlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--bosluk-2) var(--bosluk-3);
}

.cek-satiri-alanlar .form-label {
    margin-bottom: var(--bosluk-1);
}

.cek-vade {
    grid-column: 1 / -1;
}

.cek-vade-satir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bosluk-2);
}

.cek-vade-satir input {
    max-width: 12rem;
}

.cek-portfoy .secim-dugmesi {
    text-align: start;
}

.cek-alt {
    display: block;
    font-size: var(--yazi-sm);
    color: var(--renk-metin-ikincil);
}

.cek-toplam {
    margin: 0;
}

.cek-sekmeleri {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

.cek-sekmeleri .secim-dugmesi {
    display: flex;
    flex-direction: column;
    gap: var(--bosluk-1);
}

.cek-sekmeleri small {
    font-weight: var(--kalinlik-normal);
    color: var(--renk-metin-ikincil);
}

.cek-liste {
    margin-top: var(--bosluk-3);
}

.cek-gecikmis {
    border-color: var(--renk-hata-kenar);
}

.cek-isaret {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bosluk-2);
    margin-top: var(--bosluk-1);
}

.cek-isaret input {
    max-width: 11rem;
}

/* =====================================================================
   3D PANO (/pano-3d): üst çubukta "3D" düğmesiyle açılır. Sahne Three.js tuvali + üstünde HTML etiketler.
   ===================================================================== */
.ust-3d {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--dokunma-min);
    min-width: var(--dokunma-min);
    font-weight: var(--kalinlik-kalin);
    letter-spacing: 0.02em;
}

.pano3d-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--bosluk-3);
    margin-bottom: var(--bosluk-3);
}

.pano3d-dugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-2);
}

.pano3d-sahne {
    position: relative;
    height: max(22rem, calc(100dvh - var(--ust-cubuk-yukseklik) - 12rem));
    overflow: hidden;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yaricap-xl);
    /* Gökyüzü: sahne gündüz bir lojistik sahası (pano3d.js GOK ile aynı); temadan bağımsız bir resim gibi */
    background: #BFE3F7;
    box-shadow: var(--yukselti-2, none);
    user-select: none;
    -webkit-user-select: none;
}

.pano3d-sahne canvas {
    display: block;
    cursor: grab;
}

.pano3d-sahne canvas:active {
    cursor: grabbing;
}

.pano3d-etiketler {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Etiketler sahnenin içinde (gündüz resmi): renkler temadan bağımsız, açık ve koyu temada aynı */
.pano3d-etiket {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    padding: 0.2rem 0.5rem;
    border: 1px solid #C9CED4;
    border-top: 3px solid var(--urun-renk, #C9CED4);
    background: #FFFFFF;
    color: #22262B;
    font-size: 0.75rem;
    font-weight: var(--kalinlik-orta, 500);
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    will-change: transform;
}

.pano3d-etiket span {
    color: #4A525A;
    font-weight: normal;
    font-variant-numeric: tabular-nums;
}

.pano3d-urun-etiket.aktif {
    z-index: 2;
    outline: 2px solid #22262B;
    font-size: var(--yazi-sm);
}

/* Depo tabelası: kırmızı, beyaz çerçeveli */
.pano3d-depo-etiket {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.25rem 0.75rem;
    border: 2px solid #FFFFFF;
    border-radius: var(--yaricap-md);
    background: #D7262E;
    color: #FFFFFF;
    font-size: var(--yazi-md);
}

.pano3d-depo-etiket span {
    color: #FFE3E3;
}

/* Sürükle-bırakta üstünde durulan hedef depo */
.pano3d-depo-etiket.hedef {
    z-index: 3;
    border-color: #F2C200;
    box-shadow: 0 0 0 4px rgb(242 194 0 / 0.6);
}

/* Taşıma paneli: dokunulan yığının bilgisi ve "Başka depoya taşı" (sahnenin sol üstünde, sade düzen) */
.pano3d-panel {
    position: absolute;
    top: var(--bosluk-3);
    left: var(--bosluk-3);
    z-index: 3;
    width: min(23rem, calc(100% - 2 * var(--bosluk-3)));
    max-height: calc(100% - 2 * var(--bosluk-3));
    overflow-y: auto;
    padding: var(--bosluk-3) var(--bosluk-4) var(--bosluk-4);
    border: 1px solid var(--renk-cizgi-guclu);
    border-radius: var(--yaricap-lg);
    background: var(--renk-yuzey-yukselmis);
    box-shadow: var(--yukselti-3);
    color: var(--renk-metin);
    user-select: text;
    -webkit-user-select: text;
}

.pano3d-panel-ust {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bosluk-2);
    margin-bottom: var(--bosluk-3);
}

.pano3d-panel-ust strong {
    display: block;
    font-size: var(--yazi-lg);
}

.pano3d-hizli {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-2);
    margin-top: var(--bosluk-2);
}

/* Panelin içinden açılan rakam penceresi panelde kesilmesin: ekranın ortasında (telefonda alta yapışık kalır) */
@media (min-width: 36.01rem) {
    .pano3d-panel .rakam-penceresi {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.pano3d-ipucu {
    position: absolute;
    right: var(--bosluk-3);
    bottom: var(--bosluk-2);
    margin: 0;
    padding: 0.15rem 0.5rem;
    border-radius: var(--yaricap-md);
    background: rgb(255 255 255 / 0.85);
    color: #22262B;
    font-size: var(--yazi-sm);
    pointer-events: none;
}

/* =====================================================================
   KASA (/kasa): ay seçici, dört özet kutu, Para girdi / Para çıktı, ay kapanışı, hareket tablosu (yazdırılabilir).
   ===================================================================== */
.kasa-ay-secici {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bosluk-2);
    margin-bottom: var(--bosluk-3);
}

.kasa-ay-secici h2 {
    min-width: 9rem;
    text-align: center;
}

/* Firma adı yalnızca yazdırırken (kağıtta kimin kasası olduğu belli olsun) */
.kasa-yazdir-firma {
    display: none;
}

.kasa-ozet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--bosluk-3);
    margin-bottom: var(--bosluk-4);
}

.kasa-ozet-kutu {
    display: grid;
    gap: var(--bosluk-1);
    padding: var(--bosluk-3) var(--bosluk-4);
}

.kasa-ozet-kutu strong {
    font-size: var(--yazi-xl, 1.35rem);
}

.kasa-simdi {
    border-color: var(--renk-birincil);
}

.kasa-giren strong,
td.kasa-giren {
    color: var(--renk-basari-metin, #2E6B2E);
}

.kasa-cikan strong,
td.kasa-cikan {
    color: var(--renk-hata, #B42318);
}

.kasa-kapanis .kasa-uyari {
    margin-top: var(--bosluk-2);
    color: var(--renk-uyari-metin, #7A5200);
}

.kasa-dugmeler {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--bosluk-3);
    margin-bottom: var(--bosluk-3);
}

.kasa-araclar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-2);
    margin-bottom: var(--bosluk-4);
}

.kasa-formu {
    margin-bottom: var(--bosluk-4);
}

.kasa-turleri {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.kasa-tablo td {
    vertical-align: top;
}

.kasa-belge,
.kasa-not {
    display: block;
    font-size: var(--yazi-sm);
}

.kasa-devir-satiri td,
.kasa-sayim-satiri td {
    font-style: italic;
    color: var(--renk-metin-ikincil);
}

@media print {
    .kasa-yazdir-firma {
        display: inline;
        margin-left: auto;
        font-weight: var(--kalinlik-kalin);
    }
}

/* Ana sayfa kutusu (VadeUyarisi) */
.vade-uyari .vade-uyari-satir {
    display: block;
}
/* =====================================================================
   YARDIM — /yardim ve /yardim/{konu}. Konu içerikleri Components/Yardim/Konular'da; ortak sınıflar burada.
   Okunaklı satır uzunluğu, numaralı büyük adımlar, telefon boyutunda ekran görüntüsü.
   ===================================================================== */
/* Yardım sayfasında içerik alanı mavi (bilgi) tonunda: programın yeşil-gri zemininden ayrılır, "yardımdayım" belli olur.
   Kartlar ve görseller beyaz kalır. Açık / koyu tema token'lardan gelir. */
.kabuk-icerik:has(.yardim-sayfa) {
    background: var(--renk-bilgi-zayif);
}

.yardim-serit {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    margin-bottom: var(--bosluk-4);
    padding: var(--bosluk-2) var(--bosluk-3);
    border: 1px solid var(--renk-bilgi-kenar);
    border-radius: var(--yaricap-md);
    background: var(--renk-bilgi-zayif);
    color: var(--renk-bilgi-metin);
    font-size: var(--yazi-sm);
    font-weight: var(--kalinlik-yari-kalin);
}

.yardim-serit-isaret {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--renk-bilgi);
    color: var(--renk-yuzey);
    font-weight: var(--kalinlik-kalin);
    line-height: 1;
}

.yardim-sayfa .yardim-baslik-ikon {
    background: var(--renk-bilgi-zayif);
    color: var(--renk-bilgi);
}

.yardim-icerik {
    max-width: 46rem;
}

.yardim-baslik {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
}

.yardim-baslik-ikon {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: var(--yaricap-md);
    background: var(--renk-birincil-zayif);
    color: var(--renk-birincil);
}

.yardim-ozet {
    font-size: var(--yazi-lg);
    color: var(--renk-metin-ikincil);
}

.yardim-icerik h2 {
    margin-top: var(--bosluk-6);
    font-size: var(--yazi-xl);
}

.yardim-icerik h3 {
    margin-top: var(--bosluk-4);
    font-size: var(--yazi-lg);
}

.yardim-icerik p,
.yardim-icerik li {
    line-height: 1.6;
}

/* Numaralı adımlar: büyük daire içinde sıra */
.yardim-adimlar {
    counter-reset: adim;
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--bosluk-3);
}

.yardim-adimlar > li {
    counter-increment: adim;
    position: relative;
    padding-inline-start: 2.75rem;
    min-height: 2rem;
}

.yardim-adimlar > li::before {
    content: counter(adim);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--renk-birincil);
    color: var(--renk-birincil-uzerinde);
    font-weight: var(--kalinlik-kalin);
}

/* Ekrandaki düğme ve soru adları: kullanıcı ekranda aynısını arar */
.yardim-dugme {
    display: inline-block;
    padding: 0 var(--bosluk-2);
    border: 1px solid var(--renk-cizgi-guclu);
    border-radius: var(--yaricap-sm);
    background: var(--renk-yuzey-yukselmis);
    font-weight: var(--kalinlik-yari-kalin);
    white-space: nowrap;
}

.yardim-gorsel {
    margin: var(--bosluk-4) 0;
    max-width: 20rem;
}

.yardim-gorsel img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--renk-cizgi-guclu);
    border-radius: var(--yaricap-lg);
    box-shadow: var(--yukselti-2);
}

.yardim-gorsel figcaption {
    margin-top: var(--bosluk-2);
    font-size: var(--yazi-sm);
    color: var(--renk-metin-ikincil);
}

/* Görsel ve adımlar geniş ekranda yan yana */
.yardim-yanyana {
    display: grid;
    gap: var(--bosluk-4);
    align-items: start;
}

@container kabuk (min-width: 56rem) {
    .yardim-yanyana {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }

    .yardim-yanyana .yardim-gorsel {
        margin-top: 0;
    }
}

.yardim-kutu {
    margin: var(--bosluk-4) 0;
}

.yardim-sss dt {
    margin-top: var(--bosluk-3);
    font-weight: var(--kalinlik-yari-kalin);
}

.yardim-sss dd {
    margin: var(--bosluk-1) 0 0;
}

.yardim-ara {
    max-width: 28rem;
    margin-bottom: var(--bosluk-4);
}

.yardim-grup {
    margin-bottom: var(--bosluk-5);
}

.yardim-diger {
    margin-top: var(--bosluk-6);
    padding-top: var(--bosluk-4);
    border-top: 1px solid var(--renk-cizgi);
}