*{
box-sizing:border-box;
margin:0;
padding:0;
font-family:Poppins, sans-serif;
}

body{
background:#f4f7fb;
color:#333;
}

/* ================= HEADER ================= */
header{
display:flex;
justify-content:space-between;
align-items:center;

background:linear-gradient(90deg,#1f6f78,#00c2c7);
padding:16px 5%;
color:white;
box-shadow:0 3px 12px rgba(0,0,0,0.2);
border-radius:0 0 20px 20px;
}

#logo-container{
display:flex;
align-items:center;
gap:12px;
flex-shrink:0;
}

#logo-container div{
display:flex;
flex-direction:column;
justify-content:center;
}

#logo-container h1{
font-size:20px;
font-weight:700;
letter-spacing:1px;
margin:0;
line-height:1.2;
}

.tagline{
font-size:11px;
letter-spacing:1px;
line-height:1.2;
white-space:nowrap;
}

/* SOCIAL HEADER */
.social-header{
display:flex;
gap:18px;
font-size:22px;
flex-shrink:0;
}

.social-header a{
color:white;
transition:.3s;
}

.social-header a:hover{
transform:scale(1.2);
color:#e8fefe;
}

/* ================= NAV ================= */
.top-nav{
display:flex;
gap:10px;
padding:10px;
background:white;
position:sticky;
top:0;
z-index:10;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.nav-btn{
flex:1;
text-align:center;
padding:10px;
border-radius:8px;
background:#eee;
text-decoration:none;
color:#333;
font-size:14px;
font-weight:600;
transition:.25s;
}

.nav-btn:hover{
background:#1f6f78;
color:white;
transform:translateY(-2px);
}

/* ================= CONTAINER ================= */
.container{
max-width:1200px;
margin:auto;
padding:30px 20px;
}

h2{
margin-bottom:20px;
font-size:22px;
}

/* ================= SEARCH ================= */
.search-box{
margin-bottom:20px;
}

.search-box input{
width:100%;
max-width:350px;
padding:10px 14px;
border-radius:8px;
border:1px solid #ddd;
font-size:14px;
}

.search-box input:focus{
border-color:#00c2c7;
outline:none;
box-shadow:0 0 0 2px rgba(0,194,199,0.15);
}

/* ================= TABLE ================= */

.table-wrapper{
width:100%;
overflow-x:auto;
}

table{
width:100%;
border-collapse:collapse;
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:0 8px 20px rgba(0,0,0,0.05);
min-width:800px;
}

thead{
background:#e8f8f8;
color:#1f6f78;
}

th,td{
padding:14px;
text-align:center;
font-size:14px;
border-bottom:1px solid #eee;
}

tbody tr:hover{
background:#f9ffff;
}

/* STATUS BADGE */
.status-badge{
padding:6px 14px;
border-radius:20px;
font-weight:600;
font-size:13px;
}

.status-pending{
background:#f3e3b5;
color:#7a5b00;
}

.status-proses{
background:#cfe2ff;
color:#084298;
}

.status-selesai{
background:#d1e7dd;
color:#0f5132;
}

/* DETAIL BUTTON */
.detail-btn{
background:linear-gradient(90deg,#1f6f78,#00c2c7);
color:white;
border:none;
padding:6px 14px;
border-radius:20px;
cursor:pointer;
transition:.3s;
}

.detail-btn:hover{
transform:translateY(-2px);
box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

/* ================= MODAL ================= */

.modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.5);
justify-content:center;
align-items:center;
z-index:999;
padding:20px;
}

.modal-content{
background:white;
width:100%;
max-width:750px;
border-radius:18px;
padding:25px;
max-height:90vh;
overflow-y:auto;
animation:fadeIn .2s ease;
position:relative;
}

@keyframes fadeIn{
from{opacity:0; transform:translateY(10px);}
to{opacity:1; transform:translateY(0);}
}

.close{
position:absolute;
right:20px;
top:15px;
font-size:22px;
cursor:pointer;
}

/* DETAIL GRID */
.detail-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-top:20px;
}

