/* ==========================================================================
   Teknotech Dedicated Mobile Stylesheet (v5 - Absolute Viewport & Text Centering)
   Location: mobile/mobile-style.css
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* HEADER ACTIONS, BTN-HEADER & MOBILE TOGGLE EQUALIZATION */
    .header-actions {
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }

    .btn-header {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }


    /* HIDE ALL CATALOG SIDEBAR FILTERS & FILTER BOXES ON MOBILE */
    aside.catalog-sidebar,
    .catalog-sidebar,
    .filter-box,
    .filter-header,
    .filter-body,
    .filter-search,
    .filter-option {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .catalog-layout {
        padding-top: 15px !important;
        padding-bottom: 40px !important;
    }


    /* 1. PREVENT PAGE HORIZONTAL SCROLL & OVER-WIDE CANVAS */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* 2. HEADER & LOGO MOBILE OVERRIDES */
    .logo,
    header .logo {
        display: flex !important;
        align-items: center !important;
    }

    .logo img,
    header .logo img,
    header.scrolled .logo img {
        height: 55px !important;
        max-height: 60px !important;
        width: auto !important;
        transform: none !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* HIDE HEADER LANG SELECTOR ON MOBILE NAVBAR (INCLUDED IN HAMBURGER MENU) */
    .header-actions .lang-selector {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mega-menu,
    .mega-menu-single,
    .mega-menu.solutions-mega {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        transform: none !important;
    }

    /* MOBILE SEAMLESS INTEGRATED HERO BACKGROUND VIDEO (FULL BLEED ZERO BLACK BARS) */
    #home.hero-split-section,
    section#home,
    .hero-split-section {
        position: relative !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-height: calc(100vh - 120px) !important;
        min-height: calc(100dvh - 120px) !important;
        height: auto !important;
        padding: 85px 16px 30px 16px !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: #090e1a !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    #home .container,
    #home .hero-split-grid,
    .hero-split-section .container,
    .hero-split-section .hero-split-grid {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        border: none !important;
    }

    .hero-right-video {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
        overflow: hidden !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .hero-video-wrapper {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        border: none !important;
        background: #090e1a !important;
        background-image: none !important;
    }

    .hero-video-wrapper img {
        display: none !important;
        visibility: hidden !important;
    }

    .hero-split-video {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        opacity: 0.85 !important;
        filter: brightness(0.9) contrast(1.05) !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        transform: scale(1.03) !important;
    }

    #home.hero-split-section::after,
    .hero-split-section::after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(180deg, rgba(9, 14, 26, 0.75) 0%, rgba(9, 14, 26, 0.35) 50%, rgba(9, 14, 26, 0.85) 100%) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    .hero-left-content {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 10px 0 !important;
        text-align: center !important;
        border-radius: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .hero-title-split {
        font-size: 2.0rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        letter-spacing: -0.3px !important;
        margin-bottom: 16px !important;
        color: #ffffff !important;
        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9), 0 1px 4px rgba(0, 0, 0, 0.95) !important;
    }

    .hero-desc-split {
        font-size: 0.88rem !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.82) !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        padding: 0 4px !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
    }

    .hero-left-actions,
    .btn-hero-split-cta {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    video.hero-background-video,
    .hero-background-video {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        z-index: 0 !important;
    }

    .container.hero-content-center,
    .hero-content-center {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Hero Badges Centering */
    .hero-badges-home {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 0 12px 0 !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .hero-badge-home {
        font-size: 0.68rem !important;
        padding: 4px 8px !important;
        border-radius: 12px !important;
        white-space: nowrap !important;
        background: rgba(255, 255, 255, 0.12) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        color: #f8fafc !important;
    }

    /* Hero Heading 1 Perfect Mobile Centering & Scaling */
    .hero-content-center h1,
    .container.hero-content-center h1,
    #home h1 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
        font-size: 1.35rem !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        letter-spacing: -0.2px !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Hero Paragraph Perfect Mobile Centering */
    .hero-content-center p,
    .container.hero-content-center p,
    #home p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 18px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Buttons Centering & Stack */
    .hero-buttons.center-buttons,
    .center-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

    .hero-buttons.center-buttons .btn,
    .center-buttons .btn {
        width: 100% !important;
        max-width: 270px !important;
        text-align: center !important;
        padding: 11px 18px !important;
        box-sizing: border-box !important;
        font-size: 0.9rem !important;
        margin: 0 auto !important;
    }

    
    /* HIDE CATALOG SIDEBAR FILTERS ON MOBILE AS REQUESTED BY USER */
    .catalog-sidebar,
    .filter-box {
        display: none !important;
    }

    .catalog-layout {
        padding-top: 20px !important;
        padding-bottom: 40px !important;
    }

    /* 4. HOME GRIDS RESPONSIVENESS */
    .trust-stripe-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .solutions-grid-home {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .products-grid-home {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .brands-grid-home {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* Extra Small Mobile Viewports (<= 400px) */
@media screen and (max-width: 400px) {
    .hero-content-center h1,
    .container.hero-content-center h1,
    #home h1 {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
    }

    .hero-content-center p,
    .container.hero-content-center p,
    #home p {
        font-size: 0.8rem !important;
        line-height: 1.45 !important;
    }
}

/* ==========================================================================
   PREMIUM FULL-SCREEN MOBILE OVERLAY MENU & DIL SECIMI
   ========================================================================== */
@media screen and (max-width: 991px) {

    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

    .mobile-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 1.3rem !important;
        color: var(--primary-brand) !important;
        cursor: pointer !important;
        z-index: 100001 !important;
        background: rgba(43, 22, 138, 0.06) !important;
        border-radius: 10px !important;
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
    }

    .mobile-toggle.active-close {
        position: fixed !important;
        top: 16px !important;
        right: 16px !important;
        width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        font-size: 0.95rem !important;
        color: #0f172a !important;
        background: rgba(255, 255, 255, 0.75) !important;
        border: 1px solid rgba(15, 23, 42, 0.15) !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
        z-index: 100002 !important;
    }

    .nav-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: rgba(240, 246, 255, 0.72) !important;
        backdrop-filter: blur(0px) saturate(100%) !important;
        -webkit-backdrop-filter: blur(0px) saturate(100%) !important;
        z-index: 100000 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 55px 22px 22px 22px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-24px) scale(0.96) !important;
        transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                    backdrop-filter 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                    -webkit-backdrop-filter 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                    visibility 0.65s !important;
        overflow: hidden !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .nav-menu.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
        backdrop-filter: blur(28px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    }

    /* STAGGERED ULTRA-PREMIUM ENTRANCE ANIMATIONS FOR MENU ITEMS */
    .mobile-menu-brand-header,
    .nav-menu .main-menu > li,
    .mobile-menu-footer {
        opacity: 0 !important;
        transform: translateY(-14px) !important;
        transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .nav-menu.active .mobile-menu-brand-header {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition-delay: 0.12s !important;
    }

    .nav-menu.active .main-menu > li:nth-child(1) { opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.18s !important; }
    .nav-menu.active .main-menu > li:nth-child(2) { opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.24s !important; }
    .nav-menu.active .main-menu > li:nth-child(3) { opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.30s !important; }
    .nav-menu.active .main-menu > li:nth-child(4) { opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.36s !important; }
    .nav-menu.active .main-menu > li:nth-child(5) { opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.42s !important; }

    .nav-menu.active .mobile-menu-footer {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition-delay: 0.48s !important;
    }

    /* TOP ENGINEERING BRAND HEADER SIGNATURE TAG */
    .mobile-menu-brand-header {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 18px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
        width: 100% !important;
    }

    .mobile-menu-brand-header .red-accent-line {
        width: 3px !important;
        height: 14px !important;
        background: var(--accent-red) !important;
        border-radius: 2px !important;
        display: inline-block !important;
    }

    .mobile-menu-brand-header .brand-tag-text {
        font-size: 0.65rem !important;
        font-weight: 800 !important;
        letter-spacing: 1.8px !important;
        color: #475569 !important;
        text-transform: uppercase !important;
    }

    /* FLAT CLEAN NAVIGATION ROWS & THIN SEPARATORS */
    .nav-menu .main-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .mobile-only-home {
        display: block !important;
    }

    .nav-menu .main-menu > li {
        width: 100% !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
        padding-bottom: 2px !important;
        margin-bottom: 2px !important;
    }

    .nav-menu .main-menu > li:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }

    .nav-menu .main-menu > li > a {
        display: flex !important;
        align-items: center !important;
        padding: 12px 6px !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        text-decoration: none !important;
        border-radius: 8px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        transition: all 0.2s ease !important;
    }

    .nav-menu .main-menu > li > a .menu-icon,
    .nav-menu .main-menu > li > a i {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        margin: 0 !important;
    }

    /* REMOVE ALL RED UNDERLINES & RED BORDERS ON MOBILE HAMBURGER MENU */
    .nav-menu .main-menu > li > a::after,
    .nav-menu .main-menu > li > a::before,
    .nav-menu .main-menu > li > a:hover::after,
    .nav-menu .main-menu > li > a.active::after {
        display: none !important;
        content: none !important;
        width: 0 !important;
        height: 0 !important;
        border: none !important;
    }

    .nav-menu .main-menu > li > a:hover,
    .nav-menu .main-menu > li > a:active,
    .nav-menu .main-menu > li > a.active {
        color: #0f172a !important;
        background: rgba(255, 255, 255, 0.55) !important;
        padding-left: 6px !important;
        border-left: none !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Hide Sub-menu Accordion & Chevron Arrow on Mobile (Direct navigation to bayilikler.html) */
    .nav-menu .has-dropdown > a i.fa-chevron-down,
    .nav-menu .mega-menu,
    .nav-menu .has-dropdown.open .mega-menu {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* MOBILE MENU FOOTER (Language Selector & Compact CTA Button) */
    .mobile-menu-footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 10px !important;
        padding-top: 14px !important;
        border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
        width: 100% !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .mobile-lang-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .mobile-lang-title {
        font-size: 0.72rem !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        color: #475569 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-weight: 700 !important;
    }

    .mobile-lang-pills {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .mobile-lang-pills .lang-pill {
        flex: 1 !important;
        padding: 7px 0 !important;
        text-align: center !important;
        justify-content: center !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        background: rgba(255, 255, 255, 0.65) !important;
        border: 1px solid rgba(15, 23, 42, 0.12) !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        display: inline-flex !important;
        box-shadow: none !important;
    }

    .mobile-lang-pills .lang-pill.active,
    .mobile-lang-pills .lang-pill:hover {
        background: var(--accent-red) !important;
        color: #ffffff !important;
        border-color: var(--accent-red) !important;
        box-shadow: 0 3px 10px rgba(230, 0, 0, 0.3) !important;
    }

    .mobile-menu-teklif-btn {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 10px 16px !important;
        background: linear-gradient(135deg, var(--accent-red), #c40000) !important;
        color: #ffffff !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        box-shadow: 0 4px 14px rgba(230, 0, 0, 0.3) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        visibility: visible !important;
        height: auto !important;
    }

    .mobile-menu-teklif-btn i {
        font-size: 0.82rem !important;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .mobile-menu-teklif-btn:hover i,
    .mobile-menu-teklif-btn:active i {
        transform: translateX(5px) !important;
    }

    /* HIDE FLOATING WHATSAPP BUTTON WHEN HAMBURGER MENU IS OPEN */
    body.menu-open .whatsapp-float {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }


    /* ==========================================================================
       MOBILE TIMELINE & GELİŞİM YOLCULUĞU FIX (PERFECT VERTICAL SCROLL ANIMATION)
       ========================================================================== */
    .horizontal-scroll-section {
        height: auto !important;
        padding: 60px 0 80px 0 !important;
        background: #080c17 !important;
        overflow: hidden !important;
    }

    .hs-sticky-container {
        position: static !important;
        height: auto !important;
        overflow: visible !important;
        display: block !important;
    }

    .horizontal-scroll-section .container {
        position: static !important;
        transform: none !important;
        margin-bottom: 25px !important;
    }

    .hs-track-wrapper {
        margin-top: 25px !important;
        padding: 0 15px !important;
        position: relative !important;
    }

    /* Vertical Timeline Accent Line for Mobile */
    .hs-track-wrapper::before {
        content: '' !important;
        position: absolute !important;
        top: 20px !important;
        bottom: 20px !important;
        left: 28px !important;
        width: 3px !important;
        background: linear-gradient(to bottom, rgba(230, 0, 0, 0.9), rgba(230, 0, 0, 0.2)) !important;
        z-index: 1 !important;
    }

    .hs-track {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        padding: 0 !important;
        width: 100% !important;
        transform: none !important;
    }

    .hs-card {
        position: relative !important;
        width: 100% !important;
        padding-left: 50px !important;
        box-sizing: border-box !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Red Glowing Dot for Each Mobile Year */
    .hs-year {
        font-size: 2rem !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        margin-bottom: 12px !important;
        padding-left: 0 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        opacity: 0.4 !important;
        transition: all 0.4s ease !important;
    }

    .hs-year::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: -33px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 18px !important;
        height: 18px !important;
        border-radius: 50% !important;
        background: #080c17 !important;
        border: 3px solid rgba(255, 255, 255, 0.3) !important;
        z-index: 5 !important;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    .hs-content {
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 14px !important;
        padding: 22px !important;
        backdrop-filter: blur(12px) !important;
        opacity: 0.35 !important;
        transform: translateY(20px) scale(0.97) !important;
        transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    }

    .hs-content h4 {
        font-size: 1.2rem !important;
        color: #ffffff !important;
        margin-bottom: 10px !important;
        font-weight: 700 !important;
    }

    .hs-content p {
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }

    /* ACTIVE MOBILE CARD ANIMATION STATE */
    .hs-card.active-hs .hs-year {
        opacity: 1 !important;
        color: #ffffff !important;
        transform: scale(1.04) !important;
    }

    .hs-card.active-hs .hs-year::before {
        border-color: var(--accent-red) !important;
        background: var(--accent-red) !important;
        box-shadow: 0 0 18px rgba(230, 0, 0, 0.9), 0 0 8px #ffffff !important;
        transform: translateY(-50%) scale(1.25) !important;
    }

    /* HIDE BREADCRUMBS NAVIGATION EXCLUSIVELY ON MOBILE */
    .breadcrumb,
    .breadcrumb.compact,
    .breadcrumb-container,
    .breadcrumbs,
    nav.breadcrumb {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /* Set 140px top padding for all hero sections on mobile (Fixed Header Clearance) */
    .brand-hero-section,
    .brand-hero,
    .page-hero,
    .category-hero,
    .cozum-hero,
    .hero-section-compact,
    .catalog-layout,
    .catalog-hero,
    .about-hero,
    .about-hero-section,
    .contact-hero,
    .contact-hero-section,
    .blog-hero,
    .blog-hero-section,
    .quote-page-hero,
    .solution-hero,
    .prod-detail-hero,
    .breadcrumb + .brand-hero-section,
    .breadcrumb.compact + .brand-hero-section,
    .breadcrumb-container + .brand-hero-section,
    .breadcrumb + .catalog-hero,
    .breadcrumb-container + .catalog-hero,
    .breadcrumb + .page-hero,
    .breadcrumb-container + .page-hero,
    .breadcrumb + .category-hero,
    .breadcrumb-container + .category-hero,
    .breadcrumb + .cozum-hero,
    .breadcrumb-container + .cozum-hero,
    .breadcrumb + .about-hero-section,
    .breadcrumb-container + .about-hero-section,
    .breadcrumb + .contact-hero-section,
    .breadcrumb-container + .contact-hero-section,
    .breadcrumb + .blog-hero-section,
    .breadcrumb-container + .blog-hero-section {
        padding-top: 140px !important;
    }

    /* ==========================================================================
       MOBILE AUTOMATIC PRODUCT SLIDER CAROUSEL (5-Sec Interval & Left/Right Arrows)
       ========================================================================== */
    .mobile-product-slider-wrapper {
        position: relative !important;
        width: 100% !important;
        overflow: hidden !important;
        padding-bottom: 0 !important;
    }

    .products-grid-home {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        width: 100% !important;
        transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1) !important;
        will-change: transform !important;
    }

    .products-grid-home .product-group-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 26px 20px !important;
        margin: 0 !important;
    }

    .mobile-slider-controls {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: absolute !important;
        top: 50% !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateY(-50%) !important;
        padding: 0 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
        z-index: 10 !important;
    }

    .slider-arrow {
        pointer-events: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(43, 22, 138, 0.15) !important;
        color: var(--primary-brand) !important;
        font-size: 1.1rem !important;
        cursor: pointer !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
        transition: all 0.25s ease !important;
        outline: none !important;
    }

    .slider-arrow:active {
        transform: scale(0.92) !important;
        background: var(--accent-red) !important;
        color: #ffffff !important;
        border-color: var(--accent-red) !important;
    }

    .slider-dots {
        display: none !important;
    }

    /* ==========================================================================
       MOBILE TRUST STRIPE VERTICAL ANIMATED TICKER (2.5 SECONDS PER CARD)
       ========================================================================== */
    .trust-stripe-section {
        padding: 12px 16px !important;
        background: #ffffff !important;
        background-image: none !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .trust-stripe-grid {
        display: block !important;
        position: relative !important;
        height: 60px !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .trust-card {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(22px) scale(0.97) !important;
        transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
        pointer-events: none !important;
    }

    .trust-card.trust-active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
        z-index: 2 !important;
    }

    .trust-card.trust-exit {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-22px) scale(0.97) !important;
        z-index: 1 !important;
    }

    .trust-card-icon {
        font-size: 1.5rem !important;
        color: var(--accent-red) !important;
        flex-shrink: 0 !important;
    }

    .trust-card-content {
        flex-grow: 1 !important;
    }

    .trust-card-content h4 {
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        color: var(--text-main) !important;
        margin-bottom: 2px !important;
    }

    .trust-card-content p {
        font-size: 0.78rem !important;
        color: var(--text-light) !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    /* ==========================================================================
       MOBILE BRANDS NAVBAR 4x2 GRID LAYOUT FIX
       ========================================================================== */
    .brands-navbar {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px !important;
        border-radius: 16px !important;
        background: rgba(15, 22, 36, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        margin: 0 auto 30px auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .brand-nav-item {
        padding: 9px 4px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        text-align: center !important;
        border-radius: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        color: rgba(255, 255, 255, 0.55) !important;
        border: 1px solid transparent !important;
        background: transparent !important;
        transition: all 0.25s ease !important;
    }

    .brand-nav-item.active {
        color: #ffffff !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)) !important;
        border: 1px solid rgba(255, 255, 255, 0.35) !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    .brand-nav-indicator {
        display: none !important;
    }

    /* ==========================================================================
       MOBILE BRAND SHOWCASE SLIDE CONTAINER & ZERO DEAD-SPACE COMPACT LAYOUT
       ========================================================================== */
    /* ==========================================================================
       MOBILE BRAND SHOWCASE SLIDE CONTAINER & ZERO DEAD-SPACE COMPACT LAYOUT
       ========================================================================== */
    .brands-slider-viewport {
        height: auto !important;
        min-height: auto !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
        overflow: hidden !important;
    }

    .brands-slider-track {
        display: block !important;
        height: auto !important;
        min-height: auto !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }

    .brand-slide-panel {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        grid-area: auto !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .brand-slide-panel.active {
        display: block !important;
        height: auto !important;
        min-height: auto !important;
        grid-area: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        padding: 24px 18px !important;
        box-sizing: border-box !important;
    }

    .brand-slide-flex {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        align-items: stretch !important;
    }

    .brand-panel-left {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        flex: none !important;
    }

    .brand-stage-container {
        max-width: 240px !important;
        height: 72px !important;
        padding: 10px 18px !important;
        margin: 0 auto 12px auto !important;
        border-radius: 12px !important;
    }

    .brand-stage-logo {
        max-height: 44px !important;
    }

    .brand-stage-desc {
        font-size: 0.84rem !important;
        line-height: 1.45 !important;
        color: #475569 !important;
        margin-bottom: 14px !important;
        text-align: center !important;
    }

    .brand-action-area {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    .btn-red-showcase {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
    }

    .brand-panel-divider {
        display: block !important;
        width: 100% !important;
        height: 1px !important;
        min-height: 1px !important;
        background: #e2e8f0 !important;
        margin: 6px 0 !important;
    }

    .brand-panel-right.brand-authority-panel {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 10px 0 0 0 !important;
        background: transparent !important;
        border-top: none !important;
        margin-top: 0 !important;
        text-align: left !important;
    }

    .brand-authority-label {
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        margin-bottom: 6px !important;
        display: block !important;
        text-align: left !important;
    }

    .brand-stat-hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
        margin-bottom: 8px !important;
        text-align: left !important;
    }

    .brand-stat-number {
        font-size: 46px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: -1.5px !important;
        margin-bottom: 4px !important;
        display: block !important;
    }

    .brand-stat-title {
        font-size: 0.85rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
        line-height: 1.25 !important;
        display: block !important;
        text-align: left !important;
    }

    .brand-stat-desc {
        font-size: 0.82rem !important;
        color: #475569 !important;
        line-height: 1.45 !important;
        margin-bottom: 12px !important;
        text-align: left !important;
    }

    .brand-authority-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        border-top: 1px solid #f1f5f9 !important;
        padding-top: 12px !important;
        width: 100% !important;
    }

    .brand-authority-item {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        padding: 2px 0 2px 12px !important;
        background: transparent !important;
        border-left-width: 2px !important;
        border-left-style: solid !important;
        border-radius: 0 !important;
        text-align: left !important;
    }

    .brand-item-tag {
        font-size: 0.68rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        display: block !important;
        text-align: left !important;
    }

    .brand-item-text {
        font-size: 0.78rem !important;
        color: #64748b !important;
        line-height: 1.35 !important;
        display: block !important;
        text-align: left !important;
    }

    /* HIDE BLOG HERO "TÜMÜ" BUTTON ON MOBILE */
    .blog-hero-text .hero-buttons,
    .blog-hero-split .hero-buttons {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /* ==========================================================================
       MOBILE BLOG CATEGORY FILTERS - HORIZONTAL SWIPEABLE PILLS (SINGLE ROW)
       ========================================================================== */
    .category-filters {
        padding: 12px 0 !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        overflow: hidden !important;
    }

    .category-filters .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
    }

    .filter-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 4px 6px 8px 6px !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .filter-list::-webkit-scrollbar {
        display: none !important;
    }

    .filter-list li {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        list-style: none !important;
    }

    .filter-chip {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 16px !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        border-radius: 30px !important;
        background: #f1f5f9 !important;
        color: #475569 !important;
        border: 1px solid #e2e8f0 !important;
        white-space: nowrap !important;
        transition: all 0.2s ease !important;
    }

    .filter-chip.active,
    .filter-chip:hover {
        background: var(--accent-red) !important;
        color: #ffffff !important;
        border-color: var(--accent-red) !important;
        box-shadow: 0 4px 12px rgba(230, 0, 0, 0.3) !important;
    }
}





    /* MOBILE TEAM CARDS & MODAL STYLING */
    .team-modal-dialog {
        width: 94vw !important;
        max-width: 94vw !important;
        padding: 24px 16px !important;
        margin: auto !important;
    }

    .team-modal-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }