/* =========================================================
   ENERGY DRINK LOGO — SLICE GLITCH (AUTO LOOP)
   - Hover gerekmez
   - 4.4sn çalışır, 1.1sn durur (toplam 5.5sn döngü)
   - Arka plan/gradient yok: sadece logonun kendisi bozulur
   - Mevcut yapıyı bozmaz: .logo-glitch-1 ve içindeki <a> üstüne çalışır
   ========================================================= */

/* 0) Ayarlar */
.logo-glitch-1 {
    position: relative;
    overflow: visible;

    /* HANGİ LOGO BOZULSUN? (lg’de görünen MOST için) */
    --logo-url: url("/assets/image/icon/logo-most.webp");

    /* şiddet */
    --glitch-amp: 18px;

    /* döngü: 4.4sn glitch + 1.1sn pause = 5.5sn */
    --loop: 5.5s;
}

/* 1) Referans alan */
.logo-glitch-1 a {
    position: relative;
    display: block;
}

/* 2) Asıl logo (görünen img'ler) */
.logo-glitch-1 img {
    position: relative;
    z-index: 1;
    will-change: transform;
    /* 3sn jitter / 2sn stabil olacak şekilde loop */
    animation: base-jitter-loop var(--loop) infinite linear;
}

/* 3) Slice overlay katmanları: sadece logonun kopyası (arka plan yok) */
.logo-glitch-1 a::before,
.logo-glitch-1 a::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: var(--logo-url) center / contain no-repeat;

    z-index: 2;

    /* normalde kapalı -> hayalet görüntü yok */
    opacity: 0;
    clip-path: inset(100% 0 0 0);

    will-change: transform, clip-path, opacity;

    animation-duration: var(--loop);
    animation-iteration-count: infinite;
    animation-timing-function: steps(2, end);
    animation-fill-mode: both;
}

/* 4) İki farklı slice katmanı */
.logo-glitch-1 a::before {
    animation-name: slice-loop-a;
}
.logo-glitch-1 a::after {
    animation-name: slice-loop-b;
}

/* =========================================================
     KEYFRAMES
     DÖNGÜ HARİTASI (5.5s):
     0–80%   ≈ 4.4s  => glitch ON (hızlı hareket)
     80–100% ≈ 1.1s  => glitch OFF (tam stabil)
     ========================================================= */

/* Ana logoda hafif jitter (sadece glitch bölgesinde) */
@keyframes base-jitter-loop {
    0%,
    4% {
        transform: translateX(0);
    }
    5% {
        transform: translateX(-1px);
    }
    10% {
        transform: translateX(1px);
    }
    15% {
        transform: translateX(-1px);
    }
    20% {
        transform: translateX(1px);
    }
    25% {
        transform: translateX(-0.5px);
    }
    30% {
        transform: translateX(0.5px);
    }
    35% {
        transform: translateX(-1px);
    }
    40% {
        transform: translateX(1px);
    }
    45% {
        transform: translateX(-0.5px);
    }
    50% {
        transform: translateX(0.5px);
    }
    55% {
        transform: translateX(-1px);
    }
    60% {
        transform: translateX(1px);
    }
    65% {
        transform: translateX(-0.5px);
    }
    70% {
        transform: translateX(0.5px);
    }
    75% {
        transform: translateX(-1px);
    }

    /* Durma bölgesi */
    80%,
    100% {
        transform: translateX(0);
    }
}

