/*
    =================================================
    23. PENCERELER (ORTAK)

    Kütüphaneye kaydet, parça ekleme,
    raf ekleme ve bakış yönü pencereleri
    aynı iskeleti paylaşır.
    =================================================
*/

.kutuphaneyeKaydetKatmani,
.parcaEklemeKatmani,
.rafEklemeKatmani,
.malzemeSecimiKatmani,
.dolapBakisYonuKatmani {
    position: fixed;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        rgba(27, 35, 48, 0.34);
}


.kutuphaneyeKaydetKatmani {
    z-index: 5000;

    animation:
        katmanGiris
        0.12s
        linear;
}


.parcaEklemeKatmani {
    z-index: 10000;
}


.rafEklemeKatmani {
    z-index: 10000;
}


.dolapBakisYonuKatmani {
    z-index: 10000;
}


.kutuphaneyeKaydetPenceresi,
.parcaEklemePenceresi,
.rafEklemePenceresi,
.malzemeSecimiPenceresi,
.dolapBakisYonuPenceresi {
    display: flex;
    flex-direction: column;

    max-height:
        calc(100vh - 48px);

    overflow: hidden;

    border:
        1px solid
        var(--renk-kenarlik-koyu);

    border-radius:
        var(--radius-buyuk);

    background:
        var(--renk-panel);

    box-shadow:
        var(--golge-pencere);

    animation:
        pencereGiris
        0.12s
        linear;
}


.kutuphaneyeKaydetPenceresi {
    width:
        min(100%, 440px);
}


.parcaEklemePenceresi {
    width:
        min(100%, 380px);
}


.rafEklemePenceresi {
    width:
        min(100%, 420px);
}


.dolapBakisYonuPenceresi {
    width:
        min(100%, 380px);
}


/*
    -------------------------------------------------
    PENCERE BAŞLIK ÇUBUĞU

    Masaüstü penceresi gibi ince ve
    koyu zeminli.
    -------------------------------------------------
*/

.kutuphaneyeKaydetBaslikAlani,
.parcaEklemeBaslikAlani,
.rafEklemeBaslikAlani,
.malzemeSecimiBaslikAlani,
.dolapBakisYonuBaslikAlani {
    height: 30px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        0
        4px
        0
        10px;

    border-bottom:
        1px solid
        var(--renk-kenarlik);

    background:
        var(--renk-bolum-baslik);
}


.kutuphaneyeKaydetBaslik,
.parcaEklemeBaslik,
.rafEklemeBaslik,
.malzemeSecimiBaslik,
.dolapBakisYonuBaslik {
    margin: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color:
        var(--renk-yazi);

    font-size:
        var(--yazi-kucuk);

    font-weight: 700;
}


.kutuphaneyeKaydetKapatBtn,
.parcaEklemeKapatBtn,
.rafEklemeKapatBtn,
.malzemeSecimiKapatBtn,
.dolapBakisYonuKapatBtn {
    width: 22px;
    height: 22px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        transparent;

    border-radius: 2px;

    background: transparent;

    color:
        var(--renk-yazi-ikincil);

    font-size: 15px;
    line-height: 1;

    cursor: pointer;

    transition:
        border-color 0.1s linear,
        background 0.1s linear,
        color 0.1s linear;
}


.kutuphaneyeKaydetKapatBtn:hover:not(:disabled),
.parcaEklemeKapatBtn:hover,
.rafEklemeKapatBtn:hover,
.dolapBakisYonuKapatBtn:hover {
    border-color:
        var(--renk-tehlike);

    background:
        var(--renk-tehlike);

    color: #ffffff;
}


/*
    -------------------------------------------------
    PENCERE GÖVDESİ
    -------------------------------------------------
*/

.kutuphaneyeKaydetForm,
.parcaEklemeForm,
.rafEklemeForm,
.malzemeSecimiForm,
.dolapBakisYonuIcerik {
    flex: 1;
    min-height: 0;

    display: flex;
    flex-direction: column;

    gap: 8px;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 12px;

    background:
        var(--renk-panel);
}


/*
    -------------------------------------------------
    PENCERE ALT BUTON ÇUBUĞU
    -------------------------------------------------
*/

.kutuphaneyeKaydetAltButonAlani,
.kutuphaneyeKaydetYeniMenuButonAlani,
.parcaEklemeButonAlani,
.rafEklemeButonAlani,
.malzemeSecimiButonAlani {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 6px;
}


.kutuphaneyeKaydetAltButonAlani,
.parcaEklemeButonAlani,
.rafEklemeButonAlani,
.malzemeSecimiButonAlani {
    margin-top: 2px;

    padding-top: 10px;

    border-top:
        1px solid
        var(--renk-kenarlik-acik);
}


.kutuphaneyeKaydetBirincilBtn,
.kutuphaneyeKaydetIkincilBtn,
.parcaEklemeBirincilBtn,
.parcaEklemeIkincilBtn,
.rafEklemeBirincilBtn,
.rafEklemeIkincilBtn,
.malzemeSecimiBirincilBtn,
.malzemeSecimiIkincilBtn {
    min-width: 84px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        14px;

    border-radius:
        var(--radius-kucuk);

    font-size:
        var(--yazi-kucuk);

    font-weight: 600;

    cursor: pointer;

    transition:
        border-color 0.1s linear,
        background 0.1s linear,
        color 0.1s linear;
}


.kutuphaneyeKaydetBirincilBtn,
.parcaEklemeBirincilBtn,
.rafEklemeBirincilBtn,
.malzemeSecimiBirincilBtn {
    border:
        1px solid
        var(--renk-ana-hover);

    background:
        linear-gradient(
            180deg,
            #2e74e0,
            var(--renk-ana)
        );

    color: #ffffff;
}


.kutuphaneyeKaydetBirincilBtn:hover:not(:disabled),
.parcaEklemeBirincilBtn:hover,
.rafEklemeBirincilBtn:hover {
    background:
        linear-gradient(
            180deg,
            var(--renk-ana),
            var(--renk-ana-hover)
        );
}


.kutuphaneyeKaydetIkincilBtn,
.parcaEklemeIkincilBtn,
.rafEklemeIkincilBtn,
.malzemeSecimiIkincilBtn {
    border:
        1px solid
        var(--renk-kenarlik);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f0f3f8
        );

    color:
        var(--renk-yazi);
}


.kutuphaneyeKaydetIkincilBtn:hover:not(:disabled),
.parcaEklemeIkincilBtn:hover,
.rafEklemeIkincilBtn:hover {
    border-color:
        var(--renk-kenarlik-koyu);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #e6ebf3
        );
}


.kutuphaneyeKaydetBirincilBtn:active:not(:disabled),
.kutuphaneyeKaydetIkincilBtn:active:not(:disabled),
.parcaEklemeBirincilBtn:active,
.parcaEklemeIkincilBtn:active,
.rafEklemeBirincilBtn:active,
.rafEklemeIkincilBtn:active {
    filter: brightness(0.95);
}


