/* ============================================================
   FILE: assets/css/tracking.css
   Styles spesifik untuk halaman tracking (tracking.php)
   ============================================================ */

/* ===== HERO ===== */
.hero { padding: 64px 0 100px; }
.hero-content { position: relative; z-index: 1; }

/* ===== Search card (floating) ===== */
.search-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 8px 40px rgba(13,33,55,.15);
    border-top: 4px solid var(--accent);
    padding: 36px 40px;
    max-width: 620px;
    margin: -56px auto 0;
    position: relative; z-index: 10;
}
.input-kode {
    font-size: 1.2rem; font-weight: 700;
    font-family: 'Roboto Mono', monospace;
    letter-spacing: 4px; text-transform: uppercase;
    border: 2px solid #e2e8f0; border-radius: 10px;
    padding: 14px 20px;
    transition: border-color .2s, box-shadow .2s;
    background: #f8fafc;
}
.input-kode:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(240,165,0,.15);
    background: #fff; outline: none;
}
.btn-cek {
    background: linear-gradient(135deg, var(--accent), #e67e00);
    color: #fff; border: none; border-radius: 10px;
    padding: 0 32px; font-weight: 700; font-size: .95rem;
    font-family: 'Sora', sans-serif; height: 54px;
    transition: transform .18s, box-shadow .18s; white-space: nowrap;
}
.btn-cek:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(240,165,0,.45); color: #fff; }

/* ===== Result card ===== */
.result-wrap { max-width: 720px; margin: 40px auto 60px; }

.status-header {
    background: linear-gradient(135deg, var(--navy), var(--blue));
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 28px 32px; color: #fff;
}
.kode-ref {
    font-family: 'Sora', sans-serif;
    font-size: 1.6rem; font-weight: 800;
    letter-spacing: 3px; color: var(--accent);
}
.status-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 20px; border-radius: 999px;
    font-size: .95rem; font-weight: 700; font-family: 'Sora', sans-serif;
}

/* ===== Stepper ===== */
.stepper {
    display: flex; align-items: flex-start;
    gap: 0; padding: 24px 32px;
    background: #fff; border-bottom: 1px solid #f0f4f8;
}
.step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.step:not(:last-child)::after {
    content: ''; position: absolute; top: 19px; left: 60%;
    width: 80%; height: 2px; background: #e2e8f0; z-index: 0;
}
.step.done:not(:last-child)::after,
.step.active:not(:last-child)::after { background: #22c55e; }
.step-dot {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 700;
    border: 2px solid #e2e8f0; background: #f8fafc; color: #94a3b8;
    position: relative; z-index: 1; transition: all .3s;
}
.step.done     .step-dot { background: #22c55e; border-color: #22c55e; color: #fff; }
.step.active   .step-dot { background: #fff; border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px rgba(240,165,0,.15); }
.step.rejected .step-dot { background: #ef4444; border-color: #ef4444; color: #fff; }
.step-label { margin-top: 8px; font-size: .72rem; font-weight: 600; text-align: center; color: #94a3b8; line-height: 1.3; }
.step.done     .step-label { color: #22c55e; }
.step.active   .step-label { color: var(--accent); }
.step.rejected .step-label { color: #ef4444; }

/* ===== Info cards ===== */
.info-body { background: #fff; padding: 28px 32px; border-radius: 0 0 var(--radius) var(--radius); }
.info-block { background: #f8fafc; border: 1px solid #e8edf3; border-radius: 10px; padding: 16px 20px; }
.info-label { font-size: .7rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #94a3b8; margin-bottom: 4px; }

/* ===== Timeline ===== */
.tl-wrap { position: relative; padding-left: 44px; }
.tl-wrap::before {
    content: ''; position: absolute; left: 18px; top: 10px; bottom: 10px;
    width: 2px; background: linear-gradient(to bottom, #e2e8f0, #e2e8f0);
}
.tl-item { position: relative; margin-bottom: 20px; }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot {
    position: absolute; left: -33px; top: 6px;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.18); z-index: 1;
}
.tl-dot.tl-last { width: 26px; height: 26px; left: -35px; top: 4px; font-size: .8rem; }
.tl-card { background: #f8fafc; border: 1px solid #e8edf3; border-radius: 10px; padding: 14px 18px; }
.tl-card.tl-card-last { background: #fff; border-color: var(--accent); box-shadow: 0 2px 16px rgba(240,165,0,.12); }
.tl-badge { font-size: .75rem; }
.tl-time { font-size: .75rem; color: #94a3b8; white-space: nowrap; }
.tl-note { font-size: .87rem; color: #374151; margin: 6px 0 4px; }
.tl-by   { font-size: .75rem; color: #64748b; }

/* ===== Responsive ===== */
@media (max-width: 576px) {
    .search-card { padding: 24px 20px; margin: -44px 16px 0; }
    .status-header { padding: 22px 20px; }
    .stepper { padding: 18px 16px; }
    .info-body { padding: 20px 18px; }
    .step-label { font-size: .65rem; }
}