/* =====================================================================
   Gaya tambahan untuk fitur dinamis (lacak kiriman, detail, sidebar, dll.)
   ===================================================================== */

.badge-oranye { background-color: var(--primary); color: #fff; }

/* Paginasi */
.pagination .page-link { color: var(--dark); border-radius: 0 !important; margin: 0 3px; }
.pagination .page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); color: #fff; }
.pagination .page-link:focus { box-shadow: none; }

/* Lacak cepat di beranda */
.lacak-cepat { position: relative; z-index: 5; margin-top: -55px; }
.lacak-cepat-form { border-bottom: 4px solid var(--primary); }
@media (max-width: 991.98px) { .lacak-cepat { margin-top: 30px; } }

/* Halaman lacak */
.lacak-form .form-control:focus { box-shadow: none; }
.hasil-lacak { border-top: 4px solid var(--primary); }
.info-rute { background: var(--light); border-left: 4px solid var(--primary); }

.progres-lacak { display: flex; justify-content: space-between; position: relative; }
.progres-lacak::before {
    content: ""; position: absolute; top: 25px; left: 12%; right: 12%; height: 4px; background: #e5e5e5; z-index: 0;
}
.progres-lacak .langkah { flex: 1; text-align: center; position: relative; z-index: 1; font-size: 14px; }
.progres-lacak .langkah .ikon {
    width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
    background: #e5e5e5; color: #999; font-size: 20px; border: 4px solid #fff; transition: .3s;
}
.progres-lacak .langkah.selesai .ikon { background: var(--primary); color: #fff; }
.progres-lacak .langkah.aktif .ikon { box-shadow: 0 0 0 6px rgba(253, 85, 35, .2); }
.progres-lacak .langkah.selesai span { color: var(--dark); font-weight: 600; }

.timeline-lacak { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline-lacak li { display: flex; position: relative; padding-bottom: 25px; }
.timeline-lacak li .waktu { width: 150px; flex-shrink: 0; font-size: 13px; text-align: right; padding-right: 25px; }
.timeline-lacak li .isi { position: relative; padding-left: 25px; border-left: 2px solid #e5e5e5; padding-bottom: 5px; flex: 1; }
.timeline-lacak li:last-child .isi { border-left-color: transparent; }
.timeline-lacak li .isi::before {
    content: ""; position: absolute; left: -8px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #ccc; border: 3px solid #fff; box-shadow: 0 0 0 1px #ccc;
}
.timeline-lacak li.terbaru .isi::before { background: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.timeline-lacak li.terbaru h6 { color: var(--primary); }
@media (max-width: 575.98px) {
    .timeline-lacak li .waktu { width: 95px; padding-right: 15px; }
    .progres-lacak .langkah { font-size: 11px; }
    .progres-lacak .langkah .ikon { width: 42px; height: 42px; font-size: 16px; }
    .progres-lacak::before { top: 19px; }
}

/* Sidebar detail */
.sidebar-box { border-top: 3px solid var(--primary); }
.list-layanan a { display: block; padding: 12px 15px; margin-bottom: 8px; background: #fff; color: var(--dark); transition: .3s; }
.list-layanan a:hover, .list-layanan a.active { background: var(--primary); color: #fff; }
.sidebar-cta p { color: #ccc; }
.artikel-mini img { object-fit: cover; flex-shrink: 0; }
.artikel-mini h6 { color: var(--dark); transition: .3s; }
.artikel-mini:hover h6 { color: var(--primary); }
.meta-artikel a { color: var(--body-color); }

/* Konten HTML dari editor */
.konten-artikel { line-height: 1.85; }
.konten-artikel img { max-width: 100%; height: auto; }
.konten-artikel h2, .konten-artikel h3, .konten-artikel h4 { margin-top: 1.5rem; margin-bottom: 1rem; }
.konten-artikel ul, .konten-artikel ol { padding-left: 1.3rem; margin-bottom: 1rem; }
.konten-artikel li { margin-bottom: .4rem; }
.konten-artikel blockquote { border-left: 4px solid var(--primary); padding: 10px 20px; background: var(--light); font-style: italic; }
.konten-artikel table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.konten-artikel table td, .konten-artikel table th { border: 1px solid #ddd; padding: 8px; }

/* Hasil pencarian */
.hasil-cari { color: var(--body-color); transition: .3s; }
.hasil-cari img { object-fit: cover; flex-shrink: 0; }
.hasil-cari h5 { transition: .3s; }
.hasil-cari:hover { box-shadow: 0 0 20px rgba(0, 0, 0, .08); }
.hasil-cari:hover h5 { color: var(--primary); }

/* Tombol WhatsApp melayang */
.btn-whatsapp {
    position: fixed; left: 30px; bottom: 30px; z-index: 99; width: 55px; height: 55px; border-radius: 50%;
    background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .2); transition: .3s;
}
.btn-whatsapp:hover { color: #fff; transform: scale(1.08); }

/* Proyek: teks panjang tetap rapi */
.project-nav a span:last-child { line-height: 1.3; }