/* ==========================================================================
   Reel Alüminyum - Mobile-Only Dedicated UI/UX Stylesheet
   STRICTLY ISOLATED: Only applies to screens <= 991.98px (Tablet & Mobile)
   Desktop (>= 992px) is 100% UNTOUCHED and preserved.
   ========================================================================== */

@media (max-width: 991.98px) {
    /* --------------------------------------------------------------------------
       1. Mobile Header & Quick Action Bar
       -------------------------------------------------------------------------- */
    .menu-header-transparent {
        padding: 4px 0 !important;
    }

    .menu-container-wide {
        margin-top: 8px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .menu-header-logo img {
        height: 32px !important;
        width: auto !important;
    }

    .menu-header-logo.menu-mr-40 {
        margin-right: 0 !important;
    }

    .menu-header-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .menu-header-mobile-actions {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Mobile Language Dropdown Pill */
    .menu-mobile-lang {
        position: relative !important;
        display: inline-flex !important;
        flex-shrink: 0 !important;
    }

    .menu-mobile-lang-btn {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        height: 36px !important;
        padding: 0 9px !important;
        margin: 0 !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        color: var(--dark-gray) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        line-height: normal !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
    }

    .menu-mobile-lang-btn .menu-lang-flag-box {
        width: 18px !important;
        height: 13px !important;
        border-radius: 2px !important;
        overflow: hidden !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
        line-height: 1 !important;
    }

    .menu-mobile-lang-btn .menu-flag-icon {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .menu-mobile-lang-btn .menu-lang-code {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #111111 !important;
        letter-spacing: 0.04em !important;
        white-space: nowrap !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
    }

    .menu-mobile-lang-btn .menu-lang-arrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0.6 !important;
        transition: transform 0.2s ease !important;
        flex-shrink: 0 !important;
        margin-left: 1px !important;
    }

    .menu-mobile-lang.is-open .menu-mobile-lang-btn .menu-lang-arrow {
        transform: rotate(180deg) !important;
        opacity: 1 !important;
    }

    .menu-mobile-lang-list {
        position: absolute !important;
        top: calc(100% + 6px) !important;
        right: 0 !important;
        left: auto !important;
        min-width: 120px !important;
        padding: 5px !important;
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-6px) !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        z-index: 10080 !important;
        list-style: none !important;
        margin: 0 !important;
    }

    .menu-mobile-lang.is-open .menu-mobile-lang-list {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    .menu-mobile-lang-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 6px 9px !important;
        border-radius: 6px !important;
        color: #222222 !important;
        text-decoration: none !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        transition: background 0.15s ease !important;
    }

    .menu-mobile-lang-item:hover,
    .menu-mobile-lang-item:active {
        background: #f4f5f7 !important;
        color: var(--base-color) !important;
    }

    .menu-mobile-lang-item.is-active {
        background: rgba(219, 165, 0, 0.12) !important;
        color: #b89330 !important;
        font-weight: 700 !important;
    }

    /* Mobile Quick Quote Button */
    .menu-mobile-quote-btn {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        height: 36px !important;
        padding: 0 11px !important;
        margin: 0 !important;
        background: var(--dark-gray) !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 18px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
        box-sizing: border-box !important;
        line-height: normal !important;
        transition: transform 0.15s ease, background 0.15s ease !important;
    }

    .menu-mobile-quote-btn i {
        color: var(--base-color) !important;
        font-size: 13px !important;
    }

    .menu-mobile-quote-btn:active {
        transform: scale(0.96) !important;
    }

    /* Extra small screens (< 420px): show icon only on quote button to keep header clean and spacious */
    @media (max-width: 420px) {
        .menu-mobile-quote-btn span {
            display: none !important;
        }
        .menu-mobile-quote-btn {
            width: 36px !important;
            padding: 0 !important;
            border-radius: 18px !important;
        }
    }

    /* Mobile Hamburger Pill */
    .menu-header-bar.menu-offcanvas-open-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 36px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        border-radius: 18px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    .menu-header-bar.menu-offcanvas-open-btn .menu-hamburger-icon {
        width: 20px !important;
        height: 8px !important;
    }

    .menu-header-bar.menu-offcanvas-open-btn .menu-hamburger-burger {
        width: 20px !important;
        height: 9px !important;
    }

    /* --------------------------------------------------------------------------
       2. Mobile Offcanvas Menu Footer Quick Actions
       -------------------------------------------------------------------------- */
    .menu-offcanvas-mobile-footer {
        margin-top: 35px;
        padding-top: 25px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .menu-offcanvas-mobile-action-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .menu-offcanvas-mobile-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 14px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        transition: all 0.2s ease;
    }

    .menu-offcanvas-mobile-btn--catalog {
        background: #f4f5f7;
        color: var(--dark-gray);
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

    .menu-offcanvas-mobile-btn--call {
        background: rgba(219, 165, 0, 0.12);
        color: #997500;
        border: 1px solid rgba(219, 165, 0, 0.25);
    }

    .menu-offcanvas-mobile-btn--quote {
        background: var(--dark-gray);
        color: #ffffff !important;
        border: none;
        padding: 13px;
        font-weight: 700;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    }
}

/* --------------------------------------------------------------------------
   3. Mobile 2x2 Stats & Counter Grid (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .counter-style-04.row-cols-2 {
        row-gap: 20px;
    }

    .counter-style-04 .col {
        padding-left: 8px !important;
        padding-right: 8px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .counter-style-04 .alt-font.fs-18 {
        font-size: 13px !important;
        line-height: 1.35;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-bottom: 2px !important;
    }

    .counter-style-04 .separator-line-1px {
        width: 36px !important;
        margin-top: 6px !important;
        margin-bottom: 8px !important;
        background-color: var(--base-color) !important;
        opacity: 0.6;
    }

    .counter-style-04 h5.vertical-counter {
        font-size: 26px !important;
        line-height: 1.1;
        letter-spacing: -0.5px !important;
        margin-bottom: 0 !important;
    }
}

/* ==========================================================================
   4. Hero Slider Mobile Responsive Enhancements (<= 991.98px)
   ========================================================================== */
.slider-image-col {
    min-height: 420px;
}

/* Strict Inactive Slide Isolation: Inactive slides are completely hidden so texts/buttons NEVER overlap */
.banner-slider .swiper-slide {
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

.banner-slider .swiper-slide:not(.swiper-slide-active) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.banner-slider .swiper-slide.swiper-slide-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 5 !important;
}

@media (max-width: 991.98px) {
    .swiper-number-pagination-progress.md-h-auto {
        height: auto !important;
        min-height: 520px !important;
    }

    .banner-slider {
        height: auto !important;
        min-height: 520px !important;
    }

    .banner-slider .swiper-slide {
        height: auto !important;
        min-height: 520px !important;
        background: #ffffff !important; /* solid clean backdrop prevents see-through stacking */
    }

    .slider-image-col {
        min-height: 240px !important;
        max-height: 280px !important;
        height: 260px !important;
        margin-bottom: 18px !important;
        border-radius: 0 0 16px 16px;
    }

    .banner-slider .swiper-slide .col-xl-5 {
        padding-top: 10px !important;
        padding-bottom: 25px !important;
    }

    .banner-slider h1,
    .banner-slider h2 {
        font-size: clamp(22px, 5.8vw, 32px) !important;
        line-height: 1.18 !important;
        letter-spacing: -0.8px !important;
        margin-bottom: 12px !important;
    }

    .banner-slider p {
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin-bottom: 22px !important;
        color: #555555 !important;
    }

    .banner-slider .btn {
        padding: 10px 24px !important;
        font-size: 14px !important;
        border-radius: 24px !important;
    }

    .slider-pagination-row {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 15px !important;
        margin-bottom: 25px !important;
        pointer-events: auto !important;
    }

    .slider-pagination-row .col-xl-5 {
        display: none !important;
    }

    .slider-pagination-row .col-xl-7 {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
    }

    .swiper-pagination-wrapper {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }

    .swiper-pagination-progress {
        width: 130px !important;
        height: 2px !important;
    }
}

/* ==========================================================================
   5. Process Steps 2x2 Grid (< 768px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .process-step-style-06 {
        padding: 16px 12px 18px !important;
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.07) !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
        margin-bottom: 12px !important;
    }

    .process-step-style-06 .process-step-icon-box {
        top: 0 !important;
        margin-bottom: 10px !important;
    }

    .process-step-style-06 .progress-step-separator {
        display: none !important; /* Hide broken horizontal line on 2x2 grid */
    }

    .process-step-style-06 .step-box {
        width: 26px !important;
        height: 26px !important;
        background: var(--dark-gray) !important;
        border-color: var(--dark-gray) !important;
    }

    .process-step-style-06 .step-box span {
        background: var(--base-color) !important;
    }

    .process-step-style-06 span.fs-22 {
        font-size: 15px !important;
        line-height: 1.3 !important;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        font-weight: 700 !important;
    }

    .process-step-style-06 p {
        font-size: 13px !important;
        line-height: 1.45 !important;
        color: #666666 !important;
    }
}

