/*
    =================================================
    30. İPUCU BALONU

    Ekranın altında birkaç saniye görünüp kaybolan
    kısa bilgi mesajı.

    Katman tıklamayı geçirir; kullanıcının altındaki
    çizim alanına erişimi kapanmaz.
    =================================================
*/

.ipucuBalonKatmani {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 24px;

    z-index: 11000;

    display: flex;
    justify-content: center;

    padding:
        0
        16px;

    pointer-events: none;
}


.ipucuBalonu {
    max-width:
        min(100%, 460px);

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        9px
        16px;

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

    border-radius: 999px;

    background:
        var(--renk-panel);

    color:
        var(--renk-yazi);

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

    line-height: 1.45;

    text-align: center;

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

    /*
        Başlangıç durumu: görünmez ve biraz
        aşağıda. "gorunur" sınıfı eklenince
        yukarı kayarak beliriyor.
    */
    opacity: 0;

    transform:
        translateY(10px);

    transition:
        opacity 0.2s linear,
        transform 0.2s linear;
}


.ipucuBalonu.gorunur {
    opacity: 1;

    transform:
        translateY(0);
}


/*
    Sistem "hareketi azalt" diyorsa kaydırma
    animasyonunu kapatıyoruz; balon yalnız
    beliriyor.
*/
@media (prefers-reduced-motion: reduce) {
    .ipucuBalonu {
        transform: none;

        transition:
            opacity 0.2s linear;
    }

    .ipucuBalonu.gorunur {
        transform: none;
    }
}