/* Hero görseli: E-Com Asistan (bütünü).

   Üç kart, üç modül: stok/fiyat senkronu → kampanya kârlılık analizi →
   müşteri sorusuna yanıt. Sayfanın iddiası "üçü de aynı panelde" olduğu için
   kartlar üst üste binerek TEK bir yığın gibi durur.

   ANİMASYON KURALI (bkz. entegrehero.css, aihero.css): döngüyü paylaşan her
   öğenin KENDİ keyframe'i vardır. Tek keyframe + animation-delay `infinite`
   ile faz kaydırır. Ortak döngü: 8 sn.

   KONTRAST: kartların içi beyaz zemin; ink-900 (17,9:1) ve ink-500 (4,8:1)
   kullanılıyor. Cam kartta beyaz yazı koyu bandın üstünde 5:1 üzeri. */

.ekh {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 32rem;
    margin-left: auto;
    padding: var(--sp-8) var(--sp-6) var(--sp-8) var(--sp-10);
}

/* ------------------------------------------------------- 1) stok kartı */

.ekh__stok {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    width: 100%;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: 0 20px 44px rgba(2, 6, 23, 0.38);
    opacity: 0;
    animation: ekh-stok 8s var(--ease-out) infinite;
}

.ekh__urun { display: flex; align-items: center; gap: var(--sp-3); }

.ekh__gorsel {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}

.ekh__urun-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.ekh__urun-ad {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: var(--fw-bold);
    color: var(--ink-900);
}

.ekh__urun-kod {
    font-size: 10px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    color: var(--ink-500);
}

.ekh__adet { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

.ekh__adet-etiket {
    font-size: 9px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-500);
}

/* İki değer aynı kutuda: biri sönerken diğeri belirir */
.ekh__adet-deger { position: relative; display: block; min-width: 2.4rem; height: 20px; }

.ekh__adet-eski,
.ekh__adet-yeni {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 15px;
    font-weight: var(--fw-bold);
    line-height: 20px;
}

.ekh__adet-eski { color: var(--ink-500); animation: ekh-eski 8s var(--ease-out) infinite; }

.ekh__adet-yeni {
    color: var(--brand-700);
    opacity: 0;
    animation: ekh-yeni 8s var(--ease-out) infinite;
}

/* ------------------------------------------------------- kanal şeridi */

.ekh__kanallar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.ekh__logolar { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }

.ekh__logo {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: var(--r-sm);
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
    /* Kanal daha yazılmadan soluk durur */
    opacity: 0.3;
    filter: grayscale(1);
}

.ekh__logo img { width: 19px; height: 19px; object-fit: contain; }

.ekh__logo--1 { animation: ekh-logo-1 8s var(--ease-out) infinite; }
.ekh__logo--2 { animation: ekh-logo-2 8s var(--ease-out) infinite; }
.ekh__logo--3 { animation: ekh-logo-3 8s var(--ease-out) infinite; }
.ekh__logo--4 { animation: ekh-logo-4 8s var(--ease-out) infinite; }
.ekh__logo--5 { animation: ekh-logo-5 8s var(--ease-out) infinite; }

.ekh__senkron {
    flex: none;
    padding: 5px 11px;
    border-radius: 999px;
    /* brand-700 beyaz yazıyla 5,36:1 */
    background: var(--brand-700);
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    color: #fff;
    opacity: 0;
    animation: ekh-senkron 8s var(--ease-out) infinite;
}

/* --------------------------------------------------- 2) kampanya kartı */

.ekh__kampanya {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    width: 92%;
    margin: calc(var(--sp-3) * -1) 0 0 auto;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(3px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    opacity: 0;
    animation: ekh-kampanya 8s var(--ease-out) infinite;
}

.ekh__kampanya-baslik {
    font-size: 9px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.ekh__satirlar { list-style: none; margin: 0; padding: 0; }

.ekh__sr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 4px 0;
    font-size: 11.5px;
    opacity: 0;
}

.ekh__sr-ad {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--fw-semibold);
    color: rgba(255, 255, 255, 0.74);
}

.ekh__sr-deger { flex: none; font-weight: var(--fw-bold); color: #fff; }

/* Elenen satır: üstü çizilmez, soluklaşır — "katılmadık" demek yeterli.
   Saydamlık 0,72'nin ALTINA İNMEZ: 0,5'te koyu bandın üstünde 3,19:1 kalıyor,
   11,5px metin için eşik 4,5:1. 0,72 → 4,8:1. */
.ekh__sr--disari .ekh__sr-ad,
.ekh__sr--disari .ekh__sr-deger { color: rgba(255, 255, 255, 0.72); }

.ekh__sr--1 { animation: ekh-sr-1 8s var(--ease-out) infinite; }
.ekh__sr--2 { animation: ekh-sr-2 8s var(--ease-out) infinite; }

/* ------------------------------------------------------- 3) soru kartı */

.ekh__soru {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 86%;
    margin: calc(var(--sp-3) * -1) auto 0 0;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: 0 20px 44px rgba(2, 6, 23, 0.38);
    opacity: 0;
    animation: ekh-soru 8s var(--ease-out) infinite;
}

.ekh__soru-etiket {
    font-size: 9px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-500);
}

