@font-face{
    font-family: 'EN-HelveticNeue-woff2-EB';
    src: url('https://websiteoss.ecoflow.com/fonts/HelveticalNeue20231129/605c36402d16df6ce198ebf0d1aa172d.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'EN-HelveticNeue-woff2-B';
    src: url('https://websiteoss.ecoflow.com/fonts/HelveticalNeue20231129/9e1a68a37975c8f2499df3c809dedc85.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'EN-HelveticNeue-woff2-EM';
    src: url('https://websiteoss.ecoflow.com/fonts/HelveticalNeue20231129/ac056a010bf44acdbcc0922addfb5010.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'EN-HelveticNeue-woff2-M';
    src: url('https://websiteoss.ecoflow.com/fonts/HelveticalNeue20231129/8d454c0abbe5546de71999d0397bfae0.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: 'EN-HelveticNeue-woff2-EL';
    src: url('https://websiteoss.ecoflow.com/fonts/HelveticalNeue20231129/4455ec462f289a3011dda0ad316f8029.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: 'EN-HelveticNeue-woff2-L';
    src: url('https://websiteoss.ecoflow.com/fonts/HelveticalNeue20231129/f609858ca6bb3c8ca0dfa340325b9562.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'en-Manrope-Regular';
    src: url('https://websiteoss.ecoflow.com/fonts/Manrope/cf5e7fe79807bc30dab376b17cf30df2.woff2') format('woff2'), url('/fonts/Manrope/Manrope-Regular.woff') format('woff'),
        url('/fonts/Manrope/Manrope-Regular.eot?#iefix') format('embedded-opentype'), url('/fonts/Manrope/Manrope-Regular.ttf') format('truetype'),
        url('/fonts/Manrope/Manrope-Regular.svg#webfont34M5alKg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'en-Manrope-Bold';
    src: url('https://websiteoss.ecoflow.com/fonts/Manrope/b977e4c21f8ece1ef9533b05b74be644.woff2') format('woff2'), url('/fonts/Manrope/Manrope-Bold.woff') format('woff'),
        url('/fonts/Manrope/Manrope-Bold.eot?#iefix') format('embedded-opentype'), url('/fonts/Manrope/Manrope-Bold.ttf') format('truetype'),
        url('/fonts/Manrope/Manrope-Bold.svg#webfont34M5alKg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'en-Manrope-ExtraBold';
    src: url('https://websiteoss.ecoflow.com/fonts/Manrope/20c2727586938b4f0dd261efb5502904.woff2') format('woff2'), url('/fonts/Manrope/Manrope-ExtraBold.woff') format('woff'),
        url('/fonts/Manrope/Manrope-ExtraBold.eot?#iefix') format('embedded-opentype'), url('/fonts/Manrope/Manrope-ExtraBold.ttf') format('truetype'),
        url('/fonts/Manrope/Manrope-ExtraBold.svg#webfont34M5alKg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'en-Manrope-ExtraLight';
    src: url('https://websiteoss.ecoflow.com/fonts/Manrope/0cd27f321a3aaf8beb4c531af39eb4bc.woff2') format('woff2'), url('/fonts/Manrope/Manrope-ExtraLight.woff') format('woff'),
        url('/fonts/Manrope/Manrope-ExtraLight.eot?#iefix') format('embedded-opentype'), url('/fonts/Manrope/Manrope-ExtraLight.ttf') format('truetype'),
        url('/fonts/Manrope/Manrope-ExtraLight.svg#webfont34M5alKg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'en-Manrope-Light';
    src: url('https://websiteoss.ecoflow.com/fonts/Manrope/6164d6eda310220df4420822271ada67.woff2') format('woff2'), url('/fonts/Manrope/Manrope-Light.woff') format('woff'),
        url('/fonts/Manrope/Manrope-Light.eot?#iefix') format('embedded-opentype'), url('/fonts/Manrope/Manrope-Light.ttf') format('truetype'),
        url('/fonts/Manrope/Manrope-Light.svg#webfont34M5alKg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'en-Manrope-Medium';
    src: url('https://websiteoss.ecoflow.com/fonts/Manrope/87a7424ded3cbcea0e8017dfdd157fcd.woff2') format('woff2'), url('/fonts/Manrope/Manrope-Medium.woff') format('woff'),
        url('/fonts/Manrope/Manrope-Medium.eot?#iefix') format('embedded-opentype'), url('/fonts/Manrope/Manrope-Medium.ttf') format('truetype'),
        url('/fonts/Manrope/Manrope-Medium.svg#webfont34M5alKg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'en-Manrope-SemiBold';
    src: url('https://websiteoss.ecoflow.com/fonts/Manrope/5571747b019eda63e734d8c33adf93c5.woff2') format('woff2'), url('/fonts/Manrope/Manrope-SemiBold.woff') format('woff'),
        url('/fonts/Manrope/Manrope-SemiBold.eot?#iefix') format('embedded-opentype'), url('/fonts/Manrope/Manrope-SemiBold.ttf') format('truetype'),
        url('/fonts/Manrope/Manrope-SemiBold.svg#webfont34M5alKg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/**
 * EcoFlow Homepage Sections - Frontend Styles
 */

/* Container */
.ecoflow-homepage-sections {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 0 50px 0;
    background: #f8f8f8;
}

.ecoflow-container {
    width: 100%;
}

/* ============================================
   ECOFLOW SLIDES CAROUSEL - FRONTEND STYLES
   ============================================ *

    /* Font Family - Tüm slider için */
.ecoflow-slides-wrapper,
.ecoflow-slides-wrapper *,
.ecoflow-banner-section * {
    font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
}

.ecoflow-slides-wrapper {
    position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
    background: #000;
}

/* ... geri kalan CSS aynı ... */
.ecoflow-slides-wrapper {
    position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
    background: #000;
}

/* Slides Container */
.ecoflow-slides-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.ecoflow-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

.ecoflow-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* Background Media */
.ecoflow-slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

/* Background Image Divs */
.ecoflow-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Desktop Background - Default göster */
.ecoflow-slide-bg-desktop {
    display: block;
}

/* Mobile Background - Default gizle */
.ecoflow-slide-bg-mobile {
    display: none;
}

/* Mobile'de değiştir */
@media (max-width: 767px) {
    .ecoflow-slide-bg-desktop {
        display: none;
    }

    .ecoflow-slide-bg-mobile {
        display: block;
    }
}

/* Video Backgrounds */
.ecoflow-slide-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.ecoflow-slide-video-desktop {
    display: block;
}

.ecoflow-slide-video-mobile {
    display: none;
}

@media (max-width: 767px) {
    .ecoflow-slide-video-desktop {
        display: none;
    }

    .ecoflow-slide-video-mobile {
        display: block;
    }
}

/* YENİ: */
.ecoflow-slide-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    /* Yukarıdan başla */
    justify-content: center;
    text-align: center;
    padding: 0 20px 180px;
    /* ← Üst padding'i kaldır */
}

.ecoflow-slide-content-inner {
    max-width: 900px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    margin-top: 60px;
    /* ← Buraya taşı */
}

/* Text Content Wrapper */
.ecoflow-slide-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* Typography */
.ecoflow-slide-top-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    letter-spacing: 0.5px;
}

.ecoflow-slide-main-title {
    font-family: 'Helvetica Neue Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -1px;
}

.ecoflow-slide-subtitle {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    margin: 0;
    line-height: 1.4;
}

/* Buttons */
.ecoflow-slide-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
}

.ecoflow-slide-btn {
    position: relative;
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    background-color: transparent;
    border: 1px solid transparent;
    font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
    border-radius: 24px;
    height: 36px;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    padding: 0 36px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Font Awesome Icon */
.ecoflow-slide-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

/* SVG Icon */
.ecoflow-slide-btn-icon-svg {
    width: 16px;
    height: 16px;
    object-fit: contain;
    transition: transform 0.3s ease;
    filter: brightness(0) invert(1);
    /* Beyaz yap */
}

/* Secondary buton için SVG rengi */
.ecoflow-slide-btn-secondary .ecoflow-slide-btn-icon-svg {
    filter: brightness(0);
    /* Siyah yap */
}

/* Hover animasyonu */
.ecoflow-slide-btn:hover i,
.ecoflow-slide-btn:hover .ecoflow-slide-btn-icon-svg {
    transform: translateX(4px);
}

.ecoflow-slide-btn-primary {
    background-color: #00000000 !important;
    color: #fff !important;
    border-color: #ffffff !important;
}

.ecoflow-slide-btn-primary:hover,
.ecoflow-slide-btn-secondary:hover {
    opacity: .8;
}

.ecoflow-slide-btn-secondary {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}

/* Navigation Arrows */
.ecoflow-slide-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
}

.ecoflow-slide-nav:hover,
.ecoflow-slide-nav:focus {
    background: rgba(0, 0, 0, 0.6);
    transform: translateY(-50%) scale(1.05);
}

.ecoflow-slide-prev {
    left: 32px;
}

.ecoflow-slide-next {
    right: 32px;
}

/* Progress Navigation */
.ecoflow-slide-progress-nav {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 32px;
    align-items: flex-end;
}

.ecoflow-slide-progress-item {
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.ecoflow-slide-progress-item:not(.active) {
    opacity: 0.6;
}

.ecoflow-slide-progress-item:hover {
    opacity: 1;
}

.ecoflow-slide-progress-name {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 8px;
    white-space: nowrap;
    text-align: center;
}

.ecoflow-slide-progress-bar {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
    min-width: 80px;
}

.ecoflow-slide-progress-fill {
    height: 100%;
    background: #fff;
    width: 0%;
    transition: width 0.1s linear;
}

.ecoflow-slide-progress-item.active .ecoflow-slide-progress-fill {
    animation: progressFill var(--progress-duration, 5s) linear forwards;
}

@keyframes progressFill {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@media (max-width: 1440px) {
    .ecoflow-slide-top-title {
        font-size: 15px;
    }

    .ecoflow-slide-main-title {
        font-size: 32px;
    }

    .ecoflow-slide-subtitle {
        font-size: 16px;
    }
}

/* Responsive Design */
@media (max-width: 1023px) {
    .ecoflow-slide-content {
        padding: 0 20px 110px;
    }

    .ecoflow-slide-content-inner {
        height: 100%;
        justify-content: space-between;
    }

    .ecoflow-slide-text-content {
        gap: 12px;
    }

    .ecoflow-slide-top-title {
        font-size: 16px;
    }

    .ecoflow-slide-main-title {
        font-size: 24px;
    }

    .ecoflow-slide-subtitle {
        font-size: 16px;
    }

    .ecoflow-slide-buttons {
        width: 295px;
    }

    .ecoflow-slide-btn {
        width: 100%;
    }

    .ecoflow-slide-btn {
        height: 44px;
    }

    .ecoflow-slide-nav {
        width: 40px;
        height: 40px;
    }

    .ecoflow-slide-prev {
        left: 20px;
    }

    .ecoflow-slide-next {
        right: 20px;
    }

    .ecoflow-slides-wrapper {
        height: 635px;
    }

    .ecoflow-slide-progress-name {
        display: none;
    }

    .ecoflow-slide-progress-nav {
        bottom: 25px;
        gap: 10px;
    }

    .ecoflow-slide-progress-bar {
        min-width: 50px;
    }
}

@media (max-width: 767px) {


    .ecoflow-slide-content {
        padding: 50px 24px 48px;
        justify-content: flex-start;
    }

    .ecoflow-slide-content-inner {
        gap: 24px;
        margin-top: 0;
        justify-content: space-between;
        height: 100%;
        padding-bottom: 10px;
    }

    .ecoflow-slide-text-content {
        gap: 12px;
    }

    .ecoflow-slide-top-title {
        font-size: 16px;
    }

    .ecoflow-slide-main-title {
        font-size: 24px;
        line-height: 1.2;
    }

    .ecoflow-slide-subtitle {
        font-size: 16px;
    }

    .ecoflow-slide-buttons {
        width: 100%;
    }

    .ecoflow-slide-btn {
        padding: 12px 28px;
        font-size: 14px;
        width: 75%;
        height: 44px;
    }

    .ecoflow-slide-progress-nav {
        bottom: 32px;
        gap: 16px;
    }

    /* Hide slide names on mobile */
    .ecoflow-slide-progress-name {
        display: none;
    }

    .ecoflow-slide-progress-bar {
        min-width: 60px;
    }

    .ecoflow-slide-nav {
        width: 36px;
        height: 36px;
    }

    .ecoflow-slide-nav svg {
        width: 20px;
        height: 20px;
    }

    .ecoflow-slide-prev {
        left: 16px;
    }

    .ecoflow-slide-next {
        right: 16px;
    }
}

/* =================================
   CATEGORY SHOWCASE
   ================================= */

.ecoflow-category-showcase {
    margin: 40px auto 0 auto;
    max-width: 1680px;
    padding: 20px 120px;
}

/* Bölüm Başlığı */
.ecoflow-category-showcase .showcase-title {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Banner */
.ecoflow-category-showcase .showcase-banner {
    position: relative;
    width: 100%;
    height: 470px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.ecoflow-category-showcase .showcase-banner .banner-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ecoflow-category-showcase .showcase-banner video.banner-media {
    object-fit: cover;
}

.ecoflow-category-showcase .banner-content {
    position: absolute;
    top: 50%;
    left: 60px;
    transform: translateY(-50%);
    z-index: 2;
    max-width: 500px;
}

/* =================================
   BANNER THEME - LIGHT (Default)
   ================================= */

.ecoflow-category-showcase .banner-content.banner-theme-light .banner-top-title {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    padding: 6px 0;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ecoflow-category-showcase .banner-content.banner-theme-light .banner-main-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.ecoflow-category-showcase .banner-content.banner-theme-light .banner-subtitle {
    font-size: 16px;
    color: #fff;
    margin: 0 0 24px 0;
    line-height: 1.6;
}

.ecoflow-category-showcase .banner-content.banner-theme-light .banner-button {
    display: inline-block;
    background: #fff;
    color: #000;
    padding: 14px 30px;
    border-radius: 30px;
    font-size: 14px;
    line-height: 21px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ecoflow-category-showcase .banner-content.banner-theme-light .banner-button:hover {
    background: #0866e2;
    color: #fff;
}

.ecoflow-category-showcase .banner-content.banner-theme-light .banner-button-secondary {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.ecoflow-category-showcase .banner-content.banner-theme-light .banner-button-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.ecoflow-category-showcase .banner-content.banner-theme-light .banner-button-tertiary {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.ecoflow-category-showcase .banner-content.banner-theme-light .banner-button-tertiary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* =================================
   BANNER THEME - DARK
   ================================= */

.ecoflow-category-showcase .banner-content.banner-theme-dark .banner-top-title {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    padding: 6px 0;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ecoflow-category-showcase .banner-content.banner-theme-dark .banner-main-title {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.ecoflow-category-showcase .banner-content.banner-theme-dark .banner-subtitle {
    font-size: 16px;
    color: #000;
    margin: 0 0 24px 0;
    line-height: 1.6;
}

.ecoflow-category-showcase .banner-content.banner-theme-dark .banner-button {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 14px 32px;
    border-radius: 30px;
    font-size: 14px;
    line-height: 21px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ecoflow-category-showcase .banner-content.banner-theme-dark .banner-button:hover {
    background: #0866e2;
    color: #fff;
}

.ecoflow-category-showcase .banner-content.banner-theme-dark .banner-button-secondary {
    background: transparent;
    border: 2px solid #000;
    color: #000;
}

.ecoflow-category-showcase .banner-content.banner-theme-dark .banner-button-secondary:hover {
    background: rgba(0, 0, 0, 0.1);
}

.ecoflow-category-showcase .banner-content.banner-theme-dark .banner-button-tertiary {
    background: transparent;
    border: 2px solid #000;
    color: #000;
}

.ecoflow-category-showcase .banner-content.banner-theme-dark .banner-button-tertiary:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Banner Buttons Container */
.ecoflow-category-showcase .banner-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* =================================
   GRID WRAPPER - YENİ YAPI
   ================================= */

.ecoflow-category-showcase .showcase-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: minmax(400px, auto);
    gap: 16px;
}

/* Ürün Grid - İlk 4 Sütun */
.ecoflow-category-showcase .showcase-products-grid {
    grid-column: 1 / 5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* View All Kartları - 5. Sütun */
.ecoflow-category-showcase .see-more-card:first-of-type {
    grid-column: 5;
    grid-row: 1;
}

.ecoflow-category-showcase .see-more-card:last-of-type {
    grid-column: 5;
    grid-row: 2;
}

/* Ürün Kartı */
.ecoflow-category-showcase .product-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}


.ecoflow-category-showcase .product-link {
    display: flex;
    text-decoration: none;
    color: inherit;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Ürün Görseli */
.ecoflow-category-showcase .product-image {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
}

.ecoflow-category-showcase .product-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.ecoflow-category-showcase .product-image .product-image-main {
    opacity: 1;
    z-index: 1;
}

.ecoflow-category-showcase .product-image .product-image-hover {
    opacity: 0;
    z-index: 2;
}

.ecoflow-category-showcase .product-card:hover .product-image .product-image-main {
    opacity: 0;
}

.ecoflow-category-showcase .product-card:hover .product-image .product-image-hover {
    opacity: 1;
}

/* Ürün Etiketleri */
.ecoflow-category-showcase .product-badge {
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    z-index: 3;
}

.ecoflow-category-showcase .product-badge.hot {
    background: #ff4444;
    color: #fff;
}

.ecoflow-category-showcase .product-badge.new {
    color: #fa4500;
}

.ecoflow-category-showcase .product-badge.custom {
    color: #0866e2;
}

/* Ürün Bilgileri */
.ecoflow-category-showcase .product-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.ecoflow-category-showcase .product-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

/* Ürün Özellikleri */
.ecoflow-category-showcase .product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 12px;
}

.ecoflow-category-showcase .product-specs span {
    font-size: 13px;
    color: #707070;
    line-height: 1.4;
    font-weight: 500;
}

.ecoflow-category-showcase .product-specs span:not(:last-child)::after {
    content: "|";
    margin-left: 8px;
    margin-right: 8px;
    color: #d1d5db;
}

/* Fiyat */
.ecoflow-category-showcase .product-price {
    display: flex;
    align-items: center;
    gap: 8px;
}
.product-price.price-hidden {
    opacity: 0;
}
.ecoflow-category-showcase .price-current {
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

.ecoflow-category-showcase .price-old {
    font-size: 14px;
    color: #9ca3af;
    text-decoration: line-through;
}

/* =================================
   SEE MORE KARTLARI
   ================================= */
.see-more-cards-wrapper {
    gap: 16px;
    display: flex;
    flex-direction: column;
}

.ecoflow-category-showcase .see-more-card {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.ecoflow-category-showcase .see-more-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 180px;
    text-decoration: none;
    color: #000;
    transition: all 0.3s ease;
    padding: 24px;
}

.see-more-cards-wrapper .see-more-card-primary .see-more-link {
    flex-direction: column-reverse;
    justify-content: space-between;
}

/* Birinci Kart - Resimli */
.ecoflow-category-showcase .see-more-card .see-more-image {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    margin-bottom: 16px;
}

.ecoflow-category-showcase .see-more-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.ecoflow-category-showcase .see-more-text {
    font-size: 16px;
    font-weight: 600;
    color: #03060b;
}

.ecoflow-category-showcase .see-more-arrow {
    color: #00D4AA;
    width: 31px;
    height: 31px;
}

.see-more-card-primary {
    min-height: 70%;
    justify-content: space-between;
}

.see-more-card-secondary {
    min-height: 100px;
}

.see-more-card-secondary .see-more-link {
    padding: 0 20px;
}

/* View All Card - Responsive SVG İkonları */
.see-more-card .desktop-arrow {
    display: inline-block;
}

.see-more-card .mobile-arrow {
    display: none;
}

@media (max-width: 767px) {
    .elementor-shortcode .ecoflow-homepage-sections .ecoflow-category-showcase {
        padding: 0 16px;
    }

    .see-more-card .desktop-arrow {
        display: none;
    }

    .see-more-card .mobile-arrow {
        display: inline-block;
    }

    .ecoflow-category-showcase .see-more-arrow {
        width: 24px;
        height: 24px;
    }
}

/* =================================
   RESPONSIVE - TABLET (768px - 1024px)
   ================================= */
@media (max-width: 1365px) {
    .ecoflow-category-showcase .banner-content {
        left: inherit;
        position: relative;
        top: inherit;
        padding: 16px;
        transform: none;
    }

    .ecoflow-category-showcase .banner-content.banner-theme-dark .banner-main-title,
    .ecoflow-category-showcase .banner-content.banner-theme-light .banner-main-title,
    .ecoflow-category-showcase .banner-content.banner-theme-dark .banner-subtitle,
    .ecoflow-category-showcase .banner-content.banner-theme-light .banner-subtitle {
        font-size: 16px;
        margin: 0 0 6px 0;
    }

    .ecoflow-category-showcase .banner-content.banner-theme-light .banner-top-title,
    .ecoflow-category-showcase .banner-content.banner-theme-dark .banner-top-title {
        font-size: 16px;
        padding: 0;
        margin-bottom: 6px;
    }

    .ecoflow-category-showcase .banner-content.banner-theme-dark .banner-button,
    .ecoflow-category-showcase .banner-content.banner-theme-light .banner-button {
        font-size: 12px;
        padding: 10px 20px;
    }
}

@media (max-width: 1023px) {
    .ecoflow-homepage-sections .ecoflow-category-showcase {
        padding: 0 48px;
        margin: 60px auto 0 auto;
    }

    .ecoflow-homepage-sections .ecoflow-category-showcase .showcase-title {
        font-size: 20px;
    }

    .ecoflow-homepage-sections .ecoflow-category-showcase .showcase-banner {
        height: 295px;
        margin-bottom: 8px;
        border-radius: 4px;
    }

    .ecoflow-category-showcase .banner-content {
        left: inherit;
        position: relative;
        top: inherit;
        padding: 16px;
        transform: none;
    }

    .ecoflow-category-showcase .banner-content.banner-theme-light .banner-top-title,
    .ecoflow-category-showcase .banner-content.banner-theme-dark .banner-top-title {
        padding: 0;
        margin-bottom: 6px;
        font-size: 16px;
    }

    .ecoflow-category-showcase .banner-content.banner-theme-light .banner-main-title,
    .ecoflow-category-showcase .banner-content.banner-theme-dark .banner-main-title {
        font-size: 16px;
        margin: 0 0 6px 0;
    }

    .ecoflow-category-showcase .banner-content.banner-theme-light .banner-subtitle,
    .ecoflow-category-showcase .banner-content.banner-theme-dark .banner-subtitle {
        font-size: 12px;
        margin: 0 0 6px 0;
    }

    .ecoflow-category-showcase .banner-content.banner-theme-light .banner-button,
    .ecoflow-category-showcase .banner-content.banner-theme-dark .banner-button {
        font-size: 14px;
        padding: 10px 20px;
    }

    .ecoflow-category-showcase .showcase-products-grid,
    .see-more-cards-wrapper {
        gap: 8px;
        flex-direction: row;
    }

    .ecoflow-category-showcase .product-card {
        border-radius: 4px;
    }

    .ecoflow-category-showcase .product-badge,
    .ecoflow-category-showcase .product-title,
    .ecoflow-category-showcase .price-current {
        font-size: 14px;
    }

    .ecoflow-category-showcase .product-specs span,
    .ecoflow-category-showcase .price-old {
        font-size: 12px;
    }

    .ecoflow-category-showcase .product-price {
        flex-wrap: wrap;
        margin-right: 10px;
    }

    .ecoflow-category-showcase .price-old {
        font-weight: 700;
    }

    .see-more-cards-wrapper {
        margin-top: 8px;
    }

    .ecoflow-homepage-sections .ecoflow-category-showcase .see-more-card:first-of-type .see-more-link {
        min-height: 120px;
    }

    .ecoflow-category-showcase .see-more-link {
        min-height: 120px;
    }

    .ecoflow-category-showcase .see-more-text {
        font-size: 14px;
    }
}

@media (max-width: 1440px) {

    .ecoflow-category-showcase .banner-content.banner-theme-light .banner-subtitle,
    .ecoflow-category-showcase .banner-content.banner-theme-dark .banner-subtitle {
        font-weight: 600;
    }

    .ecoflow-category-showcase .showcase-title {
        font-size: 28px;
    }

    .ecoflow-category-showcase .see-more-card .see-more-image {
        height: 40%;
    }

    .ecoflow-category-showcase {
        margin: 0 auto;
    }

    .ecoflow-category-showcase .showcase-banner {
        height: 385px;
    }

    .ecoflow-category-showcase .product-specs {
        font-size: 14px;
    }


}
@media (max-width: 1200px) {
    .ecoflow-homepage-sections .ecoflow-category-showcase .showcase-products-grid {
        grid-column: 1 / -1;
        grid-row: 1;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 1365px) {
    .ecoflow-category-showcase .showcase-grid-wrapper {
        display: block;
    }
        .see-more-cards-wrapper {
        flex-direction: row;
        margin-top: 8px;
    }
        .ecoflow-category-showcase .see-more-card-primary {
        width: 76.5%;
    }
        .ecoflow-category-showcase .see-more-card-secondary {
        width: 24.5%;
    }
    .see-more-cards-wrapper {
        max-height: 120px;
    }
    .see-more-cards-wrapper .see-more-card-primary .see-more-link {
        flex-direction: row-reverse;
    }
        .ecoflow-category-showcase .see-more-card .see-more-image {
        height: 75%;
        max-width: 172px;
    }
    .ecoflow-category-showcase .see-more-content {
        justify-content: flex-start;
    }
}

/* =================================
   RESPONSIVE - LAPTOP (1024px - 1200px)
   ================================= */

@media (max-width: 1200px) {

    /* Grid Wrapper - 4 Sütun */
    .ecoflow-category-showcase .showcase-grid-wrapper {
        grid-template-columns: repeat(4, 1fr);
        display: block;
    }

    /* Ürün Grid - Tüm genişlik, üst satır */
    .ecoflow-category-showcase .showcase-products-grid {
        grid-column: 1 / -1;
        grid-row: 1;
        grid-template-columns: repeat(4, 1fr);
    }

    /* Birinci Kart - 3 Sütun */
    .ecoflow-category-showcase .see-more-card:first-of-type {
        grid-column: 1 / 4;
        grid-row: 2;
    }

    /* İkinci Kart - 1 Sütun */
    .ecoflow-category-showcase .see-more-card:last-of-type {
        grid-column: 4 / 5;
        grid-row: 2;
    }

    /* Birinci See More - Laptop Layout */
    .ecoflow-category-showcase .see-more-card-primary {
        width: 76.5%;
    }

    .ecoflow-category-showcase .see-more-card-secondary {
        width: 24.5%;
    }

    .ecoflow-category-showcase .see-more-card:first-of-type .see-more-link {
        flex-direction: row-reverse;
        justify-content: space-between;
        min-height: 120px;
        padding: 10px;
    }

    .ecoflow-category-showcase .see-more-card:first-of-type .see-more-image {
        width: 25%;
        height: 100%;
        margin: 0;
    }

    .ecoflow-category-showcase .see-more-card:first-of-type .see-more-content {
        flex-direction: row;
        max-width: 25%;
    }
}


/* =================================
   RESPONSIVE - MOBİL (768px altı)
   ================================= */

@media (max-width: 767px) {
    .ecoflow-category-showcase {
        padding: 0 16px;
        margin: 40px auto;
    }

    /* Grid Wrapper - 2 Sütun */
    .ecoflow-category-showcase .showcase-grid-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Ürün Grid - Tüm genişlik */
    .ecoflow-category-showcase .showcase-products-grid {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .ecoflow-category-showcase .product-link {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* View All Kartları - Tam genişlik */
    .ecoflow-category-showcase .see-more-cards-wrapper {
        flex-direction: column;
        gap: 8px;
        max-height: 100%;
    }

    .ecoflow-category-showcase .product-badge {
        position: relative;
    }

    .ecoflow-category-showcase .product-specs span {
        font-size: 12px;
    }

    .ecoflow-category-showcase .product-price {
        flex-wrap: wrap;
    }

    .ecoflow-category-showcase .price-current,
    .ecoflow-category-showcase .price-current {
        font-size: 14px;
    }

    .ecoflow-category-showcase .price-old {
        font-size: 12px;
    }

    .ecoflow-category-showcase .see-more-card:first-of-type,
    .ecoflow-category-showcase .see-more-card:last-of-type {
        grid-column: 1 / -1;
    }

    .ecoflow-category-showcase .product-specs {
        gap: 0;
    }

    /* Birinci Kart - MOBİL LAYOUT */
    .ecoflow-category-showcase .see-more-card-primary {
        width: 100%;
    }

    .ecoflow-category-showcase .see-more-text {
        font-size: 14px;
    }

    .ecoflow-category-showcase .see-more-card-secondary {
        width: 100%;
        margin: auto auto 8px;
        min-height: auto;
        flex-direction: row-reverse;
    }

    .ecoflow-category-showcase .see-more-card:first-of-type .see-more-link {
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        min-height: 130px;
    }

    .ecoflow-category-showcase .see-more-card:first-of-type .see-more-content {
        flex-direction: column;
        gap: 16px;
        flex: 1;
        text-align: left;
        width: 115px;
        max-width: 115px;
        padding: 0 20px 0 4px;
    }

    .ecoflow-category-showcase .see-more-card:first-of-type .see-more-text {
        flex: 1;
        font-size: 14px;
    }

    .ecoflow-category-showcase .see-more-card:first-of-type .see-more-arrow {
        flex-shrink: 0;
    }

    .ecoflow-category-showcase .see-more-card:first-of-type .see-more-image {
        width: 50%;
        height: 80px;
        margin: 0;
        flex-shrink: 0;
        border-radius: 8px;
    }

    /* İkinci Kart - MOBİL */
    .ecoflow-category-showcase .see-more-card:last-of-type .see-more-link {
        min-height: auto;
        padding: 5px 24px;
    }

    .ecoflow-category-showcase .see-more-card-secondary .see-more-content {
        flex-direction: row-reverse;
        justify-content: center;
    }

    .ecoflow-category-showcase .showcase-banner {
        height: 300px;
    }

    .ecoflow-category-showcase .banner-content {
        max-width: 300px;
    }

    .ecoflow-category-showcase .banner-content.banner-theme-light .banner-main-title,
    .ecoflow-category-showcase .banner-content.banner-theme-dark .banner-main-title {
        font-size: 16px;
        font-weight: 500;
    }

    .ecoflow-category-showcase .banner-content.banner-theme-light .banner-subtitle,
    .ecoflow-category-showcase .banner-content.banner-theme-dark .banner-subtitle {
        font-size: 12px;
    }

    .ecoflow-category-showcase .showcase-title {
        font-size: 20px;
    }

    .ecoflow-category-showcase .product-title {
        font-size: 14px;
        min-height: 60px;
    }

    .ecoflow-category-showcase .product-info {
        padding: 0 12px 12px;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
    }

    .ecoflow-category-showcase .banner-content.banner-theme-light .banner-top-title {
        font-size: 12px;
        font-weight: 600;
        color: #fa4500;
        margin-bottom: 6px;
    }

    .ecoflow-category-showcase .banner-content.banner-theme-light .banner-button,
    .ecoflow-category-showcase .banner-content.banner-theme-dark .banner-button {
        padding: 10px 20px;
    }

    .ecoflow-category-showcase .product-card {}

    .ecoflow-category-showcase .showcase-banner,
    .ecoflow-category-showcase .product-card {
        border-radius: 4px;
    }
}

@media (max-width: 480px) {
    .ecoflow-category-showcase {
        padding: 0 16px;
    }

    .ecoflow-category-showcase .banner-content {
        max-width: none;
    }

    .ecoflow-category-showcase .banner-content.banner-theme-light .banner-main-title,
    .ecoflow-category-showcase .banner-content.banner-theme-dark .banner-main-title {
        font-size: 16px;
    }
}

/* ========================================
   TREND ÜRÜNLER BÖLÜMÜ
   ======================================== */

.ecoflow-trending-products .ecoflow-container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ecoflow-trending-products {
    padding: 10px 0;
    overflow: hidden;
}
.trend-tittle-section {
    max-width: 1680px;
    margin: 10px auto;
    padding: 0 120px;
    position: relative;
}
.ecoflow-trending-products .trending-title {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    text-align: left;
}

/* Karusel Wrapper */
.ecoflow-trending-products .trending-carousel-wrapper {
    position: relative;
    width: 100%;
}

.ecoflow-trending-products .trending-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    padding-left: calc((100% - 1440px)/2);
    padding-right: 60px;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
}

.ecoflow-trending-products .trending-carousel::-webkit-scrollbar {
    display: none;
}

.ecoflow-trending-products .trending-carousel:active {
    cursor: grabbing;
}

/* Ürün Kartı */
.ecoflow-trending-products .trending-product-card {
    flex: 0 0 370px;
    height: 480px;
    position: relative;
    scroll-snap-align: none;
    padding: 5px 0;
}

.ecoflow-trending-products .product-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.ecoflow-trending-products .product-card-background {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.ecoflow-trending-products .trending-product-card:focus-visible {
    outline: none;
}

/* Badge */
.ecoflow-trending-products .product-badge {
    color: #fa4500;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 0;
    letter-spacing: 0.5px;
    z-index: 2;
}

/* Kart İçeriği */
.ecoflow-trending-products .product-card-content {
    padding: 24px;
    z-index: 1;
}

.ecoflow-trending-products .product-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.ecoflow-trending-products .product-card-attributes {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 16px 0;
    line-height: 1.4;
}

.ecoflow-trending-products .product-card-buttons {
    margin-top: 30px;
    position: absolute !important;
    top: 90px;
}

.ecoflow-trending-products .product-card-button {
    display: inline-block;
    background: #ffffff;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 30px;
    border-radius: 50px;
    transition: all 0.3s ease;
    line-height: 1.2;
}

.ecoflow-trending-products .product-card-button:hover {
    background: rgb(255 255 255 / 80%);
    color: #000;
}

/* Ok Butonları */
.ecoflow-trending-products .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: none;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.ecoflow-trending-products .carousel-arrow:hover,
.ecoflow-trending-products .carousel-arrow:active {
    outline: none !important;
}

.ecoflow-trending-products .carousel-arrow:hover {
    background-color: #76767633;
    opacity: 1;
}

.ecoflow-trending-products .carousel-arrow:hover svg,
.ecoflow-trending-products .carousel-arrow svg {
    stroke: #ffffff;
}

.ecoflow-trending-products .carousel-arrow svg {
    transition: stroke 0.3s ease;
}

.ecoflow-trending-products .carousel-arrow-left {
    left: 10px;
}

.ecoflow-trending-products .carousel-arrow-right {
    right: 10px;
}

.ecoflow-trending-products .carousel-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: none;
}

.ecoflow-trending-products .carousel-arrow:disabled:hover {
    background-color: #76767633;
    opacity: 1;
}

/* ============================================
   THEME STYLES - LIGHT (Default)
   ============================================ */

.ecoflow-trending-products .trending-product-card.theme-light .product-card-title {
    color: #000;
}

.ecoflow-trending-products .trending-product-card.theme-light .product-card-attributes {
    color: #e0e0e0;
}

.ecoflow-trending-products .trending-product-card.theme-light .product-badge {
    color: #fa4500;
}

.ecoflow-trending-products .trending-product-card.theme-light .product-card-button-1 {
    color: #fff;
    background-color: #000;
    border: 2px solid #000;
}

.ecoflow-trending-products .trending-product-card.theme-light .product-card-button-1:hover {
    background-color: #0866e2;
    border-color: #0866e2;
}

.ecoflow-trending-products .trending-product-card.theme-light .product-card-button-2 {
    color: #000;
    background-color: transparent;
    border: 2px solid #000;
}

/* ============================================
   THEME STYLES - DARK
   ============================================ */

.ecoflow-trending-products .trending-product-card.theme-dark .product-card-title {
    color: #fff;
}

.ecoflow-trending-products .trending-product-card.theme-dark .product-card-attributes {
    color: #333333;
}

.ecoflow-trending-products .trending-product-card.theme-dark .product-badge {
    color: #fa4500;
}

.ecoflow-trending-products .trending-product-card.theme-dark .product-card-button-1 {
    color: #000;
    background-color: #fff;
    border: 2px solid #fff;
}

.ecoflow-trending-products .trending-product-card.theme-dark .product-card-button-1:hover {
    background-color: #0866e2;
    color: #fff;
    border-color: #0866e2;
}

.ecoflow-trending-products .trending-product-card.theme-dark .product-card-button-2 {
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
}

/* ========================================
   RESPONSIVE - LAPTOP
   ======================================== */
@media (min-width: 2550px) {
    .ecoflow-trending-products .trending-carousel {
        padding-left: calc((100% - 1440px)/2);
    }
}

@media (max-width: 1679px) {
.ecoflow-trending-products .trending-carousel {
    padding-left: 120px;
}
    .ecoflow-homepage-sections .ecoflow-category-slide-section {
        padding-left: 65px;
    }
}

@media (max-width: 1440px) {

    .ecoflow-trending-products .trending-carousel {
        padding-left: 120px;
    }

    .ecoflow-trending-products {
        padding: 0;
    }

    .ecoflow-trending-products .trending-product-card {
        flex: 0 0 300px;
        height: 390px;
    }
}

/* ========================================
   RESPONSIVE - TABLET
   ======================================== */

@media (max-width: 1023px) {
    .ecoflow-trending-products {
        padding: 0;
    }
    .trend-tittle-section {
    padding: 0 48px;
}

    .ecoflow-trending-products .trending-carousel {
        padding-left: 48px;
        padding-right: 40px;
    }

    .ecoflow-trending-products .trending-product-card {
        flex: 0 0 280px;
        height: 356px;
    }

    .ecoflow-trending-products .carousel-arrow {
        width: 44px;
        height: 44px;
    }

    .ecoflow-trending-products .product-badge {
        padding: 0 0 10px 0;
        font-size: 12px;
    }

    .ecoflow-trending-products .product-card-title {
        font-size: 16px;
    }

    .ecoflow-trending-products .product-card-buttons {
        margin-top: 20px;
    }

    .ecoflow-trending-products .product-card-buttons .product-card-button {
        font-size: 12px;
        padding: 10px 20px;
    }
    .ecoflow-trending-products .product-card-background {
        border-radius: 4px;
    }
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 767px) {
    .ecoflow-trending-products .trending-carousel-wrapper {
        min-height: auto;
    }
    .trend-tittle-section {
    padding: 0 16px;
}
    .ecoflow-trending-products {
        padding: 0 0 32px 0;
    }

    .ecoflow-trending-products .product-card-background {
        border-radius: 4px;
    }

    .ecoflow-trending-products .trending-title {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .ecoflow-trending-products .trending-carousel {
        gap: 16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .ecoflow-trending-products .trending-product-card {
        flex: 0 0 285px;
        height: 360px;
    }

    .ecoflow-trending-products .product-card-content {
        padding: 20px 12px;
    }

    .ecoflow-trending-products .product-card-title {
        font-size: 18px;
    }

    .ecoflow-trending-products .product-card-attributes {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .ecoflow-trending-products .product-card-button {
        font-size: 12px;
        padding: 10px 24px;
    }

    .ecoflow-trending-products .carousel-arrow {
        width: 40px;
        height: 40px;
    }

    .ecoflow-trending-products .carousel-arrow svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .ecoflow-trending-products .trending-product-card {
        flex: 0 0 285px;
        height: 356px;
    }

    .ecoflow-trending-products .product-badge {
        font-size: 11px;
        padding: 5px 0;
    }

    .ecoflow-trending-products .carousel-arrow {
        width: 36px;
        height: 36px;
    }
}

/* ============================================
   LOGO SECTION - INFINITE SCROLL
   ============================================ */

.ecoflow-logo-section {
    padding: 60px 0;
    background: #f9fafb;
    overflow: hidden;
}

.ecoflow-logo-section .ecoflow-section-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 48px;
}

/* Logo Carousel Wrapper */
.logo-carousel-wrapper {
    overflow: hidden;
    position: relative;
}

/* Logo Carousel Track - INFINITE SCROLL */
.logo-carousel-track {
    display: flex;
    gap: 12px;
    will-change: transform;
}

/* Hover'da Durdur */
.logo-carousel-track:hover {
    animation-play-state: paused;
}

/* Logo Card - Desktop (Default) */
.logo-card {
    flex: 0 0 auto;
    width: 208px;
    /* Desktop genişlik */
    padding: 48px 24px;
    background: #18191b;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.logo-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* Logo Image */
.logo-card-image {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.logo-card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Logo Title */
.logo-card-title {
    padding: 20px 0 0 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    word-break: break-word;
    line-height: 1.3;
}

/* Link styling */
.logo-carousel-track>a {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media only screen and (min-width: 1441px) {
    .logo-card {
        width: 350px;
        padding: 48px 24px;
    }
    .logo-card-title{
        font-size: 24px;
    }
  
}

/* Tablet (768px - 1200px) */
@media (max-width: 1200px) {
    .logo-card {
        width: 120px;
        /* ✅ Tablet genişlik */
        padding: 12px;
    }

    .logo-card-image {
        height: 70px;
        margin-bottom: 12px;
    }

    .logo-card-title {
        font-size: 9px;
        padding: 12px 0 0 0;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    .ecoflow-logo-section {
        padding: 40px 0;
    }

    .ecoflow-logo-section .ecoflow-section-title {
        font-size: 24px;
        margin-bottom: 32px;
    }

    .logo-card {
        width: 160px;
        /* ✅ Mobil genişlik */
        padding: 20px 16px;
    }

    .logo-card-image {
        height: 60px;
        margin-bottom: 8px;
    }

    .logo-card-title {
        font-size: 10px;
        padding: 8px 0 0 0;
    }

    .logo-carousel-track {
        gap: 12px;
    }
}

/* Very Large Screens (> 1440px) */
@media only screen and (min-width: 1441px) {
    .logo-card {
        width: 350px;
        padding: 48px 24px;
    }

    .logo-card-image {
        height: 90px;
    }

    .logo-card-title {
        font-size: 24px;
    }
}

/* ============================================
   SCENARIO SECTION
   ============================================ */

.ecoflow-scenario-section {
    padding: 60px 120px;
    max-width: 1680px;
    margin: 0 auto;
}

.ecoflow-scenario-section .ecoflow-section-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 48px;
}

/* Scenario Grid */
.scenario-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Scenario Card */
.scenario-card {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    display: block;
    transition: transform 0.3s ease;
}

/* Background Image (SCALE OLACAK) */
.scenario-card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.6s ease;
    z-index: 1;
}

/* Hover: Image Scale */
.scenario-card:hover .scenario-card-background {
    transform: scale(1.1);
}

/* Dark Overlay (BACKGROUND ÜSTÜNDE) */
.scenario-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 2;
}

/* Content (EN ÜSTTE, SCALE OLMAYACAK) */
.scenario-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Title */
.scenario-card-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    flex: 1;
}

/* Arrow Icon */
.scenario-card-arrow {
    width: 18px;
    height: 18px !important;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    /* Beyaz yapar */
    transition: transform 0.3s ease;
}

.scenario-card:hover .scenario-card-arrow {
    transform: translateX(4px);
}

/* Responsive - Tablet */
@media (max-width: 1440px) {
    .scenario-grid {
        gap: 12px;
    }
}
@media (max-width: 1023px) {
    .scenario-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .scenario-card-title {
        font-size: 18px;
    }

    .elementor-shortcode .ecoflow-scenario-section {
        padding: 0 48px;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .elementor-shortcode .ecoflow-homepage-sections .ecoflow-scenario-section {
        padding: 40px 16px;
    }

    .ecoflow-scenario-section .ecoflow-section-title {
        font-size: 24px;
        margin-bottom: 32px;
    }

    .scenario-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .scenario-card-content {
        padding: 16px;
    }

    .scenario-card-title {
        font-size: 16px;
    }

    .scenario-card-arrow {
        width: 20px;
        height: 20px;
    }
}

/* Extra Small Mobile */
@media (max-width: 480px) {
    .scenario-card-title {
        font-size: 14px;
    }

    .scenario-card-content {
        padding: 12px;
    }
}

/* BANNER SECTION */

/* Banner Container - Max Width */
/* Banner Wrapper - Container genişliğinde */
.ecoflow-banner-wrapper {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto 40px auto;
    padding: 0 120px;
}

.ecoflow-banner-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 150px;
    /* padding: 0 120px; */
    margin: 60px auto;
    display: flex;
    align-items: center;
    border-radius: 8px;
}

.ecoflow-banner-section .banner-content {
    max-width: 600px;
    padding: 60px;
}

.ecoflow-banner-section .banner-main-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.ecoflow-banner-section .banner-subtitle {
    font-size: 14px;
    margin: 0 0 21px 0;
    /* opacity: 0.9; */
    font-weight: 500;
}

.ecoflow-banner-section .banner-button {
    display: inline-block;
    font-size: 12px;
    padding: 10px 20px;
    color: #000;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ecoflow-banner-section .banner-button:hover {
    background-color: #0866e2 !important;
    color: #fff;
}

.ecoflow-banner-section.banner-theme-light .banner-main-title,
.ecoflow-banner-section.banner-theme-light .banner-subtitle {
    color: #fff;
}

.ecoflow-banner-section.banner-theme-dark .banner-main-title,
.ecoflow-banner-section.banner-theme-dark .banner-subtitle {
    color: #000;
}

@media (max-width: 1440px) {
    .ecoflow-banner-section {
        max-width: 100%;
        margin: 20px 0;
    }
}

@media (max-width: 1023px) {
    .ecoflow-banner-wrapper {
        padding: 0 48px;
    }

    .ecoflow-banner-section {
        min-height: 360px;
        align-items: flex-start;
        border-radius: 4px;
    }

    .ecoflow-banner-section .banner-content {
        padding: 16px;
    }

    .banner-main-title {
        font-size: 16px;
    }

    .ecoflow-banner-section .banner-subtitle {
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .elementor-shortcode .ecoflow-banner-wrapper {
        padding: 0;
    }

    .ecoflow-banner-section .banner-content {
        padding: 16px;
    }

    .ecoflow-banner-section {
        min-height: 180px;
        padding: 0;
        margin: 16px;
        align-items: flex-start;
    }

    .ecoflow-banner-section .banner-main-title {
        font-size: 16px;
    }

    .ecoflow-banner-section .banner-subtitle {
        font-size: 12px;
    }

    .ecoflow-banner-section .banner-button {
        padding: 10px 20px;
        font-size: 12px;
    }
}

/* ============================================
   CATEGORY SLIDE SECTION
   ============================================ */

.ecoflow-category-slide-section {
    padding-left: calc((100% - 1540px)/2);
    padding-right: 0;
    max-width: none;
    margin: 0;
    overflow: hidden;
}
section.ecoflow-category-slide-section.no-slide-wrapper.tes {
    max-width: none;
}
.category-slide-wrapper {
    position: relative;
}

/* Slider versiyonu (10+ items) */
.category-slide-wrapper .category-slide-container {
    width: 100%;
    overflow: visible;
}

.category-slide-wrapper .category-slide-track {
    display: flex;
    gap: 0;
    transition: transform 0.4s ease;
}
.category-slide-track a {
    transition: all .3s;
}
.category-slide-track a:hover .category-slide-title {
    color: #2164FF;
}

.category-slide-prev {
    left: -20px;
}

.category-slide-next {
    right: 20px;
}

/* Arrows - Hover'da görünür */
.category-slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.category-slide-wrapper:hover .category-slide-arrow {
    opacity: 1;
    pointer-events: auto;
}

.category-slide-arrow:hover:not(:disabled),
.category-slide-arrow:focus,
.category-slide-arrow:hover {
    background: rgba(0, 0, 0, 0.5);
}

.category-slide-arrow:disabled {
    background: rgba(0, 0, 0, 0.1);
    cursor: not-allowed;
    opacity: 0.3;
}

.category-slide-arrow svg {
    color: #fff;
}

/* Card */
.category-slide-card {
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    padding: 20px 0;
    transition: transform 0.3s;
}

.category-slide-card:hover {

}

.category-slide-image {
    width: 110px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-slide-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.category-slide-title {
    font-size: 12px;
    font-weight: 500;
    color: #111827;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.category-slide-subtitle {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
}

/* Responsive */
@media (max-width: 767px) {
    .category-slide-wrapper.no-slider .category-slide-track,
    .category-slide-wrapper.has-slider .category-slide-track {
        padding-left: 10px;
    }
}
@media (max-width: 768px) {
    .ecoflow-category-slide-section {
        padding-left: 0;
        overflow: visible;
    }

    .category-slide-wrapper.no-slider .category-slide-track,
    .category-slide-wrapper.has-slider .category-slide-track {
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        transform: none !important;
        transition: none !important;
        padding-left: 20px;
    }

    .category-slide-wrapper.no-slider .category-slide-track::-webkit-scrollbar,
    .category-slide-wrapper.has-slider .category-slide-track::-webkit-scrollbar {
        display: none;
    }

    .category-slide-wrapper.has-slider .category-slide-container {
        overflow: hidden;
    }

    .category-slide-arrow {
        display: none;
    }

    .category-slide-card {
        min-width: 80px;
        padding: 15px 5px;
    }

    .category-slide-image {
        width: 80px;
        height: 80px;
    }

    .category-slide-title {
        font-size: 12px;
    }

    .category-slide-subtitle {
        font-size: 10px;
    }
}

@media (max-width: 1440px) {
    .ecoflow-category-slide-section {
        padding-left: 90px;
    }

    .category-slide-image {
        max-height: 52px;
    }
}

@media (max-width: 1023px) {
    .ecoflow-homepage-sections .ecoflow-category-slide-section {
        padding-left: 0;
    }
    .category-slide-wrapper {
        padding: 0;
    }
}

/* ====================================
   YOUTUBE SECTION - GRID LAYOUT
   ==================================== */

.ecoflow-youtube-section {
    padding: 60px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.youtube-section-title {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin: 0 0 40px 0;
    text-align: center;
}

/* Grid Layout */
.youtube-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Video Card */
.youtube-video-card {
    display: flex;
    flex-direction: column;
    min-height: 344px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Video Thumbnail - Base */
.youtube-video-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
}

/* ✅ NORMAL VIDEO - 16:9 Aspect Ratio */
.youtube-video-normal .youtube-video-thumbnail {
    padding-bottom: 56.25%;
    /* 16:9 */
}

/* ✅ SHORTS VIDEO - 9:16 Aspect Ratio */
.youtube-video-short .youtube-video-thumbnail {
    padding-bottom: 100%;
    /* 9:16 */
}

/* Dark Gradient Overlay for Better Text Readability */
.youtube-video-thumbnail::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* Play Button */
.youtube-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease;
    z-index: 3;
}

.youtube-play-button:hover {
    background-color: transparent;
}

.youtube-play-button svg {
    width: 60px;
}

/* Video Info Overlay - Position Absolute */
.youtube-video-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 2;
    color: #fff;
}

.youtube-video-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.youtube-video-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ====================================
   YOUTUBE INLINE PLAYER
   ==================================== */

/* Iframe tam boyutta görünsün */
.youtube-inline-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
}

/* Thumbnail tıklanabilir */
.youtube-video-thumbnail {
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.youtube-video-thumbnail:hover {
    opacity: 0.95;
}

/* Play button hover efekti */
.youtube-play-button {
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.youtube-play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.9;
}

/* ====================================
   RESPONSIVE - LAPTOP
   ==================================== */
   @media (max-width: 1440px) {
    .ecoflow-youtube-section {
        padding: 60px 120px;
        max-width: 1440px;
    }
}
@media (max-width: 1023px) {
    .ecoflow-youtube-section {
        padding: 60px 48px;
        max-width: 1440px;
    }
}

/* ====================================
   RESPONSIVE - TABLET
   ==================================== */
@media (max-width: 1023px) {
    .youtube-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .youtube-section-title {
        font-size: 28px;
        margin-bottom: 32px;
    }

    .youtube-video-card {
        min-height: 265px;
    }
}

/* ====================================
   RESPONSIVE - MOBILE
   ==================================== */
@media (max-width: 767px) {
    .ecoflow-youtube-section {
        padding: 40px 0;
    }

    .youtube-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }

    .youtube-video-card {
        max-height: 225px;
    }

    .youtube-video-short .youtube-video-thumbnail {
        padding-bottom: 160.78%;
    }

    .youtube-section-title {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .youtube-video-info-overlay {
        padding: 16px;
    }

    .youtube-video-title {
        font-size: 16px;
        -webkit-line-clamp: 1;
    }

    .youtube-video-description {
        font-size: 13px;
        -webkit-line-clamp: 1;
    }
}
/* ====================================
   YOUTUBE CAROUSEL - Mevcut CSS'e EKLE
   (youtube-section.php için ek stiller)
   ==================================== */

/* Carousel dış sarmalayıcı — okların dışarı çıkması için */
.youtube-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
}

/* Viewport: sadece 4 kart görünsün, taşan gizlensin */
.youtube-carousel-viewport {
    flex: 1;
    overflow: hidden;
    min-width: 1200px;
}

/* Carousel track: flex, genişlik otomatik, transition ile kayar */
.youtube-grid--carousel {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Carousel moddaki kartların genişliği JS'te hesaplanır,
   ancak min-width 0 flex için zorunlu */
.youtube-grid--carousel .youtube-video-card {
    flex: 0 0 calc((100% - 72px) / 4); /* fallback: (100% - 3×24px) / 4 */
    min-width: 0;
}

/* ====================================
   NAVİGASYON OKLARI
   ==================================== */

.youtube-nav-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    color: #111;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 2;
    padding: 0;
}

.youtube-nav-btn:hover {
    background: #111;
    border-color: #111;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* Sol ok: viewport'un soluna yapışık, araya boşluk */
.youtube-nav-prev {
    margin-right: 16px;
}

/* Sağ ok: viewport'un sağına yapışık */
.youtube-nav-next {
    margin-left: 16px;
}

/* Disabled durumu (ilk / son slide) */
.youtube-nav-btn--disabled {
    opacity: 0.35;
    pointer-events: none;
}
.instagram-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s, opacity 0.2s;
    padding: 0;
}

.instagram-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.9;
}
/* ==========================================
   ICON CARDS SECTION - ISOLATED
   ========================================== */

/* Container Full Width */
.ecoflow-icon-cards-section .ecoflow-container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ecoflow-icon-cards-section {
    padding: 0 0 60px 0;
    overflow: hidden;
}
.icon-card-title-section {
        padding: 0 120px;
    max-width: 1680px;
    margin: 10px auto;
}
/* Section Title */
.ecoflow-icon-cards-section .icon-cards-section-title {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    text-align: left;

}

.ecoflow-icon-cards-section .icon-cards-wrapper {
    position: relative;
    width: 100%;
}

/* ========== SLIDER ========== */
.ecoflow-icon-cards-section .icon-cards-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    padding-right: 60px;
    padding-bottom: 20px;
}



.ecoflow-icon-cards-section .icon-cards-slider::-webkit-scrollbar {
    display: none;
}

.ecoflow-icon-cards-section .icon-cards-slider[data-dragging="true"] {
    cursor: grabbing;
    scroll-behavior: auto;
}

/* ========== CARD ========== */
.ecoflow-icon-cards-section .icon-card {
    flex: 0 0 320px;
    min-width: 320px;
    background: #fff;
    border-radius: 8px;
    padding: 32px 24px;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    justify-content: space-between;
}


.ecoflow-icon-cards-section .icon-card__icon {
    width: 36px;
    height: 36px;
    margin: 0 0 12px;
    display: flex;
    align-items: flex-start;
    justify-content: center;

}

.ecoflow-icon-cards-section .icon-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
}

.ecoflow-icon-cards-section .icon-card__title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.ecoflow-icon-cards-section .icon-card__subtitle {
    font-size: 14px;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.5;
}

/* ========== CONTROLS (Desktop Only) ========== */
.ecoflow-icon-cards-section .icon-cards-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    gap: 24px;
    padding-left: 60px;
    padding-right: 60px;
    max-width: 1570px;
    margin-left: auto;
    margin-right: auto;
}

/* Progress Bar */
/* Progress Bar */
.ecoflow-icon-cards-section .icon-cards-progress {
    flex: 0 0 auto; /* Artık flex değil, sabit genişlik */
}

.ecoflow-icon-cards-section .progress-bar {
    width: 60px; /* Dış bar genişliği */
    height: 4px;
    background: #e5e7eb;
    border-radius: 10px;
    position: relative;
}

.ecoflow-icon-cards-section .progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 20px; /* İç bar genişliği */
    background: rgb(0 0 0 / 50%);
    border-radius: 10px;
    transition: left 0.3s ease;
}

/* Navigation Arrows */
.ecoflow-icon-cards-section .icon-cards-arrows {
    display: flex;
    gap: 12px;
}

.ecoflow-icon-cards-section .icon-arrow-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: #e5e5e5;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    color: #454545;
}
.ecoflow-icon-cards-section .icon-arrow-btn:hover,
.ecoflow-icon-cards-section .icon-arrow-btn:focus {
    outline: none;
}
.ecoflow-icon-cards-section .icon-arrow-btn:hover:not(:disabled) {
    background: #e5e5e5;
    border: none;
    color: #454545;

}

.ecoflow-icon-cards-section .icon-arrow-btn:disabled {
    cursor: not-allowed;
    opacity: .3;
}

.ecoflow-icon-cards-section .icon-arrow-btn svg {
    width: 22px;
    height: 22px;
}

/* ========== RESPONSIVE ========== */

/* Large Screens */
@media (min-width: 2550px) {
    .ecoflow-icon-cards-section .icon-cards-slider {
        padding-left: calc((100% - 1440px) / 2);
    }
}
@media (min-width:1880px) {
    /* Spacer for left alignment */
.ecoflow-icon-cards-section .icon-cards-spacer {
    flex: 0 0 215px; /* 230px - 20px (yarım gap) */
    min-width: 215px;
}
}
/* Laptop */
@media (max-width: 1679px) {
    .ecoflow-icon-cards-section .icon-cards-spacer {
    flex: 0 0 200px; /* 230px - 20px (yarım gap) */
    min-width: 200px;
}
    .ecoflow-icon-cards-section .icon-cards-slider {
        padding-left: 100px;
    }
    
    .ecoflow-icon-cards-section .icon-cards-controls {
        padding-left: 123px;
        padding-right: 116px;
    }
}

@media (max-width: 1440px) {
    .ecoflow-icon-cards-section .icon-cards-slider {
        padding-left: 104px;
    }
    .ecoflow-icon-cards-section .icon-card {
        flex: 0 0 240px;
        min-width: 240px;
    }
}

/* Tablet & Mobile - Hide Controls */
@media (max-width: 1023px) {
    .ecoflow-icon-cards-section .icon-cards-controls {
        display: none;
    }
    
    .ecoflow-icon-cards-section {
        padding: 40px 0;
    }
    
    .ecoflow-icon-cards-section .icon-card-title-section {
        font-size: 28px;
        margin-bottom: 32px;
        padding:0 48px;
    }
    
    .ecoflow-icon-cards-section .icon-cards-slider {
        padding-left: 34px;
        padding-right: 40px;
    }
    
    .ecoflow-icon-cards-section .icon-card {
        flex: 0 0 220px;
        min-width: 220px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .ecoflow-icon-cards-section {
        padding: 32px 0;
    }
    
    .ecoflow-icon-cards-section .icon-card-title-section{
        font-size: 24px;
        margin-bottom: 24px;
        padding: 0 16px;
    }
    
    .ecoflow-icon-cards-section .icon-cards-slider {
        gap: 16px;
        padding-left: 0;
        padding-right: 16px;
    }
    
    .ecoflow-icon-cards-section .icon-card {
        flex: 0 0 200px;
        min-width: 200px;
        padding: 24px 16px;
    }
    
    .ecoflow-icon-cards-section .icon-card__icon {
        width: 48px;
        height: 48px;
        margin-bottom: 16px;
    }
    
    .ecoflow-icon-cards-section .icon-card__title {
        font-size: 16px;
    }
    
    .ecoflow-icon-cards-section .icon-card__subtitle {
        font-size: 13px;
    }
}
/* Large Screens */
@media (min-width: 2550px) {
    .ecoflow-icon-cards-section .icon-cards-spacer {
        flex: 0 0 calc((100% - 1440px) / 2 - 12px);
        min-width: calc((100% - 1440px) / 2 - 12px);
    }
}
@media (min-width: 1679px) and (max-width: 1879px) {
    .ecoflow-icon-cards-section .icon-cards-slider {
        padding-left: calc((100% - 1478px)/2);
    }
}
/* Laptop */
@media (max-width: 1679px) {
    .ecoflow-icon-cards-section .icon-cards-spacer {
        flex: 0 0 0;
        min-width: 0;
    }
}

@media (max-width: 1440px) {
    .ecoflow-icon-cards-section .icon-cards-spacer {
        flex: 0 0 0;
        min-width: 0;
    }
}

@media (max-width: 1023px) {
    .ecoflow-icon-cards-section .icon-cards-spacer {
        flex: 0 0 0;
        min-width: 0;
    }
}

@media (max-width: 767px) {
    .ecoflow-icon-cards-section .icon-cards-spacer {
        flex: 0 0 4px;
        min-width: 4px;
    }
}

       #ecoflow-bulten-wrap {max-width: 352px;height: 48px;border: 1px solid #fff;border-radius: 8px;min-width: 350px;}
        #ecoflow-bulten-msg { display: none; padding: 10px 14px; border-radius: 4px; margin-bottom: 10px; font-size: 14px; position: absolute;bottom: -12px;}
        #ecoflow-bulten-form {display: flex;height: 48px;border: 8px;}
        #ecoflow-bulten-email {flex: 1;padding: 0px 14px;font-size: 14px;background: transparent;border: none;height: 46px;line-height: 1;}
        #ecoflow-bulten-form button[type="submit"] {padding: 0;height: 46px;width: 48px;background: #ffffff;color: #000000;border: none;border-radius: 0 8px 8px 0;font-size: 21px;cursor: pointer;display: flex;align-items: center;justify-content: center;margin-right: -1px;}
        #ecoflow-bulten-form button[type="submit"]:hover { background: #ffffff; }
  #ecoflow-bulten-email { color: #fff; }
#ecoflow-bulten-email:focus { outline: none; color: #fff; }
#ecoflow-bulten-email::-webkit-input-placeholder { color: #ddd; opacity: 1; }
#ecoflow-bulten-email::-moz-placeholder { color: #ddd; opacity: 1; }
#ecoflow-bulten-email:-ms-input-placeholder { color: #ddd; opacity: 1; }
#ecoflow-bulten-email::placeholder { color: #ddd; opacity: 1; }
#ecoflow-bulten-email:focus::-webkit-input-placeholder { color: #ddd; }
#ecoflow-bulten-email:focus::-moz-placeholder { color: #ddd; }
#ecoflow-bulten-email:focus::placeholder { color: #ddd; }
#ecoflow-bulten-consent span {
  color: #919191;
  line-height: 18px;
}
#ecoflow-bulten-consent span a{
  color: #adafb3;
  text-decoration: underline;
}