/* Showcase & Labels shared animations */
:root {
  --reveal-distance: 24px;
}

/* Mobilde animasyon sırasında yatay scroll'u engelle */
@media (max-width: 1024px) {
  body {
    overflow-x: hidden !important;
  }
  
  html {
    overflow-x: hidden !important;
  }
  
  /* Ana container'lar için de overflow kontrolü */
  .main-wrap,
  .container,
  .container-fluid,
  main {
    overflow-x: hidden;
  }
  
  /* Mobilde animasyon mesafelerini azalt */
  :root {
    --reveal-distance: 12px;
  }
  
  .reveal-left { 
    transform: translateX(-8px); 
  }
  
  .reveal-right { 
    transform: translateX(8px); 
  }
}

.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
  will-change: auto;
}

.reveal-up { transform: translateY(var(--reveal-distance)); }
.reveal-left { transform: translateX(calc(-1 * var(--reveal-distance))); }
.reveal-right { transform: translateX(var(--reveal-distance)); }
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible { transform: translate(0, 0); }

/* Subtle scale-in for tiles/cards */
.reveal.scale-in { transform: translateY(16px) scale(0.98); }
.reveal.scale-in.is-visible { transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; transform: none; }
}

/* Safeguard: keep category icons always visible even if reveal class is applied */
.category-icon-main-box,
.category-icon-main-slick {
  opacity: 1 !important;
  transform: none !important;
}
.category-icon-main-box.reveal,
.category-icon-main-slick.reveal {
  transition: none !important;
}

/* iOS Fix: Video elementlerini reveal animasyonundan muaf tut */
video,
.tiktok-video-player,
.tiktok-video-wrapper,
.tiktok-slide-item,
.category-icon-main-box video,
.category-icon-main-slick video,
.banner-component-wrapper video,
.blog-banner-wrapper video {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  visibility: visible !important;
}

