/*
    =================================================
    13. SAĞ PANEL (ÖZELLİK DENETÇİSİ)
    =================================================
*/

#sagPanel,
.sagPanel {
    width:
        var(--sag-panel-genislik);

    flex-shrink: 0;

    position: relative;
    z-index: 10;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        var(--renk-panel);

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

    transition:
        width 0.12s linear;
}


#sagPanel.sagPanelAcik,
.sagPanel.sagPanelAcik {
    width:
        var(--sag-panel-genislik);

    visibility: visible;
    opacity: 1;

    pointer-events: auto;
}


/*
    Panel kapanınca yer kaplamaz.

    Böylece görünüm alanı genişler;
    web sitesi gibi üstüne binmez.
*/
#sagPanel.sagPanelKapali,
.sagPanel.sagPanelKapali {
    width: 0;

    border-left-width: 0;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;
}


.sagPanelBaslikAlani {
    height:
        var(--bolum-baslik-yukseklik);

    flex:
        0
        0
        auto;

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

    gap: 6px;

    padding:
        0
        4px
        0
        9px;

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

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


.sagPanelBaslik {
    min-width: 0;

    margin: 0;

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

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

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

    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


#sagPanelIcerik,
.sagPanelIcerik {
    width: 100%;

    flex:
        1
        1
        auto;

    min-height: 0;

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

    padding:
        0
        0
        20px;

    background:
        var(--renk-panel);

    overscroll-behavior:
        contain;
}


/*
    =================================================
    14. SAĞ PANEL ÜST BUTONLARI
    =================================================
*/

.sagPanelSabitleBtn,
.sagPanelKapatBtn {
    width: 19px;
    height: 19px;

    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);

    line-height: 1;

    cursor: pointer;

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


.sagPanelSabitleBtn {
    margin-left: auto;

    font-size: 11px;
}


.sagPanelKapatBtn {
    font-size: 14px;
}


.sagPanelSabitleBtn:hover:not(:disabled) {
    border-color:
        var(--renk-kenarlik);

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


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

    background:
        var(--renk-ana);

    color: #ffffff;
}


.sagPanelKapatBtn:hover:not(:disabled) {
    border-color:
        var(--renk-tehlike-kenar);

    background:
        var(--renk-tehlike);

    color: #ffffff;
}


.sagPanelSabitleBtn:disabled,
.sagPanelKapatBtn:disabled {
    opacity: 0.4;
}


/*
    =================================================
    15. SAĞ PANEL FORM YAPISI
    =================================================
*/

.sagPanelForm {
    width: 100%;

    display: flex;
    flex-direction: column;
}


/*
    Her bölüm tam genişlikte bir şerittir.
    Kart görünümü kullanılmaz.
*/
.sagPanelFormBolumu {
    width: 100%;

    border: 0;

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

    background: transparent;
}


.sagPanelFormBolumBasligi {
    height:
        var(--bolum-baslik-yukseklik);

    display: flex;
    align-items: center;

    margin: 0;

    padding:
        0
        9px;

    border: 0;

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

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

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

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

    font-weight: 700;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}


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

    gap: 3px;

    padding:
        6px
        9px
        8px;

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


/*
    -------------------------------------------------
    ÖZELLİK SATIRI

    Masaüstü denetçilerindeki gibi
    solda etiket, sağda değer.
    -------------------------------------------------
*/

.sagPanelFormSatiri,
.sagPanelSayiAlani {
    width: 100%;
    min-height:
        var(--alan-yukseklik);

    display: grid;

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

    align-items: center;

    gap: 8px;
}


.sagPanelFormEtiketi,
.sagPanelAlanEtiketi {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

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

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


/*
    -------------------------------------------------
    İŞLEM BUTONU IZGARASI
    -------------------------------------------------
*/

.sagPanelDolapIslemButonlari {
    display: grid;

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

    gap: 4px;
}


.sagPanelDolapIslemButonlari
.sagPanelIslemBtn[data-komut="dolabiDuzenle"],
.sagPanelDolapIslemButonlari
.sagPanelIslemBtn[data-komut="dolabiTasi"],
.sagPanelDolapIslemButonlari
.sagPanelIslemBtn.tehlikeli,
.sagPanelDolapIslemButonlari
.sagPanelIslemBtn[data-komut="dolabiSil"],
.sagPanelDolapIslemButonlari
.sagPanelIslemBtn.vurgulu {
    grid-column:
        1 / -1;
}


/*
    Izgarada tek başına kalan son buton
    boş göz bırakmasın.
*/
.sagPanelDolapIslemButonlari
.sagPanelIslemBtn:last-child:nth-child(odd) {
    grid-column:
        1 / -1;
}


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


/*
    =================================================
    16. SAĞ PANEL AÇILIR BÖLÜMLER
    =================================================
*/

.sagPanelAcilirBolumBasligi {
    width: 100%;

    justify-content:
        flex-start;

    gap: 6px;

    cursor: pointer;

    text-align: left;

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


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

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


.sagPanelBolumOku {
    width: 10px;
    height: 10px;

    flex:
        0
        0
        10px;

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

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

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

    transition:
        transform 0.12s linear;
}


.sagPanelBolumOku::before {
    content: "▶";
}


.sagPanelFormBolumu.acik
.sagPanelBolumOku {
    transform:
        rotate(90deg);

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


.sagPanelBolumBaslikYazisi {
    flex: 1;
    min-width: 0;

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


.sagPanelSabitBolumBasligi {
    cursor: default;
}


.sagPanelFormBolumIcerigi[hidden] {
    display: none !important;
}


/*
    =================================================
    17. SAĞ PANEL GİRİŞ ALANLARI
    =================================================
*/

.sagPanelInput,
.sagPanelAlanInput {
    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;
}


/*
    Sayı alanları hizalı rakamla ve
    sağa yaslı gösterilir.
*/
.sagPanelSayiInput,
.sagPanelAlanInput,
input[type="number"] {
    font-variant-numeric:
        tabular-nums;

    text-align: right;
}


.sagPanelInput::placeholder,
.sagPanelAlanInput::placeholder {
    color:
        var(--renk-yazi-soluk);
}


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


.sagPanelInput:focus,
.sagPanelAlanInput:focus {
    border-color:
        var(--renk-ana);

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


.sagPanelInput:disabled,
.sagPanelInput[readonly],
.sagPanelAlanInput:disabled {
    cursor: not-allowed;

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

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


.sagPanelSayiKapsayici {
    width: 100%;

    position: relative;

    display: flex;
    align-items: center;
}


.sagPanelSayiInput {
    padding-right: 30px;
}


/*
    Birim etiketi alanın içine gömülür.
*/
.sagPanelBirim {
    position: absolute;

    top: 1px;
    right: 1px;
    bottom: 1px;

    display: flex;
    align-items: center;

    padding:
        0
        6px;

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

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

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

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

    font-weight: 600;

    pointer-events: none;
}


.sagPanelSayiInput::-webkit-inner-spin-button,
.sagPanelSayiInput::-webkit-outer-spin-button {
    margin-left: 2px;

    opacity: 0.4;
}


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


/*
    =================================================
    18. SAĞ PANEL BİLGİ SATIRLARI
    =================================================
*/

.sagPanelBilgiSatiri {
    width: 100%;
    min-height: 22px;

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

    gap: 10px;

    padding:
        3px
        7px;

    border: 0;

    border-radius: 2px;

    background: transparent;
}


/*
    Okumayı kolaylaştıran satır gölgeleme.
*/
.sagPanelBilgiSatiri:nth-child(odd) {
    background:
        var(--renk-alan-vurgu);
}


.sagPanelBilgiEtiketi {
    flex: 1;

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

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

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


.sagPanelBilgiDegeri {
    max-width: 62%;

    overflow-wrap: anywhere;

    color:
        var(--renk-yazi);

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

    font-weight: 600;

    font-variant-numeric:
        tabular-nums;

    text-align: right;
}


.sagPanelBilgiKutusu {
    width: 100%;

    margin: 4px 0;

    padding: 9px;

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

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

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

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

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

    line-height: 1.45;

    text-align: center;
}


.sagPanelSaltOkunur {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 0;

    padding:
        6px
        9px;
}


/*
    -------------------------------------------------
    PANEL KENAR BÖLÜMÜ
    -------------------------------------------------
*/

.sagPanelPanelKenarBolumu
.sagPanelFormBolumIcerigi {
    padding-top: 0;
}


.sagPanelPanelKenarAciklama {
    margin: 0;

    padding:
        6px
        9px;

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

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

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

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

    line-height: 1.45;
}


/*
    =================================================
    19. SAĞ PANEL İŞLEM BUTONLARI
    =================================================
*/

.sagPanelIslemBtn {
    width: 100%;
    min-height:
        var(--buton-yukseklik);

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

    padding:
        4px
        9px;

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

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

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

    color:
        var(--renk-yazi);

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

    font-weight: 600;

    cursor: pointer;

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


.sagPanelIslemBtn:hover:not(:disabled) {
    border-color:
        var(--renk-kenarlik-koyu);

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


.sagPanelIslemBtn:active:not(:disabled) {
    background: #dde3ec;
}


/*
    Bölüm içindeki ana işlem butonu.
*/
.sagPanelIslemBtn[data-komut="dolabiDuzenle"],
.sagPanelIslemBtn.vurgulu {
    border-color:
        var(--renk-ana-kenar);

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

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


.sagPanelIslemBtn[data-komut="dolabiDuzenle"]:hover:not(:disabled),
.sagPanelIslemBtn.vurgulu:hover:not(:disabled) {
    border-color:
        var(--renk-ana);

    background:
        var(--renk-ana);

    color: #ffffff;
}


/*
    Kütüphaneye Ekle düzenleme modundaki
    birincil işlemdir.
*/
.sagPanelIslemBtn[data-komut="kutuphaneyeKaydet"] {
    border-color:
        var(--renk-ana-hover);

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

    color: #ffffff;
}


.sagPanelIslemBtn[data-komut="kutuphaneyeKaydet"]:hover:not(:disabled) {
    background:
        linear-gradient(
            180deg,
            var(--renk-ana),
            var(--renk-ana-hover)
        );

    color: #ffffff;
}


/*
    Tehlikeli işlem butonu.
*/
.sagPanelIslemBtn.tehlikeli,
.sagPanelIslemBtn[data-komut="dolabiSil"] {
    border-color:
        var(--renk-tehlike-kenar);

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

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


.sagPanelIslemBtn.tehlikeli:hover:not(:disabled),
.sagPanelIslemBtn[data-komut="dolabiSil"]:hover:not(:disabled) {
    border-color:
        var(--renk-tehlike);

    background:
        var(--renk-tehlike);

    color: #ffffff;
}


.sagPanelIslemBtn:disabled,
.sagPanelIslemBtn.devreDisi {
    cursor: not-allowed;

    opacity: 0.5;

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

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


/*
    =================================================
    20. KAPAK AYAR PANELİ
    =================================================
*/

.kapakAyarPaneli {
    grid-column:
        1 / -1;

    display: flex;
    flex-direction: column;

    gap: 6px;

    margin-bottom: 4px;

    padding:
        8px;

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

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

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


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

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

    font-weight: 700;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.kapakAyarIkonlari {
    display: grid;

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

    gap: 4px;
}


.kapakAyarIkonBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    gap: 2px;

    padding:
        5px
        2px;

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

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

    background:
        var(--renk-alan);

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

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

    line-height: 1.2;

    text-align: center;

    cursor: pointer;

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


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

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


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

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

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

    font-weight: 600;
}


.kapakAyarIkonBtn svg {
    display: block;
}


.kapakAyarSatiri {
    display: grid;

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

    align-items: center;

    gap: 8px;

    min-height:
        var(--alan-yukseklik);
}


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

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


.kapakAyarInput,
.kapakAyarSelect {
    width: 100%;
    height:
        var(--alan-yukseklik);

    padding:
        0
        6px;

    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);
}


.kapakAyarInput {
    text-align: right;

    font-variant-numeric:
        tabular-nums;
}


.kapakAyarInput:focus,
.kapakAyarSelect:focus {
    border-color:
        var(--renk-ana);

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