/* Hero görseli: eski altyapı → taşıma listesi → SUSOFTECH mağazası.

   Üç durak alt alta (bkz. xmlakis.css — sağ sütun yatay akışa dar).
   Liste satırları SIRAYLA tamamlanır; ilerleme çubuğu satırlarla birlikte
   dolar. Hedef kart en son iner, rozet onun ardından.

   ANİMASYON KURALI (bkz. entegrehero.css): döngüyü paylaşan her öğenin
   KENDİ keyframe'i vardır. Ortak döngü: 10 sn.
   Satır tamamlanma anları: %30 · %38 · %46 · %54 · %62.

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

.tsh {
    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);
}

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

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

.tsh__alt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    color: var(--ink-600);
}

/* ─────────────────────────────────────────────────── 1) kaynak kartı */

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

.tsh__ikon {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
}

.tsh__ikon--eski { background: var(--ink-100); color: var(--ink-600); }

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

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

.tsh__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;
}

.tsh__nokta--u1 { animation: tsh-akis-u 10s linear infinite; }
.tsh__nokta--u2 { animation: tsh-akis-u 10s linear infinite; animation-delay: .3s; }
.tsh__nokta--a1 { animation: tsh-akis-a 10s linear infinite; }
.tsh__nokta--a2 { animation: tsh-akis-a 10s linear infinite; animation-delay: .3s; }

/* ─────────────────────────────────────────────────── 2) taşıma listesi */

.tsh__liste {
    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: tsh-liste 10s var(--ease-out) infinite;
}

.tsh__liste-bas {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.tsh__liste-ad {
    flex: none;
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-600);
}

.tsh__cubuk {
    position: relative;
    flex: 1;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ink-100);
}

.tsh__dolgu {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
}

.tsh__dolgu--1 { animation: tsh-dolgu-1 10s var(--ease-out) infinite; }
.tsh__dolgu--2 { animation: tsh-dolgu-2 10s var(--ease-out) infinite; }
.tsh__dolgu--3 { animation: tsh-dolgu-3 10s var(--ease-out) infinite; }
.tsh__dolgu--4 { animation: tsh-dolgu-4 10s var(--ease-out) infinite; }
.tsh__dolgu--5 { animation: tsh-dolgu-5 10s var(--ease-out) infinite; }

.tsh__satirlar { display: flex; flex-direction: column; gap: 7px; list-style: none; margin: 0; padding: 0; }

.tsh__satir {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 12px;
}

/* Bekleyen satır: boş halka, soluk metin. Tamamlanınca dolu tik. */
.tsh__tik {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--ink-300);
    background: transparent;
}

.tsh__tik::after {
    content: "";
    position: absolute;
    top: 3.5px;
    left: 5.5px;
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 1.8px 1.8px 0;
    transform: rotate(45deg) scale(0);
}

.tsh__etiket {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--fw-semibold);
    color: var(--ink-600);
}

.tsh__deger {
    flex: none;
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    color: var(--brand-700);
    opacity: 0;
}

.tsh__satir--1 .tsh__tik        { animation: tsh-tik-1 10s var(--ease-out) infinite; }
.tsh__satir--1 .tsh__tik::after { animation: tsh-isaret-1 10s var(--ease-out) infinite; }
.tsh__satir--1 .tsh__etiket     { animation: tsh-etiket-1 10s var(--ease-out) infinite; }
.tsh__satir--1 .tsh__deger      { animation: tsh-deger-1 10s var(--ease-out) infinite; }

.tsh__satir--2 .tsh__tik        { animation: tsh-tik-2 10s var(--ease-out) infinite; }
.tsh__satir--2 .tsh__tik::after { animation: tsh-isaret-2 10s var(--ease-out) infinite; }
.tsh__satir--2 .tsh__etiket     { animation: tsh-etiket-2 10s var(--ease-out) infinite; }
.tsh__satir--2 .tsh__deger      { animation: tsh-deger-2 10s var(--ease-out) infinite; }

.tsh__satir--3 .tsh__tik        { animation: tsh-tik-3 10s var(--ease-out) infinite; }
.tsh__satir--3 .tsh__tik::after { animation: tsh-isaret-3 10s var(--ease-out) infinite; }
.tsh__satir--3 .tsh__etiket     { animation: tsh-etiket-3 10s var(--ease-out) infinite; }
.tsh__satir--3 .tsh__deger      { animation: tsh-deger-3 10s var(--ease-out) infinite; }

