/* =========================================
   ULTRA PREMIUM 5'Lİ MOBILE NAVBAR
   ORTA YÜKSEK + KIRMIZI NEON + OVAL TASARIM
   ========================================= */

/* ANA BAR */
.fp-mobile-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;

    display: none !important;
    height: 80px !important;
    z-index: 1000 !important;

    background: rgba(248, 248, 248, 0.88) !important;
    backdrop-filter: blur(18px);

    border-top: 1px solid rgba(227, 12, 78, 0.25) !important;
    border-radius: 28px 28px 0 0 !important;

    box-shadow:
        0 -10px 30px rgba(0,0,0,0.08),
        0 0 20px rgba(227, 12, 78, 0.12);

    overflow: visible !important;
}

/* DARK MODE */
body.dark .fp-mobile-bar {
    background: rgba(18,18,18,0.92) !important;
    border-top: 1px solid rgba(227, 12, 78, 0.25) !important;
}

/* MOBIL */
@media (max-width: 991px) {
    .fp-mobile-bar {
        display: flex !important;
    }

    body {
        padding-bottom: 80px !important;
    }
}

/* GRID */
.fp-mobile-bar .grid {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    height: 100% !important;
    padding: 0 6px;
}

/* =========================
   NORMAL MODÜLLER
   ========================= */

.fp-mobile-bar .link {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 10px;
    color: #e30c4e !important;

    position: relative;

    transition: 0.25s ease;
}

/* icon */
.fp-mobile-bar .link .icon {
    font-size: 20px !important;
    margin-bottom: 2px;
}

/* hover glow */
.fp-mobile-bar .link:hover {
    color: #ff2d6a !important;
    text-shadow: 0 0 10px rgba(227,12,78,0.35);
}

/* active glow (KALDIRILDI - SADE MAVİ YAPILDI) */
.fp-mobile-bar .link.active {
    color: #00a2ff !important;
    text-shadow: none !important;
    transform: translateY(-1px);
}

/* SADECE ICON + TEXT MAVİ */
.fp-mobile-bar .link.active .icon,
.fp-mobile-bar .link.active .text {
    color: #00a2ff !important;
    text-shadow: none !important;
}

/* =========================
   ORTA ANA BUTON
   ========================= */

.sepet-butonu {
    position: relative !important;
    flex: 1.3 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    overflow: visible !important;
}

/* ORTA PLATFORM */
.sepet-butonu::before {
    content: "" !important;
    position: absolute !important;

    top: -49px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 92px !important;
    height: 734px !important;

    background: rgba(248,248,248,0.95);

    border: 1px solid rgba(227,12,78,0.35);

    border-top-left-radius: 50px;
    border-top-right-radius: 50px;

    box-shadow:
        0 -5px 15px rgba(227,12,78,0.15);

    z-index: 1;
}

body.dark .sepet-butonu::before {
    background: rgba(18,18,18,0.95);
}

/* ORTA BUTON */
.cart-icon-circle {
    position: absolute !important;

    top: -34px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 70px !important;
    height: 70px !important;

    border-radius: 50% !important;

    background: radial-gradient(circle at 30% 30%, #ff2d6a, #e30c4e);

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    box-shadow:
        0 15px 30px rgba(227,12,78,0.35),
        0 0 25px rgba(227,12,78,0.25),
        inset 0 0 12px rgba(255,255,255,0.2);

    z-index: 5;
}

/* ICON */
.cart-icon-circle i {
    font-size: 26px !important;
    color: #fff !important;
}

/* TEXT */
.cart-icon-circle .text {
    font-size: 9px;
    color: #fff;
}

/* ACTIVE CENTER (MAVİ) */
.sepet-butonu.active .cart-icon-circle {
    background: radial-gradient(circle at 30% 30%, #4db3ff, #0066ff);
}

/* =========================
   MERKEZ ALT PANEL
   ========================= */

.merkez-alt {
    position: fixed;
    bottom: 85px;
    left: 85%;
    transform: translateX(-50%);

    display: none;
    flex-direction: column;
    gap: 6px;
    width: 110px;
    z-index: 999;
}

#merkezToggle:checked ~ .merkez-alt {
    display: flex;
}

.merkez-kutu {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px;
    border-radius: 10px;

    font-size: 11px;
    color: #fff;

    background: rgba(0,0,0,0.85);
    border: 1px solid rgba(227,12,78,0.4);

    box-shadow: 0 0 12px rgba(227,12,78,0.2);
}

.merkez-kutu:hover {
    transform: translateY(-2px);
}