/* Kurulum akışı — sohbet baloncuğu gibi açılan adımlar.

   Kart YOK: baloncuklar doğrudan bandın degrade zemini üstünde durur.
   Her adım kendi renginde, hafifçe eğik bir hap; sırayla "pop" ederek belirir,
   aralarındaki kesikli çizgi iner, ucundaki "+" sıradaki adımı bekler.

   Her öğenin KENDİ keyframe'i var. Ortak keyframe + farklı gecikme denenmez:
   sonsuz döngüde her öğe kendi fazında kaybolur, eski ve yeni adımlar iç içe
   girerdi. Hepsi 8 sn'lik AYNI takvimi paylaşır.

   Canlandırma yalnızca opacity + transform/scale/rotate kullanır. */

.sflow {
    display: grid;
    justify-items: center;
    gap: 0;
    padding: 0;
}

/* ------------------------------------------------------------- Baloncuk */

.sflow__pop {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    padding: 9px 15px;
    border-radius: 14px;
    border: 1px solid;
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.28);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    text-align: left;
    transform-origin: center;
}

.sflow__ico { display: grid; place-items: center; flex: none; }
.sflow__tik { flex: none; }

/* Renkler — canlı ama okunur: açık dolgu, koyu yazı, aynı tonda çerçeve.
   Her adım farklı renkte olduğu için sıra bir bakışta ayırt ediliyor.
   Ölçüldü: en düşük yazı/dolgu kontrastı 6,37:1. */