.detail-grid div{
background:#f9fbfc;
padding:12px;
border-radius:10px;
font-size:14px;
}

.detail-grid b{
display:block;
margin-bottom:5px;
color:#1f6f78;
}

/* ===== FOOTER ===== */
footer{
margin-top:30px;
background:linear-gradient(90deg,#0b1c22,#2b4d58);
color:white;
text-align:center;
padding:15px;
font-size:13px;
border-radius:12px 12px 0 0;
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){

.main-header{
flex-direction:column;
gap:15px;
}

.nav-menu{
flex-wrap:wrap;
justify-content:center;
}

.hero h2{
font-size:22px;
}

}

/* ================= MOBILE ================= */
@media(max-width:768px){

.main-header{
flex-direction:column;
align-items:flex-start;
}

.main-nav{
flex-wrap:wrap;
gap:15px;
}

table{
min-width:100%;
}

thead{
display:none;
}

table, tbody, tr, td{
display:block;
width:100%;
}

tr{
background:white;
margin-bottom:15px;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
padding:12px;
}

td{
border:none;
padding:8px 0;
display:flex;
justify-content:space-between;
font-size:13px;
}

td::before{
font-weight:600;
color:#1f6f78;
}

td:nth-child(1)::before{content:"No";}
td:nth-child(2)::before{content:"Nama";}
td:nth-child(3)::before{content:"Alamat";}
/* td:nth-child(4)::before{content:"No HP";} */
td:nth-child(4)::before{content:"Tanggal";}
td:nth-child(5)::before{content:"Status";}
/* td:nth-child(7)::before{content:"Total";} */
td:nth-child(6)::before{content:"Aksi";}

.detail-grid{
grid-template-columns:1fr;
}

}

@media(max-width:768px){

.top-nav{
gap:10px;
padding:10px 4%;
}

.nav-btn{
flex:1 1 30%;     /* 3 tombol rata */
font-size:13px;
padding:10px;
}

}

/* ============= Tambah Sparepart =========== */
.sp-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 0;
  border-bottom:1px solid #eee;
  font-size:14px;
}

.sp-name{
  flex:2;
  font-weight:600;
}

.sp-qty{
  flex:1;
  text-align:center;
}

.sp-total{
  flex:1;
  text-align:right;
  color:#009688;
  font-weight:600;
}

/* ================= MOBILE ================= */
@media(max-width:600px){

.form-section{
margin:15px;
padding:18px;
}

.product-card img{
height:110px;
}

.nav-btn{
font-size:14px;
padding:10px;
}

}

/* ================= STATUS BASE ================= */
.status-badge {
  padding: 6px 14px;
  border-radius: 12px;
  font-weight: 700;
  display: inline-block;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;

  text-transform: uppercase;   /* ini yang membuat huruf kapital */
  letter-spacing: 0.5px;       /* biar lebih tegas */
}

/* ================= PENDING ================= */
.status-pending {
  background: #ffe082;
  color: #5c4500;
  animation: pendingPulse 1.8s infinite;
}

@keyframes pendingPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 12px 4px rgba(255, 193, 7, 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
}

/* ================= PROSES ================= */
.status-proses {
  background: #2196f3;
  color: white;
  overflow: hidden;
}

/* efek cahaya jalan */
.status-proses::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  animation: slide 1.2s infinite;
}

@keyframes slide {
  0% { left: -120%; }
  100% { left: 120%; }
}

/* ================= SELESAI ================= */
.status-selesai {
  background: #4caf50;
  color: white;
  animation: successPop 1.5s infinite;
}

@keyframes successPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ================= BATAL ================= */
.status-batal {
  background: #f44336;
  color: white;
  animation: dangerShake 0.6s infinite;
}

@keyframes dangerShake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

/* ================= CLICK EFFECT ================= */
.status-badge:active {
  transform: scale(0.95);
}

/* ================= STATUS ACTIVE ================= */
.status-active {
  outline: 2px solid #fff;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  transform: scale(1.1);
}

