/* ==========================================================================
   ADIM ŞERİDİ (04.08.2026)

   ⚠️ EL TERMİNALİ ÖNCE: 360px'te beş adım yan yana sığmaz. Şerit YATAY
   KAYAR ve etkin adım görünüre getirilir; adları kırpmak yerine kaydırmak
   seçildi çünkü "Sipariş"/"Satır" kırpılınca ayırt edilemiyor.

   ⚠️ DOKUNMA HEDEFİ belirteçten (--dokunma, terminalde 56px). Şerit gezinme
   öğesidir; yanlış dokunuş kullanıcıyı yanlış adıma atar.
   ========================================================================== */

.adim-serit {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 8px 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--kenar, #24313d);
    /* Kaydırma çubuğu el terminalinde yer kaplar ve dokunmayla zaten kayıyor. */
    scrollbar-width: none;
}
.adim-serit::-webkit-scrollbar { display: none; }

.adim {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    min-height: var(--dokunma, 48px);
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--metin-3, #7b8b9a);
    font: inherit;
    font-size: 13px;
    white-space: nowrap;
    cursor: default;
}

/* Geçmiş adım TIKLANABİLİR (geri dönüş); imleç bunu söylemeli. */
.adim-gecmis { color: var(--metin-2, #9fb0c0); cursor: pointer; }
.adim-gecmis:hover { background: var(--yuzey-2, #17222c); }

.adim-simdi {
    color: var(--metin-1, #e8eef5);
    background: var(--yuzey-2, #17222c);
    font-weight: 700;
}

.adim-no {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    background: var(--kenar, #24313d);
    color: var(--metin-2, #9fb0c0);
}

.adim-simdi .adim-no { background: var(--vurgu, #22cfbd); color: #06202a; }
.adim-gecmis .adim-no { background: transparent; color: var(--vurgu, #22cfbd); }
.adim-gecmis .adim-no svg { width: 16px; height: 16px; }

/* ------------------------------------------------------- ALT EYLEM ÇUBUĞU
   ⚠️ ALTTA VE YAPIŞIK: baş parmak menzili (mobil kabuk gerekçesiyle aynı).
   Kullanıcı listenin sonuna kadar kaydırmadan İleri'ye ulaşabilmeli. */
.adim-eylem {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    padding: 10px 0 calc(env(safe-area-inset-bottom, 0px) + 10px);
    background: linear-gradient(to bottom, transparent, var(--yuzey, #0f1720) 22%);
    z-index: 20;
}

.adim-eylem .dugme { flex: 1; min-height: var(--dokunma, 48px); }
.adim-geri { flex: 0 0 96px !important; }

/* Adım gövdesi: şerit ve eylem çubuğu arasındaki alan. */
.adim-govde { padding-bottom: 4px; }

/* Seçilen adımın özeti — üstteki adımlarda ne seçildiğini hatırlatır.
   ⚠️ HATIRLATMA ŞART: adım adım akışta kullanıcı iki adım sonra "hangi
   depoydu?" diye geri dönmek zorunda kalırsa akış kazandırdığını kaybeder. */
.adim-ozet {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.adim-ozet .rozet { font-size: 12px; }