/* Slice A: orta band kırılmaları */
@keyframes slice-loop-a {
    /* Stabil (kapalı) */
    0%,
    4%,
    100% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
        transform: translateX(0);
    }

    /* Glitch ON - hızlı hareket */
    5% {
        opacity: 1;
        clip-path: inset(48% 0 46% 0);
        transform: translateX(calc(var(--glitch-amp) * -1));
    }
    10% {
        clip-path: inset(52% 0 40% 0);
        transform: translateX(var(--glitch-amp));
    }
    15% {
        clip-path: inset(44% 0 50% 0);
        transform: translateX(calc(var(--glitch-amp) * -0.8));
    }
    20% {
        clip-path: inset(56% 0 36% 0);
        transform: translateX(calc(var(--glitch-amp) * 0.9));
    }
    25% {
        clip-path: inset(49% 0 45% 0);
        transform: translateX(calc(var(--glitch-amp) * -0.7));
    }
    30% {
        clip-path: inset(51% 0 41% 0);
        transform: translateX(calc(var(--glitch-amp) * 0.8));
    }
    35% {
        clip-path: inset(47% 0 47% 0);
        transform: translateX(calc(var(--glitch-amp) * -0.9));
    }
    40% {
        clip-path: inset(53% 0 39% 0);
        transform: translateX(calc(var(--glitch-amp) * 0.7));
    }
    45% {
        clip-path: inset(45% 0 49% 0);
        transform: translateX(calc(var(--glitch-amp) * -0.6));
    }
    50% {
        clip-path: inset(55% 0 37% 0);
        transform: translateX(calc(var(--glitch-amp) * 0.85));
    }
    55% {
        clip-path: inset(50% 0 42% 0);
        transform: translateX(calc(var(--glitch-amp) * -0.75));
    }
    60% {
        clip-path: inset(48% 0 44% 0);
        transform: translateX(calc(var(--glitch-amp) * 0.65));
    }
    65% {
        clip-path: inset(52% 0 40% 0);
        transform: translateX(calc(var(--glitch-amp) * -0.8));
    }
    70% {
        clip-path: inset(46% 0 48% 0);
        transform: translateX(calc(var(--glitch-amp) * 0.7));
    }
    75% {
        clip-path: inset(54% 0 38% 0);
        transform: translateX(calc(var(--glitch-amp) * -0.5));
    }

    /* Glitch OFF (durma) */
    80% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
        transform: translateX(0);
    }
}

/* Slice B: karşı faz + daha sert vuruş */
@keyframes slice-loop-b {
    /* Stabil (kapalı) */
    0%,
    6%,
    100% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
        transform: translateX(0);
    }

    /* Glitch ON - hızlı hareket */
    7% {
        opacity: 1;
        clip-path: inset(50% 0 42% 0);
        transform: translateX(calc(var(--glitch-amp) * 1.1));
    }
    12% {
        clip-path: inset(42% 0 54% 0);
        transform: translateX(calc(var(--glitch-amp) * -1.2));
    }
    18% {
        clip-path: inset(58% 0 34% 0);
        transform: translateX(calc(var(--glitch-amp) * 1));
    }
    24% {
        clip-path: inset(46% 0 48% 0);
        transform: translateX(calc(var(--glitch-amp) * -1.1));
    }
    30% {
        clip-path: inset(54% 0 38% 0);
        transform: translateX(calc(var(--glitch-amp) * 0.9));
    }
    36% {
        clip-path: inset(44% 0 52% 0);
        transform: translateX(calc(var(--glitch-amp) * -1));
    }
    42% {
        clip-path: inset(56% 0 36% 0);
        transform: translateX(calc(var(--glitch-amp) * 1.15));
    }
    48% {
        clip-path: inset(48% 0 46% 0);
        transform: translateX(calc(var(--glitch-amp) * -0.95));
    }
    54% {
        clip-path: inset(52% 0 40% 0);
        transform: translateX(calc(var(--glitch-amp) * 0.85));
    }
    60% {
        clip-path: inset(40% 0 56% 0);
        transform: translateX(calc(var(--glitch-amp) * -1.05));
    }
    66% {
        clip-path: inset(60% 0 32% 0);
        transform: translateX(calc(var(--glitch-amp) * 0.95));
    }
    72% {
        clip-path: inset(45% 0 49% 0);
        transform: translateX(calc(var(--glitch-amp) * -0.8));
    }

    /* Glitch OFF (durma) */
    80% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
        transform: translateX(0);
    }
}

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

/* Mobilde daha hafif */
@media (max-width: 1024px) {
    .logo-glitch-1 {
        --glitch-amp: 12px;
    }
}

