/**
 * Tracking — page-specific CSS (flat, modern, no gradient)
 */

/* Hero halaman */
.page-hero {
  background: var(--de-navy-50);
  padding: 3rem 0 4.5rem;
}
.page-hero h1 { font-family: 'Sora', sans-serif; font-weight: 800; }
.hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1rem; }
.hero-trust span {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fff; border: 1px solid var(--de-border); border-radius: 999px;
  padding: .45rem .9rem; font-size: .85rem; font-weight: 600; color: var(--de-navy-800);
}
.hero-trust span i { color: var(--de-yellow-600); }

/* Form card */
.track-card {
  background: #fff;
  border: 1px solid var(--de-border);
  border-radius: var(--de-radius);
  box-shadow: 0 10px 40px rgba(10, 29, 58, .08);
  padding: 1.5rem;
}
.track-form { display: flex; gap: .75rem; flex-wrap: wrap; }
.track-input-wrap {
  position: relative;
  flex: 1 1 300px;
}
.track-input-wrap i {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--de-muted);
}
.track-input-wrap input {
  width: 100%;
  height: 100%;
  min-height: 52px;
  border: 1.5px solid var(--de-border);
  border-radius: 12px;
  padding: .75rem 1rem .75rem 2.6rem;
  font-size: 1rem;
  outline: none;
  transition: border-color .2s ease;
}
.track-input-wrap input:focus {
  border-color: var(--de-navy-500);
  box-shadow: 0 0 0 3px rgba(17, 43, 84, .08);
}

/* Result card */
.track-result {
  background: #fff;
  border: 1px solid var(--de-border);
  border-radius: var(--de-radius);
  box-shadow: var(--de-shadow);
  padding: 1.75rem;
}
.track-result-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
  margin-bottom: 1.25rem;
}
.track-awb {
  font-family: 'Sora', monospace;
  font-weight: 700; font-size: 1.25rem; color: var(--de-navy-800);
}
.track-status { font-size: .85rem; padding: .5rem .9rem; }

/* Route from → to */
.track-route {
  display: flex; align-items: center; gap: 1rem;
  background: var(--de-navy-50);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}
.track-route-point { flex: 1; }
.track-route-line {
  flex: 0 0 auto;
  color: var(--de-yellow-600);
  border-top: 2px dashed var(--de-border);
  position: relative;
  min-width: 60px; text-align: center;
}
.track-route-line i {
  background: var(--de-navy-50);
  padding: 0 .4rem;
  position: relative; top: -.7rem;
}

/* Meta row */
.track-meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  font-size: .9rem; color: var(--de-text);
}
.track-meta i { color: var(--de-navy-500); margin-right: .35rem; }

/* Timeline */
.track-timeline {
  list-style: none;
  margin: 0; padding: 0 0 0 2rem;
  position: relative;
}
.track-timeline::before {
  content: '';
  position: absolute; left: 9px; top: 10px; bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--de-yellow-500) 0%, var(--de-border) 14%, var(--de-border) 100%);
}
.track-timeline .step {
  position: relative;
  padding: 0 0 1.25rem 1.5rem;
}
.track-timeline .step:last-child { padding-bottom: 0; }

/* Titik dengan ikon */
.track-timeline .step::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 9px;
  position: absolute; left: -2rem; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--de-border);
  color: var(--de-border);
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  z-index: 1;
  content: '\f111'; /* circle */
}
.track-timeline .step.done::before {
  background: var(--de-navy-800); border-color: var(--de-navy-800);
  color: #fff;
  content: '\f00c'; /* check */
}
.track-timeline .step.current::before {
  background: var(--de-yellow-500); border-color: var(--de-yellow-500);
  color: var(--de-navy-800);
  font-size: 10px;
  box-shadow: 0 0 0 5px rgba(255, 199, 44, .22);
  animation: tlPulse 2s ease-in-out infinite;
  content: '\f3c5'; /* location-dot */
}
@keyframes tlPulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(255, 199, 44, .22); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 199, 44, .12); }
}

/* Kartu langkah */
.track-timeline .step-card {
  background: #fff;
  border: 1px solid var(--de-border);
  border-radius: 12px;
  padding: .85rem 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.track-timeline .step.current .step-card {
  border-color: var(--de-yellow-500);
  box-shadow: 0 6px 18px rgba(255, 199, 44, .15);
}
.track-timeline .step:hover .step-card {
  box-shadow: var(--de-shadow);
}
.track-timeline .step-time {
  font-size: .75rem; color: var(--de-muted);
  display: inline-flex; align-items: center; gap: .35rem;
  margin-bottom: .25rem;
}
.track-timeline .step.current .step-time { color: var(--de-yellow-600); font-weight: 600; }
.track-timeline .step-title { font-weight: 700; color: var(--de-navy-800); margin: 0 0 .15rem; line-height: 1.35; }
.track-timeline .step-loc {
  font-size: .82rem; color: var(--de-muted);
  display: inline-flex; align-items: center; gap: .35rem;
}
.track-timeline .step-loc i { color: var(--de-navy-500); }

/* Empty / not found */
.track-empty { text-align: center; padding: 2.5rem 1.75rem; }
.track-empty i { font-size: 2.5rem; color: var(--de-border); }

/* Info feature (reuse style) */
.info-feature {
  background: #fff; border: 1px solid var(--de-border); border-radius: var(--de-radius);
  padding: 1.5rem; height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.info-feature:hover { transform: translateY(-4px); box-shadow: var(--de-shadow); }
.info-feature i {
  width: 48px; height: 48px;
  background: var(--de-navy-800); color: var(--de-yellow-500);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 1rem;
}
.info-feature h6 { font-weight: 700; margin-bottom: .4rem; }
.info-feature a { color: var(--de-navy-500); font-weight: 600; }

@media (max-width: 767.98px) {
  .track-card { padding: 1.25rem; }
  .track-form .btn { width: 100%; }
  .track-result { padding: 1.25rem; }
  .track-route { flex-direction: column; gap: .5rem; text-align: center; }
  .track-route-point, .track-route-point.text-end { text-align: center !important; }
  .track-route-line { display: none; }
}