/* FAYTON.V2 — tema uyumlu balon (tooltip)
   Tarayıcının kendi sarı title kutusu yerine, günlük servis girişinde kullanılan
   balonun aynısı. Kullanan sayfa bu dosyayı page-css bölümünde çağırır ve
   js/global.js içindeki BalonKur("#kapsayici") ile devreye alır. */

.fayton-balon {
    position: absolute;
    z-index: 9999;
    display: none;
    background: var(--app-component-bg, #212529);
    color: var(--app-component-color, #fff);
    border: 1px solid rgba(128, 128, 128, .45);
    border-radius: 4px;
    padding: 4px 9px;
    font-size: 11px;
    line-height: 18px;
    /* çok satırlı metinlerde (plaka/servis bilgisi) satır sonları korunur */
    white-space: pre;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
    /* açılışta yumuşak geçiş - "acik" sınıfı eklenince görünür olur */
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .12s ease, transform .12s ease;
}

    .fayton-balon.acik {
        opacity: 1;
        transform: translateY(0);
    }

    /* balonu elemana bağlayan küçük ok; sol konumu js ile hizalanır */
    .fayton-balon::after {
        content: '';
        position: absolute;
        left: var(--ok-sol, 14px);
        border: 5px solid transparent;
    }

    /* elemanın üstünde açıldığında ok aşağı, altında açıldığında yukarı bakar */
    .fayton-balon.ust::after {
        top: 100%;
        border-top-color: var(--app-component-bg, #212529);
    }

    .fayton-balon.alt::after {
        bottom: 100%;
        border-bottom-color: var(--app-component-bg, #212529);
    }