/*
    =================================================
    33. ÜST MENÜ

    İki kat:
        üst   gruplar (Proje, Tasarım, Malzeme, Üretim)
        alt   açılan grubun komutları + açıklama şeridi

    Alt kat üst şeridin ALTINA taşıyor; header'ın
    kendi yüksekliği değişmiyor, düğmeler yerinde
    kalıyor.
    =================================================
*/

.ustMenu {
    position: relative;

    display: flex;
    align-items: center;
}


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

    gap: 3px;
}


.ustMenuGrupBtn,
.ustMenuOgeBtn {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    height:
        var(--buton-yukseklik);

    padding:
        0
        11px;

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

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

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

    color:
        var(--renk-yazi);

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

    white-space: nowrap;

    cursor: pointer;

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


.ustMenuGrupBtn:hover,
.ustMenuOgeBtn:hover {
    border-color:
        var(--renk-kenarlik-koyu);

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


/*
    Açık grup: alt katla görsel olarak birleşiyor.
*/
.ustMenuGrupBtn.acik {
    border-color:
        var(--renk-ana-kenar);

    background:
        var(--renk-ana);

    color: #ffffff;
}


/*
    Basılı kalan bölüm düğmeleri (Oda, Kasa,
    Dolap Ekle). Sol panelde o bölüm açık demek.
*/
.ustMenuOgeBtn.aktif {
    border-color:
        var(--renk-ana-kenar);

    background:
        var(--renk-ana);

    color: #ffffff;
}


.ustMenuIkonKutusu {
    display: inline-flex;
    align-items: center;

    flex-shrink: 0;
}


.ustMenuIkon {
    width: 17px;
    height: 17px;

    flex-shrink: 0;
}


.ustMenuGrupAdi,
.ustMenuOgeAdi {
    line-height: 1;
}


/*
    -------------------------------------------------
    AÇILAN KAT
    -------------------------------------------------

    Header'ın İKİNCİ SATIRI. Üste binmiyor;
    açılınca header büyüyor ve çizim alanı o kadar
    aşağı kayıyor.

    Önce üste binen bir kat denenmişti ama dolap
    düzenleme araçlarını kapatıyordu.
*/
.ustMenuAltKat {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    /*
        Komutlar sağa dayalı: üstteki grup
        düğmeleriyle aynı hizada duruyorlar.
    */
    justify-content: flex-end;

    gap: 6px 14px;

    padding:
        7px
        10px;

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

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

    animation:
        ustMenuAcilis
        0.12s
        linear;
}


.ustMenuAltKat[hidden] {
    display: none;
}


@keyframes ustMenuAcilis {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}


.ustMenuOgeleri {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 4px;
}


/*
    Açıklama şeridi. Üstüne gelinen komutun ne
    yaptığını anında yazıyor; tarayıcının kendi
    balonunu beklemeye gerek kalmıyor.

    Komutların SOLUNDA duruyor, altında değil:
    header'ın ikinci satırı gereksiz yere
    kalınlaşmasın.

    Kalan boşluğu kaplıyor; metin sağa dayalı ki
    komutlarla arasında boşluk açılmasın.
*/
.ustMenuAciklamasi {
    flex: 1;

    min-width: 180px;

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

    padding-right: 14px;

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

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

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

    line-height: 1.4;

    text-align: right;
}


/*
    Dar ekranda gruplar sığmazsa kaydırılabilsin.
    Açıklama şeridi de alt satıra insin.
*/
@media (max-width: 900px) {
    .ustMenuGruplari {
        overflow-x: auto;
    }

    .ustMenuAciklamasi {
        flex-basis: 100%;

        order: 2;

        padding-right: 0;

        border-right: 0;
    }
}


@media (prefers-reduced-motion: reduce) {
    .ustMenuAltKat {
        animation: none;
    }
}