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

   Hepsi tek bir beyaz kart üstünde çalışır ve GERÇEK taşıyıcı / ödeme
   logolarını kullanır (config/shipping-payment.php). Logolar farklı
   biçimlerde; hepsi aynı ölçüdeki beyaz yongaya `object-fit: contain` ile
   oturur, aksi hâlde hizasız görünürler.

   ANİMASYON KURALI (bkz. aihero.css, marketdemo.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. */

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

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

.spd__baslik,
.spd__alt-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);
}

.spd__alt-baslik { margin-top: var(--sp-4); }

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

/* --- ortak: logo yongası --------------------------------------------------- */

.spd__logo {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

/* ==========================================================================
   1 ve 4) LOGO DUVARI — taşıyıcılar / ödeme sağlayıcıları
   Yongalar dalga hâlinde belirir: hepsi tek anlaşmayla açılıyor izlenimi.
   ========================================================================== */

.spd__duvar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 7px;
}

.spd__yonga {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 2;
    padding: 7px;
    border-radius: var(--r-sm);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--border);
    opacity: 0;
}

.spd__yonga--1 { animation: spd-yonga-1 8s var(--ease-out) infinite; }
.spd__yonga--2 { animation: spd-yonga-2 8s var(--ease-out) infinite; }
.spd__yonga--3 { animation: spd-yonga-3 8s var(--ease-out) infinite; }
.spd__yonga--4 { animation: spd-yonga-4 8s var(--ease-out) infinite; }
.spd__yonga--5 { animation: spd-yonga-5 8s var(--ease-out) infinite; }
.spd__yonga--6 { animation: spd-yonga-6 8s var(--ease-out) infinite; }

@keyframes spd-yonga-1 { 0%, 4%  { opacity: 0; transform: scale(0.92); } 12%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.92); } }
@keyframes spd-yonga-2 { 0%, 8%  { opacity: 0; transform: scale(0.92); } 16%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.92); } }
@keyframes spd-yonga-3 { 0%, 12% { opacity: 0; transform: scale(0.92); } 20%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.92); } }
@keyframes spd-yonga-4 { 0%, 16% { opacity: 0; transform: scale(0.92); } 24%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.92); } }
@keyframes spd-yonga-5 { 0%, 20% { opacity: 0; transform: scale(0.92); } 28%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.92); } }
@keyframes spd-yonga-6 { 0%, 24% { opacity: 0; transform: scale(0.92); } 32%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.92); } }

/* Kart dışı ödeme yöntemleri — logo yok, rozet var */
.spd__rozetler {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.spd__rz {
    padding: 4px 9px;
    border-radius: var(--r-full);
    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;
}

.spd__rz--1 { animation: spd-rz-1 8s var(--ease-out) infinite; }
.spd__rz--2 { animation: spd-rz-2 8s var(--ease-out) infinite; }
.spd__rz--3 { animation: spd-rz-3 8s var(--ease-out) infinite; }
.spd__rz--4 { animation: spd-rz-4 8s var(--ease-out) infinite; }

@keyframes spd-rz-1 { 0%, 34% { opacity: 0; transform: translateY(4px); } 42%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes spd-rz-2 { 0%, 38% { opacity: 0; transform: translateY(4px); } 46%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes spd-rz-3 { 0%, 42% { opacity: 0; transform: translateY(4px); } 50%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes spd-rz-4 { 0%, 46% { opacity: 0; transform: translateY(4px); } 54%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(4px); } }

/* ==========================================================================
   2) PAKET — ölçü, ağırlık, desi; eksik varsa etiket kesilmez
   ========================================================================== */

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

.spd__ol {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    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);
}

/* Desi satırı hesaplanınca vurgulanır */
.spd__ol--sonuc {
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-400);
    font-size: 12px;
    font-weight: var(--fw-bold);
    /* brand-50 üstünde brand-800 → 6,9:1 */
    color: var(--brand-800);
    opacity: 0;
    animation: spd-desi 8s var(--ease-out) infinite;
}

.spd__uyari {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--warning-100, #fef3c7);
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    /* warning-100 üstünde warning-800 → 6,4:1 */
    color: var(--warning-800, #92400e);
    opacity: 0;
    animation: spd-uyari 8s var(--ease-out) infinite;
}

.spd__uyari svg { flex: none; }

@keyframes spd-desi  { 0%, 20% { opacity: 0; transform: translateY(5px); } 30%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(5px); } }
@keyframes spd-uyari { 0%, 44% { opacity: 0; transform: translateY(5px); } 54%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(5px); } }

