@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');
:root{--ink:#edf8f7;--dim:#91aeb2;--line:#294952;--bg:#060b0f;--panel:#122129;--blue:#37b9f4;--cyan:#5edfd1;--lime:#d8f548;--orange:#e39a57;font-family:'Space Grotesk','Segoe UI',sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 76% 2%,rgba(39,130,190,.25),transparent 28%),radial-gradient(circle at 14% 56%,rgba(11,156,144,.12),transparent 32%),var(--bg)}button,input,textarea{font:inherit}.consumer-shell{width:min(1200px,100%);margin:auto;padding:28px 44px 24px}.consumer-topbar{display:flex;justify-content:space-between;align-items:center}.consumer-brand{display:block;width:190px}.consumer-brand img{display:block;width:100%;height:auto}.consumer-actions{display:flex;align-items:center;gap:24px;font:600 12px 'Rajdhani',sans-serif;letter-spacing:.8px;text-transform:uppercase}.secure-label{color:#9cb5b8}.secure-label i,.live-label i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-right:7px;box-shadow:0 0 0 4px rgba(94,223,209,.12)}.language-button{border:0;background:none;color:var(--dim);font:600 12px 'Rajdhani',sans-serif}.language-button span{color:var(--blue);font-size:16px;margin-left:5px}.consumer-hero{display:flex;align-items:center;justify-content:space-between;min-height:325px;border-bottom:1px solid rgba(67,113,122,.4);position:relative}.eyebrow{font:700 10px 'Rajdhani',sans-serif;text-transform:uppercase;letter-spacing:1.7px;color:#7ba3ab;margin:0 0 14px}.hero-copy h1{font:600 clamp(42px,6vw,70px) 'Rajdhani',sans-serif;line-height:.92;letter-spacing:.03em;margin:0}.hero-copy h1 em{font-style:normal;color:var(--blue)}.hero-text{max-width:455px;color:var(--dim);font-size:15px;line-height:1.65;margin:23px 0 0}.hero-orbit{width:270px;height:270px;position:relative;margin-right:80px}.orbit{position:absolute;border:1px solid rgba(55,185,244,.42);border-radius:50%;inset:12px}.orbit-one{transform:rotate(34deg) scaleY(.48);box-shadow:0 0 28px rgba(55,185,244,.18)}.orbit-two{inset:0;transform:rotate(-34deg) scaleY(.48);border-color:rgba(94,223,209,.32)}.bolt{position:absolute;inset:0;display:grid;place-items:center;color:var(--blue);font:125px Arial;text-shadow:0 0 22px rgba(55,185,244,.7)}.orbit-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--lime);box-shadow:0 0 15px rgba(216,245,72,.7)}.dot-one{top:34px;right:31px}.dot-two{bottom:43px;left:26px;background:var(--cyan)}.consumer-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(340px,.85fr);gap:18px;margin-top:28px}.consumer-card{background:linear-gradient(145deg,rgba(22,42,50,.98),rgba(12,25,32,.98));border:1px solid var(--line);box-shadow:0 20px 55px rgba(0,0,0,.2);padding:28px}.card-heading{display:flex;justify-content:space-between;align-items:flex-start}.card-heading h2,.help-card h2{font:600 28px 'Rajdhani',sans-serif;letter-spacing:.02em;margin:0}.card-code,.live-label{font:700 10px 'Rajdhani',sans-serif;letter-spacing:1.2px;color:#73a4ad}.live-label{color:var(--cyan)}.card-intro{font-size:13px;color:var(--dim);line-height:1.5;margin:12px 0 24px}.request-card form{display:grid;gap:15px}label{display:grid;gap:7px;font:700 10px 'Rajdhani',sans-serif;letter-spacing:1px;text-transform:uppercase;color:#82a0a5}input,textarea{width:100%;border:1px solid #2c4b54;background:#0a171d;color:var(--ink);padding:12px 13px;outline-color:var(--blue);font:13px 'Space Grotesk',sans-serif;text-transform:none;letter-spacing:0}textarea{resize:vertical;min-height:92px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.electric-button{display:flex;justify-content:space-between;align-items:center;border:0;background:var(--blue);color:#061018;padding:14px 16px;font:700 12px 'Rajdhani',sans-serif;letter-spacing:1px;text-transform:uppercase;margin-top:3px}.electric-button:hover{background:var(--lime)}.electric-button span{font-size:18px}.success-message{min-height:15px;color:var(--cyan);font-size:11px;margin:0}.consumer-side{display:grid;gap:18px}.tracking-card{padding-bottom:23px}.order-id{border-top:1px solid #294952;border-bottom:1px solid #294952;margin:22px 0;padding:14px 0}.order-id span{display:block;font:700 24px 'Rajdhani',sans-serif;letter-spacing:1px;color:var(--blue)}.order-id small{display:block;color:var(--dim);font-size:10px;margin-top:4px}.status-track{padding:4px 0 10px}.track-line{display:flex;align-items:center;justify-content:space-between;position:relative}.track-line::before{content:'';position:absolute;left:5px;right:5px;height:2px;background:#2b454d}.track-line i{position:relative;width:12px;height:12px;border:2px solid #52717a;background:var(--panel);border-radius:50%;z-index:1}.track-line i.done{background:var(--cyan);border-color:var(--cyan)}.track-line i.active{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 5px rgba(55,185,244,.15)}.track-labels{display:flex;justify-content:space-between;color:#78969c;font:10px 'Rajdhani',sans-serif;margin-top:10px}.track-labels span{max-width:65px}.track-labels span:nth-child(2),.track-labels span:nth-child(3){text-align:center}.track-labels span:last-child{text-align:right}.mechanic-contact{display:flex;align-items:center;gap:11px;margin-top:24px}.contact-avatar{display:grid;place-items:center;width:38px;height:38px;background:#21445a;color:var(--cyan);font:700 11px 'Rajdhani',sans-serif}.mechanic-contact strong,.mechanic-contact small{display:block}.mechanic-contact strong{font-size:13px}.mechanic-contact small{font-size:10px;color:var(--dim);margin-top:4px}.contact-button{margin-left:auto;border:1px solid #347484;background:transparent;color:var(--cyan);width:34px;height:34px;font-size:18px}.help-card{display:flex;align-items:center;gap:17px;background:linear-gradient(135deg,#d8f548,#92ba38);color:var(--ink);padding:24px}.help-card .eyebrow{color:#4e6837;margin-bottom:8px}.help-card h2{font-size:21px}.help-card a{display:inline-block;margin-top:13px;color:var(--ink);font:700 12px 'Rajdhani',sans-serif;text-decoration:none;letter-spacing:.6px}.help-card a span{font-size:16px;margin-left:5px}.help-icon{display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--ink);font:700 20px 'Rajdhani',sans-serif;border-radius:50%;flex-shrink:0}footer{display:flex;justify-content:space-between;color:#6f8d93;font:10px 'Rajdhani',sans-serif;letter-spacing:1px;text-transform:uppercase;margin-top:25px}@media(max-width:800px){.consumer-shell{padding:22px 20px}.hero-orbit{margin-right:0;width:190px;height:190px}.bolt{font-size:90px}.consumer-grid{grid-template-columns:1fr}.consumer-hero{min-height:280px}}@media(max-width:540px){.consumer-brand{width:150px}.secure-label{display:none}.consumer-hero{min-height:345px;align-items:flex-start;padding-top:45px}.hero-orbit{position:absolute;right:-20px;bottom:-28px;opacity:.55}.hero-copy h1{font-size:48px}.field-row{grid-template-columns:1fr}.consumer-card{padding:21px}.card-heading h2{font-size:24px}footer{display:block;line-height:2}}

/* Atribut hidden harus mengalahkan display:flex pada .mechanic-contact. */
[hidden]{display:none !important}

/* Form lacak order. Dibutuhkan karena localStorage tidak berpindah antar
   perangkat, jadi pelanggan harus bisa memasukkan nomor order manual. */
.track-form {
  display: flex;
  gap: 8px;
  margin: 4px 0 14px;
}
.track-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
}
.track-form input:focus {
  outline: none;
  border-color: #00d9ff;
}
.track-button {
  padding: 10px 16px;
  border-radius: 10px;
  border: 0;
  background: #00d9ff;
  color: #04121a;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.track-button:hover { filter: brightness(1.08); }
.track-empty {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  opacity: 0.7;
}
/* Atribut hidden harus mengalahkan display dari kelas lain. */
.tracking-card [hidden] { display: none !important; }