.kutuphaneyeKaydetBirincilBtn:disabled,
.kutuphaneyeKaydetIkincilBtn:disabled,
.parcaEklemeBirincilBtn:disabled,
.parcaEklemeIkincilBtn:disabled,
.rafEklemeBirincilBtn:disabled,
.rafEklemeIkincilBtn:disabled {
    cursor: not-allowed;

    opacity: 0.45;
}


/*
    -------------------------------------------------
    PENCERE MESAJLARI
    -------------------------------------------------
*/

.kutuphaneyeKaydetMesaj,
.parcaEklemeMesaj,
.rafEklemeMesaj {
    width: 100%;

    padding:
        7px
        9px;

    border-radius:
        var(--radius-kucuk);

    font-size:
        var(--yazi-kucuk);

    line-height: 1.45;
}


.kutuphaneyeKaydetMesaj[hidden],
.parcaEklemeMesaj[hidden],
.rafEklemeMesaj[hidden] {
    display: none;
}


.kutuphaneyeKaydetMesajHata,
.parcaEklemeMesajHata,
.rafEklemeMesajHata,
.hata {
    border:
        1px solid
        var(--renk-tehlike-kenar);

    background:
        var(--renk-tehlike-acik);

    color:
        var(--renk-tehlike-hover);
}


.kutuphaneyeKaydetMesajBasarili,
.basarili {
    border:
        1px solid
        var(--renk-basarili-kenar);

    background:
        var(--renk-basarili-acik);

    color:
        var(--renk-basarili);
}


/*
    =================================================
    24. KÜTÜPHANEYE KAYDET PENCERESİ
    =================================================
*/

.kutuphaneyeKaydetFormGrubu {
    width: 100%;

    display: grid;

    grid-template-columns:
        104px
        minmax(0, 1fr);

    align-items: center;

    gap: 8px;
}


.kutuphaneyeKaydetLabel {
    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-kucuk);
}


.kutuphaneyeKaydetInput,
.kutuphaneyeKaydetSelect {
    width: 100%;
    height:
        var(--alan-yukseklik);

    padding:
        0
        7px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    outline: none;

    background:
        var(--renk-alan);

    color:
        var(--renk-yazi);

    font-size:
        var(--yazi-kucuk);

    transition:
        border-color 0.1s linear,
        box-shadow 0.1s linear;
}


.kutuphaneyeKaydetInput::placeholder {
    color:
        var(--renk-yazi-soluk);
}


.kutuphaneyeKaydetInput:hover:not(:disabled),
.kutuphaneyeKaydetSelect:hover:not(:disabled) {
    border-color:
        var(--renk-kenarlik-koyu);
}


.kutuphaneyeKaydetInput:focus,
.kutuphaneyeKaydetSelect:focus {
    border-color:
        var(--renk-ana);

    box-shadow:
        inset 0 0 0 1px
        var(--renk-ana);
}


.kutuphaneyeKaydetInput:disabled,
.kutuphaneyeKaydetSelect:disabled {
    cursor: not-allowed;

    background:
        var(--renk-alan-pasif);

    color:
        var(--renk-yazi-soluk);
}


.kutuphaneyeKaydetMenuSecimAlani {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 6px;
}


.kutuphaneyeKaydetYeniMenuBtn {
    min-width: 88px;
    height:
        var(--alan-yukseklik);

    padding:
        0
        10px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f0f3f8
        );

    color:
        var(--renk-ana-hover);

    font-size:
        var(--yazi-kucuk);

    font-weight: 600;

    cursor: pointer;

    transition:
        border-color 0.1s linear,
        background 0.1s linear;
}


.kutuphaneyeKaydetYeniMenuBtn:hover:not(:disabled) {
    border-color:
        var(--renk-ana-kenar);

    background:
        var(--renk-ana-acik);
}


.kutuphaneyeKaydetYeniMenuAlani {
    width: 100%;

    grid-column:
        1 / -1;

    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 10px;

    border:
        1px solid
        var(--renk-ana-kenar);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-ana-acik);
}


.kutuphaneyeKaydetYeniMenuBaslik {
    margin: 0;

    color:
        var(--renk-ana-hover);

    font-size:
        var(--yazi-kucuk);

    font-weight: 700;
}


/*
    =================================================
    25. PARÇA EKLEME PENCERESİ
    =================================================
*/

.parcaEklemeAciklama {
    margin: 0;

    padding:
        7px
        9px;

    border:
        1px solid
        var(--renk-kenarlik-acik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan-vurgu);

    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-kucuk);

    line-height: 1.45;
}


.parcaEklemeFormGrubu {
    width: 100%;

    display: grid;

    grid-template-columns:
        104px
        minmax(0, 1fr);

    align-items: center;

    gap: 8px;
}


.parcaEklemeLabel {
    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-kucuk);
}


.parcaEklemeInput {
    width: 100%;
    height:
        var(--alan-yukseklik);

    padding:
        0
        7px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    outline: none;

    background:
        var(--renk-alan);

    color:
        var(--renk-yazi);

    font-size:
        var(--yazi-kucuk);

    font-variant-numeric:
        tabular-nums;

    transition:
        border-color 0.1s linear,
        box-shadow 0.1s linear;
}


.parcaEklemeInput::placeholder {
    color:
        var(--renk-yazi-soluk);
}


.parcaEklemeInput:hover {
    border-color:
        var(--renk-kenarlik-koyu);
}


.parcaEklemeInput:focus {
    border-color:
        var(--renk-ana);

    box-shadow:
        inset 0 0 0 1px
        var(--renk-ana);
}


/*
    =================================================
    26. RAF EKLEME PENCERESİ
    =================================================
*/

.rafEklemeAciklama {
    margin: 0;

    padding:
        7px
        9px;

    border:
        1px solid
        var(--renk-kenarlik-acik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan-vurgu);

    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-kucuk);

    line-height: 1.45;
}


.rafEklemeFormSatiri,
.rafEklemeYerlesimSatiri {
    width: 100%;

    display: grid;

    grid-template-columns:
        104px
        minmax(0, 1fr);

    align-items: center;

    gap: 8px;
}


.rafEklemeFormEtiketi {
    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-kucuk);
}


