/* ═══════════════════════════════════════════════════════════════
 * SIHIR HOME — Mobile Bottom Navigation
 * v131BG-BOTTOM-NAV (2026-05-08)
 *
 * Sticky bottom bar — sadece mobile (≤768px).
 * 5 öğe: Ana Sayfa · Kategoriler · Sepet · Hesabım · Bildirim
 * - Sade line-style ikonlar (kurumsal)
 * - Aktif öğe: turuncu vurgu + üstünde 3px çubuk
 * - Sepet/Bildirim badge canlı sayı (JS güncellemeleri)
 * - safe-area-inset-bottom (iOS notch + home indicator)
 * - Standalone modda görünüm aynı (PWA install sonrası native app feel)
 * - Body padding-bottom otomatik (içerik altında kaybolmasın)
 * ═══════════════════════════════════════════════════════════════ */

/* Sadece mobile */
@media (max-width: 768px) {
    body {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    }
    body.standalone {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    }
}

#sihirBottomNav {
    display: none;
}

@media (max-width: 768px) {
    #sihirBottomNav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(58px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 16px rgba(0, 0, 0, .04);
        z-index: 9990;
        align-items: stretch;
        justify-content: space-around;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', sans-serif;
    }

    .sb-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        color: #6b7280;
        font-size: 10.5px;
        font-weight: 500;
        position: relative;
        padding: 7px 4px 5px;
        gap: 2px;
        transition: color .15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .sb-item:active {
        background: rgba(234, 88, 12, .06);
    }

    .sb-item .sb-icon {
        width: 24px;
        height: 24px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke-width .15s ease, transform .15s ease;
    }

    .sb-item.active {
        color: #ea580c;
    }
    .sb-item.active .sb-icon {
        stroke-width: 2.1;
        transform: translateY(-1px);
    }
    .sb-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 3px;
        background: linear-gradient(90deg, #ea580c, #dc2626);
        border-radius: 0 0 3px 3px;
    }

    /* Vurgulu Sepet — orta öğe biraz daha öne */
    .sb-item.sb-cart {
        position: relative;
    }
    .sb-item.sb-cart .sb-icon {
        color: #ea580c;
    }
    .sb-item.sb-cart.active .sb-icon {
        color: #dc2626;
    }

    /* Badge — sayım rozeti */
    .sb-badge {
        position: absolute;
        top: 4px;
        right: calc(50% - 18px);
        background: #dc2626;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        box-shadow: 0 1px 4px rgba(220, 38, 38, .35);
        animation: sbBadgePop .25s ease;
    }
    .sb-badge:empty,
    .sb-badge[data-count="0"] {
        display: none;
    }

    @keyframes sbBadgePop {
        from { transform: scale(0); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

    /* Standalone PWA modda — bottom nav daha belirgin */
    body.standalone-mode #sihirBottomNav {
        box-shadow: 0 -3px 24px rgba(0, 0, 0, .08);
    }

    /* Dark theme support */
    @media (prefers-color-scheme: dark) {
        #sihirBottomNav {
            background: #1f2937;
            border-top-color: #374151;
        }
        .sb-item {
            color: #9ca3af;
        }
        .sb-item.active {
            color: #fb923c;
        }
        .sb-item.active::before {
            background: linear-gradient(90deg, #fb923c, #f97316);
        }
    }
}

/* Tablet/desktop'ta gizle */
@media (min-width: 769px) {
    #sihirBottomNav { display: none !important; }
}

/* Yazdırma sırasında gizle */
@media print {
    #sihirBottomNav { display: none !important; }
    body { padding-bottom: 0 !important; }
}