/* ==========================================================================
   «Üstünlüklər» səhifəsi - /{dil}/ustunlukler
   --------------------------------------------------------------------------
   Yalnız bu səhifəyə aiddir; `advantages.blade.php`-dən `@push('styles')` ilə
   yüklənir. Tema faylı `style.css`-ə toxunulmayıb.

   Siniflər `adv-` prefiksi ilədir - köhnə `section.advantages` qaydaları ilə
   toqquşmasın deyə (köhnə blade ehtiyat nüsxə kimi saxlanılıb).

   Rənglər `style.css`-dəki `:root` dəyişənlərindəndir: --qr-blue, --qr-green,
   --qr-black, --qr-light. Yeni palitra uydurulmur.
   ========================================================================== */

.adv-page {
    --adv-text: #020202;
    --adv-muted: #5B5B5B;
    --adv-border: #E4E4E4;
    --adv-surface: #F7F7F7;
    --adv-blue: var(--qr-blue, #06A4ED);
    --adv-green: var(--qr-green, #A9F504);
    --adv-progress: 0;

    color: var(--adv-text);
    overflow-x: clip;
}

/* ── Ortaq elementlər ──────────────────────────────────────────────────── */

.adv-page .adv-label {
    display: inline-block;
    margin: 0 0 18px 0;
    padding: 7px 16px;
    border: 1px solid var(--adv-border);
    border-radius: 40px;
    background: var(--adv-surface);
    color: var(--adv-muted);
    font: 400 13px/20px "Poppins", sans-serif;
    letter-spacing: .02em;
}

.adv-page .adv-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* İkinci dərəcəli düymə - əsas `navigation_link` qara pill-in yanında */
.adv-page .adv-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12.5px 28px;
    border: 1px solid var(--adv-border);
    border-radius: 36px;
    background: #fff;
    color: var(--adv-text);
    font: 500 16px/24px "Poppins", sans-serif;
    text-decoration: none;
    transition: border-color .25s ease, background .25s ease;
}

.adv-page .adv-btn-ghost:hover,
.adv-page .adv-btn-ghost:focus-visible {
    border-color: var(--adv-text);
    background: var(--adv-surface);
}

/* ── SVG illüstrasiyaların ortaq qələmləri ─────────────────────────────── */

.adv-page svg { display: block; width: 100%; height: auto; }

.adv-page .adv-shape { stroke: #D9D9D9; stroke-width: 1.5; fill: none; }
.adv-page .adv-shape--filled { fill: var(--adv-surface); stroke: none; }
.adv-page .adv-shape--soft { stroke: #ECECEC; }
.adv-page .adv-shape--line { fill: #E4E4E4; stroke: none; }
.adv-page .adv-shape--stroke { stroke: #D9D9D9; stroke-width: 1.5; fill: none; stroke-linecap: round; }
.adv-page .adv-shape--strong { fill: #fff; stroke: var(--adv-text); stroke-width: 1.5; }

.adv-page .adv-qr rect,
.adv-page .adv-qr__frame { fill: none; stroke: var(--adv-text); stroke-width: 1.5; }
.adv-page .adv-qr__eye { fill: none; stroke: var(--adv-text); stroke-width: 1.5; }
.adv-page .adv-qr__dot { fill: var(--adv-blue); stroke: none; }

.adv-page .adv-dot--blue { fill: var(--adv-blue); }
.adv-page .adv-dot--green { fill: var(--adv-green); }

.adv-page .adv-shield { stroke: var(--adv-text); stroke-width: 1.5; fill: none; stroke-linejoin: round; }
.adv-page .adv-shield--filled { fill: rgba(169, 245, 4, .14); stroke: none; }
.adv-page .adv-check { stroke: var(--adv-text); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.adv-page .adv-ring { stroke: var(--adv-blue); stroke-width: 1.6; fill: rgba(6, 164, 237, .07); }
.adv-page .adv-arc { stroke: #E0E0E0; stroke-width: 1.5; fill: none; stroke-linecap: round; }
.adv-page .adv-arc--accent { stroke: var(--adv-blue); stroke-width: 2; }

.adv-page .adv-chip { fill: #fff; stroke: var(--adv-border); stroke-width: 1.5; }
.adv-page .adv-node-sm { fill: #fff; stroke: #D9D9D9; stroke-width: 1.5; }
.adv-page .adv-link { stroke: #E0E0E0; stroke-width: 1.4; stroke-linecap: round; }

.adv-page .adv-bar { fill: rgba(6, 164, 237, .12); }
.adv-page .adv-bar--accent { fill: rgba(6, 164, 237, .28); }
.adv-page .adv-grid-line { stroke: #EDEDED; stroke-width: 1.2; }
.adv-page .adv-trend { stroke: var(--adv-blue); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.adv-page .adv-trend--head { stroke-width: 2; }
.adv-page .adv-tick { fill: rgba(169, 245, 4, .35); stroke: none; }

.adv-page .adv-mark__fill { fill: var(--adv-text); }
.adv-page .adv-mark__accent { fill: var(--adv-blue); }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.adv-hero { padding: 24px 0 72px; }

.adv-hero__title {
    margin: 0 0 18px 0;
    color: var(--adv-text);
    font: 500 44px/62px "Poppins Medium", sans-serif;
}

.adv-hero__title span { color: var(--adv-blue); }

.adv-hero__lead {
    margin: 0 0 32px 0;
    max-width: 520px;
    color: var(--adv-muted);
    font: 400 17px/30px "Poppins", sans-serif;
}

.adv-hero__visual { position: relative; }

/* Çox açıq mavi/yaşıl işıq - ağır gradient yox, yalnız fon hissi */
.adv-hero__visual::before {
    content: "";
    position: absolute;
    inset: -8% -4%;
    border-radius: 50%;
    background:
        radial-gradient(46% 46% at 32% 34%, rgba(6, 164, 237, .13), transparent 70%),
        radial-gradient(42% 42% at 70% 68%, rgba(169, 245, 4, .16), transparent 70%);
    z-index: 0;
}

.adv-orb { position: relative; z-index: 1; max-width: 480px; margin-inline: auto; }

.adv-orb__ring { stroke: #E8E8E8; stroke-width: 1.2; fill: none; }
.adv-orb__ring--tilt { stroke: #F0F0F0; }

/* ── Intro card ───────────────────────────────────────────────────────── */

.adv-intro { padding: 0 0 24px; }

.adv-intro__card {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 36px 40px;
    border: 1px solid var(--adv-border);
    border-radius: 24px;
    background:
        radial-gradient(60% 120% at 88% 50%, rgba(6, 164, 237, .07), transparent 70%),
        var(--adv-surface);
    box-shadow: 0 1px 2px rgba(2, 2, 2, .03);
}

.adv-intro__mark { flex: 0 0 64px; width: 64px; }

.adv-intro__body h2 {
    margin: 0 0 10px 0;
    color: var(--adv-text);
    font: 500 26px/38px "Poppins Medium", sans-serif;
}

.adv-intro__body p {
    margin: 0;
    max-width: 720px;
    color: var(--adv-muted);
    font: 400 16px/26px "Poppins", sans-serif;
}

/* ── Timeline ─────────────────────────────────────────────────────────── */

/* Alt boşluq yoxdur: xətt aşağıda budaqlara qovuşur */
.adv-timeline { padding: 64px 0 0; }

.adv-timeline__inner { position: relative; }

.adv-timeline__line {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 120px;
    transform: translateX(-50%);
    pointer-events: none;
    /* Başı yumşaq sönür; ALTI sönmür - xətt aşağıda budaqlara qovuşur */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 100%);
}

.adv-timeline__line svg { height: 100%; }

.adv-line { fill: none; stroke-linecap: round; }
.adv-line--track { stroke: #E8E8E8; stroke-width: 2; }

.adv-line--fill {
    stroke: var(--adv-blue);
    stroke-width: 2.5;
    stroke-dasharray: 1;
    /* JS yalnız `--adv-progress` yazır (0 → 1), qalanını CSS hesablayır */
    stroke-dashoffset: calc(1 - var(--adv-progress));
}

.adv-line--straight { display: none; }

.adv-step {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    align-items: center;
    column-gap: 0;
    padding: 46px 0;
}

/* Üçü də EYNİ SƏTİRDƏ olmalıdır. `grid-row` yazılmasa avtomatik yerləşdirmə
   sütun sırası tərs olan addımlarda (şəkil solda) şəkli ikinci sətrə atır və
   qovşaq mətnlə şəkil arasında sürüşür. */
.adv-step__node,
.adv-step__content,
.adv-step__visual { grid-row: 1; }

.adv-step__content { max-width: 460px; }

.adv-step--content-left .adv-step__content { grid-column: 1; justify-self: end; text-align: left; }
.adv-step--content-left .adv-step__visual { grid-column: 3; }

.adv-step--content-right .adv-step__content { grid-column: 3; justify-self: start; }
.adv-step--content-right .adv-step__visual { grid-column: 1; }

.adv-step__content h2 {
    margin: 0 0 12px 0;
    color: var(--adv-text);
    font: 500 28px/42px "Poppins Medium", sans-serif;
}

.adv-step__content p {
    margin: 0;
    color: var(--adv-muted);
    font: 400 16px/28px "Poppins", sans-serif;
}

/* Nömrəli qovşaq - xəttin üstündə oturur */
.adv-step__node {
    grid-column: 2;
    justify-self: center;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid var(--adv-border);
    border-radius: 50%;
    background: #fff;
    color: var(--adv-muted);
    font: 500 16px/24px "Poppins Medium", sans-serif;
    box-shadow: 0 0 0 8px #fff;
    transition: border-color .35s ease, color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.adv-step__node.is-active {
    border-color: var(--adv-blue);
    color: var(--adv-text);
    transform: scale(1.06);
    box-shadow: 0 0 0 8px #fff, 0 0 0 12px rgba(6, 164, 237, .12);
}

.adv-step__node--green.is-active {
    border-color: var(--adv-green);
    box-shadow: 0 0 0 8px #fff, 0 0 0 12px rgba(169, 245, 4, .22);
}

/* Şəkil kartı - saytın mövcud kart qəlibi (açıq fon + incə haşiyə + 20px radius) */
.adv-card-visual {
    padding: 26px;
    border: 1px solid var(--adv-border);
    border-radius: 20px;
    background:
        radial-gradient(70% 80% at 78% 20%, rgba(6, 164, 237, .06), transparent 70%),
        var(--adv-surface);
}

.adv-card-visual--green {
    background:
        radial-gradient(70% 80% at 78% 20%, rgba(169, 245, 4, .13), transparent 70%),
        var(--adv-surface);
}

/* ── Xəttin budaqlanması (timeline → 4 kart) ──────────────────────────── */

.adv-fan {
    position: relative;
    height: 130px;
    /* Timeline-ın son nöqtəsi ilə birləşsin deyə yuxarıdan bir az çəkilir */
    margin: -10px 0 0 0;
}

.adv-fan svg { width: 100%; height: 100%; }

/* Budaqların birləşdiyi nöqtə - SVG içində dairə çəkilsəydi
   `preserveAspectRatio="none"` onu ovala çevirərdi */
.adv-fan::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 9px;
    height: 9px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--adv-blue);
    box-shadow: 0 0 0 5px rgba(6, 164, 237, .12);
}

/* Budaqların özü - görünəndə yuxarıdan aşağı çəkilir */
.adv-fan__lines path {
    stroke: var(--adv-blue);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .55;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset .9s cubic-bezier(.22, .61, .36, 1);
}

.adv-fan.is-visible .adv-fan__lines path { stroke-dashoffset: 0; }
.adv-fan.is-visible .adv-fan__lines path:nth-child(2) { transition-delay: .08s; }
.adv-fan.is-visible .adv-fan__lines path:nth-child(3) { transition-delay: .16s; }
.adv-fan.is-visible .adv-fan__lines path:nth-child(4) { transition-delay: .24s; }

/*
   Axan işıq: qısa bir parça budağın başından sonuna sürüşür, sonra geri
   qayıdır (`alternate`). Xətt kəsilmir - bu, əsas xəttin ÜSTÜNDƏ ayrıca
   qatdır, ona görə "davamlı axır" hissi yaranır.
*/
.adv-fan__pulses path {
    stroke: var(--adv-blue);
    stroke-width: 3;
    stroke-linecap: round;
    opacity: 0;
    stroke-dasharray: 12 88;
    stroke-dashoffset: 0;
}

/* Axış YALNIZ scroll xətti yelpiyə çatandan sonra başlayır - `advantages.js`
   `.is-flowing` sinfini o an əlavə edir. Yuxarı qayıdanda sinif düşür və
   budaqlar əvvəlki sakit vəziyyətinə qayıdır. */
.adv-page.is-flowing .adv-fan__pulses path {
    opacity: 1;
    animation: adv-pulse 2.9s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.adv-page.is-flowing .adv-fan__pulses path:nth-child(2) { animation-delay: .1s; }
.adv-page.is-flowing .adv-fan__pulses path:nth-child(3) { animation-delay: .2s; }
.adv-page.is-flowing .adv-fan__pulses path:nth-child(4) { animation-delay: .3s; }

/* Yelpiyin birləşmə nöqtəsi axış zamanı yüngülcə nəfəs alır */
.adv-page.is-flowing .adv-fan::before { animation: adv-node-pulse 2.9s ease-in-out infinite; }

@keyframes adv-node-pulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(6, 164, 237, .12); }
    50%      { box-shadow: 0 0 0 9px rgba(6, 164, 237, .06); }
}

@keyframes adv-pulse {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -100; }
}

/* Budaqlar `data-adv-reveal` ilə açılır, amma sürüşmə onlara yaraşmır */
.adv-page .adv-fan[data-adv-reveal] { transform: none; }

/* ── Benefit strip ────────────────────────────────────────────────────── */

.adv-benefits { padding: 0 0 24px; }

.adv-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.adv-benefit {
    padding: 26px 24px;
    border: 1px solid var(--adv-border);
    border-radius: 20px;
    background: #fff;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.adv-benefit:hover {
    border-color: #D2D2D2;
    box-shadow: 0 6px 18px rgba(2, 2, 2, .04);
}

.adv-benefit__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 0 16px 0;
    border-radius: 14px;
    background: var(--adv-surface);
}

.adv-benefit__icon svg { width: 24px; height: 24px; }

.adv-benefit__icon svg path,
.adv-benefit__icon svg circle {
    fill: none;
    stroke: var(--adv-text);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.adv-benefit h3 {
    margin: 0 0 8px 0;
    color: var(--adv-text);
    font: 500 17px/26px "Poppins Medium", sans-serif;
}

.adv-benefit p {
    margin: 0;
    color: var(--adv-muted);
    font: 400 14px/22px "Poppins", sans-serif;
}

/* ── Final CTA ────────────────────────────────────────────────────────── */

.adv-cta { padding: 56px 0 100px; }

.adv-cta__card {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 48px 52px;
    border: 1px solid var(--adv-border);
    border-radius: 28px;
    background:
        radial-gradient(46% 90% at 12% 20%, rgba(6, 164, 237, .10), transparent 70%),
        radial-gradient(44% 86% at 86% 84%, rgba(169, 245, 4, .14), transparent 70%),
        #fff;
}

.adv-cta__body { flex: 1 1 auto; }

.adv-cta__body h2 {
    margin: 0 0 12px 0;
    color: var(--adv-text);
    font: 500 32px/48px "Poppins Medium", sans-serif;
}

.adv-cta__body p {
    margin: 0 0 28px 0;
    max-width: 560px;
    color: var(--adv-muted);
    font: 400 16px/28px "Poppins", sans-serif;
}

.adv-cta__visual { flex: 0 0 260px; width: 260px; }

/* ── Animasiyalar ─────────────────────────────────────────────────────── */

/* Görünəndə yumşaq yuxarı sürüşmə. JS `.is-visible` əlavə edir. */
.adv-page [data-adv-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

.adv-page [data-adv-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Çox zəif üzmə - diqqəti yayındırmır */
.adv-page .adv-float { animation: adv-float 7s ease-in-out infinite; transform-origin: center; }
.adv-page .adv-float--b { animation-duration: 8.5s; animation-delay: -2s; }
.adv-page .adv-float--c { animation-duration: 9.5s; animation-delay: -4s; }

@keyframes adv-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media only screen and (max-width: 1199.98px) {
    .adv-hero__title { font-size: 38px; line-height: 54px; }
    .adv-step__content h2 { font-size: 24px; line-height: 36px; }
    .adv-cta__body h2 { font-size: 28px; line-height: 42px; }
    .adv-step { grid-template-columns: 1fr 96px 1fr; }
    .adv-timeline__line { width: 96px; }
}

@media only screen and (max-width: 991.98px) {
    .adv-hero { padding: 16px 0 48px; }
    .adv-hero__text { margin: 0 0 36px 0; }
    .adv-hero__lead { max-width: none; }
    .adv-orb { max-width: 380px; }

    .adv-intro__card { flex-direction: column; align-items: flex-start; gap: 22px; padding: 28px; }

    .adv-benefits__grid { grid-template-columns: repeat(2, 1fr); }

    .adv-cta__card { flex-direction: column; align-items: flex-start; padding: 36px 28px; }
    .adv-cta__visual { flex: 0 0 auto; width: 220px; align-self: center; }

    /* Kartlar alt-alta düzülür - budaqlanmanın mənası qalmır */
    .adv-fan { display: none; }
    .adv-benefits { padding: 40px 0 24px; }

    /* Xətt sola keçir, hər addım tək sütun olur: əvvəl mətn, sonra şəkil */
    .adv-timeline { padding: 40px 0 24px; }

    .adv-timeline__line {
        left: 22px;
        transform: none;
        width: 44px;
    }

    .adv-line--curve { display: none; }
    .adv-line--straight { display: block; }

    .adv-step {
        grid-template-columns: 44px 1fr;
        align-items: start;
        column-gap: 18px;
        row-gap: 20px;
        padding: 28px 0;
    }

    /* Mobil: qovşaq və mətn 1-ci sətirdə, şəkil 2-ci sətirdə */
    .adv-step__node,
    .adv-step__content { grid-row: 1; }
    .adv-step__visual { grid-row: 2; }

    .adv-step__node {
        grid-column: 1;
        justify-self: center;
        width: 44px;
        height: 44px;
        font-size: 14px;
        box-shadow: 0 0 0 6px #fff;
    }

    .adv-step__node.is-active { box-shadow: 0 0 0 6px #fff, 0 0 0 9px rgba(6, 164, 237, .12); }
    .adv-step__node--green.is-active { box-shadow: 0 0 0 6px #fff, 0 0 0 9px rgba(169, 245, 4, .22); }

    .adv-step--content-left .adv-step__content,
    .adv-step--content-right .adv-step__content {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        max-width: none;
    }

    .adv-step--content-left .adv-step__visual,
    .adv-step--content-right .adv-step__visual {
        grid-column: 2;
        grid-row: 2;
    }
}

@media only screen and (max-width: 575.98px) {
    .adv-hero__title { font-size: 30px; line-height: 44px; }
    .adv-hero__lead { font-size: 16px; line-height: 27px; }
    .adv-intro__body h2 { font-size: 21px; line-height: 32px; }
    .adv-step__content h2 { font-size: 21px; line-height: 32px; }
    .adv-cta { padding: 40px 0 64px; }
    .adv-cta__body h2 { font-size: 23px; line-height: 35px; }

    .adv-benefits__grid { grid-template-columns: 1fr; }
    .adv-card-visual { padding: 18px; }

    .adv-timeline__line { left: 16px; width: 36px; }
    .adv-step { grid-template-columns: 36px 1fr; column-gap: 14px; padding: 24px 0; }
    .adv-step__node { width: 36px; height: 36px; font-size: 12px; }

    /* Mobil ekranda düymələr tam enli olur */
    .adv-page .adv-actions { width: 100%; }
    .adv-page .adv-actions > a { flex: 1 1 100%; justify-content: center; }
    .adv-page .adv-actions .navigation_link { padding-left: 24px; padding-right: 24px; }
}

/* Hərəkət azaldılmasını istəyən istifadəçi: heç bir animasiya yoxdur,
   xətt isə tam çəkilmiş vəziyyətdə görünür. */
@media (prefers-reduced-motion: reduce) {
    .adv-page [data-adv-reveal] { opacity: 1; transform: none; transition: none; }
    .adv-page .adv-float { animation: none; }
    .adv-page .adv-step__node { transition: none; }
    .adv-page .adv-line--fill { stroke-dashoffset: 0; }
    .adv-page .adv-fan__lines path { stroke-dashoffset: 0; transition: none; }
    .adv-page .adv-fan__pulses { display: none; }
    .adv-page.is-flowing .adv-fan::before { animation: none; }
}

/* ══ Timeline illüstrasiyalarının daxili animasiyası ═══════════════════════

   SVG-lər inline çap olunur (`Advantage::$svg` → `svg_html`), ona görə
   içindəki `id`-lərə buradan toxunmaq mümkündür.

   ⚠ Seçici `#ad` DEYİL, `[id$="-ad"]`-dır. Səbəb: eyni səhifədə bir neçə
   illüstrasiya var və onlar eyni mənbədən gəldiyi üçün `id="phone"`,
   `id="bg"` təkrarlanırdı (W3C "Duplicate ID" + gradient həmişə birinci
   SVG-dən götürülürdü). `HasSvgMedia::scopeSvgIds()` çapdan əvvəl hər id-yə
   qeydə xas prefiks verir - `advantages-7-phone`. Prefiks qeydin id-sindən
   asılı olduğu üçün CSS sonluğa bağlanır. Yeni id əlavə edəndə bu qaydanı saxla.

   Tetikləyici YENİ DEYİL: `advantages.js`-dəki mövcud `IntersectionObserver`
   şəkil kartına `.is-visible` yazır (bir dəfə, geri scroll-da düşmür) - biz
   yalnız həmin sinfə bağlanırıq. Yeni JS, yeni kitabxana yoxdur.

   ⚠ SVG-də `transform` ATRIBUTU olan element (`#browser`, `#qr-card`,
   `#phone`, `#dashboard`) CSS `transform`-u ilə tamamilə ƏVƏZ olunur, yəni
   atributdakı `translate(...)` itir. Ona görə həmin elementlərin keyframe-ində
   baza `translate()` təkrar yazılır - əks halda illüstrasiya kartın küncünə
   sıçrayır. `transform` atributu OLMAYAN elementlərdə (`#avatar`,
   `#scan-line`, `#door-left`, `#bars rect`…) belə bir problem yoxdur.

   `animation-fill-mode: both` seçilib ki, `.is-visible` gəlməmişdən əvvəl və
   gecikmə müddətində element `from` vəziyyətində dursun - yanıb-sönmə olmasın.
*/

/* ── 01 · Hesab yaradın ───────────────────────────────────────────────── */

.adv-step__visual.is-visible [id$="-browser"] {
    animation: adv-v1-browser .6s cubic-bezier(.22, .61, .36, 1) both;
}

.adv-step__visual.is-visible [id$="-avatar"] {
    transform-box: fill-box;
    transform-origin: center;
    animation: adv-v1-avatar .55s cubic-bezier(.22, .61, .36, 1) .2s both;
}

/* Qrupda ardıcıllıq: 1-2-ci uşaq birinci check, 3-4-cü ikinci check */
.adv-step__visual.is-visible [id$="-profile-checks"] > *:nth-child(-n+2) {
    animation: adv-fade-in .35s ease both;
    animation-delay: .6s;
}

.adv-step__visual.is-visible [id$="-profile-checks"] > *:nth-child(n+3) {
    animation: adv-fade-in .35s ease both;
    animation-delay: .82s;
}

@keyframes adv-v1-browser {
    from { opacity: 0; transform: translate(190px, 182px); }
    to   { opacity: 1; transform: translate(190px, 170px); }
}

@keyframes adv-v1-avatar {
    from { opacity: .35; transform: scale(.96); }
    to   { opacity: 1;   transform: scale(1); }
}

@keyframes adv-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── 02 · QR kodu yerləşdirin ─────────────────────────────────────────── */

/* Origin `center` yox, açıq yazılıb: `#scan-line` qrupun içində hərəkət edir
   və `fill-box` mərkəzini sürüşdürə bilər (kartın öz ölçüsü 240×320-dir). */
.adv-step__visual.is-visible [id$="-qr-card"] {
    transform-box: fill-box;
    transform-origin: 120px 160px;
    animation: adv-v2-card .5s cubic-bezier(.22, .61, .36, 1) both;
}

.adv-step__visual.is-visible [id$="-scan-line"] {
    animation: adv-v2-scan .9s ease-in-out .45s 2 both;
}

/* Qapılar yalnız vizual metaforadır - scan bitəndən sonra azca aralanır,
   ~1 saniyə açıq qalır və yavaşca bağlanır. */
.adv-step__visual.is-visible [id$="-door-left"] {
    animation: adv-v2-door-left 3.2s cubic-bezier(.4, 0, .2, 1) 2.25s both;
}

.adv-step__visual.is-visible [id$="-door-right"] {
    animation: adv-v2-door-right 3.2s cubic-bezier(.4, 0, .2, 1) 2.25s both;
}

@keyframes adv-v2-card {
    from { opacity: 0; transform: translate(150px, 240px) scale(.94); }
    to   { opacity: 1; transform: translate(150px, 240px) scale(1); }
}

@keyframes adv-v2-scan {
    0%   { opacity: 0; transform: translateY(-66px); }
    12%  { opacity: 1; transform: translateY(-46px); }
    88%  { opacity: 1; transform: translateY(84px); }
    100% { opacity: 0; transform: translateY(104px); }
}

@keyframes adv-v2-door-left {
    0%, 100%  { transform: translateX(0); }
    28%, 62%  { transform: translateX(-16px); }
}

@keyframes adv-v2-door-right {
    0%, 100%  { transform: translateX(0); }
    28%, 62%  { transform: translateX(16px); }
}

/* ── 03 · Əməkdaşlar mobil tətbiqdən istifadə etsin ───────────────────── */

/* ⚠ `phone` adlı element İKİ illüstrasiyada var (03 və 04). İd-lər artıq
   qeydə görə prefikslənir, yəni sənəddə təkrarlanmır, amma sonluq eynidir -
   `[id$="-phone"]` hər ikisini tutur. Ayırd edici kimi baza `transform`
   atributu işlədilir: elə həmin dəyər aşağıdakı keyframe-də də təkrar
   yazılıb, yəni selektor ilə animasiya bir mənbədən asılıdır. */
.adv-step__visual.is-visible [id$="-phone"][transform="translate(360 345)"] {
    animation: adv-v3-phone .55s cubic-bezier(.22, .61, .36, 1) both;
}

.adv-step__visual.is-visible [id$="-scan-beam"] {
    animation: adv-v3-beam 1.1s ease-in-out .5s both;
}

.adv-step__visual.is-visible [id$="-success"] {
    transform-box: fill-box;
    transform-origin: center;
    animation: adv-v3-success .45s cubic-bezier(.34, 1.3, .64, 1) 1.45s both;
}

@keyframes adv-v3-phone {
    from { opacity: 0; transform: translate(360px, 355px); }
    to   { opacity: 1; transform: translate(360px, 345px); }
}

@keyframes adv-v3-beam {
    0%   { opacity: 0; transform: translateX(-14px); }
    25%  { opacity: 1; transform: translateX(-6px); }
    70%  { opacity: 1; transform: translateX(6px); }
    100% { opacity: 0; transform: translateX(10px); }
}

@keyframes adv-v3-success {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── 04 · İzləməyə başlayın ───────────────────────────────────────────── */

.adv-step__visual.is-visible [id$="-dashboard"] {
    /* Yalnız `opacity` - `transform` atributu (`translate(155 170)`) qorunur */
    animation: adv-fade-in .35s ease both;
}

/* Xətt soldan sağa çəkilir. 400 yolun uzunluğundan böyükdür, yəni bütün
   yol TƏK bir tire olur - `pathLength` atributu əlavə etməyə ehtiyac qalmır. */
.adv-step__visual.is-visible [id$="-chart-line"] {
    animation: adv-v4-line .7s ease-out .3s both;
}

.adv-step__visual.is-visible [id$="-line-chart"] circle {
    animation: adv-fade-in .3s ease both;
}

.adv-step__visual.is-visible [id$="-line-chart"] circle:nth-of-type(1) { animation-delay: .45s; }
.adv-step__visual.is-visible [id$="-line-chart"] circle:nth-of-type(2) { animation-delay: .6s; }
.adv-step__visual.is-visible [id$="-line-chart"] circle:nth-of-type(3) { animation-delay: .75s; }
.adv-step__visual.is-visible [id$="-line-chart"] circle:nth-of-type(4) { animation-delay: .9s; }

.adv-step__visual.is-visible [id$="-bars"] rect {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: adv-v4-bar .4s cubic-bezier(.22, .61, .36, 1) both;
}

.adv-step__visual.is-visible [id$="-bars"] rect:nth-child(1) { animation-delay: .75s; }
.adv-step__visual.is-visible [id$="-bars"] rect:nth-child(2) { animation-delay: .81s; }
.adv-step__visual.is-visible [id$="-bars"] rect:nth-child(3) { animation-delay: .87s; }
.adv-step__visual.is-visible [id$="-bars"] rect:nth-child(4) { animation-delay: .93s; }
.adv-step__visual.is-visible [id$="-bars"] rect:nth-child(5) { animation-delay: .99s; }

/* `stroke-dashoffset` yox, `stroke-dasharray` animasiya olunur: dairənin
   uzunluğu (~477) ilə tire (238) yaxın olduğu üçün offset variantında qövsün
   o biri ucunda nazik bir parça görünürdü. */
.adv-step__visual.is-visible [id$="-donut-progress"] {
    animation: adv-v4-donut .55s ease-out 1s both;
}

@keyframes adv-v4-line {
    from { stroke-dasharray: 400; stroke-dashoffset: 400; }
    to   { stroke-dasharray: 400; stroke-dashoffset: 0; }
}

@keyframes adv-v4-bar {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@keyframes adv-v4-donut {
    from { stroke-dasharray: 0 477; }
    to   { stroke-dasharray: 238 477; }
}

/* ── 04 · Anlıq bildirişlər alın ──────────────────────────────────────── */

.adv-step__visual.is-visible [id$="-phone"][transform="translate(430 130)"] {
    animation: adv-v4n-phone .55s cubic-bezier(.22, .61, .36, 1) both;
}

.adv-step__visual.is-visible [id$="-notif-card"] {
    animation: adv-v4n-card .5s cubic-bezier(.22, .61, .36, 1) .35s both;
}

/* `fill-box` mərkəzi: halqaların `cx`/`cy`-si yoxdur, yəni öz koordinatında
   mərkəz (0,0)-dır - `view-box` default-u isə bütün viewBox-un mərkəzini verər. */
.adv-step__visual.is-visible [id$="-pulse-ring"] {
    transform-box: fill-box;
    transform-origin: center;
    animation: adv-v4n-pulse 1.6s ease-in-out .7s both;
}

/* Telefonun özü tərpənmir - yalnız yandakı dalğa işarələri titrəyir */
.adv-step__visual.is-visible [id$="-vibration-left"] {
    animation: adv-v4n-vibra-left .5s ease-in-out .75s 2 both;
}

.adv-step__visual.is-visible [id$="-vibration-right"] {
    animation: adv-v4n-vibra-right .5s ease-in-out .75s 2 both;
}

.adv-step__visual.is-visible [id$="-status-dot"] {
    transform-box: fill-box;
    transform-origin: center;
    animation: adv-v4n-dot .4s cubic-bezier(.34, 1.3, .64, 1) 1.5s both;
}

@keyframes adv-v4n-phone {
    from { opacity: 0; transform: translate(430px, 140px); }
    to   { opacity: 1; transform: translate(430px, 130px); }
}

@keyframes adv-v4n-card {
    from { opacity: 0; transform: translate(670px, 95px); }
    to   { opacity: 1; transform: translate(670px, 115px); }
}

/* İki yüngül pulse, sonra SVG-dəki öz `opacity="0.35"` dəyərində dayanır */
@keyframes adv-v4n-pulse {
    0%   { opacity: 0;   transform: translate(826px, 181px) scale(.8); }
    30%  { opacity: .45; transform: translate(826px, 181px) scale(1.04); }
    50%  { opacity: .2;  transform: translate(826px, 181px) scale(.86); }
    80%  { opacity: .45; transform: translate(826px, 181px) scale(1.04); }
    100% { opacity: .35; transform: translate(826px, 181px) scale(1); }
}

@keyframes adv-v4n-vibra-left {
    0%, 100% { opacity: .7; transform: translateX(0); }
    25%      { opacity: .45; transform: translateX(-4px); }
    50%      { opacity: .8;  transform: translateX(2px); }
    75%      { opacity: .5;  transform: translateX(-3px); }
}

@keyframes adv-v4n-vibra-right {
    0%, 100% { opacity: .7; transform: translateX(0); }
    25%      { opacity: .45; transform: translateX(4px); }
    50%      { opacity: .8;  transform: translateX(-2px); }
    75%      { opacity: .5;  transform: translateX(3px); }
}

@keyframes adv-v4n-dot {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: scale(1); }
}

/* Hərəkət azaldılması: animasiya işləmir, hər element SVG-dəki öz son
   vəziyyətində qalır (scan xətti və şüa onsuz da `opacity="0"`-dır). */
@media (prefers-reduced-motion: reduce) {
    .adv-step__visual.is-visible [id$="-notif-card"],
    .adv-step__visual.is-visible [id$="-pulse-ring"],
    .adv-step__visual.is-visible [id$="-vibration-left"],
    .adv-step__visual.is-visible [id$="-vibration-right"],
    .adv-step__visual.is-visible [id$="-status-dot"],
    .adv-step__visual.is-visible [id$="-browser"],
    .adv-step__visual.is-visible [id$="-avatar"],
    .adv-step__visual.is-visible [id$="-profile-checks"] > *,
    .adv-step__visual.is-visible [id$="-qr-card"],
    .adv-step__visual.is-visible [id$="-scan-line"],
    .adv-step__visual.is-visible [id$="-door-left"],
    .adv-step__visual.is-visible [id$="-door-right"],
    .adv-step__visual.is-visible [id$="-phone"],
    .adv-step__visual.is-visible [id$="-scan-beam"],
    .adv-step__visual.is-visible [id$="-success"],
    .adv-step__visual.is-visible [id$="-dashboard"],
    .adv-step__visual.is-visible [id$="-chart-line"],
    .adv-step__visual.is-visible [id$="-line-chart"] circle,
    .adv-step__visual.is-visible [id$="-bars"] rect,
    .adv-step__visual.is-visible [id$="-donut-progress"] {
        animation: none;
    }
}