/* ==============================================================================
   LIDER PLAZA OTO GALERI - ANTIGRAVITY SPATIAL & MOTION DESIGN SYSTEM
   Tech: 3D CSS Transforms + Glassmorphism + Weightless Levitation + GSAP
   Specification: antigravity-design-expert
   ============================================================================== */

:root {
    --lp-ag-perspective: 1000px;
    --lp-ag-glass-bg: rgba(255, 255, 255, 0.72);
    --lp-ag-glass-border: rgba(200, 164, 93, 0.28);
    --lp-ag-glass-dark-bg: rgba(4, 14, 24, 0.65);
    --lp-ag-glass-dark-border: rgba(200, 164, 93, 0.22);
    --lp-ag-shadow-floating: 0 25px 50px -12px rgba(7, 26, 43, 0.12), 0 0 20px rgba(200, 164, 93, 0.08);
    --lp-ag-shadow-lift: 0 30px 60px -15px rgba(7, 26, 43, 0.22), 0 0 30px rgba(200, 164, 93, 0.25);
    --lp-ag-ease-bounce: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------------------------
   1. SPATIAL FOUNDATION & 3D WRAPPERS
   ------------------------------------------------------------------------------ */
.lp-spatial-viewport {
    perspective: var(--lp-ag-perspective);
    transform-style: preserve-3d;
}

/* 3D Tilt Container for Cards */
.lp-3d-tilt {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s var(--lp-ag-ease-bounce), box-shadow 0.4s var(--lp-ag-ease-bounce), border-color 0.4s var(--lp-ag-ease-bounce);
    will-change: transform;
}

/* ------------------------------------------------------------------------------
   2. GLASSMORPHISM COMPONENTS
   ------------------------------------------------------------------------------ */
/* Light Glass (Showroom, Cards, Overlays) */
.lp-glass-card {
    background: var(--lp-ag-glass-bg) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--lp-ag-glass-border) !important;
    box-shadow: var(--lp-ag-shadow-floating) !important;
}

/* Dark Frosted Glass (Hero Badges, Header, Overlays) */
.lp-glass-dark {
    background: var(--lp-ag-glass-dark-bg) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--lp-ag-glass-dark-border) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
}

/* ------------------------------------------------------------------------------
   3. WEIGHTLESS FLOATING & LEVITATION ANIMATIONS
   ------------------------------------------------------------------------------ */
@keyframes lpWeightlessFloat {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(0.4deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

@keyframes lpWeightlessFloatSlow {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes lpGlowPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(200, 164, 93, 0.2);
    }
    50% {
        box-shadow: 0 0 35px rgba(200, 164, 93, 0.45);
    }
}

.lp-float-levitate {
    animation: lpWeightlessFloat 5s ease-in-out infinite;
    will-change: transform;
}

.lp-float-slow {
    animation: lpWeightlessFloatSlow 7s ease-in-out infinite;
    will-change: transform;
}

/* ------------------------------------------------------------------------------
   4. HERO SECTION SPATIAL ELEVATION
   ------------------------------------------------------------------------------ */
/* Hero Showcase 3D Frame */
.lp-hero-showcase-frame {
    transform-style: preserve-3d;
    transition: transform 0.5s var(--lp-ag-ease-bounce), box-shadow 0.5s var(--lp-ag-ease-bounce);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(200, 164, 93, 0.2) !important;
    border: 1px solid rgba(200, 164, 93, 0.4) !important;
    will-change: transform;
}

.lp-hero-showcase-frame:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.65), 0 0 50px rgba(200, 164, 93, 0.35) !important;
    border-color: var(--lp-gold-light) !important;
}

