/* =====================================================================
   SİPARİŞ TAKİP SAYFASI
   Son Güncelleme: 2026-06-17
   ===================================================================== */

/* ─── HERO ─── */
.st-hero {
    background: #fff;
    border-bottom: 1px solid var(--cizgi);
    padding: 24px 0 28px;
}

.st-baslik {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: var(--kahve-koyu);
    margin: 0 0 6px;
}

.st-alt-baslik {
    font-size: 15px;
    color: var(--gri);
    margin: 0;
}

/* ─── ANA ALAN ─── */
.st-alan {
    padding: 36px 0 72px;
}

.st-merkez {
    max-width: 780px;
    margin: 0 auto;
}

/* ─── FORM KARTI ─── */
.st-form-kart {
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 28px;
    box-shadow: var(--golge-sm);
}

.st-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    align-items: end;
}

.st-form-alan {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.st-form-alan label {
    font-size: 13px;
    font-weight: 600;
    color: var(--koyu);
}

.st-zorunlu {
    color: var(--kirmizi);
}

.st-form-alan input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--cizgi-koyu);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--koyu);
    background: #fff;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.st-form-alan input:focus {
    border-color: var(--ceviz);
    box-shadow: var(--golge-odak);
}

.st-form-alan input::placeholder {
    color: var(--gri-acik);
}

.st-form-btn-alan {
    display: flex;
    align-items: flex-end;
}

.st-btn {
    white-space: nowrap;
}

/* ─── SONUÇ KARTI ─── */
.st-sonuc {
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--golge-sm);
}

.st-sonuc-ust {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    padding: 22px 28px;
    border-bottom: 1px solid var(--cizgi);
}

.st-sonuc-baslik {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--koyu);
    margin: 0 0 4px;
}

.st-sonuc-tarih {
    font-size: 13px;
    color: var(--gri);
    margin: 0;
}

.st-sonuc-sag {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.st-toplam {
    font-size: 20px;
    font-weight: 700;
    color: var(--kahve);
}

/* Durum badge */
.st-durum {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.st-durum-beklemede { background: #fef3c7; color: #92400e; }
.st-durum-onaylandi { background: #dbeafe; color: #1e40af; }
.st-durum-hazirlaniyor { background: #e0e7ff; color: #3730a3; }
.st-durum-kargoda { background: #d1fae5; color: #065f46; }
.st-durum-teslim { background: #d1fae5; color: #065f46; }
.st-durum-iptal { background: #fee2e2; color: #991b1b; }
.st-durum-iade { background: #fef3c7; color: #92400e; }

/* ─── İLERLEME ÇUBUĞU ─── */
.st-ilerleme {
    display: flex;
    align-items: center;
    padding: 28px;
    border-bottom: 1px solid var(--cizgi);
    overflow-x: auto;
    gap: 0;
}

.st-adim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.st-adim-daire {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--krem);
    border: 2px solid var(--cizgi-koyu);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--gri-acik);
    transition: all .2s ease;
}

.st-adim.gecti .st-adim-daire {
    background: var(--krem-koyu);
    border-color: var(--ceviz);
    color: var(--kahve);
}

.st-adim.aktif .st-adim-daire {
    background: var(--kahve);
    border-color: var(--kahve);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(74, 51, 36, .12);
}

.st-adim-ad {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--gri-acik);
    white-space: nowrap;
}

.st-adim.gecti .st-adim-ad { color: var(--ceviz); }
.st-adim.aktif .st-adim-ad { color: var(--kahve); font-weight: 700; }

.st-cizgi {
    flex: 1;
    height: 2px;
    background: var(--cizgi);
    margin-bottom: 22px;
    min-width: 20px;
}

.st-cizgi.dolu {
    background: var(--ceviz);
}

/* ─── KARGO KUTUSU ─── */
.st-kargo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 28px;
    background: var(--krem);
    border-bottom: 1px solid var(--cizgi);
}

.st-kargo-bilgi {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--koyu);
}

.st-kargo-bilgi svg {
    color: var(--ceviz);
    flex-shrink: 0;
}

.st-kargo-bilgi div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.st-kargo-bilgi span {
    font-size: 13px;
    color: var(--gri);
}

/* ─── DETAY ALT GRID ─── */
.st-detay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.st-detay-blok {
    padding: 22px 28px;
}

.st-detay-blok:first-child {
    border-right: 1px solid var(--cizgi);
}

.st-detay-blok h3 {
    font-size: 14px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: var(--kahve-koyu);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--krem-koyu);
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Kalemler */
.st-kalemler {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.st-kalem {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
}

.st-kalem-ad {
    color: var(--koyu);
}

.st-kalem-adet {
    font-size: 12px;
    color: var(--gri);
}

.st-kalem-fiyat {
    font-weight: 700;
    color: var(--kahve);
    white-space: nowrap;
}

/* Geçmiş */
.st-gecmis {
    list-style: none;
    padding: 0;
    margin: 0;
}

.st-gecmis li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--krem-koyu);
}

.st-gecmis li:last-child {
    border-bottom: none;
}

.st-gecmis-nokta {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--kahve);
    flex-shrink: 0;
    margin-top: 4px;
}

.st-gecmis-icerik {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.st-gecmis-icerik strong {
    font-size: 13.5px;
    color: var(--koyu);
}

.st-gecmis-icerik time {
    font-size: 12px;
    color: var(--gri);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 680px) {
    .st-form-grid {
        grid-template-columns: 1fr;
    }

    .st-btn {
        width: 100%;
        justify-content: center;
    }

    .st-form-kart {
        padding: 20px;
    }

    .st-sonuc-ust,
    .st-ilerleme,
    .st-kargo,
    .st-detay-blok {
        padding-left: 20px;
        padding-right: 20px;
    }

    .st-detay-grid {
        grid-template-columns: 1fr;
    }

    .st-detay-blok:first-child {
        border-right: none;
        border-bottom: 1px solid var(--cizgi);
    }

    .st-ilerleme {
        gap: 0;
        padding: 20px 16px;
    }

    .st-adim-daire {
        width: 32px;
        height: 32px;
    }

    .st-adim-ad {
        font-size: 10px;
    }
}