/* iOS ve Safari için video container'ları - CRITICAL FIX */
@supports (-webkit-touch-callout: none) {
  /* iOS/Safari specific - Force all video containers visible */
  .tiktok-slide-item,
  .tiktok-video-wrapper,
  .category-icon-main-box,
  .category-icon-main-slick,
  .category-icon-main-slide,
  .category-slider-bottom-card,
  .category-slider-bottom-icon,
  .banner-component-wrapper,
  .showcase-banner,
  .banner-img {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    will-change: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Video elements - force visibility on iOS */
  video,
  video source,
  .category-slider-bottom-icon-img,
  .tiktok-video-player {
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }
  
  /* Disable all reveal animations on iOS for video containers and banners */
  .reveal video,
  .reveal .category-icon-main-box,
  .reveal .category-icon-main-slick,
  .reveal.category-icon-main-box,
  .reveal.category-icon-main-slick,
  .reveal.banner-component-wrapper,
  .reveal.showcase-banner,
  .reveal.banner-img,
  .reveal .banner-component-wrapper,
  .reveal .showcase-banner,
  .reveal .banner-img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  
  /* iOS Performance Boost: Reduce animation complexity */
  .reveal {
    transition-duration: 0.4s !important; /* Daha hızlı animasyonlar */
  }
  
  /* iOS: Eager load videoları */
  video {
    loading: eager !important;
  }
}

/* Blog section: parent-triggered animations */
.blog-slider-section .blog-card {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-slider-section.blog-animate .blog-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Mobilde scale animasyonunu hafiflet */
@media (max-width: 1024px) {
  .blog-slider-section .blog-card {
    transform: translateY(12px) scale(0.99);
  }
}
/* Stagger for first items */
.blog-slider-section.blog-animate .blog-card:nth-child(1) { transition-delay: 60ms; }
.blog-slider-section.blog-animate .blog-card:nth-child(2) { transition-delay: 120ms; }
.blog-slider-section.blog-animate .blog-card:nth-child(3) { transition-delay: 180ms; }
.blog-slider-section.blog-animate .blog-card:nth-child(4) { transition-delay: 240ms; }
.blog-slider-section.blog-animate .blog-card:nth-child(5) { transition-delay: 300ms; }
.blog-slider-section.blog-animate .blog-card:nth-child(6) { transition-delay: 360ms; }

/* Category icon box: parent-triggered animations, avoid slick clones */
.category-icon-main-box .category-icon-main-slide:not(.slick-cloned) {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned) {
  opacity: 1;
  transform: translateY(0);
}
/* Alternate direction for variety - sadece desktop'ta yatay hareket */
@media (min-width: 1025px) {
  .category-icon-main-box .category-icon-main-slide:not(.slick-cloned):nth-child(2n) {
    transform: translateX(18px);
  }
  .category-icon-main-box .category-icon-main-slide:not(.slick-cloned):nth-child(2n+1) {
    transform: translateX(-18px);
  }
  .category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(2n),
  .category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(2n+1) {
    transform: translateX(0);
  }
}
/* Stagger the first 10 items */
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(1) { transition-delay: 50ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(2) { transition-delay: 100ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(3) { transition-delay: 150ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(4) { transition-delay: 200ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(5) { transition-delay: 250ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(6) { transition-delay: 300ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(7) { transition-delay: 350ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(8) { transition-delay: 400ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(9) { transition-delay: 450ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(10) { transition-delay: 500ms; }

/* ProductBox: subtle image zoom on hover (kept here per showcase css usage) */
.product-cart-wrap .product-img-action-wrap { overflow: hidden; }
.product-cart-wrap .product-img.product-img-zoom { overflow: hidden; }
.product-cart-wrap .product-img.product-img-zoom a { display: block; }
.product-cart-wrap .product-img.product-img-zoom a img.default-img {
  display: block;
  transform-origin: center center;
  transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.product-cart-wrap:hover .product-img.product-img-zoom a img.default-img {
  transform: scale(1.05);
}

/* ========================================
   Bottom Slider Component Styles
   ======================================== */

/* Desktop: Banner'lar yan yana (grid) */
.bottom-slider-banners {
    display: grid;
    /* grid-template-columns JavaScript tarafından dinamik ayarlanacak */
    gap: 20px;
}

.bottom-slider-item {
    width: 100%;
}

/* Bottom slider içindeki banner görselleri - 16px border radius */
.bottom-slider-banners img,
.bottom-slider-banners video,
.bottom-slider-banners .banner-component-wrapper,
.bottom-slider-banners .banner-component-wrapper a,
.bottom-slider-banners .banner-img,
.bottom-slider-item img,
.bottom-slider-item video,
.bottom-slider-item .banner-component-wrapper,
.bottom-slider-item .banner-img {
    border-radius: 16px !important;
    overflow: hidden;
}

.bottom-slider-item .banner-component-wrapper a {
    display: block;
    overflow: hidden;
    border-radius: 16px !important;
}

/* Mobil: Slick slider olacak, grid'i kapat */
@media (max-width: 768px) {
    .bottom-slider-banners {
        display: block !important; /* Grid'i kapat, slick devreye girsin */
        grid-template-columns: none !important; /* Grid'i tamamen kapat */
        padding: 0 !important; /* TÜM padding kaldır */
        margin-left: 0 !important;
        margin-right: 0 !important;
        direction: ltr !important; /* Sadece bottom slider LTR aksın */
    }

    /* Slick slider margin düzeltmesi - İLK ITEM TAM GÖRÜNSÜN */
        .bottom-slider-banners.slick-initialized {
            display: block !important; /* Slick aktifken block olmalı */
            margin-left: -1px !important;
            width: 100% !important;
        }

    .bottom-slider-banners .slick-list {
        overflow: visible !important; /* Yarım item görünsün */
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        clip-path: inset(0 -100px 0 0); /* Sadece sağda overflow görünsün, solda gizle */
        direction: ltr !important; /* Slide akışı soldan sağa */
    }
    
    .bottom-slider-banners .slick-track {
        margin-left: 0 !important; /* Track'i sıfırla */
        padding-left: 0 !important;
        direction: ltr !important; /* Slide akışı soldan sağa */
        display: flex !important; /* Tüm slide'lar tek satırda kalsın */
        flex-wrap: nowrap !important;
    }

    .bottom-slider-banners.slick-initialized .slick-slide {
        margin: 0 7px !important; /* Slide'lar arası boşluk */
        float: none !important; /* Flex ile birlikte ikinci satıra kaymayı engelle */
    }
    
    /* İlk slide'ın sol margin'ini kaldır */
    .bottom-slider-banners.slick-initialized .slick-slide:first-child {
        margin-left: 0 !important;
    }
    
    .bottom-slider-item {
        /* Item wrapper */
    }
}

/* ========================================
   Category Content Toggle - Collapsible Section
   ======================================== */
.category-content-wrapper {
    margin: 40px 0;
    width: 100%;
}

.category-content-box {
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    position: relative;
}

.category-content-box.collapsed {
    max-height: 150px;
    opacity: 0.7;
}

.category-content-box.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
}

.category-content-box.expanded {
    max-height: 5000px;
    opacity: 1;
}

.category-content-box.expanded::after {
    display: none;
}

.category-content-toggle-btn-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.category-content-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 15px;
    width: 235px;
    background: #FF6A08;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(255, 106, 8, 0.25);
}

.category-content-toggle-btn:hover {
    background: #e55f07;
    box-shadow: 0 6px 18px rgba(255, 106, 8, 0.35);
    transform: translateY(-2px);
}

.category-content-toggle-btn:active {
    transform: translateY(0);
}

.category-content-toggle-btn .toggle-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-content-toggle-btn.expanded .toggle-icon {
    transform: rotate(180deg);
}

/* Responsive */
@media (max-width: 768px) {
    .category-content-wrapper {
        margin: 30px 0;
    }

    .category-content-box.collapsed {
        max-height: 120px;
    }

    .category-content-toggle-btn {
        padding: 10px 24px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .category-content-wrapper {
        margin: 25px 0;
    }

    .category-content-box.collapsed {
        max-height: 100px;
    }

    .category-content-toggle-btn {
        padding: 10px 20px;
        font-size: 12px;
        width: 55%;
        justify-content: center;
    }
}