/* ============================================
   DriveLux Rental — Custom Styles
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; }
.font-serif { font-family: 'Playfair Display', serif; }

/* ---------- Glassmorphism ---------- */
.glass {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.18);
}
.glass-dark {
    background: rgba(13,59,102,0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
}
.glass-card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.5);
}

/* ---------- Gradients ---------- */
.gradient-hero   { background: linear-gradient(135deg,#0D3B66 0%,#1E478A 40%,#0A2F52 70%,#04172A 100%); }
.gradient-gold   { background: linear-gradient(135deg,#D4A843,#C9A84C,#B8860B); }
.gradient-crimson{ background: linear-gradient(135deg,#DC2626,#EF4444); }
.gradient-navy   { background: linear-gradient(135deg,#0D3B66,#1E478A); }

/* ---------- Animations ---------- */
@keyframes fadeInUp   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeInRight{ from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 20px rgba(212,168,67,.3)} 50%{box-shadow:0 0 40px rgba(212,168,67,.6)} }
@keyframes float      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes shimmer    { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

.animate-fadeInUp   { animation: fadeInUp .8s ease forwards; }
.animate-fadeInLeft { animation: fadeInLeft .8s ease forwards; }
.animate-fadeInRight{ animation: fadeInRight .8s ease forwards; }
.animate-float      { animation: float 3s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

.delay-100{animation-delay:.1s} .delay-200{animation-delay:.2s}
.delay-300{animation-delay:.3s} .delay-400{animation-delay:.4s}
.delay-500{animation-delay:.5s} .delay-600{animation-delay:.6s}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar       { width:8px }
::-webkit-scrollbar-track { background:#f1f1f1 }
::-webkit-scrollbar-thumb { background:#0D3B66; border-radius:4px }
::-webkit-scrollbar-thumb:hover { background:#1E478A }

/* ---------- Car Cards ---------- */
.car-card { transition: all .4s cubic-bezier(.4,0,.2,1); }
.car-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.car-card:hover .car-img { transform: scale(1.08); }
.car-img { transition: transform .7s cubic-bezier(.4,0,.2,1); }

/* ---------- Badges ---------- */
.badge-available { background: linear-gradient(135deg,#059669,#10B981); }
.badge-rented    { background: linear-gradient(135deg,#DC2626,#EF4444); }

/* ---------- Chart ---------- */
.chart-bar { transition: height .8s cubic-bezier(.4,0,.2,1); }

/* ---------- Nav Link ---------- */
.nav-link { position:relative }
.nav-link::after {
    content:''; position:absolute; bottom:-2px; left:0;
    width:0; height:2px;
    background:linear-gradient(90deg,#D4A843,#B8860B);
    transition:width .3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width:100% }

/* ---------- Section Observer ---------- */
.section-hidden  { opacity:0; transform:translateY(30px); transition:all .8s ease }
.section-visible { opacity:1; transform:translateY(0) }

/* ---------- Mobile Menu ---------- */
.mobile-menu { max-height:0; overflow:hidden; transition:max-height .4s ease }
.mobile-menu.open { max-height:500px }

/* ---------- Toast ---------- */
.toast { transform:translateX(120%); transition:transform .4s cubic-bezier(.4,0,.2,1) }
.toast.show { transform:translateX(0) }

/* ---------- Dashboard Scrollbar ---------- */
.dash-scroll::-webkit-scrollbar { width:4px }
.dash-scroll::-webkit-scrollbar-thumb { background:rgba(212,168,67,.5); border-radius:2px }

/* ---------- Shimmer ---------- */
.shimmer {
    background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
    background-size:200% 100%;
    animation:shimmer 2s infinite;
}

/* ---------- style filter disewa ---------- */