/* Hero görseli: XML → E-Com Asistan → pazaryerleri.

   Üç durak alt alta: kaynak, merkez, hedef. Aralarda akan noktalar veriyi
   taşır. Yatay bir akış sağ sütuna (493 px) sığmıyordu; dikey kurgu hem
   sığıyor hem yukarıdan aşağı okunuyor.

   ANİMASYON KURALI (bkz. entegrehero.css, ecomhero.css): döngüyü paylaşan
   her öğenin KENDİ keyframe'i vardır. Ortak döngü: 8 sn.

   KONTRAST: kartların içi beyaz; ink-900 (17,9:1), ink-500 (4,8:1).
   Merkez kartı brand-700 zeminde beyaz yazı (5,36:1). */

.xah {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 30rem;
    margin-left: auto;
    padding: var(--sp-6) var(--sp-4) var(--sp-6) var(--sp-8);
}

/* ───────────────────────────────────────────── 1) kaynak: XML dosyası */

.xah__kaynak {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.34);
    opacity: 0;
    animation: xah-kaynak 8s var(--ease-out) infinite;
}

.xah__dosya-ikon {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--brand-50);
    color: var(--brand-700);
}

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

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

.xah__adet { font-size: 10.5px; font-weight: var(--fw-semibold); color: var(--ink-500); }

/* ─────────────────────────────────────────────────────── akan izler */

.xah__iz {
    position: relative;
    width: 2px;
    background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.22),
                                rgba(255, 255, 255, 0.05));
}

.xah__iz--giris { height: 34px; }
.xah__iz--cikis { height: 40px; }

.xah__nokta {
    position: absolute;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: var(--brand-200);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.9);
    opacity: 0;
}

.xah__nokta--g1 { animation: xah-akis 8s linear infinite; }
.xah__nokta--g2 { animation: xah-akis 8s linear infinite; animation-delay: .33s; }
.xah__nokta--c1 { animation: xah-akis-c 8s linear infinite; }
.xah__nokta--c2 { animation: xah-akis-c 8s linear infinite; animation-delay: .23s; }
.xah__nokta--c3 { animation: xah-akis-c 8s linear infinite; animation-delay: .47s; }

/* ─────────────────────────────────────────────────── 2) merkez düğüm */

.xah__merkez {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    /* brand-700 beyaz yazıyla 5,36:1 */
    background: linear-gradient(135deg, var(--brand-700), #0e7490);
    box-shadow: 0 18px 44px rgba(8, 51, 68, 0.45);
    opacity: 0;
    animation: xah-merkez 8s var(--ease-out) infinite;
}

/* Merkezin canlı olduğunu anlatan tek hareket */
.xah__halka {
    position: relative;
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
}

.xah__halka::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    opacity: 0;
    animation: xah-nabiz 8s var(--ease-out) infinite;
}

.xah__merkez-metin { display: flex; flex-direction: column; gap: 1px; }

.xah__merkez-ad {
    font-size: 13px;
    font-weight: var(--fw-bold);
    letter-spacing: -0.01em;
    color: #fff;
}

.xah__islem {
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    /* Saydamlık 0,86'da brand-700 üstünde 4,41:1 ölçüldü — 10,5 px metin
       için eşik 4,5:1. 0,95'e çekildi. */
    color: rgba(255, 255, 255, 0.95);
    opacity: 0;
    animation: xah-islem 8s var(--ease-out) infinite;
}

/* ────────────────────────────────────────────────── 3) hedef kanallar */

.xah__kanallar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.34);
    opacity: 0;
    animation: xah-kanallar 8s var(--ease-out) infinite;
}

.xah__logolar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
                list-style: none; margin: 0; padding: 0; }

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

.xah__logo img { width: 21px; height: 21px; object-fit: contain; }

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

.xah__sonuc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 8px;
    border-radius: 999px;
    background: var(--brand-700);
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    color: #fff;
    opacity: 0;
    animation: xah-sonuc 8s var(--ease-out) infinite;
}

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

