/*
    =================================================
    MOBİLYA MOTORU V2 - ARAYÜZ STİLLERİ

    Tasarım yönü:

    Bir web sayfası değil, bir MASAÜSTÜ CAD
    programı gibi görünmesi hedeflenmiştir.

    Kurallar:

    - Açık, nötr gri kabuk
    - Düz yüzeyler, gölge yerine 1px çizgi
    - Küçük köşe yarıçapı (3-5px)
    - Sıkı yerleşim (26px alan yüksekliği)
    - Hover'da zıplama/büyüme YOK
    - Sayılar hizalı (tabular) rakamla
    =================================================
*/


/*
    =================================================
    1. TASARIM DEĞİŞKENLERİ
    =================================================
*/

:root {
    /*
        YÜZEYLER

        Zemin en koyu, alan (input) en açık.
        Aradaki fark panelleri ayırır.
    */
    --renk-zemin: #d9dfe8;
    --renk-panel: #f1f3f7;
    --renk-serit: #e9edf3;
    --renk-bolum-baslik: #e2e7ef;
    --renk-alan: #ffffff;
    --renk-alan-vurgu: #f7f9fc;
    --renk-alan-pasif: #eceff4;

    /*
        ÇİZGİLER
    */
    --renk-kenarlik: #bcc6d4;
    --renk-kenarlik-acik: #d5dce6;
    --renk-kenarlik-koyu: #9caaba;

    /*
        YAZI
    */
    --renk-yazi: #1b2330;
    --renk-yazi-ikincil: #55637a;
    --renk-yazi-soluk: #8a97aa;

    /*
        VURGU
    */
    --renk-ana: #1d64d8;
    --renk-ana-hover: #1750b0;
    --renk-ana-acik: #e3edfc;
    --renk-ana-kenar: #9cbcef;

    /*
        DURUM RENKLERİ
    */
    --renk-basarili: #15803d;
    --renk-basarili-acik: #eaf7ee;
    --renk-basarili-kenar: #a6dab9;

    --renk-uyari: #9a5b06;
    --renk-uyari-acik: #fdf5e6;
    --renk-uyari-kenar: #ebcf8b;

    --renk-tehlike: #c62828;
    --renk-tehlike-hover: #a51f1f;
    --renk-tehlike-acik: #fdeded;
    --renk-tehlike-kenar: #edb0b0;

    /*
        GEOMETRİ

        Masaüstü programlarda köşeler
        neredeyse keskindir.
    */
    --radius-buyuk: 5px;
    --radius-orta: 4px;
    --radius-kucuk: 3px;

    /*
        YOĞUNLUK

        Bütün satır yükseklikleri tek
        yerden yönetilir.
    */
    --serit-yukseklik: 40px;
    --durum-yukseklik: 24px;
    --bolum-baslik-yukseklik: 25px;
    --alan-yukseklik: 26px;
    --buton-yukseklik: 26px;

    --sol-panel-genislik: 244px;
    --sol-panel-dar-genislik: 34px;
    --sag-panel-genislik: 300px;

    /*
        YAZI ÖLÇÜLERİ
    */
    --yazi-normal: 12px;
    --yazi-kucuk: 11px;
    --yazi-mini: 10px;

    /*
        GÖLGE

        Yalnız yüzen katmanlarda (modal,
        açılır liste) kullanılır.
    */
    --golge-pencere:
        0 16px 44px
        rgba(15, 23, 42, 0.3);

    --golge-yuzen:
        0 4px 14px
        rgba(15, 23, 42, 0.16);
}