/* ===== MOBILE TABBAR ONLY - Sadece mobil tabbar için stiller ===== */
.mobile-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45px;
    background: #fff;
    border-top: 1px solid #e6e6eb;
    display: none;
    z-index: 1040;
    backdrop-filter: blur(6px);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
}

[data-bs-theme="dark"] .mobile-tabbar {
    background: #141414;
    border-top-color: #2a2f36;
}

.tabbar-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
}

.tabbar-item {
    font-size: 11px;
    color: #5b616a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: 4px;
    padding: 8px 4px;
    transition: all 0.2s ease;
}

[data-bs-theme="dark"] .tabbar-item {
    color: #9ca3af;
}

.tabbar-item .icon {
    width: 24px;
    height: 24px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.tabbar-item .icon svg {
    width: 20px;
    height: 20px;
}

.tabbar-item .icon i {
    font-size: 18px;
    line-height: 1;
}

.tabbar-item span:not(.icon) {
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
}

.tabbar-item:hover .icon {
    transform: translateY(-2px) scale(1.02);
}

.tabbar-item.active {
    color: #f94d00;
    font-weight: 700;
}

[data-bs-theme="dark"] .tabbar-item.active {
    color: #f94d00;
}

.tabbar-item.active .icon {
    background: rgba(249, 77, 0, 0.15);
    box-shadow: 0 0 0 8px rgba(249, 77, 0, 0.15);
}

[data-bs-theme="dark"] .tabbar-item.active .icon {
    background: rgba(249, 77, 0, 0.18);
    box-shadow: 0 0 0 8px rgba(249, 77, 0, 0.18);
}

/* ============================================================
   Modern Loader – AJAX, SPA ve Sayfa Geçişleri
   Brand Color: #f94d00
   ============================================================ */

/* ===== Dot Loader ===== */
.dot-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.dot-loader span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f94d00;
    display: block;
    animation: dot-bounce 1s infinite ease-in-out;
    box-shadow: 0 0 8px rgba(249, 77, 0, 0.35);
}

/* staggered animation */
.dot-loader span:nth-child(2) {
    animation-delay: 0.12s;
}

.dot-loader span:nth-child(3) {
    animation-delay: 0.24s;
}

/* Large variant */
.dot-loader.dot-loader-lg span {
    width: 12px;
    height: 12px;
}

/* Bounce animation (soft + premium) */
@keyframes dot-bounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    50% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* Accessibility – reduce motion */
@media (prefers-reduced-motion: reduce) {
    .dot-loader span {
        animation: none;
        opacity: 1;
    }
}

/* Load more spinner helper */
.spinner-load-more {
    display: none;
}

/* ============================================================
   Non-blocking page transition progress
   ============================================================ */

.page-shell-content {
    position: relative;
}

.page-loader {
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    display: block;
    overflow: hidden;
    background: transparent;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}

.page-loader::before {
    content: "";
    display: block;
    width: 28%;
    height: 100%;
    background: #f94d00;
    transform: translateX(-110%);
}

.page-loader .dot-loader {
    display: none;
}

.page-shell-content.is-loading + .page-loader {
    opacity: 1;
    visibility: visible;
}

.page-shell-content.is-loading + .page-loader::before {
    animation: page-loader-progress 1.1s ease-in-out infinite;
}

@keyframes page-loader-progress {
    0% { transform: translateX(-110%); }
    65% { transform: translateX(250%); }
    100% { transform: translateX(380%); }
}

@media (prefers-reduced-motion: reduce) {
    .page-shell-content.is-loading + .page-loader::before {
        width: 100%;
        transform: none;
        animation: none;
    }
}


/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    .mobile-tabbar {
        display: block;
    }
}
.tabbar-item .icon-avatar {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tabbar-item .icon-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* aktif sekmede hafif vurgu */
.tabbar-item.active .icon-avatar img {
    outline: 2px solid var(--writers-primary, #f94d00);
    outline-offset: 2px;
}

/* Varient 3.1.1 uses Bootstrap's data-bs-theme marker. */
[data-bs-theme="dark"] .mobile-tabbar { background: #141414; border-top-color: #2a2f36; }
[data-bs-theme="dark"] .tabbar-item { color: #9ca3af; }
[data-bs-theme="dark"] .tabbar-item.active { color: #f94d00; }
[data-bs-theme="dark"] .tabbar-item.active .icon { background: rgb(249 77 0 / 18%); box-shadow: 0 0 0 8px rgb(249 77 0 / 18%); }
@media (max-width: 991.98px) {
    .mobile-tabbar {
        height: calc(56px + env(safe-area-inset-bottom));
        min-height: 56px;
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: border-box;
    }
    .mobile-tabbar .tabbar-list { height: 56px; }
    #footer { margin-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

@media (max-width: 767.98px) {
    .footer-copyright { padding: 24px 0; }
    .footer-copyright .row { row-gap: 12px; }
    .footer-copyright .row > [class*="col-"] { text-align: center !important; }
    .footer-copyright .nav-footer ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 16px;
    }
    .footer-copyright .nav-footer ul li { margin: 0; }
}