/* Hareket azaltma tercihine saygı */
@media (prefers-reduced-motion: reduce) {
    .logo-glitch-1 img,
    .logo-glitch-1 a::before,
    .logo-glitch-1 a::after {
        animation: none !important;
        opacity: 0 !important;
        transform: none !important;
        clip-path: none !important;
    }
}


.marquee {
  overflow: hidden;
  position: relative;
  /*-webkit-mask-image: linear-gradient(var(--mask-direction, to right),hsla(0,0%,0%,0),hsl(0,0%,0%) 10%,hsl(0,0%,0%) 90%,hsla(0,0%,0%,0));
  mask-image: linear-gradient(var(--mask-direction, to right),hsla(0,0%,0%,0),hsl(0,0%,0%) 10%,hsl(0,0%,0%) 90%,hsla(0,0%,0%,0))*/
}

.marquee__ctn {
  display: flex;
  width: 100%
}

.marquee__track {
  display: flex
}

@supports (-webkit-touch-callout: none) {
  .marquee__ctn {
      transform: translateZ(0) scale(1);
      perspective: 1px
  }
}

.marquee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 275px;
  padding: 15px 10px;
}

.marquee__item img {
  height: 30px;
  width: 100%;
  object-fit: contain;
  backface-visibility: hidden;
}

.orange {
  background-color: #f47321;
}
.cola {
  background-color: #ed1c24;
}
.energy {
  background-color: #000000;
}

/* =========================================================
   PRODUCT SPECIFICATIONS CARD
   ========================================================= */

.product-specs-wrapper {
  width: 100%;
  max-width: 600px;
}

.product-specs {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.product-specs-header {
  background-color: #000000;
  padding: 16px 24px;
}

.product-specs-header h4 {
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.4px;
  margin: 0;
}

.product-specs-body {
  padding: 24px;
}

.product-specs-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.product-specs-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 5px 0;
  border-bottom: 1px solid #f3f4f6;
}

.product-specs-item:last-child {
  border-bottom: none;
}

.product-specs-label {
  color: rgba(0, 0, 0, 0.7);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.3px;
  flex: 1;
}

.product-specs-value {
  color: #000000;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.3px;
  text-align: right;
  flex: 1;
}

.product-specs-promotions {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

.product-specs-promotions h5 {
  color: #000000;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.3px;
  margin: 0 0 16px 0;
}

.product-promo-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-promo-item {
  background-color: #f9fafb;
  border-radius: 8px;
  padding: 16px;
  border-left: 4px solid #000000;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.product-promo-number {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: #000000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.product-promo-content {
  flex: 1;
}

.product-promo-title {
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 4px 0;
}

.product-promo-desc {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}


.bg-green-100 {
  background-color: #d1e7dd;
} 
.border-green-400 {
  border-color: #198754;
}
.text-green-700 {
  color: #198754;
}
.bg-red-100 {
  background-color: #f8d7da;
}
.border-red-400 {
  border-color: #dc3545;
}
.text-red-700 {
  color: #dc3545;
}

/* Responsive */
@media (max-width: 1024px) {
  .product-specs-wrapper {
    max-width: 100%;
  }
  
  .product-specs-body {
    padding: 20px;
  }
  
  .product-specs-header {
    padding: 14px 20px;
  }
  
  .product-specs-header h4 {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .product-specs-body {
    padding: 16px;
  }
  
  .product-specs-header {
    padding: 12px 16px;
  }
  
  .product-specs-item {
    flex-direction: column;
    gap: 4px;
  }
  
  .product-specs-value {
    text-align: left;
  }
  
  .product-specs-label,
  .product-specs-value {
    font-size: 14px;
  }
}

@media (min-width: 1025px) {
    .min-lg\:flex {
        display: flex;
    }
    .min-lg\:gap-\[20px\] {
        gap: 20px;
    }
    .min-lg\:justify-between {
        justify-content: space-between;
    }
    .min-lg\:w-1\/2 {
        width: 50%;
    }
}

@media (max-width: 768px) {
  .mobile-order-1 {
    order: 1;
  }
  .mobile-order-2 {
    order: 2;
  }
}