/* Otomasyon gösterimleri — vitrin satırlarında fotoğrafın yerine geçer.

   Hepsi tek bir beyaz kart üstünde çalışır.

   ANİMASYON KURALI (bkz. aihero.css, shipdemo.css): döngüyü paylaşan her
   öğenin KENDİ keyframe'i vardır. Ortak döngü 8 sn.
   Durum geçişleri `steps(1, end)` ile keskindir. */

.aud {
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
    padding: 4% 6%;
}

.aud__card {
    position: relative;
    padding: var(--sp-5);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: 0 18px 44px rgba(2, 6, 23, 0.18);
}

.aud__baslik {
    margin-bottom: 8px;
    font-size: 9px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    /* Beyaz üstünde ink-500 → 7,4:1 */
    color: var(--ink-500);
}

.aud__not {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--ink-600);
}

/* Kanal işareti — üç kanalın rengi sabit, sayfa boyunca aynı anlamı taşır */
.aud__kanal {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--r-xs, 6px);
}

.aud__kanal--mail { background: var(--brand-50); color: var(--brand-800); }
.aud__kanal--sms  { background: #ede9fe;         color: #5b21b6; }
.aud__kanal--wa   { background: #dcfce7;         color: #166534; }

/* ==========================================================================
   1) SEPET TERK SERİSİ — üç adım, aralarında bekleme
   ========================================================================== */

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

.aud__adim {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    opacity: 0;
}

.aud__adim-metin {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    /* surface-soft üstünde ink-900 → 16,9:1 */
    color: var(--ink-900);
}

.aud__zaman {
    flex: none;
    padding: 2px 7px;
    border-radius: var(--r-full);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 9px;
    font-weight: var(--fw-bold);
    white-space: nowrap;
    /* Beyaz üstünde ink-700 → 10,4:1 */
    color: var(--ink-700);
}

/* Bekleme satırı: adımlar arasında geçen süre */
.aud__bekle {
    padding-left: 34px;
    font-size: 9.5px;
    font-weight: var(--fw-semibold);
    /* Beyaz üstünde ink-500 → 7,4:1 */
    color: var(--ink-500);
    opacity: 0;
}

.aud__adim--1 { animation: aud-ad-1 8s var(--ease-out) infinite; }
.aud__bekle--1 { animation: aud-bk-1 8s var(--ease-out) infinite; }
.aud__adim--2 { animation: aud-ad-2 8s var(--ease-out) infinite; }
.aud__bekle--2 { animation: aud-bk-2 8s var(--ease-out) infinite; }
.aud__adim--3 { animation: aud-ad-3 8s var(--ease-out) infinite; }

@keyframes aud-ad-1 { 0%, 6%  { opacity: 0; transform: translateY(-5px); } 14%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes aud-bk-1 { 0%, 16% { opacity: 0; } 22%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes aud-ad-2 { 0%, 24% { opacity: 0; transform: translateY(-5px); } 32%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes aud-bk-2 { 0%, 34% { opacity: 0; } 40%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes aud-ad-3 { 0%, 42% { opacity: 0; transform: translateY(-5px); } 50%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(-5px); } }

/* ==========================================================================
   2) TETİKLEYİCİLER — hazır olay listesi
   ========================================================================== */

.aud__tetik {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.aud__tt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    /* surface-soft üstünde ink-800 → 12,4:1 */
    color: var(--ink-800);
    opacity: 0.4;
}

.aud__nokta {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink-300);
}

.aud__tt--1 { animation: aud-tt-1 8s steps(1, end) infinite; }
.aud__tt--2 { animation: aud-tt-2 8s steps(1, end) infinite; }
.aud__tt--3 { animation: aud-tt-3 8s steps(1, end) infinite; }
.aud__tt--4 { animation: aud-tt-4 8s steps(1, end) infinite; }
.aud__tt--5 { animation: aud-tt-5 8s steps(1, end) infinite; }
.aud__tt--6 { animation: aud-tt-6 8s steps(1, end) infinite; }

.aud__tt--1 .aud__nokta { animation: aud-nk-1 8s steps(1, end) infinite; }
.aud__tt--2 .aud__nokta { animation: aud-nk-2 8s steps(1, end) infinite; }
.aud__tt--3 .aud__nokta { animation: aud-nk-3 8s steps(1, end) infinite; }
.aud__tt--4 .aud__nokta { animation: aud-nk-4 8s steps(1, end) infinite; }
.aud__tt--5 .aud__nokta { animation: aud-nk-5 8s steps(1, end) infinite; }
.aud__tt--6 .aud__nokta { animation: aud-nk-6 8s steps(1, end) infinite; }

@keyframes aud-tt-1 { 0%, 6%  { opacity: 0.4; } 7%,  100% { opacity: 1; } }
@keyframes aud-tt-2 { 0%, 14% { opacity: 0.4; } 15%, 100% { opacity: 1; } }
@keyframes aud-tt-3 { 0%, 22% { opacity: 0.4; } 23%, 100% { opacity: 1; } }
@keyframes aud-tt-4 { 0%, 30% { opacity: 0.4; } 31%, 100% { opacity: 1; } }
@keyframes aud-tt-5 { 0%, 38% { opacity: 0.4; } 39%, 100% { opacity: 1; } }
@keyframes aud-tt-6 { 0%, 46% { opacity: 0.4; } 47%, 100% { opacity: 1; } }

@keyframes aud-nk-1 { 0%, 6%  { background-color: var(--ink-300); } 7%,  100% { background-color: var(--success-600, #16a34a); } }
@keyframes aud-nk-2 { 0%, 14% { background-color: var(--ink-300); } 15%, 100% { background-color: var(--success-600, #16a34a); } }
@keyframes aud-nk-3 { 0%, 22% { background-color: var(--ink-300); } 23%, 100% { background-color: var(--success-600, #16a34a); } }
@keyframes aud-nk-4 { 0%, 30% { background-color: var(--ink-300); } 31%, 100% { background-color: var(--success-600, #16a34a); } }
@keyframes aud-nk-5 { 0%, 38% { background-color: var(--ink-300); } 39%, 100% { background-color: var(--success-600, #16a34a); } }
@keyframes aud-nk-6 { 0%, 46% { background-color: var(--ink-300); } 47%, 100% { background-color: var(--success-600, #16a34a); } }

/* ==========================================================================
   3) KANALLAR — aynı kurgu üç yerde
   ========================================================================== */

.aud__kanallar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.aud__kutu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 12px 6px;
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    color: var(--ink-800);
    opacity: 0;
}

.aud__kutu-ad { text-align: center; }

.aud__kutu--1 { animation: aud-kt-1 8s var(--ease-out) infinite; }
.aud__kutu--2 { animation: aud-kt-2 8s var(--ease-out) infinite; }
.aud__kutu--3 { animation: aud-kt-3 8s var(--ease-out) infinite; }

@keyframes aud-kt-1 { 0%, 8%  { opacity: 0; transform: translateY(6px); } 18%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes aud-kt-2 { 0%, 18% { opacity: 0; transform: translateY(6px); } 28%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes aud-kt-3 { 0%, 28% { opacity: 0; transform: translateY(6px); } 38%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(6px); } }

/* ==========================================================================
   4) ÖLÇÜM — panelin gerçekten tuttuğu sayılar

   BURADA CİRO YOK. Ürün otomasyon başına ciro atfı yapmıyor; yalnız
   gönderim, açılma, tıklama ve abonelik iptali ölçülüyor.
   ========================================================================== */

.aud__metrikler {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.aud__mt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    opacity: 0;
}

.aud__mt-deger {
    font-size: 18px;
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--ink-900);
}

.aud__mt--2 .aud__mt-deger,
.aud__mt--3 .aud__mt-deger { color: var(--brand-800); }

.aud__mt-etiket {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9.5px;
    font-weight: var(--fw-semibold);
    /* surface-soft üstünde ink-600 → 6,9:1 */
    color: var(--ink-600);
}

.aud__mt--1 { animation: aud-mt-1 8s var(--ease-out) infinite; }
.aud__mt--2 { animation: aud-mt-2 8s var(--ease-out) infinite; }
.aud__mt--3 { animation: aud-mt-3 8s var(--ease-out) infinite; }

/* Otuz günlük seri — sütunlar sırayla yükselir */
.aud__seri-grafik {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 46px;
    margin-top: 10px;
    padding: 0 2px;
}

.aud__cubuk {
    flex: 1;
    height: var(--y);
    border-radius: 2px 2px 0 0;
    background: var(--brand-400);
    transform: scaleY(0);
    transform-origin: bottom;
}

.aud__cubuk--1  { animation: aud-cb-1  8s var(--ease-out) infinite; }
.aud__cubuk--2  { animation: aud-cb-2  8s var(--ease-out) infinite; }
.aud__cubuk--3  { animation: aud-cb-3  8s var(--ease-out) infinite; }
.aud__cubuk--4  { animation: aud-cb-4  8s var(--ease-out) infinite; }
.aud__cubuk--5  { animation: aud-cb-5  8s var(--ease-out) infinite; }
.aud__cubuk--6  { animation: aud-cb-6  8s var(--ease-out) infinite; }
.aud__cubuk--7  { animation: aud-cb-7  8s var(--ease-out) infinite; }
.aud__cubuk--8  { animation: aud-cb-8  8s var(--ease-out) infinite; }
.aud__cubuk--9  { animation: aud-cb-9  8s var(--ease-out) infinite; }
.aud__cubuk--10 { animation: aud-cb-10 8s var(--ease-out) infinite; }

@keyframes aud-mt-1 { 0%, 4%  { opacity: 0; transform: translateY(6px); } 12%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes aud-mt-2 { 0%, 10% { opacity: 0; transform: translateY(6px); } 18%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes aud-mt-3 { 0%, 16% { opacity: 0; transform: translateY(6px); } 24%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(6px); } }

@keyframes aud-cb-1  { 0%, 24% { transform: scaleY(0); } 30%, 94% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } }
@keyframes aud-cb-2  { 0%, 27% { transform: scaleY(0); } 33%, 94% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } }
@keyframes aud-cb-3  { 0%, 30% { transform: scaleY(0); } 36%, 94% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } }
@keyframes aud-cb-4  { 0%, 33% { transform: scaleY(0); } 39%, 94% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } }
@keyframes aud-cb-5  { 0%, 36% { transform: scaleY(0); } 42%, 94% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } }
@keyframes aud-cb-6  { 0%, 39% { transform: scaleY(0); } 45%, 94% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } }
@keyframes aud-cb-7  { 0%, 42% { transform: scaleY(0); } 48%, 94% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } }
@keyframes aud-cb-8  { 0%, 45% { transform: scaleY(0); } 51%, 94% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } }
@keyframes aud-cb-9  { 0%, 48% { transform: scaleY(0); } 54%, 94% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } }
@keyframes aud-cb-10 { 0%, 51% { transform: scaleY(0); } 57%, 94% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } }

/* ==========================================================================
   5) AI KURGU — akışı AI hazırlar, siz onaylarsınız
   ========================================================================== */

.aud__istek {
    padding: 10px 11px;
    border-radius: var(--r-md);
    border-bottom-right-radius: var(--r-xs, 6px);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 11px;
    line-height: 1.5;
    /* surface-soft üstünde ink-900 → 16,9:1 */
    color: var(--ink-900);
}

.aud__ok {
    display: flex;
    justify-content: center;
    margin: 6px 0;
    color: var(--brand-600);
    animation: aud-ok 8s var(--ease-out) infinite;
}

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

.aud__ts {
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-400);
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    /* brand-50 üstünde brand-800 → 6,9:1 */
    color: var(--brand-800);
    opacity: 0;
}

.aud__ts--1 { animation: aud-ts-1 8s var(--ease-out) infinite; }
.aud__ts--2 { animation: aud-ts-2 8s var(--ease-out) infinite; }
.aud__ts--3 { animation: aud-ts-3 8s var(--ease-out) infinite; }

/* Onay düğmesi: taslak hazır olmadan çıkmaz — kurgu onaysız yayına girmiyor */
.aud__onay {
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    background: var(--brand-700);
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    text-align: center;
    /* brand-700 üstünde beyaz → 5,36:1 */
    color: #fff;
    opacity: 0;
    animation: aud-onay 8s var(--ease-out) infinite;
}

@keyframes aud-ok   { 0%, 12% { opacity: 0.25; transform: translateY(-3px); } 22%, 40% { opacity: 1; transform: translateY(2px); } 52%, 100% { opacity: 0.25; transform: translateY(-3px); } }
@keyframes aud-ts-1 { 0%, 20% { opacity: 0; transform: translateY(5px); } 28%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(5px); } }
@keyframes aud-ts-2 { 0%, 27% { opacity: 0; transform: translateY(5px); } 35%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(5px); } }
@keyframes aud-ts-3 { 0%, 34% { opacity: 0; transform: translateY(5px); } 42%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(5px); } }
@keyframes aud-onay { 0%, 44% { opacity: 0; transform: scale(0.94); } 54%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.94); } }

/* ==========================================================================
   6) İZİN VE ÇIKIŞ — yasal zorunluluk
   ========================================================================== */

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

.aud__iz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
}

.aud__iz-metin {
    min-width: 0;
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    color: var(--ink-800);
}

.aud__anahtar {
    position: relative;
    flex: none;
    width: 28px;
    height: 16px;
    border-radius: var(--r-full);
    background: var(--ink-300);
}

.aud__anahtar span {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(2, 6, 23, 0.3);
}

/* İlk izin AÇIK, ikincisi KAPALI kalır — izin verilmemiş kanala gönderilmez */
.aud__anahtar--1 { animation: aud-an-1 8s steps(1, end) infinite; }
.aud__anahtar--1 span { animation: aud-tp-1 8s var(--ease-out) infinite; }

.aud__cikis {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: #dcfce7;
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    /* #dcfce7 üstünde #166534 → 6,9:1 */
    color: #166534;
    opacity: 0;
    animation: aud-cikis 8s var(--ease-out) infinite;
}

.aud__cikis svg { flex: none; }

@keyframes aud-an-1 { 0%, 14% { background-color: var(--ink-300); } 15%, 100% { background-color: var(--success-600, #16a34a); } }
@keyframes aud-tp-1 { 0%, 14% { transform: translateX(0); } 20%, 100% { transform: translateX(12px); } }
@keyframes aud-cikis { 0%, 40% { opacity: 0; transform: translateY(5px); } 50%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(5px); } }

/* ------------------------------------------------------------- erişilebilirlik */

/* Hareket azaltma tercihi: her gösterim TAMAMLANMIŞ hâlde durur.
   Animasyonu kapatmak yetmez — çoğu öğe opacity: 0 ile başlıyor. */
@media (prefers-reduced-motion: reduce) {
    .aud *,
    .aud { animation: none !important; }

    .aud__adim,
    .aud__bekle,
    .aud__kutu,
    .aud__mt,
    .aud__ts,
    .aud__onay,
    .aud__cikis { opacity: 1; transform: none; }

    .aud__rozet,
    .aud__yayin { opacity: 1; transform: none; }
    .aud__cumle span { max-width: 100%; }
    .aud__kr { opacity: 1; }
    .aud__kr-no { background-color: var(--brand-700); color: #fff; }
    .aud__birles { opacity: 1; }
    .aud__tt { opacity: 1; }
    .aud__nokta { background-color: var(--success-600, #16a34a); }
    .aud__cubuk { transform: scaleY(1); }
    .aud__ok { opacity: 1; }

    .aud__anahtar--1 { background-color: var(--success-600, #16a34a); }
    .aud__anahtar--1 span { transform: translateX(12px); }
}

@media (max-width: 560px) {
    .aud { padding: 2% 0; }
    .aud__card { padding: var(--sp-4); }
    .aud__tetik { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   7) KURULUM — iki yol, aynı sonuç

   Solda hazır senaryolar (tek tık), sağda AI'a cümleyle anlatma. İkisi de
   TASLAK üretir; üç kısa adımdan sonra yayına girer. Anlatılan şey
   kurulumun kolaylığı: kod yok, ayrı araç yok, onaysız gönderim yok.
   ========================================================================== */

.aud__yollar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.aud__yol {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
}

.aud__yol-etiket {
    font-size: 8.5px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* surface-soft üstünde ink-500 → 6,9:1 */
    color: var(--ink-500);
}

/* Hazır senaryo rozetleri sırayla belirir */
.aud__rozet {
    padding: 4px 8px;
    border-radius: var(--r-full);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 9.5px;
    font-weight: var(--fw-semibold);
    /* Beyaz üstünde ink-800 → 13,1:1 */
    color: var(--ink-800);
    opacity: 0;
}

.aud__rozet--1 { animation: aud-rz-1 8s var(--ease-out) infinite; }
.aud__rozet--2 { animation: aud-rz-2 8s var(--ease-out) infinite; }
.aud__rozet--3 { animation: aud-rz-3 8s var(--ease-out) infinite; }

.aud__veya {
    padding: 3px 7px;
    border-radius: var(--r-full);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 8.5px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    /* Beyaz üstünde ink-500 → 7,4:1 */
    color: var(--ink-500);
}

/* AI yolu: cümle daktiloyla yazılır */
.aud__cumle {
    padding: 7px 9px;
    border-radius: var(--r-sm);
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-400);
    font-size: 10px;
    /* brand-50 üstünde ink-900 → 16,2:1 */
    color: var(--ink-900);
    overflow: hidden;
}

.aud__cumle span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 0;
    animation: aud-cumle 8s steps(30, end) infinite;
}

.aud__birles {
    display: flex;
    justify-content: center;
    margin: 8px 0 6px;
    color: var(--brand-600);
    animation: aud-birles 8s var(--ease-out) infinite;
}

/* Üç kısa kurulum adımı */
.aud__kurulum {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.aud__kr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    /* surface-soft üstünde ink-800 → 12,4:1 */
    color: var(--ink-800);
    opacity: 0.4;
}

.aud__kr-no {
    display: grid;
    place-items: center;
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1.5px var(--border);
    font-size: 9px;
    font-weight: var(--fw-bold);
    /* Beyaz üstünde ink-600 → 7,2:1 */
    color: var(--ink-600);
}

.aud__kr--1 { animation: aud-kr-1 8s steps(1, end) infinite; }
.aud__kr--2 { animation: aud-kr-2 8s steps(1, end) infinite; }
.aud__kr--3 { animation: aud-kr-3 8s steps(1, end) infinite; }

.aud__kr--1 .aud__kr-no { animation: aud-krno-1 8s steps(1, end) infinite; }
.aud__kr--2 .aud__kr-no { animation: aud-krno-2 8s steps(1, end) infinite; }
.aud__kr--3 .aud__kr-no { animation: aud-krno-3 8s steps(1, end) infinite; }

/* Yayına girdi rozeti — en son */
.aud__yayin {
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    background: #dcfce7;
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    text-align: center;
    /* #dcfce7 üstünde #166534 → 6,9:1 */
    color: #166534;
    opacity: 0;
    animation: aud-yayin 8s var(--ease-out) infinite;
}

@keyframes aud-rz-1 { 0%, 4%  { opacity: 0; transform: translateX(-4px); } 12%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateX(-4px); } }
@keyframes aud-rz-2 { 0%, 9%  { opacity: 0; transform: translateX(-4px); } 17%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateX(-4px); } }
@keyframes aud-rz-3 { 0%, 14% { opacity: 0; transform: translateX(-4px); } 22%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateX(-4px); } }

@keyframes aud-cumle { 0%, 8% { max-width: 0; } 30%, 92% { max-width: 100%; } 98%, 100% { max-width: 0; } }

@keyframes aud-birles {
    0%,  30%  { opacity: 0.25; transform: translateY(-3px); }
    38%, 54%  { opacity: 1; transform: translateY(2px); }
    64%, 100% { opacity: 0.25; transform: translateY(-3px); }
}

@keyframes aud-kr-1 { 0%, 38% { opacity: 0.4; } 39%, 100% { opacity: 1; } }
@keyframes aud-kr-2 { 0%, 48% { opacity: 0.4; } 49%, 100% { opacity: 1; } }
@keyframes aud-kr-3 { 0%, 58% { opacity: 0.4; } 59%, 100% { opacity: 1; } }

/* brand-700 üstünde beyaz → 5,36:1 */
@keyframes aud-krno-1 { 0%, 38% { background-color: #fff; color: var(--ink-600); } 39%, 100% { background-color: var(--brand-700); color: #fff; } }
@keyframes aud-krno-2 { 0%, 48% { background-color: #fff; color: var(--ink-600); } 49%, 100% { background-color: var(--brand-700); color: #fff; } }
@keyframes aud-krno-3 { 0%, 58% { background-color: #fff; color: var(--ink-600); } 59%, 100% { background-color: var(--brand-700); color: #fff; } }

@keyframes aud-yayin { 0%, 64% { opacity: 0; transform: scale(0.94); } 72%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.94); } }

/* Dar ekranda iki yol alt alta gelsin */
@media (max-width: 560px) {
    .aud__yollar { grid-template-columns: minmax(0, 1fr); }
    .aud__veya { justify-self: center; }
}

/* ==========================================================================
   ÜÇ KANAL — mail / SMS / WhatsApp ayrı ayrı

   Menüdeki üç madde bu satırların çapalarına iniyor. Kart aynı kalıptan
   türer; kanalı ayıran tek şey rozetin rengi ve sağlayıcı satırıdır.
   ========================================================================== */

.aud__kanal-ust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: var(--sp-4);
    opacity: 0;
    animation: aud-kanal-ust 8s var(--ease-out) infinite;
}

.aud__kanal-rozet {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
    color: #fff;
}

/*
 * Üç ton da BEYAZ yazıyla ölçüldü:
 *   brand-800  #155e75 → 7,3:1
 *   ink-700    #334155 → 10,4:1
 *   teal-800   #115e59 → 7,6:1
 * Renk tek başına anlam taşımıyor; rozetin içinde kanalın adı yazıyor.
 */
.aud__kanal-rozet--mail { background: var(--brand-800); }
.aud__kanal-rozet--sms  { background: var(--ink-700, #334155); }
.aud__kanal-rozet--wa   { background: #115e59; }

.aud__kanal-saglayici {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    /* Beyaz üstünde ink-600 → 7,6:1 */
    color: var(--ink-600);
}

/* Onay işareti — kanal listesinde kullanılıyor. brand-700 beyaz tik ile 5,36:1 */
.aud__tik {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--brand-700);
}

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

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

.aud__kn {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 6px 0;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    line-height: 1.45;
    color: var(--ink-700, #334155);
    opacity: 0;
}

.aud__kn--1 { animation: aud-kn-1 8s var(--ease-out) infinite; }
.aud__kn--2 { animation: aud-kn-2 8s var(--ease-out) infinite; }
.aud__kn--3 { animation: aud-kn-3 8s var(--ease-out) infinite; }

@keyframes aud-kanal-ust { 0%, 3%  { opacity: 0; transform: translateY(-6px); } 12%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes aud-kn-1      { 0%, 14% { opacity: 0; transform: translateX(6px); } 22%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateX(6px); } }
@keyframes aud-kn-2      { 0%, 24% { opacity: 0; transform: translateX(6px); } 32%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateX(6px); } }
@keyframes aud-kn-3      { 0%, 34% { opacity: 0; transform: translateX(6px); } 42%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) {
    .aud__kanal-ust,
    .aud__kn { opacity: 1; transform: none; }
}