.rafEklemeFormIcerigi {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


.rafEklemeInput {
    width: 100%;
    height:
        var(--alan-yukseklik);

    padding:
        0
        7px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    outline: none;

    background:
        var(--renk-alan);

    color:
        var(--renk-yazi);

    font-size:
        var(--yazi-kucuk);

    transition:
        border-color 0.1s linear,
        box-shadow 0.1s linear;
}


.rafEklemeInput:hover {
    border-color:
        var(--renk-kenarlik-koyu);
}


.rafEklemeInput:focus {
    border-color:
        var(--renk-ana);

    box-shadow:
        inset 0 0 0 1px
        var(--renk-ana);
}


.rafEklemeSayiInput {
    text-align: right;

    font-variant-numeric:
        tabular-nums;
}


.rafEklemeSayiInput::-webkit-inner-spin-button,
.rafEklemeSayiInput::-webkit-outer-spin-button {
    opacity: 0.4;
}


.rafEklemeSayiInput:hover::-webkit-inner-spin-button,
.rafEklemeSayiInput:focus::-webkit-inner-spin-button {
    opacity: 1;
}


/*
    -------------------------------------------------
    RADYO SEÇENEKLERİ
    -------------------------------------------------
*/

.rafEklemeSecenekler {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.rafEklemeRadioSecenegi {
    min-height: 24px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        2px
        7px;

    border:
        1px solid
        transparent;

    border-radius:
        var(--radius-kucuk);

    cursor: pointer;

    transition:
        border-color 0.1s linear,
        background 0.1s linear;
}


.rafEklemeRadioSecenegi:hover {
    background:
        var(--renk-alan-vurgu);
}


.rafEklemeRadioSecenegi input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.rafEklemeRadioIsareti {
    width: 12px;
    height: 12px;

    flex-shrink: 0;

    position: relative;

    display: inline-flex;

    border:
        1px solid
        var(--renk-kenarlik-koyu);

    border-radius: 50%;

    background:
        var(--renk-alan);
}


.rafEklemeRadioIsareti::after {
    content: "";

    position: absolute;

    inset: 2px;

    border-radius: 50%;

    background: transparent;
}


.rafEklemeRadioSecenegi:has(input:checked) {
    border-color:
        var(--renk-ana-kenar);

    background:
        var(--renk-ana-acik);
}


.rafEklemeRadioSecenegi
input:checked
+ .rafEklemeRadioIsareti {
    border-color:
        var(--renk-ana);
}


.rafEklemeRadioSecenegi
input:checked
+ .rafEklemeRadioIsareti::after {
    background:
        var(--renk-ana);
}


.rafEklemeRadioMetni {
    color:
        var(--renk-yazi);

    font-size:
        var(--yazi-kucuk);
}


.rafEklemeBilgiKutusu {
    padding:
        7px
        9px;

    border:
        1px solid
        var(--renk-kenarlik-acik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan-vurgu);

    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-mini);

    line-height: 1.45;
}


.rafEkleme32mmAyarlari {
    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 9px;

    border:
        1px solid
        var(--renk-kenarlik-acik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan);
}


.rafEkleme32mmAyarlari[hidden],
.rafEklemeBilgiKutusu[hidden] {
    display: none;
}


.rafEklemeAdimKapsayici {
    display: flex;
    align-items: center;

    gap: 6px;
}


.rafEklemeAdimKapsayici
.rafEklemeInput {
    width: 70px;
}


.rafEklemeAdimCarpani {
    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-kucuk);
}


.rafEklemeAdimSonucu {
    padding:
        3px
        7px;

    border:
        1px solid
        var(--renk-kenarlik-acik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan-vurgu);

    color:
        var(--renk-yazi);

    font-size:
        var(--yazi-kucuk);

    font-weight: 600;

    font-variant-numeric:
        tabular-nums;
}


/*
    =================================================
    27. DOLAP BAKIŞ YÖNÜ PENCERESİ
    =================================================
*/

.dolapBakisYonuAciklama {
    margin: 0;

    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-kucuk);

    line-height: 1.45;
}


.dolapBakisYonuSecenekleri {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 6px;
}


.dolapBakisYonuSecenekBtn {
    min-height: 56px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    padding: 8px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan);

    color:
        var(--renk-yazi);

    cursor: pointer;

    transition:
        border-color 0.1s linear,
        background 0.1s linear;
}


.dolapBakisYonuSecenekBtn:hover {
    border-color:
        var(--renk-ana-kenar);

    background:
        var(--renk-alan-vurgu);
}


.dolapBakisYonuSecenekBtn.aktif {
    border-color:
        var(--renk-ana);

    background:
        var(--renk-ana-acik);

    color:
        var(--renk-ana-hover);
}


.dolapBakisYonuSimge {
    font-size: 18px;
    line-height: 1;
}


.dolapBakisYonuMetni {
    font-size:
        var(--yazi-kucuk);

    font-weight: 600;
}




/*
    ============================================================
    MALZEME SEÇİM PENCERESİ
    ============================================================

    DXF üretilmeden önce açılan pencere.
*/

.malzemeSecimiKatmani {
    z-index: 10000;
}


.malzemeSecimiPenceresi {
    width: 520px;
    max-width: calc(100vw - 40px);
}


.malzemeSecimiKapatBtn:hover {
    border-color: var(--renk-tehlike);

    background: var(--renk-tehlike);

    color: #ffffff;
}


.malzemeSecimiBirincilBtn:hover {
    background:
        linear-gradient(
            180deg,
            var(--renk-ana),
            var(--renk-ana-hover)
        );
}


.malzemeSecimiIkincilBtn:hover {
    border-color: var(--renk-kenarlik-koyu);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #e6ebf3
        );
}


.malzemeSecimiSatir {
    display: flex;
    flex-direction: column;
    gap: 4px;

    margin-bottom: 14px;
}


.malzemeSecimiEtiket {
    display: flex;
    flex-direction: column;
    gap: 4px;

    font-size: 12px;
    color: var(--renk-yazi);
}