/* ==========================================================================
   3) CÜZDAN — bakiye bloke edilir, gönderi oluşunca tahsil edilir
   ========================================================================== */

.spd__bakiye {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 11px;
    border-radius: var(--r-sm);
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-400);
}

.spd__bakiye-etiket {
    font-size: 9px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-800);
}

/* İki değer aynı hücrede: kutu zıplamaz */
.spd__bakiye-deger {
    display: inline-grid;
    font-size: 16px;
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--ink-900);
}

.spd__bakiye-eski,
.spd__bakiye-yeni { grid-area: 1 / 1; text-align: right; }

.spd__bakiye-eski { animation: spd-bak-eski 8s steps(1, end) infinite; }
.spd__bakiye-yeni { animation: spd-bak-yeni 8s steps(1, end) infinite; }

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

.spd__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);
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    color: var(--ink-800);
    opacity: 0.45;
}

.spd__tik {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1.5px var(--border);
}

.spd__adim--1 { animation: spd-adim-1 8s steps(1, end) infinite; }
.spd__adim--2 { animation: spd-adim-2 8s steps(1, end) infinite; }
.spd__adim--3 { animation: spd-adim-3 8s steps(1, end) infinite; }

.spd__adim--1 .spd__tik { animation: spd-tik-1 8s steps(1, end) infinite; }
.spd__adim--2 .spd__tik { animation: spd-tik-2 8s steps(1, end) infinite; }
.spd__adim--3 .spd__tik { animation: spd-tik-3 8s steps(1, end) infinite; }

@keyframes spd-adim-1 { 0%, 14% { opacity: 0.45; } 15%, 100% { opacity: 1; } }
@keyframes spd-adim-2 { 0%, 30% { opacity: 0.45; } 31%, 100% { opacity: 1; } }
@keyframes spd-adim-3 { 0%, 46% { opacity: 0.45; } 47%, 100% { opacity: 1; } }

