/* Hero görseli: mail, SMS ve WhatsApp otomasyonları.

   Üstte terk edilen sepet, ortada üç adımlı seri, altta panelin ÖLÇTÜĞÜ
   sonuç. Üç parça bilerek kayık; çerçeveli tek bir ekran değil.

   ANİMASYON KURALI (bkz. aihero.css, shiphero.css): döngüyü paylaşan her
   öğenin KENDİ keyframe'i vardır — tek keyframe + delay ile `infinite`
   çalışırken ilk turdan sonra faz kayar.

   Ortak döngü: 13 sn (üç adım + ölçüm sırası sığsın diye biraz uzun). */

.auh {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 32rem;
    margin-left: auto;
    padding: var(--sp-10) var(--sp-6) var(--sp-10) var(--sp-10);
}

/* ------------------------------------------------------------ sepet kartı */

.auh__sepet {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 76%;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: 0 20px 44px rgba(2, 6, 23, 0.38);
}

.auh__sepet-ikon {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    background: var(--warning-100, #fef3c7);
    /* warning-100 üstünde warning-800 → 6,4:1 */
    color: var(--warning-800, #92400e);
}

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

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

.auh__sepet-urun {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
}

.auh__sepet-tutar {
    flex: none;
    font-size: 13px;
    font-weight: var(--fw-bold);
    color: var(--ink-900);
}

/* ----------------------------------------------------------- seri adımları */

.auh__seri {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
    /* Sepet kartının altından sağa kayar */
    margin: calc(var(--sp-3) * -1) 0 0 auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-4) var(--sp-8);
    width: 92%;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(3px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.auh__adim {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.96);
    opacity: 0;
}

/* Kanal rengi: mail marka, SMS mor, WhatsApp yeşil.
   Üçü de kendi zeminlerinde 4,5:1 üstü. */
.auh__kanal {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--r-xs, 6px);
}

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

.auh__adim-metin {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
}

.auh__zaman {
    flex: none;
    padding: 2px 7px;
    border-radius: var(--r-full);
    background: var(--surface-soft);
    font-size: 9px;
    font-weight: var(--fw-bold);
    white-space: nowrap;
    /* surface-soft üstünde ink-700 → 9,6:1 */
    color: var(--ink-700);
}

.auh__adim--1 { animation: auh-adim-1 9s var(--ease-out) infinite; }
.auh__adim--2 { animation: auh-adim-2 9s var(--ease-out) infinite; }
.auh__adim--3 { animation: auh-adim-3 9s var(--ease-out) infinite; }

/* ---------------------------------------------------------- ölçüm kartı */

.auh__olcum {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    width: 80%;
    margin: calc(var(--sp-3) * -1) auto 0 0;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: 0 20px 44px rgba(2, 6, 23, 0.38);
    opacity: 0;
    animation: auh-olcum 9s var(--ease-out) infinite;
}

.auh__olcum-baslik {
    font-size: 9px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-500);
}

.auh__olcum-satir { display: flex; gap: var(--sp-4); }

.auh__metrik {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

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

/* İkinci ve üçüncü metrik marka renginde: sıralamayı gözle ayırt ettirir */
.auh__metrik--2 .auh__metrik-deger,
.auh__metrik--3 .auh__metrik-deger { color: var(--brand-800); }

.auh__metrik-etiket {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9.5px;
    font-weight: var(--fw-semibold);
    /* Beyaz üstünde ink-600 → 7,2:1 */
    color: var(--ink-600);
}

/* -------------------------------------------------------------- animasyon */

/* Adımlar zamanında düşer: hemen → 1 gün sonra → 3 gün sonra */
@keyframes auh-adim-1 {
    0%,  8%   { opacity: 0; transform: translateY(-6px); }
    16%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes auh-adim-2 {
    0%,  20%  { opacity: 0; transform: translateY(-6px); }
    28%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes auh-adim-3 {
    0%,  32%  { opacity: 0; transform: translateY(-6px); }
    40%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* Ölçüm en son: seri çalıştıktan sonra sonucu görürsünüz */
@keyframes auh-olcum {
    0%,  50%  { opacity: 0; transform: translateY(8px); }
    60%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(8px); }
}

/* Hareket azaltma tercihi: kompozisyon TAMAMLANMIŞ hâlde durur.
   Animasyonu kapatmak yetmez — adımlar ve ölçüm opacity: 0 ile başlıyor. */
@media (prefers-reduced-motion: reduce) {
    .auh *,
    .auh { animation: none !important; }

    .auh__adim,
    .auh__olcum { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- duyarlılık */

@media (min-width: 901px) and (max-width: 1200px) {
    .auh {
        max-width: 28rem;
        padding: var(--sp-8) var(--sp-4) var(--sp-8) var(--sp-6);
    }

    .auh__sepet { width: 84%; }
    .auh__seri  { width: 96%; padding-left: var(--sp-6); }
    .auh__olcum { width: 88%; }
    .auh__olcum-satir { gap: var(--sp-3); }
}

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

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

    .auh__sepet,
    .auh__seri,
    .auh__olcum { width: 100%; }

    .auh__seri  { margin-top: var(--sp-4); padding: var(--sp-4); }
    .auh__olcum { margin-top: var(--sp-4); }
    .auh__olcum-satir { gap: var(--sp-3); }
}