.tsh__satir--4 .tsh__tik        { animation: tsh-tik-4 10s var(--ease-out) infinite; }
.tsh__satir--4 .tsh__tik::after { animation: tsh-isaret-4 10s var(--ease-out) infinite; }
.tsh__satir--4 .tsh__etiket     { animation: tsh-etiket-4 10s var(--ease-out) infinite; }
.tsh__satir--4 .tsh__deger      { animation: tsh-deger-4 10s var(--ease-out) infinite; }

.tsh__satir--5 .tsh__tik        { animation: tsh-tik-5 10s var(--ease-out) infinite; }
.tsh__satir--5 .tsh__tik::after { animation: tsh-isaret-5 10s var(--ease-out) infinite; }
.tsh__satir--5 .tsh__etiket     { animation: tsh-etiket-5 10s var(--ease-out) infinite; }
.tsh__satir--5 .tsh__deger      { animation: tsh-deger-5 10s var(--ease-out) infinite; }

/* ─────────────────────────────────────────────────── 3) hedef kartı */

.tsh__hedef {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    width: 88%;
    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: tsh-hedef 10s var(--ease-out) infinite;
}

.tsh__halka {
    position: relative;
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
}

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

.tsh__ad--hedef { color: #fff; }
/* 0,95 saydamlık brand-700 üstünde 4,5:1 eşiğini geçer (bkz. xmlakis.css) */
.tsh__alt--hedef { color: rgba(255, 255, 255, 0.95); }

.tsh__rozet {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 5px 12px 5px 8px;
    border-radius: 999px;
    background: #fff;
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    color: var(--brand-800);
    white-space: nowrap;
    opacity: 0;
    animation: tsh-rozet 10s var(--ease-out) infinite;
}

.tsh__rozet-tik {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--brand-700);
}

.tsh__rozet-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 tsh-kaynak {
    0%,  2%   { opacity: 0; transform: translateY(-10px); }
    8%,  93%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes tsh-akis-u {
    0%,  10%  { opacity: 0; top: 0; }
    13%       { opacity: 1; }
    21%       { opacity: 1; top: calc(100% - 7px); }
    23%, 100% { opacity: 0; top: calc(100% - 7px); }
}

@keyframes tsh-liste {
    0%,  14%  { opacity: 0; transform: translateY(8px); }
    21%, 93%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(8px); }
}

/* İlerleme çubuğu satır sayısına göre: son satırla birlikte %100 */
@keyframes tsh-dolgu-1 { 0%, 22% { width: 0; } 30%, 93% { width: 100%; } 98%, 100% { width: 0; } }
@keyframes tsh-dolgu-2 { 0%, 22% { width: 0; } 30% { width: 50%; } 38%, 93% { width: 100%; } 98%, 100% { width: 0; } }
@keyframes tsh-dolgu-3 { 0%, 22% { width: 0; } 30% { width: 33%; } 38% { width: 66%; } 46%, 93% { width: 100%; } 98%, 100% { width: 0; } }
@keyframes tsh-dolgu-4 { 0%, 22% { width: 0; } 30% { width: 25%; } 38% { width: 50%; } 46% { width: 75%; } 54%, 93% { width: 100%; } 98%, 100% { width: 0; } }
@keyframes tsh-dolgu-5 { 0%, 22% { width: 0; } 30% { width: 20%; } 38% { width: 40%; } 46% { width: 60%; } 54% { width: 80%; } 62%, 93% { width: 100%; } 98%, 100% { width: 0; } }

/* Satır k: %(22+8k)'de tamamlanır */
@keyframes tsh-tik-1 { 0%, 27% { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-300); } 30%, 93% { background: var(--brand-700); box-shadow: inset 0 0 0 1.5px var(--brand-700); } 98%, 100% { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-300); } }
@keyframes tsh-tik-2 { 0%, 35% { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-300); } 38%, 93% { background: var(--brand-700); box-shadow: inset 0 0 0 1.5px var(--brand-700); } 98%, 100% { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-300); } }
@keyframes tsh-tik-3 { 0%, 43% { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-300); } 46%, 93% { background: var(--brand-700); box-shadow: inset 0 0 0 1.5px var(--brand-700); } 98%, 100% { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-300); } }
@keyframes tsh-tik-4 { 0%, 51% { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-300); } 54%, 93% { background: var(--brand-700); box-shadow: inset 0 0 0 1.5px var(--brand-700); } 98%, 100% { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-300); } }
@keyframes tsh-tik-5 { 0%, 59% { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-300); } 62%, 93% { background: var(--brand-700); box-shadow: inset 0 0 0 1.5px var(--brand-700); } 98%, 100% { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-300); } }

