.tbss-tracking{

max-width:750px;

margin:50px auto;

background:#ffffff;

padding:35px;

border-radius:18px;

box-shadow:0 12px 35px rgba(0,0,0,.08);

font-family:Arial,sans-serif;

}

.tbss-tracking h2{

text-align:center;

margin-bottom:30px;

font-size:30px;

color:#1e3a8a;

}

.tbss-tracking input{

width:100%;

padding:15px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

margin-bottom:20px;

box-sizing:border-box;

}
.tbss-tracking input:focus{

background:#ffffff !important;;

color:#222222 !important;;

border-color:#2563eb;

outline:none;

box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

.tbss-tracking input::placeholder{

color:#9ca3af !important;;

opacity:1;

}

.tbss-tracking button{

width:100%;

padding:15px;

background:#2563eb;

color:#fff;

border:none;

border-radius:10px;

font-size:18px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

.tbss-tracking button:hover{

background:#1d4ed8;

}
/* ============================= */
/* HASIL TRACKING */
/* ============================= */

.tbss-card{

margin-top:35px;

background:#fff;

border-radius:18px;

padding:30px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.tbss-status{

display:inline-block;

padding:10px 20px;

background:#2563eb;

color:#fff;

font-weight:bold;

border-radius:30px;

margin-bottom:25px;

}

.tbss-card h3{

margin:0 0 25px;

font-size:28px;

color:#222;

}

.tbss-info{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

}

.tbss-info div{

background:#f8fafc;

padding:18px;

border-radius:12px;

}

.tbss-info strong{

display:block;

margin-bottom:8px;

color:#666;

font-size:14px;

text-transform:uppercase;

}

.tbss-info p{

margin:0;

font-size:17px;

line-height:1.6;

color:#111;

}
@media(max-width:768px){

.tbss-info{

grid-template-columns:1fr;

}

.tbss-card{

padding:20px;

}

.tbss-tracking{

padding:20px;

margin:20px;

}

}
/* ===========================
VERTICAL TIMELINE
=========================== */

.tbss-timeline{

margin:30px 0;

}

.tbss-step{

position:relative;

display:flex;

align-items:center;

padding:12px 0 12px 38px;

font-size:16px;

font-weight:600;

color:#9ca3af;

}

.tbss-step::before{

content:"";

position:absolute;

left:13px;

top:0;

bottom:0;

width:2px;

background:#d1d5db;

}

.tbss-step:first-child::before{

top:20px;

}

.tbss-step:last-child::before{

bottom:20px;

}

.tbss-icon{

position:absolute;

left:0;

top:50%;

transform:translateY(-50%);

font-size:22px;

font-weight:bold;

color:#9ca3af;

background:#fff;

padding:2px 4px;

z-index:2;

}

.tbss-step.done{

color:#2563eb;

}

.tbss-step.done::before{

background:#2563eb;

}

.tbss-step.done .tbss-icon{

color:#2563eb;

}

.tbss-text{

line-height:1.4;

}
/* ===========================
TIMELINE MOBILE
=========================== */

@media (max-width:768px){

.tbss-step{

padding:18px 0 18px 50px;

font-size:17px;

font-weight:700;

}

.tbss-step::before{

left:16px;

}

.tbss-icon{

left:0;

font-size:26px;

}

.tbss-text{

font-size:16px;

line-height:1.6;

}

}