@keyframes spd-tik-1 { 0%, 14% { background-color: #fff; } 15%, 100% { background-color: var(--success-600, #16a34a); } }
@keyframes spd-tik-2 { 0%, 30% { background-color: #fff; } 31%, 100% { background-color: var(--success-600, #16a34a); } }
@keyframes spd-tik-3 { 0%, 46% { background-color: #fff; } 47%, 100% { background-color: var(--success-600, #16a34a); } }

/* Bakiye ancak TAHSİL adımında düşer — sıra bozulursa anlatım bozulur */
@keyframes spd-bak-eski { 0%, 46% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes spd-bak-yeni { 0%, 46% { opacity: 0; } 47%, 100% { opacity: 1; } }

/* ==========================================================================
   5) TAKSİT — tutar bölünür
   ========================================================================== */

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

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

.spd__tutar-deger {
    font-size: 16px;
    font-weight: var(--fw-bold);
    color: var(--ink-900);
}

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

.spd__tk {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    padding: 9px 8px;
    border-radius: var(--r-sm);
    background: var(--brand-50);
    font-size: 12px;
    font-weight: var(--fw-bold);
    /* brand-50 üstünde brand-800 → 6,9:1 */
    color: var(--brand-800);
    opacity: 0;
}

.spd__tk span:first-child { font-size: 10px; font-weight: var(--fw-semibold); }

.spd__tk--1 { animation: spd-tk-1 8s var(--ease-out) infinite; }
.spd__tk--2 { animation: spd-tk-2 8s var(--ease-out) infinite; }
.spd__tk--3 { animation: spd-tk-3 8s var(--ease-out) infinite; }
.spd__tk--4 { animation: spd-tk-4 8s var(--ease-out) infinite; }

@keyframes spd-tk-1 { 0%, 12% { opacity: 0; transform: translateY(5px); } 20%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(5px); } }
@keyframes spd-tk-2 { 0%, 20% { opacity: 0; transform: translateY(5px); } 28%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(5px); } }
@keyframes spd-tk-3 { 0%, 28% { opacity: 0; transform: translateY(5px); } 36%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(5px); } }
@keyframes spd-tk-4 { 0%, 36% { opacity: 0; transform: translateY(5px); } 44%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(5px); } }

/* ==========================================================================
   6) KURALLAR — hangi yöntem hangi siparişte açık
   ========================================================================== */

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

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

.spd__kural-metin {
    min-width: 0;
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    /* surface-soft üstünde ink-800 → 12,4:1 */
    color: var(--ink-800);
}

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

.spd__anahtar::after {
    content: "";
    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);
}

.spd__kural--1 .spd__anahtar { animation: spd-anh-1 8s steps(1, end) infinite; }
.spd__kural--2 .spd__anahtar { animation: spd-anh-2 8s steps(1, end) infinite; }
.spd__kural--3 .spd__anahtar { animation: spd-anh-3 8s steps(1, end) infinite; }

.spd__kural--1 .spd__anahtar::after { animation: spd-top-1 8s var(--ease-out) infinite; }
.spd__kural--3 .spd__anahtar::after { animation: spd-top-3 8s var(--ease-out) infinite; }

/* Açık olanlar yeşile döner; ikinci kural KAPALI kalır — kural motoru
   her yöntemi açmıyor, sipariş koşuluna bakıyor. */
@keyframes spd-anh-1 { 0%, 14% { background-color: var(--ink-300); } 15%, 100% { background-color: var(--success-600, #16a34a); } }
@keyframes spd-anh-2 { 0%, 100% { background-color: var(--ink-300); } }
@keyframes spd-anh-3 { 0%, 34% { background-color: var(--ink-300); } 35%, 100% { background-color: var(--success-600, #16a34a); } }

@keyframes spd-top-1 { 0%, 14% { transform: translateX(0); } 20%, 100% { transform: translateX(12px); } }
@keyframes spd-top-3 { 0%, 34% { transform: translateX(0); } 40%, 100% { transform: translateX(12px); } }

/* ------------------------------------------------------------- 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) {
    .spd *,
    .spd { animation: none !important; }

    .spd__yonga,
    .spd__rz,
    .spd__ol--sonuc,
    .spd__uyari,
    .spd__tk { opacity: 1; transform: none; }

    .spd__adim,
    .spd__ak { opacity: 1; }
    .spd__no { background-color: var(--brand-700); color: #fff; }
    .spd__ak--8 .spd__no { background-color: var(--success-600, #16a34a); }
    .spd__tik  { background-color: var(--success-600, #16a34a); }

    .spd__bakiye-eski { opacity: 0; }
    .spd__bakiye-yeni { opacity: 1; }

    .spd__kural--1 .spd__anahtar,
    .spd__kural--3 .spd__anahtar { background-color: var(--success-600, #16a34a); }

    .spd__kural--1 .spd__anahtar::after,
    .spd__kural--3 .spd__anahtar::after { transform: translateX(12px); }
}

@media (max-width: 560px) {
    .spd { padding: 2% 0; }
    .spd__card { padding: var(--sp-4); }
    .spd__duvar { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
}

/* ==========================================================================
   7) OTOMATİK ETİKET AKIŞI — AutoLabelEngine'in sekiz adımı

   Adımlar sırayla yanar. İki sütuna bölünüyor: sekiz satır tek sütunda
   kartı gereksiz uzatıyordu ve vitrin satırının metin sütunuyla dengesi
   bozuluyordu.
   ========================================================================== */

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

.spd__ak {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    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;
}

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

.spd__ak-metin {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spd__ak--1 { animation: spd-ak-1 8s steps(1, end) infinite; }
.spd__ak--2 { animation: spd-ak-2 8s steps(1, end) infinite; }
.spd__ak--3 { animation: spd-ak-3 8s steps(1, end) infinite; }
.spd__ak--4 { animation: spd-ak-4 8s steps(1, end) infinite; }
.spd__ak--5 { animation: spd-ak-5 8s steps(1, end) infinite; }
.spd__ak--6 { animation: spd-ak-6 8s steps(1, end) infinite; }
.spd__ak--7 { animation: spd-ak-7 8s steps(1, end) infinite; }
.spd__ak--8 { animation: spd-ak-8 8s steps(1, end) infinite; }

.spd__ak--1 .spd__no { animation: spd-no-1 8s steps(1, end) infinite; }
.spd__ak--2 .spd__no { animation: spd-no-2 8s steps(1, end) infinite; }
.spd__ak--3 .spd__no { animation: spd-no-3 8s steps(1, end) infinite; }
.spd__ak--4 .spd__no { animation: spd-no-4 8s steps(1, end) infinite; }
.spd__ak--5 .spd__no { animation: spd-no-5 8s steps(1, end) infinite; }
.spd__ak--6 .spd__no { animation: spd-no-6 8s steps(1, end) infinite; }
.spd__ak--7 .spd__no { animation: spd-no-7 8s steps(1, end) infinite; }
.spd__ak--8 .spd__no { animation: spd-no-8 8s steps(1, end) infinite; }

@keyframes spd-ak-1 { 0%, 6%  { opacity: 0.4; } 7%,  100% { opacity: 1; } }
@keyframes spd-ak-2 { 0%, 14% { opacity: 0.4; } 15%, 100% { opacity: 1; } }
@keyframes spd-ak-3 { 0%, 22% { opacity: 0.4; } 23%, 100% { opacity: 1; } }
@keyframes spd-ak-4 { 0%, 30% { opacity: 0.4; } 31%, 100% { opacity: 1; } }
@keyframes spd-ak-5 { 0%, 38% { opacity: 0.4; } 39%, 100% { opacity: 1; } }
@keyframes spd-ak-6 { 0%, 46% { opacity: 0.4; } 47%, 100% { opacity: 1; } }
@keyframes spd-ak-7 { 0%, 54% { opacity: 0.4; } 55%, 100% { opacity: 1; } }
@keyframes spd-ak-8 { 0%, 62% { opacity: 0.4; } 63%, 100% { opacity: 1; } }

/* brand-700 üstünde beyaz → 5,36:1 */
@keyframes spd-no-1 { 0%, 6%  { background-color: #fff; color: var(--ink-600); } 7%,  100% { background-color: var(--brand-700); color: #fff; } }
@keyframes spd-no-2 { 0%, 14% { background-color: #fff; color: var(--ink-600); } 15%, 100% { background-color: var(--brand-700); color: #fff; } }
@keyframes spd-no-3 { 0%, 22% { background-color: #fff; color: var(--ink-600); } 23%, 100% { background-color: var(--brand-700); color: #fff; } }
@keyframes spd-no-4 { 0%, 30% { background-color: #fff; color: var(--ink-600); } 31%, 100% { background-color: var(--brand-700); color: #fff; } }
@keyframes spd-no-5 { 0%, 38% { background-color: #fff; color: var(--ink-600); } 39%, 100% { background-color: var(--brand-700); color: #fff; } }
@keyframes spd-no-6 { 0%, 46% { background-color: #fff; color: var(--ink-600); } 47%, 100% { background-color: var(--brand-700); color: #fff; } }
@keyframes spd-no-7 { 0%, 54% { background-color: #fff; color: var(--ink-600); } 55%, 100% { background-color: var(--brand-700); color: #fff; } }
/* Son adım YEŞİL: akış burada bitiyor, etiket yazdırmaya hazır */
@keyframes spd-no-8 { 0%, 62% { background-color: #fff; color: var(--ink-600); } 63%, 100% { background-color: var(--success-600, #16a34a); color: #fff; } }