@keyframes tsh-isaret-1 { 0%, 28% { transform: rotate(45deg) scale(0); } 32%, 93% { transform: rotate(45deg) scale(1); } 98%, 100% { transform: rotate(45deg) scale(0); } }
@keyframes tsh-isaret-2 { 0%, 36% { transform: rotate(45deg) scale(0); } 40%, 93% { transform: rotate(45deg) scale(1); } 98%, 100% { transform: rotate(45deg) scale(0); } }
@keyframes tsh-isaret-3 { 0%, 44% { transform: rotate(45deg) scale(0); } 48%, 93% { transform: rotate(45deg) scale(1); } 98%, 100% { transform: rotate(45deg) scale(0); } }
@keyframes tsh-isaret-4 { 0%, 52% { transform: rotate(45deg) scale(0); } 56%, 93% { transform: rotate(45deg) scale(1); } 98%, 100% { transform: rotate(45deg) scale(0); } }
@keyframes tsh-isaret-5 { 0%, 60% { transform: rotate(45deg) scale(0); } 64%, 93% { transform: rotate(45deg) scale(1); } 98%, 100% { transform: rotate(45deg) scale(0); } }

@keyframes tsh-etiket-1 { 0%, 27% { color: var(--ink-600); } 30%, 93% { color: var(--ink-900); } 98%, 100% { color: var(--ink-600); } }
@keyframes tsh-etiket-2 { 0%, 35% { color: var(--ink-600); } 38%, 93% { color: var(--ink-900); } 98%, 100% { color: var(--ink-600); } }
@keyframes tsh-etiket-3 { 0%, 43% { color: var(--ink-600); } 46%, 93% { color: var(--ink-900); } 98%, 100% { color: var(--ink-600); } }
@keyframes tsh-etiket-4 { 0%, 51% { color: var(--ink-600); } 54%, 93% { color: var(--ink-900); } 98%, 100% { color: var(--ink-600); } }
@keyframes tsh-etiket-5 { 0%, 59% { color: var(--ink-600); } 62%, 93% { color: var(--ink-900); } 98%, 100% { color: var(--ink-600); } }

@keyframes tsh-deger-1 { 0%, 29% { opacity: 0; } 33%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes tsh-deger-2 { 0%, 37% { opacity: 0; } 41%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes tsh-deger-3 { 0%, 45% { opacity: 0; } 49%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes tsh-deger-4 { 0%, 53% { opacity: 0; } 57%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes tsh-deger-5 { 0%, 61% { opacity: 0; } 65%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }

@keyframes tsh-akis-a {
    0%,  64%  { opacity: 0; top: 0; }
    67%       { opacity: 1; }
    75%       { opacity: 1; top: calc(100% - 7px); }
    77%, 100% { opacity: 0; top: calc(100% - 7px); }
}

@keyframes tsh-hedef {
    0%,  72%  { opacity: 0; transform: scale(0.94); }
    79%, 93%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: scale(0.94); }
}

@keyframes tsh-nabiz {
    0%,  78%  { opacity: 0; transform: scale(0.6); }
    82%       { opacity: 0.7; transform: scale(1); }
    92%, 100% { opacity: 0; transform: scale(1.7); }
}

@keyframes tsh-rozet {
    0%,  82%  { opacity: 0; transform: scale(0.88); }
    86%, 93%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: scale(0.88); }
}

/* Hareket azaltma tercihi: taşıma TAMAMLANMIŞ hâlde durur. */
@media (prefers-reduced-motion: reduce) {
    .tsh *,
    .tsh *::after,
    .tsh { animation: none !important; }

    .tsh__kaynak,
    .tsh__liste,
    .tsh__hedef,
    .tsh__rozet,
    .tsh__deger { opacity: 1; transform: none; }

    .tsh__dolgu { width: 100%; }
    .tsh__tik { background: var(--brand-700); box-shadow: inset 0 0 0 1.5px var(--brand-700); }
    .tsh__tik::after { transform: rotate(45deg) scale(1); }
    .tsh__etiket { color: var(--ink-900); }
    .tsh__nokta,
    .tsh__halka::after { display: none; }
}

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

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

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

@media (max-width: 560px) {
    .tsh { padding: 0 0 var(--sp-6); max-width: none; }
    .tsh__kaynak,
    .tsh__hedef { width: 100%; }
}