.sflow__pop--1 { background: #cffafe; border-color: #67e8f9; color: #155e75; }
.sflow__pop--2 { background: #e0e7ff; border-color: #a5b4fc; color: #3730a3; }
.sflow__pop--3 { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.sflow__pop--4 { background: #fae8ff; border-color: #f0abfc; color: #86198f; }
.sflow__pop--5 { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }

/* --------------------------------------------------- Boşluk: çizgi ve "+" */

.sflow__bosluk {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 3px 0;
}

.sflow__cizgi {
    width: 0;
    height: 10px;
    border-left: 2px dashed rgba(255, 255, 255, 0.45);
    transform-origin: top center;
}

.sflow__arti {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px dashed rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* Son baloncuktan sonraki boşlukta çizgi gerekmez */
.sflow__pop--5 + .sflow__bosluk .sflow__cizgi { display: none; }

/* ---------------------------------------------------------------- Zamanlama

   Döngü 8 sn. Adım i, %8 + (i-1) × %14,2'de açılır; o adımın "+"ı bir sonraki
   adım gelene kadar durur. Hepsi %87,5'te birlikte kapanır. */

.sflow__pop,
.sflow__cizgi,
.sflow__arti {
    animation-duration: 12s;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.sflow__pop--1 { animation-name: sf-p1; }
.sflow__pop--2 { animation-name: sf-p2; }
.sflow__pop--3 { animation-name: sf-p3; }
.sflow__pop--4 { animation-name: sf-p4; }
.sflow__pop--5 { animation-name: sf-p5; }

.sflow__cizgi--1 { animation-name: sf-l1; }
.sflow__cizgi--2 { animation-name: sf-l2; }
.sflow__cizgi--3 { animation-name: sf-l3; }
.sflow__cizgi--4 { animation-name: sf-l4; }
.sflow__cizgi--5 { animation-name: sf-l4; }

.sflow__arti--1 { animation-name: sf-x1; }
.sflow__arti--2 { animation-name: sf-x2; }
.sflow__arti--3 { animation-name: sf-x3; }
.sflow__arti--4 { animation-name: sf-x4; }
.sflow__arti--5 { animation-name: sf-x5; }

/* Baloncuk: küçükten ve daha eğik başlar, kendi hafif eğikliğine oturur */
@keyframes sf-p1 {
    0%, 4%      { opacity: 0; scale: .72; rotate: -9deg; }
    8%, 87.5%   { opacity: 1; scale: 1;   rotate: -1.6deg; }
    92%, 100%   { opacity: 0; scale: .94; rotate: -1.6deg; }
}
@keyframes sf-p2 {
    0%, 18.2%   { opacity: 0; scale: .72; rotate: 9deg; }
    22.2%, 87.5%{ opacity: 1; scale: 1;   rotate: 1.2deg; }
    92%, 100%   { opacity: 0; scale: .94; rotate: 1.2deg; }
}
@keyframes sf-p3 {
    0%, 32.3%   { opacity: 0; scale: .72; rotate: -9deg; }
    36.3%, 87.5%{ opacity: 1; scale: 1;   rotate: -1deg; }
    92%, 100%   { opacity: 0; scale: .94; rotate: -1deg; }
}
@keyframes sf-p4 {
    0%, 46.5%   { opacity: 0; scale: .72; rotate: 9deg; }
    50.5%, 87.5%{ opacity: 1; scale: 1;   rotate: 1.4deg; }
    92%, 100%   { opacity: 0; scale: .94; rotate: 1.4deg; }
}
@keyframes sf-p5 {
    0%, 60.7%   { opacity: 0; scale: .72; rotate: -9deg; }
    64.7%, 87.5%{ opacity: 1; scale: 1;   rotate: -.6deg; }
    92%, 100%   { opacity: 0; scale: .94; rotate: -.6deg; }
}

/* Kesikli çizgi: yukarıdan aşağı çizilir, sonuna kadar durur */
@keyframes sf-l1 {
    0%, 9%      { opacity: 0; transform: scaleY(0); }
    14%, 87.5%  { opacity: 1; transform: scaleY(1); }
    92%, 100%   { opacity: 0; transform: scaleY(1); }
}
@keyframes sf-l2 {
    0%, 23.2%   { opacity: 0; transform: scaleY(0); }
    28.2%, 87.5%{ opacity: 1; transform: scaleY(1); }
    92%, 100%   { opacity: 0; transform: scaleY(1); }
}
@keyframes sf-l3 {
    0%, 37.3%   { opacity: 0; transform: scaleY(0); }
    42.3%, 87.5%{ opacity: 1; transform: scaleY(1); }
    92%, 100%   { opacity: 0; transform: scaleY(1); }
}
@keyframes sf-l4 {
    0%, 51.5%   { opacity: 0; transform: scaleY(0); }
    56.5%, 87.5%{ opacity: 1; transform: scaleY(1); }
    92%, 100%   { opacity: 0; transform: scaleY(1); }
}

/* "+": kendi boşluğunda, SIRADAKİ adım gelene kadar görünür */
@keyframes sf-x1 {
    0%, 9%      { opacity: 0; scale: .6; }
    13%, 19.2%  { opacity: 1; scale: 1; }
    22.2%, 100% { opacity: 0; scale: .6; }
}
@keyframes sf-x2 {
    0%, 23.2%   { opacity: 0; scale: .6; }
    27.2%, 33.3%{ opacity: 1; scale: 1; }
    36.3%, 100% { opacity: 0; scale: .6; }
}
@keyframes sf-x3 {
    0%, 37.3%   { opacity: 0; scale: .6; }
    41.3%, 47.5%{ opacity: 1; scale: 1; }
    50.5%, 100% { opacity: 0; scale: .6; }
}
@keyframes sf-x4 {
    0%, 51.5%   { opacity: 0; scale: .6; }
    55.5%, 61.7%{ opacity: 1; scale: 1; }
    64.7%, 100% { opacity: 0; scale: .6; }
}
@keyframes sf-x5 {
    0%, 65.7%   { opacity: 0; scale: .6; }
    69.7%, 87.5%{ opacity: 1; scale: 1; }
    92%, 100%   { opacity: 0; scale: .6; }
}

@media (max-width: 560px) {
    .sflow__pop { padding: 10px 14px; font-size: var(--fs-xs); }
    .sflow__bosluk { padding: 4px 0; gap: 4px; }
    .sflow__cizgi { height: 11px; }
    .sflow__arti { width: 24px; height: 24px; border-radius: 8px; }
}

/* Hareket azaltılmışsa akış durur, beş adım birden görünür, "+" gizlenir */
@media (prefers-reduced-motion: reduce) {
    .sflow__pop,
    .sflow__cizgi { animation: none; opacity: 1; scale: 1; transform: none; }
    .sflow__pop--1 { rotate: -1.6deg; }
    .sflow__pop--2 { rotate:  1.2deg; }
    .sflow__pop--3 { rotate: -1deg; }
    .sflow__pop--4 { rotate:  1.4deg; }
    .sflow__pop--5 { rotate: -.6deg; }
    .sflow__arti   { display: none; }
}