.malzemeSecimiGirdi {
    height: 28px;

    padding: 0 8px;

    border: 1px solid var(--renk-kenarlik);
    border-radius: 3px;

    background: var(--renk-girdi-zemin, #fff);
    color: var(--renk-yazi);

    font-size: 12px;
}


.malzemeSecimiGirdi:focus {
    outline: none;
    border-color: var(--renk-ana);
}


.malzemeSecimiAciklama {
    font-size: 11px;
    color: var(--renk-yazi-soluk, #888);
}


.malzemeSecimiAltBaslik {
    margin: 4px 0 10px;

    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;

    color: var(--renk-yazi-soluk, #888);
}


/*
    Grup satırı: etiket | seçim | modeldeki kalınlık
*/
.malzemeSecimiGrupSatiri {
    display: grid;
    grid-template-columns: 1fr 190px 86px;
    align-items: center;
    gap: 8px;

    padding: 5px 6px;

    border-radius: 3px;
}


.malzemeSecimiGrupSatiri:nth-child(even) {
    background: var(--renk-satir-vurgu, rgba(0, 0, 0, 0.03));
}


.malzemeSecimiGrupEtiketi {
    font-size: 12px;
    color: var(--renk-yazi);
}


.malzemeSecimiSecme {
    height: 26px;

    padding: 0 6px;

    border: 1px solid var(--renk-kenarlik);
    border-radius: 3px;

    background: var(--renk-girdi-zemin, #fff);
    color: var(--renk-yazi);

    font-size: 12px;
}


.malzemeSecimiModelBilgisi {
    font-size: 11px;
    text-align: right;

    color: var(--renk-yazi-soluk, #888);
}


/*
    Seçilen malzemenin kalınlığı modeldekinden
    farklıysa satır uyarı rengine döner.
*/
.malzemeSecimiGrupSatiriUyumsuz {
    background: rgba(200, 60, 40, 0.10);
}


.malzemeSecimiGrupSatiriUyumsuz .malzemeSecimiModelBilgisi {
    font-weight: 600;
    color: #c83c28;
}


/*
    Kaç dosya çıkacağını gösteren canlı özet.
    Satır satır okunacağı için pre-line.
*/
.malzemeSecimiDosyaOzeti {
    margin: 10px 0 0;
    padding: 8px 10px;

    border-left: 3px solid var(--renk-ana);
    border-radius: 2px;

    background: var(--renk-ana-acik);

    white-space: pre-line;

    font-size: 11px;
    line-height: 1.6;

    color: var(--renk-yazi-ikincil);
}


.malzemeSecimiUyari {
    margin: 10px 0 0;
    padding: 8px 10px;

    border-left: 3px solid #c83c28;
    border-radius: 2px;

    background: rgba(200, 60, 40, 0.08);

    font-size: 11px;
    line-height: 1.5;

    color: #a83220;
}


/*
    Konum alanının altındaki aralık bilgisi.
    Form ızgarası iki sütunlu olduğu için
    açıklamayı satırın tamamına yayıyoruz.
*/
.parcaEklemeKonumAciklamasi {
    grid-column: 1 / -1;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);

    line-height: 1.45;
}


/*
    =================================================
    24. MALZEME YÖNETİMİ

    Üst şeritteki "Malzeme" düğmesiyle açılır.
    Solda kayıtlı levhalar, sağda seçilenin formu.

    Diğer pencerelerden geniş; iki sütun ve uzun
    bir form taşıyor.
    =================================================
*/

.malzemeYonetimiKatmani {
    position: fixed;

    inset: 0;

    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        rgba(27, 35, 48, 0.34);

    animation:
        katmanGiris
        0.12s
        linear;
}


.malzemeYonetimiPenceresi {
    width:
        min(100%, 780px);

    height:
        min(100%, 620px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        var(--renk-kenarlik-koyu);

    border-radius:
        var(--radius-buyuk);

    background:
        var(--renk-panel);

    box-shadow:
        var(--golge-pencere);

    animation:
        pencereGiris
        0.12s
        linear;
}


/*
    -------------------------------------------------
    BAŞLIK
    -------------------------------------------------
*/

.malzemeYonetimiBaslikAlani {
    flex-shrink: 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    padding:
        10px
        12px;

    border-bottom:
        1px solid
        var(--renk-kenarlik);

    background:
        var(--renk-serit);
}


.malzemeYonetimiBaslik {
    margin: 0;

    color:
        var(--renk-yazi);

    font-size: 13px;
    font-weight: 600;
}


.malzemeYonetimiAciklama {
    margin:
        3px 0 0;

    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-kucuk);

    line-height: 1.45;
}


.malzemeYonetimiKapatBtn {
    width: 24px;
    height: 24px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius:
        var(--radius-kucuk);

    background: transparent;

    color:
        var(--renk-yazi-ikincil);

    font-size: 17px;
    line-height: 1;

    cursor: pointer;
}


.malzemeYonetimiKapatBtn:hover {
    background:
        var(--renk-tehlike);

    color: #ffffff;
}


/*
    -------------------------------------------------
    GÖVDE
    -------------------------------------------------
*/

/*
    -------------------------------------------------
    SEKME ŞERİDİ

    Üstte Plakalar / Aksesuarlar, aksesuarların
    içinde Raylar / Menteşeler / Kulplar.
    -------------------------------------------------
*/

.sekmeSeridi {
    flex-shrink: 0;

    display: flex;

    gap: 2px;

    padding:
        0
        8px;

    border-bottom:
        1px solid
        var(--renk-kenarlik);

    background:
        var(--renk-bolum-baslik);
}


.sekmeBtn {
    height: 27px;

    padding:
        0
        12px;

    border: 0;
    border-bottom:
        2px solid
        transparent;

    background: transparent;

    color:
        var(--renk-yazi-ikincil);

    font-family: inherit;
    font-size:
        var(--yazi-kucuk);

    cursor: pointer;
}


.sekmeBtn:hover {
    color:
        var(--renk-yazi);
}


.sekmeBtn.aktif {
    border-bottom-color:
        var(--renk-ana);

    color:
        var(--renk-ana);

    font-weight: 600;
}


/*
    Kategori şeridi ana şeridin altında;
    daha ince ve açık zeminli.
*/
.aksesuarKategoriSekmeleri {
    background:
        var(--renk-alan-vurgu);
}


.aksesuarKategoriSekmeleri
.sekmeBtn {
    height: 24px;

    font-size:
        var(--yazi-mini);
}


.malzemeYonetimiGovde {
    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;
}


/*
    Sekme panelleri gövdeyi tamamen doldurur.
*/
.aksesuarPaneli {
    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;
}


.malzemeYonetimiPanel {
    flex: 1;

    min-height: 0;

    display: grid;
    grid-template-columns:
        260px
        1fr;
}


/*
    -------------------------------------------------
    DELİK DÜZENLEYİCİ
    -------------------------------------------------
*/

.delikDuzenleyici {
    margin-top: 14px;
}


.delikDuzenleyiciAciklamasi {
    margin-bottom: 7px;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);

    line-height: 1.45;
}


.delikDuzenleyiciUstBilgiler {
    display: grid;
    grid-template-columns:
        1fr
        1fr;

    gap: 8px;

    margin-bottom: 8px;
}


.delikDuzenleyiciUstAlan {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.delikDuzenleyiciUstAlan
> span {
    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-mini);
}


.delikSatiri {
    display: grid;
    grid-template-columns:
        1.3fr
        1.2fr
        0.9fr
        0.9fr
        22px;

    align-items: center;

    gap: 4px;

    margin-bottom: 4px;
}


.delikSatiriBaslik {
    margin-bottom: 3px;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);
}


.delikSatiriBaslik
> span {
    padding-left: 2px;
}


.delikSilBtn {
    width: 22px;
    height:
        var(--alan-yukseklik);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius:
        var(--radius-kucuk);

    background: transparent;

    color:
        var(--renk-yazi-soluk);

    font-size: 15px;
    line-height: 1;

    cursor: pointer;
}


.delikSilBtn:hover {
    background:
        var(--renk-tehlike);

    color: #ffffff;
}


.delikDuzenleyiciBos {
    padding:
        6px
        2px;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);
}


.delikEkleBtn {
    height:
        var(--buton-yukseklik);

    margin-top: 4px;
    padding:
        0
        10px;

    border:
        1px dashed
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    background: transparent;

    color:
        var(--renk-yazi-ikincil);

    font-family: inherit;
    font-size:
        var(--yazi-kucuk);

    cursor: pointer;
}


.delikEkleBtn:hover {
    border-color:
        var(--renk-ana);

    border-style: solid;

    color:
        var(--renk-ana);
}


.aksesuarFormBolumAciklamasi {
    margin-bottom: 7px;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);

    line-height: 1.45;
}