/* ================= POPUP ================= */
.status-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;

  animation: popupFade 0.25s ease;
}

.status-popup h3{
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
}

.popup-content {
  background: white;
  padding: 25px;
  border-radius: 12px;
  width: 300px;
  text-align: center;

  animation: popupZoom 0.35s ease;
}

/* icon bergerak terus */
.popup-content i{
  font-size:42px;
  margin-bottom:10px;

  animation: iconFloat 1.4s ease-in-out infinite;
}

/* judul bergerak halus */
.popup-content h3{
  margin-top:8px;
  font-weight:700;

  animation: titlePulse 2s ease-in-out infinite;
}

/* teks berkedip lembut */
.popup-content p{
  margin-top:4px;
  opacity:.85;

  animation: textFade 2.5s ease-in-out infinite;
}

/* ================= ANIMATIONS ================= */

@keyframes popupFade{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes popupZoom{
  0%{
    transform: scale(0.7);
    opacity:0;
  }
  70%{
    transform: scale(1.05);
  }
  100%{
    transform: scale(1);
    opacity:1;
  }
}

/* icon naik turun terus */
@keyframes iconFloat{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
  100%{ transform: translateY(0); }
}

/* judul pulse */
@keyframes titlePulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}

/* teks fade */
@keyframes textFade{
  0%{ opacity:.6; }
  50%{ opacity:1; }
  100%{ opacity:.6; }
}

/* ================= ICON ANIMATION ================= */

/* pending - jam pasir berputar */
.status-popup.pending i{
  animation: spinSlow 2s linear infinite;
}

/* proses - tools berputar */
.status-popup.proses i{
  animation: spinFast 1.2s linear infinite;
}

/* selesai - ceklis pulse */
.status-popup.selesai i{
  animation: successPulse 1.2s ease-in-out infinite;
}

/* batal - silang shake */
.status-popup.batal i{
  animation: iconShake 0.5s infinite;
}

/* ================= TEXT ANIMATION ================= */

/* pending & proses - teks geser */
.status-popup.pending h3,
.status-popup.proses h3{
  animation: slideText 2s ease-in-out infinite alternate;
}

/* selesai - teks naik turun */
.status-popup.selesai h3{
  animation: floatText 1.5s ease-in-out infinite;
}

/* batal - teks getar */
.status-popup.batal h3{
  animation: shakeText 0.4s infinite;
}

/* ================= KEYFRAMES ================= */

@keyframes spinSlow{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes spinFast{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes successPulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.2); }
  100%{ transform: scale(1); }
}

@keyframes iconShake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-3px); }
  50%{ transform: translateX(3px); }
  75%{ transform: translateX(-3px); }
  100%{ transform: translateX(0); }
}

@keyframes slideText{
  0%{ transform: translateX(-8px); }
  100%{ transform: translateX(8px); }
}

@keyframes floatText{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
  100%{ transform: translateY(0); }
}

@keyframes shakeText{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-2px); }
  50%{ transform: translateX(2px); }
  75%{ transform: translateX(-2px); }
  100%{ transform: translateX(0); }
}

/* floating chat */
.floating-wa{
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 999;
}

.floating-wa a{
  width:60px;
  height:60px;
  background:#00c2c7;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:28px;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,0.25);
  transition:0.3s;
}

.floating-wa a:hover{
  transform:scale(1.1);
}

/* ================= SERVICE PROGRESS ================= */
.service-progress{
display:flex;
align-items:center;
justify-content:space-between;
margin:20px 0 30px;
}

.progress-step{
text-align:center;
flex:1;
}

.step-icon{
width:50px;
height:50px;
border-radius:50%;
background:#eaf7ef;
color:#2e7d32;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
font-size:20px;
}

.progress-line{
flex:1;
height:3px;
background:#4caf50;
margin:0 10px;
}

.step-text p{
font-size:12px;
color:#777;
margin-top:4px;
}

.service-count{
margin:10px 0 20px;
font-size:15px;
color:#444;
}