/* ==========================================================================
   6. 5 Büyük Üretim Kartı (Stacking Box) Mobile UX (<= 991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .stack-box {
        height: auto !important;
        padding: 10px 14px 30px !important;
    }

    .stack-box .stack-box-contain {
        height: auto !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .stack-box .stack-item {
        height: auto !important;
        position: relative !important;
        display: block !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
        margin-bottom: 0 !important;
    }

    .stack-box .stack-item .stack-item-wrapper {
        position: relative !important;
        height: auto !important;
        display: block !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 1 !important;
    }

    .stack-box .stack-item .row.align-items-center {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
    }

    .stack-box .stack-item .cover-background {
        height: 230px !important;
        min-height: 230px !important;
        max-height: 250px !important;
        width: 100% !important;
        position: relative !important;
        border-radius: 18px 18px 0 0 !important;
    }

    /* Watermark number 01, 02 on mobile */
    .stack-box .stack-item .cover-background .fs-170 {
        font-size: 50px !important;
        line-height: 1 !important;
        bottom: 12px !important;
        right: 14px !important;
        top: auto !important;
        left: auto !important;
        opacity: 0.3 !important;
        color: #ffffff !important;
    }

    /* Vertical title badge on mobile */
    .stack-box .stack-item .vertical-title-center .title {
        font-size: 11px !important;
        padding: 6px 12px !important;
        border-radius: 6px 0 0 0 !important;
    }

    /* Text Column below image on mobile */
    .stack-box .stack-item .col-lg-6:nth-child(2) {
        padding: 22px 18px 26px !important;
        text-align: left !important;
    }

    .stack-box .stack-item h1 {
        font-size: clamp(20px, 5.2vw, 26px) !important;
        line-height: 1.25 !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 12px !important;
    }

    .stack-box .stack-item p {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        margin-bottom: 20px !important;
        width: 100% !important;
        color: #555555 !important;
    }

    .stack-box .stack-item .btn {
        padding: 9px 20px !important;
        font-size: 13px !important;
        border-radius: 20px !important;
    }
}