.malzemeYonetimiListeSutunu {
    min-height: 0;

    display: flex;
    flex-direction: column;

    border-right:
        1px solid
        var(--renk-kenarlik);

    background:
        var(--renk-alan-vurgu);
}


.malzemeYonetimiListeAraclari {
    flex-shrink: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 8px;

    border-bottom:
        1px solid
        var(--renk-kenarlik-acik);
}


.malzemeYonetimiYeniBtn,
.malzemeYonetimiSifirlaBtn {
    height:
        var(--buton-yukseklik);

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan);

    color:
        var(--renk-yazi);

    font-size:
        var(--yazi-kucuk);

    cursor: pointer;
}


.malzemeYonetimiYeniBtn {
    border-color:
        var(--renk-ana-kenar);

    background:
        var(--renk-ana);

    color: #ffffff;

    font-weight: 600;
}


.malzemeYonetimiYeniBtn:hover {
    background:
        var(--renk-ana-hover);
}


.malzemeYonetimiSifirlaBtn {
    color:
        var(--renk-yazi-ikincil);
}


.malzemeYonetimiSifirlaBtn:hover {
    border-color:
        var(--renk-tehlike-kenar);

    background:
        var(--renk-tehlike-acik);

    color:
        var(--renk-tehlike);
}


.malzemeYonetimiListe {
    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding:
        4px
        0;
}


.malzemeYonetimiListeBos {
    padding: 14px 12px;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-kucuk);
}


.malzemeYonetimiListeSatiri {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        5px
        10px;

    border: 0;
    border-left:
        2px solid
        transparent;

    background: transparent;

    cursor: pointer;

    text-align: left;
}


.malzemeYonetimiListeSatiri:hover {
    background:
        var(--renk-ana-acik);
}


.malzemeYonetimiListeSatiri.secili {
    border-left-color:
        var(--renk-ana);

    background:
        var(--renk-ana-acik);
}


.malzemeYonetimiListeSatiri.pasif
.malzemeYonetimiSatirAdi {
    color:
        var(--renk-yazi-soluk);

    text-decoration:
        line-through;
}


.malzemeYonetimiRenkKutusu {
    width: 16px;
    height: 16px;

    flex-shrink: 0;

    border:
        1px solid
        var(--renk-kenarlik-koyu);

    border-radius:
        var(--radius-kucuk);
}


.malzemeYonetimiSatirMetinleri {
    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;
}


.malzemeYonetimiSatirAdi {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color:
        var(--renk-yazi);

    font-size:
        var(--yazi-kucuk);

    font-weight: 500;
}


.malzemeYonetimiSatirDetayi {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);

    font-variant-numeric:
        tabular-nums;
}


.malzemeYonetimiFiyatUyarisi {
    flex-shrink: 0;

    padding:
        1px
        4px;

    border:
        1px solid
        var(--renk-uyari-kenar);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-uyari-acik);

    color:
        var(--renk-uyari);

    font-size:
        var(--yazi-mini);
}


/*
    -------------------------------------------------
    FORM SÜTUNU
    -------------------------------------------------
*/

.malzemeYonetimiFormSutunu {
    min-height: 0;

    overflow-y: auto;

    padding: 12px 14px;
}


.malzemeYonetimiBosBilgi {
    padding: 24px 8px;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-kucuk);

    line-height: 1.5;

    text-align: center;
}


.malzemeFormBolumBasligi {
    margin:
        14px 0 6px;

    padding-bottom: 3px;

    border-bottom:
        1px solid
        var(--renk-kenarlik-acik);

    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-mini);

    font-weight: 700;

    letter-spacing: 0.4px;

    text-transform: uppercase;
}


.malzemeFormBolumBasligi:first-child {
    margin-top: 0;
}


.malzemeFormSatiri {
    display: grid;
    grid-template-columns:
        140px
        1fr;

    align-items: center;

    gap:
        0
        10px;

    margin-bottom: 6px;
}


.malzemeFormEtiketi {
    color:
        var(--renk-yazi);

    font-size:
        var(--yazi-kucuk);
}


.malzemeFormGirisKutusu {
    display: flex;
    align-items: center;

    gap: 6px;
}


.malzemeFormGiris {
    flex: 1;

    min-width: 0;

    height:
        var(--alan-yukseklik);

    padding:
        0
        6px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan);

    color:
        var(--renk-yazi);

    font-family: inherit;
    font-size:
        var(--yazi-kucuk);
}


.malzemeFormGiris:focus {
    border-color:
        var(--renk-ana);

    outline: none;
}


.malzemeFormBirim {
    flex-shrink: 0;

    min-width: 32px;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);
}


.malzemeFormRenk {
    width: 46px;
    height:
        var(--alan-yukseklik);

    padding: 1px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan);

    cursor: pointer;
}


.malzemeFormIsaret {
    width: 14px;
    height: 14px;

    margin: 0;

    cursor: pointer;
}


.malzemeFormAciklamasi {
    grid-column: 2;

    margin-top: 2px;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);

    line-height: 1.4;
}


.malzemeFormOzeti {
    margin:
        6px 0 0 150px;

    padding:
        4px
        7px;

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan-pasif);

    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-mini);

    font-variant-numeric:
        tabular-nums;
}


.malzemeFormOzeti[data-durum="hata"] {
    background:
        var(--renk-tehlike-acik);

    color:
        var(--renk-tehlike);
}


.malzemeFormUyarisi {
    margin-top: 12px;

    padding:
        6px
        8px;

    border:
        1px solid
        var(--renk-uyari-kenar);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-uyari-acik);

    color:
        var(--renk-uyari);

    font-size:
        var(--yazi-kucuk);

    line-height: 1.5;
}


.malzemeFormUyarisi[data-tur="hata"] {
    border-color:
        var(--renk-tehlike-kenar);

    background:
        var(--renk-tehlike-acik);

    color:
        var(--renk-tehlike);
}


.malzemeFormUyarisi[data-tur="bilgi"] {
    border-color:
        var(--renk-basarili-kenar);

    background:
        var(--renk-basarili-acik);

    color:
        var(--renk-basarili);
}


.malzemeFormDugmeleri {
    display: flex;
    justify-content: flex-end;

    gap: 6px;

    margin-top: 14px;
    padding-top: 10px;

    border-top:
        1px solid
        var(--renk-kenarlik-acik);
}