.ekh__soru-metin {
    font-size: 11.5px;
    font-weight: var(--fw-semibold);
    line-height: 1.45;
    color: var(--ink-700);
}

.ekh__yanit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 5px 11px 5px 7px;
    border-radius: 999px;
    background: var(--brand-700);
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    color: #fff;
    opacity: 0;
    animation: ekh-yanit 8s var(--ease-out) infinite;
}

.ekh__tik {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.24);
}

.ekh__tik::after {
    content: "";
    position: absolute;
    top: 3.5px;
    left: 5px;
    width: 4px;
    height: 6.5px;
    border: solid #fff;
    border-width: 0 1.7px 1.7px 0;
    transform: rotate(45deg);
}

/* ---------------------------------------------------------- animasyon */

@keyframes ekh-stok {
    0%,  2%   { opacity: 0; transform: translateY(-8px); }
    9%,  92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes ekh-eski {
    0%,  16%  { opacity: 1; transform: none; }
    21%, 100% { opacity: 0; transform: translateY(-7px); }
}

@keyframes ekh-yeni {
    0%,  17%  { opacity: 0; transform: translateY(7px); }
    23%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(7px); }
}

/* Kanallar sırayla yazılır — beşi aynı anda dönerse "sıra" hissi kaybolur */
@keyframes ekh-logo-1 { 0%, 25% { opacity: 0.3; filter: grayscale(1); } 30%, 92% { opacity: 1; filter: none; } 98%, 100% { opacity: 0.3; filter: grayscale(1); } }
@keyframes ekh-logo-2 { 0%, 28% { opacity: 0.3; filter: grayscale(1); } 33%, 92% { opacity: 1; filter: none; } 98%, 100% { opacity: 0.3; filter: grayscale(1); } }
@keyframes ekh-logo-3 { 0%, 31% { opacity: 0.3; filter: grayscale(1); } 36%, 92% { opacity: 1; filter: none; } 98%, 100% { opacity: 0.3; filter: grayscale(1); } }
@keyframes ekh-logo-4 { 0%, 34% { opacity: 0.3; filter: grayscale(1); } 39%, 92% { opacity: 1; filter: none; } 98%, 100% { opacity: 0.3; filter: grayscale(1); } }
@keyframes ekh-logo-5 { 0%, 37% { opacity: 0.3; filter: grayscale(1); } 42%, 92% { opacity: 1; filter: none; } 98%, 100% { opacity: 0.3; filter: grayscale(1); } }

@keyframes ekh-senkron {
    0%,  43%  { opacity: 0; transform: scale(0.88); }
    49%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: scale(0.88); }
}

@keyframes ekh-kampanya {
    0%,  52%  { opacity: 0; transform: translateY(6px); }
    59%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(6px); }
}

@keyframes ekh-sr-1 { 0%, 59% { opacity: 0; transform: translateX(6px); } 65%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateX(6px); } }
@keyframes ekh-sr-2 { 0%, 64% { opacity: 0; transform: translateX(6px); } 70%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateX(6px); } }

@keyframes ekh-soru {
    0%,  74%  { opacity: 0; transform: translateY(8px); }
    81%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(8px); }
}

@keyframes ekh-yanit {
    0%,  85%  { opacity: 0; transform: scale(0.88); }
    90%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: scale(0.88); }
}

/* Hareket azaltma tercihi: kompozisyon TAMAMLANMIŞ hâlde durur.
   opacity: 0 ile başlayan her öğe geri getirilir; yoksa sayfa boş görünür. */
@media (prefers-reduced-motion: reduce) {
    .ekh *,
    .ekh { animation: none !important; }

    .ekh__stok,
    .ekh__adet-yeni,
    .ekh__senkron,
    .ekh__kampanya,
    .ekh__sr,
    .ekh__soru,
    .ekh__yanit { opacity: 1; transform: none; }

    .ekh__logo { opacity: 1; filter: none; }

    /* Değişimin "öncesi" duran karede anlamsız — yalnız yeni değer kalır */
    .ekh__adet-eski { opacity: 0; }
}

/* ----------------------------------------------------------- duyarlılık */

@media (min-width: 901px) and (max-width: 1200px) {
    .ekh {
        max-width: 28rem;
        padding: var(--sp-6) var(--sp-4) var(--sp-6) var(--sp-6);
    }

    .ekh__stok,
    .ekh__kampanya,
    .ekh__soru { padding: var(--sp-4); }

    .ekh__kampanya { width: 98%; }
    .ekh__soru     { width: 94%; }
}

@media (max-width: 900px) {
    .ekh { margin-left: 0; margin-right: auto; }
}

@media (max-width: 560px) {
    .ekh { padding: 0 0 var(--sp-6); max-width: none; }

    .ekh__stok,
    .ekh__kampanya,
    .ekh__soru { width: 100%; }

    .ekh__kampanya,
    .ekh__soru { margin-top: var(--sp-4); }

    /* 320px'te beş logo + rozet aynı satıra sığmıyor */
    .ekh__kanallar { flex-wrap: wrap; }
    .ekh__senkron  { margin-left: auto; }
}