/*
    =================================================
    2. TEMEL AYARLAR
    =================================================
*/

* {
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    height: 100%;

    margin: 0;
}


body {
    overflow: hidden;

    color:
        var(--renk-yazi);

    background:
        var(--renk-zemin);

    /*
        Windows'ta yerel arayüz yazı tipi
        önce gelir.
    */
    font-family:
        "Segoe UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        Inter,
        sans-serif;

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

    line-height: 1.35;

    /*
        Masaüstü programlarda arayüz metni
        seçilmez.
    */
    -webkit-user-select: none;
    user-select: none;

    cursor: default;
}


button,
input,
select,
textarea {
    font: inherit;

    -webkit-tap-highlight-color:
        transparent;
}


button {
    color: inherit;
}


/*
    Değer alanları seçilebilir kalmalı.
*/
input,
textarea,
select {
    -webkit-user-select: text;
    user-select: text;
}


/*
    Fare ile tıklamada odak halkası
    gösterilmez, klavye ile gezinmede
    gösterilir.
*/
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
}


button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        2px solid
        var(--renk-ana);

    outline-offset: 1px;
}


button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
}


[hidden] {
    display: none !important;
}


/*
    JavaScript tarafından mod değişiminde
    gizlenen bölümler.
*/
.modTarafindanGizlendi {
    display: none !important;
}


#app {
    width: 100%;
    height: 100%;
}


/*
    -------------------------------------------------
    KAYDIRMA ÇUBUKLARI

    Masaüstü programlarındaki gibi ince,
    kanallı ve gri.
    -------------------------------------------------
*/

.incelKaydirma,
#solPanelIcerik,
.solPanelIcerik,
#sagPanelIcerik,
.sagPanelIcerik,
.kutuphaneyeKaydetForm,
.rafEklemeForm,
.parcaEklemeForm,
.menuPaneliIcerik {
    scrollbar-width: thin;

    scrollbar-color:
        #b3bfcf
        var(--renk-serit);
}


.incelKaydirma::-webkit-scrollbar,
#solPanelIcerik::-webkit-scrollbar,
.solPanelIcerik::-webkit-scrollbar,
#sagPanelIcerik::-webkit-scrollbar,
.sagPanelIcerik::-webkit-scrollbar,
.kutuphaneyeKaydetForm::-webkit-scrollbar,
.rafEklemeForm::-webkit-scrollbar,
.parcaEklemeForm::-webkit-scrollbar,
.menuPaneliIcerik::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}


.incelKaydirma::-webkit-scrollbar-track,
#solPanelIcerik::-webkit-scrollbar-track,
.solPanelIcerik::-webkit-scrollbar-track,
#sagPanelIcerik::-webkit-scrollbar-track,
.sagPanelIcerik::-webkit-scrollbar-track,
.kutuphaneyeKaydetForm::-webkit-scrollbar-track,
.rafEklemeForm::-webkit-scrollbar-track,
.parcaEklemeForm::-webkit-scrollbar-track,
.menuPaneliIcerik::-webkit-scrollbar-track {
    background:
        var(--renk-serit);

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


.incelKaydirma::-webkit-scrollbar-thumb,
#solPanelIcerik::-webkit-scrollbar-thumb,
.solPanelIcerik::-webkit-scrollbar-thumb,
#sagPanelIcerik::-webkit-scrollbar-thumb,
.sagPanelIcerik::-webkit-scrollbar-thumb,
.kutuphaneyeKaydetForm::-webkit-scrollbar-thumb,
.rafEklemeForm::-webkit-scrollbar-thumb,
.parcaEklemeForm::-webkit-scrollbar-thumb,
.menuPaneliIcerik::-webkit-scrollbar-thumb {
    border: 2px solid transparent;

    border-radius: 6px;

    background:
        #b3bfcf;

    background-clip:
        content-box;
}


.incelKaydirma::-webkit-scrollbar-thumb:hover,
#solPanelIcerik::-webkit-scrollbar-thumb:hover,
.solPanelIcerik::-webkit-scrollbar-thumb:hover,
#sagPanelIcerik::-webkit-scrollbar-thumb:hover,
.sagPanelIcerik::-webkit-scrollbar-thumb:hover,
.kutuphaneyeKaydetForm::-webkit-scrollbar-thumb:hover,
.rafEklemeForm::-webkit-scrollbar-thumb:hover,
.parcaEklemeForm::-webkit-scrollbar-thumb:hover,
.menuPaneliIcerik::-webkit-scrollbar-thumb:hover {
    background:
        #8b9aad;

    background-clip:
        content-box;
}