.malzemeFormKaydetBtn,
.malzemeFormSilBtn {
    height:
        var(--buton-yukseklik);

    padding:
        0
        14px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan);

    color:
        var(--renk-yazi);

    font-size:
        var(--yazi-kucuk);

    cursor: pointer;
}


.malzemeFormKaydetBtn {
    border-color:
        var(--renk-ana-kenar);

    background:
        var(--renk-ana);

    color: #ffffff;

    font-weight: 600;
}


.malzemeFormKaydetBtn:hover {
    background:
        var(--renk-ana-hover);
}


.malzemeFormSilBtn {
    margin-right: auto;

    color:
        var(--renk-tehlike);
}


.malzemeFormSilBtn:hover {
    border-color:
        var(--renk-tehlike-kenar);

    background:
        var(--renk-tehlike-acik);
}


/*
    =================================================
    26. PROJE AYARLARI

    Projenin kurulumu: hangi parça hangi levhadan,
    hangi menteşe, hangi ray.

    Yeni proje açılınca ilk dolap eklenmeden önce
    kendiliğinden açılır.
    =================================================
*/

.projeAyarlariKatmani {
    position: fixed;

    inset: 0;

    z-index: 10500;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        rgba(27, 35, 48, 0.42);

    animation:
        katmanGiris
        0.12s
        linear;
}


.projeAyarlariPenceresi {
    width:
        min(100%, 620px);

    max-height:
        calc(100vh - 48px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        var(--renk-kenarlik-koyu);

    border-radius:
        var(--radius-buyuk);

    background:
        var(--renk-panel);

    box-shadow:
        var(--golge-pencere);

    animation:
        pencereGiris
        0.12s
        linear;
}


.projeAyarlariBaslikAlani {
    flex-shrink: 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    padding:
        11px
        13px;

    border-bottom:
        1px solid
        var(--renk-kenarlik);

    background:
        var(--renk-serit);
}


.projeAyarlariBaslik {
    margin: 0;

    color:
        var(--renk-yazi);

    font-size: 13px;
    font-weight: 600;
}


.projeAyarlariAciklama {
    margin:
        4px 0 0;

    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-kucuk);

    line-height: 1.5;
}


.projeAyarlariKapatBtn {
    width: 24px;
    height: 24px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius:
        var(--radius-kucuk);

    background: transparent;

    color:
        var(--renk-yazi-ikincil);

    font-size: 17px;
    line-height: 1;

    cursor: pointer;
}


.projeAyarlariKapatBtn:hover {
    background:
        var(--renk-tehlike);

    color: #ffffff;
}


.projeAyarlariGovde {
    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding: 12px;
}


.projeAyarlariKutusu {
    margin-bottom: 10px;

    border:
        1px solid
        var(--renk-kenarlik-acik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan);
}


.projeAyarlariKutuBasligi {
    padding:
        5px
        9px;

    border-bottom:
        1px solid
        var(--renk-kenarlik-acik);

    background:
        var(--renk-alan-vurgu);

    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-mini);

    font-weight: 700;

    letter-spacing: 0.4px;

    text-transform: uppercase;
}


.projeAyarlariKutuAciklamasi {
    padding:
        6px
        9px
        0;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);

    line-height: 1.45;
}


.projeAyarlariKutuIcerigi {
    padding:
        8px
        9px;
}


.projeAyarlariSatiri {
    display: grid;
    grid-template-columns:
        1fr
        auto;

    align-items: center;

    gap: 10px;

    margin-bottom: 5px;
}


.projeAyarlariEtiketi {
    color:
        var(--renk-yazi);

    font-size:
        var(--yazi-kucuk);
}


.projeAyarlariGirisSarmali {
    display: flex;
    align-items: center;

    gap: 6px;
}


.projeAyarlariGirisi {
    width: 210px;

    height:
        var(--alan-yukseklik);

    padding:
        0
        6px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan);

    color:
        var(--renk-yazi);

    font-family: inherit;
    font-size:
        var(--yazi-kucuk);
}


.projeAyarlariGirisi[type="number"] {
    width: 92px;

    text-align: right;
}


.projeAyarlariGirisi:focus {
    border-color:
        var(--renk-ana);

    outline: none;
}


/*
    Seçilen malzemenin kalınlığı. Kalınlık
    geometriyi belirlediği için hep görünsün.
*/
.projeAyarlariKalinlik {
    min-width: 44px;

    padding:
        1px
        5px;

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-ana-acik);

    color:
        var(--renk-ana);

    font-size:
        var(--yazi-mini);

    font-variant-numeric:
        tabular-nums;

    text-align: center;
}


.projeAyarlariBirim {
    min-width: 24px;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);
}


.projeAyarlariSatirAciklamasi {
    display: block;

    margin:
        -2px 0 7px;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);

    line-height: 1.4;
}


.projeAyarlariUyarisi {
    flex-shrink: 0;

    margin:
        0 12px;
    padding:
        7px
        9px;

    border:
        1px solid
        var(--renk-tehlike-kenar);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-tehlike-acik);

    color:
        var(--renk-tehlike);

    font-size:
        var(--yazi-kucuk);

    line-height: 1.5;
}


.projeAyarlariAltCubuk {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 6px;

    padding:
        9px
        13px;

    border-top:
        1px solid
        var(--renk-kenarlik);

    background:
        var(--renk-serit);
}


.projeAyarlariIptalBtn,
.projeAyarlariKaydetBtn {
    height:
        var(--buton-yukseklik);

    padding:
        0
        14px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan);

    color:
        var(--renk-yazi);

    font-family: inherit;
    font-size:
        var(--yazi-kucuk);

    cursor: pointer;
}


.projeAyarlariIptalBtn {
    margin-right: auto;

    color:
        var(--renk-yazi-ikincil);
}


.projeAyarlariKaydetBtn {
    border-color:
        var(--renk-ana-kenar);

    background:
        var(--renk-ana);

    color: #ffffff;

    font-weight: 600;
}


.projeAyarlariKaydetBtn:hover {
    background:
        var(--renk-ana-hover);
}


/*
    =================================================
    27. ARTIK STOĞU

    Kesimden artan parçaların listesi. Nesting tam
    levha açmadan önce buradakileri dener.
    =================================================
*/

.artikStoguKatmani {
    position: fixed;

    inset: 0;

    z-index: 10400;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        rgba(27, 35, 48, 0.38);

    animation:
        katmanGiris
        0.12s
        linear;
}


.artikStoguPenceresi {
    width:
        min(100%, 860px);

    height:
        min(100%, 620px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        var(--renk-kenarlik-koyu);

    border-radius:
        var(--radius-buyuk);

    background:
        var(--renk-panel);

    box-shadow:
        var(--golge-pencere);

    animation:
        pencereGiris
        0.12s
        linear;
}


.artikStoguBaslikAlani {
    flex-shrink: 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    padding:
        10px
        12px;

    border-bottom:
        1px solid
        var(--renk-kenarlik);

    background:
        var(--renk-serit);
}


.artikStoguBaslik {
    margin: 0;

    color:
        var(--renk-yazi);

    font-size: 13px;
    font-weight: 600;
}


.artikStoguOzeti {
    margin:
        3px 0 0;

    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-kucuk);

    line-height: 1.45;
}