.xah__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 xah-kaynak {
    0%,  2%   { opacity: 0; transform: translateY(-10px); }
    9%,  92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(-10px); }
}

/* Nokta izin başından sonuna iner; döngü içinde iki kez akar */
@keyframes xah-akis {
    0%,  12%  { opacity: 0; top: 0; }
    16%       { opacity: 1; }
    26%       { opacity: 1; top: calc(100% - 7px); }
    28%, 100% { opacity: 0; top: calc(100% - 7px); }
}

@keyframes xah-akis-c {
    0%,  40%  { opacity: 0; top: 0; }
    44%       { opacity: 1; }
    54%       { opacity: 1; top: calc(100% - 7px); }
    56%, 100% { opacity: 0; top: calc(100% - 7px); }
}

@keyframes xah-merkez {
    0%,  20%  { opacity: 0; transform: scale(0.92); }
    28%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: scale(0.92); }
}

@keyframes xah-nabiz {
    0%,  30%  { opacity: 0; transform: scale(0.6); }
    36%       { opacity: 0.7; transform: scale(1); }
    48%, 100% { opacity: 0; transform: scale(1.7); }
}

@keyframes xah-islem {
    0%,  32%  { opacity: 0; }
    38%, 92%  { opacity: 1; }
    98%, 100% { opacity: 0; }
}

@keyframes xah-kanallar {
    0%,  50%  { opacity: 0; transform: translateY(10px); }
    58%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(10px); }
}

/* Kanallar SIRAYLA yazılır; beşi aynı anda dönerse "dağıtım" hissi kaybolur */
@keyframes xah-logo-1 { 0%, 58% { opacity: 0.28; filter: grayscale(1); } 63%, 92% { opacity: 1; filter: none; } 98%, 100% { opacity: 0.28; filter: grayscale(1); } }
@keyframes xah-logo-2 { 0%, 61% { opacity: 0.28; filter: grayscale(1); } 66%, 92% { opacity: 1; filter: none; } 98%, 100% { opacity: 0.28; filter: grayscale(1); } }
@keyframes xah-logo-3 { 0%, 64% { opacity: 0.28; filter: grayscale(1); } 69%, 92% { opacity: 1; filter: none; } 98%, 100% { opacity: 0.28; filter: grayscale(1); } }
@keyframes xah-logo-4 { 0%, 67% { opacity: 0.28; filter: grayscale(1); } 72%, 92% { opacity: 1; filter: none; } 98%, 100% { opacity: 0.28; filter: grayscale(1); } }
@keyframes xah-logo-5 { 0%, 70% { opacity: 0.28; filter: grayscale(1); } 75%, 92% { opacity: 1; filter: none; } 98%, 100% { opacity: 0.28; filter: grayscale(1); } }

@keyframes xah-sonuc {
    0%,  78%  { opacity: 0; transform: scale(0.88); }
    84%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: scale(0.88); }
}

/* Hareket azaltma tercihi: akış TAMAMLANMIŞ hâlde durur.
   opacity: 0 ile başlayan her öğe geri getirilir; akan noktalar gizlenir —
   duran bir nokta izin ortasında anlamsız durur. */
@media (prefers-reduced-motion: reduce) {
    .xah *,
    .xah { animation: none !important; }

    .xah__kaynak,
    .xah__merkez,
    .xah__islem,
    .xah__kanallar,
    .xah__sonuc { opacity: 1; transform: none; }

    .xah__logo { opacity: 1; filter: none; }
    .xah__nokta,
    .xah__halka::after { display: none; }
}

/* ─────────────────────────────────────────────────────────── duyarlılık */

@media (min-width: 901px) and (max-width: 1200px) {
    .xah { max-width: 26rem; padding: var(--sp-5) var(--sp-3) var(--sp-5) var(--sp-5); }
}

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

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