/* ===== HERO ===== */
.track-hero{position:relative;background:var(--black);padding:100px 60px 72px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.06);margin-top:64px}
.track-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(255,59,59,0.05) 0%,transparent 60%)}
.track-hero-content{position:relative;z-index:1;max-width:560px}
.track-hero-label{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.track-hero-title{font-family:'ChapelliaBold',sans-serif;font-size:clamp(48px,7vw,80px);color:var(--white);letter-spacing:2px;line-height:1;margin-bottom:20px}
.track-hero-desc{font-size:13px;color:rgba(255,255,255,0.4);line-height:1.8;max-width:440px}

/* ===== SECTION ===== */
.track-section{background:#080808;padding:72px 60px 80px;min-height:60vh}
.track-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}

/* ===== FORM ===== */
.track-form-label{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.track-form-title{font-family:'ChapelliaBold',sans-serif;font-size:clamp(22px,3vw,32px);color:var(--white);letter-spacing:1px;margin-bottom:32px}
.track-alert-error{display:flex;align-items:center;gap:10px;background:rgba(255,59,59,0.08);border-left:3px solid var(--accent);padding:12px 16px;font-size:12px;color:#ff8080;margin-bottom:24px}
.track-field{margin-bottom:20px}
.track-field-label{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:8px}
.track-input{width:100%;padding:14px 18px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:var(--white);font-size:13px;font-family:'ChapelliaReg',sans-serif;outline:none;transition:border-color .2s;letter-spacing:.5px}
.track-input:focus{border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.06)}
.track-input::placeholder{color:rgba(255,255,255,0.18)}
.track-btn{width:100%;padding:16px;background:var(--white);color:var(--black);font-family:'ChapelliaBold',sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:700;border:none;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px}
.track-btn:hover{background:var(--accent);color:var(--white)}
.track-note{display:flex;align-items:flex-start;gap:8px;font-size:11px;color:rgba(255,255,255,0.18);margin-top:16px;line-height:1.6}

/* ===== RESULT ===== */
.track-result{display:flex;flex-direction:column;gap:2px}
.track-result-header{background:#111;padding:24px 28px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid rgba(255,255,255,0.06)}
.track-result-code{font-family:'ChapelliaBold',sans-serif;font-size:18px;letter-spacing:3px;color:var(--white);margin-bottom:4px}
.track-result-date{font-size:11px;color:rgba(255,255,255,0.25);letter-spacing:1px}
.track-status-badge{padding:5px 14px;font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:700;white-space:nowrap}
.track-status-pending{background:rgba(245,158,11,0.12);color:#f59e0b}
.track-status-paid{background:rgba(34,197,94,0.12);color:#22c55e}
.track-status-processing{background:rgba(59,130,246,0.12);color:#3b82f6}
.track-status-shipped{background:rgba(139,92,246,0.12);color:#8b5cf6}
.track-status-done{background:rgba(34,197,94,0.12);color:#22c55e}
.track-status-cancelled{background:rgba(239,68,68,0.12);color:#ef4444}

/* ===== PROGRESS ===== */
.track-progress{background:#111;padding:28px;border-bottom:1px solid rgba(255,255,255,0.06)}
.track-progress-label{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.2);margin-bottom:24px}
.track-progress-steps{display:flex;align-items:center}
.track-step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.track-step-circle{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,0.1);background:transparent;display:flex;align-items:center;justify-content:center;font-size:10px;color:rgba(255,255,255,0.2);font-weight:600}
.track-step.done .track-step-circle{background:var(--white);border-color:var(--white);color:var(--black)}
.track-step.active .track-step-circle{background:var(--accent);border-color:var(--accent);color:var(--white)}
.track-step-label{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.18);text-align:center}
.track-step.done .track-step-label,.track-step.active .track-step-label{color:rgba(255,255,255,0.5)}
.track-step-line{flex:1;height:1px;background:rgba(255,255,255,0.07);margin-bottom:20px}
.track-step-line.done{background:var(--white)}

/* ===== DETAIL ===== */
.track-detail{background:#111;padding:24px 28px;border-bottom:1px solid rgba(255,255,255,0.06)}
.track-detail-title{font-family:'ChapelliaBold',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:16px}
.track-detail-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:12px}
.track-detail-row:last-child{border-bottom:none}
.track-detail-label{color:rgba(255,255,255,0.25);text-transform:uppercase;letter-spacing:1px;font-size:10px}
.track-detail-val{color:var(--white);text-align:right;max-width:60%}

/* ===== ITEMS ===== */
.track-items{background:#111;padding:24px 28px}
.track-items-title{font-family:'ChapelliaBold',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:16px}
.track-item-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.04)}
.track-item-row:last-child{border-bottom:none}
.track-item-name{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--white);margin-bottom:4px}
.track-item-warna{font-size:10px;color:rgba(255,255,255,0.25);text-transform:uppercase;letter-spacing:1px}
.track-item-price{font-size:13px;font-weight:600;color:var(--white)}

/* ===== INFO CARD ===== */
.track-info-card{background:#111;border:1px solid rgba(255,255,255,0.06);padding:40px;display:flex;flex-direction:column;gap:20px}
.track-info-icon{width:56px;height:56px;border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.25)}
.track-info-title{font-family:'ChapelliaBold',sans-serif;font-size:18px;letter-spacing:2px;color:var(--white)}
.track-info-desc{font-size:12px;color:rgba(255,255,255,0.3);line-height:1.8}
.track-info-steps{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.track-info-step{display:flex;align-items:flex-start;gap:14px;font-size:12px;color:rgba(255,255,255,0.35);line-height:1.5}
.track-info-step-num{font-family:'ChapelliaBold',sans-serif;font-size:11px;letter-spacing:2px;color:rgba(255,255,255,0.15);flex-shrink:0;width:24px}
.track-info-btn{padding:12px 24px;background:transparent;color:var(--white);font-family:'ChapelliaBold',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;border:1px solid rgba(255,255,255,0.15);display:inline-block;transition:all .2s;align-self:flex-start;margin-top:4px}
.track-info-btn:hover{border-color:var(--white);background:rgba(255,255,255,0.05)}

/* ===== TABLET 1024 ===== */
@media(max-width:1024px){
  .track-section{padding:60px 40px 72px}
  .track-grid{gap:40px}
  .track-hero{padding:80px 40px 60px}
}

/* ===== MOBILE 768 ===== */
@media(max-width:768px){
  .track-hero{padding:72px 20px 48px;margin-top:64px}
  .track-hero-label{font-size:9px;letter-spacing:3px}
  .track-hero-title{font-size:clamp(28px,7vw,42px);letter-spacing:1px}
  .track-hero-desc{font-size:12px;line-height:1.8}
  .track-section{padding:36px 20px 52px}
  .track-grid{grid-template-columns:1fr;gap:32px}
  .track-form-label{font-size:9px}
  .track-form-title{font-size:clamp(18px,5vw,26px);letter-spacing:.5px;margin-bottom:24px}
  .track-field-label{font-size:9px;letter-spacing:1px}
  .track-input{padding:12px 16px;font-size:12px}
  .track-btn{padding:14px;font-size:10px;letter-spacing:2px}
  .track-result-header{flex-direction:column;gap:10px;align-items:flex-start;padding:20px}
  .track-result-code{font-size:15px;letter-spacing:2px}
  .track-result-date{font-size:10px}
  .track-progress{padding:18px}
  .track-step-circle{width:28px;height:28px;font-size:9px}
  .track-step-label{font-size:7px;letter-spacing:.5px}
  .track-detail,.track-items{padding:18px}
  .track-detail-label{font-size:9px}
  .track-info-card{padding:24px 20px}
  .track-info-title{font-size:16px;letter-spacing:1px}
  .track-info-desc{font-size:11px}
  .track-info-step{font-size:11px}
}