/* ==========================================================================
   Flanör — Mobile Bottom Navigation
   Mobilde landing/non-chat sayfalarda alt sabit 5-tab nav
   ========================================================================== */

@media (max-width: 768px) {
    .flanor-mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(30, 31, 34, 0.96);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid #2B2D31;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        z-index: 9985;
        font-family: inherit;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
    }

    .flanor-mn-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: #80848E;
        position: relative;
        transition: color 0.15s, background 0.15s;
        padding: 8px 4px;
        min-width: 0;
    }

    .flanor-mn-tab:active {
        background: rgba(88, 101, 242, 0.10);
    }

    .flanor-mn-tab.active {
        color: #5865F2;
    }

    .flanor-mn-tab.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 3px;
        background: linear-gradient(90deg, #5865F2, #9F7AEA);
        border-radius: 0 0 3px 3px;
    }

    .flanor-mn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }

    .flanor-mn-icon svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
    }

    .flanor-mn-label {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.2px;
        line-height: 1;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .flanor-mn-badge {
        position: absolute;
        top: 4px;
        right: calc(50% - 22px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: linear-gradient(135deg, #F23F42, #B92C2F);
        color: #FFFFFF;
        font-size: 9px;
        font-weight: 700;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1.5px solid #1E1F22;
        line-height: 1;
        letter-spacing: 0.02em;
    }

    /* Body padding — alt nav var olduğunda sayfa içeriği üstüne taşmasın */
    body.flanor-has-mobile-nav {
        padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
    }
}

/* Landscape mobile (telefon yan tutulduğunda) */
@media (max-width: 768px) and (orientation: landscape) {
    .flanor-mobile-nav {
        height: 50px;
    }
    body.flanor-has-mobile-nav {
        padding-bottom: calc(50px + env(safe-area-inset-bottom)) !important;
    }
}