/* ══════════════════════════════════════════════════════
   Astler – Stylesheet
   ══════════════════════════════════════════════════════ */

/* ── Base ── */
html, body { scroll-behavior: smooth }
body { font-family: 'Inter', sans-serif }
a, button { transition: all .2s ease }

/* ── Mobile Drawer ── */
#mobile-menu-overlay {
    position: fixed;
    top: 52px;
    left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, .4);
    backdrop-filter: blur(2px);
    z-index: 9990;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
}

#mobile-menu {
    position: fixed;
    top: 52px;
    bottom: 0;
    width: 85%;
    max-width: 320px;
    background: white;
    z-index: 9999;
    box-shadow: 20px 0 50px rgba(0,0,0,.1);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
    display: block !important;
    border-top: 1px solid #f1f5f9;
}

/* ── Drawer Direction ── */
.drawer-ltr { left: 0; transform: translateX(-100%) }
.drawer-rtl { right: 0; transform: translateX(100%) }

/* ── Drawer State ── */
body.drawer-open #mobile-menu { transform: translateX(0) }
body.drawer-open #mobile-menu-overlay { opacity: 1; visibility: visible }
body.drawer-open { overflow: hidden }

/* ── Hero & Sliders ── */
.hero-slider  { position: absolute; inset: 0; z-index: 0 }
.slider-item  { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 2s ease-in-out }
.slider-item.active { opacity: 1 }

/* ── Animations ── */
@keyframes marquee {
    0%   { transform: translateX(0) }
    100% { transform: translateX(-100%) }
}
.animate-marquee { display: flex; animation: marquee 30s linear infinite }
.animate-marquee:hover { animation-play-state: paused }

/* ── SPA Transitions ── */
.transition-fade { transition: .4s; opacity: 1 }
html.is-animating .transition-fade { opacity: 0; transform: translateY(10px) }

/* ── WordPress Admin Bar Fix ── */
.admin-bar nav { top: 32px !important }
@media (max-width: 782px) { .admin-bar nav { top: 46px !important } }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 8px }
::-webkit-scrollbar-track { background: #f1f1f1 }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px }
::-webkit-scrollbar-thumb:hover { background: #94a3b8 }

/* ── Mobile ── */
@media (max-width: 768px) { body { font-size: 14px } }