/* Hero görseli: kargo ve ödeme entegrasyonları.

   Üstte sipariş, ortada taşıyıcı fiyatları, altta hazırlanan etiket.
   Üç parça bilerek kayık durur; çerçeveli tek bir "ürün ekranı" değil.

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

   Ortak döngü: 8 sn. */

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

/* ---------------------------------------------------------- sipariş kartı */

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

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

.sph__adres {
    font-size: 12px;
    font-weight: var(--fw-semibold);
    /* Beyaz üstünde ink-900 → 17,9:1 */
    color: var(--ink-900);
}

.sph__desi {
    font-family: "Courier New", monospace;
    font-size: 10.5px;
    /* Beyaz üstünde ink-600 → 7,2:1 */
    color: var(--ink-600);
}

/* ------------------------------------------------------ taşıyıcı fiyatları */

.sph__fiyatlar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
    /* Sipariş 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);
}

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

/* Logolar farklı biçimlerde; hepsi aynı ölçüde beyaz yongaya oturur */
.sph__logo {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--r-xs, 6px);
    background: #fff;
    overflow: hidden;
}

.sph__logo img { width: 100%; height: 100%; object-fit: contain; }

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

.sph__ucuz {
    flex: none;
    padding: 2px 7px;
    border-radius: var(--r-full);
    background: var(--success-700, #15803d);
    font-size: 9px;
    font-weight: var(--fw-bold);
    white-space: nowrap;
    /* success-700 üstünde beyaz → 4,8:1 */
    color: #fff;
    opacity: 0;
    animation: sph-ucuz 8s var(--ease-out) infinite;
}

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

/* En uygun satır seçilince marka çerçevesi alır */
.sph__fiyat--secili { box-shadow: inset 0 0 0 2px var(--brand-400); }

.sph__fiyat--1 { animation: sph-satir-1 8s var(--ease-out) infinite; }
.sph__fiyat--2 { animation: sph-satir-2 8s var(--ease-out) infinite; }
.sph__fiyat--3 { animation: sph-satir-3 8s var(--ease-out) infinite; }

/* ------------------------------------------------------------ etiket kartı */

.sph__etiket {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    width: 78%;
    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: sph-etiket 8s var(--ease-out) infinite;
}

/* Barkod: okunabilir bir kod iddia edilmiyor, biçim işareti */
.sph__barkod {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    flex: none;
    height: 34px;
}

.sph__barkod i {
    display: block;
    width: 2px;
    height: 100%;
    background: var(--ink-900);
}

.sph__barkod i:nth-child(3n)   { width: 3px; height: 78%; }
.sph__barkod i:nth-child(4n)   { width: 1px; }
.sph__barkod i:nth-child(5n)   { height: 88%; }

.sph__etiket-metin { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.sph__etiket-baslik {
    font-size: 11.5px;
    font-weight: var(--fw-bold);
    color: var(--ink-900);
}

.sph__etiket-durum {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    /* Beyaz üstünde success-700 → 4,8:1 */
    color: var(--success-700, #15803d);
}

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

/* Fiyatlar sırayla düşer — teklif toplanıyor izlenimi */
@keyframes sph-satir-1 {
    0%,  8%   { opacity: 0; transform: translateY(-6px); }
    16%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes sph-satir-2 {
    0%,  16%  { opacity: 0; transform: translateY(-6px); }
    24%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(-6px); }
}

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

/* Hepsi geldikten SONRA en uygunu işaretlenir */
@keyframes sph-ucuz {
    0%,  38%  { opacity: 0; transform: scale(0.88); }
    46%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: scale(0.88); }
}

/* Etiket en son çıkar: seçim yapıldı, gönderi oluştu */
@keyframes sph-etiket {
    0%,  54%  { opacity: 0; transform: translateY(8px); }
    64%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(8px); }
}

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

    .sph__fiyat,
    .sph__ucuz,
    .sph__etiket { opacity: 1; transform: none; }
}

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

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

    .sph__siparis { width: 82%; }
    .sph__fiyatlar { width: 96%; padding-left: var(--sp-6); }
    .sph__etiket { width: 86%; }
}

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

@media (max-width: 560px) {
    .sph { padding: 0 0 var(--sp-6); max-width: none; }
    .sph__siparis,
    .sph__fiyatlar,
    .sph__etiket { width: 100%; }
    .sph__fiyatlar { margin-top: var(--sp-4); padding: var(--sp-4); }
    .sph__etiket { margin-top: var(--sp-4); }
}