/* ==========================================================================
   7. Expanding Category Panels Mobile Fix (< 991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    #products-types {
        min-height: auto !important;
    }

    .rps-headline {
        position: relative !important;
        padding: 30px 20px 15px !important;
    }

    .rps-headline-title {
        font-size: 28px !important;
        letter-spacing: -1px !important;
    }

    .rps-panels {
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 14px 30px !important;
        gap: 10px !important;
    }

    .rps-panel {
        min-height: auto !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        background: rgba(10, 30, 40, 0.6) !important;
        padding: 16px 18px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        transition: all 0.3s ease !important;
    }

    .rps-panel.rps-open {
        background: rgba(10, 30, 40, 0.88) !important;
        border-color: var(--base-color) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    }

    .rps-panel-bottom {
        position: static !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .rps-panel-label {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
    }

    .rps-panel.rps-open .rps-panel-label {
        color: var(--base-color) !important;
    }

    .rps-panel-list {
        position: static !important;
        margin-top: 14px !important;
        padding: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        display: none;
    }

    .rps-panel.rps-open .rps-panel-list {
        display: block !important;
    }

    .rps-panel-list li {
        padding: 8px 0 !important;
        font-size: 14px !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   8. Quick Contact Form Mobile Spacing & Padding (< 768px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .home-cta-form-box {
        padding: 26px 18px 28px !important;
        border-radius: 16px !important;
    }

    .home-cta-form-box .bi-envelope {
        display: none !important; /* Prevent horizontal overflow on small phones */
    }

    .home-cta-form-box h4 {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }

    .home-cta-form-box p {
        font-size: 13.5px !important;
        line-height: 1.45 !important;
        margin-bottom: 20px !important;
    }

    .home-cta-form-box .form-group {
        margin-bottom: 14px !important;
    }

    .home-cta-form-box .form-control {
        font-size: 14px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .home-cta-form-box button[type="submit"] {
        margin-top: 15px !important;
        padding: 12px !important;
        font-size: 14px !important;
        border-radius: 25px !important;
    }
}