/* Hero Floating Sahibinden Badge - Frosted Glass */
.lp-hero-floating-tag {
    background: rgba(4, 14, 24, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(200, 164, 93, 0.45) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s var(--lp-ag-ease-bounce) !important;
}

.lp-hero-floating-tag:hover {
    transform: translateY(-3px) scale(1.03) !important;
    border-color: var(--lp-gold) !important;
    box-shadow: 0 15px 35px rgba(200, 164, 93, 0.3) !important;
}

/* Hero Stats: Frosted Glass Bar */
.lp-hero-stats {
    background: rgba(7, 26, 43, 0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(200, 164, 93, 0.3) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35), 0 0 25px rgba(200, 164, 93, 0.08) !important;
}

.lp-stat-unit {
    transition: transform 0.3s var(--lp-ag-ease-bounce), background 0.3s ease;
    border-radius: var(--lp-radius-sm);
    padding: 6px 4px;
}

.lp-stat-unit:hover {
    transform: translateY(-3px);
    background: rgba(200, 164, 93, 0.08);
}

/* ------------------------------------------------------------------------------
   5. VALUE PILLARS RIBBON (ANTIGRAVITY FLOATING CARDS)
   ------------------------------------------------------------------------------ */
.lp-pillar-card {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(7, 26, 43, 0.08) !important;
    box-shadow: 0 14px 35px rgba(7, 26, 43, 0.06), 0 2px 6px rgba(200, 164, 93, 0.05) !important;
    transform-style: preserve-3d;
    transition: transform 0.38s var(--lp-ag-ease-bounce), box-shadow 0.38s var(--lp-ag-ease-bounce), border-color 0.38s ease !important;
    will-change: transform;
}

.lp-pillar-card:hover {
    transform: translateY(-7px) scale(1.02) !important;
    box-shadow: 0 25px 50px rgba(7, 26, 43, 0.14), 0 0 20px rgba(200, 164, 93, 0.22) !important;
    border-color: var(--lp-gold) !important;
}

.lp-pillar-icon {
    transition: transform 0.35s var(--lp-ag-ease-bounce), background-color 0.35s ease, color 0.35s ease !important;
}

.lp-pillar-card:hover .lp-pillar-icon {
    transform: scale(1.12) rotate(4deg) !important;
    background: var(--lp-navy) !important;
    color: var(--lp-gold-light) !important;
}

/* ------------------------------------------------------------------------------
   6. VEHICLE CARDS (3D INTERACTIVE TILT & SPATIAL LIGHTING)
   ------------------------------------------------------------------------------ */
.lp-vehicle-luxury-card {
    position: relative;
    background: #FFFFFF !important;
    border: 1px solid rgba(7, 26, 43, 0.07) !important;
    border-radius: var(--lp-radius-lg) !important;
    box-shadow: 0 12px 30px rgba(7, 26, 43, 0.06), 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.42s var(--lp-ag-ease-bounce), box-shadow 0.42s var(--lp-ag-ease-bounce), border-color 0.35s ease !important;
    will-change: transform;
}

.lp-vehicle-luxury-card:hover {
    transform: translateY(-8px) scale(1.015) !important;
    box-shadow: 0 30px 60px rgba(7, 26, 43, 0.15), 0 0 30px rgba(200, 164, 93, 0.18) !important;
    border-color: rgba(200, 164, 93, 0.65) !important;
}

/* Media Image Sheen / Shimmer on Card */
.lp-card-media {
    position: relative;
    overflow: hidden;
}

.lp-card-media::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-22deg);
    transition: left 0.75s ease;
    pointer-events: none;
    z-index: 3;
}

.lp-vehicle-luxury-card:hover .lp-card-media::after {
    left: 140%;
}

.lp-card-media img {
    transition: transform 0.6s var(--lp-ag-ease-bounce) !important;
}

.lp-vehicle-luxury-card:hover .lp-card-media img {
    transform: scale(1.06) !important;
}

/* Ekspertiz Badge - Frosted Glass Glow */
.lp-badge-expert {
    background: rgba(16, 185, 129, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
    transition: transform 0.3s ease !important;
}

.lp-vehicle-luxury-card:hover .lp-badge-expert {
    transform: scale(1.05);
}

/* Category Badge - Gold Glass Glow */
.lp-card-badge-gold {
    background: rgba(7, 26, 43, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(200, 164, 93, 0.45) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* ------------------------------------------------------------------------------
   7. STICKY FROSTED HEADER ELEVATION
   ------------------------------------------------------------------------------ */
.lp-header-luxury {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(200, 164, 93, 0.22) !important;
    box-shadow: 0 10px 30px rgba(7, 26, 43, 0.06) !important;
    transition: all 0.3s ease !important;
}

/* ------------------------------------------------------------------------------
   8. ACCESSIBILITY & PREFERS-REDUCED-MOTION
   ------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .lp-float-levitate,
    .lp-float-slow {
        animation: none !important;
    }

    .lp-3d-tilt,
    .lp-vehicle-luxury-card,
    .lp-hero-showcase-frame {
        transform: none !important;
    }
}