/* ==========================================================================
   STYLE UNIVERSAL LAYANAN PUBLIK & LACAK RESI (SIGAP-MAN)
   ========================================================================== */

body { 
    background-color: var(--slate-bg); 
    margin: 0; 
    font-family: 'Poppins', sans-serif; 
    color: var(--slate-dark); 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column;
}

/* Navbar Global */
.navbar { 
    background-color: var(--slate-dark); 
    padding: 15px 5%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 3px solid var(--emerald-vibrant); 
}
.navbar h1 { 
    color: var(--slate-surface); 
    margin: 0; 
    font-size: 20px; 
    font-weight: 700; 
}
.btn-outline { 
    border: 2px solid var(--emerald-vibrant); 
    color: white; 
    padding: 8px 18px; 
    text-decoration: none; 
    border-radius: 8px; 
    font-size: 14px; 
    font-weight: 600; 
    transition: 0.3s; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
}
.btn-outline:hover { 
    background-color: var(--emerald-vibrant); 
    color: var(--slate-dark); 
}

/* Layout Utama Halaman Lacak & Form Wrapper */
.container { 
    max-width: 800px; 
    margin: 40px auto; 
    padding: 0 20px; 
    flex-grow: 1; 
    width: 100%; 
    box-sizing: border-box;
}
.form-container-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    flex-grow: 1;
}

/* Komponen Struktur Formulir Pengajuan */
.form-wrapper { 
    background-color: var(--slate-surface); 
    max-width: 700px; 
    width: 100%; 
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
    border: 1px solid var(--slate-border); 
    border-top: 4px solid var(--emerald-vibrant); 
    overflow: hidden; 
    margin: 20px auto;
}
.form-header { padding: 30px 40px; border-bottom: 1px solid var(--slate-border); text-align: center; }
.form-header h2 { color: var(--slate-dark); margin: 0 0 10px 0; font-size: 24px; }
.badge-layanan { background-color: var(--slate-dark); color: var(--emerald-vibrant); padding: 5px 15px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.form-body { padding: 40px; }
.form-group { margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

/* Komponen Elemen Input & Label */
label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--slate-dark); font-size: 14px; }
input[type="text"], input[type="email"], input[type="date"], input[type="time"], input[type="tel"], input[type="file"], textarea { 
    width: 100%; 
    padding: 12px 15px; 
    border: 2px solid var(--slate-border); 
    border-radius: 8px; 
    background-color: var(--slate-bg); 
    color: var(--slate-dark); 
    font-family: 'Poppins', sans-serif; 
    box-sizing: border-box; 
    transition: 0.3s;
}
input:focus, textarea:focus { border-color: var(--emerald-vibrant); outline: none; background-color: var(--slate-surface); }
input[readonly] { background-color: #E2E8F0; color: #64748B; cursor: not-allowed; border-color: #CBD5E1;} 

/* Tombol Aksi */
.btn-submit { width: 100%; background-color: var(--slate-dark); color: var(--slate-surface); padding: 14px; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.3s;}
.btn-submit:hover { background-color: var(--emerald-vibrant); color: var(--slate-dark); box-shadow: 0 4px 15px var(--emerald-glow); }
.btn-verify { background-color: var(--emerald-vibrant); color: var(--slate-dark); border: none; padding: 12px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: 0.3s; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;}
.btn-verify:hover { background-color: var(--slate-dark); color: var(--emerald-vibrant); }
.btn-back { display: inline-block; margin-bottom: 20px; color: var(--slate-medium); text-decoration: none; font-weight: 500; font-size: 14px; transition: color 0.3s; }
.btn-back:hover { color: var(--emerald-vibrant); }

/* Komponen Halaman Pelacakan (lacak.php) */
.search-container { background: var(--slate-surface); padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); text-align: center; border: 1px solid var(--slate-border); margin-bottom: 30px;}
.search-container h2 { margin: 0 0 10px 0; font-size: 28px; }
.search-container p { color: var(--slate-medium); margin-bottom: 25px; }
.search-box { display: flex; max-width: 500px; margin: 0 auto; border: 2px solid var(--slate-border); border-radius: 10px; overflow: hidden; transition: 0.3s;}
.search-box:focus-within { border-color: var(--emerald-vibrant); box-shadow: 0 0 15px var(--emerald-glow); }
.search-box input { flex-grow: 1; padding: 15px 20px; border: none; outline: none; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; text-transform: uppercase;}
.search-box button { background: var(--emerald-vibrant); color: white; border: none; padding: 0 25px; font-size: 16px; cursor: pointer; font-weight: 600; transition: 0.3s;}

/* Manifes Kartu Hasil Pelacakan */
.result-card { background: var(--slate-surface); border-radius: 15px; border: 1px solid var(--slate-border); overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.03); animation: slideUp 0.5s ease;}
.result-header { background: var(--slate-dark); padding: 20px 30px; color: white; display: flex; justify-content: space-between; align-items: center;}
.result-header h3 { margin: 0; font-size: 18px; color: var(--slate-surface);}
.result-header .resi { color: white; font-family: monospace; font-size: 18px; letter-spacing: 1px; background: rgba(255,255,255,0.1); padding: 5px 10px; border-radius: 6px;}
.result-body { padding: 30px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; background: var(--slate-bg); padding: 20px; border-radius: 10px; border: 1px solid var(--slate-border);}
.info-item label { display: block; font-size: 12px; color: var(--slate-medium); text-transform: uppercase; font-weight: 600; margin-bottom: 5px;}
.info-item div { font-size: 15px; font-weight: 500; color: var(--slate-dark);}

/* Timeline Riwayat Berkas */
.timeline-wrapper { position: relative; padding-left: 30px; }
.timeline-wrapper::before { content: ''; position: absolute; left: 9px; top: 5px; bottom: 5px; width: 2px; background: var(--slate-border); }
.step { position: relative; padding-bottom: 30px; }
.step:last-child { padding-bottom: 0; }
.step-icon { position: absolute; left: -30px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--slate-surface); border: 2px solid var(--slate-border); display: flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; z-index: 1;}
.step.active .step-icon { background: var(--emerald-vibrant); border-color: var(--emerald-vibrant); color: var(--slate-dark); }
.step.active.danger .step-icon { background: #EF4444; border-color: #EF4444; color: white; }
.step-content h4 { margin: 0 0 5px 0; font-size: 16px; color: var(--slate-dark); }
.step-content p { margin: 0; font-size: 13px; color: var(--slate-medium); line-height: 1.5; }

/* Sistem Komponen Alert & Resi */
.alert { padding: 15px 20px; border-radius: 8px; margin-bottom: 25px; font-size: 14px; display: flex; align-items: center; gap: 15px; box-sizing: border-box;}
.alert.error { background-color: #FEF2F2; color: #991B1B; border: 1px solid #F87171; }
.alert.success { background-color: #F0FDF4; color: #065F46; border: 1px solid #34D399; flex-direction: column; text-align: center; padding: 30px; }
.resi-box { background-color: var(--slate-dark); color: white; font-size: 24px; font-weight: 700; padding: 15px 30px; border-radius: 8px; margin: 15px 0; letter-spacing: 2px; display: inline-block; }

/* Logic Visibility Form & Loading Spinner */
#formCutiUtama, #formTugasUtama { display: none; margin-top: 25px; padding-top: 25px; border-top: 2px dashed var(--slate-border);}
.spinner { border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top: 3px solid var(--slate-dark); width: 20px; height: 20px; animation: spin 1s linear infinite; display: none;}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.footer { text-align: center; padding: 20px; color: var(--slate-medium); font-size: 13px; margin-top: auto;}