.artikStoguKapatBtn {
    width: 24px;
    height: 24px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius:
        var(--radius-kucuk);

    background: transparent;

    color:
        var(--renk-yazi-ikincil);

    font-size: 17px;
    line-height: 1;

    cursor: pointer;
}


.artikStoguKapatBtn:hover {
    background:
        var(--renk-tehlike);

    color: #ffffff;
}


/*
    -------------------------------------------------
    ELLE EKLEME

    Program kullanılmaya başlandığında atölyede
    zaten yığınla artık vardır; onlar girilmezse
    stok birkaç iş sonra işe yaramaya başlar.
    -------------------------------------------------
*/

.artikStoguEkleme {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 6px;

    padding:
        8px
        12px;

    border-bottom:
        1px solid
        var(--renk-kenarlik-acik);

    background:
        var(--renk-alan-vurgu);
}


.artikStoguGirisi {
    height:
        var(--alan-yukseklik);

    padding:
        0
        6px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan);

    color:
        var(--renk-yazi);

    font-family: inherit;
    font-size:
        var(--yazi-kucuk);
}


.artikStoguGirisi.malzeme {
    flex: 1;

    min-width: 0;
}


.artikStoguGirisi.olcu {
    width: 80px;

    text-align: right;
}


.artikStoguGirisi.konum {
    width: 150px;
}


.artikStoguEkleBtn {
    height:
        var(--buton-yukseklik);

    padding:
        0
        12px;

    border:
        1px solid
        var(--renk-ana-kenar);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-ana);

    color: #ffffff;

    font-family: inherit;
    font-size:
        var(--yazi-kucuk);
    font-weight: 600;

    cursor: pointer;
}


.artikStoguEkleBtn:hover {
    background:
        var(--renk-ana-hover);
}


.artikStoguUyarisi {
    flex-shrink: 0;

    padding:
        6px
        12px;

    border-bottom:
        1px solid
        var(--renk-basarili-kenar);

    background:
        var(--renk-basarili-acik);

    color:
        var(--renk-basarili);

    font-size:
        var(--yazi-kucuk);
}


.artikStoguUyarisi[data-tur="hata"] {
    border-bottom-color:
        var(--renk-tehlike-kenar);

    background:
        var(--renk-tehlike-acik);

    color:
        var(--renk-tehlike);
}


/*
    -------------------------------------------------
    LİSTE
    -------------------------------------------------
*/

.artikStoguListesi {
    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding:
        4px
        12px;
}


.artikStoguBos {
    padding: 28px 8px;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-kucuk);

    line-height: 1.6;

    text-align: center;
}


.artikStoguSatiri {
    display: grid;
    grid-template-columns:
        1.4fr
        0.9fr
        0.6fr
        1fr
        1.2fr
        auto;

    align-items: center;

    gap: 8px;

    padding:
        4px
        2px;

    border-bottom:
        1px solid
        var(--renk-kenarlik-acik);

    color:
        var(--renk-yazi);

    font-size:
        var(--yazi-kucuk);
}


.artikStoguSatiri.baslik {
    position: sticky;
    top: 0;

    border-bottom-color:
        var(--renk-kenarlik);

    background:
        var(--renk-panel);

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);
}


.artikStoguSatiri.ayrildi {
    opacity: 0.6;
}


.artikStoguolcu {
    font-variant-numeric:
        tabular-nums;
}


.artikStogukaynak {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);
}


.artikStoguKonumAlani {
    width: 100%;

    height: 22px;

    padding:
        0
        5px;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-kucuk);

    background: transparent;

    color:
        var(--renk-yazi);

    font-family: inherit;
    font-size:
        var(--yazi-mini);
}


.artikStoguKonumAlani:hover,
.artikStoguKonumAlani:focus {
    border-color:
        var(--renk-kenarlik);

    background:
        var(--renk-alan);

    outline: none;
}


.artikStoguIslemler {
    display: flex;
    align-items: center;

    gap: 4px;
}


.artikStoguTukendiBtn {
    height: 22px;

    padding:
        0
        8px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan);

    color:
        var(--renk-yazi-ikincil);

    font-family: inherit;
    font-size:
        var(--yazi-mini);

    cursor: pointer;
}


.artikStoguTukendiBtn:hover {
    border-color:
        var(--renk-basarili-kenar);

    background:
        var(--renk-basarili-acik);

    color:
        var(--renk-basarili);
}


.artikStoguSilBtn {
    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius:
        var(--radius-kucuk);

    background: transparent;

    color:
        var(--renk-yazi-soluk);

    font-size: 15px;
    line-height: 1;

    cursor: pointer;
}


.artikStoguSilBtn:hover {
    background:
        var(--renk-tehlike);

    color: #ffffff;
}


.artikStoguAltCubuk {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    padding:
        8px
        12px;

    border-top:
        1px solid
        var(--renk-kenarlik);

    background:
        var(--renk-serit);
}


.artikStoguTemizleBtn {
    height:
        var(--buton-yukseklik);

    padding:
        0
        12px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan);

    color:
        var(--renk-yazi-ikincil);

    font-family: inherit;
    font-size:
        var(--yazi-kucuk);

    cursor: pointer;
}


.artikStoguTemizleBtn:hover {
    border-color:
        var(--renk-tehlike-kenar);

    background:
        var(--renk-tehlike-acik);

    color:
        var(--renk-tehlike);
}


/*
    =================================================
    28. CNC AYARLARI

    Takım tablası ve tezgâh değerleri. Buradaki
    sayılar doğrudan NC dosyasına yazılır.
    =================================================
*/

.cncAyarlariKatmani {
    position: fixed;

    inset: 0;

    z-index: 10600;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        rgba(27, 35, 48, 0.4);

    animation:
        katmanGiris
        0.12s
        linear;
}


.cncAyarlariPenceresi {
    width:
        min(100%, 900px);

    height:
        min(100%, 640px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        var(--renk-kenarlik-koyu);

    border-radius:
        var(--radius-buyuk);

    background:
        var(--renk-panel);

    box-shadow:
        var(--golge-pencere);

    animation:
        pencereGiris
        0.12s
        linear;
}


.cncAyarlariBaslikAlani {
    flex-shrink: 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    padding:
        10px
        12px;

    border-bottom:
        1px solid
        var(--renk-kenarlik);

    background:
        var(--renk-serit);
}


.cncAyarlariBaslik {
    margin: 0;

    color:
        var(--renk-yazi);

    font-size: 13px;
    font-weight: 600;
}


.cncAyarlariAciklama {
    margin:
        3px 0 0;

    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-kucuk);
}


