/**
 * OEM Layout Styles - Header & Footer (FIXED)
 * Version: 3.0.0
 * @package OEM_System
 */

/* ============================================
   BRAND LOGOS - Unified System (All Brands)
   ============================================ */

/* Base logo container - now strictly vertical after icon removal */
.oem-brand-logo,
.oem-brand-logo-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    padding: 5px 0;
    text-align: center;
    flex-shrink: 0;
    width: fit-content;
}

/* Brand main text (all logos) */
.oem-brand-logo .brand-main,
.oem-brand-logo-footer .brand-main {
    font-family: "Optima", "Segoe UI", Arial, sans-serif;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 4px;
    line-height: 1;
    text-transform: uppercase;
    background: linear-gradient(to right, var(--oem-header-text, #fff) 0%, var(--oem-color-accent, #d4af37) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* Brand subtitle (all logos) */
.oem-brand-logo .brand-sub,
.oem-brand-logo-footer .brand-sub {
    display: block !important;
    font-family: inherit;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--oem-text, #88928d);
    padding-top: 4px;
    border-top: 1px solid var(--oem-color-accent, #d4af37);
    opacity: 0.8;
    transition: all 0.3s ease;
    width: 100%;
}

.oem-brand-logo .brand-main,
.oem-brand-logo-footer .brand-main {
    display: block !important;
}

/* Hover effects */
.oem-brand-logo:hover .brand-main {
    background: linear-gradient(to right, var(--oem-color-accent, #d4af37) 0%, var(--oem-color-accent, #d4af37) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    letter-spacing: 5px;
}

.oem-brand-logo:hover .brand-sub {
    border-top-color: var(--oem-color-accent, #d4af37);
    opacity: 1;
    color: var(--oem-header-text, #fff);
}


/* Mobile responsiveness */
@media (max-width: 768px) {

    .oem-brand-logo,
    .oem-brand-logo-footer {
        gap: 8px;
    }

    .oem-brand-logo .brand-main,
    .oem-brand-logo-footer .brand-main {
        font-size: 16px;
        letter-spacing: 2px;
    }

    .oem-brand-logo .brand-sub,
    .oem-brand-logo-footer .brand-sub {
        font-size: 8px;
        letter-spacing: 1px;
    }


    .oem-brand-logo:hover .brand-main {
        letter-spacing: 3px;
    }
}

/* Backward compatibility with old class name */
/* Backward compatibility with old class name */
.am-text-logo {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    padding: 5px 0;
}

.am-text-logo .brand-main {
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--oem-header-text);
}

.am-text-logo .brand-sub {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--oem-text);
}

/* ============================================
   PAGE: Yatay taşma – sadece layout wrapper (html/body’da DEĞİL)
   ============================================ */
/* html/body overflow-x: hidden → semptomu gizler, sticky/anchor debug’ı zorlaştırır. */
.oem-layout {
    overflow-x: clip;
    /* modern, güvenli; body veya ana wrapper’a class ekleyin */
}

/* ============================================
   VARIABLES – Semantic token’lar + z-index skala
   ============================================ */
/* Panelden marka paleti seçilince override edilir (wp_head). Ölçeklenebilir isimler. */
:root {
    /* Renk – semantic */
    --oem-color-surface-1: #0b1612;
    --oem-color-surface-2: #121c19;
    --oem-color-header: #0b1612;
    --oem-color-accent: #d4af37;
    /* Default: Aston Martin gold - will be overridden by PHP */

    /* Derived accent colors (automatic via color-mix) */
    --oem-accent-dim: color-mix(in srgb, var(--oem-color-accent) 60%, transparent);
    --oem-accent-hover: color-mix(in srgb, var(--oem-color-accent) 80%, #000);
    --oem-accent-bg-10: color-mix(in srgb, var(--oem-color-accent) 10%, transparent);
    --oem-accent-bg-15: color-mix(in srgb, var(--oem-color-accent) 15%, transparent);
    --oem-accent-bg-20: color-mix(in srgb, var(--oem-color-accent) 20%, transparent);
    --oem-accent-bg-25: color-mix(in srgb, var(--oem-color-accent) 25%, transparent);
    --oem-accent-bg-40: color-mix(in srgb, var(--oem-color-accent) 40%, transparent);
    --oem-accent-bg-50: color-mix(in srgb, var(--oem-color-accent) 50%, transparent);
    --oem-accent-bg-60: color-mix(in srgb, var(--oem-color-accent) 60%, transparent);

    /* Geriye uyumluluk (eski isimler → yeni token) */
    --oem-header-bg: var(--oem-color-header);
    --oem-header-bg-scrolled: rgba(11, 22, 18, 0.98);
    --oem-dark: var(--oem-color-surface-1);
    --oem-dark-2: var(--oem-color-surface-2);
    --oem-container-bg: #1a1a1a;
    --oem-main-bg: #f8f8f8;

    --oem-header-text: #ffffff;
    --oem-header-hover: var(--oem-color-accent);
    --oem-header-item-hover-bg: var(--oem-accent-bg-20);
    --oem-gold: var(--oem-color-accent);
    --oem-gold-border: var(--oem-accent-bg-25);
    --oem-cta-gradient: linear-gradient(165deg, var(--oem-color-accent) 0%, var(--oem-accent-hover) 82%);
    --oem-text: #e0e0e0;
    --oem-text-bright: #e0e0e0;
    --oem-border: #2a2a2a;

    /* Z-index skala (modal/lightbox eklenince çakışma olmasın) */
    --z-header: 100;
    --z-dropdown: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --oem-z-index-header: var(--z-header);
    --oem-z-index-mobile: var(--z-overlay);
}

/* ============================================
   ACCESSIBILITY: 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;
    }
}

/* ============================================
   CONTAINER
   ============================================ */
.oem-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    background: var(--oem-container-bg);
}

/* Landing page: container arka planı olmasın */
.oem-container--landing {
    background: transparent;
}

/* Header içinde container arka planı olmasın; header tek parça görünsün */
.oem-header .oem-container {
    background: transparent;
}

/* ============================================
   HEADER
   ============================================ */
.oem-header {
    position: relative;
    z-index: var(--oem-z-index-header);
    background: var(--oem-header-bg);
    width: 100%;
}

.oem-header-sticky {
    position: sticky;
    top: 0;
    will-change: transform;
    /* Performance fix */
}

.oem-header.scrolled .oem-header-main {
    background: var(--oem-header-bg-scrolled, rgba(21, 25, 43, 0.98));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    padding: 10px 0;
    transition: all 0.3s ease;
}

/* Mobilde backdrop-filter kapat (GPU/FPS) */
@media (max-width: 768px) {
    .oem-header.scrolled .oem-header-main {
        padding: 12px 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

.oem-header.scrolled .oem-header-logo img,
.oem-header.scrolled .oem-header-logo svg {
    height: 34px;
    transition: height 0.3s;
}

/* ============================================
   TOP BAR
   ============================================ */
.oem-topbar {
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px 0;
    font-size: 13px;
    position: relative;
    z-index: 2;
}

@media (max-width: 991px) {
    .oem-topbar {
        display: none !important;
    }
}

.oem-topbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.oem-topbar-left,
.oem-topbar-right {
    display: flex;
    gap: 20px;
    align-items: center;
}

.oem-topbar-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--oem-text);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s;
}

.oem-topbar-link:hover,
.oem-topbar-link:focus-visible {
    color: #fff !important;
    background: var(--oem-accent-bg-15);
    outline: none;
}

.oem-topbar-link i {
    font-size: 16px;
    color: var(--oem-gold);
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oem-topbar-link i::before {
    display: inline-block;
}

/* ============================================
   MAIN HEADER
   ============================================ */
.oem-header-main {
    padding: 15px 0;
    border-bottom: 1px solid var(--oem-border);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.oem-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
}

@media (max-width: 1024px) {
    .oem-header-content {
        gap: 15px;
        /* Reduce gap to prevent horizontal overflow */
    }
}

@media (max-width: 480px) {
    .oem-header-content {
        gap: 10px;
    }
}

/* Logo */
.oem-header-logo {
    max-width: 300px;
    overflow: hidden;
    flex-shrink: 0;
}

.oem-header-logo a {
    display: block;
    text-decoration: none;
}

.oem-logo-text {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
}

.oem-header-logo img,
.oem-header-logo svg {
    height: 40px;
    width: auto;
    display: block;
}

/* ============================================
   NAVIGATION SYSTEM (Rebuilt)
   ============================================ */

/* 1. Base Reset */
.oem-header-nav,
.oem-nav-menu {
    flex: 1;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

/* Menu Alignment Classes */
.oem-header-nav.oem-menu-left {
    justify-content: flex-start;
}

.oem-header-nav.oem-menu-center {
    justify-content: center;
}

.oem-header-nav.oem-menu-right {
    justify-content: flex-end;
}

.oem-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 5px;
}

.oem-menu li {
    position: relative;
    list-style: none;
}

.oem-menu a {
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
}

/* 2. Toggle Button (Hidden by default, shown on mobile) – yüksek özgüllük: Elementor button stillerini ezmesin */
.oem-header button.oem-submenu-toggle,
.oem-header .oem-nav-menu button.oem-submenu-toggle {
    display: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    color: inherit !important;
    box-shadow: none !important;
}
.oem-submenu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

/* ============================================
   DESKTOP STYLES (min-width: 992px)
   ============================================ */
@media (min-width: 992px) {

    /* Top Level Items */
    .oem-header-nav .oem-menu>li>a {
        padding: 10px 16px;
        color: var(--oem-header-text, #fff);
        font-size: 15px;
        font-weight: 500;
        border-radius: 6px;
        position: relative;
        white-space: nowrap;
    }

    /* Top Level Hover Effect (Underline) */
    .oem-header-nav .oem-menu>li>a::before {
        content: '';
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: var(--oem-color-accent, #d4af37);
        transition: width 0.3s ease, opacity 0.3s ease;
        opacity: 0;
        border-radius: 2px;
    }

    .oem-header-nav .oem-menu>li:hover>a::before,
    .oem-header-nav .oem-menu>li.current-menu-item>a::before {
        width: 20px;
        opacity: 1;
    }

    .oem-header-nav .oem-menu>li:hover>a,
    .oem-header-nav .oem-menu>li.current-menu-item>a {
        color: var(--oem-header-hover, #ffffff);
        background: var(--oem-accent-bg-10, rgba(255, 255, 255, 0.05));
    }

    /* Dropdown Menus (Pure CSS) */
    .oem-header-nav .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 260px;
        background: var(--oem-header-bg-scrolled, #1a1a1a);
        padding: 10px 0;
        border-radius: 12px;
        border: 1px solid var(--oem-border-color, rgba(255, 255, 255, 0.1));
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        z-index: 1000;
        pointer-events: none;
        /* Prevent accidental clicks when hidden */
    }

    /* Nested Dropdowns (Level 2+) */
    .oem-header-nav .sub-menu .sub-menu {
        top: 0;
        left: 100%;
        margin-left: 10px;
        /* Spacing from parent */
        margin-top: -10px;
        /* Align with parent item */
    }

    /* Show Dropdown on Hover/Focus */
    .oem-header-nav li:hover>.sub-menu,
    .oem-header-nav li:focus-within>.sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Dropdown Items */
    .oem-header-nav .sub-menu li {
        width: 100%;
    }

    .oem-header-nav .sub-menu a {
        padding: 10px 20px;
        font-size: 14px;
        color: var(--oem-text-bright, #e0e0e0);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .oem-header-nav .sub-menu a:hover {
        background: var(--oem-accent-bg-10, rgba(255, 255, 255, 0.05));
        color: var(--oem-color-accent, #d4af37);
        padding-left: 24px;
        /* Slide effect */
    }

    /* Dropdown Arrow (Desktop) */
    .oem-header-nav .menu-item-has-children>a::after {
        content: '';
        display: inline-block;
        margin-left: 8px;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid currentColor;
        opacity: 0.7;
    }

    /* Nested Dropdown Arrow (Right) */
    .oem-header-nav .sub-menu .menu-item-has-children>a::after {
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 4px solid currentColor;
        border-right: 0;
    }

    /* Mega Menu Columns (Desktop Only) */
    .oem-header-nav .oem-menu>li>.sub-menu.sub-menu-cols-2 {
        width: 460px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 15px;
    }

    .oem-header-nav .oem-menu>li>.sub-menu.sub-menu-cols-3 {
        width: 680px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0 15px;
    }

    .oem-header-nav .oem-menu>li>.sub-menu.sub-menu-cols-2>li,
    .oem-header-nav .oem-menu>li>.sub-menu.sub-menu-cols-3>li {
        width: auto;
    }
}

/* ============================================
   MOBILE & TABLET STYLES (max-width: 991px)
   ============================================ */
@media (max-width: 991px) {

    /* Hide desktop nav */
    .oem-header-nav {
        display: none !important;
    }

    /* Mobile Menu Container matches JS overlay */
    .oem-nav-menu .oem-menu {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .oem-nav-menu li {
        width: 100%;
        position: relative;
        /* Required for absolute toggle button */
        border-bottom: 1px solid var(--oem-border-color, rgba(255, 255, 255, 0.05));
    }

    .oem-nav-menu li:last-child {
        border-bottom: none;
    }

    /* Mobile Links */
    .oem-nav-menu a {
        display: block;
        /* Ensure full width for click target */
        padding: 15px 0;
        font-size: 16px;
        font-weight: 500;
        color: var(--oem-header-text, #fff);
        width: calc(100% - 44px);
        /* Leave exact space for toggle button */
        text-decoration: none;
    }

    .oem-nav-menu a:hover {
        color: var(--oem-color-accent, #d4af37);
        padding-left: 5px;
    }

    /* Mobile Toggle Button – yüksek özgüllük: Elementor button hover/active ezmesin */
    .oem-header .oem-nav-menu button.oem-submenu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        width: 44px;
        height: 50px;
        z-index: 10;
        font-size: 20px;
        transition: transform 0.3s ease;
        color: var(--oem-text-muted, #888);
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .oem-header .oem-nav-menu button.oem-submenu-toggle:hover,
    .oem-header .oem-nav-menu button.oem-submenu-toggle.active {
        color: var(--oem-color-accent, #d4af37) !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .oem-header .oem-nav-menu button.oem-submenu-toggle.active {
        transform: rotate(180deg);
    }

    .oem-submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        width: 44px;
        height: 50px;
        z-index: 10;
        font-size: 20px;
        transition: transform 0.3s ease;
        color: var(--oem-text-muted, #888);
    }

    .oem-submenu-toggle:hover,
    .oem-submenu-toggle.active {
        color: var(--oem-color-accent, #d4af37);
    }

    .oem-submenu-toggle.active {
        transform: rotate(180deg);
    }

    /* Accordion Logic */
    .oem-nav-menu .sub-menu {
        display: none;
        /* Hidden by default */
        padding-left: 15px;
        background: rgba(0, 0, 0, 0.2);
        margin-bottom: 10px;
        border-radius: 8px;
    }

    .oem-nav-menu .sub-menu.active {
        display: block;
        /* Shown via JS */
        animation: slideDown 0.3s ease;
    }

    .oem-nav-menu .sub-menu li {
        border-bottom: none;
        /* No borders in submenus */
    }

    .oem-nav-menu .sub-menu a {
        font-size: 14px;
        padding: 12px 0;
        opacity: 0.9;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Actions */
.oem-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    overflow: visible;
}

/* Arama dropdown kesilmesin */
.oem-header-search {
    position: relative;
    overflow: visible;
}

.oem-header-search .oem-search-minimal {
    overflow: visible;
}

/* Quick Contact CTA – gradient marka paletinden (--oem-cta-gradient) */
.oem-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--oem-cta-gradient);
    color: #0b1c3d;
    padding: 0 16px;
    height: 44px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.oem-header-cta:hover,
.oem-header-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    background: var(--oem-cta-gradient);
    filter: brightness(1.12);
    outline: none;
}

.oem-header-cta:focus-visible {
    outline: 2px solid var(--oem-gold);
    outline-offset: 2px;
}

.oem-header-cta svg {
    flex-shrink: 0;
}

.oem-header-cta .cta-text {
    white-space: nowrap;
    display: inline-block;
}

@media (max-width: 991px) {
    .oem-header-cta .cta-text {
        display: none !important;
    }

    .oem-header-cta {
        padding: 0;
        width: 44px;
        border-radius: 50%;
    }

    .oem-header-cta svg {
        margin: 0 !important;
        width: 20px;
        height: 20px;
    }
}

/* Mobile Toggle - High Specificity Protection */
body .oem-header .oem-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--oem-border) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    padding: 0;
    align-items: center;
    transition: all 0.3s ease;
}

@media (max-width: 991px) {
    body .oem-header .oem-mobile-toggle {
        display: flex !important;
    }
}

body .oem-header .oem-mobile-toggle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--oem-gold) !important;
}

body .oem-header .oem-mobile-toggle:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.15) !important;
}

body .oem-header .oem-mobile-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: var(--oem-gold) !important;
    border-radius: 2px !important;
    transition: all 0.3s;
}

body .oem-header .oem-mobile-toggle:focus-visible {
    outline: 2px solid var(--oem-gold) !important;
    outline-offset: 2px;
}

.oem-mobile-close:focus-visible {
    outline: 2px solid var(--oem-gold) !important;
    outline-offset: 2px;
}

/* ============================================
   MOBILE MENU
   ============================================
   JS ile tamamlanmalı: aria-expanded (menü açık/kapalı), role="menu"/"menuitem",
   gizli panellerde aria-hidden="true" (visibility/height hack screen reader’da hâlâ “var”). */
.oem-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    /* Dynamic viewport height for mobile browsers */
    z-index: var(--oem-z-index-mobile);
    visibility: hidden;
    transition: visibility 0.3s;
    pointer-events: none;
    /* Kapalıyken ana içeriği engellemesin */
}

.oem-mobile-menu.active {
    visibility: visible;
    pointer-events: auto;
}

.oem-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.3s;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: var(--oem-z-index-mobile);
}

.oem-mobile-menu.active .oem-mobile-overlay {
    opacity: 1;
}

.oem-mobile-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 380px;
    height: 100%;
    background: var(--oem-dark-2);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--oem-border);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    /* Prevent footer from going outside */
    z-index: calc(var(--oem-z-index-mobile) + 1);
    /* Above overlay */
    box-sizing: border-box;
}

.oem-mobile-menu.active .oem-mobile-panel {
    transform: translateX(0);
}

/* Staggered Slide-in Animation for Mobile Items */
.oem-mobile-menu.active .oem-menu>li {
    animation: oemMobileItemFade 0.5s ease forwards;
    opacity: 0;
    transform: translateX(10px);
}

.oem-mobile-menu.active .oem-menu>li:nth-child(1) {
    animation-delay: 0.1s;
}

.oem-mobile-menu.active .oem-menu>li:nth-child(2) {
    animation-delay: 0.15s;
}

.oem-mobile-menu.active .oem-menu>li:nth-child(3) {
    animation-delay: 0.2s;
}

.oem-mobile-menu.active .oem-menu>li:nth-child(4) {
    animation-delay: 0.25s;
}

.oem-mobile-menu.active .oem-menu>li:nth-child(5) {
    animation-delay: 0.3s;
}

.oem-mobile-menu.active .oem-menu>li:nth-child(6) {
    animation-delay: 0.35s;
}

@keyframes oemMobileItemFade {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.oem-mobile-header {
    padding: 20px;
    border-bottom: 1px solid var(--oem-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    box-sizing: border-box;
}

.oem-mobile-header span {
    font-size: 18px;
    font-weight: 600;
    color: var(--oem-gold);
}

.oem-mobile-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--oem-border);
    color: #fff;
    font-size: 28px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.oem-mobile-close:hover {
    background: var(--oem-accent-bg-20);
    color: var(--oem-gold);
}

.oem-mobile-content {
    padding: 0;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    /* Create new stacking context */
}

.oem-mobile-content nav {
    padding: 20px;
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    /* [Cleaned up legacy mobile menu styles] */
}

/* Standard Mobile Menu Footer - Rebuilt and Interactive */
.oem-mobile-footer {
    padding: 20px;
    border-top: 1px solid var(--oem-border, rgba(255, 255, 255, 0.1));
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    max-height: 50vh;
    overflow-y: auto;
    position: relative;
    z-index: 5;
}

.mobile-contact-section {
    margin-bottom: 20px;
}

.mobile-contact-section:last-child {
    margin-bottom: 0;
}

/* Yüksek özgüllük: Elementor/tema h4 stillerinin ezmesini engellemek için */
.oem-mobile-menu .oem-mobile-footer .mobile-contact-section h4.mobile-contact-title,
.oem-mobile-menu h4.mobile-contact-title {
    margin: 0 0 10px 0 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: var(--oem-gold, #d4af37) !important;
    letter-spacing: 1.5px !important;
    opacity: 0.7 !important;
}
.mobile-contact-title {
    margin: 0 0 10px 0;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--oem-gold, #d4af37);
    letter-spacing: 1.5px;
    opacity: 0.7;
}

.mobile-contact-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-contact-link {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--oem-header-text, #fff) !important;
    font-size: 13px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.mobile-contact-link:hover,
.mobile-contact-link:active {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--oem-gold, #d4af37);
    transform: translateX(3px);
    color: #fff !important;
}

.mobile-contact-link i {
    color: var(--oem-gold, #d4af37);
    font-size: 18px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.mobile-contact-link.mobile-contact-wa {
    color: #25D366 !important;
    border-color: rgba(37, 211, 102, 0.2);
}

.mobile-contact-link.mobile-contact-wa i {
    color: #25D366;
}



/* ============================================
   FOOTER – Marka renkleri + profesyonel yapı
   ============================================
   Arka plan ve vurgu: --oem-footer-bg, --oem-footer-accent, --oem-footer-bottom-bg
   (oem_system_generate_color_css ile :root’a yazılıyor)
   ============================================ */

.oem-footer {
    --footer-accent: var(--oem-footer-accent, var(--oem-color-accent, #d4af37));
    --footer-bg: var(--oem-footer-bg, var(--oem-primary-bg, var(--oem-header-bg, #0b1612)));
    --footer-bg-alt: rgba(255, 255, 255, 0.04);
    --footer-bottom-bg: var(--oem-footer-bottom-bg, var(--oem-dark-2, rgba(0, 0, 0, 0.35)));
    --footer-text: var(--oem-text, #e0e0e0);
    --footer-text-muted: rgba(255, 255, 255, 0.65);
    --footer-border: rgba(255, 255, 255, 0.06);

    background: var(--footer-bg);
    color: var(--footer-text);
    position: relative;
    overflow: hidden;
}

.oem-footer-accent-bar {
    height: 3px;
    background: linear-gradient(90deg, var(--footer-accent) 0%, transparent 100%);
    flex-shrink: 0;
}

.oem-footer-main {
    padding: 3.5rem 0 3rem;
    position: relative;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    gap: 3rem 2.5rem;
    align-items: start;
}

.footer-column .footer-title {
    color: var(--oem-header-text, #fff);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    position: relative;
    border-bottom: 1px solid var(--footer-border);
}

.footer-column .footer-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 2.5rem;
    height: 2px;
    background: var(--footer-accent);
}

/* Column 1: Brand & logo */
.footer-brand .footer-logo {
    margin-bottom: 1.25rem;
}

.footer-brand .footer-logo .oem-brand-logo-footer .brand-main,
.footer-brand .footer-logo .brand-main {
    background: linear-gradient(to right, var(--oem-header-text, #fff) 0%, var(--footer-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-brand .footer-logo .oem-brand-logo-footer .brand-sub,
.footer-brand .footer-logo .brand-sub {
    border-top-color: var(--footer-accent);
    color: var(--footer-text-muted);
}

.footer-tagline {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--footer-text-muted);
    margin: 0 0 1.5rem;
    max-width: 280px;
}

.footer-social-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.social-icon-link {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--footer-bg-alt);
    border: 1px solid var(--footer-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--oem-header-text, #fff);
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.social-icon-link .dashicons {
    font-size: 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
}

.social-icon-link:hover {
    background: var(--footer-accent);
    border-color: var(--footer-accent);
    color: #000;
    transform: translateY(-2px);
}

.social-icon-link.social-wa:hover {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}

/* Column 2: Links */
.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-list li {
    margin-bottom: 0.5rem;
}

.footer-nav-list a {
    color: var(--footer-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: inline-block;
}

.footer-nav-list a:hover {
    color: var(--footer-accent);
    padding-left: 4px;
}

/* Column 3: Contact */
.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact-list li,
.footer-contact-list .footer-contact-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: var(--footer-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    align-items: flex-start;
}

.footer-contact-list .dashicons {
    color: var(--footer-accent);
    font-size: 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.footer-contact-list a.contact-text {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-list a.contact-text:hover {
    color: var(--oem-header-text, #fff);
}

/* Column 4: CTA */
.footer-cta-desc,
.footer-cta p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--footer-text-muted);
    margin: 0 0 1.25rem;
}

.oem-btn.oem-btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #25D366;
    color: #fff !important;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background 0.25s ease, transform 0.2s ease;
    border: none;
}

.oem-btn.oem-btn-wa:hover {
    background: #128C7E;
    transform: translateY(-1px);
    color: #fff !important;
}

/* Footer bottom & SEO */
.oem-footer-bottom {
    background: var(--footer-bottom-bg);
    padding: 2.25rem 0;
    border-top: 1px solid var(--footer-border);
}

.footer-seo-wrap {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--footer-border);
    text-align: center;
}

/* Yüksek özgüllük: Elementor h4 stillerinin ezmesini engellemek için */
.oem-footer .footer-seo-wrap h4.footer-seo-title,
body .oem-footer h4.footer-seo-title {
    color: var(--oem-header-text, #fff) !important;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    margin: 0 0 0.75rem !important;
    font-family: inherit !important;
}
.footer-seo-title {
    color: var(--oem-header-text, #fff);
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.footer-seo-text {
    max-width: 56rem;
    margin: 0 auto;
    font-size: 0.8125rem;
    line-height: 1.75;
    color: var(--footer-text-muted);
    opacity: 0.9;
}

.footer-legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--footer-text-muted);
}

/* Uzun copyright metni linkleri alta itmesin; metin sarılsın, linkler sağda kalsın */
.footer-copyright {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    flex-shrink: 0;
}

.footer-bottom-links a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-bottom-links a:hover {
    color: var(--oem-header-text, #fff);
}

.footer-bottom-links a.oem-credit:hover {
    color: var(--footer-accent);
}

/* Responsive */
@media (max-width: 1200px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .footer-container {
        padding: 0 1.25rem;
    }

    .oem-footer-main {
        padding: 2.5rem 0 2rem;
    }

    .footer-legal {
        flex-direction: column;
        text-align: center;
    }

    .footer-bottom-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .footer-legal {
        font-size: 0.75rem;
    }

    .footer-bottom-links {
        gap: 1rem;
    }
}


@media (max-width: 480px) {
    .oem-header-logo {
        max-width: 150px;
    }

    .oem-header-logo img {
        height: 28px;
    }
}

/* Elementor override – header/footer yazıları bizim kalsın */
body .oem-header .am-text-logo .brand-main,
body .oem-header .am-text-logo .brand-sub,
body .oem-header .oem-menu a,
body .oem-header .oem-topbar-link,
body .oem-header .oem-header-cta {
    font-family: inherit !important;
}

body .oem-header .oem-header-cta,
body .oem-header .oem-header-cta .cta-text {
    color: #0b1c3d !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
}

body .oem-header .oem-header-cta:hover,
body .oem-header .oem-header-cta:focus-visible {
    color: #0b1c3d !important;
}

body .oem-header .am-text-logo .brand-main {
    background: linear-gradient(to right, var(--oem-header-text, #fff) 0%, var(--oem-color-accent) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body .oem-header .am-text-logo .brand-sub {
    color: var(--oem-text, #88928d) !important;
    border-top-color: var(--oem-gold-border, var(--oem-accent-bg-25)) !important;
}

body .oem-footer .footer-seo-title,
body .oem-footer .footer-title,
body .oem-footer .footer-logo span,
body .oem-footer .footer-contact-item,
body .oem-footer .footer-copyright {
    font-family: inherit !important;
}

@media print {
    .oem-header {
        position: static !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .oem-topbar,
    .oem-header-actions,
    .oem-mobile-toggle,
    .oem-mobile-menu,
    .oem-footer-seo {
        display: none !important;
    }
}

/* ============================================
   MOBILE MENU CONTAINER STYLES (REQUIRED)
   ============================================ */
.oem-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.oem-mobile-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.oem-mobile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    transition: opacity 0.3s ease;
}

.oem-mobile-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 320px;
    height: 100%;
    background: var(--oem-header-bg-scrolled, #0f1115);
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
}

.oem-mobile-menu.active .oem-mobile-panel {
    transform: translateX(0);
}

.oem-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--oem-border-color, rgba(255, 255, 255, 0.1));
}

.oem-mobile-header span {
    font-size: 18px;
    font-weight: 700;
    color: var(--oem-header-text, #fff);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.oem-mobile-close {
    background: none;
    border: none;
    color: var(--oem-header-text, #fff);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.oem-mobile-close:hover {
    color: var(--oem-color-accent, #d4af37);
}

.oem-mobile-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}