/* =====================================================================
   Smart Lockers — Floating Card Fix v3.4
   .floating-card sol tərəfdə düymələrin üzərinə minirdi — düzəltdik
   ===================================================================== */

/* Hero visual container — relative positioning */
.hero .hero-visual {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
}

.hero .hero-visual img {
    display: block;
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Floating card — image-in sağ-aşağı küncündə overlay
   (style.css-də sol-aşağı edilmişdi — düzəldirik) */
.hero .hero-visual .floating-card {
    position: absolute !important;
    bottom: -20px !important;
    right: -16px !important;
    left: auto !important;
    top: auto !important;

    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    padding: 16px 20px;
    box-shadow: 0 20px 50px rgba(7, 24, 47, 0.25);

    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 280px;
    z-index: 3;

    animation: floatCardFix 4s ease-in-out infinite;
}

[data-theme="dark"] .hero .hero-visual .floating-card {
    background: rgba(22, 35, 56, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.15);
}

@keyframes floatCardFix {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Floating card icon — daha kompakt */
.hero .hero-visual .floating-card .floating-card-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0a2a66, #1b6fff);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* Floating card text */
.hero .hero-visual .floating-card .floating-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hero .hero-visual .floating-card .fc-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #07182f;
    line-height: 1.3;
}

.hero .hero-visual .floating-card .fc-desc {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

[data-theme="dark"] .hero .hero-visual .floating-card .fc-title { color: #fff; }
[data-theme="dark"] .hero .hero-visual .floating-card .fc-desc { color: #94a3b8; }

/* ============================================
   MOBILE — floating card image-in altında mərkəzdə
   ============================================ */

@media (max-width: 991.98px) {
    .hero .hero-visual {
        margin-top: 40px;
    }

    .hero .hero-visual .floating-card {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        margin: 16px auto 0 !important;
        max-width: 100%;
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .hero .hero-visual img {
        max-height: 280px;
        object-fit: cover;
    }

    .hero .hero-visual .floating-card {
        padding: 14px 16px;
        gap: 12px;
    }

    .hero .hero-visual .floating-card .floating-card-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 1.15rem;
    }

    .hero .hero-visual .floating-card .fc-title { font-size: 0.88rem; }
    .hero .hero-visual .floating-card .fc-desc { font-size: 0.75rem; }
}

/* ============================================
   STAT STRIP — köhnə style.css-də .stat var idi
   .stat-item ilə uyğunsuzluq düzəlir
   ============================================ */

.hero .stat-strip {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 32px !important;
    flex-wrap: wrap;
    padding: 24px 0 0;
    margin-top: 32px !important;
    border-top: 1px solid rgba(7, 24, 47, 0.08);
    background: transparent !important;
    border: none;
    border-top: 1px solid rgba(7, 24, 47, 0.08);
}

.hero .stat-strip .stat-item {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

.hero .stat-strip .stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-strong, #07182f);
    line-height: 1;
}

.hero .stat-strip .stat-label {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
    margin-top: 4px;
}

[data-theme="dark"] .hero .stat-strip { border-top-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .hero .stat-strip .stat-value { color: #fff; }

@media (max-width: 575.98px) {
    .hero .stat-strip {
        justify-content: center;
        gap: 24px !important;
    }
    .hero .stat-strip .stat-value { font-size: 1.6rem; }
    .hero .stat-strip .stat-label { font-size: 0.78rem; }
}

/* ============================================
   HERO TEXT COLOR FIX
   Köhnə style.css-də .hero color: #fff idi (qaranlıq fon üçün)
   İndi açıq fonludur — text-strong rəngə dəyişdiririk
   ============================================ */

.hero {
    color: var(--text, #122033);
}

.hero h1 {
    color: var(--text-strong, #07182f) !important;
}

.hero .lead,
.hero p.lead {
    color: var(--text-muted, #64748b) !important;
}

[data-theme="dark"] .hero h1 { color: #fff !important; }
[data-theme="dark"] .hero .lead { color: #94a3b8 !important; }

/* Eyebrow — köhnə style.css-də ağ idi (qaranlıq fon üçün) */
.hero .eyebrow {
    background: rgba(255, 138, 0, 0.08) !important;
    border-color: rgba(255, 138, 0, 0.18) !important;
    color: var(--accent, #ff8a00) !important;
}

.hero .eyebrow .pulse {
    background: var(--accent, #ff8a00) !important;
}

/* Hero ::before ::after dekor — köhnə style.css-də başqa şəkildə */
.hero::after {
    display: none !important;  /* köhnə "wave" effekt söndürülür */
}