.cncAyarlariKapatBtn {
    width: 24px;
    height: 24px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius:
        var(--radius-kucuk);

    background: transparent;

    color:
        var(--renk-yazi-ikincil);

    font-size: 17px;
    line-height: 1;

    cursor: pointer;
}


.cncAyarlariKapatBtn:hover {
    background:
        var(--renk-tehlike);

    color: #ffffff;
}


.cncAyarlariSekmeSeridi {
    flex-shrink: 0;

    display: flex;

    gap: 2px;

    padding:
        0
        8px;

    border-bottom:
        1px solid
        var(--renk-kenarlik);

    background:
        var(--renk-bolum-baslik);
}


.cncAyarlariSekmeBtn {
    height: 27px;

    padding:
        0
        14px;

    border: 0;
    border-bottom:
        2px solid
        transparent;

    background: transparent;

    color:
        var(--renk-yazi-ikincil);

    font-family: inherit;
    font-size:
        var(--yazi-kucuk);

    cursor: pointer;
}


.cncAyarlariSekmeBtn.aktif {
    border-bottom-color:
        var(--renk-ana);

    color:
        var(--renk-ana);

    font-weight: 600;
}


.cncAyarlariGorunum {
    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow-y: auto;

    padding: 12px;
}


.cncAyarlariGorunum[hidden] {
    display: none;
}


/*
    -------------------------------------------------
    TAKIM TABLASI
    -------------------------------------------------
*/

.cncTakimAraclari {
    flex-shrink: 0;

    display: flex;

    gap: 6px;

    margin-bottom: 8px;
}


.cncYeniTakimBtn,
.cncTakimSifirlaBtn,
.cncTezgahSifirlaBtn,
.cncTezgahKaydetBtn {
    height:
        var(--buton-yukseklik);

    padding:
        0
        12px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan);

    color:
        var(--renk-yazi);

    font-family: inherit;
    font-size:
        var(--yazi-kucuk);

    cursor: pointer;
}


.cncYeniTakimBtn,
.cncTezgahKaydetBtn {
    border-color:
        var(--renk-ana-kenar);

    background:
        var(--renk-ana);

    color: #ffffff;

    font-weight: 600;
}


.cncYeniTakimBtn:hover,
.cncTezgahKaydetBtn:hover {
    background:
        var(--renk-ana-hover);
}


.cncTakimSifirlaBtn,
.cncTezgahSifirlaBtn {
    color:
        var(--renk-yazi-ikincil);
}


.cncTakimSifirlaBtn:hover,
.cncTezgahSifirlaBtn:hover {
    border-color:
        var(--renk-tehlike-kenar);

    background:
        var(--renk-tehlike-acik);

    color:
        var(--renk-tehlike);
}


.cncTakimUyarisi,
.cncTezgahBilgisi {
    flex-shrink: 0;

    margin-bottom: 8px;
    padding:
        6px
        9px;

    border:
        1px solid
        var(--renk-basarili-kenar);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-basarili-acik);

    color:
        var(--renk-basarili);

    font-size:
        var(--yazi-kucuk);
}


.cncTakimUyarisi[data-tur="hata"],
.cncTezgahBilgisi[data-tur="hata"] {
    border-color:
        var(--renk-tehlike-kenar);

    background:
        var(--renk-tehlike-acik);

    color:
        var(--renk-tehlike);
}


.cncTakimListesi {
    flex: 1;

    min-height: 0;
}


.cncTakimSatiri {
    display: grid;
    grid-template-columns:
        52px
        1.5fr
        1fr
        58px
        70px
        76px
        70px
        58px
        24px;

    align-items: center;

    gap: 5px;

    margin-bottom: 4px;
}


.cncTakimSatiri.baslik {
    margin-bottom: 6px;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);
}


.cncTakimGirisi {
    width: 100%;

    height:
        var(--alan-yukseklik);

    padding:
        0
        6px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan);

    color:
        var(--renk-yazi);

    font-family: inherit;
    font-size:
        var(--yazi-kucuk);
}


.cncTakimGirisi.sayi {
    text-align: right;

    font-variant-numeric:
        tabular-nums;
}


.cncTakimGirisi:focus {
    border-color:
        var(--renk-ana);

    outline: none;
}


.cncTakimSilBtn {
    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius:
        var(--radius-kucuk);

    background: transparent;

    color:
        var(--renk-yazi-soluk);

    font-size: 15px;
    line-height: 1;

    cursor: pointer;
}


.cncTakimSilBtn:hover {
    background:
        var(--renk-tehlike);

    color: #ffffff;
}


/*
    -------------------------------------------------
    TEZGÂH AYARLARI
    -------------------------------------------------
*/

.cncTezgahIzgarasi {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px, 1fr)
        );

    gap: 10px;

    align-items: start;
}


.cncAyarKutusu {
    border:
        1px solid
        var(--renk-kenarlik-acik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan);
}


.cncAyarKutuBasligi {
    padding:
        5px
        9px;

    border-bottom:
        1px solid
        var(--renk-kenarlik-acik);

    background:
        var(--renk-alan-vurgu);

    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-mini);

    font-weight: 700;

    letter-spacing: 0.4px;

    text-transform: uppercase;
}


.cncAyarKutuAciklamasi {
    padding:
        6px
        9px
        0;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);

    line-height: 1.45;
}


.cncAyarKutuIcerigi {
    padding:
        8px
        9px;
}


.cncAyarSatiri {
    display: grid;
    grid-template-columns:
        1fr
        auto;

    align-items: center;

    gap: 8px;

    margin-bottom: 5px;
}


.cncAyarEtiketi {
    color:
        var(--renk-yazi);

    font-size:
        var(--yazi-kucuk);
}


.cncAyarGirisSarmali {
    display: flex;
    align-items: center;

    gap: 5px;
}


.cncAyarGirisi {
    width: 92px;

    height:
        var(--alan-yukseklik);

    padding:
        0
        6px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    background:
        var(--renk-alan);

    color:
        var(--renk-yazi);

    font-family: inherit;
    font-size:
        var(--yazi-kucuk);

    text-align: right;
}


select.cncAyarGirisi {
    text-align: left;
}


.cncAyarGirisi:focus {
    border-color:
        var(--renk-ana);

    outline: none;
}


.cncAyarBirimi {
    min-width: 26px;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);
}


.cncAyarIsareti {
    width: 14px;
    height: 14px;

    margin: 0;

    cursor: pointer;
}


.cncAyarAciklamasi {
    display: block;

    margin:
        -2px 0 7px;

    color:
        var(--renk-yazi-soluk);

    font-size:
        var(--yazi-mini);

    line-height: 1.4;
}


.cncTezgahDugmeleri {
    flex-shrink: 0;

    display: flex;
    justify-content: flex-end;

    gap: 6px;

    margin-top: 12px;
}


.cncTezgahSifirlaBtn {
    margin-right: auto;
}