/* nav-bar.css - MOBİL İÇİN HIZLI VE RENKLİ TEPKİ - FINAL */

.floating-nav {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 1000; width: 96%; max-width: 500px; transition: all 0.3s ease;
}

.nav-container {
    display: flex; justify-content: space-around; align-items: center;
    height: 75px; padding: 0 10px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-radius: 28px;
}

.nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; height: 100%; cursor: pointer; color: var(--text-light);
    border-radius: 20px;
    /* Tıklama animasyonu için hızlı geçiş (0.1s) */
    transition: transform 0.1s ease, background-color 0.1s ease;
}

.nav-item .nav-icon { font-size: 24px; margin-bottom: 4px; transition: transform 0.2s ease; }
.nav-item .nav-label { font-size: 11px; font-weight: 600; transition: opacity 0.2s ease; }

@media (min-width: 1024px) {
    .floating-nav { bottom: auto; top: 50%; left: 40px; transform: translateY(-50%); width: 100px; max-width: none; height: auto; }
    .nav-container { flex-direction: column; height: auto; min-height: 400px; padding: 40px 0; gap: 30px; justify-content: center; width: 100%; }
    .nav-item { flex: initial; width: 80px; height: 80px; margin: 0; }
    .nav-item .nav-icon { font-size: 28px; margin-bottom: 6px; }
    .nav-item .nav-label { font-size: 12px; display: block; }
}

/* Sadece Fare İle (Hover) */
@media (hover: hover) {
    .nav-item:hover { background-color: rgba(0, 149, 246, 0.1); color: var(--primary); transform: none !important; }
    .nav-item.active:hover { background-color: rgba(0, 149, 246, 0.15); cursor: default; }
}

/* MOBİLDE TIKLAMA ANI (BURASI ÖNEMLİ) */
.nav-item:active {
    background-color: rgba(0, 149, 246, 0.15); /* Belirgin bir renk */
    transform: scale(0.92); /* Hafif içe göçme */
}

.nav-item.active { color: var(--primary); }
.nav-item.active .nav-icon { color: var(--primary); filter: drop-shadow(0 0 8px rgba(0, 149, 246, 0.4)); transform: scale(1.05); }
.nav-item.active .nav-label { color: var(--primary); font-weight: 700; }

[data-theme="dark"] .nav-container { background: rgba(30, 30, 30, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); }
[data-theme="dark"] .nav-item:hover { background-color: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .nav-item.active .nav-icon { filter: drop-shadow(0 0 12px rgba(0, 149, 255, 0.6)); }

@media (max-width: 768px) {
    .floating-nav { bottom: 15px; width: 94%; }
    .nav-container { height: 70px; }
    .nav-item .nav-icon { font-size: 22px; }
    .nav-item .nav-label { font-size: 10px; }
}

@media (max-width: 480px) {
    .floating-nav { bottom: 10px; width: 92%; }
    .nav-container { height: 65px; border-radius: 25px; }
    .nav-item .nav-icon { font-size: 20px; }
    .nav-item .nav-label { font-size: 9px; }
}

@media (max-width: 768px) {
    .floating-nav { transition: all 0.3s ease; }
    .filters-sidebar.active ~ .floating-nav { transform: translateX(-50%) translateY(20px); opacity: 0.9; }
}
